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

package/dist/components/Expander/Expander.js

@@ -1,80 +1,66 @@
-import { jsxs as k, jsx as t } from "react/jsx-runtime";
-import { c } from "../../index-2QXL0WYc.js";
-import { useState as h, useEffect as _ } from "react";
-import { propagateTestid as d } from "../../helpers/utility/propagateTestid.js";
-import { ExpanderMode as E } from "./Expander.types.js";
-import { useIdIfNeeded as b } from "../../hooks/useIdIfNeeded.js";
-const j = "ids-expander--link-v5160", y = "ids-expander--heading-v5160", M = "ids-expander--activator-v5160", O = "ids-expander--section-v5160", $ = "ids-expander-v5160", A = "ids-expander--container-v5160", S = "ids-expander--open-v5160", T = "ids-expander--container-inner-v5160", g = "ids-expander--content-v5160", e = {
-  link: j,
-  heading: y,
-  activator: M,
-  section: O,
-  expander: $,
-  container: A,
-  open: S,
-  containerInner: T,
-  content: g
-}, q = ({
-  activator: p,
+import { jsxs as E, jsx as d } from "react/jsx-runtime";
+import { useState as j, useEffect as k } from "react";
+import { propagateTestid as m } from "../../helpers/utility/propagateTestid.js";
+import { useIdIfNeeded as O } from "../../hooks/useIdIfNeeded.js";
+import { expander as T } from "./Expander.styles.js";
+import { c } from "../../cx-DN21T1EH.js";
+import { IressText as p } from "../Text/Text.js";
+import { s as $ } from "../../factory-DHLOr79I.js";
+import { GlobalCSSClass as h } from "../../enums.js";
+const H = ({
+  activator: f,
+  activatorStyle: s,
   children: l,
-  className: m,
-  "data-testid": a,
-  onChange: s,
-  id: v,
-  mode: x = "section",
-  open: i = !1,
-  ...f
+  className: x,
+  "data-testid": o,
+  onChange: i,
+  id: N,
+  mode: u = "section",
+  noGutter: I,
+  open: n = !1,
+  ..._
 }) => {
-  const [n, r] = h(i), o = b({ id: v }), N = c(
-    m,
-    e.expander,
-    e[x],
-    {
-      [e.open]: n
-    }
-  ), I = c(e.container, {
-    [e.open]: n
-  });
-  _(() => {
-    r(i);
-  }, [i]);
-  const u = () => {
-    r(!n), s == null || s({ open: !n });
+  const [r, t] = j(n), a = O({ id: N }), e = T({ mode: u, open: r });
+  k(() => {
+    t(n);
+  }, [n]);
+  const b = () => {
+    t(!r), i == null || i(!r);
   };
-  return /* @__PURE__ */ k(
-    "div",
+  return /* @__PURE__ */ E(
+    p,
     {
-      className: N,
-      ...f,
-      "data-testid": a,
-      id: o,
+      className: c(x, e.root, h.Expander),
+      ..._,
+      "data-testid": o,
+      id: a,
       children: [
-        /* @__PURE__ */ t(
-          "button",
+        /* @__PURE__ */ d(
+          $.button,
           {
-            className: e.activator,
-            "aria-expanded": n,
-            "aria-controls": `${o}__container`,
-            onClick: u,
+            ...s,
+            "aria-expanded": r,
+            "aria-controls": `${a}__container`,
+            className: c(s == null ? void 0 : s.className, e.activator),
+            "data-testid": (s == null ? void 0 : s["data-testid"]) ?? m(o, "activator"),
+            onClick: b,
             type: "button",
-            "data-testid": d(a, "activator"),
-            children: p
+            children: f
           }
         ),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ d(
           "div",
           {
-            id: `${o}__container`,
-            className: I,
-            "data-testid": d(a, "container"),
-            children: /* @__PURE__ */ t("div", { className: e.containerInner, children: /* @__PURE__ */ t("div", { className: e.content, children: l }) })
+            id: `${a}__container`,
+            className: e.container,
+            "data-testid": m(o, "container"),
+            children: /* @__PURE__ */ d("div", { className: e.containerInner, children: /* @__PURE__ */ d(p, { className: e.content, noGutter: I, children: l }) })
           }
         )
       ]
     }
   );
 };
-q.Mode = E;
 export {
-  q as IressExpander
+  H as IressExpander
 };

package/dist/components/Expander/Expander.styles.js

@@ -0,0 +1,99 @@
+import { s as e } from "../../sva-TRyehFkb.js";
+const o = e({
+  slots: ["root", "activator", "content", "container", "containerInner"],
+  base: {
+    root: {
+      display: "block"
+    },
+    activator: {
+      display: "inline-block",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "auto",
+      backgroundColor: "transparent",
+      cursor: "pointer",
+      tableChevron: !0,
+      position: "relative",
+      _before: {
+        content: '""',
+        position: "absolute",
+        top: "[-1.5px]",
+        left: "[-1.5px]",
+        right: "[-1.5px]",
+        bottom: "[-1.5px]",
+        pointerEvents: "none",
+        zIndex: "[-1]",
+        borderRadius: "radius.system.badge"
+      },
+      _focusVisible: {
+        outline: "[none]",
+        _before: {
+          layerStyle: "elevation.focus"
+        }
+      }
+    },
+    container: {
+      display: "grid",
+      gridTemplateRows: "0fr",
+      transition: "[grid-template-rows 0.3s ease-in-out]"
+    },
+    containerInner: {
+      overflow: "hidden"
+    },
+    content: {
+      py: "spacing.200"
+    }
+  },
+  variants: {
+    mode: {
+      section: {
+        activator: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "flex-end",
+          width: "[100%]",
+          textStyle: "typography.heading.4",
+          py: "spacing.300",
+          borderBottom: "divider",
+          transition: "[all 0.2s ease-in-out]",
+          _after: {
+            mr: "spacing.200"
+          },
+          _hover: {
+            color: "colour.primary.text",
+            borderBottom: "hover"
+          }
+        }
+      },
+      link: {
+        activator: {
+          color: "colour.primary.text",
+          textDecoration: "underline",
+          _before: {
+            borderRadius: "radius.system.badge"
+          },
+          _hover: {
+            textDecoration: "none"
+          }
+        }
+      }
+    },
+    open: {
+      true: {
+        activator: {
+          tableChevron: !1
+        },
+        container: {
+          gridTemplateRows: "1fr"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    mode: "section",
+    open: !1
+  }
+});
+export {
+  o as expander
+};

package/dist/components/Expander/index.js

@@ -1,7 +1,6 @@
-import { EXPANDER_MODES as o, ExpanderMode as E } from "./Expander.types.js";
-import { IressExpander as x } from "./Expander.js";
+import { IressExpander as o } from "./Expander.js";
+import { expander as x } from "./Expander.styles.js";
 export {
-  o as EXPANDER_MODES,
-  E as ExpanderMode,
-  x as IressExpander
+  o as IressExpander,
+  x as expander
 };

package/dist/components/Field/Field.js

@@ -1,71 +1,102 @@
-import { jsx as c, jsxs as y } from "react/jsx-runtime";
-import { c as A } from "../../index-2QXL0WYc.js";
-import { F as E, s as p } from "../../FieldAppendToLabel-CMgTenh1.js";
-import { useMemo as o, isValidElement as q } from "react";
-import { IressLabel as V } from "../Label/Label.js";
-import { propagateTestid as k } from "../../helpers/utility/propagateTestid.js";
-import { toArray as w } from "../../helpers/formatting/toArray.js";
-const K = ({
-  children: d,
-  className: a,
-  "data-testid": m,
-  error: l,
-  errorMessages: t,
-  hiddenLabel: i,
-  hint: f,
-  htmlFor: u,
-  label: F,
-  optional: v,
-  required: x,
-  readOnly: N,
-  ...b
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import { isValidElement as q } from "react";
+import { IressLabel as w } from "../Label/Label.js";
+import "../Label/Label.styles.js";
+import { propagateTestid as y } from "../../helpers/utility/propagateTestid.js";
+import { toArray as A } from "../../helpers/formatting/toArray.js";
+import { s as d } from "../../factory-DHLOr79I.js";
+import { s as G } from "../../is-valid-prop-DFFvE05x.js";
+import { field as V } from "./Field.styles.js";
+import { c as r } from "../../cva-B2x59Dph.js";
+import { c as $ } from "../../cx-DN21T1EH.js";
+import { FieldFooter as h } from "./components/FieldFooter.js";
+import { FieldHintIcon as k, FieldHint as B } from "./components/FieldHint.js";
+import { GlobalCSSClass as D } from "../../enums.js";
+const g = ({
+  children: s,
+  className: N,
+  "data-testid": l,
+  error: f,
+  errorMessages: i,
+  hiddenLabel: a,
+  hint: m,
+  horizontal: e,
+  label: v,
+  labelWidth: n,
+  required: b,
+  readOnly: x,
+  removeErrorMargin: H,
+  supplementary: P,
+  ...c
 }) => {
-  const h = o(
-    () => !!l || (t == null ? void 0 : t.length),
-    [l, t == null ? void 0 : t.length]
-  ), j = o(
-    () => !f && !l && !(t != null && t.length) ? null : /* @__PURE__ */ c(
-      E,
+  const { htmlFor: F } = c;
+  let p;
+  F === void 0 && q(s) ? p = A(s)[0].props.id : p = F;
+  const t = V.raw({
+    hasError: !!f || !!(i != null && i.length),
+    hiddenLabel: a,
+    horizontal: e,
+    multipleFields: !1,
+    // Add this as needed
+    removeErrorMargin: H
+  }), [S, j] = G(c), E = () => {
+    const C = /* @__PURE__ */ u(
+      w,
       {
-        hint: f,
-        error: l,
-        errorMessages: t,
-        hiddenLabel: i,
-        "data-parent-testid": m
+        className: r(t.label),
+        "data-testid": y(l, "label"),
+        hiddenLabel: a,
+        htmlFor: p,
+        required: x ? !1 : !!b,
+        children: [
+          v,
+          e && m && /* @__PURE__ */ o(k, { hint: m })
+        ]
       }
-    ),
-    [m, l, t, i, f]
-  );
-  let n = u;
-  return n === void 0 && q(d) && (n = w(d)[0].props.id), /* @__PURE__ */ y(
-    "div",
+    );
+    return m ? /* @__PURE__ */ o(
+      B,
+      {
+        hint: m,
+        horizontal: e,
+        hiddenLabel: a,
+        dataTestId: l,
+        children: C
+      }
+    ) : C;
+  };
+  return /* @__PURE__ */ u(
+    d.div,
     {
-      className: A(a, {
-        [p.field]: !0,
-        [p.invalid]: h,
-        [p.hiddenLabel]: i === !0
-      }),
-      "data-testid": m,
-      ...b,
+      className: $(
+        N,
+        r(t.root, S),
+        D.Field
+      ),
+      style: {
+        ...e && n && {
+          gridTemplateColumns: `${n} 1fr`
+        }
+      },
+      "data-testid": l,
+      ...j,
       children: [
-        /* @__PURE__ */ c(
-          V,
+        /* @__PURE__ */ o(d.div, { className: r(t.labelContainer), children: E() }),
+        /* @__PURE__ */ o(d.div, { className: r(t.fieldContainer), children: /* @__PURE__ */ o("div", { className: r(t.element), children: s }) }),
+        /* @__PURE__ */ o(
+          h,
           {
-            append: j,
-            className: p.label,
-            "data-testid": k(m, "label"),
-            hiddenLabel: i,
-            htmlFor: n,
-            optional: v,
-            required: N ? !1 : !!x,
-            children: F
+            className: r(t.footer),
+            "data-testid": y(l, "error"),
+            error: f,
+            errorMessages: i,
+            supplementary: P
           }
-        ),
-        d
+        )
       ]
     }
   );
 };
 export {
-  K as IressField
+  g as IressField
 };

package/dist/components/Field/Field.styles.js

@@ -0,0 +1,124 @@
+import { s as e } from "../../sva-TRyehFkb.js";
+const o = e({
+  slots: [
+    "root",
+    "hint",
+    "label",
+    "footer",
+    "supplementary",
+    "element",
+    "labelContainer",
+    "fieldContainer"
+  ],
+  base: {
+    root: {
+      display: "block",
+      maxWidth: "[100%]",
+      position: "relative"
+    },
+    element: {
+      position: "relative",
+      zIndex: "[1]"
+    },
+    hint: {
+      color: "colour.neutral.70",
+      textStyle: "typography.body.sm"
+    },
+    footer: {
+      textStyle: "typography.body.sm.regular",
+      mt: "spacing.100"
+    },
+    supplementary: {
+      fontSize: "inherit"
+    },
+    label: {
+      mb: "spacing.100"
+    },
+    labelContainer: {},
+    fieldContainer: {}
+  },
+  variants: {
+    horizontal: {
+      true: {
+        root: {
+          display: "grid",
+          gridTemplateColumns: "auto 1fr",
+          gridTemplateRows: "auto auto",
+          gridTemplateAreas: '"label field" ". footer"',
+          columnGap: "spacing.200",
+          alignItems: "center"
+        },
+        labelContainer: {
+          gridArea: "label",
+          alignSelf: "center"
+        },
+        fieldContainer: {
+          gridArea: "field"
+        },
+        footer: {
+          gridArea: "footer",
+          mt: "spacing.100"
+        },
+        label: {
+          mb: "none"
+        }
+      }
+    },
+    hasError: {
+      true: {
+        root: {
+          _nestedFormElements: {
+            borderColor: "colour.system.danger.fill"
+          }
+        }
+      }
+    },
+    hiddenLabel: {
+      true: {
+        label: {
+          mb: "none"
+        }
+      }
+    },
+    multipleFields: {
+      true: {
+        supplementary: {
+          position: "relative",
+          _after: {
+            content: '""',
+            position: "absolute",
+            left: "[0]",
+            right: "[0]",
+            bottom: "[100%]",
+            borderBottom: "divider"
+          }
+        }
+      }
+    },
+    removeErrorMargin: {
+      true: {
+        root: {
+          mb: "none"
+        },
+        footer: {
+          position: "static"
+        }
+      },
+      false: {
+        root: {
+          mb: "field.footer"
+        },
+        footer: {
+          position: "absolute",
+          left: "spacing.000",
+          right: "spacing.000",
+          top: "[100%]",
+          mt: "spacing.100"
+        }
+      }
+    }
+  }
+});
+export {
+  o as field
+};

package/dist/components/Field/FieldGroup/FieldGroup.js

@@ -1,77 +1,80 @@
-import { jsx as o, jsxs as N } from "react/jsx-runtime";
-import { c as x } from "../../../index-2QXL0WYc.js";
-import { useMemo as f } from "react";
-import { propagateTestid as b } from "../../../helpers/utility/propagateTestid.js";
-import { F as L } from "../../../FieldAppendToLabel-CMgTenh1.js";
-import { FieldLegend as g } from "../components/FieldLegend.js";
-const y = "ids-field-group-v5160", A = "ids-field-group--invalid-v5160", E = "ids-field-group--hidden-label-v5160", k = "ids-field-group--legend-v5160", q = "ids-field-group--fields-v5160", w = "ids-field-group--inline-v5160", z = "ids-field-group--join-v5160", l = {
-  fieldGroup: y,
-  invalid: A,
-  hiddenLabel: E,
-  legend: k,
-  fields: q,
-  inline: w,
-  join: z
-}, O = ({
-  children: c,
-  className: m,
-  "data-testid": n,
-  error: d,
-  errorMessages: i,
-  hiddenLabel: t,
+import { jsxs as G, jsx as i } from "react/jsx-runtime";
+import { propagateTestid as m } from "../../../helpers/utility/propagateTestid.js";
+import { s as N } from "../../../factory-DHLOr79I.js";
+import { s as C } from "../../../is-valid-prop-DFFvE05x.js";
+import { FieldFooter as P } from "../components/FieldFooter.js";
+import { fieldGroup as S } from "./FieldGroup.styles.js";
+import { c as l } from "../../../cva-B2x59Dph.js";
+import { c as j } from "../../../cx-DN21T1EH.js";
+import { GlobalCSSClass as v } from "../../../enums.js";
+import { LabelBase as w } from "../../Label/LabelBase/LabelBase.js";
+const H = ({
+  children: a,
+  className: d,
+  "data-testid": t,
+  error: e,
+  errorMessages: o,
+  hiddenLabel: r,
   hint: p,
-  inline: u,
-  join: v,
-  label: a,
-  optional: e,
-  required: j,
-  ...h
+  inline: n,
+  join: c,
+  label: f,
+  required: u,
+  supplementary: y,
+  ...F
 }) => {
-  const F = f(
-    () => !!d || (i == null ? void 0 : i.length),
-    [d, i == null ? void 0 : i.length]
-  ), G = f(
-    () => !p && !d && !(i != null && i.length) ? null : /* @__PURE__ */ o(
-      L,
-      {
-        hint: p,
-        error: d,
-        errorMessages: i,
-        hiddenLabel: t,
-        "data-parent-testid": n
-      }
-    ),
-    [n, d, i, t, p]
-  );
-  return /* @__PURE__ */ N(
+  const s = S.raw({
+    hasError: !!e || !!(o != null && o.length),
+    hiddenLabel: r,
+    inline: n,
+    join: c
+  }), [h, x] = C(F);
+  return /* @__PURE__ */ G(
     "fieldset",
     {
-      className: x(m, l.fieldGroup, {
-        [l.inline]: u,
-        [l.invalid]: F,
-        [l.hiddenLabel]: t,
-        [l.join]: v
-      }),
-      "data-testid": n,
-      ...h,
+      className: j(
+        d,
+        l(s.root, h),
+        v.FieldGroup
+      ),
+      "data-testid": t,
+      ...x,
       children: [
-        /* @__PURE__ */ o(
-          g,
+        /* @__PURE__ */ i(
+          w,
           {
-            append: G,
-            className: l.legend,
-            "data-testid": b(n, "legend"),
-            hiddenLabel: t,
-            optional: e,
-            required: j,
-            children: a
+            append: p && /* @__PURE__ */ i(
+              N.div,
+              {
+                className: l(s.hint),
+                "data-testid": m(t, "hint"),
+                srOnly: r,
+                children: p
+              }
+            ),
+            className: l(s.legend),
+            element: "legend",
+            "data-testid": m(t, "legend"),
+            hiddenLabel: r,
+            required: u,
+            children: f
           }
         ),
-        /* @__PURE__ */ o("div", { className: l.fields, children: c })
+        /* @__PURE__ */ i("div", { className: l(s.fields), children: a }),
+        /* @__PURE__ */ i(
+          P,
+          {
+            "data-testid": m(t, "error"),
+            error: e,
+            errorMessages: o,
+            multipleFields: !0,
+            supplementary: y
+          }
+        )
       ]
     }
   );
 };
 export {
-  O as IressFieldGroup
+  H as IressFieldGroup
 };