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

package/dist/components/Provider/Provider.js

@@ -1,38 +1,20 @@
-import { jsxs as d, jsx as s } from "react/jsx-runtime";
-import { O as c } from "../../LoadingSuspense-BtzikVZk.js";
-import { IressModalProvider as l } from "../Modal/ModalProvider.js";
+import "react/jsx-runtime";
+import "../Modal/Modal.styles.js";
 import "react";
-import { a as p } from "../../SlideoutProvider-CQh140HM.js";
-import { createPortal as n } from "react-dom";
-const x = ({
-  children: e,
-  container: r,
-  injectPushStyles: o,
-  noIcons: i,
-  position: m,
-  ...t
-}) => /* @__PURE__ */ d(l, { container: r, children: [
-  /* @__PURE__ */ s(c, { container: r, position: m, children: /* @__PURE__ */ s(
-    p,
-    {
-      container: r,
-      injectPushStyles: o,
-      ...t,
-      children: e
-    }
-  ) }),
-  !i && n(
-    /* @__PURE__ */ s(
-      "link",
-      {
-        rel: "stylesheet",
-        href: "https://cdn.iress.com/icons/5.15.4/css/combined.min.css"
-      }
-    ),
-    document.head,
-    "design-system-icons"
-  )
-] });
+import "../../Button-D6AL0bia.js";
+import "../Button/CloseButton/CloseButton.js";
+import "../Modal/hooks/useModal.js";
+import "../Modal/ModalProvider.js";
+import "../Toaster/ToasterProvider.js";
+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 "../Slideout/hooks/useSlideout.js";
+import "../Slideout/SlideoutProvider.js";
+import "react-dom";
+import { I as h } from "../../Provider-BXQiO7Gp.js";
 export {
-  x as IressProvider
+  h as IressProvider
 };

package/dist/components/Provider/index.js

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

package/dist/components/Radio/Radio.js

@@ -1,11 +1,113 @@
-import "react/jsx-runtime";
-import "../../index-cbHCAGLB.js";
-import { u as d } from "../../LoadingSuspense-BtzikVZk.js";
-import "react";
-import "../../hooks/useIdIfNeeded.js";
-import "../../helpers/utility/propagateTestid.js";
-import "../RadioGroup/RadioGroupContext.js";
-import "../../helpers/form/getFormControlValueAsString.js";
+import { jsx as e, jsxs as f } from "react/jsx-runtime";
+import { forwardRef as A, useContext as B } from "react";
+import { useControlledState as E } from "../../hooks/useControlledState.js";
+import { useIdIfNeeded as H } from "../../hooks/useIdIfNeeded.js";
+import { propagateTestid as m } from "../../helpers/utility/propagateTestid.js";
+import { IressReadonly as P } from "../Readonly/Readonly.js";
+import "../Readonly/Readonly.styles.js";
+import { getFormControlValueAsString as z } from "../../helpers/form/getFormControlValueAsString.js";
+import { c as k } from "../../css-fGu_jDvv.js";
+import { c as D } from "../../cx-DN21T1EH.js";
+import { radio as J } from "./Radio.styles.js";
+import { GlobalCSSClass as l } from "../../enums.js";
+import { IressCheckboxMark as K } from "../CheckboxMark/CheckboxMark.js";
+import "../CheckboxMark/CheckboxMark.styles.js";
+import { getRadioGroupContext as L } from "../RadioGroup/RadioGroup.js";
+import "../RadioGroup/RadioGroup.styles.js";
+import { s as p } from "../../factory-oPXoMw9H.js";
+import { s as Q } from "../../is-valid-prop-Ce0wiweq.js";
+import { IressText as T } from "../Text/Text.js";
+const U = ({
+  checked: C,
+  children: h,
+  className: x,
+  "data-testid": i,
+  defaultChecked: g,
+  hiddenControl: y,
+  name: R,
+  onChange: w,
+  readOnly: v,
+  required: b,
+  value: r,
+  touch: M,
+  ...a
+}, N) => {
+  const u = H(a), o = B(L()), { value: S, setValue: G } = E({
+    component: "Radio",
+    defaultValue: !!g,
+    value: C,
+    propName: "checked"
+  }), n = !!o?.onChange, s = n ? o.value === r : S;
+  if (n ? o.readOnly : v)
+    return s ? /* @__PURE__ */ e(
+      P,
+      {
+        ...a,
+        width: void 0,
+        value: z(r),
+        children: h
+      }
+    ) : null;
+  const I = o?.name ?? R, d = o?.hiddenRadio ?? y, O = o?.required ?? b, q = o?.touch ?? M, t = J.raw({
+    hiddenControl: d,
+    touch: q,
+    checked: s
+  }), F = () => /* @__PURE__ */ e(
+    p.svg,
+    {
+      version: "1.1",
+      viewBox: "0 0 200 200",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...t.radioMark,
+      className: l.FormElement,
+      children: /* @__PURE__ */ e("circle", { cx: "100", cy: "100", r: "70" })
+    }
+  ), [V, j] = Q(a);
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      "data-testid": i,
+      className: D(
+        x,
+        k(t.root, V),
+        l.Group,
+        l.Radio
+      ),
+      children: [
+        /* @__PURE__ */ e(
+          p.input,
+          {
+            ...j,
+            ...t.input,
+            type: "radio",
+            id: u,
+            name: I,
+            ref: N,
+            "data-testid": m(i, "input"),
+            onChange: (c) => {
+              n || G(c.target.checked), w?.(c, r), o?.onChange?.(c, r);
+            },
+            value: String(r),
+            checked: s,
+            required: O
+          }
+        ),
+        /* @__PURE__ */ f(p.label, { htmlFor: u, ...t.label, children: [
+          !d && /* @__PURE__ */ e(F, { "data-testid": m(i, "radioMark") }),
+          d && /* @__PURE__ */ e(
+            K,
+            {
+              className: k(t.checkboxMark),
+              checked: s,
+              "data-testid": m(i, "checkboxMark")
+            }
+          ),
+          /* @__PURE__ */ e(T, { element: "span", children: h })
+        ] })
+      ]
+    }
+  );
+}, fo = A(U);
 export {
-  d as IressRadio
+  fo as IressRadio
 };

