@drivenets/design-system 0.3.0 → 0.4.0

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.
Files changed (149) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/README.md +1 -1
  3. package/dist/components/ds-alert-banner/ds-alert-banner.d.cts +5 -5
  4. package/dist/components/ds-alert-banner/ds-alert-banner.d.cts.map +1 -1
  5. package/dist/components/ds-alert-banner/ds-alert-banner.d.ts +5 -5
  6. package/dist/components/ds-alert-banner/ds-alert-banner.d.ts.map +1 -1
  7. package/dist/components/ds-alert-banner/ds-alert-banner.types.d.cts.map +1 -1
  8. package/dist/components/ds-autocomplete/ds-autocomplete.cjs +218 -0
  9. package/dist/components/ds-autocomplete/ds-autocomplete.d.cts +22 -0
  10. package/dist/components/ds-autocomplete/ds-autocomplete.d.cts.map +1 -0
  11. package/dist/components/ds-autocomplete/ds-autocomplete.d.ts +22 -0
  12. package/dist/components/ds-autocomplete/ds-autocomplete.d.ts.map +1 -0
  13. package/dist/components/ds-autocomplete/ds-autocomplete.js +217 -0
  14. package/dist/components/ds-autocomplete/ds-autocomplete.js.map +1 -0
  15. package/dist/components/ds-autocomplete/ds-autocomplete.module.cjs +27 -0
  16. package/dist/components/ds-autocomplete/ds-autocomplete.module.js +27 -0
  17. package/dist/components/ds-autocomplete/ds-autocomplete.module.js.map +1 -0
  18. package/dist/components/ds-autocomplete/ds-autocomplete.types.d.cts +79 -0
  19. package/dist/components/ds-autocomplete/ds-autocomplete.types.d.cts.map +1 -0
  20. package/dist/components/ds-autocomplete/ds-autocomplete.types.d.ts +80 -0
  21. package/dist/components/ds-autocomplete/ds-autocomplete.types.d.ts.map +1 -0
  22. package/dist/components/ds-autocomplete/index.cjs +1 -0
  23. package/dist/components/ds-autocomplete/index.d.ts +2 -0
  24. package/dist/components/ds-autocomplete/index.js +1 -0
  25. package/dist/components/ds-avatar/ds-avatar.module.js.map +1 -1
  26. package/dist/components/ds-avatar-group/ds-avatar-group.module.js.map +1 -1
  27. package/dist/components/ds-button/ds-button.d.cts +2 -2
  28. package/dist/components/ds-button/ds-button.d.cts.map +1 -1
  29. package/dist/components/ds-confirmation/ds-confirmation.cjs +20 -221
  30. package/dist/components/ds-confirmation/ds-confirmation.d.cts +22 -27
  31. package/dist/components/ds-confirmation/ds-confirmation.d.cts.map +1 -1
  32. package/dist/components/ds-confirmation/ds-confirmation.d.ts +22 -27
  33. package/dist/components/ds-confirmation/ds-confirmation.d.ts.map +1 -1
  34. package/dist/components/ds-confirmation/ds-confirmation.js +21 -221
  35. package/dist/components/ds-confirmation/ds-confirmation.js.map +1 -1
  36. package/dist/components/ds-confirmation/ds-confirmation.types.d.cts +2 -1
  37. package/dist/components/ds-confirmation/ds-confirmation.types.d.cts.map +1 -1
  38. package/dist/components/ds-confirmation/ds-confirmation.types.d.ts +2 -1
  39. package/dist/components/ds-confirmation/ds-confirmation.types.d.ts.map +1 -1
  40. package/dist/components/ds-date-input/ds-date-input.cjs +1 -1
  41. package/dist/components/ds-date-input/ds-date-input.d.cts +2 -2
  42. package/dist/components/ds-date-input/ds-date-input.d.ts +2 -2
  43. package/dist/components/ds-date-input/ds-date-input.js +1 -1
  44. package/dist/components/ds-drawer/ds-drawer.cjs +1 -1
  45. package/dist/components/ds-drawer/ds-drawer.d.cts +9 -9
  46. package/dist/components/ds-drawer/ds-drawer.d.cts.map +1 -1
  47. package/dist/components/ds-drawer/ds-drawer.d.ts +9 -9
  48. package/dist/components/ds-drawer/ds-drawer.js +1 -1
  49. package/dist/components/ds-dropdown-menu/ds-dropdown-menu.cjs +1 -1
  50. package/dist/components/ds-dropdown-menu/ds-dropdown-menu.js +1 -1
  51. package/dist/components/ds-dropdown-menu/ds-dropdown-menu.module.cjs +20 -20
  52. package/dist/components/ds-dropdown-menu/ds-dropdown-menu.module.js +20 -20
  53. package/dist/components/ds-dropdown-menu/ds-dropdown-menu.module.js.map +1 -1
  54. package/dist/components/ds-expandable-text-input/ds-expandable-text-input.d.cts +2 -2
  55. package/dist/components/ds-expandable-text-input/ds-expandable-text-input.d.ts +2 -2
  56. package/dist/components/ds-form-control/ds-form-control.d.cts +8 -8
  57. package/dist/components/ds-form-control/ds-form-control.d.ts +8 -8
  58. package/dist/components/ds-loader/ds-loader.d.cts +2 -2
  59. package/dist/components/ds-loader/ds-loader.d.ts +2 -2
  60. package/dist/components/ds-modal/ds-modal.cjs +47 -48
  61. package/dist/components/ds-modal/ds-modal.d.cts +11 -10
  62. package/dist/components/ds-modal/ds-modal.d.cts.map +1 -1
  63. package/dist/components/ds-modal/ds-modal.d.ts +11 -10
  64. package/dist/components/ds-modal/ds-modal.d.ts.map +1 -1
  65. package/dist/components/ds-modal/ds-modal.js +47 -48
  66. package/dist/components/ds-modal/ds-modal.js.map +1 -1
  67. package/dist/components/ds-modal/ds-modal.module.cjs +24 -24
  68. package/dist/components/ds-modal/ds-modal.module.js +24 -24
  69. package/dist/components/ds-modal/ds-modal.module.js.map +1 -1
  70. package/dist/components/ds-modal/ds-modal.types.d.cts +10 -5
  71. package/dist/components/ds-modal/ds-modal.types.d.cts.map +1 -1
  72. package/dist/components/ds-modal/ds-modal.types.d.ts +10 -5
  73. package/dist/components/ds-modal/ds-modal.types.d.ts.map +1 -1
  74. package/dist/components/ds-panel/ds-panel.d.cts +2 -2
  75. package/dist/components/ds-panel/ds-panel.d.ts +2 -2
  76. package/dist/components/ds-select/ds-select.cjs +1 -1
  77. package/dist/components/ds-select/ds-select.d.cts +2 -2
  78. package/dist/components/ds-select/ds-select.js +1 -1
  79. package/dist/components/ds-skeleton/ds-skeleton-circle.d.cts +2 -2
  80. package/dist/components/ds-skeleton/ds-skeleton-circle.d.ts +2 -2
  81. package/dist/components/ds-skeleton/ds-skeleton-rect.d.cts +2 -2
  82. package/dist/components/ds-skeleton/ds-skeleton-rect.d.ts +2 -2
  83. package/dist/components/ds-skeleton/ds-skeleton-rect.d.ts.map +1 -1
  84. package/dist/components/ds-skeleton/ds-skeleton-text.d.cts +2 -2
  85. package/dist/components/ds-skeleton/ds-skeleton-text.d.ts +2 -2
  86. package/dist/components/ds-skeleton/ds-skeleton.d.cts +4 -4
  87. package/dist/components/ds-skeleton/ds-skeleton.d.ts +4 -4
  88. package/dist/components/ds-smart-tabs/ds-smart-tabs.d.cts +2 -2
  89. package/dist/components/ds-smart-tabs/ds-smart-tabs.d.ts +2 -2
  90. package/dist/components/ds-smart-tabs/ds-smart-tabs.d.ts.map +1 -1
  91. package/dist/components/ds-stepper/components/ds-step-content.d.cts +2 -2
  92. package/dist/components/ds-stepper/components/ds-step-content.d.ts +2 -2
  93. package/dist/components/ds-stepper/components/ds-step-next-button.d.cts +2 -2
  94. package/dist/components/ds-stepper/components/ds-step-next-button.d.ts +2 -2
  95. package/dist/components/ds-stepper/components/ds-step.d.cts +2 -2
  96. package/dist/components/ds-stepper/components/ds-step.d.ts +2 -2
  97. package/dist/components/ds-stepper/ds-stepper.d.cts +2 -2
  98. package/dist/components/ds-stepper/ds-stepper.d.ts +2 -2
  99. package/dist/components/ds-table/ds-table.d.ts +2 -2
  100. package/dist/components/ds-table/filters/hooks/index.d.ts +1 -1
  101. package/dist/components/ds-table/filters/hooks/use-table-filters.cjs +180 -185
  102. package/dist/components/ds-table/filters/hooks/use-table-filters.d.cts +58 -25
  103. package/dist/components/ds-table/filters/hooks/use-table-filters.d.cts.map +1 -1
  104. package/dist/components/ds-table/filters/hooks/use-table-filters.d.ts +58 -25
  105. package/dist/components/ds-table/filters/hooks/use-table-filters.d.ts.map +1 -1
  106. package/dist/components/ds-table/filters/hooks/use-table-filters.js +180 -185
  107. package/dist/components/ds-table/filters/hooks/use-table-filters.js.map +1 -1
  108. package/dist/components/ds-table/filters/index.d.ts +1 -1
  109. package/dist/components/ds-table/index.d.ts +1 -1
  110. package/dist/components/ds-tabs/components/ds-tabs-content/ds-tabs-content.module.cjs +2 -2
  111. package/dist/components/ds-tabs/components/ds-tabs-content/ds-tabs-content.module.js +2 -2
  112. package/dist/components/ds-tabs/components/ds-tabs-content/ds-tabs-content.module.js.map +1 -1
  113. package/dist/components/ds-tabs/ds-tabs.d.cts +5 -5
  114. package/dist/components/ds-tabs/ds-tabs.d.ts +5 -5
  115. package/dist/components/ds-tag/ds-tag.d.cts +2 -2
  116. package/dist/components/ds-tag/ds-tag.d.ts +2 -2
  117. package/dist/components/ds-tag-filter/ds-tag-filter.d.cts +2 -2
  118. package/dist/components/ds-tag-filter/ds-tag-filter.d.ts +2 -2
  119. package/dist/components/ds-toggle/ds-toggle.d.cts +2 -2
  120. package/dist/components/ds-toggle/ds-toggle.d.ts +2 -2
  121. package/dist/components/ds-vertical-tabs/ds-vertical-tabs.d.cts +5 -5
  122. package/dist/components/ds-vertical-tabs/ds-vertical-tabs.d.ts +5 -5
  123. package/dist/index.cjs +4 -1
  124. package/dist/index.d.cts +4 -2
  125. package/dist/index.d.ts +5 -2
  126. package/dist/index.js +4 -2
  127. package/dist/index.min.css +1 -1
  128. package/package.json +1 -1
  129. package/src/components/ds-autocomplete/ds-autocomplete.module.scss +257 -0
  130. package/src/components/ds-autocomplete/ds-autocomplete.tsx +130 -0
  131. package/src/components/ds-autocomplete/ds-autocomplete.types.tsx +76 -0
  132. package/src/components/ds-autocomplete/index.ts +2 -0
  133. package/src/components/ds-avatar/ds-avatar.module.scss +1 -1
  134. package/src/components/ds-avatar-group/ds-avatar-group.module.scss +1 -1
  135. package/src/components/ds-confirmation/ds-confirmation.tsx +11 -115
  136. package/src/components/ds-confirmation/ds-confirmation.types.tsx +2 -1
  137. package/src/components/ds-dropdown-menu/ds-dropdown-menu.module.scss +0 -1
  138. package/src/components/ds-modal/ds-modal.module.scss +123 -60
  139. package/src/components/ds-modal/ds-modal.tsx +5 -2
  140. package/src/components/ds-modal/ds-modal.types.tsx +14 -5
  141. package/src/components/ds-table/filters/hooks/index.ts +1 -1
  142. package/src/components/ds-table/filters/hooks/use-table-filters.ts +117 -116
  143. package/src/components/ds-tabs/components/ds-tabs-content/ds-tabs-content.module.scss +4 -0
  144. package/src/index.ts +1 -0
  145. package/src/styles/shared/_modal.scss +0 -123
  146. package/dist/components/ds-confirmation/ds-confirmation.module.cjs +0 -21
  147. package/dist/components/ds-confirmation/ds-confirmation.module.js +0 -21
  148. package/dist/components/ds-confirmation/ds-confirmation.module.js.map +0 -1
  149. package/src/components/ds-confirmation/ds-confirmation.module.scss +0 -58
