@eleventheye/asui 2.5.2 → 2.5.3

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,KAAkD,MAAM,OAAO,CAAC;AAGvE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAO3D,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,KAAkD,MAAM,OAAO,CAAC;AAGvE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAO3D,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAmFrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/asnavbar/ASNavBar.js

@@ -9,11 +9,11 @@ const ASNavBarItem_1 = tslib_1.__importDefault(require("../asnavbar/ASNavBarItem
 const styles_1 = require("../asnavbar/styles");
 const astheme_1 = tslib_1.__importDefault(require("../astheme"));
 const INIT_VALUE = (0, uuid_1.v4)();
-const ASNavBar = ({ className = '', navItems = [], selectedItem = '', onItemSelected = () => undefined, theme = astheme_1.default, size = ASUI_types_1.ComponentSize.Medium, options = {}, }) => {
+const ASNavBar = ({ className = '', navItems = [], selectedItemId = '', onItemSelected = () => undefined, theme = astheme_1.default, size = ASUI_types_1.ComponentSize.Medium, options = {}, }) => {
     const selectedItemIdRef = (0, react_1.useRef)(INIT_VALUE);
     const navBarRef = (0, react_1.useRef)(null);
     const navBarHighlightBoxRef = (0, react_1.useRef)(null);
-    const [selected, setSelected] = (0, react_1.useState)(selectedItem);
+    const [selected, setSelected] = (0, react_1.useState)(selectedItemId);
     const slideHighlightToSelectedItem = (selectedItemEl, itemId) => {
         if (!navBarHighlightBoxRef.current || !navBarRef.current)
             return;
@@ -25,25 +25,27 @@ const ASNavBar = ({ className = '', navItems = [], selectedItem = '', onItemSele
         selectedBox.style.transform = `translateX(${offsetToSelectedEl}px)`;
         selectedBox.style.width = `${selectedBoxWidth}px`;
         selectedItemIdRef.current = itemId;
+        onItemSelected(itemId);
     };
     const locateTargetSelectedElement = (selectedId) => {
-        const selectedItemEl = document.getElementById(selectedItem);
-        if (selectedItemEl)
-            slideHighlightToSelectedItem(selectedItemEl, selectedItem);
-        selectedItemIdRef.current = selectedItem;
-        setSelected(selectedItem);
+        const selectedItemEl = document.getElementById(selectedId);
+        if (selectedItemEl) {
+            slideHighlightToSelectedItem(selectedItemEl, selectedId);
+            selectedItemIdRef.current = selectedId;
+            setSelected(selectedId);
+        }
     };
     (0, react_1.useEffect)(() => {
-        const isItemSameOrNull = selectedItemIdRef.current === selectedItem || selectedItem.length === 0;
+        const isItemSameOrNull = selectedItemIdRef.current === selectedItemId || selectedItemId.length === 0;
         if (!navBarHighlightBoxRef.current || !navBarRef.current || isItemSameOrNull)
             return;
-        locateTargetSelectedElement(selectedItem);
-    }, [selectedItem]);
+        locateTargetSelectedElement(selectedItemId);
+    }, [selectedItemId]);
     (0, react_1.useEffect)(() => {
-        if (selectedItemIdRef.current === INIT_VALUE && navItems && navItems.length > 0 && !selectedItem) {
+        if (selectedItemIdRef.current === INIT_VALUE && navItems && navItems.length > 0 && !selectedItemId) {
             locateTargetSelectedElement(navItems[0].itemId);
         }
-    }, [selectedItem, navItems]);
+    }, [selectedItemId, navItems]);
     const onItemSelectedHandler = (itemId, e) => {
         const selectedItemEl = e.target;
         if (selectedItemEl)
@@ -52,9 +54,8 @@ const ASNavBar = ({ className = '', navItems = [], selectedItem = '', onItemSele
         setSelected(itemId);
         onItemSelected(itemId);
     };
-    const isSelected = (itemId) => {
-        return selected === itemId;
-    };
-    return ((0, jsx_runtime_1.jsxs)(styles_1.ASNavBarStyled, { ref: navBarRef, className: `${className} ${size}`, theme: theme, ...options, children: [(0, jsx_runtime_1.jsx)(styles_1.ASSelectedBoxStyled, { ref: navBarHighlightBoxRef, theme: theme }), navItems.map((item, index) => ((0, jsx_runtime_1.jsx)(ASNavBarItem_1.default, { theme: theme, itemId: item.itemId, selected: isSelected(item.itemId), displayText: item.displayText, icon: item.icon, onItemClick: onItemSelectedHandler }, `key_${index}_${item.itemId}`)))] }));
+    const onItemResizedHandler = (itemId, item) => slideHighlightToSelectedItem(item, itemId);
+    const isSelected = (itemId) => selected === itemId;
+    return ((0, jsx_runtime_1.jsxs)(styles_1.ASNavBarStyled, { ref: navBarRef, className: `${className} ${size}`, theme: theme, ...options, children: [(0, jsx_runtime_1.jsx)(styles_1.ASSelectedBoxStyled, { ref: navBarHighlightBoxRef, theme: theme }), navItems.map((item, index) => ((0, jsx_runtime_1.jsx)(ASNavBarItem_1.default, { theme: theme, itemId: item.itemId, selected: isSelected(item.itemId), displayText: item.displayText, icon: item.icon, onItemResized: onItemResizedHandler, onItemClick: onItemSelectedHandler }, `key_${index}_${item.itemId}`)))] }));
 };
 exports.default = ASNavBar;

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

@@ -16,11 +16,12 @@ export type ASNavBarItemProps = {
     icon?: React.ReactNode;
     size?: ASComponentSize;
     onItemClick?: (id: string, e: MouseEvent) => void;
+    onItemResized?: (id: string, element: HTMLDivElement) => void;
 };
 export type ASNavBarOwnProps = {
     className?: string;
     theme?: ASTheme;
-    selectedItem?: string;
+    selectedItemId?: string;
     onItemSelected?: (itemId: string) => void;
     navItems?: ASNavBarItemType[];
     size?: ASComponentSize;

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

@@ -1 +1 @@
-{"version":3,"file":"ASNavBar.types.d.ts","sourceRoot":"","sources":["../../src/asnavbar/ASNavBar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEvE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"ASNavBar.types.d.ts","sourceRoot":"","sources":["../../src/asnavbar/ASNavBar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEvE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClD,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;CAC/D,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ASNavBarItem.d.ts","sourceRoot":"","sources":["../../src/asnavbar/ASNavBarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAGlD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgC7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ASNavBarItem.d.ts","sourceRoot":"","sources":["../../src/asnavbar/ASNavBarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAuE7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/asnavbar/ASNavBarItem.js

@@ -5,11 +5,43 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const styles_1 = require("../asnavbar/styles");
 const astheme_1 = tslib_1.__importDefault(require("../astheme"));
-const ASNavBarItem = ({ className = '', theme = astheme_1.default, displayText = '---', icon, selected = false, itemId, onItemClick = () => undefined, }) => {
+const ASNavBarItem = ({ className = '', theme = astheme_1.default, displayText = '---', icon, selected = false, itemId, onItemClick = () => undefined, onItemResized = () => undefined, }) => {
+    const [navItemSizeInitialized, setNavSizeInitialized] = (0, react_1.useState)(false);
+    const navItemWidthRef = (0, react_1.useRef)(0);
     const navBarItemRef = (0, react_1.useRef)(null);
+    const isNavBarItemSelected = (0, react_1.useRef)(selected);
     const onItemClickHandler = (e) => {
         onItemClick(itemId, e);
     };
+    (0, react_1.useEffect)(() => {
+        if (navBarItemRef.current) {
+            navItemWidthRef.current = navBarItemRef.current.getBoundingClientRect().width;
+            setNavSizeInitialized(true);
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (navItemSizeInitialized && navBarItemRef.current) {
+            console.log('resizeObserver init');
+            const resizeObserver = new ResizeObserver((entries) => {
+                if (isNavBarItemSelected.current) {
+                    console.log('resizeObserver fired, ', entries);
+                    const width = navBarItemRef.current?.getBoundingClientRect().width;
+                    if (navBarItemRef.current && typeof width === 'number' && navItemWidthRef.current !== width) {
+                        navItemWidthRef.current = width;
+                        onItemResized(itemId, navBarItemRef.current);
+                    }
+                }
+            });
+            resizeObserver.observe(navBarItemRef.current);
+            return () => {
+                if (navBarItemRef.current)
+                    resizeObserver.unobserve(navBarItemRef.current);
+            };
+        }
+    }, [navItemSizeInitialized]);
+    (0, react_1.useEffect)(() => {
+        isNavBarItemSelected.current = selected;
+    }, [selected]);
     return ((0, jsx_runtime_1.jsxs)(styles_1.ASNavBarItemStyled, { id: itemId, theme: theme, ref: navBarItemRef, className: className, "$selected": selected, onClick: onItemClickHandler, children: [icon && ((0, jsx_runtime_1.jsx)(styles_1.ASNavBarItemPadding, { theme: theme, "$selected": selected, "aria-invalid": true, "aria-hidden": true, children: icon })), displayText] }));
 };
 exports.default = ASNavBarItem;

package/package.json

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