Merge branch 'main' into pagination-total

.eslintrc

@@ -30,6 +30,7 @@
         "jsx-a11y/no-autofocus": "off",
         "import/no-extraneous-dependencies": "off",
         "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
+        "@typescript-eslint/prefer-ts-expect-error": "error",
         "@typescript-eslint/consistent-type-imports": ["error", {"prefer":  "type-imports", "fixStyle": "separate-type-imports"}]
     },
     "overrides": [

CODEOWNERS

@@ -18,7 +18,7 @@
 /src/components/Hotkey @d3m1d0v
 /src/components/Icon @amje
 /src/components/Label @goshander
-/src/components/Link @LakeVostok
+/src/components/Link @Estasie
 /src/components/List @korvin89
 /src/components/Loader @SeqviriouM
 /src/components/Menu @NikitaCG

src/components/Disclosure/Disclosure.tsx

@@ -42,7 +42,7 @@ export interface DisclosureProps extends QAProps {
 
 const isDisclosureSummaryComponent = isOfType(DisclosureSummary);
 
-// @ts-ignore this ts-error is appears when forwarding ref. It complains that DisclosureComposition props is not provided initially
+// @ts-expect-error this ts-error is appears when forwarding ref. It complains that DisclosureComposition props is not provided initially
 export const Disclosure: React.FunctionComponent<DisclosureProps> & DisclosureComposition =
     React.forwardRef<HTMLDivElement, DisclosureProps>(function Disclosure(props, ref) {
         const {

src/components/Table/__tests__/Table.withTableSettings.test.tsx

@@ -149,10 +149,8 @@ describe('withTableSettings', () => {
             );
             expect(osSettings).toBeDefined();
             expect(osxSettings).toBeDefined();
-            // @ts-ignore
-            expect(osSettings.isSelected).toBe(true);
-            // @ts-ignore
-            expect(osxSettings.isSelected).toBe(false);
+            expect(osSettings?.isSelected).toBe(true);
+            expect(osxSettings?.isSelected).toBe(false);
         });
 
         it('should return columns when no settings provided', () => {

src/components/Table/hoc/withTableActions/withTableActions.tsx

@@ -272,7 +272,7 @@ export function withTableActions<I extends TableDataItem, E extends {} = {}>(
 
                 return (item: I, index: number, event: React.MouseEvent<HTMLTableRowElement>) => {
                     if (
-                        // @ts-ignore
+                        // @ts-expect-error
                         event.nativeEvent.target.matches(
                             `.${actionsButtonCn}, .${actionsButtonCn} *`,
                         )

src/components/Table/hoc/withTableCopy/withTableCopy.tsx

@@ -104,7 +104,7 @@ export function withTableCopy<I extends TableDataItem, E extends {} = {}>(
                 return (item: I, index: number, event: React.MouseEvent<HTMLTableRowElement>) => {
                     const buttonClassName = b('copy-button');
                     if (
-                        // @ts-ignore
+                        // @ts-expect-error
                         event.nativeEvent.target.matches(
                             `.${buttonClassName}, .${buttonClassName} *`,
                         )

src/components/Table/hoc/withTableSelection/withTableSelection.tsx

@@ -120,7 +120,7 @@ export function withTableSelection<I extends TableDataItem, E extends {} = {}>(
             event: React.ChangeEvent<HTMLInputElement>,
         ) => {
             const {checked} = event.target;
-            // @ts-ignore shiftKey is defined for click events
+            // @ts-expect-error shiftKey is defined for click events
             const isShiftPressed = event.nativeEvent.shiftKey;
             const {data, selectedIds, onSelectionChange} = this.props;
 
@@ -191,7 +191,7 @@ export function withTableSelection<I extends TableDataItem, E extends {} = {}>(
                 return (item: I, index: number, event: React.MouseEvent<HTMLTableRowElement>) => {
                     const checkboxClassName = b('selection-checkbox');
                     if (
-                        // @ts-ignore
+                        // @ts-expect-error
                         event.nativeEvent.target.matches(
                             `.${checkboxClassName}, .${checkboxClassName} *`,
                         )

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};

src/components/layout/demo/ColPresenter/ColPresenter.tsx

@@ -4,7 +4,7 @@ import {Col} from '../../Col/Col';
 import type {ColProps} from '../../Col/Col';
 import {Box} from '../Box/Box';
 
-// @ts-ignore-error
+// @ts-expect-error
 const pickSizeProps = <T extends {}>({l, xl, s, m, xxl, xxxl, size}: T = {}): string => {
     // skip empty values
     return Object.entries({...{l, xl, s, m, xxl, xxxl, size}})

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 = 'div'>({
+    ref,
+    ...props
+}: ListItemViewPropsWithTypedAttrs<C> & {ref?: ListItemViewRef<C>}) => React.ReactElement;

test-utils/setup-tests.ts

@@ -20,7 +20,7 @@ global.ResizeObserver = class implements ResizeObserver {
 jest.mock(
     'react-virtualized-auto-sizer',
     () =>
-        //@ts-ignore
+        //@ts-expect-error
         ({children}) =>
             children({height: 400, width: 400}),
 );