@tedi-design-system/react 16.1.0-rc.6 → 16.1.0

package/package.json

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

package/src/community/components/tooltip/tooltip-provider.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const G=require("react/jsx-runtime"),e=require("../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),l=require("react"),j=require("../../../tedi/helpers/hooks/use-is-touch-device.cjs.js"),k=require("../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),s=require("../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),z=require("../../../tedi/providers/label-provider/use-labels.cjs.js"),B=require("../../../tedi/helpers/hooks/use-is-mounted.cjs.js"),g=7,J=14,T=3,m=T+g,O=l.createContext({open:!1,isMounted:!1,openWith:"hover",reference:()=>null,floating:()=>null,focusManager:{},arrowRef:{current:null},x:null,y:null,strategy:"absolute",getReferenceProps:()=>({}),getFloatingProps:()=>({}),arrow:{x:0,y:0,centerOffset:0},placement:"top",context:{}}),R=i=>{const{getLabel:v}=z.useLabels(),h=j.useIsTouchDevice(),{children:P,placement:F="bottom",openWith:o=h?"click":"hover",defaultOpen:_=!1,open:r,onToggle:n,role:D="tooltip",offset:w=m}=i,{order:I=["reference","content"],modal:a=!1,initialFocus:M=-1,...c}=i.focusManager??{},{visuallyHiddenDismiss:x=a?v("close"):!1}=c??{},[y,b]=l.useState(_),u=l.useRef(null),f=n&&typeof r<"u"?r:y,q=p=>{typeof r>"u"&&b(p),n==null||n(p)},A=B.useIsMounted(),{x:E,y:H,refs:d,strategy:W,context:t,middlewareData:L,placement:C}=e.useFloating({placement:F,open:f,onOpenChange:q,middleware:[s.offset(w),s.flip(),s.shift({padding:8}),s.arrow({element:u,padding:4})],whileElementsMounted:k.autoUpdate}),{getReferenceProps:U,getFloatingProps:S}=e.useInteractions([e.useHover(t,{handleClose:e.safePolygon(),enabled:o==="hover"}),e.useClick(t),e.useFocus(t,{enabled:o==="hover"}),e.useRole(t,{role:D}),e.useDismiss(t,{outsidePressEvent:o==="click"?"mousedown":"pointerdown"})]);return G.jsx(O.Provider,{value:{open:f,isMounted:A,openWith:o,reference:d.setReference,floating:d.setFloating,arrowRef:u,focusManager:{order:I,initialFocus:M,modal:a,visuallyHiddenDismiss:x,...c},x:E,y:H,strategy:W,getReferenceProps:U,getFloatingProps:S,arrow:{...L.arrow},context:t,placement:C},children:P})};exports.ARROW_HEIGHT=g;exports.ARROW_WIDTH=J;exports.DEFAULT_TOOLTIP_OFFSET=m;exports.GAP=T;exports.TooltipContext=O;exports.TooltipProvider=R;exports.default=R;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const G=require("react/jsx-runtime"),e=require("../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),l=require("react"),j=require("../../../tedi/helpers/hooks/use-is-touch-device.cjs.js"),k=require("../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),s=require("../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),B=require("../../../tedi/providers/label-provider/use-labels.cjs.js"),z=require("../../../tedi/helpers/hooks/use-is-mounted.cjs.js"),g=7,J=14,T=3,m=T+g,O=l.createContext({open:!1,isMounted:!1,openWith:"hover",reference:()=>null,floating:()=>null,focusManager:{},arrowRef:{current:null},x:null,y:null,strategy:"absolute",getReferenceProps:()=>({}),getFloatingProps:()=>({}),arrow:{x:0,y:0,centerOffset:0},placement:"top",context:{}}),R=a=>{const{getLabel:v}=B.useLabels(),h=j.useIsTouchDevice(),{children:P,placement:F="bottom",openWith:o=h?"click":"hover",defaultOpen:_=!1,open:r,onToggle:n,role:D="tooltip",offset:w=m}=a,{order:y=["reference","content"],modal:c=!1,initialFocus:I=-1,...i}=a.focusManager??{},{visuallyHiddenDismiss:M=c?v("close"):!1}=i??{},[x,b]=l.useState(_),u=l.useRef(null),f=n&&typeof r<"u"?r:x,q=p=>{typeof r>"u"&&b(p),n==null||n(p)},A=z.useIsMounted(),{x:E,y:H,refs:d,strategy:W,context:t,middlewareData:L,placement:C}=e.useFloating({placement:F,open:f,onOpenChange:q,middleware:[s.offset(w),s.flip(),s.shift({altBoundary:!0,padding:8}),s.arrow({element:u,padding:4})],whileElementsMounted:k.autoUpdate}),{getReferenceProps:S,getFloatingProps:U}=e.useInteractions([e.useHover(t,{handleClose:e.safePolygon(),enabled:o==="hover"}),e.useClick(t),e.useFocus(t,{enabled:o==="hover"}),e.useRole(t,{role:D}),e.useDismiss(t,{ancestorScroll:!0,outsidePressEvent:o==="click"?"mousedown":"pointerdown"})]);return G.jsx(O.Provider,{value:{open:f,isMounted:A,openWith:o,reference:d.setReference,floating:d.setFloating,arrowRef:u,focusManager:{order:y,initialFocus:I,modal:c,visuallyHiddenDismiss:M,...i},x:E,y:H,strategy:W,getReferenceProps:S,getFloatingProps:U,arrow:{...L.arrow},context:t,placement:C},children:P})};exports.ARROW_HEIGHT=g;exports.ARROW_WIDTH=J;exports.DEFAULT_TOOLTIP_OFFSET=m;exports.GAP=T;exports.TooltipContext=O;exports.TooltipProvider=R;exports.default=R;

