feat(TreeSelect): added generic value depending on the multiple prop

src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx

@@ -275,7 +275,7 @@ export interface TableColumnSetupProps {
     sortable?: boolean;
 
     onUpdate: (newSettings: TableSetting[]) => void;
-    popupWidth?: TreeSelectProps<unknown>['popupWidth'];
+    popupWidth?: TreeSelectProps['popupWidth'];
     popupPlacement?: PopperPlacement;
 
     /**
@@ -379,7 +379,7 @@ export const TableColumnSetup = (props: TableColumnSetupProps) => {
 
     const dndRenderItem = useDndRenderItem(sortingEnabled);
 
-    const renderControl: TreeSelectProps<unknown>['renderControl'] = ({toggleOpen}) => {
+    const renderControl: TreeSelectProps['renderControl'] = ({toggleOpen}) => {
         const onKeyDown = createOnKeyDownHandler(toggleOpen);
 
         return (

src/components/Table/hoc/withTableSettings/withTableSettings.tsx

@@ -110,7 +110,7 @@ export function getActualItems<I>(
 }
 
 export interface WithTableSettingsOptions {
-    width?: TreeSelectProps<any>['popupWidth'];
+    width?: TreeSelectProps['popupWidth'];
     sortable?: boolean;
     filterable?: boolean;
 }
@@ -119,7 +119,7 @@ interface WithTableSettingsBaseProps {
     /**
      * @deprecated Use factory notation: "withTableSettings({width: <value>})(Table)"
      */
-    settingsPopupWidth?: TreeSelectProps<any>['popupWidth'];
+    settingsPopupWidth?: TreeSelectProps['popupWidth'];
 
     settings: TableSettingsData;
     updateSettings: (data: TableSettingsData) => void;

src/components/TreeSelect/TreeSelect.tsx

@@ -17,7 +17,7 @@ import {block} from '../utils/cn';
 import type {CnMods} from '../utils/cn';
 
 import {useControlledValue} from './hooks/useControlledValue';
-import type {TreeSelectProps, TreeSelectRenderControlProps} from './types';
+import type {TreeSelectGetValue, TreeSelectProps, TreeSelectRenderControlProps} from './types';
 
 import './TreeSelect.scss';
 
@@ -27,7 +27,11 @@ const defaultItemRenderer: TreeListRenderItem<unknown> = (renderState) => {
     return <ListItemView {...renderState.props} {...renderState.renderContainerProps} />;
 };
 
-export const TreeSelect = React.forwardRef(function TreeSelect<T, P extends {} = {}>(
+export const TreeSelect = React.forwardRef(function TreeSelect<
+    T,
+    P extends {} = {},
+    M extends boolean = false,
+>(
     {
         id,
         qa,
@@ -68,7 +72,7 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T, P extends {} =
         onBlur,
         getItemId,
         onItemClick,
-    }: TreeSelectProps<T, P>,
+    }: TreeSelectProps<T, P, M>,
     ref: React.Ref<HTMLButtonElement>,
 ) {
     const mobile = useMobile();
@@ -103,10 +107,37 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T, P extends {} =
         open: propsOpen,
     });
 
+    const handleUpdate = React.useCallback(
+        (nextValue: string[]) => {
+            if (onUpdate) {
+                if (multiple) {
+                    onUpdate(nextValue as TreeSelectGetValue<M>);
+                } else {
+                    const [vl] = nextValue;
+
+                    onUpdate(vl as TreeSelectGetValue<M>);
+                }
+            }
+        },
+        [multiple, onUpdate],
+    );
+
+    const computedValue = React.useMemo(() => {
+        let result: string[] = [];
+
+        if (Array.isArray(propsValue)) {
+            result = propsValue;
+        } else if (typeof propsValue !== 'undefined') {
+            result = [propsValue];
+        }
+
+        return result;
+    }, [propsValue]);
+
     const {value, selectedById, setSelected} = useControlledValue({
-        value: propsValue,
+        value: computedValue,
         defaultValue,
-        onUpdate,
+        onUpdate: handleUpdate,
     });
 
     const list = useList({
@@ -264,6 +295,6 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T, P extends {} =
             />
         </div>
     );
-}) as <T, P extends {} = {}>(
-    props: TreeSelectProps<T, P> & {ref?: React.Ref<HTMLDivElement>},
+}) as <T, P extends {} = {}, M extends boolean = false>(
+    props: TreeSelectProps<T, P, M> & {ref?: React.Ref<HTMLDivElement>},
 ) => React.ReactElement;

src/components/TreeSelect/__stories__/components/InfinityScrollExample.tsx

