@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/cjs/index.js
CHANGED
|
@@ -4,6 +4,7 @@ var React = require('react');
|
|
|
4
4
|
var styled = require('styled-components');
|
|
5
5
|
var Icon = require('@mdi/react');
|
|
6
6
|
var js = require('@mdi/js');
|
|
7
|
+
var ReactDOM = require('react-dom');
|
|
7
8
|
var dayjs = require('dayjs');
|
|
8
9
|
var Numeral = require('numeral');
|
|
9
10
|
var Moment = require('moment');
|
|
@@ -2696,6 +2697,7 @@ const Wrapper$h = styled.div(props => ({
|
|
|
2696
2697
|
height: props.$height || '16px',
|
|
2697
2698
|
}));
|
|
2698
2699
|
const StyledAnchor = styled.a ``;
|
|
2700
|
+
const StyledDiv = styled.div ``;
|
|
2699
2701
|
const StyledIcon$6 = styled(Icon) `
|
|
2700
2702
|
width: 16px;
|
|
2701
2703
|
height: 16px;
|
|
@@ -2738,7 +2740,7 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, d
|
|
|
2738
2740
|
const [show_content, toggleContent] = React.useState(false);
|
|
2739
2741
|
const baseId = dataItemid || 'tooltip';
|
|
2740
2742
|
if (auto) {
|
|
2741
|
-
return (React.createElement(
|
|
2743
|
+
return (React.createElement(StyledDiv, { "data-itemid": `${baseId}-wrapper` },
|
|
2742
2744
|
React.createElement("style", null, `
|
|
2743
2745
|
.custom-tooltip-arrow {
|
|
2744
2746
|
box-shadow: 1px 1px 0 0 #0193D7; /* top border for arrow (matches border) */
|
|
@@ -2752,16 +2754,37 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, d
|
|
|
2752
2754
|
boxShadow: 0px 5px 30px -10px rgba(0, 0, 0, 0.5);
|
|
2753
2755
|
color: #000;
|
|
2754
2756
|
max-width: ${width};
|
|
2757
|
+
z-index: 9999; /* Ensure tooltip is above other elements */
|
|
2758
|
+
position: absolute; /* Ensure z-index works */
|
|
2755
2759
|
}
|
|
2756
2760
|
|
|
2757
2761
|
`),
|
|
2758
|
-
React.createElement(StyledAnchor, { "data-tooltip-html": children, "data-tooltip-id": 'auto-tooltip-data-html' }, trigger || React.createElement(StyledIcon$6, { "data-itemid": `${baseId}-icon`, path: js.mdiInformationOutline })),
|
|
2759
|
-
React.createElement(
|
|
2762
|
+
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: js.mdiInformationOutline })),
|
|
2763
|
+
React.createElement(TooltipPortal, null,
|
|
2764
|
+
React.createElement(M, { className: 'custom-tooltip', classNameArrow: 'custom-tooltip-arrow', "data-itemid": `${baseId}-content`, id: 'auto-tooltip-data-html' }))));
|
|
2760
2765
|
}
|
|
2761
2766
|
return (React.createElement(Wrapper$h, { "$height": height, "data-itemid": `${baseId}-wrapper`, onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
|
|
2762
2767
|
trigger || React.createElement(StyledIcon$6, { "data-itemid": `${baseId}-icon`, path: js.mdiInformationOutline }),
|
|
2763
2768
|
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));
|
|
2764
2769
|
};
|
|
2770
|
+
const TooltipPortal = ({ children }) => {
|
|
2771
|
+
const [container, setContainer] = React.useState();
|
|
2772
|
+
React.useEffect(() => {
|
|
2773
|
+
const div = document.createElement('div');
|
|
2774
|
+
// Select the first <body> element
|
|
2775
|
+
const body = document.getElementsByTagName('body')[0];
|
|
2776
|
+
if (body) {
|
|
2777
|
+
body.prepend(div);
|
|
2778
|
+
setContainer(div);
|
|
2779
|
+
}
|
|
2780
|
+
return () => {
|
|
2781
|
+
if (body) {
|
|
2782
|
+
body.removeChild(div);
|
|
2783
|
+
}
|
|
2784
|
+
};
|
|
2785
|
+
}, []);
|
|
2786
|
+
return container ? ReactDOM.createPortal(children, container) : null;
|
|
2787
|
+
};
|
|
2765
2788
|
|
|
2766
2789
|
const StyledButton = styled.button `
|
|
2767
2790
|
height: ${props => (props.$small ? '30px' : '40px')};
|