update logic of how unicode is applied

Author: yihuiliao

packages/@react-aria/datepicker/src/useDateSegment.ts

@@ -410,7 +410,8 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
       onKeyDown,
       onFocus,
       style: {
-        caretColor: 'transparent'
+        caretColor: 'transparent',
+        unicodeBidi: 'isolate-override'
       },
       // Prevent pointer events from reaching useDatePickerGroup, and allow native browser behavior to focus the segment.
       onPointerDown(e) {

packages/@react-spectrum/datepicker/stories/DateField.stories.tsx

@@ -277,7 +277,7 @@ const preferences = [
   {locale: '', label: 'Default', ordering: 'gregory'},
   {label: 'Arabic (Algeria)', locale: 'ar-DZ', territories: 'DJ DZ EH ER IQ JO KM LB LY MA MR OM PS SD SY TD TN YE', ordering: 'gregory islamic islamic-civil islamic-tbla'},
   {label: 'Arabic (United Arab Emirates)', locale: 'ar-AE', territories: 'AE BH KW QA', ordering: 'gregory islamic-umalqura islamic islamic-civil islamic-tbla'},
-  {label: 'Arabic (Egypt)', locale: 'AR-EG', territories: 'EG', ordering: 'gregory coptic islamic islamic-civil islamic-tbla'},
+  {label: 'Arabic (Egypt)', locale: 'ar-EG', territories: 'EG', ordering: 'gregory coptic islamic islamic-civil islamic-tbla'},
   {label: 'Arabic (Saudi Arabia)', locale: 'ar-SA', territories: 'SA', ordering: 'islamic-umalqura gregory islamic islamic-rgsa'},
   {label: 'Farsi (Afghanistan)', locale: 'fa-AF', territories: 'AF IR', ordering: 'persian gregory islamic islamic-civil islamic-tbla'},
   // {territories: 'CN CX HK MO SG', ordering: 'gregory chinese'},

packages/@react-stately/datepicker/src/useDateFieldState.ts

@@ -269,6 +269,8 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
 
   let dateValue = useMemo(() => displayValue.toDate(timeZone), [displayValue, timeZone]);
   let timeValue = ['hour', 'minute', 'second'];
+  let dateSegments = ['day', 'month', 'year'];
+  let rtlLocale = ['ar-DZ', 'ar-AE', 'ar-EG', 'ar-SA'];
   let segments = useMemo(() =>
     dateFormatter.formatToParts(dateValue)
       .map(segment => {
@@ -282,22 +284,31 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
 
         let value = segment.value;
         let place = placeholder;
-        if (segment.type === 'day' && locale !== 'ar-AE') {
+        if (dateSegments.length === 3 && dateSegments.includes(segment.type) && !rtlLocale.includes(locale)) {
           value = `\u2066${value}`;
           place = `\u2066${place}`;
+          // value = `${value}`;
+          // place = `${place}`;
         } else if (segment.type === 'hour') {
           value = `\u2066${value}`;
           place = `\u2066${place}`;
         // Ideally the unicode (\u2069) would be placed at the end but that seems to cause some issues 
         // with the background when the rightmost character is focused in Hebrew.
-        } else if (segment.type === 'year' && locale !== 'ar-AE') {
+        } else if (dateSegments.length === 1 && dateSegments.includes(segment.type) && !rtlLocale.includes(locale)) {
+          // value = `${value}`;
+          // place = `${place}`;
           value = `\u2069${value}`;
           place = `\u2069${place}`;
         } else if (timeValue.includes(granularity) && segment.type === granularity) {
           value = `\u2069${value}`;
           place = `\u2069${place}`;
+
         }
 
+        if (dateSegments.includes(segment.type)) {
+          dateSegments = dateSegments.filter(item => item !== segment.type);
+        };
+        
         return {
           type: TYPE_MAPPING[segment.type] || segment.type,
           text: isPlaceholder ? place : value,