@hexure/ui 1.13.96 → 1.13.98

package/dist/cjs/index.js

@@ -3292,7 +3292,7 @@ const FooterInfo = styled.div `
 const SidebarMenuContainer = styled.div `
   flex-grow: 1;
 `;
-const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px', dataItemid, onChange, }) => {
+const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px', dataItemid, dataSectionName, onChange, }) => {
     const theme = React.useContext(styled.ThemeContext) || EditableTheme;
     const [collapsed, toggleCollapse] = React.useState(isCollapsed);
     const baseId = dataItemid || 'app-menu';
@@ -3301,9 +3301,11 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px', dataIte
     }, [isCollapsed]);
     return (React.createElement(SidebarContainer, { "$isOpen": !collapsed, "$width": defaultWidth, "data-itemid": `${baseId}-sidebar-container` },
         React.createElement(SidebarMenuContainer, { "data-itemid": `${baseId}-sidebar-menu-container` }, menu.map((nav_item, navIndex) => {
-            const navItemId = `${baseId}-nav-item-${navIndex}`;
+            const navItemId = nav_item.dataItemid
+                ? `${baseId}-${nav_item.dataItemid}`
+                : `${baseId}-nav-item-${navIndex}`;
             return (React.createElement(React.Fragment, { key: navItemId },
-                React.createElement(MenuWrapper$1, { "$active": !!nav_item.is_active, "$color": theme.PRIMARY_COLOR, "data-itemid": `${navItemId}-menu-wrapper`, onClick: nav_item.onClick, title: collapsed ? (nav_item === null || nav_item === void 0 ? void 0 : nav_item.title) || nav_item.label : '', type: 'button' },
+                React.createElement(MenuWrapper$1, { "$active": !!nav_item.is_active, "$color": theme.PRIMARY_COLOR, "data-itemid": `${navItemId}-menu-wrapper`, "data-section-name": dataSectionName, onClick: nav_item.onClick, title: collapsed ? (nav_item === null || nav_item === void 0 ? void 0 : nav_item.title) || nav_item.label : '', type: 'button' },
                     React.createElement(MenuIcon, { "$active": !!nav_item.is_active, "data-itemid": `${navItemId}-menu-icon`, path: nav_item.icon }),
                     collapsed ? null : (React.createElement(MenuLabel, { "$active": nav_item.is_active, "$color": theme.PRIMARY_COLOR, "data-itemid": `${navItemId}-menu-label` }, nav_item.label))),
                 nav_item.is_active && nav_item.menu && !collapsed ? (React.createElement(SubMenu, { "data-itemid": `${navItemId}-sub-menu` }, nav_item.menu.map((menu_item, menuIndex) => {
@@ -3480,7 +3482,7 @@ const StyledMoreMenu = styled(MoreMenu) `
   max-height: ${props => props.maxHeight};
   z-index: 10;
 `;
-const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = 'bottomLeft', format = 'primary', menuWidth = '200px', enableHover = true, enableClick = false, show = false, dataItemid, }) => {
+const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = 'bottomLeft', format = 'primary', menuWidth = '200px', enableHover = true, enableClick = false, show = false, dataItemid, dataSectionName, }) => {
     const [showMenu, toggleMenu] = React.useState(false);
     const [menuPosition, setMenuPosition] = React.useState({ top: '0px', left: '0px' });
     const menuWrapperRef = React.useRef(null);
@@ -3551,7 +3553,7 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
         }
     }, [showMenu, position, menuWidth]);
     return (React.createElement(MenuWrapper, { "data-itemid": `${baseId}-menu-wrapper`, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: menuWrapperRef },
-        React.createElement(Button, { dataItemid: `${baseId}-button`, disabled: disabled, format: format, icon: js.mdiDotsHorizontal, small: small }, label),
+        React.createElement(Button, { dataItemid: `${baseId}-button`, dataSectionName: dataSectionName, disabled: disabled, format: format, icon: js.mdiDotsHorizontal, small: small }, label),
         showMenu && (React.createElement(StyledMoreMenu, { "$left": menuPosition.left, "$menuWidth": menuWidth, "$top": menuPosition.top, dataItemid: `${baseId}-more-menu`, maxHeight: maxHeight, menuItems: menuItems }))));
 };
 
@@ -3657,10 +3659,10 @@ const Label$3 = styled.span `
   box-sizing: border-box;
 `;
 const Checkbox = (_a) => {
-    var { children, color, disabled, checked, onChange, invalid, tooltip, tabIndex, dataItemid, isInvalidRedBackground = false, isWarningError = false } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip", "tabIndex", "dataItemid", "isInvalidRedBackground", "isWarningError"]);
+    var { children, color, disabled, checked, onChange, invalid, tooltip, tabIndex, dataItemid, isInvalidRedBackground = false, isWarningError = false, dataSectionName } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip", "tabIndex", "dataItemid", "isInvalidRedBackground", "isWarningError", "dataSectionName"]);
     const baseId = dataItemid || 'checkbox';
     return (React.createElement(Wrapper$b, Object.assign({ "$disabled": disabled }, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
-        React.createElement(Input$2, { "$invalid": invalid, checked: checked, "data-itemid": `${baseId}-input`, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, tabIndex: disabled ? -1 : tabIndex, type: 'checkbox' }),
+        React.createElement(Input$2, { "$invalid": invalid, checked: checked, "data-itemid": `${baseId}-input`, "data-section-name": dataSectionName, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, tabIndex: disabled ? -1 : tabIndex, type: 'checkbox' }),
         React.createElement(Check$1, { "$invalid": invalid, "$isInvalidRedBackground": isInvalidRedBackground, "$isWarningError": isWarningError, "data-itemid": `${baseId}-check` }),
         children ? (React.createElement(Label$3, { color: color, "data-itemid": `${baseId}-label` },
             children,
@@ -5903,7 +5905,7 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag, dataIte
                 const actionId = `${baseId}-action-${i}`;
                 return (React.createElement(Button, Object.assign({}, buttonProps, { "data-itemid": `${actionId}-button`, key: i, small: true }), label));
             }),
-            menuItems.length ? (React.createElement(ButtonMenu, { dataItemid: `${baseId}-button-menu`, enableClick: enableClick, enableHover: enableHover, format: format, label: label, maxHeight: maxHeight, menuItems: menuItems, show: show, small: true })) : null)) : null));
+            menuItems.length ? (React.createElement(ButtonMenu, { dataItemid: `${baseId}-button-menu`, dataSectionName: 'more-actions', enableClick: enableClick, enableHover: enableHover, format: format, label: label, maxHeight: maxHeight, menuItems: menuItems, show: show, small: true })) : null)) : null));
 };
 
 const Wrapper$3 = styled.nav `