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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "19.1.0-rc.2",
+  "version": "19.1.0-rc.20",
   "description": "TEDI Design System React component library — accessible, reusable UI components. Docs & live examples: https://storybook.tedi.ee/react/rc/",
   "type": "module",
   "sideEffects": false,
@@ -47,7 +47,7 @@
     "@mui/material": "^5.15.13",
     "@mui/x-date-pickers": "^5.0.20",
     "@tanstack/react-table": "^8.13.2",
-    "@tedi-design-system/core": "^6.8.1",
+    "@tedi-design-system/core": "^6.9.0",
     "classnames": "^2.5.1",
     "draft-js": "^0.11.7",
     "draftjs-md-converter": "^1.5.2",
@@ -106,7 +106,7 @@
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "chromatic": "^13.3.4",
+    "chromatic": "^18.7.4",
     "concurrently": "^10.0.3",
     "dompurify": "^3.4.12",
     "eslint": "8.48.0",

package/src/community/components/accordion/accordion.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),S=require("../../../../external/classnames/index.cjs.js"),i=require("react"),y=require("./accordion.module.scss.cjs.js"),A=require("../../../tedi/components/layout/vertical-spacing/vertical-spacing.cjs.js"),s=i.createContext({isOpen:()=>!0,onToggle:()=>null}),C=c=>{const{children:u,className:l,openItem:n,gutter:a=.5,onToggleItem:t,defaultOpenItem:d=[],...m}=c,f=n||d,[g,p]=i.useState(f),x=(e=c.openItem)=>!!t&&typeof e<"u",I=e=>{if(t)return t(e);x(n)||p(o=>o.includes(e)?o.filter(q=>q!==e):[...o,e])},O=()=>t&&typeof n<"u"?n:g,j=e=>O().includes(e);return r.jsx(s.Provider,{value:{isOpen:j,onToggle:I},children:r.jsx("div",{"data-name":"accordion",...m,className:S.default(y.default.accordion,l),children:r.jsx(A.VerticalSpacing,{size:a,children:u})})})};exports.Accordion=C;exports.AccordionContext=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),O=require("../../../../external/classnames/index.cjs.js"),i=require("react"),j=require("../../../tedi/helpers/warn-deprecated/warn-deprecated.cjs.js"),C=require("./accordion.module.scss.cjs.js"),S=require("../../../tedi/components/layout/vertical-spacing/vertical-spacing.cjs.js"),s=i.createContext({isOpen:()=>!0,onToggle:()=>null}),T=c=>{j.warnDeprecated("Community Accordion","Use the TEDI-Ready `Accordion` from `@tedi-design-system/react/tedi` instead.");const{children:d,className:u,openItem:t,gutter:a=.5,onToggleItem:n,defaultOpenItem:l=[],...m}=c,f=t||l,[g,p]=i.useState(f),x=(e=c.openItem)=>!!n&&typeof e<"u",I=e=>{if(n)return n(e);x(t)||p(o=>o.includes(e)?o.filter(A=>A!==e):[...o,e])},y=()=>n&&typeof t<"u"?t:g,q=e=>y().includes(e);return r.jsx(s.Provider,{value:{isOpen:q,onToggle:I},children:r.jsx("div",{"data-name":"accordion",...m,className:O.default(C.default.accordion,u),children:r.jsx(S.VerticalSpacing,{size:a,children:d})})})};exports.Accordion=T;exports.AccordionContext=s;

package/src/community/components/accordion/accordion.es.js

@@ -1,20 +1,25 @@
 import { jsx as r } from "react/jsx-runtime";
-import y from "../../../../external/classnames/index.es.js";
-import c from "react";
+import x from "../../../../external/classnames/index.es.js";
+import s from "react";
+import { warnDeprecated as A } from "../../../tedi/helpers/warn-deprecated/warn-deprecated.es.js";
 import C from "./accordion.module.scss.es.js";
