@true-engineering/true-react-common-ui-kit 3.24.1 → 3.25.1

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.stories.tsx

@@ -1,235 +1,235 @@
-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';
-
-interface ObjectValue {
-  name: string;
-  age: number;
-  isDisabled?: boolean;
-}
-
-const inlineStyles = [undefined, 'left', 'right', 'middle'];
-const borders: Array<ISelectProps<any>['border']> = [undefined, 'left', 'top', 'right', 'bottom'];
-const errorPositions: Array<ISelectProps<any>['errorPosition']> = ['bottom', 'top'];
-
-const genLetters = (qnt = 1): string =>
-  Math.random()
-    .toString(36)
-    .replace(/[^a-z]+/g, '')
-    .substr(0, qnt);
-
-const convertObjectToString = (v: ObjectValue): string => v.name;
-
-const convertObjectToId = (v: ObjectValue): string => `${v.name}${v.age}`;
-
-const convertObjectToReactNode = (v: ObjectValue, isDisabled: boolean): ReactNode => (
-  <span style={{ color: isDisabled ? 'red' : undefined }}>
-    <i>{v.name}</i>, {v.age}
-  </span>
-);
-
-const convertStringToReactNode = (v: string): ReactNode => <i>{v}</i>;
-
-const isOptionDisabled = (option: string) => option.startsWith('Опция');
-const isObjectOptionDisabled = (option: ObjectValue) => option.age > 30;
-
-const stringOptions = [
-  'Опция 1',
-  'Опция 11',
-  'Еще одна опция',
-  'Еще выбор',
-  'Очень длинная опция вот такой текст',
-  '1',
-  '2',
-  '3',
-  '4',
-];
-
-const objectOptions: ObjectValue[] = [
-  { name: 'Ivan', age: 34 },
-  { name: 'Ivan', age: 42 },
-  { name: 'Konstantin', age: 11 },
-  { name: 'Mikhail', age: 24 },
-  { name: 'Maria', age: 45, isDisabled: true },
-  { name: 'Elena', age: 14 },
-  { name: 'Artem', age: 23 },
-];
-
-// Максимум не включается, минимум включается
-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> {
-  valuesType: 'strings' | 'objects';
-  shouldUseReactNodes?: boolean;
-  shouldUsePopper?: boolean;
-  shouldRenderInBody?: boolean;
-  shouldHideOnScroll?: boolean;
-  shouldUseCustomIsDisabledFunction?: boolean;
-  shouldRenderSearchInputInList?: boolean;
-  canBeFlipped?: boolean;
-  scrollParent?: 'document' | 'auto';
-}
-
-function SelectWithCustomProps<T>({
-  valuesType,
-  optionsMode,
-  shouldUseReactNodes,
-  shouldUsePopper,
-  shouldRenderInBody,
-  shouldHideOnScroll,
-  shouldUseCustomIsDisabledFunction,
-  shouldRenderSearchInputInList,
-  canBeFlipped,
-  scrollParent,
-  noMatchesLabel,
-  ...rest
-}: ISelectWithCustomProps<T>) {
-  const [stringValue, setStringValue] = useState<string>();
-  const stringHandler = (newValue?: string) => {
-    console.log('change');
-    setStringValue(newValue);
-  };
-
-  const [objectValue, setObjectValue] = useState<ObjectValue>();
-  const objectHandler = (newValue?: ObjectValue) => {
-    console.log('change');
-    setObjectValue(newValue);
-  };
-
-  const selectValuesType = valuesType;
-  const shouldRenderAsReactNodes = shouldUseReactNodes;
-
-  const getOptions = async (): Promise<Array<string | ObjectValue>> =>
-    new Promise((resolve) =>
-      setTimeout(() => {
-        resolve(
-          [...Array(10)].map((_) => {
-            if (selectValuesType === 'strings') {
-              return genLetters(getRandomInt(3, 10));
-            }
-            return {
-              name: genLetters(getRandomInt(3, 10)),
-              age: getRandomInt(10, 70),
-            } as ObjectValue;
-          }),
-        );
-      }, 1000),
-    );
-
-  const [dynamicOptions, setDynamicOptions] = useState<Array<string | ObjectValue>>([]);
-
-  const handleOpen = () => {
-    console.log('isOpen');
-  };
-
-  const handleBlur = () => {
-    console.log('blur');
-  };
-
-  useEffect(() => {
-    const api = async () => {
-      setDynamicOptions(await getOptions());
-    };
-
-    api();
-  }, [selectValuesType]);
-
-  const props =
-    selectValuesType === 'strings'
-      ? {
-          onChange: stringHandler,
-          value: stringValue,
-          options: optionsMode === 'dynamic' ? dynamicOptions : stringOptions,
-          convertValueToReactNode: shouldRenderAsReactNodes ? convertStringToReactNode : undefined,
-          isOptionDisabled: shouldUseCustomIsDisabledFunction ? isOptionDisabled : undefined,
-        }
-      : {
-          onChange: objectHandler,
-          value: objectValue,
-          options: optionsMode === 'dynamic' ? dynamicOptions : objectOptions,
-          convertValueToString: convertObjectToString,
-          convertValueToId: convertObjectToId,
-          convertValueToReactNode: shouldRenderAsReactNodes ? convertObjectToReactNode : undefined,
-          isOptionDisabled: shouldUseCustomIsDisabledFunction ? isObjectOptionDisabled : undefined,
-        };
-
-  return (
-    <Select
-      {...rest}
-      {...(props as unknown as ISelectProps<any>)}
-      {...(shouldRenderSearchInputInList && {
-        searchInput: { shouldRenderInList: true },
-      })}
-      noMatchesLabel={isStringNotEmpty(noMatchesLabel) ? noMatchesLabel : undefined}
-      optionsMode={optionsMode}
-      onType={async () => setDynamicOptions(await getOptions())}
-      onOpen={handleOpen}
-      onBlur={handleBlur}
-      dropdownOptions={{
-        shouldUsePopper,
-        shouldRenderInBody,
-        shouldHideOnScroll,
-        canBeFlipped,
-        scrollParent,
-      }}
-    />
-  );
-}
-
-export default {
-  title: 'Controls/Select',
-  component: SelectWithCustomProps,
-  argTypes: {
-    debounceTime: {
-      control: { type: 'range', min: 0, max: 1000, step: 100 },
-    },
-    errorPosition: { control: 'inline-radio', options: errorPositions },
-    border: { control: 'inline-radio', options: borders },
-    inlineStyle: { control: 'select', options: inlineStyles },
-    optionsMode: {
-      control: 'inline-radio',
-      options: ['normal', 'search', 'dynamic'],
-    },
-    valuesType: {
-      control: 'inline-radio',
-      options: ['strings', 'objects'],
-    },
-  },
-} as ComponentMeta<typeof SelectWithCustomProps>;
-
-const Template: ComponentStory<typeof SelectWithCustomProps> = (args) => (
-  <SelectWithCustomProps {...args} />
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  label: 'Dropdown',
-  defaultOptionLabel: 'Default Option',
-  noMatchesLabel: 'No matches',
-  border: undefined,
-  isInvalid: false,
-  errorMessage: 'Error Text',
-  errorPosition: 'bottom',
-  hasFloatingLabel: true,
-  hasRequiredLabel: true,
-  isDisabled: false,
-  isRequired: false,
-  isClearable: false,
-  isLoading: false,
-  debounceTime: 400,
-  // custom options
-  shouldUseReactNodes: false,
-  valuesType: 'strings',
-  optionsMode: 'normal',
-  shouldUsePopper: false,
-  shouldRenderInBody: false,
-  shouldHideOnScroll: false,
-  shouldUseCustomIsDisabledFunction: false,
-  shouldRenderSearchInputInList: false,
-  shouldScrollToList: true,
-  canBeFlipped: false,
-  scrollParent: 'document',
-};
+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';
+
+interface ObjectValue {
+  name: string;
+  age: number;
+  isDisabled?: boolean;
+}
+
+const inlineStyles = [undefined, 'left', 'right', 'middle'];
+const borders: Array<ISelectProps<any>['border']> = [undefined, 'left', 'top', 'right', 'bottom'];
+const errorPositions: Array<ISelectProps<any>['errorPosition']> = ['bottom', 'top'];
+
+const genLetters = (qnt = 1): string =>
+  Math.random()
+    .toString(36)
+    .replace(/[^a-z]+/g, '')
+    .substr(0, qnt);
+
+const convertObjectToString = (v: ObjectValue): string => v.name;
+
+const convertObjectToId = (v: ObjectValue): string => `${v.name}${v.age}`;
+
+const convertObjectToReactNode = (v: ObjectValue, isDisabled: boolean): ReactNode => (
+  <span style={{ color: isDisabled ? 'red' : undefined }}>
+    <i>{v.name}</i>, {v.age}
+  </span>
+);
+
+const convertStringToReactNode = (v: string): ReactNode => <i>{v}</i>;
+
+const isOptionDisabled = (option: string) => option.startsWith('Опция');
+const isObjectOptionDisabled = (option: ObjectValue) => option.age > 30;
+
+const stringOptions = [
+  'Опция 1',
+  'Опция 11',
+  'Еще одна опция',
+  'Еще выбор',
+  'Очень длинная опция вот такой текст',
+  '1',
+  '2',
+  '3',
+  '4',
+];
+
+const objectOptions: ObjectValue[] = [
+  { name: 'Ivan', age: 34 },
+  { name: 'Ivan', age: 42 },
+  { name: 'Konstantin', age: 11 },
+  { name: 'Mikhail', age: 24 },
+  { name: 'Maria', age: 45, isDisabled: true },
+  { name: 'Elena', age: 14 },
+  { name: 'Artem', age: 23 },
+];
+
+// Максимум не включается, минимум включается
+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> {
+  valuesType: 'strings' | 'objects';
+  shouldUseReactNodes?: boolean;
+  shouldUsePopper?: boolean;
+  shouldRenderInBody?: boolean;
+  shouldHideOnScroll?: boolean;
+  shouldUseCustomIsDisabledFunction?: boolean;
+  shouldRenderSearchInputInList?: boolean;
+  canBeFlipped?: boolean;
+  scrollParent?: 'document' | 'auto';
+}
+
+function SelectWithCustomProps<T>({
+  valuesType,
+  optionsMode,
+  shouldUseReactNodes,
+  shouldUsePopper,
+  shouldRenderInBody,
+  shouldHideOnScroll,
+  shouldUseCustomIsDisabledFunction,
+  shouldRenderSearchInputInList,
+  canBeFlipped,
+  scrollParent,
+  noMatchesLabel,
+  ...rest
+}: ISelectWithCustomProps<T>) {
+  const [stringValue, setStringValue] = useState<string>();
+  const stringHandler = (newValue?: string) => {
+    console.log('change');
+    setStringValue(newValue);
+  };
+
+  const [objectValue, setObjectValue] = useState<ObjectValue>();
+  const objectHandler = (newValue?: ObjectValue) => {
+    console.log('change');
+    setObjectValue(newValue);
+  };
+
+  const selectValuesType = valuesType;
+  const shouldRenderAsReactNodes = shouldUseReactNodes;
+
+  const getOptions = async (): Promise<Array<string | ObjectValue>> =>
+    new Promise((resolve) =>
+      setTimeout(() => {
+        resolve(
+          [...Array(10)].map((_) => {
+            if (selectValuesType === 'strings') {
+              return genLetters(getRandomInt(3, 10));
+            }
+            return {
+              name: genLetters(getRandomInt(3, 10)),
+              age: getRandomInt(10, 70),
+            } as ObjectValue;
+          }),
+        );
+      }, 1000),
+    );
+
+  const [dynamicOptions, setDynamicOptions] = useState<Array<string | ObjectValue>>([]);
+
+  const handleOpen = () => {
+    console.log('isOpen');
+  };
+
+  const handleBlur = () => {
+    console.log('blur');
+  };
+
+  useEffect(() => {
+    const api = async () => {
+      setDynamicOptions(await getOptions());
+    };
+
+    api();
+  }, [selectValuesType]);
+
+  const props =
+    selectValuesType === 'strings'
+      ? {
+          onChange: stringHandler,
+          value: stringValue,
+          options: optionsMode === 'dynamic' ? dynamicOptions : stringOptions,
+          convertValueToReactNode: shouldRenderAsReactNodes ? convertStringToReactNode : undefined,
+          isOptionDisabled: shouldUseCustomIsDisabledFunction ? isOptionDisabled : undefined,
+        }
+      : {
+          onChange: objectHandler,
+          value: objectValue,
+          options: optionsMode === 'dynamic' ? dynamicOptions : objectOptions,
+          convertValueToString: convertObjectToString,
+          convertValueToId: convertObjectToId,
+          convertValueToReactNode: shouldRenderAsReactNodes ? convertObjectToReactNode : undefined,
+          isOptionDisabled: shouldUseCustomIsDisabledFunction ? isObjectOptionDisabled : undefined,
+        };
+
+  return (
+    <Select
+      {...rest}
+      {...(props as unknown as ISelectProps<any>)}
+      {...(shouldRenderSearchInputInList && {
+        searchInput: { shouldRenderInList: true },
+      })}
+      noMatchesLabel={isStringNotEmpty(noMatchesLabel) ? noMatchesLabel : undefined}
+      optionsMode={optionsMode}
+      onType={async () => setDynamicOptions(await getOptions())}
+      onOpen={handleOpen}
+      onBlur={handleBlur}
+      dropdownOptions={{
+        shouldUsePopper,
+        shouldRenderInBody,
+        shouldHideOnScroll,
+        canBeFlipped,
+        scrollParent,
+      }}
+    />
+  );
+}
+
+export default {
+  title: 'Controls/Select',
+  component: SelectWithCustomProps,
+  argTypes: {
+    debounceTime: {
+      control: { type: 'range', min: 0, max: 1000, step: 100 },
+    },
+    errorPosition: { control: 'inline-radio', options: errorPositions },
+    border: { control: 'inline-radio', options: borders },
+    inlineStyle: { control: 'select', options: inlineStyles },
+    optionsMode: {
+      control: 'inline-radio',
+      options: ['normal', 'search', 'dynamic'],
+    },
+    valuesType: {
+      control: 'inline-radio',
+      options: ['strings', 'objects'],
+    },
+  },
+} as ComponentMeta<typeof SelectWithCustomProps>;
+
+const Template: ComponentStory<typeof SelectWithCustomProps> = (args) => (
+  <SelectWithCustomProps {...args} />
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  label: 'Dropdown',
+  defaultOptionLabel: 'Default Option',
+  noMatchesLabel: 'No matches',
+  border: undefined,
+  isInvalid: false,
+  errorMessage: 'Error Text',
+  errorPosition: 'bottom',
+  hasFloatingLabel: true,
+  hasRequiredLabel: true,
+  isDisabled: false,
+  isRequired: false,
+  isClearable: false,
+  isLoading: false,
+  debounceTime: 400,
+  // custom options
+  shouldUseReactNodes: false,
+  valuesType: 'strings',
+  optionsMode: 'normal',
+  shouldUsePopper: false,
+  shouldRenderInBody: false,
+  shouldHideOnScroll: false,
+  shouldUseCustomIsDisabledFunction: false,
+  shouldRenderSearchInputInList: false,
+  shouldScrollToList: true,
+  canBeFlipped: false,
+  scrollParent: 'document',
+};

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;