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

package/dist/components/Menu/Menu.js

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

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

@@ -0,0 +1,77 @@
+export declare const menu: import('../../styled-system/types').SlotRecipeRuntimeFn<"root", {
+    fluid: {
+        true: {
+            root: {
+                width: "12/12";
+            };
+        };
+    };
+    insidePopover: {
+        true: {
+            root: {};
+        };
+    };
+    layout: {
+        stack: {
+            root: {
+                display: "inline-flex";
+                flexWrap: "wrap";
+                flexDirection: "column";
+            };
+        };
+        inline: {
+            root: {
+                display: "inline-flex";
+                columnGap: "spacing.1";
+                flexWrap: "wrap";
+            };
+        };
+        'inline-equal-width': {
+            root: {
+                display: "flex";
+                flexDirection: "row";
+                columnGap: "spacing.1";
+                '& > :not(hr)': {
+                    flex: "1";
+                    textAlign: "center";
+                };
+            };
+        };
+    };
+    multiSelect: {
+        true: {};
+    };
+    noWrap: {
+        true: {
+            root: {
+                '& > *': {
+                    maxWidth: "[100%]";
+                };
+            };
+        };
+    };
+    numbered: {
+        true: {
+            root: {
+                counterReset: "menu-step";
+            };
+        };
+    };
+    variant: {
+        side: {};
+        rail: {
+            root: {
+                bg: "colour.primary.fill";
+                px: "spacing.2";
+                py: "spacing.4";
+                gap: "spacing.2";
+                width: "[fit-content]";
+                '& .ids-divider--menu': {
+                    opacity: number;
+                };
+            };
+        };
+        radio: {};
+        subdraw: {};
+    };
+}>;

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

