@jakubmazanec/ui 0.5.3 → 0.5.4-next.69e53e65

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/build/components/Button.d.ts +1 -1
  2. package/build/components/Checkbox.d.ts +1 -1
  3. package/build/components/CheckboxField.d.ts +1 -1
  4. package/build/components/Combobox.d.ts +1 -1
  5. package/build/components/ComboboxOption.d.ts +1 -1
  6. package/build/components/Description.d.ts +1 -1
  7. package/build/components/Dialog.d.ts +1 -1
  8. package/build/components/DialogPanel.d.ts +1 -1
  9. package/build/components/DialogTitle.d.ts +1 -1
  10. package/build/components/Field.d.ts +1 -1
  11. package/build/components/Fieldset.d.ts +1 -1
  12. package/build/components/Form.d.ts +1 -1
  13. package/build/components/Input.d.ts +1 -1
  14. package/build/components/Label.d.ts +1 -1
  15. package/build/components/Legend.d.ts +1 -1
  16. package/build/components/Listbox.d.ts +1 -1
  17. package/build/components/Listbox.js +1 -1
  18. package/build/components/Listbox.js.map +2 -2
  19. package/build/components/ListboxOption.d.ts +1 -1
  20. package/build/components/Menu.d.ts +1 -1
  21. package/build/components/MenuButton.d.ts +1 -1
  22. package/build/components/MenuHeading.d.ts +1 -1
  23. package/build/components/MenuItem.d.ts +1 -1
  24. package/build/components/MenuItems.d.ts +1 -1
  25. package/build/components/MenuSection.d.ts +1 -1
  26. package/build/components/MenuSeparator.d.ts +1 -1
  27. package/build/components/Popover.d.ts +1 -1
  28. package/build/components/PopoverBackdrop.d.ts +1 -1
  29. package/build/components/PopoverButton.d.ts +1 -1
  30. package/build/components/PopoverGroup.d.ts +1 -1
  31. package/build/components/PopoverPanel.d.ts +1 -1
  32. package/build/components/Radio.d.ts +1 -1
  33. package/build/components/RadioField.d.ts +1 -1
  34. package/build/components/RadioGroup.d.ts +1 -1
  35. package/build/components/Spinner.d.ts +1 -1
  36. package/build/components/Textarea.d.ts +1 -1
  37. package/build/components/data-table/DataTable.d.ts +1 -1
  38. package/build/components/data-table/DataTable.js +1 -1
  39. package/build/components/data-table/DataTable.js.map +1 -1
  40. package/build/components/data-table/internals/DataTableFilter.d.ts +1 -1
  41. package/build/components/data-table/internals/DataTableFilters.d.ts +1 -1
  42. package/build/components/data-table/internals/DataTableHeader.d.ts +1 -1
  43. package/build/components/data-table/internals/DataTableHeaderColumnCheckbox.d.ts +1 -1
  44. package/build/components/data-table/internals/DataTableHeaderFilter.d.ts +1 -1
  45. package/build/components/data-table/internals/DataTableMenu.d.ts +1 -1
  46. package/build/components/data-table/internals/DataTablePageButton.d.ts +1 -1
  47. package/build/components/data-table/internals/DataTablePagination.d.ts +1 -1
  48. package/build/components/data-table/internals/DataTableRow.d.ts +1 -1
  49. package/build/components/data-table/internals/DataTableSearch.d.ts +1 -1
  50. package/build/components/data-table/internals/DataTableSetting.d.ts +1 -1
  51. package/build/components/data-table/internals/DataTableSettings.d.ts +1 -1
  52. package/build/development/internals/createDistributionValues.js.map +1 -1
  53. package/build/theme/ThemeProvider.d.ts +1 -1
  54. package/build/theme/internals/createComponentTheme.js +1 -5
  55. package/build/theme/internals/createComponentTheme.js.map +2 -2
  56. package/build/theme/internals/createUseComponentThemeReturn.js.map +2 -2
  57. package/package.json +17 -17
  58. package/source/components/Listbox.tsx +3 -3
  59. package/source/components/data-table/DataTable.tsx +1 -1
  60. package/source/development/internals/createDistributionValues.ts +1 -1
  61. package/source/theme/internals/createComponentTheme.ts +2 -10
  62. package/source/theme/internals/createUseComponentThemeReturn.ts +1 -1
@@ -25,6 +25,6 @@ export type ButtonProps<T extends ElementType> = ComponentProps<typeof useButton
25
25
  className?: string | undefined;
26
26
  children?: HeadlessButtonProps['children'] | undefined;
27
27
  };
28
- export declare function Button<T extends ElementType = typeof BUTTON_ELEMENT>({ variant, size, disabled, as, idle, autoFocus, submit, className, ref, children, ...rest }: ButtonProps<T>): import("react/jsx-runtime").JSX.Element;
28
+ export declare function Button<T extends ElementType = typeof BUTTON_ELEMENT>({ variant, size, disabled, as, idle, autoFocus, submit, className, ref, children, ...rest }: ButtonProps<T>): import("react").JSX.Element;
29
29
  export declare const buttonTheme: ComponentTheme<typeof useButtonTheme>;
30
30
  export {};
@@ -25,6 +25,6 @@ export type CheckboxProps<T extends ElementType> = ComponentProps<typeof useChec
25
25
  className?: string;
26
26
  onChange?: ((checked: boolean) => void) | undefined;
27
27
  };
28
- export declare function Checkbox<T extends ElementType = typeof CHECKBOX_ELEMENT>({ disabled, as, checked, indeterminate, autoFocus, name, className, onChange, ref, ...rest }: CheckboxProps<T>): import("react/jsx-runtime").JSX.Element;
28
+ export declare function Checkbox<T extends ElementType = typeof CHECKBOX_ELEMENT>({ disabled, as, checked, indeterminate, autoFocus, name, className, onChange, ref, ...rest }: CheckboxProps<T>): import("react").JSX.Element;
29
29
  export declare const checkboxTheme: ComponentTheme<typeof useCheckboxTheme>;
30
30
  export {};
@@ -14,5 +14,5 @@ export type CheckboxFieldProps = PropsWithChildren<ComponentProps<typeof useChec
14
14
  field?: undefined;
15
15
  name?: FieldName<any, any> | string | undefined;
16
16
  })>;
17
- export declare function CheckboxField({ field, name, className, children }: CheckboxFieldProps): import("react/jsx-runtime").JSX.Element;
17
+ export declare function CheckboxField({ field, name, className, children }: CheckboxFieldProps): import("react").JSX.Element;
18
18
  export declare const checkboxFieldTheme: ComponentTheme<typeof useCheckboxFieldTheme>;
@@ -51,6 +51,6 @@ export type ComboboxProps<T extends ElementType, V extends boolean | number | st
51
51
  className?: string;
52
52
  onChange?: (selectedValue: V | undefined) => void;
53
53
  });
54
- export declare function Combobox<T extends ElementType = typeof COMBOBOX_ELEMENT, V extends boolean | number | string = string>({ disabled, invalid, as, value, defaultValue, multiple, items, placeholder, immediate, virtual, customValue, name, className, onChange, ref, children, ...rest }: ComboboxProps<T, V>): import("react/jsx-runtime").JSX.Element;
54
+ export declare function Combobox<T extends ElementType = typeof COMBOBOX_ELEMENT, V extends boolean | number | string = string>({ disabled, invalid, as, value, defaultValue, multiple, items, placeholder, immediate, virtual, customValue, name, className, onChange, ref, children, ...rest }: ComboboxProps<T, V>): import("react").JSX.Element;
55
55
  export declare const comboboxTheme: ComponentTheme<typeof useComboboxTheme>;
56
56
  export {};
@@ -21,6 +21,6 @@ export type ComboboxOptionProps<T extends ElementType, V extends boolean | numbe
21
21
  value: V;
22
22
  className?: string;
23
23
  };
24
- export declare function ComboboxOption<T extends ElementType = typeof LISTBOX_OPTION_ELEMENT, V extends boolean | number | string = string>({ disabled, as, value, className, children, ref, ...rest }: ComboboxOptionProps<T, V>): import("react/jsx-runtime").JSX.Element;
24
+ export declare function ComboboxOption<T extends ElementType = typeof LISTBOX_OPTION_ELEMENT, V extends boolean | number | string = string>({ disabled, as, value, className, children, ref, ...rest }: ComboboxOptionProps<T, V>): import("react").JSX.Element;
25
25
  export declare const comboboxOptionTheme: ComponentTheme<typeof useComboboxOptionTheme>;
26
26
  export {};
@@ -10,6 +10,6 @@ export type DescriptionProps<T extends ElementType> = ComponentProps<typeof useD
10
10
  as?: T | undefined;
11
11
  className?: string | undefined;
12
12
  };
13
- export declare function Description<T extends ElementType = typeof DESCRIPTION_ELEMENT>({ as, className, ref, children, ...rest }: DescriptionProps<T>): import("react/jsx-runtime").JSX.Element;
13
+ export declare function Description<T extends ElementType = typeof DESCRIPTION_ELEMENT>({ as, className, ref, children, ...rest }: DescriptionProps<T>): import("react").JSX.Element;
14
14
  export declare const descriptionTheme: ComponentTheme<typeof useDescriptionTheme>;
15
15
  export {};
@@ -19,6 +19,6 @@ export type DialogProps<T extends ElementType> = ComponentProps<typeof useDialog
19
19
  className?: string;
20
20
  onClose?: () => void;
21
21
  };
22
- export declare function Dialog<T extends ElementType = typeof DIALOG_ELEMENT>({ as, open, static: isStatic, autoFocus, className, onClose, ref, children, ...rest }: DialogProps<T>): import("react/jsx-runtime").JSX.Element;
22
+ export declare function Dialog<T extends ElementType = typeof DIALOG_ELEMENT>({ as, open, static: isStatic, autoFocus, className, onClose, ref, children, ...rest }: DialogProps<T>): import("react").JSX.Element;
23
23
  export declare const dialogTheme: ComponentTheme<typeof useDialogTheme>;
24
24
  export {};
@@ -10,6 +10,6 @@ export type DialogPanelProps<T extends ElementType> = ComponentProps<typeof useD
10
10
  as?: T | undefined;
11
11
  className?: string;
12
12
  };
13
- export declare function DialogPanel<T extends ElementType = typeof DIALOG_PANEL_ELEMENT>({ as, className, ref, children, ...rest }: DialogPanelProps<T>): import("react/jsx-runtime").JSX.Element;
13
+ export declare function DialogPanel<T extends ElementType = typeof DIALOG_PANEL_ELEMENT>({ as, className, ref, children, ...rest }: DialogPanelProps<T>): import("react").JSX.Element;
14
14
  export declare const dialogPanelTheme: ComponentTheme<typeof useDialogPanelTheme>;
15
15
  export {};
@@ -10,6 +10,6 @@ export type DialogTitleProps<T extends ElementType> = ComponentProps<typeof useD
10
10
  as?: T | undefined;
11
11
  className?: string;
12
12
  };
13
- export declare const DialogTitle: <T extends ElementType = typeof DIALOG_TITLE_ELEMENT>({ as, className, ref, children, ...rest }: DialogTitleProps<T>) => import("react/jsx-runtime").JSX.Element;
13
+ export declare const DialogTitle: <T extends ElementType = typeof DIALOG_TITLE_ELEMENT>({ as, className, ref, children, ...rest }: DialogTitleProps<T>) => import("react").JSX.Element;
14
14
  export declare const dialogTitleTheme: ComponentTheme<typeof useDialogTitleTheme>;
15
15
  export {};
@@ -18,6 +18,6 @@ export type FieldProps<T extends ElementType> = ComponentProps<typeof useFieldTh
18
18
  name?: undefined;
19
19
  field?: FieldMetadata<any, any> | undefined;
20
20
  });
21
- export declare function Field<T extends ElementType = typeof FIELD_ELEMENT>({ as, name, field, className, ref, children, ...rest }: FieldProps<T>): import("react/jsx-runtime").JSX.Element;
21
+ export declare function Field<T extends ElementType = typeof FIELD_ELEMENT>({ as, name, field, className, ref, children, ...rest }: FieldProps<T>): import("react").JSX.Element;
22
22
  export declare const fieldTheme: ComponentTheme<typeof useFieldTheme>;
23
23
  export {};
@@ -16,6 +16,6 @@ export type FieldsetProps<T extends ElementType> = ComponentProps<typeof useFiel
16
16
  as?: T | undefined;
17
17
  className?: string | undefined;
18
18
  };
19
- export declare function Fieldset<T extends ElementType = typeof FIELDSET_ELEMENT>({ as, disabled, className, ref, children, ...rest }: FieldsetProps<T>): import("react/jsx-runtime").JSX.Element;
19
+ export declare function Fieldset<T extends ElementType = typeof FIELDSET_ELEMENT>({ as, disabled, className, ref, children, ...rest }: FieldsetProps<T>): import("react").JSX.Element;
20
20
  export declare const fieldsetnTheme: ComponentTheme<typeof useFieldsetTheme>;
21
21
  export {};
@@ -12,6 +12,6 @@ export type FormProps<T extends ElementType> = ComponentProps<typeof useFormThem
12
12
  className?: string;
13
13
  form?: FormMetadata<any, any> | undefined;
14
14
  };
15
- export declare function Form<T extends ElementType = typeof FORM_ELEMENT>({ as: Component, className, form, ref, children, ...rest }: FormProps<T>): import("react/jsx-runtime").JSX.Element;
15
+ export declare function Form<T extends ElementType = typeof FORM_ELEMENT>({ as: Component, className, form, ref, children, ...rest }: FormProps<T>): import("react").JSX.Element;
16
16
  export declare const formTheme: ComponentTheme<typeof useFormTheme>;
17
17
  export {};
@@ -25,6 +25,6 @@ export type InputProps<T extends ElementType> = ComponentProps<typeof useInputTh
25
25
  icon?: ComponentType<object> | string | undefined;
26
26
  showClearButton?: boolean | undefined;
27
27
  };
28
- export declare function Input<T extends ElementType = typeof INPUT_ELEMENT>({ disabled, as, name, className, icon: IconComponent, showClearButton, ref, ...rest }: InputProps<T>): import("react/jsx-runtime").JSX.Element;
28
+ export declare function Input<T extends ElementType = typeof INPUT_ELEMENT>({ disabled, as, name, className, icon: IconComponent, showClearButton, ref, ...rest }: InputProps<T>): import("react").JSX.Element;
29
29
  export declare const inputTheme: ComponentTheme<typeof useInputTheme>;
30
30
  export {};
@@ -10,6 +10,6 @@ export type LabelProps<T extends ElementType> = ComponentProps<typeof useLabelTh
10
10
  as?: T | undefined;
11
11
  className?: string;
12
12
  };
13
- export declare function Label<T extends ElementType = typeof LABEL_ELEMENT>({ as, className, ref, children, ...rest }: LabelProps<T>): import("react/jsx-runtime").JSX.Element;
13
+ export declare function Label<T extends ElementType = typeof LABEL_ELEMENT>({ as, className, ref, children, ...rest }: LabelProps<T>): import("react").JSX.Element;
14
14
  export declare const labelTheme: ComponentTheme<typeof useLabelTheme>;
15
15
  export {};
@@ -10,6 +10,6 @@ export type LegendProps<T extends ElementType> = ComponentProps<typeof useLegend
10
10
  as?: T | undefined;
