@atlaskit/datetime-picker 15.13.0 → 16.0.0

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

@@ -1,572 +1,7 @@
-import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-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 { useId } 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.13.0";
-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 iconSpacingWithoutClearButtonStylesNew = xcss({
-  marginInlineEnd: 'space.050'
-});
-const iconSpacingWithoutClearButtonStyles = 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)
- */
-const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
-  const containerRef = useRef(null);
-  const calendarRef = useRef(null);
-  const calendarButtonRef = useRef(null);
-  const CalendarIcon = fg('platform-visual-refresh-icon-ads-migration') ? CalendarIconNew :
-  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
-  CalendarIconOld;
-  const {
-    appearance = 'default',
-    autoFocus = false,
-    clearControlLabel = 'Clear',
-    hideIcon = false,
-    openCalendarLabel = 'Open calendar',
-    defaultIsOpen = false,
-    defaultValue = '',
-    disabled = [],
-    disabledDateFilter = _ => false,
-    icon: Icon = CalendarIcon,
-    id = '',
-    innerProps = {},
-    inputLabel = 'Date picker',
-    inputLabelId,
-    isDisabled = false,
-    isInvalid = false,
-    isRequired = false,
-    label = '',
-    name = '',
-    // eslint-disable-next-line @repo/internal/react/use-noop
-    onBlur = _event => {},
-    // eslint-disable-next-line @repo/internal/react/use-noop
-    onChange: onChangeProp = _value => {},
-    // eslint-disable-next-line @repo/internal/react/use-noop
-    onFocus = _event => {},
-    selectProps = {},
-    shouldShowCalendarButton,
-    spacing = 'default',
-    locale: propLocale = 'en-US',
-    value: propValue,
-    isOpen: isOpenProp,
-    maxDate,
-    minDate,
-    weekStartDay,
-    formatDisplayLabel,
-    testId,
-    'aria-describedby': ariaDescribedBy,
-    placeholder,
-    nextMonthLabel,
-    previousMonthLabel,
-    ...rest
-  } = props;
-  const [isOpen, setIsOpen] = useState(defaultIsOpen);
-  const [_, setIsFocused] = useState(false);
-  const [clearingFromIcon, setClearingFromIcon] = useState(false);
-  const [selectInputValue, setSelectInputValue] = useState(selectProps.inputValue);
-  const [value, setValue] = useState(propValue || defaultValue);
-  const [calendarValue, setCalendarValue] = useState(propValue || defaultValue || getShortISOString(new Date()));
-  const [l10n, setL10n] = useState(createLocalizationProvider(propLocale));
-  const [locale, setLocale] = useState(propLocale);
-  const [shouldSetFocusOnCurrentDay, setShouldSetFocusOnCurrentDay] = useState(false);
-  const [isKeyDown, setIsKeyDown] = useState(false);
-  const [wasOpenedFromCalendarButton, setWasOpenedFromCalendarButton] = useState(false);
-
-  // Hack to force update: https://legacy.reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
-  const [, forceUpdate] = useReducer(x => !x, true);
-  const onChangePropWithAnalytics = usePlatformLeafEventHandler({
-    fn: onChangeProp,
-    action: 'selectedDate',
-    actionSubject: 'datePicker',
-    ...analyticsAttributes
-  });
-  if (propLocale !== locale) {
-    setL10n(createLocalizationProvider(propLocale));
-    setLocale(propLocale);
-  }
-  useEffect(() => {
-    // We don't want the focus to move if this is a click event
-    if (!isKeyDown) {
-      return;
-    }
-    if (isOpen && wasOpenedFromCalendarButton) {
-      var _calendarRef$current, _calendarRef$current$;
-      setIsKeyDown(false);
-      // Focus on the first button within the calendar
-      calendarRef === null || calendarRef === void 0 ? void 0 : (_calendarRef$current = calendarRef.current) === null || _calendarRef$current === void 0 ? void 0 : (_calendarRef$current$ = _calendarRef$current.querySelector('button')) === null || _calendarRef$current$ === void 0 ? void 0 : _calendarRef$current$.focus();
-    }
-  }, [isKeyDown, calendarRef, isOpen, wasOpenedFromCalendarButton]);
-  const getValue = () => propValue !== null && propValue !== void 0 ? propValue : value;
-  const getIsOpen = () => isOpenProp !== null && isOpenProp !== void 0 ? isOpenProp : isOpen;
-  const onCalendarChange = ({
-    iso
-  }) => {
-    setCalendarValue(getParsedISO({
-      iso
-    }));
-  };
-  const onCalendarSelect = ({
-    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 ? void 0 : _calendarButtonRef$cu.focus();
-    } else {
-      var _containerRef$current;
-      const innerCombobox = containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelector('[role="combobox"]');
-      innerCombobox === null || innerCombobox === void 0 ? void 0 : innerCombobox.focus();
-    }
-    setIsOpen(false);
-  };
-  const onInputClick = () => {
-    if (!isDisabled && !getIsOpen()) {
-      setIsOpen(true);
-      setWasOpenedFromCalendarButton(false);
-    }
-  };
-  const onContainerBlur = event => {
-    var _containerRef$current2;
-    const 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);
-    }
-  };
-  const onContainerFocus = () => {
-    setShouldSetFocusOnCurrentDay(false);
-  };
-  const onSelectBlur = event => {
-    var _containerRef$current3;
-    const 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);
-    }
-  };
-  const onSelectFocus = event => {
-    const 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);
-  };
-  const onTextInput = event => {
-    const inputValue = event.target.value;
-    if (inputValue) {
-      const parsed = 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 && isValid(parsed)) {
-        // We format the parsed date to YYYY-MM-DD here because
-        // this is the format expected by the @atlaskit/calendar component
-        setCalendarValue(getShortISOString(parsed));
-      }
-    }
-    setIsOpen(true);
-    setWasOpenedFromCalendarButton(false);
-  };
-  const onInputKeyDown = event => {
-    const value = getValue();
-    const 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 ? void 0 : _calendarButtonRef$cu2.focus();
-        } else {
-          var _containerRef$current4;
-          const innerCombobox = containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.querySelector('[role="combobox"]');
-          innerCombobox === null || innerCombobox === void 0 ? void 0 : innerCombobox.focus();
-        }
-        setIsOpen(false);
-        setShouldSetFocusOnCurrentDay(false);
-        setWasOpenedFromCalendarButton(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
-            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 (!isDateDisabled(calendarValue, {
-          disabled
-        })) {
-          // Get a safe `calendarValue` in case the value exceeds the maximum
-          // allowed by ISO 8601
-          const safeCalendarValue = getSafeCalendarValue(calendarValue);
-          const 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;
-    }
-  };
-  const 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.
-  const onCalendarButtonClick = e => {
-    setIsOpen(!isOpen);
-    setWasOpenedFromCalendarButton(true);
-    e.stopPropagation();
-  };
-  const onClear = () => {
-    setValue('');
-    setCalendarValue(defaultValue || getShortISOString(new Date()));
-    if (!hideIcon) {
-      setClearingFromIcon(true);
-    }
-    onChangePropWithAnalytics('');
-  };
-
-  // `unknown` is used because `value` is unused so it does not matter.
-  const 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();
-    }
-  };
-  const handleSelectInputChange = (selectInputValue, actionMeta) => {
-    if (selectProps.onInputChange) {
-      selectProps.onInputChange(selectInputValue, actionMeta);
-    }
-    setSelectInputValue(selectInputValue);
-  };
-  const getContainerRef = useCallback(ref => {
-    const 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]);
-  const getterValue = getValue();
-  let actualSelectInputValue;
-  actualSelectInputValue = selectInputValue;
-  const menuIsOpen = getIsOpen() && !isDisabled;
-  const showClearIndicator = Boolean((getterValue || selectInputValue) && !hideIcon);
-  let clearIndicator = Icon;
-
-  // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
-  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: propLocale
-  });
-  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: containerRef.current,
-    calendarDisabled: disabled,
-    calendarDisabledDateFilter: disabledDateFilter,
-    calendarMaxDate: maxDate,
-    calendarMinDate: minDate,
-    calendarRef: calendarRef,
-    calendarValue: getterValue && getShortISOString(parseISO(getterValue)),
-    calendarView: calendarValue,
-    onCalendarChange,
-    onCalendarSelect,
-    calendarLocale: locale,
-    calendarWeekStartDay: weekStartDay,
-    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 = getterValue ? {
-    label: formatDate(getterValue, {
-      formatDisplayLabel,
-      dateFormat: rest === null || rest === void 0 ? void 0 : rest.dateFormat,
-      l10n: l10n
-    }),
-    value: getterValue
-  } : null;
-
-  // `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
-    })), shouldShowCalendarButton && !isDisabled ? 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(CalendarIcon, _extends({}, iconProps, 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 && `${testId}--open-calendar-button`
-    })) : null)
-  );
-});
+import { componentWithCondition } from '../internal/ff-component';
+import DatePickerOld from './date-picker-class';
+import DatePickerNew from './date-picker-fc';
+const DatePicker = componentWithCondition(() => fg('dst-date-picker-use-functional-component'), DatePickerNew, DatePickerOld);
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default DatePicker;