@true-engineering/true-react-common-ui-kit 3.8.0 → 3.8.1

package/src/components/SmartInput/SmartInput.tsx

@@ -1,134 +1,134 @@
-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;
-  /** @default 'default' */
-  smartType?: ISmartType;
-  regExp?: RegExp;
-  onChange: (value: string) => void;
-}
-
-export const SmartInput = forwardRef<HTMLInputElement, ISmartInputProps>(
-  (
-    {
-      onChange,
-      isUpperCase = false,
-      smartType = 'default',
-      regExp,
-      value = '',
-      maxLength,
-      ...rest
-    },
-    ref,
-  ) => {
-    const [currentValue, setCurrentValue] = useState<string>(getUpperCaseIfNeeded(value));
-    const [caretPosition, setCaretPosition] = useState<number | null>(null);
-    const [input, setInput] = useState<HTMLInputElement | null>(null);
-    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 handlePaste = (event: ClipboardEvent<HTMLInputElement>) => {
-      const str = event.clipboardData.getData('text/plain').split('').join('');
-      const domElement = event.currentTarget;
-
-      if (!input) {
-        setInput(domElement);
-      }
-
-      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 newValue = getUpperCaseIfNeeded(
-        `${currentValue?.substring(0, selectionStart)}${mappedValue}${currentValue?.substring(
-          selectionEnd,
-        )}`,
-      );
-
-      setCaretPosition(selectionStart + mappedValue.length);
-      setCurrentValue(newValue);
-      onChange(newValue);
-    };
-
-    return (
-      <Input
-        {...rest}
-        ref={ref}
-        maxLength={maxLength}
-        onChange={handleChange}
-        onPaste={handlePaste}
-        value={currentValue}
-      />
-    );
-  },
-);
+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;
+  /** @default 'default' */
+  smartType?: ISmartType;
+  regExp?: RegExp;
+  onChange: (value: string) => void;
+}
+
+export const SmartInput = forwardRef<HTMLInputElement, ISmartInputProps>(
+  (
+    {
+      onChange,
+      isUpperCase = false,
+      smartType = 'default',
+      regExp,
+      value = '',
+      maxLength,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [currentValue, setCurrentValue] = useState<string>(getUpperCaseIfNeeded(value));
+    const [caretPosition, setCaretPosition] = useState<number | null>(null);
+    const [input, setInput] = useState<HTMLInputElement | null>(null);
+    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 handlePaste = (event: ClipboardEvent<HTMLInputElement>) => {
+      const str = event.clipboardData.getData('text/plain').split('').join('');
+      const domElement = event.currentTarget;
+
+      if (!input) {
+        setInput(domElement);
+      }
+
+      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 newValue = getUpperCaseIfNeeded(
+        `${currentValue?.substring(0, selectionStart)}${mappedValue}${currentValue?.substring(
+          selectionEnd,
+        )}`,
+      );
+
+      setCaretPosition(selectionStart + mappedValue.length);
+      setCurrentValue(newValue);
+      onChange(newValue);
+    };
+
+    return (
+      <Input
+        {...rest}
+        ref={ref}
+        maxLength={maxLength}
+        onChange={handleChange}
+        onPaste={handlePaste}
+        value={currentValue}
+      />
+    );
+  },
+);

package/src/components/Status/Status.stories.tsx

@@ -1,73 +1,73 @@
-import { Status } from '.';
-import { ComponentStory } from '@storybook/react';
-import { IIconType, iconsList } from '../Icon';
-import { complexIcons } from '../Icon/complexIcons';
-import { STATUS_COLORS, STATUS_SIZES } from './constants';
-import { IStatusStyles } from './Status.styles';
-
-export default {
-  title: 'Data Display/Status',
-  component: Status,
-};
-
-const iconTypes = [
-  undefined,
-  ...Object.keys(iconsList),
-  ...Object.keys(complexIcons),
-] as IIconType[];
-
-const customTweakStyles: IStatusStyles = {
-  custom: {
-    '--status-color': '#793472',
-    '--status-background': '#F2B9ED',
-  },
-};
-
-const Template: ComponentStory<typeof Status> = (args) => (
-  <div
-    style={{
-      display: 'grid',
-      gridTemplateRows: `repeat(${STATUS_SIZES.length + 1}, 1fr)`,
-      gridTemplateColumns: `repeat(${STATUS_COLORS.length + 1}, 1fr)`,
-      gap: 20,
-    }}
-  >
-    <div key={0} style={{ display: 'contents' }}>
-      <div />
-      {STATUS_COLORS.map((color, j) => (
-        <div key={j + 1}>{color}</div>
-      ))}
-    </div>
-
-    {STATUS_SIZES.map((size, i) => (
-      <div key={i + 1} style={{ display: 'contents' }}>
-        <div>{size}</div>
-        {STATUS_COLORS.map((color, j) => (
-          <div key={j + 1}>
-            <Status {...args} size={size} color={color} tweakStyles={customTweakStyles} />
-          </div>
-        ))}
-      </div>
-    ))}
-  </div>
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  children: 'Status',
-  badge: '+ Badge',
-  icon: 'balloon',
-  iconPosition: 'left',
-};
-
-Default.argTypes = {
-  icon: { options: iconTypes, control: 'select' },
-  iconPosition: { options: ['left', 'right'], control: 'inline-radio' },
-};
-
-Default.parameters = {
-  controls: {
-    exclude: ['size', 'color', 'tweakStyles', 'testId', 'data'],
-  },
-};
+import { Status } from '.';
+import { ComponentStory } from '@storybook/react';
+import { IIconType, iconsList } from '../Icon';
+import { complexIcons } from '../Icon/complexIcons';
+import { STATUS_COLORS, STATUS_SIZES } from './constants';
+import { IStatusStyles } from './Status.styles';
+
+export default {
+  title: 'Data Display/Status',
+  component: Status,
+};
+
+const iconTypes = [
+  undefined,
+  ...Object.keys(iconsList),
+  ...Object.keys(complexIcons),
+] as IIconType[];
+
+const customTweakStyles: IStatusStyles = {
+  custom: {
+    '--status-color': '#793472',
+    '--status-background': '#F2B9ED',
+  },
+};
+
+const Template: ComponentStory<typeof Status> = (args) => (
+  <div
+    style={{
+      display: 'grid',
+      gridTemplateRows: `repeat(${STATUS_SIZES.length + 1}, 1fr)`,
+      gridTemplateColumns: `repeat(${STATUS_COLORS.length + 1}, 1fr)`,
+      gap: 20,
+    }}
+  >
+    <div key={0} style={{ display: 'contents' }}>
+      <div />
+      {STATUS_COLORS.map((color, j) => (
+        <div key={j + 1}>{color}</div>
+      ))}
+    </div>
+
+    {STATUS_SIZES.map((size, i) => (
+      <div key={i + 1} style={{ display: 'contents' }}>
+        <div>{size}</div>
+        {STATUS_COLORS.map((color, j) => (
+          <div key={j + 1}>
+            <Status {...args} size={size} color={color} tweakStyles={customTweakStyles} />
+          </div>
+        ))}
+      </div>
+    ))}
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  children: 'Status',
+  badge: '+ Badge',
+  icon: 'balloon',
+  iconPosition: 'left',
+};
+
+Default.argTypes = {
+  icon: { options: iconTypes, control: 'select' },
+  iconPosition: { options: ['left', 'right'], control: 'inline-radio' },
+};
+
+Default.parameters = {
+  controls: {
+    exclude: ['size', 'color', 'tweakStyles', 'testId', 'data'],
+  },
+};