@lumx/react 2.0.0-alpha.0 → 2.0.1

package/src/components/dialog/Dialog.tsx

@@ -54,6 +54,8 @@ export interface DialogProps extends GenericProps {
     dialogProps?: GenericProps;
     /** On close callback. */
     onClose?(): void;
+    /** Callback called when the open animation starts and the close animation finishes. */
+    onVisibilityChange?(isVisible: boolean): void;
 }
 
 export type DialogSizes = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
@@ -108,6 +110,7 @@ export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref)
         size,
         zIndex,
         dialogProps,
+        onVisibilityChange,
         ...forwardedProps
     } = props;
 
@@ -158,7 +161,10 @@ export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref)
     const footerChildContent = footerChildProps?.children;
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const isVisible = useDelayedVisibility(Boolean(isOpen), DIALOG_TRANSITION_DURATION);
+    const isVisible = useDelayedVisibility(Boolean(isOpen), DIALOG_TRANSITION_DURATION, onVisibilityChange);
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const clickAwayRefs = useRef([wrapperRef]);
 
     return isOpen || isVisible
         ? createPortal(
@@ -180,7 +186,7 @@ export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref)
                   <div className={`${CLASSNAME}__overlay`} />
 
                   <section className={`${CLASSNAME}__container`} role="dialog" aria-modal="true" {...dialogProps}>
