@iress-oss/ids-components 6.0.0-alpha.3 → 6.0.0-alpha.30

package/dist/components/Menu/MenuItem/MenuItem.js

@@ -1,187 +1,248 @@
-import { jsx as l, jsxs as K, Fragment as U } from "react/jsx-runtime";
-import { forwardRef as H, useContext as W, useRef as L, useMemo as n, useCallback as B, useImperativeHandle as V, cloneElement as $ } from "react";
-import { useMenuItemRole as q } from "./hooks/useMenuItemRole.js";
-import { idsLogger as z } from "../../../helpers/utility/idsLogger.js";
-import { MenuContext as J } from "../Menu.js";
-import { IressCheckboxMark as Q } from "../../CheckboxMark/CheckboxMark.js";
+import { jsx as i, jsxs as B, Fragment as D } from "react/jsx-runtime";
+import { forwardRef as z, useContext as J, useRef as Q, useMemo as c, useCallback as F, useImperativeHandle as X, cloneElement as Y } from "react";
+import { useMenuItemRole as Z } from "./hooks/useMenuItemRole.js";
+import { idsLogger as _ } from "../../../helpers/utility/idsLogger.js";
+import { MenuContext as $ } from "../Menu.js";
+import { IressCheckboxMark as T } from "../../CheckboxMark/CheckboxMark.js";
 import "../../CheckboxMark/CheckboxMark.styles.js";
-import { propagateTestid as X } from "../../../helpers/utility/propagateTestid.js";
-import { c as Y } from "../../../css-fGu_jDvv.js";
-import { c as Z } from "../../../cx-DN21T1EH.js";
-import { s as _ } from "../../../is-valid-prop-Ce0wiweq.js";
-import { menu as T } from "../Menu.styles.js";
+import { propagateTestid as L } from "../../../helpers/utility/propagateTestid.js";
+import { c as ee } from "../../../css-DVJ-ALYD.js";
+import { c as te } from "../../../cx-DN21T1EH.js";
+import { s as re } from "../../../is-valid-prop-C5D641yn.js";
+import { menuItem as oe } from "./MenuItem.styles.js";
 import "../../Popover/Popover.js";
 import "../../Popover/Popover.styles.js";
 import "../../Popover/InputPopover/InputPopover.js";
