feat(TreeSelect): added TreeSelect unstable component and new list hooks

[IsaevAlexandr]

Completely rewritten to version with hooks.

Prev pr: #1039

[gravity-ui-bot]

Preview is ready.

[Mishnya]

I see you're using the react-window.

This library has a problem. In rtl, the list for an item when dragging sets the style right: 0 instead right: undefined, which causes the item to move to the right until the end of the screen.

To fix this you can manually set right: undefined to the item. I didn't find any more problems with with this bug and fix but maybe we can find an alternative to this library (which has not been updated since December 2018).

[IsaevAlexandr]

I see you're using the react-window.

This library has a problem. In rtl, the list for an item when dragging sets the style right: 0 instead right: undefined, which causes the item to move to the right until the end of the screen.

To fix this you can manually set right: undefined to the item. I didn't find any more problems with with this bug and fix but maybe we can find an alternative to this library (which has not been updated since December 2018).

The default virtualization solution is no longer assumed. react-window is just for example here, because it is already in project dependencies

[amje]

public var should be without any size, just --g-list-item-border-radius

[amje]

ListItemSize, "Type" suffix is redundant

[amje]

We keep TreeSelect stable?

[amje]

role option more suitable here, it supports aria-selected attribute, while listitem doesn't

[IsaevAlexandr]

/fixed

[GermanVor]

to be more precise useControlledState<T>(value: T | undefined, defaultValue: T)

[GermanVor]

I would even write like this

function useControlledState<T>(value: T | undefined, defaultValue: T) {
    const [state, setState] = React.useState(value ?? defaultValue);
    const isControlled = value === undefined;

    return {value: value ?? state, setState, isControlled};
}

[GermanVor]

looks like useControlledState from here.

Suggested change

	const [innerValue, setInnerValue] = React.useState(defaultValue || []);
	const value = valueProps || innerValue;
	const [value, setInnerValue] = useControlledState(valueProps, defaultValue || []);

useControlledState is good hook for library not only for useList area

[GermanVor]

Suggested change

	const [open, setOpenState] = React.useState(props.defaultOpen || false);
	const {onOpenChange} = props;
	const {onOpenChange, onClose} = props;
	const isControlled = typeof props.open === 'boolean';
	const openValue = isControlled ? (props.open as boolean) : open;
	const {
	value: open,
	isControlled,
	setState: setOpenState,
	} = useControlledState(props.open, false);
	const {onOpenChange, onClose} = props;

[GermanVor]

prevItems looks like extra:

React.useEffect(() => {
    setItems(filterItemsFn(filter, externalItems));
}, [externalItems])

[IsaevAlexandr]

it's new recommended way to not use useEffect things in code - https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes

[GermanVor]

Interesting. Why they do not use React.useRef for prev state

[GermanVor]

may be wrap filterItem and filterItems in the React.useRef like this:

const filterItemsRef = React.useRef(filterItems);
filterItemsRef.current = filterItems;

const filterItemRef = React.useRef(filterItem);
filterItemRef.current = filterItem;

const filterItemsFn = React.useCallback(() => {
    ...
    filterItemRef.current() or filterItemsRef.current()
    ....
}, []);

to remove them from dependency list - otherwise, if the user does not memorize them, then there is no point in debouncedFn