@scripso-homepad/ui 0.4.10 → 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;

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;

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