@@ -4,21 +4,42 @@ import { ReactNode } from "react";
4
4
  import { ColumnDef } from "@tanstack/react-table";
5
5
 
6
6
  //#region src/components/ds-table/filters/hooks/use-table-filters.d.ts
7
+ interface UseTableFiltersOptions<TData, TValue, TCellValue> {
8
+ /**
9
+ * Array of filter adapters that define filter behavior
10
+ */
11
+ filterAdapters: FilterAdapter<TData, TValue, TCellValue>[] | AnyAdapter[];
12
+ /**
13
+ * Base column definitions
14
+ */
15
+ baseColumns?: ColumnDef<TData>[];
16
+ /**
17
+ * Controlled mode: External applied filters (source of truth).
18
+ * When provided with onFiltersChange, the hook operates in controlled mode.
19
+ * Keys must match adapter IDs.
20
+ */
21
+ appliedFilters?: FilterState<TValue>;
22
+ /**
23
+ * Controlled mode: Callback when filters change.
24
+ * Called by applyFilters(), deleteChip(), clearAll().
25
+ */
26
+ onFiltersChange?: (filters: FilterState<TValue>) => void;
27
+ }
7
28
  interface UseTableFiltersResult<TData, TValue> {
8
29
  /**
9
- * Current filter state
30
+ * Current draft filter state (uncommitted user selections)
10
31
  */
11
32
  filterState: FilterState<TValue>;
12
33
  /**
13
- * Column filters for TanStack Table
34
+ * Column filters (derived from applied state)
14
35
  */
15
36
  columnFilters: ColumnFilterState<TValue>[];
16
37
  /**
17
- * Filter chips for display
38
+ * Filter chips for display (derived from applied state)
18
39
  */
19
40
  filterChips: ChipItem[];
20
41
  /**
21
- * Filter navigation items with counts
42
+ * Filter navigation items with active counts
22
43
  */
23
44
  filterNavItems: FilterNavItem[];
24
45
  /**
@@ -26,40 +47,52 @@ interface UseTableFiltersResult<TData, TValue> {
26
47
  */
27
48
  enhancedColumns: ColumnDef<TData>[];
28
49
  /**
29
- * Handlers
50
+ * Handlers for filter operations
30
51
  */
31
52
  handlers: {
32
- /**
33
- * Update a specific filter's value
34
- */
53
+ /** Update a specific filter's draft value */
35
54
  updateFilter: (filterId: string, value: TValue) => void;
36
- /**
37
- * Apply all filters (converts to TanStack format)
38
- */
55
+ /** Commit draft state to applied state */
39
56
  applyFilters: () => void;
40
- /**
41
- * Clear all filters
42
- */
57
+ /** Clear all filters */
43
58
  clearAll: () => void;
44
- /**
45
- * Delete a specific chip
46
- */
59
+ /** Delete a specific filter chip */
47
60
  deleteChip: (chip: ChipItem) => void;
48
61
  };
49
62
  /**
50
- * Render function for filter modal content
63
+ * Render function for filter content
51
64
  */
52
65
  renderFilterContent: (selectedFilter: FilterNavItem) => ReactNode;
53
66
  }
