@tedi-design-system/react 18.0.0-rc.23 → 18.0.0-rc.24

package/package.json

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

package/src/tedi/components/misc/ellipsis/ellipsis.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),f=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),i=require("../../overlays/popover/popover.cjs.js"),v=require("./ellipsis.module.scss.cjs.js"),g=require("../../../helpers/hooks/use-element-size.cjs.js"),h=o=>{const{children:l,lineClamp:r=2,popover:c=!0,className:u,...p}=o,e=t.useRef(null),[a,d]=t.useState(!1),m=g.useElementSize(e);t.useEffect(()=>{e.current&&d(e.current.scrollHeight>e.current.clientHeight)},[e,m]);const n=s.jsx("div",{"data-name":"ellipsis",...p,ref:e,className:f.default(v.default["tedi-ellipsis"],u),style:{lineClamp:r,WebkitLineClamp:r},children:l});return a&&c?s.jsxs(i.Popover,{openWith:"hover",focusManager:{modal:!1},children:[s.jsx(i.Popover.Trigger,{children:n}),s.jsx(i.Popover.Content,{children:l})]}):n};exports.Ellipsis=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),a=require("../../overlays/popover/popover.cjs.js"),i=require("./ellipsis.module.scss.cjs.js"),x=require("../../../helpers/hooks/use-element-size.cjs.js"),g=d=>{const{children:l,lineClamp:r=2,position:s="end",popover:p=!0,className:u,...m}=d,n=o.useRef(null),[f,h]=o.useState(!1),v=x.useElementSize(n);o.useEffect(()=>{const t=n.current;t&&h(s==="start"?t.scrollWidth>t.clientWidth:t.scrollHeight>t.clientHeight)},[v,s,r]);const c=e.jsx("div",{"data-name":"ellipsis",...m,ref:n,className:j.default(i.default["tedi-ellipsis"],{[i.default["tedi-ellipsis--start"]]:s==="start"},u),style:s==="end"?{lineClamp:r,WebkitLineClamp:r}:void 0,children:s==="start"?e.jsx("span",{className:i.default["tedi-ellipsis__inner"],children:l}):l});return f&&p?e.jsxs(a.Popover,{openWith:"hover",focusManager:{modal:!1},children:[e.jsx(a.Popover.Trigger,{children:c}),e.jsx(a.Popover.Content,{children:e.jsx("span",{className:i.default["tedi-ellipsis__overlay"],children:l})})]}):c};exports.Ellipsis=g;

