@tedi-design-system/react 19.0.0-rc.9 → 19.0.0

package/src/tedi/components/overlays/overlay/overlay.es.js

@@ -1,8 +1,8 @@
 import { jsx as K } from "react/jsx-runtime";
 import { useFloating as N, useInteractions as Q, useHover as X, safePolygon as Y, useClick as Z, useFocus as _, useRole as $, useDismiss as D } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
 import { useState as ee, useRef as te, useMemo as E, useCallback as oe, useId as ne, createContext as re } from "react";
-import { OverlayContent as se } from "./overlay-content.es.js";
-import { OverlayTrigger as ae } from "./overlay-trigger.es.js";
+import { OverlayContent as ae } from "./overlay-content.es.js";
+import { OverlayTrigger as se } from "./overlay-trigger.es.js";
 import { useIsTouchDevice as le } from "../../../helpers/hooks/use-is-touch-device.es.js";
 import { useIsMounted as ce } from "../../../helpers/hooks/use-is-mounted.es.js";
 import { autoUpdate as H } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
@@ -39,10 +39,10 @@ const pe = 3, ge = re({
   const j = le(), {
     children: A,
     placement: G = "top",
-    openWith: n = j ? "click" : "hover",
+    openWith: o = j ? "click" : "hover",
     defaultOpen: S = !1,
     open: r,
-    onToggle: o,
+    onToggle: n,
     role: l = "tooltip",
     ariaHidden: c = !1,
     arrowDimensions: e,
@@ -52,12 +52,12 @@ const pe = 3, ge = re({
     dismissible: g,
     scrollLock: h,
     trackReferencePosition: q = !1
-  } = W, { order: m = ["reference", "content"], initialFocus: v, modal: f, ...y } = i ?? {}, O = v !== void 0 ? v : f ? 0 : void 0, [x, F] = ee(S), d = te(null), P = ce(), u = E(() => o && typeof r < "u" ? r : x, [o, r, x]), p = oe(
-    (a) => {
-      typeof r > "u" && F(a), o == null || o(a);
+  } = W, { order: m = ["reference", "content"], initialFocus: v, modal: f, ...y } = i ?? {}, O = v !== void 0 ? v : f ? 0 : void 0, [x, F] = ee(S), d = te(null), P = ce(), u = E(() => n && typeof r < "u" ? r : x, [n, r, x]), p = oe(
+    (s) => {
+      typeof r > "u" && F(s), n == null || n(s);
     },
-    [r, F, o]
-  ), { x: C, y: M, refs: s, strategy: R, context: t, middlewareData: w, placement: b } = N({
+    [r, F, n]
+  ), { x: C, y: M, refs: a, strategy: R, context: t, middlewareData: b, placement: k } = N({
     placement: G,
     open: u,
     onOpenChange: p,
@@ -70,50 +70,51 @@ const pe = 3, ge = re({
         padding: V
       })
     ],
-    whileElementsMounted: q ? (a, B, J) => H(a, B, J, { animationFrame: !0 }) : H
-  }), { getReferenceProps: k, getFloatingProps: I } = Q([
+    whileElementsMounted: q ? (s, B, J) => H(s, B, J, { animationFrame: !0 }) : H
+  }), { getReferenceProps: w, getFloatingProps: I } = Q([
     X(t, {
-      enabled: n === "hover",
+      enabled: o === "hover",
       handleClose: Y()
     }),
     Z(t, {
+      enabled: o === "click",
       toggle: g
     }),
     _(t, {
-      enabled: n === "hover"
+      enabled: o === "hover"
     }),
     $(t, { role: l, enabled: !c }),
     D(t, {
       enabled: g,
-      outsidePressEvent: n === "click" ? "mousedown" : "pointerdown"
+      outsidePressEvent: o === "click" ? "mousedown" : "pointerdown"
     })
   ]), T = ne(), z = E(
     () => ({
       open: u,
       onOpenChange: p,
       isMounted: P,
-      openWith: n,
+      openWith: o,
       focusManager: i ? {
         order: m,
         modal: f,
         initialFocus: O,
         ...y
       } : void 0,
-      reference: s.setReference,
-      floating: s.setFloating,
+      reference: a.setReference,
+      floating: a.setFloating,
       arrowRef: d,
       x: C,
       y: M,
       strategy: R,
-      getReferenceProps: k,
+      getReferenceProps: w,
       getFloatingProps: I,
       arrow: {
         width: e == null ? void 0 : e.width,
         height: e == null ? void 0 : e.height,
-        ...w.arrow
+        ...b.arrow
       },
       context: t,
-      placement: b,
+      placement: k,
       scrollLock: h,
       role: l,
       ariaHidden: c,
@@ -123,21 +124,21 @@ const pe = 3, ge = re({
       u,
       p,
       P,
-      n,
+      o,
       i,
-      s.setReference,
-      s.setFloating,
+      a.setReference,
+      a.setFloating,
       d,
       C,
       M,
       R,
-      k,
+      w,
       I,
       e == null ? void 0 : e.width,
       e == null ? void 0 : e.height,
-      w.arrow,
+      b.arrow,
       t,
-      b,
+      k,
       h,
       l,
       c,
@@ -150,8 +151,8 @@ const pe = 3, ge = re({
   );
   return /* @__PURE__ */ K(ge.Provider, { value: z, children: A });
 };
-L.Trigger = ae;
-L.Content = se;
+L.Trigger = se;
+L.Content = ae;
 export {
   L as Overlay,
   ge as OverlayContext,

package/src/tedi/components/overlays/popover/popover-content.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),n=require("../../../../../external/classnames/index.cjs.js"),s=require("react"),y=require("../../base/typography/text/text.cjs.js"),_=require("../../buttons/closing-button/closing-button.cjs.js"),j=require("../overlay/overlay.cjs.js"),b=require("../overlay/overlay-content.cjs.js"),e=require("./popover.module.scss.cjs.js"),g=require("./popover-context.cjs.js"),x=C=>{const{children:i,width:d="small",className:h,title:t,titleProps:l={element:"h4"},close:a,closeProps:r={size:"default"}}=C,{onOpenChange:m}=s.useContext(j.OverlayContext),{withBorder:c}=s.useContext(g.PopoverContext),u=s.useId(),p=!!i,v=s.useId();return o.jsxs(b.OverlayContent,{classNames:{content:n.default(e.default["tedi-popover"],{[e.default[`tedi-popover--${d}`]]:d&&d!=="none",[e.default["tedi-popover--border"]]:c},h),arrow:n.default(e.default["tedi-popover__arrow"],{[e.default["tedi-popover__arrow--border"]]:c})},labelledBy:t?u:void 0,describedBy:p?v:void 0,children:[(t||a)&&o.jsxs("div",{className:n.default(e.default["tedi-popover__header"],{[e.default["tedi-popover__header--no-title"]]:!t}),children:[t&&o.jsx(y.Text,{...l,id:u,className:n.default("align-self-center",l.className),children:t}),a&&o.jsx(_.ClosingButton,{...r,onClick:q=>{var f;m(!1),(f=r.onClick)==null||f.call(r,q)}})]}),p?o.jsx("div",{id:v,children:i}):i]})};x.displayName="PopoverContent";exports.PopoverContent=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),s=require("../../../../../external/classnames/index.cjs.js"),c=require("react"),q=require("../../base/typography/text/text.cjs.js"),_=require("../../buttons/closing-button/closing-button.cjs.js"),j=require("../overlay/overlay.cjs.js"),P=require("../overlay/overlay-content.cjs.js"),r=require("./popover.module.scss.cjs.js"),B=require("./popover-context.cjs.js"),N=e=>{if(e===void 0)return;const t=a=>`${a}rem`,o=typeof e=="number"?{top:e,right:e,bottom:e,left:e}:"vertical"in e?{top:e.vertical,right:e.horizontal,bottom:e.vertical,left:e.horizontal}:e;return{"--popover-content-padding-top":t(o.top),"--popover-content-padding-right":t(o.right),"--popover-content-padding-bottom":t(o.bottom),"--popover-content-padding-left":t(o.left)}},x=e=>{const{children:t,width:o="small",className:a,title:n,titleProps:d={element:"h4"},close:u,closeProps:i={size:"default"},padding:C}=e,{onOpenChange:b}=c.useContext(j.OverlayContext),{withBorder:p}=c.useContext(B.PopoverContext),v=c.useId(),f=!!t,m=c.useId();return l.jsxs(P.OverlayContent,{classNames:{content:s.default(r.default["tedi-popover"],{[r.default[`tedi-popover--${o}`]]:o&&o!=="none",[r.default["tedi-popover--border"]]:p},a),arrow:s.default(r.default["tedi-popover__arrow"],{[r.default["tedi-popover__arrow--border"]]:p})},labelledBy:n?v:void 0,describedBy:f?m:void 0,contentStyle:N(C),children:[(n||u)&&l.jsxs("div",{className:s.default(r.default["tedi-popover__header"],{[r.default["tedi-popover__header--no-title"]]:!n}),children:[n&&l.jsx(q.Text,{...d,id:v,className:s.default("align-self-center",d.className),children:n}),u&&l.jsx(_.ClosingButton,{...i,onClick:y=>{var h;b(!1),(h=i.onClick)==null||h.call(i,y)}})]}),f?l.jsx("div",{id:m,children:t}):t]})};x.displayName="PopoverContent";exports.PopoverContent=x;

package/src/tedi/components/overlays/popover/popover-content.d.ts

@@ -1,5 +1,6 @@
 import { TextProps } from '../../base/typography/text/text';
 import { ClosingButtonProps } from '../../buttons/closing-button/closing-button';
+import { CardContentPadding } from '../../content/card/card';
 import { OverlayContentProps } from '../overlay/overlay-content';
 export interface PopoverContentProps extends Omit<OverlayContentProps, 'classNames'> {
     /**
@@ -28,6 +29,12 @@ export interface PopoverContentProps extends Omit<OverlayContentProps, 'classNam
      * @default small
      */
     width?: 'small' | 'medium' | 'large' | 'none';
+    /**
+     * Inner padding of the popover, using the same scale as `Card` — a number in rems,
+     * `{ vertical, horizontal }`, or `{ top, right, bottom, left }`. Set to `0` (or zero a single axis)
+     * when the popover holds a menu whose rows should reach the edges. Defaults to the popover padding.
+     */
+    padding?: CardContentPadding;
 }
 export declare const PopoverContent: {
     (props: PopoverContentProps): import("react/jsx-runtime").JSX.Element;

package/src/tedi/components/overlays/popover/popover-content.es.js

@@ -1,58 +1,69 @@
-import { jsxs as f, jsx as s } from "react/jsx-runtime";
-import r from "../../../../../external/classnames/index.es.js";
-import { useContext as h, useId as C } from "react";
-import { Text as u } from "../../base/typography/text/text.es.js";
+import { jsxs as C, jsx as p } from "react/jsx-runtime";
+import s from "../../../../../external/classnames/index.es.js";
+import { useContext as b, useId as u } from "react";
+import { Text as N } from "../../base/typography/text/text.es.js";
 import { ClosingButton as w } from "../../buttons/closing-button/closing-button.es.js";
 import { OverlayContext as B } from "../overlay/overlay.es.js";
-import { OverlayContent as b } from "../overlay/overlay-content.es.js";
-import e from "./popover.module.scss.es.js";
-import { PopoverContext as g } from "./popover-context.es.js";
-const I = (_) => {
+import { OverlayContent as P } from "../overlay/overlay-content.es.js";
+import r from "./popover.module.scss.es.js";
+import { PopoverContext as z } from "./popover-context.es.js";
+const I = (o) => {
+  if (o === void 0) return;
+  const e = (l) => `${l}rem`, t = typeof o == "number" ? { top: o, right: o, bottom: o, left: o } : "vertical" in o ? { top: o.vertical, right: o.horizontal, bottom: o.vertical, left: o.horizontal } : o;
+  return {
+    "--popover-content-padding-top": e(t.top),
+    "--popover-content-padding-right": e(t.right),
+    "--popover-content-padding-bottom": e(t.bottom),
+    "--popover-content-padding-left": e(t.left)
+  };
+}, O = (o) => {
   const {
-    children: i,
-    width: n = "small",
-    className: x,
-    title: o,
-    titleProps: d = { element: "h4" },
-    close: l,
-    closeProps: t = { size: "default" }
-  } = _, { onOpenChange: N } = h(B), { withBorder: p } = h(g), a = C(), m = !!i, c = C();
-  return /* @__PURE__ */ f(
-    b,
+    children: e,
+    width: t = "small",
+    className: l,
+    title: n,
+    titleProps: c = { element: "h4" },
+    close: m,
+    closeProps: i = { size: "default" },
+    padding: y
+  } = o, { onOpenChange: _ } = b(B), { withBorder: a } = b(z), v = u(), d = !!e, f = u();
+  return /* @__PURE__ */ C(
+    P,
     {
       classNames: {
-        content: r(
-          e["tedi-popover"],
+        content: s(
+          r["tedi-popover"],
           {
-            [e[`tedi-popover--${n}`]]: n && n !== "none",
-            [e["tedi-popover--border"]]: p
+            [r[`tedi-popover--${t}`]]: t && t !== "none",
+            [r["tedi-popover--border"]]: a
           },
-          x
+          l
         ),
-        arrow: r(e["tedi-popover__arrow"], { [e["tedi-popover__arrow--border"]]: p })
+        arrow: s(r["tedi-popover__arrow"], { [r["tedi-popover__arrow--border"]]: a })
       },
-      labelledBy: o ? a : void 0,
-      describedBy: m ? c : void 0,
+      labelledBy: n ? v : void 0,
+      describedBy: d ? f : void 0,
+      contentStyle: I(y),
       children: [
-        (o || l) && /* @__PURE__ */ f("div", { className: r(e["tedi-popover__header"], { [e["tedi-popover__header--no-title"]]: !o }), children: [
-          o && /* @__PURE__ */ s(u, { ...d, id: a, className: r("align-self-center", d.className), children: o }),
-          l && /* @__PURE__ */ s(
+        (n || m) && /* @__PURE__ */ C("div", { className: s(r["tedi-popover__header"], { [r["tedi-popover__header--no-title"]]: !n }), children: [
+          n && /* @__PURE__ */ p(N, { ...c, id: v, className: s("align-self-center", c.className), children: n }),
+          m && /* @__PURE__ */ p(
             w,
             {
-              ...t,
-              onClick: (y) => {
-                var v;
-                N(!1), (v = t.onClick) == null || v.call(t, y);
+              ...i,
+              onClick: (x) => {
+                var h;
+                _(!1), (h = i.onClick) == null || h.call(i, x);
               }
             }
           )
         ] }),
-        m ? /* @__PURE__ */ s("div", { id: c, children: i }) : i
+        d ? /* @__PURE__ */ p("div", { id: f, children: e }) : e
       ]
     }
   );
 };
-I.displayName = "PopoverContent";
+O.displayName = "PopoverContent";
 export {
-  I as PopoverContent
+  O as PopoverContent
 };

package/src/tedi/helpers/index.d.ts

@@ -7,3 +7,4 @@ export * from './hooks/use-is-touch-device';
 export * from './hooks/use-file-upload';
 export * from './hooks/use-what-input';
 export * from './hooks/use-scroll-fade';
+export * from './polymorphic/types';