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

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

@@ -1,104 +1,74 @@
-import "react/jsx-runtime";
-import { c as Wr } 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 { 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/Menu.styles.js";
+import "../../Divider/Divider.styles.js";
+import { GlobalCSSClass as p } from "../../../enums.js";
 import "../../Menu/MenuItem/MenuItem.js";
-import "../../Menu/MenuText/MenuText.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 { IressMenuHeading as I } from "../../Menu/MenuText/MenuText.js";
+import { I as v } from "../../../Button-mmhMLwp9.js";
+import "../../Button/CloseButton/CloseButton.js";
 import "../../Popover/Popover.js";
 import "../../Popover/Popover.styles.js";
-import "../../../InputPopover-BWWuoQZ2.js";
-import "../../Popover/hooks/usePopoverItem.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 "../SelectSearch/SelectSearch.styles.js";
-import "../../Popover/hooks/usePopover.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 "../RichSelect.styles.js";
+import "../../Popover/InputPopover/InputPopover.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 {
-  Wr as IressSelectHeading
+  q as IressSelectHeading
 };

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

@@ -1,46 +1,46 @@
-import { jsxs as u, jsx as t } from "react/jsx-runtime";
+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 m } from "../../../enums.js";
-import { c as o } from "../../../cx-DN21T1EH.js";
+import { GlobalCSSClass as a } from "../../../enums.js";
+import { c as m } from "../../../cx-DN21T1EH.js";
 const j = ({
-  append: s,
+  append: t,
   className: c,
-  placeholder: l,
-  prepend: n,
-  selected: i,
-  selectedOptionsText: a = "{{numOptions}} selected",
-  ...p
+  placeholder: s,
+  prepend: l,
+  selected: h,
+  selectedOptionsText: n = "{{numOptions}} selected",
+  ...i
 }) => {
-  const e = b(i), r = S({ showDefaultChevron: !s }), h = f(() => e.length ? e.length === 1 ? e[0].label : d(e, a) : l, [l, e, a]);
+  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",
     {
-      ...p,
+      ...i,
       type: "button",
-      className: o(
+      className: m(
         c,
         r.selectLabel,
-        m.FormElementInner,
-        m.RichSelectLabel
+        a.FormElementInner,
+        a.RichSelectLabel
       ),
       children: [
-        n && /* @__PURE__ */ t("span", { className: o("iress-u-button__prepend", r.prepend), children: n }),
-        /* @__PURE__ */ t(
+        l && /* @__PURE__ */ o("span", { className: r.prepend, children: l }),
+        /* @__PURE__ */ o(
           C,
           {
-            className: o(
+            className: m(
               r.contents,
               !e.length && r.placeholder
             ),
             element: "span",
-            children: h
+            children: p
           }
         ),
-        /* @__PURE__ */ t("span", { className: r.append, children: s })
+        /* @__PURE__ */ o("span", { className: r.append, children: t })
       ]
     }
   );

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

@@ -1,4 +1,4 @@
-import { s as e } from "../../../sva-TRyehFkb.js";
+import { s as e } from "../../../sva-OmxClA9g.js";
 const n = e({
   slots: ["selectLabel", "contents", "placeholder", "prepend", "append"],
   base: {
@@ -8,8 +8,8 @@ const n = e({
       justifyContent: "space-between",
       alignItems: "center",
       minHeight: "input.height",
-      paddingInline: "spacing.200",
-      paddingBlock: "spacing.000",
+      paddingInline: "spacing.2",
+      paddingBlock: "spacing.0",
       backgroundColor: "colour.neutral.10",
       border: "input",
       borderRadius: "radius.system.form",
@@ -59,14 +59,14 @@ const n = e({
       display: "inline-flex",
       alignItems: "center",
       color: "colour.neutral.40",
-      gap: "spacing.100"
+      gap: "spacing.1"
     },
     append: {
       display: "inline-flex",
       alignItems: "center",
       color: "colour.neutral.70",
-      gap: "spacing.100",
-      marginInlineEnd: "spacing.100",
+      gap: "spacing.1",
+      marginInlineEnd: "spacing.1",
       pointerEvents: "none"
     }
   },

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

@@ -1,115 +1,115 @@
-import { jsxs as h, jsx as y } from "react/jsx-runtime";
-import { useMemo as g, useCallback as N, createElement as F } from "react";
-import { IressMenu as T } from "../../Menu/Menu.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 V } from "../../../cx-DN21T1EH.js";
+import { c as T } from "../../../cx-DN21T1EH.js";
 import "../../Divider/Divider.styles.js";
-import { GlobalCSSClass as L } from "../../../enums.js";
+import { GlobalCSSClass as V } from "../../../enums.js";
 import "../../Menu/MenuItem/MenuItem.js";
-import { IressMenuHeading as $, IressMenuText as j } from "../../Menu/MenuText/MenuText.js";
-import { propagateTestid as C } from "../../../helpers/utility/propagateTestid.js";
-import { toArray as i } from "../../../helpers/formatting/toArray.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 ce = ({
+const se = ({
   heading: r,
-  hideSelectedItems: t,
+  hideSelectedItems: n,
   items: o = [],
-  limitDesktop: l,
+  limitDesktop: t,
   limitMobile: e,
   multiSelect: a,
-  noResults: d,
+  noResults: s,
   onChange: f,
-  role: I = "listbox",
-  selected: u,
-  selectedFirst: b,
-  ...c
+  role: h = "listbox",
+  selected: c,
+  selectedFirst: p,
+  ...i
 }) => {
-  const p = `${H({ id: c.id })}--label`, m = g(
-    () => E(u, a),
-    [a, u]
-  ), v = g(() => {
-    let n = b ? w(o, u, m) : o;
-    if (t) {
-      const s = i(m);
-      n = n.filter(
-        (M) => !s.includes(
-          O(M.value) ?? M.label
+  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(n, l, e);
+    return z(l, t, e);
   }, [
-    t,
+    n,
     o,
-    l,
+    t,
     e,
     m,
-    u,
-    b
-  ]), S = v.length === 0, x = N(
-    (n) => {
-      const s = B(
+    c,
+    p
+  ]), I = g.length === 0, S = C(
+    (l) => {
+      const d = B(
         o,
-        u,
-        n ?? void 0
+        c,
+        l ?? void 0
       );
-      f == null || f(
-        a ? s : s[0]
+      f?.(
+        a ? d : d[0]
       );
     },
-    [o, a, f, u]
-  ), A = q();
-  return /* @__PURE__ */ h(
-    T,
+    [o, a, f, c]
+  ), x = q();
+  return /* @__PURE__ */ A(
+    F,
     {
-      ...c,
-      "aria-labelledby": typeof r == "string" ? p : c["aria-labelledby"],
+      ...i,
+      "aria-labelledby": typeof r == "string" ? b : i["aria-labelledby"],
       multiSelect: a,
-      onChange: x,
-      role: I,
+      onChange: S,
+      role: h,
       selected: m,
-      className: V(
-        A.root,
-        L.RichSelectMenu,
-        c.className
+      className: T(
+        x.root,
+        V.RichSelectMenu,
+        i.className
       ),
       children: [
-        typeof r == "string" ? /* @__PURE__ */ y($, { id: p, children: r }) : r,
-        v.map((n, s) => /* @__PURE__ */ F(
+        typeof r == "string" ? /* @__PURE__ */ M(L, { id: b, children: r }) : r,
+        g.map((l, d) => /* @__PURE__ */ N(
           G,
           {
-            ...n,
-            "data-testid": C(c == null ? void 0 : c["data-testid"], "menu-item"),
+            ...l,
+            "data-testid": j(i?.["data-testid"], "menu-item"),
             key: `${k(
-              n.value ?? n.label
-            )}-${s}`
+              l.value ?? l.label
+            )}-${d}`
           }
         )),
-        S && (typeof d == "string" ? /* @__PURE__ */ y(j, { children: d }) : d)
+        I && (typeof s == "string" ? /* @__PURE__ */ M($, { children: s }) : s)
       ]
     }
   );
-}, w = (r, t, o) => {
-  const l = i(t), e = i(o), a = r.filter(
-    (d) => !e.includes(d.value ?? d.label)
+}, w = (r, n, o) => {
+  const t = u(n), e = u(o), a = r.filter(
+    (s) => !e.includes(s.value ?? s.label)
   );
-  return l.length && a.length ? l.concat([{ label: "", value: "", divider: !0 }]).concat(a) : l.concat(a);
-}, z = (r, t, o) => r.map((l, e) => ({
-  ...l,
+  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, t ?? r.length), B = (r, t, o) => {
-  const l = i(t);
-  return i(o).map((e) => D(r, l, e)).filter((e) => e !== void 0);
-}, D = (r, t, o) => (r == null ? void 0 : r.find(
+})).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
-)) ?? t.find(
+) ?? n.find(
   (e) => e.value === o || e.value === void 0 && e.label === o
 );
 export {
-  ce as IressSelectMenu
+  se as IressSelectMenu
 };

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

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

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

@@ -1,58 +1,64 @@
-import { jsx as a, jsxs as x } from "react/jsx-runtime";
-import { c as N } from "../../../InputPopover-BWWuoQZ2.js";
-import { GlobalCSSClass as i } from "../../../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 "../../Menu/Menu.styles.js";
-import { IressMenuDivider as j } from "../../Menu/MenuDivider/MenuDivider.js";
-import { IressMenuItem as v } from "../../Menu/MenuItem/MenuItem.js";
+import { IressMenuDivider as C } from "../../Menu/MenuDivider/MenuDivider.js";
+import { IressMenuItem as g } from "../../Menu/MenuItem/MenuItem.js";
 import "react";
 import "../../Popover/hooks/usePopover.js";
-const z = ({
-  className: s,
-  divider: t,
-  formattedLabel: l,
-  hiddenOnMobile: m,
-  label: e,
-  meta: r,
-  value: o,
-  append: d,
-  canToggle: c,
-  onClick: b,
-  onKeyDown: p,
-  prepend: n,
-  role: u,
+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": y,
+  "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
-}) => t ? /* @__PURE__ */ a(j, {}) : /* @__PURE__ */ x(
-  v,
-  {
-    append: d,
-    canToggle: c,
-    className: N(s, i.RichSelectMenuItem, {
-      [i.HiddenMobile]: m
-    }),
-    onClick: b,
-    onKeyDown: p,
-    prepend: n,
-    role: u,
-    selected: f,
-    value: o ?? e,
-    "data-testid": I,
-    "aria-describedby": y,
-    "aria-label": M,
-    "aria-labelledby": S,
-    id: h,
-    children: [
-      l ?? e,
-      r && /* @__PURE__ */ a("span", { className: "iress-display--block", children: r })
-    ]
-  }
-);
+}) => {
+  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 {
-  z as IressSelectMenuItem
+  E as IressSelectMenuItem
 };