Merge branch 'master' into pr/3086

Author: martijnrusschen

docs-site/package.json

@@ -3,11 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "highlight.js": "^11.0.1",
+    "highlight.js": "^11.2.0",
     "react": "^17.0.2",
     "react-app-rewired": "^2.1.8",
     "react-dom": "^17.0.2",
-    "react-live": "^2.2.3",
+    "react-live": "^2.3.0",
     "react-scripts": "4.0.3"
   },
   "scripts": {
@@ -32,7 +32,7 @@
     ]
   },
   "devDependencies": {
-    "node-sass": "^5.0.0",
+    "sass": "^1.37.5",
     "raw-loader": "^4.0.2"
   }
 }

docs-site/src/components/Examples/index.js

@@ -43,6 +43,7 @@ import OnBlurCallbacks from "../../examples/onBlurCallbacks";
 import ConfigurePopper from "../../examples/configurePopper";
 import Portal from "../../examples/portal";
 import PortalById from "../../examples/portalById";
+import WithPortalById from "../../examples/withPortalById";
 import TabIndex from "../../examples/tabIndex";
 import YearDropdown from "../../examples/yearDropdown";
 import YearItemNumber from "../../examples/yearItemNumber";
@@ -51,6 +52,7 @@ import MonthDropdownShort from "../../examples/monthDropdownShort";
 import MonthYearDropdown from "../../examples/monthYearDropdown";
 import YearSelectDropdown from "../../examples/yearSelectDropdown";
 import Inline from "../../examples/inline";
+import InlineVisible from "../../examples/inlineVisible";
 import OpenToDate from "../../examples/openToDate";
 import FixedCalendar from "../../examples/fixedCalendar";
 import WeekNumbers from "../../examples/weekNumbers";
@@ -262,8 +264,8 @@ export default class exampleComponents extends React.Component {
       component: Inline,
     },
     {
-      title: "Inline portal version",
-      component: Inline,
+      title: "Button to show Inline version",
+      component: InlineVisible,
     },
     {
       title: "Input time",
@@ -355,6 +357,12 @@ export default class exampleComponents extends React.Component {
         "If the provided portalId cannot be found in the dom, one will be created by default with that id.",
       component: PortalById,
     },
+    {
+      title: "Portal version with portal by id",
+      description:
+        "If the provided portalId cannot be found in the dom, one will be created by default with that id.",
+      component: WithPortalById,
+    },
     {
       title: "Quarter Picker",
       component: QuarterPicker,

docs-site/src/examples/inlinePortal.js renamed to docs-site/src/examples/inlineVisible.js

@@ -3,6 +3,7 @@
   const [isOpen, setIsOpen] = useState(false);
   const handleChange = (e) => {
     setIsOpen(!isOpen);
+    setStartDate(e);
   };
   const handleClick = (e) => {
     e.preventDefault();
@@ -14,12 +15,7 @@
         {format(startDate, "dd-MM-yyyy")}
       </button>
       {isOpen && (
-        <DatePicker
-          selected={startDate}
-          onChange={handleChange}
-          withPortal
-          inline
-        />
+        <DatePicker selected={startDate} onChange={handleChange} inline />
       )}
     </>
   );

docs-site/src/examples/withPortalById.js

@@ -0,0 +1,11 @@
+() => {
+  const [startDate, setStartDate] = useState(new Date());
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date) => setStartDate(date)}
+      withPortal
+      portalId="root-portal"
+    />
+  );
+};