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

package/src/components/Modal/Modal.tsx

@@ -1,196 +1,196 @@
-import { FC, ReactNode, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';
-import { RemoveScroll } from 'react-remove-scroll';
-import { CSSTransition } from 'react-transition-group';
-import clsx from 'clsx';
-import {
-  addDataTestId,
-  getTestId,
-  isReactNodeNotEmpty,
-} from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { CloseButton } from '../CloseButton';
-import { IModalPosition, IModalTransitionProps } from './types';
-import { useStyles, IModalStyles } from './Modal.styles';
-
-export interface IModalProps extends ICommonProps<IModalStyles>, IModalTransitionProps {
-  title?: ReactNode;
-  /** @default 'l */
-  size?: 'l' | 'm' | 's';
-  /** @default false */
-  isFooterSticky?: boolean;
-  buttons?: ReactNode[];
-  /** @default 'right' */
-  buttonsAlign?: 'left' | 'center' | 'right';
-  children?: ReactNode | ReactNode[];
-  /** @default 'center' */
-  position?: IModalPosition;
-  /** @default true */
-  hasCloseButton?: boolean;
-  /** @default true */
-  hasOverlay?: boolean;
-  /** @default true */
-  shouldCloseOnOverlayClick?: boolean;
-  /** @default true */
-  shouldCloseOnEsc?: boolean;
-  /** @default true */
-  shouldBlockScroll?: boolean;
-  /** @default false */
-  isOpen?: boolean;
-  zIndex?: number;
-  onClose?: () => void;
-}
-
-export const Modal: FC<IModalProps> = ({
-  data,
-  tweakStyles,
-  title,
-  size = 'l',
-  isFooterSticky = false,
-  buttons,
-  buttonsAlign = 'right',
-  hasCloseButton = true,
-  hasOverlay = true,
-  isOpen = false,
-  position = 'center',
-  children,
-  zIndex,
-  testId,
-  shouldCloseOnOverlayClick = true,
-  shouldCloseOnEsc = true,
-  shouldBlockScroll = true,
-  timeout = 150,
-  unmountOnExit = true,
-  onClose,
-  ...restProps
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const tweakCloseButtonStyles = useTweakStyles({
-    tweakStyles,
-    className: 'tweakCloseButton',
-    currentComponentName: 'Modal',
-  });
-
-  const [isClickOnOverlay, setIsClickOnOverlay] = useState(false);
-
-  const isModalOpen = restProps.in ?? isOpen;
-  const hasFooter = buttons !== undefined && buttons.length > 0;
-  const overlay = useRef<HTMLDivElement>(null);
-
-  // Клик на оверлее обрабатываем через связку onMouseDown и onMouseUp, т.к. клик
-  // создает ложные срабатывания (баг при старте клика на модалке и отпусканием мышки уже на оверлее)
-  const handleOutsideMouseDown = (event: MouseEvent) => {
-    if (onClose !== undefined && event.target === overlay.current) {
-      setIsClickOnOverlay(true);
-    }
-  };
-
-  const handleOutsideMouseUp = (event: MouseEvent) => {
-    if (onClose === undefined) {
-      return;
-    }
-    if (event.target === overlay.current && isClickOnOverlay) {
-      onClose();
-    }
-    setIsClickOnOverlay(false);
-  };
-
-  const handleEscClose = useCallback(
-    (event: KeyboardEvent) => {
-      if (event.code === 'Escape' && onClose !== undefined) {
-        onClose();
-      }
-    },
-    [onClose],
-  );
-
-  useEffect(() => {
-    if (!shouldCloseOnEsc || onClose === undefined || !isModalOpen) {
-      return () => null;
-    }
-
-    document.addEventListener('keydown', handleEscClose);
-    return () => document.removeEventListener('keydown', handleEscClose);
-  }, [shouldCloseOnEsc, onClose, isModalOpen, handleEscClose]);
-
-  return (
-    <CSSTransition
-      in={isModalOpen}
-      timeout={timeout}
-      unmountOnExit={unmountOnExit}
-      classNames={{
-        enter: classes['modal-enter'],
-        enterActive: classes['modal-enter-active'],
-        exit: classes['modal-exit'],
-        exitActive: classes['modal-exit-active'],
-      }}
-      {...restProps}
-    >
-      <div className={classes.modalWrapper}>
-        <RemoveScroll enabled={shouldBlockScroll} forwardProps>
-          <div
-            className={clsx(classes.root, classes[size], {
-              [classes.overlay]: position !== 'static' && hasOverlay,
-              [classes.sideBar]: position === 'left' || position === 'right',
-              [classes.fixedPosition]: position !== 'static',
-            })}
-            style={{ zIndex }}
-            {...addDataTestId(testId)}
-            {...addDataAttributes(data)}
-          >
-            <div
-              ref={overlay}
-              className={clsx(classes.innerOverlay, classes[`position-${position}`])}
-              onMouseDown={shouldCloseOnOverlayClick ? handleOutsideMouseDown : undefined}
-              onMouseUp={shouldCloseOnOverlayClick ? handleOutsideMouseUp : undefined}
-            >
-              <div
-                className={clsx(classes.modal, {
-                  [classes.withoutFooter]: !hasFooter,
-                  [classes.withStickyFooter]: isFooterSticky,
-                })}
-              >
-                {hasCloseButton && (
-                  <div className={classes.close}>
-                    <CloseButton
-                      testId={getTestId(testId, 'close-button')}
-                      tweakStyles={tweakCloseButtonStyles}
-                      onClose={onClose}
-                    />
-                  </div>
-                )}
-                {isReactNodeNotEmpty(title) && (
-                  <h3
-                    className={clsx(classes.title, {
-                      [classes.titleWithCloseButton]: hasCloseButton,
-                    })}
-                  >
-                    {title}
-                  </h3>
-                )}
-                {isReactNodeNotEmpty(children) && <div className={classes.content}>{children}</div>}
-                {hasFooter && (
-                  <div
-                    className={clsx(classes.footerWrapper, {
-                      [classes.stickyFooterWrapper]: isFooterSticky,
-                    })}
-                  >
-                    <div
-                      className={clsx(classes.footer, classes[`buttons-${buttonsAlign}`], {
-                        [classes.stickyFooter]: isFooterSticky,
-                      })}
-                    >
-                      {buttons.map((button) => button)}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-        </RemoveScroll>
-      </div>
-    </CSSTransition>
-  );
-};
+import { FC, ReactNode, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { RemoveScroll } from 'react-remove-scroll';
+import { CSSTransition } from 'react-transition-group';
+import clsx from 'clsx';
+import {
+  addDataTestId,
+  getTestId,
+  isReactNodeNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { CloseButton } from '../CloseButton';
+import { IModalPosition, IModalTransitionProps } from './types';
+import { useStyles, IModalStyles } from './Modal.styles';
+
+export interface IModalProps extends ICommonProps<IModalStyles>, IModalTransitionProps {
+  title?: ReactNode;
+  /** @default 'l */
+  size?: 'l' | 'm' | 's';
+  /** @default false */
+  isFooterSticky?: boolean;
+  buttons?: ReactNode[];
+  /** @default 'right' */
+  buttonsAlign?: 'left' | 'center' | 'right';
+  children?: ReactNode | ReactNode[];
+  /** @default 'center' */
+  position?: IModalPosition;
+  /** @default true */
+  hasCloseButton?: boolean;
+  /** @default true */
+  hasOverlay?: boolean;
+  /** @default true */
+  shouldCloseOnOverlayClick?: boolean;
+  /** @default true */
+  shouldCloseOnEsc?: boolean;
+  /** @default true */
+  shouldBlockScroll?: boolean;
+  /** @default false */
+  isOpen?: boolean;
+  zIndex?: number;
+  onClose?: () => void;
+}
+
+export const Modal: FC<IModalProps> = ({
+  data,
+  tweakStyles,
+  title,
+  size = 'l',
+  isFooterSticky = false,
+  buttons,
+  buttonsAlign = 'right',
+  hasCloseButton = true,
+  hasOverlay = true,
+  isOpen = false,
+  position = 'center',
+  children,
+  zIndex,
+  testId,
+  shouldCloseOnOverlayClick = true,
+  shouldCloseOnEsc = true,
+  shouldBlockScroll = true,
+  timeout = 150,
+  unmountOnExit = true,
+  onClose,
+  ...restProps
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakCloseButtonStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakCloseButton',
+    currentComponentName: 'Modal',
+  });
+
+  const [isClickOnOverlay, setIsClickOnOverlay] = useState(false);
+
+  const isModalOpen = restProps.in ?? isOpen;
+  const hasFooter = buttons !== undefined && buttons.length > 0;
+  const overlay = useRef<HTMLDivElement>(null);
+
+  // Клик на оверлее обрабатываем через связку onMouseDown и onMouseUp, т.к. клик
+  // создает ложные срабатывания (баг при старте клика на модалке и отпусканием мышки уже на оверлее)
+  const handleOutsideMouseDown = (event: MouseEvent) => {
+    if (onClose !== undefined && event.target === overlay.current) {
+      setIsClickOnOverlay(true);
+    }
+  };
+
+  const handleOutsideMouseUp = (event: MouseEvent) => {
+    if (onClose === undefined) {
+      return;
+    }
+    if (event.target === overlay.current && isClickOnOverlay) {
+      onClose();
+    }
+    setIsClickOnOverlay(false);
+  };
+
+  const handleEscClose = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.code === 'Escape' && onClose !== undefined) {
+        onClose();
+      }
+    },
+    [onClose],
+  );
+
+  useEffect(() => {
+    if (!shouldCloseOnEsc || onClose === undefined || !isModalOpen) {
+      return () => null;
+    }
+
+    document.addEventListener('keydown', handleEscClose);
+    return () => document.removeEventListener('keydown', handleEscClose);
+  }, [shouldCloseOnEsc, onClose, isModalOpen, handleEscClose]);
+
+  return (
+    <CSSTransition
+      in={isModalOpen}
+      timeout={timeout}
+      unmountOnExit={unmountOnExit}
+      classNames={{
+        enter: classes['modal-enter'],
+        enterActive: classes['modal-enter-active'],
+        exit: classes['modal-exit'],
+        exitActive: classes['modal-exit-active'],
+      }}
+      {...restProps}
+    >
+      <div className={classes.modalWrapper}>
+        <RemoveScroll enabled={shouldBlockScroll} forwardProps>
+          <div
+            className={clsx(classes.root, classes[size], {
+              [classes.overlay]: position !== 'static' && hasOverlay,
+              [classes.sideBar]: position === 'left' || position === 'right',
+              [classes.fixedPosition]: position !== 'static',
+            })}
+            style={{ zIndex }}
+            {...addDataTestId(testId)}
+            {...addDataAttributes(data)}
+          >
+            <div
+              ref={overlay}
+              className={clsx(classes.innerOverlay, classes[`position-${position}`])}
+              onMouseDown={shouldCloseOnOverlayClick ? handleOutsideMouseDown : undefined}
+              onMouseUp={shouldCloseOnOverlayClick ? handleOutsideMouseUp : undefined}
+            >
+              <div
+                className={clsx(classes.modal, {
+                  [classes.withoutFooter]: !hasFooter,
+                  [classes.withStickyFooter]: isFooterSticky,
+                })}
+              >
+                {hasCloseButton && (
+                  <div className={classes.close}>
+                    <CloseButton
+                      testId={getTestId(testId, 'close-button')}
+                      tweakStyles={tweakCloseButtonStyles}
+                      onClose={onClose}
+                    />
+                  </div>
+                )}
+                {isReactNodeNotEmpty(title) && (
+                  <h3
+                    className={clsx(classes.title, {
+                      [classes.titleWithCloseButton]: hasCloseButton,
+                    })}
+                  >
+                    {title}
+                  </h3>
+                )}
+                {isReactNodeNotEmpty(children) && <div className={classes.content}>{children}</div>}
+                {hasFooter && (
+                  <div
+                    className={clsx(classes.footerWrapper, {
+                      [classes.stickyFooterWrapper]: isFooterSticky,
+                    })}
+                  >
+                    <div
+                      className={clsx(classes.footer, classes[`buttons-${buttonsAlign}`], {
+                        [classes.stickyFooter]: isFooterSticky,
+                      })}
+                    >
+                      {buttons.map((button) => button)}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </RemoveScroll>
+      </div>
+    </CSSTransition>
+  );
+};

package/src/components/MoreMenu/MoreMenu.styles.ts

@@ -1,68 +1,68 @@
-import { rgba } from '../../helpers';
-import { colors, ITweakStyles, createThemedStyles } from '../../theme';
-import { IListStyles } from '../List';
-
-export const useStyles = createThemedStyles('MoreMenu', {
-  root: {
-    position: 'relative',
-  },
-
-  hasCircle: {},
-
-  button: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: 32,
-    height: 32,
-    backgroundColor: 'transparent',
-    color: colors.FONT_MEDIUM,
-    padding: 0,
-    borderRadius: '50%',
-    border: 'none',
-    cursor: 'pointer',
-    transition: 'background-color 0.25s ease-in-out',
-
-    '&$hasCircle': {
-      backgroundColor: rgba(colors.GREY_HOVER, 0.5),
-    },
-
-    '&:hover': {
-      backgroundColor: rgba(colors.BORDER_MAIN, 0.5),
-    },
-
-    '&:focus': {
-      backgroundColor: rgba(colors.FONT_DISABLED, 0.2),
-    },
-
-    '&:active, &$active': {
-      backgroundColor: rgba(colors.FONT_DISABLED, 0.5),
-    },
-
-    '&$disabled': {
-      backgroundColor: rgba(colors.GREY_FOCUS, 0.5),
-      color: colors.BORDER_MAIN,
-    },
-  },
-
-  icon: {
-    width: 30,
-    height: 30,
-  },
-
-  active: {},
-
-  disabled: {
-    cursor: 'default',
-  },
-
-  menu: {
-    position: 'absolute',
-    zIndex: 5,
-    top: '100%',
-    right: 0,
-    marginTop: 6,
-  },
-});
-
-export type IMoreMenuStyles = ITweakStyles<typeof useStyles, { tweakList: IListStyles }>;
+import { rgba } from '../../helpers';
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { IListStyles } from '../List';
+
+export const useStyles = createThemedStyles('MoreMenu', {
+  root: {
+    position: 'relative',
+  },
+
+  hasCircle: {},
+
+  button: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 32,
+    height: 32,
+    backgroundColor: 'transparent',
+    color: colors.FONT_MEDIUM,
+    padding: 0,
+    borderRadius: '50%',
+    border: 'none',
+    cursor: 'pointer',
+    transition: 'background-color 0.25s ease-in-out',
+
+    '&$hasCircle': {
+      backgroundColor: rgba(colors.GREY_HOVER, 0.5),
+    },
+
+    '&:hover': {
+      backgroundColor: rgba(colors.BORDER_MAIN, 0.5),
+    },
+
+    '&:focus': {
+      backgroundColor: rgba(colors.FONT_DISABLED, 0.2),
+    },
+
+    '&:active, &$active': {
+      backgroundColor: rgba(colors.FONT_DISABLED, 0.5),
+    },
+
+    '&$disabled': {
+      backgroundColor: rgba(colors.GREY_FOCUS, 0.5),
+      color: colors.BORDER_MAIN,
+    },
+  },
+
+  icon: {
+    width: 30,
+    height: 30,
+  },
+
+  active: {},
+
+  disabled: {
+    cursor: 'default',
+  },
+
+  menu: {
+    position: 'absolute',
+    zIndex: 5,
+    top: '100%',
+    right: 0,
+    marginTop: 6,
+  },
+});
+
+export type IMoreMenuStyles = ITweakStyles<typeof useStyles, { tweakList: IListStyles }>;

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: 'Controls/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: 'Controls/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,
+};