@jakubmazanec/ui 0.2.0 → 0.2.1-unstable.2963d49b

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/build/components/Listbox.js +0 -1
  2. package/build/components/Listbox.js.map +2 -2
  3. package/build/components/data-table/DataTable.d.ts +1 -1
  4. package/build/components/data-table/DataTable.js +2 -2
  5. package/build/components/data-table/DataTable.js.map +2 -2
  6. package/package.json +20 -20
  7. package/source/components/Listbox.tsx +0 -2
  8. package/source/components/data-table/DataTable.tsx +62 -59
package/build/components/Listbox.js CHANGED
@@ -96,7 +96,6 @@ export function Listbox({
96
96
  onChange: handleChange,
97
97
  ...rest
98
98
  };
99
- console.log("Listbox...", props);
100
99
  return /* @__PURE__ */ jsxs(HeadlessListbox, { ...props, children: [
101
100
  /* @__PURE__ */ jsx(
102
101
  HeadlessListboxButton,
package/build/components/Listbox.js.map CHANGED
@@ -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 console.log('Listbox...', props);\n\n return (\n <HeadlessListbox {...props}>\n <HeadlessListboxButton\n className={theme.root('relative', className)}\n data-component=\"listbox\"\n data-multiple={multiple ? true : null}\n >\n {({value: selectedValue}) => {\n if (!items && !multiple) {\n let selectedItem: ReactNode;\n\n Children.forEach(filteredChildren, (child) => {\n if (!child) {\n return;\n }\n\n if (\n typeof child === 'object' &&\n 'props' in child &&\n typeof child.props === 'object' &&\n (child.props as Record<string, unknown>).value === selectedValue\n ) {\n selectedItem = (child.props as Record<string, unknown>).children as ReactNode;\n }\n });\n\n return (\n <>\n <span className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}>\n {selectedItem ?? placeholder ?? null}\n </span>\n <span className={theme.icon('absolute')}>\n <Icon name=\"ChevronUpDown\" />\n </span>\n </>\n );\n } else if (!items && multiple) {\n let itemsHidden = false;\n let selectedItems: ReactNode[] = [];\n\n Children.forEach(filteredChildren, (child) => {\n if (!child) {\n return;\n }\n\n if (\n typeof child === 'object' &&\n 'props' in child &&\n typeof child.props === 'object' &&\n (selectedValue as unknown[]).includes(\n (child.props as Record<string, unknown>).value,\n )\n ) {\n selectedItems.push((child.props as Record<string, unknown>).children as ReactNode);\n }\n });\n\n if (hideSelected && selectedItems.length > hideSelected.limit) {\n selectedItems = selectedItems.slice(0, hideSelected.limit);\n itemsHidden = true;\n }\n\n return (\n <>\n {selectedItems.length ?\n selectedItems.map((selectedItem, index) => (\n <span\n // eslint-disable-next-line react/no-array-index-key -- needed\n key={index}\n className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}\n >\n {selectedItem}\n </span>\n ))\n : (placeholder ?? null)}\n {itemsHidden ?\n <span\n data-ellipsis\n className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}\n >\n {hideSelected?.message ?? '\u2026'}\n </span>\n : null}\n <span className={theme.icon('absolute')}>\n <Icon name=\"ChevronUpDown\" />\n </span>\n </>\n );\n } else if (items && multiple) {\n let itemsHidden = false;\n let selectedItems =\n filteredItems?.filter((item) =>\n Boolean((selectedValue as unknown[] | undefined)?.includes(item.value)),\n ) ?? [];\n\n if (hideSelected && selectedItems.length > hideSelected.limit) {\n selectedItems = selectedItems.slice(0, hideSelected.limit);\n itemsHidden = true;\n }\n\n return (\n <>\n {selectedItems.length ?\n selectedItems.map((selectedItem, index) => (\n <span\n // eslint-disable-next-line react/no-array-index-key -- needed\n key={index}\n className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}\n >\n {selectedItem.label}\n </span>\n ))\n : (placeholder ?? null)}\n {itemsHidden ?\n <span\n data-ellipsis\n className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}\n >\n {hideSelected?.message ?? '\u2026'}\n </span>\n : null}\n <span className={theme.icon('absolute')}>\n <Icon name=\"ChevronUpDown\" />\n </span>\n </>\n );\n }\n\n let selectedItem = filteredItems?.find((item) => item.value === selectedValue);\n\n return (\n <>\n <span className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}>\n {selectedItem?.label ?? placeholder ?? null}\n </span>\n <span className={theme.icon('absolute')}>\n <Icon name=\"ChevronUpDown\" />\n </span>\n </>\n );\n }}\n </HeadlessListboxButton>\n <HeadlessListboxOptions\n anchor=\"bottom start\"\n className={theme.options()}\n onKeyDown={handleTab}\n >\n {showFilter ?\n <div className={theme.filter()}>\n <Input ref={inputRef} showClearButton value={query} onInput={handleQueryChange} />\n </div>\n : null}\n {items ?\n filteredItems?.map((item) => (\n <ListboxOption key={item.label} value={item.value}>\n {item.label}\n </ListboxOption>\n ))\n : filteredChildren}\n </HeadlessListboxOptions>\n </HeadlessListbox>\n );\n}\n\nexport const listboxTheme: ComponentTheme<typeof useListboxTheme> = {\n classNames: {\n root: 'flex w-full min-w-32 items-center rounded-2 border-2 border-neutral-100 hover:border-neutral-200 bg-white px-2.5 h-9 pr-9 gap-x-2 transition-colors shadow-inner font-sans text-sm',\n label: 'flex gap-x-2',\n icon: 'text-neutral-500 size-5 top-1.5 right-1.5 cursor-pointer',\n options:\n 'flex flex-col gap-y-1 shadow p-1 z-30 rounded-2 border-2 border-neutral-100 hover:border-neutral-200 bg-white text-left w-[var(--button-width)] [--anchor-gap:theme(spacing.1)] [--anchor-padding:theme(spacing.2)] [scrollbar-width:thin] empty:invisible transition-colors',\n filter: '[&>[data-component=input]]:rounded',\n },\n variants: {\n disabled: {\n true: {\n root: 'border-neutral-100 text-neutral-200 cursor-not-allowed',\n label: '',\n icon: 'text-neutral-200',\n options: 'border-neutral-100',\n filter: '',\n },\n false: {\n root: '',\n label: '',\n icon: '',\n options: '',\n filter: '',\n },\n },\n invalid: {\n true: {\n root: '',\n label: '',\n icon: '',\n options: '',\n filter: '',\n },\n false: {\n root: '',\n label: '',\n icon: '',\n options: '',\n filter: '',\n },\n },\n },\n};\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import {\n Listbox as HeadlessListbox,\n ListboxButton as HeadlessListboxButton,\n ListboxOptions as HeadlessListboxOptions,\n type ListboxProps as HeadlessListboxProps,\n} from '@headlessui/react';\nimport {\n type ChangeEvent,\n Children,\n type ComponentPropsWithoutRef,\n type ElementType,\n Fragment,\n type KeyboardEvent,\n type PropsWithChildren,\n type ReactNode,\n useCallback,\n useRef,\n useState,\n} from 'react';\n\nimport {\n type ComponentProps,\n type ComponentTheme,\n createComponentTheme,\n} from '../theme/internals.js';\nimport {type ComponentRef} from './ComponentRef.js';\nimport {Icon} from './Icon.js';\nimport {Input} from './Input.js';\nimport {useFormId} from './internals.js';\nimport {ListboxOption} from './ListboxOption.js';\nimport {useField} from './useField.js';\nimport {useFieldName} from './useFieldName.js';\n\nexport const useListboxTheme = createComponentTheme('Listbox', {\n variants: {disabled: [true, false], invalid: [true, false]},\n elements: ['root', 'label', 'icon', 'options', 'filter'],\n});\n\nconst LISTBOX_ELEMENT = Fragment;\n\nexport type ListboxItem<V> = {\n value: V;\n label: string;\n};\n\nexport type ListboxProps<\n T extends ElementType,\n V extends boolean | number | string,\n> = ComponentProps<typeof useListboxTheme> &\n ComponentPropsWithoutRef<T> &\n ComponentRef<T> &\n PropsWithChildren &\n (\n | {\n as?: T | undefined;\n value?: V[] | undefined;\n defaultValue?: V[] | undefined;\n multiple: true;\n hideSelected?:\n | {\n limit: number;\n message?: string | undefined;\n }\n | undefined;\n items?: Array<ListboxItem<V>> | undefined;\n placeholder?: string;\n name?: string | undefined;\n className?: string | undefined;\n showFilter?: boolean | undefined;\n onChange?: (selectedValue: V[]) => void;\n }\n | {\n as?: T | undefined;\n value?: V | undefined;\n defaultValue?: V | undefined;\n multiple?: false | undefined;\n hideSelected?: never; // must be here so the type of props is correct\n items?: Array<ListboxItem<V>> | undefined;\n placeholder?: string;\n name?: string | undefined;\n className?: string | undefined;\n showFilter?: boolean | undefined;\n onChange?: (selectedValue: V) => void;\n }\n );\n\nexport function Listbox<\n T extends ElementType = typeof LISTBOX_ELEMENT,\n V extends boolean | number | string = string,\n>({\n disabled = false,\n invalid = false,\n as = LISTBOX_ELEMENT as unknown as T,\n value,\n defaultValue,\n multiple,\n hideSelected,\n items,\n placeholder,\n name,\n className,\n showFilter,\n onChange,\n ref,\n children,\n ...rest\n}: ListboxProps<T, V>) {\n let theme = useListboxTheme({disabled, invalid});\n let formId = useFormId();\n let field = useField();\n let fieldName = useFieldName();\n let [query, setQuery] = useState('');\n let inputRef = useRef<HTMLInputElement>(null);\n\n let handleChange = useCallback(\n (selectedValue: V) => {\n onChange?.(selectedValue as V & V[]);\n },\n [onChange],\n );\n\n // hacky solution so the user is able to focus inout used for filtering\n let handleTab = useCallback(\n (event: KeyboardEvent) => {\n if (!showFilter) {\n return;\n }\n\n if (event.key === 'Tab' && document.activeElement !== inputRef.current) {\n event.preventDefault();\n inputRef.current?.focus();\n }\n },\n [showFilter],\n );\n\n let handleQueryChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n setQuery(event.target.value);\n }, []);\n\n if (items && children) {\n throw new Error('Combobox accepts only either `items` prop, or children!');\n }\n\n let filteredItems =\n query ?\n items?.filter((item) =>\n item.label\n .toLowerCase()\n .replaceAll(/\\s+/g, '')\n .includes(query.toLowerCase().replaceAll(/\\s+/g, '')),\n )\n : items;\n let filteredChildren =\n query ?\n Children.toArray(children).filter((child) => {\n if (\n typeof child === 'object' &&\n 'props' in child &&\n typeof child.props === 'object' &&\n typeof (child.props as {children?: unknown[] | string}).children === 'string' &&\n (child.props as {children: string}).children\n .toLowerCase()\n .replaceAll(/\\s+/g, '')\n .includes(query.toLowerCase().replaceAll(/\\s+/g, ''))\n ) {\n return true;\n }\n\n return false;\n })\n : children;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n let props: HeadlessListboxProps<any, any> = {\n as,\n ref,\n name: field?.name ?? fieldName ?? name,\n value: value ?? undefined,\n defaultValue,\n multiple,\n disabled,\n invalid,\n form: formId,\n onChange: handleChange,\n ...rest,\n };\n\n return (\n <HeadlessListbox {...props}>\n <HeadlessListboxButton\n className={theme.root('relative', className)}\n data-component=\"listbox\"\n data-multiple={multiple ? true : null}\n >\n {({value: selectedValue}) => {\n if (!items && !multiple) {\n let selectedItem: ReactNode;\n\n Children.forEach(filteredChildren, (child) => {\n if (!child) {\n return;\n }\n\n if (\n typeof child === 'object' &&\n 'props' in child &&\n typeof child.props === 'object' &&\n (child.props as Record<string, unknown>).value === selectedValue\n ) {\n selectedItem = (child.props as Record<string, unknown>).children as ReactNode;\n }\n });\n\n return (\n <>\n <span className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}>\n {selectedItem ?? placeholder ?? null}\n </span>\n <span className={theme.icon('absolute')}>\n <Icon name=\"ChevronUpDown\" />\n </span>\n </>\n );\n } else if (!items && multiple) {\n let itemsHidden = false;\n let selectedItems: ReactNode[] = [];\n\n Children.forEach(filteredChildren, (child) => {\n if (!child) {\n return;\n }\n\n if (\n typeof child === 'object' &&\n 'props' in child &&\n typeof child.props === 'object' &&\n (selectedValue as unknown[]).includes(\n (child.props as Record<string, unknown>).value,\n )\n ) {\n selectedItems.push((child.props as Record<string, unknown>).children as ReactNode);\n }\n });\n\n if (hideSelected && selectedItems.length > hideSelected.limit) {\n selectedItems = selectedItems.slice(0, hideSelected.limit);\n itemsHidden = true;\n }\n\n return (\n <>\n {selectedItems.length ?\n selectedItems.map((selectedItem, index) => (\n <span\n // eslint-disable-next-line react/no-array-index-key -- needed\n key={index}\n className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}\n >\n {selectedItem}\n </span>\n ))\n : (placeholder ?? null)}\n {itemsHidden ?\n <span\n data-ellipsis\n className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}\n >\n {hideSelected?.message ?? '\u2026'}\n </span>\n : null}\n <span className={theme.icon('absolute')}>\n <Icon name=\"ChevronUpDown\" />\n </span>\n </>\n );\n } else if (items && multiple) {\n let itemsHidden = false;\n let selectedItems =\n filteredItems?.filter((item) =>\n Boolean((selectedValue as unknown[] | undefined)?.includes(item.value)),\n ) ?? [];\n\n if (hideSelected && selectedItems.length > hideSelected.limit) {\n selectedItems = selectedItems.slice(0, hideSelected.limit);\n itemsHidden = true;\n }\n\n return (\n <>\n {selectedItems.length ?\n selectedItems.map((selectedItem, index) => (\n <span\n // eslint-disable-next-line react/no-array-index-key -- needed\n key={index}\n className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}\n >\n {selectedItem.label}\n </span>\n ))\n : (placeholder ?? null)}\n {itemsHidden ?\n <span\n data-ellipsis\n className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}\n >\n {hideSelected?.message ?? '\u2026'}\n </span>\n : null}\n <span className={theme.icon('absolute')}>\n <Icon name=\"ChevronUpDown\" />\n </span>\n </>\n );\n }\n\n let selectedItem = filteredItems?.find((item) => item.value === selectedValue);\n\n return (\n <>\n <span className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}>\n {selectedItem?.label ?? placeholder ?? null}\n </span>\n <span className={theme.icon('absolute')}>\n <Icon name=\"ChevronUpDown\" />\n </span>\n </>\n );\n }}\n </HeadlessListboxButton>\n <HeadlessListboxOptions\n anchor=\"bottom start\"\n className={theme.options()}\n onKeyDown={handleTab}\n >\n {showFilter ?\n <div className={theme.filter()}>\n <Input ref={inputRef} showClearButton value={query} onInput={handleQueryChange} />\n </div>\n : null}\n {items ?\n filteredItems?.map((item) => (\n <ListboxOption key={item.label} value={item.value}>\n {item.label}\n </ListboxOption>\n ))\n : filteredChildren}\n </HeadlessListboxOptions>\n </HeadlessListbox>\n );\n}\n\nexport const listboxTheme: ComponentTheme<typeof useListboxTheme> = {\n classNames: {\n root: 'flex w-full min-w-32 items-center rounded-2 border-2 border-neutral-100 hover:border-neutral-200 bg-white px-2.5 h-9 pr-9 gap-x-2 transition-colors shadow-inner font-sans text-sm',\n label: 'flex gap-x-2',\n icon: 'text-neutral-500 size-5 top-1.5 right-1.5 cursor-pointer',\n options:\n 'flex flex-col gap-y-1 shadow p-1 z-30 rounded-2 border-2 border-neutral-100 hover:border-neutral-200 bg-white text-left w-[var(--button-width)] [--anchor-gap:theme(spacing.1)] [--anchor-padding:theme(spacing.2)] [scrollbar-width:thin] empty:invisible transition-colors',\n filter: '[&>[data-component=input]]:rounded',\n },\n variants: {\n disabled: {\n true: {\n root: 'border-neutral-100 text-neutral-200 cursor-not-allowed',\n label: '',\n icon: 'text-neutral-200',\n options: 'border-neutral-100',\n filter: '',\n },\n false: {\n root: '',\n label: '',\n icon: '',\n options: '',\n filter: '',\n },\n },\n invalid: {\n true: {\n root: '',\n label: '',\n icon: '',\n options: '',\n filter: '',\n },\n false: {\n root: '',\n label: '',\n icon: '',\n options: '',\n filter: '',\n },\n },\n },\n};\n"],
5
+ "mappings": "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",
6
6
  "names": ["Fragment", "selectedItem"]
7
7
  }
package/build/components/data-table/DataTable.d.ts CHANGED
@@ -36,4 +36,4 @@ export type DataTableProps<D, C> = {
36
36
  search?: DataTableSearch | undefined;
37
37
  onSearchChange?: ((search: DataTableSearch) => void) | undefined;
38
38
  };
39
- export declare function DataTable<D extends RowData, C extends Array<ColumnDef<D>>>({ data, columns, clientPagination, pagination: controlledPagination, onPaginationChange, clientSorting, sorting: controlledSorting, onSortingChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, columnOrder: controlledColumnOrder, onColumnOrderChange, columnPinning: controlledColumnPinning, onColumnPinningChange, clientFilters, filters: controlledFilters, onFiltersChange, clientFaceting, faceting, clientSearch, search: controlledSearch, onSearchChange, }: DataTableProps<D, C>): import("react/jsx-runtime").JSX.Element;
39
+ export declare function DataTable<D extends RowData, C extends Array<ColumnDef<D, any>>>({ data, columns, clientPagination, pagination: controlledPagination, onPaginationChange, clientSorting, sorting: controlledSorting, onSortingChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, columnOrder: controlledColumnOrder, onColumnOrderChange, columnPinning: controlledColumnPinning, onColumnPinningChange, clientFilters, filters: controlledFilters, onFiltersChange, clientFaceting, faceting, clientSearch, search: controlledSearch, onSearchChange, }: DataTableProps<D, C>): import("react/jsx-runtime").JSX.Element;
package/build/components/data-table/DataTable.js CHANGED
@@ -220,7 +220,7 @@ export function DataTable({
220
220
  onSearch: onSearchChange
221
221
  }
222
222
  ),
223
- /* @__PURE__ */ jsxs(
223
+ /* @__PURE__ */ jsx("div", { className: "w-full overflow-y-visible overflow-x-scroll [scrollbar-width:thin]", children: /* @__PURE__ */ jsxs(
224
224
  Table,
225
225
  {
226
226
  style: {
@@ -257,7 +257,7 @@ export function DataTable({
257
257
  /* @__PURE__ */ jsx(TableFoot, { children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ jsx(TableRow, { children: footerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableHeader, { children: header.isPlaceholder ? null : flexRender(header.column.columnDef.footer, header.getContext()) }, header.id)) }, footerGroup.id)) })
258
258
  ]
259
259
  }
260
- ),
260
+ ) }),
261
261
  /* @__PURE__ */ jsx(
262
262
  DataTablePaginationComponent,
263
263
  {
package/build/components/data-table/DataTable.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../source/components/data-table/DataTable.tsx"],
4
- "sourcesContent": ["import {\n closestCenter,\n DndContext,\n type DragEndEvent,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport {restrictToHorizontalAxis} from '@dnd-kit/modifiers';\nimport {arrayMove, 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 PaginationState,\n type RowData,\n type SortingState,\n type Updater,\n useReactTable,\n type VisibilityState,\n} from '@tanstack/react-table';\nimport {useCallback, useId, useState} from 'react';\n\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 DataTableHeader,\n DataTablePagination as DataTablePaginationComponent,\n DataTableSearch as DataTableSearchComponent,\n DEFAULT_PAGE_SIZE,\n fromPinningState,\n fuzzyFilter,\n getCommonPinningClasses,\n getCommonPinningStyles,\n} from './internals.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 pagination?: DataTablePagination | undefined;\n onPaginationChange?:\n | ((\n pagination: Pick<DataTablePagination, 'page'> | Pick<DataTablePagination, 'pageSize'>,\n ) => void)\n | undefined;\n columnVisibility?: DataTableColumnVisibility;\n onColumnVisibilityChange?: ((columnVisibility: DataTableColumnVisibility) => void) | undefined;\n columnOrder?: DataTableColumnOrder;\n onColumnOrderChange?: ((columnOrder: DataTableColumnOrder) => void) | undefined;\n columnPinning?: DataTableColumnPinning;\n onColumnPinningChange?: ((columnPinning: DataTableColumnPinning) => void) | undefined;\n clientSorting?: boolean | undefined;\n sorting?: DataTableSorting | undefined;\n onSortingChange?: ((sorting: DataTableSorting) => void) | undefined;\n clientFilters?: 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 search?: DataTableSearch | undefined;\n onSearchChange?: ((search: DataTableSearch) => void) | undefined;\n};\n\nexport function DataTable<D extends RowData, C extends Array<ColumnDef<D>>>({\n data,\n columns,\n clientPagination = false,\n pagination: controlledPagination,\n onPaginationChange,\n clientSorting = false,\n sorting: controlledSorting,\n onSortingChange,\n columnVisibility: controlledColumnVisibility,\n onColumnVisibilityChange,\n columnOrder: controlledColumnOrder,\n onColumnOrderChange,\n columnPinning: controlledColumnPinning,\n onColumnPinningChange,\n clientFilters = false,\n filters: controlledFilters,\n onFiltersChange,\n clientFaceting = false,\n faceting,\n clientSearch = false,\n search: controlledSearch,\n onSearchChange,\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 [search, setSearch] = useState('');\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 handleDragEnd = useCallback(\n ({active, over}: DragEndEvent) => {\n if (over && active.id !== over.id) {\n table.setColumnOrder((previousColumnOrder) => {\n let oldIndex = previousColumnOrder.indexOf(active.id as string);\n let newIndex = previousColumnOrder.indexOf(over.id as string);\n\n return arrayMove(previousColumnOrder, oldIndex, newIndex);\n });\n }\n },\n [table],\n );\n\n let sensors = useSensors(\n useSensor(MouseSensor, {\n activationConstraint: {\n distance: 5,\n },\n }),\n useSensor(TouchSensor, {\n activationConstraint: {\n distance: 5,\n },\n }),\n useSensor(KeyboardSensor, {}),\n );\n\n let id = useId();\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 return (\n <DndContext\n collisionDetection={closestCenter}\n id={id}\n modifiers={[restrictToHorizontalAxis]}\n sensors={sensors}\n onDragEnd={handleDragEnd}\n >\n <DataTableSearchComponent\n clientSearch={clientSearch}\n search={controlledSearch}\n table={table}\n onSearch={onSearchChange}\n />\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 clientFaceting={clientFaceting}\n clientFilters={clientFilters}\n clientSorting={clientSorting}\n faceting={faceting}\n filters={controlledFilters}\n header={header}\n sorting={controlledSorting}\n table={table}\n onFiltering={onFiltersChange}\n onSorting={onSortingChange}\n />\n ))}\n </SortableContext>\n </TableRow>\n ))}\n </TableHead>\n <TableBody>\n {table.getRowModel().rows.map((row) => (\n <TableRow key={row.id}>\n {row.getVisibleCells().map((cell) => (\n <TableCell\n key={cell.id}\n className={getCommonPinningClasses(cell.column)}\n style={{...getCommonPinningStyles(cell.column)}}\n title={String(cell.getValue())}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableCell>\n ))}\n </TableRow>\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 <DataTablePaginationComponent\n clientPagination={clientPagination}\n page={page}\n pageCount={pageCount}\n pageSize={pageSize}\n table={table}\n onPagination={onPaginationChange}\n />\n </DndContext>\n );\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import {\n closestCenter,\n DndContext,\n type DragEndEvent,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport {restrictToHorizontalAxis} from '@dnd-kit/modifiers';\nimport {arrayMove, 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 PaginationState,\n type RowData,\n type SortingState,\n type Updater,\n useReactTable,\n type VisibilityState,\n} from '@tanstack/react-table';\nimport {useCallback, useId, useState} from 'react';\n\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 DataTableHeader,\n DataTablePagination as DataTablePaginationComponent,\n DataTableSearch as DataTableSearchComponent,\n DEFAULT_PAGE_SIZE,\n fromPinningState,\n fuzzyFilter,\n getCommonPinningClasses,\n getCommonPinningStyles,\n} from './internals.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 pagination?: DataTablePagination | undefined;\n onPaginationChange?:\n | ((\n pagination: Pick<DataTablePagination, 'page'> | Pick<DataTablePagination, 'pageSize'>,\n ) => void)\n | undefined;\n columnVisibility?: DataTableColumnVisibility;\n onColumnVisibilityChange?: ((columnVisibility: DataTableColumnVisibility) => void) | undefined;\n columnOrder?: DataTableColumnOrder;\n onColumnOrderChange?: ((columnOrder: DataTableColumnOrder) => void) | undefined;\n columnPinning?: DataTableColumnPinning;\n onColumnPinningChange?: ((columnPinning: DataTableColumnPinning) => void) | undefined;\n clientSorting?: boolean | undefined;\n sorting?: DataTableSorting | undefined;\n onSortingChange?: ((sorting: DataTableSorting) => void) | undefined;\n clientFilters?: 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 search?: DataTableSearch | undefined;\n onSearchChange?: ((search: DataTableSearch) => void) | 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 pagination: controlledPagination,\n onPaginationChange,\n clientSorting = false,\n sorting: controlledSorting,\n onSortingChange,\n columnVisibility: controlledColumnVisibility,\n onColumnVisibilityChange,\n columnOrder: controlledColumnOrder,\n onColumnOrderChange,\n columnPinning: controlledColumnPinning,\n onColumnPinningChange,\n clientFilters = false,\n filters: controlledFilters,\n onFiltersChange,\n clientFaceting = false,\n faceting,\n clientSearch = false,\n search: controlledSearch,\n onSearchChange,\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 [search, setSearch] = useState('');\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 handleDragEnd = useCallback(\n ({active, over}: DragEndEvent) => {\n if (over && active.id !== over.id) {\n table.setColumnOrder((previousColumnOrder) => {\n let oldIndex = previousColumnOrder.indexOf(active.id as string);\n let newIndex = previousColumnOrder.indexOf(over.id as string);\n\n return arrayMove(previousColumnOrder, oldIndex, newIndex);\n });\n }\n },\n [table],\n );\n\n let sensors = useSensors(\n useSensor(MouseSensor, {\n activationConstraint: {\n distance: 5,\n },\n }),\n useSensor(TouchSensor, {\n activationConstraint: {\n distance: 5,\n },\n }),\n useSensor(KeyboardSensor, {}),\n );\n\n let id = useId();\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 return (\n <DndContext\n collisionDetection={closestCenter}\n id={id}\n modifiers={[restrictToHorizontalAxis]}\n sensors={sensors}\n onDragEnd={handleDragEnd}\n >\n <DataTableSearchComponent\n clientSearch={clientSearch}\n search={controlledSearch}\n table={table}\n onSearch={onSearchChange}\n />\n <div className=\"w-full overflow-y-visible overflow-x-scroll [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 clientFaceting={clientFaceting}\n clientFilters={clientFilters}\n clientSorting={clientSorting}\n faceting={faceting}\n filters={controlledFilters}\n header={header}\n sorting={controlledSorting}\n table={table}\n onFiltering={onFiltersChange}\n onSorting={onSortingChange}\n />\n ))}\n </SortableContext>\n </TableRow>\n ))}\n </TableHead>\n <TableBody>\n {table.getRowModel().rows.map((row) => (\n <TableRow key={row.id}>\n {row.getVisibleCells().map((cell) => (\n <TableCell\n key={cell.id}\n className={getCommonPinningClasses(cell.column)}\n style={{...getCommonPinningStyles(cell.column)}}\n title={String(cell.getValue())}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableCell>\n ))}\n </TableRow>\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 <DataTablePaginationComponent\n clientPagination={clientPagination}\n page={page}\n pageCount={pageCount}\n pageSize={pageSize}\n table={table}\n onPagination={onPaginationChange}\n />\n </DndContext>\n );\n}\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jakubmazanec/ui",
3
- "version": "0.2.0",
3
+ "version": "0.2.1-unstable.2963d49b",
4
4
  "description": "React component library.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -41,7 +41,7 @@
41
41
  "@dnd-kit/utilities": "^3.2.2",
42
42
  "@headlessui/react": "^2.2.0",
43
43
  "@heroicons/react": "^2.2.0",
44
- "@jakubmazanec/ts-utils": "^3.0.1",
44
+ "@jakubmazanec/ts-utils": "3.0.11-unstable.2963d49b",
45
45
  "@tanstack/match-sorter-utils": "^8.19.4",
46
46
  "@tanstack/react-table": "^8.20.6",
47
47
  "culori": "^4.0.1",
@@ -51,37 +51,37 @@
51
51
  },
52
52
  "devDependencies": {
53
53
  "@chromatic-com/storybook": "^3.2.3",
54
- "@jakubmazanec/eslint-config": "^4.1.0",
55
- "@storybook/addon-controls": "^8.4.7",
56
- "@storybook/addon-essentials": "^8.4.7",
57
- "@storybook/addon-interactions": "^8.4.7",
58
- "@storybook/addon-links": "^8.4.7",
59
- "@storybook/blocks": "^8.4.7",
60
- "@storybook/preview-api": "^8.4.7",
61
- "@storybook/react": "^8.4.7",
62
- "@storybook/react-vite": "^8.4.7",
63
- "@storybook/test": "^8.4.7",
54
+ "@jakubmazanec/eslint-config": "4.1.4-unstable.2963d49b",
55
+ "@storybook/addon-controls": "^8.5.0",
56
+ "@storybook/addon-essentials": "^8.5.0",
57
+ "@storybook/addon-interactions": "^8.5.0",
58
+ "@storybook/addon-links": "^8.5.0",
59
+ "@storybook/blocks": "^8.5.0",
60
+ "@storybook/preview-api": "^8.5.0",
61
+ "@storybook/react": "^8.5.0",
62
+ "@storybook/react-vite": "^8.5.0",
63
+ "@storybook/test": "^8.5.0",
64
64
  "@testing-library/jest-dom": "^6.6.3",
65
- "@testing-library/react": "^16.1.0",
65
+ "@testing-library/react": "^16.2.0",
66
66
  "@types/culori": "^2.1.1",
67
67
  "@types/lodash": "^4.17.14",
68
- "@types/node": "^22.10.5",
69
- "@types/react": "^19.0.5",
68
+ "@types/node": "^22.10.7",
69
+ "@types/react": "^19.0.7",
70
70
  "@types/react-dom": "^19.0.3",
71
71
  "@vitest/coverage-v8": "^2.1.8",
72
72
  "autoprefixer": "^10.4.20",
73
- "chromatic": "^11.22.2",
73
+ "chromatic": "^11.24.0",
74
74
  "concurrently": "^9.1.2",
75
75
  "del-cli": "^6.0.0",
76
76
  "esbuild": "^0.24.2",
77
77
  "eslint": "^9.18.0",
78
- "happy-dom": "^16.5.3",
78
+ "happy-dom": "^16.6.0",
79
79
  "prettier": "^3.4.2",
80
- "prettier-plugin-packagejson": "^2.5.6",
81
- "prettier-plugin-tailwindcss": "^0.6.9",
80
+ "prettier-plugin-packagejson": "^2.5.7",
81
+ "prettier-plugin-tailwindcss": "^0.6.10",
82
82
  "react": "^19.0.0",
83
83
  "react-dom": "^19.0.0",
84
- "storybook": "^8.4.7",
84
+ "storybook": "^8.5.0",
85
85
  "tailwindcss": "^3.4.17",
86
86
  "tsx": "^4.19.2",
87
87
  "typedoc": "^0.27.6",
package/source/components/Listbox.tsx CHANGED
@@ -186,8 +186,6 @@ export function Listbox<
186
186
  ...rest,
187
187
  };
188
188
 
189
- console.log('Listbox...', props);
190
-
191
189
  return (
192
190
  <HeadlessListbox {...props}>
193
191
  <HeadlessListboxButton
package/source/components/data-table/DataTable.tsx CHANGED
@@ -94,7 +94,8 @@ export type DataTableProps<D, C> = {
94
94
  onSearchChange?: ((search: DataTableSearch) => void) | undefined;
95
95
  };
96
96
 
97
- export function DataTable<D extends RowData, C extends Array<ColumnDef<D>>>({
97
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed so the type parameters are useful
98
+ export function DataTable<D extends RowData, C extends Array<ColumnDef<D, any>>>({
98
99
  data,
99
100
  columns,
100
101
  clientPagination = false,
@@ -305,65 +306,67 @@ export function DataTable<D extends RowData, C extends Array<ColumnDef<D>>>({
305
306
  table={table}
306
307
  onSearch={onSearchChange}
307
308
  />
308
- <Table
309
- style={{
310
- width: table.getCenterTotalSize(),
311
- tableLayout: 'fixed',
312
- }}
313
- >
314
- <TableHead>
315
- {table.getHeaderGroups().map((headerGroup) => (
316
- <TableRow key={headerGroup.id}>
317
- <SortableContext items={columnOrder} strategy={horizontalListSortingStrategy}>
318
- {headerGroup.headers.map((header) => (
319
- <DataTableHeader
320
- key={header.id}
321
- clientFaceting={clientFaceting}
322
- clientFilters={clientFilters}
323
- clientSorting={clientSorting}
324
- faceting={faceting}
325
- filters={controlledFilters}
326
- header={header}
327
- sorting={controlledSorting}
328
- table={table}
329
- onFiltering={onFiltersChange}
330
- onSorting={onSortingChange}
331
- />
309
+ <div className="w-full overflow-y-visible overflow-x-scroll [scrollbar-width:thin]">
310
+ <Table
311
+ style={{
312
+ width: table.getCenterTotalSize(),
313
+ tableLayout: 'fixed',
314
+ }}
315
+ >
316
+ <TableHead>
317
+ {table.getHeaderGroups().map((headerGroup) => (
318
+ <TableRow key={headerGroup.id}>
319
+ <SortableContext items={columnOrder} strategy={horizontalListSortingStrategy}>
320
+ {headerGroup.headers.map((header) => (
321
+ <DataTableHeader
322
+ key={header.id}
323
+ clientFaceting={clientFaceting}
324
+ clientFilters={clientFilters}
325
+ clientSorting={clientSorting}
326
+ faceting={faceting}
327
+ filters={controlledFilters}
328
+ header={header}
329
+ sorting={controlledSorting}
330
+ table={table}
331
+ onFiltering={onFiltersChange}
332
+ onSorting={onSortingChange}
333
+ />
334
+ ))}
335
+ </SortableContext>
336
+ </TableRow>
337
+ ))}
338
+ </TableHead>
339
+ <TableBody>
340
+ {table.getRowModel().rows.map((row) => (
341
+ <TableRow key={row.id}>
342
+ {row.getVisibleCells().map((cell) => (
343
+ <TableCell
344
+ key={cell.id}
345
+ className={getCommonPinningClasses(cell.column)}
346
+ style={{...getCommonPinningStyles(cell.column)}}
347
+ title={String(cell.getValue())}
348
+ >
349
+ {flexRender(cell.column.columnDef.cell, cell.getContext())}
350
+ </TableCell>
332
351
  ))}
333
- </SortableContext>
334
- </TableRow>
335
- ))}
336
- </TableHead>
337
- <TableBody>
338
- {table.getRowModel().rows.map((row) => (
339
- <TableRow key={row.id}>
340
- {row.getVisibleCells().map((cell) => (
341
- <TableCell
342
- key={cell.id}
343
- className={getCommonPinningClasses(cell.column)}
344
- style={{...getCommonPinningStyles(cell.column)}}
345
- title={String(cell.getValue())}
346
- >
347
- {flexRender(cell.column.columnDef.cell, cell.getContext())}
348
- </TableCell>
349
- ))}
350
- </TableRow>
351
- ))}
352
- </TableBody>
353
- <TableFoot>
354
- {table.getFooterGroups().map((footerGroup) => (
355
- <TableRow key={footerGroup.id}>
356
- {footerGroup.headers.map((header) => (
357
- <TableHeader key={header.id}>
358
- {header.isPlaceholder ? null : (
359
- flexRender(header.column.columnDef.footer, header.getContext())
360
- )}
361
- </TableHeader>
362
- ))}
363
- </TableRow>
364
- ))}
365
- </TableFoot>
366
- </Table>
352
+ </TableRow>
353
+ ))}
354
+ </TableBody>
355
+ <TableFoot>
356
+ {table.getFooterGroups().map((footerGroup) => (
357
+ <TableRow key={footerGroup.id}>
358
+ {footerGroup.headers.map((header) => (
359
+ <TableHeader key={header.id}>
360
+ {header.isPlaceholder ? null : (
361
+ flexRender(header.column.columnDef.footer, header.getContext())
362
+ )}
363
+ </TableHeader>
364
+ ))}
365
+ </TableRow>
366
+ ))}
367
+ </TableFoot>
368
+ </Table>
369
+ </div>
367
370
  <DataTablePaginationComponent
368
371
  clientPagination={clientPagination}
369
372
  page={page}