@crisp-ui-kit/crisp 0.19.1 → 0.20.0

package/dist/cjs/components/menu/menu.js

@@ -41,6 +41,7 @@ exports.MenuLabel = MenuLabel;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
+const core_1 = require("../../core");
 const menu_recipe_1 = require("./menu.recipe");
 const menu_keyboard_1 = require("./menu-keyboard");
 const MenuContext = React.createContext(null);
@@ -71,15 +72,13 @@ function Menu({ trigger, children, align = "start", open: openProp, defaultOpen,
         const rect = triggerRef.current?.getBoundingClientRect();
         if (!rect)
             return;
-        const gap = 4;
-        const flipUp = window.innerHeight - rect.bottom < 280;
-        const style = flipUp
-            ? { bottom: window.innerHeight - rect.top + gap }
-            : { top: rect.bottom + gap };
-        if (align === "end")
-            style.right = window.innerWidth - rect.right;
-        else
-            style.left = rect.left;
+        const { style, up: flipUp } = (0, core_1.placeFloating)({
+            rect,
+            align,
+            gap: 4,
+            flipBelow: 280,
+            anchor: triggerRef.current,
+        });
         setUp(flipUp);
         setPos(style);
     };

package/dist/cjs/components/multiselect/multiselect.js

@@ -37,6 +37,7 @@ exports.MultiSelect = MultiSelect;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
+const core_1 = require("../../core");
 const select_1 = require("../select");
 const multiselect_recipe_1 = require("./multiselect.recipe");
 const TONES = [
@@ -92,15 +93,17 @@ function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, p
             return;
         const rect = triggerRef.current?.getBoundingClientRect();
         if (rect) {
-            const flipUp = window.innerHeight - rect.bottom < 300;
-            setUp(flipUp);
-            setPos({
-                left: rect.left,
-                minWidth: rect.width,
-                ...(flipUp
-                    ? { bottom: window.innerHeight - rect.top + 4 }
-                    : { top: rect.bottom + 4 }),
+            // the popup can grow past the trigger (minWidth, not width), so which
+            // edge it is pinned to decides which way it grows — start, in whichever
+            // direction that is (#210)
+            const { style, up: flipUp } = (0, core_1.placeFloating)({
+                rect,
+                gap: 4,
+                flipBelow: 300,
+                anchor: triggerRef.current,
             });
+            setUp(flipUp);
+            setPos({ ...style, minWidth: rect.width });
         }
         setQuery("");
         setHighlight(0);

package/dist/cjs/components/popover/popover.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Popover = Popover;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
+const core_1 = require("../../core");
 const popover_recipe_1 = require("./popover.recipe");
 /**
  * A generic anchored popover — the Menu/Select surface holding arbitrary
@@ -58,16 +59,13 @@ function Popover({ trigger, children, align = "start", open: openProp, defaultOp
         const el = triggerRef.current;
         if (!el)
             return;
-        const rect = el.getBoundingClientRect();
-        const gap = 6;
-        const flipUp = window.innerHeight - rect.bottom < 280;
-        const style = flipUp
-            ? { bottom: window.innerHeight - rect.top + gap }
-            : { top: rect.bottom + gap };
-        if (align === "end")
-            style.right = window.innerWidth - rect.right;
-        else
-            style.left = rect.left;
+        const { style, up: flipUp } = (0, core_1.placeFloating)({
+            rect: el.getBoundingClientRect(),
+            align,
+            gap: 6,
+            flipBelow: 280,
+            anchor: el,
+        });
         setUp(flipUp);
         setPos(style);
     };

package/dist/cjs/components/select/select.js

@@ -37,6 +37,7 @@ exports.Select = Select;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
+const core_1 = require("../../core");
 const listbox_keyboard_1 = require("./listbox-keyboard");
 const select_recipe_1 = require("./select.recipe");
 function optionText(o) {
@@ -87,15 +88,17 @@ function Select({ options, value, defaultValue, onValueChange, placeholder = "Se
             return;
         const rect = triggerRef.current?.getBoundingClientRect();
         if (rect) {
-            const flipUp = window.innerHeight - rect.bottom < 260;
-            setUp(flipUp);
-            setPos({
-                left: rect.left,
-                minWidth: rect.width,
-                ...(flipUp
-                    ? { bottom: window.innerHeight - rect.top + 4 }
-                    : { top: rect.bottom + 4 }),
+            // the popup can grow past the trigger (minWidth, not width), so which
+            // edge it is pinned to decides which way it grows — start, in whichever
+            // direction that is (#210)
+            const { style, up: flipUp } = (0, core_1.placeFloating)({
+                rect,
+                gap: 4,
+                flipBelow: 260,
+                anchor: triggerRef.current,
             });
+            setUp(flipUp);
+            setPos({ ...style, minWidth: rect.width });
         }
         setQuery("");
         const sel = options.findIndex((o) => o.value === selected);

package/dist/cjs/core/index.js

@@ -14,11 +14,13 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePrefersReducedMotion = exports.resolveRecipe = exports.Primitive = exports.defineRecipe = exports.cx = void 0;
+exports.usePrefersReducedMotion = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.defineRecipe = exports.cx = void 0;
 var cx_1 = require("./cx");
 Object.defineProperty(exports, "cx", { enumerable: true, get: function () { return cx_1.cx; } });
 var define_1 = require("./define");
 Object.defineProperty(exports, "defineRecipe", { enumerable: true, get: function () { return define_1.defineRecipe; } });
+var place_floating_1 = require("./place-floating");
+Object.defineProperty(exports, "placeFloating", { enumerable: true, get: function () { return place_floating_1.placeFloating; } });
 var primitive_1 = require("./primitive");
 Object.defineProperty(exports, "Primitive", { enumerable: true, get: function () { return primitive_1.Primitive; } });
 var resolve_1 = require("./resolve");

package/dist/cjs/core/place-floating.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.placeFloating = placeFloating;
+/**
+ * Where a floating layer goes, in logical terms.
+ *
+ * `start` and `end` are inline edges, not left and right. `Menu` and `Popover`
+ * both took an `align` prop named that way and then wrote
+ * `align === "end" ? right : left` with no direction anywhere, so in an RTL
+ * document both were backwards and a layer near the viewport edge overflowed on
+ * the wrong side (#210).
+ *
+ * The direction is read from the anchor's computed style rather than from a
+ * prop, so an inherited `dir` on any ancestor is honoured without every call
+ * site having to thread it down.
+ *
+ * Physical `left`/`right` are deliberate in the OUTPUT: this positions a
+ * `position: fixed` layer against viewport coordinates, which are physical in
+ * both directions. What must be direction-aware is the CHOICE of edge, and
+ * that happens here, once. Converting the output to `inset-inline-start` would
+ * be the half-conversion #146 exists to prevent — the rect it is measured
+ * against would still be physical.
+ */
+/**
+ * The nearest declared direction. The `dir` attribute is checked first because
+ * it is how a document says this in practice and it is readable without a
+ * layout, then computed style for a direction set purely in CSS.
+ */
+function isRtl(anchor) {
+    if (!anchor || typeof window === "undefined")
+        return false;
+    const declared = anchor.closest("[dir]")?.getAttribute("dir");
+    if (declared)
+        return declared.toLowerCase() === "rtl";
+    try {
+        return window.getComputedStyle(anchor).direction === "rtl";
+    }
+    catch {
+        return false;
+    }
+}
+function placeFloating({ rect, align = "start", gap, flipBelow, anchor, }) {
+    const rtl = isRtl(anchor);
+    const up = window.innerHeight - rect.bottom < flipBelow;
+    const style = up
+        ? { bottom: window.innerHeight - rect.top + gap }
+        : { top: rect.bottom + gap };
+    // start is the left edge in LTR and the right edge in RTL; end is the other
+    const toRight = align === "end" ? !rtl : rtl;
+    if (toRight)
+        style.right = window.innerWidth - rect.right;
+    else
+        style.left = rect.left;
+    return { style, up };
+}

package/dist/esm/components/menu/menu.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check } from "lucide-react";
 import * as React from "react";
+import { placeFloating } from "../../core/index.js";
 import { menuRecipe } from "./menu.recipe.js";
 import { useMenuKeyboard } from "./menu-keyboard.js";
 const MenuContext = React.createContext(null);
@@ -31,15 +32,13 @@ export function Menu({ trigger, children, align = "start", open: openProp, defau
         const rect = triggerRef.current?.getBoundingClientRect();
         if (!rect)
             return;
-        const gap = 4;
-        const flipUp = window.innerHeight - rect.bottom < 280;
-        const style = flipUp
-            ? { bottom: window.innerHeight - rect.top + gap }
-            : { top: rect.bottom + gap };
-        if (align === "end")
-            style.right = window.innerWidth - rect.right;
-        else
-            style.left = rect.left;
+        const { style, up: flipUp } = placeFloating({
+            rect,
+            align,
+            gap: 4,
+            flipBelow: 280,
+            anchor: triggerRef.current,
+        });
         setUp(flipUp);
         setPos(style);
     };

package/dist/esm/components/multiselect/multiselect.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, Search } from "lucide-react";
 import * as React from "react";
+import { placeFloating } from "../../core/index.js";
 import { useListboxKeyboard } from "../select/index.js";
 import { multiselectRecipe } from "./multiselect.recipe.js";
 const TONES = [
@@ -56,15 +57,17 @@ export function MultiSelect({ options, value: valueProp, defaultValue, onValueCh
             return;
         const rect = triggerRef.current?.getBoundingClientRect();
         if (rect) {
-            const flipUp = window.innerHeight - rect.bottom < 300;
-            setUp(flipUp);
-            setPos({
-                left: rect.left,
-                minWidth: rect.width,
-                ...(flipUp
-                    ? { bottom: window.innerHeight - rect.top + 4 }
-                    : { top: rect.bottom + 4 }),
+            // the popup can grow past the trigger (minWidth, not width), so which
+            // edge it is pinned to decides which way it grows — start, in whichever
+            // direction that is (#210)
+            const { style, up: flipUp } = placeFloating({
+                rect,
+                gap: 4,
+                flipBelow: 300,
+                anchor: triggerRef.current,
             });
+            setUp(flipUp);
+            setPos({ ...style, minWidth: rect.width });
         }
         setQuery("");
         setHighlight(0);

package/dist/esm/components/popover/popover.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { placeFloating } from "../../core/index.js";
 import { popoverRecipe } from "./popover.recipe.js";
 /**
  * A generic anchored popover — the Menu/Select surface holding arbitrary
@@ -22,16 +23,13 @@ export function Popover({ trigger, children, align = "start", open: openProp, de
         const el = triggerRef.current;
         if (!el)
             return;
-        const rect = el.getBoundingClientRect();
-        const gap = 6;
-        const flipUp = window.innerHeight - rect.bottom < 280;
-        const style = flipUp
-            ? { bottom: window.innerHeight - rect.top + gap }
-            : { top: rect.bottom + gap };
-        if (align === "end")
-            style.right = window.innerWidth - rect.right;
-        else
-            style.left = rect.left;
+        const { style, up: flipUp } = placeFloating({
+            rect: el.getBoundingClientRect(),
+            align,
+            gap: 6,
+            flipBelow: 280,
+            anchor: el,
+        });
         setUp(flipUp);
         setPos(style);
     };

package/dist/esm/components/select/select.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, Search } from "lucide-react";
 import * as React from "react";
+import { placeFloating } from "../../core/index.js";
 import { useListboxKeyboard } from "./listbox-keyboard.js";
 import { selectRecipe } from "./select.recipe.js";
 function optionText(o) {
@@ -51,15 +52,17 @@ export function Select({ options, value, defaultValue, onValueChange, placeholde
             return;
         const rect = triggerRef.current?.getBoundingClientRect();
         if (rect) {
-            const flipUp = window.innerHeight - rect.bottom < 260;
-            setUp(flipUp);
-            setPos({
-                left: rect.left,
-                minWidth: rect.width,
-                ...(flipUp
-                    ? { bottom: window.innerHeight - rect.top + 4 }
-                    : { top: rect.bottom + 4 }),
+            // the popup can grow past the trigger (minWidth, not width), so which
+            // edge it is pinned to decides which way it grows — start, in whichever
+            // direction that is (#210)
+            const { style, up: flipUp } = placeFloating({
+                rect,
+                gap: 4,
+                flipBelow: 260,
+                anchor: triggerRef.current,
             });
+            setUp(flipUp);
+            setPos({ ...style, minWidth: rect.width });
         }
         setQuery("");
         const sel = options.findIndex((o) => o.value === selected);

package/dist/esm/core/index.js

@@ -1,5 +1,6 @@
 export { cx } from "./cx.js";
 export { defineRecipe } from "./define.js";
+export { placeFloating, } from "./place-floating.js";
 export { Primitive } from "./primitive.js";
 export { resolveRecipe } from "./resolve.js";
 export * from "./rtl.js";

package/dist/esm/core/place-floating.js

@@ -0,0 +1,52 @@
+/**
+ * Where a floating layer goes, in logical terms.
+ *
+ * `start` and `end` are inline edges, not left and right. `Menu` and `Popover`
+ * both took an `align` prop named that way and then wrote
+ * `align === "end" ? right : left` with no direction anywhere, so in an RTL
+ * document both were backwards and a layer near the viewport edge overflowed on
+ * the wrong side (#210).
+ *
+ * The direction is read from the anchor's computed style rather than from a
+ * prop, so an inherited `dir` on any ancestor is honoured without every call
+ * site having to thread it down.
+ *
+ * Physical `left`/`right` are deliberate in the OUTPUT: this positions a
+ * `position: fixed` layer against viewport coordinates, which are physical in
+ * both directions. What must be direction-aware is the CHOICE of edge, and
+ * that happens here, once. Converting the output to `inset-inline-start` would
+ * be the half-conversion #146 exists to prevent — the rect it is measured
+ * against would still be physical.
+ */
+/**
+ * The nearest declared direction. The `dir` attribute is checked first because
+ * it is how a document says this in practice and it is readable without a
+ * layout, then computed style for a direction set purely in CSS.
+ */
+function isRtl(anchor) {
+    if (!anchor || typeof window === "undefined")
+        return false;
+    const declared = anchor.closest("[dir]")?.getAttribute("dir");
+    if (declared)
+        return declared.toLowerCase() === "rtl";
+    try {
+        return window.getComputedStyle(anchor).direction === "rtl";
+    }
+    catch {
+        return false;
+    }
+}
+export function placeFloating({ rect, align = "start", gap, flipBelow, anchor, }) {
+    const rtl = isRtl(anchor);
+    const up = window.innerHeight - rect.bottom < flipBelow;
+    const style = up
+        ? { bottom: window.innerHeight - rect.top + gap }
+        : { top: rect.bottom + gap };
+    // start is the left edge in LTR and the right edge in RTL; end is the other
+    const toRight = align === "end" ? !rtl : rtl;
+    if (toRight)
+        style.right = window.innerWidth - rect.right;
+    else
+        style.left = rect.left;
+    return { style, up };
+}

package/dist/types/components/menu/menu.d.ts

@@ -3,7 +3,8 @@ export type MenuProps = {
     /** The element that opens the menu (an icon button, etc.). */
     trigger: React.ReactElement;
     children: React.ReactNode;
-    /** Align the menu to the start (left) or end (right) of the trigger. */
+    /** Align the menu to the trigger's inline `start` or `end` edge — the left
+     *  edge in an LTR document, the right one in RTL. */
     align?: "start" | "end";
     /** Controlled open state. Omit to let Menu manage it (see defaultOpen). */
     open?: boolean;

package/dist/types/components/popover/popover.d.ts

@@ -4,7 +4,8 @@ export type PopoverProps = {
     trigger: React.ReactElement;
     /** Popover body. */
     children: React.ReactNode;
-    /** Align the popover to the trigger's left (`start`) or right (`end`) edge. */
+    /** Align the popover to the trigger's inline `start` or `end` edge — the
+     *  left edge in an LTR document, the right one in RTL. */
     align?: "start" | "end";
     /** Controlled open state. Omit to let the popover manage it. */
     /** Controlled open state. Omit to let Popover manage it (see defaultOpen). */

package/dist/types/core/index.d.ts

@@ -1,5 +1,6 @@
 export { cx } from "./cx";
 export { defineRecipe } from "./define";
+export { type FloatingAlign, type PlaceFloatingOptions, placeFloating, } from "./place-floating";
 export { Primitive } from "./primitive";
 export { resolveRecipe } from "./resolve";
 export * from "./rtl";

package/dist/types/core/place-floating.d.ts

@@ -0,0 +1,20 @@
+import type * as React from "react";
+export type FloatingAlign = "start" | "end";
+export type PlaceFloatingOptions = {
+    /** The trigger's box, from `getBoundingClientRect()`. */
+    rect: DOMRect;
+    /** Which of the trigger's INLINE edges the layer lines up with. */
+    align?: FloatingAlign;
+    /** Distance between the trigger and the layer. */
+    gap: number;
+    /** Flip above the trigger when there is less room below than this. */
+    flipBelow: number;
+    /** The element the layer belongs to; its computed direction decides sides. */
+    anchor?: Element | null;
+};
+export type PlacedFloating = {
+    style: React.CSSProperties;
+    /** True when the layer was flipped above the trigger. */
+    up: boolean;
+};
+export declare function placeFloating({ rect, align, gap, flipBelow, anchor, }: PlaceFloatingOptions): PlacedFloating;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.19.1",
+  "version": "0.20.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",