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

package/dist/components/RichSelect/SelectCreate/SelectCreate.js

@@ -1,63 +1,37 @@
-import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
 import "react";
-import { useIdIfNeeded as a } from "../../../hooks/useIdIfNeeded.js";
-import { p as c, r as I, k as u } from "../../../LoadingSuspense-BtzikVZk.js";
-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 { IressMenu as b } from "../../Menu/Menu.js";
-import "../../Menu/MenuProvider.js";
-import "../../../PopoverProvider-DZ92QV8I.js";
-import "../../CheckboxMark/CheckboxMark.types.js";
-import "../../CheckboxMark/CheckboxMark.js";
-import "../../Modal/ModalProvider.js";
-import "../../Panel/Panel.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";
-const P = ({
-  fluid: p = !0,
-  heading: r,
-  label: e = "New option",
+import { useIdIfNeeded as p } from "../../../hooks/useIdIfNeeded.js";
+import { IressMenu as c } from "../../Menu/Menu.js";
+import "../../Menu/Menu.styles.js";
+import "../../Divider/Divider.styles.js";
+import { IressMenuItem as I } from "../../Menu/MenuItem/MenuItem.js";
+import { IressMenuHeading as f } from "../../Menu/MenuText/MenuText.js";
+import { IressIcon as u } from "../../Icon/Icon.js";
+import "../../Icon/Icon.styles.js";
+const k = ({
+  fluid: m = !0,
+  heading: e,
+  label: n = "New option",
   loading: s,
-  onCreate: n,
-  prepend: d = /* @__PURE__ */ o(u, { name: "plus", screenreaderText: "Add" }),
-  ...i
+  onCreate: d,
+  prepend: l = /* @__PURE__ */ o(u, { name: "plus", screenreaderText: "Add" }),
+  ...r
 }) => {
-  const t = `${a({ id: i.id })}--label`, m = typeof r == "string";
-  return /* @__PURE__ */ l(
-    b,
+  const i = `${p({ id: r.id })}--label`, t = typeof e == "string";
+  return /* @__PURE__ */ a(
+    c,
     {
-      ...i,
-      "aria-labelledby": m ? t : i["aria-labelledby"],
+      ...r,
+      "aria-labelledby": t ? i : r["aria-labelledby"],
       role: "menu",
-      fluid: p,
+      fluid: m,
       children: [
-        m ? /* @__PURE__ */ o(c, { id: t, children: r }) : r,
-        /* @__PURE__ */ o(I, { prepend: d, onClick: n, loading: s, children: e })
+        t ? /* @__PURE__ */ o(f, { id: i, children: e }) : e,
+        /* @__PURE__ */ o(I, { prepend: l, onClick: d, loading: s, children: n })
       ]
     }
   );
 };
 export {
-  P as IressSelectCreate
+  k as IressSelectCreate
 };

package/dist/components/RichSelect/SelectHeading/SelectHeading.js

@@ -1,40 +1,74 @@
-import "react/jsx-runtime";
-import { x as L } from "../../../LoadingSuspense-BtzikVZk.js";
-import "react";
-import "../../../fuzzysort-BNka47rs.js";
-import "../../Badge/Badge.js";
-import "../../Button/Button.types.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 { jsx as m, jsxs as l } from "react/jsx-runtime";
+import { c as s } from "../../../cx-DN21T1EH.js";
+import { richSelect as a } from "../RichSelect.styles.js";
+import { forwardRef as d, useRef as f, useImperativeHandle as u } from "react";
 import "../../Menu/Menu.js";
-import "../../Menu/MenuProvider.js";
-import "../../CheckboxMark/CheckboxMark.types.js";
-import "../../CheckboxMark/CheckboxMark.js";
-import "../../../PopoverProvider-DZ92QV8I.js";
-import "../../Popover/hooks/usePopoverItem.js";
-import "../../Modal/ModalProvider.js";
-import "../../Panel/Panel.js";
+import "../../Menu/Menu.styles.js";
+import "../../Divider/Divider.styles.js";
+import { GlobalCSSClass as p } from "../../../enums.js";
+import "../../Menu/MenuItem/MenuItem.js";
+import { IressMenuHeading as I } from "../../Menu/MenuText/MenuText.js";
+import { I as v } from "../../../Button-D6AL0bia.js";
+import "../../Button/CloseButton/CloseButton.js";
 import "../../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 "../../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 { usePopoverItem as h } from "../../Popover/hooks/usePopoverItem.js";
+import "../../Inline/Inline.styles.js";
+import { IressInline as w } from "../../Inline/Inline.js";
+const c = a(), S = d(
+  (r, n) => {
+    const e = f(null), { isActiveInPopover: t, ...i } = h("", {
+      onKeyDown: r.onKeyDown
+    });
+    return u(n, () => e.current), /* @__PURE__ */ m(
+      v,
+      {
+        ...r,
+        ...i,
+        className: s(
+          c.dropdownClear,
+          p.RichSelectClearButton
+        ),
+        active: t,
+        mode: "tertiary",
+        ref: (o) => {
+          e.current = o, i?.ref?.(e.current);
+        }
+      }
+    );
+  }
+), q = ({
+  children: r,
+  className: n,
+  clearAll: e,
+  onClearAll: t,
+  ...i
+}) => /* @__PURE__ */ m(
+  I,
+  {
+    ...i,
+    className: s(
+      c.dropdownSelectedHeading,
+      n,
+      p.RichSelectHeading
+    ),
+    role: void 0,
+    children: /* @__PURE__ */ l(w, { horizontalAlign: "between", verticalAlign: "middle", children: [
+      r,
+      e && /* @__PURE__ */ m(
+        S,
+        {
+          onClick: t,
+          onKeyDown: (o) => {
+            o.key === "Enter" && (o.preventDefault(), t?.(o));
+          },
+          children: typeof e == "boolean" ? "Clear all" : e
+        }
+      )
+    ] })
+  }
+);
 export {
-  L as IressSelectHeading
+  q as IressSelectHeading
 };

package/dist/components/RichSelect/SelectLabel/SelectLabel.js

@@ -1,12 +1,50 @@
-import "react/jsx-runtime";
-import "../../../index-cbHCAGLB.js";
-import "react";
-import "../../../helpers/formatting/toArray.js";
-import "../../../helpers/label-value/composeLabelValueDescriptor.js";
-import { y as b } from "../../../LoadingSuspense-BtzikVZk.js";
-import "../../Text/Text.js";
-import "../../Button/Button.types.js";
-import "../../../enums.js";
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import { useMemo as f } from "react";
+import { toArray as b } from "../../../helpers/formatting/toArray.js";
+import { composeLabelValueDescriptor as d } from "../../../helpers/label-value/composeLabelValueDescriptor.js";
+import { selectLabel as S } from "./SelectLabel.styles.js";
+import { IressText as C } from "../../Text/Text.js";
+import { GlobalCSSClass as a } from "../../../enums.js";
+import { c as m } from "../../../cx-DN21T1EH.js";
+const j = ({
+  append: t,
+  className: c,
+  placeholder: s,
+  prepend: l,
+  selected: h,
+  selectedOptionsText: n = "{{numOptions}} selected",
+  ...i
+}) => {
+  const e = b(h), r = S({ showDefaultChevron: !t }), p = f(() => e.length ? e.length === 1 ? e[0].label : d(e, n) : s, [s, e, n]);
+  return /* @__PURE__ */ u(
+    "button",
+    {
+      ...i,
+      type: "button",
+      className: m(
+        c,
+        r.selectLabel,
+        a.FormElementInner,
+        a.RichSelectLabel
+      ),
+      children: [
+        l && /* @__PURE__ */ o("span", { className: r.prepend, children: l }),
+        /* @__PURE__ */ o(
+          C,
+          {
+            className: m(
+              r.contents,
+              !e.length && r.placeholder
+            ),
+            element: "span",
+            children: p
+          }
+        ),
+        /* @__PURE__ */ o("span", { className: r.append, children: t })
+      ]
+    }
+  );
+};
 export {
-  b as IressSelectLabel
+  j as IressSelectLabel
 };

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

@@ -0,0 +1,91 @@
+import { s as e } from "../../../sva-OmxClA9g.js";
+const n = e({
+  slots: ["selectLabel", "contents", "placeholder", "prepend", "append"],
+  base: {
+    selectLabel: {
+      display: "flex",
+      width: "[100%]",
+      justifyContent: "space-between",
+      alignItems: "center",
+      minHeight: "input.height",
+      paddingInline: "spacing.200",
+      paddingBlock: "spacing.000",
+      backgroundColor: "colour.neutral.10",
+      border: "input",
+      borderRadius: "radius.system.form",
+      boxSizing: "border-box",
+      fontFamily: "inherit",
+      fontSize: "inherit",
+      fontWeight: "inherit",
+      color: "colour.neutral.80",
+      cursor: "pointer",
+      transition: "common",
+      _focusWithin: {
+        backgroundColor: "colour.neutral.10",
+        borderColor: "colour.primary.fill",
+        layerStyle: "elevation.focus",
+        outline: "[none]"
+      },
+      _active: {
+        backgroundColor: "colour.neutral.10",
+        borderColor: "colour.primary.fill",
+        layerStyle: "elevation.focus",
+        outline: "[none]"
+      }
+    },
+    contents: {
+      textStyle: "typography.body.md",
+      backgroundColor: "transparent",
+      textAlign: "left",
+      borderWidth: "0",
+      flex: "1",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      padding: "[0]",
+      _focus: {
+        outline: "[none]"
+      },
+      _hover: {
+        cursor: "pointer"
+      }
+    },
+    placeholder: {
+      color: "colour.neutral.60",
+      textAlign: "left",
+      textStyle: "typography.body.md"
+    },
+    prepend: {
+      display: "inline-flex",
+      alignItems: "center",
+      color: "colour.neutral.40",
+      gap: "spacing.100"
+    },
+    append: {
+      display: "inline-flex",
+      alignItems: "center",
+      color: "colour.neutral.70",
+      gap: "spacing.100",
+      marginInlineEnd: "spacing.100",
+      pointerEvents: "none"
+    }
+  },
+  variants: {
+    showDefaultChevron: {
+      true: {
+        selectLabel: {
+          position: "relative"
+        },
+        append: {
+          selectChevron: !0
+        }
+      },
+      false: {
+        append: {}
+      }
+    }
+  }
+});
+export {
+  n as selectLabel
+};

package/dist/components/RichSelect/SelectMenu/SelectMenu.js

@@ -1,44 +1,115 @@
-import "react/jsx-runtime";
-import "react";
-import "../../Menu/Menu.js";
-import { z as P } from "../../../LoadingSuspense-BtzikVZk.js";
-import "../../../fuzzysort-BNka47rs.js";
-import "../../Badge/Badge.js";
-import "../../../index-cbHCAGLB.js";
-import "../../../helpers/formatting/toArray.js";
-import "../../../hooks/useIdIfNeeded.js";
-import "../../ButtonGroup/ButtonGroupProvider.js";
-import "../../../helpers/utility/propagateTestid.js";
-import "../../Card/Card.js";
-import "../../CheckboxGroup/CheckboxGroup.js";
-import "../../Col/Col.js";
-import "../../Expander/Expander.js";
-import "../../Form/FormContext.js";
-import "../../Modal/ModalProvider.js";
-import "../../Panel/Panel.js";
-import "../../Popover/Popover.js";
-import "../../../PopoverProvider-DZ92QV8I.js";
-import "../../Popover/InputPopover/InputPopover.js";
-import "../../../SlideoutProvider-CQh140HM.js";
-import "react-dom";
-import "../../RadioGroup/RadioGroup.js";
-import "../../../helpers/form/getFormControlValueAsString.js";
-import "../../Text/Text.js";
-import "../../../helpers/form/getFormControlValueAsStringIfDefined.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 "../../Menu/MenuProvider.js";
-import "../../CheckboxMark/CheckboxMark.types.js";
-import "../../CheckboxMark/CheckboxMark.js";
-import "../../../helpers/label-value/getValueFromLabelValues.js";
+import { jsxs as A, jsx as M } from "react/jsx-runtime";
+import { useMemo as y, useCallback as C, createElement as N } from "react";
+import { IressMenu as F } from "../../Menu/Menu.js";
+import "../../Menu/Menu.styles.js";
+import { c as T } from "../../../cx-DN21T1EH.js";
+import "../../Divider/Divider.styles.js";
+import { GlobalCSSClass as V } from "../../../enums.js";
+import "../../Menu/MenuItem/MenuItem.js";
+import { IressMenuHeading as L, IressMenuText as $ } from "../../Menu/MenuText/MenuText.js";
+import { propagateTestid as j } from "../../../helpers/utility/propagateTestid.js";
+import { toArray as u } from "../../../helpers/formatting/toArray.js";
+import { getFormControlValueAsStringIfDefined as O } from "../../../helpers/form/getFormControlValueAsStringIfDefined.js";
+import { getFormControlValueAsString as k } from "../../../helpers/form/getFormControlValueAsString.js";
+import { getValueFromLabelValues as E } from "../../../helpers/label-value/getValueFromLabelValues.js";
+import { IressSelectMenuItem as G } from "./SelectMenuItem.js";
+import { useIdIfNeeded as H } from "../../../hooks/useIdIfNeeded.js";
+import { selectMenu as q } from "./SelectMenu.styles.js";
+const se = ({
+  heading: r,
+  hideSelectedItems: n,
+  items: o = [],
+  limitDesktop: t,
+  limitMobile: e,
+  multiSelect: a,
+  noResults: s,
+  onChange: f,
+  role: h = "listbox",
+  selected: c,
+  selectedFirst: p,
+  ...i
+}) => {
+  const b = `${H({ id: i.id })}--label`, m = y(
+    () => E(c, a),
+    [a, c]
+  ), g = y(() => {
+    let l = p ? w(o, c, m) : o;
+    if (n) {
+      const d = u(m);
+      l = l.filter(
+        (v) => !d.includes(
+          O(v.value) ?? v.label
+        )
+      );
+    }
+    return z(l, t, e);
+  }, [
+    n,
+    o,
+    t,
+    e,
+    m,
+    c,
+    p
+  ]), I = g.length === 0, S = C(
+    (l) => {
+      const d = B(
+        o,
+        c,
+        l ?? void 0
+      );
+      f?.(
+        a ? d : d[0]
+      );
+    },
+    [o, a, f, c]
+  ), x = q();
+  return /* @__PURE__ */ A(
+    F,
+    {
+      ...i,
+      "aria-labelledby": typeof r == "string" ? b : i["aria-labelledby"],
+      multiSelect: a,
+      onChange: S,
+      role: h,
+      selected: m,
+      className: T(
+        x.root,
+        V.RichSelectMenu,
+        i.className
+      ),
+      children: [
+        typeof r == "string" ? /* @__PURE__ */ M(L, { id: b, children: r }) : r,
+        g.map((l, d) => /* @__PURE__ */ N(
+          G,
+          {
+            ...l,
+            "data-testid": j(i?.["data-testid"], "menu-item"),
+            key: `${k(
+              l.value ?? l.label
+            )}-${d}`
+          }
+        )),
+        I && (typeof s == "string" ? /* @__PURE__ */ M($, { children: s }) : s)
+      ]
+    }
+  );
+}, w = (r, n, o) => {
+  const t = u(n), e = u(o), a = r.filter(
+    (s) => !e.includes(s.value ?? s.label)
+  );
+  return t.length && a.length ? t.concat([{ label: "", value: "", divider: !0 }]).concat(a) : t.concat(a);
+}, z = (r, n, o) => r.map((t, e) => ({
+  ...t,
+  hiddenOnMobile: o ? e > o - 1 : !1
+})).slice(0, n ?? r.length), B = (r, n, o) => {
+  const t = u(n);
+  return u(o).map((e) => D(r, t, e)).filter((e) => e !== void 0);
+}, D = (r, n, o) => r?.find(
+  (e) => e.value === o || e.value === void 0 && e.label === o
+) ?? n.find(
+  (e) => e.value === o || e.value === void 0 && e.label === o
+);
 export {
-  P as IressSelectMenu
+  se as IressSelectMenu
 };

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

@@ -0,0 +1,14 @@
+import { s as t } from "../../../sva-OmxClA9g.js";
+const o = t({
+  slots: ["root"],
+  base: {
+    root: {
+      width: "[100%]"
+    }
+  },
+  variants: {},
+  defaultVariants: {}
+});
+export {
+  o as selectMenu
+};

package/dist/components/RichSelect/SelectMenu/SelectMenuItem.js

@@ -1,39 +1,64 @@
-import "react/jsx-runtime";
-import "../../../index-cbHCAGLB.js";
-import "../../../enums.js";
+import { jsx as t, jsxs as v } from "react/jsx-runtime";
+import { GlobalCSSClass as j } from "../../../enums.js";
 import "../../Menu/Menu.js";
-import { Z as H } from "../../../LoadingSuspense-BtzikVZk.js";
+import "../../Menu/Menu.styles.js";
+import { IressMenuDivider as C } from "../../Menu/MenuDivider/MenuDivider.js";
+import { IressMenuItem as g } from "../../Menu/MenuItem/MenuItem.js";
 import "react";
-import "../../Menu/MenuProvider.js";
-import "../../../PopoverProvider-DZ92QV8I.js";
-import "../../../fuzzysort-BNka47rs.js";
-import "../../Badge/Badge.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 "../../Modal/ModalProvider.js";
-import "../../Panel/Panel.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 "../../CheckboxMark/CheckboxMark.types.js";
-import "../../CheckboxMark/CheckboxMark.js";
+import "../../Popover/hooks/usePopover.js";
+import { IressText as D } from "../../Text/Text.js";
+import { c as G } from "../../../cx-DN21T1EH.js";
+const E = ({
+  className: a,
+  divider: i,
+  formattedLabel: o,
+  formattedMeta: s,
+  hiddenOnMobile: l,
+  label: r,
+  meta: m,
+  value: d,
+  append: c,
+  canToggle: p,
+  onClick: n,
+  onKeyDown: b,
+  prepend: u,
+  role: y,
+  selected: f,
+  "data-testid": I,
+  "aria-describedby": x,
+  "aria-label": M,
+  "aria-labelledby": S,
+  id: h
+  // Only the explicitly listed properties are passed through; any extended LabelValueMeta properties are excluded by explicit filtering
+}) => {
+  if (i)
+    return /* @__PURE__ */ t(C, {});
+  const e = s ?? m;
+  return /* @__PURE__ */ v(
+    g,
+    {
+      append: c,
+      canToggle: p,
+      className: G(a, j.RichSelectMenuItem),
+      srOnly: l ? !0 : void 0,
+      onClick: n,
+      onKeyDown: b,
+      prepend: u,
+      role: y,
+      selected: f,
+      value: d ?? r,
+      "data-testid": I,
+      "aria-describedby": x,
+      "aria-label": M,
+      "aria-labelledby": S,
+      id: h,
+      children: [
+        o ?? r,
+        e && /* @__PURE__ */ t(D, { textStyle: "typography.body.sm", color: "colour.neutral.70", children: e })
+      ]
+    }
+  );
+};
 export {
-  H as IressSelectMenuItem
+  E as IressSelectMenuItem
 };