package/src/tedi/components/misc/ellipsis/ellipsis.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+export type EllipsisPosition = 'start' | 'end';
 export interface EllipsisProps {
     /**
      * The content to be displayed inside the ellipsis container.
@@ -6,10 +7,19 @@ export interface EllipsisProps {
     children: React.ReactNode;
     /**
      * The maximum number of lines before truncating the text with an ellipsis.
-     * If the content exceeds this limit, it will be truncated.
+     * If the content exceeds this limit, it will be truncated. Applies to the
+     * `end` (multi-line) position only.
      * @default 2
      */
     lineClamp?: number;
+    /**
+     * Where the ellipsis is placed.
+     * - `end` — trailing ellipsis, multi-line (clamped by `lineClamp`).
+     * - `start` — leading ellipsis, single-line (keeps the end of the text visible,
+     *   e.g. for file paths or IDs).
+     * @default end
+     */
+    position?: EllipsisPosition;
     /**
      * Determines whether a popover should be displayed when the text is truncated.
      * If `true`, hovering over the truncated text will show the full content in a popover.

package/src/tedi/components/misc/ellipsis/ellipsis.es.js

@@ -1,30 +1,37 @@
-import { jsx as s, jsxs as d } from "react/jsx-runtime";
-import h from "../../../../../external/classnames/index.es.js";
-import t from "react";
-import { Popover as l } from "../../overlays/popover/popover.es.js";
-import g from "./ellipsis.module.scss.es.js";
+import { jsx as t, jsxs as _ } from "react/jsx-runtime";
+import g from "../../../../../external/classnames/index.es.js";
+import o from "react";
+import { Popover as a } from "../../overlays/popover/popover.es.js";
+import i from "./ellipsis.module.scss.es.js";
 import { useElementSize as E } from "../../../helpers/hooks/use-element-size.es.js";
-const j = (n) => {
-  const { children: r, lineClamp: i = 2, popover: m = !0, className: c, ...a } = n, e = t.useRef(null), [p, f] = t.useState(!1), u = E(e);
-  t.useEffect(() => {
-    e.current && f(e.current.scrollHeight > e.current.clientHeight);
-  }, [e, u]);
-  const o = /* @__PURE__ */ s(
+const S = (m) => {
+  const { children: l, lineClamp: r = 2, position: e = "end", popover: p = !0, className: d, ...f } = m, n = o.useRef(null), [h, u] = o.useState(!1), v = E(n);
+  o.useEffect(() => {
+    const s = n.current;
+    s && u(
+      e === "start" ? s.scrollWidth > s.clientWidth : s.scrollHeight > s.clientHeight
+    );
+  }, [v, e, r]);
+  const c = /* @__PURE__ */ t(
     "div",
     {
       "data-name": "ellipsis",
-      ...a,
-      ref: e,
-      className: h(g["tedi-ellipsis"], c),
-      style: { lineClamp: i, WebkitLineClamp: i },
-      children: r
+      ...f,
+      ref: n,
+      className: g(
+        i["tedi-ellipsis"],
+        { [i["tedi-ellipsis--start"]]: e === "start" },
+        d
+      ),
+      style: e === "end" ? { lineClamp: r, WebkitLineClamp: r } : void 0,
+      children: e === "start" ? /* @__PURE__ */ t("span", { className: i["tedi-ellipsis__inner"], children: l }) : l
     }
   );
-  return p && m ? /* @__PURE__ */ d(l, { openWith: "hover", focusManager: { modal: !1 }, children: [
-    /* @__PURE__ */ s(l.Trigger, { children: o }),
-    /* @__PURE__ */ s(l.Content, { children: r })
-  ] }) : o;
+  return h && p ? /* @__PURE__ */ _(a, { openWith: "hover", focusManager: { modal: !1 }, children: [
+    /* @__PURE__ */ t(a.Trigger, { children: c }),
+    /* @__PURE__ */ t(a.Content, { children: /* @__PURE__ */ t("span", { className: i["tedi-ellipsis__overlay"], children: l }) })
+  ] }) : c;
 };
 export {
-  j as Ellipsis
+  S as Ellipsis
 };

package/src/tedi/components/misc/ellipsis/ellipsis.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-ellipsis":"tedi-ellipsis-d1aa2d79"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-ellipsis":"tedi-ellipsis-d1aa2d79","tedi-ellipsis--start":"tedi-ellipsis--start-550aca21","tedi-ellipsis__inner":"tedi-ellipsis__inner-47eb4adf","tedi-ellipsis__overlay":"tedi-ellipsis__overlay-7426462d"};exports.default=e;

package/src/tedi/components/misc/ellipsis/ellipsis.module.scss.es.js

@@ -1,6 +1,9 @@
-const s = {
-  "tedi-ellipsis": "tedi-ellipsis-d1aa2d79"
+const i = {
+  "tedi-ellipsis": "tedi-ellipsis-d1aa2d79",
+  "tedi-ellipsis--start": "tedi-ellipsis--start-550aca21",
+  "tedi-ellipsis__inner": "tedi-ellipsis__inner-47eb4adf",
+  "tedi-ellipsis__overlay": "tedi-ellipsis__overlay-7426462d"
 };
 export {
-  s as default
+  i as default
 };

package/src/tedi/components/tags/tag/tag.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),g=require("../../../../../external/classnames/index.cjs.js"),p=require("../../base/icon/icon.cjs.js"),f=require("../../buttons/closing-button/closing-button.cjs.js"),_=require("../../loaders/spinner/spinner.cjs.js"),e=require("./tag.module.scss.cjs.js"),m=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),j=s=>{const{getCurrentBreakpointProps:i}=m.useBreakpointProps(s.defaultServerBreakpoint),{children:n,className:l,onClose:r,closeButtonProps:c,isLoading:a=!1,color:o="primary",...d}=i(s),u=g.default(e.default["tedi-tag"],o&&e.default[`tedi-tag--color-${o}`],r&&!a&&e.default["tedi-tag__close"],l);return t.jsxs("div",{className:u,role:"status","aria-live":a?"polite":void 0,...d,children:[o==="danger"&&t.jsx("div",{className:e.default["tedi-tag__icon-wrapper"],children:t.jsx(p.Icon,{name:"info",color:"danger",size:16,className:e.default["tedi-tag__icon--error"]})}),t.jsx("div",{className:e.default["tedi-tag__content"],children:n}),a&&!r&&t.jsx("div",{className:e.default["tedi-tag__icon-wrapper"],children:t.jsx(_.Spinner,{className:e.default["tedi-tag__loader"]})}),!a&&r&&t.jsx(f.ClosingButton,{iconSize:18,...c,onClick:r})]})};exports.Tag=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),g=require("../../../../../external/classnames/index.cjs.js"),f=require("../../base/icon/icon.cjs.js"),m=require("../../buttons/closing-button/closing-button.cjs.js"),_=require("../../loaders/spinner/spinner.cjs.js"),j=require("../../misc/ellipsis/ellipsis.cjs.js"),e=require("./tag.module.scss.cjs.js"),x=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),q=l=>{const{getCurrentBreakpointProps:n}=x.useBreakpointProps(l.defaultServerBreakpoint),{children:o,className:c,onClose:s,closeButtonProps:d,isLoading:i=!1,color:a="primary",ellipsis:r=!1,...u}=n(l),p=g.default(e.default["tedi-tag"],a&&e.default[`tedi-tag--color-${a}`],s&&!i&&e.default["tedi-tag__close"],r!==!1&&e.default["tedi-tag--ellipsis"],c);return t.jsxs("div",{className:p,role:"status","aria-live":i?"polite":void 0,...u,children:[a==="danger"&&t.jsx("div",{className:e.default["tedi-tag__icon-wrapper"],children:t.jsx(f.Icon,{name:"info",color:"danger",size:16,className:e.default["tedi-tag__icon--error"]})}),t.jsx("div",{className:e.default["tedi-tag__content"],children:r!==!1?t.jsx(j.Ellipsis,{position:r==="start"?"start":"end",lineClamp:1,children:o}):o}),i&&!s&&t.jsx("div",{className:e.default["tedi-tag__icon-wrapper"],children:t.jsx(_.Spinner,{className:e.default["tedi-tag__loader"]})}),!i&&s&&t.jsx(m.ClosingButton,{iconSize:18,...d,onClick:s})]})};exports.Tag=q;

