@true-engineering/true-react-common-ui-kit 4.0.0-alpha37 → 4.0.0-alpha38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "4.0.0-alpha37",
+  "version": "4.0.0-alpha38",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/FiltersPane/components/FilterInterval/FilterInterval.tsx

@@ -6,7 +6,7 @@ import { ICommonProps } from '../../../../types';
 import { Button } from '../../../Button';
 import { NumberInput } from '../../../NumberInput';
 import { getLocale, sortValues } from '../../helpers';
-import { IFilterLocaleKey, IPartialFilterLocale } from '../../types';
+import { IFilterLocaleKey, IFilterNumberInputProps, IPartialFilterLocale } from '../../types';
 import {
   clearButtonStyles,
   IFilterIntervalStyles,
@@ -22,16 +22,8 @@ export interface IFilterIntervalProps extends ICommonProps<IFilterIntervalStyles
   locale?: IPartialFilterLocale;
   withFieldNameInLabel?: boolean;
   canBeFloat?: boolean;
-  fromInput?: {
-    min?: number;
-    max?: number;
-    maxLength?: number;
-  };
-  toInput?: {
-    min?: number;
-    max?: number;
-    maxLength?: number;
-  };
+  fromInput?: IFilterNumberInputProps;
+  toInput?: IFilterNumberInputProps;
 }
 
 export const FilterInterval: FC<IFilterIntervalProps> = ({
@@ -100,11 +92,9 @@ export const FilterInterval: FC<IFilterIntervalProps> = ({
             }
             canBeFloat={canBeFloat}
             isClearable
-            min={fromInput?.min}
-            max={fromInput?.max}
-            maxLength={fromInput?.maxLength}
             tweakStyles={tweakInputStyles}
             testId={getTestId(testId, 'start')}
+            {...fromInput}
           />
           {withFieldNameInLabel && (
             <div className={classes.autosize}>
@@ -123,11 +113,9 @@ export const FilterInterval: FC<IFilterIntervalProps> = ({
             }
             canBeFloat={canBeFloat}
             isClearable
-            min={toInput?.min}
-            max={toInput?.max}
-            maxLength={toInput?.maxLength}
             tweakStyles={tweakInputStyles}
             testId={getTestId(testId, 'end')}
+            {...toInput}
           />
           {withFieldNameInLabel && (
             <div className={classes.autosize}>

package/src/components/FiltersPane/types.ts

@@ -2,6 +2,7 @@ import { FC, ReactNode } from 'react';
 import { ITestIdProps } from '../../types';
 import { IDatePickerProps } from '../DatePicker';
 import { IMultiSelectListValues } from '../MultiSelectList';
+import { INumberInputProps } from '../NumberInput';
 import type {
   IFilterIntervalProps,
   IFilterMultiSelectProps,
@@ -175,3 +176,8 @@ export type IFilterWithDateDatePickerProps = Omit<
   IDatePickerProps,
   'onChange' | 'value' | 'locale' | 'months' | 'selectedDate' | 'tweakStyles'
 >;
+
+export type IFilterNumberInputProps = Omit<
+  INumberInputProps,
+  'onChange' | 'value' | 'label' | 'testId' | 'tweakStyles'
+>;

package/src/components/FlexibleTable/FlexibleTable.styles.ts

@@ -1,10 +1,12 @@
 import { rgba } from '../../helpers';
-import { colors, ITweakStyles, createThemedStyles, animations } from '../../theme';
+import { colors, ITweakStyles, createThemedStyles, animations, helpers } from '../../theme';
 import type { IFlexibleTableRowStyles } from './components';
 
 export const STICKY_SHADOW_PADDING = 12;
 
 export const useStyles = createThemedStyles('FlexibleTable', {
+  flexibleTableWrapper: {},
+
   root: {
     width: '100%',
     position: 'relative',
@@ -13,7 +15,7 @@ export const useStyles = createThemedStyles('FlexibleTable', {
   },
 
   scroll: {
-    overflow: 'auto',
+    ...helpers.withScrollBar,
     /*
       Чтобы сделать таблицу на всю высоту проставьте
       height у родителя таблицы у себя в проекте.

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -201,7 +201,10 @@ export function FlexibleTable<
   const Table = TableRenders[renderMode];
 
   return (
-    <div ref={ref} className={clsx({ [classes.scroll]: isHorizontallyScrollable })}>
+    <div
+      ref={ref}
+      className={clsx(classes.flexibleTableWrapper, { [classes.scroll]: isHorizontallyScrollable })}
+    >
       <Table.Root className={classes.root} {...addDataAttributes({ ...data, isLoading }, testId)}>
         {shouldRenderHeader && (
           <Table.Head className={classes.head}>

package/src/components/FloatDocActions/FloatDocActions.stories.tsx

@@ -0,0 +1,117 @@
+import { FC, useState } from 'react';
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '../Button';
+import { Checkbox, ICheckboxProps } from '../Checkbox';
+import { NewMoreMenu } from '../NewMoreMenu';
+import { TextButton } from '../TextButton';
+import {
+  FloatDocActions as FloatDocActionsComponent,
+  IFloatDocActionsProps,
+} from './FloatDocActions';
+import { DOC_ACTIONS_VIEWS } from './components';
+
+const DATA_LENGTH = 300;
+
+const Actions: FC = () => (
+  <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+    <TextButton icon="trash-can" view="custom">
+      Удалить
+    </TextButton>
+    <TextButton icon="pencil">Редактировать</TextButton>
+    <Button view="secondary">Отказать</Button>
+    <Button>Одобрить</Button>
+    <NewMoreMenu items={[]} />
+  </div>
+);
+
+const DocActionsWithData: FC<IFloatDocActionsProps> = (props) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [state, setState] = useState<Set<number>>(new Set());
+
+  const handleToggle = () => {
+    setIsOpen((prevState) => !prevState);
+  };
+
+  const handleSelectRow: ICheckboxProps<number>['onSelect'] = ({ value }) => {
+    if (isNotEmpty(value)) {
+      setState((prev) => {
+        const newSet = new Set(prev);
+        if (newSet.has(value)) {
+          newSet.delete(value);
+        } else {
+          newSet.add(value);
+        }
+        return newSet;
+      });
+    }
+  };
+
+  const handleSelectAll: ICheckboxProps<never>['onSelect'] = ({ isSelected }) => {
+    console.log('isSelected:', isSelected);
+
+    setState(
+      isSelected ? new Set<number>(Array.from({ length: DATA_LENGTH }, (_, i) => i)) : new Set(),
+    );
+  };
+
+  const isAllRowsSelected = state.size === DATA_LENGTH;
+  const title = props.title + ': ' + state.size;
+
+  return (
+    <div style={{ display: 'flex', gap: '50px' }}>
+      <div style={{ position: 'sticky', top: '50px', height: '50px' }}>
+        <Button onClick={handleToggle}>Toggle</Button>
+      </div>
+      <div style={{ width: '1000px' }}>
+        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+          {Array.from({ length: DATA_LENGTH }, (_, index) => (
+            <tr key={index} style={{ border: '1px solid skyblue' }}>
+              <td style={{ padding: '5px', display: 'flex', gap: '12px' }}>
+                {isOpen && (
+                  <Checkbox value={index} isChecked={state.has(index)} onSelect={handleSelectRow} />
+                )}
+                <div>Строка {index + 1}</div>
+              </td>
+            </tr>
+          ))}
+        </table>
+        <div style={{ position: 'sticky', bottom: '12px', left: '8px', right: '18px' }}>
+          <FloatDocActionsComponent
+            {...props}
+            title={title}
+            isOpen={isOpen}
+            isChecked={isAllRowsSelected}
+            isSemiChecked={!isAllRowsSelected && state.size !== 0}
+            onSelect={handleSelectAll}
+          >
+            <Actions />
+          </FloatDocActionsComponent>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const meta: Meta<typeof DocActionsWithData> = {
+  title: 'Table/FloatDocActions',
+  component: DocActionsWithData,
+  args: {
+    title: 'Выбрано',
+    view: 'neutral',
+  },
+  argTypes: {
+    view: { options: DOC_ACTIONS_VIEWS, control: 'inline-radio' },
+  },
+  parameters: {
+    controls: {
+      exclude: ['actions'],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FloatDocActionsComponent>;
+
+export const Default: Story = {};

package/src/components/FloatDocActions/FloatDocActions.styles.ts

@@ -0,0 +1,12 @@
+import { createUseStyles } from 'react-jss';
+import { animations, ITweakStyles } from '../../theme';
+import { IDocActionsStyles } from './components';
+
+export const useStyles = createUseStyles({
+  ...animations.slideUp,
+});
+
+export type IFloatDocActionsStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakDocActions: IDocActionsStyles }
+>;

package/src/components/FloatDocActions/FloatDocActions.tsx

@@ -0,0 +1,34 @@
+import { FC } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { DocActions, IDocActionsProps } from './components';
+import { DEFAULT_TIMEOUT } from './constants';
+import { useStyles } from './FloatDocActions.styles';
+
+export interface IFloatDocActionsProps extends IDocActionsProps {
+  isOpen: boolean;
+}
+
+export const FloatDocActions: FC<IFloatDocActionsProps> = ({
+  isOpen,
+  children,
+  ...docActionsProps
+}) => {
+  const classes = useStyles();
+
+  return (
+    <CSSTransition
+      in={isOpen}
+      timeout={DEFAULT_TIMEOUT}
+      mountOnEnter
+      unmountOnExit
+      classNames={{
+        enter: classes['slide-up-enter'],
+        enterActive: classes['slide-up-enter-active'],
+        exit: classes['slide-up-exit'],
+        exitActive: classes['slide-up-exit-active'],
+      }}
+    >
+      <DocActions {...docActionsProps}>{children}</DocActions>
+    </CSSTransition>
+  );
+};

package/src/components/FloatDocActions/components/DocActions/DocActions.styles.ts

@@ -0,0 +1,29 @@
+import { createThemedStyles, ITweakStyles } from '../../../../theme';
+import { ICheckboxStyles } from '../../../Checkbox';
+
+export const useStyles = createThemedStyles('DocActions', {
+  docActions: {
+    display: 'grid',
+    alignItems: 'center',
+    gridTemplateColumns: 'max-content 1fr',
+  },
+
+  neutral: {},
+
+  inverse: {},
+
+  counterWrapper: {},
+
+  title: {},
+
+  actionsWrapper: {
+    justifySelf: 'end',
+  },
+});
+
+export type IDocActionsStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakCheckbox: ICheckboxStyles;
+  }
+>;

package/src/components/FloatDocActions/components/DocActions/DocActions.tsx

@@ -0,0 +1,43 @@
+import { FC, ReactNode } from 'react';
+import clsx from 'clsx';
+import { useTweakStyles } from '../../../../hooks';
+import { ICommonProps } from '../../../../types';
+import { Checkbox, ICheckboxProps } from '../../../Checkbox';
+import { IDocActionsView } from './types';
+import { IDocActionsStyles, useStyles } from './DocActions.styles';
+
+export interface IDocActionsProps
+  extends Omit<ICheckboxProps<never>, 'tweakStyles'>,
+    ICommonProps<IDocActionsStyles> {
+  title: string;
+  /** @default 'neutral' */
+  view?: IDocActionsView;
+  children: ReactNode;
+}
+
+export const DocActions: FC<IDocActionsProps> = ({
+  title,
+  view = 'neutral',
+  children,
+  tweakStyles,
+  ...checkBoxProps
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakCheckboxStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakCheckbox',
+    currentComponentName: 'DocActions',
+  });
+
+  return (
+    <div className={clsx(classes.docActions, classes[view])}>
+      <div className={classes.counterWrapper}>
+        <Checkbox tweakStyles={tweakCheckboxStyles} {...checkBoxProps}>
+          <span className={classes.title}>{title}</span>
+        </Checkbox>
+      </div>
+      <div className={classes.actionsWrapper}>{children}</div>
+    </div>
+  );
+};

package/src/components/FloatDocActions/components/DocActions/constants.ts

@@ -0,0 +1 @@
+export const DOC_ACTIONS_VIEWS = ['neutral', 'inverse'] as const;

package/src/components/FloatDocActions/components/DocActions/index.ts

@@ -0,0 +1,4 @@
+export * from './DocActions';
+export * from './types';
+export * from './constants';
+export type { IDocActionsStyles } from './DocActions.styles';

package/src/components/FloatDocActions/components/DocActions/types.ts

@@ -0,0 +1,3 @@
+import { DOC_ACTIONS_VIEWS } from './constants';
+
+export type IDocActionsView = (typeof DOC_ACTIONS_VIEWS)[number];

package/src/components/FloatDocActions/components/index.ts

@@ -0,0 +1 @@
+export * from './DocActions';

package/src/components/FloatDocActions/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_TIMEOUT = 150;

package/src/components/FloatDocActions/index.ts

@@ -0,0 +1,3 @@
+export * from './FloatDocActions';
+export * from './components';
+export type { IFloatDocActionsStyles } from './FloatDocActions.styles';

package/src/components/IconButton/IconButton.styles.ts

@@ -1,9 +1,5 @@
 import { ITweakStyles, animations, createThemedStyles } from '../../theme';
 
-const BUTTON_SIZE_S = 24;
-const BUTTON_SIZE_M = 32;
-const ICON_SIZE = 20;
-
 export const useStyles = createThemedStyles('IconButton', {
   root: {
     display: 'flex',
@@ -13,7 +9,7 @@ export const useStyles = createThemedStyles('IconButton', {
     outline: 'none',
     boxSizing: 'border-box',
     transition: animations.defaultTransition,
-    transitionProperty: 'background-color, color, border-color',
+    transitionProperty: 'background-color, color, border-color, opacity, visibility',
     border: 'none',
     position: 'relative',
     boxShadow: 'none',
@@ -29,6 +25,10 @@ export const useStyles = createThemedStyles('IconButton', {
     '&:active': {
       extend: 'active',
     },
+
+    width: 'var(--icon-button-size)',
+    height: 'var(--icon-button-size)',
+    '--icon-button-icon-size': '20px',
   },
 
   'cancel-light': {},
@@ -55,8 +55,8 @@ export const useStyles = createThemedStyles('IconButton', {
   icon: {
     display: 'flex',
     alignItems: 'center',
-    width: ICON_SIZE,
-    height: ICON_SIZE,
+    width: 'var(--icon-button-icon-size)',
+    height: 'var(--icon-button-icon-size)',
   },
 
   loader: {
@@ -66,18 +66,20 @@ export const useStyles = createThemedStyles('IconButton', {
     top: '50%',
     transform: 'translate(-50%, -50%)',
 
-    width: ICON_SIZE,
-    height: ICON_SIZE,
+    width: 'var(--icon-button-icon-size)',
+    height: 'var(--icon-button-icon-size)',
   },
 
   s: {
-    width: BUTTON_SIZE_S,
-    height: BUTTON_SIZE_S,
+    '--icon-button-size': '24px',
   },
 
   m: {
-    width: BUTTON_SIZE_M,
-    height: BUTTON_SIZE_M,
+    '--icon-button-size': '32px',
+  },
+
+  l: {
+    '--icon-button-size': '40px',
   },
 });
 

package/src/components/IconButton/constants.ts

@@ -1,3 +1,3 @@
-export const ICON_BUTTON_SIZES = ['s', 'm'] as const;
+export const ICON_BUTTON_SIZES = ['s', 'm', 'l'] as const;
 
 export const ICON_BUTTON_VIEWS = ['cancel', 'cancel-light', 'main', 'custom'] as const;

package/src/components/Input/InputBase.tsx

@@ -58,7 +58,7 @@ export interface IInputBaseProps
   isAutoSized?: boolean;
   /** @default false */
   shouldAlwaysShowPlaceholder?: boolean;
-  onChange: (value: string, event: IChangeInputEvent) => void;
+  onChange: (value: string, event: IChangeInputEvent, eventType: 'change' | 'clear') => void;
 }
 
 export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
@@ -133,7 +133,7 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
       isStringNotEmpty(placeholder);
 
     const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-      onChange(event.currentTarget.value, event);
+      onChange(event.currentTarget.value, event, 'change');
     };
 
     const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
@@ -149,7 +149,7 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
     // для SmartInput нужен event, иначе onChange не вызовется
     const handleInputClear = async (event: IClickHandlerEvent) => {
       // await не убирать (важно для порядка выполнения (сначала onChange, затем focus)
-      await onChange('', event);
+      await onChange('', event, 'clear');
       inputRef.current?.focus();
     };
 

package/src/components/index.ts

@@ -13,6 +13,7 @@ export * from './FileItem';
 export * from './FiltersPane';
 export * from './Flag';
 export * from './FlexibleTable';
+export * from './FloatDocActions';
 export * from './Icon';
 export * from './IconButton';
 export * from './IncrementInput';

package/src/theme/types.ts

@@ -12,6 +12,7 @@ import type {
   IDatePickerHeaderStyles,
   IDatePickerStyles,
   IDescriptionStyles,
+  IDocActionsStyles,
   IDotsPreloaderStyles,
   IFileInputStyles,
   IFileItemStyles,
@@ -92,6 +93,7 @@ export interface IComponentStyles {
   DatePicker: IDatePickerStyles;
   DatePickerHeader: IDatePickerHeaderStyles;
   Description: IDescriptionStyles;
+  DocActions: IDocActionsStyles;
   DotsPreloader: IDotsPreloaderStyles;
   SvgPreloader: ISvgPreloaderStyles;
   FileInput: IFileInputStyles;