Merge branch 'main' into 711_search_box

.changeset/twenty-spoons-fail.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/headless': patch
+---
+
+Chromium 109-113 did not properly support the popover but reported that they did. This led to the polyfill not activating which caused our E2E tests to break. We are dropping down to Chromium 108 to validate the polyfill as users of Chrome would see it before the popover API was supported.

apps/website/src/routes/docs/headless/select/examples/description.tsx

@@ -0,0 +1,33 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import { Select } from '@qwik-ui/headless';
+
+export default component$(() => {
+  useStyles$(styles);
+  const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
+
+  return (
+    <Select.Root class="select">
+      <Select.Label>Logged in users</Select.Label>
+      <Select.Trigger class="select-trigger">
+        <Select.DisplayValue placeholder="Select an option" />
+      </Select.Trigger>
+      <Select.Description>Select a user to see their profile</Select.Description>
+      <Select.Popover class="select-popover">
+        <Select.Listbox class="select-listbox">
+          {users.map((user) => (
+            <Select.Item class="select-item" key={user}>
+              <Select.ItemLabel>{user}</Select.ItemLabel>
+              <Select.ItemIndicator>
+                <LuCheck />
+              </Select.ItemIndicator>
+            </Select.Item>
+          ))}
+        </Select.Listbox>
+      </Select.Popover>
+    </Select.Root>
+  );
+});
+
+// internal
+import styles from '../snippets/select.css?inline';
+import { LuCheck } from '@qwikest/icons/lucide';

apps/website/src/routes/docs/headless/select/examples/validation.tsx

