From 1c4dbe5eaf3fe27b6fcb1e6adc55741b40e4ce59 Mon Sep 17 00:00:00 2001
From: Alexandr Isaev <aisaev188@yandex-team.ru>
Date: Thu, 23 May 2024 14:53:01 +0300
Subject: [PATCH 1/2] fix(Flex,ListItemView): return ref drilling by
 React.forwardRef

---
 src/components/layout/Flex/Flex.tsx           |   8 +-
 .../components/ListItemView/ListItemView.tsx  | 229 +++++++++---------
 2 files changed, 123 insertions(+), 114 deletions(-)

diff --git a/src/components/layout/Flex/Flex.tsx b/src/components/layout/Flex/Flex.tsx
index 22ca7d3c2c..3a93a16493 100644
--- a/src/components/layout/Flex/Flex.tsx
+++ b/src/components/layout/Flex/Flex.tsx
@@ -128,7 +128,10 @@ type FlexPropsWithTypedAttrs<T extends React.ElementType> = FlexProps<T> &
  * ---
  * Storybook - https://preview.gravity-ui.com/uikit/?path=/docs/layout--playground#flex
  */
-export const Flex = function Flex<T extends React.ElementType = 'div'>(props: FlexProps<T>) {
+export const Flex = React.forwardRef(function Flex<T extends React.ElementType = 'div'>(
+    props: FlexProps<T>,
+    ref: FlexRef<T>,
+) {
     const {
         as: propsAs,
         direction,
@@ -187,6 +190,7 @@ export const Flex = function Flex<T extends React.ElementType = 'div'>(props: Fl
                 },
                 className,
             )}
+            ref={ref}
             style={{
                 flexDirection: applyMediaProps(direction),
                 flexGrow: grow === true ? 1 : grow,
@@ -213,6 +217,6 @@ export const Flex = function Flex<T extends React.ElementType = 'div'>(props: Fl
                 : children}
         </Box>
     );
-} as (<C extends React.ElementType = 'div'>(
+}) as (<C extends React.ElementType = 'div'>(
     props: FlexPropsWithTypedAttrs<C> & {ref?: FlexRef<C>},
 ) => React.ReactElement) & {displayName: string};
diff --git a/src/components/useList/components/ListItemView/ListItemView.tsx b/src/components/useList/components/ListItemView/ListItemView.tsx
index aff283be05..e57cf6bc6c 100644
--- a/src/components/useList/components/ListItemView/ListItemView.tsx
+++ b/src/components/useList/components/ListItemView/ListItemView.tsx
@@ -15,11 +15,13 @@ import './ListItemView.scss';
 
 const b = block('list-item-view');
 
-export interface ListItemViewProps extends QAProps, ListItemCommonProps {
+export interface ListItemViewProps<T extends React.ElementType = 'div'>
+    extends QAProps,
+        ListItemCommonProps {
     /**
      * Ability to override default html tag
      */
-    as?: keyof JSX.IntrinsicElements;
+    as?: T;
     /**
      * @default `m`
      */
@@ -43,7 +45,7 @@ export interface ListItemViewProps extends QAProps, ListItemCommonProps {
     /**
      * Note: if passed and `disabled` option is `true` click will not be appear
      */
-    onClick?(): void;
+    onClick?: React.ComponentPropsWithoutRef<T>['onClick'];
     style?: React.CSSProperties;
     className?: string;
     role?: React.AriaRole;
@@ -59,6 +61,11 @@ export interface ListItemViewProps extends QAProps, ListItemCommonProps {
     id: ListItemId;
 }
 
+type ListItemViewRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref'];
+
+type ListItemViewPropsWithTypedAttrs<T extends React.ElementType> = ListItemViewProps<T> &
+    Omit<React.ComponentPropsWithoutRef<T>, keyof ListItemViewProps<T>>;
+
 interface SlotProps extends FlexProps {
     indentation?: number;
 }
@@ -85,118 +92,116 @@ const renderSafeIndentation = (indentation?: number) => {
     return null;
 };
 
-export const ListItemView = React.forwardRef(
-    (
-        {
-            id,
-            as = 'div',
-            size = 'm',
-            active,
-            selected,
-            disabled,
-            activeOnHover: propsActiveOnHover,
-            className,
-            hasSelectionIcon = true,
-            indentation,
-            startSlot,
-            subtitle,
-            endSlot,
-            title,
-            height,
-            expanded,
-            dragging,
-            style,
-            role = 'option',
-            onClick: _onClick,
-            ...rest
-        }: ListItemViewProps,
-        ref?: any,
-    ) => {
-        const isGroup = typeof expanded === 'boolean';
-        const onClick = disabled ? undefined : _onClick;
-        const activeOnHover =
-            typeof propsActiveOnHover === 'boolean' ? propsActiveOnHover : Boolean(onClick);
+export const ListItemView = React.forwardRef(function ListItemView<
+    T extends React.ElementType = 'div',
+>(
+    {
+        id,
+        as: asProps,
+        size = 'm',
+        active,
+        selected,
+        disabled,
+        activeOnHover: propsActiveOnHover,
+        className,
+        hasSelectionIcon = true,
+        indentation,
+        startSlot,
+        subtitle,
+        endSlot,
+        title,
+        height,
+        expanded,
+        dragging,
+        style,
+        role = 'option',
+        onClick: _onClick,
+        ...rest
+    }: ListItemViewPropsWithTypedAttrs<T>,
+    ref?: ListItemViewRef<T>,
+) {
+    const as: React.ElementType = asProps || 'div';
+    const isGroup = typeof expanded === 'boolean';
+    const onClick = disabled ? undefined : _onClick;
+    const activeOnHover =
+        typeof propsActiveOnHover === 'boolean' ? propsActiveOnHover : Boolean(onClick);
 
-        return (
-            <Flex
-                {...{[LIST_ITEM_DATA_ATR]: id}}
-                role={role}
-                aria-selected={selected}
-                onClick={onClick}
-                className={b(
-                    {
-                        active: dragging || active,
-                        selected: selected && !hasSelectionIcon,
-                        activeOnHover,
-                        radius: size,
-                        dragging,
-                        clickable: Boolean(onClick),
-                    },
-                    spacing({px: 2}, className),
+    return (
+        <Flex
+            {...{[LIST_ITEM_DATA_ATR]: id}}
+            role={role}
+            aria-selected={selected}
+            onClick={onClick}
+            className={b(
+                {
+                    active: dragging || active,
+                    selected: selected && !hasSelectionIcon,
+                    activeOnHover,
+                    radius: size,
+                    dragging,
+                    clickable: Boolean(onClick),
+                },
+                spacing({px: 2}, className),
+            )}
+            style={{
+                minHeight: height ?? modToHeight[size][Number(Boolean(subtitle))],
+                ...style,
+            }}
+            as={as}
+            ref={ref}
+            alignItems="center"
+            gap="4"
+            justifyContent="space-between"
+            {...rest}
+        >
+            <Flex gap="2" alignItems="center" grow>
+                {hasSelectionIcon && (
+                    <ListItemViewSlot // reserve space
+                    >
+                        {selected ? (
+                            <Icon data={Check} size={16} className={colorText({color: 'info'})} />
+                        ) : null}
+                    </ListItemViewSlot>
                 )}
-                style={{
-                    minHeight: height ?? modToHeight[size][Number(Boolean(subtitle))],
-                    ...style,
-                }}
-                as={as}
-                ref={ref}
-                alignItems="center"
-                gap="4"
-                justifyContent="space-between"
-                {...rest}
-            >
-                <Flex gap="2" alignItems="center" grow>
-                    {hasSelectionIcon && (
-                        <ListItemViewSlot // reserve space
+
+                {renderSafeIndentation(indentation)}
+
+                {isGroup ? (
+                    <Icon
+                        className={b('icon', colorText({color: disabled ? 'hint' : undefined}))}
+                        data={expanded ? ChevronDown : ChevronUp}
+                        size={16}
+                    />
+                ) : null}
+
+                {startSlot}
+
+                <div className={b('main-content')}>
+                    {typeof title === 'string' ? (
+                        <Text
+                            ellipsis
+                            color={disabled ? 'hint' : undefined}
+                            variant={isGroup ? 'subheader-1' : undefined}
                         >
-                            {selected ? (
-                                <Icon
-                                    data={Check}
-                                    size={16}
-                                    className={colorText({color: 'info'})}
-                                />
-                            ) : null}
-                        </ListItemViewSlot>
+                            {title}
+                        </Text>
+                    ) : (
+                        title
                     )}
-
-                    {renderSafeIndentation(indentation)}
-
-                    {isGroup ? (
-                        <Icon
-                            className={b('icon', colorText({color: disabled ? 'hint' : undefined}))}
-                            data={expanded ? ChevronDown : ChevronUp}
-                            size={16}
-                        />
-                    ) : null}
-
-                    {startSlot}
-
-                    <div className={b('main-content')}>
-                        {typeof title === 'string' ? (
-                            <Text
-                                ellipsis
-                                color={disabled ? 'hint' : undefined}
-                                variant={isGroup ? 'subheader-1' : undefined}
-                            >
-                                {title}
-                            </Text>
-                        ) : (
-                            title
-                        )}
-                        {typeof subtitle === 'string' ? (
-                            <Text ellipsis color={disabled ? 'hint' : 'secondary'}>
-                                {subtitle}
-                            </Text>
-                        ) : (
-                            subtitle
-                        )}
-                    </div>
-                </Flex>
-
-                {endSlot}
+                    {typeof subtitle === 'string' ? (
+                        <Text ellipsis color={disabled ? 'hint' : 'secondary'}>
+                            {subtitle}
+                        </Text>
+                    ) : (
+                        subtitle
+                    )}
+                </div>
             </Flex>
-        );
-    },
-);
 
-ListItemView.displayName = 'ListItemView';
+            {endSlot}
+        </Flex>
+    );
+}) as <C extends React.ElementType = 'span'>({
+    ref,
+    ...props
+}: ListItemViewPropsWithTypedAttrs<C> & {ref?: ListItemViewRef<C>}) => React.ReactElement;

From 285693267d2186949ecd364f360c79e6a5e8997e Mon Sep 17 00:00:00 2001
From: Alexandr Isaev <aisaev188@yandex-team.ru>
Date: Thu, 23 May 2024 15:10:59 +0300
Subject: [PATCH 2/2] fix: typo

---
 src/components/useList/components/ListItemView/ListItemView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/useList/components/ListItemView/ListItemView.tsx b/src/components/useList/components/ListItemView/ListItemView.tsx
index e57cf6bc6c..49d647a137 100644
--- a/src/components/useList/components/ListItemView/ListItemView.tsx
+++ b/src/components/useList/components/ListItemView/ListItemView.tsx
@@ -201,7 +201,7 @@ export const ListItemView = React.forwardRef(function ListItemView<
             {endSlot}
         </Flex>
     );
-}) as <C extends React.ElementType = 'span'>({
+}) as <C extends React.ElementType = 'div'>({
     ref,
     ...props
 }: ListItemViewPropsWithTypedAttrs<C> & {ref?: ListItemViewRef<C>}) => React.ReactElement;