@react-spectrum/datepicker 3.11.0 → 3.13.0

package/dist/{vars.6aae6db6.css.map → vars.fb8d1a6e.css.map}

@@ -1 +1 @@
-{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAMJ;;;;;;;;;AAWE;;;;;;;;;;AAAA;;;;;;;AAAA;;;;;;;AAAA;;;;;;;AAAA;;;;;;;AAaE;;;;;;;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAaA;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAOJ;;;;AAMA;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAMA;;;;;AAME;;;;;;;AAOE;;;;;;;AAQA;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AASF;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKE;;;;AAMA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAOJ;;;;;AAMA;;;;AAGE;;;;AASE;;;;;AAMF;;;;;;AAME;;;;;AAKA;;;;AAKA;;;;;;;AAQF;;;;;;;;AAME;;;;;;;;;;AAYA;;;;;;;AAYE;;;;;AAMA;;;;AAmBN;;;;;AAKI;;;;AAOE;;;;AAcA;;;;AAWF;;;;AAME;;;;AAOA;;;;AASA;;;;AAQJ;;;;AAgBA;;;;AAKF;;;;AAQM;;;;AAqBA;;;;AAgBA;;;;AAQA;;;;AAME;;;;AAOA;;;;AAQF;;;;AAgBF;;;;AAMA;;;;AAMF;;;;AAGE;;;;AAUA;;;;AAME;;;;AACE;;;;AAOF;;;;AAIE;;;;;AAQJ;;;;AAII;;;;AAEE;;;;AAIE;;;;AAKJ;;;;AAQR;EACE;;;;;;;;;;;;;;;;EAeE;;;;;;EAKA;;;;;;;;;;;;;;;;EAiBE;;;;EAeI;;;;EAQF;;;;EAQF;;;;EAIF;;;;EAuBE;;;;EAGA","sources":["packages/@adobe/spectrum-css-temp/components/inputgroup/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.6aae6db6.css.map"}
+{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAMJ;;;;;;;;;AAWE;;;;;;;;;;AAAA;;;;;;;AAAA;;;;;;;AAAA;;;;;;;AAAA;;;;;;;AAaE;;;;;;;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAaA;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAOJ;;;;AAMA;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAMA;;;;;AAME;;;;;;;AAOE;;;;;;;AAQA;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AASF;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKE;;;;AAMA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAOJ;;;;;AAMA;;;;AAGE;;;;AASE;;;;;AAMF;;;;;;AAME;;;;;AAKA;;;;AAKA;;;;;;;AAQF;;;;;;;;AAME;;;;;;;;;;AAYA;;;;;;;AAYE;;;;;AAMA;;;;AAmBN;;;;;AAKI;;;;AAWE;;;;AAcA;;;;AAWF;;;;AAOE;;;;AAOA;;;;AASA;;;;AAQJ;;;;AAgBA;;;;AAKF;;;;AAQM;;;;AAqBA;;;;AAgBA;;;;AAQA;;;;AAME;;;;AAOA;;;;AAQF;;;;AAgBF;;;;AAMA;;;;AAMF;;;;AAGE;;;;AAUA;;;;AAME;;;;AACE;;;;AAOF;;;;AAIE;;;;;AAQJ;;;;AAII;;;;AAEE;;;;AAIE;;;;AAKJ;;;;AAQR;EACE;;;;;;;;;;;;;;;;EAeE;;;;;;EAKA;;;;;;;;;;;;;;;;EAiBE;;;;EAeI;;;;EAQF;;;;EAQF;;;;EAIF;;;;EAuBE;;;;EAGA","sources":["packages/@adobe/spectrum-css-temp/components/inputgroup/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.fb8d1a6e.css.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/datepicker",
-  "version": "3.11.0",
+  "version": "3.13.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -36,25 +36,25 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@internationalized/date": "^3.6.0",
-    "@react-aria/datepicker": "^3.12.0",
-    "@react-aria/focus": "^3.19.0",
-    "@react-aria/i18n": "^3.12.4",
-    "@react-aria/interactions": "^3.22.5",
-    "@react-aria/utils": "^3.26.0",
-    "@react-spectrum/button": "^3.16.9",
-    "@react-spectrum/calendar": "^3.5.0",
-    "@react-spectrum/dialog": "^3.8.16",
-    "@react-spectrum/form": "^3.7.10",
-    "@react-spectrum/label": "^3.16.10",
-    "@react-spectrum/layout": "^3.6.10",
-    "@react-spectrum/utils": "^3.12.0",
-    "@react-spectrum/view": "^3.6.14",
-    "@react-stately/datepicker": "^3.11.0",
-    "@react-types/datepicker": "^3.9.0",
-    "@react-types/shared": "^3.26.0",
-    "@spectrum-icons/ui": "^3.6.11",
-    "@spectrum-icons/workflow": "^4.2.16",
+    "@internationalized/date": "^3.7.0",
+    "@react-aria/datepicker": "^3.14.0",
+    "@react-aria/focus": "^3.20.0",
+    "@react-aria/i18n": "^3.12.6",
+    "@react-aria/interactions": "^3.24.0",
+    "@react-aria/utils": "^3.28.0",
+    "@react-spectrum/button": "^3.16.11",
+    "@react-spectrum/calendar": "^3.6.1",
+    "@react-spectrum/dialog": "^3.8.18",
+    "@react-spectrum/form": "^3.7.12",
+    "@react-spectrum/label": "^3.16.12",
+    "@react-spectrum/layout": "^3.6.12",
+    "@react-spectrum/utils": "^3.12.2",
+    "@react-spectrum/view": "^3.6.16",
+    "@react-stately/datepicker": "^3.13.0",
+    "@react-types/datepicker": "^3.11.0",
+    "@react-types/shared": "^3.28.0",
+    "@spectrum-icons/ui": "^3.6.13",
+    "@spectrum-icons/workflow": "^4.2.18",
     "@swc/helpers": "^0.5.0"
   },
   "devDependencies": {
@@ -69,5 +69,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "71f0ef23053f9e03ee7e97df736e8b083e006849"
+  "gitHead": "4d3c72c94eea2d72eb3a0e7d56000c6ef7e39726"
 }

package/src/DateField.tsx

@@ -26,7 +26,11 @@ import {useFormProps} from '@react-spectrum/form';
 import {useLocale} from '@react-aria/i18n';
 import {useProviderProps} from '@react-spectrum/provider';
 
-function DateField<T extends DateValue>(props: SpectrumDateFieldProps<T>, ref: FocusableRef<HTMLElement>) {
+/**
+ * DateFields allow users to enter and edit date and time values using a keyboard.
+ * Each part of a date value is displayed in an individually editable segment.
+ */
+export const DateField = React.forwardRef(function DateField<T extends DateValue>(props: SpectrumDateFieldProps<T>, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
   props = useFormProps(props);
   let {
@@ -99,11 +103,4 @@ function DateField<T extends DateValue>(props: SpectrumDateFieldProps<T>, ref: F
       </Input>
     </Field>
   );
-}
-
-/**
- * DateFields allow users to enter and edit date and time values using a keyboard.
- * Each part of a date value is displayed in an individually editable segment.
- */
-const _DateField = React.forwardRef(DateField) as <T extends DateValue>(props: SpectrumDateFieldProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;
-export {_DateField as DateField};
+}) as <T extends DateValue>(props: SpectrumDateFieldProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;

package/src/DatePicker.tsx

@@ -38,7 +38,10 @@ import {useHover} from '@react-aria/interactions';
 import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useProviderProps} from '@react-spectrum/provider';
 
-function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref: FocusableRef<HTMLElement>) {
+/**
+ * DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date and time value.
+ */
+export const DatePicker = React.forwardRef(function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
   props = useFormProps(props);
   let {
@@ -47,7 +50,8 @@ function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref:
     isDisabled,
     placeholderValue,
     maxVisibleMonths = 1,
-    pageBehavior
+    pageBehavior,
+    firstDayOfWeek
   } = props;
   let {hoverProps, isHovered} = useHover({isDisabled});
   let targetRef = useRef<HTMLDivElement | null>(null);
@@ -168,6 +172,7 @@ function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref:
                   {...calendarProps}
                   visibleMonths={visibleMonths}
                   pageBehavior={pageBehavior}
+                  firstDayOfWeek={firstDayOfWeek}
                   UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-calendar', {'is-invalid': isInvalid})} />
                 {showTimeField &&
                   <div className={classNames(datepickerStyles, 'react-spectrum-Datepicker-timeFields')}>
@@ -191,10 +196,4 @@ function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref:
       </div>
     </Field>
   );
-}
-
-/**
- * DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date and time value.
- */
-const _DatePicker = React.forwardRef(DatePicker) as <T extends DateValue>(props: SpectrumDatePickerProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;
-export {_DatePicker as DatePicker};
+}) as <T extends DateValue>(props: SpectrumDatePickerProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;

package/src/DatePickerField.tsx

@@ -45,7 +45,7 @@ export function DatePickerField<T extends DateValue>(props: DatePickerFieldProps
   let {fieldProps, inputProps} = useDateField({...props, inputRef}, state, ref);
 
   return (
-    <div {...fieldProps} data-testid={props['data-testid']} className={classNames(datepickerStyles, 'react-spectrum-Datepicker-segments', inputClassName)} ref={ref}>
+    <span {...fieldProps} data-testid={props['data-testid']} className={classNames(datepickerStyles, 'react-spectrum-Datepicker-segments', inputClassName)} ref={ref}>
       {state.segments.map((segment, i) =>
         (<DatePickerSegment
           key={i}
@@ -56,6 +56,6 @@ export function DatePickerField<T extends DateValue>(props: DatePickerFieldProps
           isRequired={isRequired} />)
       )}
       <input {...inputProps} ref={inputRef} />
-    </div>
+    </span>
   );
 }

package/src/DatePickerSegment.tsx

@@ -54,7 +54,7 @@ function EditableSegment({segment, state}: DatePickerSegmentProps) {
   let {segmentProps} = useDateSegment(segment, state, ref);
 
   return (
-    <div
+    <span
       {...segmentProps}
       ref={ref}
       className={classNames(styles, 'react-spectrum-DatePicker-cell', {
@@ -64,6 +64,6 @@ function EditableSegment({segment, state}: DatePickerSegmentProps) {
       style={segmentProps.style}
       data-testid={segment.type}>
       {segment.isPlaceholder ? <span aria-hidden="true" className={classNames(styles, 'react-spectrum-DatePicker-placeholder')}>{segment.placeholder}</span> : segment.text}
-    </div>
+    </span>
   );
 }

package/src/DateRangePicker.tsx

@@ -38,7 +38,11 @@ import {useHover} from '@react-aria/interactions';
 import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useProviderProps} from '@react-spectrum/provider';
 
-function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProps<T>, ref: FocusableRef<HTMLElement>) {
+/**
+ * DateRangePickers combine two DateFields and a RangeCalendar popover to allow users
+ * to enter or select a date and time range.
+ */
+export const DateRangePicker = React.forwardRef(function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProps<T>, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
   props = useFormProps(props);
   let {
@@ -47,7 +51,8 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
     autoFocus,
     placeholderValue,
     maxVisibleMonths = 1,
-    pageBehavior
+    pageBehavior,
+    firstDayOfWeek
   } = props;
   let {hoverProps, isHovered} = useHover({isDisabled});
   let targetRef = useRef<HTMLDivElement | null>(null);
@@ -133,33 +138,35 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
         {...mergeProps(groupProps, hoverProps, focusProps)}
         className={className}
         ref={targetRef}>
-        <Input
-          isDisabled={isDisabled}
-          isQuiet={isQuiet}
-          validationState={validationState}
-          className={classNames(styles, 'spectrum-InputGroup-field')}
-          inputClassName={fieldClassName}
-          disableFocusRing
-          minWidth={approximateWidth}>
-          <DatePickerField
-            {...startFieldProps}
-            data-testid="start-date"
-            isQuiet={props.isQuiet}
-            inputClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-startField')} />
-          <DateRangeDash />
-          <DatePickerField
-            {...endFieldProps}
-            data-testid="end-date"
-            isQuiet={props.isQuiet}
-            inputClassName={classNames(
-              styles,
-              'spectrum-Datepicker-endField',
-              classNames(
-                datepickerStyles,
-                'react-spectrum-Datepicker-endField'
-              )
-            )} />
-        </Input>
+        <div style={{overflow: 'hidden', width: '100%'}}>
+          <Input
+            isDisabled={isDisabled}
+            isQuiet={isQuiet}
+            validationState={validationState}
+            className={classNames(styles, 'spectrum-InputGroup-field')}
+            inputClassName={fieldClassName}
+            disableFocusRing
+            minWidth={approximateWidth}>
+            <DatePickerField
+              {...startFieldProps}
+              data-testid="start-date"
+              isQuiet={props.isQuiet}
+              inputClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-startField')} />
+            <DateRangeDash />
+            <DatePickerField
+              {...endFieldProps}
+              data-testid="end-date"
+              isQuiet={props.isQuiet}
+              inputClassName={classNames(
+                styles,
+                'spectrum-Datepicker-endField',
+                classNames(
+                  datepickerStyles,
+                  'react-spectrum-Datepicker-endField'
+                )
+              )} />
+          </Input>
+        </div>
         <DialogTrigger
           type="popover"
           mobileType="tray"
@@ -183,6 +190,7 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
                   {...calendarProps}
                   visibleMonths={visibleMonths}
                   pageBehavior={pageBehavior}
+                  firstDayOfWeek={firstDayOfWeek}
                   UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-calendar', {'is-invalid': validationState === 'invalid'})} />
                 {showTimeField &&
                   <Flex gap="size-100" marginTop="size-100" UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-timeFields')}>
@@ -217,20 +225,13 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
       </div>
     </Field>
   );
-}
+}) as <T extends DateValue>(props: SpectrumDateRangePickerProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;
 
 function DateRangeDash() {
   return (
-    <div
+    <span
       aria-hidden="true"
       data-testid="date-range-dash"
       className={classNames(datepickerStyles, 'react-spectrum-Datepicker-rangeDash')} />
   );
 }
-
-/**
- * DateRangePickers combine two DateFields and a RangeCalendar popover to allow users
- * to enter or select a date and time range.
- */
-const _DateRangePicker = React.forwardRef(DateRangePicker) as <T extends DateValue>(props: SpectrumDateRangePickerProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;
-export {_DateRangePicker as DateRangePicker};

package/src/Input.tsx

@@ -19,7 +19,7 @@ import React, {ReactElement, useCallback, useRef} from 'react';
 import textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';
 import {useFocusRing} from '@react-aria/focus';
 
-function Input(props, ref) {
+export const Input = React.forwardRef(function Input(props: any, ref: any) {
   let inputRef = useRef<HTMLInputElement | null>(null);
   let {
     isDisabled,
@@ -139,7 +139,4 @@ function Input(props, ref) {
       {validationIcon}
     </div>
   );
-}
-
-const _Input = React.forwardRef(Input);
-export {_Input as Input};
+});

package/src/TimeField.tsx

@@ -25,7 +25,11 @@ import {useProviderProps} from '@react-spectrum/provider';
 import {useTimeField} from '@react-aria/datepicker';
 import {useTimeFieldState} from '@react-stately/datepicker';
 
-function TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: FocusableRef<HTMLElement>) {
+/**
+ * TimeFields allow users to enter and edit time values using a keyboard.
+ * Each part of the time is displayed in an individually editable segment.
+ */
+export const TimeField = React.forwardRef(function TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
   props = useFormProps(props);
   let {
@@ -89,11 +93,4 @@ function TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: F
       </Input>
     </Field>
   );
-}
-
-/**
- * TimeFields allow users to enter and edit time values using a keyboard.
- * Each part of the time is displayed in an individually editable segment.
- */
-const _TimeField = React.forwardRef(TimeField) as <T extends TimeValue>(props: SpectrumTimeFieldProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;
-export {_TimeField as TimeField};
+}) as <T extends TimeValue>(props: SpectrumTimeFieldProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;

package/src/styles.css

@@ -34,7 +34,7 @@
 }
 
 .react-spectrum-Datepicker-field.react-spectrum-Datepicker-field {
-  width: auto;
+  width: 100%;
 }
 
 .react-spectrum-Datepicker-field .react-spectrum-DateField-Input {
@@ -77,8 +77,7 @@
 }
 
 .react-spectrum-Datepicker-inputSized {
-  display: flex;
-  height: 100%;
+  display: inline;
   align-items: center;
 }
 
@@ -89,7 +88,7 @@
 }
 
 .react-spectrum-Datepicker-segments {
-  display: flex;
+  display: inline-block;
   align-items: center;
 }
 

package/src/{utils.ts → utils.tsx}

@@ -12,10 +12,10 @@
 import {createDOMRef} from '@react-spectrum/utils';
 import {createFocusManager} from '@react-aria/focus';
 import {FocusableRef} from '@react-types/shared';
+import React, {useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {SpectrumDatePickerBase} from '@react-types/datepicker';
 import {useDateFormatter, useLocale} from '@react-aria/i18n';
 import {useDisplayNames} from '@react-aria/datepicker';
-import {useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {useLayoutEffect} from '@react-aria/utils';
 import {useProvider} from '@react-spectrum/provider';
 
@@ -28,13 +28,15 @@ export function useFormatHelpText(props: Pick<SpectrumDatePickerBase<any>, 'desc
     }
 
     if (props.showFormatHelpText) {
-      return formatter.formatToParts(new Date()).map(s => {
-        if (s.type === 'literal') {
-          return s.value;
-        }
+      return (
+        formatter.formatToParts(new Date()).map((s, i) => {
+          if (s.type === 'literal') {
+            return <span key={i}>{` ${s.value} `}</span>;
+          }
 
-        return displayNames.of(s.type);
-      }).join(' ');
+          return <span key={i} style={{unicodeBidi: 'embed', direction: 'ltr'}}>{displayNames.of(s.type)}</span>;
+        })
+      );
     }
 
     return '';

package/dist/styles.4bf108e6.css.map

@@ -1 +0,0 @@
-{"mappings":"AAYA;;;;;;AAMA;;;;;AAKA;;;;;;AAMA;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAMA;;;;AAIA;;;;AAMA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;;AAMA;;;;;;;;;AAQE;;;;;;AAOF;;;;;;AAOE;;;;AAKF;;;;;AAKA;;;;;;;AAMA;;;;;;;;;;;;AAWE;;;;AAOF;;;;AAGE;;;;;AAMF;;;;AAIA;;;;AAIA;;;;;;;AAOA;;;;AAIA;;;;;AAIE;;;;AAQA;;;;;AAQF;EACE;;;;EAGE;;;;;;AAOJ;;;;;;;;AAQA;EACE;;;;;;EAKA;;;;EAEE;;;;EAIF;;;;EAEE","sources":["packages/@react-spectrum/datepicker/src/styles.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n.react-spectrum-Datepicker-fieldWrapper.react-spectrum-Datepicker-fieldWrapper.react-spectrum-Datepicker-fieldWrapper {\n   width: auto;\n   min-width: var(--spectrum-global-dimension-size-2000);\n   max-width: 100%;\n }\n\n.react-spectrum-Datepicker-startField {\n  width: auto;\n  padding-inline-end: var(--spectrum-global-dimension-size-100);\n}\n\n.react-spectrum-Datepicker-endField {\n  width: auto;\n  flex: 1;\n  padding-inline-start: var(--spectrum-global-dimension-size-100);\n}\n\n.react-spectrum-Datepicker-field ~ .react-spectrum-Datepicker-endField > .react-spectrum-Datepicker-input {\n  border-inline-start-width: 0;\n  border-start-start-radius: 0;\n  border-end-start-radius: 0;\n}\n\n.react-spectrum-Datepicker-field.react-spectrum-Datepicker-field {\n  width: auto;\n}\n\n.react-spectrum-Datepicker-field .react-spectrum-DateField-Input {\n  line-height: var(--spectrum-body-4-text-line-height);\n}\n\n/* specificity war with .spectrum-Field--positionSide etc. */\n.react-spectrum-DateField.react-spectrum-DateField.react-spectrum-DateField.react-spectrum-DateField {\n  min-width: var(--spectrum-global-dimension-size-2000);\n}\n\n.react-spectrum-TimeField.react-spectrum-TimeField.react-spectrum-TimeField.react-spectrum-TimeField {\n  min-width: var(--spectrum-global-dimension-size-1250);\n}\n\n.react-spectrum-TimeField-fieldWrapper.react-spectrum-TimeField-fieldWrapper.react-spectrum-TimeField-fieldWrapper {\n  width: auto;\n  min-width: var(--spectrum-global-dimension-size-1250);\n}\n\n.react-spectrum-Datepicker-input.react-spectrum-Datepicker-input.react-spectrum-Datepicker-input {\n  /* always reserve space for the validation icon */\n  padding-inline-end: calc(var(--spectrum-textfield-padding-x) + var(--spectrum-icon-alert-medium-width) + var(--spectrum-textfield-icon-margin-left));\n  cursor: text;\n}\n\n.react-spectrum-Datepicker-inputContents {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  overflow-x: auto;\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none;  /* Internet Explorer 10+ */\n\n  &::-webkit-scrollbar { /* WebKit */\n    width: 0;\n    height: 0;\n    display: none;\n  }\n}\n\n.react-spectrum-Datepicker-inputSized {\n  display: flex;\n  height: 100%;\n  align-items: center;\n}\n\n.react-spectrum-Datepicker-rangeDash {\n  &:before {\n    content: '–';\n  }\n}\n\n.react-spectrum-Datepicker-segments {\n  display: flex;\n  align-items: center;\n}\n\n.react-spectrum-Datepicker-literal {\n  white-space: pre;\n  user-select: none;\n  color: var(--spectrum-textfield-text-color);\n}\n\n.react-spectrum-DatePicker-cell {\n  border: none;\n  background: none;\n  padding: 0 2px;\n  border-radius: var(--spectrum-alias-border-radius-small);\n  font-variant-numeric: tabular-nums;\n  text-align: end;\n  box-sizing: content-box;\n  white-space: nowrap;\n  color: var(--spectrum-textfield-text-color);\n\n  &::selection {\n    /* hide the selection because there is no way to fully prevent it in Firefox */\n    /* https://bugzilla.mozilla.org/show_bug.cgi?id=1742153 */\n    background: transparent;\n  }\n}\n\n.react-spectrum-DatePicker-cell.is-placeholder {\n  color: var(--spectrum-gray-600);\n\n  .react-spectrum-DatePicker-placeholder {\n    text-align: center;\n    pointer-events: none;\n  }\n}\n\n.react-spectrum-DatePicker-cell.is-placeholder ~ .react-spectrum-Datepicker-literal {\n  color: var(--spectrum-global-color-gray-600);\n}\n\n.react-spectrum-DatePicker-cell.is-read-only {\n  color: var(--spectrum-global-color-gray-700);\n}\n\n.react-spectrum-DatePicker-cell:focus {\n  background-color: var(--spectrum-accent-background-color-default);\n  color: white;\n  caret-color: transparent;\n  outline: none;\n}\n\n.react-spectrum-Datepicker-dialog.react-spectrum-Datepicker-dialog {\n  width: auto;\n}\n\n.react-spectrum-Datepicker-dialogContent {\n  display: flex;\n  flex-direction: column;\n\n  .react-spectrum-Datepicker-calendar.is-invalid {\n    /* Only apply display: contents when the calendar is invalid, which allows us to move the\n     * error message below the time fields. Otherwise, don't do this because it breaks dragging\n     * the selected range on Android. */\n    display: contents;\n  }\n\n  /* Push the help text within the calendar down to the bottom of the dialog, below the time fields. */\n  :global(.spectrum-Calendar-helpText) {\n    order: 10;\n    margin: var(--spectrum-global-dimension-size-200) var(--spectrum-calendar-day-padding) 0 var(--spectrum-calendar-day-padding);\n  }\n}\n\n/* when displayed in a tray, reduce the padding of the dialog */\n@media (max-width: 700px) {\n  .react-spectrum-Datepicker-dialog {\n    --spectrum-dialog-padding-x: 8px;\n\n    .react-spectrum-Datepicker-dialogContent {\n      margin: 0 auto;\n      max-width: calc((var(--spectrum-calendar-day-width) * 7) + (var(--spectrum-calendar-day-padding) * 12));\n    }\n  }\n}\n\n.react-spectrum-Datepicker-timeFields {\n  width: 100%;\n  min-width: calc(var(--spectrum-calendar-day-width) * 7);\n  max-width: calc((var(--spectrum-calendar-day-width) * 7) + (var(--spectrum-calendar-day-padding) * 12));\n  padding: 0 var(--spectrum-calendar-day-padding);\n  box-sizing: border-box;\n}\n\n@media (forced-colors:active) {\n  .react-spectrum-DatePicker-cell:focus {\n    forced-color-adjust: none;\n    background-color: Highlight;\n    color: HighlightText;\n  }\n  .react-spectrum-DatePicker-cell.is-read-only {\n    color: ButtonText;\n    &:focus {\n      color: HighlightText;\n    }\n  }\n  .react-spectrum-DatePicker-cell.is-placeholder {\n    color: ButtonText;\n    &:focus {\n      color: HighlightText;\n    }\n  }\n}\n"],"names":[],"version":3,"file":"styles.4bf108e6.css.map"}