@umodeapporg/ui 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"FiltersForm.js","sources":["../../../../src/components/Search/filters/FiltersForm.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport NoDataFound from '@/components/UI/NoDataFound';\n\nimport FilterFieldControl from './FilterFieldControl';\nimport { IFilterGroup, TFilterField, TFilterValues } from './filterTypes';\nimport { getVisibleFilterFields } from './filterValues';\n\nconst UNGROUPED = '__ungrouped';\n\nexport interface IFiltersFormProps {\n  fields: Array<TFilterField>;\n  groups?: Array<IFilterGroup>;\n  values: TFilterValues;\n  onValueChange: (key: string, value: unknown) => void;\n  disabled?: boolean;\n  loading?: boolean;\n  emptyMessage?: string;\n  className?: string;\n}\n\ninterface IRenderableGroup {\n  group: IFilterGroup | null;\n  fields: Array<TFilterField>;\n}\n\n/**\n * Renders a schema. Knows nothing about drawers, so the same form powers the\n * side panel, an inline bar and a popover.\n */\nconst FiltersForm: React.FC<IFiltersFormProps> = ({\n  fields,\n  groups,\n  values,\n  onValueChange,\n  disabled,\n  loading,\n  emptyMessage,\n  className,\n}) => {\n  const { t } = useTranslation('ui');\n\n  const visibleFields = useMemo(() => getVisibleFilterFields(fields ?? [], values ?? {}), [fields, values]);\n\n  const renderableGroups = useMemo<Array<IRenderableGroup>>(() => {\n    const declared = groups ?? [];\n    if (declared.length === 0) return [{ group: null, fields: visibleFields }];\n\n    const byGroup = new Map<string, Array<TFilterField>>();\n    visibleFields.forEach((field) => {\n      const groupId = field.group ?? UNGROUPED;\n      byGroup.set(groupId, [...(byGroup.get(groupId) ?? []), field]);\n    });\n\n    const result: Array<IRenderableGroup> = [];\n    const ungrouped = byGroup.get(UNGROUPED) ?? [];\n    if (ungrouped.length > 0) result.push({ group: null, fields: ungrouped });\n\n    declared.forEach((group) => {\n      const groupFields = byGroup.get(group.id) ?? [];\n      if (groupFields.length > 0) result.push({ group, fields: groupFields });\n    });\n\n    return result;\n  }, [groups, visibleFields]);\n\n  const [collapsed, setCollapsed] = useState<Record<string, boolean>>(() => {\n    const initial: Record<string, boolean> = {};\n    (groups ?? []).forEach((group) => {\n      if (group.collapsible && group.defaultOpen === false) initial[group.id] = true;\n    });\n\n    return initial;\n  });\n\n  if (visibleFields.length === 0 && !loading) {\n    return <NoDataFound size=\"sm\" variant=\"empty\" message={emptyMessage ?? t('filters.noFields')} />;\n  }\n\n  const renderField = (field: TFilterField) => {\n    const control = (\n      <FilterFieldControl\n        field={field}\n        value={values?.[field.key]}\n        values={values ?? {}}\n        onChange={(next) => onValueChange(field.key, next)}\n        disabled={disabled}\n        loading={loading}\n      />\n    );\n\n    if (!field.disabled || !field.disabledReason) return <div key={field.key}>{control}</div>;\n\n    return (\n      <ControlledTooltip key={field.key} className=\"z-[9999]\" content={field.disabledReason}>\n        <div>{control}</div>\n      </ControlledTooltip>\n    );\n  };\n\n  return (\n    <div className={classNames('flex flex-col gap-y-4', className)}>\n      {renderableGroups.map(({ group, fields: groupFields }) => {\n        if (!group) {\n          return (\n            <div key={UNGROUPED} className=\"flex flex-col gap-y-4\">\n              {groupFields.map(renderField)}\n            </div>\n          );\n        }\n\n        const isCollapsed = Boolean(collapsed[group.id]);\n\n        return (\n          <section\n            key={group.id}\n            className=\"flex flex-col gap-y-3 border-t border-border-subtle pt-4 first:border-t-0 first:pt-0\"\n          >\n            <ControlledButton\n              defaultHtmlButton\n              disabled={!group.collapsible}\n              onClick={() => group.collapsible && setCollapsed((prev) => ({ ...prev, [group.id]: !prev[group.id] }))}\n              className=\"flex w-full items-center justify-between gap-x-2 text-left\"\n            >\n              <span className=\"flex items-center gap-x-2\">\n                {group.icon && <MaterialSymbol icon={group.icon} size={16} className=\"text-brand-emphasis\" />}\n                <span className=\"flex flex-col\">\n                  <span className=\"text-xs font-semibold uppercase tracking-wide text-foreground-subtle\">\n                    {group.title}\n                  </span>\n                  {group.description && <span className=\"text-xs text-foreground-faint\">{group.description}</span>}\n                </span>\n              </span>\n              {group.collapsible && (\n                <MaterialSymbol\n                  icon={isCollapsed ? 'expand_more' : 'expand_less'}\n                  size={18}\n                  className=\"text-foreground-faint\"\n                />\n              )}\n            </ControlledButton>\n\n            {!isCollapsed && <div className=\"flex flex-col gap-y-4\">{groupFields.map(renderField)}</div>}\n          </section>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default FiltersForm;\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,32 @@
+import { TFiltersSize, TFiltersVariant } from './filtersLayout';
+import { IFiltersSchema, TFilterValues } from './filterTypes';
+import * as React from 'react';
+export interface IFiltersPanelProps {
+    schema: IFiltersSchema;
+    values?: TFilterValues;
+    onChange?: (values: TFilterValues) => void;
+    initialValues?: TFilterValues;
+    urlKey?: string;
+    variant?: TFiltersVariant;
+    size?: TFiltersSize;
+    /** Controlled open state. Omit to let the panel own its trigger and state. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Hides the built-in trigger, for hosts that render their own. */
+    hideTrigger?: boolean;
+    triggerLabel?: string;
+    /** Match the page actions standing next to the trigger. */
+    triggerSize?: 'sm' | 'md';
+    loading?: boolean;
+    disabled?: boolean;
+    onFirstOpen?: () => void;
+    emptyMessage?: string;
+    className?: string;
+}
+/**
+ * The filter surface. `variant` picks the shell (side drawer, anchored popover
+ * or inline block); the schema, state and field rendering are identical in all
+ * three, so a screen never reimplements filtering to get a different shape.
+ */
+declare const FiltersPanel: React.FC<IFiltersPanelProps>;
+export default FiltersPanel;

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

@@ -0,0 +1,264 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useId, useMemo, useState, useRef, useCallback, useEffect } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../Form/ControlledButton.js";
+import ControlledDialog from "../../Form/ControlledDialog.js";
+import ControlledDrawer from "../../Form/ControlledDrawer.js";
+import { ControlledPopoverRoot, ControlledPopoverHandler, ControlledPopoverContent } from "../../UI/ControlledPopover.js";
+import ControlledTooltip from "../../UI/ControlledTooltip.js";
+import { MaterialSymbol } from "../../UI/MaterialSymbol/index.js";
+import FilterChipsRow from "./FilterChipsRow.js";
+import FiltersButton from "./FiltersButton.js";
+import FiltersForm from "./FiltersForm.js";
+import { FILTERS_POPOVER_WIDTH_REM, getFiltersPanelWidth } from "./filtersLayout.js";
+import { formatFilterValue } from "./filterValues.js";
+import { useFilters } from "./useFilters.js";
+const FiltersPanel = ({
+  schema,
+  values,
+  onChange,
+  initialValues,
+  urlKey,
+  variant = "drawer",
+  size = "md",
+  open: controlledOpen,
+  onOpenChange,
+  hideTrigger,
+  triggerLabel,
+  triggerSize,
+  loading,
+  disabled,
+  onFirstOpen,
+  emptyMessage,
+  className
+}) => {
+  const { t } = useTranslation("ui");
+  const titleId = useId();
+  const fields = useMemo(() => schema?.fields ?? [], [schema]);
+  const filters = useFilters({ fields, value: values, onChange, initialValues, urlKey });
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : internalOpen;
+  const [isDiscardOpen, setIsDiscardOpen] = useState(false);
+  const triggerRef = useRef(null);
+  const bodyRef = useRef(null);
+  const hasOpenedOnceRef = useRef(false);
+  const prevOpenRef = useRef(open);
+  const setOpen = useCallback(
+    (next) => {
+      if (!isControlled) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const filtersRef = useRef(filters);
+  filtersRef.current = filters;
+  useEffect(() => {
+    if (open === prevOpenRef.current) return;
+    prevOpenRef.current = open;
+    if (open && !hasOpenedOnceRef.current) {
+      hasOpenedOnceRef.current = true;
+      onFirstOpen?.();
+    }
+    if (open) {
+      filtersRef.current.resetDraft();
+      window.requestAnimationFrame(() => {
+        bodyRef.current?.querySelector("input, button, [tabindex]")?.focus();
+      });
+    } else {
+      triggerRef.current?.focus();
+    }
+  }, [open, onFirstOpen]);
+  const closeRequest = useCallback(() => {
+    if (filters.isDirty) {
+      setIsDiscardOpen(true);
+      return;
+    }
+    setOpen(false);
+  }, [filters.isDirty, setOpen]);
+  const discardAndClose = useCallback(() => {
+    filters.resetDraft();
+    setIsDiscardOpen(false);
+    setOpen(false);
+  }, [filters, setOpen]);
+  const handleApply = useCallback(() => {
+    filters.apply();
+    setOpen(false);
+  }, [filters, setOpen]);
+  const handleClear = useCallback(() => {
+    filters.clear();
+  }, [filters]);
+  const handleKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      closeRequest();
+      return;
+    }
+    if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+      event.preventDefault();
+      handleApply();
+    }
+  };
+  const form = /* @__PURE__ */ jsx(
+    FiltersForm,
+    {
+      fields,
+      groups: schema?.groups,
+      values: filters.draft,
+      onValueChange: filters.setDraftValue,
+      disabled,
+      loading,
+      emptyMessage
+    }
+  );
+  if (variant === "chips") {
+    return /* @__PURE__ */ jsx(
+      FilterChipsRow,
+      {
+        fields,
+        values: filters.applied,
+        disabled,
+        className,
+        onValueChange: (key, next) => {
+          filters.setDraftValue(key, next);
+          window.requestAnimationFrame(() => filters.apply());
+        },
+        onClearAll: filters.clear
+      }
+    );
+  }
+  if (variant === "inline") {
+    return /* @__PURE__ */ jsxs("div", { className: classNames("flex flex-col gap-y-4", className), children: [
+      form,
+      filters.isDirty && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
+        /* @__PURE__ */ jsx(ControlledButton, { variant: "text", tone: "neutral", size: "sm", onClick: filters.resetDraft, children: t("actions.cancel") }),
+        /* @__PURE__ */ jsx(ControlledButton, { size: "sm", onClick: () => filters.apply(), children: t("actions.apply") })
+      ] })
+    ] });
+  }
+  const activeSummary = filters.activeFields.map((field) => ({
+    key: field.key,
+    label: field.title,
+    value: formatFilterValue(field, filters.applied?.[field.key])
+  }));
+  const trigger = hideTrigger ? null : /* @__PURE__ */ jsx(
+    FiltersButton,
+    {
+      ref: triggerRef,
+      label: triggerLabel,
+      size: triggerSize,
+      activeCount: filters.activeCount,
+      activeFilters: activeSummary,
+      loading,
+      disabled,
+      onClick: () => setOpen(!open)
+    }
+  );
+  const header = /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-start justify-between gap-x-3 border-b border-border p-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-x-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex size-9 shrink-0 items-center justify-center rounded-xl bg-brand-soft text-brand-emphasis", children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "filter_alt", size: 20 }) }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("h2", { id: titleId, className: "truncate text-base font-semibold text-foreground", children: schema?.title ?? t("actions.filter") }),
+        schema?.subtitle && /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground-subtle", children: schema.subtitle })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(ControlledTooltip, { className: "z-[9999]", content: t("actions.close"), children: /* @__PURE__ */ jsx(
+      ControlledButton,
+      {
+        defaultHtmlButton: true,
+        onClick: closeRequest,
+        className: "rounded-full p-1 text-foreground-subtle transition-colors hover:bg-muted-hover hover:text-foreground-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-border",
+        children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "close", size: 20 })
+      }
+    ) })
+  ] });
+  const footer = /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-between gap-x-3 border-t border-border p-4", children: [
+    /* @__PURE__ */ jsxs(
+      ControlledButton,
+      {
+        variant: "text",
+        tone: "neutral",
+        disabled: filters.activeCount === 0,
+        className: "flex items-center gap-x-1",
+        onClick: handleClear,
+        children: [
+          /* @__PURE__ */ jsx(MaterialSymbol, { icon: "filter_list_off", size: 18 }),
+          t("actions.clear")
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(ControlledButton, { disabled: !filters.isDirty, onClick: handleApply, children: t("actions.apply") })
+  ] });
+  const discardDialog = /* @__PURE__ */ jsx(
+    ControlledDialog,
+    {
+      size: "sm",
+      open: isDiscardOpen,
+      title: t("filtersDrawer.discardChangesTitle"),
+      subtitle: t("filtersDrawer.discardChangesMessage"),
+      cancelLabel: t("filtersDrawer.keepEditing"),
+      confirmLabel: t("filtersDrawer.discard"),
+      onCancel: () => setIsDiscardOpen(false),
+      onConfirm: discardAndClose,
+      children: null
+    }
+  );
+  if (variant === "popover") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(ControlledPopoverRoot, { open, handler: setOpen, placement: "bottom-end", children: [
+        /* @__PURE__ */ jsx(ControlledPopoverHandler, { children: trigger ?? /* @__PURE__ */ jsx("span", {}) }),
+        /* @__PURE__ */ jsxs(
+          ControlledPopoverContent,
+          {
+            className: classNames("z-[9998] flex max-h-[70vh] flex-col overflow-hidden rounded-xl p-0", className),
+            style: { width: `${FILTERS_POPOVER_WIDTH_REM}rem` },
+            role: "dialog",
+            "aria-labelledby": titleId,
+            onKeyDown: handleKeyDown,
+            children: [
+              header,
+              /* @__PURE__ */ jsx("div", { ref: bodyRef, className: "min-h-0 flex-1 overflow-y-auto px-4 py-3", children: form }),
+              footer
+            ]
+          }
+        )
+      ] }),
+      discardDialog
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    trigger,
+    /* @__PURE__ */ jsx(
+      ControlledDrawer,
+      {
+        open,
+        onClose: closeRequest,
+        placement: "right",
+        size: getFiltersPanelWidth(size),
+        lazy: true,
+        className,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex h-full flex-col",
+            role: "dialog",
+            "aria-modal": true,
+            "aria-labelledby": titleId,
+            onKeyDown: handleKeyDown,
+            children: [
+              header,
+              /* @__PURE__ */ jsx("div", { ref: bodyRef, className: "min-h-0 flex-1 overflow-y-auto px-4 py-4", children: form }),
+              footer
+            ]
+          }
+        )
+      }
+    ),
+    discardDialog
+  ] });
+};
+export {
+  FiltersPanel as default
+};
+//# sourceMappingURL=FiltersPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FiltersPanel.js","sources":["../../../../src/components/Search/filters/FiltersPanel.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledDialog from '@/components/Form/ControlledDialog';\nimport ControlledDrawer from '@/components/Form/ControlledDrawer';\nimport {\n  ControlledPopoverContent,\n  ControlledPopoverHandler,\n  ControlledPopoverRoot,\n} from '@/components/UI/ControlledPopover';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\n\nimport FilterChipsRow from './FilterChipsRow';\nimport FiltersButton from './FiltersButton';\nimport FiltersForm from './FiltersForm';\nimport { FILTERS_POPOVER_WIDTH_REM, getFiltersPanelWidth, TFiltersSize, TFiltersVariant } from './filtersLayout';\nimport { IFiltersSchema, TFilterValues } from './filterTypes';\nimport { formatFilterValue } from './filterValues';\nimport { useFilters } from './useFilters';\n\nexport interface IFiltersPanelProps {\n  schema: IFiltersSchema;\n  values?: TFilterValues;\n  onChange?: (values: TFilterValues) => void;\n  initialValues?: TFilterValues;\n  urlKey?: string;\n\n  variant?: TFiltersVariant;\n  size?: TFiltersSize;\n\n  /** Controlled open state. Omit to let the panel own its trigger and state. */\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Hides the built-in trigger, for hosts that render their own. */\n  hideTrigger?: boolean;\n  triggerLabel?: string;\n  /** Match the page actions standing next to the trigger. */\n  triggerSize?: 'sm' | 'md';\n\n  loading?: boolean;\n  disabled?: boolean;\n  onFirstOpen?: () => void;\n  emptyMessage?: string;\n  className?: string;\n}\n\n/**\n * The filter surface. `variant` picks the shell (side drawer, anchored popover\n * or inline block); the schema, state and field rendering are identical in all\n * three, so a screen never reimplements filtering to get a different shape.\n */\nconst FiltersPanel: React.FC<IFiltersPanelProps> = ({\n  schema,\n  values,\n  onChange,\n  initialValues,\n  urlKey,\n  variant = 'drawer',\n  size = 'md',\n  open: controlledOpen,\n  onOpenChange,\n  hideTrigger,\n  triggerLabel,\n  triggerSize,\n  loading,\n  disabled,\n  onFirstOpen,\n  emptyMessage,\n  className,\n}) => {\n  const { t } = useTranslation('ui');\n  const titleId = useId();\n\n  const fields = useMemo(() => schema?.fields ?? [], [schema]);\n  const filters = useFilters({ fields, value: values, onChange, initialValues, urlKey });\n\n  const [internalOpen, setInternalOpen] = useState(false);\n  const isControlled = controlledOpen !== undefined;\n  const open = isControlled ? controlledOpen : internalOpen;\n\n  const [isDiscardOpen, setIsDiscardOpen] = useState(false);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const bodyRef = useRef<HTMLDivElement>(null);\n  const hasOpenedOnceRef = useRef(false);\n  const prevOpenRef = useRef(open);\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (!isControlled) setInternalOpen(next);\n      onOpenChange?.(next);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  const filtersRef = useRef(filters);\n  filtersRef.current = filters;\n\n  useEffect(() => {\n    if (open === prevOpenRef.current) return;\n    prevOpenRef.current = open;\n    if (open && !hasOpenedOnceRef.current) {\n      hasOpenedOnceRef.current = true;\n      onFirstOpen?.();\n    }\n    if (open) {\n      // Reopening always shows what is actually applied, never a stale draft.\n      filtersRef.current.resetDraft();\n      window.requestAnimationFrame(() => {\n        bodyRef.current?.querySelector<HTMLElement>('input, button, [tabindex]')?.focus();\n      });\n    } else {\n      triggerRef.current?.focus();\n    }\n  }, [open, onFirstOpen]);\n\n  const closeRequest = useCallback(() => {\n    if (filters.isDirty) {\n      setIsDiscardOpen(true);\n      return;\n    }\n    setOpen(false);\n  }, [filters.isDirty, setOpen]);\n\n  const discardAndClose = useCallback(() => {\n    filters.resetDraft();\n    setIsDiscardOpen(false);\n    setOpen(false);\n  }, [filters, setOpen]);\n\n  const handleApply = useCallback(() => {\n    filters.apply();\n    setOpen(false);\n  }, [filters, setOpen]);\n\n  /** Clearing does not close the panel: the user usually clears to start over. */\n  const handleClear = useCallback(() => {\n    filters.clear();\n  }, [filters]);\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      event.stopPropagation();\n      closeRequest();\n      return;\n    }\n    if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {\n      event.preventDefault();\n      handleApply();\n    }\n  };\n\n  const form = (\n    <FiltersForm\n      fields={fields}\n      groups={schema?.groups}\n      values={filters.draft}\n      onValueChange={filters.setDraftValue}\n      disabled={disabled}\n      loading={loading}\n      emptyMessage={emptyMessage}\n    />\n  );\n\n  if (variant === 'chips') {\n    // A chip row applies on pick, so the draft is committed immediately.\n    return (\n      <FilterChipsRow\n        fields={fields}\n        values={filters.applied}\n        disabled={disabled}\n        className={className}\n        onValueChange={(key, next) => {\n          filters.setDraftValue(key, next);\n          window.requestAnimationFrame(() => filters.apply());\n        }}\n        onClearAll={filters.clear}\n      />\n    );\n  }\n\n  if (variant === 'inline') {\n    return (\n      <div className={classNames('flex flex-col gap-y-4', className)}>\n        {form}\n        {filters.isDirty && (\n          <div className=\"flex items-center justify-end gap-x-2\">\n            <ControlledButton variant=\"text\" tone=\"neutral\" size=\"sm\" onClick={filters.resetDraft}>\n              {t('actions.cancel')}\n            </ControlledButton>\n            <ControlledButton size=\"sm\" onClick={() => filters.apply()}>\n              {t('actions.apply')}\n            </ControlledButton>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  const activeSummary = filters.activeFields.map((field) => ({\n    key: field.key,\n    label: field.title,\n    value: formatFilterValue(field, filters.applied?.[field.key]),\n  }));\n\n  const trigger = hideTrigger ? null : (\n    <FiltersButton\n      ref={triggerRef}\n      label={triggerLabel}\n      size={triggerSize}\n      activeCount={filters.activeCount}\n      activeFilters={activeSummary}\n      loading={loading}\n      disabled={disabled}\n      onClick={() => setOpen(!open)}\n    />\n  );\n\n  const header = (\n    <div className=\"flex shrink-0 items-start justify-between gap-x-3 border-b border-border p-4\">\n      <div className=\"flex items-start gap-x-3\">\n        <div className=\"flex size-9 shrink-0 items-center justify-center rounded-xl bg-brand-soft text-brand-emphasis\">\n          <MaterialSymbol icon=\"filter_alt\" size={20} />\n        </div>\n        <div className=\"min-w-0\">\n          <h2 id={titleId} className=\"truncate text-base font-semibold text-foreground\">\n            {schema?.title ?? t('actions.filter')}\n          </h2>\n          {schema?.subtitle && <p className=\"text-xs text-foreground-subtle\">{schema.subtitle}</p>}\n        </div>\n      </div>\n      <ControlledTooltip className=\"z-[9999]\" content={t('actions.close')}>\n        <ControlledButton\n          defaultHtmlButton\n          onClick={closeRequest}\n          className=\"rounded-full p-1 text-foreground-subtle transition-colors hover:bg-muted-hover hover:text-foreground-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-border\"\n        >\n          <MaterialSymbol icon=\"close\" size={20} />\n        </ControlledButton>\n      </ControlledTooltip>\n    </div>\n  );\n\n  const footer = (\n    <div className=\"flex shrink-0 items-center justify-between gap-x-3 border-t border-border p-4\">\n      <ControlledButton\n        variant=\"text\"\n        tone=\"neutral\"\n        disabled={filters.activeCount === 0}\n        className=\"flex items-center gap-x-1\"\n        onClick={handleClear}\n      >\n        <MaterialSymbol icon=\"filter_list_off\" size={18} />\n        {t('actions.clear')}\n      </ControlledButton>\n\n      <ControlledButton disabled={!filters.isDirty} onClick={handleApply}>\n        {t('actions.apply')}\n      </ControlledButton>\n    </div>\n  );\n\n  const discardDialog = (\n    <ControlledDialog\n      size=\"sm\"\n      open={isDiscardOpen}\n      title={t('filtersDrawer.discardChangesTitle')}\n      subtitle={t('filtersDrawer.discardChangesMessage')}\n      cancelLabel={t('filtersDrawer.keepEditing')}\n      confirmLabel={t('filtersDrawer.discard')}\n      onCancel={() => setIsDiscardOpen(false)}\n      onConfirm={discardAndClose}\n    >\n      {null}\n    </ControlledDialog>\n  );\n\n  if (variant === 'popover') {\n    return (\n      <>\n        <ControlledPopoverRoot open={open} handler={setOpen} placement=\"bottom-end\">\n          <ControlledPopoverHandler>{trigger ?? <span />}</ControlledPopoverHandler>\n          <ControlledPopoverContent\n            className={classNames('z-[9998] flex max-h-[70vh] flex-col overflow-hidden rounded-xl p-0', className)}\n            style={{ width: `${FILTERS_POPOVER_WIDTH_REM}rem` }}\n            role=\"dialog\"\n            aria-labelledby={titleId}\n            onKeyDown={handleKeyDown}\n          >\n            {header}\n            <div ref={bodyRef} className=\"min-h-0 flex-1 overflow-y-auto px-4 py-3\">\n              {form}\n            </div>\n            {footer}\n          </ControlledPopoverContent>\n        </ControlledPopoverRoot>\n        {discardDialog}\n      </>\n    );\n  }\n\n  return (\n    <>\n      {trigger}\n\n      <ControlledDrawer\n        open={open}\n        onClose={closeRequest}\n        placement=\"right\"\n        size={getFiltersPanelWidth(size)}\n        lazy\n        className={className}\n      >\n        <div\n          className=\"flex h-full flex-col\"\n          role=\"dialog\"\n          aria-modal\n          aria-labelledby={titleId}\n          onKeyDown={handleKeyDown}\n        >\n          {header}\n          <div ref={bodyRef} className=\"min-h-0 flex-1 overflow-y-auto px-4 py-4\">\n            {form}\n          </div>\n          {footer}\n        </div>\n      </ControlledDrawer>\n\n      {discardDialog}\n    </>\n  );\n};\n\nexport default FiltersPanel;\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,20 @@
+import { ReactElement, ReactNode } from 'react';
+import { IFiltersButtonSummaryItem } from './filterTypes';
+interface IFiltersSummaryTooltipProps {
+    items: Array<IFiltersButtonSummaryItem>;
+    /** Mostrado quando nada está aplicado. Sem ele, o gatilho fica sem tooltip nesse estado. */
+    fallback?: ReactNode;
+    className?: string;
+    children: ReactElement;
+}
+/**
+ * O que está filtrado, campo a campo, no hover do gatilho.
+ *
+ * Existe como componente próprio porque o mapa e o board têm gatilhos visuais diferentes (um botão
+ * de página e um item da barra do canvas) e o resumo precisa ser o MESMO nos dois: um segundo
+ * desenho do mesmo conteúdo é onde os dois começam a divergir.
+ *
+ * Um item sem `value` é descartado: tooltip com conteúdo vazio ainda abre, como uma caixa preta.
+ */
+declare const FiltersSummaryTooltip: React.FC<IFiltersSummaryTooltipProps>;
+export default FiltersSummaryTooltip;

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

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { twMerge } from "tailwind-merge";
+import ControlledTooltip from "../../UI/ControlledTooltip.js";
+const SUMMARY_TOOLTIP_CLASS = "z-[9999] max-w-[26rem] overflow-hidden rounded-xl border border-brand-border bg-surface p-0 shadow-xl";
+const FiltersSummaryTooltip = ({ items, fallback, className, children }) => {
+  const summary = items.filter((item) => item.value);
+  if (summary.length === 0) {
+    if (!fallback) return children;
+    return /* @__PURE__ */ jsx(ControlledTooltip, { content: fallback, className, children });
+  }
+  return /* @__PURE__ */ jsx(
+    ControlledTooltip,
+    {
+      className: twMerge(SUMMARY_TOOLTIP_CLASS, className),
+      content: /* @__PURE__ */ jsx("div", { className: "flex w-max min-w-[17rem] max-w-[calc(100vw-2rem)] flex-col gap-3 p-4", children: summary.map((item) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 border-l-2 border-brand-border pl-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-brand-emphasis", children: item.label }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs leading-relaxed text-foreground-muted", children: item.value })
+      ] }, item.key)) }),
+      children
+    }
+  );
+};
+export {
+  FiltersSummaryTooltip as default
+};
+//# sourceMappingURL=FiltersSummaryTooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FiltersSummaryTooltip.js","sources":["../../../../src/components/Search/filters/FiltersSummaryTooltip.tsx"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\n\nimport { IFiltersButtonSummaryItem } from './filterTypes';\n\nconst SUMMARY_TOOLTIP_CLASS =\n  'z-[9999] max-w-[26rem] overflow-hidden rounded-xl border border-brand-border bg-surface p-0 shadow-xl';\n\ninterface IFiltersSummaryTooltipProps {\n  items: Array<IFiltersButtonSummaryItem>;\n  /** Mostrado quando nada está aplicado. Sem ele, o gatilho fica sem tooltip nesse estado. */\n  fallback?: ReactNode;\n  className?: string;\n  children: ReactElement;\n}\n\n/**\n * O que está filtrado, campo a campo, no hover do gatilho.\n *\n * Existe como componente próprio porque o mapa e o board têm gatilhos visuais diferentes (um botão\n * de página e um item da barra do canvas) e o resumo precisa ser o MESMO nos dois: um segundo\n * desenho do mesmo conteúdo é onde os dois começam a divergir.\n *\n * Um item sem `value` é descartado: tooltip com conteúdo vazio ainda abre, como uma caixa preta.\n */\nconst FiltersSummaryTooltip: React.FC<IFiltersSummaryTooltipProps> = ({ items, fallback, className, children }) => {\n  const summary = items.filter((item) => item.value);\n\n  if (summary.length === 0) {\n    if (!fallback) return children;\n    return (\n      <ControlledTooltip content={fallback} className={className}>\n        {children}\n      </ControlledTooltip>\n    );\n  }\n\n  return (\n    <ControlledTooltip\n      className={twMerge(SUMMARY_TOOLTIP_CLASS, className)}\n      content={\n        <div className=\"flex w-max min-w-[17rem] max-w-[calc(100vw-2rem)] flex-col gap-3 p-4\">\n          {summary.map((item) => (\n            <div key={item.key} className=\"flex flex-col gap-1 border-l-2 border-brand-border pl-3\">\n              <span className=\"text-xs font-bold text-brand-emphasis\">{item.label}</span>\n              <span className=\"text-xs leading-relaxed text-foreground-muted\">{item.value}</span>\n            </div>\n          ))}\n        </div>\n      }\n    >\n      {children}\n    </ControlledTooltip>\n  );\n};\n\nexport default FiltersSummaryTooltip;\n"],"names":[],"mappings":";;;AAOA,MAAM,wBACJ;AAmBF,MAAM,wBAA+D,CAAC,EAAE,OAAO,UAAU,WAAW,eAAe;AACjH,QAAM,UAAU,MAAM,OAAO,CAAC,SAAS,KAAK,KAAK;AAEjD,MAAI,QAAQ,WAAW,GAAG;AACxB,QAAI,CAAC,SAAU,QAAO;AACtB,WACE,oBAAC,mBAAA,EAAkB,SAAS,UAAU,WACnC,UACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,QAAQ,uBAAuB,SAAS;AAAA,MACnD,SACE,oBAAC,OAAA,EAAI,WAAU,wEACZ,UAAA,QAAQ,IAAI,CAAC,SACZ,qBAAC,OAAA,EAAmB,WAAU,2DAC5B,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,yCAAyC,UAAA,KAAK,OAAM;AAAA,QACpE,oBAAC,QAAA,EAAK,WAAU,iDAAiD,eAAK,MAAA,CAAM;AAAA,MAAA,EAAA,GAFpE,KAAK,GAGf,CACD,GACH;AAAA,MAGD;AAAA,IAAA;AAAA,EAAA;AAGP;"}

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

