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

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

@@ -1,39 +1,47 @@
-import "react/jsx-runtime";
-import { A as K } from "../../../LoadingSuspense-BtzikVZk.js";
-import "react";
-import "../../../fuzzysort-BNka47rs.js";
-import "../../Badge/Badge.js";
-import "../../../index-cbHCAGLB.js";
-import "../../ButtonGroup/ButtonGroupProvider.js";
-import "../../Card/Card.js";
-import "../../CheckboxGroup/CheckboxGroup.js";
-import "../../Col/Col.js";
-import "../../Expander/Expander.js";
-import "../../Form/FormContext.js";
-import "../../Menu/Menu.js";
-import "../../Menu/MenuProvider.js";
-import "../../Popover/hooks/usePopover.js";
-import "../../CheckboxMark/CheckboxMark.types.js";
-import "../../CheckboxMark/CheckboxMark.js";
-import "../../Modal/ModalProvider.js";
-import "../../Panel/Panel.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/InputPopover/InputPopover.js";
-import "../../../SlideoutProvider-CQh140HM.js";
-import "react-dom";
-import "../../RadioGroup/RadioGroup.js";
-import "../../Text/Text.js";
-import "../../Skeleton/Skeleton.js";
-import "../../SkipLink/SkipLink.js";
-import "../../Stack/Stack.js";
-import "../../Table/TableContext.js";
-import "../../Table/TableProvider.js";
-import "../../TabSet/Tab/Tab.js";
-import "../../TabSet/TabSet.js";
-import "../../Toggle/Toggle.js";
-import "../../Tooltip/Tooltip.js";
-import "../../ValidationMessage/ValidationMessage.js";
-import "../../Popover/helpers/handlePopoverTabKey.js";
+import "../../Popover/Popover.styles.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 {
   K as IressSelectSearch
 };

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

@@ -0,0 +1,28 @@
+import { s as e } from "../../../sva-OmxClA9g.js";
+const t = e({
+  slots: ["root", "content"],
+  base: {
+    root: {
+      borderWidth: "0",
+      "&&": {
+        display: "flex",
+        flexDirection: "column"
+      }
+    },
+    content: {
+      overflow: "hidden",
+      display: "flex",
+      flexDirection: "column",
+      border: "[none]",
+      "&:has(.ids-rich-select-body)": {
+        overflow: "hidden",
+        "& .ids-rich-select-body": {
+          maxHeight: "[none]"
+        }
+      }
+    }
+  }
+});
+export {
+  t as selectSearch
+};

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

@@ -1,8 +1,46 @@
-import "react/jsx-runtime";
-import "react";
-import "../../../index-cbHCAGLB.js";
-import { B as i } from "../../../LoadingSuspense-BtzikVZk.js";
-import "../../Popover/hooks/usePopoverItem.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 d } from "../../Input/Input.js";
+import "../../Input/Input.styles.js";
+import { usePopoverItem as x } from "../../Popover/hooks/usePopoverItem.js";
+import { GlobalCSSClass as R } from "../../../enums.js";
+const P = u(
+  ({
+    "aria-label": s,
+    autoComplete: a = "off",
+    className: m,
+    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,
+      {
+        ...p,
+        ...o,
+        tabIndex: void 0,
+        "aria-label": s ?? r ?? "Search",
+        autoComplete: a,
+        className: h(
+          l.root,
+          m,
+          R.RichSelectSearchInput
+        ),
+        placeholder: r,
+        prepend: c,
+        ref: (f) => {
+          e.current = f, o?.ref?.(e.current?.input ?? null);
+        }
+      }
+    );
+  }
+);
+P.displayName = "IressSelectSearchInput";
 export {
-  i as IressSelectSearchInput
+  P as IressSelectSearchInput
 };

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

@@ -0,0 +1,32 @@
+import { s as o } from "../../../sva-OmxClA9g.js";
+const t = o({
+  slots: ["root"],
+  base: {
+    root: {
+      borderWidth: "0px",
+      borderBottomWidth: "1px",
+      borderBottomStyle: "solid",
+      borderBottomColor: "colour.neutral.70",
+      zIndex: "[100]",
+      overflow: "hidden",
+      "&&": {
+        borderRadius: "radius.000"
+      },
+      "& div:first-child": {
+        borderBottomColor: "transparent",
+        borderRadius: "radius.000"
+      },
+      "&:has(input:focus, textarea:focus)": {
+        border: "[none]",
+        layerStyle: "elevation.focusCompact"
+      },
+      "&:has(input:focus, textarea:focus) > *": {
+        backgroundColor: "transparent"
+      }
+    }
+  },
+  variants: {}
+});
+export {
+  t as selectSearchInput
+};

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

