Merge branch 'main' into playwright-actions-for-forks

gravity-ui · Feb 13, 2024 · e8ba0fc · e8ba0fc
2 parents 5816233 + 1ab9d59
commit e8ba0fc
Show file tree

Hide file tree

Showing 21 changed files with 255 additions and 170 deletions.
diff --git a/src/components/TreeSelect/TreeSelect.tsx b/src/components/TreeSelect/TreeSelect.tsx
@@ -20,7 +20,7 @@ import type {CnMods} from '../utils/cn';
 import {TreeSelectItem} from './TreeSelectItem';
 import {TreeListContainer} from './components/TreeListContainer/TreeListContainer';
 import {useTreeSelectSelection, useValue} from './hooks/useTreeSelectSelection';
-import type {RenderControlProps, TreeSelectProps} from './types';
+import type {TreeSelectProps, TreeSelectRenderControlProps} from './types';
 
 import './TreeSelect.scss';
 
@@ -56,7 +56,7 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>(
         onOpenChange,
         renderControl,
         renderItem,
-        renderContainer: RenderContainer = TreeListContainer,
+        renderContainer = TreeListContainer,
         onItemClick,
     } = props;
 
@@ -135,15 +135,19 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>(
             };
 
             if (onItemClick) {
-                return onItemClick(defaultHandleClick, {
-                    id,
-                    isGroup: id in listParsedState.groupsState,
-                    isLastItem:
-                        listParsedState.visibleFlattenIds[
-                            listParsedState.visibleFlattenIds.length - 1
-                        ] === id,
-                    disabled: listState.disabledById[id],
-                });
+                return onItemClick(
+                    listParsedState.itemsById[id],
+                    {
+                        id,
+                        isGroup: id in listParsedState.groupsState,
+                        isLastItem:
+                            listParsedState.visibleFlattenIds[
+                                listParsedState.visibleFlattenIds.length - 1
+                            ] === id,
+                        disabled: listState.disabledById[id],
+                    },
+                    defaultHandleClick,
+                );
             }
 
             return defaultHandleClick();
@@ -152,6 +156,7 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>(
             onItemClick,
             listState,
             listParsedState.groupsState,
+            listParsedState.itemsById,
             listParsedState.visibleFlattenIds,
             groupsBehavior,
             multiple,
@@ -188,7 +193,7 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>(
 
     const handleClose = React.useCallback(() => toggleOpen(false), [toggleOpen]);
 
-    const controlProps: RenderControlProps = {
+    const controlProps: TreeSelectRenderControlProps = {
         open,
         toggleOpen,
         clearValue: handleClearValue,
@@ -205,18 +210,18 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>(
         <SelectControl
             {...controlProps}
             selectedOptionsContent={React.Children.toArray(
-                value.map((id) => {
+                value.map((itemId) => {
                     if ('renderControlContent' in props) {
-                        return props.renderControlContent(listParsedState.itemsById[id]).title;
+                        return props.renderControlContent(listParsedState.itemsById[itemId]).title;
                     }
 
-                    const items = listParsedState.itemsById[id];
+                    const item = listParsedState.itemsById[itemId];
 
-                    if (isKnownStructureGuard(items)) {
-                        return items.title;
+                    if (isKnownStructureGuard(item)) {
+                        return item.title;
                     }
 
-                    return items as string;
+                    return item as string;
                 }),
             ).join(', ')}
             view="normal"
@@ -257,15 +262,15 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>(
                 id={`tree-select-popup-${treeSelectId}`}
             >
                 {slotBeforeListBody}
-                <RenderContainer
-                    size={size}
-                    containerRef={containerRef}
-                    id={`list-${treeSelectId}`}
-                    {...listParsedState}
-                    {...listState}
-                    renderItem={(id, renderContextProps) => {
+                {renderContainer({
+                    size,
+                    containerRef,
+                    id: `list-${treeSelectId}`,
+                    ...listParsedState,
+                    ...listState,
+                    renderItem: (itemId, index, renderContextProps) => {
                         const renderState = getItemRenderState({
-                            id,
+                            id: itemId,
                             size,
                             onItemClick: handleItemClick,
                             ...listParsedState,
@@ -277,15 +282,16 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>(
                             Boolean(multiple) && !renderState.context.groupState;
 
                         if (renderItem) {
-                            return renderItem(
-                                renderState.data,
-                                renderState.props,
-                                renderState.context,
-                                renderContextProps,
-                            );
+                            return renderItem({
+                                data: renderState.data,
+                                props: renderState.props,
+                                itemState: renderState.context,
+                                index,
+                                renderContext: renderContextProps,
+                            });
                         }
 
-                        const itemData = listParsedState.itemsById[id];
+                        const itemData = listParsedState.itemsById[itemId];
 
                         return (
                             <TreeSelectItem
@@ -299,8 +305,8 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>(
                                 {...renderContextProps}
                             />
                         );
-                    }}
-                />
+                    },
+                })}
                 {slotAfterListBody}
             </SelectPopup>
         </Flex>

diff --git a/src/components/TreeSelect/__stories__/components/InfinityScrollExample.tsx b/src/components/TreeSelect/__stories__/components/InfinityScrollExample.tsx
@@ -18,10 +18,13 @@ export interface InfinityScrollExampleProps
     itemsCount?: number;
 }
 
-export const InfinityScrollExample = ({itemsCount = 5, ...props}: InfinityScrollExampleProps) => {
+export const InfinityScrollExample = ({
+    itemsCount = 5,
+    ...storyProps
+}: InfinityScrollExampleProps) => {
     const [value, setValue] = React.useState<string[]>([]);
     const {
-        data = [],
+        data: items = [],
         onFetchMore,
         canFetchMore,
         isLoading,
@@ -30,14 +33,14 @@ export const InfinityScrollExample = ({itemsCount = 5, ...props}: InfinityScroll
     return (
         <Flex>
             <TreeSelect<{title: string}>
-                {...props}
-                items={data}
+                {...storyProps}
+                items={items}
                 value={value}
-                renderItem={(item, state, {isLastItem, groupState}) => {
+                renderItem={({data, props, itemState: {isLastItem, groupState}}) => {
                     const node = (
                         <TreeSelectItem
-                            {...state}
-                            {...item}
+                            {...props}
+                            {...data}
                             endSlot={
                                 groupState ? (
                                     <Label>{groupState.childrenIds.length}</Label>

diff --git a/src/components/TreeSelect/__stories__/components/RenderVirtualizedContainer.tsx b/src/components/TreeSelect/__stories__/components/RenderVirtualizedContainer.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {ListContainerView, computeItemSize} from '../../../useList';
 import {VirtualizedListContainer} from '../../../useList/__stories__/components/VirtualizedListContainer';
-import type {RenderContainerProps} from '../../types';
+import type {TreeSelectRenderContainerProps} from '../../types';
 
 // custom container renderer example
 export const RenderVirtualizedContainer = <T,>({
@@ -11,7 +11,7 @@ export const RenderVirtualizedContainer = <T,>({
     visibleFlattenIds,
     renderItem,
     size,
-}: RenderContainerProps<T>) => {
+}: TreeSelectRenderContainerProps<T>) => {
     return (
         <ListContainerView fixedHeight id={id} ref={containerRef}>
             <VirtualizedListContainer