feat: add List ScrollBar direction (#940)

* feat: add List ScrollBar direction

* chore: update snapshots

* chore: empty test

* test: update test case

---------

Co-authored-by: 洋 <hetongyang@bytedance.com>
Co-authored-by: 二货机器人 <smith3816@gmail.com>

package.json

@@ -50,7 +50,7 @@
     "rc-motion": "^2.0.1",
     "rc-overflow": "^1.0.0",
     "rc-util": "^5.16.1",
-    "rc-virtual-list": "^3.4.13"
+    "rc-virtual-list": "^3.5.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",

src/OptionList.tsx

@@ -53,6 +53,7 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
     rawValues,
     fieldNames,
     virtual,
+    direction,
     listHeight,
     listItemHeight,
   } = React.useContext(SelectContext);
@@ -297,6 +298,7 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
         onMouseDown={onListMouseDown}
         onScroll={onPopupScroll}
         virtual={virtual}
+        direction={direction}
         innerProps={virtual ? null : a11yProps}
       >
         {(item, itemIndex) => {

src/Select.tsx

@@ -140,6 +140,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
   options?: OptionType[];
   defaultActiveFirstOption?: boolean;
   virtual?: boolean;
+  direction?: "ltr" | "rtl";
   listHeight?: number;
   listItemHeight?: number;
 
@@ -187,6 +188,7 @@ const Select = React.forwardRef(
       defaultActiveFirstOption,
       menuItemSelectedIcon,
       virtual,
+      direction,
       listHeight = 200,
       listItemHeight = 20,
 
@@ -584,6 +586,7 @@ const Select = React.forwardRef(
         rawValues,
         fieldNames: mergedFieldNames,
         virtual: realVirtual,
+        direction,
         listHeight,
         listItemHeight,
         childrenAsData,
@@ -626,6 +629,8 @@ const Select = React.forwardRef(
           // >>> Values
           displayValues={displayValues}
           onDisplayValuesChange={onDisplayValuesChange}
+          // >>> Trigger
+          direction={direction}
           // >>> Search
           searchValue={mergedSearchValue}
           onSearch={onInternalSearch}

src/SelectContext.ts

@@ -14,6 +14,7 @@ export interface SelectContextProps {
   rawValues: Set<RawValueType>;
   fieldNames?: FieldNames;
   virtual?: boolean;
+  direction?: "ltr" | "rtl";
   listHeight?: number;
   listItemHeight?: number;
   childrenAsData?: boolean;

tests/Select.test.tsx

@@ -1980,4 +1980,11 @@ describe('Select.Basic', () => {
     expect(wrapper3.find('.rc-select').prop('title')).toBe('title');
     expect(wrapper3.find('.rc-select-selection-item').prop('title')).toBe('title');
   });
+
+  it('scrollbar should be left position with rtl direction', () => {
+    const options = new Array(10).fill(null).map((_, value) => ({ value }));
+
+    const { container } = testingRender(<Select open direction="rtl" options={options} />);
+    expect(container.querySelector('.rc-virtual-list-rtl')).toBeTruthy();
+  });
 });