-import { VerticalSpacing as N } from "../../../tedi/components/layout/vertical-spacing/vertical-spacing.es.js";
-const T = c.createContext({
+import { VerticalSpacing as T } from "../../../tedi/components/layout/vertical-spacing/vertical-spacing.es.js";
+const N = s.createContext({
   isOpen: () => !0,
   onToggle: () => null
-}), v = (s) => {
-  const { children: i, className: l, openItem: t, gutter: m = 0.5, onToggleItem: n, defaultOpenItem: a = [], ...u } = s, d = t || a, [f, p] = c.useState(d), g = (e = s.openItem) => !!n && typeof e < "u", I = (e) => {
+}), v = (c) => {
+  A(
+    "Community Accordion",
+    "Use the TEDI-Ready `Accordion` from `@tedi-design-system/react/tedi` instead."
+  );
+  const { children: i, className: m, openItem: t, gutter: a = 0.5, onToggleItem: n, defaultOpenItem: d = [], ...l } = c, u = t || d, [f, p] = s.useState(u), g = (e = c.openItem) => !!n && typeof e < "u", I = (e) => {
     if (n)
       return n(e);
     g(t) || p((o) => o.includes(e) ? o.filter((h) => h !== e) : [...o, e]);
-  }, O = () => n && typeof t < "u" ? t : f, x = (e) => O().includes(e);
-  return /* @__PURE__ */ r(T.Provider, { value: { isOpen: x, onToggle: I }, children: /* @__PURE__ */ r("div", { "data-name": "accordion", ...u, className: y(C.accordion, l), children: /* @__PURE__ */ r(N, { size: m, children: i }) }) });
+  }, y = () => n && typeof t < "u" ? t : f, O = (e) => y().includes(e);
+  return /* @__PURE__ */ r(N.Provider, { value: { isOpen: O, onToggle: I }, children: /* @__PURE__ */ r("div", { "data-name": "accordion", ...l, className: x(C.accordion, m), children: /* @__PURE__ */ r(T, { size: a, children: i }) }) });
 };
 export {
   v as Accordion,
-  T as AccordionContext
+  N as AccordionContext
 };

package/src/community/components/card/card-notification/card-notification.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),d=require("../../../../../external/classnames/index.cjs.js"),s=require("../../../../tedi/components/notifications/alert/alert.cjs.js"),l=require("../card-content/card-content.cjs.js"),e=require("./card-notification.module.scss.cjs.js"),u=n=>{const{children:i,padding:a,className:r,...o}=n,c=d.default(e.default.card__notification,r);return t.jsx(l.CardContent,{"data-name":"card-notification",padding:a,className:e.default["card__notification-content"],children:t.jsx(s.Alert,{className:c,...o,children:i})})};exports.CardNotification=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),d=require("../../../../../external/classnames/index.cjs.js"),s=require("../../../../tedi/components/notifications/alert/alert.cjs.js"),u=require("../../../../tedi/helpers/warn-deprecated/warn-deprecated.cjs.js"),l=require("../card-content/card-content.cjs.js"),e=require("./card-notification.module.scss.cjs.js"),f=i=>{u.warnDeprecated("Community CardNotification","Use `CardNotification` from `@tedi-design-system/react/tedi` instead.");const{children:a,padding:n,className:r,...o}=i,c=d.default(e.default.card__notification,r);return t.jsx(l.CardContent,{"data-name":"card-notification",padding:n,className:e.default["card__notification-content"],children:t.jsx(s.Alert,{className:c,...o,children:a})})};exports.CardNotification=f;

package/src/community/components/card/card-notification/card-notification.es.js

@@ -1,12 +1,14 @@
 import { jsx as t } from "react/jsx-runtime";
