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

package/dist/components/Tag/TagInput/TagInput.js

@@ -1,125 +1,141 @@
-import { jsx as o, jsxs as x } from "react/jsx-runtime";
-import { forwardRef as z, useState as F, useCallback as G } from "react";
-import { IressInput as H } from "../../Input/Input.js";
+import { jsxs as y, jsx as d } from "react/jsx-runtime";
+import { forwardRef as $, useState as b, useCallback as z } from "react";
+import { IressInput as F } from "../../Input/Input.js";
 import "../../Input/Input.styles.js";
-import { useControlledState as J } from "../../../hooks/useControlledState.js";
-import { getValueAsEvent as a } from "../../../helpers/form/getValueAsEvent.js";
-import { IressTag as w } from "../Tag.js";
+import { useControlledState as G } from "../../../hooks/useControlledState.js";
+import { getValueAsEvent as p } from "../../../helpers/form/getValueAsEvent.js";
+import { IressTag as h } from "../Tag.js";
 import { propagateTestid as v } from "../../../helpers/utility/propagateTestid.js";
 import "../../Inline/Inline.styles.js";
-import { IressInline as L } from "../../Inline/Inline.js";
-const M = ({
-  "data-testid": u,
-  onTagDelete: d,
-  onTagDeleteAll: e,
-  onTagDeleteButtonBlur: c,
-  selectedOptionsTagText: i,
-  tags: p = [],
-  tagLimit: l = 5
-}) => p.length ? p.length <= l ? /* @__PURE__ */ o(
-  L,
+import { IressInline as H } from "../../Inline/Inline.js";
+import { tagInput as J } from "./TagInput.styles.js";
+const L = ({
+  "data-testid": s,
+  onTagDelete: c,
+  onTagDeleteAll: u,
+  onTagDeleteButtonBlur: i,
+  selectedOptionsTagText: n,
+  tags: r = [],
+  tagLimit: m = 5
+}) => r.length ? r.length <= m ? r.map((l) => /* @__PURE__ */ d(
+  h,
   {
-    gap: "sm",
-    pl: "xs",
-    "data-testid": v(u, "items"),
-    children: p.map((m) => /* @__PURE__ */ o(
-      w,
-      {
-        deleteButtonText: `Delete ${m}`,
-        onDelete: d,
-        onDeleteButtonBlur: c,
-        "data-testid": v(u, "tag"),
-        children: m
-      },
-      m
-    ))
-  }
-) : /* @__PURE__ */ x(
-  w,
+    deleteButtonText: `Delete ${l}`,
+    onDelete: c,
+    onDeleteButtonBlur: i,
+    "data-testid": v(s, "tag"),
+    ml: "xs",
+    children: l
+  },
+  l
+)) : /* @__PURE__ */ y(
+  h,
   {
-    onDelete: e,
-    onDeleteButtonBlur: c,
-    "data-testid": v(u, "tag"),
+    onDelete: u,
+    onDeleteButtonBlur: i,
+    "data-testid": v(s, "tag"),
+    ml: "xs",
+    py: "none",
     children: [
-      String(p.length) || "0",
+      String(r.length) || "0",
       " ",
-      i
+      n
     ]
   }
-) : null, O = z(
+) : null, M = $(
   ({
-    defaultValue: u,
-    onBlur: d,
-    onChange: e,
-    onExistingTag: c,
-    onKeyDown: i,
-    onTagDelete: p,
-    onTagDeleteAll: l,
-    onTagDeleteButtonBlur: m,
-    selectedOptionsTagText: B = "selected",
-    tagLimit: V = 5,
-    value: q,
-    ...y
-  }, N) => {
-    const [S, I] = F(""), { value: s, setValue: f } = J({
+    className: s,
+    defaultValue: c,
+    name: u,
+    onBlur: i,
+    onChange: n,
+    onExistingTag: r,
+    onKeyDown: m,
+    onTagDelete: l,
+    onTagDeleteAll: w,
+    onTagDeleteButtonBlur: B,
+    selectedOptionsTagText: x = "selected",
+    style: k,
+    tagLimit: j = 5,
+    width: A = "100perc",
+    value: S,
+    ...f
+  }, E) => {
+    const [D, g] = b(""), { value: a, setValue: o } = G({
       component: "IressTagInput",
-      defaultValue: u,
-      value: q
-    }), j = G(
-      (t = "") => {
-        if (!t)
+      defaultValue: c,
+      value: S
+    }), K = J(), I = z(
+      (e = "") => {
+        if (!e)
           return;
-        if (s != null && s.includes(t)) {
-          c == null || c(t);
+        if (a?.includes(e)) {
+          r?.(e);
           return;
         }
-        const r = [...s ?? [], t];
-        e == null || e(a(r), r), f(r);
+        const t = [...a ?? [], e];
+        n?.(p(t), t), o(t);
       },
-      [e, c, f, s]
-    ), P = (t) => {
-      d == null || d(t), j(t.currentTarget.value), I("");
-    }, Q = (t) => {
-      if (i == null || i(t), t.key === "Backspace" && !S) {
-        const r = s == null ? void 0 : s.slice(0, -1);
-        e == null || e(a(r), r), f(r);
-      } else if (t.key === "Enter") {
-        const r = t.currentTarget;
-        r.value && (t.preventDefault(), j(r.value), I(""));
+      [n, r, o, a]
+    ), N = (e) => {
+      i?.(e), I(e.currentTarget.value), g("");
+    }, V = (e) => {
+      if (m?.(e), e.key === "Backspace" && !D) {
+        const t = a?.slice(0, -1);
+        n?.(p(t), t), o(t);
+      } else if (e.key === "Enter") {
+        const t = e.currentTarget;
+        t.value && (e.preventDefault(), I(t.value), g(""));
       }
-    }, R = (t, r) => {
-      r.stopPropagation(), p == null || p(t, r);
-      const k = s == null ? void 0 : s.filter((b) => b !== t);
-      e == null || e(a(k), k), f(k);
-    }, $ = (t, r) => {
-      r.stopPropagation(), l == null || l(t, r), e == null || e(a([]), []), f([]);
+    }, q = (e, t) => {
+      t.stopPropagation(), l?.(e, t);
+      const T = a?.filter((R) => R !== e);
+      n?.(p(T), T), o(T);
+    }, Q = (e, t) => {
+      t.stopPropagation(), w?.(e, t), n?.(p([]), []), o([]);
     };
-    return /* @__PURE__ */ o(
-      H,
-      {
-        ...y,
-        onBlur: P,
-        onChange: (t) => I(t.currentTarget.value),
-        onKeyDown: Q,
-        prepend: /* @__PURE__ */ o(
-          M,
-          {
-            "data-testid": y["data-testid"],
-            onTagDelete: R,
-            onTagDeleteAll: $,
-            onTagDeleteButtonBlur: m,
-            selectedOptionsTagText: B,
-            tags: s ?? [],
-            tagLimit: V
-          }
-        ),
-        ref: N,
-        value: S
-      }
-    );
+    return /* @__PURE__ */ y(H, { gap: "sm", className: s, style: k, children: [
+      /* @__PURE__ */ d(
+        F,
+        {
+          ...f,
+          className: K.input,
+          onBlur: N,
+          onChange: (e) => g(e.currentTarget.value),
+          onKeyDown: V,
+          prepend: /* @__PURE__ */ d(
+            L,
+            {
+              "data-testid": f["data-testid"],
+              onTagDelete: q,
+              onTagDeleteAll: Q,
+              onTagDeleteButtonBlur: B,
+              selectedOptionsTagText: x,
+              tags: a ?? [],
+              tagLimit: j
+            }
+          ),
+          ref: E,
+          width: A,
+          value: D
+        }
+      ),
+      u && /* @__PURE__ */ d(
+        "input",
+        {
+          type: "hidden",
+          value: (a ?? []).join(", "),
+          name: u,
+          "data-testid": v(
+            f["data-testid"],
+            "hidden-input"
+          )
+        }
+      )
+    ] });
   }
 );
-O.displayName = "IressTagInput";
+M.displayName = "IressTagInput";
 export {
-  O as IressTagInput
+  M as IressTagInput
 };

package/dist/components/Tag/TagInput/TagInput.styles.js

@@ -0,0 +1,26 @@
+import { s as t } from "../../../sva-OmxClA9g.js";
+const s = t({
+  slots: ["input", "tag"],
+  base: {
+    input: {
+      flexWrap: "wrap",
+      rowGap: "xs",
+      py: "xs",
+      "& > :first-child": {
+        display: "contents",
+        minHeight: "[0px]"
+      },
+      "& > input": {
+        width: "auto",
+        minHeight: "[calc({sizes.input.height} - {spacing.xs} * 2.5)]",
+        py: "none"
+      }
+    },
+    tag: {
+      marginLeft: "xs"
+    }
+  }
+});
+export {
+  s as tagInput
+};

package/dist/components/Text/Text.js

@@ -1,45 +1,25 @@
-import { jsx as m } from "react/jsx-runtime";
-import { s as r } from "../../factory-DHLOr79I.js";
+import { jsx as e } from "react/jsx-runtime";
+import { s as r } from "../../factory-oPXoMw9H.js";
 import { text as s } from "./Text.styles.js";
-import { useMemo as n } from "react";
-import { c as a } from "../../cx-DN21T1EH.js";
-import { GlobalCSSClass as c } from "../../enums.js";
-const T = [
-  "p",
-  "div",
-  "span",
-  "h1",
-  "h2",
-  "h3",
-  "h4",
-  "h5",
-  "h6",
-  "code",
-  "small",
-  "cite",
-  "caption",
-  "strong",
-  "em",
-  "a",
-  "blockquote",
-  "pre"
-], d = ({
-  className: t,
-  ...o
+import { useMemo as i } from "react";
+import { c as l } from "../../cx-DN21T1EH.js";
+import { GlobalCSSClass as n } from "../../enums.js";
+const d = ({
+  className: o,
+  ...m
 }) => {
-  const e = n(
-    () => r(o.element ?? "div", s),
-    [o.element]
+  const t = i(
+    () => r(m.element ?? "div", s),
+    [m.element]
   );
-  return /* @__PURE__ */ m(
-    e,
+  return /* @__PURE__ */ e(
+    t,
     {
-      ...o,
-      className: a(t, c.Text)
+      ...m,
+      className: l(o, n.Text)
     }
   );
 };
 export {
-  d as IressText,
-  T as TEXT_ELEMENTS
+  d as IressText
 };

package/dist/components/Text/Text.styles.js

@@ -1,5 +1,5 @@
-import { m as a, s as n } from "../../cva-B2x59Dph.js";
-import { c as s, m as i } from "../../create-recipe-BqEnhJ30.js";
+import { m as a, s as n } from "../../css-fGu_jDvv.js";
+import { c as s, m as i } from "../../create-recipe-C-ASk1Hy.js";
 const e = /* @__PURE__ */ s("text", {
   element: "div"
 }, [

package/dist/components/Text/index.js

@@ -1,7 +1,6 @@
 import { text as t } from "./Text.styles.js";
-import { IressText as x, TEXT_ELEMENTS as E } from "./Text.js";
+import { IressText as x } from "./Text.js";
 export {
   x as IressText,
-  E as TEXT_ELEMENTS,
   t as text
 };

package/dist/components/Toaster/Toaster.js

@@ -1,14 +1,62 @@
-import "react/jsx-runtime";
-import "react";
+import { jsx as r, jsxs as u, Fragment as x } from "react/jsx-runtime";
+import { useContext as b, useRef as v, useEffect as C, createElement as T } from "react";
 import "../Stack/Stack.styles.js";
-import "../Stack/Stack.js";
-import "../../floating-ui.react-CPN4oQCc.js";
-import "./Toaster.styles.js";
-import "../../cx-DN21T1EH.js";
-import "./components/Toast/ToastAnimated.js";
-import "../../factory-DHLOr79I.js";
-import "../../enums.js";
-import { a as b } from "../../ToasterProvider-XqpAGfRs.js";
+import { IressStack as g } from "../Stack/Stack.js";
+import { g as h } from "../../floating-ui.react-CmSaAiNF.js";
+import { toaster as A } from "./Toaster.styles.js";
+import { c as y } from "../../cx-DN21T1EH.js";
+import { ToastAnimated as E } from "./components/Toast/ToastAnimated.js";
+import { s as l } from "../../factory-oPXoMw9H.js";
+import { GlobalCSSClass as S } from "../../enums.js";
+import { ToasterContext as j } from "./hooks/useToaster.js";
+const k = {
+  "bottom-end": "end-x",
+  "bottom-start": "start-x",
+  "bottom-center": "end-y",
+  "top-end": "end-x",
+  "top-start": "start-x",
+  "top-center": "start-y"
+}, m = {
+  role: "alert",
+  "aria-relevant": "additions",
+  "aria-live": "assertive"
+}, q = ({
+  className: d,
+  container: t,
+  position: a = "bottom-end",
+  toasts: n = [],
+  ...f
+}) => {
+  const i = b(j), o = v(null), c = A({ position: a });
+  return C(() => {
+    if (!t)
+      return;
+    const e = t instanceof HTMLElement ? t : t.current;
+    Object.entries(m).forEach(([s, p]) => {
+      e?.setAttribute(s, String(p));
+    });
+  }, [t]), n.length ? /* @__PURE__ */ u(x, { children: [
+    !t && /* @__PURE__ */ r(l.div, { ref: o, ...m }),
+    /* @__PURE__ */ r(h, { root: t ?? o, children: /* @__PURE__ */ r(
+      g,
+      {
+        className: y(c.root, d, S.Toaster),
+        gap: "md",
+        ...f,
+        children: n.map((e) => /* @__PURE__ */ T(
+          E,
+          {
+            ...e,
+            animation: k[a],
+            key: e.id,
+            onClose: (s) => i?.remove(e.id, s),
+            onTimeout: () => i?.remove(e.id)
+          }
+        ))
+      }
+    ) })
+  ] }) : t ? null : /* @__PURE__ */ r(l.div, { ref: o, ...m });
+};
 export {
-  b as Toaster
+  q as Toaster
 };

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

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

package/dist/components/Toaster/ToasterProvider.js

@@ -1,8 +1,51 @@
-import "react/jsx-runtime";
-import "react";
-import { I as a, T as i } from "../../ToasterProvider-XqpAGfRs.js";
-import "./helpers/toasterRegister.js";
+import { jsxs as x, jsx as g } from "react/jsx-runtime";
+import { useState as C, useCallback as a, useMemo as h, useEffect as j } from "react";
+import { Toaster as v } from "./Toaster.js";
+import { registerToaster as w, unregisterToaster as I } from "./helpers/toasterRegister.js";
+import { ToasterContext as P } from "./hooks/useToaster.js";
+const S = ({
+  children: d,
+  id: s,
+  position: n,
+  ...p
+}) => {
+  const [T, m] = C([]), i = a(
+    (t, r) => {
+      m((e) => (e?.find((o) => o.id === t)?.onClose?.(r), e?.filter((o) => o.id !== t)));
+    },
+    []
+  ), f = a(
+    (t, r) => {
+      const e = r.id ?? `${(/* @__PURE__ */ new Date()).getTime()}`, c = n?.includes("top");
+      return m((o = []) => [
+        ...c ? [] : o,
+        { ...r, id: e, status: t },
+        ...c ? o : []
+      ]), e;
+    },
+    [n]
+  ), l = a((t) => {
+    m(
+      (r) => r?.map(
+        (e) => e.id === t ? { ...e, timeout: 100 } : e
+      )
+    );
+  }, []), u = h(
+    () => ({
+      close: l,
+      remove: i,
+      show: f
+    }),
+    [l, i, f]
+  );
+  return j(() => {
+    if (s)
+      return w(s, u), () => I(s);
+  }, [s, u]), /* @__PURE__ */ x(P.Provider, { value: u, children: [
+    d,
+    /* @__PURE__ */ g(v, { id: s, position: n, ...p, toasts: T })
+  ] });
+};
 export {
-  a as IressToasterProvider,
-  i as ToasterContext
+  S as IressToasterProvider
 };

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

@@ -1,86 +1,86 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import { propagateTestid as c } from "../../../../helpers/utility/propagateTestid.js";
-import "../../../../Button-BXzmntRi.js";
+import { jsx as o, jsxs as a } from "react/jsx-runtime";
+import { propagateTestid as i } from "../../../../helpers/utility/propagateTestid.js";
+import "../../../../Button-D6AL0bia.js";
 import { IressCloseButton as h } from "../../../Button/CloseButton/CloseButton.js";
 import "../../../Inline/Inline.styles.js";
 import { IressInline as y } from "../../../Inline/Inline.js";
 import { IressText as N } from "../../../Text/Text.js";
-import { forwardRef as T } from "react";
-import { c as b } from "../../../../cx-DN21T1EH.js";
-import { toast as g } from "./Toast.styles.js";
-import { s as v } from "../../../../factory-DHLOr79I.js";
-import { IressIcon as S } from "../../../Icon/Icon.js";
+import { forwardRef as b } from "react";
+import { c as g } from "../../../../cx-DN21T1EH.js";
+import { toast as v } from "./Toast.styles.js";
+import { s as C } from "../../../../factory-oPXoMw9H.js";
+import { IressIcon as I } from "../../../Icon/Icon.js";
 import "../../../Icon/Icon.styles.js";
-import { GlobalCSSClass as I } from "../../../../enums.js";
-const F = ["success", "error", "info"], A = {
+import { GlobalCSSClass as T } from "../../../../enums.js";
+const S = {
   error: "colour.system.danger.text",
   success: "colour.system.success.text",
   info: "colour.system.info.text"
-}, _ = {
+}, j = {
   error: "ban",
   success: "check",
   info: "info-square"
-}, j = T(
+}, k = b(
   ({
-    heading: t,
-    status: o,
-    actions: a,
-    children: n,
-    content: l,
-    dismissible: d = !0,
-    onClose: i,
+    heading: e,
+    status: t,
+    actions: c,
+    children: m,
+    content: n,
+    dismissible: l = !0,
+    onClose: d,
     "data-testid": s,
     className: p,
     ...f
-  }, u) => {
-    const e = g({ status: o });
-    return /* @__PURE__ */ r(
-      v.div,
+  }, x) => {
+    const r = v({ status: t });
+    return /* @__PURE__ */ o(
+      C.div,
       {
         ...f,
         "data-testid": s,
-        className: b(p, e.root, I.Toast),
+        className: g(p, r.root, T.Toast),
         tabIndex: -1,
-        ref: u,
-        children: /* @__PURE__ */ r("div", { className: e.panel, children: /* @__PURE__ */ m(y, { gap: "sm", verticalAlign: "top", noWrap: !0, children: [
-          /* @__PURE__ */ r(
-            S,
+        ref: x,
+        children: /* @__PURE__ */ o("div", { className: r.panel, children: /* @__PURE__ */ a(y, { gap: "sm", verticalAlign: "top", noWrap: !0, children: [
+          /* @__PURE__ */ o(
+            I,
             {
-              name: _[o],
-              screenreaderText: `${o}: `,
+              name: j[t],
+              screenreaderText: `${t}: `,
               textStyle: "typography.body.lg",
               fixedWidth: !0,
-              color: A[o]
+              color: S[t]
             }
           ),
-          /* @__PURE__ */ m(
+          /* @__PURE__ */ a(
             "div",
             {
-              className: e.wrapper,
-              "data-testid": c(s, "content"),
+              className: r.wrapper,
+              "data-testid": i(s, "content"),
               children: [
-                t && /* @__PURE__ */ r(
+                e && /* @__PURE__ */ o(
                   N,
                   {
-                    className: e.heading,
-                    "data-testid": c(s, "heading"),
-                    children: typeof t == "string" ? /* @__PURE__ */ r("h2", { children: t }) : t
+                    className: r.heading,
+                    "data-testid": i(s, "heading"),
+                    children: typeof e == "string" ? /* @__PURE__ */ o("h2", { children: e }) : e
                   }
                 ),
-                d && /* @__PURE__ */ r(
+                l && /* @__PURE__ */ o(
                   h,
                   {
-                    "data-testid": c(
+                    "data-testid": i(
                       s,
                       "close-button__button"
                     ),
-                    className: e.closeButton,
-                    onClick: (x) => i == null ? void 0 : i(x),
+                    className: r.closeButton,
+                    onClick: (u) => d?.(u),
                     screenreaderText: "Dismiss"
                   }
                 ),
-                /* @__PURE__ */ r("div", { className: e.content, children: l ?? n }),
-                a && /* @__PURE__ */ r("div", { className: e.footer, children: a })
+                /* @__PURE__ */ o("div", { className: r.content, children: n ?? m }),
+                c && /* @__PURE__ */ o("div", { className: r.footer, children: c })
               ]
             }
           )
@@ -89,8 +89,7 @@ const F = ["success", "error", "info"], A = {
     );
   }
 );
-j.displayName = "Toast";
+k.displayName = "Toast";
 export {
-  F as TOAST_STATUS,
-  j as Toast
+  k as Toast
 };

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

@@ -1,4 +1,4 @@
-import { s as o } from "../../../../sva-TRyehFkb.js";
+import { s as o } from "../../../../sva-OmxClA9g.js";
 const n = o({
   slots: [
     "root",