@tedi-design-system/react 17.0.0-rc.7 → 17.0.0

package/package.json

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

package/src/tedi/components/buttons/button-group/button-group.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),n=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),m=require("../button/button.cjs.js"),e=require("./button-group.module.scss.cjs.js"),g=s=>{const{children:l,className:d,type:p="primary",onSelectionChange:u,stretch:b=!1,ariaLabel:c,size:r="default"}=s;return f.jsx("div",{className:n.default(e.default["tedi-button-group"],e.default[`tedi-button-group--${p}`],{[e.default["tedi-button-group--stretch"]]:b},d),role:"group","aria-label":c,children:o.Children.map(l,t=>o.isValidElement(t)&&t.type===m.Button?o.cloneElement(t,{className:n.default(e.default["tedi-button-group__item"],{[e.default["tedi-button-group__item--active"]]:t.props.isActive,[e.default["tedi-button-group__item--disabled"]]:t.props.disabled,[e.default[`tedi-button-group__item--size-${r}`]]:r}),size:r,onClick:()=>{var i,a;t.props.disabled||((a=(i=t.props).onClick)==null||a.call(i),u==null||u(t.props.id))}}):null)})};exports.ButtonGroup=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),g=require("../../../../../external/classnames/index.cjs.js"),_=require("react"),n=require("../../base/icon/icon.cjs.js"),j=require("../button/button.cjs.js"),r=require("./button-group.module.scss.cjs.js"),B=require("../../../providers/label-provider/use-labels.cjs.js"),L=require("../../../helpers/hooks/use-breakpoint.cjs.js"),l=require("../../overlays/dropdown/dropdown.cjs.js"),C=x=>{const{getLabel:b}=B.useLabels(),{children:k,className:w,type:c="primary",onSelectionChange:i,stretch:q=!1,ariaLabel:I,size:f="default",enableMobileDropdown:v=!1,mobileBreakpoint:N="md",dropdownLabel:y=b("sidenav.submenu"),dropdownLabelMode:R="static"}=x,A=L.default(),D=L.isBreakpointBelow(A,N),m=_.Children.toArray(k).filter(e=>_.isValidElement(e)&&e.type===j.Button),t=m.find(e=>e.props.isActive),M=R==="static"?y:(t==null?void 0:t.props.children)??y,d=t==null?void 0:t.props.iconLeft,a=t==null?void 0:t.props.icon;return D&&v?o.jsxs(l.Dropdown,{width:"trigger",children:[o.jsx(l.Dropdown.Trigger,{children:o.jsxs(j.Button,{visualType:c,className:g.default(r.default["tedi-button-group__dropdown-trigger"],r.default[`tedi-button-group__dropdown-trigger--${c}`],w),noStyle:!0,fullWidth:!0,children:[d?o.jsx(n.Icon,{name:typeof d=="string"?d:d.name,color:"inherit"}):a?o.jsx(n.Icon,{name:typeof a=="string"?a:a.name,color:"inherit"}):o.jsx(n.Icon,{name:"menu",color:"inherit"}),M]})}),o.jsx(l.Dropdown.Content,{children:m.map((e,u)=>o.jsxs(l.Dropdown.Item,{index:u,active:e==null?void 0:e.props.isActive,disabled:e==null?void 0:e.props.disabled,onClick:s=>{var p,h;e.props.disabled||(s.type==="click"&&((h=(p=e.props).onClick)==null||h.call(p,s)),e.props.id&&(i==null||i(e.props.id)))},className:r.default["tedi-button-group__dropdown-item"],children:[e.props.iconLeft&&o.jsx(n.Icon,{name:typeof e.props.iconLeft=="string"?e.props.iconLeft:e.props.iconLeft.name,color:"inherit"}),e.props.children,e.props.iconRight&&o.jsx(n.Icon,{name:typeof e.props.iconRight=="string"?e.props.iconRight:e.props.iconRight.name,color:"inherit"})]},e.props.id||u))})]}):o.jsx("div",{className:g.default(r.default["tedi-button-group"],r.default[`tedi-button-group--${c}`],{[r.default["tedi-button-group--stretch"]]:q},w),role:"group","aria-label":I,children:m.map(e=>_.cloneElement(e,{className:g.default(r.default["tedi-button-group__item"],{[r.default["tedi-button-group__item--active"]]:e.props.isActive,[r.default["tedi-button-group__item--disabled"]]:e.props.disabled,[r.default[`tedi-button-group__item--size-${f}`]]:f},e.props.className),size:f,onClick:u=>{var s,p;(p=(s=e.props).onClick)==null||p.call(s,u),e.props.id&&(i==null||i(e.props.id))}}))})};exports.ButtonGroup=C;