-import s from "../../../../../external/classnames/index.es.js";
-import { Alert as e } from "../../../../tedi/components/notifications/alert/alert.es.js";
-import { CardContent as d } from "../card-content/card-content.es.js";
-import o from "./card-notification.module.scss.es.js";
-const C = (r) => {
-  const { children: a, padding: i, className: n, ...c } = r, m = s(o.card__notification, n);
-  return /* @__PURE__ */ t(d, { "data-name": "card-notification", padding: i, className: o["card__notification-content"], children: /* @__PURE__ */ t(e, { className: m, ...c, children: a }) });
+import m from "../../../../../external/classnames/index.es.js";
+import { Alert as s } from "../../../../tedi/components/notifications/alert/alert.es.js";
+import { warnDeprecated as d } from "../../../../tedi/helpers/warn-deprecated/warn-deprecated.es.js";
+import { CardContent as f } from "../card-content/card-content.es.js";
+import i from "./card-notification.module.scss.es.js";
+const g = (o) => {
+  d("Community CardNotification", "Use `CardNotification` from `@tedi-design-system/react/tedi` instead.");
+  const { children: r, padding: a, className: n, ...e } = o, c = m(i.card__notification, n);
+  return /* @__PURE__ */ t(f, { "data-name": "card-notification", padding: a, className: i["card__notification-content"], children: /* @__PURE__ */ t(s, { className: c, ...e, children: r }) });
 };
 export {
-  C as CardNotification
+  g as CardNotification
 };

package/src/community/components/dock-panel/dock-panel.cjs.js

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),$=require("../../../../external/classnames/index.cjs.js"),s=require("react"),le=require("../../../tedi/components/base/typography/heading/heading.cjs.js"),B=require("../../../tedi/components/buttons/button/button.cjs.js"),n=require("./dock-panel.module.scss.cjs.js"),se=["xs","sm","md","lg","xl"],ae={xs:"25%",sm:"35%",md:"50%",lg:"65%",xl:"80%"},de=o=>typeof o=="string"&&se.includes(o),H=o=>de(o)?ae[o]:typeof o=="number"?`${o}px`:o,z=s.forwardRef((o,p)=>{const{title:h,children:g,labels:d,placement:O="right",size:v="default",collapsed:N,defaultCollapsed:M=!1,onCollapsedChange:_,onClose:b,headerActions:k,footer:y,width:E,height:j,maxHeight:i,headingElement:G,id:W,className:J,style:K,...D}=o,Q=s.useId(),x=W??`tedi-dock-panel-${Q}`,I=`${x}-title`,R=`${x}-body`,[U,V]=s.useState(M),X=N!==void 0,l=N??U,r=s.useRef(null),u=s.useRef(null),C=s.useRef(null),f=s.useRef(!1);s.useEffect(()=>{var T;const e=(T=r.current)==null?void 0:T.ownerDocument;if(!e)return;const c=()=>{var q,w,A;const a=e.activeElement,L=!!(a&&((q=u.current)!=null&&q.contains(a)||(w=C.current)!=null&&w.contains(a)));(L||a!==e.body||!((A=u.current)!=null&&A.hidden))&&(f.current=L)},S=()=>{var a;(a=u.current)!=null&&a.hidden||(f.current=!1)};return c(),e.addEventListener("focusin",c),e.addEventListener("focusout",S),()=>{e.removeEventListener("focusin",c),e.removeEventListener("focusout",S)}},[]),s.useEffect(()=>{var e;l&&f.current&&((e=r.current)==null||e.focus(),f.current=!1)},[l]);const Y=()=>{var c;const e=!l;(c=r.current)==null||c.focus(),X||V(e),_==null||_(e)},m={...K};E!==void 0&&(m["--dock-panel-width"]=H(E)),j!==void 0&&(m["--dock-panel-height"]=H(j)),i!==void 0&&(m["--dock-panel-max-height"]=typeof i=="number"?`${i}px`:i);const Z=G??(v==="small"?"h4":"h3"),ee=l?"small":void 0,P=l?d.expand:d.collapse,te=l?"zoom_out_map":"zoom_in_map",ne=k!=null,oe=y!=null;return t.jsxs("div",{...D,ref:p,id:x,role:"region","aria-labelledby":D["aria-labelledby"]??I,"data-dock-panel":"","data-placement":O,"data-size":v,"data-collapsed":l,className:$.default(n.default["tedi-dock-panel"],J),style:m,children:[t.jsxs("div",{className:n.default["tedi-dock-panel__header"],children:[t.jsx(le.Heading,{id:I,element:Z,modifiers:ee,className:n.default["tedi-dock-panel__title"],children:h}),ne&&t.jsx("div",{ref:C,className:n.default["tedi-dock-panel__header-actions"],hidden:l,children:k}),t.jsxs("div",{className:n.default["tedi-dock-panel__controls"],children:[t.jsx(B.Button,{ref:r,className:n.default["tedi-dock-panel__toggle"],type:"button",visualType:"neutral",icon:te,title:P,"aria-expanded":!l,"aria-controls":R,onClick:Y,children:P}),b&&t.jsx(B.Button,{className:n.default["tedi-dock-panel__close"],type:"button",visualType:"neutral",icon:"close",title:d.close,onClick:b,children:d.close})]})]}),t.jsxs("div",{ref:u,id:R,className:n.default["tedi-dock-panel__body"],hidden:l,children:[t.jsx("div",{className:n.default["tedi-dock-panel__content"],children:t.jsx("div",{className:n.default["tedi-dock-panel__content-inner"],children:g})}),oe&&t.jsx("div",{className:n.default["tedi-dock-panel__footer"],children:y})]})]})});z.displayName="DockPanel";const F=s.forwardRef(({children:o,panel:p,className:h,...g},d)=>t.jsxs("div",{...g,ref:d,className:$.default(n.default["tedi-dock-panel-layout"],h),children:[t.jsx("div",{className:n.default["tedi-dock-panel-layout__content"],"data-dock-panel-layout-content":"",children:o}),p]}));F.displayName="DockPanelLayout";exports.DockPanel=z;exports.DockPanelLayout=F;

package/src/community/components/dock-panel/dock-panel.d.ts

