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

package/src/components/PhoneInput/components/PhoneInputCountryList/PhoneInputCountryList.tsx

@@ -1,155 +1,155 @@
-import { FC, MouseEvent, useState, useEffect, useMemo } from 'react';
-import clsx from 'clsx';
-import { phoneInfo } from '../../../../constants';
-import {
-  checkSearchStringInCountry,
-  getCountryTextByLocale,
-  findCountryIndexByCode,
-  sortCountriesByLocale,
-} from '../../../../helpers';
-import { useTweakStyles } from '../../../../hooks';
-import { ICommonProps } from '../../../../types';
-import { Flag } from '../../../Flag';
-import { Icon } from '../../../Icon';
-import { Input } from '../../../Input';
-import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
-import { IPhoneInfo } from '../../types';
-import {
-  useStyles,
-  IPhoneInputCountryListStyles,
-  inputStyles,
-} from './PhoneInputCountryList.styles';
-
-export interface IPhoneInputCountryListProps
-  extends Pick<ICommonProps<IPhoneInputCountryListStyles>, 'tweakStyles'> {
-  selectedCountryCode?: string;
-  locale: string;
-  placeholder: string;
-  noMatchesLabel: string;
-  closeList: () => void;
-  onChange: (country: IPhoneInfo, event: MouseEvent | KeyboardEvent) => void;
-}
-
-export const PhoneInputCountryList: FC<IPhoneInputCountryListProps> = ({
-  locale,
-  placeholder,
-  selectedCountryCode,
-  closeList,
-  noMatchesLabel,
-  onChange,
-  tweakStyles,
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const tweakInputStyles = useTweakStyles({
-    innerStyles: inputStyles,
-    tweakStyles,
-    className: 'tweakInput',
-    currentComponentName: 'PhoneInputCountryList',
-  });
-
-  const sortedCountries = useMemo(
-    () => sortCountriesByLocale(phoneInfo, locale),
-    [phoneInfo, locale],
-  );
-
-  const selectedCountryIdx = findCountryIndexByCode(selectedCountryCode, sortedCountries);
-
-  const [searchValue, setSearchValue] = useState('');
-  const [countriesList, setCountriesList] = useState(sortedCountries);
-  const [keyCursorOn, setKeyCursorOn] = useState(
-    selectedCountryIdx !== -1 ? selectedCountryIdx : 0,
-  );
-
-  const handleSearchChange = (newSearchValue: string) => {
-    const newCountriesList = sortedCountries.filter((country) =>
-      checkSearchStringInCountry(country, newSearchValue),
-    );
-
-    const defaultKeyCursorOn = newCountriesList.length > 0 ? 0 : -1;
-    const newSelectedCountryIdx = findCountryIndexByCode(selectedCountryCode, newCountriesList);
-
-    setCountriesList(newCountriesList);
-    setSearchValue(newSearchValue);
-    setKeyCursorOn(newSelectedCountryIdx !== -1 ? newSelectedCountryIdx : defaultKeyCursorOn);
-  };
-
-  const handleKeyDown = (event: KeyboardEvent) => {
-    const lastListItemIdx = countriesList.length - 1;
-
-    if (event.code === 'Escape' || event.code === 'Tab') {
-      closeList();
-    }
-
-    if (event.code === 'ArrowDown' && lastListItemIdx !== -1) {
-      // чтобы убрать перемещение курсора в инпуте
-      event.preventDefault();
-      setKeyCursorOn(keyCursorOn < lastListItemIdx ? keyCursorOn + 1 : 0);
-    }
-
-    if (event.code === 'ArrowUp' && lastListItemIdx !== -1) {
-      // чтобы убрать перемещение курсора в инпуте
-      event.preventDefault();
-      setKeyCursorOn(keyCursorOn > 0 ? keyCursorOn - 1 : lastListItemIdx);
-    }
-
-    if (event.code === 'Enter' || event.code === 'NumpadEnter') {
-      if (countriesList.length === 0) {
-        closeList();
-      } else if (keyCursorOn >= 0) {
-        onChange(countriesList[keyCursorOn], event);
-      }
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener('keydown', handleKeyDown, false);
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown, false);
-    };
-  });
-
-  return (
-    <div className={classes.root}>
-      <div className={classes.searchContainer}>
-        <div className={classes.searchIcon}>
-          <Icon type="search" />
-        </div>
-        <Input
-          value={searchValue}
-          placeholder={placeholder}
-          onChange={handleSearchChange}
-          tweakStyles={tweakInputStyles}
-          isClearable
-          shouldFocusOnMount
-        />
-      </div>
-      <div className={classes.flagList}>
-        {countriesList.map((country, index) => (
-          <ScrollIntoViewIfNeeded
-            key={country.countryCode}
-            active={keyCursorOn === index}
-            options={{ block: 'nearest' }}
-          >
-            <div
-              className={clsx(classes.listItem, {
-                [classes.activeCountry]: selectedCountryIdx === index,
-                [classes.selectedCountry]: keyCursorOn === index,
-              })}
-              onMouseEnter={() => setKeyCursorOn(index)}
-              onClick={(e) => onChange(country, e)}
-            >
-              <div className={classes.flag}>
-                <Flag countryCode={country.countryCode} />
-              </div>
-              <div className={classes.countryName}>{getCountryTextByLocale(country, locale)}</div>
-              <div className={classes.dialCode}>{`+${country.dialCode}`}</div>
-            </div>
-          </ScrollIntoViewIfNeeded>
-        ))}
-        {countriesList.length === 0 && <div className={classes.emptyResult}>{noMatchesLabel}</div>}
-      </div>
-    </div>
-  );
-};
+import { FC, MouseEvent, useState, useEffect, useMemo } from 'react';
+import clsx from 'clsx';
+import { phoneInfo } from '../../../../constants';
+import {
+  checkSearchStringInCountry,
+  getCountryTextByLocale,
+  findCountryIndexByCode,
+  sortCountriesByLocale,
+} from '../../../../helpers';
+import { useTweakStyles } from '../../../../hooks';
+import { ICommonProps } from '../../../../types';
+import { Flag } from '../../../Flag';
+import { Icon } from '../../../Icon';
+import { Input } from '../../../Input';
+import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
+import { IPhoneInfo } from '../../types';
+import {
+  useStyles,
+  IPhoneInputCountryListStyles,
+  inputStyles,
+} from './PhoneInputCountryList.styles';
+
+export interface IPhoneInputCountryListProps
+  extends Pick<ICommonProps<IPhoneInputCountryListStyles>, 'tweakStyles'> {
+  selectedCountryCode?: string;
+  locale: string;
+  placeholder: string;
+  noMatchesLabel: string;
+  closeList: () => void;
+  onChange: (country: IPhoneInfo, event: MouseEvent | KeyboardEvent) => void;
+}
+
+export const PhoneInputCountryList: FC<IPhoneInputCountryListProps> = ({
+  locale,
+  placeholder,
+  selectedCountryCode,
+  closeList,
+  noMatchesLabel,
+  onChange,
+  tweakStyles,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakInputStyles = useTweakStyles({
+    innerStyles: inputStyles,
+    tweakStyles,
+    className: 'tweakInput',
+    currentComponentName: 'PhoneInputCountryList',
+  });
+
+  const sortedCountries = useMemo(
+    () => sortCountriesByLocale(phoneInfo, locale),
+    [phoneInfo, locale],
+  );
+
+  const selectedCountryIdx = findCountryIndexByCode(selectedCountryCode, sortedCountries);
+
+  const [searchValue, setSearchValue] = useState('');
+  const [countriesList, setCountriesList] = useState(sortedCountries);
+  const [keyCursorOn, setKeyCursorOn] = useState(
+    selectedCountryIdx !== -1 ? selectedCountryIdx : 0,
+  );
+
+  const handleSearchChange = (newSearchValue: string) => {
+    const newCountriesList = sortedCountries.filter((country) =>
+      checkSearchStringInCountry(country, newSearchValue),
+    );
+
+    const defaultKeyCursorOn = newCountriesList.length > 0 ? 0 : -1;
+    const newSelectedCountryIdx = findCountryIndexByCode(selectedCountryCode, newCountriesList);
+
+    setCountriesList(newCountriesList);
+    setSearchValue(newSearchValue);
+    setKeyCursorOn(newSelectedCountryIdx !== -1 ? newSelectedCountryIdx : defaultKeyCursorOn);
+  };
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    const lastListItemIdx = countriesList.length - 1;
+
+    if (event.code === 'Escape' || event.code === 'Tab') {
+      closeList();
+    }
+
+    if (event.code === 'ArrowDown' && lastListItemIdx !== -1) {
+      // чтобы убрать перемещение курсора в инпуте
+      event.preventDefault();
+      setKeyCursorOn(keyCursorOn < lastListItemIdx ? keyCursorOn + 1 : 0);
+    }
+
+    if (event.code === 'ArrowUp' && lastListItemIdx !== -1) {
+      // чтобы убрать перемещение курсора в инпуте
+      event.preventDefault();
+      setKeyCursorOn(keyCursorOn > 0 ? keyCursorOn - 1 : lastListItemIdx);
+    }
+
+    if (event.code === 'Enter' || event.code === 'NumpadEnter') {
+      if (countriesList.length === 0) {
+        closeList();
+      } else if (keyCursorOn >= 0) {
+        onChange(countriesList[keyCursorOn], event);
+      }
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown, false);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown, false);
+    };
+  });
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.searchContainer}>
+        <div className={classes.searchIcon}>
+          <Icon type="search" />
+        </div>
+        <Input
+          value={searchValue}
+          placeholder={placeholder}
+          onChange={handleSearchChange}
+          tweakStyles={tweakInputStyles}
+          isClearable
+          shouldFocusOnMount
+        />
+      </div>
+      <div className={classes.flagList}>
+        {countriesList.map((country, index) => (
+          <ScrollIntoViewIfNeeded
+            key={country.countryCode}
+            active={keyCursorOn === index}
+            options={{ block: 'nearest' }}
+          >
+            <div
+              className={clsx(classes.listItem, {
+                [classes.activeCountry]: selectedCountryIdx === index,
+                [classes.selectedCountry]: keyCursorOn === index,
+              })}
+              onMouseEnter={() => setKeyCursorOn(index)}
+              onClick={(e) => onChange(country, e)}
+            >
+              <div className={classes.flag}>
+                <Flag countryCode={country.countryCode} />
+              </div>
+              <div className={classes.countryName}>{getCountryTextByLocale(country, locale)}</div>
+              <div className={classes.dialCode}>{`+${country.dialCode}`}</div>
+            </div>
+          </ScrollIntoViewIfNeeded>
+        ))}
+        {countriesList.length === 0 && <div className={classes.emptyResult}>{noMatchesLabel}</div>}
+      </div>
+    </div>
+  );
+};

