@atlaskit/datetime-picker 16.2.3 → 17.0.0

package/dist/es2019/components/date-picker-class.js

@@ -1,21 +1,19 @@
+/* date-picker-class.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./date-picker-class.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { Component, createRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { isValid, parseISO } from 'date-fns';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { IconButton } from '@atlaskit/button/new';
+import { cx } from '@atlaskit/css';
 import { IdProvider } from '@atlaskit/ds-lib/use-id';
 import CalendarIcon from '@atlaskit/icon/core/migration/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, xcss } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import Select, { mergeStyles } from '@atlaskit/select';
 import { EmptyComponent } from '../internal';
 import { formatDate, getParsedISO, getPlaceholder, isDateDisabled, parseDate } from '../internal/date-picker-migration';
@@ -24,14 +22,7 @@ import { Menu } from '../internal/menu';
 import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "16.2.3";
-const dropdownIndicatorStyles = xcss({
-  minWidth: "var(--ds-space-300, 24px)",
-  minHeight: "var(--ds-space-300, 24px)",
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-});
+const packageVersion = "17.0.0";
 const datePickerDefaultProps = {
   defaultIsOpen: false,
   defaultValue: '',
@@ -48,29 +39,13 @@ const datePickerDefaultProps = {
   // Not including a default prop for value as it will
   // Make the component a controlled component
 };
-const pickerContainerStyles = css({
-  position: 'relative'
-});
-const iconContainerStyles = xcss({
-  display: 'flex',
-  height: '100%',
-  position: 'absolute',
-  alignItems: 'center',
-  flexBasis: 'inherit',
-  color: 'color.text.subtlest',
-  insetBlockStart: 'space.0',
-  insetInlineEnd: 'space.0',
-  transition: `color 150ms`,
-  ':hover': {
-    color: 'color.text.subtle'
-  }
-});
-const iconSpacingWithClearButtonStyles = xcss({
-  marginInlineEnd: 'space.400'
-});
-const iconSpacingWithoutClearButtonStyles = xcss({
-  marginInlineEnd: 'space.050'
-});
+const styles = {
+  pickerContainerStyles: "_kqswh2mm",
+  iconContainerStyles: "_v564vrg3 _1e0c1txw _4t3i1osq _kqswstnw _4cvr1h6o _i0dl1kw7 _syaz131l _152tze3t _rjxpze3t _30l31gjq",
+  iconSpacingWithClearButtonStyles: "_12l2xy5q",
+  iconSpacingWithoutClearButtonStyles: "_12l21b66",
+  dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o"
+};
 
 // eslint-disable-next-line @repo/internal/react/no-class-components
 class DatePickerComponent extends Component {
@@ -448,11 +423,11 @@ class DatePickerComponent extends Component {
     const showClearIndicator = Boolean((value || selectInputValue) && !hideIcon);
     let clearIndicator = Icon;
 
-    // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+    // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
     if (fg('platform-visual-refresh-icons')) {
-      clearIndicator = props => jsx(Box, {
-        xcss: dropdownIndicatorStyles
-      }, jsx(Icon, props));
+      clearIndicator = props => /*#__PURE__*/React.createElement(Box, {
+        xcss: styles.dropdownIndicatorStyles
+      }, /*#__PURE__*/React.createElement(Icon, props));
     }
     const dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : clearIndicator;
     const SingleValue = makeSingleValue({
@@ -463,7 +438,7 @@ class DatePickerComponent extends Component {
       // Only use this new container component if the calendar button is shown.
       // Otherwise, it throws errors downstream for some reason
       ...(shouldShowCalendarButton ? {
-        IndicatorsContainer: props => jsx(IndicatorsContainer, _extends({}, props, {
+        IndicatorsContainer: props => /*#__PURE__*/React.createElement(IndicatorsContainer, _extends({}, props, {
           showClearIndicator: showClearIndicator
         }))
       } : {}),
@@ -521,104 +496,100 @@ class DatePickerComponent extends Component {
 
     // `label` takes precedence of the `inputLabel`
     const fullopenCalendarLabel = label || inputLabel ? `${label || inputLabel}, ${openCalendarLabel}` : openCalendarLabel;
-    return (
-      // These event handlers must be on this element because the events come
-      // from different child elements.
-      // Until innerProps is removed, it must remain a div rather than a primitive component.
-      jsx("div", _extends({}, innerProps, {
-        css: pickerContainerStyles
-        // Since the onclick, onfocus are passed down, adding role="presentation" prevents typecheck errors.
-        ,
-        role: "presentation",
-        onBlur: this.onContainerBlur,
-        onFocus: this.onContainerFocus,
-        onClick: this.onInputClick,
-        onInput: this.onTextInput,
-        onKeyDown: this.onInputKeyDown,
-        ref: this.getContainerRef,
-        "data-testid": testId && `${testId}--container`
-      }), jsx("input", {
-        name: name,
-        type: "hidden",
-        value: value,
-        "data-testid": testId && `${testId}--input`
-      }), jsx(Select, _extends({
-        appearance: this.props.appearance,
-        "aria-describedby": ariaDescribedBy,
-        label: label || undefined,
-        autoFocus: autoFocus,
-        clearControlLabel: clearControlLabel,
-        closeMenuOnSelect: true
-        // FOr some reason, this and the below `styles` type error _only_ show
-        // up when you alter some of the properties in the `selectComponents`
-        // object. These errors are still present, and I suspect have always
-        // been present, without changing the unrelated code. Ignoring as the
-        // component still works as expected despite this error. And also
-        // because the select refresh team may solve it later.
-        ,
-        components: selectComponents,
-        enableAnimation: false,
-        inputId: id,
-        inputValue: actualSelectInputValue,
-        isDisabled: isDisabled,
-        isRequired: isRequired,
-        menuIsOpen: menuIsOpen,
-        onBlur: this.onSelectBlur,
-        onChange: this.onSelectChange,
-        onFocus: this.onSelectFocus,
-        onInputChange: this.handleSelectInputChange,
-        placeholder: getPlaceholder({
-          placeholder: this.props.placeholder,
-          l10n: this.state.l10n
-        }),
-        styles: mergedStyles,
-        value: initialValue
-      }, selectProps, {
-        // These are below the spread because I don't know what is in
-        // selectProps or not and what wil be overwritten
-        isClearable: true,
-        isInvalid: isInvalid,
-        spacing: spacing,
-        testId: testId
-        // These aren't part of `Select`'s API, but we're using them here.
-        // @ts-ignore --  Property 'calendarContainerRef' does not exist on type 'IntrinsicAttributes & LibraryManagedAttributes<(<Option extends unknown = OptionType, IsMulti extends boolean = false>(props: AtlaskitSelectProps<Option, IsMulti> & { ...; }) => Element), AtlaskitSelectProps<...> & { ...; }>'.
-        ,
-        calendarContainerRef: calendarProps.calendarContainerRef,
-        calendarDisabled: calendarProps.calendarDisabled,
-        calendarDisabledDateFilter: calendarProps.calendarDisabledDateFilter,
-        calendarLocale: calendarProps.calendarLocale,
-        calendarMaxDate: calendarProps.calendarMaxDate,
-        calendarMinDate: calendarProps.calendarMinDate,
-        calendarRef: calendarProps.calendarRef,
-        calendarValue: calendarProps.calendarValue,
-        calendarView: calendarProps.calendarView,
-        calendarWeekStartDay: calendarProps.calendarWeekStartDay,
-        nextMonthLabel: nextMonthLabel,
-        onCalendarChange: calendarProps.onCalendarChange,
-        onCalendarSelect: calendarProps.onCalendarSelect,
-        previousMonthLabel: previousMonthLabel,
-        shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay,
-        menuInnerWrapper: calendarProps.menuInnerWrapper
-      })), shouldShowCalendarButton && !isDisabled ? jsx(IdProvider, {
-        prefix: "open-calendar-label--"
-      }, ({
-        id: openCalendarLabelId
-      }) => jsx(Box, {
-        xcss: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : iconSpacingWithoutClearButtonStyles]
-      }, jsx(IconButton, {
-        appearance: "subtle",
-        label: !inputLabelId ? fullopenCalendarLabel : openCalendarLabel,
-        "aria-labelledby": inputLabelId ? `${inputLabelId} ${openCalendarLabelId}` : undefined,
-        id: openCalendarLabelId,
-        icon: iconProps => jsx(CalendarIcon, _extends({}, iconProps, {
-          color: "var(--ds-icon, #44546F)"
-        })),
-        onClick: this.onCalendarButtonClick,
-        onKeyDown: this.onCalendarButtonKeyDown,
-        ref: this.calendarButtonRef,
-        testId: testId && `${testId}--open-calendar-button`
-      }))) : null)
-    );
+    return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
+      // Since the onclick, onfocus are passed down, adding role="presentation" prevents typecheck errors.
+      role: "presentation",
+      onBlur: this.onContainerBlur,
+      onFocus: this.onContainerFocus,
+      onClick: this.onInputClick,
+      onInput: this.onTextInput,
+      onKeyDown: this.onInputKeyDown,
+      ref: this.getContainerRef,
+      "data-testid": testId && `${testId}--container`,
+      className: ax([styles.pickerContainerStyles])
+    }), /*#__PURE__*/React.createElement("input", {
+      name: name,
+      type: "hidden",
+      value: value,
+      "data-testid": testId && `${testId}--input`
+    }), /*#__PURE__*/React.createElement(Select, _extends({
+      appearance: this.props.appearance,
+      "aria-describedby": ariaDescribedBy,
+      label: label || undefined
+      // eslint-disable-next-line jsx-a11y/no-autofocus
+      ,
+      autoFocus: autoFocus,
+      clearControlLabel: clearControlLabel,
+      closeMenuOnSelect: true
+      // FOr some reason, this and the below `styles` type error _only_ show
+      // up when you alter some of the properties in the `selectComponents`
+      // object. These errors are still present, and I suspect have always
+      // been present, without changing the unrelated code. Ignoring as the
+      // component still works as expected despite this error. And also
+      // because the select refresh team may solve it later.
+      ,
+      components: selectComponents,
+      enableAnimation: false,
+      inputId: id,
+      inputValue: actualSelectInputValue,
+      isDisabled: isDisabled,
+      isRequired: isRequired,
+      menuIsOpen: menuIsOpen,
+      onBlur: this.onSelectBlur,
+      onChange: this.onSelectChange,
+      onFocus: this.onSelectFocus,
+      onInputChange: this.handleSelectInputChange,
+      placeholder: getPlaceholder({
+        placeholder: this.props.placeholder,
+        l10n: this.state.l10n
+      }),
+      styles: mergedStyles,
+      value: initialValue
+    }, selectProps, {
+      // These are below the spread because I don't know what is in
+      // selectProps or not and what wil be overwritten
+      isClearable: true,
+      isInvalid: isInvalid,
+      spacing: spacing,
+      testId: testId
+      // These aren't part of `Select`'s API, but we're using them here.
+      // @ts-ignore --  Property 'calendarContainerRef' does not exist on type 'IntrinsicAttributes & LibraryManagedAttributes<(<Option extends unknown = OptionType, IsMulti extends boolean = false>(props: AtlaskitSelectProps<Option, IsMulti> & { ...; }) => Element), AtlaskitSelectProps<...> & { ...; }>'.
+      ,
+      calendarContainerRef: calendarProps.calendarContainerRef,
+      calendarDisabled: calendarProps.calendarDisabled,
+      calendarDisabledDateFilter: calendarProps.calendarDisabledDateFilter,
+      calendarLocale: calendarProps.calendarLocale,
+      calendarMaxDate: calendarProps.calendarMaxDate,
+      calendarMinDate: calendarProps.calendarMinDate,
+      calendarRef: calendarProps.calendarRef,
+      calendarValue: calendarProps.calendarValue,
+      calendarView: calendarProps.calendarView,
+      calendarWeekStartDay: calendarProps.calendarWeekStartDay,
+      nextMonthLabel: nextMonthLabel,
+      onCalendarChange: calendarProps.onCalendarChange,
+      onCalendarSelect: calendarProps.onCalendarSelect,
+      previousMonthLabel: previousMonthLabel,
+      shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay,
+      menuInnerWrapper: calendarProps.menuInnerWrapper
+    })), shouldShowCalendarButton && !isDisabled ? /*#__PURE__*/React.createElement(IdProvider, {
+      prefix: "open-calendar-label--"
+    }, ({
+      id: openCalendarLabelId
+    }) => /*#__PURE__*/React.createElement(Box, {
+      xcss: cx(styles.iconContainerStyles, value && !hideIcon ? styles.iconSpacingWithClearButtonStyles : styles.iconSpacingWithoutClearButtonStyles)
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      appearance: "subtle",
+      label: !inputLabelId ? fullopenCalendarLabel : openCalendarLabel,
+      "aria-labelledby": inputLabelId ? `${inputLabelId} ${openCalendarLabelId}` : undefined,
+      id: openCalendarLabelId,
+      icon: iconProps => /*#__PURE__*/React.createElement(CalendarIcon, _extends({}, iconProps, {
+        color: "var(--ds-icon, #44546F)"
+      })),
+      onClick: this.onCalendarButtonClick,
+      onKeyDown: this.onCalendarButtonKeyDown,
+      ref: this.calendarButtonRef,
+      testId: testId && `${testId}--open-calendar-button`
+    }))) : null);
   }
 }
 _defineProperty(DatePickerComponent, "defaultProps", datePickerDefaultProps);

