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

package/dist/components/Modal/Modal.js

@@ -1,148 +1,142 @@
-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,
+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: b,
+  footer: h,
   heading: d,
-  noCloseButton: _,
-  onEntered: y,
-  onExited: w,
-  onShowChange: $,
-  onStatus: F,
-  onTransitionEnd: I,
+  noCloseButton: j,
+  onEntered: D,
+  onExited: O,
+  onShowChange: R,
+  onStatus: b,
+  onTransitionEnd: _,
   show: c,
-  static: n,
-  style: E,
-  ...f
+  static: a,
+  style: $,
+  ...m
 }) => {
-  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({
+  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: N
-  }), q = no(e, {
-    enabled: !O,
-    outsidePress: (o) => !o.target.closest(`.${g.Toaster}`),
+    onOpenChange: I
+  }), q = ro(e, {
+    enabled: !B,
+    outsidePress: (o) => !o.target.closest(`.${p.Toaster}`),
     outsidePressEvent: "mousedown"
-  }), z = ao(e), A = lo([q, z]), { isMounted: H, status: t } = io(e, {
+  }), 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: v.current
+      close: y
     }
-  }), s = wo({
+  }), r = ho({
     fixedFooter: T,
-    static: n,
-    status: t
-  }), [J, K] = Fo(f), { p: x = "lg", width: Q = "overlay.md", ...V } = J;
-  u(() => {
-    a.opened && c && po(
+    static: a,
+    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."
     );
-  }, [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,
+  }, [s.opened, c]), N(() => {
+    b?.(i);
+  }, [i, b]);
+  const x = oo(() => typeof d == "string" ? /* @__PURE__ */ n(
+    po,
     {
-      className: s.header,
-      id: m,
+      className: r.header,
+      id: f,
       element: "h2",
-      "data-testid": i(r, "heading"),
+      "data-testid": l(t, "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
-    ]
-  );
+  ) : 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 k = /* @__PURE__ */ l(
-    co,
+  const M = /* @__PURE__ */ n(
+    io,
     {
-      className: S(B, s.backdrop, g.ModalBackdrop),
-      "data-testid": i(r, "backdrop"),
-      lockScroll: !n,
-      style: E,
-      children: /* @__PURE__ */ l(
-        fo,
+      className: C(k, r.backdrop, p.ModalBackdrop),
+      "data-testid": l(t, "backdrop"),
+      lockScroll: !a,
+      style: $,
+      children: /* @__PURE__ */ n(
+        lo,
         {
           context: e,
           initialFocus: e.refs.floating,
-          disabled: n,
-          children: /* @__PURE__ */ P(
-            p.div,
+          disabled: a,
+          children: /* @__PURE__ */ w(
+            u.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,
+              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: [
-                !_ && /* @__PURE__ */ l(
-                  ro,
+                !j && /* @__PURE__ */ n(
+                  eo,
                   {
-                    onClick: () => N(!1),
-                    screenreaderText: j,
-                    className: s.closeButton,
-                    "data-testid": i(r, "close-button__button")
+                    onClick: () => I(!1),
+                    screenreaderText: S,
+                    className: r.closeButton,
+                    "data-testid": l(t, "close-button__button")
                   }
                 ),
-                /* @__PURE__ */ P(
-                  p.div,
+                /* @__PURE__ */ w(
+                  u.div,
                   {
-                    className: s.content,
-                    "data-testid": i(r, "content"),
-                    p: x,
+                    className: r.content,
+                    "data-testid": l(t, "content"),
+                    p: v,
                     children: [
-                      C,
-                      R
+                      x,
+                      P
                     ]
                   }
                 ),
-                b && /* @__PURE__ */ l(
-                  p.div,
+                h && /* @__PURE__ */ n(
+                  u.div,
                   {
-                    className: s.footer,
-                    "data-testid": i(r, "footer"),
-                    p: x,
-                    children: b
+                    className: r.footer,
+                    "data-testid": l(t, "footer"),
+                    p: v,
+                    children: h
                   }
                 )
               ]
@@ -151,9 +145,9 @@ const Eo = ({
         }
       )
     }
-  ), X = h ?? a?.container;
-  return n && !X ? k : /* @__PURE__ */ l(mo, { root: h ?? a?.container, children: k });
+  ), X = g ?? s?.container;
+  return a && !X ? M : /* @__PURE__ */ n(co, { root: g ?? s?.container, children: M });
 };
 export {
-  Eo as IressModal
+  Ro as IressModal
 };

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

@@ -16,11 +16,11 @@ const o = [
     },
     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,16 @@ const o = [
     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]"
       },
@@ -53,7 +53,7 @@ const o = [
         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))]"
           },
@@ -63,7 +63,7 @@ const o = [
           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))]"
           }

package/dist/components/Popover/components/NestedPopoverActivator.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { w as e } from "../../../floating-ui.react-CmSaAiNF.js";
+import { w as e } from "../../../floating-ui.react-BetVZ099.js";
 const m = ({
   children: t,
   parentPopover: o

package/dist/components/Popover/components/PopoverContent.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { q as F, r as v, t as x, v as c, g as I, w as P, f as w } from "../../../floating-ui.react-CmSaAiNF.js";
+import { q as F, r as v, t as x, v as c, g as I, w as P, f as w } from "../../../floating-ui.react-BetVZ099.js";
 import { composePopoverFloatingProps as C } from "../helpers/composeFloatingProps.js";
 import { useContext as E, useEffect as T } from "react";
 import { s as N } from "../../../factory-oPXoMw9H.js";

package/dist/components/Popover/helpers/handlePopoverTabKey.js

@@ -1,4 +1,4 @@
-import { t as o } from "../../../index.esm-8uZEha-3.js";
+import { t as o } from "../../../index.esm-CL8gh5wr.js";
 import { FOCUSABLE_QUERY_SELECTOR as c } from "../../../constants.js";
 import { focusableElements as l } from "../../../helpers/dom/focusableElements.js";
 import { waitUntilTrue as u } from "./waitUntilTrue.js";

package/dist/components/Popover/hooks/usePopover.js

@@ -1,6 +1,6 @@
 import { createContext as z, useRef as V, useMemo as p, useCallback as x } from "react";
 import { useControlledState as D } from "../../../hooks/useControlledState.js";
-import { o as A, j as E, i as K, s as T, m as W, u as X, n as B, b as J, c as L, d as Q, p as Y } from "../../../floating-ui.react-CmSaAiNF.js";
+import { o as A, j as E, i as K, s as T, m as W, u as X, n as B, b as J, c as L, d as Q, p as Y } from "../../../floating-ui.react-BetVZ099.js";
 import { usePopoverNavigation as Z } from "./usePopoverNavigation.js";
 import { focusableElements as ee } from "../../../helpers/dom/focusableElements.js";
 import { usePopoverAria as oe } from "./usePopoverAria.js";

package/dist/components/Popover/hooks/usePopoverItem.js

@@ -1,4 +1,4 @@
-import { h as c } from "../../../floating-ui.react-CmSaAiNF.js";
+import { h as c } from "../../../floating-ui.react-BetVZ099.js";
 import { useContext as p, useId as f, useMemo as m, useEffect as v } from "react";
 import { PopoverContext as d } from "./usePopover.js";
 const l = (r, t = null) => {

package/dist/components/Popover/hooks/usePopoverNavigation.js

@@ -1,5 +1,5 @@
 import { useMemo as r, useState as O, useEffect as N, useRef as c } from "react";
-import { x as R } from "../../../floating-ui.react-CmSaAiNF.js";
+import { x as R } from "../../../floating-ui.react-BetVZ099.js";
 const b = (s, e, o, m, u = 0) => {
   const t = r(
     () => !!(e && ["menu", "listbox"].includes(e)),

package/dist/components/Progress/Progress.js

@@ -1,62 +1,56 @@
-import { jsx as n } from "react/jsx-runtime";
-import { useState as v, useEffect as M } from "react";
-import { stringReplacer as b } from "../../helpers/formatting/stringReplacer.js";
-import { c as x } from "../../css-fGu_jDvv.js";
-import { c as C } from "../../cx-DN21T1EH.js";
-import { progress as h } from "./Progress.styles.js";
-import { s as c } from "../../factory-oPXoMw9H.js";
-import { s as N } from "../../is-valid-prop-Ce0wiweq.js";
-import { GlobalCSSClass as V } from "../../enums.js";
-import { t as j } from "../../index-CvOVcYUc.js";
-const A = ({
+import { jsx as m } from "react/jsx-runtime";
+import { stringReplacer as v } from "../../helpers/formatting/stringReplacer.js";
+import { c as P } from "../../css-fGu_jDvv.js";
+import { c as S } from "../../cx-DN21T1EH.js";
+import { progress as y } from "./Progress.styles.js";
+import { s as n } from "../../factory-oPXoMw9H.js";
+import { s as b } from "../../is-valid-prop-Ce0wiweq.js";
+import { GlobalCSSClass as x } from "../../enums.js";
+import { t as C } from "../../index-CZ9ot38T.js";
+const V = ({
   borderRadius: e,
   className: p,
   max: r = 100,
   min: s,
-  sectionTitle: f = "Progress is {{current}} of {{max}}",
-  style: u,
-  value: o = 0,
-  ...d
+  sectionTitle: c = "Progress is {{current}} of {{max}}",
+  style: f,
+  value: u = 0,
+  ...g
 }) => {
-  const [t, g] = v(o), [S, a] = N(d), l = C(
+  const [d, t] = b(g), a = S(
     p,
-    x(h.raw(), S),
-    V.Progress
-  ), i = () => b(f, [
-    { name: "{{current}}", value: String(t) },
+    P(y.raw(), d),
+    x.Progress
+  ), o = Math.min(Math.max(u, s ?? 0), r), i = () => v(c, [
+    { name: "{{current}}", value: String(o) },
     { name: "{{max}}", value: r.toString() }
-  ]);
-  M(() => {
-    const P = Math.max(o, s ?? 0), y = Math.min(P, r);
-    g(y);
-  }, [o, s, r]);
-  const m = {
-    "--iress-border-radius": e ? j(`radii.${e}`) : void 0,
-    ...u
+  ]), l = {
+    "--iress-border-radius": e ? C(`radii.${e}`) : void 0,
+    ...f
   };
-  return s !== void 0 ? /* @__PURE__ */ n(
-    c.meter,
+  return s !== void 0 ? /* @__PURE__ */ m(
+    n.meter,
     {
       "aria-label": i(),
-      className: l,
+      className: a,
       max: r,
       min: s,
-      value: t,
-      ...a,
-      style: m
+      value: o,
+      ...t,
+      style: l
     }
-  ) : /* @__PURE__ */ n(
-    c.progress,
+  ) : /* @__PURE__ */ m(
+    n.progress,
     {
       "aria-label": i(),
-      className: l,
+      className: a,
       max: r,
-      value: t,
-      ...a,
-      style: m
+      value: o,
+      ...t,
+      style: l
     }
   );
 };
 export {
-  A as IressProgress
+  V as IressProgress
 };

package/dist/components/Progress/Progress.styles.js

@@ -13,20 +13,20 @@ const e = r({
     _progressBar: {
       bg: "transparent",
       height: "progress.height",
-      margin: "spacing.000"
+      margin: "spacing.0"
     },
     _progressValue: {
       appearance: "none",
       bg: "[currentColor]",
       borderRadius: "var(--iress-border-radius)",
-      margin: "spacing.000",
+      margin: "spacing.0",
       transition: "all"
     },
     _mozProgressValue: {
       appearance: "none",
       bg: "[currentColor]",
       borderRadius: "var(--iress-border-radius)",
-      margin: "spacing.000",
+      margin: "spacing.0",
       transition: "all"
     }
   }

package/dist/components/Provider/Provider.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "../Modal/Modal.styles.js";
 import "react";
-import "../../Button-D6AL0bia.js";
+import "../../Button-mmhMLwp9.js";
 import "../Button/CloseButton/CloseButton.js";
 import "../Modal/hooks/useModal.js";
 import "../Modal/ModalProvider.js";
@@ -10,11 +10,11 @@ import "../Toaster/hooks/useToaster.js";
 import "../Toaster/Toaster.styles.js";
 import "../Toaster/components/Toast/Toast.styles.js";
 import "../Slideout/Slideout.styles.js";
-import "../../index-CvOVcYUc.js";
+import "../../index-CZ9ot38T.js";
 import "../Slideout/hooks/useSlideout.js";
 import "../Slideout/SlideoutProvider.js";
 import "react-dom";
-import { I as h } from "../../Provider-BXQiO7Gp.js";
+import { I as h } from "../../Provider-8wS70V56.js";
 export {
   h as IressProvider
 };

package/dist/components/Provider/index.js

@@ -1,4 +1,4 @@
-import { I as o } from "../../Provider-BXQiO7Gp.js";
+import { I as o } from "../../Provider-8wS70V56.js";
 export {
   o as IressProvider
 };