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

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

@@ -1,8 +1,125 @@
-import "react/jsx-runtime";
-import "react";
-import "../../../hooks/useControlledState.js";
-import { L as s } from "../../../LoadingSuspense-D0TO0TDT.js";
-import "../../../helpers/form/getValueAsEvent.js";
+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 "../../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 { 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,
+  {
+    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,
+  {
+    onDelete: e,
+    onDeleteButtonBlur: c,
+    "data-testid": v(u, "tag"),
+    children: [
+      String(p.length) || "0",
+      " ",
+      i
+    ]
+  }
+) : null, O = z(
+  ({
+    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({
+      component: "IressTagInput",
+      defaultValue: u,
+      value: q
+    }), j = G(
+      (t = "") => {
+        if (!t)
+          return;
+        if (s != null && s.includes(t)) {
+          c == null || c(t);
+          return;
+        }
+        const r = [...s ?? [], t];
+        e == null || e(a(r), r), f(r);
+      },
+      [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(""));
+      }
+    }, 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([]);
+    };
+    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
+      }
+    );
+  }
+);
+O.displayName = "IressTagInput";
 export {
-  s as IressTagInput
+  O as IressTagInput
 };

package/dist/components/Tag/index.js

@@ -1,5 +1,8 @@
-import { K as r, L as e } from "../../LoadingSuspense-D0TO0TDT.js";
+import { IressTag as e } from "./Tag.js";
+import { tag as p } from "./Tag.styles.js";
+import { IressTagInput as a } from "./TagInput/TagInput.js";
 export {
-  r as IressTag,
-  e as IressTagInput
+  e as IressTag,
+  a as IressTagInput,
+  p as tag
 };

package/dist/components/Text/Text.js

@@ -1,34 +1,45 @@
-import { jsx as x } from "react/jsx-runtime";
-import { c as d } from "../../index-2QXL0WYc.js";
-import { GlobalCSSClass as T, TextMode as c, TextElement as p, TextAlign as B, TextVariant as $ } from "../../enums.js";
-const e = ({
-  align: t,
-  children: a,
-  className: r,
-  "data-testid": i,
-  element: l = "div",
-  mode: s,
-  noGutter: n,
-  variant: o,
-  ...m
-}) => /* @__PURE__ */ x(
-  l,
-  {
-    ...m,
-    className: d(r, "iress-u-text", {
-      [`iress--${o}`]: !!o,
-      [`iress--${s}`]: !!s,
-      [`${T.TextAlignBase}--${t}`]: !!t,
-      "iress--no-gutter": n
-    }),
-    "data-testid": i,
-    children: a
-  }
-);
-e.Mode = c;
-e.Element = p;
-e.Align = B;
-e.Variant = $;
+import { jsx as m } from "react/jsx-runtime";
+import { s as r } from "../../factory-DHLOr79I.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
+}) => {
+  const e = n(
+    () => r(o.element ?? "div", s),
+    [o.element]
+  );
+  return /* @__PURE__ */ m(
+    e,
+    {
+      ...o,
+      className: a(t, c.Text)
+    }
+  );
+};
 export {
-  e as IressText
+  d as IressText,
+  T as TEXT_ELEMENTS
 };

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

@@ -0,0 +1,81 @@
+import { m as a, s as n } from "../../cva-B2x59Dph.js";
+import { c as s, m as i } from "../../create-recipe-BqEnhJ30.js";
+const e = /* @__PURE__ */ s("text", {
+  element: "div"
+}, [
+  {
+    element: [
+      "p",
+      "div",
+      "span"
+    ],
+    css: {
+      "& code": {
+        textStyle: "typography.code",
+        paddingBlock: "spacing.000",
+        paddingInline: "spacing.100",
+        background: "colour.neutral.20",
+        color: "colour.neutral.80",
+        borderWidth: "0.5px",
+        borderColor: "colour.neutral.30",
+        borderRadius: "radius.025",
+        alignSelf: "flex-start"
+      },
+      "& small": {
+        textStyle: "typography.body.sm"
+      },
+      "& cite": {
+        textStyle: "typography.body.sm"
+      },
+      "& caption:not(table[class] *)": {
+        textStyle: "typography.body.sm",
+        display: "block"
+      },
+      "& a:not([class])": {
+        color: "colour.primary.text",
+        textDecoration: "underline",
+        _hover: {
+          textDecoration: "none"
+        }
+      }
+    }
+  }
+]), r = {
+  element: [
+    "p",
+    "div",
+    "span",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "code",
+    "small",
+    "cite",
+    "caption",
+    "strong",
+    "em",
+    "a",
+    "blockquote",
+    "pre"
+  ]
+}, o = Object.keys(r), l = /* @__PURE__ */ Object.assign(a(e.recipeFn), {
+  __recipe__: !0,
+  __name__: "text",
+  __getCompoundVariantCss__: e.__getCompoundVariantCss__,
+  raw: (t) => t,
+  variantKeys: o,
+  variantMap: r,
+  merge(t) {
+    return i(this, t);
+  },
+  splitVariantProps(t) {
+    return n(t, o);
+  },
+  getVariantProps: e.getVariantProps
+});
+export {
+  l as text
+};

