@react-aria/datepicker - npm Package Compare versions

Comparing version 3.0.0-nightly-25f304dea-241008 to 3.0.0-nightly-426bff12a-241106

dist/types.d.ts

@@ -65,3 +65,3 @@ import { AriaDateFieldProps, AriaTimeFieldProps, DateValue, TimeValue, AriaDatePickerProps, AriaDateRangePickerProps } from "@react-types/datepicker";
 interface DisplayNames {
-    of(field: Field): string;
+    of(field: Field): string | undefined;
 }
@@ -68,0 +68,0 @@ /** @private */

dist/useDatePickerGroup.main.js

@@ -50,2 +50,3 @@ var $19S5E$reactariafocus = require("@react-aria/focus");
         var _window_event;
+        if (!ref.current) return;
         // Try to find the segment prior to the element that was clicked on.
@@ -52,0 +53,0 @@ let target = (_window_event = window.event) === null || _window_event === void 0 ? void 0 : _window_event.target;

dist/useDatePickerGroup.module.js

@@ -44,2 +44,3 @@ import {createFocusManager as $7CEvq$createFocusManager, getFocusableTreeWalker as $7CEvq$getFocusableTreeWalker} from "@react-aria/focus";
         var _window_event;
+        if (!ref.current) return;
         // Try to find the segment prior to the element that was clicked on.
@@ -46,0 +47,0 @@ let target = (_window_event = window.event) === null || _window_event === void 0 ? void 0 : _window_event.target;

dist/useDateSegment.main.js

@@ -89,7 +89,7 @@ var $4acc2f407c169e55$exports = require("./useDateField.main.js");
             enteredKeys.current = '';
-            state.setSegment(segment.type, segment.maxValue);
+            if (segment.maxValue !== undefined) state.setSegment(segment.type, segment.maxValue);
         },
         onDecrementToMin: ()=>{
             enteredKeys.current = '';
-            state.setSegment(segment.type, segment.minValue);
+            if (segment.minValue !== undefined) state.setSegment(segment.type, segment.minValue);
         }
@@ -224,8 +224,8 @@ });
                         }
-                        if (segment.value >= 12 && numberValue > 1) numberValue += 12;
-                    } else if (numberValue > segment.maxValue) segmentValue = parser.parse(key);
+                        if (segment.value !== undefined && segment.value >= 12 && numberValue > 1) numberValue += 12;
+                    } else if (segment.maxValue !== undefined && numberValue > segment.maxValue) segmentValue = parser.parse(key);
                     if (isNaN(numberValue)) return;
                     let shouldSetValue = segmentValue !== 0 || allowsZero;
                     if (shouldSetValue) state.setSegment(segment.type, segmentValue);