54
67
  /**
55
- * Hook to orchestrate table filtering with adapters
56
- * Manages filter state, generates chips, handles column definitions
68
+ * Hook to orchestrate table filtering with adapters.
69
+ * Manages filter state, generates chips, and handles column definitions.
70
+ *
71
+ * **Uncontrolled mode** (default): Filters are managed internally.
72
+ * **Controlled mode**: Filters are managed externally via appliedFilters/onFiltersChange.
73
+ *
74
+ * @example
75
+ * // Uncontrolled mode
76
+ * const { filterChips, handlers } = useTableFilters({
77
+ * filterAdapters: adapters,
78
+ * baseColumns: columns,
79
+ * });
57
80
  *
58
- * @param filterAdapters Array of filter adapters
59
- * @param baseColumns Base column definitions (optional)
60
- * @returns Complete filter management system
81
+ * @example
82
+ * // Controlled mode (e.g., URL-driven filtering)
83
+ * const { filterChips, handlers } = useTableFilters({
84
+ * filterAdapters: adapters,
85
+ * baseColumns: columns,
86
+ * appliedFilters: filtersFromUrl,
87
+ * onFiltersChange: (filters) => updateUrlAndRefetch(filters),
88
+ * });
61
89
  */
62
- declare function useTableFilters<TData, TValue, TCellValue>(filterAdapters: FilterAdapter<TData, TValue, TCellValue>[] | AnyAdapter[], baseColumns?: ColumnDef<TData>[]): UseTableFiltersResult<TData, TValue>;
90
+ declare function useTableFilters<TData, TValue, TCellValue>({
91
+ filterAdapters,
92
+ baseColumns,
93
+ appliedFilters: externalAppliedFilters,
94
+ onFiltersChange: setExternalAppliedFilters
95
+ }: UseTableFiltersOptions<TData, TValue, TCellValue>): UseTableFiltersResult<TData, TValue>;
63
96
  //#endregion