11
11
  className?: string | undefined;
12
12
  };
13
- export declare function Legend<T extends ElementType = typeof LEGEND_ELEMENT>({ as, className, ref, children, ...rest }: LegendProps<T>): import("react/jsx-runtime").JSX.Element;
13
+ export declare function Legend<T extends ElementType = typeof LEGEND_ELEMENT>({ as, className, ref, children, ...rest }: LegendProps<T>): import("react").JSX.Element;
14
14
  export declare const legendTheme: ComponentTheme<typeof useLegendTheme>;
15
15
  export {};
@@ -53,6 +53,6 @@ export type ListboxProps<T extends ElementType, V extends boolean | number | str
53
53
  showFilter?: boolean | undefined;
54
54
  onChange?: (selectedValue: V) => void;
55
55
  });
56
- export declare function Listbox<T extends ElementType = typeof LISTBOX_ELEMENT, V extends boolean | number | string = string>({ disabled, invalid, as, value, defaultValue, multiple, hideSelected, items, placeholder, name, className, showFilter, onChange, ref, children, ...rest }: ListboxProps<T, V>): import("react/jsx-runtime").JSX.Element;
56
+ export declare function Listbox<T extends ElementType = typeof LISTBOX_ELEMENT, V extends boolean | number | string = string>({ disabled, invalid, as, value, defaultValue, multiple, hideSelected, items, placeholder, name, className, showFilter, onChange, ref, children, ...rest }: ListboxProps<T, V>): import("react").JSX.Element;
57
57
  export declare const listboxTheme: ComponentTheme<typeof useListboxTheme>;
58
58
  export {};
@@ -69,7 +69,7 @@ export function Listbox({
69
69
  [showFilter]
70
70
  );
71
71
  let handleQueryChange = useCallback((event) => {
72
- setQuery(event.target.value);
72
+ setQuery(event.currentTarget.value);
73
73
  }, []);
74
74
  if (items && children) {
75
75
  throw new Error("Combobox accepts only either `items` prop, or children!");
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../source/components/Listbox.tsx"],
4
- "sourcesContent": ["import {\n Listbox as HeadlessListbox,\n ListboxButton as HeadlessListboxButton,\n ListboxOptions as HeadlessListboxOptions,\n type ListboxProps as HeadlessListboxProps,\n} from '@headlessui/react';\nimport {\n type ChangeEvent,\n Children,\n type ComponentPropsWithoutRef,\n type ElementType,\n Fragment,\n type KeyboardEvent,\n type PropsWithChildren,\n type ReactNode,\n useCallback,\n useRef,\n useState,\n} from 'react';\n\nimport {\n type ComponentProps,\n type ComponentTheme,\n createComponentTheme,\n} from '../theme/internals.js';\nimport {type ComponentRef} from './ComponentRef.js';\nimport {Icon} from './Icon.js';\nimport {Input} from './Input.js';\nimport {useFormId} from './internals.js';\nimport {ListboxOption} from './ListboxOption.js';\nimport {useField} from './useField.js';\nimport {useFieldName} from './useFieldName.js';\n\nexport const useListboxTheme = createComponentTheme('Listbox', {\n variants: {disabled: [true, false], invalid: [true, false]},\n elements: ['root', 'label', 'icon', 'options', 'filter'],\n});\n\nconst LISTBOX_ELEMENT = Fragment;\n\nexport type ListboxItem<V> = {\n value: V;\n label: string;\n};\n\nexport type ListboxProps<\n T extends ElementType,\n V extends boolean | number | string,\n> = ComponentProps<typeof useListboxTheme> &\n ComponentPropsWithoutRef<T> &\n ComponentRef<T> &\n PropsWithChildren &\n (\n | {\n as?: T | undefined;\n value?: V[] | undefined;\n defaultValue?: V[] | undefined;\n multiple: true;\n hideSelected?:\n | {\n limit: number;\n message?: string | undefined;\n }\n | undefined;\n items?: Array<ListboxItem<V>> | undefined;\n placeholder?: string;\n name?: string | undefined;\n className?: string | undefined;\n showFilter?: boolean | undefined;\n onChange?: (selectedValue: V[]) => void;\n }\n | {\n as?: T | undefined;\n value?: V | undefined;\n defaultValue?: V | undefined;\n multiple?: false | undefined;\n hideSelected?: never; // must be here so the type of props is correct\n items?: Array<ListboxItem<V>> | undefined;\n placeholder?: string;\n name?: string | undefined;\n className?: string | undefined;\n showFilter?: boolean | undefined;\n onChange?: (selectedValue: V) => void;\n }\n );\n\nexport function Listbox<\n T extends ElementType = typeof LISTBOX_ELEMENT,\n V extends boolean | number | string = string,\n>({\n disabled = false,\n invalid = false,\n as = LISTBOX_ELEMENT as unknown as T,\n value,\n defaultValue,\n multiple,\n hideSelected,\n items,\n placeholder,\n name,\n className,\n showFilter,\n onChange,\n ref,\n children,\n ...rest\n}: ListboxProps<T, V>) {\n let theme = useListboxTheme({disabled, invalid});\n let formId = useFormId();\n let field = useField();\n let fieldName = useFieldName();\n let [query, setQuery] = useState('');\n let inputRef = useRef<HTMLInputElement>(null);\n\n let handleChange = useCallback(\n (selectedValue: V) => {\n onChange?.(selectedValue as V & V[]);\n },\n [onChange],\n );\n\n // hacky solution so the user is able to focus inout used for filtering\n let handleTab = useCallback(\n (event: KeyboardEvent) => {\n if (!showFilter) {\n return;\n }\n\n if (event.key === 'Tab' && document.activeElement !== inputRef.current) {\n event.preventDefault();\n inputRef.current?.focus();\n }\n },\n [showFilter],\n );\n\n let handleQueryChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n setQuery(event.target.value);\n }, []);\n\n if (items && children) {\n throw new Error('Combobox accepts only either `items` prop, or children!');\n }\n\n let filteredItems =\n query ?\n items?.filter((item) =>\n item.label\n .toLowerCase()\n .replaceAll(/\\s+/g, '')\n .includes(query.toLowerCase().replaceAll(/\\s+/g, '')),\n )\n : items;\n let filteredChildren =\n query ?\n Children.toArray(children).filter((child) => {\n if (\n typeof child === 'object' &&\n 'props' in child &&\n typeof child.props === 'object' &&\n typeof (child.props as {children?: unknown[] | string}).children === 'string' &&\n (child.props as {children: string}).children\n .toLowerCase()\n .replaceAll(/\\s+/g, '')\n .includes(query.toLowerCase().replaceAll(/\\s+/g, ''))\n ) {\n return true;\n }\n\n return false;\n })\n : children;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n let props: HeadlessListboxProps<any, any> = {\n as,\n ref,\n name: field?.name ?? fieldName ?? name,\n value: value ?? undefined,\n defaultValue,\n multiple,\n disabled,\n invalid,\n form: formId,\n onChange: handleChange,\n ...rest,\n };\n\n return (\n <HeadlessListbox {...props}>\n <HeadlessListboxButton\n className={theme.root('relative', className)}\n data-component=\"listbox\"\n data-multiple={multiple ? true : null}\n >\n {({value: selectedValue}) => {\n if (!items && !multiple) {\n let selectedItem: ReactNode;\n\n Children.forEach(filteredChildren, (child) => {\n if (!child) {\n return;\n }\n\n if (\n typeof child === 'object' &&\n 'props' in child &&\n typeof child.props === 'object' &&\n (child.props as Record<string, unknown>).value === selectedValue\n ) {\n selectedItem = (child.props as Record<string, unknown>).children as ReactNode;\n }\n });\n\n return (\n <>\n <span className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}>\n {selectedItem ?? placeholder ?? null}\n </span>\n <span className={theme.icon('absolute')}>\n <Icon name=\"ChevronUpDown\" />\n </span>\n </>\n );\n } else if (!items && multiple) {\n let itemsHidden = false;\n let selectedItems: ReactNode[] = [];\n\n Children.forEach(filteredChildren, (child) => {\n if (!child) {\n return;\n }\n\n if (\n typeof child === 'object' &&\n 'props' in child &&\n typeof child.props === 'object' &&\n (selectedValue as unknown[]).includes(\n (child.props as Record<string, unknown>).value,\n )\n ) {\n selectedItems.push((child.props as Record<string, unknown>).children as ReactNode);\n }\n });\n\n if (hideSelected && selectedItems.length > hideSelected.limit) {\n selectedItems = selectedItems.slice(0, hideSelected.limit);\n itemsHidden = true;\n }\n\n return (\n <>\n {selectedItems.length ?\n selectedItems.map((selectedItem, index) => (\n <span\n // eslint-disable-next-line react/no-array-index-key -- needed\n key={index}\n className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}\n >\n {selectedItem}\n </span>\n ))\n : (placeholder ?? null)}\n {itemsHidden ?\n <span\n data-ellipsis\n className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}\n >\n {hideSelected?.message ?? '\u2026'}\n </span>\n : null}\n <span className={theme.icon('absolute')}>\n <Icon name=\"ChevronUpDown\" />\n </span>\n </>\n );\n } else if (items && multiple) {\n let itemsHidden = false;\n let selectedItems =\n filteredItems?.filter((item) =>\n Boolean((selectedValue as unknown[] | undefined)?.includes(item.value)),\n ) ?? [];\n\n if (hideSelected && selectedItems.length > hideSelected.limit) {\n selectedItems = selectedItems.slice(0, hideSelected.limit);\n itemsHidden = true;\n }\n\n return (\n <>\n {selectedItems.length ?\n selectedItems.map((selectedItem, index) => (\n <span\n // eslint-disable-next-line react/no-array-index-key -- needed\n key={index}\n className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}\n >\n {selectedItem.label}\n </span>\n ))\n : (placeholder ?? null)}\n {itemsHidden ?\n <span\n data-ellipsis\n className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}\n >\n {hideSelected?.message ?? '\u2026'}\n </span>\n : null}\n <span className={theme.icon('absolute')}>\n <Icon name=\"ChevronUpDown\" />\n </span>\n </>\n );\n }\n\n let selectedItem = filteredItems?.find((item) => item.value === selectedValue);\n\n return (\n <>\n <span className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}>\n {selectedItem?.label ?? placeholder ?? null}\n </span>\n <span className={theme.icon('absolute')}>\n <Icon name=\"ChevronUpDown\" />\n </span>\n </>\n );\n }}\n </HeadlessListboxButton>\n <HeadlessListboxOptions\n anchor=\"bottom start\"\n className={theme.options()}\n onKeyDown={handleTab}\n >\n {showFilter ?\n <div className={theme.filter()}>\n <Input ref={inputRef} showClearButton value={query} onInput={handleQueryChange} />\n </div>\n : null}\n {items ?\n filteredItems?.map((item) => (\n <ListboxOption key={item.label} value={item.value}>\n {item.label}\n </ListboxOption>\n ))\n : filteredChildren}\n </HeadlessListboxOptions>\n </HeadlessListbox>\n );\n}\n\nexport const listboxTheme: ComponentTheme<typeof useListboxTheme> = {\n classNames: {\n root: 'flex w-full min-w-32 items-center rounded-2 border-2 border-neutral-100 hover:border-neutral-200 bg-white px-2.5 h-9 pr-9 gap-x-2 transition-colors shadow-inner font-sans text-sm',\n label: 'flex gap-x-2',\n icon: 'text-neutral-500 size-5 top-1.5 right-1.5 cursor-pointer',\n options:\n 'flex flex-col gap-y-1 shadow p-1 z-30 rounded-2 border-2 border-neutral-100 hover:border-neutral-200 bg-white text-left w-[var(--button-width)] [--anchor-gap:theme(spacing.1)] [--anchor-padding:theme(spacing.2)] [scrollbar-width:thin] empty:invisible transition-colors',\n filter: '[&>[data-component=input]]:rounded',\n },\n variants: {\n disabled: {\n true: {\n root: 'border-neutral-100 text-neutral-200 cursor-not-allowed',\n label: '',\n icon: 'text-neutral-200',\n options: 'border-neutral-100',\n filter: '',\n },\n false: {\n root: '',\n label: '',\n icon: '',\n options: '',\n filter: '',\n },\n },\n invalid: {\n true: {\n root: '',\n label: '',\n icon: '',\n options: '',\n filter: '',\n },\n false: {\n root: '',\n label: '',\n icon: '',\n options: '',\n filter: '',\n },\n },\n },\n};\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import {\n Listbox as HeadlessListbox,\n ListboxButton as HeadlessListboxButton,\n ListboxOptions as HeadlessListboxOptions,\n type ListboxProps as HeadlessListboxProps,\n} from '@headlessui/react';\nimport {\n Children,\n type ComponentPropsWithoutRef,\n type ElementType,\n Fragment,\n type InputEvent,\n type KeyboardEvent,\n type PropsWithChildren,\n type ReactNode,\n useCallback,\n useRef,\n useState,\n} from 'react';\n\nimport {\n type ComponentProps,\n type ComponentTheme,\n createComponentTheme,\n} from '../theme/internals.js';\nimport {type ComponentRef} from './ComponentRef.js';\nimport {Icon} from './Icon.js';\nimport {Input} from './Input.js';\nimport {useFormId} from './internals.js';\nimport {ListboxOption} from './ListboxOption.js';\nimport {useField} from './useField.js';\nimport {useFieldName} from './useFieldName.js';\n\nexport const useListboxTheme = createComponentTheme('Listbox', {\n variants: {disabled: [true, false], invalid: [true, false]},\n elements: ['root', 'label', 'icon', 'options', 'filter'],\n});\n\nconst LISTBOX_ELEMENT = Fragment;\n\nexport type ListboxItem<V> = {\n value: V;\n label: string;\n};\n\nexport type ListboxProps<\n T extends ElementType,\n V extends boolean | number | string,\n> = ComponentProps<typeof useListboxTheme> &\n ComponentPropsWithoutRef<T> &\n ComponentRef<T> &\n PropsWithChildren &\n (\n | {\n as?: T | undefined;\n value?: V[] | undefined;\n defaultValue?: V[] | undefined;\n multiple: true;\n hideSelected?:\n | {\n limit: number;\n message?: string | undefined;\n }\n | undefined;\n items?: Array<ListboxItem<V>> | undefined;\n placeholder?: string;\n name?: string | undefined;\n className?: string | undefined;\n showFilter?: boolean | undefined;\n onChange?: (selectedValue: V[]) => void;\n }\n | {\n as?: T | undefined;\n value?: V | undefined;\n defaultValue?: V | undefined;\n multiple?: false | undefined;\n hideSelected?: never; // must be here so the type of props is correct\n items?: Array<ListboxItem<V>> | undefined;\n placeholder?: string;\n name?: string | undefined;\n className?: string | undefined;\n showFilter?: boolean | undefined;\n onChange?: (selectedValue: V) => void;\n }\n );\n\nexport function Listbox<\n T extends ElementType = typeof LISTBOX_ELEMENT,\n V extends boolean | number | string = string,\n>({\n disabled = false,\n invalid = false,\n as = LISTBOX_ELEMENT as unknown as T,\n value,\n defaultValue,\n multiple,\n hideSelected,\n items,\n placeholder,\n name,\n className,\n showFilter,\n onChange,\n ref,\n children,\n ...rest\n}: ListboxProps<T, V>) {\n let theme = useListboxTheme({disabled, invalid});\n let formId = useFormId();\n let field = useField();\n let fieldName = useFieldName();\n let [query, setQuery] = useState('');\n let inputRef = useRef<HTMLInputElement>(null);\n\n let handleChange = useCallback(\n (selectedValue: V) => {\n onChange?.(selectedValue as V & V[]);\n },\n [onChange],\n );\n\n // hacky solution so the user is able to focus inout used for filtering\n let handleTab = useCallback(\n (event: KeyboardEvent) => {\n if (!showFilter) {\n return;\n }\n\n if (event.key === 'Tab' && document.activeElement !== inputRef.current) {\n event.preventDefault();\n inputRef.current?.focus();\n }\n },\n [showFilter],\n );\n\n let handleQueryChange = useCallback((event: InputEvent<HTMLInputElement>) => {\n setQuery(event.currentTarget.value);\n }, []);\n\n if (items && children) {\n throw new Error('Combobox accepts only either `items` prop, or children!');\n }\n\n let filteredItems =\n query ?\n items?.filter((item) =>\n item.label\n .toLowerCase()\n .replaceAll(/\\s+/g, '')\n .includes(query.toLowerCase().replaceAll(/\\s+/g, '')),\n )\n : items;\n let filteredChildren =\n query ?\n Children.toArray(children).filter((child) => {\n if (\n typeof child === 'object' &&\n 'props' in child &&\n typeof child.props === 'object' &&\n typeof (child.props as {children?: unknown[] | string}).children === 'string' &&\n (child.props as {children: string}).children\n .toLowerCase()\n .replaceAll(/\\s+/g, '')\n .includes(query.toLowerCase().replaceAll(/\\s+/g, ''))\n ) {\n return true;\n }\n\n return false;\n })\n : children;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n let props: HeadlessListboxProps<any, any> = {\n as,\n ref,\n name: field?.name ?? fieldName ?? name,\n value: value ?? undefined,\n defaultValue,\n multiple,\n disabled,\n invalid,\n form: formId,\n onChange: handleChange,\n ...rest,\n };\n\n return (\n <HeadlessListbox {...props}>\n <HeadlessListboxButton\n className={theme.root('relative', className)}\n data-component=\"listbox\"\n data-multiple={multiple ? true : null}\n >\n {({value: selectedValue}) => {\n if (!items && !multiple) {\n let selectedItem: ReactNode;\n\n Children.forEach(filteredChildren, (child) => {\n if (!child) {\n return;\n }\n\n if (\n typeof child === 'object' &&\n 'props' in child &&\n typeof child.props === 'object' &&\n (child.props as Record<string, unknown>).value === selectedValue\n ) {\n selectedItem = (child.props as Record<string, unknown>).children as ReactNode;\n }\n });\n\n return (\n <>\n <span className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}>\n {selectedItem ?? placeholder ?? null}\n </span>\n <span className={theme.icon('absolute')}>\n <Icon name=\"ChevronUpDown\" />\n </span>\n </>\n );\n } else if (!items && multiple) {\n let itemsHidden = false;\n let selectedItems: ReactNode[] = [];\n\n Children.forEach(filteredChildren, (child) => {\n if (!child) {\n return;\n }\n\n if (\n typeof child === 'object' &&\n 'props' in child &&\n typeof child.props === 'object' &&\n (selectedValue as unknown[]).includes(\n (child.props as Record<string, unknown>).value,\n )\n ) {\n selectedItems.push((child.props as Record<string, unknown>).children as ReactNode);\n }\n });\n\n if (hideSelected && selectedItems.length > hideSelected.limit) {\n selectedItems = selectedItems.slice(0, hideSelected.limit);\n itemsHidden = true;\n }\n\n return (\n <>\n {selectedItems.length ?\n selectedItems.map((selectedItem, index) => (\n <span\n // eslint-disable-next-line react/no-array-index-key -- needed\n key={index}\n className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}\n >\n {selectedItem}\n </span>\n ))\n : (placeholder ?? null)}\n {itemsHidden ?\n <span\n data-ellipsis\n className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}\n >\n {hideSelected?.message ?? '\u2026'}\n </span>\n : null}\n <span className={theme.icon('absolute')}>\n <Icon name=\"ChevronUpDown\" />\n </span>\n </>\n );\n } else if (items && multiple) {\n let itemsHidden = false;\n let selectedItems =\n filteredItems?.filter((item) =>\n Boolean((selectedValue as unknown[] | undefined)?.includes(item.value)),\n ) ?? [];\n\n if (hideSelected && selectedItems.length > hideSelected.limit) {\n selectedItems = selectedItems.slice(0, hideSelected.limit);\n itemsHidden = true;\n }\n\n return (\n <>\n {selectedItems.length ?\n selectedItems.map((selectedItem, index) => (\n <span\n // eslint-disable-next-line react/no-array-index-key -- needed\n key={index}\n className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}\n >\n {selectedItem.label}\n </span>\n ))\n : (placeholder ?? null)}\n {itemsHidden ?\n <span\n data-ellipsis\n className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}\n >\n {hideSelected?.message ?? '\u2026'}\n </span>\n : null}\n <span className={theme.icon('absolute')}>\n <Icon name=\"ChevronUpDown\" />\n </span>\n </>\n );\n }\n\n let selectedItem = filteredItems?.find((item) => item.value === selectedValue);\n\n return (\n <>\n <span className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}>\n {selectedItem?.label ?? placeholder ?? null}\n </span>\n <span className={theme.icon('absolute')}>\n <Icon name=\"ChevronUpDown\" />\n </span>\n </>\n );\n }}\n </HeadlessListboxButton>\n <HeadlessListboxOptions\n anchor=\"bottom start\"\n className={theme.options()}\n onKeyDown={handleTab}\n >\n {showFilter ?\n <div className={theme.filter()}>\n <Input ref={inputRef} showClearButton value={query} onInput={handleQueryChange} />\n </div>\n : null}\n {items ?\n filteredItems?.map((item) => (\n <ListboxOption key={item.label} value={item.value}>\n {item.label}\n </ListboxOption>\n ))\n : filteredChildren}\n </HeadlessListboxOptions>\n </HeadlessListbox>\n );\n}\n\nexport const listboxTheme: ComponentTheme<typeof useListboxTheme> = {\n classNames: {\n root: 'flex w-full min-w-32 items-center rounded-2 border-2 border-neutral-100 hover:border-neutral-200 bg-white px-2.5 h-9 pr-9 gap-x-2 transition-colors shadow-inner font-sans text-sm',\n label: 'flex gap-x-2',\n icon: 'text-neutral-500 size-5 top-1.5 right-1.5 cursor-pointer',\n options:\n 'flex flex-col gap-y-1 shadow p-1 z-30 rounded-2 border-2 border-neutral-100 hover:border-neutral-200 bg-white text-left w-[var(--button-width)] [--anchor-gap:theme(spacing.1)] [--anchor-padding:theme(spacing.2)] [scrollbar-width:thin] empty:invisible transition-colors',\n filter: '[&>[data-component=input]]:rounded',\n },\n variants: {\n disabled: {\n true: {\n root: 'border-neutral-100 text-neutral-200 cursor-not-allowed',\n label: '',\n icon: 'text-neutral-200',\n options: 'border-neutral-100',\n filter: '',\n },\n false: {\n root: '',\n label: '',\n icon: '',\n options: '',\n filter: '',\n },\n },\n invalid: {\n true: {\n root: '',\n label: '',\n icon: '',\n options: '',\n filter: '',\n },\n false: {\n root: '',\n label: '',\n icon: '',\n options: '',\n filter: '',\n },\n },\n },\n};\n"],
5
+ "mappings": "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",
6
6
  "names": ["Fragment", "selectedItem"]
7
7
  }
@@ -21,6 +21,6 @@ export type ListboxOptionProps<T extends ElementType, V extends boolean | number
21
21
  value: V;
22
22
  className?: string;
23
23
  };
