@raystack/apsara 0.56.2 → 0.56.3
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/dist/components/data-table/components/filters.cjs +2 -1
- package/dist/components/data-table/components/filters.cjs.map +1 -1
- package/dist/components/data-table/components/filters.d.ts.map +1 -1
- package/dist/components/data-table/components/filters.js +2 -1
- package/dist/components/data-table/components/filters.js.map +1 -1
- package/dist/components/data-table/data-table.types.cjs.map +1 -1
- package/dist/components/data-table/data-table.types.d.ts +4 -0
- package/dist/components/data-table/data-table.types.d.ts.map +1 -1
- package/dist/components/data-table/data-table.types.js.map +1 -1
- package/dist/components/filter-chip/filter-chip.cjs +2 -2
- package/dist/components/filter-chip/filter-chip.cjs.map +1 -1
- package/dist/components/filter-chip/filter-chip.d.ts +3 -1
- package/dist/components/filter-chip/filter-chip.d.ts.map +1 -1
- package/dist/components/filter-chip/filter-chip.js +2 -2
- package/dist/components/filter-chip/filter-chip.js.map +1 -1
- package/dist/components/select/select-root.cjs.map +1 -1
- package/dist/components/select/select-root.d.ts +1 -1
- package/dist/components/select/select-root.d.ts.map +1 -1
- package/dist/components/select/select-root.js.map +1 -1
- package/package.json +2 -2
|
@@ -47,10 +47,11 @@ function Filters({ classNames, className, trigger }) {
|
|
|
47
47
|
filterType: columnDef?.filterType || filters.FilterType.string,
|
|
48
48
|
label: columnDef?.header || '',
|
|
49
49
|
options: columnDef?.filterOptions || [],
|
|
50
|
+
selectProps: columnDef?.filterProps?.select,
|
|
50
51
|
...filter
|
|
51
52
|
};
|
|
52
53
|
}) || [];
|
|
53
|
-
return (jsxRuntime.jsxs(flex.Flex, { gap: 3, className: className, children: [appliedFilters.length > 0 && (jsxRuntime.jsx(flex.Flex, { gap: 3, className: classNames?.container, children: appliedFilters.map(filter => (jsxRuntime.jsx(filterChip.FilterChip, { label: filter.label, value: filter.value, onRemove: () => handleRemoveFilter(filter.name), onValueChange: value => handleFilterValueChange(filter.name, value), onOperationChange: operator => handleFilterOperationChange(filter.name, operator), columnType: filter.filterType, options: filter.options, className: classNames?.filterChips }, filter.name))) })), jsxRuntime.jsx(AddFilter, { columnList: columnList, appliedFiltersSet: appliedFiltersSet, onAddFilter: onAddFilter, children: trigger })] }));
|
|
54
|
+
return (jsxRuntime.jsxs(flex.Flex, { gap: 3, className: className, children: [appliedFilters.length > 0 && (jsxRuntime.jsx(flex.Flex, { gap: 3, className: classNames?.container, children: appliedFilters.map(filter => (jsxRuntime.jsx(filterChip.FilterChip, { label: filter.label, value: filter.value, onRemove: () => handleRemoveFilter(filter.name), onValueChange: value => handleFilterValueChange(filter.name, value), onOperationChange: operator => handleFilterOperationChange(filter.name, operator), columnType: filter.filterType, options: filter.options, selectProps: filter.selectProps, className: classNames?.filterChips }, filter.name))) })), jsxRuntime.jsx(AddFilter, { columnList: columnList, appliedFiltersSet: appliedFiltersSet, onAddFilter: onAddFilter, children: trigger })] }));
|
|
54
55
|
}
|
|
55
56
|
|
|
56
57
|
exports.Filters = Filters;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filters.cjs","sources":["../../../../components/data-table/components/filters.tsx"],"sourcesContent":["'use client';\n\nimport { ReactNode, useMemo } from 'react';\nimport { FilterIcon } from '~/icons';\nimport { FilterOperatorTypes, FilterType } from '~/types/filters';\nimport { Button } from '../../button';\nimport { DropdownMenu } from '../../dropdown-menu';\nimport { FilterChip } from '../../filter-chip';\nimport { Flex } from '../../flex';\nimport { IconButton } from '../../icon-button';\nimport { DataTableColumn } from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { useFilters } from '../hooks/useFilters';\n\ntype Trigger<TData, TValue> =\n | ReactNode\n | (({\n availableFilters,\n appliedFilters\n }: {\n availableFilters: DataTableColumn<TData, TValue>[];\n appliedFilters: Set<string>;\n }) => ReactNode);\n\ninterface AddFilterProps<TData, TValue> {\n columnList: DataTableColumn<TData, TValue>[];\n appliedFiltersSet: Set<string>;\n onAddFilter: (column: DataTableColumn<TData, TValue>) => void;\n children?: Trigger<TData, TValue>;\n}\n\nfunction AddFilter<TData, TValue>({\n columnList = [],\n appliedFiltersSet,\n onAddFilter,\n children\n}: AddFilterProps<TData, TValue>) {\n const availableFilters = columnList?.filter(\n col => !appliedFiltersSet.has(col.id)\n );\n\n const trigger = useMemo(() => {\n if (typeof children === 'function')\n return children({ availableFilters, appliedFilters: appliedFiltersSet });\n else if (children) return children;\n else if (appliedFiltersSet.size > 0)\n return (\n <IconButton size={4}>\n <FilterIcon />\n </IconButton>\n );\n else\n return (\n <Button\n variant='text'\n size='small'\n leadingIcon={<FilterIcon />}\n color='neutral'\n >\n Filter\n </Button>\n );\n }, [children, appliedFiltersSet, availableFilters]);\n\n return availableFilters.length > 0 ? (\n <DropdownMenu>\n <DropdownMenu.Trigger asChild>{trigger}</DropdownMenu.Trigger>\n <DropdownMenu.Content>\n {availableFilters?.map(column => {\n const columnDef = column.columnDef;\n const id = columnDef.accessorKey || column.id;\n return (\n <DropdownMenu.Item key={id} onClick={() => onAddFilter(column)}>\n {columnDef.header || id}\n </DropdownMenu.Item>\n );\n })}\n </DropdownMenu.Content>\n </DropdownMenu>\n ) : null;\n}\n\nexport function Filters<TData, TValue>({\n classNames,\n className,\n trigger\n}: {\n classNames?: {\n container?: string;\n filterChips?: string;\n addFilter?: string;\n };\n className?: string;\n trigger?: Trigger<TData, TValue>;\n}) {\n const { table, tableQuery } = useDataTable();\n const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n const {\n onAddFilter,\n handleRemoveFilter,\n handleFilterValueChange,\n handleFilterOperationChange\n } = useFilters<TData, TValue>();\n\n const columnList = columns?.filter(\n column => column.columnDef.enableColumnFilter\n );\n\n const appliedFiltersSet = new Set(\n tableQuery?.filters?.map(filter => filter.name)\n );\n\n const appliedFilters =\n tableQuery?.filters?.map(filter => {\n const columnDef = columns?.find(col => {\n const columnDef = col.columnDef;\n const id = columnDef.accessorKey || col.id;\n return id === filter.name;\n })?.columnDef;\n return {\n filterType: columnDef?.filterType || FilterType.string,\n label: (columnDef?.header as string) || '',\n options: columnDef?.filterOptions || [],\n ...filter\n };\n }) || [];\n\n return (\n <Flex gap={3} className={className}>\n {appliedFilters.length > 0 && (\n <Flex gap={3} className={classNames?.container}>\n {appliedFilters.map(filter => (\n <FilterChip\n key={filter.name}\n label={filter.label}\n value={filter.value}\n onRemove={() => handleRemoveFilter(filter.name)}\n onValueChange={value =>\n handleFilterValueChange(filter.name, value)\n }\n onOperationChange={operator =>\n handleFilterOperationChange(\n filter.name,\n operator as FilterOperatorTypes\n )\n }\n columnType={filter.filterType}\n options={filter.options}\n className={classNames?.filterChips}\n />\n ))}\n </Flex>\n )}\n <AddFilter\n columnList={columnList}\n appliedFiltersSet={appliedFiltersSet}\n onAddFilter={onAddFilter}\n >\n {trigger}\n </AddFilter>\n </Flex>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AA+BA;;AAUE;;;AAGO;AAAc;AACd;AACH;;;;AAkBJ;AAKQ;;;;AAWV;AAEM;;AAcJ;AAEA;AAOA;;;;AAWM;;AAEA;;;AAGA;AACA;AACA;AACA;;;AAIN;
|
|
1
|
+
{"version":3,"file":"filters.cjs","sources":["../../../../components/data-table/components/filters.tsx"],"sourcesContent":["'use client';\n\nimport { ReactNode, useMemo } from 'react';\nimport { FilterIcon } from '~/icons';\nimport { FilterOperatorTypes, FilterType } from '~/types/filters';\nimport { Button } from '../../button';\nimport { DropdownMenu } from '../../dropdown-menu';\nimport { FilterChip } from '../../filter-chip';\nimport { Flex } from '../../flex';\nimport { IconButton } from '../../icon-button';\nimport { DataTableColumn } from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { useFilters } from '../hooks/useFilters';\n\ntype Trigger<TData, TValue> =\n | ReactNode\n | (({\n availableFilters,\n appliedFilters\n }: {\n availableFilters: DataTableColumn<TData, TValue>[];\n appliedFilters: Set<string>;\n }) => ReactNode);\n\ninterface AddFilterProps<TData, TValue> {\n columnList: DataTableColumn<TData, TValue>[];\n appliedFiltersSet: Set<string>;\n onAddFilter: (column: DataTableColumn<TData, TValue>) => void;\n children?: Trigger<TData, TValue>;\n}\n\nfunction AddFilter<TData, TValue>({\n columnList = [],\n appliedFiltersSet,\n onAddFilter,\n children\n}: AddFilterProps<TData, TValue>) {\n const availableFilters = columnList?.filter(\n col => !appliedFiltersSet.has(col.id)\n );\n\n const trigger = useMemo(() => {\n if (typeof children === 'function')\n return children({ availableFilters, appliedFilters: appliedFiltersSet });\n else if (children) return children;\n else if (appliedFiltersSet.size > 0)\n return (\n <IconButton size={4}>\n <FilterIcon />\n </IconButton>\n );\n else\n return (\n <Button\n variant='text'\n size='small'\n leadingIcon={<FilterIcon />}\n color='neutral'\n >\n Filter\n </Button>\n );\n }, [children, appliedFiltersSet, availableFilters]);\n\n return availableFilters.length > 0 ? (\n <DropdownMenu>\n <DropdownMenu.Trigger asChild>{trigger}</DropdownMenu.Trigger>\n <DropdownMenu.Content>\n {availableFilters?.map(column => {\n const columnDef = column.columnDef;\n const id = columnDef.accessorKey || column.id;\n return (\n <DropdownMenu.Item key={id} onClick={() => onAddFilter(column)}>\n {columnDef.header || id}\n </DropdownMenu.Item>\n );\n })}\n </DropdownMenu.Content>\n </DropdownMenu>\n ) : null;\n}\n\nexport function Filters<TData, TValue>({\n classNames,\n className,\n trigger\n}: {\n classNames?: {\n container?: string;\n filterChips?: string;\n addFilter?: string;\n };\n className?: string;\n trigger?: Trigger<TData, TValue>;\n}) {\n const { table, tableQuery } = useDataTable();\n const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n const {\n onAddFilter,\n handleRemoveFilter,\n handleFilterValueChange,\n handleFilterOperationChange\n } = useFilters<TData, TValue>();\n\n const columnList = columns?.filter(\n column => column.columnDef.enableColumnFilter\n );\n\n const appliedFiltersSet = new Set(\n tableQuery?.filters?.map(filter => filter.name)\n );\n\n const appliedFilters =\n tableQuery?.filters?.map(filter => {\n const columnDef = columns?.find(col => {\n const columnDef = col.columnDef;\n const id = columnDef.accessorKey || col.id;\n return id === filter.name;\n })?.columnDef;\n return {\n filterType: columnDef?.filterType || FilterType.string,\n label: (columnDef?.header as string) || '',\n options: columnDef?.filterOptions || [],\n selectProps: columnDef?.filterProps?.select,\n ...filter\n };\n }) || [];\n\n return (\n <Flex gap={3} className={className}>\n {appliedFilters.length > 0 && (\n <Flex gap={3} className={classNames?.container}>\n {appliedFilters.map(filter => (\n <FilterChip\n key={filter.name}\n label={filter.label}\n value={filter.value}\n onRemove={() => handleRemoveFilter(filter.name)}\n onValueChange={value =>\n handleFilterValueChange(filter.name, value)\n }\n onOperationChange={operator =>\n handleFilterOperationChange(\n filter.name,\n operator as FilterOperatorTypes\n )\n }\n columnType={filter.filterType}\n options={filter.options}\n selectProps={filter.selectProps}\n className={classNames?.filterChips}\n />\n ))}\n </Flex>\n )}\n <AddFilter\n columnList={columnList}\n appliedFiltersSet={appliedFiltersSet}\n onAddFilter={onAddFilter}\n >\n {trigger}\n </AddFilter>\n </Flex>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AA+BA;;AAUE;;;AAGO;AAAc;AACd;AACH;;;;AAkBJ;AAKQ;;;;AAWV;AAEM;;AAcJ;AAEA;AAOA;;;;AAWM;;AAEA;;;AAGA;AACA;AACA;AACA;AACA;;;AAIN;AAoCF;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filters.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/filters.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAQ3C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAItD,KAAK,OAAO,CAAC,KAAK,EAAE,MAAM,IACtB,SAAS,GACT,CAAC,CAAC,EACA,gBAAgB,EAChB,cAAc,EACf,EAAE;IACD,gBAAgB,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,CAAC;IACnD,cAAc,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CAC7B,KAAK,SAAS,CAAC,CAAC;AA4DrB,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,EACrC,UAAU,EACV,SAAS,EACT,OAAO,EACR,EAAE;IACD,UAAU,CAAC,EAAE;QACX,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;CAClC,
|
|
1
|
+
{"version":3,"file":"filters.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/filters.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAQ3C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAItD,KAAK,OAAO,CAAC,KAAK,EAAE,MAAM,IACtB,SAAS,GACT,CAAC,CAAC,EACA,gBAAgB,EAChB,cAAc,EACf,EAAE;IACD,gBAAgB,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,CAAC;IACnD,cAAc,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CAC7B,KAAK,SAAS,CAAC,CAAC;AA4DrB,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,EACrC,UAAU,EACV,SAAS,EACT,OAAO,EACR,EAAE;IACD,UAAU,CAAC,EAAE;QACX,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;CAClC,2CAuEA"}
|
|
@@ -45,10 +45,11 @@ function Filters({ classNames, className, trigger }) {
|
|
|
45
45
|
filterType: columnDef?.filterType || FilterType.string,
|
|
46
46
|
label: columnDef?.header || '',
|
|
47
47
|
options: columnDef?.filterOptions || [],
|
|
48
|
+
selectProps: columnDef?.filterProps?.select,
|
|
48
49
|
...filter
|
|
49
50
|
};
|
|
50
51
|
}) || [];
|
|
51
|
-
return (jsxs(Flex, { gap: 3, className: className, children: [appliedFilters.length > 0 && (jsx(Flex, { gap: 3, className: classNames?.container, children: appliedFilters.map(filter => (jsx(FilterChip, { label: filter.label, value: filter.value, onRemove: () => handleRemoveFilter(filter.name), onValueChange: value => handleFilterValueChange(filter.name, value), onOperationChange: operator => handleFilterOperationChange(filter.name, operator), columnType: filter.filterType, options: filter.options, className: classNames?.filterChips }, filter.name))) })), jsx(AddFilter, { columnList: columnList, appliedFiltersSet: appliedFiltersSet, onAddFilter: onAddFilter, children: trigger })] }));
|
|
52
|
+
return (jsxs(Flex, { gap: 3, className: className, children: [appliedFilters.length > 0 && (jsx(Flex, { gap: 3, className: classNames?.container, children: appliedFilters.map(filter => (jsx(FilterChip, { label: filter.label, value: filter.value, onRemove: () => handleRemoveFilter(filter.name), onValueChange: value => handleFilterValueChange(filter.name, value), onOperationChange: operator => handleFilterOperationChange(filter.name, operator), columnType: filter.filterType, options: filter.options, selectProps: filter.selectProps, className: classNames?.filterChips }, filter.name))) })), jsx(AddFilter, { columnList: columnList, appliedFiltersSet: appliedFiltersSet, onAddFilter: onAddFilter, children: trigger })] }));
|
|
52
53
|
}
|
|
53
54
|
|
|
54
55
|
export { Filters };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filters.js","sources":["../../../../components/data-table/components/filters.tsx"],"sourcesContent":["'use client';\n\nimport { ReactNode, useMemo } from 'react';\nimport { FilterIcon } from '~/icons';\nimport { FilterOperatorTypes, FilterType } from '~/types/filters';\nimport { Button } from '../../button';\nimport { DropdownMenu } from '../../dropdown-menu';\nimport { FilterChip } from '../../filter-chip';\nimport { Flex } from '../../flex';\nimport { IconButton } from '../../icon-button';\nimport { DataTableColumn } from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { useFilters } from '../hooks/useFilters';\n\ntype Trigger<TData, TValue> =\n | ReactNode\n | (({\n availableFilters,\n appliedFilters\n }: {\n availableFilters: DataTableColumn<TData, TValue>[];\n appliedFilters: Set<string>;\n }) => ReactNode);\n\ninterface AddFilterProps<TData, TValue> {\n columnList: DataTableColumn<TData, TValue>[];\n appliedFiltersSet: Set<string>;\n onAddFilter: (column: DataTableColumn<TData, TValue>) => void;\n children?: Trigger<TData, TValue>;\n}\n\nfunction AddFilter<TData, TValue>({\n columnList = [],\n appliedFiltersSet,\n onAddFilter,\n children\n}: AddFilterProps<TData, TValue>) {\n const availableFilters = columnList?.filter(\n col => !appliedFiltersSet.has(col.id)\n );\n\n const trigger = useMemo(() => {\n if (typeof children === 'function')\n return children({ availableFilters, appliedFilters: appliedFiltersSet });\n else if (children) return children;\n else if (appliedFiltersSet.size > 0)\n return (\n <IconButton size={4}>\n <FilterIcon />\n </IconButton>\n );\n else\n return (\n <Button\n variant='text'\n size='small'\n leadingIcon={<FilterIcon />}\n color='neutral'\n >\n Filter\n </Button>\n );\n }, [children, appliedFiltersSet, availableFilters]);\n\n return availableFilters.length > 0 ? (\n <DropdownMenu>\n <DropdownMenu.Trigger asChild>{trigger}</DropdownMenu.Trigger>\n <DropdownMenu.Content>\n {availableFilters?.map(column => {\n const columnDef = column.columnDef;\n const id = columnDef.accessorKey || column.id;\n return (\n <DropdownMenu.Item key={id} onClick={() => onAddFilter(column)}>\n {columnDef.header || id}\n </DropdownMenu.Item>\n );\n })}\n </DropdownMenu.Content>\n </DropdownMenu>\n ) : null;\n}\n\nexport function Filters<TData, TValue>({\n classNames,\n className,\n trigger\n}: {\n classNames?: {\n container?: string;\n filterChips?: string;\n addFilter?: string;\n };\n className?: string;\n trigger?: Trigger<TData, TValue>;\n}) {\n const { table, tableQuery } = useDataTable();\n const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n const {\n onAddFilter,\n handleRemoveFilter,\n handleFilterValueChange,\n handleFilterOperationChange\n } = useFilters<TData, TValue>();\n\n const columnList = columns?.filter(\n column => column.columnDef.enableColumnFilter\n );\n\n const appliedFiltersSet = new Set(\n tableQuery?.filters?.map(filter => filter.name)\n );\n\n const appliedFilters =\n tableQuery?.filters?.map(filter => {\n const columnDef = columns?.find(col => {\n const columnDef = col.columnDef;\n const id = columnDef.accessorKey || col.id;\n return id === filter.name;\n })?.columnDef;\n return {\n filterType: columnDef?.filterType || FilterType.string,\n label: (columnDef?.header as string) || '',\n options: columnDef?.filterOptions || [],\n ...filter\n };\n }) || [];\n\n return (\n <Flex gap={3} className={className}>\n {appliedFilters.length > 0 && (\n <Flex gap={3} className={classNames?.container}>\n {appliedFilters.map(filter => (\n <FilterChip\n key={filter.name}\n label={filter.label}\n value={filter.value}\n onRemove={() => handleRemoveFilter(filter.name)}\n onValueChange={value =>\n handleFilterValueChange(filter.name, value)\n }\n onOperationChange={operator =>\n handleFilterOperationChange(\n filter.name,\n operator as FilterOperatorTypes\n )\n }\n columnType={filter.filterType}\n options={filter.options}\n className={classNames?.filterChips}\n />\n ))}\n </Flex>\n )}\n <AddFilter\n columnList={columnList}\n appliedFiltersSet={appliedFiltersSet}\n onAddFilter={onAddFilter}\n >\n {trigger}\n </AddFilter>\n </Flex>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AA+BA;;AAUE;;;AAGO;AAAc;AACd;AACH;;;;AAkBJ;AAKQ;;;;AAWV;AAEM;;AAcJ;AAEA;AAOA;;;;AAWM;;AAEA;;;AAGA;AACA;AACA;AACA;;;AAIN;
|
|
1
|
+
{"version":3,"file":"filters.js","sources":["../../../../components/data-table/components/filters.tsx"],"sourcesContent":["'use client';\n\nimport { ReactNode, useMemo } from 'react';\nimport { FilterIcon } from '~/icons';\nimport { FilterOperatorTypes, FilterType } from '~/types/filters';\nimport { Button } from '../../button';\nimport { DropdownMenu } from '../../dropdown-menu';\nimport { FilterChip } from '../../filter-chip';\nimport { Flex } from '../../flex';\nimport { IconButton } from '../../icon-button';\nimport { DataTableColumn } from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { useFilters } from '../hooks/useFilters';\n\ntype Trigger<TData, TValue> =\n | ReactNode\n | (({\n availableFilters,\n appliedFilters\n }: {\n availableFilters: DataTableColumn<TData, TValue>[];\n appliedFilters: Set<string>;\n }) => ReactNode);\n\ninterface AddFilterProps<TData, TValue> {\n columnList: DataTableColumn<TData, TValue>[];\n appliedFiltersSet: Set<string>;\n onAddFilter: (column: DataTableColumn<TData, TValue>) => void;\n children?: Trigger<TData, TValue>;\n}\n\nfunction AddFilter<TData, TValue>({\n columnList = [],\n appliedFiltersSet,\n onAddFilter,\n children\n}: AddFilterProps<TData, TValue>) {\n const availableFilters = columnList?.filter(\n col => !appliedFiltersSet.has(col.id)\n );\n\n const trigger = useMemo(() => {\n if (typeof children === 'function')\n return children({ availableFilters, appliedFilters: appliedFiltersSet });\n else if (children) return children;\n else if (appliedFiltersSet.size > 0)\n return (\n <IconButton size={4}>\n <FilterIcon />\n </IconButton>\n );\n else\n return (\n <Button\n variant='text'\n size='small'\n leadingIcon={<FilterIcon />}\n color='neutral'\n >\n Filter\n </Button>\n );\n }, [children, appliedFiltersSet, availableFilters]);\n\n return availableFilters.length > 0 ? (\n <DropdownMenu>\n <DropdownMenu.Trigger asChild>{trigger}</DropdownMenu.Trigger>\n <DropdownMenu.Content>\n {availableFilters?.map(column => {\n const columnDef = column.columnDef;\n const id = columnDef.accessorKey || column.id;\n return (\n <DropdownMenu.Item key={id} onClick={() => onAddFilter(column)}>\n {columnDef.header || id}\n </DropdownMenu.Item>\n );\n })}\n </DropdownMenu.Content>\n </DropdownMenu>\n ) : null;\n}\n\nexport function Filters<TData, TValue>({\n classNames,\n className,\n trigger\n}: {\n classNames?: {\n container?: string;\n filterChips?: string;\n addFilter?: string;\n };\n className?: string;\n trigger?: Trigger<TData, TValue>;\n}) {\n const { table, tableQuery } = useDataTable();\n const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n const {\n onAddFilter,\n handleRemoveFilter,\n handleFilterValueChange,\n handleFilterOperationChange\n } = useFilters<TData, TValue>();\n\n const columnList = columns?.filter(\n column => column.columnDef.enableColumnFilter\n );\n\n const appliedFiltersSet = new Set(\n tableQuery?.filters?.map(filter => filter.name)\n );\n\n const appliedFilters =\n tableQuery?.filters?.map(filter => {\n const columnDef = columns?.find(col => {\n const columnDef = col.columnDef;\n const id = columnDef.accessorKey || col.id;\n return id === filter.name;\n })?.columnDef;\n return {\n filterType: columnDef?.filterType || FilterType.string,\n label: (columnDef?.header as string) || '',\n options: columnDef?.filterOptions || [],\n selectProps: columnDef?.filterProps?.select,\n ...filter\n };\n }) || [];\n\n return (\n <Flex gap={3} className={className}>\n {appliedFilters.length > 0 && (\n <Flex gap={3} className={classNames?.container}>\n {appliedFilters.map(filter => (\n <FilterChip\n key={filter.name}\n label={filter.label}\n value={filter.value}\n onRemove={() => handleRemoveFilter(filter.name)}\n onValueChange={value =>\n handleFilterValueChange(filter.name, value)\n }\n onOperationChange={operator =>\n handleFilterOperationChange(\n filter.name,\n operator as FilterOperatorTypes\n )\n }\n columnType={filter.filterType}\n options={filter.options}\n selectProps={filter.selectProps}\n className={classNames?.filterChips}\n />\n ))}\n </Flex>\n )}\n <AddFilter\n columnList={columnList}\n appliedFiltersSet={appliedFiltersSet}\n onAddFilter={onAddFilter}\n >\n {trigger}\n </AddFilter>\n </Flex>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AA+BA;;AAUE;;;AAGO;AAAc;AACd;AACH;;;;AAkBJ;AAKQ;;;;AAWV;AAEM;;AAcJ;AAEA;AAOA;;;;AAWM;;AAEA;;;AAGA;AACA;AACA;AACA;AACA;;;AAIN;AAoCF;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table.types.cjs","sources":["../../../components/data-table/data-table.types.tsx"],"sourcesContent":["import type {\n Column,\n ColumnDef,\n Table,\n VisibilityState\n} from '@tanstack/table-core';\nimport type {\n DataTableFilterOperatorTypes,\n FilterOperatorTypes,\n FilterSelectOption,\n FilterTypes,\n FilterValueType\n} from '~/types/filters';\n\nexport type DataTableMode = 'client' | 'server';\n\nexport const SortOrders = {\n ASC: 'asc',\n DESC: 'desc'\n} as const;\n\nexport interface DataTableFilterValues {\n value: any;\n // Only one of these value fields should be present at a time\n boolValue?: boolean;\n stringValue?: string;\n numberValue?: number;\n}\n// Internal filter with UI operators and metadata\nexport interface InternalFilter extends DataTableFilterValues {\n _type?: FilterTypes;\n _dataType?: FilterValueType;\n name: string;\n operator: FilterOperatorTypes;\n}\n\n// Data table filter for backend API (no internal fields)\nexport interface DataTableFilter extends DataTableFilterValues {\n name: string;\n operator: DataTableFilterOperatorTypes;\n}\n\ntype SortOrdersKeys = keyof typeof SortOrders;\nexport type SortOrdersValues = (typeof SortOrders)[SortOrdersKeys];\n\nexport interface DataTableSort {\n name: string;\n order: SortOrdersValues;\n}\n\n// Internal query with UI operators and metadata\nexport interface InternalQuery {\n filters?: InternalFilter[];\n sort?: DataTableSort[];\n group_by?: string[];\n offset?: number;\n limit?: number;\n search?: string;\n}\n\n// Data table query for backend API (clean, no internal fields)\nexport interface DataTableQuery extends Omit<InternalQuery, 'filters'> {\n filters?: DataTableFilter[];\n}\n\nexport type DataTableColumn<TData, TValue> = Omit<\n Column<TData, TValue>,\n 'columnDef'\n> & {\n columnDef: DataTableColumnDef<TData, TValue>;\n};\n\nexport type DataTableColumnDef<TData, TValue> = ColumnDef<TData, TValue> & {\n accessorKey: string;\n header: string;\n filterType?: FilterTypes;\n dataType?: FilterValueType;\n enableColumnFilter?: boolean;\n enableSorting?: boolean;\n enableHiding?: boolean;\n defaultHidden?: boolean;\n filterOptions?: FilterSelectOption[];\n classNames?: {\n cell?: string;\n header?: string;\n };\n styles?: {\n cell?: React.CSSProperties;\n header?: React.CSSProperties;\n };\n enableGrouping?: boolean;\n showGroupCount?: boolean;\n groupCountMap?: Record<string, number>;\n groupLabelsMap?: Record<string, string>;\n // TODO: implement these\n icon?: React.ReactNode;\n};\n\nexport interface DataTableProps<TData, TValue> {\n columns: DataTableColumnDef<TData, TValue>[];\n data: TData[];\n query?: DataTableQuery; // Initial query (will be transformed to internal format)\n mode?: DataTableMode;\n isLoading?: boolean;\n loadingRowCount?: number;\n onTableQueryChange?: (query: DataTableQuery) => void;\n defaultSort: DataTableSort;\n onLoadMore?: () => Promise<void>;\n onRowClick?: (row: TData) => void;\n onColumnVisibilityChange?: (columnVisibility: VisibilityState) => void;\n}\n\nexport type DataTableContentClassNames = {\n root?: string;\n table?: string;\n header?: string;\n body?: string;\n row?: string;\n};\n\nexport type DataTableContentBaseProps = {\n emptyState?: React.ReactNode;\n zeroState?: React.ReactNode;\n classNames?: DataTableContentClassNames;\n};\n\nexport type DataTableContentProps = DataTableContentBaseProps;\n\nexport type VirtualizedContentProps = DataTableContentBaseProps & {\n /** Height of each row in pixels. */\n rowHeight?: number;\n /** Height of group header rows in pixels. Falls back to rowHeight if not set. */\n groupHeaderHeight?: number;\n /** Number of rows to render outside visible area. */\n overscan?: number;\n /** Distance in pixels from bottom to trigger load more. */\n loadMoreOffset?: number;\n};\n\nexport type TableQueryUpdateFn = (query: InternalQuery) => InternalQuery;\n\nexport type TableContextType<TData, TValue> = {\n table: Table<TData>;\n columns: DataTableColumnDef<TData, TValue>[];\n isLoading?: boolean;\n loadMoreData: () => void;\n mode: DataTableMode;\n defaultSort: DataTableSort;\n tableQuery?: InternalQuery;\n loadingRowCount?: number;\n onDisplaySettingsReset: () => void;\n updateTableQuery: (fn: TableQueryUpdateFn) => void;\n onRowClick?: (row: TData) => void;\n shouldShowFilters?: boolean;\n};\n\nexport interface ColumnData {\n label: string;\n id: string;\n isVisible?: boolean;\n}\n\ninterface SubRows<_T> {}\n\nexport interface GroupedData<T> extends SubRows<T> {\n label: string;\n group_key: string;\n subRows: T[];\n count?: number;\n showGroupCount?: boolean;\n}\n\nexport const defaultGroupOption = {\n id: '--',\n label: 'No grouping'\n};\n"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"data-table.types.cjs","sources":["../../../components/data-table/data-table.types.tsx"],"sourcesContent":["import type {\n Column,\n ColumnDef,\n Table,\n VisibilityState\n} from '@tanstack/table-core';\nimport type {\n DataTableFilterOperatorTypes,\n FilterOperatorTypes,\n FilterSelectOption,\n FilterTypes,\n FilterValueType\n} from '~/types/filters';\nimport type { BaseSelectProps } from '../select/select-root';\n\nexport type DataTableMode = 'client' | 'server';\n\nexport const SortOrders = {\n ASC: 'asc',\n DESC: 'desc'\n} as const;\n\nexport interface DataTableFilterValues {\n value: any;\n // Only one of these value fields should be present at a time\n boolValue?: boolean;\n stringValue?: string;\n numberValue?: number;\n}\n// Internal filter with UI operators and metadata\nexport interface InternalFilter extends DataTableFilterValues {\n _type?: FilterTypes;\n _dataType?: FilterValueType;\n name: string;\n operator: FilterOperatorTypes;\n}\n\n// Data table filter for backend API (no internal fields)\nexport interface DataTableFilter extends DataTableFilterValues {\n name: string;\n operator: DataTableFilterOperatorTypes;\n}\n\ntype SortOrdersKeys = keyof typeof SortOrders;\nexport type SortOrdersValues = (typeof SortOrders)[SortOrdersKeys];\n\nexport interface DataTableSort {\n name: string;\n order: SortOrdersValues;\n}\n\n// Internal query with UI operators and metadata\nexport interface InternalQuery {\n filters?: InternalFilter[];\n sort?: DataTableSort[];\n group_by?: string[];\n offset?: number;\n limit?: number;\n search?: string;\n}\n\n// Data table query for backend API (clean, no internal fields)\nexport interface DataTableQuery extends Omit<InternalQuery, 'filters'> {\n filters?: DataTableFilter[];\n}\n\nexport type DataTableColumn<TData, TValue> = Omit<\n Column<TData, TValue>,\n 'columnDef'\n> & {\n columnDef: DataTableColumnDef<TData, TValue>;\n};\n\nexport type DataTableColumnDef<TData, TValue> = ColumnDef<TData, TValue> & {\n accessorKey: string;\n header: string;\n filterType?: FilterTypes;\n dataType?: FilterValueType;\n enableColumnFilter?: boolean;\n enableSorting?: boolean;\n enableHiding?: boolean;\n defaultHidden?: boolean;\n filterOptions?: FilterSelectOption[];\n filterProps?: {\n select?: BaseSelectProps;\n };\n classNames?: {\n cell?: string;\n header?: string;\n };\n styles?: {\n cell?: React.CSSProperties;\n header?: React.CSSProperties;\n };\n enableGrouping?: boolean;\n showGroupCount?: boolean;\n groupCountMap?: Record<string, number>;\n groupLabelsMap?: Record<string, string>;\n // TODO: implement these\n icon?: React.ReactNode;\n};\n\nexport interface DataTableProps<TData, TValue> {\n columns: DataTableColumnDef<TData, TValue>[];\n data: TData[];\n query?: DataTableQuery; // Initial query (will be transformed to internal format)\n mode?: DataTableMode;\n isLoading?: boolean;\n loadingRowCount?: number;\n onTableQueryChange?: (query: DataTableQuery) => void;\n defaultSort: DataTableSort;\n onLoadMore?: () => Promise<void>;\n onRowClick?: (row: TData) => void;\n onColumnVisibilityChange?: (columnVisibility: VisibilityState) => void;\n}\n\nexport type DataTableContentClassNames = {\n root?: string;\n table?: string;\n header?: string;\n body?: string;\n row?: string;\n};\n\nexport type DataTableContentBaseProps = {\n emptyState?: React.ReactNode;\n zeroState?: React.ReactNode;\n classNames?: DataTableContentClassNames;\n};\n\nexport type DataTableContentProps = DataTableContentBaseProps;\n\nexport type VirtualizedContentProps = DataTableContentBaseProps & {\n /** Height of each row in pixels. */\n rowHeight?: number;\n /** Height of group header rows in pixels. Falls back to rowHeight if not set. */\n groupHeaderHeight?: number;\n /** Number of rows to render outside visible area. */\n overscan?: number;\n /** Distance in pixels from bottom to trigger load more. */\n loadMoreOffset?: number;\n};\n\nexport type TableQueryUpdateFn = (query: InternalQuery) => InternalQuery;\n\nexport type TableContextType<TData, TValue> = {\n table: Table<TData>;\n columns: DataTableColumnDef<TData, TValue>[];\n isLoading?: boolean;\n loadMoreData: () => void;\n mode: DataTableMode;\n defaultSort: DataTableSort;\n tableQuery?: InternalQuery;\n loadingRowCount?: number;\n onDisplaySettingsReset: () => void;\n updateTableQuery: (fn: TableQueryUpdateFn) => void;\n onRowClick?: (row: TData) => void;\n shouldShowFilters?: boolean;\n};\n\nexport interface ColumnData {\n label: string;\n id: string;\n isVisible?: boolean;\n}\n\ninterface SubRows<_T> {}\n\nexport interface GroupedData<T> extends SubRows<T> {\n label: string;\n group_key: string;\n subRows: T[];\n count?: number;\n showGroupCount?: boolean;\n}\n\nexport const defaultGroupOption = {\n id: '--',\n label: 'No grouping'\n};\n"],"names":[],"mappings":";;AAiBa,MAAA,UAAU,GAAG;AACxB,IAAA,GAAG,EAAE,KAAK;AACV,IAAA,IAAI,EAAE,MAAM;EACH;AA4JE,MAAA,kBAAkB,GAAG;AAChC,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,KAAK,EAAE,aAAa;;;;;;"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { Column, ColumnDef, Table, VisibilityState } from '@tanstack/table-core';
|
|
2
2
|
import type { DataTableFilterOperatorTypes, FilterOperatorTypes, FilterSelectOption, FilterTypes, FilterValueType } from '~/types/filters';
|
|
3
|
+
import type { BaseSelectProps } from '../select/select-root';
|
|
3
4
|
export type DataTableMode = 'client' | 'server';
|
|
4
5
|
export declare const SortOrders: {
|
|
5
6
|
readonly ASC: "asc";
|
|
@@ -51,6 +52,9 @@ export type DataTableColumnDef<TData, TValue> = ColumnDef<TData, TValue> & {
|
|
|
51
52
|
enableHiding?: boolean;
|
|
52
53
|
defaultHidden?: boolean;
|
|
53
54
|
filterOptions?: FilterSelectOption[];
|
|
55
|
+
filterProps?: {
|
|
56
|
+
select?: BaseSelectProps;
|
|
57
|
+
};
|
|
54
58
|
classNames?: {
|
|
55
59
|
cell?: string;
|
|
56
60
|
header?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table.types.d.ts","sourceRoot":"","sources":["../../../components/data-table/data-table.types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,eAAe,EAChB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EACV,4BAA4B,EAC5B,mBAAmB,EACnB,kBAAkB,EAClB,WAAW,EACX,eAAe,EAChB,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"data-table.types.d.ts","sourceRoot":"","sources":["../../../components/data-table/data-table.types.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table.types.js","sources":["../../../components/data-table/data-table.types.tsx"],"sourcesContent":["import type {\n Column,\n ColumnDef,\n Table,\n VisibilityState\n} from '@tanstack/table-core';\nimport type {\n DataTableFilterOperatorTypes,\n FilterOperatorTypes,\n FilterSelectOption,\n FilterTypes,\n FilterValueType\n} from '~/types/filters';\n\nexport type DataTableMode = 'client' | 'server';\n\nexport const SortOrders = {\n ASC: 'asc',\n DESC: 'desc'\n} as const;\n\nexport interface DataTableFilterValues {\n value: any;\n // Only one of these value fields should be present at a time\n boolValue?: boolean;\n stringValue?: string;\n numberValue?: number;\n}\n// Internal filter with UI operators and metadata\nexport interface InternalFilter extends DataTableFilterValues {\n _type?: FilterTypes;\n _dataType?: FilterValueType;\n name: string;\n operator: FilterOperatorTypes;\n}\n\n// Data table filter for backend API (no internal fields)\nexport interface DataTableFilter extends DataTableFilterValues {\n name: string;\n operator: DataTableFilterOperatorTypes;\n}\n\ntype SortOrdersKeys = keyof typeof SortOrders;\nexport type SortOrdersValues = (typeof SortOrders)[SortOrdersKeys];\n\nexport interface DataTableSort {\n name: string;\n order: SortOrdersValues;\n}\n\n// Internal query with UI operators and metadata\nexport interface InternalQuery {\n filters?: InternalFilter[];\n sort?: DataTableSort[];\n group_by?: string[];\n offset?: number;\n limit?: number;\n search?: string;\n}\n\n// Data table query for backend API (clean, no internal fields)\nexport interface DataTableQuery extends Omit<InternalQuery, 'filters'> {\n filters?: DataTableFilter[];\n}\n\nexport type DataTableColumn<TData, TValue> = Omit<\n Column<TData, TValue>,\n 'columnDef'\n> & {\n columnDef: DataTableColumnDef<TData, TValue>;\n};\n\nexport type DataTableColumnDef<TData, TValue> = ColumnDef<TData, TValue> & {\n accessorKey: string;\n header: string;\n filterType?: FilterTypes;\n dataType?: FilterValueType;\n enableColumnFilter?: boolean;\n enableSorting?: boolean;\n enableHiding?: boolean;\n defaultHidden?: boolean;\n filterOptions?: FilterSelectOption[];\n classNames?: {\n cell?: string;\n header?: string;\n };\n styles?: {\n cell?: React.CSSProperties;\n header?: React.CSSProperties;\n };\n enableGrouping?: boolean;\n showGroupCount?: boolean;\n groupCountMap?: Record<string, number>;\n groupLabelsMap?: Record<string, string>;\n // TODO: implement these\n icon?: React.ReactNode;\n};\n\nexport interface DataTableProps<TData, TValue> {\n columns: DataTableColumnDef<TData, TValue>[];\n data: TData[];\n query?: DataTableQuery; // Initial query (will be transformed to internal format)\n mode?: DataTableMode;\n isLoading?: boolean;\n loadingRowCount?: number;\n onTableQueryChange?: (query: DataTableQuery) => void;\n defaultSort: DataTableSort;\n onLoadMore?: () => Promise<void>;\n onRowClick?: (row: TData) => void;\n onColumnVisibilityChange?: (columnVisibility: VisibilityState) => void;\n}\n\nexport type DataTableContentClassNames = {\n root?: string;\n table?: string;\n header?: string;\n body?: string;\n row?: string;\n};\n\nexport type DataTableContentBaseProps = {\n emptyState?: React.ReactNode;\n zeroState?: React.ReactNode;\n classNames?: DataTableContentClassNames;\n};\n\nexport type DataTableContentProps = DataTableContentBaseProps;\n\nexport type VirtualizedContentProps = DataTableContentBaseProps & {\n /** Height of each row in pixels. */\n rowHeight?: number;\n /** Height of group header rows in pixels. Falls back to rowHeight if not set. */\n groupHeaderHeight?: number;\n /** Number of rows to render outside visible area. */\n overscan?: number;\n /** Distance in pixels from bottom to trigger load more. */\n loadMoreOffset?: number;\n};\n\nexport type TableQueryUpdateFn = (query: InternalQuery) => InternalQuery;\n\nexport type TableContextType<TData, TValue> = {\n table: Table<TData>;\n columns: DataTableColumnDef<TData, TValue>[];\n isLoading?: boolean;\n loadMoreData: () => void;\n mode: DataTableMode;\n defaultSort: DataTableSort;\n tableQuery?: InternalQuery;\n loadingRowCount?: number;\n onDisplaySettingsReset: () => void;\n updateTableQuery: (fn: TableQueryUpdateFn) => void;\n onRowClick?: (row: TData) => void;\n shouldShowFilters?: boolean;\n};\n\nexport interface ColumnData {\n label: string;\n id: string;\n isVisible?: boolean;\n}\n\ninterface SubRows<_T> {}\n\nexport interface GroupedData<T> extends SubRows<T> {\n label: string;\n group_key: string;\n subRows: T[];\n count?: number;\n showGroupCount?: boolean;\n}\n\nexport const defaultGroupOption = {\n id: '--',\n label: 'No grouping'\n};\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"data-table.types.js","sources":["../../../components/data-table/data-table.types.tsx"],"sourcesContent":["import type {\n Column,\n ColumnDef,\n Table,\n VisibilityState\n} from '@tanstack/table-core';\nimport type {\n DataTableFilterOperatorTypes,\n FilterOperatorTypes,\n FilterSelectOption,\n FilterTypes,\n FilterValueType\n} from '~/types/filters';\nimport type { BaseSelectProps } from '../select/select-root';\n\nexport type DataTableMode = 'client' | 'server';\n\nexport const SortOrders = {\n ASC: 'asc',\n DESC: 'desc'\n} as const;\n\nexport interface DataTableFilterValues {\n value: any;\n // Only one of these value fields should be present at a time\n boolValue?: boolean;\n stringValue?: string;\n numberValue?: number;\n}\n// Internal filter with UI operators and metadata\nexport interface InternalFilter extends DataTableFilterValues {\n _type?: FilterTypes;\n _dataType?: FilterValueType;\n name: string;\n operator: FilterOperatorTypes;\n}\n\n// Data table filter for backend API (no internal fields)\nexport interface DataTableFilter extends DataTableFilterValues {\n name: string;\n operator: DataTableFilterOperatorTypes;\n}\n\ntype SortOrdersKeys = keyof typeof SortOrders;\nexport type SortOrdersValues = (typeof SortOrders)[SortOrdersKeys];\n\nexport interface DataTableSort {\n name: string;\n order: SortOrdersValues;\n}\n\n// Internal query with UI operators and metadata\nexport interface InternalQuery {\n filters?: InternalFilter[];\n sort?: DataTableSort[];\n group_by?: string[];\n offset?: number;\n limit?: number;\n search?: string;\n}\n\n// Data table query for backend API (clean, no internal fields)\nexport interface DataTableQuery extends Omit<InternalQuery, 'filters'> {\n filters?: DataTableFilter[];\n}\n\nexport type DataTableColumn<TData, TValue> = Omit<\n Column<TData, TValue>,\n 'columnDef'\n> & {\n columnDef: DataTableColumnDef<TData, TValue>;\n};\n\nexport type DataTableColumnDef<TData, TValue> = ColumnDef<TData, TValue> & {\n accessorKey: string;\n header: string;\n filterType?: FilterTypes;\n dataType?: FilterValueType;\n enableColumnFilter?: boolean;\n enableSorting?: boolean;\n enableHiding?: boolean;\n defaultHidden?: boolean;\n filterOptions?: FilterSelectOption[];\n filterProps?: {\n select?: BaseSelectProps;\n };\n classNames?: {\n cell?: string;\n header?: string;\n };\n styles?: {\n cell?: React.CSSProperties;\n header?: React.CSSProperties;\n };\n enableGrouping?: boolean;\n showGroupCount?: boolean;\n groupCountMap?: Record<string, number>;\n groupLabelsMap?: Record<string, string>;\n // TODO: implement these\n icon?: React.ReactNode;\n};\n\nexport interface DataTableProps<TData, TValue> {\n columns: DataTableColumnDef<TData, TValue>[];\n data: TData[];\n query?: DataTableQuery; // Initial query (will be transformed to internal format)\n mode?: DataTableMode;\n isLoading?: boolean;\n loadingRowCount?: number;\n onTableQueryChange?: (query: DataTableQuery) => void;\n defaultSort: DataTableSort;\n onLoadMore?: () => Promise<void>;\n onRowClick?: (row: TData) => void;\n onColumnVisibilityChange?: (columnVisibility: VisibilityState) => void;\n}\n\nexport type DataTableContentClassNames = {\n root?: string;\n table?: string;\n header?: string;\n body?: string;\n row?: string;\n};\n\nexport type DataTableContentBaseProps = {\n emptyState?: React.ReactNode;\n zeroState?: React.ReactNode;\n classNames?: DataTableContentClassNames;\n};\n\nexport type DataTableContentProps = DataTableContentBaseProps;\n\nexport type VirtualizedContentProps = DataTableContentBaseProps & {\n /** Height of each row in pixels. */\n rowHeight?: number;\n /** Height of group header rows in pixels. Falls back to rowHeight if not set. */\n groupHeaderHeight?: number;\n /** Number of rows to render outside visible area. */\n overscan?: number;\n /** Distance in pixels from bottom to trigger load more. */\n loadMoreOffset?: number;\n};\n\nexport type TableQueryUpdateFn = (query: InternalQuery) => InternalQuery;\n\nexport type TableContextType<TData, TValue> = {\n table: Table<TData>;\n columns: DataTableColumnDef<TData, TValue>[];\n isLoading?: boolean;\n loadMoreData: () => void;\n mode: DataTableMode;\n defaultSort: DataTableSort;\n tableQuery?: InternalQuery;\n loadingRowCount?: number;\n onDisplaySettingsReset: () => void;\n updateTableQuery: (fn: TableQueryUpdateFn) => void;\n onRowClick?: (row: TData) => void;\n shouldShowFilters?: boolean;\n};\n\nexport interface ColumnData {\n label: string;\n id: string;\n isVisible?: boolean;\n}\n\ninterface SubRows<_T> {}\n\nexport interface GroupedData<T> extends SubRows<T> {\n label: string;\n group_key: string;\n subRows: T[];\n count?: number;\n showGroupCount?: boolean;\n}\n\nexport const defaultGroupOption = {\n id: '--',\n label: 'No grouping'\n};\n"],"names":[],"mappings":"AAiBa,MAAA,UAAU,GAAG;AACxB,IAAA,GAAG,EAAE,KAAK;AACV,IAAA,IAAI,EAAE,MAAM;EACH;AA4JE,MAAA,kBAAkB,GAAG;AAChC,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,KAAK,EAAE,aAAa;;;;;"}
|
|
@@ -28,7 +28,7 @@ const chip = classVarianceAuthority.cva(filterChip_module.default.chip, {
|
|
|
28
28
|
variant: 'default'
|
|
29
29
|
}
|
|
30
30
|
});
|
|
31
|
-
const FilterChip = ({ label, value, onRemove, className, ref, columnType = filters.FilterType.string, options = [], onValueChange, onOperationChange, leadingIcon, variant, operations, ...props }) => {
|
|
31
|
+
const FilterChip = ({ label, value, onRemove, className, ref, columnType = filters.FilterType.string, options = [], onValueChange, onOperationChange, leadingIcon, variant, operations, selectProps, ...props }) => {
|
|
32
32
|
const computedOperations = operations?.length
|
|
33
33
|
? operations
|
|
34
34
|
: filters.filterOperators[columnType];
|
|
@@ -49,7 +49,7 @@ const FilterChip = ({ label, value, onRemove, className, ref, columnType = filte
|
|
|
49
49
|
switch (columnType) {
|
|
50
50
|
case filters.FilterType.multiselect:
|
|
51
51
|
case filters.FilterType.select:
|
|
52
|
-
return (jsxRuntime.jsxs(select.Select, { value: isMultiSelectColumn ? filterValue : filterValue.toString(), onValueChange: handleFilterValueChange, multiple: isMultiSelectColumn, children: [jsxRuntime.jsx(select.Select.Trigger, { iconProps: {
|
|
52
|
+
return (jsxRuntime.jsxs(select.Select, { value: isMultiSelectColumn ? filterValue : filterValue.toString(), onValueChange: handleFilterValueChange, multiple: isMultiSelectColumn, ...selectProps, children: [jsxRuntime.jsx(select.Select.Trigger, { iconProps: {
|
|
53
53
|
style: {
|
|
54
54
|
display: 'none'
|
|
55
55
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-chip.cjs","sources":["../../../components/filter-chip/filter-chip.tsx"],"sourcesContent":["'use client';\n\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { cva, cx, VariantProps } from 'class-variance-authority';\nimport { ReactElement, ReactNode, useCallback, useState } from 'react';\nimport {\n FilterOperation,\n FilterOperator,\n FilterSelectOption,\n FilterType,\n FilterTypes,\n filterOperators\n} from '~/types/filters';\nimport { DatePicker } from '../calendar';\nimport { Flex } from '../flex';\nimport { InputField } from '../input-field';\nimport { Select } from '../select';\nimport { Text } from '../text';\nimport styles from './filter-chip.module.css';\nimport { Operation } from './filter-chip-operation';\n\nconst chip = cva(styles.chip, {\n variants: {\n variant: {\n default: styles['chip-default'],\n text: null\n }\n },\n defaultVariants: {\n variant: 'default'\n }\n});\n\nexport interface FilterChipProps extends VariantProps<typeof chip> {\n label: string;\n value?: string;\n onRemove?: () => void;\n className?: string;\n ref?: React.RefObject<HTMLDivElement>;\n children?: ReactNode;\n columnType?: FilterTypes;\n options?: FilterSelectOption[];\n onValueChange?: (value: any, operation: string) => void;\n onOperationChange?: (operation: string) => void;\n leadingIcon?: ReactElement;\n operations?: FilterOperator<string>[];\n}\n\nexport const FilterChip = ({\n label,\n value,\n onRemove,\n className,\n ref,\n columnType = FilterType.string,\n options = [],\n onValueChange,\n onOperationChange,\n leadingIcon,\n variant,\n operations,\n ...props\n}: FilterChipProps) => {\n const computedOperations = operations?.length\n ? operations\n : filterOperators[columnType];\n\n const [operation, setOperation] = useState<FilterOperation | undefined>(\n computedOperations?.[0]\n );\n const [filterValue, setFilterValue] = useState<any>(value || '');\n\n const showOnRemove = typeof onRemove === 'function';\n const isMultiSelectColumn = columnType === FilterType.multiselect;\n\n const handleOperationChange = useCallback(\n (operation: FilterOperation) => {\n setOperation(operation);\n if (operation?.value) onOperationChange?.(operation.value);\n },\n [onOperationChange]\n );\n\n const handleFilterValueChange = useCallback(\n (value: any) => {\n setFilterValue(value);\n onValueChange?.(value, operation?.value ?? '');\n },\n [operation, onValueChange]\n );\n\n const renderValueInput = () => {\n switch (columnType) {\n case FilterType.multiselect:\n case FilterType.select:\n return (\n <Select\n value={isMultiSelectColumn ? filterValue : filterValue.toString()}\n onValueChange={handleFilterValueChange}\n multiple={isMultiSelectColumn}\n >\n <Select.Trigger\n iconProps={{\n style: {\n display: 'none'\n }\n }}\n variant='text'\n className={cx(\n styles.selectValue,\n !showOnRemove && styles.selectColumn\n )}\n >\n <Select.Value placeholder='Select value'>\n {isMultiSelectColumn && filterValue.length > 1\n ? `${filterValue.length} selected`\n : undefined}\n </Select.Value>\n </Select.Trigger>\n <Select.Content data-variant='filter'>\n {options.map(opt => (\n <Select.Item\n key={opt.value.toString()}\n value={opt.value.toString()}\n >\n {opt.label}\n </Select.Item>\n ))}\n </Select.Content>\n </Select>\n );\n case FilterType.date:\n return (\n <div className={styles.dateFieldWrapper}>\n <DatePicker\n value={filterValue}\n onSelect={date => handleFilterValueChange(date)}\n showCalendarIcon={false}\n inputFieldProps={{ className: styles.dateField }}\n />\n </div>\n );\n default:\n return (\n <div className={styles.inputFieldWrapper}>\n <InputField\n variant={variant === 'text' ? 'borderless' : 'default'}\n className={styles.inputField}\n value={filterValue}\n onChange={e => handleFilterValueChange(e.target.value)}\n />\n </div>\n );\n }\n };\n\n return (\n <Flex\n align='center'\n ref={ref}\n className={chip({ variant, className })}\n role='group'\n aria-label={`Filter by ${label}`}\n data-variant={variant}\n {...props}\n >\n <Flex align='center' gap={2} className={styles['chip-label']}>\n {leadingIcon && (\n <span className={styles.leadingIcon} aria-hidden='true'>\n {leadingIcon}\n </span>\n )}\n <Text size={2} weight='normal'>\n {label}\n </Text>\n </Flex>\n <Operation\n operations={computedOperations}\n label={label}\n value={operation}\n onChange={handleOperationChange}\n showAlternateLabel={isMultiSelectColumn && filterValue.length <= 1}\n />\n {renderValueInput()}\n {showOnRemove && (\n <button\n className={styles.removeIconContainer}\n aria-label={`Remove ${label} filter`}\n onClick={onRemove}\n >\n <Cross1Icon className={styles.removeIcon} />\n </button>\n )}\n </Flex>\n );\n};\n\nFilterChip.displayName = 'FilterChip';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"filter-chip.cjs","sources":["../../../components/filter-chip/filter-chip.tsx"],"sourcesContent":["'use client';\n\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { cva, cx, VariantProps } from 'class-variance-authority';\nimport { ReactElement, ReactNode, useCallback, useState } from 'react';\nimport {\n FilterOperation,\n FilterOperator,\n FilterSelectOption,\n FilterType,\n FilterTypes,\n filterOperators\n} from '~/types/filters';\nimport { DatePicker } from '../calendar';\nimport { Flex } from '../flex';\nimport { InputField } from '../input-field';\nimport { Select } from '../select';\nimport { BaseSelectProps } from '../select/select-root';\nimport { Text } from '../text';\nimport styles from './filter-chip.module.css';\nimport { Operation } from './filter-chip-operation';\n\nconst chip = cva(styles.chip, {\n variants: {\n variant: {\n default: styles['chip-default'],\n text: null\n }\n },\n defaultVariants: {\n variant: 'default'\n }\n});\n\nexport interface FilterChipProps extends VariantProps<typeof chip> {\n label: string;\n value?: string;\n onRemove?: () => void;\n className?: string;\n ref?: React.RefObject<HTMLDivElement>;\n children?: ReactNode;\n columnType?: FilterTypes;\n options?: FilterSelectOption[];\n onValueChange?: (value: any, operation: string) => void;\n onOperationChange?: (operation: string) => void;\n leadingIcon?: ReactElement;\n operations?: FilterOperator<string>[];\n selectProps?: BaseSelectProps;\n}\n\nexport const FilterChip = ({\n label,\n value,\n onRemove,\n className,\n ref,\n columnType = FilterType.string,\n options = [],\n onValueChange,\n onOperationChange,\n leadingIcon,\n variant,\n operations,\n selectProps,\n ...props\n}: FilterChipProps) => {\n const computedOperations = operations?.length\n ? operations\n : filterOperators[columnType];\n\n const [operation, setOperation] = useState<FilterOperation | undefined>(\n computedOperations?.[0]\n );\n const [filterValue, setFilterValue] = useState<any>(value || '');\n\n const showOnRemove = typeof onRemove === 'function';\n const isMultiSelectColumn = columnType === FilterType.multiselect;\n\n const handleOperationChange = useCallback(\n (operation: FilterOperation) => {\n setOperation(operation);\n if (operation?.value) onOperationChange?.(operation.value);\n },\n [onOperationChange]\n );\n\n const handleFilterValueChange = useCallback(\n (value: any) => {\n setFilterValue(value);\n onValueChange?.(value, operation?.value ?? '');\n },\n [operation, onValueChange]\n );\n\n const renderValueInput = () => {\n switch (columnType) {\n case FilterType.multiselect:\n case FilterType.select:\n return (\n <Select\n value={isMultiSelectColumn ? filterValue : filterValue.toString()}\n onValueChange={handleFilterValueChange}\n multiple={isMultiSelectColumn}\n {...selectProps}\n >\n <Select.Trigger\n iconProps={{\n style: {\n display: 'none'\n }\n }}\n variant='text'\n className={cx(\n styles.selectValue,\n !showOnRemove && styles.selectColumn\n )}\n >\n <Select.Value placeholder='Select value'>\n {isMultiSelectColumn && filterValue.length > 1\n ? `${filterValue.length} selected`\n : undefined}\n </Select.Value>\n </Select.Trigger>\n <Select.Content data-variant='filter'>\n {options.map(opt => (\n <Select.Item\n key={opt.value.toString()}\n value={opt.value.toString()}\n >\n {opt.label}\n </Select.Item>\n ))}\n </Select.Content>\n </Select>\n );\n case FilterType.date:\n return (\n <div className={styles.dateFieldWrapper}>\n <DatePicker\n value={filterValue}\n onSelect={date => handleFilterValueChange(date)}\n showCalendarIcon={false}\n inputFieldProps={{ className: styles.dateField }}\n />\n </div>\n );\n default:\n return (\n <div className={styles.inputFieldWrapper}>\n <InputField\n variant={variant === 'text' ? 'borderless' : 'default'}\n className={styles.inputField}\n value={filterValue}\n onChange={e => handleFilterValueChange(e.target.value)}\n />\n </div>\n );\n }\n };\n\n return (\n <Flex\n align='center'\n ref={ref}\n className={chip({ variant, className })}\n role='group'\n aria-label={`Filter by ${label}`}\n data-variant={variant}\n {...props}\n >\n <Flex align='center' gap={2} className={styles['chip-label']}>\n {leadingIcon && (\n <span className={styles.leadingIcon} aria-hidden='true'>\n {leadingIcon}\n </span>\n )}\n <Text size={2} weight='normal'>\n {label}\n </Text>\n </Flex>\n <Operation\n operations={computedOperations}\n label={label}\n value={operation}\n onChange={handleOperationChange}\n showAlternateLabel={isMultiSelectColumn && filterValue.length <= 1}\n />\n {renderValueInput()}\n {showOnRemove && (\n <button\n className={styles.removeIconContainer}\n aria-label={`Remove ${label} filter`}\n onClick={onRemove}\n >\n <Cross1Icon className={styles.removeIcon} />\n </button>\n )}\n </Flex>\n );\n};\n\nFilterChip.displayName = 'FilterChip';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAsBA;AACE;AACE;AACE;AACA;AACD;AACF;AACD;AACE;AACD;AACF;AAkBY;AAgBX;AACE;AACA;AAEF;AAGA;AAEA;AACA;AAEA;;;AAG0B;AACxB;AAIF;;;AAIE;;;;;AAQI;AASQ;AACE;AACD;AACF;AASG;;;AAiBV;AAUF;;;AAYJ;AAEA;AAuCF;AAEA;;"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { VariantProps } from 'class-variance-authority';
|
|
2
2
|
import { ReactElement, ReactNode } from 'react';
|
|
3
3
|
import { FilterOperator, FilterSelectOption, FilterTypes } from '~/types/filters';
|
|
4
|
+
import { BaseSelectProps } from '../select/select-root';
|
|
4
5
|
declare const chip: (props?: ({
|
|
5
6
|
variant?: "text" | "default" | null | undefined;
|
|
6
7
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
@@ -17,9 +18,10 @@ export interface FilterChipProps extends VariantProps<typeof chip> {
|
|
|
17
18
|
onOperationChange?: (operation: string) => void;
|
|
18
19
|
leadingIcon?: ReactElement;
|
|
19
20
|
operations?: FilterOperator<string>[];
|
|
21
|
+
selectProps?: BaseSelectProps;
|
|
20
22
|
}
|
|
21
23
|
export declare const FilterChip: {
|
|
22
|
-
({ label, value, onRemove, className, ref, columnType, options, onValueChange, onOperationChange, leadingIcon, variant, operations, ...props }: FilterChipProps): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
({ label, value, onRemove, className, ref, columnType, options, onValueChange, onOperationChange, leadingIcon, variant, operations, selectProps, ...props }: FilterChipProps): import("react/jsx-runtime").JSX.Element;
|
|
23
25
|
displayName: string;
|
|
24
26
|
};
|
|
25
27
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-chip.d.ts","sourceRoot":"","sources":["../../../components/filter-chip/filter-chip.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAW,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAyB,MAAM,OAAO,CAAC;AACvE,OAAO,EAEL,cAAc,EACd,kBAAkB,EAElB,WAAW,EAEZ,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"filter-chip.d.ts","sourceRoot":"","sources":["../../../components/filter-chip/filter-chip.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAW,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAyB,MAAM,OAAO,CAAC;AACvE,OAAO,EAEL,cAAc,EACd,kBAAkB,EAElB,WAAW,EAEZ,MAAM,iBAAiB,CAAC;AAKzB,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAKxD,QAAA,MAAM,IAAI;;8EAUR,CAAC;AAEH,MAAM,WAAW,eAAgB,SAAQ,YAAY,CAAC,OAAO,IAAI,CAAC;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC/B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,EAAE,CAAC;IACtC,WAAW,CAAC,EAAE,eAAe,CAAC;CAC/B;AAED,eAAO,MAAM,UAAU;iKAepB,eAAe;;CAsIjB,CAAC"}
|
|
@@ -26,7 +26,7 @@ const chip = cva(styles.chip, {
|
|
|
26
26
|
variant: 'default'
|
|
27
27
|
}
|
|
28
28
|
});
|
|
29
|
-
const FilterChip = ({ label, value, onRemove, className, ref, columnType = FilterType.string, options = [], onValueChange, onOperationChange, leadingIcon, variant, operations, ...props }) => {
|
|
29
|
+
const FilterChip = ({ label, value, onRemove, className, ref, columnType = FilterType.string, options = [], onValueChange, onOperationChange, leadingIcon, variant, operations, selectProps, ...props }) => {
|
|
30
30
|
const computedOperations = operations?.length
|
|
31
31
|
? operations
|
|
32
32
|
: filterOperators[columnType];
|
|
@@ -47,7 +47,7 @@ const FilterChip = ({ label, value, onRemove, className, ref, columnType = Filte
|
|
|
47
47
|
switch (columnType) {
|
|
48
48
|
case FilterType.multiselect:
|
|
49
49
|
case FilterType.select:
|
|
50
|
-
return (jsxs(Select, { value: isMultiSelectColumn ? filterValue : filterValue.toString(), onValueChange: handleFilterValueChange, multiple: isMultiSelectColumn, children: [jsx(Select.Trigger, { iconProps: {
|
|
50
|
+
return (jsxs(Select, { value: isMultiSelectColumn ? filterValue : filterValue.toString(), onValueChange: handleFilterValueChange, multiple: isMultiSelectColumn, ...selectProps, children: [jsx(Select.Trigger, { iconProps: {
|
|
51
51
|
style: {
|
|
52
52
|
display: 'none'
|
|
53
53
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-chip.js","sources":["../../../components/filter-chip/filter-chip.tsx"],"sourcesContent":["'use client';\n\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { cva, cx, VariantProps } from 'class-variance-authority';\nimport { ReactElement, ReactNode, useCallback, useState } from 'react';\nimport {\n FilterOperation,\n FilterOperator,\n FilterSelectOption,\n FilterType,\n FilterTypes,\n filterOperators\n} from '~/types/filters';\nimport { DatePicker } from '../calendar';\nimport { Flex } from '../flex';\nimport { InputField } from '../input-field';\nimport { Select } from '../select';\nimport { Text } from '../text';\nimport styles from './filter-chip.module.css';\nimport { Operation } from './filter-chip-operation';\n\nconst chip = cva(styles.chip, {\n variants: {\n variant: {\n default: styles['chip-default'],\n text: null\n }\n },\n defaultVariants: {\n variant: 'default'\n }\n});\n\nexport interface FilterChipProps extends VariantProps<typeof chip> {\n label: string;\n value?: string;\n onRemove?: () => void;\n className?: string;\n ref?: React.RefObject<HTMLDivElement>;\n children?: ReactNode;\n columnType?: FilterTypes;\n options?: FilterSelectOption[];\n onValueChange?: (value: any, operation: string) => void;\n onOperationChange?: (operation: string) => void;\n leadingIcon?: ReactElement;\n operations?: FilterOperator<string>[];\n}\n\nexport const FilterChip = ({\n label,\n value,\n onRemove,\n className,\n ref,\n columnType = FilterType.string,\n options = [],\n onValueChange,\n onOperationChange,\n leadingIcon,\n variant,\n operations,\n ...props\n}: FilterChipProps) => {\n const computedOperations = operations?.length\n ? operations\n : filterOperators[columnType];\n\n const [operation, setOperation] = useState<FilterOperation | undefined>(\n computedOperations?.[0]\n );\n const [filterValue, setFilterValue] = useState<any>(value || '');\n\n const showOnRemove = typeof onRemove === 'function';\n const isMultiSelectColumn = columnType === FilterType.multiselect;\n\n const handleOperationChange = useCallback(\n (operation: FilterOperation) => {\n setOperation(operation);\n if (operation?.value) onOperationChange?.(operation.value);\n },\n [onOperationChange]\n );\n\n const handleFilterValueChange = useCallback(\n (value: any) => {\n setFilterValue(value);\n onValueChange?.(value, operation?.value ?? '');\n },\n [operation, onValueChange]\n );\n\n const renderValueInput = () => {\n switch (columnType) {\n case FilterType.multiselect:\n case FilterType.select:\n return (\n <Select\n value={isMultiSelectColumn ? filterValue : filterValue.toString()}\n onValueChange={handleFilterValueChange}\n multiple={isMultiSelectColumn}\n >\n <Select.Trigger\n iconProps={{\n style: {\n display: 'none'\n }\n }}\n variant='text'\n className={cx(\n styles.selectValue,\n !showOnRemove && styles.selectColumn\n )}\n >\n <Select.Value placeholder='Select value'>\n {isMultiSelectColumn && filterValue.length > 1\n ? `${filterValue.length} selected`\n : undefined}\n </Select.Value>\n </Select.Trigger>\n <Select.Content data-variant='filter'>\n {options.map(opt => (\n <Select.Item\n key={opt.value.toString()}\n value={opt.value.toString()}\n >\n {opt.label}\n </Select.Item>\n ))}\n </Select.Content>\n </Select>\n );\n case FilterType.date:\n return (\n <div className={styles.dateFieldWrapper}>\n <DatePicker\n value={filterValue}\n onSelect={date => handleFilterValueChange(date)}\n showCalendarIcon={false}\n inputFieldProps={{ className: styles.dateField }}\n />\n </div>\n );\n default:\n return (\n <div className={styles.inputFieldWrapper}>\n <InputField\n variant={variant === 'text' ? 'borderless' : 'default'}\n className={styles.inputField}\n value={filterValue}\n onChange={e => handleFilterValueChange(e.target.value)}\n />\n </div>\n );\n }\n };\n\n return (\n <Flex\n align='center'\n ref={ref}\n className={chip({ variant, className })}\n role='group'\n aria-label={`Filter by ${label}`}\n data-variant={variant}\n {...props}\n >\n <Flex align='center' gap={2} className={styles['chip-label']}>\n {leadingIcon && (\n <span className={styles.leadingIcon} aria-hidden='true'>\n {leadingIcon}\n </span>\n )}\n <Text size={2} weight='normal'>\n {label}\n </Text>\n </Flex>\n <Operation\n operations={computedOperations}\n label={label}\n value={operation}\n onChange={handleOperationChange}\n showAlternateLabel={isMultiSelectColumn && filterValue.length <= 1}\n />\n {renderValueInput()}\n {showOnRemove && (\n <button\n className={styles.removeIconContainer}\n aria-label={`Remove ${label} filter`}\n onClick={onRemove}\n >\n <Cross1Icon className={styles.removeIcon} />\n </button>\n )}\n </Flex>\n );\n};\n\nFilterChip.displayName = 'FilterChip';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"filter-chip.js","sources":["../../../components/filter-chip/filter-chip.tsx"],"sourcesContent":["'use client';\n\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { cva, cx, VariantProps } from 'class-variance-authority';\nimport { ReactElement, ReactNode, useCallback, useState } from 'react';\nimport {\n FilterOperation,\n FilterOperator,\n FilterSelectOption,\n FilterType,\n FilterTypes,\n filterOperators\n} from '~/types/filters';\nimport { DatePicker } from '../calendar';\nimport { Flex } from '../flex';\nimport { InputField } from '../input-field';\nimport { Select } from '../select';\nimport { BaseSelectProps } from '../select/select-root';\nimport { Text } from '../text';\nimport styles from './filter-chip.module.css';\nimport { Operation } from './filter-chip-operation';\n\nconst chip = cva(styles.chip, {\n variants: {\n variant: {\n default: styles['chip-default'],\n text: null\n }\n },\n defaultVariants: {\n variant: 'default'\n }\n});\n\nexport interface FilterChipProps extends VariantProps<typeof chip> {\n label: string;\n value?: string;\n onRemove?: () => void;\n className?: string;\n ref?: React.RefObject<HTMLDivElement>;\n children?: ReactNode;\n columnType?: FilterTypes;\n options?: FilterSelectOption[];\n onValueChange?: (value: any, operation: string) => void;\n onOperationChange?: (operation: string) => void;\n leadingIcon?: ReactElement;\n operations?: FilterOperator<string>[];\n selectProps?: BaseSelectProps;\n}\n\nexport const FilterChip = ({\n label,\n value,\n onRemove,\n className,\n ref,\n columnType = FilterType.string,\n options = [],\n onValueChange,\n onOperationChange,\n leadingIcon,\n variant,\n operations,\n selectProps,\n ...props\n}: FilterChipProps) => {\n const computedOperations = operations?.length\n ? operations\n : filterOperators[columnType];\n\n const [operation, setOperation] = useState<FilterOperation | undefined>(\n computedOperations?.[0]\n );\n const [filterValue, setFilterValue] = useState<any>(value || '');\n\n const showOnRemove = typeof onRemove === 'function';\n const isMultiSelectColumn = columnType === FilterType.multiselect;\n\n const handleOperationChange = useCallback(\n (operation: FilterOperation) => {\n setOperation(operation);\n if (operation?.value) onOperationChange?.(operation.value);\n },\n [onOperationChange]\n );\n\n const handleFilterValueChange = useCallback(\n (value: any) => {\n setFilterValue(value);\n onValueChange?.(value, operation?.value ?? '');\n },\n [operation, onValueChange]\n );\n\n const renderValueInput = () => {\n switch (columnType) {\n case FilterType.multiselect:\n case FilterType.select:\n return (\n <Select\n value={isMultiSelectColumn ? filterValue : filterValue.toString()}\n onValueChange={handleFilterValueChange}\n multiple={isMultiSelectColumn}\n {...selectProps}\n >\n <Select.Trigger\n iconProps={{\n style: {\n display: 'none'\n }\n }}\n variant='text'\n className={cx(\n styles.selectValue,\n !showOnRemove && styles.selectColumn\n )}\n >\n <Select.Value placeholder='Select value'>\n {isMultiSelectColumn && filterValue.length > 1\n ? `${filterValue.length} selected`\n : undefined}\n </Select.Value>\n </Select.Trigger>\n <Select.Content data-variant='filter'>\n {options.map(opt => (\n <Select.Item\n key={opt.value.toString()}\n value={opt.value.toString()}\n >\n {opt.label}\n </Select.Item>\n ))}\n </Select.Content>\n </Select>\n );\n case FilterType.date:\n return (\n <div className={styles.dateFieldWrapper}>\n <DatePicker\n value={filterValue}\n onSelect={date => handleFilterValueChange(date)}\n showCalendarIcon={false}\n inputFieldProps={{ className: styles.dateField }}\n />\n </div>\n );\n default:\n return (\n <div className={styles.inputFieldWrapper}>\n <InputField\n variant={variant === 'text' ? 'borderless' : 'default'}\n className={styles.inputField}\n value={filterValue}\n onChange={e => handleFilterValueChange(e.target.value)}\n />\n </div>\n );\n }\n };\n\n return (\n <Flex\n align='center'\n ref={ref}\n className={chip({ variant, className })}\n role='group'\n aria-label={`Filter by ${label}`}\n data-variant={variant}\n {...props}\n >\n <Flex align='center' gap={2} className={styles['chip-label']}>\n {leadingIcon && (\n <span className={styles.leadingIcon} aria-hidden='true'>\n {leadingIcon}\n </span>\n )}\n <Text size={2} weight='normal'>\n {label}\n </Text>\n </Flex>\n <Operation\n operations={computedOperations}\n label={label}\n value={operation}\n onChange={handleOperationChange}\n showAlternateLabel={isMultiSelectColumn && filterValue.length <= 1}\n />\n {renderValueInput()}\n {showOnRemove && (\n <button\n className={styles.removeIconContainer}\n aria-label={`Remove ${label} filter`}\n onClick={onRemove}\n >\n <Cross1Icon className={styles.removeIcon} />\n </button>\n )}\n </Flex>\n );\n};\n\nFilterChip.displayName = 'FilterChip';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAsBA;AACE;AACE;AACE;AACA;AACD;AACF;AACD;AACE;AACD;AACF;AAkBY;AAgBX;AACE;AACA;AAEF;AAGA;AAEA;AACA;AAEA;;;AAG0B;AACxB;AAIF;;;AAIE;;;;;AAQI;AASQ;AACE;AACD;AACF;AASG;;;AAiBV;AAUF;;;AAYJ;AAEA;AAuCF;AAEA;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select-root.cjs","sources":["../../../components/select/select-root.tsx"],"sourcesContent":["'use client';\n\nimport { ComboboxProvider } from '@ariakit/react';\nimport { Select as SelectPrimitive } from 'radix-ui';\nimport {\n createContext,\n useCallback,\n useContext,\n useId,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport { ItemType } from './types';\n\ninterface CommonProps {\n autocomplete?: boolean;\n autocompleteMode?: 'auto' | 'manual';\n searchValue?: string;\n onSearch?: (value: string) => void;\n defaultSearchValue?: string;\n}\n\ninterface SelectContextValue extends CommonProps {\n value?: string | string[];\n registerItem: (item: ItemType) => void;\n unregisterItem: (value: string) => void;\n multiple: boolean;\n items: Record<string, ItemType>;\n updateSelectionInProgress: (value: boolean) => void;\n setValue: (value: string) => void;\n}\n\ninterface UseSelectContext extends SelectContextValue {\n shouldFilter?: boolean;\n}\n\n/*\nRoot context to manage the Select control\n@remarks Only for internal usage.\n*/\nconst SelectContext = createContext<SelectContextValue | undefined>(undefined);\n\nexport const useSelectContext = (): UseSelectContext => {\n const context = useContext(SelectContext);\n if (!context) {\n throw new Error('useSelectContext must be used within a SelectProvider');\n }\n const shouldFilter = !!(\n context?.autocomplete &&\n context?.autocompleteMode === 'auto' &&\n context?.searchValue?.length\n );\n return {\n ...context,\n shouldFilter\n };\n};\n\ninterface NormalSelectRootProps extends SelectPrimitive.SelectProps {\n autocomplete?: false;\n autocompleteMode?: never;\n searchValue?: never;\n onSearch?: never;\n defaultSearchValue?: never;\n}\n\ninterface AutocompleteSelectRootProps\n extends SelectPrimitive.SelectProps,\n CommonProps {\n autocomplete: true;\n}\n\
|
|
1
|
+
{"version":3,"file":"select-root.cjs","sources":["../../../components/select/select-root.tsx"],"sourcesContent":["'use client';\n\nimport { ComboboxProvider } from '@ariakit/react';\nimport { Select as SelectPrimitive } from 'radix-ui';\nimport {\n createContext,\n useCallback,\n useContext,\n useId,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport { ItemType } from './types';\n\ninterface CommonProps {\n autocomplete?: boolean;\n autocompleteMode?: 'auto' | 'manual';\n searchValue?: string;\n onSearch?: (value: string) => void;\n defaultSearchValue?: string;\n}\n\ninterface SelectContextValue extends CommonProps {\n value?: string | string[];\n registerItem: (item: ItemType) => void;\n unregisterItem: (value: string) => void;\n multiple: boolean;\n items: Record<string, ItemType>;\n updateSelectionInProgress: (value: boolean) => void;\n setValue: (value: string) => void;\n}\n\ninterface UseSelectContext extends SelectContextValue {\n shouldFilter?: boolean;\n}\n\n/*\nRoot context to manage the Select control\n@remarks Only for internal usage.\n*/\nconst SelectContext = createContext<SelectContextValue | undefined>(undefined);\n\nexport const useSelectContext = (): UseSelectContext => {\n const context = useContext(SelectContext);\n if (!context) {\n throw new Error('useSelectContext must be used within a SelectProvider');\n }\n const shouldFilter = !!(\n context?.autocomplete &&\n context?.autocompleteMode === 'auto' &&\n context?.searchValue?.length\n );\n return {\n ...context,\n shouldFilter\n };\n};\n\ninterface NormalSelectRootProps extends SelectPrimitive.SelectProps {\n autocomplete?: false;\n autocompleteMode?: never;\n searchValue?: never;\n onSearch?: never;\n defaultSearchValue?: never;\n}\n\ninterface AutocompleteSelectRootProps\n extends SelectPrimitive.SelectProps,\n CommonProps {\n autocomplete: true;\n}\n\nexport type BaseSelectProps = Omit<\n NormalSelectRootProps | AutocompleteSelectRootProps,\n 'autoComplete' | 'value' | 'onValueChange' | 'defaultValue'\n> & {\n htmlAutoComplete?: string;\n};\n\nexport interface SingleSelectProps extends BaseSelectProps {\n multiple?: false;\n value?: string;\n onValueChange?: (value: string) => void;\n defaultValue?: string;\n}\n\nexport interface MultipleSelectProps extends BaseSelectProps {\n multiple: true;\n value?: string[];\n onValueChange?: (value: string[]) => void;\n defaultValue?: string[];\n}\n\nexport type SelectRootProps = SingleSelectProps | MultipleSelectProps;\n\nconst SELECT_INTERNAL_VALUE = 'SELECT_INTERNAL_VALUE';\n\nexport const SelectRoot = (props: SelectRootProps) => {\n const {\n children,\n value: providedValue,\n onValueChange,\n defaultValue,\n autocomplete,\n autocompleteMode = 'auto',\n searchValue: providedSearchValue,\n onSearch,\n defaultSearchValue = '',\n open: providedOpen,\n defaultOpen = false,\n onOpenChange,\n htmlAutoComplete,\n multiple = false,\n ...rest\n } = props;\n\n const [internalValue, setInternalValue] = useState<\n string | string[] | undefined\n >(defaultValue);\n const [internalSearchValue, setInternalSearchValue] =\n useState(defaultSearchValue);\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const [items, setItems] = useState<SelectContextValue['items']>({});\n const id = useId();\n const isSelectionInProgress = useRef(false);\n\n const computedValue = providedValue ?? internalValue;\n const searchValue = providedSearchValue ?? internalSearchValue;\n const open = providedOpen ?? internalOpen;\n\n const updateSelectionInProgress = useCallback((value: boolean) => {\n isSelectionInProgress.current = value;\n }, []);\n\n const setValue = useCallback(\n (value: string) => {\n /*\n * If the select is placed inside a form, onChange is called with an empty value\n * WORKAROUND FOR ISSUE https://github.com/radix-ui/primitives/issues/3135\n */\n if (value === '') return;\n\n if (multiple) {\n updateSelectionInProgress(true);\n const set = new Set<string>(\n Array.isArray(computedValue)\n ? computedValue\n : [computedValue ?? ''].filter(Boolean)\n );\n\n if (set.has(value)) set.delete(value);\n else set.add(value);\n\n const newValue = Array.from(set);\n\n setInternalValue(newValue);\n (onValueChange as MultipleSelectProps['onValueChange'])?.(newValue);\n } else {\n setInternalValue(value);\n (onValueChange as SingleSelectProps['onValueChange'])?.(value);\n }\n },\n [multiple, onValueChange, computedValue, updateSelectionInProgress]\n );\n\n const setSearchValue = useCallback(\n (value: string) => {\n setInternalSearchValue(value);\n onSearch?.(value);\n },\n [onSearch]\n );\n\n const handleOpenChange = useCallback(\n (value: boolean) => {\n if (isSelectionInProgress.current) return;\n setInternalOpen(value);\n onOpenChange?.(value);\n },\n [onOpenChange]\n );\n\n const registerItem = useCallback<SelectContextValue['registerItem']>(item => {\n setItems(prev => ({ ...prev, [item.value]: item }));\n }, []);\n\n const unregisterItem = useCallback<SelectContextValue['unregisterItem']>(\n value => {\n setItems(prev => {\n const { [value]: _, ...rest } = prev;\n return rest;\n });\n },\n []\n );\n\n /*\n * Radix internally shows the placeholder when the value is empty.\n * This value is used to manage the internal value of Radix Select to make it work\n */\n const radixValue = useMemo(() => {\n if (!computedValue) return '';\n if (typeof computedValue === 'string') return computedValue;\n if (Array.isArray(computedValue) && computedValue.length)\n return `${SELECT_INTERNAL_VALUE}-${id}`;\n return String(computedValue) ?? '';\n }, [computedValue, id]);\n\n const element = (\n <ComboboxProvider\n resetValueOnHide\n focusLoop={false}\n includesBaseElement={false}\n value={searchValue}\n setValue={setSearchValue}\n open={open}\n setOpen={handleOpenChange}\n >\n {children}\n </ComboboxProvider>\n );\n\n return (\n <SelectContext.Provider\n value={{\n value: computedValue,\n registerItem,\n unregisterItem,\n autocomplete,\n autocompleteMode,\n searchValue,\n multiple,\n items,\n updateSelectionInProgress,\n setValue\n }}\n >\n <SelectPrimitive.Root\n autoComplete={htmlAutoComplete}\n value={radixValue}\n onValueChange={setValue}\n open={open}\n onOpenChange={handleOpenChange}\n {...rest}\n >\n {autocomplete ? element : children}\n </SelectPrimitive.Root>\n </SelectContext.Provider>\n );\n};\n"],"names":[],"mappings":";;;;;;;;AAqCA;;;AAGE;AACF;AAEO;AACL;;AAEE;;AAEF;;AAGE;;AAGA;;;AAGJ;AAuCA;AAEa;;;;;;AA0BX;AACA;AAEA;AACA;AACA;AAEA;AACE;;AAGF;AAEI;;;AAGG;;;;;;AAOG;AACA;AAGJ;AAAoB;;AACf;;;AAKJ;;;;AAGA;;;AAMP;;AAGI;AACF;AAIF;;;;AAII;AACF;AAIF;;;AAIA;;AAGM;AACA;AACF;;AAKJ;;;AAGG;AACH;AACE;AAAoB;;AACmB;;AAErC;AACF;AACF;AAEA;AAcA;AAGM;;;;;;;;;;AAUD;AAcP;;;"}
|
|
@@ -30,7 +30,7 @@ interface NormalSelectRootProps extends SelectPrimitive.SelectProps {
|
|
|
30
30
|
interface AutocompleteSelectRootProps extends SelectPrimitive.SelectProps, CommonProps {
|
|
31
31
|
autocomplete: true;
|
|
32
32
|
}
|
|
33
|
-
type BaseSelectProps = Omit<NormalSelectRootProps | AutocompleteSelectRootProps, 'autoComplete' | 'value' | 'onValueChange' | 'defaultValue'> & {
|
|
33
|
+
export type BaseSelectProps = Omit<NormalSelectRootProps | AutocompleteSelectRootProps, 'autoComplete' | 'value' | 'onValueChange' | 'defaultValue'> & {
|
|
34
34
|
htmlAutoComplete?: string;
|
|
35
35
|
};
|
|
36
36
|
export interface SingleSelectProps extends BaseSelectProps {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select-root.d.ts","sourceRoot":"","sources":["../../../components/select/select-root.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAUrD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,UAAU,WAAW;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,UAAU,kBAAmB,SAAQ,WAAW;IAC9C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAChC,yBAAyB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,UAAU,gBAAiB,SAAQ,kBAAkB;IACnD,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAQD,eAAO,MAAM,gBAAgB,QAAO,gBAcnC,CAAC;AAEF,UAAU,qBAAsB,SAAQ,eAAe,CAAC,WAAW;IACjE,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,gBAAgB,CAAC,EAAE,KAAK,CAAC;IACzB,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,kBAAkB,CAAC,EAAE,KAAK,CAAC;CAC5B;AAED,UAAU,2BACR,SAAQ,eAAe,CAAC,WAAW,EACjC,WAAW;IACb,YAAY,EAAE,IAAI,CAAC;CACpB;AAED,
|
|
1
|
+
{"version":3,"file":"select-root.d.ts","sourceRoot":"","sources":["../../../components/select/select-root.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAUrD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,UAAU,WAAW;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,UAAU,kBAAmB,SAAQ,WAAW;IAC9C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAChC,yBAAyB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,UAAU,gBAAiB,SAAQ,kBAAkB;IACnD,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAQD,eAAO,MAAM,gBAAgB,QAAO,gBAcnC,CAAC;AAEF,UAAU,qBAAsB,SAAQ,eAAe,CAAC,WAAW;IACjE,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,gBAAgB,CAAC,EAAE,KAAK,CAAC;IACzB,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,kBAAkB,CAAC,EAAE,KAAK,CAAC;CAC5B;AAED,UAAU,2BACR,SAAQ,eAAe,CAAC,WAAW,EACjC,WAAW;IACb,YAAY,EAAE,IAAI,CAAC;CACpB;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,qBAAqB,GAAG,2BAA2B,EACnD,cAAc,GAAG,OAAO,GAAG,eAAe,GAAG,cAAc,CAC5D,GAAG;IACF,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC1D,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,MAAM,MAAM,eAAe,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAItE,eAAO,MAAM,UAAU,UAAW,eAAe,4CAwJhD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select-root.js","sources":["../../../components/select/select-root.tsx"],"sourcesContent":["'use client';\n\nimport { ComboboxProvider } from '@ariakit/react';\nimport { Select as SelectPrimitive } from 'radix-ui';\nimport {\n createContext,\n useCallback,\n useContext,\n useId,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport { ItemType } from './types';\n\ninterface CommonProps {\n autocomplete?: boolean;\n autocompleteMode?: 'auto' | 'manual';\n searchValue?: string;\n onSearch?: (value: string) => void;\n defaultSearchValue?: string;\n}\n\ninterface SelectContextValue extends CommonProps {\n value?: string | string[];\n registerItem: (item: ItemType) => void;\n unregisterItem: (value: string) => void;\n multiple: boolean;\n items: Record<string, ItemType>;\n updateSelectionInProgress: (value: boolean) => void;\n setValue: (value: string) => void;\n}\n\ninterface UseSelectContext extends SelectContextValue {\n shouldFilter?: boolean;\n}\n\n/*\nRoot context to manage the Select control\n@remarks Only for internal usage.\n*/\nconst SelectContext = createContext<SelectContextValue | undefined>(undefined);\n\nexport const useSelectContext = (): UseSelectContext => {\n const context = useContext(SelectContext);\n if (!context) {\n throw new Error('useSelectContext must be used within a SelectProvider');\n }\n const shouldFilter = !!(\n context?.autocomplete &&\n context?.autocompleteMode === 'auto' &&\n context?.searchValue?.length\n );\n return {\n ...context,\n shouldFilter\n };\n};\n\ninterface NormalSelectRootProps extends SelectPrimitive.SelectProps {\n autocomplete?: false;\n autocompleteMode?: never;\n searchValue?: never;\n onSearch?: never;\n defaultSearchValue?: never;\n}\n\ninterface AutocompleteSelectRootProps\n extends SelectPrimitive.SelectProps,\n CommonProps {\n autocomplete: true;\n}\n\
|
|
1
|
+
{"version":3,"file":"select-root.js","sources":["../../../components/select/select-root.tsx"],"sourcesContent":["'use client';\n\nimport { ComboboxProvider } from '@ariakit/react';\nimport { Select as SelectPrimitive } from 'radix-ui';\nimport {\n createContext,\n useCallback,\n useContext,\n useId,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport { ItemType } from './types';\n\ninterface CommonProps {\n autocomplete?: boolean;\n autocompleteMode?: 'auto' | 'manual';\n searchValue?: string;\n onSearch?: (value: string) => void;\n defaultSearchValue?: string;\n}\n\ninterface SelectContextValue extends CommonProps {\n value?: string | string[];\n registerItem: (item: ItemType) => void;\n unregisterItem: (value: string) => void;\n multiple: boolean;\n items: Record<string, ItemType>;\n updateSelectionInProgress: (value: boolean) => void;\n setValue: (value: string) => void;\n}\n\ninterface UseSelectContext extends SelectContextValue {\n shouldFilter?: boolean;\n}\n\n/*\nRoot context to manage the Select control\n@remarks Only for internal usage.\n*/\nconst SelectContext = createContext<SelectContextValue | undefined>(undefined);\n\nexport const useSelectContext = (): UseSelectContext => {\n const context = useContext(SelectContext);\n if (!context) {\n throw new Error('useSelectContext must be used within a SelectProvider');\n }\n const shouldFilter = !!(\n context?.autocomplete &&\n context?.autocompleteMode === 'auto' &&\n context?.searchValue?.length\n );\n return {\n ...context,\n shouldFilter\n };\n};\n\ninterface NormalSelectRootProps extends SelectPrimitive.SelectProps {\n autocomplete?: false;\n autocompleteMode?: never;\n searchValue?: never;\n onSearch?: never;\n defaultSearchValue?: never;\n}\n\ninterface AutocompleteSelectRootProps\n extends SelectPrimitive.SelectProps,\n CommonProps {\n autocomplete: true;\n}\n\nexport type BaseSelectProps = Omit<\n NormalSelectRootProps | AutocompleteSelectRootProps,\n 'autoComplete' | 'value' | 'onValueChange' | 'defaultValue'\n> & {\n htmlAutoComplete?: string;\n};\n\nexport interface SingleSelectProps extends BaseSelectProps {\n multiple?: false;\n value?: string;\n onValueChange?: (value: string) => void;\n defaultValue?: string;\n}\n\nexport interface MultipleSelectProps extends BaseSelectProps {\n multiple: true;\n value?: string[];\n onValueChange?: (value: string[]) => void;\n defaultValue?: string[];\n}\n\nexport type SelectRootProps = SingleSelectProps | MultipleSelectProps;\n\nconst SELECT_INTERNAL_VALUE = 'SELECT_INTERNAL_VALUE';\n\nexport const SelectRoot = (props: SelectRootProps) => {\n const {\n children,\n value: providedValue,\n onValueChange,\n defaultValue,\n autocomplete,\n autocompleteMode = 'auto',\n searchValue: providedSearchValue,\n onSearch,\n defaultSearchValue = '',\n open: providedOpen,\n defaultOpen = false,\n onOpenChange,\n htmlAutoComplete,\n multiple = false,\n ...rest\n } = props;\n\n const [internalValue, setInternalValue] = useState<\n string | string[] | undefined\n >(defaultValue);\n const [internalSearchValue, setInternalSearchValue] =\n useState(defaultSearchValue);\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const [items, setItems] = useState<SelectContextValue['items']>({});\n const id = useId();\n const isSelectionInProgress = useRef(false);\n\n const computedValue = providedValue ?? internalValue;\n const searchValue = providedSearchValue ?? internalSearchValue;\n const open = providedOpen ?? internalOpen;\n\n const updateSelectionInProgress = useCallback((value: boolean) => {\n isSelectionInProgress.current = value;\n }, []);\n\n const setValue = useCallback(\n (value: string) => {\n /*\n * If the select is placed inside a form, onChange is called with an empty value\n * WORKAROUND FOR ISSUE https://github.com/radix-ui/primitives/issues/3135\n */\n if (value === '') return;\n\n if (multiple) {\n updateSelectionInProgress(true);\n const set = new Set<string>(\n Array.isArray(computedValue)\n ? computedValue\n : [computedValue ?? ''].filter(Boolean)\n );\n\n if (set.has(value)) set.delete(value);\n else set.add(value);\n\n const newValue = Array.from(set);\n\n setInternalValue(newValue);\n (onValueChange as MultipleSelectProps['onValueChange'])?.(newValue);\n } else {\n setInternalValue(value);\n (onValueChange as SingleSelectProps['onValueChange'])?.(value);\n }\n },\n [multiple, onValueChange, computedValue, updateSelectionInProgress]\n );\n\n const setSearchValue = useCallback(\n (value: string) => {\n setInternalSearchValue(value);\n onSearch?.(value);\n },\n [onSearch]\n );\n\n const handleOpenChange = useCallback(\n (value: boolean) => {\n if (isSelectionInProgress.current) return;\n setInternalOpen(value);\n onOpenChange?.(value);\n },\n [onOpenChange]\n );\n\n const registerItem = useCallback<SelectContextValue['registerItem']>(item => {\n setItems(prev => ({ ...prev, [item.value]: item }));\n }, []);\n\n const unregisterItem = useCallback<SelectContextValue['unregisterItem']>(\n value => {\n setItems(prev => {\n const { [value]: _, ...rest } = prev;\n return rest;\n });\n },\n []\n );\n\n /*\n * Radix internally shows the placeholder when the value is empty.\n * This value is used to manage the internal value of Radix Select to make it work\n */\n const radixValue = useMemo(() => {\n if (!computedValue) return '';\n if (typeof computedValue === 'string') return computedValue;\n if (Array.isArray(computedValue) && computedValue.length)\n return `${SELECT_INTERNAL_VALUE}-${id}`;\n return String(computedValue) ?? '';\n }, [computedValue, id]);\n\n const element = (\n <ComboboxProvider\n resetValueOnHide\n focusLoop={false}\n includesBaseElement={false}\n value={searchValue}\n setValue={setSearchValue}\n open={open}\n setOpen={handleOpenChange}\n >\n {children}\n </ComboboxProvider>\n );\n\n return (\n <SelectContext.Provider\n value={{\n value: computedValue,\n registerItem,\n unregisterItem,\n autocomplete,\n autocompleteMode,\n searchValue,\n multiple,\n items,\n updateSelectionInProgress,\n setValue\n }}\n >\n <SelectPrimitive.Root\n autoComplete={htmlAutoComplete}\n value={radixValue}\n onValueChange={setValue}\n open={open}\n onOpenChange={handleOpenChange}\n {...rest}\n >\n {autocomplete ? element : children}\n </SelectPrimitive.Root>\n </SelectContext.Provider>\n );\n};\n"],"names":[],"mappings":";;;;;;AAqCA;;;AAGE;AACF;AAEO;AACL;;AAEE;;AAEF;;AAGE;;AAGA;;;AAGJ;AAuCA;AAEa;;;;;;AA0BX;AACA;AAEA;AACA;AACA;AAEA;AACE;;AAGF;AAEI;;;AAGG;;;;;;AAOG;AACA;AAGJ;AAAoB;;AACf;;;AAKJ;;;;AAGA;;;AAMP;;AAGI;AACF;AAIF;;;;AAII;AACF;AAIF;;;AAIA;;AAGM;AACA;AACF;;AAKJ;;;AAGG;AACH;AACE;AAAoB;;AACmB;;AAErC;AACF;AACF;AAEA;AAcA;AAGM;;;;;;;;;;AAUD;AAcP;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@raystack/apsara",
|
|
3
|
-
"version": "0.56.
|
|
3
|
+
"version": "0.56.3",
|
|
4
4
|
"types": "dist/index.d.ts",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"engines": {
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
"semver": "^7.6.0",
|
|
91
91
|
"typescript": "~5.4.3",
|
|
92
92
|
"vitest": "^3.2.4",
|
|
93
|
-
"@raystack/tools-config": "0.56.
|
|
93
|
+
"@raystack/tools-config": "0.56.3"
|
|
94
94
|
},
|
|
95
95
|
"dependencies": {
|
|
96
96
|
"@ariakit/react": "^0.4.16",
|