@hexure/ui 1.13.65 → 1.13.67
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 +38 -6
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/ProgressBar/ProgressBar.d.ts +4 -0
- package/dist/esm/index.js +38 -6
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/ProgressBar/ProgressBar.d.ts +4 -0
- package/dist/index.d.ts +4 -0
- 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) */
|
|
@@ -2747,19 +2749,40 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, d
|
|
|
2747
2749
|
border-style: solid;
|
|
2748
2750
|
border-color: #0193D7;
|
|
2749
2751
|
background: #ffffff;
|
|
2750
|
-
|
|
2752
|
+
box-shadow: 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')};
|
|
@@ -5492,6 +5515,13 @@ const StepLine = styled.div `
|
|
|
5492
5515
|
transition: background-color 0.5s ease-in-out;
|
|
5493
5516
|
`;
|
|
5494
5517
|
const Container$2 = styled.div ``;
|
|
5518
|
+
const ContainerExtraProps = styled.div `
|
|
5519
|
+
color: #b60000;
|
|
5520
|
+
cursor: ${props => (props.$cursorPointer ? 'pointer' : 'auto')};
|
|
5521
|
+
text-shadow: none;
|
|
5522
|
+
font-size: 0.8em;
|
|
5523
|
+
padding-top: 3px;
|
|
5524
|
+
`;
|
|
5495
5525
|
const ProgressBarFill = styled.div `
|
|
5496
5526
|
width: 110px;
|
|
5497
5527
|
height: 12px;
|
|
@@ -5526,6 +5556,7 @@ const ProgressBarFill = styled.div `
|
|
|
5526
5556
|
const ProgressBar = ({ steps, showStepLine = false, dataItemid }) => {
|
|
5527
5557
|
const baseId = dataItemid || 'progress-bar';
|
|
5528
5558
|
return (React.createElement(Steps, { "data-itemid": `${baseId}-steps` }, steps.map((step, i) => {
|
|
5559
|
+
var _a, _b;
|
|
5529
5560
|
const stepId = `${baseId}-step-${i}`;
|
|
5530
5561
|
return (React.createElement(React.Fragment, { key: i },
|
|
5531
5562
|
i !== 0 && showStepLine && (React.createElement(StepLine, { "$active": step.active, "data-itemid": `${stepId}-line` })),
|
|
@@ -5534,11 +5565,12 @@ const ProgressBar = ({ steps, showStepLine = false, dataItemid }) => {
|
|
|
5534
5565
|
React.createElement(StyledIcon$2, { "data-itemid": `${stepId}-icon`, path: mdiCheckboxMarkedCircleOutline, size: '32px' }))) : (React.createElement(StepIndicator, { "$active": step.active, "data-itemid": `${stepId}-indicator` }, i + 1)),
|
|
5535
5566
|
React.createElement(StepLabel, { "data-itemid": `${stepId}-label` },
|
|
5536
5567
|
step.label,
|
|
5537
|
-
step.percentComplete !== undefined && (React.createElement(ProgressBarFill, { "$percent": step.percentComplete, "data-itemid": `${stepId}-fill` },
|
|
5568
|
+
!(step === null || step === void 0 ? void 0 : step.extraProps) && step.percentComplete !== undefined && (React.createElement(ProgressBarFill, { "$percent": step.percentComplete, "data-itemid": `${stepId}-fill` },
|
|
5538
5569
|
React.createElement(Container$2, { className: 'progress-bar-fill' }),
|
|
5539
5570
|
React.createElement(Container$2, { className: 'progress-percentage', "data-itemid": `${stepId}-percentage` },
|
|
5540
5571
|
step.percentComplete,
|
|
5541
|
-
"%")))
|
|
5572
|
+
"%"))),
|
|
5573
|
+
(step === null || step === void 0 ? void 0 : step.extraProps) && (React.createElement(ContainerExtraProps, { "$cursorPointer": !!((_a = step.extraProps) === null || _a === void 0 ? void 0 : _a.onClick), "data-itemid": `${stepId}-extra-props`, onClick: (_b = step.extraProps) === null || _b === void 0 ? void 0 : _b.onClick, title: step.extraProps.title }, step.extraProps.title))))));
|
|
5542
5574
|
})));
|
|
5543
5575
|
};
|
|
5544
5576
|
|