package/dist/es2019/components/date-picker-fc.compiled.css

@@ -0,0 +1,16 @@
+
+._v564vrg3{transition:color .15s}._12l21b66{margin-inline-end:var(--ds-space-050,4px)}
+._12l2xy5q{margin-inline-end:var(--ds-space-400,2pc)}
+._152tze3t{inset-block-start:var(--ds-space-0,0)}
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._1tke1k8s{min-height:1.5rem}
+._1ul91k8s{min-width:1.5rem}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._i0dl1kw7{flex-basis:inherit}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._rjxpze3t{inset-inline-end:var(--ds-space-0,0)}
+._syaz131l{color:var(--ds-text-subtlest,#626f86)}
+._30l31gjq:hover{color:var(--ds-text-subtle,#44546f)}

package/dist/es2019/components/date-picker-fc.js

@@ -1,20 +1,18 @@
+/* date-picker-fc.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./date-picker-fc.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useCallback, useEffect, useReducer, useRef, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { isValid, parseISO } from 'date-fns';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import { IconButton } from '@atlaskit/button/new';
+import { cx } from '@atlaskit/css';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import CalendarIcon from '@atlaskit/icon/core/migration/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, xcss } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import Select, { mergeStyles } from '@atlaskit/select';
 import { EmptyComponent } from '../internal';
 import { formatDate, getParsedISO, getPlaceholder, isDateDisabled, parseDate } from '../internal/date-picker-migration';
@@ -23,42 +21,19 @@ import { Menu } from '../internal/menu';
 import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "16.2.3";
+const packageVersion = "17.0.0";
+const styles = {
+  pickerContainerStyle: "_kqswh2mm",
+  dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
+  iconContainerStyles: "_v564vrg3 _1e0c1txw _4t3i1osq _kqswstnw _4cvr1h6o _i0dl1kw7 _syaz131l _152tze3t _rjxpze3t _30l31gjq",
+  iconSpacingWithClearButtonStyles: "_12l2xy5q",
+  iconSpacingWithoutClearButtonStyles: "_12l21b66"
+};
 const analyticsAttributes = {
   componentName: 'datePicker',
   packageName,
   packageVersion
 };
-const pickerContainerStyles = css({
-  position: 'relative'
-});
-const dropdownIndicatorStyles = xcss({
-  minWidth: "var(--ds-space-300, 24px)",
-  minHeight: "var(--ds-space-300, 24px)",
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-});
-const iconContainerStyles = xcss({
-  display: 'flex',
-  height: '100%',
-  position: 'absolute',
-  alignItems: 'center',
-  flexBasis: 'inherit',
-  color: 'color.text.subtlest',
-  insetBlockStart: 'space.0',
-  insetInlineEnd: 'space.0',
-  transition: `color 150ms`,
-  ':hover': {
-    color: 'color.text.subtle'
-  }
-});
-const iconSpacingWithClearButtonStyles = xcss({
-  marginInlineEnd: 'space.400'
-});
-const iconSpacingWithoutClearButtonStyles = xcss({
-  marginInlineEnd: 'space.050'
-});
 
 /**
  * __Date picker__
@@ -392,9 +367,9 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 
   // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
   if (fg('platform-visual-refresh-icons')) {
-    clearIndicator = props => jsx(Box, {
-      xcss: dropdownIndicatorStyles
-    }, jsx(Icon, props));
+    clearIndicator = props => /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.dropdownIndicatorStyles
+    }, /*#__PURE__*/React.createElement(Icon, props));
   }
   const dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : clearIndicator;
   const SingleValue = makeSingleValue({
@@ -405,7 +380,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     // Only use this new container component if the calendar button is shown.
     // Otherwise, it throws errors downstream for some reason
     ...(shouldShowCalendarButton ? {
-      IndicatorsContainer: props => jsx(IndicatorsContainer, _extends({}, props, {
+      IndicatorsContainer: props => /*#__PURE__*/React.createElement(IndicatorsContainer, _extends({}, props, {
         showClearIndicator: showClearIndicator
       }))
     } : {}),
@@ -468,102 +443,99 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   // `label` takes precedence of the `inputLabel`
   const fullopenCalendarLabel = label || inputLabel ? `${label || inputLabel}, ${openCalendarLabel}` : openCalendarLabel;
   const openCalendarLabelId = `open-calendar-label--${useId()}`;
-  return (
-    // These event handlers must be on this element because the events come
-    // from different child elements.
-    // Until innerProps is removed, it must remain a div rather than a primitive component.
-    jsx("div", _extends({}, innerProps, {
-      css: pickerContainerStyles,
-      "data-testid": testId && `${testId}--container`,
-      onBlur: onContainerBlur,
-      onFocus: onContainerFocus,
-      onClick: onInputClick,
-      onInput: onTextInput,
-      onKeyDown: onInputKeyDown,
-      ref: getContainerRef
-      // Since the onclick, onfocus are passed down, adding role="presentation" prevents typecheck errors.
-      ,
-      role: "presentation"
-    }), jsx("input", {
-      name: name,
-      type: "hidden",
-      value: getterValue,
-      "data-testid": testId && `${testId}--input`
-    }), jsx(Select, _extends({
-      appearance: appearance,
-      "aria-describedby": ariaDescribedBy,
-      label: label || undefined,
-      autoFocus: autoFocus,
-      clearControlLabel: clearControlLabel,
-      closeMenuOnSelect: true
-      // For some reason, this and the below `styles` type error _only_ show
-      // up when you alter some of the properties in the `selectComponents`
-      // object. These errors are still present, and I suspect have always
-      // been present, without changing the unrelated code. Ignoring as the
-      // component still works as expected despite this error. And also
-      // because the select refresh team may solve it later.
-      ,
-      components: selectComponents,
-      enableAnimation: false,
-      inputId: id,
-      inputValue: actualSelectInputValue,
-      isDisabled: isDisabled,
-      isRequired: isRequired,
-      menuIsOpen: menuIsOpen,
-      onBlur: onSelectBlur,
-      onChange: onSelectChange,
-      onFocus: onSelectFocus,
-      onInputChange: handleSelectInputChange,
-      placeholder: getPlaceholder({
-        placeholder: placeholder,
-        l10n: l10n
-      })
-      // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
-      ,
-      styles: mergedStyles,
-      value: initialValue
-    }, selectProps, {
-      // These are below the spread because I don't know what is in
-      // selectProps or not and what wil be overwritten
-      isClearable: true,
-      isInvalid: isInvalid,
-      spacing: spacing,
-      testId: testId
-      // These aren't part of `Select`'s API, but we're using them here.
-      // @ts-ignore --  Property 'calendarContainerRef' does not exist on type 'IntrinsicAttributes & LibraryManagedAttributes<(<Option extends unknown = OptionType, IsMulti extends boolean = false>(props: AtlaskitSelectProps<Option, IsMulti> & { ...; }) => Element), AtlaskitSelectProps<...> & { ...; }>'.
-      ,
-      calendarContainerRef: calendarProps.calendarContainerRef,
-      calendarDisabled: calendarProps.calendarDisabled,
-      calendarDisabledDateFilter: calendarProps.calendarDisabledDateFilter,
-      calendarLocale: calendarProps.calendarLocale,
-      calendarMaxDate: calendarProps.calendarMaxDate,
-      calendarMinDate: calendarProps.calendarMinDate,
-      calendarRef: calendarProps.calendarRef,
-      calendarValue: calendarProps.calendarValue,
-      calendarView: calendarProps.calendarView,
-      calendarWeekStartDay: calendarProps.calendarWeekStartDay,
-      nextMonthLabel: nextMonthLabel,
-      onCalendarChange: calendarProps.onCalendarChange,
-      onCalendarSelect: calendarProps.onCalendarSelect,
-      previousMonthLabel: previousMonthLabel,
-      shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay,
-      menuInnerWrapper: calendarProps.menuInnerWrapper
-    })), shouldShowCalendarButton && !isDisabled ? jsx(Box, {
-      xcss: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : iconSpacingWithoutClearButtonStyles]
-    }, jsx(IconButton, {
-      appearance: "subtle",
-      label: !inputLabelId ? fullopenCalendarLabel : openCalendarLabel,
-      "aria-labelledby": inputLabelId ? `${inputLabelId} ${openCalendarLabelId}` : undefined,
-      id: openCalendarLabelId,
-      icon: iconProps => jsx(CalendarIcon, _extends({}, iconProps, {
-        // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-        color: "var(--ds-icon, #44546F)"
-      })),
-      onClick: onCalendarButtonClick,
-      onKeyDown: onCalendarButtonKeyDown,
-      ref: calendarButtonRef,
-      testId: testId && `${testId}--open-calendar-button`
-    })) : null)
-  );
+  return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
+    "data-testid": testId && `${testId}--container`,
+    onBlur: onContainerBlur,
+    onFocus: onContainerFocus,
+    onClick: onInputClick,
+    onInput: onTextInput,
+    onKeyDown: onInputKeyDown,
+    ref: getContainerRef
+    // Since the onclick, onfocus are passed down, adding role="presentation" prevents typecheck errors.
+    ,
+    role: "presentation",
+    className: ax([styles.pickerContainerStyle])
+  }), /*#__PURE__*/React.createElement("input", {
+    name: name,
+    type: "hidden",
+    value: getterValue,
+    "data-testid": testId && `${testId}--input`
+  }), /*#__PURE__*/React.createElement(Select, _extends({
+    appearance: appearance,
+    "aria-describedby": ariaDescribedBy,
+    label: label || undefined
+    // eslint-disable-next-line jsx-a11y/no-autofocus
+    ,
+    autoFocus: autoFocus,
+    clearControlLabel: clearControlLabel,
+    closeMenuOnSelect: true
+    // For some reason, this and the below `styles` type error _only_ show
+    // up when you alter some of the properties in the `selectComponents`
+    // object. These errors are still present, and I suspect have always
+    // been present, without changing the unrelated code. Ignoring as the
+    // component still works as expected despite this error. And also
+    // because the select refresh team may solve it later.
+    ,
+    components: selectComponents,
+    enableAnimation: false,
+    inputId: id,
+    inputValue: actualSelectInputValue,
+    isDisabled: isDisabled,
+    isRequired: isRequired,
+    menuIsOpen: menuIsOpen,
+    onBlur: onSelectBlur,
+    onChange: onSelectChange,
+    onFocus: onSelectFocus,
+    onInputChange: handleSelectInputChange,
+    placeholder: getPlaceholder({
+      placeholder: placeholder,
+      l10n: l10n
+    })
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
+    ,
+    styles: mergedStyles,
+    value: initialValue
+  }, selectProps, {
+    // These are below the spread because I don't know what is in
+    // selectProps or not and what wil be overwritten
+    isClearable: true,
+    isInvalid: isInvalid,
+    spacing: spacing,
+    testId: testId
+    // These aren't part of `Select`'s API, but we're using them here.
+    // @ts-ignore --  Property 'calendarContainerRef' does not exist on type 'IntrinsicAttributes & LibraryManagedAttributes<(<Option extends unknown = OptionType, IsMulti extends boolean = false>(props: AtlaskitSelectProps<Option, IsMulti> & { ...; }) => Element), AtlaskitSelectProps<...> & { ...; }>'.
+    ,
+    calendarContainerRef: calendarProps.calendarContainerRef,
+    calendarDisabled: calendarProps.calendarDisabled,
+    calendarDisabledDateFilter: calendarProps.calendarDisabledDateFilter,
+    calendarLocale: calendarProps.calendarLocale,
+    calendarMaxDate: calendarProps.calendarMaxDate,
+    calendarMinDate: calendarProps.calendarMinDate,
+    calendarRef: calendarProps.calendarRef,
+    calendarValue: calendarProps.calendarValue,
+    calendarView: calendarProps.calendarView,
+    calendarWeekStartDay: calendarProps.calendarWeekStartDay,
+    nextMonthLabel: nextMonthLabel,
+    onCalendarChange: calendarProps.onCalendarChange,
+    onCalendarSelect: calendarProps.onCalendarSelect,
+    previousMonthLabel: previousMonthLabel,
+    shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay,
+    menuInnerWrapper: calendarProps.menuInnerWrapper
+  })), shouldShowCalendarButton && !isDisabled ? /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(styles.iconContainerStyles, value && !hideIcon ? styles.iconSpacingWithClearButtonStyles : styles.iconSpacingWithoutClearButtonStyles)
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    appearance: "subtle",
+    label: !inputLabelId ? fullopenCalendarLabel : openCalendarLabel,
+    "aria-labelledby": inputLabelId ? `${inputLabelId} ${openCalendarLabelId}` : undefined,
+    id: openCalendarLabelId,
+    icon: iconProps => /*#__PURE__*/React.createElement(CalendarIcon, _extends({}, iconProps, {
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+      color: "var(--ds-icon, #44546F)"
+    })),
+    onClick: onCalendarButtonClick,
+    onKeyDown: onCalendarButtonKeyDown,
+    ref: calendarButtonRef,
+    testId: testId && `${testId}--open-calendar-button`
+  })) : null);
 });
 export default DatePicker;