@@ -0,0 +1,162 @@
+import { ReactNode } from 'react';
+import { SymbolCodepoints } from '../../UI/MaterialSymbol';
+import { IFilterOption } from '../../../interfaces/IFilterOption';
+export type TFilterFieldKind = 'text' | 'number' | 'select' | 'multiselect' | 'async-select' | 'date' | 'date-range' | 'range' | 'boolean' | 'checkbox-group' | 'radio' | 'tags' | 'custom';
+export type TFilterValues = Record<string, unknown>;
+/** Uma linha do resumo "o que está filtrado", mostrado no hover do gatilho. */
+export interface IFiltersButtonSummaryItem {
+    key: string;
+    label: string;
+    value: string;
+}
+export interface IFilterDateRangeValue {
+    from?: string;
+    to?: string;
+}
+export interface IFilterRangeValue {
+    min?: number;
+    max?: number;
+}
+export interface IFilterAsyncPage {
+    options: Array<IFilterOption>;
+    hasMore: boolean;
+}
+export interface IFilterFieldBase {
+    key: string;
+    title: string;
+    description?: string;
+    /** Id of the `IFilterGroup` this field belongs to. Ungrouped fields render first. */
+    group?: string;
+    disabled?: boolean;
+    /** Reason shown on hover when the field is disabled. Always from `t()`. */
+    disabledReason?: string;
+    /** Hides the field when it returns false. Receives the whole draft. */
+    visibleWhen?: (values: TFilterValues) => boolean;
+    /** Keys whose change resets this field's value and reloads its options. */
+    dependsOn?: Array<string>;
+    /** Overrides the chip text shown in `ActiveFiltersBar`. */
+    formatChip?: (value: unknown) => string;
+}
+export interface IFilterTextField extends IFilterFieldBase {
+    kind: 'text';
+    placeholder?: string;
+}
+export interface IFilterNumberField extends IFilterFieldBase {
+    kind: 'number';
+    placeholder?: string;
+    min?: number;
+    max?: number;
+}
+export interface IFilterSelectField extends IFilterFieldBase {
+    kind: 'select';
+    options: Array<IFilterOption>;
+    searchable?: boolean;
+    clearable?: boolean;
+}
+export interface IFilterMultiSelectField extends IFilterFieldBase {
+    kind: 'multiselect';
+    options: Array<IFilterOption>;
+    searchable?: boolean;
+    clearable?: boolean;
+}
+export interface IFilterAsyncSelectField extends IFilterFieldBase {
+    kind: 'async-select';
+    multiple?: boolean;
+    searchable?: boolean;
+    clearable?: boolean;
+    /**
+     * Loads one page of options. Called on first render of the field, on search
+     * and on scroll. The registry owns paging state and the option cache, so the
+     * consumer only answers "give me page N for this term".
+     */
+    loadOptions: (params: {
+        search?: string;
+        page: number;
+        values: TFilterValues;
+    }) => Promise<IFilterAsyncPage>;
+    /** Options already known (applied values that must render a label before loading). */
+    initialOptions?: Array<IFilterOption>;
+}
+export interface IFilterDateField extends IFilterFieldBase {
+    kind: 'date';
+    minDate?: string;
+    maxDate?: string;
+}
+export interface IFilterDateRangeField extends IFilterFieldBase {
+    kind: 'date-range';
+    minDate?: string;
+    maxDate?: string;
+}
+export interface IFilterRangeField extends IFilterFieldBase {
+    kind: 'range';
+    min?: number;
+    max?: number;
+    unit?: string;
+}
+export interface IFilterBooleanField extends IFilterFieldBase {
+    kind: 'boolean';
+    /** Switch label. Defaults to `title`. */
+    label?: string;
+}
+export interface IFilterCheckboxGroupField extends IFilterFieldBase {
+    kind: 'checkbox-group';
+    options: Array<IFilterOption>;
+    /** Renders a search box above the options when the list is long. */
+    searchable?: boolean;
+}
+export interface IFilterRadioField extends IFilterFieldBase {
+    kind: 'radio';
+    options: Array<IFilterOption>;
+}
+export interface IFilterTagsField extends IFilterFieldBase {
+    kind: 'tags';
+    options: Array<IFilterOption>;
+    /** Allows values that are not in `options`. */
+    allowFreeText?: boolean;
+}
+export interface IFilterCustomField extends IFilterFieldBase {
+    kind: 'custom';
+    render: (params: {
+        value: unknown;
+        onChange: (value: unknown) => void;
+        disabled?: boolean;
+    }) => ReactNode;
+    /** Tells the counter whether this value is set. Defaults to a truthiness check. */
+    isActive?: (value: unknown) => boolean;
+}
+export type TFilterField = IFilterTextField | IFilterNumberField | IFilterSelectField | IFilterMultiSelectField | IFilterAsyncSelectField | IFilterDateField | IFilterDateRangeField | IFilterRangeField | IFilterBooleanField | IFilterCheckboxGroupField | IFilterRadioField | IFilterTagsField | IFilterCustomField;
+export interface IFilterGroup {
+    id: string;
+    title: string;
+    description?: string;
+    icon?: SymbolCodepoints;
+    collapsible?: boolean;
+    defaultOpen?: boolean;
+}
+export type TFilterCombinator = 'AND' | 'OR';
+export interface IFiltersSchema {
+    title?: string;
+    subtitle?: string;
+    groups?: Array<IFilterGroup>;
+    fields: Array<TFilterField>;
+    /**
+     * How multiple active fields combine. `'user'` renders a toggle so the user
+     * picks. Only meaningful for consumers that honour it when building params.
+     */
+    combinator?: TFilterCombinator | 'user';
+}
+export interface IFilterPreset {
+    id: string;
+    name: string;
+    values: TFilterValues;
+    isPrivate?: boolean;
+}
+export interface IFilterPresetsConfig {
+    presets: Array<IFilterPreset>;
+    selectedId?: string;
+    loading?: boolean;
+    saving?: boolean;
+    onSelect: (preset: IFilterPreset | null) => void;
+    onSave?: (name: string, isPrivate: boolean, values: TFilterValues) => Promise<boolean>;
+    onRemove?: (preset: IFilterPreset) => Promise<void>;
+}

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

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=filterTypes.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filterTypes.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,22 @@
+import { TFilterField, TFilterFieldKind, TFilterValues } from './filterTypes';
+/** Value a field holds when it is not filtering anything. */
+export declare const emptyValueForKind: (kind: TFilterFieldKind) => unknown;
+/**
+ * The single definition of "this field is filtering something". Booleans,
+ * numbers and interval objects count, which the previous string/array-only
+ * check silently dropped.
+ */
+export declare const isFilterValueEmpty: (field: TFilterField, value: unknown) => boolean;
+export declare const getActiveFilterFields: (fields: Array<TFilterField>, values: TFilterValues) => Array<TFilterField>;
+export declare const countActiveFilters: (fields: Array<TFilterField>, values: TFilterValues) => number;
+export declare const buildEmptyFilterValues: (fields: Array<TFilterField>) => TFilterValues;
+/** Human-readable value used by the active-filter chips and the trigger tooltip. */
+export declare const formatFilterValue: (field: TFilterField, value: unknown) => string;
+/**
+ * Fields the user can actually see right now. `visibleWhen` reads the whole
+ * draft, so a field hidden by a dependency never contributes a stale value.
+ */
+export declare const getVisibleFilterFields: (fields: Array<TFilterField>, values: TFilterValues) => Array<TFilterField>;
+/** Clears every field that declared `dependsOn` pointing at the changed key. */
+export declare const clearDependentValues: (fields: Array<TFilterField>, changedKey: string, values: TFilterValues) => TFilterValues;
+export declare const areFilterValuesEqual: (a: TFilterValues, b: TFilterValues) => boolean;