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

package/dist/components/Modal/Modal.js

@@ -1,152 +1,142 @@
-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,
-  "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,
+import { jsx as n, jsxs as w } from "react/jsx-runtime";
+import { useState as Z, useEffect as N, useMemo as oo } from "react";
+import "../../Button-mmhMLwp9.js";
+import { IressCloseButton as eo } from "../Button/CloseButton/CloseButton.js";
+import { u as to, b as ro, c as so, d as no, e as ao, F as io, f as lo, g as co } from "../../floating-ui.react-BetVZ099.js";
+import { idsLogger as mo } from "../../helpers/utility/idsLogger.js";
+import { propagateTestid as l } from "../../helpers/utility/propagateTestid.js";
+import { useIdIfNeeded as fo } from "../../hooks/useIdIfNeeded.js";
+import { text as uo } from "../Text/Text.styles.js";
+import { IressText as po } from "../Text/Text.js";
+import { useProviderModal as go } from "./hooks/useProviderModal.js";
+import { modal as ho } from "./Modal.styles.js";
+import { c as C } from "../../cx-DN21T1EH.js";
+import { s as u } from "../../factory-oPXoMw9H.js";
+import { s as bo } from "../../is-valid-prop-Ce0wiweq.js";
+import { GlobalCSSClass as p } from "../../enums.js";
+import { getTransitionDuration as yo } from "../../helpers/transition/getTransitionDuration.js";
+const Ro = ({
+  children: P,
+  className: k,
+  closeText: S,
+  container: g,
+  "data-testid": t,
+  defaultShow: E = !1,
+  disableBackdropClick: B,
+  fixedFooter: T,
+  footer: h,
+  heading: d,
+  noCloseButton: j,
+  onEntered: D,
+  onExited: O,
+  onShowChange: R,
+  onStatus: b,
+  onTransitionEnd: _,
+  show: c,
   static: a,
-  style: A,
-  ...y
+  style: $,
+  ...m
 }) => {
-  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(E);
+  let y = 240;
+  const s = go(m.id), F = fo({ id: m.id }), f = `${F}--heading`, U = s.opened || c || G, I = (o) => {
+    s.show(o), L(o), R?.(o);
+  }, { context: e } = to({
+    open: U,
+    onOpenChange: I
+  }), q = ro(e, {
+    enabled: !B,
+    outsidePress: (o) => !o.target.closest(`.${p.Toaster}`),
     outsidePressEvent: "mousedown"
-  }), V = ce(t), W = de([Q, V]), { isMounted: X, status: s } = me(t, {
+  }), z = so(e), A = no([q, z]);
+  e.refs.floating.current && (y = yo(
+    e.refs.floating.current,
+    1.2,
+    240
+  ));
+  const { isMounted: H, status: i } = ao(e, {
     duration: {
-      close: k.current
+      close: y
     }
-  }), l = Me({
-    fixedFooter: q,
+  }), r = ho({
+    fixedFooter: T,
     static: a,
-    status: s
-  }), [Y, Z] = Ne(y), { p: C = "lg", width: S = "overlay.md", ...T } = Y;
-  F(() => {
-    o.opened && b && he(
+    status: i
+  }), [J, K] = bo(m), { p: v = "lg", width: Q = "overlay.md", ...V } = J;
+  N(() => {
+    s.opened && c && mo(
       "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"
-    ) * 1.2);
-  }, [t.refs.floating, s]);
-  const P = se(() => typeof i == "string" ? /* @__PURE__ */ n(
-    Fe,
+  }, [s.opened, c]), N(() => {
+    b?.(i);
+  }, [i, b]);
+  const x = oo(() => typeof d == "string" ? /* @__PURE__ */ n(
+    po,
     {
-      className: l.header,
-      id: p,
+      className: r.header,
+      id: f,
       element: "h2",
-      "data-testid": c(r, "heading"),
-      children: i
+      "data-testid": l(t, "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()));
-    },
-    [
-      u,
-      s,
-      d,
-      t.refs.floating,
-      m,
-      a
-    ]
-  );
-  if (!X) return null;
-  const R = /* @__PURE__ */ n(
-    fe,
+  ) : d, [t, f, d, r.header]), W = (o) => {
+    _?.(o), !(!(o.propertyName === "opacity" || !o.propertyName) || o.target !== o.currentTarget) && (i === "open" ? (D?.(), a || e.refs.floating?.current?.focus()) : i === "close" && O?.());
+  };
+  if (!H) return null;
+  const M = /* @__PURE__ */ n(
+    io,
     {
-      className: O($, l.backdrop, M.ModalBackdrop),
-      "data-testid": c(r, "backdrop"),
+      className: C(k, r.backdrop, p.ModalBackdrop),
+      "data-testid": l(t, "backdrop"),
       lockScroll: !a,
-      style: A,
+      style: $,
       children: /* @__PURE__ */ n(
-        ue,
+        lo,
         {
-          context: t,
-          initialFocus: t.refs.floating,
+          context: e,
+          initialFocus: e.refs.floating,
           disabled: a,
-          children: /* @__PURE__ */ D(
-            I.div,
+          children: /* @__PURE__ */ w(
+            u.div,
             {
-              ref: (e) => t.refs.setFloating(e),
-              className: O(l.modal, ye(), M.Modal),
-              id: v,
-              "data-testid": r,
-              "aria-labelledby": P ? p : void 0,
-              ...W.getFloatingProps(Z),
-              ...T,
-              w: S,
-              onTransitionEnd: E,
+              ref: (o) => e.refs.setFloating(o),
+              className: C(r.modal, uo(), p.Modal),
+              id: F,
+              "data-testid": t,
+              "aria-labelledby": x ? f : void 0,
+              ...A.getFloatingProps(K),
+              ...V,
+              w: Q,
+              onTransitionEnd: W,
               children: [
-                !z && /* @__PURE__ */ n(
-                  ae,
+                !j && /* @__PURE__ */ n(
+                  eo,
                   {
-                    onClick: () => x(!1),
-                    screenreaderText: G,
-                    className: l.closeButton,
-                    "data-testid": c(r, "close-button__button")
+                    onClick: () => I(!1),
+                    screenreaderText: S,
+                    className: r.closeButton,
+                    "data-testid": l(t, "close-button__button")
                   }
                 ),
-                /* @__PURE__ */ D(
-                  I.div,
+                /* @__PURE__ */ w(
+                  u.div,
                   {
-                    className: l.content,
-                    "data-testid": c(r, "content"),
-                    p: C,
+                    className: r.content,
+                    "data-testid": l(t, "content"),
+                    p: v,
                     children: [
-                      P,
-                      _
+                      x,
+                      P
                     ]
                   }
                 ),
-                w && /* @__PURE__ */ n(
-                  I.div,
+                h && /* @__PURE__ */ n(
+                  u.div,
                   {
-                    className: l.footer,
-                    "data-testid": c(r, "footer"),
-                    p: C,
-                    children: w
+                    className: r.footer,
+                    "data-testid": l(t, "footer"),
+                    p: v,
+                    children: h
                   }
                 )
               ]
@@ -155,9 +145,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 = g ?? s?.container;
+  return a && !X ? M : /* @__PURE__ */ n(co, { root: g ?? s?.container, children: M });
 };
 export {
-  ze as IressModal
+  Ro 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]",
@@ -16,11 +16,11 @@ const a = [
     },
     closeButton: {
       position: "absolute",
-      top: "spacing.200",
-      right: "spacing.200"
+      top: "spacing.2",
+      right: "spacing.2"
     },
     header: {
-      mb: "spacing.400"
+      mb: "spacing.4"
     },
     footer: {
       borderBlockStart: "divider"
@@ -28,16 +28,19 @@ const a = [
     modal: {
       position: "relative",
       borderRadius: "radius.system.layout",
-      padding: "spacing.000",
+      padding: "spacing.0",
       width: "overlay.md",
-      maxWidth: "[calc(100vw - ({spacing.spacing.700}))]",
+      maxWidth: "[calc(100vw - ({spacing.spacing.7}))]",
       minHeight: "auto",
       layerStyle: "elevation.floating",
       background: "colour.neutral.10",
       outline: "[0]",
       opacity: 0,
       transition: "[all 0.3s ease-in-out]",
-      marginBlock: "spacing.700",
+      marginBlock: "spacing.7",
+      "@media (min-height: 600px)": {
+        marginBlock: "[100px]"
+      },
       marginInline: "auto"
     }
   },
@@ -50,14 +53,20 @@ const a = [
         modal: {
           display: "flex",
           flexDirection: "column",
-          maxHeight: "[calc(100vh - ({spacing.spacing.700} * 2))]",
+          maxHeight: "[calc(100vh - ({spacing.spacing.7} * 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.7} * 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",

package/dist/components/Placeholder/Placeholder.js

@@ -1,33 +1,33 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { toCSSLengthValue as l } from "../../helpers/formatting/toCSSLengthValue.js";
+import { jsxs as r, jsx as l } from "react/jsx-runtime";
+import { toCSSLengthValue as a } from "../../helpers/formatting/toCSSLengthValue.js";
 import { c as p } from "../../cx-DN21T1EH.js";
 import { placeholder as x } from "./Placeholder.styles.js";
 import { IressText as d } from "../Text/Text.js";
 import { GlobalCSSClass as g } from "../../enums.js";
-const H = ({
+const C = ({
   children: c,
   className: m,
   height: s = "auto",
   stretch: i,
-  style: o,
-  width: e = "auto",
+  style: e,
+  width: t = "auto",
   ...n
 }) => {
-  const h = s === "auto" ? i ? "100%" : s : l(s), r = x();
-  return /* @__PURE__ */ a(
+  const h = s === "auto" ? i ? "100%" : s : a(s), o = x();
+  return /* @__PURE__ */ r(
     d,
     {
-      className: p(m, r.root, g.Placeholder),
+      className: p(m, o.root, g.Placeholder),
       ...n,
       style: {
-        ...o,
-        width: e ? l(e) : o == null ? void 0 : o.width,
+        ...e,
+        width: t ? a(t) : e?.width,
         height: h
       },
       children: [
-        /* @__PURE__ */ a("svg", { xmlns: "http://www.w3.org/2000/svg", className: r.svg, children: [
-          /* @__PURE__ */ t("line", { x1: "0", y1: "0", x2: "100%", y2: "100%", className: r.line }),
-          /* @__PURE__ */ t("line", { x1: "100%", y1: "0", x2: "0", y2: "100%", className: r.line })
+        /* @__PURE__ */ r("svg", { xmlns: "http://www.w3.org/2000/svg", className: o.svg, children: [
+          /* @__PURE__ */ l("line", { x1: "0", y1: "0", x2: "100%", y2: "100%", className: o.line }),
+          /* @__PURE__ */ l("line", { x1: "100%", y1: "0", x2: "0", y2: "100%", className: o.line })
         ] }),
         c
       ]
@@ -35,5 +35,5 @@ const H = ({
   );
 };
 export {
-  H as IressPlaceholder
+  C as IressPlaceholder
 };

package/dist/components/Placeholder/Placeholder.styles.js

@@ -1,4 +1,4 @@
-import { s as e } from "../../sva-TRyehFkb.js";
+import { s as e } from "../../sva-OmxClA9g.js";
 const t = e({
   slots: ["root", "svg", "line"],
   base: {