feat(TreeSelect): deprecate value, defaultValue and onUpdate props

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

@@ -16,12 +16,13 @@ import {Button} from '../../../../Button';
 import {Icon} from '../../../../Icon';
 import {TreeSelect} from '../../../../TreeSelect/TreeSelect';
 import type {
+    TreeSelectOnItemClick,
     TreeSelectProps,
     TreeSelectRenderContainer,
     TreeSelectRenderItem,
 } from '../../../../TreeSelect/types';
 import {Flex} from '../../../../layout/Flex/Flex';
-import type {ListItemCommonProps, ListItemViewProps} from '../../../../useList';
+import type {ListItemCommonProps, ListItemViewProps, RenderItemProps} from '../../../../useList';
 import {ListContainerView, ListItemView} from '../../../../useList';
 import {block} from '../../../../utils/cn';
 import type {TableColumnConfig} from '../../../Table';
@@ -73,18 +74,6 @@ const prepareStickyState = (
     };
 };
 
-const prepareValue = (tableColumnItems: TableColumnSetupItem[]) => {
-    const selectedIds: string[] = [];
-
-    tableColumnItems.forEach(({id, isSelected}) => {
-        if (isSelected) {
-            selectedIds.push(id);
-        }
-    });
-
-    return selectedIds;
-};
-
 interface RenderContainerProps {
     isDragDisabled?: boolean;
     provided?: DraggableProvided;
@@ -236,9 +225,12 @@ export type TableColumnSetupItem = TableSetting & {
     sticky?: TableColumnConfig<unknown>['sticky'];
 };
 
-const mapItemDataToProps = (item: TableColumnSetupItem): ListItemCommonProps => {
+const mapItemDataToProps = (
+    item: TableColumnSetupItem,
+): ListItemCommonProps & Partial<RenderItemProps> => {
     return {
         title: item.title,
+        selected: item.isSelected,
     };
 };
 
@@ -365,27 +357,27 @@ export const TableColumnSetup = (props: TableColumnSetupProps) => {
         }
     };
 
-    const onUpdate = (selectedItemsIds: string[]) => {
-        setItems((prevItems) => {
-            return prevItems.map((item) => ({
+    const handleItemClick: TreeSelectOnItemClick<TableColumnSetupItem> = ({id}, defaultClickCb) => {
+        setItems((prevItems) =>
+            prevItems.map((item) => ({
                 ...item,
-                isSelected: item.isRequired || selectedItemsIds.includes(item.id),
-            }));
-        });
+                ...(id === item.id ? {isSelected: item.isRequired || !item.isSelected} : {}),
+            })),
+        );
+        // for active list element selection after click
+        defaultClickCb({defaultSelectionLogic: false});
     };
 
-    const value = React.useMemo(() => prepareValue(items), [items]);
-
     return (
         <TreeSelect
             className={b(null, className)}
+            // `selected` value comes from items decl
             mapItemDataToProps={mapItemDataToProps}
             multiple
             size="l"
             open={open}
-            value={value}
             items={items}
-            onUpdate={onUpdate}
+            onItemClick={handleItemClick}
             popupWidth={popupWidth}
             onOpenChange={onOpenChange}
             placement={popupPlacement}

src/components/TreeList/TreeList.tsx

@@ -38,11 +38,7 @@ export const TreeList = <T,>({
     const listParsedState = useList({
         items,
         getItemId,
-        // used not all of all properties but it may be needed in future
         expandedById: propsExpandedById,
-        disabledById: propsDisabledById,
-        selectedById: propsSelectedById,
-        activeItemId,
     });
 
     const expandedById = propsExpandedById || listParsedState.initialState.expandedById;

src/components/TreeList/types.ts

@@ -73,7 +73,7 @@ export type TreeListRenderContainer<T> = (
 
 export type TreeListMapItemDataToProps<T> = (item: T) => ListItemCommonProps;
 
-export interface TreeListProps<T> extends QAProps, Partial<ListState> {
+export interface TreeListProps<T, P extends {} = {}> extends QAProps, Partial<ListState> {
     /**
      * Control outside list container dom element. For example for keyboard
      */
@@ -97,7 +97,7 @@ export interface TreeListProps<T> extends QAProps, Partial<ListState> {
     /**
      * Override list item content by you custom node.
      */
-    renderItem?: TreeListRenderItem<T>;
+    renderItem?: TreeListRenderItem<T, P>;
     renderContainer?: TreeListRenderContainer<T>;
     onItemClick?: TreeListOnItemClick<T>;
     mapItemDataToProps: TreeListMapItemDataToProps<T>;

src/components/TreeSelect/TreeSelect.tsx

@@ -1,19 +1,29 @@
 import React from 'react';
 
 import {useForkRef, useUniqId} from '../../hooks';
+import {useOpenState} from '../../hooks/useSelect/useOpenState';
 import {SelectControl} from '../Select/components';
 import {SelectPopup} from '../Select/components/SelectPopup/SelectPopup';
 import {TreeList} from '../TreeList';
 import type {TreeListOnItemClick, TreeListRenderItem} from '../TreeList/types';
 import {Flex} from '../layout';
 import {useMobile} from '../mobile';
-import {ListItemView, scrollToListItem, useList, useListState} from '../useList';
+import {
+    ListItemView,
+    getListParsedState,
+    scrollToListItem,
+    useList,
+    useListState,
+} from '../useList';
 import type {ListItemId} from '../useList';
 import {block} from '../utils/cn';
 import type {CnMods} from '../utils/cn';
 
-import {useTreeSelectSelection, useValue} from './hooks/useTreeSelectSelection';
-import type {TreeSelectProps, TreeSelectRenderControlProps} from './types';
+import type {
+    TreeSelectDefaultOnClickCb,
+    TreeSelectProps,
+    TreeSelectRenderControlProps,
+} from './types';
 
 import './TreeSelect.scss';
 
@@ -27,10 +37,11 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>(
     {
         id,
         qa,
+        title,
         placement,
         slotBeforeListBody,
         slotAfterListBody,
-        size,
+        size = 'm',
         items,
         defaultOpen,
         width,
@@ -41,25 +52,24 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>(
         open: propsOpen,
         multiple,
         popupWidth,
+        selectedById,
         expandedById,
         disabledById,
         activeItemId,
-        defaultValue,
         popupDisablePortal,
         groupsBehavior = 'expandable',
-        value: propsValue,
         defaultGroupsExpanded,
         onClose,
-        onUpdate,
         getItemId,
         onOpenChange,
         renderControl,
         renderItem = defaultItemRenderer as TreeListRenderItem<T>,
         renderContainer,
         onItemClick,
+        setSelected: propsSetSelected,
+        setExpanded: propsSetExpanded,
         setActiveItemId: propsSetActiveItemId,
         mapItemDataToProps,
-        title,
     }: TreeSelectProps<T>,
     ref: React.Ref<HTMLButtonElement>,
 ) {
@@ -74,67 +84,62 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>(
 
     const handleControlRef = useForkRef(ref, controlRef);
 
-    const {value, setInnerValue, selected} = useValue({
-        value: propsValue,
-        defaultValue,
-    });
+    const initialValues = React.useMemo(() => getListParsedState(items).initialState, [items]);
 
     const listState = useListState({
         controlledValues: {
             expandedById,
             disabledById,
             activeItemId,
-            selectedById: selected,
+            selectedById,
         },
+        initialValues,
     });
 
+    const setSelected = propsSetSelected ?? listState.setSelected;
+    const setExpanded = propsSetExpanded ?? listState.setExpanded;
     const setActiveItemId = propsSetActiveItemId ?? listState.setActiveItemId;
 
     const listParsedState = useList({
         items,
         getItemId,
-        ...listState,
+        expandedById: listState.expandedById,
     });
 
-    const wrappedOnUpdate = React.useCallback(
-        (ids: ListItemId[]) =>
-            onUpdate?.(
-                ids,
-                ids.map((id) => listParsedState.itemsById[id]),
-            ),
-        [listParsedState.itemsById, onUpdate],
-    );
-
-    const {open, toggleOpen, handleClearValue, handleMultipleSelection, handleSingleSelection} =
-        useTreeSelectSelection({
-            setInnerValue,
-            value,
-            onUpdate: wrappedOnUpdate,
-            defaultOpen,
-            open: propsOpen,
-            onClose,
-            onOpenChange,
-        });
+    const {toggleOpen, open} = useOpenState({
+        defaultOpen,
+        onClose,
+        onOpenChange,
+        open: propsOpen,
+    });
 
     const handleItemClick = React.useCallback<TreeListOnItemClick<T>>(
         (onClickProps) => {
-            const {groupState} = onClickProps.context;
-
-            const defaultHandleClick = () => {
+            const defaultHandleClick: TreeSelectDefaultOnClickCb = ({
+                defaultSelectionLogic,
+            } = {}) => {
                 if (listState.disabledById[onClickProps.id]) return;
 
+                const {groupState} = onClickProps.context;
+
                 // always activate selected item
                 setActiveItemId(onClickProps.id);
 
                 if (groupState && groupsBehavior === 'expandable') {
-                    listState.setExpanded((prvState) => ({
+                    setExpanded((prvState) => ({
                         ...prvState,
                         [onClickProps.id]: !onClickProps.expanded,
                     }));
-                } else if (multiple) {
-                    handleMultipleSelection(onClickProps.id);
+                } else if (defaultSelectionLogic === false) {
+                    // do nothing - client know what to do
                 } else {
-                    handleSingleSelection(onClickProps.id);
+                    setSelected((prevSelectedState) => ({
+                        ...(multiple ? prevSelectedState : {}),
+                        [onClickProps.id]: !prevSelectedState[onClickProps.id],
+                    }));
+                }
+
+                if (!multiple) {
                     toggleOpen(false);
                 }
             };
@@ -147,26 +152,41 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>(
         },
         [
             onItemClick,
-            listState,
+            listState.disabledById,
             setActiveItemId,
             groupsBehavior,
             multiple,
-            handleMultipleSelection,
-            handleSingleSelection,
+            setExpanded,
+            setSelected,
             toggleOpen,
         ],
     );
 
+    const value = React.useMemo(
+        () =>
+            Object.entries(listState.selectedById).reduce<ListItemId[]>(
+                (acc, [listItemId, listItemValue]) => {
+                    if (listItemValue) {
+                        acc.push(listItemId);
+                    }
+
+                    return acc;
+                },
+                [],
+            ),
+        [listState.selectedById],
+    );
+
     // restoring focus when popup opens
     React.useLayoutEffect(() => {
         if (open) {
-            const lastSelectedItemId = value[value.length - 1];
+            const firstSelectedItemId = value[0];
             containerRef.current?.focus();
 
-            setActiveItemId(lastSelectedItemId);
+            setActiveItemId(firstSelectedItemId);
 
-            if (lastSelectedItemId) {
-                scrollToListItem(lastSelectedItemId, containerRef.current);
+            if (firstSelectedItemId) {
+                scrollToListItem(firstSelectedItemId, containerRef.current);
             }
         }
         // subscribe only in open event
@@ -178,7 +198,7 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>(
     const controlProps: TreeSelectRenderControlProps = {
         open,
         toggleOpen,
-        clearValue: handleClearValue,
+        clearValue: () => setSelected({}),
         ref: handleControlRef,
         size,
         value,