@scripso-homepad/ui 0.4.23 → 0.4.25

package/dist/web/index.cjs

@@ -29069,8 +29069,8 @@ var styles2 = reactNative.StyleSheet.create({
     gap: spacing.sm
   },
   iconSlot: {
-    width: INPUT_ICON_SIZE,
-    height: INPUT_ICON_SIZE,
+    minWidth: INPUT_ICON_SIZE,
+    minHeight: INPUT_ICON_SIZE,
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0
@@ -29212,6 +29212,24 @@ function useOnClickOutside(ref, handler, enabled = true) {
     };
   }, [enabled]);
 }
+function useTruncatedTitle(text) {
+  const ref = react.useRef(null);
+  const [isTruncated, setIsTruncated] = react.useState(false);
+  react.useLayoutEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    const update = () => {
+      setIsTruncated(element.scrollWidth > element.clientWidth + 1);
+    };
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [text]);
+  return { ref, title: isTruncated ? text : void 0 };
+}
 function BuildingSelect({
   options,
   value,
@@ -29230,6 +29248,7 @@ function BuildingSelect({
   const selectedOption = options.find((option) => option.value === value);
   const displayLabel = selectedOption?.label ?? labels.selectBuilding;
   const selectableOptions = options.filter((option) => !option.disabled);
+  const { ref: labelRef, title: truncatedTitle } = useTruncatedTitle(displayLabel);
   const closeMenu = react.useCallback(() => {
     setOpen(false);
     setHighlightedIndex(-1);
@@ -29300,7 +29319,7 @@ function BuildingSelect({
         break;
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: cn("relative w-57.5", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: cn("relative w-72", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -29310,17 +29329,25 @@ function BuildingSelect({
         "aria-expanded": open,
         "aria-controls": listboxId,
         "aria-label": labels.selectBuilding,
+        title: truncatedTitle,
         onClick: () => open ? closeMenu() : openMenu(),
         onKeyDown: handleTriggerKeyDown,
         className: cn(
-          "flex h-11 w-full items-center gap-3 rounded-xl border border-storm-gray-50 bg-white p-3 text-left transition-colors",
+          "flex h-11 w-full items-center gap-3 rounded-xl border border-storm-gray-50 bg-white px-3.5 py-3 text-left transition-colors",
           !disabled && "cursor-pointer hover:bg-storm-gray-50/60",
           open && "bg-storm-gray-50/60",
           disabled && "cursor-not-allowed opacity-60"
         ),
         children: [
-          buildingIcon ?? /* @__PURE__ */ jsxRuntime.jsx(BuildingIcon, { className: "shrink-0 text-navy" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate typography-14 font-medium text-slate-blue", children: displayLabel }),
+          buildingIcon ?? /* @__PURE__ */ jsxRuntime.jsx(BuildingIcon, { className: "size-5 shrink-0 text-navy" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              ref: labelRef,
+              className: "min-w-0 flex-1 truncate typography-14 font-medium text-slate-blue",
+              children: displayLabel
+            }
+          ),
           chevronIcon ?? /* @__PURE__ */ jsxRuntime.jsx(
             lucideReact.ChevronsUpDown,
             {
@@ -29373,7 +29400,7 @@ function BuildingSelect({
                 (isSelected || isHighlighted) && !option.disabled && "bg-storm-gray-50",
                 option.disabled && "cursor-not-allowed opacity-50"
               ),
-              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: option.label })
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", title: option.label, children: option.label })
             }
           ) }, option.value);
         })
@@ -30265,10 +30292,6 @@ function Pagination({
 
 // src/web/components/table/constants.ts
 var tableBorderClassName = "border-storm-gray-50";
-var tableStickyRightShadowClassName = "table-sticky-right-shadow";
-var tableStickyRightHeadClassName = "table-sticky-right-head";
-var tableScrollAtEndClassName = "table-scroll-at-end";
-var tableScrollHasOverflowClassName = "table-scroll-has-overflow";
 var tableRowDisabledCellClassName = "bg-[#ECEEF0]/30 [&>*]:opacity-70";
 var DEFAULT_TABLE_BODY_MIN_HEIGHT = 320;
 var tableCellPaddingClassName = "px-3 py-3";
@@ -30367,7 +30390,6 @@ function resolveAriaSort(sortDirection, isSortable) {
 function TableHead({
   className,
   align = "left",
-  stickyRight = false,
   sortable = false,
   sortDirection = null,
   onSort,
@@ -30397,11 +30419,6 @@ function TableHead({
         "sticky top-0 z-10",
         tableHeadPaddingClassName,
         tableHeaderClassName,
-        stickyRight && [
-          "sticky right-0 z-20",
-          tableStickyRightHeadClassName,
-          tableStickyRightShadowClassName
-        ],
         !isSortable && tableAlignClasses[align],
         className
       ),
@@ -30442,16 +30459,14 @@ function TableActionsCell({ className, children, ...props }) {
     "td",
     {
       className: cn(
-        "sticky right-0 z-10 whitespace-nowrap bg-white",
+        "whitespace-nowrap",
         tableCellPaddingClassName,
         tableBodyClassName,
-        tableStickyRightShadowClassName,
-        // Keep an opaque sticky background so scrolled cells never bleed through.
-        disabled && "bg-white [&>*]:opacity-70",
+        disabled && tableRowDisabledCellClassName,
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-[1] flex items-center justify-end gap-2", children })
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end gap-2", children })
     }
   );
 }
@@ -30688,57 +30703,6 @@ function TableStatusActionsCell({
     }
   );
 }
-var useIsomorphicLayoutEffect2 = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
-function getHorizontalScrollState(element) {
-  const inner = element.firstElementChild;
-  const table = inner?.querySelector("table");
-  const contentWidth = table?.scrollWidth ?? inner?.scrollWidth ?? element.scrollWidth;
-  const viewportWidth = element.clientWidth;
-  const maxScrollLeft = element.scrollWidth - element.clientWidth;
-  const hasOverflow = contentWidth > viewportWidth + 1;
-  const atEnd = !hasOverflow || element.scrollLeft >= maxScrollLeft - 1;
-  return { hasOverflow, atEnd };
-}
-function useHorizontalScrollState() {
-  const scrollRef = react.useRef(null);
-  const [scrollState, setScrollState] = react.useState({
-    hasOverflow: false,
-    atEnd: true
-  });
-  const updateScrollState = react.useCallback(() => {
-    const element = scrollRef.current;
-    if (!element) {
-      return;
-    }
-    setScrollState(getHorizontalScrollState(element));
-  }, []);
-  useIsomorphicLayoutEffect2(() => {
-    const element = scrollRef.current;
-    if (!element) {
-      return;
-    }
-    updateScrollState();
-    element.addEventListener("scroll", updateScrollState, { passive: true });
-    if (typeof ResizeObserver === "undefined") {
-      window.addEventListener("resize", updateScrollState);
-      return () => {
-        element.removeEventListener("scroll", updateScrollState);
-        window.removeEventListener("resize", updateScrollState);
-      };
-    }
-    const resizeObserver = new ResizeObserver(updateScrollState);
-    resizeObserver.observe(element);
-    const inner = element.firstElementChild;
-    if (inner) {
-      resizeObserver.observe(inner);
-    }
-    return () => {
-      element.removeEventListener("scroll", updateScrollState);
-      resizeObserver.disconnect();
-    };
-  }, [updateScrollState]);
-  return { scrollRef, scrollState };
-}
 function TableScrollArea({
   children,
   minWidth = 980,
@@ -30747,15 +30711,11 @@ function TableScrollArea({
   height,
   fillHeight = false
 }) {
-  const { scrollRef, scrollState } = useHorizontalScrollState();
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      ref: scrollRef,
       className: cn(
         "table-scroll-area w-full overflow-auto",
-        scrollState.hasOverflow && tableScrollHasOverflowClassName,
-        scrollState.atEnd && tableScrollAtEndClassName,
         fillHeight && "min-h-0 flex-1",
         className
       ),
@@ -31190,7 +31150,7 @@ function Modal({
                 ) : null
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("min-h-0 min-w-0 flex-1 overflow-y-auto", contentClassName), children }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("drawer-scroll-area min-h-0 min-w-0 flex-1 overflow-y-auto", contentClassName), children }),
             /* @__PURE__ */ jsxRuntime.jsxs(
               "footer",
               {