@lumx/react 3.1.4 → 3.1.5

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.1.4",
-        "@lumx/icons": "^3.1.4",
+        "@lumx/core": "^3.1.5",
+        "@lumx/icons": "^3.1.5",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -113,5 +113,5 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "3.1.4"
+    "version": "3.1.5"
 }

package/src/components/alert-dialog/__snapshots__/AlertDialog.test.tsx.snap

@@ -11,6 +11,7 @@ exports[`<AlertDialog> Snapshots and structure should render story 'Default' 1`]
       "role": "alertdialog",
     }
   }
+  disableBodyScroll={true}
   focusElement={
     {
       "current": null,
@@ -84,6 +85,7 @@ exports[`<AlertDialog> Snapshots and structure should render story 'Error' 1`] =
       "role": "alertdialog",
     }
   }
+  disableBodyScroll={true}
   focusElement={
     {
       "current": null,
@@ -157,6 +159,7 @@ exports[`<AlertDialog> Snapshots and structure should render story 'RichDescript
       "role": "alertdialog",
     }
   }
+  disableBodyScroll={true}
   focusElement={
     {
       "current": null,
@@ -243,6 +246,7 @@ exports[`<AlertDialog> Snapshots and structure should render story 'Success' 1`]
       "role": "alertdialog",
     }
   }
+  disableBodyScroll={true}
   focusElement={
     {
       "current": null,
@@ -316,6 +320,7 @@ exports[`<AlertDialog> Snapshots and structure should render story 'Warning' 1`]
       "role": "alertdialog",
     }
   }
+  disableBodyScroll={true}
   focusElement={
     {
       "current": null,
@@ -389,6 +394,7 @@ exports[`<AlertDialog> Snapshots and structure should render story 'WithCancel'
       "role": "alertdialog",
     }
   }
+  disableBodyScroll={true}
   focusElement={
     {
       "current": null,
@@ -470,6 +476,7 @@ exports[`<AlertDialog> Snapshots and structure should render story 'WithForwarde
       "role": "alertdialog",
     }
   }
+  disableBodyScroll={true}
   focusElement={
     {
       "current": null,

package/src/components/dialog/Dialog.stories.tsx

@@ -72,6 +72,18 @@ export const SimpleDialog = ({ theme }: any) => {
     );
 };
 
+export const WithBodyScroll = ({ theme }: any) => {
+    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
+    return (
+        <>
+            {button}
+            <Dialog isOpen={isOpen} onClose={closeDialog} parentElement={buttonRef} disableBodyScroll={false}>
+                {content}
+            </Dialog>
+        </>
+    );
+};
+
 export const PreventDialogAutoClose = ({ theme }: any) => {
     const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
     return (
@@ -93,6 +105,48 @@ export const PreventDialogAutoClose = ({ theme }: any) => {
     );
 };
 
+export const PreventDialogCloseOnEscape = ({ theme }: any) => {
+    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
+    return (
+        <>
+            {button}
+            <Dialog preventCloseOnEscape isOpen={isOpen} onClose={closeDialog} parentElement={buttonRef}>
+                {content}
+                <footer>
+                    <Toolbar
+                        after={
+                            <Button onClick={closeDialog} emphasis={Emphasis.low}>
+                                Close
+                            </Button>
+                        }
+                    />
+                </footer>
+            </Dialog>
+        </>
+    );
+};
+
+export const PreventDialogCloseOnClick = ({ theme }: any) => {
+    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
+    return (
+        <>
+            {button}
+            <Dialog preventCloseOnClick isOpen={isOpen} onClose={closeDialog} parentElement={buttonRef}>
+                {content}
+                <footer>
+                    <Toolbar
+                        after={
+                            <Button onClick={closeDialog} emphasis={Emphasis.low}>
+                                Close
+                            </Button>
+                        }
+                    />
+                </footer>
+            </Dialog>
+        </>
+    );
+};
+
 export const DialogWithAlertDialog = ({ theme }: any) => {
     const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
     const { openDialog: openAlertDialog, closeDialog: closeAlertDialog, isOpen: isAlertDialogOpen } = useOpenButton(

package/src/components/dialog/Dialog.test.tsx

@@ -76,6 +76,14 @@ describe(`<${Dialog.displayName}>`, () => {
             document.body.dispatchEvent(keyDown('Escape'));
             expect(onClose).not.toHaveBeenCalled();
         });
+
+        it('should not trigger `onClose` when pressing `escape` key with `preventCloseOnEscape` set to `true`', () => {
+            const onClose = jest.fn();
+            setup({ isOpen: true, onClose, preventCloseOnEscape: true }, false);
+
+            document.body.dispatchEvent(keyDown('Escape'));
+            expect(onClose).not.toHaveBeenCalled();
+        });
     });
 
     // 4. Test conditions (i.e. things that display or not in the UI based on props).

package/src/components/dialog/Dialog.tsx

@@ -43,6 +43,10 @@ export interface DialogProps extends GenericProps {
     focusElement?: RefObject<HTMLElement>;
     /** Whether to keep the dialog open on clickaway or escape press. */
     preventAutoClose?: boolean;
+    /** Whether to keep the dialog open on escape press. */
+    preventCloseOnEscape?: boolean;
+    /** Whether to keep the dialog open on clickaway. */
+    preventCloseOnClick?: boolean;
     /** Size variant. */
     size?: DialogSizes;
     /** Z-axis position. */
@@ -53,6 +57,8 @@ export interface DialogProps extends GenericProps {
     onClose?(): void;
     /** Callback called when the open animation starts and the close animation finishes. */
     onVisibilityChange?(isVisible: boolean): void;
+    /** whether to disable the scroll on the body or not */
+    disableBodyScroll?: boolean;
 }
 
 export type DialogSizes = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
@@ -75,6 +81,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 const DEFAULT_PROPS: Partial<DialogProps> = {
     size: Size.big,
+    disableBodyScroll: true,
 };
 
 /**
@@ -108,6 +115,9 @@ export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref)
         zIndex,
         dialogProps,
         onVisibilityChange,
+        disableBodyScroll,
+        preventCloseOnClick,
+        preventCloseOnEscape,
         ...forwardedProps
     } = props;
 
@@ -125,8 +135,10 @@ export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref)
         }
     }, [isOpen, parentElement]);
 
+    const shouldPreventCloseOnEscape = preventAutoClose || preventCloseOnEscape;
+
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useCallbackOnEscape(onClose, isOpen && !preventAutoClose);
+    useCallbackOnEscape(onClose, isOpen && !shouldPreventCloseOnEscape);
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const wrapperRef = useRef<HTMLDivElement>(null);
@@ -141,7 +153,7 @@ export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref)
     useFocusTrap(isOpen && wrapperRef.current, focusElement?.current);
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useDisableBodyScroll(isOpen && localContentRef.current);
+    useDisableBodyScroll(disableBodyScroll && isOpen && localContentRef.current);
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const [sentinelTop, setSentinelTop] = useState<Element | null>(null);
@@ -175,6 +187,8 @@ export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref)
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const isVisible = useTransitionVisibility(rootRef, Boolean(isOpen), onVisibilityChange);
 
+    const shouldPreventCloseOnClickAway = preventAutoClose || preventCloseOnClick;
+
     return isOpen || isVisible
         ? createPortal(
               <div
@@ -196,7 +210,7 @@ export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref)
 
                   <section className={`${CLASSNAME}__container`} role="dialog" aria-modal="true" {...dialogProps}>
                       <ClickAwayProvider
-                          callback={!preventAutoClose && onClose}
+                          callback={!shouldPreventCloseOnClickAway && onClose}
                           childrenRefs={clickAwayRefs}
                           parentRef={rootRef}
                       >

package/src/components/dialog/__snapshots__/Dialog.test.tsx.snap

@@ -11,6 +11,7 @@ exports[`<Dialog> Snapshots and structure should render story DialogFocusTrap 1`
     Open dialog
   </Button>
   <Dialog
+    disableBodyScroll={true}
     focusElement={
       {
         "current": null,
@@ -96,6 +97,7 @@ exports[`<Dialog> Snapshots and structure should render story DialogFocusTrap 1`
           Open date picker
         </Button>
         <Dialog
+          disableBodyScroll={true}
           isOpen={false}
           onClose={[Function]}
           parentElement={
@@ -242,6 +244,7 @@ exports[`<Dialog> Snapshots and structure should render story DialogWithAlertDia
     Open dialog
   </Button>
   <Dialog
+    disableBodyScroll={true}
     isOpen={true}
     onClose={[Function]}
     parentElement={
@@ -318,6 +321,7 @@ exports[`<Dialog> Snapshots and structure should render story DialogWithHeaderFo
     Open dialog
   </Button>
   <Dialog
+    disableBodyScroll={true}
     forceFooterDivider={true}
     forceHeaderDivider={true}
     isOpen={true}
@@ -372,6 +376,7 @@ exports[`<Dialog> Snapshots and structure should render story DialogWithHeaderFo
     Open dialog
   </Button>
   <Dialog
+    disableBodyScroll={true}
     isOpen={true}
     onClose={[Function]}
     parentElement={
@@ -424,6 +429,7 @@ exports[`<Dialog> Snapshots and structure should render story DialogWithHeaderFo
     Open dialog
   </Button>
   <Dialog
+    disableBodyScroll={true}
     footer="Footer prop"
     header="Header prop"
     isOpen={true}
@@ -468,6 +474,7 @@ exports[`<Dialog> Snapshots and structure should render story DialogWithHeaderFo
     Open dialog
   </Button>
   <Dialog
+    disableBodyScroll={true}
     footer=" Footer prop"
     header=" Header prop"
     isOpen={true}
@@ -522,6 +529,7 @@ exports[`<Dialog> Snapshots and structure should render story LoadingDialog 1`]
     Open dialog
   </Button>
   <Dialog
+    disableBodyScroll={true}
     isLoading={true}
     isOpen={true}
     onClose={[Function]}
@@ -565,6 +573,7 @@ exports[`<Dialog> Snapshots and structure should render story PreventDialogAutoC
     Open dialog
   </Button>
   <Dialog
+    disableBodyScroll={true}
     isOpen={true}
     onClose={[Function]}
     parentElement={
@@ -611,6 +620,122 @@ tertiam. Cras mattis iudicium purus sit amet fermentum
 </Fragment>
 `;
 
+exports[`<Dialog> Snapshots and structure should render story PreventDialogCloseOnClick 1`] = `
+<Fragment>
+  <Button
+    emphasis="high"
+    onClick={[Function]}
+    size="m"
+    theme="light"
+  >
+    Open dialog
+  </Button>
+  <Dialog
+    disableBodyScroll={true}
+    isOpen={true}
+    onClose={[Function]}
+    parentElement={
+      {
+        "current": undefined,
+      }
+    }
+    preventCloseOnClick={true}
+    size="big"
+  >
+    <div
+      className="lumx-spacing-padding"
+    >
+      
+Nihil hic munitissimus habendi senatus locus, nihil horum? At nos hinc posthac, sitientis piros
+Afros. Magna pars studiorum, prodita quaerimus. Integer legentibus erat a ante historiarum
+dapibus. Praeterea iter est quasdam res quas ex communi. Ullamco laboris nisi ut aliquid ex ea
+commodi consequat. Inmensae subtilitatis, obscuris et malesuada fames. Me non paenitet nullum
+festiviorem excogitasse ad hoc. Cum ceteris in veneratione tui montes, nascetur mus. Etiam
+habebis sem dicantur magna mollis euismod. Quis aute iure reprehenderit in voluptate velit esse.
+Phasellus laoreet lorem vel dolor tempus vehicula. Ambitioni dedisse scripsisse iudicaretur.
+Paullum deliquit, ponderibus modulisque suis ratio utitur. Ab illo tempore, ab est sed
+immemorabili. Nec dubitamus multa iter quae et nos invenerat. Tu quoque, Brute, fili mi, nihil
+timor populi, nihil! Morbi fringilla convallis sapien, id pulvinar odio volutpat. Cras mattis
+iudicium purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
+Quisque ut dolor gravida, placerat libero vel, euismod. Unam incolunt Belgae, aliam Aquitani,
+tertiam. Cras mattis iudicium purus sit amet fermentum
+    </div>
+    <footer>
+      <Toolbar
+        after={
+          <Button
+            emphasis="low"
+            onClick={[Function]}
+            size="m"
+            theme="light"
+          >
+            Close
+          </Button>
+        }
+      />
+    </footer>
+  </Dialog>
+</Fragment>
+`;
+
+exports[`<Dialog> Snapshots and structure should render story PreventDialogCloseOnEscape 1`] = `
+<Fragment>
+  <Button
+    emphasis="high"
+    onClick={[Function]}
+    size="m"
+    theme="light"
+  >
+    Open dialog
+  </Button>
+  <Dialog
+    disableBodyScroll={true}
+    isOpen={true}
+    onClose={[Function]}
+    parentElement={
+      {
+        "current": undefined,
+      }
+    }
+    preventCloseOnEscape={true}
+    size="big"
+  >
+    <div
+      className="lumx-spacing-padding"
+    >
+      
+Nihil hic munitissimus habendi senatus locus, nihil horum? At nos hinc posthac, sitientis piros
+Afros. Magna pars studiorum, prodita quaerimus. Integer legentibus erat a ante historiarum
+dapibus. Praeterea iter est quasdam res quas ex communi. Ullamco laboris nisi ut aliquid ex ea
+commodi consequat. Inmensae subtilitatis, obscuris et malesuada fames. Me non paenitet nullum
+festiviorem excogitasse ad hoc. Cum ceteris in veneratione tui montes, nascetur mus. Etiam
+habebis sem dicantur magna mollis euismod. Quis aute iure reprehenderit in voluptate velit esse.
+Phasellus laoreet lorem vel dolor tempus vehicula. Ambitioni dedisse scripsisse iudicaretur.
+Paullum deliquit, ponderibus modulisque suis ratio utitur. Ab illo tempore, ab est sed
+immemorabili. Nec dubitamus multa iter quae et nos invenerat. Tu quoque, Brute, fili mi, nihil
+timor populi, nihil! Morbi fringilla convallis sapien, id pulvinar odio volutpat. Cras mattis
+iudicium purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
+Quisque ut dolor gravida, placerat libero vel, euismod. Unam incolunt Belgae, aliam Aquitani,
+tertiam. Cras mattis iudicium purus sit amet fermentum
+    </div>
+    <footer>
+      <Toolbar
+        after={
+          <Button
+            emphasis="low"
+            onClick={[Function]}
+            size="m"
+            theme="light"
+          >
+            Close
+          </Button>
+        }
+      />
+    </footer>
+  </Dialog>
+</Fragment>
+`;
+
 exports[`<Dialog> Snapshots and structure should render story ScrollableDialog 1`] = `
 <Fragment>
   <Button
@@ -622,6 +747,7 @@ exports[`<Dialog> Snapshots and structure should render story ScrollableDialog 1
     Open dialog
   </Button>
   <Dialog
+    disableBodyScroll={true}
     isOpen={true}
     onClose={[Function]}
     parentElement={
@@ -706,6 +832,7 @@ exports[`<Dialog> Snapshots and structure should render story ScrollableDialogWi
     Open dialog
   </Button>
   <Dialog
+    disableBodyScroll={true}
     isOpen={true}
     onClose={[Function]}
     parentElement={
@@ -800,6 +927,7 @@ exports[`<Dialog> Snapshots and structure should render story SimpleDialog 1`] =
     Open dialog
   </Button>
   <Dialog
+    disableBodyScroll={true}
     isOpen={true}
     onClose={[Function]}
     parentElement={
@@ -843,6 +971,7 @@ exports[`<Dialog> Snapshots and structure should render story Sizes 1`] = `
   </Button>
   Use the knobs to change the dialog size!
   <Dialog
+    disableBodyScroll={true}
     isOpen={true}
     onClose={[Function]}
     parentElement={
@@ -927,6 +1056,7 @@ exports[`<Dialog> Snapshots and structure should render story WithAnimationCallb
     Open dialog
   </Button>
   <Dialog
+    disableBodyScroll={true}
     isOpen={true}
     onClose={[Function]}
     onVisibilityChange={[Function]}
@@ -958,3 +1088,46 @@ tertiam. Cras mattis iudicium purus sit amet fermentum
   </Dialog>
 </Fragment>
 `;
+
+exports[`<Dialog> Snapshots and structure should render story WithBodyScroll 1`] = `
+<Fragment>
+  <Button
+    emphasis="high"
+    onClick={[Function]}
+    size="m"
+    theme="light"
+  >
+    Open dialog
+  </Button>
+  <Dialog
+    disableBodyScroll={false}
+    isOpen={true}
+    onClose={[Function]}
+    parentElement={
+      {
+        "current": undefined,
+      }
+    }
+    size="big"
+  >
+    <div
+      className="lumx-spacing-padding"
+    >
+      
+Nihil hic munitissimus habendi senatus locus, nihil horum? At nos hinc posthac, sitientis piros
+Afros. Magna pars studiorum, prodita quaerimus. Integer legentibus erat a ante historiarum
+dapibus. Praeterea iter est quasdam res quas ex communi. Ullamco laboris nisi ut aliquid ex ea
+commodi consequat. Inmensae subtilitatis, obscuris et malesuada fames. Me non paenitet nullum
+festiviorem excogitasse ad hoc. Cum ceteris in veneratione tui montes, nascetur mus. Etiam
+habebis sem dicantur magna mollis euismod. Quis aute iure reprehenderit in voluptate velit esse.
+Phasellus laoreet lorem vel dolor tempus vehicula. Ambitioni dedisse scripsisse iudicaretur.
+Paullum deliquit, ponderibus modulisque suis ratio utitur. Ab illo tempore, ab est sed
+immemorabili. Nec dubitamus multa iter quae et nos invenerat. Tu quoque, Brute, fili mi, nihil
+timor populi, nihil! Morbi fringilla convallis sapien, id pulvinar odio volutpat. Cras mattis
+iudicium purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
+Quisque ut dolor gravida, placerat libero vel, euismod. Unam incolunt Belgae, aliam Aquitani,
+tertiam. Cras mattis iudicium purus sit amet fermentum
+    </div>
+  </Dialog>
+</Fragment>
+`;