@scripso-homepad/ui 0.4.1 → 0.4.3

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

@@ -0,0 +1,72 @@
+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 };
+}

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

@@ -0,0 +1,81 @@
+.table-scroll-area {
+  scrollbar-color: var(--color-storm-gray-50, #eceef0) transparent;
+  scrollbar-width: thin;
+}
+
+.table-scroll-area::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.table-scroll-area::-webkit-scrollbar-button,
+.table-scroll-area::-webkit-scrollbar-button:single-button,
+.table-scroll-area::-webkit-scrollbar-button:double-button,
+.table-scroll-area::-webkit-scrollbar-button:horizontal:decrement,
+.table-scroll-area::-webkit-scrollbar-button:horizontal:increment,
+.table-scroll-area::-webkit-scrollbar-button:horizontal:start:decrement,
+.table-scroll-area::-webkit-scrollbar-button:horizontal:end:increment,
+.table-scroll-area::-webkit-scrollbar-button:vertical:decrement,
+.table-scroll-area::-webkit-scrollbar-button:vertical:increment,
+.table-scroll-area::-webkit-scrollbar-button:vertical:start:decrement,
+.table-scroll-area::-webkit-scrollbar-button:vertical:end:increment,
+.table-scroll-area::-webkit-scrollbar-button:start:decrement,
+.table-scroll-area::-webkit-scrollbar-button:end:increment,
+.table-scroll-area::-webkit-scrollbar-button:decrement,
+.table-scroll-area::-webkit-scrollbar-button:increment {
+  display: none;
+  width: 0;
+  height: 0;
+  max-width: 0;
+  max-height: 0;
+  min-width: 0;
+  min-height: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  background: transparent;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.table-scroll-area::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.table-scroll-area::-webkit-scrollbar-thumb {
+  background-color: var(--color-storm-gray-50, #eceef0);
+  border-radius: 51px;
+}
+
+.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/hooks/useOnClickOutside.ts

@@ -1,10 +1,25 @@
-import { useEffect, type RefObject } from 'react';
+import { useEffect, useRef, type RefObject } from 'react';
+
+type OutsideTarget<T extends HTMLElement> = RefObject<T | null> | Array<RefObject<T | null>>;
+
+function isEventInsideRefs<T extends HTMLElement>(
+  target: Node,
+  refs: Array<RefObject<T | null>>,
+): boolean {
+  return refs.some((ref) => ref.current?.contains(target));
+}
 
 export function useOnClickOutside<T extends HTMLElement>(
-  ref: RefObject<T | null>,
+  ref: OutsideTarget<T>,
   handler: () => void,
   enabled = true,
 ) {
+  const handlerRef = useRef(handler);
+  handlerRef.current = handler;
+
+  const refsRef = useRef<Array<RefObject<T | null>>>([]);
+  refsRef.current = Array.isArray(ref) ? ref : [ref];
+
   useEffect(() => {
     if (!enabled) {
       return;
@@ -12,11 +27,11 @@ export function useOnClickOutside<T extends HTMLElement>(
 
     const onPointerDown = (event: MouseEvent | TouchEvent) => {
       const target = event.target as Node | null;
-      if (!ref.current || !target || ref.current.contains(target)) {
+      if (!target || isEventInsideRefs(target, refsRef.current)) {
         return;
       }
 
-      handler();
+      handlerRef.current();
     };
 
     document.addEventListener('mousedown', onPointerDown);
@@ -26,5 +41,5 @@ export function useOnClickOutside<T extends HTMLElement>(
       document.removeEventListener('mousedown', onPointerDown);
       document.removeEventListener('touchstart', onPointerDown);
     };
-  }, [enabled, handler, ref]);
+  }, [enabled]);
 }

package/src/web/icons/TableMenuActivateIcon.tsx

@@ -0,0 +1,27 @@
+import { cn } from '../utils/cn';
+
+type TableMenuActivateIconProps = {
+  className?: string;
+};
+
+export function TableMenuActivateIcon({ className }: TableMenuActivateIconProps) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+      className={cn('shrink-0', className)}
+    >
+      <path
+        d="M14.1667 9.16699V6.66699C14.1667 4.3658 12.3012 2.50033 10 2.50033C7.69882 2.50033 5.83333 4.3658 5.83333 6.66699V9.16699M5.83333 9.16699H4.16667C3.24619 9.16699 2.5 9.91318 2.5 10.8337V16.667C2.5 17.5875 3.24619 18.3337 4.16667 18.3337H15.8333C16.7538 18.3337 17.5 17.5875 17.5 16.667V10.8337C17.5 9.91318 16.7538 9.16699 15.8333 9.16699H5.83333Z"
+        stroke="#279D54"
+        strokeWidth="1.75"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/web/icons/TableMenuCheckIcon.tsx

@@ -0,0 +1,27 @@
+import { cn } from '../utils/cn';
+
+type TableMenuCheckIconProps = {
+  className?: string;
+};
+
+export function TableMenuCheckIcon({ className }: TableMenuCheckIconProps) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+      className={cn('shrink-0', className)}
+    >
+      <path
+        d="M16.6693 5L7.5026 14.1667L3.33594 10"
+        stroke="#279D54"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/web/icons/TableMenuCloseIcon.tsx

@@ -0,0 +1,27 @@
+import { cn } from '../utils/cn';
+
+type TableMenuCloseIconProps = {
+  className?: string;
+};
+
+export function TableMenuCloseIcon({ className }: TableMenuCloseIconProps) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+      className={cn('shrink-0', className)}
+    >
+      <path
+        d="M15 5L5 15M5 5L15 15"
+        stroke="#AE0011"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/web/icons/TableMenuEditIcon.tsx

@@ -0,0 +1,27 @@
+import { cn } from '../utils/cn';
+
+type TableMenuEditIconProps = {
+  className?: string;
+};
+
+export function TableMenuEditIcon({ className }: TableMenuEditIconProps) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+      className={cn('shrink-0', className)}
+    >
+      <path
+        d="M11.6667 3.33366L16.6667 8.33366M2.5 17.5003H5.83333L15.275 8.05866C15.5813 7.75244 15.7533 7.33612 15.7533 6.90233C15.7533 6.46854 15.5813 6.05222 15.275 5.746L14.2542 4.72533C13.9479 4.41911 13.5316 4.24707 13.0978 4.24707C12.664 4.24707 12.2477 4.41911 11.9415 4.72533L2.5 14.167V17.5003Z"
+        stroke="#B5BCC1"
+        strokeWidth="1.75"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/web/icons/TableMenuInfoIcon.tsx

@@ -0,0 +1,27 @@
+import { cn } from '../utils/cn';
+
+type TableMenuInfoIconProps = {
+  className?: string;
+};
+
+export function TableMenuInfoIcon({ className }: TableMenuInfoIconProps) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+      className={cn('shrink-0', className)}
+    >
+      <path
+        d="M9.9974 13.3337V10.0003M9.9974 6.66699H10.0057M18.3307 10.0003C18.3307 14.6027 14.5998 18.3337 9.9974 18.3337C5.39502 18.3337 1.66406 14.6027 1.66406 10.0003C1.66406 5.39795 5.39502 1.66699 9.9974 1.66699C14.5998 1.66699 18.3307 5.39795 18.3307 10.0003Z"
+        stroke="#B5BCC1"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/web/icons/TableMenuRefreshIcon.tsx

@@ -0,0 +1,27 @@
+import { cn } from '../utils/cn';
+
+type TableMenuRefreshIconProps = {
+  className?: string;
+};
+
+export function TableMenuRefreshIcon({ className }: TableMenuRefreshIconProps) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+      className={cn('shrink-0', className)}
+    >
+      <path
+        d="M17.5 10C17.5 11.4834 17.0601 12.9334 16.236 14.1668C15.4119 15.4001 14.2406 16.3614 12.8701 16.9291C11.4997 17.4968 9.99168 17.6453 8.53683 17.3559C7.08197 17.0665 5.7456 16.3522 4.6967 15.3033C3.64781 14.2544 2.9335 12.918 2.64411 11.4632C2.35472 10.0083 2.50325 8.50032 3.07091 7.12987C3.63856 5.75943 4.59986 4.58809 5.83323 3.76398C7.0666 2.93987 8.51664 2.5 10 2.5C12.1 2.5 14.1083 3.33333 15.6167 4.78333L17.5 6.66667M13.3333 6.66667H17.5V2.5"
+        stroke="#082640"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/web/icons/TableMenuSuspendIcon.tsx

@@ -0,0 +1,34 @@
+import { cn } from '../utils/cn';
+
+type TableMenuSuspendIconProps = {
+  className?: string;
+};
+
+export function TableMenuSuspendIcon({ className }: TableMenuSuspendIconProps) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+      className={cn('shrink-0', className)}
+    >
+      <path
+        d="M10 18.3337C14.6024 18.3337 18.3333 14.6027 18.3333 10.0003C18.3333 5.39795 14.6024 1.66699 10 1.66699C5.39763 1.66699 1.66667 5.39795 1.66667 10.0003C1.66667 14.6027 5.39763 18.3337 10 18.3337Z"
+        stroke="#AE0011"
+        strokeWidth="1.75"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M6.66667 10H13.3333"
+        stroke="#AE0011"
+        strokeWidth="1.75"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/web/icons/TableMenuTrashIcon.tsx

@@ -0,0 +1,27 @@
+import { cn } from '../utils/cn';
+
+type TableMenuTrashIconProps = {
+  className?: string;
+};
+
+export function TableMenuTrashIcon({ className }: TableMenuTrashIconProps) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+      className={cn('shrink-0', className)}
+    >
+      <path
+        d="M2.5 5.00033H17.5M15.8333 5.00033V16.667C15.8333 17.5003 15 18.3337 14.1667 18.3337H5.83333C5 18.3337 4.16667 17.5003 4.16667 16.667V5.00033M6.66667 5.00033V3.33366C6.66667 2.50033 7.5 1.66699 8.33333 1.66699H11.6667C12.5 1.66699 13.3333 2.50033 13.3333 3.33366V5.00033M8.33333 9.16699V14.167M11.6667 9.16699V14.167"
+        stroke="#AE0011"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/web/icons/TableMoreIcon.tsx

@@ -0,0 +1,41 @@
+import { cn } from '../utils/cn';
+
+type TableMoreIconProps = {
+  className?: string;
+};
+
+export function TableMoreIcon({ className }: TableMoreIconProps) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+      className={cn('shrink-0 text-storm-gray-150', className)}
+    >
+      <path
+        d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/web/icons/TableSortIcon.tsx

@@ -0,0 +1,37 @@
+import { cn } from '../utils/cn';
+
+export type TableSortDirection = 'asc' | 'desc';
+
+type TableSortIconProps = {
+  direction?: TableSortDirection | null;
+  className?: string;
+};
+
+const inactiveFill = '#DADDE0';
+const activeFill = '#6A7984';
+
+export function TableSortIcon({ direction = null, className }: TableSortIconProps) {
+  const upFill = direction === 'asc' ? activeFill : inactiveFill;
+  const downFill = direction === 'desc' ? activeFill : inactiveFill;
+
+  return (
+    <svg
+      width="12"
+      height="19"
+      viewBox="0 0 12 19"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+      className={cn('shrink-0', className)}
+    >
+      <path
+        d="M9.70277 11.4541L6.42668 15.2773C6.37387 15.3389 6.30837 15.3883 6.23466 15.4222C6.16095 15.4561 6.08078 15.4736 5.99965 15.4736C5.91852 15.4736 5.83835 15.4561 5.76464 15.4222C5.69093 15.3883 5.62542 15.3389 5.57262 15.2773L2.29652 11.4541C1.98387 11.0892 2.24309 10.5255 2.72355 10.5255H9.27668C9.75715 10.5255 10.0164 11.0892 9.70277 11.4541Z"
+        fill={downFill}
+      />
+      <path
+        d="M2.29714 7.54504L5.57323 3.72191C5.62604 3.66032 5.69155 3.61088 5.76526 3.57699C5.83897 3.54309 5.91914 3.52554 6.00027 3.52554C6.0814 3.52554 6.16156 3.54309 6.23527 3.57699C6.30898 3.61088 6.37449 3.66032 6.4273 3.72191L9.70339 7.54504C10.016 7.90996 9.75683 8.47363 9.27636 8.47363H2.72323C2.24277 8.47363 1.98355 7.90996 2.29714 7.54504Z"
+        fill={upFill}
+      />
+    </svg>
+  );
+}

package/src/web/index.ts

@@ -21,6 +21,80 @@ export type { SidebarUserCardProps } from './layout/SidebarUserCard';
 
 export { BellIcon } from './icons/BellIcon';
 export { BuildingIcon } from './icons/BuildingIcon';
+export { TableMoreIcon } from './icons/TableMoreIcon';
+export { TableSortIcon } from './icons/TableSortIcon';
+export { TableMenuCheckIcon } from './icons/TableMenuCheckIcon';
+export { TableMenuCloseIcon } from './icons/TableMenuCloseIcon';
+export { TableMenuInfoIcon } from './icons/TableMenuInfoIcon';
+export { TableMenuRefreshIcon } from './icons/TableMenuRefreshIcon';
+export { TableMenuActivateIcon } from './icons/TableMenuActivateIcon';
+export { TableMenuEditIcon } from './icons/TableMenuEditIcon';
+export { TableMenuSuspendIcon } from './icons/TableMenuSuspendIcon';
+export { TableMenuTrashIcon } from './icons/TableMenuTrashIcon';
+
+export { Pagination } from './components/Pagination';
+export type { PaginationLabels, PaginationProps, PaginationVariant } from './components/Pagination';
+export {
+  getPaginationRange,
+  getTotalPages,
+  getVisiblePageNumbers,
+} from './components/pagination-utils';
+
+export { TableRowStatusActions } from './components/TableRowStatusActions';
+export type {
+  TableRowActionsConfig,
+  TableRowStatusActionsProps,
+} from './components/TableRowStatusActions';
+
+export { TableActionsMenu } from './components/TableActionsMenu';
+export type {
+  TableActionsMenuItem,
+  TableActionsMenuItemTone,
+  TableActionsMenuProps,
+} from './components/TableActionsMenu';
+
+export { TableStatusActionsCell } from './components/TableStatusActionsCell';
+export type { TableStatusActionsCellProps } from './components/TableStatusActionsCell';
+
+export {
+  DataTable,
+  DEFAULT_TABLE_BODY_MIN_HEIGHT,
+  Table,
+  TableActionsCell,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableScrollArea,
+  tableRowDisabledCellClassName,
+} from './components/Table';
+export type {
+  DataTableClassNames,
+  DataTableProps,
+  TableActionsCellProps,
+  TableBodyProps,
+  TableCellProps,
+  TableCellVariant,
+  TableHeadProps,
+  TableHeaderProps,
+  TableProps,
+  TableRowProps,
+  TableScrollAreaProps,
+  TableSortDirection,
+} from './components/Table';
+
+export { Badge } from './components/Badge';
+export type { BadgeProps, BadgeVariant } from './components/Badge';
+
+export { StatusBadge } from './components/StatusBadge';
+export type { StatusBadgeProps, StatusBadgeTone } from './components/StatusBadge';
+
+export { TableActionButton } from './components/TableActionButton';
+export type { TableActionButtonProps, TableActionButtonVariant } from './components/TableActionButton';
+
+export { TableIconText } from './components/TableIconText';
+export type { TableIconTextProps } from './components/TableIconText';
 
 export { useMediaQuery } from './hooks/useMediaQuery';
 export { useOnClickOutside } from './hooks/useOnClickOutside';

package/src/web/layout/AppHeader.stories.tsx

@@ -16,6 +16,7 @@ const meta = {
   args: {
     title: 'Dashboard',
     labels: storyLabels.header,
+    hasBuildingSelect: true,
     buildingOptions: storyBuildingOptions,
     selectedBuildingId: storyBuildingOptions[0].value,
     onBuildingChange: fn(),
@@ -73,6 +74,7 @@ export const InteractiveBuildingSelect: Story = {
 
 export const SingleBuildingDisabled: Story = {
   args: {
+    hasBuildingSelect: true,
     buildingOptions: [storyBuildingOptions[0]],
     selectedBuildingId: storyBuildingOptions[0].value,
     buildingSelectDisabled: true,

package/src/web/layout/AppHeader.tsx

@@ -11,8 +11,9 @@ import type { AdminBuildingOption, AdminHeaderLabels } from './types';
 export type AppHeaderProps = {
   title: string;
   labels: AdminHeaderLabels;
-  buildingOptions: AdminBuildingOption[];
-  selectedBuildingId: string;
+  hasBuildingSelect?: boolean;
+  buildingOptions?: AdminBuildingOption[];
+  selectedBuildingId?: string;
   className?: string;
   buildingSelectClassName?: string;
   searchClassName?: string;
@@ -44,8 +45,9 @@ const defaultSearchFieldStyle: ViewStyle = {
 export function AppHeader({
   title,
   labels,
-  buildingOptions,
-  selectedBuildingId,
+  hasBuildingSelect = false,
+  buildingOptions = [],
+  selectedBuildingId = '',
   className,
   buildingSelectClassName,
   searchClassName,
@@ -73,16 +75,18 @@ export function AppHeader({
       <h1 className="truncate text-xl font-bold text-slate-blue">{title}</h1>
 
       <div className="flex shrink-0 items-center gap-3">
-        <BuildingSelect
-          options={buildingOptions}
-          value={selectedBuildingId}
-          labels={labels}
-          onChange={onBuildingChange}
-          disabled={buildingSelectDisabled}
-          className={buildingSelectClassName}
-          buildingIcon={buildingIcon}
-          chevronIcon={buildingChevronIcon}
-        />
+        {hasBuildingSelect ? (
+          <BuildingSelect
+            options={buildingOptions}
+            value={selectedBuildingId}
+            labels={labels}
+            onChange={onBuildingChange}
+            disabled={buildingSelectDisabled}
+            className={buildingSelectClassName}
+            buildingIcon={buildingIcon}
+            chevronIcon={buildingChevronIcon}
+          />
+        ) : null}
 
         <Input
           leftIcon={searchIcon ?? <Search strokeWidth={1.75} />}

package/src/web/layout/DashboardLayout.stories.tsx

@@ -58,6 +58,7 @@ function DashboardLayoutDemo() {
         header={{
           title: 'Dashboard',
           labels: storyLabels.header,
+          hasBuildingSelect: true,
           buildingOptions: storyBuildingOptions,
           selectedBuildingId,
           onBuildingChange: setSelectedBuildingId,