@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/Search/UnifiedSearchBar.js

@@ -0,0 +1,167 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledInput from "../Form/ControlledInput.js";
+import ControlledTooltip from "../UI/ControlledTooltip.js";
+import LoadingSpinner from "../UI/LoadingSpinner.js";
+import { MaterialSymbol } from "../UI/MaterialSymbol/index.js";
+import { formatFilter } from "../../helpers/stringHelpers.js";
+import { useDebounce } from "../../hooks/useDebounce.js";
+function UnifiedSearchBar(props) {
+  const { t } = useTranslation("ui");
+  const {
+    mode = "default",
+    label = t("actions.search"),
+    disabled = false,
+    autoFocus = false,
+    debounceTime = 3e3,
+    initialValue = "",
+    onClearFilter,
+    minSearchLength = 2,
+    showClearButton = true,
+    className,
+    containerClassName,
+    onSearchTermChange,
+    selectedFilters
+  } = props;
+  const [searchTerm, setSearchTerm] = useState(initialValue || "");
+  const [isLoading, setIsLoading] = useState(false);
+  const userInteracted = useRef(false);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (selectedFilters?.textSearch && selectedFilters.textSearch !== searchTerm) {
+      setSearchTerm(selectedFilters.textSearch);
+      userInteracted.current = true;
+    }
+  }, [selectedFilters?.textSearch]);
+  const executeArraySearch = useCallback(
+    (term) => {
+      if (mode !== "default") return;
+      const { searchableItems, searchKeys, setFilteredItems, useOnlyKeyword } = props;
+      setIsLoading(false);
+      if (onSearchTermChange) {
+        onSearchTermChange(term);
+      }
+      if (useOnlyKeyword) {
+        setFilteredItems([term]);
+        return;
+      }
+      if (!searchableItems) return;
+      if (!term) {
+        setFilteredItems(searchableItems || []);
+        if (onClearFilter) onClearFilter();
+        return;
+      }
+      const filteredData = searchableItems.filter(
+        (item) => searchKeys.some((key) => formatFilter(String(item[key] ?? ""), term))
+      );
+      setFilteredItems(filteredData || []);
+    },
+    [mode, props, onClearFilter]
+  );
+  const executeCallbackSearch = useCallback(
+    (term) => {
+      if (mode !== "callback") return;
+      const { filterCallback } = props;
+      setIsLoading(false);
+      if (!userInteracted.current && !initialValue) {
+        return;
+      }
+      if (term.length < minSearchLength && term.length > 0) {
+        return;
+      }
+      filterCallback(term);
+    },
+    [mode, props, initialValue, minSearchLength]
+  );
+  const executeSearch = useCallback(
+    (term) => {
+      switch (mode) {
+        case "default":
+          executeArraySearch(term);
+          break;
+        case "callback":
+          executeCallbackSearch(term);
+          break;
+      }
+    },
+    [mode, executeArraySearch, executeCallbackSearch]
+  );
+  const { debouncedCallback: debouncedFilter, cancel } = useDebounce(
+    executeSearch,
+    { delay: debounceTime }
+  );
+  const handleSearchChange = (e) => {
+    const value = e.target.value;
+    userInteracted.current = true;
+    setSearchTerm(value);
+    setIsLoading(true);
+    debouncedFilter(value);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key !== " " || mode !== "default") return;
+    e.preventDefault();
+    e.stopPropagation();
+    const input = inputRef.current;
+    const start = input?.selectionStart ?? searchTerm.length;
+    const end = input?.selectionEnd ?? searchTerm.length;
+    const value = `${searchTerm.slice(0, start)} ${searchTerm.slice(end)}`;
+    setSearchTerm(value);
+    setIsLoading(true);
+    debouncedFilter(value);
+    window.requestAnimationFrame(() => input?.setSelectionRange(start + 1, start + 1));
+  };
+  const clearFilter = () => {
+    userInteracted.current = true;
+    setSearchTerm("");
+    setIsLoading(false);
+    cancel();
+    if (onClearFilter) {
+      onClearFilter();
+    } else if (mode === "callback") {
+      props.filterCallback("");
+    } else if (mode === "default") {
+      executeArraySearch("");
+    }
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  };
+  const handleInputClick = (e) => {
+    e.stopPropagation();
+  };
+  const getContainerClassName = () => {
+    if (containerClassName) return containerClassName;
+    switch (mode) {
+      case "callback":
+        return "my-2 mb-4 flex items-center gap-x-2";
+      default:
+        return "relative flex gap-x-2";
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: getContainerClassName(), children: /* @__PURE__ */ jsx(
+    ControlledInput,
+    {
+      className: classNames("text-ellipsis pr-20", className),
+      label,
+      rightSlot: /* @__PURE__ */ jsxs(Fragment, { children: [
+        isLoading && /* @__PURE__ */ jsx(LoadingSpinner, { size: 3 }),
+        searchTerm && !isLoading && showClearButton && /* @__PURE__ */ jsx(ControlledTooltip, { content: t("unifiedSearchBar.clearFilter"), children: /* @__PURE__ */ jsx("div", { onClick: clearFilter, className: "mt-1 cursor-pointer", children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "close_small", size: 20, color: "rgb(var(--color-foreground-subtle))" }) }) }),
+        /* @__PURE__ */ jsx(MaterialSymbol, { icon: "search", size: 18, color: "rgb(var(--color-foreground-subtle))" })
+      ] }),
+      value: searchTerm,
+      onChange: handleSearchChange,
+      onKeyDown: handleKeyDown,
+      disabled,
+      autoFocus,
+      onClick: handleInputClick,
+      inputRef,
+      tabIndex: mode === "callback" ? -1 : void 0
+    }
+  ) });
+}
+export {
+  UnifiedSearchBar as default
+};
+//# sourceMappingURL=UnifiedSearchBar.js.map

