@true-engineering/true-react-common-ui-kit 3.4.0 → 3.6.0

package/package.json

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

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

@@ -0,0 +1,217 @@
+import { useState } from 'react';
+import { createUseStyles } from 'react-jss';
+import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { type ComponentMeta, type ComponentStory } from '@storybook/react';
+import { Button, type IButtonStyles } from '../Button';
+import { Input, type IInputStyles } from '../Input';
+import { TextButton } from '../TextButton';
+import { Select, type ISelectProps } from './Select';
+
+interface ISelectWithCustomProps<T> extends ISelectProps<T> {
+  shouldUsePopper?: boolean;
+  shouldRenderInBody?: boolean;
+  shouldHideOnScroll?: boolean;
+  canBeFlipped?: boolean;
+  scrollParent?: 'document' | 'auto';
+}
+
+const useSelectStyles = createUseStyles({
+  option: {
+    width: '100%',
+    gap: 10,
+    display: 'grid',
+    gridTemplateColumns: 'minmax(0, 1fr) max-content',
+    alignItems: 'center',
+  },
+});
+
+const useDefaultOptionStyles = createUseStyles({
+  customDefaultOption: {
+    width: '100%',
+    padding: [10, 20],
+    justifySelf: 'stretch',
+    alignSelf: 'stretch',
+    backgroundColor: '#ffffff',
+    cursor: 'default',
+  },
+
+  defaultView: {
+    display: 'grid',
+    placeItems: 'center',
+  },
+
+  inputView: {
+    gap: 10,
+    display: 'grid',
+    gridTemplateColumns: '1fr max-content',
+  },
+});
+
+const inputTweakStyles: IInputStyles = {
+  inputWrapper: {
+    height: 24,
+  },
+
+  input: {
+    padding: [0, 4],
+  },
+};
+
+const buttonTweakStyles: IButtonStyles = {
+  s: {
+    height: 24,
+
+    '&$onlyIcon': {
+      width: 24,
+    },
+  },
+};
+
+interface ICustomDefaultOptionProps {
+  onAdd?: (option?: string) => void;
+}
+
+function CustomDefaultOption({ onAdd }: ICustomDefaultOptionProps) {
+  const classes = useDefaultOptionStyles();
+
+  const [isAdding, setIsAdding] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+
+  const onAddClick = () => {
+    onAdd?.(inputValue);
+    setIsAdding(false);
+    setInputValue('');
+  };
+
+  return (
+    <div className={classes.customDefaultOption} onClick={(event) => event.stopPropagation()}>
+      {!isAdding && (
+        <div className={classes.defaultView}>
+          <TextButton icon="plus" hasCircleUnderIcon isBold onClick={() => setIsAdding(true)}>
+            Add Option
+          </TextButton>
+        </div>
+      )}
+      {isAdding && (
+        <div className={classes.inputView}>
+          <Input
+            value={inputValue}
+            border="bottom"
+            placeholder="Option Value"
+            tweakStyles={inputTweakStyles}
+            shouldFocusOnMount
+            onChange={setInputValue}
+          />
+          <Button size="s" icon="plus" tweakStyles={buttonTweakStyles} onClick={onAddClick} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function SelectWithCustomProps({
+  noMatchesLabel,
+  shouldUsePopper,
+  shouldRenderInBody,
+  shouldHideOnScroll,
+  canBeFlipped,
+  scrollParent,
+  ...restProps
+}: ISelectWithCustomProps<string>) {
+  const classes = useSelectStyles();
+  const [inputValue, setInputValue] = useState<string>();
+  const [options, setOptions] = useState<string[]>([]);
+
+  const onAdd = (option?: string) => {
+    if (isStringNotEmpty(option)) {
+      setOptions((prevOptions) => [...prevOptions, option]);
+    }
+  };
+
+  const onRemove = (option: string) => {
+    setOptions((prevOptions) => prevOptions.filter((entry) => entry !== option));
+  };
+
+  const renderOption = (value: string) => (
+    <div className={classes.option}>
+      <span>{value}</span>
+      <Button
+        size="s"
+        icon="trash-can"
+        tweakStyles={buttonTweakStyles}
+        onClick={(event) => {
+          event.stopPropagation();
+
+          onRemove(value);
+        }}
+      />
+    </div>
+  );
+
+  const props = {
+    ...restProps,
+    onChange: setInputValue,
+    value: inputValue,
+    options,
+    convertValueToReactNode: renderOption,
+  };
+
+  return (
+    <Select
+      {...props}
+      defaultOptionLabel={<CustomDefaultOption onAdd={onAdd} />}
+      noMatchesLabel={isStringNotEmpty(noMatchesLabel) ? noMatchesLabel : undefined}
+      tweakStyles={{
+        tweakSelectList: {
+          defaultCell: {
+            padding: 0,
+          },
+        },
+      }}
+      dropdownOptions={{
+        shouldUsePopper,
+        shouldRenderInBody,
+        shouldHideOnScroll,
+        canBeFlipped,
+        scrollParent,
+      }}
+    />
+  );
+}
+
+export default {
+  title: 'Select',
+  component: SelectWithCustomProps,
+  argTypes: {
+    scrollParent: {
+      options: ['document', 'auto'],
+      control: { type: 'select' },
+    },
+  },
+} as ComponentMeta<typeof SelectWithCustomProps>;
+
+const Template: ComponentStory<typeof SelectWithCustomProps> = (args) => (
+  <SelectWithCustomProps {...args} />
+);
+
+export const CustomSelect = Template.bind({});
+
+CustomSelect.args = {
+  label: 'Dropdown',
+  noMatchesLabel: 'No matches',
+  isInvalid: false,
+  errorMessage: '',
+  errorPosition: 'bottom',
+  hasFloatingLabel: true,
+  hasRequiredLabel: false,
+  isDisabled: false,
+  isRequired: false,
+  isClearable: false,
+
+  shouldUsePopper: false,
+  shouldRenderInBody: false,
+  shouldHideOnScroll: false,
+  shouldScrollToList: true,
+  canBeFlipped: false,
+  scrollParent: 'document',
+};

package/src/components/Select/Select.tsx

@@ -17,6 +17,7 @@ import { debounce } from 'ts-debounce';
 import {
   getTestId,
   isNotEmpty,
+  isReactNodeNotEmpty,
   isStringNotEmpty,
   createFilter,
 } from '@true-engineering/true-react-platform-helpers';
@@ -41,7 +42,7 @@ import { useStyles, ISelectStyles, searchInputStyles, getInputStyles } from './S
 export interface ISelectProps<Value>
   extends Omit<IInputProps, 'value' | 'onChange' | 'onBlur' | 'type' | 'tweakStyles'>,
     ICommonProps<ISelectStyles> {
-  defaultOptionLabel?: string;
+  defaultOptionLabel?: ReactNode;
   allOptionsLabel?: string;
   noMatchesLabel?: string;
   loadingLabel?: ReactNode;
@@ -150,7 +151,7 @@ export function Select<Value>(
   const isMounted = useIsMounted();
   const [isListOpen, setIsListOpen] = useState(false);
   const [areOptionsLoading, setAreOptionsLoading] = useState(false);
-  const hasDefaultOption = isStringNotEmpty(defaultOptionLabel);
+  const hasDefaultOption = isReactNodeNotEmpty(defaultOptionLabel);
 
   const [focusedListCellIndex, setFocusedListCellIndex] = useState(DEFAULT_OPTION_INDEX);
   const [searchValue, setSearchValue] = useState('');

package/src/components/Select/components/SelectList/SelectList.tsx

@@ -20,7 +20,7 @@ export interface ISelectListProps<Value> extends ICommonProps<ISelectListStyles>
   noMatchesLabel?: string;
   isLoading?: boolean;
   loadingLabel?: ReactNode;
-  defaultOptionLabel?: string;
+  defaultOptionLabel?: ReactNode;
   allOptionsLabel?: string;
   areAllOptionsSelected?: boolean;
   shouldScrollToList?: boolean;
@@ -97,7 +97,7 @@ export function SelectList<Value>({
           <div className={clsx(classes.cell, classes.loading)}>{loadingLabel}</div>
         ) : (
           <>
-            {isStringNotEmpty(defaultOptionLabel) && (
+            {isReactNodeNotEmpty(defaultOptionLabel) && (
               <ScrollIntoViewIfNeeded
                 active={focusedIndex === DEFAULT_OPTION_INDEX}
                 options={{ block: 'nearest' }}

package/src/theme/helpers.ts

@@ -8,12 +8,14 @@ import {
 import { getTheme } from './Provider';
 import { IComponentName, IStyles, IUseStyles } from './types';
 
+const EMPTY_STYLES = {};
+
 const isTweakStyle = (key: string): boolean => key.startsWith('tweak');
 
-const cleanStyles = <T>(tweakStyles?: T): T | undefined =>
+const cleanStyles = <T>(tweakStyles?: T): T =>
   isNotEmpty(tweakStyles) && Object.keys(tweakStyles).some((key) => !isTweakStyle(key))
     ? tweakStyles
-    : undefined;
+    : (EMPTY_STYLES as T);
 
 const checkStyles = (componentName: string, styles: Record<string, unknown>): void => {
   const invalidClasses = Object.keys(styles).reduce((acc, key) => {