Merge branch 'main' into react-18-deprecations

Hacker0x01 · Oct 9, 2023 · b94eb4a · b94eb4a
2 parents 0d1e38a + 8b28bb7
commit b94eb4a
Show file tree

Hide file tree

Showing 73 changed files with 4,980 additions and 3,566 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -13,7 +13,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x] # we need to use node version 16 as we use Karma (#4107)
+        node-version: [18.x]
 
     steps:
       - uses: actions/checkout@v3

diff --git a/.babelrc.js → babel.config.js b/.babelrc.js → babel.config.js
diff --git a/docs-site/config-overrides.js b/docs-site/config-overrides.js
@@ -11,7 +11,7 @@ module.exports = function override(config, env) {
     use: "raw-loader",
   });
   config.resolve.plugins = config.resolve.plugins.filter(
-    (plugin) => !(plugin instanceof ModuleScopePlugin)
+    (plugin) => !(plugin instanceof ModuleScopePlugin),
   );
   // Enable it, so that our custom .eslintrc for the examples will work
   for (let i = 0; i < config.module.rules.length; i++) {

diff --git a/docs-site/package.json b/docs-site/package.json
@@ -33,6 +33,6 @@
   },
   "devDependencies": {
     "raw-loader": "^4.0.2",
-    "sass": "^1.64.2"
+    "sass": "^1.69.0"
   }
 }
diff --git a/docs-site/public/index.html b/docs-site/public/index.html
@@ -9,6 +9,9 @@
   <meta name="keywords" content="React, HTML, CSS, JavaScript, JSX, date, datepicker">
   <title>React Datepicker crafted by HackerOne</title>
   <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
+    integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
 
 <body>

diff --git a/docs-site/src/components/Examples/index.js b/docs-site/src/components/Examples/index.js
@@ -31,6 +31,7 @@ import ExcludeDates from "../../examples/excludeDates";
 import ExcludeDateIntervals from "../../examples/excludeDateIntervals";
 import ExcludeDatesMonthPicker from "../../examples/excludeDatesMonthPicker";
 import HighlightDates from "../../examples/highlightDates";
+import HolidayDates from "../../examples/holidayDates";
 import HighlightDatesRanges from "../../examples/highlightDatesRanges";
 import IncludeDates from "../../examples/includeDates";
 import IncludeDateIntervals from "../../examples/includeDateIntervals";
@@ -98,6 +99,8 @@ import selectsRangeWithDisabledDates from "../../examples/selectsRangeWithDisabl
 import CalendarStartDay from "../../examples/calendarStartDay";
 import ExternalForm from "../../examples/externalForm";
 import CalendarIcon from "../../examples/calendarIcon";
+import CalendarIconExternal from "../../examples/calendarIconExternal";
+import CalendarIconSvgIcon from "../../examples/calendarIconSvgIcon";
 
 import "./style.scss";
 import "react-datepicker/dist/react-datepicker.css";
@@ -117,6 +120,14 @@ export default class exampleComponents extends React.Component {
       title: "Calendar Icon",
       component: CalendarIcon,
     },
