@true-engineering/true-react-common-ui-kit 3.26.0 → 3.27.0

package/package.json

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

package/src/components/Input/Input.stories.tsx

@@ -60,6 +60,10 @@ Default.args = {
   hasRequiredLabel: true,
   isInvalid: false,
   errorMessage: 'Error Text',
+  errorPosition: 'bottom',
+  isAutoSizeable: false,
+  shouldFocusOnMount: false,
+  shouldAlwaysShowPlaceholder: false,
   isActive: false,
   isDisabled: false,
   isRequired: false,
@@ -81,6 +85,7 @@ Default.parameters = {
       'onPaste',
       'onKeyDown',
       'onIconClick',
+      'tweakStyles',
     ],
   },
 };

package/src/components/Input/Input.tsx

@@ -166,9 +166,8 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
     const hasValue = value !== undefined && value !== '';
     const hasUnits = units !== undefined && units !== '';
     const hasLabel = isReactNodeNotEmpty(label);
-    const hasPlaceholder =
-      (!hasLabel || (hasFocus && !isReadonly) || shouldAlwaysShowPlaceholder) &&
-      isStringNotEmpty(placeholder);
+    const isLabelActive = (hasFocus && !isReadonly) || hasValue || shouldAlwaysShowPlaceholder;
+    const hasPlaceholder = (!hasLabel || isLabelActive) && isStringNotEmpty(placeholder);
     const shouldShowUnits = (hasValue || (isFocused && !hasPlaceholder)) && hasUnits;
 
     const props: InputHTMLAttributes<HTMLInputElement> = {
@@ -231,7 +230,7 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
               className={clsx(classes.label, {
                 [classes.invalidLabel]: isInvalid,
                 [classes.requiredLabel]: hasRequiredLabel && !isRequired,
-                [classes.activeLabel]: (hasFocus && !isReadonly) || hasValue,
+                [classes.activeLabel]: isLabelActive,
                 [classes.floating]: hasFloatingLabel,
                 // Обсуждаемо, сделал так, потому что не хочется создавать новую пропсу, на каждый чих в стилях
                 [classes.floatingWithoutPadding]: hasFloatingLabel && border === 'bottom',

package/src/components/List/List.stories.tsx

@@ -13,14 +13,34 @@ const listItems: IListItem[] = [
   {
     item: 'Аннулировать',
     onClick: console.log,
+    disabled: true,
     icon: <>2</>,
   },
   {
     item: 'Вернуть',
     onClick: console.log,
-    disabled: true,
     withIconGap: true,
     shouldDrawSpacerBelow: true,
+    nestedItems: [
+      {
+        item: 'Вернуть деньги',
+        nestedItems: [
+          {
+            item: 'Вернуть деньги',
+            onClick: console.log,
+          },
+          {
+            item: 'Вернуть стену',
+            onClick: console.log,
+          },
+        ],
+        onClick: console.log,
+      },
+      {
+        item: 'Вернуть стену',
+        onClick: console.log,
+      },
+    ],
   },
   {
     item: (() => <div style={{ color: colors.GREEN_FOCUS }}>Test</div>)(),

package/src/components/List/List.styles.ts

@@ -1,8 +1,5 @@
-import { colors, ITweakStyles, createThemedStyles, animations } from '../../theme';
-
-const ITEM_HORIZONTAL_PADDING = 16;
-const ICON_SIZE = 20;
-const ICON_GAP = 12;
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { IWithPopupStyles } from '../WithPopup';
 
 export const useStyles = createThemedStyles('List', {
   root: {
@@ -13,40 +10,15 @@ export const useStyles = createThemedStyles('List', {
     margin: 0,
   },
 
-  item: {
-    display: 'flex',
-    alignItems: 'center',
-    boxSizing: 'border-box',
-    fontSize: 16,
-    whiteSpace: 'nowrap',
-    minHeight: 40,
-    padding: [0, ITEM_HORIZONTAL_PADDING],
-    transition: animations.defaultTransition,
-    transitionProperty: 'background-color',
-    cursor: 'pointer',
-  },
-
-  disabledItem: {
-    cursor: 'default',
-  },
-
-  spacer: {
-    height: 1,
-    backgroundColor: colors.BORDER_LIGHT,
-  },
-
-  withIconGap: {
-    paddingLeft: ITEM_HORIZONTAL_PADDING + ICON_SIZE + ICON_GAP,
+  nestedItems: {
+    paddingLeft: 4,
   },
+});
 
-  icon: {
-    width: ICON_SIZE,
-    height: ICON_SIZE,
-    marginRight: ICON_GAP,
-    flexShrink: 0,
+export const withPopupStyles: IWithPopupStyles = {
+  trigger: {
+    width: '100%',
   },
-
-  content: {},
-});
+};
 
 export type IListStyles = ITweakStyles<typeof useStyles>;

package/src/components/List/List.tsx

@@ -1,9 +1,14 @@
-import { FC, KeyboardEvent, MouseEvent } from 'react';
-import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
+import { FC, Fragment, KeyboardEvent, MouseEvent } from 'react';
+import {
+  addDataTestId,
+  getTestId,
+  isArrayNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
 import { ICommonProps } from '../../types';
-import { IListItemProps as IListItem, ListItem } from './components';
-import { useStyles, IListStyles } from './List.styles';
+import { WithPopup } from '../WithPopup';
+import { IListItemProps, IListItemProps as IListItem, ListItem } from './components';
+import { useStyles, IListStyles, withPopupStyles } from './List.styles';
 
 export interface IListProps extends ICommonProps<IListStyles> {
   items: IListItem[];
@@ -20,14 +25,34 @@ export const List: FC<IListProps> = ({ items, testId, data, tweakStyles, onClick
 
   return (
     <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
-      {items.map((item, i) => (
-        <ListItem
-          key={i}
-          testId={getTestId(testId, `item-${i}`)}
-          {...item}
-          onClick={(event) => handleItemClick(event, item)}
-        />
-      ))}
+      {items.map((item, i) => {
+        const itemProps: IListItemProps = {
+          testId: getTestId(item.testId, `item-${i}`),
+          ...item,
+          onClick: (event) => handleItemClick(event, item),
+        };
+
+        return (
+          <Fragment key={i}>
+            {isArrayNotEmpty(item.nestedItems) ? (
+              <WithPopup
+                eventType="hover"
+                tweakStyles={withPopupStyles}
+                placement="right-start"
+                popupOffset={0}
+                shouldRenderInBody={false}
+                trigger={({ isActive }) => <ListItem {...itemProps} isFocused={isActive} />}
+              >
+                <div className={classes.nestedItems}>
+                  <List items={item.nestedItems} />
+                </div>
+              </WithPopup>
+            ) : (
+              <ListItem {...itemProps} />
+            )}
+          </Fragment>
+        );
+      })}
     </div>
   );
 };

package/src/components/List/components/ListItem/ListItem.styles.ts

@@ -8,6 +8,7 @@ export const useStyles = createThemedStyles('ListItem', {
   root: {
     display: 'flex',
     alignItems: 'center',
+    gap: ICON_GAP,
     boxSizing: 'border-box',
     fontSize: 16,
     whiteSpace: 'nowrap',
@@ -22,6 +23,8 @@ export const useStyles = createThemedStyles('ListItem', {
 
   destructive: {},
 
+  focused: {},
+
   disabledItem: {
     cursor: 'default',
   },
@@ -38,11 +41,12 @@ export const useStyles = createThemedStyles('ListItem', {
   icon: {
     width: ICON_SIZE,
     height: ICON_SIZE,
-    marginRight: ICON_GAP,
     flexShrink: 0,
   },
 
-  content: {},
+  content: {
+    flexGrow: 1,
+  },
 });
 
 export type IListItemStyles = ITweakStyles<typeof useStyles>;

package/src/components/List/components/ListItem/ListItem.tsx

@@ -1,19 +1,22 @@
-import { FC, Fragment, MouseEvent, KeyboardEvent, ReactNode } from 'react';
+import { FC, MouseEvent, KeyboardEvent, ReactNode } from 'react';
 import clsx from 'clsx';
 import {
   addClickHandler,
   addDataTestId,
+  isArrayNotEmpty,
   isReactNodeNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../../../helpers';
 import { ICommonProps } from '../../../../types';
-import { renderIcon, IIcon } from '../../../Icon';
+import { renderIcon, IIcon, Icon } from '../../../Icon';
 import { useStyles, IListItemStyles } from './ListItem.styles';
 
 export interface IListItemProps extends ICommonProps<IListItemStyles> {
   item: ReactNode;
   view?: 'default' | 'destructive';
   icon?: IIcon;
+  nestedItems?: IListItemProps[];
+  isFocused?: boolean;
   disabled?: boolean;
   shouldDrawSpacerAbove?: boolean;
   shouldDrawSpacerBelow?: boolean;
@@ -22,9 +25,11 @@ export interface IListItemProps extends ICommonProps<IListItemStyles> {
 }
 
 export const ListItem: FC<IListItemProps> = ({
-  disabled: isDisabled,
   icon,
   item,
+  nestedItems,
+  disabled: isDisabled,
+  isFocused,
   shouldDrawSpacerAbove,
   shouldDrawSpacerBelow,
   testId,
@@ -37,12 +42,13 @@ export const ListItem: FC<IListItemProps> = ({
   const classes = useStyles({ theme: tweakStyles });
 
   return (
-    <Fragment>
+    <>
       {shouldDrawSpacerAbove && <div className={classes.spacer} />}
       <div
         className={clsx(classes.root, classes[view], {
           [classes.disabledItem]: isDisabled,
           [classes.withIconGap]: withIconGap,
+          [classes.focused]: isFocused,
         })}
         {...addClickHandler(onClick, !isDisabled)}
         {...addDataTestId(testId)}
@@ -50,8 +56,13 @@ export const ListItem: FC<IListItemProps> = ({
       >
         {isReactNodeNotEmpty(icon) && <span className={classes.icon}>{renderIcon(icon)}</span>}
         <span className={classes.content}>{item}</span>
+        {isArrayNotEmpty(nestedItems) && (
+          <span className={classes.icon}>
+            <Icon type="chevron-right" />
+          </span>
+        )}
       </div>
       {shouldDrawSpacerBelow && <div className={classes.spacer} />}
-    </Fragment>
+    </>
   );
 };

package/src/components/Select/Select.tsx

@@ -4,14 +4,14 @@ import {
   useMemo,
   useRef,
   useState,
-  type ChangeEvent,
-  type CSSProperties,
-  type FocusEvent,
-  type FormEvent,
-  type KeyboardEvent,
-  type MouseEvent,
-  type ReactNode,
-  type SyntheticEvent,
+  ChangeEvent,
+  CSSProperties,
+  FocusEvent,
+  FormEvent,
+  KeyboardEvent,
+  MouseEvent,
+  ReactNode,
+  SyntheticEvent,
 } from 'react';
 import { Portal } from 'react-overlays';
 import clsx from 'clsx';
@@ -26,10 +26,10 @@ import {
 } from '@true-engineering/true-react-platform-helpers';
 import { hasExactParent } from '../../helpers';
 import { useDropdown, useIsMounted, useOnClickOutsideWithRef, useTweakStyles } from '../../hooks';
-import { IDropdownWithPopperOptions, type ICommonProps } from '../../types';
-import { renderIcon, type IIcon } from '../Icon';
-import { Input, type IInputProps } from '../Input';
-import { SearchInput, type ISearchInputProps } from '../SearchInput';
+import { IDropdownWithPopperOptions, ICommonProps } from '../../types';
+import { renderIcon, IIcon } from '../Icon';
+import { Input, IInputProps } from '../Input';
+import { SearchInput, ISearchInputProps } from '../SearchInput';
 import { SelectList } from './components';
 import { ALL_OPTION_INDEX, DEFAULT_OPTION_INDEX } from './constants';
 import {
@@ -39,7 +39,7 @@ import {
   getDefaultConvertToIdFunction,
 } from './helpers';
 import { IMultipleSelectValue } from './types';
-import { getInputStyles, searchInputStyles, useStyles, type ISelectStyles } from './Select.styles';
+import { getInputStyles, searchInputStyles, useStyles, ISelectStyles } from './Select.styles';
 
 export interface ISelectProps<Value>
   extends Omit<IInputProps, 'value' | 'onChange' | 'onBlur' | 'type' | 'isActive' | 'tweakStyles'>,