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

package/dist/components/RichSelect/SelectSearch/SelectSearch.js

@@ -1,102 +1,47 @@
-import "react/jsx-runtime";
-import { d as Ur } from "../../../Filter-Bwk7SIlJ.js";
-import "react";
-import "../../../cx-DN21T1EH.js";
-import "../../Icon/Icon.styles.js";
-import "../../../enums.js";
-import "../../Alert/Alert.styles.js";
-import "../../../Button-BXzmntRi.js";
-import "../../Button/CloseButton/CloseButton.js";
-import "../../Inline/Inline.styles.js";
-import "../../Inline/Inline.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 "../../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 { jsx as n } from "react/jsx-runtime";
+import { c as s } from "../../../cx-DN21T1EH.js";
+import { selectSearch as l } from "./SelectSearch.styles.js";
+import { handlePopoverTabKey as f } from "../../Popover/helpers/handlePopoverTabKey.js";
+import { useContext as h } from "react";
+import { PopoverContext as S } from "../../Popover/hooks/usePopover.js";
+import { GlobalCSSClass as m } from "../../../enums.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.styles.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";
-import "./SelectSearch.styles.js";
-import "../../Popover/helpers/handlePopoverTabKey.js";
+import { IressInputPopover as C } from "../../Popover/InputPopover/InputPopover.js";
+const K = ({
+  className: c,
+  contentClassName: a,
+  contentStyle: o,
+  onKeyDown: p,
+  ...i
+}) => {
+  const e = h(S), r = l();
+  return /* @__PURE__ */ n(
+    C,
+    {
+      ...i,
+      className: s(
+        r.root,
+        c,
+        m.RichSelectSearch
+      ),
+      contentStyle: {
+        ...o,
+        className: s(
+          r.content,
+          a,
+          m.RichSelectSearchContent,
+          o?.className
+        )
+      },
+      displayMode: "inline",
+      onKeyDown: (t) => {
+        p?.(t), e && f(e, t);
+      },
+      show: !0
+    }
+  );
+};
 export {
-  Ur as IressSelectSearch
+  K as IressSelectSearch
 };

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

