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

package/dist/components/Modal/Modal.js

@@ -1,16 +1,163 @@
-import "react/jsx-runtime";
-import "../../index-2QXL0WYc.js";
-import { s as M } from "../../LoadingSuspense-D0TO0TDT.js";
-import "react";
-import "../../enums.js";
-import "../../helpers/responsive/getResponsiveLayoutModifiers.js";
-import "../../floating-ui.react-nmA48tb2.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 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,
+  static: a,
+  style: A,
+  ...y
+}) => {
+  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}`),
+    outsidePressEvent: "mousedown"
+  }), V = ce(t), W = de([Q, V]), { isMounted: X, status: s } = me(t, {
+    duration: {
+      close: k.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(
+      "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,
+    {
+      className: l.header,
+      id: p,
+      element: "h2",
+      "data-testid": c(r, "heading"),
+      children: i
+    }
+  ) : 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,
+    {
+      className: O($, l.backdrop, M.ModalBackdrop),
+      "data-testid": c(r, "backdrop"),
+      lockScroll: !a,
+      style: A,
+      children: /* @__PURE__ */ n(
+        ue,
+        {
+          context: t,
+          initialFocus: t.refs.floating,
+          disabled: a,
+          children: /* @__PURE__ */ D(
+            I.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,
+              children: [
+                !z && /* @__PURE__ */ n(
+                  ae,
+                  {
+                    onClick: () => x(!1),
+                    screenreaderText: G,
+                    className: l.closeButton,
+                    "data-testid": c(r, "close-button__button")
+                  }
+                ),
+                /* @__PURE__ */ D(
+                  I.div,
+                  {
+                    className: l.content,
+                    "data-testid": c(r, "content"),
+                    p: C,
+                    children: [
+                      P,
+                      _
+                    ]
+                  }
+                ),
+                w && /* @__PURE__ */ n(
+                  I.div,
+                  {
+                    className: l.footer,
+                    "data-testid": c(r, "footer"),
+                    p: C,
+                    children: w
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  ), 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 });
+};
 export {
-  M as IressModal
+  ze as IressModal
 };

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

@@ -0,0 +1,123 @@
+import { s as o } from "../../sva-TRyehFkb.js";
+const a = [
+  "modal",
+  "backdrop",
+  "closeButton",
+  "header",
+  "content",
+  "footer",
+  "pushElement"
+], i = o({
+  slots: a,
+  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",
+      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))]",
+          overflow: "clip"
+        },
+        content: {
+          flex: "[1]",
+          overflowX: "hidden",
+          overflowY: "auto",
+          maxHeight: "[calc(100vh - ({spacing.spacing.700} * 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 {
+  i as modal
+};

package/dist/components/Modal/ModalProvider.js

@@ -1,6 +1,8 @@
 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 = ({
+const p = f(
+  void 0
+), b = ({
   children: a,
   container: s
 }) => {
@@ -27,6 +29,6 @@ const p = f(void 0), P = ({
   return /* @__PURE__ */ m(p.Provider, { value: d, children: a });
 };
 export {
-  p as IressModalContext,
-  P as IressModalProvider
+  b as IressModalProvider,
+  p as ModalContext
 };

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

@@ -1,8 +1,8 @@
-import { useContext as s, useMemo as t } from "react";
-import { IressModalContext as d } from "../ModalProvider.js";
+import { useContext as t, useMemo as s } from "react";
+import { ModalContext as d } from "../ModalProvider.js";
 const u = () => {
-  const o = s(d);
-  return t(
+  const o = t(d);
+  return s(
     () => ({
       showModal: (e, r = !0) => {
         if (o === void 0)

package/dist/components/Modal/hooks/{useIDSProvidedModal.js → useProviderModal.js}

@@ -1,5 +1,5 @@
 import { useContext as e } from "react";
-import { IressModalContext as s } from "../ModalProvider.js";
+import { ModalContext as s } from "../ModalProvider.js";
 function u(n) {
   const o = e(s);
   return {
@@ -9,5 +9,5 @@ function u(n) {
   };
 }
 export {
-  u as useIDSProvidedModal
+  u as useProviderModal
 };

package/dist/components/Modal/index.js

@@ -1,11 +1,10 @@
-import { MODAL_SIZES as e } from "./Modal.types.js";
-import { s as t } from "../../LoadingSuspense-D0TO0TDT.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 m } from "./Modal.js";
+import { IressModalProvider as a } from "./ModalProvider.js";
+import { useModal as l } from "./hooks/useModal.js";
 export {
-  t as IressModal,
-  d as IressModalContext,
-  x as IressModalProvider,
-  e as MODAL_SIZES,
-  f as useModal
+  m as IressModal,
+  a as IressModalProvider,
+  e as modal,
+  l 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-2QXL0WYc.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-DHLOr79I.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 { a } from "../../cva-B2x59Dph.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,38 +1,35 @@
-import { jsxs as o, jsx as a } from "react/jsx-runtime";
-import { c as m } from "../../index-2QXL0WYc.js";
-import { toCSSLengthValue as s } from "../../helpers/formatting/toCSSLengthValue.js";
-const x = "ids-placeholder-v5160", u = "ids-placeholder--transparent-v5160", n = {
-  placeholder: x,
-  transparent: u
-}, H = ({
-  children: l,
-  className: c,
-  height: r = "auto",
-  stretch: p,
-  style: e,
-  transparent: d,
-  width: t = "auto",
-  ...h
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { toCSSLengthValue as l } 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 = ({
+  children: c,
+  className: m,
+  height: s = "auto",
+  stretch: i,
+  style: o,
+  width: e = "auto",
+  ...n
 }) => {
-  const i = r === "auto" ? p ? "100%" : r : s(r);
-  return /* @__PURE__ */ o(
-    "div",
+  const h = s === "auto" ? i ? "100%" : s : l(s), r = x();
+  return /* @__PURE__ */ a(
+    d,
     {
-      className: m(c, n.placeholder, {
-        [n.transparent]: d
-      }),
-      ...h,
+      className: p(m, r.root, g.Placeholder),
+      ...n,
       style: {
-        ...e,
-        width: t ? s(t) : e == null ? void 0 : e.width,
-        height: i
+        ...o,
+        width: e ? l(e) : o == null ? void 0 : o.width,
+        height: h
       },
       children: [
-        /* @__PURE__ */ o("svg", { xmlns: "http://www.w3.org/2000/svg", children: [
-          /* @__PURE__ */ a("line", { x1: "0", y1: "0", x2: "100%", y2: "100%" }),
-          /* @__PURE__ */ a("line", { x1: "100%", y1: "0", x2: "0", y2: "100%" })
+        /* @__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 })
         ] }),
-        l
+        c
       ]
     }
   );

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

@@ -0,0 +1,32 @@
+import { s as e } from "../../sva-TRyehFkb.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
 };

package/dist/components/Popover/InputPopover/InputPopover.js

@@ -1,87 +1,16 @@
-import { jsx as o, jsxs as j } from "react/jsx-runtime";
-import { forwardRef as F } from "react";
-import { c as i } from "../../../index-2QXL0WYc.js";
-import { GlobalCSSClass as S } from "../../../enums.js";
-import { propagateTestid as m } from "../../../helpers/utility/propagateTestid.js";
-import { s as r } from "../../../Popover.module-B2pz2c2y.js";
-import { InputPopoverProvider as W } from "./InputPopoverProvider.js";
-import { PopoverContent as b } from "../components/PopoverContent.js";
-import { InputPopoverActivator as w } from "./InputPopoverActivator.js";
-import { composePopoverWidth as E } from "../helpers/composePopoverWidth.js";
-import { NestedPopoverActivator as G } from "../components/NestedPopoverActivator.js";
-import { usePopover as R } from "../hooks/usePopover.js";
-const k = ({
-  activator: p,
-  align: s = "auto",
-  autoHighlight: v = !0,
-  children: c,
-  className: n,
-  container: d,
-  contentClassName: l,
-  defaultShow: f,
-  disabledAutoToggle: e,
-  displayMode: a = "overlay",
-  focusStartIndex: u,
-  minLength: P,
-  onActivated: h,
-  onDeactivated: I,
-  onNavigate: x,
-  show: A,
-  type: N = "listbox",
-  width: y,
-  ...t
-}, C) => /* @__PURE__ */ o(
-  W,
-  {
-    align: s,
-    autoHighlight: v,
-    defaultShow: f,
-    disabledAutoToggle: e,
-    matchActivatorWidth: a === "overlay",
-    onActivated: h,
-    onDeactivated: I,
-    onNavigate: x,
-    ref: C,
-    type: N,
-    show: A,
-    focusStartIndex: u,
-    children: /* @__PURE__ */ j(
-      "div",
-      {
-        ...t,
-        className: i(
-          n,
-          S.FormElement,
-          r.popover,
-          r.hasInputActivator
-        ),
-        children: [
-          /* @__PURE__ */ o(G, { parentPopover: R(), children: /* @__PURE__ */ o(
-            w,
-            {
-              "data-testid": m(t["data-testid"], "activator"),
-              disabledAutoToggle: e,
-              minLength: P,
-              children: p
-            }
-          ) }),
-          /* @__PURE__ */ o(
-            b,
-            {
-              className: i(r.inputActivatorPortal, l),
-              container: d,
-              "data-testid": m(t["data-testid"], "content"),
-              displayMode: a,
-              style: E(y),
-              virtualFocus: !0,
-              children: c
-            }
-          )
-        ]
-      }
-    )
-  }
-), V = F(k);
+import "react/jsx-runtime";
+import "react";
+import { I as x } from "../../../InputPopover-BWWuoQZ2.js";
+import "../../../enums.js";
+import "../../../helpers/utility/propagateTestid.js";
+import "../components/PopoverContent.js";
+import "./InputPopoverActivator.js";
+import "../hooks/usePopoverImperativeHandle.js";
+import "../../../factory-DHLOr79I.js";
+import "../hooks/usePopover.js";
+import "../../../cx-DN21T1EH.js";
+import "../Popover.styles.js";
+import "../components/NestedPopoverActivator.js";
 export {
-  V as IressInputPopover
+  x as IressInputPopover
 };