Merge branch 'main' into add-dropdown-keyboard-accessibility

Author: martijnrusschen

.github/workflows/security.yml

@@ -0,0 +1,22 @@
+name: Security Review
+
+permissions:
+  pull-requests: write  # Needed for leaving PR comments
+  contents: read
+
+on:
+  pull_request:
+
+jobs:
+  security:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
+          fetch-depth: 2
+      
+      - uses: anthropics/claude-code-security-review@main
+        with:
+          comment-pr: true
+          claude-api-key: ${{ secrets.CLAUDE_API_KEY }}

docs-site/package.json

@@ -8,9 +8,9 @@
     "highlight.js": "^11.11.1",
     "lodash": "^4.17.21",
     "prism-react-renderer": "^2.4.1",
-    "react": "^19.1.0",
+    "react": "^19.1.1",
     "react-datepicker": "portal:../",
-    "react-dom": "^19.1.0",
+    "react-dom": "^19.1.1",
     "react-live": "^4.1.8",
     "slugify": "^1.6.6"
   },
@@ -21,17 +21,17 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@eslint/js": "^9.29.0",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
-    "@vitejs/plugin-react": "^4.6.0",
-    "eslint": "^9.29.0",
+    "@eslint/js": "^9.33.0",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^5.0.0",
+    "eslint": "^9.33.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^6.0.0",
     "eslint-plugin-react-refresh": "^0.4.20",
-    "globals": "^16.2.0",
-    "sass": "^1.89.2",
-    "vite": "^6.3.5"
+    "globals": "^16.3.0",
+    "sass": "^1.90.0",
+    "vite": "^7.1.2"
   },
   "packageManager": "[email protected]"
 }

docs-site/src/components/Examples/examples.scss

@@ -133,6 +133,11 @@
   color: #f00;
 }
 
+.react-datepicker__week.highlighted {
+  background-color: #ddffdd;
+  border-radius: 5px;
+}
+
 .example-custom-input {
   cursor: pointer;
   padding: 5px 15px;

docs-site/src/components/Examples/index.jsx

@@ -18,6 +18,7 @@ import CustomDateFormat from "../../examples/customDateFormat?raw";
 import CustomClassName from "../../examples/customClassName?raw";
 import CustomCalendarClassName from "../../examples/customCalendarClassName?raw";
 import CustomDayClassName from "../../examples/customDayClassName?raw";
+import CustomWeekClassName from "../../examples/customWeekClassName?raw";
 import CustomTimeClassName from "../../examples/customTimeClassName?raw";
 import Today from "../../examples/today?raw";
 import PlaceholderText from "../../examples/placeholderText?raw";
@@ -100,6 +101,7 @@ import CustomTimeInput from "../../examples/customTimeInput?raw";
 import CloseOnScroll from "../../examples/closeOnScroll?raw";
 import CloseOnScrollCallback from "../../examples/closeOnScrollCallback?raw";
 import SelectsRange from "../../examples/selectsRange?raw";
+import SelectsRangeWithCustomSeparator from "../../examples/customRangeSeparator?raw";
 import selectsRangeWithDisabledDates from "../../examples/selectsRangeWithDisabledDates?raw";
 import CalendarStartDay from "../../examples/calendarStartDay?raw";
 import ExternalForm from "../../examples/externalForm?raw";
@@ -222,6 +224,10 @@ export default class exampleComponents extends React.Component {
       title: "Custom day class name",
       component: CustomDayClassName,
     },
+    {
+      title: "Custom week class name",
+      component: CustomWeekClassName,
+    },
     {
       title: "Custom date format",
       component: CustomDateFormat,
@@ -242,6 +248,10 @@ export default class exampleComponents extends React.Component {
       title: "Date range for one datepicker",
       component: SelectsRange,
     },
+    {
+      title: "Date range for one datepicker with custom range separator",
+      component: SelectsRangeWithCustomSeparator,
+    },
     {
       title: "Date range for one datepicker with disabled dates highlighted",
       component: selectsRangeWithDisabledDates,

docs-site/src/examples/customRangeSeparator.js

@@ -0,0 +1,21 @@
+() => {
+  const [startDate, setStartDate] = useState(new Date());
+  const [endDate, setEndDate] = useState(addDays(new Date(), 3));
+
+  const onChange = (dates) => {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
+  };
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={onChange}
+      startDate={startDate}
+      endDate={endDate}
+      selectsRange
+      rangeSeparator=" to "
+    />
+  );
+};

docs-site/src/examples/customWeekClassName.js

@@ -0,0 +1,12 @@
+() => {
+  const [selectedDate, setSelectedDate] = useState(new Date());
+  return (
+    <DatePicker
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
+      weekClassName={(date) =>
+        getDate(date) % 2 === 0 ? "highlighted" : undefined
+      }
+    />
+  );
+};

docs-site/vite.config.js

@@ -1,6 +1,17 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      // Ensure single React instance to avoid "Invalid hook call" errors
+      react: path.resolve(__dirname, "node_modules/react"),
+      "react-dom": path.resolve(__dirname, "node_modules/react-dom"),
+    },
+  },
 });