@scripso-homepad/ui 0.4.9 → 0.4.11

package/dist/index.cjs

@@ -871,7 +871,7 @@ var selectLabelTypography = {
   fontFamily: fonts.sans,
   fontSize: fontSize.sm,
   fontWeight: fontWeight.medium,
-  lineHeight: fontSize.sm,
+  lineHeight: 16,
   letterSpacing: 0,
   color: colors.slateBlue
 };
@@ -1191,6 +1191,86 @@ function renderSelectIcon(icon, color) {
   }
   return icon;
 }
+function resolveWebTextNode(ref) {
+  if (reactNative.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 = react.useRef(null);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.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 && styles4.optionCompact,
+        { height: optionHeight, minHeight: optionHeight, maxHeight: optionHeight },
+        isSelected && selectDropdownMetrics.optionSelected,
+        compact && isSelected && styles4.optionSelectedCompact,
+        isHighlighted && !isSelected && !option.disabled ? selectDropdownMetrics.optionHighlighted : null,
+        !isLast && styles4.optionSpacing,
+        option.disabled && styles4.optionDisabled
+      ],
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          ref: labelRef,
+          style: [
+            selectDropdownMetrics.optionLabel,
+            styles4.optionLabel,
+            isSelected && selectDropdownMetrics.optionLabelSelected,
+            option.disabled && styles4.optionLabelDisabled
+          ],
+          numberOfLines: 1,
+          children: option.label
+        }
+      )
+    }
+  );
+}
 var useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
 function normalizeSelectedValues(multiple, value) {
   if (multiple) {
@@ -1323,6 +1403,11 @@ function Select({
       onValueChange?.(nextValues);
       return;
     }
+    if (selectedValues.includes(nextValue)) {
+      onValueChange?.("");
+      closeMenu();
+      return;
+    }
     onValueChange?.(nextValue);
     closeMenu();
   }
@@ -1332,43 +1417,17 @@ function Select({
     const isHighlighted = selectableIndex === highlightedIndex;
     const isLast = index === options.length - 1;
     return /* @__PURE__ */ jsxRuntime.jsx(
-      reactNative.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 && styles4.optionCompact,
-          { height: optionHeight, minHeight: optionHeight, maxHeight: optionHeight },
-          isSelected && selectDropdownMetrics.optionSelected,
-          compact && isSelected && styles4.optionSelectedCompact,
-          isHighlighted && !isSelected && !option.disabled ? selectDropdownMetrics.optionHighlighted : null,
-          !isLast && styles4.optionSpacing,
-          option.disabled && styles4.optionDisabled
-        ],
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          reactNative.Text,
-          {
-            style: [
-              selectDropdownMetrics.optionLabel,
-              isSelected && selectDropdownMetrics.optionLabelSelected,
-              option.disabled && styles4.optionLabelDisabled
-            ],
-            numberOfLines: 1,
-            children: option.label
-          }
-        )
+        option,
+        compact,
+        optionHeight,
+        isSelected,
+        isHighlighted,
+        isLast,
+        selectableIndex,
+        onHighlight: setHighlightedIndex,
+        onSelect: handleSelect
       },
       option.value
     );
@@ -1503,6 +1562,14 @@ var styles4 = reactNative.StyleSheet.create({
   optionDisabled: {
     opacity: 0.5
   },
+  optionLabel: {
+    minWidth: 0,
+    ...reactNative.Platform.OS === "web" ? {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    } : null
+  },
   optionLabelDisabled: {
     color: colors.stormGray300
   },
@@ -2331,17 +2398,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();
@@ -2833,6 +2907,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";
@@ -2990,6 +3069,8 @@ function DatePicker(props) {
     containerStyle,
     className,
     fieldClassName,
+    fieldStyle,
+    fieldOutlineStyle,
     panelClassName,
     labelClassName,
     errorClassName,
@@ -3079,100 +3160,124 @@ function DatePicker(props) {
       return;
     }
     props.onChange?.(range);
-    if (closeOnRangeComplete && range.end) {
+    if (closeOnRangeComplete && range?.end) {
       closePicker();
     }
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: wrapperRef, style: [styles7.wrapper, containerStyle], children: [
-    label ? /* @__PURE__ */ jsxRuntime.jsx(Label, { disabled, style: styles7.label, className: labelClassName, children: label }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [fieldStyles.outline, styles7.fieldOutline], children: /* @__PURE__ */ jsxRuntime.jsxs(
-      reactNative.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__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      ref: wrapperRef,
+      style: [styles7.wrapper, isFluidField && styles7.wrapperFluid, containerStyle],
+      children: [
+        label ? /* @__PURE__ */ jsxRuntime.jsx(Label, { disabled, style: styles7.label, className: labelClassName, children: label }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.View,
+          {
+            style: [
+              fieldStyles.outline,
+              styles7.fieldOutline,
+              isFluidField && styles7.fieldOutlineFluid,
+              fieldOutlineStyle
+            ],
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              reactNative.Pressable,
+              {
+                ref: triggerRef,
+                accessibilityRole: "button",
+                accessibilityState: { disabled, expanded: open },
+                disabled,
+                onPress: openPicker,
+                style: [
+                  calendarFieldMetrics.container,
+                  isFluidField && styles7.fieldContainerFluid,
+                  fieldStyles.container,
+                  fieldStyle
+                ],
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    reactNative.Text,
+                    {
+                      style: [calendarFieldMetrics.value, valueTextStyle],
+                      numberOfLines: 1,
+                      children: displayValue
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    CalendarIcon,
+                    {
+                      size: CALENDAR_FIELD_ICON_SIZE,
+                      color: disabled ? colors.stormGray200 : colors.stormGray150
+                    }
+                  ) })
+                ]
+              }
+            )
+          }
+        ),
+        helperMessage ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { ref: helperRef, style: error ? styles7.error : styles7.hint, children: helperMessage }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: closePicker, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.modalRoot, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            reactNative.Text,
+            reactNative.Pressable,
             {
-              style: [calendarFieldMetrics.value, valueTextStyle],
-              numberOfLines: 1,
-              children: displayValue
+              style: styles7.backdrop,
+              onPress: closePicker,
+              accessibilityRole: "button",
+              accessibilityLabel: labels?.closeCalendar ?? translations.closeCalendar
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(
-            CalendarIcon,
-            {
-              size: CALENDAR_FIELD_ICON_SIZE,
-              color: disabled ? colors.stormGray200 : colors.stormGray150
-            }
-          ) })
-        ]
-      }
-    ) }),
-    helperMessage ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { ref: helperRef, style: error ? styles7.error : styles7.hint, children: helperMessage }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: closePicker, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.modalRoot, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        reactNative.Pressable,
-        {
-          style: styles7.backdrop,
-          onPress: closePicker,
-          accessibilityRole: "button",
-          accessibilityLabel: labels?.closeCalendar ?? translations.closeCalendar
-        }
-      ),
-      anchor ? /* @__PURE__ */ jsxRuntime.jsx(
-        reactNative.View,
-        {
-          style: [
-            styles7.panelPosition,
-            {
-              top: dropdownTop,
-              left: panelLeft,
-              width: panelWidth,
-              height: CALENDAR_PANEL_HEIGHT
-            }
-          ],
-          children: props.mode === "range" ? /* @__PURE__ */ jsxRuntime.jsx(
-            Calendar,
-            {
-              mode: "range",
-              value: props.value,
-              onChange: handleRangeSelect,
-              viewDate,
-              defaultViewDate: resolvedDefaultViewDate,
-              onViewDateChange,
-              locale: resolvedLocale,
-              labels,
-              minDate,
-              maxDate,
-              today,
-              className: panelClassName
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            Calendar,
+          anchor ? /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.View,
             {
-              mode: "single",
-              value: props.value,
-              onChange: handleSingleSelect,
-              viewDate,
-              defaultViewDate: resolvedDefaultViewDate,
-              onViewDateChange,
-              locale: resolvedLocale,
-              labels,
-              minDate,
-              maxDate,
-              today,
-              className: panelClassName
+              style: [
+                styles7.panelPosition,
+                {
+                  top: dropdownTop,
+                  left: panelLeft,
+                  width: panelWidth,
+                  height: CALENDAR_PANEL_HEIGHT
+                }
+              ],
+              children: props.mode === "range" ? /* @__PURE__ */ jsxRuntime.jsx(
+                Calendar,
+                {
+                  mode: "range",
+                  value: props.value,
+                  onChange: handleRangeSelect,
+                  viewDate,
+                  defaultViewDate: resolvedDefaultViewDate,
+                  onViewDateChange,
+                  locale: resolvedLocale,
+                  labels,
+                  minDate,
+                  maxDate,
+                  today,
+                  className: panelClassName
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                Calendar,
+                {
+                  mode: "single",
+                  value: props.value,
+                  onChange: handleSingleSelect,
+                  viewDate,
+                  defaultViewDate: resolvedDefaultViewDate,
+                  onViewDateChange,
+                  locale: resolvedLocale,
+                  labels,
+                  minDate,
+                  maxDate,
+                  today,
+                  className: panelClassName
+                }
+              )
             }
-          )
-        }
-      ) : null
-    ] }) })
-  ] });
+          ) : null
+        ] }) })
+      ]
+    }
+  );
 }
 var styles7 = reactNative.StyleSheet.create({
   wrapper: {
@@ -3180,11 +3285,24 @@ var styles7 = reactNative.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
   },