Pull in the changes made in react-component/picker

.github/workflows/main.yml

@@ -1,40 +1,37 @@
 name: CI
 
-on:
-  push:
-    branches: [master]
-  pull_request:
-    branches: [master]
+on: ['push', 'pull_request']
 
 jobs:
   setup:
     runs-on: ubuntu-latest
     steps:
       - name: checkout
-        uses: actions/checkout@master
+        uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v4
         with:
-          node-version: '16'
+          node-version: '20'
 
       - name: cache package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: create package-lock.json
-        run: npm i --package-lock-only
+        run: npm i --package-lock-only --ignore-scripts
 
       - name: hack for singe file
         run: |
           if [ ! -d "package-temp-dir" ]; then
             mkdir package-temp-dir
           fi
           cp package-lock.json package-temp-dir
+
       - name: cache node_modules
         id: node_modules_cache_id
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@@ -47,16 +44,16 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: checkout
-        uses: actions/checkout@master
+        uses: actions/checkout@v4
 
       - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@@ -70,16 +67,16 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: checkout
-        uses: actions/checkout@master
+        uses: actions/checkout@v4
 
       - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@@ -93,21 +90,26 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: checkout
-        uses: actions/checkout@master
+        uses: actions/checkout@v4
 
       - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
 
       - name: coverage
-        run: npm test -- --coverage && bash <(curl -s https://codecov.io/bash)
+        run: npm test -- --coverage
+
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v4
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
 
-    needs: setup
+    needs: setup

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-picker",
-  "version": "4.6.12",
+  "version": "4.6.13",
   "description": "React date & time picker",
   "keywords": [
     "react",

src/PickerInput/RangePicker.tsx

@@ -428,7 +428,12 @@ function RangePicker<DateType extends object = any>(
 
   // ======================== Click =========================
   const onSelectorClick: React.MouseEventHandler<HTMLDivElement> = (event) => {
-    if (!selectorRef.current.nativeElement.contains(document.activeElement)) {
+    const rootNode = (event.target as HTMLElement).getRootNode();
+    if (
+      !selectorRef.current.nativeElement.contains(
+        (rootNode as Document | ShadowRoot).activeElement ?? document.activeElement,
+      )
+    ) {
       // Click to focus the enabled input
       const enabledIndex = disabled.findIndex((d) => !d);
       if (enabledIndex >= 0) {

src/generate/luxon.ts

@@ -25,7 +25,8 @@ const normalizeFormatPart = (part: string): string =>
     .replace(/D/g, 'd')
     .replace(/gg/g, 'kk')
     .replace(/Q/g, 'q')
-    .replace(/([Ww])o/g, 'WW');
+    .replace(/([Ww])o/g, 'WW')
+    .replace(/A/g, 'a');
 
 /**
  * Normalizes a moment compatible format string to a luxon compatible format string

tests/range.spec.tsx

@@ -1,6 +1,7 @@
 // Note: zombieJ refactoring
 
 import { act, createEvent, fireEvent, render } from '@testing-library/react';
+import { createRoot } from 'react-dom/client';
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
 import KeyCode from 'rc-util/lib/KeyCode';
@@ -1973,4 +1974,32 @@ describe('Picker.Range', () => {
     ]);
     expect(isOpen()).toBeFalsy();
   });
+
+  const renderShadow = (props?: any) => {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+
+    const shadowRoot = host.attachShadow({
+      mode: 'open',
+      delegatesFocus: false,
+    });
+    const container = document.createElement('div');
+    shadowRoot.appendChild(container);
+
+    act(() => {
+      createRoot(container).render(<DayRangePicker {...props} />);
+    });
+
+    return shadowRoot;
+  };
+
+  it('the end date selector can be selected in shadow dom', () => {
+    const shadowRoot = renderShadow();
+
+    openPicker(shadowRoot, 1);
+
+    expect(shadowRoot.querySelectorAll('.rc-picker-input')[1]).toHaveClass(
+      'rc-picker-input-active',
+    );
+  });
 });

tests/util/commonUtil.tsx

@@ -112,7 +112,7 @@ export async function waitFakeTimer() {
   });
 }
 
-export function openPicker(container: HTMLElement, index = 0) {
+export function openPicker(container: HTMLElement | ShadowRoot, index = 0) {
   const input = container.querySelectorAll('input')[index];
   fireEvent.mouseDown(input);
 
@@ -123,7 +123,7 @@ export function openPicker(container: HTMLElement, index = 0) {
   fireEvent.click(input);
 }
 
-export function closePicker(container: HTMLElement, index = 0) {
+export function closePicker(container: HTMLElement | ShadowRoot, index = 0) {
   const input = container.querySelectorAll('input')[index];
   fireEvent.blur(input);
 
@@ -236,11 +236,9 @@ const dateFnsLocale = {
   generateConfig: dateFnsGenerateConfig,
 };
 
-type DateFnsSinglePickerProps = Omit<PickerProps<Date>, 'locale' | 'generateConfig'> & React.RefAttributes<PickerRef>;
+type DateFnsSinglePickerProps = Omit<PickerProps<Date>, 'locale' | 'generateConfig'> &
+  React.RefAttributes<PickerRef>;
 
 export const DateFnsSinglePicker = (props: DateFnsSinglePickerProps) => {
-  return <SinglePicker
-    {...dateFnsLocale}
-    {...props}
-  />
-}
+  return <SinglePicker {...dateFnsLocale} {...props} />;
+};