@trackunit/react-components 0.1.152 → 0.1.154
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/index.cjs.js +68 -36
- package/index.esm.js +68 -37
- package/package.json +1 -1
- package/src/components/Menu/MoreMenu/MoreMenu.d.ts +3 -2
- package/src/components/Popover/PopoverContent.d.ts +5 -1
- package/src/hooks/index.d.ts +1 -0
- package/src/hooks/useContinuousTimeout.d.ts +19 -0
- package/src/hooks/useTimeout.d.ts +11 -7
package/index.cjs.js
CHANGED
|
@@ -18744,10 +18744,10 @@ const cvaPopoverTitleText = cssClassVarianceUtilities.cvaMerge(["flex-1", "text-
|
|
|
18744
18744
|
|
|
18745
18745
|
const PopoverContent = React__default["default"].forwardRef(function PopoverContent(_a, propRef) {
|
|
18746
18746
|
var _b, _c, _d;
|
|
18747
|
-
var { className, dataTestId, children } = _a, props = __rest$1(_a, ["className", "dataTestId", "children"]);
|
|
18747
|
+
var { className, dataTestId, children, portalId } = _a, props = __rest$1(_a, ["className", "dataTestId", "children", "portalId"]);
|
|
18748
18748
|
const _e = usePopoverContext(), { context: floatingContext, customProps } = _e, context = __rest$1(_e, ["context", "customProps"]);
|
|
18749
18749
|
const ref = useMergeRefs([context.refs.setFloating, propRef]);
|
|
18750
|
-
return (jsxRuntime.jsx(FloatingPortal, { id: "tu-floating-ui", children: context.isOpen && (jsxRuntime.jsx(FloatingFocusManager, { guards: false, context: floatingContext, modal: context.isModal, order: ["reference", "content"], returnFocus: false, children: jsxRuntime.jsx("div", Object.assign({ ref: ref, className: cvaPopoverContainer({ className: className !== null && className !== void 0 ? className : customProps.className }), "data-testid": (_b = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _b !== void 0 ? _b : "popover-content", style: Object.assign({ position: context.strategy, top: (_c = context.y) !== null && _c !== void 0 ? _c : 0, left: (_d = context.x) !== null && _d !== void 0 ? _d : 0, width: "max-content" }, props.style), "aria-labelledby": context.labelId, "aria-describedby": context.descriptionId }, context.getFloatingProps(props), { children: typeof children === "function" ? children(() => context.setIsOpen(false)) : children })) })) }));
|
|
18750
|
+
return (jsxRuntime.jsx(FloatingPortal, { id: portalId !== null && portalId !== void 0 ? portalId : "tu-floating-ui", children: context.isOpen && (jsxRuntime.jsx(FloatingFocusManager, { guards: false, context: floatingContext, modal: context.isModal, order: ["reference", "content"], returnFocus: false, children: jsxRuntime.jsx("div", Object.assign({ ref: ref, className: cvaPopoverContainer({ className: className !== null && className !== void 0 ? className : customProps.className }), "data-testid": (_b = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _b !== void 0 ? _b : "popover-content", style: Object.assign({ position: context.strategy, top: (_c = context.y) !== null && _c !== void 0 ? _c : 0, left: (_d = context.x) !== null && _d !== void 0 ? _d : 0, width: "max-content" }, props.style), "aria-labelledby": context.labelId, "aria-describedby": context.descriptionId }, context.getFloatingProps(props), { children: typeof children === "function" ? children(() => context.setIsOpen(false)) : children })) })) }));
|
|
18751
18751
|
});
|
|
18752
18752
|
|
|
18753
18753
|
/**
|
|
@@ -36585,6 +36585,69 @@ const useClickOutside = (el, options = {}, onClick) => {
|
|
|
36585
36585
|
});
|
|
36586
36586
|
};
|
|
36587
36587
|
|
|
36588
|
+
/**
|
|
36589
|
+
* Hook for managing timeouts.
|
|
36590
|
+
*
|
|
36591
|
+
* @param {object} options - Options for the useTimeout hook.
|
|
36592
|
+
* @param {Function} options.onTimeout - Callback function to execute on timeout.
|
|
36593
|
+
* @param {number} options.duration - Duration of the timeout in milliseconds.
|
|
36594
|
+
* @returns {object} An object containing functions to start and stop the timeout.
|
|
36595
|
+
*/
|
|
36596
|
+
const useTimeout = ({ onTimeout, duration }) => {
|
|
36597
|
+
const ready = React.useRef(false);
|
|
36598
|
+
const timeout = React.useRef();
|
|
36599
|
+
const callback = React.useRef(onTimeout);
|
|
36600
|
+
const startTimeout = React.useCallback(() => {
|
|
36601
|
+
ready.current = false;
|
|
36602
|
+
timeout.current && clearTimeout(timeout.current);
|
|
36603
|
+
timeout.current = setTimeout(() => {
|
|
36604
|
+
ready.current = true;
|
|
36605
|
+
callback.current();
|
|
36606
|
+
}, duration);
|
|
36607
|
+
}, [duration]);
|
|
36608
|
+
const stopTimeout = React.useCallback(() => {
|
|
36609
|
+
ready.current = null;
|
|
36610
|
+
timeout.current && clearTimeout(timeout.current);
|
|
36611
|
+
}, []);
|
|
36612
|
+
React.useEffect(() => {
|
|
36613
|
+
callback.current = onTimeout;
|
|
36614
|
+
}, [onTimeout]);
|
|
36615
|
+
React.useEffect(() => {
|
|
36616
|
+
// Cleanup function to clear the timeout when component unmounts
|
|
36617
|
+
return () => {
|
|
36618
|
+
timeout.current && clearTimeout(timeout.current);
|
|
36619
|
+
};
|
|
36620
|
+
}, []);
|
|
36621
|
+
return { startTimeout, stopTimeout };
|
|
36622
|
+
};
|
|
36623
|
+
|
|
36624
|
+
/**
|
|
36625
|
+
* Hook for continuous retries with a timeout mechanism.
|
|
36626
|
+
*
|
|
36627
|
+
* @param {object} options - Options for the useContinuousTimeout hook.
|
|
36628
|
+
* @param {Function} options.onTimeout - Callback function to execute on each timeout.
|
|
36629
|
+
* @param {number} options.duration - Duration of the timeout in milliseconds.
|
|
36630
|
+
* @param {number} options.maxRetries - Maximum number of retry attempts.
|
|
36631
|
+
* @returns {object} An object containing functions to start and stop the timeout.
|
|
36632
|
+
*/
|
|
36633
|
+
const useContinuousTimeout = ({ onTimeout, duration, maxRetries }) => {
|
|
36634
|
+
const retries = React.useRef(0);
|
|
36635
|
+
const { startTimeout, stopTimeout } = useTimeout({
|
|
36636
|
+
duration,
|
|
36637
|
+
onTimeout: () => {
|
|
36638
|
+
onTimeout();
|
|
36639
|
+
if (retries.current < maxRetries) {
|
|
36640
|
+
startTimeout();
|
|
36641
|
+
retries.current++;
|
|
36642
|
+
}
|
|
36643
|
+
else {
|
|
36644
|
+
retries.current = 0;
|
|
36645
|
+
}
|
|
36646
|
+
},
|
|
36647
|
+
});
|
|
36648
|
+
return { startTimeout, stopTimeout, retries: retries.current };
|
|
36649
|
+
};
|
|
36650
|
+
|
|
36588
36651
|
/**
|
|
36589
36652
|
* The useDebounce hook works like useState, but adds a delay where previous values will be ignored.
|
|
36590
36653
|
*
|
|
@@ -36739,38 +36802,6 @@ const getWindowSize = () => {
|
|
|
36739
36802
|
}
|
|
36740
36803
|
};
|
|
36741
36804
|
|
|
36742
|
-
/**
|
|
36743
|
-
* @param {UseTimeoutProps} props The props
|
|
36744
|
-
* @returns {{ startTimeout: () => void; stopTimeout: () => void;}} return
|
|
36745
|
-
*/
|
|
36746
|
-
const useTimeout = ({ onTimeout, duration }) => {
|
|
36747
|
-
const ready = React.useRef(false);
|
|
36748
|
-
const timeout = React.useRef();
|
|
36749
|
-
const callback = React.useRef(onTimeout);
|
|
36750
|
-
const startTimeout = React.useCallback(() => {
|
|
36751
|
-
ready.current = false;
|
|
36752
|
-
timeout.current && clearTimeout(timeout.current);
|
|
36753
|
-
timeout.current = setTimeout(() => {
|
|
36754
|
-
ready.current = true;
|
|
36755
|
-
callback.current();
|
|
36756
|
-
}, duration);
|
|
36757
|
-
}, [duration]);
|
|
36758
|
-
const stopTimeout = React.useCallback(() => {
|
|
36759
|
-
ready.current = null;
|
|
36760
|
-
timeout.current && clearTimeout(timeout.current);
|
|
36761
|
-
}, []);
|
|
36762
|
-
React.useEffect(() => {
|
|
36763
|
-
callback.current = onTimeout;
|
|
36764
|
-
}, [onTimeout]);
|
|
36765
|
-
React.useEffect(() => {
|
|
36766
|
-
// Cleanup function to clear the timeout when component unmounts
|
|
36767
|
-
return () => {
|
|
36768
|
-
timeout.current && clearTimeout(timeout.current);
|
|
36769
|
-
};
|
|
36770
|
-
}, []);
|
|
36771
|
-
return [startTimeout, stopTimeout];
|
|
36772
|
-
};
|
|
36773
|
-
|
|
36774
36805
|
/**
|
|
36775
36806
|
* Returns a callback that will be called when the visibility state of the document changes.
|
|
36776
36807
|
*/
|
|
@@ -36805,7 +36836,7 @@ const MoreMenu = ({ className, dataTestId, menuPlacement, iconProps = {
|
|
|
36805
36836
|
circular: true,
|
|
36806
36837
|
square: true,
|
|
36807
36838
|
color: "tertiary",
|
|
36808
|
-
}, customButton, children, }) => {
|
|
36839
|
+
}, customButton, customPortalId, children, }) => {
|
|
36809
36840
|
const [actionMenuIsOpen, setActionMenuIsOpen] = React.useState(false);
|
|
36810
36841
|
const actionMenuRef = React.useRef(null);
|
|
36811
36842
|
useClickOutside(actionMenuRef, () => {
|
|
@@ -36813,7 +36844,7 @@ const MoreMenu = ({ className, dataTestId, menuPlacement, iconProps = {
|
|
|
36813
36844
|
});
|
|
36814
36845
|
return (jsxRuntime.jsx("div", { ref: actionMenuRef, className: cvaMoreMenu({ className }), "data-testid": dataTestId, children: jsxRuntime.jsxs(Popover, { placement: menuPlacement, children: [jsxRuntime.jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : (jsxRuntime.jsx(IconButton, Object.assign({}, iconButtonProps, { icon: iconProps.name ? jsxRuntime.jsx(Icon, Object.assign({}, iconProps, { name: iconProps.name })) : null, onClick: () => {
|
|
36815
36846
|
setActionMenuIsOpen(!actionMenuIsOpen);
|
|
36816
|
-
} }))) }), jsxRuntime.jsx(PopoverContent, { children: close => (typeof children === "function" ? children(close) : children) })] }) }));
|
|
36847
|
+
} }))) }), jsxRuntime.jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] }) }));
|
|
36817
36848
|
};
|
|
36818
36849
|
|
|
36819
36850
|
const cvaModalContainer = cssClassVarianceUtilities.cvaMerge(["h-full", "w-full", "flex", "items-center"]);
|
|
@@ -39125,6 +39156,7 @@ exports.getValueBarColorByValue = getValueBarColorByValue;
|
|
|
39125
39156
|
exports.setLocalStorage = setLocalStorage;
|
|
39126
39157
|
exports.useClickOutside = useClickOutside;
|
|
39127
39158
|
exports.useContainerProps = useContainerProps;
|
|
39159
|
+
exports.useContinuousTimeout = useContinuousTimeout;
|
|
39128
39160
|
exports.useDebounce = useDebounce;
|
|
39129
39161
|
exports.useDevicePixelRatio = useDevicePixelRatio;
|
|
39130
39162
|
exports.useHover = useHover;
|
package/index.esm.js
CHANGED
|
@@ -18717,10 +18717,10 @@ const cvaPopoverTitleText = cvaMerge(["flex-1", "text-neutral-500"]);
|
|
|
18717
18717
|
|
|
18718
18718
|
const PopoverContent = React__default.forwardRef(function PopoverContent(_a, propRef) {
|
|
18719
18719
|
var _b, _c, _d;
|
|
18720
|
-
var { className, dataTestId, children } = _a, props = __rest$1(_a, ["className", "dataTestId", "children"]);
|
|
18720
|
+
var { className, dataTestId, children, portalId } = _a, props = __rest$1(_a, ["className", "dataTestId", "children", "portalId"]);
|
|
18721
18721
|
const _e = usePopoverContext(), { context: floatingContext, customProps } = _e, context = __rest$1(_e, ["context", "customProps"]);
|
|
18722
18722
|
const ref = useMergeRefs([context.refs.setFloating, propRef]);
|
|
18723
|
-
return (jsx(FloatingPortal, { id: "tu-floating-ui", children: context.isOpen && (jsx(FloatingFocusManager, { guards: false, context: floatingContext, modal: context.isModal, order: ["reference", "content"], returnFocus: false, children: jsx("div", Object.assign({ ref: ref, className: cvaPopoverContainer({ className: className !== null && className !== void 0 ? className : customProps.className }), "data-testid": (_b = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _b !== void 0 ? _b : "popover-content", style: Object.assign({ position: context.strategy, top: (_c = context.y) !== null && _c !== void 0 ? _c : 0, left: (_d = context.x) !== null && _d !== void 0 ? _d : 0, width: "max-content" }, props.style), "aria-labelledby": context.labelId, "aria-describedby": context.descriptionId }, context.getFloatingProps(props), { children: typeof children === "function" ? children(() => context.setIsOpen(false)) : children })) })) }));
|
|
18723
|
+
return (jsx(FloatingPortal, { id: portalId !== null && portalId !== void 0 ? portalId : "tu-floating-ui", children: context.isOpen && (jsx(FloatingFocusManager, { guards: false, context: floatingContext, modal: context.isModal, order: ["reference", "content"], returnFocus: false, children: jsx("div", Object.assign({ ref: ref, className: cvaPopoverContainer({ className: className !== null && className !== void 0 ? className : customProps.className }), "data-testid": (_b = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _b !== void 0 ? _b : "popover-content", style: Object.assign({ position: context.strategy, top: (_c = context.y) !== null && _c !== void 0 ? _c : 0, left: (_d = context.x) !== null && _d !== void 0 ? _d : 0, width: "max-content" }, props.style), "aria-labelledby": context.labelId, "aria-describedby": context.descriptionId }, context.getFloatingProps(props), { children: typeof children === "function" ? children(() => context.setIsOpen(false)) : children })) })) }));
|
|
18724
18724
|
});
|
|
18725
18725
|
|
|
18726
18726
|
/**
|
|
@@ -36558,6 +36558,69 @@ const useClickOutside = (el, options = {}, onClick) => {
|
|
|
36558
36558
|
});
|
|
36559
36559
|
};
|
|
36560
36560
|
|
|
36561
|
+
/**
|
|
36562
|
+
* Hook for managing timeouts.
|
|
36563
|
+
*
|
|
36564
|
+
* @param {object} options - Options for the useTimeout hook.
|
|
36565
|
+
* @param {Function} options.onTimeout - Callback function to execute on timeout.
|
|
36566
|
+
* @param {number} options.duration - Duration of the timeout in milliseconds.
|
|
36567
|
+
* @returns {object} An object containing functions to start and stop the timeout.
|
|
36568
|
+
*/
|
|
36569
|
+
const useTimeout = ({ onTimeout, duration }) => {
|
|
36570
|
+
const ready = useRef(false);
|
|
36571
|
+
const timeout = useRef();
|
|
36572
|
+
const callback = useRef(onTimeout);
|
|
36573
|
+
const startTimeout = useCallback(() => {
|
|
36574
|
+
ready.current = false;
|
|
36575
|
+
timeout.current && clearTimeout(timeout.current);
|
|
36576
|
+
timeout.current = setTimeout(() => {
|
|
36577
|
+
ready.current = true;
|
|
36578
|
+
callback.current();
|
|
36579
|
+
}, duration);
|
|
36580
|
+
}, [duration]);
|
|
36581
|
+
const stopTimeout = useCallback(() => {
|
|
36582
|
+
ready.current = null;
|
|
36583
|
+
timeout.current && clearTimeout(timeout.current);
|
|
36584
|
+
}, []);
|
|
36585
|
+
useEffect(() => {
|
|
36586
|
+
callback.current = onTimeout;
|
|
36587
|
+
}, [onTimeout]);
|
|
36588
|
+
useEffect(() => {
|
|
36589
|
+
// Cleanup function to clear the timeout when component unmounts
|
|
36590
|
+
return () => {
|
|
36591
|
+
timeout.current && clearTimeout(timeout.current);
|
|
36592
|
+
};
|
|
36593
|
+
}, []);
|
|
36594
|
+
return { startTimeout, stopTimeout };
|
|
36595
|
+
};
|
|
36596
|
+
|
|
36597
|
+
/**
|
|
36598
|
+
* Hook for continuous retries with a timeout mechanism.
|
|
36599
|
+
*
|
|
36600
|
+
* @param {object} options - Options for the useContinuousTimeout hook.
|
|
36601
|
+
* @param {Function} options.onTimeout - Callback function to execute on each timeout.
|
|
36602
|
+
* @param {number} options.duration - Duration of the timeout in milliseconds.
|
|
36603
|
+
* @param {number} options.maxRetries - Maximum number of retry attempts.
|
|
36604
|
+
* @returns {object} An object containing functions to start and stop the timeout.
|
|
36605
|
+
*/
|
|
36606
|
+
const useContinuousTimeout = ({ onTimeout, duration, maxRetries }) => {
|
|
36607
|
+
const retries = useRef(0);
|
|
36608
|
+
const { startTimeout, stopTimeout } = useTimeout({
|
|
36609
|
+
duration,
|
|
36610
|
+
onTimeout: () => {
|
|
36611
|
+
onTimeout();
|
|
36612
|
+
if (retries.current < maxRetries) {
|
|
36613
|
+
startTimeout();
|
|
36614
|
+
retries.current++;
|
|
36615
|
+
}
|
|
36616
|
+
else {
|
|
36617
|
+
retries.current = 0;
|
|
36618
|
+
}
|
|
36619
|
+
},
|
|
36620
|
+
});
|
|
36621
|
+
return { startTimeout, stopTimeout, retries: retries.current };
|
|
36622
|
+
};
|
|
36623
|
+
|
|
36561
36624
|
/**
|
|
36562
36625
|
* The useDebounce hook works like useState, but adds a delay where previous values will be ignored.
|
|
36563
36626
|
*
|
|
@@ -36712,38 +36775,6 @@ const getWindowSize = () => {
|
|
|
36712
36775
|
}
|
|
36713
36776
|
};
|
|
36714
36777
|
|
|
36715
|
-
/**
|
|
36716
|
-
* @param {UseTimeoutProps} props The props
|
|
36717
|
-
* @returns {{ startTimeout: () => void; stopTimeout: () => void;}} return
|
|
36718
|
-
*/
|
|
36719
|
-
const useTimeout = ({ onTimeout, duration }) => {
|
|
36720
|
-
const ready = useRef(false);
|
|
36721
|
-
const timeout = useRef();
|
|
36722
|
-
const callback = useRef(onTimeout);
|
|
36723
|
-
const startTimeout = useCallback(() => {
|
|
36724
|
-
ready.current = false;
|
|
36725
|
-
timeout.current && clearTimeout(timeout.current);
|
|
36726
|
-
timeout.current = setTimeout(() => {
|
|
36727
|
-
ready.current = true;
|
|
36728
|
-
callback.current();
|
|
36729
|
-
}, duration);
|
|
36730
|
-
}, [duration]);
|
|
36731
|
-
const stopTimeout = useCallback(() => {
|
|
36732
|
-
ready.current = null;
|
|
36733
|
-
timeout.current && clearTimeout(timeout.current);
|
|
36734
|
-
}, []);
|
|
36735
|
-
useEffect(() => {
|
|
36736
|
-
callback.current = onTimeout;
|
|
36737
|
-
}, [onTimeout]);
|
|
36738
|
-
useEffect(() => {
|
|
36739
|
-
// Cleanup function to clear the timeout when component unmounts
|
|
36740
|
-
return () => {
|
|
36741
|
-
timeout.current && clearTimeout(timeout.current);
|
|
36742
|
-
};
|
|
36743
|
-
}, []);
|
|
36744
|
-
return [startTimeout, stopTimeout];
|
|
36745
|
-
};
|
|
36746
|
-
|
|
36747
36778
|
/**
|
|
36748
36779
|
* Returns a callback that will be called when the visibility state of the document changes.
|
|
36749
36780
|
*/
|
|
@@ -36778,7 +36809,7 @@ const MoreMenu = ({ className, dataTestId, menuPlacement, iconProps = {
|
|
|
36778
36809
|
circular: true,
|
|
36779
36810
|
square: true,
|
|
36780
36811
|
color: "tertiary",
|
|
36781
|
-
}, customButton, children, }) => {
|
|
36812
|
+
}, customButton, customPortalId, children, }) => {
|
|
36782
36813
|
const [actionMenuIsOpen, setActionMenuIsOpen] = useState(false);
|
|
36783
36814
|
const actionMenuRef = useRef(null);
|
|
36784
36815
|
useClickOutside(actionMenuRef, () => {
|
|
@@ -36786,7 +36817,7 @@ const MoreMenu = ({ className, dataTestId, menuPlacement, iconProps = {
|
|
|
36786
36817
|
});
|
|
36787
36818
|
return (jsx("div", { ref: actionMenuRef, className: cvaMoreMenu({ className }), "data-testid": dataTestId, children: jsxs(Popover, { placement: menuPlacement, children: [jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : (jsx(IconButton, Object.assign({}, iconButtonProps, { icon: iconProps.name ? jsx(Icon, Object.assign({}, iconProps, { name: iconProps.name })) : null, onClick: () => {
|
|
36788
36819
|
setActionMenuIsOpen(!actionMenuIsOpen);
|
|
36789
|
-
} }))) }), jsx(PopoverContent, { children: close => (typeof children === "function" ? children(close) : children) })] }) }));
|
|
36820
|
+
} }))) }), jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] }) }));
|
|
36790
36821
|
};
|
|
36791
36822
|
|
|
36792
36823
|
const cvaModalContainer = cvaMerge(["h-full", "w-full", "flex", "items-center"]);
|
|
@@ -39033,4 +39064,4 @@ const cvaClickable = cvaMerge([
|
|
|
39033
39064
|
},
|
|
39034
39065
|
});
|
|
39035
39066
|
|
|
39036
|
-
export { Alert, Badge, Button$1 as Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, Timeline, TimelineElement, Tip, Tooltip, ValueBar, cvaButton, cvaButtonSpinner, cvaClickable, cvaIconButtonContainer, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, setLocalStorage, useClickOutside, useContainerProps, useDebounce, useDevicePixelRatio, useHover, useIsFirstRender, useLocalStorage, useLocalStorageReducer, useModal, usePopoverContext, usePrompt, useResize, useTimeout, useVisibilityChange };
|
|
39067
|
+
export { Alert, Badge, Button$1 as Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, Timeline, TimelineElement, Tip, Tooltip, ValueBar, cvaButton, cvaButtonSpinner, cvaClickable, cvaIconButtonContainer, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useHover, useIsFirstRender, useLocalStorage, useLocalStorageReducer, useModal, usePopoverContext, usePrompt, useResize, useTimeout, useVisibilityChange };
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { ReactNode } from "react";
|
|
2
2
|
import { CommonProps } from "../../../common/CommonProps";
|
|
3
|
-
import { IconButtonProps } from "../../buttons";
|
|
4
3
|
import { IconProps } from "../../Icon/Icon";
|
|
5
4
|
import { PopoverContentChildren, PopoverPlacement } from "../../Popover";
|
|
5
|
+
import { IconButtonProps } from "../../buttons";
|
|
6
6
|
export type MenuPlacement = "above" | "below";
|
|
7
7
|
type FilteredIconProps = Omit<IconProps, "onClick" | "name"> & Pick<Partial<IconProps>, "name">;
|
|
8
8
|
type FilteredIconButtonProps = Omit<IconButtonProps, "icon" | "onClick">;
|
|
@@ -11,6 +11,7 @@ export interface MoreMenuProps extends CommonProps {
|
|
|
11
11
|
menuPlacement?: PopoverPlacement;
|
|
12
12
|
iconProps?: FilteredIconProps;
|
|
13
13
|
iconButtonProps?: FilteredIconButtonProps;
|
|
14
|
+
customPortalId?: string;
|
|
14
15
|
customButton?: ReactNode;
|
|
15
16
|
}
|
|
16
17
|
/**
|
|
@@ -20,5 +21,5 @@ export interface MoreMenuProps extends CommonProps {
|
|
|
20
21
|
* @param {MoreMenuProps} props - The props for the MoreMenu component
|
|
21
22
|
* @returns {JSX.Element} MoreMenu component
|
|
22
23
|
*/
|
|
23
|
-
export declare const MoreMenu: ({ className, dataTestId, menuPlacement, iconProps, iconButtonProps, customButton, children, }: MoreMenuProps) => JSX.Element;
|
|
24
|
+
export declare const MoreMenu: ({ className, dataTestId, menuPlacement, iconProps, iconButtonProps, customButton, customPortalId, children, }: MoreMenuProps) => JSX.Element;
|
|
24
25
|
export {};
|
|
@@ -3,5 +3,9 @@ import { CommonProps } from "../../common";
|
|
|
3
3
|
export type PopoverContentChildren = ((close: () => void) => React.ReactNode) | React.ReactNode;
|
|
4
4
|
export interface PopoverContentProps extends Omit<React.HTMLProps<HTMLDivElement>, "children">, CommonProps {
|
|
5
5
|
children: PopoverContentChildren;
|
|
6
|
+
/**
|
|
7
|
+
* Custom dom id to use for portalling the popover content
|
|
8
|
+
*/
|
|
9
|
+
portalId?: string;
|
|
6
10
|
}
|
|
7
|
-
export declare const PopoverContent: React.ForwardRefExoticComponent<Pick<PopoverContentProps, "children" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "dataTestId"> & React.RefAttributes<HTMLDivElement>>;
|
|
11
|
+
export declare const PopoverContent: React.ForwardRefExoticComponent<Pick<PopoverContentProps, "children" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "portalId" | "dataTestId"> & React.RefAttributes<HTMLDivElement>>;
|
package/src/hooks/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ export * from "./localStorage/setLocalStorage";
|
|
|
2
2
|
export * from "./localStorage/useLocalStorage";
|
|
3
3
|
export * from "./localStorage/useLocalStorageReducer";
|
|
4
4
|
export * from "./useClickOutside";
|
|
5
|
+
export * from "./useContinuousTimeout";
|
|
5
6
|
export * from "./useDebounce";
|
|
6
7
|
export * from "./useDevicePixelRatio";
|
|
7
8
|
export * from "./useHover";
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { UseTimeoutProps } from "./useTimeout";
|
|
2
|
+
interface UseContinuousTimeoutProps extends UseTimeoutProps {
|
|
3
|
+
maxRetries: number;
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* Hook for continuous retries with a timeout mechanism.
|
|
7
|
+
*
|
|
8
|
+
* @param {object} options - Options for the useContinuousTimeout hook.
|
|
9
|
+
* @param {Function} options.onTimeout - Callback function to execute on each timeout.
|
|
10
|
+
* @param {number} options.duration - Duration of the timeout in milliseconds.
|
|
11
|
+
* @param {number} options.maxRetries - Maximum number of retry attempts.
|
|
12
|
+
* @returns {object} An object containing functions to start and stop the timeout.
|
|
13
|
+
*/
|
|
14
|
+
export declare const useContinuousTimeout: ({ onTimeout, duration, maxRetries }: UseContinuousTimeoutProps) => {
|
|
15
|
+
startTimeout: () => void;
|
|
16
|
+
stopTimeout: () => void;
|
|
17
|
+
retries: number;
|
|
18
|
+
};
|
|
19
|
+
export {};
|
|
@@ -1,12 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
export type UseTimeoutReturn = [Callback, Callback];
|
|
3
|
-
interface UseTimeoutProps {
|
|
1
|
+
export interface UseTimeoutProps {
|
|
4
2
|
onTimeout: () => void;
|
|
5
3
|
duration: number;
|
|
6
4
|
}
|
|
7
5
|
/**
|
|
8
|
-
*
|
|
9
|
-
*
|
|
6
|
+
* Hook for managing timeouts.
|
|
7
|
+
*
|
|
8
|
+
* @param {object} options - Options for the useTimeout hook.
|
|
9
|
+
* @param {Function} options.onTimeout - Callback function to execute on timeout.
|
|
10
|
+
* @param {number} options.duration - Duration of the timeout in milliseconds.
|
|
11
|
+
* @returns {object} An object containing functions to start and stop the timeout.
|
|
10
12
|
*/
|
|
11
|
-
export declare const useTimeout: ({ onTimeout, duration }: UseTimeoutProps) =>
|
|
12
|
-
|
|
13
|
+
export declare const useTimeout: ({ onTimeout, duration }: UseTimeoutProps) => {
|
|
14
|
+
startTimeout: () => void;
|
|
15
|
+
stopTimeout: () => void;
|
|
16
|
+
};
|