@true-engineering/true-react-common-ui-kit 3.24.0 → 3.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "3.24.0",
+  "version": "3.25.0",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.26.12",
-    "@true-engineering/true-react-platform-helpers": "0.1.0",
+    "@true-engineering/true-react-platform-helpers": "0.2.2",
     "clsx": "1.2.1",
     "country-flag-icons": "1.5.5",
     "date-fns": "2.29.3",

package/src/components/FlexibleTable/components/FlexibleTableRow/FlexibleTableRow.tsx

@@ -1,11 +1,6 @@
 import { ReactNode, useState, memo, MouseEvent } from 'react';
 import clsx from 'clsx';
-import {
-  isEmpty,
-  isFunction,
-  isNotEmpty,
-  isReactNodeNotEmpty,
-} from '@true-engineering/true-react-platform-helpers';
+import { applyAction, isEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../../../helpers';
 import { useTweakStyles } from '../../../../hooks';
 import { ICommonProps, IDataAttributes } from '../../../../types';
@@ -68,19 +63,9 @@ function FlexibleTableRowInner<Row extends ITableRow>({
   });
 
   const [isFocused, setFocused] = useState(false);
-  const [nestedComponent, setNestedComponent] = useState<INestedComponent>(() => {
-    const isOpen = isFunction(isExpandableRowComponentInitiallyOpen)
-      ? isExpandableRowComponentInitiallyOpen(item, index)
-      : isExpandableRowComponentInitiallyOpen;
-
-    const component = isOpen
-      ? expandableRowComponent?.(item, true, () => {
-          setNestedComponent({ isOpen: false });
-        })
-      : undefined;
-
-    return isReactNodeNotEmpty(component) ? { isOpen: true, component } : { isOpen: false };
-  });
+  const [nestedComponent, setNestedComponent] = useState<INestedComponent>(() => ({
+    isOpen: applyAction(isExpandableRowComponentInitiallyOpen, item, index),
+  }));
 
   const isActive = activeRows?.includes(index) ?? false;
   const isEditable = !isLoading && (isNotEmpty(onRowClick) || isNotEmpty(onRowHover));
@@ -108,33 +93,30 @@ function FlexibleTableRowInner<Row extends ITableRow>({
     setFocused(false);
   };
 
-  const updateNestedComponent = (component?: ReactNode, cellKey?: string) => {
-    setNestedComponent(
-      component === undefined ? { isOpen: false } : { isOpen: true, component, cellKey },
-    );
-  };
-
   const closeNestedComponent = () => {
     setNestedComponent({ isOpen: false });
   };
 
+  const updateNestedComponent = (component: ReactNode, cellKey: string) => {
+    if (isEmpty(component)) {
+      closeNestedComponent();
+    } else {
+      setNestedComponent({ isOpen: true, component, cellKey });
+    }
+  };
+
   const handleRowClick = () => {
     if (isNotEmpty(uniqueField)) {
       onRowClick?.(item[uniqueField]);
     }
+    if (isEmpty(expandableRowComponent)) {
+      return;
+    }
 
-    if (isNotEmpty(expandableRowComponent)) {
-      const newNestedComponent = expandableRowComponent(item, true, closeNestedComponent);
-
-      if (!isNestedComponentExpanded && newNestedComponent !== null) {
-        updateNestedComponent(newNestedComponent);
-        return;
-      }
-
-      if (isNestedComponentExpanded && isEmpty(nestedComponentCellKey)) {
-        closeNestedComponent();
-        return;
-      }
+    if (!isNestedComponentExpanded) {
+      setNestedComponent({ isOpen: true });
+    } else if (isEmpty(nestedComponentCellKey)) {
+      closeNestedComponent();
     }
   };
 
@@ -185,7 +167,8 @@ function FlexibleTableRowInner<Row extends ITableRow>({
       {isNestedComponentExpanded && (
         <TableRow className={classes.root}>
           <TableCell className={classes.nestedComponent} colSpan={columns.length}>
-            {nestedComponent.component}
+            {nestedComponent.component ??
+              expandableRowComponent?.(item, true, closeNestedComponent)}
           </TableCell>
         </TableRow>
       )}

package/src/components/Select/CustomSelect.stories.tsx

@@ -7,7 +7,7 @@ import { Input, type IInputStyles } from '../Input';
 import { TextButton } from '../TextButton';
 import { Select, type ISelectProps } from './Select';
 
-interface ISelectWithCustomProps<T> extends ISelectProps<T> {
+interface ISelectWithCustomProps<Option> extends ISelectProps<Option> {
   shouldUsePopper?: boolean;
   shouldRenderInBody?: boolean;
   shouldHideOnScroll?: boolean;
@@ -25,14 +25,10 @@ const useSelectStyles = createUseStyles({
   },
 });
 
-const useDefaultOptionStyles = createUseStyles({
-  customDefaultOption: {
-    width: '100%',
+const useCustomListHeaderStyles = createUseStyles({
+  customListHeader: {
     padding: [10, 20],
-    justifySelf: 'stretch',
-    alignSelf: 'stretch',
-    backgroundColor: '#ffffff',
-    cursor: 'default',
+    boxSizing: 'border-box',
   },
 
   defaultView: {
@@ -47,6 +43,16 @@ const useDefaultOptionStyles = createUseStyles({
   },
 });
 
+const useCustomListFooterStyles = createUseStyles({
+  customListFooter: {
+    gap: 10,
+    padding: [6, 20],
+    boxSizing: 'border-box',
+    display: 'flex',
+    justifyContent: 'center',
+  },
+});
+
 const inputTweakStyles: IInputStyles = {
   inputWrapper: {
     height: 24,
@@ -67,12 +73,12 @@ const buttonTweakStyles: IButtonStyles = {
   },
 };
 
-interface ICustomDefaultOptionProps {
+interface ICustomListHeaderProps {
   onAdd?: (option?: string) => void;
 }
 
-function CustomDefaultOption({ onAdd }: ICustomDefaultOptionProps) {
-  const classes = useDefaultOptionStyles();
+function CustomListHeader({ onAdd }: ICustomListHeaderProps) {
+  const classes = useCustomListHeaderStyles();
 
   const [isAdding, setIsAdding] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -84,7 +90,7 @@ function CustomDefaultOption({ onAdd }: ICustomDefaultOptionProps) {
   };
 
   return (
-    <div className={classes.customDefaultOption} onClick={(event) => event.stopPropagation()}>
+    <div className={classes.customListHeader} onClick={(event) => event.stopPropagation()}>
       {!isAdding && (
         <div className={classes.defaultView}>
           <TextButton icon="plus" hasCircleUnderIcon isBold onClick={() => setIsAdding(true)}>
@@ -109,6 +115,26 @@ function CustomDefaultOption({ onAdd }: ICustomDefaultOptionProps) {
   );
 }
 
+interface ICustomListFooterProps {
+  onReset?: () => void;
+  onClear?: () => void;
+}
+
+function CustomListFooter({ onReset, onClear }: ICustomListFooterProps) {
+  const classes = useCustomListFooterStyles();
+
+  return (
+    <div className={classes.customListFooter}>
+      <Button view="secondary" size="s" onClick={onReset}>
+        Reset
+      </Button>
+      <Button view="secondary" size="s" onClick={onClear}>
+        Clear
+      </Button>
+    </div>
+  );
+}
+
 function SelectWithCustomProps({
   noMatchesLabel,
   shouldUsePopper,
@@ -122,13 +148,22 @@ function SelectWithCustomProps({
   const [inputValue, setInputValue] = useState<string>();
   const [options, setOptions] = useState<string[]>([]);
 
-  const onAdd = (option?: string) => {
+  const handleAdd = (option?: string) => {
     if (isStringNotEmpty(option)) {
       setOptions((prevOptions) => [...prevOptions, option]);
     }
   };
 
-  const onRemove = (option: string) => {
+  const handleReset = () => {
+    setInputValue(undefined);
+  };
+
+  const handleClear = () => {
+    setInputValue(undefined);
+    setOptions([]);
+  };
+
+  const handleRemove = (option: string) => {
     setOptions((prevOptions) => prevOptions.filter((entry) => entry !== option));
   };
 
@@ -142,7 +177,7 @@ function SelectWithCustomProps({
         onClick={(event) => {
           event.stopPropagation();
 
-          onRemove(value);
+          handleRemove(value);
         }}
       />
     </div>
@@ -159,7 +194,8 @@ function SelectWithCustomProps({
   return (
     <Select
       {...props}
-      defaultOptionLabel={<CustomDefaultOption onAdd={onAdd} />}
+      header={<CustomListHeader onAdd={handleAdd} />}
+      footer={<CustomListFooter onReset={handleReset} onClear={handleClear} />}
       noMatchesLabel={isStringNotEmpty(noMatchesLabel) ? noMatchesLabel : undefined}
       tweakStyles={{
         tweakSelectList: {

package/src/components/Select/MultiSelect.stories.tsx

@@ -1,7 +1,7 @@
 import { ReactNode, useEffect, useState } from 'react';
 import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Select, ISelectProps } from './Select';
+import { Select, ISelectProps, IMultipleSelectProps } from './Select';
 
 interface ObjectValue {
   name: string;
@@ -60,7 +60,7 @@ const objectOptions: ObjectValue[] = [
 const getRandomInt = (min: number, max: number) =>
   Math.floor(Math.random() * (Math.floor(max) - Math.ceil(min))) + Math.ceil(min);
 
-interface ISelectWithCustomProps<T> extends ISelectProps<T> {
+interface ISelectWithCustomProps<T> extends IMultipleSelectProps<T> {
   valuesType: 'strings' | 'objects';
   shouldUseReactNodes?: boolean;
   shouldUsePopper?: boolean;
@@ -160,7 +160,7 @@ function SelectWithCustomProps<T>({
   return (
     <Select
       {...rest}
-      {...(props as unknown as ISelectProps<any>)}
+      {...(props as unknown as IMultipleSelectProps<any>)}
       {...(shouldRenderSearchInputInList && {
         searchInput: { shouldRenderInList: true },
       })}

package/src/components/Select/Select.styles.ts

@@ -1,8 +1,8 @@
 import { mergeStyles } from '@true-engineering/true-react-platform-helpers';
-import { ITweakStyles, createThemedStyles } from '../../theme';
-import { IInputStyles } from '../Input';
-import { ISearchInputStyles } from '../SearchInput';
-import { ISelectListStyles } from './components';
+import { animations, createThemedStyles, type ITweakStyles } from '../../theme';
+import { type IInputStyles } from '../Input';
+import { type ISearchInputStyles } from '../SearchInput';
+import { type ISelectListStyles } from './components';
 
 export const useStyles = createThemedStyles('Select', {
   root: {
@@ -26,7 +26,7 @@ export const useStyles = createThemedStyles('Select', {
 
   withoutPopper: {
     position: 'absolute',
-    top: 'calc(100% + 6px)',
+    top: 'calc(var(--dropdown-offset, 100%) + 6px)',
   },
 
   listWrapperInBody: {
@@ -43,7 +43,8 @@ export const useStyles = createThemedStyles('Select', {
     height: 20,
     cursor: 'pointer',
     zIndex: 1,
-    transition: 'transform 0.1s ease',
+    transition: animations.defaultTransition,
+    transitionProperty: 'transform',
   },
 
   activeArrow: {
@@ -111,7 +112,7 @@ export const getInputStyles = ({
   isMultiSelect,
 }: {
   hasReadonlyInput: boolean;
-  isMultiSelect: boolean;
+  isMultiSelect?: boolean;
 }): IInputStyles => {
   if (hasReadonlyInput && isMultiSelect) {
     return readonlyMultiSelectStyles;