track changes from origin fork

.babelrc

@@ -11,9 +11,6 @@
       "presets": [
         ["@babel/env", { "modules": false }],
         "@babel/react"
-      ],
-      "plugins": [
-        "@babel/proposal-class-properties"
       ]
     }
   }

.eslintrc.json

@@ -1,24 +1,8 @@
 {
-  "extends": "airbnb",
-  "env": {
-    "browser": true,
-    "es6": true,
-    "jest": true
-  },
+  "extends": "wojtekmaj/react",
   "parser": "babel-eslint",
   "rules": {
-    "arrow-parens": ["error", "as-needed", {
-      "requireForBlockBody": true
-    }],
-    "jsx-a11y/label-has-associated-control": ["error", { "required": { "some": ["id", "nesting"] }}],
-    "no-restricted-globals": "off",
-    "react/jsx-props-no-spreading": "off",
-    "react/jsx-sort-props": ["error", {
-      "reservedFirst": ["key"]
-    }],
-    "react/require-default-props": "off",
-    "react/sort-prop-types": "error",
-    "react/state-in-constructor": ["error", "never"]
+    "no-restricted-globals": "off"
   },
   "overrides": [
     {

.github/workflows/ci.yml

@@ -0,0 +1,30 @@
+# This workflow will do a clean install of node dependencies and run tests
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: CI
+
+on:
+  push:
+    branches: [ '*' ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+
+      - name: Install dependencies
+        run: yarn --immutable
+
+      - name: Run tests
+        run: yarn test

.gitignore

@@ -2,6 +2,9 @@
 .cache
 .idea
 .vscode
+**/.yarn/*
+!**/.yarn/releases
+!**/.yarn/plugins
 dist
 coverage
 node_modules

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-3.0.0.cjs

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017–2019 Wojciech Maj
+Copyright (c) 2017–2021 Wojciech Maj
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,4 +1,4 @@
-[![npm](https://img.shields.io/npm/v/react-calendar.svg)](https://www.npmjs.com/package/react-calendar) ![downloads](https://img.shields.io/npm/dt/react-calendar.svg) ![build](https://travis-ci.com/wojtekmaj/react-calendar.svg?branch=master) ![dependencies](https://img.shields.io/david/wojtekmaj/react-calendar.svg) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-calendar.svg) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
+[![npm](https://img.shields.io/npm/v/react-calendar.svg)](https://www.npmjs.com/package/react-calendar) ![downloads](https://img.shields.io/npm/dt/react-calendar.svg) [![CI](https://github.com/wojtekmaj/react-calendar/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-calendar/actions) ![dependencies](https://img.shields.io/david/wojtekmaj/react-calendar.svg) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-calendar.svg) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
 
 # React-Calendar
 
@@ -20,7 +20,7 @@ Ultimate calendar for your React app.
 
 ## Demo
 
-Minimal demo page is included in sample directory.
+A minimal demo page can be found in `sample` directory.
 
 [Online demo](http://projects.wojtekmaj.pl/react-calendar/) is also available!
 
@@ -68,7 +68,7 @@ function MyApp() {
 }
 ```
 
-Check the [sample directory](https://github.com/wojtekmaj/react-calendar/tree/master/sample) in this repository for a full working example. For more examples and more advanced use cases, check [Recipes](https://github.com/wojtekmaj/react-calendar/wiki/Recipes) in React-Calendar Wiki.
+Check the [sample directory](https://github.com/wojtekmaj/react-calendar/tree/master/sample) in this repository for a full working example. For more examples and more advanced use cases, check [Recipes](https://github.com/wojtekmaj/react-calendar/wiki/Recipes) in [React-Calendar Wiki](https://github.com/wojtekmaj/react-calendar/wiki).
 
 ### Custom styling
 
@@ -78,8 +78,6 @@ If you want to use default React-Calendar styling to build upon it, you can impo
 import 'react-calendar/dist/Calendar.css';
 ```
 
-instead.
-
 ## User guide
 
 ### Calendar
@@ -97,17 +95,20 @@ Displays a complete, interactive calendar.
 |defaultActiveStartDate|The beginning of a period that shall be displayed by default. If you wish to use React-Calendar in a controlled way, use `activeStartDate` instead.|(today)|`new Date(2017, 0, 1)`|
 |defaultValue|Calendar value that shall be selected initially. Can be either one value or an array of two values. If you wish to use React-Calendar in a controlled way, use `value` instead.|n/a|<ul><li>Date: `new Date()`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`|
 |defaultView|Determines which calendar view shall be opened initially. Does not disable navigation. Can be `"month"`, `"year"`, `"decade"` or `"century"`. If you wish to use React-Calendar in a controlled way, use `view` instead.|The most detailed view allowed|`"year"`|
-|formatLongDate|Function called to override default formatting of day tiles. Can be used to use your own formatting function.|(default formatter)|`(locale, date) => formatDate(date, 'dd MMM YYYY')`|
+|formatDay|Function called to override default formatting of day tile labels. Can be used to use your own formatting function.|(default formatter)|`(locale, date) => formatDate(date, 'd')`|
+|formatLongDate|Function called to override default formatting of day tile `abbr` labels. Can be used to use your own formatting function.|(default formatter)|`(locale, date) => formatDate(date, 'dd MMM YYYY')`|
 |formatMonth|Function called to override default formatting of month names. Can be used to use your own formatting function.|(default formatter)|`(locale, date) => formatDate(date, 'MMM')`|
 |formatMonthYear|Function called to override default formatting of months and years. Can be used to use your own formatting function.|(default formatter)|`(locale, date) => formatDate(date, 'MMMM YYYY')`|
 |formatShortWeekday|Function called to override default formatting of weekday names. Can be used to use your own formatting function.|(default formatter)|`(locale, date) => formatDate(date, 'dd')`|
 |formatYear|Function called to override default formatting of year in the top navigation section. Can be used to use your own formatting function.|(default formatter)|`(locale, date) => formatDate(date, 'YYYY')`|
+|inputRef|A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to main `<div>` rendered by `<Calendar>` component.|n/a|<ul><li>Function:<br />`(ref) => { this.myCalendar = ref; }`</li><li>Ref created using `React.createRef`:<br />`this.ref = React.createRef();`<br />…<br />`inputRef={this.ref}`</li><li>Ref created using `React.useRef`:<br />`const ref = React.useRef();`<br />…<br />`inputRef={ref}`</li></ul>|
 |locale|Locale that should be used by the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag).|User's browser settings|`"hu-HU"`|
 |maxDate|Maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although React-Calendar will ensure that no later date is selected.|n/a|Date: `new Date()`|
 |maxDetail|The most detailed view that the user shall see. View defined here also becomes the one on which clicking an item will select a date and pass it to onChange. Can be `"month"`, `"year"`, `"decade"` or `"century"`.|`"month"`|`"year"`|
 |minDate|Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-Calendar will ensure that no earlier date is selected.|n/a|Date: `new Date()`|
 |minDetail|The least detailed view that the user shall see. Can be `"month"`, `"year"`, `"decade"` or `"century"`.|`"century"`|`"decade"`|
 |navigationAriaLabel|`aria-label` attribute of a label rendered on calendar navigation bar.|n/a|`"Go up"`|
+|navigationAriaLive|`aria-live` attribute of a label rendered on calendar navigation bar.|`undefined`|`"polite"`|
 |navigationLabel|Content of a label rendered on calendar navigation bar.|(default label)|``({ date, label, locale, view }) => `Current view: ${view}, date: ${date.toLocaleDateString(locale)}` ``|
 |nextAriaLabel|`aria-label` attribute of the "next" button on the navigation pane.|n/a|`"Next"`|
 |nextLabel|Content of the "next" button on the navigation pane. Setting the value explicitly to null will hide the icon.|`"›"`|<ul><li>String: `"›"`</li><li>React element: `<NextIcon />`</li></ul>|
@@ -157,6 +158,10 @@ Displays a given month, year, decade and a century, respectively.
 |tileContent|Allows to render custom content within a given item (day on month view, month on year view and so on). Note: For tiles with custom content you might want to set fixed height of `react-calendar__tile` to ensure consistent layout.|n/a|`({ date, view }) => view === 'month' && date.getDay() === 0 ? <p>It's Sunday!</p> : null`|
 |value|Calendar value. Can be either one value or an array of two values.|n/a|<ul><li>Date: `new Date()`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`</li><li>String: `2017-01-01`</li><li>An array of strings: `['2017-01-01', '2017-08-01']`</li></ul>|
 
+## Useful links
+
+* [React-Calendar Wiki](https://github.com/wojtekmaj/react-calendar/wiki)
+
 ## License
 
 The MIT License.
@@ -171,7 +176,7 @@ The MIT License.
     <td>
       Wojciech Maj<br />
       <a href="mailto:[email protected]">[email protected]</a><br />
-      <a href="http://wojtekmaj.pl">http://wojtekmaj.pl</a>
+      <a href="https://wojtekmaj.pl">https://wojtekmaj.pl</a>
     </td>
   </tr>
 </table>

jest.setup.js

@@ -1,4 +1,4 @@
 import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 
 Enzyme.configure({ adapter: new Adapter() });

package.json

@@ -1,23 +1,26 @@
 {
   "name": "react-calendar",
-  "version": "3.1.0",
+  "version": "3.4.0",
   "description": "Ultimate calendar for your React app.",
   "main": "dist/umd/index.js",
   "module": "dist/esm/index.js",
   "source": "src/index.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css",
+    "*.less"
+  ],
   "scripts": {
     "build": "yarn build-js-all && yarn copy-styles && yarn build-styles",
     "build-js-all": "yarn build-js-esm && yarn build-js-umd",
-    "build-js-esm": "cross-env BABEL_ENV=production-esm babel src -d dist/esm --ignore **/*.spec.js,**/*.spec.jsx",
-    "build-js-umd": "cross-env BABEL_ENV=production-umd babel src -d dist/umd --ignore **/*.spec.js,**/*.spec.jsx",
+    "build-js-esm": "BABEL_ENV=production-esm babel src -d dist/esm --ignore \"**/*.spec.js,**/*.spec.jsx\"",
+    "build-js-umd": "BABEL_ENV=production-umd babel src -d dist/umd --ignore \"**/*.spec.js,**/*.spec.jsx\"",
     "build-styles": "lessc ./dist/Calendar.less ./dist/Calendar.css",
     "clean": "rimraf dist",
     "copy-styles": "node ./copy-styles.js",
     "jest": "jest",
     "jest-coverage": "jest --coverage",
     "lint": "eslint sample/ src/ test/ --ext .jsx,.js",
-    "prepublishOnly": "yarn clean && yarn build",
+    "prepack": "yarn clean && yarn build",
     "test": "yarn lint && yarn jest"
   },
   "jest": {
@@ -84,26 +87,23 @@
     "@babel/plugin-proposal-class-properties": "^7.8.0",
     "@babel/preset-env": "^7.9.0",
     "@babel/preset-react": "^7.9.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",
     "babel-eslint": "^10.0.0",
-    "cross-env": "^7.0.0",
     "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
-    "eslint": "~7.2.0",
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-plugin-import": "^2.21.2",
-    "eslint-plugin-jsx-a11y": "^6.3.0",
-    "eslint-plugin-react": "^7.20.0",
-    "eslint-plugin-react-hooks": "^4.0.0",
-    "jest": "^26.0.0",
-    "less": "^3.8.1",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "react-test-renderer": "^16.7.0",
+    "eslint": "~7.19.0",
+    "eslint-config-wojtekmaj": "^0.5.0",
+    "jest": "^26.6.0",
+    "less": "^4.0.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "rimraf": "^3.0.0"
   },
   "peerDependencies": {
-    "react": ">=16.3",
-    "react-dom": ">=16.3"
+    "react": "^16.3.0 || ^17.0.0-0",
+    "react-dom": "^16.3.0 || ^17.0.0-0"
+  },
+  "resolutions": {
+    "[email protected]": "^7.0.0"
   },
   "files": [
     "LICENSE",
@@ -114,5 +114,6 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/wojtekmaj/react-calendar.git"
-  }
+  },
+  "funding": "https://github.com/wojtekmaj/react-calendar?sponsor=1"
 }

sample/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    ["@babel/preset-env", {
+      "modules": false
+    }],
+    "@babel/react"
+  ]
+}

sample/parcel/.gitignore → sample/.gitignore

@@ -1,3 +1,2 @@
 dist
 node_modules
-yarn.lock

sample/Sample.jsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import Calendar from 'react-calendar';
+
+import './Sample.less';
+
+export default function Sample() {
+  const [value, onChange] = useState(new Date());
+
+  return (
+    <div className="Sample">
+      <header>
+        <h1>react-calendar sample page</h1>
+      </header>
+      <div className="Sample__container">
+        <main className="Sample__container__content">
+          <Calendar
+            onChange={onChange}
+            showWeekNumbers
+            value={value}
+          />
+        </main>
+      </div>
+    </div>
+  );
+}

sample/parcel-ts/index.html → sample/index.html

@@ -6,7 +6,6 @@
     <title>react-calendar sample page</title>
   </head>
   <body>
-    <div id="react-container"></div>
-    <script src="index.jsx"></script>
+    <div id="react-root"></div>
   </body>
 </html>

sample/parcel/index.jsx → sample/index.jsx

@@ -2,4 +2,4 @@ import React from 'react';
 import { render } from 'react-dom';
 import Sample from './Sample';
 
-render(<Sample />, document.getElementById('react-container'));
+render(<Sample />, document.getElementById('react-root'));

sample/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "react-calendar-sample-page",
+  "version": "2.18.0",
+  "description": "A sample page for React-Calendar.",
+  "private": true,
+  "scripts": {
+    "build": "NODE_ENV=production webpack",
+    "start": "NODE_ENV=development webpack serve"
+  },
+  "author": {
+    "name": "Wojciech Maj",
+    "email": "[email protected]"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "prop-types": "^15.6.2",
+    "react": "^17.0.0",
+    "react-calendar": "latest",
+    "react-dom": "^17.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.0",
+    "@babel/preset-env": "^7.12.0",
+    "@babel/preset-react": "^7.12.0",
+    "babel-loader": "^8.0.0",
+    "css-loader": "^6.0.0",
+    "html-webpack-plugin": "^5.1.0",
+    "less": "^4.0.0",
+    "less-loader": "^10.0.0",
+    "style-loader": "^3.0.0",
+    "webpack": "^5.20.0",
+    "webpack-cli": "^4.7.0",
+    "webpack-dev-server": "^4.0.0"
+  },
+  "resolutions": {
+    "[email protected]": "^7.0.0"
+  }
+}