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

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

@@ -0,0 +1,231 @@
+import { s as e } from "../../sva-TRyehFkb.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"
+    }
+  },
+  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"
+          }
+        }
+      }
+    },
+    insidePopover: {
+      true: {
+        root: {
+          my: "spacing.200",
+          px: "spacing.200"
+        }
+      }
+    },
+    isActiveInPopover: {
+      true: {
+        item: {
+          bg: "colour.primary.surface",
+          color: "colour.primary.text"
+        }
+      }
+    },
+    layout: {
+      stack: {
+        root: {
+          display: "inline-flex",
+          flexWrap: "wrap",
+          flexDirection: "column",
+          rowGap: "spacing.100"
+        }
+      },
+      inline: {
+        root: {
+          display: "inline-flex",
+          columnGap: "spacing.100",
+          flexWrap: "wrap"
+        },
+        item: {
+          alignItems: "center",
+          justifyContent: "center",
+          height: "[100%]"
+        }
+      },
+      "inline-equal-width": {
+        root: {
+          display: "flex",
+          flexDirection: "row",
+          columnGap: "spacing.100",
+          "& > :not(hr)": {
+            flex: "1",
+            textAlign: "center"
+          }
+        },
+        item: {
+          alignItems: "center",
+          justifyContent: "center",
+          height: "[100%]",
+          textAlign: "center"
+        },
+        contents: {
+          flex: "1"
+        }
+      }
+    },
+    multiSelect: {
+      true: {}
+    },
+    noWrap: {
+      true: {
+        root: {
+          "& > *": {
+            maxWidth: "[100%]"
+          }
+        },
+        item: {
+          overflow: "hidden"
+        },
+        text: {
+          overflow: "hidden"
+        },
+        contents: {
+          whiteSpace: "nowrap"
+        }
+      }
+    },
+    selected: {
+      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.000",
+            left: "spacing.000",
+            bottom: "spacing.000",
+            width: "[{radii.radius.025}]",
+            bg: "colour.primary.fill",
+            borderRadius: "radius.system.badge"
+          }
+        }
+      }
+    },
+    {
+      layout: ["inline", "inline-equal-width"],
+      multiSelect: !1,
+      selected: !0,
+      css: {
+        item: {
+          _after: {
+            content: '""',
+            position: "absolute",
+            left: "spacing.000",
+            right: "spacing.000",
+            bottom: "spacing.000",
+            height: "[{radii.radius.025}]",
+            bg: "colour.primary.fill",
+            borderRadius: "radius.system.badge"
+          }
+        }
+      }
+    },
+    {
+      layout: "stack",
+      insidePopover: !0,
+      css: {
+        root: {
+          display: "flex",
+          flexDirection: "column"
+        }
+      }
+    },
+    {
+      selected: !0,
+      isActiveInPopover: !0,
+      css: {
+        item: {
+          bg: "colour.primary.surfaceHover"
+        }
+      }
+    }
+  ],
+  defaultVariants: {
+    layout: "stack"
+  }
+});
+export {
+  o as menu
+};

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

