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

package/dist/components/Menu/MenuGroup/MenuGroup.js

@@ -0,0 +1,127 @@
+import { jsxs as u, Fragment as v, jsx as r } from "react/jsx-runtime";
+import { useContext as y } from "react";
+import { IressMenuDivider as h } from "../MenuDivider/MenuDivider.js";
+import { IressMenuHeading as A } from "../MenuText/MenuText.js";
+import { IressPopover as _ } from "../../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";
+import { IressMenuItem as b } from "../MenuItem/MenuItem.js";
+import { MenuContext as S, IressMenu as V } from "../Menu.js";
+import { IressIcon as j } from "../../Icon/Icon.js";
+import "../../Icon/Icon.styles.js";
+import "../../Icon/IconProvider.js";
+import { propagateTestid as M } from "../../../helpers/utility/propagateTestid.js";
+import { menuGroup as k } from "./MenuGroup.styles.js";
+import { useControlledState as $ } from "../../../hooks/useControlledState.js";
+import { useIdIfNeeded as D } from "../../../hooks/useIdIfNeeded.js";
+import { c as o } from "../../../cx-DN21T1EH.js";
+import { GlobalCSSClass as i } from "../../../enums.js";
+const E = ({
+  append: g,
+  active: w,
+  children: m,
+  className: p,
+  defaultActive: G,
+  divider: c,
+  label: l,
+  onActiveChange: I,
+  variant: C,
+  "data-testid": e,
+  ...s
+}) => {
+  const d = D(s), t = y(S), x = F(), n = C ?? t?.variant;
+  if (n && (x?.type === "listbox" || t?.role === "listbox"))
+    throw new Error(
+      '[IressMenuGroup] IressMenu with variants cannot be used within a Menu with role="listbox" or Popover with type="listbox", as it is not intended for that use case. Please unset the variant for grouping in listbox contexts.'
+    );
+  const { value: f, setValue: N } = $({
+    component: "IressMenuGroup",
+    defaultValue: G,
+    onChange: I,
+    value: w
+  });
+  if (n == "side") {
+    const a = k({
+      numbered: t?.numbered,
+      open: f
+    });
+    return /* @__PURE__ */ u(v, { children: [
+      /* @__PURE__ */ u(
+        "div",
+        {
+          className: o(a.root, p),
+          ...s,
+          "data-testid": e,
+          children: [
+            /* @__PURE__ */ r(
+              b,
+              {
+                className: o(a.activator, i.MenuGroupActivator),
+                "data-testid": M(e, "activator"),
+                onClick: () => N(!f),
+                "aria-expanded": f,
+                id: d,
+                "aria-controls": `${d}-content`,
+                children: l
+              }
+            ),
+            /* @__PURE__ */ r(
+              "div",
+              {
+                className: o(a.wrapper, i.MenuGroup),
+                id: `${d}-content`,
+                children: /* @__PURE__ */ r("div", { className: a.content, children: m })
+              }
+            )
+          ]
+        }
+      ),
+      c && /* @__PURE__ */ r(h, {})
+    ] });
+  }
+  return n == "subdraw" ? /* @__PURE__ */ u(v, { children: [
+    /* @__PURE__ */ r(
+      _,
+      {
+        align: "right-start",
+        nested: !0,
+        offset: { mainAxis: 0, crossAxis: 0 },
+        type: t?.role === "list" ? void 0 : t?.role,
+        virtualFocus: x?.isVirtualFocus,
+        ...s,
+        className: o(i.MenuGroup, p),
+        "data-testid": M(e, "subdraw"),
+        activator: /* @__PURE__ */ r(
+          b,
+          {
+            append: g ?? /* @__PURE__ */ r(j, { name: "keyboard_arrow_right" }),
+            className: i.MenuGroupActivator,
+            "data-testid": M(e, "subdraw__trigger"),
+            children: l
+          }
+        ),
+        children: /* @__PURE__ */ r(V, { children: m })
+      }
+    ),
+    c && /* @__PURE__ */ r(h, {})
+  ] }) : /* @__PURE__ */ u(v, { children: [
+    /* @__PURE__ */ r(
+      A,
+      {
+        "data-testid": e,
+        ...s,
+        className: o(i.MenuGroup, p),
+        srOnly: n == "rail" ? !0 : void 0,
+        children: l
+      }
+    ),
+    m,
+    c && /* @__PURE__ */ r(h, {})
+  ] });
+};
+E.displayName = "IressMenuGroup";
+export {
+  E as IressMenuGroup
+};

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

