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

package/dist/components/Placeholder/Placeholder.types.js

@@ -0,0 +1 @@
+

package/dist/components/Placeholder/index.js

@@ -0,0 +1,4 @@
+import { IressPlaceholder as o } from "./Placeholder.js";
+export {
+  o as IressPlaceholder
+};

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

@@ -0,0 +1,85 @@
+import { jsx as o, jsxs as j } from "react/jsx-runtime";
+import { forwardRef as F } from "react";
+import { c as i } from "../../../index-Cu0xwYjD.js";
+import { GlobalCSSClass as S } from "../../../enums.js";
+import { propagateTestid as m } from "../../../helpers/utility/propagateTestid.js";
+import { s as r } from "../../../Popover.module-COHnD5HM.js";
+import { InputPopoverProvider as W } from "./InputPopoverProvider.js";
+import { PopoverContent as b } from "../components/PopoverContent.js";
+import { InputPopoverActivator as w } from "./InputPopoverActivator.js";
+import { composePopoverWidth as E } from "../helpers/composePopoverWidth.js";
+const G = ({
+  activator: p,
+  align: s = "auto",
+  autoHighlight: c = !0,
+  children: v,
+  className: n,
+  container: l,
+  contentClassName: d,
+  defaultShow: f,
+  disabledAutoToggle: a,
+  displayMode: e = "overlay",
+  focusStartIndex: u,
+  minLength: h,
+  onActivated: I,
+  onDeactivated: P,
+  onNavigate: x,
+  show: y,
+  type: A = "listbox",
+  width: C,
+  ...t
+}, N) => /* @__PURE__ */ o(
+  W,
+  {
+    align: s,
+    autoHighlight: c,
+    defaultShow: f,
+    disabledAutoToggle: a,
+    matchActivatorWidth: e === "overlay",
+    onActivated: I,
+    onDeactivated: P,
+    onNavigate: x,
+    ref: N,
+    type: A,
+    show: y,
+    focusStartIndex: u,
+    children: /* @__PURE__ */ j(
+      "div",
+      {
+        ...t,
+        className: i(
+          n,
+          S.FormElement,
+          r.popover,
+          r.hasInputActivator
+        ),
+        children: [
+          /* @__PURE__ */ o(
+            w,
+            {
+              "data-testid": m(t["data-testid"], "activator"),
+              disabledAutoToggle: a,
+              minLength: h,
+              children: p
+            }
+          ),
+          /* @__PURE__ */ o(
+            b,
+            {
+              className: i(r.inputActivatorPortal, d),
+              container: l,
+              "data-testid": m(t["data-testid"], "content"),
+              displayMode: e,
+              style: E(C),
+              virtualFocus: !0,
+              children: v
+            }
+          )
+        ]
+      }
+    )
+  }
+), O = F(G);
+export {
+  O as IressInputPopover
+};

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

@@ -0,0 +1 @@
+

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

package/dist/components/Popover/Popover.js

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

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-COHnD5HM.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-Cu0xwYjD.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-Cu0xwYjD.js";
+import { s as m } from "../../../Popover.module-COHnD5HM.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-D_ysmiM3.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,33 @@
+import { getActiveElement as g } from "../../../helpers/dom/getActiveElement.js";
+import { handlePopoverTabKey as r } from "./handlePopoverTabKey.js";
+const x = (t, n, l) => {
+  var s;
+  const e = t != null && t.hasInnerRole() || t == null ? void 0 : t.type, u = e && ["listbox", "menu", "tree"].includes(e), d = e && ["application", "combobox", "composite", "group"].includes(e), m = n === "inline", y = () => {
+    setTimeout(() => {
+      var a, c;
+      g() === t.api.elements.floating && !t.getVirtualFocus && ((c = (a = t.list.current) == null ? void 0 : a[0]) == null || c.focus());
+    });
+  }, b = (a) => {
+    f(t, a), t.disabledAutoToggle || A(t, a);
+  }, i = t.interactions.getFloatingProps({
+    onFocus: y,
+    onKeyDown: b
+  });
+  return {
+    ...i,
+    "aria-activedescendant": d ? i == null ? void 0 : i["aria-activedescendant"] : void 0,
+    "aria-orientation": u ? i == null ? void 0 : i["aria-orientation"] : void 0,
+    role: e,
+    style: {
+      ...l,
+      ...m ? {} : (s = t == null ? void 0 : t.api) == null ? void 0 : s.floatingStyles
+    }
+  };
+}, f = (t, n) => {
+  !t.type || !["menu", "listbox"].includes(t.type) || n.key !== "Tab" || r(t, n);
+}, A = (t, n) => {
+  t.type !== "listbox" || n.key !== "ArrowUp" || t.activeIndex !== 0 || t.setShowWithReason(!1, n.nativeEvent, "list-navigation");
+};
+export {
+  x 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
+};