@admin-layout/tailwind-ui 12.2.5-alpha.2 → 12.2.5-alpha.5

package/lib/components/InputToolBar/InputToolBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputToolBar.d.ts","sourceRoot":"","sources":["../../../src/components/InputToolBar/InputToolBar.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAER,iBAAiB,EAQpB,MAAM,SAAS,CAAC;AAqhBjB;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EACzB,SAAS,EACT,UAAU,EACV,WAAW,EACX,UAAU,EACV,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,cAAc,EAC1B,cAAc,EACd,mBAAmB,EACnB,mBAAmB,EACnB,wBAAwB,EACxB,2BAA2B,EAC3B,0BAA0B,EAC1B,gBAAgB,EAChB,iBAAiB,EACjB,aAAa,EACb,QAAQ,EACR,gBAAgB,GACnB,EAAE,iBAAiB,2CAwFnB;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"InputToolBar.d.ts","sourceRoot":"","sources":["../../../src/components/InputToolBar/InputToolBar.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAER,iBAAiB,EAQpB,MAAM,SAAS,CAAC;AA4jBjB;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EACzB,SAAS,EACT,UAAU,EACV,WAAW,EACX,UAAU,EACV,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,cAAc,EAC1B,cAAc,EACd,mBAAmB,EACnB,mBAAmB,EACnB,wBAAwB,EACxB,2BAA2B,EAC3B,0BAA0B,EAC1B,gBAAgB,EAChB,iBAAiB,EACjB,aAAa,EACb,QAAQ,EACR,gBAAgB,GACnB,EAAE,iBAAiB,2CAwFnB;AAED,eAAe,YAAY,CAAC"}

package/lib/components/InputToolBar/InputToolBar.js