24
- export declare function ListboxOption<T extends ElementType = typeof LISTBOX_OPTION_ELEMENT, V extends boolean | number | string = string>({ disabled, as, value, className, ref, children, ...rest }: ListboxOptionProps<T, V>): import("react/jsx-runtime").JSX.Element;
24
+ export declare function ListboxOption<T extends ElementType = typeof LISTBOX_OPTION_ELEMENT, V extends boolean | number | string = string>({ disabled, as, value, className, ref, children, ...rest }: ListboxOptionProps<T, V>): import("react").JSX.Element;
25
25
  export declare const listboxOptionTheme: ComponentTheme<typeof useListboxOptionTheme>;
26
26
  export {};
@@ -10,6 +10,6 @@ export type MenuProps<T extends ElementType> = ComponentProps<typeof useMenuThem
10
10
  as?: T | undefined;
11
11
  className?: string;
12
12
  };
13
- export declare function Menu<T extends ElementType = typeof MENU_ELEMENT>({ as, className, ref, children, ...rest }: MenuProps<T>): import("react/jsx-runtime").JSX.Element;
13
+ export declare function Menu<T extends ElementType = typeof MENU_ELEMENT>({ as, className, ref, children, ...rest }: MenuProps<T>): import("react").JSX.Element;
14
14
  export declare const menuTheme: ComponentTheme<typeof useMenuTheme>;
15
15
  export {};
@@ -16,6 +16,6 @@ export type MenuButtonProps<T extends ElementType> = ComponentProps<typeof useMe
16
16
  as?: T | undefined;
17
17
  className?: string;
18
18
  };
19
- export declare function MenuButton<T extends ElementType = typeof MENU_BUTTON_ELEMENT>({ disabled, as, className, ref, children, ...rest }: MenuButtonProps<T>): import("react/jsx-runtime").JSX.Element;
19
+ export declare function MenuButton<T extends ElementType = typeof MENU_BUTTON_ELEMENT>({ disabled, as, className, ref, children, ...rest }: MenuButtonProps<T>): import("react").JSX.Element;
20
20
  export declare const menuButtonTheme: ComponentTheme<typeof useMenuButtonTheme>;
21
21
  export {};
@@ -10,6 +10,6 @@ export type MenuHeadingProps<T extends ElementType> = ComponentProps<typeof useM
10
10
  as?: T | undefined;
11
11
  className?: string;
12
12
  };
13
- export declare function MenuHeading<T extends ElementType = typeof MENU_HEADING_ELEMENT>({ as, className, ref, children, ...rest }: MenuHeadingProps<T>): import("react/jsx-runtime").JSX.Element;
13
+ export declare function MenuHeading<T extends ElementType = typeof MENU_HEADING_ELEMENT>({ as, className, ref, children, ...rest }: MenuHeadingProps<T>): import("react").JSX.Element;
14
14
  export declare const menuHeadingTheme: ComponentTheme<typeof useMenuHeadingTheme>;
15
15
  export {};
@@ -16,6 +16,6 @@ export type MenuItemProps<T extends ElementType> = ComponentProps<typeof useMenu
16
16
  as?: T | undefined;
17
17
  className?: string;
18
18
  };
19
- export declare function MenuItem<T extends ElementType = typeof MENU_ITEM_ELEMENT>({ disabled, as, className, ref, children, ...rest }: MenuItemProps<T>): import("react/jsx-runtime").JSX.Element;
19
+ export declare function MenuItem<T extends ElementType = typeof MENU_ITEM_ELEMENT>({ disabled, as, className, ref, children, ...rest }: MenuItemProps<T>): import("react").JSX.Element;
20
20
  export declare const menuItemTheme: ComponentTheme<typeof useMenuItemTheme>;
21
21
  export {};
@@ -12,6 +12,6 @@ export type MenuItemsProps<T extends ElementType> = ComponentProps<typeof useMen
12
12
  anchor?: HeadlessMenuItemsProps['anchor'] | undefined;
13
13
  className?: string;
14
14
  };
15
- export declare function MenuItems<T extends ElementType = typeof MENU_ITEMS_ELEMENT>({ as, anchor, className, ref, children, ...rest }: MenuItemsProps<T>): import("react/jsx-runtime").JSX.Element;
15
+ export declare function MenuItems<T extends ElementType = typeof MENU_ITEMS_ELEMENT>({ as, anchor, className, ref, children, ...rest }: MenuItemsProps<T>): import("react").JSX.Element;
16
16
  export declare const menuItemsTheme: ComponentTheme<typeof useMenuItemsTheme>;
17
17
  export {};
@@ -10,6 +10,6 @@ export type MenuSectionProps<T extends ElementType> = ComponentProps<typeof useM
10
10
  as?: T | undefined;
11
11
  className?: string;
12
12
  };
13
- export declare function MenuSection<T extends ElementType = typeof MENU_SECTION_ELEMENT>({ as, className, ref, children, ...rest }: MenuSectionProps<T>): import("react/jsx-runtime").JSX.Element;
13
+ export declare function MenuSection<T extends ElementType = typeof MENU_SECTION_ELEMENT>({ as, className, ref, children, ...rest }: MenuSectionProps<T>): import("react").JSX.Element;
14
14
  export declare const menuSectionTheme: ComponentTheme<typeof useMenuSectionTheme>;
15
15
  export {};
@@ -10,6 +10,6 @@ export type MenuSeparatorProps<T extends ElementType> = ComponentProps<typeof us
10
10
  as?: T | undefined;
11
11
  className?: string;
12
12
  };
13
- export declare function MenuSeparator<T extends ElementType = typeof MENU_SEPARATOR_ELEMENT>({ as, className, ref, children, ...rest }: MenuSeparatorProps<T>): import("react/jsx-runtime").JSX.Element;
13
+ export declare function MenuSeparator<T extends ElementType = typeof MENU_SEPARATOR_ELEMENT>({ as, className, ref, children, ...rest }: MenuSeparatorProps<T>): import("react").JSX.Element;
14
14
  export declare const menuSeparatorTheme: ComponentTheme<typeof useMenuSeparatorTheme>;
15
15
  export {};
@@ -10,6 +10,6 @@ export type PopoverProps<T extends ElementType> = ComponentProps<typeof usePopov
10
10
  as?: T | undefined;
11
11
  className?: string;
12
12
  };
13
- export declare function Popover<T extends ElementType = typeof POPOVER_ELEMENT>({ as, className, ref, children, ...rest }: PopoverProps<T>): import("react/jsx-runtime").JSX.Element;
13
+ export declare function Popover<T extends ElementType = typeof POPOVER_ELEMENT>({ as, className, ref, children, ...rest }: PopoverProps<T>): import("react").JSX.Element;
14
14
  export declare const popoverTheme: ComponentTheme<typeof usePopoverTheme>;
15
15
  export {};
@@ -10,6 +10,6 @@ export type PopoverBackdropProps<T extends ElementType> = ComponentProps<typeof
10
10
  as?: T | undefined;
11
11
  className?: string;
12
12
  };
13
- export declare function PopoverBackdrop<T extends ElementType = typeof POPOVER_BACKDROP_ELEMENT>({ as, className, ref, children, ...rest }: PopoverBackdropProps<T>): import("react/jsx-runtime").JSX.Element;
13
+ export declare function PopoverBackdrop<T extends ElementType = typeof POPOVER_BACKDROP_ELEMENT>({ as, className, ref, children, ...rest }: PopoverBackdropProps<T>): import("react").JSX.Element;
14
14
  export declare const popoverBackdropTheme: ComponentTheme<typeof usePopoverBackdropTheme>;
15
15
  export {};
