Self review cleanup

Author: KoolADE85

CHANGELOG.md

@@ -6,6 +6,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ## Added
 - Modernized `dcc.Tabs`
+- Modernized `dcc.DatePickerSingle` and `dcc.DatePickerRange`
 
 ## Changed
 - `dcc.Tab` now accepts a `width` prop which can be a pixel or percentage width for an individual tab.
@@ -50,7 +51,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 - [#3347](https://github.com/plotly/dash/pull/3347) Added 'api_endpoint' to `callback` to expose api endpoints at the provided path for use to be executed directly without dash.
 - [#3445](https://github.com/plotly/dash/pull/3445) Added API to reverse direction of slider component.
 - [#3460](https://github.com/plotly/dash/pull/3460) Add `/health` endpoint for server monitoring and health checks.
-- [#3465](https://github.com/plotly/dash/pull/3465) Plotly cloud integrations, add devtool API, placeholder plotly cloud CLI & publish button, `dash[cloud]` extra dependencies. 
+- [#3465](https://github.com/plotly/dash/pull/3465) Plotly cloud integrations, add devtool API, placeholder plotly cloud CLI & publish button, `dash[cloud]` extra dependencies.
 
 ## Fixed
 - [#3395](https://github.com/plotly/dash/pull/3395) Fix Components added through set_props() cannot trigger related callback functions. Fix [#3316](https://github.com/plotly/dash/issues/3316)

components/dash-core-components/package-lock.json

@@ -57,7 +57,6 @@
     "prop-types": "^15.8.1",
     "ramda": "^0.30.1",
     "react-addons-shallow-compare": "^15.6.3",
-    "react-dates": "^21.8.0",
     "react-docgen": "^5.4.3",
     "react-dropzone": "^4.1.2",
     "react-fast-compare": "^3.2.2",

components/dash-core-components/package.json

@@ -4,7 +4,6 @@ import Clipboard from './components/Clipboard.react';
 import ConfirmDialog from './components/ConfirmDialog.react';
 import ConfirmDialogProvider from './components/ConfirmDialogProvider.react';
 import DatePickerRange from './components/DatePickerRange';
-// import DatePickerRange from './components/DatePickerRange.react';
 import DatePickerSingle from './components/DatePickerSingle';
 import Download from './components/Download.react';
 import Dropdown from './components/Dropdown';
@@ -27,8 +26,6 @@ import Tooltip from './components/Tooltip';
 import Upload from './components/Upload.react';
 
 import './components/css/dcc.css';
-import 'react-dates/lib/css/_datepicker.css';
-import './components/css/react-dates@20.1.0-fix.css';
 
 export {
     Checklist,

components/dash-core-components/src/index.ts

@@ -213,10 +213,10 @@ describe('Calendar', () => {
             expectedFocusedDay: '23',
         },
         {
-            description: 'first day when selected date is not visible',
+            description: 'selected date even when not initially visible',
             visibleMonth: new Date(2020, 0, 1),
             selectedDate: new Date(2025, 9, 17),
-            expectedFocusedDay: '1',
+            expectedFocusedDay: '17', // Calendar switches to October 2025
         },
         {
             description: 'first day when no date is selected',
@@ -227,14 +227,22 @@ describe('Calendar', () => {
     ])(
         'focuses $description',
         ({visibleMonth, selectedDate, expectedFocusedDay}) => {
+            const ref = React.createRef<any>();
             render(
                 <Calendar
+                    ref={ref}
                     onSelectionChange={mockOnSelectionChange}
                     initialVisibleDate={visibleMonth}
                     selectionStart={selectedDate}
                 />
             );
 
+            // Imperatively focus the appropriate date
+            const dateToFocus = selectedDate || visibleMonth;
+            act(() => {
+                ref.current?.focusDate(dateToFocus);
+            });
+
             const focusedElement = document.activeElement;
             expect(focusedElement?.tagName).toBe('TD');
             expect(focusedElement?.textContent).toBe(expectedFocusedDay);

components/dash-core-components/tests/unit/calendar/Calendar.test.tsx

@@ -13,11 +13,7 @@ describe('CalendarDay', () => {
                 </tbody>
             </table>
         );
-        const td = container.querySelector('td');
-        if (!td) {
-            throw new Error('td element not rendered');
-        }
-        return td;
+        return container.querySelector('td')!;
     };
 
     it('renders with correct label and inside/outside classes', () => {
@@ -26,32 +22,22 @@ describe('CalendarDay', () => {
             isOutside: false,
             showOutsideDays: true,
         });
-        expect(insideDay.textContent).toBe('15');
-        expect(
-            insideDay.classList.contains('dash-datepicker-calendar-date-inside')
-        ).toBe(true);
-        expect(
-            insideDay.classList.contains(
-                'dash-datepicker-calendar-date-outside'
-            )
-        ).toBe(false);
+        expect(insideDay).toHaveTextContent('15');
+        expect(insideDay).toHaveClass('dash-datepicker-calendar-date-inside');
+        expect(insideDay).not.toHaveClass(
+            'dash-datepicker-calendar-date-outside'
+        );
 
         const outsideDay = renderDay({
             date: new Date(2024, 11, 31),
             isOutside: true,
             showOutsideDays: true,
         });
-        expect(outsideDay.textContent).toBe('31');
-        expect(
-            outsideDay.classList.contains(
-                'dash-datepicker-calendar-date-outside'
-            )
-        ).toBe(true);
-        expect(
-            outsideDay.classList.contains(
-                'dash-datepicker-calendar-date-inside'
-            )
-        ).toBe(false);
+        expect(outsideDay).toHaveTextContent('31');
+        expect(outsideDay).toHaveClass('dash-datepicker-calendar-date-outside');
+        expect(outsideDay).not.toHaveClass(
+            'dash-datepicker-calendar-date-inside'
+        );
     });
 
     it('marks disabled day with correct attributes', () => {
@@ -62,11 +48,9 @@ describe('CalendarDay', () => {
             isDisabled: true,
         });
 
-        expect(
-            td.classList.contains('dash-datepicker-calendar-date-disabled')
-        ).toBe(true);
-        expect(td.getAttribute('aria-disabled')).toBe('true');
-        expect(td.getAttribute('tabIndex')).toBeNull();
+        expect(td).toHaveClass('dash-datepicker-calendar-date-disabled');
+        expect(td).toHaveAttribute('aria-disabled', 'true');
+        expect(td).not.toHaveAttribute('tabIndex');
     });
 
     it('hides label for outside days when showOutsideDays is false', () => {
@@ -76,10 +60,8 @@ describe('CalendarDay', () => {
             showOutsideDays: false,
         });
 
-        expect(td.textContent).toBe('');
-        expect(
-            td.classList.contains('dash-datepicker-calendar-date-outside')
-        ).toBe(true);
+        expect(td).toHaveTextContent('');
+        expect(td).toHaveClass('dash-datepicker-calendar-date-outside');
     });
 
     it('focuses element when isFocused is true', () => {

components/dash-core-components/tests/unit/calendar/CalendarDay.test.tsx

@@ -14,19 +14,11 @@ describe('CalendarDayPadding', () => {
             </table>
         );
         const td = container.querySelector('td');
-        if (!td) {
-            throw new Error('td element not rendered');
-        }
 
-        expect(td.classList.contains('dash-datepicker-calendar-padding')).toBe(
-            true
-        );
-        expect(
-            td.classList.contains('dash-datepicker-calendar-date-inside')
-        ).toBe(false);
-        expect(
-            td.classList.contains('dash-datepicker-calendar-date-outside')
-        ).toBe(false);
-        expect(td.textContent).toBe('');
+        expect(td).toBeInTheDocument();
+        expect(td).toHaveClass('dash-datepicker-calendar-padding');
+        expect(td).not.toHaveClass('dash-datepicker-calendar-date-inside');
+        expect(td).not.toHaveClass('dash-datepicker-calendar-date-outside');
+        expect(td).toHaveTextContent('');
     });
 });

components/dash-core-components/tests/unit/calendar/CalendarDayPadding.test.tsx

@@ -102,13 +102,9 @@ describe('CalendarMonth', () => {
             td => td.textContent?.trim() || ''
         );
 
-        // Behavior 1: When showOutsideDays=true, all cells should be labeled (no empty labels)
-        // Find cells that are in the actual calendar rows (not ghost rows)
         const labeledCells = cellTexts.filter(text => text !== '');
 
-        // Behavior 2: Days before January 1 should be labeled (December days)
-        // First 2 cells should be December days (30, 31)
-        // January 1, 2025 is Wednesday, which is 2 days after Monday
+        // First 2 cells should be December days (30, 31), then January 1
         expect(cellTexts[0]).toBe('30');
         expect(cellTexts[1]).toBe('31');