@react-stately/datepicker - npm Package Compare versions

Comparing version 3.0.0-nightly.3142 to 3.0.0-nightly.3148

dist/main.js

@@ -112,2 +112,4 @@ var $h2qOe$internationalizeddate = require("@internationalized/date");
     let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second' || granularity === 'millisecond';
+    var _shouldCloseOnSelect;
+    let shouldCloseOnSelect = (_shouldCloseOnSelect = props.shouldCloseOnSelect) !== null && _shouldCloseOnSelect !== void 0 ? _shouldCloseOnSelect : true;
     let [selectedDate, setSelectedDate] = $h2qOe$react.useState(null);
@@ -126,7 +128,8 @@ let [selectedTime, setSelectedTime] = $h2qOe$react.useState(null);
     let selectDate = (newValue)=>{
+        let shouldClose = typeof shouldCloseOnSelect === 'function' ? shouldCloseOnSelect() : shouldCloseOnSelect;
         if (hasTime) {
-            if (selectedTime) commitValue(newValue, selectedTime);
+            if (selectedTime || shouldClose) commitValue(newValue, selectedTime || $50d5d6a623389320$export$c5221a78ef73c5e9(props.placeholderValue));
             else setSelectedDate(newValue);
         } else setValue(newValue);
-        if (!hasTime) setOpen(false);
+        if (shouldClose) setOpen(false);
     };
