@true-engineering/true-react-common-ui-kit 3.40.0 → 3.42.0

package/src/components/Selector/Selector.stories.tsx

@@ -1,62 +1,62 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { Status } from '../Status';
-import { Selector } from './Selector';
-import { ISelectorOption } from './types';
-
-const options: Array<ISelectorOption<string>> = [
-  {
-    label: 'Label 1',
-    value: '1',
-    icon: 'eye',
-  },
-  {
-    label: 'My label 2',
-    value: '2',
-  },
-  {
-    label: (
-      <>
-        This is Label 3{' '}
-        <Status size="xs" color="teal">
-          P
-        </Status>
-      </>
-    ),
-    value: '3',
-  },
-  {
-    label: 'This is disabled',
-    value: '4',
-    isDisabled: true,
-  },
-];
-
-export default {
-  title: 'Controls/Selector',
-  component: Selector,
-};
-
-const Template: ComponentStory<typeof Selector> = (args) => {
-  const [value, setValue] = useState(options[0].value);
-  return <Selector {...args} value={value} options={options} onChange={setValue} />;
-};
-
-export const Default = Template.bind({});
-
-Default.args = {
-  size: 'l',
-  iconPosition: 'left',
-  hasSameOptionsWidth: true,
-  isDisabled: false,
-  isInvalid: false,
-  isRequired: false,
-};
-
-Default.argTypes = {};
-
-Default.parameters = {
-  controls: {
-    exclude: ['options', 'value', 'testId', 'onChange'],
-  },
-};
+import { useState } from 'react';
+import { ComponentStory } from '@storybook/react';
+import { Status } from '../Status';
+import { Selector } from './Selector';
+import { ISelectorOption } from './types';
+
+const options: Array<ISelectorOption<string>> = [
+  {
+    label: 'Label 1',
+    value: '1',
+    icon: 'eye',
+  },
+  {
+    label: 'My label 2',
+    value: '2',
+  },
+  {
+    label: (
+      <>
+        This is Label 3{' '}
+        <Status size="xs" color="teal">
+          P
+        </Status>
+      </>
+    ),
+    value: '3',
+  },
+  {
+    label: 'This is disabled',
+    value: '4',
+    isDisabled: true,
+  },
+];
+
+export default {
+  title: 'Controls/Selector',
+  component: Selector,
+};
+
+const Template: ComponentStory<typeof Selector> = (args) => {
+  const [value, setValue] = useState(options[0].value);
+  return <Selector {...args} value={value} options={options} onChange={setValue} />;
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  size: 'l',
+  iconPosition: 'left',
+  hasSameOptionsWidth: true,
+  isDisabled: false,
+  isInvalid: false,
+  isRequired: false,
+};
+
+Default.argTypes = {};
+
+Default.parameters = {
+  controls: {
+    exclude: ['options', 'value', 'testId', 'onChange'],
+  },
+};

package/src/components/Selector/Selector.tsx

