@tedi-design-system/react 18.0.0-rc.2 → 18.0.0-rc.3

package/package.json

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

package/src/tedi/components/notifications/alert/alert.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),w=require("../../../../../external/classnames/index.cjs.js"),C=require("react"),M=require("../../base/icon/icon.cjs.js"),N=require("../../base/typography/heading/heading.cjs.js"),P=require("../../buttons/closing-button/closing-button.cjs.js"),t=require("./alert.module.scss.cjs.js"),k=require("../../../helpers/hooks/use-is-mounted.cjs.js"),z=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),y=require("../../layout/vertical-spacing/vertical-spacing.cjs.js"),$=require("../../layout/grid/row.cjs.js"),f=require("../../layout/grid/col.cjs.js"),p=l=>{const{getCurrentBreakpointProps:g}=z.useBreakpointProps(l.defaultServerBreakpoint),{children:s,role:i="alert",title:r,className:m,type:n="info",icon:o,onClose:c,isGlobal:h=!1,noSideBorders:j=!1,titleElement:q="h3",size:x="default",...v}=g(l),_=w.default(t.default["tedi-alert"],t.default[`tedi-alert--${n}`],t.default[`tedi-alert--size-${x}`],{[t.default["tedi-alert--global"]]:h,[t.default["tedi-alert--no-side-borders"]]:j},m),b=k.useIsMounted(),B=a=>{const u={size:18},S=typeof a=="string"?{...u,name:a}:{...u,...a};return e.jsx(M.Icon,{...S,className:t.default["tedi-alert__icon"]})},I=i==="alert"?"assertive":i==="status"?"polite":"off",d=C.useId();return b?e.jsx("div",{role:i,"data-name":"alert","aria-label":`${n} alert`,"aria-live":I,"aria-labelledby":r?d:void 0,...v,className:_,children:e.jsxs(y.VerticalSpacing,{size:.25,children:[e.jsxs($.Row,{gutterX:2,alignItems:r?"center":"start",children:[e.jsxs(f.Col,{grow:1,className:t.default["tedi-alert__content"],children:[o&&B(o),e.jsx("div",{className:"tedi-alert__content-wrapper",children:r?e.jsx(N.Heading,{element:q,id:d,modifiers:["h5"],children:r}):s})]}),c&&e.jsx(f.Col,{width:"auto",children:e.jsx(P.ClosingButton,{onClick:c,iconSize:18})})]}),r&&s&&e.jsx("div",{className:"tedi-alert__content-wrapper",children:s})]})}):null};exports.Alert=p;exports.default=p;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),N=require("../../../../../external/classnames/index.cjs.js"),S=require("react"),M=require("../../base/icon/icon.cjs.js"),P=require("../../base/typography/heading/heading.cjs.js"),k=require("../../buttons/closing-button/closing-button.cjs.js"),t=require("./alert.module.scss.cjs.js"),y=require("../../../helpers/hooks/use-is-mounted.cjs.js"),z=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),$=require("../../layout/vertical-spacing/vertical-spacing.cjs.js"),A=require("../../layout/grid/row.cjs.js"),n=require("../../layout/grid/col.cjs.js"),o=c=>{const{getCurrentBreakpointProps:h}=z.useBreakpointProps(c.defaultServerBreakpoint),{children:i,role:s="alert",title:r,className:m,type:d="info",icon:u,onClose:f,action:a,isGlobal:j=!1,noSideBorders:x=!1,titleElement:q="h3",size:v="default",..._}=h(c),B=N.default(t.default["tedi-alert"],t.default[`tedi-alert--${d}`],t.default[`tedi-alert--size-${v}`],{[t.default["tedi-alert--global"]]:j,[t.default["tedi-alert--no-side-borders"]]:x,[t.default["tedi-alert--has-action"]]:!!a},m),b=y.useIsMounted(),I=l=>{const g={size:18},C=typeof l=="string"?{...g,name:l}:{...g,...l};return e.jsx(M.Icon,{...C,className:t.default["tedi-alert__icon"]})},w=s==="alert"?"assertive":s==="status"?"polite":"off",p=S.useId();return b?e.jsx("div",{role:s,"data-name":"alert","aria-label":`${d} alert`,"aria-live":w,"aria-labelledby":r?p:void 0,..._,className:B,children:e.jsxs($.VerticalSpacing,{size:.25,children:[e.jsxs(A.Row,{gutterX:2,alignItems:r?"center":"start",children:[e.jsxs(n.Col,{grow:1,className:t.default["tedi-alert__content"],children:[u&&I(u),e.jsx("div",{className:"tedi-alert__content-wrapper",children:r?e.jsx(P.Heading,{element:q,id:p,modifiers:["h5"],children:r}):i})]}),a?e.jsx(n.Col,{width:"auto",children:a}):f&&e.jsx(n.Col,{width:"auto",children:e.jsx(k.ClosingButton,{onClick:f,iconSize:18})})]}),r&&i&&e.jsx("div",{className:"tedi-alert__content-wrapper",children:i})]})}):null};o.displayName="Alert";exports.Alert=o;exports.default=o;

