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

package/dist/patterns/Loading/components/PageLoading.js

@@ -7,7 +7,7 @@ import "../../../components/Skeleton/Skeleton.styles.js";
 import "../../../components/Container/Container.styles.js";
 import { IressContainer as p } from "../../../components/Container/Container.js";
 import "../../../components/Row/Row.styles.js";
-import { IressRow as n } from "../../../components/Row/Row.js";
+import { IressRow as d } from "../../../components/Row/Row.js";
 import "../../../components/Col/Col.styles.js";
 import { IressCol as c } from "../../../components/Col/Col.js";
 import "../../../components/Inline/Inline.styles.js";
@@ -16,7 +16,7 @@ import { IressDivider as z } from "../../../components/Divider/Divider.js";
 import "../../../components/Divider/Divider.styles.js";
 import { IressCard as E } from "../../../components/Card/Card.js";
 import "../../../components/Card/Card.styles.js";
-import { s as x } from "../../../factory-oPXoMw9H.js";
+import { s as x } from "../../../factory-CcYfm2kB.js";
 import { loading as F } from "../Loading.styles.js";
 import { c as M } from "../../../cx-DN21T1EH.js";
 import { propagateTestid as S } from "../../../helpers/utility/propagateTestid.js";
@@ -28,86 +28,87 @@ const l = () => /* @__PURE__ */ t(c, { span: "4", children: /* @__PURE__ */ t(
     media: /* @__PURE__ */ t(e, { mode: "rect", height: "300px" }),
     children: /* @__PURE__ */ t(e, { textStyle: "typography.body.md", width: "50%" })
   }
-) }), O = () => /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t(n, { gutter: "lg", verticalAlign: "stretch", children: /* @__PURE__ */ t(c, { children: /* @__PURE__ */ r(m, { gap: "md", children: [
+) }), O = () => /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t(d, { gutter: "lg", verticalAlign: "stretch", children: /* @__PURE__ */ t(c, { children: /* @__PURE__ */ r(m, { gap: "md", children: [
   /* @__PURE__ */ t(e, { textStyle: "typography.heading.2", width: "75%" }),
   /* @__PURE__ */ t(e, { mode: "rect", height: "200px" })
-] }) }) }) }), R = () => /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t(n, { gutter: "lg", verticalAlign: "stretch", children: /* @__PURE__ */ t(c, { children: /* @__PURE__ */ r(m, { gap: "md", children: [
+] }) }) }) }), P = () => /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t(d, { gutter: "lg", verticalAlign: "stretch", children: /* @__PURE__ */ t(c, { children: /* @__PURE__ */ r(m, { gap: "md", children: [
   /* @__PURE__ */ t(e, { textStyle: "typography.heading.2", width: "75%" }),
   /* @__PURE__ */ t(e, { mode: "rect", height: "200px" }),
   /* @__PURE__ */ t(e, { textStyle: "typography.body.md", width: "100px" })
-] }) }) }) }), q = () => /* @__PURE__ */ t(p, { children: /* @__PURE__ */ r(m, { gap: "lg", children: [
-  /* @__PURE__ */ r(n, { horizontalAlign: "between", verticalAlign: "middle", children: [
+] }) }) }) }), R = () => /* @__PURE__ */ t(p, { children: /* @__PURE__ */ r(m, { gap: "lg", children: [
+  /* @__PURE__ */ r(d, { horizontalAlign: "between", verticalAlign: "middle", children: [
     /* @__PURE__ */ t(e, { textStyle: "typography.heading.1", width: "25%" }),
     /* @__PURE__ */ r(D, { gap: "lg", children: [
-      /* @__PURE__ */ t(e, { textStyle: "typography.body.lg", width: "200px" }),
-      /* @__PURE__ */ t(e, { textStyle: "typography.body.lg", width: "200px" })
+      /* @__PURE__ */ t(e, { textStyle: "typography.heading.4", width: "200px" }),
+      /* @__PURE__ */ t(e, { textStyle: "typography.heading.4", width: "200px" })
     ] })
   ] }),
   /* @__PURE__ */ t(z, {}),
-  /* @__PURE__ */ r(n, { gutter: "lg", children: [
+  /* @__PURE__ */ r(d, { gutter: "lg", children: [
     /* @__PURE__ */ t(l, {}),
     /* @__PURE__ */ t(l, {}),
     /* @__PURE__ */ t(l, {})
   ] })
 ] }) }), I = {
   page: O,
-  form: R,
-  dashboard: q
-}, nt = ({
+  form: P,
+  dashboard: R
+}, q = ({
   className: T,
   critical: s,
-  error: d,
+  error: a,
   loaded: v,
-  screenReaderText: b = "Loading...",
-  template: o = "page",
+  screenReaderText: C = "Loading...",
+  template: i = "page",
   timeout: g = 500,
-  ...a
+  ...n
 }) => {
-  const [C, k] = u(!1), A = v !== !0 && C, [y, L] = u(!1), f = !!s, h = F({
-    error: !!d,
+  const [b, k] = u(!1), A = v !== !0 && b, [y, L] = u(!1), f = !!s, h = F({
+    error: !!a,
     pattern: "page",
     showCritical: y,
     showIndicator: A && !f
   }), N = j(() => {
-    if (typeof o == "string" && o in I) {
-      const i = I[o];
-      return /* @__PURE__ */ t(i, {});
+    if (typeof i == "string" && i in I) {
+      const o = I[i];
+      return /* @__PURE__ */ t(o, {});
     }
-    return o;
-  }, [o]);
+    return i;
+  }, [i]);
   return w(() => {
-    const i = setTimeout(() => k(!0), g);
+    const o = setTimeout(() => k(!0), g);
     return () => {
-      clearTimeout(i);
+      clearTimeout(o);
     };
   }, [g]), w(() => {
     if (!s)
       return;
-    const i = setTimeout(() => L(!0), 200);
+    const o = setTimeout(() => L(!0), 200);
     return () => {
-      clearTimeout(i);
+      clearTimeout(o);
     };
-  }, [s]), /* @__PURE__ */ r(x.div, { className: M(T, h.root), ...a, children: [
-    d,
-    !d && !y && /* @__PURE__ */ t(
+  }, [s]), /* @__PURE__ */ r(x.div, { className: M(T, h.root), ...n, children: [
+    a,
+    !a && !y && /* @__PURE__ */ t(
       "div",
       {
         className: h.message,
-        "data-testid": S(a["data-testid"], "skeleton"),
+        "data-testid": S(n["data-testid"], "skeleton"),
         children: N
       }
     ),
-    !d && f && /* @__PURE__ */ t(
+    !a && f && /* @__PURE__ */ t(
       "div",
       {
         className: h.critical,
-        "data-testid": S(a["data-testid"], "critical"),
+        "data-testid": S(n["data-testid"], "critical"),
         children: s
       }
     ),
-    /* @__PURE__ */ t(x.div, { srOnly: !0, children: b })
+    /* @__PURE__ */ t(x.div, { srOnly: !0, children: C })
   ] });
 };
+q.displayName = "PageLoading";
 export {
-  nt as PageLoading
+  q as PageLoading
 };

package/dist/patterns/Loading/components/StartUpLoading.d.ts

@@ -0,0 +1,75 @@
+import { ReactNode } from 'react';
+import { IressProgressProps } from '../../../components/Progress';
+import { IressStyledProps } from '../../../types';
+export interface StartUpLoadingProps extends Omit<IressStyledProps, 'color'> {
+    /**
+     * Message to display when the loading time is longer than expected.
+     * @default 'One moment please...'
+     */
+    children?: ReactNode;
+    /**
+     * Estimated time in milliseconds for the loading to finish.
+     * @default 3000
+     */
+    estimatedFinishTime?: number;
+    /**
+     * If set to `true`, will start hiding the loading indicator. It is recommended to use this prop if you are using the `IressLoading.shouldRender` hook to achieve a smooth loading experience.
+     */
+    loaded?: boolean;
+    /**
+     * A message list to display while loading. The key is the time when you want the message to change to this message.
+     * If using a message list, the `children` will not be displayed.
+     */
+    messageList?: Record<number, ReactNode>;
+    /**
+     * Use `pattern="start-up"` for the following use cases:
+     * - Loading an application for the first time
+     * - Switching from a different application to a new application
+     * - Switching from a client's website to an Iress application
+     * - Switching themes
+     */
+    pattern?: 'start-up';
+    /**
+     * If provided, will use this to set the `value` of the progress bar. If not provided, will use the `estimatedFinishTime` to calculate the progress.
+     */
+    progress?: IressProgressProps<number | undefined>['value'];
+    /**
+     * This is a render prop that allows you to override the default progress rendering.
+     * This is useful if you want to use a different progress component or if you want to add additional props to the progress bar.
+     */
+    renderProgress?: (props: Pick<IressProgressProps<number | undefined>, 'min' | 'max' | 'sectionTitle' | 'value'>) => ReactNode;
+    /**
+     * Only screen readers will see this message, it is changed to the `children` message after the delay.
+     * @default 'Loading...'
+     */
+    screenReaderText?: ReactNode;
+    /**
+     * Set the start from timer, useful when stringing multiple loading patterns across different pages (eg. logging via a third-party authentication provider)
+     * @default 0
+     */
+    startFrom?: number;
+    /**
+     * Set the timeouts for showing the progress bar and message.
+     */
+    timeout?: {
+        /**
+         * The time in milliseconds before this component begins to fade out (if `loaded` is set to `true`).
+         * @default 200
+         */
+        loaded?: number;
+        /**
+         * The time in milliseconds before the message message is displayed.
+         * @default 2500
+         */
+        message?: number;
+        /**
+         * The time in milliseconds before the progress bar is displayed.
+         * @default 500
+         */
+        progress?: number;
+    };
+}
+export declare const StartUpLoading: {
+    ({ className, children, "data-testid": dataTestId, estimatedFinishTime, loaded, messageList, progress, renderProgress, screenReaderText, startFrom, timeout, ...restProps }: StartUpLoadingProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/patterns/Loading/components/StartUpLoading.js

@@ -1,4 +1,4 @@
-import { jsx as r, jsxs as N } from "react/jsx-runtime";
+import { jsx as r, jsxs as b } from "react/jsx-runtime";
 import "../../../components/Stack/Stack.styles.js";
 import { IressStack as j } from "../../../components/Stack/Stack.js";
 import { useState as v, useEffect as M, useRef as I, useMemo as T } from "react";
@@ -7,11 +7,11 @@ import "../../../components/Progress/Progress.styles.js";
 import { IressText as S } from "../../../components/Text/Text.js";
 import { propagateTestid as O } from "../../../helpers/utility/propagateTestid.js";
 import { useShowIndicator as E } from "../hooks/useShowIndicator.js";
-import { useEstimatedProgressValue as R } from "../hooks/useEstimatedProgressValue.js";
-import { loading as A } from "../Loading.styles.js";
-import { c as x } from "../../../css-fGu_jDvv.js";
-import { c as H } from "../../../cx-DN21T1EH.js";
-const L = ({
+import { useEstimatedProgressValue as L } from "../hooks/useEstimatedProgressValue.js";
+import { loading as R } from "../Loading.styles.js";
+import { c as x } from "../../../css-DVJ-ALYD.js";
+import { c as U } from "../../../cx-DN21T1EH.js";
+const A = ({
   children: l,
   messageList: o,
   progressValue: a,
@@ -19,63 +19,63 @@ const L = ({
   show: c,
   ...m
 }) => {
-  const s = I(null), n = T(() => {
+  const t = I(null), n = T(() => {
     const i = Object.keys(o ?? {}).filter(
-      (t) => Number(t) <= a
+      (s) => Number(s) <= a
     );
     return i[i.length - 1];
   }, [o, a]);
   return M(() => {
-    s.current && (s.current.classList.remove(
+    t.current && (t.current.classList.remove(
       x({ animationStyle: "loading-slide-next" })
-    ), s.current.offsetHeight, s.current.classList.add(
+    ), t.current.offsetHeight, t.current.classList.add(
       x({ animationStyle: "loading-slide-next" })
     ));
-  }, [n]), /* @__PURE__ */ r(S, { textAlign: "center", ...m, children: /* @__PURE__ */ r("div", { ref: s, children: n ? o?.[Number(n)] : c ? l : e }) });
-}, W = ({
+  }, [n]), /* @__PURE__ */ r(S, { textAlign: "center", ...m, children: /* @__PURE__ */ r("div", { ref: t, children: n ? o?.[Number(n)] : c ? l : e }) });
+}, H = ({
   className: l,
   children: o = /* @__PURE__ */ r(S, { color: "colour.neutral.70", children: "One moment please..." }),
   "data-testid": a,
   estimatedFinishTime: e = 3e3,
   loaded: c,
   messageList: m,
-  progress: s,
+  progress: t,
   renderProgress: n = (d) => /* @__PURE__ */ r(k, { ...d }),
-  screenReaderText: u = "Loading...",
+  screenReaderText: p = "Loading...",
   startFrom: i,
-  timeout: t,
-  ...p
+  timeout: s,
+  ...u
 }) => {
   const d = E(
     c,
-    t?.progress,
-    t?.loaded
-  ), [f, w] = v(!1), b = Math.max(...Object.keys(m ?? {}).map(Number)) + 500, g = R(
+    s?.progress,
+    s?.loaded
+  ), [f, w] = v(!1), y = Math.max(...Object.keys(m ?? {}).map(Number)) + 500, g = L(
     e,
     c,
-    s,
-    b
-  ), h = A({
+    t,
+    y
+  ), h = R({
     pattern: "start-up",
-    instant: t?.progress === 0,
+    instant: s?.progress === 0,
     showIndicator: d,
     showMessage: f
   });
   return M(() => {
-    const y = setTimeout(
+    const N = setTimeout(
       () => w(!0),
-      t?.message ?? 2500
+      s?.message ?? 2500
     );
     return () => {
-      clearTimeout(y);
+      clearTimeout(N);
     };
-  }, [t?.message]), /* @__PURE__ */ r(
+  }, [s?.message]), /* @__PURE__ */ r(
     "div",
     {
-      ...p,
-      className: H(h.root, l),
+      ...u,
+      className: U(h.root, l),
       "data-testid": a,
-      children: /* @__PURE__ */ N(j, { gap: "md", ...p, children: [
+      children: /* @__PURE__ */ b(j, { gap: "md", ...u, children: [
         n({
           min: i,
           max: e,
@@ -83,13 +83,13 @@ const L = ({
           sectionTitle: `${Math.min(g, e) / e * 100}% loaded`
         }),
         /* @__PURE__ */ r(
-          L,
+          A,
           {
             className: h.message,
             "data-testid": O(a, "message"),
             messageList: m,
             progressValue: g,
-            screenReaderText: u,
+            screenReaderText: p,
             show: f,
             children: o
           }
@@ -98,6 +98,7 @@ const L = ({
     }
   );
 };
+H.displayName = "StartUpLoading";
 export {
-  W as StartUpLoading
+  H as StartUpLoading
 };

package/dist/patterns/Loading/components/ValidateLoading.d.ts

@@ -0,0 +1,41 @@
+import { IressButtonProps } from '../../../components/Button';
+import { ReactNode } from 'react';
+import { IressStyledProps } from '../../../types';
+export interface ValidateLoadingProps extends IressStyledProps {
+    /**
+     * When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
+     */
+    loading?: IressButtonProps['loading'];
+    /**
+     * Set the message to be displayed when the button is in the loading state.
+     * @default 'This is taking longer than expected...'
+     */
+    message?: ReactNode;
+    /**
+     * Use `pattern="validate"` for the following use cases:
+     * - Submitting a form
+     * - Saving a record
+     */
+    pattern?: 'validate';
+    /**
+     * This sets where the loading message will be displayed.
+     * - `bottom` - The loading message will be displayed below the button. It will be absolute positioned.
+     * - `top` - The loading message will be displayed above the button. It will be absolute positioned.
+     * - `right` - The loading message will be displayed to the right of the button. It will be inline positioned.
+     */
+    position?: 'bottom' | 'top' | 'right';
+    /**
+     * This is a render prop that allows you to override the default button rendering.
+     * This is useful if you want to use a different button component or if you want to add additional props to the button.
+     */
+    renderButton?: (props: Pick<IressButtonProps, 'loading'>) => ReactNode;
+    /**
+     * The time in milliseconds before the loading message is displayed.
+     * @default 2500
+     */
+    timeout?: number;
+}
+export declare const ValidateLoading: {
+    ({ children, className, loading: loadingProp, message, pattern, position, renderButton, timeout, ...restProps }: ValidateLoadingProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+    displayName: string;
+};

package/dist/patterns/Loading/components/ValidateLoading.js

@@ -1,40 +1,41 @@
-import { jsx as o, jsxs as u } from "react/jsx-runtime";
-import { I as p } from "../../../Button-mmhMLwp9.js";
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import { I as u } from "../../../Button-C0p8bEXn.js";
 import "../../../components/Button/CloseButton/CloseButton.js";
-import { useState as h, useEffect as g } from "react";
+import { useState as g, useEffect as h } from "react";
 import { loading as x } from "../Loading.styles.js";
-import { s as v } from "../../../factory-oPXoMw9H.js";
-import { c as b } from "../../../cx-DN21T1EH.js";
-const k = ({
+import { s as v } from "../../../factory-CcYfm2kB.js";
+import { c as y } from "../../../cx-DN21T1EH.js";
+const b = ({
   children: m,
   className: n,
-  loading: t = !1,
-  message: c = "This is taking longer than expected...",
+  loading: e = !1,
+  message: l = "This is taking longer than expected...",
   // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Pattern is not used
-  pattern: y = "validate",
-  position: l = "bottom",
-  renderButton: r = (e) => /* @__PURE__ */ o(p, { ...e, type: "submit", children: "Submit" }),
+  pattern: N = "validate",
+  position: c = "bottom",
+  renderButton: a = (t) => /* @__PURE__ */ o(u, { ...t, type: "submit", children: "Submit" }),
   timeout: s = 2500,
-  ...f
+  ...d
 }) => {
-  const [e, a] = h(
-    s === 0 && !!t
-  ), i = x({ pattern: "validate", position: l, showMessage: e });
-  return g(() => {
-    if (!t) {
-      a(!1);
+  const [t, i] = g(
+    s === 0 && !!e
+  ), r = x({ pattern: "validate", position: c, showMessage: t });
+  return h(() => {
+    if (!e) {
+      i(!1);
       return;
     }
-    const d = setTimeout(() => {
-      a(!0);
+    const f = setTimeout(() => {
+      i(!0);
     }, s);
-    return () => clearTimeout(d);
-  }, [t, s]), e ? /* @__PURE__ */ u(v.div, { ...f, className: b(i.root, n), children: [
-    r({ loading: t }),
+    return () => clearTimeout(f);
+  }, [e, s]), t ? /* @__PURE__ */ p(v.div, { ...d, className: y(r.root, n), children: [
+    a({ loading: e }),
     m,
-    /* @__PURE__ */ o("div", { className: i.message, children: c })
-  ] }) : r({ loading: t });
+    /* @__PURE__ */ o("div", { className: r.message, children: l })
+  ] }) : a({ loading: e });
 };
+b.displayName = "ValidateLoading";
 export {
-  k as ValidateLoading
+  b as ValidateLoading
 };

package/dist/patterns/Loading/hooks/useEstimatedProgressValue.js

@@ -1,25 +1,20 @@
-import { useState as A, useMemo as E, useEffect as V } from "react";
-const l = (r, u = !1, n, t = 0) => {
-  const [o, w] = A(n ?? 0), c = E(() => !u && !n && a(o, r, t), [
-    r,
-    t,
-    u,
-    n,
-    o
-  ]);
-  return V(() => {
-    const q = performance.now(), f = () => {
-      const x = Math.max(performance.now() - q, 0), P = o + x;
-      w(P), a(P, r, t) && requestAnimationFrame(f);
+import { useState as s, useEffect as v } from "react";
+const i = (t, r = !1, n, o = 0) => {
+  const [u, l] = s(n ?? 0);
+  return v(() => {
+    if (r || n !== void 0)
+      return;
+    const m = performance.now(), p = 50;
+    let f = 0, a;
+    const c = () => {
+      const e = Math.max(performance.now() - m, 0);
+      e - f >= p && (l(e), f = e), A(e, t, o) && (a = requestAnimationFrame(c));
     };
-    requestAnimationFrame(f);
-  }, [
-    r,
-    c,
-    t,
-    o
-  ]), n !== void 0 ? u ? r : n : !c && o < r ? r : o;
-}, a = (r, u, n) => r < u || r < n;
+    return a = requestAnimationFrame(c), () => {
+      a && cancelAnimationFrame(a);
+    };
+  }, [t, r, o, n]), n !== void 0 ? r ? t : n : r || u >= t ? t : u;
+}, A = (t, r, n) => t < r || t < n;
 export {
-  l as useEstimatedProgressValue
+  i as useEstimatedProgressValue
 };

package/dist/patterns/Loading/hooks/useShouldRenderLoading.js

@@ -1,24 +1,30 @@
-import { useState as m, useRef as T, useEffect as f } from "react";
-const a = (e, o = 500, t = 250, c = 250) => {
-  const [i, r] = m(t === 0), n = T(0);
-  return f(() => {
+import { useState as m, useRef as T, useEffect as i } from "react";
+const l = (e, c = 500, n = 250, f = 250) => {
+  const [s, t] = m(!1), r = T(0);
+  return i(() => {
+    if (n === 0) {
+      const o = setTimeout(() => {
+        e || (t(!0), r.current = performance.now());
+      }, 0);
+      return () => clearTimeout(o);
+    }
     const u = setTimeout(() => {
-      e || (r(!0), n.current = performance.now());
-    }, t);
+      e || (t(!0), r.current = performance.now());
+    }, n);
     return () => clearTimeout(u);
-  }, [t, e]), f(() => {
+  }, [n, e]), i(() => {
     if (e !== !0)
       return;
     const u = setTimeout(() => {
-      (!n.current || performance.now() - n.current < c) && r(!1);
-    }, 0), s = setTimeout(() => {
-      r(!1);
-    }, o);
+      (!r.current || performance.now() - r.current < f) && t(!1);
+    }, 0), o = setTimeout(() => {
+      t(!1);
+    }, c);
     return () => {
-      clearTimeout(u), clearTimeout(s);
+      clearTimeout(u), clearTimeout(o);
     };
-  }, [e, o, c]), e !== !0 || i;
+  }, [e, c, f]), e !== !0 || s;
 };
 export {
-  a as useShouldRenderLoading
+  l as useShouldRenderLoading
 };

package/dist/patterns/Shadow/Shadow.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { IressUnstyledProps } from '../../types';
+export interface IressShadowProps extends IressUnstyledProps {
+    /**
+     * Children to be rendered inside the shadow DOM
+     */
+    children?: ReactNode;
+    /**
+     * Optional array of font URLs to be included in the parent document head.
+     * By default it will include the default fonts from `@iress-oss/ids-tokens`
+     * (e.g., ['https://fonts.googleapis.com/css?family=Roboto']
+     */
+    fontFaceUrls?: string[];
+    /**
+     * Optional array of stylesheet contents to be included in the shadow DOM
+     * (e.g. { styleId: '.my-class { color: red; }' })
+     */
+    stylesheetContents?: Record<string, string>;
+    /**
+     * Optional array of stylesheet URLs to be included in the shadow DOM
+     * (e.g., ['https://example.com/style.css'])
+     */
+    stylesheetUrls?: string[];
+}
+/**
+ * This component allows you to encapsulate its children within a Shadow DOM.
+ * It automatically includes the IDS CSS and allows for additional stylesheets
+ * and font faces to be added either to the shadow DOM or the parent document head.
+ */
+export declare const IressShadow: import('react').ForwardRefExoticComponent<IressShadowProps & import('react').RefAttributes<ShadowRoot | null>>;