@onewelcome/react-lib-components 9.1.0 → 9.2.0

package/dist/esm/src/hooks/useScreenSize.d.ts

@@ -0,0 +1,9 @@
+import { ScreenSize } from "../variables";
+interface Props {
+    onScreenSizeChange?: (nextScreenSize: ScreenSize, prevScreenSize?: ScreenSize) => void;
+}
+export declare const useScreenSize: ({ onScreenSizeChange }?: Props) => {
+    screenSize: ScreenSize;
+    isDesktopScreenSize: () => boolean;
+};
+export {};

package/dist/esm/src/hooks/useScreenSize.esm.js

@@ -0,0 +1,51 @@
+import { useState, useEffect } from 'react';
+import { breakpoints, ScreenSize } from '../variables.esm.js';
+
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+const emToPx = (em) => em * parseFloat(getComputedStyle(document.documentElement).fontSize);
+const getScreenSize = (width) => {
+    if (width < emToPx(breakpoints[ScreenSize.SMALL])) {
+        return ScreenSize.SMALL;
+    }
+    if (width < emToPx(breakpoints[ScreenSize.MEDIUM])) {
+        return ScreenSize.MEDIUM;
+    }
+    return ScreenSize.LARGE;
+};
+const useScreenSize = ({ onScreenSizeChange } = {}) => {
+    const [screenSize, setScreenSize] = useState(getScreenSize(window.innerWidth));
+    useEffect(() => {
+        const handleResize = () => {
+            const newScreenSize = getScreenSize(window.innerWidth);
+            setScreenSize(prevScreenSize => {
+                if (newScreenSize !== prevScreenSize) {
+                    onScreenSizeChange === null || onScreenSizeChange === void 0 ? void 0 : onScreenSizeChange(newScreenSize, prevScreenSize);
+                    return newScreenSize;
+                }
+                return prevScreenSize;
+            });
+        };
+        window.addEventListener("resize", handleResize);
+        handleResize();
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    const isDesktopScreenSize = () => screenSize === ScreenSize.LARGE;
+    return { screenSize, isDesktopScreenSize };
+};
+
+export { useScreenSize };
+//# sourceMappingURL=useScreenSize.esm.js.map

package/dist/esm/src/hooks/useScreenSize.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScreenSize.esm.js","sources":["../../../../../../src/hooks/useScreenSize.ts"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport { useState, useEffect } from \"react\";\nimport { breakpoints, ScreenSize } from \"../variables\";\n\ninterface Props {\n  onScreenSizeChange?: (nextScreenSize: ScreenSize, prevScreenSize?: ScreenSize) => void;\n}\n\nconst emToPx = (em: number) => em * parseFloat(getComputedStyle(document.documentElement).fontSize);\n\nconst getScreenSize = (width: number) => {\n  if (width < emToPx(breakpoints[ScreenSize.SMALL])) {\n    return ScreenSize.SMALL;\n  }\n  if (width < emToPx(breakpoints[ScreenSize.MEDIUM])) {\n    return ScreenSize.MEDIUM;\n  }\n\n  return ScreenSize.LARGE;\n};\n\nexport const useScreenSize = ({ onScreenSizeChange }: Props = {}) => {\n  const [screenSize, setScreenSize] = useState<ScreenSize>(getScreenSize(window.innerWidth));\n\n  useEffect(() => {\n    const handleResize = () => {\n      const newScreenSize = getScreenSize(window.innerWidth);\n      setScreenSize(prevScreenSize => {\n        if (newScreenSize !== prevScreenSize) {\n          onScreenSizeChange?.(newScreenSize, prevScreenSize);\n          return newScreenSize;\n        }\n        return prevScreenSize;\n      });\n    };\n\n    window.addEventListener(\"resize\", handleResize);\n    handleResize();\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, []);\n\n  const isDesktopScreenSize = () => screenSize === ScreenSize.LARGE;\n\n  return { screenSize, isDesktopScreenSize };\n};\n"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;AAcG;AASH,MAAM,MAAM,GAAG,CAAC,EAAU,KAAK,EAAE,GAAG,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,QAAQ,CAAC,CAAC;AAEpG,MAAM,aAAa,GAAG,CAAC,KAAa,KAAI;AACtC,IAAA,IAAI,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE;QACjD,OAAO,UAAU,CAAC,KAAK,CAAC;KACzB;AACD,IAAA,IAAI,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE;QAClD,OAAO,UAAU,CAAC,MAAM,CAAC;KAC1B;IAED,OAAO,UAAU,CAAC,KAAK,CAAC;AAC1B,CAAC,CAAC;AAEW,MAAA,aAAa,GAAG,CAAC,EAAE,kBAAkB,EAAA,GAAY,EAAE,KAAI;AAClE,IAAA,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAa,aAAa,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;IAE3F,SAAS,CAAC,MAAK;QACb,MAAM,YAAY,GAAG,MAAK;YACxB,MAAM,aAAa,GAAG,aAAa,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;YACvD,aAAa,CAAC,cAAc,IAAG;AAC7B,gBAAA,IAAI,aAAa,KAAK,cAAc,EAAE;oBACpC,kBAAkB,KAAA,IAAA,IAAlB,kBAAkB,KAAlB,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,kBAAkB,CAAG,aAAa,EAAE,cAAc,CAAC,CAAC;AACpD,oBAAA,OAAO,aAAa,CAAC;iBACtB;AACD,gBAAA,OAAO,cAAc,CAAC;AACxB,aAAC,CAAC,CAAC;AACL,SAAC,CAAC;AAEF,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;AAChD,QAAA,YAAY,EAAE,CAAC;QACf,OAAO,MAAM,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;KACjE,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,mBAAmB,GAAG,MAAM,UAAU,KAAK,UAAU,CAAC,KAAK,CAAC;AAElE,IAAA,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,CAAC;AAC7C;;;;"}

package/dist/esm/src/hooks/useScreenSize.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/index.d.ts

@@ -50,6 +50,8 @@ export { useDebouncedCallback } from "./hooks/useDebouncedCallback";
 export { useUploadFile } from "./hooks/useUploadFile";
 export type { UploadResponseStatus, UploadResponseJson, UploadResponseType, UseUploadFileCallback, UploadFileRequestParams } from "./hooks/useUploadFile";
 export { generateID, debounce, throttle } from "./util/helper";
+export { useScreenSize } from "./hooks/useScreenSize";
+export { ScreenSize } from "./variables";
 export { Modal } from "./components/Notifications/Modal/Modal";
 export type { Props as ModalProps } from "./components/Notifications/Modal/Modal";
 export { useAlert } from "./components/Notifications/Alert/useAlert";

package/dist/esm/src/index.esm.js

@@ -26,6 +26,8 @@ export { usePosition } from './hooks/usePosition.esm.js';
 export { useDebouncedCallback } from './hooks/useDebouncedCallback.esm.js';
 export { useUploadFile } from './hooks/useUploadFile.esm.js';
 export { debounce, generateID, throttle } from './util/helper.esm.js';
+export { useScreenSize } from './hooks/useScreenSize.esm.js';
+export { ScreenSize } from './variables.esm.js';
 export { BaseModal as Modal } from '../Notifications/BaseModal/BaseModal.esm.js';
 export { useAlert } from '../Notifications/Alert/useAlert.esm.js';
 export { AlertProvider } from '../Notifications/Alert/AlertProvider/AlertProvider.esm.js';

package/dist/esm/src/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/src/readyclasses.module.scss.esm.js

@@ -1,7 +1,7 @@
 import styleInject from '../node_modules/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.readyclasses_sr-only_5EgOB{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.readyclasses_hidden_5EgOB{display:none}.readyclasses_slide-in_5EgOB{animation:readyclasses_slide-in_5EgOB .5s forwards}@media (prefers-reduced-motion:reduce){.readyclasses_slide-in_5EgOB{animation-duration:.1ms}}.readyclasses_slide-out_5EgOB{animation:readyclasses_slide-out_5EgOB .5s forwards}@media (prefers-reduced-motion:reduce){.readyclasses_slide-out_5EgOB{animation-duration:.1ms}}@keyframes readyclasses_slide-in_5EgOB{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes readyclasses_slide-out_5EgOB{0%{transform:translateY(0)}to{transform:translateY(100vh)}}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJlYWR5Y2xhc3Nlcy5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7RUFjRSxDQUNGLDRCQU9FLGtCQUFzQixDQUN0QixRQUFTLENBTFQsVUFBVyxDQUVYLFdBQVksQ0FDWixlQUFnQixDQUZoQixTQUFVLENBSFYsaUJBQWtCLENBQ2xCLFNBT0YsQ0FFQSwyQkFDRSxZQUNGLENBRUEsNkJBQ0Usa0RBQ0YsQ0FDQSx1Q0FDRSw2QkFDRSx1QkFDRixDQUNGLENBRUEsOEJBQ0UsbURBQ0YsQ0FDQSx1Q0FDRSw4QkFDRSx1QkFDRixDQUNGLENBRUEsdUNBQ0UsR0FDRSwyQkFDRixDQUNBLEdBQ0UsdUJBQ0YsQ0FDRixDQUNBLHdDQUNFLEdBQ0UsdUJBQ0YsQ0FDQSxHQUNFLDJCQUNGLENBQ0YiLCJmaWxlIjoicmVhZHljbGFzc2VzLm1vZHVsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyohXG4gKiBDb3B5cmlnaHQgMjAyMiBPbmVXZWxjb21lIEIuVi5cbiAqXG4gKiAgICBMaWNlbnNlZCB1bmRlciB0aGUgQXBhY2hlIExpY2Vuc2UsIFZlcnNpb24gMi4wICh0aGUgXCJMaWNlbnNlXCIpO1xuICogICAgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogICAgWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogICAgICAgIGh0dHA6Ly93d3cuYXBhY2hlLm9yZy9saWNlbnNlcy9MSUNFTlNFLTIuMFxuICpcbiAqICAgIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqICAgIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBCQVNJUyxcbiAqICAgIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogICAgU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogICAgbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cbi5zci1vbmx5IHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB3aWR0aDogMXB4O1xuICBoZWlnaHQ6IDFweDtcbiAgcGFkZGluZzogMDtcbiAgbWFyZ2luOiAtMXB4O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBjbGlwOiByZWN0KDAsIDAsIDAsIDApO1xuICBib3JkZXI6IDA7XG59XG5cbi5oaWRkZW4ge1xuICBkaXNwbGF5OiBub25lO1xufVxuXG4uc2xpZGUtaW4ge1xuICBhbmltYXRpb246IHNsaWRlLWluIDAuNXMgZm9yd2FyZHM7XG59XG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAuc2xpZGUtaW4ge1xuICAgIGFuaW1hdGlvbi1kdXJhdGlvbjogMC4xbXM7XG4gIH1cbn1cblxuLnNsaWRlLW91dCB7XG4gIGFuaW1hdGlvbjogc2xpZGUtb3V0IDAuNXMgZm9yd2FyZHM7XG59XG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAuc2xpZGUtb3V0IHtcbiAgICBhbmltYXRpb24tZHVyYXRpb246IDAuMW1zO1xuICB9XG59XG5cbkBrZXlmcmFtZXMgc2xpZGUtaW4ge1xuICAwJSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDEwMHZoKTtcbiAgfVxuICAxMDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xuICB9XG59XG5Aa2V5ZnJhbWVzIHNsaWRlLW91dCB7XG4gIDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xuICB9XG4gIDEwMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgxMDB2aCk7XG4gIH1cbn0iXX0= */";
-var readyclasses = {"sr-only":"readyclasses_sr-only_5EgOB","hidden":"readyclasses_hidden_5EgOB","slide-in":"readyclasses_slide-in_5EgOB","slide-out":"readyclasses_slide-out_5EgOB"};
+var css_248z = "/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.readyclasses_sr-only_L3NVL{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.readyclasses_hidden_L3NVL{display:none}.readyclasses_slide-in_L3NVL{animation:readyclasses_slide-in_L3NVL .5s forwards}@media (prefers-reduced-motion:reduce){.readyclasses_slide-in_L3NVL{animation-duration:.1ms}}.readyclasses_slide-out_L3NVL{animation:readyclasses_slide-out_L3NVL .5s forwards}@media (prefers-reduced-motion:reduce){.readyclasses_slide-out_L3NVL{animation-duration:.1ms}}@keyframes readyclasses_slide-in_L3NVL{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes readyclasses_slide-out_L3NVL{0%{transform:translateY(0)}to{transform:translateY(100vh)}}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJlYWR5Y2xhc3Nlcy5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7RUFjRSxDQUNGLDRCQU9FLGtCQUFzQixDQUN0QixRQUFTLENBTFQsVUFBVyxDQUVYLFdBQVksQ0FDWixlQUFnQixDQUZoQixTQUFVLENBSFYsaUJBQWtCLENBQ2xCLFNBT0YsQ0FFQSwyQkFDRSxZQUNGLENBRUEsNkJBQ0Usa0RBQ0YsQ0FDQSx1Q0FDRSw2QkFDRSx1QkFDRixDQUNGLENBRUEsOEJBQ0UsbURBQ0YsQ0FDQSx1Q0FDRSw4QkFDRSx1QkFDRixDQUNGLENBRUEsdUNBQ0UsR0FDRSwyQkFDRixDQUNBLEdBQ0UsdUJBQ0YsQ0FDRixDQUNBLHdDQUNFLEdBQ0UsdUJBQ0YsQ0FDQSxHQUNFLDJCQUNGLENBQ0YiLCJmaWxlIjoicmVhZHljbGFzc2VzLm1vZHVsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyohXG4gKiBDb3B5cmlnaHQgMjAyMiBPbmVXZWxjb21lIEIuVi5cbiAqXG4gKiAgICBMaWNlbnNlZCB1bmRlciB0aGUgQXBhY2hlIExpY2Vuc2UsIFZlcnNpb24gMi4wICh0aGUgXCJMaWNlbnNlXCIpO1xuICogICAgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogICAgWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogICAgICAgIGh0dHA6Ly93d3cuYXBhY2hlLm9yZy9saWNlbnNlcy9MSUNFTlNFLTIuMFxuICpcbiAqICAgIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqICAgIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBCQVNJUyxcbiAqICAgIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogICAgU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogICAgbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cbi5zci1vbmx5IHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB3aWR0aDogMXB4O1xuICBoZWlnaHQ6IDFweDtcbiAgcGFkZGluZzogMDtcbiAgbWFyZ2luOiAtMXB4O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBjbGlwOiByZWN0KDAsIDAsIDAsIDApO1xuICBib3JkZXI6IDA7XG59XG5cbi5oaWRkZW4ge1xuICBkaXNwbGF5OiBub25lO1xufVxuXG4uc2xpZGUtaW4ge1xuICBhbmltYXRpb246IHNsaWRlLWluIDAuNXMgZm9yd2FyZHM7XG59XG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAuc2xpZGUtaW4ge1xuICAgIGFuaW1hdGlvbi1kdXJhdGlvbjogMC4xbXM7XG4gIH1cbn1cblxuLnNsaWRlLW91dCB7XG4gIGFuaW1hdGlvbjogc2xpZGUtb3V0IDAuNXMgZm9yd2FyZHM7XG59XG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAuc2xpZGUtb3V0IHtcbiAgICBhbmltYXRpb24tZHVyYXRpb246IDAuMW1zO1xuICB9XG59XG5cbkBrZXlmcmFtZXMgc2xpZGUtaW4ge1xuICAwJSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDEwMHZoKTtcbiAgfVxuICAxMDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xuICB9XG59XG5Aa2V5ZnJhbWVzIHNsaWRlLW91dCB7XG4gIDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xuICB9XG4gIDEwMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgxMDB2aCk7XG4gIH1cbn0iXX0= */";
+var readyclasses = {"sr-only":"readyclasses_sr-only_L3NVL","hidden":"readyclasses_hidden_L3NVL","slide-in":"readyclasses_slide-in_L3NVL","slide-out":"readyclasses_slide-out_L3NVL"};
 styleInject(css_248z);
 
 export { readyclasses as default };

package/dist/esm/src/variables.d.ts

@@ -0,0 +1,8 @@
+export declare enum ScreenSize {
+    SMALL = 0,
+    MEDIUM = 1,
+    LARGE = 2
+}
+export declare const breakpoints: {
+    [key in ScreenSize]: number;
+};

package/dist/esm/src/variables.esm.js

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+/** Breakpoints **/
+const small = 30; //em = 480px
+const medium = 50; //em = 800px
+const large = 90; //em = 1440px
+var ScreenSize;
+(function (ScreenSize) {
+    ScreenSize[ScreenSize["SMALL"] = 0] = "SMALL";
+    ScreenSize[ScreenSize["MEDIUM"] = 1] = "MEDIUM";
+    ScreenSize[ScreenSize["LARGE"] = 2] = "LARGE";
+})(ScreenSize || (ScreenSize = {}));
+const breakpoints = {
+    [ScreenSize.SMALL]: small,
+    [ScreenSize.MEDIUM]: medium,
+    [ScreenSize.LARGE]: large
+};
+
+export { ScreenSize, breakpoints };
+//# sourceMappingURL=variables.esm.js.map

package/dist/esm/src/variables.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variables.esm.js","sources":["../../../../../src/variables.ts"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\n/** Breakpoints **/\nconst small = 30 as const; //em = 480px\nconst medium = 50 as const; //em = 800px\nconst large = 90 as const; //em = 1440px\n\nexport enum ScreenSize {\n  SMALL,\n  MEDIUM,\n  LARGE\n}\n\nexport const breakpoints: { [key in ScreenSize]: number } = {\n  [ScreenSize.SMALL]: small,\n  [ScreenSize.MEDIUM]: medium,\n  [ScreenSize.LARGE]: large\n} as const;\n"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;AAcG;AAEH;AACA,MAAM,KAAK,GAAG,EAAW,CAAC;AAC1B,MAAM,MAAM,GAAG,EAAW,CAAC;AAC3B,MAAM,KAAK,GAAG,EAAW,CAAC;IAEd,WAIX;AAJD,CAAA,UAAY,UAAU,EAAA;AACpB,IAAA,UAAA,CAAA,UAAA,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAK,CAAA;AACL,IAAA,UAAA,CAAA,UAAA,CAAA,QAAA,CAAA,GAAA,CAAA,CAAA,GAAA,QAAM,CAAA;AACN,IAAA,UAAA,CAAA,UAAA,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAK,CAAA;AACP,CAAC,EAJW,UAAU,KAAV,UAAU,GAIrB,EAAA,CAAA,CAAA,CAAA;AAEY,MAAA,WAAW,GAAoC;AAC1D,IAAA,CAAC,UAAU,CAAC,KAAK,GAAG,KAAK;AACzB,IAAA,CAAC,UAAU,CAAC,MAAM,GAAG,MAAM;AAC3B,IAAA,CAAC,UAAU,CAAC,KAAK,GAAG,KAAK;;;;;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "9.1.0",
+  "version": "9.2.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/cjs/src/index.cjs.js",
@@ -133,6 +133,7 @@
     "storybook": "^8.6.12",
     "storybook-addon-mock": "^5.0.0",
     "storybook-addon-pseudo-states": "^4.0.4",
+    "storybook-mock-date-decorator": "^2.0.6",
     "style-loader": "^4.0.0",
     "ts-jest": "^29.1.5",
     "tslib": "^2.6.3",

package/src/components/admin/layout/LeftNav/LeftNav.module.scss

@@ -35,8 +35,9 @@
     0px 3px 4px 0px rgba(1, 5, 50, 0.02),
     0px 1px 5px 0px rgba(1, 5, 50, 0.04);
 
+  transition: transform 200ms ease-in-out;
+
   @include mixins.breakpoint("max", "medium") {
-    transition: transform 200ms ease-in-out;
     box-shadow: 0 30px 50px #00000029;
     transform: translateX(-110%);
 
@@ -49,4 +50,15 @@
       transform: translateX(0);
     }
   }
+
+  @include mixins.breakpoint("min", "medium") {
+    &.sidenavbar--collapsed {
+      box-shadow: 0 30px 50px #00000029;
+      transform: translateX(-110%);
+
+      &.hidden {
+        visibility: hidden;
+      }
+    }
+  }
 }

