@scripso-homepad/ui 0.4.9 → 0.4.11

package/dist/index.d.cts

@@ -164,12 +164,12 @@ type CalendarBaseProps = {
 type CalendarSingleProps = CalendarBaseProps & {
     mode?: "single";
     value?: Date;
-    onChange?: (date: Date) => void;
+    onChange?: (date: Date | undefined) => void;
 };
 type CalendarRangeProps = CalendarBaseProps & {
     mode: "range";
     value?: DateRange;
-    onChange?: (range: DateRange) => void;
+    onChange?: (range: DateRange | undefined) => void;
 };
 type CalendarProps = CalendarSingleProps | CalendarRangeProps;
 declare function Calendar(props: CalendarProps): react.JSX.Element;
@@ -191,6 +191,8 @@ type DatePickerFieldProps = {
     containerStyle?: StyleProp<ViewStyle>;
     className?: string;
     fieldClassName?: string;
+    fieldStyle?: StyleProp<ViewStyle>;
+    fieldOutlineStyle?: StyleProp<ViewStyle>;
     panelClassName?: string;
     labelClassName?: string;
     errorClassName?: string;

package/dist/index.d.ts

@@ -164,12 +164,12 @@ type CalendarBaseProps = {
 type CalendarSingleProps = CalendarBaseProps & {
     mode?: "single";
     value?: Date;
-    onChange?: (date: Date) => void;
+    onChange?: (date: Date | undefined) => void;
 };
 type CalendarRangeProps = CalendarBaseProps & {
     mode: "range";
     value?: DateRange;
-    onChange?: (range: DateRange) => void;
+    onChange?: (range: DateRange | undefined) => void;
 };
 type CalendarProps = CalendarSingleProps | CalendarRangeProps;
 declare function Calendar(props: CalendarProps): react.JSX.Element;
@@ -191,6 +191,8 @@ type DatePickerFieldProps = {
     containerStyle?: StyleProp<ViewStyle>;
     className?: string;
     fieldClassName?: string;
+    fieldStyle?: StyleProp<ViewStyle>;
+    fieldOutlineStyle?: StyleProp<ViewStyle>;
     panelClassName?: string;
     labelClassName?: string;
     errorClassName?: string;

package/dist/index.js

@@ -1,7 +1,7 @@
-import { spacing, colors, fontSize, fontWeight, fonts, radii, INPUT_ICON_GAP, useApplyWebClassName, resolveInputVisualState, Label, getInputFieldStyles, inputFieldMetrics } from './chunk-YSDLHEJ7.js';
+import { spacing, colors, fontWeight, fontSize, fonts, radii, INPUT_ICON_GAP, useApplyWebClassName, resolveInputVisualState, Label, getInputFieldStyles, inputFieldMetrics } from './chunk-YSDLHEJ7.js';
 export { Button, Input, Label, brand, buttonTypography, colors, emeraldGreen, fontSize, fontWeight, fonts, labelTypography, navy, radii, rubyRed, shadows, spacing, stormGray } from './chunk-YSDLHEJ7.js';
 import { createContext, useRef, useState, useMemo, useEffect, useLayoutEffect, useContext, isValidElement, cloneElement } from 'react';
-import { Platform, StyleSheet, Animated, Easing, Pressable, Text, View, Modal, ScrollView, TextInput, Dimensions } from 'react-native';
+import { Platform, StyleSheet, Animated, Easing, View, Pressable, Text, Modal, ScrollView, TextInput, Dimensions } from 'react-native';
 import Svg2, { Path } from 'react-native-svg';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -53,7 +53,7 @@ var selectLabelTypography = {
   fontFamily: fonts.sans,
   fontSize: fontSize.sm,
   fontWeight: fontWeight.medium,
-  lineHeight: fontSize.sm,
+  lineHeight: 16,
   letterSpacing: 0,
   color: colors.slateBlue
 };
@@ -373,6 +373,86 @@ function renderSelectIcon(icon, color) {
   }
   return icon;
 }
+function resolveWebTextNode(ref) {
+  if (Platform.OS !== "web") {
+    return null;
+  }
+  const node = ref.current;
+  return node instanceof HTMLElement ? node : null;
+}
+function syncTruncatedNativeTitle(ref, label) {
+  const element = resolveWebTextNode(ref);
+  if (!element) {
+    return;
+  }
+  if (element.scrollWidth > element.clientWidth) {
+    element.setAttribute("title", label);
+    return;
+  }
+  element.removeAttribute("title");
+}
+function clearNativeTitle(ref) {
+  resolveWebTextNode(ref)?.removeAttribute("title");
+}
+function SelectOptionItem({
+  option,
+  compact,
+  optionHeight,
+  isSelected,
+  isHighlighted,
+  isLast,
+  selectableIndex,
+  onHighlight,
+  onSelect
+}) {
+  const labelRef = useRef(null);
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityState: { disabled: option.disabled, selected: isSelected },
+      disabled: option.disabled,
+      onPress: () => {
+        if (!option.disabled) {
+          onSelect(option.value);
+        }
+      },
+      onHoverIn: () => {
+        if (!option.disabled && selectableIndex >= 0) {
+          onHighlight(selectableIndex);
+        }
+        syncTruncatedNativeTitle(labelRef, option.label);
+      },
+      onHoverOut: () => {
+        clearNativeTitle(labelRef);
+      },
+      style: [
+        selectDropdownMetrics.option,
+        compact && styles.optionCompact,
+        { height: optionHeight, minHeight: optionHeight, maxHeight: optionHeight },
+        isSelected && selectDropdownMetrics.optionSelected,
+        compact && isSelected && styles.optionSelectedCompact,
+        isHighlighted && !isSelected && !option.disabled ? selectDropdownMetrics.optionHighlighted : null,
+        !isLast && styles.optionSpacing,
+        option.disabled && styles.optionDisabled
+      ],
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          ref: labelRef,
+          style: [
+            selectDropdownMetrics.optionLabel,
+            styles.optionLabel,
+            isSelected && selectDropdownMetrics.optionLabelSelected,
+            option.disabled && styles.optionLabelDisabled
+          ],
+          numberOfLines: 1,
+          children: option.label
+        }
+      )
+    }
+  );
+}
 var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 function normalizeSelectedValues(multiple, value) {
   if (multiple) {
@@ -505,6 +585,11 @@ function Select({
       onValueChange?.(nextValues);
       return;
     }
+    if (selectedValues.includes(nextValue)) {
+      onValueChange?.("");
+      closeMenu();
+      return;
+    }
     onValueChange?.(nextValue);
     closeMenu();
   }
@@ -514,43 +599,17 @@ function Select({
     const isHighlighted = selectableIndex === highlightedIndex;
     const isLast = index === options.length - 1;
     return /* @__PURE__ */ jsx(
-      Pressable,
+      SelectOptionItem,
       {
-        accessibilityRole: "button",
-        accessibilityState: { disabled: option.disabled, selected: isSelected },
-        disabled: option.disabled,
-        onPress: () => {
-          if (!option.disabled) {
-            handleSelect(option.value);
-          }
-        },
-        onHoverIn: () => {
-          if (!option.disabled && selectableIndex >= 0) {
-            setHighlightedIndex(selectableIndex);
-          }
-        },
-        style: [
-          selectDropdownMetrics.option,
-          compact && styles.optionCompact,
-          { height: optionHeight, minHeight: optionHeight, maxHeight: optionHeight },
-          isSelected && selectDropdownMetrics.optionSelected,
-          compact && isSelected && styles.optionSelectedCompact,
-          isHighlighted && !isSelected && !option.disabled ? selectDropdownMetrics.optionHighlighted : null,
-          !isLast && styles.optionSpacing,
-          option.disabled && styles.optionDisabled
-        ],
-        children: /* @__PURE__ */ jsx(
-          Text,
-          {
-            style: [
-              selectDropdownMetrics.optionLabel,
-              isSelected && selectDropdownMetrics.optionLabelSelected,
-              option.disabled && styles.optionLabelDisabled
-            ],
-            numberOfLines: 1,
-            children: option.label
-          }
-        )
+        option,
+        compact,
+        optionHeight,
+        isSelected,
+        isHighlighted,
+        isLast,
+        selectableIndex,
+        onHighlight: setHighlightedIndex,
+        onSelect: handleSelect
       },
       option.value
     );
@@ -685,6 +744,14 @@ var styles = StyleSheet.create({
   optionDisabled: {
     opacity: 0.5
   },
+  optionLabel: {
+    minWidth: 0,
+    ...Platform.OS === "web" ? {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    } : null
+  },
   optionLabelDisabled: {
     color: colors.stormGray300
   },
@@ -1513,17 +1580,24 @@ function isInDateRange(date, start, end) {
 }
 function selectRangeDate(clicked, current) {
   const clickedDate = stripTime(clicked);
-  if (!current?.start || current.end) {
+  if (!current?.start) {
     return { start: clickedDate };
   }
   const start = stripTime(current.start);
-  if (isSameDay(clickedDate, start)) {
+  const end = current.end ? stripTime(current.end) : void 0;
+  if (!end) {
+    if (isSameDay(clickedDate, start)) {
+      return void 0;
+    }
+    if (isBeforeDay(clickedDate, start)) {
+      return { start: clickedDate };
+    }
     return { start, end: clickedDate };
   }
-  if (isBeforeDay(clickedDate, start)) {
-    return { start: clickedDate };
+  if (isSameDay(clickedDate, end)) {
+    return void 0;
   }
-  return { start, end: clickedDate };
+  return { start: clickedDate };
 }
 function isSameDay(left, right) {
   return left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth() && left.getDate() === right.getDate();
@@ -2015,6 +2089,11 @@ function Calendar(props) {
       rangeProps.onChange?.(selectRangeDate(date, rangeProps.value));
       return;
     }
+    const currentValue = singleProps?.value;
+    if (currentValue && isSameDay(date, currentValue)) {
+      singleProps?.onChange?.(void 0);
+      return;
+    }
     singleProps?.onChange?.(date);
   }
   const headerIsPressable = pickerView === "days" || pickerView === "months";
@@ -2172,6 +2251,8 @@ function DatePicker(props) {
     containerStyle,
     className,
     fieldClassName,
+    fieldStyle,
+    fieldOutlineStyle,
     panelClassName,
     labelClassName,
     errorClassName,
@@ -2261,100 +2342,124 @@ function DatePicker(props) {
       return;
     }
     props.onChange?.(range);
-    if (closeOnRangeComplete && range.end) {
+    if (closeOnRangeComplete && range?.end) {
       closePicker();
     }
   }
-  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles4.wrapper, containerStyle], children: [
-    label ? /* @__PURE__ */ jsx(Label, { disabled, style: styles4.label, className: labelClassName, children: label }) : null,
-    /* @__PURE__ */ jsx(View, { style: [fieldStyles.outline, styles4.fieldOutline], children: /* @__PURE__ */ jsxs(
-      Pressable,
-      {
-        ref: triggerRef,
-        accessibilityRole: "button",
-        accessibilityState: { disabled, expanded: open },
-        disabled,
-        onPress: openPicker,
-        style: [calendarFieldMetrics.container, fieldStyles.container],
-        children: [
+  const isFluidField = Boolean(fieldStyle) || Boolean(fieldOutlineStyle);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      ref: wrapperRef,
+      style: [styles4.wrapper, isFluidField && styles4.wrapperFluid, containerStyle],
+      children: [
+        label ? /* @__PURE__ */ jsx(Label, { disabled, style: styles4.label, className: labelClassName, children: label }) : null,
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: [
+              fieldStyles.outline,
+              styles4.fieldOutline,
+              isFluidField && styles4.fieldOutlineFluid,
+              fieldOutlineStyle
+            ],
+            children: /* @__PURE__ */ jsxs(
+              Pressable,
+              {
+                ref: triggerRef,
+                accessibilityRole: "button",
+                accessibilityState: { disabled, expanded: open },
+                disabled,
+                onPress: openPicker,
+                style: [
+                  calendarFieldMetrics.container,
+                  isFluidField && styles4.fieldContainerFluid,
+                  fieldStyles.container,
+                  fieldStyle
+                ],
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      style: [calendarFieldMetrics.value, valueTextStyle],
+                      numberOfLines: 1,
+                      children: displayValue
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(View, { style: styles4.iconSlot, children: /* @__PURE__ */ jsx(
+                    CalendarIcon,
+                    {
+                      size: CALENDAR_FIELD_ICON_SIZE,
+                      color: disabled ? colors.stormGray200 : colors.stormGray150
+                    }
+                  ) })
+                ]
+              }
+            )
+          }
+        ),
+        helperMessage ? /* @__PURE__ */ jsx(Text, { ref: helperRef, style: error ? styles4.error : styles4.hint, children: helperMessage }) : null,
+        /* @__PURE__ */ jsx(Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: closePicker, children: /* @__PURE__ */ jsxs(View, { style: styles4.modalRoot, children: [
           /* @__PURE__ */ jsx(
-            Text,
+            Pressable,
             {
-              style: [calendarFieldMetrics.value, valueTextStyle],
-              numberOfLines: 1,
-              children: displayValue
+              style: styles4.backdrop,
+              onPress: closePicker,
+              accessibilityRole: "button",
+              accessibilityLabel: labels?.closeCalendar ?? translations.closeCalendar
             }
           ),
-          /* @__PURE__ */ jsx(View, { style: styles4.iconSlot, children: /* @__PURE__ */ jsx(
-            CalendarIcon,
-            {
-              size: CALENDAR_FIELD_ICON_SIZE,
-              color: disabled ? colors.stormGray200 : colors.stormGray150
-            }
-          ) })
-        ]
-      }
-    ) }),
-    helperMessage ? /* @__PURE__ */ jsx(Text, { ref: helperRef, style: error ? styles4.error : styles4.hint, children: helperMessage }) : null,
-    /* @__PURE__ */ jsx(Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: closePicker, children: /* @__PURE__ */ jsxs(View, { style: styles4.modalRoot, children: [
-      /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          style: styles4.backdrop,
-          onPress: closePicker,
-          accessibilityRole: "button",
-          accessibilityLabel: labels?.closeCalendar ?? translations.closeCalendar
-        }
-      ),
-      anchor ? /* @__PURE__ */ jsx(
-        View,
-        {
-          style: [
-            styles4.panelPosition,
-            {
-              top: dropdownTop,
-              left: panelLeft,
-              width: panelWidth,
-              height: CALENDAR_PANEL_HEIGHT
-            }
-          ],
-          children: props.mode === "range" ? /* @__PURE__ */ jsx(
-            Calendar,
-            {
-              mode: "range",
-              value: props.value,
-              onChange: handleRangeSelect,
-              viewDate,
-              defaultViewDate: resolvedDefaultViewDate,
-              onViewDateChange,
-              locale: resolvedLocale,
-              labels,
-              minDate,
-              maxDate,
-              today,
-              className: panelClassName
-            }
-          ) : /* @__PURE__ */ jsx(
-            Calendar,
+          anchor ? /* @__PURE__ */ jsx(
+            View,
             {
-              mode: "single",
-              value: props.value,
-              onChange: handleSingleSelect,
-              viewDate,
-              defaultViewDate: resolvedDefaultViewDate,
-              onViewDateChange,
-              locale: resolvedLocale,
-              labels,
-              minDate,
-              maxDate,
-              today,
-              className: panelClassName
+              style: [
+                styles4.panelPosition,
+                {
+                  top: dropdownTop,
+                  left: panelLeft,
+                  width: panelWidth,
+                  height: CALENDAR_PANEL_HEIGHT
+                }
+              ],
+              children: props.mode === "range" ? /* @__PURE__ */ jsx(
+                Calendar,
+                {
+                  mode: "range",
+                  value: props.value,
+                  onChange: handleRangeSelect,
+                  viewDate,
+                  defaultViewDate: resolvedDefaultViewDate,
+                  onViewDateChange,
+                  locale: resolvedLocale,
+                  labels,
+                  minDate,
+                  maxDate,
+                  today,
+                  className: panelClassName
+                }
+              ) : /* @__PURE__ */ jsx(
+                Calendar,
+                {
+                  mode: "single",
+                  value: props.value,
+                  onChange: handleSingleSelect,
+                  viewDate,
+                  defaultViewDate: resolvedDefaultViewDate,
+                  onViewDateChange,
+                  locale: resolvedLocale,
+                  labels,
+                  minDate,
+                  maxDate,
+                  today,
+                  className: panelClassName
+                }
+              )
             }
-          )
-        }
-      ) : null
-    ] }) })
-  ] });
+          ) : null
+        ] }) })
+      ]
+    }
+  );
 }
 var styles4 = StyleSheet.create({
   wrapper: {
@@ -2362,11 +2467,24 @@ var styles4 = StyleSheet.create({
     maxWidth: "100%",
     gap: SELECT_LABEL_GAP
   },
+  wrapperFluid: {
+    width: "100%"
+  },
   fieldOutline: {
     width: CALENDAR_FIELD_WIDTH,
     maxWidth: "100%",
     alignSelf: "flex-start"
   },
+  fieldOutlineFluid: {
+    width: "100%",
+    alignSelf: "stretch"
+  },
+  fieldContainerFluid: {
+    width: "100%",
+    minWidth: 0,
+    maxWidth: "100%",
+    alignSelf: "stretch"
+  },
   label: {
     ...calendarLabelTypography
   },