64
- export { UseTableFiltersResult, useTableFilters };
97
+ export { UseTableFiltersOptions, UseTableFiltersResult, useTableFilters };
65
98
  //# sourceMappingURL=use-table-filters.d.cts.map
@@ -1 +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"}
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;;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"}
@@ -5,21 +5,42 @@ import { ReactNode } from "react";
5
5
  import { ColumnDef } from "@tanstack/react-table";
6
6
 
7
7
  //#region src/components/ds-table/filters/hooks/use-table-filters.d.ts
8
+ interface UseTableFiltersOptions<TData, TValue, TCellValue> {
9
+ /**
10
+ * Array of filter adapters that define filter behavior
11
+ */
12
+ filterAdapters: FilterAdapter<TData, TValue, TCellValue>[] | AnyAdapter[];
13
+ /**
14
+ * Base column definitions
15
+ */
16
+ baseColumns?: ColumnDef<TData>[];
17
+ /**
18
+ * Controlled mode: External applied filters (source of truth).
19
+ * When provided with onFiltersChange, the hook operates in controlled mode.
20
+ * Keys must match adapter IDs.
21
+ */
22
+ appliedFilters?: FilterState<TValue>;
23
+ /**
24
+ * Controlled mode: Callback when filters change.
25
+ * Called by applyFilters(), deleteChip(), clearAll().
26
+ */
27
+ onFiltersChange?: (filters: FilterState<TValue>) => void;
28
+ }
8
29
  interface UseTableFiltersResult<TData, TValue> {
9
30
  /**
10
- * Current filter state
31
+ * Current draft filter state (uncommitted user selections)
11
32
  */
12
33
  filterState: FilterState<TValue>;
13
34
  /**
14
- * Column filters for TanStack Table
35
+ * Column filters (derived from applied state)
15
36
  */
16
37
  columnFilters: ColumnFilterState<TValue>[];
17
38
  /**
18
- * Filter chips for display
39
+ * Filter chips for display (derived from applied state)
19
40
  */
20
41
  filterChips: ChipItem[];
21
42
  /**
22
- * Filter navigation items with counts
43
+ * Filter navigation items with active counts
23
44
  */
24
45
  filterNavItems: FilterNavItem[];
25
46
  /**
@@ -27,40 +48,52 @@ interface UseTableFiltersResult<TData, TValue> {
27
48
  */
28
49
  enhancedColumns: ColumnDef<TData>[];
29
50
  /**
30
- * Handlers
51
+ * Handlers for filter operations
31
52
  */
32
53
  handlers: {
33
- /**
34
- * Update a specific filter's value
35
- */
54
+ /** Update a specific filter's draft value */
36
55
  updateFilter: (filterId: string, value: TValue) => void;
37
- /**
38
- * Apply all filters (converts to TanStack format)
39
- */
56
+ /** Commit draft state to applied state */
40
57
  applyFilters: () => void;
41
- /**
42
- * Clear all filters
43
- */
58
+ /** Clear all filters */
44
59
  clearAll: () => void;
45
- /**
46
- * Delete a specific chip
47
- */
60
+ /** Delete a specific filter chip */
48
61
  deleteChip: (chip: ChipItem) => void;
49
62
  };
50
63
  /**
51
- * Render function for filter modal content
64
+ * Render function for filter content
52
65
  */
53
66
  renderFilterContent: (selectedFilter: FilterNavItem) => ReactNode;
54
67
  }