package/dist/components/Search/UnifiedSearchBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnifiedSearchBar.js","sources":["../../../src/components/Search/UnifiedSearchBar.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledInput from '@/components/Form/ControlledInput';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport LoadingSpinner from '@/components/UI/LoadingSpinner';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport { formatFilter } from '@/helpers/stringHelpers';\nimport { useDebounce } from '@/hooks/useDebounce';\n\ninterface IUnifiedSearchBarSelectedFilters {\n  textSearch?: string | null;\n}\n\ninterface IBaseSearchBarProps {\n  label?: string;\n  disabled?: boolean;\n  autoFocus?: boolean;\n  className?: string;\n  debounceTime?: number;\n  initialValue?: string;\n  onClearFilter?: () => void;\n  minSearchLength?: number;\n  showClearButton?: boolean;\n  containerClassName?: string;\n  onSearchTermChange?: (searchTerm: string) => void;\n  selectedFilters?: IUnifiedSearchBarSelectedFilters;\n}\n\ninterface IArraySearchBarProps<T> extends IBaseSearchBarProps {\n  mode: 'default';\n  searchableItems: Array<T> | null;\n  searchKeys: Array<keyof T>;\n  setFilteredItems: (filteredItems: Array<T>) => void;\n  useOnlyKeyword?: boolean;\n}\n\ninterface ICallbackSearchBarProps extends IBaseSearchBarProps {\n  mode: 'callback';\n  filterCallback: (value: string) => void;\n}\n\ntype TUnifiedSearchBarProps<T> = IArraySearchBarProps<T> | ICallbackSearchBarProps;\n\nfunction UnifiedSearchBar<T>(props: TUnifiedSearchBarProps<T>) {\n  const { t } = useTranslation('ui');\n  const {\n    mode = 'default',\n    label = t('actions.search'),\n    disabled = false,\n    autoFocus = false,\n    debounceTime = 3000,\n    initialValue = '',\n    onClearFilter,\n    minSearchLength = 2,\n    showClearButton = true,\n    className,\n    containerClassName,\n    onSearchTermChange,\n    selectedFilters,\n  } = props;\n\n  const [searchTerm, setSearchTerm] = useState(initialValue || '');\n  const [isLoading, setIsLoading] = useState(false);\n  const userInteracted = useRef(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (selectedFilters?.textSearch && selectedFilters.textSearch !== searchTerm) {\n      setSearchTerm(selectedFilters.textSearch);\n      userInteracted.current = true;\n    }\n  }, [selectedFilters?.textSearch]);\n\n  const executeArraySearch = useCallback(\n    (term: string) => {\n      if (mode !== 'default') return;\n\n      const { searchableItems, searchKeys, setFilteredItems, useOnlyKeyword } = props as IArraySearchBarProps<T>;\n\n      setIsLoading(false);\n\n      if (onSearchTermChange) {\n        onSearchTermChange(term);\n      }\n\n      if (useOnlyKeyword) {\n        setFilteredItems([term as unknown as T]);\n        return;\n      }\n\n      if (!searchableItems) return;\n\n      if (!term) {\n        setFilteredItems(searchableItems || []);\n        if (onClearFilter) onClearFilter();\n        return;\n      }\n\n      const filteredData = searchableItems.filter((item) =>\n        searchKeys.some((key) => formatFilter(String(item[key] ?? ''), term)),\n      );\n\n      setFilteredItems(filteredData || []);\n    },\n    [mode, props, onClearFilter],\n  );\n\n  const executeCallbackSearch = useCallback(\n    (term: string) => {\n      if (mode !== 'callback') return;\n\n      const { filterCallback } = props as ICallbackSearchBarProps;\n\n      setIsLoading(false);\n\n      if (!userInteracted.current && !initialValue) {\n        return;\n      }\n\n      if (term.length < minSearchLength && term.length > 0) {\n        return;\n      }\n\n      filterCallback(term);\n    },\n    [mode, props, initialValue, minSearchLength],\n  );\n\n  const executeSearch = useCallback(\n    (term: string) => {\n      switch (mode) {\n        case 'default':\n          executeArraySearch(term);\n          break;\n        case 'callback':\n          executeCallbackSearch(term);\n          break;\n      }\n    },\n    [mode, executeArraySearch, executeCallbackSearch],\n  );\n\n  const { debouncedCallback: debouncedFilter, cancel } = useDebounce(\n    executeSearch as (...args: Array<unknown>) => unknown,\n    { delay: debounceTime },\n  );\n\n  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const value = e.target.value;\n    userInteracted.current = true;\n    setSearchTerm(value);\n    setIsLoading(true);\n    debouncedFilter(value);\n  };\n\n  /**\n   * Dentro do menu do `ControlledSelect` a barra de espaço é atalho de seleção do\n   * item em foco, então ela não chega ao campo. O espaço é escrito aqui à mão, na\n   * posição do cursor, e o evento é barrado dos dois lados: sem `preventDefault` o\n   * navegador escreveria um segundo espaço quando o menu não interceptasse.\n   */\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key !== ' ' || mode !== 'default') return;\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    const input = inputRef.current;\n    const start = input?.selectionStart ?? searchTerm.length;\n    const end = input?.selectionEnd ?? searchTerm.length;\n    const value = `${searchTerm.slice(0, start)} ${searchTerm.slice(end)}`;\n\n    setSearchTerm(value);\n    setIsLoading(true);\n    debouncedFilter(value);\n\n    // O cursor volta para depois do espaço só quando o valor novo já pintou.\n    window.requestAnimationFrame(() => input?.setSelectionRange(start + 1, start + 1));\n  };\n\n  const clearFilter = () => {\n    userInteracted.current = true;\n    setSearchTerm('');\n    setIsLoading(false);\n    cancel();\n\n    if (onClearFilter) {\n      onClearFilter();\n    } else if (mode === 'callback') {\n      (props as ICallbackSearchBarProps).filterCallback('');\n    } else if (mode === 'default') {\n      executeArraySearch('');\n    }\n\n    if (inputRef.current) {\n      inputRef.current.focus();\n    }\n  };\n\n  const handleInputClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n  };\n\n  const getContainerClassName = () => {\n    if (containerClassName) return containerClassName;\n\n    switch (mode) {\n      case 'callback':\n        return 'my-2 mb-4 flex items-center gap-x-2';\n      default:\n        return 'relative flex gap-x-2';\n    }\n  };\n\n  return (\n    <div className={getContainerClassName()}>\n      <ControlledInput\n        // A busca costuma viver em uma largura fixa (a toolbar da DataTable usa w-72): com\n        // `text-ellipsis` um rótulo longo termina em reticências em vez de ser cortado no meio.\n        className={classNames('text-ellipsis pr-20', className)}\n        label={label}\n        rightSlot={\n          <>\n            {isLoading && <LoadingSpinner size={3} />}\n\n            {searchTerm && !isLoading && showClearButton && (\n              <ControlledTooltip content={t('unifiedSearchBar.clearFilter')}>\n                <div onClick={clearFilter} className=\"mt-1 cursor-pointer\">\n                  <MaterialSymbol icon=\"close_small\" size={20} color=\"rgb(var(--color-foreground-subtle))\" />\n                </div>\n              </ControlledTooltip>\n            )}\n\n            <MaterialSymbol icon=\"search\" size={18} color=\"rgb(var(--color-foreground-subtle))\" />\n          </>\n        }\n        value={searchTerm}\n        onChange={handleSearchChange}\n        onKeyDown={handleKeyDown}\n        disabled={disabled}\n        autoFocus={autoFocus}\n        onClick={handleInputClick}\n        inputRef={inputRef}\n        tabIndex={mode === 'callback' ? -1 : undefined}\n      />\n    </div>\n  );\n}\n\nexport default UnifiedSearchBar;\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,15 @@
+import { TFilterField, TFilterValues } from './filterTypes';
+import * as React from 'react';
+export interface IActiveFiltersBarProps {
+    fields: Array<TFilterField>;
+    values: TFilterValues;
+    onRemove: (key: string) => void;
+    onClearAll: () => void;
+    className?: string;
+}
+/**
+ * Applied filters, always visible. Replaces the hover-only tooltip that used
+ * to be the single way to find out what was filtering the list.
+ */
+declare const ActiveFiltersBar: React.FC<IActiveFiltersBarProps>;
+export default ActiveFiltersBar;

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

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../Form/ControlledButton.js";
+import OutlinedChip from "../../UI/Chips/OutlinedChip.js";
+import { MaterialSymbol } from "../../UI/MaterialSymbol/index.js";
+import { getActiveFilterFields, formatFilterValue } from "./filterValues.js";
+const ActiveFiltersBar = ({ fields, values, onRemove, onClearAll, className }) => {
+  const { t } = useTranslation("ui");
+  const activeFields = getActiveFilterFields(fields ?? [], values ?? {});
+  if (activeFields.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: classNames("flex flex-wrap items-center gap-2", className), role: "status", "aria-live": "polite", children: [
+    activeFields.map((field) => {
+      const label = formatFilterValue(field, values?.[field.key]);
+      return /* @__PURE__ */ jsx(
+        OutlinedChip,
+        {
+          label: label ? `${field.title}: ${label}` : field.title,
+          tone: "purple",
+          variant: "soft",
+          size: "sm",
+          preserveLabelCase: true,
+          truncate: true,
+          canClose: true,
+          onClose: () => onRemove(field.key),
+          tooltip: label ? `${field.title}: ${label}` : void 0
+        },
+        field.key
+      );
+    }),
+    activeFields.length > 1 && /* @__PURE__ */ jsxs(
+      ControlledButton,
+      {
+        defaultHtmlButton: true,
+        onClick: onClearAll,
+        className: "inline-flex items-center gap-x-1 rounded-full px-2 py-1 text-xs font-medium 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: "filter_list_off", size: 14 }),
+          t("filters.clearAll")
+        ]
+      }
+    )
+  ] });
+};
+export {
+  ActiveFiltersBar as default
+};
+//# sourceMappingURL=ActiveFiltersBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveFiltersBar.js","sources":["../../../../src/components/Search/filters/ActiveFiltersBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport OutlinedChip from '@/components/UI/Chips/OutlinedChip';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\n\nimport { TFilterField, TFilterValues } from './filterTypes';\nimport { formatFilterValue, getActiveFilterFields } from './filterValues';\n\nexport interface IActiveFiltersBarProps {\n  fields: Array<TFilterField>;\n  values: TFilterValues;\n  onRemove: (key: string) => void;\n  onClearAll: () => void;\n  className?: string;\n}\n\n/**\n * Applied filters, always visible. Replaces the hover-only tooltip that used\n * to be the single way to find out what was filtering the list.\n */\nconst ActiveFiltersBar: React.FC<IActiveFiltersBarProps> = ({ fields, values, onRemove, onClearAll, className }) => {\n  const { t } = useTranslation('ui');\n  const activeFields = getActiveFilterFields(fields ?? [], values ?? {});\n\n  if (activeFields.length === 0) return null;\n\n  return (\n    <div className={classNames('flex flex-wrap items-center gap-2', className)} role=\"status\" aria-live=\"polite\">\n      {activeFields.map((field) => {\n        const label = formatFilterValue(field, values?.[field.key]);\n\n        return (\n          <OutlinedChip\n            key={field.key}\n            label={label ? `${field.title}: ${label}` : field.title}\n            tone=\"purple\"\n            variant=\"soft\"\n            size=\"sm\"\n            preserveLabelCase\n            truncate\n            canClose\n            onClose={() => onRemove(field.key)}\n            tooltip={label ? `${field.title}: ${label}` : undefined}\n          />\n        );\n      })}\n\n      {activeFields.length > 1 && (\n        <ControlledButton\n          defaultHtmlButton\n          onClick={onClearAll}\n          className=\"inline-flex items-center gap-x-1 rounded-full px-2 py-1 text-xs font-medium 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=\"filter_list_off\" size={14} />\n          {t('filters.clearAll')}\n        </ControlledButton>\n      )}\n    </div>\n  );\n};\n\nexport default ActiveFiltersBar;\n"],"names":[],"mappings":";;;;;;;AAuBA,MAAM,mBAAqD,CAAC,EAAE,QAAQ,QAAQ,UAAU,YAAY,gBAAgB;AAClH,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,eAAe,sBAAsB,UAAU,CAAA,GAAI,UAAU,CAAA,CAAE;AAErE,MAAI,aAAa,WAAW,EAAG,QAAO;AAEtC,SACE,qBAAC,OAAA,EAAI,WAAW,WAAW,qCAAqC,SAAS,GAAG,MAAK,UAAS,aAAU,UACjG,UAAA;AAAA,IAAA,aAAa,IAAI,CAAC,UAAU;AAC3B,YAAM,QAAQ,kBAAkB,OAAO,SAAS,MAAM,GAAG,CAAC;AAE1D,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,OAAO,QAAQ,GAAG,MAAM,KAAK,KAAK,KAAK,KAAK,MAAM;AAAA,UAClD,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,mBAAiB;AAAA,UACjB,UAAQ;AAAA,UACR,UAAQ;AAAA,UACR,SAAS,MAAM,SAAS,MAAM,GAAG;AAAA,UACjC,SAAS,QAAQ,GAAG,MAAM,KAAK,KAAK,KAAK,KAAK;AAAA,QAAA;AAAA,QATzC,MAAM;AAAA,MAAA;AAAA,IAYjB,CAAC;AAAA,IAEA,aAAa,SAAS,KACrB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,mBAAiB;AAAA,QACjB,SAAS;AAAA,QACT,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA,oBAAC,gBAAA,EAAe,MAAK,mBAAkB,MAAM,IAAI;AAAA,UAChD,EAAE,kBAAkB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACvB,GAEJ;AAEJ;"}

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

