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

package/package.json

@@ -1,98 +1,98 @@
-{
-  "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "3.40.0",
-  "description": "True Engineering React UI Kit with theming support",
-  "author": "True Engineering (https://trueengineering.ru)",
-  "keywords": [
-    "TE",
-    "True Engineering",
-    "UI Kit with theming support",
-    "UI Kit"
-  ],
-  "homepage": "",
-  "license": "Apache-2.0",
-  "type": "module",
-  "types": "dist/index.d.ts",
-  "main": "dist/true-react-common-ui-kit.umd.cjs",
-  "module": "./dist/true-react-common-ui-kit.js",
-  "directories": {
-    "lib": "src"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "files": [
-    "src",
-    "dist"
-  ],
-  "exports": {
-    ".": {
-      "require": "./dist/true-react-common-ui-kit.umd.cjs",
-      "import": "./dist/true-react-common-ui-kit.js"
-    },
-    "./dist/style.css": "./dist/style.css",
-    "./src": "./src/index.ts"
-  },
-  "scripts": {
-    "build": "tsc && vite build",
-    "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
-    "format": "prettier --write \"**/*.{js,jsx,css,json,ts,tsx}\"",
-    "format:check": "prettier --check \"**/*.{js,jsx,css,json,ts,tsx}\"",
-    "full-check": "yarn format:check && yarn lint",
-    "types-check": "tsc --noEmit"
-  },
-  "dependencies": {
-    "@floating-ui/react": "0.26.12",
-    "@true-engineering/true-react-platform-helpers": "0.4.4",
-    "clsx": "1.2.1",
-    "country-flag-icons": "1.5.5",
-    "date-fns": "2.29.3",
-    "filesize": "10.1.1",
-    "hex-to-rgba": "2.0.1",
-    "jss": "10.10.0",
-    "lodash-es": "4.17.21",
-    "react": "18.2.0",
-    "react-datepicker": "4.25.0",
-    "react-dom": "18.2.0",
-    "react-input-mask": "3.0.0-alpha.2",
-    "react-jss": "10.10.0",
-    "react-overlays": "5.2.1",
-    "react-remove-scroll": "2.5.6",
-    "react-transition-group": "4.4.5",
-    "scroll-into-view-if-needed": "3.0.6",
-    "ts-debounce": "4.0.0"
-  },
-  "devDependencies": {
-    "@babel/core": "7.20.12",
-    "@storybook/addon-essentials": "7.6.17",
-    "@storybook/blocks": "7.6.17",
-    "@storybook/react": "7.6.17",
-    "@storybook/react-vite": "7.6.17",
-    "@storybook/test": "7.6.17",
-    "@swc/core": "^1.3.30",
-    "@trivago/prettier-plugin-sort-imports": "4.3.0",
-    "@types/lodash-es": "4.17.11",
-    "@types/react": "18.2.79",
-    "@types/react-datepicker": "4.19.4",
-    "@types/react-dom": "18.2.25",
-    "@types/react-input-mask": "3.0.2",
-    "@types/react-transition-group": "4.4.10",
-    "@typescript-eslint/eslint-plugin": "5.48.2",
-    "@typescript-eslint/parser": "5.48.2",
-    "@vitejs/plugin-react": "3.0.0",
-    "eslint": "8.36.0",
-    "eslint-config-prettier": "8.7.0",
-    "eslint-plugin-import": "2.29.0",
-    "eslint-plugin-react": "7.32.2",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "prettier": "2.8.3",
-    "rollup-plugin-swc3": "0.3.0",
-    "typescript": "4.9.3",
-    "unplugin-swc": "1.3.2",
-    "vite": "4.0.0",
-    "vite-plugin-dts": "3.7.3"
-  },
-  "resolutions": {
-    "strip-ansi": "6.0.1"
-  }
-}
+{
+  "name": "@true-engineering/true-react-common-ui-kit",
+  "version": "3.41.0",
+  "description": "True Engineering React UI Kit with theming support",
+  "author": "True Engineering (https://trueengineering.ru)",
+  "keywords": [
+    "TE",
+    "True Engineering",
+    "UI Kit with theming support",
+    "UI Kit"
+  ],
+  "homepage": "",
+  "license": "Apache-2.0",
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "main": "dist/true-react-common-ui-kit.umd.cjs",
+  "module": "./dist/true-react-common-ui-kit.js",
+  "directories": {
+    "lib": "src"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "require": "./dist/true-react-common-ui-kit.umd.cjs",
+      "import": "./dist/true-react-common-ui-kit.js"
+    },
+    "./dist/style.css": "./dist/style.css",
+    "./src": "./src/index.ts"
+  },
+  "scripts": {
+    "build": "tsc && vite build",
+    "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
+    "format": "prettier --write \"**/*.{js,jsx,css,json,ts,tsx}\"",
+    "format:check": "prettier --check \"**/*.{js,jsx,css,json,ts,tsx}\"",
+    "full-check": "yarn format:check && yarn lint",
+    "types-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@floating-ui/react": "0.26.12",
+    "@true-engineering/true-react-platform-helpers": "0.4.4",
+    "clsx": "1.2.1",
+    "country-flag-icons": "1.5.5",
+    "date-fns": "2.29.3",
+    "filesize": "10.1.1",
+    "hex-to-rgba": "2.0.1",
+    "jss": "10.10.0",
+    "lodash-es": "4.17.21",
+    "react": "18.2.0",
+    "react-datepicker": "4.25.0",
+    "react-dom": "18.2.0",
+    "react-input-mask": "3.0.0-alpha.2",
+    "react-jss": "10.10.0",
+    "react-overlays": "5.2.1",
+    "react-remove-scroll": "2.5.6",
+    "react-transition-group": "4.4.5",
+    "scroll-into-view-if-needed": "3.0.6",
+    "ts-debounce": "4.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.20.12",
+    "@storybook/addon-essentials": "7.6.17",
+    "@storybook/blocks": "7.6.17",
+    "@storybook/react": "7.6.17",
+    "@storybook/react-vite": "7.6.17",
+    "@storybook/test": "7.6.17",
+    "@swc/core": "^1.3.30",
+    "@trivago/prettier-plugin-sort-imports": "4.3.0",
+    "@types/lodash-es": "4.17.11",
+    "@types/react": "18.2.79",
+    "@types/react-datepicker": "4.19.4",
+    "@types/react-dom": "18.2.25",
+    "@types/react-input-mask": "3.0.2",
+    "@types/react-transition-group": "4.4.10",
+    "@typescript-eslint/eslint-plugin": "5.48.2",
+    "@typescript-eslint/parser": "5.48.2",
+    "@vitejs/plugin-react": "3.0.0",
+    "eslint": "8.36.0",
+    "eslint-config-prettier": "8.7.0",
+    "eslint-plugin-import": "2.29.0",
+    "eslint-plugin-react": "7.32.2",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "prettier": "2.8.3",
+    "rollup-plugin-swc3": "0.3.0",
+    "typescript": "4.9.3",
+    "unplugin-swc": "1.3.2",
+    "vite": "4.0.0",
+    "vite-plugin-dts": "3.7.3"
+  },
+  "resolutions": {
+    "strip-ansi": "6.0.1"
+  }
+}

