@jakubmazanec/ui 0.2.0 → 0.2.1-unstable.e0d45346
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/Listbox.js +0 -1
- package/build/components/Listbox.js.map +2 -2
- package/build/components/data-table/DataTable.d.ts +1 -1
- package/build/components/data-table/DataTable.js.map +2 -2
- package/package.json +20 -20
- package/source/components/Listbox.tsx +0 -2
- package/source/components/data-table/DataTable.tsx +2 -1
|
@@ -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": ";
|
|
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
|
}
|
|
@@ -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;
|
|
@@ -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": ";
|
|
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 <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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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jakubmazanec/ui",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.1-unstable.e0d45346",
|
|
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": "
|
|
44
|
+
"@jakubmazanec/ts-utils": "3.0.11-unstable.e0d45346",
|
|
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": "
|
|
55
|
-
"@storybook/addon-controls": "^8.
|
|
56
|
-
"@storybook/addon-essentials": "^8.
|
|
57
|
-
"@storybook/addon-interactions": "^8.
|
|
58
|
-
"@storybook/addon-links": "^8.
|
|
59
|
-
"@storybook/blocks": "^8.
|
|
60
|
-
"@storybook/preview-api": "^8.
|
|
61
|
-
"@storybook/react": "^8.
|
|
62
|
-
"@storybook/react-vite": "^8.
|
|
63
|
-
"@storybook/test": "^8.
|
|
54
|
+
"@jakubmazanec/eslint-config": "4.1.4-unstable.e0d45346",
|
|
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.
|
|
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.
|
|
69
|
-
"@types/react": "^19.0.
|
|
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.
|
|
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.
|
|
78
|
+
"happy-dom": "^16.6.0",
|
|
79
79
|
"prettier": "^3.4.2",
|
|
80
|
-
"prettier-plugin-packagejson": "^2.5.
|
|
81
|
-
"prettier-plugin-tailwindcss": "^0.6.
|
|
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.
|
|
84
|
+
"storybook": "^8.5.0",
|
|
85
85
|
"tailwindcss": "^3.4.17",
|
|
86
86
|
"tsx": "^4.19.2",
|
|
87
87
|
"typedoc": "^0.27.6",
|
|
@@ -94,7 +94,8 @@ export type DataTableProps<D, C> = {
|
|
|
94
94
|
onSearchChange?: ((search: DataTableSearch) => void) | undefined;
|
|
95
95
|
};
|
|
96
96
|
|
|
97
|
-
|
|
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,
|