@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.
- package/build/components/Button.d.ts +1 -1
- package/build/components/Checkbox.d.ts +1 -1
- package/build/components/CheckboxField.d.ts +1 -1
- package/build/components/Combobox.d.ts +1 -1
- package/build/components/ComboboxOption.d.ts +1 -1
- package/build/components/Description.d.ts +1 -1
- package/build/components/Dialog.d.ts +1 -1
- package/build/components/DialogPanel.d.ts +1 -1
- package/build/components/DialogTitle.d.ts +1 -1
- package/build/components/Field.d.ts +1 -1
- package/build/components/Fieldset.d.ts +1 -1
- package/build/components/Form.d.ts +1 -1
- package/build/components/Input.d.ts +1 -1
- package/build/components/Label.d.ts +1 -1
- package/build/components/Legend.d.ts +1 -1
- package/build/components/Listbox.d.ts +1 -1
- package/build/components/Listbox.js +1 -1
- package/build/components/Listbox.js.map +2 -2
- package/build/components/ListboxOption.d.ts +1 -1
- package/build/components/Menu.d.ts +1 -1
- package/build/components/MenuButton.d.ts +1 -1
- package/build/components/MenuHeading.d.ts +1 -1
- package/build/components/MenuItem.d.ts +1 -1
- package/build/components/MenuItems.d.ts +1 -1
- package/build/components/MenuSection.d.ts +1 -1
- package/build/components/MenuSeparator.d.ts +1 -1
- package/build/components/Popover.d.ts +1 -1
- package/build/components/PopoverBackdrop.d.ts +1 -1
- package/build/components/PopoverButton.d.ts +1 -1
- package/build/components/PopoverGroup.d.ts +1 -1
- package/build/components/PopoverPanel.d.ts +1 -1
- package/build/components/Radio.d.ts +1 -1
- package/build/components/RadioField.d.ts +1 -1
- package/build/components/RadioGroup.d.ts +1 -1
- package/build/components/Spinner.d.ts +1 -1
- package/build/components/Textarea.d.ts +1 -1
- package/build/components/data-table/DataTable.d.ts +1 -1
- package/build/components/data-table/DataTable.js +1 -1
- package/build/components/data-table/DataTable.js.map +1 -1
- package/build/components/data-table/internals/DataTableFilter.d.ts +1 -1
- package/build/components/data-table/internals/DataTableFilters.d.ts +1 -1
- package/build/components/data-table/internals/DataTableHeader.d.ts +1 -1
- package/build/components/data-table/internals/DataTableHeaderColumnCheckbox.d.ts +1 -1
- package/build/components/data-table/internals/DataTableHeaderFilter.d.ts +1 -1
- package/build/components/data-table/internals/DataTableMenu.d.ts +1 -1
- package/build/components/data-table/internals/DataTablePageButton.d.ts +1 -1
- package/build/components/data-table/internals/DataTablePagination.d.ts +1 -1
- package/build/components/data-table/internals/DataTableRow.d.ts +1 -1
- package/build/components/data-table/internals/DataTableSearch.d.ts +1 -1
- package/build/components/data-table/internals/DataTableSetting.d.ts +1 -1
- package/build/components/data-table/internals/DataTableSettings.d.ts +1 -1
- package/build/development/internals/createDistributionValues.js.map +1 -1
- package/build/theme/ThemeProvider.d.ts +1 -1
- package/build/theme/internals/createComponentTheme.js +1 -5
- package/build/theme/internals/createComponentTheme.js.map +2 -2
- package/build/theme/internals/createUseComponentThemeReturn.js.map +2 -2
- package/package.json +17 -17
- package/source/components/Listbox.tsx +3 -3
- package/source/components/data-table/DataTable.tsx +1 -1
- package/source/development/internals/createDistributionValues.ts +1 -1
- package/source/theme/internals/createComponentTheme.ts +2 -10
- 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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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.
|
|
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": ";AAuNc,mBACE,KADF;AAvNd;AAAA,EACE,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,OAEb;AACP;AAAA,
|
|
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": ";AAuNc,mBACE,KADF;AAvNd;AAAA,EACE,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,OAEb;AACP;AAAA,EACE;AAAA,EAGA,YAAAA;AAAA,EAKA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EAGE;AAAA,OACK;AAEP,SAAQ,YAAW;AACnB,SAAQ,aAAY;AACpB,SAAQ,iBAAgB;AACxB,SAAQ,qBAAoB;AAC5B,SAAQ,gBAAe;AACvB,SAAQ,oBAAmB;AAEpB,aAAM,kBAAkB,qBAAqB,WAAW;AAAA,EAC7D,UAAU,EAAC,UAAU,CAAC,MAAM,KAAK,GAAG,SAAS,CAAC,MAAM,KAAK,EAAC;AAAA,EAC1D,UAAU,CAAC,QAAQ,SAAS,QAAQ,WAAW,QAAQ;AACzD,CAAC;AAED,MAAM,kBAAkBA;AAgDjB,gBAAS,QAGd;AAAA,EACA,WAAW;AAAA,EACX,UAAU;AAAA,EACV,KAAK;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,MAAI,QAAQ,gBAAgB,EAAC,UAAU,QAAO,CAAC;AAC/C,MAAI,SAAS,UAAU;AACvB,MAAI,QAAQ,SAAS;AACrB,MAAI,YAAY,aAAa;AAC7B,MAAI,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACnC,MAAI,WAAW,OAAyB,IAAI;AAE5C,MAAI,eAAe;AAAA,IACjB,CAAC,kBAAqB;AACpB,iBAAW,aAAwB;AAAA,IACrC;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAGA,MAAI,YAAY;AAAA,IACd,CAAC,UAAyB;AACxB,UAAI,CAAC,YAAY;AACf;AAAA,MACF;AAEA,UAAI,MAAM,QAAQ,SAAS,SAAS,kBAAkB,SAAS,SAAS;AACtE,cAAM,eAAe;AACrB,iBAAS,SAAS,MAAM;AAAA,MAC1B;AAAA,IACF;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,MAAI,oBAAoB,YAAY,CAAC,UAAwC;AAC3E,aAAS,MAAM,cAAc,KAAK;AAAA,EACpC,GAAG,CAAC,CAAC;AAEL,MAAI,SAAS,UAAU;AACrB,UAAM,IAAI,MAAM,yDAAyD;AAAA,EAC3E;AAEA,MAAI,gBACF,QACE,OAAO;AAAA,IAAO,CAAC,SACb,KAAK,MACF,YAAY,EACZ,WAAW,QAAQ,EAAE,EACrB,SAAS,MAAM,YAAY,EAAE,WAAW,QAAQ,EAAE,CAAC;AAAA,EACxD,IACA;AACJ,MAAI,mBACF,QACE,SAAS,QAAQ,QAAQ,EAAE,OAAO,CAAC,UAAU;AAC3C,QACE,OAAO,UAAU,YACjB,WAAW,SACX,OAAO,MAAM,UAAU,YACvB,OAAQ,MAAM,MAA0C,aAAa,YACpE,MAAM,MAA6B,SACjC,YAAY,EACZ,WAAW,QAAQ,EAAE,EACrB,SAAS,MAAM,YAAY,EAAE,WAAW,QAAQ,EAAE,CAAC,GACtD;AACA,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT,CAAC,IACD;AAGJ,MAAI,QAAwC;AAAA,IAC1C;AAAA,IACA;AAAA,IACA,MAAM,OAAO,QAAQ,aAAa;AAAA,IAClC,OAAO,SAAS;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,UAAU;AAAA,IACV,GAAG;AAAA,EACL;AAEA,SACE,qBAAC,mBAAiB,GAAG,OACnB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,MAAM,KAAK,YAAY,SAAS;AAAA,QAC3C,kBAAe;AAAA,QACf,iBAAe,WAAW,OAAO;AAAA,QAEhC,WAAC,EAAC,OAAO,cAAa,MAAM;AAC3B,cAAI,CAAC,SAAS,CAAC,UAAU;AACvB,gBAAIC;AAEJ,qBAAS,QAAQ,kBAAkB,CAAC,UAAU;AAC5C,kBAAI,CAAC,OAAO;AACV;AAAA,cACF;AAEA,kBACE,OAAO,UAAU,YACjB,WAAW,SACX,OAAO,MAAM,UAAU,YACtB,MAAM,MAAkC,UAAU,eACnD;AACA,gBAAAA,gBAAgB,MAAM,MAAkC;AAAA,cAC1D;AAAA,YACF,CAAC;AAED,mBACE,iCACE;AAAA,kCAAC,UAAK,WAAW,MAAM,MAAM,iDAAiD,GAC3E,UAAAA,iBAAgB,eAAe,MAClC;AAAA,cACA,oBAAC,UAAK,WAAW,MAAM,KAAK,UAAU,GACpC,8BAAC,QAAK,MAAK,iBAAgB,GAC7B;AAAA,eACF;AAAA,UAEJ,WAAW,CAAC,SAAS,UAAU;AAC7B,gBAAI,cAAc;AAClB,gBAAI,gBAA6B,CAAC;AAElC,qBAAS,QAAQ,kBAAkB,CAAC,UAAU;AAC5C,kBAAI,CAAC,OAAO;AACV;AAAA,cACF;AAEA,kBACE,OAAO,UAAU,YACjB,WAAW,SACX,OAAO,MAAM,UAAU,YACtB,cAA4B;AAAA,gBAC1B,MAAM,MAAkC;AAAA,cAC3C,GACA;AACA,8BAAc,KAAM,MAAM,MAAkC,QAAqB;AAAA,cACnF;AAAA,YACF,CAAC;AAED,gBAAI,gBAAgB,cAAc,SAAS,aAAa,OAAO;AAC7D,8BAAgB,cAAc,MAAM,GAAG,aAAa,KAAK;AACzD,4BAAc;AAAA,YAChB;AAEA,mBACE,iCACG;AAAA,4BAAc,SACb,cAAc,IAAI,CAACA,eAAc,UAC/B;AAAA,gBAAC;AAAA;AAAA,kBAGC,WAAW,MAAM,MAAM,iDAAiD;AAAA,kBAEvE,UAAAA;AAAA;AAAA,gBAHI;AAAA,cAIP,CACD,IACA,eAAe;AAAA,cACjB,cACC;AAAA,gBAAC;AAAA;AAAA,kBACC,iBAAa;AAAA,kBACb,WAAW,MAAM,MAAM,iDAAiD;AAAA,kBAEvE,wBAAc,WAAW;AAAA;AAAA,cAC5B,IACA;AAAA,cACF,oBAAC,UAAK,WAAW,MAAM,KAAK,UAAU,GACpC,8BAAC,QAAK,MAAK,iBAAgB,GAC7B;AAAA,eACF;AAAA,UAEJ,WAAW,SAAS,UAAU;AAC5B,gBAAI,cAAc;AAClB,gBAAI,gBACF,eAAe;AAAA,cAAO,CAAC,SACrB,QAAS,eAAyC,SAAS,KAAK,KAAK,CAAC;AAAA,YACxE,KAAK,CAAC;AAER,gBAAI,gBAAgB,cAAc,SAAS,aAAa,OAAO;AAC7D,8BAAgB,cAAc,MAAM,GAAG,aAAa,KAAK;AACzD,4BAAc;AAAA,YAChB;AAEA,mBACE,iCACG;AAAA,4BAAc,SACb,cAAc,IAAI,CAACA,eAAc,UAC/B;AAAA,gBAAC;AAAA;AAAA,kBAGC,WAAW,MAAM,MAAM,iDAAiD;AAAA,kBAEvE,UAAAA,cAAa;AAAA;AAAA,gBAHT;AAAA,cAIP,CACD,IACA,eAAe;AAAA,cACjB,cACC;AAAA,gBAAC;AAAA;AAAA,kBACC,iBAAa;AAAA,kBACb,WAAW,MAAM,MAAM,iDAAiD;AAAA,kBAEvE,wBAAc,WAAW;AAAA;AAAA,cAC5B,IACA;AAAA,cACF,oBAAC,UAAK,WAAW,MAAM,KAAK,UAAU,GACpC,8BAAC,QAAK,MAAK,iBAAgB,GAC7B;AAAA,eACF;AAAA,UAEJ;AAEA,cAAI,eAAe,eAAe,KAAK,CAAC,SAAS,KAAK,UAAU,aAAa;AAE7E,iBACE,iCACE;AAAA,gCAAC,UAAK,WAAW,MAAM,MAAM,iDAAiD,GAC3E,wBAAc,SAAS,eAAe,MACzC;AAAA,YACA,oBAAC,UAAK,WAAW,MAAM,KAAK,UAAU,GACpC,8BAAC,QAAK,MAAK,iBAAgB,GAC7B;AAAA,aACF;AAAA,QAEJ;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,QAAO;AAAA,QACP,WAAW,MAAM,QAAQ;AAAA,QACzB,WAAW;AAAA,QAEV;AAAA,uBACC,oBAAC,SAAI,WAAW,MAAM,OAAO,GAC3B,8BAAC,SAAM,KAAK,UAAU,iBAAe,MAAC,OAAO,OAAO,SAAS,mBAAmB,GAClF,IACA;AAAA,UACD,QACC,eAAe,IAAI,CAAC,SAClB,oBAAC,iBAA+B,OAAO,KAAK,OACzC,eAAK,SADY,KAAK,KAEzB,CACD,IACD;AAAA;AAAA;AAAA,IACJ;AAAA,KACF;AAEJ;AAEO,aAAM,eAAuD;AAAA,EAClE,YAAY;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,SACE;AAAA,IACF,QAAQ;AAAA,EACV;AAAA,EACA,UAAU;AAAA,IACR,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,EACF;AACF;",
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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()
|
|
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
|
|
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(
|
|
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
|
|
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
|
|
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,
|
|
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
|
+
"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.
|
|
42
|
+
"@headlessui/react": "^2.2.10",
|
|
43
43
|
"@heroicons/react": "^2.2.0",
|
|
44
|
-
"@jakubmazanec/ts-utils": "
|
|
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.
|
|
49
|
+
"tailwind-merge": "^3.6.0",
|
|
50
50
|
"zod": "^4.1.13"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
|
-
"@chromatic-com/storybook": "^
|
|
54
|
-
"@jakubmazanec/eslint-config": "
|
|
55
|
-
"@storybook/addon-docs": "^10.
|
|
56
|
-
"@storybook/addon-links": "^10.
|
|
57
|
-
"@storybook/react-vite": "^10.
|
|
58
|
-
"@tailwindcss/vite": "^4.
|
|
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.
|
|
64
|
+
"@types/react": "^19.2.17",
|
|
65
65
|
"@types/react-dom": "^19.2.3",
|
|
66
66
|
"@vitest/coverage-v8": "^4.0.14",
|
|
67
|
-
"chromatic": "^
|
|
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.
|
|
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.
|
|
77
|
-
"react-dom": "^19.2.
|
|
78
|
-
"storybook": "^10.
|
|
79
|
-
"tailwindcss": "^4.
|
|
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:
|
|
138
|
-
setQuery(event.
|
|
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
|
|
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()
|
|
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
|
|
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
|
|
55
|
+
if (!cvSelector.includes(selector)) {
|
|
56
56
|
matchesAllSelectors = false;
|
|
57
57
|
|
|
58
58
|
break;
|