[ { "path": ".gitattributes", "content": "# Auto detect text files and perform LF normalization\n* text=auto\n\n# Custom for Visual Studio\n*.cs diff=csharp\n\n# Standard to msysgit\n*.doc\t diff=astextplain\n*.DOC\t diff=astextplain\n*.docx diff=astextplain\n*.DOCX diff=astextplain\n*.dot diff=astextplain\n*.DOT diff=astextplain\n*.pdf diff=astextplain\n*.PDF\t diff=astextplain\n*.rtf\t diff=astextplain\n*.RTF\t diff=astextplain\n" }, { "path": ".github/FUNDING.yml", "content": "github: wojtekmaj\nopen_collective: react-date-picker\n" }, { "path": ".github/workflows/ci.yml", "content": "name: CI\n\non:\n push:\n branches: ['*']\n pull_request:\n branches: [main]\n\nenv:\n HUSKY: 0\n\njobs:\n lint:\n name: Static code analysis\n runs-on: ubuntu-24.04-arm\n\n steps:\n - name: Checkout\n uses: actions/checkout@v6\n\n - name: Setup Biome\n uses: biomejs/setup-biome@v2\n\n - name: Run tests\n run: biome lint\n\n typescript:\n name: Type checking\n runs-on: ubuntu-24.04-arm\n\n steps:\n - name: Checkout\n uses: actions/checkout@v6\n\n - name: Cache Yarn cache\n uses: actions/cache@v5\n env:\n cache-name: yarn-cache\n with:\n path: ~/.yarn/berry/cache\n key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}\n restore-keys: |\n ${{ runner.os }}-${{ env.cache-name }}\n\n - name: Use Node.js\n uses: actions/setup-node@v6\n with:\n node-version: '24'\n\n - name: Install Corepack\n run: npm install -g corepack\n\n - name: Install dependencies\n run: yarn --immutable\n env:\n PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: true\n\n - name: Build package\n run: yarn build\n\n - name: Run type checking\n run: yarn tsc\n\n format:\n name: Formatting\n runs-on: ubuntu-24.04-arm\n\n steps:\n - name: Checkout\n uses: actions/checkout@v6\n\n - name: Setup Biome\n uses: biomejs/setup-biome@v2\n\n - name: Run formatting\n run: biome format\n\n unit:\n name: Unit tests\n runs-on: ubuntu-24.04-arm\n\n steps:\n - name: Checkout\n uses: actions/checkout@v6\n\n - name: Cache Yarn cache\n uses: actions/cache@v5\n env:\n cache-name: yarn-cache\n with:\n path: ~/.yarn/berry/cache\n key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}\n restore-keys: |\n ${{ runner.os }}-${{ env.cache-name }}\n\n - name: Cache ~/.cache/ms-playwright\n id: playwright-cache\n uses: actions/cache@v5\n env:\n cache-name: playwright-cache\n with:\n path: ~/.cache/ms-playwright\n key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}\n\n - name: Use Node.js\n uses: actions/setup-node@v6\n with:\n node-version: '24'\n\n - name: Install Corepack\n run: npm install -g corepack\n\n - name: Install dependencies\n run: yarn --immutable\n\n - name: Install Playwright browsers\n if: steps.playwright-cache.outputs.cache-hit != 'true'\n run: yarn workspace @wojtekmaj/react-daterange-picker playwright install chromium-headless-shell\n\n - name: Run tests\n run: yarn unit\n" }, { "path": ".github/workflows/close-stale-issues.yml", "content": "name: Close stale issues\n\non:\n schedule:\n - cron: '0 0 * * 1' # Every Monday\n workflow_dispatch:\n\njobs:\n close-issues:\n name: Close stale issues\n runs-on: ubuntu-24.04-arm\n\n steps:\n - name: Close stale issues\n uses: actions/stale@v8\n with:\n days-before-issue-stale: 90\n days-before-issue-close: 14\n stale-issue-label: 'stale'\n stale-issue-message: 'This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.'\n close-issue-message: 'This issue was closed because it has been stalled for 14 days with no activity.'\n exempt-issue-labels: 'fresh'\n remove-issue-stale-when-updated: true\n days-before-pr-stale: -1\n days-before-pr-close: -1\n" }, { "path": ".github/workflows/publish.yml", "content": "name: Publish\n\non:\n release:\n types: [published]\n\nenv:\n HUSKY: 0\n\npermissions:\n id-token: write\n\njobs:\n publish:\n name: Publish\n runs-on: ubuntu-24.04-arm\n\n steps:\n - name: Checkout\n uses: actions/checkout@v6\n\n - name: Cache Yarn cache\n uses: actions/cache@v5\n env:\n cache-name: yarn-cache\n with:\n path: ~/.yarn/berry/cache\n key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}\n restore-keys: |\n ${{ runner.os }}-${{ env.cache-name }}\n\n - name: Use Node.js\n uses: actions/setup-node@v6\n with:\n node-version: '24'\n registry-url: 'https://registry.npmjs.org'\n\n - name: Install Corepack\n run: npm install -g corepack\n\n - name: Install dependencies\n run: yarn --immutable\n\n - name: Publish with latest tag\n if: github.event.release.prerelease == false\n run: yarn npm publish --tag latest\n working-directory: packages/react-daterange-picker\n\n - name: Publish with next tag\n if: github.event.release.prerelease == true\n run: yarn npm publish --tag next\n working-directory: packages/react-daterange-picker\n" }, { "path": ".gitignore", "content": "# OS\n.DS_Store\n\n# Cache\n.cache\n.playwright\n.tmp\n*.tsbuildinfo\n.eslintcache\n\n# Yarn\n.pnp.*\n**/.yarn/*\n!**/.yarn/patches\n!**/.yarn/plugins\n!**/.yarn/releases\n!**/.yarn/sdks\n!**/.yarn/versions\n\n# Project-generated directories and files\n__screenshots__\ncoverage\ndist\nnode_modules\nplaywright-report\ntest-results\npackage.tgz\n\n# Logs\nnpm-debug.log\nyarn-error.log\n\n# .env files\n**/.env\n**/.env.*\n!**/.env.example\n" }, { "path": ".husky/pre-commit", "content": "yarn format --staged --no-errors-on-unmatched --write\n" }, { "path": ".vscode/extensions.json", "content": "{\n \"recommendations\": [\"biomejs.biome\"],\n \"unwantedRecommendations\": [\"dbaeumer.jshint\", \"dbaeumer.vscode-eslint\", \"esbenp.prettier-vscode\"]\n}\n" }, { "path": ".vscode/settings.json", "content": "{\n \"editor.defaultFormatter\": \"biomejs.biome\",\n \"editor.formatOnSave\": true,\n \"search.exclude\": {\n \"**/.yarn\": true\n }\n}\n" }, { "path": ".yarnrc.yml", "content": "enableHardenedMode: false\n\nenableScripts: false\n\nlogFilters:\n - code: YN0076\n level: discard\n\nnodeLinker: node-modules\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2018–2026 Wojciech Maj\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "biome.json", "content": "{\n \"$schema\": \"https://biomejs.dev/schemas/2.4.10/schema.json\",\n \"files\": {\n \"includes\": [\n \"**\",\n \"!**/.yarn\",\n \"!**/coverage\",\n \"!**/dist\",\n \"!**/.pnp.cjs\",\n \"!**/.pnp.loader.mjs\"\n ]\n },\n \"assist\": {\n \"actions\": {\n \"source\": {\n \"organizeImports\": {\n \"level\": \"on\",\n \"options\": {\n \"groups\": [\n { \"type\": false, \"source\": \":NODE:\" },\n { \"type\": false, \"source\": [\"vitest\", \"vitest/**\", \"@vitest/**\", \"vitest-*\"] },\n { \"type\": false, \"source\": [\"react\", \"react-dom\", \"react-dom/**\", \"react-native\"] },\n { \"type\": false, \"source\": [\":PACKAGE:\"] },\n \":BLANK_LINE:\",\n {\n \"type\": false,\n \"source\": [\n \":PATH:\",\n \"!**/hooks/*\",\n \"!**/use*.js\",\n \"!**/shared/*\",\n \"!**/utils/*\",\n \"!**/__mocks__/*\",\n \"!**/test-utils.js\"\n ]\n },\n \":BLANK_LINE:\",\n { \"type\": false, \"source\": [\"**/hooks/*\", \"**/use*.js\"] },\n \":BLANK_LINE:\",\n { \"type\": false, \"source\": [\"**/shared/*\", \"**/utils/*\"] },\n \":BLANK_LINE:\",\n { \"type\": false, \"source\": \"**/__mocks__/*\" },\n \":BLANK_LINE:\",\n { \"type\": false, \"source\": \"**/test-utils.js\" },\n \":BLANK_LINE:\",\n \":NODE:\",\n \":PACKAGE:\",\n \":PATH:\"\n ]\n }\n }\n }\n }\n },\n \"formatter\": {\n \"lineWidth\": 100,\n \"indentStyle\": \"space\"\n },\n \"linter\": {\n \"rules\": {\n \"complexity\": {\n \"noUselessSwitchCase\": \"off\"\n },\n \"correctness\": {\n \"noUnusedImports\": \"warn\",\n \"noUnusedVariables\": {\n \"level\": \"warn\",\n \"options\": {\n \"ignoreRestSiblings\": true\n }\n }\n },\n \"suspicious\": {\n \"noConsole\": \"warn\"\n }\n }\n },\n \"css\": {\n \"formatter\": {\n \"quoteStyle\": \"single\"\n }\n },\n \"javascript\": {\n \"formatter\": {\n \"quoteStyle\": \"single\"\n }\n },\n \"overrides\": [\n {\n \"includes\": [\"**/vite.config.ts\"],\n \"linter\": {\n \"rules\": {\n \"suspicious\": {\n \"noConsole\": \"off\"\n }\n }\n }\n }\n ]\n}\n" }, { "path": "package.json", "content": "{\n \"name\": \"@wojtekmaj/react-daterange-picker-monorepo\",\n \"version\": \"1.0.0\",\n \"description\": \"@wojtekmaj/react-daterange-picker monorepo\",\n \"type\": \"module\",\n \"workspaces\": [\n \"packages/*\",\n \"test\"\n ],\n \"scripts\": {\n \"build\": \"yarn workspace @wojtekmaj/react-daterange-picker build\",\n \"dev\": \"yarn workspace @wojtekmaj/react-daterange-picker watch & yarn workspace test dev\",\n \"format\": \"yarn workspaces foreach --all run format\",\n \"lint\": \"yarn workspaces foreach --all run lint\",\n \"postinstall\": \"husky\",\n \"test\": \"yarn workspaces foreach --all run test\",\n \"tsc\": \"yarn workspaces foreach --all run tsc\",\n \"unit\": \"yarn workspaces foreach --all run unit\"\n },\n \"devDependencies\": {\n \"husky\": \"^9.0.0\"\n },\n \"packageManager\": \"yarn@4.10.3\"\n}\n" }, { "path": "packages/react-daterange-picker/LICENSE", "content": "MIT License\n\nCopyright (c) 2018–2026 Wojciech Maj\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "packages/react-daterange-picker/README.md", "content": "[![npm](https://img.shields.io/npm/v/@wojtekmaj/react-daterange-picker.svg)](https://www.npmjs.com/package/@wojtekmaj/react-daterange-picker) ![downloads](https://img.shields.io/npm/dt/@wojtekmaj/react-daterange-picker.svg) [![CI](https://github.com/wojtekmaj/react-daterange-picker/actions/workflows/ci.yml/badge.svg)](https://github.com/wojtekmaj/react-daterange-picker/actions)\n\n# React-DateRange-Picker\n\nA date range picker for your React app.\n\n- Pick days, months, years, or even decades\n- Supports virtually any language\n- No moment.js needed\n\n## tl;dr\n\n- Install by executing `npm install @wojtekmaj/react-daterange-picker` or `yarn add @wojtekmaj/react-daterange-picker`.\n- Import by adding `import DateRangePicker from '@wojtekmaj/react-daterange-picker'`.\n- Use by adding ``. Use `onChange` prop for getting new values.\n\n## Demo\n\nA minimal demo page can be found in `sample` directory.\n\n[Online demo](https://projects.wojtekmaj.pl/react-daterange-picker/) is also available!\n\n## Consider native alternative\n\nIf you don't need to support legacy browsers and don't need the advanced features this package provides, consider using native date input instead. It's more accessible, adds no extra weight to your bundle, and works better on mobile devices.\n\n```tsx\n\n\n```\n\n## Looking for a time picker or a datetime picker?\n\nReact-DateRange-Picker will play nicely with [React-Date-Picker](https://github.com/wojtekmaj/react-date-picker), [React-Time-Picker](https://github.com/wojtekmaj/react-time-picker) and [React-DateTime-Picker](https://github.com/wojtekmaj/react-datetime-picker). Check them out!\n\n## Getting started\n\n### Compatibility\n\nYour project needs to use React 16.3 or later. If you use an older version of React, please refer to the table below to find a suitable React-DateRange-Picker version.\n\n| React version | Newest compatible React-DateRange-Picker version |\n| ------------- | ------------------------------------------------ |\n| ≥16.8 | latest |\n| ≥16.3 | 4.x |\n| ≥16.0 | 2.x |\n\n[React-Calendar](https://github.com/wojtekmaj/react-calendar), on which React-DateRange-Picker relies heavily, uses modern web technologies. That's why it's so fast, lightweight and easy to style. This, however, comes at a cost of [supporting only modern browsers](https://caniuse.com/#feat=internationalization).\n\n### Installation\n\nAdd React-DateRange-Picker to your project by executing `npm install @wojtekmaj/react-daterange-picker` or `yarn add @wojtekmaj/react-daterange-picker`.\n\n### Usage\n\nHere's an example of basic usage:\n\n```tsx\nimport { useState } from 'react';\nimport DateRangePicker from '@wojtekmaj/react-daterange-picker';\n\ntype ValuePiece = Date | null;\n\ntype Value = ValuePiece | [ValuePiece, ValuePiece];\n\nfunction MyApp() {\n const [value, onChange] = useState([new Date(), new Date()]);\n\n return (\n
\n \n
\n );\n}\n```\n\n### Custom styling\n\nIf you want to use default React-DateRange-Picker and React-Calendar styling to build upon it, you can import them by using:\n\n```ts\nimport '@wojtekmaj/react-daterange-picker/dist/DateRangePicker.css';\nimport 'react-calendar/dist/Calendar.css';\n```\n\n## User guide\n\n### DateRangePicker\n\nDisplays an input field complete with custom inputs, native input, and a calendar.\n\n#### Props\n\n| Prop name | Description | Default value | Example values |\n| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| autoFocus | Automatically focuses the input on mount. | n/a | `true` |\n| calendarAriaLabel | `aria-label` for the calendar button. | n/a | `\"Toggle calendar\"` |\n| calendarProps | Props to pass to React-Calendar component. | n/a | See [React-Calendar documentation](https://github.com/wojtekmaj/react-calendar) |\n| calendarIcon | Content of the calendar button. Setting the value explicitly to `null` will hide the icon. | (default icon) | |\n| className | Class name(s) that will be added along with `\"react-daterange-picker\"` to the main React-DateRange-Picker `
` element. | n/a |
  • String: `\"class1 class2\"`
  • Array of strings: `[\"class1\", \"class2 class3\"]`
|\n| clearAriaLabel | `aria-label` for the clear button. | n/a | `\"Clear value\"` |\n| clearIcon | Content of the clear button. Setting the value explicitly to `null` will hide the icon. | (default icon) |
  • String: `\"Clear\"`
  • React element: ``
  • React function: `ClearIcon`
|\n| closeCalendar | Whether to close the calendar on value selection. **Note**: It's recommended to use `shouldCloseCalendar` function instead. | `true` | `false` |\n| data-testid | `data-testid` attribute for the main React-DateRange-Picker `
` element. | n/a | `\"daterange-picker\"` |\n| dayAriaLabel | `aria-label` for the day input. | n/a | `\"Day\"` |\n| dayPlaceholder | `placeholder` for the day input. | `\"--\"` | `\"dd\"` |\n| disableCalendar | When set to `true`, will remove the calendar and the button toggling its visibility. | `false` | `true` |\n| disabled | Whether the date range picker should be disabled. | `false` | `true` |\n| format | Input format based on [Unicode Technical Standard #35](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table). Supported values are: `y`, `M`, `MM`, `MMM`, `MMMM`, `d`, `dd`. **Note**: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client. | n/a | `\"y-MM-dd\"` |\n| id | `id` attribute for the main React-DateRange-Picker `
` element. | n/a | `\"daterange-picker\"` |\n| isOpen | Whether the calendar should be opened. | `false` | `true` |\n| locale | Locale that should be used by the date range picker and the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). **Note**: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client. | Server locale/User's browser settings | `\"hu-HU\"` |\n| maxDate | Maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although React-DateRange-Picker will ensure that no later date is selected. | n/a | Date: `new Date()` |\n| maxDetail | The most detailed calendar view that the user shall see. View defined here also becomes the one on which clicking an item in the calendar will select a date and pass it to onChange. Can be `\"month\"`, `\"year\"`, `\"decade\"` or `\"century\"`. | `\"month\"` | `\"year\"` |\n| minDate | Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-DateRange-Picker will ensure that no earlier date is selected. | n/a | Date: `new Date()` |\n| monthAriaLabel | `aria-label` for the month input. | n/a | `\"Month\"` |\n| monthPlaceholder | `placeholder` for the month input. | `\"--\"` | `\"mm\"` |\n| name | Input name prefix. Date from/Date to fields will be named `\"yourprefix_from\"` and `\"yourprefix_to\"` respectively. | `\"daterange\"` | `\"myCustomName\"` |\n| nativeInputAriaLabel | `aria-label` for the native date input. | n/a | `\"Date\"` |\n| onCalendarClose | Function called when the calendar closes. | n/a | `() => alert('Calendar closed')` |\n| onCalendarOpen | Function called when the calendar opens. | n/a | `() => alert('Calendar opened')` |\n| onChange | Function called when the user picks a valid date. If any of the fields were excluded using custom `format`, `new Date(y, 0, 1, 0, 0, 0)`, where `y` is the current year, is going to serve as a \"base\". | n/a | `(value) => alert('New date is: ', value)` |\n| onFocus | Function called when the user focuses an input. | n/a | `(event) => alert('Focused input: ', event.target.name)` |\n| onInvalidChange | Function called when the user picks an invalid date. | n/a | `() => alert('Invalid date')` |\n| openCalendarOnFocus | Whether to open the calendar on input focus. **Note**: It's recommended to use `shouldOpenCalendar` function instead. | `true` | `false` |\n| portalContainer | Element to render the calendar in using portal. | n/a | `document.getElementById('my-div')` |\n| rangeDivider | Divider between date inputs. | `\"–\"` | `\" to \"` |\n| required | Whether date input should be required. | `false` | `true` |\n| shouldCloseCalendar | Function called before the calendar closes. `reason` can be `\"buttonClick\"`, `\"escape\"`, `\"outsideAction\"`, or `\"select\"`. If it returns `false`, the calendar will not close. | n/a | `({ reason }) => reason !== 'outsideAction'` |\n| shouldOpenCalendar | Function called before the calendar opens. `reason` can be `\"buttonClick\"` or `\"focus\"`. If it returns `false`, the calendar will not open. | n/a | `({ reason }) => reason !== 'focus'` |\n| showLeadingZeros | Whether leading zeros should be rendered in date inputs. | `false` | `true` |\n| value | Input value. | n/a |
  • Date: `new Date(2017, 0, 1)`
  • String: `\"2017-01-01\"`
  • An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`
  • An array of strings: `[\"2017-01-01\", \"2017-08-01\"]`
|\n| yearAriaLabel | `aria-label` for the year input. | n/a | `\"Year\"` |\n| yearPlaceholder | `aria-label` for the year input. | `\"----\"` | `\"yyyy\"` |\n\n### Calendar\n\nDateRangePicker component passes all props to React-Calendar, with the exception of `className` (you can use `calendarClassName` for that instead). There are tons of customizations you can do! For more information, see [Calendar component props](https://github.com/wojtekmaj/react-calendar#props).\n\n## License\n\nThe MIT License.\n\n## Author\n\n\n \n \n \n \n
\n \"Wojciech\n \n Wojciech Maj\n
\n" }, { "path": "packages/react-daterange-picker/package.json", "content": "{\n \"name\": \"@wojtekmaj/react-daterange-picker\",\n \"version\": \"7.0.0\",\n \"description\": \"A date range picker for your React app.\",\n \"type\": \"module\",\n \"sideEffects\": [\n \"*.css\"\n ],\n \"main\": \"./dist/index.js\",\n \"source\": \"./src/index.ts\",\n \"types\": \"./dist/index.d.ts\",\n \"exports\": {\n \".\": \"./dist/index.js\",\n \"./*\": \"./*\"\n },\n \"scripts\": {\n \"build\": \"yarn build-js && yarn copy-styles\",\n \"build-js\": \"tsc --project tsconfig.build.json\",\n \"clean\": \"node -e \\\"fs.rmSync('./dist', { recursive: true, force: true })\\\"\",\n \"copy-styles\": \"cpy 'src/**/*.css' dist\",\n \"format\": \"biome format\",\n \"lint\": \"biome lint\",\n \"prepack\": \"yarn clean && yarn build\",\n \"test\": \"yarn lint && yarn tsc && yarn format && yarn unit\",\n \"tsc\": \"tsc\",\n \"unit\": \"vitest\",\n \"watch\": \"yarn build-js --watch & node --eval \\\"fs.watch('src', () => child_process.exec('yarn copy-styles'))\\\"\"\n },\n \"keywords\": [\n \"calendar\",\n \"date\",\n \"date-picker\",\n \"date-range\",\n \"date-range-picker\",\n \"month-picker\",\n \"react\"\n ],\n \"author\": {\n \"name\": \"Wojciech Maj\",\n \"email\": \"kontakt@wojtekmaj.pl\"\n },\n \"license\": \"MIT\",\n \"dependencies\": {\n \"clsx\": \"^2.0.0\",\n \"make-event-props\": \"^2.0.0\",\n \"react-calendar\": \"^6.0.0\",\n \"react-date-picker\": \"^12.0.1\",\n \"react-fit\": \"^3.0.0\"\n },\n \"devDependencies\": {\n \"@biomejs/biome\": \"2.4.10\",\n \"@types/node\": \"*\",\n \"@types/react\": \"^19.2.0\",\n \"@types/react-dom\": \"^19.2.0\",\n \"@vitest/browser-playwright\": \"^4.1.0\",\n \"cpy-cli\": \"^5.0.0\",\n \"playwright\": \"^1.55.1\",\n \"react\": \"^19.2.0\",\n \"react-dom\": \"^19.2.0\",\n \"typescript\": \"^6.0.2\",\n \"vitest\": \"^4.1.0\",\n \"vitest-browser-react\": \"^2.2.0\"\n },\n \"peerDependencies\": {\n \"@types/react\": \"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0\",\n \"react\": \"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0\",\n \"react-dom\": \"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0\"\n },\n \"peerDependenciesMeta\": {\n \"@types/react\": {\n \"optional\": true\n }\n },\n \"publishConfig\": {\n \"access\": \"public\",\n \"provenance\": true\n },\n \"files\": [\n \"dist/**/*\",\n \"src/**/*\",\n \"!**/*.spec.ts\",\n \"!**/*.spec.tsx\"\n ],\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/wojtekmaj/react-daterange-picker.git\",\n \"directory\": \"packages/react-daterange-picker\"\n },\n \"funding\": \"https://github.com/wojtekmaj/react-daterange-picker?sponsor=1\"\n}\n" }, { "path": "packages/react-daterange-picker/src/DateRangePicker.css", "content": ".react-daterange-picker {\n display: inline-flex;\n position: relative;\n}\n\n.react-daterange-picker,\n.react-daterange-picker *,\n.react-daterange-picker *:before,\n.react-daterange-picker *:after {\n -moz-box-sizing: border-box;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.react-daterange-picker--disabled {\n background-color: #f0f0f0;\n color: #6d6d6d;\n}\n\n.react-daterange-picker__wrapper {\n display: flex;\n flex-grow: 1;\n flex-shrink: 0;\n align-items: center;\n border: thin solid gray;\n}\n\n.react-daterange-picker__inputGroup {\n min-width: calc((4px * 3) + 0.54em * 8 + 0.217em * 2);\n height: 100%;\n flex-grow: 1;\n padding: 0 2px;\n box-sizing: content-box;\n}\n\n.react-daterange-picker__inputGroup__divider {\n padding: 1px 0;\n white-space: pre;\n}\n\n.react-daterange-picker__inputGroup__divider,\n.react-daterange-picker__inputGroup__leadingZero {\n display: inline-block;\n font: inherit;\n}\n\n.react-daterange-picker__inputGroup__input {\n min-width: 0.54em;\n height: 100%;\n position: relative;\n padding: 0 1px;\n border: 0;\n background: none;\n color: currentColor;\n font: inherit;\n box-sizing: content-box;\n -webkit-appearance: textfield;\n -moz-appearance: textfield;\n appearance: textfield;\n}\n\n.react-daterange-picker__inputGroup__input::-webkit-outer-spin-button,\n.react-daterange-picker__inputGroup__input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n margin: 0;\n}\n\n.react-daterange-picker__inputGroup__input:invalid {\n background: rgba(255, 0, 0, 0.1);\n}\n\n.react-daterange-picker__inputGroup__input--hasLeadingZero {\n margin-left: -0.54em;\n padding-left: calc(1px + 0.54em);\n}\n\n.react-daterange-picker__button {\n border: 0;\n background: transparent;\n padding: 4px 6px;\n}\n\n.react-daterange-picker__button:enabled {\n cursor: pointer;\n}\n\n.react-daterange-picker__button:enabled:hover .react-daterange-picker__button__icon,\n.react-daterange-picker__button:enabled:focus .react-daterange-picker__button__icon {\n stroke: #0078d7;\n}\n\n.react-daterange-picker__button:disabled .react-daterange-picker__button__icon {\n stroke: #6d6d6d;\n}\n\n.react-daterange-picker__button svg {\n display: inherit;\n}\n\n.react-daterange-picker__calendar {\n width: 350px;\n max-width: 100vw;\n z-index: 1;\n}\n\n.react-daterange-picker__calendar--closed {\n display: none;\n}\n\n.react-daterange-picker__calendar .react-calendar {\n border-width: thin;\n}\n" }, { "path": "packages/react-daterange-picker/src/DateRangePicker.spec.tsx", "content": "import { describe, expect, it, vi } from 'vitest';\nimport { page, userEvent } from 'vitest/browser';\nimport { render } from 'vitest-browser-react';\nimport { act } from 'react';\n\nimport DateRangePicker from './DateRangePicker.js';\n\nimport type { Locator } from 'vitest/browser';\n\nasync function waitForElementToBeRemovedOrHidden(callback: () => HTMLElement | null) {\n const element = callback();\n\n if (element) {\n await vi.waitFor(() =>\n expect(element).toHaveAttribute('class', expect.stringContaining('--closed')),\n );\n }\n}\n\ndescribe('DateRangePicker', () => {\n const defaultProps = {\n dayAriaLabel: 'day',\n monthAriaLabel: 'month',\n yearAriaLabel: 'year',\n };\n\n it('passes default name to DateInput components', async () => {\n const { container } = await render();\n\n const nativeInputs = container.querySelectorAll('input[type=\"date\"]');\n\n expect(nativeInputs[0]).toHaveAttribute('name', 'daterange_from');\n expect(nativeInputs[1]).toHaveAttribute('name', 'daterange_to');\n });\n\n it('passes custom name to DateInput components', async () => {\n const name = 'testName';\n\n const { container } = await render();\n\n const nativeInputs = container.querySelectorAll('input[type=\"date\"]');\n\n expect(nativeInputs[0]).toHaveAttribute('name', `${name}_from`);\n expect(nativeInputs[1]).toHaveAttribute('name', `${name}_to`);\n });\n\n it('passes autoFocus flag to first DateInput component', async () => {\n await render();\n\n const customInputs = page.getByRole('spinbutton');\n\n expect(customInputs.nth(0)).toHaveFocus();\n });\n\n it('passes disabled flag to DateInput components', async () => {\n const { container } = await render();\n\n const nativeInputs = container.querySelectorAll('input[type=\"date\"]');\n\n expect(nativeInputs[0]).toBeDisabled();\n expect(nativeInputs[1]).toBeDisabled();\n });\n\n it('passes format to DateInput components', async () => {\n await render();\n\n const customInputs = page.getByRole('spinbutton');\n\n expect(customInputs).toHaveLength(2);\n expect(customInputs.nth(0)).toHaveAttribute('name', 'year');\n expect(customInputs.nth(1)).toHaveAttribute('name', 'year');\n });\n\n it('passes aria-label props to DateInput components', async () => {\n const ariaLabelProps = {\n calendarAriaLabel: 'Toggle calendar',\n clearAriaLabel: 'Clear value',\n dayAriaLabel: 'Day',\n monthAriaLabel: 'Month',\n nativeInputAriaLabel: 'Date',\n yearAriaLabel: 'Year',\n };\n\n const { container } = await render();\n\n const calendarButton = page.getByTestId('calendar-button');\n const clearButton = page.getByTestId('clear-button');\n const dateInputs = container.querySelectorAll(\n '.react-daterange-picker__inputGroup',\n ) as unknown as [HTMLDivElement, HTMLDivElement];\n\n const [dateFromInput, dateToInput] = dateInputs;\n\n const nativeFromInput = dateFromInput.querySelector('input[type=\"date\"]');\n const dayFromInput = dateFromInput.querySelector('input[name=\"day\"]');\n const monthFromInput = dateFromInput.querySelector('input[name=\"month\"]');\n const yearFromInput = dateFromInput.querySelector('input[name=\"year\"]');\n\n const nativeToInput = dateToInput.querySelector('input[type=\"date\"]');\n const dayToInput = dateToInput.querySelector('input[name=\"day\"]');\n const monthToInput = dateToInput.querySelector('input[name=\"month\"]');\n const yearToInput = dateToInput.querySelector('input[name=\"year\"]');\n\n expect(calendarButton).toHaveAttribute('aria-label', ariaLabelProps.calendarAriaLabel);\n expect(clearButton).toHaveAttribute('aria-label', ariaLabelProps.clearAriaLabel);\n\n expect(nativeFromInput).toHaveAttribute('aria-label', ariaLabelProps.nativeInputAriaLabel);\n expect(dayFromInput).toHaveAttribute('aria-label', ariaLabelProps.dayAriaLabel);\n expect(monthFromInput).toHaveAttribute('aria-label', ariaLabelProps.monthAriaLabel);\n expect(yearFromInput).toHaveAttribute('aria-label', ariaLabelProps.yearAriaLabel);\n\n expect(nativeToInput).toHaveAttribute('aria-label', ariaLabelProps.nativeInputAriaLabel);\n expect(dayToInput).toHaveAttribute('aria-label', ariaLabelProps.dayAriaLabel);\n expect(monthToInput).toHaveAttribute('aria-label', ariaLabelProps.monthAriaLabel);\n expect(yearToInput).toHaveAttribute('aria-label', ariaLabelProps.yearAriaLabel);\n });\n\n it('passes placeholder props to DateInput components', async () => {\n const placeholderProps = {\n dayPlaceholder: 'dd',\n monthPlaceholder: 'mm',\n yearPlaceholder: 'yyyy',\n };\n\n const { container } = await render();\n\n const dateInputs = container.querySelectorAll(\n '.react-daterange-picker__inputGroup',\n ) as unknown as [HTMLDivElement, HTMLDivElement];\n\n const [dateFromInput, dateToInput] = dateInputs;\n\n const dayFromInput = dateFromInput.querySelector('input[name=\"day\"]');\n const monthFromInput = dateFromInput.querySelector('input[name=\"month\"]');\n const yearFromInput = dateFromInput.querySelector('input[name=\"year\"]');\n\n const dayToInput = dateToInput.querySelector('input[name=\"day\"]');\n const monthToInput = dateToInput.querySelector('input[name=\"month\"]');\n const yearToInput = dateToInput.querySelector('input[name=\"year\"]');\n\n expect(dayFromInput).toHaveAttribute('placeholder', placeholderProps.dayPlaceholder);\n expect(monthFromInput).toHaveAttribute('placeholder', placeholderProps.monthPlaceholder);\n expect(yearFromInput).toHaveAttribute('placeholder', placeholderProps.yearPlaceholder);\n\n expect(dayToInput).toHaveAttribute('placeholder', placeholderProps.dayPlaceholder);\n expect(monthToInput).toHaveAttribute('placeholder', placeholderProps.monthPlaceholder);\n expect(yearToInput).toHaveAttribute('placeholder', placeholderProps.yearPlaceholder);\n });\n\n describe('passes value to DateInput components', () => {\n it('passes single value to DateInput components', async () => {\n const value = new Date(2019, 0, 1);\n\n const { container } = await render();\n\n const nativeInputs = container.querySelectorAll('input[type=\"date\"]');\n\n expect(nativeInputs[0]).toHaveValue('2019-01-01');\n expect(nativeInputs[1]).toHaveValue('');\n });\n\n it('passes the first item of an array of values to DateInput components', async () => {\n const value1 = new Date(2019, 0, 1);\n const value2 = new Date(2019, 6, 1);\n\n const { container } = await render(\n ,\n );\n\n const nativeInputs = container.querySelectorAll('input[type=\"date\"]');\n\n expect(nativeInputs[0]).toHaveValue('2019-01-01');\n expect(nativeInputs[1]).toHaveValue('2019-07-01');\n });\n });\n\n it('applies className to its wrapper when given a string', async () => {\n const className = 'testClassName';\n\n const { container } = await render();\n\n const wrapper = container.firstElementChild;\n\n expect(wrapper).toHaveClass(className);\n });\n\n it('applies \"--open\" className to its wrapper when given isOpen flag', async () => {\n const { container } = await render();\n\n const wrapper = container.firstElementChild;\n\n expect(wrapper).toHaveClass('react-daterange-picker--open');\n });\n\n it('applies calendarClassName to the calendar when given a string', async () => {\n const calendarClassName = 'testClassName';\n\n const { container } = await render(\n ,\n );\n\n const calendar = container.querySelector('.react-calendar');\n\n expect(calendar).toHaveClass(calendarClassName);\n });\n\n it('renders DateInput components', async () => {\n const { container } = await render();\n\n const nativeInputs = container.querySelectorAll('input[type=\"date\"]');\n\n expect(nativeInputs.length).toBe(2);\n });\n\n it('renders range divider with default divider', async () => {\n await render();\n\n const rangeDivider = page.getByTestId('range-divider');\n\n expect(rangeDivider).toBeInTheDocument();\n expect(rangeDivider).toHaveTextContent('–');\n });\n\n it('renders range divider with custom divider', async () => {\n await render();\n\n const rangeDivider = page.getByTestId('range-divider');\n\n expect(rangeDivider).toBeInTheDocument();\n expect(rangeDivider).toHaveTextContent('to');\n });\n\n describe('renders clear button properly', () => {\n it('renders clear button', async () => {\n await render();\n\n const clearButton = page.getByTestId('clear-button');\n\n expect(clearButton).toBeInTheDocument();\n });\n\n it('renders clear icon by default when clearIcon is not given', async () => {\n await render();\n\n const clearButton = page.getByTestId('clear-button');\n\n const clearIcon = clearButton.element().querySelector('svg');\n\n expect(clearIcon).toBeInTheDocument();\n });\n\n it('renders clear icon when given clearIcon as a string', async () => {\n await render();\n\n const clearButton = page.getByTestId('clear-button');\n\n expect(clearButton).toHaveTextContent('❌');\n });\n\n it('renders clear icon when given clearIcon as a React element', async () => {\n function ClearIcon() {\n return <>❌;\n }\n\n await render(} />);\n\n const clearButton = page.getByTestId('clear-button');\n\n expect(clearButton).toHaveTextContent('❌');\n });\n\n it('renders clear icon when given clearIcon as a function', async () => {\n function ClearIcon() {\n return <>❌;\n }\n\n await render();\n\n const clearButton = page.getByTestId('clear-button');\n\n expect(clearButton).toHaveTextContent('❌');\n });\n });\n\n describe('renders calendar button properly', () => {\n it('renders calendar button', async () => {\n await render();\n\n const calendarButton = page.getByTestId('calendar-button');\n\n expect(calendarButton).toBeInTheDocument();\n });\n\n it('renders calendar icon by default when calendarIcon is not given', async () => {\n await render();\n\n const calendarButton = page.getByTestId('calendar-button');\n\n const calendarIcon = calendarButton.element().querySelector('svg');\n\n expect(calendarIcon).toBeInTheDocument();\n });\n\n it('renders calendar icon when given calendarIcon as a string', async () => {\n await render();\n\n const calendarButton = page.getByTestId('calendar-button');\n\n expect(calendarButton).toHaveTextContent('📅');\n });\n\n it('renders calendar icon when given calendarIcon as a React element', async () => {\n function CalendarIcon() {\n return <>📅;\n }\n\n await render(} />);\n\n const calendarButton = page.getByTestId('calendar-button');\n\n expect(calendarButton).toHaveTextContent('📅');\n });\n\n it('renders calendar icon when given calendarIcon as a function', async () => {\n function CalendarIcon() {\n return <>📅;\n }\n\n await render();\n\n const calendarButton = page.getByTestId('calendar-button');\n\n expect(calendarButton).toHaveTextContent('📅');\n });\n });\n\n it('renders Calendar component when given isOpen flag', async () => {\n const { container } = await render();\n\n const calendar = container.querySelector('.react-calendar');\n\n expect(calendar).toBeInTheDocument();\n });\n\n it('does not render Calendar component when given disableCalendar & isOpen flags', async () => {\n const { container } = await render(\n ,\n );\n\n const calendar = container.querySelector('.react-calendar');\n\n expect(calendar).not.toBeInTheDocument();\n });\n\n it('opens Calendar component when given isOpen flag by changing props', async () => {\n const { container, rerender } = await render();\n\n const calendar = container.querySelector('.react-calendar');\n\n expect(calendar).not.toBeInTheDocument();\n\n await rerender();\n\n const calendar2 = container.querySelector('.react-calendar');\n\n expect(calendar2).toBeInTheDocument();\n });\n\n it('opens Calendar component when clicking on a button', async () => {\n const { container } = await render();\n\n const calendar = container.querySelector('.react-calendar');\n\n expect(calendar).not.toBeInTheDocument();\n\n const button = page.getByTestId('calendar-button');\n\n await userEvent.click(button);\n\n const calendar2 = container.querySelector('.react-calendar');\n\n expect(calendar2).toBeInTheDocument();\n });\n\n function triggerFocusInEvent(locator: Locator) {\n const element = locator.element();\n\n element.dispatchEvent(\n new FocusEvent('focusin', { bubbles: true, cancelable: false, composed: true }),\n );\n }\n\n function triggerFocusEvent(locator: Locator) {\n triggerFocusInEvent(locator);\n\n const element = locator.element();\n\n element.dispatchEvent(\n new FocusEvent('focus', { bubbles: false, cancelable: false, composed: true }),\n );\n }\n\n describe('handles opening Calendar component when focusing on an input inside properly', () => {\n it('opens Calendar component when focusing on an input inside by default', async () => {\n const { container } = await render();\n\n const calendar = container.querySelector('.react-calendar');\n\n expect(calendar).not.toBeInTheDocument();\n\n const input = page.getByRole('spinbutton', { name: 'day' }).first();\n\n act(() => {\n triggerFocusEvent(input);\n });\n\n const calendar2 = container.querySelector('.react-calendar');\n\n expect(calendar2).toBeInTheDocument();\n });\n\n it('opens Calendar component when focusing on an input inside given openCalendarOnFocus = true', async () => {\n const { container } = await render();\n\n const calendar = container.querySelector('.react-calendar');\n const input = page.getByRole('spinbutton', { name: 'day' }).first();\n\n expect(calendar).not.toBeInTheDocument();\n\n act(() => {\n triggerFocusEvent(input);\n });\n\n const calendar2 = container.querySelector('.react-calendar');\n\n expect(calendar2).toBeInTheDocument();\n });\n\n it('does not open Calendar component when focusing on an input inside given openCalendarOnFocus = false', async () => {\n const { container } = await render(\n ,\n );\n\n const calendar = container.querySelector('.react-calendar');\n const input = page.getByRole('spinbutton', { name: 'day' }).first();\n\n expect(calendar).not.toBeInTheDocument();\n\n act(() => {\n triggerFocusEvent(input);\n });\n\n const calendar2 = container.querySelector('.react-calendar');\n\n expect(calendar2).toBeFalsy();\n });\n\n it('does not open Calendar when focusing on an input inside given shouldOpenCalendar function returning false', async () => {\n const shouldOpenCalendar = () => false;\n\n const { container } = await render(\n ,\n );\n\n const calendar = container.querySelector('.react-calendar');\n const input = page.getByRole('spinbutton', { name: 'day' }).first();\n\n expect(calendar).not.toBeInTheDocument();\n\n triggerFocusEvent(input);\n\n const calendar2 = container.querySelector('.react-calendar');\n\n expect(calendar2).toBeFalsy();\n });\n\n it('does not open Calendar component when focusing on a select element', async () => {\n const { container } = await render(\n ,\n );\n\n const calendar = container.querySelector('.react-calendar');\n const select = page.getByRole('combobox', { name: 'month' }).first();\n\n expect(calendar).not.toBeInTheDocument();\n\n triggerFocusEvent(select);\n\n const calendar2 = container.querySelector('.react-calendar');\n\n expect(calendar2).toBeFalsy();\n });\n });\n\n it('closes Calendar component when clicked outside', async () => {\n const { container } = await render();\n\n await userEvent.click(document.body);\n\n await waitForElementToBeRemovedOrHidden(() =>\n container.querySelector('.react-daterange-picker__calendar'),\n );\n });\n\n it('closes Calendar component when focused outside', async () => {\n const { container } = await render();\n\n triggerFocusInEvent(page.elementLocator(document.body));\n\n await waitForElementToBeRemovedOrHidden(() =>\n container.querySelector('.react-daterange-picker__calendar'),\n );\n });\n\n function triggerTouchStart(element: HTMLElement) {\n element.dispatchEvent(new TouchEvent('touchstart', { bubbles: true, cancelable: true }));\n }\n\n it('closes Calendar component when tapped outside', async () => {\n const { container } = await render();\n\n triggerTouchStart(document.body);\n\n await waitForElementToBeRemovedOrHidden(() =>\n container.querySelector('.react-daterange-picker__calendar'),\n );\n });\n\n function triggerFocusOutEvent(locator: Locator) {\n const element = locator.element();\n\n element.dispatchEvent(\n new FocusEvent('focusout', { bubbles: true, cancelable: false, composed: true }),\n );\n }\n\n function triggerBlurEvent(locator: Locator) {\n triggerFocusOutEvent(locator);\n\n const element = locator.element();\n\n element.dispatchEvent(\n new FocusEvent('blur', { bubbles: false, cancelable: false, composed: true }),\n );\n }\n\n it('does not close Calendar component when focused inside', async () => {\n const { container } = await render();\n\n const monthInput = page.getByRole('spinbutton', { name: 'month' }).first();\n const dayInput = page.getByRole('spinbutton', { name: 'day' }).first();\n\n triggerBlurEvent(monthInput);\n triggerFocusEvent(dayInput);\n\n const calendar = container.querySelector('.react-calendar');\n\n expect(calendar).toBeInTheDocument();\n });\n\n it('closes Calendar when changing value by default', async () => {\n const { container } = await render();\n\n const [firstTile, secondTile] = container.querySelectorAll(\n '.react-calendar__tile',\n ) as unknown as [HTMLButtonElement, HTMLButtonElement];\n\n await act(async () => {\n await userEvent.click(firstTile);\n });\n\n await act(async () => {\n await userEvent.click(secondTile);\n });\n\n await waitForElementToBeRemovedOrHidden(() =>\n container.querySelector('.react-daterange-picker__calendar'),\n );\n });\n\n it('closes Calendar when changing value with prop closeCalendar = true', async () => {\n const { container } = await render();\n\n const [firstTile, secondTile] = container.querySelectorAll(\n '.react-calendar__tile',\n ) as unknown as [HTMLButtonElement, HTMLButtonElement];\n\n await act(async () => {\n await userEvent.click(firstTile);\n });\n\n await act(async () => {\n await userEvent.click(secondTile);\n });\n\n await waitForElementToBeRemovedOrHidden(() =>\n container.querySelector('.react-daterange-picker__calendar'),\n );\n });\n\n it('does not close Calendar when changing value with prop closeCalendar = false', async () => {\n const { container } = await render(\n ,\n );\n\n const [firstTile, secondTile] = container.querySelectorAll(\n '.react-calendar__tile',\n ) as unknown as [HTMLButtonElement, HTMLButtonElement];\n\n await act(async () => {\n await userEvent.click(firstTile);\n });\n\n await act(async () => {\n await userEvent.click(secondTile);\n });\n\n const calendar = container.querySelector('.react-calendar');\n\n expect(calendar).toBeInTheDocument();\n });\n\n it('does not close Calendar when changing value with shouldCloseCalendar function returning false', async () => {\n const shouldCloseCalendar = () => false;\n\n const { container } = await render(\n ,\n );\n\n const firstTile = container.querySelector('.react-calendar__tile') as HTMLButtonElement;\n\n await act(async () => {\n await userEvent.click(firstTile);\n });\n\n const calendar = container.querySelector('.react-calendar');\n\n expect(calendar).toBeInTheDocument();\n });\n\n it('does not close Calendar when changing value using inputs', async () => {\n const { container } = await render();\n\n const dayInput = page.getByRole('spinbutton', { name: 'day' }).first();\n\n await act(async () => {\n await userEvent.fill(dayInput, '1');\n });\n\n const calendar = container.querySelector('.react-calendar');\n\n expect(calendar).toBeInTheDocument();\n });\n\n it('calls onChange callback when changing value', async () => {\n const value = new Date(2023, 0, 31);\n const onChange = vi.fn();\n\n await render();\n\n const dayInput = page.getByRole('spinbutton', { name: 'day' }).first();\n\n await act(async () => {\n await userEvent.fill(dayInput, '1');\n });\n\n expect(onChange).toHaveBeenCalledWith([new Date(2023, 0, 1), null]);\n });\n\n it('calls onInvalidChange callback when changing value to an invalid one', async () => {\n const value = new Date(2023, 0, 31);\n const onInvalidChange = vi.fn();\n\n await render(\n ,\n );\n\n const dayInput = page.getByRole('spinbutton', { name: 'day' }).first();\n\n await act(async () => {\n await userEvent.fill(dayInput, '32');\n });\n\n expect(onInvalidChange).toHaveBeenCalled();\n });\n\n it('clears the value when clicking on a button', async () => {\n const onChange = vi.fn();\n\n const { container } = await render();\n\n const calendar = container.querySelector('.react-calendar');\n const button = page.getByTestId('clear-button');\n\n expect(calendar).not.toBeInTheDocument();\n\n await userEvent.click(button);\n\n expect(onChange).toHaveBeenCalledWith(null);\n });\n\n describe('onChangeFrom', () => {\n it('calls onChange properly given no initial value', async () => {\n const onChange = vi.fn();\n\n await render(\n ,\n );\n\n const nextValueFrom = new Date(2018, 1, 15);\n\n const monthInput = page.getByRole('spinbutton', { name: 'month' }).first();\n const dayInput = page.getByRole('spinbutton', { name: 'day' }).first();\n const yearInput = page.getByRole('spinbutton', { name: 'year' }).first();\n\n await act(async () => {\n await userEvent.fill(monthInput, '2');\n\n await userEvent.fill(dayInput, '15');\n\n await userEvent.fill(yearInput, '2018');\n });\n\n await vi.waitFor(() => expect(onChange).toHaveBeenCalledWith([nextValueFrom, null]));\n });\n\n it('calls onChange properly given single initial value', async () => {\n const onChange = vi.fn();\n const value = new Date(2018, 0, 1);\n\n await render();\n\n const nextValueFrom = new Date(2018, 1, 15);\n\n const monthInput = page.getByRole('spinbutton', { name: 'month' }).first();\n const dayInput = page.getByRole('spinbutton', { name: 'day' }).first();\n const yearInput = page.getByRole('spinbutton', { name: 'year' }).first();\n\n await act(async () => {\n await userEvent.fill(monthInput, '2');\n\n await userEvent.fill(dayInput, '15');\n\n await userEvent.fill(yearInput, '2018');\n });\n\n expect(onChange).toHaveBeenCalled();\n expect(onChange).toHaveBeenCalledWith([nextValueFrom, null]);\n });\n\n it('calls onChange properly given initial value as an array', async () => {\n const onChange = vi.fn();\n const valueFrom = new Date(2018, 0, 1);\n const valueTo = new Date(2018, 6, 1);\n const value = [valueFrom, valueTo] as [Date, Date];\n\n await render();\n\n const nextValueFrom = new Date(2018, 1, 15);\n\n const monthInput = page.getByRole('spinbutton', { name: 'month' }).first();\n const dayInput = page.getByRole('spinbutton', { name: 'day' }).first();\n const yearInput = page.getByRole('spinbutton', { name: 'year' }).first();\n\n await act(async () => {\n await userEvent.fill(monthInput, '2');\n\n await userEvent.fill(dayInput, '15');\n\n await userEvent.fill(yearInput, '2018');\n });\n\n expect(onChange).toHaveBeenCalled();\n expect(onChange).toHaveBeenCalledWith([nextValueFrom, valueTo]);\n });\n });\n\n describe('onChangeTo', () => {\n it('calls onChange properly given no initial value', async () => {\n const onChange = vi.fn();\n\n await render(\n ,\n );\n\n const nextValueTo = new Date(2018, 1, 15);\n nextValueTo.setDate(nextValueTo.getDate() + 1);\n nextValueTo.setTime(nextValueTo.getTime() - 1);\n\n const monthInput = page.getByRole('spinbutton', { name: 'month' }).nth(1);\n const dayInput = page.getByRole('spinbutton', { name: 'day' }).nth(1);\n const yearInput = page.getByRole('spinbutton', { name: 'year' }).nth(1);\n\n await act(async () => {\n await userEvent.fill(dayInput, '15');\n\n await userEvent.fill(monthInput, '2');\n\n await userEvent.fill(yearInput, '2018');\n });\n\n await vi.waitFor(() => expect(onChange).toHaveBeenCalledWith([null, nextValueTo]));\n });\n\n it('calls onChange properly given single initial value', async () => {\n const onChange = vi.fn();\n const value = new Date(2018, 0, 1);\n\n await render(\n ,\n );\n\n const nextValueTo = new Date(2018, 1, 15);\n nextValueTo.setDate(nextValueTo.getDate() + 1);\n nextValueTo.setTime(nextValueTo.getTime() - 1);\n\n const monthInput = page.getByRole('spinbutton', { name: 'month' }).nth(1);\n const dayInput = page.getByRole('spinbutton', { name: 'day' }).nth(1);\n const yearInput = page.getByRole('spinbutton', { name: 'year' }).nth(1);\n\n await act(async () => {\n await userEvent.fill(dayInput, '15');\n\n await userEvent.fill(monthInput, '2');\n\n await userEvent.fill(yearInput, '2018');\n });\n\n await vi.waitFor(() => expect(onChange).toHaveBeenCalledWith([value, nextValueTo]));\n });\n\n it('calls onChange properly given initial value as an array', async () => {\n const onChange = vi.fn();\n const valueFrom = new Date(2018, 0, 1);\n const valueTo = new Date(2018, 6, 1);\n const value = [valueFrom, valueTo] as [Date, Date];\n\n await render();\n\n const nextValueTo = new Date(2018, 1, 15);\n nextValueTo.setDate(nextValueTo.getDate() + 1);\n nextValueTo.setTime(nextValueTo.getTime() - 1);\n\n const monthInput = page.getByRole('spinbutton', { name: 'month' }).nth(1);\n const dayInput = page.getByRole('spinbutton', { name: 'day' }).nth(1);\n const yearInput = page.getByRole('spinbutton', { name: 'year' }).nth(1);\n\n await act(async () => {\n await userEvent.fill(dayInput, '15');\n\n await userEvent.fill(monthInput, '2');\n\n await userEvent.fill(yearInput, '2018');\n });\n\n expect(onChange).toHaveBeenCalled();\n expect(onChange).toHaveBeenCalledWith([valueFrom, nextValueTo]);\n });\n });\n\n it('calls onClick callback when clicked a page (sample of mouse events family)', async () => {\n const onClick = vi.fn();\n\n const { container } = await render();\n\n const wrapper = container.firstElementChild as HTMLDivElement;\n await userEvent.click(wrapper);\n\n expect(onClick).toHaveBeenCalled();\n });\n\n it('calls onTouchStart callback when touched a page (sample of touch events family)', async () => {\n const onTouchStart = vi.fn();\n\n const { container } = await render(\n ,\n );\n\n const wrapper = container.firstElementChild as HTMLDivElement;\n\n triggerTouchStart(wrapper);\n\n expect(onTouchStart).toHaveBeenCalled();\n });\n});\n" }, { "path": "packages/react-daterange-picker/src/DateRangePicker.tsx", "content": "'use client';\n\nimport { createElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport clsx from 'clsx';\nimport makeEventProps from 'make-event-props';\nimport Calendar from 'react-calendar';\nimport DateInput from 'react-date-picker/dist/DateInput';\nimport Fit from 'react-fit';\n\nimport type {\n ClassName,\n CloseReason,\n Detail,\n LooseValue,\n OpenReason,\n Value,\n} from './shared/types.js';\n\nconst baseClassName = 'react-daterange-picker';\nconst outsideActionEvents = ['mousedown', 'focusin', 'touchstart'] as const;\n\nconst iconProps = {\n xmlns: 'http://www.w3.org/2000/svg',\n width: 19,\n height: 19,\n viewBox: '0 0 19 19',\n stroke: 'black',\n strokeWidth: 2,\n};\n\nconst CalendarIcon = (\n \n \n \n \n \n);\n\nconst ClearIcon = (\n \n \n \n \n);\n\ntype ReactNodeLike = React.ReactNode | string | number | boolean | null | undefined;\n\ntype Icon = ReactNodeLike | ReactNodeLike[];\n\ntype IconOrRenderFunction = Icon | React.ComponentType | React.ReactElement;\n\ntype CalendarProps = Omit<\n React.ComponentPropsWithoutRef,\n 'onChange' | 'selectRange' | 'value'\n>;\n\ntype EventProps = ReturnType;\n\nexport type DateRangePickerProps = {\n /**\n * Automatically focuses the input on mount.\n *\n * @example true\n */\n autoFocus?: boolean;\n /**\n * `aria-label` for the calendar button.\n *\n * @example 'Toggle calendar'\n */\n calendarAriaLabel?: string;\n /**\n * Content of the calendar button. Setting the value explicitly to `null` will hide the icon.\n *\n * @example 'Calendar'\n * @example \n * @example CalendarIcon\n */\n calendarIcon?: IconOrRenderFunction | null;\n /**\n * Props to pass to React-Calendar component.\n */\n calendarProps?: CalendarProps;\n /**\n * Class name(s) that will be added along with `\"react-daterange-picker\"` to the main React-DateRange-Picker `
` element.\n *\n * @example 'class1 class2'\n * @example ['class1', 'class2 class3']\n */\n className?: ClassName;\n /**\n * `aria-label` for the clear button.\n *\n * @example 'Clear value'\n */\n clearAriaLabel?: string;\n /**\n * Content of the clear button. Setting the value explicitly to `null` will hide the icon.\n *\n * @example 'Clear'\n * @example \n * @example ClearIcon\n */\n clearIcon?: IconOrRenderFunction | null;\n /**\n * Whether to close the calendar on value selection.\n *\n * **Note**: It's recommended to use `shouldCloseCalendar` function instead.\n *\n * @default true\n * @example false\n */\n closeCalendar?: boolean;\n /**\n * `data-testid` attribute for the main React-DateRange-Picker `
` element.\n *\n * @example 'daterange-picker'\n */\n 'data-testid'?: string;\n /**\n * `aria-label` for the day input.\n *\n * @example 'Day'\n */\n dayAriaLabel?: string;\n /**\n * `placeholder` for the day input.\n *\n * @default '--'\n * @example 'dd'\n */\n dayPlaceholder?: string;\n /**\n * When set to `true`, will remove the calendar and the button toggling its visibility.\n *\n * @default false\n * @example true\n */\n disableCalendar?: boolean;\n /**\n * Whether the date range picker should be disabled.\n *\n * @default false\n * @example true\n */\n disabled?: boolean;\n /**\n * Input format based on [Unicode Technical Standard #35](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table). Supported values are: `y`, `M`, `MM`, `MMM`, `MMMM`, `d`, `dd`.\n *\n * **Note**: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client.\n *\n * @example 'y-MM-dd'\n */\n format?: string;\n /**\n * `id` attribute for the main React-DateRange-Picker `
` element.\n *\n * @example 'daterange-picker'\n */\n id?: string;\n /**\n * Whether the calendar should be opened.\n *\n * @default false\n * @example true\n */\n isOpen?: boolean;\n /**\n * Locale that should be used by the date range picker and the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag).\n *\n * **Note**: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client.\n *\n * @example 'hu-HU'\n */\n locale?: string;\n /**\n * Maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although React-DateRange-Picker will ensure that no later date is selected.\n *\n * @example new Date()\n */\n maxDate?: Date;\n /**\n * The most detailed calendar view that the user shall see. View defined here also becomes the one on which clicking an item in the calendar will select a date and pass it to onChange. Can be `\"month\"`, `\"year\"`, `\"decade\"` or\n *\n * @default 'month'\n * @example 'year'\n */\n maxDetail?: Detail;\n /**\n * Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-DateRange-Picker will ensure that no earlier date is selected.\n *\n * @example new Date()\n */\n minDate?: Date;\n /**\n * `aria-label` for the month input.\n *\n * @example 'Month'\n */\n monthAriaLabel?: string;\n /**\n * `placeholder` for the month input.\n *\n * @default '--'\n * @example 'mm'\n */\n monthPlaceholder?: string;\n /**\n * Input name.\n *\n * @default 'daterange'\n */\n name?: string;\n /**\n * `aria-label` for the native date input.\n *\n * @example 'Date'\n */\n nativeInputAriaLabel?: string;\n /**\n * Function called when the calendar closes.\n *\n * @example () => alert('Calendar closed')\n */\n onCalendarClose?: () => void;\n /**\n * Function called when the calendar opens.\n *\n * @example () => alert('Calendar opened')\n */\n onCalendarOpen?: () => void;\n /**\n * Function called when the user picks a valid date. If any of the fields were excluded using custom `format`, `new Date(y, 0, 1, 0, 0, 0)`, where `y` is the current year, is going to serve as a \"base\".\n *\n * @example (value) => alert('New date is: ', value)\n */\n onChange?: (value: Value) => void;\n /**\n * Function called when the user focuses an input.\n *\n * @example (event) => alert('Focused input: ', event.target.name)\n */\n onFocus?: (event: React.FocusEvent) => void;\n /**\n * Function called when the user picks an invalid date.\n *\n * @example () => alert('Invalid date')\n */\n onInvalidChange?: () => void;\n /**\n * Whether to open the calendar on input focus. **Note**: It's recommended to use `shouldOpenCalendar` function instead.\n *\n * @default true\n * @example false\n */\n openCalendarOnFocus?: boolean;\n /**\n * Element to render the calendar in using portal.\n *\n * @example document.getElementById('my-div')\n */\n portalContainer?: HTMLElement | null;\n /**\n * Divider between date inputs.\n *\n * @default '–'\n * @example ' to '\n */\n rangeDivider?: React.ReactNode;\n /**\n * Whether date input should be required.\n *\n * @default false\n * @example true\n */\n required?: boolean;\n /**\n * Function called before the calendar closes. `reason` can be `\"buttonClick\"`, `\"escape\"`, `\"outsideAction\"`, or `\"select\"`. If it returns `false`, the calendar will not close.\n *\n * @example ({ reason }) => reason !== 'outsideAction'\n */\n shouldCloseCalendar?: (props: { reason: CloseReason }) => boolean;\n /**\n * Function called before the calendar opens. `reason` can be `\"buttonClick\"` or `\"focus\"`. If it returns `false`, the calendar will not open.\n *\n * @example ({ reason }) => reason !== 'focus'\n */\n shouldOpenCalendar?: (props: { reason: OpenReason }) => boolean;\n /**\n * Whether leading zeros should be rendered in date inputs.\n *\n * @default false\n * @example true\n */\n showLeadingZeros?: boolean;\n /**\n * Input value.\n *\n * @example new Date(2017, 0, 1)\n * @example [new Date(2017, 0, 1), new Date(2017, 7, 1)]\n * @example ['2017-01-01', '2017-08-01']\n */\n value?: LooseValue;\n /**\n * `aria-label` for the year input.\n *\n * @example 'Year'\n */\n yearAriaLabel?: string;\n /**\n * `placeholder` for the year input.\n *\n * @default '----'\n * @example 'yyyy'\n */\n yearPlaceholder?: string;\n} & Omit;\n\nexport default function DateRangePicker(props: DateRangePickerProps): React.ReactElement {\n const {\n autoFocus,\n calendarAriaLabel,\n calendarIcon = CalendarIcon,\n className,\n clearAriaLabel,\n clearIcon = ClearIcon,\n closeCalendar: shouldCloseCalendarOnSelect = true,\n 'data-testid': dataTestid,\n dayAriaLabel,\n dayPlaceholder,\n disableCalendar,\n disabled,\n format,\n id,\n isOpen: isOpenProps = null,\n locale,\n maxDate,\n maxDetail = 'month',\n minDate,\n monthAriaLabel,\n monthPlaceholder,\n name = 'daterange',\n nativeInputAriaLabel,\n onCalendarClose,\n onCalendarOpen,\n onChange: onChangeProps,\n onFocus: onFocusProps,\n onInvalidChange,\n openCalendarOnFocus = true,\n rangeDivider = '–',\n required,\n shouldCloseCalendar,\n shouldOpenCalendar,\n showLeadingZeros,\n value,\n yearAriaLabel,\n yearPlaceholder,\n ...otherProps\n } = props;\n\n const [isOpen, setIsOpen] = useState(isOpenProps);\n const wrapper = useRef(null);\n const calendarWrapper = useRef(null);\n\n useEffect(() => {\n setIsOpen(isOpenProps);\n }, [isOpenProps]);\n\n function openCalendar({ reason }: { reason: OpenReason }) {\n if (shouldOpenCalendar) {\n if (!shouldOpenCalendar({ reason })) {\n return;\n }\n }\n\n setIsOpen(true);\n\n if (onCalendarOpen) {\n onCalendarOpen();\n }\n }\n\n const closeCalendar = useCallback(\n ({ reason }: { reason: CloseReason }) => {\n if (shouldCloseCalendar) {\n if (!shouldCloseCalendar({ reason })) {\n return;\n }\n }\n\n setIsOpen(false);\n\n if (onCalendarClose) {\n onCalendarClose();\n }\n },\n [onCalendarClose, shouldCloseCalendar],\n );\n\n function toggleCalendar() {\n if (isOpen) {\n closeCalendar({ reason: 'buttonClick' });\n } else {\n openCalendar({ reason: 'buttonClick' });\n }\n }\n\n function onChange(value: Value, shouldCloseCalendar: boolean = shouldCloseCalendarOnSelect) {\n if (shouldCloseCalendar) {\n closeCalendar({ reason: 'select' });\n }\n\n if (onChangeProps) {\n onChangeProps(value);\n }\n }\n\n function onChangeFrom(nextValue: Value, closeCalendar: boolean) {\n const [nextValueFrom] = Array.isArray(nextValue) ? nextValue : [nextValue];\n const [, valueTo] = Array.isArray(value) ? value : [value];\n\n const valueToDate = valueTo ? new Date(valueTo) : null;\n\n onChange([nextValueFrom, valueToDate], closeCalendar);\n }\n\n function onChangeTo(nextValue: Value, closeCalendar: boolean) {\n const [, nextValueTo] = Array.isArray(nextValue) ? nextValue : [null, nextValue];\n const [valueFrom] = Array.isArray(value) ? value : [value];\n\n const valueFromDate = valueFrom ? new Date(valueFrom) : null;\n\n onChange([valueFromDate, nextValueTo], closeCalendar);\n }\n\n function onFocus(event: React.FocusEvent) {\n if (onFocusProps) {\n onFocusProps(event);\n }\n\n if (\n // Internet Explorer still fires onFocus on disabled elements\n disabled ||\n isOpen ||\n !openCalendarOnFocus ||\n event.target.dataset.select === 'true'\n ) {\n return;\n }\n\n openCalendar({ reason: 'focus' });\n }\n\n const onKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n closeCalendar({ reason: 'escape' });\n }\n },\n [closeCalendar],\n );\n\n function clear() {\n onChange(null);\n }\n\n function stopPropagation(event: React.FocusEvent) {\n event.stopPropagation();\n }\n\n const onOutsideAction = useCallback(\n (event: Event) => {\n const { current: wrapperEl } = wrapper;\n const { current: calendarWrapperEl } = calendarWrapper;\n\n // Try event.composedPath first to handle clicks inside a Shadow DOM.\n const target = (\n 'composedPath' in event ? event.composedPath()[0] : (event as Event).target\n ) as HTMLElement;\n\n if (\n target &&\n wrapperEl &&\n !wrapperEl.contains(target) &&\n !calendarWrapperEl?.contains(target)\n ) {\n closeCalendar({ reason: 'outsideAction' });\n }\n },\n [closeCalendar],\n );\n\n const handleOutsideActionListeners = useCallback(\n (shouldListen = isOpen) => {\n for (const event of outsideActionEvents) {\n if (shouldListen) {\n document.addEventListener(event, onOutsideAction);\n } else {\n document.removeEventListener(event, onOutsideAction);\n }\n }\n\n if (shouldListen) {\n document.addEventListener('keydown', onKeyDown);\n } else {\n document.removeEventListener('keydown', onKeyDown);\n }\n },\n [isOpen, onOutsideAction, onKeyDown],\n );\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: useEffect intentionally triggered on isOpen change\n useEffect(() => {\n handleOutsideActionListeners();\n\n return () => {\n handleOutsideActionListeners(false);\n };\n }, [handleOutsideActionListeners, isOpen]);\n\n function renderInputs() {\n const [valueFrom, valueTo] = Array.isArray(value) ? value : [value];\n\n const ariaLabelProps = {\n dayAriaLabel,\n monthAriaLabel,\n nativeInputAriaLabel,\n yearAriaLabel,\n };\n\n const placeholderProps = {\n dayPlaceholder,\n monthPlaceholder,\n yearPlaceholder,\n };\n\n const commonProps = {\n ...ariaLabelProps,\n ...placeholderProps,\n className: `${baseClassName}__inputGroup`,\n disabled,\n format,\n isCalendarOpen: isOpen,\n locale,\n maxDate,\n maxDetail,\n minDate,\n onInvalidChange,\n required,\n showLeadingZeros,\n };\n\n return (\n
\n \n \n {rangeDivider}\n \n \n {clearIcon !== null && (\n \n {typeof clearIcon === 'function' ? createElement(clearIcon) : clearIcon}\n \n )}\n {calendarIcon !== null && !disableCalendar && (\n \n {typeof calendarIcon === 'function' ? createElement(calendarIcon) : calendarIcon}\n \n )}\n
\n );\n }\n\n function renderCalendar() {\n if (isOpen === null || disableCalendar) {\n return null;\n }\n\n const { calendarProps, portalContainer, value } = props;\n\n const className = `${baseClassName}__calendar`;\n const classNames = clsx(className, `${className}--${isOpen ? 'open' : 'closed'}`);\n\n const calendar = (\n onChange(value)}\n selectRange\n value={value}\n {...calendarProps}\n />\n );\n\n return portalContainer ? (\n createPortal(\n
\n {calendar}\n
,\n portalContainer,\n )\n ) : (\n \n {\n if (ref && !isOpen) {\n ref.removeAttribute('style');\n }\n }}\n className={classNames}\n >\n {calendar}\n
\n \n );\n }\n\n const eventProps = useMemo(\n () => makeEventProps(otherProps),\n // biome-ignore lint/correctness/useExhaustiveDependencies: FIXME\n [otherProps],\n );\n\n return (\n // biome-ignore lint/a11y/noStaticElementInteractions: False positive caused by non interactive wrapper listening for bubbling events\n \n {renderInputs()}\n {renderCalendar()}\n
\n );\n}\n" }, { "path": "packages/react-daterange-picker/src/index.ts", "content": "import DateRangePicker from './DateRangePicker.js';\n\nexport type { DateRangePickerProps } from './DateRangePicker.js';\n\nexport { DateRangePicker };\n\nexport default DateRangePicker;\n" }, { "path": "packages/react-daterange-picker/src/shared/types.ts", "content": "export type Range = [T, T];\n\nexport type ClassName = string | null | undefined | (string | null | undefined)[];\n\nexport type CloseReason = 'buttonClick' | 'escape' | 'outsideAction' | 'select';\n\nexport type Detail = 'century' | 'decade' | 'year' | 'month';\n\ntype LooseValuePiece = string | Date | null;\n\nexport type LooseValue = LooseValuePiece | Range;\n\nexport type OpenReason = 'buttonClick' | 'focus';\n\nexport type RangeType = 'century' | 'decade' | 'year' | 'month' | 'day';\n\ntype ValuePiece = Date | null;\n\nexport type Value = ValuePiece | Range;\n" }, { "path": "packages/react-daterange-picker/tsconfig.build.json", "content": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"noEmit\": false,\n \"outDir\": \"dist\",\n \"rootDir\": \"src\"\n },\n \"include\": [\"src\"],\n \"exclude\": [\"src/**/*.spec.ts\", \"src/**/*.spec.tsx\"]\n}\n" }, { "path": "packages/react-daterange-picker/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"declaration\": true,\n \"esModuleInterop\": true,\n \"isolatedDeclarations\": true,\n \"isolatedModules\": true,\n \"jsx\": \"react-jsx\",\n \"module\": \"nodenext\",\n \"moduleDetection\": \"force\",\n \"noEmit\": true,\n \"noUncheckedIndexedAccess\": true,\n \"outDir\": \"dist\",\n \"skipLibCheck\": true,\n \"target\": \"es2018\",\n \"verbatimModuleSyntax\": true\n },\n \"exclude\": [\"dist\"]\n}\n" }, { "path": "packages/react-daterange-picker/vitest.config.ts", "content": "import { playwright } from '@vitest/browser-playwright';\nimport { defineConfig } from 'vitest/config';\n\nimport type { ViteUserConfig } from 'vitest/config';\n\nconst config: ViteUserConfig = defineConfig({\n test: {\n browser: {\n enabled: true,\n headless: true,\n instances: [{ browser: 'chromium' }],\n provider: playwright(),\n },\n watch: false,\n },\n});\n\nexport default config;\n" }, { "path": "sample/.gitignore", "content": "dist\nnode_modules\n" }, { "path": "sample/Sample.css", "content": "html,\nbody {\n height: 100%;\n}\n\nbody {\n margin: 0;\n font-family: 'Segoe UI', Tahoma, sans-serif;\n}\n\n.Sample input,\n.Sample button {\n font: inherit;\n}\n\n.Sample header {\n background-color: #323639;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);\n padding: 20px;\n color: white;\n}\n\n.Sample header h1 {\n font-size: inherit;\n margin: 0;\n}\n\n.Sample__container {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n align-items: flex-start;\n margin: 10px 0;\n padding: 10px;\n}\n\n.Sample__container > * > * {\n margin: 10px;\n}\n\n.Sample__container__content {\n display: flex;\n max-width: 100%;\n flex-basis: 420px;\n flex-direction: column;\n flex-grow: 100;\n align-items: stretch;\n}\n" }, { "path": "sample/Sample.tsx", "content": "import { useState } from 'react';\nimport DateRangePicker from '@wojtekmaj/react-daterange-picker';\n\nimport './Sample.css';\n\ntype ValuePiece = Date | null;\n\ntype Value = ValuePiece | [ValuePiece, ValuePiece];\n\nconst now = new Date();\nconst yesterdayBegin = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);\nconst todayEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999);\n\nexport default function Sample() {\n const [value, onChange] = useState([yesterdayBegin, todayEnd]);\n\n return (\n
\n
\n

react-daterange-picker sample page

\n
\n
\n
\n \n
\n
\n
\n );\n}\n" }, { "path": "sample/index.html", "content": "\n\n \n \n \n react-daterange-picker sample page\n \n \n
\n \n \n\n" }, { "path": "sample/index.tsx", "content": "import { createRoot } from 'react-dom/client';\n\nimport Sample from './Sample.js';\n\nconst root = document.getElementById('root');\n\nif (!root) {\n throw new Error('Could not find root element');\n}\n\ncreateRoot(root).render();\n" }, { "path": "sample/package.json", "content": "{\n \"name\": \"react-daterange-picker-sample-page\",\n \"version\": \"3.0.0\",\n \"description\": \"A sample page for React-DateRange-Picker.\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"build\": \"vite build\",\n \"dev\": \"vite\",\n \"preview\": \"vite preview\"\n },\n \"author\": {\n \"name\": \"Wojciech Maj\",\n \"email\": \"kontakt@wojtekmaj.pl\"\n },\n \"license\": \"MIT\",\n \"dependencies\": {\n \"@wojtekmaj/react-daterange-picker\": \"latest\",\n \"react\": \"^19.2.0\",\n \"react-dom\": \"^19.2.0\"\n },\n \"devDependencies\": {\n \"@vitejs/plugin-react\": \"^6.0.1\",\n \"typescript\": \"^6.0.2\",\n \"vite\": \"^8.0.5\"\n },\n \"packageManager\": \"yarn@4.10.3\"\n}\n" }, { "path": "sample/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"isolatedModules\": true,\n \"jsx\": \"react-jsx\",\n \"module\": \"preserve\",\n \"moduleDetection\": \"force\",\n \"noEmit\": true,\n \"noUncheckedIndexedAccess\": true,\n \"skipLibCheck\": true,\n \"target\": \"esnext\",\n \"verbatimModuleSyntax\": true\n }\n}\n" }, { "path": "sample/vite.config.ts", "content": "import { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\n\nexport default defineConfig({\n base: './',\n plugins: [react()],\n});\n" }, { "path": "test/.gitignore", "content": "dist\nnode_modules\n" }, { "path": "test/LocaleOptions.tsx", "content": "import { useId, useRef } from 'react';\n\ntype LocaleOptionsProps = {\n locale: string | undefined;\n setLocale: (locale: string | undefined) => void;\n};\n\nexport default function LocaleOptions({ locale, setLocale }: LocaleOptionsProps) {\n const localeDefaultId = useId();\n const localeEnUSId = useId();\n const localeFrFRId = useId();\n const localeArEGId = useId();\n const customLocaleId = useId();\n const customLocale = useRef(null);\n\n function onChange(event: React.ChangeEvent) {\n const { value: nextLocale } = event.target;\n\n if (nextLocale === 'undefined') {\n setLocale(undefined);\n } else {\n setLocale(nextLocale);\n }\n }\n\n function onCustomChange(event: React.FormEvent) {\n event.preventDefault();\n\n const input = customLocale.current;\n const { value: nextLocale } = input as HTMLInputElement;\n\n setLocale(nextLocale);\n }\n\n function resetLocale() {\n setLocale(undefined);\n }\n\n return (\n
\n Locale\n\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n  \n \n  \n \n \n \n
\n );\n}\n" }, { "path": "test/MaxDetailOptions.tsx", "content": "import type { Detail } from './shared/types.js';\n\nconst allViews = ['century', 'decade', 'year', 'month'] as const;\n\nfunction upperCaseFirstLetter(str: string) {\n return str.slice(0, 1).toUpperCase() + str.slice(1);\n}\n\ntype MaxDetailOptionsProps = {\n maxDetail: Detail;\n minDetail: Detail;\n setMaxDetail: (maxDetail: Detail) => void;\n};\n\nexport default function MaxDetailOptions({\n maxDetail,\n minDetail,\n setMaxDetail,\n}: MaxDetailOptionsProps) {\n function onChange(event: React.ChangeEvent) {\n const { value } = event.target;\n\n setMaxDetail(value as Detail);\n }\n\n const minDetailIndex = allViews.indexOf(minDetail);\n\n return (\n
\n Maximum detail\n\n {allViews.map((view, index) => (\n
\n index}\n id={`max-${view}`}\n name=\"maxDetail\"\n onChange={onChange}\n type=\"radio\"\n value={view}\n />\n \n
\n ))}\n
\n );\n}\n" }, { "path": "test/MinDetailOptions.tsx", "content": "import type { Detail } from './shared/types.js';\n\nconst allViews = ['century', 'decade', 'year', 'month'] as const;\n\nfunction upperCaseFirstLetter(str: string) {\n return str.slice(0, 1).toUpperCase() + str.slice(1);\n}\n\ntype MinDetailOptionsProps = {\n maxDetail: Detail;\n minDetail: Detail;\n setMinDetail: (maxDetail: Detail) => void;\n};\n\nexport default function MinDetailOptions({\n maxDetail,\n minDetail,\n setMinDetail,\n}: MinDetailOptionsProps) {\n function onChange(event: React.ChangeEvent) {\n const { value } = event.target;\n\n setMinDetail(value as Detail);\n }\n\n const maxDetailIndex = allViews.indexOf(maxDetail);\n\n return (\n
\n Minimum detail\n\n {allViews.map((view, index) => (\n
\n \n \n
\n ))}\n
\n );\n}\n" }, { "path": "test/Test.css", "content": "body {\n margin: 0;\n font-family: 'Segoe UI', Tahoma, sans-serif;\n}\n\n.Test header {\n background-color: #323639;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);\n padding: 20px;\n color: white;\n}\n\n.Test header h1 {\n font-size: inherit;\n margin: 0;\n}\n\n.Test__container {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n align-items: flex-start;\n margin: 10px 0;\n padding: 10px;\n}\n\n.Test__container > * > * {\n margin: 10px;\n}\n\n.Test__container__options {\n display: flex;\n flex-basis: 400px;\n flex-grow: 1;\n flex-wrap: wrap;\n margin: 0;\n}\n\n.Test__container__options input,\n.Test__container__options button {\n font: inherit;\n}\n\n.Test__container__options fieldset {\n border: 1px solid black;\n flex-grow: 1;\n position: relative;\n top: -10px;\n}\n\n.Test__container__options fieldset legend {\n font-weight: 600;\n}\n\n.Test__container__options fieldset legend + * {\n margin-top: 0 !important;\n}\n\n.Test__container__options fieldset label {\n font-weight: 600;\n display: block;\n}\n\n.Test__container__options fieldset label:not(:first-of-type) {\n margin-top: 1em;\n}\n\n.Test__container__options fieldset input[type='checkbox'] + label,\n.Test__container__options fieldset input[type='radio'] + label {\n font-weight: normal;\n display: inline-block;\n margin: 0;\n}\n\n.Test__container__options fieldset form:not(:first-child),\n.Test__container__options fieldset div:not(:first-child) {\n margin-top: 1em;\n}\n\n.Test__container__options fieldset form:not(:last-child),\n.Test__container__options fieldset div:not(:last-child) {\n margin-bottom: 1em;\n}\n\n.Test__container__content {\n display: flex;\n max-width: 100%;\n flex-basis: 420px;\n flex-direction: column;\n flex-grow: 100;\n align-items: stretch;\n}\n" }, { "path": "test/Test.tsx", "content": "import { useRef, useState } from 'react';\nimport DateRangePicker from '@wojtekmaj/react-daterange-picker';\nimport '@wojtekmaj/react-daterange-picker/dist/DateRangePicker.css';\nimport 'react-calendar/dist/Calendar.css';\n\nimport ValidityOptions from './ValidityOptions.js';\nimport MaxDetailOptions from './MaxDetailOptions.js';\nimport MinDetailOptions from './MinDetailOptions.js';\nimport LocaleOptions from './LocaleOptions.js';\nimport ValueOptions from './ValueOptions.js';\nimport ViewOptions from './ViewOptions.js';\n\nimport './Test.css';\n\nimport type { Detail, LooseValue } from './shared/types.js';\n\nconst now = new Date();\n\nconst ariaLabelProps = {\n calendarAriaLabel: 'Toggle calendar',\n clearAriaLabel: 'Clear value',\n dayAriaLabel: 'Day',\n monthAriaLabel: 'Month',\n nativeInputAriaLabel: 'Date',\n yearAriaLabel: 'Year',\n};\n\nconst placeholderProps = {\n dayPlaceholder: 'dd',\n monthPlaceholder: 'mm',\n yearPlaceholder: 'yyyy',\n};\n\nconst nineteenNinetyFive = new Date(1995, now.getUTCMonth() + 1, 15, 12);\nconst fifteenthOfNextMonth = new Date(now.getUTCFullYear(), now.getUTCMonth() + 1, 15, 12);\n\nexport default function Test() {\n const portalContainer = useRef(null);\n const [disabled, setDisabled] = useState(false);\n const [locale, setLocale] = useState();\n const [maxDate, setMaxDate] = useState(fifteenthOfNextMonth);\n const [maxDetail, setMaxDetail] = useState('month');\n const [minDate, setMinDate] = useState(nineteenNinetyFive);\n const [minDetail, setMinDetail] = useState('century');\n const [renderInPortal, setRenderInPortal] = useState(false);\n const [required, setRequired] = useState(true);\n const [showLeadingZeros, setShowLeadingZeros] = useState(true);\n const [showNeighboringMonth, setShowNeighboringMonth] = useState(false);\n const [showWeekNumbers, setShowWeekNumbers] = useState(false);\n const [value, setValue] = useState(now);\n\n return (\n
\n
\n

react-daterange-picker test page

\n
\n
\n \n
\n {\n event.preventDefault();\n\n console.warn('Calendar triggered submitting the form.');\n console.log(event);\n }}\n >\n console.log('Calendar closed')}\n onCalendarOpen={() => console.log('Calendar opened')}\n onChange={setValue}\n portalContainer={renderInPortal ? portalContainer.current : undefined}\n required={required}\n showLeadingZeros={showLeadingZeros}\n value={value}\n />\n
\n
\n
\n \n \n
\n
\n
\n );\n}\n" }, { "path": "test/ValidityOptions.tsx", "content": "import { useId } from 'react';\nimport { getISOLocalDate } from '@wojtekmaj/date-utils';\n\ntype ValidityOptionsProps = {\n maxDate?: Date;\n minDate?: Date;\n required?: boolean;\n setMaxDate: (maxDate: Date | undefined) => void;\n setMinDate: (minDate: Date | undefined) => void;\n setRequired: (required: boolean) => void;\n};\n\nexport default function ValidityOptions({\n maxDate,\n minDate,\n required,\n setMaxDate,\n setMinDate,\n setRequired,\n}: ValidityOptionsProps) {\n const minDateId = useId();\n const maxDateId = useId();\n const requiredId = useId();\n\n function onMinChange(event: React.ChangeEvent) {\n const { value } = event.target;\n\n setMinDate(value ? new Date(value) : undefined);\n }\n\n function onMaxChange(event: React.ChangeEvent) {\n const { value } = event.target;\n\n setMaxDate(value ? new Date(value) : undefined);\n }\n\n return (\n
\n Minimum and maximum date\n\n
\n \n \n  \n \n
\n\n
\n \n \n  \n \n
\n\n
\n setRequired(event.target.checked)}\n type=\"checkbox\"\n />\n \n
\n
\n );\n}\n" }, { "path": "test/ValueOptions.tsx", "content": "import { useId } from 'react';\nimport { getDayStart, getDayEnd, getISOLocalDate } from '@wojtekmaj/date-utils';\n\nimport type { LooseValue } from './shared/types.js';\n\ntype ValueOptionsProps = {\n setValue: (value: LooseValue) => void;\n value?: LooseValue;\n};\n\nexport default function ValueOptions({ setValue, value }: ValueOptionsProps) {\n const startDateId = useId();\n const endDateId = useId();\n\n const [startDate, endDate] = Array.isArray(value) ? value : [value, null];\n\n function setStartValue(nextStartDate: string | Date | null) {\n if (!nextStartDate) {\n setValue(endDate);\n return;\n }\n\n if (Array.isArray(value)) {\n setValue([nextStartDate, endDate]);\n } else {\n setValue(nextStartDate);\n }\n }\n\n function setEndValue(nextEndDate: string | Date | null) {\n if (!nextEndDate) {\n setValue(startDate || null);\n return;\n }\n\n setValue([startDate || null, nextEndDate]);\n }\n\n function onStartChange(event: React.ChangeEvent) {\n const { value: nextValue } = event.target;\n\n setStartValue(nextValue ? getDayStart(new Date(nextValue)) : null);\n }\n\n function onEndChange(event: React.ChangeEvent) {\n const { value: nextValue } = event.target;\n\n setEndValue(nextValue ? getDayEnd(new Date(nextValue)) : null);\n }\n\n return (\n
\n Value options\n\n
\n \n \n  \n \n \n
\n\n
\n \n \n  \n \n \n
\n
\n );\n}\n" }, { "path": "test/ViewOptions.tsx", "content": "import { useId } from 'react';\n\ntype ViewOptionsProps = {\n disabled: boolean;\n renderInPortal: boolean;\n setDisabled: (disabled: boolean) => void;\n setRenderInPortal: (renderInPortal: boolean) => void;\n setShowLeadingZeros: (showLeadingZeros: boolean) => void;\n setShowNeighboringMonth: (showNeighboringMonth: boolean) => void;\n setShowWeekNumbers: (showWeekNumbers: boolean) => void;\n showLeadingZeros: boolean;\n showNeighboringMonth: boolean;\n showWeekNumbers: boolean;\n};\n\nexport default function ViewOptions({\n disabled,\n renderInPortal,\n setDisabled,\n setRenderInPortal,\n setShowLeadingZeros,\n setShowNeighboringMonth,\n setShowWeekNumbers,\n showLeadingZeros,\n showNeighboringMonth,\n showWeekNumbers,\n}: ViewOptionsProps) {\n const disabledId = useId();\n const showLeadingZerosId = useId();\n const showWeekNumbersId = useId();\n const showNeighboringMonthId = useId();\n const renderInPortalId = useId();\n\n function onDisabledChange(event: React.ChangeEvent) {\n const { checked } = event.target;\n\n setDisabled(checked);\n }\n\n function onShowLeadingZerosChange(event: React.ChangeEvent) {\n const { checked } = event.target;\n\n setShowLeadingZeros(checked);\n }\n\n function onShowWeekNumbersChange(event: React.ChangeEvent) {\n const { checked } = event.target;\n\n setShowWeekNumbers(checked);\n }\n\n function onShowNeighboringMonthChange(event: React.ChangeEvent) {\n const { checked } = event.target;\n\n setShowNeighboringMonth(checked);\n }\n\n function onRenderInPortalChange(event: React.ChangeEvent) {\n const { checked } = event.target;\n\n setRenderInPortal(checked);\n }\n\n return (\n
\n View options\n\n
\n \n \n
\n\n
\n \n \n
\n\n
\n \n \n
\n\n
\n \n \n
\n\n
\n \n \n
\n
\n );\n}\n" }, { "path": "test/global.d.ts", "content": "declare module '*.css';\n" }, { "path": "test/index.html", "content": "\n\n \n \n \n react-daterange-picker test page\n \n \n
\n \n \n\n" }, { "path": "test/index.tsx", "content": "import { StrictMode } from 'react';\nimport { createRoot } from 'react-dom/client';\n\nimport Test from './Test.js';\n\nconst root = document.getElementById('root');\n\nif (!root) {\n throw new Error('Could not find root element');\n}\n\ncreateRoot(root).render(\n \n \n ,\n);\n" }, { "path": "test/package.json", "content": "{\n \"name\": \"test\",\n \"version\": \"2.0.0\",\n \"description\": \"A test page for React-DateRange-Picker.\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"build\": \"vite build\",\n \"dev\": \"vite\",\n \"format\": \"biome format\",\n \"lint\": \"biome lint\",\n \"preview\": \"vite preview\",\n \"test\": \"yarn lint && yarn tsc && yarn format\",\n \"tsc\": \"tsc\"\n },\n \"author\": {\n \"name\": \"Wojciech Maj\",\n \"email\": \"kontakt@wojtekmaj.pl\"\n },\n \"license\": \"MIT\",\n \"dependencies\": {\n \"@wojtekmaj/date-utils\": \"^2.0.2\",\n \"@wojtekmaj/react-daterange-picker\": \"workspace:packages/react-daterange-picker\",\n \"react\": \"^19.2.0\",\n \"react-dom\": \"^19.2.0\"\n },\n \"devDependencies\": {\n \"@biomejs/biome\": \"2.4.10\",\n \"@types/react\": \"^19.2.0\",\n \"@vitejs/plugin-react\": \"^6.0.1\",\n \"typescript\": \"^6.0.2\",\n \"vite\": \"^8.0.5\"\n }\n}\n" }, { "path": "test/shared/types.ts", "content": "type Range = [T, T];\n\nexport type Detail = 'century' | 'decade' | 'year' | 'month';\n\ntype LooseValuePiece = string | Date | null;\n\nexport type LooseValue = LooseValuePiece | Range;\n" }, { "path": "test/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"isolatedModules\": true,\n \"jsx\": \"react-jsx\",\n \"module\": \"preserve\",\n \"moduleDetection\": \"force\",\n \"noEmit\": true,\n \"noUncheckedIndexedAccess\": true,\n \"skipLibCheck\": true,\n \"target\": \"esnext\",\n \"verbatimModuleSyntax\": true\n }\n}\n" }, { "path": "test/vite.config.ts", "content": "import { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\n\nexport default defineConfig({\n base: './',\n plugins: [react()],\n});\n" } ]