@true-engineering/true-react-common-ui-kit 2.5.0 → 2.7.0

package/src/components/MoreMenu/MoreMenu.tsx

@@ -1,90 +1,90 @@
-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 { useTheme, useTweakStyles, useOnClickOutsideWithRef } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { Icon } from '../Icon';
-import { IListItem, List } from '../List';
-import { MoreMenuStyles, styles } from './MoreMenu.styles';
-
-export interface IMoreMenuProps extends ICommonProps {
-  tweakStyles?: MoreMenuStyles;
-  items: IListItem[];
-  isDisabled?: boolean;
-  /**
-   * @default true
-   */
-  hasDefaultStateBackground?: boolean;
-  testId?: string;
-  onMenuOpen?(): void;
-  onMenuClose?(): void;
-}
-
-export const MoreMenu: FC<IMoreMenuProps> = ({
-  items,
-  isDisabled,
-  hasDefaultStateBackground = true,
-  data,
-  testId,
-  tweakStyles,
-  onMenuOpen,
-  onMenuClose,
-}) => {
-  const { classes, componentStyles } = useTheme('MoreMenu', styles, tweakStyles);
-  const tweakListStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakList');
-
-  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 { useTheme, useTweakStyles, useOnClickOutsideWithRef } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
+import { List, IListProps } from '../List';
+import { MoreMenuStyles, styles } from './MoreMenu.styles';
+
+export interface IMoreMenuProps extends ICommonProps {
+  tweakStyles?: MoreMenuStyles;
+  items: IListProps['items'];
+  isDisabled?: boolean;
+  /**
+   * @default true
+   */
+  hasDefaultStateBackground?: boolean;
+  testId?: string;
+  onMenuOpen?(): void;
+  onMenuClose?(): void;
+}
+
+export const MoreMenu: FC<IMoreMenuProps> = ({
+  items,
+  isDisabled,
+  hasDefaultStateBackground = true,
+  data,
+  testId,
+  tweakStyles,
+  onMenuOpen,
+  onMenuClose,
+}) => {
+  const { classes, componentStyles } = useTheme('MoreMenu', styles, tweakStyles);
+  const tweakListStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakList');
+
+  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/MultiSelect/MultiSelect.stories.tsx

@@ -1,46 +1,46 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { MultiSelect } from './MultiSelect';
-
-export default {
-  title: 'MultiSelect',
-  component: MultiSelect,
-  argTypes: {
-    corners: { control: 'inline-radio', options: ['full', 'left', 'right'] },
-  },
-};
-
-const stringOptions = [
-  'Опция 1',
-  'Опция 11',
-  'Еще одна опция',
-  'Еще выбор',
-  'Очень длинная опция вот такой текст',
-  '1',
-  '2',
-  '3',
-  '4',
-];
-
-const Template: ComponentStory<typeof MultiSelect> = (args) => {
-  const [value, setValue] = useState<string[]>([]);
-
-  return (
-    <MultiSelect
-      {...args}
-      value={{ include: value }}
-      onChange={(e) => setValue(e?.include ?? [])}
-      fetchOptions={() => Promise.resolve(stringOptions)}
-    />
-  );
-};
-
-export const Default = Template.bind({});
-
-Default.args = {
-  placeholder: 'Placeholder',
-  corners: 'full',
-  isInvalid: false,
-  isDisabled: false,
-  isRequired: false,
-};
+import { useState } from 'react';
+import { ComponentStory } from '@storybook/react';
+import { MultiSelect } from './MultiSelect';
+
+export default {
+  title: 'MultiSelect',
+  component: MultiSelect,
+  argTypes: {
+    corners: { control: 'inline-radio', options: ['full', 'left', 'right'] },
+  },
+};
+
+const stringOptions = [
+  'Опция 1',
+  'Опция 11',
+  'Еще одна опция',
+  'Еще выбор',
+  'Очень длинная опция вот такой текст',
+  '1',
+  '2',
+  '3',
+  '4',
+];
+
+const Template: ComponentStory<typeof MultiSelect> = (args) => {
+  const [value, setValue] = useState<string[]>([]);
+
+  return (
+    <MultiSelect
+      {...args}
+      value={{ include: value }}
+      onChange={(e) => setValue(e?.include ?? [])}
+      fetchOptions={() => Promise.resolve(stringOptions)}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  placeholder: 'Placeholder',
+  corners: 'full',
+  isInvalid: false,
+  isDisabled: false,
+  isRequired: false,
+};

package/src/components/MultiSelect/MultiSelect.tsx

@@ -1,92 +1,92 @@
-import { useRef, useState } from 'react';
-import clsx from 'clsx';
-import { useOnClickOutside, useTheme, useTweakStyles } from '../../hooks';
-import {
-  MultiSelectList,
-  IMultiSelectListValues,
-  IMultiSelectLocale,
-  IMultiSelectLocaleKey,
-} from '../MultiSelectList';
-import { MultiSelectInput } from './components';
-import { THorizontalCornerConnection } from './types';
-import { styles, MultiSelectStyles } from './MultiSelect.styles';
-
-export interface IMultiSelectProps<Value = string> {
-  tweakStyles?: MultiSelectStyles;
-  value?: IMultiSelectListValues<Value>;
-  corners?: THorizontalCornerConnection;
-  isInvalid?: boolean;
-  isRequired?: boolean;
-  isDisabled?: boolean;
-  placeholder?: string;
-  localeKey?: IMultiSelectLocaleKey;
-  locale?: IMultiSelectLocale;
-  onChange: (value?: IMultiSelectListValues<Value>) => void;
-  fetchOptions: (value?: string, page?: number) => Promise<Value[]>;
-}
-
-export function MultiSelect<Value = string>({
-  value,
-  corners = 'full',
-  isInvalid,
-  isRequired,
-  isDisabled = false,
-  placeholder = '',
-  localeKey,
-  locale,
-  onChange,
-  fetchOptions,
-  tweakStyles,
-}: IMultiSelectProps<Value>): JSX.Element {
-  const { classes, componentStyles } = useTheme('MultiSelect', styles, tweakStyles);
-  const [isOpen, setIsOpen] = useState(false);
-  const ref = useRef(null);
-
-  const handleOnClose = () => {
-    setIsOpen(false);
-  };
-
-  useOnClickOutside(ref, handleOnClose, classes.root);
-
-  const tweakMultiSelectListStyles = useTweakStyles(
-    componentStyles,
-    tweakStyles,
-    'tweakMultiSelectList',
-  );
-
-  return (
-    <div
-      className={clsx(
-        classes.root,
-        classes[corners],
-        isOpen && classes.open,
-        isInvalid && !isDisabled && classes.invalid,
-        isRequired && classes.required,
-        isDisabled && classes.disabled,
-      )}
-    >
-      {/* Input */}
-      <MultiSelectInput
-        value={value}
-        isOpen={isOpen}
-        isDisabled={isDisabled}
-        placeholder={placeholder}
-        onToggle={(state) => setIsOpen(state)}
-      />
-      {/* Dropdown */}
-      {isOpen && (
-        <div className={classes.listContainer} ref={ref}>
-          <MultiSelectList
-            tweakStyles={tweakMultiSelectListStyles}
-            value={value}
-            localeKey={localeKey}
-            locale={locale}
-            fetchOptions={fetchOptions}
-            onChange={onChange}
-            onClose={handleOnClose}
-          />
-        </div>
-      )}
-    </div>
-  );
-}
+import { useRef, useState } from 'react';
+import clsx from 'clsx';
+import { useOnClickOutside, useTheme, useTweakStyles } from '../../hooks';
+import {
+  MultiSelectList,
+  IMultiSelectListValues,
+  IMultiSelectLocale,
+  IMultiSelectLocaleKey,
+} from '../MultiSelectList';
+import { MultiSelectInput } from './components';
+import { THorizontalCornerConnection } from './types';
+import { styles, MultiSelectStyles } from './MultiSelect.styles';
+
+export interface IMultiSelectProps<Value = string> {
+  tweakStyles?: MultiSelectStyles;
+  value?: IMultiSelectListValues<Value>;
+  corners?: THorizontalCornerConnection;
+  isInvalid?: boolean;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+  placeholder?: string;
+  localeKey?: IMultiSelectLocaleKey;
+  locale?: IMultiSelectLocale;
+  onChange: (value?: IMultiSelectListValues<Value>) => void;
+  fetchOptions: (value?: string, page?: number) => Promise<Value[]>;
+}
+
+export function MultiSelect<Value = string>({
+  value,
+  corners = 'full',
+  isInvalid,
+  isRequired,
+  isDisabled = false,
+  placeholder = '',
+  localeKey,
+  locale,
+  onChange,
+  fetchOptions,
+  tweakStyles,
+}: IMultiSelectProps<Value>): JSX.Element {
+  const { classes, componentStyles } = useTheme('MultiSelect', styles, tweakStyles);
+  const [isOpen, setIsOpen] = useState(false);
+  const ref = useRef(null);
+
+  const handleOnClose = () => {
+    setIsOpen(false);
+  };
+
+  useOnClickOutside(ref, handleOnClose, classes.root);
+
+  const tweakMultiSelectListStyles = useTweakStyles(
+    componentStyles,
+    tweakStyles,
+    'tweakMultiSelectList',
+  );
+
+  return (
+    <div
+      className={clsx(
+        classes.root,
+        classes[corners],
+        isOpen && classes.open,
+        isInvalid && !isDisabled && classes.invalid,
+        isRequired && classes.required,
+        isDisabled && classes.disabled,
+      )}
+    >
+      {/* Input */}
+      <MultiSelectInput
+        value={value}
+        isOpen={isOpen}
+        isDisabled={isDisabled}
+        placeholder={placeholder}
+        onToggle={(state) => setIsOpen(state)}
+      />
+      {/* Dropdown */}
+      {isOpen && (
+        <div className={classes.listContainer} ref={ref}>
+          <MultiSelectList
+            tweakStyles={tweakMultiSelectListStyles}
+            value={value}
+            localeKey={localeKey}
+            locale={locale}
+            fetchOptions={fetchOptions}
+            onChange={onChange}
+            onClose={handleOnClose}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/MultiSelect/components/MultiSelectInput/MultiSelectInput.styles.ts

@@ -1,73 +1,73 @@
-import { ComponentStyles } from '../../../../types';
-
-export const styles = {
-  root: {
-    display: 'flex',
-    justifyContent: 'center',
-    flexDirection: 'column',
-    height: '100%',
-    padding: [0, 12],
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-  },
-
-  placeholder: {
-    fontSize: 16,
-    userSelect: 'none',
-  },
-
-  placeholderSmall: {
-    fontSize: 12,
-    marginBottom: 2,
-    position: 'relative',
-  },
-
-  values: {
-    width: '100%',
-  },
-
-  value: {
-    width: 'calc(100% - 64px)',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-  },
-
-  amount: {
-    boxSizing: 'border-box',
-    position: 'absolute',
-    top: 'calc(50% - 11px)',
-    right: 44,
-    height: 22,
-    minWidth: 22,
-    fontSize: 14,
-    lineHeight: '16px',
-    textAlign: 'center',
-    padding: [2, 4],
-  },
-
-  indicator: {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    height: '100%',
-    width: 36,
-    borderRadius: 6,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-
-  arrow: {
-    width: 20,
-    height: 20,
-    transition: 'transform .2s ease',
-  },
-
-  arrowUp: {
-    transform: 'rotate(180deg)',
-  },
-
-  indicatorDisabled: {},
-};
-
-export type MultiSelectInputStyles = ComponentStyles<typeof styles>;
+import { ComponentStyles } from '../../../../types';
+
+export const styles = {
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    height: '100%',
+    padding: [0, 12],
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+  },
+
+  placeholder: {
+    fontSize: 16,
+    userSelect: 'none',
+  },
+
+  placeholderSmall: {
+    fontSize: 12,
+    marginBottom: 2,
+    position: 'relative',
+  },
+
+  values: {
+    width: '100%',
+  },
+
+  value: {
+    width: 'calc(100% - 64px)',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+
+  amount: {
+    boxSizing: 'border-box',
+    position: 'absolute',
+    top: 'calc(50% - 11px)',
+    right: 44,
+    height: 22,
+    minWidth: 22,
+    fontSize: 14,
+    lineHeight: '16px',
+    textAlign: 'center',
+    padding: [2, 4],
+  },
+
+  indicator: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    height: '100%',
+    width: 36,
+    borderRadius: 6,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  arrow: {
+    width: 20,
+    height: 20,
+    transition: 'transform .2s ease',
+  },
+
+  arrowUp: {
+    transform: 'rotate(180deg)',
+  },
+
+  indicatorDisabled: {},
+};
+
+export type MultiSelectInputStyles = ComponentStyles<typeof styles>;