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

package/dist/components/Toaster/components/Toast/Toast.styles.js

@@ -0,0 +1,197 @@
+import { s as o } from "../../../../sva-TRyehFkb.js";
+const n = o({
+  slots: [
+    "root",
+    "panel",
+    "wrapper",
+    "icon",
+    "heading",
+    "content",
+    "footer",
+    "closeButton"
+  ],
+  base: {
+    root: {
+      display: "block",
+      position: "relative",
+      zIndex: "500",
+      transition: "[all 0.3s ease-in-out]",
+      layerStyle: "elevation.floating",
+      _motionReduce: {
+        transform: "none",
+        transition: "[opacity 0.3s ease-in-out]",
+        visibility: "hidden"
+      }
+    },
+    panel: {
+      borderWidth: "1px",
+      borderRadius: "radius.system.form",
+      padding: "spacing.400",
+      textStyle: "typography.body.md.regular"
+    },
+    wrapper: {
+      lineHeight: "1.5",
+      paddingRight: "spacing.600"
+    },
+    icon: {
+      lineHeight: "normal"
+    },
+    heading: {
+      display: "inline-block",
+      marginBottom: "spacing.100",
+      marginRight: "spacing.100",
+      "&:empty": {
+        display: "none"
+      },
+      "& > h2, & > h3, & > h4, & > h5, & > h6": {
+        marginBlock: "spacing.000",
+        textStyle: "typography.body.md.strong"
+      }
+    },
+    content: {
+      noGutter: !0
+    },
+    footer: {
+      paddingBlockStart: "spacing.200"
+    },
+    closeButton: {
+      position: "absolute",
+      top: "spacing.050",
+      right: "spacing.050"
+    }
+  },
+  variants: {
+    status: {
+      error: {
+        panel: {
+          backgroundColor: "colour.system.danger.surface",
+          color: "colour.neutral.80",
+          borderColor: "colour.system.danger.fill"
+        },
+        heading: {
+          color: "colour.system.danger.text"
+        }
+      },
+      success: {
+        panel: {
+          backgroundColor: "colour.system.success.surface",
+          color: "colour.neutral.80",
+          borderColor: "colour.system.success.fill"
+        },
+        heading: {
+          color: "colour.system.success.text"
+        }
+      },
+      info: {
+        panel: {
+          backgroundColor: "colour.system.info.surface",
+          color: "colour.neutral.80",
+          borderColor: "colour.system.info.fill"
+        },
+        heading: {
+          color: "colour.system.info.text"
+        }
+      }
+    },
+    animation: {
+      "start-x": {
+        root: {
+          insetInlineStart: "[-100%]",
+          ms: "spacing.400"
+        }
+      },
+      "end-x": {
+        root: {
+          insetInlineEnd: "[-100%]",
+          me: "spacing.400"
+        }
+      },
+      "start-y": {
+        root: {
+          mt: "spacing.400",
+          transform: "[translateY(-100%)]"
+        }
+      },
+      "end-y": {
+        root: {
+          mb: "spacing.400",
+          transform: "[translateY(100%)]"
+        }
+      },
+      fade: {
+        root: {
+          opacity: "0"
+        }
+      }
+    },
+    transitionState: {
+      initial: {
+        root: {
+          opacity: "0"
+        }
+      },
+      open: {
+        root: {
+          opacity: "1",
+          _motionReduce: {
+            visibility: "visible"
+          }
+        }
+      },
+      closed: {
+        root: {
+          opacity: "0"
+        }
+      },
+      unmounted: {
+        root: {
+          display: "none"
+        }
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      animation: "start-x",
+      transitionState: "open",
+      css: {
+        root: {
+          insetInlineStart: "[0%]"
+        }
+      }
+    },
+    {
+      animation: "end-x",
+      transitionState: "open",
+      css: {
+        root: {
+          insetInlineEnd: "[0%]"
+        }
+      }
+    },
+    {
+      animation: ["start-y", "end-y"],
+      transitionState: "open",
+      css: {
+        root: {
+          transform: "[translateY(0%)]"
+        }
+      }
+    },
+    {
+      animation: "fade",
+      transitionState: "open",
+      css: {
+        root: {
+          opacity: "1"
+        }
+      }
+    }
+  ],
+  defaultVariants: {
+    status: "info"
+  }
+});
+export {
+  n as toast
+};

package/dist/components/Toaster/components/Toast/ToastAnimated.js

@@ -0,0 +1,51 @@
+import { jsx as x } from "react/jsx-runtime";
+import { useState as S, useRef as F, useEffect as c } from "react";
+import { getTransitionDuration as O } from "../../../../helpers/transition/getTransitionDuration.js";
+import { u as R, e as T } from "../../../../floating-ui.react-CPN4oQCc.js";
+import { toast as h } from "./Toast.styles.js";
+import { c as j } from "../../../../cx-DN21T1EH.js";
+import { Toast as A } from "./Toast.js";
+const v = ({
+  animation: u,
+  className: m,
+  onClose: n,
+  onTimeout: s,
+  timeout: o = 6e3,
+  ...p
+}) => {
+  const [l, f] = S(!0), a = F(240), { context: e } = R({
+    open: l,
+    onOpenChange: f
+  }), { isMounted: d, status: r } = T(e, {
+    duration: a.current
+  });
+  if (c(() => {
+    o && setTimeout(() => {
+      f(!1), setTimeout(() => s == null ? void 0 : s(), a.current);
+    }, o);
+  }, [s, o]), c(() => {
+    var t;
+    r === "initial" && (a.current = O(
+      e.refs.floating.current
+    )), r === "open" && ((t = e.refs.floating.current) == null || t.focus());
+  }, [r, e.refs.floating]), !d) return !1;
+  const i = r === "close" ? "closed" : r, g = h({
+    animation: u ?? "fade",
+    transitionState: i
+  });
+  return /* @__PURE__ */ x(
+    A,
+    {
+      ...p,
+      className: j(m, g.root),
+      "data-state": i,
+      onClose: (t) => {
+        f(!1), setTimeout(() => n == null ? void 0 : n(t), a.current);
+      },
+      ref: (t) => e.refs.setFloating(t)
+    }
+  );
+};
+export {
+  v as ToastAnimated
+};

package/dist/components/Toaster/helpers/toasterRegister.js

@@ -0,0 +1,10 @@
+const t = /* @__PURE__ */ new Map(), r = (e, s) => {
+  t.set(e, s);
+}, o = (e) => {
+  t.delete(e);
+}, n = (e) => t.get(e);
+export {
+  n as getToaster,
+  r as registerToaster,
+  o as unregisterToaster
+};

package/dist/components/Toaster/hooks/useToaster.js

@@ -1,26 +1,37 @@
-import { useContext as u, useEffect as a, useMemo as c } from "react";
-import { N as f } from "../../../LoadingSuspense-BjzbePWa.js";
-const w = (e) => {
-  const r = u(f);
-  if (r === void 0)
+import { useContext as f, useCallback as u, useMemo as a } from "react";
+import { T as h } from "../../../ToasterProvider-XqpAGfRs.js";
+import { getToaster as w } from "../helpers/toasterRegister.js";
+const l = (o) => {
+  const s = f(h);
+  if (s === void 0)
     throw new Error("useToaster must be used within a IressToasterProvider");
-  const { show: t, setOptions: i, options: o, animateOut: n } = r;
-  return a(() => {
-    e && i({
-      ...o,
-      position: e ?? o.position
-    });
-  }, [e]), c(
+  const t = u(
+    (r, e) => {
+      const n = o ? w(o) : s;
+      if (!n && o)
+        throw new Error(`Toaster with id "${o}" not found.`);
+      return (n == null ? void 0 : n.show(r, e)) ?? "";
+    },
+    [s, o]
+  ), c = u(
+    (r) => {
+      const e = o ? w(o) : s;
+      if (!e && o)
+        throw new Error(`Toaster with id "${o}" not found.`);
+      e == null || e.close(r);
+    },
+    [s, o]
+  );
+  return a(
     () => ({
-      success: (s) => t({ ...s, status: "success" }),
-      error: (s) => t({ ...s, status: "error" }),
-      info: (s) => t({ ...s, status: "info" }),
-      close: n,
-      options: o
+      success: (r) => t("success", r),
+      error: (r) => t("error", r),
+      info: (r) => t("info", r),
+      close: c
     }),
-    [n, o, t]
+    [c, t]
   );
 };
 export {
-  w as useToaster
+  l as useToaster
 };

package/dist/components/Toaster/index.js

@@ -1,17 +1,10 @@
-import { TOAST_ANIMATION as r, TOAST_STATUS as s } from "./Toast/Toast.types.js";
-import { TOASTER_ARIA_ATTRIBUTES as e, TOASTER_POSITION as t, TOAST_POSITION_ANIMATION_MATRIX as I, ToasterPosition as O } from "./Toaster.types.js";
-import { M as S, O as _, T as N, N as x } from "../../LoadingSuspense-BjzbePWa.js";
-import { useToaster as f } from "./hooks/useToaster.js";
+import { I as e } from "../../ToasterProvider-XqpAGfRs.js";
+import { useToaster as s } from "./hooks/useToaster.js";
+import { toaster as f } from "./Toaster.styles.js";
+import { toast as p } from "./components/Toast/Toast.styles.js";
 export {
-  S as IressToast,
-  _ as IressToasterProvider,
-  e as TOASTER_ARIA_ATTRIBUTES,
-  t as TOASTER_POSITION,
-  r as TOAST_ANIMATION,
-  I as TOAST_POSITION_ANIMATION_MATRIX,
-  s as TOAST_STATUS,
-  N as Toast,
-  x as ToasterContext,
-  O as ToasterPosition,
-  f as useToaster
+  e as IressToasterProvider,
+  p as toast,
+  f as toaster,
+  s as useToaster
 };

package/dist/components/Toggle/Toggle.js

@@ -1,101 +1,91 @@
-import { jsxs as f, jsx as l } from "react/jsx-runtime";
-import { c as a } from "../../index-2QXL0WYc.js";
-import { forwardRef as h, useState as B, useId as C, useEffect as x } from "react";
-import { GlobalCSSClass as I } from "../../enums.js";
-import { propagateTestid as u } from "../../helpers/utility/propagateTestid.js";
-import "../CheckboxMark/CheckboxMark.types.js";
-import { IressCheckboxMark as N } from "../CheckboxMark/CheckboxMark.js";
-import { ButtonCssClass as T } from "../Button/Button.types.js";
-import { ToggleLayout as w } from "./Toggle.types.js";
-const L = "ids-toggle--toggle-base-v5170", M = "ids-toggle--checkbox-mark-v5170", S = "ids-toggle--toggle-button-v5170", j = "ids-toggle--button-checked-v5170", R = "ids-toggle--toggle-button-container-v5170", $ = "ids-toggle--label-v5170", E = "ids-toggle--layout__inline-v5170", G = "ids-toggle--layout__stack-v5170", t = {
-  toggleBase: L,
-  checkboxMark: M,
-  toggleButton: S,
-  buttonChecked: j,
-  toggleButtonContainer: R,
-  label: $,
-  layout__inline: E,
-  "layout__inline-reverse": "ids-toggle--layout__inline-reverse-v5170",
-  "layout__inline-between": "ids-toggle--layout__inline-between-v5170",
-  layout__stack: G
-}, O = ({
-  hiddenLabel: o,
+import { jsxs as N, jsx as o } from "react/jsx-runtime";
+import { useState as S, useRef as y, useId as B, useEffect as g } from "react";
+import { propagateTestid as p } from "../../helpers/utility/propagateTestid.js";
+import { IressCheckboxMark as L } from "../CheckboxMark/CheckboxMark.js";
+import "../CheckboxMark/CheckboxMark.styles.js";
+import { toggle as k } from "./Toggle.styles.js";
+import { c as u } from "../../cva-B2x59Dph.js";
+import { c as b } from "../../cx-DN21T1EH.js";
+import { GlobalCSSClass as T } from "../../enums.js";
+import { s as _ } from "../../factory-DHLOr79I.js";
+const j = ({
+  hiddenLabel: s,
+  layout: c,
   children: i,
-  "data-testid": n,
-  ...g
-}) => /* @__PURE__ */ l(
-  "span",
-  {
-    ...g,
-    className: a(t.label, {
-      [I.SROnly]: o
-    }),
-    "data-testid": u(n, "label"),
-    children: i
-  }
-), b = h(
-  ({
-    checked: o = !1,
-    hiddenLabel: i,
-    children: n,
-    layout: g = "inline",
-    className: m,
-    onChange: s,
-    "data-testid": c,
-    ..._
-  }, k) => {
-    const [e, r] = B(o), d = `toggleLabel--${C()}`, y = {
-      hiddenLabel: i,
-      id: d,
-      "data-testid": c
-    }, v = (p) => {
-      r(!e), s == null || s(!e, p);
-    };
-    return x(() => {
-      r(o);
-    }, [o, s]), /* @__PURE__ */ f(
-      "div",
-      {
-        "data-testid": c,
-        ..._,
-        className: a(
-          m,
-          t.toggleBase,
-          t[`layout__${g}`]
-        ),
-        ref: k,
-        children: [
-          /* @__PURE__ */ l(O, { ...y, children: n }),
-          /* @__PURE__ */ l("div", { className: t.toggleButtonContainer, children: /* @__PURE__ */ l(
-            "button",
-            {
-              className: a(T.Base, t.toggleButton, {
-                [t.buttonChecked]: e
-              }),
-              role: "switch",
-              type: "button",
-              "aria-checked": e,
-              onClick: v,
-              "aria-labelledby": d,
-              "data-testid": u(c, "button__button"),
-              children: /* @__PURE__ */ l(
-                N,
-                {
-                  className: a(t.checkboxMark, {
-                    "visibility-hidden": !e
-                  }),
-                  checked: e
-                }
-              )
-            }
-          ) })
-        ]
-      }
-    );
-  }
-);
-b.displayName = "IressToggle";
-b.Layout = w;
+  "data-testid": r,
+  ...n
+}) => {
+  const t = k({ hiddenLabel: s, layout: c });
+  return /* @__PURE__ */ o(
+    "span",
+    {
+      ...n,
+      className: t.label,
+      "data-testid": p(r, "label"),
+      children: i
+    }
+  );
+}, D = ({
+  checked: s = !1,
+  hiddenLabel: c,
+  children: i,
+  layout: r = "inline",
+  className: n,
+  onChange: t,
+  "data-testid": d,
+  ...x
+}) => {
+  const [e, m] = S(s), a = y(null), f = `toggleLabel--${B()}`, I = {
+    hiddenLabel: c,
+    id: f,
+    "data-testid": d
+  }, h = (v) => {
+    m(!e), t == null || t(!e, v);
+  };
+  g(() => {
+    m(s);
+  }, [s, t]), g(() => {
+    a.current && (a.current.classList.remove(
+      u({ _before: { animationStyle: "toggle-active" } })
+    ), a.current.offsetHeight, a.current.classList.add(
+      u({ _before: { animationStyle: "toggle-active" } })
+    ));
+  }, [e]);
+  const l = k({ layout: r, checked: e });
+  return /* @__PURE__ */ N(
+    _.div,
+    {
+      "data-testid": d,
+      ...x,
+      className: b(n, l.toggleBase, T.Toggle),
+      children: [
+        /* @__PURE__ */ o(j, { ...I, layout: r, children: i }),
+        /* @__PURE__ */ o("div", { className: l.toggleButtonContainer, children: /* @__PURE__ */ o(
+          "button",
+          {
+            className: b(l.toggleButton),
+            role: "switch",
+            type: "button",
+            "aria-checked": e,
+            onClick: h,
+            "aria-labelledby": f,
+            "data-testid": p(d, "button__button"),
+            ref: a,
+            children: /* @__PURE__ */ o(
+              L,
+              {
+                className: l.checkboxMark,
+                bg: "transparent",
+                checked: e,
+                size: "sm"
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+};
 export {
-  b as IressToggle
+  D as IressToggle
 };