-                      <ClickAwayProvider callback={!preventAutoClose && handleClose} refs={[wrapperRef]}>
+                      <ClickAwayProvider callback={!preventAutoClose && handleClose} refs={clickAwayRefs}>
                           <div className={`${CLASSNAME}__wrapper`} ref={wrapperRef}>
                               {(header || headerChildContent) && (
                                   <header

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

@@ -75,44 +75,65 @@ exports[`<Dialog> Snapshots and structure should render story DialogWithFocusabl
         onChange={[Function]}
         theme="light"
       />
-      <Select
-        className="lumx-spacing-margin-bottom-huge"
-        isOpen={false}
-        label="Select label"
-        onDropdownClose={[Function]}
-        onInputClick={[Function]}
-        selectedValueRender={[Function]}
-        value=""
+      <FlexBox
+        orientation="horizontal"
       >
-        <List
-          isClickable={true}
+        <DatePickerField
+          label="Start date"
+          locale="fr"
+          nextButtonProps={
+            Object {
+              "label": "Next month",
+            }
+          }
+          onChange={[Function]}
+          placeholder="Pick a date"
+          previousButtonProps={
+            Object {
+              "label": "Previous month",
+            }
+          }
+          value={2020-05-18T00:00:00.000Z}
+        />
+        <Select
+          className="lumx-spacing-margin-left-huge"
+          isOpen={false}
+          label="Select label"
+          onDropdownClose={[Function]}
+          onInputClick={[Function]}
+          selectedValueRender={[Function]}
+          value="First item"
         >
-          <ListItem
-            isSelected={false}
-            key="First item"
-            onItemSelected={[Function]}
-            size="tiny"
+          <List
+            isClickable={true}
           >
-            First item
-          </ListItem>
-          <ListItem
-            isSelected={false}
-            key="Second item"
-            onItemSelected={[Function]}
-            size="tiny"
-          >
-            Second item
-          </ListItem>
-          <ListItem
-            isSelected={false}
-            key="Third item"
-            onItemSelected={[Function]}
-            size="tiny"
-          >
-            Third item
-          </ListItem>
-        </List>
-      </Select>
+            <ListItem
+              isSelected={true}
+              key="First item"
+              onItemSelected={[Function]}
+              size="tiny"
+            >
+              First item
+            </ListItem>
+            <ListItem
+              isSelected={false}
+              key="Second item"
+              onItemSelected={[Function]}
+              size="tiny"
+            >
+              Second item
+            </ListItem>
+            <ListItem
+              isSelected={false}
+              key="Third item"
+              onItemSelected={[Function]}
+              size="tiny"
+            >
+              Third item
+            </ListItem>
+          </List>
+        </Select>
+      </FlexBox>
       <div
         tabIndex={0}
       >
@@ -731,3 +752,46 @@ Aquitani, tertiam.
   </Dialog>
 </Fragment>
 `;
+
+exports[`<Dialog> Snapshots and structure should render story WithAnimationCallbacks 1`] = `
+<Fragment>
+  <Button
+    emphasis="high"
+    onClick={[Function]}
+    size="m"
+    theme="light"
+  >
+    Open dialog
+  </Button>
+  <Dialog
+    isOpen={true}
+    onClose={[Function]}
+    onVisibilityChange={[Function]}
+    parentElement={
+      Object {
+        "current": undefined,
+      }
+    }
+    size="regular"
+  >
+    <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>
+`;

package/src/components/icon/Icon.tsx

@@ -92,6 +92,7 @@ export const Icon: Comp<IconProps, HTMLElement> = forwardRef((props, ref) => {
                     size: iconSize,
                 }),
                 !hasShape && `${CLASSNAME}--no-shape`,
+                `${CLASSNAME}--path`,
             )}
         >
             <svg

package/src/components/icon/__snapshots__/Icon.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<Icon> Snapshots and structure should render color & color variant 1`] = `
 <i
-  className="lumx-icon lumx-icon--color-primary lumx-icon--color-variant-D1 lumx-icon--no-shape"
+  className="lumx-icon lumx-icon--color-primary lumx-icon--color-variant-D1 lumx-icon--no-shape lumx-icon--path"
 >
   <svg
     aria-hidden="true"
@@ -26,7 +26,7 @@ exports[`<Icon> Snapshots and structure should render color & color variant 1`]
 
 exports[`<Icon> Snapshots and structure should render correctly 1`] = `
 <i
-  className="lumx-icon lumx-icon--no-shape"
+  className="lumx-icon lumx-icon--no-shape lumx-icon--path"
 >
   <svg
     aria-hidden="true"

package/src/components/lightbox/Lightbox.tsx

@@ -98,6 +98,9 @@ export const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props,
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useCallbackOnEscape(onClose);
 
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const clickAwayRefs = useRef([wrapperRef]);
+
     if (!isOpen && !isVisible) return null;
 
     return createPortal(
@@ -130,7 +133,7 @@ export const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props,
                     onClick={onClose}
                 />
             )}
-            <ClickAwayProvider callback={!preventAutoClose && onClose} refs={[wrapperRef]}>
+            <ClickAwayProvider callback={!preventAutoClose && onClose} refs={clickAwayRefs}>
                 <div ref={childrenRef} className={`${CLASSNAME}__wrapper`} role="presentation">
                     {children}
                 </div>

package/src/components/lightbox/__snapshots__/Lightbox.test.tsx.snap

@@ -27,11 +27,13 @@ exports[`<Lightbox> Snapshots and structure should render story 'Default' 1`] =
     <ClickAwayProvider
       callback={[Function]}
       refs={
-        Array [
-          Object {
-            "current": null,
-          },
-        ]
+        Object {
+          "current": Array [
+            Object {
+              "current": null,
+            },
+          ],
+        }
       }
     >
       <div

package/src/components/message/Message.stories.tsx

@@ -2,6 +2,7 @@ import { Kind, Message } from '@lumx/react';
 import { boolean, text } from '@storybook/addon-knobs';
 import React from 'react';
 import { enumKnob } from '@lumx/react/stories/knobs/enumKnob';
+import { mdiDelete } from '@lumx/icons/';
 
 export default { title: 'LumX components/message/Message' };
 
@@ -17,3 +18,10 @@ export const Default = () => (
         )}
     </Message>
 );
+
+export const CustomIcon = () => (
+    <Message icon={mdiDelete} kind="info" hasBackground>
+        Lorem ipsum quisque tincidunt lobortis dui non auctor.Donec porta, ligula volutpat vehicula aliquet, dui sapien
+        tempus felis, sed.
+    </Message>
+);

package/src/components/message/Message.tsx

@@ -14,6 +14,8 @@ export interface MessageProps extends GenericProps {
     hasBackground?: boolean;
     /** Message variant. */
     kind?: Kind;
+    /** Message custom icon SVG path. */
+    icon?: string;
 }
 
 /**
@@ -44,7 +46,7 @@ const CONFIG = {
  * @return React element.
  */
 export const Message: Comp<MessageProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { children, className, hasBackground, kind, ...forwardedProps } = props;
+    const { children, className, hasBackground, kind, icon: customIcon, ...forwardedProps } = props;
     const { color, icon } = CONFIG[kind as Kind] || {};
 
     return (
@@ -60,7 +62,7 @@ export const Message: Comp<MessageProps, HTMLDivElement> = forwardRef((props, re
             )}
             {...forwardedProps}
         >
-            {icon && <Icon className="lumx-message__icon" icon={icon} size={Size.xs} />}
+            {(customIcon || icon) && <Icon className="lumx-message__icon" icon={customIcon || icon} size={Size.xs} />}
             <div className="lumx-message__text">{children}</div>
         </div>
     );

package/src/components/popover/Popover.tsx

@@ -270,6 +270,9 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useFocus(focusElement?.current, isOpen && (state?.rects?.popper?.y ?? -1) >= 0);
 
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const clickAwayRefs = useRef([clickAwayRef, anchorRef]);
+
     return isOpen
         ? renderPopover(
               <div
@@ -282,7 +285,7 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
                   style={popoverStyle}
                   {...attributes.popper}
               >
-                  <ClickAwayProvider callback={closeOnClickAway && onClose} refs={[clickAwayRef, anchorRef]}>
+                  <ClickAwayProvider callback={closeOnClickAway && onClose} refs={clickAwayRefs}>
                       {hasArrow && <div ref={setArrowElement} className={`${CLASSNAME}__arrow`} style={styles.arrow} />}
                       {children}
                   </ClickAwayProvider>

package/src/components/popover/__snapshots__/Popover.test.tsx.snap

@@ -18,14 +18,16 @@ Array [
     >
       <ClickAwayProvider
         refs={
-          Array [
-            Object {
-              "current": null,
-            },
-            Object {
-              "current": null,
-            },
-          ]
+          Object {
+            "current": Array [
+              Object {
+                "current": null,
+              },
+              Object {
+                "current": null,
+              },
+            ],
+          }
         }
       >
         Popover aligned on start of the top side
@@ -48,14 +50,16 @@ Array [
     >
       <ClickAwayProvider
         refs={
-          Array [
-            Object {
-              "current": null,
-            },
-            Object {
-              "current": null,
-            },
-          ]
+          Object {
+            "current": Array [
+              Object {
+                "current": null,
+              },
+              Object {
+                "current": null,
+              },
+            ],
+          }
         }
       >
         Popover aligned on start of the top side
@@ -82,14 +86,16 @@ exports[`<Popover> Snapshots and structure should render story 'Auto' 1`] = `
   >
     <ClickAwayProvider
       refs={
-        Array [
-          Object {
-            "current": null,
-          },
-          Object {
-            "current": null,
-          },
-        ]
+        Object {
+          "current": Array [
+            Object {
+              "current": null,
+            },
+            Object {
+              "current": null,
+            },
+          ],
+        }
       }
     >
       Popover
@@ -115,14 +121,16 @@ exports[`<Popover> Snapshots and structure should render story 'Default' 1`] = `
   >
     <ClickAwayProvider
       refs={
-        Array [
-          Object {
-            "current": null,
-          },
-          Object {
-            "current": null,
-          },
-        ]
+        Object {
+          "current": Array [
+            Object {
+              "current": null,
+            },
+            Object {
+              "current": null,
+            },
+          ],
+        }
       }
     >
       Popover
@@ -148,14 +156,16 @@ exports[`<Popover> Snapshots and structure should render story 'MatchingWidth' 1
   >
     <ClickAwayProvider
       refs={
-        Array [
-          Object {
-            "current": null,
-          },
-          Object {
-            "current": null,
-          },
-        ]
+        Object {
+          "current": Array [
+            Object {
+              "current": null,
+            },
+            Object {
+              "current": null,
+            },
+          ],
+        }
       }
     >
       Popover's width matching anchor's
@@ -181,14 +191,16 @@ exports[`<Popover> Snapshots and structure should render story 'Offset' 1`] = `
   >
     <ClickAwayProvider
       refs={
-        Array [
-          Object {
-            "current": null,
-          },
-          Object {
-            "current": null,
-          },
-        ]
+        Object {
+          "current": Array [
+            Object {
+              "current": null,
+            },
+            Object {
+              "current": null,
+            },
+          ],
+        }
       }
     >
       Popover
@@ -215,14 +227,16 @@ Array [
     >
       <ClickAwayProvider
         refs={
-          Array [
-            Object {
-              "current": null,
-            },
-            Object {
-              "current": null,
-            },
-          ]
+          Object {
+            "current": Array [
+              Object {
+                "current": null,
+              },
+              Object {
+                "current": null,
+              },
+            ],
+          }
         }
       >
         Popover
@@ -245,14 +259,16 @@ Array [
     >
       <ClickAwayProvider
         refs={
-          Array [
-            Object {
-              "current": null,
-            },
-            Object {
-              "current": null,
-            },
-          ]
+          Object {
+            "current": Array [
+              Object {
+                "current": null,
+              },
+              Object {
+                "current": null,
+              },
+            ],
+          }
         }
       >
         Popover
@@ -275,14 +291,16 @@ Array [
     >
       <ClickAwayProvider
         refs={
-          Array [
-            Object {
-              "current": null,
-            },
-            Object {
-              "current": null,
-            },
-          ]
+          Object {
+            "current": Array [
+              Object {
+                "current": null,
+              },
+              Object {
+                "current": null,
+              },
+            ],
+          }
         }
       >
         Popover
@@ -305,14 +323,16 @@ Array [
     >
       <ClickAwayProvider
         refs={
-          Array [
-            Object {
-              "current": null,
-            },
-            Object {
-              "current": null,
-            },
-          ]
+          Object {
+            "current": Array [
+              Object {
+                "current": null,
+              },
+              Object {
+                "current": null,
+              },
+            ],
+          }
         }
       >
         Popover