package/src/components/admin/layout/LeftNav/LeftNav.tsx

@@ -24,9 +24,12 @@ import classes from "./LeftNav.module.scss";
 import { MenuItem } from "./LeftNav.interfaces";
 import { LeftNavItem } from "./LeftNavItem/LeftNavItem";
 import { useRefItems } from "./useRefItems";
+import { ScreenSize } from "../../../../variables";
+import { useScreenSize } from "../../../../hooks/useScreenSize";
 
 export interface Props extends ComponentPropsWithRef<"nav"> {
   isSideMenuOpen?: boolean;
+  onScreenSizeChange?: (nextScreenSize: ScreenSize, prevScreenSize?: ScreenSize) => void;
   items: MenuItem[];
   navigate: (path: string) => void;
   onItemClick?: (path?: string, button?: boolean) => void;
@@ -34,10 +37,11 @@ export interface Props extends ComponentPropsWithRef<"nav"> {
 }
 
 const LeftNavComponent: ForwardRefRenderFunction<HTMLElement, Props> = (
-  { isSideMenuOpen, items, navigate, onItemClick, marginTop, ...rest },
+  { isSideMenuOpen, onScreenSizeChange, items, navigate, onItemClick, marginTop, ...rest },
   ref
 ) => {
   const [isSideNavbarVisible, setIsSideNavbarVisible] = useState(isSideMenuOpen);
+  useScreenSize({ onScreenSizeChange });
   const refItems = useRefItems({ items });
 
   const onSideNavbarTransitionEnd: React.TransitionEventHandler<HTMLUListElement> = () => {
@@ -67,7 +71,7 @@ const LeftNavComponent: ForwardRefRenderFunction<HTMLElement, Props> = (
     <nav {...rest} ref={ref}>
       <ul
         style={{ "--margin-top": marginTop } as CSSProperties}
-        className={`${classes["sidenavbar"]} ${isSideMenuOpen ? classes["open"] : ""} ${
+        className={`${classes["sidenavbar"]} ${!isSideMenuOpen ? classes["sidenavbar--collapsed"] : ""} ${isSideMenuOpen ? classes["open"] : ""} ${
           !isSideNavbarVisible ? classes["hidden"] : ""
         }`}
         onTransitionEnd={onSideNavbarTransitionEnd}

package/src/components/admin/layout/LeftNav/LeftNavItem/LeftNavItem.module.scss

@@ -58,6 +58,10 @@
       }
     }
   }
+
+  .menu-button-wrapper .menu-link {
+    padding-left: 2.5rem;
+  }
 }
 
 .menu-list {
@@ -161,8 +165,9 @@
 .menu-list-item {
   position: relative;
 
-  .menu-item {
+  a.menu-item {
     padding: 0.75rem 1rem;
+    color: var(--color-blue-grey900);
   }
 
   a.menu-item-active {

package/src/components/admin/layout/LeftNav/LeftNavItem/LinkLeftNavItem.tsx

@@ -64,7 +64,6 @@ const LinkLeftNavItemComponent: ForwardRefRenderFunction<HTMLElement, Props> = (
         <Link
           ref={ref as Ref<HTMLAnchorElement>}
           onKeyDown={onKeyPressNavigation}
-          onClick={onLinkClickHandler}
           data-testid={`left-nav-item-${item.key}`}
           aria-current={item.active ? "page" : false}
           aria-disabled={item.disabled}

package/src/components/admin/layout/LeftNav/useRefItems.ts

@@ -66,7 +66,7 @@ export const useRefItems = ({ items }: Props) => {
         currentNextItem = nextItem;
       }
 
-      const hasChildren = currentItem.items?.filter(item => !item.disabled) !== undefined;
+      const hasChildren = (currentItem.items?.filter(item => !item.disabled) ?? []).length !== 0;
       if (hasChildren) {
         itemsMap[currentItem.key] = {
           item: currentItem,

package/src/hooks/useScreenSize.ts

@@ -0,0 +1,60 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import { useState, useEffect } from "react";
+import { breakpoints, ScreenSize } from "../variables";
+
+interface Props {
+  onScreenSizeChange?: (nextScreenSize: ScreenSize, prevScreenSize?: ScreenSize) => void;
+}
+
+const emToPx = (em: number) => em * parseFloat(getComputedStyle(document.documentElement).fontSize);
+
+const getScreenSize = (width: number) => {
+  if (width < emToPx(breakpoints[ScreenSize.SMALL])) {
+    return ScreenSize.SMALL;
+  }
+  if (width < emToPx(breakpoints[ScreenSize.MEDIUM])) {
+    return ScreenSize.MEDIUM;
+  }
+
+  return ScreenSize.LARGE;
+};
+
+export const useScreenSize = ({ onScreenSizeChange }: Props = {}) => {
+  const [screenSize, setScreenSize] = useState<ScreenSize>(getScreenSize(window.innerWidth));
+
+  useEffect(() => {
+    const handleResize = () => {
+      const newScreenSize = getScreenSize(window.innerWidth);
+      setScreenSize(prevScreenSize => {
+        if (newScreenSize !== prevScreenSize) {
+          onScreenSizeChange?.(newScreenSize, prevScreenSize);
+          return newScreenSize;
+        }
+        return prevScreenSize;
+      });
+    };
+
+    window.addEventListener("resize", handleResize);
+    handleResize();
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const isDesktopScreenSize = () => screenSize === ScreenSize.LARGE;
+
+  return { screenSize, isDesktopScreenSize };
+};

package/src/index.ts

@@ -83,6 +83,8 @@ export type {
   UploadFileRequestParams
 } from "./hooks/useUploadFile";
 export { generateID, debounce, throttle } from "./util/helper";
+export { useScreenSize } from "./hooks/useScreenSize";
+export { ScreenSize } from "./variables";
 
 /* Notifications */
 export { Modal } from "./components/Notifications/Modal/Modal";

package/src/variables.ts

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+/** Breakpoints **/
+const small = 30 as const; //em = 480px
+const medium = 50 as const; //em = 800px
+const large = 90 as const; //em = 1440px
+
+export enum ScreenSize {
+  SMALL,
+  MEDIUM,
+  LARGE
+}
+
+export const breakpoints: { [key in ScreenSize]: number } = {
+  [ScreenSize.SMALL]: small,
+  [ScreenSize.MEDIUM]: medium,
+  [ScreenSize.LARGE]: large
+} as const;