@lumx/react 3.6.2 → 3.6.3-alpha.1

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.6.2",
-        "@lumx/icons": "^3.6.2",
+        "@lumx/core": "^3.6.3-alpha.1",
+        "@lumx/icons": "^3.6.3-alpha.1",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -72,8 +72,7 @@
         "typescript": "^4.1.2",
         "vite": "^4.2.1",
         "vite-tsconfig-paths": "^4.0.7",
-        "yargs": "^15.4.1",
-        "yarn": "^1.19.1"
+        "yargs": "^15.4.1"
     },
     "peerDependencies": {
         "lodash": "4.17.21",
@@ -113,5 +112,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.6.2"
+    "version": "3.6.3-alpha.1"
 }

package/src/components/notification/Notification.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Kind } from '@lumx/react';
-import { render, within } from '@testing-library/react';
+import { render, within, screen } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import userEvent from '@testing-library/user-event';
@@ -67,6 +67,18 @@ describe(`<${Notification.displayName}>`, () => {
         expect(onClick).toHaveBeenCalled();
     });
 
+    it('should render outside a portal', () => {
+        const parentId = '123';
+        render(
+            <div data-testid={parentId}>
+                <Notification isOpen type="info" usePortal={false} />
+            </div>,
+        );
+        const parent = screen.getByTestId(parentId);
+        const notification = queryByClassName(parent, CLASSNAME);
+        expect(notification).toBeInTheDocument();
+    });
+
     // Common tests suite.
     commonTestsSuiteRTL(setup, {
         baseClassName: CLASSNAME,

package/src/components/notification/Notification.tsx

@@ -33,6 +33,8 @@ export interface NotificationProps extends GenericProps, HasTheme {
     onActionClick?(): void;
     /** On click callback. */
     onClick?(): void;
+    /** Whether the notification should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */
+    usePortal?: boolean;
 }
 
 /**
@@ -51,6 +53,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 const DEFAULT_PROPS: Partial<NotificationProps> = {
     theme: Theme.light,
     zIndex: 9999,
+    usePortal: true,
 };
 
 /* eslint-disable react-hooks/rules-of-hooks, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
@@ -72,6 +75,7 @@ export const Notification: Comp<NotificationProps, HTMLDivElement> = forwardRef(
         theme,
         type,
         zIndex,
+        usePortal,
         ...forwardedProps
     } = props;
     if (!DOCUMENT) {
@@ -90,40 +94,43 @@ export const Notification: Comp<NotificationProps, HTMLDivElement> = forwardRef(
         evt.stopPropagation();
     };
 
-    return type && isVisible
-        ? createPortal(
-              // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-              <div
-                  ref={mergeRefs(ref, rootRef)}
-                  role="alert"
-                  {...forwardedProps}
-                  className={classNames(
-                      className,
-                      handleBasicClasses({
-                          color,
-                          hasAction,
-                          isHidden: !isOpen,
-                          prefix: CLASSNAME,
-                      }),
-                  )}
-                  onClick={onClick}
-                  style={{ zIndex }}
-              >
-                  <div className={`${CLASSNAME}__icon`}>
-                      <Icon icon={icon} size={Size.s} />
-                  </div>
-                  <div className={`${CLASSNAME}__content`}>{content}</div>
-                  {hasAction && (
-                      <div className={`${CLASSNAME}__action`}>
-                          <Button emphasis={Emphasis.medium} theme={theme} onClick={handleCallback}>
-                              <span>{actionLabel}</span>
-                          </Button>
-                      </div>
-                  )}
-              </div>,
-              document.body,
-          )
-        : null;
+    if (!type || !isVisible) {
+        return null;
+    }
+
+    const notification = (
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+        <div
+            ref={mergeRefs(ref, rootRef)}
+            role="alert"
+            {...forwardedProps}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    color,
+                    hasAction,
+                    isHidden: !isOpen,
+                    prefix: CLASSNAME,
+                }),
+            )}
+            onClick={onClick}
+            style={{ zIndex }}
+        >
+            <div className={`${CLASSNAME}__icon`}>
+                <Icon icon={icon} size={Size.s} />
+            </div>
+            <div className={`${CLASSNAME}__content`}>{content}</div>
+            {hasAction && (
+                <div className={`${CLASSNAME}__action`}>
+                    <Button emphasis={Emphasis.medium} theme={theme} onClick={handleCallback}>
+                        <span>{actionLabel}</span>
+                    </Button>
+                </div>
+            )}
+        </div>
+    );
+
+    return usePortal ? createPortal(notification, document.body) : notification;
 });
 Notification.displayName = COMPONENT_NAME;
 Notification.className = CLASSNAME;

package/src/components/notification/Notifications.stories.tsx

@@ -80,3 +80,13 @@ export const InfoWithAction = {
         isOpen: true,
     },
 };
+
+/**
+ * Info notification rendered outside a React portal
+ */
+export const InfoWithoutPortal = {
+    args: {
+        ...Info.args,
+        usePortal: false,
+    },
+};

package/src/components/popover/Popover.stories.tsx

@@ -29,6 +29,12 @@ export default {
         hasArrow: { control: 'boolean' },
         placement: getSelectArgType(Placement),
         elevation: getSelectArgType<Elevation>([1, 2, 3, 4, 5]),
+        ref: { control: false },
+        parentElement: { control: false },
+        focusElement: { control: false },
+        anchorRef: { control: false },
+        boundaryRef: { control: false },
+        children: { control: false },
     },
     decorators: [
         // Force minimum chromatic screen size to make sure the dialog appears in view.
@@ -60,6 +66,22 @@ export const Simple = {
     },
 };
 
+/**
+ * Dark theme
+ */
+export const DarkTheme = {
+    ...Simple,
+    args: {
+        theme: 'dark',
+        children: (
+            <Text as="p" color="light" className="lumx-spacing-padding-big">
+                Popover
+            </Text>
+        ),
+        hasArrow: true,
+    },
+};
+
 /**
  * Popover not using React.createPortal
  */

package/src/components/popover/Popover.tsx

@@ -7,7 +7,7 @@ import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
 import { useFocus } from '@lumx/react/hooks/useFocus';
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 import { DOCUMENT } from '@lumx/react/constants';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';
@@ -21,7 +21,7 @@ import { FitAnchorWidth, Elevation, Offset, Placement } from './constants';
 /**
  * Defines the props of the component.
  */
-export interface PopoverProps extends GenericProps {
+export interface PopoverProps extends GenericProps, HasTheme {
     /** Reference to the DOM element used to set the position of the popover. */
     anchorRef: React.RefObject<HTMLElement>;
     /** Customize the root element. (Must accept ref forwarding and props forwarding!). */
@@ -118,6 +118,7 @@ const _InnerPopover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, ref
         offset,
         placement,
         style,
+        theme,
         zIndex,
         ...forwardedProps
     } = props;
@@ -203,13 +204,24 @@ const _InnerPopover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, ref
                   ref={mergeRefs<HTMLDivElement>(setPopperElement, ref, clickAwayRef, contentRef)}
                   className={classNames(
                       className,
-                      handleBasicClasses({ prefix: CLASSNAME, elevation: Math.min(elevation || 0, 5), position }),
+                      handleBasicClasses({
+                          prefix: CLASSNAME,
+                          theme,
+                          elevation: Math.min(elevation || 0, 5),
+                          position,
+                      }),
                   )}
                   style={styles.popover}
                   {...attributes.popper}
               >
                   <ClickAwayProvider callback={closeOnClickAway && handleClose} childrenRefs={clickAwayRefs}>
-                      {hasArrow && <div ref={setArrowElement} className={`${CLASSNAME}__arrow`} style={styles.arrow} />}
+                      {hasArrow && (
+                          <div ref={setArrowElement} className={`${CLASSNAME}__arrow`} style={styles.arrow}>
+                              <svg viewBox="0 0 14 14" aria-hidden>
+                                  <path d="M8 3.49C7.62 2.82 6.66 2.82 6.27 3.48L.04 14 14.04 14 8 3.49Z" />
+                              </svg>
+                          </div>
+                      )}
                       {children}
                   </ClickAwayProvider>
               </Component>,

package/src/components/popover/constants.ts

@@ -54,4 +54,4 @@ export type FitAnchorWidth = ValueOf<typeof FitAnchorWidth>;
 /**
  * Arrow size (in pixel).
  */
-export const ARROW_SIZE = 8;
+export const ARROW_SIZE = 14;

package/src/components/popover/usePopoverStyle.tsx

@@ -120,7 +120,13 @@ export function usePopoverStyle({
         },
     ];
     if (hasArrow && arrowElement) {
-        modifiers.push({ name: 'arrow', options: { element: arrowElement, padding: ARROW_SIZE } });
+        modifiers.push({
+            name: 'arrow',
+            options: {
+                element: arrowElement,
+                padding: ARROW_SIZE / 2,
+            },
+        });
     }
     if (fitToAnchorWidth) {
         const fitWidth = typeof fitToAnchorWidth === 'string' ? fitToAnchorWidth : FitAnchorWidth.MIN_WIDTH;

package/src/stories/controls/selectArgType.ts

@@ -1,4 +1,7 @@
+import isPlainObject from 'lodash/isPlainObject';
+
 export const getSelectArgType = <E>(options: Array<E> | Record<string, E>) => ({
     control: { type: 'select' },
-    options,
+    options: Object.values(options),
+    mapping: isPlainObject(options) ? options : undefined,
 });