@@ -1,4 +1,4 @@
-import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {Lightbulb,Zap,Search,Mic,Paperclip,Image,Camera,WandSparkles,Settings,X,Layout,Check,Plus,ArrowUpRight,StopCircle}from'lucide-react';import React__default,{useState,useMemo}from'react';import'../../utils/isBrowser/index.js';import {cn}from'../../utils/util.js';import'fast-deep-equal/react.js';const iconSize = 'h-3.5 w-3.5';
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {Lightbulb,Zap,Search,Mic,Paperclip,Image,Camera,WandSparkles,Settings,X,Layout,Check,Plus,ArrowUpRight,StopCircle}from'lucide-react';import React__default,{useState,useMemo,useRef,useEffect,useLayoutEffect}from'react';import'../../utils/isBrowser/index.js';import {cn}from'../../utils/util.js';import'fast-deep-equal/react.js';const iconSize = 'h-3.5 w-3.5';
 const iconSizeRight = 'h-4 w-4';
 const defaultLeftIconMap = {
   search: jsx(Search, {
@@ -237,13 +237,37 @@ function TemplatePill({
   });
 }
 const getRightIcon = id => defaultRightIconMap[id] ?? null;
-/** Below `lg`, the right action cluster collapses into this "+" button → popover. Send/mic stays inline. */
+// Layout effects warn during SSR on React 18; the menu is closed on the server anyway.
+const useClientLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+/** Gap between the "+" button and its menu (Tailwind `mb-2` / `mt-2`). */
+const MENU_GAP_PX = 8;
+/**
+ * Below `lg`, the right action cluster collapses into this "+" button → popover. Send/mic stays inline.
+ *
+ * The menu opens upward, over the conversation, since the composer normally docks at the bottom.
+ * When the composer sits near the top of the screen instead (e.g. a template gallery below it),
+ * there is no room above, so it flips below the button. Placement is measured before paint.
+ */
 function RightOverflowMenu({
   items,
   classNames
 }) {
   const [open, setOpen] = useState(false);
+  const [placement, setPlacement] = useState('above');
+  const rootRef = useRef(null);
+  const menuRef = useRef(null);
+  useClientLayoutEffect(() => {
+    if (!open) return;
+    const trigger = rootRef.current?.getBoundingClientRect();
+    const menuHeight = menuRef.current?.offsetHeight;
+    if (!trigger || !menuHeight) return;
+    const spaceAbove = trigger.top;
+    const spaceBelow = window.innerHeight - trigger.bottom;
+    const fitsAbove = spaceAbove >= menuHeight + MENU_GAP_PX;
+    setPlacement(fitsAbove || spaceAbove >= spaceBelow ? 'above' : 'below');
+  }, [open]);
   return jsxs("div", {
+    ref: rootRef,
     className: "relative",
     children: [jsx("button", {
       type: "button",
@@ -263,15 +287,24 @@ function RightOverflowMenu({
         className: "fixed inset-0 z-40 cursor-default",
         onClick: () => setOpen(false)
       }), jsx("div", {
+        ref: menuRef,
         role: "menu",
-        className: "absolute bottom-full right-0 z-50 mb-2 flex w-56 flex-col gap-0.5 rounded-2xl border border-border bg-card p-1.5 text-foreground shadow-lg",
+        className: cn('absolute right-0 z-50 flex w-56 flex-col gap-0.5 rounded-2xl border border-border bg-card p-1.5 text-foreground shadow-lg', placement === 'above' ? 'bottom-full mb-2' : 'top-full mt-2'),
         children: items.map(item => jsxs("div", {
           role: "menuitem",
-          // ponytail: row click forwards to the inner button so the whole row is a hit
-          // target — without nesting <button> in <button> (customButton items render their own).
           onClick: e => {
-            if (e.target.closest('button')) return;
-            e.currentTarget.querySelector('button')?.click();
+            // React bubbles events out of a portal along the COMPONENT tree, so a
+            // click inside a dialog or sheet that a customButton portaled out still
+            // arrives here. It is not a click on this row: ignore it.
+            if (!e.currentTarget.contains(e.target)) return;
+            // ponytail: row click forwards to the inner button so the whole row is a hit
+            // target — without nesting <button> in <button> (customButton items render their own).
+            if (!e.target.closest('button')) {
+              e.currentTarget.querySelector('button')?.click();
+            }
+            // A plain action is done once picked. A customButton owns whatever it opens
+            // (a dialog, a sheet); closing the menu would unmount it, so it stays.
+            if (!item.customButton && !item.disabled && !item.loading) setOpen(false);
           },
           className: "flex cursor-pointer items-center gap-2.5 rounded-xl px-1.5 py-1 hover:bg-secondary/60",
           children: [jsx(ToolbarIconButton, {

package/lib/components/InputToolBar/InputToolBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputToolBar.js","sources":["../../../src/components/InputToolBar/InputToolBar.tsx"],"sourcesContent":[null],"names":[],"mappings":"gWAqjBG,MAAA,QAAA,GAAA,aAAA;AACH,MAAA,aAAA,GAAA;AA4GA,MAAA,qBAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"InputToolBar.js","sources":["../../../src/components/InputToolBar/InputToolBar.tsx"],"sourcesContent":[null],"names":[],"mappings":"iYA4lBG,MAAA,QAAA,GAAA,aAAA;AACH,MAAA,aAAA,GAAA;AA4GA,MAAA,qBAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/InputToolBar/__tests__/RightOverflowMenu.test.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The "+" overflow menu that holds the right-hand actions below `lg`. It opens above the button
+ * unless there is no room there (a composer near the top of the screen), closes once a plain
+ * action is picked, keeps custom buttons (which own their own dialogs) mounted, and ignores
+ * clicks that React bubbles out of a customButton's portal.
+ */
+export {};
+//# sourceMappingURL=RightOverflowMenu.test.d.ts.map

package/lib/components/InputToolBar/__tests__/RightOverflowMenu.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RightOverflowMenu.test.d.ts","sourceRoot":"","sources":["../../../../src/components/InputToolBar/__tests__/RightOverflowMenu.test.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@admin-layout/tailwind-ui",
-    "version": "12.2.5-alpha.2",
+    "version": "12.2.5-alpha.5",
     "description": "Sample core for higher packages to depend on",
     "license": "ISC",
     "author": "CDMBase LLC",
@@ -111,5 +111,5 @@
     "typescript": {
         "definition": "lib/index.d.ts"
     },
-    "gitHead": "5ccfbf6ff024031ed38926197c3aef7b3f4dc8ee"
+    "gitHead": "0c32922aae5711a5f01e978fda3b10ea6494328a"
 }