55
68
  /**
56
- * Hook to orchestrate table filtering with adapters
57
- * Manages filter state, generates chips, handles column definitions
69
+ * Hook to orchestrate table filtering with adapters.
70
+ * Manages filter state, generates chips, and handles column definitions.
71
+ *
72
+ * **Uncontrolled mode** (default): Filters are managed internally.
73
+ * **Controlled mode**: Filters are managed externally via appliedFilters/onFiltersChange.
74
+ *
75
+ * @example
76
+ * // Uncontrolled mode
77
+ * const { filterChips, handlers } = useTableFilters({
78
+ * filterAdapters: adapters,
79
+ * baseColumns: columns,
80
+ * });
58
81
  *
59
- * @param filterAdapters Array of filter adapters
60
- * @param baseColumns Base column definitions (optional)
61
- * @returns Complete filter management system
82
+ * @example
83
+ * // Controlled mode (e.g., URL-driven filtering)
84
+ * const { filterChips, handlers } = useTableFilters({
85
+ * filterAdapters: adapters,
86
+ * baseColumns: columns,
87
+ * appliedFilters: filtersFromUrl,
88
+ * onFiltersChange: (filters) => updateUrlAndRefetch(filters),
89
+ * });
62
90
  */
63
- declare function useTableFilters<TData, TValue, TCellValue>(filterAdapters: FilterAdapter<TData, TValue, TCellValue>[] | AnyAdapter[], baseColumns?: ColumnDef<TData>[]): UseTableFiltersResult<TData, TValue>;
91
+ declare function useTableFilters<TData, TValue, TCellValue>({
92
+ filterAdapters,
93
+ baseColumns,
94
+ appliedFilters: externalAppliedFilters,
95
+ onFiltersChange: setExternalAppliedFilters
96
+ }: UseTableFiltersOptions<TData, TValue, TCellValue>): UseTableFiltersResult<TData, TValue>;
64
97
  //#endregion
65
- export { UseTableFiltersResult, useTableFilters };
98
+ export { UseTableFiltersOptions, UseTableFiltersResult, useTableFilters };
66
99
  //# sourceMappingURL=use-table-filters.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"use-table-filters.d.ts","names":[],"sources":["../../../../../src/components/ds-table/filters/hooks/use-table-filters.ts"],"sourcesContent":[],"mappings":";;;;;;;UAWiB;;;AAAjB;EAI0B,WAAA,EAAZ,WAAY,CAAA,MAAA,CAAA;EAAZ;;;EAUA,aAAA,EALE,iBAKF,CALoB,MAKpB,CAAA,EAAA;EAKG;;;EAcyB,WAAA,EAnB5B,QAmB4B,EAAA;EAerB;;;EAM6C,cAAA,EAnCjD,aAmCiD,EAAA;EAWlD;;;EAC8B,eAAA,EA1C5B,SA0C4B,CA1ClB,KA0CkB,CAAA,EAAA;EAA7B;;;EACF,QAAA,EAAA;IACU;;;IAAD,YAAA,EAAA,CAAA,QAAA,EAAA,MAAA,EAAA,KAAA,EAnCkB,MAmClB,EAAA,GAAA,IAAA;;;;;;;;;;;;uBApBH;;;;;wCAMkB,kBAAkB;;;;;;;;;;iBAWzC,2DACC,cAAc,OAAO,QAAQ,gBAAgB,4BAC/C,UAAU,WACtB,sBAAsB,OAAO"}
1
+ {"version":3,"file":"use-table-filters.d.ts","names":[],"sources":["../../../../../src/components/ds-table/filters/hooks/use-table-filters.ts"],"sourcesContent":[],"mappings":";;;;;;;UAWiB;;;AAAjB;EAI+B,cAAA,EAAd,aAAc,CAAA,KAAA,EAAO,MAAP,EAAe,UAAf,CAAA,EAAA,GAA+B,UAA/B,EAAA;EAAO;;;EAAwB,WAAA,CAAA,EAK/C,SAL+C,CAKrC,KALqC,CAAA,EAAA;EAKrC;;;;;EAaI,cAAA,CAAA,EANX,WAMW,CANC,MAMD,CAAA;EAAW;AAGxC;;;EASkC,eAAA,CAAA,EAAA,CAAA,OAAA,EAZL,WAYK,CAZO,MAYP,CAAA,EAAA,GAAA,IAAA;;AAKpB,UAdG,qBAcH,CAAA,KAAA,EAAA,MAAA,CAAA,CAAA;EAKG;;;EAYyB,WAAA,EA3B5B,WA2B4B,CA3BhB,MA2BgB,CAAA;EAMrB;;;EAM6C,aAAA,EAlClD,iBAkCkD,CAlChC,MAkCgC,CAAA,EAAA;EA0BlD;;;EAGC,WAAA,EA1DH,QA0DG,EAAA;EACC;;;EACuB,cAAA,EAvDxB,aAuDwB,EAAA;EAAtC;;;EAAoD,eAAA,EAlDrC,SAkDqC,CAlD3B,KAkD2B,CAAA,EAAA;EAAqB;;;;;4CA3ClC;;;;;;uBAMrB;;;;;wCAMkB,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;iBA0BzC;;;kBAGC;mBACC;GACf,uBAAuB,OAAO,QAAQ,cAAc,sBAAsB,OAAO"}
@@ -3,214 +3,209 @@ import { useState } from "react";
3
3
 
4
4
  //#region src/components/ds-table/filters/hooks/use-table-filters.ts