@@ -0,0 +1,17 @@
+import { TFilterField, TFilterValues } from './filterTypes';
+import * as React from 'react';
+export interface IFilterChipsRowProps {
+    fields: Array<TFilterField>;
+    values: TFilterValues;
+    onValueChange: (key: string, value: unknown) => void;
+    onClearAll: () => void;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Horizontal chip bar for toolbars with a handful of quick filters. Applies on
+ * pick (no draft), which is the interaction users expect from a chip row, and
+ * is driven by the same schema as the drawer.
+ */
+declare const FilterChipsRow: React.FC<IFilterChipsRowProps>;
+export default FilterChipsRow;

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

@@ -0,0 +1,113 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../Form/ControlledButton.js";
+import ControlledSwitch from "../../Form/ControlledSwitch.js";
+import { ControlledMenuRoot, ControlledMenuHandler, ControlledMenuList, ControlledMenuItem } from "../../UI/ControlledMenu.js";
+import { MaterialSymbol } from "../../UI/MaterialSymbol/index.js";
+import { countActiveFilters, isFilterValueEmpty } from "./filterValues.js";
+const FilterChipDropdown = ({
+  label,
+  options,
+  value,
+  isActive,
+  disabled,
+  onPick
+}) => {
+  const currentLabel = options.find((option) => option.value === value)?.label ?? "";
+  return /* @__PURE__ */ jsxs(ControlledMenuRoot, { placement: "bottom-start", dismiss: { itemPress: true }, children: [
+    /* @__PURE__ */ jsx(ControlledMenuHandler, { children: /* @__PURE__ */ jsxs(
+      ControlledButton,
+      {
+        defaultHtmlButton: true,
+        disabled,
+        className: classNames(
+          "flex h-8 items-center gap-1.5 rounded-lg border px-2.5 text-xs font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-brand-border disabled:text-foreground-faint",
+          isActive ? "border-brand-border bg-brand-soft text-brand-emphasis hover:bg-brand-soft" : "border-border bg-surface text-foreground-muted hover:bg-muted"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: isActive ? "text-brand-emphasis" : "text-foreground-faint", children: label }),
+          isActive && /* @__PURE__ */ jsx("span", { className: "max-w-32 truncate font-semibold", children: currentLabel }),
+          /* @__PURE__ */ jsx(
+            MaterialSymbol,
+            {
+              icon: "expand_more",
+              size: 14,
+              className: classNames("shrink-0", isActive ? "text-brand-emphasis" : "text-foreground-faint")
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(ControlledMenuList, { className: "zIndexMax flex max-h-48 min-w-44 flex-col overflow-hidden p-0", children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-1 outline-none", children: options.map((option) => /* @__PURE__ */ jsx(
+      ControlledMenuItem,
+      {
+        onClick: () => onPick(option.value),
+        className: classNames("text-sm", {
+          "bg-brand-soft font-semibold text-brand-emphasis hover:!bg-brand-soft": value === option.value
+        }),
+        children: option.label
+      },
+      option.value || "__all"
+    )) }) })
+  ] });
+};
+const FilterChipsRow = ({
+  fields,
+  values,
+  onValueChange,
+  onClearAll,
+  disabled,
+  className
+}) => {
+  const { t } = useTranslation("ui");
+  const safeFields = Array.isArray(fields) ? fields : [];
+  const activeCount = countActiveFilters(safeFields, values ?? {});
+  return /* @__PURE__ */ jsxs("div", { className: classNames("flex shrink-0 flex-wrap items-center gap-2", className), children: [
+    safeFields.map((field) => {
+      const value = values?.[field.key];
+      const isActive = !isFilterValueEmpty(field, value);
+      if (field.kind === "boolean") {
+        return /* @__PURE__ */ jsx(
+          ControlledSwitch,
+          {
+            checked: value === true,
+            disabled: disabled || field.disabled,
+            label: field.label ?? field.title,
+            onChange: (checked) => onValueChange(field.key, checked)
+          },
+          field.key
+        );
+      }
+      if (field.kind !== "select" && field.kind !== "radio") return null;
+      return /* @__PURE__ */ jsx(
+        FilterChipDropdown,
+        {
+          label: field.title,
+          options: field.options ?? [],
+          value: typeof value === "string" ? value : "",
+          isActive,
+          disabled: disabled || field.disabled,
+          onPick: (next) => onValueChange(field.key, next)
+        },
+        field.key
+      );
+    }),
+    activeCount > 0 && /* @__PURE__ */ jsxs(
+      ControlledButton,
+      {
+        defaultHtmlButton: true,
+        onClick: onClearAll,
+        className: "inline-flex h-8 items-center gap-1 rounded-lg px-2 text-xs font-medium 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: "filter_list_off", size: 14 }),
+          t("filters.clearAll")
+        ]
+      }
+    )
+  ] });
+};
+export {
+  FilterChipsRow as default
+};
+//# sourceMappingURL=FilterChipsRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterChipsRow.js","sources":["../../../../src/components/Search/filters/FilterChipsRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledSwitch from '@/components/Form/ControlledSwitch';\nimport {\n  ControlledMenuHandler,\n  ControlledMenuItem,\n  ControlledMenuList,\n  ControlledMenuRoot,\n} from '@/components/UI/ControlledMenu';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport { IFilterOption } from '@/interfaces/IFilterOption';\n\nimport { TFilterField, TFilterValues } from './filterTypes';\nimport { countActiveFilters, isFilterValueEmpty } from './filterValues';\n\ninterface IFilterChipDropdownProps {\n  label: string;\n  options: Array<IFilterOption>;\n  value: string;\n  isActive: boolean;\n  disabled?: boolean;\n  onPick: (value: string) => void;\n}\n\n/**\n * A single dropdown chip. The active state is carried by border, background,\n * weight and the visible value, so it reads without hovering; hover only\n * deepens the same purple.\n */\nconst FilterChipDropdown: React.FC<IFilterChipDropdownProps> = ({\n  label,\n  options,\n  value,\n  isActive,\n  disabled,\n  onPick,\n}) => {\n  const currentLabel = options.find((option) => option.value === value)?.label ?? '';\n\n  return (\n    <ControlledMenuRoot placement=\"bottom-start\" dismiss={{ itemPress: true }}>\n      <ControlledMenuHandler>\n        <ControlledButton\n          defaultHtmlButton\n          disabled={disabled}\n          className={classNames(\n            'flex h-8 items-center gap-1.5 rounded-lg border px-2.5 text-xs font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-brand-border disabled:text-foreground-faint',\n            isActive\n              ? 'border-brand-border bg-brand-soft text-brand-emphasis hover:bg-brand-soft'\n              : 'border-border bg-surface text-foreground-muted hover:bg-muted',\n          )}\n        >\n          <span className={isActive ? 'text-brand-emphasis' : 'text-foreground-faint'}>{label}</span>\n          {isActive && <span className=\"max-w-32 truncate font-semibold\">{currentLabel}</span>}\n          <MaterialSymbol\n            icon=\"expand_more\"\n            size={14}\n            className={classNames('shrink-0', isActive ? 'text-brand-emphasis' : 'text-foreground-faint')}\n          />\n        </ControlledButton>\n      </ControlledMenuHandler>\n      <ControlledMenuList className=\"zIndexMax flex max-h-48 min-w-44 flex-col overflow-hidden p-0\">\n        <div className=\"flex-1 overflow-y-auto p-1 outline-none\">\n          {options.map((option) => (\n            <ControlledMenuItem\n              key={option.value || '__all'}\n              onClick={() => onPick(option.value)}\n              className={classNames('text-sm', {\n                'bg-brand-soft font-semibold text-brand-emphasis hover:!bg-brand-soft': value === option.value,\n              })}\n            >\n              {option.label}\n            </ControlledMenuItem>\n          ))}\n        </div>\n      </ControlledMenuList>\n    </ControlledMenuRoot>\n  );\n};\n\nexport interface IFilterChipsRowProps {\n  fields: Array<TFilterField>;\n  values: TFilterValues;\n  onValueChange: (key: string, value: unknown) => void;\n  onClearAll: () => void;\n  disabled?: boolean;\n  className?: string;\n}\n\n/**\n * Horizontal chip bar for toolbars with a handful of quick filters. Applies on\n * pick (no draft), which is the interaction users expect from a chip row, and\n * is driven by the same schema as the drawer.\n */\nconst FilterChipsRow: React.FC<IFilterChipsRowProps> = ({\n  fields,\n  values,\n  onValueChange,\n  onClearAll,\n  disabled,\n  className,\n}) => {\n  const { t } = useTranslation('ui');\n  const safeFields = Array.isArray(fields) ? fields : [];\n  const activeCount = countActiveFilters(safeFields, values ?? {});\n\n  return (\n    <div className={classNames('flex shrink-0 flex-wrap items-center gap-2', className)}>\n      {safeFields.map((field) => {\n        const value = values?.[field.key];\n        const isActive = !isFilterValueEmpty(field, value);\n\n        if (field.kind === 'boolean') {\n          return (\n            <ControlledSwitch\n              key={field.key}\n              checked={value === true}\n              disabled={disabled || field.disabled}\n              label={field.label ?? field.title}\n              onChange={(checked) => onValueChange(field.key, checked)}\n            />\n          );\n        }\n\n        if (field.kind !== 'select' && field.kind !== 'radio') return null;\n\n        return (\n          <FilterChipDropdown\n            key={field.key}\n            label={field.title}\n            options={field.options ?? []}\n            value={typeof value === 'string' ? value : ''}\n            isActive={isActive}\n            disabled={disabled || field.disabled}\n            onPick={(next) => onValueChange(field.key, next)}\n          />\n        );\n      })}\n\n      {activeCount > 0 && (\n        <ControlledButton\n          defaultHtmlButton\n          onClick={onClearAll}\n          className=\"inline-flex h-8 items-center gap-1 rounded-lg px-2 text-xs font-medium 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=\"filter_list_off\" size={14} />\n          {t('filters.clearAll')}\n        </ControlledButton>\n      )}\n    </div>\n  );\n};\n\nexport default FilterChipsRow;\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,19 @@
+import { TFilterField, TFilterValues } from './filterTypes';
+import * as React from 'react';
+export interface IFilterControlProps<TField extends TFilterField> {
+    field: TField;
+    value: unknown;
+    values: TFilterValues;
+    onChange: (value: unknown) => void;
+    disabled?: boolean;
+}
+interface IFilterFieldControlProps {
+    field: TFilterField;
+    value: unknown;
+    values: TFilterValues;
+    onChange: (value: unknown) => void;
+    disabled?: boolean;
+    loading?: boolean;
+}
+declare const FilterFieldControl: React.FC<IFilterFieldControlProps>;
+export default FilterFieldControl;