@umodeapporg/ui 0.1.0

package/dist/components/Search/filters/FilterFieldControl.js

@@ -0,0 +1,387 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useMemo, useRef, useCallback, useEffect } from "react";
+import { parse } from "date-fns";
+import { useTranslation } from "react-i18next";
+import DatePicker from "../../DateTime/DatePicker.js";
+import DateRangePicker from "../../DateTime/DateRangePicker.js";
+import ControlledCheckbox from "../../Form/ControlledCheckbox.js";
+import ControlledInput from "../../Form/ControlledInput.js";
+import { ControlledSelect } from "../../Form/ControlledSelect.js";
+import ControlledSwitch from "../../Form/ControlledSwitch.js";
+import OutlinedChip from "../../UI/Chips/OutlinedChip.js";
+import NoDataFound from "../../UI/NoDataFound/index.js";
+import SkeletonLoading from "../../UI/SkeletonLoading.js";
+import { uiLogger } from "../../../helpers/uiLogger.js";
+const asString = (value) => typeof value === "string" ? value : "";
+const asStringArray = (value) => Array.isArray(value) ? value.map(String) : [];
+const TextControl = ({ field, value, onChange, disabled }) => /* @__PURE__ */ jsx(
+  ControlledInput,
+  {
+    label: field.title,
+    placeholder: field.placeholder,
+    value: asString(value),
+    disabled,
+    onChange: (event) => onChange(event.target.value)
+  }
+);
+const NumberControl = ({ field, value, onChange, disabled }) => /* @__PURE__ */ jsx(
+  ControlledInput,
+  {
+    type: "number",
+    label: field.title,
+    placeholder: field.placeholder,
+    min: field.min,
+    max: field.max,
+    value: value === void 0 || value === null ? "" : String(value),
+    disabled,
+    onChange: (event) => onChange(event.target.value)
+  }
+);
+const SelectControl = ({ field, value, onChange, disabled }) => /* @__PURE__ */ jsx(
+  ControlledSelect,
+  {
+    label: field.title,
+    options: field.options ?? [],
+    selectedValue: asString(value),
+    searchable: field.searchable,
+    clearable: field.clearable ?? true,
+    disabled,
+    onChangeHook: (selected) => onChange(Array.isArray(selected) ? selected[0] ?? "" : selected)
+  }
+);
+const MultiSelectControl = ({
+  field,
+  value,
+  onChange,
+  disabled
+}) => /* @__PURE__ */ jsx(
+  ControlledSelect,
+  {
+    multiple: true,
+    inFieldChips: true,
+    label: field.title,
+    options: field.options ?? [],
+    selectedValue: asStringArray(value),
+    searchable: field.searchable,
+    clearable: field.clearable ?? true,
+    disabled,
+    onChangeHook: (selected) => onChange(Array.isArray(selected) ? selected : [selected])
+  }
+);
+const AsyncSelectControl = ({
+  field,
+  value,
+  values,
+  onChange,
+  disabled
+}) => {
+  const { t } = useTranslation("ui");
+  const [options, setOptions] = useState(field.initialOptions ?? []);
+  const [hasMore, setHasMore] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const pageRef = useRef(1);
+  const requestSeqRef = useRef(0);
+  const valuesRef = useRef(values);
+  valuesRef.current = values;
+  const loadPage = useCallback(
+    async (page, search, append) => {
+      const requestSeq = ++requestSeqRef.current;
+      setLoading(true);
+      setFailed(false);
+      try {
+        const result = await field.loadOptions({ page, search, values: valuesRef.current });
+        if (requestSeq !== requestSeqRef.current) return [];
+        const nextOptions = result?.options ?? [];
+        pageRef.current = page;
+        setHasMore(Boolean(result?.hasMore));
+        setOptions((previous) => append ? [...previous, ...nextOptions] : nextOptions);
+        return nextOptions;
+      } catch (error) {
+        if (requestSeq === requestSeqRef.current) {
+          uiLogger.error(`[FilterFieldControl] Failed to load options for "${field.key}"`, error);
+          setFailed(true);
+        }
+        return [];
+      } finally {
+        if (requestSeq === requestSeqRef.current) setLoading(false);
+      }
+    },
+    [field]
+  );
+  const dependencyKey = (field.dependsOn ?? []).map((key) => JSON.stringify(values?.[key])).join("|");
+  useEffect(() => {
+    let cancelled = false;
+    const run = async () => {
+      const loaded = await loadPage(1, void 0, false);
+      if (cancelled || loaded.length === 0) return;
+    };
+    void run();
+    return () => {
+      cancelled = true;
+    };
+  }, [dependencyKey, loadPage]);
+  const fetchMoreOptions = useCallback(
+    async ({ search, reset }) => {
+      const term = search.trim() === "" ? void 0 : search;
+      await loadPage(reset ? 1 : pageRef.current + 1, term, !reset);
+    },
+    [loadPage]
+  );
+  const selectedValue = field.multiple ? asStringArray(value) : asString(value);
+  if (failed) {
+    return /* @__PURE__ */ jsx(
+      NoDataFound,
+      {
+        size: "inline",
+        variant: "error",
+        message: t("filters.optionsError", { field: field.title }),
+        action: { label: t("actions.tryAgain"), onClick: () => void loadPage(1, void 0, false), icon: "refresh" }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    ControlledSelect,
+    {
+      label: field.title,
+      options,
+      selectedValue,
+      multiple: field.multiple,
+      inFieldChips: field.multiple,
+      searchable: field.searchable ?? true,
+      clearable: field.clearable ?? true,
+      disabled,
+      loading,
+      infiniteScroll: true,
+      hasMoreOptions: hasMore,
+      fetchMoreOptions,
+      onChangeHook: (selected) => onChange(
+        field.multiple ? Array.isArray(selected) ? selected : [selected] : Array.isArray(selected) ? selected[0] ?? "" : selected
+      )
+    }
+  );
+};
+const parseIsoDate = (value) => {
+  if (!value) return void 0;
+  const parsed = parse(value, "yyyy-MM-dd", /* @__PURE__ */ new Date());
+  return Number.isNaN(parsed.getTime()) ? void 0 : parsed;
+};
+const DateControl = ({ field, value, onChange, disabled }) => /* @__PURE__ */ jsx(
+  DatePicker,
+  {
+    label: field.title,
+    minDate: field.minDate,
+    maxDate: field.maxDate,
+    disabled,
+    startValue: parseIsoDate(asString(value)),
+    onUpdate: (next) => onChange(next ?? "")
+  }
+);
+const DateRangeControl = ({
+  field,
+  value,
+  onChange,
+  disabled
+}) => {
+  const range = value ?? {};
+  const from = parseIsoDate(range.from);
+  const to = parseIsoDate(range.to);
+  return /* @__PURE__ */ jsx(
+    DateRangePicker,
+    {
+      label: field.title,
+      minDate: field.minDate,
+      maxDate: field.maxDate,
+      disabled,
+      startValue: from ? { from, to } : void 0,
+      onUpdate: (next) => onChange({ from: next.from, to: next.to })
+    }
+  );
+};
+const RangeControl = ({ field, value, onChange, disabled }) => {
+  const { t } = useTranslation("ui");
+  const range = value ?? {};
+  const update = (bound, raw) => {
+    const parsed = raw === "" ? void 0 : Number(raw);
+    onChange({ ...range, [bound]: Number.isNaN(parsed) ? void 0 : parsed });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-1.5", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground-muted", children: field.title }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+      /* @__PURE__ */ jsx(
+        ControlledInput,
+        {
+          type: "number",
+          label: t("filters.rangeMin"),
+          min: field.min,
+          max: field.max,
+          disabled,
+          value: range.min === void 0 ? "" : String(range.min),
+          onChange: (event) => update("min", event.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-foreground-faint", children: t("filters.rangeSeparator") }),
+      /* @__PURE__ */ jsx(
+        ControlledInput,
+        {
+          type: "number",
+          label: t("filters.rangeMax"),
+          min: field.min,
+          max: field.max,
+          disabled,
+          value: range.max === void 0 ? "" : String(range.max),
+          onChange: (event) => update("max", event.target.value)
+        }
+      )
+    ] })
+  ] });
+};
+const BooleanControl = ({ field, value, onChange, disabled }) => /* @__PURE__ */ jsx(
+  ControlledSwitch,
+  {
+    checked: value === true,
+    disabled,
+    label: field.label ?? field.title,
+    onChange: (checked) => onChange(checked)
+  }
+);
+const CheckboxGroupControl = ({
+  field,
+  value,
+  onChange,
+  disabled
+}) => {
+  const { t } = useTranslation("ui");
+  const [search, setSearch] = useState("");
+  const selected = asStringArray(value);
+  const options = useMemo(() => {
+    const list = field.options ?? [];
+    if (!field.searchable || search.trim().length === 0) return list;
+    const term = search.trim().toLowerCase();
+    return list.filter((option) => option.label.toLowerCase().includes(term));
+  }, [field.options, field.searchable, search]);
+  const toggle = (optionValue) => {
+    onChange(
+      selected.includes(optionValue) ? selected.filter((entry) => entry !== optionValue) : [...selected, optionValue]
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground-muted", children: field.title }),
+    field.searchable && /* @__PURE__ */ jsx(
+      ControlledInput,
+      {
+        label: t("filters.searchOptions"),
+        value: search,
+        disabled,
+        onChange: (event) => setSearch(event.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex max-h-56 flex-col gap-y-1 overflow-y-auto", children: options.length === 0 ? /* @__PURE__ */ jsx(NoDataFound, { size: "inline", variant: "search", message: t("filters.noOptions") }) : options.map((option) => /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-x-2", children: [
+      /* @__PURE__ */ jsx(
+        ControlledCheckbox,
+        {
+          checked: selected.includes(option.value),
+          disabled,
+          label: option.label,
+          onChange: () => toggle(option.value)
+        }
+      ),
+      option.secondaryLabel && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs tabular-nums text-foreground-faint", children: option.secondaryLabel }),
+      option.swatch && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "size-3 shrink-0 rounded-full border border-surface shadow-sm ring-1 ring-border",
+          style: { backgroundColor: option.swatch }
+        }
+      )
+    ] }, option.value)) })
+  ] });
+};
+const RadioControl = ({ field, value, onChange, disabled }) => {
+  const selected = asString(value);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground-muted", children: field.title }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: (field.options ?? []).map((option) => /* @__PURE__ */ jsx(
+      OutlinedChip,
+      {
+        label: option.label,
+        preserveLabelCase: true,
+        tone: selected === option.value ? "purple" : "neutral",
+        variant: selected === option.value ? "solid" : "outlined",
+        size: "sm",
+        disabled,
+        onClick: () => onChange(selected === option.value ? "" : option.value)
+      },
+      option.value
+    )) })
+  ] });
+};
+const TagsControl = ({ field, value, onChange, disabled }) => {
+  const selected = asStringArray(value);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground-muted", children: field.title }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: (field.options ?? []).map((option) => {
+      const isSelected = selected.includes(option.value);
+      return /* @__PURE__ */ jsx(
+        OutlinedChip,
+        {
+          label: option.label,
+          preserveLabelCase: true,
+          tone: isSelected ? "purple" : "neutral",
+          variant: isSelected ? "solid" : "outlined",
+          size: "sm",
+          disabled,
+          onClick: () => onChange(isSelected ? selected.filter((entry) => entry !== option.value) : [...selected, option.value])
+        },
+        option.value
+      );
+    }) })
+  ] });
+};
+const CustomControl = ({ field, value, onChange, disabled }) => /* @__PURE__ */ jsx(Fragment, { children: field.render({ value, onChange, disabled }) });
+const FILTER_CONTROL_REGISTRY = {
+  text: TextControl,
+  number: NumberControl,
+  select: SelectControl,
+  multiselect: MultiSelectControl,
+  "async-select": AsyncSelectControl,
+  date: DateControl,
+  "date-range": DateRangeControl,
+  range: RangeControl,
+  boolean: BooleanControl,
+  "checkbox-group": CheckboxGroupControl,
+  radio: RadioControl,
+  tags: TagsControl,
+  custom: CustomControl
+};
+const FilterFieldControl = ({
+  field,
+  value,
+  values,
+  onChange,
+  disabled,
+  loading
+}) => {
+  if (loading) return /* @__PURE__ */ jsx(SkeletonLoading, { className: "h-10 w-full rounded-lg" });
+  const Control = FILTER_CONTROL_REGISTRY[field.kind];
+  if (!Control) return null;
+  const control = /* @__PURE__ */ jsx(
+    Control,
+    {
+      field,
+      value,
+      values,
+      onChange,
+      disabled: disabled || field.disabled
+    }
+  );
+  if (!field.description) return control;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-1", children: [
+    control,
+    /* @__PURE__ */ jsx("span", { className: "px-1 text-xs text-foreground-faint", children: field.description })
+  ] });
+};
+export {
+  FilterFieldControl as default
+};
+//# sourceMappingURL=FilterFieldControl.js.map