package/dist/components/Text/index.js

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

package/dist/components/Toaster/Toaster.js

@@ -1,11 +1,14 @@
 import "react/jsx-runtime";
 import "react";
-import "./Toaster.types.js";
-import "../../index-2QXL0WYc.js";
-import { a7 as f } from "../../LoadingSuspense-D0TO0TDT.js";
-import "../../enums.js";
+import "../Stack/Stack.styles.js";
 import "../Stack/Stack.js";
-import "../../floating-ui.react-nmA48tb2.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";
 export {
-  f as IressToaster
+  b as Toaster
 };

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

@@ -0,0 +1,66 @@
+import { s as t } from "../../sva-TRyehFkb.js";
+const n = t({
+  slots: ["root"],
+  base: {
+    root: {
+      display: "flex",
+      position: "fixed",
+      width: "[500px]",
+      maxWidth: "[100%]",
+      zIndex: "500",
+      padding: "spacing.700",
+      boxSizing: "border-box",
+      "&:empty": {
+        display: "none"
+      }
+    }
+  },
+  variants: {
+    position: {
+      "bottom-end": {
+        root: {
+          insetBlockEnd: "[0]",
+          insetInlineEnd: "[0]"
+        }
+      },
+      "bottom-start": {
+        root: {
+          insetBlockEnd: "[0]",
+          insetInlineStart: "[0]"
+        }
+      },
+      "bottom-center": {
+        root: {
+          insetBlockEnd: "[0]",
+          insetInlineStart: "[50%]",
+          transform: "translateX(-50%)"
+        }
+      },
+      "top-end": {
+        root: {
+          insetBlockStart: "[0]",
+          insetInlineEnd: "[0]"
+        }
+      },
+      "top-start": {
+        root: {
+          insetBlockStart: "[0]",
+          insetInlineStart: "[0]"
+        }
+      },
+      "top-center": {
+        root: {
+          insetBlockStart: "[0]",
+          insetInlineStart: "[50%]",
+          transform: "translateX(-50%)"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    position: "bottom-end"
+  }
+});
+export {
+  n as toaster
+};

package/dist/components/Toaster/ToasterProvider.js

@@ -1,7 +1,8 @@
 import "react/jsx-runtime";
 import "react";
-import { O as s, N as a } from "../../LoadingSuspense-D0TO0TDT.js";
+import { I as a, T as i } from "../../ToasterProvider-XqpAGfRs.js";
+import "./helpers/toasterRegister.js";
 export {
-  s as IressToasterProvider,
-  a as ToasterContext
+  a as IressToasterProvider,
+  i as ToasterContext
 };

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

@@ -0,0 +1,96 @@
+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 { 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 "../../../Icon/Icon.styles.js";
+import { GlobalCSSClass as I } from "../../../../enums.js";
+const F = ["success", "error", "info"], A = {
+  error: "colour.system.danger.text",
+  success: "colour.system.success.text",
+  info: "colour.system.info.text"
+}, _ = {
+  error: "ban",
+  success: "check",
+  info: "info-square"
+}, j = T(
+  ({
+    heading: t,
+    status: o,
+    actions: a,
+    children: n,
+    content: l,
+    dismissible: d = !0,
+    onClose: i,
+    "data-testid": s,
+    className: p,
+    ...f
+  }, u) => {
+    const e = g({ status: o });
+    return /* @__PURE__ */ r(
+      v.div,
+      {
+        ...f,
+        "data-testid": s,
+        className: b(p, e.root, I.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,
+            {
+              name: _[o],
+              screenreaderText: `${o}: `,
+              textStyle: "typography.body.lg",
+              fixedWidth: !0,
+              color: A[o]
+            }
+          ),
+          /* @__PURE__ */ m(
+            "div",
+            {
+              className: e.wrapper,
+              "data-testid": c(s, "content"),
+              children: [
+                t && /* @__PURE__ */ r(
+                  N,
+                  {
+                    className: e.heading,
+                    "data-testid": c(s, "heading"),
+                    children: typeof t == "string" ? /* @__PURE__ */ r("h2", { children: t }) : t
+                  }
+                ),
+                d && /* @__PURE__ */ r(
+                  h,
+                  {
+                    "data-testid": c(
+                      s,
+                      "close-button__button"
+                    ),
+                    className: e.closeButton,
+                    onClick: (x) => i == null ? void 0 : i(x),
+                    screenreaderText: "Dismiss"
+                  }
+                ),
+                /* @__PURE__ */ r("div", { className: e.content, children: l ?? n }),
+                a && /* @__PURE__ */ r("div", { className: e.footer, children: a })
+              ]
+            }
+          )
+        ] }) })
+      }
+    );
+  }
+);
+j.displayName = "Toast";
+export {
+  F as TOAST_STATUS,
+  j as Toast
+};