@iress-oss/ids-components 6.0.0-alpha.0 → 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 reach out to us at our [help desk](https://iress-wealth.atlassian.net/servicedesk/customer/portal/5/group/5/create/11).
+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-BXzmntRi.js → Button-D6AL0bia.js}

@@ -1,17 +1,17 @@
-import { jsxs as R, Fragment as E, jsx as u } from "react/jsx-runtime";
-import { forwardRef as M, useId as N, useContext as W, useRef as A, useMemo as l, useCallback as K, useImperativeHandle as O } from "react";
-import { IressSpinner as D } from "./components/Spinner/Spinner.js";
+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 x } from "./enums.js";
+import { GlobalCSSClass as f } from "./enums.js";
 import "./components/ButtonGroup/ButtonGroup.styles.js";
-import { m as L, b as T, s as q, j as z, c as J } from "./cva-B2x59Dph.js";
-import { c as Q } from "./cx-DN21T1EH.js";
-import { s as U } from "./is-valid-prop-DFFvE05x.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 X } from "./components/ButtonGroup/hooks/useButtonGroupItem.js";
-import { c as Y } from "./create-recipe-BqEnhJ30.js";
-import { PopoverContext as Z } from "./components/Popover/hooks/usePopover.js";
-const F = {}, $ = [
+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",
@@ -193,7 +193,7 @@ const F = {}, $ = [
       }
     }
   }
