@sesamehr/react-design-system 3.10.1 → 3.11.0

package/dist/Display/BrandLogo/BrandLogo.d.ts

@@ -15,7 +15,12 @@ export interface BrandLogoProps extends Omit<React.SVGAttributes<SVGSVGElement>,
      * dark-mode switch — see the note below.
      */
     color?: BrandLogoVariants['color'];
-    /** 32px tall, or 88px. The width follows the art. */
+    /**
+     * 20px tall, or 56px: the logo's own height, which is what the board's 32 and
+     * 88 frames hold once their padding comes off. The `viewBox` is cropped to
+     * the paths, so the element's edges are the art's edges and spacing around it
+     * is the caller's.
+     */
     size?: BrandLogoVariants['size'];
     dataTestid: string;
 }

package/dist/Display/BrandLogo/BrandLogo.module.css.js

@@ -1,9 +1,9 @@
 const o = {
-  "ox-brand-logo": "_ox-brand-logo_51b7b_2",
-  "ox-brand-logo--md": "_ox-brand-logo--md_51b7b_2",
-  "ox-brand-logo--lg": "_ox-brand-logo--lg_51b7b_2",
-  "ox-brand-logo--dark": "_ox-brand-logo--dark_51b7b_2",
-  "ox-brand-logo--light": "_ox-brand-logo--light_51b7b_2"
+  "ox-brand-logo": "_ox-brand-logo_1q2c2_2",
+  "ox-brand-logo--md": "_ox-brand-logo--md_1q2c2_2",
+  "ox-brand-logo--lg": "_ox-brand-logo--lg_1q2c2_2",
+  "ox-brand-logo--dark": "_ox-brand-logo--dark_1q2c2_2",
+  "ox-brand-logo--light": "_ox-brand-logo--light_1q2c2_2"
 };
 export {
   o as default

package/dist/Display/BrandLogo/brandLogoArt.d.ts

@@ -15,6 +15,23 @@
  * Composed from the vector groups Figma exports, each placed with the offset
  * the group has inside its variant frame. Regenerated rather than edited: the
  * numbers are measurements, and a hand-nudged logo is a wrong logo.
+ *
+ * **The viewBox is the ink, not the frame Figma exports.** Every variant frame
+ * on the board is padded — 8.74 x 5.82 around the lockup, 5.82 all round the
+ * mark — and a regeneration hands that frame over as the box. Baked in, it is
+ * padding nobody asked for: a 32px-tall element drew 20px of logo inside 12px
+ * of air, its edges sat nowhere near the art, and anything positioning the logo
+ * positioned the air instead. So the `viewBox` is cropped to the measured
+ * bounds of the paths, while the group offsets are left exactly as exported —
+ * which is why the box no longer starts at `0 0`. Spacing is the caller's to
+ * add; a logo flush to its own box is the only one a caller can place.
+ * The component's own test re-measures the curves and fails if the frame comes
+ * back.
+ *
+ * Note what cropping does *not* mean: the logo is not drawn any larger to fill
+ * the space the padding used to take. The stylesheet's two heights moved down
+ * with the box, from the board's frame heights to the heights of the drawing
+ * inside them — see the component.
  */
 export interface BrandLogoArt {
     viewBox: string;
@@ -23,7 +40,11 @@ export interface BrandLogoArt {
         paths: string[];
     }[];
 }
-/** Symbol plus the "sesame" wordmark: 113.6 x 32, which is 3.55:1. */
+/** Symbol plus the "sesame" wordmark: 96.12 x 20.39 of ink, which is 4.714:1. */
 export declare const BRAND_LOGO_FULL: BrandLogoArt;
-/** The symbol on its own, square. */
+/**
+ * The symbol on its own. Square to four decimals — the ink measures
+ * 20.3629 x 20.3636, and the box takes the taller of the two on both axes so
+ * that "the mark is square" stays literally true for a caller sizing it.
+ */
 export declare const BRAND_LOGO_MARK: BrandLogoArt;

package/dist/Display/BrandLogo/brandLogoArt.js

@@ -1,5 +1,5 @@
 const C = {
-  viewBox: "0 0 113.6 32",
+  viewBox: "8.738 5.8249 96.1233 20.3904",
   groups: [
     {
       transform: "translate(8.738 5.8249)",
@@ -26,7 +26,7 @@ const C = {
     }
   ]
 }, L = {
-  viewBox: "0 0 32 32",
+  viewBox: "5.8174 5.818 20.3636 20.3636",
   groups: [
     {
       transform: "translate(5.8174 5.818)",

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
+};