Merge pull request #27 from xmimiex/fix/dropdown-outerclick

fix: outer-click dropdown
qwikerx · May 28, 2024 · c3b6cf8 · c3b6cf8
2 parents 8ffdc5f + 53fd636
commit c3b6cf8
Show file tree

Hide file tree

Showing 12 changed files with 142 additions and 96 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "flowbite-qwik",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "Official Qwik components built for Flowbite and Tailwind CSS",
   "keywords": [
     "design-system",
@@ -86,7 +86,7 @@
     "tsc-alias": "^1.8.10",
     "tsx": "^4.11.0",
     "typescript": "^5.4.5",
-    "typescript-eslint": "^8.0.0-alpha.14",
+    "typescript-eslint": "^8.0.0-alpha.20",
     "undici": "^6.18.1",
     "vite": "^5.2.11",
     "vite-tsconfig-paths": "^4.3.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
@@ -11,6 +11,8 @@ import {
   useComputed$,
   useSignal,
   useStore,
+  createElement,
+  Fragment,
 } from '@builder.io/qwik'
 import { getChild } from '~/utils/getChild'
 import { Button } from '~/components/Button/Button'
@@ -20,6 +22,7 @@ import { IconProps } from '@qwikest/icons'
 import { IconAngleDownOutline } from '~/components/Icon'
 import { DropdownSize } from '~/components/Dropdown/dropdown-types'
 import { useDropdownClasses } from '~/components/Dropdown/composables/use-dropdown-classes'
+import uuid from '~/utils/uuid'
 
 interface ComponentType {
   id: number
@@ -32,7 +35,7 @@ interface ComponentType {
 }
 
 type DropdownProps = PropsOf<'div'> & {
-  label: string
+  label?: string
   as?: JSXOutput
   closeWhenSelect?: boolean
   inline?: boolean
@@ -63,7 +66,7 @@ export const Dropdown: FunctionComponent<DropdownProps> = ({
           header: Boolean(child.props.header),
           divider: Boolean(child.props.divider),
           icon: child.props.icon as Component | undefined,
-          content: child.children,
+          content: Array.isArray(child.children) ? createElement(Fragment, { key: uuid() }, child.children) : child.children,
           onClick$: child.props.onClick$ as () => void | undefined,
         })
       },
@@ -102,7 +105,7 @@ export const DropdownItem = component$<DropdownItemProps>(() => {
  */
 
 type InnerDropdownProps = {
-  label: string
+  label?: string
   as?: JSXOutput
   closeWhenSelect: boolean
   components: ComponentType[]
@@ -112,7 +115,7 @@ type InnerDropdownProps = {
   class?: ClassList
 }
 
-const InnerDropdown = component$<InnerDropdownProps>(({ label, as, closeWhenSelect, components, inline, size, iconRotate, class: classNames }) => {
+const InnerDropdown = component$<InnerDropdownProps>(({ label, as, closeWhenSelect, components, inline, size, iconRotate }) => {
   const { dropdownModalClasses } = useDropdownClasses(useComputed$(() => size))
 
   const visible = useSignal(false)
@@ -125,19 +128,32 @@ const InnerDropdown = component$<InnerDropdownProps>(({ label, as, closeWhenSele
   const TriggerButton = inline ? InnerTriggerInline : InnerTriggerButton
   const TriggerButtonAs = as ? InnerTriggerAs : undefined
 
-  useDocumentOuterClick([dropdownRef], toggleVisible, visible) // FIXME first double-click
+  useDocumentOuterClick([dropdownRef], toggleVisible, visible)
 
   return (
     <div class={['inline-flex relative justify-center']}>
       <div ref={dropdownRef}>
         {TriggerButtonAs ? (
-          <TriggerButtonAs onClick$={toggleVisible} size={size} as={as} />
+          <TriggerButtonAs
+            onClick$={() => {
+              toggleVisible()
+            }}
+            size={size}
+            as={as}
+          />
         ) : (
-          <TriggerButton onClick$={toggleVisible} label={label} size={size} iconRotate={iconRotate} />
+          <TriggerButton
+            onClick$={() => {
+              toggleVisible()
+            }}
+            label={label}
+            size={size}
+            iconRotate={iconRotate}
+          />
         )}
 
         {visible.value && (
-          <div role="menu" class={[classNames, dropdownModalClasses.value]}>
+          <div role="menu" class={[dropdownModalClasses.value]}>
             <ul tabIndex={0} class="py-1 focus:outline-none">
               {componentsAsSignals.map((comp) => (
                 <li role="menuitem" key={comp.id}>
@@ -224,7 +240,7 @@ const InnerDropdownItem = component$<InnerDropdownItemProps>(({ icon: Icon, size
  * InnerTriggerInline
  */
 type InnerTriggerInlineProps = {
-  label: string
+  label?: string
   onClick$: () => void
   size: DropdownSize
   iconRotate?: string | number

diff --git a/src/components/Dropdown/composables/use-dropdown-classes.ts b/src/components/Dropdown/composables/use-dropdown-classes.ts
@@ -5,7 +5,7 @@ import { DropdownSize } from '~/components/Dropdown/dropdown-types'
 export function useDropdownClasses(size: Signal<DropdownSize>) {
   const dropdownModalClasses = useComputed$(() => {
     return twMerge(
-      'w-full z-10 absolute left-0 divide-y divide-gray-100 rounded shadow focus:outline-none transition-opacity duration-100 border border-gray-200 bg-white text-gray-900 dark:border-none dark:bg-gray-700 dark:text-white',
+      'w-full min-w-max z-10 absolute left-0 divide-y divide-gray-100 rounded shadow focus:outline-none transition-opacity duration-100 border border-gray-200 bg-white text-gray-900 dark:border-none dark:bg-gray-700 dark:text-white',
       size.value === 's' ? 'top-10' : '',
       size.value === 'm' ? 'top-11' : '',
       size.value === 'l' ? 'top-[3.25rem]' : '',

diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
@@ -1,8 +1,23 @@
-import { $, component$, FunctionComponent, JSXChildren, JSXNode, JSXOutput, PropsOf, Slot, useComputed$, useId, useStore } from '@builder.io/qwik'
+import {
+  $,
+  component$,
+  createElement,
+  Fragment,
+  FunctionComponent,
+  JSXChildren,
+  JSXNode,
+  JSXOutput,
+  PropsOf,
+  Slot,
+  useComputed$,
+  useId,
+  useStore,
+} from '@builder.io/qwik'
 import { useTabsClasses } from '~/components/Tabs/composables/use-tabs-classes'
 import { TabsVariant } from '~/components/Tabs/tabs-types'
 import { useTabClasses } from '~/components/Tabs/composables/use-tab-classes'
 import { getChild } from '~/utils/getChild'
+import uuid from '~/utils/uuid'
 
 interface ComponentType {
   id: number
@@ -44,7 +59,7 @@ export const Tabs: FunctionComponent<TabsProps> = ({ children, variant = 'defaul
             icon: child.props.icon as JSXOutput | undefined,
           },
           pane: {
-            children: child.children,
+            children: Array.isArray(child.children) ? createElement(Fragment, { key: uuid() }, child.children) : child.children,
           },
         })
       },

diff --git a/src/components/Toggle/Toggle.tsx b/src/components/Toggle/Toggle.tsx
@@ -7,7 +7,7 @@ type ToggleProps = PropsOfInput & {
   color?: string
   disabled?: boolean
   label?: string
-  'bind:checked'?: Signal<boolean>
+  'bind:checked': Signal<boolean>
   size?: InputSize
   onChange$?: QRL<(value: boolean) => void>
 }
@@ -20,10 +20,10 @@ export const Toggle = component$<ToggleProps>(
     )
 
     useTask$(({ track }) => {
-      track(() => props['bind:checked']?.value)
+      track(() => props['bind:checked'].value)
 
       if (onChange$) {
-        onChange$(props['bind:checked']?.value ?? false)
+        onChange$(props['bind:checked'].value ?? false)
       }
     })