@sesamehr/react-design-system 3.10.2 → 3.11.0

package/dist/Forms/Inputs/Combobox/ComboboxContent.d.ts

@@ -3,5 +3,7 @@ export interface ComboboxContentProps extends Omit<React.ComponentPropsWithoutRe
     side?: 'top' | 'right' | 'bottom' | 'left';
     sideOffset?: number;
     align?: 'start' | 'center' | 'end';
+    /** Called when the end of the list comes into view. */
+    onReachEnd?: () => void;
 }
 export declare const ComboboxContent: import('react').ForwardRefExoticComponent<ComboboxContentProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Forms/Inputs/Combobox/ComboboxContent.js

@@ -1,78 +1,90 @@
-import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
 import * as c from "@radix-ui/react-popover";
-import { Command as h, CommandInput as v, CommandList as N } from "cmdk";
-import { forwardRef as P, useRef as L } from "react";
+import { Command as P, CommandInput as S, CommandList as L } from "cmdk";
+import { forwardRef as F, useRef as j, useState as A } from "react";
 /* empty css                    */
-import { useComboboxContext as F } from "./context.js";
-import { Surface as S } from "../../../internal/Surface/Surface.js";
-import { ListboxViewport as j } from "../../../internal/Listbox/ListboxViewport.js";
-import { Scrollbar as A } from "../../../Layout/Scrollbar/Scrollbar.js";
-const D = 16, I = P(
+import { useComboboxContext as D } from "./context.js";
+import { useReachEnd as I } from "./useReachEnd.js";
+import { Surface as O } from "../../../internal/Surface/Surface.js";
+import { ListboxViewport as R } from "../../../internal/Listbox/ListboxViewport.js";
+import { Scrollbar as k } from "../../../Layout/Scrollbar/Scrollbar.js";
+const w = 16, G = F(
   ({
-    children: n,
+    children: d,
     side: b = "bottom",
-    sideOffset: d = 4,
-    align: p = "start",
-    onInteractOutside: m,
-    onEscapeKeyDown: i,
-    ...x
-  }, f) => {
-    const { search: e, cancelOpenEdit: u, skipFilter: C } = F(), l = L(null);
-    return /* @__PURE__ */ r(c.Portal, { children: /* @__PURE__ */ r(
+    sideOffset: p = 4,
+    align: x = "start",
+    onInteractOutside: e,
+    onEscapeKeyDown: m,
+    onReachEnd: a,
+    ...f
+  }, u) => {
+    const { search: s, cancelOpenEdit: h, skipFilter: C } = D(), i = j(null), [v, N] = A(null);
+    return I(i, v, a), /* @__PURE__ */ r(c.Portal, { children: /* @__PURE__ */ r(
       c.Content,
       {
-        ref: f,
+        ref: u,
         asChild: !0,
         "data-slot": "combobox-content",
         side: b,
-        sideOffset: d,
-        collisionPadding: D,
-        align: p,
+        sideOffset: p,
+        collisionPadding: w,
+        align: x,
         onOpenAutoFocus: (o) => o.preventDefault(),
         onInteractOutside: (o) => {
-          var a;
+          var n;
           const t = o.target;
-          (a = t == null ? void 0 : t.closest) != null && a.call(t, '[data-slot="combobox"]') && o.preventDefault(), m == null || m(o);
+          (n = t == null ? void 0 : t.closest) != null && n.call(t, '[data-slot="combobox"]') && o.preventDefault(), e == null || e(o);
         },
         onEscapeKeyDown: (o) => {
-          u() && o.preventDefault(), i == null || i(o);
+          h() && o.preventDefault(), m == null || m(o);
         },
-        ...x,
-        children: /* @__PURE__ */ s(S, { children: [
-          /* @__PURE__ */ s(
-            h,
+        ...f,
+        children: /* @__PURE__ */ l(O, { children: [
+          /* @__PURE__ */ l(
+            P,
             {
               shouldFilter: !C,
-              value: e,
+              value: s,
               className: "ox-combobox-command",
               children: [
                 /* @__PURE__ */ r(
-                  v,
+                  S,
                   {
-                    value: e,
+                    value: s,
                     "aria-hidden": !0,
                     tabIndex: -1,
                     className: "ox-combobox-hidden-input"
                   }
                 ),
-                /* @__PURE__ */ r(N, { asChild: !0, children: /* @__PURE__ */ r(
-                  j,
+                /* @__PURE__ */ r(L, { asChild: !0, children: /* @__PURE__ */ l(
+                  R,
                   {
-                    ref: l,
+                    ref: i,
                     className: "ox-combobox-viewport",
-                    children: n
+                    children: [
+                      d,
+                      a && /* @__PURE__ */ r(
+                        "div",
+                        {
+                          ref: N,
+                          className: "ox-combobox-reach-end",
+                          "aria-hidden": !0
+                        }
+                      )
+                    ]
                   }
                 ) })
               ]
             }
           ),
-          /* @__PURE__ */ r(A, { port: l, dataTestid: "combobox-scrollbar" })
+          /* @__PURE__ */ r(k, { port: i, dataTestid: "combobox-scrollbar" })
         ] })
       }
     ) });
   }
 );
-I.displayName = "OxComboboxContent";
+G.displayName = "OxComboboxContent";
 export {
-  I as ComboboxContent
+  G as ComboboxContent
 };

package/dist/Forms/Inputs/Combobox/useReachEnd.d.ts

@@ -0,0 +1,22 @@
+import { RefObject } from 'react';
+/**
+ * Reports that the end of a scrolling list has come into view, once per
+ * arrival.
+ *
+ * An `IntersectionObserver` and not a scroll listener because of the re-arm: a
+ * listener has to be disarmed after firing or it fires on every frame the user
+ * sits at the bottom, and then something has to decide when to arm it again.
+ * The observer re-fires on the transition for free.
+ *
+ * The sentinel arrives as an element and the port as a ref, which is the one
+ * place this diverges from the Vue composable. It has to: the list mounts when
+ * it opens, long after this hook first runs, and a ref filling in is not a
+ * render — so a hook waiting on `sentinel.current` waits for ever. A callback
+ * ref behind state is what turns the element arriving into something the effect
+ * can hang off. By the time it has, `port.current` is set too: both land in the
+ * same commit.
+ *
+ * @param port The scrolling element, which is also the observer's root.
+ * @param sentinel An empty element at the end of the list, inside `port`.
+ */
+export declare function useReachEnd(port: RefObject<HTMLElement | null>, sentinel: HTMLElement | null, reached: (() => void) | undefined): void;

package/dist/Forms/Inputs/Combobox/useReachEnd.js

@@ -0,0 +1,33 @@
+import { useRef as i, useEffect as p } from "react";
+const I = 88;
+function O(s, u, r) {
+  const o = i(r);
+  p(() => {
+    o.current = r;
+  }, [r]);
+  const f = r !== void 0;
+  p(() => {
+    const n = s.current, c = u;
+    if (!f || !n || !c) return;
+    let d = n.scrollHeight, e = null;
+    const x = () => {
+      e == null || e.disconnect(), e == null || e.observe(c);
+    };
+    typeof IntersectionObserver < "u" && (e = new IntersectionObserver(
+      (b) => {
+        var l;
+        b.some((g) => g.isIntersecting) && ((l = o.current) == null || l.call(o));
+      },
+      { root: n, rootMargin: `0px 0px ${I}px 0px` }
+    ), e.observe(c));
+    const t = typeof MutationObserver > "u" ? null : new MutationObserver(() => {
+      n.scrollHeight <= d || (d = n.scrollHeight, x());
+    });
+    return t == null || t.observe(n, { childList: !0, subtree: !0 }), () => {
+      e == null || e.disconnect(), t == null || t.disconnect();
+    };
+  }, [s, u, f]);
+}
+export {
+  O as useReachEnd
+};