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

package/dist/components/Popover/Popover.js

@@ -1,97 +1,88 @@
-import { jsx as t, jsxs as C } from "react/jsx-runtime";
-import { forwardRef as I, useRef as W } from "react";
-import { c as j } from "../../index-2QXL0WYc.js";
-import { PopoverType as R } from "./Popover.types.js";
-import { FloatingUIAlign as S, GlobalCSSClass as b } from "../../enums.js";
-import { idsLogger as k } from "../../helpers/utility/idsLogger.js";
-import { propagateTestid as a } from "../../helpers/utility/propagateTestid.js";
-import { s as E } from "../../Popover.module-BzjyEvrY.js";
-import { P as F } from "../../PopoverProvider-BqnPfQtY.js";
-import { PopoverActivator as G } from "./components/PopoverActivator.js";
-import { PopoverContent as L } from "./components/PopoverContent.js";
-import { composePopoverWidth as U } from "./helpers/composePopoverWidth.js";
-import { usePopover as q } from "./hooks/usePopover.js";
-import { NestedPopoverActivator as z } from "./components/NestedPopoverActivator.js";
-const B = ({
-  activator: p,
-  align: d = "auto",
-  children: n,
-  className: c,
-  container: l,
-  contentClassName: v,
-  defaultShow: f,
-  disabledAutoToggle: h,
-  displayMode: e = "overlay",
-  focusStartIndex: P,
-  matchActivatorWidth: g,
-  onActivated: y,
-  onDeactivated: A,
-  onNavigate: u,
-  type: x,
-  show: N,
-  width: r,
-  virtualFocus: i,
-  ...o
-}, T) => {
-  const w = W(null), s = g && e === "overlay";
-  return r !== void 0 && k(
-    "IressPopover: The width prop is deprecated. Please use the --iress-width and --iress-max-width design token instead."
-  ), /* @__PURE__ */ t(
-    F,
+import { jsx as r, jsxs as E } from "react/jsx-runtime";
+import { forwardRef as G, useRef as H, useContext as T } from "react";
+import { GlobalCSSClass as p } from "../../enums.js";
+import { propagateTestid as c } from "../../helpers/utility/propagateTestid.js";
+import { PopoverActivator as k } from "./components/PopoverActivator.js";
+import { PopoverContent as q } from "./components/PopoverContent.js";
+import { s as z } from "../../factory-DHLOr79I.js";
+import { c as v } from "../../cx-DN21T1EH.js";
+import { usePopoverImperativeHandle as B } from "./hooks/usePopoverImperativeHandle.js";
+import { popover as D } from "./Popover.styles.js";
+import { usePopover as F, PopoverContext as d } from "./hooks/usePopover.js";
+import { NestedPopoverActivator as J } from "./components/NestedPopoverActivator.js";
+const K = ({
+  activator: f,
+  align: n = "auto",
+  children: l,
+  className: P,
+  container: h,
+  contentClassName: x,
+  contentStyle: o,
+  defaultShow: u,
+  displayMode: a = "overlay",
+  fluid: C,
+  focusStartIndex: N,
+  matchActivatorWidth: A,
+  onActivated: j,
+  onDeactivated: I,
+  onNavigate: R,
+  type: W,
+  show: b,
+  virtualFocus: m,
+  ...t
+}, g) => {
+  const w = H(null), s = A && a === "overlay", e = D({ fluid: C, matchActivatorWidth: s }), i = F({
+    align: n,
+    defaultShow: u,
+    focusStartIndex: N,
+    matchActivatorWidth: s,
+    onActivated: j,
+    onDeactivated: I,
+    onNavigate: R,
+    show: b,
+    type: W,
+    virtualFocus: m
+  });
+  return B(g, i), /* @__PURE__ */ r(d.Provider, { value: i, children: /* @__PURE__ */ E(
+    z.div,
     {
-      align: d,
-      defaultShow: f,
-      disabledAutoToggle: h,
-      focusStartIndex: P,
-      matchActivatorWidth: s,
-      onActivated: y,
-      onDeactivated: A,
-      onNavigate: u,
-      ref: T,
-      show: N,
-      type: x,
-      virtualFocus: i,
-      children: /* @__PURE__ */ C(
-        "div",
-        {
-          ...o,
-          className: j(
-            c,
-            b.FormElement,
-            E.popover
-          ),
-          ref: w,
-          children: [
-            /* @__PURE__ */ t(z, { parentPopover: q(), children: /* @__PURE__ */ t(
-              G,
-              {
-                "data-testid": a(o["data-testid"], "activator"),
-                children: p
-              }
-            ) }),
-            /* @__PURE__ */ t(
-              L,
-              {
-                className: v,
-                container: l,
-                "data-testid": a(o["data-testid"], "content"),
-                displayMode: e,
-                style: {
-                  ...U(r, s),
-                  ...o.style
-                },
-                virtualFocus: i,
-                children: n
-              }
-            )
-          ]
-        }
-      )
+      ...t,
+      className: v(
+        P,
+        p.FormElement,
+        e.root,
+        p.Popover
+      ),
+      ref: w,
+      children: [
+        /* @__PURE__ */ r(J, { parentPopover: T(d), children: /* @__PURE__ */ r(
+          k,
+          {
+            className: e.activator,
+            "data-testid": c(t["data-testid"], "activator"),
+            children: f
+          }
+        ) }),
+        /* @__PURE__ */ r(
+          q,
+          {
+            ...o,
+            className: v(
+              x,
+              o == null ? void 0 : o.className,
+              e.content
+            ),
+            container: h,
+            "data-testid": c(t["data-testid"], "content"),
+            displayMode: a,
+            virtualFocus: m,
+            children: l
+          }
+        )
+      ]
     }
-  );
-}, m = I(B);
-m.Align = S;
-m.Type = R;
+  ) });
+}, S = G(K);
 export {
-  m as IressPopover
+  S as IressPopover
 };

