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

package/dist/components/RichSelect/SelectTags/SelectTags.js

@@ -1,109 +1,165 @@
-import "react/jsx-runtime";
-import { e as $r } from "../../../Filter-Bwk7SIlJ.js";
-import "react";
-import "../../Icon/Icon.js";
-import "../../Icon/Icon.styles.js";
-import "../../Text/Text.js";
-import "../../../helpers/utility/propagateTestid.js";
-import "../../Alert/Alert.styles.js";
-import "../../../cx-DN21T1EH.js";
-import "../../../enums.js";
-import "../../../Button-BXzmntRi.js";
-import "../../Button/CloseButton/CloseButton.js";
-import "../../Inline/Inline.styles.js";
-import "../../Inline/Inline.js";
-import "../../../helpers/formatting/toArray.js";
-import "../../../fuzzysort-eoXOpoo6.js";
-import "../../Badge/Badge.styles.js";
-import "../../ButtonGroup/ButtonGroup.styles.js";
-import "../../ButtonGroup/ButtonGroupProvider.js";
-import "../../Card/Card.styles.js";
-import "../../Checkbox/Checkbox.js";
-import "../../Checkbox/Checkbox.styles.js";
-import "../../CheckboxGroup/CheckboxGroup.js";
-import "../../CheckboxGroup/CheckboxGroup.styles.js";
-import "../../Col/Col.styles.js";
-import "../../Col/Col.js";
-import "../../Container/Container.styles.js";
-import "../../Container/Container.js";
-import "../../Divider/Divider.styles.js";
-import "../../Expander/Expander.styles.js";
-import "../../Label/Label.styles.js";
-import "../../Field/Field.styles.js";
-import "../../../helpers/dom/focusableElements.js";
-import "../../Tooltip/Tooltip.styles.js";
-import "../../Field/FieldGroup/FieldGroup.styles.js";
-import "../../Hide/Hide.js";
-import "../../Image/Image.js";
-import "../../Image/Image.styles.js";
-import "../../Input/Input.js";
-import "../../Input/Input.styles.js";
-import "../../InputCurrency/InputCurrency.js";
-import "../../Link/Link.js";
-import "../../Link/Link.styles.js";
-import "../../Menu/Menu.js";
-import "../../Menu/Menu.styles.js";
-import "../../Menu/MenuItem/MenuItem.js";
-import "../../Popover/hooks/usePopover.js";
-import "../../Modal/Modal.styles.js";
-import "../../Modal/ModalProvider.js";
-import "../../Panel/Panel.js";
-import "../../Panel/Panel.styles.js";
-import "../../Placeholder/Placeholder.styles.js";
-import "../../Popover/Popover.js";
-import "../../Popover/Popover.styles.js";
-import "../../../InputPopover-BWWuoQZ2.js";
-import "../../Progress/Progress.styles.js";
-import "../../../index-DlGwAtoO.js";
-import "../../../ToasterProvider-XqpAGfRs.js";
-import "../../Toaster/Toaster.styles.js";
-import "../../Toaster/components/Toast/Toast.styles.js";
-import "../../Slideout/Slideout.styles.js";
-import "../../Slideout/SlideoutProvider.js";
-import "react-dom";
-import "../../../typography--vGt_ztU.js";
-import "../../Radio/Radio.js";
-import "../../Radio/Radio.styles.js";
-import "../../RadioGroup/RadioGroup.js";
-import "../../RadioGroup/RadioGroup.styles.js";
-import "../../Readonly/Readonly.js";
-import "../../Readonly/Readonly.styles.js";
-import "../SelectBody/SelectBody.styles.js";
-import "../../../helpers/label-value/composeLabelValueDescriptor.js";
-import "../SelectLabel/SelectLabel.styles.js";
-import "../../../helpers/form/getFormControlValueAsStringIfDefined.js";
-import "../SelectMenu/SelectMenu.styles.js";
-import "../SelectSearch/SelectSearch.styles.js";
-import "../SelectSearchInput/SelectSearchInput.js";
-import "../../Row/Row.styles.js";
-import "../../Row/Row.js";
-import "../../Select/Select.styles.js";
-import "../../Select/Select.js";
-import "../../Skeleton/Skeleton.styles.js";
-import "../../SkipLink/SkipLink.js";
-import "../../SkipLink/SkipLink.styles.js";
-import "../../Slider/Slider.js";
-import "../../Slider/Slider.styles.js";
-import "../../Spinner/Spinner.styles.js";
-import "../../Stack/Stack.styles.js";
-import "../../../TableProvider-D8SQKIG8.js";
-import "../../Table/Table.styles.js";
-import "../../TabSet/TabSetProvider.js";
-import "../../TabSet/TabSet.styles.js";
-import "../../TabSet/Tab/Tab.js";
-import "../../TabSet/Tab/Tab.styles.js";
-import "../../Tag/Tag.js";
+import { jsxs as N, jsx as o } from "react/jsx-runtime";
+import { propagateTestid as b } from "../../../helpers/utility/propagateTestid.js";
+import { toArray as P } from "../../../helpers/formatting/toArray.js";
+import { composeLabelValueDescriptor as k } from "../../../helpers/label-value/composeLabelValueDescriptor.js";
+import { getFormControlValueAsStringIfDefined as w } from "../../../helpers/form/getFormControlValueAsStringIfDefined.js";
+import { useMemo as M, useState as j, useContext as B, useCallback as I, useEffect as O } from "react";
+import { focusableElements as L } from "../../../helpers/dom/focusableElements.js";
+import { PopoverContext as V } from "../../Popover/hooks/usePopover.js";
+import { IressText as v } from "../../Text/Text.js";
+import { c as A } from "../../../cx-DN21T1EH.js";
+import { selectTags as E } from "./SelectTags.styles.js";
+import { IressTag as T } from "../../Tag/Tag.js";
 import "../../Tag/Tag.styles.js";
 import "../../Tag/TagInput/TagInput.js";
