@hexure/ui 1.13.91 → 1.13.93

package/dist/cjs/index.js

@@ -2738,7 +2738,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] = React.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, ` 
@@ -2760,9 +2760,9 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, d
         }
           
       `),
-            React.createElement(StyledAnchor, { "data-itemid": `${baseId}-icon-wrapper`, "data-tooltip-id": 'auto-tooltip-data-html' }, trigger || React.createElement(StyledIcon$6, { "data-itemid": `${baseId}-icon`, path: js.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: js.mdiInformationOutline })),
             React.createElement(TooltipPortal, null,
-                React.createElement(M, { className: 'custom-tooltip', classNameArrow: 'custom-tooltip-arrow', "data-itemid": `${baseId}-content`, id: 'auto-tooltip-data-html', render: () => React.createElement("p", { "data-itemid": `${baseId}-text` }, children) }))));
+                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: js.mdiInformationOutline }),
@@ -3306,9 +3306,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` },
@@ -3801,7 +3802,7 @@ const SearchInput$1 = styled.input `
   white-space: nowrap;
 `;
 const Select = (_a) => {
-    var { options, optionGroups, placeholder = '--Select-One--', readOnly, invalid, searchable = false, value: propValue, onChange, style, tabIndex, dataItemid, isInvalidRedBackground = false, isWarningError = false } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style", "tabIndex", "dataItemid", "isInvalidRedBackground", "isWarningError"]);
+    var { options, optionGroups, placeholder = '--Select-One--', readOnly, invalid, searchable = false, value: propValue, onChange, style, tabIndex, dataItemid, isInvalidRedBackground = false, isWarningError = false, innerRef = null } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style", "tabIndex", "dataItemid", "isInvalidRedBackground", "isWarningError", "innerRef"]);
     const [searchTerm, setSearchTerm] = React.useState('');
     const [value, setValue] = React.useState(propValue || '');
     const baseId = dataItemid || 'select';
@@ -3826,7 +3827,7 @@ const Select = (_a) => {
         : optionGroups;
     return (React.createElement(Wrapper$a, { "$invalid": invalid, "$isInvalidRedBackground": isInvalidRedBackground, "$isWarningError": isWarningError, "$readOnly": readOnly, "$style": style, "data-itemid": `${baseId}-wrapper`, style: style },
         searchable && (React.createElement(SearchInput$1, Object.assign({ "data-itemid": `${baseId}-search-input`, onChange: handleSearch, placeholder: placeholder, tabIndex: readOnly ? -1 : tabIndex, type: 'text', value: searchTerm }, accessibleProps))),
-        React.createElement(Trigger$1, Object.assign({ "data-itemid": `${baseId}-trigger`, disabled: readOnly, id: `${baseId}-trigger`, name: baseId, onChange: handleChange, placeholder: placeholder, tabIndex: readOnly ? -1 : tabIndex, value: value }, accessibleProps),
+        React.createElement(Trigger$1, Object.assign({ "data-itemid": `${baseId}-trigger`, disabled: readOnly, id: `${baseId}-trigger`, name: baseId, onChange: handleChange, placeholder: placeholder, ref: innerRef, tabIndex: readOnly ? -1 : tabIndex, value: value }, accessibleProps),
             placeholder && !value && (React.createElement("option", { "data-itemid": `${baseId}-placeholder`, disabled: true, value: '' }, placeholder)),
             filteredOptionGroups &&
                 filteredOptionGroups.map((group, i) => (React.createElement("optgroup", { "data-itemid": `${baseId}-optgroup-${i}`, key: i, label: group.label || `Group ${i}` }, group.options.map((option, j) => (React.createElement("option", { "data-itemid": `${baseId}-option-${i}-${j}`, key: j, style: { color: option.color }, value: option.value }, option.label || option.value)))))),