5
5
  /**
6
- * Hook to orchestrate table filtering with adapters
7
- * Manages filter state, generates chips, handles column definitions
6
+ * Hook to orchestrate table filtering with adapters.
7
+ * Manages filter state, generates chips, and handles column definitions.
8
8
  *
9
- * @param filterAdapters Array of filter adapters
10
- * @param baseColumns Base column definitions (optional)
11
- * @returns Complete filter management system
9
+ * **Uncontrolled mode** (default): Filters are managed internally.
10
+ * **Controlled mode**: Filters are managed externally via appliedFilters/onFiltersChange.
11
+ *
12
+ * @example
13
+ * // Uncontrolled mode
14
+ * const { filterChips, handlers } = useTableFilters({
15
+ * filterAdapters: adapters,
16
+ * baseColumns: columns,
17
+ * });
18
+ *
19
+ * @example
20
+ * // Controlled mode (e.g., URL-driven filtering)
21
+ * const { filterChips, handlers } = useTableFilters({
22
+ * filterAdapters: adapters,
23
+ * baseColumns: columns,
24
+ * appliedFilters: filtersFromUrl,
25
+ * onFiltersChange: (filters) => updateUrlAndRefetch(filters),
26
+ * });
12
27
  */
13
- function useTableFilters(filterAdapters, baseColumns) {
14
- const $ = c(39);
28
+ function useTableFilters(t0) {
29
+ const $ = c(30);
30
+ const { filterAdapters, baseColumns, appliedFilters: externalAppliedFilters, onFiltersChange: setExternalAppliedFilters } = t0;
15
31
  const _filterAdapters = filterAdapters;
16
- let initialState;
17
- if ($[0] !== _filterAdapters) {
18
- initialState = {};
19
- _filterAdapters.forEach((adapter) => {
20
- initialState[adapter.id] = adapter.initialValue;
21
- });
22
- $[0] = _filterAdapters;
23
- $[1] = initialState;
24
- } else initialState = $[1];
25
- const [filterState, setFilterState] = useState(initialState);
26
- let t0;
27
- if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
28
- t0 = [];
29
- $[2] = t0;
30
- } else t0 = $[2];
31
- const [columnFilters, setColumnFilters] = useState(t0);
32
+ const isControlled = externalAppliedFilters !== void 0 && setExternalAppliedFilters !== void 0;
33
+ const initialFilters = _filterAdapters.reduce(_temp, {});
32
34
  let t1;
33
- if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
34
- t1 = [];
35
- $[3] = t1;
36
- } else t1 = $[3];
37
- const [filterChips, setFilterChips] = useState(t1);
35
+ if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
36
+ t1 = {};
37
+ $[0] = t1;
38
+ } else t1 = $[0];
39
+ const [internalAppliedFilters, setInternalAppliedFilters] = useState(t1);
38
40
  let t2;
39
- if ($[4] !== filterState) {
40
- t2 = (adapterId) => filterState[adapterId];
41
- $[4] = filterState;
42
- $[5] = t2;
43
- } else t2 = $[5];
44
- const getValueByAdapterId = t2;
41
+ if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
42
+ t2 = {};
43
+ $[1] = t2;
44
+ } else t2 = $[1];
45
+ const [pendingFilters, setPendingFilters] = useState(t2);
46
+ const appliedFilters = isControlled ? externalAppliedFilters : internalAppliedFilters;
47
+ const setAppliedFilters = isControlled ? setExternalAppliedFilters : setInternalAppliedFilters;
48
+ const draftFilters = {
49
+ ...initialFilters,
50
+ ...appliedFilters,
51
+ ...pendingFilters
52
+ };
45
53
  let t3;
46
- if ($[6] !== _filterAdapters || $[7] !== getValueByAdapterId) {
47
- let t4$1;
48
- if ($[9] !== getValueByAdapterId) {
49
- t4$1 = (adapter_0) => ({
50
- id: adapter_0.id,
51
- label: adapter_0.label,
52
- count: adapter_0.getActiveFiltersCount(getValueByAdapterId(adapter_0.id))
53
- });
54
- $[9] = getValueByAdapterId;
55
- $[10] = t4$1;
56
- } else t4$1 = $[10];
57
- t3 = _filterAdapters.map(t4$1);
58
- $[6] = _filterAdapters;
59
- $[7] = getValueByAdapterId;
60
- $[8] = t3;
61
- } else t3 = $[8];
62
- const filterNavItems = t3;
54
+ if ($[2] !== appliedFilters) {
55
+ t3 = Object.entries(appliedFilters);
56
+ $[2] = appliedFilters;
57
+ $[3] = t3;
58
+ } else t3 = $[3];
63
59
  let t4;
64
- if ($[11] !== _filterAdapters || $[12] !== baseColumns) {
65
- t4 = !baseColumns ? [] : baseColumns.map((col) => {
66
- const adapter_1 = _filterAdapters.find((a) => a.id === col.id);
67
- if (adapter_1) {
68
- const cellRenderer = adapter_1.cellRenderer;
69
- return {
70
- ...col,
71
- filterFn: adapter_1.columnFilterFn,
72
- ...cellRenderer && { cell: (info) => cellRenderer(info.getValue()) }
73
- };
74
- }
75
- return col;
76
- });
77
- $[11] = _filterAdapters;
78
- $[12] = baseColumns;
79
- $[13] = t4;
80
- } else t4 = $[13];
81
- const enhancedColumns = t4;
60
+ if ($[4] !== _filterAdapters || $[5] !== appliedFilters || $[6] !== t3) {
61
+ t4 = t3.filter((t5$1) => {
62
+ const [id] = t5$1;
63
+ const adapter_0 = _filterAdapters.find((a) => a.id === id);
64
+ return adapter_0 ? adapter_0.getActiveFiltersCount(appliedFilters[id]) > 0 : false;
65
+ }).map(_temp2);
66
+ $[4] = _filterAdapters;
67
+ $[5] = appliedFilters;
68
+ $[6] = t3;
69
+ $[7] = t4;
70
+ } else t4 = $[7];
71
+ const columnFilters = t4;
82
72
  let t5;
