@true-engineering/true-react-common-ui-kit 4.0.0-alpha19 → 4.0.0-alpha20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "4.0.0-alpha19",
+  "version": "4.0.0-alpha20",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [
@@ -42,17 +42,17 @@
     "types-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@floating-ui/react": "0.26.12",
+    "@floating-ui/react": "0.27.13",
     "@true-engineering/true-react-platform-helpers": "0.4.4",
     "clsx": "1.2.1",
     "country-flag-icons": "1.5.5",
-    "date-fns": "2.29.3",
+    "date-fns": "4.1.0",
     "filesize": "10.1.1",
     "hex-to-rgba": "2.0.1",
     "jss": "10.10.0",
     "lodash-es": "4.17.21",
     "react": "18.2.0",
-    "react-datepicker": "4.25.0",
+    "react-datepicker": "8.4.0",
     "react-dom": "18.2.0",
     "react-input-mask": "3.0.0-alpha.2",
     "react-jss": "10.10.0",
@@ -73,7 +73,6 @@
     "@trivago/prettier-plugin-sort-imports": "4.3.0",
     "@types/lodash-es": "4.17.11",
     "@types/react": "18.2.79",
-    "@types/react-datepicker": "4.19.4",
     "@types/react-dom": "18.2.25",
     "@types/react-input-mask": "3.0.2",
     "@types/react-transition-group": "4.4.10",

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

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import ru from 'date-fns/locale/ru';
+import { ru } from 'date-fns/locale';
 import { ComponentStory } from '@storybook/react';
 import { DatePicker } from './DatePicker';
 
@@ -52,6 +52,7 @@ const Template: ComponentStory<typeof DatePicker> = (args) => {
           selectedDate={date}
           startDate={startDate}
           endDate={endDate}
+          minDate={new Date()}
           onChangeDate={setDate}
           onChangeRange={(dates) => {
             setStartDate(dates?.[0] ?? null);

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

@@ -63,7 +63,6 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
       isClearable,
       strictParsing,
       fixedHeight,
-      excludeScrollbar,
       focusSelectedMonth,
       disabledKeyboardNavigation,
       shouldRenderPopperInBody = false,
@@ -158,6 +157,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);
@@ -254,7 +254,6 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
           inline={isInline}
           disabled={isDisabled}
           fixedHeight={fixedHeight}
-          excludeScrollbar={excludeScrollbar}
           showPreviousMonths={showPreviousMonths}
           focusSelectedMonth={focusSelectedMonth}
           monthsShown={monthsShown}
@@ -267,12 +266,12 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
           popperContainer={shouldRenderPopperInBody ? PopperContainer : undefined}
           popperModifiers={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} />)
@@ -304,6 +303,7 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
                 startDate: start,
                 endDate: end,
                 selected: start,
+                selectsRange: true,
                 onBlur: handleDateRangeInputBlur,
                 onChange: handleChangeRange,
               }

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/types.ts

@@ -1,4 +1,4 @@
-import { ReactDatePickerProps } from 'react-datepicker';
+import { DatePickerProps } from 'react-datepicker';
 import { type Locale } from 'date-fns';
 import { type IDateInputProps } from '../DateInput';
 
@@ -7,7 +7,7 @@ export type IRange = [Date | null, Date | null] | null;
 export type IDatePickerLocale = 'ru' | 'en' | Locale;
 
 export type IDatePickerBaseProps = Pick<
-  ReactDatePickerProps,
+  DatePickerProps,
   | 'startDate'
   | 'endDate'
   | 'minDate'
@@ -34,7 +34,8 @@ export type IDatePickerBaseProps = Pick<
   | 'strictParsing'
   | 'highlightDates'
   | 'fixedHeight'
-  | 'excludeScrollbar'
+  | 'swapRange'
+  | 'onKeyDown'
 > &
   Omit<
     IDateInputProps,
@@ -48,4 +49,5 @@ export type IDatePickerBaseProps = Pick<
     | 'onChange'
     | 'onClick'
     | 'tweakStyles'
+    | 'onKeyDown'
   >;

package/src/components/FiltersPane/components/FilterWithDates/FilterWithDates.tsx

@@ -1,7 +1,6 @@
 import { FC, useMemo, useRef, useState } from 'react';
 import { isAfter, isBefore } from 'date-fns';
-import enUS from 'date-fns/locale/en-US';
-import ru from 'date-fns/locale/ru';
+import { enUS, ru } from 'date-fns/locale';
 import { getTestId, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../../../helpers';
 import { useTweakStyles } from '../../../../hooks';
@@ -133,7 +132,7 @@ export const FilterWithDates: FC<IFilterWithDatesProps> = ({
         <div className={classes.containerItem}>
           <DatePicker
             selectedDate={value?.from}
-            maxDate={value?.to}
+            maxDate={value?.to ?? undefined}
             label={translates.from}
             months={translates.months}
             locale={dateLocale}
@@ -149,7 +148,7 @@ export const FilterWithDates: FC<IFilterWithDatesProps> = ({
             selectedDate={value?.to}
             label={translates.to}
             months={translates.months}
-            minDate={value?.from}
+            minDate={value?.from ?? undefined}
             locale={dateLocale}
             onChangeDate={handleChangeTo}
             tweakStyles={tweakEndDatePickerStyles}

package/src/theme/types.ts

@@ -8,7 +8,6 @@ import type {
   ICloseButtonStyles,
   ICommonIcon,
   IComplexIcon,
-  IWithMessagesStyles,
   IControlWrapperStyles,
   ICssBaselineStyles,
   IDateInputStyles,
@@ -63,6 +62,7 @@ import type {
   IThemedPreloaderStyles,
   IToasterStyles,
   ITooltipStyles,
+  IWithMessagesStyles,
   IWithPopupStyles,
   IWithTooltipStyles,
 } from '../components';