@@ -1,38 +1,25 @@
-import "react/jsx-runtime";
-import { o as J } from "../../../LoadingSuspense-D0TO0TDT.js";
-import "react";
-import "../../../fuzzysort-eoXOpoo6.js";
-import "../../Badge/Badge.js";
-import "../../../index-2QXL0WYc.js";
-import "../../ButtonGroup/ButtonGroupProvider.js";
-import "../../Card/Card.js";
-import "../../CheckboxGroup/CheckboxGroup.js";
-import "../../Col/Col.js";
-import "../../Divider/Divider.js";
-import "../../Expander/Expander.js";
-import "../../Form/FormContext.js";
-import "../Menu.js";
-import "../hooks/useMenu.js";
-import "../../../PopoverProvider-Cw5-iAgZ.js";
-import "../../CheckboxMark/CheckboxMark.types.js";
-import "../../CheckboxMark/CheckboxMark.js";
-import "../../Modal/ModalProvider.js";
-import "../../Panel/Panel.js";
-import "../../Popover/Popover.js";
-import "../../Popover/InputPopover/InputPopover.js";
-import "../../../SlideoutProvider-CQh140HM.js";
-import "react-dom";
-import "../../RadioGroup/RadioGroup.js";
-import "../../Text/Text.js";
-import "../../Skeleton/Skeleton.js";
-import "../../SkipLink/SkipLink.js";
-import "../../Stack/Stack.js";
-import "../../Table/TableContext.js";
-import "../../TabSet/Tab/Tab.js";
-import "../../TabSet/TabSet.js";
-import "../../Toggle/Toggle.js";
-import "../../Tooltip/Tooltip.js";
-import "../../ValidationMessage/ValidationMessage.js";
+import { jsx as e } from "react/jsx-runtime";
+import { useContext as i } from "react";
+import { MenuContext as s } from "../Menu.js";
+import { IressDivider as m } from "../../Divider/Divider.js";
+import "../../Divider/Divider.styles.js";
+import { c as a } from "../../../cx-DN21T1EH.js";
+import { GlobalCSSClass as l } from "../../../enums.js";
+const d = ({
+  className: r,
+  ...t
+}) => {
+  const o = i(s);
+  return /* @__PURE__ */ e(
+    m,
+    {
+      ...t,
+      className: a(r, l.MenuDivider),
+      role: (o == null ? void 0 : o.role) === "menu" ? void 0 : "presentation",
+      vertical: (o == null ? void 0 : o.layout) && o.layout !== "stack"
+    }
+  );
+};
 export {
-  J as IressMenuDivider
+  d as IressMenuDivider
 };

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