@@ -146,2 +149,3 @@ let selectTime = (newValue)=>{
         granularity: granularity,
+        hasTime: hasTime,
         isOpen: isOpen1,
@@ -201,3 +205,3 @@ setOpen (isOpen) {
 function $6d4e641deb83cb9e$export$714a241b39a650d6(props) {
-    let { locale: locale , createCalendar: createCalendar , hideTimeZone: hideTimeZone  } = props;
+    let { locale: locale , createCalendar: createCalendar , hideTimeZone: hideTimeZone , isDisabled: isDisabled , isReadOnly: isReadOnly , isRequired: isRequired  } = props;
     let v1 = props.value || props.defaultValue || props.placeholderValue;
@@ -357,2 +361,5 @@ let [granularity, defaultTimeZone] = $50d5d6a623389320$export$2440da353cedad43(v1, props.granularity);
         granularity: granularity,
+        isDisabled: isDisabled,
+        isReadOnly: isReadOnly,
+        isRequired: isRequired,
         increment (part) {
@@ -587,2 +594,4 @@ adjustSegment(part, 1);
     let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second' || granularity === 'millisecond';
+    var _shouldCloseOnSelect;
+    let shouldCloseOnSelect = (_shouldCloseOnSelect = props.shouldCloseOnSelect) !== null && _shouldCloseOnSelect !== void 0 ? _shouldCloseOnSelect : true;
     let [dateRange1, setSelectedDateRange] = $h2qOe$react.useState(null);
@@ -602,8 +611,12 @@ let [timeRange1, setSelectedTimeRange] = $h2qOe$react.useState(null);
     let setDateRange = (range)=>{
+        let shouldClose = typeof shouldCloseOnSelect === 'function' ? shouldCloseOnSelect() : shouldCloseOnSelect;
         if (hasTime) {
-            if (range.start && range.end && (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.start) && (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.end)) commitValue(range, timeRange1);
+            if (shouldClose || range.start && range.end && (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.start) && (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.end)) commitValue(range, {
+                start: (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.start) || $50d5d6a623389320$export$c5221a78ef73c5e9(props.placeholderValue),
+                end: (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.end) || $50d5d6a623389320$export$c5221a78ef73c5e9(props.placeholderValue)
+            });
             else setSelectedDateRange(range);
         } else if (range.start && range.end) setValue(range);
         else setSelectedDateRange(range);
-        if (!hasTime) setOpen(false);
+        if (shouldClose) setOpen(false);
     };
@@ -621,2 +634,3 @@ let setTimeRange = (range)=>{
         granularity: granularity,
+        hasTime: hasTime,
         setDate (part, date) {
@@ -748,3 +762,5 @@ setDateRange({
         maxGranularity: 'hour',
-        placeholderValue: placeholderDate
+        placeholderValue: placeholderDate,
+        // Calendar should not matter for time fields.
+        createCalendar: ()=>new $h2qOe$internationalizeddate.GregorianCalendar()
     });
@@ -751,0 +767,0 @@ }

dist/module.js

@@ -96,2 +96,4 @@ import {toCalendarDate as $7UzoM$toCalendarDate, toCalendarDateTime as $7UzoM$toCalendarDateTime, DateFormatter as $7UzoM$DateFormatter, Time as $7UzoM$Time, toCalendar as $7UzoM$toCalendar, now as $7UzoM$now, GregorianCalendar as $7UzoM$GregorianCalendar, getMinimumMonthInYear as $7UzoM$getMinimumMonthInYear, getMinimumDayInMonth as $7UzoM$getMinimumDayInMonth, toTime as $7UzoM$toTime, today as $7UzoM$today, getLocalTimeZone as $7UzoM$getLocalTimeZone} from "@internationalized/date";
     let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second' || granularity === 'millisecond';
+    var _shouldCloseOnSelect;
+    let shouldCloseOnSelect = (_shouldCloseOnSelect = props.shouldCloseOnSelect) !== null && _shouldCloseOnSelect !== void 0 ? _shouldCloseOnSelect : true;
     let [selectedDate, setSelectedDate] = $7UzoM$useState(null);
@@ -110,7 +112,8 @@ let [selectedTime, setSelectedTime] = $7UzoM$useState(null);
     let selectDate = (newValue)=>{
+        let shouldClose = typeof shouldCloseOnSelect === 'function' ? shouldCloseOnSelect() : shouldCloseOnSelect;
         if (hasTime) {
-            if (selectedTime) commitValue(newValue, selectedTime);
+            if (selectedTime || shouldClose) commitValue(newValue, selectedTime || $35a22f14a1f04b11$export$c5221a78ef73c5e9(props.placeholderValue));
             else setSelectedDate(newValue);
         } else setValue(newValue);
-        if (!hasTime) setOpen(false);
+        if (shouldClose) setOpen(false);
     };
@@ -130,2 +133,3 @@ let selectTime = (newValue)=>{
         granularity: granularity,
+        hasTime: hasTime,
         isOpen: isOpen1,
@@ -185,3 +189,3 @@ setOpen (isOpen) {
 function $09e80d602234613d$export$714a241b39a650d6(props) {
-    let { locale: locale , createCalendar: createCalendar , hideTimeZone: hideTimeZone  } = props;
+    let { locale: locale , createCalendar: createCalendar , hideTimeZone: hideTimeZone , isDisabled: isDisabled , isReadOnly: isReadOnly , isRequired: isRequired  } = props;
     let v1 = props.value || props.defaultValue || props.placeholderValue;
@@ -341,2 +345,5 @@ let [granularity, defaultTimeZone] = $35a22f14a1f04b11$export$2440da353cedad43(v1, props.granularity);
         granularity: granularity,
+        isDisabled: isDisabled,
+        isReadOnly: isReadOnly,
+        isRequired: isRequired,
         increment (part) {
@@ -571,2 +578,4 @@ adjustSegment(part, 1);
     let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second' || granularity === 'millisecond';
+    var _shouldCloseOnSelect;
+    let shouldCloseOnSelect = (_shouldCloseOnSelect = props.shouldCloseOnSelect) !== null && _shouldCloseOnSelect !== void 0 ? _shouldCloseOnSelect : true;
     let [dateRange1, setSelectedDateRange] = $7UzoM$useState(null);
@@ -586,8 +595,12 @@ let [timeRange1, setSelectedTimeRange] = $7UzoM$useState(null);
     let setDateRange = (range)=>{
+        let shouldClose = typeof shouldCloseOnSelect === 'function' ? shouldCloseOnSelect() : shouldCloseOnSelect;
         if (hasTime) {
-            if (range.start && range.end && (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.start) && (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.end)) commitValue(range, timeRange1);
+            if (shouldClose || range.start && range.end && (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.start) && (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.end)) commitValue(range, {
+                start: (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.start) || $35a22f14a1f04b11$export$c5221a78ef73c5e9(props.placeholderValue),
+                end: (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.end) || $35a22f14a1f04b11$export$c5221a78ef73c5e9(props.placeholderValue)
+            });
             else setSelectedDateRange(range);
         } else if (range.start && range.end) setValue(range);
         else setSelectedDateRange(range);
-        if (!hasTime) setOpen(false);
+        if (shouldClose) setOpen(false);
     };
@@ -605,2 +618,3 @@ let setTimeRange = (range)=>{
         granularity: granularity,
+        hasTime: hasTime,
         setDate (part, date) {
@@ -732,3 +746,5 @@ setDateRange({
         maxGranularity: 'hour',
-        placeholderValue: placeholderDate
+        placeholderValue: placeholderDate,
+        // Calendar should not matter for time fields.
+        createCalendar: ()=>new $7UzoM$GregorianCalendar()
     });
@@ -735,0 +751,0 @@ }

dist/types.d.ts

@@ -5,2 +5,9 @@ import { CalendarDate, Calendar, CalendarDateTime, DateFormatter } from "@internationalized/date";
 type FieldOptions = Pick<Intl.DateTimeFormatOptions, 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second'>;
+export interface DatePickerOptions extends DatePickerProps<DateValue> {
+    /**
+     * Determines whether the date picker popover should close automatically when a date is selected.
+     * @default true
+     */
+    shouldCloseOnSelect?: boolean | (() => boolean);
+}
 export interface DatePickerState {
@@ -13,2 +20,3 @@ value: DateValue;
     setTimeValue: (value: TimeValue) => void;
+    hasTime: boolean;
     isOpen: boolean;
@@ -20,3 +28,3 @@ setOpen: (isOpen: boolean) => void;
 }
-export function useDatePickerState<T extends DateValue>(props: DatePickerProps<T>): DatePickerState;
+export function useDatePickerState(props: DatePickerOptions): DatePickerState;
 export interface DateSegment {
@@ -39,2 +47,5 @@ type: Intl.DateTimeFormatPartTypes;
     granularity: Granularity;
+    isDisabled: boolean;
+    isReadOnly: boolean;
+    isRequired: boolean;
     increment: (type: Intl.DateTimeFormatPartTypes) => void;
@@ -55,2 +66,9 @@ decrement: (type: Intl.DateTimeFormatPartTypes) => void;
 export function useDatePickerFieldState<T extends DateValue>(props: DatePickerFieldProps<T>): DatePickerFieldState;
+export interface DateRangePickerOptions extends DateRangePickerProps<DateValue> {
+    /**
+     * Determines whether the date picker popover should close automatically when a date is selected.
+     * @default true
+     */
+    shouldCloseOnSelect?: boolean | (() => boolean);
+}
 type TimeRange = RangeValue<TimeValue>;
@@ -67,2 +85,3 @@ export interface DateRangePickerState {
     setTimeRange: (value: TimeRange) => void;
+    hasTime: boolean;
     isOpen: boolean;
@@ -75,6 +94,5 @@ setOpen: (isOpen: boolean) => void;
 }
-export function useDateRangePickerState<T extends DateValue>(props: DateRangePickerProps<T>): DateRangePickerState;
+export function useDateRangePickerState(props: DateRangePickerOptions): DateRangePickerState;
 interface TimeFieldProps<T extends TimeValue> extends TimePickerProps<T> {
     locale: string;
-    createCalendar: (name: string) => Calendar;
 }
@@ -81,0 +99,0 @@ export function useTimeFieldState<T extends TimeValue>(props: TimeFieldProps<T>): import("useDatePickerFieldState").DatePickerFieldState;

package.json

 {
   "name": "@react-stately/datepicker",
-  "version": "3.0.0-nightly.3142+51ff50c6f",
+  "version": "3.0.0-nightly.3148+320c69908",
   "description": "Spectrum UI components in React",
@@ -21,6 +21,6 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@internationalized/date": "3.0.0-nightly.3142+51ff50c6f",
-    "@react-stately/utils": "3.0.0-nightly.1446+51ff50c6f",
-    "@react-types/datepicker": "3.0.0-nightly.3142+51ff50c6f",
-    "@react-types/shared": "3.0.0-nightly.1446+51ff50c6f",
+    "@internationalized/date": "3.0.0-nightly.3148+320c69908",
+    "@react-stately/utils": "3.0.0-nightly.1452+320c69908",
+    "@react-types/datepicker": "3.0.0-nightly.3148+320c69908",
+    "@react-types/shared": "3.0.0-nightly.1452+320c69908",
     "date-fns": "^1.30.1"
@@ -34,3 +34,3 @@ },
   },
-  "gitHead": "51ff50c6fed6df76c22467622b17b2af2d9380e0"
+  "gitHead": "320c69908b41be47a3abb2878d04f90384e54321"
 }

src/useDatePickerFieldState.ts

@@ -38,2 +38,5 @@ /*
   granularity: Granularity,
+  isDisabled: boolean,
+  isReadOnly: boolean,
+  isRequired: boolean,
   increment: (type: Intl.DateTimeFormatPartTypes) => void,
@@ -84,3 +87,6 @@ decrement: (type: Intl.DateTimeFormatPartTypes) => void,
     createCalendar,
-    hideTimeZone
+    hideTimeZone,
+    isDisabled,
+    isReadOnly,
+    isRequired
   } = props;
@@ -226,2 +232,5 @@
     granularity,
+    isDisabled,
+    isReadOnly,
+    isRequired,
     increment(part) {
@@ -228,0 +237,0 @@ adjustSegment(part, 1);

src/useDatePickerState.ts

@@ -21,2 +21,10 @@ /*
 
+export interface DatePickerOptions extends DatePickerProps<DateValue> {
+  /**
+   * Determines whether the date picker popover should close automatically when a date is selected.
+   * @default true
+   */
+  shouldCloseOnSelect?: boolean | (() => boolean)
+}
+
 export interface DatePickerState {
@@ -29,2 +37,3 @@ value: DateValue,
   setTimeValue: (value: TimeValue) => void,
+  hasTime: boolean,
   isOpen: boolean,
@@ -37,3 +46,3 @@ setOpen: (isOpen: boolean) => void,
 
-export function useDatePickerState<T extends DateValue>(props: DatePickerProps<T>): DatePickerState {
+export function useDatePickerState(props: DatePickerOptions): DatePickerState {
   let [isOpen, setOpen] = useState(false);
@@ -46,2 +55,3 @@ let [value, setValue] = useControlledState<DateValue>(props.value, props.defaultValue || null, props.onChange);
   let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second' || granularity === 'millisecond';
+  let shouldCloseOnSelect = props.shouldCloseOnSelect ?? true;
 
@@ -69,5 +79,6 @@ let [selectedDate, setSelectedDate] = useState<DateValue>(null);
   let selectDate = (newValue: CalendarDate) => {
+    let shouldClose = typeof shouldCloseOnSelect === 'function' ? shouldCloseOnSelect() : shouldCloseOnSelect;
     if (hasTime) {
-      if (selectedTime) {
-        commitValue(newValue, selectedTime);
+      if (selectedTime || shouldClose) {
+        commitValue(newValue, selectedTime || getPlaceholderTime(props.placeholderValue));
       } else {
@@ -80,3 +91,3 @@ setSelectedDate(newValue);
 
-    if (!hasTime) {
+    if (shouldClose) {
       setOpen(false);
@@ -105,2 +116,3 @@ }
     granularity,
+    hasTime,
     isOpen,
@@ -107,0 +119,0 @@ setOpen(isOpen) {

src/useDateRangePickerState.ts

@@ -20,2 +20,10 @@ /*
 
+export interface DateRangePickerOptions extends DateRangePickerProps<DateValue> {
+  /**
+   * Determines whether the date picker popover should close automatically when a date is selected.
+   * @default true
+   */
+  shouldCloseOnSelect?: boolean | (() => boolean)
+}
+
 type TimeRange = RangeValue<TimeValue>;
@@ -32,2 +40,3 @@ export interface DateRangePickerState {
   setTimeRange: (value: TimeRange) => void,
+  hasTime: boolean,
   isOpen: boolean,
@@ -41,3 +50,3 @@ setOpen: (isOpen: boolean) => void,
 
-export function useDateRangePickerState<T extends DateValue>(props: DateRangePickerProps<T>): DateRangePickerState {
+export function useDateRangePickerState(props: DateRangePickerOptions): DateRangePickerState {
   let [isOpen, setOpen] = useState(false);
@@ -70,2 +79,3 @@ let [controlledValue, setControlledValue] = useControlledState<DateRange>(props.value, props.defaultValue || null, props.onChange);
   let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second' || granularity === 'millisecond';
+  let shouldCloseOnSelect = props.shouldCloseOnSelect ?? true;
 
@@ -91,5 +101,9 @@ let [dateRange, setSelectedDateRange] = useState<DateRange>(null);
   let setDateRange = (range: DateRange) => {
+    let shouldClose = typeof shouldCloseOnSelect === 'function' ? shouldCloseOnSelect() : shouldCloseOnSelect;
     if (hasTime) {
-      if (range.start && range.end && timeRange?.start && timeRange?.end) {
-        commitValue(range, timeRange);
+      if (shouldClose || (range.start && range.end && timeRange?.start && timeRange?.end)) {
+        commitValue(range, {
+          start: timeRange?.start || getPlaceholderTime(props.placeholderValue),
+          end: timeRange?.end || getPlaceholderTime(props.placeholderValue)
+        });
       } else {
@@ -104,3 +118,3 @@ setSelectedDateRange(range);
 
-    if (!hasTime) {
+    if (shouldClose) {
       setOpen(false);
@@ -131,2 +145,3 @@ }
     granularity,
+    hasTime,
     setDate(part, date) {
@@ -133,0 +148,0 @@ setDateRange({...dateRange, [part]: date});

src/useTimeFieldState.ts

@@ -13,4 +13,4 @@ /*
 
-import {Calendar, getLocalTimeZone, Time, toCalendarDateTime, today, toTime} from '@internationalized/date';
 import {DateValue, TimePickerProps, TimeValue} from '@react-types/datepicker';
+import {getLocalTimeZone, GregorianCalendar, Time, toCalendarDateTime, today, toTime} from '@internationalized/date';
 import {useControlledState} from '@react-stately/utils';
@@ -21,4 +21,3 @@ import {useDatePickerFieldState} from '.';
 interface TimeFieldProps<T extends TimeValue> extends TimePickerProps<T> {
-  locale: string,
-  createCalendar: (name: string) => Calendar
+  locale: string
 }
@@ -60,3 +59,5 @@
     maxGranularity: 'hour',
-    placeholderValue: placeholderDate
+    placeholderValue: placeholderDate,
+    // Calendar should not matter for time fields.
+    createCalendar: () => new GregorianCalendar()
   });
@@ -63,0 +64,0 @@ }

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

247628

increased by3.95%

Lines of code

2458

increased by3.58%

Dependency changes

• Updated@internationalized/date@3.0.0-nightly.3148+320c69908

• Updated@react-stately/utils@3.0.0-nightly.1452+320c69908

• Updated@react-types/datepicker@3.0.0-nightly.3148+320c69908

• Updated@react-types/shared@3.0.0-nightly.1452+320c69908