package/dist/components/Search/filters/FilterFieldControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterFieldControl.js","sources":["../../../../src/components/Search/filters/FilterFieldControl.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport * as React from 'react';\nimport { parse } from 'date-fns';\nimport { useTranslation } from 'react-i18next';\n\nimport DatePicker from '@/components/DateTime/DatePicker';\nimport DateRangePicker from '@/components/DateTime/DateRangePicker';\nimport ControlledCheckbox from '@/components/Form/ControlledCheckbox';\nimport ControlledInput from '@/components/Form/ControlledInput';\nimport { ControlledSelect, IControlledSelectFetchParams } from '@/components/Form/ControlledSelect';\nimport ControlledSwitch from '@/components/Form/ControlledSwitch';\nimport OutlinedChip from '@/components/UI/Chips/OutlinedChip';\nimport NoDataFound from '@/components/UI/NoDataFound';\nimport SkeletonLoading from '@/components/UI/SkeletonLoading';\nimport { uiLogger } from '@/helpers/uiLogger';\nimport { IFilterOption } from '@/interfaces/IFilterOption';\n\nimport {\n  IFilterAsyncSelectField,\n  IFilterBooleanField,\n  IFilterCheckboxGroupField,\n  IFilterCustomField,\n  IFilterDateField,\n  IFilterDateRangeField,\n  IFilterDateRangeValue,\n  IFilterMultiSelectField,\n  IFilterNumberField,\n  IFilterRadioField,\n  IFilterRangeField,\n  IFilterRangeValue,\n  IFilterSelectField,\n  IFilterTagsField,\n  IFilterTextField,\n  TFilterField,\n  TFilterValues,\n} from './filterTypes';\n\nexport interface IFilterControlProps<TField extends TFilterField> {\n  field: TField;\n  value: unknown;\n  values: TFilterValues;\n  onChange: (value: unknown) => void;\n  disabled?: boolean;\n}\n\nconst asString = (value: unknown): string => (typeof value === 'string' ? value : '');\nconst asStringArray = (value: unknown): Array<string> => (Array.isArray(value) ? value.map(String) : []);\n\n// ───── text / number ────────────────────────────────────────────────\n\nconst TextControl: React.FC<IFilterControlProps<IFilterTextField>> = ({ field, value, onChange, disabled }) => (\n  <ControlledInput\n    label={field.title}\n    placeholder={field.placeholder}\n    value={asString(value)}\n    disabled={disabled}\n    onChange={(event) => onChange(event.target.value)}\n  />\n);\n\nconst NumberControl: React.FC<IFilterControlProps<IFilterNumberField>> = ({ field, value, onChange, disabled }) => (\n  <ControlledInput\n    type=\"number\"\n    label={field.title}\n    placeholder={field.placeholder}\n    min={field.min}\n    max={field.max}\n    value={value === undefined || value === null ? '' : String(value)}\n    disabled={disabled}\n    onChange={(event) => onChange(event.target.value)}\n  />\n);\n\n// ───── select family ────────────────────────────────────────────────\n\nconst SelectControl: React.FC<IFilterControlProps<IFilterSelectField>> = ({ field, value, onChange, disabled }) => (\n  <ControlledSelect\n    label={field.title}\n    options={field.options ?? []}\n    selectedValue={asString(value)}\n    searchable={field.searchable}\n    clearable={field.clearable ?? true}\n    disabled={disabled}\n    onChangeHook={(selected) => onChange(Array.isArray(selected) ? (selected[0] ?? '') : selected)}\n  />\n);\n\nconst MultiSelectControl: React.FC<IFilterControlProps<IFilterMultiSelectField>> = ({\n  field,\n  value,\n  onChange,\n  disabled,\n}) => (\n  <ControlledSelect\n    multiple\n    inFieldChips\n    label={field.title}\n    options={field.options ?? []}\n    selectedValue={asStringArray(value)}\n    searchable={field.searchable}\n    clearable={field.clearable ?? true}\n    disabled={disabled}\n    onChangeHook={(selected) => onChange(Array.isArray(selected) ? selected : [selected])}\n  />\n);\n\n/**\n * Owns paging, search and the option cache so consumers only answer\n * \"give me page N\". Previously every screen reimplemented this with its own\n * page counter, metadata state and loaded-once ref.\n */\nconst AsyncSelectControl: React.FC<IFilterControlProps<IFilterAsyncSelectField>> = ({\n  field,\n  value,\n  values,\n  onChange,\n  disabled,\n}) => {\n  const { t } = useTranslation('ui');\n  const [options, setOptions] = useState<Array<IFilterOption>>(field.initialOptions ?? []);\n  const [hasMore, setHasMore] = useState(false);\n  const [loading, setLoading] = useState(false);\n  const [failed, setFailed] = useState(false);\n  const pageRef = useRef(1);\n  // Discards responses that resolve after a newer request started (a search reset racing a\n  // page append), so stale pages never overwrite fresher data.\n  const requestSeqRef = useRef(0);\n  const valuesRef = useRef(values);\n  valuesRef.current = values;\n\n  const loadPage = useCallback(\n    async (page: number, search: string | undefined, append: boolean): Promise<Array<IFilterOption>> => {\n      const requestSeq = ++requestSeqRef.current;\n      setLoading(true);\n      setFailed(false);\n      try {\n        const result = await field.loadOptions({ page, search, values: valuesRef.current });\n        if (requestSeq !== requestSeqRef.current) return [];\n\n        const nextOptions = result?.options ?? [];\n        pageRef.current = page;\n        setHasMore(Boolean(result?.hasMore));\n        setOptions((previous) => (append ? [...previous, ...nextOptions] : nextOptions));\n\n        return nextOptions;\n      } catch (error) {\n        if (requestSeq === requestSeqRef.current) {\n          uiLogger.error(`[FilterFieldControl] Failed to load options for \"${field.key}\"`, error);\n          setFailed(true);\n        }\n\n        return [];\n      } finally {\n        if (requestSeq === requestSeqRef.current) setLoading(false);\n      }\n    },\n    [field],\n  );\n\n  const dependencyKey = (field.dependsOn ?? []).map((key) => JSON.stringify(values?.[key])).join('|');\n\n  useEffect(() => {\n    let cancelled = false;\n    const run = async () => {\n      const loaded = await loadPage(1, undefined, false);\n      if (cancelled || loaded.length === 0) return;\n    };\n    void run();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [dependencyKey, loadPage]);\n\n  const fetchMoreOptions = useCallback(\n    async ({ search, reset }: IControlledSelectFetchParams): Promise<void> => {\n      const term = search.trim() === '' ? undefined : search;\n      await loadPage(reset ? 1 : pageRef.current + 1, term, !reset);\n    },\n    [loadPage],\n  );\n\n  const selectedValue = field.multiple ? asStringArray(value) : asString(value);\n\n  if (failed) {\n    return (\n      <NoDataFound\n        size=\"inline\"\n        variant=\"error\"\n        message={t('filters.optionsError', { field: field.title })}\n        action={{ label: t('actions.tryAgain'), onClick: () => void loadPage(1, undefined, false), icon: 'refresh' }}\n      />\n    );\n  }\n\n  return (\n    <ControlledSelect\n      label={field.title}\n      options={options}\n      selectedValue={selectedValue}\n      multiple={field.multiple}\n      inFieldChips={field.multiple}\n      searchable={field.searchable ?? true}\n      clearable={field.clearable ?? true}\n      disabled={disabled}\n      loading={loading}\n      infiniteScroll\n      hasMoreOptions={hasMore}\n      fetchMoreOptions={fetchMoreOptions}\n      onChangeHook={(selected) =>\n        onChange(\n          field.multiple\n            ? Array.isArray(selected)\n              ? selected\n              : [selected]\n            : Array.isArray(selected)\n              ? (selected[0] ?? '')\n              : selected,\n        )\n      }\n    />\n  );\n};\n\n// ───── dates ────────────────────────────────────────────────────────\n\nconst parseIsoDate = (value: string | undefined): Date | undefined => {\n  if (!value) return undefined;\n  const parsed = parse(value, 'yyyy-MM-dd', new Date());\n\n  return Number.isNaN(parsed.getTime()) ? undefined : parsed;\n};\n\nconst DateControl: React.FC<IFilterControlProps<IFilterDateField>> = ({ field, value, onChange, disabled }) => (\n  <DatePicker\n    label={field.title}\n    minDate={field.minDate}\n    maxDate={field.maxDate}\n    disabled={disabled}\n    startValue={parseIsoDate(asString(value))}\n    onUpdate={(next) => onChange(next ?? '')}\n  />\n);\n\nconst DateRangeControl: React.FC<IFilterControlProps<IFilterDateRangeField>> = ({\n  field,\n  value,\n  onChange,\n  disabled,\n}) => {\n  const range = (value ?? {}) as IFilterDateRangeValue;\n  const from = parseIsoDate(range.from);\n  const to = parseIsoDate(range.to);\n\n  return (\n    <DateRangePicker\n      label={field.title}\n      minDate={field.minDate}\n      maxDate={field.maxDate}\n      disabled={disabled}\n      startValue={from ? { from, to } : undefined}\n      onUpdate={(next) => onChange({ from: next.from, to: next.to })}\n    />\n  );\n};\n\n// ───── range ────────────────────────────────────────────────────────\n\nconst RangeControl: React.FC<IFilterControlProps<IFilterRangeField>> = ({ field, value, onChange, disabled }) => {\n  const { t } = useTranslation('ui');\n  const range = (value ?? {}) as IFilterRangeValue;\n\n  const update = (bound: 'min' | 'max', raw: string) => {\n    const parsed = raw === '' ? undefined : Number(raw);\n    onChange({ ...range, [bound]: Number.isNaN(parsed as number) ? undefined : parsed });\n  };\n\n  return (\n    <div className=\"flex flex-col gap-y-1.5\">\n      <span className=\"text-xs font-medium text-foreground-muted\">{field.title}</span>\n      <div className=\"flex items-center gap-x-2\">\n        <ControlledInput\n          type=\"number\"\n          label={t('filters.rangeMin')}\n          min={field.min}\n          max={field.max}\n          disabled={disabled}\n          value={range.min === undefined ? '' : String(range.min)}\n          onChange={(event) => update('min', event.target.value)}\n        />\n        <span className=\"shrink-0 text-xs text-foreground-faint\">{t('filters.rangeSeparator')}</span>\n        <ControlledInput\n          type=\"number\"\n          label={t('filters.rangeMax')}\n          min={field.min}\n          max={field.max}\n          disabled={disabled}\n          value={range.max === undefined ? '' : String(range.max)}\n          onChange={(event) => update('max', event.target.value)}\n        />\n      </div>\n    </div>\n  );\n};\n\n// ───── boolean / checkbox / radio / tags ────────────────────────────\n\nconst BooleanControl: React.FC<IFilterControlProps<IFilterBooleanField>> = ({ field, value, onChange, disabled }) => (\n  <ControlledSwitch\n    checked={value === true}\n    disabled={disabled}\n    label={field.label ?? field.title}\n    onChange={(checked) => onChange(checked)}\n  />\n);\n\nconst CheckboxGroupControl: React.FC<IFilterControlProps<IFilterCheckboxGroupField>> = ({\n  field,\n  value,\n  onChange,\n  disabled,\n}) => {\n  const { t } = useTranslation('ui');\n  const [search, setSearch] = useState('');\n  const selected = asStringArray(value);\n  const options = useMemo(() => {\n    const list = field.options ?? [];\n    if (!field.searchable || search.trim().length === 0) return list;\n    const term = search.trim().toLowerCase();\n\n    return list.filter((option) => option.label.toLowerCase().includes(term));\n  }, [field.options, field.searchable, search]);\n\n  const toggle = (optionValue: string) => {\n    onChange(\n      selected.includes(optionValue) ? selected.filter((entry) => entry !== optionValue) : [...selected, optionValue],\n    );\n  };\n\n  return (\n    <div className=\"flex flex-col gap-y-2\">\n      <span className=\"text-xs font-medium text-foreground-muted\">{field.title}</span>\n      {field.searchable && (\n        <ControlledInput\n          label={t('filters.searchOptions')}\n          value={search}\n          disabled={disabled}\n          onChange={(event) => setSearch(event.target.value)}\n        />\n      )}\n      <div className=\"flex max-h-56 flex-col gap-y-1 overflow-y-auto\">\n        {options.length === 0 ? (\n          <NoDataFound size=\"inline\" variant=\"search\" message={t('filters.noOptions')} />\n        ) : (\n          options.map((option) => (\n            <div key={option.value} className=\"flex min-w-0 items-center gap-x-2\">\n              <ControlledCheckbox\n                checked={selected.includes(option.value)}\n                disabled={disabled}\n                label={option.label}\n                onChange={() => toggle(option.value)}\n              />\n              {option.secondaryLabel && (\n                <span className=\"shrink-0 text-xs tabular-nums text-foreground-faint\">{option.secondaryLabel}</span>\n              )}\n              {option.swatch && (\n                <span\n                  className=\"size-3 shrink-0 rounded-full border border-surface shadow-sm ring-1 ring-border\"\n                  style={{ backgroundColor: option.swatch }}\n                />\n              )}\n            </div>\n          ))\n        )}\n      </div>\n    </div>\n  );\n};\n\nconst RadioControl: React.FC<IFilterControlProps<IFilterRadioField>> = ({ field, value, onChange, disabled }) => {\n  const selected = asString(value);\n\n  return (\n    <div className=\"flex flex-col gap-y-2\">\n      <span className=\"text-xs font-medium text-foreground-muted\">{field.title}</span>\n      <div className=\"flex flex-wrap gap-2\">\n        {(field.options ?? []).map((option) => (\n          <OutlinedChip\n            key={option.value}\n            label={option.label}\n            preserveLabelCase\n            tone={selected === option.value ? 'purple' : 'neutral'}\n            variant={selected === option.value ? 'solid' : 'outlined'}\n            size=\"sm\"\n            disabled={disabled}\n            onClick={() => onChange(selected === option.value ? '' : option.value)}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n\nconst TagsControl: React.FC<IFilterControlProps<IFilterTagsField>> = ({ field, value, onChange, disabled }) => {\n  const selected = asStringArray(value);\n\n  return (\n    <div className=\"flex flex-col gap-y-2\">\n      <span className=\"text-xs font-medium text-foreground-muted\">{field.title}</span>\n      <div className=\"flex flex-wrap gap-2\">\n        {(field.options ?? []).map((option) => {\n          const isSelected = selected.includes(option.value);\n\n          return (\n            <OutlinedChip\n              key={option.value}\n              label={option.label}\n              preserveLabelCase\n              tone={isSelected ? 'purple' : 'neutral'}\n              variant={isSelected ? 'solid' : 'outlined'}\n              size=\"sm\"\n              disabled={disabled}\n              onClick={() =>\n                onChange(isSelected ? selected.filter((entry) => entry !== option.value) : [...selected, option.value])\n              }\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nconst CustomControl: React.FC<IFilterControlProps<IFilterCustomField>> = ({ field, value, onChange, disabled }) => (\n  <>{field.render({ value, onChange, disabled })}</>\n);\n\n// ───── registry ─────────────────────────────────────────────────────\n\ntype TFilterControl = React.FC<IFilterControlProps<never>>;\n\nconst FILTER_CONTROL_REGISTRY: Record<TFilterField['kind'], TFilterControl> = {\n  text: TextControl as TFilterControl,\n  number: NumberControl as TFilterControl,\n  select: SelectControl as TFilterControl,\n  multiselect: MultiSelectControl as TFilterControl,\n  'async-select': AsyncSelectControl as TFilterControl,\n  date: DateControl as TFilterControl,\n  'date-range': DateRangeControl as TFilterControl,\n  range: RangeControl as TFilterControl,\n  boolean: BooleanControl as TFilterControl,\n  'checkbox-group': CheckboxGroupControl as TFilterControl,\n  radio: RadioControl as TFilterControl,\n  tags: TagsControl as TFilterControl,\n  custom: CustomControl as TFilterControl,\n};\n\ninterface IFilterFieldControlProps {\n  field: TFilterField;\n  value: unknown;\n  values: TFilterValues;\n  onChange: (value: unknown) => void;\n  disabled?: boolean;\n  loading?: boolean;\n}\n\nconst FilterFieldControl: React.FC<IFilterFieldControlProps> = ({\n  field,\n  value,\n  values,\n  onChange,\n  disabled,\n  loading,\n}) => {\n  if (loading) return <SkeletonLoading className=\"h-10 w-full rounded-lg\" />;\n\n  const Control = FILTER_CONTROL_REGISTRY[field.kind];\n  if (!Control) return null;\n\n  const control = (\n    <Control\n      field={field as never}\n      value={value}\n      values={values}\n      onChange={onChange}\n      disabled={disabled || field.disabled}\n    />\n  );\n\n  if (!field.description) return control;\n\n  return (\n    <div className=\"flex flex-col gap-y-1\">\n      {control}\n      <span className=\"px-1 text-xs text-foreground-faint\">{field.description}</span>\n    </div>\n  );\n};\n\nexport default FilterFieldControl;\n"],"names":[],"mappings":"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"}

