@iress-oss/ids-components 5.20.2 → 6.0.0-alpha.1

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

@@ -0,0 +1,231 @@
+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"
+    }
+  },
+  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,39 +1,25 @@
-import "react/jsx-runtime";
-import { o as K } from "../../../LoadingSuspense-BtzikVZk.js";
-import "react";
-import "../../../fuzzysort-BNka47rs.js";
-import "../../Badge/Badge.js";
-import "../../../index-cbHCAGLB.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-DZ92QV8I.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 "../../Table/TableProvider.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 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 "../../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 o = i(m);
+  return /* @__PURE__ */ t(
+    s,
+    {
+      ...e,
+      className: n(r, a.MenuDivider),
+      role: o?.role === "menu" ? void 0 : "presentation",
+      vertical: o?.layout && o.layout !== "stack"
+    }
+  );
+};
 export {
-  K as IressMenuDivider
+  d as IressMenuDivider
 };

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

@@ -1,11 +1,187 @@
-import "react/jsx-runtime";
-import "react";
-import "./hooks/useMenuItemRole.js";
-import "./hooks/useMenuItemAria.js";
-import "./hooks/useMenuItemButtonProps.js";
-import { r as a } from "../../../LoadingSuspense-BtzikVZk.js";
-import "./hooks/useMenuItemInteractions.js";
-import "./hooks/useMenuItemComposite.js";
+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 "../../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 "../../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-CmSaAiNF.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(
+    "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(
+    () => ({
+      "aria-current": e?.supportsSelection ? void 0 : r,
+      "aria-selected": e?.supportsSelection ? r : void 0
+    }),
+    [e?.supportsSelection, r]
+  ), P = B(
+    (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()));
+    },
+    [m, e, p, b, r, s]
+  ), A = B(
+    (t) => {
+      f?.(t), !t.defaultPrevented && t.key === "Tab" && e?.supportsSelection && e?.changeOnBlur && e?.toggle(s, !0);
+    },
+    [e, f, s]
+  ), G = n(
+    () => ({
+      onBlur: (t) => {
+        const o = new Event("blur", {
+          bubbles: !0
+        });
+        Object.defineProperty(o, "target", {
+          writable: !1,
+          value: { value: "", ...t.target }
+        }), Object.defineProperty(o, "relatedTarget", {
+          writable: !1,
+          value: { value: "", ...t.target }
+        }), y?.(o), !o.defaultPrevented && e?.supportsSelection && e?.changeOnBlur && e?.toggle(s, !0);
+      },
+      onKeyDown: (t) => {
+        if (t.key === "Enter") {
+          const o = new Event("click", {
+            bubbles: !0
+          });
+          if (Object.defineProperty(o, "target", {
+            writable: !1,
+            value: { value: "", ...t.target }
+          }), p?.(o), o.defaultPrevented)
+            return;
+          t.preventDefault(), e?.toggle(
+            s,
+            m || e?.multiSelect ? !r : !0
+          );
+        }
+        f?.(t);
+      }
+    }),
+    [m, e, y, p, f, r, s]
+  ), { isActiveInPopover: N, ...v } = ee(
+    void 0,
+    G
+  ), i = n(
+    () => T({
+      hasAppendOrPrepend: !!(c ?? d ?? e?.multiSelect),
+      isActiveInPopover: N,
+      layout: e?.layout,
+      multiSelect: !!e?.multiSelect,
+      noWrap: e?.noWrap,
+      selected: r
+    }),
+    [
+      c,
+      N,
+      e?.layout,
+      e?.multiSelect,
+      e?.noWrap,
+      d,
+      r
+    ]
+  ), E = n(() => e?.multiSelect ? /* @__PURE__ */ l(
+    Q,
+    {
+      checked: r,
+      className: i.checkboxMark,
+      "data-testid": X(a, "checkbox-mark")
+    }
+  ) : d, [
+    i.checkboxMark,
+    a,
+    e?.multiSelect,
+    d,
+    r
+  ]), [O, I] = n(
+    () => _(M),
+    [M]
+  ), j = n(
+    () => ({
+      ...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 })
+      ] }),
+      className: Z(
+        x,
+        i.item,
+        Y(O),
+        se.MenuItem
+      ),
+      "data-testid": a,
+      id: v.id,
+      onClick: P,
+      onKeyDown: A,
+      ref: (t) => {
+        e?.isComposite || v.ref?.(t), t && (w.current = t);
+      },
+      role: u === "listitem" ? void 0 : u,
+      tabIndex: e?.hasArrowKeyNav ? v.tabIndex : void 0
+    }),
+    [
+      c,
+      C,
+      h,
+      x,
+      i.append,
+      i.contents,
+      i.item,
+      a,
+      P,
+      A,
+      e?.hasArrowKeyNav,
+      e?.isComposite,
+      v,
+      E,
+      u,
+      O
+    ]
+  ), g = n(() => {
+    const t = k ?? (I.href ? "a" : "button"), o = t === "button" ? { type: "button" } : {};
+    return /* @__PURE__ */ l(
+      t,
+      {
+        ...ne(j, I),
+        ...o
+      }
+    );
+  }, [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.100" })
+  ] });
+}, Ae = H(ie);
 export {
-  a as IressMenuItem
+  Ae 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 n } from "../../../Popover/hooks/usePopover.js";
-const m = () => {
-  const o = r(), t = n(), e = o?.role ?? t?.type;
-  return e === "listbox" ? "option" : e === "menu" ? "menuitem" : e === "list" ? "listitem" : void 0;
+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;
+  return o === "listbox" ? "option" : o === "menu" ? "menuitem" : o === "list" ? "listitem" : void 0;
 };
 export {
-  m as useMenuItemRole
+  s as useMenuItemRole
 };

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

