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

package/dist/components/Modal/Modal.js

@@ -1,16 +1,159 @@
-import "react/jsx-runtime";
-import "../../index-cbHCAGLB.js";
-import { s as M } from "../../LoadingSuspense-BtzikVZk.js";
-import "react";
-import "../../enums.js";
-import "../../helpers/responsive/getResponsiveLayoutModifiers.js";
-import "../../floating-ui.react-DYBeYtOf.js";
-import "../../helpers/transition/timeStringToNumber.js";
-import "../../helpers/utility/idsLogger.js";
-import "../../helpers/utility/propagateTestid.js";
-import "../../hooks/useIdIfNeeded.js";
-import "../Text/Text.js";
-import "./hooks/useIDSProvidedModal.js";
+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: 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 [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"
+  }), z = ao(e), A = lo([q, z]), { isMounted: H, status: t } = io(e, {
+    duration: {
+      close: v.current
+    }
+  }), 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."
+    );
+  }, [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);
+  }, [e.refs.floating, t]);
+  const C = eo(() => typeof d == "string" ? /* @__PURE__ */ l(
+    bo,
+    {
+      className: s.header,
+      id: m,
+      element: "h2",
+      "data-testid": i(r, "heading"),
+      children: d
+    }
+  ) : 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?.());
+    },
+    [
+      I,
+      t,
+      y,
+      e.refs.floating,
+      w,
+      n
+    ]
+  );
+  if (!H) return null;
+  const k = /* @__PURE__ */ l(
+    co,
+    {
+      className: S(B, s.backdrop, g.ModalBackdrop),
+      "data-testid": i(r, "backdrop"),
+      lockScroll: !n,
+      style: E,
+      children: /* @__PURE__ */ l(
+        fo,
+        {
+          context: e,
+          initialFocus: e.refs.floating,
+          disabled: n,
+          children: /* @__PURE__ */ P(
+            p.div,
+            {
+              ref: (o) => e.refs.setFloating(o),
+              className: S(s.modal, ho(), g.Modal),
+              id: M,
+              "data-testid": r,
+              "aria-labelledby": C ? m : void 0,
+              ...A.getFloatingProps(K),
+              ...V,
+              w: Q,
+              onTransitionEnd: W,
+              children: [
+                !_ && /* @__PURE__ */ l(
+                  ro,
+                  {
+                    onClick: () => N(!1),
+                    screenreaderText: j,
+                    className: s.closeButton,
+                    "data-testid": i(r, "close-button__button")
+                  }
+                ),
+                /* @__PURE__ */ P(
+                  p.div,
+                  {
+                    className: s.content,
+                    "data-testid": i(r, "content"),
+                    p: x,
+                    children: [
+                      C,
+                      R
+                    ]
+                  }
+                ),
+                b && /* @__PURE__ */ l(
+                  p.div,
+                  {
+                    className: s.footer,
+                    "data-testid": i(r, "footer"),
+                    p: x,
+                    children: b
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  ), X = h ?? a?.container;
+  return n && !X ? k : /* @__PURE__ */ l(mo, { root: h ?? a?.container, children: k });
+};
 export {
-  M as IressModal
+  Eo as IressModal
 };

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

@@ -0,0 +1,132 @@
+import { s as a } from "../../sva-OmxClA9g.js";
+const o = [
+  "modal",
+  "backdrop",
+  "closeButton",
+  "header",
+  "content",
+  "footer",
+  "pushElement"
+], t = a({
+  slots: o,
+  base: {
+    backdrop: {
+      transition: "[all 0.3s ease-in-out]",
+      zIndex: "400"
+    },
+    closeButton: {
+      position: "absolute",
+      top: "spacing.200",
+      right: "spacing.200"
+    },
+    header: {
+      mb: "spacing.400"
+    },
+    footer: {
+      borderBlockStart: "divider"
+    },
+    modal: {
+      position: "relative",
+      borderRadius: "radius.system.layout",
+      padding: "spacing.000",
+      width: "overlay.md",
+      maxWidth: "[calc(100vw - ({spacing.spacing.700}))]",
+      minHeight: "auto",
+      layerStyle: "elevation.floating",
+      background: "colour.neutral.10",
+      outline: "[0]",
+      opacity: 0,
+      transition: "[all 0.3s ease-in-out]",
+      marginBlock: "spacing.700",
+      "@media (min-height: 600px)": {
+        marginBlock: "[100px]"
+      },
+      marginInline: "auto"
+    }
+  },
+  variants: {
+    /**
+     * When set to `true` the modal's footer will always be visible and fixed to the bottom of the modal.
+     */
+    fixedFooter: {
+      true: {
+        modal: {
+          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))]",
+          "@media (min-height: 600px)": {
+            maxHeight: "[calc(100vh - (100px * 2))]"
+          }
+        },
+        footer: {
+          flex: "[0]"
+        }
+      }
+    },
+    /**
+     * The state of the modal.
+     */
+    status: {
+      initial: {
+        backdrop: {
+          bg: "transparent"
+        },
+        modal: {
+          opacity: 0
+        }
+      },
+      close: {
+        backdrop: {
+          bg: "transparent"
+        },
+        modal: {
+          opacity: 0
+        }
+      },
+      open: {
+        backdrop: {
+          bg: "colour.system.backdrop.fill"
+        },
+        modal: {
+          opacity: 1
+        }
+      },
+      unmounted: {
+        backdrop: {
+          display: "none"
+        },
+        modal: {
+          display: "none"
+        }
+      }
+    },
+    /**
+     * When set to `true`, the modal will act like a static element when open.
+     * This means it will not lock scroll or focus within the modal.
+     * Note: This is used internally to display modals in Styler. It is not recommended to use this prop in your own applications.
+     */
+    static: {
+      true: {
+        backdrop: {
+          position: "static !important"
+        },
+        modal: {
+          position: "relative"
+        }
+      }
+    }
+  }
+});
+export {
+  t as modal
+};

package/dist/components/Modal/ModalProvider.js

@@ -1,32 +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), P = ({
+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 {
-  p as IressModalContext,
-  P as IressModalProvider
+  b as IressModalProvider
 };

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

@@ -1,20 +1,22 @@
-import { useContext as s, useMemo as t } from "react";
-import { IressModalContext as d } from "../ModalProvider.js";
-const u = () => {
-  const o = s(d);
-  return t(
+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/{useIDSProvidedModal.js → useProviderModal.js}

@@ -1,6 +1,6 @@
 import { useContext as r } from "react";
-import { IressModalContext as t } from "../ModalProvider.js";
-function p(o) {
+import { ModalContext as t } from "./useModal.js";
+function a(o) {
   const e = r(t);
   return {
     opened: o && e?.opened.includes(o),
@@ -9,5 +9,5 @@ function p(o) {
   };
 }
 export {
-  p as useIDSProvidedModal
+  a as useProviderModal
 };

package/dist/components/Modal/index.js

@@ -1,11 +1,11 @@
-import { MODAL_SIZES as e } from "./Modal.types.js";
-import { s as t } from "../../LoadingSuspense-BtzikVZk.js";
-import { IressModalContext as d, IressModalProvider as x } from "./ModalProvider.js";
-import { useModal as f } from "./hooks/useModal.js";
+import { modal as e } from "./Modal.styles.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 {
   t as IressModal,
-  d as IressModalContext,
-  x as IressModalProvider,
-  e as MODAL_SIZES,
-  f as useModal
+  l as IressModalProvider,
+  s as ModalContext,
+  e as modal,
+  x as useModal
 };

package/dist/components/Panel/Panel.js

@@ -1,36 +1,10 @@
-import { jsx as p } from "react/jsx-runtime";
-import { c as u } from "../../index-cbHCAGLB.js";
-import { PanelCssClass as s, PanelBackground as f } from "./Panel.types.js";
-import { GlobalCSSClass as B, PaddingSize as C, TextAlign as P } from "../../enums.js";
-import { getResponsivePaddingClasses as x } from "../../helpers/responsive/getResponsivePaddingClasses.js";
-const a = ({
-  children: e,
-  background: o = "default",
-  noBorderRadius: r,
-  noGutter: t,
-  padding: n = "md",
-  stretch: i,
-  textAlign: l = "inherit",
-  className: d,
-  ...m
-}) => {
-  const c = {
-    [s.Stretch]: i,
-    [s.NoBorderRadius]: r,
-    [s.NoGutter]: t
-  }, g = u(
-    d,
-    s.Base,
-    `${B.TextAlignBase}--${l}`,
-    `${s.Background}--${o}`,
-    x(n),
-    c
-  );
-  return /* @__PURE__ */ p("div", { className: g, ...m, children: e });
-};
-a.Background = f;
-a.Padding = C;
-a.TextAlign = P;
+import { jsx as s } from "react/jsx-runtime";
+import { panel as m } from "./Panel.styles.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";
+const l = t(e, m), I = ({ className: o, ...r }) => /* @__PURE__ */ s(l, { ...r, className: a(o, p.Panel) });
 export {
-  a as IressPanel
+  I as IressPanel
 };

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

@@ -0,0 +1,23 @@
+import { c as a } from "../../cva-JiDXAa83.js";
+const o = a({
+  base: {
+    display: "block",
+    boxSizing: "border-box",
+    borderRadius: "radius.system.layout",
+    padding: "md",
+    bg: "colour.neutral.10"
+  },
+  variants: {
+    noBorderRadius: {
+      true: {
+        borderRadius: "radius.000"
+      }
+    }
+  },
+  defaultVariants: {
+    noBorderRadius: !1
+  }
+});
+export {
+  o as panel
+};

package/dist/components/Panel/index.js

@@ -1,8 +1,6 @@
-import { PANEL_BACKGROUNDS as s, PanelBackground as a, PanelCssClass as o } from "./Panel.types.js";
-import { IressPanel as n } from "./Panel.js";
+import { IressPanel as o } from "./Panel.js";
+import { panel as a } from "./Panel.styles.js";
 export {
-  n as IressPanel,
-  s as PANEL_BACKGROUNDS,
-  a as PanelBackground,
-  o as PanelCssClass
+  o as IressPanel,
+  a as panel
 };

package/dist/components/Placeholder/Placeholder.js

@@ -1,42 +1,39 @@
-import { jsxs as s, jsx as o } from "react/jsx-runtime";
-import { c as m } from "../../index-cbHCAGLB.js";
+import { jsxs as r, jsx as l } from "react/jsx-runtime";
 import { toCSSLengthValue as a } from "../../helpers/formatting/toCSSLengthValue.js";
-const x = "ids-placeholder-v5202", u = "ids-placeholder--transparent-v5202", l = {
-  placeholder: x,
-  transparent: u
-}, f = ({
-  children: n,
-  className: c,
-  height: e = "auto",
-  stretch: p,
-  style: t,
-  transparent: d,
-  width: r = "auto",
-  ...h
+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 C = ({
+  children: c,
+  className: m,
+  height: s = "auto",
+  stretch: i,
+  style: e,
+  width: t = "auto",
+  ...n
 }) => {
-  const i = e === "auto" ? p ? "100%" : e : a(e);
-  return /* @__PURE__ */ s(
-    "div",
+  const h = s === "auto" ? i ? "100%" : s : a(s), o = x();
+  return /* @__PURE__ */ r(
+    d,
     {
-      className: m(c, l.placeholder, {
-        [l.transparent]: d
-      }),
-      ...h,
+      className: p(m, o.root, g.Placeholder),
+      ...n,
       style: {
-        ...t,
-        width: r ? a(r) : t?.width,
-        height: i
+        ...e,
+        width: t ? a(t) : e?.width,
+        height: h
       },
       children: [
-        /* @__PURE__ */ s("svg", { xmlns: "http://www.w3.org/2000/svg", children: [
-          /* @__PURE__ */ o("line", { x1: "0", y1: "0", x2: "100%", y2: "100%" }),
-          /* @__PURE__ */ o("line", { x1: "100%", y1: "0", x2: "0", y2: "100%" })
+        /* @__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 })
         ] }),
-        n
+        c
       ]
     }
   );
 };
 export {
-  f as IressPlaceholder
+  C as IressPlaceholder
 };

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

@@ -0,0 +1,32 @@
+import { s as e } from "../../sva-OmxClA9g.js";
+const t = e({
+  slots: ["root", "svg", "line"],
+  base: {
+    root: {
+      alignItems: "center",
+      bg: "colour.neutral.20",
+      border: "placeholder",
+      borderRadius: "radius.system.layout",
+      boxSizing: "border-box",
+      display: "flex",
+      justifyContent: "center",
+      overflow: "hidden",
+      position: "relative",
+      zIndex: "000"
+    },
+    svg: {
+      position: "absolute",
+      width: "[100%]",
+      height: "[100%]",
+      zIndex: "[-1]"
+    },
+    line: {
+      strokeWidth: "1.5px",
+      stroke: "colour.neutral.30",
+      strokeOpacity: "0.5"
+    }
+  }
+});
+export {
+  t as placeholder
+};

package/dist/components/Placeholder/index.js

@@ -1,4 +1,6 @@
 import { IressPlaceholder as o } from "./Placeholder.js";
+import { placeholder as p } from "./Placeholder.styles.js";
 export {
-  o as IressPlaceholder
+  o as IressPlaceholder,
+  p as placeholder
 };