@iress-oss/ids-components 0.0.1-dev.9 → 5.14.0

package/dist/components/Popover/InputPopover/InputPopoverActivator.js

@@ -0,0 +1,62 @@
+import { jsx as E } from "react/jsx-runtime";
+import { s as R } from "../../../Popover.module-BVuEALLH.js";
+import { usePopover as k } from "../hooks/usePopover.js";
+import { useCallback as f, cloneElement as F } from "react";
+import { hasFocus as S } from "../helpers/hasFocus.js";
+import { usePopoverActivatorInteractions as W } from "../hooks/usePopoverActivatorInteractions.js";
+const M = ({
+  children: c,
+  disabledAutoToggle: o,
+  minLength: m,
+  ...h
+}) => {
+  const t = k(), n = c == null ? void 0 : c.props, e = m ?? n.minLength ?? 1, i = "focus", v = f(
+    (s) => {
+      var r;
+      const a = s.currentTarget.value;
+      if (!o) {
+        const u = a.length >= e;
+        u && (t == null ? void 0 : t.show) === !1 ? t.setShowWithReason(!0, s.nativeEvent, i) : !u && (t != null && t.show) && t.setShowWithReason(!1, s.nativeEvent, i);
+      }
+      (r = n.onChange) == null || r.call(n, s, a);
+    },
+    [n, o, e, t]
+  ), l = f(
+    (s) => {
+      var r;
+      const a = s.currentTarget.value;
+      (r = n.onClick) == null || r.call(n, s), !o && (t == null ? void 0 : t.show) === !1 && S(s.currentTarget) && a.length >= e && t.setShowWithReason(!0, s.nativeEvent, i);
+    },
+    [n, o, e, t]
+  ), w = f(
+    (s) => {
+      var a;
+      (a = n.onFocus) == null || a.call(n, s), !o && (!e || s.currentTarget.value.length >= e) && (t == null ? void 0 : t.show) === !1 && t.setShowWithReason(!0, s.nativeEvent, "focus");
+    },
+    [n, o, e, t]
+  ), C = W(
+    t,
+    n
+  );
+  return /* @__PURE__ */ E(
+    "div",
+    {
+      ...h,
+      className: R.activator,
+      ref: t == null ? void 0 : t.api.refs.setReference,
+      children: c && t && F(
+        c,
+        t.interactions.getReferenceProps({
+          ...C,
+          "aria-autocomplete": "list",
+          onChange: v,
+          onClick: l,
+          onFocus: w
+        })
+      )
+    }
+  );
+};
+export {
+  M as InputPopoverActivator
+};

package/dist/components/Popover/InputPopover/InputPopoverProvider.js

