refactor: use rc-util/lib/pickAttrs and upgrade rc-rate and rc-pagination (#42688)

* refactor: use rc-util/lib/pickAttrs

* chore: upgrade rc-pagination

* chore: upgrade rc-rate

* type: fix ref type

* test: update pagination snapshot

* Update package.json

components/_util/__tests__/util.test.tsx

@@ -1,8 +1,7 @@
 /* eslint-disable class-methods-use-this */
 import KeyCode from 'rc-util/lib/KeyCode';
 import React from 'react';
-import { waitFakeTimer, render, fireEvent } from '../../../tests/utils';
-import getDataOrAriaProps from '../getDataOrAriaProps';
+import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
 import { isStyleSupport } from '../styleChecker';
 import throttleByAnimationFrame from '../throttleByAnimationFrame';
 import TransButton from '../transButton';
@@ -46,57 +45,6 @@ describe('Test utils function', () => {
     });
   });
 
-  describe('getDataOrAriaProps', () => {
-    it('returns all data-* properties from an object', () => {
-      const props = {
-        onClick: () => {},
-        isOpen: true,
-        'data-test': 'test-id',
-        'data-id': 1234,
-      };
-      const results = getDataOrAriaProps(props);
-      expect(results).toEqual({
-        'data-test': 'test-id',
-        'data-id': 1234,
-      });
-    });
-
-    it('does not return data-__ properties from an object', () => {
-      const props = {
-        onClick: () => {},
-        isOpen: true,
-        'data-__test': 'test-id',
-        'data-__id': 1234,
-      };
-      const results = getDataOrAriaProps(props);
-      expect(results).toEqual({});
-    });
-
-    it('returns all aria-* properties from an object', () => {
-      const props = {
-        onClick: () => {},
-        isOpen: true,
-        'aria-labelledby': 'label-id',
-        'aria-label': 'some-label',
-      };
-      const results = getDataOrAriaProps(props);
-      expect(results).toEqual({
-        'aria-labelledby': 'label-id',
-        'aria-label': 'some-label',
-      });
-    });
-
-    it('returns role property from an object', () => {
-      const props = {
-        onClick: () => {},
-        isOpen: true,
-        role: 'search',
-      };
-      const results = getDataOrAriaProps(props);
-      expect(results).toEqual({ role: 'search' });
-    });
-  });
-
   describe('TransButton', () => {
     it('can be focus/blur', () => {
       const ref = React.createRef<HTMLDivElement>();

components/_util/getDataOrAriaProps.ts

@@ -1,11 +0,0 @@
-export default function getDataOrAriaProps(props: any) {
-  return Object.keys(props).reduce((prev: any, key: string) => {
-    if (
-      (key.startsWith('data-') || key.startsWith('aria-') || key === 'role') &&
-      !key.startsWith('data-__')
-    ) {
-      prev[key] = props[key];
-    }
-    return prev;
-  }, {});
-}

components/alert/index.tsx

@@ -5,11 +5,11 @@ import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
 import InfoCircleFilled from '@ant-design/icons/InfoCircleFilled';
 import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
+import pickAttrs from 'rc-util/lib/pickAttrs';
 import type { ReactElement } from 'react';
 import * as React from 'react';
-import { ConfigContext } from '../config-provider';
-import getDataOrAriaProps from '../_util/getDataOrAriaProps';
 import { replaceElement } from '../_util/reactNode';
+import { ConfigContext } from '../config-provider';
 import ErrorBoundary from './ErrorBoundary';
 
 // CSSINJS
@@ -117,7 +117,7 @@ const Alert: CompoundedComponent = ({
 }) => {
   const [closed, setClosed] = React.useState(false);
 
-  const ref = React.useRef<HTMLElement>();
+  const ref = React.useRef<HTMLDivElement>(null);
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('alert', customizePrefixCls);
   const [wrapSSR, hashId] = useStyle(prefixCls);
@@ -157,7 +157,10 @@ const Alert: CompoundedComponent = ({
     hashId,
   );
 
-  const dataOrAriaProps = getDataOrAriaProps(props);
+  const dataOrAriaProps = pickAttrs(props, {
+    aria: true,
+    data: true,
+  });
 
   return wrapSSR(
     <CSSMotion

components/locale/__tests__/__snapshots__/index.test.tsx.snap

@@ -196178,7 +196178,7 @@ exports[`Locale Provider should display the text as lt 1`] = `
       class="ant-pagination-options"
     >
       <div
-        aria-label="Page Size"
+        aria-label="Puslapio dydis"
         class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
       >
         <div
@@ -196193,7 +196193,7 @@ exports[`Locale Provider should display the text as lt 1`] = `
               aria-controls="rc_select_TEST_OR_SSR_list"
               aria-expanded="false"
               aria-haspopup="listbox"
-              aria-label="Page Size"
+              aria-label="Puslapio dydis"
               aria-owns="rc_select_TEST_OR_SSR_list"
               autocomplete="off"
               class="ant-select-selection-search-input"

components/radio/group.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import pickAttrs from 'rc-util/lib/pickAttrs';
 import * as React from 'react';
-import getDataOrAriaProps from '../_util/getDataOrAriaProps';
 import { ConfigContext } from '../config-provider';
 import useSize from '../config-provider/hooks/useSize';
 import { RadioGroupContextProvider } from './context';
@@ -99,7 +99,10 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>((props, ref
   );
   return wrapSSR(
     <div
-      {...getDataOrAriaProps(props)}
+      {...pickAttrs(props, {
+        aria: true,
+        data: true,
+      })}
       className={classString}
       style={style}
       onMouseEnter={onMouseEnter}

package.json

@@ -136,10 +136,10 @@
     "rc-menu": "~9.9.2",
     "rc-motion": "^2.7.3",
     "rc-notification": "~5.0.4",
-    "rc-pagination": "~3.4.2",
-    "rc-picker": "~3.7.4",
+    "rc-pagination": "~3.5.0",
+    "rc-picker": "~3.8.0",
     "rc-progress": "~3.4.1",
-    "rc-rate": "~2.11.2",
+    "rc-rate": "~2.12.0",
     "rc-resize-observer": "^1.2.0",
     "rc-segmented": "~2.2.0",
     "rc-select": "~14.5.0",