package/dist/components/Search/filters/FiltersButton.d.ts

@@ -0,0 +1,24 @@
+import { IFiltersButtonSummaryItem } from './filterTypes';
+export type { IFiltersButtonSummaryItem };
+export interface IFiltersButtonProps {
+    onClick?: () => void;
+    activeCount?: number;
+    /** Applied filters listed on hover. Complements the permanent count badge. */
+    activeFilters?: Array<IFiltersButtonSummaryItem>;
+    loading?: boolean;
+    disabled?: boolean;
+    label?: string;
+    /**
+     * Match the buttons standing next to it: `sm` next to a search field or in a
+     * dense toolbar, `md` when the neighbours are full-size page actions.
+     */
+    size?: 'sm' | 'md';
+    className?: string;
+}
+/**
+ * The one trigger for every filter surface. Geometry matches the button the app
+ * has always used; the applied state is carried by colour and the count badge,
+ * so a filter is visible without hovering, and the hover adds the detail.
+ */
+declare const FiltersButton: import('react').ForwardRefExoticComponent<IFiltersButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default FiltersButton;

package/dist/components/Search/filters/FiltersButton.js

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../Form/ControlledButton.js";
+import LoadingSpinner from "../../UI/LoadingSpinner.js";
+import { MaterialSymbol } from "../../UI/MaterialSymbol/index.js";
+import FiltersSummaryTooltip from "./FiltersSummaryTooltip.js";
+const FiltersButton = forwardRef(
+  ({ onClick, activeCount = 0, activeFilters, loading, disabled, label, size = "sm", className, ...rest }, ref) => {
+    const { t } = useTranslation("ui");
+    const hasActiveFilters = activeCount > 0;
+    const trigger = /* @__PURE__ */ jsxs("span", { className: "relative inline-block", children: [
+      /* @__PURE__ */ jsxs(
+        ControlledButton,
+        {
+          ...rest,
+          ref,
+          onClick,
+          disabled: disabled || loading,
+          variant: "outlined",
+          tone: "neutral",
+          size,
+          className: classNames(
+            "flex flex-row items-center justify-center gap-x-1 capitalize",
+            size === "sm" && "max-w-28",
+            hasActiveFilters && "border-brand-border bg-brand-soft text-brand-emphasis hover:bg-brand-soft",
+            className
+          ),
+          children: [
+            loading ? /* @__PURE__ */ jsx(LoadingSpinner, { size: 5 }) : /* @__PURE__ */ jsx(MaterialSymbol, { icon: "filter_list_alt", size: 20 }),
+            label ?? t("actions.filter")
+          ]
+        }
+      ),
+      hasActiveFilters && /* @__PURE__ */ jsx("span", { className: "absolute -right-2 -top-2 flex size-5 cursor-default items-center justify-center rounded-full bg-brand text-xs text-brand-fg", children: activeCount })
+    ] });
+    return /* @__PURE__ */ jsx(
+      FiltersSummaryTooltip,
+      {
+        items: activeFilters ?? [],
+        fallback: hasActiveFilters ? t("filters.appliedCount", { count: activeCount }) : void 0,
+        children: trigger
+      }
+    );
+  }
+);
+FiltersButton.displayName = "FiltersButton";
+export {
+  FiltersButton as default
+};
+//# sourceMappingURL=FiltersButton.js.map