@@ -17,6 +17,6 @@ export type PopoverButtonProps<T extends ElementType> = ComponentProps<typeof us
17
17
  autoFocus?: boolean | undefined;
18
18
  className?: string;
19
19
  };
20
- export declare function PopoverButton<T extends ElementType = typeof POPOVER_BUTTON_ELEMENT>({ disabled, as, autoFocus, className, ref, children, ...rest }: PopoverButtonProps<T>): import("react/jsx-runtime").JSX.Element;
20
+ export declare function PopoverButton<T extends ElementType = typeof POPOVER_BUTTON_ELEMENT>({ disabled, as, autoFocus, className, ref, children, ...rest }: PopoverButtonProps<T>): import("react").JSX.Element;
21
21
  export declare const popoverButtonTheme: ComponentTheme<typeof usePopoverButtonTheme>;
22
22
  export {};
@@ -10,6 +10,6 @@ export type PopoverGroupProps<T extends ElementType> = ComponentProps<typeof use
10
10
  as?: T | undefined;
11
11
  className?: string;
12
12
  };
13
- export declare function PopoverGroup<T extends ElementType = typeof POPOVER_GROUP_ELEMENT>({ as, className, ref, children, ...rest }: PopoverGroupProps<T>): import("react/jsx-runtime").JSX.Element;
13
+ export declare function PopoverGroup<T extends ElementType = typeof POPOVER_GROUP_ELEMENT>({ as, className, ref, children, ...rest }: PopoverGroupProps<T>): import("react").JSX.Element;
14
14
  export declare const popoverGroupTheme: ComponentTheme<typeof usePopoverGroupTheme>;
15
15
  export {};
@@ -13,6 +13,6 @@ export type PopoverPanelProps<T extends ElementType> = ComponentProps<typeof use
13
13
  anchor?: HeadlessPopoverPanelProps['anchor'] | undefined;
14
14
  className?: string;
15
15
  };
16
- export declare function PopoverPanel<T extends ElementType = typeof POPOVER_PANEL_ELEMENT>({ as, static: isStatic, anchor, className, ref, children, ...rest }: PopoverPanelProps<T>): import("react/jsx-runtime").JSX.Element;
16
+ export declare function PopoverPanel<T extends ElementType = typeof POPOVER_PANEL_ELEMENT>({ as, static: isStatic, anchor, className, ref, children, ...rest }: PopoverPanelProps<T>): import("react").JSX.Element;
17
17
  export declare const popoverPanelTheme: ComponentTheme<typeof usePopoverPanelTheme>;
18
18
  export {};
@@ -22,6 +22,6 @@ export type RadioProps<T extends ElementType, V extends boolean | number | strin
22
22
  autoFocus?: boolean | undefined;
23
23
  className?: string;
24
24
  };
25
- export declare function Radio<T extends ElementType = typeof RADIO_ELEMENT, V extends boolean | number | string = string>({ disabled, as, value, autoFocus, className, ref, ...rest }: RadioProps<T, V>): import("react/jsx-runtime").JSX.Element;
25
+ export declare function Radio<T extends ElementType = typeof RADIO_ELEMENT, V extends boolean | number | string = string>({ disabled, as, value, autoFocus, className, ref, ...rest }: RadioProps<T, V>): import("react").JSX.Element;
26
26
  export declare const radioTheme: ComponentTheme<typeof useRadioTheme>;
27
27
  export {};
@@ -7,5 +7,5 @@ export declare const useRadioFieldTheme: {
7
7
  export type RadioFieldProps = ComponentProps<typeof useRadioFieldTheme> & PropsWithChildren & {
8
8
  className?: string;
9
9
  };
10
- export declare function RadioField({ className, children }: RadioFieldProps): import("react/jsx-runtime").JSX.Element;
10
+ export declare function RadioField({ className, children }: RadioFieldProps): import("react").JSX.Element;
11
11
  export declare const radioFieldTheme: ComponentTheme<typeof useRadioFieldTheme>;
@@ -30,6 +30,6 @@ export type RadioGroupProps<T extends ElementType, V extends boolean | number |
30
30
  className?: string;
31
31
  onChange?: ((value: V) => void) | undefined;
32
32
  });
33
- export declare function RadioGroup<T extends ElementType = typeof RADIO_GROUP_ELEMENT, V extends boolean | number | string = string>({ disabled, as, value, defaultValue, field, name, className, onChange, ref, children, ...rest }: RadioGroupProps<T, V>): import("react/jsx-runtime").JSX.Element;
33
+ export declare function RadioGroup<T extends ElementType = typeof RADIO_GROUP_ELEMENT, V extends boolean | number | string = string>({ disabled, as, value, defaultValue, field, name, className, onChange, ref, children, ...rest }: RadioGroupProps<T, V>): import("react").JSX.Element;
34
34
  export declare const radioGroupTheme: ComponentTheme<typeof useRadioGroupTheme>;
35
35
  export {};
@@ -16,5 +16,5 @@ export declare const useSpinnerTheme: {
16
16
  export type SpinnerProps = ComponentProps<typeof useSpinnerTheme> & {
17
17
  className?: string;
18
18
  };
19
- export declare const Spinner: import("react").MemoExoticComponent<({ size, className, ...rest }: SpinnerProps) => import("react/jsx-runtime").JSX.Element>;
19
+ export declare const Spinner: import("react").MemoExoticComponent<({ size, className, ...rest }: SpinnerProps) => import("react").JSX.Element>;
20
20
  export declare const spinnerTheme: ComponentTheme<typeof useSpinnerTheme>;
@@ -23,6 +23,6 @@ export type TextareaProps<T extends ElementType> = ComponentProps<typeof useText
23
23
  className?: string | undefined;
24
24
  icon?: ComponentType<object> | undefined;
25
25
  };
26
- export declare function Textarea<T extends ElementType = typeof TEXTAREA_ELEMENT>({ disabled, as, name, className, icon: Icon, ref, ...rest }: TextareaProps<T>): import("react/jsx-runtime").JSX.Element;
26
+ export declare function Textarea<T extends ElementType = typeof TEXTAREA_ELEMENT>({ disabled, as, name, className, icon: Icon, ref, ...rest }: TextareaProps<T>): import("react").JSX.Element;
27
27
  export declare const textareaTheme: ComponentTheme<typeof useTextareaTheme>;
28
28
  export {};
@@ -45,4 +45,4 @@ export type DataTableProps<D, C> = {
45
45
  onSearchChange?: ((search: DataTableSearch) => void) | undefined;
46
46
  showRowSummaryOnClick?: boolean | undefined;
47
47
  };
48
- export declare function DataTable<D extends RowData, C extends Array<ColumnDef<D, any>>>({ data, columns, clientPagination, hidePagination, pagination: controlledPagination, onPaginationChange, clientSorting, sorting: controlledSorting, hideSorting, onSortingChange, columnVisibility: controlledColumnVisibility, hideColumnVisibility, onColumnVisibilityChange, columnOrder: controlledColumnOrder, hideColumnOrder, onColumnOrderChange, columnPinning: controlledColumnPinning, hideColumnPinning, onColumnPinningChange, hideColumnResizing, clientFilters, hideFilters, filters: controlledFilters, onFiltersChange, clientFaceting, faceting, clientSearch, hideSearch, search: controlledSearch, onSearchChange, showRowSummaryOnClick, }: DataTableProps<D, C>): import("react/jsx-runtime").JSX.Element;
48
+ export declare function DataTable<D extends RowData, C extends Array<ColumnDef<D, any>>>({ data, columns, clientPagination, hidePagination, pagination: controlledPagination, onPaginationChange, clientSorting, sorting: controlledSorting, hideSorting, onSortingChange, columnVisibility: controlledColumnVisibility, hideColumnVisibility, onColumnVisibilityChange, columnOrder: controlledColumnOrder, hideColumnOrder, onColumnOrderChange, columnPinning: controlledColumnPinning, hideColumnPinning, onColumnPinningChange, hideColumnResizing, clientFilters, hideFilters, filters: controlledFilters, onFiltersChange, clientFaceting, faceting, clientSearch, hideSearch, search: controlledSearch, onSearchChange, showRowSummaryOnClick, }: DataTableProps<D, C>): import("react").JSX.Element;
@@ -232,7 +232,7 @@ export function DataTable({
232
232
  onFiltering: onFiltersChange
233
233
  }
234
234
  ),