package/src/tedi/components/tags/tag/tag.d.ts

@@ -2,6 +2,7 @@ import { MouseEventHandler } from 'react';
 import { BreakpointSupport } from '../../../helpers';
 import { ClosingButtonProps } from '../../buttons/closing-button/closing-button';
 type TagColor = 'primary' | 'secondary' | 'danger';
+export type TagEllipsis = 'start' | 'end' | false;
 type TagBreakpointProps = {
     /**
      * Determines Tag color
@@ -9,6 +10,15 @@ type TagBreakpointProps = {
      * @default 'primary'
      */
     color?: TagColor;
+    /**
+     * Truncates the label when the Tag is width-constrained, revealing the full text
+     * in a popover on hover/focus. `end` shows a trailing ellipsis (`Long label…`);
+     * `start` shows a leading one (`…label`), keeping the most significant tail
+     * (e.g. dates, IDs) visible. `false` never truncates — the label wraps and the
+     * Tag keeps its full width.
+     * @default false
+     */
+    ellipsis?: TagEllipsis;
     /**
      * Additional classes to apply custom styles to the Tag.
      */

package/src/tedi/components/tags/tag/tag.es.js

@@ -1,32 +1,35 @@
-import { jsxs as p, jsx as o } from "react/jsx-runtime";
-import g from "../../../../../external/classnames/index.es.js";
+import { jsxs as g, jsx as i } from "react/jsx-runtime";
+import f from "../../../../../external/classnames/index.es.js";
 import { Icon as _ } from "../../base/icon/icon.es.js";
-import { ClosingButton as f } from "../../buttons/closing-button/closing-button.es.js";
-import { Spinner as N } from "../../loaders/spinner/spinner.es.js";
+import { ClosingButton as N } from "../../buttons/closing-button/closing-button.es.js";
+import { Spinner as u } from "../../loaders/spinner/spinner.es.js";
+import { Ellipsis as v } from "../../misc/ellipsis/ellipsis.es.js";
 import e from "./tag.module.scss.es.js";
-import { useBreakpointProps as u } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-const S = (a) => {
-  const { getCurrentBreakpointProps: s } = u(a.defaultServerBreakpoint), {
-    children: n,
+import { useBreakpointProps as B } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const y = (a) => {
+  const { getCurrentBreakpointProps: n } = B(a.defaultServerBreakpoint), {
+    children: l,
     className: c,
-    onClose: r,
-    closeButtonProps: l,
+    onClose: o,
+    closeButtonProps: m,
     isLoading: t = !1,
-    color: i = "primary",
-    ...m
-  } = s(a), d = g(
+    color: r = "primary",
+    ellipsis: s = !1,
+    ...d
+  } = n(a), p = f(
     e["tedi-tag"],
-    i && e[`tedi-tag--color-${i}`],
-    r && !t && e["tedi-tag__close"],
+    r && e[`tedi-tag--color-${r}`],
+    o && !t && e["tedi-tag__close"],
+    s !== !1 && e["tedi-tag--ellipsis"],
     c
   );
-  return /* @__PURE__ */ p("div", { className: d, role: "status", "aria-live": t ? "polite" : void 0, ...m, children: [
-    i === "danger" && /* @__PURE__ */ o("div", { className: e["tedi-tag__icon-wrapper"], children: /* @__PURE__ */ o(_, { name: "info", color: "danger", size: 16, className: e["tedi-tag__icon--error"] }) }),
-    /* @__PURE__ */ o("div", { className: e["tedi-tag__content"], children: n }),
-    t && !r && /* @__PURE__ */ o("div", { className: e["tedi-tag__icon-wrapper"], children: /* @__PURE__ */ o(N, { className: e["tedi-tag__loader"] }) }),
-    !t && r && /* @__PURE__ */ o(f, { iconSize: 18, ...l, onClick: r })
+  return /* @__PURE__ */ g("div", { className: p, role: "status", "aria-live": t ? "polite" : void 0, ...d, children: [
+    r === "danger" && /* @__PURE__ */ i("div", { className: e["tedi-tag__icon-wrapper"], children: /* @__PURE__ */ i(_, { name: "info", color: "danger", size: 16, className: e["tedi-tag__icon--error"] }) }),
+    /* @__PURE__ */ i("div", { className: e["tedi-tag__content"], children: s !== !1 ? /* @__PURE__ */ i(v, { position: s === "start" ? "start" : "end", lineClamp: 1, children: l }) : l }),
+    t && !o && /* @__PURE__ */ i("div", { className: e["tedi-tag__icon-wrapper"], children: /* @__PURE__ */ i(u, { className: e["tedi-tag__loader"] }) }),
+    !t && o && /* @__PURE__ */ i(N, { iconSize: 18, ...m, onClick: o })
   ] });
 };
 export {
-  S as Tag
+  y as Tag
 };

package/src/tedi/components/tags/tag/tag.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-tag":"tedi-tag-f6a58785","tedi-tag--color-primary":"tedi-tag--color-primary-a7b92fc1","tedi-tag--color-secondary":"tedi-tag--color-secondary-9ff6c8ce","tedi-tag--color-danger":"tedi-tag--color-danger-83bf0f2f","tedi-tag__content":"tedi-tag__content-b8cbfd6c","tedi-tag__icon-wrapper":"tedi-tag__icon-wrapper-f3c4be0a","tedi-tag__loader":"tedi-tag__loader-41807639","tedi-tag__close":"tedi-tag__close-81b1ded6"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-tag":"tedi-tag-f6a58785","tedi-tag--color-primary":"tedi-tag--color-primary-a7b92fc1","tedi-tag--color-secondary":"tedi-tag--color-secondary-9ff6c8ce","tedi-tag--color-danger":"tedi-tag--color-danger-83bf0f2f","tedi-tag__content":"tedi-tag__content-b8cbfd6c","tedi-tag--ellipsis":"tedi-tag--ellipsis-75548e81","tedi-tag__icon-wrapper":"tedi-tag__icon-wrapper-f3c4be0a","tedi-tag__loader":"tedi-tag__loader-41807639","tedi-tag__close":"tedi-tag__close-81b1ded6"};exports.default=e;

package/src/tedi/components/tags/tag/tag.module.scss.es.js

@@ -4,6 +4,7 @@ const t = {
   "tedi-tag--color-secondary": "tedi-tag--color-secondary-9ff6c8ce",
   "tedi-tag--color-danger": "tedi-tag--color-danger-83bf0f2f",
   "tedi-tag__content": "tedi-tag__content-b8cbfd6c",
+  "tedi-tag--ellipsis": "tedi-tag--ellipsis-75548e81",
   "tedi-tag__icon-wrapper": "tedi-tag__icon-wrapper-f3c4be0a",
   "tedi-tag__loader": "tedi-tag__loader-41807639",
   "tedi-tag__close": "tedi-tag__close-81b1ded6"