@@ -32,7 +32,7 @@ export const InfinityScrollExample = ({
     itemsCount = 5,
     ...storyProps
 }: InfinityScrollExampleProps) => {
-    const [value, setValue] = React.useState<string[]>([]);
+    const [value, setValue] = React.useState<string | undefined>();
     const {
         data: items = [],
         onFetchMore,

src/components/TreeSelect/__stories__/components/WithDndListExample.tsx

@@ -38,7 +38,7 @@ type CustomDataType = {someRandomKey: string; id: string};
 export interface WithDndListExampleProps
     extends Omit<
         TreeSelectProps<CustomDataType>,
-        'value' | 'onUpdate' | 'items' | 'mapItemDataToContentProps'
+        'value' | 'onUpdate' | 'items' | 'mapItemDataToContentProps' | 'multiple'
     > {}
 
 const randomItems: CustomDataType[] = createRandomizedData({

src/components/TreeSelect/__stories__/components/WithItemLinksAndActionsExample.tsx

@@ -28,14 +28,14 @@ export interface WithItemLinksAndActionsExampleProps
     > {}
 
 export const WithItemLinksAndActionsExample = (storyProps: WithItemLinksAndActionsExampleProps) => {
-    const [value, setValue] = React.useState<string[]>([]);
+    const [value, setValue] = React.useState<string | undefined>();
     const [open, setOpen] = React.useState(true);
     const items = React.useMemo(() => createRandomizedData({num: 10, depth: 1}), []);
 
     const onItemClick = (id: ListItemId, list: UseListResult<{title: string}>) => {
         if (list.state.disabledById[id]) return;
 
-        setValue([id]);
+        setValue(id);
 
         list.state.setActiveItemId(id);
 

src/components/TreeSelect/index.ts

@@ -1,2 +1,2 @@
 export {TreeSelect} from './TreeSelect';
-export type {TreeSelectProps, TreeSelectRenderItem} from './types';
+export type {TreeSelectProps, TreeSelectRenderItem, TreeSelectGetValue} from './types';

src/components/TreeSelect/types.ts

@@ -45,12 +45,16 @@ export type TreeSelectRenderItem<T, P extends {} = {}> = TreeListRenderItem<T, P
 export type TreeSelectRenderContainerProps<T> = TreeListContainerProps<T>;
 export type TreeSelectRenderContainer<T> = TreeListRenderContainer<T>;
 
-interface TreeSelectBehavioralProps<T> extends UseListParsedStateProps<T> {
+interface TreeSelectBehavioralProps<T, M extends boolean> extends UseListParsedStateProps<T> {
     withExpandedState?: boolean;
-    multiple?: boolean;
+    multiple?: M;
 }
 
-export interface TreeSelectProps<T, P extends {} = {}>
+export type TreeSelectGetValue<M extends boolean> = M extends true
+    ? ListItemId[]
+    : ListItemId | undefined;
+
+export interface TreeSelectProps<T = {}, P extends {} = {}, M extends boolean = false>
     extends Omit<TreeListProps<T, P>, 'list' | 'renderContainer' | 'multiple'>,
         Pick<
             TreeSelectRenderControlProps<T>,
@@ -63,8 +67,8 @@ export interface TreeSelectProps<T, P extends {} = {}>
             | 'errorMessage'
         >,
         UseOpenProps,
-        TreeSelectBehavioralProps<T> {
-    value?: ListItemId[];
+        TreeSelectBehavioralProps<T, M> {
+    value?: TreeSelectGetValue<M>;
     defaultValue?: ListItemId[] | undefined;
     popupClassName?: string;
     popupWidth?: SelectPopupProps['width'];
@@ -82,7 +86,7 @@ export interface TreeSelectProps<T, P extends {} = {}>
      * In other situations use `renderContainer` method
      */
     slotAfterListBody?: React.ReactNode;
-    onUpdate?(value: ListItemId[]): void;
+    onUpdate?(value: TreeSelectGetValue<M>): void;
     /**
      * Ability to override custom toggler button
      */

src/components/useList/utils/getListItemClickHandler.ts

@@ -1,14 +1,14 @@
 import type {ListOnItemClick, UseListResult} from '../types';
 
-interface GetListItemClickHandlerProps<T> {
-    multiple?: boolean;
+interface GetListItemClickHandlerProps<T, M> {
+    multiple?: M;
     list: UseListResult<T>;
 }
 
-export const getListItemClickHandler = <T = unknown>({
+export const getListItemClickHandler = <T = unknown, M extends boolean = false>({
     list,
     multiple,
-}: GetListItemClickHandlerProps<T>) => {
+}: GetListItemClickHandlerProps<T, M>) => {
     const onItemClick: ListOnItemClick = ({id}) => {
         if (list.state.disabledById[id]) return;
 

src/unstable.ts

@@ -23,6 +23,8 @@ export {
 export {
     TreeSelect as unstable_TreeSelect,
     type TreeSelectProps as unstable_TreeSelectProps,
+    type TreeSelectRenderItem as unstable_TreeSelectRenderItem,
+    type TreeSelectGetValue as unstable_TreeSelectGetValue,
 } from './components/TreeSelect';
 export {
     TreeList as unstable_TreeList,