+    {
+      title: "Calendar Icon using React Svg Component",
+      component: CalendarIconSvgIcon,
+    },
+    {
+      title: "Calendar Icon using External Lib",
+      component: CalendarIconExternal,
+    },
     {
       title: "Calendar container",
       component: CalendarContainer,
@@ -289,6 +300,10 @@ export default class exampleComponents extends React.Component {
       title: "Highlight dates with custom class names and ranges",
       component: HighlightDatesRanges,
     },
+    {
+      title: "Holiday dates",
+      component: HolidayDates,
+    },
     {
       title: "Include dates",
       component: IncludeDates,
@@ -526,7 +541,7 @@ export default class exampleComponents extends React.Component {
                 onClick={(e) =>
                   this.handleAnchorClick(
                     e,
-                    `example-${slugify(example.title, { lower: true })}`
+                    `example-${slugify(example.title, { lower: true })}`,
                   )
                 }
               >

diff --git a/docs-site/src/examples/calendarIconExternal.js b/docs-site/src/examples/calendarIconExternal.js
@@ -0,0 +1,11 @@
+() => {
+  const [startDate, setStartDate] = useState(new Date());
+  return (
+    <DatePicker
+      showIcon
+      selected={startDate}
+      onChange={(date) => setStartDate(date)}
+      icon="fa fa-calendar"
+    />
+  );
+};
diff --git a/docs-site/src/examples/calendarIconSvgIcon.js b/docs-site/src/examples/calendarIconSvgIcon.js
@@ -0,0 +1,33 @@
+() => {
+  const [startDate, setStartDate] = useState(new Date());
+  return (
+    <DatePicker
+      showIcon
+      selected={startDate}
+      onChange={(date) => setStartDate(date)}
+      icon={
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          viewBox="0 0 48 48"
+        >
+          <mask id="ipSApplication0">
+            <g fill="none" stroke="#fff" strokeLinejoin="round" strokeWidth="4">
+              <path strokeLinecap="round" d="M40.04 22v20h-32V22"></path>
+              <path
+                fill="#fff"
+                d="M5.842 13.777C4.312 17.737 7.263 22 11.51 22c3.314 0 6.019-2.686 6.019-6a6 6 0 0 0 6 6h1.018a6 6 0 0 0 6-6c0 3.314 2.706 6 6.02 6c4.248 0 7.201-4.265 5.67-8.228L39.234 6H8.845l-3.003 7.777Z"
+              ></path>
+            </g>
+          </mask>
+          <path
+            fill="currentColor"
+            d="M0 0h48v48H0z"
+            mask="url(#ipSApplication0)"
+          ></path>
+        </svg>
+      }
+    />
+  );
+};
diff --git a/docs-site/src/examples/excludeTimePeriod.js b/docs-site/src/examples/excludeTimePeriod.js
@@ -1,6 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(
-    setHours(setMinutes(new Date(), 30), 17)
+    setHours(setMinutes(new Date(), 30), 17),
   );
   return (
     <DatePicker

diff --git a/docs-site/src/examples/excludeTimes.js b/docs-site/src/examples/excludeTimes.js
@@ -1,6 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(
-    setHours(setMinutes(new Date(), 30), 16)
+    setHours(setMinutes(new Date(), 30), 16),
   );
   return (
     <DatePicker

diff --git a/docs-site/src/examples/filterTimes.js b/docs-site/src/examples/filterTimes.js
@@ -1,6 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(
-    setHours(setMinutes(new Date(), 0), 9)
+    setHours(setMinutes(new Date(), 0), 9),
   );
   const filterPassedTime = (time) => {
     const currentDate = new Date();

diff --git a/docs-site/src/examples/holidayDates.js b/docs-site/src/examples/holidayDates.js
@@ -0,0 +1,18 @@
+() => {
+  const [startDate, setStartDate] = useState(new Date());
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date) => setStartDate(date)}
+      holidays={[
+        { date: "2023-08-15", holidayName: "India's Independence Day" },
+        { date: "2023-12-31", holidayName: "New Year's Eve" },
+        { date: "2023-12-25", holidayName: "Christmas" },
+        { date: "2024-01-01", holidayName: "New Year's Day" },
+        { date: "2023-11-23", holidayName: "Thanksgiving Day" },
+        { date: "2023-12-25", holidayName: "Fake holiday" },
+      ]}
+      placeholderText="This display holidays"
+    />
+  );
+};
diff --git a/docs-site/src/examples/includeTimes.js b/docs-site/src/examples/includeTimes.js
@@ -1,6 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(
-    setHours(setMinutes(new Date(), 30), 16)
+    setHours(setMinutes(new Date(), 30), 16),
   );
   return (
     <DatePicker

diff --git a/docs-site/src/examples/injectTimes.js b/docs-site/src/examples/injectTimes.js
@@ -1,6 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(
-    setHours(setMinutes(new Date(), 30), 16)
+    setHours(setMinutes(new Date(), 30), 16),
   );
   return (
     <DatePicker

diff --git a/docs-site/yarn.lock b/docs-site/yarn.lock
@@ -7755,10 +7755,10 @@ sass-loader@^12.3.0:
     klona "^2.0.4"
     neo-async "^2.6.2"
 
-sass@^1.64.2:
-  version "1.64.2"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.64.2.tgz#0d9805ad6acf31c59c3acc725fcfb91b7fcc6909"
-  integrity sha512-TnDlfc+CRnUAgLO9D8cQLFu/GIjJIzJCGkE7o4ekIGQOH7T3GetiRR/PsTWJUHhkzcSPrARkPI+gNWn5alCzDg==
+sass@^1.69.0:
+  version "1.69.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.69.0.tgz#5195075371c239ed556280cf2f5944d234f42679"
+  integrity sha512-l3bbFpfTOGgQZCLU/gvm1lbsQ5mC/WnLz3djL2v4WCJBDrWm58PO+jgngcGRNnKUh6wSsdm50YaovTqskZ0xDQ==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"

diff --git a/docs/calendar_icon.md b/docs/calendar_icon.md
@@ -0,0 +1,6 @@
+# `calendar_icon` (component)
+
+| name        | type                  | default value | description |
+| ----------- | --------------------- | ------------- | ----------- |
+| `className` | `string`              | `""`          |             |
+| `icon`      | `union(string\|node)` |               |             |