@iress-oss/ids-components 5.20.2 → 6.0.0-alpha.1

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

@@ -1,87 +1,91 @@
-import { jsx as o, jsxs as j } from "react/jsx-runtime";
-import { forwardRef as F } from "react";
-import { c as i } from "../../../index-cbHCAGLB.js";
-import { GlobalCSSClass as S } from "../../../enums.js";
+import { jsx as o, jsxs as w } from "react/jsx-runtime";
+import { forwardRef as y, useContext as E } from "react";
+import { GlobalCSSClass as t } from "../../../enums.js";
 import { propagateTestid as m } from "../../../helpers/utility/propagateTestid.js";
-import { s as r } from "../../../Popover.module-DsySRqqg.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";
-import { NestedPopoverActivator as G } from "../components/NestedPopoverActivator.js";
-import { usePopover as R } from "../hooks/usePopover.js";
-const k = ({
-  activator: p,
-  align: s = "auto",
-  autoHighlight: v = !0,
-  children: c,
-  className: n,
-  container: d,
-  contentClassName: l,
-  defaultShow: f,
-  disabledAutoToggle: e,
-  displayMode: a = "overlay",
-  focusStartIndex: u,
-  minLength: P,
-  onActivated: h,
-  onDeactivated: I,
-  onNavigate: x,
-  show: A,
-  type: N = "listbox",
-  width: y,
-  ...t
-}, C) => /* @__PURE__ */ o(
-  W,
-  {
-    align: s,
-    autoHighlight: v,
-    defaultShow: f,
-    disabledAutoToggle: e,
-    matchActivatorWidth: a === "overlay",
-    onActivated: h,
-    onDeactivated: I,
-    onNavigate: x,
-    ref: C,
-    type: N,
-    show: A,
-    focusStartIndex: u,
-    children: /* @__PURE__ */ j(
-      "div",
-      {
-        ...t,
-        className: i(
-          n,
-          S.FormElement,
-          r.popover,
-          r.hasInputActivator
-        ),
-        children: [
-          /* @__PURE__ */ o(G, { parentPopover: R(), children: /* @__PURE__ */ o(
-            w,
-            {
-              "data-testid": m(t["data-testid"], "activator"),
-              disabledAutoToggle: e,
-              minLength: P,
-              children: p
-            }
-          ) }),
-          /* @__PURE__ */ o(
-            b,
-            {
-              className: i(r.inputActivatorPortal, l),
-              container: d,
-              "data-testid": m(t["data-testid"], "content"),
-              displayMode: a,
-              style: E(y),
-              virtualFocus: !0,
-              children: c
-            }
-          )
-        ]
-      }
-    )
-  }
-), V = F(k);
+import { PopoverContent as G } from "../components/PopoverContent.js";
+import { InputPopoverActivator as H } from "./InputPopoverActivator.js";
+import { usePopoverImperativeHandle as R } from "../hooks/usePopoverImperativeHandle.js";
+import { s as S } from "../../../factory-oPXoMw9H.js";
+import { usePopover as T, PopoverContext as c } from "../hooks/usePopover.js";
+import { c as n } from "../../../cx-DN21T1EH.js";
+import { popover as W } from "../Popover.styles.js";
+import { NestedPopoverActivator as k } from "../components/NestedPopoverActivator.js";
+const q = ({
+  activator: v,
+  align: u = "auto",
+  autoHighlight: l = !0,
+  children: d,
+  className: f,
+  container: P,
+  contentClassName: h,
+  contentStyle: a,
+  defaultShow: x,
+  displayMode: s = "overlay",
+  focusStartIndex: I,
+  minLength: C,
+  onActivated: A,
+  onDeactivated: N,
+  onNavigate: F,
+  show: b,
+  type: j = "listbox",
+  ...r
+}, g) => {
+  const i = s === "overlay", e = W({ hasInputActivator: !0, matchActivatorWidth: i }), p = T({
+    align: u,
+    autoHighlight: l,
+    defaultShow: x,
+    focusStartIndex: I,
+    hasInputActivator: !0,
+    matchActivatorWidth: i,
+    onActivated: A,
+    onDeactivated: N,
+    onNavigate: F,
+    show: b,
+    type: j,
+    virtualFocus: !0
+  });
+  return R(g, p), /* @__PURE__ */ o(c.Provider, { value: p, children: /* @__PURE__ */ w(
+    S.div,
+    {
+      ...r,
+      className: n(
+        f,
+        t.FormElement,
+        e.root,
+        t.Popover,
+        t.InputPopover
+      ),
+      children: [
+        /* @__PURE__ */ o(k, { parentPopover: E(c), children: /* @__PURE__ */ o(
+          H,
+          {
+            className: e.activator,
+            "data-testid": m(r["data-testid"], "activator"),
+            minLength: C,
+            children: v
+          }
+        ) }),
+        /* @__PURE__ */ o(
+          G,
+          {
+            className: n(
+              h,
+              a?.className,
+              e.content,
+              t.PopoverContent
+            ),
+            container: P,
+            "data-testid": m(r["data-testid"], "content"),
+            displayMode: s,
+            virtualFocus: !0,
+            ...a,
+            children: d
+          }
+        )
+      ]
+    }
+  ) });
+}, Z = y(q);
 export {
-  V as IressInputPopover
+  Z as IressInputPopover
 };

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

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