@@ -0,0 +1,103 @@
+import { jsx as N } from "react/jsx-runtime";
+import { forwardRef as V, useRef as _, useMemo as h } from "react";
+import { o as q, f as y, c as U, d as $, j as z, g as G, h as K, i as X } from "../../../floating-ui.react-RKRjRgyj.js";
+import { POPOVER_USE_MAX_HEIGHT as k } from "../Popover.types.js";
+import { usePopoverState as B } from "../hooks/usePopoverState.js";
+import { usePopoverNavigation as J } from "../hooks/usePopoverNavigation.js";
+import { usePopoverAria as L } from "../hooks/usePopoverAria.js";
+import { PopoverContext as Q } from "../PopoverProvider.js";
+import { usePopoverImperativeHandle as W } from "../hooks/usePopoverImperativeHandle.js";
+import { focusableElements as Y } from "../../../helpers/dom/focusableElements.js";
+const Z = V(
+  ({
+    align: c,
+    autoHighlight: v,
+    children: w,
+    defaultShow: I,
+    disabledAutoToggle: u,
+    focusStartIndex: g,
+    matchActivatorWidth: l = !0,
+    onActivated: a,
+    onDeactivated: m,
+    onNavigate: O,
+    show: F,
+    type: n
+  }, E) => {
+    const R = c === "auto", f = _(null), r = B({
+      defaultShow: I,
+      show: F
+    }), S = h(() => {
+      const e = [q(5), y({ padding: 5 })];
+      return l && e.push(
+        U({
+          apply({ rects: t, availableHeight: s, elements: H }) {
+            requestAnimationFrame(() => {
+              Object.assign(H.floating.style, {
+                width: `${t.reference.width}px`,
+                maxHeight: s > k ? `${s}px` : void 0
+              });
+            });
+          },
+          padding: 5
+        })
+      ), e;
+    }, [l]), o = $({
+      open: r.show,
+      onOpenChange: (e, t, s) => {
+        r.setShow(e), e ? a == null || a(t, s, i) : m == null || m(t, s, i);
+      },
+      middleware: S,
+      placement: R ? void 0 : c,
+      whileElementsMounted: z
+    }), M = G(o.context, {
+      enabled: !u,
+      escapeKey: !1
+    }), b = K(o.context, {
+      role: n
+    }), { activeIndex: i, list: x, listNav: j, setActiveIndex: d } = J(
+      o.context,
+      n,
+      {
+        focusItemOnOpen: v,
+        virtual: !0
+      },
+      O,
+      g
+    ), P = X([M, b, j]), p = L(), C = h(
+      () => ({
+        ...p,
+        ...r,
+        activeIndex: i,
+        api: o,
+        disabledAutoToggle: u,
+        getFocusableActivator: () => {
+          const e = o.elements.reference;
+          return (e == null ? void 0 : e.querySelector("[role=combobox]")) ?? Y(e)[0];
+        },
+        getVirtualFocus: () => f.current,
+        interactions: P,
+        list: x,
+        setActiveIndex: d,
+        setShowWithReason: (e, t, s) => o.context.onOpenChange(e, t, s),
+        setVirtualFocus: (e) => f.current = e,
+        type: n
+      }),
+      [
+        i,
+        o,
+        p,
+        u,
+        P,
+        x,
+        d,
+        r,
+        n
+      ]
+    );
+    return W(E, o, p, r), /* @__PURE__ */ N(Q.Provider, { value: C, children: w });
+  }
+);
+Z.displayName = "InputPopoverProvider";
+export {
+  Z as InputPopoverProvider
+};

package/dist/components/Popover/Popover.js