-import "../../CheckboxMark/CheckboxMark.styles.js";
-import "../../Toggle/Toggle.styles.js";
-import "../../../patterns/Form/Form.js";
-import "../../../patterns/Form/FormContext.js";
-import "../../../patterns/Form/FormValidationSummary/FormValidationSummary.js";
-import "../../../patterns/Form/HookForm/HookForm.js";
-import "../../../patterns/Loading/Loading.js";
-import "../../../patterns/Loading/LoadingSuspense.js";
-import "./SelectTags.styles.js";
+import { IressMenu as G } from "../../Menu/Menu.js";
+import "../../Menu/Menu.styles.js";
+import "../../Divider/Divider.styles.js";
+import { GlobalCSSClass as C } from "../../../enums.js";
+import { IressMenuItem as D } from "../../Menu/MenuItem/MenuItem.js";
+import { IressPopover as R } from "../../Popover/Popover.js";
+import "../../Popover/Popover.styles.js";
+import "../../Popover/InputPopover/InputPopover.js";
+import { I as W } from "../../../Button-D6AL0bia.js";
+import "../../Button/CloseButton/CloseButton.js";
+import { IressIcon as $ } from "../../Icon/Icon.js";
+import "../../Icon/Icon.styles.js";
+import "../../Inline/Inline.styles.js";
+import { IressInline as q } from "../../Inline/Inline.js";
+const S = (r, s) => {
+  if (!r?.api.elements.reference || !s)
+    return;
+  const a = r.getFocusableActivator(), n = L(
+    r.api.elements.reference
+  ).filter((l) => l !== a);
+  if (n.length < 1)
+    a?.focus();
+  else {
+    const l = n.indexOf(s.currentTarget), e = n.filter(
+      (m) => m !== s.currentTarget
+    ), i = Math.max(l - 1, 0);
+    !e[i] && e[0] ? e[0].focus() : e[0] ? e[i].focus() : a?.focus();
+  }
+}, z = ({
+  "data-testid": r,
+  limit: s = 5,
+  onDelete: a,
+  onDeleteAll: n,
+  onToggleActions: l,
+  selectedArray: e,
+  selectedOptionsText: i
+}) => {
+  const [m, f] = j(!1), c = B(V), p = E(), h = I(
+    (t, u) => {
+      a?.(
+        e.find((x) => x.label === t),
+        u
+      ), u.stopPropagation(), S(c, u);
+    },
+    [a, c, e]
+  ), g = I(
+    (t) => {
+      n?.(t), c?.getFocusableActivator()?.focus();
+    },
+    [n, c]
+  );
+  return O(() => {
+    e.length || f(!1);
+  }, [e]), m || !s || e.length <= s ? e.map((t) => /* @__PURE__ */ o(
+    T,
+    {
+      className: p.tag,
+      "data-testid": b(r, "tag"),
+      deleteButtonText: `Delete ${t.label}`,
+      onDelete: h,
+      children: t.label
+    },
+    w(t.value) ?? t.label
+  )) : /* @__PURE__ */ o(
+    T,
+    {
+      className: p.tag,
+      "data-testid": b(r, "tag"),
+      deleteButton: /* @__PURE__ */ o(
+        R,
+        {
+          activator: /* @__PURE__ */ o(W, { mode: "tertiary", children: /* @__PURE__ */ o(
+            $,
+            {
+              name: "chevron-circle-down",
+              screenreaderText: "Actions"
+            }
+          ) }),
+          onActivated: () => l?.(!0),
+          onClick: (t) => {
+            t.stopPropagation(), S(c, t);
+          },
+          onDeactivated: () => l?.(!1),
+          children: /* @__PURE__ */ N(G, { children: [
+            /* @__PURE__ */ o(D, { onClick: () => f(!0), children: "Expand all" }),
+            /* @__PURE__ */ o(D, { onClick: g, children: "Delete all" })
+          ] })
+        }
+      ),
+      children: k(e, i)
+    }
+  );
+}, be = ({
+  append: r = "",
+  className: s,
+  "data-testid": a,
+  id: n,
+  limit: l = 5,
+  onDelete: e,
+  onDeleteAll: i,
+  onToggleActions: m,
+  placeholder: f,
+  prepend: c,
+  selected: p,
+  selectedOptionsText: h = "{{numOptions}} selected",
+  ...g
+}) => {
+  const t = M(() => P(p), [p]), u = !t.length && f, x = !!t.length, F = r == null || r === "" || !r, d = E({ showDefaultChevron: F });
+  return /* @__PURE__ */ N(
+    v,
+    {
+      ...g,
+      id: n,
+      tabIndex: 0,
+      className: A(
+        s,
+        d.root,
+        C.FormElementInner,
+        C.RichSelectTags
+      ),
+      children: [
+        c && /* @__PURE__ */ o("span", { className: d.prepend, children: c }),
+        u && /* @__PURE__ */ o(v, { className: d.placeholder, children: f }),
+        x && /* @__PURE__ */ o(q, { gap: "sm", className: d.tagsList, children: /* @__PURE__ */ o(
+          z,
+          {
+            "data-testid": a,
+            limit: l,
+            onDelete: e,
+            onDeleteAll: i,
+            onToggleActions: m,
+            selectedArray: t,
+            selectedOptionsText: h
+          }
+        ) }),
+        /* @__PURE__ */ o(
+          "button",
+          {
+            className: d.append,
+            role: "combobox",
+            "aria-label": "Select options",
+            children: r
+          }
+        )
+      ]
+    }
+  );
+};
 export {
-  $r as IressSelectTags
+  be as IressSelectTags
 };

