@hexure/ui 1.13.65 → 1.13.66
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +26 -3
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +26 -3
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.ts +82 -82
- package/package.json +1 -1
package/dist/esm/index.js
CHANGED
|
@@ -2,6 +2,7 @@ import React, { createContext, useState, useRef, useEffect, useContext, useCallb
|
|
|
2
2
|
import styled, { ThemeContext, keyframes } from 'styled-components';
|
|
3
3
|
import Icon, { Icon as Icon$1 } from '@mdi/react';
|
|
4
4
|
import { mdiChevronUp, mdiChevronDown, mdiInformationOutline, mdiLoading, mdiAlertOctagonOutline, mdiAlertOutline, mdiCheckboxMarkedCircleOutline, mdiClose, mdiChevronRight, mdiChevronLeft, mdiDotsHorizontal, mdiAlertCircle, mdiMinusCircle, mdiFolderPlusOutline, mdiCheck } from '@mdi/js';
|
|
5
|
+
import ReactDOM from 'react-dom';
|
|
5
6
|
import dayjs from 'dayjs';
|
|
6
7
|
import Numeral from 'numeral';
|
|
7
8
|
import Moment from 'moment';
|
|
@@ -2694,6 +2695,7 @@ const Wrapper$h = styled.div(props => ({
|
|
|
2694
2695
|
height: props.$height || '16px',
|
|
2695
2696
|
}));
|
|
2696
2697
|
const StyledAnchor = styled.a ``;
|
|
2698
|
+
const StyledDiv = styled.div ``;
|
|
2697
2699
|
const StyledIcon$6 = styled(Icon) `
|
|
2698
2700
|
width: 16px;
|
|
2699
2701
|
height: 16px;
|
|
@@ -2736,7 +2738,7 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, d
|
|
|
2736
2738
|
const [show_content, toggleContent] = useState(false);
|
|
2737
2739
|
const baseId = dataItemid || 'tooltip';
|
|
2738
2740
|
if (auto) {
|
|
2739
|
-
return (React.createElement(
|
|
2741
|
+
return (React.createElement(StyledDiv, { "data-itemid": `${baseId}-wrapper` },
|
|
2740
2742
|
React.createElement("style", null, `
|
|
2741
2743
|
.custom-tooltip-arrow {
|
|
2742
2744
|
box-shadow: 1px 1px 0 0 #0193D7; /* top border for arrow (matches border) */
|
|
@@ -2750,16 +2752,37 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, d
|
|
|
2750
2752
|
boxShadow: 0px 5px 30px -10px rgba(0, 0, 0, 0.5);
|
|
2751
2753
|
color: #000;
|
|
2752
2754
|
max-width: ${width};
|
|
2755
|
+
z-index: 9999; /* Ensure tooltip is above other elements */
|
|
2756
|
+
position: absolute; /* Ensure z-index works */
|
|
2753
2757
|
}
|
|
2754
2758
|
|
|
2755
2759
|
`),
|
|
2756
|
-
React.createElement(StyledAnchor, { "data-tooltip-html": children, "data-tooltip-id": 'auto-tooltip-data-html' }, trigger || React.createElement(StyledIcon$6, { "data-itemid": `${baseId}-icon`, path: mdiInformationOutline })),
|
|
2757
|
-
React.createElement(
|
|
2760
|
+
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 })),
|
|
2761
|
+
React.createElement(TooltipPortal, null,
|
|
2762
|
+
React.createElement(M, { className: 'custom-tooltip', classNameArrow: 'custom-tooltip-arrow', "data-itemid": `${baseId}-content`, id: 'auto-tooltip-data-html' }))));
|
|
2758
2763
|
}
|
|
2759
2764
|
return (React.createElement(Wrapper$h, { "$height": height, "data-itemid": `${baseId}-wrapper`, onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
|
|
2760
2765
|
trigger || React.createElement(StyledIcon$6, { "data-itemid": `${baseId}-icon`, path: mdiInformationOutline }),
|
|
2761
2766
|
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));
|
|
2762
2767
|
};
|
|
2768
|
+
const TooltipPortal = ({ children }) => {
|
|
2769
|
+
const [container, setContainer] = useState();
|
|
2770
|
+
useEffect(() => {
|
|
2771
|
+
const div = document.createElement('div');
|
|
2772
|
+
// Select the first <body> element
|
|
2773
|
+
const body = document.getElementsByTagName('body')[0];
|
|
2774
|
+
if (body) {
|
|
2775
|
+
body.prepend(div);
|
|
2776
|
+
setContainer(div);
|
|
2777
|
+
}
|
|
2778
|
+
return () => {
|
|
2779
|
+
if (body) {
|
|
2780
|
+
body.removeChild(div);
|
|
2781
|
+
}
|
|
2782
|
+
};
|
|
2783
|
+
}, []);
|
|
2784
|
+
return container ? ReactDOM.createPortal(children, container) : null;
|
|
2785
|
+
};
|
|
2763
2786
|
|
|
2764
2787
|
const StyledButton = styled.button `
|
|
2765
2788
|
height: ${props => (props.$small ? '30px' : '40px')};
|