83
- if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
84
- t5 = (filterId, value) => {
85
- setFilterState((prev) => ({
86
- ...prev,
87
- [filterId]: value
88
- }));
89
- };
90
- $[14] = t5;
91
- } else t5 = $[14];
92
- const updateFilter = t5;
73
+ if ($[8] !== _filterAdapters || $[9] !== appliedFilters) {
74
+ let t6$1;
75
+ if ($[11] !== appliedFilters) {
76
+ t6$1 = (adapter_1) => {
77
+ const value_0 = appliedFilters[adapter_1.id];
78
+ return value_0 !== void 0 ? adapter_1.toChips(value_0) : [];
79
+ };
80
+ $[11] = appliedFilters;
81
+ $[12] = t6$1;
82
+ } else t6$1 = $[12];
83
+ t5 = _filterAdapters.flatMap(t6$1);
84
+ $[8] = _filterAdapters;
85
+ $[9] = appliedFilters;
86
+ $[10] = t5;
87
+ } else t5 = $[10];
88
+ const filterChips = t5;
89
+ const filterNavItems = _filterAdapters.map((adapter_2) => ({
90
+ id: adapter_2.id,
91
+ label: adapter_2.label,
92
+ count: adapter_2.getActiveFiltersCount(draftFilters[adapter_2.id])
93
+ }));
93
94
  let t6;
94
- if ($[15] !== _filterAdapters || $[16] !== getValueByAdapterId) {
95
- t6 = () => {
96
- const filters = [];
97
- const chips = [];
98
- _filterAdapters.forEach((adapter_2) => {
99
- const value_0 = getValueByAdapterId(adapter_2.id);
100
- if (adapter_2.getActiveFiltersCount(value_0) > 0) filters.push({
101
- id: adapter_2.id,
102
- value: value_0
103
- });
104
- const adapterChips = adapter_2.toChips(value_0);
105
- chips.push(...adapterChips);
106
- });
107
- setColumnFilters(filters);
108
- setFilterChips(chips);
109
- };
110
- $[15] = _filterAdapters;
111
- $[16] = getValueByAdapterId;
112
- $[17] = t6;
113
- } else t6 = $[17];
114
- const applyFilters = t6;
95
+ if ($[13] !== _filterAdapters || $[14] !== baseColumns) {
96
+ t6 = !baseColumns ? [] : baseColumns.map((col) => {
97
+ const adapter_3 = _filterAdapters.find((a_0) => a_0.id === col.id);
98
+ if (!adapter_3) return col;
99
+ const cellRenderer = adapter_3.cellRenderer;
100
+ return {
101
+ ...col,
102
+ filterFn: adapter_3.columnFilterFn,
103
+ ...cellRenderer && { cell: (info) => cellRenderer(info.getValue()) }
104
+ };
105
+ });
106
+ $[13] = _filterAdapters;
107
+ $[14] = baseColumns;
108
+ $[15] = t6;
109
+ } else t6 = $[15];
110
+ const enhancedColumns = t6;
115
111
  let t7;
