@scripso-homepad/ui 0.4.10 → 0.4.12

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";
@@ -3081,7 +3160,7 @@ function DatePicker(props) {
       return;
     }
     props.onChange?.(range);
-    if (closeOnRangeComplete && range.end) {
+    if (closeOnRangeComplete && range?.end) {
       closePicker();
     }
   }