package/dist/components/Radio/Radio.styles.js

@@ -0,0 +1,201 @@
+import { s as r } from "../../sva-OmxClA9g.js";
+const e = r({
+  slots: [
+    "root",
+    "input",
+    "label",
+    "radioMark",
+    "checkedRadioMark",
+    "checkboxMark"
+  ],
+  base: {
+    root: {
+      color: "colour.primary.fill",
+      display: "flex",
+      position: "relative",
+      padding: "spacing.000",
+      transition: "[all 0.2s ease-out]",
+      "&:has(svg:hover)": {
+        color: "colour.primary.fillHover"
+      }
+    },
+    input: {
+      border: "[0px]",
+      clip: "rect(0, 0, 0, 0)",
+      height: "[1px]",
+      margin: "[-1px]",
+      overflow: "hidden",
+      padding: "spacing.000",
+      position: "absolute",
+      width: "[1px]"
+    },
+    label: {
+      display: "inline-flex",
+      alignItems: "center",
+      padding: "spacing.000",
+      border: "[0px solid transparent]",
+      borderRadius: "radius.system.form",
+      backgroundColor: "[transparent]",
+      position: "relative",
+      lineHeight: "1.5",
+      margin: "[0px]",
+      cursor: "pointer"
+    },
+    radioMark: {
+      boxSizing: "border-box",
+      position: "relative",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: "colour.neutral.70",
+      backgroundColor: "colour.neutral.10",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "[calc(1.3 * 1rem)]",
+      height: "[calc(1.3 * 1rem)]",
+      borderRadius: "[100%]",
+      marginInlineEnd: "spacing.150",
+      flexShrink: 0,
+      color: "[currentColor]",
+      "& circle": {
+        fill: "[currentColor]",
+        display: "none"
+      },
+      _groupFocusWithin: {
+        layerStyle: "elevation.focus"
+      }
+    },
+    checkboxMark: {
+      checkmark: !1
+    }
+  },
+  variants: {
+    hiddenControl: {
+      true: {
+        label: {
+          display: "block",
+          borderWidth: "1px",
+          borderStyle: "solid",
+          borderColor: "colour.neutral.40",
+          cursor: "pointer",
+          _hover: {
+            backgroundColor: "colour.primary.surfaceHover"
+          }
+        },
+        radioMark: {
+          display: "none"
+        }
+      }
+    },
+    touch: {
+      true: {
+        label: {
+          borderWidth: "1px",
+          borderStyle: "solid",
+          borderColor: "colour.neutral.40",
+          borderRadius: "radius.050",
+          padding: "spacing.400"
+        }
+      }
+    },
+    checked: {
+      true: {
+        label: {
+          borderColor: "[currentColor]"
+        },
+        radioMark: {
+          borderColor: "[currentColor]",
+          "& circle": {
+            fill: "[currentColor]",
+            display: "block"
+          }
+        }
+      },
+      false: {
+        radioMark: {
+          _hover: {
+            backgroundColor: "colour.primary.surfaceHover"
+          }
+        }
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      hiddenControl: !0,
+      css: {
+        input: {
+          _checked: {
+            "& + label": {
+              border: "[none]",
+              padding: "[1px]",
+              _after: {
+                content: '""',
+                position: "absolute",
+                inset: "[0]",
+                display: "block",
+                borderWidth: "1px",
+                borderStyle: "solid",
+                borderColor: "colour.primary.fill",
+                borderRadius: "[inherit]",
+                pointerEvents: "none"
+              }
+            }
+          },
+          _focus: {
+            "& + label": {
+              _after: {
+                content: '""',
+                position: "absolute",
+                inset: "[0]",
+                display: "block",
+                borderRadius: "[inherit]",
+                pointerEvents: "none",
+                layerStyle: "elevation.focus"
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      hiddenControl: !1,
+      css: {
+        input: {
+          _checked: {
+            "& ~ div svg circle": {
+              display: "revert"
+            }
+          }
+        }
+      }
+    },
+    {
+      touch: !0,
+      css: {
+        input: {
+          _checked: {
+            "& + label": {
+              borderColor: "colour.primary.fill"
+            }
+          }
+        }
+      }
+    },
+    {
+      hiddenControl: !0,
+      checked: !0,
+      css: {
+        label: {
+          topLeftTriangle: !0
+        },
+        checkboxMark: {
+          checkmark: !0
+        }
+      }
+    }
+  ]
+});
+export {
+  e as radio
+};

package/dist/components/Radio/index.js

@@ -1,4 +1,6 @@
-import { u as s } from "../../LoadingSuspense-BtzikVZk.js";
+import { IressRadio as e } from "./Radio.js";
+import { radio as d } from "./Radio.styles.js";
 export {
-  s as IressRadio
+  e as IressRadio,
+  d as radio
 };

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,98 +1,87 @@
-import { jsx as R } from "react/jsx-runtime";
-import { c as B } from "../../index-cbHCAGLB.js";
-import { RadioGroupLayout as C } from "./RadioGroup.types.js";
-import { forwardRef as L, useRef as S, useMemo as W, useImperativeHandle as j } from "react";
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as B, createContext as N, useRef as T, useMemo as j, useImperativeHandle as k } from "react";
 import { useControlledState as D } from "../../hooks/useControlledState.js";
-import { RadioGroupContext as E } from "./RadioGroupContext.js";
-import { useNoDefaultValueInForms as H } from "../Form/hooks/useNoDefaultValueInForms.js";
-const M = "ids-radio-group-v5202", P = "ids-radio-group--stack-v5202", z = "ids-radio-group--block-v5202", A = "ids-radio-group--inline-v5202", J = "ids-radio-group--inline-flex-v5202", K = "ids-radio-group--inline-equal-width-v5202", g = {
-  radioGroup: M,
-  stack: P,
-  "ids-radio": "ids-radio-v5202",
-  block: z,
-  "ids-radio--label": "ids-radio--label-v5202",
-  inline: A,
-  inlineFlex: J,
-  inlineEqualWidth: K
-};
-function O(r, i, t) {
-  return r && i && r.contains(i) ? !1 : i ? !0 : t === r;
+import { radioGroup as E } from "./RadioGroup.styles.js";
+import { c as H } from "../../cx-DN21T1EH.js";
+import { s as M } from "../../factory-oPXoMw9H.js";
+import { GlobalCSSClass as P } from "../../enums.js";
+import { useNoDefaultValueInForms as h } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
+function w() {
+  return N(void 0);
+}
+function z() {
+  return A;
 }
-const G = L(
-  ({
-    children: r,
-    className: i,
-    hiddenRadio: t,
-    layout: u = "stack",
-    name: a,
-    onChange: l,
-    onFocus: b,
-    onBlur: k,
-    required: d,
-    role: x = "radiogroup",
-    defaultValue: c,
-    readonly: p,
-    value: I,
-    touch: f,
-    ...h
-  }, F) => {
-    H({
-      component: "IressRadioGroup",
-      defaultValue: c
-    });
-    const s = S(null), e = s.current, { value: m, setValue: n } = D({
-      component: "IressRadioGroup",
-      defaultValue: c,
-      value: I
-    }), N = W(
-      () => ({
-        name: a,
-        value: m,
-        hiddenRadio: t,
-        required: d,
-        readonly: p,
-        touch: f,
-        onChange: (o, v) => {
-          n(v), l?.(o, v);
-        }
-      }),
-      [a, m, t, d, p, n, l, f]
-    );
-    j(F, () => ({
-      // React hook form requires the focus, blur, input
-      focus: () => e?.focus(),
-      blur: () => e?.blur(),
-      input: e,
-      reset: () => n(void 0)
-    }));
-    const q = (o) => {
-      b?.(o), o.target === s.current && s.current.querySelector("input")?.focus();
-    }, y = (o) => {
-      O(
-        s.current,
-        o.relatedTarget,
-        o.target
-      ) && k?.(o);
-    };
-    return /* @__PURE__ */ R(E.Provider, { value: N, children: /* @__PURE__ */ R(
-      "div",
-      {
-        ...h,
-        ref: s,
-        role: x,
-        className: B(i, g.radioGroup, {
-          [g[u]]: !!u
-        }),
-        onFocus: q,
-        onBlur: y,
-        children: r
+const A = w(), J = ({
+  children: d,
+  className: v,
+  hiddenRadio: t,
+  layout: G = "stack",
+  name: n,
+  onBlur: R,
+  onChange: s,
+  onFocus: x,
+  required: c,
+  role: C = "radiogroup",
+  defaultValue: a,
+  readOnly: i,
+  value: S,
+  touch: l,
+  ...g
+}, I) => {
+  h({
+    component: "IressRadioGroup",
+    defaultValue: a
+  });
+  const r = T(null), e = r.current, { value: p, setValue: u } = D({
+    component: "IressRadioGroup",
+    defaultValue: a,
+    value: S
+  }), b = j(
+    () => ({
+      name: n,
+      value: p,
+      hiddenRadio: t,
+      required: c,
+      readOnly: i,
+      touch: l,
+      onChange: (o, m) => {
+        u(m), s?.(o, m);
       }
-    ) });
-  }
-);
-G.displayName = "IressRadioGroup";
-G.Layout = C;
+    }),
+    [n, p, t, c, i, u, s, l]
+  );
+  k(I, () => ({
+    // React hook form requires the focus, blur, input
+    focus: () => e?.querySelector("input")?.focus(),
+    blur: () => e?.querySelector("input")?.blur(),
+    input: e,
+    reset: () => u(void 0)
+  }));
+  const y = (o) => {
+    x?.(o), o.target === r.current && r.current.querySelector("input")?.focus();
+  }, F = (o) => {
+    o.relatedTarget && !r.current?.contains(o.relatedTarget) && R?.(o);
+  }, { Provider: q } = z();
+  return /* @__PURE__ */ f(q, { value: b, children: /* @__PURE__ */ f(
+    M.div,
+    {
+      ...g,
+      ref: r,
+      role: C,
+      className: H(
+        v,
+        E({ layout: G, hiddenRadio: t }),
+        P.RadioGroup
+      ),
+      onBlur: F,
+      onFocus: y,
+      children: d
+    }
+  ) });
+}, Z = B(J);
 export {
-  G as IressRadioGroup,
-  O as shouldFireRadioGroupBlur
+  Z as IressRadioGroup,
+  A as RadioGroupContext,
+  z as getRadioGroupContext
 };

package/dist/components/RadioGroup/RadioGroup.styles.js

@@ -0,0 +1,60 @@
+import { c as a } from "../../cva-JiDXAa83.js";
+const i = a({
+  base: {},
+  variants: {
+    layout: {
+      stack: {
+        display: "inline-flex",
+        flexFlow: "column wrap",
+        rowGap: "spacing.200",
+        "& > *": {
+          flexBasis: "[0]"
+        }
+      },
+      block: {
+        display: "flex",
+        flexFlow: "column wrap",
+        rowGap: "spacing.200",
+        "& label": {
+          flexBasis: "[100%]"
+        }
+      },
+      inline: {
+        display: "flex",
+        flexFlow: "row wrap",
+        width: "[100%]",
+        gap: "spacing.200",
+        "& label": {
+          flexBasis: "[auto]",
+          flexGrow: "[0]"
+        }
+      },
+      inlineFlex: {
+        display: "inline-flex",
+        gap: "spacing.200"
+      },
+      inlineEqualWidth: {
+        display: "flex",
+        width: "[100%]",
+        "& > *": {
+          flex: "[1 1 auto]"
+        }
+      }
+    },
+    hiddenRadio: {
+      true: {
+        "& label": {
+          _hover: {
+            backgroundColor: "colour.primary.surfaceHover"
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    layout: "stack"
+  }
+});
+export {
+  i as radioGroup
+};

package/dist/components/RadioGroup/index.js

@@ -1,8 +1,8 @@
-import { RADIO_GROUP_LAYOUTS as u, RadioGroupLayout as p } from "./RadioGroup.types.js";
-import { IressRadioGroup as a, shouldFireRadioGroupBlur as d } from "./RadioGroup.js";
+import { IressRadioGroup as t, RadioGroupContext as e, getRadioGroupContext as p } from "./RadioGroup.js";
+import { radioGroup as d } from "./RadioGroup.styles.js";
 export {
-  a as IressRadioGroup,
-  u as RADIO_GROUP_LAYOUTS,
-  p as RadioGroupLayout,
-  d as shouldFireRadioGroupBlur
+  t as IressRadioGroup,
+  e as RadioGroupContext,
+  p as getRadioGroupContext,
+  d as radioGroup
 };