116
- if ($[18] !== _filterAdapters) {
117
- t7 = () => {
118
- const resetState = {};
119
- _filterAdapters.forEach((adapter_3) => {
120
- resetState[adapter_3.id] = adapter_3.reset();
121
- });
122
- setFilterState(resetState);
123
- setColumnFilters([]);
124
- setFilterChips([]);
112
+ if ($[16] !== setPendingFilters) {
113
+ t7 = (filterId, value_1) => {
114
+ setPendingFilters((prev) => ({
115
+ ...prev,
116
+ [filterId]: value_1
117
+ }));
125
118
  };
126
- $[18] = _filterAdapters;
127
- $[19] = t7;
128
- } else t7 = $[19];
129
- const clearAll = t7;
119
+ $[16] = setPendingFilters;
120
+ $[17] = t7;
121
+ } else t7 = $[17];
122
+ const updateFilter = t7;
123
+ const applyFilters = () => {
124
+ setAppliedFilters(_filterAdapters.reduce((acc, adapter_4) => {
125
+ const value_2 = draftFilters[adapter_4.id];
126
+ if (adapter_4.getActiveFiltersCount(value_2) > 0) acc[adapter_4.id] = value_2;
127
+ return acc;
128
+ }, {}));
129
+ setPendingFilters({});
130
+ };
130
131
  let t8;
131
- if ($[20] !== _filterAdapters || $[21] !== clearAll || $[22] !== getValueByAdapterId) {
132
- t8 = (chip) => {
132
+ if ($[18] !== setAppliedFilters || $[19] !== setPendingFilters) {
133
+ t8 = () => {
134
+ setPendingFilters({});
135
+ setAppliedFilters({});
136
+ };
137
+ $[18] = setAppliedFilters;
138
+ $[19] = setPendingFilters;
139
+ $[20] = t8;
140
+ } else t8 = $[20];
141
+ const clearAll = t8;
142
+ let t9;
143
+ if ($[21] !== _filterAdapters || $[22] !== appliedFilters || $[23] !== setAppliedFilters) {
144
+ t9 = (chip) => {
133
145
  const filterKey = typeof chip.metadata?.key === "string" ? chip.metadata.key : void 0;
134
146
  if (!filterKey) return;
135
- const adapter_4 = _filterAdapters.find((a_0) => a_0.id === filterKey);
136
- if (!adapter_4) return;
137
- const currentValue = getValueByAdapterId(filterKey);
138
- const newValue = adapter_4.fromChip(chip, currentValue);
139
- const chips_0 = [];
140
- _filterAdapters.forEach((adapter_5) => {
141
- const value_1 = adapter_5.id === filterKey ? newValue : getValueByAdapterId(adapter_5.id);
142
- const adapterChips_0 = adapter_5.toChips(value_1);
143
- chips_0.push(...adapterChips_0);
144
- });
145
- if (chips_0.length === 0) {
146
- clearAll();
147
- return;
148
- }
149
- setFilterState((prev_0) => ({
150
- ...prev_0,
147
+ const adapter_5 = _filterAdapters.find((a_1) => a_1.id === filterKey);
148
+ if (!adapter_5) return;
149
+ const currentValue = appliedFilters[filterKey];
150
+ if (currentValue === void 0) return;
151
+ const newValue = adapter_5.fromChip(chip, currentValue);
152
+ setAppliedFilters(adapter_5.getActiveFiltersCount(newValue) === 0 ? Object.fromEntries(Object.entries(appliedFilters).filter((t10$1) => {
153
+ const [key] = t10$1;
154
+ return key !== filterKey;
155
+ })) : {
156
+ ...appliedFilters,
151
157
  [filterKey]: newValue
152
- }));
153
- if (adapter_4.getActiveFiltersCount(newValue) === 0) setColumnFilters((prev_1) => prev_1.filter((cf) => cf.id !== filterKey));
154
- else setColumnFilters((prev_2) => prev_2.map((cf_0) => cf_0.id === filterKey ? {
155
- id: filterKey,
156
- value: newValue
157
- } : cf_0));
158
- setFilterChips(chips_0);
159
- };
160
- $[20] = _filterAdapters;
161
- $[21] = clearAll;
162
- $[22] = getValueByAdapterId;
163
- $[23] = t8;
164
- } else t8 = $[23];
165
- const deleteChip = t8;
166
- let t9;
167
- if ($[24] !== _filterAdapters || $[25] !== getValueByAdapterId) {
168
- t9 = (selectedFilter) => {
169
- const adapter_6 = _filterAdapters.find((a_1) => a_1.id === selectedFilter.id);
170
- if (!adapter_6) return null;
171
- const value_2 = getValueByAdapterId(adapter_6.id);
172
- const onChange = (newValue_0) => updateFilter(adapter_6.id, newValue_0);
173
- return adapter_6.renderFilter(value_2, onChange);
158
+ });
174
159
  };
175
- $[24] = _filterAdapters;
176
- $[25] = getValueByAdapterId;
177
- $[26] = t9;
178
- } else t9 = $[26];
179
- const renderFilterContent = t9;
160
+ $[21] = _filterAdapters;
161
+ $[22] = appliedFilters;
162
+ $[23] = setAppliedFilters;
163
+ $[24] = t9;
164
+ } else t9 = $[24];
165
+ const deleteChip = t9;
166
+ const renderFilterContent = (selectedFilter) => {
167
+ const adapter_6 = _filterAdapters.find((a_2) => a_2.id === selectedFilter.id);
168
+ if (!adapter_6) return null;
169
+ const value_3 = draftFilters[adapter_6.id];
170
+ const onChange = (newValue_0) => updateFilter(adapter_6.id, newValue_0);
171
+ return adapter_6.renderFilter(value_3, onChange);
172
+ };
180
173
  let t10;
181
- if ($[27] !== applyFilters || $[28] !== clearAll || $[29] !== deleteChip) {
174
+ if ($[25] !== applyFilters || $[26] !== clearAll || $[27] !== deleteChip || $[28] !== updateFilter) {
182
175
  t10 = {
183
176
  updateFilter,
184
177
  applyFilters,
185
178
  clearAll,
186
179
  deleteChip
187
180
  };
188
- $[27] = applyFilters;
189
- $[28] = clearAll;
190
- $[29] = deleteChip;
191
- $[30] = t10;
192
- } else t10 = $[30];
193
- let t11;
194
- if ($[31] !== columnFilters || $[32] !== enhancedColumns || $[33] !== filterChips || $[34] !== filterNavItems || $[35] !== filterState || $[36] !== renderFilterContent || $[37] !== t10) {
195
- t11 = {
196
- filterState,
197
- columnFilters,
198
- filterChips,
199
- filterNavItems,
200
- enhancedColumns,
201
- handlers: t10,
202
- renderFilterContent
203
- };
204
- $[31] = columnFilters;
205
- $[32] = enhancedColumns;
206
- $[33] = filterChips;
207
- $[34] = filterNavItems;
208
- $[35] = filterState;
209
- $[36] = renderFilterContent;
210
- $[37] = t10;
211
- $[38] = t11;
212
- } else t11 = $[38];
213
- return t11;
181
+ $[25] = applyFilters;
182
+ $[26] = clearAll;
183
+ $[27] = deleteChip;
184
+ $[28] = updateFilter;
185
+ $[29] = t10;
186
+ } else t10 = $[29];
187
+ return {
188
+ filterState: draftFilters,
189
+ columnFilters,
190
+ filterChips,
191
+ filterNavItems,
192
+ enhancedColumns,
193
+ handlers: t10,
194
+ renderFilterContent
195
+ };
196
+ }
197
+ function _temp2(t0) {
198
+ const [id_0, value] = t0;
199
+ return {
200
+ id: id_0,
201
+ value
202
+ };
203
+ }
204
+ function _temp(state, adapter) {
205
+ return {
206
+ ...state,
207
+ [adapter.id]: adapter.initialValue
208
+ };
214
209
  }
215
210
 
216
211
  //#endregion