@react-stately/datepicker - npm Package Compare versions

Comparing version 3.0.0-nightly-7eae25e12-241205 to 3.0.0-nightly-801ef48a8-250207

dist/placeholders.main.js

@@ -230,3 +230,3 @@ var $gtnqm$internationalizedstring = require("@internationalized/string");
     ja: {
-        year: " \u5E74 ",
+        year: "\u5E74",
         month: "\u6708",
@@ -233,0 +233,0 @@ day: "\u65E5"

dist/placeholders.module.js

@@ -224,3 +224,3 @@ import {LocalizedStringDictionary as $bzTv4$LocalizedStringDictionary} from "@internationalized/string";
     ja: {
-        year: " \u5E74 ",
+        year: "\u5E74",
         month: "\u6708",
@@ -227,0 +227,0 @@ day: "\u65E5"

dist/useDateFieldState.main.js

@@ -171,16 +171,3 @@ var $50d5d6a623389320$exports = require("./utils.main.js");
     ]);
-    let segments = (0, $iqS8N$react.useMemo)(()=>dateFormatter.formatToParts(dateValue).map((segment)=>{
-            let isEditable = $596a1f0f523d6752$var$EDITABLE_SEGMENTS[segment.type];
-            if (segment.type === 'era' && calendar.getEras().length === 1) isEditable = false;
-            let isPlaceholder = $596a1f0f523d6752$var$EDITABLE_SEGMENTS[segment.type] && !validSegments[segment.type];
-            let placeholder = $596a1f0f523d6752$var$EDITABLE_SEGMENTS[segment.type] ? (0, $e1e8ada727fae1a1$exports.getPlaceholder)(segment.type, segment.value, locale) : null;
-            return {
-                type: $596a1f0f523d6752$var$TYPE_MAPPING[segment.type] || segment.type,
-                text: isPlaceholder ? placeholder : segment.value,
-                ...$596a1f0f523d6752$var$getSegmentLimits(displayValue, segment.type, resolvedOptions),
-                isPlaceholder: isPlaceholder,
-                placeholder: placeholder,
-                isEditable: isEditable
-            };
-        }), [
+    let segments = (0, $iqS8N$react.useMemo)(()=>$596a1f0f523d6752$var$processSegments(dateValue, validSegments, dateFormatter, resolvedOptions, displayValue, calendar, locale, granularity), [
         dateValue,
@@ -192,3 +179,4 @@ validSegments,
         calendar,
-        locale
+        locale,
+        granularity
     ]);
@@ -300,3 +288,6 @@ // When the era field appears, mark it valid if the year field is already valid.
                 });
-            } else if (part in displayValue) value = displayValue.set({
+            } else if (part === 'hour' && 'hour' in displayValue && displayValue.hour >= 12 && validSegments.dayPeriod) value = displayValue.set({
+                hour: placeholder['hour'] + 12
+            });
+            else if (part in displayValue) value = displayValue.set({
                 [part]: placeholder[part]
@@ -323,2 +314,62 @@ });
 }
