@tedi-design-system/react 17.0.0-rc.4 → 17.0.0-rc.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "17.0.0-rc.4",
+  "version": "17.0.0-rc.6",
   "type": "module",
   "sideEffects": false,
   "exports": {

package/src/community/components/tabs/tabs/tabs.d.ts

@@ -1,5 +1,8 @@
 import { default as React } from 'react';
 import { PrintProps } from '../../../../tedi/components/misc/print/print';
+/**
+ * @deprecated Use Tabs from `@tedi-design-system/react/tedi` instead.
+ */
 export interface TabsProps {
     /**
      * Tabs content. Children should be TabsItems
@@ -32,5 +35,8 @@ export interface TabsProps {
      */
     hideNavOnPrint?: PrintProps['visibility'];
 }
+/**
+ * @deprecated Use Tabs from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const Tabs: (props: TabsProps) => JSX.Element;
 export default Tabs;

package/src/community/components/tabs/tabs-item/tabs-item.d.ts

@@ -2,6 +2,9 @@ import { default as React } from 'react';
 import { BreakpointSupport } from '../../../helpers';
 import { CardContentProps } from '../../card';
 type TabsItemBreakpointProps = Pick<CardContentProps, 'padding' | 'background'>;
+/**
+ * @deprecated Use Tabs from `@tedi-design-system/react/tedi` instead.
+ */
 export interface TabsItemProps extends BreakpointSupport<TabsItemBreakpointProps> {
     /**
      * ID property.
@@ -20,5 +23,8 @@ export interface TabsItemProps extends BreakpointSupport<TabsItemBreakpointProps
      */
     className?: string;
 }
+/**
+ * @deprecated Use Tabs from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const TabsItem: (props: TabsItemProps) => import("react/jsx-runtime").JSX.Element | null;
 export default TabsItem;

package/src/community/components/tabs/tabs-nav/tabs-nav-item.d.ts

@@ -1,6 +1,12 @@
 import { default as React } from 'react';
 import { AnchorProps } from '../../anchor/anchor';
 import { TabsItemProps } from '../tabs-item/tabs-item';
+/**
+ * @deprecated Use Tabs from `@tedi-design-system/react/tedi` instead.
+ */
 export type TabsNavItemProps<C extends React.ElementType = 'a'> = AnchorProps<C> & Pick<TabsItemProps, 'id'>;
+/**
+ * @deprecated Use Tabs from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const TabsNavItem: <C extends React.ElementType = "a">(props: TabsNavItemProps<C>) => JSX.Element;
 export default TabsNavItem;

package/src/community/components/tabs/tabs-nav/tabs-nav.d.ts

@@ -1,4 +1,7 @@
 import { TabsNavItemProps } from './tabs-nav-item';
+/**
+ * @deprecated Use Tabs from `@tedi-design-system/react/tedi` instead.
+ */
 export interface TabsNavProps {
     /**
      * Additional classes.
@@ -13,5 +16,8 @@ export interface TabsNavProps {
      */
     'aria-labelledby': string;
 }
+/**
+ * @deprecated Use Tabs from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const TabsNav: (props: TabsNavProps) => JSX.Element;
 export default TabsNav;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("react/jsx-runtime"),d=require("../../../../../external/classnames/index.cjs.js"),r=require("react"),N=require("../textfield/textfield.cjs.js"),l=require("./textarea.module.scss.cjs.js"),x=r.forwardRef((h,m)=>{const{className:f,helper:n=[],characterLimit:t,onChange:e,onChangeEvent:s,value:a,defaultValue:p,...g}=h,[u,y]=r.useState(p??""),A=r.useCallback(o=>{!a&&!(e||s)&&y(o),e==null||e(o)},[a,e,s]),c=r.useMemo(()=>a??u,[a,u]),i=c.length,C=t?`${i}/${t}`:"",T=[...Array.isArray(n)?n:[n],...t?[{type:i>t?"error":"hint",text:C,position:"right",className:d.default(l.default["tedi-textarea__character-count"])}]:[]];return q.jsx(N.TextField,{...g,ref:m,"data-name":"textarea",inputClassName:l.default["tedi-textarea__input"],isTextArea:!0,className:d.default(l.default["tedi-textarea"],f),value:c,onChange:A,onChangeEvent:s,helper:T})});x.displayName="TextArea";exports.TextArea=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const L=require("react/jsx-runtime"),w=require("../../../../../external/classnames/index.cjs.js"),a=require("react"),O=require("../textfield/textfield.cjs.js"),d=require("./textarea.module.scss.cjs.js"),M=a.forwardRef((N,o)=>{const{className:_,helper:p=[],characterLimit:s,onChange:n,onChangeEvent:g,value:l,defaultValue:b,autoGrow:t=!1,minRows:u=3,maxRows:y=12,height:H="7.5rem",maxHeight:i,...q}=N,[T,F]=a.useState(b??""),c=a.useRef(null),[v,E]=a.useState("auto"),j=a.useCallback(e=>{!l&&!(n||g)&&F(e),n==null||n(e)},[l,n,g]),m=a.useMemo(()=>l??T,[l,T]),r=a.useCallback(()=>{if(!t||!c.current)return;const e=c.current,$=e.style.overflow;e.style.overflow="hidden";const f=window.getComputedStyle(e);let h=parseFloat(f.lineHeight);isNaN(h)&&(h=(parseFloat(f.fontSize)||16)*1.5);const S=parseFloat(f.paddingTop),A=parseFloat(f.paddingBottom),B=e.scrollHeight-S-A;let x=Math.ceil(B/h);x=Math.min(Math.max(x,u),y);const R=`${x*h+S+A}px`;e.style.height=R,E(R),e.style.overflow=$,e.style.overflowY=e.scrollHeight>e.clientHeight?"auto":"hidden"},[t,u,y]);a.useEffect(()=>{t&&requestAnimationFrame(()=>{r()})},[m,t,r]),a.useEffect(()=>{t&&c.current&&r()},[t,r]);const k=a.useCallback(e=>{o&&(typeof o=="function"?o(e):o.current=e),e!=null&&e.input&&e.input instanceof HTMLTextAreaElement&&(c.current=e.input,t&&setTimeout(r,0))},[o,t,r]),z=a.useMemo(()=>t?{rows:u,style:{...i?{maxHeight:i}:{},overflow:"hidden",height:v}}:{style:{height:H,...i?{maxHeight:i}:{},overflow:"auto"}},[t,u,i,H,v]),C=m.length,I=s?`${C}/${s}`:"",V=[...Array.isArray(p)?p:[p],...s?[{type:C>s?"error":"hint",text:I,position:"right",className:w.default(d.default["tedi-textarea__character-count"])}]:[]];return L.jsx(O.TextField,{...q,ref:k,"data-name":"textarea",inputClassName:w.default(d.default["tedi-textarea__input"],{[d.default["tedi-textarea__input--auto-grow"]]:t}),isTextArea:!0,className:w.default(d.default["tedi-textarea"],_),value:m,onChange:j,onChangeEvent:g,helper:V,input:z})});M.displayName="TextArea";exports.TextArea=M;

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

@@ -5,6 +5,35 @@ export interface TextAreaProps extends TextFieldProps {
      * Maximum number of characters allowed in the textarea.
      */
     characterLimit?: number;
+    /**
+     * Enable automatic height adjustment based on content.
+     * @default false
+     */
+    autoGrow?: boolean;
+    /**
+     * Minimum number of rows (only used when autoGrow = true).
+     * @default 3
+     */
+    minRows?: number;
+    /**
+     * Maximum number of rows before scrolling (only used when autoGrow = true).
+     * @default 12
+     */
+    maxRows?: number;
+    /**
+     * Fixed height for the textarea (e.g. '200px', '12rem', 240).
+     * Ignored when autoGrow = true.
+     *
+     * @default 7.5rem
+     */
+    height?: string | number;
+    /**
+     * Maximum height of the textarea.
+     *
+     * - When `autoGrow` is enabled, this limits how tall the textarea can grow.
+     * - When `autoGrow` is disabled, this limits the fixed height.
+     */
+    maxHeight?: string | number;
 }
 export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<TextFieldForwardRef>>;
 export default TextArea;

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

