@lumx/react 3.1.4-alpha-popover.4 → 3.1.5
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.d.ts +6 -0
- package/index.js +12 -6
- package/index.js.map +1 -1
- package/package.json +3 -3
- package/src/components/alert-dialog/__snapshots__/AlertDialog.test.tsx.snap +7 -0
- package/src/components/dialog/Dialog.stories.tsx +54 -0
- package/src/components/dialog/Dialog.test.tsx +8 -0
- package/src/components/dialog/Dialog.tsx +17 -3
- package/src/components/dialog/__snapshots__/Dialog.test.tsx.snap +173 -0
package/index.d.ts
CHANGED
|
@@ -637,6 +637,10 @@ interface DialogProps extends GenericProps {
|
|
|
637
637
|
focusElement?: RefObject<HTMLElement>;
|
|
638
638
|
/** Whether to keep the dialog open on clickaway or escape press. */
|
|
639
639
|
preventAutoClose?: boolean;
|
|
640
|
+
/** Whether to keep the dialog open on escape press. */
|
|
641
|
+
preventCloseOnEscape?: boolean;
|
|
642
|
+
/** Whether to keep the dialog open on clickaway. */
|
|
643
|
+
preventCloseOnClick?: boolean;
|
|
640
644
|
/** Size variant. */
|
|
641
645
|
size?: DialogSizes;
|
|
642
646
|
/** Z-axis position. */
|
|
@@ -647,6 +651,8 @@ interface DialogProps extends GenericProps {
|
|
|
647
651
|
onClose?(): void;
|
|
648
652
|
/** Callback called when the open animation starts and the close animation finishes. */
|
|
649
653
|
onVisibilityChange?(isVisible: boolean): void;
|
|
654
|
+
/** whether to disable the scroll on the body or not */
|
|
655
|
+
disableBodyScroll?: boolean;
|
|
650
656
|
}
|
|
651
657
|
declare type DialogSizes = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
|
|
652
658
|
/**
|
package/index.js
CHANGED
|
@@ -2732,7 +2732,7 @@ const useTransitionVisibility = (ref, isComponentVisible, onVisibilityChange) =>
|
|
|
2732
2732
|
return isVisible || isComponentVisible;
|
|
2733
2733
|
};
|
|
2734
2734
|
|
|
2735
|
-
const _excluded$h = ["children", "className", "header", "focusElement", "forceFooterDivider", "forceHeaderDivider", "footer", "isLoading", "isOpen", "onClose", "parentElement", "contentRef", "preventAutoClose", "size", "zIndex", "dialogProps", "onVisibilityChange"];
|
|
2735
|
+
const _excluded$h = ["children", "className", "header", "focusElement", "forceFooterDivider", "forceHeaderDivider", "footer", "isLoading", "isOpen", "onClose", "parentElement", "contentRef", "preventAutoClose", "size", "zIndex", "dialogProps", "onVisibilityChange", "disableBodyScroll", "preventCloseOnClick", "preventCloseOnEscape"];
|
|
2736
2736
|
|
|
2737
2737
|
/**
|
|
2738
2738
|
* Defines the props of the component.
|
|
@@ -2755,7 +2755,8 @@ const CLASSNAME$d = getRootClassName(COMPONENT_NAME$g);
|
|
|
2755
2755
|
* Component default props.
|
|
2756
2756
|
*/
|
|
2757
2757
|
const DEFAULT_PROPS$c = {
|
|
2758
|
-
size: Size.big
|
|
2758
|
+
size: Size.big,
|
|
2759
|
+
disableBodyScroll: true
|
|
2759
2760
|
};
|
|
2760
2761
|
|
|
2761
2762
|
/**
|
|
@@ -2788,7 +2789,10 @@ const Dialog = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
2788
2789
|
size,
|
|
2789
2790
|
zIndex,
|
|
2790
2791
|
dialogProps,
|
|
2791
|
-
onVisibilityChange
|
|
2792
|
+
onVisibilityChange,
|
|
2793
|
+
disableBodyScroll,
|
|
2794
|
+
preventCloseOnClick,
|
|
2795
|
+
preventCloseOnEscape
|
|
2792
2796
|
} = props,
|
|
2793
2797
|
forwardedProps = _objectWithoutProperties(props, _excluded$h);
|
|
2794
2798
|
|
|
@@ -2805,9 +2809,10 @@ const Dialog = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
2805
2809
|
}
|
|
2806
2810
|
}
|
|
2807
2811
|
}, [isOpen, parentElement]);
|
|
2812
|
+
const shouldPreventCloseOnEscape = preventAutoClose || preventCloseOnEscape;
|
|
2808
2813
|
|
|
2809
2814
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
2810
|
-
useCallbackOnEscape(onClose, isOpen && !
|
|
2815
|
+
useCallbackOnEscape(onClose, isOpen && !shouldPreventCloseOnEscape);
|
|
2811
2816
|
|
|
2812
2817
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
2813
2818
|
const wrapperRef = useRef(null);
|
|
@@ -2822,7 +2827,7 @@ const Dialog = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
2822
2827
|
useFocusTrap(isOpen && wrapperRef.current, focusElement === null || focusElement === void 0 ? void 0 : focusElement.current);
|
|
2823
2828
|
|
|
2824
2829
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
2825
|
-
useDisableBodyScroll(isOpen && localContentRef.current);
|
|
2830
|
+
useDisableBodyScroll(disableBodyScroll && isOpen && localContentRef.current);
|
|
2826
2831
|
|
|
2827
2832
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
2828
2833
|
const [sentinelTop, setSentinelTop] = useState(null);
|
|
@@ -2851,6 +2856,7 @@ const Dialog = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
2851
2856
|
|
|
2852
2857
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
2853
2858
|
const isVisible = useTransitionVisibility(rootRef, Boolean(isOpen), onVisibilityChange);
|
|
2859
|
+
const shouldPreventCloseOnClickAway = preventAutoClose || preventCloseOnClick;
|
|
2854
2860
|
return isOpen || isVisible ? /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", _extends({
|
|
2855
2861
|
ref: mergeRefs(rootRef, ref)
|
|
2856
2862
|
}, forwardedProps, {
|
|
@@ -2871,7 +2877,7 @@ const Dialog = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
2871
2877
|
role: "dialog",
|
|
2872
2878
|
"aria-modal": "true"
|
|
2873
2879
|
}, dialogProps), /*#__PURE__*/React.createElement(ClickAwayProvider, {
|
|
2874
|
-
callback: !
|
|
2880
|
+
callback: !shouldPreventCloseOnClickAway && onClose,
|
|
2875
2881
|
childrenRefs: clickAwayRefs,
|
|
2876
2882
|
parentRef: rootRef
|
|
2877
2883
|
}, /*#__PURE__*/React.createElement("div", {
|