package/dist/components/Search/filters/FiltersButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FiltersButton.js","sources":["../../../../src/components/Search/filters/FiltersButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport LoadingSpinner from '@/components/UI/LoadingSpinner';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\n\nimport FiltersSummaryTooltip from './FiltersSummaryTooltip';\nimport { IFiltersButtonSummaryItem } from './filterTypes';\n\nexport type { IFiltersButtonSummaryItem };\n\nexport interface IFiltersButtonProps {\n  onClick?: () => void;\n  activeCount?: number;\n  /** Applied filters listed on hover. Complements the permanent count badge. */\n  activeFilters?: Array<IFiltersButtonSummaryItem>;\n  loading?: boolean;\n  disabled?: boolean;\n  label?: string;\n  /**\n   * Match the buttons standing next to it: `sm` next to a search field or in a\n   * dense toolbar, `md` when the neighbours are full-size page actions.\n   */\n  size?: 'sm' | 'md';\n  className?: string;\n}\n\n/**\n * The one trigger for every filter surface. Geometry matches the button the app\n * has always used; the applied state is carried by colour and the count badge,\n * so a filter is visible without hovering, and the hover adds the detail.\n */\nconst FiltersButton = forwardRef<HTMLButtonElement, IFiltersButtonProps>(\n  ({ onClick, activeCount = 0, activeFilters, loading, disabled, label, size = 'sm', className, ...rest }, ref) => {\n    const { t } = useTranslation('ui');\n    const hasActiveFilters = activeCount > 0;\n\n    const trigger = (\n      <span className=\"relative inline-block\">\n        <ControlledButton\n          {...rest}\n          ref={ref}\n          onClick={onClick}\n          disabled={disabled || loading}\n          variant=\"outlined\"\n          tone=\"neutral\"\n          size={size}\n          className={classNames(\n            'flex flex-row items-center justify-center gap-x-1 capitalize',\n            size === 'sm' && 'max-w-28',\n            hasActiveFilters && 'border-brand-border bg-brand-soft text-brand-emphasis hover:bg-brand-soft',\n            className,\n          )}\n        >\n          {loading ? <LoadingSpinner size={5} /> : <MaterialSymbol icon=\"filter_list_alt\" size={20} />}\n          {label ?? t('actions.filter')}\n        </ControlledButton>\n\n        {hasActiveFilters && (\n          <span className=\"absolute -right-2 -top-2 flex size-5 cursor-default items-center justify-center rounded-full bg-brand text-xs text-brand-fg\">\n            {activeCount}\n          </span>\n        )}\n      </span>\n    );\n\n    return (\n      <FiltersSummaryTooltip\n        items={activeFilters ?? []}\n        fallback={hasActiveFilters ? t('filters.appliedCount', { count: activeCount }) : undefined}\n      >\n        {trigger}\n      </FiltersSummaryTooltip>\n    );\n  },\n);\n\nFiltersButton.displayName = 'FiltersButton';\n\nexport default FiltersButton;\n"],"names":[],"mappings":";;;;;;;;AAkCA,MAAM,gBAAgB;AAAA,EACpB,CAAC,EAAE,SAAS,cAAc,GAAG,eAAe,SAAS,UAAU,OAAO,OAAO,MAAM,WAAW,GAAG,KAAA,GAAQ,QAAQ;AAC/G,UAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,UAAM,mBAAmB,cAAc;AAEvC,UAAM,UACJ,qBAAC,QAAA,EAAK,WAAU,yBACd,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ;AAAA,UACA;AAAA,UACA,UAAU,YAAY;AAAA,UACtB,SAAQ;AAAA,UACR,MAAK;AAAA,UACL;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA,SAAS,QAAQ;AAAA,YACjB,oBAAoB;AAAA,YACpB;AAAA,UAAA;AAAA,UAGD,UAAA;AAAA,YAAA,UAAU,oBAAC,gBAAA,EAAe,MAAM,EAAA,CAAG,wBAAM,gBAAA,EAAe,MAAK,mBAAkB,MAAM,GAAA,CAAI;AAAA,YACzF,SAAS,EAAE,gBAAgB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAG7B,oBACC,oBAAC,QAAA,EAAK,WAAU,+HACb,UAAA,YAAA,CACH;AAAA,IAAA,GAEJ;AAGF,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,iBAAiB,CAAA;AAAA,QACxB,UAAU,mBAAmB,EAAE,wBAAwB,EAAE,OAAO,YAAA,CAAa,IAAI;AAAA,QAEhF,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,cAAc,cAAc;"}

package/dist/components/Search/filters/FiltersForm.d.ts

@@ -0,0 +1,18 @@
+import { IFilterGroup, TFilterField, TFilterValues } from './filterTypes';
+import * as React from 'react';
+export interface IFiltersFormProps {
+    fields: Array<TFilterField>;
+    groups?: Array<IFilterGroup>;
+    values: TFilterValues;
+    onValueChange: (key: string, value: unknown) => void;
+    disabled?: boolean;
+    loading?: boolean;
+    emptyMessage?: string;
+    className?: string;
+}
+/**
+ * Renders a schema. Knows nothing about drawers, so the same form powers the
+ * side panel, an inline bar and a popover.
+ */
+declare const FiltersForm: React.FC<IFiltersFormProps>;
+export default FiltersForm;

package/dist/components/Search/filters/FiltersForm.js

@@ -0,0 +1,112 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../Form/ControlledButton.js";
+import ControlledTooltip from "../../UI/ControlledTooltip.js";
+import { MaterialSymbol } from "../../UI/MaterialSymbol/index.js";
+import NoDataFound from "../../UI/NoDataFound/index.js";
+import FilterFieldControl from "./FilterFieldControl.js";
+import { getVisibleFilterFields } from "./filterValues.js";
+const UNGROUPED = "__ungrouped";
+const FiltersForm = ({
+  fields,
+  groups,
+  values,
+  onValueChange,
+  disabled,
+  loading,
+  emptyMessage,
+  className
+}) => {
+  const { t } = useTranslation("ui");
+  const visibleFields = useMemo(() => getVisibleFilterFields(fields ?? [], values ?? {}), [fields, values]);
+  const renderableGroups = useMemo(() => {
+    const declared = groups ?? [];
+    if (declared.length === 0) return [{ group: null, fields: visibleFields }];
+    const byGroup = /* @__PURE__ */ new Map();
+    visibleFields.forEach((field) => {
+      const groupId = field.group ?? UNGROUPED;
+      byGroup.set(groupId, [...byGroup.get(groupId) ?? [], field]);
+    });
+    const result = [];
+    const ungrouped = byGroup.get(UNGROUPED) ?? [];
+    if (ungrouped.length > 0) result.push({ group: null, fields: ungrouped });
+    declared.forEach((group) => {
+      const groupFields = byGroup.get(group.id) ?? [];
+      if (groupFields.length > 0) result.push({ group, fields: groupFields });
+    });
+    return result;
+  }, [groups, visibleFields]);
+  const [collapsed, setCollapsed] = useState(() => {
+    const initial = {};
+    (groups ?? []).forEach((group) => {
+      if (group.collapsible && group.defaultOpen === false) initial[group.id] = true;
+    });
+    return initial;
+  });
+  if (visibleFields.length === 0 && !loading) {
+    return /* @__PURE__ */ jsx(NoDataFound, { size: "sm", variant: "empty", message: emptyMessage ?? t("filters.noFields") });
+  }
+  const renderField = (field) => {
+    const control = /* @__PURE__ */ jsx(
+      FilterFieldControl,
+      {
+        field,
+        value: values?.[field.key],
+        values: values ?? {},
+        onChange: (next) => onValueChange(field.key, next),
+        disabled,
+        loading
+      }
+    );
+    if (!field.disabled || !field.disabledReason) return /* @__PURE__ */ jsx("div", { children: control }, field.key);
+    return /* @__PURE__ */ jsx(ControlledTooltip, { className: "z-[9999]", content: field.disabledReason, children: /* @__PURE__ */ jsx("div", { children: control }) }, field.key);
+  };
+  return /* @__PURE__ */ jsx("div", { className: classNames("flex flex-col gap-y-4", className), children: renderableGroups.map(({ group, fields: groupFields }) => {
+    if (!group) {
+      return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-4", children: groupFields.map(renderField) }, UNGROUPED);
+    }
+    const isCollapsed = Boolean(collapsed[group.id]);
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        className: "flex flex-col gap-y-3 border-t border-border-subtle pt-4 first:border-t-0 first:pt-0",
+        children: [
+          /* @__PURE__ */ jsxs(
+            ControlledButton,
+            {
+              defaultHtmlButton: true,
+              disabled: !group.collapsible,
+              onClick: () => group.collapsible && setCollapsed((prev) => ({ ...prev, [group.id]: !prev[group.id] })),
+              className: "flex w-full items-center justify-between gap-x-2 text-left",
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-x-2", children: [
+                  group.icon && /* @__PURE__ */ jsx(MaterialSymbol, { icon: group.icon, size: 16, className: "text-brand-emphasis" }),
+                  /* @__PURE__ */ jsxs("span", { className: "flex flex-col", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-wide text-foreground-subtle", children: group.title }),
+                    group.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground-faint", children: group.description })
+                  ] })
+                ] }),
+                group.collapsible && /* @__PURE__ */ jsx(
+                  MaterialSymbol,
+                  {
+                    icon: isCollapsed ? "expand_more" : "expand_less",
+                    size: 18,
+                    className: "text-foreground-faint"
+                  }
+                )
+              ]
+            }
+          ),
+          !isCollapsed && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-4", children: groupFields.map(renderField) })
+        ]
+      },
+      group.id
+    );
+  }) });
+};
+export {
+  FiltersForm as default
+};
+//# sourceMappingURL=FiltersForm.js.map