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

package/dist/components/Popover/Popover.js

@@ -1,89 +1,93 @@
-import { jsx as o, jsxs as y } from "react/jsx-runtime";
-import { forwardRef as E, useRef as G, useContext as H } from "react";
-import { GlobalCSSClass as e } from "../../enums.js";
+import { jsx as r, jsxs as G } from "react/jsx-runtime";
+import { forwardRef as H, useRef as S, useContext as T } from "react";
+import { GlobalCSSClass as o } from "../../enums.js";
 import { propagateTestid as c } from "../../helpers/utility/propagateTestid.js";
-import { PopoverActivator as S } from "./components/PopoverActivator.js";
-import { PopoverContent as T } from "./components/PopoverContent.js";
-import { s as k } from "../../factory-oPXoMw9H.js";
-import { c as n } from "../../cx-DN21T1EH.js";
-import { usePopoverImperativeHandle as q } from "./hooks/usePopoverImperativeHandle.js";
-import { popover as z } from "./Popover.styles.js";
-import { usePopover as B, PopoverContext as v } from "./hooks/usePopover.js";
-import { NestedPopoverActivator as D } from "./components/NestedPopoverActivator.js";
-const F = ({
+import { PopoverActivator as k } from "./components/PopoverActivator.js";
+import { PopoverContent as q } from "./components/PopoverContent.js";
+import { s as z } from "../../factory-CcYfm2kB.js";
+import { c as a } from "../../cx-DN21T1EH.js";
+import { usePopoverImperativeHandle as B } from "./hooks/usePopoverImperativeHandle.js";
+import { popover as D } from "./Popover.styles.js";
+import { FloatingPopoverContext as v, useFloatingPopover as J } from "./hooks/useFloatingPopover.js";
+const K = ({
   activator: d,
   align: l = "auto",
   children: f,
   className: P,
   container: h,
   contentClassName: x,
-  contentStyle: a,
+  contentStyle: s,
   defaultShow: u,
   displayMode: m = "overlay",
   fluid: C,
   focusStartIndex: N,
   matchActivatorWidth: A,
-  onActivated: j,
-  onDeactivated: I,
-  onNavigate: R,
-  type: W,
-  show: b,
-  virtualFocus: s,
+  offset: g,
+  onActivated: I,
+  onDeactivated: j,
+  onNavigate: y,
+  type: F,
+  show: R,
+  virtualFocus: i,
+  nested: W,
   ...t
-}, g) => {
-  const w = G(null), i = A && m === "overlay", r = z({ fluid: C, matchActivatorWidth: i }), p = B({
+}, b) => {
+  const w = S(null), E = T(v), n = A && m === "overlay", e = D({ fluid: C, matchActivatorWidth: n }), p = J({
     align: l,
     defaultShow: u,
     focusStartIndex: N,
-    matchActivatorWidth: i,
-    onActivated: j,
-    onDeactivated: I,
-    onNavigate: R,
-    show: b,
-    type: W,
-    virtualFocus: s
+    matchActivatorWidth: n,
+    nested: W ?? !!E,
+    offset: g,
+    onActivated: I,
+    onDeactivated: j,
+    onNavigate: y,
+    show: R,
+    type: F,
+    virtualFocus: i
   });
-  return q(g, p), /* @__PURE__ */ o(v.Provider, { value: p, children: /* @__PURE__ */ y(
-    k.div,
+  return B(b, p), /* @__PURE__ */ r(v.Provider, { value: p, children: /* @__PURE__ */ G(
+    z.div,
     {
       ...t,
-      className: n(
+      className: a(
         P,
-        e.FormElement,
-        r.root,
-        e.Popover
+        o.FormElement,
+        e.root,
+        o.Popover
       ),
       ref: w,
       children: [
-        /* @__PURE__ */ o(D, { parentPopover: H(v), children: /* @__PURE__ */ o(
-          S,
+        /* @__PURE__ */ r(
+          k,
           {
-            className: r.activator,
+            className: a(e.activator, o.PopoverActivator),
             "data-testid": c(t["data-testid"], "activator"),
             children: d
           }
-        ) }),
-        /* @__PURE__ */ o(
-          T,
+        ),
+        /* @__PURE__ */ r(
+          q,
           {
-            ...a,
-            className: n(
+            ...s,
+            className: a(
               x,
-              a?.className,
-              e.PopoverContent,
-              r.content
+              s?.className,
+              o.PopoverContent,
+              e.content
             ),
             container: h,
             "data-testid": c(t["data-testid"], "content"),
             displayMode: m,
-            virtualFocus: s,
+            virtualFocus: i,
             children: f
           }
         )
       ]
     }
   ) });
-}, M = E(F);
+}, L = H(K);
+L.displayName = "IressPopover";
 export {
-  M as IressPopover
+  L as IressPopover
 };

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

@@ -1,4 +1,4 @@
-import { s as t } from "../../sva-OmxClA9g.js";
+import { s as t } from "../../sva-CsHRIRDW.js";
 const a = t({
   slots: ["root", "activator", "content"],
   base: {
@@ -9,11 +9,13 @@ const a = t({
       display: "inline-block"
     },
     content: {
+      // Performance: CSS containment (no paint due to floating nature)
+      contain: "style",
       bg: "colour.neutral.10",
-      border: "divider",
       borderRadius: "radius.system.form",
-      layerStyle: "elevation.floating",
-      maxWidth: "input.16"
+      layerStyle: "dropdown",
+      maxWidth: "input.16",
+      zIndex: "200"
     }
   },
   variants: {

package/dist/components/Popover/components/PopoverActivator.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { IressUnstyledProps } from '../../../types';
+export interface PopoverActivatorProps extends IressUnstyledProps {
+    children?: ReactElement;
+}
+export declare const PopoverActivator: {
+    ({ children, ...restProps }: PopoverActivatorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -1,9 +1,9 @@
 import { jsx as f } from "react/jsx-runtime";
-import { useContext as l, useRef as d, useMemo as p, useEffect as m } from "react";
-import { focusableElements as v } from "../../../helpers/dom/focusableElements.js";
-import { usePopoverActivatorInteractions as g } from "../hooks/usePopoverActivatorInteractions.js";
-import { PopoverContext as A } from "../hooks/usePopover.js";
-const b = [
+import { useRef as l, useMemo as p, useEffect as d } from "react";
+import { focusableElements as m } from "../../../helpers/dom/focusableElements.js";
+import { usePopoverActivatorInteractions as v } from "../hooks/usePopoverActivatorInteractions.js";
+import { usePopover as g } from "../hooks/usePopover.js";
+const A = [
   "aria-controls",
   "aria-expanded",
   "aria-haspopup",
@@ -11,17 +11,17 @@ const b = [
   "id",
   "role",
   "tabindex"
-], x = (i, s) => {
-  const t = i.querySelector("[id]"), o = t?.getAttribute("id");
-  t?.removeAttribute("id"), b.forEach((r) => {
-    const c = i.getAttribute(r);
-    i.removeAttribute(r), c && s.setAttribute(r, c);
+], b = (n, s) => {
+  const t = n.querySelector("[id]"), o = t?.getAttribute("id");
+  t?.removeAttribute("id"), A.forEach((r) => {
+    const c = n.getAttribute(r);
+    n.removeAttribute(r), c && s.setAttribute(r, c);
   }), o && s.setAttribute("id", o);
-}, y = ({
-  children: i,
+}, E = ({
+  children: n,
   ...s
 }) => {
-  const t = l(A), o = d(null), r = i?.props, c = g(
+  const t = g(), o = l(null), r = n?.props, c = v(
     t,
     r
   ), u = p(() => {
@@ -32,7 +32,7 @@ const b = [
         t.api.context.floatingId
       ].join(" ").trim();
   }, [r, t]);
-  return m(() => {
+  return d(() => {
     !o.current || !t?.getVirtualFocus || t.activeIndex === null || (setTimeout(
       () => t?.api.refs.domReference.current?.removeAttribute(
         "aria-activedescendant"
@@ -52,26 +52,27 @@ const b = [
         ref: (e) => {
           if (!e) return;
           t?.api.refs.setReference(e);
-          const n = e?.querySelector("[role=combobox]") ?? v(e)[0];
-          n && (o.current = n, x(e, n));
+          const i = e?.querySelector("[role=combobox]") ?? m(e)[0];
+          i && (o.current = i, b(e, i));
         },
         onBlur: (e) => {
-          const n = t?.api.refs.floating.current, a = e.relatedTarget;
-          a instanceof Element && n?.contains(a) && (e.preventDefault(), e.stopPropagation());
+          const i = t?.api.refs.floating.current, a = e.relatedTarget;
+          a instanceof Element && i?.contains(a) && (e.preventDefault(), e.stopPropagation());
         },
         onFocus: (e) => {
-          const n = t?.api.refs.floating.current, a = e.relatedTarget;
-          a instanceof Element && (a.hasAttribute("data-floating-ui-focus-guard") || n?.contains(a)) && t.show && (setTimeout(() => {
+          const i = t?.api.refs.floating.current, a = e.relatedTarget;
+          a instanceof Element && (a.hasAttribute("data-floating-ui-focus-guard") || i?.contains(a)) && t.show && (setTimeout(() => {
             o.current?.focus();
           }), setTimeout(() => {
             t.setShowWithReason(!1, e.nativeEvent, "focus");
           }, 300));
         }
       }),
-      children: i
+      children: n
     }
   );
 };
+E.displayName = "PopoverActivator";
 export {
-  y as PopoverActivator
+  E as PopoverActivator
 };

package/dist/components/Popover/components/PopoverContent.d.ts

@@ -0,0 +1,19 @@
+import { FloatingUIContainer, IressStyledProps } from '../../../types';
+export interface PopoverContentProps extends IressStyledProps {
+    /**
+     * The container element to render the popover into.
+     */
+    container?: FloatingUIContainer;
+    /**
+     * Whether the popover is displayed as an inline element or an overlay.
+     */
+    displayMode?: 'inline' | 'overlay';
+    /**
+     * Whether to use virtual focus management to prevent focus traps when using nested popovers.
+     */
+    virtualFocus?: boolean;
+}
+export declare const PopoverContent: {
+    (props: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -1,74 +1,86 @@
-import { jsx as e } from "react/jsx-runtime";
-import { q as F, r as v, t as x, v as c, g as I, w as P, f as w } from "../../../floating-ui.react-BetVZ099.js";
-import { composePopoverFloatingProps as C } from "../helpers/composeFloatingProps.js";
-import { useContext as E, useEffect as T } from "react";
-import { s as N } from "../../../factory-oPXoMw9H.js";
-import { PopoverContext as A } from "../hooks/usePopover.js";
-const u = ({
-  children: r,
-  displayMode: n,
-  id: i,
-  style: f,
-  virtualFocus: a,
-  ...m
+import { jsx as t } from "react/jsx-runtime";
+import { q as P, r as x, t as w, v as f, g as C, w as N, f as y } from "../../../floating-ui.react-B0nDXRN6.js";
+import { composePopoverFloatingProps as E } from "../helpers/composeFloatingProps.js";
+import { useRef as T, useEffect as m, useMemo as A } from "react";
+import { s as M } from "../../../factory-CcYfm2kB.js";
+import { usePopover as L } from "../hooks/usePopover.js";
+const d = ({
+  children: n,
+  displayMode: r,
+  id: a,
+  style: p,
+  virtualFocus: i,
+  ...h
 }) => {
-  const t = E(A);
-  if (T(() => {
-    if (t?.show) {
-      const p = () => {
+  const e = L(), l = T(null);
+  m(() => {
+    if (e?.show) {
+      const v = () => {
         document.querySelectorAll(
           '[data-floating-ui-focus-guard][aria-hidden="true"]'
         ).forEach((s) => {
           s instanceof HTMLElement && s.tabIndex !== -1 && (s.tabIndex = -1);
         });
-      }, g = (o) => {
+      }, F = (o) => {
         o instanceof HTMLElement && o.hasAttribute("data-floating-ui-focus-guard") && o.getAttribute("aria-hidden") === "true" && o.tabIndex !== -1 && (o.tabIndex = -1);
-      }, b = setTimeout(p, 0), d = new MutationObserver((o) => {
+      }, I = setTimeout(v, 0), u = new MutationObserver((o) => {
         o.forEach((s) => {
-          s.addedNodes.forEach(g);
+          s.addedNodes.forEach(F);
         });
       });
-      return d.observe(document.body, {
+      return u.observe(document.body, {
         childList: !0,
         subtree: !0
       }), () => {
-        clearTimeout(b), d.disconnect();
+        clearTimeout(I), u.disconnect();
       };
     }
-  }, [t?.show]), !t) return null;
-  const h = C(
-    t,
-    n,
-    f,
-    i
+  }, [e?.show]), m(() => {
+    e?.show && e.api.elements.reference && (l.current = e.getFocusableActivator() ?? null);
+  }, [e?.show, e]);
+  const g = A(
+    () => i ? !1 : l,
+    [i]
   );
-  return /* @__PURE__ */ e(P, { elementsRef: t.list, children: /* @__PURE__ */ e(
-    w,
+  if (!e) return null;
+  const b = E(
+    e,
+    r,
+    p,
+    a
+  );
+  return /* @__PURE__ */ t(N, { elementsRef: e.list, children: /* @__PURE__ */ t(
+    y,
     {
-      context: t.api.context,
-      initialFocus: a ? -1 : 0,
+      context: e.api.context,
+      initialFocus: i ? -1 : 0,
       modal: !1,
-      disabled: !t?.show,
-      returnFocus: !a,
-      children: /* @__PURE__ */ e(
-        N.div,
+      disabled: !e?.show,
+      returnFocus: g,
+      children: /* @__PURE__ */ t(
+        M.div,
         {
-          ...m,
-          hidden: !t?.show,
-          ref: t?.api.refs.setFloating,
           ...h,
-          children: r
+          hidden: !e?.show,
+          ref: e?.api.refs.setFloating,
+          ...b,
+          children: n
         }
       )
     }
   ) });
-}, l = ({
-  container: r,
-  ...n
+};
+d.displayName = "PopoverContentInner";
+const c = ({
+  container: n,
+  ...r
 }) => {
-  const i = x();
-  return r ? /* @__PURE__ */ e(c, { id: i, children: /* @__PURE__ */ e(I, { root: r, preserveTabOrder: !0, children: /* @__PURE__ */ e(u, { ...n }) }) }) : /* @__PURE__ */ e(c, { id: i, children: /* @__PURE__ */ e(u, { ...n }) });
-}, O = (r) => F() === null ? /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(l, { ...r }) }) : /* @__PURE__ */ e(l, { ...r });
+  const a = w();
+  return n ? /* @__PURE__ */ t(f, { id: a, children: /* @__PURE__ */ t(C, { root: n, preserveTabOrder: !0, children: /* @__PURE__ */ t(d, { ...r }) }) }) : /* @__PURE__ */ t(f, { id: a, children: /* @__PURE__ */ t(d, { ...r }) });
+};
+c.displayName = "PopoverContentContainer";
+const G = (n) => P() === null ? /* @__PURE__ */ t(x, { children: /* @__PURE__ */ t(c, { ...n }) }) : /* @__PURE__ */ t(c, { ...n });
+G.displayName = "PopoverContent";
 export {
-  O as PopoverContent
+  G as PopoverContent
 };

package/dist/components/Popover/helpers/composeFloatingProps.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'react';
+import { IressUnstyledProps } from '../../../types';
+import { FloatingPopoverHookReturn } from '../hooks/useFloatingPopover';
+/**
+ * This adds additional props to the Floating UI floatingProps to better suit the requirements of IressPopover.
+ * Some are slight tweaks to the UX to ensure it behaves according to IDS standards, as well as fix some issues found when using Floating UI.
+ *
+ * See: https://floating-ui.com/docs/useFloating#floatingstyles
+ *
+ * @param {FloatingPopoverHookReturn} popover the popover context
+ * @param {'inline' | 'overlay'} displayMode how the content is to be displayed, whether inline (static, underneath activator) or overlay (floating, anchored to the activator)
+ * @param {CSSProperties} style any custom styles for the popover, it will be appended to the Floating UI styles
+ * @param {string} customId optional custom ID to override the floating ID - used to prevent ID conflicts
+ * @returns {IressUnstyledProps} the props to be passed to the floating content
+ */
+export declare const composePopoverFloatingProps: (popover: FloatingPopoverHookReturn, displayMode?: "inline" | "overlay", style?: CSSProperties, customId?: string) => IressUnstyledProps;

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

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

package/dist/components/Popover/helpers/handlePopoverTabKey.d.ts

@@ -0,0 +1,8 @@
+import { KeyboardEvent } from 'react';
+import { FloatingPopoverHookReturn } from '../hooks/useFloatingPopover';
+/**
+ * This helper function is used to handle the tab key press event when the popover is open, as Floating UI sometimes does not focus on the next element when the user tabs from the popover contents.
+ * @param popover {FloatingPopoverHookReturn} The popover context value, usually retrieved from the usePopover hook.
+ * @param e {KeyboardEvent} The keyboard event object that triggered the tab key press.
+ */
+export declare const handlePopoverTabKey: (popover: FloatingPopoverHookReturn, e: KeyboardEvent) => Promise<void>;

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

@@ -1,29 +1,40 @@
-import { t as o } from "../../../index.esm-CL8gh5wr.js";
-import { FOCUSABLE_QUERY_SELECTOR as c } from "../../../constants.js";
-import { focusableElements as l } from "../../../helpers/dom/focusableElements.js";
-import { waitUntilTrue as u } from "./waitUntilTrue.js";
-const E = async (t, a) => {
-  if (a.key !== "Tab")
+import { t as l } from "../../../index.esm-CL8gh5wr.js";
+import { FOCUSABLE_QUERY_SELECTOR as o } from "../../../constants.js";
+import { focusableElements as f } from "../../../helpers/dom/focusableElements.js";
+import { waitUntilTrue as c } from "./waitUntilTrue.js";
+const r = (e, t) => {
+  e.setShow(!1), t.focus();
+}, m = (e, t) => {
+  const s = l(document.documentElement).filter(
+    (n) => e.api.elements.floating?.contains(n)
+  )[0];
+  document.activeElement === s && (e.setShow(!1), t.focus());
+}, u = async (e, t) => {
+  e.setShowWithReason(!1);
+  const i = l(document.documentElement).filter(
+    (a) => !e.api.elements.floating?.contains(a) && !a.hasAttribute("data-floating-ui-focus-guard")
+  ), s = i.indexOf(t), n = i[s + 1];
+  s === -1 || !n || (await c(
+    () => !n.hasAttribute("data-floating-ui-inert")
+  ), setTimeout(() => n.focus()));
+}, h = (e, t) => {
+  const i = l(document.documentElement).filter(
+    (n) => e.api.elements.floating?.contains(n)
+  ), s = i[i.length - 1];
+  document.activeElement === s && e.setShowWithReason(!1, t, "focus-out");
+}, I = async (e, t) => {
+  if (t.key !== "Tab")
     return;
-  const i = t.api.elements.reference;
+  const i = e.api.elements.reference, s = e.hasInnerRole();
   if (!i)
     return;
   let n = i;
-  if (!n.matches(c)) {
-    const e = l(i);
-    n = e[e.length - 1];
-  }
-  if (a.shiftKey && (t.setShow(!1), n.focus()), !a.shiftKey) {
-    t.setShowWithReason(!1);
-    const e = o(document.documentElement).filter(
-      (r) => !t.api.elements.floating?.contains(r) && !r.hasAttribute("data-floating-ui-focus-guard")
-    ), f = e.indexOf(n), s = e[f + 1];
-    if (f === -1 || !s) return;
-    await u(
-      () => !s.hasAttribute("data-floating-ui-inert")
-    ), s.focus();
+  if (!n.matches(o)) {
+    const a = f(i);
+    n = a[a.length - 1];
   }
+  t.shiftKey && s && r(e, n), t.shiftKey && !s && m(e, n), !t.shiftKey && s && await u(e, n), !t.shiftKey && !s && h(e, t);
 };
 export {
-  E as handlePopoverTabKey
+  I as handlePopoverTabKey
 };