package/src/components/MoreMenu/MoreMenu.tsx

@@ -1,93 +1,93 @@
-import { FC, MouseEvent, useRef, useState } from 'react';
-import clsx from 'clsx';
-import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { useTweakStyles, useOnClickOutsideWithRef } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { Icon } from '../Icon';
-import { IListItem, List } from '../List';
-import { useStyles, IMoreMenuStyles } from './MoreMenu.styles';
-
-export interface IMoreMenuProps extends ICommonProps<IMoreMenuStyles> {
-  items: IListItem[];
-  /** @default false */
-  isDisabled?: boolean;
-  /** @default true */
-  hasDefaultStateBackground?: boolean;
-  onMenuOpen?: () => void;
-  onMenuClose?: () => void;
-}
-
-/** @deprecated Используйте {@link import('../NewMoreMenu').NewMoreMenu NewMoreMenu} */
-export const MoreMenu: FC<IMoreMenuProps> = ({
-  items,
-  isDisabled = false,
-  hasDefaultStateBackground = true,
-  data,
-  testId,
-  tweakStyles,
-  onMenuOpen,
-  onMenuClose,
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const tweakListStyles = useTweakStyles({
-    tweakStyles,
-    className: 'tweakList',
-    currentComponentName: 'MoreMenu',
-  });
-
-  const [isMenuShown, setIsMenuShown] = useState(false);
-  const list = useRef<HTMLDivElement>(null);
-  const button = useRef<HTMLButtonElement>(null);
-
-  const isButtonDisabled = isDisabled || items.length === 0;
-
-  const toggleMenu = (event: MouseEvent) => {
-    const isShown = !isMenuShown;
-    event.stopPropagation();
-    setIsMenuShown(isShown);
-    if (isShown) {
-      onMenuOpen?.();
-    } else {
-      onMenuClose?.();
-    }
-  };
-
-  const handleCloseMenu = () => {
-    setIsMenuShown(false);
-    onMenuClose?.();
-  };
-
-  useOnClickOutsideWithRef(list, handleCloseMenu, button);
-
-  return (
-    <div className={classes.root}>
-      <button
-        ref={button}
-        className={clsx(classes.button, {
-          [classes.hasCircle]: hasDefaultStateBackground,
-          [classes.disabled]: isButtonDisabled,
-          [classes.active]: isMenuShown,
-        })}
-        onClick={!isButtonDisabled ? toggleMenu : undefined}
-        {...addDataTestId(testId)}
-        {...addDataAttributes(data)}
-      >
-        <div className={classes.icon}>
-          <Icon type="menu" />
-        </div>
-      </button>
-      {isMenuShown && !isButtonDisabled && (
-        <div className={classes.menu} ref={list}>
-          <List
-            items={items}
-            testId={getTestId(testId, 'list')}
-            tweakStyles={tweakListStyles}
-            onClick={handleCloseMenu}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
+import { FC, MouseEvent, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { useTweakStyles, useOnClickOutsideWithRef } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
+import { IListItem, List } from '../List';
+import { useStyles, IMoreMenuStyles } from './MoreMenu.styles';
+
+export interface IMoreMenuProps extends ICommonProps<IMoreMenuStyles> {
+  items: IListItem[];
+  /** @default false */
+  isDisabled?: boolean;
+  /** @default true */
+  hasDefaultStateBackground?: boolean;
+  onMenuOpen?: () => void;
+  onMenuClose?: () => void;
+}
+
+/** @deprecated Используйте {@link import('../NewMoreMenu').NewMoreMenu NewMoreMenu} */
+export const MoreMenu: FC<IMoreMenuProps> = ({
+  items,
+  isDisabled = false,
+  hasDefaultStateBackground = true,
+  data,
+  testId,
+  tweakStyles,
+  onMenuOpen,
+  onMenuClose,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakListStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakList',
+    currentComponentName: 'MoreMenu',
+  });
+
+  const [isMenuShown, setIsMenuShown] = useState(false);
+  const list = useRef<HTMLDivElement>(null);
+  const button = useRef<HTMLButtonElement>(null);
+
+  const isButtonDisabled = isDisabled || items.length === 0;
+
+  const toggleMenu = (event: MouseEvent) => {
+    const isShown = !isMenuShown;
+    event.stopPropagation();
+    setIsMenuShown(isShown);
+    if (isShown) {
+      onMenuOpen?.();
+    } else {
+      onMenuClose?.();
+    }
+  };
+
+  const handleCloseMenu = () => {
+    setIsMenuShown(false);
+    onMenuClose?.();
+  };
+
+  useOnClickOutsideWithRef(list, handleCloseMenu, button);
+
+  return (
+    <div className={classes.root}>
+      <button
+        ref={button}
+        className={clsx(classes.button, {
+          [classes.hasCircle]: hasDefaultStateBackground,
+          [classes.disabled]: isButtonDisabled,
+          [classes.active]: isMenuShown,
+        })}
+        onClick={!isButtonDisabled ? toggleMenu : undefined}
+        {...addDataTestId(testId)}
+        {...addDataAttributes(data)}
+      >
+        <div className={classes.icon}>
+          <Icon type="menu" />
+        </div>
+      </button>
+      {isMenuShown && !isButtonDisabled && (
+        <div className={classes.menu} ref={list}>
+          <List
+            items={items}
+            testId={getTestId(testId, 'list')}
+            tweakStyles={tweakListStyles}
+            onClick={handleCloseMenu}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -1,51 +1,52 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { IInputProps } from '../Input';
-import { SmartInput } from './SmartInput';
-import { ISmartType } from './types';
-
-const types: Array<IInputProps['type']> = ['text', 'password', 'email', 'number'];
-const smartTypes: ISmartType[] = ['default', 'agencyName', 'surname', 'name', 'email'];
-
-export default {
-  title: 'Inputs/SmartInput',
-  component: SmartInput,
-  argTypes: {
-    type: { control: 'inline-radio', options: types },
-    smartType: { control: 'inline-radio', options: smartTypes },
-  },
-};
-
-const Template: ComponentStory<typeof SmartInput> = (args) => {
-  const [value, setValue] = useState('');
-
-  return (
-    <div>
-      <div>Фичи умного инпута:</div>
-      <ul>
-        <li>Переключение раскладки при вводе</li>
-        <li>Транслитерация при копировании текста на русском</li>
-        <li>
-          Запрет ввода определённых символов для разных видов полей, например, только буквы, пробелы
-          и дефис для фамилий и т.д.
-        </li>
-        <li>Фильтрация скопированного значения на предмет запрещённых символов</li>
-        <li>Трансформация значения в UPPERCASE</li>
-      </ul>
-
-      <SmartInput {...args} value={value} onChange={(v) => setValue(v)} />
-    </div>
-  );
-};
-
-export const Default = Template.bind({});
-
-Default.args = {
-  label: 'Label',
-  placeholder: 'Placeholder',
-  type: 'text',
-  smartType: 'default',
-  isUpperCase: false,
-  isDisabled: false,
-  hasFloatingLabel: true,
-};
+import { useState } from 'react';
+import { ComponentStory } from '@storybook/react';
+import { IInputProps } from '../Input';
+import { SmartInput } from './SmartInput';
+import { ISmartType } from './types';
+
+const types: Array<IInputProps['type']> = ['text', 'password', 'email', 'number'];
+const smartTypes: ISmartType[] = ['default', 'agencyName', 'surname', 'name', 'email'];
+
+export default {
+  title: 'Inputs/SmartInput',
+  component: SmartInput,
+  argTypes: {
+    type: { control: 'inline-radio', options: types },
+    smartType: { control: 'inline-radio', options: smartTypes },
+  },
+};
+
+const Template: ComponentStory<typeof SmartInput> = (args) => {
+  const [value, setValue] = useState('');
+
+  return (
+    <div>
+      <div>Фичи умного инпута:</div>
+      <ul>
+        <li>Переключение раскладки при вводе</li>
+        <li>Транслитерация при копировании текста на русском</li>
+        <li>
+          Запрет ввода определённых символов для разных видов полей, например, только буквы, пробелы
+          и дефис для фамилий и т.д.
+        </li>
+        <li>Фильтрация скопированного значения на предмет запрещённых символов</li>
+        <li>Трансформация значения в UPPERCASE</li>
+      </ul>
+
+      <SmartInput {...args} value={value} onChange={setValue} />
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  label: 'Label',
+  placeholder: 'Placeholder',
+  type: 'text',
+  smartType: 'default',
+  isUpperCase: false,
+  isDisabled: false,
+  isTransliterationEnabled: true,
+  hasFloatingLabel: true,
+};