package/dist/components/Popover/Popover.js

@@ -1,97 +1,89 @@
-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-cbHCAGLB.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-DsySRqqg.js";
-import { P as F } from "../../PopoverProvider-DZ92QV8I.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 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 { 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 = ({
+  activator: d,
+  align: l = "auto",
+  children: f,
+  className: P,
+  container: h,
+  contentClassName: x,
+  contentStyle: a,
+  defaultShow: u,
+  displayMode: m = "overlay",
+  fluid: C,
+  focusStartIndex: N,
+  matchActivatorWidth: A,
+  onActivated: j,
+  onDeactivated: I,
+  onNavigate: R,
+  type: W,
+  show: b,
+  virtualFocus: s,
+  ...t
+}, g) => {
+  const w = G(null), i = A && m === "overlay", r = z({ fluid: C, matchActivatorWidth: i }), p = B({
+    align: l,
+    defaultShow: u,
+    focusStartIndex: N,
+    matchActivatorWidth: i,
+    onActivated: j,
+    onDeactivated: I,
+    onNavigate: R,
+    show: b,
+    type: W,
+    virtualFocus: s
+  });
+  return q(g, p), /* @__PURE__ */ o(v.Provider, { value: p, children: /* @__PURE__ */ y(
+    k.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: n(
+        P,
+        e.FormElement,
+        r.root,
+        e.Popover
+      ),
+      ref: w,
+      children: [
+        /* @__PURE__ */ o(D, { parentPopover: H(v), children: /* @__PURE__ */ o(
+          S,
+          {
+            className: r.activator,
+            "data-testid": c(t["data-testid"], "activator"),
+            children: d
+          }
+        ) }),
+        /* @__PURE__ */ o(
+          T,
+          {
+            ...a,
+            className: n(
+              x,
+              a?.className,
+              e.PopoverContent,
+              r.content
+            ),
+            container: h,
+            "data-testid": c(t["data-testid"], "content"),
+            displayMode: m,
+            virtualFocus: s,
+            children: f
+          }
+        )
+      ]
     }
-  );
-}, m = I(B);
-m.Align = S;
-m.Type = R;
+  ) });
+}, M = E(F);
 export {
-  m as IressPopover
+  M as IressPopover
 };

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

