@scripso-homepad/ui 0.4.24 → 0.4.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scripso-homepad/ui",
-  "version": "0.4.24",
+  "version": "0.4.26",
   "type": "module",
   "description": "Cross-platform UI components for Homepad (React Web + React Native)",
   "license": "MIT",

package/src/components/Input.tsx

@@ -280,8 +280,8 @@ const styles = 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,

package/src/components/Select.tsx

@@ -20,6 +20,7 @@ import {
   Text,
   View,
   type StyleProp,
+  type TextStyle,
   type ViewStyle,
 } from "react-native";
 import { ChevronDownIcon } from "../icons/ChevronDownIcon";
@@ -210,6 +211,8 @@ interface SelectBaseProps {
   fieldClassName?: string;
   menuClassName?: string;
   labelClassName?: string;
+  /** Styles merged into the field label. */
+  labelStyles?: StyleProp<TextStyle>;
   errorClassName?: string;
   hintClassName?: string;
   /** Shorter option rows for compact filter-style dropdowns. */
@@ -268,6 +271,7 @@ export function Select({
   fieldClassName,
   menuClassName,
   labelClassName,
+  labelStyles,
   errorClassName,
   hintClassName,
   compact = false,
@@ -434,7 +438,11 @@ export function Select({
   return (
     <View ref={wrapperRef} style={[styles.wrapper, containerStyle]}>
       {label ? (
-        <Label disabled={isEffectivelyDisabled} style={styles.label} className={labelClassName}>
+        <Label
+          disabled={isEffectivelyDisabled}
+          style={[styles.label, labelStyles]}
+          className={labelClassName}
+        >
           {label}
         </Label>
       ) : null}

package/src/web/components/Modal.tsx

@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom';
 
 import { Button } from '../../components/Button';
 import { cn } from '../utils/cn';
+import './drawer-scroll.css';
 
 export type ModalFooterAlign = 'left' | 'center' | 'right';
 export type ModalFooterLayout = 'inline' | 'split';
@@ -146,7 +147,7 @@ export function Modal({
           </div>
         </header>
 
-        <div className={cn('min-h-0 min-w-0 flex-1 overflow-y-auto', contentClassName)}>{children}</div>
+        <div className={cn('drawer-scroll-area min-h-0 min-w-0 flex-1 overflow-y-auto', contentClassName)}>{children}</div>
 
         <footer
           className={cn(

package/src/web/components/Table.stories.tsx

@@ -187,7 +187,7 @@ function RequestsTableStory() {
                 <TableHead>Հեռախոսահամար</TableHead>
                 <TableHead>Հայտի Ամսաթիվ</TableHead>
                 <TableHead>Կարգավիճակ</TableHead>
-                <TableHead stickyRight className="w-px p-0" aria-hidden />
+                <TableHead className="w-px p-0" aria-hidden />
               </TableRow>
             </TableHeader>
             <TableBody>
@@ -375,7 +375,7 @@ function LargeScrollableTableStory() {
                 <TableHead className="min-w-40">Ընդամենը ամսական</TableHead>
                 <TableHead className="min-w-40">Վճարման կարգավիճակ</TableHead>
                 <TableHead className="min-w-32">Կարգավիճակ</TableHead>
-                <TableHead stickyRight className="w-px p-0" aria-hidden />
+                <TableHead className="w-px p-0" aria-hidden />
               </TableRow>
             </TableHeader>
             <TableBody>

package/src/web/components/drawer-scroll.css

@@ -1,10 +1,19 @@
 .drawer-scroll-area {
   scrollbar-color: var(--color-storm-gray-200, #d5d9dd) transparent;
-  scrollbar-width: thin;
+  /* Chrome 121+ ignores ::-webkit-scrollbar width when scrollbar-width is set. */
+  scrollbar-width: unset;
+}
+
+/* Firefox has no ::-webkit-scrollbar; thin is the slimmest standard option. */
+@supports not selector(::-webkit-scrollbar) {
+  .drawer-scroll-area {
+    scrollbar-width: thin;
+  }
 }
 
 .drawer-scroll-area::-webkit-scrollbar {
-  width: 4px;
+  width: 3px;
+  height: 3px;
   -webkit-appearance: none;
   appearance: none;
 }

package/src/web/components/table/TablePrimitives.tsx

@@ -13,8 +13,6 @@ import {
   tableHeadSortButtonAlignClasses,
   tableHeaderClassName,
   tableRowDisabledCellClassName,
-  tableStickyRightHeadClassName,
-  tableStickyRightShadowClassName,
   type TableCellVariant,
 } from './constants';
 import { TableRowDisabledProvider, useTableRowDisabled } from './table-row-context';
@@ -82,8 +80,6 @@ export function TableRow({ className, disabled = false, ...props }: TableRowProp
 
 export type TableHeadProps = ThHTMLAttributes<HTMLTableCellElement> & {
   align?: keyof typeof tableAlignClasses;
-  /** Pins the column to the right edge during horizontal scroll (e.g. actions menu). */
-  stickyRight?: boolean;
   /** Enables sort UI and click handler for this column header. */
   sortable?: boolean;
   /** Active sort direction for this column. Omit or `null` when unsorted. */
@@ -111,7 +107,6 @@ function resolveAriaSort(
 export function TableHead({
   className,
   align = 'left',
-  stickyRight = false,
   sortable = false,
   sortDirection = null,
   onSort,
@@ -142,11 +137,6 @@ export function TableHead({
         'sticky top-0 z-10',
         tableHeadPaddingClassName,
         tableHeaderClassName,
-        stickyRight && [
-          'sticky right-0 z-20',
-          tableStickyRightHeadClassName,
-          tableStickyRightShadowClassName,
-        ],
         !isSortable && tableAlignClasses[align],
         className,
       )}
@@ -203,17 +193,15 @@ export function TableActionsCell({ className, children, ...props }: TableActions
   return (
     <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}
     >
-      <div className="relative z-[1] flex items-center justify-end gap-2">{children}</div>
+      <div className="flex items-center justify-end gap-2">{children}</div>
     </td>
   );
 }

package/src/web/components/table/TableScrollArea.tsx

@@ -1,13 +1,7 @@
 import type { ReactNode } from 'react';
 
 import { cn } from '../../utils/cn';
-import {
-  resolveTableMinWidth,
-  resolveTableSize,
-  tableScrollAtEndClassName,
-  tableScrollHasOverflowClassName,
-} from './constants';
-import { useHorizontalScrollState } from './use-horizontal-scroll-state';
+import { resolveTableMinWidth, resolveTableSize } from './constants';
 
 export type TableScrollAreaProps = {
   children: ReactNode;
@@ -26,15 +20,10 @@ export function TableScrollArea({
   height,
   fillHeight = false,
 }: TableScrollAreaProps) {
-  const { scrollRef, scrollState } = useHorizontalScrollState();
-
   return (
     <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,
       )}

package/src/web/components/table/constants.ts

@@ -1,13 +1,5 @@
 export const tableBorderClassName = 'border-storm-gray-50';
 
-export const tableStickyRightShadowClassName = 'table-sticky-right-shadow';
-
-export const tableStickyRightHeadClassName = 'table-sticky-right-head';
-
-export const tableScrollAtEndClassName = 'table-scroll-at-end';
-
-export const tableScrollHasOverflowClassName = 'table-scroll-has-overflow';
-
 export const tableRowDisabledCellClassName = 'bg-[#ECEEF0]/30 [&>*]:opacity-70';
 
 export const DEFAULT_TABLE_BODY_MIN_HEIGHT = 320;

package/src/web/components/table/index.ts

@@ -11,10 +11,7 @@ export {
   tableFooterShellClassName,
   tableHeadPaddingClassName,
   tableRowDisabledCellClassName,
-  tableScrollAtEndClassName,
-  tableScrollHasOverflowClassName,
   tableShellClassName,
-  tableStickyRightShadowClassName,
 } from './constants';
 export type { TableCellVariant } from './constants';
 

package/src/web/components/table-scroll.css

@@ -52,30 +52,3 @@
 .table-scroll-area::-webkit-scrollbar-corner {
   background: transparent;
 }
-
-.table-sticky-right-shadow::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 0;
-  width: 12px;
-  transform: translateX(-100%);
-  background: linear-gradient(90deg, rgba(21, 26, 30, 0) 0%, rgba(21, 26, 30, 0.08) 100%);
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 150ms ease;
-}
-
-.table-scroll-has-overflow:not(.table-scroll-at-end) .table-sticky-right-shadow::before {
-  opacity: 1;
-}
-
-.table-sticky-right-head {
-  background-color: var(--color-storm-gray-0, #fbfcfc);
-}
-
-.table-scroll-has-overflow:not(.table-scroll-at-end) .table-sticky-right-head {
-  background-color: #fff;
-}

package/src/web/layout/BuildingSelect.tsx

@@ -1,5 +1,13 @@
 import { ChevronsUpDown } from 'lucide-react';
-import { useCallback, useId, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';
+import {
+  useCallback,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type ReactNode,
+} from 'react';
 
 import { BuildingIcon } from '../icons/BuildingIcon';
 import { useOnClickOutside } from '../hooks/useOnClickOutside';
@@ -18,6 +26,31 @@ export type BuildingSelectProps = {
   chevronIcon?: ReactNode;
 };
 
+function useTruncatedTitle(text: string) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  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 : undefined };
+}
+
 export function BuildingSelect({
   options,
   value,
@@ -37,6 +70,7 @@ export 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 = useCallback(() => {
     setOpen(false);
@@ -123,7 +157,7 @@ export function BuildingSelect({
   };
 
   return (
-    <div ref={rootRef} className={cn('relative w-57.5', className)}>
+    <div ref={rootRef} className={cn('relative w-72', className)}>
       <button
         type="button"
         disabled={disabled}
@@ -131,17 +165,21 @@ export 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',
         )}
       >
-        {buildingIcon ?? <BuildingIcon className="shrink-0 text-navy" />}
-        <span className="min-w-0 flex-1 truncate typography-14 font-medium text-slate-blue">
+        {buildingIcon ?? <BuildingIcon className="size-5 shrink-0 text-navy" />}
+        <span
+          ref={labelRef}
+          className="min-w-0 flex-1 truncate typography-14 font-medium text-slate-blue"
+        >
           {displayLabel}
         </span>
         {chevronIcon ?? (
@@ -196,7 +234,9 @@ export function BuildingSelect({
                     option.disabled && 'cursor-not-allowed opacity-50',
                   )}
                 >
-                  <span className="truncate">{option.label}</span>
+                  <span className="min-w-0 truncate" title={option.label}>
+                    {option.label}
+                  </span>
                 </button>
               </li>
             );

package/src/web/layout/Sidebar.tsx

@@ -218,7 +218,7 @@ export function Sidebar({
           </button>
         </div>
 
-        <nav className="flex flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden">
+        <nav className="flex w-full min-h-0 flex-1 flex-col gap-2 overflow-x-hidden overflow-y-auto">
           {visibleNavItems.map((item) => (
             <SidebarNavItem
               key={item.to}
@@ -228,27 +228,26 @@ export function Sidebar({
               onNavigate={handleNavItemNavigate}
             />
           ))}
+          <div className="mt-auto flex w-full flex-col gap-2">
+            {visibleFooterNavItems.map((item) => (
+              <SidebarNavItem
+                key={item.to}
+                item={item}
+                isOpen={isExpanded}
+                isActive={isNavItemActive(pathname, item)}
+                onNavigate={handleNavItemNavigate}
+              />
+            ))}
+            {user ? (
+              <SidebarUserCard
+                user={user}
+                isOpen={isExpanded}
+                logoutLabel={labels.logout}
+                onLogout={onLogout}
+              />
+            ) : null}
+          </div>
         </nav>
-
-        <div className="flex w-full flex-col gap-4">
-          {visibleFooterNavItems.map((item) => (
-            <SidebarNavItem
-              key={item.to}
-              item={item}
-              isOpen={isExpanded}
-              isActive={isNavItemActive(pathname, item)}
-              onNavigate={handleNavItemNavigate}
-            />
-          ))}
-          {user ? (
-            <SidebarUserCard
-              user={user}
-              isOpen={isExpanded}
-              logoutLabel={labels.logout}
-              onLogout={onLogout}
-            />
-          ) : null}
-        </div>
       </aside>
     </>
   );

package/src/web/layout/SidebarNavItem.tsx

@@ -36,9 +36,9 @@ export function SidebarNavItem({ item, isOpen, isActive, onNavigate }: SidebarNa
       tabIndex={item.disabled ? -1 : undefined}
       className={cn(
         'relative flex items-center rounded-xl px-4 py-3 transition-[background-color,color,gap,padding] duration-300 ease-in-out',
-        isOpen ? 'w-full gap-4' : 'justify-center gap-0 px-3',
+        isOpen ? 'w-full gap-4' : 'w-full justify-center gap-0 px-3',
         item.disabled && 'pointer-events-none opacity-50',
-        isActive ? 'bg-black/12 text-white' : 'text-navy-100 hover:bg-white/5',
+        isActive ? 'bg-black/12 text-white shadow-none' : 'text-navy-100 shadow-none hover:bg-white/5',
       )}
     >
       <span

package/src/web/layout/SidebarUserCard.tsx

@@ -1,4 +1,5 @@
 import { LogOut } from 'lucide-react';
+import { useEffect, useId, useRef, useState } from 'react';
 
 import { cn } from '../utils/cn';
 import type { AdminSidebarUser } from './types';
@@ -23,6 +24,9 @@ function getInitials(fullName: string, email: string): string {
   return email.slice(0, 2).toUpperCase();
 }
 
+const avatarCircleClassName =
+  'flex size-11 shrink-0 items-center justify-center rounded-full bg-white/5';
+
 export function SidebarUserCard({
   user,
   isOpen,
@@ -31,37 +35,112 @@ export function SidebarUserCard({
   className,
 }: SidebarUserCardProps) {
   const initials = user.initials ?? getInitials(user.fullName, user.email);
+  const [logoutOpen, setLogoutOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const logoutMenuId = useId();
 
-  return (
+  useEffect(() => {
+    if (isOpen) {
+      setLogoutOpen(false);
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (isOpen || !logoutOpen) {
+      return;
+    }
+
+    function handlePointerDown(event: MouseEvent) {
+      if (rootRef.current && !rootRef.current.contains(event.target as Node)) {
+        setLogoutOpen(false);
+      }
+    }
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === 'Escape') {
+        setLogoutOpen(false);
+      }
+    }
+
+    document.addEventListener('mousedown', handlePointerDown);
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('mousedown', handlePointerDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen, logoutOpen]);
+
+  const avatar = (
     <div
-      className={cn(
-        'flex w-full items-center rounded-xl transition-[background-color,justify-content,gap,padding] duration-300 ease-in-out',
-        isOpen ? 'justify-between gap-3 bg-black/12 p-3' : 'justify-center px-3 py-3',
-        className,
-      )}
+      className={cn(avatarCircleClassName, 'typography-14 font-bold text-white')}
+      aria-hidden
     >
+      {initials}
+    </div>
+  );
+
+  if (!isOpen) {
+    return (
       <div
-        className="flex size-11 shrink-0 items-center justify-center rounded-full bg-white/5 typography-14 font-bold text-white"
-        aria-hidden
+        ref={rootRef}
+        className={cn('flex w-full flex-col items-center gap-2', className)}
       >
-        {initials}
-      </div>
-      {isOpen ? (
-        <>
-          <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
-            <p className="truncate typography-14 font-bold text-white">{user.fullName}</p>
-            <p className="truncate typography-12 text-storm-gray-100">{user.email}</p>
-          </div>
+        {logoutOpen ? (
           <button
             type="button"
-            onClick={() => onLogout?.()}
-            className="shrink-0 cursor-pointer text-navy-150 transition-[opacity,transform] duration-300 ease-in-out hover:opacity-80 active:scale-95"
+            id={logoutMenuId}
+            onClick={() => {
+              setLogoutOpen(false);
+              onLogout?.();
+            }}
+            className={cn(
+              avatarCircleClassName,
+              'cursor-pointer bg-black/20 text-white',
+              'transition-[background-color,transform] duration-300 ease-in-out',
+              'hover:bg-white/10 active:scale-95',
+            )}
             aria-label={logoutLabel}
           >
             <LogOut size={20} strokeWidth={1.75} />
           </button>
-        </>
-      ) : null}
+        ) : null}
+        <button
+          type="button"
+          onClick={() => setLogoutOpen((open) => !open)}
+          className="flex cursor-pointer items-center justify-center transition-transform duration-300 ease-in-out active:scale-95"
+          aria-expanded={logoutOpen}
+          aria-haspopup="true"
+          aria-controls={logoutOpen ? logoutMenuId : undefined}
+          aria-label={user.fullName}
+        >
+          {avatar}
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex w-full items-center justify-between gap-3 rounded-xl bg-black/12 p-3',
+        'transition-[background-color,justify-content,gap,padding] duration-300 ease-in-out',
+        className,
+      )}
+    >
+      {avatar}
+      <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
+        <p className="truncate typography-14 font-bold text-white">{user.fullName}</p>
+        <p className="truncate typography-12 text-storm-gray-100">{user.email}</p>
+      </div>
+      <button
+        type="button"
+        onClick={() => onLogout?.()}
+        className="shrink-0 cursor-pointer text-navy-150 transition-[opacity,transform] duration-300 ease-in-out hover:opacity-80 active:scale-95"
+        aria-label={logoutLabel}
+      >
+        <LogOut size={20} strokeWidth={1.75} />
+      </button>
     </div>
   );
 }

package/src/web/components/table/use-horizontal-scroll-state.ts

@@ -1,72 +0,0 @@
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-
-export type HorizontalScrollState = {
-  hasOverflow: boolean;
-  atEnd: boolean;
-};
-
-const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
-
-function getHorizontalScrollState(element: HTMLElement): HorizontalScrollState {
-  const inner = element.firstElementChild as HTMLElement | null;
-  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 };
-}
-
-export function useHorizontalScrollState() {
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const [scrollState, setScrollState] = useState<HorizontalScrollState>({
-    hasOverflow: false,
-    atEnd: true,
-  });
-
-  const updateScrollState = useCallback(() => {
-    const element = scrollRef.current;
-    if (!element) {
-      return;
-    }
-
-    setScrollState(getHorizontalScrollState(element));
-  }, []);
-
-  useIsomorphicLayoutEffect(() => {
-    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 };
-}