-], k = [
+], $ = [
   [
     "root",
     "button__root"
@@ -210,7 +210,7 @@ const F = {}, $ = [
     "spinner",
     "button__spinner"
   ]
-], oo = /* @__PURE__ */ k.map(([o, n]) => [o, Y(n, F, z($, o))]), ro = L((o = {}) => Object.fromEntries(oo.map(([n, t]) => [n, t.recipeFn(o)]))), h = [
+], 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",
@@ -218,11 +218,12 @@ const F = {}, $ = [
   "mode",
   "noWrap",
   "status"
-], so = (o) => ({ ...F, ...T(o) }), to = /* @__PURE__ */ Object.assign(ro, {
+], to = (o) => ({ ...h, ...L(o) }), so = /* @__PURE__ */ Object.assign(ro, {
   __recipe__: !1,
   __name__: "button",
   raw: (o) => o,
-  variantKeys: h,
+  classNameMap: {},
+  variantKeys: S,
   variantMap: {
     active: [
       "true"
@@ -256,100 +257,100 @@ const F = {}, $ = [
     ]
   },
   splitVariantProps(o) {
-    return q(o, h);
+    return T(o, S);
   },
-  getVariantProps: so
+  getVariantProps: to
 }), eo = ({
   active: o,
-  append: n,
+  append: e,
   children: t,
-  className: y,
+  className: d,
   element: p,
-  fluid: b,
-  loading: s = !1,
-  mode: g = "secondary",
-  prepend: i,
-  noWrap: w = !1,
-  onClick: c,
-  status: B,
-  value: H,
-  ..._
-}, P) => {
-  const m = N(), C = H ?? (typeof t == "string" || typeof t == "number" || typeof t == "boolean" ? t : void 0), f = W(Z), d = A(null), r = X({ value: C }), V = l(() => r ? r.active ? "primary" : "tertiary" : g, [r, g]), e = to({
-    active: o ?? (f == null ? void 0 : f.isActiveActivator(d.current)),
-    fluid: b === !0 ? "true" : b,
-    inButtonGroup: !!r,
-    mode: V,
-    loading: !!s,
-    noWrap: w,
-    status: B
-  }), [v, a] = l(
-    () => U(_),
-    [_]
-  ), S = K(
-    (G) => {
-      s || (c == null || c(G), r == null || r.toggle());
+  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());
     },
-    [r, s, c]
-  ), j = l(
+    [n, r, b]
+  ), P = u(
     () => ({
-      children: /* @__PURE__ */ R(E, { children: [
-        i && !s && /* @__PURE__ */ u("span", { className: e.prepend, children: i }),
-        !!s && /* @__PURE__ */ u(
-          D,
+      children: /* @__PURE__ */ M(N, { children: [
+        l && !r && /* @__PURE__ */ a("span", { className: s.prepend, children: l }),
+        !!r && /* @__PURE__ */ a(
+          O,
           {
-            className: e.spinner,
+            className: s.spinner,
             fixedWidth: !0,
-            id: m,
-            screenreaderText: s === !0 ? "Loading" : s
+            id: i,
+            screenreaderText: r === !0 ? "Loading" : r
           }
         ),
         t,
-        n && /* @__PURE__ */ u("span", { className: e.append, children: n })
+        e && /* @__PURE__ */ a("span", { className: s.append, children: e })
       ] }),
-      className: Q(
-        y,
-        x.FormElement,
-        x.FormElementInner,
-        e.root,
-        J(v),
-        x.Button
+      className: J(
+        d,
+        f.FormElement,
+        f.FormElementInner,
+        s.root,
+        z(_),
+        f.Button
       ),
-      onClick: S
+      onClick: v
     }),
     [
-      n,
+      e,
       t,
-      y,
-      S,
-      s,
-      i,
-      m,
+      d,
       v,
-      e.append,
-      e.prepend,
-      e.root,
-      e.spinner
+      r,
+      l,
+      i,
+      _,
+      s.append,
+      s.prepend,
+      s.root,
+      s.spinner
     ]
   );
-  O(P, () => d.current);
-  const I = l(
-    () => p ?? (a.href ? "a" : "button"),
-    [p, a.href]
+  K(B, () => m.current);
+  const V = u(
+    () => p ?? (c.href ? "a" : "button"),
+    [p, c.href]
   );
-  return /* @__PURE__ */ u(
-    I,
+  return /* @__PURE__ */ a(
+    V,
     {
-      "aria-describedby": s ? m : void 0,
-      type: p || !a.href ? "button" : void 0,
-      ...j,
-      ...r == null ? void 0 : r.props,
-      ...a,
-      ref: d
+      "aria-describedby": r ? i : void 0,
+      type: p || !c.href ? "button" : void 0,
+      ...P,
+      ...n?.props,
+      ...c,
+      ref: m
     }
   );
-}, _o = M(eo);
+}, _o = R(eo);
 export {
   _o as I,
-  to as b
+  so as b
 };

package/dist/Provider-BXQiO7Gp.js

@@ -0,0 +1,64 @@
+import { jsxs as $, jsx as t } from "react/jsx-runtime";
+import "./components/Modal/Modal.styles.js";
+import "react";
+import "./Button-D6AL0bia.js";
+import "./components/Button/CloseButton/CloseButton.js";
+import "./components/Modal/hooks/useModal.js";
+import { IressModalProvider as a } from "./components/Modal/ModalProvider.js";
+import { IressToasterProvider as m } from "./components/Toaster/ToasterProvider.js";
+import "./components/Toaster/hooks/useToaster.js";
+import "./components/Toaster/Toaster.styles.js";
+import "./components/Toaster/components/Toast/Toast.styles.js";
+import "./components/Slideout/Slideout.styles.js";
+import "./index-CvOVcYUc.js";
+import "./components/Slideout/hooks/useSlideout.js";
+import { IressSlideoutProvider as d } from "./components/Slideout/SlideoutProvider.js";
+import { createPortal as y } from "react-dom";
+var o = /* @__PURE__ */ ((e) => (e.Color = "color", e.Dimension = "dimension", e.FontFamily = "fontFamily", e.FontSize = "fontSize", e.Background = "background", e.Border = "border", e.Radius = "radius", e.Shadow = "shadow", e.Typography = "typography", e))(o || {});
+o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color;
+o.Shadow, o.Border, o.Shadow, o.Border, o.Shadow, o.Border, o.Shadow, o.Shadow, o.Color;
+o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Radius, o.Radius, o.Radius, o.Radius;
+o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension;
+const h = [
+  "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
+];
+o.FontSize, o.FontFamily, o.FontFamily, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography;
+const z = ({
+  children: e,
+  container: r,
+  noDefaultFont: i,
+  noIcons: s,
+  position: l,
+  ...n
+}) => /* @__PURE__ */ $(a, { container: r, children: [
+  /* @__PURE__ */ t(m, { container: r, position: l, children: /* @__PURE__ */ t(d, { container: r, ...n, children: e }) }),
+  !i && y(
+    h.map((p) => /* @__PURE__ */ t(
+      "link",
+      {
+        rel: "stylesheet",
+        href: p,
+        "data-iress-design-system-font": !0
+      },
+      p
+    )),
+    document.head,
+    "design-system-font"
+  ),
+  !s && y(
+    /* @__PURE__ */ t(
+      "link",
+      {
+        rel: "stylesheet",
+        href: "https://cdn.iress.com/icons/5.15.4/css/combined.min.css",
+        "data-iress-design-system-icons": !0
+      }
+    ),
+    document.head,
+    "design-system-icons"
+  )
+] });
+export {
+  z as I,
+  h as n
+};