package/src/tedi/components/notifications/alert/alert.d.ts

@@ -54,8 +54,18 @@ export interface AlertProps extends BreakpointSupport<AlertBreakpointProps> {
      * Callback function triggered when the close button is clicked.
      * Adding this handler renders a close button in the alert.
      * Useful for dismissible alerts.
+     *
+     * Ignored when `action` is also set — the consumer's slot wins, and is
+     * responsible for any close affordance it wants to expose.
      */
     onClose?: () => void;
+    /**
+     * Custom content for the right-side slot of the alert (e.g. a CTA button,
+     * a link, or a small icon stack). Replaces the default close button when
+     * provided. Use this instead of squeezing buttons into `children` so the
+     * layout slot is reserved and aligned consistently.
+     */
+    action?: React.ReactNode;
     /**
      * The ARIA role of the alert, informing screen readers about the alert's purpose.
      * Options:
@@ -80,5 +90,8 @@ export interface AlertProps extends BreakpointSupport<AlertBreakpointProps> {
      */
     titleElement?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
-export declare const Alert: (props: AlertProps) => JSX.Element | null;
+export declare const Alert: {
+    (props: AlertProps): JSX.Element | null;
+    displayName: string;
+};
 export default Alert;

package/src/tedi/components/notifications/alert/alert.es.js

@@ -1,66 +1,69 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
 import k from "../../../../../external/classnames/index.es.js";
-import y from "react";
-import { Icon as P } from "../../base/icon/icon.es.js";
-import { Heading as S } from "../../base/typography/heading/heading.es.js";
-import { ClosingButton as x } from "../../buttons/closing-button/closing-button.es.js";
+import P from "react";
+import { Icon as S } from "../../base/icon/icon.es.js";
+import { Heading as x } from "../../base/typography/heading/heading.es.js";
+import { ClosingButton as M } from "../../buttons/closing-button/closing-button.es.js";
 import t from "./alert.module.scss.es.js";
-import { useIsMounted as M } from "../../../helpers/hooks/use-is-mounted.es.js";
-import { useBreakpointProps as $ } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { VerticalSpacing as j } from "../../layout/vertical-spacing/vertical-spacing.es.js";
+import { useIsMounted as $ } from "../../../helpers/hooks/use-is-mounted.es.js";
+import { useBreakpointProps as j } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { VerticalSpacing as A } from "../../layout/vertical-spacing/vertical-spacing.es.js";
 import { Row as E } from "../../layout/grid/row.es.js";
-import { Col as f } from "../../layout/grid/col.es.js";
-const O = (s) => {
-  const { getCurrentBreakpointProps: u } = $(s.defaultServerBreakpoint), {
+import { Col as n } from "../../layout/grid/col.es.js";
+const R = (d) => {
+  const { getCurrentBreakpointProps: h } = j(d.defaultServerBreakpoint), {
     children: o,
     role: i = "alert",
     title: r,
-    className: h,
-    type: n = "info",
-    icon: d,
-    onClose: c,
-    isGlobal: g = !1,
-    noSideBorders: _ = !1,
-    titleElement: v = "h3",
-    size: I = "default",
-    ...N
-  } = u(s), b = k(
+    className: g,
+    type: c = "info",
+    icon: m,
+    onClose: p,
+    action: a,
+    isGlobal: _ = !1,
+    noSideBorders: v = !1,
+    titleElement: N = "h3",
+    size: B = "default",
+    ...I
+  } = h(d), b = k(
     t["tedi-alert"],
-    t[`tedi-alert--${n}`],
-    t[`tedi-alert--size-${I}`],
+    t[`tedi-alert--${c}`],
+    t[`tedi-alert--size-${B}`],
     {
-      [t["tedi-alert--global"]]: g,
-      [t["tedi-alert--no-side-borders"]]: _
+      [t["tedi-alert--global"]]: _,
+      [t["tedi-alert--no-side-borders"]]: v,
+      [t["tedi-alert--has-action"]]: !!a
     },
-    h
-  ), B = M(), w = (a) => {
-    const p = { size: 18 }, C = typeof a == "string" ? { ...p, name: a } : { ...p, ...a };
-    return /* @__PURE__ */ e(P, { ...C, className: t["tedi-alert__icon"] });
-  }, z = i === "alert" ? "assertive" : i === "status" ? "polite" : "off", m = y.useId();
-  return B ? /* @__PURE__ */ e(
+    g
+  ), w = $(), y = (l) => {
+    const u = { size: 18 }, C = typeof l == "string" ? { ...u, name: l } : { ...u, ...l };
+    return /* @__PURE__ */ e(S, { ...C, className: t["tedi-alert__icon"] });
+  }, z = i === "alert" ? "assertive" : i === "status" ? "polite" : "off", f = P.useId();
+  return w ? /* @__PURE__ */ e(
     "div",
     {
       role: i,
       "data-name": "alert",
-      "aria-label": `${n} alert`,
+      "aria-label": `${c} alert`,
       "aria-live": z,
-      "aria-labelledby": r ? m : void 0,
-      ...N,
+      "aria-labelledby": r ? f : void 0,
+      ...I,
       className: b,
-      children: /* @__PURE__ */ l(j, { size: 0.25, children: [
-        /* @__PURE__ */ l(E, { gutterX: 2, alignItems: r ? "center" : "start", children: [
-          /* @__PURE__ */ l(f, { grow: 1, className: t["tedi-alert__content"], children: [
-            d && w(d),
-            /* @__PURE__ */ e("div", { className: "tedi-alert__content-wrapper", children: r ? /* @__PURE__ */ e(S, { element: v, id: m, modifiers: ["h5"], children: r }) : o })
+      children: /* @__PURE__ */ s(A, { size: 0.25, children: [
+        /* @__PURE__ */ s(E, { gutterX: 2, alignItems: r ? "center" : "start", children: [
+          /* @__PURE__ */ s(n, { grow: 1, className: t["tedi-alert__content"], children: [
+            m && y(m),
+            /* @__PURE__ */ e("div", { className: "tedi-alert__content-wrapper", children: r ? /* @__PURE__ */ e(x, { element: N, id: f, modifiers: ["h5"], children: r }) : o })
           ] }),
-          c && /* @__PURE__ */ e(f, { width: "auto", children: /* @__PURE__ */ e(x, { onClick: c, iconSize: 18 }) })
+          a ? /* @__PURE__ */ e(n, { width: "auto", children: a }) : p && /* @__PURE__ */ e(n, { width: "auto", children: /* @__PURE__ */ e(M, { onClick: p, iconSize: 18 }) })
         ] }),
         r && o && /* @__PURE__ */ e("div", { className: "tedi-alert__content-wrapper", children: o })
       ] })
     }
   ) : null;
 };
+R.displayName = "Alert";
 export {
-  O as Alert,
-  O as default
+  R as Alert,
+  R as default
 };

package/src/tedi/components/notifications/alert/alert.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-alert":"tedi-alert-8ca3e7b9","tedi-alert__content":"tedi-alert__content-d480ed20","tedi-alert__icon":"tedi-alert__icon-f9ab1feb","tedi-alert--size-default":"tedi-alert--size-default-6a9ebe2c","tedi-alert--size-small":"tedi-alert--size-small-4c763cad","tedi-alert--info":"tedi-alert--info-bcd40044","tedi-alert--success":"tedi-alert--success-e6d21f49","tedi-alert--warning":"tedi-alert--warning-88456526","tedi-alert--danger":"tedi-alert--danger-b9a2aa60","tedi-alert--global":"tedi-alert--global-14ff86d0","tedi-alert--no-side-borders":"tedi-alert--no-side-borders-a15a1df0"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-alert":"tedi-alert-8ca3e7b9","tedi-alert__content":"tedi-alert__content-d480ed20","tedi-alert__icon":"tedi-alert__icon-f9ab1feb","tedi-alert--size-default":"tedi-alert--size-default-6a9ebe2c","tedi-alert--size-small":"tedi-alert--size-small-4c763cad","tedi-alert--info":"tedi-alert--info-bcd40044","tedi-alert--success":"tedi-alert--success-e6d21f49","tedi-alert--warning":"tedi-alert--warning-88456526","tedi-alert--danger":"tedi-alert--danger-b9a2aa60","tedi-alert--global":"tedi-alert--global-14ff86d0","tedi-alert--no-side-borders":"tedi-alert--no-side-borders-a15a1df0","tedi-alert--has-action":"tedi-alert--has-action-0140d06a"};exports.default=e;

package/src/tedi/components/notifications/alert/alert.module.scss.es.js

@@ -9,7 +9,8 @@ const e = {
   "tedi-alert--warning": "tedi-alert--warning-88456526",
   "tedi-alert--danger": "tedi-alert--danger-b9a2aa60",
   "tedi-alert--global": "tedi-alert--global-14ff86d0",
-  "tedi-alert--no-side-borders": "tedi-alert--no-side-borders-a15a1df0"
+  "tedi-alert--no-side-borders": "tedi-alert--no-side-borders-a15a1df0",
+  "tedi-alert--has-action": "tedi-alert--has-action-0140d06a"
 };
 export {
   e as default