@iress-oss/ids-components 0.0.1-dev.9 → 5.14.0

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

@@ -0,0 +1,132 @@
+import { jsx as c, jsxs as g } from "react/jsx-runtime";
+import { IressStack as w } from "../../../components/Stack/Stack.js";
+import { useMemo as f, useId as y } from "react";
+import { c as h } from "../../../index-2QXL0WYc.js";
+import { l as m } from "../../../Loading.module-nxv4vxd0.js";
+import { IressText as M } from "../../../components/Text/Text.js";
+import { IressPanel as S } from "../../../components/Panel/Panel.js";
+import { IressProgress as j } from "../../../components/Progress/Progress.js";
+import { GlobalCSSClass as L } from "../../../enums.js";
+import { propagateTestid as O } from "../../../helpers/utility/propagateTestid.js";
+import { useShowIndicator as C } from "../hooks/useShowIndicator.js";
+import { useEstimatedProgressValue as G } from "../hooks/useEstimatedProgressValue.js";
+const P = "ids-long-loading--root-v5140", V = "ids-long-loading--panel-v5140", B = "ids-long-loading--dots-v5140", E = "ids-long-loading--check-list-v5140", R = "ids-long-loading--check-list-item-v5140", T = "ids-long-loading--check-list-item__done-v5140", U = "ids-long-loading--checked-v5140", $ = "ids-long-loading--checked__circle-v5140", q = "ids-long-loading--checked__check-v5140", s = {
+  root: P,
+  panel: V,
+  dots: B,
+  checkList: E,
+  checkListItem: R,
+  checkListItem__done: T,
+  checked: U,
+  checked__circle: $,
+  checked__check: q
+}, z = () => {
+  const t = y();
+  return /* @__PURE__ */ g(
+    "svg",
+    {
+      className: s.checked,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 52 52",
+      "aria-labelledby": t,
+      children: [
+        /* @__PURE__ */ c("title", { id: t, children: "Finished: " }),
+        /* @__PURE__ */ c(
+          "circle",
+          {
+            className: s.checked__circle,
+            cx: "26",
+            cy: "26",
+            r: "25",
+            fill: "none"
+          }
+        ),
+        /* @__PURE__ */ c(
+          "path",
+          {
+            className: s.checked__check,
+            fill: "none",
+            d: "M14.1 27.2l7.1 7.2 16.7-16.8"
+          }
+        )
+      ]
+    }
+  );
+}, ce = ({
+  children: t,
+  className: v,
+  error: k,
+  estimatedFinishTime: r = 1e4,
+  loaded: d,
+  messageList: l = {},
+  progress: N,
+  renderProgress: u = (a) => /* @__PURE__ */ c(j, { ...a }),
+  timeout: n,
+  ...p
+}) => {
+  const a = C(
+    d,
+    n == null ? void 0 : n.message,
+    (n == null ? void 0 : n.loaded) ?? 1300
+  ), I = Math.max(...Object.keys(l).map(Number)) + 500, o = G(
+    r,
+    d,
+    N,
+    I
+  ), _ = f(() => {
+    const e = Object.keys(l), i = e.findIndex(
+      (x) => Number(x) > o
+    );
+    return d ? "" : e[i] ?? e[e.length - 1];
+  }, [l, d, o]), b = f(() => Object.entries(l).map(([e, i]) => ({
+    timecode: Number(e),
+    message: i,
+    current: e === _,
+    finished: o >= Number(e)
+  })), [l, _, o]);
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: h(s.root, v, m["fade-in"], {
+        [m["fade-in--active"]]: a
+      }),
+      ...p,
+      children: /* @__PURE__ */ c(
+        S,
+        {
+          "data-testid": O(p["data-testid"], "panel"),
+          className: h(s.panel, {
+            [m.error]: !!k
+          }),
+          children: k ?? /* @__PURE__ */ g(w, { gutter: "md", children: [
+            t,
+            u({
+              className: s.progress,
+              min: 0,
+              max: r,
+              value: Math.min(o, r),
+              sectionTitle: `${Math.min(o, r) / r * 100}% loaded`
+            }),
+            /* @__PURE__ */ c(M, { variant: "lead", noGutter: !0, children: /* @__PURE__ */ c("ul", { className: s.checkList, children: b.map((e) => /* @__PURE__ */ g(
+              "li",
+              {
+                className: h(s.checkListItem, {
+                  [s.checkListItem__done]: e.finished
+                }),
+                children: [
+                  e.finished && /* @__PURE__ */ c(z, {}),
+                  e.message,
+                  e.current && /* @__PURE__ */ c("span", { className: s.dots, children: /* @__PURE__ */ c("span", { className: L.SROnly, children: "..." }) })
+                ]
+              },
+              e.timecode
+            )) }) })
+          ] })
+        }
+      )
+    }
+  );
+};
+export {
+  ce as LongLoading
+};

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

