Merge branch 'add-headless-autocomplete' of https://github.com/thejackshelton/qwik-ui into add-headless-autocomplete

Author: thejackshelton

CONTRIBUTING.md

@@ -118,7 +118,21 @@ If you need to update your PR for some reason -
 
 <br/>
 
-### ▶ 9. After your PR is merged - delete your branches
+### ▶ 9. Sign the CLA
+
+You will be asked to sign a [CLA (Contributor License Agreement)](/CLA.md) as part of the PR process, if you haven't already signed it.
+
+Simply submit a comment on your PR with the following text:
+
+```
+I have read the CLA Document and I hereby sign the CLA
+```
+
+The CLA assistant will automatically add your signature [here](/cla-signs/v1/cla.json) and push a commit to the main branch.
+
+<br/>
+
+### ▶ 10. After your PR is merged - delete your branches
 
 After your pull request is merged, you can safely delete your branch and pull the changes from the main (upstream) repository:
 
@@ -148,6 +162,6 @@ After your pull request is merged, you can safely delete your branch and pull th
 
 <br/>
 
-### ▶ 10. That's it! Thank you for your contribution! 🙏💓
+### ▶ 11. That's it! Thank you for your contribution! 🙏💓
 
 [commit-message-format]: https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#

apps/website/src/_state/component-statuses.ts