package/src/community/components/tooltip/tooltip-provider.es.js

@@ -1,9 +1,9 @@
 import { jsx as H } from "react/jsx-runtime";
-import { useFloating as W, useInteractions as A, useHover as L, useClick as k, useFocus as G, useRole as S, useDismiss as U, safePolygon as j } from "../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import { useFloating as W, useInteractions as A, useHover as L, useClick as k, useFocus as S, useRole as G, useDismiss as U, safePolygon as j } from "../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
 import s from "react";
-import { useIsTouchDevice as q } from "../../../tedi/helpers/hooks/use-is-touch-device.es.js";
-import { autoUpdate as z } from "../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
-import { offset as B, flip as J, shift as K, arrow as N } from "../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
+import { useIsTouchDevice as B } from "../../../tedi/helpers/hooks/use-is-touch-device.es.js";
+import { autoUpdate as q } from "../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
+import { offset as z, flip as J, shift as K, arrow as N } from "../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
 import { useLabels as Q } from "../../../tedi/providers/label-provider/use-labels.es.js";
 import { useIsMounted as V } from "../../../tedi/helpers/hooks/use-is-mounted.es.js";
 const X = 7, ce = 14, Y = 3, Z = Y + X, $ = s.createContext({
@@ -27,7 +27,7 @@ const X = 7, ce = 14, Y = 3, Z = Y + X, $ = s.createContext({
   placement: "top",
   context: {}
 }), ie = (r) => {
-  const { getLabel: p } = Q(), d = q(), {
+  const { getLabel: p } = Q(), d = B(), {
     children: m,
     placement: g = "bottom",
     openWith: o = d ? "click" : "hover",
@@ -41,33 +41,37 @@ const X = 7, ce = 14, Y = 3, Z = Y + X, $ = s.createContext({
     modal: a = !1,
     initialFocus: w = -1,
     ...l
-  } = r.focusManager ?? {}, { visuallyHiddenDismiss: F = a ? p("close") : !1 } = l ?? {}, [P, x] = s.useState(h), c = s.useRef(null), i = t && typeof n < "u" ? n : P, y = (u) => {
-    typeof n > "u" && x(u), t == null || t(u);
+  } = r.focusManager ?? {}, { visuallyHiddenDismiss: y = a ? p("close") : !1 } = l ?? {}, [F, P] = s.useState(h), c = s.useRef(null), i = t && typeof n < "u" ? n : F, x = (u) => {
+    typeof n > "u" && P(u), t == null || t(u);
   }, T = V(), { x: D, y: M, refs: f, strategy: b, context: e, middlewareData: I, placement: _ } = W({
     placement: g,
     open: i,
-    onOpenChange: y,
+    onOpenChange: x,
     middleware: [
-      B(O),
+      z(O),
       J(),
-      K({ padding: 8 }),
+      K({
+        altBoundary: !0,
+        padding: 8
+      }),
       N({
         element: c,
         padding: 4
       })
     ],
-    whileElementsMounted: z
+    whileElementsMounted: q
   }), { getReferenceProps: C, getFloatingProps: E } = A([
     L(e, {
       handleClose: j(),
       enabled: o === "hover"
     }),
     k(e),
-    G(e, {
+    S(e, {
       enabled: o === "hover"
     }),
-    S(e, { role: v }),
+    G(e, { role: v }),
     U(e, {
+      ancestorScroll: !0,
       outsidePressEvent: o === "click" ? "mousedown" : "pointerdown"
       // https://floating-ui.com/docs/dialog#interaction-hooks
     })
@@ -86,7 +90,7 @@ const X = 7, ce = 14, Y = 3, Z = Y + X, $ = s.createContext({
           order: R,
           initialFocus: w,
           modal: a,
-          visuallyHiddenDismiss: F,
+          visuallyHiddenDismiss: y,
           ...l
         },
         x: D,

package/src/tedi/components/layout/sidenav/components/sidenav-toggle/sidenav-toggle.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react/jsx-runtime"),p=require("../../../../../../../external/classnames/index.cjs.js"),b=require("../../../../buttons/button/button.cjs.js"),_=require("../../../../buttons/floating-button/floating-button.cjs.js"),o=require("./sidenav-toggle.module.scss.cjs.js"),y=require("../../../../../providers/label-provider/use-labels.cjs.js"),i=({menuOpen:l,toggleMenu:s,referenceRef:n,getReferenceProps:a=()=>({}),variant:e="mobile"})=>{const{getLabel:c}=y.useLabels(),d=c("header.toggle",l),u=p.default(o.default["tedi-sidenav-toggle"],{[o.default["tedi-sidenav-toggle--open"]]:l,[o.default[`tedi-sidenav-toggle--${e}`]]:!0}),r=e==="collapse"?_.FloatingButton:b.Button,g=t=>{(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),s(!l))};return f.jsx(r,{...a(),ref:n,icon:{name:e==="collapse"?l?"right_panel_open":"left_panel_open":l?"close":"menu",className:o.default["tedi-sidenav-toggle__icon"],size:e==="collapse"?18:24},visualType:e==="collapse"?"secondary":"primary",className:u,onClick:()=>s(!l),onKeyDown:g,position:e==="collapse"?"absolute":"static",size:e==="collapse"?"small":"",children:d})};exports.SidenavToggle=i;exports.default=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react/jsx-runtime"),b=require("../../../../../../../external/classnames/index.cjs.js"),_=require("../../../../buttons/button/button.cjs.js"),y=require("../../../../buttons/floating-button/floating-button.cjs.js"),o=require("./sidenav-toggle.module.scss.cjs.js"),m=require("../../../../../providers/label-provider/use-labels.cjs.js"),i=({menuOpen:l,toggleMenu:s,referenceRef:n,getReferenceProps:a=()=>({}),variant:e="mobile",className:c})=>{const{getLabel:d}=m.useLabels(),u=d("header.toggle",l),r=b.default(o.default["tedi-sidenav-toggle"],{[o.default["tedi-sidenav-toggle--open"]]:l,[o.default[`tedi-sidenav-toggle--${e}`]]:!0},c),g=e==="collapse"?y.FloatingButton:_.Button,f=t=>{(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),s(!l))};return p.jsx(g,{...a(),ref:n,icon:{name:e==="collapse"?l?"right_panel_open":"left_panel_open":l?"close":"menu",className:o.default["tedi-sidenav-toggle__icon"],size:e==="collapse"?18:24},visualType:e==="collapse"?"secondary":"primary",className:r,onClick:()=>s(!l),onKeyDown:f,position:e==="collapse"?"absolute":"static",size:e==="collapse"?"small":"",children:u})};exports.SidenavToggle=i;exports.default=i;

package/src/tedi/components/layout/sidenav/components/sidenav-toggle/sidenav-toggle.d.ts

@@ -22,6 +22,10 @@ export type SidenavToggleProps = {
      * Variant of toggle (mobile overlay or collapse control)
      */
     variant?: SidenavToggleVariant;
+    /**
+     * Add custom class to override styles
+     */
+    className?: string;
 };
-export declare const SidenavToggle: ({ menuOpen, toggleMenu, referenceRef, getReferenceProps, variant, }: SidenavToggleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidenavToggle: ({ menuOpen, toggleMenu, referenceRef, getReferenceProps, variant, className, }: SidenavToggleProps) => import("react/jsx-runtime").JSX.Element;
 export default SidenavToggle;

package/src/tedi/components/layout/sidenav/components/sidenav-toggle/sidenav-toggle.es.js

@@ -1,24 +1,29 @@
-import { jsx as g } from "react/jsx-runtime";
-import d from "../../../../../../../external/classnames/index.es.js";
-import { Button as f } from "../../../../buttons/button/button.es.js";
-import { FloatingButton as y } from "../../../../buttons/floating-button/floating-button.es.js";
+import { jsx as d } from "react/jsx-runtime";
+import f from "../../../../../../../external/classnames/index.es.js";
+import { Button as y } from "../../../../buttons/button/button.es.js";
+import { FloatingButton as _ } from "../../../../buttons/floating-button/floating-button.es.js";
 import l from "./sidenav-toggle.module.scss.es.js";
-import { useLabels as _ } from "../../../../../providers/label-provider/use-labels.es.js";
-const E = ({
+import { useLabels as b } from "../../../../../providers/label-provider/use-labels.es.js";
+const L = ({
   menuOpen: o,
   toggleMenu: t,
   referenceRef: i,
   getReferenceProps: a = () => ({}),
-  variant: e = "mobile"
+  variant: e = "mobile",
+  className: c
 }) => {
-  const { getLabel: c } = _(), r = c("header.toggle", o), n = d(l["tedi-sidenav-toggle"], {
-    [l["tedi-sidenav-toggle--open"]]: o,
-    [l[`tedi-sidenav-toggle--${e}`]]: !0
-  }), p = e === "collapse" ? y : f, m = (s) => {
+  const { getLabel: r } = b(), n = r("header.toggle", o), p = f(
+    l["tedi-sidenav-toggle"],
+    {
+      [l["tedi-sidenav-toggle--open"]]: o,
+      [l[`tedi-sidenav-toggle--${e}`]]: !0
+    },
+    c
+  ), m = e === "collapse" ? _ : y, g = (s) => {
     (s.key === "Enter" || s.key === " ") && (s.preventDefault(), t(!o));
   };
-  return /* @__PURE__ */ g(
-    p,
+  return /* @__PURE__ */ d(
+    m,
     {
       ...a(),
       ref: i,
@@ -28,16 +33,16 @@ const E = ({
         size: e === "collapse" ? 18 : 24
       },
       visualType: e === "collapse" ? "secondary" : "primary",
-      className: n,
+      className: p,
       onClick: () => t(!o),
-      onKeyDown: m,
+      onKeyDown: g,
       position: e === "collapse" ? "absolute" : "static",
       size: e === "collapse" ? "small" : "",
-      children: r
+      children: n
     }
   );
 };
 export {
-  E as SidenavToggle,
-  E as default
+  L as SidenavToggle,
+  L as default
 };

package/src/tedi/components/layout/sidenav/sidenav.d.ts

@@ -80,7 +80,7 @@ export type SideNavProps<C extends React.ElementType = 'a'> = ConditionalTypes<C
     sideNavItemSize?: SideNavItemSize;
 };
 export declare const SideNav: (<C extends React.ElementType = "a">(props: SideNavProps<C>) => React.ReactElement | null) & {
-    Toggle: ({ menuOpen, toggleMenu, referenceRef, getReferenceProps, variant, }: import('./components/sidenav-toggle/sidenav-toggle').SidenavToggleProps) => import("react/jsx-runtime").JSX.Element;
+    Toggle: ({ menuOpen, toggleMenu, referenceRef, getReferenceProps, variant, className, }: import('./components/sidenav-toggle/sidenav-toggle').SidenavToggleProps) => import("react/jsx-runtime").JSX.Element;
     Item: <C extends React.ElementType = "a">(props: SideNavItemProps<C> & {
         onItemClick?: () => void;
         level?: number;