@eleventheye/asui 2.12.7 → 2.12.8

package/README.md

@@ -7,6 +7,9 @@ AS React UI Library (another one!)
 
 A small collection of `svg` icons that I tend to reuse in many of my projects.
 
+![ASUI Icons](./public/icons.png)
+
+
 #### Icon names
 
 AddItemIcon,

package/dist/asnavbar/ASNavBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASNavBar.d.ts","sourceRoot":"","sources":["../../src/asnavbar/ASNavBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,oBAAoB,EAA8B,MAAM,wBAAwB,CAAC;AAG1F,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKjD,eAAO,MAAM,yBAAyB,EAAE,oBAYvC,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,oBAYzC,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,oBAUzC,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAsFrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ASNavBar.d.ts","sourceRoot":"","sources":["../../src/asnavbar/ASNavBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,EAAE,oBAAoB,EAA8B,MAAM,wBAAwB,CAAC;AAE1F,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKjD,eAAO,MAAM,yBAAyB,EAAE,oBAYvC,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,oBAYzC,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,oBAUzC,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAmFrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/asnavbar/ASNavBar.js

@@ -7,7 +7,6 @@ const react_1 = require("react");
 const uuid_1 = require("uuid");
 const ASUI_types_1 = require("../apptypes/ASUI.types");
 const astheme_1 = tslib_1.__importDefault(require("../astheme"));
-const screenSizeHelpers_1 = require("../asutils/screenSizeHelpers");
 const desktop_1 = tslib_1.__importDefault(require("./desktop"));
 const mobile_1 = tslib_1.__importDefault(require("./mobile"));
 const styles_1 = require("./styles");
@@ -49,16 +48,12 @@ exports.defaultNavBarMWStyleOptions = {
     $padding: '0',
 };
 const ASNavBar = ({ className = '', navItems = [], selectedItemId = '', onItemSelected = () => undefined, theme = astheme_1.default, size = ASUI_types_1.ComponentSize.Medium, styleOptions = { ...exports.defaultNavBarStyleOptions }, dwStyleOptions = { ...exports.defaultNavBarDWStyleOptions }, mwStyleOptions = { ...exports.defaultNavBarMWStyleOptions }, }) => {
-    const visitedCountRef = (0, react_1.useRef)(0);
-    const [navBarComponentId] = (0, react_1.useState)(`asnavbar-${(0, uuid_1.v4)()}`);
+    const navBarRef = (0, react_1.useRef)(null);
+    const [uniqueID] = (0, react_1.useState)(() => (0, uuid_1.v4)());
+    const [navBarComponentId] = (0, react_1.useState)(`asnavbar-${uniqueID}`);
     const [isMobile, setIsMobile] = (0, react_1.useState)(false);
     const [selectedId, setSelectedId] = (0, react_1.useState)(selectedItemId);
     const { $mobileBreakpoint = 768, $disableTransitionsBetweenDisplayModes, $displayModeOverride } = styleOptions;
-    (0, react_1.useEffect)(() => {
-        const screenSize = (0, screenSizeHelpers_1.getScreenSize)();
-        if (!screenSize)
-            console.info(`Screen size detected: ${screenSize}`);
-    }, []);
     (0, react_1.useEffect)(() => {
         setSelectedId(selectedItemId);
     }, [selectedItemId]);
@@ -71,23 +66,23 @@ const ASNavBar = ({ className = '', navItems = [], selectedItemId = '', onItemSe
             setIsMobile(window.innerWidth < $mobileBreakpoint);
             return;
         }
-        visitedCountRef.current += 1;
-        window.addEventListener('resize', () => {
-            const width = window.innerWidth;
-            setIsMobile(width < $mobileBreakpoint);
+        const observer = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const width = entry.contentRect.width;
+                setIsMobile(width < $mobileBreakpoint);
+            }
         });
-        setIsMobile(window.innerWidth < $mobileBreakpoint);
+        if (navBarRef.current) {
+            observer.observe(navBarRef.current);
+        }
         return () => {
-            window.removeEventListener('resize', () => {
-                const width = window.innerWidth;
-                setIsMobile(width < $mobileBreakpoint);
-            });
+            observer.disconnect();
         };
     }, [$disableTransitionsBetweenDisplayModes, $mobileBreakpoint, $displayModeOverride]);
