@tedi-design-system/react 19.1.0-rc.17 → 19.1.0-rc.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "19.1.0-rc.17",
+  "version": "19.1.0-rc.18",
   "description": "TEDI Design System React component library — accessible, reusable UI components. Docs & live examples: https://storybook.tedi.ee/react/rc/",
   "type": "module",
   "sideEffects": false,

package/src/tedi/components/form/search/index.d.ts

@@ -0,0 +1 @@
+export * from './search';

package/src/tedi/components/form/search/search.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),t=require("../../../../../external/classnames/index.cjs.js"),v=require("react"),w=require("../../buttons/button/button.cjs.js"),j=require("../textfield/textfield.cjs.js"),a=require("./search.module.scss.cjs.js"),L=require("../../../providers/label-provider/use-labels.cjs.js"),n=v.forwardRef(({placeholder:u,isClearable:o=!0,searchIcon:r="search",onSearch:s,onChange:f,button:e,ariaLabel:h,className:_,input:p,...l},m)=>{const{getLabel:i}=L.useLabels(),b=g=>{g.key==="Enter"&&(s==null||s(l.value))},x=()=>{s==null||s(l.value)},d=typeof r=="string"?{name:r}:r,y={color:"secondary",...d,className:t.default(d.className,l.disabled&&a.default["tedi-search__icon--disabled"])},q={...l,ref:m,inputClassName:t.default(a.default["tedi-search__input"],e&&a.default["tedi-search__input--has-button"],_),placeholder:u,isClearable:o,onKeyDown:b,onChange:f,input:{...p,role:"searchbox"},...e?{}:{icon:y}},N=h||i("search");return c.jsxs("div",{className:t.default(a.default["tedi-search__wrapper"],l.size==="small"&&a.default["tedi-search__wrapper--small"],l.size==="large"&&a.default["tedi-search__wrapper--large"]),role:"search","aria-label":N,children:[c.jsx(j.TextField,{...q}),e&&c.jsx(w.Button,{...e,onClick:x,className:t.default(a.default["tedi-search__button"],!e.children&&a.default["tedi-search__button--icon-only"],e.className),"aria-label":e.children?void 0:i("search"),children:e.children??i("search")})]})});n.displayName="Search";exports.Search=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),C=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),N=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),Q=require("../../base/typography/text/text.cjs.js"),Je=require("../../buttons/button/button.cjs.js"),We=require("../../loaders/spinner/spinner.cjs.js"),H=require("../../misc/option-content/option-content.cjs.js"),Xe=require("../textfield/textfield.cjs.js"),s=require("./search.module.scss.cjs.js"),Ye=require("../../../providers/label-provider/use-labels.cjs.js"),Ze=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),D=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),$e=4,G=8,fe=["a[href]","area[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","iframe",'[tabindex]:not([tabindex="-1"])'].join(","),et=(l,m)=>m?m(l):typeof l.label=="string"?l.label:String(l.value),tt=(l,m)=>{const x=m.trim();if(!x)return l;const h=l.toLowerCase().indexOf(x.toLowerCase());return h===-1?l:r.jsxs(r.Fragment,{children:[l.slice(0,h),r.jsx(Q.Text,{element:"span",modifiers:"bold",children:l.slice(h,h+x.length)}),l.slice(h+x.length)]})},he=o.forwardRef((l,m)=>{var ue;const{id:x,placeholder:h,isClearable:pe=!0,searchIcon:L="search",onSearch:u,onChange:q,onClear:be,onFocus:F,button:a,ariaLabel:me,className:xe,input:R,value:J,defaultValue:ye,suggestions:S,onSuggestionSelect:P,loading:v=!1,minQueryLength:W=0,hideOnScroll:_e=!1,renderSuggestionContent:E,getSuggestionText:ve,noResultsText:ge,loadingText:je,resultsCountText:Ce,footer:O,...I}=l,{getLabel:y}=Ye.useLabels(),Ne=o.useId(),k=x??Ne,d=S!==void 0,i=o.useMemo(()=>Array.isArray(S)?S:[],[S]),X=J!==void 0,[Re,Y]=o.useState(ye??""),f=J??Re,[K,g]=o.useState(!1),[c,B]=o.useState(null),Z=o.useRef([]),M=o.useRef(null),j=o.useRef(null),T=o.useRef(!1);o.useImperativeHandle(m,()=>j.current,[]);const $=f.trim().length>=W,z=!v&&i.length>0,Se=o.useMemo(()=>i.reduce((e,t,n)=>t.disabled?[...e,n]:e,[]),[i]),{refs:_,floatingStyles:Ie,context:ee}=C.useFloating({open:d&&K,onOpenChange:g,placement:"bottom-start",whileElementsMounted:Ze.autoUpdate,middleware:[D.offset($e),D.flip({padding:G}),D.shift({padding:G}),D.size({padding:G,apply({rects:e,elements:t,availableHeight:n}){t.floating.style.width=`${e.reference.width}px`,t.floating.style.setProperty("--tedi-search-panel-available-height",`${n}px`)}})]}),Te=C.useDismiss(ee,{ancestorScroll:_e}),we=C.useListNavigation(ee,{listRef:Z,activeIndex:c,onNavigate:B,virtual:!0,loop:!0,disabledIndices:Se}),{getReferenceProps:Ae,getFloatingProps:De,getItemProps:Le}=C.useInteractions([Te,we]);o.useEffect(()=>{var e;_.setPositionReference(((e=j.current)==null?void 0:e.inner)??null)},[_,d]);const te=`${k}-listbox`,ne=e=>`${k}-option-${e}`,p=d&&K&&$&&(v||z||f.trim().length>0),re=()=>M.current?Array.from(M.current.querySelectorAll(fe)):[],se=(e=!0)=>{var t,n;T.current=e,(n=(t=j.current)==null?void 0:t.input)==null||n.focus()},w=()=>{g(!1),B(null)},ae=e=>{e.disabled||(X||Y(et(e,ve)),P==null||P(e),w())},qe=e=>{X||Y(e),q==null||q(e),d&&(T.current=!1,B(null),g(e.trim().length>=W))},Fe=e=>{if(F==null||F(e),!!d){if(T.current){T.current=!1;return}$&&g(!0)}},Pe=e=>{e.key==="Enter"&&(u==null||u(f))},Ee=!v&&c!==null&&!((ue=i[c])!=null&&ue.disabled)?i[c]:void 0,Oe=()=>{var b,A;const e=(b=j.current)==null?void 0:b.input;if(!e)return;const t=_.floating.current,n=Array.from(document.body.querySelectorAll(fe)).filter(U=>!(t!=null&&t.contains(U)));(A=n[n.indexOf(e)+1])==null||A.focus()},ke=e=>{if(e.key==="Enter"){if(p&&c!==null&&i[c]&&!i[c].disabled){e.preventDefault(),ae(i[c]);return}u==null||u(f),g(!1);return}if(e.key==="Tab"&&!e.shiftKey&&p&&O){const t=re();t.length&&(e.preventDefault(),t[0].focus())}},Ke=e=>{if(!d||!K)return;const t=e.relatedTarget,n=_.floating.current;t&&(e.currentTarget.contains(t)||n!=null&&n.contains(t))||w()},Be=e=>{if(e.key==="Escape"){e.preventDefault(),w(),se();return}if(e.key!=="Tab")return;const t=re(),n=t.indexOf(e.target);e.shiftKey&&n===0?(e.preventDefault(),se()):!e.shiftKey&&n===t.length-1&&(e.preventDefault(),w(),Oe())},le=typeof L=="string"?{name:L}:L,Me={color:"secondary",...le,className:N.default(le.className,I.disabled&&s.default["tedi-search__icon--disabled"])},oe=d?Ae({role:"combobox","aria-autocomplete":"list","aria-expanded":p,"aria-controls":p&&z?te:void 0,"aria-activedescendant":p&&Ee&&c!==null?ne(c):void 0,onKeyDown:ke}):{role:"searchbox"},ie={...R,...oe};if(d){const e=R==null?void 0:R.onKeyDown,t=oe.onKeyDown;ie.onKeyDown=n=>{e==null||e(n),t==null||t(n)}}const ze={...I,ref:j,id:k,value:f,onChange:qe,onClear:be,onFocus:Fe,inputClassName:N.default(s.default["tedi-search__input"],a&&s.default["tedi-search__input--has-button"],xe),placeholder:h,isClearable:pe,input:ie,...a?{}:{icon:Me},...d?{}:{onKeyDown:Pe}},Ue=e=>{var t;(t=a==null?void 0:a.onClick)==null||t.call(a,e),u==null||u(f)},Ve=me||y("search"),ce=je??y("search.loading"),de=ge??y("search.no-results"),He=Ce??(e=>y("search.results-count",e)),Ge=p?v?ce:i.length>0?He(i.length):de:"",Qe=()=>v?r.jsxs("div",{className:s.default["tedi-search__panel-status"],children:[r.jsx(We.Spinner,{size:16}),r.jsx(Q.Text,{color:"tertiary",children:ce})]}):z?r.jsx("ul",{id:te,role:"listbox",className:s.default["tedi-search__panel-list"],children:i.map((e,t)=>{const n=c===t&&!e.disabled,b=typeof(e.label??e.value)=="string"?String(e.label??e.value):void 0,A=typeof e.description=="string"?e.description:void 0,U=!E&&b?[b,A].filter(Boolean).join(", "):void 0;return r.jsx("li",{id:ne(t),role:"option","aria-selected":n,"aria-disabled":e.disabled||void 0,"aria-label":U,ref:V=>{Z.current[t]=V},className:N.default(s.default["tedi-search__option"],{[s.default["tedi-search__option--active"]]:n,[s.default["tedi-search__option--disabled"]]:e.disabled}),...Le({onClick:()=>ae(e),onMouseDown:V=>V.preventDefault()}),children:E?E(e,{active:n,query:f}):r.jsxs(H.OptionContent,{disabled:e.disabled,layout:e.description!==void 0?"vertical":"horizontal",children:[r.jsx(H.OptionContent.Label,{children:b?tt(b,f):e.label??e.value}),e.description!==void 0&&r.jsx(H.OptionContent.Meta,{children:e.description})]})},e.value)})}):r.jsx("div",{className:s.default["tedi-search__panel-status"],children:r.jsx(Q.Text,{color:"tertiary",children:de})});return r.jsxs("div",{ref:_.setReference,className:N.default(s.default["tedi-search__wrapper"],I.size==="small"&&s.default["tedi-search__wrapper--small"],I.size==="large"&&s.default["tedi-search__wrapper--large"]),role:"search","aria-label":Ve,onBlur:Ke,children:[r.jsx(Xe.TextField,{...ze}),a&&r.jsx(Je.Button,{...a,onClick:Ue,className:N.default(s.default["tedi-search__button"],!a.children&&s.default["tedi-search__button--icon-only"],a.className),"aria-label":a["aria-label"]??(a.children?void 0:y("search")),children:a.children??y("search")}),d&&r.jsx("span",{"aria-live":"polite",role:"status",className:s.default["tedi-search__announcement"],children:Ge}),p&&r.jsx(C.FloatingPortal,{children:r.jsxs("div",{ref:_.setFloating,style:Ie,className:s.default["tedi-search__panel"],...De(),children:[Qe(),O&&r.jsx("div",{ref:M,className:s.default["tedi-search__footer"],onKeyDown:Be,children:O})]})})]})});he.displayName="Search";const nt=he;exports.Search=nt;