-                    if (Number(numberValue + '0') > segment.maxValue || newValue.length >= String(segment.maxValue).length) {
+                    if (segment.maxValue !== undefined && (Number(numberValue + '0') > segment.maxValue || newValue.length >= String(segment.maxValue).length)) {
                         enteredKeys.current = '';
@@ -240,3 +240,3 @@ if (shouldSetValue) focusManager.focusNext();
         enteredKeys.current = '';
-        (0, $5Tgzj$reactariautils.scrollIntoViewport)(ref.current, {
+        if (ref.current) (0, $5Tgzj$reactariautils.scrollIntoViewport)(ref.current, {
             containingElement: (0, $5Tgzj$reactariautils.getScrollParent)(ref.current)
@@ -246,6 +246,7 @@ });
         let selection = window.getSelection();
-        selection.collapse(ref.current);
+        selection === null || selection === void 0 ? void 0 : selection.collapse(ref.current);
     };
     let documentRef = (0, $5Tgzj$react.useRef)(typeof document !== 'undefined' ? document : null);
     (0, $5Tgzj$reactariautils.useEvent)(documentRef, 'selectionchange', ()=>{
+        var _ref_current;
         // Enforce that the selection is collapsed when inside a date segment.
@@ -255,7 +256,7 @@ // Otherwise, when tapping on a segment in Android Chrome and then entering text,
         let selection = window.getSelection();
-        if (ref.current && ref.current.contains(selection.anchorNode)) selection.collapse(ref.current);
+        if ((selection === null || selection === void 0 ? void 0 : selection.anchorNode) && ((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.contains(selection === null || selection === void 0 ? void 0 : selection.anchorNode))) selection.collapse(ref.current);
     });
     let compositionRef = (0, $5Tgzj$react.useRef)('');
-    // @ts-ignore - TODO: possibly old TS version? doesn't fail in my editor...
     (0, $5Tgzj$reactariautils.useEvent)(ref, 'beforeinput', (e)=>{
+        if (!ref.current) return;
         e.preventDefault();
@@ -285,6 +286,6 @@ switch(e.inputType){
                 // Reset the DOM to how it was in the beforeinput event.
-                ref.current.textContent = compositionRef.current;
+                if (ref.current) ref.current.textContent = compositionRef.current;
                 // Android sometimes fires key presses of letters as composition events. Need to handle am/pm keys here too.
                 // Can also happen e.g. with Pinyin keyboard on iOS.
-                if (startsWith(am, data) || startsWith(pm, data)) onInput(data);
+                if (data != null && (startsWith(am, data) || startsWith(pm, data))) onInput(data);
                 break;
@@ -291,0 +292,0 @@ }

dist/useDateSegment.module.js

@@ -79,7 +79,7 @@ import {hookData as $16f0b7bb276bc17e$export$653eddfc964b0f8a} from "./useDateField.module.js";
             enteredKeys.current = '';
-            state.setSegment(segment.type, segment.maxValue);
+            if (segment.maxValue !== undefined) state.setSegment(segment.type, segment.maxValue);
         },
         onDecrementToMin: ()=>{
             enteredKeys.current = '';
-            state.setSegment(segment.type, segment.minValue);
+            if (segment.minValue !== undefined) state.setSegment(segment.type, segment.minValue);
         }
@@ -214,8 +214,8 @@ });
                         }
-                        if (segment.value >= 12 && numberValue > 1) numberValue += 12;
-                    } else if (numberValue > segment.maxValue) segmentValue = parser.parse(key);
+                        if (segment.value !== undefined && segment.value >= 12 && numberValue > 1) numberValue += 12;
+                    } else if (segment.maxValue !== undefined && numberValue > segment.maxValue) segmentValue = parser.parse(key);
                     if (isNaN(numberValue)) return;
                     let shouldSetValue = segmentValue !== 0 || allowsZero;
                     if (shouldSetValue) state.setSegment(segment.type, segmentValue);