@@ -1,4 +1,4 @@
-import { s as e } from "../../../sva-TRyehFkb.js";
+import { s as e } from "../../../sva-OmxClA9g.js";
 const t = e({
   slots: ["root", "content"],
   base: {

package/dist/components/RichSelect/SelectSearchInput/SelectSearchInput.js

@@ -1,47 +1,46 @@
-import { jsx as c } from "react/jsx-runtime";
-import { forwardRef as S, useRef as h, useImperativeHandle as b } from "react";
-import { c as d } from "../../../cx-DN21T1EH.js";
-import { selectSearchInput as x } from "./SelectSearchInput.styles.js";
-import { IressIcon as R } from "../../Icon/Icon.js";
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as u, useRef as I, useImperativeHandle as S } from "react";
+import { c as h } from "../../../cx-DN21T1EH.js";
+import { selectSearchInput as v } from "./SelectSearchInput.styles.js";
+import { IressIcon as b } from "../../Icon/Icon.js";
 import "../../Icon/Icon.styles.js";
-import { IressInput as v } from "../../Input/Input.js";
+import { IressInput as d } from "../../Input/Input.js";
 import "../../Input/Input.styles.js";
-import { usePopoverItem as C } from "../../Popover/hooks/usePopoverItem.js";
-import { GlobalCSSClass as N } from "../../../enums.js";
-const j = S(
+import { usePopoverItem as x } from "../../Popover/hooks/usePopoverItem.js";
+import { GlobalCSSClass as R } from "../../../enums.js";
+const P = u(
   ({
-    "aria-label": o,
-    autoComplete: n = "off",
+    "aria-label": s,
+    autoComplete: a = "off",
     className: m,
-    placeholder: t = "Search",
-    prepend: i = /* @__PURE__ */ c(R, { name: "search" }),
-    ...l
-  }, f) => {
-    const r = h(null), { isActiveInPopover: u, ...e } = C(), p = x({ isActiveInPopover: u });
-    return b(f, () => r.current), /* @__PURE__ */ c(
-      v,
+    placeholder: r = "Search",
+    prepend: c = /* @__PURE__ */ t(b, { name: "search" }),
+    ...p
+  }, n) => {
+    const e = I(null), { isActiveInPopover: i, ...o } = x(), l = v({ isActiveInPopover: i });
+    return S(n, () => e.current), /* @__PURE__ */ t(
+      d,
       {
-        ...l,
-        ...e,
+        ...p,
+        ...o,
         tabIndex: void 0,
-        "aria-label": o ?? t ?? "Search",
-        autoComplete: n,
-        className: d(
-          p.root,
+        "aria-label": s ?? r ?? "Search",
+        autoComplete: a,
+        className: h(
+          l.root,
           m,
-          N.RichSelectSearchInput
+          R.RichSelectSearchInput
         ),
-        placeholder: t,
-        prepend: i,
-        ref: (I) => {
-          var a, s;
-          r.current = I, (s = e == null ? void 0 : e.ref) == null || s.call(e, ((a = r.current) == null ? void 0 : a.input) ?? null);
+        placeholder: r,
+        prepend: c,
+        ref: (f) => {
+          e.current = f, o?.ref?.(e.current?.input ?? null);
         }
       }
     );
   }
 );
-j.displayName = "IressSelectSearchInput";
+P.displayName = "IressSelectSearchInput";
 export {
-  j as IressSelectSearchInput
+  P as IressSelectSearchInput
 };

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

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

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

@@ -1,109 +1,163 @@
-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 k } from "../../../helpers/formatting/toArray.js";
+import { composeLabelValueDescriptor as w } from "../../../helpers/label-value/composeLabelValueDescriptor.js";
+import { getFormControlValueAsStringIfDefined as E } from "../../../helpers/form/getFormControlValueAsStringIfDefined.js";
+import { useMemo as M, useState as j, useContext as A, useCallback as I } from "react";
+import { focusableElements as B } from "../../../helpers/dom/focusableElements.js";
+import { PopoverContext as O } from "../../Popover/hooks/usePopover.js";
+import { IressText as v } from "../../Text/Text.js";
+import { c as L } from "../../../cx-DN21T1EH.js";
+import { selectTags as F } 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 V } 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 G } from "../../Popover/Popover.js";
+import "../../Popover/Popover.styles.js";
+import "../../Popover/InputPopover/InputPopover.js";
+import { I as R } from "../../../Button-mmhMLwp9.js";
+import "../../Button/CloseButton/CloseButton.js";
+import { IressIcon as W } from "../../Icon/Icon.js";
+import "../../Icon/Icon.styles.js";
+import "../../Inline/Inline.styles.js";
+import { IressInline as $ } from "../../Inline/Inline.js";
+const S = (r, s) => {
+  if (!r?.api.elements.reference || !s)
+    return;
+  const a = r.getFocusableActivator(), n = B(
+    r.api.elements.reference
+  ).filter((l) => l !== a);
+  if (n.length < 1)
+    a?.focus();
+  else {
+    const l = n.indexOf(s.currentTarget), t = n.filter(
+      (m) => m !== s.currentTarget
+    ), i = Math.max(l - 1, 0);
+    !t[i] && t[0] ? t[0].focus() : t[0] ? t[i].focus() : a?.focus();
+  }
+}, q = ({
+  "data-testid": r,
+  limit: s = 5,
+  onDelete: a,
+  onDeleteAll: n,
+  onToggleActions: l,
+  selectedArray: t,
+  selectedOptionsText: i
+}) => {
+  const [m, u] = j(!1), c = A(O), p = F(), h = I(
+    (e, f) => {
+      a?.(
+        t.find((x) => x.label === e),
+        f
+      ), f.stopPropagation(), S(c, f);
+    },
+    [a, c, t]
+  ), g = I(
+    (e) => {
+      n?.(e), c?.getFocusableActivator()?.focus();
+    },
+    [n, c]
+  );
+  return m || !s || t.length <= s ? t.map((e) => /* @__PURE__ */ o(
+    T,
+    {
+      className: p.tag,
+      "data-testid": b(r, "tag"),
+      deleteButtonText: `Delete ${e.label}`,
+      onDelete: h,
+      children: e.label
+    },
+    E(e.value) ?? e.label
+  )) : /* @__PURE__ */ o(
+    T,
+    {
+      className: p.tag,
+      "data-testid": b(r, "tag"),
+      deleteButton: /* @__PURE__ */ o(
+        G,
+        {
+          activator: /* @__PURE__ */ o(R, { mode: "tertiary", children: /* @__PURE__ */ o(
+            W,
+            {
+              name: "chevron-circle-down",
+              screenreaderText: "Actions"
+            }
+          ) }),
+          onActivated: () => l?.(!0),
+          onClick: (e) => {
+            e.stopPropagation(), S(c, e);
+          },
+          onDeactivated: () => l?.(!1),
+          children: /* @__PURE__ */ N(V, { children: [
+            /* @__PURE__ */ o(D, { onClick: () => u(!0), children: "Expand all" }),
+            /* @__PURE__ */ o(D, { onClick: g, children: "Delete all" })
+          ] })
+        }
+      ),
+      children: w(t, i)
+    }
+  );
+}, xe = ({
+  append: r = "",
+  className: s,
+  "data-testid": a,
+  id: n,
+  limit: l = 5,
+  onDelete: t,
+  onDeleteAll: i,
+  onToggleActions: m,
+  placeholder: u,
+  prepend: c,
+  selected: p,
+  selectedOptionsText: h = "{{numOptions}} selected",
+  ...g
+}) => {
+  const e = M(() => k(p), [p]), f = !e.length && u, x = !!e.length, P = r == null || r === "" || !r, d = F({ showDefaultChevron: P });
+  return /* @__PURE__ */ N(
+    v,
+    {
+      ...g,
+      id: n,
+      tabIndex: 0,
+      className: L(
+        s,
+        d.root,
+        C.FormElementInner,
+        C.RichSelectTags
+      ),
+      children: [
+        c && /* @__PURE__ */ o("span", { className: d.prepend, children: c }),
+        f && /* @__PURE__ */ o(v, { className: d.placeholder, children: u }),
+        x && /* @__PURE__ */ o($, { gap: "sm", className: d.tagsList, children: /* @__PURE__ */ o(
+          q,
+          {
+            "data-testid": a,
+            limit: l,
+            onDelete: t,
+            onDeleteAll: i,
+            onToggleActions: m,
+            selectedArray: e,
+            selectedOptionsText: h
+          }
+        ) }),
+        /* @__PURE__ */ o(
+          "button",
+          {
+            className: d.append,
+            role: "combobox",
+            "aria-label": "Select options",
+            children: r
+          }
+        )
+      ]
+    }
+  );
+};
 export {
-  $r as IressSelectTags
+  xe 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: {
@@ -6,8 +6,8 @@ const r = o({
       display: "flex",
       alignItems: "center",
       width: "[100%]",
-      paddingBlock: "spacing.050",
-      paddingInline: "spacing.200",
+      paddingBlock: "spacing.1",
+      paddingInline: "spacing.2",
       minHeight: "input.height",
       alignSelf: "auto",
       backgroundColor: "colour.neutral.10",
@@ -52,7 +52,7 @@ const r = o({
     prepend: {
       display: "inline-flex",
       alignItems: "center",
-      gap: "spacing.000",
+      gap: "spacing.0",
       color: "colour.neutral.70"
     },
     append: {},

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
 };