package/dist/components/Popover/Popover.styles.js

@@ -0,0 +1,49 @@
+import { s as t } from "../../sva-TRyehFkb.js";
+const a = t({
+  slots: ["root", "activator", "content"],
+  base: {
+    activator: {
+      display: "block"
+    },
+    root: {
+      display: "inline-block"
+    },
+    content: {
+      bg: "colour.neutral.10",
+      border: "divider",
+      borderRadius: "radius.system.form",
+      layerStyle: "elevation.floating",
+      maxWidth: "input.16"
+    }
+  },
+  variants: {
+    fluid: {
+      true: {
+        root: {
+          display: "block"
+        }
+      }
+    },
+    hasInputActivator: {
+      true: {
+        root: {
+          display: "block"
+        },
+        content: {
+          minWidth: "input.12",
+          maxWidth: "auto"
+        }
+      }
+    },
+    matchActivatorWidth: {
+      true: {
+        content: {
+          maxWidth: "[none]"
+        }
+      }
+    }
+  }
+});
+export {
+  a as popover
+};

package/dist/components/Popover/components/NestedPopoverActivator.js

@@ -1,9 +1,9 @@
 import { jsx as r } from "react/jsx-runtime";
-import { f as e } from "../../../floating-ui.react-nmA48tb2.js";
-const f = ({
+import { w as e } from "../../../floating-ui.react-CPN4oQCc.js";
+const m = ({
   children: t,
   parentPopover: o
 }) => o ? /* @__PURE__ */ r(e, { elementsRef: o.list, children: t }) : t;
 export {
-  f as NestedPopoverActivator
+  m as NestedPopoverActivator
 };

package/dist/components/Popover/components/PopoverActivator.js

@@ -1,13 +1,9 @@
 import { jsx as d } from "react/jsx-runtime";
-import { s as c } from "../../../Popover.module-BzjyEvrY.js";
-import { PopoverCssClass as m } from "../Popover.types.js";
-import { usePopover as g } from "../hooks/usePopover.js";
-import { useRef as A, useMemo as b, useEffect as v } from "react";
-import { focusableElements as T } from "../../../helpers/dom/focusableElements.js";
-import { safeClosest as f } from "../../../helpers/dom/domUtils.js";
+import { useContext as l, useRef as A, useMemo as g, useEffect as b } from "react";
+import { focusableElements as m } from "../../../helpers/dom/focusableElements.js";
 import { usePopoverActivatorInteractions as x } from "../hooks/usePopoverActivatorInteractions.js";
-import { c as E } from "../../../index-2QXL0WYc.js";
-const P = [
+import { PopoverContext as T } from "../hooks/usePopover.js";
+const v = [
   "aria-controls",
   "aria-expanded",
   "aria-haspopup",
@@ -15,20 +11,20 @@ const P = [
   "id",
   "role",
   "tabindex"
-], y = (o, i) => {
-  const t = o.querySelector("[id]"), a = t == null ? void 0 : t.getAttribute("id");
-  t == null || t.removeAttribute("id"), P.forEach((s) => {
-    const n = o.getAttribute(s);
-    o.removeAttribute(s), n && i.setAttribute(s, n);
-  }), a && i.setAttribute("id", a);
-}, N = ({
-  children: o,
-  ...i
+], P = (a, n) => {
+  const t = a.querySelector("[id]"), i = t == null ? void 0 : t.getAttribute("id");
+  t == null || t.removeAttribute("id"), v.forEach((s) => {
+    const c = a.getAttribute(s);
+    a.removeAttribute(s), c && n.setAttribute(s, c);
+  }), i && n.setAttribute("id", i);
+}, S = ({
+  children: a,
+  ...n
 }) => {
-  const t = g(), a = A(null), s = o == null ? void 0 : o.props, n = x(
+  const t = l(T), i = A(null), s = a == null ? void 0 : a.props, c = x(
     t,
     s
-  ), l = b(() => {
+  ), f = g(() => {
     if (t != null && t.show)
       return [
         ...t.getAriaControls(),
@@ -36,52 +32,51 @@ const P = [
         t.api.context.floatingId
       ].join(" ").trim();
   }, [s, t]);
-  return v(() => {
+  return b(() => {
     var r, e;
-    !a.current || !(t != null && t.getVirtualFocus) || t.activeIndex === null || (setTimeout(
+    !i.current || !(t != null && t.getVirtualFocus) || t.activeIndex === null || (setTimeout(
       () => {
-        var u;
-        return (u = t == null ? void 0 : t.api.refs.domReference.current) == null ? void 0 : u.removeAttribute(
+        var o;
+        return (o = t == null ? void 0 : t.api.refs.domReference.current) == null ? void 0 : o.removeAttribute(
           "aria-activedescendant"
         );
       }
-    ), a.current.setAttribute(
+    ), i.current.setAttribute(
       "aria-activedescendant",
       ((e = (r = t.list.current) == null ? void 0 : r[t.activeIndex]) == null ? void 0 : e.id) ?? ""
     ));
   }, [t]), /* @__PURE__ */ d(
     "div",
     {
-      ...i,
-      className: E(c.activator, {
-        [m.Active]: t == null ? void 0 : t.show
-      }),
+      ...n,
       ...t == null ? void 0 : t.interactions.getReferenceProps({
-        ...n,
-        "aria-controls": l,
+        ...c,
+        "aria-controls": f,
         role: s.role,
         ref: (r) => {
           if (!r) return;
           t == null || t.api.refs.setReference(r);
-          const e = (r == null ? void 0 : r.querySelector("[role=combobox]")) ?? T(r)[0];
-          e && (a.current = e, y(r, e));
+          const e = (r == null ? void 0 : r.querySelector("[role=combobox]")) ?? m(r)[0];
+          e && (i.current = e, P(r, e));
         },
         onBlur: (r) => {
-          r.relatedTarget instanceof Element && f(r.relatedTarget, `.${c.content}`) && (r.preventDefault(), r.stopPropagation());
+          const e = t == null ? void 0 : t.api.refs.floating.current, o = r.relatedTarget;
+          o instanceof Element && (e != null && e.contains(o)) && (r.preventDefault(), r.stopPropagation());
         },
         onFocus: (r) => {
-          t != null && t.disabledAutoToggle || r.relatedTarget instanceof Element && (r.relatedTarget.hasAttribute("data-floating-ui-focus-guard") || f(r.relatedTarget, `.${c.content}`)) && t.show && (setTimeout(() => {
-            var e;
-            (e = a.current) == null || e.focus();
+          const e = t == null ? void 0 : t.api.refs.floating.current, o = r.relatedTarget;
+          o instanceof Element && (o.hasAttribute("data-floating-ui-focus-guard") || e != null && e.contains(o)) && t.show && (setTimeout(() => {
+            var u;
+            (u = i.current) == null || u.focus();
           }), setTimeout(() => {
             t.setShowWithReason(!1, r.nativeEvent, "focus");
           }, 300));
         }
       }),
-      children: o
+      children: a
     }
   );
 };
 export {
-  N as PopoverActivator
+  S as PopoverActivator
 };

package/dist/components/Popover/components/PopoverContent.js

@@ -1,26 +1,49 @@
 import { jsx as e } from "react/jsx-runtime";
-import { c } from "../../../index-2QXL0WYc.js";
-import { s as m } from "../../../Popover.module-BzjyEvrY.js";
-import { usePopover as g } from "../hooks/usePopover.js";
-import { b as F, F as h, c as p, d as i, e as P, f as I, g as N } from "../../../floating-ui.react-nmA48tb2.js";
-import { composePopoverFloatingProps as x } from "../helpers/composeFloatingProps.js";
-const l = ({
-  children: n,
-  className: o,
+import { q as x, r as I, t as P, v as c, g as w, w as C, f as E } from "../../../floating-ui.react-CPN4oQCc.js";
+import { composePopoverFloatingProps as T } from "../helpers/composeFloatingProps.js";
+import { useContext as N, useEffect as A } from "react";
+import { s as L } from "../../../factory-DHLOr79I.js";
+import { PopoverContext as M } from "../hooks/usePopover.js";
+const u = ({
+  children: o,
   displayMode: r,
-  style: s,
+  id: i,
+  style: f,
   virtualFocus: a,
-  ...f
+  ...m
 }) => {
-  const t = g();
-  if (!t) return null;
-  const u = x(
+  const t = N(M);
+  if (A(() => {
+    if (t != null && t.show) {
+      const g = () => {
+        document.querySelectorAll(
+          '[data-floating-ui-focus-guard][aria-hidden="true"]'
+        ).forEach((s) => {
+          s instanceof HTMLElement && s.tabIndex !== -1 && (s.tabIndex = -1);
+        });
+      }, b = (n) => {
+        n instanceof HTMLElement && n.hasAttribute("data-floating-ui-focus-guard") && n.getAttribute("aria-hidden") === "true" && n.tabIndex !== -1 && (n.tabIndex = -1);
+      }, F = setTimeout(g, 0), d = new MutationObserver((n) => {
+        n.forEach((s) => {
+          s.addedNodes.forEach(b);
+        });
+      });
+      return d.observe(document.body, {
+        childList: !0,
+        subtree: !0
+      }), () => {
+        clearTimeout(F), d.disconnect();
+      };
+    }
+  }, [t == null ? void 0 : t.show]), !t) return null;
+  const h = T(
     t,
     r,
-    s
+    f,
+    i
   );
-  return /* @__PURE__ */ e(I, { elementsRef: t.list, children: /* @__PURE__ */ e(
-    N,
+  return /* @__PURE__ */ e(C, { elementsRef: t.list, children: /* @__PURE__ */ e(
+    E,
     {
       context: t.api.context,
       initialFocus: a ? -1 : 0,
@@ -28,32 +51,24 @@ const l = ({
       disabled: !(t != null && t.show),
       returnFocus: !a,
       children: /* @__PURE__ */ e(
-        "div",
+        L.div,
         {
-          ...f,
-          className: c(o, m.content),
+          ...m,
           hidden: !(t != null && t.show),
           ref: t == null ? void 0 : t.api.refs.setFloating,
-          ...u,
-          children: n
+          ...h,
+          children: o
         }
       )
     }
   ) });
-}, d = ({
-  className: n,
+}, l = ({
   container: o,
   ...r
 }) => {
-  const s = p();
-  return o ? /* @__PURE__ */ e(i, { id: s, children: /* @__PURE__ */ e(P, { root: o, preserveTabOrder: !0, children: /* @__PURE__ */ e(
-    l,
-    {
-      ...r,
-      className: c(n, m.portal)
-    }
-  ) }) }) : /* @__PURE__ */ e(i, { id: s, children: /* @__PURE__ */ e(l, { ...r, className: n }) });
-}, y = (n) => F() === null ? /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(d, { ...n }) }) : /* @__PURE__ */ e(d, { ...n });
+  const i = P();
+  return o ? /* @__PURE__ */ e(c, { id: i, children: /* @__PURE__ */ e(w, { root: o, preserveTabOrder: !0, children: /* @__PURE__ */ e(u, { ...r }) }) }) : /* @__PURE__ */ e(c, { id: i, children: /* @__PURE__ */ e(u, { ...r }) });
+}, v = (o) => x() === null ? /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(l, { ...o }) }) : /* @__PURE__ */ e(l, { ...o });
 export {
-  y as PopoverContent
+  v as PopoverContent
 };

package/dist/components/Popover/helpers/composeFloatingProps.js

@@ -1,37 +1,37 @@
-import { getActiveElement as h } from "../../../helpers/dom/getActiveElement.js";
-import { handlePopoverTabKey as x } from "./handlePopoverTabKey.js";
-const I = (t, e, d) => {
-  var c;
-  const s = t != null && t.hasInnerRole() || t == null ? void 0 : t.type, g = s && ["listbox", "menu", "tree"].includes(s), m = s && ["application", "combobox", "composite", "group"].includes(s), f = e === "inline", y = () => {
+import { getActiveElement as F } from "../../../helpers/dom/getActiveElement.js";
+import { handlePopoverTabKey as w } from "./handlePopoverTabKey.js";
+const K = (t, c, m, f) => {
+  var l, e, u;
+  const a = t != null && t.hasInnerRole() || t == null ? void 0 : t.type, y = a && ["listbox", "menu", "tree"].includes(a), g = a && ["application", "combobox", "composite", "group"].includes(a), x = c === "inline", h = () => {
     setTimeout(() => {
-      var i, a;
-      h() === t.api.elements.floating && !t.getVirtualFocus && ((a = (i = t.list.current) == null ? void 0 : i[0]) == null || a.focus());
+      var i, s;
+      F() === t.api.elements.floating && !t.getVirtualFocus && ((s = (i = t.list.current) == null ? void 0 : i[0]) == null || s.focus());
     });
-  }, r = (i) => {
-    var l, u;
-    const a = t.getVirtualFocus !== void 0;
-    if (i.key === "Tab" && x(t, i), i.key === "PageUp" && !a && ((l = t.list.current[0]) == null || l.focus()), i.key === "PageDown" && !a) {
-      const b = Math.max((t == null ? void 0 : t.list.current.length) - 1, 0);
-      (u = t.list.current[b]) == null || u.focus();
+  }, b = (i) => {
+    var s, d;
+    if (i.key === "Tab" && w(t, i), i.key === "PageUp" && !(t != null && t.isVirtualFocus) && ((s = t.list.current[0]) == null || s.focus()), i.key === "PageDown" && !(t != null && t.isVirtualFocus)) {
+      const A = Math.max((t == null ? void 0 : t.list.current.length) - 1, 0);
+      (d = t.list.current[A]) == null || d.focus();
     }
-    t.disabledAutoToggle || A(t, i);
+    I(t, i);
   }, n = t.interactions.getFloatingProps({
-    onFocus: y,
-    onKeyDown: r
+    onFocus: h,
+    onKeyDown: b
   });
   return {
     ...n,
-    "aria-activedescendant": m ? n == null ? void 0 : n["aria-activedescendant"] : void 0,
-    "aria-orientation": g ? n == null ? void 0 : n["aria-orientation"] : void 0,
-    role: s,
+    "aria-activedescendant": g ? n == null ? void 0 : n["aria-activedescendant"] : void 0,
+    "aria-orientation": y ? n == null ? void 0 : n["aria-orientation"] : void 0,
+    id: f ?? ((e = (l = t == null ? void 0 : t.api) == null ? void 0 : l.context) == null ? void 0 : e.floatingId),
+    role: a,
     style: {
-      ...d,
-      ...f ? {} : (c = t == null ? void 0 : t.api) == null ? void 0 : c.floatingStyles
+      ...m,
+      ...x ? {} : (u = t == null ? void 0 : t.api) == null ? void 0 : u.floatingStyles
     }
   };
-}, A = (t, e) => {
-  t.type !== "listbox" || e.key !== "ArrowUp" || t.activeIndex !== 0 || t.setShowWithReason(!1, e.nativeEvent, "list-navigation");
+}, I = (t, c) => {
+  t.type !== "listbox" || c.key !== "ArrowUp" || t.activeIndex !== 0 || t.setShowWithReason(!1, c.nativeEvent, "list-navigation");
 };
 export {
-  I as composePopoverFloatingProps
+  K as composePopoverFloatingProps
 };

package/dist/components/Popover/helpers/handlePopoverTabKey.js

@@ -1,28 +1,30 @@
-import { t as f } from "../../../index.esm-BnSuefUA.js";
-import { s as c } from "../../../Popover.module-BzjyEvrY.js";
+import { t as c } from "../../../index.esm-BnSuefUA.js";
 import { FOCUSABLE_QUERY_SELECTOR as l } from "../../../constants.js";
-import { focusableElements as m } from "../../../helpers/dom/focusableElements.js";
-import { waitUntilTrue as u } from "./waitUntilTrue.js";
-const g = async (n, s) => {
-  if (s.key !== "Tab")
+import { focusableElements as u } from "../../../helpers/dom/focusableElements.js";
+import { waitUntilTrue as m } from "./waitUntilTrue.js";
+const g = async (t, a) => {
+  if (a.key !== "Tab")
     return;
-  const o = n.api.elements.reference;
-  if (!o)
+  const i = t.api.elements.reference;
+  if (!i)
     return;
-  let t = o;
-  if (!t.matches(l)) {
-    const e = m(o);
-    t = e[e.length - 1];
+  let n = i;
+  if (!n.matches(l)) {
+    const e = u(i);
+    n = e[e.length - 1];
   }
-  if (s.shiftKey && (n.setShow(!1), t.focus()), !s.shiftKey) {
-    n.setShowWithReason(!1);
-    const e = f(document.documentElement).filter(
-      (i) => !i.closest(`.${c.content}`) && !i.hasAttribute("data-floating-ui-focus-guard")
-    ), a = e.indexOf(t), r = e[a + 1];
-    if (a === -1 || !r) return;
-    await u(
-      () => !r.hasAttribute("data-floating-ui-inert")
-    ), r.focus();
+  if (a.shiftKey && (t.setShow(!1), n.focus()), !a.shiftKey) {
+    t.setShowWithReason(!1);
+    const e = c(document.documentElement).filter(
+      (r) => {
+        var o;
+        return !((o = t.api.elements.floating) != null && o.contains(r)) && !r.hasAttribute("data-floating-ui-focus-guard");
+      }
+    ), f = e.indexOf(n), s = e[f + 1];
+    if (f === -1 || !s) return;
+    await m(
+      () => !s.hasAttribute("data-floating-ui-inert")
+    ), s.focus();
   }
 };
 export {