@iress-oss/ids-components 6.0.0-alpha.0 → 6.0.0-alpha.1

package/dist/components/Menu/MenuText/MenuText.js

@@ -1,14 +1,14 @@
-import { jsx as r, jsxs as c, Fragment as I } from "react/jsx-runtime";
+import { jsx as r, jsxs as h, Fragment as I } from "react/jsx-runtime";
 import { useMenuItemRole as C } from "../MenuItem/hooks/useMenuItemRole.js";
 import { useContext as v } from "react";
 import { MenuContext as N } from "../Menu.js";
 import { IressText as P } from "../../Text/Text.js";
 import { menu as H } from "../Menu.styles.js";
-import { c as m } from "../../../cva-B2x59Dph.js";
-import { c as d } from "../../../cx-DN21T1EH.js";
+import { c as i } from "../../../css-fGu_jDvv.js";
+import { c } from "../../../cx-DN21T1EH.js";
 import { IressMenuDivider as T } from "../MenuDivider/MenuDivider.js";
-import { GlobalCSSClass as g } from "../../../enums.js";
-import { s as j } from "../../../is-valid-prop-DFFvE05x.js";
+import { GlobalCSSClass as d } from "../../../enums.js";
+import { s as j } from "../../../is-valid-prop-Ce0wiweq.js";
 const R = (s, o) => (s && ["h1", "h2", "h3", "h4", "h5", "h6"].includes(s)) ?? (o && [
   "typography.heading.1",
   "typography.heading.2",
@@ -18,64 +18,64 @@ const R = (s, o) => (s && ["h1", "h2", "h3", "h4", "h5", "h6"].includes(s)) ?? (
 ].includes(o)), b = ({
   append: s,
   children: o,
-  className: t,
-  "data-testid": e,
-  divider: l,
-  element: p,
-  prepend: a,
-  role: u,
-  textStyle: h,
-  ...y
+  className: e,
+  "data-testid": t,
+  divider: g,
+  element: m,
+  prepend: n,
+  role: l,
+  textStyle: p,
+  ...u
 }) => {
-  const n = v(N), f = C() ?? u, i = H.raw({
-    layout: n == null ? void 0 : n.layout,
-    heading: R(p, h),
-    hasAppendOrPrepend: !!(s ?? a)
-  }), [x, M] = j(y);
-  return /* @__PURE__ */ c(I, { children: [
-    /* @__PURE__ */ c(
+  const y = v(N), f = C() ?? l, a = H.raw({
+    layout: y?.layout,
+    heading: R(m, p),
+    hasAppendOrPrepend: !!(s ?? n)
+  }), [x, M] = j(u);
+  return /* @__PURE__ */ h(I, { children: [
+    /* @__PURE__ */ h(
       "div",
       {
-        className: d(
-          t,
-          m(i.text, x),
-          g.MenuText
+        className: c(
+          e,
+          i(a.text, x),
+          d.MenuText
         ),
-        "data-testid": e,
+        "data-testid": t,
         role: f,
         children: [
-          a && /* @__PURE__ */ r("div", { children: a }),
+          n && /* @__PURE__ */ r("div", { children: n }),
           /* @__PURE__ */ r(
             P,
             {
               ...M,
-              className: m(i.contents),
-              element: p,
-              textStyle: h,
+              className: i(a.contents),
+              element: m,
+              textStyle: p,
               children: o
             }
           ),
-          s && /* @__PURE__ */ r("div", { className: m(i.append), children: s })
+          s && /* @__PURE__ */ r("div", { className: i(a.append), children: s })
         ]
       }
     ),
-    l && /* @__PURE__ */ r(T, { mt: "spacing.100" })
+    g && /* @__PURE__ */ r(T, { mt: "spacing.100" })
   ] });
-}, E = ({
+}, B = ({
   className: s,
   element: o = "h2",
-  textStyle: t = "typography.heading.4",
-  ...e
+  textStyle: e = "typography.heading.4",
+  ...t
 }) => /* @__PURE__ */ r(
   b,
   {
     element: o,
-    textStyle: t,
-    ...e,
-    className: d(s, g.MenuHeading)
+    textStyle: e,
+    ...t,
+    className: c(s, d.MenuHeading)
   }
 );
 export {
-  E as IressMenuHeading,
+  B as IressMenuHeading,
   b as IressMenuText
 };

package/dist/components/Modal/Modal.js

@@ -1,152 +1,148 @@
-import { jsx as n, jsxs as D } from "react/jsx-runtime";
-import { useState as te, useRef as oe, useEffect as F, useMemo as se, cloneElement as re, useCallback as le } from "react";
-import "../../Button-BXzmntRi.js";
-import { IressCloseButton as ae } from "../Button/CloseButton/CloseButton.js";
-import { u as ne, b as ie, c as ce, d as de, e as me, F as fe, f as ue, g as pe } from "../../floating-ui.react-CPN4oQCc.js";
-import { timeStringToNumber as ge } from "../../helpers/transition/timeStringToNumber.js";
-import { idsLogger as he } from "../../helpers/utility/idsLogger.js";
-import { propagateTestid as c } from "../../helpers/utility/propagateTestid.js";
-import { useIdIfNeeded as be } from "../../hooks/useIdIfNeeded.js";
-import { text as ye } from "../Text/Text.styles.js";
-import { IressText as Fe } from "../Text/Text.js";
-import { useProviderModal as Ie } from "./hooks/useProviderModal.js";
-import { modal as Me } from "./Modal.styles.js";
-import { c as O } from "../../cx-DN21T1EH.js";
-import { s as I } from "../../factory-DHLOr79I.js";
-import { s as Ne } from "../../is-valid-prop-DFFvE05x.js";
-import { GlobalCSSClass as M } from "../../enums.js";
-const ze = ({
-  children: _,
-  className: $,
-  closeText: G,
-  container: N,
+import { jsx as l, jsxs as P } from "react/jsx-runtime";
+import { useState as Z, useRef as oo, useEffect as u, useMemo as eo, useCallback as to } from "react";
+import "../../Button-D6AL0bia.js";
+import { IressCloseButton as ro } from "../Button/CloseButton/CloseButton.js";
+import { u as so, b as no, c as ao, d as lo, e as io, F as co, f as fo, g as mo } from "../../floating-ui.react-CmSaAiNF.js";
+import { timeStringToNumber as uo } from "../../helpers/transition/timeStringToNumber.js";
+import { idsLogger as po } from "../../helpers/utility/idsLogger.js";
+import { propagateTestid as i } from "../../helpers/utility/propagateTestid.js";
+import { useIdIfNeeded as go } from "../../hooks/useIdIfNeeded.js";
+import { text as ho } from "../Text/Text.styles.js";
+import { IressText as bo } from "../Text/Text.js";
+import { useProviderModal as yo } from "./hooks/useProviderModal.js";
+import { modal as wo } from "./Modal.styles.js";
+import { c as S } from "../../cx-DN21T1EH.js";
+import { s as p } from "../../factory-oPXoMw9H.js";
+import { s as Fo } from "../../is-valid-prop-Ce0wiweq.js";
+import { GlobalCSSClass as g } from "../../enums.js";
+const Eo = ({
+  children: R,
+  className: B,
+  closeText: j,
+  container: h,
   "data-testid": r,
-  defaultShow: L = !1,
-  disableBackdropClick: U,
-  fixedFooter: q,
-  footer: w,
-  heading: i,
-  noCloseButton: z,
-  onEntered: d,
-  onExited: m,
-  onShowChange: h,
-  onStatus: f,
-  onTransitionEnd: u,
-  show: b,
-  static: a,
-  style: A,
-  ...y
+  defaultShow: D = !1,
+  disableBackdropClick: O,
+  fixedFooter: T,
+  footer: b,
+  heading: d,
+  noCloseButton: _,
+  onEntered: y,
+  onExited: w,
+  onShowChange: $,
+  onStatus: F,
+  onTransitionEnd: I,
+  show: c,
+  static: n,
+  style: E,
+  ...f
 }) => {
-  const [H, J] = te(L), k = oe(240), o = Ie(y.id), v = be({ id: y.id }), p = `${v}--heading`, K = o.opened || b || H, x = (e) => {
-    o.show(e), J(e), h == null || h(e);
-  }, { context: t } = ne({
-    open: K,
-    onOpenChange: x
-  }), Q = ie(t, {
-    enabled: !U,
-    outsidePress: (e) => !e.target.closest(`.${M.Toaster}`),
+  const [G, L] = Z(D), v = oo(240), a = yo(f.id), M = go({ id: f.id }), m = `${M}--heading`, U = a.opened || c || G, N = (o) => {
+    a.show(o), L(o), $?.(o);
+  }, { context: e } = so({
+    open: U,
+    onOpenChange: N
+  }), q = no(e, {
+    enabled: !O,
+    outsidePress: (o) => !o.target.closest(`.${g.Toaster}`),
     outsidePressEvent: "mousedown"
-  }), V = ce(t), W = de([Q, V]), { isMounted: X, status: s } = me(t, {
+  }), z = ao(e), A = lo([q, z]), { isMounted: H, status: t } = io(e, {
     duration: {
-      close: k.current
+      close: v.current
     }
-  }), l = Me({
-    fixedFooter: q,
-    static: a,
-    status: s
-  }), [Y, Z] = Ne(y), { p: C = "lg", width: S = "overlay.md", ...T } = Y;
-  F(() => {
-    o.opened && b && he(
+  }), s = wo({
+    fixedFooter: T,
+    static: n,
+    status: t
+  }), [J, K] = Fo(f), { p: x = "lg", width: Q = "overlay.md", ...V } = J;
+  u(() => {
+    a.opened && c && po(
       "IressModal: Please use either IressModalProvider for uncontrolled components, or the show prop for controlled components, rather than both. If you use both, the open state of the modal will become unpredictable. If you want to show a modal by default in uncontrolled mode, use the defaultShow prop."
     );
-  }, [o.opened, b]), F(() => {
-    f == null || f(s);
-  }, [s, f]), F(() => {
-    var e, g;
-    s === "initial" && ((e = t.refs.floating) != null && e.current) && (k.current = ge(
-      ((g = window.getComputedStyle(t.refs.floating.current, null)) == null ? void 0 : g.transitionDuration) || ".3s"
+  }, [a.opened, c]), u(() => {
+    F?.(t);
+  }, [t, F]), u(() => {
+    t === "initial" && e.refs.floating?.current && (v.current = uo(
+      window.getComputedStyle(e.refs.floating.current, null)?.transitionDuration || ".3s"
     ) * 1.2);
-  }, [t.refs.floating, s]);
-  const P = se(() => typeof i == "string" ? /* @__PURE__ */ n(
-    Fe,
+  }, [e.refs.floating, t]);
+  const C = eo(() => typeof d == "string" ? /* @__PURE__ */ l(
+    bo,
     {
-      className: l.header,
-      id: p,
+      className: s.header,
+      id: m,
       element: "h2",
-      "data-testid": c(r, "heading"),
-      children: i
+      "data-testid": i(r, "heading"),
+      children: d
     }
-  ) : i ? re(i, {
-    id: p
-  }) : null, [r, p, i, l.header]), E = le(
-    (e) => {
-      var B, j;
-      u == null || u(e), !(!(e.propertyName === "opacity" || !e.propertyName) || e.target !== e.currentTarget) && (s === "open" ? (d == null || d(), a || (j = (B = t.refs.floating) == null ? void 0 : B.current) == null || j.focus()) : s === "close" && (m == null || m()));
+  ) : d, [r, m, d, s.header]), W = to(
+    (o) => {
+      I?.(o), !(!(o.propertyName === "opacity" || !o.propertyName) || o.target !== o.currentTarget) && (t === "open" ? (y?.(), n || e.refs.floating?.current?.focus()) : t === "close" && w?.());
     },
     [
-      u,
-      s,
-      d,
-      t.refs.floating,
-      m,
-      a
+      I,
+      t,
+      y,
+      e.refs.floating,
+      w,
+      n
     ]
   );
-  if (!X) return null;
-  const R = /* @__PURE__ */ n(
-    fe,
+  if (!H) return null;
+  const k = /* @__PURE__ */ l(
+    co,
     {
-      className: O($, l.backdrop, M.ModalBackdrop),
-      "data-testid": c(r, "backdrop"),
-      lockScroll: !a,
-      style: A,
-      children: /* @__PURE__ */ n(
-        ue,
+      className: S(B, s.backdrop, g.ModalBackdrop),
+      "data-testid": i(r, "backdrop"),
+      lockScroll: !n,
+      style: E,
+      children: /* @__PURE__ */ l(
+        fo,
         {
-          context: t,
-          initialFocus: t.refs.floating,
-          disabled: a,
-          children: /* @__PURE__ */ D(
-            I.div,
+          context: e,
+          initialFocus: e.refs.floating,
+          disabled: n,
+          children: /* @__PURE__ */ P(
+            p.div,
             {
-              ref: (e) => t.refs.setFloating(e),
-              className: O(l.modal, ye(), M.Modal),
-              id: v,
+              ref: (o) => e.refs.setFloating(o),
+              className: S(s.modal, ho(), g.Modal),
+              id: M,
               "data-testid": r,
-              "aria-labelledby": P ? p : void 0,
-              ...W.getFloatingProps(Z),
-              ...T,
-              w: S,
-              onTransitionEnd: E,
+              "aria-labelledby": C ? m : void 0,
+              ...A.getFloatingProps(K),
+              ...V,
+              w: Q,
+              onTransitionEnd: W,
               children: [
-                !z && /* @__PURE__ */ n(
-                  ae,
+                !_ && /* @__PURE__ */ l(
+                  ro,
                   {
-                    onClick: () => x(!1),
-                    screenreaderText: G,
-                    className: l.closeButton,
-                    "data-testid": c(r, "close-button__button")
+                    onClick: () => N(!1),
+                    screenreaderText: j,
+                    className: s.closeButton,
+                    "data-testid": i(r, "close-button__button")
                   }
                 ),
-                /* @__PURE__ */ D(
-                  I.div,
+                /* @__PURE__ */ P(
+                  p.div,
                   {
-                    className: l.content,
-                    "data-testid": c(r, "content"),
-                    p: C,
+                    className: s.content,
+                    "data-testid": i(r, "content"),
+                    p: x,
                     children: [
-                      P,
-                      _
+                      C,
+                      R
                     ]
                   }
                 ),
-                w && /* @__PURE__ */ n(
-                  I.div,
+                b && /* @__PURE__ */ l(
+                  p.div,
                   {
-                    className: l.footer,
-                    "data-testid": c(r, "footer"),
-                    p: C,
-                    children: w
+                    className: s.footer,
+                    "data-testid": i(r, "footer"),
+                    p: x,
+                    children: b
                   }
                 )
               ]
@@ -155,9 +151,9 @@ const ze = ({
         }
       )
     }
-  ), ee = N ?? (o == null ? void 0 : o.container);
-  return a && !ee ? R : /* @__PURE__ */ n(pe, { root: N ?? (o == null ? void 0 : o.container), children: R });
+  ), X = h ?? a?.container;
+  return n && !X ? k : /* @__PURE__ */ l(mo, { root: h ?? a?.container, children: k });
 };
 export {
-  ze as IressModal
+  Eo as IressModal
 };

package/dist/components/Modal/Modal.styles.js

@@ -1,5 +1,5 @@
-import { s as o } from "../../sva-TRyehFkb.js";
-const a = [
+import { s as a } from "../../sva-OmxClA9g.js";
+const o = [
   "modal",
   "backdrop",
   "closeButton",
@@ -7,8 +7,8 @@ const a = [
   "content",
   "footer",
   "pushElement"
-], i = o({
-  slots: a,
+], t = a({
+  slots: o,
   base: {
     backdrop: {
       transition: "[all 0.3s ease-in-out]",
@@ -38,6 +38,9 @@ const a = [
       opacity: 0,
       transition: "[all 0.3s ease-in-out]",
       marginBlock: "spacing.700",
+      "@media (min-height: 600px)": {
+        marginBlock: "[100px]"
+      },
       marginInline: "auto"
     }
   },
@@ -51,13 +54,19 @@ const a = [
           display: "flex",
           flexDirection: "column",
           maxHeight: "[calc(100vh - ({spacing.spacing.700} * 2))]",
+          "@media (min-height: 600px)": {
+            maxHeight: "[calc(100vh - (100px * 2))]"
+          },
           overflow: "clip"
         },
         content: {
           flex: "[1]",
           overflowX: "hidden",
           overflowY: "auto",
-          maxHeight: "[calc(100vh - ({spacing.spacing.700} * 2))]"
+          maxHeight: "[calc(100vh - ({spacing.spacing.700} * 2))]",
+          "@media (min-height: 600px)": {
+            maxHeight: "[calc(100vh - (100px * 2))]"
+          }
         },
         footer: {
           flex: "[0]"
@@ -119,5 +128,5 @@ const a = [
   }
 });
 export {
-  i as modal
+  t as modal
 };

package/dist/components/Modal/ModalProvider.js

@@ -1,34 +1,32 @@
-import { jsx as m } from "react/jsx-runtime";
-import { createContext as f, useState as x, useCallback as t, useMemo as M } from "react";
-const p = f(
-  void 0
-), b = ({
+import { jsx as f } from "react/jsx-runtime";
+import { useState as i, useCallback as t, useMemo as p } from "react";
+import { ModalContext as M } from "./hooks/useModal.js";
+const b = ({
   children: a,
   container: s
 }) => {
-  const [n, r] = x([]), c = t((o) => {
-    r((e) => e.includes(o) ? [...e] : [...e, o]);
-  }, []), l = t((o) => {
-    r(
-      (e) => e.includes(o) ? e.filter((i) => i !== o) : [...e]
+  const [r, n] = i([]), l = t((e) => {
+    n((o) => o.includes(e) ? [...o] : [...o, e]);
+  }, []), u = t((e) => {
+    n(
+      (o) => o.includes(e) ? o.filter((m) => m !== e) : [...o]
     );
-  }, []), u = t(
-    (o, e = !0) => {
-      if (e) return c(o);
-      l(o);
+  }, []), c = t(
+    (e, o = !0) => {
+      if (o) return l(e);
+      u(e);
     },
-    [l, c]
-  ), d = M(
+    [u, l]
+  ), d = p(
     () => ({
-      opened: n,
+      opened: r,
       container: s,
-      showModal: u
+      showModal: c
     }),
-    [s, n, u]
+    [s, r, c]
   );
-  return /* @__PURE__ */ m(p.Provider, { value: d, children: a });
+  return /* @__PURE__ */ f(M.Provider, { value: d, children: a });
 };
 export {
-  b as IressModalProvider,
-  p as ModalContext
+  b as IressModalProvider
 };

package/dist/components/Modal/hooks/useModal.js

@@ -1,20 +1,22 @@
-import { useContext as t, useMemo as s } from "react";
-import { ModalContext as d } from "../ModalProvider.js";
-const u = () => {
-  const o = t(d);
-  return s(
+import { createContext as r, useContext as s, useMemo as d } from "react";
+const n = r(
+  void 0
+), u = () => {
+  const o = s(n);
+  return d(
     () => ({
-      showModal: (e, r = !0) => {
+      showModal: (e, t = !0) => {
         if (o === void 0)
           throw new Error(
             "IressModal: useModal must be used within a IressModalProvider"
           );
-        o.showModal(e, r);
+        o.showModal(e, t);
       }
     }),
     [o]
   );
 };
 export {
+  n as ModalContext,
   u as useModal
 };

package/dist/components/Modal/hooks/useProviderModal.js

@@ -1,13 +1,13 @@
-import { useContext as e } from "react";
-import { ModalContext as s } from "../ModalProvider.js";
-function u(n) {
-  const o = e(s);
+import { useContext as r } from "react";
+import { ModalContext as t } from "./useModal.js";
+function a(o) {
+  const e = r(t);
   return {
-    opened: n && (o == null ? void 0 : o.opened.includes(n)),
-    container: o == null ? void 0 : o.container,
-    show: (t) => n && (o == null ? void 0 : o.showModal(n, t))
+    opened: o && e?.opened.includes(o),
+    container: e?.container,
+    show: (n) => o && e?.showModal(o, n)
   };
 }
 export {
-  u as useProviderModal
+  a as useProviderModal
 };

package/dist/components/Modal/index.js

@@ -1,10 +1,11 @@
 import { modal as e } from "./Modal.styles.js";
-import { IressModal as m } from "./Modal.js";
-import { IressModalProvider as a } from "./ModalProvider.js";
-import { useModal as l } from "./hooks/useModal.js";
+import { IressModal as t } from "./Modal.js";
+import { IressModalProvider as l } from "./ModalProvider.js";
+import { ModalContext as s, useModal as x } from "./hooks/useModal.js";
 export {
-  m as IressModal,
-  a as IressModalProvider,
+  t as IressModal,
+  l as IressModalProvider,
+  s as ModalContext,
   e as modal,
-  l as useModal
+  x as useModal
 };

package/dist/components/Panel/Panel.js

@@ -1,6 +1,6 @@
 import { jsx as s } from "react/jsx-runtime";
 import { panel as m } from "./Panel.styles.js";
-import { s as t } from "../../factory-DHLOr79I.js";
+import { s as t } from "../../factory-oPXoMw9H.js";
 import { IressText as e } from "../Text/Text.js";
 import { c as a } from "../../cx-DN21T1EH.js";
 import { GlobalCSSClass as p } from "../../enums.js";

package/dist/components/Panel/Panel.styles.js

@@ -1,4 +1,4 @@
-import { a } from "../../cva-B2x59Dph.js";
+import { c as a } from "../../cva-JiDXAa83.js";
 const o = a({
   base: {
     display: "block",