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

package/README.md

@@ -10,6 +10,10 @@
 
 # Release Notes
 
+## v3.6.0
+
+- **Select**: Добавлена возможность передавать `defaultOptionLabel` как `ReactNode`
+
 ## v3.5.0
 
 ### Fixed

package/dist/components/Select/CustomSelect.stories.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { type ComponentMeta, type ComponentStory } from '@storybook/react';
+import { type ISelectProps } from './Select';
+interface ISelectWithCustomProps<T> extends ISelectProps<T> {
+    shouldUsePopper?: boolean;
+    shouldRenderInBody?: boolean;
+    shouldHideOnScroll?: boolean;
+    canBeFlipped?: boolean;
+    scrollParent?: 'document' | 'auto';
+}
+declare function SelectWithCustomProps({ noMatchesLabel, shouldUsePopper, shouldRenderInBody, shouldHideOnScroll, canBeFlipped, scrollParent, ...restProps }: ISelectWithCustomProps<string>): JSX.Element;
+declare const _default: ComponentMeta<typeof SelectWithCustomProps>;
+export default _default;
+export declare const CustomSelect: ComponentStory<typeof SelectWithCustomProps>;

package/dist/components/Select/Select.d.ts

@@ -6,7 +6,7 @@ import { ISearchInputProps } from '../SearchInput';
 import { IMultipleSelectValue } from './types';
 import { ISelectStyles } from './Select.styles';
 export interface ISelectProps<Value> extends Omit<IInputProps, 'value' | 'onChange' | 'onBlur' | 'type' | 'tweakStyles'>, ICommonProps<ISelectStyles> {
-    defaultOptionLabel?: string;
+    defaultOptionLabel?: ReactNode;
     allOptionsLabel?: string;
     noMatchesLabel?: string;
     loadingLabel?: ReactNode;

package/dist/components/Select/components/SelectList/SelectList.d.ts

@@ -8,7 +8,7 @@ export interface ISelectListProps<Value> extends ICommonProps<ISelectListStyles>
     noMatchesLabel?: string;
     isLoading?: boolean;
     loadingLabel?: ReactNode;
-    defaultOptionLabel?: string;
+    defaultOptionLabel?: ReactNode;
     allOptionsLabel?: string;
     areAllOptionsSelected?: boolean;
     shouldScrollToList?: boolean;

package/dist/true-react-common-ui-kit.js

@@ -10962,7 +10962,7 @@ function SelectList(param) {
           children: loadingLabel
         }) : /* @__PURE__ */ jsxs(Fragment, {
           children: [
-            isStringNotEmpty(defaultOptionLabel) && /* @__PURE__ */ jsx(ScrollIntoViewIfNeeded, {
+            isReactNodeNotEmpty(defaultOptionLabel) && /* @__PURE__ */ jsx(ScrollIntoViewIfNeeded, {
               active: focusedIndex === DEFAULT_OPTION_INDEX,
               options: {
                 block: "nearest"
@@ -11481,7 +11481,7 @@ function Select(props) {
   var isMounted = useIsMounted();
   var _useState = _sliced_to_array$k(useState(false), 2), isListOpen = _useState[0], setIsListOpen = _useState[1];
   var _useState1 = _sliced_to_array$k(useState(false), 2), areOptionsLoading = _useState1[0], setAreOptionsLoading = _useState1[1];
-  var hasDefaultOption = isStringNotEmpty(defaultOptionLabel);
+  var hasDefaultOption = isReactNodeNotEmpty(defaultOptionLabel);
   var _useState2 = _sliced_to_array$k(useState(DEFAULT_OPTION_INDEX), 2), focusedListCellIndex = _useState2[0], setFocusedListCellIndex = _useState2[1];
   var _useState3 = _sliced_to_array$k(useState(""), 2), searchValue = _useState3[0], setSearchValue = _useState3[1];
   var _useState4 = _sliced_to_array$k(useState(true), 2), shouldShowDefaultOption = _useState4[0], setShouldShowDefaultOption = _useState4[1];

package/dist/true-react-common-ui-kit.umd.cjs

@@ -10952,7 +10952,7 @@
             children: loadingLabel
           }) : /* @__PURE__ */ jsxs(Fragment, {
             children: [
-              trueReactPlatformHelpers.isStringNotEmpty(defaultOptionLabel) && /* @__PURE__ */ jsx(ScrollIntoViewIfNeeded, {
+              trueReactPlatformHelpers.isReactNodeNotEmpty(defaultOptionLabel) && /* @__PURE__ */ jsx(ScrollIntoViewIfNeeded, {
                 active: focusedIndex === DEFAULT_OPTION_INDEX,
                 options: {
                   block: "nearest"
@@ -11471,7 +11471,7 @@
     var isMounted = useIsMounted();
     var _useState = _sliced_to_array$k(React.useState(false), 2), isListOpen = _useState[0], setIsListOpen = _useState[1];
     var _useState1 = _sliced_to_array$k(React.useState(false), 2), areOptionsLoading = _useState1[0], setAreOptionsLoading = _useState1[1];
-    var hasDefaultOption = trueReactPlatformHelpers.isStringNotEmpty(defaultOptionLabel);
+    var hasDefaultOption = trueReactPlatformHelpers.isReactNodeNotEmpty(defaultOptionLabel);
     var _useState2 = _sliced_to_array$k(React.useState(DEFAULT_OPTION_INDEX), 2), focusedListCellIndex = _useState2[0], setFocusedListCellIndex = _useState2[1];
     var _useState3 = _sliced_to_array$k(React.useState(""), 2), searchValue = _useState3[0], setSearchValue = _useState3[1];
     var _useState4 = _sliced_to_array$k(React.useState(true), 2), shouldShowDefaultOption = _useState4[0], setShouldShowDefaultOption = _useState4[1];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "3.5.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' }}