diff --git a/package.json b/package.json index 05a557178..1bf783821 100644 --- 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 index e79842aa1..cbf6ef901 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -88,8 +88,8 @@ importers: specifier: ^5.4.5 version: 5.4.5 typescript-eslint: - specifier: ^8.0.0-alpha.14 - version: 8.0.0-alpha.14(eslint@9.3.0)(typescript@5.4.5) + specifier: ^8.0.0-alpha.20 + version: 8.0.0-alpha.20(eslint@9.3.0)(typescript@5.4.5) undici: specifier: ^6.18.1 version: 6.18.1 @@ -682,8 +682,8 @@ packages: '@types/unist@3.0.2': resolution: {integrity: sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==} - '@typescript-eslint/eslint-plugin@8.0.0-alpha.14': - resolution: {integrity: sha512-tfw3zfCg+ynwARhVsuMXKBrmWCtqQ2Cr/cjPAuyKhJGY8t069Lc0Y+F5H7oDLlmm+G54v8lAHkTkw4K/p+PpFQ==} + '@typescript-eslint/eslint-plugin@8.0.0-alpha.20': + resolution: {integrity: sha512-/dBqhcdiVHB3SzaU5Mczy1QoVel8hZ8TX7T2WE1Qq2ujrv4X9I2/H2DMHnNtmlcGY9hcezsPtu76BTiZAeMQqw==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} peerDependencies: '@typescript-eslint/parser': ^8.0.0 || ^8.0.0-alpha.0 @@ -693,8 +693,8 @@ packages: typescript: optional: true - '@typescript-eslint/parser@8.0.0-alpha.14': - resolution: {integrity: sha512-fD+DFo6aJJYyX4w712HzmE7QmUkoUvtlsFO/MqmYMeHIe0Pz5JZpJ1aYVbdxctazOb7NoW3p3RQgmpDcLT2pdQ==} + '@typescript-eslint/parser@8.0.0-alpha.20': + resolution: {integrity: sha512-C1gnMM1k6i0phZ7l6HJPecVIGMErrONnurQ9ssRBZNek7gJInDGEDUC7LlL3QIWxFkHcdwYXWzuc7IueyxU6YQ==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} peerDependencies: eslint: ^8.57.0 || ^9.0.0 @@ -703,12 +703,12 @@ packages: typescript: optional: true - '@typescript-eslint/scope-manager@8.0.0-alpha.14': - resolution: {integrity: sha512-6EmhoNZzfjd/sZGxichVguWUGCCgT12xyw3ppNZ9bM/m6qQCE66BqudGxzD58UPL4PpN++Y8KqVItax0gNq4BQ==} + '@typescript-eslint/scope-manager@8.0.0-alpha.20': + resolution: {integrity: sha512-+Ncj0Q6DT8ZHYNp8h5RndW4Siv52kiPpHEz/i8Sj2rh2y8ZCc5pKSHSslk+eZi0Bdj+/+swNOmDNcL2CrlaEnA==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} - '@typescript-eslint/type-utils@8.0.0-alpha.14': - resolution: {integrity: sha512-F/rtAXWMrFPO49xK0XLw7hYtPVrjj+jRJhJRRcSBWRybcu7rvlEQ/Chk+QXvyp15QuwmMD5jAqNI+Fkbxgc0gQ==} + '@typescript-eslint/type-utils@8.0.0-alpha.20': + resolution: {integrity: sha512-/eUDosUnJlEwzRFPwaKYM3H0VS+40oXx+5ZN+CFCtdXMZjGsTwKM3XNvI+4orisjn+qhNVlHZby4PHnH8qAh8Q==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} peerDependencies: typescript: '*' @@ -716,12 +716,12 @@ packages: typescript: optional: true - '@typescript-eslint/types@8.0.0-alpha.14': - resolution: {integrity: sha512-2u0FBQ0usELnbTqZhHN6X8ngJlpCchFTroWFG5nvo0TOoiPYV+5AbGiRb0IWMsLfxSzeDJeasUzByVvOHn1t1A==} + '@typescript-eslint/types@8.0.0-alpha.20': + resolution: {integrity: sha512-xpU1rMQfnnNZxpHN6YUfr18sGOMcpC9hvt54fupcU6N1qMCagEtkRt1U15x086oJAgAITJGa67454ffAoCxv/w==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} - '@typescript-eslint/typescript-estree@8.0.0-alpha.14': - resolution: {integrity: sha512-FM0qHSJ4Sqg49wBCcljq//J9V8SJbq3XFmjaWCF8Tk2hIuYkYZp7joXHs0Ld3FnM+9rj84OQTqSq8zczArNMNg==} + '@typescript-eslint/typescript-estree@8.0.0-alpha.20': + resolution: {integrity: sha512-VQ8Mf8upDCuf0uMTjX/Pdw3gvCZomkG43nuThUuzhK3YFwFmIDTqx0ZWSsYJkVGfll0WrXgIua+rKSP/n6NBWw==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} peerDependencies: typescript: '*' @@ -729,14 +729,14 @@ packages: typescript: optional: true - '@typescript-eslint/utils@8.0.0-alpha.14': - resolution: {integrity: sha512-hiH1uqRVyOPd+ZWqInwRob2s3Cq+p7LTIolvj+x7QJ6CpBCPrEMEPVuBiFibw2/rW+zJGTa3Ggjdpqy8bLb60g==} + '@typescript-eslint/utils@8.0.0-alpha.20': + resolution: {integrity: sha512-0aMhjDTvIrkGkHqyM0ZByAwR8BV1f2HhKdYyjtxko8S/Ca4PGjOIjub6VoF+bQwCRxEuV8viNUld78rqm9jqLA==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} peerDependencies: eslint: ^8.57.0 || ^9.0.0 - '@typescript-eslint/visitor-keys@8.0.0-alpha.14': - resolution: {integrity: sha512-LwUhX8+ttlzJWhqLAkiH7E1tX2WJS0zvK0D83w4L9DRl4TRSQBuGtPIM1+GvG90VMix8sjlGaybBzWfNji1cUw==} + '@typescript-eslint/visitor-keys@8.0.0-alpha.20': + resolution: {integrity: sha512-ej06rfct0kalfJgIR8nTR7dF1mgfF83hkylrYas7IAElHfgw4zx99BUGa6VrnHZ1PkxdJBp5PgcO2FmmlOoaRQ==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} '@ungap/structured-clone@1.2.0': @@ -3035,8 +3035,8 @@ packages: typedarray-to-buffer@3.1.5: resolution: {integrity: sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==} - typescript-eslint@8.0.0-alpha.14: - resolution: {integrity: sha512-Un2y0pbBCdvmk2YsY/S/oftSA/4tEZtRMfewHlXJ43LBR07V2HSXPC/t6RJ29KZ+N5ORqe61QUQLupquVBPZhQ==} + typescript-eslint@8.0.0-alpha.20: + resolution: {integrity: sha512-/cx37A2S+AOne5uFpD8GzHzV5b/7wncAh4agmIRieAZWXJWbRcue7e8RI6LnpQ7CHy9IHPmALcHcXPXogM6jcQ==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} peerDependencies: typescript: '*' @@ -3746,14 +3746,14 @@ snapshots: '@types/unist@3.0.2': {} - '@typescript-eslint/eslint-plugin@8.0.0-alpha.14(@typescript-eslint/parser@8.0.0-alpha.14(eslint@9.3.0)(typescript@5.4.5))(eslint@9.3.0)(typescript@5.4.5)': + '@typescript-eslint/eslint-plugin@8.0.0-alpha.20(@typescript-eslint/parser@8.0.0-alpha.20(eslint@9.3.0)(typescript@5.4.5))(eslint@9.3.0)(typescript@5.4.5)': dependencies: '@eslint-community/regexpp': 4.10.0 - '@typescript-eslint/parser': 8.0.0-alpha.14(eslint@9.3.0)(typescript@5.4.5) - '@typescript-eslint/scope-manager': 8.0.0-alpha.14 - '@typescript-eslint/type-utils': 8.0.0-alpha.14(eslint@9.3.0)(typescript@5.4.5) - '@typescript-eslint/utils': 8.0.0-alpha.14(eslint@9.3.0)(typescript@5.4.5) - '@typescript-eslint/visitor-keys': 8.0.0-alpha.14 + '@typescript-eslint/parser': 8.0.0-alpha.20(eslint@9.3.0)(typescript@5.4.5) + '@typescript-eslint/scope-manager': 8.0.0-alpha.20 + '@typescript-eslint/type-utils': 8.0.0-alpha.20(eslint@9.3.0)(typescript@5.4.5) + '@typescript-eslint/utils': 8.0.0-alpha.20(eslint@9.3.0)(typescript@5.4.5) + '@typescript-eslint/visitor-keys': 8.0.0-alpha.20 eslint: 9.3.0 graphemer: 1.4.0 ignore: 5.3.1 @@ -3764,12 +3764,12 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/parser@8.0.0-alpha.14(eslint@9.3.0)(typescript@5.4.5)': + '@typescript-eslint/parser@8.0.0-alpha.20(eslint@9.3.0)(typescript@5.4.5)': dependencies: - '@typescript-eslint/scope-manager': 8.0.0-alpha.14 - '@typescript-eslint/types': 8.0.0-alpha.14 - '@typescript-eslint/typescript-estree': 8.0.0-alpha.14(typescript@5.4.5) - '@typescript-eslint/visitor-keys': 8.0.0-alpha.14 + '@typescript-eslint/scope-manager': 8.0.0-alpha.20 + '@typescript-eslint/types': 8.0.0-alpha.20 + '@typescript-eslint/typescript-estree': 8.0.0-alpha.20(typescript@5.4.5) + '@typescript-eslint/visitor-keys': 8.0.0-alpha.20 debug: 4.3.4 eslint: 9.3.0 optionalDependencies: @@ -3777,15 +3777,15 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/scope-manager@8.0.0-alpha.14': + '@typescript-eslint/scope-manager@8.0.0-alpha.20': dependencies: - '@typescript-eslint/types': 8.0.0-alpha.14 - '@typescript-eslint/visitor-keys': 8.0.0-alpha.14 + '@typescript-eslint/types': 8.0.0-alpha.20 + '@typescript-eslint/visitor-keys': 8.0.0-alpha.20 - '@typescript-eslint/type-utils@8.0.0-alpha.14(eslint@9.3.0)(typescript@5.4.5)': + '@typescript-eslint/type-utils@8.0.0-alpha.20(eslint@9.3.0)(typescript@5.4.5)': dependencies: - '@typescript-eslint/typescript-estree': 8.0.0-alpha.14(typescript@5.4.5) - '@typescript-eslint/utils': 8.0.0-alpha.14(eslint@9.3.0)(typescript@5.4.5) + '@typescript-eslint/typescript-estree': 8.0.0-alpha.20(typescript@5.4.5) + '@typescript-eslint/utils': 8.0.0-alpha.20(eslint@9.3.0)(typescript@5.4.5) debug: 4.3.4 ts-api-utils: 1.3.0(typescript@5.4.5) optionalDependencies: @@ -3794,12 +3794,12 @@ snapshots: - eslint - supports-color - '@typescript-eslint/types@8.0.0-alpha.14': {} + '@typescript-eslint/types@8.0.0-alpha.20': {} - '@typescript-eslint/typescript-estree@8.0.0-alpha.14(typescript@5.4.5)': + '@typescript-eslint/typescript-estree@8.0.0-alpha.20(typescript@5.4.5)': dependencies: - '@typescript-eslint/types': 8.0.0-alpha.14 - '@typescript-eslint/visitor-keys': 8.0.0-alpha.14 + '@typescript-eslint/types': 8.0.0-alpha.20 + '@typescript-eslint/visitor-keys': 8.0.0-alpha.20 debug: 4.3.4 globby: 11.1.0 is-glob: 4.0.3 @@ -3811,20 +3811,20 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/utils@8.0.0-alpha.14(eslint@9.3.0)(typescript@5.4.5)': + '@typescript-eslint/utils@8.0.0-alpha.20(eslint@9.3.0)(typescript@5.4.5)': dependencies: '@eslint-community/eslint-utils': 4.4.0(eslint@9.3.0) - '@typescript-eslint/scope-manager': 8.0.0-alpha.14 - '@typescript-eslint/types': 8.0.0-alpha.14 - '@typescript-eslint/typescript-estree': 8.0.0-alpha.14(typescript@5.4.5) + '@typescript-eslint/scope-manager': 8.0.0-alpha.20 + '@typescript-eslint/types': 8.0.0-alpha.20 + '@typescript-eslint/typescript-estree': 8.0.0-alpha.20(typescript@5.4.5) eslint: 9.3.0 transitivePeerDependencies: - supports-color - typescript - '@typescript-eslint/visitor-keys@8.0.0-alpha.14': + '@typescript-eslint/visitor-keys@8.0.0-alpha.20': dependencies: - '@typescript-eslint/types': 8.0.0-alpha.14 + '@typescript-eslint/types': 8.0.0-alpha.20 eslint-visitor-keys: 3.4.3 '@ungap/structured-clone@1.2.0': {} @@ -6480,11 +6480,11 @@ snapshots: dependencies: is-typedarray: 1.0.0 - typescript-eslint@8.0.0-alpha.14(eslint@9.3.0)(typescript@5.4.5): + typescript-eslint@8.0.0-alpha.20(eslint@9.3.0)(typescript@5.4.5): dependencies: - '@typescript-eslint/eslint-plugin': 8.0.0-alpha.14(@typescript-eslint/parser@8.0.0-alpha.14(eslint@9.3.0)(typescript@5.4.5))(eslint@9.3.0)(typescript@5.4.5) - '@typescript-eslint/parser': 8.0.0-alpha.14(eslint@9.3.0)(typescript@5.4.5) - '@typescript-eslint/utils': 8.0.0-alpha.14(eslint@9.3.0)(typescript@5.4.5) + '@typescript-eslint/eslint-plugin': 8.0.0-alpha.20(@typescript-eslint/parser@8.0.0-alpha.20(eslint@9.3.0)(typescript@5.4.5))(eslint@9.3.0)(typescript@5.4.5) + '@typescript-eslint/parser': 8.0.0-alpha.20(eslint@9.3.0)(typescript@5.4.5) + '@typescript-eslint/utils': 8.0.0-alpha.20(eslint@9.3.0)(typescript@5.4.5) optionalDependencies: typescript: 5.4.5 transitivePeerDependencies: diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx index 7364203cb..6da496c45 100644 --- 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 = ({ 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$(() => { */ type InnerDropdownProps = { - label: string + label?: string as?: JSXOutput closeWhenSelect: boolean components: ComponentType[] @@ -112,7 +115,7 @@ type InnerDropdownProps = { class?: ClassList } -const InnerDropdown = component$(({ label, as, closeWhenSelect, components, inline, size, iconRotate, class: classNames }) => { +const InnerDropdown = component$(({ label, as, closeWhenSelect, components, inline, size, iconRotate }) => { const { dropdownModalClasses } = useDropdownClasses(useComputed$(() => size)) const visible = useSignal(false) @@ -125,19 +128,32 @@ const InnerDropdown = component$(({ 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 (
{TriggerButtonAs ? ( - + { + toggleVisible() + }} + size={size} + as={as} + /> ) : ( - + { + toggleVisible() + }} + label={label} + size={size} + iconRotate={iconRotate} + /> )} {visible.value && ( -