Merge pull request #605 from maiieul/up-1.3.5

chore: update to 1.3.5

Author: thejackshelton

apps/website/src/routes/docs/headless/combobox/snippets/context-ids.tsx

@@ -27,7 +27,7 @@ export default component$(() => {
           return option.toLowerCase().startsWith(value.toLowerCase());
         })
       }
-      bind:isListboxOpenSig={isListboxOpenSig}
+      bind:isListboxOpen={isListboxOpenSig}
     >
       <ComboboxLabel class=" mb-2 block font-semibold text-white">
         I open a floating element!

apps/website/src/routes/docs/headless/combobox/snippets/qwik-ui-provider.tsx

@@ -64,7 +64,7 @@ export default component$(() => {
           return option.toLowerCase().startsWith(value.toLowerCase());
         })
       }
-      bind:isListboxOpenSig={isListboxOpenSig}
+      bind:isListboxOpen={isListboxOpenSig}
     >
       <ComboboxLabel class=" font-semibold text-white">Streets 🛣️</ComboboxLabel>
       <ComboboxControl class="relative flex items-center rounded-sm border-[1px] border-slate-400 bg-[#1f2532]">

apps/website/src/routes/docs/headless/popover/examples/floating-intro.tsx

@@ -33,7 +33,7 @@ export default component$(() => {
         class="w-fit"
         options={placementExample}
         optionDisabledKey="myDisabledKey"
-        bind:inputValueSig={inputValueSig}
+        bind:inputValue={inputValueSig}
       >
         <ComboboxLabel class="text-white">Positions</ComboboxLabel>
         <ComboboxControl class="relative mt-2 flex items-center rounded-sm border-[1px] border-slate-400 bg-[#1f2532]">

apps/website/src/routes/docs/headless/popover/examples/listbox-animation.tsx

@@ -11,7 +11,7 @@ export default component$(() => {
       <h3>Basic Example </h3>
       <Rating />
       <h3>OnChange event </h3>
-      <Rating onChange$={(idx) => window.alert(idx)} />
+      <Rating onChange$={(index) => window.alert(index)} />
       <h3>Custom Icons </h3>
       <Rating icon={MyStarIcon} />
       <Rating icon={MyHeartIcon} />️

apps/website/src/routes/docs/headless/popover/examples/placement.tsx

@@ -1,9 +1,7 @@
 import { Slot, component$, useStyles$ } from '@builder.io/qwik';
 import { ContentMenu, useContent } from '@builder.io/qwik-city';
-import { QwikUIProvider } from '@qwik-ui/headless';
 import { ComponentsStatusesMap, statusByComponent } from '~/_state/component-statuses';
 import { KitName } from '~/_state/kit-name.type';
-import { useAppState } from '~/_state/use-app-state';
 import Header from '~/components/header/header';
 import docsStyles from './docs.css?inline';
 import {
@@ -23,23 +21,20 @@ export default component$(() => {
   useStyles$(docsStyles);
 
   const { menuItemsGroups } = useKitMenuItems();
-  const rootStore = useAppState();
 
   return (
     <>
       <Header showBottomBorder={true} showVersion={true} />
-      <QwikUIProvider>
-        <MDXProvider components={components}>
-          <div class="setup-grid-areas lg:grid-cols-custom-lg 2xl:grid-cols-custom-2xl grid">
-            <DocsNavigation linksGroups={menuItemsGroups} />
-            <main class="docs [grid-area:main]">
-              <Slot />
-            </main>
-            {/* future table of contents */}
-            <div class="hidden [grid-area:toc]"></div>
-          </div>
-        </MDXProvider>
-      </QwikUIProvider>
+      <MDXProvider components={components}>
+        <div class="setup-grid-areas lg:grid-cols-custom-lg 2xl:grid-cols-custom-2xl grid">
+          <DocsNavigation linksGroups={menuItemsGroups} />
+          <main class="docs [grid-area:main]">
+            <Slot />
+          </main>
+          {/* future table of contents */}
+          <div class="hidden [grid-area:toc]"></div>
+        </div>
+      </MDXProvider>
       <footer></footer>
     </>
   );

apps/website/src/routes/docs/headless/rating/index.tsx

@@ -34,8 +34,8 @@
   },
   "packageManager": "[email protected]",
   "devDependencies": {
-    "@builder.io/qwik": "^1.3.2",
-    "@builder.io/qwik-city": "^1.3.2",
+    "@builder.io/qwik": "^1.3.5",
+    "@builder.io/qwik-city": "^1.3.5",
     "@builder.io/vite-plugin-macro": "~0.0.7",
     "@changesets/cli": "2.27.1",
     "@changesets/get-github-info": "0.6.0",
@@ -102,7 +102,7 @@
     "eslint": "^8.48.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-cypress": "^2.14.0",
-    "eslint-plugin-qwik": "^1.3.2",
+    "eslint-plugin-qwik": "^1.3.5",
     "eslint-plugin-storybook": "^0.6.13",
     "focus-trap": "7.5.3",
     "husky": "^8.0.3",

apps/website/src/routes/layout.tsx

@@ -1,7 +1,7 @@
 import {
   $,
-  PropFunction,
   PropsOf,
+  QRL,
   Slot,
   component$,
   useContextProvider,
@@ -18,8 +18,8 @@ export type AccordionRootProps = PropsOf<'div'> & {
   animated?: boolean;
   enhance?: boolean;
   collapsible?: boolean;
-  onSelectedIndexChange$?: PropFunction<(index: number) => void>;
-  onFocusIndexChange$?: PropFunction<(index: number) => void>;
+  onSelectedIndexChange$?: QRL<(index: number) => void>;
+  onFocusIndexChange$?: QRL<(index: number) => void>;
 };
 
 export const AccordionRoot = component$(

package.json

@@ -1,36 +1,38 @@
-import { component$, Slot, useContext, $, useOnWindow } from '@builder.io/qwik';
+import { component$, Slot, useContext, $, useOnWindow, PropsOf } from '@builder.io/qwik';
 import { collapsibleContextId } from './collapsible-context-id';
 
-export const CollapsibleTrigger = component$((props) => {
-  const context = useContext(collapsibleContextId);
-  const contentId = `${context.itemId}-content`;
+export const CollapsibleTrigger = component$<PropsOf<'button'>>(
+  ({ onClick$, ...props }) => {
+    const context = useContext(collapsibleContextId);
+    const contentId = `${context.itemId}-content`;
 
-  const handleClick$ = $(async () => {
-    setTimeout(() => {
-      context.isOpenSig.value = !context.isOpenSig.value;
-    }, 1);
+    const handleClick$ = $(async () => {
+      setTimeout(() => {
+        context.isOpenSig.value = !context.isOpenSig.value;
+      }, 1);
 
-    context.initialStateSig.value = false;
-  });
+      context.initialStateSig.value = false;
+    });
 
-  useOnWindow('resize', context.getContentDimensions$);
+    useOnWindow('resize', context.getContentDimensions$);
 
-  return (
-    <button
-      {...props}
-      ref={context.triggerRef}
-      data-state={
-        context.initialStateSig.value
-          ? 'initial'
-          : context.isOpenSig.value
-          ? 'open'
-          : 'closed'
-      }
-      aria-expanded={context.isOpenSig.value}
-      aria-controls={context.isOpenSig.value ? contentId : undefined}
-      onClick$={[context.getContentDimensions$, handleClick$, props.onClick$]}
-    >
-      <Slot />
-    </button>
-  );
-});
+    return (
+      <button
+        {...props}
+        ref={context.triggerRef}
+        data-state={
+          context.initialStateSig.value
+            ? 'initial'
+            : context.isOpenSig.value
+            ? 'open'
+            : 'closed'
+        }
+        aria-expanded={context.isOpenSig.value}
+        aria-controls={context.isOpenSig.value ? contentId : undefined}
+        onClick$={[context.getContentDimensions$, handleClick$, onClick$]}
+      >
+        <Slot />
+      </button>
+    );
+  },
+);