@true-engineering/true-react-common-ui-kit 4.0.0-alpha3 → 4.0.0-alpha30

package/dist/types.d.ts

@@ -1,5 +1,7 @@
-import { FocusEventHandler, type KeyboardEvent, KeyboardEventHandler, MouseEvent, MouseEventHandler, PointerEventHandler, ReactNode } from 'react';
-import { Modifier, Placement } from 'react-overlays/usePopper';
+import type { FocusEventHandler, KeyboardEvent, KeyboardEventHandler, MouseEvent, MouseEventHandler, PointerEventHandler, ReactNode } from 'react';
+import type { Modifier, Placement } from 'react-overlays/usePopper';
+import type { JssStyle } from 'jss';
+import type { IMaybeArray } from './theme';
 export interface ITestIdProps {
     testId?: string;
 }
@@ -10,7 +12,7 @@ export interface IDataAttributesProps extends ITestIdProps {
     data?: IDataAttributes;
 }
 export interface ITweakStylesProps<TweakStyles> {
-    tweakStyles?: TweakStyles;
+    tweakStyles?: IMaybeArray<TweakStyles>;
 }
 export type ICommonProps<TweakStyles> = IDataAttributesProps & ITweakStylesProps<TweakStyles>;
 export interface IDropdownWithPopperOptions {
@@ -43,3 +45,8 @@ export interface IDomElementInteractions<T> {
     onPointerUp?: PointerEventHandler<T>;
 }
 export type IRenderNode<T> = ReactNode | ((props: T) => ReactNode);
+export type IExtendableProps<T extends string | readonly string[]> = Record<T extends ReadonlyArray<infer P> ? P : T, JssStyle>;
+export type IDefaultExtendableProps = IExtendableProps<'custom'>;
+export type IWithPrefix<T, P extends string> = {
+    [K in keyof T as `${P}${K & string}`]: T[K];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "4.0.0-alpha3",
+  "version": "4.0.0-alpha30",
   "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/ControlWrapper/ControlWrapper.stories.tsx

@@ -1,15 +1,15 @@
 import { doNothing } from '@true-engineering/true-react-platform-helpers';
 import { ComponentStory } from '@storybook/react';
-import { iconsList } from '../Icon';
+import { Icon, iconsList } from '../Icon';
 import { ControlWrapper } from './ControlWrapper';
 
 export default {
-  title: 'ControlWrapper',
+  title: 'Controls/ControlWrapper',
   component: ControlWrapper,
 };
 
 const Template: ComponentStory<typeof ControlWrapper> = (args) => (
-  <ControlWrapper {...args} onClear={doNothing} onIconClick={doNothing}>
+  <ControlWrapper {...args} onClear={doNothing}>
     <div style={{ minWidth: 200, height: 48 }} />
   </ControlWrapper>
 );
@@ -24,6 +24,11 @@ Default.args = {
   isLoading: false,
   isDisabled: false,
   hasValue: false,
+  icon: [
+    { iconComponent: <div>Бу</div>, onClick: () => console.log('close'), shouldResetSize: true },
+    { iconComponent: <Icon type="question" /> },
+    { iconComponent: 'search', onClick: () => console.log('search') },
+  ],
 };
 
 Default.argTypes = {

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,20 +4,25 @@ 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 } from './types';
 import { IControlWrapperStyles, useStyles } from './ControlWrapper.styles';
 
 export interface IControlWrapperProps extends ICommonProps<IControlWrapperStyles> {
   children: ReactNode;
   label?: ReactNode;
-  icon?: IIcon;
+  icon?: IMaybeArray<IIcon | IControlWrapperIcon>;
+  size?: IControlWrapperSize;
   groupPlacement?:
     | 'left'
     | 'right'
@@ -42,7 +47,6 @@ export interface IControlWrapperProps extends ICommonProps<IControlWrapperStyles
   isLoading?: boolean;
   /** @default false */
   isDisabled?: boolean;
-  onIconClick?: (event: IClickHandlerEvent) => void;
   onClear?: (event: IClickHandlerEvent) => void;
 }
 
@@ -57,18 +61,22 @@ export const ControlWrapper: FC<IControlWrapperProps> = ({
   isFullWidth,
   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 isActive = isFocused || hasValue;
 
   const tweakPreloaderStyles = useTweakStyles({
     tweakStyles,
@@ -80,7 +88,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 +106,7 @@ export const ControlWrapper: FC<IControlWrapperProps> = ({
           className={clsx(classes.label, {
             [classes.requiredLabel]: isRequired,
             [classes.disabledLabel]: isDisabled,
-            [classes.activeLabel]: isFocused || hasValue,
+            [classes.activeLabel]: isActive,
           })}
         >
           {label}
@@ -120,18 +129,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/helpers.ts

@@ -0,0 +1,11 @@
+import { isObject } from 'lodash-es';
+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,4 @@
 export * from './ControlWrapper';
+export * from './helpers';
+export * from './types';
 export type { IControlWrapperStyles } from './ControlWrapper.styles';

package/src/components/ControlWrapper/types.ts

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

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

@@ -54,7 +54,6 @@ Default.parameters = {
       'onFocus',
       'onBlur',
       'onPaste',
-      'onIconClick',
       'onKeyDown',
     ],
   },

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);
@@ -70,19 +71,31 @@ Default.args = {
   isRange: false,
   isClearable: true,
   shouldRenderPopperInBody: false,
+  popperPlacement: 'bottom-start',
+};
+
+Default.argTypes = {
+  popperPlacement: {
+    options: [
+      'bottom-start',
+      'bottom',
+      'bottom-end',
+      'top-start',
+      'top',
+      'top-end',
+      'right-start',
+      'right',
+      'right-end',
+      'left-start',
+      'left',
+      'left-end',
+    ],
+    control: 'select',
+  },
 };
 
 Default.parameters = {
   controls: {
-    exclude: [
-      'data',
-      'testId',
-      'tabIndex',
-      'onFocus',
-      'onBlur',
-      'onPaste',
-      'onIconClick',
-      'onKeyDown',
-    ],
+    exclude: ['data', 'testId', 'tabIndex', 'onFocus', 'onBlur', 'onPaste', 'onKeyDown'],
   },
 };

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

@@ -8,19 +8,25 @@ import {
   isNotEmpty,
   isStringNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
+import { offset } from '@floating-ui/react';
 import { addDataAttributes } from '../../helpers';
 import { 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 { areDatesEquals, getDateFormatter, getDateValueParser } from './helpers';
-import { IDatePickerBaseProps, IRange } from './types';
+import {
+  areDatesEquals,
+  getDateFormatter,
+  getDateValueParser,
+  preparateDatePickerLocale,
+} from './helpers';
+import { IDatePickerBaseProps, IDatePickerLocale, 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 +64,6 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
       isClearable,
       strictParsing,
       fixedHeight,
-      excludeScrollbar,
       focusSelectedMonth,
       disabledKeyboardNavigation,
       shouldRenderPopperInBody = false,
@@ -66,8 +71,8 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
       shouldCloseOnSelect,
       showPreviousMonths,
       preventOpenOnFocus,
-      popperModifiers,
-      popperPlacement,
+      popperModifiers = [],
+      popperPlacement = 'bottom-start',
       todayButton,
       highlightDates,
       calendarContainer,
@@ -153,6 +158,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);
@@ -242,14 +248,13 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
           ref={ref}
           minDate={minDate}
           maxDate={maxDate}
-          locale={locale}
+          locale={preparateDatePickerLocale(locale)}
           dateFormat={dateFormat}
           placeholderText={placeholder}
           calendarStartDay={calendarStartDay}
           inline={isInline}
           disabled={isDisabled}
           fixedHeight={fixedHeight}
-          excludeScrollbar={excludeScrollbar}
           showPreviousMonths={showPreviousMonths}
           focusSelectedMonth={focusSelectedMonth}
           monthsShown={monthsShown}
@@ -260,14 +265,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 +306,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/helpers.ts

@@ -1,10 +1,12 @@
-import { parse, format, isSameDay } from 'date-fns';
+import { parse, format, isSameDay, type Locale } from 'date-fns';
+import { ru as ruLocale, enUS as enLocale } from 'date-fns/locale';
 import {
   isEmpty,
   isNotEmpty,
   isStringNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
 import { EMPTY_DATE_INPUT_VALUE } from '../DateInput';
+import { IDatePickerLocale } from './types';
 
 export const getDateFormatter =
   (dateFormat: string) =>
@@ -21,3 +23,13 @@ export const getDateValueParser =
 export const areDatesEquals = (date1?: Date | null, date2?: Date | null): boolean =>
   (isEmpty(date1) && isEmpty(date2)) ||
   (isNotEmpty(date1) && isNotEmpty(date2) && isSameDay(date1, date2));
+
+export const preparateDatePickerLocale = (locale: IDatePickerLocale): Locale => {
+  if (locale === 'ru') {
+    return ruLocale;
+  }
+  if (locale === 'en') {
+    return enLocale;
+  }
+  return locale;
+};

package/src/components/DatePicker/types.ts

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

package/src/components/FiltersPane/FiltersPane.stories.tsx

@@ -70,7 +70,8 @@ type ConfigValues = {
   custom: string;
 };
 
-interface IFiltersPaneWithCustomProps<Values, Content> extends IFiltersPaneProps<Values, Content> {
+interface IFiltersPaneWithCustomProps<Values extends Record<string, unknown>, Content>
+  extends IFiltersPaneProps<Values, Content> {
   containerWidth: number;
   isSearchDisabled: boolean;
   shouldShowSettingsButton: boolean;
@@ -80,7 +81,7 @@ interface IFiltersPaneWithCustomProps<Values, Content> extends IFiltersPaneProps
   isClearableFields: boolean;
 }
 
-function FiltersPaneWithCustomProps<Values, Content>({
+function FiltersPaneWithCustomProps<Values extends Record<string, unknown>, Content>({
   containerWidth,
   isSearchDisabled,
   shouldShowSettingsButton,
@@ -288,6 +289,7 @@ Default.args = {
   hasClearButton: true,
   isClearableFields: false,
   isDisabled: false,
+  shouldRenderDataId: false,
   containerWidth: 400,
   withFieldNameInLabel: true,
   isGroupingEnabled: true,