-import { usePopoverItem as ee } from "../../Popover/hooks/usePopoverItem.js";
-import { a as te } from "../../../floating-ui.react-BetVZ099.js";
-import { IressMenuDivider as re } from "../MenuDivider/MenuDivider.js";
-import { PopoverContext as oe } from "../../Popover/hooks/usePopover.js";
-import { GlobalCSSClass as se } from "../../../enums.js";
-import { spreadUnlessUndefined as ne } from "../../../helpers/utility/spreadUnlessUndefined.js";
-const ie = ({
-  append: c,
-  canToggle: m,
-  children: h,
-  className: x,
-  "data-testid": a,
-  divider: D,
-  element: k,
-  onBlur: y,
-  onClick: p,
-  onKeyDown: f,
-  prepend: d,
-  selected: S,
-  value: s,
-  ...M
-}, F) => {
-  const e = W(J), b = W(oe), u = q(), w = L(null), r = n(() => (e?.supportsSelection && S && z(
+import { usePopover as se } from "../../Popover/hooks/usePopover.js";
+import { usePopoverItem as ie } from "../../Popover/hooks/usePopoverItem.js";
+import { a as ne } from "../../../floating-ui.react-B0nDXRN6.js";
+import { IressMenuDivider as ae } from "../MenuDivider/MenuDivider.js";
+import { GlobalCSSClass as ce } from "../../../enums.js";
+import { spreadUnlessUndefined as G } from "../../../helpers/utility/spreadUnlessUndefined.js";
+import { IressRadioMark as le } from "../../RadioMark/RadioMark.js";
+import "../../RadioMark/RadioMark.styles.js";
+import { IressIcon as ue } from "../../Icon/Icon.js";
+import "../../Icon/Icon.styles.js";
+import "../../Icon/IconProvider.js";
+import { IressTooltip as me } from "../../Tooltip/Tooltip.js";
+import "../../Tooltip/Tooltip.styles.js";
+const pe = (...l) => (u) => {
+  l.forEach((o) => {
+    o && (typeof o == "function" ? o(u) : o.current = u);
+  });
+}, fe = ({
+  append: l,
+  canToggle: u,
+  children: o,
+  className: y,
+  "data-testid": d,
+  divider: H,
+  element: w,
+  icon: p,
+  listItemStyle: C,
+  onBlur: P,
+  onClick: b,
+  onKeyDown: v,
+  prepend: h,
+  selected: k,
+  value: n,
+  ...A
+}, V) => {
+  const e = J($), f = se(), m = Z(), x = Q(null), r = c(() => (e?.supportsSelection && k && _(
     "IressMenuItem: The selected prop on IressMenuItem does not work when used inside an IressMenu with role=listbox or the multiSelect prop set to true. Use the selected prop on IressMenu instead."
-  ), e?.supportsSelection ? e.isSelected(s) : S), [e, S, s]), C = n(
+  ), e?.supportsSelection ? e.isSelected(n) : k), [e, k, n]), N = c(
     () => ({
       "aria-current": e?.supportsSelection ? void 0 : r,
       "aria-selected": e?.supportsSelection ? r : void 0
     }),
     [e?.supportsSelection, r]
-  ), P = B(
+  ), E = F(
     (t) => {
-      p?.(t), !t.defaultPrevented && (e?.supportsSelection && e.toggle(s, m || e?.multiSelect ? !r : !0), e?.hasArrowKeyNav && !e?.multiSelect && (b?.setShow?.(!1), b?.getFocusableActivator?.()?.focus(), b?.resetActiveIndex()));
+      b?.(t), !t.defaultPrevented && (e?.supportsSelection && e.toggle(n, u || e?.multiSelect ? !r : !0), e?.hasArrowKeyNav && !e?.multiSelect && (f?.setShow?.(!1), f?.getFocusableActivator?.()?.focus(), f?.resetActiveIndex()));
     },
-    [m, e, p, b, r, s]
-  ), A = B(
+    [u, e, b, f, r, n]
+  ), O = F(
     (t) => {
-      f?.(t), !t.defaultPrevented && t.key === "Tab" && e?.supportsSelection && e?.changeOnBlur && e?.toggle(s, !0);
+      v?.(t), !t.defaultPrevented && t.key === "Tab" && e?.supportsSelection && e?.changeOnBlur && e?.toggle(n, !0);
     },
-    [e, f, s]
-  ), G = n(
+    [e, v, n]
+  ), q = c(
     () => ({
       onBlur: (t) => {
-        const o = new Event("blur", {
+        const s = new Event("blur", {
           bubbles: !0
         });
-        Object.defineProperty(o, "target", {
+        Object.defineProperty(s, "target", {
           writable: !1,
           value: { value: "", ...t.target }
-        }), Object.defineProperty(o, "relatedTarget", {
+        }), Object.defineProperty(s, "relatedTarget", {
           writable: !1,
           value: { value: "", ...t.target }
-        }), y?.(o), !o.defaultPrevented && e?.supportsSelection && e?.changeOnBlur && e?.toggle(s, !0);
+        }), P?.(s), !s.defaultPrevented && e?.supportsSelection && e?.changeOnBlur && e?.toggle(n, !0);
       },
       onKeyDown: (t) => {
         if (t.key === "Enter") {
-          const o = new Event("click", {
+          const s = new Event("click", {
             bubbles: !0
           });
-          if (Object.defineProperty(o, "target", {
+          if (Object.defineProperty(s, "target", {
             writable: !1,
             value: { value: "", ...t.target }
-          }), p?.(o), o.defaultPrevented)
+          }), b?.(s), s.defaultPrevented)
             return;
           t.preventDefault(), e?.toggle(
-            s,
-            m || e?.multiSelect ? !r : !0
+            n,
+            u || e?.multiSelect ? !r : !0
           );
         }
-        f?.(t);
+        v?.(t);
       }
     }),
-    [m, e, y, p, f, r, s]
-  ), { isActiveInPopover: N, ...v } = ee(
+    [u, e, P, b, v, r, n]
+  ), { isActiveInPopover: R, ...I } = ie(
     void 0,
-    G
-  ), i = n(
-    () => T({
-      hasAppendOrPrepend: !!(c ?? d ?? e?.multiSelect),
-      isActiveInPopover: N,
+    q
+  ), a = c(
+    // eslint-disable-next-line react-hooks/refs -- popover uses elementRef.current; exhaustive deps warning is intentionally suppressed
+    () => oe({
+      active: !!f?.isActiveActivator(x.current),
+      hasAppendOrPrepend: !!(l ?? h ?? e?.multiSelect ?? e?.numbered),
+      isActiveInPopover: R,
       layout: e?.layout,
       multiSelect: !!e?.multiSelect,
       noWrap: e?.noWrap,
-      selected: r
+      numbered: e?.numbered,
+      role: m,
+      selected: r,
+      variant: e?.variant
     }),
     [
-      c,
-      N,
+      l,
+      R,
       e?.layout,
       e?.multiSelect,
       e?.noWrap,
-      d,
+      e?.numbered,
+      e?.variant,
+      f,
+      h,
+      m,
       r
     ]
-  ), E = n(() => e?.multiSelect ? /* @__PURE__ */ l(
-    Q,
+  ), j = c(() => e?.multiSelect ? /* @__PURE__ */ i(
+    T,
     {
       checked: r,
-      className: i.checkboxMark,
-      "data-testid": X(a, "checkbox-mark")
+      className: a.checkboxMark,
+      "data-testid": L(d, "checkbox-mark")
     }
-  ) : d, [
-    i.checkboxMark,
-    a,
-    e?.multiSelect,
+  ) : e?.variant == "radio" ? /* @__PURE__ */ i(
+    le,
+    {
+      checked: r,
+      className: a.checkboxMark,
+      "data-testid": L(d, "checkbox")
+    }
+  ) : h, [
+    a.checkboxMark,
     d,
+    e?.multiSelect,
+    e?.variant,
+    h,
     r
-  ]), [O, I] = n(
-    () => _(M),
-    [M]
-  ), j = n(
+  ]), [K, S] = c(
+    () => re(A),
+    [A]
+  ), g = c(
     () => ({
-      ...C,
-      children: /* @__PURE__ */ K(U, { children: [
-        E,
-        h && /* @__PURE__ */ l("span", { className: i.contents, children: h }),
-        c && /* @__PURE__ */ l("span", { className: i.append, children: c })
+      ...N,
+      children: /* @__PURE__ */ B(D, { children: [
+        j,
+        (p ?? o) && /* @__PURE__ */ i("span", { className: a.contents, children: p ? /* @__PURE__ */ i(ue, { name: p }) : o }),
+        l && /* @__PURE__ */ i("span", { className: a.append, children: l })
       ] }),
-      className: Z(
-        x,
-        i.item,
-        Y(O),
-        se.MenuItem
+      className: te(
+        y,
+        a.root,
+        ee(K),
+        ce.MenuItem
       ),
-      "data-testid": a,
-      id: v.id,
-      onClick: P,
-      onKeyDown: A,
+      "data-testid": d,
+      id: I.id,
+      onClick: E,
+      onKeyDown: O,
       ref: (t) => {
-        e?.isComposite || v.ref?.(t), t && (w.current = t);
+        e?.isComposite || I.ref?.(t), t && (x.current = t);
       },
-      role: u === "listitem" ? void 0 : u,
-      tabIndex: e?.hasArrowKeyNav ? v.tabIndex : void 0
+      role: m === "listitem" ? void 0 : m,
+      tabIndex: e?.hasArrowKeyNav ? I.tabIndex : void 0
     }),
     [
-      c,
-      C,
-      h,
-      x,
-      i.append,
-      i.contents,
-      i.item,
-      a,
-      P,
-      A,
+      l,
+      N,
+      o,
+      y,
+      a.append,
+      a.contents,
+      a.root,
+      d,
+      E,
+      O,
+      p,
       e?.hasArrowKeyNav,
       e?.isComposite,
-      v,
-      E,
-      u,
-      O
+      I,
+      j,
+      m,
+      K
     ]
-  ), g = n(() => {
-    const t = k ?? (I.href ? "a" : "button"), o = t === "button" ? { type: "button" } : {};
-    return /* @__PURE__ */ l(
+  ), M = c(() => {
+    const t = w ?? (S.href ? "a" : "button"), s = t === "button" ? { type: "button" } : {};
+    if (p && o) {
+      const W = String(o);
+      return /* @__PURE__ */ i(
+        me,
+        {
+          tooltipText: W,
+          align: e?.variant == "rail" ? "right" : void 0,
+          children: /* @__PURE__ */ i(
+            t,
+            {
+              "aria-label": W,
+              ...G(g, S),
+              ...s
+            }
+          )
+        }
+      );
+    }
+    return /* @__PURE__ */ i(
       t,
       {
-        ...ne(j, I),
-        ...o
+        ...G(g, S),
+        ...s
       }
     );
-  }, [k, I, j]);
-  V(F, () => w.current);
-  const R = n(() => u === "listitem" ? /* @__PURE__ */ l("span", { role: "listitem", children: g }) : g, [g, u]);
-  return /* @__PURE__ */ K(U, { children: [
-    e?.isComposite ? /* @__PURE__ */ l(te, { render: (t) => $(R, t) }) : R,
-    D && /* @__PURE__ */ l(re, { mt: "spacing.1" })
+  }, [o, w, p, e?.variant, S, g]);
+  X(V, () => x.current);
+  const U = c(() => m === "listitem" ? /* @__PURE__ */ i("span", { role: "listitem", ...C, children: M }) : M, [C, M, m]);
+  return /* @__PURE__ */ B(D, { children: [
+    e?.isComposite ? /* @__PURE__ */ i(
+      ne,
+      {
+        render: (t) => Y(U, {
+          ...t,
+          ref: pe(
+            g.ref,
+            t.ref
+          )
+        })
+      }
+    ) : U,
+    H && /* @__PURE__ */ i(ae, {})
   ] });
-}, Ae = H(ie);
+}, de = z(fe);
+de.displayName = "IressMenuItem";
 export {
-  Ae as IressMenuItem
+  de as IressMenuItem
 };

package/dist/components/Menu/MenuItem/MenuItem.styles.d.ts

@@ -0,0 +1,170 @@
+export declare const menuItem: import('../../../styled-system/types').SlotRecipeRuntimeFn<"append" | "contents" | "root" | "checkboxMark", {
+    active: {
+        true: {
+            root: {
+                bg: "colour.neutral.20";
+            };
+        };
+    };
+    hasAppendOrPrepend: {
+        true: {
+            root: {
+                display: "flex";
+                alignItems: "center";
+                gap: "spacing.2";
+            };
+        };
+    };
+    insidePopover: {
+        true: {
+            root: {};
+        };
+    };
+    isActiveInPopover: {
+        true: {
+            root: {
+                bg: "colour.neutral.20";
+            };
+        };
+    };
+    isHeading: {
+        true: {
+            root: {
+                pb: "spacing.1";
+                '&:not(:first-child)': {
+                    pt: "spacing.4";
+                };
+            };
+        };
+    };
+    layout: {
+        stack: {};
+        inline: {
+            root: {
+                alignItems: "center";
+                justifyContent: "center";
+                height: "[100%]";
+                py: "spacing.4";
+            };
+        };
+        'inline-equal-width': {
+            root: {
+                alignItems: "center";
+                justifyContent: "center";
+                height: "[100%]";
+                textAlign: "center";
+                py: "spacing.4";
+            };
+            contents: {
+                flex: "1";
+            };
+        };
+    };
+    multiSelect: {
+        true: {};
+    };
+    numbered: {
+        true: {
+            root: {
+                _before: {
+                    content: "counter(menu-step, decimal-leading-zero)";
+                    aspectRatio: "1";
+                    borderRadius: "50%";
+                    border: "[2px solid currentColor]";
+                    width: "[2em]";
+                    height: "[2em]";
+                    display: "inline-flex";
+                    alignItems: "center";
+                    justifyContent: "center";
+                    flex: "[0]";
+                };
+                '&:not(.ids-menu__group-activator, .ids-menu__group *)': {
+                    counterIncrement: "menu-step";
+                };
+                '.ids-menu__group &': {
+                    _before: {
+                        display: "none";
+                    };
+                };
+            };
+        };
+    };
+    noWrap: {
+        true: {
+            root: {
+                overflow: "hidden";
+            };
+            contents: {
+                whiteSpace: "nowrap";
+            };
+        };
+    };
+    role: {
+        listitem: {
+            root: {
+                focusable: "inset";
+            };
+        };
+        menuitem: {
+            root: {
+                focusable: "inset";
+            };
+        };
+        option: {
+            root: {
+                _focusVisible: {
+                    bg: "colour.neutral.30";
+                    color: "colour.neutral.90";
+                    outline: "[0]";
+                };
+            };
+        };
+    };
+    selected: {
+        true: {
+            root: {
+                color: "colour.neutral.90";
+                position: "relative";
+                _after: {
+                    content: "\"\"";
+                    position: "absolute";
+                    top: "spacing.0";
+                    left: "spacing.0";
+                    bottom: "spacing.0";
+                    width: "[2px]";
+                    bg: "colour.primary.fill";
+                };
+            };
+        };
+    };
+    variant: {
+        side: {
+            root: {
+                color: "colour.neutral.70";
+                textStyle: "typography.heading.4";
+                px: "spacing.4";
+                borderTop: "table";
+                _hover: {
+                    bg: "colour.neutral.30";
+                    color: "colour.primary.text";
+                };
+                '.ids-menu__group &': {
+                    textStyle: "typography.body.md.regular";
+                    borderTop: "[none]";
+                };
+            };
+        };
+        rail: {
+            root: {
+                color: "colour.primary.onFill";
+                borderRadius: "radius.system.button";
+                _hover: {
+                    bg: "colour.primary.surface";
+                    color: "colour.primary.text";
+                };
+            };
+        };
+        radio: {};
+        subdraw: {};
+    };
+}>;