@tedi-design-system/react 19.1.0-rc.9 → 19.1.1

package/src/community/components/form/category-search/category-search.es.js

@@ -0,0 +1,297 @@
+import { jsx as t, jsxs as u, Fragment as H } from "react/jsx-runtime";
+import { useFloating as Ce } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import q from "../../../../../external/classnames/index.es.js";
+import { forwardRef as Se, useId as be, useState as j, useRef as R, useImperativeHandle as xe, useEffect as ee } from "react";
+import { Icon as Re } from "../../../../tedi/components/base/icon/icon.es.js";
+import { Button as m } from "../../../../tedi/components/buttons/button/button.es.js";
+import { InputGroup as B } from "../../../../tedi/components/form/input-group/input-group.es.js";
+import { Search as ke } from "../../../../tedi/components/form/search/search.es.js";
+import { Dropdown as k } from "../../../../tedi/components/overlays/dropdown/dropdown.es.js";
+import n from "./category-search.module.scss.es.js";
+import { useCategorySearch as Fe } from "./use-category-search.es.js";
+import { autoUpdate as Ee } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
+import { shift as $e, size as Te } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
+const De = {
+  category: "Search category",
+  searchInput: "Search",
+  search: "Search",
+  clear: "Clear",
+  close: "Close",
+  filter: "Filter",
+  cancelFilter: "Clear filter",
+  showFilters: "Show filters",
+  showResults: "Show results",
+  results: "Results",
+  loading: "Searching…",
+  noResults: "No results found.",
+  searchError: "The search failed. Please try again.",
+  filtersChanged: "Filters edited since searching.",
+  resultCount: (p) => `${p} results`
+}, Le = Se(
+  ({
+    categories: p,
+    id: re,
+    categoryId: K,
+    defaultCategoryId: te,
+    onCategoryChange: F,
+    open: z,
+    defaultOpen: le = !1,
+    onOpenChange: E,
+    disabled: s = !1,
+    size: a = "default",
+    labels: ie,
+    panelWidth: $ = "100%",
+    maxPanelHeight: T = "min(32rem, 70dvh)",
+    className: se
+  }, ne) => {
+    var X, Y, Z;
+    const ae = be(), y = re ?? `category-search-${ae}`, D = `${y}-panel`, l = { ...De, ...ie }, [oe, ce] = j(te ?? ((X = p[0]) == null ? void 0 : X.id)), [de, ue] = j(le), { states: fe, changeDraft: L, search: G, clear: he, cancel: O } = Fe(p), [pe, _] = j(), S = R(null), Q = R(null), U = R(null), w = R(!1), me = K ?? oe, e = p.find((r) => r.id === me) ?? p[0], i = e ? fe.get(e.id) : void 0, h = i == null ? void 0 : i.completedSearch, P = (i == null ? void 0 : i.status) === "loading", b = (i == null ? void 0 : i.status) === "error", N = !!(h || P || b), c = (e == null ? void 0 : e.mode) === "search", ge = z ?? de;
+    let f = "closed";
+    ge && e && i && (c ? i.draft && N && (f = "results") : N && pe !== e.id ? f = "results" : f = "filters");
+    const g = f !== "closed", v = h ? ((Y = e == null ? void 0 : e.getResultCount) == null ? void 0 : Y.call(e, h.result)) ?? (Array.isArray(h.result) ? h.result.length : void 0) : void 0, { refs: x, floatingStyles: ve } = Ce({
+      open: g,
+      placement: "bottom-start",
+      whileElementsMounted: Ee,
+      middleware: [
+        c && $e(),
+        Te({
+          apply({ rects: r, availableWidth: d, elements: o }) {
+            c ? (o.floating.style.width = "", o.floating.style.maxWidth = `${Math.max(0, d)}px`) : (o.floating.style.width = `${r.reference.width}px`, o.floating.style.maxWidth = "");
+          }
+        })
+      ]
+    });
+    let V = l.filter, J = !1;
+    f === "results" ? V = l.showFilters : N && (V = l.showResults, J = !0), xe(ne, () => S.current), ee(() => {
+      _(void 0);
+    }, [e == null ? void 0 : e.id]), ee(() => {
+      var d, o;
+      if (f === "closed" || !w.current) return;
+      w.current = !1;
+      const r = document.activeElement;
+      (r === document.body || r && ((d = S.current) != null && d.contains(r))) && ((o = x.floating.current) == null || o.focus());
+    }, [f, e == null ? void 0 : e.id, i, x.floating]);
+    function I(r) {
+      z === void 0 && ue(r), E == null || E(r);
+    }
+    function ye(r) {
+      s || (K === void 0 && ce(r.id), F == null || F(r.id), I(!0));
+    }
+    function W() {
+      var r, d, o;
+      c ? (d = (r = U.current) == null ? void 0 : r.input) == null || d.focus() : (o = Q.current) == null || o.focus();
+    }
+    function C() {
+      w.current = !1, I(!1), W();
+    }
+    function A() {
+      !e || s || (he(e), _(void 0), w.current = !1, I(!c), W());
+    }
+    function _e(r) {
+      if (!(!e || s)) {
+        if (L(e.id, r), w.current = !1, I(r.length > 0), !r) {
+          O(e.id);
+          return;
+        }
+        G(e, r);
+      }
+    }
+    function we(r) {
+      !e || !c || s || (O(e.id), L(e.id, r), C());
+    }
+    function M() {
+      !e || !i || s || c && !i.draft || (_(void 0), w.current = !0, I(!0), G(e, i.draft));
+    }
+    function Ie() {
+      f === "closed" ? (_(void 0), I(!0)) : f === "results" ? _(e == null ? void 0 : e.id) : N ? _(void 0) : C();
+    }
+    function Ne(r) {
+      var o;
+      if (r.key !== "Escape" || r.defaultPrevented || !g) return;
+      const d = r.target;
+      (o = S.current) != null && o.contains(d) && (d.closest('[role="combobox"][aria-expanded="true"]') || (r.stopPropagation(), r.preventDefault(), C()));
+    }
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        id: y,
+        ref: S,
+        className: q(n["tedi-category-search"], n[`tedi-category-search--${a}`], se),
+        style: {
+          "--category-search-panel-width": typeof $ == "number" ? `${$}px` : $,
+          "--category-search-panel-max-height": typeof T == "number" ? `${T}px` : T
+        },
+        onKeyDown: Ne,
+        children: e && i && /* @__PURE__ */ u(H, { children: [
+          /* @__PURE__ */ t("div", { className: n["tedi-category-search__bar"], children: /* @__PURE__ */ u(
+            B,
+            {
+              id: `${y}-input`,
+              label: c ? l.searchInput : null,
+              hideLabel: !0,
+              disabled: s,
+              children: [
+                /* @__PURE__ */ t("div", { ref: x.setReference, className: n["tedi-category-search__main"], children: c ? /* @__PURE__ */ t(B.Input, { children: /* @__PURE__ */ t(
+                  ke,
+                  {
+                    ref: U,
+                    id: `${y}-input`,
+                    name: `${y}-query`,
+                    value: i.draft,
+                    disabled: s,
+                    size: a,
+                    ariaLabel: e.label,
+                    placeholder: e.placeholder,
+                    onChange: _e,
+                    onClear: A,
+                    onSearch: M,
+                    button: {
+                      icon: "search",
+                      size: a,
+                      disabled: s,
+                      "aria-label": l.search
+                    },
+                    input: { "aria-controls": g ? D : void 0 }
+                  }
+                ) }) : /* @__PURE__ */ u("div", { className: n["tedi-category-search__actions"], children: [
+                  /* @__PURE__ */ u(
+                    m,
+                    {
+                      id: `${y}-input`,
+                      ref: Q,
+                      size: a,
+                      visualType: "link",
+                      iconLeft: "tune",
+                      disabled: s,
+                      "aria-expanded": g,
+                      "aria-controls": g ? D : void 0,
+                      onClick: Ie,
+                      children: [
+                        V,
+                        J && v !== void 0 ? ` (${v})` : ""
+                      ]
+                    }
+                  ),
+                  N && /* @__PURE__ */ t(
+                    m,
+                    {
+                      size: a,
+                      visualType: "link",
+                      iconLeft: "close",
+                      disabled: s,
+                      onClick: A,
+                      children: l.cancelFilter
+                    }
+                  )
+                ] }) }),
+                /* @__PURE__ */ t(B.Suffix, { className: n["tedi-category-search__suffix"], children: /* @__PURE__ */ u(
+                  k,
+                  {
+                    defaultActiveIndex: p.indexOf(e),
+                    modal: !1,
+                    placement: "bottom-end",
+                    className: q(n["tedi-category-search__menu"], n[`tedi-category-search__menu--${a}`]),
+                    children: [
+                      /* @__PURE__ */ t(k.Trigger, { children: /* @__PURE__ */ u(
+                        m,
+                        {
+                          noStyle: !0,
+                          size: a,
+                          disabled: s,
+                          "aria-label": `${l.category}: ${e.label}`,
+                          children: [
+                            /* @__PURE__ */ t("span", { className: n["tedi-category-search__category-label"], children: e.label }),
+                            /* @__PURE__ */ t(Re, { name: "arrow_drop_down", color: "inherit" })
+                          ]
+                        }
+                      ) }),
+                      /* @__PURE__ */ t(k.Content, { children: p.map((r, d) => /* @__PURE__ */ t(
+                        k.Item,
+                        {
+                          index: d,
+                          className: n["tedi-category-search__menu-item"],
+                          role: "menuitemradio",
+                          "aria-checked": e.id === r.id,
+                          active: e.id === r.id,
+                          disabled: s,
+                          onClick: () => ye(r),
+                          children: r.label
+                        },
+                        r.id
+                      )) })
+                    ]
+                  }
+                ) })
+              ]
+            }
+          ) }),
+          g && /* @__PURE__ */ t(
+            "section",
+            {
+              id: D,
+              ref: x.setFloating,
+              style: ve,
+              tabIndex: -1,
+              "aria-label": `${e.label}: ${f === "results" ? l.results : l.filter}`,
+              className: n["tedi-category-search__panel"],
+              children: f === "filters" ? /* @__PURE__ */ u(
+                "form",
+                {
+                  onSubmit: (r) => {
+                    r.preventDefault(), r.stopPropagation(), M();
+                  },
+                  children: [
+                    /* @__PURE__ */ u("fieldset", { disabled: s, className: n["tedi-category-search__fields"], children: [
+                      /* @__PURE__ */ t("legend", { className: n["tedi-category-search__sr-only"], children: e.label }),
+                      (Z = e.renderFilters) == null ? void 0 : Z.call(e, {
+                        values: i.draft,
+                        onChange: (r) => L(e.id, r),
+                        disabled: s,
+                        size: a
+                      })
+                    ] }),
+                    /* @__PURE__ */ u("div", { className: n["tedi-category-search__footer"], children: [
+                      /* @__PURE__ */ t(m, { size: a, visualType: "link", onClick: C, children: l.close }),
+                      /* @__PURE__ */ t(m, { size: a, visualType: "secondary", disabled: s, onClick: A, children: l.clear }),
+                      /* @__PURE__ */ t(m, { size: a, type: "submit", formNoValidate: !1, disabled: s, children: l.search })
+                    ] })
+                  ]
+                }
+              ) : /* @__PURE__ */ u(H, { children: [
+                P && /* @__PURE__ */ t("p", { role: "status", children: l.loading }),
+                b && /* @__PURE__ */ t("p", { role: "alert", children: l.searchError }),
+                h && /* @__PURE__ */ u("div", { "aria-label": l.results, children: [
+                  !c && i.draft !== h.input && /* @__PURE__ */ t("p", { children: l.filtersChanged }),
+                  !c && v !== void 0 && /* @__PURE__ */ t("p", { children: l.resultCount(v) }),
+                  v === 0 ? /* @__PURE__ */ t("p", { children: l.noResults }) : e.renderResults({
+                    value: h.input,
+                    result: h.result,
+                    selectResult: we
+                  })
+                ] }),
+                /* @__PURE__ */ u("div", { className: n["tedi-category-search__footer"], children: [
+                  /* @__PURE__ */ t(m, { size: a, visualType: "link", onClick: C, children: l.close }),
+                  c && b && /* @__PURE__ */ t(m, { size: a, disabled: s, onClick: M, children: l.search })
+                ] })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ t(
+            "span",
+            {
+              className: n["tedi-category-search__sr-only"],
+              role: "status",
+              "aria-live": "polite",
+              "aria-atomic": "true",
+              children: g && !P && !b && h ? `${e.label}: ${v !== void 0 ? l.resultCount(v) : l.results}` : ""
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+Le.displayName = "CategorySearch";
+export {
+  Le as CategorySearch
+};

package/src/community/components/form/category-search/category-search.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-category-search":"tedi-category-search-c689f0ce","tedi-category-search__bar":"tedi-category-search__bar-bee91c0f","tedi-category-search__main":"tedi-category-search__main-9130cfc8","tedi-category-search__actions":"tedi-category-search__actions-9cabc74c","tedi-category-search__suffix":"tedi-category-search__suffix-c0bbe721","tedi-category-search__category-label":"tedi-category-search__category-label-49a8230f","tedi-category-search--small":"tedi-category-search--small-8c067c1c","tedi-category-search--large":"tedi-category-search--large-1b4ac54d","tedi-category-search__menu":"tedi-category-search__menu-9d28f550","tedi-category-search__menu-item":"tedi-category-search__menu-item-16e86083","tedi-category-search__menu--small":"tedi-category-search__menu--small-6ed1c765","tedi-category-search__menu--large":"tedi-category-search__menu--large-e4805fc7","tedi-category-search__panel":"tedi-category-search__panel-d64a4656","tedi-category-search__fields":"tedi-category-search__fields-ddd8b4f9","tedi-category-search__footer":"tedi-category-search__footer-35ae925e","tedi-category-search__sr-only":"tedi-category-search__sr-only-c10e75fa"};exports.default=e;

package/src/community/components/form/category-search/category-search.module.scss.es.js

@@ -0,0 +1,21 @@
+const e = {
+  "tedi-category-search": "tedi-category-search-c689f0ce",
+  "tedi-category-search__bar": "tedi-category-search__bar-bee91c0f",
+  "tedi-category-search__main": "tedi-category-search__main-9130cfc8",
+  "tedi-category-search__actions": "tedi-category-search__actions-9cabc74c",
+  "tedi-category-search__suffix": "tedi-category-search__suffix-c0bbe721",
+  "tedi-category-search__category-label": "tedi-category-search__category-label-49a8230f",
+  "tedi-category-search--small": "tedi-category-search--small-8c067c1c",
+  "tedi-category-search--large": "tedi-category-search--large-1b4ac54d",
+  "tedi-category-search__menu": "tedi-category-search__menu-9d28f550",
+  "tedi-category-search__menu-item": "tedi-category-search__menu-item-16e86083",
+  "tedi-category-search__menu--small": "tedi-category-search__menu--small-6ed1c765",
+  "tedi-category-search__menu--large": "tedi-category-search__menu--large-e4805fc7",
+  "tedi-category-search__panel": "tedi-category-search__panel-d64a4656",
+  "tedi-category-search__fields": "tedi-category-search__fields-ddd8b4f9",
+  "tedi-category-search__footer": "tedi-category-search__footer-35ae925e",
+  "tedi-category-search__sr-only": "tedi-category-search__sr-only-c10e75fa"
+};
+export {
+  e as default
+};

package/src/community/components/form/category-search/category-search.types.d.ts

@@ -0,0 +1,162 @@
+import { CSSProperties, ReactNode } from 'react';
+export type CategorySearchSize = 'small' | 'default' | 'large';
+export interface CategorySearchRequestContext {
+    /** Aborted by a newer search, an empty query, selection, Clear, category removal, or unmount. */
+    signal: AbortSignal;
+}
+export interface CategorySearchFilterContext<Filters> {
+    /** Current draft. Treat nested values as immutable React state. */
+    values: Filters;
+    /**
+     * Replace edited filter objects, including changed nested objects; never mutate them.
+     * This preserves the submitted input associated with saved results.
+     */
+    onChange: (values: Filters) => void;
+    /** Whether the rendered fields should be disabled. */
+    disabled: boolean;
+    /** Resolved component size. Pass it to fields that support this size. */
+    size: CategorySearchSize;
+}
+export interface CategorySearchFilterDefinition<Filters, Result> {
+    /** Stable and unique within one CategorySearch instance. */
+    id: string;
+    /** Category name shown in the selector and used to name the panel. */
+    label: string;
+    /** Display this category's custom filter form. */
+    mode: 'category';
+    /** Return a fresh value. Called when this category is added and whenever it is cleared. */
+    initialFilters: () => Filters;
+    /** Render fields only; CategorySearch provides the form and its action buttons. */
+    renderFilters: (context: CategorySearchFilterContext<Filters>) => ReactNode;
+    /** Search a submitted draft. Do not mutate filters; honor signal when supported. */
+    onSearch: (filters: Filters, context: CategorySearchRequestContext) => Result | Promise<Result>;
+    /** Render the last successful result alongside the filters that produced it. */
+    renderResults: (context: {
+        result: Result;
+        filters: Filters;
+    }) => ReactNode;
+    /** Supply this when the result is paginated or is not a plain array. */
+    getResultCount?: (result: Result) => number;
+}
+export interface CategorySearchTextDefinition<Result> {
+    /** Stable and unique within one CategorySearch instance. */
+    id: string;
+    /** Category name shown in the selector and used to name the panel. */
+    label: string;
+    /** Display the standard text search field. */
+    mode: 'search';
+    /** Initial query restored by clear; defaults to an empty string. */
+    initialQuery?: string;
+    /** Search input placeholder. The hidden input label comes from labels.searchInput. */
+    placeholder?: string;
+    /** Search on each non-empty text change and explicit submission; honor signal when supported. */
+    onSearch: (query: string, context: CategorySearchRequestContext) => Result | Promise<Result>;
+    /** Render the last successful result alongside the query that produced it. */
+    renderResults: (context: {
+        result: Result;
+        query: string;
+        /** Put a result label in the input, close the panel, and cancel any pending lookup. */
+        selectResult: (text: string) => void;
+    }) => ReactNode;
+    /** Supply this when the result is paginated or is not a plain array. */
+    getResultCount?: (result: Result) => number;
+}
+/**
+ * Common shape for storing different categories in one array.
+ * Use defineCategorySearchCategory to keep each category's own filter and result types.
+ */
+export interface CategorySearchCategory {
+    /** Stable category identity. */
+    id: string;
+    /** User-facing category name. */
+    label: string;
+    /** Select the standard search field or a custom filter form. */
+    mode: 'search' | 'category';
+    /** Optional placeholder for a standard search field. */
+    placeholder?: string;
+    /** @internal Create an initial or reset draft. */
+    initialValue: () => unknown;
+    /** @internal Render the normalized category filter fields. */
+    renderFilters?: (context: CategorySearchFilterContext<unknown>) => ReactNode;
+    /** @internal Execute a search with the normalized submitted draft. */
+    onSearch: (value: unknown, context: CategorySearchRequestContext) => unknown | Promise<unknown>;
+    /** @internal Render completed results and their normalized submitted draft. */
+    renderResults: (context: {
+        result: unknown;
+        value: unknown;
+        selectResult: (text: string) => void;
+    }) => ReactNode;
+    /** @internal Return the number of matching results for the summary. */
+    getResultCount?: (result: unknown) => number;
+}
+export interface CategorySearchLabels {
+    /** Accessible category selector label. */
+    category: string;
+    /** Search submission button label. */
+    search: string;
+    /** Hidden label for the standard text search input. */
+    searchInput: string;
+    /** Clear the current category action label. */
+    clear: string;
+    /** Close the panel action label. */
+    close: string;
+    /** Category filter submission button label. */
+    filter: string;
+    /** Reset the current category filter action label. */
+    cancelFilter: string;
+    /** Action label for opening the filter fields. */
+    showFilters: string;
+    /** Action label for reopening remembered results. */
+    showResults: string;
+    /** Accessible results label and fallback announcement when no result count is available. */
+    results: string;
+    /** Status while a search is running. */
+    loading: string;
+    /** Message after a successful search with zero results. */
+    noResults: string;
+    /** Generic visible message after a failed search. */
+    searchError: string;
+    /**
+     * Notice when the filter object was replaced since the saved search was submitted.
+     * Returning fields to their earlier values does not remove it. Defaults to 'Filters edited since searching.'.
+     */
+    filtersChanged: string;
+    /** Format the number of matching results. */
+    resultCount: (count: number) => string;
+}
+export interface CategorySearchProps {
+    /** Optional stable DOM ID prefix; an ID is generated when omitted. */
+    id?: string;
+    /** Definitions with unique, stable IDs. Create these with defineCategorySearchCategory. */
+    categories: readonly CategorySearchCategory[];
+    /** Controlled selected category ID; use with onCategoryChange. */
+    categoryId?: string;
+    /** Initially selected ID. Defaults to the first category. */
+    defaultCategoryId?: string;
+    /** Called when the user selects another category. */
+    onCategoryChange?: (categoryId: string) => void;
+    /** Controlled panel visibility; use with onOpenChange. */
+    open?: boolean;
+    /**
+     * Initial non-modal panel visibility. Defaults to false.
+     * A text search also requires a non-empty input and a pending search, completed search, or error.
+     */
+    defaultOpen?: boolean;
+    /** Called when an interaction requests a visibility change. */
+    onOpenChange?: (open: boolean) => void;
+    /** Disable category selection, filter fields, and submission. Defaults to false. */
+    disabled?: boolean;
+    /** Size of the search field and buttons; also provided to renderFilters. Defaults to 'default'. */
+    size?: CategorySearchSize;
+    /** Override visible and accessible labels for localization. */
+    labels?: Partial<CategorySearchLabels>;
+    /**
+     * Text-results panel width. May exceed the search bar; constrained to the available viewport space.
+     * Defaults to '100%' of the whole search bar. Filter panels always match the bar excluding its category selector.
+     */
+    panelWidth?: CSSProperties['width'];
+    /** Maximum panel height; excess content scrolls. Defaults to 'min(32rem, 70dvh)'. */
+    maxPanelHeight?: CSSProperties['maxHeight'];
+    /** Additional CSS class applied to the outer component element. */
+    className?: string;
+}

package/src/community/components/form/category-search/define-category-search-category.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function c(e){const a=e.getResultCount,s={id:e.id,label:e.label,getResultCount:a?r=>a(r):void 0};return e.mode==="search"?{...s,mode:"search",placeholder:e.placeholder,initialValue:()=>e.initialQuery??"",onSearch:(r,l)=>e.onSearch(r,l),renderResults:({result:r,value:l,selectResult:t})=>e.renderResults({result:r,query:l,selectResult:t})}:{...s,mode:"category",initialValue:e.initialFilters,renderFilters:({values:r,onChange:l,disabled:t,size:u})=>e.renderFilters({values:r,onChange:l,disabled:t,size:u}),onSearch:(r,l)=>e.onSearch(r,l),renderResults:({result:r,value:l})=>e.renderResults({result:r,filters:l})}}exports.defineCategorySearchCategory=c;

package/src/community/components/form/category-search/define-category-search-category.d.ts

@@ -0,0 +1,7 @@
+import { CategorySearchCategory, CategorySearchFilterDefinition, CategorySearchTextDefinition } from './category-search.types';
+/**
+ * Gives text and filter categories a common internal format, while keeping each
+ * category's own input and result types checked at the application boundary.
+ */
+export declare function defineCategorySearchCategory<Filters, Result>(definition: CategorySearchFilterDefinition<Filters, Result>): CategorySearchCategory;
+export declare function defineCategorySearchCategory<Result>(definition: CategorySearchTextDefinition<Result>): CategorySearchCategory;

package/src/community/components/form/category-search/define-category-search-category.es.js

@@ -0,0 +1,25 @@
+function c(e) {
+  const s = e.getResultCount, t = {
+    id: e.id,
+    label: e.label,
+    getResultCount: s ? (r) => s(r) : void 0
+  };
+  return e.mode === "search" ? {
+    ...t,
+    mode: "search",
+    placeholder: e.placeholder,
+    initialValue: () => e.initialQuery ?? "",
+    onSearch: (r, l) => e.onSearch(r, l),
+    renderResults: ({ result: r, value: l, selectResult: a }) => e.renderResults({ result: r, query: l, selectResult: a })
+  } : {
+    ...t,
+    mode: "category",
+    initialValue: e.initialFilters,
+    renderFilters: ({ values: r, onChange: l, disabled: a, size: u }) => e.renderFilters({ values: r, onChange: l, disabled: a, size: u }),
+    onSearch: (r, l) => e.onSearch(r, l),
+    renderResults: ({ result: r, value: l }) => e.renderResults({ result: r, filters: l })
+  };
+}
+export {
+  c as defineCategorySearchCategory
+};

package/src/community/components/form/category-search/index.d.ts

@@ -0,0 +1,3 @@
+export * from './category-search';
+export * from './category-search.types';
+export { defineCategorySearchCategory } from './define-category-search-category';

package/src/community/components/form/category-search/use-category-search.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react");function w(u){const[f,o]=i.useState(()=>new Map(u.map(t=>[t.id,{draft:t.initialValue(),status:"idle"}]))),s=i.useRef(new Map);i.useEffect(()=>{const t=s.current;return()=>{t.forEach(r=>r.abort()),t.clear()}},[]),i.useEffect(()=>{const t=new Set(u.map(r=>r.id));if(t.size!==u.length)throw new Error("CategorySearch category IDs must be unique.");s.current.forEach((r,e)=>{t.has(e)||(r.abort(),s.current.delete(e))}),o(r=>{const e=new Map(r);let n=!1;for(const a of u)e.has(a.id)||(e.set(a.id,{draft:a.initialValue(),status:"idle"}),n=!0);for(const a of r.keys())t.has(a)||(e.delete(a),n=!0);return n?e:r})},[u]);function c(t,r){o(e=>{const n=e.get(t);if(!n)return e;const a=new Map(e);return a.set(t,{...n,...r}),a})}function d(t,r){c(t,{draft:r})}function l(t){var r;(r=s.current.get(t))==null||r.abort(),s.current.delete(t),c(t,{status:"idle"})}function h(t){l(t.id),c(t.id,{draft:t.initialValue(),completedSearch:void 0,status:"idle"})}async function S(t,r){const e=t.id;l(e);const n=new AbortController;s.current.set(e,n),c(e,{status:"loading"});try{const a=await t.onSearch(r,{signal:n.signal});if(s.current.get(e)!==n)return;c(e,{completedSearch:{input:r,result:a},status:"idle"})}catch{if(s.current.get(e)!==n)return;c(e,{status:"error"})}finally{s.current.get(e)===n&&s.current.delete(e)}}return{states:f,changeDraft:d,search:S,clear:h,cancel:l}}exports.useCategorySearch=w;

package/src/community/components/form/category-search/use-category-search.d.ts

@@ -0,0 +1,17 @@
+import { CategorySearchCategory } from './category-search.types';
+interface CategorySearchState {
+    draft: unknown;
+    completedSearch?: {
+        input: unknown;
+        result: unknown;
+    };
+    status: 'idle' | 'loading' | 'error';
+}
+export declare function useCategorySearch(categories: readonly CategorySearchCategory[]): {
+    states: ReadonlyMap<string, CategorySearchState>;
+    changeDraft: (categoryId: string, draft: unknown) => void;
+    search: (category: CategorySearchCategory, input: unknown) => Promise<void>;
+    clear: (category: CategorySearchCategory) => void;
+    cancel: (categoryId: string) => void;
+};
+export {};

package/src/community/components/form/category-search/use-category-search.es.js

@@ -0,0 +1,64 @@
+import { useState as S, useRef as m, useEffect as o } from "react";
+function b(u) {
+  const [f, l] = S(
+    () => new Map(u.map((t) => [t.id, { draft: t.initialValue(), status: "idle" }]))
+  ), s = m(/* @__PURE__ */ new Map());
+  o(() => {
+    const t = s.current;
+    return () => {
+      t.forEach((n) => n.abort()), t.clear();
+    };
+  }, []), o(() => {
+    const t = new Set(u.map((n) => n.id));
+    if (t.size !== u.length) throw new Error("CategorySearch category IDs must be unique.");
+    s.current.forEach((n, e) => {
+      t.has(e) || (n.abort(), s.current.delete(e));
+    }), l((n) => {
+      const e = new Map(n);
+      let r = !1;
+      for (const a of u)
+        e.has(a.id) || (e.set(a.id, { draft: a.initialValue(), status: "idle" }), r = !0);
+      for (const a of n.keys())
+        t.has(a) || (e.delete(a), r = !0);
+      return r ? e : n;
+    });
+  }, [u]);
+  function c(t, n) {
+    l((e) => {
+      const r = e.get(t);
+      if (!r) return e;
+      const a = new Map(e);
+      return a.set(t, { ...r, ...n }), a;
+    });
+  }
+  function d(t, n) {
+    c(t, { draft: n });
+  }
+  function i(t) {
+    var n;
+    (n = s.current.get(t)) == null || n.abort(), s.current.delete(t), c(t, { status: "idle" });
+  }
+  function h(t) {
+    i(t.id), c(t.id, { draft: t.initialValue(), completedSearch: void 0, status: "idle" });
+  }
+  async function w(t, n) {
+    const e = t.id;
+    i(e);
+    const r = new AbortController();
+    s.current.set(e, r), c(e, { status: "loading" });
+    try {
+      const a = await t.onSearch(n, { signal: r.signal });
+      if (s.current.get(e) !== r) return;
+      c(e, { completedSearch: { input: n, result: a }, status: "idle" });
+    } catch {
+      if (s.current.get(e) !== r) return;
+      c(e, { status: "error" });
+    } finally {
+      s.current.get(e) === r && s.current.delete(e);
+    }
+  }
+  return { states: f, changeDraft: d, search: w, clear: h, cancel: i };
+}
+export {
+  b as useCategorySearch
+};

package/src/community/components/form/file-upload/file-upload.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),z=require("../../../../../external/classnames/index.cjs.js"),g=require("react"),A=require("../../../../tedi/components/form/feedback-text/feedback-text.cjs.js"),I=require("../../../../tedi/components/form/form-label/form-label.cjs.js"),O=require("../../../../tedi/components/tags/tag/tag.cjs.js"),D=require("../../button/button.cjs.js"),c=require("./file-upload.module.scss.cjs.js"),P=require("../../../../tedi/providers/label-provider/use-labels.cjs.js"),W=require("../../card/card.cjs.js"),Y=require("../../card/card-content/card-content.cjs.js"),G=require("../../../../tedi/components/layout/grid/row.cjs.js"),M=require("../../../../tedi/components/layout/grid/col.cjs.js"),J=({accept:a,maxSize:i},n)=>{if(!a&&!i)return;const s=[a&&`${n("file-upload.accept")} ${a.replaceAll(",",", ")}`,i&&`${n("file-upload.max-size")} ${i}MB`].filter(Boolean).join(". ");return s.length?{text:s}:void 0},K=(a,i)=>{const n=a.reduce((s,{type:r,file:p})=>(s[r].push(p.name),s),{extension:[],size:[]});return Object.entries(n).filter(([s,r])=>r.length).map(([s,r])=>{const p=r.map(y=>`'${y}'`).join(", ");return i(`file-upload.${s}-rejected`,p)}).join(". ")},Q=a=>{const{getLabel:i}=P.useLabels(),{id:n,name:s,accept:r,multiple:p,onChange:o,className:y,defaultFiles:N,onDelete:F,files:f,readOnly:b,disabled:m=!1,maxSize:h,helper:d=J({accept:r,maxSize:h},i),...$}=a,q=d?(d==null?void 0:d.id)??`${n}-helper`:void 0,[k,L]=g.useState(!1),[_,T]=g.useState(N||[]),[C,w]=g.useState(),U=z.default(c.default["file-upload"],{[c.default["file-upload-disabled"]]:m}),B=e=>{var x;if(!r)return!0;const l=(r==null?void 0:r.replace(/,/g,"").split("."))||[],u=(x=e.name.split(".").pop())==null?void 0:x.toLowerCase();return!!u&&l.includes(u)},v=g.useMemo(()=>f&&o?f:_,[f,_,o]),H=e=>{if(e.target.files){const l=[],u=[...Array.from(e.target.files)].filter(j=>B(j)?!0:(l.push({type:"extension",file:j}),!1)).filter(j=>!h||j.size<=h*1048576?!0:(l.push({type:"size",file:j}),!1)),x=[...v,...u];typeof f>"u"&&T(x),o==null||o(x),e.target.value="",l.length?w({type:"error",text:K(l,i)}):w(void 0)}},R=e=>{const l=[...v].filter(u=>u!==e);F&&F(e),typeof f>"u"&&T(l),o==null||o(l)},S=(e,l)=>t.jsx("li",{children:t.jsx(O.Tag,{color:"secondary",onClose:!e.isLoading&&!m&&!b?()=>R(e):void 0,isLoading:e.isLoading,children:e.name})},l),E=()=>t.jsx("ul",{className:c.default["file-upload__items"],children:v.map((e,l)=>S(e,l))});return t.jsxs("div",{children:[t.jsx("div",{onMouseEnter:()=>L(!0),onMouseLeave:()=>L(!1),className:c.default["file-upload__label-wrapper"],children:t.jsx(I.FormLabel,{id:n,...$,renderWithoutLabel:b,className:c.default["file-upload__label"]})}),b?E():t.jsx(W.Card,{padding:.5,background:m?"bg-disabled":void 0,className:c.default["file-upload__card"],children:t.jsx(Y.CardContent,{children:t.jsxs(G.Row,{gutterY:2,children:[t.jsx(M.Col,{children:E()}),t.jsx(M.Col,{xs:12,md:"auto",align:"center",children:t.jsxs("div",{className:U,children:[t.jsx("input",{id:n,type:"file",name:s,accept:r,onChange:H,multiple:p,disabled:m}),t.jsx(D.Button,{visualType:"link",iconLeft:"file_upload","aria-describedby":q,isActive:k,disabled:m,onClick:()=>{var e;return(e=document.getElementById(n))==null?void 0:e.click()},children:i("file-upload.add")})]})})]})})}),(C||d)&&t.jsx(A.FeedbackText,{...C||d,id:q})]})};exports.FileUpload=Q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),S=require("../../../../../external/classnames/index.cjs.js"),j=require("react"),z=require("../../../../tedi/components/form/feedback-text/feedback-text.cjs.js"),A=require("../../../../tedi/components/form/form-label/form-label.cjs.js"),I=require("../../../../tedi/components/tags/tag/tag.cjs.js"),O=require("../../../../tedi/helpers/warn-deprecated/warn-deprecated.cjs.js"),P=require("../../button/button.cjs.js"),c=require("./file-upload.module.scss.cjs.js"),W=require("../../../../tedi/providers/label-provider/use-labels.cjs.js"),Y=require("../../card/card.cjs.js"),G=require("../../card/card-content/card-content.cjs.js"),J=require("../../../../tedi/components/layout/grid/row.cjs.js"),E=require("../../../../tedi/components/layout/grid/col.cjs.js"),K=({accept:a,maxSize:i},n)=>{if(!a&&!i)return;const s=[a&&`${n("file-upload.accept")} ${a.replaceAll(",",", ")}`,i&&`${n("file-upload.max-size")} ${i}MB`].filter(Boolean).join(". ");return s.length?{text:s}:void 0},Q=(a,i)=>{const n=a.reduce((s,{type:r,file:p})=>(s[r].push(p.name),s),{extension:[],size:[]});return Object.entries(n).filter(([s,r])=>r.length).map(([s,r])=>{const p=r.map(F=>`'${F}'`).join(", ");return i(`file-upload.${s}-rejected`,p)}).join(". ")},V=a=>{O.warnDeprecated("Community FileUpload","Use `FileUpload` from `@tedi-design-system/react/tedi` instead.");const{getLabel:i}=W.useLabels(),{id:n,name:s,accept:r,multiple:p,onChange:o,className:F,defaultFiles:M,onDelete:v,files:f,readOnly:b,disabled:m=!1,maxSize:h,helper:d=K({accept:r,maxSize:h},i),...N}=a,q=d?(d==null?void 0:d.id)??`${n}-helper`:void 0,[$,L]=j.useState(!1),[_,w]=j.useState(M||[]),[C,T]=j.useState(),k=S.default(c.default["file-upload"],{[c.default["file-upload-disabled"]]:m}),B=e=>{var x;if(!r)return!0;const l=(r==null?void 0:r.replace(/,/g,"").split("."))||[],u=(x=e.name.split(".").pop())==null?void 0:x.toLowerCase();return!!u&&l.includes(u)},y=j.useMemo(()=>f&&o?f:_,[f,_,o]),H=e=>{if(e.target.files){const l=[],u=[...Array.from(e.target.files)].filter(g=>B(g)?!0:(l.push({type:"extension",file:g}),!1)).filter(g=>!h||g.size<=h*1048576?!0:(l.push({type:"size",file:g}),!1)),x=[...y,...u];typeof f>"u"&&w(x),o==null||o(x),e.target.value="",l.length?T({type:"error",text:Q(l,i)}):T(void 0)}},D=e=>{const l=[...y].filter(u=>u!==e);v&&v(e),typeof f>"u"&&w(l),o==null||o(l)},R=(e,l)=>t.jsx("li",{children:t.jsx(I.Tag,{color:"secondary",onClose:!e.isLoading&&!m&&!b?()=>D(e):void 0,isLoading:e.isLoading,children:e.name})},l),U=()=>t.jsx("ul",{className:c.default["file-upload__items"],children:y.map((e,l)=>R(e,l))});return t.jsxs("div",{children:[t.jsx("div",{onMouseEnter:()=>L(!0),onMouseLeave:()=>L(!1),className:c.default["file-upload__label-wrapper"],children:t.jsx(A.FormLabel,{id:n,...N,renderWithoutLabel:b,className:c.default["file-upload__label"]})}),b?U():t.jsx(Y.Card,{padding:.5,background:m?"bg-disabled":void 0,className:c.default["file-upload__card"],children:t.jsx(G.CardContent,{children:t.jsxs(J.Row,{gutterY:2,children:[t.jsx(E.Col,{children:U()}),t.jsx(E.Col,{xs:12,md:"auto",align:"center",children:t.jsxs("div",{className:k,children:[t.jsx("input",{id:n,type:"file",name:s,accept:r,onChange:H,multiple:p,disabled:m}),t.jsx(P.Button,{visualType:"link",iconLeft:"file_upload","aria-describedby":q,isActive:$,disabled:m,onClick:()=>{var e;return(e=document.getElementById(n))==null?void 0:e.click()},children:i("file-upload.add")})]})})]})})}),(C||d)&&t.jsx(z.FeedbackText,{...C||d,id:q})]})};exports.FileUpload=V;