@iress-oss/ids-components 6.0.0-alpha.3 → 6.0.0-alpha.30

package/dist/components/Expander/Expander.js

@@ -1,71 +1,85 @@
-import { jsxs as P, jsx as a } from "react/jsx-runtime";
-import { useState as j, useEffect as k } from "react";
-import { propagateTestid as d } from "../../helpers/utility/propagateTestid.js";
-import { useIdIfNeeded as w } from "../../hooks/useIdIfNeeded.js";
-import { expander as m } from "./Expander.styles.js";
-import { c as y } from "../../css-fGu_jDvv.js";
-import { c as p } from "../../cx-DN21T1EH.js";
-import { IressText as l } from "../Text/Text.js";
-import { s as O } from "../../factory-oPXoMw9H.js";
-import { s as S } from "../../is-valid-prop-Ce0wiweq.js";
-import { GlobalCSSClass as T } from "../../enums.js";
-const J = ({
-  activator: f,
-  activatorStyle: e = {},
-  children: x,
-  className: N,
+import { jsxs as m, jsx as s } from "react/jsx-runtime";
+import { useState as _, useEffect as b } from "react";
+import { propagateTestid as p } from "../../helpers/utility/propagateTestid.js";
+import { useIdIfNeeded as L } from "../../hooks/useIdIfNeeded.js";
+import { expander as l } from "./Expander.styles.js";
+import { c as P } from "../../css-DVJ-ALYD.js";
+import { c as f } from "../../cx-DN21T1EH.js";
+import { IressText as x } from "../Text/Text.js";
+import { s as j } from "../../factory-CcYfm2kB.js";
+import { s as k } from "../../is-valid-prop-C5D641yn.js";
+import { GlobalCSSClass as h } from "../../enums.js";
+const G = ({ className: r }) => /* @__PURE__ */ s(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 -960 960 960",
+    className: r,
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ s("path", { d: "M480-372.92q-7.23 0-13.46-2.31t-11.85-7.92L274.92-562.92q-8.3-8.31-8.5-20.89-.19-12.57 8.5-21.27 8.7-8.69 21.08-8.69 12.38 0 21.08 8.69L480-442.15l162.92-162.93q8.31-8.3 20.89-8.5 12.57-.19 21.27 8.5 8.69 8.7 8.69 21.08 0 12.38-8.69 21.08L505.31-383.15q-5.62 5.61-11.85 7.92-6.23 2.31-13.46 2.31Z" })
+  }
+), O = ({
+  activator: r,
+  activatorStyle: a = {},
+  children: N,
+  className: u,
   "data-testid": o,
-  onChange: u,
+  onChange: v,
   id: I,
-  mode: i = "section",
-  noGutter: h,
-  open: r = !1,
+  mode: c = "section",
+  noGutter: w,
+  open: n = !1,
   ...C
 }) => {
-  const [s, c] = j(r), n = w({ id: I }), t = m({ mode: i, open: s }), _ = m.raw({ mode: i, open: s });
-  k(() => {
-    c(r);
-  }, [r]);
-  const b = () => {
-    c(!s), u?.(!s);
-  }, [v, E] = S(e);
-  return /* @__PURE__ */ P(
-    l,
+  const [t, d] = _(n), i = L({ id: I }), e = l({ mode: c, open: t }), g = l.raw({ mode: c, open: t });
+  b(() => {
+    d(n);
+  }, [n]);
+  const q = () => {
+    d(!t), v?.(!t);
+  }, [y, E] = k(a);
+  return /* @__PURE__ */ m(
+    x,
     {
-      className: p(N, t.root, T.Expander),
+      className: f(u, e.root, h.Expander),
       ...C,
       "data-testid": o,
-      id: n,
+      id: i,
       children: [
-        /* @__PURE__ */ a(
-          O.button,
+        /* @__PURE__ */ m(
+          j.button,
           {
             ...E,
-            "aria-expanded": s,
-            "aria-controls": `${n}__container`,
-            className: p(
-              e?.className,
-              y(_.activator, v)
+            "aria-expanded": t,
+            "aria-controls": `${i}__container`,
+            className: f(
+              a?.className,
+              P(g.activator, y),
+              h.Group
             ),
-            "data-testid": e?.["data-testid"] ?? d(o, "activator"),
-            onClick: b,
+            "data-testid": a?.["data-testid"] ?? p(o, "activator"),
+            onClick: q,
             type: "button",
-            children: f
+            children: [
+              r,
+              /* @__PURE__ */ s(G, { className: e.chevron })
+            ]
           }
         ),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ s(
           "div",
           {
-            id: `${n}__container`,
-            className: t.container,
-            "data-testid": d(o, "container"),
-            children: /* @__PURE__ */ a("div", { className: t.containerInner, children: /* @__PURE__ */ a(l, { className: t.content, noGutter: h, children: x }) })
+            id: `${i}__container`,
+            className: e.container,
+            "data-testid": p(o, "container"),
+            children: /* @__PURE__ */ s("div", { className: e.containerInner, children: /* @__PURE__ */ s(x, { className: e.content, noGutter: w, children: N }) })
           }
         )
       ]
     }
   );
 };
+O.displayName = "IressExpander";
 export {
-  J as IressExpander
+  O as IressExpander
 };

package/dist/components/Expander/Expander.styles.d.ts

@@ -0,0 +1,60 @@
+export declare const expander: import('../../styled-system/types').SlotRecipeRuntimeFn<"container" | "content" | "root" | "activator" | "chevron" | "containerInner", {
+    mode: {
+        section: {
+            root: {
+                border: "table";
+                borderRadius: "radius.system.layout";
+            };
+            activator: {
+                display: "flex";
+                justifyContent: "space-between";
+                alignItems: "flex-start";
+                width: "[100%]";
+                textStyle: "typography.heading.3";
+                px: "spacing.4";
+                py: "spacing.3";
+                borderRadius: "radius.system.layout";
+                transition: "[all 0.3s linear]";
+                focusable: "expander-activator";
+                _hover: {
+                    bg: "colour.neutral.20";
+                };
+                '&[aria-expanded="true"]': {
+                    borderBottomRadius: "radius.0";
+                };
+            };
+            chevron: {
+                bg: "colour.neutral.30";
+                borderRadius: "50%";
+            };
+            content: {
+                px: "spacing.4";
+                pb: "spacing.4";
+                pt: "spacing.3";
+            };
+        };
+        link: {
+            activator: {
+                color: "colour.primary.text";
+                textDecoration: "underline";
+                borderRadius: "radius.system.button";
+                _hover: {
+                    textDecoration: "none";
+                };
+            };
+            chevron: {
+                display: "inline";
+            };
+        };
+    };
+    open: {
+        true: {
+            chevron: {
+                transform: "rotate(180deg)";
+            };
+            container: {
+                gridTemplateRows: "1fr";
+            };
+        };
+    };
+}>;

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

@@ -1,8 +1,17 @@
-import { s as e } from "../../sva-OmxClA9g.js";
+import { s as e } from "../../sva-CsHRIRDW.js";
 const o = e({
-  slots: ["root", "activator", "content", "container", "containerInner"],
+  slots: [
+    "root",
+    "activator",
+    "chevron",
+    "content",
+    "container",
+    "containerInner"
+  ],
   base: {
     root: {
+      // Performance: CSS containment (no paint to allow overflow)
+      contain: "layout style",
       display: "block"
     },
     activator: {
@@ -12,25 +21,14 @@ const o = e({
       width: "auto",
       bg: "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"
-        }
-      }
+      focusable: "true"
+    },
+    chevron: {
+      width: "[1.5em]",
+      height: "[1.5em]",
+      color: "colour.neutral.90",
+      transition: "[all 0.3s ease-in-out]"
     },
     container: {
       display: "grid",
@@ -47,41 +45,56 @@ const o = e({
   variants: {
     mode: {
       section: {
+        root: {
+          border: "table",
+          borderRadius: "radius.system.layout"
+        },
         activator: {
           display: "flex",
           justifyContent: "space-between",
-          alignItems: "flex-end",
+          alignItems: "flex-start",
           width: "[100%]",
-          textStyle: "typography.heading.4",
+          textStyle: "typography.heading.3",
+          px: "spacing.4",
           py: "spacing.3",
-          borderBottom: "divider",
-          transition: "[all 0.2s ease-in-out]",
-          _after: {
-            mr: "spacing.2"
-          },
+          borderRadius: "radius.system.layout",
+          transition: "[all 0.3s linear]",
+          focusable: "expander-activator",
           _hover: {
-            color: "colour.primary.text",
-            borderBottom: "hover"
+            bg: "colour.neutral.20"
+          },
+          '&[aria-expanded="true"]': {
+            borderBottomRadius: "radius.0"
           }
+        },
+        chevron: {
+          bg: "colour.neutral.30",
+          borderRadius: "50%"
+        },
+        content: {
+          px: "spacing.4",
+          pb: "spacing.4",
+          pt: "spacing.3"
         }
       },
       link: {
         activator: {
           color: "colour.primary.text",
           textDecoration: "underline",
-          _before: {
-            borderRadius: "radius.system.badge"
-          },
+          borderRadius: "radius.system.button",
           _hover: {
             textDecoration: "none"
           }
+        },
+        chevron: {
+          display: "inline"
         }
       }
     },
     open: {
       true: {
-        activator: {
-          tableChevron: !1
+        chevron: {
+          transform: "rotate(180deg)"
         },
         container: {
           gridTemplateRows: "1fr"

package/dist/components/Field/Field.d.ts

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+import { LabelBaseProps } from '../Label/LabelBase/LabelBase';
+import { IressStyledProps } from '../../types';
+import { ValidationMessageObj } from '../../interfaces';
+export type IressFieldProps<E extends 'div' | 'fieldset' = 'div', ELabel extends 'label' | 'legend' = 'label'> = IressStyledProps<E> & Pick<LabelBaseProps<ELabel>, 'hiddenLabel' | 'required'> & {
+    /**
+     * The form control this field is related to.
+     */
+    children?: ReactNode;
+    /**
+     * Text to be displayed as supporting field description.
+     */
+    hint?: ReactNode;
+    /**
+     * Displays the label and input field inline instead of stacked vertically.
+     */
+    horizontal?: boolean;
+    /**
+     * Controls the width of the label container when in horizontal mode.
+     * Can be any valid CSS width value (e.g., '200px', '20%', 'auto').
+     * Only applies when `horizontal` is true.
+     */
+    labelWidth?: string;
+    /**
+     * Used to connect it to the input element, it should be the input's id.
+     * If provided, the label will be rendered as a `<label>` element, otherwise it will be rendered as a `<strong>` element.
+     *
+     * [Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for)
+     */
+    htmlFor?: ELabel extends 'label' ? string : undefined;
+    /**
+     * Text to be displayed in the label.
+     **/
+    label: ReactNode;
+    /**
+     * Validation error to be displayed above the field.
+     */
+    error?: ReactNode;
+    /**
+     * Validation errors to be displayed above the field, an array of validation messages to be displayed in `IressValidationSummary`.
+     */
+    errorMessages?: ValidationMessageObj[];
+    /**
+     * Renders the group in a read-only state (no asterisk symbol).
+     */
+    readOnly?: boolean;
+    /**
+     * Removes the reserved space for error messages, allowing fields to stack with narrower gaps.
+     * When true, no margin is reserved for potential error messages.
+     */
+    removeErrorMargin?: boolean;
+    /**
+     * Supplementary content to be displayed below the field. Is only shown when the field is not in an error state.
+     */
+    supplementary?: ReactNode;
+};
+export declare const IressField: {
+    ({ children, className, "data-testid": dataTestId, error, errorMessages, hiddenLabel, hint, horizontal, label, labelWidth, required, readOnly, removeErrorMargin, supplementary, ...restProps }: IressFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Field/Field.js

@@ -1,23 +1,23 @@
-import { jsxs as u, jsx as s } from "react/jsx-runtime";
+import { jsxs as C, jsx as s } from "react/jsx-runtime";
 import { isValidElement as E } from "react";
 import { IressLabel as q } from "../Label/Label.js";
 import "../Label/Label.styles.js";
-import { propagateTestid as y } from "../../helpers/utility/propagateTestid.js";
+import { propagateTestid as N } from "../../helpers/utility/propagateTestid.js";
 import { toArray as w } from "../../helpers/formatting/toArray.js";
-import { s as p } from "../../factory-oPXoMw9H.js";
-import { s as A } from "../../is-valid-prop-Ce0wiweq.js";
+import { s as p } from "../../factory-CcYfm2kB.js";
+import { s as A } from "../../is-valid-prop-C5D641yn.js";
 import { field as G } from "./Field.styles.js";
-import { c as e } from "../../css-fGu_jDvv.js";
-import { c as V } from "../../cx-DN21T1EH.js";
-import { FieldFooter as $ } from "./components/FieldFooter.js";
-import { FieldHintIcon as h, FieldHint as k } from "./components/FieldHint.js";
-import { GlobalCSSClass as B } from "../../enums.js";
-const M = ({
+import { c as e } from "../../css-DVJ-ALYD.js";
+import { c as I } from "../../cx-DN21T1EH.js";
+import { FieldFooter as V } from "./components/FieldFooter.js";
+import { FieldHintIcon as $, FieldHint as h } from "./components/FieldHint.js";
+import { GlobalCSSClass as k } from "../../enums.js";
+const B = ({
   children: i,
-  className: N,
+  className: u,
   "data-testid": t,
-  error: f,
-  errorMessages: d,
+  error: d,
+  errorMessages: f,
   hiddenLabel: m,
   hint: o,
   horizontal: l,
@@ -33,7 +33,7 @@ const M = ({
   let a;
   F === void 0 && E(i) ? a = w(i)[0].props.id : a = F;
   const r = G.raw({
-    hasError: !!f || !!d?.length,
+    hasError: !!d || !!f?.length,
     hasHint: !!o,
     hiddenLabel: m,
     horizontal: l,
@@ -41,38 +41,38 @@ const M = ({
     // Add this as needed
     removeErrorMargin: H
   }), [S, g] = A(c), j = () => {
-    const C = /* @__PURE__ */ u(
+    const y = /* @__PURE__ */ C(
       q,
       {
         className: e(r.label),
-        "data-testid": y(t, "label"),
+        "data-testid": N(t, "label"),
         hiddenLabel: m,
         htmlFor: a,
         required: x ? !1 : !!b,
         children: [
           v,
-          l && o && /* @__PURE__ */ s(h, { hint: o })
+          l && o && /* @__PURE__ */ s($, { hint: o })
         ]
       }
     );
     return o ? /* @__PURE__ */ s(
-      k,
+      h,
       {
         hint: o,
         horizontal: l,
         hiddenLabel: m,
         dataTestId: t,
-        children: C
+        children: y
       }
-    ) : C;
+    ) : y;
   };
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ C(
     p.div,
     {
-      className: V(
-        N,
+      className: I(
+        u,
         e(r.root, S),
-        B.Field
+        k.Field
       ),
       style: {
         ...l && n && {
@@ -85,12 +85,12 @@ const M = ({
         /* @__PURE__ */ s(p.div, { className: e(r.labelContainer), children: j() }),
         /* @__PURE__ */ s(p.div, { className: e(r.fieldContainer), children: /* @__PURE__ */ s("div", { className: e(r.element), children: i }) }),
         /* @__PURE__ */ s(
-          $,
+          V,
           {
             className: e(r.footer),
-            "data-testid": y(t, "error"),
-            error: f,
-            errorMessages: d,
+            "data-testid": N(t, "error"),
+            error: d,
+            errorMessages: f,
             supplementary: P
           }
         )
@@ -98,6 +98,7 @@ const M = ({
     }
   );
 };
+B.displayName = "IressField";
 export {
-  M as IressField
+  B as IressField
 };

package/dist/components/Field/Field.styles.d.ts

@@ -0,0 +1,88 @@
+export declare const field: import('../../styled-system/types').SlotRecipeRuntimeFn<"label" | "footer" | "hint" | "element" | "root" | "footerIcon" | "supplementary" | "labelContainer" | "fieldContainer", {
+    horizontal: {
+        true: {
+            root: {
+                display: "grid";
+                gridTemplateColumns: "auto 1fr";
+                gridTemplateRows: "auto auto";
+                gridTemplateAreas: "\"label field\" \". footer\"";
+                columnGap: "spacing.2";
+                alignItems: "center";
+            };
+            labelContainer: {
+                gridArea: "label";
+                alignSelf: "center";
+            };
+            fieldContainer: {
+                gridArea: "field";
+            };
+            footer: {
+                gridArea: "footer";
+                mt: "spacing.1";
+            };
+            label: {
+                mb: "none";
+            };
+        };
+    };
+    hasError: {
+        true: {
+            root: {
+                _nestedFormElements: {
+                    '--iress-border-color': "{colors.colour.system.danger.fill}";
+                };
+            };
+        };
+    };
+    hasHint: {
+        true: {
+            label: {
+                mb: "spacing.0";
+            };
+        };
+    };
+    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.0";
+                right: "spacing.0";
+                top: "[100%]";
+                mt: "spacing.1";
+            };
+        };
+    };
+}>;

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

@@ -1,10 +1,11 @@
-import { s as e } from "../../sva-OmxClA9g.js";
-const o = e({
+import { s as e } from "../../sva-CsHRIRDW.js";
+const t = e({
   slots: [
     "root",
     "hint",
     "label",
     "footer",
+    "footerIcon",
     "supplementary",
     "element",
     "labelContainer",
@@ -28,6 +29,9 @@ const o = e({
       textStyle: "typography.body.sm.regular",
       mt: "spacing.1"
     },
+    footerIcon: {
+      verticalAlign: "-1.5px"
+    },
     supplementary: {
       fontSize: "inherit"
     },
@@ -35,7 +39,11 @@ const o = e({
       mb: "spacing.1"
     },
     labelContainer: {},
-    fieldContainer: {}
+    fieldContainer: {
+      "& .ids-popover__content": {
+        zIndex: "100"
+      }
+    }
   },
   variants: {
     horizontal: {
@@ -68,7 +76,7 @@ const o = e({
       true: {
         root: {
           _nestedFormElements: {
-            borderColor: "colour.system.danger.fill"
+            "--iress-border-color": "{colors.colour.system.danger.fill}"
           }
         }
       }
@@ -127,5 +135,5 @@ const o = e({
   }
 });
 export {
-  o as field
+  t as field
 };

package/dist/components/Field/FieldGroup/FieldGroup.d.ts

@@ -0,0 +1,20 @@
+import { IressFieldProps } from '../Field';
+import { ReactNode } from 'react';
+export interface IressFieldGroupProps extends IressFieldProps<'fieldset', 'legend'> {
+    /**
+     * Should contain multiple `IressField`, or other elements supported in field group such as `IressButton`.
+     */
+    children?: ReactNode;
+    /**
+     * Displays multiple children inline rather than stacked, with a small gap.
+     */
+    inline?: boolean;
+    /**
+     * Displays multiple children inline and removes column gap.
+     */
+    join?: boolean;
+}
+export declare const IressFieldGroup: {
+    ({ children, className, "data-testid": dataTestId, error, errorMessages, hiddenLabel, hint, inline, join, label, required, supplementary, ...restProps }: IressFieldGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};