@true-engineering/true-react-common-ui-kit 4.0.0-alpha2 → 4.0.0-alpha4

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

@@ -1,69 +1,69 @@
-import { rgba } from '../../helpers';
-import { colors, ITweakStyles, createThemedStyles, animations } 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: animations.defaultTransition,
-    transitionProperty: 'background-color',
-
-    '&$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, animations } 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: animations.defaultTransition,
+    transitionProperty: 'background-color',
+
+    '&$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/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/MoreMenu/index.ts

@@ -1,2 +1,2 @@
-export * from './MoreMenu';
-export type { IMoreMenuStyles } from './MoreMenu.styles';
+export * from './MoreMenu';
+export type { IMoreMenuStyles } from './MoreMenu.styles';

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,
+};

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

@@ -1,59 +1,59 @@
-import { ITweakStyles, createThemedStyles } from '../../theme';
-import { IMultiSelectListStyles } from '../MultiSelectList';
-
-export const useStyles = createThemedStyles('MultiSelect', {
-  root: {
-    position: 'relative',
-    boxSizing: 'border-box',
-    height: '100%',
-    width: '100%',
-    cursor: 'pointer',
-    fontSize: 16,
-  },
-
-  required: {
-    '&:before': {
-      content: '""',
-      position: 'absolute',
-      left: -12,
-      top: '50%',
-      transform: 'translate(0, -50%)',
-      width: 6,
-      height: 6,
-      borderRadius: '50%',
-    },
-  },
-
-  disabled: {
-    cursor: 'default',
-  },
-
-  listContainer: {
-    position: 'absolute',
-    top: 'calc(100% + 4px)',
-    left: -1,
-    right: -1,
-    zIndex: 2,
-  },
-
-  invalid: {},
-
-  open: {},
-
-  full: {},
-
-  left: {},
-
-  right: {},
-});
-
-export const multiSelectListStyles: IMultiSelectListStyles = {
-  root: {
-    width: '100%',
-  },
-};
-
-export type IMultiSelectStyles = ITweakStyles<
-  typeof useStyles,
-  { tweakMultiSelectList: IMultiSelectListStyles }
->;
+import { ITweakStyles, createThemedStyles } from '../../theme';
+import { IMultiSelectListStyles } from '../MultiSelectList';
+
+export const useStyles = createThemedStyles('MultiSelect', {
+  root: {
+    position: 'relative',
+    boxSizing: 'border-box',
+    height: '100%',
+    width: '100%',
+    cursor: 'pointer',
+    fontSize: 16,
+  },
+
+  required: {
+    '&:before': {
+      content: '""',
+      position: 'absolute',
+      left: -12,
+      top: '50%',
+      transform: 'translate(0, -50%)',
+      width: 6,
+      height: 6,
+      borderRadius: '50%',
+    },
+  },
+
+  disabled: {
+    cursor: 'default',
+  },
+
+  listContainer: {
+    position: 'absolute',
+    top: 'calc(100% + 4px)',
+    left: -1,
+    right: -1,
+    zIndex: 2,
+  },
+
+  invalid: {},
+
+  open: {},
+
+  full: {},
+
+  left: {},
+
+  right: {},
+});
+
+export const multiSelectListStyles: IMultiSelectListStyles = {
+  root: {
+    width: '100%',
+  },
+};
+
+export type IMultiSelectStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakMultiSelectList: IMultiSelectListStyles }
+>;