diff --git a/.gitignore b/.gitignore index e481cce0e1..4d42a122ac 100644 --- a/.gitignore +++ b/.gitignore @@ -120,4 +120,5 @@ scripts/.DS_Store !.yarn/plugins !.yarn/releases !.yarn/sdks -!.yarn/versions \ No newline at end of file +!.yarn/versions +/.yarn/cache diff --git a/.stylelintrc.json b/.stylelintrc.json index c07d031f59..30fcc905ce 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -5,6 +5,7 @@ "rules": { "at-rule-no-unknown": null, + "at-rule-disallowed-list": ["import"], "scss/at-rule-no-unknown": true, "scss/dollar-variable-pattern": null, "scss/at-import-partial-extension": null, diff --git a/LICENSE b/LICENSE index 6f4a18a7a7..96cc3a7de5 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2014-2024 HackerOne Inc and individual contributors +Copyright (c) 2014-2025 HackerOne Inc and individual contributors Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index e9f9cd4d24..f0244e7a3c 100644 --- a/README.md +++ b/README.md @@ -174,4 +174,4 @@ The examples are hosted within the docs folder and are ran in the simple app tha ## License -Copyright (c) 2014-2024 HackerOne Inc. and individual contributors. Licensed under MIT license, see [LICENSE](LICENSE) for the full license. +Copyright (c) 2014-2025 HackerOne Inc. and individual contributors. Licensed under MIT license, see [LICENSE](LICENSE) for the full license. diff --git a/docs-site/package.json b/docs-site/package.json index c0c3ba4f97..87287d52e3 100644 --- a/docs-site/package.json +++ b/docs-site/package.json @@ -3,10 +3,10 @@ "version": "0.1.0", "private": true, "dependencies": { - "highlight.js": "^11.10.0", - "react": "^18.3.1", - "react-dom": "^18.3.1", - "react-live": "^4.1.7" + "highlight.js": "^11.11.1", + "react": "^19.0.0", + "react-dom": "^19.0.0", + "react-live": "^4.1.8" }, "scripts": { "start": "react-app-rewired start", @@ -29,10 +29,10 @@ "raw-loader": "^4.0.2", "react-app-rewired": "^2.2.1", "react-scripts": "5.0.1", - "sass": "^1.80.2" + "sass": "^1.83.1" }, "resolutions": { "strip-ansi": "6.0.1" }, - "packageManager": "yarn@4.3.1" + "packageManager": "yarn@4.6.0" } diff --git a/docs-site/src/components/Examples/examples.scss b/docs-site/src/components/Examples/examples.scss index 05734e9510..9c38c04cec 100644 --- a/docs-site/src/components/Examples/examples.scss +++ b/docs-site/src/components/Examples/examples.scss @@ -1,7 +1,9 @@ +@use "helpers"; + .examples__navigation { display: none; - @include breakpoint(640px) { + @include helpers.breakpoint(640px) { width: 200px; float: left; display: block; @@ -76,7 +78,7 @@ overflow-x: auto; overflow-y: hidden; - @include breakpoint(768px) { + @include helpers.breakpoint(768px) { width: 70%; border-top-right-radius: 4px; border-bottom-right-radius: 4px; @@ -98,7 +100,7 @@ } &__preview { padding: 20px; - @include breakpoint(768px) { + @include helpers.breakpoint(768px) { width: 30%; } @media (max-width: 768px) { diff --git a/docs-site/src/components/Examples/breakpoint.scss b/docs-site/src/components/Examples/helpers.scss similarity index 58% rename from docs-site/src/components/Examples/breakpoint.scss rename to docs-site/src/components/Examples/helpers.scss index 8627020aa2..b0c92df44d 100644 --- a/docs-site/src/components/Examples/breakpoint.scss +++ b/docs-site/src/components/Examples/helpers.scss @@ -3,3 +3,8 @@ @content; } } + +%container-styling { + max-width: 1100px; + margin: 0 auto; +} diff --git a/docs-site/src/components/Examples/hero.scss b/docs-site/src/components/Examples/hero.scss index a642bc518d..a9f34dd041 100644 --- a/docs-site/src/components/Examples/hero.scss +++ b/docs-site/src/components/Examples/hero.scss @@ -1,3 +1,5 @@ +@use "helpers" as *; + .hero { color: #fff; background-color: #216ba5; diff --git a/docs-site/src/components/Examples/higlight.scss b/docs-site/src/components/Examples/highlight.scss similarity index 100% rename from docs-site/src/components/Examples/higlight.scss rename to docs-site/src/components/Examples/highlight.scss diff --git a/docs-site/src/components/Examples/style.scss b/docs-site/src/components/Examples/style.scss index 695a00ef85..cb7ad5e36c 100644 --- a/docs-site/src/components/Examples/style.scss +++ b/docs-site/src/components/Examples/style.scss @@ -1,13 +1,8 @@ -@import "reset"; -@import "higlight"; -@import "breakpoint"; -@import "hero"; -@import "examples"; - -%container-styling { - max-width: 1100px; - margin: 0 auto; -} +@use "reset"; +@use "highlight"; +@use "helpers"; +@use "examples"; +@use "hero"; html, body { @@ -88,7 +83,7 @@ strong { } .row { - @include breakpoint(768px) { + @include helpers.breakpoint(768px) { display: flex; } } diff --git a/docs-site/yarn.lock b/docs-site/yarn.lock index 985f27353c..239af9fcbe 100644 --- a/docs-site/yarn.lock +++ b/docs-site/yarn.lock @@ -5038,13 +5038,13 @@ __metadata: linkType: hard "cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.2, cross-spawn@npm:^7.0.3": - version: 7.0.3 - resolution: "cross-spawn@npm:7.0.3" + version: 7.0.5 + resolution: "cross-spawn@npm:7.0.5" dependencies: path-key: "npm:^3.1.0" shebang-command: "npm:^2.0.0" which: "npm:^2.0.1" - checksum: 10c0/5738c312387081c98d69c98e105b6327b069197f864a60593245d64c8089c8a0a744e16349281210d56835bb9274130d825a78b2ad6853ca13cfbeffc0c31750 + checksum: 10c0/aa82ce7ac0814a27e6f2b738c5a7cf1fa21a3558a1e42df449fc96541ba3ba731e4d3ecffa4435348808a86212f287c6f20a1ee551ef1ff95d01cfec5f434944 languageName: node linkType: hard @@ -7157,10 +7157,10 @@ __metadata: languageName: node linkType: hard -"highlight.js@npm:^11.10.0": - version: 11.10.0 - resolution: "highlight.js@npm:11.10.0" - checksum: 10c0/cd8bf7ef06cbd72ddb83580ecabe769f08f062be8bb82d2eb492d31c17f7480d1f8d14a66fc81deee0601645435f19f04c470510563f847242a41ccff0ab873e +"highlight.js@npm:^11.11.1": + version: 11.11.1 + resolution: "highlight.js@npm:11.11.1" + checksum: 10c0/40f53ac19dac079891fcefd5bd8a21cf2e8931fd47da5bd1dca73b7e4375c1defed0636fc39120c639b9c44119b7d110f7f0c15aa899557a5a1c8910f3c0144c languageName: node linkType: hard @@ -7318,8 +7318,8 @@ __metadata: linkType: hard "http-proxy-middleware@npm:^2.0.3": - version: 2.0.6 - resolution: "http-proxy-middleware@npm:2.0.6" + version: 2.0.7 + resolution: "http-proxy-middleware@npm:2.0.7" dependencies: "@types/http-proxy": "npm:^1.17.8" http-proxy: "npm:^1.18.1" @@ -7331,7 +7331,7 @@ __metadata: peerDependenciesMeta: "@types/express": optional: true - checksum: 10c0/25a0e550dd1900ee5048a692e0e9b2b6339d06d487a705d90c47e359e9c6561d648cd7862d001d090e651c9efffa1b6e5160fcf1f299b5fa4935f76e9754eb11 + checksum: 10c0/8d00a61eb215b83826460b07489d8bb095368ec16e02a9d63e228dcf7524e7c20d61561e5476de1391aecd4ec32ea093279cdc972115b311f8e0a95a24c9e47e languageName: node linkType: hard @@ -7430,10 +7430,10 @@ __metadata: languageName: node linkType: hard -"immutable@npm:^4.0.0": - version: 4.3.0 - resolution: "immutable@npm:4.3.0" - checksum: 10c0/e09d40ceb442972f1cbd2914638d1a201853155b8edfbafc44e7aabcf221890e55e8f03d5b3d884666264bf973e02bbf72f83a12b9754bc2c9e47cf8827dd571 +"immutable@npm:^5.0.2": + version: 5.0.2 + resolution: "immutable@npm:5.0.2" + checksum: 10c0/0d97ad95384e49563b6ed68f90e5ea83c149fd96ff417fae8274e1c524e3ef800eb1a2e8009e29d9b8ffdf63affd7692f87c8af72714181aad8dca88747fb5ac languageName: node linkType: hard @@ -8876,7 +8876,7 @@ __metadata: languageName: node linkType: hard -"loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0": +"loose-envify@npm:^1.4.0": version: 1.4.0 resolution: "loose-envify@npm:1.4.0" dependencies: @@ -9292,11 +9292,11 @@ __metadata: linkType: hard "nanoid@npm:^3.3.6": - version: 3.3.6 - resolution: "nanoid@npm:3.3.6" + version: 3.3.8 + resolution: "nanoid@npm:3.3.8" bin: nanoid: bin/nanoid.cjs - checksum: 10c0/606b355960d0fcbe3d27924c4c52ef7d47d3b57208808ece73279420d91469b01ec1dce10fae512b6d4a8c5a5432b352b228336a8b2202a6ea68e67fa348e2ee + checksum: 10c0/4b1bb29f6cfebf3be3bc4ad1f1296fb0a10a3043a79f34fbffe75d1621b4318319211cd420549459018ea3592f0d2f159247a6f874911d6d26eaaadda2478120 languageName: node linkType: hard @@ -10787,15 +10787,15 @@ __metadata: languageName: node linkType: hard -"prism-react-renderer@npm:^2.0.6": - version: 2.3.1 - resolution: "prism-react-renderer@npm:2.3.1" +"prism-react-renderer@npm:^2.4.0": + version: 2.4.0 + resolution: "prism-react-renderer@npm:2.4.0" dependencies: "@types/prismjs": "npm:^1.26.0" clsx: "npm:^2.0.0" peerDependencies: react: ">=16.0.0" - checksum: 10c0/566932127ca18049a651aa038a8f8c7c1ca15950d21b659c2ce71fd95bd03bef2b5d40c489e7aa3453eaf15d984deef542a609d7842e423e6a13427dd90bd371 + checksum: 10c0/3d6969b057da0efe39e3e637bf93601cd5757de5919180e8df16daf1d1b8eedc39b70c7f6f28724fba0a01bc857c6b78312ab027f4e913159d1165c5aba235bb languageName: node linkType: hard @@ -10987,14 +10987,14 @@ __metadata: version: 0.0.0-use.local resolution: "react-datepicker-docs@workspace:." dependencies: - highlight.js: "npm:^11.10.0" + highlight.js: "npm:^11.11.1" raw-loader: "npm:^4.0.2" - react: "npm:^18.3.1" + react: "npm:^19.0.0" react-app-rewired: "npm:^2.2.1" - react-dom: "npm:^18.3.1" - react-live: "npm:^4.1.7" + react-dom: "npm:^19.0.0" + react-live: "npm:^4.1.8" react-scripts: "npm:5.0.1" - sass: "npm:^1.80.2" + sass: "npm:^1.83.1" languageName: unknown linkType: soft @@ -11030,15 +11030,14 @@ __metadata: languageName: node linkType: hard -"react-dom@npm:^18.3.1": - version: 18.3.1 - resolution: "react-dom@npm:18.3.1" +"react-dom@npm:^19.0.0": + version: 19.0.0 + resolution: "react-dom@npm:19.0.0" dependencies: - loose-envify: "npm:^1.1.0" - scheduler: "npm:^0.23.2" + scheduler: "npm:^0.25.0" peerDependencies: - react: ^18.3.1 - checksum: 10c0/a752496c1941f958f2e8ac56239172296fcddce1365ce45222d04a1947e0cc5547df3e8447f855a81d6d39f008d7c32eab43db3712077f09e3f67c4874973e85 + react: ^19.0.0 + checksum: 10c0/a36ce7ab507b237ae2759c984cdaad4af4096d8199fb65b3815c16825e5cfeb7293da790a3fc2184b52bfba7ba3ff31c058c01947aff6fd1a3701632aabaa6a9 languageName: node linkType: hard @@ -11070,17 +11069,17 @@ __metadata: languageName: node linkType: hard -"react-live@npm:^4.1.7": - version: 4.1.7 - resolution: "react-live@npm:4.1.7" +"react-live@npm:^4.1.8": + version: 4.1.8 + resolution: "react-live@npm:4.1.8" dependencies: - prism-react-renderer: "npm:^2.0.6" - sucrase: "npm:^3.31.0" + prism-react-renderer: "npm:^2.4.0" + sucrase: "npm:^3.35.0" use-editable: "npm:^2.3.3" peerDependencies: react: ">=18.0.0" react-dom: ">=18.0.0" - checksum: 10c0/728a51cb0b92774076e4592f9b3cbc2af4afac1da549dbb55723728324bdc1968d3f7b268b5dd92929dcc9d3aa1fd1265f7e912b5ee6fd4fe9b5b77898b50237 + checksum: 10c0/fa96ca176bc9074e4892d6a079b94488ba74e95907ea187678afb17e4a23cc7760c3774ef17f4429d2ba562f1fda852a822e18a161ef386676371c56a7585970 languageName: node linkType: hard @@ -11158,12 +11157,10 @@ __metadata: languageName: node linkType: hard -"react@npm:^18.3.1": - version: 18.3.1 - resolution: "react@npm:18.3.1" - dependencies: - loose-envify: "npm:^1.1.0" - checksum: 10c0/283e8c5efcf37802c9d1ce767f302dd569dd97a70d9bb8c7be79a789b9902451e0d16334b05d73299b20f048cbc3c7d288bbbde10b701fa194e2089c237dbea3 +"react@npm:^19.0.0": + version: 19.0.0 + resolution: "react@npm:19.0.0" + checksum: 10c0/9cad8f103e8e3a16d15cb18a0d8115d8bd9f9e1ce3420310aea381eb42aa0a4f812cf047bb5441349257a05fba8a291515691e3cb51267279b2d2c3253f38471 languageName: node linkType: hard @@ -11591,17 +11588,20 @@ __metadata: languageName: node linkType: hard -"sass@npm:^1.80.2": - version: 1.80.2 - resolution: "sass@npm:1.80.2" +"sass@npm:^1.83.1": + version: 1.83.1 + resolution: "sass@npm:1.83.1" dependencies: "@parcel/watcher": "npm:^2.4.1" chokidar: "npm:^4.0.0" - immutable: "npm:^4.0.0" + immutable: "npm:^5.0.2" source-map-js: "npm:>=0.6.2 <2.0.0" + dependenciesMeta: + "@parcel/watcher": + optional: true bin: sass: sass.js - checksum: 10c0/0006e2ee7a732abaa96a663167b078b8d53b4d7fe5ce435636a8bca6e8a3b6ebc12308c0725f577a456329ed962436d96cfcdd50a8e733ed4c4e4590f21243c9 + checksum: 10c0/9772506cd8290df7b5e800055098e91a8a65100840fd9e90c660deb74b248b3ddbbd1a274b8f7f09777d472d2c873575357bd87939a40fb5a80bdf654985486f languageName: node linkType: hard @@ -11621,12 +11621,10 @@ __metadata: languageName: node linkType: hard -"scheduler@npm:^0.23.2": - version: 0.23.2 - resolution: "scheduler@npm:0.23.2" - dependencies: - loose-envify: "npm:^1.1.0" - checksum: 10c0/26383305e249651d4c58e6705d5f8425f153211aef95f15161c151f7b8de885f24751b377e4a0b3dd42cce09aad3f87a61dab7636859c0d89b7daf1a1e2a5c78 +"scheduler@npm:^0.25.0": + version: 0.25.0 + resolution: "scheduler@npm:0.25.0" + checksum: 10c0/a4bb1da406b613ce72c1299db43759526058fdcc413999c3c3e0db8956df7633acf395cb20eb2303b6a65d658d66b6585d344460abaee8080b4aa931f10eaafe languageName: node linkType: hard @@ -12280,7 +12278,7 @@ __metadata: languageName: node linkType: hard -"sucrase@npm:^3.31.0, sucrase@npm:^3.32.0": +"sucrase@npm:^3.32.0, sucrase@npm:^3.35.0": version: 3.35.0 resolution: "sucrase@npm:3.35.0" dependencies: diff --git a/docs/calendar_container.md b/docs/calendar_container.md index b6013064fd..fc339f9538 100644 --- a/docs/calendar_container.md +++ b/docs/calendar_container.md @@ -1,7 +1,8 @@ -# `calendar_container` (component) +`calendar_container` (component) +================================ -| name | type | default value | description | -| -------------------- | ---- | ------------- | ----------- | -| `className` | | | | -| `showTime` | | `false` | | -| `showTimeSelectOnly` | | `false` | | + +| name | type | default value | description | +|---|---|---|---| +|`showTime`||`false`|| +|`showTimeSelectOnly`||`false`|| \ No newline at end of file diff --git a/docs/calendar_icon.md b/docs/calendar_icon.md index f01046d723..d5e964cbf9 100644 --- a/docs/calendar_icon.md +++ b/docs/calendar_icon.md @@ -1,12 +1,13 @@ -# `calendar_icon` (component) +`calendar_icon` (component) +=========================== `CalendarIcon` is a React component that renders an icon for a calendar. The icon can be a string representing a CSS class, a React node, or a default SVG icon. @component -@prop icon - The icon to be displayed. This can be a string representing a CSS class or a React node. -@prop className - An optional string representing additional CSS classes to be applied to the icon. -@prop onClick - An optional function to be called when the icon is clicked. +@prop icon - The icon to be displayed. This can be a string representing a CSS class or a React node. +@prop className - An optional string representing additional CSS classes to be applied to the icon. +@prop onClick - An optional function to be called when the icon is clicked. @example // To use a CSS class as the icon @@ -16,10 +17,10 @@ The icon can be a string representing a CSS class, a React node, or a default SV // To use a React node as the icon } onClick={myClickHandler} /> -@returns The `CalendarIcon` component. +@returns The `CalendarIcon` component. -| name | type | default value | description | -| ----------- | ---- | ------------- | ----------- | -| `className` | | `""` | | -| `icon` | | | | -| `onClick` | | | | +| name | type | default value | description | +|---|---|---|---| +|`className`||`""`|| +|`icon`|||| +|`onClick`|||| \ No newline at end of file diff --git a/docs/click_outside_wrapper.md b/docs/click_outside_wrapper.md index ccf323813e..cd34f6d781 100644 --- a/docs/click_outside_wrapper.md +++ b/docs/click_outside_wrapper.md @@ -1,10 +1,12 @@ -# `click_outside_wrapper` (component) +`click_outside_wrapper` (component) +=================================== -| name | type | default value | description | -| --------------------------- | ---- | ------------- | ----------- | -| `children` (required) | | | | -| `className` | | | | -| `containerRef` | | | | -| `ignoreClass` | | | | -| `onClickOutside` (required) | | | | -| `style` | | | | + +| name | type | default value | description | +|---|---|---|---| +|`children` (required)|||| +|`className`|||| +|`containerRef`|||| +|`ignoreClass`|||| +|`onClickOutside` (required)|||| +|`style`|||| \ No newline at end of file diff --git a/docs/datepicker.md b/docs/datepicker.md index b082c4b591..c894ae9ad2 100644 --- a/docs/datepicker.md +++ b/docs/datepicker.md @@ -73,7 +73,7 @@ General datepicker component. | | | `popperModifiers` | `object` | | | | `popperPlacement` | `enumpopperPlacementPositions` | | | -| `preventOpenOnFocus` | `bool` | false | When this is true, the datepicker will not automatically open when the date field is focussed | +| `preventOpenOnFocus` | `bool` | false | When this is true, the datepicker will not automatically open when the date field is focused | | `readOnly` | `bool` | | | | `required` | `bool` | | | | `scrollableYearDropdown` | `bool` | | | diff --git a/docs/index.md b/docs/index.md index f7e8713b6f..8e714df577 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,93 +1,96 @@ -# `index` (component) +`index` (component) +=================== -| name | type | default value | description | -| ------------------------------- | ---- | ------------------ | ----------- | -| `allowSameDay` | | `false` | | -| `ariaDescribedBy` | | | | -| `ariaInvalid` | | | | -| `ariaLabelClose` | | | | -| `ariaLabelledBy` | | | | -| `ariaRequired` | | | | -| `autoComplete` | | | | -| `autoFocus` | | | | -| `calendarClassName` | | | | -| `calendarContainer` | | | | -| `calendarIconClassName` | | | | -| `calendarIconClassname` | | | | -| `calendarStartDay` | | `undefined` | | -| `className` | | | | -| `clearButtonClassName` | | | | -| `clearButtonTitle` | | | | -| `closeOnScroll` | | | | -| `customInput` | | | | -| `customInputRef` | | | | -| `customTimeInput` | | `null` | | -| `dateFormat` | | `"MM/dd/yyyy"` | | -| `dateFormatCalendar` | | `"LLLL yyyy"` | | -| `disabled` | | `false` | | -| `disabledKeyboardNavigation` | | `false` | | -| `dropdownMode` | | `"scroll"` | | -| `enableTabLoop` | | `true` | | -| `excludeScrollbar` | | `true` | | -| `focusSelectedMonth` | | `false` | | -| `form` | | | | -| `highlightDates` | | | | -| `holidays` | | | | -| `id` | | | | -| `isClearable` | | | | -| `monthsShown` | | `1` | | -| `name` | | | | -| `nextMonthAriaLabel` | | `"Next Month"` | | -| `nextMonthButtonLabel` | | `"Next Month"` | | -| `nextYearAriaLabel` | | `"Next Year"` | | -| `nextYearButtonLabel` | | `"Next Year"` | | -| `onBlur` | | | | -| `onCalendarClose` | | | | -| `onCalendarOpen` | | | | -| `onChangeRaw` | | | | -| `onClickOutside` | | | | -| `onFocus` | | | | -| `onInputClick` | | | | -| `onInputError` | | | | -| `onKeyDown` | | | | -| `onSelect` | | | | -| `open` | | | | -| `placeholderText` | | | | -| `popperClassName` | | | | -| `preventOpenOnFocus` | | `false` | | -| `previousMonthAriaLabel` | | `"Previous Month"` | | -| `previousMonthButtonLabel` | | `"Previous Month"` | | -| `previousYearAriaLabel` | | `"Previous Year"` | | -| `previousYearButtonLabel` | | `"Previous Year"` | | -| `readOnly` | | `false` | | -| `required` | | | | -| `selected` | | | | -| `selectsDisabledDaysInRange` | | `false` | | -| `shouldCloseOnSelect` | | `true` | | -| `showDateSelect` | | | | -| `showFourColumnMonthYearPicker` | | `false` | | -| `showFullMonthYearPicker` | | `false` | | -| `showIcon` | | | | -| `showMonthYearPicker` | | `false` | | -| `showPopperArrow` | | `true` | | -| `showPreviousMonths` | | `false` | | -| `showQuarterYearPicker` | | `false` | | -| `showTimeInput` | | `false` | | -| `showTimeSelect` | | `false` | | -| `showTwoColumnMonthYearPicker` | | `false` | | -| `showWeekPicker` | | `false` | | -| `showYearPicker` | | `false` | | -| `startDate` | | | | -| `startOpen` | | | | -| `strictParsing` | | `false` | | -| `swapRange` | | `false` | | -| `tabIndex` | | | | -| `timeCaption` | | `"Time"` | | -| `timeInputLabel` | | `"Time"` | | -| `timeIntervals` | | `30` | | -| `title` | | | | -| `toggleCalendarOnIconClick` | | `false` | | -| `usePointerEvent` | | `false` | | -| `value` | | | | -| `withPortal` | | `false` | | -| `yearItemNumber` | | `12` | | + +| name | type | default value | description | +|---|---|---|---| +|`allowSameDay`||`false`|| +|`ariaDescribedBy`|||| +|`ariaInvalid`|||| +|`ariaLabelClose`|||| +|`ariaLabelledBy`|||| +|`ariaRequired`|||| +|`autoComplete`|||| +|`autoFocus`|||| +|`calendarClassName`|||| +|`calendarContainer`|||| +|`calendarIconClassName`|||| +|`calendarIconClassname`|||| +|`calendarStartDay`||`undefined`|| +|`className`|||| +|`clearButtonClassName`|||| +|`clearButtonTitle`|||| +|`closeOnScroll`|||| +|`customInput`|||| +|`customInputRef`|||| +|`customTimeInput`||`null`|| +|`dateFormat`||`"MM/dd/yyyy"`|| +|`dateFormatCalendar`||`"LLLL yyyy"`|| +|`disabled`||`false`|| +|`disabledKeyboardNavigation`||`false`|| +|`dropdownMode`||`"scroll"`|| +|`enableTabLoop`||`true`|| +|`endDate`|||| +|`excludeScrollbar`||`true`|| +|`focusSelectedMonth`||`false`|| +|`form`|||| +|`highlightDates`|||| +|`holidays`|||| +|`id`|||| +|`isClearable`|||| +|`monthsShown`||`1`|| +|`name`|||| +|`nextMonthAriaLabel`||`"Next Month"`|| +|`nextMonthButtonLabel`||`"Next Month"`|| +|`nextYearAriaLabel`||`"Next Year"`|| +|`nextYearButtonLabel`||`"Next Year"`|| +|`onBlur`|||| +|`onCalendarClose`|||| +|`onCalendarOpen`|||| +|`onChangeRaw`|||| +|`onClickOutside`|||| +|`onFocus`|||| +|`onInputClick`|||| +|`onInputError`|||| +|`onKeyDown`|||| +|`onSelect`|||| +|`open`|||| +|`placeholderText`|||| +|`popperClassName`|||| +|`preventOpenOnFocus`||`false`|| +|`previousMonthAriaLabel`||`"Previous Month"`|| +|`previousMonthButtonLabel`||`"Previous Month"`|| +|`previousYearAriaLabel`||`"Previous Year"`|| +|`previousYearButtonLabel`||`"Previous Year"`|| +|`readOnly`||`false`|| +|`required`|||| +|`selected`|||| +|`selectsDisabledDaysInRange`||`false`|| +|`shouldCloseOnSelect`||`true`|| +|`showDateSelect`|||| +|`showFourColumnMonthYearPicker`||`false`|| +|`showFullMonthYearPicker`||`false`|| +|`showIcon`|||| +|`showMonthYearPicker`||`false`|| +|`showPopperArrow`||`true`|| +|`showPreviousMonths`||`false`|| +|`showQuarterYearPicker`||`false`|| +|`showTimeInput`||`false`|| +|`showTimeSelect`||`false`|| +|`showTwoColumnMonthYearPicker`||`false`|| +|`showWeekPicker`||`false`|| +|`showYearPicker`||`false`|| +|`startDate`|||| +|`startOpen`|||| +|`strictParsing`||`false`|| +|`swapRange`||`false`|| +|`tabIndex`|||| +|`timeCaption`||`"Time"`|| +|`timeInputLabel`||`"Time"`|| +|`timeIntervals`||`30`|| +|`title`|||| +|`toggleCalendarOnIconClick`||`false`|| +|`usePointerEvent`||`false`|| +|`value`|||| +|`withPortal`||`false`|| +|`yearItemNumber`||`12`|| \ No newline at end of file diff --git a/docs/input_time.md b/docs/input_time.md index c306859056..775fde09d0 100644 --- a/docs/input_time.md +++ b/docs/input_time.md @@ -1,4 +1,5 @@ -# `input_time` (component) +`input_time` (component) +======================== `InputTime` is a React component that manages time input. @@ -15,10 +16,10 @@ @returns The `InputTime` component. -| name | type | default value | description | -| ----------------- | ---- | ------------- | ----------- | -| `customTimeInput` | | | | -| `date` | | | | -| `onChange` | | | | -| `timeInputLabel` | | | | -| `timeString` | | | | +| name | type | default value | description | +|---|---|---|---| +|`customTimeInput`|||| +|`date`|||| +|`onChange`|||| +|`timeInputLabel`|||| +|`timeString`|||| \ No newline at end of file diff --git a/docs/month_dropdown.md b/docs/month_dropdown.md index 949116c24d..38863e7a46 100644 --- a/docs/month_dropdown.md +++ b/docs/month_dropdown.md @@ -1,8 +1,10 @@ -# `month_dropdown` (component) +`month_dropdown` (component) +============================ -| name | type | default value | description | -| ------------------------- | ---- | ------------- | ----------- | -| `dropdownMode` (required) | | | | -| `locale` | | | | -| `onChange` (required) | | | | -| `useShortMonthInDropdown` | | | | + +| name | type | default value | description | +|---|---|---|---| +|`dropdownMode` (required)|||| +|`locale`|||| +|`onChange` (required)|||| +|`useShortMonthInDropdown`|||| \ No newline at end of file diff --git a/docs/month_dropdown_options.md b/docs/month_dropdown_options.md index 29437b4ce4..78ea7c96cb 100644 --- a/docs/month_dropdown_options.md +++ b/docs/month_dropdown_options.md @@ -1,8 +1,10 @@ -# `month_dropdown_options` (component) +`month_dropdown_options` (component) +==================================== -| name | type | default value | description | -| ----------------------- | ---- | ------------- | ----------- | -| `month` (required) | | | | -| `monthNames` (required) | | | | -| `onCancel` (required) | | | | -| `onChange` (required) | | | | + +| name | type | default value | description | +|---|---|---|---| +|`month` (required)|||| +|`monthNames` (required)|||| +|`onCancel` (required)|||| +|`onChange` (required)|||| \ No newline at end of file diff --git a/docs/month_year_dropdown.md b/docs/month_year_dropdown.md index b2074e2a74..452969ef52 100644 --- a/docs/month_year_dropdown.md +++ b/docs/month_year_dropdown.md @@ -1,7 +1,9 @@ -# `month_year_dropdown` (component) +`month_year_dropdown` (component) +================================= -| name | type | default value | description | -| ------------------------- | ---- | ------------- | ----------- | -| `dropdownMode` (required) | | | | -| `locale` | | | | -| `onChange` (required) | | | | + +| name | type | default value | description | +|---|---|---|---| +|`dropdownMode` (required)|||| +|`locale`|||| +|`onChange` (required)|||| \ No newline at end of file diff --git a/docs/month_year_dropdown_options.md b/docs/month_year_dropdown_options.md index a14c320913..c8fa1e5ca9 100644 --- a/docs/month_year_dropdown_options.md +++ b/docs/month_year_dropdown_options.md @@ -1,12 +1,14 @@ -# `month_year_dropdown_options` (component) +`month_year_dropdown_options` (component) +========================================= -| name | type | default value | description | -| ----------------------------- | ---- | ------------- | ----------- | -| `date` (required) | | | | -| `dateFormat` (required) | | | | -| `locale` | | | | -| `maxDate` (required) | | | | -| `minDate` (required) | | | | -| `onCancel` (required) | | | | -| `onChange` (required) | | | | -| `scrollableMonthYearDropdown` | | | | + +| name | type | default value | description | +|---|---|---|---| +|`date` (required)|||| +|`dateFormat` (required)|||| +|`locale`|||| +|`maxDate` (required)|||| +|`minDate` (required)|||| +|`onCancel` (required)|||| +|`onChange` (required)|||| +|`scrollableMonthYearDropdown`|||| \ No newline at end of file diff --git a/docs/portal.md b/docs/portal.md index b1fd3fd659..8b344e37c4 100644 --- a/docs/portal.md +++ b/docs/portal.md @@ -1,4 +1,5 @@ -# `portal` (component) +`portal` (component) +==================== `Portal` is a React component that allows you to render children into a DOM node that exists outside the DOM hierarchy of the parent component. @@ -9,8 +10,8 @@ that exists outside the DOM hierarchy of the parent component. @property {string} props.portalId - The id of the DOM node into which the `Portal` will render. @property {ShadowRoot} [props.portalHost] - The DOM node to host the `Portal`. -| name | type | default value | description | -| --------------------- | ---- | ------------- | ----------- | -| `children` (required) | | | | -| `portalHost` | | | | -| `portalId` (required) | | | | +| name | type | default value | description | +|---|---|---|---| +|`children` (required)|||| +|`portalHost`|||| +|`portalId` (required)|||| \ No newline at end of file diff --git a/docs/tab_loop.md b/docs/tab_loop.md index 211d301f3b..ea89b3a94c 100644 --- a/docs/tab_loop.md +++ b/docs/tab_loop.md @@ -1,4 +1,5 @@ -# `tab_loop` (component) +`tab_loop` (component) +====================== `TabLoop` is a React component that manages tabbing behavior for its children. @@ -9,7 +10,7 @@ and "Shift Tab" on the first element will focus the last element @component @example - + @param props - The properties that define the `TabLoop` component. @@ -18,6 +19,7 @@ and "Shift Tab" on the first element will focus the last element @returns The `TabLoop` component. -| name | type | default value | description | -| --------------- | ---- | ------------- | ----------- | -| `enableTabLoop` | | `true` | | +| name | type | default value | description | +|---|---|---|---| +|`children`|||| +|`enableTabLoop`||`true`|| \ No newline at end of file diff --git a/docs/time.md b/docs/time.md index ace375cc6e..f1a2dfa18f 100644 --- a/docs/time.md +++ b/docs/time.md @@ -1,18 +1,20 @@ -# `time` (component) +`time` (component) +================== -| name | type | default value | description | -| -------------------- | ---- | ------------- | ----------- | -| `format` | | | | -| `handleOnKeyDown` | | | | -| `injectTimes` | | | | -| `intervals` | | `30` | | -| `locale` | | | | -| `monthRef` | | | | -| `onChange` | | | | -| `openToDate` | | | | -| `selected` | | | | -| `showTimeCaption` | | `true` | | -| `showTimeSelectOnly` | | | | -| `timeCaption` | | `"Time"` | | -| `timeClassName` | | | | -| `todayButton` | | `null` | | + +| name | type | default value | description | +|---|---|---|---| +|`format`|||| +|`handleOnKeyDown`|||| +|`injectTimes`|||| +|`intervals`||`30`|| +|`locale`|||| +|`monthRef`|||| +|`onChange`|||| +|`openToDate`|||| +|`selected`|||| +|`showTimeCaption`||`true`|| +|`showTimeSelectOnly`|||| +|`timeCaption`||`"Time"`|| +|`timeClassName`|||| +|`todayButton`||`null`|| \ No newline at end of file diff --git a/docs/week_number.md b/docs/week_number.md index 55ba540cf5..832eb3088c 100644 --- a/docs/week_number.md +++ b/docs/week_number.md @@ -1,18 +1,21 @@ -# `week_number` (component) +`week_number` (component) +========================= -| name | type | default value | description | -| ---------------------------- | ---- | ------------- | ----------- | -| `ariaLabelPrefix` | | `"week "` | | -| `containerRef` | | | | -| `date` (required) | | | | -| `disabledKeyboardNavigation` | | | | -| `handleOnKeyDown` | | | | -| `inline` | | | | -| `isInputFocused` | | | | -| `onClick` | | | | -| `preSelection` | | | | -| `selected` | | | | -| `shouldFocusDayInline` | | | | -| `showWeekNumber` | | | | -| `showWeekPicker` | | | | -| `weekNumber` (required) | | | | + +| name | type | default value | description | +|---|---|---|---| +|`ariaLabelPrefix`||`"week "`|| +|`containerRef`|||| +|`date` (required)|||| +|`disabledKeyboardNavigation`|||| +|`handleOnKeyDown`|||| +|`inline`|||| +|`isInputFocused`|||| +|`isWeekDisabled`|||| +|`onClick`|||| +|`preSelection`|||| +|`selected`|||| +|`shouldFocusDayInline`|||| +|`showWeekNumber`|||| +|`showWeekPicker`|||| +|`weekNumber` (required)|||| \ No newline at end of file diff --git a/docs/year.md b/docs/year.md index 9bf269e828..2f3eac94e6 100644 --- a/docs/year.md +++ b/docs/year.md @@ -1,4 +1,5 @@ -# `year` (component) +`year` (component) +================== `Year` is a component that represents a year in a date picker. @@ -19,26 +20,26 @@ @property {(date: Date) => void} props.onYearMouseEnter - Function to handle mouse enter events on a year. @property {(date: Date) => void} props.onYearMouseLeave - Function to handle mouse leave events on a year. -| name | type | default value | description | -| ----------------------------- | ---- | ------------- | ----------- | -| `clearSelectingDate` | | | | -| `date` | | | | -| `disabledKeyboardNavigation` | | | | -| `endDate` | | | | -| `handleOnKeyDown` | | | | -| `inline` | | | | -| `onDayClick` | | | | -| `onYearMouseEnter` (required) | | | | -| `onYearMouseLeave` (required) | | | | -| `preSelection` | | | | -| `renderYearContent` | | | | -| `selected` | | | | -| `selectingDate` | | | | -| `selectsEnd` | | | | -| `selectsRange` | | | | -| `selectsStart` | | | | -| `setPreSelection` | | | | -| `startDate` | | | | -| `usePointerEvent` | | | | -| `yearClassName` | | | | -| `yearItemNumber` | | | | +| name | type | default value | description | +|---|---|---|---| +|`clearSelectingDate`|||| +|`date`|||| +|`disabledKeyboardNavigation`|||| +|`endDate`|||| +|`handleOnKeyDown`|||| +|`inline`|||| +|`onDayClick`|||| +|`onYearMouseEnter` (required)|||| +|`onYearMouseLeave` (required)|||| +|`preSelection`|||| +|`renderYearContent`|||| +|`selected`|||| +|`selectingDate`|||| +|`selectsEnd`|||| +|`selectsRange`|||| +|`selectsStart`|||| +|`setPreSelection`|||| +|`startDate`|||| +|`usePointerEvent`|||| +|`yearClassName`|||| +|`yearItemNumber`|||| \ No newline at end of file diff --git a/examples/hello-world/package.json b/examples/hello-world/package.json index d650597cc7..dcadace6e2 100644 --- a/examples/hello-world/package.json +++ b/examples/hello-world/package.json @@ -3,9 +3,9 @@ "version": "0.1.0", "private": true, "dependencies": { - "react": "^18.3.1", - "react-datepicker": "^7.5.0", - "react-dom": "^18.3.1", + "react": "^19.0.0", + "react-datepicker": "^7.6.0", + "react-dom": "^19.0.0", "react-scripts": "5.0.1" }, "scripts": { @@ -18,16 +18,12 @@ "extends": "react-app" }, "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], + "production": [">0.2%", "not dead", "not op_mini all"], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, - "packageManager": "yarn@4.3.1" + "packageManager": "yarn@4.6.0" } diff --git a/examples/hello-world/yarn.lock b/examples/hello-world/yarn.lock index 0ebf35aa8a..e570f20503 100644 --- a/examples/hello-world/yarn.lock +++ b/examples/hello-world/yarn.lock @@ -2148,17 +2148,17 @@ __metadata: languageName: node linkType: hard -"@floating-ui/react@npm:^0.26.23": - version: 0.26.24 - resolution: "@floating-ui/react@npm:0.26.24" +"@floating-ui/react@npm:^0.27.0": + version: 0.27.2 + resolution: "@floating-ui/react@npm:0.27.2" dependencies: "@floating-ui/react-dom": "npm:^2.1.2" "@floating-ui/utils": "npm:^0.2.8" tabbable: "npm:^6.0.0" peerDependencies: - react: ">=16.8.0" - react-dom: ">=16.8.0" - checksum: 10c0/c5c3ac265802087673a69b0e08b3bea1ee02de9da4cdbc40bb1c9e06823be72628a82f1655b40d56a4383715b4ab3b6deddff4e69146f513970ee592e1dd8f92 + react: ">=17.0.0" + react-dom: ">=17.0.0" + checksum: 10c0/7de7810b501422a12e4d4089042dc8ab9de8a95f53003a4a5e2b25fd8b2ee0dddcfab996a26558ec4614c2e15ce1b68d2e06f188bec55de7346c904610d50837 languageName: node linkType: hard @@ -4947,13 +4947,13 @@ __metadata: linkType: hard "cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.2, cross-spawn@npm:^7.0.3": - version: 7.0.3 - resolution: "cross-spawn@npm:7.0.3" + version: 7.0.5 + resolution: "cross-spawn@npm:7.0.5" dependencies: path-key: "npm:^3.1.0" shebang-command: "npm:^2.0.0" which: "npm:^2.0.1" - checksum: 10c0/5738c312387081c98d69c98e105b6327b069197f864a60593245d64c8089c8a0a744e16349281210d56835bb9274130d825a78b2ad6853ca13cfbeffc0c31750 + checksum: 10c0/aa82ce7ac0814a27e6f2b738c5a7cf1fa21a3558a1e42df449fc96541ba3ba731e4d3ecffa4435348808a86212f287c6f20a1ee551ef1ff95d01cfec5f434944 languageName: node linkType: hard @@ -7067,9 +7067,9 @@ __metadata: version: 0.0.0-use.local resolution: "hello-world@workspace:." dependencies: - react: "npm:^18.3.1" - react-datepicker: "npm:^7.5.0" - react-dom: "npm:^18.3.1" + react: "npm:^19.0.0" + react-datepicker: "npm:^7.6.0" + react-dom: "npm:^19.0.0" react-scripts: "npm:5.0.1" languageName: unknown linkType: soft @@ -7228,8 +7228,8 @@ __metadata: linkType: hard "http-proxy-middleware@npm:^2.0.3": - version: 2.0.6 - resolution: "http-proxy-middleware@npm:2.0.6" + version: 2.0.7 + resolution: "http-proxy-middleware@npm:2.0.7" dependencies: "@types/http-proxy": "npm:^1.17.8" http-proxy: "npm:^1.18.1" @@ -7241,7 +7241,7 @@ __metadata: peerDependenciesMeta: "@types/express": optional: true - checksum: 10c0/25a0e550dd1900ee5048a692e0e9b2b6339d06d487a705d90c47e359e9c6561d648cd7862d001d090e651c9efffa1b6e5160fcf1f299b5fa4935f76e9754eb11 + checksum: 10c0/8d00a61eb215b83826460b07489d8bb095368ec16e02a9d63e228dcf7524e7c20d61561e5476de1391aecd4ec32ea093279cdc972115b311f8e0a95a24c9e47e languageName: node linkType: hard @@ -8766,7 +8766,7 @@ __metadata: languageName: node linkType: hard -"loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0": +"loose-envify@npm:^1.4.0": version: 1.4.0 resolution: "loose-envify@npm:1.4.0" dependencies: @@ -9159,11 +9159,11 @@ __metadata: linkType: hard "nanoid@npm:^3.3.6": - version: 3.3.6 - resolution: "nanoid@npm:3.3.6" + version: 3.3.8 + resolution: "nanoid@npm:3.3.8" bin: nanoid: bin/nanoid.cjs - checksum: 10c0/606b355960d0fcbe3d27924c4c52ef7d47d3b57208808ece73279420d91469b01ec1dce10fae512b6d4a8c5a5432b352b228336a8b2202a6ea68e67fa348e2ee + checksum: 10c0/4b1bb29f6cfebf3be3bc4ad1f1296fb0a10a3043a79f34fbffe75d1621b4318319211cd420549459018ea3592f0d2f159247a6f874911d6d26eaaadda2478120 languageName: node linkType: hard @@ -10794,18 +10794,17 @@ __metadata: languageName: node linkType: hard -"react-datepicker@npm:^7.5.0": - version: 7.5.0 - resolution: "react-datepicker@npm:7.5.0" +"react-datepicker@npm:^7.6.0": + version: 7.6.0 + resolution: "react-datepicker@npm:7.6.0" dependencies: - "@floating-ui/react": "npm:^0.26.23" + "@floating-ui/react": "npm:^0.27.0" clsx: "npm:^2.1.1" date-fns: "npm:^3.6.0" - prop-types: "npm:^15.8.1" peerDependencies: - react: ^16.9.0 || ^17 || ^18 - react-dom: ^16.9.0 || ^17 || ^18 - checksum: 10c0/6e94a609654b8a0eaa9b2e8c4fab803aa954e78df9729f05337ae97c4e910b1488129ee8d4b11dea575dbe0992242c078cb692ed0cba4e5d98414d8ba393972d + react: ^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc + react-dom: ^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc + checksum: 10c0/4bce57a4d9fff654d516e9b33152d46e4c5c2794ef52f436155ee52702c3c76ac567d1bbc8075c169805e17e400aeb388f8f60e6e3b019e543a08be76eee3ba7 languageName: node linkType: hard @@ -10841,15 +10840,14 @@ __metadata: languageName: node linkType: hard -"react-dom@npm:^18.3.1": - version: 18.3.1 - resolution: "react-dom@npm:18.3.1" +"react-dom@npm:^19.0.0": + version: 19.0.0 + resolution: "react-dom@npm:19.0.0" dependencies: - loose-envify: "npm:^1.1.0" - scheduler: "npm:^0.23.2" + scheduler: "npm:^0.25.0" peerDependencies: - react: ^18.3.1 - checksum: 10c0/a752496c1941f958f2e8ac56239172296fcddce1365ce45222d04a1947e0cc5547df3e8447f855a81d6d39f008d7c32eab43db3712077f09e3f67c4874973e85 + react: ^19.0.0 + checksum: 10c0/a36ce7ab507b237ae2759c984cdaad4af4096d8199fb65b3815c16825e5cfeb7293da790a3fc2184b52bfba7ba3ff31c058c01947aff6fd1a3701632aabaa6a9 languageName: node linkType: hard @@ -10955,12 +10953,10 @@ __metadata: languageName: node linkType: hard -"react@npm:^18.3.1": - version: 18.3.1 - resolution: "react@npm:18.3.1" - dependencies: - loose-envify: "npm:^1.1.0" - checksum: 10c0/283e8c5efcf37802c9d1ce767f302dd569dd97a70d9bb8c7be79a789b9902451e0d16334b05d73299b20f048cbc3c7d288bbbde10b701fa194e2089c237dbea3 +"react@npm:^19.0.0": + version: 19.0.0 + resolution: "react@npm:19.0.0" + checksum: 10c0/9cad8f103e8e3a16d15cb18a0d8115d8bd9f9e1ce3420310aea381eb42aa0a4f812cf047bb5441349257a05fba8a291515691e3cb51267279b2d2c3253f38471 languageName: node linkType: hard @@ -11397,12 +11393,10 @@ __metadata: languageName: node linkType: hard -"scheduler@npm:^0.23.2": - version: 0.23.2 - resolution: "scheduler@npm:0.23.2" - dependencies: - loose-envify: "npm:^1.1.0" - checksum: 10c0/26383305e249651d4c58e6705d5f8425f153211aef95f15161c151f7b8de885f24751b377e4a0b3dd42cce09aad3f87a61dab7636859c0d89b7daf1a1e2a5c78 +"scheduler@npm:^0.25.0": + version: 0.25.0 + resolution: "scheduler@npm:0.25.0" + checksum: 10c0/a4bb1da406b613ce72c1299db43759526058fdcc413999c3c3e0db8956df7633acf395cb20eb2303b6a65d658d66b6585d344460abaee8080b4aa931f10eaafe languageName: node linkType: hard diff --git a/package.json b/package.json index b822c391ad..6250398d1e 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "author": "HackerOne", "name": "react-datepicker", "description": "A simple and reusable datepicker component for React", - "version": "7.5.0", + "version": "7.6.0", "license": "MIT", "homepage": "https://github.com/Hacker0x01/react-datepicker", "main": "dist/index.js", @@ -41,8 +41,8 @@ "@types/eslint": "^8.56.10", "@types/jest": "^29.5.12", "@types/node": "22", - "@types/react": "^18.3.4", - "@types/react-dom": "^18.3.0", + "@types/react": "^19.0.2", + "@types/react-dom": "^19.0.2", "@typescript-eslint/eslint-plugin": "^7.18.0", "@typescript-eslint/parser": "^8.6.0", "axe-core": "^4.10.0", @@ -63,29 +63,28 @@ "lint-staged": "^15.2.9", "lodash": "^4.17.21", "prettier": "^3.3.3", - "react": "^18.3.1", - "react-dom": "^18.3.1", + "react": "^19.0.0", + "react-dom": "^19.0.0", "rollup": "^4.21.1", "rollup-plugin-filesize": "^10.0.0", - "sass": "1.79.5", + "sass": "1.80.7", "slugify": "^1.6.6", "stylelint": "^16.9.0", "stylelint-config-standard": "^36.0.1", - "stylelint-config-standard-scss": "^13.1.0", + "stylelint-config-standard-scss": "^14.0.0", "stylelint-scss": "^6.5.1", "ts-jest": "^29.2.5", "tslib": "^2.7.0", "typescript": "^5.5.4" }, "peerDependencies": { - "react": "^16.9.0 || ^17 || ^18", - "react-dom": "^16.9.0 || ^17 || ^18" + "react": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc", + "react-dom": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc" }, "dependencies": { - "@floating-ui/react": "^0.26.23", + "@floating-ui/react": "^0.27.0", "clsx": "^2.1.1", - "date-fns": "^3.6.0", - "prop-types": "^15.8.1" + "date-fns": "^3.6.0" }, "scripts": { "eslint": "eslint --ext .js,.jsx,.ts,.tsx ./src", @@ -113,5 +112,5 @@ "lint-staged": { "*.{js,jsx,ts,tsx,json,css,scss,md}": ["prettier --write", "git add"] }, - "packageManager": "yarn@4.4.0" + "packageManager": "yarn@4.6.0" } diff --git a/src/calendar.tsx b/src/calendar.tsx index 461e1c81e1..d80f1554aa 100644 --- a/src/calendar.tsx +++ b/src/calendar.tsx @@ -103,109 +103,110 @@ export interface ReactDatePickerCustomHeaderProps { nextYearButtonDisabled: boolean; } -type CalendarProps = React.PropsWithChildren & +type CalendarProps = React.PropsWithChildren< Omit< YearDropdownProps, "date" | "onChange" | "year" | "minDate" | "maxDate" > & - Omit & - Omit & - Omit< - YearProps, - | "onDayClick" - | "selectingDate" - | "clearSelectingDate" - | "onYearMouseEnter" - | "onYearMouseLeave" - | "minDate" - | "maxDate" - > & - Omit< - MonthProps, - | "ariaLabelPrefix" - | "onChange" - | "day" - | "onDayClick" - | "handleOnKeyDown" - | "handleOnMonthKeyDown" - | "onDayMouseEnter" - | "onMouseLeave" - | "orderInDisplay" - | "monthShowsDuplicateDaysEnd" - | "monthShowsDuplicateDaysStart" - | "minDate" - | "maxDate" - > & - Omit & - Omit & { - className?: string; - container?: React.ElementType; - showYearPicker?: boolean; - showMonthYearPicker?: boolean; - showQuarterYearPicker?: boolean; - showTimeSelect?: boolean; - showTimeInput?: boolean; - showYearDropdown?: boolean; - showMonthDropdown?: boolean; - yearItemNumber?: number; - useWeekdaysShort?: boolean; - forceShowMonthNavigation?: boolean; - showDisabledMonthNavigation?: boolean; - formatWeekDay?: (date: string) => string; - onDropdownFocus?: (event: React.FocusEvent) => void; - calendarStartDay?: Day; - weekDayClassName?: (date: Date) => string; - onMonthChange?: (date: Date) => void; - onYearChange?: (date: Date) => void; - onDayMouseEnter?: (date: Date) => void; - onMonthMouseLeave?: VoidFunction; - weekLabel?: string; - onClickOutside: ClickOutsideHandler; - outsideClickIgnoreClass?: string; - previousMonthButtonLabel?: React.ReactNode; - previousYearButtonLabel?: string; - previousMonthAriaLabel?: string; - previousYearAriaLabel?: string; - nextMonthButtonLabel?: React.ReactNode; - nextYearButtonLabel?: string; - nextMonthAriaLabel?: string; - nextYearAriaLabel?: string; - showPreviousMonths?: boolean; - monthsShown?: number; - monthSelectedIn?: number; - onSelect: ( - day: Date, - event?: - | React.MouseEvent - | React.KeyboardEvent, - monthSelectedIn?: number, - ) => void; - renderCustomHeader?: ( - props: ReactDatePickerCustomHeaderProps, - ) => JSX.Element; - onYearMouseEnter?: YearProps["onYearMouseEnter"]; - onYearMouseLeave?: YearProps["onYearMouseLeave"]; - monthAriaLabelPrefix?: MonthProps["ariaLabelPrefix"]; - handleOnDayKeyDown?: MonthProps["handleOnKeyDown"]; - handleOnKeyDown?: ( - event: - | React.KeyboardEvent - | React.KeyboardEvent - | React.KeyboardEvent, - ) => void; - onTimeChange?: TimeProps["onChange"] | InputTimeProps["onChange"]; - timeFormat?: TimeProps["format"]; - timeIntervals?: TimeProps["intervals"]; - } & ( - | ({ - showMonthYearDropdown: true; - } & Pick) - | ({ - showMonthYearDropdown?: never; - } & Pick & - Pick & - Pick) - ); + Omit & + Omit & + Omit< + YearProps, + | "onDayClick" + | "selectingDate" + | "clearSelectingDate" + | "onYearMouseEnter" + | "onYearMouseLeave" + | "minDate" + | "maxDate" + > & + Omit< + MonthProps, + | "ariaLabelPrefix" + | "onChange" + | "day" + | "onDayClick" + | "handleOnKeyDown" + | "handleOnMonthKeyDown" + | "onDayMouseEnter" + | "onMouseLeave" + | "orderInDisplay" + | "monthShowsDuplicateDaysEnd" + | "monthShowsDuplicateDaysStart" + | "minDate" + | "maxDate" + > & + Omit & + Omit & { + className?: string; + container?: React.ElementType; + showYearPicker?: boolean; + showMonthYearPicker?: boolean; + showQuarterYearPicker?: boolean; + showTimeSelect?: boolean; + showTimeInput?: boolean; + showYearDropdown?: boolean; + showMonthDropdown?: boolean; + yearItemNumber?: number; + useWeekdaysShort?: boolean; + forceShowMonthNavigation?: boolean; + showDisabledMonthNavigation?: boolean; + formatWeekDay?: (date: string) => string; + onDropdownFocus?: (event: React.FocusEvent) => void; + calendarStartDay?: Day; + weekDayClassName?: (date: Date) => string; + onMonthChange?: (date: Date) => void; + onYearChange?: (date: Date) => void; + onDayMouseEnter?: (date: Date) => void; + onMonthMouseLeave?: VoidFunction; + weekLabel?: string; + onClickOutside: ClickOutsideHandler; + outsideClickIgnoreClass?: string; + previousMonthButtonLabel?: React.ReactNode; + previousYearButtonLabel?: string; + previousMonthAriaLabel?: string; + previousYearAriaLabel?: string; + nextMonthButtonLabel?: React.ReactNode; + nextYearButtonLabel?: string; + nextMonthAriaLabel?: string; + nextYearAriaLabel?: string; + showPreviousMonths?: boolean; + monthsShown?: number; + monthSelectedIn?: number; + onSelect: ( + day: Date, + event?: + | React.MouseEvent + | React.KeyboardEvent, + monthSelectedIn?: number, + ) => void; + renderCustomHeader?: ( + props: ReactDatePickerCustomHeaderProps, + ) => React.ReactElement; + onYearMouseEnter?: YearProps["onYearMouseEnter"]; + onYearMouseLeave?: YearProps["onYearMouseLeave"]; + monthAriaLabelPrefix?: MonthProps["ariaLabelPrefix"]; + handleOnDayKeyDown?: MonthProps["handleOnKeyDown"]; + handleOnKeyDown?: ( + event: + | React.KeyboardEvent + | React.KeyboardEvent + | React.KeyboardEvent, + ) => void; + onTimeChange?: TimeProps["onChange"] | InputTimeProps["onChange"]; + timeFormat?: TimeProps["format"]; + timeIntervals?: TimeProps["intervals"]; + } & ( + | ({ + showMonthYearDropdown: true; + } & Pick) + | ({ + showMonthYearDropdown?: never; + } & Pick & + Pick & + Pick) + ) +>; interface CalendarState extends Pick, @@ -280,7 +281,7 @@ export default class Calendar extends Component { } } - containerRef: React.RefObject; + containerRef: React.RefObject; monthContainer: CalendarState["monthContainer"] = undefined; @@ -458,14 +459,14 @@ export default class Calendar extends Component { ); }; - header = (date: Date = this.state.date): JSX.Element[] => { + header = (date: Date = this.state.date): React.ReactElement[] => { const startOfWeek = getStartOfWeek( date, this.props.locale, this.props.calendarStartDay, ); - const dayNames: JSX.Element[] = []; + const dayNames: React.ReactElement[] = []; if (this.props.showWeekNumbers) { dayNames.push(
@@ -523,11 +524,19 @@ export default class Calendar extends Component { this.setState({ selectingDate: undefined }); }; - renderPreviousButton = (): JSX.Element | void => { + renderPreviousButton = (): React.ReactElement | void => { if (this.props.renderCustomHeader) { return; } + const monthsShown = + this.props.monthsShown ?? Calendar.defaultProps.monthsShown; + const monthsToSubtract = this.props.showPreviousMonths + ? monthsShown - 1 + : 0; + const monthSelectedIn = this.props.monthSelectedIn ?? monthsToSubtract; + const fromMonthDate = subMonths(this.state.date, monthSelectedIn); + let allPrevDaysDisabled; switch (true) { case this.props.showMonthYearPicker: @@ -543,7 +552,7 @@ export default class Calendar extends Component { ); break; default: - allPrevDaysDisabled = monthDisabledBefore(this.state.date, this.props); + allPrevDaysDisabled = monthDisabledBefore(fromMonthDate, this.props); break; } @@ -634,7 +643,7 @@ export default class Calendar extends Component { ); }; - renderNextButton = (): JSX.Element | void => { + renderNextButton = (): React.ReactElement | void => { if (this.props.renderCustomHeader) { return; } @@ -731,7 +740,7 @@ export default class Calendar extends Component { ); }; - renderCurrentMonth = (date: Date = this.state.date): JSX.Element => { + renderCurrentMonth = (date: Date = this.state.date): React.ReactElement => { const classes = ["react-datepicker__current-month"]; if (this.props.showYearDropdown) { @@ -752,7 +761,7 @@ export default class Calendar extends Component { renderYearDropdown = ( overrideHide: boolean = false, - ): JSX.Element | undefined => { + ): React.ReactElement | undefined => { if (!this.props.showYearDropdown || overrideHide) { return; } @@ -769,7 +778,7 @@ export default class Calendar extends Component { renderMonthDropdown = ( overrideHide: boolean = false, - ): JSX.Element | undefined => { + ): React.ReactElement | undefined => { if (!this.props.showMonthDropdown || overrideHide) { return; } @@ -785,7 +794,7 @@ export default class Calendar extends Component { renderMonthYearDropdown = ( overrideHide: boolean = false, - ): JSX.Element | undefined => { + ): React.ReactElement | undefined => { if (!this.props.showMonthYearDropdown || overrideHide) { return; } @@ -804,7 +813,7 @@ export default class Calendar extends Component { this.props.setPreSelection && this.props.setPreSelection(getStartOfToday()); }; - renderTodayButton = (): JSX.Element | undefined => { + renderTodayButton = (): React.ReactElement | undefined => { if (!this.props.todayButton || this.props.showTimeSelectOnly) { return; } @@ -905,7 +914,11 @@ export default class Calendar extends Component { ); }; - renderYearHeader = ({ monthDate }: { monthDate: Date }): JSX.Element => { + renderYearHeader = ({ + monthDate, + }: { + monthDate: Date; + }): React.ReactElement => { const { showYearPicker, yearItemNumber = Calendar.defaultProps.yearItemNumber, @@ -927,7 +940,7 @@ export default class Calendar extends Component { }: { monthDate: Date; i?: number; - }): JSX.Element | null => { + }): React.ReactElement | null => { const headerArgs = { monthDate, i }; switch (true) { case this.props.renderCustomHeader !== undefined: @@ -941,12 +954,12 @@ export default class Calendar extends Component { } }; - renderMonths = (): JSX.Element[] | undefined => { + renderMonths = (): React.ReactElement[] | undefined => { if (this.props.showTimeSelectOnly || this.props.showYearPicker) { return; } - const monthList: JSX.Element[] = []; + const monthList: React.ReactElement[] = []; const monthsShown = this.props.monthsShown ?? Calendar.defaultProps.monthsShown; const monthsToSubtract = this.props.showPreviousMonths @@ -996,7 +1009,7 @@ export default class Calendar extends Component { return monthList; }; - renderYears = (): JSX.Element | undefined => { + renderYears = (): React.ReactElement | undefined => { if (this.props.showTimeSelectOnly) { return; } @@ -1020,7 +1033,7 @@ export default class Calendar extends Component { return; }; - renderTimeSection = (): JSX.Element | undefined => { + renderTimeSection = (): React.ReactElement | undefined => { if ( this.props.showTimeSelect && (this.state.monthContainer || this.props.showTimeSelectOnly) @@ -1039,7 +1052,7 @@ export default class Calendar extends Component { return; }; - renderInputTimeSection = (): JSX.Element | undefined => { + renderInputTimeSection = (): React.ReactElement | undefined => { const time = this.props.selected ? new Date(this.props.selected) : undefined; @@ -1061,7 +1074,7 @@ export default class Calendar extends Component { return; }; - renderAriaLiveRegion = (): JSX.Element => { + renderAriaLiveRegion = (): React.ReactElement => { const { startPeriod, endPeriod } = getYearsPeriod( this.state.date, this.props.yearItemNumber ?? Calendar.defaultProps.yearItemNumber, @@ -1093,7 +1106,7 @@ export default class Calendar extends Component { ); }; - renderChildren = (): JSX.Element | undefined => { + renderChildren = (): React.ReactElement | undefined => { if (this.props.children) { return (
@@ -1104,7 +1117,7 @@ export default class Calendar extends Component { return; }; - render(): JSX.Element { + render(): React.ReactElement { const Container = this.props.container || CalendarContainer; return ( { showTimeSelectOnly?: boolean; showTime?: boolean; - className?: string; } const CalendarContainer: React.FC = function ({ diff --git a/src/calendar_icon.tsx b/src/calendar_icon.tsx index f8975004a6..412531e1eb 100644 --- a/src/calendar_icon.tsx +++ b/src/calendar_icon.tsx @@ -29,7 +29,7 @@ const CalendarIcon: React.FC = ({ icon, className = "", onClick, -}: CalendarIconProps): JSX.Element => { +}: CalendarIconProps): React.ReactElement => { const defaultClass = "react-datepicker__calendar-icon"; if (typeof icon === "string") { @@ -44,11 +44,16 @@ const CalendarIcon: React.FC = ({ if (React.isValidElement(icon)) { // Because we are checking that typeof icon is string first, we can safely cast icon as React.ReactElement on types level and code level - return React.cloneElement(icon as React.ReactElement, { - className: `${icon.props.className || ""} ${defaultClass} ${className}`, + const iconElement = icon as React.ReactElement<{ + className: string; + onClick: (event: React.MouseEvent) => void; + }>; + + return React.cloneElement(iconElement, { + className: `${iconElement.props.className || ""} ${defaultClass} ${className}`, onClick: (event: React.MouseEvent) => { - if (typeof icon.props.onClick === "function") { - icon.props.onClick(event); + if (typeof iconElement.props.onClick === "function") { + iconElement.props.onClick(event); } if (typeof onClick === "function") { diff --git a/src/day.tsx b/src/day.tsx index ecb40ce4ce..833aa43af4 100644 --- a/src/day.tsx +++ b/src/day.tsx @@ -39,7 +39,6 @@ interface DayProps disabledKeyboardNavigation?: boolean; day: Date; dayClassName?: (date: Date) => string; - endDate?: Date; highlightDates?: Map; holidays?: HolidaysMap; inline?: boolean; @@ -60,7 +59,8 @@ interface DayProps selectsDisabledDaysInRange?: boolean; selectsMultiple?: boolean; selectedDates?: Date[]; - startDate?: Date; + startDate?: Date | null; + endDate?: Date | null; renderDayContents?: (day: number, date: Date) => React.ReactNode; containerRef?: React.RefObject; calendarStartDay?: DateNumberType; diff --git a/src/index.tsx b/src/index.tsx index 4da9f009bf..b816fe4494 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -175,7 +175,8 @@ export type DatePickerProps = OmitUnion< calendarIconClassName?: string; toggleCalendarOnIconClick?: boolean; holidays?: Holiday[]; - startDate?: Date; + startDate?: Date | null; + endDate?: Date | null; selected?: Date | null; value?: string; customInputRef?: string; @@ -945,6 +946,7 @@ export default class DatePicker extends Component< const copy = newDate(this.state.preSelection); if (eventKey === KeyType.Enter) { event.preventDefault(); + (event.target as HTMLInputElement).blur(); if ( this.inputOk() && this.state.lastPreSelectChange === PRESELECT_CHANGE_VIA_NAVIGATE @@ -956,6 +958,7 @@ export default class DatePicker extends Component< } } else if (eventKey === KeyType.Escape) { event.preventDefault(); + (event.target as HTMLInputElement).blur(); this.sendFocusBackToInput(); this.setOpen(false); } else if (eventKey === KeyType.Tab) { @@ -1372,7 +1375,7 @@ export default class DatePicker extends Component< }); }; - renderClearButton = (): JSX.Element | null => { + renderClearButton = (): React.ReactElement | null => { const { isClearable, disabled, @@ -1411,7 +1414,7 @@ export default class DatePicker extends Component< } }; - renderInputContainer(): JSX.Element { + renderInputContainer(): React.ReactElement { const { showIcon, icon, @@ -1455,7 +1458,7 @@ export default class DatePicker extends Component< ); } - render(): JSX.Element | null { + render(): React.ReactElement | null { const calendar = this.renderCalendar(); if (this.props.inline) return calendar; diff --git a/src/input_time.tsx b/src/input_time.tsx index d0306152e0..bd0d8c227c 100644 --- a/src/input_time.tsx +++ b/src/input_time.tsx @@ -5,7 +5,11 @@ interface InputTimeProps { date?: Date; timeString?: string; timeInputLabel?: string; - customTimeInput?: JSX.Element; + customTimeInput?: React.ReactElement<{ + date?: Date; + value: string; + onChange: (time: string) => void; + }>; } interface InputTimeState { @@ -32,7 +36,7 @@ export default class InputTime extends Component< InputTimeProps, InputTimeState > { - inputRef: React.RefObject = React.createRef(); + inputRef: React.RefObject = React.createRef(); constructor(props: InputTimeProps) { super(props); diff --git a/src/month.tsx b/src/month.tsx index 41498ea857..5140d9a15b 100644 --- a/src/month.tsx +++ b/src/month.tsx @@ -124,6 +124,8 @@ interface MonthProps handleOnMonthKeyDown?: (event: React.KeyboardEvent) => void; ariaLabelPrefix?: string; day: Date; + startDate?: Date | null; + endDate?: Date | null; orderInDisplay?: number; fixedHeight?: boolean; peekNextMonth?: boolean; diff --git a/src/month_dropdown.tsx b/src/month_dropdown.tsx index 8a0ed18380..fa5afcd22e 100644 --- a/src/month_dropdown.tsx +++ b/src/month_dropdown.tsx @@ -33,16 +33,16 @@ export default class MonthDropdown extends Component< dropdownVisible: false, }; - renderSelectOptions = (monthNames: string[]): JSX.Element[] => - monthNames.map( - (m: string, i: number): JSX.Element => ( + renderSelectOptions = (monthNames: string[]): React.ReactElement[] => + monthNames.map( + (m: string, i: number): React.ReactElement => ( ), ); - renderSelectMode = (monthNames: string[]): JSX.Element => ( + renderSelectMode = (monthNames: string[]): React.ReactElement => ( ); - renderReadView = (visible: boolean): JSX.Element => { + renderReadView = (visible: boolean): React.ReactElement => { const yearMonth = formatDate( this.props.date, this.props.dateFormat, @@ -90,7 +90,7 @@ export default class MonthYearDropdown extends Component< ); }; - renderDropdown = (): JSX.Element => ( + renderDropdown = (): React.ReactElement => ( ); - renderScrollMode = (): JSX.Element[] => { + renderScrollMode = (): React.ReactElement[] => { const { dropdownVisible } = this.state; const result = [this.renderReadView(!dropdownVisible)]; if (dropdownVisible) { @@ -128,7 +128,7 @@ export default class MonthYearDropdown extends Component< dropdownVisible: !this.state.dropdownVisible, }); - render(): JSX.Element { + render(): React.ReactElement { let renderedDropdown; switch (this.props.dropdownMode) { case "scroll": diff --git a/src/month_year_dropdown_options.tsx b/src/month_year_dropdown_options.tsx index 615c5cedcb..68d0e574d2 100644 --- a/src/month_year_dropdown_options.tsx +++ b/src/month_year_dropdown_options.tsx @@ -58,9 +58,9 @@ export default class MonthYearDropdownOptions extends Component< }; } - renderOptions = (): JSX.Element[] => { - return this.state.monthYearsList.map( - (monthYear: Date): JSX.Element => { + renderOptions = (): React.ReactElement[] => { + return this.state.monthYearsList.map( + (monthYear: Date): React.ReactElement => { const monthYearPoint = getTime(monthYear); const isSameMonthYear = isSameYear(this.props.date, monthYear) && @@ -97,7 +97,7 @@ export default class MonthYearDropdownOptions extends Component< this.props.onCancel(); }; - render(): JSX.Element { + render(): React.ReactElement { const dropdownClass = clsx({ "react-datepicker__month-year-dropdown": true, "react-datepicker__month-year-dropdown--scrollable": diff --git a/src/popper_component.tsx b/src/popper_component.tsx index 5ea2e07383..28ea745e1a 100644 --- a/src/popper_component.tsx +++ b/src/popper_component.tsx @@ -7,6 +7,7 @@ import TabLoop from "./tab_loop"; import withFloating from "./with_floating"; import type { FloatingProps } from "./with_floating"; +import type { ReactNode } from "react"; interface PortalProps extends Omit, "children"> {} @@ -20,7 +21,7 @@ interface PopperComponentProps className?: string; wrapperClassName?: string; popperComponent: React.ReactNode; - popperContainer?: React.FC; + popperContainer?: React.FC<{ children?: ReactNode | undefined }>; targetComponent: React.ReactNode; popperOnKeyDown: React.KeyboardEventHandler; showArrow?: boolean; @@ -35,7 +36,7 @@ export class PopperComponent extends Component { }; } - render(): JSX.Element { + render(): React.ReactElement { const { className, wrapperClassName, @@ -50,7 +51,7 @@ export class PopperComponent extends Component { showArrow, } = this.props; - let popper: JSX.Element | undefined = undefined; + let popper: React.ReactElement | undefined = undefined; if (!hidePopper) { const classes = clsx("react-datepicker-popper", className); diff --git a/src/stylesheets/datepicker.scss b/src/stylesheets/datepicker.scss index 8b08ba3cb7..471fab9c0a 100644 --- a/src/stylesheets/datepicker.scss +++ b/src/stylesheets/datepicker.scss @@ -1,6 +1,6 @@ @use "sass:color"; -@import "variables.scss"; -@import "mixins.scss"; +@use "variables" as *; +@use "mixins" as *; .react-datepicker-wrapper { display: inline-block; @@ -347,10 +347,7 @@ h2.react-datepicker__current-month { &.react-datepicker__week-number--clickable { cursor: pointer; - &:not( - .react-datepicker__week-number--selected, - .react-datepicker__week-number--keyboard-selected - ):hover { + &:not(.react-datepicker__week-number--selected):hover { border-radius: $datepicker__border-radius; background-color: $datepicker__background-color; } @@ -362,17 +359,10 @@ h2.react-datepicker__current-month { color: #fff; &:hover { - background-color: color.adjust($datepicker__selected-color, $lightness: -5%); - } - } - - &--keyboard-selected { - border-radius: $datepicker__border-radius; - background-color: color.adjust($datepicker__selected-color, $lightness: 10%); - color: #fff; - - &:hover { - background-color: color.adjust($datepicker__selected-color, $lightness: -5%); + background-color: color.adjust( + $datepicker__selected-color, + $lightness: -5% + ); } } } @@ -418,7 +408,10 @@ h2.react-datepicker__current-month { color: #fff; &:not([aria-disabled="true"]):hover { - background-color: color.adjust($datepicker__highlighted-color, $lightness: -5%); + background-color: color.adjust( + $datepicker__highlighted-color, + $lightness: -5% + ); } &-custom-1 { @@ -454,7 +447,10 @@ h2.react-datepicker__current-month { } &:not([aria-disabled="true"]):hover { - background-color: color.adjust($datepicker__holidays-color, $lightness: -10%); + background-color: color.adjust( + $datepicker__holidays-color, + $lightness: -10% + ); } &:hover .overlay { @@ -471,17 +467,26 @@ h2.react-datepicker__current-month { color: #fff; &:not([aria-disabled="true"]):hover { - background-color: color.adjust($datepicker__selected-color, $lightness: -5%); + background-color: color.adjust( + $datepicker__selected-color, + $lightness: -5% + ); } } &--keyboard-selected { border-radius: $datepicker__border-radius; - background-color: color.adjust($datepicker__selected-color, $lightness: 45%); + background-color: color.adjust( + $datepicker__selected-color, + $lightness: 45% + ); color: rgb(0, 0, 0); &:not([aria-disabled="true"]):hover { - background-color: color.adjust($datepicker__selected-color, $lightness: -5%); + background-color: color.adjust( + $datepicker__selected-color, + $lightness: -5% + ); } } @@ -550,7 +555,10 @@ h2.react-datepicker__current-month { .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow { - border-top-color: color.adjust($datepicker__muted-color, $lightness: -10%); + border-top-color: color.adjust( + $datepicker__muted-color, + $lightness: -10% + ); } } @@ -613,11 +621,17 @@ h2.react-datepicker__current-month { background-color: $datepicker__muted-color; .react-datepicker__navigation--years-upcoming { - border-bottom-color: color.adjust($datepicker__muted-color, $lightness: -10%); + border-bottom-color: color.adjust( + $datepicker__muted-color, + $lightness: -10% + ); } .react-datepicker__navigation--years-previous { - border-top-color: color.adjust($datepicker__muted-color, $lightness: -10%); + border-top-color: color.adjust( + $datepicker__muted-color, + $lightness: -10% + ); } } diff --git a/src/stylesheets/mixins.scss b/src/stylesheets/mixins.scss index 2fb5443ac9..f9d02351c3 100644 --- a/src/stylesheets/mixins.scss +++ b/src/stylesheets/mixins.scss @@ -1,5 +1,7 @@ +@use "variables"; + %navigation-chevron { - border-color: $datepicker__muted-color; + border-color: variables.$datepicker__muted-color; border-style: solid; border-width: 3px 3px 0 0; content: ""; @@ -11,7 +13,7 @@ &--disabled, &--disabled:hover { - border-color: $datepicker__navigation-disabled-color; + border-color: variables.$datepicker__navigation-disabled-color; cursor: default; } } diff --git a/src/tab_loop.tsx b/src/tab_loop.tsx index 4a6e0b15e4..a830e25efe 100644 --- a/src/tab_loop.tsx +++ b/src/tab_loop.tsx @@ -1,7 +1,10 @@ import React, { Component, createRef } from "react"; -interface TabLoopProps extends React.PropsWithChildren { +import type { ReactNode } from "react"; + +interface TabLoopProps { enableTabLoop?: boolean; + children?: ReactNode | undefined; } const focusableElementsSelector = @@ -51,7 +54,7 @@ export default class TabLoop extends Component { this.tabLoopRef = createRef(); } - private tabLoopRef: React.RefObject; + private tabLoopRef: React.RefObject; /** * `getTabChildren` is a method of the `TabLoop` class that retrieves all tabbable children of the component. diff --git a/src/test/calendar_test.test.tsx b/src/test/calendar_test.test.tsx index 9bf6d34e91..5669aa6c60 100644 --- a/src/test/calendar_test.test.tsx +++ b/src/test/calendar_test.test.tsx @@ -36,6 +36,7 @@ import DatePicker from "../index"; import { getKey, + getRandomMonthExcludingCurrent, SafeElementWrapper, safeQuerySelector, safeQuerySelectorAll, @@ -447,6 +448,40 @@ describe("Calendar", () => { expect(nextButtonAriaLabel).toBe(nextYearAriaLabel); }); + it("should not have previous month button when selecting a date in the second month, when min date is specified", () => { + const minDate = new Date("2024-11-06"); + const maxDate = new Date("2025-01-01"); + const selectedDate = minDate; + + const { container } = render( + , + ); + + expect( + container.querySelector(".react-datepicker__navigation--previous"), + ).toBe(null); + + const secondMonthDate = safeQuerySelectorAll( + container, + ".react-datepicker__day--009", + )[1]; + if (!secondMonthDate) { + throw new Error("second month date is not found"); + } + + fireEvent.click(secondMonthDate); + + expect( + container.querySelector(".react-datepicker__navigation--previous"), + ).toBe(null); + }); + describe("custom header", () => { const months = [ "January", @@ -1287,11 +1322,10 @@ describe("Calendar", () => { .safeQuerySelector("select") .getElement(); + const month = getRandomMonthExcludingCurrent(); fireEvent.change(select, { target: { - value: Array.from( - select.querySelectorAll("option"), - ).at(-2)?.value, + value: month, }, }); diff --git a/src/test/test_utils.ts b/src/test/test_utils.ts index 5e576795bc..54f8073c57 100644 --- a/src/test/test_utils.ts +++ b/src/test/test_utils.ts @@ -68,6 +68,17 @@ export const range = (from: number, to: number): number[] => { return list; }; +export const getRandomMonthExcludingCurrent = (): number => { + const currentMonth = new Date().getMonth(); + + let randomMonth; + do { + randomMonth = Math.floor(Math.random() * 12); + } while (randomMonth === currentMonth); + + return randomMonth; +}; + export const openDateInput = (container: Element) => { const dateInput = container.querySelector("input")!; fireEvent.focus(dateInput); diff --git a/src/test/week_number_test.test.tsx b/src/test/week_number_test.test.tsx index baa704cfa4..7019c7da41 100644 --- a/src/test/week_number_test.test.tsx +++ b/src/test/week_number_test.test.tsx @@ -186,11 +186,6 @@ describe("WeekNumber", () => { ) as HTMLDivElement; expect(weekNumber).not.toBeNull(); - expect( - weekNumber?.classList.contains( - "react-datepicker__week-number--keyboard-selected", - ), - ).toBe(false); expect(weekNumber?.tabIndex).toBe(0); }); @@ -212,11 +207,6 @@ describe("WeekNumber", () => { ".react-datepicker__week-number", ) as HTMLDivElement; expect(weekNumber).not.toBeNull(); - expect( - weekNumber?.classList.contains( - "react-datepicker__week-number--keyboard-selected", - ), - ).toBe(true); expect(weekNumber.tabIndex).toBe(0); }); @@ -267,11 +257,6 @@ describe("WeekNumber", () => { const weekNumber = container.querySelector( ".react-datepicker__week-number", ) as HTMLDivElement; - expect( - weekNumber?.classList.contains( - "react-datepicker__week-number--keyboard-selected", - ), - ).toBe(false); expect(weekNumber.tabIndex).toBe(-1); }); }); @@ -300,6 +285,44 @@ describe("WeekNumber", () => { ).toBe(true); }); + it("shouldn't have the class 'react-datepicker__week-number--clickable' if isWeekDisabled is true", () => { + const { container } = render( + {}} + isWeekDisabled + />, + ); + const weekNumber = container.querySelector( + ".react-datepicker__week-number", + ); + expect( + weekNumber?.classList.contains( + "react-datepicker__week-number--clickable", + ), + ).toBe(false); + }); + + it("should have the class 'react-datepicker__week-number--clickable' if isWeekDisabled is false and onClick is defined", () => { + const { container } = render( + {}} + isWeekDisabled={false} + />, + ); + const weekNumber = container.querySelector( + ".react-datepicker__week-number", + ); + expect( + weekNumber?.classList.contains( + "react-datepicker__week-number--clickable", + ), + ).toBe(true); + }); + it("should have the class 'react-datepicker__week-number--selected' if selected is current week and preselected is also current week and has the onClick Props", () => { const currentWeekNumber = newDate("2023-10-22T13:09:53+02:00"); const { container } = render( @@ -403,11 +426,6 @@ describe("WeekNumber", () => { "react-datepicker__week-number--selected", ), ).toBe(false); - expect( - weekNumber?.classList.contains( - "react-datepicker__week-number--keyboard-selected", - ), - ).toBe(true); }); it("should have the class 'react-datepicker__week-number--selected' if selected is not current week and preselected is not current week", () => { @@ -430,11 +448,6 @@ describe("WeekNumber", () => { "react-datepicker__week-number--selected", ), ).toBe(false); - expect( - weekNumber?.classList.contains( - "react-datepicker__week-number--keyboard-selected", - ), - ).toBe(false); }); }); }); diff --git a/src/time.tsx b/src/time.tsx index 11e30634cd..4e1bb3d513 100644 --- a/src/time.tsx +++ b/src/time.tsx @@ -185,7 +185,7 @@ export default class Time extends Component { this.props.handleOnKeyDown?.(event); }; - renderTimes = (): JSX.Element[] => { + renderTimes = (): React.ReactElement[] => { let times: Date[] = []; const format = typeof this.props.format === "string" ? this.props.format : "p"; @@ -228,7 +228,7 @@ export default class Time extends Component { return prev; }, times[0]); - return times.map((time): JSX.Element => { + return times.map((time): React.ReactElement => { return (
  • { }); }; - renderTimeCaption = (): JSX.Element => { + renderTimeCaption = (): React.ReactElement => { if (this.props.showTimeCaption === false) { return <>; } diff --git a/src/week.tsx b/src/week.tsx index 0027d557a3..1cfee1ad23 100644 --- a/src/week.tsx +++ b/src/week.tsx @@ -113,6 +113,20 @@ export default class Week extends Component { return getWeek(date); }; + isWeekDisabled = (): boolean => { + const startOfWeek = this.startOfWeek(); + const endOfWeek = addDays(startOfWeek, 6); + + let processingDate = new Date(startOfWeek); + while (processingDate <= endOfWeek) { + if (!this.isDisabled(processingDate)) return false; + + processingDate = addDays(processingDate, 1); + } + + return true; + }; + renderDays = () => { const startOfWeek = this.startOfWeek(); const days = []; @@ -128,27 +142,32 @@ export default class Week extends Component { {...Week.defaultProps} {...this.props} weekNumber={weekNumber} + isWeekDisabled={this.isWeekDisabled()} date={startOfWeek} onClick={onClickAction} />, ); } return days.concat( - [0, 1, 2, 3, 4, 5, 6].map((offset: number): JSX.Element => { - const day = addDays(startOfWeek, offset); - return ( - - ); - }), + [0, 1, 2, 3, 4, 5, 6].map( + (offset: number): React.ReactElement => { + const day = addDays(startOfWeek, offset); + return ( + + ); + }, + ), ); }; @@ -164,7 +183,7 @@ export default class Week extends Component { !isSameDay(this.startOfWeek(), this.props.selected) && isSameDay(this.startOfWeek(), this.props.preSelection); - render(): JSX.Element { + render(): React.ReactElement { const weekNumberClasses = { "react-datepicker__week": true, "react-datepicker__week--selected": isSameDay( diff --git a/src/week_number.tsx b/src/week_number.tsx index 0340466ab4..02a9eb3a2b 100644 --- a/src/week_number.tsx +++ b/src/week_number.tsx @@ -18,6 +18,7 @@ interface WeekNumberProps { handleOnKeyDown?: React.KeyboardEventHandler; containerRef?: React.RefObject; isInputFocused?: boolean; + isWeekDisabled?: boolean; } export default class WeekNumber extends Component { @@ -108,20 +109,19 @@ export default class WeekNumber extends Component { this.weekNumberEl.current.focus({ preventScroll: true }); }; - render(): JSX.Element { + render(): React.ReactElement { const { weekNumber, + isWeekDisabled, ariaLabelPrefix = WeekNumber.defaultProps.ariaLabelPrefix, onClick, } = this.props; const weekNumberClasses = { "react-datepicker__week-number": true, - "react-datepicker__week-number--clickable": !!onClick, + "react-datepicker__week-number--clickable": !!onClick && !isWeekDisabled, "react-datepicker__week-number--selected": !!onClick && isSameDay(this.props.date, this.props.selected), - "react-datepicker__week-number--keyboard-selected": - this.isKeyboardSelected(), }; return (
    ( Component: React.ComponentType, ) { type R = Omit & WithFloatingProps; - const WithFloating: React.FC = (props): JSX.Element => { + const WithFloating: React.FC = (props): React.ReactElement => { const hidePopper: boolean = typeof props.hidePopper === "boolean" ? props.hidePopper : true; - const arrowRef: React.RefObject = useRef(null); + const arrowRef: React.RefObject = useRef(null); const floatingProps = useFloating({ open: !hidePopper, whileElementsMounted: autoUpdate, diff --git a/src/year.tsx b/src/year.tsx index bb8c36a968..a32c3e7df4 100644 --- a/src/year.tsx +++ b/src/year.tsx @@ -30,7 +30,6 @@ interface YearProps clearSelectingDate?: VoidFunction; date?: Date; disabledKeyboardNavigation?: boolean; - endDate?: Date; onDayClick?: ( date: Date, event: @@ -55,7 +54,8 @@ interface YearProps selectsEnd?: boolean; selectsStart?: boolean; selectsRange?: boolean; - startDate?: Date; + startDate?: Date | null; + endDate?: Date | null; yearItemNumber?: number; handleOnKeyDown?: React.KeyboardEventHandler; yearClassName?: (date: Date) => string; @@ -407,15 +407,6 @@ export default class Year extends Component { return y === preSelected && !isPreSelectedYearDisabled ? "0" : "-1"; }; - getYearContainerClassNames = () => { - const { selectingDate, selectsStart, selectsEnd, selectsRange } = - this.props; - return clsx("react-datepicker__year", { - "react-datepicker__year--selecting-range": - selectingDate && (selectsStart || selectsEnd || selectsRange), - }); - }; - getYearContent = (y: number) => { return this.props.renderYearContent ? this.props.renderYearContent(y) : y; }; @@ -475,7 +466,7 @@ export default class Year extends Component { } return ( -
    +
    { + renderSelectOptions = (): React.ReactElement[] => { const minYear: number = this.props.minDate ? getYear(this.props.minDate) : 1900; @@ -36,7 +36,7 @@ export default class YearDropdown extends Component< ? getYear(this.props.maxDate) : 2100; - const options: JSX.Element[] = []; + const options: React.ReactElement[] = []; for (let i = minYear; i <= maxYear; i++) { options.push(