@true-engineering/true-react-common-ui-kit 2.0.0 → 2.1.0

package/dist/types.d.ts

@@ -24,6 +24,9 @@ export declare type UiKitHelpers = Record<string, Styles | (() => Styles)>;
 export interface UiKitTheme {
     name: string;
     components?: Partial<Record<ComponentName, ComponentStyles<any, any>>>;
+    /**
+     * Для переопределения иконок, которые есть в UiKit
+     */
     icons?: Partial<Record<ICommonIcon, ISvgIcon>>;
     complexIcons?: Partial<Record<IComplexIcon, string>>;
     preloaders?: Partial<Record<IPreloaderSvgType, string>>;

package/package.json

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

package/src/components/Checkbox/Checkbox.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, PropsWithChildren } from 'react';
+import { useEffect, useState, ReactNode } from 'react';
 import clsx from 'clsx';
 import { Icon } from '../Icon';
 import { useTheme } from '../../hooks';
@@ -13,6 +13,7 @@ import { CheckboxStyles, styles } from './Checkbox.styles';
 
 export interface ICheckboxProps<V> extends ICommonProps {
   tweakStyles?: CheckboxStyles;
+  children?: ReactNode;
   isChecked?: boolean;
   isSemiChecked?: boolean;
   isDisabled?: boolean;
@@ -54,7 +55,7 @@ export function Checkbox<V>({
   labelPosition = 'right',
   tweakStyles,
   onSelect,
-}: PropsWithChildren<ICheckboxProps<V>>): JSX.Element {
+}: ICheckboxProps<V>): JSX.Element {
   const { classes } = useTheme('Checkbox', styles, tweakStyles, {
     size,
     alignItems,

package/src/components/DatePicker/DatePicker.tsx

@@ -46,10 +46,6 @@ export interface IDatePickerProps extends IDatePickerBaseProps {
   selectedDate?: Date | null;
   locale: Locale;
   months?: string[];
-  minDate?: Date | null;
-  maxDate?: Date | null;
-  endDate?: Date | null;
-  startDate?: Date | null;
   topPosition?: number;
   leftPosition?: number;
   /**
@@ -91,6 +87,7 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
       isInline,
       isDisabled,
       isClearable,
+      strictParsing,
       focusSelectedMonth,
       disabledKeyboardNavigation,
       shouldRenderPopperInBody,
@@ -305,6 +302,7 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
           popperModifiers={popperModifiers}
           popperPlacement={popperPlacement}
           selectsRange={isRange}
+          strictParsing={strictParsing}
           preventOpenOnFocus={preventOpenOnFocus}
           shouldCloseOnSelect={shouldCloseOnSelect}
           customInputRef={customInputRef}

package/src/components/DatePicker/types.ts

@@ -5,6 +5,10 @@ export type IRange = [Date | null, Date | null] | null;
 
 export type IDatePickerBaseProps = Pick<
   ReactDatePickerProps,
+  | 'startDate'
+  | 'endDate'
+  | 'minDate'
+  | 'maxDate'
   | 'allowSameDay'
   | 'disabledKeyboardNavigation'
   | 'monthsShown'
@@ -24,6 +28,7 @@ export type IDatePickerBaseProps = Pick<
   | 'renderCustomHeader'
   | 'customInputRef'
   | 'preventOpenOnFocus'
+  | 'strictParsing'
 > &
   Omit<
     IDateInputProps,

package/src/components/RadioButton/RadioButton.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
 import clsx from 'clsx';
 import { useTheme } from '../../hooks';
 import { addDataAttributes, isNotEmpty } from '../../helpers';
@@ -8,12 +8,13 @@ import { RadioButtonStyles, styles } from './RadioButton.styles';
 
 export interface IRadioButtonProps<Value extends string> extends ICommonProps {
   tweakStyles?: RadioButtonStyles;
+  children?: ReactNode;
   value: Value;
   groupName: string;
   isChecked?: boolean;
   isDisabled?: boolean;
   isInvalid?: boolean;
-  onChange: (value: Value) => void | Promise<void>;
+  onChange(value: Value): void | Promise<void>;
 }
 
 export function RadioButton<Value extends string>({
@@ -23,10 +24,10 @@ export function RadioButton<Value extends string>({
   isChecked,
   isDisabled,
   isInvalid,
-  onChange,
   data,
   tweakStyles,
-}: PropsWithChildren<IRadioButtonProps<Value>>): JSX.Element {
+  onChange,
+}: IRadioButtonProps<Value>): JSX.Element {
   const { classes } = useTheme('RadioButton', styles, tweakStyles);
 
   return (

package/src/components/Select/Select.tsx

@@ -500,13 +500,17 @@ export function Select<Value>(
   });
 
   useEffect(() => {
-    const val = isMultiSelect ? value?.[0] : value;
     setFocusedListCellIndex(
       optionsIndexesForNavigation.find(
-        (index) => filteredOptions[index] === val,
+        (index) =>
+          isNotEmpty(strValue) &&
+          isNotEmpty(filteredOptions[index]) &&
+          convertToId(filteredOptions[index]) === convertToId(strValue),
       ) ?? optionsIndexesForNavigation[0],
     );
+  }, [strValue, filteredOptions, optionsIndexesForNavigation, convertToId]);
 
+  useEffect(() => {
     if (isOpen) {
       onOpen?.();
     }

package/src/components/Switch/Switch.tsx

@@ -1,7 +1,7 @@
-import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
 import clsx from 'clsx';
 import { useTheme } from '../../hooks';
-import { addDataAttributes, isNotEmpty } from '../../helpers';
+import { addDataAttributes, addDataTestId, isNotEmpty } from '../../helpers';
 import { ICommonProps } from '../../types';
 
 import { styles, SwitchStyles } from './Switch.styles';
@@ -13,14 +13,11 @@ export interface ISwitchState<V = string> {
 
 export interface ISwitchProps<V extends string> extends ICommonProps {
   tweakStyles?: SwitchStyles;
+  children?: ReactNode;
   value: V;
   isChecked: boolean;
   isDisabled?: boolean;
   isInvalid?: boolean;
-  /**
-   * @deprecated Use `children` instead
-   */
-  label?: string;
   /**
    * @default `right`
    */
@@ -29,28 +26,25 @@ export interface ISwitchProps<V extends string> extends ICommonProps {
    * @default `primary`
    */
   color?: 'primary' | 'secondary';
-  onChange: (state: ISwitchState<V>) => void;
   testId?: string;
+  onChange(state: ISwitchState<V>): void;
 }
 
 export const Switch = <V extends string>({
   isDisabled,
   isChecked,
   isInvalid,
-  onChange,
   value,
-  label,
   children,
   labelPosition = 'right',
   color = 'primary',
   data,
   tweakStyles,
   testId,
-}: PropsWithChildren<ISwitchProps<V>>): JSX.Element => {
+  onChange,
+}: ISwitchProps<V>): JSX.Element => {
   const { classes } = useTheme('Switch', styles, tweakStyles);
 
-  const hasLabel = isNotEmpty(label);
-  const hasChild = isNotEmpty(children);
   const handleChange = () => onChange({ name: value, isEnabled: !isChecked });
 
   return (
@@ -60,8 +54,8 @@ export const Switch = <V extends string>({
         [classes.checked]: isChecked,
         [classes.invalid]: isInvalid,
       })}
+      {...addDataTestId(testId)}
       {...addDataAttributes(data)}
-      data-testid={testId}
     >
       <span className={classes.switch}>
         <input
@@ -71,17 +65,17 @@ export const Switch = <V extends string>({
           onChange={isDisabled ? undefined : handleChange}
           checked={isChecked}
           disabled={isDisabled}
-          data-testid={testId !== undefined ? `${testId}-input` : undefined}
+          {...addDataTestId(testId, 'input')}
         />
       </span>
-      {(hasLabel || hasChild) && (
+      {isNotEmpty(children) && (
         <span
           className={clsx(
             classes.label,
             classes[labelPosition === 'left' ? 'labelLeft' : 'labelRight'],
           )}
         >
-          {hasLabel ? label : children}
+          {children}
         </span>
       )}
     </label>