package/src/tedi/components/form/search/search.d.ts

@@ -2,9 +2,32 @@ import { default as React } from 'react';
 import { IconWithoutBackgroundProps } from '../../base/icon/icon';
 import { ButtonProps } from '../../buttons/button/button';
 import { TextFieldForwardRef, TextFieldProps } from '../textfield/textfield';
-export interface SearchProps extends Omit<TextFieldProps, 'isTextArea' | 'icon' | 'onKeyPress'> {
+export interface SearchSuggestion {
+    /**
+     * Stable value returned to `onSuggestionSelect` and used as the React key. For
+     * richer payloads keep a lookup keyed by this value on the consumer side.
+     */
+    value: string;
+    /**
+     * Visible label. Falls back to `value` when omitted.
+     */
+    label?: React.ReactNode;
+    /**
+     * Optional secondary line shown beneath the label (e.g. a code, category, or
+     * hint). Rendered as `OptionContent.Meta` in the default row layout; ignored
+     * when a custom `renderSuggestionContent` is supplied.
+     */
+    description?: React.ReactNode;
+    /**
+     * Renders the suggestion greyed out and skips it during keyboard navigation.
+     * @default false
+     */
+    disabled?: boolean;
+}
+export interface SearchProps extends Omit<TextFieldProps, 'isTextArea' | 'icon' | 'onIconClick' | 'iconButtonProps' | 'isArrowsHidden' | 'onKeyPress' | 'startSlot' | 'endSlot' | 'inputClassName'> {
     /**
      * Callback triggered when the search is executed (Enter key pressed or button clicked).
+     * In autocomplete mode it fires on Enter only when no suggestion is active — a free-text submit.
      */
     onSearch?: (value: string) => void;
     /**
@@ -20,5 +43,73 @@ export interface SearchProps extends Omit<TextFieldProps, 'isTextArea' | 'icon'
      * E.g., "Search products" or "Search site".
      */
     ariaLabel?: string;
+    /**
+     * Suggestions rendered in the popup. Providing this array (even empty) turns the
+     * field into an accessible combobox; leave it `undefined` for a plain search
+     * field. Filter / fetch these yourself in response to `onChange`; the component
+     * renders exactly what it is given.
+     */
+    suggestions?: SearchSuggestion[];
+    /**
+     * Fired when a suggestion is chosen (Enter on the active suggestion, or click). In
+     * controlled mode update `value` from here to reflect the picked label.
+     */
+    onSuggestionSelect?: (suggestion: SearchSuggestion) => void;
+    /**
+     * Shows a loading row in the popup instead of suggestions — use while an async
+     * request is in flight.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Minimum query length (after trimming) before the popup opens.
+     * @default 0
+     */
+    minQueryLength?: number;
+    /**
+     * Closes the suggestion popup when the page (or a scrollable ancestor) scrolls.
+     * Scrolling the suggestion list itself keeps the popup open.
+     * @default false
+     */
+    hideOnScroll?: boolean;
+    /**
+     * Custom suggestion renderer. Receives the suggestion plus its active state and
+     * the current query (handy for match highlighting).
+     */
+    renderSuggestionContent?: (suggestion: SearchSuggestion, state: {
+        active: boolean;
+        query: string;
+    }) => React.ReactNode;
+    /**
+     * Derives the input text to show after a suggestion is picked (uncontrolled mode).
+     * Defaults to the suggestion's string label, falling back to its `value`.
+     */
+    getSuggestionText?: (suggestion: SearchSuggestion) => string;
+    /**
+     * Text shown when there are no suggestions and it is not loading. Defaults to the
+     * localized `search.no-results` label.
+     */
+    noResultsText?: React.ReactNode;
+    /**
+     * Text shown in the loading row. Defaults to the localized `search.loading` label.
+     */
+    loadingText?: React.ReactNode;
+    /**
+     * Builds the politely announced live-region message stating how many suggestions
+     * are available. Defaults to the localized `search.results-count` label.
+     */
+    resultsCountText?: (count: number) => string;
+    /**
+     * Extra content pinned below the suggestions — fallback actions or a hint, for
+     * example. It shows whenever the popup is open, including the no-results state.
+     * `Tab` from the field moves focus into the footer's controls.
+     */
+    footer?: React.ReactNode;
+    /**
+     * Additional native attributes for the input element (e.g. `autoComplete`, `maxLength`).
+     * Narrowed to input attributes — a search field is always a single-line `<input>`.
+     */
+    input?: React.InputHTMLAttributes<HTMLInputElement>;
 }
 export declare const Search: React.ForwardRefExoticComponent<SearchProps & React.RefAttributes<TextFieldForwardRef>>;
+export default Search;

package/src/tedi/components/form/search/search.es.js

@@ -1,74 +1,270 @@
-import { jsxs as b, jsx as t } from "react/jsx-runtime";
-import i from "../../../../../external/classnames/index.es.js";
-import { forwardRef as g } from "react";
-import { Button as k } from "../../buttons/button/button.es.js";
-import { TextField as B } from "../textfield/textfield.es.js";
-import a from "./search.module.scss.es.js";
-import { useLabels as C } from "../../../providers/label-provider/use-labels.es.js";
-const L = g(
-  ({
-    placeholder: d,
-    isClearable: m = !0,
-    searchIcon: l = "search",
-    onSearch: s,
-    onChange: n,
-    button: e,
-    ariaLabel: p,
-    className: _,
-    input: h,
-    ...r
-  }, f) => {
-    const { getLabel: c } = C(), y = (v) => {
-      v.key === "Enter" && (s == null || s(r.value));
-    }, N = () => {
-      s == null || s(r.value);
-    }, o = typeof l == "string" ? { name: l } : l, u = {
-      color: "secondary",
-      ...o,
-      className: i(o.className, r.disabled && a["tedi-search__icon--disabled"])
-    }, w = {
-      ...r,
-      ref: f,
-      inputClassName: i(a["tedi-search__input"], e && a["tedi-search__input--has-button"], _),
-      placeholder: d,
-      isClearable: m,
-      onKeyDown: y,
-      onChange: n,
-      input: { ...h, role: "searchbox" },
-      ...e ? {} : { icon: u }
-    }, x = p || c("search");
-    return /* @__PURE__ */ b(
-      "div",
-      {
-        className: i(
-          a["tedi-search__wrapper"],
-          r.size === "small" && a["tedi-search__wrapper--small"],
-          r.size === "large" && a["tedi-search__wrapper--large"]
-        ),
-        role: "search",
-        "aria-label": x,
-        children: [
-          /* @__PURE__ */ t(B, { ...w }),
-          e && /* @__PURE__ */ t(
-            k,
-            {
-              ...e,
-              onClick: N,
-              className: i(
-                a["tedi-search__button"],
-                !e.children && a["tedi-search__button--icon-only"],
-                e.className
-              ),
-              "aria-label": e.children ? void 0 : c("search"),
-              children: e.children ?? c("search")
-            }
-          )
-        ]
+import { jsxs as C, jsx as s, Fragment as We } from "react/jsx-runtime";
+import { useFloating as Xe, useDismiss as Ye, useListNavigation as Ze, useInteractions as et, FloatingPortal as tt } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import g from "../../../../../external/classnames/index.es.js";
+import q, { forwardRef as rt, useMemo as pe, useState as H, useRef as T } from "react";
+import { Text as Q } from "../../base/typography/text/text.es.js";
+import { Button as nt } from "../../buttons/button/button.es.js";
+import { Spinner as ot } from "../../loaders/spinner/spinner.es.js";
+import { OptionContent as U } from "../../misc/option-content/option-content.es.js";
+import { TextField as st } from "../textfield/textfield.es.js";
+import n from "./search.module.scss.es.js";
+import { useLabels as at } from "../../../providers/label-provider/use-labels.es.js";
+import { autoUpdate as it } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
+import { offset as lt, flip as ct, shift as dt, size as ut } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
+const ft = 4, G = 8, he = [
+  "a[href]",
+  "area[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "iframe",
+  '[tabindex]:not([tabindex="-1"])'
+].join(","), pt = (a, m) => m ? m(a) : typeof a.label == "string" ? a.label : String(a.value), ht = (a, m) => {
+  const b = m.trim();
+  if (!b) return a;
+  const f = a.toLowerCase().indexOf(b.toLowerCase());
+  return f === -1 ? a : /* @__PURE__ */ C(We, { children: [
+    a.slice(0, f),
+    /* @__PURE__ */ s(Q, { element: "span", modifiers: "bold", children: a.slice(f, f + b.length) }),
+    a.slice(f + b.length)
+  ] });
+}, me = rt((a, m) => {
+  var fe;
+  const {
+    id: b,
+    placeholder: f,
+    isClearable: be = !0,
+    searchIcon: F = "search",
+    onSearch: d,
+    onChange: S,
+    onClear: ye,
+    onFocus: E,
+    button: o,
+    ariaLabel: _e,
+    className: ve,
+    input: I,
+    value: J,
+    defaultValue: xe,
+    suggestions: w,
+    onSuggestionSelect: P,
+    loading: v = !1,
+    minQueryLength: W = 0,
+    hideOnScroll: Ne = !1,
+    renderSuggestionContent: k,
+    getSuggestionText: ge,
+    noResultsText: Ce,
+    loadingText: Ie,
+    resultsCountText: we,
+    footer: K,
+    ...A
+  } = a, { getLabel: y } = at(), Ae = q.useId(), B = b ?? Ae, c = w !== void 0, i = pe(() => Array.isArray(w) ? w : [], [w]), X = J !== void 0, [De, Y] = H(xe ?? ""), u = J ?? De, [O, x] = H(!1), [l, M] = H(null), Z = T([]), z = T(null), N = T(null), D = T(!1);
+  q.useImperativeHandle(m, () => N.current, []);
+  const ee = u.trim().length >= W, V = !v && i.length > 0, Re = pe(
+    () => i.reduce((e, t, r) => t.disabled ? [...e, r] : e, []),
+    [i]
+  ), { refs: _, floatingStyles: Le, context: te } = Xe({
+    open: c && O,
+    onOpenChange: x,
+    placement: "bottom-start",
+    whileElementsMounted: it,
+    middleware: [
+      lt(ft),
+      ct({ padding: G }),
+      dt({ padding: G }),
+      ut({
+        padding: G,
+        apply({ rects: e, elements: t, availableHeight: r }) {
+          t.floating.style.width = `${e.reference.width}px`, t.floating.style.setProperty("--tedi-search-panel-available-height", `${r}px`);
+        }
+      })
+    ]
+  }), Te = Ye(te, { ancestorScroll: Ne }), Fe = Ze(te, {
+    listRef: Z,
+    activeIndex: l,
+    onNavigate: M,
+    virtual: !0,
+    loop: !0,
+    disabledIndices: Re
+  }), { getReferenceProps: Se, getFloatingProps: Ee, getItemProps: Pe } = et([Te, Fe]);
+  q.useEffect(() => {
+    var e;
+    _.setPositionReference(((e = N.current) == null ? void 0 : e.inner) ?? null);
+  }, [_, c]);
+  const re = `${B}-listbox`, ne = (e) => `${B}-option-${e}`, p = c && O && ee && (v || V || u.trim().length > 0), oe = () => z.current ? Array.from(z.current.querySelectorAll(he)) : [], se = (e = !0) => {
+    var t, r;
+    D.current = e, (r = (t = N.current) == null ? void 0 : t.input) == null || r.focus();
+  }, R = () => {
+    x(!1), M(null);
+  }, ae = (e) => {
+    e.disabled || (X || Y(pt(e, ge)), P == null || P(e), R());
+  }, ke = (e) => {
+    X || Y(e), S == null || S(e), c && (D.current = !1, M(null), x(e.trim().length >= W));
+  }, Ke = (e) => {
+    if (E == null || E(e), !!c) {
+      if (D.current) {
+        D.current = !1;
+        return;
       }
+      ee && x(!0);
+    }
+  }, Be = (e) => {
+    e.key === "Enter" && (d == null || d(u));
+  }, Oe = !v && l !== null && !((fe = i[l]) != null && fe.disabled) ? i[l] : void 0, Me = () => {
+    var h, L;
+    const e = (h = N.current) == null ? void 0 : h.input;
+    if (!e) return;
+    const t = _.floating.current, r = Array.from(document.body.querySelectorAll(he)).filter(
+      ($) => !(t != null && t.contains($))
     );
+    (L = r[r.indexOf(e) + 1]) == null || L.focus();
+  }, ze = (e) => {
+    if (e.key === "Enter") {
+      if (p && l !== null && i[l] && !i[l].disabled) {
+        e.preventDefault(), ae(i[l]);
+        return;
+      }
+      d == null || d(u), x(!1);
+      return;
+    }
+    if (e.key === "Tab" && !e.shiftKey && p && K) {
+      const t = oe();
+      t.length && (e.preventDefault(), t[0].focus());
+    }
+  }, Ve = (e) => {
+    if (!c || !O) return;
+    const t = e.relatedTarget, r = _.floating.current;
+    t && (e.currentTarget.contains(t) || r != null && r.contains(t)) || R();
+  }, $e = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault(), R(), se();
+      return;
+    }
+    if (e.key !== "Tab") return;
+    const t = oe(), r = t.indexOf(e.target);
+    e.shiftKey && r === 0 ? (e.preventDefault(), se()) : !e.shiftKey && r === t.length - 1 && (e.preventDefault(), R(), Me());
+  }, ie = typeof F == "string" ? { name: F } : F, je = {
+    color: "secondary",
+    ...ie,
+    className: g(ie.className, A.disabled && n["tedi-search__icon--disabled"])
+  }, le = c ? Se({
+    role: "combobox",
+    "aria-autocomplete": "list",
+    "aria-expanded": p,
+    "aria-controls": p && V ? re : void 0,
+    "aria-activedescendant": p && Oe && l !== null ? ne(l) : void 0,
+    onKeyDown: ze
+  }) : { role: "searchbox" }, ce = { ...I, ...le };
+  if (c) {
+    const e = I == null ? void 0 : I.onKeyDown, t = le.onKeyDown;
+    ce.onKeyDown = (r) => {
+      e == null || e(r), t == null || t(r);
+    };
   }
-);
-L.displayName = "Search";
+  const qe = {
+    ...A,
+    ref: N,
+    id: B,
+    value: u,
+    onChange: ke,
+    onClear: ye,
+    onFocus: Ke,
+    inputClassName: g(n["tedi-search__input"], o && n["tedi-search__input--has-button"], ve),
+    placeholder: f,
+    isClearable: be,
+    input: ce,
+    ...o ? {} : { icon: je },
+    ...c ? {} : { onKeyDown: Be }
+  }, He = (e) => {
+    var t;
+    (t = o == null ? void 0 : o.onClick) == null || t.call(o, e), d == null || d(u);
+  }, Ue = _e || y("search"), de = Ie ?? y("search.loading"), ue = Ce ?? y("search.no-results"), Ge = we ?? ((e) => y("search.results-count", e)), Qe = p ? v ? de : i.length > 0 ? Ge(i.length) : ue : "", Je = () => v ? /* @__PURE__ */ C("div", { className: n["tedi-search__panel-status"], children: [
+    /* @__PURE__ */ s(ot, { size: 16 }),
+    /* @__PURE__ */ s(Q, { color: "tertiary", children: de })
+  ] }) : V ? /* @__PURE__ */ s("ul", { id: re, role: "listbox", className: n["tedi-search__panel-list"], children: i.map((e, t) => {
+    const r = l === t && !e.disabled, h = typeof (e.label ?? e.value) == "string" ? String(e.label ?? e.value) : void 0, L = typeof e.description == "string" ? e.description : void 0, $ = !k && h ? [h, L].filter(Boolean).join(", ") : void 0;
+    return /* @__PURE__ */ s(
+      "li",
+      {
+        id: ne(t),
+        role: "option",
+        "aria-selected": r,
+        "aria-disabled": e.disabled || void 0,
+        "aria-label": $,
+        ref: (j) => {
+          Z.current[t] = j;
+        },
+        className: g(n["tedi-search__option"], {
+          [n["tedi-search__option--active"]]: r,
+          [n["tedi-search__option--disabled"]]: e.disabled
+        }),
+        ...Pe({
+          onClick: () => ae(e),
+          onMouseDown: (j) => j.preventDefault()
+        }),
+        children: k ? k(e, { active: r, query: u }) : /* @__PURE__ */ C(
+          U,
+          {
+            disabled: e.disabled,
+            layout: e.description !== void 0 ? "vertical" : "horizontal",
+            children: [
+              /* @__PURE__ */ s(U.Label, { children: h ? ht(h, u) : e.label ?? e.value }),
+              e.description !== void 0 && /* @__PURE__ */ s(U.Meta, { children: e.description })
+            ]
+          }
+        )
+      },
+      e.value
+    );
+  }) }) : /* @__PURE__ */ s("div", { className: n["tedi-search__panel-status"], children: /* @__PURE__ */ s(Q, { color: "tertiary", children: ue }) });
+  return /* @__PURE__ */ C(
+    "div",
+    {
+      ref: _.setReference,
+      className: g(
+        n["tedi-search__wrapper"],
+        A.size === "small" && n["tedi-search__wrapper--small"],
+        A.size === "large" && n["tedi-search__wrapper--large"]
+      ),
+      role: "search",
+      "aria-label": Ue,
+      onBlur: Ve,
+      children: [
+        /* @__PURE__ */ s(st, { ...qe }),
+        o && /* @__PURE__ */ s(
+          nt,
+          {
+            ...o,
+            onClick: He,
+            className: g(
+              n["tedi-search__button"],
+              !o.children && n["tedi-search__button--icon-only"],
+              o.className
+            ),
+            "aria-label": o["aria-label"] ?? (o.children ? void 0 : y("search")),
+            children: o.children ?? y("search")
+          }
+        ),
+        c && /* @__PURE__ */ s("span", { "aria-live": "polite", role: "status", className: n["tedi-search__announcement"], children: Qe }),
+        p && /* @__PURE__ */ s(tt, { children: /* @__PURE__ */ C(
+          "div",
+          {
+            ref: _.setFloating,
+            style: Le,
+            className: n["tedi-search__panel"],
+            ...Ee(),
+            children: [
+              Je(),
+              K && /* @__PURE__ */ s("div", { ref: z, className: n["tedi-search__footer"], onKeyDown: $e, children: K })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+});
+me.displayName = "Search";
+const Rt = me;
 export {
-  L as Search
+  Rt as Search
 };

package/src/tedi/components/form/search/search.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-search__wrapper":"tedi-search__wrapper-92d6f11f","tedi-search__input":"tedi-search__input-94d53b76","tedi-search__input--has-button":"tedi-search__input--has-button-d8e073e7","tedi-search__icon--disabled":"tedi-search__icon--disabled-2b492592","tedi-search__button":"tedi-search__button-cbb4df17","tedi-search__wrapper--small":"tedi-search__wrapper--small-7c104c6a","tedi-search__wrapper--large":"tedi-search__wrapper--large-b59e60d7","tedi-search__button--icon-only":"tedi-search__button--icon-only-cf897af5"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-search__wrapper":"tedi-search__wrapper-92d6f11f","tedi-search__input":"tedi-search__input-94d53b76","tedi-search__input--has-button":"tedi-search__input--has-button-d8e073e7","tedi-search__icon--disabled":"tedi-search__icon--disabled-2b492592","tedi-search__button":"tedi-search__button-cbb4df17","tedi-search__wrapper--small":"tedi-search__wrapper--small-7c104c6a","tedi-search__wrapper--large":"tedi-search__wrapper--large-b59e60d7","tedi-search__button--icon-only":"tedi-search__button--icon-only-cf897af5","tedi-search__panel":"tedi-search__panel-7a3fa5f0","tedi-search__panel-list":"tedi-search__panel-list-78174923","tedi-search__option":"tedi-search__option-a57e9a32","tedi-search__option--active":"tedi-search__option--active-4831d2e9","tedi-search__option--disabled":"tedi-search__option--disabled-c0308fc9","tedi-search__panel-status":"tedi-search__panel-status-1f8248ab","tedi-search__footer":"tedi-search__footer-d45973c7","tedi-search__announcement":"tedi-search__announcement-fbcbe856"};exports.default=e;

package/src/tedi/components/form/search/search.module.scss.es.js

@@ -6,7 +6,15 @@ const e = {
   "tedi-search__button": "tedi-search__button-cbb4df17",
   "tedi-search__wrapper--small": "tedi-search__wrapper--small-7c104c6a",
   "tedi-search__wrapper--large": "tedi-search__wrapper--large-b59e60d7",
-  "tedi-search__button--icon-only": "tedi-search__button--icon-only-cf897af5"
+  "tedi-search__button--icon-only": "tedi-search__button--icon-only-cf897af5",
+  "tedi-search__panel": "tedi-search__panel-7a3fa5f0",
+  "tedi-search__panel-list": "tedi-search__panel-list-78174923",
+  "tedi-search__option": "tedi-search__option-a57e9a32",
+  "tedi-search__option--active": "tedi-search__option--active-4831d2e9",
+  "tedi-search__option--disabled": "tedi-search__option--disabled-c0308fc9",
+  "tedi-search__panel-status": "tedi-search__panel-status-1f8248ab",
+  "tedi-search__footer": "tedi-search__footer-d45973c7",
+  "tedi-search__announcement": "tedi-search__announcement-fbcbe856"
 };
 export {
   e as default

package/src/tedi/components/overlays/dropdown/dropdown.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),e=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),A=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),v=require("./dropdown.module.scss.cjs.js"),z=require("./dropdown-content/dropdown-content.cjs.js"),G=require("./dropdown-context.cjs.js"),J=require("./dropdown-helpers.cjs.js"),K=require("./dropdown-item/dropdown-item.cjs.js"),Q=require("./dropdown-separator/dropdown-separator.cjs.js"),V=require("./dropdown-trigger/dropdown-trigger.cjs.js"),X=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Y=require("../../../providers/label-provider/use-labels.cjs.js"),Z=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),h=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),ee=4,a=x=>{var O;const{getCurrentBreakpointProps:F}=X.useBreakpointProps(x.defaultServerBreakpoint),{children:P,modal:q=!1,divided:R=!1,width:b="auto",variant:p="default",open:f,defaultOpen:y=!1,onOpenChange:l,defaultActiveIndex:n,placement:g="bottom-start",maxHeight:c,className:j}=F(x),{getLabel:N}=Y.useLabels(),_=e.useFloatingNodeId(),D=t.useRef([]),[u,m]=t.useState(n??null),[w,k]=t.useState(null),[B,T]=t.useState(y),o=f??B;t.useEffect(()=>{o||m(n??null)},[o,n]);const I=t.useCallback(i=>{f===void 0&&T(i),l==null||l(i)},[f,l]),U=e.useFloating({nodeId:_,open:o,placement:g,onOpenChange:I,middleware:[h.offset(ee),h.flip(),h.shift()],whileElementsMounted:Z.autoUpdate}),{context:r,refs:s,x:H,y:L,strategy:M}=U,C=e.useInteractions([e.useClick(r),e.useRole(r,{role:"menu"}),e.useDismiss(r),e.useListNavigation(r,{listRef:D,activeIndex:u,onNavigate:m,loop:!0,selectedIndex:n??null,focusItemOnOpen:n!==null?!0:"auto"})]),W={open:o,setOpen:I,refs:s,listItemsRef:D,activeIndex:u,setActiveIndex:m,placement:g,content:w,setContent:k,divided:R,variant:p,...C},E=(O=s.reference.current)==null?void 0:O.getBoundingClientRect().width,$=t.useMemo(()=>{const i=s.reference.current;if(!i)return;const S=i.offsetParent;if(S)return S.getBoundingClientRect().width},[s.reference.current]);return d.jsxs(G.DropdownContext.Provider,{value:W,children:[P,d.jsx(e.FloatingPortal,{children:o&&d.jsx(e.FloatingFocusManager,{context:r,modal:q,visuallyHiddenDismiss:q?N("close"):!1,children:d.jsx("div",{...C.getFloatingProps({ref:s.setFloating,className:A.default(v.default["tedi-dropdown"],{[v.default[`tedi-dropdown--${p}`]]:p==="tree"},j),style:{position:M,left:H??0,top:L??0,width:J.resolveDropdownWidth(b,E,$)},role:"menu","aria-orientation":"vertical","aria-activedescendant":u!==null?`dropdown-item-${u}`:void 0}),"data-placement":g,"data-state":o?"open":"closed",children:c!==void 0?d.jsx("div",{className:v.default["tedi-dropdown__scroll"],style:{maxHeight:typeof c=="number"?`${c}px`:c},children:w}):w})})})]})};a.Trigger=V.DropdownTrigger;a.Content=z.DropdownContent;a.Item=K.DropdownItem;a.Separator=Q.DropdownSeparator;exports.Dropdown=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),e=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),A=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),v=require("./dropdown.module.scss.cjs.js"),z=require("./dropdown-content/dropdown-content.cjs.js"),G=require("./dropdown-context.cjs.js"),J=require("./dropdown-helpers.cjs.js"),K=require("./dropdown-item/dropdown-item.cjs.js"),Q=require("./dropdown-separator/dropdown-separator.cjs.js"),V=require("./dropdown-trigger/dropdown-trigger.cjs.js"),X=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Y=require("../../../providers/label-provider/use-labels.cjs.js"),Z=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),x=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),ee=4,a=h=>{var O;const{getCurrentBreakpointProps:b}=X.useBreakpointProps(h.defaultServerBreakpoint),{children:F,modal:q=!1,divided:P=!1,width:R="auto",variant:p="default",open:f,defaultOpen:y=!1,onOpenChange:l,defaultActiveIndex:n,placement:g="bottom-start",maxHeight:c,className:j}=b(h),{getLabel:N}=Y.useLabels(),_=e.useFloatingNodeId(),D=t.useRef([]),[u,m]=t.useState(n??null),[w,k]=t.useState(null),[B,T]=t.useState(y),o=f??B;t.useEffect(()=>{o||m(n??null)},[o,n]);const I=t.useCallback(i=>{f===void 0&&T(i),l==null||l(i)},[f,l]),U=e.useFloating({nodeId:_,open:o,placement:g,onOpenChange:I,middleware:[x.offset(ee),x.flip(),x.shift()],whileElementsMounted:Z.autoUpdate}),{context:r,refs:s,x:H,y:L,strategy:M}=U,C=e.useInteractions([e.useClick(r),e.useRole(r,{role:"menu"}),e.useDismiss(r),e.useListNavigation(r,{listRef:D,activeIndex:u,onNavigate:m,loop:!0,selectedIndex:n??null,focusItemOnOpen:n!==null?!0:"auto"})]),W={open:o,setOpen:I,refs:s,listItemsRef:D,activeIndex:u,setActiveIndex:m,placement:g,content:w,setContent:k,divided:P,variant:p,...C},E=(O=s.reference.current)==null?void 0:O.getBoundingClientRect().width,$=t.useMemo(()=>{const i=s.reference.current;if(!i)return;const S=i.offsetParent;if(S)return S.getBoundingClientRect().width},[s.reference.current]);return d.jsxs(G.DropdownContext.Provider,{value:W,children:[F,d.jsx(e.FloatingPortal,{children:o&&d.jsx(e.FloatingFocusManager,{context:r,modal:q,visuallyHiddenDismiss:q?N("close"):!1,children:d.jsx("div",{...C.getFloatingProps({ref:s.setFloating,className:A.default(v.default["tedi-dropdown"],{[v.default[`tedi-dropdown--${p}`]]:p==="tree"},j),style:{position:M,left:H??0,top:L??0,width:J.resolveDropdownWidth(R,E,$)},role:"menu","aria-orientation":"vertical","aria-activedescendant":u!==null?`dropdown-item-${u}`:void 0}),"data-placement":g,"data-state":o?"open":"closed",children:c!==void 0?d.jsx("div",{className:v.default["tedi-dropdown__scroll"],role:"group",tabIndex:0,style:{maxHeight:typeof c=="number"?`${c}px`:c},children:w}):w})})})]})};a.Trigger=V.DropdownTrigger;a.Content=z.DropdownContent;a.Item=K.DropdownItem;a.Separator=Q.DropdownSeparator;exports.Dropdown=a;