@@ -0,0 +1,110 @@
+import { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+import { HeadingProps } from '../../../tedi/components/base/typography/heading/heading';
+export type DockPanelPlacement = 'left' | 'right' | 'top' | 'bottom';
+export type DockPanelSize = 'default' | 'small';
+export type DockPanelDimensionPreset = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type DockPanelWidth = DockPanelDimensionPreset | CSSProperties['width'];
+export type DockPanelHeight = DockPanelDimensionPreset | CSSProperties['height'];
+export interface DockPanelLabels {
+    /** Accessible name for the minimize button. Supply translated text. */
+    collapse: string;
+    /** Accessible name for the restore button. Supply translated text. */
+    expand: string;
+    /** Accessible name for the optional close button. Supply translated text. */
+    close: string;
+}
+export interface DockPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> {
+    /** Required. Visible heading and default accessible name of the panel. */
+    title: string;
+    /** Required. Application-provided React content. Kept mounted while minimized. */
+    children: ReactNode;
+    /**
+     * Required. Translated accessible button names: { collapse, expand, close }.
+     * All three strings are required by this interface, including close when onClose is omitted.
+     * Providing labels.close alone does not display a close button.
+     */
+    labels: DockPanelLabels;
+    /**
+     * Optional. Edge of the containing workspace, not necessarily the browser viewport.
+     * Place the panel in DockPanelLayout to overlay when expanded and reserve space when minimized.
+     * @default right
+     */
+    placement?: DockPanelPlacement;
+    /**
+     * Optional. Panel density, using TEDI Modal padding tokens for the header, content and footer.
+     * The title defaults to h3 for default and h4 for small, including its text size when expanded.
+     * Set headingElement to override both. Minimized titles always use compact text.
+     * This is independent of width/height: small does not mean a narrower panel.
+     * @default default
+     */
+    size?: DockPanelSize;
+    /**
+     * Optional. Controlled minimized state. Supply onCollapsedChange and apply the requested value.
+     * When omitted, the component manages its own state, initialized from defaultCollapsed.
+     */
+    collapsed?: boolean;
+    /**
+     * Optional. Initial minimized state in uncontrolled mode; ignored when collapsed is supplied.
+     * Changes after mounting do not reset the state.
+     * @default false
+     */
+    defaultCollapsed?: boolean;
+    /** Optional. Requests/notifies a minimize/restore change. Receives the next collapsed value. */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /**
+     * Optional. Displays the close button and requests dismissal when clicked.
+     * The application owns removal, unsaved-change confirmation and focus restoration.
+     * Omit this callback to hide the close button. Closing is separate from minimizing.
+     */
+    onClose?: () => void;
+    /** Optional. React content before the grouped panel controls. Hidden, not unmounted, when minimized. */
+    headerActions?: ReactNode;
+    /** Optional. React content below the scrolling body. Hidden, not unmounted, when minimized. */
+    footer?: ReactNode;
+    /**
+     * Optional. Expanded width for left/right placement; ignored for top/bottom.
+     * Presets share the height scale: xs=25%, sm=35%, md=50%, lg=65%, xl=80% of workspace width.
+     * Every named preset leaves some workspace visible beside the panel, including xl.
+     * Also accepts a CSS length or a number in pixels, limited to the workspace width.
+     * Use 100% explicitly to fill the workspace. An omitted width defaults to xs (25%) via CSS.
+     * @default xs
+     */
+    width?: DockPanelWidth;
+    /**
+     * Optional. Expanded height for any placement. Numbers mean pixels; CSS lengths and auto work too.
+     * Presets share the width scale: xs=25%, sm=35%, md=50%, lg=65%, xl=80% of workspace height.
+     * Named presets leave workspace visible; use 100% explicitly for the full available height.
+     * Defaults to 100% for left/right and 50% for top/bottom.
+     * Use auto for content height, with maxHeight to leave background visible underneath.
+     * A minimized side rail keeps an explicit height, or fits its title and controls for auto.
+     */
+    height?: DockPanelHeight;
+    /**
+     * Optional. Maximum height as a CSS length or number in pixels; not a preset.
+     * For example, calc(100% - 4rem) reserves space below a side panel.
+     * At the limit, the body scrolls while the header and footer remain visible.
+     * @default 100%
+     */
+    maxHeight?: CSSProperties['maxHeight'];
+    /**
+     * Optional. Overrides the title's HTML heading tag and expanded text size.
+     * When omitted, uses h3 for default and h4 for small. Minimized titles always use compact text.
+     * @default h3 (h4 when size is small)
+     */
+    headingElement?: HeadingProps['element'];
+}
+export declare const DockPanel: import('react').ForwardRefExoticComponent<DockPanelProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Shared layout for one DockPanel and its underlying application content.
+ * Expanded panels are out of flow. A minimized panel occupies a separate grid track,
+ * so the workspace resizes without being obscured by the rail.
+ * Keep the layout mounted when opening/closing the panel to preserve application state.
+ */
+export interface DockPanelLayoutProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Required. Underlying application content, such as a map, editor or table. */
+    children: ReactNode;
+    /** Optional. One DockPanel, or a layout-aware wrapper containing it. Null means closed. */
+    panel?: ReactNode;
+}
+export declare const DockPanelLayout: import('react').ForwardRefExoticComponent<DockPanelLayoutProps & import('react').RefAttributes<HTMLDivElement>>;
+export default DockPanel;

package/src/community/components/dock-panel/dock-panel.es.js