@@ -41,6 +41,7 @@ export const componentsStatuses: ComponentKitsStatuses = {
   headless: {
     Accordion: 'Planned',
     Carousel: 'Planned',
+    Popover: 'Planned',
     Select: 'Draft',
     Tabs: 'Planned',
     Toggle: 'Planned',

apps/website/src/components/keyboard-interaction-table/keyboard-interaction-table.tsx

@@ -23,7 +23,6 @@ export const KeyboardInteractionTable = component$(
         </thead>
         <tbody>
           {props.keyDescriptors.map((descriptor) => {
-            console.log('descriptor', descriptor);
             return (
               <KBInteractionTableRow
                 key={descriptor.keyTitle}

apps/website/src/routes/docs/headless/(components)/popover/examples.tsx

@@ -0,0 +1,42 @@
+import { Slot, component$ } from '@builder.io/qwik';
+import { Popover, PopoverContent, PopoverTrigger } from '@qwik-ui/headless';
+import { GitHubIcon } from 'apps/website/src/components/icons/GitHubIcon';
+import { PreviewCodeExample } from 'apps/website/src/components/preview-code-example/preview-code-example';
+
+export const MainExample = component$(() => {
+  return (
+    <PreviewCodeExample>
+      <div q:slot="actualComponent">
+        <Popover>
+          <PopoverContent>
+            <div class="p-4 bg-gray-500">Hi, I'm the content</div>
+          </PopoverContent>
+          <PopoverTrigger> Click on me </PopoverTrigger>
+        </Popover>
+      </div>
+      <div q:slot="codeExample">
+        <Slot />
+      </div>
+    </PreviewCodeExample>
+  );
+});
+
+export const Example1 = component$(() => {
+  return (
+    <PreviewCodeExample>
+      <div q:slot="actualComponent">
+        <Popover placement="top">
+          <PopoverContent>
+            <div class="p-4 bg-gray-500">
+              Hi, I'm the content, but now on top
+            </div>
+          </PopoverContent>
+          <PopoverTrigger> Click on me </PopoverTrigger>
+        </Popover>
+      </div>
+      <div q:slot="codeExample">
+        <Slot />
+      </div>
+    </PreviewCodeExample>
+  );
+});

apps/website/src/routes/docs/headless/(components)/popover/index.mdx

@@ -0,0 +1,98 @@
+---
+title: Qwik UI | Popover
+---
+
+import { Popover } from '@qwik-ui/headless';
+import { MainExample, Example1 } from './examples';
+import { CodeExample } from '../../../../../components/code-example/code-example';
+import { KeyboardInteractionTable } from '../../../../../components/keyboard-interaction-table/keyboard-interaction-table';
+import { APITable } from '../../../../../components/api-table/api-table';
+
+# Popover
+
+#### A popover is an element that displays a modal with content when the user clicks or hovers on a trigger element.
+
+<MainExample>
+  ```tsx
+  <Popover>
+    <PopoverContent>
+      <div class="p-4 bg-gray-500">Hi, I'm the content</div>
+    </PopoverContent>
+    <PopoverTrigger> Click on me </PopoverTrigger>
+  </Popover>
+  ```
+</MainExample>
+
+## Building blocks
+
+  <CodeExample>
+    ```tsx
+    import { component$ } from '@builder.io/qwik';
+    import { Popover } from '@qwik-ui/headless';
+
+    export default component$(() => (
+      <Popover>
+        <PopoverContent>
+          <div class="p-4 bg-gray-500">Hi, I'm the content</div>
+        </PopoverContent>
+        <PopoverTrigger> Click on me </PopoverTrigger>
+      </Popover>
+    ));
+    ```
+
+  </CodeExample>
+
+## Examples
+
+### EXAMPLE: Positioning the popover's content (on top)
+
+<Example1>
+  ```tsx
+  <Popover placement="top">
+    <PopoverContent>
+      <div class="p-4 bg-gray-500">Hi, I'm the content, but now on top</div>
+    </PopoverContent>
+    <PopoverTrigger> Click on me </PopoverTrigger>
+  </Popover>
+  ```
+</Example1>
+
+## API
+
+### Popover
+
+<APITable
+  propDescriptors={[
+    {
+      name: 'placement',
+      type: '"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end"',
+      description: 'The side where to show the popover.',
+    },
+    {
+      name: 'triggerEvent',
+      type: '"click" | "mouseOver"',
+      description: 'Popover is opened when trigger is clicked or mouse overed.',
+    },
+    {
+      name: 'offset',
+      type: 'number',
+      description: 'Offset between trigger and content.',
+    },
+    {
+      name: 'isOpen',
+      type: 'boolean',
+      description:
+        'Open or close the popover when popover is controlled by the parent.',
+    },
+    {
+      name: 'disableClickOutSide',
+      type: 'boolean',
+      description: 'When true the popover is not closed when click outside.',
+    },
+    {
+      name: 'onUpdate$',
+      type: 'PropFunction<(isOpen: boolean) => void>',
+      description: 'Notify a state update to the parent.',
+    },
+  ]}
+/>

apps/website/src/routes/docs/headless/(components)/popover/index.tsx

@@ -88,12 +88,46 @@ import { APITable } from '../../../../../components/api-table/api-table';
   keyDescriptors={[
     {
       keyTitle: 'Tab',
-      description: 'Moves focus to next tab.',
+      description: 'Moves focus to the selected panel.',
     },
     {
       keyTitle: 'Shift + Tab',
+      description: 'Moves focus to the selected tab.',
+    },
+    {
+      keyTitle: 'ArrowRight',
+      description: 'Moves focus to the next tab.',
+    },
+    {
+      keyTitle: 'ArrowLeft',
       description: 'Moves focus to the previous tab.',
     },
+    {
+      keyTitle: 'ArrowDown',
+      description: 'In "vertical mode", moves focus to the next tab.',
+    },
+    {
+      keyTitle: 'ArrowUp',
+      description: 'In "vertical mode", moves focus to the previous tab.',
+    },
+    {
+      /* {
+      keyTitle: 'Home',
+      description: 'Moves focus to the first tab.',
+    },
+    {
+      keyTitle: 'PageUp',
+      description: 'Moves focus to the first tab.',
+    },
+    {
+      keyTitle: 'End',
+      description: 'Moves focus to the last tab.',
+    },
+    {
+      keyTitle: 'PageDown',
+      description: 'Moves focus to the first tab.',
+    }, */
+    },
   ]}
 />
 
@@ -109,6 +143,12 @@ import { APITable } from '../../../../../components/api-table/api-table';
       description:
         'Toggle between automatic or manual. The automatic behavior moves between tabs when hover. The manual behavior moves between tabs on click.',
     },
+    {
+      name: 'vertical',
+      type: 'boolean',
+      description:
+        'If set to true, the behavior of UpArrow and DownArrow will navigate between tabs vertically instead of horizontally.',
+    },
   ]}
 />
 

apps/website/src/routes/docs/headless/(components)/tabs/index.mdx

@@ -10,7 +10,7 @@ import { APITable } from '../../../../../components/api-table/api-table';
 
 # Tooltip
 
-#### A popup that displays information realted to an element when the element receives keyboard focus or the mouse hovers over it.
+#### A tooltip that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
 
 <MainExample>
   ```tsx
@@ -41,7 +41,7 @@ import { APITable } from '../../../../../components/api-table/api-table';
 
 ## Examples
 
-### EXAMPLE: Describing Unlabelled Icon Link
+### EXAMPLE: Describing Icon with Tooltip
 
 <Example1>
   ```tsx
@@ -72,7 +72,7 @@ import { APITable } from '../../../../../components/api-table/api-table';
 
 ## API
 
-### AccordionItem
+### Tooltip
 
 <APITable
   propDescriptors={[
@@ -88,7 +88,7 @@ import { APITable } from '../../../../../components/api-table/api-table';
     },
     {
       name: 'durationMs',
-      type: 'nummber',
+      type: 'number',
       description:
         'Sets a delay duration in milliseconds before the Tooltip is displayed.',
     },

apps/website/src/routes/docs/headless/(components)/tooltip/index.mdx

@@ -10,6 +10,7 @@
 
 - [Accordion](/docs/headless/accordion)
 - [Carousel](/docs/headless/carousel)
+- [Popover](/docs/headless/popover)
 - [Select](/docs/headless/select)
 - [Tabs](/docs/headless/tabs)
 - [Toggle](/docs/headless/toggle)

apps/website/src/routes/docs/headless/menu.md

@@ -271,6 +271,14 @@
       "created_at": "2023-05-23T18:42:55Z",
       "repoId": 545159943,
       "pullRequestNo": 324
+    },
+    {
+      "name": "igalklebanov",
+      "id": 14938291,
+      "comment_id": 1584384229,
+      "created_at": "2023-06-09T10:54:23Z",
+      "repoId": 545159943,
+      "pullRequestNo": 332
     }
   ]
 }