@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.
Files changed (8) hide show
  1. package/dist/cjs/index.js +38 -6
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/types/components/ProgressBar/ProgressBar.d.ts +4 -0
  4. package/dist/esm/index.js +38 -6
  5. package/dist/esm/index.js.map +1 -1
  6. package/dist/esm/types/components/ProgressBar/ProgressBar.d.ts +4 -0
  7. package/dist/index.d.ts +4 -0
  8. 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(React.Fragment, null,
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) */
@@ -2749,19 +2751,40 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, d
2749
2751
  border-style: solid;
2750
2752
  border-color: #0193D7;
2751
2753
  background: #ffffff;
2752
- boxShadow: 0px 5px 30px -10px rgba(0, 0, 0, 0.5);
2754
+ box-shadow: 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(M, { className: 'custom-tooltip', classNameArrow: 'custom-tooltip-arrow', id: 'auto-tooltip-data-html' })));
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')};
@@ -5494,6 +5517,13 @@ const StepLine = styled.div `
5494
5517
  transition: background-color 0.5s ease-in-out;
5495
5518
  `;
5496
5519
  const Container$2 = styled.div ``;
5520
+ const ContainerExtraProps = styled.div `
5521
+ color: #b60000;
5522
+ cursor: ${props => (props.$cursorPointer ? 'pointer' : 'auto')};
5523
+ text-shadow: none;
5524
+ font-size: 0.8em;
5525
+ padding-top: 3px;
5526
+ `;
5497
5527
  const ProgressBarFill = styled.div `
5498
5528
  width: 110px;
5499
5529
  height: 12px;
@@ -5528,6 +5558,7 @@ const ProgressBarFill = styled.div `
5528
5558
  const ProgressBar = ({ steps, showStepLine = false, dataItemid }) => {
5529
5559
  const baseId = dataItemid || 'progress-bar';
5530
5560
  return (React.createElement(Steps, { "data-itemid": `${baseId}-steps` }, steps.map((step, i) => {
5561
+ var _a, _b;
5531
5562
  const stepId = `${baseId}-step-${i}`;
5532
5563
  return (React.createElement(React.Fragment, { key: i },
5533
5564
  i !== 0 && showStepLine && (React.createElement(StepLine, { "$active": step.active, "data-itemid": `${stepId}-line` })),
@@ -5536,11 +5567,12 @@ const ProgressBar = ({ steps, showStepLine = false, dataItemid }) => {
5536
5567
  React.createElement(StyledIcon$2, { "data-itemid": `${stepId}-icon`, path: js.mdiCheckboxMarkedCircleOutline, size: '32px' }))) : (React.createElement(StepIndicator, { "$active": step.active, "data-itemid": `${stepId}-indicator` }, i + 1)),
5537
5568
  React.createElement(StepLabel, { "data-itemid": `${stepId}-label` },
5538
5569
  step.label,
5539
- step.percentComplete !== undefined && (React.createElement(ProgressBarFill, { "$percent": step.percentComplete, "data-itemid": `${stepId}-fill` },
5570
+ !(step === null || step === void 0 ? void 0 : step.extraProps) && step.percentComplete !== undefined && (React.createElement(ProgressBarFill, { "$percent": step.percentComplete, "data-itemid": `${stepId}-fill` },
5540
5571
  React.createElement(Container$2, { className: 'progress-bar-fill' }),
5541
5572
  React.createElement(Container$2, { className: 'progress-percentage', "data-itemid": `${stepId}-percentage` },
5542
5573
  step.percentComplete,
5543
- "%")))))));
5574
+ "%"))),
5575
+ (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))))));
5544
5576
  })));
5545
5577
  };
5546
5578