feat:Using the showScrollBar property of the List component (#1122)

* feat:Using the showScrollBar property of the List component

* feat：调整单测

---------

Co-authored-by: 刘欢 <[email protected]>

Author: EmilyyyLiu

src/BaseSelect/index.tsx

@@ -136,7 +136,7 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri
   tagRender?: (props: CustomTagProps) => React.ReactElement;
   direction?: 'ltr' | 'rtl';
   maxLength?: number;
-
+  showScrollBar?: boolean | 'optional';
   // MISC
   tabIndex?: number;
   autoFocus?: boolean;
@@ -223,6 +223,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
     className,
     showSearch,
     tagRender,
+    showScrollBar = 'optional',
     direction,
     omitDomProps,
 
@@ -693,8 +694,19 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
       showSearch: mergedShowSearch,
       multiple,
       toggleOpen: onToggleOpen,
+      showScrollBar,
     }),
-    [props, notFoundContent, triggerOpen, mergedOpen, id, mergedShowSearch, multiple, onToggleOpen],
+    [
+      props,
+      notFoundContent,
+      triggerOpen,
+      mergedOpen,
+      id,
+      mergedShowSearch,
+      multiple,
+      onToggleOpen,
+      showScrollBar,
+    ],
   );
 
   // ==================================================================

src/OptionList.tsx

@@ -44,6 +44,7 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
     toggleOpen,
     notFoundContent,
     onPopupScroll,
+    showScrollBar,
   } = useBaseProps();
   const {
     maxCount,
@@ -325,6 +326,7 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
         virtual={virtual}
         direction={direction}
         innerProps={virtual ? null : a11yProps}
+        showScrollBar={showScrollBar}
       >
         {(item, itemIndex) => {
           const { group, groupOption, data, label, value } = item;

tests/OptionList.test.tsx

@@ -6,7 +6,9 @@ import OptionList from '../src/OptionList';
 import SelectContext from '../src/SelectContext';
 import { fillFieldNames, flattenOptions } from '../src/utils/valueUtil';
 import { injectRunAllTimers } from './utils/common';
-import { createEvent, fireEvent, render } from '@testing-library/react';
+import { createEvent, fireEvent, render, waitFor } from '@testing-library/react';
+import Select from '../src';
+import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
 
 jest.mock('../src/utils/platformUtil');
 
@@ -459,4 +461,74 @@ describe('OptionList', () => {
     });
     expect(onActiveValue).not.toHaveBeenCalledWith('3', expect.anything(), expect.anything());
   });
+
+  describe('List.ScrollBar', () => {
+    let mockElement;
+    let boundingRect = {
+      top: 0,
+      bottom: 0,
+      width: 100,
+      height: 50,
+    };
+
+    beforeAll(() => {
+      mockElement = spyElementPrototypes(HTMLElement, {
+        offsetHeight: {
+          get: () => 100,
+        },
+        clientHeight: {
+          get: () => 50,
+        },
+        getBoundingClientRect: () => boundingRect,
+        offsetParent: {
+          get: () => document.body,
+        },
+      });
+    });
+
+    afterAll(() => {
+      mockElement.mockRestore();
+    });
+
+    beforeEach(() => {
+      boundingRect = {
+        top: 0,
+        bottom: 0,
+        width: 100,
+        height: 50,
+      };
+      jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
+    it('should show scrollbar when showScrollBar is true', async () => {
+      const options = Array.from({ length: 10 }, (_, index) => ({
+        label: `${index + 1}`,
+        value: `${index + 1}`,
+      }));
+
+      const { container } = render(<Select open showScrollBar options={options} />);
+
+      await waitFor(() => {
+        const scrollbarElement = container.querySelector('.rc-virtual-list-scrollbar-visible');
+        expect(scrollbarElement).not.toBeNull();
+      });
+    });
+    it('not have scrollbar when showScrollBar is false', async () => {
+      const options = Array.from({ length: 10 }, (_, index) => ({
+        label: `${index + 1}`,
+        value: `${index + 1}`,
+      }));
+
+      const { container } = render(<Select open showScrollBar={false} options={options} />);
+
+      await waitFor(() => {
+        const scrollbarElement = container.querySelector('.rc-virtual-list-scrollbar-visible');
+        expect(scrollbarElement).toBeNull();
+      });
+    });
+  });
 });