@@ -34,7 +34,11 @@ export default component$(() => {
               <Select.Trigger class="select-trigger">
                 <Select.DisplayValue placeholder="Select an option" />
               </Select.Trigger>
-              {field.error && <div style={{ color: '#D2122E' }}>{field.error}</div>}
+              {field.error && (
+                <Select.ErrorMessage style={{ color: '#D2122E' }}>
+                  {field.error}
+                </Select.ErrorMessage>
+              )}
               <Select.Popover class="select-popover">
                 <Select.Listbox class="select-listbox">
                   {users.map((user) => (

apps/website/src/routes/docs/headless/select/index.mdx

@@ -175,7 +175,15 @@ The native select element is created when a form name has been given to `<Select
 
 <Showcase name="validation" />
 
-Above is an example of submitting a multi-select form.
+The `<Select.ErrorMessage />` component is used to display errors when the select is invalid.
+
+To style based on the invalid state, use the `data-invalid` data attribute.
+
+### Descriptions
+
+Provide more information to assistive technologies by adding a description to the select.
+
+<Showcase name="description" />
 
 ## Component state
 

apps/website/src/routes/docs/headless/select/snippets/select.css

@@ -10,19 +10,28 @@
   width: 100%;
   height: 100%;
   border: 2px dotted hsla(var(--primary) / 1);
-  border-radius: calc(var (--border-radius) / 2);
   min-height: 44px;
   max-width: var(--select-width);
   padding-block: 0.5rem;
   display: flex;
   justify-content: center;
   align-items: center;
+  margin-top: 0.25rem;
 }
 
 .select-trigger:hover {
   background-color: hsla(var(--primary) / 0.08);
 }
 
+.select-trigger:focus-visible {
+  outline: 2px solid hsla(var(--primary) / 1);
+  outline-offset: 2px;
+}
+
+.select-trigger[data-invalid] {
+  border: 2px dotted #d2122e;
+}
+
 .select-popover {
   width: 100%;
   max-width: var(--select-width);
@@ -33,7 +42,6 @@
   background-color: hsl(var(--background));
   padding: 0.5rem;
   border: 2px dotted hsla(var(--foreground) / 0.6);
-  border-radius: calc(var(--border-radius) / 2);
   max-width: var(--select-width);
   color: hsl(var(--foreground));
 }
@@ -87,7 +95,6 @@
 [data-highlighted] {
   background-color: hsla(var(--primary) / 0.08);
   outline: 2px dotted hsla(var(--primary) / 1);
-  border-radius: calc(var(--border-radius) / 2);
 }
 
 [data-disabled] {

package.json

@@ -33,7 +33,7 @@
     "test.headless": "nx component-test headless --skip-nx-cache",
     "test.visual.headless": "nx visual-test headless",
     "test.pw.headless": "nx e2e headless",
-    "test.pw.headless-chrome-113": "nx e2e-chrome-113 headless",
+    "test.pw.headless-chrome-108": "nx e2e-chrome-108 headless",
     "test.pw.headless.ci": "nx e2e headless",
     "test.headless.ci": "nx component-test-ci headless",
     "test.utils": "nx test utils"

packages/kit-headless/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 0.4.4
+
+### Patch Changes
+
+- ✨ new Select.ErrorMessage component (by [@thejackshelton](https://github.com/thejackshelton) in [#825](https://github.com/qwikifiers/qwik-ui/pull/825))
+
+  feat: data-invalid attribute to style when the select is invalid
+
+  feat: new Select.Description component
+
+## 0.4.3
+
+### Patch Changes
+
+- 🐞🩹 select validates correctly with modular forms (by [@thejackshelton](https://github.com/thejackshelton) in [#814](https://github.com/qwikifiers/qwik-ui/pull/814))
+
+- refactor: improved select focus navigation (by [@thejackshelton](https://github.com/thejackshelton) in [#822](https://github.com/qwikifiers/qwik-ui/pull/822))
+
+- 🐞🩹 select can now be reactively disabled (by [@thejackshelton](https://github.com/thejackshelton) in [#823](https://github.com/qwikifiers/qwik-ui/pull/823))
+
 ## 0.4.2
 
 ### Patch Changes

packages/kit-headless/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qwik-ui/headless",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "Qwik UI headless components library",
   "publishConfig": {
     "access": "public"
@@ -16,7 +16,7 @@
   "types": "./index.d.ts",
   "type": "module",
   "scripts": {
-    "setup.chrome.113": "npx tsx ./scripts/prepare-chrome-113.ts"
+    "setup.chrome.108": "npx tsx ./scripts/prepare-chrome-browser.ts"
   },
   "exports": {
     ".": {

packages/kit-headless/playwright.config.ts

@@ -18,16 +18,16 @@ let binaryPath;
 switch (currentPlatform) {
   case 'darwin':
     binaryPath =
-      './browsers/chrome/113/chrome-darwin/Chromium.app/Contents/MacOS/Chromium';
+      './browsers/chrome/108/chrome-darwin/Chromium.app/Contents/MacOS/Chromium';
     break;
   case 'win32':
-    binaryPath = './browsers/chrome/113/chrome-win32/chrome.exe';
+    binaryPath = './browsers/chrome/108/chrome-win32/chrome.exe';
     break;
   case 'linux':
-    binaryPath = './browsers/chrome/113/chrome-linux/chrome';
+    binaryPath = './browsers/chrome/108/chrome-linux/chrome';
     break;
   default:
-    throw new Error('Cannot install Chrome 13 on unknown platform');
+    throw new Error('Cannot install Chrome 108 on unknown platform');
 }
 
 /**
@@ -65,7 +65,7 @@ export default defineConfig({
     },
 
     {
-      name: 'popover-chrome-113',
+      name: 'popover-chrome-108',
       use: {
         launchOptions: {
           executablePath: path.resolve(dirName, binaryPath),

packages/kit-headless/project.json

@@ -55,19 +55,19 @@
         "project": ["logic"]
       }
     },
-    "setup-chrome-113": {
+    "setup-chrome-108": {
       "executor": "nx:run-script",
       "options": {
-        "script": "setup.chrome.113"
+        "script": "setup.chrome.108"
       }
     },
-    "e2e-chrome-113": {
+    "e2e-chrome-108": {
       "executor": "@nx/playwright:playwright",
       "outputs": ["{workspaceRoot}/dist/.playwright/packages/kit-headless"],
-      "dependsOn": ["setup-chrome-113"],
+      "dependsOn": ["setup-chrome-108"],
       "options": {
         "config": "packages/kit-headless/playwright.config.ts",
-        "project": ["popover-chrome-113"]
+        "project": ["popover-chrome-108"]
       }
     },
     "visual-test": {

packages/kit-headless/scripts/prepare-chrome-113.ts → packages/kit-headless/scripts/prepare-chrome-browser.ts

@@ -12,16 +12,16 @@ function printProgress(progress: number) {
 }
 
 async function prepareChrome113() {
-  const path = `browsers/chrome/113/chrome-${os.platform()}`;
+  const path = `browsers/chrome/108/chrome-${os.platform()}`;
 
   if (fs.existsSync(path)) {
-    console.log('Chrome 113 already exists. Skipping unzip ⏩');
+    console.log('Chrome 108 already exists. Skipping unzip ⏩');
   } else {
     console.log('Creating directory to save the browser 🌐');
     fs.mkdirSync(path, { recursive: true });
 
     const downloadResponse = await fetch(
-      `https://github.com/qwikifiers/qwik-ui-polyfill-browsers/raw/main/chrome/113/chrome-${os.platform()}.zip`,
+      `https://github.com/qwikifiers/qwik-ui-polyfill-browsers/raw/main/chrome/108/chrome-${os.platform()}.zip`,
     );
 
     const contentLength = downloadResponse.headers.get('content-length');
@@ -33,7 +33,7 @@ async function prepareChrome113() {
         async start(controller) {
           if (!downloadResponse.body) {
             throw new Error(
-              'Invalid response received when trying to download Chrome 113',
+              'Invalid response received when trying to download Chrome 108',
             );
           }
 
@@ -53,7 +53,7 @@ async function prepareChrome113() {
 
     await decompress(
       Buffer.from(await res.arrayBuffer()),
-      `browsers/chrome/113/chrome-${os.platform()}`,
+      `browsers/chrome/108/chrome-${os.platform()}`,
       { strip: 1 },
     );
   }

packages/kit-headless/src/components/accordion/accordion-root.tsx

@@ -19,9 +19,12 @@ export const HAccordionRootImpl = component$((props: AccordionRootProps) => {
     disabled,
     collapsible = true,
     animated,
+    itemsMap,
     ...rest
   } = props;
 
+  itemsMap;
+
   const selectedIndexSig = useSignal<number>(initialIndex ?? -1);
   const triggerRefsArray = useSignal<Array<Signal>>([]);
   const isAnimatedSig = useSignal<boolean>(animated === true);

packages/kit-headless/src/components/popover/popover-trigger.tsx

@@ -23,7 +23,10 @@ export const HPopoverTrigger = component$<PopoverTriggerProps>(
     } = usePopover(context.compId);
 
     const handleClick$ = $(async () => {
-      if (context.hover) return;
+      if (context.hover && !isSupportedSig.value) {
+        await showPopover();
+        return;
+      }
 
       if (isSupportedSig.value) return;
 

packages/kit-headless/src/components/popover/popover.driver.ts

@@ -9,14 +9,22 @@ export function createTestDriver<T extends DriverLocator>(rootLocator: T) {
     return rootLocator.locator('[popover]');
   };
 
+  const getPopoverByTextContent = (popoverContent: string) => {
+    return rootLocator.locator('.popover-panel').getByText(popoverContent);
+  };
+
   const getTrigger = () => {
     return rootLocator.locator('[popovertarget]');
   };
 
   const openPopover = async (key: PopoverOpenKeys | 'click', index?: number) => {
     const action = key === 'click' ? 'click' : 'press';
     const trigger = index !== undefined ? getTrigger().nth(index) : getTrigger();
-    const popover = index !== undefined ? getPopover().nth(index) : getPopover();
+
+    const popover =
+      index !== undefined
+        ? getPopoverByTextContent(`Popover ${index + 1}`)
+        : getPopover();
 
     if (action === 'click') {
       await trigger.click({ position: { x: 1, y: 1 } }); // Modified line
@@ -26,6 +34,8 @@ export function createTestDriver<T extends DriverLocator>(rootLocator: T) {
 
     // Needed because Playwright doesn't wait for the listbox to be visible
     await expect(popover).toBeVisible();
+
+    return { trigger, popover };
   };
 
   const getAllPopovers = () => {
@@ -49,5 +59,6 @@ export function createTestDriver<T extends DriverLocator>(rootLocator: T) {
     getAllTriggers,
     openPopover,
     getProgrammaticButtonTrigger,
+    getPopoverByTextContent,
   };
 }