235
- /* @__PURE__ */ jsx("div", { className: "w-full overflow-x-scroll overflow-y-visible [scrollbar-width:thin]", children: /* @__PURE__ */ jsxs(
235
+ /* @__PURE__ */ jsx("div", { className: "w-full [scrollbar-width:thin] overflow-x-scroll overflow-y-visible", children: /* @__PURE__ */ jsxs(
236
236
  Table,
237
237
  {
238
238
  style: {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../source/components/data-table/DataTable.tsx"],
4
- "sourcesContent": ["import {horizontalListSortingStrategy, SortableContext} from '@dnd-kit/sortable';\nimport {\n type ColumnDef,\n type ColumnFiltersState,\n type ColumnOrderState,\n type ColumnPinningState,\n flexRender,\n getCoreRowModel,\n getFacetedMinMaxValues,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n type Header,\n type PaginationState,\n type Row,\n type RowData,\n type SortingState,\n type Updater,\n useReactTable,\n type VisibilityState,\n} from '@tanstack/react-table';\nimport {useCallback, useState} from 'react';\n\nimport {Button} from '../Button.js';\nimport {Container} from '../Container.js';\nimport {Dialog} from '../Dialog.js';\nimport {DialogPanel} from '../DialogPanel.js';\nimport {Table} from '../Table.js';\nimport {TableBody} from '../TableBody.js';\nimport {TableCell} from '../TableCell.js';\nimport {TableFoot} from '../TableFoot.js';\nimport {TableHead} from '../TableHead.js';\nimport {TableHeader} from '../TableHeader.js';\nimport {TableRow} from '../TableRow.js';\nimport {type DataTableColumnOrder} from './DataTableColumnOrder.js';\nimport {type DataTableColumnPinning} from './DataTableColumnPinning.js';\nimport {type DataTableColumnVisibility} from './DataTableColumnVisibility.js';\nimport {type DataTableFaceting} from './DataTableFaceting.js';\nimport {type DataTableFilters} from './DataTableFilters.js';\nimport {type DataTablePagination} from './DataTablePagination.js';\nimport {type DataTableSearch} from './DataTableSearch.js';\nimport {type DataTableSorting} from './DataTableSorting.js';\nimport {\n DataTableFilters as DataTableFiltersComponent,\n DataTableHeader,\n DataTableMenu,\n DataTablePagination as DataTablePaginationComponent,\n DataTableSearch as DataTableSearchComponent,\n DEFAULT_PAGE_SIZE,\n fromPinningState,\n fuzzyFilter,\n} from './internals.js';\nimport {DataTableRow} from './internals/DataTableRow.js';\n\ndeclare module '@tanstack/react-table' {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars -- false positive\n interface ColumnMeta<TData extends RowData, TValue> {\n filterVariant?: 'range' | 'select' | 'text';\n }\n}\n\nexport type DataTableProps<D, C> = {\n data: D[];\n columns: C;\n clientPagination?: boolean | undefined;\n hidePagination?: boolean | undefined;\n pagination?: DataTablePagination | undefined;\n onPaginationChange?:\n | ((\n pagination: Pick<DataTablePagination, 'page'> | Pick<DataTablePagination, 'pageSize'>,\n ) => void)\n | undefined;\n columnVisibility?: DataTableColumnVisibility;\n hideColumnVisibility?: boolean | undefined;\n onColumnVisibilityChange?: ((columnVisibility: DataTableColumnVisibility) => void) | undefined;\n columnOrder?: DataTableColumnOrder;\n hideColumnOrder?: boolean | undefined;\n onColumnOrderChange?: ((columnOrder: DataTableColumnOrder) => void) | undefined;\n columnPinning?: DataTableColumnPinning;\n hideColumnPinning?: boolean | undefined;\n onColumnPinningChange?: ((columnPinning: DataTableColumnPinning) => void) | undefined;\n hideColumnResizing?: boolean | undefined;\n clientSorting?: boolean | undefined;\n sorting?: DataTableSorting | undefined;\n hideSorting?: boolean | undefined;\n onSortingChange?: ((sorting: DataTableSorting) => void) | undefined;\n clientFilters?: boolean | undefined;\n hideFilters?: boolean | undefined;\n filters?: DataTableFilters | undefined;\n onFiltersChange?: ((filters: DataTableFilters) => void) | undefined;\n clientFaceting?: boolean | undefined;\n faceting?: DataTableFaceting | undefined;\n clientSearch?: boolean | undefined;\n hideSearch?: boolean | undefined;\n search?: DataTableSearch | undefined;\n onSearchChange?: ((search: DataTableSearch) => void) | undefined;\n showRowSummaryOnClick?: boolean | undefined;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed so the type parameters are useful\nexport function DataTable<D extends RowData, C extends Array<ColumnDef<D, any>>>({\n data,\n columns,\n clientPagination = false,\n hidePagination = false,\n pagination: controlledPagination,\n onPaginationChange,\n clientSorting = false,\n sorting: controlledSorting,\n hideSorting = false,\n onSortingChange,\n columnVisibility: controlledColumnVisibility,\n hideColumnVisibility = false,\n onColumnVisibilityChange,\n columnOrder: controlledColumnOrder,\n hideColumnOrder = false,\n onColumnOrderChange,\n columnPinning: controlledColumnPinning,\n hideColumnPinning = false,\n onColumnPinningChange,\n hideColumnResizing = false,\n clientFilters = false,\n hideFilters = false,\n filters: controlledFilters,\n onFiltersChange,\n clientFaceting = false,\n faceting,\n clientSearch = false,\n hideSearch = false,\n search: controlledSearch,\n onSearchChange,\n showRowSummaryOnClick = false,\n}: DataTableProps<D, C>) {\n let [pagination, setPagination] = useState<PaginationState>(\n controlledPagination ?\n {\n pageIndex: Math.max(0, controlledPagination.page - 1),\n pageSize: controlledPagination.pageSize,\n }\n : {\n pageIndex: 0,\n pageSize: DEFAULT_PAGE_SIZE,\n },\n );\n let [columnVisibility, setColumnVisibility] = useState(controlledColumnVisibility ?? {});\n let [columnOrder, setColumnOrder] = useState<string[]>(\n controlledColumnOrder ?\n [\n ...controlledColumnOrder,\n ...columns\n .map((column, index) => {\n if (column.id) {\n return column.id;\n }\n\n if ('accessorKey' in column) {\n return String(column.accessorKey);\n }\n\n if (typeof column.header === 'string') {\n return String(column.header);\n }\n\n return String(index);\n })\n .filter((value) => !controlledColumnOrder.includes(value)),\n ]\n : columns.map((column, index) => {\n if (column.id) {\n return column.id;\n }\n\n if ('accessorKey' in column) {\n return String(column.accessorKey);\n }\n\n if (typeof column.header === 'string') {\n return String(column.header);\n }\n\n return String(index);\n }),\n );\n let [columnPinning, setColumnPinning] = useState<ColumnPinningState>(\n controlledColumnPinning ?\n {\n left: Object.entries(controlledColumnPinning)\n .filter(([, pinning]) => pinning === 'left')\n .map(([column]) => column),\n right: Object.entries(controlledColumnPinning)\n .filter(([, pinning]) => pinning === 'right')\n .map(([column]) => column),\n }\n : {left: [], right: []},\n );\n let [sorting, setSorting] = useState<SortingState>([]);\n let [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n let [showFilters, setShowFilters] = useState(false);\n let [search, setSearch] = useState('');\n let [showRowSummary, setShowRowSummary] = useState(false);\n let [rowSummaryRow, setRowSummaryRow] = useState<Row<D> | null>(null);\n\n let handleColumnVisibilityChange = useCallback(\n (columnVisibilityState: Updater<VisibilityState>) => {\n setColumnVisibility(columnVisibilityState);\n\n if (typeof columnVisibilityState === 'function') {\n onColumnVisibilityChange?.(columnVisibilityState(columnVisibility));\n } else {\n onColumnVisibilityChange?.(columnVisibilityState);\n }\n },\n [columnVisibility, onColumnVisibilityChange],\n );\n let handleColumnOrderChange = useCallback(\n (columnOrderState: Updater<ColumnOrderState>) => {\n setColumnOrder(columnOrderState);\n\n if (typeof columnOrderState === 'function') {\n onColumnOrderChange?.(columnOrderState(columnOrder));\n } else {\n onColumnOrderChange?.(columnOrderState);\n }\n },\n [columnOrder, onColumnOrderChange],\n );\n let handleColumnPinningChange = useCallback(\n (columnPinningState: Updater<ColumnPinningState>) => {\n setColumnPinning(columnPinningState);\n\n if (typeof columnPinningState === 'function') {\n onColumnPinningChange?.(fromPinningState(columnPinningState(columnPinning)));\n } else {\n onColumnPinningChange?.(fromPinningState(columnPinningState));\n }\n },\n [columnPinning, onColumnPinningChange],\n );\n\n let table = useReactTable<D>({\n data,\n columns,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getPaginationRowModel: clientPagination ? getPaginationRowModel() : undefined,\n getFilteredRowModel: getFilteredRowModel(),\n getFacetedRowModel: clientFaceting ? getFacetedRowModel() : undefined,\n getFacetedUniqueValues: clientFaceting ? getFacetedUniqueValues() : undefined,\n getFacetedMinMaxValues: clientFaceting ? getFacetedMinMaxValues() : undefined,\n state: {\n pagination: clientPagination ? pagination : undefined,\n columnVisibility,\n columnOrder,\n columnPinning,\n sorting: clientSorting ? sorting : undefined,\n columnFilters: clientFilters ? columnFilters : undefined,\n globalFilter: clientSearch ? search : undefined,\n },\n onPaginationChange: clientPagination ? setPagination : undefined,\n onColumnVisibilityChange: handleColumnVisibilityChange,\n onColumnOrderChange: handleColumnOrderChange,\n onColumnPinningChange: handleColumnPinningChange,\n onSortingChange: clientSorting ? setSorting : undefined,\n onColumnFiltersChange: clientFilters ? setColumnFilters : undefined,\n onGlobalFilterChange: clientSearch ? setSearch : undefined,\n columnResizeMode: 'onChange',\n globalFilterFn: fuzzyFilter,\n });\n\n let page =\n clientPagination ?\n table.getState().pagination.pageIndex + 1\n : (controlledPagination?.page ?? 1);\n let pageSize =\n clientPagination ?\n table.getState().pagination.pageSize\n : (controlledPagination?.pageSize ?? DEFAULT_PAGE_SIZE);\n let pageCount = clientPagination ? table.getPageCount() : (controlledPagination?.pageCount ?? 1);\n\n let toggleFilters = useCallback(() => {\n setShowFilters((value) => !value);\n }, []);\n\n let handleRowClick = useCallback((row: Row<D>) => {\n setRowSummaryRow(row);\n setShowRowSummary(true);\n }, []);\n\n let handleCloseRowDialog = useCallback(() => {\n setShowRowSummary(false);\n }, []);\n\n return (\n <div\n className=\"group/table grid w-full grid-cols-[100%] grid-rows-[min-content_min-content_1fr] gap-6 sm:gap-4 sm:data-[show-filters]:grid-cols-[1fr_2fr] md:data-[show-filters]:grid-cols-[1fr_3fr] lg:data-[show-filters]:grid-cols-[1fr_4fr]\"\n data-show-filters={showFilters || undefined}\n >\n <div className=\"flex flex-col gap-2\">\n {hideSearch ? null : (\n <DataTableSearchComponent\n clientSearch={clientSearch}\n search={controlledSearch}\n table={table}\n onSearch={onSearchChange}\n />\n )}\n {hideColumnOrder && hideColumnPinning && hideColumnVisibility && hideFilters ? null : (\n <DataTableMenu\n hideColumnOrder={hideColumnOrder}\n hideColumnPinning={hideColumnPinning}\n hideColumnVisibility={hideColumnVisibility}\n hideFilters={hideFilters}\n table={table}\n toggleFilters={toggleFilters}\n />\n )}\n </div>\n {hideFilters ? null : (\n <DataTableFiltersComponent\n clientFaceting={clientFaceting}\n clientFilters={clientFilters}\n faceting={faceting}\n filters={controlledFilters}\n table={table}\n onFiltering={onFiltersChange}\n />\n )}\n <div className=\"w-full overflow-x-scroll overflow-y-visible [scrollbar-width:thin]\">\n <Table\n style={{\n width: table.getCenterTotalSize(),\n tableLayout: 'fixed',\n }}\n >\n <TableHead>\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id}>\n <SortableContext items={columnOrder} strategy={horizontalListSortingStrategy}>\n {headerGroup.headers.map((header) => (\n <DataTableHeader\n key={header.id}\n clientSorting={clientSorting}\n header={header}\n hideColumnOrder={hideColumnOrder}\n hideColumnResizing={hideColumnResizing}\n hideSorting={hideSorting}\n sorting={controlledSorting}\n onSorting={onSortingChange}\n />\n ))}\n </SortableContext>\n </TableRow>\n ))}\n </TableHead>\n <TableBody>\n {table.getRowModel().rows.map((row) => (\n <DataTableRow\n key={row.id}\n row={row}\n onClick={showRowSummaryOnClick ? handleRowClick : undefined}\n />\n ))}\n </TableBody>\n <TableFoot>\n {table.getFooterGroups().map((footerGroup) => (\n <TableRow key={footerGroup.id}>\n {footerGroup.headers.map((header) => (\n <TableHeader key={header.id}>\n {header.isPlaceholder ? null : (\n flexRender(header.column.columnDef.footer, header.getContext())\n )}\n </TableHeader>\n ))}\n </TableRow>\n ))}\n </TableFoot>\n </Table>\n </div>\n {hidePagination ? null : (\n <DataTablePaginationComponent\n clientPagination={clientPagination}\n page={page}\n pageCount={pageCount}\n pageSize={pageSize}\n table={table}\n onPagination={onPaginationChange}\n />\n )}\n {showRowSummaryOnClick ?\n <Dialog open={showRowSummary} onClose={handleCloseRowDialog}>\n <DialogPanel className=\"flex flex-col gap-4\">\n {rowSummaryRow ?\n <Table className=\"w-full\">\n <TableBody>\n {rowSummaryRow.getVisibleCells().map((cell) => (\n <TableRow key={cell.id}>\n <TableHeader className=\"px-4\">\n {flexRender(cell.column.columnDef.header, {\n table,\n column: cell.column,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions -- needed\n header: {column: cell.column} as Header<any, any>,\n })}\n </TableHeader>\n <TableCell className=\"overflow-visible whitespace-normal\">\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n : null}\n <Container align=\"center\" direction=\"column\">\n <Button className=\"self-center\" onClick={handleCloseRowDialog}>\n Close\n </Button>\n </Container>\n </DialogPanel>\n </Dialog>\n : null}\n </div>\n );\n}\n"],
4
+ "sourcesContent": ["import {horizontalListSortingStrategy, SortableContext} from '@dnd-kit/sortable';\nimport {\n type ColumnDef,\n type ColumnFiltersState,\n type ColumnOrderState,\n type ColumnPinningState,\n flexRender,\n getCoreRowModel,\n getFacetedMinMaxValues,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n type Header,\n type PaginationState,\n type Row,\n type RowData,\n type SortingState,\n type Updater,\n useReactTable,\n type VisibilityState,\n} from '@tanstack/react-table';\nimport {useCallback, useState} from 'react';\n\nimport {Button} from '../Button.js';\nimport {Container} from '../Container.js';\nimport {Dialog} from '../Dialog.js';\nimport {DialogPanel} from '../DialogPanel.js';\nimport {Table} from '../Table.js';\nimport {TableBody} from '../TableBody.js';\nimport {TableCell} from '../TableCell.js';\nimport {TableFoot} from '../TableFoot.js';\nimport {TableHead} from '../TableHead.js';\nimport {TableHeader} from '../TableHeader.js';\nimport {TableRow} from '../TableRow.js';\nimport {type DataTableColumnOrder} from './DataTableColumnOrder.js';\nimport {type DataTableColumnPinning} from './DataTableColumnPinning.js';\nimport {type DataTableColumnVisibility} from './DataTableColumnVisibility.js';\nimport {type DataTableFaceting} from './DataTableFaceting.js';\nimport {type DataTableFilters} from './DataTableFilters.js';\nimport {type DataTablePagination} from './DataTablePagination.js';\nimport {type DataTableSearch} from './DataTableSearch.js';\nimport {type DataTableSorting} from './DataTableSorting.js';\nimport {\n DataTableFilters as DataTableFiltersComponent,\n DataTableHeader,\n DataTableMenu,\n DataTablePagination as DataTablePaginationComponent,\n DataTableSearch as DataTableSearchComponent,\n DEFAULT_PAGE_SIZE,\n fromPinningState,\n fuzzyFilter,\n} from './internals.js';\nimport {DataTableRow} from './internals/DataTableRow.js';\n\ndeclare module '@tanstack/react-table' {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars -- false positive\n interface ColumnMeta<TData extends RowData, TValue> {\n filterVariant?: 'range' | 'select' | 'text';\n }\n}\n\nexport type DataTableProps<D, C> = {\n data: D[];\n columns: C;\n clientPagination?: boolean | undefined;\n hidePagination?: boolean | undefined;\n pagination?: DataTablePagination | undefined;\n onPaginationChange?:\n | ((\n pagination: Pick<DataTablePagination, 'page'> | Pick<DataTablePagination, 'pageSize'>,\n ) => void)\n | undefined;\n columnVisibility?: DataTableColumnVisibility;\n hideColumnVisibility?: boolean | undefined;\n onColumnVisibilityChange?: ((columnVisibility: DataTableColumnVisibility) => void) | undefined;\n columnOrder?: DataTableColumnOrder;\n hideColumnOrder?: boolean | undefined;\n onColumnOrderChange?: ((columnOrder: DataTableColumnOrder) => void) | undefined;\n columnPinning?: DataTableColumnPinning;\n hideColumnPinning?: boolean | undefined;\n onColumnPinningChange?: ((columnPinning: DataTableColumnPinning) => void) | undefined;\n hideColumnResizing?: boolean | undefined;\n clientSorting?: boolean | undefined;\n sorting?: DataTableSorting | undefined;\n hideSorting?: boolean | undefined;\n onSortingChange?: ((sorting: DataTableSorting) => void) | undefined;\n clientFilters?: boolean | undefined;\n hideFilters?: boolean | undefined;\n filters?: DataTableFilters | undefined;\n onFiltersChange?: ((filters: DataTableFilters) => void) | undefined;\n clientFaceting?: boolean | undefined;\n faceting?: DataTableFaceting | undefined;\n clientSearch?: boolean | undefined;\n hideSearch?: boolean | undefined;\n search?: DataTableSearch | undefined;\n onSearchChange?: ((search: DataTableSearch) => void) | undefined;\n showRowSummaryOnClick?: boolean | undefined;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed so the type parameters are useful\nexport function DataTable<D extends RowData, C extends Array<ColumnDef<D, any>>>({\n data,\n columns,\n clientPagination = false,\n hidePagination = false,\n pagination: controlledPagination,\n onPaginationChange,\n clientSorting = false,\n sorting: controlledSorting,\n hideSorting = false,\n onSortingChange,\n columnVisibility: controlledColumnVisibility,\n hideColumnVisibility = false,\n onColumnVisibilityChange,\n columnOrder: controlledColumnOrder,\n hideColumnOrder = false,\n onColumnOrderChange,\n columnPinning: controlledColumnPinning,\n hideColumnPinning = false,\n onColumnPinningChange,\n hideColumnResizing = false,\n clientFilters = false,\n hideFilters = false,\n filters: controlledFilters,\n onFiltersChange,\n clientFaceting = false,\n faceting,\n clientSearch = false,\n hideSearch = false,\n search: controlledSearch,\n onSearchChange,\n showRowSummaryOnClick = false,\n}: DataTableProps<D, C>) {\n let [pagination, setPagination] = useState<PaginationState>(\n controlledPagination ?\n {\n pageIndex: Math.max(0, controlledPagination.page - 1),\n pageSize: controlledPagination.pageSize,\n }\n : {\n pageIndex: 0,\n pageSize: DEFAULT_PAGE_SIZE,\n },\n );\n let [columnVisibility, setColumnVisibility] = useState(controlledColumnVisibility ?? {});\n let [columnOrder, setColumnOrder] = useState<string[]>(\n controlledColumnOrder ?\n [\n ...controlledColumnOrder,\n ...columns\n .map((column, index) => {\n if (column.id) {\n return column.id;\n }\n\n if ('accessorKey' in column) {\n return String(column.accessorKey);\n }\n\n if (typeof column.header === 'string') {\n return String(column.header);\n }\n\n return String(index);\n })\n .filter((value) => !controlledColumnOrder.includes(value)),\n ]\n : columns.map((column, index) => {\n if (column.id) {\n return column.id;\n }\n\n if ('accessorKey' in column) {\n return String(column.accessorKey);\n }\n\n if (typeof column.header === 'string') {\n return String(column.header);\n }\n\n return String(index);\n }),\n );\n let [columnPinning, setColumnPinning] = useState<ColumnPinningState>(\n controlledColumnPinning ?\n {\n left: Object.entries(controlledColumnPinning)\n .filter(([, pinning]) => pinning === 'left')\n .map(([column]) => column),\n right: Object.entries(controlledColumnPinning)\n .filter(([, pinning]) => pinning === 'right')\n .map(([column]) => column),\n }\n : {left: [], right: []},\n );\n let [sorting, setSorting] = useState<SortingState>([]);\n let [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n let [showFilters, setShowFilters] = useState(false);\n let [search, setSearch] = useState('');\n let [showRowSummary, setShowRowSummary] = useState(false);\n let [rowSummaryRow, setRowSummaryRow] = useState<Row<D> | null>(null);\n\n let handleColumnVisibilityChange = useCallback(\n (columnVisibilityState: Updater<VisibilityState>) => {\n setColumnVisibility(columnVisibilityState);\n\n if (typeof columnVisibilityState === 'function') {\n onColumnVisibilityChange?.(columnVisibilityState(columnVisibility));\n } else {\n onColumnVisibilityChange?.(columnVisibilityState);\n }\n },\n [columnVisibility, onColumnVisibilityChange],\n );\n let handleColumnOrderChange = useCallback(\n (columnOrderState: Updater<ColumnOrderState>) => {\n setColumnOrder(columnOrderState);\n\n if (typeof columnOrderState === 'function') {\n onColumnOrderChange?.(columnOrderState(columnOrder));\n } else {\n onColumnOrderChange?.(columnOrderState);\n }\n },\n [columnOrder, onColumnOrderChange],\n );\n let handleColumnPinningChange = useCallback(\n (columnPinningState: Updater<ColumnPinningState>) => {\n setColumnPinning(columnPinningState);\n\n if (typeof columnPinningState === 'function') {\n onColumnPinningChange?.(fromPinningState(columnPinningState(columnPinning)));\n } else {\n onColumnPinningChange?.(fromPinningState(columnPinningState));\n }\n },\n [columnPinning, onColumnPinningChange],\n );\n\n let table = useReactTable<D>({\n data,\n columns,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getPaginationRowModel: clientPagination ? getPaginationRowModel() : undefined,\n getFilteredRowModel: getFilteredRowModel(),\n getFacetedRowModel: clientFaceting ? getFacetedRowModel() : undefined,\n getFacetedUniqueValues: clientFaceting ? getFacetedUniqueValues() : undefined,\n getFacetedMinMaxValues: clientFaceting ? getFacetedMinMaxValues() : undefined,\n state: {\n pagination: clientPagination ? pagination : undefined,\n columnVisibility,\n columnOrder,\n columnPinning,\n sorting: clientSorting ? sorting : undefined,\n columnFilters: clientFilters ? columnFilters : undefined,\n globalFilter: clientSearch ? search : undefined,\n },\n onPaginationChange: clientPagination ? setPagination : undefined,\n onColumnVisibilityChange: handleColumnVisibilityChange,\n onColumnOrderChange: handleColumnOrderChange,\n onColumnPinningChange: handleColumnPinningChange,\n onSortingChange: clientSorting ? setSorting : undefined,\n onColumnFiltersChange: clientFilters ? setColumnFilters : undefined,\n onGlobalFilterChange: clientSearch ? setSearch : undefined,\n columnResizeMode: 'onChange',\n globalFilterFn: fuzzyFilter,\n });\n\n let page =\n clientPagination ?\n table.getState().pagination.pageIndex + 1\n : (controlledPagination?.page ?? 1);\n let pageSize =\n clientPagination ?\n table.getState().pagination.pageSize\n : (controlledPagination?.pageSize ?? DEFAULT_PAGE_SIZE);\n let pageCount = clientPagination ? table.getPageCount() : (controlledPagination?.pageCount ?? 1);\n\n let toggleFilters = useCallback(() => {\n setShowFilters((value) => !value);\n }, []);\n\n let handleRowClick = useCallback((row: Row<D>) => {\n setRowSummaryRow(row);\n setShowRowSummary(true);\n }, []);\n\n let handleCloseRowDialog = useCallback(() => {\n setShowRowSummary(false);\n }, []);\n\n return (\n <div\n className=\"group/table grid w-full grid-cols-[100%] grid-rows-[min-content_min-content_1fr] gap-6 sm:gap-4 sm:data-[show-filters]:grid-cols-[1fr_2fr] md:data-[show-filters]:grid-cols-[1fr_3fr] lg:data-[show-filters]:grid-cols-[1fr_4fr]\"\n data-show-filters={showFilters || undefined}\n >\n <div className=\"flex flex-col gap-2\">\n {hideSearch ? null : (\n <DataTableSearchComponent\n clientSearch={clientSearch}\n search={controlledSearch}\n table={table}\n onSearch={onSearchChange}\n />\n )}\n {hideColumnOrder && hideColumnPinning && hideColumnVisibility && hideFilters ? null : (\n <DataTableMenu\n hideColumnOrder={hideColumnOrder}\n hideColumnPinning={hideColumnPinning}\n hideColumnVisibility={hideColumnVisibility}\n hideFilters={hideFilters}\n table={table}\n toggleFilters={toggleFilters}\n />\n )}\n </div>\n {hideFilters ? null : (\n <DataTableFiltersComponent\n clientFaceting={clientFaceting}\n clientFilters={clientFilters}\n faceting={faceting}\n filters={controlledFilters}\n table={table}\n onFiltering={onFiltersChange}\n />\n )}\n <div className=\"w-full [scrollbar-width:thin] overflow-x-scroll overflow-y-visible\">\n <Table\n style={{\n width: table.getCenterTotalSize(),\n tableLayout: 'fixed',\n }}\n >\n <TableHead>\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id}>\n <SortableContext items={columnOrder} strategy={horizontalListSortingStrategy}>\n {headerGroup.headers.map((header) => (\n <DataTableHeader\n key={header.id}\n clientSorting={clientSorting}\n header={header}\n hideColumnOrder={hideColumnOrder}\n hideColumnResizing={hideColumnResizing}\n hideSorting={hideSorting}\n sorting={controlledSorting}\n onSorting={onSortingChange}\n />\n ))}\n </SortableContext>\n </TableRow>\n ))}\n </TableHead>\n <TableBody>\n {table.getRowModel().rows.map((row) => (\n <DataTableRow\n key={row.id}\n row={row}\n onClick={showRowSummaryOnClick ? handleRowClick : undefined}\n />\n ))}\n </TableBody>\n <TableFoot>\n {table.getFooterGroups().map((footerGroup) => (\n <TableRow key={footerGroup.id}>\n {footerGroup.headers.map((header) => (\n <TableHeader key={header.id}>\n {header.isPlaceholder ? null : (\n flexRender(header.column.columnDef.footer, header.getContext())\n )}\n </TableHeader>\n ))}\n </TableRow>\n ))}\n </TableFoot>\n </Table>\n </div>\n {hidePagination ? null : (\n <DataTablePaginationComponent\n clientPagination={clientPagination}\n page={page}\n pageCount={pageCount}\n pageSize={pageSize}\n table={table}\n onPagination={onPaginationChange}\n />\n )}\n {showRowSummaryOnClick ?\n <Dialog open={showRowSummary} onClose={handleCloseRowDialog}>\n <DialogPanel className=\"flex flex-col gap-4\">\n {rowSummaryRow ?\n <Table className=\"w-full\">\n <TableBody>\n {rowSummaryRow.getVisibleCells().map((cell) => (\n <TableRow key={cell.id}>\n <TableHeader className=\"px-4\">\n {flexRender(cell.column.columnDef.header, {\n table,\n column: cell.column,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions -- needed\n header: {column: cell.column} as Header<any, any>,\n })}\n </TableHeader>\n <TableCell className=\"overflow-visible whitespace-normal\">\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n : null}\n <Container align=\"center\" direction=\"column\">\n <Button className=\"self-center\" onClick={handleCloseRowDialog}>\n Close\n </Button>\n </Container>\n </DialogPanel>\n </Dialog>\n : null}\n </div>\n );\n}\n"],
5
5
  "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -9,4 +9,4 @@ export type DataTableFilterProps = {
9
9
  clientFaceting: DataTableProps<any, any>['clientFaceting'];
10
10
  faceting: DataTableProps<any, any>['faceting'];
11
11
  };
12
- export declare function DataTableFilter({ table, column, clientFilters, filters: controlledFilters, onFiltering, clientFaceting, faceting, }: DataTableFilterProps): import("react/jsx-runtime").JSX.Element;
12
+ export declare function DataTableFilter({ table, column, clientFilters, filters: controlledFilters, onFiltering, clientFaceting, faceting, }: DataTableFilterProps): import("react").JSX.Element;
@@ -8,4 +8,4 @@ export type DataTableFiltersProps = {
8
8
  clientFaceting: DataTableProps<any, any>['clientFaceting'];
9
9
  faceting: DataTableProps<any, any>['faceting'];
10
10
  };
11
- export declare function DataTableFilters({ table, clientFilters, filters: controlledFilters, onFiltering, clientFaceting, faceting, }: DataTableFiltersProps): import("react/jsx-runtime").JSX.Element;
11
+ export declare function DataTableFilters({ table, clientFilters, filters: controlledFilters, onFiltering, clientFaceting, faceting, }: DataTableFiltersProps): import("react").JSX.Element;
@@ -9,4 +9,4 @@ export type DataTableHeaderProps = {
9
9
  hideColumnOrder: DataTableProps<any, any>['hideColumnOrder'];
10
10
  hideColumnResizing: DataTableProps<any, any>['hideColumnResizing'];
11
11
  };
12
- export declare function DataTableHeader({ header, clientSorting, hideSorting, sorting: controlledSorting, onSorting, hideColumnOrder, hideColumnResizing, }: DataTableHeaderProps): import("react/jsx-runtime").JSX.Element;
12
+ export declare function DataTableHeader({ header, clientSorting, hideSorting, sorting: controlledSorting, onSorting, hideColumnOrder, hideColumnResizing, }: DataTableHeaderProps): import("react").JSX.Element;
@@ -3,4 +3,4 @@ export type DataTableHeaderColumnCheckboxProps = {
3
3
  column: Column<any>;
4
4
  table: Table<any>;
5
5
  };
6
- export declare function DataTableHeaderColumnCheckbox({ column, table }: DataTableHeaderColumnCheckboxProps): import("react/jsx-runtime").JSX.Element;
6
+ export declare function DataTableHeaderColumnCheckbox({ column, table }: DataTableHeaderColumnCheckboxProps): import("react").JSX.Element;
@@ -9,4 +9,4 @@ export type DataTableHeaderFilterProps = {
9
9
  clientFaceting: DataTableProps<any, any>['clientFaceting'];
10
10
  faceting: DataTableProps<any, any>['faceting'];
11
11
  };
12
- export declare function DataTableHeaderFilter({ table, column, clientFilters, filters: controlledFilters, onFiltering, clientFaceting, faceting, }: DataTableHeaderFilterProps): import("react/jsx-runtime").JSX.Element;
12
+ export declare function DataTableHeaderFilter({ table, column, clientFilters, filters: controlledFilters, onFiltering, clientFaceting, faceting, }: DataTableHeaderFilterProps): import("react").JSX.Element;
@@ -8,4 +8,4 @@ export type DataTableMenuProps = {
8
8
  hideColumnPinning: DataTableProps<any, any>['hideColumnPinning'];
9
9
  toggleFilters: () => void;
10
10
  };
11
- export declare function DataTableMenu({ table, hideFilters, hideColumnVisibility, hideColumnOrder, hideColumnPinning, toggleFilters, }: DataTableMenuProps): import("react/jsx-runtime").JSX.Element;
11
+ export declare function DataTableMenu({ table, hideFilters, hideColumnVisibility, hideColumnOrder, hideColumnPinning, toggleFilters, }: DataTableMenuProps): import("react").JSX.Element;
@@ -3,4 +3,4 @@ export type DataTablePageButtonProps = {
3
3
  isSelected: boolean;
4
4
  onClick: (page: number) => void;
5
5
  };
6
- export declare function DataTablePageButton({ page, isSelected, onClick }: DataTablePageButtonProps): import("react/jsx-runtime").JSX.Element;
6
+ export declare function DataTablePageButton({ page, isSelected, onClick }: DataTablePageButtonProps): import("react").JSX.Element;
@@ -8,4 +8,4 @@ export type DataTablePaginationProps = {
8
8
  clientPagination: DataTableProps<any, any>['clientPagination'];
9
9
  onPagination: DataTableProps<any, any>['onPaginationChange'];
10
10
  };
11
- export declare const DataTablePagination: import("react").MemoExoticComponent<({ table, page, pageSize, pageCount, clientPagination, onPagination, }: DataTablePaginationProps) => import("react/jsx-runtime").JSX.Element>;
11
+ export declare const DataTablePagination: import("react").MemoExoticComponent<({ table, page, pageSize, pageCount, clientPagination, onPagination, }: DataTablePaginationProps) => import("react").JSX.Element>;
@@ -3,4 +3,4 @@ export type DataTableRowProps = {
3
3
  row: Row<any>;
4
4
  onClick?: ((row: Row<any>) => void) | undefined;
5
5
  };
6
- export declare function DataTableRow({ row, onClick }: DataTableRowProps): import("react/jsx-runtime").JSX.Element;
6
+ export declare function DataTableRow({ row, onClick }: DataTableRowProps): import("react").JSX.Element;
@@ -6,4 +6,4 @@ export type DataTableSearchProps = {
6
6
  search: DataTableProps<any, any>['search'];
7
7
  onSearch: DataTableProps<any, any>['onSearchChange'];
8
8
  };
9
- export declare function DataTableSearch({ table, clientSearch, search: controlledSearch, onSearch, }: DataTableSearchProps): import("react/jsx-runtime").JSX.Element;
9
+ export declare function DataTableSearch({ table, clientSearch, search: controlledSearch, onSearch, }: DataTableSearchProps): import("react").JSX.Element;
@@ -7,4 +7,4 @@ export type DataTableSettingProps = {
7
7
  hideColumnOrder: DataTableProps<any, any>['hideColumnOrder'];
8
8
  hideColumnPinning: DataTableProps<any, any>['hideColumnPinning'];
9
9
  };
10
- export declare function DataTableSetting({ table, column, hideColumnVisibility, hideColumnOrder, hideColumnPinning, }: DataTableSettingProps): import("react/jsx-runtime").JSX.Element;
10
+ export declare function DataTableSetting({ table, column, hideColumnVisibility, hideColumnOrder, hideColumnPinning, }: DataTableSettingProps): import("react").JSX.Element;
@@ -6,4 +6,4 @@ export type DataTableSettingsProps = {
6
6
  hideColumnOrder: DataTableProps<any, any>['hideColumnOrder'];
7
7
  hideColumnPinning: DataTableProps<any, any>['hideColumnPinning'];
8
8
  };
9
- export declare function DataTableSettings({ table, hideColumnVisibility, hideColumnOrder, hideColumnPinning, }: DataTableSettingsProps): import("react/jsx-runtime").JSX.Element;
9
+ export declare function DataTableSettings({ table, hideColumnVisibility, hideColumnOrder, hideColumnPinning, }: DataTableSettingsProps): import("react").JSX.Element;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../source/development/internals/createDistributionValues.ts"],
4
- "sourcesContent": ["import {DEFAULT_STOP, DEFAULT_STOPS} from './constants.js';\n\nconst MIN = 0;\nconst MAX = 100;\n\nexport function createDistributionValues(lightness: number, stop: number = DEFAULT_STOP) {\n let stops: number[] = [...DEFAULT_STOPS].sort() as unknown as number[];\n let newValues = [\n {stop: 0, value: MAX},\n {stop, value: lightness},\n {stop: 1000, value: MIN},\n ];\n let stopIndex = stops.indexOf(stop);\n let firstHalf = stops.slice(0, stopIndex + 1);\n let secondHalf = stops.slice(stopIndex);\n\n for (let stopValue of firstHalf) {\n if (stopValue !== 0 && stopValue !== stop) {\n let percentage = (stopValue - 0) / (stop - 0);\n let value = MAX - percentage * (MAX - lightness);\n\n newValues.push({stop: stopValue, value: Math.round(value)});\n }\n }\n\n for (let stopValue of secondHalf) {\n if (stopValue !== 1000 && stopValue !== stop) {\n let percentage = (stopValue - stop) / (1000 - stop);\n let value = lightness - percentage * (lightness - MIN);\n\n newValues.push({stop: stopValue, value: Math.round(value)});\n }\n }\n\n newValues.sort((a, b) => a.stop - b.stop);\n\n return newValues;\n}\n"],
4
+ "sourcesContent": ["import {DEFAULT_STOP, DEFAULT_STOPS} from './constants.js';\n\nconst MIN = 0;\nconst MAX = 100;\n\nexport function createDistributionValues(lightness: number, stop: number = DEFAULT_STOP) {\n let stops: number[] = [...DEFAULT_STOPS].sort();\n let newValues = [\n {stop: 0, value: MAX},\n {stop, value: lightness},\n {stop: 1000, value: MIN},\n ];\n let stopIndex = stops.indexOf(stop);\n let firstHalf = stops.slice(0, stopIndex + 1);\n let secondHalf = stops.slice(stopIndex);\n\n for (let stopValue of firstHalf) {\n if (stopValue !== 0 && stopValue !== stop) {\n let percentage = (stopValue - 0) / (stop - 0);\n let value = MAX - percentage * (MAX - lightness);\n\n newValues.push({stop: stopValue, value: Math.round(value)});\n }\n }\n\n for (let stopValue of secondHalf) {\n if (stopValue !== 1000 && stopValue !== stop) {\n let percentage = (stopValue - stop) / (1000 - stop);\n let value = lightness - percentage * (lightness - MIN);\n\n newValues.push({stop: stopValue, value: Math.round(value)});\n }\n }\n\n newValues.sort((a, b) => a.stop - b.stop);\n\n return newValues;\n}\n"],
5
5
  "mappings": ";AAAA,SAAQ,cAAc,qBAAoB;AAE1C,MAAM,MAAM;AACZ,MAAM,MAAM;AAEL,gBAAS,yBAAyB,WAAmB,OAAe,cAAc;AACvF,MAAI,QAAkB,CAAC,GAAG,aAAa,EAAE,KAAK;AAC9C,MAAI,YAAY;AAAA,IACd,EAAC,MAAM,GAAG,OAAO,IAAG;AAAA,IACpB,EAAC,MAAM,OAAO,UAAS;AAAA,IACvB,EAAC,MAAM,KAAM,OAAO,IAAG;AAAA,EACzB;AACA,MAAI,YAAY,MAAM,QAAQ,IAAI;AAClC,MAAI,YAAY,MAAM,MAAM,GAAG,YAAY,CAAC;AAC5C,MAAI,aAAa,MAAM,MAAM,SAAS;AAEtC,WAAS,aAAa,WAAW;AAC/B,QAAI,cAAc,KAAK,cAAc,MAAM;AACzC,UAAI,cAAc,YAAY,MAAM,OAAO;AAC3C,UAAI,QAAQ,MAAM,cAAc,MAAM;AAEtC,gBAAU,KAAK,EAAC,MAAM,WAAW,OAAO,KAAK,MAAM,KAAK,EAAC,CAAC;AAAA,IAC5D;AAAA,EACF;AAEA,WAAS,aAAa,YAAY;AAChC,QAAI,cAAc,OAAQ,cAAc,MAAM;AAC5C,UAAI,cAAc,YAAY,SAAS,MAAO;AAC9C,UAAI,QAAQ,YAAY,cAAc,YAAY;AAElD,gBAAU,KAAK,EAAC,MAAM,WAAW,OAAO,KAAK,MAAM,KAAK,EAAC,CAAC;AAAA,IAC5D;AAAA,EACF;AAEA,YAAU,KAAK,CAAC,GAAG,MAAM,EAAE,OAAO,EAAE,IAAI;AAExC,SAAO;AACT;",
6
6
  "names": []
7
7
  }
@@ -3,4 +3,4 @@ import { type Theme } from './Theme.js';
3
3
  export type ThemeProviderProps = {
4
4
  theme: Theme;
5
5
  };
6
- export declare function ThemeProvider({ children, theme }: PropsWithChildren<ThemeProviderProps>): import("react/jsx-runtime").JSX.Element;
6
+ export declare function ThemeProvider({ children, theme }: PropsWithChildren<ThemeProviderProps>): import("react").JSX.Element;
@@ -15,11 +15,7 @@ export function createComponentTheme(themeName, themeDefinition) {
15
15
  }
16
16
  let hasElements = Boolean(themeDefinition?.elements);
17
17
  if (!hasElements) {
18
- return createUseComponentThemeReturn(
19
- componentTheme,
20
- cx,
21
- themeProps
22
- );
18
+ return createUseComponentThemeReturn(componentTheme, cx, themeProps);
23
19
  }
24
20
  let getClassNames = {};
25
21
  for (let element of themeDefinition?.elements ?? []) {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../source/theme/internals/createComponentTheme.ts"],
4
- "sourcesContent": ["import {useContext} from 'react';\n\nimport {type Theme} from '../Theme.js';\nimport {type ClassName} from './ClassName.js';\nimport {type ComponentTheme} from './ComponentTheme.js';\nimport {type ComponentThemeDefinition} from './ComponentThemeDefinition.js';\nimport {type ComponentThemeDefinitionElements} from './ComponentThemeDefinitionElements.js';\nimport {type ComponentThemeDefinitionVariants} from './ComponentThemeDefinitionVariants.js';\nimport {type ComponentThemeProps} from './ComponentThemeProps.js';\nimport {createUseComponentThemeReturn} from './createUseComponentThemeReturn.js';\nimport {themeContext} from './themeContext.js';\nimport {type UseComponentTheme} from './UseComponentTheme.js';\n\nexport function createComponentTheme<\n const N extends string,\n const D extends ComponentThemeDefinition | undefined = undefined,\n>(themeName: N, themeDefinition?: NonNullable<D>): UseComponentTheme<N, D> {\n let useComponentTheme = (themeProps?: ComponentThemeProps<D>) => {\n let theme = useContext(themeContext);\n\n if (!theme) {\n throw new Error('No theme was found!');\n }\n\n let cx = theme.merge;\n let componentTheme = theme[themeName as keyof Theme] as unknown as\n | ComponentTheme<{\n variants: ComponentThemeDefinitionVariants;\n elements: ComponentThemeDefinitionElements;\n }>\n | ComponentTheme<{variants: ComponentThemeDefinitionVariants}>\n | undefined;\n\n if (!componentTheme) {\n throw new Error(`Theme for component \"${themeName}\" wasn't found!`);\n }\n\n let hasElements = Boolean(themeDefinition?.elements);\n\n if (!hasElements) {\n return createUseComponentThemeReturn(\n componentTheme as\n | ComponentTheme<{variants: ComponentThemeDefinitionVariants}>\n | ComponentTheme<undefined>,\n cx,\n themeProps,\n );\n }\n\n let getClassNames: Record<string, (...args: ClassName[]) => string> = {};\n\n for (let element of themeDefinition?.elements ?? []) {\n getClassNames[element] = createUseComponentThemeReturn(\n componentTheme as\n | ComponentTheme<{variants: ComponentThemeDefinitionVariants}>\n | ComponentTheme<undefined>,\n cx,\n themeProps,\n element,\n );\n }\n\n return getClassNames;\n };\n\n (useComponentTheme as UseComponentTheme<N, D>).themeDefinition = themeDefinition;\n (useComponentTheme as UseComponentTheme<N, D>).componentThemeName = themeName;\n\n return useComponentTheme as UseComponentTheme<N, D>;\n}\n"],
5
- "mappings": ";AAAA,SAAQ,kBAAiB;AASzB,SAAQ,qCAAoC;AAC5C,SAAQ,oBAAmB;AAGpB,gBAAS,qBAGd,WAAc,iBAA2D;AACzE,MAAI,oBAAoB,CAAC,eAAwC;AAC/D,QAAI,QAAQ,WAAW,YAAY;AAEnC,QAAI,CAAC,OAAO;AACV,YAAM,IAAI,MAAM,qBAAqB;AAAA,IACvC;AAEA,QAAI,KAAK,MAAM;AACf,QAAI,iBAAiB,MAAM,SAAwB;AAQnD,QAAI,CAAC,gBAAgB;AACnB,YAAM,IAAI,MAAM,wBAAwB,SAAS,iBAAiB;AAAA,IACpE;AAEA,QAAI,cAAc,QAAQ,iBAAiB,QAAQ;AAEnD,QAAI,CAAC,aAAa;AAChB,aAAO;AAAA,QACL;AAAA,QAGA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAEA,QAAI,gBAAkE,CAAC;AAEvE,aAAS,WAAW,iBAAiB,YAAY,CAAC,GAAG;AACnD,oBAAc,OAAO,IAAI;AAAA,QACvB;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAEA,EAAC,kBAA8C,kBAAkB;AACjE,EAAC,kBAA8C,qBAAqB;AAEpE,SAAO;AACT;",
4
+ "sourcesContent": ["import {useContext} from 'react';\n\nimport {type Theme} from '../Theme.js';\nimport {type ClassName} from './ClassName.js';\nimport {type ComponentTheme} from './ComponentTheme.js';\nimport {type ComponentThemeDefinition} from './ComponentThemeDefinition.js';\nimport {type ComponentThemeDefinitionElements} from './ComponentThemeDefinitionElements.js';\nimport {type ComponentThemeDefinitionVariants} from './ComponentThemeDefinitionVariants.js';\nimport {type ComponentThemeProps} from './ComponentThemeProps.js';\nimport {createUseComponentThemeReturn} from './createUseComponentThemeReturn.js';\nimport {themeContext} from './themeContext.js';\nimport {type UseComponentTheme} from './UseComponentTheme.js';\n\nexport function createComponentTheme<\n const N extends string,\n const D extends ComponentThemeDefinition | undefined = undefined,\n>(themeName: N, themeDefinition?: NonNullable<D>): UseComponentTheme<N, D> {\n let useComponentTheme = (themeProps?: ComponentThemeProps<D>) => {\n let theme = useContext(themeContext);\n\n if (!theme) {\n throw new Error('No theme was found!');\n }\n\n let cx = theme.merge;\n let componentTheme = theme[themeName as keyof Theme] as unknown as\n | ComponentTheme<{\n variants: ComponentThemeDefinitionVariants;\n elements: ComponentThemeDefinitionElements;\n }>\n | ComponentTheme<{variants: ComponentThemeDefinitionVariants}>\n | undefined;\n\n if (!componentTheme) {\n throw new Error(`Theme for component \"${themeName}\" wasn't found!`);\n }\n\n let hasElements = Boolean(themeDefinition?.elements);\n\n if (!hasElements) {\n return createUseComponentThemeReturn(componentTheme, cx, themeProps);\n }\n\n let getClassNames: Record<string, (...args: ClassName[]) => string> = {};\n\n for (let element of themeDefinition?.elements ?? []) {\n getClassNames[element] = createUseComponentThemeReturn(\n componentTheme,\n cx,\n themeProps,\n element,\n );\n }\n\n return getClassNames;\n };\n\n (useComponentTheme as UseComponentTheme<N, D>).themeDefinition = themeDefinition;\n (useComponentTheme as UseComponentTheme<N, D>).componentThemeName = themeName;\n\n return useComponentTheme as UseComponentTheme<N, D>;\n}\n"],
5
+ "mappings": ";AAAA,SAAQ,kBAAiB;AASzB,SAAQ,qCAAoC;AAC5C,SAAQ,oBAAmB;AAGpB,gBAAS,qBAGd,WAAc,iBAA2D;AACzE,MAAI,oBAAoB,CAAC,eAAwC;AAC/D,QAAI,QAAQ,WAAW,YAAY;AAEnC,QAAI,CAAC,OAAO;AACV,YAAM,IAAI,MAAM,qBAAqB;AAAA,IACvC;AAEA,QAAI,KAAK,MAAM;AACf,QAAI,iBAAiB,MAAM,SAAwB;AAQnD,QAAI,CAAC,gBAAgB;AACnB,YAAM,IAAI,MAAM,wBAAwB,SAAS,iBAAiB;AAAA,IACpE;AAEA,QAAI,cAAc,QAAQ,iBAAiB,QAAQ;AAEnD,QAAI,CAAC,aAAa;AAChB,aAAO,8BAA8B,gBAAgB,IAAI,UAAU;AAAA,IACrE;AAEA,QAAI,gBAAkE,CAAC;AAEvE,aAAS,WAAW,iBAAiB,YAAY,CAAC,GAAG;AACnD,oBAAc,OAAO,IAAI;AAAA,QACvB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAEA,EAAC,kBAA8C,kBAAkB;AACjE,EAAC,kBAA8C,qBAAqB;AAEpE,SAAO;AACT;",
6
6
  "names": []
7
7
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../source/theme/internals/createUseComponentThemeReturn.ts"],
4
- "sourcesContent": ["/* eslint-disable unicorn/consistent-destructuring -- destructuring leads to messy code because of complicated types */\nimport {booleanToString} from './booleanToString.js';\nimport {type ClassName} from './ClassName.js';\nimport {type ComponentTheme} from './ComponentTheme.js';\nimport {type ComponentThemeDefinitionElements} from './ComponentThemeDefinitionElements.js';\nimport {type ComponentThemeDefinitionVariants} from './ComponentThemeDefinitionVariants.js';\nimport {type ComponentThemeProps} from './ComponentThemeProps.js';\nimport {pickPropertyIfExists} from './pickPropertyIfExists.js';\n\nexport function createUseComponentThemeReturn(\n componentTheme:\n | ComponentTheme<{elements: ComponentThemeDefinitionElements}>\n | ComponentTheme<{\n variants: ComponentThemeDefinitionVariants;\n elements: ComponentThemeDefinitionElements;\n }>\n | ComponentTheme<{variants: ComponentThemeDefinitionVariants}>\n | ComponentTheme<undefined>,\n cx: (...inputs: ClassName[]) => string,\n themeProps?:\n | ComponentThemeProps<{variants: ComponentThemeDefinitionVariants}>\n | ComponentThemeProps<undefined>,\n elementName?: string,\n) {\n if (!themeProps || !('variants' in componentTheme)) {\n return (baseClassName: ClassName, overrideClassName: ClassName) =>\n cx(\n baseClassName,\n 'classNames' in componentTheme ?\n pickPropertyIfExists(componentTheme.classNames, elementName)\n : 'className' in componentTheme ? componentTheme.className\n : undefined,\n overrideClassName,\n );\n }\n\n let {variants, compoundVariants} = componentTheme;\n let getVariantClassNames = Object.keys(variants).map((variant) => {\n let variantProp = themeProps[variant as keyof typeof themeProps] as boolean | string;\n let variantKey = booleanToString(variantProp);\n\n return pickPropertyIfExists(variants[variant]?.[variantKey as 'false' | 'true'], elementName);\n });\n let getCompoundVariantClassNames: ClassName[] = [];\n\n if (compoundVariants) {\n for (let compoundVariant of compoundVariants) {\n let {className, classNames, ...rest} = compoundVariant;\n let matchesAllSelectors = true;\n\n for (let [cvKey, cvSelector] of Object.entries(rest)) {\n let selector = themeProps[cvKey as keyof typeof themeProps];\n\n if (Array.isArray(cvSelector)) {\n if (!cvSelector.includes(selector as string)) {\n matchesAllSelectors = false;\n\n break;\n }\n } else if (selector !== cvSelector) {\n matchesAllSelectors = false;\n\n break;\n }\n }\n\n if (matchesAllSelectors) {\n getCompoundVariantClassNames.push(\n ('classNames' in compoundVariant ?\n pickPropertyIfExists(classNames as Record<string, ClassName>, elementName)\n : className) as ClassName,\n );\n }\n }\n }\n\n return (baseClassName: ClassName, overrideClassName: ClassName) =>\n cx(\n baseClassName,\n 'classNames' in componentTheme ? pickPropertyIfExists(componentTheme.classNames, elementName)\n : 'className' in componentTheme ? componentTheme.className\n : undefined,\n getVariantClassNames,\n getCompoundVariantClassNames,\n overrideClassName,\n );\n}\n"],
5
- "mappings": ";AACA,SAAQ,uBAAsB;AAM9B,SAAQ,4BAA2B;AAE5B,gBAAS,8BACd,gBAQA,IACA,YAGA,aACA;AACA,MAAI,CAAC,cAAc,EAAE,cAAc,iBAAiB;AAClD,WAAO,CAAC,eAA0B,sBAChC;AAAA,MACE;AAAA,MACA,gBAAgB,iBACd,qBAAqB,eAAe,YAAY,WAAW,IAC3D,eAAe,iBAAiB,eAAe,YAC/C;AAAA,MACF;AAAA,IACF;AAAA,EACJ;AAEA,MAAI,EAAC,UAAU,iBAAgB,IAAI;AACnC,MAAI,uBAAuB,OAAO,KAAK,QAAQ,EAAE,IAAI,CAAC,YAAY;AAChE,QAAI,cAAc,WAAW,OAAkC;AAC/D,QAAI,aAAa,gBAAgB,WAAW;AAE5C,WAAO,qBAAqB,SAAS,OAAO,IAAI,UAA8B,GAAG,WAAW;AAAA,EAC9F,CAAC;AACD,MAAI,+BAA4C,CAAC;AAEjD,MAAI,kBAAkB;AACpB,aAAS,mBAAmB,kBAAkB;AAC5C,UAAI,EAAC,WAAW,YAAY,GAAG,KAAI,IAAI;AACvC,UAAI,sBAAsB;AAE1B,eAAS,CAAC,OAAO,UAAU,KAAK,OAAO,QAAQ,IAAI,GAAG;AACpD,YAAI,WAAW,WAAW,KAAgC;AAE1D,YAAI,MAAM,QAAQ,UAAU,GAAG;AAC7B,cAAI,CAAC,WAAW,SAAS,QAAkB,GAAG;AAC5C,kCAAsB;AAEtB;AAAA,UACF;AAAA,QACF,WAAW,aAAa,YAAY;AAClC,gCAAsB;AAEtB;AAAA,QACF;AAAA,MACF;AAEA,UAAI,qBAAqB;AACvB,qCAA6B;AAAA,UAC1B,gBAAgB,kBACf,qBAAqB,YAAyC,WAAW,IACzE;AAAA,QACJ;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO,CAAC,eAA0B,sBAChC;AAAA,IACE;AAAA,IACA,gBAAgB,iBAAiB,qBAAqB,eAAe,YAAY,WAAW,IAC1F,eAAe,iBAAiB,eAAe,YAC/C;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACJ;",
4
+ "sourcesContent": ["/* eslint-disable unicorn/consistent-destructuring -- destructuring leads to messy code because of complicated types */\nimport {booleanToString} from './booleanToString.js';\nimport {type ClassName} from './ClassName.js';\nimport {type ComponentTheme} from './ComponentTheme.js';\nimport {type ComponentThemeDefinitionElements} from './ComponentThemeDefinitionElements.js';\nimport {type ComponentThemeDefinitionVariants} from './ComponentThemeDefinitionVariants.js';\nimport {type ComponentThemeProps} from './ComponentThemeProps.js';\nimport {pickPropertyIfExists} from './pickPropertyIfExists.js';\n\nexport function createUseComponentThemeReturn(\n componentTheme:\n | ComponentTheme<{elements: ComponentThemeDefinitionElements}>\n | ComponentTheme<{\n variants: ComponentThemeDefinitionVariants;\n elements: ComponentThemeDefinitionElements;\n }>\n | ComponentTheme<{variants: ComponentThemeDefinitionVariants}>\n | ComponentTheme<undefined>,\n cx: (...inputs: ClassName[]) => string,\n themeProps?:\n | ComponentThemeProps<{variants: ComponentThemeDefinitionVariants}>\n | ComponentThemeProps<undefined>,\n elementName?: string,\n) {\n if (!themeProps || !('variants' in componentTheme)) {\n return (baseClassName: ClassName, overrideClassName: ClassName) =>\n cx(\n baseClassName,\n 'classNames' in componentTheme ?\n pickPropertyIfExists(componentTheme.classNames, elementName)\n : 'className' in componentTheme ? componentTheme.className\n : undefined,\n overrideClassName,\n );\n }\n\n let {variants, compoundVariants} = componentTheme;\n let getVariantClassNames = Object.keys(variants).map((variant) => {\n let variantProp = themeProps[variant as keyof typeof themeProps] as boolean | string;\n let variantKey = booleanToString(variantProp);\n\n return pickPropertyIfExists(variants[variant]?.[variantKey as 'false' | 'true'], elementName);\n });\n let getCompoundVariantClassNames: ClassName[] = [];\n\n if (compoundVariants) {\n for (let compoundVariant of compoundVariants) {\n let {className, classNames, ...rest} = compoundVariant;\n let matchesAllSelectors = true;\n\n for (let [cvKey, cvSelector] of Object.entries(rest)) {\n let selector = themeProps[cvKey as keyof typeof themeProps];\n\n if (Array.isArray(cvSelector)) {\n if (!cvSelector.includes(selector)) {\n matchesAllSelectors = false;\n\n break;\n }\n } else if (selector !== cvSelector) {\n matchesAllSelectors = false;\n\n break;\n }\n }\n\n if (matchesAllSelectors) {\n getCompoundVariantClassNames.push(\n ('classNames' in compoundVariant ?\n pickPropertyIfExists(classNames as Record<string, ClassName>, elementName)\n : className) as ClassName,\n );\n }\n }\n }\n\n return (baseClassName: ClassName, overrideClassName: ClassName) =>\n cx(\n baseClassName,\n 'classNames' in componentTheme ? pickPropertyIfExists(componentTheme.classNames, elementName)\n : 'className' in componentTheme ? componentTheme.className\n : undefined,\n getVariantClassNames,\n getCompoundVariantClassNames,\n overrideClassName,\n );\n}\n"],
5
+ "mappings": ";AACA,SAAQ,uBAAsB;AAM9B,SAAQ,4BAA2B;AAE5B,gBAAS,8BACd,gBAQA,IACA,YAGA,aACA;AACA,MAAI,CAAC,cAAc,EAAE,cAAc,iBAAiB;AAClD,WAAO,CAAC,eAA0B,sBAChC;AAAA,MACE;AAAA,MACA,gBAAgB,iBACd,qBAAqB,eAAe,YAAY,WAAW,IAC3D,eAAe,iBAAiB,eAAe,YAC/C;AAAA,MACF;AAAA,IACF;AAAA,EACJ;AAEA,MAAI,EAAC,UAAU,iBAAgB,IAAI;AACnC,MAAI,uBAAuB,OAAO,KAAK,QAAQ,EAAE,IAAI,CAAC,YAAY;AAChE,QAAI,cAAc,WAAW,OAAkC;AAC/D,QAAI,aAAa,gBAAgB,WAAW;AAE5C,WAAO,qBAAqB,SAAS,OAAO,IAAI,UAA8B,GAAG,WAAW;AAAA,EAC9F,CAAC;AACD,MAAI,+BAA4C,CAAC;AAEjD,MAAI,kBAAkB;AACpB,aAAS,mBAAmB,kBAAkB;AAC5C,UAAI,EAAC,WAAW,YAAY,GAAG,KAAI,IAAI;AACvC,UAAI,sBAAsB;AAE1B,eAAS,CAAC,OAAO,UAAU,KAAK,OAAO,QAAQ,IAAI,GAAG;AACpD,YAAI,WAAW,WAAW,KAAgC;AAE1D,YAAI,MAAM,QAAQ,UAAU,GAAG;AAC7B,cAAI,CAAC,WAAW,SAAS,QAAQ,GAAG;AAClC,kCAAsB;AAEtB;AAAA,UACF;AAAA,QACF,WAAW,aAAa,YAAY;AAClC,gCAAsB;AAEtB;AAAA,QACF;AAAA,MACF;AAEA,UAAI,qBAAqB;AACvB,qCAA6B;AAAA,UAC1B,gBAAgB,kBACf,qBAAqB,YAAyC,WAAW,IACzE;AAAA,QACJ;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO,CAAC,eAA0B,sBAChC;AAAA,IACE;AAAA,IACA,gBAAgB,iBAAiB,qBAAqB,eAAe,YAAY,WAAW,IAC1F,eAAe,iBAAiB,eAAe,YAC/C;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACJ;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jakubmazanec/ui",
3
- "version": "0.5.3",
3
+ "version": "0.5.4-next.69e53e65",
4
4
  "description": "React component library.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -39,44 +39,44 @@
39
39
  "@dnd-kit/modifiers": "^9.0.0",
40
40
  "@dnd-kit/sortable": "^10.0.0",
41
41
  "@dnd-kit/utilities": "^3.2.2",
42
- "@headlessui/react": "^2.2.9",
42
+ "@headlessui/react": "^2.2.10",
43
43
  "@heroicons/react": "^2.2.0",
44
- "@jakubmazanec/ts-utils": "^3.0.1",
44
+ "@jakubmazanec/ts-utils": "3.0.19-next.69e53e65",
45
45
  "@tanstack/match-sorter-utils": "^8.19.4",
46
46
  "@tanstack/react-table": "^8.21.3",
47
47
  "culori": "^4.0.2",
48
48
  "lodash": "^4.17.21",
49
- "tailwind-merge": "^3.4.0",
49
+ "tailwind-merge": "^3.6.0",
50
50
  "zod": "^4.1.13"
51
51
  },
52
52
  "devDependencies": {
53
- "@chromatic-com/storybook": "^4.1.3",
54
- "@jakubmazanec/eslint-config": "^4.1.0",
55
- "@storybook/addon-docs": "^10.1.1",
56
- "@storybook/addon-links": "^10.1.1",
57
- "@storybook/react-vite": "^10.1.1",
58
- "@tailwindcss/vite": "^4.1.17",
53
+ "@chromatic-com/storybook": "^5.2.1",
54
+ "@jakubmazanec/eslint-config": "5.0.0-next.69e53e65",
55
+ "@storybook/addon-docs": "^10.5.2",
56
+ "@storybook/addon-links": "^10.5.2",
57
+ "@storybook/react-vite": "^10.5.2",
58
+ "@tailwindcss/vite": "^4.3.3",
59
59
  "@testing-library/jest-dom": "^6.9.1",
60
60
  "@testing-library/react": "^16.3.0",
61
61
  "@types/culori": "^4.0.1",
62
62
  "@types/lodash": "^4.17.21",
63
63
  "@types/node": "^24.0.4",
64
- "@types/react": "^19.2.7",
64
+ "@types/react": "^19.2.17",
65
65
  "@types/react-dom": "^19.2.3",
66
66
  "@vitest/coverage-v8": "^4.0.14",
67
- "chromatic": "^13.3.4",
67
+ "chromatic": "^18.0.1",
68
68
  "concurrently": "^9.2.1",
69
69
  "del-cli": "^7.0.0",
70
70
  "esbuild": "^0.27.0",
71
- "eslint": "^9.33.0",
71
+ "eslint": "^9.39.4",
72
72
  "happy-dom": "^20.0.11",
73
73
  "prettier": "^3.7.3",
74
74
  "prettier-plugin-packagejson": "^2.5.20",
75
75
  "prettier-plugin-tailwindcss": "^0.7.1",
76
- "react": "^19.2.0",
77
- "react-dom": "^19.2.0",
78
- "storybook": "^10.1.1",
79
- "tailwindcss": "^4.1.17",
76
+ "react": "^19.2.7",
77
+ "react-dom": "^19.2.7",
78
+ "storybook": "^10.5.2",
79
+ "tailwindcss": "^4.3.3",
80
80
  "tsx": "^4.20.6",
81
81
  "typedoc": "^0.28.15",
82
82
  "typedoc-plugin-markdown": "^4.9.0",
@@ -5,11 +5,11 @@ import {
5
5
  type ListboxProps as HeadlessListboxProps,
6
6
  } from '@headlessui/react';
7
7
  import {
8
- type ChangeEvent,
9
8
  Children,
10
9
  type ComponentPropsWithoutRef,
11
10
  type ElementType,
12
11
  Fragment,
12
+ type InputEvent,
13
13
  type KeyboardEvent,
14
14
  type PropsWithChildren,
15
15
  type ReactNode,
@@ -134,8 +134,8 @@ export function Listbox<
134
134
  [showFilter],
135
135
  );
136
136
 
137
- let handleQueryChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
138
- setQuery(event.target.value);
137
+ let handleQueryChange = useCallback((event: InputEvent<HTMLInputElement>) => {
138
+ setQuery(event.currentTarget.value);
139
139
  }, []);
140
140
 
141
141
  if (items && children) {
@@ -327,7 +327,7 @@ export function DataTable<D extends RowData, C extends Array<ColumnDef<D, any>>>
327
327
  onFiltering={onFiltersChange}
328
328
  />
329
329
  )}
330
- <div className="w-full overflow-x-scroll overflow-y-visible [scrollbar-width:thin]">
330
+ <div className="w-full [scrollbar-width:thin] overflow-x-scroll overflow-y-visible">
331
331
  <Table
332
332
  style={{
333
333
  width: table.getCenterTotalSize(),
@@ -4,7 +4,7 @@ const MIN = 0;
4
4
  const MAX = 100;
5
5
 
6
6
  export function createDistributionValues(lightness: number, stop: number = DEFAULT_STOP) {
7
- let stops: number[] = [...DEFAULT_STOPS].sort() as unknown as number[];
7
+ let stops: number[] = [...DEFAULT_STOPS].sort();
8
8
  let newValues = [
9
9
  {stop: 0, value: MAX},
10
10
  {stop, value: lightness},
@@ -38,22 +38,14 @@ export function createComponentTheme<
38
38
  let hasElements = Boolean(themeDefinition?.elements);
39
39
 
40
40
  if (!hasElements) {
41
- return createUseComponentThemeReturn(
42
- componentTheme as
43
- | ComponentTheme<{variants: ComponentThemeDefinitionVariants}>
44
- | ComponentTheme<undefined>,
45
- cx,
46
- themeProps,
47
- );
41
+ return createUseComponentThemeReturn(componentTheme, cx, themeProps);
48
42
  }
49
43
 
50
44
  let getClassNames: Record<string, (...args: ClassName[]) => string> = {};
51
45
 
52
46
  for (let element of themeDefinition?.elements ?? []) {
53
47
  getClassNames[element] = createUseComponentThemeReturn(
54
- componentTheme as
55
- | ComponentTheme<{variants: ComponentThemeDefinitionVariants}>
56
- | ComponentTheme<undefined>,
48
+ componentTheme,
57
49
  cx,
58
50
  themeProps,
59
51
  element,
@@ -52,7 +52,7 @@ export function createUseComponentThemeReturn(
52
52
  let selector = themeProps[cvKey as keyof typeof themeProps];
53
53
 
54
54
  if (Array.isArray(cvSelector)) {
55
- if (!cvSelector.includes(selector as string)) {
55
+ if (!cvSelector.includes(selector)) {
56
56
  matchesAllSelectors = false;
57
57
 
58
58
  break;