@drivenets/design-system 0.2.0 → 0.4.0

package/dist/components/ds-table/filters/adapters/create-dual-range-filter-adapter.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-dual-range-filter-adapter.js","names":["Row","ChipItem","FilterAdapter","RangeFilter","createFilterAdapter","RangeValue","from","to","DualRangeFilterValue","fieldName","DualRangeFilterAdapterConfig","id","label","fields","Record","formatNumber","num","getRowValue","row","TData","createDualRangeFilterAdapter","config","toLocaleString","getValue","initialValue","Object","keys","forEach","key","filterFn","columnId","filterValue","rowValue","fieldKey","range","entries","hasFilter","undefined","fieldValue","matchesFrom","matchesTo","cellRenderer","toChips","value","chips","fieldLabel","fromText","toText","push","metadata","field","fromChip","chip","currentValue","getActiveFiltersCount","count","values","renderFilter","onChange","map","rangeValue"],"sources":["../../../../../src/components/ds-table/filters/adapters/create-dual-range-filter-adapter.tsx"],"sourcesContent":["import type { Row } from '@tanstack/react-table';\nimport type { ChipItem } from '../../../ds-chip-group';\nimport type { FilterAdapter } from '../types/filter-adapter.types';\nimport { RangeFilter } from '../components/range-filter';\nimport { createFilterAdapter } from './create-filter-adapter';\n\nexport interface RangeValue {\n\tfrom?: number;\n\tto?: number;\n}\n\nexport interface DualRangeFilterValue {\n\t[fieldName: string]: RangeValue;\n}\n\nexport interface DualRangeFilterAdapterConfig<TData> {\n\t/**\n\t * Unique identifier (should match column accessorKey)\n\t */\n\tid: string;\n\n\t/**\n\t * Display label for filter navigation\n\t */\n\tlabel: string;\n\n\t/**\n\t * Field configurations: { fieldKey: displayLabel }\n\t * Example: { running: 'Running', completed: 'Completed' }\n\t */\n\tfields: Record<string, string>;\n\n\t/**\n\t * Optional formatter for chip display\n\t * @default (num) => num.toLocaleString('en-US')\n\t */\n\tformatNumber?: (num: number) => string;\n\n\t/**\n\t * How to extract the value object from a row\n\t * @default (row) => row.getValue(id)\n\t */\n\tgetRowValue?: (row: Row<TData>) => Record<string, number>;\n}\n\n/**\n * Factory function to create a dual-range filter adapter\n * Handles filtering on multiple numeric ranges within a single column\n */\nexport function createDualRangeFilterAdapter<TData>(\n\tconfig: DualRangeFilterAdapterConfig<TData>,\n): FilterAdapter<TData, DualRangeFilterValue, Record<string, number>> {\n\tconst {\n\t\tid,\n\t\tlabel,\n\t\tfields,\n\t\tformatNumber = (num) => num.toLocaleString('en-US'),\n\t\tgetRowValue = (row) => row.getValue(id),\n\t} = config;\n\n\tconst initialValue: DualRangeFilterValue = {};\n\tObject.keys(fields).forEach((key) => {\n\t\tinitialValue[key] = {};\n\t});\n\n\treturn createFilterAdapter<TData, DualRangeFilterValue, Record<string, number>>({\n\t\tid,\n\t\tlabel,\n\t\tinitialValue,\n\n\t\tfilterFn: (row, columnId, filterValue) => {\n\t\t\tconst rowValue = getRowValue(row);\n\n\t\t\t// Check each field's range\n\t\t\tfor (const [fieldKey, range] of Object.entries(filterValue)) {\n\t\t\t\tconst hasFilter = range.from !== undefined || range.to !== undefined;\n\n\t\t\t\tif (hasFilter) {\n\t\t\t\t\tconst fieldValue = rowValue[fieldKey];\n\t\t\t\t\tconst matchesFrom = range.from === undefined || fieldValue >= range.from;\n\t\t\t\t\tconst matchesTo = range.to === undefined || fieldValue <= range.to;\n\n\t\t\t\t\tif (!matchesFrom || !matchesTo) {\n\t\t\t\t\t\treturn false; // AND logic: all ranges must match\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn true;\n\t\t},\n\n\t\tcellRenderer: undefined, // Let the column definition handle rendering\n\n\t\ttoChips: (value) => {\n\t\t\tconst chips: ChipItem[] = [];\n\n\t\t\tObject.entries(value).forEach(([fieldKey, range]) => {\n\t\t\t\tconst hasFilter = range.from !== undefined || range.to !== undefined;\n\n\t\t\t\tif (hasFilter) {\n\t\t\t\t\tconst fieldLabel = fields[fieldKey] || fieldKey;\n\t\t\t\t\tconst fromText = range.from !== undefined ? formatNumber(range.from) : '';\n\t\t\t\t\tconst toText = range.to !== undefined ? formatNumber(range.to) : '';\n\n\t\t\t\t\tchips.push({\n\t\t\t\t\t\tid: `${id}_${fieldKey}`,\n\t\t\t\t\t\tlabel: `${fieldLabel}: From ${fromText} to ${toText}`,\n\t\t\t\t\t\tmetadata: {\n\t\t\t\t\t\t\tkey: id,\n\t\t\t\t\t\t\tfield: fieldKey,\n\t\t\t\t\t\t\tfrom: range.from,\n\t\t\t\t\t\t\tto: range.to,\n\t\t\t\t\t\t},\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t});\n\n\t\t\treturn chips;\n\t\t},\n\n\t\tfromChip: (chip, currentValue) => {\n\t\t\tconst fieldKey = chip.metadata?.field as string;\n\t\t\tif (!fieldKey) {\n\t\t\t\treturn currentValue;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\t...currentValue,\n\t\t\t\t[fieldKey]: {},\n\t\t\t};\n\t\t},\n\n\t\tgetActiveFiltersCount: (value) => {\n\t\t\tlet count = 0;\n\t\t\tObject.values(value).forEach((range) => {\n\t\t\t\tif (range.from !== undefined || range.to !== undefined) {\n\t\t\t\t\tcount++;\n\t\t\t\t}\n\t\t\t});\n\t\t\treturn count;\n\t\t},\n\n\t\trenderFilter: (value, onChange) => {\n\t\t\treturn (\n\t\t\t\t<div>\n\t\t\t\t\t{Object.entries(fields).map(([fieldKey, fieldLabel]) => (\n\t\t\t\t\t\t<RangeFilter\n\t\t\t\t\t\t\tkey={fieldKey}\n\t\t\t\t\t\t\tlabel={fieldLabel}\n\t\t\t\t\t\t\t// This is not necessarily a redundant condition. It depends on `noUncheckedIndexedAccess`.\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n\t\t\t\t\t\t\tvalue={value[fieldKey] || {}}\n\t\t\t\t\t\t\tonChange={(rangeValue) =>\n\t\t\t\t\t\t\t\tonChange({\n\t\t\t\t\t\t\t\t\t...value,\n\t\t\t\t\t\t\t\t\t[fieldKey]: rangeValue,\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClear={() =>\n\t\t\t\t\t\t\t\tonChange({\n\t\t\t\t\t\t\t\t\t...value,\n\t\t\t\t\t\t\t\t\t[fieldKey]: {},\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t);\n\t\t},\n\t});\n}\n"],"mappings":";;;;;;;;;;AAiDA,SAAgBoB,6BACfC,QACqE;CACrE,MAAM,EACLV,IACAC,OACAC,QACAE,gBAAgBC,QAAQA,IAAIM,eAAe,QAAQ,EACnDL,eAAeC,QAAQA,IAAIK,SAASZ,GAAE,KACnCU;CAEJ,MAAMG,eAAqC,EAAE;AAC7CC,QAAOC,KAAKb,OAAO,CAACc,SAASC,QAAQ;AACpCJ,eAAaI,OAAO,EAAE;GACrB;AAEF,QAAOxB,oBAAyE;EAC/EO;EACAC;EACAY;EAEAK,WAAWX,KAAKY,UAAUC,gBAAgB;GACzC,MAAMC,WAAWf,YAAYC,IAAI;AAGjC,QAAK,MAAM,CAACe,UAAUC,UAAUT,OAAOU,QAAQJ,YAAY,CAG1D,KAFkBG,MAAM5B,SAAS+B,UAAaH,MAAM3B,OAAO8B,QAE5C;IACd,MAAMC,aAAaN,SAASC;IAC5B,MAAMM,cAAcL,MAAM5B,SAAS+B,UAAaC,cAAcJ,MAAM5B;IACpE,MAAMkC,YAAYN,MAAM3B,OAAO8B,UAAaC,cAAcJ,MAAM3B;AAEhE,QAAI,CAACgC,eAAe,CAACC,UACpB,QAAO;;AAKV,UAAO;;EAGRC,cAAcJ;EAEdK,UAAUC,UAAU;GACnB,MAAMC,QAAoB,EAAE;AAE5BnB,UAAOU,QAAQQ,MAAM,CAAChB,SAAS,CAACM,UAAUC,WAAW;AAGpD,QAFkBA,MAAM5B,SAAS+B,UAAaH,MAAM3B,OAAO8B,QAE5C;KACd,MAAMQ,aAAahC,OAAOoB,aAAaA;KACvC,MAAMa,WAAWZ,MAAM5B,SAAS+B,SAAYtB,aAAamB,MAAM5B,KAAK,GAAG;KACvE,MAAMyC,SAASb,MAAM3B,OAAO8B,SAAYtB,aAAamB,MAAM3B,GAAG,GAAG;AAEjEqC,WAAMI,KAAK;MACVrC,IAAI,GAAGA,GAAE,GAAIsB;MACbrB,OAAO,GAAGiC,WAAU,SAAUC,SAAQ,MAAOC;MAC7CE,UAAU;OACTrB,KAAKjB;OACLuC,OAAOjB;OACP3B,MAAM4B,MAAM5B;OACZC,IAAI2B,MAAM3B;OACX;MACA,CAAC;;KAEF;AAEF,UAAOqC;;EAGRO,WAAWC,MAAMC,iBAAiB;GACjC,MAAMpB,WAAWmB,KAAKH,UAAUC;AAChC,OAAI,CAACjB,SACJ,QAAOoB;AAGR,UAAO;IACN,GAAGA;KACFpB,WAAW,EAAC;IACb;;EAGFqB,wBAAwBX,UAAU;GACjC,IAAIY,QAAQ;AACZ9B,UAAO+B,OAAOb,MAAM,CAAChB,SAASO,UAAU;AACvC,QAAIA,MAAM5B,SAAS+B,UAAaH,MAAM3B,OAAO8B,OAC5CkB;KAEA;AACF,UAAOA;;EAGRE,eAAed,OAAOe,aAAa;AAClC,UACC,oBAAC,mBACCjC,OAAOU,QAAQtB,OAAO,CAAC8C,KAAK,CAAC1B,UAAUY,gBACvC,oBAAC;IAEA,OAAOA;IAGP,OAAOF,MAAMV,aAAa,EAAE;IAC5B,WAAW2B,eACVF,SAAS;KACR,GAAGf;MACFV,WAAW2B;KACZ,CACF;IACA,eACCF,SAAS;KACR,GAAGf;MACFV,WAAW,EAAC;KACb,CACF;MAhBKA,SAkBN,CAAC,GACG;;EAGR,CAAC"}
+{"version":3,"file":"create-dual-range-filter-adapter.js","names":["Row","ChipItem","FilterAdapter","RangeFilter","createFilterAdapter","RangeValue","from","to","DualRangeFilterValue","fieldName","DualRangeFilterAdapterConfig","id","label","fields","Record","formatNumber","num","getRowValue","row","TData","createDualRangeFilterAdapter","config","toLocaleString","getValue","initialValue","Object","keys","forEach","key","filterFn","columnId","filterValue","rowValue","fieldKey","range","entries","hasFilter","undefined","fieldValue","matchesFrom","matchesTo","cellRenderer","toChips","value","chips","fieldLabel","fromText","toText","push","metadata","field","fromChip","chip","currentValue","getActiveFiltersCount","count","values","renderFilter","onChange","map","rangeValue"],"sources":["../../../../../src/components/ds-table/filters/adapters/create-dual-range-filter-adapter.tsx"],"sourcesContent":["import type { Row } from '@tanstack/react-table';\nimport type { ChipItem } from '../../../ds-chip-group';\nimport type { FilterAdapter } from '../types/filter-adapter.types';\nimport { RangeFilter } from '../components/range-filter';\nimport { createFilterAdapter } from './create-filter-adapter';\n\nexport interface RangeValue {\n\tfrom?: number;\n\tto?: number;\n}\n\nexport interface DualRangeFilterValue {\n\t[fieldName: string]: RangeValue;\n}\n\nexport interface DualRangeFilterAdapterConfig<TData> {\n\t/**\n\t * Unique identifier (should match column accessorKey)\n\t */\n\tid: string;\n\n\t/**\n\t * Display label for filter navigation\n\t */\n\tlabel: string;\n\n\t/**\n\t * Field configurations: { fieldKey: displayLabel }\n\t * Example: { running: 'Running', completed: 'Completed' }\n\t */\n\tfields: Record<string, string>;\n\n\t/**\n\t * Optional formatter for chip display\n\t * @default (num) => num.toLocaleString('en-US')\n\t */\n\tformatNumber?: (num: number) => string;\n\n\t/**\n\t * How to extract the value object from a row\n\t * @default (row) => row.getValue(id)\n\t */\n\tgetRowValue?: (row: Row<TData>) => Record<string, number>;\n}\n\n/**\n * Factory function to create a dual-range filter adapter\n * Handles filtering on multiple numeric ranges within a single column\n */\nexport function createDualRangeFilterAdapter<TData>(\n\tconfig: DualRangeFilterAdapterConfig<TData>,\n): FilterAdapter<TData, DualRangeFilterValue, Record<string, number>> {\n\tconst {\n\t\tid,\n\t\tlabel,\n\t\tfields,\n\t\tformatNumber = (num) => num.toLocaleString('en-US'),\n\t\tgetRowValue = (row) => row.getValue(id),\n\t} = config;\n\n\tconst initialValue: DualRangeFilterValue = {};\n\tObject.keys(fields).forEach((key) => {\n\t\tinitialValue[key] = {};\n\t});\n\n\treturn createFilterAdapter<TData, DualRangeFilterValue, Record<string, number>>({\n\t\tid,\n\t\tlabel,\n\t\tinitialValue,\n\n\t\tfilterFn: (row, columnId, filterValue) => {\n\t\t\tconst rowValue = getRowValue(row);\n\n\t\t\t// Check each field's range\n\t\t\tfor (const [fieldKey, range] of Object.entries(filterValue)) {\n\t\t\t\tconst hasFilter = range.from !== undefined || range.to !== undefined;\n\t\t\t\tconst fieldValue = rowValue[fieldKey];\n\n\t\t\t\tif (hasFilter && fieldValue !== undefined) {\n\t\t\t\t\tconst matchesFrom = range.from === undefined || fieldValue >= range.from;\n\t\t\t\t\tconst matchesTo = range.to === undefined || fieldValue <= range.to;\n\n\t\t\t\t\tif (!matchesFrom || !matchesTo) {\n\t\t\t\t\t\treturn false; // AND logic: all ranges must match\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn true;\n\t\t},\n\n\t\tcellRenderer: undefined, // Let the column definition handle rendering\n\n\t\ttoChips: (value) => {\n\t\t\tconst chips: ChipItem[] = [];\n\n\t\t\tObject.entries(value).forEach(([fieldKey, range]) => {\n\t\t\t\tconst hasFilter = range.from !== undefined || range.to !== undefined;\n\n\t\t\t\tif (hasFilter) {\n\t\t\t\t\tconst fieldLabel = fields[fieldKey] || fieldKey;\n\t\t\t\t\tconst fromText = range.from !== undefined ? formatNumber(range.from) : '';\n\t\t\t\t\tconst toText = range.to !== undefined ? formatNumber(range.to) : '';\n\n\t\t\t\t\tchips.push({\n\t\t\t\t\t\tid: `${id}_${fieldKey}`,\n\t\t\t\t\t\tlabel: `${fieldLabel}: From ${fromText} to ${toText}`,\n\t\t\t\t\t\tmetadata: {\n\t\t\t\t\t\t\tkey: id,\n\t\t\t\t\t\t\tfield: fieldKey,\n\t\t\t\t\t\t\tfrom: range.from,\n\t\t\t\t\t\t\tto: range.to,\n\t\t\t\t\t\t},\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t});\n\n\t\t\treturn chips;\n\t\t},\n\n\t\tfromChip: (chip, currentValue) => {\n\t\t\tconst fieldKey = chip.metadata?.field as string;\n\t\t\tif (!fieldKey) {\n\t\t\t\treturn currentValue;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\t...currentValue,\n\t\t\t\t[fieldKey]: {},\n\t\t\t};\n\t\t},\n\n\t\tgetActiveFiltersCount: (value) => {\n\t\t\tlet count = 0;\n\t\t\tObject.values(value).forEach((range) => {\n\t\t\t\tif (range.from !== undefined || range.to !== undefined) {\n\t\t\t\t\tcount++;\n\t\t\t\t}\n\t\t\t});\n\t\t\treturn count;\n\t\t},\n\n\t\trenderFilter: (value, onChange) => {\n\t\t\treturn (\n\t\t\t\t<div>\n\t\t\t\t\t{Object.entries(fields).map(([fieldKey, fieldLabel]) => (\n\t\t\t\t\t\t<RangeFilter\n\t\t\t\t\t\t\tkey={fieldKey}\n\t\t\t\t\t\t\tlabel={fieldLabel}\n\t\t\t\t\t\t\tvalue={value[fieldKey] || {}}\n\t\t\t\t\t\t\tonChange={(rangeValue) =>\n\t\t\t\t\t\t\t\tonChange({\n\t\t\t\t\t\t\t\t\t...value,\n\t\t\t\t\t\t\t\t\t[fieldKey]: rangeValue,\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClear={() =>\n\t\t\t\t\t\t\t\tonChange({\n\t\t\t\t\t\t\t\t\t...value,\n\t\t\t\t\t\t\t\t\t[fieldKey]: {},\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t);\n\t\t},\n\t});\n}\n"],"mappings":";;;;;;;;;;AAiDA,SAAgBoB,6BACfC,QACqE;CACrE,MAAM,EACLV,IACAC,OACAC,QACAE,gBAAgBC,QAAQA,IAAIM,eAAe,QAAQ,EACnDL,eAAeC,QAAQA,IAAIK,SAASZ,GAAE,KACnCU;CAEJ,MAAMG,eAAqC,EAAE;AAC7CC,QAAOC,KAAKb,OAAO,CAACc,SAASC,QAAQ;AACpCJ,eAAaI,OAAO,EAAE;GACrB;AAEF,QAAOxB,oBAAyE;EAC/EO;EACAC;EACAY;EAEAK,WAAWX,KAAKY,UAAUC,gBAAgB;GACzC,MAAMC,WAAWf,YAAYC,IAAI;AAGjC,QAAK,MAAM,CAACe,UAAUC,UAAUT,OAAOU,QAAQJ,YAAY,EAAE;IAC5D,MAAMK,YAAYF,MAAM5B,SAAS+B,UAAaH,MAAM3B,OAAO8B;IAC3D,MAAMC,aAAaN,SAASC;AAE5B,QAAIG,aAAaE,eAAeD,QAAW;KAC1C,MAAME,cAAcL,MAAM5B,SAAS+B,UAAaC,cAAcJ,MAAM5B;KACpE,MAAMkC,YAAYN,MAAM3B,OAAO8B,UAAaC,cAAcJ,MAAM3B;AAEhE,SAAI,CAACgC,eAAe,CAACC,UACpB,QAAO;;;AAKV,UAAO;;EAGRC,cAAcJ;EAEdK,UAAUC,UAAU;GACnB,MAAMC,QAAoB,EAAE;AAE5BnB,UAAOU,QAAQQ,MAAM,CAAChB,SAAS,CAACM,UAAUC,WAAW;AAGpD,QAFkBA,MAAM5B,SAAS+B,UAAaH,MAAM3B,OAAO8B,QAE5C;KACd,MAAMQ,aAAahC,OAAOoB,aAAaA;KACvC,MAAMa,WAAWZ,MAAM5B,SAAS+B,SAAYtB,aAAamB,MAAM5B,KAAK,GAAG;KACvE,MAAMyC,SAASb,MAAM3B,OAAO8B,SAAYtB,aAAamB,MAAM3B,GAAG,GAAG;AAEjEqC,WAAMI,KAAK;MACVrC,IAAI,GAAGA,GAAE,GAAIsB;MACbrB,OAAO,GAAGiC,WAAU,SAAUC,SAAQ,MAAOC;MAC7CE,UAAU;OACTrB,KAAKjB;OACLuC,OAAOjB;OACP3B,MAAM4B,MAAM5B;OACZC,IAAI2B,MAAM3B;OACX;MACA,CAAC;;KAEF;AAEF,UAAOqC;;EAGRO,WAAWC,MAAMC,iBAAiB;GACjC,MAAMpB,WAAWmB,KAAKH,UAAUC;AAChC,OAAI,CAACjB,SACJ,QAAOoB;AAGR,UAAO;IACN,GAAGA;KACFpB,WAAW,EAAC;IACb;;EAGFqB,wBAAwBX,UAAU;GACjC,IAAIY,QAAQ;AACZ9B,UAAO+B,OAAOb,MAAM,CAAChB,SAASO,UAAU;AACvC,QAAIA,MAAM5B,SAAS+B,UAAaH,MAAM3B,OAAO8B,OAC5CkB;KAEA;AACF,UAAOA;;EAGRE,eAAed,OAAOe,aAAa;AAClC,UACC,oBAAC,mBACCjC,OAAOU,QAAQtB,OAAO,CAAC8C,KAAK,CAAC1B,UAAUY,gBACvC,oBAAC;IAEA,OAAOA;IACP,OAAOF,MAAMV,aAAa,EAAE;IAC5B,WAAW2B,eACVF,SAAS;KACR,GAAGf;MACFV,WAAW2B;KACZ,CACF;IACA,eACCF,SAAS;KACR,GAAGf;MACFV,WAAW,EAAC;KACb,CACF;MAdKA,SAgBN,CAAC,GACG;;EAGR,CAAC"}

package/dist/components/ds-table/filters/hooks/index.d.ts

@@ -1 +1 @@
-import { UseTableFiltersResult, useTableFilters } from "./use-table-filters.js";
+import { UseTableFiltersOptions, UseTableFiltersResult, useTableFilters } from "./use-table-filters.js";

package/dist/components/ds-table/filters/hooks/use-table-filters.cjs

@@ -4,176 +4,176 @@ let react = require("react");
 
 //#region src/components/ds-table/filters/hooks/use-table-filters.ts
 /**
-* Hook to orchestrate table filtering with adapters
-* Manages filter state, generates chips, handles column definitions
+* Hook to orchestrate table filtering with adapters.
+* Manages filter state, generates chips, and handles column definitions.
 *
-* @param filterAdapters Array of filter adapters
-* @param baseColumns Base column definitions (optional)
-* @returns Complete filter management system
+* **Uncontrolled mode** (default): Filters are managed internally.
+* **Controlled mode**: Filters are managed externally via appliedFilters/onFiltersChange.
+*
+* @example
+* // Uncontrolled mode
+* const { filterChips, handlers } = useTableFilters({
+*   filterAdapters: adapters,
+*   baseColumns: columns,
+* });
+*
+* @example
+* // Controlled mode (e.g., URL-driven filtering)
+* const { filterChips, handlers } = useTableFilters({
+*   filterAdapters: adapters,
+*   baseColumns: columns,
+*   appliedFilters: filtersFromUrl,
+*   onFiltersChange: (filters) => updateUrlAndRefetch(filters),
+* });
 */
-function useTableFilters(filterAdapters, baseColumns) {
-	const $ = (0, react_compiler_runtime.c)(37);
+function useTableFilters(t0) {
+	const $ = (0, react_compiler_runtime.c)(30);
+	const { filterAdapters, baseColumns, appliedFilters: externalAppliedFilters, onFiltersChange: setExternalAppliedFilters } = t0;
 	const _filterAdapters = filterAdapters;
-	let initialState;
-	if ($[0] !== _filterAdapters) {
-		initialState = {};
-		_filterAdapters.forEach((adapter) => {
-			initialState[adapter.id] = adapter.initialValue;
-		});
-		$[0] = _filterAdapters;
-		$[1] = initialState;
-	} else initialState = $[1];
-	const [filterState, setFilterState] = (0, react.useState)(initialState);
-	let t0;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = [];
-		$[2] = t0;
-	} else t0 = $[2];
-	const [columnFilters, setColumnFilters] = (0, react.useState)(t0);
+	const isControlled = externalAppliedFilters !== void 0 && setExternalAppliedFilters !== void 0;
+	const initialFilters = _filterAdapters.reduce(_temp, {});
 	let t1;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = [];
-		$[3] = t1;
-	} else t1 = $[3];
-	const [filterChips, setFilterChips] = (0, react.useState)(t1);
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = {};
+		$[0] = t1;
+	} else t1 = $[0];
+	const [internalAppliedFilters, setInternalAppliedFilters] = (0, react.useState)(t1);
 	let t2;
-	if ($[4] !== _filterAdapters || $[5] !== filterState) {
-		let t3$1;
-		if ($[7] !== filterState) {
-			t3$1 = (adapter_0) => ({
-				id: adapter_0.id,
-				label: adapter_0.label,
-				count: adapter_0.getActiveFiltersCount(filterState[adapter_0.id])
-			});
-			$[7] = filterState;
-			$[8] = t3$1;
-		} else t3$1 = $[8];
-		t2 = _filterAdapters.map(t3$1);
-		$[4] = _filterAdapters;
-		$[5] = filterState;
-		$[6] = t2;
-	} else t2 = $[6];
-	const filterNavItems = t2;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = {};
+		$[1] = t2;
+	} else t2 = $[1];
+	const [pendingFilters, setPendingFilters] = (0, react.useState)(t2);
+	const appliedFilters = isControlled ? externalAppliedFilters : internalAppliedFilters;
+	const setAppliedFilters = isControlled ? setExternalAppliedFilters : setInternalAppliedFilters;
+	const draftFilters = {
+		...initialFilters,
+		...appliedFilters,
+		...pendingFilters
+	};
 	let t3;
-	if ($[9] !== _filterAdapters || $[10] !== baseColumns) {
-		t3 = !baseColumns ? [] : baseColumns.map((col) => {
-			const adapter_1 = _filterAdapters.find((a) => a.id === col.id);
-			if (adapter_1) {
-				const cellRenderer = adapter_1.cellRenderer;
-				return {
-					...col,
-					filterFn: adapter_1.columnFilterFn,
-					...cellRenderer && { cell: (info) => cellRenderer(info.getValue()) }
-				};
-			}
-			return col;
-		});
-		$[9] = _filterAdapters;
-		$[10] = baseColumns;
-		$[11] = t3;
-	} else t3 = $[11];
-	const enhancedColumns = t3;
+	if ($[2] !== appliedFilters) {
+		t3 = Object.entries(appliedFilters);
+		$[2] = appliedFilters;
+		$[3] = t3;
+	} else t3 = $[3];
 	let t4;
-	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = (filterId, value) => {
-			setFilterState((prev) => ({
-				...prev,
-				[filterId]: value
-			}));
-		};
-		$[12] = t4;
-	} else t4 = $[12];
-	const updateFilter = t4;
+	if ($[4] !== _filterAdapters || $[5] !== appliedFilters || $[6] !== t3) {
+		t4 = t3.filter((t5$1) => {
+			const [id] = t5$1;
+			const adapter_0 = _filterAdapters.find((a) => a.id === id);
+			return adapter_0 ? adapter_0.getActiveFiltersCount(appliedFilters[id]) > 0 : false;
+		}).map(_temp2);
+		$[4] = _filterAdapters;
+		$[5] = appliedFilters;
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	const columnFilters = t4;
 	let t5;
-	if ($[13] !== _filterAdapters || $[14] !== filterState) {
-		t5 = () => {
-			const filters = [];
-			const chips = [];
-			_filterAdapters.forEach((adapter_2) => {
-				const value_0 = filterState[adapter_2.id];
-				if (adapter_2.getActiveFiltersCount(value_0) > 0) filters.push({
-					id: adapter_2.id,
-					value: value_0
-				});
-				const adapterChips = adapter_2.toChips(value_0);
-				chips.push(...adapterChips);
-			});
-			setColumnFilters(filters);
-			setFilterChips(chips);
-		};
-		$[13] = _filterAdapters;
-		$[14] = filterState;
-		$[15] = t5;
-	} else t5 = $[15];
-	const applyFilters = t5;
+	if ($[8] !== _filterAdapters || $[9] !== appliedFilters) {
+		let t6$1;
+		if ($[11] !== appliedFilters) {
+			t6$1 = (adapter_1) => {
+				const value_0 = appliedFilters[adapter_1.id];
+				return value_0 !== void 0 ? adapter_1.toChips(value_0) : [];
+			};
+			$[11] = appliedFilters;
+			$[12] = t6$1;
+		} else t6$1 = $[12];
+		t5 = _filterAdapters.flatMap(t6$1);
+		$[8] = _filterAdapters;
+		$[9] = appliedFilters;
+		$[10] = t5;
+	} else t5 = $[10];
+	const filterChips = t5;
+	const filterNavItems = _filterAdapters.map((adapter_2) => ({
+		id: adapter_2.id,
+		label: adapter_2.label,
+		count: adapter_2.getActiveFiltersCount(draftFilters[adapter_2.id])
+	}));
 	let t6;
-	if ($[16] !== _filterAdapters) {
-		t6 = () => {
-			const resetState = {};
-			_filterAdapters.forEach((adapter_3) => {
-				resetState[adapter_3.id] = adapter_3.reset();
-			});
-			setFilterState(resetState);
-			setColumnFilters([]);
-			setFilterChips([]);
-		};
-		$[16] = _filterAdapters;
-		$[17] = t6;
-	} else t6 = $[17];
-	const clearAll = t6;
+	if ($[13] !== _filterAdapters || $[14] !== baseColumns) {
+		t6 = !baseColumns ? [] : baseColumns.map((col) => {
+			const adapter_3 = _filterAdapters.find((a_0) => a_0.id === col.id);
+			if (!adapter_3) return col;
+			const cellRenderer = adapter_3.cellRenderer;
+			return {
+				...col,
+				filterFn: adapter_3.columnFilterFn,
+				...cellRenderer && { cell: (info) => cellRenderer(info.getValue()) }
+			};
+		});
+		$[13] = _filterAdapters;
+		$[14] = baseColumns;
+		$[15] = t6;
+	} else t6 = $[15];
+	const enhancedColumns = t6;
 	let t7;
-	if ($[18] !== _filterAdapters || $[19] !== clearAll || $[20] !== filterState) {
-		t7 = (chip) => {
-			const filterKey = typeof chip.metadata?.key === "string" ? chip.metadata.key : void 0;
-			if (!filterKey) return;
-			const adapter_4 = _filterAdapters.find((a_0) => a_0.id === filterKey);
-			if (!adapter_4) return;
-			const currentValue = filterState[filterKey];
-			const newValue = adapter_4.fromChip(chip, currentValue);
-			const chips_0 = [];
-			_filterAdapters.forEach((adapter_5) => {
-				const value_1 = adapter_5.id === filterKey ? newValue : filterState[adapter_5.id];
-				const adapterChips_0 = adapter_5.toChips(value_1);
-				chips_0.push(...adapterChips_0);
-			});
-			if (chips_0.length === 0) {
-				clearAll();
-				return;
-			}
-			setFilterState((prev_0) => ({
-				...prev_0,
-				[filterKey]: newValue
+	if ($[16] !== setPendingFilters) {
+		t7 = (filterId, value_1) => {
+			setPendingFilters((prev) => ({
+				...prev,
+				[filterId]: value_1
 			}));
-			if (adapter_4.getActiveFiltersCount(newValue) === 0) setColumnFilters((prev_1) => prev_1.filter((cf) => cf.id !== filterKey));
-			else setColumnFilters((prev_2) => prev_2.map((cf_0) => cf_0.id === filterKey ? {
-				id: filterKey,
-				value: newValue
-			} : cf_0));
-			setFilterChips(chips_0);
 		};
-		$[18] = _filterAdapters;
-		$[19] = clearAll;
-		$[20] = filterState;
-		$[21] = t7;
-	} else t7 = $[21];
-	const deleteChip = t7;
+		$[16] = setPendingFilters;
+		$[17] = t7;
+	} else t7 = $[17];
+	const updateFilter = t7;
+	const applyFilters = () => {
+		setAppliedFilters(_filterAdapters.reduce((acc, adapter_4) => {
+			const value_2 = draftFilters[adapter_4.id];
+			if (adapter_4.getActiveFiltersCount(value_2) > 0) acc[adapter_4.id] = value_2;
+			return acc;
+		}, {}));
+		setPendingFilters({});
+	};
 	let t8;
-	if ($[22] !== _filterAdapters || $[23] !== filterState) {
-		t8 = (selectedFilter) => {
-			const adapter_6 = _filterAdapters.find((a_1) => a_1.id === selectedFilter.id);
-			if (!adapter_6) return null;
-			const value_2 = filterState[adapter_6.id];
-			const onChange = (newValue_0) => updateFilter(adapter_6.id, newValue_0);
-			return adapter_6.renderFilter(value_2, onChange);
+	if ($[18] !== setAppliedFilters || $[19] !== setPendingFilters) {
+		t8 = () => {
+			setPendingFilters({});
+			setAppliedFilters({});
 		};
-		$[22] = _filterAdapters;
-		$[23] = filterState;
-		$[24] = t8;
-	} else t8 = $[24];
-	const renderFilterContent = t8;
+		$[18] = setAppliedFilters;
+		$[19] = setPendingFilters;
+		$[20] = t8;
+	} else t8 = $[20];
+	const clearAll = t8;
 	let t9;
-	if ($[25] !== applyFilters || $[26] !== clearAll || $[27] !== deleteChip) {
-		t9 = {
+	if ($[21] !== _filterAdapters || $[22] !== appliedFilters || $[23] !== setAppliedFilters) {
+		t9 = (chip) => {
+			const filterKey = typeof chip.metadata?.key === "string" ? chip.metadata.key : void 0;
+			if (!filterKey) return;
+			const adapter_5 = _filterAdapters.find((a_1) => a_1.id === filterKey);
+			if (!adapter_5) return;
+			const currentValue = appliedFilters[filterKey];
+			if (currentValue === void 0) return;
+			const newValue = adapter_5.fromChip(chip, currentValue);
+			setAppliedFilters(adapter_5.getActiveFiltersCount(newValue) === 0 ? Object.fromEntries(Object.entries(appliedFilters).filter((t10$1) => {
+				const [key] = t10$1;
+				return key !== filterKey;
+			})) : {
+				...appliedFilters,
+				[filterKey]: newValue
+			});
+		};
+		$[21] = _filterAdapters;
+		$[22] = appliedFilters;
+		$[23] = setAppliedFilters;
+		$[24] = t9;
+	} else t9 = $[24];
+	const deleteChip = t9;
+	const renderFilterContent = (selectedFilter) => {
+		const adapter_6 = _filterAdapters.find((a_2) => a_2.id === selectedFilter.id);
+		if (!adapter_6) return null;
+		const value_3 = draftFilters[adapter_6.id];
+		const onChange = (newValue_0) => updateFilter(adapter_6.id, newValue_0);
+		return adapter_6.renderFilter(value_3, onChange);
+	};
+	let t10;
+	if ($[25] !== applyFilters || $[26] !== clearAll || $[27] !== deleteChip || $[28] !== updateFilter) {
+		t10 = {
 			updateFilter,
 			applyFilters,
 			clearAll,
@@ -182,29 +182,31 @@ function useTableFilters(filterAdapters, baseColumns) {
 		$[25] = applyFilters;
 		$[26] = clearAll;
 		$[27] = deleteChip;
-		$[28] = t9;
-	} else t9 = $[28];
-	let t10;
-	if ($[29] !== columnFilters || $[30] !== enhancedColumns || $[31] !== filterChips || $[32] !== filterNavItems || $[33] !== filterState || $[34] !== renderFilterContent || $[35] !== t9) {
-		t10 = {
-			filterState,
-			columnFilters,
-			filterChips,
-			filterNavItems,
-			enhancedColumns,
-			handlers: t9,
-			renderFilterContent
-		};
-		$[29] = columnFilters;
-		$[30] = enhancedColumns;
-		$[31] = filterChips;
-		$[32] = filterNavItems;
-		$[33] = filterState;
-		$[34] = renderFilterContent;
-		$[35] = t9;
-		$[36] = t10;
-	} else t10 = $[36];
-	return t10;
+		$[28] = updateFilter;
+		$[29] = t10;
+	} else t10 = $[29];
+	return {
+		filterState: draftFilters,
+		columnFilters,
+		filterChips,
+		filterNavItems,
+		enhancedColumns,
+		handlers: t10,
+		renderFilterContent
+	};
+}
+function _temp2(t0) {
+	const [id_0, value] = t0;
+	return {
+		id: id_0,
+		value
+	};
+}
+function _temp(state, adapter) {
+	return {
+		...state,
+		[adapter.id]: adapter.initialValue
+	};
 }
 
 //#endregion

package/dist/components/ds-table/filters/hooks/use-table-filters.d.cts

@@ -4,21 +4,42 @@ import { ReactNode } from "react";
 import { ColumnDef } from "@tanstack/react-table";
 
 //#region src/components/ds-table/filters/hooks/use-table-filters.d.ts
+interface UseTableFiltersOptions<TData, TValue, TCellValue> {
+  /**
+   * Array of filter adapters that define filter behavior
+   */
+  filterAdapters: FilterAdapter<TData, TValue, TCellValue>[] | AnyAdapter[];
+  /**
+   * Base column definitions
+   */
+  baseColumns?: ColumnDef<TData>[];
+  /**
+   * Controlled mode: External applied filters (source of truth).
+   * When provided with onFiltersChange, the hook operates in controlled mode.
+   * Keys must match adapter IDs.
+   */
+  appliedFilters?: FilterState<TValue>;
+  /**
+   * Controlled mode: Callback when filters change.
+   * Called by applyFilters(), deleteChip(), clearAll().
+   */
+  onFiltersChange?: (filters: FilterState<TValue>) => void;
+}
 interface UseTableFiltersResult<TData, TValue> {
   /**
-   * Current filter state
+   * Current draft filter state (uncommitted user selections)
    */
   filterState: FilterState<TValue>;
   /**
-   * Column filters for TanStack Table
+   * Column filters (derived from applied state)
    */
   columnFilters: ColumnFilterState<TValue>[];
   /**
-   * Filter chips for display
+   * Filter chips for display (derived from applied state)
    */
   filterChips: ChipItem[];
   /**
-   * Filter navigation items with counts
+   * Filter navigation items with active counts
    */
   filterNavItems: FilterNavItem[];
   /**
@@ -26,40 +47,52 @@ interface UseTableFiltersResult<TData, TValue> {
    */
   enhancedColumns: ColumnDef<TData>[];
   /**
-   * Handlers
+   * Handlers for filter operations
    */
   handlers: {
-    /**
-     * Update a specific filter's value
-     */
+    /** Update a specific filter's draft value */
     updateFilter: (filterId: string, value: TValue) => void;
-    /**
-     * Apply all filters (converts to TanStack format)
-     */
+    /** Commit draft state to applied state */
     applyFilters: () => void;
-    /**
-     * Clear all filters
-     */
+    /** Clear all filters */
     clearAll: () => void;
-    /**
-     * Delete a specific chip
-     */
+    /** Delete a specific filter chip */
     deleteChip: (chip: ChipItem) => void;
   };
   /**
-   * Render function for filter modal content
+   * Render function for filter content
    */
   renderFilterContent: (selectedFilter: FilterNavItem) => ReactNode;
 }
 /**
- * Hook to orchestrate table filtering with adapters
- * Manages filter state, generates chips, handles column definitions
+ * Hook to orchestrate table filtering with adapters.
+ * Manages filter state, generates chips, and handles column definitions.
+ *
+ * **Uncontrolled mode** (default): Filters are managed internally.
+ * **Controlled mode**: Filters are managed externally via appliedFilters/onFiltersChange.
+ *
+ * @example
+ * // Uncontrolled mode
+ * const { filterChips, handlers } = useTableFilters({
+ *   filterAdapters: adapters,
+ *   baseColumns: columns,
+ * });
  *
- * @param filterAdapters Array of filter adapters
- * @param baseColumns Base column definitions (optional)
- * @returns Complete filter management system
+ * @example
+ * // Controlled mode (e.g., URL-driven filtering)
+ * const { filterChips, handlers } = useTableFilters({
+ *   filterAdapters: adapters,
+ *   baseColumns: columns,
+ *   appliedFilters: filtersFromUrl,
+ *   onFiltersChange: (filters) => updateUrlAndRefetch(filters),
+ * });
  */
-declare function useTableFilters<TData, TValue, TCellValue>(filterAdapters: FilterAdapter<TData, TValue, TCellValue>[] | AnyAdapter[], baseColumns?: ColumnDef<TData>[]): UseTableFiltersResult<TData, TValue>;
+declare function useTableFilters<TData, TValue, TCellValue>({
+  filterAdapters,
+  baseColumns,
+  appliedFilters: externalAppliedFilters,
+  onFiltersChange: setExternalAppliedFilters
+}: UseTableFiltersOptions<TData, TValue, TCellValue>): UseTableFiltersResult<TData, TValue>;
 //#endregion
-export { UseTableFiltersResult, useTableFilters };
+export { UseTableFiltersOptions, UseTableFiltersResult, useTableFilters };
 //# sourceMappingURL=use-table-filters.d.cts.map

package/dist/components/ds-table/filters/hooks/use-table-filters.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"use-table-filters.d.cts","names":[],"sources":["../../../../../src/components/ds-table/filters/hooks/use-table-filters.ts"],"sourcesContent":[],"mappings":";;;;;;UAWiB;;AAAjB;;EAIc,WAAA,EAAA,WAAA,CAAY,MAAZ,CAAA;EAKoB;;;EAUjB,aAAA,EAVD,iBAUC,CAViB,MAUjB,CAAA,EAAA;EAKW;;;EAwBP,WAAA,EAlCP,QAkCO,EAAA;EAMkB;;;EAWvB,cAAA,EA9CC,aA8Cc,EAAA;EACA;;;EAAd,eAAA,EA1CC,SA0CD,CA1CW,KA0CX,CAAA,EAAA;EAA6C;;;EAErC,QAAA,EAAA;IAAO;;;4CAnCU;;;;;;;;;;;;uBAerB;;;;;wCAMkB,kBAAkB;;;;;;;;;;iBAWzC,2DACC,cAAc,OAAO,QAAQ,gBAAgB,4BAC/C,UAAU,WACtB,sBAAsB,OAAO"}
+{"version":3,"file":"use-table-filters.d.cts","names":[],"sources":["../../../../../src/components/ds-table/filters/hooks/use-table-filters.ts"],"sourcesContent":[],"mappings":";;;;;;UAWiB;;AAAjB;;EAIsC,cAAA,EAArB,aAAqB,CAAP,KAAO,EAAA,MAAA,EAAQ,UAAR,CAAA,EAAA,GAAwB,UAAxB,EAAA;EAAQ;;;EAKrB,WAAA,CAAA,EAAV,SAAU,CAAA,KAAA,CAAA,EAAA;EAAV;;;;;EAayB,cAAA,CAAA,EANtB,WAMsB,CANV,MAMU,CAAA;EAGvB;;;;EASD,eAAA,CAAA,EAAA,CAAA,OAAA,EAZa,WAYb,CAZyB,MAYzB,CAAA,EAAA,GAAA,IAAA;;AAUC,UAnBA,qBAmBA,CAAA,KAAA,EAAA,MAAA,CAAA,CAAA;EAKW;;;EAaP,WAAA,EAjCP,WAiCO,CAjCK,MAiCL,CAAA;EAMkB;;;EA0BvB,aAAA,EA5DA,iBA4De,CA5DG,MA4DH,CAAA,EAAA;EAC9B;;;EAGiB,WAAA,EA3DJ,QA2DI,EAAA;EACQ;;;EAAvB,cAAA,EAvDc,aAuDd,EAAA;EAA0E;;;EAAD,eAAA,EAlD1D,SAkD0D,CAlDhD,KAkDgD,CAAA,EAAA;;;;;;4CA3ClC;;;;;;uBAMrB;;;;;wCAMkB,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;iBA0BzC;;;kBAGC;mBACC;GACf,uBAAuB,OAAO,QAAQ,cAAc,sBAAsB,OAAO"}