package/src/tedi/components/buttons/button-group/button-group.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { Breakpoint } from '../../../helpers';
 export type ButtonGroupProps = {
     /**
      * The child components to render inside the ButtonGroup.
@@ -35,6 +36,22 @@ export type ButtonGroupProps = {
      * Size of the buttons in ButtonGroup
      */
     size?: 'default' | 'small';
+    /**
+     * Whether the button group should collapse into a dropdown on mobile
+     * @default false
+     */
+    enableMobileDropdown?: boolean;
+    /**
+     * Breakpoint at which to switch to dropdown
+     * @default 'md'
+     */
+    mobileBreakpoint?: Breakpoint;
+    /**
+     * Label to display on the dropdown trigger button when the button group collapses on mobile.
+     * If not provided, the label provider value for `sidenav.submenu` will be used as fallback.
+     */
+    dropdownLabel?: string;
+    dropdownLabelMode?: 'active' | 'static';
 };
 export declare const ButtonGroup: (props: ButtonGroupProps) => JSX.Element;
 export default ButtonGroup;

package/src/tedi/components/buttons/button-group/button-group.es.js

@@ -1,46 +1,109 @@
-import { jsx as b } from "react/jsx-runtime";
-import s from "../../../../../external/classnames/index.es.js";
-import { Children as f, isValidElement as _, cloneElement as c } from "react";
-import { Button as g } from "../button/button.es.js";
-import e from "./button-group.module.scss.es.js";
-const z = (u) => {
-  const {
-    children: a,
-    className: m,
-    type: n = "primary",
-    onSelectionChange: r,
-    stretch: l = !1,
-    ariaLabel: d,
-    size: o = "default"
-  } = u;
-  return /* @__PURE__ */ b(
+import { jsxs as g, jsx as i } from "react/jsx-runtime";
+import _ from "../../../../../external/classnames/index.es.js";
+import { Children as x, isValidElement as z, cloneElement as D } from "react";
+import { Icon as a } from "../../base/icon/icon.es.js";
+import { Button as w } from "../button/button.es.js";
+import r from "./button-group.module.scss.es.js";
+import { useLabels as E } from "../../../providers/label-provider/use-labels.es.js";
+import T, { isBreakpointBelow as V } from "../../../helpers/hooks/use-breakpoint.es.js";
+import { Dropdown as c } from "../../overlays/dropdown/dropdown.es.js";
+const P = (k) => {
+  const { getLabel: N } = E(), {
+    children: b,
+    className: h,
+    type: d = "primary",
+    onSelectionChange: p,
+    stretch: v = !1,
+    ariaLabel: A,
+    size: u = "default",
+    enableMobileDropdown: I = !1,
+    mobileBreakpoint: R = "md",
+    dropdownLabel: y = N("sidenav.submenu"),
+    dropdownLabelMode: C = "static"
+  } = k, M = T(), $ = V(M, R), f = x.toArray(b).filter(
+    (o) => z(o) && o.type === w
+  ), e = f.find((o) => o.props.isActive), j = C === "static" ? y : (e == null ? void 0 : e.props.children) ?? y, n = e == null ? void 0 : e.props.iconLeft, l = e == null ? void 0 : e.props.icon;
+  return $ && I ? /* @__PURE__ */ g(c, { width: "trigger", children: [
+    /* @__PURE__ */ i(c.Trigger, { children: /* @__PURE__ */ g(
+      w,
+      {
+        visualType: d,
+        className: _(
+          r["tedi-button-group__dropdown-trigger"],
+          r[`tedi-button-group__dropdown-trigger--${d}`],
+          h
+        ),
+        noStyle: !0,
+        fullWidth: !0,
+        children: [
+          n ? /* @__PURE__ */ i(a, { name: typeof n == "string" ? n : n.name, color: "inherit" }) : l ? /* @__PURE__ */ i(a, { name: typeof l == "string" ? l : l.name, color: "inherit" }) : /* @__PURE__ */ i(a, { name: "menu", color: "inherit" }),
+          j
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ i(c.Content, { children: f.map((o, m) => /* @__PURE__ */ g(
+      c.Item,
+      {
+        index: m,
+        active: o == null ? void 0 : o.props.isActive,
+        disabled: o == null ? void 0 : o.props.disabled,
+        onClick: (s) => {
+          var t, L;
+          o.props.disabled || (s.type === "click" && ((L = (t = o.props).onClick) == null || L.call(t, s)), o.props.id && (p == null || p(o.props.id)));
+        },
+        className: r["tedi-button-group__dropdown-item"],
+        children: [
+          o.props.iconLeft && /* @__PURE__ */ i(
+            a,
+            {
+              name: typeof o.props.iconLeft == "string" ? o.props.iconLeft : o.props.iconLeft.name,
+              color: "inherit"
+            }
+          ),
+          o.props.children,
+          o.props.iconRight && /* @__PURE__ */ i(
+            a,
+            {
+              name: typeof o.props.iconRight == "string" ? o.props.iconRight : o.props.iconRight.name,
+              color: "inherit"
+            }
+          )
+        ]
+      },
+      o.props.id || m
+    )) })
+  ] }) : /* @__PURE__ */ i(
     "div",
     {
-      className: s(
-        e["tedi-button-group"],
-        e[`tedi-button-group--${n}`],
-        {
-          [e["tedi-button-group--stretch"]]: l
-        },
-        m
+      className: _(
+        r["tedi-button-group"],
+        r[`tedi-button-group--${d}`],
+        { [r["tedi-button-group--stretch"]]: v },
+        h
       ),
       role: "group",
-      "aria-label": d,
-      children: f.map(a, (t) => _(t) && t.type === g ? c(t, {
-        className: s(e["tedi-button-group__item"], {
-          [e["tedi-button-group__item--active"]]: t.props.isActive,
-          [e["tedi-button-group__item--disabled"]]: t.props.disabled,
-          [e[`tedi-button-group__item--size-${o}`]]: o
-        }),
-        size: o,
-        onClick: () => {
-          var i, p;
-          t.props.disabled || ((p = (i = t.props).onClick) == null || p.call(i), r == null || r(t.props.id));
-        }
-      }) : null)
+      "aria-label": A,
+      children: f.map(
+        (o) => D(o, {
+          className: _(
+            r["tedi-button-group__item"],
+            {
+              [r["tedi-button-group__item--active"]]: o.props.isActive,
+              [r["tedi-button-group__item--disabled"]]: o.props.disabled,
+              [r[`tedi-button-group__item--size-${u}`]]: u
+            },
+            o.props.className
+          ),
+          size: u,
+          onClick: (m) => {
+            var s, t;
+            (t = (s = o.props).onClick) == null || t.call(s, m), o.props.id && (p == null || p(o.props.id));
+          }
+        })
+      )
     }
   );
 };
 export {
-  z as ButtonGroup
+  P as ButtonGroup
 };

package/src/tedi/components/buttons/button-group/button-group.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-button-group":"tedi-button-group-a1579a0b","tedi-button-group--primary":"tedi-button-group--primary-c12d7511","tedi-button-group__item":"tedi-button-group__item-8dedbcd6","tedi-button-group--secondary":"tedi-button-group--secondary-812a4d06","tedi-button-group__item--size-default":"tedi-button-group__item--size-default-5ee2d72b","tedi-button-group__item--size-small":"tedi-button-group__item--size-small-ad13cc00","tedi-button-group__item--disabled":"tedi-button-group__item--disabled-0027448e","tedi-button-group__item--active":"tedi-button-group__item--active-d4dfddb6","tedi-button-group--stretch":"tedi-button-group--stretch-d703f880"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-button-group":"tedi-button-group-a1579a0b","tedi-button-group--primary":"tedi-button-group--primary-c12d7511","tedi-button-group__item":"tedi-button-group__item-8dedbcd6","tedi-button-group--secondary":"tedi-button-group--secondary-812a4d06","tedi-button-group__item--size-default":"tedi-button-group__item--size-default-5ee2d72b","tedi-button-group__item--size-small":"tedi-button-group__item--size-small-ad13cc00","tedi-button-group__item--disabled":"tedi-button-group__item--disabled-0027448e","tedi-button-group__item--active":"tedi-button-group__item--active-d4dfddb6","tedi-button-group--stretch":"tedi-button-group--stretch-d703f880","tedi-button-group__dropdown-trigger":"tedi-button-group__dropdown-trigger-d9a66a44","tedi-button-group__dropdown-trigger--secondary":"tedi-button-group__dropdown-trigger--secondary-f27a5e3a","tedi-button-group__dropdown-item":"tedi-button-group__dropdown-item-e3e89bd0"};exports.default=t;

package/src/tedi/components/buttons/button-group/button-group.module.scss.es.js

@@ -7,7 +7,10 @@ const t = {
   "tedi-button-group__item--size-small": "tedi-button-group__item--size-small-ad13cc00",
   "tedi-button-group__item--disabled": "tedi-button-group__item--disabled-0027448e",
   "tedi-button-group__item--active": "tedi-button-group__item--active-d4dfddb6",
-  "tedi-button-group--stretch": "tedi-button-group--stretch-d703f880"
+  "tedi-button-group--stretch": "tedi-button-group--stretch-d703f880",
+  "tedi-button-group__dropdown-trigger": "tedi-button-group__dropdown-trigger-d9a66a44",
+  "tedi-button-group__dropdown-trigger--secondary": "tedi-button-group__dropdown-trigger--secondary-f27a5e3a",
+  "tedi-button-group__dropdown-item": "tedi-button-group__dropdown-item-e3e89bd0"
 };
 export {
   t as default

package/src/tedi/components/overlays/dropdown/dropdown-item/dropdown-item.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("react/jsx-runtime"),j=require("../../../../../../external/classnames/index.cjs.js"),T=require("../dropdown-context.cjs.js"),r=require("./dropdown-item.module.scss.cjs.js"),K=({children:m,onClick:t,disabled:n,active:c,index:u,indent:i,asChild:o=!1,closeOnSelect:p=!0,isParent:w=!1,className:y})=>{const{getItemProps:_,listItemsRef:l,setOpen:s,activeIndex:v,divided:b,variant:f}=T.useDropdownContext(),x=o?"div":"button",I=e=>typeof e!="number"?{}:{"--dropdown-indent-level":e,"--dropdown-indent":`${e}rem`},g=e=>{if(n)return;const d=e.currentTarget.querySelector('input[type="checkbox"], input[type="radio"]');if(d){d.click();return}o?t==null||t(e):(t==null||t(e),p&&s(!1))},q=e=>{if(!n&&(e.key==="Enter"||e.key===" ")){e.preventDefault();const d=e.currentTarget.querySelector('input[type="checkbox"], input[type="radio"]');d?d.click():t==null||t(e),!o&&p&&s(!1)}},a={ref(e){typeof u=="number"&&(l.current[u]=e)},tabIndex:v===u?0:-1,className:j.default(r.default["tedi-dropdown__item"],{[r.default["tedi-dropdown__item--active"]]:c,[r.default["tedi-dropdown__item--disabled"]]:n,[r.default["tedi-dropdown__item--divided"]]:b,[r.default["tedi-dropdown__item--indent"]]:i,[r.default["tedi-dropdown__item--tree-item"]]:f==="tree"&&i,[r.default["tedi-dropdown__item--tree-parent"]]:f==="tree"&&w,className:y}),style:I(i),onClick:g,onKeyDown:q},D=o&&p===!1?a:_({role:"menuitem",disabled:o?void 0:n,...a});return P.jsx(x,{...D,children:m})};exports.DropdownItem=K;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("react/jsx-runtime"),j=require("../../../../../../external/classnames/index.cjs.js"),T=require("../dropdown-context.cjs.js"),r=require("./dropdown-item.module.scss.cjs.js"),K=({children:m,onClick:t,disabled:n,active:c,index:u,indent:i,asChild:o=!1,closeOnSelect:p=!0,isParent:w=!1,className:y})=>{const{getItemProps:_,listItemsRef:l,setOpen:s,activeIndex:v,divided:b,variant:f}=T.useDropdownContext(),x=o?"div":"button",I=e=>typeof e!="number"?{}:{"--dropdown-indent-level":e,"--dropdown-indent":`${e}rem`},g=e=>{if(n)return;const d=e.currentTarget.querySelector('input[type="checkbox"], input[type="radio"]');if(d){d.click();return}o?t==null||t(e):(t==null||t(e),p&&s(!1))},q=e=>{if(!n&&(e.key==="Enter"||e.key===" ")){e.preventDefault();const d=e.currentTarget.querySelector('input[type="checkbox"], input[type="radio"]');d?d.click():t==null||t(e),!o&&p&&s(!1)}},a={ref(e){typeof u=="number"&&(l.current[u]=e)},tabIndex:v===u?0:-1,className:j.default(r.default["tedi-dropdown__item"],{[r.default["tedi-dropdown__item--active"]]:c,[r.default["tedi-dropdown__item--disabled"]]:n,[r.default["tedi-dropdown__item--divided"]]:b,[r.default["tedi-dropdown__item--indent"]]:i,[r.default["tedi-dropdown__item--tree-item"]]:f==="tree"&&i,[r.default["tedi-dropdown__item--tree-parent"]]:f==="tree"&&w},y),style:I(i),onClick:g,onKeyDown:q},D=o&&p===!1?a:_({role:"menuitem",disabled:o?void 0:n,...a});return P.jsx(x,{...D,children:m})};exports.DropdownItem=K;

package/src/tedi/components/overlays/dropdown/dropdown-item/dropdown-item.es.js

@@ -40,15 +40,18 @@ const V = ({
       typeof d == "number" && (v.current[d] = e);
     },
     tabIndex: b === d ? 0 : -1,
-    className: N(r["tedi-dropdown__item"], {
-      [r["tedi-dropdown__item--active"]]: y,
-      [r["tedi-dropdown__item--disabled"]]: p,
-      [r["tedi-dropdown__item--divided"]]: x,
-      [r["tedi-dropdown__item--indent"]]: i,
-      [r["tedi-dropdown__item--tree-item"]]: f === "tree" && i,
-      [r["tedi-dropdown__item--tree-parent"]]: f === "tree" && _,
-      className: w
-    }),
+    className: N(
+      r["tedi-dropdown__item"],
+      {
+        [r["tedi-dropdown__item--active"]]: y,
+        [r["tedi-dropdown__item--disabled"]]: p,
+        [r["tedi-dropdown__item--divided"]]: x,
+        [r["tedi-dropdown__item--indent"]]: i,
+        [r["tedi-dropdown__item--tree-item"]]: f === "tree" && i,
+        [r["tedi-dropdown__item--tree-parent"]]: f === "tree" && _
+      },
+      w
+    ),
     style: I(i),
     onClick: g,
     onKeyDown: P