package/src/tedi/components/overlays/dropdown/dropdown.es.js

@@ -32,7 +32,7 @@ const me = 4, c = (h) => {
   e.useEffect(() => {
     t || f(o ?? null);
   }, [t, o]);
-  const D = e.useCallback(
+  const I = e.useCallback(
     (i) => {
       p === void 0 && W(i), s == null || s(i);
     },
@@ -41,10 +41,10 @@ const me = 4, c = (h) => {
     nodeId: k,
     open: t,
     placement: u,
-    onOpenChange: D,
+    onOpenChange: I,
     middleware: [le(me), de(), ce()],
     whileElementsMounted: ae
-  }), { context: n, refs: r, x: H, y: L, strategy: M } = E, I = z([
+  }), { context: n, refs: r, x: H, y: L, strategy: M } = E, D = z([
     G(n),
     J(n, { role: "menu" }),
     K(n),
@@ -58,7 +58,7 @@ const me = 4, c = (h) => {
     })
   ]), T = {
     open: t,
-    setOpen: D,
+    setOpen: I,
     refs: r,
     listItemsRef: x,
     activeIndex: l,
@@ -68,7 +68,7 @@ const me = 4, c = (h) => {
     setContent: B,
     divided: R,
     variant: m,
-    ...I
+    ...D
   }, $ = (O = r.reference.current) == null ? void 0 : O.getBoundingClientRect().width, j = e.useMemo(() => {
     const i = r.reference.current;
     if (!i) return;
@@ -87,7 +87,7 @@ const me = 4, c = (h) => {
         children: /* @__PURE__ */ d(
           "div",
           {
-            ...I.getFloatingProps({
+            ...D.getFloatingProps({
               ref: r.setFloating,
               className: Y(
                 v["tedi-dropdown"],
@@ -110,6 +110,8 @@ const me = 4, c = (h) => {
               "div",
               {
                 className: v["tedi-dropdown__scroll"],
+                role: "group",
+                tabIndex: 0,
                 style: { maxHeight: typeof a == "number" ? `${a}px` : a },
                 children: g
               }

package/src/tedi/index.d.ts

@@ -48,7 +48,7 @@ export * from './components/form/textarea/textarea';
 export * from './components/form/number-field/number-field';
 export * from './components/form/toggle/toggle';
 export * from './components/form/feedback-text/feedback-text';
-export * from './components/form/search/search';
+export * from './components/form/search';
 export * from './components/form/radio/radio';
 export * from './components/form/choice-group';
 export * from './components/form/file-upload/file-upload';