@true-engineering/true-react-common-ui-kit 4.0.0-alpha72 → 4.0.0-alpha74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "4.0.0-alpha72",
+  "version": "4.0.0-alpha74",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/ControlWrapper/ControlWrapper.tsx

@@ -70,6 +70,7 @@ export const ControlWrapper: FC<IControlWrapperProps> = ({
   const classes = useStyles({ tweakStyles });
 
   const [startControlsWidth, setStartControlsWidth] = useState<number>();
+  const [endControlsWidth, setEndControlsWidth] = useState<number>();
 
   const startIcons = getArray(startIcon).map(convertToControlWrapperIcon);
   const endIcons = getArray(endIcon).map(convertToControlWrapperIcon);
@@ -89,24 +90,41 @@ export const ControlWrapper: FC<IControlWrapperProps> = ({
     onTargetChange: (target) => setStartControlsWidth(target.clientWidth),
   });
 
+  const endControlsRef = useResizeRef({
+    onTargetChange: (target) => setEndControlsWidth(target.clientWidth),
+  });
+
   const renderIconControl = (
-    { key, iconComponent, onClick, shouldResetSize = false }: IControlWrapperIcon,
+    {
+      key,
+      iconComponent,
+      onClick,
+      shouldResetSize = false,
+      isActiveIcon = isNotEmpty(onClick),
+      ...iconContainerProps
+    }: IControlWrapperIcon,
     iconType: 'start' | 'end' | 'clear',
     index?: number,
   ) => (
     <div
       key={key ?? index}
       className={clsx(classes.icon, classes[`${iconType}Icon`], {
-        [classes.activeIcon]: !isDisabled && isNotEmpty(onClick),
+        [classes.activeIcon]: !isDisabled && isActiveIcon,
         [classes.customIcon]: shouldResetSize,
       })}
       {...addClickHandler(onClick, !isDisabled)}
       {...addDataTestId(testId, `${iconType}-icon`)}
+      {...iconContainerProps}
     >
       <div className={classes.iconInner}>{renderIcon(iconComponent)}</div>
     </div>
   );
 
+  const style = {
+    '--start-controls-width': hasStartIcons ? `${startControlsWidth}px` : undefined,
+    '--end-controls-width': hasEndControls ? `${endControlsWidth}px` : undefined,
+  } as CSSProperties;
+
   return (
     <div
       className={clsx(
@@ -123,11 +141,7 @@ export const ControlWrapper: FC<IControlWrapperProps> = ({
           [classes.withStartControls]: hasStartIcons,
         },
       )}
-      style={
-        hasStartIcons
-          ? ({ '--start-controls-width': `${startControlsWidth}px` } as CSSProperties)
-          : undefined
-      }
+      style={style}
       {...addDataAttributes(data, testId)}
     >
       {isReactNodeNotEmpty(label) && (
@@ -151,7 +165,7 @@ export const ControlWrapper: FC<IControlWrapperProps> = ({
         {children}
 
         {hasEndControls && (
-          <div className={classes.controls}>
+          <div className={classes.controls} ref={endControlsRef}>
             {hasClearButton &&
               renderIconControl({ iconComponent: 'close', onClick: onClear }, 'clear')}
 

package/src/components/ControlWrapper/types.ts

@@ -1,4 +1,4 @@
-import { type Key } from 'react';
+import { HTMLAttributes, type Key } from 'react';
 import { IClickHandlerEvent } from '../../types';
 import { IIcon } from '../Icon';
 import { GROUP_PLACEMENTS } from './constants';
@@ -11,9 +11,10 @@ export type IControlWrapperSize = keyof IControlWrapperSizes;
 export type IGroupPlacement = (typeof GROUP_PLACEMENTS)[number];
 
 // подумать над extend HTMLAttributes<HTMLDivElement>
-export interface IControlWrapperIcon {
+export interface IControlWrapperIcon extends Pick<HTMLAttributes<HTMLDivElement>, 'tabIndex'> {
   key?: Key;
   iconComponent: IIcon;
   onClick?: (event: IClickHandlerEvent) => void;
   shouldResetSize?: boolean;
+  isActiveIcon?: boolean;
 }

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

@@ -1,23 +1,7 @@
 import { FC, useState } from 'react';
-import { ru } from 'date-fns/locale';
 import { type Meta } from '@storybook/react';
 import { DatePicker, IDatePickerProps } from './DatePicker';
 
-const months = [
-  'Январь',
-  'Февраль',
-  'Март',
-  'Апрель',
-  'Май',
-  'Июнь',
-  'Июль',
-  'Август',
-  'Сентябрь',
-  'Октябрь',
-  'Ноябрь',
-  'Декабрь',
-];
-
 const Story: FC<IDatePickerProps> = (args) => {
   const [date, setDate] = useState<Date | null>(null);
 
@@ -36,9 +20,7 @@ const Story: FC<IDatePickerProps> = (args) => {
       <div style={{ display: 'flex', height: 48 }}>
         <DatePicker
           {...args}
-          locale={ru}
           testId="datepicker"
-          months={months}
           selectedDate={date}
           minDate={new Date()}
           onChangeDate={setDate}
@@ -57,6 +39,13 @@ const meta: Meta<typeof Story> = {
     isClearable: true,
     shouldRenderPopperInBody: false,
     popperPlacement: 'bottom-start',
+    locale: 'ru',
+  },
+  argTypes: {
+    locale: {
+      control: 'inline-radio',
+      options: ['ru', 'en'],
+    },
   },
 };
 

package/src/components/DatePicker/DatePicker.tsx

@@ -3,6 +3,7 @@ import {
   FocusEvent,
   SyntheticEvent,
   forwardRef,
+  useCallback,
   useEffect,
   useMemo,
   useRef,
@@ -11,9 +12,10 @@ import {
 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 { isAfter, isBefore, isValid, Month } from 'date-fns';
 import {
   addDataAttributes,
+  getArray,
   isEmpty,
   isNotEmpty,
   isString,
@@ -140,13 +142,18 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(function
     ? isStringNotEmpty(startDateValue) || isStringNotEmpty(endDateValue)
     : isStringNotEmpty(dateValue);
 
+  const endIcon =
+    isClearable && hasDateInputValue
+      ? inputProps.endIcon
+      : getArray(inputProps.endIcon).concat('calendar');
+
   const dateInputProps: IDateInputProps = {
     ...inputProps,
     isRange,
     isDisabled,
     isClearable,
     isActive: isOpen,
-    icon: isClearable && hasDateInputValue ? undefined : 'calendar',
+    endIcon,
     tweakStyles: tweakDateInputStyles,
     ...(isRange ? { startDate: startDateValue, endDate: endDateValue } : { date: dateValue }),
   };
@@ -267,13 +274,26 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(function
     OUTSIDE_CLICK_IGNORE_CLASS,
   );
 
+  const resolvedLocale = isString(locale) ? LocalesMap[locale] : locale;
+
+  const getLocalizedMonth = useCallback(
+    (month: Month) => {
+      if (isNotEmpty(months?.[month])) {
+        return months[month];
+      }
+      const localizedMonth = resolvedLocale.localize.month(month);
+      return localizedMonth.charAt(0).toUpperCase().concat(localizedMonth.slice(1));
+    },
+    [resolvedLocale, months],
+  );
+
   return (
     <div className={classes.root} {...addDataAttributes(data)}>
       <DatePickerBase
         ref={componentRef}
         minDate={minDate}
         maxDate={maxDate}
-        locale={isString(locale) ? LocalesMap[locale] : locale}
+        locale={resolvedLocale}
         dateFormat={dateFormat}
         placeholderText={placeholder}
         calendarStartDay={calendarStartDay}
@@ -302,7 +322,10 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(function
         customInput={<CustomInput {...dateInputProps} />}
         renderDayContents={(day) => <div className={classes.dayInner}>{day}</div>}
         renderCustomHeader={
-          renderCustomHeader ?? ((baseProps) => <DatePickerHeader {...baseProps} months={months} />)
+          renderCustomHeader ??
+          ((baseProps) => (
+            <DatePickerHeader {...baseProps} getMonthSelectString={getLocalizedMonth} />
+          ))
         }
         todayButton={todayButton}
         highlightDates={highlightDates}

package/src/components/DatePicker/components/DatePickerHeader/DatePickerHeader.tsx

@@ -1,21 +1,23 @@
-import { FC, useMemo } from 'react';
+import { FC } from 'react';
 import { ReactDatePickerCustomHeaderProps as BaseProps } from 'react-datepicker';
-import { getMonth, getYear } from 'date-fns';
+import { getMonth, getYear, Month } from 'date-fns';
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../../../hooks';
 import { ITweakStylesProps } from '../../../../types';
 import { Icon } from '../../../Icon';
 import { Select } from '../../../Select';
+import { MONTH_SELECT_OPTIONS, YEARS_SELECT_OPTIONS } from './constants';
 import { IDatePickerHeaderStyles, selectStyles, useStyles } from './DatePickerHeader.styles';
 
 export interface IDatePickerHeaderProps
   extends BaseProps,
     ITweakStylesProps<IDatePickerHeaderStyles> {
-  months?: string[];
+  getMonthSelectString: (value: Month) => string;
 }
 
 export const DatePickerHeader: FC<IDatePickerHeaderProps> = ({
   date,
-  months = [],
+  getMonthSelectString,
   tweakStyles,
   prevMonthButtonDisabled,
   nextMonthButtonDisabled,
@@ -33,28 +35,24 @@ export const DatePickerHeader: FC<IDatePickerHeaderProps> = ({
     currentComponentName: 'DatePickerHeader',
   });
 
-  const years = useMemo(
-    () => Array.from(Array(41)).map((_, i) => getYear(new Date()) - 30 + i),
-    [],
-  );
-
   return (
     <div className={classes.header}>
       <Select
-        value={months[getMonth(date)]}
-        options={months}
+        value={getMonth(date) as Month}
+        options={MONTH_SELECT_OPTIONS}
+        convertValueToString={getMonthSelectString}
         dropdownIcon="chevron-down-small"
         isAutoSized
         tweakStyles={tweakSelectStyles}
-        onChange={(value) => changeMonth(months.indexOf(value as string))}
+        onChange={(value) => isNotEmpty(value) && changeMonth(value)}
       />
       <Select
         value={getYear(date)}
-        options={years}
+        options={YEARS_SELECT_OPTIONS}
         dropdownIcon="chevron-down-small"
         isAutoSized
         tweakStyles={tweakSelectStyles}
-        onChange={(value) => changeYear(value as number)}
+        onChange={(value) => isNotEmpty(value) && changeYear(value)}
       />
 
       <div className={classes.buttons}>

package/src/components/DatePicker/components/DatePickerHeader/constants.ts

@@ -0,0 +1,5 @@
+import { getYear, Month } from 'date-fns';
+import { indexMap } from '@true-engineering/true-react-platform-helpers';
+
+export const MONTH_SELECT_OPTIONS = indexMap(12, (idx) => idx as Month);
+export const YEARS_SELECT_OPTIONS = indexMap(41, (idx) => getYear(new Date()) - 30 + idx);

package/src/components/Select/Select.stories.tsx

@@ -193,6 +193,7 @@ const meta: Meta<typeof Story> = {
     isClearable: false,
     isLoading: false,
     debounceTime: 400,
+    minSymbolsCountToOpenList: 0,
     endIcon: undefined,
     // custom options
     shouldUseReactNodes: false,
@@ -222,6 +223,10 @@ const meta: Meta<typeof Story> = {
       options: ['strings', 'objects'],
     },
     endIcon: { control: 'select', options: icons },
+    size: {
+      control: 'inline-radio',
+      options: [undefined, 'micro'],
+    },
   },
 };
 

package/src/components/Select/Select.tsx

@@ -28,6 +28,7 @@ import {
 import { hasExactParent } from '../../helpers';
 import { useDropdown, useIsMounted, useOnClickOutsideWithRef, useTweakStyles } from '../../hooks';
 import { IDropdownWithPopperOptions, IReplaceTweakStylesProps } from '../../types';
+import { IControlWrapperIcon } from '../ControlWrapper';
 import { IIcon, renderIcon } from '../Icon';
 import { IChangeInputEvent, IInputProps, InputBase } from '../Input';
 import { ISearchInputProps, SearchInput } from '../SearchInput';
@@ -62,7 +63,7 @@ export interface ISelectProps<Value>
   minSymbolsCountToOpenList?: number;
   dropdownOptions?: IDropdownWithPopperOptions;
   /** @default 'chevron-down' */
-  dropdownIcon?: IIcon;
+  dropdownIcon?: IIcon | null;
   options: Value[] | readonly Value[];
   value: Value | undefined;
   /** @default true */
@@ -611,28 +612,29 @@ export function Select<Value>(
             isLoading={areOptionsLoading}
             tweakStyles={tweakInputStyles}
             testId={testId}
-            icon={[
+            endIcon={[
               isMultiSelect && shouldShowMultiSelectCounter
-                ? {
+                ? ({
                     key: 'counter',
-                    iconComponent: (
-                      <div key="counter" className={classes.counter}>
-                        (+{value.length - 1})
-                      </div>
-                    ),
+                    iconComponent: <div className={classes.counter}>(+{value.length - 1})</div>,
                     shouldResetSize: true,
-                  }
+                  } satisfies IControlWrapperIcon)
                 : undefined,
 
               ...getArray(endIcon),
 
-              <div
-                key="arrow"
-                className={clsx(classes.arrow, isOpen && classes.activeArrow)}
-                onClick={onArrowClick} // клик тут, потому что onClick в ControlWrapper добавляет tabIndex={0}
-              >
-                {renderIcon(dropdownIcon)}
-              </div>,
+              isNotEmpty(dropdownIcon)
+                ? ({
+                    key: 'arrow',
+                    onClick: onArrowClick,
+                    tabIndex: undefined,
+                    iconComponent: (
+                      <div className={clsx(classes.arrow, { [classes.activeArrow]: isOpen })}>
+                        {renderIcon(dropdownIcon)}
+                      </div>
+                    ),
+                  } satisfies IControlWrapperIcon)
+                : undefined,
             ].filter(isNotEmpty)}
             {...inputProps}
           />

package/src/components/WithPopup/WithPopup.tsx

@@ -175,12 +175,14 @@ export const WithPopup: FC<IWithPopupProps> = ({
     }),
   });
 
+  const triggerData: IDataAttributes = { popupOpen: isActive, ...data };
+
   const triggerElement = applyAction(trigger, {
     referenceProps: !isTriggerWrapped ? referenceProps : undefined,
     triggerProps: {
       isActive,
       isDisabled,
-      ...(!isTriggerWrapped && { data, testId, ...referenceProps }),
+      ...(!isTriggerWrapped && { data: triggerData, testId, ...referenceProps }),
     },
   });
 
@@ -194,7 +196,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
             [classes.active]: isActive,
           })}
           {...referenceProps}
-          {...addDataAttributes(data, testId)}
+          {...addDataAttributes(triggerData, testId)}
         >
           {triggerElement}
         </div>