@tedi-design-system/react 19.1.0-rc.2 → 19.1.0-rc.20

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/form/slider/slider.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),m=require("../../../../../external/classnames/index.cjs.js"),e=require("react"),ne=require("../../overlays/tooltip/tooltip.cjs.js"),de=require("../../overlays/tooltip/tooltip-content.cjs.js"),oe=require("../../overlays/tooltip/tooltip-trigger.cjs.js"),ue=require("../feedback-text/feedback-text.cjs.js"),ce=require("../form-label/form-label.cjs.js"),t=require("./slider.module.scss.cjs.js"),fe=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),F=e.forwardRef((h,M)=>{const{getCurrentBreakpointProps:V}=fe.useBreakpointProps(h.defaultServerBreakpoint),{id:E,name:P,label:x,hideLabel:R,required:_,min:l=0,max:d=100,step:D=1,value:c,defaultValue:$,onChange:o,disabled:s=!1,invalid:H=!1,minLabel:f,maxLabel:O,showCurrentValue:p=!1,valueFormatter:k,tooltip:U=!0,addonRight:j,helper:r,className:z,"aria-label":A,"aria-labelledby":G,"aria-valuetext":J}=V(h),K=e.useId(),b=E??`tedi-slider-${K}`,w=r?r.id??`${b}-helper`:void 0,[Q,W]=e.useState($??l),u=Math.min(d,Math.max(l,c??Q)),[X,L]=e.useState(!1),[Y,N]=e.useState(!1),[i,C]=e.useState(!1),S=!!U&&!s,Z=S&&(X||Y||i),ee=e.useCallback(()=>L(!0),[]),ae=e.useCallback(()=>L(!1),[]),te=e.useCallback(()=>N(!0),[]),re=e.useCallback(()=>N(!1),[]),T=e.useRef(null),n=e.useCallback(()=>{T.current=null,C(!1)},[]);e.useEffect(()=>{if(i)return window.addEventListener("pointerup",n),window.addEventListener("pointercancel",n),()=>{window.removeEventListener("pointerup",n),window.removeEventListener("pointercancel",n)}},[i,n]);const le=e.useCallback(g=>{s||(T.current=g.pointerId,C(!0))},[s]),se=e.useCallback(g=>{const B=Number(g.target.value);c===void 0&&W(B),o==null||o(B)},[o,c]),q=H||(r==null?void 0:r.type)==="error",I=d===l?0:(u-l)/(d-l)*100,y=k?k(u):u,v=p?y:O,ie=m.default(t.default["tedi-slider"],{[t.default["tedi-slider--disabled"]]:s,[t.default["tedi-slider--invalid"]]:q,[t.default["tedi-slider--dragging"]]:i&&!s},z);return a.jsxs("div",{"data-name":"slider",className:ie,children:[x&&a.jsx(ce.FormLabel,{id:b,label:x,required:_,hideLabel:R}),a.jsxs("div",{className:t.default["tedi-slider__container"],children:[a.jsxs("div",{className:t.default["tedi-slider__track-row"],children:[f!=null&&a.jsx("span",{className:t.default["tedi-slider__range-label"],"aria-hidden":"true",children:f}),a.jsxs("div",{className:t.default["tedi-slider__track"],style:{"--tedi-slider-progress":`${I}%`,"--tedi-slider-progress-ratio":`${I/100}`},children:[a.jsx("input",{ref:M,id:b,name:P,type:"range",min:l,max:d,step:D,value:u,disabled:s,required:_,"aria-invalid":q?"true":void 0,"aria-describedby":w,"aria-label":A,"aria-labelledby":G,"aria-valuetext":J,onChange:se,onMouseEnter:ee,onMouseLeave:ae,onPointerDown:le,onFocus:te,onBlur:re,className:m.default(t.default["tedi-slider__input"],{[t.default["tedi-slider__input--dragging"]]:i})}),S&&a.jsxs(ne.Tooltip,{open:Z,onToggle:()=>{},focusManager:{returnFocus:!1,initialFocus:-1},placement:"top",trackReferencePosition:!0,children:[a.jsx(oe.TooltipTrigger,{children:a.jsx("span",{className:t.default["tedi-slider__thumb-anchor"],"aria-hidden":"true",tabIndex:-1})}),a.jsx(de.TooltipContent,{children:y})]})]}),v!=null&&a.jsx("span",{className:t.default["tedi-slider__range-label"],"aria-hidden":p?void 0:"true","aria-live":p?"polite":void 0,children:v})]}),j&&a.jsx("div",{className:t.default["tedi-slider__addon"],children:j})]}),r&&a.jsx(ue.FeedbackText,{...r,id:w,className:m.default(t.default["tedi-slider__feedback"],r.className)})]})});F.displayName="Slider";exports.Slider=F;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),B=require("../../../../../external/classnames/index.cjs.js"),e=require("react"),ne=require("../../overlays/tooltip/tooltip.cjs.js"),de=require("../../overlays/tooltip/tooltip-content.cjs.js"),oe=require("../../overlays/tooltip/tooltip-trigger.cjs.js"),ue=require("../feedback-text/feedback-text.cjs.js"),ce=require("../form-label/form-label.cjs.js"),t=require("./slider.module.scss.cjs.js"),pe=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),F=e.forwardRef((m,M)=>{const{getCurrentBreakpointProps:V}=pe.useBreakpointProps(m.defaultServerBreakpoint),{id:E,name:P,label:h,hideLabel:R,required:x,min:l=0,max:d=100,step:D=1,value:c,defaultValue:$,onChange:o,disabled:i=!1,invalid:H=!1,minLabel:p,maxLabel:O,showCurrentValue:f=!1,valueFormatter:_,tooltip:U=!0,addonRight:j,helper:r,className:z,"aria-label":A,"aria-labelledby":G,"aria-valuetext":J}=V(m),K=e.useId(),v=E??`tedi-slider-${K}`,k=r?r.id??`${v}-helper`:void 0,[Q,W]=e.useState($??l),u=Math.min(d,Math.max(l,c??Q)),[X,w]=e.useState(!1),[Y,L]=e.useState(!1),[s,C]=e.useState(!1),N=!!U&&!i,Z=N&&(X||Y||s),ee=e.useCallback(()=>w(!0),[]),ae=e.useCallback(()=>w(!1),[]),te=e.useCallback(()=>L(!0),[]),re=e.useCallback(()=>L(!1),[]),S=e.useRef(null),n=e.useCallback(()=>{S.current=null,C(!1)},[]);e.useEffect(()=>{if(s)return window.addEventListener("pointerup",n),window.addEventListener("pointercancel",n),()=>{window.removeEventListener("pointerup",n),window.removeEventListener("pointercancel",n)}},[s,n]);const le=e.useCallback(g=>{i||(S.current=g.pointerId,C(!0))},[i]),ie=e.useCallback(g=>{const y=Number(g.target.value);c===void 0&&W(y),o==null||o(y)},[o,c]),T=H||(r==null?void 0:r.type)==="error",q=d===l?0:(u-l)/(d-l)*100,I=_?_(u):u,b=f?I:O,se=B.default(t.default["tedi-slider"],{[t.default["tedi-slider--disabled"]]:i,[t.default["tedi-slider--invalid"]]:T,[t.default["tedi-slider--dragging"]]:s&&!i},z);return a.jsxs("div",{"data-name":"slider",className:se,children:[h&&a.jsx(ce.FormLabel,{id:v,label:h,required:x,hideLabel:R}),a.jsxs("div",{className:t.default["tedi-slider__container"],children:[a.jsxs("div",{className:t.default["tedi-slider__track-row"],children:[p!=null&&a.jsx("span",{className:t.default["tedi-slider__range-label"],"aria-hidden":"true",children:p}),a.jsxs("div",{className:t.default["tedi-slider__track"],style:{"--tedi-slider-progress":`${q}%`,"--tedi-slider-progress-ratio":`${q/100}`},children:[a.jsx("input",{ref:M,id:v,name:P,type:"range",min:l,max:d,step:D,value:u,disabled:i,required:x,"aria-invalid":T?"true":void 0,"aria-describedby":k,"aria-label":A,"aria-labelledby":G,"aria-valuetext":J,onChange:ie,onMouseEnter:ee,onMouseLeave:ae,onPointerDown:le,onFocus:te,onBlur:re,className:B.default(t.default["tedi-slider__input"],{[t.default["tedi-slider__input--dragging"]]:s})}),N&&a.jsxs(ne.Tooltip,{open:Z,onToggle:()=>{},focusManager:{returnFocus:!1,initialFocus:-1},placement:"top",trackReferencePosition:!0,children:[a.jsx(oe.TooltipTrigger,{children:a.jsx("span",{className:t.default["tedi-slider__thumb-anchor"],"aria-hidden":"true",tabIndex:-1})}),a.jsx(de.TooltipContent,{children:I})]})]}),b!=null&&a.jsx("span",{className:t.default["tedi-slider__range-label"],"aria-hidden":f?void 0:"true","aria-live":f?"polite":void 0,children:b})]}),j&&a.jsx("div",{className:t.default["tedi-slider__addon"],children:j})]}),r&&a.jsx(ue.FeedbackText,{...r,id:k})]})});F.displayName="Slider";exports.Slider=F;