@@ -1,11 +1,189 @@
-import "react/jsx-runtime";
-import "react";
-import "./hooks/useMenuItemRole.js";
-import "./hooks/useMenuItemAria.js";
-import "./hooks/useMenuItemButtonProps.js";
-import { r as a } from "../../../LoadingSuspense-D0TO0TDT.js";
-import "./hooks/useMenuItemInteractions.js";
-import "./hooks/useMenuItemComposite.js";
+import { jsx as p, jsxs as F, Fragment as G } from "react/jsx-runtime";
+import { forwardRef as J, useContext as H, useRef as Q, useMemo as a, useCallback as L, 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 B } from "../Menu.js";
+import { IressCheckboxMark as T } from "../../CheckboxMark/CheckboxMark.js";
+import "../../CheckboxMark/CheckboxMark.styles.js";
+import { propagateTestid as K } from "../../../helpers/utility/propagateTestid.js";
+import { c as D } from "../../../cva-B2x59Dph.js";
+import { c as $ } from "../../../cx-DN21T1EH.js";
+import { s as tt } from "../../../is-valid-prop-DFFvE05x.js";
+import { menu as et } from "../Menu.styles.js";
+import "../../Popover/Popover.js";
+import "../../Popover/Popover.styles.js";
+import "../../../InputPopover-BWWuoQZ2.js";
+import { usePopoverItem as rt } from "../../Popover/hooks/usePopoverItem.js";
+import { a as st } from "../../../floating-ui.react-CPN4oQCc.js";
+import { IressMenuDivider as ot } from "../MenuDivider/MenuDivider.js";
+import { PopoverContext as it } from "../../Popover/hooks/usePopover.js";
+import { GlobalCSSClass as at } from "../../../enums.js";
+import { spreadUnlessUndefined as lt } from "../../../helpers/utility/spreadUnlessUndefined.js";
+const ct = ({
+  append: b,
+  canToggle: h,
+  children: I,
+  className: m,
+  "data-testid": S,
+  divider: V,
+  element: P,
+  onBlur: g,
+  onClick: l,
+  onKeyDown: c,
+  prepend: v,
+  selected: u,
+  value: i,
+  ...N
+}, q) => {
+  const t = H(B), s = H(it), n = Z(), k = Q(null), o = a(() => (t != null && t.supportsSelection && u && _(
+    "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."
+  ), t != null && t.supportsSelection ? t.isSelected(i) : u), [t, u, i]), y = a(
+    () => ({
+      "aria-current": t != null && t.supportsSelection ? void 0 : o,
+      "aria-selected": t != null && t.supportsSelection ? o : void 0
+    }),
+    [t == null ? void 0 : t.supportsSelection, o]
+  ), A = L(
+    (e) => {
+      var r, U, W;
+      l == null || l(e), !e.defaultPrevented && (t != null && t.supportsSelection && t.toggle(i, h || t != null && t.multiSelect ? !o : !0), t != null && t.hasArrowKeyNav && !(t != null && t.multiSelect) && ((r = s == null ? void 0 : s.setShow) == null || r.call(s, !1), (W = (U = s == null ? void 0 : s.getFocusableActivator) == null ? void 0 : U.call(s)) == null || W.focus()));
+    },
+    [h, t, l, s, o, i]
+  ), E = L(
+    (e) => {
+      c == null || c(e), !e.defaultPrevented && e.key === "Tab" && t != null && t.supportsSelection && t != null && t.changeOnBlur && (t == null || t.toggle(i, !0));
+    },
+    [t, c, i]
+  ), z = a(
+    () => ({
+      onBlur: (e) => {
+        const r = new Event("blur", {
+          bubbles: !0
+        });
+        Object.defineProperty(r, "target", {
+          writable: !1,
+          value: { value: "", ...e.target }
+        }), Object.defineProperty(r, "relatedTarget", {
+          writable: !1,
+          value: { value: "", ...e.target }
+        }), g == null || g(r), !r.defaultPrevented && t != null && t.supportsSelection && t != null && t.changeOnBlur && (t == null || t.toggle(i, !0));
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          const r = new Event("click", {
+            bubbles: !0
+          });
+          if (Object.defineProperty(r, "target", {
+            writable: !1,
+            value: { value: "", ...e.target }
+          }), l == null || l(r), r.defaultPrevented)
+            return;
+          e.preventDefault(), t == null || t.toggle(
+            i,
+            h || t != null && t.multiSelect ? !o : !0
+          );
+        }
+        c == null || c(e);
+      }
+    }),
+    [h, t, g, l, c, o, i]
+  ), { isActiveInPopover: O, ...d } = rt(
+    void 0,
+    z
+  ), f = a(
+    () => et({
+      hasAppendOrPrepend: !!(b ?? v ?? (t == null ? void 0 : t.multiSelect)),
+      isActiveInPopover: O,
+      layout: t == null ? void 0 : t.layout,
+      multiSelect: !!(t != null && t.multiSelect),
+      noWrap: t == null ? void 0 : t.noWrap,
+      selected: o
+    }),
+    [
+      b,
+      O,
+      t == null ? void 0 : t.layout,
+      t == null ? void 0 : t.multiSelect,
+      t == null ? void 0 : t.noWrap,
+      v,
+      o
+    ]
+  ), j = a(() => t != null && t.multiSelect ? /* @__PURE__ */ p(
+    T,
+    {
+      checked: o,
+      className: f.checkboxMark,
+      "data-testid": K(S, "checkbox-mark")
+    }
+  ) : v, [
+    f.checkboxMark,
+    S,
+    t == null ? void 0 : t.multiSelect,
+    v,
+    o
+  ]), [w, x] = a(
+    () => tt(N),
+    [N]
+  ), C = a(
+    () => ({
+      ...y,
+      children: /* @__PURE__ */ F(G, { children: [
+        j,
+        I && /* @__PURE__ */ p("span", { className: f.contents, children: I }),
+        b && /* @__PURE__ */ p("span", { className: f.append, children: b })
+      ] }),
+      className: $(
+        m,
+        f.item,
+        D(w),
+        at.MenuItem
+      ),
+      "data-testid": S,
+      id: d.id,
+      onClick: A,
+      onKeyDown: E,
+      ref: (e) => {
+        var r;
+        t != null && t.isComposite || (r = d.ref) == null || r.call(d, e), e && (k.current = e);
+      },
+      role: n === "listitem" ? void 0 : n,
+      tabIndex: t != null && t.hasArrowKeyNav ? d.tabIndex : void 0
+    }),
+    [
+      b,
+      y,
+      I,
+      m,
+      f.append,
+      f.contents,
+      f.item,
+      S,
+      A,
+      E,
+      t == null ? void 0 : t.hasArrowKeyNav,
+      t == null ? void 0 : t.isComposite,
+      d,
+      j,
+      n,
+      w
+    ]
+  ), M = a(() => {
+    const e = P ?? (x.href ? "a" : "button"), r = e === "button" ? { type: "button" } : {};
+    return /* @__PURE__ */ p(
+      e,
+      {
+        ...lt(C, x),
+        ...r
+      }
+    );
+  }, [P, x, C]);
+  X(q, () => k.current);
+  const R = a(() => n === "listitem" ? /* @__PURE__ */ p("span", { role: "listitem", children: M }) : M, [M, n]);
+  return /* @__PURE__ */ F(G, { children: [
+    t != null && t.isComposite ? /* @__PURE__ */ p(st, { render: (e) => Y(R, e) }) : R,
+    V && /* @__PURE__ */ p(ot, { mt: "spacing.100" })
+  ] });
+}, jt = J(ct);
 export {
-  a as IressMenuItem
+  jt as IressMenuItem
 };

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

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