@@ -0,0 +1,39 @@
+export declare const menuGroup: import('../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "wrapper" | "root" | "activator", {
+    numbered: {
+        true: {
+            root: {
+                counterIncrement: "menu-step";
+            };
+            activator: {
+                _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]";
+                };
+            };
+        };
+    };
+    open: {
+        true: {
+            root: {
+                _before: {
+                    transform: "scaleX(1)";
+                };
+            };
+            activator: {
+                color: "colour.primary.text";
+                bg: "colour.neutral.20";
+            };
+            wrapper: {
+                gridTemplateRows: "1fr";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,94 @@
+import { s as e } from "../../../sva-CsHRIRDW.js";
+const o = e({
+  slots: ["root", "activator", "content", "wrapper"],
+  base: {
+    root: {
+      position: "relative",
+      _before: {
+        content: '""',
+        position: "absolute",
+        left: "spacing.0",
+        top: "spacing.0",
+        bottom: "spacing.0",
+        width: "[4px]",
+        bg: "colour.primary.fill",
+        pointerEvents: "none",
+        transform: "scaleX(0)",
+        transition: "[transform 150ms ease-in-out]",
+        transformOrigin: "top left",
+        transitionDelay: "300ms"
+      }
+    },
+    activator: {
+      focusable: "inset",
+      appearance: "none",
+      transition: "common",
+      width: "12/12",
+      display: "flex",
+      alignItems: "center",
+      gap: "spacing.3",
+      px: "spacing.4",
+      py: "spacing.3",
+      color: "colour.neutral.70",
+      cursor: "pointer",
+      "&&": {
+        textStyle: "typography.heading.4"
+      },
+      _hover: {
+        bg: "colour.neutral.20"
+      }
+    },
+    content: {
+      overflow: "hidden",
+      width: "12/12",
+      bg: "colour.neutral.20"
+    },
+    wrapper: {
+      display: "grid",
+      gridTemplateRows: "0fr",
+      transition: "[grid-template-rows 0.3s ease-in-out]"
+    }
+  },
+  variants: {
+    numbered: {
+      true: {
+        root: {
+          counterIncrement: "menu-step"
+        },
+        activator: {
+          _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]"
+          }
+        }
+      }
+    },
+    open: {
+      true: {
+        root: {
+          _before: {
+            transform: "scaleX(1)"
+          }
+        },
+        activator: {
+          color: "colour.primary.text",
+          bg: "colour.neutral.20"
+        },
+        wrapper: {
+          gridTemplateRows: "1fr"
+        }
+      }
+    }
+  }
+});
+export {
+  o as menuGroup
+};

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

@@ -0,0 +1,111 @@
+import { ReactNode, MouseEventHandler, KeyboardEventHandler, HTMLAttributes, ReactElement, FocusEventHandler, ElementType, ComponentPropsWithoutRef } from 'react';
+import { ButtonElement, ButtonInstance, ButtonRef } from '../../Button';
+import { FormControlValue } from '../../../types';
+import { PopoverItemHookReturn } from '../../Popover';
+import { IressCSSProps, IressCustomiseSlot, IressTestProps } from '../../../interfaces';
+import { MaterialSymbol } from 'material-symbols';
+export interface MenuItemRenderProps<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined> extends Pick<Partial<PopoverItemHookReturn>, 'id' | 'ref' | 'tabIndex'> {
+    /**
+     * If the item is inside a menu with the role of `listbox` and is selected, this will be set to `true`.
+     */
+    'aria-current'?: HTMLAttributes<ButtonRef<C, THref>>['aria-current'];
+    /**
+     * If the item is inside a menu with the role of `menu` or `listbox` and is selected, this will be set to `true`.
+     */
+    'aria-selected'?: HTMLAttributes<ButtonRef<C, THref>>['aria-selected'];
+    /**
+     * The children to be rendered inside the menu item.
+     */
+    children?: ReactNode;
+    /**
+     * The classes to be applied to the menu item, styled appropriately based on the menu it is inside.
+     */
+    className?: string;
+    /**
+     * Handles the selection of the menu item.
+     */
+    onClick?: MouseEventHandler<ButtonInstance<C, THref>>;
+    /**
+     * Handles the selection of the menu item via keyboard.
+     */
+    onKeyDown?: KeyboardEventHandler<ButtonInstance<C, THref>>;
+    /**
+     * The role of the menu item based on the menu it is inside.
+     */
+    role?: HTMLAttributes<ButtonInstance<C, THref>>['role'];
+}
+export type IressMenuItemProps<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined> = IressCSSProps & IressTestProps & Omit<ComponentPropsWithoutRef<ButtonElement<C, THref>>, 'element' | 'value'> & {
+    /**
+     * Section after menu item content.
+     */
+    append?: ReactNode;
+    /**
+     * When true, the item can be toggled even in single-select mode.
+     */
+    canToggle?: boolean;
+    /**
+     * The children to be rendered inside the menu item, describing the action.
+     */
+    children?: ReactNode;
+    /**
+     * The class name to be applied to the menu item.
+     */
+    className?: string;
+    /**
+     * Adds a divider after any content.
+     * If you would like to add a divider before the menu item, use a `<IressMenuDivider />` instead.
+     */
+    divider?: boolean;
+    /**
+     * Change the component that will be rendered as the menu item, used for third-party libraries that require a specific element type.
+     * By default, it will render a button or an anchor tag based on the `href` prop.
+     */
+    element?: C;
+    /**
+     * Contains a URL or a URL fragment that the hyperlink points to.
+     * If this property is set and no `element` was set, an anchor tag will be rendered. Otherwise, a button will be rendered.
+     */
+    href?: THref;
+    /**
+     * The icon to be displayed in the button. If provided, the icon will be displayed and the `children` will be used as screen reader text (although you can explicitly override this with `aria-label`)
+     */
+    icon?: MaterialSymbol;
+    /**
+     * Style overrides for the menu item wrapper, which is the element rendered at the top level and contains a `role` attribute for accessibility. This is useful for menu item variants that require additional structure, such as the side nav drawer items.
+     * This is only applicable for the `listitem` role, as other roles will have the `role` attribute applied directly to the menu item element itself.
+     */
+    listItemStyle?: IressCustomiseSlot;
+    /**
+     * Emitted when the menu item is blurred.
+     */
+    onBlur?: FocusEventHandler<ButtonInstance<C, THref>>;
+    /**
+     * Emitted when the menu item is clicked.
+     */
+    onClick?: MouseEventHandler<ButtonInstance<C, THref>>;
+    /**
+     * Emitted when a key is pressed while focused on the menu item.
+     */
+    onKeyDown?: KeyboardEventHandler<ButtonInstance<C, THref>>;
+    /**
+     * When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
+     */
+    loading?: boolean | string;
+    /**
+     * Section before menu item content.
+     */
+    prepend?: ReactNode;
+    /**
+     * When true, shows the item in selected state.
+     */
+    selected?: boolean;
+    /**
+     * To be used when menu type is listbox.
+     */
+    value?: FormControlValue;
+};
+export declare const IressMenuItem: (<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined>(props: IressMenuItemProps<C, THref> & {
+    ref?: ButtonRef<C, THref>;
+}) => ReactElement) & {
+    displayName: "IressMenuItem";
+};