@iress-oss/ids-components 5.20.2 → 6.0.0-alpha.1

package/README.md

@@ -21,4 +21,4 @@ The component library is part of the Iress Design System (IDS) monorepo. Please
 
 ## Support
 
-For support, please create an issue in this repository or contact the Design System team.
+For support, please reach out to us at our Slack channel.

package/dist/Autocomplete-CLvWVHp6.js

@@ -0,0 +1,358 @@
+import { jsx as t, jsxs as T, Fragment as at } from "react/jsx-runtime";
+import { c as A } from "./cx-DN21T1EH.js";
+import { autoComplete as It } from "./components/Autocomplete/Autocomplete.styles.js";
+import { IressPopover as St } from "./components/Popover/Popover.js";
+import "./components/Popover/Popover.styles.js";
+import { IressInputPopover as Ct } from "./components/Popover/InputPopover/InputPopover.js";
+import { forwardRef as ct, useState as j, useRef as st, useImperativeHandle as At, useEffect as rt, useCallback as bt } from "react";
+import "./components/Popover/hooks/usePopover.js";
+import { IressInput as yt } from "./components/Input/Input.js";
+import "./components/Input/Input.styles.js";
+import { useControlledState as Rt } from "./hooks/useControlledState.js";
+import { propagateTestid as nt } from "./helpers/utility/propagateTestid.js";
+import { toArray as Nt } from "./helpers/formatting/toArray.js";
+import { getValueAsEvent as wt } from "./helpers/form/getValueAsEvent.js";
+import { getFormControlValueAsStringIfDefined as xt } from "./helpers/form/getFormControlValueAsStringIfDefined.js";
+import { useAutocompleteSearch as lt } from "./components/Autocomplete/hooks/useAutocompleteSearch.js";
+import { IressIcon as Dt } from "./components/Icon/Icon.js";
+import { AutocompleteInstructions as Ft } from "./components/Autocomplete/components/AutocompleteInstructions.js";
+import { richSelect as Vt } from "./components/RichSelect/RichSelect.styles.js";
+import { useRichSelectState as Et } from "./components/RichSelect/hooks/useRichSelectState.js";
+import "./components/RichSelect/SelectBody/SelectBody.styles.js";
+import { GlobalCSSClass as it } from "./enums.js";
+import "./components/Menu/Menu.js";
+import "./components/Menu/Menu.styles.js";
+import "./components/Divider/Divider.styles.js";
+import "./components/Menu/MenuItem/MenuItem.js";
+import "./components/Icon/Icon.styles.js";
+import "./components/RichSelect/SelectHeading/SelectHeading.js";
+import "./components/RichSelect/SelectLabel/SelectLabel.styles.js";
+import "./components/RichSelect/SelectMenu/SelectMenu.styles.js";
+import "./components/RichSelect/SelectSearch/SelectSearch.styles.js";
+import "./components/RichSelect/SelectSearchInput/SelectSearchInput.js";
+import "./components/RichSelect/SelectTags/SelectTags.styles.js";
+import "./Button-D6AL0bia.js";
+import "./components/Button/CloseButton/CloseButton.js";
+import "./components/Tag/Tag.styles.js";
+import "./components/Tag/TagInput/TagInput.js";
+import "./components/Inline/Inline.styles.js";
+import "./components/Inline/Inline.js";
+import { IressSelectMenu as Pt } from "./components/RichSelect/SelectMenu/SelectMenu.js";
+import { IressReadonly as ut } from "./components/Readonly/Readonly.js";
+import "./components/Readonly/Readonly.styles.js";
+import { IressAlert as Qt } from "./components/Alert/Alert.js";
+import "./components/Alert/Alert.styles.js";
+import { SelectActivator as Tt } from "./components/RichSelect/components/SelectActivator.js";
+import { SelectOptions as jt } from "./components/RichSelect/components/SelectOptions.js";
+import { SelectHiddenInput as kt } from "./components/RichSelect/components/SelectHiddenInput.js";
+import { useNoDefaultValueInForms as qt } from "./patterns/Form/hooks/useNoDefaultValueInForms.js";
+const Ht = ({
+  align: b = "bottom-start",
+  append: k,
+  autoHighlight: q = !0,
+  className: H,
+  debounceThreshold: L,
+  defaultValue: y,
+  footer: d,
+  header: M,
+  id: B,
+  initialOptions: R,
+  matchActivatorWidth: N = !0,
+  minSearchLength: w,
+  multiSelect: f,
+  name: x,
+  onActivated: G,
+  onDeactivated: D,
+  onChange: F,
+  onBlur: h,
+  options: v,
+  placeholder: z,
+  prepend: J,
+  readOnly: K,
+  renderHiddenInput: u,
+  renderLabel: U,
+  renderOptions: W,
+  required: X,
+  selectedOptionsText: Y,
+  type: g,
+  value: a,
+  virtualFocus: l,
+  width: I,
+  ...m
+}, S) => {
+  qt({
+    component: "IressRichSelect",
+    defaultValue: y
+  });
+  const [r, p] = j(!1), [c, Z] = j(""), { value: o, setValue: V, getValuesString: E, getLabelsString: _ } = Et({
+    component: "IressRichSelect",
+    defaultValue: y,
+    multiple: f,
+    value: a
+  }), i = st(null), s = st(null), {
+    debouncedQuery: $,
+    error: P,
+    results: O,
+    stopSearch: C,
+    loading: e,
+    shouldShowInstructions: n,
+    shouldShowNoResults: mt
+  } = lt({
+    debounceThreshold: L,
+    initialOptions: R,
+    minSearchLength: w,
+    options: v,
+    query: c
+  });
+  At(S, () => i.current ? {
+    ...i.current,
+    focus: () => i.current?.getActivator()?.focus(),
+    blur: () => i.current?.getActivator()?.blur(),
+    hiddenInput: s.current ?? void 0,
+    input: s.current ?? null
+  } : {
+    hiddenInput: s.current ?? void 0,
+    input: s.current ?? null,
+    focus: () => s.current?.focus(),
+    blur: () => s.current?.blur()
+  }), rt(() => {
+    r ? G?.() : D?.();
+  }, [r]);
+  const pt = bt(
+    (Q) => {
+      if (!h) return;
+      const gt = Q.currentTarget, ot = Q.relatedTarget;
+      !r && (!ot || !gt.contains(ot)) && h(Q), Q.stopPropagation();
+    },
+    [h, r]
+  );
+  if (K)
+    return /* @__PURE__ */ t(ut, { value: E(), children: _(", ") });
+  const tt = typeof v == "function", dt = l ?? !tt, ft = g ?? (tt ? void 0 : "listbox"), et = Vt({ width: I }), ht = () => {
+    p(!0);
+  }, vt = () => {
+    p(!1), C();
+  };
+  return /* @__PURE__ */ T(at, { children: [
+    /* @__PURE__ */ t(
+      St,
+      {
+        ...m,
+        activator: /* @__PURE__ */ t(
+          Tt,
+          {
+            append: k,
+            async: tt,
+            error: P,
+            id: B,
+            loading: e,
+            multiSelect: f,
+            onChange: F,
+            placeholder: z,
+            prepend: J,
+            renderLabel: U,
+            selectedOptionsText: Y,
+            setValue: V,
+            setShow: p,
+            show: r,
+            value: o
+          }
+        ),
+        align: b,
+        className: A(H, et.richSelect, it.RichSelect),
+        contentClassName: A(et.popoverContent),
+        matchActivatorWidth: N,
+        onActivated: ht,
+        onDeactivated: vt,
+        ref: i,
+        show: r,
+        type: ft,
+        virtualFocus: dt,
+        onBlur: pt,
+        children: /* @__PURE__ */ T("div", { className: et.wrapper, children: [
+          M,
+          /* @__PURE__ */ t(
+            jt,
+            {
+              autoHighlight: q,
+              debouncedQuery: $,
+              error: P,
+              initialOptions: R,
+              loading: e,
+              minSearchLength: w,
+              multiSelect: f,
+              onChange: F,
+              options: v,
+              query: c,
+              renderOptions: W,
+              results: O,
+              setQuery: Z,
+              setShow: p,
+              setValue: V,
+              shouldShowInstructions: n,
+              shouldShowNoResults: mt,
+              show: r,
+              value: o
+            }
+          ),
+          d
+        ] })
+      }
+    ),
+    /* @__PURE__ */ t(
+      kt,
+      {
+        "data-testid": m["data-testid"],
+        getValuesString: E,
+        name: x,
+        renderHiddenInput: u,
+        required: X,
+        value: o,
+        ref: s
+      }
+    )
+  ] });
+}, Te = ct(Ht), Lt = ct(
+  ({
+    alwaysShowOnFocus: b,
+    append: k = /* @__PURE__ */ t(Dt, { name: "search" }),
+    autoComplete: q = "off",
+    autoSelect: H = !0,
+    className: L,
+    clearable: y = !0,
+    "data-testid": d,
+    debounceThreshold: M,
+    defaultValue: B,
+    errorText: R = /* @__PURE__ */ t(Qt, { status: "danger", mb: "none", children: "An unknown error occurred. Please contact support if the error persists." }),
+    initialOptions: N,
+    limitDesktop: w = 12,
+    limitMobile: f = 6,
+    minSearchLength: x,
+    noResultsText: G,
+    onChange: D,
+    onClear: F,
+    onFocus: h,
+    options: v,
+    popoverProps: {
+      autoHighlight: z = !1,
+      append: J,
+      prepend: K,
+      ...u
+    } = {},
+    readOnly: U,
+    value: W,
+    ...X
+  }, Y) => {
+    const [g, a] = j(!1), { value: l, setValue: I } = Rt({
+      component: "IressAutocomplete",
+      defaultValue: B,
+      value: W
+    }), [m, S] = j(!1), {
+      clearError: r,
+      debouncedQuery: p,
+      error: c,
+      loading: Z,
+      results: o,
+      stopSearch: V,
+      shouldShowInstructions: E,
+      shouldShowNoResults: _
+    } = lt({
+      debounceThreshold: M,
+      initialOptions: N,
+      minSearchLength: x,
+      options: v,
+      query: xt(l)
+    });
+    if (rt(() => {
+      m && !g && o.length > 0 && a(!0);
+    }, [o.length, g, m]), rt(() => {
+      c && a(!0);
+    }, [c]), U)
+      return /* @__PURE__ */ t(ut, { value: l });
+    const i = (e, n) => {
+      D?.(e, n), I(n), S(!0);
+    }, s = (e) => {
+      F?.(e), I("");
+    }, $ = (e) => {
+      h?.(e), N?.length && a(!0);
+    }, P = (e) => {
+      const n = Nt(e)?.[0];
+      D?.(
+        wt(n?.label),
+        n?.label,
+        n
+      ), I(n?.label), a(!1), S(!1);
+    }, O = () => {
+      (!b || !l) && V(), r(), a(!1), l && S(!1);
+    }, C = It({
+      isEmpty: o.length === 0
+    });
+    return /* @__PURE__ */ T(
+      Ct,
+      {
+        ...u,
+        activator: /* @__PURE__ */ t(
+          yt,
+          {
+            ...X,
+            append: k,
+            autoComplete: q,
+            clearable: y,
+            "data-testid": nt(d, "input"),
+            loading: Z,
+            onChange: i,
+            onClear: s,
+            onFocus: $,
+            value: l,
+            ref: Y
+          }
+        ),
+        autoHighlight: z,
+        className: A(
+          L,
+          u.className,
+          C.root,
+          it.Autocomplete
+        ),
+        contentClassName: A(
+          u.contentClassName,
+          C.popoverContent
+        ),
+        contentStyle: u.contentStyle,
+        "data-testid": d,
+        minLength: 0,
+        onActivated: () => (m || b) && a(!0),
+        onDeactivated: O,
+        show: g,
+        type: "listbox",
+        children: [
+          o.length > 0 && /* @__PURE__ */ T(at, { children: [
+            K,
+            /* @__PURE__ */ t(
+              Pt,
+              {
+                changeOnBlur: H,
+                className: A(C.optionList),
+                "data-testid": nt(d, "menu"),
+                items: o,
+                limitDesktop: w,
+                limitMobile: f,
+                onChange: P,
+                selected: { label: p }
+              }
+            ),
+            J
+          ] }),
+          c && R,
+          E && !c && /* @__PURE__ */ t(Ft, { minSearchLength: x ?? 1 }),
+          _ && !c && G
+        ]
+      }
+    );
+  }
+);
+Lt.displayName = "IressAutocomplete";
+export {
+  Te as I,
+  Lt as a
+};