@@ -0,0 +1,97 @@
+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 s } from "../../helpers/utility/propagateTestid.js";
+import { s as E } from "../../Popover.module-BVuEALLH.js";
+import { PopoverProvider as F } from "./PopoverProvider.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), m = 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,
+    {
+      align: d,
+      defaultShow: f,
+      disabledAutoToggle: h,
+      focusStartIndex: P,
+      matchActivatorWidth: m,
+      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": s(o["data-testid"], "activator"),
+                children: p
+              }
+            ) }),
+            /* @__PURE__ */ t(
+              L,
+              {
+                className: v,
+                container: l,
+                "data-testid": s(o["data-testid"], "content"),
+                displayMode: e,
+                style: {
+                  ...U(r, m),
+                  ...o.style
+                },
+                virtualFocus: i,
+                children: n
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}, a = I(B);
+a.Align = S;
+a.Type = R;
+export {
+  a as IressPopover
+};

package/dist/components/Popover/Popover.types.js

@@ -0,0 +1,15 @@
+var t = /* @__PURE__ */ ((i) => (i.Menu = "menu", i.Listbox = "listbox", i.Tree = "tree", i.Grid = "grid", i.Dialog = "dialog", i))(t || {});
+const e = [
+  "menu",
+  "listbox",
+  "tree",
+  "grid",
+  "dialog"
+], n = 200;
+var r = /* @__PURE__ */ ((i) => (i.Active = "iress--popover-active", i))(r || {});
+export {
+  e as POPOVER_TYPES,
+  n as POPOVER_USE_MAX_HEIGHT,
+  r as PopoverCssClass,
+  t as PopoverType
+};

package/dist/components/Popover/PopoverProvider.js

@@ -0,0 +1,115 @@
+import { jsx as _ } from "react/jsx-runtime";
+import { createContext as k, forwardRef as q, useRef as U, useMemo as f } from "react";
+import { o as $, b as y, f as z, s as G, c as X, d as B, e as J, g as K, h as L, i as Q, j as W } from "../../floating-ui.react-RKRjRgyj.js";
+import { POPOVER_USE_MAX_HEIGHT as Y } from "./Popover.types.js";
+import { usePopoverState as Z } from "./hooks/usePopoverState.js";
+import { usePopoverNavigation as A } from "./hooks/usePopoverNavigation.js";
+import { usePopoverAria as T } from "./hooks/usePopoverAria.js";
+import { usePopoverImperativeHandle as D } from "./hooks/usePopoverImperativeHandle.js";
+import { focusableElements as ee } from "../../helpers/dom/focusableElements.js";
+const oe = k(
+  void 0
+), te = q(
+  ({
+    align: x,
+    children: I,
+    defaultShow: E,
+    disabledAutoToggle: n,
+    focusStartIndex: R,
+    matchActivatorWidth: P,
+    onActivated: c,
+    onDeactivated: m,
+    onNavigate: S,
+    type: i,
+    show: b,
+    virtualFocus: u
+  }, g) => {
+    const p = x === "auto", h = U(null), r = Z({
+      defaultShow: E,
+      show: b
+    }), M = f(() => {
+      const e = [
+        $(5),
+        p ? y() : z(),
+        G()
+      ];
+      return P && e.push(
+        X({
+          apply({ rects: s, availableHeight: t, elements: V }) {
+            requestAnimationFrame(() => {
+              Object.assign(V.floating.style, {
+                width: `${s.reference.width}px`,
+                maxHeight: t > Y ? `${t}px` : void 0
+              });
+            });
+          },
+          padding: 5
+        })
+      ), e;
+    }, [p, P]), o = B({
+      open: r.show,
+      onOpenChange: (e, s, t) => {
+        r.setShow(e), e ? c == null || c(s, t, a) : m == null || m(s, t, a);
+      },
+      middleware: M,
+      placement: p ? void 0 : x,
+      whileElementsMounted: W
+    }), N = J(o.context, {
+      enabled: !n
+    }), j = K(o.context, {
+      enabled: !n
+    }), F = L(o.context, {
+      role: i
+    }), { activeIndex: a, list: d, listNav: H, setActiveIndex: v } = A(
+      o.context,
+      i,
+      {
+        focusItemOnOpen: !0,
+        virtual: u
+      },
+      S,
+      R
+    ), l = T(), w = Q([N, j, F, H]), O = f(() => u ? {
+      getVirtualFocus: () => h.current,
+      setVirtualFocus: (e) => {
+        h.current = e;
+      }
+    } : {}, [u]), C = f(
+      () => ({
+        ...l,
+        ...r,
+        ...O,
+        api: o,
+        activeIndex: a,
+        disabledAutoToggle: n,
+        getFocusableActivator: () => {
+          const e = o.elements.reference;
+          return (e == null ? void 0 : e.querySelector("[role=combobox]")) ?? ee(e)[0];
+        },
+        interactions: w,
+        list: d,
+        setActiveIndex: v,
+        setShowWithReason: (e, s, t) => o.context.onOpenChange(e, s, t),
+        type: i
+      }),
+      [
+        a,
+        o,
+        l,
+        n,
+        w,
+        d,
+        v,
+        r,
+        i,
+        O
+      ]
+    );
+    return D(g, o, l, r, C), /* @__PURE__ */ _(oe.Provider, { value: C, children: I });
+  }
+);
+te.displayName = "PopoverProvider";
+export {
+  oe as PopoverContext,
+  te as PopoverProvider
+};

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

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

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

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

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

@@ -0,0 +1,59 @@
+import { jsx as n } from "react/jsx-runtime";
+import { c } from "../../../index-2QXL0WYc.js";
+import { s as m } from "../../../Popover.module-BVuEALLH.js";
+import { usePopover as F } from "../hooks/usePopover.js";
+import { k as g, F as h, l as p, m as i, n as P, p as I, q as N } from "../../../floating-ui.react-RKRjRgyj.js";
+import { composePopoverFloatingProps as x } from "../helpers/composeFloatingProps.js";
+const l = ({
+  children: e,
+  className: o,
+  displayMode: r,
+  style: s,
+  virtualFocus: a,
+  ...f
+}) => {
+  const t = F();
+  if (!t) return null;
+  const u = x(
+    t,
+    r,
+    s
+  );
+  return /* @__PURE__ */ n(I, { elementsRef: t.list, children: /* @__PURE__ */ n(
+    N,
+    {
+      context: t.api.context,
+      initialFocus: a ? -1 : 0,
+      modal: !1,
+      disabled: !(t != null && t.show),
+      returnFocus: !a,
+      children: /* @__PURE__ */ n(
+        "div",
+        {
+          ...f,
+          className: c(o, m.content),
+          hidden: !(t != null && t.show),
+          ref: t == null ? void 0 : t.api.refs.setFloating,
+          ...u,
+          children: e
+        }
+      )
+    }
+  ) });
+}, d = ({
+  className: e,
+  container: o,
+  ...r
+}) => {
+  const s = p();
+  return o ? /* @__PURE__ */ n(i, { id: s, children: /* @__PURE__ */ n(P, { root: o, preserveTabOrder: !0, children: /* @__PURE__ */ n(
+    l,
+    {
+      ...r,
+      className: c(e, m.portal)
+    }
+  ) }) }) : /* @__PURE__ */ n(i, { id: s, children: /* @__PURE__ */ n(l, { ...r, className: e }) });
+}, q = (e) => g() === null ? /* @__PURE__ */ n(h, { children: /* @__PURE__ */ n(d, { ...e }) }) : /* @__PURE__ */ n(d, { ...e });
+export {
+  q as PopoverContent
+};

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

@@ -0,0 +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 = () => {
+    setTimeout(() => {
+      var i, a;
+      h() === t.api.elements.floating && !t.getVirtualFocus && ((a = (i = t.list.current) == null ? void 0 : i[0]) == null || a.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();
+    }
+    t.disabledAutoToggle || A(t, i);
+  }, n = t.interactions.getFloatingProps({
+    onFocus: y,
+    onKeyDown: r
+  });
+  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,
+    style: {
+      ...d,
+      ...f ? {} : (c = t == null ? void 0 : t.api) == null ? void 0 : c.floatingStyles
+    }
+  };
+}, A = (t, e) => {
+  t.type !== "listbox" || e.key !== "ArrowUp" || t.activeIndex !== 0 || t.setShowWithReason(!1, e.nativeEvent, "list-navigation");
+};
+export {
+  I as composePopoverFloatingProps
+};

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

@@ -0,0 +1,4 @@
+const t = (e, o = !1) => o ? { maxWidth: "none" } : e ? { maxWidth: e, width: "100%" } : {};
+export {
+  t as composePopoverWidth
+};

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

@@ -0,0 +1,30 @@
+import { t as f } from "../../../index.esm-BnSuefUA.js";
+import { s as c } from "../../../Popover.module-BVuEALLH.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")
+    return;
+  const o = n.api.elements.reference;
+  if (!o)
+    return;
+  let t = o;
+  if (!t.matches(l)) {
+    const e = m(o);
+    t = 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();
+  }
+};
+export {
+  g as handlePopoverTabKey
+};

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

@@ -0,0 +1,8 @@
+import { getActiveElement as n } from "../../../helpers/dom/getActiveElement.js";
+const c = (t) => {
+  const e = n();
+  return t && e ? t.contains(e) : !1;
+};
+export {
+  c as hasFocus
+};

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

@@ -0,0 +1,12 @@
+const c = async (e, n = 1e3, o = 50) => {
+  const i = Date.now();
+  return new Promise((r, s) => {
+    const t = () => {
+      e() ? r() : Date.now() - i >= n ? s(new Error("Condition not met within timeout")) : setTimeout(t, o);
+    };
+    t();
+  });
+};
+export {
+  c as waitUntilTrue
+};

package/dist/components/Popover/hooks/usePopover.js

@@ -0,0 +1,6 @@
+import { useContext as o } from "react";
+import { PopoverContext as t } from "../PopoverProvider.js";
+const p = () => o(t);
+export {
+  p as usePopover
+};