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

package/dist/components/Toggle/Toggle.styles.js

@@ -1,4 +1,4 @@
-import { s as e } from "../../sva-OmxClA9g.js";
+import { s as e } from "../../sva-CsHRIRDW.js";
 const t = e({
   slots: [
     "toggleBase",
@@ -10,9 +10,15 @@ const t = e({
   ],
   base: {
     toggleBase: {
+      // Performance: CSS containment (no paint to allow focus ring/shadow)
+      contain: "layout style",
       display: "inline-flex",
       gap: "spacing.1",
-      color: "colour.primary.fill"
+      color: "colour.primary.fill",
+      textStyle: "typography.body.md.strong",
+      "&:has(button:disabled)": {
+        cursor: "not-allowed"
+      }
     },
     toggleButtonContainer: {
       position: "relative",
@@ -20,14 +26,16 @@ const t = e({
       height: "toggle.thumb",
       lineHeight: "0",
       bg: "[currentColor]",
+      "&:has(button:disabled)": {
+        opacity: "[0.5]",
+        pointerEvents: "none"
+      },
       borderWidth: "2px",
       borderStyle: "solid",
       borderColor: "[currentColor]",
       borderRadius: "[{sizes.toggle.thumb}]",
       transition: "[background-color 0.3s ease-out]",
-      '&:has([role="switch"]:focus-visible)': {
-        layerStyle: "elevation.focus"
-      },
+      focusable: "has-switch",
       _hover: {
         color: "colour.neutral.80"
       }
@@ -81,7 +89,8 @@ const t = e({
     },
     checkboxMark: {
       opacity: 0,
-      marginInlineStart: "spacing.1",
+      marginInlineStart: "[calc({spacing.spacing.1} * 0.5)]",
+      textStyle: "typography.body.md",
       "&&:hover": {
         bg: "transparent"
       }
@@ -90,7 +99,6 @@ const t = e({
       display: "inline-block",
       marginInlineEnd: "spacing.1",
       color: "colour.neutral.80",
-      textStyle: "typography.body.md.strong",
       lineHeight: "1.5rem"
     }
   },

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { FloatingUIAligns, IressStyledProps } from '../../types';
+export interface IressTooltipProps extends IressStyledProps {
+    /**
+     * Sets the alignment of the popover relative to the activator element.
+     * @default top
+     */
+    align?: FloatingUIAligns;
+    /**
+     * The element to add a tooltip to.
+     */
+    children: ReactNode;
+    /**
+     * Sets the tooltip display delay in milliseconds.
+     * @default 500
+     */
+    delay?: number;
+    /**
+     * Only used for internal testing.
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Sets the tooltip text. Can accept a string or an array of strings - if given an array, will output each string on a new line.
+     */
+    tooltipText: string | string[];
+}
+export declare const IressTooltip: {
+    ({ children, className, align, delay, open, tooltipText, "data-testid": testid, ...restProps }: IressTooltipProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Tooltip/Tooltip.js

@@ -1,39 +1,39 @@
 import { jsxs as m, jsx as a } from "react/jsx-runtime";
-import { useState as w, useEffect as j, Fragment as N } from "react";
+import { useState as w, useEffect as N, Fragment as j } from "react";
 import { c as O } from "../../cx-DN21T1EH.js";
-import { u as P, o as R, i as E, j as G, s as H, k as L, l as k, b as B, c as D, d as M } from "../../floating-ui.react-BetVZ099.js";
+import { u as P, o as R, i as E, j as G, s as H, k as L, l as M, b as k, c as B, d as D } from "../../floating-ui.react-B0nDXRN6.js";
 import { propagateTestid as p } from "../../helpers/utility/propagateTestid.js";
 import { toArray as W } from "../../helpers/formatting/toArray.js";
 import { idsLogger as q } from "../../helpers/utility/idsLogger.js";
 import { focusableElements as z } from "../../helpers/dom/focusableElements.js";
 import { tooltip as J } from "./Tooltip.styles.js";
-import { s as K } from "../../factory-oPXoMw9H.js";
+import { s as K } from "../../factory-CcYfm2kB.js";
 import { GlobalCSSClass as Q } from "../../enums.js";
-const re = ({
+const U = ({
   children: o,
   className: u,
-  align: n = "top",
+  align: i = "top",
   delay: d = 500,
   open: h = !1,
   tooltipText: g,
   "data-testid": s,
   ...v
 }) => {
-  const r = J(), i = n === "auto", [c, b] = w(h), { refs: e, floatingStyles: F, context: t } = P({
-    placement: i ? void 0 : n,
+  const r = J(), n = i === "auto", [c, b] = w(h), { refs: e, floatingStyles: F, context: t } = P({
+    placement: n ? void 0 : i,
     open: c,
     onOpenChange: b,
-    middleware: [R(5), i ? E() : G(), H()]
+    middleware: [R(5), n ? E() : G(), H()]
   }), I = L(t, {
     move: !1,
-    delay: { open: d, close: 500 }
-  }), x = k(t), C = B(t), T = D(t, { role: "tooltip" }), { getReferenceProps: y, getFloatingProps: A } = M([
+    restMs: d
+  }), T = M(t), x = k(t), C = B(t, { role: "tooltip" }), { getReferenceProps: y, getFloatingProps: A } = D([
     I,
+    T,
     x,
-    C,
-    T
+    C
   ]);
-  return j(() => {
+  return N(() => {
     if (!o || !e.reference.current) return;
     z(e.reference.current).length > 0 || q(
       `IressTooltip: The content that activates the tooltip is not focusable,
@@ -66,7 +66,7 @@ const re = ({
             "data-testid": p(s, "tooltip-text"),
             ref: e.setFloating,
             ...A(),
-            children: W(g).map((l, f, S) => /* @__PURE__ */ m(N, { children: [
+            children: W(g).map((l, f, S) => /* @__PURE__ */ m(j, { children: [
               l,
               f < S.length - 1 && /* @__PURE__ */ a("br", {})
             ] }, f))
@@ -76,6 +76,7 @@ const re = ({
     }
   );
 };
+U.displayName = "IressTooltip";
 export {
-  re as IressTooltip
+  U as IressTooltip
 };

package/dist/components/Tooltip/Tooltip.styles.js

@@ -1,5 +1,5 @@
-import { s as o } from "../../sva-OmxClA9g.js";
-const a = o({
+import { s as t } from "../../sva-CsHRIRDW.js";
+const a = t({
   slots: ["root", "activator", "content"],
   base: {
     root: {
@@ -8,13 +8,16 @@ const a = o({
     },
     activator: {},
     content: {
+      // Performance: CSS containment limits style recalculation scope
+      contain: "layout style paint",
       zIndex: "600",
       width: "[max-content]",
       maxWidth: "[20em]",
-      padding: "spacing.2",
+      px: "spacing.2",
+      py: "spacing.1",
       borderRadius: "radius.system.form",
       borderStyle: "solid",
-      layerStyle: "elevation.floating",
+      layerStyle: "floating",
       textStyle: "typography.body.sm.regular",
       color: "colour.neutral.10",
       bg: "colour.neutral.80"

package/dist/components/ValidationMessage/ValidationLink/ValidationLink.d.ts

@@ -0,0 +1,22 @@
+import { IressValidationMessageProps } from '../ValidationMessage';
+import { ReactNode } from 'react';
+/**
+ * @deprecated Use `IressValidationMessageProps<string>` instead.
+ */
+export interface IressValidationLinkProps extends IressValidationMessageProps<string> {
+    /**
+     * Validation content (what went wrong, what went right).
+     */
+    children?: ReactNode;
+    /**
+     * ID of element the message is describing. If nothing is supplied a link will not render.
+     */
+    linkToTarget: string;
+}
+/**
+ * @deprecated Use `IressValidationMessage` instead.
+ */
+export declare const IressValidationLink: {
+    ({ className, linkToTarget, ...props }: IressValidationLinkProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/ValidationMessage/ValidationLink/ValidationLink.js

@@ -1,19 +1,20 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { IressValidationMessage as r } from "../ValidationMessage.js";
 import { c as m } from "../../../cx-DN21T1EH.js";
 import { GlobalCSSClass as t } from "../../../enums.js";
-const c = ({
-  className: o,
-  linkToTarget: s,
-  ...a
-}) => /* @__PURE__ */ i(
+const l = ({
+  className: a,
+  linkToTarget: i,
+  ...s
+}) => /* @__PURE__ */ o(
   r,
   {
-    ...a,
-    className: m(o, t.ValidationLink),
-    linkToTarget: s
+    ...s,
+    className: m(a, t.ValidationLink),
+    linkToTarget: i
   }
 );
+l.displayName = "IressValidationLink";
 export {
-  c as IressValidationLink
+  l as IressValidationLink
 };

package/dist/components/ValidationMessage/ValidationMessage.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode, MouseEventHandler } from 'react';
+import { Statuses } from '../../types';
+import { IressTextProps } from '../Text';
+type ValidationElement<TLinkToTarget extends string | undefined = undefined> = TLinkToTarget extends string ? 'a' : 'div';
+type ValidationInstance<TLinkToTarget extends string | undefined = undefined> = TLinkToTarget extends string ? HTMLAnchorElement : HTMLDivElement;
+export type IressValidationMessageProps<TLinkToTarget extends string | undefined = undefined> = Omit<IressTextProps<ValidationElement<TLinkToTarget>>, 'prefix'> & {
+    /**
+     * Validation content (what went wrong, what went right).
+     */
+    children?: ReactNode;
+    /**
+     * ID of element the message is describing. If nothing is supplied a link will not render.
+     */
+    linkToTarget?: TLinkToTarget;
+    /**
+     * Emitted when the message is clicked.
+     */
+    onClick?: MouseEventHandler<ValidationInstance<TLinkToTarget>>;
+    /**
+     * Prefix to the validation message. Will be `status` prop if nothing is provided.
+     */
+    prefix?: ReactNode;
+    /**
+     * Whether message is danger, warning, success or info.
+     * **Note**: danger is translated to Error when used as the prefix.
+     * @default 'danger'
+     **/
+    status?: Statuses;
+    /**
+     * If set to true, the prefix will be visually displayed (default is only available to screen readers)
+     */
+    visiblePrefix?: boolean;
+};
+export declare const IressValidationMessage: {
+    <TLinkToTarget extends string | undefined = undefined>({ children, className, linkToTarget, prefix, status, visiblePrefix, ...restProps }: IressValidationMessageProps<TLinkToTarget>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/ValidationMessage/ValidationMessage.js

@@ -1,42 +1,50 @@
-import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
 import { capitalizeFirstLetter as f } from "../../helpers/formatting/capitalizeFirstLetter.js";
 import { c as p } from "../../cx-DN21T1EH.js";
 import { IressText as u } from "../Text/Text.js";
-import { s as l } from "../../factory-oPXoMw9H.js";
-import { GlobalCSSClass as x } from "../../enums.js";
-import { isValidFormInputElement as y } from "../../helpers/form/isValidFormInputElement.js";
+import { s as d } from "../../factory-CcYfm2kB.js";
+import { GlobalCSSClass as y } from "../../enums.js";
 const b = ({
-  prefix: r,
-  status: i = "danger"
-}) => r || `${i === "danger" ? "Error" : f(i)}: `, $ = ({
-  children: r,
-  className: i,
+  prefix: t,
+  status: s = "danger"
+}) => t || `${s === "danger" ? "Error" : f(s)}: `, x = (t) => t.tagName === "SELECT" && !t.disabled || !!t.name && !t.disabled && t.type !== "file" && t.type !== "reset" && t.type !== "submit" && t.type !== "button", v = ({
+  children: t,
+  className: s,
   linkToTarget: e,
   prefix: m,
-  status: o = "danger",
-  visiblePrefix: d = !1,
-  ...n
+  status: a = "danger",
+  visiblePrefix: l = !1,
+  ...o
 }) => /* @__PURE__ */ c(
   u,
   {
-    color: `colour.system.${o}.text`,
+    color: `colour.system.${a}.text`,
     display: "block",
-    ...n,
+    ...o,
     element: e ? "a" : "div",
     href: e ? `#${e}` : void 0,
-    onClick: (a) => {
-      if (n.onClick?.(a), !e)
+    onClick: (n) => {
+      if (o.onClick?.(n), !e)
         return;
-      const t = document.getElementById(e);
-      t && (a.preventDefault(), y(t) ? t.focus() : (t.setAttribute("tabIndex", "-1"), t.focus(), t.removeAttribute("tabIndex")));
+      const i = document.getElementById(e);
+      i && (n.preventDefault(), x(i) ? i.focus() : (i.setAttribute("tabIndex", "-1"), i.focus(), i.removeAttribute("tabIndex")));
     },
-    className: p(i, x.ValidationMessage),
+    className: p(s, y.ValidationMessage),
     children: [
-      /* @__PURE__ */ s(l.div, { srOnly: !d, display: "inline", pe: "spacing.1", children: /* @__PURE__ */ s(b, { prefix: m, status: o }) }),
-      /* @__PURE__ */ s(l.div, { display: "inline", children: r })
+      /* @__PURE__ */ r(
+        d.div,
+        {
+          srOnly: l ? void 0 : !0,
+          display: "inline",
+          pe: "spacing.1",
+          children: /* @__PURE__ */ r(b, { prefix: m, status: a })
+        }
+      ),
+      /* @__PURE__ */ r(d.div, { display: "inline", children: t })
     ]
   }
 );
+v.displayName = "IressValidationMessage";
 export {
-  $ as IressValidationMessage
+  v as IressValidationMessage
 };

package/dist/components/ValidationMessage/ValidationSummary/ValidationSummary.d.ts

@@ -0,0 +1,34 @@
+import { IressCustomiseSlot, ValidationMessageObj } from '../../../interfaces';
+import { IressStyledProps, Statuses } from '../../../types';
+import { ReactNode } from 'react';
+export interface IressValidationSummaryProps extends Omit<IressStyledProps<'ul'>, 'prefix'> {
+    /**
+     * ValidationMessage Array containing the `id` of the field and the validation message
+     **/
+    messages: ValidationMessageObj[];
+    /**
+     * Add additional styles to each item in the list.
+     */
+    itemStyle?: IressCustomiseSlot;
+    /**
+     * Renders validation messages as links pointing at the field it relates to, specified as a string
+     * Only works when used with the `messages` prop.
+     */
+    linkToTarget?: string;
+    /**
+     * Prefix to all validation messages. Will be `status` prop if nothing is provided.
+     */
+    prefix?: ReactNode;
+    /**
+     * Status for all child ValidationMessage components
+     */
+    status?: Statuses;
+    /**
+     * If set to true, the prefix will be visually displayed (default is only available to screen readers)
+     */
+    visiblePrefix?: boolean;
+}
+export declare const IressValidationSummary: {
+    ({ messages, linkToTarget, prefix, visiblePrefix, status, "data-testid": dataTestId, children, itemStyle, className, ...restProps }: IressValidationSummaryProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/dist/components/ValidationMessage/ValidationSummary/ValidationSummary.js

@@ -1,20 +1,20 @@
-import { jsxs as T, jsx as r } from "react/jsx-runtime";
+import { jsxs as T, jsx as a } from "react/jsx-runtime";
 import { propagateTestid as p } from "../../../helpers/utility/propagateTestid.js";
 import { IressValidationMessage as c } from "../ValidationMessage.js";
 import "react";
 import { useIdIfNeeded as g } from "../../../hooks/useIdIfNeeded.js";
-import { s as e } from "../../../factory-oPXoMw9H.js";
-import { c as S } from "../../../cx-DN21T1EH.js";
-import { GlobalCSSClass as h } from "../../../enums.js";
-const N = ({
+import { s as e } from "../../../factory-CcYfm2kB.js";
+import { c as y } from "../../../cx-DN21T1EH.js";
+import { GlobalCSSClass as S } from "../../../enums.js";
+const I = ({
   messages: o = [],
   linkToTarget: f,
   prefix: s,
   visiblePrefix: l,
-  status: n = "danger",
-  "data-testid": a,
+  status: d = "danger",
+  "data-testid": r,
   children: t,
-  itemStyle: d,
+  itemStyle: n,
   className: u,
   ...m
 }) => {
@@ -22,40 +22,40 @@ const N = ({
   return !o.length && !t ? null : /* @__PURE__ */ T(
     e.ul,
     {
-      "data-testid": a,
+      "data-testid": r,
       listStyle: "none",
       m: "spacing.0",
       p: "spacing.0",
       ...m,
-      className: S(u, h.ValidationSummary),
+      className: y(u, S.ValidationSummary),
       children: [
-        o.map((i) => /* @__PURE__ */ r(
+        o.map((i) => /* @__PURE__ */ a(
           e.li,
           {
             m: "spacing.0",
-            children: /* @__PURE__ */ r(
+            children: /* @__PURE__ */ a(
               c,
               {
                 linkToTarget: i.linkToTarget ?? f,
-                status: i.status ?? n,
+                status: i.status ?? d,
                 prefix: i.prefix ?? s,
                 visiblePrefix: i.visiblePrefix ?? l,
-                "data-testid": i.dataTestId ?? p(a, "error"),
-                ...d,
+                "data-testid": i.dataTestId ?? p(r, "error"),
+                ...n,
                 children: i.message
               }
             )
           },
           `${x}-${i.linkToTarget}-${i.message}`
         )),
-        t && /* @__PURE__ */ r(e.li, { m: "spacing.0", children: /* @__PURE__ */ r(
+        t && /* @__PURE__ */ a(e.li, { m: "spacing.0", children: /* @__PURE__ */ a(
           c,
           {
-            status: n,
+            status: d,
             prefix: s,
             visiblePrefix: l,
-            "data-testid": p(a, "error"),
-            ...d,
+            "data-testid": p(r, "error"),
+            ...n,
             children: t
           }
         ) })
@@ -63,6 +63,7 @@ const N = ({
     }
   );
 };
+I.displayName = "IressValidationSummary";
 export {
-  N as IressValidationSummary
+  I as IressValidationSummary
 };

package/dist/constants.d.ts

@@ -0,0 +1,144 @@
+/**
+ * Breakpoints are the points at which the layout of a page will change in response to the size of the viewport.
+ */
+export declare const BREAKPOINT_DETAILS: {
+    /**
+     * Extra small breakpoint, for mobile devices
+     */
+    xs: {
+        mediaQuery: string;
+        screenWidthRange: string;
+        margin: "spacing.4";
+        maxColumns: number;
+        minScreenWidth: string;
+        maxScreenWidth: string;
+        containerMaxWidth: string;
+        viewportWidth: number;
+    };
+    /**
+     * Small breakpoint, for larger mobile devices and tablets
+     */
+    sm: {
+        mediaQuery: string;
+        screenWidthRange: string;
+        margin: "spacing.4";
+        minScreenWidth: string;
+        maxScreenWidth: string;
+        containerMaxWidth: string;
+        viewportWidth: number;
+    };
+    /**
+     * Medium breakpoint for tablets and small desktops
+     */
+    md: {
+        mediaQuery: string;
+        screenWidthRange: string;
+        margin: "spacing.6";
+        maxColumns: number;
+        minScreenWidth: string;
+        maxScreenWidth: string;
+        containerMaxWidth: string;
+        viewportWidth: number;
+    };
+    /**
+     * Large breakpoint for desktops
+     */
+    lg: {
+        mediaQuery: string;
+        screenWidthRange: string;
+        margin: "spacing.6";
+        maxColumns: number;
+        minScreenWidth: string;
+        maxScreenWidth: string;
+        containerMaxWidth: string;
+        viewportWidth: number;
+    };
+    /**
+     * Extra large breakpoint for large desktops
+     */
+    xl: {
+        mediaQuery: string;
+        screenWidthRange: string;
+        margin: "spacing.8";
+        minScreenWidth: string;
+        maxScreenWidth: string;
+        containerMaxWidth: string;
+        viewportWidth: number;
+    };
+    /**
+     * Extra extra large breakpoint for extra large desktops (32inch)
+     */
+    xxl: {
+        mediaQuery: string;
+        margin: "spacing.8";
+        screenWidthRange: string;
+        minScreenWidth: string;
+        containerMaxWidth: string;
+        viewportWidth: number;
+    };
+};
+/**
+ * The breakpoints used in the design system.
+ */
+export declare const BREAKPOINTS: (keyof typeof BREAKPOINT_DETAILS)[];
+/**
+ * A CSS selector string that matches all focusable elements.
+ */
+export declare const FOCUSABLE_QUERY_SELECTOR = "button, a[href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])";
+/**
+ * The widths available for form elements.
+ */
+export declare const FORM_ELEMENT_WIDTHS: readonly ["2", "4", "6", "8", "10", "12", "16", "25%", "50%", "75%", "100%"];
+/**
+ * The grid size is the base unit of the grid system.
+ */
+export declare const GRID_SIZE = 12;
+/**
+ * The horizontal alignment options.
+ */
+export declare const HORIZONTAL_ALIGNS: readonly ["around", "between", "center", "evenly", "left", "right", "stretch"];
+/**
+ * The statuses available for various components.
+ */
+export declare const STATUSES: readonly ["danger", "info", "success", "warning"];
+/**
+ * The text alignment options.
+ */
+export declare const TEXT_ALIGNS: readonly ["inherit", "left", "center", "right", "justify"];
+/**
+ * The vertical alignment options.
+ */
+export declare const VERTICAL_ALIGNS: readonly ["top", "middle", "bottom", "stretch"];
+/**
+ * The z-index determines the stacking order of elements. Elements with a higher z-index always sit in front of elements with a lower z-index.
+ */
+export declare const Z_INDEX: {
+    /**
+     * The default z-index used for most elements.
+     */
+    DEFAULT: number;
+    /**
+     * Used for IressNavbar.
+     */
+    NAVBAR: number;
+    /**
+     * Used for IressPopover.
+     */
+    POPOVER: number;
+    /**
+     * Used for IressSlideout.
+     */
+    SLIDEOUT: number;
+    /**
+     * Used for IressModal.
+     */
+    MODAL: number;
+    /**
+     * Used for IressToast.
+     */
+    TOAST: number;
+    /**
+     * Used for IressTooltip.
+     */
+    TOOLTIP: number;
+};