+function $596a1f0f523d6752$var$processSegments(dateValue, validSegments, dateFormatter, resolvedOptions, displayValue, calendar, locale, granularity) {
+    let timeValue = [
+        'hour',
+        'minute',
+        'second'
+    ];
+    let segments = dateFormatter.formatToParts(dateValue);
+    let processedSegments = [];
+    for (let segment of segments){
+        let isEditable = $596a1f0f523d6752$var$EDITABLE_SEGMENTS[segment.type];
+        if (segment.type === 'era' && calendar.getEras().length === 1) isEditable = false;
+        let isPlaceholder = $596a1f0f523d6752$var$EDITABLE_SEGMENTS[segment.type] && !validSegments[segment.type];
+        let placeholder = $596a1f0f523d6752$var$EDITABLE_SEGMENTS[segment.type] ? (0, $e1e8ada727fae1a1$exports.getPlaceholder)(segment.type, segment.value, locale) : null;
+        let dateSegment = {
+            type: $596a1f0f523d6752$var$TYPE_MAPPING[segment.type] || segment.type,
+            text: isPlaceholder ? placeholder : segment.value,
+            ...$596a1f0f523d6752$var$getSegmentLimits(displayValue, segment.type, resolvedOptions),
+            isPlaceholder: isPlaceholder,
+            placeholder: placeholder,
+            isEditable: isEditable
+        };
+        // There is an issue in RTL languages where time fields render (minute:hour) instead of (hour:minute).
+        // To force an LTR direction on the time field since, we wrap the time segments in LRI (left-to-right) isolate unicode. See https://www.w3.org/International/questions/qa-bidi-unicode-controls.
+        // These unicode characters will be added to the array of processed segments as literals and will mark the start and end of the embedded direction change. 
+        if (segment.type === 'hour') {
+            // This marks the start of the embedded direction change. 
+            processedSegments.push({
+                type: 'literal',
+                text: '\u2066',
+                ...$596a1f0f523d6752$var$getSegmentLimits(displayValue, 'literal', resolvedOptions),
+                isPlaceholder: false,
+                placeholder: '',
+                isEditable: false
+            });
+            processedSegments.push(dateSegment);
+            // This marks the end of the embedded direction change in the case that the granularity it set to "hour".
+            if (segment.type === granularity) processedSegments.push({
+                type: 'literal',
+                text: '\u2069',
+                ...$596a1f0f523d6752$var$getSegmentLimits(displayValue, 'literal', resolvedOptions),
+                isPlaceholder: false,
+                placeholder: '',
+                isEditable: false
+            });
+        } else if (timeValue.includes(segment.type) && segment.type === granularity) {
+            processedSegments.push(dateSegment);
+            // This marks the end of the embedded direction change.
+            processedSegments.push({
+                type: 'literal',
+                text: '\u2069',
+                ...$596a1f0f523d6752$var$getSegmentLimits(displayValue, 'literal', resolvedOptions),
+                isPlaceholder: false,
+                placeholder: '',
+                isEditable: false
+            });
+        } else // We only want to "wrap" the unicode around segments that are hour, minute, or second. If they aren't, just process as normal. 
+        processedSegments.push(dateSegment);
+    }
+    return processedSegments;
+}
 function $596a1f0f523d6752$var$getSegmentLimits(date, type, options) {
@@ -325,0 +376,0 @@ switch(type){

dist/useDateFieldState.module.js

@@ -165,16 +165,3 @@ import {convertValue as $35a22f14a1f04b11$export$61a490a80c552550, createPlaceholderDate as $35a22f14a1f04b11$export$66aa2b09de4b1ea5, getFormatOptions as $35a22f14a1f04b11$export$7e319ea407e63bc0, getValidationResult as $35a22f14a1f04b11$export$f18627323ab57ac0, useDefaultProps as $35a22f14a1f04b11$export$2440da353cedad43} from "./utils.module.js";
     ]);
-    let segments = (0, $g03ag$useMemo)(()=>dateFormatter.formatToParts(dateValue).map((segment)=>{
-            let isEditable = $3c0fc76039f1c516$var$EDITABLE_SEGMENTS[segment.type];
-            if (segment.type === 'era' && calendar.getEras().length === 1) isEditable = false;
-            let isPlaceholder = $3c0fc76039f1c516$var$EDITABLE_SEGMENTS[segment.type] && !validSegments[segment.type];
-            let placeholder = $3c0fc76039f1c516$var$EDITABLE_SEGMENTS[segment.type] ? (0, $3e3ed55ab2966714$export$d3f5c5e0a5023fa0)(segment.type, segment.value, locale) : null;
-            return {
-                type: $3c0fc76039f1c516$var$TYPE_MAPPING[segment.type] || segment.type,
-                text: isPlaceholder ? placeholder : segment.value,
-                ...$3c0fc76039f1c516$var$getSegmentLimits(displayValue, segment.type, resolvedOptions),
-                isPlaceholder: isPlaceholder,
-                placeholder: placeholder,
-                isEditable: isEditable
-            };
-        }), [
+    let segments = (0, $g03ag$useMemo)(()=>$3c0fc76039f1c516$var$processSegments(dateValue, validSegments, dateFormatter, resolvedOptions, displayValue, calendar, locale, granularity), [
         dateValue,
@@ -186,3 +173,4 @@ validSegments,
         calendar,
-        locale
+        locale,
+        granularity
     ]);
@@ -294,3 +282,6 @@ // When the era field appears, mark it valid if the year field is already valid.
                 });