@@ -1,115 +1,115 @@
-import { useEffect, useRef, useState } from 'react';
-import clsx from 'clsx';
-import {
-  addDataTestId,
-  getTestId,
-  hasDuplicates,
-  isNotEmpty,
-  isReactNodeNotEmpty,
-} from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { ICommonProps } from '../../types';
-import { renderIcon } from '../Icon';
-import { ISelectorOption, ISelectorValue } from './types';
-import { getSelectorLineStyle, useStyles, ISelectorStyles } from './Selector.styles';
-
-export interface ISelectorProps<V extends ISelectorValue> extends ICommonProps<ISelectorStyles> {
-  options: Array<ISelectorOption<V>>;
-  value?: V;
-  /** @default false */
-  isDisabled?: boolean;
-  /** @default false */
-  isRequired?: boolean;
-  /** @default false */
-  isInvalid?: boolean;
-  /** @default true */
-  hasSameOptionsWidth?: boolean;
-  /** @default 'left' */
-  iconPosition?: 'left' | 'right';
-  /** @default 'l' */
-  size?: 's' | 'm' | 'l';
-  onChange: (value: V) => void;
-}
-
-export function Selector<V extends ISelectorValue>({
-  options,
-  value,
-  isDisabled = false,
-  isRequired = false,
-  isInvalid = false,
-  hasSameOptionsWidth = true,
-  iconPosition = 'left',
-  size = 'l',
-  testId,
-  data,
-  tweakStyles,
-  onChange,
-}: ISelectorProps<V>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
-  const optionsValues = options.map((opt) => opt.value);
-
-  const [elementsData, setElementsData] = useState<HTMLElement[]>([]);
-  const listRef = useRef<HTMLDivElement>(null);
-
-  if (hasDuplicates(optionsValues)) {
-    // eslint-disable-next-line no-console
-    console.error('Selector: Значения options.value должны быть уникальными');
-  }
-
-  useEffect(() => {
-    const listEl = listRef.current;
-    if (listEl === null) {
-      return;
-    }
-
-    setElementsData([...listEl.querySelectorAll<HTMLElement>(`.${classes.optionWrapper}`)]);
-  }, [options, size]);
-
-  const activeElementData = isNotEmpty(value)
-    ? elementsData[optionsValues.indexOf(value)]
-    : undefined;
-
-  return (
-    <div
-      className={clsx(classes.root, classes.selector, {
-        [classes.iconFromRight]: iconPosition === 'right',
-        [classes.invalid]: isInvalid,
-        [classes.required]: isRequired,
-        [classes.autoWidth]: hasSameOptionsWidth,
-      })}
-      ref={listRef}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
-    >
-      {isNotEmpty(activeElementData) && (
-        <div className={classes.line} style={getSelectorLineStyle(activeElementData)} />
-      )}
-
-      {options.map((option) => {
-        const optionId = option.value.toString();
-        const isDisabledOption = option.isDisabled ?? isDisabled;
-        const isActiveOption = option.value === value;
-
-        return (
-          <div key={optionId} className={classes.optionWrapper} {...addDataTestId(testId)}>
-            <button
-              type="button"
-              className={clsx(classes.option, classes[size], {
-                [classes.active]: isActiveOption,
-                [classes.disabled]: isDisabledOption,
-              })}
-              disabled={isDisabledOption}
-              onClick={!isDisabledOption ? () => onChange(option.value) : undefined}
-              {...addDataTestId(getTestId(testId, optionId))}
-            >
-              {isReactNodeNotEmpty(option.icon) && (
-                <div className={classes.optionIcon}>{renderIcon(option.icon)}</div>
-              )}
-              <div className={classes.optionText}>{option.label}</div>
-            </button>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
+import { useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+import {
+  addDataTestId,
+  getTestId,
+  hasDuplicates,
+  isNotEmpty,
+  isReactNodeNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { renderIcon } from '../Icon';
+import { ISelectorOption, ISelectorValue } from './types';
+import { getSelectorLineStyle, useStyles, ISelectorStyles } from './Selector.styles';
+
+export interface ISelectorProps<V extends ISelectorValue> extends ICommonProps<ISelectorStyles> {
+  options: Array<ISelectorOption<V>>;
+  value?: V;
+  /** @default false */
+  isDisabled?: boolean;
+  /** @default false */
+  isRequired?: boolean;
+  /** @default false */
+  isInvalid?: boolean;
+  /** @default true */
+  hasSameOptionsWidth?: boolean;
+  /** @default 'left' */
+  iconPosition?: 'left' | 'right';
+  /** @default 'l' */
+  size?: 's' | 'm' | 'l';
+  onChange: (value: V) => void;
+}
+
+export function Selector<V extends ISelectorValue>({
+  options,
+  value,
+  isDisabled = false,
+  isRequired = false,
+  isInvalid = false,
+  hasSameOptionsWidth = true,
+  iconPosition = 'left',
+  size = 'l',
+  testId,
+  data,
+  tweakStyles,
+  onChange,
+}: ISelectorProps<V>): JSX.Element {
+  const classes = useStyles({ theme: tweakStyles });
+  const optionsValues = options.map((opt) => opt.value);
+
+  const [elementsData, setElementsData] = useState<HTMLElement[]>([]);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  if (hasDuplicates(optionsValues)) {
+    // eslint-disable-next-line no-console
+    console.error('Selector: Значения options.value должны быть уникальными');
+  }
+
+  useEffect(() => {
+    const listEl = listRef.current;
+    if (listEl === null) {
+      return;
+    }
+
+    setElementsData([...listEl.querySelectorAll<HTMLElement>(`.${classes.optionWrapper}`)]);
+  }, [options, size]);
+
+  const activeElementData = isNotEmpty(value)
+    ? elementsData[optionsValues.indexOf(value)]
+    : undefined;
+
+  return (
+    <div
+      className={clsx(classes.root, classes.selector, {
+        [classes.iconFromRight]: iconPosition === 'right',
+        [classes.invalid]: isInvalid,
+        [classes.required]: isRequired,
+        [classes.autoWidth]: hasSameOptionsWidth,
+      })}
+      ref={listRef}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      {isNotEmpty(activeElementData) && (
+        <div className={classes.line} style={getSelectorLineStyle(activeElementData)} />
+      )}
+
+      {options.map((option) => {
+        const optionId = option.value.toString();
+        const isDisabledOption = option.isDisabled ?? isDisabled;
+        const isActiveOption = option.value === value;
+
+        return (
+          <div key={optionId} className={classes.optionWrapper} {...addDataTestId(testId)}>
+            <button
+              type="button"
+              className={clsx(classes.option, classes[size], {
+                [classes.active]: isActiveOption,
+                [classes.disabled]: isDisabledOption,
+              })}
+              disabled={isDisabledOption}
+              onClick={!isDisabledOption ? () => onChange(option.value) : undefined}
+              {...addDataTestId(getTestId(testId, optionId))}
+            >
+              {isReactNodeNotEmpty(option.icon) && (
+                <div className={classes.optionIcon}>{renderIcon(option.icon)}</div>
+              )}
+              <div className={classes.optionText}>{option.label}</div>
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/Selector/index.ts

@@ -1,2 +1,2 @@
-export * from './Selector';
-export type { ISelectorStyles } from './Selector.styles';
+export * from './Selector';
+export type { ISelectorStyles } from './Selector.styles';

package/src/components/Selector/types.ts

@@ -1,12 +1,12 @@
-import { ReactNode } from 'react';
-import { IIcon } from '../Icon';
-
-export type ISelectorValue = string | number | boolean;
-
-export interface ISelectorOption<V> {
-  label: ReactNode;
-  icon?: IIcon;
-  value: V;
-  /** @default false */
-  isDisabled?: boolean;
-}
+import { ReactNode } from 'react';
+import { IIcon } from '../Icon';
+
+export type ISelectorValue = string | number | boolean;
+
+export interface ISelectorOption<V> {
+  label: ReactNode;
+  icon?: IIcon;
+  value: V;
+  /** @default false */
+  isDisabled?: boolean;
+}

package/src/components/Skeleton/Skeleton.stories.tsx

@@ -1,19 +1,19 @@
-import { ComponentStory } from '@storybook/react';
-import { Skeleton } from './Skeleton';
-
-export default {
-  title: 'Feedback/Skeleton',
-  component: Skeleton,
-};
-
-const Template: ComponentStory<typeof Skeleton> = (args) => (
-  <div style={{ padding: 32, backgroundColor: '#fff', width: 200 }}>
-    <Skeleton {...args} />
-  </div>
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  height: '20px',
-};
+import { ComponentStory } from '@storybook/react';
+import { Skeleton } from './Skeleton';
+
+export default {
+  title: 'Feedback/Skeleton',
+  component: Skeleton,
+};
+
+const Template: ComponentStory<typeof Skeleton> = (args) => (
+  <div style={{ padding: 32, backgroundColor: '#fff', width: 200 }}>
+    <Skeleton {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  height: '20px',
+};

package/src/components/SmartInput/SmartInput.stories.tsx

@@ -33,7 +33,7 @@ const Template: ComponentStory<typeof SmartInput> = (args) => {
         <li>Трансформация значения в UPPERCASE</li>
       </ul>
 
-      <SmartInput {...args} value={value} onChange={(v) => setValue(v)} />
+      <SmartInput {...args} value={value} onChange={setValue} />
     </div>
   );
 };
@@ -47,5 +47,6 @@ Default.args = {
   smartType: 'default',
   isUpperCase: false,
   isDisabled: false,
+  isTransliterationEnabled: true,
   hasFloatingLabel: true,
 };

package/src/components/SmartInput/SmartInput.tsx

@@ -1,133 +1,115 @@
-import { useState, useEffect, forwardRef, FormEvent, ClipboardEvent } from 'react';
-import { Input, IInputProps } from '../Input';
-import { CharactersMap, SMART_INPUT_REGEX_MAP, TransliterationMap } from './constants';
-import { transformCaseSensitive } from './helpers';
-import { ISmartType } from './types';
-
-export interface ISmartInputProps extends IInputProps {
-  /** @default false */
-  isUpperCase?: boolean;
+import { ClipboardEvent, FormEvent, forwardRef, useRef } from 'react';
+import { isEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { useMergedRefs } from '../../hooks';
+import { IInputProps, Input } from '../Input';
+import {
+  CharactersMap,
+  EmailCharactersMap,
+  SMART_INPUT_REGEX_MAP,
+  TransliterationMap,
+} from './constants';
+import { mapSymbols } from './helpers';
+import { IInputRawValue, ISmartType } from './types';
+
+export interface ISmartInputProps extends Omit<IInputProps, 'onChange'> {
   /** @default 'default' */
   smartType?: ISmartType;
   regExp?: RegExp;
-  onChange: (value: string) => void;
+  /** @default false */
+  isUpperCase?: boolean;
+  /** @default true */
+  isTransliterationEnabled?: boolean;
+  onChange: (
+    value: string,
+    rawValue: IInputRawValue,
+    event?: FormEvent<HTMLInputElement> | ClipboardEvent<HTMLInputElement>,
+  ) => void;
 }
 
 export const SmartInput = forwardRef<HTMLInputElement, ISmartInputProps>(
   (
     {
-      onChange,
-      isUpperCase = false,
+      value = '',
       smartType = 'default',
       regExp,
-      value = '',
       maxLength,
+      isUpperCase = false,
+      isTransliterationEnabled = true,
+      onChange,
       ...rest
     },
     ref,
   ) => {
-    const [currentValue, setCurrentValue] = useState<string>(getUpperCaseIfNeeded(value));
-    const [caretPosition, setCaretPosition] = useState<number | null>(null);
-    const [input, setInput] = useState<HTMLInputElement | null>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const mergedRef = useMergedRefs([ref, inputRef]);
+
     const regex = regExp || SMART_INPUT_REGEX_MAP[smartType];
 
-    useEffect(() => {
-      if (input && input.type !== 'email' && input.selectionStart !== caretPosition) {
-        input.selectionStart = caretPosition;
-        input.selectionEnd = caretPosition;
-      }
-    }, [caretPosition]);
-
-    useEffect(() => {
-      setCurrentValue(getUpperCaseIfNeeded(value));
-    }, [value]);
-
-    function getUpperCaseIfNeeded(str: string) {
-      return isUpperCase ? str.toUpperCase() : str;
-    }
-
-    const handleChange = (str: string, event?: FormEvent<HTMLInputElement>) => {
-      const mappedValue = str
-        .split('')
-        .map((symbol) =>
-          regex.test(symbol)
-            ? symbol
-            : transformCaseSensitive(
-                smartType,
-                smartType !== 'email' ? CharactersMap : { ...CharactersMap, '"': '@' },
-                symbol,
-              ),
-        )
-        .filter((symbol) => regex.test(symbol))
-        .join('');
-      const domElement = event?.currentTarget;
-
-      if (domElement) {
-        if (!input) {
-          setInput(domElement);
-        }
-
-        setCurrentValue(getUpperCaseIfNeeded(mappedValue));
-        onChange(getUpperCaseIfNeeded(mappedValue));
-
-        if (mappedValue !== currentValue) {
-          setCaretPosition(domElement.selectionStart);
-        } else {
-          setCaretPosition(domElement.selectionStart ? domElement.selectionStart - 1 : null);
-        }
+    const getUpperCaseIfNeeded = (str: string) => (isUpperCase ? str.toUpperCase() : str);
+
+    const updateCaretPosition = (position: number | null, newValue: string) => {
+      const input = inputRef.current;
+      if (isNotEmpty(input) && input.type !== 'email') {
+        // Нужно для того, чтобы после ререндера позиция каретки не сбросилась
+        input.value = newValue;
+        input.setSelectionRange(position, position);
       }
     };
 
-    const handlePaste = (event: ClipboardEvent<HTMLInputElement>) => {
-      const str = event.clipboardData.getData('text/plain').split('').join('');
-      const domElement = event.currentTarget;
+    const handleChange = async (str: string, event: FormEvent<HTMLInputElement>) => {
+      const isValid = regex.test(str);
 
-      if (!input) {
-        setInput(domElement);
+      const charactersMap = smartType === 'email' ? EmailCharactersMap : CharactersMap;
+      const newValue = getUpperCaseIfNeeded(
+        isValid ? str : mapSymbols(str, regex, charactersMap, isTransliterationEnabled),
+      );
+
+      onChange(newValue, { rawValue: str, isValid }, event);
+
+      const input = inputRef.current;
+      if (isNotEmpty(input)) {
+        const start = input.selectionStart;
+        updateCaretPosition(isEmpty(start) || newValue !== value ? start : start - 1, newValue);
       }
+    };
 
+    const handlePaste = async (event: ClipboardEvent<HTMLInputElement>) => {
       event.preventDefault();
-      const selectionStart = domElement.selectionStart ?? 0;
-      const selectionEnd = domElement.selectionEnd ?? 0;
-
-      let mappedValue = str
-        .split('')
-        .map((symbol) =>
-          regex.test(symbol)
-            ? symbol
-            : transformCaseSensitive(smartType, TransliterationMap, symbol),
-        )
-        .filter((letter) => regex.test(letter))
-        .join('');
-
-      const newValueLength =
-        mappedValue.length + currentValue.length - (selectionEnd - selectionStart);
-
-      if (maxLength !== undefined && maxLength >= 0 && newValueLength > maxLength) {
-        const validMappedValueLength = mappedValue.length - (newValueLength - maxLength);
-
-        mappedValue = mappedValue.substring(0, validMappedValueLength);
+
+      const str = event.clipboardData.getData('text/plain').split('').join('');
+
+      const input = event.currentTarget;
+      const selectionStart = input.selectionStart ?? 0;
+      const selectionEnd = input.selectionEnd ?? 0;
+
+      const isValid = regex.test(str);
+
+      let mappedValue = isValid
+        ? str
+        : mapSymbols(str, regex, TransliterationMap, isTransliterationEnabled);
+
+      const newValueLength = mappedValue.length + value.length - (selectionEnd - selectionStart);
+
+      if (isNotEmpty(maxLength) && maxLength >= 0 && newValueLength > maxLength) {
+        mappedValue = mappedValue.substring(0, mappedValue.length - (newValueLength - maxLength));
       }
 
       const newValue = getUpperCaseIfNeeded(
-        `${currentValue?.substring(0, selectionStart)}${mappedValue}${currentValue?.substring(
-          selectionEnd,
-        )}`,
+        `${value.substring(0, selectionStart)}${mappedValue}${value.substring(selectionEnd)}`,
       );
 
-      setCaretPosition(selectionStart + mappedValue.length);
-      setCurrentValue(newValue);
-      onChange(newValue);
+      onChange(newValue, { rawValue: str, isValid }, event);
+      updateCaretPosition(selectionStart + mappedValue.length, newValue);
     };
 
     return (
       <Input
         {...rest}
-        ref={ref}
+        ref={mergedRef}
+        value={value}
         maxLength={maxLength}
-        onChange={handleChange}
         onPaste={handlePaste}
-        value={currentValue}
+        onChange={handleChange}
       />
     );
   },