@onewelcome/react-lib-components 9.0.0 → 9.2.0

package/dist/esm/src/components/admin/layout/LeftNav/LeftNav.d.ts

@@ -1,7 +1,9 @@
 import React, { ComponentPropsWithRef } from "react";
 import { MenuItem } from "./LeftNav.interfaces";
+import { ScreenSize } from "../../../../variables";
 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;

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_VpokY{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.readyclasses_hidden_VpokY{display:none}.readyclasses_slide-in_VpokY{animation:readyclasses_slide-in_VpokY .5s forwards}@media (prefers-reduced-motion:reduce){.readyclasses_slide-in_VpokY{animation-duration:.1ms}}.readyclasses_slide-out_VpokY{animation:readyclasses_slide-out_VpokY .5s forwards}@media (prefers-reduced-motion:reduce){.readyclasses_slide-out_VpokY{animation-duration:.1ms}}@keyframes readyclasses_slide-in_VpokY{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes readyclasses_slide-out_VpokY{0%{transform:translateY(0)}to{transform:translateY(100vh)}}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJlYWR5Y2xhc3Nlcy5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7RUFjRSxDQUNGLDRCQU9FLGtCQUFzQixDQUN0QixRQUFTLENBTFQsVUFBVyxDQUVYLFdBQVksQ0FDWixlQUFnQixDQUZoQixTQUFVLENBSFYsaUJBQWtCLENBQ2xCLFNBT0YsQ0FFQSwyQkFDRSxZQUNGLENBRUEsNkJBQ0Usa0RBQ0YsQ0FDQSx1Q0FDRSw2QkFDRSx1QkFDRixDQUNGLENBRUEsOEJBQ0UsbURBQ0YsQ0FDQSx1Q0FDRSw4QkFDRSx1QkFDRixDQUNGLENBRUEsdUNBQ0UsR0FDRSwyQkFDRixDQUNBLEdBQ0UsdUJBQ0YsQ0FDRixDQUNBLHdDQUNFLEdBQ0UsdUJBQ0YsQ0FDQSxHQUNFLDJCQUNGLENBQ0YiLCJmaWxlIjoicmVhZHljbGFzc2VzLm1vZHVsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyohXG4gKiBDb3B5cmlnaHQgMjAyMiBPbmVXZWxjb21lIEIuVi5cbiAqXG4gKiAgICBMaWNlbnNlZCB1bmRlciB0aGUgQXBhY2hlIExpY2Vuc2UsIFZlcnNpb24gMi4wICh0aGUgXCJMaWNlbnNlXCIpO1xuICogICAgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogICAgWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogICAgICAgIGh0dHA6Ly93d3cuYXBhY2hlLm9yZy9saWNlbnNlcy9MSUNFTlNFLTIuMFxuICpcbiAqICAgIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqICAgIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBCQVNJUyxcbiAqICAgIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogICAgU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogICAgbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cbi5zci1vbmx5IHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB3aWR0aDogMXB4O1xuICBoZWlnaHQ6IDFweDtcbiAgcGFkZGluZzogMDtcbiAgbWFyZ2luOiAtMXB4O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBjbGlwOiByZWN0KDAsIDAsIDAsIDApO1xuICBib3JkZXI6IDA7XG59XG5cbi5oaWRkZW4ge1xuICBkaXNwbGF5OiBub25lO1xufVxuXG4uc2xpZGUtaW4ge1xuICBhbmltYXRpb246IHNsaWRlLWluIDAuNXMgZm9yd2FyZHM7XG59XG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAuc2xpZGUtaW4ge1xuICAgIGFuaW1hdGlvbi1kdXJhdGlvbjogMC4xbXM7XG4gIH1cbn1cblxuLnNsaWRlLW91dCB7XG4gIGFuaW1hdGlvbjogc2xpZGUtb3V0IDAuNXMgZm9yd2FyZHM7XG59XG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAuc2xpZGUtb3V0IHtcbiAgICBhbmltYXRpb24tZHVyYXRpb246IDAuMW1zO1xuICB9XG59XG5cbkBrZXlmcmFtZXMgc2xpZGUtaW4ge1xuICAwJSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDEwMHZoKTtcbiAgfVxuICAxMDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xuICB9XG59XG5Aa2V5ZnJhbWVzIHNsaWRlLW91dCB7XG4gIDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xuICB9XG4gIDEwMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgxMDB2aCk7XG4gIH1cbn0iXX0= */";
-var readyclasses = {"sr-only":"readyclasses_sr-only_VpokY","hidden":"readyclasses_hidden_VpokY","slide-in":"readyclasses_slide-in_VpokY","slide-out":"readyclasses_slide-out_VpokY"};
+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.0.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/Icon/Icon.module.scss

@@ -393,3 +393,27 @@
   content: "\e953";
   @include fontProperties();
 }
+.icon-arrow-right:before {
+  content: "\e95a";
+  @include fontProperties();
+}
+.icon-perm-identity:before {
+  content: "\e955";
+  @include fontProperties();
+}
+.icon-cable:before {
+  content: "\e956";
+  @include fontProperties();
+}
+.icon-dashboard:before {
+  content: "\e957";
+  @include fontProperties();
+}
+.icon-fido-device:before {
+  content: "\e958";
+  @include fontProperties();
+}
+.icon-security:before {
+  content: "\e959";
+  @include fontProperties();
+}

package/src/components/Icon/Icon.tsx

@@ -104,7 +104,13 @@ export enum Icons {
   ExternalLink = "external-link",
   SideSheetHandle = "sidesheet-handle",
   PendingCircle = "pending-circle",
-  MinusCircle = "minus-circle"
+  MinusCircle = "minus-circle",
+  ArrowRight = "arrow-right",
+  PermIdentity = "perm-identity",
+  Cable = "cable",
+  Dashboard = "dashboard",
+  FidoDevice = "fido-device",
+  Security = "security"
 }
 
 type Tag = "span" | "div" | "i";

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/font/README.md

@@ -42,4 +42,6 @@ Click on the `Generate Font` button on the bottom part of the page and then `Dow
 
 ## Merging fonts
 
-Please respect the current content of the `Icon.module.scss` and replace it with the new content provided in the downloaded zip package. Also, don't forget to replace current fonts and `selection.json` in the `/font` directory.
+Please respect the current content of the `Icon.module.scss` and replace it with the new content provided in the downloaded zip package. 
+Also, don't forget to replace current fonts and `selection.json` in the `/font` directory.
+Finally, make sure to add any new icons to the `Icon.tsx` list so they are available for use.

package/src/font/icomoon.svg

@@ -92,5 +92,11 @@
 <glyph unicode="&#xe952;" glyph-name="pending-circle" d="M511.997 959.999c-282.621 0-511.997-229.375-511.997-511.998 0-282.62 229.376-512.001 511.997-512.001 282.623 0 512.003 229.38 512.003 512.001 0 282.623-229.38 511.998-512.003 511.998zM511.997 38.402c-226.302 0-409.598 183.294-409.598 409.598s183.295 409.6 409.598 409.6c226.308 0 409.601-183.296 409.601-409.6s-183.294-409.598-409.601-409.598zM255.999 371.203c42.415 0 76.8 34.382 76.8 76.796s-34.385 76.8-76.8 76.8c-42.415 0-76.8-34.385-76.8-76.8s34.385-76.796 76.8-76.796zM511.997 371.203c42.418 0 76.8 34.382 76.8 76.796s-34.382 76.8-76.8 76.8c-42.414 0-76.797-34.385-76.797-76.8s34.385-76.796 76.797-76.796zM767.998 371.203c42.412 0 76.8 34.382 76.8 76.796s-34.388 76.8-76.8 76.8c-42.418 0-76.8-34.385-76.8-76.8s34.382-76.796 76.8-76.796z" />
 <glyph unicode="&#xe953;" glyph-name="minus-circle" d="M255.999 499.2v-102.401h511.999v102.401h-511.999zM511.997 959.999c-282.621 0-511.997-229.375-511.997-511.998 0-282.62 229.376-512.001 511.997-512.001 282.623 0 512.003 229.38 512.003 512.001 0 282.623-229.38 511.998-512.003 511.998zM511.997 38.402c-225.789 0-409.598 183.81-409.598 409.598 0 225.792 183.808 409.6 409.598 409.6 225.792 0 409.601-183.808 409.601-409.6 0-225.788-183.81-409.598-409.601-409.598z" />
 <glyph unicode="&#xe954;" glyph-name="arrow-left" d="M511.997-63.999l90.24 90.24-357.117 357.76h778.879v128.002h-778.879l357.762 357.12-90.885 90.877-511.996-512.002 511.996-511.996z" />
+<glyph unicode="&#xe955;" glyph-name="perm-identity" d="M511.999 832c70.399 0 127.999-57.6 127.999-127.999s-57.6-127.999-127.999-127.999c-70.399 0-127.999 57.6-127.999 127.999s57.6 127.999 127.999 127.999zM511.999 256c172.8 0 371.2-82.56 384-127.999v-64h-768v63.36c12.799 46.080 211.2 128.64 384 128.64zM511.999 959.999c-141.439 0-256-114.559-256-256s114.559-256 256-256c141.439 0 256 114.559 256 256s-114.559 256-256 256zM511.999 384c-170.88 0-511.999-85.759-511.999-256v-192h1024v192c0 170.239-341.119 256-511.999 256z" />
+<glyph unicode="&#xe956;" glyph-name="cable" d="M967.111 846.221v56.889c0 31.288-25.6 56.888-56.893 56.888h-113.773c-31.293 0-56.893-25.6-56.893-56.888v-56.889h-56.887v-227.555c0-31.288 25.6-56.888 56.887-56.888h56.893v-398.225c0-62.573-51.2-113.773-113.78-113.773s-113.78 51.2-113.78 113.773v568.892c0 125.724-101.828 227.555-227.553 227.555s-227.555-101.832-227.555-227.555v-398.225h-56.889c-31.288 0-56.888-25.6-56.888-56.887v-227.553h56.888v-56.893c0-31.287 25.6-56.887 56.889-56.887h113.777c31.289 0 56.889 25.6 56.889 56.887v56.893h56.888v227.553c0 31.287-25.6 56.887-56.888 56.887h-56.889v398.225c0 62.577 51.2 113.777 113.779 113.777s113.779-51.2 113.779-113.777v-568.892c0-125.72 101.828-227.553 227.555-227.553s227.553 101.833 227.553 227.553v398.225h56.893c31.287 0 56.887 25.6 56.887 56.888v227.555h-56.887z" />
+<glyph unicode="&#xe957;" glyph-name="dashboard" d="M910.223 846.223v-113.777h-227.556v113.777h227.556zM341.333 846.223v-341.333h-227.556v341.333h227.556zM910.223 391.111v-341.333h-227.556v341.333h227.556zM341.333 163.556v-113.777h-227.556v113.777h227.556zM1024 960h-455.111v-341.333h455.111v341.333zM455.111 960h-455.111v-568.889h455.111v568.889zM1024 504.889h-455.111v-568.889h455.111v568.889zM455.111 277.333h-455.111v-341.333h455.111v341.333z" />
+<glyph unicode="&#xe958;" glyph-name="fido-device" d="M995.681 762.379c42.496-42.502 36.477-117.432-13.457-167.363l-452.042-452.040c-19.971-19.977-49.944-22.384-66.944-5.384l-15.388 15.42-216.983-217.012-230.865 230.868 216.983 217.012-15.394 15.359c-17 17.001-14.592 46.975 5.382 66.945l452.043 452.043c49.928 49.931 124.862 55.955 167.365 13.453l169.3-169.301zM203.528 216.481l-46.173 46.176-36.164-36.162 46.173-46.176 36.164 36.162zM326.655 93.357l-46.173 46.17-36.163-36.162 46.173-46.17 36.163 36.162zM908.932 704.475l-140.457 140.456c-24.967 24.966-65.444 24.966-90.411 0s-24.967-65.443 0-90.408l140.457-140.456c24.967-24.966 65.444-24.966 90.411 0 24.961 24.965 24.961 65.443 0 90.408z" />
+<glyph unicode="&#xe959;" glyph-name="security" d="M512 960l-418.909-186.182v-279.273c0-258.327 178.734-499.898 418.909-558.545 240.174 58.647 418.909 300.218 418.909 558.545v279.273l-418.909 186.182zM512 448.467h325.818c-24.669-191.768-152.669-362.589-325.818-416.116v415.65h-325.818v265.309l325.818 144.756v-409.6z" />
+<glyph unicode="&#xe95a;" glyph-name="arrow-right" d="M511.997 960l-90.237-90.24 357.116-357.758h-778.874v-127.998h778.874l-357.116-357.764 90.237-90.24 512.001 512.001-512.001 511.999z" />
 <glyph unicode="&#xe9d1;" glyph-name="eye-blocked" d="M945.942 945.942c-18.746 18.744-49.136 18.744-67.882 0l-202.164-202.164c-51.938 15.754-106.948 24.222-163.896 24.222-223.318 0-416.882-130.042-512-320 41.122-82.124 100.648-153.040 173.022-207.096l-158.962-158.962c-18.746-18.746-18.746-49.136 0-67.882 9.372-9.374 21.656-14.060 33.94-14.060s24.568 4.686 33.942 14.058l864 864c18.744 18.746 18.744 49.138 0 67.884zM416 640c42.24 0 78.082-27.294 90.92-65.196l-121.724-121.724c-37.902 12.838-65.196 48.68-65.196 90.92 0 53.020 42.98 96 96 96zM110.116 448c38.292 60.524 89.274 111.924 149.434 150.296 3.918 2.5 7.876 4.922 11.862 7.3-9.962-27.328-15.412-56.822-15.412-87.596 0-54.89 17.286-105.738 46.7-147.418l-60.924-60.924c-52.446 36.842-97.202 83.882-131.66 138.342zM768 518c0 27.166-4.256 53.334-12.102 77.898l-321.808-321.808c24.568-7.842 50.742-12.090 77.91-12.090 141.382 0 256 114.618 256 256zM830.026 670.026l-69.362-69.362c1.264-0.786 2.53-1.568 3.786-2.368 60.162-38.374 111.142-89.774 149.434-150.296-38.292-60.522-89.274-111.922-149.436-150.296-75.594-48.218-162.89-73.704-252.448-73.704-38.664 0-76.902 4.76-113.962 14.040l-76.894-76.894c59.718-21.462 123.95-33.146 190.856-33.146 223.31 0 416.876 130.042 512 320-45.022 89.916-112.118 166.396-193.974 222.026z" />
 </font></defs></svg>