-            } else if (part in displayValue) value = displayValue.set({
+            } else if (part === 'hour' && 'hour' in displayValue && displayValue.hour >= 12 && validSegments.dayPeriod) value = displayValue.set({
+                hour: placeholder['hour'] + 12
+            });
+            else if (part in displayValue) value = displayValue.set({
                 [part]: placeholder[part]
@@ -317,2 +308,62 @@ });
 }
+function $3c0fc76039f1c516$var$processSegments(dateValue, validSegments, dateFormatter, resolvedOptions, displayValue, calendar, locale, granularity) {
+    let timeValue = [
+        'hour',
+        'minute',
+        'second'
+    ];
+    let segments = dateFormatter.formatToParts(dateValue);
+    let processedSegments = [];
+    for (let segment of segments){
+        let isEditable = $3c0fc76039f1c516$var$EDITABLE_SEGMENTS[segment.type];
+        if (segment.type === 'era' && calendar.getEras().length === 1) isEditable = false;
+        let isPlaceholder = $3c0fc76039f1c516$var$EDITABLE_SEGMENTS[segment.type] && !validSegments[segment.type];
+        let placeholder = $3c0fc76039f1c516$var$EDITABLE_SEGMENTS[segment.type] ? (0, $3e3ed55ab2966714$export$d3f5c5e0a5023fa0)(segment.type, segment.value, locale) : null;
+        let dateSegment = {
+            type: $3c0fc76039f1c516$var$TYPE_MAPPING[segment.type] || segment.type,
+            text: isPlaceholder ? placeholder : segment.value,
+            ...$3c0fc76039f1c516$var$getSegmentLimits(displayValue, segment.type, resolvedOptions),
+            isPlaceholder: isPlaceholder,
+            placeholder: placeholder,
+            isEditable: isEditable
+        };
+        // There is an issue in RTL languages where time fields render (minute:hour) instead of (hour:minute).
+        // To force an LTR direction on the time field since, we wrap the time segments in LRI (left-to-right) isolate unicode. See https://www.w3.org/International/questions/qa-bidi-unicode-controls.
+        // These unicode characters will be added to the array of processed segments as literals and will mark the start and end of the embedded direction change. 
+        if (segment.type === 'hour') {
+            // This marks the start of the embedded direction change. 
+            processedSegments.push({
+                type: 'literal',
+                text: '\u2066',
+                ...$3c0fc76039f1c516$var$getSegmentLimits(displayValue, 'literal', resolvedOptions),
+                isPlaceholder: false,
+                placeholder: '',
+                isEditable: false
+            });
+            processedSegments.push(dateSegment);
+            // This marks the end of the embedded direction change in the case that the granularity it set to "hour".
+            if (segment.type === granularity) processedSegments.push({
+                type: 'literal',
+                text: '\u2069',
+                ...$3c0fc76039f1c516$var$getSegmentLimits(displayValue, 'literal', resolvedOptions),
+                isPlaceholder: false,
+                placeholder: '',
+                isEditable: false
+            });
+        } else if (timeValue.includes(segment.type) && segment.type === granularity) {
+            processedSegments.push(dateSegment);
+            // This marks the end of the embedded direction change.
+            processedSegments.push({
+                type: 'literal',
+                text: '\u2069',
+                ...$3c0fc76039f1c516$var$getSegmentLimits(displayValue, 'literal', resolvedOptions),
+                isPlaceholder: false,
+                placeholder: '',
+                isEditable: false
+            });
+        } else // We only want to "wrap" the unicode around segments that are hour, minute, or second. If they aren't, just process as normal. 
+        processedSegments.push(dateSegment);
+    }
+    return processedSegments;
+}
 function $3c0fc76039f1c516$var$getSegmentLimits(date, type, options) {
@@ -319,0 +370,0 @@ switch(type){

package.json

 {
   "name": "@react-stately/datepicker",
-  "version": "3.0.0-nightly-7eae25e12-241205",
+  "version": "3.0.0-nightly-801ef48a8-250207",
   "description": "Spectrum UI components in React",
@@ -25,9 +25,9 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@internationalized/date": "^3.0.0-nightly-7eae25e12-241205",
-    "@internationalized/string": "^3.0.0-nightly-7eae25e12-241205",
-    "@react-stately/form": "^3.0.0-nightly-7eae25e12-241205",
-    "@react-stately/overlays": "^3.0.0-nightly-7eae25e12-241205",
-    "@react-stately/utils": "^3.0.0-nightly-7eae25e12-241205",
-    "@react-types/datepicker": "^3.0.0-nightly-7eae25e12-241205",
-    "@react-types/shared": "^3.0.0-nightly-7eae25e12-241205",
+    "@internationalized/date": "3.0.0-nightly-801ef48a8-250207",
+    "@internationalized/string": "3.0.0-nightly-801ef48a8-250207",
+    "@react-stately/form": "3.0.0-nightly-801ef48a8-250207",
+    "@react-stately/overlays": "3.0.0-nightly-801ef48a8-250207",
+    "@react-stately/utils": "3.0.0-nightly-801ef48a8-250207",
+    "@react-types/datepicker": "3.0.0-nightly-801ef48a8-250207",
+    "@react-types/shared": "3.0.0-nightly-801ef48a8-250207",
     "@swc/helpers": "^0.5.0"
@@ -40,4 +40,3 @@ },
     "access": "public"
-  },
-  "stableVersion": "3.11.0"
+  }
 }

