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

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

@@ -1,20 +1,20 @@
-import { jsxs as x, jsx as t } from "react/jsx-runtime";
+import { jsxs as g, jsx as t } from "react/jsx-runtime";
 import { propagateTestid as i } from "../../../helpers/utility/propagateTestid.js";
-import { s as G } from "../../../factory-oPXoMw9H.js";
-import { s as N } from "../../../is-valid-prop-Ce0wiweq.js";
+import { s as h } from "../../../factory-CcYfm2kB.js";
+import { s as x } from "../../../is-valid-prop-C5D641yn.js";
 import { FieldFooter as C } from "../components/FieldFooter.js";
 import { fieldGroup as P } from "./FieldGroup.styles.js";
-import { c as o } from "../../../css-fGu_jDvv.js";
+import { c as e } from "../../../css-DVJ-ALYD.js";
 import { c as S } from "../../../cx-DN21T1EH.js";
 import { GlobalCSSClass as j } from "../../../enums.js";
 import { LabelBase as v } from "../../Label/LabelBase/LabelBase.js";
-const H = ({
+const w = ({
   children: a,
   className: d,
   "data-testid": s,
   error: l,
   errorMessages: m,
-  hiddenLabel: e,
+  hiddenLabel: o,
   hint: p,
   inline: n,
   join: c,
@@ -25,42 +25,42 @@ const H = ({
 }) => {
   const r = P.raw({
     hasError: !!l || !!m?.length,
-    hiddenLabel: e,
+    hiddenLabel: o,
     inline: n,
     join: c
-  }), [g, h] = N(F);
-  return /* @__PURE__ */ x(
+  }), [G, N] = x(F);
+  return /* @__PURE__ */ g(
     "fieldset",
     {
       className: S(
         d,
-        o(r.root, g),
+        e(r.root, G),
         j.FieldGroup
       ),
       "data-testid": s,
-      ...h,
+      ...N,
       children: [
         /* @__PURE__ */ t(
           v,
           {
             append: p && /* @__PURE__ */ t(
-              G.div,
+              h.div,
               {
-                className: o(r.hint),
+                className: e(r.hint),
                 "data-testid": i(s, "hint"),
-                srOnly: e,
+                srOnly: o,
                 children: p
               }
             ),
-            className: o(r.legend),
+            className: e(r.legend),
             element: "legend",
             "data-testid": i(s, "legend"),
-            hiddenLabel: e,
+            hiddenLabel: o,
             required: u,
             children: f
           }
         ),
-        /* @__PURE__ */ t("div", { className: o(r.fields), children: a }),
+        /* @__PURE__ */ t("div", { className: e(r.fields), children: a }),
         /* @__PURE__ */ t(
           C,
           {
@@ -75,6 +75,7 @@ const H = ({
     }
   );
 };
+w.displayName = "IressFieldGroup";
 export {
-  H as IressFieldGroup
+  w as IressFieldGroup
 };

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

@@ -0,0 +1,81 @@
+export declare const fieldGroup: import('../../../styled-system/types').SlotRecipeRuntimeFn<"legend" | "hint" | "root" | "fields", {
+    hasError: {
+        true: {
+            root: {
+                _nestedFormElements: {
+                    borderColor: "colour.system.danger.fill";
+                };
+            };
+        };
+    };
+    hiddenLabel: {
+        true: {
+            legend: {
+                mb: "none";
+            };
+        };
+    };
+    inline: {
+        true: {
+            fields: {
+                alignItems: "flex-end";
+                flexDirection: "row";
+                columnGap: "sm";
+                '& > *': {
+                    flexGrow: "1";
+                };
+                _directNestedFormElements: {
+                    mb: "field.footer";
+                };
+                _directNestedSizedElements: {
+                    flexGrow: "0";
+                    alignSelf: "flex-end";
+                };
+            };
+        };
+    };
+    join: {
+        true: {
+            fields: {
+                alignItems: "flex-end";
+                flexDirection: "row";
+                columnGap: "none";
+                '& > *': {
+                    flexGrow: "1";
+                };
+                _directNestedFormElements: {
+                    mb: "field.footer";
+                };
+                _directNestedSizedElements: {
+                    flexGrow: "0";
+                    alignSelf: "flex-end";
+                };
+                _nestedFieldsExceptFirst: {
+                    borderTopLeftRadius: "radius.0";
+                    borderBottomLeftRadius: "radius.0";
+                    _before: {
+                        borderTopLeftRadius: "radius.0";
+                        borderBottomLeftRadius: "radius.0";
+                    };
+                    _after: {
+                        borderTopLeftRadius: "radius.0";
+                        borderBottomLeftRadius: "radius.0";
+                    };
+                };
+                _nestedFieldsExceptLast: {
+                    borderTopRightRadius: "radius.0";
+                    borderBottomRightRadius: "radius.0";
+                    borderRightWidth: "[0px]";
+                    _before: {
+                        borderTopRightRadius: "radius.0";
+                        borderBottomRightRadius: "radius.0";
+                    };
+                    _after: {
+                        borderTopRightRadius: "radius.0";
+                        borderBottomRightRadius: "radius.0";
+                    };
+                };
+            };
+        };
+    };
+}>;

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

@@ -1,4 +1,4 @@
-import { s as e } from "../../../sva-OmxClA9g.js";
+import { s as e } from "../../../sva-CsHRIRDW.js";
 const o = e({
   slots: ["root", "hint", "legend", "fields"],
   base: {
@@ -85,28 +85,28 @@ const o = e({
             alignSelf: "flex-end"
           },
           _nestedFieldsExceptFirst: {
-            borderTopLeftRadius: "radius.000",
-            borderBottomLeftRadius: "radius.000",
+            borderTopLeftRadius: "radius.0",
+            borderBottomLeftRadius: "radius.0",
             _before: {
-              borderTopLeftRadius: "radius.000",
-              borderBottomLeftRadius: "radius.000"
+              borderTopLeftRadius: "radius.0",
+              borderBottomLeftRadius: "radius.0"
             },
             _after: {
-              borderTopLeftRadius: "radius.000",
-              borderBottomLeftRadius: "radius.000"
+              borderTopLeftRadius: "radius.0",
+              borderBottomLeftRadius: "radius.0"
             }
           },
           _nestedFieldsExceptLast: {
-            borderTopRightRadius: "radius.000",
-            borderBottomRightRadius: "radius.000",
+            borderTopRightRadius: "radius.0",
+            borderBottomRightRadius: "radius.0",
             borderRightWidth: "[0px]",
             _before: {
-              borderTopRightRadius: "radius.000",
-              borderBottomRightRadius: "radius.000"
+              borderTopRightRadius: "radius.0",
+              borderBottomRightRadius: "radius.0"
             },
             _after: {
-              borderTopRightRadius: "radius.000",
-              borderBottomRightRadius: "radius.000"
+              borderTopRightRadius: "radius.0",
+              borderBottomRightRadius: "radius.0"
             }
           }
         }

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

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { ValidationMessageObj } from '../../../interfaces';
+import { IressStyledProps } from '../../../types';
+export interface FieldFooterProps extends IressStyledProps {
+    /**
+     * 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[];
+    /**
+     * If true, the supplementary area will be displayed with a border to distinguish it from other fields.
+     */
+    multipleFields?: 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 FieldFooter: {
+    ({ className, "data-testid": dataTestId, error, errorMessages, multipleFields, supplementary, ...restProps }: FieldFooterProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/dist/components/Field/components/FieldFooter.js

@@ -1,54 +1,64 @@
-import { jsxs as p, jsx as r } from "react/jsx-runtime";
-import { getUniqueItemsByKey as x } from "../helpers/getUniqueItemsByKey.js";
-import { useRef as a, useMemo as y, useEffect as h } from "react";
-import { s as g } from "../../../factory-oPXoMw9H.js";
-import { c } from "../../../css-fGu_jDvv.js";
-import { c as I } from "../../../cx-DN21T1EH.js";
-import { IressText as S } from "../../Text/Text.js";
-import { IressValidationSummary as E } from "../../ValidationMessage/ValidationSummary/ValidationSummary.js";
-import { IressIcon as b } from "../../Icon/Icon.js";
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { getUniqueItemsByKey as y } from "../helpers/getUniqueItemsByKey.js";
+import { useRef as l, useMemo as h, useEffect as x } from "react";
+import { s as I } from "../../../factory-CcYfm2kB.js";
+import "../../ValidationMessage/ValidationMessage.js";
+import "../../ValidationMessage/ValidationLink/ValidationLink.js";
+import { IressValidationSummary as g } from "../../ValidationMessage/ValidationSummary/ValidationSummary.js";
+import { IressIcon as E } from "../../Icon/Icon.js";
 import "../../Icon/Icon.styles.js";
-import { field as v } from "../Field.styles.js";
-const C = (o) => /* @__PURE__ */ r(b, { name: "exclamation-triangle", ...o, pr: "xs" }), U = ({
+import "../../Icon/IconProvider.js";
+import { field as S } from "../Field.styles.js";
+import { c } from "../../../css-DVJ-ALYD.js";
+import { c as v } from "../../../cx-DN21T1EH.js";
+import { IressText as F } from "../../Text/Text.js";
+const N = (o) => /* @__PURE__ */ r(E, { name: "cancel", ...o }), b = ({
   className: o,
   "data-testid": f,
   error: s,
-  errorMessages: n = [],
-  multipleFields: u,
-  supplementary: i,
-  ...d
+  errorMessages: i = [],
+  multipleFields: p,
+  supplementary: a,
+  ...u
 }) => {
-  const m = v({ multipleFields: u }), t = a(null), l = a(null), e = y(
-    () => !!s || n.length > 0,
-    [s, n.length]
+  const m = S({ multipleFields: p }), t = l(null), n = l(null), e = h(
+    () => !!s || i.length > 0,
+    [s, i.length]
   );
-  return h(() => {
-    !t.current || t.current.textContent === l.current || (t.current.classList.remove(
+  return x(() => {
+    if (!t.current || n.current === e) {
+      n.current = e;
+      return;
+    }
+    t.current.classList.remove(
       c({ animationStyle: "field-footer" })
-    ), t.current.offsetHeight, l.current = t.current.textContent, t.current.classList.add(c({ animationStyle: "field-footer" })));
-  }, [i, e]), !i && !e ? null : /* @__PURE__ */ p(
-    g.div,
+    ), t.current.offsetHeight, n.current = e, t.current.classList.add(c({ animationStyle: "field-footer" }));
+  }, [e]), !a && !e ? null : /* @__PURE__ */ d(
+    I.div,
     {
-      ...d,
-      className: I(o, m.footer),
+      ...u,
+      className: v(o, m.footer),
       ref: t,
       children: [
         e && /* @__PURE__ */ r(
-          E,
+          g,
           {
-            itemStyle: { textStyle: "typography.body.sm" },
-            messages: x(n, "message"),
+            itemStyle: {
+              textStyle: "typography.body.sm"
+            },
+            messages: y(i, "message"),
             "data-testid": f,
-            prefix: /* @__PURE__ */ r(C, { "aria-label": "Error: " }),
+            prefix: /* @__PURE__ */ r(N, { "aria-label": "Error: ", className: m.footerIcon }),
             visiblePrefix: !0,
             children: s
           }
         ),
-        !e && /* @__PURE__ */ r(S, { className: m.supplementary, children: i })
+        !e && /* @__PURE__ */ r(F, { className: m.supplementary, children: a })
       ]
     }
   );
 };
+b.displayName = "FieldFooter";
 export {
-  U as FieldFooter
+  b as FieldFooter
 };

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

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+export interface FieldHintProps {
+    /**
+     * The hint content to display
+     */
+    hint: ReactNode;
+    /**
+     * Whether the field is in horizontal mode
+     */
+    horizontal?: boolean;
+    /**
+     * Whether the label is hidden
+     */
+    hiddenLabel?: boolean;
+    /**
+     * Data test ID for the hint element
+     */
+    dataTestId?: string;
+    /**
+     * The label content to wrap (only used in horizontal mode)
+     */
+    children: ReactNode;
+}
+export declare const FieldHint: {
+    ({ hint, horizontal, hiddenLabel, dataTestId, children, }: FieldHintProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const FieldHintIcon: ({ hint }: {
+    hint: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Field/components/FieldHint.js

@@ -1,33 +1,34 @@
-import { jsx as t, Fragment as e, jsxs as a } from "react/jsx-runtime";
+import { jsx as t, Fragment as s, jsxs as a } from "react/jsx-runtime";
 import { IressIcon as l } from "../../Icon/Icon.js";
 import "../../Icon/Icon.styles.js";
+import "../../Icon/IconProvider.js";
 import { IressTooltip as p } from "../../Tooltip/Tooltip.js";
 import "../../Tooltip/Tooltip.styles.js";
 import { propagateTestid as f } from "../../../helpers/utility/propagateTestid.js";
-import { c } from "../../../css-fGu_jDvv.js";
-import { s as d } from "../../../factory-oPXoMw9H.js";
+import { c } from "../../../css-DVJ-ALYD.js";
+import { s as d } from "../../../factory-CcYfm2kB.js";
 import { field as g } from "../Field.styles.js";
-const v = ({
+const x = ({
   hint: r,
-  horizontal: o,
-  hiddenLabel: i,
+  horizontal: i,
+  hiddenLabel: o,
   dataTestId: m,
-  children: s
+  children: e
 }) => {
   const n = g.raw({
     hasError: !1,
-    hiddenLabel: i,
-    horizontal: o,
+    hiddenLabel: o,
+    horizontal: i,
     multipleFields: !1
   });
-  return o ? /* @__PURE__ */ t(e, { children: s }) : /* @__PURE__ */ a(e, { children: [
-    s,
+  return i ? /* @__PURE__ */ t(s, { children: e }) : /* @__PURE__ */ a(s, { children: [
+    e,
     /* @__PURE__ */ t(
       d.div,
       {
         className: c(n.hint),
         "data-testid": f(m, "hint"),
-        srOnly: i,
+        srOnly: o,
         children: r
       }
     )
@@ -47,7 +48,8 @@ const v = ({
     )
   }
 );
+x.displayName = "FieldHint";
 export {
-  v as FieldHint,
+  x as FieldHint,
   w as FieldHintIcon
 };

package/dist/components/Hide/Hide.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { ResponsiveProp, IressStyledProps } from '../../types';
+/**
+ * @deprecated IressHide has been deprecated.
+ * - Please use the `srOnly` prop on any component to show or hide content from screen readers.
+ * - Please use the `hide` prop on any component to show or hide content at different breakpoints.
+ */
+export interface IressHideProps extends IressStyledProps {
+    /**
+     * Content to hide.
+     */
+    children: ReactNode;
+    /**
+     * Content will be hidden on any screen sizes that are set to true.
+     */
+    hiddenOn: ResponsiveProp<boolean>;
+    /**
+     * If true, the content will not be visible, but will be available to screen readers
+     */
+    visuallyHidden?: boolean;
+}
+/**
+ * @deprecated IressHide has been deprecated.
+ * - Please use the `srOnly` prop on any component to show or hide content from screen readers.
+ * - Please use the `hideFrom` and `hideBelow` props on any component to show or hide content at different breakpoints. For more complex logic, consider using the `useBreakpoint` hook to conditionally render content.
+ */
+export declare const IressHide: {
+    ({ children, hiddenOn, visuallyHidden, ...restProps }: IressHideProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/dist/components/Hide/Hide.js

@@ -1,23 +1,18 @@
-import { jsx as t } from "react/jsx-runtime";
-import { normaliseHideValues as m } from "./helpers/normaliseHideValues.js";
-import { s as d } from "../../factory-oPXoMw9H.js";
-const n = d("div"), f = ({
+import { jsx as m } from "react/jsx-runtime";
+import { normaliseHideValues as n } from "./helpers/normaliseHideValues.js";
+import { s as p } from "../../factory-CcYfm2kB.js";
+import { useBreakpoint as a } from "../../hooks/useBreakpoint.js";
+import "react";
+const d = p("div"), l = ({
   children: s,
   hiddenOn: e,
-  visuallyHidden: o,
+  visuallyHidden: r,
   ...i
 }) => {
-  const r = m(e);
-  return /* @__PURE__ */ t(
-    n,
-    {
-      ...i,
-      srOnly: o ? r : void 0,
-      hide: o ? void 0 : r,
-      children: s
-    }
-  );
+  const o = n(e), { breakpoint: t } = a();
+  return !r && o[t] ? null : /* @__PURE__ */ m(d, { ...i, srOnly: r ? o : void 0, children: s });
 };
+l.displayName = "IressHide";
 export {
-  f as IressHide
+  l as IressHide
 };

package/dist/components/Hide/helpers/normaliseHideValues.d.ts

@@ -0,0 +1,4 @@
+import { ResponsiveProp } from '../../../types';
+export declare const normaliseHideValues: (values?: ResponsiveProp<boolean>) => {
+    [k: string]: boolean;
+};

package/dist/components/Hide/helpers/normaliseHideValues.js

@@ -1,8 +1,10 @@
-import { BREAKPOINTS as o } from "../../../constants.js";
-const c = (t = {}) => o.reduce(
-  (r, e, m) => (r[e] = t[e] ?? r[o[m - 1]] ?? !1, r),
+import { BREAKPOINTS as t } from "../../../constants.js";
+const m = (o = {}) => typeof o == "boolean" ? Object.fromEntries(
+  t.map((r) => [r, o])
+) : t.reduce(
+  (r, e, n) => (r[e] = o[e] ?? r[t[n - 1]] ?? !1, r),
   {}
 );
 export {
-  c as normaliseHideValues
+  m as normaliseHideValues
 };

package/dist/components/Icon/Icon.constants.d.ts

@@ -0,0 +1,9 @@
+export declare const MATERIAL_SYMBOLS: {
+    readonly family: "Material Symbols Rounded";
+    readonly className: "material-symbols-rounded";
+    readonly figmaGrade: "Emphasis";
+    readonly figmaOpticalSize: "24dp";
+    readonly grade: 0;
+    readonly opticalSize: 36;
+    readonly weight: 300;
+};

package/dist/components/Icon/Icon.constants.js

@@ -0,0 +1,12 @@
+const a = {
+  family: "Material Symbols Rounded",
+  className: "material-symbols-rounded",
+  figmaGrade: "Emphasis",
+  figmaOpticalSize: "24dp",
+  grade: 0,
+  opticalSize: 36,
+  weight: 300
+};
+export {
+  a as MATERIAL_SYMBOLS
+};

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,57 @@
+import { IressStyledProps } from '../../types';
+import { IconName } from '@fortawesome/fontawesome-common-types';
+import { MaterialSymbol } from 'material-symbols';
+import { IconType } from './IconProvider';
+import { FontAwesomeIconWithMaterialEquivalent } from './helpers/iconMapping';
+export type IressIconProps<P extends IconType = 'material'> = IressStyledProps<'span'> & {
+    /**
+     * Filled variant for Material Symbols
+     * When true, icon uses filled style (fill=1)
+     * Useful for active/selected states
+     * @default false
+     */
+    filled?: P extends 'material' ? boolean : never;
+    /**
+     * Adds fixed width class for Font Awesome icons - fa-fw
+     * @deprecated Font Awesome specific. Material Symbols inherit text size automatically.
+     */
+    fixedWidth?: P extends 'fontawesome' ? boolean : never;
+    /**
+     * The name of the icon.
+     * Note: Font Awesome is deprecated. Please migrate to Material Symbols.
+     */
+    name: P extends 'fontawesome' ? IconName : MaterialSymbol | FontAwesomeIconWithMaterialEquivalent;
+    /**
+     * Adds screen reader text if the icon needs to be visible to screen reader users
+     */
+    screenreaderText?: string;
+    /**
+     * Amount of degrees to rotate the icon.
+     */
+    rotate?: 90 | 180 | 270;
+    /**
+     * Flip the icon horizontally, vertically or both axes.
+     */
+    flip?: 'horizontal' | 'vertical' | 'both';
+    /**
+     * The icon set to be used (Font Awesome only):
+     * - `fal`: Font Awesome Light
+     * - `fab`: Font Awesome Brand
+     * @default 'fal'
+     * @deprecated Font Awesome is deprecated. Please migrate to Material Symbols.
+     */
+    set?: P extends 'fontawesome' ? 'fal' | 'fab' : never;
+    /**
+     * Accepts a numeric value for speed for one rotation.
+     */
+    spin?: 'half' | 1 | 2 | 3;
+    /**
+     * The icon provider to use
+     * Note: Font Awesome is deprecated. Please migrate to Material Symbols.
+     */
+    type?: P;
+};
+export declare const IressIcon: {
+    <P extends IconType = "material">({ className, flip, name, rotate, screenreaderText, spin, type, ...restProps }: IressIconProps<P>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};