-                    if (Number(numberValue + '0') > segment.maxValue || newValue.length >= String(segment.maxValue).length) {
+                    if (segment.maxValue !== undefined && (Number(numberValue + '0') > segment.maxValue || newValue.length >= String(segment.maxValue).length)) {
                         enteredKeys.current = '';
@@ -230,3 +230,3 @@ if (shouldSetValue) focusManager.focusNext();
         enteredKeys.current = '';
-        (0, $4d1jn$scrollIntoViewport)(ref.current, {
+        if (ref.current) (0, $4d1jn$scrollIntoViewport)(ref.current, {
             containingElement: (0, $4d1jn$getScrollParent)(ref.current)
@@ -236,6 +236,7 @@ });
         let selection = window.getSelection();
-        selection.collapse(ref.current);
+        selection === null || selection === void 0 ? void 0 : selection.collapse(ref.current);
     };
     let documentRef = (0, $4d1jn$useRef)(typeof document !== 'undefined' ? document : null);
     (0, $4d1jn$useEvent)(documentRef, 'selectionchange', ()=>{
+        var _ref_current;
         // Enforce that the selection is collapsed when inside a date segment.
@@ -245,7 +246,7 @@ // Otherwise, when tapping on a segment in Android Chrome and then entering text,
         let selection = window.getSelection();
-        if (ref.current && ref.current.contains(selection.anchorNode)) selection.collapse(ref.current);
+        if ((selection === null || selection === void 0 ? void 0 : selection.anchorNode) && ((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.contains(selection === null || selection === void 0 ? void 0 : selection.anchorNode))) selection.collapse(ref.current);
     });
     let compositionRef = (0, $4d1jn$useRef)('');
-    // @ts-ignore - TODO: possibly old TS version? doesn't fail in my editor...
     (0, $4d1jn$useEvent)(ref, 'beforeinput', (e)=>{
+        if (!ref.current) return;
         e.preventDefault();
@@ -275,6 +276,6 @@ switch(e.inputType){
                 // Reset the DOM to how it was in the beforeinput event.
-                ref.current.textContent = compositionRef.current;
+                if (ref.current) ref.current.textContent = compositionRef.current;
                 // Android sometimes fires key presses of letters as composition events. Need to handle am/pm keys here too.
                 // Can also happen e.g. with Pinyin keyboard on iOS.
-                if (startsWith(am, data) || startsWith(pm, data)) onInput(data);
+                if (data != null && (startsWith(am, data) || startsWith(pm, data))) onInput(data);
                 break;
@@ -281,0 +282,0 @@ }

dist/useDisplayNames.main.js

@@ -36,7 +36,6 @@ var $c1905b78f6d2f5bf$exports = require("./intlStrings.main.js");
         try {
-            // @ts-ignore
             return new Intl.DisplayNames(locale, {
                 type: 'dateTimeField'
             });
-        } catch (err) {
+        } catch  {
             return new $934ac650a0aceb4b$var$DisplayNamesPolyfill(locale, dictionary);
@@ -43,0 +42,0 @@ }

dist/useDisplayNames.module.js

@@ -30,7 +30,6 @@ import $jR5iF$intlStringsmodulejs from "./intlStrings.module.js";
         try {
-            // @ts-ignore
             return new Intl.DisplayNames(locale, {
                 type: 'dateTimeField'
             });
-        } catch (err) {
+        } catch  {
             return new $3aeceb3a64eb8358$var$DisplayNamesPolyfill(locale, dictionary);
@@ -37,0 +36,0 @@ }

package.json

 {
   "name": "@react-aria/datepicker",
-  "version": "3.0.0-nightly-25f304dea-241008",
+  "version": "3.0.0-nightly-426bff12a-241106",
   "description": "Spectrum UI components in React",
@@ -25,19 +25,19 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@internationalized/date": "^3.0.0-nightly-25f304dea-241008",
-    "@internationalized/number": "^3.0.0-nightly-25f304dea-241008",
-    "@internationalized/string": "^3.0.0-nightly-25f304dea-241008",
-    "@react-aria/focus": "^3.0.0-nightly-25f304dea-241008",
-    "@react-aria/form": "^3.0.0-nightly-25f304dea-241008",
-    "@react-aria/i18n": "^3.0.0-nightly-25f304dea-241008",
-    "@react-aria/interactions": "^3.0.0-nightly-25f304dea-241008",
-    "@react-aria/label": "^3.0.0-nightly-25f304dea-241008",
-    "@react-aria/spinbutton": "^3.0.0-nightly-25f304dea-241008",
-    "@react-aria/utils": "^3.0.0-nightly-25f304dea-241008",
-    "@react-stately/datepicker": "^3.0.0-nightly-25f304dea-241008",
-    "@react-stately/form": "^3.0.0-nightly-25f304dea-241008",
-    "@react-types/button": "^3.0.0-nightly-25f304dea-241008",
-    "@react-types/calendar": "^3.0.0-nightly-25f304dea-241008",
-    "@react-types/datepicker": "^3.0.0-nightly-25f304dea-241008",
-    "@react-types/dialog": "^3.0.0-nightly-25f304dea-241008",
-    "@react-types/shared": "^3.0.0-nightly-25f304dea-241008",
+    "@internationalized/date": "^3.0.0-nightly-426bff12a-241106",
+    "@internationalized/number": "^3.0.0-nightly-426bff12a-241106",
+    "@internationalized/string": "^3.0.0-nightly-426bff12a-241106",
+    "@react-aria/focus": "^3.0.0-nightly-426bff12a-241106",
+    "@react-aria/form": "^3.0.0-nightly-426bff12a-241106",
+    "@react-aria/i18n": "^3.0.0-nightly-426bff12a-241106",
+    "@react-aria/interactions": "^3.0.0-nightly-426bff12a-241106",
+    "@react-aria/label": "^3.0.0-nightly-426bff12a-241106",
+    "@react-aria/spinbutton": "^3.0.0-nightly-426bff12a-241106",
+    "@react-aria/utils": "^3.0.0-nightly-426bff12a-241106",
+    "@react-stately/datepicker": "^3.0.0-nightly-426bff12a-241106",
+    "@react-stately/form": "^3.0.0-nightly-426bff12a-241106",
+    "@react-types/button": "^3.0.0-nightly-426bff12a-241106",
+    "@react-types/calendar": "^3.0.0-nightly-426bff12a-241106",
+    "@react-types/datepicker": "^3.0.0-nightly-426bff12a-241106",
+    "@react-types/dialog": "^3.0.0-nightly-426bff12a-241106",
+    "@react-types/shared": "^3.0.0-nightly-426bff12a-241106",
     "@swc/helpers": "^0.5.0"
@@ -52,3 +52,3 @@ },
   },
-  "stableVersion": "3.11.3"
+  "stableVersion": "3.11.4"
 }

src/useDateField.ts

@@ -48,5 +48,5 @@ /*
 interface HookData {
-  ariaLabel: string,
-  ariaLabelledBy: string,
-  ariaDescribedBy: string,
+  ariaLabel?: string,
+  ariaLabelledBy?: string,
+  ariaDescribedBy?: string,
   focusManager: FocusManager
@@ -53,0 +53,0 @@ }

src/useDatePickerGroup.ts

@@ -53,2 +53,5 @@ import {createFocusManager, getFocusableTreeWalker} from '@react-aria/focus';
   let focusLast = () => {
+    if (!ref.current) {
+      return;
+    }
     // Try to find the segment prior to the element that was clicked on.
@@ -55,0 +58,0 @@ let target = window.event?.target as FocusableElement;

src/useDateSegment.ts

@@ -38,3 +38,3 @@ /*
   let displayNames = useDisplayNames();
-  let {ariaLabel, ariaLabelledBy, ariaDescribedBy, focusManager} = hookData.get(state);
+  let {ariaLabel, ariaLabelledBy, ariaDescribedBy, focusManager} = hookData.get(state)!;
 
@@ -86,7 +86,11 @@ let textValue = segment.isPlaceholder ? '' : segment.text;
       enteredKeys.current = '';
-      state.setSegment(segment.type, segment.maxValue);
+      if (segment.maxValue !== undefined) {
+        state.setSegment(segment.type, segment.maxValue);
+      }
     },
     onDecrementToMin: () => {
       enteredKeys.current = '';
-      state.setSegment(segment.type, segment.minValue);
+      if (segment.minValue !== undefined) {
+        state.setSegment(segment.type, segment.minValue);
+      }
     }
@@ -145,3 +149,3 @@ });
     date.setHours(0);
-    return amPmFormatter.formatToParts(date).find(part => part.type === 'dayPeriod').value;
+    return amPmFormatter.formatToParts(date).find(part => part.type === 'dayPeriod')!.value;
   }, [amPmFormatter]);
@@ -152,3 +156,3 @@
     date.setHours(12);
-    return amPmFormatter.formatToParts(date).find(part => part.type === 'dayPeriod').value;
+    return amPmFormatter.formatToParts(date).find(part => part.type === 'dayPeriod')!.value;
   }, [amPmFormatter]);
@@ -167,3 +171,3 @@
       let parts = eraFormatter.formatToParts(eraDate);
-      let formatted = parts.find(p => p.type === 'era').value;
+      let formatted = parts.find(p => p.type === 'era')!.value;
       return {era, formatted};
@@ -239,6 +243,6 @@ });
 
-          if (segment.value >= 12 && numberValue > 1) {
+          if (segment.value !== undefined && segment.value >= 12 && numberValue > 1) {
             numberValue += 12;
           }
-        } else if (numberValue > segment.maxValue) {
+        } else if (segment.maxValue !== undefined && numberValue > segment.maxValue) {
           segmentValue = parser.parse(key);
@@ -256,3 +260,3 @@ }
 
-        if (Number(numberValue + '0') > segment.maxValue || newValue.length >= String(segment.maxValue).length) {
+        if (segment.maxValue !== undefined && (Number(numberValue + '0') > segment.maxValue || newValue.length >= String(segment.maxValue).length)) {
           enteredKeys.current = '';
@@ -272,7 +276,9 @@ if (shouldSetValue) {
     enteredKeys.current = '';
-    scrollIntoViewport(ref.current, {containingElement: getScrollParent(ref.current)});
+    if (ref.current) {
+      scrollIntoViewport(ref.current, {containingElement: getScrollParent(ref.current)});
+    }
 
     // Collapse selection to start or Chrome won't fire input events.
     let selection = window.getSelection();
-    selection.collapse(ref.current);
+    selection?.collapse(ref.current);
   };
@@ -286,3 +292,3 @@
     let selection = window.getSelection();
-    if (ref.current && ref.current.contains(selection.anchorNode)) {
+    if (selection?.anchorNode && ref.current?.contains(selection?.anchorNode)) {
       selection.collapse(ref.current);
@@ -292,5 +298,7 @@ }
 
-  let compositionRef = useRef('');
-  // @ts-ignore - TODO: possibly old TS version? doesn't fail in my editor...
+  let compositionRef = useRef<string | null>('');
   useEvent(ref, 'beforeinput', e => {
+    if (!ref.current) {
+      return;
+    }
     e.preventDefault();
@@ -322,12 +330,14 @@
 
-  useEvent(ref, 'input', (e: InputEvent) => {
-    let {inputType, data} = e;
+  useEvent(ref, 'input', e => {
+    let {inputType, data} = e as InputEvent;
     switch (inputType) {
       case 'insertCompositionText':
         // Reset the DOM to how it was in the beforeinput event.
-        ref.current.textContent = compositionRef.current;
+        if (ref.current) {
+          ref.current.textContent = compositionRef.current;
+        }
 
         // Android sometimes fires key presses of letters as composition events. Need to handle am/pm keys here too.
         // Can also happen e.g. with Pinyin keyboard on iOS.
-        if (startsWith(am, data) || startsWith(pm, data)) {
+        if (data != null && (startsWith(am, data) || startsWith(pm, data))) {
           onInput(data);
@@ -334,0 +344,0 @@ }

src/useDisplayNames.ts

@@ -21,3 +21,3 @@ /*
 interface DisplayNames {
-  of(field: Field): string
+  of(field: Field): string | undefined
 }
@@ -33,5 +33,4 @@
     try {
-      // @ts-ignore
       return new Intl.DisplayNames(locale, {type: 'dateTimeField'});
-    } catch (err) {
+    } catch {
       return new DisplayNamesPolyfill(locale, dictionary);
@@ -38,0 +37,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

536515

increased by0.56%

Lines of code

6478

increased by0.23%

Dependency changes

• Updated@internationalized/date@^3.0.0-nightly-426bff12a-241106

• Updated@internationalized/number@^3.0.0-nightly-426bff12a-241106

• Updated@internationalized/string@^3.0.0-nightly-426bff12a-241106

• Updated@react-aria/focus@^3.0.0-nightly-426bff12a-241106

• Updated@react-aria/form@^3.0.0-nightly-426bff12a-241106

• Updated@react-aria/i18n@^3.0.0-nightly-426bff12a-241106

• Updated@react-aria/interactions@^3.0.0-nightly-426bff12a-241106

• Updated@react-aria/label@^3.0.0-nightly-426bff12a-241106

• Updated@react-aria/spinbutton@^3.0.0-nightly-426bff12a-241106

• Updated@react-aria/utils@^3.0.0-nightly-426bff12a-241106

• Updated@react-stately/datepicker@^3.0.0-nightly-426bff12a-241106

• Updated@react-stately/form@^3.0.0-nightly-426bff12a-241106

• Updated@react-types/button@^3.0.0-nightly-426bff12a-241106

• Updated@react-types/calendar@^3.0.0-nightly-426bff12a-241106

• Updated@react-types/datepicker@^3.0.0-nightly-426bff12a-241106

• Updated@react-types/dialog@^3.0.0-nightly-426bff12a-241106

• Updated@react-types/shared@^3.0.0-nightly-426bff12a-241106