@@ -1,51 +1,97 @@
-import { jsx as A } from "react/jsx-runtime";
-import u from "../../../../../external/classnames/index.es.js";
-import n, { forwardRef as g } from "react";
-import { TextField as T } from "../textfield/textfield.es.js";
-import o from "./textarea.module.scss.es.js";
-const v = g((p, h) => {
+import { jsx as q } from "react/jsx-runtime";
+import w from "../../../../../external/classnames/index.es.js";
+import a, { forwardRef as G, useRef as O, useEffect as R } from "react";
+import { TextField as P } from "../textfield/textfield.es.js";
+import p from "./textarea.module.scss.es.js";
+const Y = G((S, r) => {
   const {
-    className: x,
-    helper: r = [],
-    characterLimit: t,
-    onChange: e,
-    onChangeEvent: s,
-    value: a,
-    defaultValue: d,
-    ...f
-  } = p, [l, C] = n.useState(d ?? ""), N = n.useCallback(
-    (m) => {
-      !a && !(e || s) && C(m), e == null || e(m);
+    className: F,
+    helper: f = [],
+    characterLimit: i,
+    onChange: s,
+    onChangeEvent: g,
+    value: l,
+    defaultValue: M,
+    autoGrow: e = !1,
+    minRows: c = 3,
+    maxRows: H = 12,
+    height: y = "7.5rem",
+    maxHeight: n,
+    ...b
+  } = S, [v, k] = a.useState(M ?? ""), u = O(null), [C, z] = a.useState("auto"), E = a.useCallback(
+    (t) => {
+      !l && !(s || g) && k(t), s == null || s(t);
     },
-    [a, e, s]
-  ), c = n.useMemo(() => a ?? l, [a, l]), i = c.length, _ = t ? `${i}/${t}` : "", y = [
-    ...Array.isArray(r) ? r : [r],
-    ...t ? [
+    [l, s, g]
+  ), x = a.useMemo(() => l ?? v, [l, v]), o = a.useCallback(() => {
+    if (!e || !u.current) return;
+    const t = u.current, L = t.style.overflow;
+    t.style.overflow = "hidden";
+    const h = window.getComputedStyle(t);
+    let m = parseFloat(h.lineHeight);
+    isNaN(m) && (m = (parseFloat(h.fontSize) || 16) * 1.5);
+    const N = parseFloat(h.paddingTop), _ = parseFloat(h.paddingBottom), j = t.scrollHeight - N - _;
+    let d = Math.ceil(j / m);
+    d = Math.min(Math.max(d, c), H);
+    const A = `${d * m + N + _}px`;
+    t.style.height = A, z(A), t.style.overflow = L, t.style.overflowY = t.scrollHeight > t.clientHeight ? "auto" : "hidden";
+  }, [e, c, H]);
+  R(() => {
+    e && requestAnimationFrame(() => {
+      o();
+    });
+  }, [x, e, o]), R(() => {
+    e && u.current && o();
+  }, [e, o]);
+  const I = a.useCallback(
+    (t) => {
+      r && (typeof r == "function" ? r(t) : r.current = t), t != null && t.input && t.input instanceof HTMLTextAreaElement && (u.current = t.input, e && setTimeout(o, 0));
+    },
+    [r, e, o]
+  ), V = a.useMemo(() => e ? {
+    rows: c,
+    style: {
+      ...n ? { maxHeight: n } : {},
+      overflow: "hidden",
+      height: C
+    }
+  } : {
+    style: {
+      height: y,
+      ...n ? { maxHeight: n } : {},
+      overflow: "auto"
+    }
+  }, [e, c, n, y, C]), T = x.length, $ = i ? `${T}/${i}` : "", B = [
+    ...Array.isArray(f) ? f : [f],
+    ...i ? [
       {
-        type: i > t ? "error" : "hint",
-        text: _,
+        type: T > i ? "error" : "hint",
+        text: $,
         position: "right",
-        className: u(o["tedi-textarea__character-count"])
+        className: w(p["tedi-textarea__character-count"])
       }
     ] : []
   ];
-  return /* @__PURE__ */ A(
-    T,
+  return /* @__PURE__ */ q(
+    P,
     {
-      ...f,
-      ref: h,
+      ...b,
+      ref: I,
       "data-name": "textarea",
-      inputClassName: o["tedi-textarea__input"],
+      inputClassName: w(p["tedi-textarea__input"], {
+        [p["tedi-textarea__input--auto-grow"]]: e
+      }),
       isTextArea: !0,
-      className: u(o["tedi-textarea"], x),
-      value: c,
-      onChange: N,
-      onChangeEvent: s,
-      helper: y
+      className: w(p["tedi-textarea"], F),
+      value: x,
+      onChange: E,
+      onChangeEvent: g,
+      helper: B,
+      input: V
     }
   );
 });
-v.displayName = "TextArea";
+Y.displayName = "TextArea";
 export {
-  v as TextArea
+  Y as TextArea
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-textarea__input":"tedi-textarea__input-8c740e37","tedi-textarea__character-count":"tedi-textarea__character-count-c5b62b38"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-textarea__input":"tedi-textarea__input-8c740e37","tedi-textarea__input--auto-grow":"tedi-textarea__input--auto-grow-dddcdb8a","tedi-textarea__character-count":"tedi-textarea__character-count-c5b62b38"};exports.default=t;

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

@@ -1,5 +1,6 @@
 const t = {
   "tedi-textarea__input": "tedi-textarea__input-8c740e37",
+  "tedi-textarea__input--auto-grow": "tedi-textarea__input--auto-grow-dddcdb8a",
   "tedi-textarea__character-count": "tedi-textarea__character-count-c5b62b38"
 };
 export {

package/src/tedi/components/misc/scroll-fade/scroll-fade.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react/jsx-runtime"),F=require("../../../../../external/classnames/index.cjs.js"),l=require("react"),a=require("./scroll-fade.module.scss.cjs.js"),f=l.forwardRef((S,t)=>{const{children:g,className:_,scrollBar:x="custom",onScrollToBottom:o,onScrollToTop:s,fadeSize:n=20,fadePosition:c="both"}=S,[m,M]=l.useState({top:!1,bottom:!1}),d=l.useCallback((e,r,i)=>{const u=e===0,B=Math.abs(r-e-i)<=1;let b=!0,h=!0;u&&(b=!1,s==null||s()),B&&(h=!1,o==null||o()),M({top:b,bottom:h})},[s,o]),j=l.useCallback(e=>{const{scrollTop:r,scrollHeight:i,clientHeight:u}=e.target;d(r,i,u)},[d]),k=l.useCallback(e=>{typeof t=="function"?t(e):t&&(t.current=e),e&&d(e.scrollTop,e.scrollHeight,e.clientHeight)},[d,t]),q=F.default(a.default["tedi-scroll-fade"],{[a.default[`tedi-scroll-fade--top-${n}`]]:m.top&&(c==="both"||c==="top")},{[a.default[`tedi-scroll-fade--bottom-${n}`]]:m.bottom&&(c==="both"||c==="bottom")},_),v=F.default(a.default["tedi-scroll-fade__inner"],{[a.default["tedi-scroll-fade__inner--custom-scroll"]]:x==="custom"});return p.jsx("div",{"data-name":"scroll-fade",className:q,children:p.jsx("div",{ref:k,onScroll:j,className:v,tabIndex:0,children:g})})});f.displayName="ScrollFade";exports.ScrollFade=f;exports.default=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react/jsx-runtime"),s=require("../../../../../external/classnames/index.cjs.js"),n=require("react"),l=require("./scroll-fade.module.scss.cjs.js"),E=require("../../../helpers/hooks/use-scroll-fade.cjs.js"),c=n.forwardRef((i,e)=>{const{children:u,className:f,scrollBar:S="custom",onScrollToBottom:m,onScrollToTop:F,fadeSize:r=20,fadePosition:o="both"}=i,{scrollRef:a,canScrollStart:b,canScrollEnd:h,handleScroll:_}=E.useScrollFade({direction:"vertical",onScrollToStart:F,onScrollToEnd:m}),p=n.useCallback(t=>{a(t),typeof e=="function"?e(t):e&&(e.current=t)},[a,e]),T=b&&(o==="both"||o==="top"),q=h&&(o==="both"||o==="bottom"),v=s.default(l.default["tedi-scroll-fade"],{[l.default[`tedi-scroll-fade--top-${r}`]]:T},{[l.default[`tedi-scroll-fade--bottom-${r}`]]:q},f),x=s.default(l.default["tedi-scroll-fade__inner"],{[l.default["tedi-scroll-fade__inner--custom-scroll"]]:S==="custom"});return d.jsx("div",{"data-name":"scroll-fade",className:v,children:d.jsx("div",{ref:p,onScroll:_,className:x,tabIndex:0,children:u})})});c.displayName="ScrollFade";exports.ScrollFade=c;exports.default=c;

package/src/tedi/components/misc/scroll-fade/scroll-fade.es.js

@@ -1,48 +1,38 @@
-import { jsx as h } from "react/jsx-runtime";
-import u from "../../../../../external/classnames/index.es.js";
-import { forwardRef as k, useState as v, useCallback as f } from "react";
-import o from "./scroll-fade.module.scss.es.js";
-const E = k((F, e) => {
+import { jsx as a } from "react/jsx-runtime";
+import s from "../../../../../external/classnames/index.es.js";
+import { forwardRef as B, useCallback as _ } from "react";
+import l from "./scroll-fade.module.scss.es.js";
+import { useScrollFade as v } from "../../../helpers/hooks/use-scroll-fade.es.js";
+const w = B((d, o) => {
   const {
-    children: g,
-    className: N,
-    scrollBar: S = "custom",
-    onScrollToBottom: l,
-    onScrollToTop: a,
-    fadeSize: m = 20,
-    fadePosition: s = "both"
-  } = F, [n, B] = v({ top: !1, bottom: !1 }), c = f(
-    (t, r, i) => {
-      const d = t === 0, M = Math.abs(r - t - i) <= 1;
-      let p = !0, b = !0;
-      d && (p = !1, a == null || a()), M && (b = !1, l == null || l()), B({ top: p, bottom: b });
+    children: n,
+    className: i,
+    scrollBar: m = "custom",
+    onScrollToBottom: f,
+    onScrollToTop: S,
+    fadeSize: c = 20,
+    fadePosition: t = "both"
+  } = d, { scrollRef: e, canScrollStart: p, canScrollEnd: u, handleScroll: h } = v({
+    direction: "vertical",
+    onScrollToStart: S,
+    onScrollToEnd: f
+  }), b = _(
+    (r) => {
+      e(r), typeof o == "function" ? o(r) : o && (o.current = r);
     },
-    [a, l]
-  ), H = f(
-    (t) => {
-      const { scrollTop: r, scrollHeight: i, clientHeight: d } = t.target;
-      c(r, i, d);
-    },
-    [c]
-  ), _ = f(
-    (t) => {
-      typeof e == "function" ? e(t) : e && (e.current = t), t && c(t.scrollTop, t.scrollHeight, t.clientHeight);
-    },
-    [c, e]
-  ), x = u(
-    o["tedi-scroll-fade"],
-    { [o[`tedi-scroll-fade--top-${m}`]]: n.top && (s === "both" || s === "top") },
-    {
-      [o[`tedi-scroll-fade--bottom-${m}`]]: n.bottom && (s === "both" || s === "bottom")
-    },
-    N
-  ), y = u(o["tedi-scroll-fade__inner"], {
-    [o["tedi-scroll-fade__inner--custom-scroll"]]: S === "custom"
+    [e, o]
+  ), F = p && (t === "both" || t === "top"), E = u && (t === "both" || t === "bottom"), N = s(
+    l["tedi-scroll-fade"],
+    { [l[`tedi-scroll-fade--top-${c}`]]: F },
+    { [l[`tedi-scroll-fade--bottom-${c}`]]: E },
+    i
+  ), T = s(l["tedi-scroll-fade__inner"], {
+    [l["tedi-scroll-fade__inner--custom-scroll"]]: m === "custom"
   });
-  return /* @__PURE__ */ h("div", { "data-name": "scroll-fade", className: x, children: /* @__PURE__ */ h("div", { ref: _, onScroll: H, className: y, tabIndex: 0, children: g }) });
+  return /* @__PURE__ */ a("div", { "data-name": "scroll-fade", className: N, children: /* @__PURE__ */ a("div", { ref: b, onScroll: h, className: T, tabIndex: 0, children: n }) });
 });
-E.displayName = "ScrollFade";
+w.displayName = "ScrollFade";
 export {
-  E as ScrollFade,
-  E as default
+  w as ScrollFade,
+  w as default
 };

package/src/tedi/components/navigation/tabs/index.d.ts

@@ -0,0 +1,5 @@
+export * from './tabs';
+export * from './tabs-context';
+export * from './tabs-list/tabs-list';
+export * from './tabs-trigger/tabs-trigger';
+export * from './tabs-content/tabs-content';

package/src/tedi/components/navigation/tabs/tabs-content/tabs-content.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("../../../../../../external/classnames/index.cjs.js"),l=require("../tabs.module.scss.cjs.js"),d=require("../tabs-context.cjs.js"),t=n=>{const{id:e,children:a,className:s}=n,{currentTab:o}=d.useTabsContext();return e&&o!==e?null:r.jsx("div",{"data-name":"tabs-content",id:e?`${e}-panel`:void 0,role:"tabpanel","aria-labelledby":e??void 0,className:i.default(l.default["tedi-tabs__content"],s),children:a})};t.displayName="TabsContent";exports.TabsContent=t;

package/src/tedi/components/navigation/tabs/tabs-content/tabs-content.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+export interface TabsContentProps {
+    /**
+     * Unique identifier matching the corresponding TabsTrigger id.
+     * When provided, content is only shown when this tab is active.
+     * When omitted, content is always rendered (useful for router outlets).
+     */
+    id?: string;
+    /**
+     * Tab panel content
+     */
+    children: React.ReactNode;
+    /**
+     * Additional class name(s)
+     */
+    className?: string;
+}
+export declare const TabsContent: {
+    (props: TabsContentProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export default TabsContent;

package/src/tedi/components/navigation/tabs/tabs-content/tabs-content.es.js

@@ -0,0 +1,22 @@
+import { jsx as s } from "react/jsx-runtime";
+import r from "../../../../../../external/classnames/index.es.js";
+import i from "../tabs.module.scss.es.js";
+import { useTabsContext as l } from "../tabs-context.es.js";
+const m = (a) => {
+  const { id: t, children: e, className: n } = a, { currentTab: o } = l();
+  return t && o !== t ? null : /* @__PURE__ */ s(
+    "div",
+    {
+      "data-name": "tabs-content",
+      id: t ? `${t}-panel` : void 0,
+      role: "tabpanel",
+      "aria-labelledby": t ?? void 0,
+      className: r(i["tedi-tabs__content"], n),
+      children: e
+    }
+  );
+};
+m.displayName = "TabsContent";
+export {
+  m as TabsContent
+};

package/src/tedi/components/navigation/tabs/tabs-context.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),n=e.createContext(null),o=()=>{const t=e.useContext(n);if(!t)throw new Error("Tabs components must be used within <Tabs />");return t};exports.TabsContext=n;exports.useTabsContext=o;

package/src/tedi/components/navigation/tabs/tabs-context.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export type TabsContextValue = {
+    currentTab: string;
+    setCurrentTab: (id: string) => void;
+};
+export declare const TabsContext: React.Context<TabsContextValue | null>;
+export declare const useTabsContext: () => TabsContextValue;

package/src/tedi/components/navigation/tabs/tabs-context.es.js

@@ -0,0 +1,11 @@
+import e, { useContext as o } from "react";
+const n = e.createContext(null), r = () => {
+  const t = o(n);
+  if (!t)
+    throw new Error("Tabs components must be used within <Tabs />");
+  return t;
+};
+export {
+  n as TabsContext,
+  r as useTabsContext
+};

package/src/tedi/components/navigation/tabs/tabs-helpers.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=e=>{if(e.key!=="ArrowLeft"&&e.key!=="ArrowRight"&&e.key!=="Home"&&e.key!=="End")return null;const l=e.currentTarget.closest('[role="tablist"]');if(!l)return null;const t=Array.from(l.querySelectorAll('[role="tab"]:not([disabled])')).filter(a=>getComputedStyle(a).display!=="none"),n=t.indexOf(e.currentTarget);if(t.length===0||n===-1)return null;let r=-1;switch(e.key){case"ArrowLeft":r=n===0?t.length-1:n-1;break;case"ArrowRight":r=n===t.length-1?0:n+1;break;case"Home":r=0;break;case"End":r=t.length-1;break}return r!==-1?(e.preventDefault(),t[r].focus(),t[r].scrollIntoView({block:"nearest",inline:"nearest"}),t[r]):null};exports.navigateTablist=o;

package/src/tedi/components/navigation/tabs/tabs-helpers.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Navigates to a sibling tab in the tablist using ArrowLeft/ArrowRight/Home/End keys.
+ * Returns the target tab element if navigation occurred, or null otherwise.
+ */
+export declare const navigateTablist: (e: React.KeyboardEvent<HTMLButtonElement>) => HTMLButtonElement | null;

package/src/tedi/components/navigation/tabs/tabs-helpers.es.js

@@ -0,0 +1,29 @@
+const o = (e) => {
+  if (e.key !== "ArrowLeft" && e.key !== "ArrowRight" && e.key !== "Home" && e.key !== "End")
+    return null;
+  const l = e.currentTarget.closest('[role="tablist"]');
+  if (!l) return null;
+  const t = Array.from(l.querySelectorAll('[role="tab"]:not([disabled])')).filter(
+    (a) => getComputedStyle(a).display !== "none"
+  ), n = t.indexOf(e.currentTarget);
+  if (t.length === 0 || n === -1) return null;
+  let r = -1;
+  switch (e.key) {
+    case "ArrowLeft":
+      r = n === 0 ? t.length - 1 : n - 1;
+      break;
+    case "ArrowRight":
+      r = n === t.length - 1 ? 0 : n + 1;
+      break;
+    case "Home":
+      r = 0;
+      break;
+    case "End":
+      r = t.length - 1;
+      break;
+  }
+  return r !== -1 ? (e.preventDefault(), t[r].focus(), t[r].scrollIntoView({ block: "nearest", inline: "nearest" }), t[r]) : null;
+};
+export {
+  o as navigateTablist
+};

package/src/tedi/components/navigation/tabs/tabs-list/tabs-list.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),g=require("../../../../../../external/classnames/index.cjs.js"),t=require("react"),D=require("../../../base/icon/icon.cjs.js"),k=require("../../../misc/print/print.cjs.js"),o=require("../../../overlays/dropdown/dropdown.cjs.js"),i=require("../tabs.module.scss.cjs.js"),z=require("../tabs-context.cjs.js"),P=require("../../../../providers/label-provider/use-labels.cjs.js"),A=require("../../../../helpers/hooks/use-scroll-fade.cjs.js"),v=R=>{const{children:a,className:S,"aria-label":j,"aria-labelledby":y,printVisibility:L="show",overflowMode:r="dropdown"}=R,{getLabel:q}=P.useLabels(),{currentTab:W,setCurrentTab:T}=z.useTabsContext(),h=t.useRef(null),c=t.useRef(null),[d,u]=t.useState(!1),f=t.useRef(!1),b=t.useRef(0);f.current=d;const{scrollRef:w,canScrollStart:C,canScrollEnd:M,handleScroll:N}=A.useScrollFade({direction:"horizontal"}),O=t.useCallback(e=>{c.current=e,r==="scroll"&&w(e)},[r,w]),p=t.useMemo(()=>t.Children.toArray(a).filter(t.isValidElement),[a]),m=t.useMemo(()=>{const e=[];return p.forEach(l=>{const n=l.props;e.push({id:n.id,label:n.children,disabled:n.disabled})}),e},[p]),_=r==="dropdown"&&d&&m.length>1,E=m.filter(e=>e.id!==W),I=e=>{e&&T(e)};return t.useLayoutEffect(()=>{if(r!=="dropdown")return;const e=c.current;!e||f.current||(b.current=e.scrollWidth,e.scrollWidth>e.clientWidth&&e.clientWidth>0&&u(!0))},[r,d,p]),t.useEffect(()=>{if(r!=="dropdown")return;const e=h.current,l=c.current;if(!e||!l)return;const n=()=>{f.current?b.current<=e.clientWidth&&u(!1):l.scrollWidth>l.clientWidth&&l.clientWidth>0&&(b.current=l.scrollWidth,u(!0))},x=new ResizeObserver(n);return x.observe(e),()=>x.disconnect()},[r]),s.jsx(k.Print,{visibility:L,children:s.jsxs("div",{ref:h,className:g.default(i.default["tedi-tabs__list-wrapper"],{[i.default["tedi-tabs__list-wrapper--scroll-fade-left"]]:r==="scroll"&&C,[i.default["tedi-tabs__list-wrapper--scroll-fade-right"]]:r==="scroll"&&M}),children:[s.jsx("div",{ref:O,"data-name":"tabs-list",role:"tablist","aria-label":j,"aria-labelledby":y,className:g.default(i.default["tedi-tabs__list"],{[i.default["tedi-tabs__list--overflow"]]:_},{[i.default["tedi-tabs__list--scroll"]]:r==="scroll"},S),onScroll:r==="scroll"?N:void 0,children:a}),_&&s.jsx("div",{className:i.default["tedi-tabs__more-wrapper"],children:s.jsxs(o.Dropdown,{placement:"bottom-end",children:[s.jsx(o.Dropdown.Trigger,{children:s.jsxs("button",{"data-name":"tabs-more-btn",type:"button",className:i.default["tedi-tabs__more-btn"],children:[q("tabs.more"),s.jsx(D.Icon,{name:"expand_more",size:18})]})}),s.jsx(o.Dropdown.Content,{children:E.map((e,l)=>s.jsx(o.Dropdown.Item,{index:l,disabled:e.disabled,onClick:()=>I(e.id),children:e.label},e.id))})]})})]})})};v.displayName="TabsList";exports.TabsList=v;

package/src/tedi/components/navigation/tabs/tabs-list/tabs-list.d.ts

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+import { PrintProps } from '../../../misc/print/print';
+export interface TabsListProps {
+    /**
+     * Tab trigger elements
+     */
+    children: React.ReactNode;
+    /**
+     * Additional class name(s)
+     */
+    className?: string;
+    /**
+     * Accessible label for the tablist
+     */
+    'aria-label'?: string;
+    /**
+     * ID of element labelling the tablist
+     */
+    'aria-labelledby'?: string;
+    /**
+     * Controls visibility when printing
+     * @default 'show'
+     */
+    printVisibility?: PrintProps['visibility'];
+    /**
+     * How to handle tab overflow when tabs don't fit in available space.
+     * - 'dropdown': Shows a dropdown button containing overflowing tabs (default)
+     * - 'scroll': Enables horizontal scrolling with a fade indicator
+     * @default 'dropdown'
+     */
+    overflowMode?: 'dropdown' | 'scroll';
+}
+export declare const TabsList: {
+    (props: TabsListProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TabsList;

package/src/tedi/components/navigation/tabs/tabs-list/tabs-list.es.js

@@ -0,0 +1,102 @@
+import { jsx as s, jsxs as h } from "react/jsx-runtime";
+import R from "../../../../../../external/classnames/index.es.js";
+import i, { useRef as n, useState as A, useCallback as P, useLayoutEffect as V, useEffect as B } from "react";
+import { Icon as D } from "../../../base/icon/icon.es.js";
+import { Print as F } from "../../../misc/print/print.es.js";
+import { Dropdown as a } from "../../../overlays/dropdown/dropdown.es.js";
+import l from "../tabs.module.scss.es.js";
+import { useTabsContext as q } from "../tabs-context.es.js";
+import { useLabels as G } from "../../../../providers/label-provider/use-labels.es.js";
+import { useScrollFade as H } from "../../../../helpers/hooks/use-scroll-fade.es.js";
+const J = (S) => {
+  const {
+    children: c,
+    className: W,
+    "aria-label": L,
+    "aria-labelledby": N,
+    printVisibility: C = "show",
+    overflowMode: r = "dropdown"
+  } = S, { getLabel: T } = G(), { currentTab: x, setCurrentTab: E } = q(), w = n(null), d = n(null), [f, b] = A(!1), m = n(!1), u = n(0);
+  m.current = f;
+  const {
+    scrollRef: _,
+    canScrollStart: I,
+    canScrollEnd: M,
+    handleScroll: O
+  } = H({ direction: "horizontal" }), k = P(
+    (e) => {
+      d.current = e, r === "scroll" && _(e);
+    },
+    [r, _]
+  ), p = i.useMemo(() => i.Children.toArray(c).filter(i.isValidElement), [c]), v = i.useMemo(() => {
+    const e = [];
+    return p.forEach((t) => {
+      const o = t.props;
+      e.push({ id: o.id, label: o.children, disabled: o.disabled });
+    }), e;
+  }, [p]), g = r === "dropdown" && f && v.length > 1, z = v.filter((e) => e.id !== x), j = (e) => {
+    e && E(e);
+  };
+  return V(() => {
+    if (r !== "dropdown") return;
+    const e = d.current;
+    !e || m.current || (u.current = e.scrollWidth, e.scrollWidth > e.clientWidth && e.clientWidth > 0 && b(!0));
+  }, [r, f, p]), B(() => {
+    if (r !== "dropdown") return;
+    const e = w.current, t = d.current;
+    if (!e || !t) return;
+    const o = () => {
+      m.current ? u.current <= e.clientWidth && b(!1) : t.scrollWidth > t.clientWidth && t.clientWidth > 0 && (u.current = t.scrollWidth, b(!0));
+    }, y = new ResizeObserver(o);
+    return y.observe(e), () => y.disconnect();
+  }, [r]), /* @__PURE__ */ s(F, { visibility: C, children: /* @__PURE__ */ h(
+    "div",
+    {
+      ref: w,
+      className: R(l["tedi-tabs__list-wrapper"], {
+        [l["tedi-tabs__list-wrapper--scroll-fade-left"]]: r === "scroll" && I,
+        [l["tedi-tabs__list-wrapper--scroll-fade-right"]]: r === "scroll" && M
+      }),
+      children: [
+        /* @__PURE__ */ s(
+          "div",
+          {
+            ref: k,
+            "data-name": "tabs-list",
+            role: "tablist",
+            "aria-label": L,
+            "aria-labelledby": N,
+            className: R(
+              l["tedi-tabs__list"],
+              { [l["tedi-tabs__list--overflow"]]: g },
+              { [l["tedi-tabs__list--scroll"]]: r === "scroll" },
+              W
+            ),
+            onScroll: r === "scroll" ? O : void 0,
+            children: c
+          }
+        ),
+        g && /* @__PURE__ */ s("div", { className: l["tedi-tabs__more-wrapper"], children: /* @__PURE__ */ h(a, { placement: "bottom-end", children: [
+          /* @__PURE__ */ s(a.Trigger, { children: /* @__PURE__ */ h("button", { "data-name": "tabs-more-btn", type: "button", className: l["tedi-tabs__more-btn"], children: [
+            T("tabs.more"),
+            /* @__PURE__ */ s(D, { name: "expand_more", size: 18 })
+          ] }) }),
+          /* @__PURE__ */ s(a.Content, { children: z.map((e, t) => /* @__PURE__ */ s(
+            a.Item,
+            {
+              index: t,
+              disabled: e.disabled,
+              onClick: () => j(e.id),
+              children: e.label
+            },
+            e.id
+          )) })
+        ] }) })
+      ]
+    }
+  ) });
+};
+J.displayName = "TabsList";
+export {
+  J as TabsList
+};