@@ -1,93 +1,17 @@
-import { s as e } from "../../sva-OmxClA9g.js";
-const o = e({
-  slots: ["root", "item", "checkboxMark", "append", "contents", "text"],
-  base: {
-    root: {
-      maxWidth: "[100%]"
-    },
-    contents: {
-      m: "none"
-    },
-    item: {
-      borderRadius: "radius.system.badge",
-      color: "colour.neutral.80",
-      cursor: "pointer",
-      display: "flex",
-      width: "[100%]",
-      px: "md",
-      py: "sm",
-      textAlign: "left",
-      textDecoration: "none",
-      textStyle: "typography.body.md",
-      transition: "[0.2s all ease-in-out]",
-      _focus: {
-        outline: "[none]",
-        bg: "colour.primary.surface",
-        color: "colour.primary.text"
-      },
-      _focusVisible: {
-        layerStyle: "elevation.focus",
-        zIndex: "[1]"
-      },
-      _hover: {
-        bg: "colour.primary.surface",
-        color: "colour.primary.text"
-      }
-    },
-    text: {
-      px: "md",
-      py: "sm"
-    },
-    append: {
-      marginInlineStart: "auto"
-    }
-  },
+import { s as t } from "../../sva-CsHRIRDW.js";
+const i = t({
+  slots: ["root"],
   variants: {
     fluid: {
       true: {
         root: {
-          width: "[100%]"
-        }
-      }
-    },
-    hasAppendOrPrepend: {
-      true: {
-        item: {
-          display: "flex",
-          alignItems: "center",
-          gap: "sm"
-        },
-        text: {
-          display: "flex",
-          alignItems: "center",
-          gap: "sm"
-        }
-      }
-    },
-    heading: {
-      true: {
-        text: {
-          pb: "xs",
-          "&:not(:first-child)": {
-            pt: "md"
-          }
+          width: "12/12"
         }
       }
     },
     insidePopover: {
       true: {
-        root: {
-          my: "spacing.2",
-          px: "spacing.2"
-        }
-      }
-    },
-    isActiveInPopover: {
-      true: {
-        item: {
-          bg: "colour.primary.surface",
-          color: "colour.primary.text"
-        }
+        root: {}
       }
     },
     layout: {
@@ -95,8 +19,7 @@ const o = e({
         root: {
           display: "inline-flex",
           flexWrap: "wrap",
-          flexDirection: "column",
-          rowGap: "spacing.1"
+          flexDirection: "column"
         }
       },
       inline: {
@@ -104,11 +27,6 @@ const o = e({
           display: "inline-flex",
           columnGap: "spacing.1",
           flexWrap: "wrap"
-        },
-        item: {
-          alignItems: "center",
-          justifyContent: "center",
-          height: "[100%]"
         }
       },
       "inline-equal-width": {
@@ -120,15 +38,6 @@ const o = e({
             flex: "1",
             textAlign: "center"
           }
-        },
-        item: {
-          alignItems: "center",
-          justifyContent: "center",
-          height: "[100%]",
-          textAlign: "center"
-        },
-        contents: {
-          flex: "1"
         }
       }
     },
@@ -141,67 +50,35 @@ const o = e({
           "& > *": {
             maxWidth: "[100%]"
           }
-        },
-        item: {
-          overflow: "hidden"
-        },
-        text: {
-          overflow: "hidden"
-        },
-        contents: {
-          whiteSpace: "nowrap"
         }
       }
     },
-    selected: {
+    numbered: {
       true: {
-        item: {
-          bg: "colour.neutral.20",
-          color: "colour.primary.text",
-          position: "relative"
-        }
-      }
-    }
-  },
-  compoundVariants: [
-    {
-      layout: "stack",
-      multiSelect: !1,
-      selected: !0,
-      css: {
-        item: {
-          _after: {
-            content: '""',
-            position: "absolute",
-            top: "spacing.0",
-            left: "spacing.0",
-            bottom: "spacing.0",
-            width: "[{radii.radius.025}]",
-            bg: "colour.primary.fill",
-            borderRadius: "radius.system.badge"
-          }
+        root: {
+          counterReset: "menu-step"
         }
       }
     },
-    {
-      layout: ["inline", "inline-equal-width"],
-      multiSelect: !1,
-      selected: !0,
-      css: {
-        item: {
-          _after: {
-            content: '""',
-            position: "absolute",
-            left: "spacing.0",
-            right: "spacing.0",
-            bottom: "spacing.0",
-            height: "[{radii.radius.025}]",
-            bg: "colour.primary.fill",
-            borderRadius: "radius.system.badge"
+    variant: {
+      side: {},
+      rail: {
+        root: {
+          bg: "colour.primary.fill",
+          px: "spacing.2",
+          py: "spacing.4",
+          gap: "spacing.2",
+          width: "[fit-content]",
+          "& .ids-divider--menu": {
+            opacity: 0.25
           }
         }
-      }
-    },
+      },
+      radio: {},
+      subdraw: {}
+    }
+  },
+  compoundVariants: [
     {
       layout: "stack",
       insidePopover: !0,
@@ -211,15 +88,6 @@ const o = e({
           flexDirection: "column"
         }
       }
-    },
-    {
-      selected: !0,
-      isActiveInPopover: !0,
-      css: {
-        item: {
-          bg: "colour.primary.surfaceHover"
-        }
-      }
     }
   ],
   defaultVariants: {
@@ -227,5 +95,5 @@ const o = e({
   }
 });
 export {
-  o as menu
+  i as menu
 };

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/components/Menu/MenuGroup/MenuGroup.d.ts

@@ -0,0 +1,59 @@
+import { ReactNode } from 'react';
+import { TextElements } from '../../Text';
+import { IressMenuTextProps } from '../MenuText/MenuText';
+import { IressPopoverProps } from '../../Popover';
+import { MenuVariants } from '../Menu';
+type MenuGroupRestProps<TLabel extends TextElements = 'h2', TVariant extends MenuVariants = undefined> = TVariant extends 'subdraw' ? Omit<IressPopoverProps, 'children' | 'activator'> : Omit<IressMenuTextProps<TLabel>, 'children'>;
+export type IressMenuGroupProps<TLabel extends TextElements = 'h2', TVariant extends MenuVariants = undefined> = MenuGroupRestProps<TLabel, TVariant> & {
+    /**
+     * Whether this header is active/expanded, revealing child drawer items.
+     * Only used when parent Menu has variant="side".
+     */
+    active?: boolean;
+    /**
+     * Append an element after the label. Only used when variant is 'subdraw' to add an icon indicating a submenu.
+     * By default, a right arrow icon is used when variant is 'subdraw', so this prop is only needed if you want to override that.
+     */
+    append?: ReactNode;
+    /**
+     * Label for the group, displayed as a non-selectable heading.
+     */
+    label: ReactNode;
+    /**
+     * Items within the group (typically menu items).
+     */
+    children?: ReactNode;
+    /**
+     * Uncontrolled default for the active/expanded state.
+     * Only used when parent Menu has variant="side".
+     */
+    defaultActive?: boolean;
+    /**
+     * Adds a divider after the group.
+     */
+    divider?: boolean;
+    /**
+     * Callback fired when the active/expanded state changes.
+     * Only used when parent Menu has variant="side".
+     */
+    onActiveChange?: (active?: boolean) => void;
+    /**
+     * Variant of the menu group.
+     * - `undefined` (default): Renders inline with label as heading and children below.
+     * - `'subdraw'`: Renders as a trigger that opens a fly-over submenu containing children.
+     * - `'side'`: Renders as a numbered header with an expandable drawer containing children.
+     */
+    variant?: TVariant;
+};
+/**
+ * MenuGroup component for grouping related menu items under a common heading.
+ * The heading is non-focusable and non-selectable, serving as a label for the group.
+ *
+ * When `variant="subdraw"`, the group label becomes a clickable trigger that opens
+ * a fly-over submenu containing the group's children.
+ */
+export declare const IressMenuGroup: {
+    <E extends TextElements = "div", TVariant extends MenuVariants = undefined>({ append, active: activeProp, children, className, defaultActive, divider, label, onActiveChange, variant: variantProp, "data-testid": dataTestId, ...restProps }: IressMenuGroupProps<E, TVariant>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};