@hexure/ui 1.13.90 → 1.13.92

package/dist/esm/index.js

@@ -2736,7 +2736,7 @@ const Content$3 = styled.div(props => (Object.assign({ position: 'absolute', bor
 Content$3.defaultProps = { theme: EditableTheme };
 const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, dataItemid, height, auto = false, }) => {
     const [show_content, toggleContent] = useState(false);
-    const baseId = dataItemid || 'tooltip';
+    const baseId = dataItemid || `tooltip-${Math.random().toString(36).slice(2, 9)}`;
     if (auto) {
         return (React.createElement(StyledDiv, { "data-itemid": `${baseId}-wrapper` },
             React.createElement("style", null, ` 
@@ -2758,13 +2758,13 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, d
         }
           
       `),
-            React.createElement(StyledAnchor, { "data-itemid": `${baseId}-icon-wrapper`, "data-tooltip-html": children, "data-tooltip-id": 'auto-tooltip-data-html' }, trigger || React.createElement(StyledIcon$6, { "data-itemid": `${baseId}-icon`, path: mdiInformationOutline })),
+            React.createElement(StyledAnchor, { "data-itemid": `${baseId}-icon-wrapper`, "data-tooltip-id": `${baseId}-auto-tooltip-data-html` }, trigger || React.createElement(StyledIcon$6, { "data-itemid": `${baseId}-icon`, path: mdiInformationOutline })),
             React.createElement(TooltipPortal, null,
-                React.createElement(M, { className: 'custom-tooltip', classNameArrow: 'custom-tooltip-arrow', "data-itemid": `${baseId}-content`, id: 'auto-tooltip-data-html' }))));
+                React.createElement(M, { className: 'custom-tooltip', classNameArrow: 'custom-tooltip-arrow', "data-itemid": `${baseId}-content`, id: `${baseId}-auto-tooltip-data-html`, render: () => React.createElement("p", { "data-itemid": `${baseId}-text` }, children) }))));
     }
     return (React.createElement(Wrapper$h, { "$height": height, "data-itemid": `${baseId}-wrapper`, onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
         trigger || React.createElement(StyledIcon$6, { "data-itemid": `${baseId}-icon`, path: mdiInformationOutline }),
-        show_content ? (React.createElement(Content$3, { "$position": position, "$width": width, "data-itemid": `${baseId}-content` }, children && (React.createElement(Copy, { "data-itemid": `${baseId}-copy`, type: 'small' }, children)))) : null));
+        show_content ? (React.createElement(Content$3, { "$position": position, "$width": width, "data-itemid": `${baseId}-content` }, children && (React.createElement(Copy, { "data-itemid": `${baseId}-text`, type: 'small' }, children)))) : null));
 };
 const TooltipPortal = ({ children }) => {
     const [container, setContainer] = useState();
@@ -3304,9 +3304,10 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px', dataIte
                 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(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 => {
+                nav_item.is_active && nav_item.menu && !collapsed ? (React.createElement(SubMenu, { "data-itemid": `${navItemId}-sub-menu` }, nav_item.menu.map((menu_item, menuIndex) => {
                     const menuItemId = `${navItemId}-menu-item`;
-                    return (React.createElement(SubMenuItem, { "$active": menu_item.is_active, "$color": theme.PRIMARY_COLOR, "data-itemid": `${menuItemId}-sub-menu-item`, key: menuItemId, onClick: menu_item.onClick }, menu_item.label));
+                    const newKey = `${navItemId}-menu-item-${menuIndex}`;
+                    return (React.createElement(SubMenuItem, { "$active": menu_item.is_active, "$color": theme.PRIMARY_COLOR, "data-itemid": `${menuItemId}-sub-menu-item`, key: newKey, onClick: menu_item.onClick }, menu_item.label));
                 }))) : null));
         })),
         React.createElement(Footer, { "$isOpen": !collapsed, "data-itemid": `${baseId}-footer` },
@@ -5700,6 +5701,7 @@ const ButtonContainer = styled.div `
   margin: 0 10px;
 `;
 const Modal = (_a) => {
+    var _b, _c, _d, _e;
     var { children, title, onClose, maxWidth, fullscreen, steps, primaryButton, secondaryButton, tertiaryButton, quarternaryButton, dataItemid, modalStyle, headerStyle, headerTitleStyle } = _a, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "fullscreen", "steps", "primaryButton", "secondaryButton", "tertiaryButton", "quarternaryButton", "dataItemid", "modalStyle", "headerStyle", "headerTitleStyle"]);
     useEffect(() => {
         document.onkeydown = e => {
@@ -5728,9 +5730,9 @@ const Modal = (_a) => {
                         display: 'flex',
                         alignItems: 'center',
                     } },
-                    tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { "data-itemid": tertiaryButton.children || `${baseId}-${tertiaryButton.children}`, dataItemid: tertiaryButton.children || `${baseId}-${tertiaryButton.children}`, format: tertiaryButton.format || 'secondary' }))) : null,
+                    tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { dataItemid: (_b = tertiaryButton.dataItemid) !== null && _b !== void 0 ? _b : tertiaryButton.children, format: tertiaryButton.format || 'secondary' }))) : null,
                     quarternaryButton ? (React.createElement(ButtonContainer, { "data-itemid": `${baseId}-quarternary-button-container` },
-                        React.createElement(Button, Object.assign({}, quarternaryButton, { "data-itemid": quarternaryButton.children || `${baseId}-${quarternaryButton.children}`, dataItemid: quarternaryButton.children || `${baseId}-${quarternaryButton.children}`, format: quarternaryButton.format || 'secondary' })))) : null)) : null,
+                        React.createElement(Button, Object.assign({}, quarternaryButton, { dataItemid: (_c = quarternaryButton.dataItemid) !== null && _c !== void 0 ? _c : quarternaryButton.children, format: quarternaryButton.format || 'secondary' })))) : null)) : null,
                 primaryButton || secondaryButton ? (React.createElement("div", { "data-itemid": `${baseId}-right-buttons`, style: {
                         marginLeft: 'auto',
                         paddingLeft: 40,
@@ -5738,8 +5740,8 @@ const Modal = (_a) => {
                         alignItems: 'center',
                     } },
                     secondaryButton ? (React.createElement(ButtonContainer, { "data-itemid": `${baseId}-secondary-button-container` },
-                        React.createElement(Button, Object.assign({}, secondaryButton, { "data-itemid": secondaryButton.children || `${baseId}-${secondaryButton.children}`, dataItemid: secondaryButton.children || `${baseId}-${secondaryButton.children}`, format: secondaryButton.format || 'secondary' })))) : null,
-                    primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { "data-itemid": primaryButton.children || `${baseId}-${primaryButton.children}`, dataItemid: primaryButton.children || `${baseId}-${primaryButton.children}`, format: primaryButton.format || 'primary' }))) : null)) : null)) : null)));
+                        React.createElement(Button, Object.assign({}, secondaryButton, { dataItemid: (_d = secondaryButton.dataItemid) !== null && _d !== void 0 ? _d : secondaryButton.children, format: secondaryButton.format || 'secondary' })))) : null,
+                    primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { dataItemid: (_e = primaryButton.dataItemid) !== null && _e !== void 0 ? _e : primaryButton.children, format: primaryButton.format || 'primary' }))) : null)) : null)) : null)));
 };
 
 const Wrapper$5 = styled.div `