package/dist/components/Menu/MenuText/MenuText.js

@@ -1,39 +1,81 @@
-import "react/jsx-runtime";
-import "../../../index-2QXL0WYc.js";
-import "../../../MenuItem.module-aggbBK2E.js";
-import "../hooks/useMenu.js";
-import "../MenuItem/hooks/useMenuItemRole.js";
-import { q as J } from "../../../LoadingSuspense-D0TO0TDT.js";
-import "react";
-import "../../../fuzzysort-eoXOpoo6.js";
-import "../../Badge/Badge.js";
-import "../../ButtonGroup/ButtonGroupProvider.js";
-import "../../Card/Card.js";
-import "../../CheckboxGroup/CheckboxGroup.js";
-import "../../Col/Col.js";
-import "../../Expander/Expander.js";
-import "../../Form/FormContext.js";
-import "../Menu.js";
-import "../../CheckboxMark/CheckboxMark.types.js";
-import "../../CheckboxMark/CheckboxMark.js";
-import "../../../PopoverProvider-Cw5-iAgZ.js";
-import "../../Modal/ModalProvider.js";
-import "../../Panel/Panel.js";
-import "../../Popover/Popover.js";
-import "../../Popover/InputPopover/InputPopover.js";
-import "../../../SlideoutProvider-CQh140HM.js";
-import "react-dom";
-import "../../RadioGroup/RadioGroup.js";
-import "../../Text/Text.js";
-import "../../Skeleton/Skeleton.js";
-import "../../SkipLink/SkipLink.js";
-import "../../Stack/Stack.js";
-import "../../Table/TableContext.js";
-import "../../TabSet/Tab/Tab.js";
-import "../../TabSet/TabSet.js";
-import "../../Toggle/Toggle.js";
-import "../../Tooltip/Tooltip.js";
-import "../../ValidationMessage/ValidationMessage.js";
+import { jsx as r, jsxs as c, Fragment as I } from "react/jsx-runtime";
+import { useMenuItemRole as C } from "../MenuItem/hooks/useMenuItemRole.js";
+import { useContext as v } from "react";
+import { MenuContext as N } from "../Menu.js";
+import { IressText as P } from "../../Text/Text.js";
+import { menu as H } from "../Menu.styles.js";
+import { c as m } from "../../../cva-B2x59Dph.js";
+import { c as d } from "../../../cx-DN21T1EH.js";
+import { IressMenuDivider as T } from "../MenuDivider/MenuDivider.js";
+import { GlobalCSSClass as g } from "../../../enums.js";
+import { s as j } from "../../../is-valid-prop-DFFvE05x.js";
+const R = (s, o) => (s && ["h1", "h2", "h3", "h4", "h5", "h6"].includes(s)) ?? (o && [
+  "typography.heading.1",
+  "typography.heading.2",
+  "typography.heading.3",
+  "typography.heading.4",
+  "typography.heading.5"
+].includes(o)), b = ({
+  append: s,
+  children: o,
+  className: t,
+  "data-testid": e,
+  divider: l,
+  element: p,
+  prepend: a,
+  role: u,
+  textStyle: h,
+  ...y
+}) => {
+  const n = v(N), f = C() ?? u, i = H.raw({
+    layout: n == null ? void 0 : n.layout,
+    heading: R(p, h),
+    hasAppendOrPrepend: !!(s ?? a)
+  }), [x, M] = j(y);
+  return /* @__PURE__ */ c(I, { children: [
+    /* @__PURE__ */ c(
+      "div",
+      {
+        className: d(
+          t,
+          m(i.text, x),
+          g.MenuText
+        ),
+        "data-testid": e,
+        role: f,
+        children: [
+          a && /* @__PURE__ */ r("div", { children: a }),
+          /* @__PURE__ */ r(
+            P,
+            {
+              ...M,
+              className: m(i.contents),
+              element: p,
+              textStyle: h,
+              children: o
+            }
+          ),
+          s && /* @__PURE__ */ r("div", { className: m(i.append), children: s })
+        ]
+      }
+    ),
+    l && /* @__PURE__ */ r(T, { mt: "spacing.100" })
+  ] });
+}, E = ({
+  className: s,
+  element: o = "h2",
+  textStyle: t = "typography.heading.4",
+  ...e
+}) => /* @__PURE__ */ r(
+  b,
+  {
+    element: o,
+    textStyle: t,
+    ...e,
+    className: d(s, g.MenuHeading)
+  }
+);
 export {
-  J as IressMenuText
+  E as IressMenuHeading,
+  b as IressMenuText
 };

