@jakubmazanec/ui 0.1.0 → 0.2.0-unstable.d6c542d
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/Combobox.js.map +2 -2
- package/build/components/Listbox.js.map +2 -2
- package/build/components/data-table/DataTable.js.map +2 -2
- package/build/components/data-table/internals/DataTableHeader.js +2 -2
- package/build/components/data-table/internals/DataTableHeader.js.map +2 -2
- package/build/components/data-table/internals/DataTableHeaderFilter.js.map +2 -2
- package/build/development/internals/createDisplayColor.js +1 -1
- package/build/development/internals/createDisplayColor.js.map +2 -2
- package/build/development/internals/hexToHsl.js +3 -3
- package/build/development/internals/hexToHsl.js.map +2 -2
- package/package.json +4 -4
- package/source/components/Combobox.tsx +0 -2
- package/source/components/Listbox.tsx +0 -2
- package/source/components/data-table/DataTable.tsx +0 -2
- package/source/components/data-table/internals/DataTableHeader.tsx +2 -2
- package/source/components/data-table/internals/DataTableHeaderFilter.tsx +0 -2
- package/source/development/internals/createDisplayColor.ts +1 -1
- package/source/development/internals/hexToHsl.ts +3 -3
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../source/components/Combobox.tsx"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";
|
|
4
|
+
"sourcesContent": ["import {\n Combobox as HeadlessCombobox,\n ComboboxButton as HeadlessComboboxButton,\n ComboboxInput as HeadlessComboboxInput,\n ComboboxOptions as HeadlessComboboxOptions,\n type ComboboxProps as HeadlessComboboxProps,\n} from '@headlessui/react';\nimport {ChevronDownIcon} from '@heroicons/react/24/outline';\nimport {\n type ChangeEvent,\n Children,\n type ComponentPropsWithoutRef,\n type ElementType,\n Fragment,\n type PropsWithChildren,\n type Ref,\n useCallback,\n useState,\n} from 'react';\n\nimport {\n type ComponentProps,\n type ComponentTheme,\n createComponentTheme,\n} from '../theme/internals.js';\nimport {ComboboxOption} from './ComboboxOption.js';\nimport {Icon} from './Icon.js';\nimport {forwardRef, useFormId} from './internals.js';\nimport {useField} from './useField.js';\nimport {useFieldName} from './useFieldName.js';\n\nexport const useComboboxTheme = createComponentTheme('Combobox', {\n variants: {disabled: [true, false], invalid: [true, false]},\n elements: ['root', 'input', 'icon', 'options'],\n});\n\nconst COMBOBOX_ELEMENT = Fragment;\n\nexport type ComboboxItem<V> = {\n value: V;\n label: string;\n};\n\nexport type ComboboxProps<\n T extends ElementType,\n V extends boolean | number | string,\n> = PropsWithChildren<\n ComponentProps<typeof useComboboxTheme> &\n ComponentPropsWithoutRef<T> &\n (\n | {\n as?: T | undefined;\n value?: V | undefined;\n defaultValue?: V | undefined;\n multiple?: false | undefined;\n items?: Array<ComboboxItem<V>> | undefined;\n placeholder?: string;\n immediate?: boolean | undefined;\n virtual?: boolean | undefined;\n customValue?: boolean | undefined;\n name?: string | undefined;\n className?: string;\n onChange?: (selectedValue: V | undefined) => void;\n }\n | {\n as?: T | undefined;\n value?: V[] | undefined;\n defaultValue?: V[] | undefined;\n multiple: true;\n items?: Array<ComboboxItem<V>> | undefined;\n placeholder?: string;\n immediate?: boolean | undefined;\n virtual?: boolean | undefined;\n customValue?: boolean | undefined;\n name?: string | undefined;\n className?: string;\n onChange?: (selectedValue: V[] | undefined) => void;\n }\n )\n>;\n\nexport const Combobox = forwardRef(\n <T extends ElementType = typeof COMBOBOX_ELEMENT, V extends boolean | number | string = string>(\n {\n disabled = false,\n invalid = false,\n as = COMBOBOX_ELEMENT as unknown as T,\n value,\n defaultValue,\n multiple,\n items,\n placeholder,\n immediate = true,\n virtual = false,\n customValue = false,\n name,\n className,\n onChange,\n children,\n ...rest\n }: ComboboxProps<T, V>,\n ref: Ref<HTMLElement>,\n ) => {\n let theme = useComboboxTheme({disabled, invalid});\n let formId = useFormId();\n let field = useField();\n let fieldName = useFieldName();\n let [query, setQuery] = useState('');\n\n let handleChange = useCallback(\n (selectedValue: V | null) => {\n if (selectedValue) {\n onChange?.(selectedValue as V & V[]);\n }\n\n if (selectedValue === null) {\n onChange?.(undefined);\n }\n },\n [onChange],\n );\n\n let displayValue = useCallback(\n (option: string) => {\n if (items) {\n let selectedItem = items.find((item) => item.value === option);\n\n if (selectedItem) {\n return selectedItem.label;\n }\n }\n\n return option;\n },\n [items],\n );\n\n let handleQueryChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n setQuery(event.target.value);\n }, []);\n\n if (virtual && !items) {\n throw new Error('Combobox requires `items` prop in virtual scrolling mode!');\n }\n\n if (virtual && customValue) {\n throw new Error(\"Combobox doesn't support `customValue` prop in virtual scrolling mode!\");\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 as number | string}`\n .toLowerCase()\n .replace(/\\s+/g, '')\n .includes(query.toLowerCase().replace(/\\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 .replace(/\\s+/g, '')\n .includes(query.toLowerCase().replace(/\\s+/g, ''))\n ) {\n return true;\n }\n\n return false;\n })\n : children;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n let props: HeadlessComboboxProps<any, any, any> = {\n as,\n ref,\n name: field?.name ?? fieldName ?? name,\n value: value ?? null,\n defaultValue,\n multiple,\n disabled,\n immediate,\n form: formId,\n onChange: handleChange,\n ...rest,\n };\n\n if (virtual) {\n props.virtual = {\n options: filteredItems?.map((item) => item.value) ?? [],\n };\n }\n\n return (\n <HeadlessCombobox {...props}>\n <div className={theme.root('relative', className)} data-component=\"combobox\">\n <HeadlessComboboxInput\n className={theme.input(null, className)}\n size={1} // so the input default width without styling is small\n displayValue={displayValue}\n onChange={handleQueryChange}\n />\n <HeadlessComboboxButton className={theme.icon('absolute')}>\n <Icon>\n <ChevronDownIcon />\n </Icon>\n </HeadlessComboboxButton>\n </div>\n\n {virtual && filteredItems ?\n <HeadlessComboboxOptions className={theme.options()} anchor=\"bottom start\">\n {({option}: {option: V}) => (\n <ComboboxOption value={option}>\n {items?.find((item) => item.value === option)?.label}\n </ComboboxOption>\n )}\n </HeadlessComboboxOptions>\n : null}\n\n {!virtual && filteredItems ?\n <HeadlessComboboxOptions className={theme.options()} anchor=\"bottom start\">\n {customValue && query.length ?\n <ComboboxOption key={query} value={query}>\n {query}\n </ComboboxOption>\n : null}\n {filteredItems.map((item) => (\n <ComboboxOption key={String(item.value)} value={item.value}>\n {item.label}\n </ComboboxOption>\n ))}\n </HeadlessComboboxOptions>\n : null}\n\n {!filteredItems && Array.isArray(filteredChildren) ?\n <HeadlessComboboxOptions className={theme.options()} anchor=\"bottom start\">\n {customValue && query.length ?\n <ComboboxOption value={query}>{query}</ComboboxOption>\n : null}\n {filteredChildren}\n </HeadlessComboboxOptions>\n : null}\n </HeadlessCombobox>\n );\n },\n);\n\nexport const comboboxTheme: ComponentTheme<typeof useComboboxTheme> = {\n classNames: {\n root: 'w-full min-w-32',\n input:\n 'flex w-full 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 icon: 'text-neutral-500 size-5 top-2 right-2 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(--input-width)] [--anchor-gap:theme(spacing.1)] [--anchor-padding:theme(spacing.2)] [scrollbar-width:thin] empty:invisible transition-colors',\n },\n variants: {\n disabled: {\n true: {\n root: 'border-neutral-100 text-neutral-200 cursor-not-allowed',\n input: '',\n icon: 'text-neutral-200',\n options: 'border-neutral-100',\n },\n false: {\n root: '',\n input: '',\n icon: '',\n options: '',\n },\n },\n invalid: {\n true: {\n root: '',\n input: '',\n icon: '',\n options: '',\n },\n false: {\n root: '',\n input: '',\n icon: '',\n options: '',\n },\n },\n },\n};\n"],
|
|
5
|
+
"mappings": ";AA4MQ,SACE,KADF;AA5MR;AAAA,EACE,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,OAEd;AACP,SAAQ,uBAAsB;AAC9B;AAAA,EAEE;AAAA,EAGA;AAAA,EAGA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EAGE;AAAA,OACK;AACP,SAAQ,sBAAqB;AAC7B,SAAQ,YAAW;AACnB,SAAQ,YAAY,iBAAgB;AACpC,SAAQ,gBAAe;AACvB,SAAQ,oBAAmB;AAEpB,aAAM,mBAAmB,qBAAqB,YAAY;AAAA,EAC/D,UAAU,EAAC,UAAU,CAAC,MAAM,KAAK,GAAG,SAAS,CAAC,MAAM,KAAK,EAAC;AAAA,EAC1D,UAAU,CAAC,QAAQ,SAAS,QAAQ,SAAS;AAC/C,CAAC;AAED,MAAM,mBAAmB;AA6ClB,aAAM,WAAW;AAAA,EACtB,CACE;AAAA,IACE,WAAW;AAAA,IACX,UAAU;AAAA,IACV,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,QAAI,QAAQ,iBAAiB,EAAC,UAAU,QAAO,CAAC;AAChD,QAAI,SAAS,UAAU;AACvB,QAAI,QAAQ,SAAS;AACrB,QAAI,YAAY,aAAa;AAC7B,QAAI,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AAEnC,QAAI,eAAe;AAAA,MACjB,CAAC,kBAA4B;AAC3B,YAAI,eAAe;AACjB,qBAAW,aAAwB;AAAA,QACrC;AAEA,YAAI,kBAAkB,MAAM;AAC1B,qBAAW,MAAS;AAAA,QACtB;AAAA,MACF;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AAEA,QAAI,eAAe;AAAA,MACjB,CAAC,WAAmB;AAClB,YAAI,OAAO;AACT,cAAI,eAAe,MAAM,KAAK,CAAC,SAAS,KAAK,UAAU,MAAM;AAE7D,cAAI,cAAc;AAChB,mBAAO,aAAa;AAAA,UACtB;AAAA,QACF;AAEA,eAAO;AAAA,MACT;AAAA,MACA,CAAC,KAAK;AAAA,IACR;AAEA,QAAI,oBAAoB,YAAY,CAAC,UAAyC;AAC5E,eAAS,MAAM,OAAO,KAAK;AAAA,IAC7B,GAAG,CAAC,CAAC;AAEL,QAAI,WAAW,CAAC,OAAO;AACrB,YAAM,IAAI,MAAM,2DAA2D;AAAA,IAC7E;AAEA,QAAI,WAAW,aAAa;AAC1B,YAAM,IAAI,MAAM,wEAAwE;AAAA,IAC1F;AAEA,QAAI,SAAS,UAAU;AACrB,YAAM,IAAI,MAAM,yDAAyD;AAAA,IAC3E;AAEA,QAAI,gBACF,QACE,OAAO;AAAA,MAAO,CAAC,SACb,GAAG,KAAK,KAAwB,GAC7B,YAAY,EACZ,QAAQ,QAAQ,EAAE,EAClB,SAAS,MAAM,YAAY,EAAE,QAAQ,QAAQ,EAAE,CAAC;AAAA,IACrD,IACA;AACJ,QAAI,mBACF,QACE,SAAS,QAAQ,QAAQ,EAAE,OAAO,CAAC,UAAU;AAC3C,UACE,OAAO,UAAU,YACjB,WAAW,SACX,OAAO,MAAM,UAAU,YACvB,OAAQ,MAAM,MAA0C,aAAa,YACpE,MAAM,MAA6B,SACjC,YAAY,EACZ,QAAQ,QAAQ,EAAE,EAClB,SAAS,MAAM,YAAY,EAAE,QAAQ,QAAQ,EAAE,CAAC,GACnD;AACA,eAAO;AAAA,MACT;AAEA,aAAO;AAAA,IACT,CAAC,IACD;AAEJ,QAAI,QAA8C;AAAA,MAChD;AAAA,MACA;AAAA,MACA,MAAM,OAAO,QAAQ,aAAa;AAAA,MAClC,OAAO,SAAS;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,UAAU;AAAA,MACV,GAAG;AAAA,IACL;AAEA,QAAI,SAAS;AACX,YAAM,UAAU;AAAA,QACd,SAAS,eAAe,IAAI,CAAC,SAAS,KAAK,KAAK,KAAK,CAAC;AAAA,MACxD;AAAA,IACF;AAEA,WACE,qBAAC,oBAAkB,GAAG,OACpB;AAAA,2BAAC,SAAI,WAAW,MAAM,KAAK,YAAY,SAAS,GAAG,kBAAe,YAChE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,MAAM,MAAM,MAAM,SAAS;AAAA,YACtC,MAAM;AAAA,YACN;AAAA,YACA,UAAU;AAAA;AAAA,QACZ;AAAA,QACA,oBAAC,0BAAuB,WAAW,MAAM,KAAK,UAAU,GACtD,8BAAC,QACC,8BAAC,mBAAgB,GACnB,GACF;AAAA,SACF;AAAA,MAEC,WAAW,gBACV,oBAAC,2BAAwB,WAAW,MAAM,QAAQ,GAAG,QAAO,gBACzD,WAAC,EAAC,OAAM,MACP,oBAAC,kBAAe,OAAO,QACpB,iBAAO,KAAK,CAAC,SAAS,KAAK,UAAU,MAAM,GAAG,OACjD,GAEJ,IACA;AAAA,MAED,CAAC,WAAW,gBACX,qBAAC,2BAAwB,WAAW,MAAM,QAAQ,GAAG,QAAO,gBACzD;AAAA,uBAAe,MAAM,SACpB,oBAAC,kBAA2B,OAAO,OAChC,mBADkB,KAErB,IACA;AAAA,QACD,cAAc,IAAI,CAAC,SAClB,oBAAC,kBAAwC,OAAO,KAAK,OAClD,eAAK,SADa,OAAO,KAAK,KAAK,CAEtC,CACD;AAAA,SACH,IACA;AAAA,MAED,CAAC,iBAAiB,MAAM,QAAQ,gBAAgB,IAC/C,qBAAC,2BAAwB,WAAW,MAAM,QAAQ,GAAG,QAAO,gBACzD;AAAA,uBAAe,MAAM,SACpB,oBAAC,kBAAe,OAAO,OAAQ,iBAAM,IACrC;AAAA,QACD;AAAA,SACH,IACA;AAAA,OACJ;AAAA,EAEJ;AACF;AAEO,aAAM,gBAAyD;AAAA,EACpE,YAAY;AAAA,IACV,MAAM;AAAA,IACN,OACE;AAAA,IACF,MAAM;AAAA,IACN,SACE;AAAA,EACJ;AAAA,EACA,UAAU;AAAA,IACR,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../source/components/Listbox.tsx"],
|
|
4
|
-
"sourcesContent": ["// TODO: fix somehow\n/* eslint-disable complexity -- TODO */\nimport {\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 type Ref,\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 {Icon} from './Icon.js';\nimport {Input} from './Input.js';\nimport {forwardRef, 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> = PropsWithChildren<\n ComponentProps<typeof useListboxTheme> &\n ComponentPropsWithoutRef<T> &\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 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>;\n\nexport const Listbox = forwardRef(\n <T extends ElementType = typeof LISTBOX_ELEMENT, 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 children,\n ...rest\n }: ListboxProps<T, V>,\n ref: Ref<HTMLElement>,\n ) => {\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<HTMLElement>(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 .replace(/\\s+/g, '')\n .includes(query.toLowerCase().replace(/\\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 .replace(/\\s+/g, '')\n .includes(query.toLowerCase().replace(/\\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 ?? null,\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-multiple={multiple ? true : null}\n data-component=\"listbox\"\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(\n (child.props as Record<string, unknown>).children as ReactNode,\n );\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 (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 className={theme.options()}\n anchor=\"bottom start\"\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);\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 type Ref,\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 {Icon} from './Icon.js';\nimport {Input} from './Input.js';\nimport {forwardRef, 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> = PropsWithChildren<\n ComponentProps<typeof useListboxTheme> &\n ComponentPropsWithoutRef<T> &\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 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>;\n\nexport const Listbox = forwardRef(\n <T extends ElementType = typeof LISTBOX_ELEMENT, 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 children,\n ...rest\n }: ListboxProps<T, V>,\n ref: Ref<HTMLElement>,\n ) => {\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<HTMLElement>(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 .replace(/\\s+/g, '')\n .includes(query.toLowerCase().replace(/\\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 .replace(/\\s+/g, '')\n .includes(query.toLowerCase().replace(/\\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 ?? null,\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-multiple={multiple ? true : null}\n data-component=\"listbox\"\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(\n (child.props as Record<string, unknown>).children as ReactNode,\n );\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 (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 className={theme.options()}\n anchor=\"bottom start\"\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);\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
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../source/components/data-table/DataTable.tsx"],
|
|
4
|
-
"sourcesContent": ["// TODO: fix\n/* eslint-disable complexity -- TODO */\nimport {\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 id={id}\n collisionDetection={closestCenter}\n modifiers={[restrictToHorizontalAxis]}\n sensors={sensors}\n onDragEnd={handleDragEnd}\n >\n <DataTableSearchComponent\n table={table}\n clientSearch={clientSearch}\n search={controlledSearch}\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 table={table}\n header={header}\n clientSorting={clientSorting}\n sorting={controlledSorting}\n clientFilters={clientFilters}\n filters={controlledFilters}\n clientFaceting={clientFaceting}\n faceting={faceting}\n onSorting={onSortingChange}\n onFiltering={onFiltersChange}\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 table={table}\n page={page}\n pageSize={pageSize}\n pageCount={pageCount}\n clientPagination={clientPagination}\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\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 id={id}\n collisionDetection={closestCenter}\n modifiers={[restrictToHorizontalAxis]}\n sensors={sensors}\n onDragEnd={handleDragEnd}\n >\n <DataTableSearchComponent\n table={table}\n clientSearch={clientSearch}\n search={controlledSearch}\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 table={table}\n header={header}\n clientSorting={clientSorting}\n sorting={controlledSorting}\n clientFilters={clientFilters}\n filters={controlledFilters}\n clientFaceting={clientFaceting}\n faceting={faceting}\n onSorting={onSortingChange}\n onFiltering={onFiltersChange}\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 table={table}\n page={page}\n pageSize={pageSize}\n pageCount={pageCount}\n clientPagination={clientPagination}\n onPagination={onPaginationChange}\n />\n </DndContext>\n );\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -44,7 +44,7 @@ export function DataTableHeader({
|
|
|
44
44
|
if (!header.isPlaceholder) {
|
|
45
45
|
contentElement = flexRender(header.column.columnDef.header, header.getContext());
|
|
46
46
|
}
|
|
47
|
-
let sortElement
|
|
47
|
+
let sortElement;
|
|
48
48
|
if (!sorting) {
|
|
49
49
|
sortElement = /* @__PURE__ */ jsx(Icon, { name: "ArrowsUpDown", size: "small", variant: "light" });
|
|
50
50
|
} else if (sorting.direction === "ascending") {
|
|
@@ -61,7 +61,7 @@ export function DataTableHeader({
|
|
|
61
61
|
title = "Clear sort";
|
|
62
62
|
}
|
|
63
63
|
let handleSortClick = useCallback(() => {
|
|
64
|
-
let newSorting
|
|
64
|
+
let newSorting;
|
|
65
65
|
if (!sorting) {
|
|
66
66
|
newSorting = {
|
|
67
67
|
column: header.column.id,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../source/components/data-table/internals/DataTableHeader.tsx"],
|
|
4
|
-
"sourcesContent": ["import {useSortable} from '@dnd-kit/sortable';\nimport {CSS} from '@dnd-kit/utilities';\nimport {flexRender, type Header, type Table} from '@tanstack/react-table';\nimport {type CSSProperties, useCallback} from 'react';\n\nimport {Button} from '../../Button.js';\nimport {Container} from '../../Container.js';\nimport {Field} from '../../Field.js';\nimport {Icon} from '../../Icon.js';\nimport {Popover} from '../../Popover.js';\nimport {PopoverButton} from '../../PopoverButton.js';\nimport {PopoverPanel} from '../../PopoverPanel.js';\nimport {TableHeader} from '../../TableHeader.js';\nimport {Text} from '../../Text.js';\nimport {type DataTableProps} from '../DataTable.js';\nimport {DataTableHeaderColumnCheckbox} from './DataTableHeaderColumnCheckbox.js';\nimport {DataTableHeaderFilter} from './DataTableHeaderFilter.js';\nimport {getCommonPinningClasses} from './getCommonPinningClasses.js';\nimport {getCommonPinningStyles} from './getCommonPinningStyles.js';\nimport {normalizeSorting} from './normalizeSorting.js';\n\nexport type DataTableHeaderProps = {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n table: Table<any>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n header: Header<any, any>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n clientSorting: DataTableProps<any, any>['clientSorting'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n sorting: DataTableProps<any, any>['sorting'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n onSorting: DataTableProps<any, any>['onSortingChange'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n clientFilters: DataTableProps<any, any>['clientFilters'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n filters: DataTableProps<any, any>['filters'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n onFiltering: DataTableProps<any, any>['onFiltersChange'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n clientFaceting: DataTableProps<any, any>['clientFaceting'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n faceting: DataTableProps<any, any>['faceting'];\n};\n\nexport function DataTableHeader({\n table,\n header,\n clientSorting,\n sorting: controlledSorting,\n onSorting,\n clientFilters,\n filters: controlledFilters,\n onFiltering,\n clientFaceting,\n faceting,\n}: DataTableHeaderProps) {\n let {attributes, isDragging, listeners, setNodeRef, transform} = useSortable({\n id: header.column.id,\n });\n\n let sorting =\n clientSorting ? normalizeSorting(header) : normalizeSorting(header, controlledSorting);\n\n let style: CSSProperties = {\n transform: CSS.Translate.toString(transform),\n transition: 'width transform 0.2s ease-in-out',\n zIndex: isDragging ? 20 : undefined,\n ...getCommonPinningStyles(header.column),\n };\n\n let contentElement = null;\n\n if (!header.isPlaceholder) {\n contentElement = flexRender(header.column.columnDef.header, header.getContext());\n }\n\n let sortElement
|
|
5
|
-
"mappings": ";AA+EkB,cA4EN,YA5EM;AA/ElB,SAAQ,mBAAkB;AAC1B,SAAQ,WAAU;AAClB,SAAQ,kBAA0C;AAClD,SAA4B,mBAAkB;AAE9C,SAAQ,cAAa;AACrB,SAAQ,iBAAgB;AACxB,SAAQ,aAAY;AACpB,SAAQ,YAAW;AACnB,SAAQ,eAAc;AACtB,SAAQ,qBAAoB;AAC5B,SAAQ,oBAAmB;AAC3B,SAAQ,mBAAkB;AAC1B,SAAQ,YAAW;AAEnB,SAAQ,qCAAoC;AAC5C,SAAQ,6BAA4B;AACpC,SAAQ,+BAA8B;AACtC,SAAQ,8BAA6B;AACrC,SAAQ,wBAAuB;AAyBxB,gBAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,MAAI,EAAC,YAAY,YAAY,WAAW,YAAY,UAAS,IAAI,YAAY;AAAA,IAC3E,IAAI,OAAO,OAAO;AAAA,EACpB,CAAC;AAED,MAAI,UACF,gBAAgB,iBAAiB,MAAM,IAAI,iBAAiB,QAAQ,iBAAiB;AAEvF,MAAI,QAAuB;AAAA,IACzB,WAAW,IAAI,UAAU,SAAS,SAAS;AAAA,IAC3C,YAAY;AAAA,IACZ,QAAQ,aAAa,KAAK;AAAA,IAC1B,GAAG,uBAAuB,OAAO,MAAM;AAAA,EACzC;AAEA,MAAI,iBAAiB;AAErB,MAAI,CAAC,OAAO,eAAe;AACzB,qBAAiB,WAAW,OAAO,OAAO,UAAU,QAAQ,OAAO,WAAW,CAAC;AAAA,EACjF;AAEA,MAAI
|
|
4
|
+
"sourcesContent": ["import {useSortable} from '@dnd-kit/sortable';\nimport {CSS} from '@dnd-kit/utilities';\nimport {flexRender, type Header, type Table} from '@tanstack/react-table';\nimport {type CSSProperties, useCallback} from 'react';\n\nimport {Button} from '../../Button.js';\nimport {Container} from '../../Container.js';\nimport {Field} from '../../Field.js';\nimport {Icon} from '../../Icon.js';\nimport {Popover} from '../../Popover.js';\nimport {PopoverButton} from '../../PopoverButton.js';\nimport {PopoverPanel} from '../../PopoverPanel.js';\nimport {TableHeader} from '../../TableHeader.js';\nimport {Text} from '../../Text.js';\nimport {type DataTableProps} from '../DataTable.js';\nimport {DataTableHeaderColumnCheckbox} from './DataTableHeaderColumnCheckbox.js';\nimport {DataTableHeaderFilter} from './DataTableHeaderFilter.js';\nimport {getCommonPinningClasses} from './getCommonPinningClasses.js';\nimport {getCommonPinningStyles} from './getCommonPinningStyles.js';\nimport {normalizeSorting} from './normalizeSorting.js';\n\nexport type DataTableHeaderProps = {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n table: Table<any>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n header: Header<any, any>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n clientSorting: DataTableProps<any, any>['clientSorting'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n sorting: DataTableProps<any, any>['sorting'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n onSorting: DataTableProps<any, any>['onSortingChange'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n clientFilters: DataTableProps<any, any>['clientFilters'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n filters: DataTableProps<any, any>['filters'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n onFiltering: DataTableProps<any, any>['onFiltersChange'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n clientFaceting: DataTableProps<any, any>['clientFaceting'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n faceting: DataTableProps<any, any>['faceting'];\n};\n\nexport function DataTableHeader({\n table,\n header,\n clientSorting,\n sorting: controlledSorting,\n onSorting,\n clientFilters,\n filters: controlledFilters,\n onFiltering,\n clientFaceting,\n faceting,\n}: DataTableHeaderProps) {\n let {attributes, isDragging, listeners, setNodeRef, transform} = useSortable({\n id: header.column.id,\n });\n\n let sorting =\n clientSorting ? normalizeSorting(header) : normalizeSorting(header, controlledSorting);\n\n let style: CSSProperties = {\n transform: CSS.Translate.toString(transform),\n transition: 'width transform 0.2s ease-in-out',\n zIndex: isDragging ? 20 : undefined,\n ...getCommonPinningStyles(header.column),\n };\n\n let contentElement = null;\n\n if (!header.isPlaceholder) {\n contentElement = flexRender(header.column.columnDef.header, header.getContext());\n }\n\n let sortElement;\n\n if (!sorting) {\n sortElement = <Icon name=\"ArrowsUpDown\" size=\"small\" variant=\"light\" />;\n } else if (sorting.direction === 'ascending') {\n sortElement = <Icon name=\"ArrowUp\" size=\"small\" />;\n } else {\n sortElement = <Icon name=\"ArrowDown\" size=\"small\" />;\n }\n\n let title: string | undefined;\n\n if (!sorting) {\n title = 'Sort ascending';\n } else if (sorting.direction === 'ascending') {\n title = 'Sort descending';\n } else {\n title = 'Clear sort';\n }\n\n let handleSortClick = useCallback(() => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n let newSorting: DataTableProps<any, any>['sorting'];\n\n if (!sorting) {\n newSorting = {\n column: header.column.id,\n direction: 'ascending',\n };\n } else if (sorting.direction === 'ascending') {\n newSorting = {\n column: header.column.id,\n direction: 'descending',\n };\n } else {\n newSorting = null;\n }\n\n if (clientSorting) {\n if (!sorting) {\n header.column.toggleSorting(false);\n } else if (sorting.direction === 'ascending') {\n header.column.toggleSorting(true);\n } else {\n header.column.clearSorting();\n }\n }\n\n if (onSorting) {\n onSorting(newSorting);\n }\n }, [sorting, clientSorting, onSorting, header.column]);\n\n let handleWidthReset = useCallback(() => {\n header.column.resetSize();\n }, [header.column]);\n\n let handlePinLeftClick = useCallback(() => {\n header.column.pin('left');\n }, [header.column]);\n\n let handlePinRightClick = useCallback(() => {\n header.column.pin('right');\n }, [header.column]);\n\n let handleUnpinClick = useCallback(() => {\n header.column.pin(false);\n }, [header.column]);\n\n return (\n <TableHeader\n ref={setNodeRef}\n colSpan={header.colSpan}\n className={getCommonPinningClasses(header.column)}\n style={style}\n >\n <span className=\"relative mr-6 block overflow-hidden\">\n <Container spacing=\"extra-small\" justify=\"spaced\" align=\"center\">\n {header.column.getCanSort() ?\n <Button\n variant=\"text\"\n size=\"small\"\n className=\"mr-auto inline-flex cursor-move\"\n title={title}\n onClick={handleSortClick}\n {...attributes}\n {...listeners}\n >\n {sortElement}\n {contentElement}\n </Button>\n : null}\n <Popover>\n <PopoverButton>\n <Button variant=\"text\" size=\"small\" aria-label=\"Settings\">\n <Icon size=\"small\" name=\"Cog6Tooth\" />\n </Button>\n </PopoverButton>\n <PopoverPanel anchor=\"right start\">\n <Container spacing=\"large\" direction=\"column\">\n {header.column.getCanPin() ?\n <Container spacing=\"small\" direction=\"row\">\n <Text>Pin column</Text>\n\n <Field>\n <Container spacing=\"small\">\n {header.column.getIsPinned() === 'left' ? null : (\n <Button\n variant=\"outline\"\n aria-label=\"Pin to left\"\n onClick={handlePinLeftClick}\n >\n <Icon size=\"large\" name=\"ArrowLeftEndOnRectangle\" />\n </Button>\n )}\n {header.column.getIsPinned() ?\n <Button variant=\"outline\" aria-label=\"Unpin\" onClick={handleUnpinClick}>\n <Icon size=\"large\" name=\"XMark\" />\n </Button>\n : null}\n {header.column.getIsPinned() === 'right' ? null : (\n <Button\n variant=\"outline\"\n aria-label=\"Pin to right\"\n onClick={handlePinRightClick}\n >\n <Icon size=\"large\" name=\"ArrowRightEndOnRectangle\" />\n </Button>\n )}\n </Container>\n </Field>\n </Container>\n : null}\n\n {header.column.getCanFilter() ?\n <Container spacing=\"small\" direction=\"column\">\n <Text>Filter</Text>\n\n <Field>\n <DataTableHeaderFilter\n table={table}\n column={header.column}\n clientFilters={clientFilters}\n filters={controlledFilters}\n clientFaceting={clientFaceting}\n faceting={faceting}\n onFiltering={onFiltering}\n />\n </Field>\n </Container>\n : null}\n\n <Container spacing=\"small\" direction=\"column\">\n <Text>Visible columns</Text>\n\n {table.getAllLeafColumns().map((column) => (\n <DataTableHeaderColumnCheckbox key={column.id} column={column} table={table} />\n ))}\n </Container>\n </Container>\n </PopoverPanel>\n </Popover>\n </Container>\n </span>\n <Button\n variant=\"invisible\"\n size=\"small\"\n aria-label=\"Resize\"\n className=\"absolute right-1 top-2.5 cursor-col-resize\"\n onDoubleClick={handleWidthReset}\n onMouseDown={header.getResizeHandler()}\n onTouchStart={header.getResizeHandler()}\n >\n <Icon size=\"small\" name=\"ArrowsRightLeft\" />\n </Button>\n </TableHeader>\n );\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../source/components/data-table/internals/DataTableHeaderFilter.tsx"],
|
|
4
|
-
"sourcesContent": ["// TODO: fix somehow\n/* eslint-disable complexity -- TODO */\nimport {type Column, type Table} from '@tanstack/react-table';\nimport {type ChangeEvent, type FormEvent, useCallback, useMemo, useState} from 'react';\n\nimport {Button} from '../../Button.js';\nimport {Combobox} from '../../Combobox.js';\nimport {Container} from '../../Container.js';\nimport {Form} from '../../Form.js';\nimport {Icon} from '../../Icon.js';\nimport {Input} from '../../Input.js';\nimport {Listbox} from '../../Listbox.js';\nimport {type DataTableProps} from '../DataTable.js';\nimport {addFilter} from './addFilter.js';\nimport {normalizeFilter} from './normalizeFilter.js';\nimport {normalizeFilters} from './normalizeFilters.js';\nimport {removeFilter} from './removeFilter.js';\n\nexport type DataTableHeaderFilterProps = {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n table: Table<any>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n column: Column<any>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n clientFilters: DataTableProps<any, any>['clientFilters'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n filters: DataTableProps<any, any>['filters'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n onFiltering: DataTableProps<any, any>['onFiltersChange'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n clientFaceting: DataTableProps<any, any>['clientFaceting'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n faceting: DataTableProps<any, any>['faceting'];\n};\n\nexport function DataTableHeaderFilter({\n table,\n column,\n clientFilters,\n filters: controlledFilters,\n onFiltering,\n clientFaceting,\n faceting,\n}: DataTableHeaderFilterProps) {\n let {filterVariant} = column.columnDef.meta ?? {};\n\n let currentFilters =\n clientFilters ? normalizeFilters(table) : normalizeFilters(table, controlledFilters);\n let currentFilter =\n clientFilters ? normalizeFilter(column) : normalizeFilter(column, controlledFilters);\n\n let currentMin =\n filterVariant === 'range' ?\n ((currentFilter as [number?, number?] | undefined)?.[0] ?? undefined)\n : undefined;\n let currentMax =\n filterVariant === 'range' ?\n ((currentFilter as [number?, number?] | undefined)?.[1] ?? undefined)\n : undefined;\n\n let [filter, setFilter] = useState<string | undefined>(\n typeof currentFilter === 'string' ? currentFilter : undefined,\n );\n let [min, setMin] = useState(currentMin);\n let [max, setMax] = useState(currentMax);\n\n let facetingValues = useMemo(() => {\n if (!clientFaceting) {\n return faceting?.[column.id]?.values ?? [];\n }\n\n if (filterVariant === 'range') {\n return [];\n }\n\n return [...column.getFacetedUniqueValues().keys()].sort().slice(0, 5000) as unknown[];\n }, [clientFaceting, column, faceting, filterVariant]);\n\n let facetingMin =\n clientFaceting ?\n Number(column.getFacetedMinMaxValues()?.[0] ?? null)\n : (faceting?.[column.id]?.min ?? null);\n let facetingMax =\n clientFaceting ?\n Number(column.getFacetedMinMaxValues()?.[1] ?? null)\n : (faceting?.[column.id]?.max ?? null);\n\n let handleMinRangeChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n setMin(event.target.value ? Number(event.target.value) : undefined);\n }, []);\n\n let handleMaxRangeChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n setMax(event.target.value ? Number(event.target.value) : undefined);\n }, []);\n\n let handleSelectFilterChange = useCallback(\n (value: string) => {\n if (clientFilters) {\n column.setFilterValue(value);\n }\n\n if (onFiltering) {\n onFiltering(addFilter(currentFilters, column.id, value));\n }\n },\n [clientFilters, column, currentFilters, onFiltering],\n );\n\n let handleTextFilterChange = useCallback(\n (value: string | undefined) => {\n if (value) {\n if (clientFilters) {\n column.setFilterValue(value);\n }\n\n if (onFiltering) {\n onFiltering(addFilter(currentFilters, column.id, value));\n }\n } else {\n if (clientFilters) {\n column.setFilterValue(undefined);\n }\n\n if (onFiltering) {\n onFiltering(removeFilter(currentFilters, column.id));\n }\n }\n },\n [clientFilters, column, currentFilters, onFiltering],\n );\n\n let handleFilterChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n if (event.target.value) {\n setFilter(event.target.value);\n } else {\n setFilter(undefined);\n }\n }, []);\n\n let handleFilterClick = useCallback(() => {\n if (filterVariant === 'range') {\n if (!min && !max) {\n if (clientFilters) {\n column.setFilterValue(undefined);\n }\n\n if (onFiltering) {\n onFiltering(removeFilter(currentFilters, column.id));\n }\n } else {\n if (clientFilters) {\n column.setFilterValue([min, max]);\n }\n\n if (onFiltering) {\n onFiltering(addFilter(currentFilters, column.id, [min, max]));\n }\n }\n }\n\n if ((filterVariant === 'text' && !facetingValues.length) || !filterVariant) {\n if (filter) {\n if (clientFilters) {\n column.setFilterValue(filter);\n }\n\n if (onFiltering) {\n onFiltering(addFilter(currentFilters, column.id, filter));\n }\n } else {\n if (clientFilters) {\n column.setFilterValue(undefined);\n }\n\n if (onFiltering) {\n onFiltering(removeFilter(currentFilters, column.id));\n }\n }\n }\n }, [\n clientFilters,\n column,\n currentFilters,\n facetingValues.length,\n filter,\n filterVariant,\n max,\n min,\n onFiltering,\n ]);\n\n let handleFilterSubmit = useCallback(\n (event: FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n\n if (filterVariant === 'range') {\n if (!min && !max) {\n if (clientFilters) {\n column.setFilterValue(undefined);\n }\n\n if (onFiltering) {\n onFiltering(removeFilter(currentFilters, column.id));\n }\n } else {\n if (clientFilters) {\n column.setFilterValue([min, max]);\n }\n\n if (onFiltering) {\n onFiltering(addFilter(currentFilters, column.id, [min, max]));\n }\n }\n }\n\n if ((filterVariant === 'text' && !facetingValues.length) || !filterVariant) {\n if (filter) {\n if (clientFilters) {\n column.setFilterValue(filter);\n }\n\n if (onFiltering) {\n onFiltering(addFilter(currentFilters, column.id, filter));\n }\n } else {\n if (clientFilters) {\n column.setFilterValue(undefined);\n }\n\n if (onFiltering) {\n onFiltering(removeFilter(currentFilters, column.id));\n }\n }\n }\n },\n [\n clientFilters,\n column,\n currentFilters,\n facetingValues.length,\n filter,\n filterVariant,\n max,\n min,\n onFiltering,\n ],\n );\n\n let handleResetClick = useCallback(() => {\n setFilter(undefined);\n setMin(undefined);\n setMax(undefined);\n\n if (clientFilters) {\n column.setFilterValue(undefined);\n }\n\n if (onFiltering) {\n onFiltering(removeFilter(currentFilters, column.id));\n }\n }, [clientFilters, column, currentFilters, onFiltering]);\n\n let filterElement = null;\n\n if (filterVariant === 'range') {\n filterElement = (\n <Container spacing=\"small\">\n <Input\n type=\"number\"\n min={String(facetingMin ?? '')}\n max={String(facetingMax ?? '')}\n value={min ?? ''}\n placeholder={`Min ${facetingMin === null ? '' : `(${facetingMin})`}`}\n onChange={handleMinRangeChange}\n />\n <Input\n type=\"number\"\n min={String(facetingMin ?? '')}\n max={String(facetingMax ?? '')}\n value={max ?? ''}\n placeholder={`Max ${facetingMax === null ? '' : `(${facetingMax})`}`}\n onChange={handleMaxRangeChange}\n />\n <Button submit variant=\"outline\" aria-label=\"Filter\" onClick={handleFilterClick}>\n <Icon size=\"large\" name=\"Funnel\" />\n </Button>\n <Button variant=\"outline\" aria-label=\"Cancel\" onClick={handleResetClick}>\n <Icon size=\"large\" name=\"XMark\" />\n </Button>\n </Container>\n );\n } else if (filterVariant === 'select' && facetingValues.length) {\n filterElement = (\n <Container spacing=\"small\">\n <Listbox\n value={currentFilter as string}\n items={(facetingValues as string[]).map((value: string) => ({\n value,\n label: `${value as unknown}`,\n }))}\n onChange={handleSelectFilterChange}\n />\n <Button variant=\"outline\" aria-label=\"Cancel\" onClick={handleResetClick}>\n <Icon size=\"large\" name=\"XMark\" />\n </Button>\n </Container>\n );\n } else if (filterVariant === 'text' && facetingValues.length) {\n filterElement = (\n <Container spacing=\"small\">\n <Combobox\n customValue\n value={(currentFilter ?? '') as string}\n items={(facetingValues as string[]).map((value: string) => ({\n value,\n label: `${value as unknown}`,\n }))}\n onChange={handleTextFilterChange}\n />\n <Button variant=\"outline\" aria-label=\"Cancel\" onClick={handleResetClick}>\n <Icon size=\"large\" name=\"XMark\" />\n </Button>\n </Container>\n );\n } else if ((filterVariant === 'text' && !facetingValues.length) || !filterVariant) {\n filterElement = (\n <Container spacing=\"small\">\n <Input value={filter ?? ''} onChange={handleFilterChange} />\n <Button variant=\"outline\" aria-label=\"Filter\" onClick={handleFilterClick}>\n <Icon size=\"large\" name=\"Funnel\" />\n </Button>\n <Button variant=\"outline\" aria-label=\"Cancel\" onClick={handleResetClick}>\n <Icon size=\"large\" name=\"XMark\" />\n </Button>\n </Container>\n );\n }\n\n return <Form onSubmit={handleFilterSubmit}>{filterElement}</Form>;\n}\n"],
|
|
5
|
-
"mappings": ";
|
|
4
|
+
"sourcesContent": ["import {type Column, type Table} from '@tanstack/react-table';\nimport {type ChangeEvent, type FormEvent, useCallback, useMemo, useState} from 'react';\n\nimport {Button} from '../../Button.js';\nimport {Combobox} from '../../Combobox.js';\nimport {Container} from '../../Container.js';\nimport {Form} from '../../Form.js';\nimport {Icon} from '../../Icon.js';\nimport {Input} from '../../Input.js';\nimport {Listbox} from '../../Listbox.js';\nimport {type DataTableProps} from '../DataTable.js';\nimport {addFilter} from './addFilter.js';\nimport {normalizeFilter} from './normalizeFilter.js';\nimport {normalizeFilters} from './normalizeFilters.js';\nimport {removeFilter} from './removeFilter.js';\n\nexport type DataTableHeaderFilterProps = {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n table: Table<any>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n column: Column<any>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n clientFilters: DataTableProps<any, any>['clientFilters'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n filters: DataTableProps<any, any>['filters'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n onFiltering: DataTableProps<any, any>['onFiltersChange'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n clientFaceting: DataTableProps<any, any>['clientFaceting'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n faceting: DataTableProps<any, any>['faceting'];\n};\n\nexport function DataTableHeaderFilter({\n table,\n column,\n clientFilters,\n filters: controlledFilters,\n onFiltering,\n clientFaceting,\n faceting,\n}: DataTableHeaderFilterProps) {\n let {filterVariant} = column.columnDef.meta ?? {};\n\n let currentFilters =\n clientFilters ? normalizeFilters(table) : normalizeFilters(table, controlledFilters);\n let currentFilter =\n clientFilters ? normalizeFilter(column) : normalizeFilter(column, controlledFilters);\n\n let currentMin =\n filterVariant === 'range' ?\n ((currentFilter as [number?, number?] | undefined)?.[0] ?? undefined)\n : undefined;\n let currentMax =\n filterVariant === 'range' ?\n ((currentFilter as [number?, number?] | undefined)?.[1] ?? undefined)\n : undefined;\n\n let [filter, setFilter] = useState<string | undefined>(\n typeof currentFilter === 'string' ? currentFilter : undefined,\n );\n let [min, setMin] = useState(currentMin);\n let [max, setMax] = useState(currentMax);\n\n let facetingValues = useMemo(() => {\n if (!clientFaceting) {\n return faceting?.[column.id]?.values ?? [];\n }\n\n if (filterVariant === 'range') {\n return [];\n }\n\n return [...column.getFacetedUniqueValues().keys()].sort().slice(0, 5000) as unknown[];\n }, [clientFaceting, column, faceting, filterVariant]);\n\n let facetingMin =\n clientFaceting ?\n Number(column.getFacetedMinMaxValues()?.[0] ?? null)\n : (faceting?.[column.id]?.min ?? null);\n let facetingMax =\n clientFaceting ?\n Number(column.getFacetedMinMaxValues()?.[1] ?? null)\n : (faceting?.[column.id]?.max ?? null);\n\n let handleMinRangeChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n setMin(event.target.value ? Number(event.target.value) : undefined);\n }, []);\n\n let handleMaxRangeChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n setMax(event.target.value ? Number(event.target.value) : undefined);\n }, []);\n\n let handleSelectFilterChange = useCallback(\n (value: string) => {\n if (clientFilters) {\n column.setFilterValue(value);\n }\n\n if (onFiltering) {\n onFiltering(addFilter(currentFilters, column.id, value));\n }\n },\n [clientFilters, column, currentFilters, onFiltering],\n );\n\n let handleTextFilterChange = useCallback(\n (value: string | undefined) => {\n if (value) {\n if (clientFilters) {\n column.setFilterValue(value);\n }\n\n if (onFiltering) {\n onFiltering(addFilter(currentFilters, column.id, value));\n }\n } else {\n if (clientFilters) {\n column.setFilterValue(undefined);\n }\n\n if (onFiltering) {\n onFiltering(removeFilter(currentFilters, column.id));\n }\n }\n },\n [clientFilters, column, currentFilters, onFiltering],\n );\n\n let handleFilterChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n if (event.target.value) {\n setFilter(event.target.value);\n } else {\n setFilter(undefined);\n }\n }, []);\n\n let handleFilterClick = useCallback(() => {\n if (filterVariant === 'range') {\n if (!min && !max) {\n if (clientFilters) {\n column.setFilterValue(undefined);\n }\n\n if (onFiltering) {\n onFiltering(removeFilter(currentFilters, column.id));\n }\n } else {\n if (clientFilters) {\n column.setFilterValue([min, max]);\n }\n\n if (onFiltering) {\n onFiltering(addFilter(currentFilters, column.id, [min, max]));\n }\n }\n }\n\n if ((filterVariant === 'text' && !facetingValues.length) || !filterVariant) {\n if (filter) {\n if (clientFilters) {\n column.setFilterValue(filter);\n }\n\n if (onFiltering) {\n onFiltering(addFilter(currentFilters, column.id, filter));\n }\n } else {\n if (clientFilters) {\n column.setFilterValue(undefined);\n }\n\n if (onFiltering) {\n onFiltering(removeFilter(currentFilters, column.id));\n }\n }\n }\n }, [\n clientFilters,\n column,\n currentFilters,\n facetingValues.length,\n filter,\n filterVariant,\n max,\n min,\n onFiltering,\n ]);\n\n let handleFilterSubmit = useCallback(\n (event: FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n\n if (filterVariant === 'range') {\n if (!min && !max) {\n if (clientFilters) {\n column.setFilterValue(undefined);\n }\n\n if (onFiltering) {\n onFiltering(removeFilter(currentFilters, column.id));\n }\n } else {\n if (clientFilters) {\n column.setFilterValue([min, max]);\n }\n\n if (onFiltering) {\n onFiltering(addFilter(currentFilters, column.id, [min, max]));\n }\n }\n }\n\n if ((filterVariant === 'text' && !facetingValues.length) || !filterVariant) {\n if (filter) {\n if (clientFilters) {\n column.setFilterValue(filter);\n }\n\n if (onFiltering) {\n onFiltering(addFilter(currentFilters, column.id, filter));\n }\n } else {\n if (clientFilters) {\n column.setFilterValue(undefined);\n }\n\n if (onFiltering) {\n onFiltering(removeFilter(currentFilters, column.id));\n }\n }\n }\n },\n [\n clientFilters,\n column,\n currentFilters,\n facetingValues.length,\n filter,\n filterVariant,\n max,\n min,\n onFiltering,\n ],\n );\n\n let handleResetClick = useCallback(() => {\n setFilter(undefined);\n setMin(undefined);\n setMax(undefined);\n\n if (clientFilters) {\n column.setFilterValue(undefined);\n }\n\n if (onFiltering) {\n onFiltering(removeFilter(currentFilters, column.id));\n }\n }, [clientFilters, column, currentFilters, onFiltering]);\n\n let filterElement = null;\n\n if (filterVariant === 'range') {\n filterElement = (\n <Container spacing=\"small\">\n <Input\n type=\"number\"\n min={String(facetingMin ?? '')}\n max={String(facetingMax ?? '')}\n value={min ?? ''}\n placeholder={`Min ${facetingMin === null ? '' : `(${facetingMin})`}`}\n onChange={handleMinRangeChange}\n />\n <Input\n type=\"number\"\n min={String(facetingMin ?? '')}\n max={String(facetingMax ?? '')}\n value={max ?? ''}\n placeholder={`Max ${facetingMax === null ? '' : `(${facetingMax})`}`}\n onChange={handleMaxRangeChange}\n />\n <Button submit variant=\"outline\" aria-label=\"Filter\" onClick={handleFilterClick}>\n <Icon size=\"large\" name=\"Funnel\" />\n </Button>\n <Button variant=\"outline\" aria-label=\"Cancel\" onClick={handleResetClick}>\n <Icon size=\"large\" name=\"XMark\" />\n </Button>\n </Container>\n );\n } else if (filterVariant === 'select' && facetingValues.length) {\n filterElement = (\n <Container spacing=\"small\">\n <Listbox\n value={currentFilter as string}\n items={(facetingValues as string[]).map((value: string) => ({\n value,\n label: `${value as unknown}`,\n }))}\n onChange={handleSelectFilterChange}\n />\n <Button variant=\"outline\" aria-label=\"Cancel\" onClick={handleResetClick}>\n <Icon size=\"large\" name=\"XMark\" />\n </Button>\n </Container>\n );\n } else if (filterVariant === 'text' && facetingValues.length) {\n filterElement = (\n <Container spacing=\"small\">\n <Combobox\n customValue\n value={(currentFilter ?? '') as string}\n items={(facetingValues as string[]).map((value: string) => ({\n value,\n label: `${value as unknown}`,\n }))}\n onChange={handleTextFilterChange}\n />\n <Button variant=\"outline\" aria-label=\"Cancel\" onClick={handleResetClick}>\n <Icon size=\"large\" name=\"XMark\" />\n </Button>\n </Container>\n );\n } else if ((filterVariant === 'text' && !facetingValues.length) || !filterVariant) {\n filterElement = (\n <Container spacing=\"small\">\n <Input value={filter ?? ''} onChange={handleFilterChange} />\n <Button variant=\"outline\" aria-label=\"Filter\" onClick={handleFilterClick}>\n <Icon size=\"large\" name=\"Funnel\" />\n </Button>\n <Button variant=\"outline\" aria-label=\"Cancel\" onClick={handleResetClick}>\n <Icon size=\"large\" name=\"XMark\" />\n </Button>\n </Container>\n );\n }\n\n return <Form onSubmit={handleFilterSubmit}>{filterElement}</Form>;\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -6,7 +6,7 @@ export function createDisplayColor(hexColor, alphaPlaceholder) {
|
|
|
6
6
|
if (!hexColor || !isHex(hexColor)) {
|
|
7
7
|
return null;
|
|
8
8
|
}
|
|
9
|
-
let display
|
|
9
|
+
let display;
|
|
10
10
|
let oklchColor = oklch(hexColor);
|
|
11
11
|
if (!oklchColor) {
|
|
12
12
|
throw new Error(`Couldn't convert "${hexColor}" to OKLCH!`);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../source/development/internals/createDisplayColor.ts"],
|
|
4
|
-
"sourcesContent": ["import {oklch} from 'culori';\n\nimport {isHex} from './isHex.js';\nimport {round} from './round.js';\n\nexport function createDisplayColor(hexColor: string, alphaPlaceholder?: boolean): string | null {\n if (!hexColor || !isHex(hexColor)) {\n return null;\n }\n\n let display
|
|
5
|
-
"mappings": ";AAAA,SAAQ,aAAY;AAEpB,SAAQ,aAAY;AACpB,SAAQ,aAAY;AAEb,gBAAS,mBAAmB,UAAkB,kBAA2C;AAC9F,MAAI,CAAC,YAAY,CAAC,MAAM,QAAQ,GAAG;AACjC,WAAO;AAAA,EACT;AAEA,MAAI
|
|
4
|
+
"sourcesContent": ["import {oklch} from 'culori';\n\nimport {isHex} from './isHex.js';\nimport {round} from './round.js';\n\nexport function createDisplayColor(hexColor: string, alphaPlaceholder?: boolean): string | null {\n if (!hexColor || !isHex(hexColor)) {\n return null;\n }\n\n let display;\n let oklchColor = oklch(hexColor);\n\n if (!oklchColor) {\n throw new Error(`Couldn't convert \"${hexColor}\" to OKLCH!`);\n }\n\n let {l, c, h = 0} = oklchColor;\n\n display = `oklch(${[\n `${round(l * 100, 2)}%`,\n round(c, 3),\n round(h, 2),\n `/`,\n alphaPlaceholder ? `<alpha-value>` : 1,\n ].join(` `)})`;\n\n return display;\n}\n"],
|
|
5
|
+
"mappings": ";AAAA,SAAQ,aAAY;AAEpB,SAAQ,aAAY;AACpB,SAAQ,aAAY;AAEb,gBAAS,mBAAmB,UAAkB,kBAA2C;AAC9F,MAAI,CAAC,YAAY,CAAC,MAAM,QAAQ,GAAG;AACjC,WAAO;AAAA,EACT;AAEA,MAAI;AACJ,MAAI,aAAa,MAAM,QAAQ;AAE/B,MAAI,CAAC,YAAY;AACf,UAAM,IAAI,MAAM,qBAAqB,QAAQ,aAAa;AAAA,EAC5D;AAEA,MAAI,EAAC,GAAG,GAAG,IAAI,EAAC,IAAI;AAEpB,YAAU,SAAS;AAAA,IACjB,GAAG,MAAM,IAAI,KAAK,CAAC,CAAC;AAAA,IACpB,MAAM,GAAG,CAAC;AAAA,IACV,MAAM,GAAG,CAAC;AAAA,IACV;AAAA,IACA,mBAAmB,kBAAkB;AAAA,EACvC,EAAE,KAAK,GAAG,CAAC;AAEX,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -12,9 +12,9 @@ export function hexToHsl(rawHex) {
|
|
|
12
12
|
let cmin = Math.min(r, g, b);
|
|
13
13
|
let cmax = Math.max(r, g, b);
|
|
14
14
|
let delta = cmax - cmin;
|
|
15
|
-
let h
|
|
16
|
-
let s
|
|
17
|
-
let l
|
|
15
|
+
let h;
|
|
16
|
+
let s;
|
|
17
|
+
let l;
|
|
18
18
|
if (delta === 0) {
|
|
19
19
|
h = 0;
|
|
20
20
|
} else if (cmax === r) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../source/development/internals/hexToHsl.ts"],
|
|
4
|
-
"sourcesContent": ["import {hexToRgb} from './hexToRgb.js';\n\nexport function hexToHsl(rawHex: string) {\n let hex = rawHex;\n\n if (hex.length === 6 && !hex.startsWith(`#`)) {\n hex = `#${hex}`;\n }\n\n let {r, g, b} = hexToRgb(hex);\n\n r /= 255;\n g /= 255;\n b /= 255;\n\n let cmin = Math.min(r, g, b);\n let cmax = Math.max(r, g, b);\n let delta = cmax - cmin;\n let h
|
|
5
|
-
"mappings": ";AAAA,SAAQ,gBAAe;AAEhB,gBAAS,SAAS,QAAgB;AACvC,MAAI,MAAM;AAEV,MAAI,IAAI,WAAW,KAAK,CAAC,IAAI,WAAW,GAAG,GAAG;AAC5C,UAAM,IAAI,GAAG;AAAA,EACf;AAEA,MAAI,EAAC,GAAG,GAAG,EAAC,IAAI,SAAS,GAAG;AAE5B,OAAK;AACL,OAAK;AACL,OAAK;AAEL,MAAI,OAAO,KAAK,IAAI,GAAG,GAAG,CAAC;AAC3B,MAAI,OAAO,KAAK,IAAI,GAAG,GAAG,CAAC;AAC3B,MAAI,QAAQ,OAAO;AACnB,MAAI
|
|
4
|
+
"sourcesContent": ["import {hexToRgb} from './hexToRgb.js';\n\nexport function hexToHsl(rawHex: string) {\n let hex = rawHex;\n\n if (hex.length === 6 && !hex.startsWith(`#`)) {\n hex = `#${hex}`;\n }\n\n let {r, g, b} = hexToRgb(hex);\n\n r /= 255;\n g /= 255;\n b /= 255;\n\n let cmin = Math.min(r, g, b);\n let cmax = Math.max(r, g, b);\n let delta = cmax - cmin;\n let h;\n let s;\n let l;\n\n if (delta === 0) {\n h = 0;\n } else if (cmax === r) {\n h = ((g - b) / delta) % 6;\n } else if (cmax === g) {\n h = (b - r) / delta + 2;\n } else {\n h = (r - g) / delta + 4;\n }\n\n h = Math.round(h * 60);\n\n if (h < 0) {\n h += 360;\n }\n\n l = (cmax + cmin) / 2;\n s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));\n s = +(s * 100).toFixed(1);\n l = +(l * 100).toFixed(1);\n\n return {h, s, l}; // values can be used like this: `hsl(${h}, ${s}%, ${l}%)`\n}\n"],
|
|
5
|
+
"mappings": ";AAAA,SAAQ,gBAAe;AAEhB,gBAAS,SAAS,QAAgB;AACvC,MAAI,MAAM;AAEV,MAAI,IAAI,WAAW,KAAK,CAAC,IAAI,WAAW,GAAG,GAAG;AAC5C,UAAM,IAAI,GAAG;AAAA,EACf;AAEA,MAAI,EAAC,GAAG,GAAG,EAAC,IAAI,SAAS,GAAG;AAE5B,OAAK;AACL,OAAK;AACL,OAAK;AAEL,MAAI,OAAO,KAAK,IAAI,GAAG,GAAG,CAAC;AAC3B,MAAI,OAAO,KAAK,IAAI,GAAG,GAAG,CAAC;AAC3B,MAAI,QAAQ,OAAO;AACnB,MAAI;AACJ,MAAI;AACJ,MAAI;AAEJ,MAAI,UAAU,GAAG;AACf,QAAI;AAAA,EACN,WAAW,SAAS,GAAG;AACrB,SAAM,IAAI,KAAK,QAAS;AAAA,EAC1B,WAAW,SAAS,GAAG;AACrB,SAAK,IAAI,KAAK,QAAQ;AAAA,EACxB,OAAO;AACL,SAAK,IAAI,KAAK,QAAQ;AAAA,EACxB;AAEA,MAAI,KAAK,MAAM,IAAI,EAAE;AAErB,MAAI,IAAI,GAAG;AACT,SAAK;AAAA,EACP;AAEA,OAAK,OAAO,QAAQ;AACpB,MAAI,UAAU,IAAI,IAAI,SAAS,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC;AACrD,MAAI,EAAE,IAAI,KAAK,QAAQ,CAAC;AACxB,MAAI,EAAE,IAAI,KAAK,QAAQ,CAAC;AAExB,SAAO,EAAC,GAAG,GAAG,EAAC;AACjB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jakubmazanec/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0-unstable.d6c542d",
|
|
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.1.5",
|
|
44
|
-
"@jakubmazanec/ts-utils": "
|
|
44
|
+
"@jakubmazanec/ts-utils": "3.1.0-unstable.d6c542d",
|
|
45
45
|
"@tanstack/match-sorter-utils": "^8.19.4",
|
|
46
46
|
"@tanstack/react-table": "^8.20.5",
|
|
47
47
|
"culori": "^4.0.1",
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
53
|
"@chromatic-com/storybook": "^1.9.0",
|
|
54
|
-
"@jakubmazanec/eslint-config": "
|
|
54
|
+
"@jakubmazanec/eslint-config": "4.0.0-unstable.d6c542d",
|
|
55
55
|
"@storybook/addon-controls": "^8.4.2",
|
|
56
56
|
"@storybook/addon-essentials": "^8.4.2",
|
|
57
57
|
"@storybook/addon-interactions": "^8.4.2",
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
"concurrently": "^9.1.0",
|
|
75
75
|
"del-cli": "^6.0.0",
|
|
76
76
|
"esbuild": "^0.24.0",
|
|
77
|
-
"eslint": "^
|
|
77
|
+
"eslint": "^9.14.0",
|
|
78
78
|
"happy-dom": "^15.10.1",
|
|
79
79
|
"prettier": "^3.3.3",
|
|
80
80
|
"prettier-plugin-packagejson": "^2.5.3",
|
|
@@ -74,7 +74,7 @@ export function DataTableHeader({
|
|
|
74
74
|
contentElement = flexRender(header.column.columnDef.header, header.getContext());
|
|
75
75
|
}
|
|
76
76
|
|
|
77
|
-
let sortElement
|
|
77
|
+
let sortElement;
|
|
78
78
|
|
|
79
79
|
if (!sorting) {
|
|
80
80
|
sortElement = <Icon name="ArrowsUpDown" size="small" variant="light" />;
|
|
@@ -96,7 +96,7 @@ export function DataTableHeader({
|
|
|
96
96
|
|
|
97
97
|
let handleSortClick = useCallback(() => {
|
|
98
98
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
|
|
99
|
-
let newSorting: DataTableProps<any, any>['sorting']
|
|
99
|
+
let newSorting: DataTableProps<any, any>['sorting'];
|
|
100
100
|
|
|
101
101
|
if (!sorting) {
|
|
102
102
|
newSorting = {
|