@scripso-homepad/ui 0.4.13 → 0.4.14

package/dist/web/index.d.cts

@@ -50,6 +50,7 @@ type AppHeaderProps = {
     title: string;
     labels: AdminHeaderLabels;
     hasBuildingSelect?: boolean;
+    showSearch?: boolean;
     buildingOptions?: AdminBuildingOption[];
     selectedBuildingId?: string;
     className?: string;
@@ -69,7 +70,7 @@ type AppHeaderProps = {
     onNotificationsClick?: () => void;
     onSearchChange?: (value: string) => void;
 };
-declare function AppHeader({ title, labels, hasBuildingSelect, buildingOptions, selectedBuildingId, className, buildingSelectClassName, searchClassName, notificationsButtonClassName, searchValue, searchFieldStyle, buildingIcon, notificationsIcon, searchIcon, buildingChevronIcon, buildingSelectDisabled, searchDisabled, notificationsDisabled, onBuildingChange, onNotificationsClick, onSearchChange, }: AppHeaderProps): react.JSX.Element;
+declare function AppHeader({ title, labels, hasBuildingSelect, showSearch, buildingOptions, selectedBuildingId, className, buildingSelectClassName, searchClassName, notificationsButtonClassName, searchValue, searchFieldStyle, buildingIcon, notificationsIcon, searchIcon, buildingChevronIcon, buildingSelectDisabled, searchDisabled, notificationsDisabled, onBuildingChange, onNotificationsClick, onSearchChange, }: AppHeaderProps): react.JSX.Element;
 
 type BuildingSelectProps = {
     options: AdminBuildingOption[];
@@ -251,8 +252,12 @@ type TableActionsMenuProps = {
     triggerAriaLabel: string;
     className?: string;
     menuClassName?: string;
+    /** Dropdown menu width in pixels. Defaults to 231. Ignored when menuFitContent is true. */
+    menuWidth?: number;
+    /** Size the menu to its content width instead of a fixed pixel width. */
+    menuFitContent?: boolean;
 };
-declare function TableActionsMenu({ items, triggerAriaLabel, className, menuClassName, }: TableActionsMenuProps): react.JSX.Element | null;
+declare function TableActionsMenu({ items, triggerAriaLabel, className, menuClassName, menuWidth, menuFitContent, }: TableActionsMenuProps): react.JSX.Element | null;
 
 type TableRowActionsConfig = {
     status: ReactNode;

package/dist/web/index.d.ts

@@ -50,6 +50,7 @@ type AppHeaderProps = {
     title: string;
     labels: AdminHeaderLabels;
     hasBuildingSelect?: boolean;
+    showSearch?: boolean;
     buildingOptions?: AdminBuildingOption[];
     selectedBuildingId?: string;
     className?: string;
@@ -69,7 +70,7 @@ type AppHeaderProps = {
     onNotificationsClick?: () => void;
     onSearchChange?: (value: string) => void;
 };
-declare function AppHeader({ title, labels, hasBuildingSelect, buildingOptions, selectedBuildingId, className, buildingSelectClassName, searchClassName, notificationsButtonClassName, searchValue, searchFieldStyle, buildingIcon, notificationsIcon, searchIcon, buildingChevronIcon, buildingSelectDisabled, searchDisabled, notificationsDisabled, onBuildingChange, onNotificationsClick, onSearchChange, }: AppHeaderProps): react.JSX.Element;
+declare function AppHeader({ title, labels, hasBuildingSelect, showSearch, buildingOptions, selectedBuildingId, className, buildingSelectClassName, searchClassName, notificationsButtonClassName, searchValue, searchFieldStyle, buildingIcon, notificationsIcon, searchIcon, buildingChevronIcon, buildingSelectDisabled, searchDisabled, notificationsDisabled, onBuildingChange, onNotificationsClick, onSearchChange, }: AppHeaderProps): react.JSX.Element;
 
 type BuildingSelectProps = {
     options: AdminBuildingOption[];
@@ -251,8 +252,12 @@ type TableActionsMenuProps = {
     triggerAriaLabel: string;
     className?: string;
     menuClassName?: string;
+    /** Dropdown menu width in pixels. Defaults to 231. Ignored when menuFitContent is true. */
+    menuWidth?: number;
+    /** Size the menu to its content width instead of a fixed pixel width. */
+    menuFitContent?: boolean;
 };
-declare function TableActionsMenu({ items, triggerAriaLabel, className, menuClassName, }: TableActionsMenuProps): react.JSX.Element | null;
+declare function TableActionsMenu({ items, triggerAriaLabel, className, menuClassName, menuWidth, menuFitContent, }: TableActionsMenuProps): react.JSX.Element | null;
 
 type TableRowActionsConfig = {
     status: ReactNode;

package/dist/web/index.js

@@ -1,4 +1,4 @@
-import { __commonJS, __require, __toESM, Input, Button } from '../chunk-WFMQYYH6.js';
+import { __commonJS, __require, __toESM, Input, Button } from '../chunk-ANDWP4YU.js';
 import { ChevronsUpDown, Search, LogOut, PanelLeftClose, PanelLeftOpen, X, Menu, ChevronLeft, ChevronRight } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -28782,6 +28782,7 @@ function AppHeader({
   title,
   labels,
   hasBuildingSelect = false,
+  showSearch = true,
   buildingOptions = [],
   selectedBuildingId = "",
   className,
@@ -28824,7 +28825,7 @@ function AppHeader({
               chevronIcon: buildingChevronIcon
             }
           ) : null,
-          /* @__PURE__ */ jsx(
+          showSearch ? /* @__PURE__ */ jsx(
             Input,
             {
               leftIcon: searchIcon ?? /* @__PURE__ */ jsx(Search, { strokeWidth: 1.75 }),
@@ -28837,7 +28838,7 @@ function AppHeader({
               fieldStyle: searchFieldStyle ?? defaultSearchFieldStyle,
               accessibilityLabel: labels.searchPlaceholder
             }
-          ),
+          ) : null,
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -29876,12 +29877,12 @@ var MENU_WIDTH_PX = 231;
 var MENU_OFFSET_PX = 4;
 var MENU_VIEWPORT_MARGIN_PX = 8;
 var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
-function clampMenuLeft(left) {
+function clampMenuLeft(left, menuWidth) {
   if (typeof window === "undefined") {
     return left;
   }
   const minLeft = MENU_VIEWPORT_MARGIN_PX;
-  const maxLeft = Math.max(minLeft, window.innerWidth - MENU_WIDTH_PX - MENU_VIEWPORT_MARGIN_PX);
+  const maxLeft = Math.max(minLeft, window.innerWidth - menuWidth - MENU_VIEWPORT_MARGIN_PX);
   return Math.min(Math.max(left, minLeft), maxLeft);
 }
 function resolveMenuItemIcon(item) {
@@ -29901,7 +29902,9 @@ function TableActionsMenu({
   items,
   triggerAriaLabel,
   className,
-  menuClassName
+  menuClassName,
+  menuWidth = MENU_WIDTH_PX,
+  menuFitContent = false
 }) {
   const [open, setOpen] = useState(false);
   const [menuPosition, setMenuPosition] = useState(null);
@@ -29918,11 +29921,12 @@ function TableActionsMenu({
       return;
     }
     const rect = trigger.getBoundingClientRect();
+    const resolvedMenuWidth = menuFitContent ? menuRef.current?.getBoundingClientRect().width ?? menuWidth : menuWidth;
     setMenuPosition({
       top: rect.bottom + MENU_OFFSET_PX,
-      left: clampMenuLeft(rect.right - MENU_WIDTH_PX)
+      left: clampMenuLeft(rect.right - resolvedMenuWidth, resolvedMenuWidth)
     });
-  }, []);
+  }, [menuFitContent, menuWidth]);
   useOnClickOutside([rootRef, menuRef], closeMenu, open);
   useIsomorphicLayoutEffect(() => {
     if (!open) {
@@ -29931,6 +29935,12 @@ function TableActionsMenu({
     }
     updateMenuPosition();
   }, [open, updateMenuPosition]);
+  useIsomorphicLayoutEffect(() => {
+    if (!open || !menuFitContent) {
+      return;
+    }
+    updateMenuPosition();
+  }, [items, menuFitContent, open, updateMenuPosition]);
   useEffect(() => {
     if (!open) {
       return;
@@ -29966,7 +29976,7 @@ function TableActionsMenu({
         position: "fixed",
         top: menuPosition.top,
         left: menuPosition.left,
-        width: MENU_WIDTH_PX
+        ...menuFitContent ? { width: "max-content" } : { width: menuWidth }
       },
       className: cn(
         "z-50 overflow-hidden rounded-2xl border border-storm-gray-50 bg-white shadow-[0_4px_20px_0_rgba(0,0,0,0.05)]",
@@ -29988,7 +29998,8 @@ function TableActionsMenu({
               item.onSelect();
             },
             className: cn(
-              "flex h-[51px] w-full cursor-pointer items-center gap-2.5 px-3 text-left typography-14 font-medium text-storm-gray-900 transition-colors hover:bg-storm-gray-0",
+              "flex h-[51px] cursor-pointer items-center gap-2.5 px-3 text-left typography-14 font-medium text-storm-gray-900 transition-colors hover:bg-storm-gray-0",
+              menuFitContent ? "w-auto" : "w-full",
               index > 0 && "border-t border-storm-gray-50",
               item.disabled && "cursor-not-allowed opacity-50"
             ),