@jakubmazanec/ui 0.6.0 → 0.6.1-next.b17ccbea
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/CheckboxField.d.ts +1 -1
- package/build/components/CheckboxField.js.map +1 -1
- package/build/components/Field.d.ts +1 -1
- package/build/components/Field.js.map +1 -1
- package/build/components/RadioGroup.d.ts +1 -1
- package/build/components/RadioGroup.js.map +1 -1
- package/build/components/data-table/DataTable.js +2 -1
- package/build/components/data-table/DataTable.js.map +2 -2
- package/build/components/data-table/internals/fuzzyFilter.js +6 -2
- package/build/components/data-table/internals/fuzzyFilter.js.map +2 -2
- package/package.json +36 -36
- package/source/components/CheckboxField.tsx +1 -1
- package/source/components/Field.tsx +1 -1
- package/source/components/RadioGroup.tsx +1 -1
- package/source/components/data-table/DataTable.tsx +1 -0
- package/source/components/data-table/internals/fuzzyFilter.ts +8 -2
|
@@ -7,7 +7,7 @@ export declare const useCheckboxFieldTheme: {
|
|
|
7
7
|
} & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
|
|
8
8
|
export type CheckboxFieldProps = PropsWithChildren<ComponentProps<typeof useCheckboxFieldTheme> & ({
|
|
9
9
|
className?: string | undefined;
|
|
10
|
-
field?: FieldMetadata<any
|
|
10
|
+
field?: FieldMetadata<any> | undefined;
|
|
11
11
|
name?: undefined;
|
|
12
12
|
} | {
|
|
13
13
|
className?: string | undefined;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../source/components/CheckboxField.tsx"],
|
|
4
|
-
"sourcesContent": ["import {type FieldMetadata, type FieldName} from '@conform-to/react';\nimport {Field as HeadlessField} from '@headlessui/react';\nimport {type PropsWithChildren} from 'react';\n\nimport {\n type ComponentProps,\n type ComponentTheme,\n createComponentTheme,\n} from '../theme/internals.js';\nimport {FieldContext, FieldNameContext} from './internals.js';\n\nexport const useCheckboxFieldTheme = createComponentTheme('CheckboxField');\n\nexport type CheckboxFieldProps = PropsWithChildren<\n ComponentProps<typeof useCheckboxFieldTheme> &\n (\n | {\n className?: string | undefined;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n field?: FieldMetadata<any
|
|
4
|
+
"sourcesContent": ["import {type FieldMetadata, type FieldName} from '@conform-to/react';\nimport {Field as HeadlessField} from '@headlessui/react';\nimport {type PropsWithChildren} from 'react';\n\nimport {\n type ComponentProps,\n type ComponentTheme,\n createComponentTheme,\n} from '../theme/internals.js';\nimport {FieldContext, FieldNameContext} from './internals.js';\n\nexport const useCheckboxFieldTheme = createComponentTheme('CheckboxField');\n\nexport type CheckboxFieldProps = PropsWithChildren<\n ComponentProps<typeof useCheckboxFieldTheme> &\n (\n | {\n className?: string | undefined;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n field?: FieldMetadata<any> | undefined;\n name?: undefined;\n }\n | {\n className?: string | undefined;\n field?: undefined;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n name?: FieldName<any, any> | string | undefined;\n }\n )\n>;\n\nexport function CheckboxField({field, name, className, children}: CheckboxFieldProps) {\n let theme = useCheckboxFieldTheme();\n\n if (field) {\n return (\n <FieldContext value={field}>\n <HeadlessField className={theme(null, className)} data-component=\"checkbox-field\">\n {children}\n </HeadlessField>\n </FieldContext>\n );\n }\n\n if (name) {\n return (\n <FieldNameContext value={name}>\n <HeadlessField className={theme(null, className)} data-component=\"checkbox-field\">\n {children}\n </HeadlessField>\n </FieldNameContext>\n );\n }\n\n return <HeadlessField className={theme(null, className)}>{children}</HeadlessField>;\n}\n\nexport const checkboxFieldTheme: ComponentTheme<typeof useCheckboxFieldTheme> = {\n className:\n 'grid grid-cols-[theme(spacing.5)_1fr] gap-x-2 gap-y-1 [&>[data-component=description]]:col-start-2',\n};\n"],
|
|
5
5
|
"mappings": "AAqCQ;AApCR,SAAQ,SAAS,qBAAoB;AAGrC;AAAA,EAGE;AAAA,OACK;AACP,SAAQ,cAAc,wBAAuB;AAEtC,aAAM,wBAAwB,qBAAqB,eAAe;AAoBlE,gBAAS,cAAc,EAAC,OAAO,MAAM,WAAW,SAAQ,GAAuB;AACpF,MAAI,QAAQ,sBAAsB;AAElC,MAAI,OAAO;AACT,WACE,oBAAC,gBAAa,OAAO,OACnB,8BAAC,iBAAc,WAAW,MAAM,MAAM,SAAS,GAAG,kBAAe,kBAC9D,UACH,GACF;AAAA,EAEJ;AAEA,MAAI,MAAM;AACR,WACE,oBAAC,oBAAiB,OAAO,MACvB,8BAAC,iBAAc,WAAW,MAAM,MAAM,SAAS,GAAG,kBAAe,kBAC9D,UACH,GACF;AAAA,EAEJ;AAEA,SAAO,oBAAC,iBAAc,WAAW,MAAM,MAAM,SAAS,GAAI,UAAS;AACrE;AAEO,aAAM,qBAAmE;AAAA,EAC9E,WACE;AACJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -16,7 +16,7 @@ export type FieldProps<T extends ElementType> = ComponentProps<typeof useFieldTh
|
|
|
16
16
|
as?: T | undefined;
|
|
17
17
|
className?: string | undefined;
|
|
18
18
|
name?: undefined;
|
|
19
|
-
field?: FieldMetadata<any
|
|
19
|
+
field?: FieldMetadata<any> | undefined;
|
|
20
20
|
});
|
|
21
21
|
export declare function Field<T extends ElementType = typeof FIELD_ELEMENT>({ as, name, field, className, ref, children, ...rest }: FieldProps<T>): import("react").JSX.Element;
|
|
22
22
|
export declare const fieldTheme: ComponentTheme<typeof useFieldTheme>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../source/components/Field.tsx"],
|
|
4
|
-
"sourcesContent": ["import {type FieldMetadata, type FieldName} from '@conform-to/react';\nimport {Field as HeadlessField, type FieldProps as HeadlessFieldProps} from '@headlessui/react';\nimport {type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren} from 'react';\n\nimport {\n type ComponentProps,\n type ComponentTheme,\n createComponentTheme,\n} from '../theme/internals.js';\nimport {type ComponentRef} from './ComponentRef.js';\nimport {FieldContext, FieldNameContext, filterProps} from './internals.js';\n\nexport const useFieldTheme = createComponentTheme('Field');\n\nconst FIELD_ELEMENT = 'div';\n\nexport type FieldProps<T extends ElementType> = ComponentProps<typeof useFieldTheme> &\n ComponentPropsWithoutRef<T> &\n ComponentRef<T> &\n PropsWithChildren &\n (\n | {\n as?: T | undefined;\n className?: string | undefined;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n name?: FieldName<any, any> | string | undefined;\n field?: undefined;\n }\n | {\n as?: T | undefined;\n className?: string | undefined;\n name?: undefined;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n field?: FieldMetadata<any
|
|
4
|
+
"sourcesContent": ["import {type FieldMetadata, type FieldName} from '@conform-to/react';\nimport {Field as HeadlessField, type FieldProps as HeadlessFieldProps} from '@headlessui/react';\nimport {type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren} from 'react';\n\nimport {\n type ComponentProps,\n type ComponentTheme,\n createComponentTheme,\n} from '../theme/internals.js';\nimport {type ComponentRef} from './ComponentRef.js';\nimport {FieldContext, FieldNameContext, filterProps} from './internals.js';\n\nexport const useFieldTheme = createComponentTheme('Field');\n\nconst FIELD_ELEMENT = 'div';\n\nexport type FieldProps<T extends ElementType> = ComponentProps<typeof useFieldTheme> &\n ComponentPropsWithoutRef<T> &\n ComponentRef<T> &\n PropsWithChildren &\n (\n | {\n as?: T | undefined;\n className?: string | undefined;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n name?: FieldName<any, any> | string | undefined;\n field?: undefined;\n }\n | {\n as?: T | undefined;\n className?: string | undefined;\n name?: undefined;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n field?: FieldMetadata<any> | undefined;\n }\n );\n\nexport function Field<T extends ElementType = typeof FIELD_ELEMENT>({\n as = FIELD_ELEMENT as T,\n name,\n field,\n className,\n ref,\n children,\n ...rest\n}: FieldProps<T>) {\n let theme = useFieldTheme();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n let props: HeadlessFieldProps<any> = filterProps({\n as,\n ref,\n className: theme(null, className),\n 'data-component': 'field',\n ...rest,\n });\n\n if (field) {\n return (\n <FieldContext value={field}>\n <HeadlessField {...props}>{children}</HeadlessField>\n </FieldContext>\n );\n }\n\n if (name) {\n return (\n <FieldNameContext value={name}>\n <HeadlessField {...props}>{children}</HeadlessField>\n </FieldNameContext>\n );\n }\n\n return <HeadlessField {...props}>{children}</HeadlessField>;\n}\n\nexport const fieldTheme: ComponentTheme<typeof useFieldTheme> = {\n className: 'flex flex-col gap-y-2 font-sans',\n};\n"],
|
|
5
5
|
"mappings": "AA2DQ;AA1DR,SAAQ,SAAS,qBAA2D;AAG5E;AAAA,EAGE;AAAA,OACK;AAEP,SAAQ,cAAc,kBAAkB,mBAAkB;AAEnD,aAAM,gBAAgB,qBAAqB,OAAO;AAEzD,MAAM,gBAAgB;AAuBf,gBAAS,MAAoD;AAAA,EAClE,KAAK;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,MAAI,QAAQ,cAAc;AAE1B,MAAI,QAAiC,YAAY;AAAA,IAC/C;AAAA,IACA;AAAA,IACA,WAAW,MAAM,MAAM,SAAS;AAAA,IAChC,kBAAkB;AAAA,IAClB,GAAG;AAAA,EACL,CAAC;AAED,MAAI,OAAO;AACT,WACE,oBAAC,gBAAa,OAAO,OACnB,8BAAC,iBAAe,GAAG,OAAQ,UAAS,GACtC;AAAA,EAEJ;AAEA,MAAI,MAAM;AACR,WACE,oBAAC,oBAAiB,OAAO,MACvB,8BAAC,iBAAe,GAAG,OAAQ,UAAS,GACtC;AAAA,EAEJ;AAEA,SAAO,oBAAC,iBAAe,GAAG,OAAQ,UAAS;AAC7C;AAEO,aAAM,aAAmD;AAAA,EAC9D,WAAW;AACb;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,7 +17,7 @@ export type RadioGroupProps<T extends ElementType, V extends boolean | number |
|
|
|
17
17
|
as?: T | undefined;
|
|
18
18
|
value?: V | undefined;
|
|
19
19
|
defaultValue?: V | undefined;
|
|
20
|
-
field?: FieldMetadata<any
|
|
20
|
+
field?: FieldMetadata<any> | undefined;
|
|
21
21
|
name?: undefined;
|
|
22
22
|
className?: string | undefined;
|
|
23
23
|
onChange?: ((value: V) => void) | undefined;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../source/components/RadioGroup.tsx"],
|
|
4
|
-
"sourcesContent": ["import {type FieldMetadata, type FieldName} from '@conform-to/react';\nimport {RadioGroup as HeadlessRadioGroup} from '@headlessui/react';\nimport {\n type ComponentPropsWithoutRef,\n type ElementType,\n type PropsWithChildren,\n useCallback,\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 {FieldContext, FieldNameContext, useFormId} from './internals.js';\n\nexport const useRadioGroupTheme = createComponentTheme('RadioGroup', {\n variants: {\n disabled: [true, false],\n },\n});\n\nconst RADIO_GROUP_ELEMENT = 'div';\n\nexport type RadioGroupProps<\n T extends ElementType,\n V extends boolean | number | string,\n> = ComponentProps<typeof useRadioGroupTheme> &\n ComponentPropsWithoutRef<T> &\n ComponentRef<T> &\n PropsWithChildren &\n (\n | {\n as?: T | undefined;\n value?: V | undefined;\n defaultValue?: V | undefined;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n field?: FieldMetadata<any
|
|
4
|
+
"sourcesContent": ["import {type FieldMetadata, type FieldName} from '@conform-to/react';\nimport {RadioGroup as HeadlessRadioGroup} from '@headlessui/react';\nimport {\n type ComponentPropsWithoutRef,\n type ElementType,\n type PropsWithChildren,\n useCallback,\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 {FieldContext, FieldNameContext, useFormId} from './internals.js';\n\nexport const useRadioGroupTheme = createComponentTheme('RadioGroup', {\n variants: {\n disabled: [true, false],\n },\n});\n\nconst RADIO_GROUP_ELEMENT = 'div';\n\nexport type RadioGroupProps<\n T extends ElementType,\n V extends boolean | number | string,\n> = ComponentProps<typeof useRadioGroupTheme> &\n ComponentPropsWithoutRef<T> &\n ComponentRef<T> &\n PropsWithChildren &\n (\n | {\n as?: T | undefined;\n value?: V | undefined;\n defaultValue?: V | undefined;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n field?: FieldMetadata<any> | undefined;\n name?: undefined;\n className?: string | undefined;\n onChange?: ((value: V) => void) | undefined;\n }\n | {\n as?: T | undefined;\n value?: V | undefined;\n defaultValue?: V | undefined;\n field?: undefined;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n name?: FieldName<any, any> | string | undefined;\n className?: string;\n onChange?: ((value: V) => void) | undefined;\n }\n );\n\nexport function RadioGroup<\n T extends ElementType = typeof RADIO_GROUP_ELEMENT,\n V extends boolean | number | string = string,\n>({\n disabled = false,\n as = RADIO_GROUP_ELEMENT as T,\n value,\n defaultValue,\n field,\n name,\n className,\n onChange,\n ref,\n children,\n ...rest\n}: RadioGroupProps<T, V>) {\n let theme = useRadioGroupTheme({disabled});\n let formId = useFormId();\n\n let handleChange = useCallback(\n (newValue: V) => {\n onChange?.(newValue);\n },\n [onChange],\n );\n\n if (field) {\n let props = {\n ref,\n disabled,\n defaultValue,\n name: field.name,\n form: formId,\n className: theme(null, className),\n onChange: handleChange,\n ...rest,\n };\n\n return (\n <FieldContext value={field}>\n <HeadlessRadioGroup {...props}>{children}</HeadlessRadioGroup>\n </FieldContext>\n );\n }\n\n if (name) {\n let props = {\n ref,\n disabled,\n defaultValue,\n name,\n form: formId,\n className: theme(null, className),\n onChange: handleChange,\n 'data-component': 'radio-group',\n ...rest,\n };\n\n return (\n <FieldNameContext value={name}>\n <HeadlessRadioGroup {...props}>{children}</HeadlessRadioGroup>\n </FieldNameContext>\n );\n }\n\n let props = {\n ref,\n disabled,\n value,\n defaultValue,\n className: theme(null, className),\n onChange: handleChange,\n 'data-component': 'radio-group',\n ...rest,\n };\n\n return <HeadlessRadioGroup {...props}>{children}</HeadlessRadioGroup>;\n}\n\nexport const radioGroupTheme: ComponentTheme<typeof useRadioGroupTheme> = {\n className: 'flex flex-col gap-y-2',\n variants: {\n disabled: {\n true: '',\n false: '',\n },\n },\n};\n"],
|
|
5
5
|
"mappings": "AA+FQ;AA9FR,SAAQ,cAAc,0BAAyB;AAC/C;AAAA,EAIE;AAAA,OACK;AAEP;AAAA,EAGE;AAAA,OACK;AAEP,SAAQ,cAAc,kBAAkB,iBAAgB;AAEjD,aAAM,qBAAqB,qBAAqB,cAAc;AAAA,EACnE,UAAU;AAAA,IACR,UAAU,CAAC,MAAM,KAAK;AAAA,EACxB;AACF,CAAC;AAED,MAAM,sBAAsB;AAgCrB,gBAAS,WAGd;AAAA,EACA,WAAW;AAAA,EACX,KAAK;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,MAAI,QAAQ,mBAAmB,EAAC,SAAQ,CAAC;AACzC,MAAI,SAAS,UAAU;AAEvB,MAAI,eAAe;AAAA,IACjB,CAAC,aAAgB;AACf,iBAAW,QAAQ;AAAA,IACrB;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,MAAI,OAAO;AACT,QAAIA,SAAQ;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,MAAM;AAAA,MACZ,MAAM;AAAA,MACN,WAAW,MAAM,MAAM,SAAS;AAAA,MAChC,UAAU;AAAA,MACV,GAAG;AAAA,IACL;AAEA,WACE,oBAAC,gBAAa,OAAO,OACnB,8BAAC,sBAAoB,GAAGA,QAAQ,UAAS,GAC3C;AAAA,EAEJ;AAEA,MAAI,MAAM;AACR,QAAIA,SAAQ;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,WAAW,MAAM,MAAM,SAAS;AAAA,MAChC,UAAU;AAAA,MACV,kBAAkB;AAAA,MAClB,GAAG;AAAA,IACL;AAEA,WACE,oBAAC,oBAAiB,OAAO,MACvB,8BAAC,sBAAoB,GAAGA,QAAQ,UAAS,GAC3C;AAAA,EAEJ;AAEA,MAAI,QAAQ;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,MAAM,MAAM,SAAS;AAAA,IAChC,UAAU;AAAA,IACV,kBAAkB;AAAA,IAClB,GAAG;AAAA,EACL;AAEA,SAAO,oBAAC,sBAAoB,GAAG,OAAQ,UAAS;AAClD;AAEO,aAAM,kBAA6D;AAAA,EACxE,WAAW;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["props"]
|
|
7
7
|
}
|
|
@@ -177,7 +177,8 @@ export function DataTable({
|
|
|
177
177
|
onColumnFiltersChange: clientFilters ? setColumnFilters : void 0,
|
|
178
178
|
onGlobalFilterChange: clientSearch ? setSearch : void 0,
|
|
179
179
|
columnResizeMode: "onChange",
|
|
180
|
-
globalFilterFn: fuzzyFilter
|
|
180
|
+
globalFilterFn: fuzzyFilter,
|
|
181
|
+
getColumnCanGlobalFilter: () => true
|
|
181
182
|
});
|
|
182
183
|
let page = clientPagination ? table.getState().pagination.pageIndex + 1 : controlledPagination?.page ?? 1;
|
|
183
184
|
let pageSize = clientPagination ? table.getState().pagination.pageSize : controlledPagination?.pageSize ?? DEFAULT_PAGE_SIZE;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../source/components/data-table/DataTable.tsx"],
|
|
4
|
-
"sourcesContent": ["import {horizontalListSortingStrategy, SortableContext} from '@dnd-kit/sortable';\nimport {\n type ColumnDef,\n type ColumnFiltersState,\n type ColumnOrderState,\n type ColumnPinningState,\n flexRender,\n getCoreRowModel,\n getFacetedMinMaxValues,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n type Header,\n type PaginationState,\n type Row,\n type RowData,\n type SortingState,\n type Updater,\n useReactTable,\n type VisibilityState,\n} from '@tanstack/react-table';\nimport {useCallback, useState} from 'react';\n\nimport {Button} from '../Button.js';\nimport {Container} from '../Container.js';\nimport {Dialog} from '../Dialog.js';\nimport {DialogPanel} from '../DialogPanel.js';\nimport {Table} from '../Table.js';\nimport {TableBody} from '../TableBody.js';\nimport {TableCell} from '../TableCell.js';\nimport {TableFoot} from '../TableFoot.js';\nimport {TableHead} from '../TableHead.js';\nimport {TableHeader} from '../TableHeader.js';\nimport {TableRow} from '../TableRow.js';\nimport {type DataTableColumnOrder} from './DataTableColumnOrder.js';\nimport {type DataTableColumnPinning} from './DataTableColumnPinning.js';\nimport {type DataTableColumnVisibility} from './DataTableColumnVisibility.js';\nimport {type DataTableFaceting} from './DataTableFaceting.js';\nimport {type DataTableFilters} from './DataTableFilters.js';\nimport {type DataTablePagination} from './DataTablePagination.js';\nimport {type DataTableSearch} from './DataTableSearch.js';\nimport {type DataTableSorting} from './DataTableSorting.js';\nimport {\n DataTableFilters as DataTableFiltersComponent,\n DataTableHeader,\n DataTableMenu,\n DataTablePagination as DataTablePaginationComponent,\n DataTableSearch as DataTableSearchComponent,\n DEFAULT_PAGE_SIZE,\n fromPinningState,\n fuzzyFilter,\n} from './internals.js';\nimport {DataTableRow} from './internals/DataTableRow.js';\n\ndeclare module '@tanstack/react-table' {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars -- false positive\n interface ColumnMeta<TData extends RowData, TValue> {\n filterVariant?: 'range' | 'select' | 'text';\n }\n}\n\nexport type DataTableProps<D, C> = {\n data: D[];\n columns: C;\n clientPagination?: boolean | undefined;\n hidePagination?: boolean | undefined;\n pagination?: DataTablePagination | undefined;\n onPaginationChange?:\n | ((\n pagination: Pick<DataTablePagination, 'page'> | Pick<DataTablePagination, 'pageSize'>,\n ) => void)\n | undefined;\n columnVisibility?: DataTableColumnVisibility;\n hideColumnVisibility?: boolean | undefined;\n onColumnVisibilityChange?: ((columnVisibility: DataTableColumnVisibility) => void) | undefined;\n columnOrder?: DataTableColumnOrder;\n hideColumnOrder?: boolean | undefined;\n onColumnOrderChange?: ((columnOrder: DataTableColumnOrder) => void) | undefined;\n columnPinning?: DataTableColumnPinning;\n hideColumnPinning?: boolean | undefined;\n onColumnPinningChange?: ((columnPinning: DataTableColumnPinning) => void) | undefined;\n hideColumnResizing?: boolean | undefined;\n clientSorting?: boolean | undefined;\n sorting?: DataTableSorting | undefined;\n hideSorting?: boolean | undefined;\n onSortingChange?: ((sorting: DataTableSorting) => void) | undefined;\n clientFilters?: boolean | undefined;\n hideFilters?: boolean | undefined;\n filters?: DataTableFilters | undefined;\n onFiltersChange?: ((filters: DataTableFilters) => void) | undefined;\n clientFaceting?: boolean | undefined;\n faceting?: DataTableFaceting | undefined;\n clientSearch?: boolean | undefined;\n hideSearch?: boolean | undefined;\n search?: DataTableSearch | undefined;\n onSearchChange?: ((search: DataTableSearch) => void) | undefined;\n showRowSummaryOnClick?: boolean | undefined;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed so the type parameters are useful\nexport function DataTable<D extends RowData, C extends Array<ColumnDef<D, any>>>({\n data,\n columns,\n clientPagination = false,\n hidePagination = false,\n pagination: controlledPagination,\n onPaginationChange,\n clientSorting = false,\n sorting: controlledSorting,\n hideSorting = false,\n onSortingChange,\n columnVisibility: controlledColumnVisibility,\n hideColumnVisibility = false,\n onColumnVisibilityChange,\n columnOrder: controlledColumnOrder,\n hideColumnOrder = false,\n onColumnOrderChange,\n columnPinning: controlledColumnPinning,\n hideColumnPinning = false,\n onColumnPinningChange,\n hideColumnResizing = false,\n clientFilters = false,\n hideFilters = false,\n filters: controlledFilters,\n onFiltersChange,\n clientFaceting = false,\n faceting,\n clientSearch = false,\n hideSearch = false,\n search: controlledSearch,\n onSearchChange,\n showRowSummaryOnClick = false,\n}: DataTableProps<D, C>) {\n let [pagination, setPagination] = useState<PaginationState>(\n controlledPagination ?\n {\n pageIndex: Math.max(0, controlledPagination.page - 1),\n pageSize: controlledPagination.pageSize,\n }\n : {\n pageIndex: 0,\n pageSize: DEFAULT_PAGE_SIZE,\n },\n );\n let [columnVisibility, setColumnVisibility] = useState(controlledColumnVisibility ?? {});\n let [columnOrder, setColumnOrder] = useState<string[]>(\n controlledColumnOrder ?\n [\n ...controlledColumnOrder,\n ...columns\n .map((column, index) => {\n if (column.id) {\n return column.id;\n }\n\n if ('accessorKey' in column) {\n return String(column.accessorKey);\n }\n\n if (typeof column.header === 'string') {\n return String(column.header);\n }\n\n return String(index);\n })\n .filter((value) => !controlledColumnOrder.includes(value)),\n ]\n : columns.map((column, index) => {\n if (column.id) {\n return column.id;\n }\n\n if ('accessorKey' in column) {\n return String(column.accessorKey);\n }\n\n if (typeof column.header === 'string') {\n return String(column.header);\n }\n\n return String(index);\n }),\n );\n let [columnPinning, setColumnPinning] = useState<ColumnPinningState>(\n controlledColumnPinning ?\n {\n left: Object.entries(controlledColumnPinning)\n .filter(([, pinning]) => pinning === 'left')\n .map(([column]) => column),\n right: Object.entries(controlledColumnPinning)\n .filter(([, pinning]) => pinning === 'right')\n .map(([column]) => column),\n }\n : {left: [], right: []},\n );\n let [sorting, setSorting] = useState<SortingState>([]);\n let [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n let [showFilters, setShowFilters] = useState(false);\n let [search, setSearch] = useState('');\n let [showRowSummary, setShowRowSummary] = useState(false);\n let [rowSummaryRow, setRowSummaryRow] = useState<Row<D> | null>(null);\n\n let handleColumnVisibilityChange = useCallback(\n (columnVisibilityState: Updater<VisibilityState>) => {\n setColumnVisibility(columnVisibilityState);\n\n if (typeof columnVisibilityState === 'function') {\n onColumnVisibilityChange?.(columnVisibilityState(columnVisibility));\n } else {\n onColumnVisibilityChange?.(columnVisibilityState);\n }\n },\n [columnVisibility, onColumnVisibilityChange],\n );\n let handleColumnOrderChange = useCallback(\n (columnOrderState: Updater<ColumnOrderState>) => {\n setColumnOrder(columnOrderState);\n\n if (typeof columnOrderState === 'function') {\n onColumnOrderChange?.(columnOrderState(columnOrder));\n } else {\n onColumnOrderChange?.(columnOrderState);\n }\n },\n [columnOrder, onColumnOrderChange],\n );\n let handleColumnPinningChange = useCallback(\n (columnPinningState: Updater<ColumnPinningState>) => {\n setColumnPinning(columnPinningState);\n\n if (typeof columnPinningState === 'function') {\n onColumnPinningChange?.(fromPinningState(columnPinningState(columnPinning)));\n } else {\n onColumnPinningChange?.(fromPinningState(columnPinningState));\n }\n },\n [columnPinning, onColumnPinningChange],\n );\n\n let table = useReactTable<D>({\n data,\n columns,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getPaginationRowModel: clientPagination ? getPaginationRowModel() : undefined,\n getFilteredRowModel: getFilteredRowModel(),\n getFacetedRowModel: clientFaceting ? getFacetedRowModel() : undefined,\n getFacetedUniqueValues: clientFaceting ? getFacetedUniqueValues() : undefined,\n getFacetedMinMaxValues: clientFaceting ? getFacetedMinMaxValues() : undefined,\n state: {\n pagination: clientPagination ? pagination : undefined,\n columnVisibility,\n columnOrder,\n columnPinning,\n sorting: clientSorting ? sorting : undefined,\n columnFilters: clientFilters ? columnFilters : undefined,\n globalFilter: clientSearch ? search : undefined,\n },\n onPaginationChange: clientPagination ? setPagination : undefined,\n onColumnVisibilityChange: handleColumnVisibilityChange,\n onColumnOrderChange: handleColumnOrderChange,\n onColumnPinningChange: handleColumnPinningChange,\n onSortingChange: clientSorting ? setSorting : undefined,\n onColumnFiltersChange: clientFilters ? setColumnFilters : undefined,\n onGlobalFilterChange: clientSearch ? setSearch : undefined,\n columnResizeMode: 'onChange',\n globalFilterFn: fuzzyFilter,\n });\n\n let page =\n clientPagination ?\n table.getState().pagination.pageIndex + 1\n : (controlledPagination?.page ?? 1);\n let pageSize =\n clientPagination ?\n table.getState().pagination.pageSize\n : (controlledPagination?.pageSize ?? DEFAULT_PAGE_SIZE);\n let pageCount = clientPagination ? table.getPageCount() : (controlledPagination?.pageCount ?? 1);\n\n let toggleFilters = useCallback(() => {\n setShowFilters((value) => !value);\n }, []);\n\n let handleRowClick = useCallback((row: Row<D>) => {\n setRowSummaryRow(row);\n setShowRowSummary(true);\n }, []);\n\n let handleCloseRowDialog = useCallback(() => {\n setShowRowSummary(false);\n }, []);\n\n return (\n <div\n className=\"group/table grid w-full grid-cols-[100%] grid-rows-[min-content_min-content_1fr] gap-6 sm:gap-4 sm:data-[show-filters]:grid-cols-[1fr_2fr] md:data-[show-filters]:grid-cols-[1fr_3fr] lg:data-[show-filters]:grid-cols-[1fr_4fr]\"\n data-show-filters={showFilters || undefined}\n >\n <div className=\"flex flex-col gap-2\">\n {hideSearch ? null : (\n <DataTableSearchComponent\n clientSearch={clientSearch}\n search={controlledSearch}\n table={table}\n onSearch={onSearchChange}\n />\n )}\n {hideColumnOrder && hideColumnPinning && hideColumnVisibility && hideFilters ? null : (\n <DataTableMenu\n hideColumnOrder={hideColumnOrder}\n hideColumnPinning={hideColumnPinning}\n hideColumnVisibility={hideColumnVisibility}\n hideFilters={hideFilters}\n table={table}\n toggleFilters={toggleFilters}\n />\n )}\n </div>\n {hideFilters ? null : (\n <DataTableFiltersComponent\n clientFaceting={clientFaceting}\n clientFilters={clientFilters}\n faceting={faceting}\n filters={controlledFilters}\n table={table}\n onFiltering={onFiltersChange}\n />\n )}\n <div className=\"w-full [scrollbar-width:thin] overflow-x-scroll overflow-y-visible\">\n <Table\n style={{\n width: table.getCenterTotalSize(),\n tableLayout: 'fixed',\n }}\n >\n <TableHead>\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id}>\n <SortableContext items={columnOrder} strategy={horizontalListSortingStrategy}>\n {headerGroup.headers.map((header) => (\n <DataTableHeader\n key={header.id}\n clientSorting={clientSorting}\n header={header}\n hideColumnOrder={hideColumnOrder}\n hideColumnResizing={hideColumnResizing}\n hideSorting={hideSorting}\n sorting={controlledSorting}\n onSorting={onSortingChange}\n />\n ))}\n </SortableContext>\n </TableRow>\n ))}\n </TableHead>\n <TableBody>\n {table.getRowModel().rows.map((row) => (\n <DataTableRow\n key={row.id}\n row={row}\n onClick={showRowSummaryOnClick ? handleRowClick : undefined}\n />\n ))}\n </TableBody>\n <TableFoot>\n {table.getFooterGroups().map((footerGroup) => (\n <TableRow key={footerGroup.id}>\n {footerGroup.headers.map((header) => (\n <TableHeader key={header.id}>\n {header.isPlaceholder ? null : (\n flexRender(header.column.columnDef.footer, header.getContext())\n )}\n </TableHeader>\n ))}\n </TableRow>\n ))}\n </TableFoot>\n </Table>\n </div>\n {hidePagination ? null : (\n <DataTablePaginationComponent\n clientPagination={clientPagination}\n page={page}\n pageCount={pageCount}\n pageSize={pageSize}\n table={table}\n onPagination={onPaginationChange}\n />\n )}\n {showRowSummaryOnClick ?\n <Dialog open={showRowSummary} onClose={handleCloseRowDialog}>\n <DialogPanel className=\"flex flex-col gap-4\">\n {rowSummaryRow ?\n <Table className=\"w-full\">\n <TableBody>\n {rowSummaryRow.getVisibleCells().map((cell) => (\n <TableRow key={cell.id}>\n <TableHeader className=\"px-4\">\n {flexRender(cell.column.columnDef.header, {\n table,\n column: cell.column,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions -- needed\n header: {column: cell.column} as Header<any, any>,\n })}\n </TableHeader>\n <TableCell className=\"overflow-visible whitespace-normal\">\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n : null}\n <Container align=\"center\" direction=\"column\">\n <Button className=\"self-center\" onClick={handleCloseRowDialog}>\n Close\n </Button>\n </Container>\n </DialogPanel>\n </Dialog>\n : null}\n </div>\n );\n}\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import {horizontalListSortingStrategy, SortableContext} from '@dnd-kit/sortable';\nimport {\n type ColumnDef,\n type ColumnFiltersState,\n type ColumnOrderState,\n type ColumnPinningState,\n flexRender,\n getCoreRowModel,\n getFacetedMinMaxValues,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n type Header,\n type PaginationState,\n type Row,\n type RowData,\n type SortingState,\n type Updater,\n useReactTable,\n type VisibilityState,\n} from '@tanstack/react-table';\nimport {useCallback, useState} from 'react';\n\nimport {Button} from '../Button.js';\nimport {Container} from '../Container.js';\nimport {Dialog} from '../Dialog.js';\nimport {DialogPanel} from '../DialogPanel.js';\nimport {Table} from '../Table.js';\nimport {TableBody} from '../TableBody.js';\nimport {TableCell} from '../TableCell.js';\nimport {TableFoot} from '../TableFoot.js';\nimport {TableHead} from '../TableHead.js';\nimport {TableHeader} from '../TableHeader.js';\nimport {TableRow} from '../TableRow.js';\nimport {type DataTableColumnOrder} from './DataTableColumnOrder.js';\nimport {type DataTableColumnPinning} from './DataTableColumnPinning.js';\nimport {type DataTableColumnVisibility} from './DataTableColumnVisibility.js';\nimport {type DataTableFaceting} from './DataTableFaceting.js';\nimport {type DataTableFilters} from './DataTableFilters.js';\nimport {type DataTablePagination} from './DataTablePagination.js';\nimport {type DataTableSearch} from './DataTableSearch.js';\nimport {type DataTableSorting} from './DataTableSorting.js';\nimport {\n DataTableFilters as DataTableFiltersComponent,\n DataTableHeader,\n DataTableMenu,\n DataTablePagination as DataTablePaginationComponent,\n DataTableSearch as DataTableSearchComponent,\n DEFAULT_PAGE_SIZE,\n fromPinningState,\n fuzzyFilter,\n} from './internals.js';\nimport {DataTableRow} from './internals/DataTableRow.js';\n\ndeclare module '@tanstack/react-table' {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars -- false positive\n interface ColumnMeta<TData extends RowData, TValue> {\n filterVariant?: 'range' | 'select' | 'text';\n }\n}\n\nexport type DataTableProps<D, C> = {\n data: D[];\n columns: C;\n clientPagination?: boolean | undefined;\n hidePagination?: boolean | undefined;\n pagination?: DataTablePagination | undefined;\n onPaginationChange?:\n | ((\n pagination: Pick<DataTablePagination, 'page'> | Pick<DataTablePagination, 'pageSize'>,\n ) => void)\n | undefined;\n columnVisibility?: DataTableColumnVisibility;\n hideColumnVisibility?: boolean | undefined;\n onColumnVisibilityChange?: ((columnVisibility: DataTableColumnVisibility) => void) | undefined;\n columnOrder?: DataTableColumnOrder;\n hideColumnOrder?: boolean | undefined;\n onColumnOrderChange?: ((columnOrder: DataTableColumnOrder) => void) | undefined;\n columnPinning?: DataTableColumnPinning;\n hideColumnPinning?: boolean | undefined;\n onColumnPinningChange?: ((columnPinning: DataTableColumnPinning) => void) | undefined;\n hideColumnResizing?: boolean | undefined;\n clientSorting?: boolean | undefined;\n sorting?: DataTableSorting | undefined;\n hideSorting?: boolean | undefined;\n onSortingChange?: ((sorting: DataTableSorting) => void) | undefined;\n clientFilters?: boolean | undefined;\n hideFilters?: boolean | undefined;\n filters?: DataTableFilters | undefined;\n onFiltersChange?: ((filters: DataTableFilters) => void) | undefined;\n clientFaceting?: boolean | undefined;\n faceting?: DataTableFaceting | undefined;\n clientSearch?: boolean | undefined;\n hideSearch?: boolean | undefined;\n search?: DataTableSearch | undefined;\n onSearchChange?: ((search: DataTableSearch) => void) | undefined;\n showRowSummaryOnClick?: boolean | undefined;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed so the type parameters are useful\nexport function DataTable<D extends RowData, C extends Array<ColumnDef<D, any>>>({\n data,\n columns,\n clientPagination = false,\n hidePagination = false,\n pagination: controlledPagination,\n onPaginationChange,\n clientSorting = false,\n sorting: controlledSorting,\n hideSorting = false,\n onSortingChange,\n columnVisibility: controlledColumnVisibility,\n hideColumnVisibility = false,\n onColumnVisibilityChange,\n columnOrder: controlledColumnOrder,\n hideColumnOrder = false,\n onColumnOrderChange,\n columnPinning: controlledColumnPinning,\n hideColumnPinning = false,\n onColumnPinningChange,\n hideColumnResizing = false,\n clientFilters = false,\n hideFilters = false,\n filters: controlledFilters,\n onFiltersChange,\n clientFaceting = false,\n faceting,\n clientSearch = false,\n hideSearch = false,\n search: controlledSearch,\n onSearchChange,\n showRowSummaryOnClick = false,\n}: DataTableProps<D, C>) {\n let [pagination, setPagination] = useState<PaginationState>(\n controlledPagination ?\n {\n pageIndex: Math.max(0, controlledPagination.page - 1),\n pageSize: controlledPagination.pageSize,\n }\n : {\n pageIndex: 0,\n pageSize: DEFAULT_PAGE_SIZE,\n },\n );\n let [columnVisibility, setColumnVisibility] = useState(controlledColumnVisibility ?? {});\n let [columnOrder, setColumnOrder] = useState<string[]>(\n controlledColumnOrder ?\n [\n ...controlledColumnOrder,\n ...columns\n .map((column, index) => {\n if (column.id) {\n return column.id;\n }\n\n if ('accessorKey' in column) {\n return String(column.accessorKey);\n }\n\n if (typeof column.header === 'string') {\n return String(column.header);\n }\n\n return String(index);\n })\n .filter((value) => !controlledColumnOrder.includes(value)),\n ]\n : columns.map((column, index) => {\n if (column.id) {\n return column.id;\n }\n\n if ('accessorKey' in column) {\n return String(column.accessorKey);\n }\n\n if (typeof column.header === 'string') {\n return String(column.header);\n }\n\n return String(index);\n }),\n );\n let [columnPinning, setColumnPinning] = useState<ColumnPinningState>(\n controlledColumnPinning ?\n {\n left: Object.entries(controlledColumnPinning)\n .filter(([, pinning]) => pinning === 'left')\n .map(([column]) => column),\n right: Object.entries(controlledColumnPinning)\n .filter(([, pinning]) => pinning === 'right')\n .map(([column]) => column),\n }\n : {left: [], right: []},\n );\n let [sorting, setSorting] = useState<SortingState>([]);\n let [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n let [showFilters, setShowFilters] = useState(false);\n let [search, setSearch] = useState('');\n let [showRowSummary, setShowRowSummary] = useState(false);\n let [rowSummaryRow, setRowSummaryRow] = useState<Row<D> | null>(null);\n\n let handleColumnVisibilityChange = useCallback(\n (columnVisibilityState: Updater<VisibilityState>) => {\n setColumnVisibility(columnVisibilityState);\n\n if (typeof columnVisibilityState === 'function') {\n onColumnVisibilityChange?.(columnVisibilityState(columnVisibility));\n } else {\n onColumnVisibilityChange?.(columnVisibilityState);\n }\n },\n [columnVisibility, onColumnVisibilityChange],\n );\n let handleColumnOrderChange = useCallback(\n (columnOrderState: Updater<ColumnOrderState>) => {\n setColumnOrder(columnOrderState);\n\n if (typeof columnOrderState === 'function') {\n onColumnOrderChange?.(columnOrderState(columnOrder));\n } else {\n onColumnOrderChange?.(columnOrderState);\n }\n },\n [columnOrder, onColumnOrderChange],\n );\n let handleColumnPinningChange = useCallback(\n (columnPinningState: Updater<ColumnPinningState>) => {\n setColumnPinning(columnPinningState);\n\n if (typeof columnPinningState === 'function') {\n onColumnPinningChange?.(fromPinningState(columnPinningState(columnPinning)));\n } else {\n onColumnPinningChange?.(fromPinningState(columnPinningState));\n }\n },\n [columnPinning, onColumnPinningChange],\n );\n\n let table = useReactTable<D>({\n data,\n columns,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getPaginationRowModel: clientPagination ? getPaginationRowModel() : undefined,\n getFilteredRowModel: getFilteredRowModel(),\n getFacetedRowModel: clientFaceting ? getFacetedRowModel() : undefined,\n getFacetedUniqueValues: clientFaceting ? getFacetedUniqueValues() : undefined,\n getFacetedMinMaxValues: clientFaceting ? getFacetedMinMaxValues() : undefined,\n state: {\n pagination: clientPagination ? pagination : undefined,\n columnVisibility,\n columnOrder,\n columnPinning,\n sorting: clientSorting ? sorting : undefined,\n columnFilters: clientFilters ? columnFilters : undefined,\n globalFilter: clientSearch ? search : undefined,\n },\n onPaginationChange: clientPagination ? setPagination : undefined,\n onColumnVisibilityChange: handleColumnVisibilityChange,\n onColumnOrderChange: handleColumnOrderChange,\n onColumnPinningChange: handleColumnPinningChange,\n onSortingChange: clientSorting ? setSorting : undefined,\n onColumnFiltersChange: clientFilters ? setColumnFilters : undefined,\n onGlobalFilterChange: clientSearch ? setSearch : undefined,\n columnResizeMode: 'onChange',\n globalFilterFn: fuzzyFilter,\n getColumnCanGlobalFilter: () => true,\n });\n\n let page =\n clientPagination ?\n table.getState().pagination.pageIndex + 1\n : (controlledPagination?.page ?? 1);\n let pageSize =\n clientPagination ?\n table.getState().pagination.pageSize\n : (controlledPagination?.pageSize ?? DEFAULT_PAGE_SIZE);\n let pageCount = clientPagination ? table.getPageCount() : (controlledPagination?.pageCount ?? 1);\n\n let toggleFilters = useCallback(() => {\n setShowFilters((value) => !value);\n }, []);\n\n let handleRowClick = useCallback((row: Row<D>) => {\n setRowSummaryRow(row);\n setShowRowSummary(true);\n }, []);\n\n let handleCloseRowDialog = useCallback(() => {\n setShowRowSummary(false);\n }, []);\n\n return (\n <div\n className=\"group/table grid w-full grid-cols-[100%] grid-rows-[min-content_min-content_1fr] gap-6 sm:gap-4 sm:data-[show-filters]:grid-cols-[1fr_2fr] md:data-[show-filters]:grid-cols-[1fr_3fr] lg:data-[show-filters]:grid-cols-[1fr_4fr]\"\n data-show-filters={showFilters || undefined}\n >\n <div className=\"flex flex-col gap-2\">\n {hideSearch ? null : (\n <DataTableSearchComponent\n clientSearch={clientSearch}\n search={controlledSearch}\n table={table}\n onSearch={onSearchChange}\n />\n )}\n {hideColumnOrder && hideColumnPinning && hideColumnVisibility && hideFilters ? null : (\n <DataTableMenu\n hideColumnOrder={hideColumnOrder}\n hideColumnPinning={hideColumnPinning}\n hideColumnVisibility={hideColumnVisibility}\n hideFilters={hideFilters}\n table={table}\n toggleFilters={toggleFilters}\n />\n )}\n </div>\n {hideFilters ? null : (\n <DataTableFiltersComponent\n clientFaceting={clientFaceting}\n clientFilters={clientFilters}\n faceting={faceting}\n filters={controlledFilters}\n table={table}\n onFiltering={onFiltersChange}\n />\n )}\n <div className=\"w-full [scrollbar-width:thin] overflow-x-scroll overflow-y-visible\">\n <Table\n style={{\n width: table.getCenterTotalSize(),\n tableLayout: 'fixed',\n }}\n >\n <TableHead>\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id}>\n <SortableContext items={columnOrder} strategy={horizontalListSortingStrategy}>\n {headerGroup.headers.map((header) => (\n <DataTableHeader\n key={header.id}\n clientSorting={clientSorting}\n header={header}\n hideColumnOrder={hideColumnOrder}\n hideColumnResizing={hideColumnResizing}\n hideSorting={hideSorting}\n sorting={controlledSorting}\n onSorting={onSortingChange}\n />\n ))}\n </SortableContext>\n </TableRow>\n ))}\n </TableHead>\n <TableBody>\n {table.getRowModel().rows.map((row) => (\n <DataTableRow\n key={row.id}\n row={row}\n onClick={showRowSummaryOnClick ? handleRowClick : undefined}\n />\n ))}\n </TableBody>\n <TableFoot>\n {table.getFooterGroups().map((footerGroup) => (\n <TableRow key={footerGroup.id}>\n {footerGroup.headers.map((header) => (\n <TableHeader key={header.id}>\n {header.isPlaceholder ? null : (\n flexRender(header.column.columnDef.footer, header.getContext())\n )}\n </TableHeader>\n ))}\n </TableRow>\n ))}\n </TableFoot>\n </Table>\n </div>\n {hidePagination ? null : (\n <DataTablePaginationComponent\n clientPagination={clientPagination}\n page={page}\n pageCount={pageCount}\n pageSize={pageSize}\n table={table}\n onPagination={onPaginationChange}\n />\n )}\n {showRowSummaryOnClick ?\n <Dialog open={showRowSummary} onClose={handleCloseRowDialog}>\n <DialogPanel className=\"flex flex-col gap-4\">\n {rowSummaryRow ?\n <Table className=\"w-full\">\n <TableBody>\n {rowSummaryRow.getVisibleCells().map((cell) => (\n <TableRow key={cell.id}>\n <TableHeader className=\"px-4\">\n {flexRender(cell.column.columnDef.header, {\n table,\n column: cell.column,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions -- needed\n header: {column: cell.column} as Header<any, any>,\n })}\n </TableHeader>\n <TableCell className=\"overflow-visible whitespace-normal\">\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n : null}\n <Container align=\"center\" direction=\"column\">\n <Button className=\"self-center\" onClick={handleCloseRowDialog}>\n Close\n </Button>\n </Container>\n </DialogPanel>\n </Dialog>\n : null}\n </div>\n );\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,10 @@
|
|
|
1
|
-
import { rankItem } from "@tanstack/match-sorter-utils";
|
|
1
|
+
import { rankings, rankItem } from "@tanstack/match-sorter-utils";
|
|
2
2
|
export function fuzzyFilter(row, columnId, value, addMeta) {
|
|
3
|
-
let
|
|
3
|
+
let cellValue = row.getValue(columnId);
|
|
4
|
+
if (cellValue === void 0 || cellValue === null) {
|
|
5
|
+
return false;
|
|
6
|
+
}
|
|
7
|
+
let itemRank = rankItem(cellValue, value, { threshold: rankings.CONTAINS });
|
|
4
8
|
addMeta({ itemRank });
|
|
5
9
|
return itemRank.passed;
|
|
6
10
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../source/components/data-table/internals/fuzzyFilter.ts"],
|
|
4
|
-
"sourcesContent": ["import {rankItem} from '@tanstack/match-sorter-utils';\nimport {type FilterMeta, type Row, type RowData} from '@tanstack/react-table';\n\nexport function fuzzyFilter<TData extends RowData>(\n row: Row<TData>,\n columnId: string,\n value: unknown,\n addMeta: (meta: FilterMeta) => void,\n) {\n let
|
|
5
|
-
"mappings": "AAAA,SAAQ,gBAAe;
|
|
4
|
+
"sourcesContent": ["import {rankings, rankItem} from '@tanstack/match-sorter-utils';\nimport {type FilterMeta, type Row, type RowData} from '@tanstack/react-table';\n\nexport function fuzzyFilter<TData extends RowData>(\n row: Row<TData>,\n columnId: string,\n value: unknown,\n addMeta: (meta: FilterMeta) => void,\n) {\n let cellValue = row.getValue(columnId);\n\n if (cellValue === undefined || cellValue === null) {\n return false;\n }\n\n let itemRank = rankItem(cellValue, value as string, {threshold: rankings.CONTAINS});\n\n addMeta({itemRank});\n\n return itemRank.passed;\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAQ,UAAU,gBAAe;AAG1B,gBAAS,YACd,KACA,UACA,OACA,SACA;AACA,MAAI,YAAY,IAAI,SAAS,QAAQ;AAErC,MAAI,cAAc,UAAa,cAAc,MAAM;AACjD,WAAO;AAAA,EACT;AAEA,MAAI,WAAW,SAAS,WAAW,OAAiB,EAAC,WAAW,SAAS,SAAQ,CAAC;AAElF,UAAQ,EAAC,SAAQ,CAAC;AAElB,SAAO,SAAS;AAClB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jakubmazanec/ui",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.1-next.b17ccbea",
|
|
4
4
|
"description": "React component library.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -22,9 +22,9 @@
|
|
|
22
22
|
"source"
|
|
23
23
|
],
|
|
24
24
|
"scripts": {
|
|
25
|
-
"build": "del-cli build tsconfig.tsbuildinfo && esbuild \"source/**/*\" --platform=node --target=node24.
|
|
25
|
+
"build": "del-cli build tsconfig.tsbuildinfo && esbuild \"source/**/*\" --platform=node --target=node24.21 --outdir=build --sourcemap --loader:.woff2=copy && tsc && storybook build",
|
|
26
26
|
"clean": "del-cli coverage build *.tsbuildinfo",
|
|
27
|
-
"develop": "concurrently \"esbuild \"source/**/*\" --platform=node --target=node24.
|
|
27
|
+
"develop": "concurrently \"esbuild \"source/**/*\" --platform=node --target=node24.21 --outdir=build --sourcemap --loader:.woff2=copy --watch\" \"tsc --watch\" \"storybook dev -p 6006 --no-open\"",
|
|
28
28
|
"document": "del-cli docs && typedoc --options typedoc.config.cjs",
|
|
29
29
|
"format": "prettier . --write --ignore-unknown",
|
|
30
30
|
"lint": "eslint .",
|
|
@@ -33,64 +33,64 @@
|
|
|
33
33
|
"typecheck": "tsc --project tsconfig.typecheck.json"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@conform-to/react": "^1.
|
|
37
|
-
"@conform-to/zod": "^1.
|
|
36
|
+
"@conform-to/react": "^1.21.1",
|
|
37
|
+
"@conform-to/zod": "^1.21.1",
|
|
38
38
|
"@dnd-kit/core": "^6.3.1",
|
|
39
39
|
"@dnd-kit/modifiers": "^9.0.0",
|
|
40
40
|
"@dnd-kit/sortable": "^10.0.0",
|
|
41
41
|
"@dnd-kit/utilities": "^3.2.2",
|
|
42
42
|
"@headlessui/react": "^2.2.10",
|
|
43
43
|
"@heroicons/react": "^2.2.0",
|
|
44
|
-
"@jakubmazanec/ts-utils": "
|
|
44
|
+
"@jakubmazanec/ts-utils": "3.0.20-next.b17ccbea",
|
|
45
45
|
"@tanstack/match-sorter-utils": "^8.19.4",
|
|
46
46
|
"@tanstack/react-table": "^8.21.3",
|
|
47
47
|
"culori": "^4.0.2",
|
|
48
48
|
"lodash": "^4.18.1",
|
|
49
|
-
"tailwind-merge": "^3.
|
|
50
|
-
"zod": "^4.
|
|
49
|
+
"tailwind-merge": "^3.7.0",
|
|
50
|
+
"zod": "^4.6.5"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
|
-
"@chromatic-com/storybook": "^5.
|
|
54
|
-
"@jakubmazanec/eslint-config": "
|
|
55
|
-
"@storybook/addon-docs": "^10.
|
|
56
|
-
"@storybook/addon-links": "^10.
|
|
57
|
-
"@storybook/react-vite": "^10.
|
|
53
|
+
"@chromatic-com/storybook": "^5.4.0",
|
|
54
|
+
"@jakubmazanec/eslint-config": "5.0.1-next.b17ccbea",
|
|
55
|
+
"@storybook/addon-docs": "^10.6.1",
|
|
56
|
+
"@storybook/addon-links": "^10.6.1",
|
|
57
|
+
"@storybook/react-vite": "^10.6.1",
|
|
58
58
|
"@tailwindcss/vite": "^4.3.3",
|
|
59
59
|
"@types/culori": "^4.0.1",
|
|
60
|
-
"@types/lodash": "^4.17.
|
|
61
|
-
"@types/node": "^24.
|
|
62
|
-
"@types/react": "^19.
|
|
63
|
-
"@types/react-dom": "^19.
|
|
64
|
-
"@vitest/browser-playwright": "^4.1.
|
|
65
|
-
"@vitest/coverage-v8": "^4.1.
|
|
66
|
-
"chromatic": "^18.0
|
|
67
|
-
"concurrently": "^10.0.
|
|
60
|
+
"@types/lodash": "^4.17.25",
|
|
61
|
+
"@types/node": "^24.19.1",
|
|
62
|
+
"@types/react": "^19.3.0",
|
|
63
|
+
"@types/react-dom": "^19.3.0",
|
|
64
|
+
"@vitest/browser-playwright": "^4.1.11",
|
|
65
|
+
"@vitest/coverage-v8": "^4.1.11",
|
|
66
|
+
"chromatic": "^18.11.0",
|
|
67
|
+
"concurrently": "^10.0.6",
|
|
68
68
|
"del-cli": "^7.0.0",
|
|
69
|
-
"esbuild": "^0.28.
|
|
70
|
-
"eslint": "^9.39.
|
|
71
|
-
"playwright": "^1.
|
|
72
|
-
"prettier": "^3.9.
|
|
69
|
+
"esbuild": "^0.28.2",
|
|
70
|
+
"eslint": "^9.39.5",
|
|
71
|
+
"playwright": "^1.64.0",
|
|
72
|
+
"prettier": "^3.9.9",
|
|
73
73
|
"prettier-plugin-packagejson": "^2.5.22",
|
|
74
74
|
"prettier-plugin-tailwindcss": "^0.8.1",
|
|
75
|
-
"react": "^19.
|
|
76
|
-
"react-dom": "^19.
|
|
77
|
-
"storybook": "^10.
|
|
75
|
+
"react": "^19.3.0",
|
|
76
|
+
"react-dom": "^19.3.0",
|
|
77
|
+
"storybook": "^10.6.1",
|
|
78
78
|
"tailwindcss": "^4.3.3",
|
|
79
|
-
"tsx": "^4.23.
|
|
79
|
+
"tsx": "^4.23.15",
|
|
80
80
|
"typedoc": "^0.28.20",
|
|
81
|
-
"typedoc-plugin-markdown": "^4.
|
|
82
|
-
"typescript": "^6.0.
|
|
83
|
-
"vitest": "^4.1.
|
|
84
|
-
"vitest-browser-react": "^2.
|
|
81
|
+
"typedoc-plugin-markdown": "^4.13.1",
|
|
82
|
+
"typescript": "^6.0.3",
|
|
83
|
+
"vitest": "^4.1.11",
|
|
84
|
+
"vitest-browser-react": "^2.3.0"
|
|
85
85
|
},
|
|
86
86
|
"peerDependencies": {
|
|
87
87
|
"react": "19.x",
|
|
88
88
|
"react-dom": "19.x",
|
|
89
89
|
"tailwindcss": "4.x"
|
|
90
90
|
},
|
|
91
|
-
"packageManager": "npm@11.
|
|
91
|
+
"packageManager": "npm@11.21.0",
|
|
92
92
|
"engines": {
|
|
93
|
-
"node": "^24.
|
|
94
|
-
"npm": "^11.
|
|
93
|
+
"node": "^24.21.0",
|
|
94
|
+
"npm": "^11.21.0"
|
|
95
95
|
}
|
|
96
96
|
}
|
|
@@ -17,7 +17,7 @@ export type CheckboxFieldProps = PropsWithChildren<
|
|
|
17
17
|
| {
|
|
18
18
|
className?: string | undefined;
|
|
19
19
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
|
|
20
|
-
field?: FieldMetadata<any
|
|
20
|
+
field?: FieldMetadata<any> | undefined;
|
|
21
21
|
name?: undefined;
|
|
22
22
|
}
|
|
23
23
|
| {
|
|
@@ -31,7 +31,7 @@ export type FieldProps<T extends ElementType> = ComponentProps<typeof useFieldTh
|
|
|
31
31
|
className?: string | undefined;
|
|
32
32
|
name?: undefined;
|
|
33
33
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
|
|
34
|
-
field?: FieldMetadata<any
|
|
34
|
+
field?: FieldMetadata<any> | undefined;
|
|
35
35
|
}
|
|
36
36
|
);
|
|
37
37
|
|
|
@@ -36,7 +36,7 @@ export type RadioGroupProps<
|
|
|
36
36
|
value?: V | undefined;
|
|
37
37
|
defaultValue?: V | undefined;
|
|
38
38
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
|
|
39
|
-
field?: FieldMetadata<any
|
|
39
|
+
field?: FieldMetadata<any> | undefined;
|
|
40
40
|
name?: undefined;
|
|
41
41
|
className?: string | undefined;
|
|
42
42
|
onChange?: ((value: V) => void) | undefined;
|
|
@@ -267,6 +267,7 @@ export function DataTable<D extends RowData, C extends Array<ColumnDef<D, any>>>
|
|
|
267
267
|
onGlobalFilterChange: clientSearch ? setSearch : undefined,
|
|
268
268
|
columnResizeMode: 'onChange',
|
|
269
269
|
globalFilterFn: fuzzyFilter,
|
|
270
|
+
getColumnCanGlobalFilter: () => true,
|
|
270
271
|
});
|
|
271
272
|
|
|
272
273
|
let page =
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {rankItem} from '@tanstack/match-sorter-utils';
|
|
1
|
+
import {rankings, rankItem} from '@tanstack/match-sorter-utils';
|
|
2
2
|
import {type FilterMeta, type Row, type RowData} from '@tanstack/react-table';
|
|
3
3
|
|
|
4
4
|
export function fuzzyFilter<TData extends RowData>(
|
|
@@ -7,7 +7,13 @@ export function fuzzyFilter<TData extends RowData>(
|
|
|
7
7
|
value: unknown,
|
|
8
8
|
addMeta: (meta: FilterMeta) => void,
|
|
9
9
|
) {
|
|
10
|
-
let
|
|
10
|
+
let cellValue = row.getValue(columnId);
|
|
11
|
+
|
|
12
|
+
if (cellValue === undefined || cellValue === null) {
|
|
13
|
+
return false;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
let itemRank = rankItem(cellValue, value as string, {threshold: rankings.CONTAINS});
|
|
11
17
|
|
|
12
18
|
addMeta({itemRank});
|
|
13
19
|
|