@true-engineering/true-react-common-ui-kit 4.0.0-alpha5 → 4.0.0-alpha50

package/src/components/ControlWrapper/ControlWrapper.styles.ts

@@ -1,5 +1,6 @@
 import { animations, createThemedStyles, dimensions, ITweakStyles } from '../../theme';
 import { IThemedPreloaderStyles } from '../ThemedPreloader';
+import { IControlWrapperSizes } from './types';
 
 const { CONTROL, Z_INDEX } = dimensions;
 
@@ -20,10 +21,6 @@ export const useStyles = createThemedStyles('ControlWrapper', {
     zIndex: 0,
   },
 
-  invalid: {
-    zIndex: Z_INDEX.CONTROL_INVALID,
-  },
-
   disabled: {},
 
   focused: {
@@ -31,6 +28,10 @@ export const useStyles = createThemedStyles('ControlWrapper', {
     zIndex: Z_INDEX.CONTROL_FOCUS,
   },
 
+  invalid: {
+    zIndex: Z_INDEX.CONTROL_INVALID,
+  },
+
   withValue: {},
 
   loading: {},
@@ -43,7 +44,7 @@ export const useStyles = createThemedStyles('ControlWrapper', {
     position: 'absolute',
     pointerEvents: 'none',
     left: 'var(--control-padding)',
-    top: '50%',
+    top: 'calc(var(--control-height) / 2)',
     transformOrigin: 'top left',
     transform: 'translateY(-50%)',
     transition: animations.defaultTransition,
@@ -181,5 +182,5 @@ export const useStyles = createThemedStyles('ControlWrapper', {
 
 export type IControlWrapperStyles = ITweakStyles<
   typeof useStyles,
-  { tweakPreloader: IThemedPreloaderStyles }
+  { tweakPreloader: IThemedPreloaderStyles } & IControlWrapperSizes
 >;

package/src/components/ControlWrapper/ControlWrapper.tsx

@@ -4,30 +4,26 @@ import {
   addClickHandler,
   addDataAttributes,
   addDataTestId,
+  getArray,
+  isArrayNotEmpty,
   isNotEmpty,
   isReactNodeNotEmpty,
-  isString,
 } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../hooks';
+import { IMaybeArray } from '../../theme';
 import { IClickHandlerEvent, ICommonProps } from '../../types';
 import { Icon, IIcon, renderIcon } from '../Icon';
 import { ThemedPreloader } from '../ThemedPreloader';
+import { convertToControlWrapperIcon } from './helpers';
+import { IControlWrapperIcon, IControlWrapperSize, IGroupPlacement } from './types';
 import { IControlWrapperStyles, useStyles } from './ControlWrapper.styles';
 
 export interface IControlWrapperProps extends ICommonProps<IControlWrapperStyles> {
   children: ReactNode;
   label?: ReactNode;
-  icon?: IIcon;
-  groupPlacement?:
-    | 'left'
-    | 'right'
-    | 'middle'
-    | 'top'
-    | 'bottom'
-    | 'top-left'
-    | 'top-right'
-    | 'bottom-left'
-    | 'bottom-right';
+  icon?: IMaybeArray<IIcon | IControlWrapperIcon>;
+  size?: IControlWrapperSize;
+  groupPlacement?: IGroupPlacement;
   /** @default false */
   isInvalid?: boolean;
   /** @default false */
@@ -42,7 +38,8 @@ export interface IControlWrapperProps extends ICommonProps<IControlWrapperStyles
   isLoading?: boolean;
   /** @default false */
   isDisabled?: boolean;
-  onIconClick?: (event: IClickHandlerEvent) => void;
+  /** @default false */
+  isActive?: boolean;
   onClear?: (event: IClickHandlerEvent) => void;
 }
 
@@ -55,20 +52,23 @@ export const ControlWrapper: FC<IControlWrapperProps> = ({
   isRequired,
   isLoading,
   isFullWidth,
+  isActive,
   isDisabled,
   hasValue,
+  size,
   testId,
   children,
   tweakStyles,
   data,
-  onIconClick,
   onClear,
 }) => {
   const classes = useStyles({ theme: tweakStyles });
 
-  const hasEndIcon = !isLoading && isReactNodeNotEmpty(icon);
+  const icons = getArray(icon).map(convertToControlWrapperIcon);
+
+  const hasIcons = !isLoading && isArrayNotEmpty(icons);
   const hasClearButton = !isDisabled && !isLoading && hasValue && isNotEmpty(onClear);
-  const hasControls = hasEndIcon || hasClearButton || isLoading;
+  const hasControls = hasIcons || hasClearButton || isLoading;
 
   const tweakPreloaderStyles = useTweakStyles({
     tweakStyles,
@@ -80,7 +80,8 @@ export const ControlWrapper: FC<IControlWrapperProps> = ({
     <div
       className={clsx(
         classes.controlWrapper,
-        isNotEmpty(groupPlacement) && [classes[`placement-${groupPlacement}`]],
+        isNotEmpty(groupPlacement) && classes[`placement-${groupPlacement}`],
+        isNotEmpty(size) && classes[size],
         {
           [classes.invalid]: isInvalid,
           [classes.focused]: isFocused,
@@ -97,7 +98,7 @@ export const ControlWrapper: FC<IControlWrapperProps> = ({
           className={clsx(classes.label, {
             [classes.requiredLabel]: isRequired,
             [classes.disabledLabel]: isDisabled,
-            [classes.activeLabel]: isFocused || hasValue,
+            [classes.activeLabel]: isFocused || hasValue || isActive,
           })}
         >
           {label}
@@ -120,18 +121,20 @@ export const ControlWrapper: FC<IControlWrapperProps> = ({
               </div>
             )}
 
-            {hasEndIcon && (
-              <div
-                className={clsx(classes.icon, classes.endIcon, {
-                  [classes.activeIcon]: !isDisabled && isNotEmpty(onIconClick),
-                  [classes.customIcon]: !isString(icon),
-                })}
-                {...addClickHandler(onIconClick, !isDisabled)}
-                {...addDataTestId(testId, 'icon')}
-              >
-                <div className={classes.iconInner}>{renderIcon(icon)}</div>
-              </div>
-            )}
+            {hasIcons &&
+              icons.map(({ key, iconComponent, onClick, shouldResetSize = false }, index) => (
+                <div
+                  key={key ?? index}
+                  className={clsx(classes.icon, classes.endIcon, {
+                    [classes.activeIcon]: !isDisabled && isNotEmpty(onClick),
+                    [classes.customIcon]: shouldResetSize,
+                  })}
+                  {...addClickHandler(onClick, !isDisabled)}
+                  {...addDataTestId(testId, 'icon')}
+                >
+                  <div className={classes.iconInner}>{renderIcon(iconComponent)}</div>
+                </div>
+              ))}
 
             {isLoading && (
               <div

package/src/components/ControlWrapper/constants.ts

@@ -0,0 +1,11 @@
+export const GROUP_PLACEMENTS = [
+  'left',
+  'right',
+  'middle',
+  'top',
+  'bottom',
+  'top-left',
+  'top-right',
+  'bottom-left',
+  'bottom-right',
+] as const;

package/src/components/ControlWrapper/helpers.ts

@@ -0,0 +1,11 @@
+import { isObject } from '@true-engineering/true-react-platform-helpers';
+import { IIcon } from '../Icon';
+import { IControlWrapperIcon } from './types';
+
+export const isControlWrapperIcon = (
+  iconItem: IIcon | IControlWrapperIcon,
+): iconItem is IControlWrapperIcon => isObject(iconItem) && 'iconComponent' in iconItem;
+
+export const convertToControlWrapperIcon = (
+  iconItem: IIcon | IControlWrapperIcon,
+): IControlWrapperIcon => (isControlWrapperIcon(iconItem) ? iconItem : { iconComponent: iconItem });

package/src/components/ControlWrapper/index.ts

@@ -1,2 +1,5 @@
 export * from './ControlWrapper';
+export * from './helpers';
+export * from './constants';
+export * from './types';
 export type { IControlWrapperStyles } from './ControlWrapper.styles';

package/src/components/ControlWrapper/types.ts

@@ -0,0 +1,19 @@
+import { type Key } from 'react';
+import { IClickHandlerEvent } from '../../types';
+import { IIcon } from '../Icon';
+import { GROUP_PLACEMENTS } from './constants';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface IControlWrapperSizes {}
+
+export type IControlWrapperSize = keyof IControlWrapperSizes;
+
+export type IGroupPlacement = (typeof GROUP_PLACEMENTS)[number];
+
+// подумать над extend HTMLAttributes<HTMLDivElement>
+export interface IControlWrapperIcon {
+  key?: Key;
+  iconComponent: IIcon;
+  onClick?: (event: IClickHandlerEvent) => void;
+  shouldResetSize?: boolean;
+}

package/src/components/DateInput/DateInput.stories.tsx

@@ -1,14 +1,9 @@
-import { useEffect, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { format, isValid } from 'date-fns';
-import { ComponentStory } from '@storybook/react';
-import { DateInput } from './DateInput';
+import { type Meta } from '@storybook/react';
+import { DateInput, IDateInputProps } from './DateInput';
 
-export default {
-  title: 'Inputs/DateInput',
-  component: DateInput,
-};
-
-const Template: ComponentStory<typeof DateInput> = ({ date, startDate, endDate, ...args }) => {
+const Story: FC<IDateInputProps> = ({ date, startDate, endDate, ...args }) => {
   const [value, setValue] = useState(date);
 
   const startDateValue = isValid(startDate)
@@ -35,27 +30,14 @@ const Template: ComponentStory<typeof DateInput> = ({ date, startDate, endDate,
   );
 };
 
-export const Default = Template.bind({});
-
-Default.args = {
-  date: '23.01.2023',
-  startDate: undefined,
-  endDate: undefined,
-  isRange: false,
-};
-
-Default.parameters = {
-  controls: {
-    exclude: [
-      'data',
-      'testId',
-      'tabIndex',
-      'onChange',
-      'onFocus',
-      'onBlur',
-      'onPaste',
-      'onIconClick',
-      'onKeyDown',
-    ],
+const meta: Meta<typeof Story> = {
+  title: 'Inputs/DateInput',
+  component: Story,
+  args: {
+    date: '23.01.2023',
+    isRange: false,
   },
 };
+
+export default meta;
+export const Default = {};

package/src/components/DateInput/DateInput.tsx

@@ -1,6 +1,6 @@
-import { ChangeEvent, forwardRef, MouseEvent } from 'react';
+import { ChangeEvent, forwardRef } from 'react';
 import clsx from 'clsx';
-import { addDataAttributes } from '../../helpers';
+import { addDataAttributes } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { IChangeInputEvent, IInputProps, Input } from '../Input';
@@ -18,7 +18,6 @@ export interface IDateInputProps
   className?: string;
   /** @default false */
   isRange?: boolean;
-  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
   // react-datepicker ожидает event первым аргументом
   onChange?: (event: IChangeInputEvent, value: string) => void;
 }
@@ -71,7 +70,7 @@ export const DateInput = forwardRef<HTMLInputElement, IDateInputProps>(
     };
 
     return (
-      <div className={clsx(classes.root, className)} onClick={onClick} {...addDataAttributes(data)}>
+      <div className={clsx(classes.root, className)} {...addDataAttributes(data)} onClick={onClick}>
         <Input
           {...inputProps}
           ref={ref}

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -1,7 +1,7 @@
-import { useState } from 'react';
-import ru from 'date-fns/locale/ru';
-import { ComponentStory } from '@storybook/react';
-import { DatePicker } from './DatePicker';
+import { FC, useState } from 'react';
+import { ru } from 'date-fns/locale';
+import { type Meta } from '@storybook/react';
+import { DatePicker, IDatePickerProps } from './DatePicker';
 
 const months = [
   'Январь',
@@ -18,19 +18,9 @@ const months = [
   'Декабрь',
 ];
 
-export default {
-  title: 'Inputs/DatePicker',
-  component: DatePicker,
-};
-
-const Template: ComponentStory<typeof DatePicker> = (args) => {
+const Story: FC<IDatePickerProps> = (args) => {
   const [date, setDate] = useState<Date | null>(null);
 
-  const [startDate, setStartDate] = useState<Date | null>(
-    args.startDate ? new Date(args.startDate) : null,
-  );
-  const [endDate, setEndDate] = useState<Date | null>(args.endDate ? new Date(args.endDate) : null);
-
   return (
     <div
       style={{
@@ -50,39 +40,25 @@ const Template: ComponentStory<typeof DatePicker> = (args) => {
           testId="datepicker"
           months={months}
           selectedDate={date}
-          startDate={startDate}
-          endDate={endDate}
+          minDate={new Date()}
           onChangeDate={setDate}
-          onChangeRange={(dates) => {
-            setStartDate(dates?.[0] ?? null);
-            setEndDate(dates?.[1] ?? null);
-          }}
         />
       </div>
     </div>
   );
 };
 
-export const Default = Template.bind({});
-
-Default.args = {
-  label: 'Дата',
-  isRange: false,
-  isClearable: true,
-  shouldRenderPopperInBody: false,
-};
-
-Default.parameters = {
-  controls: {
-    exclude: [
-      'data',
-      'testId',
-      'tabIndex',
-      'onFocus',
-      'onBlur',
-      'onPaste',
-      'onIconClick',
-      'onKeyDown',
-    ],
+const meta: Meta<typeof Story> = {
+  title: 'Inputs/DatePicker',
+  component: Story,
+  args: {
+    label: 'Дата',
+    isRange: false,
+    isClearable: true,
+    shouldRenderPopperInBody: false,
+    popperPlacement: 'bottom-start',
   },
 };
+
+export default meta;
+export const Default = {};

package/src/components/DatePicker/DatePicker.styles.ts

@@ -1,4 +1,4 @@
-import { ITweakStyles, createThemedStyles } from '../../theme';
+import { createThemedStyles, ITweakStyles } from '../../theme';
 import { IDateInputStyles } from '../DateInput';
 
 export const useStyles = createThemedStyles('DatePicker', {
@@ -9,6 +9,8 @@ export const useStyles = createThemedStyles('DatePicker', {
 
   day: {},
 
+  dayInner: {},
+
   datepicker: {},
 
   popper: {

package/src/components/DatePicker/DatePicker.tsx

@@ -1,26 +1,42 @@
-import { FC, FocusEvent, forwardRef, SyntheticEvent, useEffect, useMemo, useState } from 'react';
-import ReactDatePicker from 'react-datepicker';
+import {
+  FC,
+  FocusEvent,
+  SyntheticEvent,
+  forwardRef,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import type ReactDatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import clsx from 'clsx';
 import { isAfter, isBefore, isValid } from 'date-fns';
 import {
+  addDataAttributes,
   isEmpty,
   isNotEmpty,
+  isString,
   isStringNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { useTweakStyles } from '../../hooks';
+import { offset } from '@floating-ui/react';
+import { useMergedRefs, useOnClickOutside, useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { DateInput, EMPTY_DATE_INPUT_VALUE, IDateInputProps } from '../DateInput';
-import { DatePickerHeader, PopperContainer } from './components';
-import { DatePickerComponent, DEFAULT_DATE_FORMAT } from './constants';
+import { DatePickerBase, DatePickerHeader, PopperContainer } from './components';
+import {
+  DEFAULT_DATE_FORMAT,
+  IDatePickerLocale,
+  LocalesMap,
+  OUTSIDE_CLICK_IGNORE_CLASS,
+} from './constants';
 import { areDatesEquals, getDateFormatter, getDateValueParser } from './helpers';
 import { IDatePickerBaseProps, IRange } from './types';
 import { IDatePickerStyles, useStyles } from './DatePicker.styles';
 
 export interface IDatePickerProps extends IDatePickerBaseProps, ICommonProps<IDatePickerStyles> {
   selectedDate?: Date | null;
-  locale: Locale;
+  locale: IDatePickerLocale;
   months?: string[];
   /** @default 'dd.MM.yyyy' */
   dateFormat?: string;
@@ -58,7 +74,6 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
       isClearable,
       strictParsing,
       fixedHeight,
-      excludeScrollbar,
       focusSelectedMonth,
       disabledKeyboardNavigation,
       shouldRenderPopperInBody = false,
@@ -66,8 +81,8 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
       shouldCloseOnSelect,
       showPreviousMonths,
       preventOpenOnFocus,
-      popperModifiers,
-      popperPlacement,
+      popperModifiers = [],
+      popperPlacement = 'bottom-start',
       todayButton,
       highlightDates,
       calendarContainer,
@@ -106,6 +121,10 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
       [dateFormat],
     );
 
+    const datePickerRef = useRef<DatePickerBase>();
+
+    const componentRef = useMergedRefs([ref, datePickerRef]);
+
     const [isOpen, setIsOpen] = useState(false);
 
     const [dateValue, setDateValue] = useState(formatDate(selectedDate));
@@ -153,6 +172,7 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
       }
     };
 
+    // TODO: кажется это можно улучшить, т.к проблему пофиксили (https://github.com/Hacker0x01/react-datepicker/pull/5060)
     const handleChangeDateRangeInput = (value: string) => {
       const newStartDateValue = value.slice(0, 10);
       let newStart = parseDateValue(newStartDateValue);
@@ -236,20 +256,28 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
       setDateRangeValues(startDate, endDate);
     }, [selectedDate, startDate, endDate]);
 
+    // Кастомный обработчик клика снаружи, чтобы можно было поставить фокус на Input при открытом календаре.
+    // Проблема в том, что класс OUTSIDE_CLICK_IGNORE_CLASS висит контейнере Input'а. А react-datepicker
+    // проверяет наличие класса непосредственно на элементе, который вызвал клик, но не на его родителях
+    useOnClickOutside(
+      () => datePickerRef.current?.calendar?.containerRef?.current,
+      (event) => datePickerRef.current?.handleClickOutside(event as MouseEvent),
+      OUTSIDE_CLICK_IGNORE_CLASS,
+    );
+
     return (
       <div className={classes.root} {...addDataAttributes(data)}>
-        <DatePickerComponent
-          ref={ref}
+        <DatePickerBase
+          ref={componentRef}
           minDate={minDate}
           maxDate={maxDate}
-          locale={locale}
+          locale={isString(locale) ? LocalesMap[locale] : locale}
           dateFormat={dateFormat}
           placeholderText={placeholder}
           calendarStartDay={calendarStartDay}
           inline={isInline}
           disabled={isDisabled}
           fixedHeight={fixedHeight}
-          excludeScrollbar={excludeScrollbar}
           showPreviousMonths={showPreviousMonths}
           focusSelectedMonth={focusSelectedMonth}
           monthsShown={monthsShown}
@@ -260,14 +288,16 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
           dayClassName={(v) => clsx(classes.day, dayClassName?.(v))}
           disabledKeyboardNavigation={disabledKeyboardNavigation}
           popperContainer={shouldRenderPopperInBody ? PopperContainer : undefined}
-          popperModifiers={popperModifiers}
+          // Убираем дефолтный отступ в 10px из либы
+          // https://github.com/Hacker0x01/react-datepicker/blob/db67a58de2b05d2681bdf0a4977b606095d514c4/src/with_floating.tsx#L58
+          popperModifiers={[offset(-10), ...popperModifiers]}
           popperPlacement={popperPlacement}
-          selectsRange={isRange}
           strictParsing={strictParsing}
           preventOpenOnFocus={preventOpenOnFocus}
           shouldCloseOnSelect={shouldCloseOnSelect}
           customInputRef={customInputRef}
           customInput={<CustomInput {...dateInputProps} />}
+          renderDayContents={(day) => <div className={classes.dayInner}>{day}</div>}
           renderCustomHeader={
             renderCustomHeader ??
             ((baseProps) => <DatePickerHeader {...baseProps} months={months} />)
@@ -299,6 +329,7 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
                 startDate: start,
                 endDate: end,
                 selected: start,
+                selectsRange: true,
                 onBlur: handleDateRangeInputBlur,
                 onChange: handleChangeRange,
               }

package/src/components/DatePicker/components/DatePickerBase/DatePickerBase.tsx

@@ -0,0 +1,14 @@
+import ReactDatePicker, { DatePickerProps } from 'react-datepicker';
+import { doNothing } from '@true-engineering/true-react-platform-helpers';
+
+export class DatePickerBase extends ReactDatePicker {
+  public handleClickOutside;
+
+  constructor(props: DatePickerProps) {
+    super(props);
+    this.handleClickOutside = this.handleCalendarClickOutside;
+    // Затираем дефолтный обработчик клика снаружи, чтобы обрабатывать его самим
+    // (см. использование useOnClickOutside в DatePicker)
+    this.handleCalendarClickOutside = doNothing;
+  }
+}

package/src/components/DatePicker/components/DatePickerBase/index.ts

@@ -0,0 +1 @@
+export * from './DatePickerBase';

package/src/components/DatePicker/components/PopperContainer/PopperContainer.tsx

@@ -1,6 +1,6 @@
-import { FC, ReactElement, ReactNode } from 'react';
-import { Portal } from 'react-overlays';
+import { FC, PropsWithChildren } from 'react';
+import { FloatingPortal } from '@floating-ui/react';
 
-export const PopperContainer: FC<{ children: ReactNode }> = ({ children }) => (
-  <Portal container={document.body}>{children as ReactElement}</Portal>
+export const PopperContainer: FC<PropsWithChildren> = (props) => (
+  <FloatingPortal root={document.body} {...props} />
 );

package/src/components/DatePicker/components/index.ts

@@ -1,2 +1,3 @@
+export * from './DatePickerBase';
 export * from './DatePickerHeader';
 export * from './PopperContainer';

package/src/components/DatePicker/constants.ts

@@ -1,6 +1,12 @@
-import ReactDatePicker from 'react-datepicker';
+import { enUS as enLocale, ru as ruLocale, type Locale } from 'date-fns/locale';
 
 export const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';
 
-export const DatePickerComponent =
-  (ReactDatePicker as unknown as { default: typeof ReactDatePicker }).default ?? ReactDatePicker;
+export const OUTSIDE_CLICK_IGNORE_CLASS = 'react-datepicker-ignore-onclickoutside';
+
+export const LocalesMap = {
+  ru: ruLocale,
+  en: enLocale,
+} satisfies Record<string, Locale>;
+
+export type IDatePickerLocale = keyof typeof LocalesMap | Locale;

package/src/components/DatePicker/helpers.ts

@@ -1,4 +1,4 @@
-import { parse, format, isSameDay } from 'date-fns';
+import { format, isSameDay, parse } from 'date-fns';
 import {
   isEmpty,
   isNotEmpty,

package/src/components/DatePicker/index.ts

@@ -1,4 +1,5 @@
 export * from './DatePicker';
 export * from './types';
+export type { IDatePickerLocale } from './constants';
 export type { IDatePickerStyles } from './DatePicker.styles';
 export type { IDatePickerHeaderStyles } from './components';

package/src/components/DatePicker/types.ts

@@ -1,10 +1,10 @@
-import { ReactDatePickerProps } from 'react-datepicker';
-import { IDateInputProps } from '../DateInput';
+import { type DatePickerProps } from 'react-datepicker';
+import { type IDateInputProps } from '../DateInput';
 
 export type IRange = [Date | null, Date | null] | null;
 
 export type IDatePickerBaseProps = Pick<
-  ReactDatePickerProps,
+  DatePickerProps,
   | 'startDate'
   | 'endDate'
   | 'minDate'
@@ -31,7 +31,8 @@ export type IDatePickerBaseProps = Pick<
   | 'strictParsing'
   | 'highlightDates'
   | 'fixedHeight'
-  | 'excludeScrollbar'
+  | 'swapRange'
+  | 'onKeyDown'
 > &
   Omit<
     IDateInputProps,
@@ -45,4 +46,5 @@ export type IDatePickerBaseProps = Pick<
     | 'onChange'
     | 'onClick'
     | 'tweakStyles'
+    | 'onKeyDown'
   >;