@@ -1,40 +1,81 @@
-import "react/jsx-runtime";
-import "../../../index-cbHCAGLB.js";
-import "../../../MenuItem.module-B77HFe8G.js";
-import "../hooks/useMenu.js";
-import "../MenuItem/hooks/useMenuItemRole.js";
-import { q as K } from "../../../LoadingSuspense-BtzikVZk.js";
-import "react";
-import "../../../fuzzysort-BNka47rs.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-DZ92QV8I.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 "../../Table/TableProvider.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 h, 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 i } from "../../../css-fGu_jDvv.js";
+import { c } from "../../../cx-DN21T1EH.js";
+import { IressMenuDivider as T } from "../MenuDivider/MenuDivider.js";
+import { GlobalCSSClass as d } from "../../../enums.js";
+import { s as j } from "../../../is-valid-prop-Ce0wiweq.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: e,
+  "data-testid": t,
+  divider: g,
+  element: m,
+  prepend: n,
+  role: l,
+  textStyle: p,
+  ...u
+}) => {
+  const y = v(N), f = C() ?? l, a = H.raw({
+    layout: y?.layout,
+    heading: R(m, p),
+    hasAppendOrPrepend: !!(s ?? n)
+  }), [x, M] = j(u);
+  return /* @__PURE__ */ h(I, { children: [
+    /* @__PURE__ */ h(
+      "div",
+      {
+        className: c(
+          e,
+          i(a.text, x),
+          d.MenuText
+        ),
+        "data-testid": t,
+        role: f,
+        children: [
+          n && /* @__PURE__ */ r("div", { children: n }),
+          /* @__PURE__ */ r(
+            P,
+            {
+              ...M,
+              className: i(a.contents),
+              element: m,
+              textStyle: p,
+              children: o
+            }
+          ),
+          s && /* @__PURE__ */ r("div", { className: i(a.append), children: s })
+        ]
+      }
+    ),
+    g && /* @__PURE__ */ r(T, { mt: "spacing.100" })
+  ] });
+}, B = ({
+  className: s,
+  element: o = "h2",
+  textStyle: e = "typography.heading.4",
+  ...t
+}) => /* @__PURE__ */ r(
+  b,
+  {
+    element: o,
+    textStyle: e,
+    ...t,
+    className: c(s, d.MenuHeading)
+  }
+);
 export {
-  K as IressMenuText
+  B 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-BtzikVZk.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
 };