@@ -0,0 +1,138 @@
+"use client";
+import { jsxs as i, jsx as l } from "react/jsx-runtime";
+import j from "../../../../external/classnames/index.es.js";
+import { forwardRef as M, useId as ae, useState as se, useRef as f, useEffect as z } from "react";
+import { Heading as ce } from "../../../tedi/components/base/typography/heading/heading.es.js";
+import { Button as F } from "../../../tedi/components/buttons/button/button.es.js";
+import t from "./dock-panel.module.scss.es.js";
+const ie = ["xs", "sm", "md", "lg", "xl"], de = {
+  xs: "25%",
+  sm: "35%",
+  md: "50%",
+  lg: "65%",
+  xl: "80%"
+}, re = (n) => typeof n == "string" && ie.includes(n), O = (n) => re(n) ? de[n] : typeof n == "number" ? `${n}px` : n, ue = M((n, h) => {
+  const {
+    title: g,
+    children: _,
+    labels: s,
+    placement: G = "right",
+    size: b = "default",
+    collapsed: x,
+    defaultCollapsed: W = !1,
+    onCollapsedChange: y,
+    onClose: E,
+    headerActions: k,
+    footer: v,
+    width: I,
+    height: D,
+    maxHeight: d,
+    headingElement: q,
+    id: J,
+    className: K,
+    style: Q,
+    ...C
+  } = n, U = ae(), N = J ?? `tedi-dock-panel-${U}`, T = `${N}-title`, R = `${N}-body`, [V, X] = se(W), Y = x !== void 0, o = x ?? V, r = f(null), u = f(null), S = f(null), m = f(!1);
+  z(() => {
+    var A;
+    const e = (A = r.current) == null ? void 0 : A.ownerDocument;
+    if (!e) return;
+    const c = () => {
+      var w, B, $;
+      const a = e.activeElement, H = !!(a && ((w = u.current) != null && w.contains(a) || (B = S.current) != null && B.contains(a)));
+      (H || a !== e.body || !(($ = u.current) != null && $.hidden)) && (m.current = H);
+    }, P = () => {
+      var a;
+      (a = u.current) != null && a.hidden || (m.current = !1);
+    };
+    return c(), e.addEventListener("focusin", c), e.addEventListener("focusout", P), () => {
+      e.removeEventListener("focusin", c), e.removeEventListener("focusout", P);
+    };
+  }, []), z(() => {
+    var e;
+    o && m.current && ((e = r.current) == null || e.focus(), m.current = !1);
+  }, [o]);
+  const Z = () => {
+    var c;
+    const e = !o;
+    (c = r.current) == null || c.focus(), Y || X(e), y == null || y(e);
+  }, p = { ...Q };
+  I !== void 0 && (p["--dock-panel-width"] = O(I)), D !== void 0 && (p["--dock-panel-height"] = O(D)), d !== void 0 && (p["--dock-panel-max-height"] = typeof d == "number" ? `${d}px` : d);
+  const ee = q ?? (b === "small" ? "h4" : "h3"), te = o ? "small" : void 0, L = o ? s.expand : s.collapse, ne = o ? "zoom_out_map" : "zoom_in_map", oe = k != null, le = v != null;
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      ...C,
+      ref: h,
+      id: N,
+      role: "region",
+      "aria-labelledby": C["aria-labelledby"] ?? T,
+      "data-dock-panel": "",
+      "data-placement": G,
+      "data-size": b,
+      "data-collapsed": o,
+      className: j(t["tedi-dock-panel"], K),
+      style: p,
+      children: [
+        /* @__PURE__ */ i("div", { className: t["tedi-dock-panel__header"], children: [
+          /* @__PURE__ */ l(
+            ce,
+            {
+              id: T,
+              element: ee,
+              modifiers: te,
+              className: t["tedi-dock-panel__title"],
+              children: g
+            }
+          ),
+          oe && /* @__PURE__ */ l("div", { ref: S, className: t["tedi-dock-panel__header-actions"], hidden: o, children: k }),
+          /* @__PURE__ */ i("div", { className: t["tedi-dock-panel__controls"], children: [
+            /* @__PURE__ */ l(
+              F,
+              {
+                ref: r,
+                className: t["tedi-dock-panel__toggle"],
+                type: "button",
+                visualType: "neutral",
+                icon: ne,
+                title: L,
+                "aria-expanded": !o,
+                "aria-controls": R,
+                onClick: Z,
+                children: L
+              }
+            ),
+            E && /* @__PURE__ */ l(
+              F,
+              {
+                className: t["tedi-dock-panel__close"],
+                type: "button",
+                visualType: "neutral",
+                icon: "close",
+                title: s.close,
+                onClick: E,
+                children: s.close
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ i("div", { ref: u, id: R, className: t["tedi-dock-panel__body"], hidden: o, children: [
+          /* @__PURE__ */ l("div", { className: t["tedi-dock-panel__content"], children: /* @__PURE__ */ l("div", { className: t["tedi-dock-panel__content-inner"], children: _ }) }),
+          le && /* @__PURE__ */ l("div", { className: t["tedi-dock-panel__footer"], children: v })
+        ] })
+      ]
+    }
+  );
+});
+ue.displayName = "DockPanel";
+const me = M(
+  ({ children: n, panel: h, className: g, ..._ }, s) => /* @__PURE__ */ i("div", { ..._, ref: s, className: j(t["tedi-dock-panel-layout"], g), children: [
+    /* @__PURE__ */ l("div", { className: t["tedi-dock-panel-layout__content"], "data-dock-panel-layout-content": "", children: n }),
+    h
+  ] })
+);
+me.displayName = "DockPanelLayout";
+export {
+  ue as DockPanel,
+  me as DockPanelLayout
+};

package/src/community/components/dock-panel/dock-panel.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-dock-panel":"tedi-dock-panel-ef8c20a6","tedi-dock-panel-layout":"tedi-dock-panel-layout-cde58073","tedi-dock-panel__header":"tedi-dock-panel__header-b12fda64","tedi-dock-panel__title":"tedi-dock-panel__title-d31ae9ea","tedi-dock-panel__header-actions":"tedi-dock-panel__header-actions-6b6b0022","tedi-dock-panel__controls":"tedi-dock-panel__controls-ec981d75","tedi-dock-panel__toggle":"tedi-dock-panel__toggle-8b710f3d","tedi-dock-panel__close":"tedi-dock-panel__close-d516de11","tedi-dock-panel__body":"tedi-dock-panel__body-06c713da","tedi-dock-panel__content":"tedi-dock-panel__content-417ece1d","tedi-dock-panel__content-inner":"tedi-dock-panel__content-inner-3ea8c932","tedi-dock-panel__footer":"tedi-dock-panel__footer-364577b7","tedi-dock-panel-layout__content":"tedi-dock-panel-layout__content-cff421e0"};exports.default=e;

package/src/community/components/dock-panel/dock-panel.module.scss.es.js

@@ -0,0 +1,18 @@
+const e = {
+  "tedi-dock-panel": "tedi-dock-panel-ef8c20a6",
+  "tedi-dock-panel-layout": "tedi-dock-panel-layout-cde58073",
+  "tedi-dock-panel__header": "tedi-dock-panel__header-b12fda64",
+  "tedi-dock-panel__title": "tedi-dock-panel__title-d31ae9ea",
+  "tedi-dock-panel__header-actions": "tedi-dock-panel__header-actions-6b6b0022",
+  "tedi-dock-panel__controls": "tedi-dock-panel__controls-ec981d75",
+  "tedi-dock-panel__toggle": "tedi-dock-panel__toggle-8b710f3d",
+  "tedi-dock-panel__close": "tedi-dock-panel__close-d516de11",
+  "tedi-dock-panel__body": "tedi-dock-panel__body-06c713da",
+  "tedi-dock-panel__content": "tedi-dock-panel__content-417ece1d",
+  "tedi-dock-panel__content-inner": "tedi-dock-panel__content-inner-3ea8c932",
+  "tedi-dock-panel__footer": "tedi-dock-panel__footer-364577b7",
+  "tedi-dock-panel-layout__content": "tedi-dock-panel-layout__content-cff421e0"
+};
+export {
+  e as default
+};

package/src/community/components/dropdown/dropdown.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),o=require("../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),B=require("../../../../external/classnames/index.cjs.js"),c=require("react"),K=require("../button/button.cjs.js"),a=require("./dropdown.module.scss.cjs.js"),T=require("../../../tedi/providers/label-provider/use-labels.cjs.js"),H=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"),$=d=>{const{getLabel:F}=T.useLabels(),{button:_,items:u,onItemClick:l,closeMenuOnClick:h=!0,...q}=d,{initialFocus:v=-1,modal:f=!1,...p}=d.focusManager??{},{visuallyHiddenDismiss:j=f?F("close"):!1}=p??{},R=o.useFloatingNodeId(),g=c.useRef([]),[b,i]=c.useState(!1),[x,M]=c.useState(null),{x:y,y:C,strategy:N,refs:w,placement:O,context:r}=o.useFloating({placement:"bottom-start",nodeId:R,open:b,onOpenChange:i,middleware:[D.flip(),D.shift()],whileElementsMounted:H.autoUpdate}),P=u.findIndex(e=>e.isActive),{getReferenceProps:S,getFloatingProps:L,getItemProps:U}=o.useInteractions([o.useClick(r),o.useListNavigation(r,{listRef:g,activeIndex:x,selectedIndex:P,onNavigate:M,loop:!0}),o.useRole(r,{role:"listbox"}),o.useDismiss(r)]),A=()=>{const e=s.jsx(o.FloatingFocusManager,{context:r,initialFocus:v,visuallyHiddenDismiss:j,modal:f,...p,children:s.jsx("div",{...L({ref:w.setFloating,style:{position:N,left:y??0,top:C??0},className:a.default.dropdown,onKeyDown(t){t.key==="Tab"&&i(!1)}}),"data-placement":O,children:u.map((t,n)=>k(t,n))})});return b?e:null},E=e=>B.default(a.default.dropdown__item,{[a.default["dropdown__item--active"]]:e.isActive,[a.default["dropdown__item--disabled"]]:e.isDisabled}),I=(e,t,n)=>{var m;l==null||l(e,t,n),(m=e==null?void 0:e.onClick)==null||m.call(e,n),h&&i(!1)},k=(e,t)=>s.jsx("button",{...U({disabled:e.isDisabled,tabIndex:x===t?0:-1,role:"option",className:E(e),onClick:n=>I(e,t,n),onKeyDown(n){n.key==="Enter"&&I(e,t,n)},ref(n){g.current[t]=n}}),children:e.children},t);return s.jsxs(s.Fragment,{children:[s.jsx(K.Button,{"data-name":"dropdown",...q,..._,...S({ref:w.setReference,tabIndex:0})}),s.jsx(o.FloatingPortal,{children:A()})]})};exports.Dropdown=$;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),o=require("../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),B=require("../../../../external/classnames/index.cjs.js"),l=require("react"),K=require("../../../tedi/helpers/warn-deprecated/warn-deprecated.cjs.js"),T=require("../button/button.cjs.js"),a=require("./dropdown.module.scss.cjs.js"),H=require("../../../tedi/providers/label-provider/use-labels.cjs.js"),$=require("../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),I=require("../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),z=c=>{K.warnDeprecated("Community Dropdown","Use `Dropdown` from `@tedi-design-system/react/tedi` instead.");const{getLabel:q}=H.useLabels(),{button:F,items:u,onItemClick:i,closeMenuOnClick:_=!0,...h}=c,{initialFocus:v=-1,modal:f=!1,...p}=c.focusManager??{},{visuallyHiddenDismiss:j=f?q("close"):!1}=p??{},y=o.useFloatingNodeId(),g=l.useRef([]),[w,d]=l.useState(!1),[b,R]=l.useState(null),{x:M,y:C,strategy:N,refs:x,placement:O,context:r}=o.useFloating({placement:"bottom-start",nodeId:y,open:w,onOpenChange:d,middleware:[I.flip(),I.shift()],whileElementsMounted:$.autoUpdate}),P=u.findIndex(e=>e.isActive),{getReferenceProps:S,getFloatingProps:U,getItemProps:L}=o.useInteractions([o.useClick(r),o.useListNavigation(r,{listRef:g,activeIndex:b,selectedIndex:P,onNavigate:R,loop:!0}),o.useRole(r,{role:"listbox"}),o.useDismiss(r)]),A=()=>{const e=s.jsx(o.FloatingFocusManager,{context:r,initialFocus:v,visuallyHiddenDismiss:j,modal:f,...p,children:s.jsx("div",{...U({ref:x.setFloating,style:{position:N,left:M??0,top:C??0},className:a.default.dropdown,onKeyDown(t){t.key==="Tab"&&d(!1)}}),"data-placement":O,children:u.map((t,n)=>k(t,n))})});return w?e:null},E=e=>B.default(a.default.dropdown__item,{[a.default["dropdown__item--active"]]:e.isActive,[a.default["dropdown__item--disabled"]]:e.isDisabled}),m=(e,t,n)=>{var D;i==null||i(e,t,n),(D=e==null?void 0:e.onClick)==null||D.call(e,n),_&&d(!1)},k=(e,t)=>s.jsx("button",{...L({disabled:e.isDisabled,tabIndex:b===t?0:-1,role:"option",className:E(e),onClick:n=>m(e,t,n),onKeyDown(n){n.key==="Enter"&&m(e,t,n)},ref(n){g.current[t]=n}}),children:e.children},t);return s.jsxs(s.Fragment,{children:[s.jsx(T.Button,{"data-name":"dropdown",...h,...F,...S({ref:x.setReference,tabIndex:0})}),s.jsx(o.FloatingPortal,{children:A()})]})};exports.Dropdown=z;

package/src/community/components/dropdown/dropdown.es.js

@@ -1,27 +1,29 @@
 import { jsxs as B, Fragment as K, jsx as s } from "react/jsx-runtime";
-import { useFloatingNodeId as H, useFloating as T, useInteractions as U, useClick as q, useListNavigation as z, useRole as G, useDismiss as J, FloatingPortal as Q, FloatingFocusManager as V } from "../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import { useFloatingNodeId as U, useFloating as H, useInteractions as T, useClick as q, useListNavigation as z, useRole as G, useDismiss as J, FloatingPortal as Q, FloatingFocusManager as V } from "../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
 import W from "../../../../external/classnames/index.es.js";
-import i from "react";
-import { Button as X } from "../button/button.es.js";
+import l from "react";
+import { warnDeprecated as X } from "../../../tedi/helpers/warn-deprecated/warn-deprecated.es.js";
+import { Button as Y } from "../button/button.es.js";
 import r from "./dropdown.module.scss.es.js";
-import { useLabels as Y } from "../../../tedi/providers/label-provider/use-labels.es.js";
-import { autoUpdate as Z } from "../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
-import { flip as $, shift as ee } from "../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
-const de = (c) => {
-  const { getLabel: x } = Y(), { button: D, items: d, onItemClick: a, closeMenuOnClick: F = !0, ...h } = c, { initialFocus: v = -1, modal: p = !1, ...f } = c.focusManager ?? {}, { visuallyHiddenDismiss: _ = p ? x("close") : !1 } = f ?? {}, R = H(), u = i.useRef([]), [m, l] = i.useState(!1), [g, M] = i.useState(null), { x: N, y, strategy: C, refs: I, placement: O, context: n } = T({
+import { useLabels as Z } from "../../../tedi/providers/label-provider/use-labels.es.js";
+import { autoUpdate as $ } from "../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
+import { flip as ee, shift as oe } from "../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
+const fe = (d) => {
+  X("Community Dropdown", "Use `Dropdown` from `@tedi-design-system/react/tedi` instead.");
+  const { getLabel: x } = Z(), { button: D, items: c, onItemClick: a, closeMenuOnClick: F = !0, ...h } = d, { initialFocus: v = -1, modal: p = !1, ...f } = d.focusManager ?? {}, { visuallyHiddenDismiss: _ = p ? x("close") : !1 } = f ?? {}, y = U(), m = l.useRef([]), [u, i] = l.useState(!1), [g, R] = l.useState(null), { x: C, y: M, strategy: N, refs: w, placement: O, context: n } = H({
     placement: "bottom-start",
-    nodeId: R,
-    open: m,
-    onOpenChange: l,
-    middleware: [$(), ee()],
-    whileElementsMounted: Z
-  }), P = d.findIndex((e) => e.isActive), { getReferenceProps: A, getFloatingProps: E, getItemProps: L } = U([
+    nodeId: y,
+    open: u,
+    onOpenChange: i,
+    middleware: [ee(), oe()],
+    whileElementsMounted: $
+  }), P = c.findIndex((e) => e.isActive), { getReferenceProps: A, getFloatingProps: E, getItemProps: L } = T([
     q(n),
     z(n, {
-      listRef: u,
+      listRef: m,
       activeIndex: g,
       selectedIndex: P,
-      onNavigate: M,
+      onNavigate: R,
       loop: !0
     }),
     G(n, { role: "listbox" }),
@@ -39,30 +41,30 @@ const de = (c) => {
           "div",
           {
             ...E({
-              ref: I.setFloating,
+              ref: w.setFloating,
               style: {
-                position: C,
-                left: N ?? 0,
-                top: y ?? 0
+                position: N,
+                left: C ?? 0,
+                top: M ?? 0
               },
               className: r.dropdown,
               onKeyDown(o) {
-                o.key === "Tab" && l(!1);
+                o.key === "Tab" && i(!1);
               }
             }),
             "data-placement": O,
-            children: d.map((o, t) => k(o, t))
+            children: c.map((o, t) => k(o, t))
           }
         )
       }
     );
-    return m ? e : null;
+    return u ? e : null;
   }, j = (e) => W(r.dropdown__item, {
     [r["dropdown__item--active"]]: e.isActive,
     [r["dropdown__item--disabled"]]: e.isDisabled
-  }), b = (e, o, t) => {
-    var w;
-    a == null || a(e, o, t), (w = e == null ? void 0 : e.onClick) == null || w.call(e, t), F && l(!1);
+  }), I = (e, o, t) => {
+    var b;
+    a == null || a(e, o, t), (b = e == null ? void 0 : e.onClick) == null || b.call(e, t), F && i(!1);
   }, k = (e, o) => /* @__PURE__ */ s(
     "button",
     {
@@ -71,12 +73,12 @@ const de = (c) => {
         tabIndex: g === o ? 0 : -1,
         role: "option",
         className: j(e),
-        onClick: (t) => b(e, o, t),
+        onClick: (t) => I(e, o, t),
         onKeyDown(t) {
-          t.key === "Enter" && b(e, o, t);
+          t.key === "Enter" && I(e, o, t);
         },
         ref(t) {
-          u.current[o] = t;
+          m.current[o] = t;
         }
       }),
       children: e.children
@@ -85,13 +87,13 @@ const de = (c) => {
   );
   return /* @__PURE__ */ B(K, { children: [
     /* @__PURE__ */ s(
-      X,
+      Y,
       {
         "data-name": "dropdown",
         ...h,
         ...D,
         ...A({
-          ref: I.setReference,
+          ref: w.setReference,
           tabIndex: 0
         })
       }
@@ -100,5 +102,5 @@ const de = (c) => {
   ] });
 };
 export {
-  de as Dropdown
+  fe as Dropdown
 };

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

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

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

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { CategorySearchProps } from './category-search.types';
+/**
+ * Search categories with independent drafts and results in an anchored, non-modal panel.
+ * The background remains interactive. Closing, switching categories, or editing a draft
+ * preserves completed results; clearing resets only the active category.
+ */
+export declare const CategorySearch: React.ForwardRefExoticComponent<CategorySearchProps & React.RefAttributes<HTMLDivElement>>;
+export default CategorySearch;