package/dist/components/RichSelect/SelectTags/SelectTags.styles.js

@@ -1,4 +1,4 @@
-import { s as o } from "../../../sva-TRyehFkb.js";
+import { s as o } from "../../../sva-OmxClA9g.js";
 const r = o({
   slots: ["root", "placeholder", "prepend", "append", "tag", "tagsList"],
   base: {

package/dist/components/RichSelect/components/SelectActivator.js

@@ -1,8 +1,65 @@
-import "react/jsx-runtime";
-import "../../../helpers/formatting/toArray.js";
-import "../SelectLabel/SelectLabel.js";
-import { S as e } from "../../../Filter-Bwk7SIlJ.js";
-import "../../../helpers/form/getValueAsEvent.js";
+import { jsx as b } from "react/jsx-runtime";
+import { toArray as j } from "../../../helpers/formatting/toArray.js";
+import { IressSelectLabel as w } from "../SelectLabel/SelectLabel.js";
+import { IressSelectTags as y } from "../SelectTags/SelectTags.js";
+import { getValueAsEvent as g } from "../../../helpers/form/getValueAsEvent.js";
+const q = ({
+  append: l,
+  async: a,
+  id: f,
+  error: u,
+  loading: x,
+  multiSelect: D,
+  onChange: s,
+  placeholder: c,
+  prepend: m,
+  renderLabel: i,
+  selectedOptionsText: n,
+  setShow: A,
+  setValue: t,
+  show: I,
+  value: r
+}) => i ? i({
+  close: () => A(!1),
+  error: u,
+  loading: x,
+  setValue: t,
+  show: I,
+  value: r
+}) : D ? /* @__PURE__ */ b(
+  y,
+  {
+    append: l,
+    id: f,
+    onDelete: (o) => {
+      if (!o) return;
+      const e = j(r).filter(
+        (S) => S.label !== o.label
+      );
+      t(e), s?.(g(e), e);
+    },
+    onDeleteAll: () => {
+      const o = [];
+      t(o), s?.(g([]), o);
+    },
+    onToggleActions: () => A(!1),
+    placeholder: c,
+    prepend: m,
+    selected: r,
+    selectedOptionsText: n
+  }
+) : /* @__PURE__ */ b(
+  w,
+  {
+    append: l,
+    id: f,
+    placeholder: c,
+    prepend: m,
+    role: a ? void 0 : "combobox",
+    selected: r,
+    selectedOptionsText: n
+  }
+);
 export {
-  e as SelectActivator
+  q as SelectActivator
 };

package/dist/components/RichSelect/components/SelectOptions.js

@@ -1,102 +1,208 @@
-import "react/jsx-runtime";
-import "../../../helpers/form/getValueAsEvent.js";
-import "react";
-import { f as Vo } from "../../../Filter-Bwk7SIlJ.js";
-import "../../Alert/Alert.js";
+import { jsx as s, jsxs as F, Fragment as W } from "react/jsx-runtime";
+import { getValueAsEvent as E } from "../../../helpers/form/getValueAsEvent.js";
+import { useCallback as O, useRef as j, useId as k, useEffect as P } from "react";
+import { IressSelectSearch as $ } from "../SelectSearch/SelectSearch.js";
+import { toArray as D } from "../../../helpers/formatting/toArray.js";
+import { IressSelectMenu as y } from "../SelectMenu/SelectMenu.js";
+import { IressAlert as T } from "../../Alert/Alert.js";
 import "../../Alert/Alert.styles.js";
-import "../../../fuzzysort-eoXOpoo6.js";
-import "../../Badge/Badge.styles.js";
-import "../../../Button-BXzmntRi.js";
-import "../../Button/CloseButton/CloseButton.js";
-import "../../../helpers/formatting/toArray.js";
-import "../../ButtonGroup/ButtonGroup.styles.js";
-import "../../ButtonGroup/ButtonGroupProvider.js";
-import "../../Card/Card.styles.js";
-import "../../Checkbox/Checkbox.js";
-import "../../Checkbox/Checkbox.styles.js";
-import "../../CheckboxGroup/CheckboxGroup.js";
-import "../../CheckboxGroup/CheckboxGroup.styles.js";
-import "../../Col/Col.styles.js";
-import "../../Col/Col.js";
-import "../../Container/Container.styles.js";
-import "../../Container/Container.js";
-import "../../Divider/Divider.styles.js";
-import "../../Expander/Expander.styles.js";
-import "../../Label/Label.styles.js";
-import "../../Field/Field.styles.js";
-import "../../Icon/Icon.styles.js";
-import "../../Tooltip/Tooltip.styles.js";
-import "../../Field/FieldGroup/FieldGroup.styles.js";
-import "../../Hide/Hide.js";
-import "../../Image/Image.js";
-import "../../Image/Image.styles.js";
-import "../../Inline/Inline.styles.js";
-import "../../Inline/Inline.js";
-import "../../Input/Input.js";
-import "../../Input/Input.styles.js";
-import "../../InputCurrency/InputCurrency.js";
-import "../../Link/Link.js";
-import "../../Link/Link.styles.js";
+import { IressSelectSearchInput as z } from "../SelectSearchInput/SelectSearchInput.js";
+import { IressSelectHeading as B } from "../SelectHeading/SelectHeading.js";
 import "../../Menu/Menu.js";
 import "../../Menu/Menu.styles.js";
-import "../../Menu/MenuDivider/MenuDivider.js";
+import { IressMenuDivider as G } from "../../Menu/MenuDivider/MenuDivider.js";
 import "../../Menu/MenuItem/MenuItem.js";
 import "../../Popover/hooks/usePopover.js";
-import "../../Modal/Modal.styles.js";
-import "../../Modal/ModalProvider.js";
-import "../../Panel/Panel.js";
-import "../../Panel/Panel.styles.js";
-import "../../Placeholder/Placeholder.styles.js";
-import "../../Popover/Popover.js";
-import "../../Popover/Popover.styles.js";
-import "../../../InputPopover-BWWuoQZ2.js";
-import "../../Progress/Progress.styles.js";
-import "../../../index-DlGwAtoO.js";
-import "../../../ToasterProvider-XqpAGfRs.js";
-import "../../Toaster/Toaster.styles.js";
-import "../../Toaster/components/Toast/Toast.styles.js";
-import "../../Slideout/Slideout.styles.js";
-import "../../Slideout/SlideoutProvider.js";
-import "react-dom";
-import "../../../typography--vGt_ztU.js";
-import "../../Radio/Radio.js";
-import "../../Radio/Radio.styles.js";
-import "../../RadioGroup/RadioGroup.js";
-import "../../RadioGroup/RadioGroup.styles.js";
-import "../../Readonly/Readonly.js";
-import "../../Readonly/Readonly.styles.js";
-import "../SelectBody/SelectBody.styles.js";
-import "../SelectLabel/SelectLabel.styles.js";
-import "../SelectMenu/SelectMenu.js";
-import "../SelectSearchInput/SelectSearchInput.js";
-import "../SelectTags/SelectTags.styles.js";
-import "../../Row/Row.styles.js";
-import "../../Row/Row.js";
-import "../../Select/Select.styles.js";
-import "../../Select/Select.js";
-import "../../Skeleton/Skeleton.styles.js";
-import "../../SkipLink/SkipLink.js";
-import "../../SkipLink/SkipLink.styles.js";
-import "../../Slider/Slider.js";
-import "../../Slider/Slider.styles.js";
-import "../../Spinner/Spinner.styles.js";
-import "../../Stack/Stack.styles.js";
-import "../../../TableProvider-D8SQKIG8.js";
-import "../../Table/Table.styles.js";
-import "../../TabSet/TabSetProvider.js";
-import "../../TabSet/TabSet.styles.js";
-import "../../TabSet/Tab/Tab.js";
-import "../../TabSet/Tab/Tab.styles.js";
-import "../../Tag/Tag.styles.js";
-import "../../Tag/TagInput/TagInput.js";
-import "../../CheckboxMark/CheckboxMark.styles.js";
-import "../../Toggle/Toggle.styles.js";
-import "../../../patterns/Form/Form.js";
-import "../../../patterns/Form/FormContext.js";
-import "../../../patterns/Form/FormValidationSummary/FormValidationSummary.js";
-import "../../../patterns/Form/HookForm/HookForm.js";
-import "../../../patterns/Loading/Loading.js";
-import "../../../patterns/Loading/LoadingSuspense.js";
+const H = ({
+  minSearchLength: e,
+  multiSelect: n,
+  onChange: a,
+  query: I,
+  results: o,
+  shouldShowInstructions: d,
+  shouldShowNoResults: c,
+  value: t
+}) => /* @__PURE__ */ s(
+  y,
+  {
+    heading: n ? "Search results" : void 0,
+    items: o,
+    multiSelect: n,
+    noResults: (() => {
+      if (I) {
+        if (d)
+          return `Type at least ${e} character${e === 1 ? "" : "s"} to search`;
+        if (c)
+          return "No results found";
+      }
+    })(),
+    onChange: a,
+    selected: t,
+    hideSelectedItems: n
+  }
+), J = ({ error: e }) => e ? /* @__PURE__ */ s(T, { className: "iress-m--sm", status: "danger", children: typeof e == "string" ? e : /* @__PURE__ */ F(W, { children: [
+  "An unknown error occurred.",
+  /* @__PURE__ */ s("br", {}),
+  " Please contact support if the error persists."
+] }) }) : null, K = ({
+  autoHighlight: e,
+  error: n,
+  loading: a,
+  minSearchLength: I,
+  multiSelect: o,
+  onChange: d,
+  onClear: c,
+  query: t,
+  results: f,
+  setQuery: p,
+  show: A,
+  value: i,
+  shouldShowInstructions: R,
+  shouldShowNoResults: S
+}) => {
+  const r = D(i).map(
+    (l) => {
+      const { formattedLabel: g, ...b } = l;
+      return b;
+    }
+  ), u = !n && (!!f?.length || t && !a), m = !!r.length && o, N = u && m, h = j(null), x = k();
+  P(() => {
+    A || p?.("");
+  }, [A, p]);
+  const v = m ? r.length + 1 : 0;
+  return /* @__PURE__ */ F(
+    $,
+    {
+      activator: /* @__PURE__ */ s(
+        z,
+        {
+          "aria-label": "Search",
+          loading: a,
+          onChange: (l) => p?.(l.target.value),
+          ref: h,
+          placeholder: "Search and select",
+          value: t
+        }
+      ),
+      autoHighlight: e,
+      focusStartIndex: e ? t && u ? v : m ? 1 : 0 : void 0,
+      children: [
+        m && /* @__PURE__ */ s(
+          y,
+          {
+            "aria-labelledby": x,
+            heading: /* @__PURE__ */ s(
+              B,
+              {
+                clearAll: !0,
+                onClearAll: (l) => {
+                  c?.(l), h.current?.focus();
+                },
+                children: /* @__PURE__ */ F("h2", { id: x, children: [
+                  "Selected (",
+                  r.length,
+                  ")"
+                ] })
+              }
+            ),
+            items: r,
+            multiSelect: o,
+            onChange: d,
+            selected: i
+          }
+        ),
+        N && /* @__PURE__ */ s(G, {}),
+        u && /* @__PURE__ */ s(
+          H,
+          {
+            minSearchLength: I,
+            multiSelect: o,
+            onChange: d,
+            query: t,
+            results: f,
+            value: i,
+            shouldShowInstructions: R,
+            shouldShowNoResults: S
+          }
+        ),
+        /* @__PURE__ */ s(J, { error: n })
+      ]
+    }
+  );
+}, oe = ({
+  autoHighlight: e,
+  debouncedQuery: n,
+  error: a,
+  initialOptions: I,
+  loading: o,
+  minSearchLength: d,
+  multiSelect: c,
+  onChange: t,
+  options: f,
+  query: p,
+  renderOptions: A,
+  results: i,
+  setQuery: R,
+  setShow: S,
+  setValue: r,
+  show: u,
+  shouldShowInstructions: m,
+  shouldShowNoResults: N,
+  value: h
+}) => {
+  const x = typeof f == "function", v = I ?? (x ? [] : f), M = i.length ? i : v, C = O(
+    (g) => {
+      r(g), t?.(E(g), g), c || S(!1);
+    },
+    [S, r, t, c]
+  ), l = O(
+    (g) => {
+      g.stopPropagation();
+      const b = [];
+      r(b), t?.(E([]), b);
+    },
+    [r, t]
+  );
+  return A ? A({
+    close: () => S(!1),
+    debouncedQuery: n,
+    error: a,
+    loading: o,
+    query: p,
+    results: M,
+    setValue: r,
+    setQuery: R,
+    show: u,
+    value: h
+  }) : x ? /* @__PURE__ */ s(
+    K,
+    {
+      autoHighlight: e,
+      error: a,
+      loading: o,
+      minSearchLength: d,
+      multiSelect: c,
+      onChange: C,
+      onClear: l,
+      query: p,
+      results: i,
+      setQuery: R,
+      show: u,
+      value: h,
+      shouldShowInstructions: m,
+      shouldShowNoResults: N
+    }
+  ) : /* @__PURE__ */ s(
+    y,
+    {
+      items: M,
+      multiSelect: c,
+      onChange: C,
+      selected: h,
+      selectedFirst: !0
+    }
+  );
+};
 export {
-  Vo as SelectOptions
+  oe as SelectOptions
 };