@ecohouse/ui 0.1.52 → 0.1.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.52",
+  "version": "0.1.54",
   "type": "module",
   "private": false,
   "description": "Cross-platform presentation-only UI components for EcoHouse (React Native + React Native Web)",

package/src/components/DatePicker/DatePicker.tsx

@@ -53,6 +53,21 @@ const DEFAULT_MONTH_NAMES = [
 /** Monday-first — override via `weekdayLabels` for other locales. */
 const DEFAULT_WEEKDAY_LABELS = ["ԵՐ", "ԵՔ", "ՉՐ", "ՀՆ", "ՈՒՐ", "ՇԲ", "ԿՐ"];
 
+function rangeIncludesUnavailable(
+  start: Date,
+  end: Date,
+  isUnavailable: (day: Date) => boolean,
+): boolean {
+  const cursor = startOfDay(start);
+  const last = startOfDay(end);
+  const step = isBefore(last, cursor) ? -1 : 1;
+  while (true) {
+    if (isUnavailable(cursor)) return true;
+    if (isSameDay(cursor, last)) return false;
+    cursor.setDate(cursor.getDate() + step);
+  }
+}
+
 export type DateRange = { start: Date | null; end: Date | null };
 export type DatePickerVariant = "default" | "range-horizontal" | "range-vertical";
 
@@ -82,6 +97,15 @@ type DatePickerBaseProps = Omit<ViewProps, "style" | "children"> & {
   closeOnSelect?: boolean;
   minDate?: Date;
   maxDate?: Date;
+  /** Calendar days that cannot be selected, such as dates already booked. */
+  unavailableDates?: readonly Date[];
+  /**
+   * When true, unavailable days cannot be selected and a range cannot include them.
+   * Defaults to false so booked days can stay visual-only.
+   */
+  blockUnavailableDates?: boolean;
+  /** Accessibility label for an unavailable day. */
+  unavailableDateLabel?: string;
   /** First visible month when the calendar opens; defaults to the selected value's month, else today. */
   defaultVisibleMonth?: Date;
   /** Monday-first full month names. Defaults to Armenian. */
@@ -183,6 +207,9 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
       closeOnSelect = true,
       minDate,
       maxDate,
+      unavailableDates,
+      unavailableDateLabel = "Booked",
+      blockUnavailableDates = false,
       defaultVisibleMonth,
       monthNames = DEFAULT_MONTH_NAMES,
       weekdayLabels = DEFAULT_WEEKDAY_LABELS,
@@ -202,6 +229,19 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
       ...rest
     } = props;
 
+    const unavailableDayKeys = useMemo(() => {
+      const keys = new Set<number>();
+      for (const date of unavailableDates ?? []) {
+        keys.add(startOfDay(date).getTime());
+      }
+      return keys;
+    }, [unavailableDates]);
+
+    const isUnavailable = useCallback(
+      (day: Date) => unavailableDayKeys.has(startOfDay(day).getTime()),
+      [unavailableDayKeys],
+    );
+
     const isRange = props.range === true;
     const usesRangeTrigger = isRange && variant !== "default";
     const formatValue =
@@ -343,6 +383,7 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
     const handleDayPress = useCallback(
       (day: Date) => {
         if (disabled || isDateDisabled(day, minDate, maxDate)) return;
+        if (blockUnavailableDates && isUnavailable(day)) return;
         const picked = startOfDay(day);
 
         if (!isRange) {
@@ -360,14 +401,25 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
             ? { start: picked, end: null }
             : { start, end: picked };
 
+        if (
+          blockUnavailableDates &&
+          nextRange.start &&
+          nextRange.end &&
+          rangeIncludesUnavailable(nextRange.start, nextRange.end, isUnavailable)
+        ) {
+          return;
+        }
+
         if (!isValueControlled) setUncontrolledRange(nextRange);
         (props as DatePickerRangeProps).onValueChange?.(nextRange);
         if (closeOnSelect && nextRange.start && nextRange.end) setOpen(false);
       },
       [
+        blockUnavailableDates,
         closeOnSelect,
         disabled,
         isRange,
+        isUnavailable,
         isValueControlled,
         maxDate,
         minDate,
@@ -483,6 +535,7 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
                     ? styles.menuAlignEnd
                     : styles.menuAlignStart,
                 calendarStyle,
+                styles.menuFitContent,
               ]}
             >
               <View style={styles.calendarHeader}>
@@ -513,7 +566,7 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
                 </Pressable>
               </View>
 
-              <View>
+              <View style={styles.calendarGrid}>
                 <View style={styles.weekdayRow}>
                   {weekdayLabels.map((weekdayLabel, index) => (
                     <View key={`${weekdayLabel}-${index}`} style={styles.weekdayCell}>
@@ -582,10 +635,15 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
                         const isRangeStart = isRange && isSameDay(day, rangeValue.start);
                         const isRangeEnd = isRange && isSameDay(day, rangeValue.end);
                         const isSelectedEndpoint = isSelectedSingle || isRangeStart || isRangeEnd;
+                        const dayUnavailable = isUnavailable(day);
+                        const dayBlocked = blockUnavailableDates && dayUnavailable;
                         const dayDisabled = disabled || isDateDisabled(day, minDate, maxDate);
                         const dayKey = startOfDay(day).getTime();
                         const isHovered =
-                          !dayDisabled && !isSelectedEndpoint && hoveredDayKey === dayKey;
+                          !dayDisabled &&
+                          !dayBlocked &&
+                          !isSelectedEndpoint &&
+                          hoveredDayKey === dayKey;
 
                         const dayTextColor = isSelectedEndpoint
                           ? colors.white
@@ -601,7 +659,7 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
                           <Pressable
                             key={dayIndex}
                             onPress={() => handleDayPress(day)}
-                            disabled={dayDisabled}
+                            disabled={dayDisabled || dayBlocked}
                             onHoverIn={() => setHoveredDayKey(dayKey)}
                             onHoverOut={() =>
                               setHoveredDayKey((current) => (current === dayKey ? null : current))
@@ -612,9 +670,13 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
                             }
                             style={styles.dayCellWrap}
                             accessibilityRole="button"
-                            accessibilityLabel={formatValue(day)}
+                            accessibilityLabel={
+                              dayUnavailable
+                                ? `${formatValue(day)}, ${unavailableDateLabel}`
+                                : formatValue(day)
+                            }
                             accessibilityState={{
-                              disabled: dayDisabled,
+                              disabled: dayDisabled || dayBlocked,
                               selected: isSelectedEndpoint,
                             }}
                           >
@@ -622,10 +684,17 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
                               style={[
                                 styles.dayCircle,
                                 isSelectedEndpoint && styles.dayCircleSelected,
+                                dayUnavailable && styles.dayCircleBooked,
                                 isHovered && styles.dayCircleHovered,
                               ]}
                             >
-                              <Text style={[styles.dayText, { color: dayTextColor }]}>
+                              <Text
+                                style={[
+                                  styles.dayText,
+                                  { color: dayTextColor },
+                                  dayUnavailable && styles.dayTextBooked,
+                                ]}
+                              >
                                 {day.getDate()}
                               </Text>
                             </View>
@@ -762,7 +831,7 @@ const styles = StyleSheet.create({
   menu: {
     position: "absolute",
     top: "100%",
-    width: DEFAULT_WIDTH,
+    alignSelf: "flex-start",
     height: DEFAULT_MENU_HEIGHT,
     marginTop: 8,
     zIndex: 10,
@@ -796,10 +865,26 @@ const styles = StyleSheet.create({
     right: "auto",
     marginTop: 0,
   },
-  rangeMenu: {
-    width: RANGE_TRIGGER_WIDTH,
+  rangeMenu: {},
+  menuFitContent: {
+    width: MENU_CONTENT_WIDTH + MENU_PADDING * 2,
+    maxWidth: MENU_CONTENT_WIDTH + MENU_PADDING * 2,
+    alignSelf: "flex-start",
+    alignItems: "flex-start",
+    ...(Platform.select({
+      web: {
+        width: "fit-content",
+        maxWidth: "fit-content",
+      },
+      default: {},
+    }) as ViewStyle),
+  },
+  calendarGrid: {
+    width: MENU_CONTENT_WIDTH,
+    alignSelf: "flex-start",
   },
   calendarHeader: {
+    width: MENU_CONTENT_WIDTH,
     height: HEADER_HEIGHT,
     paddingTop: 8,
     paddingBottom: 8,
@@ -833,9 +918,8 @@ const styles = StyleSheet.create({
   weekdayCell: {
     width: DAY_CELL_WIDTH,
     height: WEEKDAY_ROW_HEIGHT,
-    flexGrow: 1,
-    flexShrink: 1,
-    flexBasis: 0,
+    flexGrow: 0,
+    flexShrink: 0,
     alignItems: "center",
     justifyContent: "center",
   },
@@ -863,9 +947,8 @@ const styles = StyleSheet.create({
   dayCellWrap: {
     width: DAY_CELL_WIDTH,
     height: DAY_CELL_HEIGHT,
-    flexGrow: 1,
-    flexShrink: 1,
-    flexBasis: 0,
+    flexGrow: 0,
+    flexShrink: 0,
     alignItems: "center",
     justifyContent: "center",
     opacity: 1,
@@ -882,6 +965,12 @@ const styles = StyleSheet.create({
   dayCircleSelected: {
     backgroundColor: colors.primary,
   },
+  dayCircleBooked: {
+    backgroundColor: colors.grey700,
+  },
+  dayTextBooked: {
+    textDecorationLine: "line-through",
+  },
   dayCircleHovered: {
     backgroundColor: colors.grey600,
   },

package/src/components/Select/Select.tsx

@@ -7,7 +7,9 @@ import {
   useRef,
   useState,
   type ComponentRef,
+  type ReactNode,
 } from "react";
+import { createPortal } from "react-dom";
 import {
   Platform,
   Pressable,
@@ -95,6 +97,17 @@ const ITEM_RADIUS = 12;
 const ICON_SIZE = 20;
 const CHIP_GAP = 6;
 const FALLBACK_ELLIPSIS_WIDTH = 20;
+/** Above Modal (500) so portaled menus stay clickable inside dialogs. */
+const WEB_MENU_Z_INDEX = 600;
+const WEB_VIEWPORT_PADDING = 8;
+const WEB_MENU_GAP = 8;
+
+type WebMenuPosition = {
+  top: number;
+  left: number;
+  width: number;
+  maxHeight: number;
+};
 
 type ItemVisualState = "default" | "hover" | "selected";
 
@@ -287,6 +300,7 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
     const valueProp = props.value;
     const rootRef = useRef<ComponentRef<typeof View>>(null);
     const triggerRef = useRef<ComponentRef<typeof Pressable>>(null);
+    const menuRef = useRef<ComponentRef<typeof View>>(null);
     const searchInputRef = useRef<ComponentRef<typeof TextInput>>(null);
     const setRootRef = useMemo(() => mergeRefs(rootRef, forwardedRef), [forwardedRef]);
     const isOpenControlled = typeof openProp === "boolean";
@@ -303,8 +317,10 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
     const [hoveredValue, setHoveredValue] = useState<string | null>(null);
     /** Web: flip menu to the trigger's right edge when it would overflow the viewport. */
     const [menuAlignEnd, setMenuAlignEnd] = useState(false);
-    /** Web: open above the trigger when there isn't enough space below. */
+    /** Native: open above the trigger when there isn't enough space below. */
     const [menuPlaceAbove, setMenuPlaceAbove] = useState(false);
+    /** Web: fixed coords for the portaled menu (avoids expanding overflow parents). */
+    const [webMenuPosition, setWebMenuPosition] = useState<WebMenuPosition | null>(null);
 
     const selectedValues = useMemo(() => {
       const current = isValueControlled
@@ -379,6 +395,7 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
           setHoveredValue(null);
           setMenuAlignEnd(false);
           setMenuPlaceAbove(false);
+          setWebMenuPosition(null);
           // Let the parent reset its externally fetched options.
           onSearchChange?.("");
         }
@@ -387,6 +404,7 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
     );
 
     // Prefer start (left) / below; flip when the menu would overflow the viewport (web).
+    // On web the menu is portaled with position:fixed so overflow parents don't grow/clip it.
     useLayoutEffect(() => {
       if (Platform.OS !== "web" || !isOpen) return;
 
@@ -397,16 +415,26 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
         const rect = trigger?.getBoundingClientRect?.();
         if (!rect) return;
 
-        const viewportPadding = 8;
-        const gap = 8;
         const menuWidth = Math.max(rect.width, resolvedMenuWidth ?? 0);
-        const overflowsRight = rect.left + menuWidth > window.innerWidth - viewportPadding;
+        const overflowsRight = rect.left + menuWidth > window.innerWidth - WEB_VIEWPORT_PADDING;
         setMenuAlignEnd(overflowsRight);
 
-        const spaceBelow = window.innerHeight - viewportPadding - rect.bottom;
-        const spaceAbove = rect.top - viewportPadding;
-        const needsAbove = estimatedMenuHeight + gap > spaceBelow && spaceAbove > spaceBelow;
+        const spaceBelow = window.innerHeight - WEB_VIEWPORT_PADDING - rect.bottom;
+        const spaceAbove = rect.top - WEB_VIEWPORT_PADDING;
+        const needsAbove =
+          estimatedMenuHeight + WEB_MENU_GAP > spaceBelow && spaceAbove > spaceBelow;
         setMenuPlaceAbove(needsAbove);
+
+        const available = Math.max(0, (needsAbove ? spaceAbove : spaceBelow) - WEB_MENU_GAP);
+        const maxHeight = Math.min(estimatedMenuHeight, Math.max(available, TRIGGER_HEIGHT));
+        const left = overflowsRight
+          ? Math.max(WEB_VIEWPORT_PADDING, rect.right - menuWidth)
+          : Math.min(rect.left, window.innerWidth - WEB_VIEWPORT_PADDING - menuWidth);
+        const top = needsAbove
+          ? Math.max(WEB_VIEWPORT_PADDING, rect.top - WEB_MENU_GAP - maxHeight)
+          : rect.bottom + WEB_MENU_GAP;
+
+        setWebMenuPosition({ top, left, width: menuWidth, maxHeight });
       };
 
       updateMenuPlacement();
@@ -428,11 +456,12 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
       if (Platform.OS !== "web" || !isOpen) return;
 
       const handlePointerDown = (event: MouseEvent | TouchEvent) => {
-        const root = rootRef.current as unknown as { contains?: (node: Node) => boolean } | null;
         const target = event.target;
-        if (root?.contains && target instanceof Node && !root.contains(target)) {
-          setOpen(false);
-        }
+        if (!(target instanceof Node)) return;
+        const root = rootRef.current as unknown as { contains?: (node: Node) => boolean } | null;
+        const menu = menuRef.current as unknown as { contains?: (node: Node) => boolean } | null;
+        if (root?.contains?.(target) || menu?.contains?.(target)) return;
+        setOpen(false);
       };
 
       document.addEventListener("mousedown", handlePointerDown);
@@ -581,7 +610,7 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
 
     const leftIconNode = renderStatefulIcon(leftIcon, UserIcon, {
       size: ICON_SIZE,
-      color: error ? colors.red : colors.primary,
+      color: error ? colors.red : isOpen ? colors.primary : colors.grey100,
     });
     const hasLeftIcon = showLeftIcon || leftIcon != null;
 
@@ -604,6 +633,127 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
     const resolvedAccessibilityLabel =
       accessibilityLabel ?? (typeof label === "string" ? label : undefined);
 
+    const optionListMaxHeight =
+      Platform.OS === "web" && webMenuPosition != null
+        ? Math.max(43, webMenuPosition.maxHeight - (24 + (showSearch ? 48 : 0)))
+        : resolvedOptionListMaxHeight;
+
+    const menuNode: ReactNode = isOpen ? (
+      <View
+        ref={menuRef}
+        style={[
+          styles.menu,
+          Platform.OS === "web" && webMenuPosition != null
+            ? ({
+                position: "fixed",
+                top: webMenuPosition.top,
+                left: webMenuPosition.left,
+                width: webMenuPosition.width,
+                minWidth: webMenuPosition.width,
+                maxHeight: webMenuPosition.maxHeight,
+                zIndex: WEB_MENU_Z_INDEX,
+                marginTop: 0,
+                marginBottom: 0,
+              } as unknown as ViewStyle)
+            : Platform.OS === "web"
+              ? ({ position: "fixed", opacity: 0, pointerEvents: "none" } as unknown as ViewStyle)
+              : [
+                  menuAlignEnd ? styles.menuAlignEnd : styles.menuAlignStart,
+                  menuPlaceAbove ? styles.menuAbove : styles.menuBelow,
+                ],
+          menuStyle,
+        ]}
+      >
+        {showSearch ? (
+          <View style={styles.searchField}>
+            <View style={styles.iconSlot}>
+              <SearchIcon size={ICON_SIZE} color={colors.grey100} />
+            </View>
+            <TextInput
+              ref={searchInputRef}
+              value={searchQuery}
+              onChangeText={handleSearchChange}
+              editable={!disabled}
+              placeholder={searchPlaceholder}
+              placeholderTextColor={colors.grey100}
+              style={[
+                styles.searchInput,
+                Platform.OS === "web" ? styles.searchInputWeb : null,
+                Platform.OS === "android" ? styles.searchInputAndroid : null,
+              ]}
+              accessibilityLabel={searchPlaceholder}
+            />
+          </View>
+        ) : null}
+
+        <ScrollView
+          style={[styles.optionList, { maxHeight: optionListMaxHeight }]}
+          contentContainerStyle={styles.optionListContent}
+          keyboardShouldPersistTaps="handled"
+          showsVerticalScrollIndicator={false}
+        >
+          {loading ? (
+            <View style={styles.statusRow}>
+              <Text style={styles.statusText}>Loading...</Text>
+            </View>
+          ) : filteredOptions.length === 0 ? (
+            <View style={styles.statusRow}>
+              <Text style={styles.statusText}>{emptyText}</Text>
+            </View>
+          ) : null}
+
+          {!loading &&
+            filteredOptions.map((option) => {
+              const isSelected = selectedValues.includes(option.value);
+              const isHovered = hoveredValue === option.value;
+              const visualState: ItemVisualState = isSelected
+                ? "selected"
+                : isHovered
+                  ? "hover"
+                  : "default";
+
+              return (
+                <Pressable
+                  key={option.value}
+                  onPress={() => handleSelect(option.value)}
+                  disabled={disabled}
+                  onHoverIn={() => setHoveredValue(option.value)}
+                  onHoverOut={() =>
+                    setHoveredValue((current) => (current === option.value ? null : current))
+                  }
+                  onPressIn={() => setHoveredValue(option.value)}
+                  onPressOut={() =>
+                    setHoveredValue((current) => (current === option.value ? null : current))
+                  }
+                  accessibilityRole={multiple ? "checkbox" : "button"}
+                  accessibilityState={{ selected: isSelected, checked: isSelected, disabled }}
+                  style={[
+                    styles.item,
+                    {
+                      backgroundColor: itemBackground(visualState),
+                    },
+                  ]}
+                >
+                  {multiple ? (
+                    <View style={[styles.itemCheckbox, { pointerEvents: "none" }]}>
+                      <Checkbox value={isSelected} variant="light" />
+                    </View>
+                  ) : null}
+                  <Text style={styles.itemLabel} numberOfLines={1}>
+                    {option.label}
+                  </Text>
+                </Pressable>
+              );
+            })}
+        </ScrollView>
+      </View>
+    ) : null;
+
+    const webMenuPortal =
+      Platform.OS === "web" && isOpen && typeof document !== "undefined"
+        ? createPortal(menuNode, document.body)
+        : null;
+
     return (
       <View
         {...rest}
@@ -652,99 +802,7 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
             </View>
           </Pressable>
 
-          {isOpen ? (
-            <View
-              style={[
-                styles.menu,
-                menuAlignEnd ? styles.menuAlignEnd : styles.menuAlignStart,
-                menuPlaceAbove ? styles.menuAbove : styles.menuBelow,
-                menuStyle,
-              ]}
-            >
-              {showSearch ? (
-                <View style={styles.searchField}>
-                  <View style={styles.iconSlot}>
-                    <SearchIcon size={ICON_SIZE} color={colors.grey100} />
-                  </View>
-                  <TextInput
-                    ref={searchInputRef}
-                    value={searchQuery}
-                    onChangeText={handleSearchChange}
-                    editable={!disabled}
-                    placeholder={searchPlaceholder}
-                    placeholderTextColor={colors.grey100}
-                    style={[
-                      styles.searchInput,
-                      Platform.OS === "web" ? styles.searchInputWeb : null,
-                      Platform.OS === "android" ? styles.searchInputAndroid : null,
-                    ]}
-                    accessibilityLabel={searchPlaceholder}
-                  />
-                </View>
-              ) : null}
-
-              <ScrollView
-                style={[styles.optionList, { maxHeight: resolvedOptionListMaxHeight }]}
-                contentContainerStyle={styles.optionListContent}
-                keyboardShouldPersistTaps="handled"
-                showsVerticalScrollIndicator={false}
-              >
-                {loading ? (
-                  <View style={styles.statusRow}>
-                    <Text style={styles.statusText}>Loading...</Text>
-                  </View>
-                ) : filteredOptions.length === 0 ? (
-                  <View style={styles.statusRow}>
-                    <Text style={styles.statusText}>{emptyText}</Text>
-                  </View>
-                ) : null}
-
-                {!loading &&
-                  filteredOptions.map((option) => {
-                    const isSelected = selectedValues.includes(option.value);
-                    const isHovered = hoveredValue === option.value;
-                    const visualState: ItemVisualState = isSelected
-                      ? "selected"
-                      : isHovered
-                        ? "hover"
-                        : "default";
-
-                    return (
-                      <Pressable
-                        key={option.value}
-                        onPress={() => handleSelect(option.value)}
-                        disabled={disabled}
-                        onHoverIn={() => setHoveredValue(option.value)}
-                        onHoverOut={() =>
-                          setHoveredValue((current) => (current === option.value ? null : current))
-                        }
-                        onPressIn={() => setHoveredValue(option.value)}
-                        onPressOut={() =>
-                          setHoveredValue((current) => (current === option.value ? null : current))
-                        }
-                        accessibilityRole={multiple ? "checkbox" : "button"}
-                        accessibilityState={{ selected: isSelected, checked: isSelected, disabled }}
-                        style={[
-                          styles.item,
-                          {
-                            backgroundColor: itemBackground(visualState),
-                          },
-                        ]}
-                      >
-                        {multiple ? (
-                          <View style={[styles.itemCheckbox, { pointerEvents: "none" }]}>
-                            <Checkbox value={isSelected} variant="light" />
-                          </View>
-                        ) : null}
-                        <Text style={styles.itemLabel} numberOfLines={1}>
-                          {option.label}
-                        </Text>
-                      </Pressable>
-                    );
-                  })}
-              </ScrollView>
-            </View>
-          ) : null}
+          {Platform.OS === "web" ? webMenuPortal : menuNode}
         </View>
 
         {showHint && hint ? <Text style={[styles.hint, { color: hintColor }]}>{hint}</Text> : null}