package/dist/Button-D6AL0bia.js

@@ -0,0 +1,356 @@
+import { jsxs as M, Fragment as N, jsx as a } from "react/jsx-runtime";
+import { forwardRef as R, useId as E, useContext as W, useRef as k, useMemo as u, useCallback as A, useImperativeHandle as K } from "react";
+import { IressSpinner as O } from "./components/Spinner/Spinner.js";
+import "./components/Spinner/Spinner.styles.js";
+import { GlobalCSSClass as f } from "./enums.js";
+import "./components/ButtonGroup/ButtonGroup.styles.js";
+import { m as D, a as L, s as T, i as q, c as z } from "./css-fGu_jDvv.js";
+import { c as J } from "./cx-DN21T1EH.js";
+import { s as Q } from "./is-valid-prop-Ce0wiweq.js";
+import "./components/ButtonGroup/ButtonGroupProvider.js";
+import { useButtonGroupItem as U } from "./components/ButtonGroup/hooks/useButtonGroupItem.js";
+import { c as X } from "./create-recipe-C-ASk1Hy.js";
+import { PopoverContext as Y } from "./components/Popover/hooks/usePopover.js";
+const h = {}, Z = [
+  {
+    mode: "primary",
+    status: "danger",
+    css: {
+      root: {
+        color: "colour.system.danger.onFill",
+        _before: {
+          content: "''",
+          bg: "colour.system.danger.fill"
+        },
+        _after: {
+          content: "''",
+          bg: "colour.system.danger.fillHover"
+        },
+        _active: {
+          _after: {
+            boxShadow: "color-mix(in srgb, {colors.colour.system.danger.fill}, transparent 80%) 0px 0px 0px 3px"
+          }
+        }
+      },
+      spinner: {
+        color: "colour.system.danger.onFill"
+      }
+    }
+  },
+  {
+    mode: "secondary",
+    status: "danger",
+    css: {
+      root: {
+        color: "colour.system.danger.text",
+        _before: {
+          content: "''",
+          bg: "colour.system.danger.surface"
+        },
+        _after: {
+          content: "''",
+          bg: "colour.system.danger.surfaceHover"
+        },
+        _active: {
+          _after: {
+            boxShadow: "color-mix(in srgb, {colors.colour.system.danger.surface}, transparent 60%) 0px 0px 0px 3px"
+          }
+        }
+      },
+      spinner: {
+        color: "colour.system.danger.text"
+      }
+    }
+  },
+  {
+    mode: "tertiary",
+    status: "danger",
+    css: {
+      root: {
+        color: "colour.system.danger.text",
+        _after: {
+          content: "''",
+          bg: "colour.system.danger.surfaceHover"
+        },
+        _active: {
+          _after: {
+            boxShadow: "color-mix(in srgb, {colors.colour.system.danger.surface}, transparent 60%) 0px 0px 0px 3px"
+          }
+        }
+      },
+      spinner: {
+        color: "colour.system.danger.text"
+      }
+    }
+  },
+  {
+    mode: "primary",
+    status: "success",
+    css: {
+      root: {
+        color: "colour.system.success.onFill",
+        _before: {
+          content: "''",
+          bg: "colour.system.success.fill"
+        },
+        _after: {
+          content: "''",
+          bg: "colour.system.success.fillHover"
+        },
+        _active: {
+          _after: {
+            boxShadow: "color-mix(in srgb, {colors.colour.system.success.fill}, transparent 80%) 0px 0px 0px 3px"
+          }
+        }
+      },
+      spinner: {
+        color: "colour.system.success.onFill"
+      }
+    }
+  },
+  {
+    mode: "secondary",
+    status: "success",
+    css: {
+      root: {
+        color: "colour.system.success.text",
+        _before: {
+          content: "''",
+          bg: "colour.system.success.surface"
+        },
+        _after: {
+          content: "''",
+          bg: "colour.system.success.surfaceHover"
+        },
+        _active: {
+          _after: {
+            boxShadow: "color-mix(in srgb, {colors.colour.system.success.surface}, transparent 60%) 0px 0px 0px 3px"
+          }
+        }
+      },
+      spinner: {
+        color: "colour.system.success.text"
+      }
+    }
+  },
+  {
+    mode: "tertiary",
+    status: "success",
+    css: {
+      root: {
+        color: "colour.system.success.text",
+        _after: {
+          content: "''",
+          bg: "colour.system.success.surfaceHover"
+        },
+        _active: {
+          _after: {
+            boxShadow: "color-mix(in srgb, {colors.colour.system.success.surface}, transparent 60%) 0px 0px 0px 3px"
+          }
+        }
+      },
+      spinner: {
+        color: "colour.system.success.text"
+      }
+    }
+  },
+  {
+    mode: "primary",
+    loading: !0,
+    css: {
+      root: {
+        bg: "colour.primary.fill"
+      }
+    }
+  },
+  {
+    mode: "secondary",
+    loading: !0,
+    css: {
+      root: {
+        bg: "colour.primary.surface"
+      }
+    }
+  },
+  {
+    mode: "primary",
+    inButtonGroup: !0,
+    css: {
+      root: {
+        boxShadow: "none"
+      }
+    }
+  },
+  {
+    mode: "tertiary",
+    inButtonGroup: !0,
+    css: {
+      root: {
+        color: "colour.neutral.80",
+        _after: {
+          bg: "colour.primary.surfaceHover"
+        }
+      }
+    }
+  }
+], $ = [
+  [
+    "root",
+    "button__root"
+  ],
+  [
+    "prepend",
+    "button__prepend"
+  ],
+  [
+    "append",
+    "button__append"
+  ],
+  [
+    "spinner",
+    "button__spinner"
+  ]
+], oo = /* @__PURE__ */ $.map(([o, e]) => [o, X(e, h, q(Z, o))]), ro = D((o = {}) => Object.fromEntries(oo.map(([e, t]) => [e, t.recipeFn(o)]))), S = [
+  "active",
+  "fluid",
+  "inButtonGroup",
+  "loading",
+  "mode",
+  "noWrap",
+  "status"
+], to = (o) => ({ ...h, ...L(o) }), so = /* @__PURE__ */ Object.assign(ro, {
+  __recipe__: !1,
+  __name__: "button",
+  raw: (o) => o,
+  classNameMap: {},
+  variantKeys: S,
+  variantMap: {
+    active: [
+      "true"
+    ],
+    fluid: [
+      "true",
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl",
+      "xxl"
+    ],
+    inButtonGroup: [
+      "true"
+    ],
+    loading: [
+      "true"
+    ],
+    mode: [
+      "primary",
+      "secondary",
+      "tertiary"
+    ],
+    noWrap: [
+      "true"
+    ],
+    status: [
+      "success",
+      "danger"
+    ]
+  },
+  splitVariantProps(o) {
+    return T(o, S);
+  },
+  getVariantProps: to
+}), eo = ({
+  active: o,
+  append: e,
+  children: t,
+  className: d,
+  element: p,
+  fluid: x,
+  loading: r = !1,
+  mode: y = "secondary",
+  prepend: l,
+  noWrap: C = !1,
+  onClick: b,
+  status: F,
+  value: w,
+  ...g
+}, B) => {
+  const i = E(), I = w ?? (typeof t == "string" || typeof t == "number" || typeof t == "boolean" ? t : void 0), G = W(Y), m = k(null), n = U({ value: I }), H = u(() => n ? n.active ? "primary" : "tertiary" : y, [n, y]), s = so({
+    active: o ?? G?.isActiveActivator(m.current),
+    fluid: x === !0 ? "true" : x,
+    inButtonGroup: !!n,
+    mode: H,
+    loading: !!r,
+    noWrap: C,
+    status: F
+  }), [_, c] = u(
+    () => Q(g),
+    [g]
+  ), v = A(
+    (j) => {
+      r || (b?.(j), n?.toggle());
+    },
+    [n, r, b]
+  ), P = u(
+    () => ({
+      children: /* @__PURE__ */ M(N, { children: [
+        l && !r && /* @__PURE__ */ a("span", { className: s.prepend, children: l }),
+        !!r && /* @__PURE__ */ a(
+          O,
+          {
+            className: s.spinner,
+            fixedWidth: !0,
+            id: i,
+            screenreaderText: r === !0 ? "Loading" : r
+          }
+        ),
+        t,
+        e && /* @__PURE__ */ a("span", { className: s.append, children: e })
+      ] }),
+      className: J(
+        d,
+        f.FormElement,
+        f.FormElementInner,
+        s.root,
+        z(_),
+        f.Button
+      ),
+      onClick: v
+    }),
+    [
+      e,
+      t,
+      d,
+      v,
+      r,
+      l,
+      i,
+      _,
+      s.append,
+      s.prepend,
+      s.root,
+      s.spinner
+    ]
+  );
+  K(B, () => m.current);
+  const V = u(
+    () => p ?? (c.href ? "a" : "button"),
+    [p, c.href]
+  );
+  return /* @__PURE__ */ a(
+    V,
+    {
+      "aria-describedby": r ? i : void 0,
+      type: p || !c.href ? "button" : void 0,
+      ...P,
+      ...n?.props,
+      ...c,
+      ref: m
+    }
+  );
+}, _o = R(eo);
+export {
+  _o as I,
+  so as b
+};