fix: correct type inheritance in CalendarContainer props #5365
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Update CalendarContainerProps to extend HTMLAttributes<HTMLDivElement> instead of HTMLDivElement. This fixes the type definition to properly include all valid HTML attributes that can be passed to the div element, improving type safety and developer experience.
![pullrequest[bot]](https://avatars.githubusercontent.com/in/3434?s=60&v=4){kind=small}
There was a problem hiding this comment.
✅ This pull request was sent to the PullRequest network for review. Expert reviewers are now being matched to your request based on the code's requirements. Stay tuned!
What to expect from this code review:
- Comments posted to any areas of potential concern or improvement.
- Detailed feedback or actions needed to resolve issues that are found.
- Turnaround times vary, but we aim to be swift.
@iskkiri you can click here to see the review status or cancel the code review job.
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #5365 +/- ##
=======================================
Coverage 96.87% 96.87%
=======================================
Files 30 30
Lines 3358 3358
Branches 1428 1427 -1
=======================================
Hits 3253 3253
Misses 103 103
Partials 2 2 ☔ View full report in Codecov by Sentry. |
DawoudIO
added a commit
to ChurchCRM/CRM
that referenced
this pull request
Mar 22, 2025
 <h3>Snyk has created this PR to upgrade react-datepicker from 8.0.0 to 8.1.0.</h3> :information_source: Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project. <hr/> - The recommended version is **1 version** ahead of your current version. - The recommended version was released **22 days ago**. <details> <summary><b>Release notes</b></summary> <br/> <details> <summary>Package name: <b>react-datepicker</b></summary> <ul> <li> <b>8.1.0</b> - <a href="https://redirect.github.com/Hacker0x01/react-datepicker/releases/tag/v8.1.0">2025-02-17</a></br><h2>What's Changed</h2> <ul> <li>Fix <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2730594768" data-permission-text="Title is private" data-url="Hacker0x01/react-datepicker#5274" data-hovercard-type="issue" data-hovercard-url="/Hacker0x01/react-datepicker/issues/5274/hovercard" href="https://redirect.github.com/Hacker0x01/react-datepicker/issues/5274">#5274</a>: 🐛 Auto refresh the input value with the previously entered valid value if any invalid value is entered (when the open state is closed) by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/balajis-qb/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://redirect.github.com/balajis-qb">@ balajis-qb</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2856011361" data-permission-text="Title is private" data-url="Hacker0x01/react-datepicker#5417" data-hovercard-type="pull_request" data-hovercard-url="/Hacker0x01/react-datepicker/pull/5417/hovercard" href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5417">#5417</a></li> <li>Fix: Make CalendarIconProps.icon optional to prevent type error by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jingjing2222/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://redirect.github.com/jingjing2222">@ jingjing2222</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2844544321" data-permission-text="Title is private" data-url="Hacker0x01/react-datepicker#5406" data-hovercard-type="pull_request" data-hovercard-url="/Hacker0x01/react-datepicker/pull/5406/hovercard" href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5406">#5406</a></li> </ul> <h2>New Contributors</h2> <ul> <li><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jingjing2222/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://redirect.github.com/jingjing2222">@ jingjing2222</a> made their first contribution in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2844544321" data-permission-text="Title is private" data-url="Hacker0x01/react-datepicker#5406" data-hovercard-type="pull_request" data-hovercard-url="/Hacker0x01/react-datepicker/pull/5406/hovercard" href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5406">#5406</a></li> </ul> <p><strong>Full Changelog</strong>: <a class="commit-link" href="https://redirect.github.com/Hacker0x01/react-datepicker/compare/v8.0.0...v8.1.0"><tt>v8.0.0...v8.1.0</tt></a></p> </li> <li> <b>8.0.0</b> - <a href="https://redirect.github.com/Hacker0x01/react-datepicker/releases/tag/v8.0.0">2025-01-31</a></br><h2>Breaking changes</h2> <ul> <li>fix: Inconsistent/broken behavior in <code>parseDate</code> by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/laug/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://redirect.github.com/laug">@ laug</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2470564504" data-permission-text="Title is private" data-url="Hacker0x01/react-datepicker#5036" data-hovercard-type="pull_request" data-hovercard-url="/Hacker0x01/react-datepicker/pull/5036/hovercard" href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5036">#5036</a></li> </ul> <h2>Other changes</h2> <ul> <li>🚨 Fix TypeScript Linting warnings for React 19 upgrade by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/balajis-qb/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://redirect.github.com/balajis-qb">@ balajis-qb</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2770364520" data-permission-text="Title is private" data-url="Hacker0x01/react-datepicker#5301" data-hovercard-type="pull_request" data-hovercard-url="/Hacker0x01/react-datepicker/pull/5301/hovercard" href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5301">#5301</a></li> <li>Upgrade to React 19 by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/martijnrusschen/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://redirect.github.com/martijnrusschen">@ martijnrusschen</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2770234268" data-permission-text="Title is private" data-url="Hacker0x01/react-datepicker#5300" data-hovercard-type="pull_request" data-hovercard-url="/Hacker0x01/react-datepicker/pull/5300/hovercard" href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5300">#5300</a></li> <li>fix: fix click outside within Shadow DOM by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/meriouma/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://redirect.github.com/meriouma">@ meriouma</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2776725692" data-permission-text="Title is private" data-url="Hacker0x01/react-datepicker#5310" data-hovercard-type="pull_request" data-hovercard-url="/Hacker0x01/react-datepicker/pull/5310/hovercard" href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5310">#5310</a></li> <li>Fix condition preventing props.onFocus execution by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/dshster/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://redirect.github.com/dshster">@ dshster</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2784453093" data-permission-text="Title is private" data-url="Hacker0x01/react-datepicker#5315" data-hovercard-type="pull_request" data-hovercard-url="/Hacker0x01/react-datepicker/pull/5315/hovercard" href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5315">#5315</a></li> <li>chore(deps): upgrade date-fns to v4.1.0 by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/paolostyle/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://redirect.github.com/paolostyle">@ paolostyle</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2800207617" data-permission-text="Title is private" data-url="Hacker0x01/react-datepicker#5326" data-hovercard-type="pull_request" data-hovercard-url="/Hacker0x01/react-datepicker/pull/5326/hovercard" href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5326">#5326</a></li> <li>Fix deprecation warning hljs by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/martijnrusschen/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://redirect.github.com/martijnrusschen">@ martijnrusschen</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2800232085" data-permission-text="Title is private" data-url="Hacker0x01/react-datepicker#5329" data-hovercard-type="pull_request" data-hovercard-url="/Hacker0x01/react-datepicker/pull/5329/hovercard" href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5329">#5329</a></li> </ul> <h2>New Contributors</h2> <ul> <li><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/meriouma/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://redirect.github.com/meriouma">@ meriouma</a> made their first contribution in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2776725692" data-permission-text="Title is private" data-url="Hacker0x01/react-datepicker#5310" data-hovercard-type="pull_request" data-hovercard-url="/Hacker0x01/react-datepicker/pull/5310/hovercard" href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5310">#5310</a></li> <li><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/dshster/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://redirect.github.com/dshster">@ dshster</a> made their first contribution in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2784453093" data-permission-text="Title is private" data-url="Hacker0x01/react-datepicker#5315" data-hovercard-type="pull_request" data-hovercard-url="/Hacker0x01/react-datepicker/pull/5315/hovercard" href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5315">#5315</a></li> <li><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/paolostyle/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://redirect.github.com/paolostyle">@ paolostyle</a> made their first contribution in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2800207617" data-permission-text="Title is private" data-url="Hacker0x01/react-datepicker#5326" data-hovercard-type="pull_request" data-hovercard-url="/Hacker0x01/react-datepicker/pull/5326/hovercard" href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5326">#5326</a></li> <li><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/iskkiri/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://redirect.github.com/iskkiri">@ iskkiri</a> made their first contribution in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2820255279" data-permission-text="Title is private" data-url="Hacker0x01/react-datepicker#5365" data-hovercard-type="pull_request" data-hovercard-url="/Hacker0x01/react-datepicker/pull/5365/hovercard" href="https://redirect.github.com/Hacker0x01/react-datepicker/pull/5365">#5365</a></li> </ul> <p><strong>Full Changelog</strong>: <a class="commit-link" href="https://redirect.github.com/Hacker0x01/react-datepicker/compare/v7.6.0...v8.0.0"><tt>v7.6.0...v8.0.0</tt></a></p> </li> </ul> from <a href="https://redirect.github.com/Hacker0x01/react-datepicker/releases">react-datepicker GitHub release notes</a> </details> </details> --- > [!IMPORTANT] > > - Check the changes in this PR to ensure they won't cause issues with your project. > - This PR was automatically created by Snyk using the credentials of a real user. --- **Note:** _You are seeing this because you or someone else with access to this repository has authorized Snyk to open upgrade PRs._ **For more information:** <img src="https://api.segment.io/v1/pixel/track?data=eyJ3cml0ZUtleSI6InJyWmxZcEdHY2RyTHZsb0lYd0dUcVg4WkFRTnNCOUEwIiwiYW5vbnltb3VzSWQiOiI5YmVkMGE3MS0yMzA3LTQ4NDgtYTk1OS02NTNhOTA1M2E3NjMiLCJldmVudCI6IlBSIHZpZXdlZCIsInByb3BlcnRpZXMiOnsicHJJZCI6IjliZWQwYTcxLTIzMDctNDg0OC1hOTU5LTY1M2E5MDUzYTc2MyJ9fQ==" width="0" height="0"/> > - 🧐 [View latest project report](https://app.snyk.io/org/dawoudio/project/e27b08aa-e5d2-4b10-8303-630a69d0b669?utm_source=github&utm_medium=referral&page=upgrade-pr) > - 📜 [Customise PR templates](https://docs.snyk.io/scan-using-snyk/pull-requests/snyk-fix-pull-or-merge-requests/customize-pr-templates?utm_source=&utm_content=fix-pr-template) > - 🛠 [Adjust upgrade PR settings](https://app.snyk.io/org/dawoudio/project/e27b08aa-e5d2-4b10-8303-630a69d0b669/settings/integration?utm_source=github&utm_medium=referral&page=upgrade-pr) > - 🔕 [Ignore this dependency or unsubscribe from future upgrade PRs](https://app.snyk.io/org/dawoudio/project/e27b08aa-e5d2-4b10-8303-630a69d0b669/settings/integration?pkg=react-datepicker&utm_source=github&utm_medium=referral&page=upgrade-pr#auto-dep-upgrades) [//]: # 'snyk:metadata:{"customTemplate":{"variablesUsed":[],"fieldsUsed":[]},"dependencies":[{"name":"react-datepicker","from":"8.0.0","to":"8.1.0"}],"env":"prod","hasFixes":false,"isBreakingChange":false,"isMajorUpgrade":false,"issuesToFix":[],"prId":"9bed0a71-2307-4848-a959-653a9053a763","prPublicId":"9bed0a71-2307-4848-a959-653a9053a763","packageManager":"npm","priorityScoreList":[],"projectPublicId":"e27b08aa-e5d2-4b10-8303-630a69d0b669","projectUrl":"https://app.snyk.io/org/dawoudio/project/e27b08aa-e5d2-4b10-8303-630a69d0b669?utm_source=github&utm_medium=referral&page=upgrade-pr","prType":"upgrade","templateFieldSources":{"branchName":"default","commitMessage":"default","description":"default","title":"default"},"templateVariants":[],"type":"auto","upgrade":[],"upgradeInfo":{"versionsDiff":1,"publishedDate":"2025-02-17T20:53:33.623Z"},"vulns":[]}'
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Linked issue: #5364
Problem
The
CalendarContainerPropsinterface currently extendsReact.PropsWithChildren<HTMLDivElement>, which causes TypeScript errors when using CalendarContainer in custom implementations. This incorrect type inheritance prevents proper type checking for HTML attributes.Changes
CalendarContainerPropsto extendReact.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>instead ofHTMLDivElementScreenshots
N/A
To reviewers
This is a type-only change that fixes TypeScript errors while maintaining the same runtime behavior. The change makes the type definition more accurate by properly inheriting HTML attribute types.
Contribution checklist