@fuf-stack/megapixels 0.9.9 → 0.9.11
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/Filter/index.cjs +1 -1
- package/dist/Filter/index.d.cts +1 -1
- package/dist/Filter/index.d.ts +1 -1
- package/dist/Filter/index.js +1 -1
- package/dist/{Filter-obuSI5QN.cjs → Filter-BHJ_5vaz.cjs} +26 -26
- package/dist/{Filter-obuSI5QN.cjs.map → Filter-BHJ_5vaz.cjs.map} +1 -1
- package/dist/{Filter-D_PSnttT.js → Filter-BSrl7xRD.js} +26 -26
- package/dist/{Filter-D_PSnttT.js.map → Filter-BSrl7xRD.js.map} +1 -1
- package/dist/{index-kqqQPuMN.d.ts → index-2Fabm26b.d.cts} +32 -39
- package/dist/index-2Fabm26b.d.cts.map +1 -0
- package/dist/{index-30lJ6bwb.d.cts → index-DzQ-63Nj.d.ts} +32 -39
- package/dist/index-DzQ-63Nj.d.ts.map +1 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/package.json +3 -3
- package/dist/index-30lJ6bwb.d.cts.map +0 -1
- package/dist/index-kqqQPuMN.d.ts.map +0 -1
package/dist/Filter/index.cjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
2
|
-
const require_Filter = require('../Filter-
|
|
2
|
+
const require_Filter = require('../Filter-BHJ_5vaz.cjs');
|
|
3
3
|
|
|
4
4
|
exports.createFilter = require_Filter.createFilter_default;
|
|
5
5
|
exports.default = require_Filter.Filter_default;
|
package/dist/Filter/index.d.cts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { a as FilterProps, c as FilterDefinition, d as FilterFormProps, f as FilterInstance, i as FilterChildRenderFn, l as FilterDisplayProps, n as createFilter, o as FilterValues, p as FiltersConfiguration, r as Filter, s as filterVariants, t as filters, u as FilterFactory } from "../index-
|
|
1
|
+
import { a as FilterProps, c as FilterDefinition, d as FilterFormProps, f as FilterInstance, i as FilterChildRenderFn, l as FilterDisplayProps, n as createFilter, o as FilterValues, p as FiltersConfiguration, r as Filter, s as filterVariants, t as filters, u as FilterFactory } from "../index-2Fabm26b.cjs";
|
|
2
2
|
export { FilterChildRenderFn, FilterDefinition, FilterDisplayProps, FilterFactory, FilterFormProps, FilterInstance, FilterProps, FilterValues, FiltersConfiguration, createFilter, Filter as default, filterVariants, filters };
|
package/dist/Filter/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { a as FilterProps, c as FilterDefinition, d as FilterFormProps, f as FilterInstance, i as FilterChildRenderFn, l as FilterDisplayProps, n as createFilter, o as FilterValues, p as FiltersConfiguration, r as Filter, s as filterVariants, t as filters, u as FilterFactory } from "../index-
|
|
1
|
+
import { a as FilterProps, c as FilterDefinition, d as FilterFormProps, f as FilterInstance, i as FilterChildRenderFn, l as FilterDisplayProps, n as createFilter, o as FilterValues, p as FiltersConfiguration, r as Filter, s as filterVariants, t as filters, u as FilterFactory } from "../index-DzQ-63Nj.js";
|
|
2
2
|
export { FilterChildRenderFn, FilterDefinition, FilterDisplayProps, FilterFactory, FilterFormProps, FilterInstance, FilterProps, FilterValues, FiltersConfiguration, createFilter, Filter as default, filterVariants, filters };
|
package/dist/Filter/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { i as filterVariants, n as filters, r as createFilter_default, t as Filter_default } from "../Filter-
|
|
1
|
+
import { i as filterVariants, n as filters, r as createFilter_default, t as Filter_default } from "../Filter-BSrl7xRD.js";
|
|
2
2
|
|
|
3
3
|
export { createFilter_default as createFilter, Filter_default as default, filterVariants, filters };
|
|
@@ -63,10 +63,10 @@ _fuf_stack_uniform_Checkboxes = __toESM(_fuf_stack_uniform_Checkboxes);
|
|
|
63
63
|
* under "filter" and optionally includes a "search" string field.
|
|
64
64
|
* Memoized by inputs.
|
|
65
65
|
*/
|
|
66
|
-
const useFilterValidation = (filters
|
|
66
|
+
const useFilterValidation = (filters, withSearch) => {
|
|
67
67
|
return (0, react.useMemo)(() => {
|
|
68
68
|
let filterSchema = {};
|
|
69
|
-
filters
|
|
69
|
+
filters.forEach((f) => {
|
|
70
70
|
filterSchema = {
|
|
71
71
|
...filterSchema,
|
|
72
72
|
[f.name]: f.validation(f.config)
|
|
@@ -78,7 +78,7 @@ const useFilterValidation = (filters$1, withSearch) => {
|
|
|
78
78
|
}),
|
|
79
79
|
...withSearch ? { search: (0, _fuf_stack_veto.string)({ min: 0 }).nullable().optional() } : {}
|
|
80
80
|
});
|
|
81
|
-
}, [filters
|
|
81
|
+
}, [filters, withSearch]);
|
|
82
82
|
};
|
|
83
83
|
|
|
84
84
|
//#endregion
|
|
@@ -102,7 +102,7 @@ const useFilterValidation = (filters$1, withSearch) => {
|
|
|
102
102
|
* by subscribing to ex-forms submit state
|
|
103
103
|
*/
|
|
104
104
|
const FiltersContext = (0, react.createContext)(void 0);
|
|
105
|
-
const FiltersContextProvider = ({ children, config
|
|
105
|
+
const FiltersContextProvider = ({ children, config }) => {
|
|
106
106
|
const { formState, getFieldState, setValue, triggerSubmit, unregister, watch } = (0, _fuf_stack_uniform_hooks_useFormContext.useFormContext)();
|
|
107
107
|
/**
|
|
108
108
|
* currentModalFilter
|
|
@@ -191,12 +191,12 @@ const FiltersContextProvider = ({ children, config: config$2 }) => {
|
|
|
191
191
|
* active immediately (seeded default), and will be rolled back on cancel.
|
|
192
192
|
*/
|
|
193
193
|
const activeFilters = (0, react.useMemo)(() => {
|
|
194
|
-
return config
|
|
194
|
+
return config.filter((f) => {
|
|
195
195
|
return Object.hasOwn(filterValue ?? {}, f.name);
|
|
196
196
|
}).map((f) => {
|
|
197
197
|
return f.name;
|
|
198
198
|
});
|
|
199
|
-
}, [config
|
|
199
|
+
}, [config, filterValue]);
|
|
200
200
|
/**
|
|
201
201
|
* unusedFilters
|
|
202
202
|
*
|
|
@@ -204,12 +204,12 @@ const FiltersContextProvider = ({ children, config: config$2 }) => {
|
|
|
204
204
|
* field in the controlled form state).
|
|
205
205
|
*/
|
|
206
206
|
const unusedFilters = (0, react.useMemo)(() => {
|
|
207
|
-
return config
|
|
207
|
+
return config.filter((f) => {
|
|
208
208
|
return !Object.hasOwn(filterValue ?? {}, f.name);
|
|
209
209
|
}).map((f) => {
|
|
210
210
|
return f.name;
|
|
211
211
|
});
|
|
212
|
-
}, [config
|
|
212
|
+
}, [config, filterValue]);
|
|
213
213
|
/**
|
|
214
214
|
* getRegistryFilterByName
|
|
215
215
|
*
|
|
@@ -217,10 +217,10 @@ const FiltersContextProvider = ({ children, config: config$2 }) => {
|
|
|
217
217
|
* to typed Form/Display components and other registry-level metadata.
|
|
218
218
|
*/
|
|
219
219
|
const getFilterInstanceByName = (0, react.useCallback)((name) => {
|
|
220
|
-
return config
|
|
220
|
+
return config.find((f) => {
|
|
221
221
|
return f.name === name;
|
|
222
222
|
});
|
|
223
|
-
}, [config
|
|
223
|
+
}, [config]);
|
|
224
224
|
/**
|
|
225
225
|
* addFilter
|
|
226
226
|
*
|
|
@@ -388,7 +388,7 @@ const FilterModal = ({ classNames = {} }) => {
|
|
|
388
388
|
const { closeFilterModal, getFilterFormFieldName, getFilterInstanceByName, modalFilterName, removeFilter } = useFilters();
|
|
389
389
|
if (!modalFilterName) return null;
|
|
390
390
|
const instance = getFilterInstanceByName(modalFilterName);
|
|
391
|
-
const config
|
|
391
|
+
const config = instance.config;
|
|
392
392
|
const FormComponent = instance.components.Form;
|
|
393
393
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fuf_stack_pixels_Modal.default, {
|
|
394
394
|
isOpen: true,
|
|
@@ -412,9 +412,9 @@ const FilterModal = ({ classNames = {} }) => {
|
|
|
412
412
|
testId: "apply_filter_button",
|
|
413
413
|
children: "Apply Filter"
|
|
414
414
|
})] }),
|
|
415
|
-
header: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [instance.icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_pi.PiSlidersHorizontalBold, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: `${config
|
|
415
|
+
header: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [instance.icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_pi.PiSlidersHorizontalBold, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: `${config?.text ?? modalFilterName} Filter` })] }),
|
|
416
416
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormComponent, {
|
|
417
|
-
config
|
|
417
|
+
config,
|
|
418
418
|
fieldName: getFilterFormFieldName(modalFilterName)
|
|
419
419
|
}) })
|
|
420
420
|
});
|
|
@@ -429,11 +429,11 @@ var FilterModal_default = FilterModal;
|
|
|
429
429
|
* By default renders only a search button. When clicked, the text input animates in
|
|
430
430
|
* and a trailing submit button is shown.
|
|
431
431
|
*/
|
|
432
|
-
const SearchInput = ({ classNames = {}, config
|
|
432
|
+
const SearchInput = ({ classNames = {}, config }) => {
|
|
433
433
|
const { formState, setFocus, triggerSubmit } = (0, _fuf_stack_uniform_hooks_useFormContext.useFormContext)();
|
|
434
434
|
const isInitiallyVisible = !!formState?.defaultValues?.search;
|
|
435
435
|
const [isVisible, setIsVisible] = (0, react.useState)(isInitiallyVisible);
|
|
436
|
-
const placeholder = typeof config
|
|
436
|
+
const placeholder = typeof config === "object" ? config.placeholder : void 0;
|
|
437
437
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
438
438
|
className: classNames.searchWrapper,
|
|
439
439
|
children: [!isVisible && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fuf_stack_pixels_Button.default, {
|
|
@@ -508,17 +508,17 @@ const filterVariants = (0, _fuf_stack_pixel_utils.tv)({ slots: {
|
|
|
508
508
|
* The form is the source of truth during user interaction; the committed
|
|
509
509
|
* state is controlled by the parent via `values`/`onChange`.
|
|
510
510
|
*/
|
|
511
|
-
const Filter = ({ children = void 0, className = void 0, config
|
|
511
|
+
const Filter = ({ children = void 0, className = void 0, config, formName = "filterComponentForm", onChange, values }) => {
|
|
512
512
|
const handleSubmit = (nextValues) => {
|
|
513
513
|
debug$1("handleSubmit", { nextValues });
|
|
514
514
|
onChange(nextValues);
|
|
515
515
|
};
|
|
516
|
-
const validation = useFilterValidation(config
|
|
516
|
+
const validation = useFilterValidation(config.filters, Boolean(config.search));
|
|
517
517
|
const { data: valuesValidated, errors, success } = validation.validate(values);
|
|
518
518
|
const classNames = (0, _fuf_stack_pixel_utils.variantsToClassNames)(filterVariants(), className, "base");
|
|
519
519
|
debug$1("render", {
|
|
520
520
|
props: {
|
|
521
|
-
config
|
|
521
|
+
config,
|
|
522
522
|
values
|
|
523
523
|
},
|
|
524
524
|
validation: {
|
|
@@ -536,8 +536,8 @@ const Filter = ({ children = void 0, className = void 0, config: config$2, formN
|
|
|
536
536
|
name: formName,
|
|
537
537
|
onSubmit: handleSubmit,
|
|
538
538
|
validation,
|
|
539
|
-
children: [config
|
|
540
|
-
config: config
|
|
539
|
+
children: [config.search ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchInput_default, {
|
|
540
|
+
config: config.search,
|
|
541
541
|
classNames: {
|
|
542
542
|
searchInput: classNames.searchInput,
|
|
543
543
|
searchInputWrapper: classNames.searchInputWrapper,
|
|
@@ -547,7 +547,7 @@ const Filter = ({ children = void 0, className = void 0, config: config$2, formN
|
|
|
547
547
|
searchWrapper: classNames.searchWrapper
|
|
548
548
|
}
|
|
549
549
|
}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FiltersContextProvider, {
|
|
550
|
-
config: config
|
|
550
|
+
config: config.filters,
|
|
551
551
|
children: [
|
|
552
552
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActiveFilters_default, { className: classNames.activeFilterLabel }),
|
|
553
553
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddFilterMenu_default, { classNames: {
|
|
@@ -586,12 +586,12 @@ var Filter_default$1 = Filter;
|
|
|
586
586
|
* @returns FilterFactory that creates FilterInstance<Config, Value>
|
|
587
587
|
*/
|
|
588
588
|
const createFilter = (definition) => {
|
|
589
|
-
return ({ name, icon, config
|
|
589
|
+
return ({ name, icon, config }) => {
|
|
590
590
|
return {
|
|
591
591
|
components: definition.components,
|
|
592
592
|
config: {
|
|
593
593
|
...definition.defaults.config,
|
|
594
|
-
...config
|
|
594
|
+
...config ?? {}
|
|
595
595
|
},
|
|
596
596
|
defaultValue: definition.defaults.value,
|
|
597
597
|
icon,
|
|
@@ -705,10 +705,10 @@ var Display_default = Display;
|
|
|
705
705
|
* Uses a `Checkboxes` to select multiple options.
|
|
706
706
|
* Resolves function labels with 'form' mode.
|
|
707
707
|
*/
|
|
708
|
-
const Form = ({ fieldName, config
|
|
708
|
+
const Form = ({ fieldName, config }) => {
|
|
709
709
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fuf_stack_uniform_Checkboxes.default, {
|
|
710
710
|
name: fieldName,
|
|
711
|
-
options: config
|
|
711
|
+
options: config.options.map((option) => {
|
|
712
712
|
return {
|
|
713
713
|
...option,
|
|
714
714
|
label: typeof option.label === "function" ? option.label("form") : option.label
|
|
@@ -808,4 +808,4 @@ Object.defineProperty(exports, 'filters', {
|
|
|
808
808
|
return filters;
|
|
809
809
|
}
|
|
810
810
|
});
|
|
811
|
-
//# sourceMappingURL=Filter-
|
|
811
|
+
//# sourceMappingURL=Filter-BHJ_5vaz.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Filter-obuSI5QN.cjs","names":["filters","config","Label","Menu","FaSliders","config","Modal","Button","SubmitButton","PiSlidersHorizontalBold","Suspense","config","Button","FaSearch","motion","Input","SubmitButton","debug","config","Form","SearchInput","ActiveFilters","AddFilterMenu","FilterModal","config","Display","Form","Switch","config","validate","createFilter","validate","Checkboxes","config","createFilter","Filter"],"sources":["../src/Filter/hooks/useFilterValidation.ts","../src/Filter/Subcomponents/FiltersContext.tsx","../src/Filter/Subcomponents/ActiveFilters.tsx","../src/Filter/Subcomponents/AddFilterMenu.tsx","../src/Filter/Subcomponents/FilterModal.tsx","../src/Filter/Subcomponents/SearchInput.tsx","../src/Filter/Filter.tsx","../src/Filter/filters/createFilter.ts","../src/Filter/filters/boolean/Display.tsx","../src/Filter/filters/boolean/Form.tsx","../src/Filter/filters/boolean/schema.ts","../src/Filter/filters/boolean/boolean.ts","../src/Filter/filters/checkboxes/Display.tsx","../src/Filter/filters/checkboxes/Form.tsx","../src/Filter/filters/checkboxes/schema.ts","../src/Filter/filters/checkboxes/checkboxes.ts","../src/Filter/index.ts"],"sourcesContent":["import type { VetoInstance, VetoRawShape, VetoTypeAny } from '@fuf-stack/veto';\nimport type { FilterInstance } from '../filters/types';\n\nimport { useMemo } from 'react';\n\nimport { object, string, stringToJSON, veto } from '@fuf-stack/veto';\n\n/**\n * useFilterValidation\n *\n * Builds a composite validation schema from all provided filter definitions\n * under \"filter\" and optionally includes a \"search\" string field.\n * Memoized by inputs.\n */\nexport const useFilterValidation = (\n filters: FilterInstance<unknown, unknown>[],\n withSearch?: boolean,\n) => {\n return useMemo<VetoInstance>(() => {\n // build filter validation\n let filterSchema: Record<string, VetoTypeAny> = {};\n filters.forEach((f) => {\n filterSchema = {\n ...filterSchema,\n [f.name]: f.validation(f.config) as VetoTypeAny,\n };\n });\n\n const validationSchema: VetoRawShape = {\n // filter validation\n filter: stringToJSON()\n .pipe(object(filterSchema))\n .or(object(filterSchema))\n .optional()\n .nullable()\n // transform null to undefined\n .transform((val) => {\n return val ?? undefined;\n }),\n // optional search validation\n ...(withSearch\n ? { search: string({ min: 0 }).nullable().optional() }\n : {}),\n };\n\n return veto(validationSchema);\n }, [filters, withSearch]);\n};\n\nexport default useFilterValidation;\n","import type { ReactNode } from 'react';\nimport type { FilterInstance, FiltersConfiguration } from '../filters/types';\n\nimport {\n createContext,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport { useFormContext } from '@fuf-stack/uniform/hooks/useFormContext';\n\ninterface FiltersContextValue {\n /** Active filters (names only) */\n activeFilters: string[];\n /** Seed default value and open modal for a filter usage. */\n addFilter: (name: string) => void;\n /** Close the modal. */\n closeFilterModal: () => void;\n /** Build fully-qualified form field path for a filter name */\n getFilterFormFieldName: (name: string) => string;\n /** Get current form value for a given filter name */\n getFilterValueByName: (name: string) => unknown;\n /** Get filter instance by name */\n getFilterInstanceByName: (name: string) => FilterInstance<unknown, unknown>;\n /** Validation helper for a specific filter field. */\n hasError: (name: string) => boolean;\n /** Name of the current filter that has its modal open */\n modalFilterName: string | undefined;\n /** Remove a filter from the form. */\n removeFilter: (name: string) => void;\n /** Open the modal for a given filter name. */\n showFilterModal: (name: string) => void;\n /** Filters that are not active (names only) */\n unusedFilters: string[];\n}\n\n/**\n * FiltersContext\n *\n * Central state for the filter UI with a clear boundary:\n * - The parent component controls committed filter values (via value/onChange)\n * - The form acts as an edit buffer (used by the modal)\n *\n * Design:\n * - activeFilters/unusedFilters are names-only and derived from the controlled\n * form state\n * - getFilterInstanceByName gives access to the concrete registry entry to\n * retrieve the correct Form/Display components\n * - add seeds defaults in the form and opens the modal\n * - remove un-registers the form field; if the removed filter is currently\n * open in the modal, the modal is closed without rollback\n * - on a new successful form submit (Apply), the modal closes without rollback\n * by subscribing to ex-forms submit state\n */\nconst FiltersContext = createContext<FiltersContextValue | undefined>(\n undefined,\n);\n\nexport const FiltersContextProvider = ({\n children,\n config,\n}: {\n children: ReactNode;\n config: FiltersConfiguration;\n}) => {\n // ex-forms integration:\n // - setValue/unregister/getFieldState: core helpers to manipulate and validate fields\n // - formState: we subscribe to submit-success to auto-close the modal after Apply\n const {\n formState,\n getFieldState,\n setValue,\n triggerSubmit,\n unregister,\n watch,\n } = useFormContext();\n\n /**\n * currentModalFilter\n *\n * Single source of truth for the filter edit modal and its rollback snapshot.\n * - name: which filter's modal is currently open (null when closed)\n * - hadValue/previousValue: snapshot of the controlled value taken when the\n * modal is opened; used to restore state if the user cancels/closes without\n * applying.\n *\n * Lifecycle semantics:\n * - showFilterModal(name): capture snapshot (current controlled value) and open\n * the modal for that filter.\n * - closeFilterModal(): if a snapshot exists, roll back un-applied edits by\n * restoring the previous value (setValue) or removing the field (unregister)\n * when it did not exist before; then clear currentModalFilter.\n * - On successful submit (Apply): close and clear currentModalFilter WITHOUT rollback\n * so edits remain committed.\n * - removeFilter(name): unregisters the field; when removing the filter that is\n * currently open, close the modal WITHOUT rollback (since removal is explicit).\n */\n const [currentModalFilter, setCurrentModalFilter] = useState<{\n name: string;\n hadValue: boolean;\n previousValue: unknown;\n } | null>(null);\n\n // Read current filter values from the form as the live edit buffer\n const filterValue = watch('filter', {});\n\n /**\n * getFilterFormFieldName\n *\n * Returns the fully-qualified field path for a given filter name,\n * e.g., `${filterUrlParam}.status`.\n */\n const getFilterFormFieldName = useCallback((name: string) => {\n return `filter.${name}`;\n }, []);\n\n /**\n * getFilterValueByName\n *\n * Returns the committed value for a filter from the controlled state.\n */\n const getFilterValueByName = useCallback(\n (name: string) => {\n return (filterValue as Record<string, unknown>)[name];\n },\n [filterValue],\n );\n\n /** Open the filter edit modal for the given filter name. */\n const showFilterModal = useCallback(\n (name: string) => {\n const prev = getFilterValueByName(name);\n setCurrentModalFilter({\n name,\n hadValue: typeof prev !== 'undefined',\n previousValue: prev,\n });\n },\n [getFilterValueByName],\n );\n\n /** Close the filter edit modal. Rollback un-applied edits to controlled state. */\n const closeFilterModal = useCallback(() => {\n if (currentModalFilter?.name) {\n const fieldName = getFilterFormFieldName(currentModalFilter.name);\n // if the filter had a value, set it back to the previous value,\n // otherwise unregister the field\n if (currentModalFilter.hadValue) {\n setValue(fieldName, currentModalFilter.previousValue);\n } else {\n unregister(fieldName);\n }\n }\n setCurrentModalFilter(null);\n }, [getFilterFormFieldName, currentModalFilter, setValue, unregister]);\n\n /**\n * Auto-close on submit success\n *\n * Close the modal only on new successful submissions. We track the last\n * submitCount and only react when it changes AND the form reports a\n * successful submit. This prevents closing when `isSubmitSuccessful` remains\n * true without a new submit event.\n */\n const lastSubmitCountRef = useRef<number>(0);\n useEffect(() => {\n if (\n formState.submitCount !== lastSubmitCountRef.current &&\n formState.isSubmitSuccessful\n ) {\n // On successful submit, close without rollback\n setCurrentModalFilter(null);\n }\n lastSubmitCountRef.current = formState.submitCount;\n }, [\n formState.submitCount,\n formState.isSubmitSuccessful,\n setCurrentModalFilter,\n ]);\n\n /**\n * activeFilters\n *\n * Filter names derived from the controlled form state. A filter is considered\n * active when a field exists at `filter.<name>`. Newly added filters become\n * active immediately (seeded default), and will be rolled back on cancel.\n */\n const activeFilters = useMemo(() => {\n return config\n .filter((f) => {\n return Object.hasOwn(filterValue ?? {}, f.name);\n })\n .map((f) => {\n return f.name;\n });\n }, [config, filterValue]);\n\n /**\n * unusedFilters\n *\n * Complement of activeFilters (names without a corresponding `filter.<name>`\n * field in the controlled form state).\n */\n const unusedFilters = useMemo(() => {\n return config\n .filter((f) => {\n return !Object.hasOwn(filterValue ?? {}, f.name);\n })\n .map((f) => {\n return f.name;\n });\n }, [config, filterValue]);\n\n /**\n * getRegistryFilterByName\n *\n * Looks up the concrete registry entry for a filter by name, enabling access\n * to typed Form/Display components and other registry-level metadata.\n */\n const getFilterInstanceByName = useCallback(\n (name: string) => {\n return config.find((f) => {\n return f.name === name;\n }) as FilterInstance<unknown, unknown>;\n },\n [config],\n );\n\n /**\n * addFilter\n *\n * Seeds the filter with its registry default value inside the form and opens\n * the modal for immediate editing. No URL writes happen here.\n */\n const addFilter = useCallback(\n (name: string) => {\n const inst = getFilterInstanceByName(name);\n showFilterModal(name);\n setValue(getFilterFormFieldName(name), inst.defaultValue);\n },\n [\n getFilterFormFieldName,\n getFilterInstanceByName,\n setValue,\n showFilterModal,\n ],\n );\n\n /**\n * removeFilter\n *\n * Unregisters the filter field from the form. This immediately removes the\n * filter from the active list since derived state watches the form. It\n * closes the modal without rollback if the removed filter is currently open.\n */\n const removeFilter = useCallback(\n (name: string) => {\n // unregister form field\n unregister(getFilterFormFieldName(name));\n // close filter modal if open\n if (currentModalFilter?.name === name) {\n // Explicit removal: close without rollback\n setCurrentModalFilter(null);\n }\n // trigger form submit (to update filter state)\n triggerSubmit();\n },\n [\n getFilterFormFieldName,\n currentModalFilter,\n setCurrentModalFilter,\n triggerSubmit,\n unregister,\n ],\n );\n\n /**\n * hasError\n *\n * Helper that checks the ex-forms field state for a specific filter and\n * reports whether the field is currently invalid.\n */\n const hasError = useCallback(\n (name: string) => {\n return getFieldState(getFilterFormFieldName(name)).invalid;\n },\n [getFieldState, getFilterFormFieldName],\n );\n\n const contextValue: FiltersContextValue = useMemo(() => {\n return {\n activeFilters,\n addFilter,\n closeFilterModal,\n getFilterFormFieldName,\n getFilterValueByName,\n getFilterInstanceByName,\n hasError,\n modalFilterName: currentModalFilter?.name,\n removeFilter,\n showFilterModal,\n unusedFilters,\n };\n }, [\n activeFilters,\n addFilter,\n closeFilterModal,\n getFilterFormFieldName,\n getFilterValueByName,\n getFilterInstanceByName,\n hasError,\n currentModalFilter,\n removeFilter,\n showFilterModal,\n unusedFilters,\n ]);\n\n return (\n <FiltersContext.Provider value={contextValue}>\n {children}\n </FiltersContext.Provider>\n );\n};\n\n/**\n * useFilters\n *\n * Convenience hook to consume the FiltersContext. Throws a descriptive error\n * when used outside of a FiltersContextProvider to make integration mistakes\n * obvious during development.\n */\nexport const useFilters = (): FiltersContextValue => {\n const ctx = useContext(FiltersContext);\n if (!ctx) {\n throw new Error('useFilters must be used within FiltersContextProvider');\n }\n return ctx;\n};\n\nexport default FiltersContext;\n","import Label from '@fuf-stack/pixels/Label';\n\nimport { useFilters } from './FiltersContext';\n\n/**\n * ActiveFilters\n *\n * Shows the list of currently applied filters as clickable chips that open\n * the edit modal. Each chip can be removed via its close action.\n */\ninterface ActiveFiltersProps {\n /** CSS class name to apply to each label */\n className?: string;\n}\n\nconst ActiveFilters = ({ className = undefined }: ActiveFiltersProps) => {\n const {\n activeFilters,\n getFilterValueByName,\n getFilterInstanceByName,\n hasError,\n removeFilter,\n showFilterModal,\n } = useFilters();\n return (\n <>\n {activeFilters.map((name) => {\n const instance = getFilterInstanceByName(name);\n const value = getFilterValueByName(name);\n\n // get the display component from the instance\n const DisplayComponent = instance.components.Display;\n\n return (\n <button\n key={name}\n aria-label={`Open ${name} filter`}\n type=\"button\"\n onClick={() => {\n showFilterModal(name);\n }}\n >\n <Label\n className={className}\n color={hasError(name) ? 'danger' : 'primary'}\n variant=\"flat\"\n onClose={() => {\n removeFilter(name);\n }}\n >\n {instance.icon}\n <DisplayComponent config={instance.config} value={value} />\n </Label>\n </button>\n );\n })}\n </>\n );\n};\n\nexport default ActiveFilters;\n","import { FaSliders } from 'react-icons/fa6';\n\nimport Menu from '@fuf-stack/pixels/Menu';\n\nimport { useFilters } from './FiltersContext';\n\ninterface AddFilterMenuProps {\n /** CSS class name map for slots */\n classNames?: Partial<{\n addFilterMenuItem: string;\n addFilterMenuButton: string;\n }>;\n}\n\n/**\n * AddFilterMenu\n *\n * Renders a menu trigger that opens a list of addable filters. Selecting an\n * item triggers the parent to seed a default value and open the modal.\n */\nconst AddFilterMenu = ({ classNames = {} }: AddFilterMenuProps) => {\n const { unusedFilters, addFilter, getFilterInstanceByName } = useFilters();\n\n const menuItems = unusedFilters.map((name) => {\n const instance = getFilterInstanceByName(name);\n const config = instance.config as { text?: string };\n const label = config?.text ?? name;\n return {\n key: name,\n icon: instance.icon,\n label,\n onClick: () => {\n addFilter(name);\n },\n };\n });\n\n return (\n <Menu\n isDisabled={!menuItems.length}\n items={menuItems}\n placement=\"bottom-start\"\n className={{\n item: classNames.addFilterMenuItem,\n trigger: classNames.addFilterMenuButton,\n }}\n triggerButtonProps={{\n 'aria-label': 'Add Filter',\n 'data-testid': 'add_filter_button',\n disableRipple: true,\n size: 'sm',\n variant: 'bordered',\n }}\n >\n <FaSliders />\n Filter\n </Menu>\n );\n};\n\nexport default AddFilterMenu;\n","import { Suspense } from 'react';\nimport { PiSlidersHorizontalBold } from 'react-icons/pi';\n\nimport Button from '@fuf-stack/pixels/Button';\nimport Modal from '@fuf-stack/pixels/Modal';\nimport SubmitButton from '@fuf-stack/uniform/SubmitButton';\n\nimport { useFilters } from './FiltersContext';\n\ninterface FilterModalProps {\n classNames?: Partial<{\n header: string;\n footer: string;\n body: string;\n }>;\n}\n\nconst FilterModal = ({ classNames = {} }: FilterModalProps) => {\n const {\n closeFilterModal,\n getFilterFormFieldName,\n getFilterInstanceByName,\n modalFilterName,\n removeFilter,\n } = useFilters();\n\n // don't render if no filter is open\n if (!modalFilterName) {\n return null;\n }\n\n const instance = getFilterInstanceByName(modalFilterName);\n const config = instance.config as { text?: string };\n\n // get the form component from the instance\n const FormComponent = instance.components.Form;\n\n return (\n <Modal\n isOpen\n onClose={closeFilterModal}\n className={{\n body: classNames.body,\n footer: classNames.footer,\n header: classNames.header,\n }}\n footer={\n <>\n <Button\n ariaLabel=\"Remove filter\"\n color=\"danger\"\n testId=\"remove_filter_button\"\n variant=\"flat\"\n onClick={() => {\n removeFilter(modalFilterName);\n }}\n >\n Remove\n </Button>\n <SubmitButton ariaLabel=\"Apply filter\" testId=\"apply_filter_button\">\n Apply Filter\n </SubmitButton>\n </>\n }\n header={\n <>\n {instance.icon ?? <PiSlidersHorizontalBold />}\n <div>{`${config?.text ?? modalFilterName} Filter`}</div>\n </>\n }\n >\n <Suspense>\n <FormComponent\n config={config}\n fieldName={getFilterFormFieldName(modalFilterName)}\n />\n </Suspense>\n </Modal>\n );\n};\n\nexport default FilterModal;\n","import { useState } from 'react';\nimport { FaSearch } from 'react-icons/fa';\n\nimport { motion } from '@fuf-stack/pixel-motion';\nimport Button from '@fuf-stack/pixels/Button';\nimport { useFormContext } from '@fuf-stack/uniform/hooks/useFormContext';\nimport Input from '@fuf-stack/uniform/Input';\nimport SubmitButton from '@fuf-stack/uniform/SubmitButton';\n\nexport type SearchConfiguration =\n | boolean\n | {\n /** Placeholder shown in the search input */\n placeholder?: string;\n };\n\ninterface SearchInputProps {\n /** Slots class names passed from parent variants */\n classNames?: Partial<{\n searchWrapper: string;\n searchShowButton: string;\n searchMotionDiv: string;\n searchInput: string;\n searchInputWrapper: string;\n searchSubmitButton: string;\n }>;\n /** Search configuration */\n config: SearchConfiguration;\n}\n\n/**\n * SearchInput\n *\n * By default renders only a search button. When clicked, the text input animates in\n * and a trailing submit button is shown.\n */\nconst SearchInput = ({ classNames = {}, config }: SearchInputProps) => {\n const { formState, setFocus, triggerSubmit } = useFormContext();\n\n // Auto-open if there is an initial or externally set search value\n const isInitiallyVisible = !!formState?.defaultValues?.search;\n const [isVisible, setIsVisible] = useState(isInitiallyVisible);\n\n const placeholder =\n typeof config === 'object' ? config.placeholder : undefined;\n\n return (\n <div className={classNames.searchWrapper}>\n {!isVisible && (\n <Button\n ariaLabel=\"Show search input\"\n className={classNames.searchShowButton}\n icon={<FaSearch />}\n size=\"sm\"\n testId=\"show_search_input_button\"\n variant=\"bordered\"\n onClick={() => {\n setIsVisible(true);\n }}\n />\n )}\n {isVisible ? (\n <motion.div\n key=\"search-input\"\n animate={{ opacity: 1 }}\n className={classNames.searchMotionDiv}\n // if the input was not initially visible, animate in\n initial={!isInitiallyVisible ? { opacity: 0.5 } : false}\n onAnimationComplete={() => {\n // if the input was not initially visible, focus it\n if (!isInitiallyVisible) {\n setFocus('search');\n }\n }}\n transition={{\n duration: 0.3,\n ease: 'circOut',\n }}\n >\n <Input\n clearable\n debounceDelay={0}\n name=\"search\"\n placeholder={placeholder}\n size=\"sm\"\n className={{\n input: classNames.searchInput,\n inputWrapper: classNames.searchInputWrapper,\n }}\n // submit on clear\n onClear={() => {\n triggerSubmit();\n }}\n />\n <SubmitButton\n ariaLabel=\"Submit search\"\n // eslint-disable-next-line react/no-children-prop\n children={null}\n className={classNames.searchSubmitButton}\n color=\"primary\"\n icon={<FaSearch />}\n size=\"sm\"\n testId=\"submit_search_button\"\n />\n </motion.div>\n ) : null}\n </div>\n );\n};\n\nexport default SearchInput;\n","import type { TVClassName } from '@fuf-stack/pixel-utils';\nimport type { VetoInput } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FiltersConfiguration } from './filters/types';\nimport type { SearchConfiguration } from './Subcomponents/SearchInput';\n\nimport createDebug from 'debug';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport Form from '@fuf-stack/uniform/Form';\n\nimport { useFilterValidation } from './hooks/useFilterValidation';\nimport ActiveFilters from './Subcomponents/ActiveFilters';\nimport AddFilterMenu from './Subcomponents/AddFilterMenu';\nimport FilterModal from './Subcomponents/FilterModal';\nimport { FiltersContextProvider } from './Subcomponents/FiltersContext';\nimport SearchInput from './Subcomponents/SearchInput';\n\nconst debug = createDebug('megapixels:Filter');\n\n// filter styling variants\nexport const filterVariants = tv({\n slots: {\n // outer wrapper\n base: 'flex flex-auto flex-col',\n // add filter menu trigger button\n addFilterMenuButton: '',\n // add filter menu item\n addFilterMenuItem: '',\n // active filter label\n activeFilterLabel: 'h-8 cursor-pointer rounded-md dark:text-foreground',\n // filter modal body\n filterModalBody: '',\n // filter modal header\n filterModalHeader: 'flex items-center gap-3 text-default-700',\n // filter modal footer\n filterModalFooter: 'justify-between',\n // form element\n form: 'mb-3 flex flex-wrap gap-3',\n // search input field\n searchInput: '',\n // search input wrapper (inner control)\n searchInputWrapper: '',\n // search motion container\n searchMotionDiv: 'flex w-72 gap-2',\n // search show button\n searchShowButton: '',\n // search submit button\n searchSubmitButton: '',\n // search wrapper\n searchWrapper: 'flex items-center',\n },\n});\n\ntype ClassName = TVClassName<typeof filterVariants>;\n\nexport interface FilterValues {\n search?: string;\n filter?: string | Record<string, unknown> | null;\n}\n\nexport type FilterChildRenderFn = (values: {\n search?: string;\n filter?: Record<string, unknown>;\n}) => ReactNode;\n\n/**\n * Filter\n *\n * Controlled, form-driven filter UI.\n *\n * Responsibilities\n * - Derives initial form values from the controlled `values` prop\n * - Builds a composite validation schema from the filter registry (and optional search)\n * - Exposes ergonomic UI: active filters list, add/remove actions, and per-filter modal\n * - Commits changes by invoking the controlled `onChange` callback on submit\n *\n * Structure\n * - Owns an ex-forms `Form` that wraps the entire filter experience\n * - Optionally renders a search input bound to the `search` field\n * - Renders ActiveFilters, AddFilterMenu, and FilterModal inside a shared context\n * - Optionally renders children as a render-prop with the resolved `values`\n */\nexport interface FilterProps {\n /** Optional render-prop that receives the resolved, controlled values */\n children?: FilterChildRenderFn;\n /** CSS class name */\n className?: ClassName;\n /** Configuration of the filter */\n config: {\n /**\n * Declarative filter configuration. Each entry ties a logical name to a\n * registry filter type and (optionally) per-usage config overrides.\n */\n filters: FiltersConfiguration;\n /** Optional configuration for search field */\n search?: SearchConfiguration;\n };\n /** ex-forms form instance name. Defaults to \"filterComponentForm\". */\n formName?: string;\n /** Controlled setter invoked on submit with the next canonical values */\n onChange: (nextValues: FilterValues) => void;\n /** Controlled committed state: the canonical `search` and `filter` values */\n values: FilterValues;\n}\n\n/**\n * Renders the filter UI bound to a single ex-forms `Form`.\n * The form is the source of truth during user interaction; the committed\n * state is controlled by the parent via `values`/`onChange`.\n */\nconst Filter = ({\n children = undefined,\n className = undefined,\n config,\n formName = 'filterComponentForm',\n onChange,\n values,\n}: FilterProps) => {\n // Submit handler: map form state back into the controlled `values` shape\n const handleSubmit = (nextValues: Record<string, unknown>) => {\n debug('handleSubmit', { nextValues });\n onChange(nextValues as FilterValues);\n };\n\n // Build validation schema for all configured filters (and optional search)\n const validation = useFilterValidation(\n config.filters,\n Boolean(config.search),\n );\n\n // validate controlled values are valid\n const {\n data: valuesValidated,\n errors,\n success,\n } = validation.validate(values as VetoInput);\n\n // classNames from slots\n const variants = filterVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n debug('render', {\n props: { config, values },\n validation: { errors, success, valuesValidated },\n });\n\n return (\n <div className={classNames.base}>\n {/*\n Uniform Form wrapper\n - initialValues derive from controlled props (with optional defaults)\n - validation is built from the registry for all configured filters\n - onSubmit maps form values back into values/onChange\n */}\n <Form\n className={classNames.form}\n // disable debug mode for now\n debug={{ disable: true }}\n initialValues={valuesValidated ?? {}}\n name={formName}\n onSubmit={handleSubmit}\n validation={validation}\n >\n {/* Render search if search config is provided */}\n {config.search ? (\n <SearchInput\n config={config.search}\n classNames={{\n searchInput: classNames.searchInput,\n searchInputWrapper: classNames.searchInputWrapper,\n searchMotionDiv: classNames.searchMotionDiv,\n searchShowButton: classNames.searchShowButton,\n searchSubmitButton: classNames.searchSubmitButton,\n searchWrapper: classNames.searchWrapper,\n }}\n />\n ) : null}\n {/*\n FiltersContextProvider exposes a minimal API for the UI layer:\n - activeFilters/unusedFilters by name\n - helpers to get merged config, value, components, and field names\n - methods to add/remove filters and show/close the modal\n */}\n <FiltersContextProvider config={config.filters}>\n <ActiveFilters className={classNames.activeFilterLabel} />\n <AddFilterMenu\n classNames={{\n addFilterMenuButton: classNames.addFilterMenuButton,\n addFilterMenuItem: classNames.addFilterMenuItem,\n }}\n />\n <FilterModal\n classNames={{\n body: classNames.filterModalBody,\n footer: classNames.filterModalFooter,\n header: classNames.filterModalHeader,\n }}\n />\n </FiltersContextProvider>\n </Form>\n {/* Children can consume derived search string and parsed filter object */}\n {children?.(valuesValidated ?? {})}\n </div>\n );\n};\n\nexport default Filter;\n","import type { FilterDefinition, FilterFactory } from './types';\n\n/**\n * createFilter\n *\n * Builds a filter factory from a static FilterDefinition. The returned factory\n * accepts a usage descriptor (name/icon and optional partial config) and\n * produces a concrete FilterInstance with:\n * - merged config (shallow: definition.defaults.config overlaid by overrides)\n * - Form/Display components\n * - validate function (forwarded from the definition)\n * - defaultValue (forwarded from the definition)\n * - name and icon for UI integration\n *\n * @typeParam Config - Configuration object shape for the filter\n * @typeParam Value - Runtime value type for the filter\n * @param definition - Static description of the filter (components, defaults, validate)\n * @returns FilterFactory that creates FilterInstance<Config, Value>\n */\nconst createFilter = <Config, Value>(\n definition: FilterDefinition<Config, Value>,\n): FilterFactory<Config, Value> => {\n return ({ name, icon, config }) => {\n return {\n components: definition.components,\n config: { ...definition.defaults.config, ...(config ?? {}) } as Config,\n defaultValue: definition.defaults.value,\n icon,\n name,\n validation: definition.validation,\n };\n };\n};\n\nexport default createFilter;\n","import type { FilterDisplayProps } from '../types';\nimport type { Config, Value } from './schema';\n\n/**\n * Read-only presentation for the boolean filter.\n * Displays human-readable text based on the current boolean `value`\n * and the provided `config` strings.\n */\nconst Display = ({\n value,\n config: { text, textPrefix, textNoWord },\n}: FilterDisplayProps<Config, Value>) => {\n if (typeof value === 'boolean') {\n return (\n <>\n {`${value ? textPrefix : `${textPrefix} ${textNoWord ?? 'no'}`} ${text}`}\n </>\n );\n }\n return <>{`${text}...`}</>;\n};\n\nexport default Display;\n","import type { FilterFormProps } from '../types';\nimport type { Config } from './schema';\n\nimport Switch from '@fuf-stack/uniform/Switch';\n\n/**\n * Renders the form control for the boolean filter.\n * Uses a `Switch` to toggle the boolean value and composes\n * the label from the provided `config` and `fieldName`.\n */\nconst Form = ({\n fieldName,\n config: { text, textPrefix },\n}: FilterFormProps<Config>) => {\n return <Switch label={`${textPrefix} ${text}`} name={fieldName} />;\n};\n\nexport default Form;\n","import type { vInfer } from '@fuf-stack/veto';\n\nimport { boolean, object, string } from '@fuf-stack/veto';\n\n/** configuration of the filter */\nexport const config = object({\n /**\n * Human‑readable label used in the UI (e.g. in the chip and modal header).\n * Examples: \"Magical\", \"Haunted\"\n */\n text: string(),\n /**\n * Optional word shown before the label when building sentence‑like chips.\n * Examples: \"is\" → \"is Magical\"\n */\n textPrefix: string().optional(),\n /**\n * Optional negation word used when a boolean value is false.\n * Examples: \"not\" → \"is not Magical\"\n */\n textNoWord: string().optional(),\n});\n\n/** validate the filter value */\nexport const validate = (_config?: Config) => {\n return boolean().optional();\n};\n\nexport type Config = vInfer<typeof config>;\nexport type Value = vInfer<ReturnType<typeof validate>>;\n","/* eslint-disable import-x/prefer-default-export */\n\nimport type { Config, Value } from './schema';\n\nimport createFilter from '../createFilter';\nimport Display from './Display';\nimport Form from './Form';\nimport { validate } from './schema';\n\n/**\n * Boolean filter definition for the Filter system.\n * Provides Display and Form components, default value/config, and validation.\n *\n * Defaults:\n * - value: true\n * - config: { text: 'Active', textPrefix: 'is', textNoWord: 'no' }\n *\n * @see Display\n * @see Form\n * @see validate\n */\nexport const boolean = createFilter<Config, Value>({\n components: { Display, Form },\n defaults: {\n value: true,\n config: { text: 'Active', textPrefix: 'is', textNoWord: 'no' },\n },\n validation: validate,\n});\n","import type { FilterDisplayProps } from '../types';\nimport type { Config, Value } from './schema';\n\n/**\n * Read-only presentation for the checkboxes filter.\n * Resolves and displays selected option labels based on `value` and `config`.\n * Supports string, ReactNode, and function labels (mode: 'display').\n */\nconst Display = ({\n value,\n config: { text, options },\n}: FilterDisplayProps<Config, Value>) => {\n if (value && value.length > 0) {\n return (\n <span className=\"flex items-center gap-1\">\n {text} is\n {value.map((val) => {\n const option = options.find((op) => {\n return op.value === val;\n });\n const label = option?.label ?? val;\n const resolvedLabel =\n typeof label === 'function' ? label('display') : label;\n return <span key={val}>{resolvedLabel}</span>;\n })}\n </span>\n );\n }\n return `${text} is ...`;\n};\n\nexport default Display;\n","import type { FilterFormProps } from '../types';\nimport type { Config } from './schema';\n\nimport Checkboxes from '@fuf-stack/uniform/Checkboxes';\n\n/**\n * Renders the form control for the checkboxes filter.\n * Uses a `Checkboxes` to select multiple options.\n * Resolves function labels with 'form' mode.\n */\nconst Form = ({ fieldName, config }: FilterFormProps<Config>) => {\n const resolvedOptions = config.options.map((option) => {\n return {\n ...option,\n label:\n typeof option.label === 'function'\n ? option.label('form')\n : option.label,\n };\n });\n\n return <Checkboxes name={fieldName} options={resolvedOptions} />;\n};\n\nexport default Form;\n","import type { vInfer } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\n\nimport { any, array, object, refineArray, string } from '@fuf-stack/veto';\n\n/** configuration of the filter */\nexport const config = object({\n /**\n * Human‑readable label used in the UI (e.g. label and modal header).\n * Example: \"Snacks\", \"Mood\"\n */\n text: string(),\n /**\n * Options rendered as multiple checkboxes. Each option needs a `label`\n * (what the user sees) and a `value` (what is written into the form state).\n * Label can be a string, React node, or a function that receives mode\n * ('form' or 'display') and returns a React node.\n */\n options: array(object({ label: any(), value: string() })),\n});\n\n/** Type-safe Config that overrides label to support ReactNode or function */\nexport type Config = Omit<vInfer<typeof config>, 'options'> & {\n options: {\n label: ReactNode | ((mode: 'form' | 'display') => ReactNode);\n value: string;\n }[];\n};\n\n/** validate the filter value */\nexport const validate = (cfg?: Config) => {\n return refineArray(array(string()).optional())({\n unique: true,\n custom: (values, ctx) => {\n if (!cfg) {\n return;\n }\n values.forEach((value) => {\n if (\n !cfg.options.find((option) => {\n return option?.value === value;\n })\n ) {\n ctx.addIssue({\n code: 'custom',\n message: `Invalid value: ${value}`,\n });\n }\n });\n },\n });\n};\n\nexport type Value = vInfer<ReturnType<typeof validate>>;\n","/* eslint-disable import-x/prefer-default-export */\n\nimport type { Config, Value } from './schema';\n\nimport createFilter from '../createFilter';\nimport Display from './Display';\nimport Form from './Form';\nimport { validate } from './schema';\n\n/**\n * Checkboxes filter definition for the Filter system.\n * Provides Display and Form components, default value/config, and validation.\n *\n * Defaults:\n * - value: []\n * - config: { text: 'Options', options: [] }\n *\n * @see Display\n * @see Form\n * @see validate\n */\nexport const checkboxes = createFilter<Config, Value>({\n components: { Display, Form },\n defaults: { value: [], config: { text: 'Options', options: [] } },\n validation: validate,\n});\n","import Filter from './Filter';\nimport { boolean } from './filters/boolean/boolean';\nimport { checkboxes } from './filters/checkboxes/checkboxes';\n\n// export types\nexport type * from './filters/types';\n\n// export helpers\nexport { default as createFilter } from './filters/createFilter';\n\n// export all filters\nexport const filters = {\n boolean,\n checkboxes,\n};\n\n// export everything from the Filter component (types and filterVariants)\nexport * from './Filter';\n\n// export the Filter component as default\nexport default Filter;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Filter-BHJ_5vaz.cjs","names":["Label","Menu","FaSliders","Modal","Button","SubmitButton","PiSlidersHorizontalBold","Suspense","Button","FaSearch","motion","Input","SubmitButton","debug","Form","SearchInput","ActiveFilters","AddFilterMenu","FilterModal","Display","Form","Switch","config","validate","createFilter","validate","Checkboxes","createFilter","Filter"],"sources":["../src/Filter/hooks/useFilterValidation.ts","../src/Filter/Subcomponents/FiltersContext.tsx","../src/Filter/Subcomponents/ActiveFilters.tsx","../src/Filter/Subcomponents/AddFilterMenu.tsx","../src/Filter/Subcomponents/FilterModal.tsx","../src/Filter/Subcomponents/SearchInput.tsx","../src/Filter/Filter.tsx","../src/Filter/filters/createFilter.ts","../src/Filter/filters/boolean/Display.tsx","../src/Filter/filters/boolean/Form.tsx","../src/Filter/filters/boolean/schema.ts","../src/Filter/filters/boolean/boolean.ts","../src/Filter/filters/checkboxes/Display.tsx","../src/Filter/filters/checkboxes/Form.tsx","../src/Filter/filters/checkboxes/schema.ts","../src/Filter/filters/checkboxes/checkboxes.ts","../src/Filter/index.ts"],"sourcesContent":["import type { VetoInstance, VetoRawShape, VetoTypeAny } from '@fuf-stack/veto';\nimport type { FilterInstance } from '../filters/types';\n\nimport { useMemo } from 'react';\n\nimport { object, string, stringToJSON, veto } from '@fuf-stack/veto';\n\n/**\n * useFilterValidation\n *\n * Builds a composite validation schema from all provided filter definitions\n * under \"filter\" and optionally includes a \"search\" string field.\n * Memoized by inputs.\n */\nexport const useFilterValidation = (\n filters: FilterInstance<unknown, unknown>[],\n withSearch?: boolean,\n) => {\n return useMemo<VetoInstance>(() => {\n // build filter validation\n let filterSchema: Record<string, VetoTypeAny> = {};\n filters.forEach((f) => {\n filterSchema = {\n ...filterSchema,\n [f.name]: f.validation(f.config) as VetoTypeAny,\n };\n });\n\n const validationSchema: VetoRawShape = {\n // filter validation\n filter: stringToJSON()\n .pipe(object(filterSchema))\n .or(object(filterSchema))\n .optional()\n .nullable()\n // transform null to undefined\n .transform((val) => {\n return val ?? undefined;\n }),\n // optional search validation\n ...(withSearch\n ? { search: string({ min: 0 }).nullable().optional() }\n : {}),\n };\n\n return veto(validationSchema);\n }, [filters, withSearch]);\n};\n\nexport default useFilterValidation;\n","import type { ReactNode } from 'react';\nimport type { FilterInstance, FiltersConfiguration } from '../filters/types';\n\nimport {\n createContext,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport { useFormContext } from '@fuf-stack/uniform/hooks/useFormContext';\n\ninterface FiltersContextValue {\n /** Active filters (names only) */\n activeFilters: string[];\n /** Seed default value and open modal for a filter usage. */\n addFilter: (name: string) => void;\n /** Close the modal. */\n closeFilterModal: () => void;\n /** Build fully-qualified form field path for a filter name */\n getFilterFormFieldName: (name: string) => string;\n /** Get current form value for a given filter name */\n getFilterValueByName: (name: string) => unknown;\n /** Get filter instance by name */\n getFilterInstanceByName: (name: string) => FilterInstance<unknown, unknown>;\n /** Validation helper for a specific filter field. */\n hasError: (name: string) => boolean;\n /** Name of the current filter that has its modal open */\n modalFilterName: string | undefined;\n /** Remove a filter from the form. */\n removeFilter: (name: string) => void;\n /** Open the modal for a given filter name. */\n showFilterModal: (name: string) => void;\n /** Filters that are not active (names only) */\n unusedFilters: string[];\n}\n\n/**\n * FiltersContext\n *\n * Central state for the filter UI with a clear boundary:\n * - The parent component controls committed filter values (via value/onChange)\n * - The form acts as an edit buffer (used by the modal)\n *\n * Design:\n * - activeFilters/unusedFilters are names-only and derived from the controlled\n * form state\n * - getFilterInstanceByName gives access to the concrete registry entry to\n * retrieve the correct Form/Display components\n * - add seeds defaults in the form and opens the modal\n * - remove un-registers the form field; if the removed filter is currently\n * open in the modal, the modal is closed without rollback\n * - on a new successful form submit (Apply), the modal closes without rollback\n * by subscribing to ex-forms submit state\n */\nconst FiltersContext = createContext<FiltersContextValue | undefined>(\n undefined,\n);\n\nexport const FiltersContextProvider = ({\n children,\n config,\n}: {\n children: ReactNode;\n config: FiltersConfiguration;\n}) => {\n // ex-forms integration:\n // - setValue/unregister/getFieldState: core helpers to manipulate and validate fields\n // - formState: we subscribe to submit-success to auto-close the modal after Apply\n const {\n formState,\n getFieldState,\n setValue,\n triggerSubmit,\n unregister,\n watch,\n } = useFormContext();\n\n /**\n * currentModalFilter\n *\n * Single source of truth for the filter edit modal and its rollback snapshot.\n * - name: which filter's modal is currently open (null when closed)\n * - hadValue/previousValue: snapshot of the controlled value taken when the\n * modal is opened; used to restore state if the user cancels/closes without\n * applying.\n *\n * Lifecycle semantics:\n * - showFilterModal(name): capture snapshot (current controlled value) and open\n * the modal for that filter.\n * - closeFilterModal(): if a snapshot exists, roll back un-applied edits by\n * restoring the previous value (setValue) or removing the field (unregister)\n * when it did not exist before; then clear currentModalFilter.\n * - On successful submit (Apply): close and clear currentModalFilter WITHOUT rollback\n * so edits remain committed.\n * - removeFilter(name): unregisters the field; when removing the filter that is\n * currently open, close the modal WITHOUT rollback (since removal is explicit).\n */\n const [currentModalFilter, setCurrentModalFilter] = useState<{\n name: string;\n hadValue: boolean;\n previousValue: unknown;\n } | null>(null);\n\n // Read current filter values from the form as the live edit buffer\n const filterValue = watch('filter', {});\n\n /**\n * getFilterFormFieldName\n *\n * Returns the fully-qualified field path for a given filter name,\n * e.g., `${filterUrlParam}.status`.\n */\n const getFilterFormFieldName = useCallback((name: string) => {\n return `filter.${name}`;\n }, []);\n\n /**\n * getFilterValueByName\n *\n * Returns the committed value for a filter from the controlled state.\n */\n const getFilterValueByName = useCallback(\n (name: string) => {\n return (filterValue as Record<string, unknown>)[name];\n },\n [filterValue],\n );\n\n /** Open the filter edit modal for the given filter name. */\n const showFilterModal = useCallback(\n (name: string) => {\n const prev = getFilterValueByName(name);\n setCurrentModalFilter({\n name,\n hadValue: typeof prev !== 'undefined',\n previousValue: prev,\n });\n },\n [getFilterValueByName],\n );\n\n /** Close the filter edit modal. Rollback un-applied edits to controlled state. */\n const closeFilterModal = useCallback(() => {\n if (currentModalFilter?.name) {\n const fieldName = getFilterFormFieldName(currentModalFilter.name);\n // if the filter had a value, set it back to the previous value,\n // otherwise unregister the field\n if (currentModalFilter.hadValue) {\n setValue(fieldName, currentModalFilter.previousValue);\n } else {\n unregister(fieldName);\n }\n }\n setCurrentModalFilter(null);\n }, [getFilterFormFieldName, currentModalFilter, setValue, unregister]);\n\n /**\n * Auto-close on submit success\n *\n * Close the modal only on new successful submissions. We track the last\n * submitCount and only react when it changes AND the form reports a\n * successful submit. This prevents closing when `isSubmitSuccessful` remains\n * true without a new submit event.\n */\n const lastSubmitCountRef = useRef<number>(0);\n useEffect(() => {\n if (\n formState.submitCount !== lastSubmitCountRef.current &&\n formState.isSubmitSuccessful\n ) {\n // On successful submit, close without rollback\n setCurrentModalFilter(null);\n }\n lastSubmitCountRef.current = formState.submitCount;\n }, [\n formState.submitCount,\n formState.isSubmitSuccessful,\n setCurrentModalFilter,\n ]);\n\n /**\n * activeFilters\n *\n * Filter names derived from the controlled form state. A filter is considered\n * active when a field exists at `filter.<name>`. Newly added filters become\n * active immediately (seeded default), and will be rolled back on cancel.\n */\n const activeFilters = useMemo(() => {\n return config\n .filter((f) => {\n return Object.hasOwn(filterValue ?? {}, f.name);\n })\n .map((f) => {\n return f.name;\n });\n }, [config, filterValue]);\n\n /**\n * unusedFilters\n *\n * Complement of activeFilters (names without a corresponding `filter.<name>`\n * field in the controlled form state).\n */\n const unusedFilters = useMemo(() => {\n return config\n .filter((f) => {\n return !Object.hasOwn(filterValue ?? {}, f.name);\n })\n .map((f) => {\n return f.name;\n });\n }, [config, filterValue]);\n\n /**\n * getRegistryFilterByName\n *\n * Looks up the concrete registry entry for a filter by name, enabling access\n * to typed Form/Display components and other registry-level metadata.\n */\n const getFilterInstanceByName = useCallback(\n (name: string) => {\n return config.find((f) => {\n return f.name === name;\n }) as FilterInstance<unknown, unknown>;\n },\n [config],\n );\n\n /**\n * addFilter\n *\n * Seeds the filter with its registry default value inside the form and opens\n * the modal for immediate editing. No URL writes happen here.\n */\n const addFilter = useCallback(\n (name: string) => {\n const inst = getFilterInstanceByName(name);\n showFilterModal(name);\n setValue(getFilterFormFieldName(name), inst.defaultValue);\n },\n [\n getFilterFormFieldName,\n getFilterInstanceByName,\n setValue,\n showFilterModal,\n ],\n );\n\n /**\n * removeFilter\n *\n * Unregisters the filter field from the form. This immediately removes the\n * filter from the active list since derived state watches the form. It\n * closes the modal without rollback if the removed filter is currently open.\n */\n const removeFilter = useCallback(\n (name: string) => {\n // unregister form field\n unregister(getFilterFormFieldName(name));\n // close filter modal if open\n if (currentModalFilter?.name === name) {\n // Explicit removal: close without rollback\n setCurrentModalFilter(null);\n }\n // trigger form submit (to update filter state)\n triggerSubmit();\n },\n [\n getFilterFormFieldName,\n currentModalFilter,\n setCurrentModalFilter,\n triggerSubmit,\n unregister,\n ],\n );\n\n /**\n * hasError\n *\n * Helper that checks the ex-forms field state for a specific filter and\n * reports whether the field is currently invalid.\n */\n const hasError = useCallback(\n (name: string) => {\n return getFieldState(getFilterFormFieldName(name)).invalid;\n },\n [getFieldState, getFilterFormFieldName],\n );\n\n const contextValue: FiltersContextValue = useMemo(() => {\n return {\n activeFilters,\n addFilter,\n closeFilterModal,\n getFilterFormFieldName,\n getFilterValueByName,\n getFilterInstanceByName,\n hasError,\n modalFilterName: currentModalFilter?.name,\n removeFilter,\n showFilterModal,\n unusedFilters,\n };\n }, [\n activeFilters,\n addFilter,\n closeFilterModal,\n getFilterFormFieldName,\n getFilterValueByName,\n getFilterInstanceByName,\n hasError,\n currentModalFilter,\n removeFilter,\n showFilterModal,\n unusedFilters,\n ]);\n\n return (\n <FiltersContext.Provider value={contextValue}>\n {children}\n </FiltersContext.Provider>\n );\n};\n\n/**\n * useFilters\n *\n * Convenience hook to consume the FiltersContext. Throws a descriptive error\n * when used outside of a FiltersContextProvider to make integration mistakes\n * obvious during development.\n */\nexport const useFilters = (): FiltersContextValue => {\n const ctx = useContext(FiltersContext);\n if (!ctx) {\n throw new Error('useFilters must be used within FiltersContextProvider');\n }\n return ctx;\n};\n\nexport default FiltersContext;\n","import Label from '@fuf-stack/pixels/Label';\n\nimport { useFilters } from './FiltersContext';\n\n/**\n * ActiveFilters\n *\n * Shows the list of currently applied filters as clickable chips that open\n * the edit modal. Each chip can be removed via its close action.\n */\ninterface ActiveFiltersProps {\n /** CSS class name to apply to each label */\n className?: string;\n}\n\nconst ActiveFilters = ({ className = undefined }: ActiveFiltersProps) => {\n const {\n activeFilters,\n getFilterValueByName,\n getFilterInstanceByName,\n hasError,\n removeFilter,\n showFilterModal,\n } = useFilters();\n return (\n <>\n {activeFilters.map((name) => {\n const instance = getFilterInstanceByName(name);\n const value = getFilterValueByName(name);\n\n // get the display component from the instance\n const DisplayComponent = instance.components.Display;\n\n return (\n <button\n key={name}\n aria-label={`Open ${name} filter`}\n type=\"button\"\n onClick={() => {\n showFilterModal(name);\n }}\n >\n <Label\n className={className}\n color={hasError(name) ? 'danger' : 'primary'}\n variant=\"flat\"\n onClose={() => {\n removeFilter(name);\n }}\n >\n {instance.icon}\n <DisplayComponent config={instance.config} value={value} />\n </Label>\n </button>\n );\n })}\n </>\n );\n};\n\nexport default ActiveFilters;\n","import { FaSliders } from 'react-icons/fa6';\n\nimport Menu from '@fuf-stack/pixels/Menu';\n\nimport { useFilters } from './FiltersContext';\n\ninterface AddFilterMenuProps {\n /** CSS class name map for slots */\n classNames?: Partial<{\n addFilterMenuItem: string;\n addFilterMenuButton: string;\n }>;\n}\n\n/**\n * AddFilterMenu\n *\n * Renders a menu trigger that opens a list of addable filters. Selecting an\n * item triggers the parent to seed a default value and open the modal.\n */\nconst AddFilterMenu = ({ classNames = {} }: AddFilterMenuProps) => {\n const { unusedFilters, addFilter, getFilterInstanceByName } = useFilters();\n\n const menuItems = unusedFilters.map((name) => {\n const instance = getFilterInstanceByName(name);\n const config = instance.config as { text?: string };\n const label = config?.text ?? name;\n return {\n key: name,\n icon: instance.icon,\n label,\n onClick: () => {\n addFilter(name);\n },\n };\n });\n\n return (\n <Menu\n isDisabled={!menuItems.length}\n items={menuItems}\n placement=\"bottom-start\"\n className={{\n item: classNames.addFilterMenuItem,\n trigger: classNames.addFilterMenuButton,\n }}\n triggerButtonProps={{\n 'aria-label': 'Add Filter',\n 'data-testid': 'add_filter_button',\n disableRipple: true,\n size: 'sm',\n variant: 'bordered',\n }}\n >\n <FaSliders />\n Filter\n </Menu>\n );\n};\n\nexport default AddFilterMenu;\n","import { Suspense } from 'react';\nimport { PiSlidersHorizontalBold } from 'react-icons/pi';\n\nimport Button from '@fuf-stack/pixels/Button';\nimport Modal from '@fuf-stack/pixels/Modal';\nimport SubmitButton from '@fuf-stack/uniform/SubmitButton';\n\nimport { useFilters } from './FiltersContext';\n\ninterface FilterModalProps {\n classNames?: Partial<{\n header: string;\n footer: string;\n body: string;\n }>;\n}\n\nconst FilterModal = ({ classNames = {} }: FilterModalProps) => {\n const {\n closeFilterModal,\n getFilterFormFieldName,\n getFilterInstanceByName,\n modalFilterName,\n removeFilter,\n } = useFilters();\n\n // don't render if no filter is open\n if (!modalFilterName) {\n return null;\n }\n\n const instance = getFilterInstanceByName(modalFilterName);\n const config = instance.config as { text?: string };\n\n // get the form component from the instance\n const FormComponent = instance.components.Form;\n\n return (\n <Modal\n isOpen\n onClose={closeFilterModal}\n className={{\n body: classNames.body,\n footer: classNames.footer,\n header: classNames.header,\n }}\n footer={\n <>\n <Button\n ariaLabel=\"Remove filter\"\n color=\"danger\"\n testId=\"remove_filter_button\"\n variant=\"flat\"\n onClick={() => {\n removeFilter(modalFilterName);\n }}\n >\n Remove\n </Button>\n <SubmitButton ariaLabel=\"Apply filter\" testId=\"apply_filter_button\">\n Apply Filter\n </SubmitButton>\n </>\n }\n header={\n <>\n {instance.icon ?? <PiSlidersHorizontalBold />}\n <div>{`${config?.text ?? modalFilterName} Filter`}</div>\n </>\n }\n >\n <Suspense>\n <FormComponent\n config={config}\n fieldName={getFilterFormFieldName(modalFilterName)}\n />\n </Suspense>\n </Modal>\n );\n};\n\nexport default FilterModal;\n","import { useState } from 'react';\nimport { FaSearch } from 'react-icons/fa';\n\nimport { motion } from '@fuf-stack/pixel-motion';\nimport Button from '@fuf-stack/pixels/Button';\nimport { useFormContext } from '@fuf-stack/uniform/hooks/useFormContext';\nimport Input from '@fuf-stack/uniform/Input';\nimport SubmitButton from '@fuf-stack/uniform/SubmitButton';\n\nexport type SearchConfiguration =\n | boolean\n | {\n /** Placeholder shown in the search input */\n placeholder?: string;\n };\n\ninterface SearchInputProps {\n /** Slots class names passed from parent variants */\n classNames?: Partial<{\n searchWrapper: string;\n searchShowButton: string;\n searchMotionDiv: string;\n searchInput: string;\n searchInputWrapper: string;\n searchSubmitButton: string;\n }>;\n /** Search configuration */\n config: SearchConfiguration;\n}\n\n/**\n * SearchInput\n *\n * By default renders only a search button. When clicked, the text input animates in\n * and a trailing submit button is shown.\n */\nconst SearchInput = ({ classNames = {}, config }: SearchInputProps) => {\n const { formState, setFocus, triggerSubmit } = useFormContext();\n\n // Auto-open if there is an initial or externally set search value\n const isInitiallyVisible = !!formState?.defaultValues?.search;\n const [isVisible, setIsVisible] = useState(isInitiallyVisible);\n\n const placeholder =\n typeof config === 'object' ? config.placeholder : undefined;\n\n return (\n <div className={classNames.searchWrapper}>\n {!isVisible && (\n <Button\n ariaLabel=\"Show search input\"\n className={classNames.searchShowButton}\n icon={<FaSearch />}\n size=\"sm\"\n testId=\"show_search_input_button\"\n variant=\"bordered\"\n onClick={() => {\n setIsVisible(true);\n }}\n />\n )}\n {isVisible ? (\n <motion.div\n key=\"search-input\"\n animate={{ opacity: 1 }}\n className={classNames.searchMotionDiv}\n // if the input was not initially visible, animate in\n initial={!isInitiallyVisible ? { opacity: 0.5 } : false}\n onAnimationComplete={() => {\n // if the input was not initially visible, focus it\n if (!isInitiallyVisible) {\n setFocus('search');\n }\n }}\n transition={{\n duration: 0.3,\n ease: 'circOut',\n }}\n >\n <Input\n clearable\n debounceDelay={0}\n name=\"search\"\n placeholder={placeholder}\n size=\"sm\"\n className={{\n input: classNames.searchInput,\n inputWrapper: classNames.searchInputWrapper,\n }}\n // submit on clear\n onClear={() => {\n triggerSubmit();\n }}\n />\n <SubmitButton\n ariaLabel=\"Submit search\"\n // eslint-disable-next-line react/no-children-prop\n children={null}\n className={classNames.searchSubmitButton}\n color=\"primary\"\n icon={<FaSearch />}\n size=\"sm\"\n testId=\"submit_search_button\"\n />\n </motion.div>\n ) : null}\n </div>\n );\n};\n\nexport default SearchInput;\n","import type { TVClassName } from '@fuf-stack/pixel-utils';\nimport type { VetoInput } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FiltersConfiguration } from './filters/types';\nimport type { SearchConfiguration } from './Subcomponents/SearchInput';\n\nimport createDebug from 'debug';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport Form from '@fuf-stack/uniform/Form';\n\nimport { useFilterValidation } from './hooks/useFilterValidation';\nimport ActiveFilters from './Subcomponents/ActiveFilters';\nimport AddFilterMenu from './Subcomponents/AddFilterMenu';\nimport FilterModal from './Subcomponents/FilterModal';\nimport { FiltersContextProvider } from './Subcomponents/FiltersContext';\nimport SearchInput from './Subcomponents/SearchInput';\n\nconst debug = createDebug('megapixels:Filter');\n\n// filter styling variants\nexport const filterVariants = tv({\n slots: {\n // outer wrapper\n base: 'flex flex-auto flex-col',\n // add filter menu trigger button\n addFilterMenuButton: '',\n // add filter menu item\n addFilterMenuItem: '',\n // active filter label\n activeFilterLabel: 'h-8 cursor-pointer rounded-md dark:text-foreground',\n // filter modal body\n filterModalBody: '',\n // filter modal header\n filterModalHeader: 'flex items-center gap-3 text-default-700',\n // filter modal footer\n filterModalFooter: 'justify-between',\n // form element\n form: 'mb-3 flex flex-wrap gap-3',\n // search input field\n searchInput: '',\n // search input wrapper (inner control)\n searchInputWrapper: '',\n // search motion container\n searchMotionDiv: 'flex w-72 gap-2',\n // search show button\n searchShowButton: '',\n // search submit button\n searchSubmitButton: '',\n // search wrapper\n searchWrapper: 'flex items-center',\n },\n});\n\ntype ClassName = TVClassName<typeof filterVariants>;\n\nexport interface FilterValues {\n search?: string;\n filter?: string | Record<string, unknown> | null;\n}\n\nexport type FilterChildRenderFn = (values: {\n search?: string;\n filter?: Record<string, unknown>;\n}) => ReactNode;\n\n/**\n * Filter\n *\n * Controlled, form-driven filter UI.\n *\n * Responsibilities\n * - Derives initial form values from the controlled `values` prop\n * - Builds a composite validation schema from the filter registry (and optional search)\n * - Exposes ergonomic UI: active filters list, add/remove actions, and per-filter modal\n * - Commits changes by invoking the controlled `onChange` callback on submit\n *\n * Structure\n * - Owns an ex-forms `Form` that wraps the entire filter experience\n * - Optionally renders a search input bound to the `search` field\n * - Renders ActiveFilters, AddFilterMenu, and FilterModal inside a shared context\n * - Optionally renders children as a render-prop with the resolved `values`\n */\nexport interface FilterProps {\n /** Optional render-prop that receives the resolved, controlled values */\n children?: FilterChildRenderFn;\n /** CSS class name */\n className?: ClassName;\n /** Configuration of the filter */\n config: {\n /**\n * Declarative filter configuration. Each entry ties a logical name to a\n * registry filter type and (optionally) per-usage config overrides.\n */\n filters: FiltersConfiguration;\n /** Optional configuration for search field */\n search?: SearchConfiguration;\n };\n /** ex-forms form instance name. Defaults to \"filterComponentForm\". */\n formName?: string;\n /** Controlled setter invoked on submit with the next canonical values */\n onChange: (nextValues: FilterValues) => void;\n /** Controlled committed state: the canonical `search` and `filter` values */\n values: FilterValues;\n}\n\n/**\n * Renders the filter UI bound to a single ex-forms `Form`.\n * The form is the source of truth during user interaction; the committed\n * state is controlled by the parent via `values`/`onChange`.\n */\nconst Filter = ({\n children = undefined,\n className = undefined,\n config,\n formName = 'filterComponentForm',\n onChange,\n values,\n}: FilterProps) => {\n // Submit handler: map form state back into the controlled `values` shape\n const handleSubmit = (nextValues: Record<string, unknown>) => {\n debug('handleSubmit', { nextValues });\n onChange(nextValues as FilterValues);\n };\n\n // Build validation schema for all configured filters (and optional search)\n const validation = useFilterValidation(\n config.filters,\n Boolean(config.search),\n );\n\n // validate controlled values are valid\n const {\n data: valuesValidated,\n errors,\n success,\n } = validation.validate(values as VetoInput);\n\n // classNames from slots\n const variants = filterVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n debug('render', {\n props: { config, values },\n validation: { errors, success, valuesValidated },\n });\n\n return (\n <div className={classNames.base}>\n {/*\n Uniform Form wrapper\n - initialValues derive from controlled props (with optional defaults)\n - validation is built from the registry for all configured filters\n - onSubmit maps form values back into values/onChange\n */}\n <Form\n className={classNames.form}\n // disable debug mode for now\n debug={{ disable: true }}\n initialValues={valuesValidated ?? {}}\n name={formName}\n onSubmit={handleSubmit}\n validation={validation}\n >\n {/* Render search if search config is provided */}\n {config.search ? (\n <SearchInput\n config={config.search}\n classNames={{\n searchInput: classNames.searchInput,\n searchInputWrapper: classNames.searchInputWrapper,\n searchMotionDiv: classNames.searchMotionDiv,\n searchShowButton: classNames.searchShowButton,\n searchSubmitButton: classNames.searchSubmitButton,\n searchWrapper: classNames.searchWrapper,\n }}\n />\n ) : null}\n {/*\n FiltersContextProvider exposes a minimal API for the UI layer:\n - activeFilters/unusedFilters by name\n - helpers to get merged config, value, components, and field names\n - methods to add/remove filters and show/close the modal\n */}\n <FiltersContextProvider config={config.filters}>\n <ActiveFilters className={classNames.activeFilterLabel} />\n <AddFilterMenu\n classNames={{\n addFilterMenuButton: classNames.addFilterMenuButton,\n addFilterMenuItem: classNames.addFilterMenuItem,\n }}\n />\n <FilterModal\n classNames={{\n body: classNames.filterModalBody,\n footer: classNames.filterModalFooter,\n header: classNames.filterModalHeader,\n }}\n />\n </FiltersContextProvider>\n </Form>\n {/* Children can consume derived search string and parsed filter object */}\n {children?.(valuesValidated ?? {})}\n </div>\n );\n};\n\nexport default Filter;\n","import type { FilterDefinition, FilterFactory } from './types';\n\n/**\n * createFilter\n *\n * Builds a filter factory from a static FilterDefinition. The returned factory\n * accepts a usage descriptor (name/icon and optional partial config) and\n * produces a concrete FilterInstance with:\n * - merged config (shallow: definition.defaults.config overlaid by overrides)\n * - Form/Display components\n * - validate function (forwarded from the definition)\n * - defaultValue (forwarded from the definition)\n * - name and icon for UI integration\n *\n * @typeParam Config - Configuration object shape for the filter\n * @typeParam Value - Runtime value type for the filter\n * @param definition - Static description of the filter (components, defaults, validate)\n * @returns FilterFactory that creates FilterInstance<Config, Value>\n */\nconst createFilter = <Config, Value>(\n definition: FilterDefinition<Config, Value>,\n): FilterFactory<Config, Value> => {\n return ({ name, icon, config }) => {\n return {\n components: definition.components,\n config: { ...definition.defaults.config, ...(config ?? {}) } as Config,\n defaultValue: definition.defaults.value,\n icon,\n name,\n validation: definition.validation,\n };\n };\n};\n\nexport default createFilter;\n","import type { FilterDisplayProps } from '../types';\nimport type { Config, Value } from './schema';\n\n/**\n * Read-only presentation for the boolean filter.\n * Displays human-readable text based on the current boolean `value`\n * and the provided `config` strings.\n */\nconst Display = ({\n value,\n config: { text, textPrefix, textNoWord },\n}: FilterDisplayProps<Config, Value>) => {\n if (typeof value === 'boolean') {\n return (\n <>\n {`${value ? textPrefix : `${textPrefix} ${textNoWord ?? 'no'}`} ${text}`}\n </>\n );\n }\n return <>{`${text}...`}</>;\n};\n\nexport default Display;\n","import type { FilterFormProps } from '../types';\nimport type { Config } from './schema';\n\nimport Switch from '@fuf-stack/uniform/Switch';\n\n/**\n * Renders the form control for the boolean filter.\n * Uses a `Switch` to toggle the boolean value and composes\n * the label from the provided `config` and `fieldName`.\n */\nconst Form = ({\n fieldName,\n config: { text, textPrefix },\n}: FilterFormProps<Config>) => {\n return <Switch label={`${textPrefix} ${text}`} name={fieldName} />;\n};\n\nexport default Form;\n","import type { vInfer } from '@fuf-stack/veto';\n\nimport { boolean, object, string } from '@fuf-stack/veto';\n\n/** configuration of the filter */\nexport const config = object({\n /**\n * Human‑readable label used in the UI (e.g. in the chip and modal header).\n * Examples: \"Magical\", \"Haunted\"\n */\n text: string(),\n /**\n * Optional word shown before the label when building sentence‑like chips.\n * Examples: \"is\" → \"is Magical\"\n */\n textPrefix: string().optional(),\n /**\n * Optional negation word used when a boolean value is false.\n * Examples: \"not\" → \"is not Magical\"\n */\n textNoWord: string().optional(),\n});\n\n/** validate the filter value */\nexport const validate = (_config?: Config) => {\n return boolean().optional();\n};\n\nexport type Config = vInfer<typeof config>;\nexport type Value = vInfer<ReturnType<typeof validate>>;\n","/* eslint-disable import-x/prefer-default-export */\n\nimport type { Config, Value } from './schema';\n\nimport createFilter from '../createFilter';\nimport Display from './Display';\nimport Form from './Form';\nimport { validate } from './schema';\n\n/**\n * Boolean filter definition for the Filter system.\n * Provides Display and Form components, default value/config, and validation.\n *\n * Defaults:\n * - value: true\n * - config: { text: 'Active', textPrefix: 'is', textNoWord: 'no' }\n *\n * @see Display\n * @see Form\n * @see validate\n */\nexport const boolean = createFilter<Config, Value>({\n components: { Display, Form },\n defaults: {\n value: true,\n config: { text: 'Active', textPrefix: 'is', textNoWord: 'no' },\n },\n validation: validate,\n});\n","import type { FilterDisplayProps } from '../types';\nimport type { Config, Value } from './schema';\n\n/**\n * Read-only presentation for the checkboxes filter.\n * Resolves and displays selected option labels based on `value` and `config`.\n * Supports string, ReactNode, and function labels (mode: 'display').\n */\nconst Display = ({\n value,\n config: { text, options },\n}: FilterDisplayProps<Config, Value>) => {\n if (value && value.length > 0) {\n return (\n <span className=\"flex items-center gap-1\">\n {text} is\n {value.map((val) => {\n const option = options.find((op) => {\n return op.value === val;\n });\n const label = option?.label ?? val;\n const resolvedLabel =\n typeof label === 'function' ? label('display') : label;\n return <span key={val}>{resolvedLabel}</span>;\n })}\n </span>\n );\n }\n return `${text} is ...`;\n};\n\nexport default Display;\n","import type { FilterFormProps } from '../types';\nimport type { Config } from './schema';\n\nimport Checkboxes from '@fuf-stack/uniform/Checkboxes';\n\n/**\n * Renders the form control for the checkboxes filter.\n * Uses a `Checkboxes` to select multiple options.\n * Resolves function labels with 'form' mode.\n */\nconst Form = ({ fieldName, config }: FilterFormProps<Config>) => {\n const resolvedOptions = config.options.map((option) => {\n return {\n ...option,\n label:\n typeof option.label === 'function'\n ? option.label('form')\n : option.label,\n };\n });\n\n return <Checkboxes name={fieldName} options={resolvedOptions} />;\n};\n\nexport default Form;\n","import type { vInfer } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\n\nimport { any, array, object, refineArray, string } from '@fuf-stack/veto';\n\n/** configuration of the filter */\nexport const config = object({\n /**\n * Human‑readable label used in the UI (e.g. label and modal header).\n * Example: \"Snacks\", \"Mood\"\n */\n text: string(),\n /**\n * Options rendered as multiple checkboxes. Each option needs a `label`\n * (what the user sees) and a `value` (what is written into the form state).\n * Label can be a string, React node, or a function that receives mode\n * ('form' or 'display') and returns a React node.\n */\n options: array(object({ label: any(), value: string() })),\n});\n\n/** Type-safe Config that overrides label to support ReactNode or function */\nexport type Config = Omit<vInfer<typeof config>, 'options'> & {\n options: {\n label: ReactNode | ((mode: 'form' | 'display') => ReactNode);\n value: string;\n }[];\n};\n\n/** validate the filter value */\nexport const validate = (cfg?: Config) => {\n return refineArray(array(string()).optional())({\n unique: true,\n custom: (values, ctx) => {\n if (!cfg) {\n return;\n }\n values.forEach((value) => {\n if (\n !cfg.options.find((option) => {\n return option?.value === value;\n })\n ) {\n ctx.addIssue({\n code: 'custom',\n message: `Invalid value: ${value}`,\n });\n }\n });\n },\n });\n};\n\nexport type Value = vInfer<ReturnType<typeof validate>>;\n","/* eslint-disable import-x/prefer-default-export */\n\nimport type { Config, Value } from './schema';\n\nimport createFilter from '../createFilter';\nimport Display from './Display';\nimport Form from './Form';\nimport { validate } from './schema';\n\n/**\n * Checkboxes filter definition for the Filter system.\n * Provides Display and Form components, default value/config, and validation.\n *\n * Defaults:\n * - value: []\n * - config: { text: 'Options', options: [] }\n *\n * @see Display\n * @see Form\n * @see validate\n */\nexport const checkboxes = createFilter<Config, Value>({\n components: { Display, Form },\n defaults: { value: [], config: { text: 'Options', options: [] } },\n validation: validate,\n});\n","import Filter from './Filter';\nimport { boolean } from './filters/boolean/boolean';\nimport { checkboxes } from './filters/checkboxes/checkboxes';\n\n// export types\nexport type * from './filters/types';\n\n// export helpers\nexport { default as createFilter } from './filters/createFilter';\n\n// export all filters\nexport const filters = {\n boolean,\n checkboxes,\n};\n\n// export everything from the Filter component (types and filterVariants)\nexport * from './Filter';\n\n// export the Filter component as default\nexport default Filter;\n"],"mappings":"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"}
|
|
@@ -26,10 +26,10 @@ import Checkboxes from "@fuf-stack/uniform/Checkboxes";
|
|
|
26
26
|
* under "filter" and optionally includes a "search" string field.
|
|
27
27
|
* Memoized by inputs.
|
|
28
28
|
*/
|
|
29
|
-
const useFilterValidation = (filters
|
|
29
|
+
const useFilterValidation = (filters, withSearch) => {
|
|
30
30
|
return useMemo(() => {
|
|
31
31
|
let filterSchema = {};
|
|
32
|
-
filters
|
|
32
|
+
filters.forEach((f) => {
|
|
33
33
|
filterSchema = {
|
|
34
34
|
...filterSchema,
|
|
35
35
|
[f.name]: f.validation(f.config)
|
|
@@ -41,7 +41,7 @@ const useFilterValidation = (filters$1, withSearch) => {
|
|
|
41
41
|
}),
|
|
42
42
|
...withSearch ? { search: string({ min: 0 }).nullable().optional() } : {}
|
|
43
43
|
});
|
|
44
|
-
}, [filters
|
|
44
|
+
}, [filters, withSearch]);
|
|
45
45
|
};
|
|
46
46
|
|
|
47
47
|
//#endregion
|
|
@@ -65,7 +65,7 @@ const useFilterValidation = (filters$1, withSearch) => {
|
|
|
65
65
|
* by subscribing to ex-forms submit state
|
|
66
66
|
*/
|
|
67
67
|
const FiltersContext = createContext(void 0);
|
|
68
|
-
const FiltersContextProvider = ({ children, config
|
|
68
|
+
const FiltersContextProvider = ({ children, config }) => {
|
|
69
69
|
const { formState, getFieldState, setValue, triggerSubmit, unregister, watch } = useFormContext();
|
|
70
70
|
/**
|
|
71
71
|
* currentModalFilter
|
|
@@ -154,12 +154,12 @@ const FiltersContextProvider = ({ children, config: config$2 }) => {
|
|
|
154
154
|
* active immediately (seeded default), and will be rolled back on cancel.
|
|
155
155
|
*/
|
|
156
156
|
const activeFilters = useMemo(() => {
|
|
157
|
-
return config
|
|
157
|
+
return config.filter((f) => {
|
|
158
158
|
return Object.hasOwn(filterValue ?? {}, f.name);
|
|
159
159
|
}).map((f) => {
|
|
160
160
|
return f.name;
|
|
161
161
|
});
|
|
162
|
-
}, [config
|
|
162
|
+
}, [config, filterValue]);
|
|
163
163
|
/**
|
|
164
164
|
* unusedFilters
|
|
165
165
|
*
|
|
@@ -167,12 +167,12 @@ const FiltersContextProvider = ({ children, config: config$2 }) => {
|
|
|
167
167
|
* field in the controlled form state).
|
|
168
168
|
*/
|
|
169
169
|
const unusedFilters = useMemo(() => {
|
|
170
|
-
return config
|
|
170
|
+
return config.filter((f) => {
|
|
171
171
|
return !Object.hasOwn(filterValue ?? {}, f.name);
|
|
172
172
|
}).map((f) => {
|
|
173
173
|
return f.name;
|
|
174
174
|
});
|
|
175
|
-
}, [config
|
|
175
|
+
}, [config, filterValue]);
|
|
176
176
|
/**
|
|
177
177
|
* getRegistryFilterByName
|
|
178
178
|
*
|
|
@@ -180,10 +180,10 @@ const FiltersContextProvider = ({ children, config: config$2 }) => {
|
|
|
180
180
|
* to typed Form/Display components and other registry-level metadata.
|
|
181
181
|
*/
|
|
182
182
|
const getFilterInstanceByName = useCallback((name) => {
|
|
183
|
-
return config
|
|
183
|
+
return config.find((f) => {
|
|
184
184
|
return f.name === name;
|
|
185
185
|
});
|
|
186
|
-
}, [config
|
|
186
|
+
}, [config]);
|
|
187
187
|
/**
|
|
188
188
|
* addFilter
|
|
189
189
|
*
|
|
@@ -351,7 +351,7 @@ const FilterModal = ({ classNames = {} }) => {
|
|
|
351
351
|
const { closeFilterModal, getFilterFormFieldName, getFilterInstanceByName, modalFilterName, removeFilter } = useFilters();
|
|
352
352
|
if (!modalFilterName) return null;
|
|
353
353
|
const instance = getFilterInstanceByName(modalFilterName);
|
|
354
|
-
const config
|
|
354
|
+
const config = instance.config;
|
|
355
355
|
const FormComponent = instance.components.Form;
|
|
356
356
|
return /* @__PURE__ */ jsx(Modal, {
|
|
357
357
|
isOpen: true,
|
|
@@ -375,9 +375,9 @@ const FilterModal = ({ classNames = {} }) => {
|
|
|
375
375
|
testId: "apply_filter_button",
|
|
376
376
|
children: "Apply Filter"
|
|
377
377
|
})] }),
|
|
378
|
-
header: /* @__PURE__ */ jsxs(Fragment, { children: [instance.icon ?? /* @__PURE__ */ jsx(PiSlidersHorizontalBold, {}), /* @__PURE__ */ jsx("div", { children: `${config
|
|
378
|
+
header: /* @__PURE__ */ jsxs(Fragment, { children: [instance.icon ?? /* @__PURE__ */ jsx(PiSlidersHorizontalBold, {}), /* @__PURE__ */ jsx("div", { children: `${config?.text ?? modalFilterName} Filter` })] }),
|
|
379
379
|
children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(FormComponent, {
|
|
380
|
-
config
|
|
380
|
+
config,
|
|
381
381
|
fieldName: getFilterFormFieldName(modalFilterName)
|
|
382
382
|
}) })
|
|
383
383
|
});
|
|
@@ -392,11 +392,11 @@ var FilterModal_default = FilterModal;
|
|
|
392
392
|
* By default renders only a search button. When clicked, the text input animates in
|
|
393
393
|
* and a trailing submit button is shown.
|
|
394
394
|
*/
|
|
395
|
-
const SearchInput = ({ classNames = {}, config
|
|
395
|
+
const SearchInput = ({ classNames = {}, config }) => {
|
|
396
396
|
const { formState, setFocus, triggerSubmit } = useFormContext();
|
|
397
397
|
const isInitiallyVisible = !!formState?.defaultValues?.search;
|
|
398
398
|
const [isVisible, setIsVisible] = useState(isInitiallyVisible);
|
|
399
|
-
const placeholder = typeof config
|
|
399
|
+
const placeholder = typeof config === "object" ? config.placeholder : void 0;
|
|
400
400
|
return /* @__PURE__ */ jsxs("div", {
|
|
401
401
|
className: classNames.searchWrapper,
|
|
402
402
|
children: [!isVisible && /* @__PURE__ */ jsx(Button, {
|
|
@@ -471,17 +471,17 @@ const filterVariants = tv({ slots: {
|
|
|
471
471
|
* The form is the source of truth during user interaction; the committed
|
|
472
472
|
* state is controlled by the parent via `values`/`onChange`.
|
|
473
473
|
*/
|
|
474
|
-
const Filter = ({ children = void 0, className = void 0, config
|
|
474
|
+
const Filter = ({ children = void 0, className = void 0, config, formName = "filterComponentForm", onChange, values }) => {
|
|
475
475
|
const handleSubmit = (nextValues) => {
|
|
476
476
|
debug("handleSubmit", { nextValues });
|
|
477
477
|
onChange(nextValues);
|
|
478
478
|
};
|
|
479
|
-
const validation = useFilterValidation(config
|
|
479
|
+
const validation = useFilterValidation(config.filters, Boolean(config.search));
|
|
480
480
|
const { data: valuesValidated, errors, success } = validation.validate(values);
|
|
481
481
|
const classNames = variantsToClassNames(filterVariants(), className, "base");
|
|
482
482
|
debug("render", {
|
|
483
483
|
props: {
|
|
484
|
-
config
|
|
484
|
+
config,
|
|
485
485
|
values
|
|
486
486
|
},
|
|
487
487
|
validation: {
|
|
@@ -499,8 +499,8 @@ const Filter = ({ children = void 0, className = void 0, config: config$2, formN
|
|
|
499
499
|
name: formName,
|
|
500
500
|
onSubmit: handleSubmit,
|
|
501
501
|
validation,
|
|
502
|
-
children: [config
|
|
503
|
-
config: config
|
|
502
|
+
children: [config.search ? /* @__PURE__ */ jsx(SearchInput_default, {
|
|
503
|
+
config: config.search,
|
|
504
504
|
classNames: {
|
|
505
505
|
searchInput: classNames.searchInput,
|
|
506
506
|
searchInputWrapper: classNames.searchInputWrapper,
|
|
@@ -510,7 +510,7 @@ const Filter = ({ children = void 0, className = void 0, config: config$2, formN
|
|
|
510
510
|
searchWrapper: classNames.searchWrapper
|
|
511
511
|
}
|
|
512
512
|
}) : null, /* @__PURE__ */ jsxs(FiltersContextProvider, {
|
|
513
|
-
config: config
|
|
513
|
+
config: config.filters,
|
|
514
514
|
children: [
|
|
515
515
|
/* @__PURE__ */ jsx(ActiveFilters_default, { className: classNames.activeFilterLabel }),
|
|
516
516
|
/* @__PURE__ */ jsx(AddFilterMenu_default, { classNames: {
|
|
@@ -549,12 +549,12 @@ var Filter_default$1 = Filter;
|
|
|
549
549
|
* @returns FilterFactory that creates FilterInstance<Config, Value>
|
|
550
550
|
*/
|
|
551
551
|
const createFilter = (definition) => {
|
|
552
|
-
return ({ name, icon, config
|
|
552
|
+
return ({ name, icon, config }) => {
|
|
553
553
|
return {
|
|
554
554
|
components: definition.components,
|
|
555
555
|
config: {
|
|
556
556
|
...definition.defaults.config,
|
|
557
|
-
...config
|
|
557
|
+
...config ?? {}
|
|
558
558
|
},
|
|
559
559
|
defaultValue: definition.defaults.value,
|
|
560
560
|
icon,
|
|
@@ -668,10 +668,10 @@ var Display_default = Display;
|
|
|
668
668
|
* Uses a `Checkboxes` to select multiple options.
|
|
669
669
|
* Resolves function labels with 'form' mode.
|
|
670
670
|
*/
|
|
671
|
-
const Form$1 = ({ fieldName, config
|
|
671
|
+
const Form$1 = ({ fieldName, config }) => {
|
|
672
672
|
return /* @__PURE__ */ jsx(Checkboxes, {
|
|
673
673
|
name: fieldName,
|
|
674
|
-
options: config
|
|
674
|
+
options: config.options.map((option) => {
|
|
675
675
|
return {
|
|
676
676
|
...option,
|
|
677
677
|
label: typeof option.label === "function" ? option.label("form") : option.label
|
|
@@ -748,4 +748,4 @@ var Filter_default = Filter_default$1;
|
|
|
748
748
|
|
|
749
749
|
//#endregion
|
|
750
750
|
export { filterVariants as i, filters as n, createFilter_default as r, Filter_default as t };
|
|
751
|
-
//# sourceMappingURL=Filter-
|
|
751
|
+
//# sourceMappingURL=Filter-BSrl7xRD.js.map
|