src/placeholders.ts

@@ -60,3 +60,3 @@ /*
   it: {year: 'aaaa', month: 'mm', day: 'gg'},
-  ja: {year: ' 年 ', month: '月', day: '日'},
+  ja: {year: '年', month: '月', day: '日'},
   ka: {year: 'წწწწ', month: 'თთ', day: 'რრ'},
@@ -63,0 +63,0 @@ kk: {year: 'жжжж', month: 'аа', day: 'кк'},

src/useDateFieldState.ts

@@ -271,23 +271,6 @@ /*
   let dateValue = useMemo(() => displayValue.toDate(timeZone), [displayValue, timeZone]);
-  let segments = useMemo(() =>
-    dateFormatter.formatToParts(dateValue)
-      .map(segment => {
-        let isEditable = EDITABLE_SEGMENTS[segment.type];
-        if (segment.type === 'era' && calendar.getEras().length === 1) {
-          isEditable = false;
-        }
+  let segments = useMemo(() => 
+    processSegments(dateValue, validSegments, dateFormatter, resolvedOptions, displayValue, calendar, locale, granularity), 
+    [dateValue, validSegments, dateFormatter, resolvedOptions, displayValue, calendar, locale, granularity]);
 
-        let isPlaceholder = EDITABLE_SEGMENTS[segment.type] && !validSegments[segment.type];
-        let placeholder = EDITABLE_SEGMENTS[segment.type] ? getPlaceholder(segment.type, segment.value, locale) : null;
-        return {
-          type: TYPE_MAPPING[segment.type] || segment.type,
-          text: isPlaceholder ? placeholder : segment.value,
-          ...getSegmentLimits(displayValue, segment.type, resolvedOptions),
-          isPlaceholder,
-          placeholder,
-          isEditable
-        } as DateSegment;
-      })
-  , [dateValue, validSegments, dateFormatter, resolvedOptions, displayValue, calendar, locale]);
-
   // When the era field appears, mark it valid if the year field is already valid.
@@ -403,2 +386,4 @@ // If the era field disappears, remove it from the valid segments.
         }
+      } else if (part === 'hour' && 'hour' in displayValue && displayValue.hour >= 12 && validSegments.dayPeriod) {
+        value = displayValue.set({hour: placeholder['hour'] + 12});
       } else if (part in displayValue) {
@@ -428,2 +413,69 @@ value = displayValue.set({[part]: placeholder[part]});
 
+function processSegments(dateValue, validSegments, dateFormatter, resolvedOptions, displayValue, calendar, locale, granularity) : DateSegment[] {
+  let timeValue = ['hour', 'minute', 'second'];
+  let segments = dateFormatter.formatToParts(dateValue);
+  let processedSegments: DateSegment[] = [];
+  for (let segment of segments) {
+    let isEditable = EDITABLE_SEGMENTS[segment.type];
+    if (segment.type === 'era' && calendar.getEras().length === 1) {
+      isEditable = false;
+    }
+
+    let isPlaceholder = EDITABLE_SEGMENTS[segment.type] && !validSegments[segment.type];
+    let placeholder = EDITABLE_SEGMENTS[segment.type] ? getPlaceholder(segment.type, segment.value, locale) : null;
+
+    let dateSegment = {
+      type: TYPE_MAPPING[segment.type] || segment.type,
+      text: isPlaceholder ? placeholder : segment.value,
+      ...getSegmentLimits(displayValue, segment.type, resolvedOptions),
+      isPlaceholder,
+      placeholder,
+      isEditable
+    } as DateSegment;
+
+    // There is an issue in RTL languages where time fields render (minute:hour) instead of (hour:minute).
+    // To force an LTR direction on the time field since, we wrap the time segments in LRI (left-to-right) isolate unicode. See https://www.w3.org/International/questions/qa-bidi-unicode-controls.
+    // These unicode characters will be added to the array of processed segments as literals and will mark the start and end of the embedded direction change. 
+    if (segment.type === 'hour') {
+      // This marks the start of the embedded direction change. 
+      processedSegments.push({
+        type: 'literal',
+        text: '\u2066',
+        ...getSegmentLimits(displayValue, 'literal', resolvedOptions),
+        isPlaceholder: false,
+        placeholder: '',
+        isEditable: false
+      });
+      processedSegments.push(dateSegment);
+      // This marks the end of the embedded direction change in the case that the granularity it set to "hour".
+      if (segment.type === granularity) {
+        processedSegments.push({
+          type: 'literal',
+          text: '\u2069',
+          ...getSegmentLimits(displayValue, 'literal', resolvedOptions),
+          isPlaceholder: false,
+          placeholder: '',
+          isEditable: false
+        });
+      }
+    } else if (timeValue.includes(segment.type) && segment.type === granularity) {
+      processedSegments.push(dateSegment);
+      // This marks the end of the embedded direction change.
+      processedSegments.push({
+        type: 'literal',
+        text: '\u2069',
+        ...getSegmentLimits(displayValue, 'literal', resolvedOptions),
+        isPlaceholder: false,
+        placeholder: '',
+        isEditable: false
+      });
+    } else {
+      // We only want to "wrap" the unicode around segments that are hour, minute, or second. If they aren't, just process as normal. 
+      processedSegments.push(dateSegment);
+    }
+  }
+
+  return processedSegments;
+}
+
 function getSegmentLimits(date: DateValue, type: string, options: Intl.ResolvedDateTimeFormatOptions) {
@@ -430,0 +482,0 @@ switch (type) {

No alert changes

Improved metrics

Total package byte prevSize

598702

increased by3.09%

Lines of code

7450

increased by2.77%

Dependency changes

• + Added@internationalized/date@3.0.0-nightly-801ef48a8-250207(transitive)

• + Added@internationalized/string@3.0.0-nightly-801ef48a8-250207(transitive)

• + Added@react-stately/form@3.0.0-nightly-801ef48a8-250207(transitive)

• + Added@react-stately/overlays@3.0.0-nightly-801ef48a8-250207(transitive)

• + Added@react-stately/utils@3.0.0-nightly-801ef48a8-250207(transitive)

• + Added@react-types/calendar@3.0.0-nightly-801ef48a8-250207(transitive)

• + Added@react-types/datepicker@3.0.0-nightly-801ef48a8-250207(transitive)

• + Added@react-types/overlays@3.0.0-nightly-801ef48a8-250207(transitive)

• + Added@react-types/shared@3.0.0-nightly-801ef48a8-250207(transitive)

• - Removed@internationalized/date@3.7.0(transitive)

• - Removed@internationalized/string@3.2.5(transitive)

• - Removed@react-stately/form@3.1.1(transitive)

• - Removed@react-stately/overlays@3.6.13(transitive)

• - Removed@react-stately/utils@3.10.5(transitive)

• - Removed@react-types/calendar@3.6.0(transitive)

• - Removed@react-types/datepicker@3.10.0(transitive)

• - Removed@react-types/overlays@3.8.12(transitive)

• - Removed@react-types/shared@3.27.0(transitive)

• Updated@internationalized/date@3.0.0-nightly-801ef48a8-250207

• Updated@internationalized/string@3.0.0-nightly-801ef48a8-250207

• Updated@react-stately/form@3.0.0-nightly-801ef48a8-250207

• Updated@react-stately/overlays@3.0.0-nightly-801ef48a8-250207

• Updated@react-stately/utils@3.0.0-nightly-801ef48a8-250207

• Updated@react-types/datepicker@3.0.0-nightly-801ef48a8-250207

• Updated@react-types/shared@3.0.0-nightly-801ef48a8-250207