@@ -0,0 +1,49 @@
+import { s as t } from "../../sva-OmxClA9g.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: {
+      false: {
+        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-DYBeYtOf.js";
-const f = ({
+import { w as e } from "../../../floating-ui.react-CmSaAiNF.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 l } from "react/jsx-runtime";
-import { s as c } from "../../../Popover.module-DsySRqqg.js";
-import { PopoverCssClass as d } from "../Popover.types.js";
-import { usePopover as p } from "../hooks/usePopover.js";
-import { useRef as m, useMemo as v, useEffect as g } from "react";
-import { focusableElements as A } from "../../../helpers/dom/focusableElements.js";
-import { safeClosest as u } from "../../../helpers/dom/domUtils.js";
-import { usePopoverActivatorInteractions as b } from "../hooks/usePopoverActivatorInteractions.js";
-import { c as T } from "../../../index-cbHCAGLB.js";
-const h = [
+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 = [
   "aria-controls",
   "aria-expanded",
   "aria-haspopup",
@@ -15,20 +11,20 @@ const h = [
   "id",
   "role",
   "tabindex"
-], x = (s, a) => {
-  const t = s.querySelector("[id]"), o = t?.getAttribute("id");
-  t?.removeAttribute("id"), h.forEach((r) => {
-    const i = s.getAttribute(r);
-    s.removeAttribute(r), i && a.setAttribute(r, i);
-  }), o && a.setAttribute("id", o);
-}, q = ({
-  children: s,
-  ...a
+], 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);
+  }), o && s.setAttribute("id", o);
+}, y = ({
+  children: i,
+  ...s
 }) => {
-  const t = p(), o = m(null), r = s?.props, i = b(
+  const t = l(A), o = d(null), r = i?.props, c = g(
     t,
     r
-  ), f = v(() => {
+  ), u = p(() => {
     if (t?.show)
       return [
         ...t.getAriaControls(),
@@ -36,7 +32,7 @@ const h = [
         t.api.context.floatingId
       ].join(" ").trim();
   }, [r, t]);
-  return g(() => {
+  return m(() => {
     !o.current || !t?.getVirtualFocus || t.activeIndex === null || (setTimeout(
       () => t?.api.refs.domReference.current?.removeAttribute(
         "aria-activedescendant"
@@ -45,38 +41,37 @@ const h = [
       "aria-activedescendant",
       t.list.current?.[t.activeIndex]?.id ?? ""
     ));
-  }, [t]), /* @__PURE__ */ l(
+  }, [t]), /* @__PURE__ */ f(
     "div",
     {
-      ...a,
-      className: T(c.activator, {
-        [d.Active]: t?.show
-      }),
+      ...s,
       ...t?.interactions.getReferenceProps({
-        ...i,
-        "aria-controls": f,
+        ...c,
+        "aria-controls": u,
         role: r.role,
         ref: (e) => {
           if (!e) return;
           t?.api.refs.setReference(e);
-          const n = e?.querySelector("[role=combobox]") ?? A(e)[0];
+          const n = e?.querySelector("[role=combobox]") ?? v(e)[0];
           n && (o.current = n, x(e, n));
         },
         onBlur: (e) => {
-          e.relatedTarget instanceof Element && u(e.relatedTarget, `.${c.content}`) && (e.preventDefault(), e.stopPropagation());
+          const n = t?.api.refs.floating.current, a = e.relatedTarget;
+          a instanceof Element && n?.contains(a) && (e.preventDefault(), e.stopPropagation());
         },
         onFocus: (e) => {
-          t?.disabledAutoToggle || e.relatedTarget instanceof Element && (e.relatedTarget.hasAttribute("data-floating-ui-focus-guard") || u(e.relatedTarget, `.${c.content}`)) && t.show && (setTimeout(() => {
+          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(() => {
             o.current?.focus();
           }), setTimeout(() => {
             t.setShowWithReason(!1, e.nativeEvent, "focus");
           }, 300));
         }
       }),
-      children: s
+      children: i
     }
   );
 };
 export {
-  q as PopoverActivator
+  y as PopoverActivator
 };