@iress-oss/ids-components 6.0.0-alpha.7 → 6.0.0-alpha.9

package/dist/{src/components → components}/Menu/Menu.d.ts

@@ -107,4 +107,7 @@ export interface MenuContextValue<T = FormControlValue, TMultiple extends boolea
     toggle: (value?: T, flag?: boolean) => void;
 }
 export declare const MenuContext: Context<MenuContextValue<FormControlValue, false> | undefined>;
-export declare const IressMenu: <T = FormControlValue, TMultiple extends boolean = false>({ changeOnBlur, className, defaultSelected, fluid, id: idProp, layout, multiSelect, noWrap, onChange, role: roleProp, selected: selectedProp, ...restProps }: IressMenuProps<T, TMultiple>) => import("react/jsx-runtime").JSX.Element;
+export declare const IressMenu: {
+    <T = FormControlValue, TMultiple extends boolean = false>({ changeOnBlur, className, defaultSelected, fluid, id: idProp, layout, multiSelect, noWrap, onChange, role: roleProp, selected: selectedProp, ...restProps }: IressMenuProps<T, TMultiple>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Menu/Menu.js

@@ -1,95 +1,100 @@
-import { jsx as p } from "react/jsx-runtime";
-import { createContext as w, useContext as z, useMemo as s, useCallback as E, useEffect as G } from "react";
-import { useControlledState as H } from "../../hooks/useControlledState.js";
-import { useIdIfNeeded as K } from "../../hooks/useIdIfNeeded.js";
-import { C as R } from "../../floating-ui.react-BetVZ099.js";
-import { s as v } from "../../factory-oPXoMw9H.js";
-import { toArray as q } from "../../helpers/formatting/toArray.js";
-import { menu as B } from "./Menu.styles.js";
-import { c as D } from "../../cx-DN21T1EH.js";
-import { PopoverContext as F } from "../Popover/hooks/usePopover.js";
-import { GlobalCSSClass as J } from "../../enums.js";
-function L() {
+import { jsx as c } from "react/jsx-runtime";
+import { createContext as w, useMemo as s, useCallback as z, useEffect as E } from "react";
+import { useControlledState as G } from "../../hooks/useControlledState.js";
+import { useIdIfNeeded as H } from "../../hooks/useIdIfNeeded.js";
+import { C as K } from "../../floating-ui.react-BetVZ099.js";
+import { s as v } from "../../factory-CWvlR9Yh.js";
+import { toArray as R } from "../../helpers/formatting/toArray.js";
+import { menu as q } from "./Menu.styles.js";
+import { c as B } from "../../cx-DN21T1EH.js";
+import { GlobalCSSClass as D } from "../../enums.js";
+import "../Popover/Popover.js";
+import "../Popover/Popover.styles.js";
+import "../Popover/InputPopover/InputPopover.js";
+import { usePopover as F } from "../Popover/hooks/usePopover.js";
+import "../Popover/hooks/useFloatingPopover.js";
+function J() {
   return w(void 0);
 }
-function O() {
-  return Q;
+function L() {
+  return O;
 }
-const Q = L(), to = ({
-  changeOnBlur: f,
+const O = J(), Q = ({
+  changeOnBlur: d,
   className: b,
   defaultSelected: M,
   fluid: A,
   id: I,
   layout: n = "stack",
-  multiSelect: t,
-  noWrap: u,
+  multiSelect: r,
+  noWrap: m,
   onChange: N,
-  role: m = "list",
+  role: f = "list",
   selected: h,
   ...k
 }) => {
-  const r = K({ id: I }), o = z(F), e = s(() => o?.type === "listbox" || o?.type === "menu" ? (o.setHasInnerRole(!0), o.type) : t ? "listbox" : m, [t, o, m]), P = s(() => ({
-    "aria-multiselectable": e === "listbox" && t ? !0 : void 0,
+  const t = H({ id: I }), o = F(), e = s(() => o?.type === "listbox" || o?.type === "menu" ? (o.setHasInnerRole(!0), o.type) : r ? "listbox" : f, [r, o, f]), y = s(() => ({
+    "aria-multiselectable": e === "listbox" && r ? !0 : void 0,
     "aria-orientation": e === "menu" ? n === "stack" ? "vertical" : "horizontal" : void 0
-  }), [n, t, e]), i = s(
+  }), [n, r, e]), i = s(
     () => e && ["menu", "listbox"].includes(e),
     [e]
-  ), l = s(
+  ), u = s(
     () => !o && i,
     [o, i]
   ), a = s(
-    () => e === "listbox" || !!t,
-    [e, t]
-  ), { toggleValue: C, value: d } = H({
+    () => e === "listbox" || !!r,
+    [e, r]
+  ), { toggleValue: C, value: l } = G({
     component: "IressMenu",
     defaultValue: M,
-    multiple: t,
+    multiple: r,
     onChange: N,
     propName: "selected",
     value: h
-  }), x = E(
-    (c) => !a || c === void 0 ? !1 : t ? q(d).includes(c) : d === c,
-    [t, d, a]
-  ), y = s(
+  }), x = z(
+    (p) => !a || p === void 0 ? !1 : r ? R(l).includes(p) : l === p,
+    [r, l, a]
+  ), P = s(
     () => ({
-      changeOnBlur: f && e === "listbox",
+      changeOnBlur: d && e === "listbox",
       hasArrowKeyNav: i,
-      isComposite: l,
+      isComposite: u,
       isSelected: x,
       layout: n,
-      multiSelect: t,
-      noWrap: u,
+      multiSelect: r,
+      noWrap: m,
       role: e,
       supportsSelection: a,
       toggle: C
     }),
     [
-      f,
+      d,
       i,
-      l,
+      u,
       x,
       n,
-      t,
-      u,
+      r,
+      m,
       e,
       a,
       C
     ]
   );
-  G(() => (o?.toggleAriaControls && r && o.toggleAriaControls(r, !0), () => {
-    o?.toggleAriaControls && r && o.toggleAriaControls(r, !1);
-  }), [r, o]);
-  const V = B({ fluid: A, layout: n, noWrap: u, insidePopover: !!o }), g = {
+  E(() => (o?.toggleAriaControls && t && o.toggleAriaControls(t, !0), () => {
+    o?.toggleAriaControls && t && o.toggleAriaControls(t, !1);
+  }), [t, o]);
+  const V = q({ fluid: A, layout: n, noWrap: m, insidePopover: !!o }), g = {
     ...k,
-    ...P,
-    className: D(b, V.root, J.Menu),
-    id: r,
+    ...y,
+    className: B(b, V.root, D.Menu),
+    id: t,
     role: e
-  }, { Provider: j } = O();
-  return /* @__PURE__ */ p(j, { value: y, children: l ? /* @__PURE__ */ p(R, { loop: e === "menu", render: /* @__PURE__ */ p(v.div, { ...g }) }) : /* @__PURE__ */ p(v.div, { ...g }) });
+  }, { Provider: j } = L();
+  return /* @__PURE__ */ c(j, { value: P, children: u ? /* @__PURE__ */ c(K, { loop: e === "menu", render: /* @__PURE__ */ c(v.div, { ...g }) }) : /* @__PURE__ */ c(v.div, { ...g }) });
 };
+Q.displayName = "IressMenu";
 export {
-  to as IressMenu,
-  Q as MenuContext
+  Q as IressMenu,
+  O as MenuContext
 };

package/dist/{src/components → components}/Menu/Menu.styles.d.ts

@@ -1,4 +1,12 @@
 export declare const menu: import('../../styled-system/types').SlotRecipeRuntimeFn<"text" | "contents" | "root" | "append" | "item" | "checkboxMark", {
+    active: {
+        true: {
+            item: {
+                bg: "colour.primary.surface";
+                color: "colour.primary.text";
+            };
+        };
+    };
     fluid: {
         true: {
             root: {

package/dist/components/Menu/Menu.styles.js

@@ -1,4 +1,4 @@
-import { s as e } from "../../sva-OmxClA9g.js";
+import { s as e } from "../../sva-wwkEhoyo.js";
 const o = e({
   slots: ["root", "item", "checkboxMark", "append", "contents", "text"],
   base: {
@@ -43,6 +43,14 @@ const o = e({
     }
   },
   variants: {
+    active: {
+      true: {
+        item: {
+          bg: "colour.primary.surface",
+          color: "colour.primary.text"
+        }
+      }
+    },
     fluid: {
       true: {
         root: {

package/dist/components/Menu/MenuDivider/MenuDivider.d.ts

@@ -0,0 +1,6 @@
+import { IressDividerProps } from '../../Divider';
+export type IressMenuDividerProps = Omit<IressDividerProps, 'vertical' | 'role'>;
+export declare const IressMenuDivider: {
+    ({ className, ...restProps }: IressMenuDividerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Menu/MenuDivider/MenuDivider.js

@@ -1,25 +1,26 @@
 import { jsx as t } from "react/jsx-runtime";
 import { useContext as i } from "react";
-import { MenuContext as m } from "../Menu.js";
-import { IressDivider as s } from "../../Divider/Divider.js";
+import { MenuContext as s } from "../Menu.js";
+import { IressDivider as m } from "../../Divider/Divider.js";
 import "../../Divider/Divider.styles.js";
 import { c as n } from "../../../cx-DN21T1EH.js";
 import { GlobalCSSClass as a } from "../../../enums.js";
-const d = ({
-  className: r,
-  ...e
+const l = ({
+  className: e,
+  ...o
 }) => {
-  const o = i(m);
+  const r = i(s);
   return /* @__PURE__ */ t(
-    s,
+    m,
     {
-      ...e,
-      className: n(r, a.MenuDivider),
-      role: o?.role === "menu" ? void 0 : "presentation",
-      vertical: o?.layout && o.layout !== "stack"
+      ...o,
+      className: n(e, a.MenuDivider),
+      role: r?.role === "menu" ? void 0 : "presentation",
+      vertical: r?.layout && r.layout !== "stack"
     }
   );
 };
+l.displayName = "IressMenuDivider";
 export {
-  d as IressMenuDivider
+  l as IressMenuDivider
 };

package/dist/{src/components → components}/Menu/MenuItem/MenuItem.d.ts

@@ -94,6 +94,8 @@ export type IressMenuItemProps<C extends ElementType | undefined = undefined, TH
      */
     value?: FormControlValue;
 };
-export declare const IressMenuItem: <C extends ElementType | undefined = undefined, THref extends string | undefined = undefined>(props: IressMenuItemProps<C, THref> & {
+export declare const IressMenuItem: (<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined>(props: IressMenuItemProps<C, THref> & {
     ref?: ButtonRef<C, THref>;
-}) => ReactElement;
+}) => ReactElement) & {
+    displayName: "IressMenuItem";
+};

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

@@ -1,59 +1,63 @@
-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 { jsx as a, jsxs as K, Fragment as U } from "react/jsx-runtime";
+import { forwardRef as G, useContext as H, useRef as L, useMemo as n, useCallback as W, 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 "../../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 Y } from "../../../css-w5PYGgYt.js";
 import { c as Z } from "../../../cx-DN21T1EH.js";
-import { s as _ } from "../../../is-valid-prop-Ce0wiweq.js";
+import { s as _ } from "../../../is-valid-prop-DI4RCMon.js";
 import { menu as T } from "../Menu.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 { usePopover as ee } from "../../Popover/hooks/usePopover.js";
+import { usePopoverItem as te } from "../../Popover/hooks/usePopoverItem.js";
+import { a as re } from "../../../floating-ui.react-BetVZ099.js";
+import { IressMenuDivider as oe } from "../MenuDivider/MenuDivider.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,
+const ie = (...l) => (u) => {
+  l.forEach((i) => {
+    i && (typeof i == "function" ? i(u) : i.current = u);
+  });
+}, ce = ({
+  append: l,
+  canToggle: u,
+  children: i,
+  className: k,
+  "data-testid": f,
+  divider: B,
+  element: x,
+  onBlur: w,
+  onClick: d,
+  onKeyDown: b,
+  prepend: v,
   selected: S,
   value: s,
-  ...M
-}, F) => {
-  const e = W(J), b = W(oe), u = q(), w = L(null), r = n(() => (e?.supportsSelection && S && z(
+  ...C
+}, D) => {
+  const e = H(J), m = ee(), p = q(), I = L(null), r = n(() => (e?.supportsSelection && S && z(
     "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(s) : S), [e, S, s]), P = n(
     () => ({
       "aria-current": e?.supportsSelection ? void 0 : r,
       "aria-selected": e?.supportsSelection ? r : void 0
     }),
     [e?.supportsSelection, r]
-  ), P = B(
+  ), A = W(
     (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()));
+      d?.(t), !t.defaultPrevented && (e?.supportsSelection && e.toggle(s, u || e?.multiSelect ? !r : !0), e?.hasArrowKeyNav && !e?.multiSelect && (m?.setShow?.(!1), m?.getFocusableActivator?.()?.focus(), m?.resetActiveIndex()));
     },
-    [m, e, p, b, r, s]
-  ), A = B(
+    [u, e, d, m, r, s]
+  ), N = W(
     (t) => {
-      f?.(t), !t.defaultPrevented && t.key === "Tab" && e?.supportsSelection && e?.changeOnBlur && e?.toggle(s, !0);
+      b?.(t), !t.defaultPrevented && t.key === "Tab" && e?.supportsSelection && e?.changeOnBlur && e?.toggle(s, !0);
     },
-    [e, f, s]
-  ), G = n(
+    [e, b, s]
+  ), F = n(
     () => ({
       onBlur: (t) => {
         const o = new Event("blur", {
@@ -65,7 +69,7 @@ const ie = ({
         }), Object.defineProperty(o, "relatedTarget", {
           writable: !1,
           value: { value: "", ...t.target }
-        }), y?.(o), !o.defaultPrevented && e?.supportsSelection && e?.changeOnBlur && e?.toggle(s, !0);
+        }), w?.(o), !o.defaultPrevented && e?.supportsSelection && e?.changeOnBlur && e?.toggle(s, !0);
       },
       onKeyDown: (t) => {
         if (t.key === "Enter") {
@@ -75,113 +79,128 @@ const ie = ({
           if (Object.defineProperty(o, "target", {
             writable: !1,
             value: { value: "", ...t.target }
-          }), p?.(o), o.defaultPrevented)
+          }), d?.(o), o.defaultPrevented)
             return;
           t.preventDefault(), e?.toggle(
             s,
-            m || e?.multiSelect ? !r : !0
+            u || e?.multiSelect ? !r : !0
           );
         }
-        f?.(t);
+        b?.(t);
       }
     }),
-    [m, e, y, p, f, r, s]
-  ), { isActiveInPopover: N, ...v } = ee(
+    [u, e, w, d, b, r, s]
+  ), { isActiveInPopover: E, ...h } = te(
     void 0,
-    G
-  ), i = n(
+    F
+  ), c = n(
+    // eslint-disable-next-line react-hooks/refs -- popover uses elementRef.current; exhaustive deps warning is intentionally suppressed
     () => T({
-      hasAppendOrPrepend: !!(c ?? d ?? e?.multiSelect),
-      isActiveInPopover: N,
+      active: !!m?.isActiveActivator(I.current),
+      hasAppendOrPrepend: !!(l ?? v ?? e?.multiSelect),
+      isActiveInPopover: E,
       layout: e?.layout,
       multiSelect: !!e?.multiSelect,
       noWrap: e?.noWrap,
       selected: r
     }),
     [
-      c,
-      N,
+      l,
+      E,
       e?.layout,
       e?.multiSelect,
       e?.noWrap,
-      d,
+      m,
+      v,
       r
     ]
-  ), E = n(() => e?.multiSelect ? /* @__PURE__ */ l(
+  ), O = n(() => e?.multiSelect ? /* @__PURE__ */ a(
     Q,
     {
       checked: r,
-      className: i.checkboxMark,
-      "data-testid": X(a, "checkbox-mark")
+      className: c.checkboxMark,
+      "data-testid": X(f, "checkbox-mark")
     }
-  ) : d, [
-    i.checkboxMark,
-    a,
+  ) : v, [
+    c.checkboxMark,
+    f,
     e?.multiSelect,
-    d,
+    v,
     r
-  ]), [O, I] = n(
-    () => _(M),
-    [M]
-  ), j = n(
+  ]), [j, g] = n(
+    () => _(C),
+    [C]
+  ), y = n(
     () => ({
-      ...C,
+      ...P,
       children: /* @__PURE__ */ K(U, { children: [
-        E,
-        h && /* @__PURE__ */ l("span", { className: i.contents, children: h }),
-        c && /* @__PURE__ */ l("span", { className: i.append, children: c })
+        O,
+        i && /* @__PURE__ */ a("span", { className: c.contents, children: i }),
+        l && /* @__PURE__ */ a("span", { className: c.append, children: l })
       ] }),
       className: Z(
-        x,
-        i.item,
-        Y(O),
+        k,
+        c.item,
+        Y(j),
         se.MenuItem
       ),
-      "data-testid": a,
-      id: v.id,
-      onClick: P,
-      onKeyDown: A,
+      "data-testid": f,
+      id: h.id,
+      onClick: A,
+      onKeyDown: N,
       ref: (t) => {
-        e?.isComposite || v.ref?.(t), t && (w.current = t);
+        e?.isComposite || h.ref?.(t), t && (I.current = t);
       },
-      role: u === "listitem" ? void 0 : u,
-      tabIndex: e?.hasArrowKeyNav ? v.tabIndex : void 0
+      role: p === "listitem" ? void 0 : p,
+      tabIndex: e?.hasArrowKeyNav ? h.tabIndex : void 0
     }),
     [
-      c,
-      C,
-      h,
-      x,
-      i.append,
-      i.contents,
-      i.item,
-      a,
+      l,
       P,
+      i,
+      k,
+      c.append,
+      c.contents,
+      c.item,
+      f,
       A,
+      N,
       e?.hasArrowKeyNav,
       e?.isComposite,
-      v,
-      E,
-      u,
-      O
+      h,
+      O,
+      p,
+      j
     ]
-  ), g = n(() => {
-    const t = k ?? (I.href ? "a" : "button"), o = t === "button" ? { type: "button" } : {};
-    return /* @__PURE__ */ l(
+  ), M = n(() => {
+    const t = x ?? (g.href ? "a" : "button"), o = t === "button" ? { type: "button" } : {};
+    return /* @__PURE__ */ a(
       t,
       {
-        ...ne(j, I),
+        ...ne(y, g),
         ...o
       }
     );
-  }, [k, I, j]);
-  V(F, () => w.current);
-  const R = n(() => u === "listitem" ? /* @__PURE__ */ l("span", { role: "listitem", children: g }) : g, [g, u]);
+  }, [x, g, y]);
+  V(D, () => I.current);
+  const R = n(() => p === "listitem" ? /* @__PURE__ */ a("span", { role: "listitem", children: M }) : M, [M, p]);
   return /* @__PURE__ */ K(U, { children: [
-    e?.isComposite ? /* @__PURE__ */ l(te, { render: (t) => $(R, t) }) : R,
-    D && /* @__PURE__ */ l(re, { mt: "spacing.1" })
+    e?.isComposite ? /* @__PURE__ */ a(
+      re,
+      {
+        render: (t) => $(R, {
+          ...t,
+          ref: ie(
+            y.ref,
+            t.ref
+          )
+        })
+      }
+    ) : R,
+    B && /* @__PURE__ */ a(oe, { mt: "spacing.1" })
   ] });
-}, Ae = H(ie);
+}, le = G(ce);
+le.displayName = "IressMenuItem";
 export {
-  Ae as IressMenuItem
+  le as IressMenuItem
 };

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

@@ -1,10 +1,14 @@
-import { useContext as t } from "react";
-import { MenuContext as n } from "../../Menu.js";
-import { PopoverContext as i } from "../../../Popover/hooks/usePopover.js";
-const s = () => {
-  const e = t(n), r = t(i), o = e?.role ?? r?.type;
+import { useContext as r } from "react";
+import { MenuContext as i } from "../../Menu.js";
+import "../../../Popover/Popover.js";
+import "../../../Popover/Popover.styles.js";
+import "../../../Popover/InputPopover/InputPopover.js";
+import { usePopover as m } from "../../../Popover/hooks/usePopover.js";
+import "../../../Popover/hooks/useFloatingPopover.js";
+const x = () => {
+  const t = r(i), e = m(), o = t?.role ?? e?.type;
   return o === "listbox" ? "option" : o === "menu" ? "menuitem" : o === "list" ? "listitem" : void 0;
 };
 export {
-  s as useMenuItemRole
+  x as useMenuItemRole
 };

package/dist/{src/components → components}/Menu/MenuText/MenuText.d.ts

@@ -15,5 +15,11 @@ export type IressMenuTextProps<E extends TextElements = 'div'> = IressTextProps<
      */
     prepend?: ReactNode;
 };
-export declare const IressMenuText: <E extends TextElements = "div">({ append, children, className, "data-testid": dataTestid, divider, element, prepend, role, textStyle, ...restProps }: IressMenuTextProps<E>) => import("react/jsx-runtime").JSX.Element;
-export declare const IressMenuHeading: <E extends TextElements = "h2">({ className, element, textStyle, ...restProps }: IressMenuTextProps<E>) => import("react/jsx-runtime").JSX.Element;
+export declare const IressMenuText: {
+    <E extends TextElements = "div">({ append, children, className, "data-testid": dataTestid, divider, element, prepend, role, textStyle, ...restProps }: IressMenuTextProps<E>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const IressMenuHeading: {
+    <E extends TextElements = "h2">({ className, element, textStyle, ...restProps }: IressMenuTextProps<E>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};