@@ -0,0 +1,14 @@
+import "react/jsx-runtime";
+import "react";
+import "../../../components/Stack/Stack.js";
+import "../../../components/Skeleton/Skeleton.js";
+import "../../../components/Container/Container.js";
+import { ai as s } from "../../../LoadingSuspense-BDiikfSh.js";
+import "../../../components/Col/Col.js";
+import "../../../components/Divider/Divider.js";
+import "../../../components/Card/Card.js";
+import "../../../index-2QXL0WYc.js";
+import "../../../Loading.module-nxv4vxd0.js";
+export {
+  s as PageLoading
+};

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

@@ -0,0 +1,107 @@
+import { jsx as a, jsxs as w } from "react/jsx-runtime";
+import { IressStack as j } from "../../../components/Stack/Stack.js";
+import { useState as y, useEffect as u, useRef as I, useMemo as T } from "react";
+import { IressProgress as k } from "../../../components/Progress/Progress.js";
+import { c as M } from "../../../index-2QXL0WYc.js";
+import { l as n } from "../../../Loading.module-nxv4vxd0.js";
+import { IressText as v } 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";
+const H = "ids-start-up-loading--root-v5140", P = "ids-start-up-loading--progress-v5140", h = {
+  root: H,
+  progress: P
+}, U = ({
+  children: g,
+  messageList: e,
+  progressValue: c,
+  screenReaderText: s,
+  show: t,
+  ...l
+}) => {
+  const o = I(null), d = T(() => {
+    const r = Object.keys(e ?? {}).filter(
+      (f) => Number(f) <= c
+    );
+    return r[r.length - 1];
+  }, [e, c]);
+  u(() => {
+    o.current && (o.current.classList.remove(n["slide-next"]), o.current.offsetHeight, o.current.classList.add(n["slide-next"]));
+  }, [d]);
+  const p = t ? g : s;
+  return /* @__PURE__ */ a(
+    v,
+    {
+      align: "center",
+      className: M(h.message, n["fade-in"], {
+        [n["fade-in--active"]]: t
+      }),
+      ...l,
+      children: /* @__PURE__ */ a("div", { ref: o, children: d ? e == null ? void 0 : e[Number(d)] : p })
+    }
+  );
+}, K = ({
+  className: g,
+  children: e = /* @__PURE__ */ a(v, { mode: "muted", children: "One moment please..." }),
+  "data-testid": c,
+  estimatedFinishTime: s = 3e3,
+  loaded: t,
+  messageList: l,
+  progress: o,
+  renderProgress: d = (m) => /* @__PURE__ */ a(k, { ...m }),
+  screenReaderText: p = "Loading...",
+  timeout: r,
+  ...f
+}) => {
+  const m = E(
+    t,
+    r == null ? void 0 : r.progress,
+    r == null ? void 0 : r.loaded
+  ), [x, N] = y(!1), S = Math.max(...Object.keys(l ?? {}).map(Number)) + 500, i = R(
+    s,
+    t,
+    o,
+    S
+  );
+  return u(() => {
+    const b = setTimeout(
+      () => N(!0),
+      (r == null ? void 0 : r.message) ?? 2500
+    );
+    return () => {
+      clearTimeout(b);
+    };
+  }, [r == null ? void 0 : r.message]), /* @__PURE__ */ a(
+    "div",
+    {
+      "data-testid": c,
+      className: M(h.root, g, n["fade-in"], {
+        [n["fade-in--active"]]: m
+      }),
+      ...f,
+      children: /* @__PURE__ */ w(j, { gutter: "md", ...f, children: [
+        d({
+          className: h.progress,
+          min: 0,
+          max: s,
+          value: Math.min(i, s),
+          sectionTitle: `${Math.min(i, s) / s * 100}% loaded`
+        }),
+        /* @__PURE__ */ a(
+          U,
+          {
+            "data-testid": O(c, "message"),
+            messageList: l,
+            progressValue: i,
+            screenReaderText: p,
+            show: x,
+            children: e
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  K as StartUpLoading
+};

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

@@ -0,0 +1,9 @@
+import "react/jsx-runtime";
+import { ag as d } from "../../../LoadingSuspense-BDiikfSh.js";
+import "../../../index-2QXL0WYc.js";
+import "react";
+import "../../../components/Text/Text.js";
+import "../../../Loading.module-nxv4vxd0.js";
+export {
+  d as ValidateLoading
+};

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

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

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

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

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

@@ -0,0 +1,20 @@
+import { useState as c, useEffect as s } from "react";
+const m = (e = !1, o = 500, r = 200) => {
+  const [n, u] = c(!1);
+  return s(() => {
+    if (e !== !0)
+      return;
+    const t = setTimeout(() => u(!1), r);
+    return () => {
+      clearTimeout(t);
+    };
+  }, [e, r]), s(() => {
+    const t = setTimeout(() => u(!0), o);
+    return () => {
+      clearTimeout(t);
+    };
+  }, [o]), n;
+};
+export {
+  m as useShowIndicator
+};

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

@@ -0,0 +1,27 @@
+import { useMemo as c } from "react";
+const a = (e) => {
+  let r = "pending", n, o;
+  const u = e.then(
+    (t) => {
+      r = "success", n = t;
+    },
+    (t) => {
+      r = "error", o = t;
+    }
+  );
+  return {
+    read() {
+      if (r === "pending") throw u;
+      if (r === "error") throw o;
+      return n;
+    }
+  };
+}, s = /* @__PURE__ */ new WeakMap(), d = (e) => c(() => (s.has(e) || s.set(e, a(e())), s.get(e)), [e]).read(), i = (e, r = 1e3) => {
+  setTimeout(() => {
+    s.delete(e);
+  }, r);
+};
+export {
+  i as uncacheSuspenseResource,
+  d as useSuspenseResource
+};

package/dist/patterns/Loading/index.js

@@ -0,0 +1,5 @@
+import { Q as a, R as o } from "../../LoadingSuspense-BDiikfSh.js";
+export {
+  a as IressLoading,
+  o as IressLoadingSuspense
+};

package/dist/src/components/Alert/Alert.d.ts

@@ -0,0 +1,9 @@
+import { IressAlertProps } from './Alert.types';
+import { HeadingLevel, SystemValidationStatus } from '../../enums';
+export declare const IressAlert: {
+    ({ children, className, footer, heading, headingLevel, headingText, status, ...restProps }: IressAlertProps): import("react/jsx-runtime").JSX.Element;
+    /** @deprecated IressAlert.HeadingLevel enum is now deprecated and will be removed in a future version. Please use the HeadingLevels type instead. **/
+    HeadingLevel: typeof HeadingLevel;
+    /** @deprecated IressAlert.Status enum is now deprecated and will be removed in a future version. Please use the SystemValidationStatuses type instead. **/
+    Status: typeof SystemValidationStatus;
+};

package/dist/src/components/Alert/Alert.types.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+import { HeadingLevel, SystemValidationStatus } from '../../enums';
+import { IressHTMLAttributes } from '../../interfaces';
+import { HeadingLevels, SystemValidationStatuses } from '../../types';
+export interface IressAlertProps extends IressHTMLAttributes {
+    /**
+     * Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+     **/
+    children?: ReactNode;
+    /**
+     * Buttons and controls for the alert.
+     **/
+    footer?: ReactNode;
+    /**
+     * Text for alert heading. If a string, it will use a heading with level 2.
+     **/
+    heading?: ReactNode;
+    /**
+     * Text for alert heading. If not supplied, heading will not be displayed.
+     * @deprecated Use `heading` instead.
+     **/
+    headingText?: string;
+    /**
+     * Heading level for the alert heading.
+     * @default h2
+     * @deprecated Use `heading` instead.
+     **/
+    headingLevel?: HeadingLevel | HeadingLevels;
+    /**
+     * Alert type - danger, info, success or warning.
+     * @default info
+     */
+    status?: SystemValidationStatus | SystemValidationStatuses;
+}
+export interface AlertWithEnums extends React.FC<IressAlertProps> {
+    /** @deprecated IressAlert.HeadingLevel enum is now deprecated and will be removed in a future version. Please use the HeadingLevels type instead. */
+    HeadingLevel: typeof HeadingLevel;
+    /** @deprecated IressAlert.Status enum is now deprecated and will be removed in a future version. Please use the SystemValidationStatuses type instead. */
+    Status: typeof SystemValidationStatus;
+}
+export declare const ALERT_ICONS: Record<SystemValidationStatuses, string>;

package/dist/src/components/Alert/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Alert.types';
+export * from './Alert';

package/dist/src/components/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,3 @@
+import { IressAutocompleteProps } from './Autocomplete.types';
+import { InputRef } from '../Input/InputBase/InputBase.types';
+export declare const IressAutocomplete: import('react').ForwardRefExoticComponent<IressAutocompleteProps<string> & import('react').RefAttributes<InputRef>>;

package/dist/src/components/Autocomplete/Autocomplete.types.d.ts

@@ -0,0 +1,106 @@
+import { FormattedLabelValueMeta, LabelValueMeta } from '../../interfaces';
+import { InputBaseElement, IressInputProps } from '../Input';
+import { FormControlValue, IressInputPopoverProps, IressSelectMenuProps } from '../../main';
+import { ReactNode, SyntheticEvent } from 'react';
+export interface IressAutocompleteProps<T extends FormControlValue = string> extends Omit<IressInputProps<T>, 'children' | 'onChange'>, Omit<AutocompleteSearchHookProps, 'query'>, Pick<IressSelectMenuProps, 'limitMobile' | 'limitDesktop'> {
+    /**
+     * Always shown on focus, even if the user has not interacted with the input.
+     */
+    alwaysShowOnFocus?: boolean;
+    /**
+     * Append content.
+     * @default <IressIcon name="search" />
+     */
+    append?: ReactNode;
+    /**
+     * If true, the selected option becomes the value of the input when the autocomplete loses focus.
+     * @default true
+     */
+    autoSelect?: boolean;
+    /**
+     * If `true`, then user can clear the value of the input.
+     * @default true
+     */
+    clearable?: boolean;
+    /**
+     * Text to be displayed when the options function errors out. It is not used when the options are provided as an array.
+     * @default <IressAlert status="danger">An unknown error occurred. Please contact support if the error persists.</IressAlert>
+     */
+    errorText?: ReactNode;
+    /**
+     * Text to be displayed when no results are found.
+     */
+    noResultsText?: ReactNode;
+    /**
+     * Emitted when the user changes the input.
+     * The second and third arguments are only available when the options were selected from the `options` prop.
+     */
+    onChange?: (e?: SyntheticEvent<InputBaseElement>, value?: T, option?: LabelValueMeta) => void;
+    /**
+     * Customise the IressInputPopover props for your needs.
+     */
+    popoverProps?: AutocompletePopoverProps;
+    /**
+     * When set to `true` add ons will render with a different style. Will be ignored if `prepend` or `append` slots are not being used.
+     * @default true
+     */
+    watermark?: boolean;
+}
+export interface AutocompleteSearchHookProps {
+    /**
+     * Time in milliseconds to wait for before performing result search. Only applies to searchable options (function).
+     * @default 500
+     */
+    debounceThreshold?: number;
+    /**
+     * Initial options data set, shown when the input is empty.
+     */
+    initialOptions?: LabelValueMeta[];
+    /**
+     * Options data set, shown when the input is not empty.
+     */
+    options?: LabelValueMeta[] | ((query: string) => Promise<LabelValueMeta[]>);
+    /**
+     * The query value to filter items by and create search results.
+     */
+    query?: string;
+}
+export interface AutocompleteSearchHookReturn {
+    /**
+     * Clear the error state.
+     */
+    clearError: () => void;
+    /**
+     * The debounced query value.
+     */
+    debouncedQuery: string;
+    /**
+     * Whether an error occurred during the search.
+     * If a string, it is the error reason provided in the promise rejection.
+     */
+    error: boolean | string;
+    /**
+     * Whether the search is loading.
+     */
+    loading: boolean;
+    /**
+     * The results of the search.
+     */
+    results: FormattedLabelValueMeta[];
+    /**
+     * Stop the search.
+     */
+    stopSearch: () => void;
+}
+export interface AutocompletePopoverProps extends Pick<IressInputPopoverProps, 'autoHighlight' | 'align' | 'className' | 'container' | 'contentClassName' | 'displayMode' | 'style'> {
+    append?: ReactNode;
+    prepend?: ReactNode;
+}
+export interface AutocompleteNoResultsProps extends Pick<IressAutocompleteProps, 'noResultsText'> {
+    /**
+     * Pass a CSS module object to override styles.
+     */
+    styles: {
+        noResults?: string;
+    };
+}

package/dist/src/components/Autocomplete/components/AutocompleteNoResults.d.ts

@@ -0,0 +1,2 @@
+import { AutocompleteNoResultsProps } from '../Autocomplete.types';
+export declare const AutocompleteNoResults: ({ noResultsText, styles, }: AutocompleteNoResultsProps) => number | boolean | Iterable<import('react').ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/src/components/Autocomplete/hooks/useAutocompleteFlags.d.ts

@@ -0,0 +1,5 @@
+import { AutocompleteSearchHookReturn, IressAutocompleteProps } from '../../../main';
+export declare const useAutocompleteFlags: ({ debouncedQuery, loading, results, value, }: Omit<AutocompleteSearchHookReturn, "clearError" | "error" | "stopSearch"> & Pick<IressAutocompleteProps, "value">) => {
+    showResults: boolean;
+    showNoResults: string | false | undefined;
+};

package/dist/src/components/Autocomplete/hooks/useAutocompleteSearch.d.ts

@@ -0,0 +1,2 @@
+import { AutocompleteSearchHookProps, AutocompleteSearchHookReturn } from '../Autocomplete.types';
+export declare const useAutocompleteSearch: ({ debounceThreshold, initialOptions, options, query, }: AutocompleteSearchHookProps) => AutocompleteSearchHookReturn;

package/dist/src/components/Autocomplete/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Autocomplete.types';
+export * from './Autocomplete';
+export * from './hooks/useAutocompleteSearch';

package/dist/src/components/Badge/Badge.d.ts

@@ -0,0 +1,2 @@
+import { BadgeWithEnums } from './Badge.types';
+export declare const IressBadge: BadgeWithEnums;

package/dist/src/components/Badge/Badge.types.d.ts

@@ -0,0 +1,37 @@
+import { ReactElement, ReactNode } from 'react';
+import { IressHTMLAttributes } from '../../interfaces';
+export interface IressBadgeProps extends IressHTMLAttributes<HTMLDivElement> {
+    /**
+     * Content of the badge.
+     */
+    children?: ReactNode;
+    /**
+     * Element to attach the badge to.
+     */
+    host?: ReactElement;
+    /**
+     * Style of the badge.
+     */
+    mode?: BadgeMode | BadgeModes;
+    /**
+     * Whether the Badge should be styled as a pill.
+     */
+    pill?: boolean;
+}
+export interface BadgeWithEnums extends React.FC<IressBadgeProps> {
+    /** @deprecated IressBadge.Mode is now deprecated and will be removed in a future version. Please use the BadgeModes type instead. */
+    Mode: typeof BadgeMode;
+}
+/** @deprecated BadgeMode enum is now deprecated and will be removed in a future version. Please use the BadgeModes type instead. */
+export declare enum BadgeMode {
+    Success = "success",
+    Warning = "warning",
+    Danger = "danger",
+    Info = "info",
+    Positive = "positive",
+    Negative = "negative",
+    BackgroundAlt = "background-alt",
+    BackgroundDefault = "background-default"
+}
+export declare const BADGE_MODES: readonly ["success", "warning", "danger", "info", "positive", "negative", "background-alt", "background-default"];
+export type BadgeModes = (typeof BADGE_MODES)[number];

package/dist/src/components/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export { IressBadge } from './Badge';
+export * from './Badge.types';

package/dist/src/components/Button/Button.d.ts

@@ -0,0 +1,2 @@
+import { ButtonComponent } from './Button.types';
+export declare const IressButton: ButtonComponent;