package/dist/components/Menu/index.js

@@ -1,29 +1,13 @@
 import { IressMenu as o } from "./Menu.js";
-import { MENU_LAYOUTS as s, MENU_ROLES as u, MenuLayout as m, MenuType as n } from "./Menu.types.js";
-import { o as p, p as I, r as x, q as f } from "../../LoadingSuspense-D0TO0TDT.js";
-import { MENU_ITEM_ROLES as i, MenuItemRole as E } from "./MenuItem/MenuItem.types.js";
-import { useMenuItemAria as R } from "./MenuItem/hooks/useMenuItemAria.js";
-import { useMenuItemButtonProps as U } from "./MenuItem/hooks/useMenuItemButtonProps.js";
-import { useMenuItemComposite as N } from "./MenuItem/hooks/useMenuItemComposite.js";
-import { useMenuItemInteractions as S } from "./MenuItem/hooks/useMenuItemInteractions.js";
-import { useMenuItemRole as l } from "./MenuItem/hooks/useMenuItemRole.js";
-import { mapMenuItems as A } from "./helpers/mapMenuItems.js";
+import { menu as m } from "./Menu.styles.js";
+import { IressMenuDivider as t } from "./MenuDivider/MenuDivider.js";
+import { IressMenuItem as x } from "./MenuItem/MenuItem.js";
+import { IressMenuHeading as f, IressMenuText as p } from "./MenuText/MenuText.js";
 export {
   o as IressMenu,
-  p as IressMenuDivider,
-  I as IressMenuHeading,
+  t as IressMenuDivider,
+  f as IressMenuHeading,
   x as IressMenuItem,
-  f as IressMenuText,
-  i as MENU_ITEM_ROLES,
-  s as MENU_LAYOUTS,
-  u as MENU_ROLES,
-  E as MenuItemRole,
-  m as MenuLayout,
-  n as MenuType,
-  A as mapMenuItems,
-  R as useMenuItemAria,
-  U as useMenuItemButtonProps,
-  N as useMenuItemComposite,
-  S as useMenuItemInteractions,
-  l as useMenuItemRole
+  p as IressMenuText,
+  m as menu
 };