package/src/components/PhoneInput/types.ts

@@ -1,16 +1,16 @@
-export interface IPhoneInfo {
-  countryEn: string;
-  countryRu: string;
-  countryCode: string;
-  dialCode: string;
-  phoneMask?: string;
-  dialCodePriority?: number;
-  areaCodes?: string[];
-  fullCodes: string[];
-}
-
-export interface IPhoneValue {
-  phoneNumber?: string;
-  dialCode?: string;
-  countryCode?: string;
-}
+export interface IPhoneInfo {
+  countryEn: string;
+  countryRu: string;
+  countryCode: string;
+  dialCode: string;
+  phoneMask?: string;
+  dialCodePriority?: number;
+  areaCodes?: string[];
+  fullCodes: string[];
+}
+
+export interface IPhoneValue {
+  phoneNumber?: string;
+  dialCode?: string;
+  countryCode?: string;
+}

package/src/components/RadioButton/RadioButton.stories.tsx

@@ -1,46 +1,46 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { RadioButton } from './RadioButton';
-
-export default {
-  title: 'Controls/RadioButton',
-  component: RadioButton,
-};
-
-const options = ['one', 'two', 'three'];
-
-const Template: ComponentStory<typeof RadioButton> = (args) => {
-  const [activeIdx, setActiveIdx] = useState(0);
-
-  return (
-    <div style={{ display: 'flex', gap: 20 }}>
-      {options.map((opt) => (
-        <RadioButton
-          {...args}
-          key={opt}
-          isChecked={opt === options[activeIdx]}
-          value={opt}
-          groupName="groupName"
-          onChange={(v) => {
-            setActiveIdx(options.findIndex((i) => i === v));
-          }}
-        />
-      ))}
-    </div>
-  );
-};
-
-export const Default = Template.bind({});
-
-Default.args = {
-  children: 'Label',
-  // isChecked: false,
-  isInvalid: false,
-  isDisabled: false,
-};
-
-Default.parameters = {
-  controls: {
-    exclude: ['data', 'value', 'groupName', 'isChecked', 'onChange'],
-  },
-};
+import { useState } from 'react';
+import { ComponentStory } from '@storybook/react';
+import { RadioButton } from './RadioButton';
+
+export default {
+  title: 'Controls/RadioButton',
+  component: RadioButton,
+};
+
+const options = ['one', 'two', 'three'];
+
+const Template: ComponentStory<typeof RadioButton> = (args) => {
+  const [activeIdx, setActiveIdx] = useState(0);
+
+  return (
+    <div style={{ display: 'flex', gap: 20 }}>
+      {options.map((opt) => (
+        <RadioButton
+          {...args}
+          key={opt}
+          isChecked={opt === options[activeIdx]}
+          value={opt}
+          groupName="groupName"
+          onChange={(v) => {
+            setActiveIdx(options.findIndex((i) => i === v));
+          }}
+        />
+      ))}
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  children: 'Label',
+  // isChecked: false,
+  isInvalid: false,
+  isDisabled: false,
+};
+
+Default.parameters = {
+  controls: {
+    exclude: ['data', 'value', 'groupName', 'isChecked', 'onChange'],
+  },
+};

package/src/components/RadioButton/RadioButton.tsx

@@ -1,57 +1,57 @@
-import { ReactNode } from 'react';
-import clsx from 'clsx';
-import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { ICommonProps } from '../../types';
-import { useStyles, IRadioButtonStyles } from './RadioButton.styles';
-
-export interface IRadioButtonProps<Value extends string> extends ICommonProps<IRadioButtonStyles> {
-  children?: ReactNode;
-  value: Value;
-  groupName: string;
-  isChecked?: boolean;
-  /** @default false */
-  isDisabled?: boolean;
-  /** @default false */
-  isInvalid?: boolean;
-  onChange: (value: Value) => void | Promise<void>;
-}
-
-export function RadioButton<Value extends string>({
-  children,
-  value,
-  groupName,
-  isChecked,
-  isDisabled = false,
-  isInvalid = false,
-  data,
-  testId,
-  tweakStyles,
-  onChange,
-}: IRadioButtonProps<Value>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
-
-  return (
-    <label
-      className={clsx(classes.label, isDisabled && classes.isDisabled)}
-      htmlFor={`${groupName}--${value}`}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
-    >
-      <input
-        id={`${groupName}--${value}`}
-        type="radio"
-        value={value}
-        name={groupName}
-        checked={isChecked}
-        disabled={isDisabled}
-        onChange={(event) => onChange(event.target.value as Value)}
-        className={clsx(classes.input, {
-          [classes.isDisabled]: isDisabled,
-          [classes.isInvalid]: isInvalid,
-        })}
-      />
-      {isReactNodeNotEmpty(children) && <span className={classes.content}>{children}</span>}
-    </label>
-  );
-}
+import { ReactNode } from 'react';
+import clsx from 'clsx';
+import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { useStyles, IRadioButtonStyles } from './RadioButton.styles';
+
+export interface IRadioButtonProps<Value extends string> extends ICommonProps<IRadioButtonStyles> {
+  children?: ReactNode;
+  value: Value;
+  groupName: string;
+  isChecked?: boolean;
+  /** @default false */
+  isDisabled?: boolean;
+  /** @default false */
+  isInvalid?: boolean;
+  onChange: (value: Value) => void | Promise<void>;
+}
+
+export function RadioButton<Value extends string>({
+  children,
+  value,
+  groupName,
+  isChecked,
+  isDisabled = false,
+  isInvalid = false,
+  data,
+  testId,
+  tweakStyles,
+  onChange,
+}: IRadioButtonProps<Value>): JSX.Element {
+  const classes = useStyles({ theme: tweakStyles });
+
+  return (
+    <label
+      className={clsx(classes.label, isDisabled && classes.isDisabled)}
+      htmlFor={`${groupName}--${value}`}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      <input
+        id={`${groupName}--${value}`}
+        type="radio"
+        value={value}
+        name={groupName}
+        checked={isChecked}
+        disabled={isDisabled}
+        onChange={(event) => onChange(event.target.value as Value)}
+        className={clsx(classes.input, {
+          [classes.isDisabled]: isDisabled,
+          [classes.isInvalid]: isInvalid,
+        })}
+      />
+      {isReactNodeNotEmpty(children) && <span className={classes.content}>{children}</span>}
+    </label>
+  );
+}

package/src/components/ScrollIntoViewIfNeeded/index.ts

@@ -1 +1 @@
-export * from './ScrollIntoViewIfNeeded';
+export * from './ScrollIntoViewIfNeeded';