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

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

@@ -1,38 +1,25 @@
-import "react/jsx-runtime";
-import { o as J } from "../../../LoadingSuspense-BjzbePWa.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-BqnPfQtY.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-BjzbePWa.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-xNOwGiI0.js";
-import "../hooks/useMenu.js";
-import "../MenuItem/hooks/useMenuItemRole.js";
-import { q as J } from "../../../LoadingSuspense-BjzbePWa.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-BqnPfQtY.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-BjzbePWa.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
 };

package/dist/components/Modal/Modal.js

@@ -1,16 +1,163 @@
-import "react/jsx-runtime";
-import "../../index-2QXL0WYc.js";
-import { s as M } from "../../LoadingSuspense-BjzbePWa.js";
-import "react";
-import "../../enums.js";
-import "../../helpers/responsive/getResponsiveLayoutModifiers.js";
-import "../../floating-ui.react-nmA48tb2.js";
-import "../../helpers/transition/timeStringToNumber.js";
-import "../../helpers/utility/idsLogger.js";
-import "../../helpers/utility/propagateTestid.js";
-import "../../hooks/useIdIfNeeded.js";
-import "../Text/Text.js";
-import "./hooks/useIDSProvidedModal.js";
+import { jsx as n, jsxs as D } from "react/jsx-runtime";
+import { useState as te, useRef as oe, useEffect as F, useMemo as se, cloneElement as re, useCallback as le } from "react";
+import "../../Button-BXzmntRi.js";
+import { IressCloseButton as ae } from "../Button/CloseButton/CloseButton.js";
+import { u as ne, b as ie, c as ce, d as de, e as me, F as fe, f as ue, g as pe } from "../../floating-ui.react-CPN4oQCc.js";
+import { timeStringToNumber as ge } from "../../helpers/transition/timeStringToNumber.js";
+import { idsLogger as he } from "../../helpers/utility/idsLogger.js";
+import { propagateTestid as c } from "../../helpers/utility/propagateTestid.js";
+import { useIdIfNeeded as be } from "../../hooks/useIdIfNeeded.js";
+import { text as ye } from "../Text/Text.styles.js";
+import { IressText as Fe } from "../Text/Text.js";
+import { useProviderModal as Ie } from "./hooks/useProviderModal.js";
+import { modal as Me } from "./Modal.styles.js";
+import { c as O } from "../../cx-DN21T1EH.js";
+import { s as I } from "../../factory-DHLOr79I.js";
+import { s as Ne } from "../../is-valid-prop-DFFvE05x.js";
+import { GlobalCSSClass as M } from "../../enums.js";
+const ze = ({
+  children: _,
+  className: $,
+  closeText: G,
+  container: N,
+  "data-testid": r,
+  defaultShow: L = !1,
+  disableBackdropClick: U,
+  fixedFooter: q,
+  footer: w,
+  heading: i,
+  noCloseButton: z,
+  onEntered: d,
+  onExited: m,
+  onShowChange: h,
+  onStatus: f,
+  onTransitionEnd: u,
+  show: b,
+  static: a,
+  style: A,
+  ...y
+}) => {
+  const [H, J] = te(L), k = oe(240), o = Ie(y.id), v = be({ id: y.id }), p = `${v}--heading`, K = o.opened || b || H, x = (e) => {
+    o.show(e), J(e), h == null || h(e);
+  }, { context: t } = ne({
+    open: K,
+    onOpenChange: x
+  }), Q = ie(t, {
+    enabled: !U,
+    outsidePress: (e) => !e.target.closest(`.${M.Toaster}`),
+    outsidePressEvent: "mousedown"
+  }), V = ce(t), W = de([Q, V]), { isMounted: X, status: s } = me(t, {
+    duration: {
+      close: k.current
+    }
+  }), l = Me({
+    fixedFooter: q,
+    static: a,
+    status: s
+  }), [Y, Z] = Ne(y), { p: C = "lg", width: S = "overlay.md", ...T } = Y;
+  F(() => {
+    o.opened && b && he(
+      "IressModal: Please use either IressModalProvider for uncontrolled components, or the show prop for controlled components, rather than both. If you use both, the open state of the modal will become unpredictable. If you want to show a modal by default in uncontrolled mode, use the defaultShow prop."
+    );
+  }, [o.opened, b]), F(() => {
+    f == null || f(s);
+  }, [s, f]), F(() => {
+    var e, g;
+    s === "initial" && ((e = t.refs.floating) != null && e.current) && (k.current = ge(
+      ((g = window.getComputedStyle(t.refs.floating.current, null)) == null ? void 0 : g.transitionDuration) || ".3s"
+    ) * 1.2);
+  }, [t.refs.floating, s]);
+  const P = se(() => typeof i == "string" ? /* @__PURE__ */ n(
+    Fe,
+    {
+      className: l.header,
+      id: p,
+      element: "h2",
+      "data-testid": c(r, "heading"),
+      children: i
+    }
+  ) : i ? re(i, {
+    id: p
+  }) : null, [r, p, i, l.header]), E = le(
+    (e) => {
+      var B, j;
+      u == null || u(e), !(!(e.propertyName === "opacity" || !e.propertyName) || e.target !== e.currentTarget) && (s === "open" ? (d == null || d(), a || (j = (B = t.refs.floating) == null ? void 0 : B.current) == null || j.focus()) : s === "close" && (m == null || m()));
+    },
+    [
+      u,
+      s,
+      d,
+      t.refs.floating,
+      m,
+      a
+    ]
+  );
+  if (!X) return null;
+  const R = /* @__PURE__ */ n(
+    fe,
+    {
+      className: O($, l.backdrop, M.ModalBackdrop),
+      "data-testid": c(r, "backdrop"),
+      lockScroll: !a,
+      style: A,
+      children: /* @__PURE__ */ n(
+        ue,
+        {
+          context: t,
+          initialFocus: t.refs.floating,
+          disabled: a,
+          children: /* @__PURE__ */ D(
+            I.div,
+            {
+              ref: (e) => t.refs.setFloating(e),
+              className: O(l.modal, ye(), M.Modal),
+              id: v,
+              "data-testid": r,
+              "aria-labelledby": P ? p : void 0,
+              ...W.getFloatingProps(Z),
+              ...T,
+              w: S,
+              onTransitionEnd: E,
+              children: [
+                !z && /* @__PURE__ */ n(
+                  ae,
+                  {
+                    onClick: () => x(!1),
+                    screenreaderText: G,
+                    className: l.closeButton,
+                    "data-testid": c(r, "close-button__button")
+                  }
+                ),
+                /* @__PURE__ */ D(
+                  I.div,
+                  {
+                    className: l.content,
+                    "data-testid": c(r, "content"),
+                    p: C,
+                    children: [
+                      P,
+                      _
+                    ]
+                  }
+                ),
+                w && /* @__PURE__ */ n(
+                  I.div,
+                  {
+                    className: l.footer,
+                    "data-testid": c(r, "footer"),
+                    p: C,
+                    children: w
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  ), ee = N ?? (o == null ? void 0 : o.container);
+  return a && !ee ? R : /* @__PURE__ */ n(pe, { root: N ?? (o == null ? void 0 : o.container), children: R });
+};
 export {
-  M as IressModal
+  ze as IressModal
 };