@@ -1,45 +1,165 @@
-import "react/jsx-runtime";
-import "../../../index-cbHCAGLB.js";
-import { C as P } from "../../../LoadingSuspense-BtzikVZk.js";
-import "react";
-import "../../../fuzzysort-BNka47rs.js";
-import "../../Badge/Badge.js";
-import "../../Button/Button.types.js";
-import "../../../helpers/formatting/toArray.js";
-import "../../ButtonGroup/ButtonGroupProvider.js";
-import "../../../helpers/utility/propagateTestid.js";
-import "../../../enums.js";
-import "../../Card/Card.js";
-import "../../CheckboxGroup/CheckboxGroup.js";
-import "../../Col/Col.js";
-import "../../Expander/Expander.js";
-import "../../Form/FormContext.js";
-import "../../Menu/Menu.js";
-import "../../Menu/MenuProvider.js";
-import "../../Popover/hooks/usePopover.js";
-import "../../CheckboxMark/CheckboxMark.types.js";
-import "../../CheckboxMark/CheckboxMark.js";
-import "../../Modal/ModalProvider.js";
-import "../../Panel/Panel.js";
-import "../../Popover/Popover.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 { 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 "../../../SlideoutProvider-CQh140HM.js";
-import "react-dom";
-import "../../RadioGroup/RadioGroup.js";
-import "../../../helpers/label-value/composeLabelValueDescriptor.js";
-import "../../Text/Text.js";
-import "../../../helpers/form/getFormControlValueAsStringIfDefined.js";
-import "../../../helpers/dom/focusableElements.js";
-import "../../Skeleton/Skeleton.js";
-import "../../SkipLink/SkipLink.js";
-import "../../Stack/Stack.js";
-import "../../Table/TableContext.js";
-import "../../Table/TableProvider.js";
-import "../../TabSet/Tab/Tab.js";
-import "../../TabSet/TabSet.js";
-import "../../Toggle/Toggle.js";
-import "../../Tooltip/Tooltip.js";
-import "../../ValidationMessage/ValidationMessage.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 {
-  P as IressSelectTags
+  be as IressSelectTags
 };

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

@@ -0,0 +1,86 @@
+import { s as o } from "../../../sva-OmxClA9g.js";
+const r = o({
+  slots: ["root", "placeholder", "prepend", "append", "tag", "tagsList"],
+  base: {
+    root: {
+      display: "flex",
+      alignItems: "center",
+      width: "[100%]",
+      paddingBlock: "spacing.050",
+      paddingInline: "spacing.200",
+      minHeight: "input.height",
+      alignSelf: "auto",
+      backgroundColor: "colour.neutral.10",
+      border: "input",
+      borderRadius: "radius.system.form",
+      color: "colour.neutral.80",
+      textAlign: "left",
+      fontWeight: "normal",
+      cursor: "pointer",
+      transition: "[all 0.3s ease]",
+      "&:hover": {
+        backgroundColor: "colour.neutral.10",
+        color: "colour.neutral.80"
+      },
+      "&:focus": {
+        backgroundColor: "colour.neutral.10",
+        borderColor: "colour.primary.fill",
+        layerStyle: "elevation.focus",
+        outline: "[none]"
+      },
+      "&:focus-within": {
+        backgroundColor: "colour.neutral.10",
+        borderColor: "colour.primary.fill",
+        layerStyle: "elevation.focus",
+        outline: "[none]"
+      },
+      "&:has(.tag)": {
+        cursor: "inherit",
+        "& .append": {
+          cursor: "pointer"
+        }
+      }
+    },
+    placeholder: {
+      color: "colour.neutral.60",
+      textAlign: "left",
+      flex: "1",
+      display: "flex",
+      alignItems: "center",
+      textStyle: "typography.body.md"
+    },
+    prepend: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "spacing.000",
+      color: "colour.neutral.70"
+    },
+    append: {},
+    tag: {
+      display: "inline-flex"
+    },
+    tagsList: {
+      overflow: "hidden",
+      height: "[100%]"
+    }
+  },
+  variants: {
+    showDefaultChevron: {
+      true: {
+        root: {
+          alignSelf: "center",
+          position: "relative"
+        },
+        append: {
+          selectChevron: !0
+        }
+      },
+      false: {
+        append: {}
+      }
+    }
+  }
+});
+export {
+  r as selectTags
+};

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

@@ -1,7 +1,65 @@
-import "react/jsx-runtime";
-import "../../../helpers/formatting/toArray.js";
-import { X as p } from "../../../LoadingSuspense-BtzikVZk.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 {
-  p as SelectActivator
+  q as SelectActivator
 };

package/dist/components/RichSelect/components/SelectHiddenInput.js

@@ -1,29 +1,29 @@
 import { jsx as r } from "react/jsx-runtime";
 import { propagateTestid as a } from "../../../helpers/utility/propagateTestid.js";
 import { forwardRef as m } from "react";
-const n = m(
-  ({
-    "data-testid": i,
-    getValuesString: t,
-    name: p,
-    renderHiddenInput: e,
-    value: o
-  }, d) => e ? e({
-    getValuesString: t,
-    value: o,
-    ref: d
-  }) : /* @__PURE__ */ r(
-    "input",
-    {
-      "data-testid": a(i, "hidden-input"),
-      name: p,
-      type: "hidden",
-      value: t(),
-      ref: d
-    }
-  )
-);
-n.displayName = "SelectHiddenInput";
+const f = ({
+  "data-testid": d,
+  getValuesString: t,
+  name: e,
+  renderHiddenInput: o,
+  required: p,
+  value: n
+}, i) => o ? o({
+  getValuesString: t,
+  value: n,
+  ref: i,
+  required: p
+}) : /* @__PURE__ */ r(
+  "input",
+  {
+    "data-testid": a(d, "hidden-input"),
+    name: e,
+    type: "hidden",
+    value: t(),
+    ref: i,
+    required: p
+  }
+), h = m(f);
 export {
-  n as SelectHiddenInput
+  h as SelectHiddenInput
 };