-    const onItemSelectedHandler = (itemId) => {
+    const onItemSelectedHandler = (0, react_1.useCallback)((itemId) => {
         setSelectedId(itemId);
         onItemSelected(itemId);
-    };
-    return ((0, jsx_runtime_1.jsx)(styles_1.ASNavBarStyled, { id: navBarComponentId, theme: theme, ...styleOptions, children: isMobile ? ((0, jsx_runtime_1.jsx)(mobile_1.default, { id: `asnavbar-mw-${(0, uuid_1.v4)()}`, className: className, navItems: navItems, selectedItemId: selectedId, onItemSelected: onItemSelectedHandler, theme: theme, size: size, styleOptions: mwStyleOptions })) : ((0, jsx_runtime_1.jsx)(desktop_1.default, { id: `asnavbar-dw-${(0, uuid_1.v4)()}`, className: className, navItems: navItems, selectedItemId: selectedId, onItemSelected: onItemSelectedHandler, theme: theme, size: size, styleOptions: dwStyleOptions })) }));
+    }, [onItemSelected]);
+    return ((0, jsx_runtime_1.jsx)(styles_1.ASNavBarStyled, { ref: navBarRef, id: navBarComponentId, theme: theme, ...exports.defaultNavBarStyleOptions, ...styleOptions, children: isMobile ? ((0, jsx_runtime_1.jsx)(mobile_1.default, { id: `asnavbar-mw-${uniqueID}`, className: className, navItems: navItems, selectedItemId: selectedId, onItemSelected: onItemSelectedHandler, theme: theme, size: size, styleOptions: { ...exports.defaultNavBarMWStyleOptions, ...mwStyleOptions } })) : ((0, jsx_runtime_1.jsx)(desktop_1.default, { id: `asnavbar-dw-${uniqueID}`, className: className, navItems: navItems, selectedItemId: selectedId, onItemSelected: onItemSelectedHandler, theme: theme, size: size, styleOptions: { ...exports.defaultNavBarDWStyleOptions, ...dwStyleOptions } })) }));
 };
 exports.default = ASNavBar;

package/dist/asutils/screenSizeHelpers.d.ts

@@ -1,2 +1,2 @@
-export declare const getScreenSize: () => "sml" | "med" | "lrg" | "xl" | "xxl" | undefined;
+export declare const getScreenSize: () => "sml" | "med" | "lrg" | "xl" | "xxl" | "xxxl";
 //# sourceMappingURL=screenSizeHelpers.d.ts.map

package/dist/asutils/screenSizeHelpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"screenSizeHelpers.d.ts","sourceRoot":"","sources":["../../src/asutils/screenSizeHelpers.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,wDAQzB,CAAC"}
+{"version":3,"file":"screenSizeHelpers.d.ts","sourceRoot":"","sources":["../../src/asutils/screenSizeHelpers.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,qDAUzB,CAAC"}

package/dist/asutils/screenSizeHelpers.js

@@ -14,5 +14,6 @@ const getScreenSize = () => {
         return apptypes_1.ScreenSize.ExtraLarge;
     if (windowWidth < 1920)
         return apptypes_1.ScreenSize.ExtraExtraLarge;
+    return apptypes_1.ScreenSize.ExtraExtraExtraLarge;
 };
 exports.getScreenSize = getScreenSize;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eleventheye/asui",
-  "version": "2.12.7",
+  "version": "2.12.8",
   "private": false,
   "description": "AS UI React Library by eleventheye (another one!)",
   "keywords": [