@atlaskit/datetime-picker 15.13.0 → 16.0.0

package/dist/cjs/components/date-picker.js

@@ -1,648 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var _dateFns = require("date-fns");
-var _analyticsNext = require("@atlaskit/analytics-next");
-var _new = require("@atlaskit/button/new");
-var _useId = require("@atlaskit/ds-lib/use-id");
-var _calendar = _interopRequireDefault(require("@atlaskit/icon/core/migration/calendar"));
-var _calendar2 = _interopRequireDefault(require("@atlaskit/icon/glyph/calendar"));
-var _locale = require("@atlaskit/locale");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _primitives = require("@atlaskit/primitives");
-var _select = _interopRequireWildcard(require("@atlaskit/select"));
-var _internal = require("../internal");
-var _datePickerMigration = require("../internal/date-picker-migration");
-var _indicatorsContainer = require("../internal/indicators-container");
-var _menu = require("../internal/menu");
-var _parseDate = require("../internal/parse-date");
-var _singleValue = require("../internal/single-value");
-var _excluded = ["appearance", "autoFocus", "clearControlLabel", "hideIcon", "openCalendarLabel", "defaultIsOpen", "defaultValue", "disabled", "disabledDateFilter", "icon", "id", "innerProps", "inputLabel", "inputLabelId", "isDisabled", "isInvalid", "isRequired", "label", "name", "onBlur", "onChange", "onFocus", "selectProps", "shouldShowCalendarButton", "spacing", "locale", "value", "isOpen", "maxDate", "minDate", "weekStartDay", "formatDisplayLabel", "testId", "aria-describedby", "placeholder", "nextMonthLabel", "previousMonthLabel"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.13.0";
-var analyticsAttributes = {
-  componentName: 'datePicker',
-  packageName: packageName,
-  packageVersion: packageVersion
-};
-var pickerContainerStyles = (0, _react2.css)({
-  position: 'relative'
-});
-var dropdownIndicatorStyles = (0, _primitives.xcss)({
-  minWidth: "var(--ds-space-300, 24px)",
-  minHeight: "var(--ds-space-300, 24px)",
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-});
-var iconContainerStyles = (0, _primitives.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'
-  }
-});
-var iconSpacingWithClearButtonStyles = (0, _primitives.xcss)({
-  marginInlineEnd: 'space.400'
-});
-var iconSpacingWithoutClearButtonStylesNew = (0, _primitives.xcss)({
-  marginInlineEnd: 'space.050'
-});
-var iconSpacingWithoutClearButtonStyles = (0, _primitives.xcss)({
-  marginInlineEnd: 'space.025'
-});
-/**
- * __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)
- */
-var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedRef) {
-  var containerRef = (0, _react.useRef)(null);
-  var calendarRef = (0, _react.useRef)(null);
-  var calendarButtonRef = (0, _react.useRef)(null);
-  var CalendarIcon = (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? _calendar.default :
-  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
-  _calendar2.default;
-  var _props$appearance = props.appearance,
-    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
-    _props$autoFocus = props.autoFocus,
-    autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
-    _props$clearControlLa = props.clearControlLabel,
-    clearControlLabel = _props$clearControlLa === void 0 ? 'Clear' : _props$clearControlLa,
-    _props$hideIcon = props.hideIcon,
-    hideIcon = _props$hideIcon === void 0 ? false : _props$hideIcon,
-    _props$openCalendarLa = props.openCalendarLabel,
-    openCalendarLabel = _props$openCalendarLa === void 0 ? 'Open calendar' : _props$openCalendarLa,
-    _props$defaultIsOpen = props.defaultIsOpen,
-    defaultIsOpen = _props$defaultIsOpen === void 0 ? false : _props$defaultIsOpen,
-    _props$defaultValue = props.defaultValue,
-    defaultValue = _props$defaultValue === void 0 ? '' : _props$defaultValue,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? [] : _props$disabled,
-    _props$disabledDateFi = props.disabledDateFilter,
-    disabledDateFilter = _props$disabledDateFi === void 0 ? function (_) {
-      return false;
-    } : _props$disabledDateFi,
-    _props$icon = props.icon,
-    Icon = _props$icon === void 0 ? CalendarIcon : _props$icon,
-    _props$id = props.id,
-    id = _props$id === void 0 ? '' : _props$id,
-    _props$innerProps = props.innerProps,
-    innerProps = _props$innerProps === void 0 ? {} : _props$innerProps,
-    _props$inputLabel = props.inputLabel,
-    inputLabel = _props$inputLabel === void 0 ? 'Date picker' : _props$inputLabel,
-    inputLabelId = props.inputLabelId,
-    _props$isDisabled = props.isDisabled,
-    isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
-    _props$isInvalid = props.isInvalid,
-    isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
-    _props$isRequired = props.isRequired,
-    isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
-    _props$label = props.label,
-    label = _props$label === void 0 ? '' : _props$label,
-    _props$name = props.name,
-    name = _props$name === void 0 ? '' : _props$name,
-    _props$onBlur = props.onBlur,
-    onBlur = _props$onBlur === void 0 ? function (_event) {} : _props$onBlur,
-    _props$onChange = props.onChange,
-    onChangeProp = _props$onChange === void 0 ? function (_value) {} : _props$onChange,
-    _props$onFocus = props.onFocus,
-    onFocus = _props$onFocus === void 0 ? function (_event) {} : _props$onFocus,
-    _props$selectProps = props.selectProps,
-    selectProps = _props$selectProps === void 0 ? {} : _props$selectProps,
-    shouldShowCalendarButton = props.shouldShowCalendarButton,
-    _props$spacing = props.spacing,
-    spacing = _props$spacing === void 0 ? 'default' : _props$spacing,
-    _props$locale = props.locale,
-    propLocale = _props$locale === void 0 ? 'en-US' : _props$locale,
-    propValue = props.value,
-    isOpenProp = props.isOpen,
-    maxDate = props.maxDate,
-    minDate = props.minDate,
-    weekStartDay = props.weekStartDay,
-    formatDisplayLabel = props.formatDisplayLabel,
-    testId = props.testId,
-    ariaDescribedBy = props['aria-describedby'],
-    placeholder = props.placeholder,
-    nextMonthLabel = props.nextMonthLabel,
-    previousMonthLabel = props.previousMonthLabel,
-    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var _useState = (0, _react.useState)(defaultIsOpen),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    _ = _useState4[0],
-    setIsFocused = _useState4[1];
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    clearingFromIcon = _useState6[0],
-    setClearingFromIcon = _useState6[1];
-  var _useState7 = (0, _react.useState)(selectProps.inputValue),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    selectInputValue = _useState8[0],
-    setSelectInputValue = _useState8[1];
-  var _useState9 = (0, _react.useState)(propValue || defaultValue),
-    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    value = _useState10[0],
-    setValue = _useState10[1];
-  var _useState11 = (0, _react.useState)(propValue || defaultValue || (0, _parseDate.getShortISOString)(new Date())),
-    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-    calendarValue = _useState12[0],
-    setCalendarValue = _useState12[1];
-  var _useState13 = (0, _react.useState)((0, _locale.createLocalizationProvider)(propLocale)),
-    _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-    l10n = _useState14[0],
-    setL10n = _useState14[1];
-  var _useState15 = (0, _react.useState)(propLocale),
-    _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-    locale = _useState16[0],
-    setLocale = _useState16[1];
-  var _useState17 = (0, _react.useState)(false),
-    _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
-    shouldSetFocusOnCurrentDay = _useState18[0],
-    setShouldSetFocusOnCurrentDay = _useState18[1];
-  var _useState19 = (0, _react.useState)(false),
-    _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
-    isKeyDown = _useState20[0],
-    setIsKeyDown = _useState20[1];
-  var _useState21 = (0, _react.useState)(false),
-    _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
-    wasOpenedFromCalendarButton = _useState22[0],
-    setWasOpenedFromCalendarButton = _useState22[1];
-
-  // Hack to force update: https://legacy.reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
-  var _useReducer = (0, _react.useReducer)(function (x) {
-      return !x;
-    }, true),
-    _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
-    forceUpdate = _useReducer2[1];
-  var onChangePropWithAnalytics = (0, _analyticsNext.usePlatformLeafEventHandler)(_objectSpread({
-    fn: onChangeProp,
-    action: 'selectedDate',
-    actionSubject: 'datePicker'
-  }, analyticsAttributes));
-  if (propLocale !== locale) {
-    setL10n((0, _locale.createLocalizationProvider)(propLocale));
-    setLocale(propLocale);
-  }
-  (0, _react.useEffect)(function () {
-    // We don't want the focus to move if this is a click event
-    if (!isKeyDown) {
-      return;
-    }
-    if (isOpen && wasOpenedFromCalendarButton) {
-      var _calendarRef$current;
-      setIsKeyDown(false);
-      // Focus on the first button within the calendar
-      calendarRef === null || calendarRef === void 0 || (_calendarRef$current = calendarRef.current) === null || _calendarRef$current === void 0 || (_calendarRef$current = _calendarRef$current.querySelector('button')) === null || _calendarRef$current === void 0 || _calendarRef$current.focus();
-    }
-  }, [isKeyDown, calendarRef, isOpen, wasOpenedFromCalendarButton]);
-  var getValue = function getValue() {
-    return propValue !== null && propValue !== void 0 ? propValue : value;
-  };
-  var getIsOpen = function getIsOpen() {
-    return isOpenProp !== null && isOpenProp !== void 0 ? isOpenProp : isOpen;
-  };
-  var onCalendarChange = function onCalendarChange(_ref) {
-    var iso = _ref.iso;
-    setCalendarValue((0, _datePickerMigration.getParsedISO)({
-      iso: iso
-    }));
-  };
-  var onCalendarSelect = function onCalendarSelect(_ref2) {
-    var iso = _ref2.iso;
-    setSelectInputValue('');
-    setIsOpen(false);
-    setCalendarValue(iso);
-    setValue(iso);
-    setWasOpenedFromCalendarButton(false);
-    onChangePropWithAnalytics(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 (wasOpenedFromCalendarButton) {
-      var _calendarButtonRef$cu;
-      (_calendarButtonRef$cu = calendarButtonRef.current) === null || _calendarButtonRef$cu === void 0 || _calendarButtonRef$cu.focus();
-    } else {
-      var _containerRef$current;
-      var innerCombobox = containerRef === null || containerRef === void 0 || (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelector('[role="combobox"]');
-      innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
-    }
-    setIsOpen(false);
-  };
-  var onInputClick = function onInputClick() {
-    if (!isDisabled && !getIsOpen()) {
-      setIsOpen(true);
-      setWasOpenedFromCalendarButton(false);
-    }
-  };
-  var onContainerBlur = function onContainerBlur(event) {
-    var _containerRef$current2;
-    var newlyFocusedElement = event.relatedTarget;
-    if (!(containerRef !== null && containerRef !== void 0 && (_containerRef$current2 = containerRef.current) !== null && _containerRef$current2 !== void 0 && _containerRef$current2.contains(newlyFocusedElement))) {
-      setIsOpen(false);
-      setShouldSetFocusOnCurrentDay(false);
-      setWasOpenedFromCalendarButton(false);
-      onBlur(event);
-    }
-  };
-  var onContainerFocus = function onContainerFocus() {
-    setShouldSetFocusOnCurrentDay(false);
-  };
-  var onSelectBlur = function onSelectBlur(event) {
-    var _containerRef$current3;
-    var newlyFocusedElement = event.relatedTarget;
-    if (clearingFromIcon) {
-      // Don't close menu if blurring after the user has clicked clear
-      setClearingFromIcon(false);
-    } else if (!(containerRef !== null && containerRef !== void 0 && (_containerRef$current3 = containerRef.current) !== null && _containerRef$current3 !== void 0 && _containerRef$current3.contains(newlyFocusedElement))) {
-      // Don't close menu if focus is staying within the date picker's
-      // container. Makes keyboard accessibility of calendar possible
-      setIsOpen(false);
-      setIsFocused(false);
-      setWasOpenedFromCalendarButton(false);
-    }
-  };
-  var onSelectFocus = function onSelectFocus(event) {
-    var value = getValue();
-    if (clearingFromIcon) {
-      // Don't open menu if focussing after the user has clicked clear
-      setClearingFromIcon(false);
-    } else {
-      // Don't open when focused into via keyboard if the calendar button is present
-      setIsOpen(!shouldShowCalendarButton);
-      setCalendarValue(value);
-      setIsFocused(true);
-      setWasOpenedFromCalendarButton(false);
-    }
-    onFocus(event);
-  };
-  var onTextInput = function onTextInput(event) {
-    var inputValue = event.target.value;
-    if (inputValue) {
-      var parsed = (0, _datePickerMigration.parseDate)(inputValue, {
-        parseInputValue: rest === null || rest === void 0 ? void 0 : rest.parseInputValue,
-        dateFormat: rest === null || rest === void 0 ? void 0 : rest.dateFormat,
-        l10n: l10n
-      });
-      // Only try to set the date if we have month & day
-      if (parsed && (0, _dateFns.isValid)(parsed)) {
-        // We format the parsed date to YYYY-MM-DD here because
-        // this is the format expected by the @atlaskit/calendar component
-        setCalendarValue((0, _parseDate.getShortISOString)(parsed));
-      }
-    }
-    setIsOpen(true);
-    setWasOpenedFromCalendarButton(false);
-  };
-  var onInputKeyDown = function onInputKeyDown(event) {
-    var value = getValue();
-    var keyPressed = event.key.toLowerCase();
-
-    // If the input is focused and the calendar is not visible, handle space and enter clicks
-    if (!isOpen && (keyPressed === 'enter' || keyPressed === ' ')) {
-      setIsOpen(true);
-      setWasOpenedFromCalendarButton(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 (wasOpenedFromCalendarButton) {
-          var _calendarButtonRef$cu2;
-          (_calendarButtonRef$cu2 = calendarButtonRef.current) === null || _calendarButtonRef$cu2 === void 0 || _calendarButtonRef$cu2.focus();
-        } else {
-          var _containerRef$current4;
-          var innerCombobox = containerRef === null || containerRef === void 0 || (_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.querySelector('[role="combobox"]');
-          innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
-        }
-        setIsOpen(false);
-        setShouldSetFocusOnCurrentDay(false);
-        setWasOpenedFromCalendarButton(false);
-        break;
-      case 'backspace':
-      case 'delete':
-        {
-          var inputCount = 0;
-          if (value && event.target instanceof HTMLInputElement && event.target.value.length <= inputCount) {
-            // If being cleared from keyboard, don't change behaviour
-            setClearingFromIcon(false);
-            setValue('');
-          }
-          break;
-        }
-      case 'enter':
-        if (!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 (!(0, _datePickerMigration.isDateDisabled)(calendarValue, {
-          disabled: disabled
-        })) {
-          // Get a safe `calendarValue` in case the value exceeds the maximum
-          // allowed by ISO 8601
-          var safeCalendarValue = (0, _parseDate.getSafeCalendarValue)(calendarValue);
-          var valueChanged = safeCalendarValue !== value;
-          setSelectInputValue('');
-          setIsOpen(false);
-          setValue(safeCalendarValue);
-          setCalendarValue(safeCalendarValue);
-          setWasOpenedFromCalendarButton(wasOpenedFromCalendarButton);
-          if (valueChanged) {
-            onChangePropWithAnalytics(safeCalendarValue);
-          }
-        }
-        break;
-      case 'arrowdown':
-      case 'arrowup':
-        if (!shouldSetFocusOnCurrentDay) {
-          setIsOpen(true);
-          setShouldSetFocusOnCurrentDay(true);
-        }
-        break;
-      default:
-        break;
-    }
-  };
-  var onCalendarButtonKeyDown = function 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();
-      setIsKeyDown(true);
-      setWasOpenedFromCalendarButton(true);
-    }
-  };
-
-  // This event handler is triggered from both keydown and click. It's weird.
-  var onCalendarButtonClick = function onCalendarButtonClick(e) {
-    setIsOpen(!isOpen);
-    setWasOpenedFromCalendarButton(true);
-    e.stopPropagation();
-  };
-  var onClear = function onClear() {
-    setValue('');
-    setCalendarValue(defaultValue || (0, _parseDate.getShortISOString)(new Date()));
-    if (!hideIcon) {
-      setClearingFromIcon(true);
-    }
-    onChangePropWithAnalytics('');
-  };
-
-  // `unknown` is used because `value` is unused so it does not matter.
-  var onSelectChange = function onSelectChange(_value, action) {
-    // Used for native clear event in React Select
-    // Triggered when clicking ClearIndicator or backspace with no value
-    if (action.action === 'clear') {
-      onClear();
-    }
-  };
-  var handleSelectInputChange = function handleSelectInputChange(selectInputValue, actionMeta) {
-    if (selectProps.onInputChange) {
-      selectProps.onInputChange(selectInputValue, actionMeta);
-    }
-    setSelectInputValue(selectInputValue);
-  };
-  var getContainerRef = (0, _react.useCallback)(function (ref) {
-    var oldRef = containerRef.current;
-    containerRef.current = 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) {
-      forceUpdate();
-    }
-  }, [containerRef]);
-  var getterValue = getValue();
-  var actualSelectInputValue;
-  actualSelectInputValue = selectInputValue;
-  var menuIsOpen = getIsOpen() && !isDisabled;
-  var showClearIndicator = Boolean((getterValue || selectInputValue) && !hideIcon);
-  var clearIndicator = Icon;
-
-  // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
-  if ((0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration')) {
-    clearIndicator = function clearIndicator(props) {
-      return (0, _react2.jsx)(_primitives.Box, {
-        xcss: dropdownIndicatorStyles
-      }, (0, _react2.jsx)(Icon, props));
-    };
-  }
-  var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : clearIndicator;
-  var SingleValue = (0, _singleValue.makeSingleValue)({
-    lang: propLocale
-  });
-  var selectComponents = _objectSpread(_objectSpread({
-    DropdownIndicator: shouldShowCalendarButton ? _internal.EmptyComponent : dropDownIcon
-  }, shouldShowCalendarButton ? {
-    IndicatorsContainer: function IndicatorsContainer(props) {
-      return (0, _react2.jsx)(_indicatorsContainer.IndicatorsContainer, (0, _extends2.default)({}, props, {
-        showClearIndicator: showClearIndicator
-      }));
-    }
-  } : {}), {}, {
-    Menu: _menu.Menu,
-    SingleValue: SingleValue
-  }, !showClearIndicator && {
-    ClearIndicator: _internal.EmptyComponent
-  });
-  var _selectProps$styles = selectProps.styles,
-    selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles;
-  var disabledStyle = isDisabled ? {
-    pointerEvents: 'none',
-    color: "var(--ds-icon-disabled, inherit)"
-  } : {};
-  var calendarProps = {
-    calendarContainerRef: containerRef.current,
-    calendarDisabled: disabled,
-    calendarDisabledDateFilter: disabledDateFilter,
-    calendarMaxDate: maxDate,
-    calendarMinDate: minDate,
-    calendarRef: calendarRef,
-    calendarValue: getterValue && (0, _parseDate.getShortISOString)((0, _dateFns.parseISO)(getterValue)),
-    calendarView: calendarValue,
-    onCalendarChange: onCalendarChange,
-    onCalendarSelect: onCalendarSelect,
-    calendarLocale: locale,
-    calendarWeekStartDay: weekStartDay,
-    shouldSetFocusOnCurrentDay: shouldSetFocusOnCurrentDay
-  };
-
-  // @ts-ignore -- Argument of type 'StylesConfig<OptionType, false, GroupBase<OptionType>>' is not assignable to parameter of type 'StylesConfig<OptionType, boolean, GroupBase<OptionType>>'.
-  var mergedStyles = (0, _select.mergeStyles)(selectStyles, {
-    control: function control(base) {
-      return _objectSpread(_objectSpread({}, base), disabledStyle);
-    },
-    indicatorsContainer: function indicatorsContainer(base) {
-      return _objectSpread(_objectSpread({}, base), {}, {
-        paddingLeft: "var(--ds-space-025, 2px)",
-        // ICON_PADDING = 2
-        paddingRight: "var(--ds-space-075, 6px)" // 8 - ICON_PADDING = 6
-      });
-    }
-  });
-  var initialValue = getterValue ? {
-    label: (0, _datePickerMigration.formatDate)(getterValue, {
-      formatDisplayLabel: formatDisplayLabel,
-      dateFormat: rest === null || rest === void 0 ? void 0 : rest.dateFormat,
-      l10n: l10n
-    }),
-    value: getterValue
-  } : null;
-
-  // `label` takes precedence of the `inputLabel`
-  var fullopenCalendarLabel = label || inputLabel ? "".concat(label || inputLabel, ", ").concat(openCalendarLabel) : openCalendarLabel;
-  var openCalendarLabelId = "open-calendar-label--".concat((0, _useId.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.
-    (0, _react2.jsx)("div", (0, _extends2.default)({}, innerProps, {
-      css: pickerContainerStyles,
-      "data-testid": testId && "".concat(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"
-    }), (0, _react2.jsx)("input", {
-      name: name,
-      type: "hidden",
-      value: getterValue,
-      "data-testid": testId && "".concat(testId, "--input")
-    }), (0, _react2.jsx)(_select.default, (0, _extends2.default)({
-      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: (0, _datePickerMigration.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
-    })), shouldShowCalendarButton && !isDisabled ? (0, _react2.jsx)(_primitives.Box, {
-      xcss: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles :
-      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-      (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
-    }, (0, _react2.jsx)(_new.IconButton, {
-      appearance: "subtle",
-      label: !inputLabelId ? fullopenCalendarLabel : openCalendarLabel,
-      "aria-labelledby": inputLabelId ? "".concat(inputLabelId, " ").concat(openCalendarLabelId) : undefined,
-      id: openCalendarLabelId,
-      icon: function icon(iconProps) {
-        return (0, _react2.jsx)(CalendarIcon, (0, _extends2.default)({}, iconProps, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? {
-          color: "var(--ds-icon, #44546F)"
-        } : {
-          primaryColor: "var(--ds-icon, #44546F)"
-        }));
-      },
-      onClick: onCalendarButtonClick,
-      onKeyDown: onCalendarButtonKeyDown,
-      ref: calendarButtonRef,
-      testId: testId && "".concat(testId, "--open-calendar-button")
-    })) : null)
-  );
-});
+var _ffComponent = require("../internal/ff-component");
+var _datePickerClass = _interopRequireDefault(require("./date-picker-class"));
+var _datePickerFc = _interopRequireDefault(require("./date-picker-fc"));
+var DatePicker = (0, _ffComponent.componentWithCondition)(function () {
+  return (0, _platformFeatureFlags.fg)('dst-date-picker-use-functional-component');
+}, _datePickerFc.default, _datePickerClass.default);
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 var _default = exports.default = DatePicker;