@atlaskit/datetime-picker 15.12.1 → 15.13.0

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

@@ -1,660 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-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 { IdProvider } from '@atlaskit/ds-lib/use-id';
-import CalendarIconNew from '@atlaskit/icon/core/migration/calendar';
-import CalendarIconOld from '@atlaskit/icon/glyph/calendar';
-import { createLocalizationProvider } from '@atlaskit/locale';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, xcss } from '@atlaskit/primitives';
-import Select, { mergeStyles } from '@atlaskit/select';
-import { EmptyComponent } from '../internal';
-import { formatDate, getParsedISO, getPlaceholder, isDateDisabled, parseDate } from '../internal/date-picker-migration';
-import { IndicatorsContainer } from '../internal/indicators-container';
-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 = "15.12.1";
-const dropdownIndicatorStyles = xcss({
-  minWidth: "var(--ds-space-300, 24px)",
-  minHeight: "var(--ds-space-300, 24px)",
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-});
-const datePickerDefaultProps = {
-  defaultIsOpen: false,
-  defaultValue: '',
-  disabled: [],
-  disabledDateFilter: _ => false,
-  locale: 'en-US',
-  // These disables are here for proper typing when used as defaults. They
-  // should *not* use the `noop` function.
-  /* eslint-disable @repo/internal/react/use-noop */
-  onBlur: _event => {},
-  onChange: _value => {},
-  onFocus: _event => {}
-  /* eslint-enable @repo/internal/react/use-noop */
-  // 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 iconSpacingWithoutClearButtonStylesNew = xcss({
-  marginInlineEnd: 'space.050'
-});
-const iconSpacingWithoutClearButtonStyles = xcss({
-  marginInlineEnd: 'space.025'
-});
-
-// eslint-disable-next-line @repo/internal/react/no-class-components
-class DatePickerComponent extends Component {
-  constructor(props) {
-    var _this$props$selectPro2;
-    super(props);
-    _defineProperty(this, "containerRef", null);
-    _defineProperty(this, "calendarRef", /*#__PURE__*/createRef());
-    _defineProperty(this, "calendarButtonRef", /*#__PURE__*/createRef());
-    _defineProperty(this, "CalendarIcon", fg('platform-visual-refresh-icon-ads-migration') ? CalendarIconNew :
-    // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
-    CalendarIconOld);
-    // All state needs to be accessed via this function so that the state is mapped from props
-    // correctly to allow controlled/uncontrolled usage.
-    _defineProperty(this, "getValue", () => {
-      var _this$props$value;
-      return (_this$props$value = this.props.value) !== null && _this$props$value !== void 0 ? _this$props$value : this.state.value;
-    });
-    _defineProperty(this, "getIsOpen", () => {
-      var _this$props$isOpen;
-      return (_this$props$isOpen = this.props.isOpen) !== null && _this$props$isOpen !== void 0 ? _this$props$isOpen : this.state.isOpen;
-    });
-    _defineProperty(this, "onCalendarChange", ({
-      iso
-    }) => {
-      this.setState({
-        calendarValue: getParsedISO({
-          iso
-        })
-      });
-    });
-    _defineProperty(this, "onCalendarSelect", ({
-      iso
-    }) => {
-      this.setState({
-        selectInputValue: '',
-        isOpen: false,
-        calendarValue: iso,
-        value: iso,
-        wasOpenedFromCalendarButton: false
-      });
-      this.props.onChange(iso);
-
-      // Yes, this is not ideal. The alternative is to be able to place a ref
-      // on the inner input of Select itself, which would require a lot of
-      // extra stuff in the Select component for only this one thing. While
-      // this would be more "React-y", it doesn't seem to pose any other
-      // benefits. Performance-wise, we are only searching within the
-      // container, so it's quick.
-      if (this.state.wasOpenedFromCalendarButton) {
-        var _this$calendarButtonR;
-        (_this$calendarButtonR = this.calendarButtonRef.current) === null || _this$calendarButtonR === void 0 ? void 0 : _this$calendarButtonR.focus();
-      } else {
-        var _this$containerRef;
-        const innerCombobox = (_this$containerRef = this.containerRef) === null || _this$containerRef === void 0 ? void 0 : _this$containerRef.querySelector('[role="combobox"]');
-        innerCombobox === null || innerCombobox === void 0 ? void 0 : innerCombobox.focus();
-      }
-      this.setState({
-        isOpen: false
-      });
-    });
-    _defineProperty(this, "onInputClick", () => {
-      if (!this.props.isDisabled && !this.getIsOpen()) {
-        this.setState({
-          isOpen: true,
-          wasOpenedFromCalendarButton: false
-        });
-      }
-    });
-    _defineProperty(this, "onContainerBlur", event => {
-      var _this$containerRef2;
-      const newlyFocusedElement = event.relatedTarget;
-      if (!((_this$containerRef2 = this.containerRef) !== null && _this$containerRef2 !== void 0 && _this$containerRef2.contains(newlyFocusedElement))) {
-        this.setState({
-          isOpen: false,
-          shouldSetFocusOnCurrentDay: false,
-          wasOpenedFromCalendarButton: false
-        });
-        this.props.onBlur(event);
-      }
-    });
-    _defineProperty(this, "onContainerFocus", () => {
-      this.setState({
-        shouldSetFocusOnCurrentDay: false
-      });
-    });
-    _defineProperty(this, "onSelectBlur", event => {
-      var _this$containerRef3;
-      const newlyFocusedElement = event.relatedTarget;
-      if (this.state.clearingFromIcon) {
-        // Don't close menu if blurring after the user has clicked clear
-        this.setState({
-          clearingFromIcon: false
-        });
-      } else if (!((_this$containerRef3 = this.containerRef) !== null && _this$containerRef3 !== void 0 && _this$containerRef3.contains(newlyFocusedElement))) {
-        // Don't close menu if focus is staying within the date picker's
-        // container. Makes keyboard accessibility of calendar possible
-        this.setState({
-          isOpen: false,
-          isFocused: false,
-          wasOpenedFromCalendarButton: false
-        });
-      }
-    });
-    _defineProperty(this, "onSelectFocus", event => {
-      const {
-        clearingFromIcon
-      } = this.state;
-      const value = this.getValue();
-      if (clearingFromIcon) {
-        // Don't open menu if focussing after the user has clicked clear
-        this.setState({
-          clearingFromIcon: false
-        });
-      } else {
-        this.setState({
-          // Don't open when focused into via keyboard if the calendar button is present
-          isOpen: !this.props.shouldShowCalendarButton,
-          calendarValue: value,
-          isFocused: true,
-          wasOpenedFromCalendarButton: false
-        });
-      }
-      this.props.onFocus(event);
-    });
-    _defineProperty(this, "onTextInput", event => {
-      const inputValue = event.target.value;
-      if (inputValue) {
-        const parsed = parseDate(inputValue, {
-          parseInputValue: this.props.parseInputValue,
-          dateFormat: this.props.dateFormat,
-          l10n: this.state.l10n
-        });
-        // Only try to set the date if we have month & day
-        if (parsed && isValid(parsed)) {
-          // We format the parsed date to YYYY-MM-DD here because
-          // this is the format expected by the @atlaskit/calendar component
-          this.setState({
-            calendarValue: getShortISOString(parsed)
-          });
-        }
-      }
-      this.setState({
-        isOpen: true,
-        wasOpenedFromCalendarButton: false
-      });
-    });
-    _defineProperty(this, "onInputKeyDown", event => {
-      const {
-        calendarValue
-      } = this.state;
-      const value = this.getValue();
-      const keyPressed = event.key.toLowerCase();
-
-      // If the input is focused and the calendar is not visible, handle space and enter clicks
-      if (!this.state.isOpen && (keyPressed === 'enter' || keyPressed === ' ')) {
-        this.setState({
-          isOpen: true,
-          wasOpenedFromCalendarButton: false
-        });
-      }
-      switch (keyPressed) {
-        case 'escape':
-          // Yes, this is not ideal. The alternative is to be able to place a ref
-          // on the inner input of Select itself, which would require a lot of
-          // extra stuff in the Select component for only this one thing. While
-          // this would be more "React-y", it doesn't seem to pose any other
-          // benefits. Performance-wise, we are only searching within the
-          // container, so it's quick.
-          if (this.state.wasOpenedFromCalendarButton) {
-            var _this$calendarButtonR2;
-            (_this$calendarButtonR2 = this.calendarButtonRef.current) === null || _this$calendarButtonR2 === void 0 ? void 0 : _this$calendarButtonR2.focus();
-          } else {
-            var _this$containerRef4;
-            const innerCombobox = (_this$containerRef4 = this.containerRef) === null || _this$containerRef4 === void 0 ? void 0 : _this$containerRef4.querySelector('[role="combobox"]');
-            innerCombobox === null || innerCombobox === void 0 ? void 0 : innerCombobox.focus();
-          }
-          this.setState({
-            isOpen: false,
-            shouldSetFocusOnCurrentDay: false,
-            wasOpenedFromCalendarButton: false
-          });
-          break;
-        case 'backspace':
-        case 'delete':
-          {
-            const inputCount = 0;
-            if (value && event.target instanceof HTMLInputElement && event.target.value.length <= inputCount) {
-              // If being cleared from keyboard, don't change behaviour
-              this.setState({
-                clearingFromIcon: false,
-                value: ''
-              });
-            }
-            break;
-          }
-        case 'enter':
-          if (!this.state.isOpen) {
-            return;
-          }
-          // Prevent form submission when a date is selected
-          // using enter. See https://product-fabric.atlassian.net/browse/DSP-2501
-          // for more details.
-          event.preventDefault();
-          if (!isDateDisabled(calendarValue, {
-            disabled: this.props.disabled
-          })) {
-            // Get a safe `calendarValue` in case the value exceeds the maximum
-            // allowed by ISO 8601
-            const safeCalendarValue = getSafeCalendarValue(calendarValue);
-            const valueChanged = safeCalendarValue !== value;
-            this.setState({
-              selectInputValue: '',
-              isOpen: false,
-              value: safeCalendarValue,
-              calendarValue: safeCalendarValue,
-              wasOpenedFromCalendarButton: false
-            });
-            if (valueChanged) {
-              this.props.onChange(safeCalendarValue);
-            }
-          }
-          break;
-        case 'arrowdown':
-        case 'arrowup':
-          if (!this.state.shouldSetFocusOnCurrentDay) {
-            this.setState({
-              isOpen: true,
-              shouldSetFocusOnCurrentDay: true
-            });
-          }
-          break;
-        default:
-          break;
-      }
-    });
-    _defineProperty(this, "onCalendarButtonKeyDown", e => {
-      // Don't allow an arrow up or down to open the menu, since the input key
-      // down handler is actually on the parent.
-      if (e.type === 'keydown' && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
-        e.stopPropagation();
-      }
-      // We want to stop this from triggering other keydown events, particularly
-      // for space and enter presses. Otherwise, it opens and then closes
-      // immediately.
-      if (e.type === 'keydown' && (e.key === ' ' || e.key === 'Enter')) {
-        e.stopPropagation();
-        this.setState({
-          isKeyDown: true,
-          wasOpenedFromCalendarButton: true
-        });
-      }
-    });
-    // This event handler is triggered from both keydown and click. It's weird.
-    _defineProperty(this, "onCalendarButtonClick", e => {
-      this.setState({
-        isOpen: !this.state.isOpen,
-        wasOpenedFromCalendarButton: true
-      }, () => {
-        var _this$calendarRef, _this$calendarRef$cur, _this$calendarRef$cur2;
-        // We don't want the focus to move if this is a click event
-        if (!this.state.isKeyDown) {
-          return;
-        }
-        this.setState({
-          isKeyDown: false
-        });
-
-        // Focus on the first button within the calendar
-        (_this$calendarRef = this.calendarRef) === null || _this$calendarRef === void 0 ? void 0 : (_this$calendarRef$cur = _this$calendarRef.current) === null || _this$calendarRef$cur === void 0 ? void 0 : (_this$calendarRef$cur2 = _this$calendarRef$cur.querySelector('button')) === null || _this$calendarRef$cur2 === void 0 ? void 0 : _this$calendarRef$cur2.focus();
-      });
-      e.stopPropagation();
-    });
-    _defineProperty(this, "onClear", () => {
-      let changedState = {
-        value: '',
-        calendarValue: this.props.defaultValue || getShortISOString(new Date())
-      };
-      if (!this.props.hideIcon) {
-        changedState = {
-          ...changedState,
-          clearingFromIcon: true
-        };
-      }
-      this.setState(changedState);
-      this.props.onChange('');
-    });
-    // `unknown` is used because `value` is unused so it does not matter.
-    _defineProperty(this, "onSelectChange", (_value, action) => {
-      // Used for native clear event in React Select
-      // Triggered when clicking ClearIndicator or backspace with no value
-      if (action.action === 'clear') {
-        this.onClear();
-      }
-    });
-    _defineProperty(this, "handleSelectInputChange", (selectInputValue, actionMeta) => {
-      var _this$props$selectPro;
-      const onInputChange = (_this$props$selectPro = this.props.selectProps) === null || _this$props$selectPro === void 0 ? void 0 : _this$props$selectPro.onInputChange;
-      if (onInputChange) {
-        onInputChange(selectInputValue, actionMeta);
-      }
-      this.setState({
-        selectInputValue
-      });
-    });
-    _defineProperty(this, "getContainerRef", ref => {
-      const oldRef = this.containerRef;
-      this.containerRef = ref;
-      // Cause a re-render if we're getting the container ref for the first time
-      // as the layered menu requires it for dimension calculation
-      if (oldRef == null && ref != null) {
-        this.forceUpdate();
-      }
-    });
-    this.state = {
-      isKeyDown: false,
-      isOpen: this.props.defaultIsOpen,
-      isFocused: false,
-      clearingFromIcon: false,
-      selectInputValue: ((_this$props$selectPro2 = this.props.selectProps) === null || _this$props$selectPro2 === void 0 ? void 0 : _this$props$selectPro2.inputValue) || '',
-      value: this.props.value || this.props.defaultValue,
-      calendarValue: this.props.value || this.props.defaultValue || getShortISOString(new Date()),
-      l10n: createLocalizationProvider(this.props.locale),
-      locale: this.props.locale,
-      shouldSetFocusOnCurrentDay: false,
-      wasOpenedFromCalendarButton: false
-    };
-  }
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (nextProps.locale !== prevState.locale) {
-      return {
-        l10n: createLocalizationProvider(nextProps.locale),
-        locale: nextProps.locale
-      };
-    } else {
-      return null;
-    }
-  }
-  render() {
-    const {
-      appearance = 'default',
-      'aria-describedby': ariaDescribedBy,
-      autoFocus = false,
-      clearControlLabel = 'Clear',
-      hideIcon = false,
-      openCalendarLabel = 'Open calendar',
-      disabled,
-      disabledDateFilter,
-      icon: Icon = this.CalendarIcon,
-      id = '',
-      innerProps = {},
-      inputLabel = 'Date picker',
-      inputLabelId,
-      isDisabled = false,
-      isInvalid = false,
-      isRequired = false,
-      label = '',
-      locale,
-      maxDate,
-      minDate,
-      name = '',
-      nextMonthLabel,
-      previousMonthLabel,
-      selectProps = {},
-      shouldShowCalendarButton,
-      spacing = 'default',
-      testId,
-      weekStartDay
-    } = this.props;
-    const {
-      calendarValue,
-      selectInputValue
-    } = this.state;
-    const value = this.getValue();
-    let actualSelectInputValue;
-    actualSelectInputValue = selectInputValue;
-    const menuIsOpen = this.getIsOpen() && !isDisabled;
-    const showClearIndicator = Boolean((value || selectInputValue) && !hideIcon);
-    let clearIndicator = Icon;
-
-    // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-    if (fg('platform-visual-refresh-icons') && fg('platform-visual-refresh-icon-ads-migration')) {
-      clearIndicator = props => jsx(Box, {
-        xcss: dropdownIndicatorStyles
-      }, jsx(Icon, props));
-    }
-    const dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : clearIndicator;
-    const SingleValue = makeSingleValue({
-      lang: this.props.locale
-    });
-    const selectComponents = {
-      DropdownIndicator: shouldShowCalendarButton ? EmptyComponent : dropDownIcon,
-      // 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, {
-          showClearIndicator: showClearIndicator
-        }))
-      } : {}),
-      Menu,
-      SingleValue,
-      ...(!showClearIndicator && {
-        ClearIndicator: EmptyComponent
-      })
-    };
-    const {
-      styles: selectStyles = {}
-    } = selectProps;
-    const disabledStyle = isDisabled ? {
-      pointerEvents: 'none',
-      color: "var(--ds-icon-disabled, inherit)"
-    } : {};
-    const calendarProps = {
-      calendarContainerRef: this.containerRef,
-      calendarDisabled: disabled,
-      calendarDisabledDateFilter: disabledDateFilter,
-      calendarMaxDate: maxDate,
-      calendarMinDate: minDate,
-      calendarRef: this.calendarRef,
-      calendarValue: value && getShortISOString(parseISO(value)),
-      calendarView: calendarValue,
-      onCalendarChange: this.onCalendarChange,
-      onCalendarSelect: this.onCalendarSelect,
-      calendarLocale: locale,
-      calendarWeekStartDay: weekStartDay,
-      shouldSetFocusOnCurrentDay: this.state.shouldSetFocusOnCurrentDay
-    };
-
-    // @ts-ignore -- Argument of type 'StylesConfig<OptionType, false, GroupBase<OptionType>>' is not assignable to parameter of type 'StylesConfig<OptionType, boolean, GroupBase<OptionType>>'.
-    const mergedStyles = mergeStyles(selectStyles, {
-      control: base => ({
-        ...base,
-        ...disabledStyle
-      }),
-      indicatorsContainer: base => ({
-        ...base,
-        paddingLeft: "var(--ds-space-025, 2px)",
-        // ICON_PADDING = 2
-        paddingRight: "var(--ds-space-075, 6px)" // 8 - ICON_PADDING = 6
-      })
-    });
-    const initialValue = value ? {
-      label: formatDate(value, {
-        formatDisplayLabel: this.props.formatDisplayLabel,
-        dateFormat: this.props.dateFormat,
-        l10n: this.state.l10n
-      }),
-      value
-    } : null;
-
-    // `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
-      })), shouldShowCalendarButton && !isDisabled ? jsx(IdProvider, {
-        prefix: "open-calendar-label--"
-      }, ({
-        id: openCalendarLabelId
-      }) => jsx(Box, {
-        xcss: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles :
-        // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-        fg('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
-      }, jsx(IconButton, {
-        appearance: "subtle",
-        label: !inputLabelId ? fullopenCalendarLabel : openCalendarLabel,
-        "aria-labelledby": inputLabelId ? `${inputLabelId} ${openCalendarLabelId}` : undefined,
-        id: openCalendarLabelId,
-        icon: iconProps => jsx(this.CalendarIcon, _extends({}, iconProps, fg('platform-visual-refresh-icon-ads-migration') ? {
-          color: "var(--ds-icon, #44546F)"
-        } : {
-          primaryColor: "var(--ds-icon, #44546F)"
-        })),
-        onClick: this.onCalendarButtonClick,
-        onKeyDown: this.onCalendarButtonKeyDown,
-        ref: this.calendarButtonRef,
-        testId: testId && `${testId}--open-calendar-button`
-      }))) : null)
-    );
-  }
-}
-_defineProperty(DatePickerComponent, "defaultProps", datePickerDefaultProps);
-export { DatePickerComponent as DatePickerWithoutAnalytics };
-
-/**
- * __Date picker__
- *
- * A date picker allows the user to select a particular date.
- *
- * - [Examples](https://atlassian.design/components/datetime-picker/date-picker/examples)
- * - [Code](https://atlassian.design/components/datetime-picker/date-picker/code)
- * - [Usage](https://atlassian.design/components/datetime-picker/date-picker/usage)
- */
-const DatePicker = withAnalyticsContext({
-  componentName: 'datePicker',
-  packageName,
-  packageVersion
-})(withAnalyticsEvents({
-  onChange: createAndFireEvent('atlaskit')({
-    action: 'selectedDate',
-    actionSubject: 'datePicker',
-    attributes: {
-      componentName: 'datePicker',
-      packageName,
-      packageVersion
-    }
-  })
-})(DatePickerComponent));
-export default DatePicker;