@lumx/react 3.1.5 → 3.2.1-alpha.0

package/src/components/navigation/NavigationSection.tsx

@@ -0,0 +1,109 @@
+import React, { forwardRef, ReactNode, useRef, useState, useMemo, useContext } from 'react';
+
+import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
+import { Icon, Size, Text, Orientation, Popover, Placement, Theme } from '@lumx/react';
+import uniqueId from 'lodash/uniqueId';
+import classNames from 'classnames';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { HasClassName } from '@lumx/react/utils/type';
+import { ThemeContext } from '@lumx/react/utils/ThemeContext';
+import { CLASSNAME as ITEM_CLASSNAME } from './NavigationItem';
+import { NavigationContext } from './context';
+
+export interface NavigationSectionProps extends React.ComponentPropsWithoutRef<'li'>, HasClassName {
+    /** Items inside the section */
+    children: ReactNode;
+    /** Icon (SVG path). */
+    icon?: string;
+    /** Label content. */
+    label: string | ReactNode;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'NavigationSection';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+export const NavigationSection = Object.assign(
+    forwardRef<HTMLLIElement, NavigationSectionProps>((props, ref) => {
+        const { children, className, label, icon, ...forwardedProps } = props;
+        const [isOpen, setIsOpen] = useState(false);
+        const buttonRef = useRef<HTMLButtonElement>(null);
+        const sectionId = useMemo(() => uniqueId('section'), []);
+        const { orientation } = useContext(NavigationContext) || {};
+        const theme = useContext(ThemeContext);
+        const isDropdown = orientation === Orientation.horizontal;
+        return (
+            <li
+                className={classNames(
+                    className,
+                    CLASSNAME,
+                    ITEM_CLASSNAME,
+                    handleBasicClasses({
+                        prefix: ITEM_CLASSNAME,
+                        theme,
+                    }),
+                )}
+                ref={ref}
+                {...forwardedProps}
+            >
+                <button
+                    aria-controls={sectionId}
+                    aria-expanded={isOpen}
+                    className={classNames(`${ITEM_CLASSNAME}__link`)}
+                    ref={buttonRef}
+                    onClick={(event) => {
+                        setIsOpen(!isOpen);
+                        event.stopPropagation();
+                    }}
+                    type="button"
+                >
+                    {icon ? <Icon className={`${ITEM_CLASSNAME}__icon`} icon={icon} size={Size.xs} /> : null}
+
+                    <Text as="span" truncate className={`${ITEM_CLASSNAME}__label`} ref={ref}>
+                        {label}
+                    </Text>
+                    <Icon
+                        className={classNames(`${ITEM_CLASSNAME}__icon`, `${CLASSNAME}__chevron`)}
+                        icon={isOpen ? mdiChevronUp : mdiChevronDown}
+                    />
+                </button>
+                {isOpen &&
+                    (isDropdown ? (
+                        <Popover
+                            anchorRef={buttonRef}
+                            isOpen={isOpen}
+                            placement={Placement.BOTTOM_START}
+                            usePortal={false}
+                            closeOnClickAway
+                            closeOnEscape
+                            onClick={() => setIsOpen(false)}
+                            onClose={() => setIsOpen(false)}
+                            zIndex={996}
+                        >
+                            <ThemeContext.Provider value={Theme.light}>
+                                <ul className={`${CLASSNAME}__drawer--popover`} id={sectionId}>
+                                    <NavigationContext.Provider value={{ orientation: Orientation.vertical }}>
+                                        {children}
+                                    </NavigationContext.Provider>
+                                </ul>
+                            </ThemeContext.Provider>
+                        </Popover>
+                    ) : (
+                        <ul className={`${CLASSNAME}__drawer`} id={sectionId}>
+                            {children}
+                        </ul>
+                    ))}
+            </li>
+        );
+    }),
+    {
+        displayName: COMPONENT_NAME,
+        className: CLASSNAME,
+    },
+);

package/src/components/navigation/context.tsx

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+import { Orientation } from '..';
+
+export const NavigationContext = createContext<{ orientation?: Orientation } | undefined>({
+    orientation: Orientation.vertical,
+});

package/src/components/navigation/index.ts

@@ -0,0 +1 @@
+export * from './Navigation';

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

@@ -1,12 +1,16 @@
-import React, { useState } from 'react';
-
-import { Button, Notification, Kind } from '@lumx/react';
+import { Notification, Kind } from '@lumx/react';
 import { NOTIFICATION_TRANSITION_DURATION } from '@lumx/core/js/constants';
-import { action } from '@storybook/addon-actions';
-import { chromaticForceScreenSize } from '../../stories/chromaticForceScreenSize';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { withChromaticForceScreenSize } from '../../stories/decorators/withChromaticForceScreenSize';
 
 export default {
     title: 'LumX components/notification/Notification',
+    component: Notification,
+    args: Notification.defaultProps,
+    argTypes: {
+        type: getSelectArgType(Kind),
+        onClick: { action: true },
+    },
     parameters: {
         // Delay Chromatic snapshot to wait for notification to open.
         chromatic: {
@@ -15,63 +19,64 @@ export default {
         },
     },
     // Force minimum chromatic screen size to make sure the dialog appears in view.
-    decorators: [chromaticForceScreenSize],
+    decorators: [withChromaticForceScreenSize()],
 };
 
-const properties = {
-    error: {
+/**
+ * Error notification
+ */
+export const Error = {
+    args: {
+        type: Kind.error,
         content: 'Error',
-        onClick: action('onClick'),
         isOpen: true,
-        type: Kind.error,
     },
-    info: {
-        content: 'Info',
-        onClick: action('onClick'),
-        isOpen: true,
+};
+
+/**
+ * Info notification
+ */
+export const Info = {
+    args: {
         type: Kind.info,
-    },
-    infoWithCallback: {
-        onActionClick: action('onClick'),
-        actionLabel: 'Undo',
-        content: 'Info with callback',
-        onClick: action('onClick'),
+        content: 'Info',
         isOpen: true,
-        type: Kind.info,
     },
-    success: {
+};
+
+/**
+ * Success notification
+ */
+export const Success = {
+    args: {
+        type: Kind.success,
         content: 'Success',
-        onClick: action('onClick'),
         isOpen: true,
-        type: Kind.success,
     },
+};
 
-    warning: {
+/**
+ * Warning notification
+ */
+export const Warning = {
+    args: {
+        type: Kind.warning,
         content: 'Warning',
-        onClick: action('onClick'),
         isOpen: true,
-        type: Kind.warning,
     },
 };
 
-export const Error = () => <Notification {...properties.error} />;
-
-export const Info = () => <Notification {...properties.info} />;
-
-export const InfoWithCallback = () => <Notification {...properties.infoWithCallback} />;
-
-export const Success = () => <Notification {...properties.success} />;
-
-export const Warning = () => <Notification {...properties.warning} />;
-
-export const OnTrigger = () => {
-    const [isOpen, setIsOpen] = useState(false);
-    const onClick = () => setIsOpen(!isOpen);
-
-    return (
-        <>
-            <Button onClick={onClick}>{!isOpen ? 'Show Notification' : 'Close Notification'}</Button>,
-            <Notification {...properties.error} isOpen={isOpen} />,
-        </>
-    );
+/**
+ * Info notification with action button
+ */
+export const InfoWithAction = {
+    argTypes: {
+        onActionClick: { action: true },
+    },
+    args: {
+        type: Kind.info,
+        content: 'InfoWithAction',
+        actionLabel: 'Undo',
+        isOpen: true,
+    },
 };

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

@@ -1,132 +1,91 @@
-import React, { RefObject, useEffect, useRef, useState } from 'react';
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { useEffect, useRef, useState } from 'react';
 
 import { mdiAccount, mdiBell } from '@lumx/icons';
 import {
-    Alignment,
     Chip,
-    Button,
     Emphasis,
-    FlexBox,
+    Text,
     Icon,
     IconButton,
     List,
     ListItem,
-    Orientation,
     Placement,
     Popover,
     Size,
+    Elevation,
 } from '@lumx/react';
-import { boolean, select } from '@storybook/addon-knobs';
 import range from 'lodash/range';
-import startCase from 'lodash/startCase';
-
-export default { title: 'LumX components/popover/Popover' };
-
-const DEFAULT_PROPS = Popover.defaultProps as any;
-
-export const Positions = ({ theme }: any) => {
-    const popovers: Array<[Placement, RefObject<any>]> = [
-        [Placement.LEFT, useRef(null)],
-        [Placement.TOP, useRef(null)],
-        [Placement.BOTTOM, useRef(null)],
-        [Placement.RIGHT, useRef(null)],
-    ];
-    const hasArrow = boolean('Has arrow', DEFAULT_PROPS.hasArrow as any);
-    const elevation: any = select('Elevation', [5, 4, 3, 2, 1], DEFAULT_PROPS.elevation);
-    const alignOptions = { middle: '', start: '-start', end: '-end' };
-    const align = select('Placement variant', alignOptions, alignOptions.middle);
-
-    return (
-        <FlexBox style={{ padding: 80 }} orientation={Orientation.horizontal}>
-            {popovers.map(([placement, ref]) => {
-                const placementVariant = (placement + align) as any;
-                return (
-                    <FlexBox key={placement} fillSpace vAlign={Alignment.center} hAlign={Alignment.center}>
-                        <Chip ref={ref} theme={theme} size={Size.s}>
-                            {startCase(placementVariant).toUpperCase()}
-                        </Chip>
-
-                        <Popover
-                            isOpen
-                            theme={theme}
-                            anchorRef={ref}
-                            placement={placementVariant}
-                            elevation={elevation}
-                            hasArrow={hasArrow}
-                        >
-                            <div className="lumx-spacing-margin-huge">Popover</div>
-                        </Popover>
-                    </FlexBox>
-                );
-            })}
-        </FlexBox>
-    );
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { withChromaticForceScreenSize } from '@lumx/react/stories/decorators/withChromaticForceScreenSize';
+
+export default {
+    title: 'LumX components/popover/Popover',
+    component: Popover,
+    args: Popover.defaultProps,
+    argTypes: {
+        isOpen: { control: 'boolean' },
+        hasArrow: { control: 'boolean' },
+        placement: getSelectArgType(Placement),
+        elevation: getSelectArgType<Elevation>([1, 2, 3, 4, 5]),
+    },
+    decorators: [
+        // Force minimum chromatic screen size to make sure the dialog appears in view.
+        withChromaticForceScreenSize(),
+    ],
 };
 
-export const Auto = ({ theme }: any) => {
-    const demoPopperStyle = {
-        alignItems: 'center',
-        display: 'flex',
-        height: 100,
-        justifyContent: 'center',
-        width: 200,
-    };
-
-    const container = {
-        width: '200%',
-        height: '2000px',
-        alignItems: 'center',
-        display: 'flex',
-        justifyContent: 'center',
-    };
-
-    const anchorRef = useRef(null);
-
-    return (
-        <div style={container}>
-            <div>
-                <Chip ref={anchorRef} theme={theme} size={Size.s}>
+/**
+ * Simple
+ */
+export const Simple = {
+    args: {
+        children: (
+            <Text as="p" className="lumx-spacing-padding-big">
+                Popover
+            </Text>
+        ),
+    },
+    render(props: any) {
+        const anchorRef = React.useRef(null);
+        return (
+            <>
+                <Chip ref={anchorRef} size="s" className="lumx-spacing-margin-big">
                     Anchor
                 </Chip>
-            </div>
-            <Popover theme={theme} anchorRef={anchorRef} placement={Placement.AUTO} isOpen>
-                <div style={demoPopperStyle}>Popover</div>
-            </Popover>
-        </div>
-    );
+                <Popover anchorRef={anchorRef} isOpen {...props} />
+            </>
+        );
+    },
 };
 
-export const Top = ({ theme }: any) => {
-    const demoPopperStyle = {
-        alignItems: 'center',
-        display: 'flex',
-        height: 100,
-        justifyContent: 'center',
-        width: 200,
-    };
-
-    const container = {
-        width: '200%',
-        height: '2000px',
-        alignItems: 'center',
-        display: 'flex',
-        justifyContent: 'center',
-    };
-
-    const anchorRef = useRef(null);
-
-    return (
-        <div style={container}>
-            <div>
-                <Chip ref={anchorRef} theme={theme} size={Size.s}>
-                    Anchor
-                </Chip>
-            </div>
-            <Popover theme={theme} anchorRef={anchorRef} placement={Placement.TOP} isOpen>
-                <div style={demoPopperStyle}>Popover</div>
-            </Popover>
-        </div>
-    );
+/**
+ * Popover not using React.createPortal
+ */
+export const WithoutPortal = { ...Simple, args: { ...Simple.args, usePortal: false } };
+
+/**
+ * All base placements
+ */
+export const Placements = {
+    ...Simple,
+    argTypes: {
+        placement: { control: false },
+    },
+    decorators: [
+        withCombinations({
+            cellStyle: {
+                padding: 80,
+            },
+            combinations: {
+                cols: {
+                    key: 'placement',
+                    options: [Placement.TOP, Placement.RIGHT, Placement.BOTTOM, Placement.LEFT],
+                },
+            },
+        }),
+    ],
 };
 
 export const WithUpdatingChildren = ({ theme }: any) => {
@@ -223,98 +182,6 @@ export const WithScrollingPopover = ({ theme }: any) => {
     );
 };
 
-export const WithoutPortal = ({ theme }: any) => {
-    const popovers: Array<[Placement, RefObject<any>]> = [
-        [Placement.LEFT, useRef(null)],
-        [Placement.TOP, useRef(null)],
-        [Placement.BOTTOM, useRef(null)],
-        [Placement.RIGHT, useRef(null)],
-    ];
-    const hasArrow = boolean('Has arrow', DEFAULT_PROPS.hasArrow as any);
-    const elevation: any = select('Elevation', [5, 4, 3, 2, 1], DEFAULT_PROPS.elevation);
-    const alignOptions = { middle: '', start: '-start', end: '-end' };
-    const align = select('Placement variant', alignOptions, alignOptions.middle);
-
-    return (
-        <FlexBox style={{ padding: 80 }} orientation={Orientation.horizontal}>
-            {popovers.map(([placement, ref]) => {
-                const placementVariant = (placement + align) as any;
-                return (
-                    <FlexBox key={placement} fillSpace vAlign={Alignment.center} hAlign={Alignment.center}>
-                        <Chip ref={ref} theme={theme} size={Size.s}>
-                            {startCase(placementVariant).toUpperCase()}
-                        </Chip>
-
-                        <Popover
-                            isOpen
-                            theme={theme}
-                            anchorRef={ref}
-                            placement={placementVariant}
-                            elevation={elevation}
-                            hasArrow={hasArrow}
-                            usePortal={false}
-                        >
-                            <div className="lumx-spacing-margin-huge">Popover</div>
-                        </Popover>
-                    </FlexBox>
-                );
-            })}
-        </FlexBox>
-    );
-};
-
-export const NestedWithoutPortal = () => {
-    const boundaryRef = React.useRef(document.querySelector('body'));
-
-    const Entry = ({ children, placement = Placement.RIGHT_START }: any) => {
-        const rootButtonRef = React.useRef(null);
-        const [rootOpen, setRootOpen] = React.useState(false);
-
-        return (
-            <>
-                <li ref={rootButtonRef}>
-                    <Button onClick={() => setRootOpen(!rootOpen)}>Click</Button>
-                </li>
-                {children && (
-                    <Popover
-                        boundaryRef={boundaryRef}
-                        fitWithinViewportHeight
-                        //offset={{ along: -16 }}
-                        placement={placement}
-                        isOpen={rootOpen}
-                        anchorRef={rootButtonRef}
-                        usePortal={false}
-                    >
-                        <div className="lumx-spacing-margin-huge" style={{ overflowY: 'auto' }}>
-                            <List style={{ minWidth: '150px' }}>{children}</List>
-                        </div>
-                    </Popover>
-                )}
-            </>
-        );
-    };
-
-    return (
-        <div style={{ height: '100vh', width: '50px' }}>
-            <List>
-                <Entry placement={Placement.BOTTOM_START}>
-                    <Entry />
-                    <Entry />
-                    <Entry>
-                        <Entry />
-                        <Entry />
-                        <Entry>
-                            <Entry>
-                                <Entry />
-                            </Entry>
-                        </Entry>
-                    </Entry>
-                </Entry>
-            </List>
-        </div>
-    );
-};
-
 export const FitToAnchorWidth = ({ theme }: any) => {
     const demoPopperStyle = {
         alignItems: 'center',

package/src/components/popover/Popover.tsx

@@ -173,18 +173,16 @@ const _InnerPopover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, ref
          * unless specifically requested not to.
          */
         if (isFocusedWithin.current && focusAnchorOnClose) {
-            if (parentElement?.current) {
-                parentElement?.current.focus();
-            }
-
-            const firstFocusable = anchorRef?.current && getFirstAndLastFocusable(anchorRef?.current).first;
-            if (firstFocusable) {
+            let elementToFocus = parentElement?.current;
+            if (!elementToFocus && anchorRef?.current) {
                 // Focus the first focusable element in anchor.
-                firstFocusable.focus();
-            } else {
+                elementToFocus = getFirstAndLastFocusable(anchorRef.current).first;
+            }
+            if (!elementToFocus) {
                 // Fallback on the anchor element.
-                anchorRef?.current?.focus();
+                elementToFocus = anchorRef?.current;
             }
+            elementToFocus?.focus({ preventScroll: true });
         }
 
         onClose();

package/src/components/popover-dialog/PopoverDialog.stories.tsx

@@ -1,75 +1,36 @@
-import React, { useRef, useState } from 'react';
-import { mdiMenu, mdiSettings } from '@lumx/icons';
-import { Placement } from '@lumx/react';
+import React from 'react';
+import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
+import { PopoverDialog } from '.';
+import { Button } from '../button';
 
-import { PopoverDialog, PopoverDialogProps } from '.';
-import { Emphasis, Orientation, Size, Typography } from '..';
-import { Button, IconButton } from '../button';
-import { FlexBox } from '../flex-box';
-import { Heading } from '../heading';
-import { List, ListItem } from '../list';
-import { Toolbar } from '../toolbar';
+export default {
+    title: 'LumX components/popover-dialog/PopoverDialog',
+    component: PopoverDialog,
+};
 
-const WithButton = (Story: any, context: any) => {
-    const anchorRef = useRef(null);
-    const [isOpen, setIsOpen] = useState<boolean>(context?.args?.isOpen || false);
+/**
+ * Example PopoverDialog using a button as a trigger
+ */
+export const WithButtonTrigger = () => {
+    const anchorRef = React.useRef(null);
+    const [isOpen, close, open] = useBooleanState(true);
 
     return (
         <>
-            <Button ref={anchorRef} onClick={() => setIsOpen((current) => !current)}>
+            <Button id="trigger-button-1" ref={anchorRef} onClick={open}>
                 Open popover
             </Button>
-            <Story anchorRef={anchorRef} isOpen={isOpen} onClose={() => setIsOpen(false)} />
-        </>
-    );
-};
-
-const dialogHeaderId = 'dialog-header';
-
-const DemoPopoverContent = () => (
-    <FlexBox orientation={Orientation.vertical}>
-        <Toolbar
-            label={
-                <Heading id="dialogHeaderId" typography={Typography.headline}>
-                    Title
-                </Heading>
-            }
-            after={<IconButton label="Settings" icon={mdiSettings} emphasis={Emphasis.low} />}
-        />
-        <List>
-            <ListItem size={Size.huge} after={<IconButton label="Menu" icon={mdiMenu} size={Size.s} />}>
-                List Item With Actions
-            </ListItem>
-            <ListItem
-                size={Size.huge}
-                linkProps={{
-                    href: 'http://google.com',
-                }}
+            <PopoverDialog
+                aria-labelledby="trigger-button-1"
+                anchorRef={anchorRef}
+                isOpen={isOpen}
+                onClose={close}
+                placement="bottom"
             >
-                Clickable list item
-            </ListItem>
-        </List>
-    </FlexBox>
-);
-
-export default {
-    title: 'LumX components/popover-dialog/PopoverDialog',
-    component: PopoverDialog,
-    decorators: [WithButton],
-    args: {
-        children: <DemoPopoverContent />,
-        'aria-labelledby': dialogHeaderId,
-        placement: Placement.BOTTOM,
-    },
-};
-
-const Template = (args: PopoverDialogProps, context: any) => {
-    const { anchorRef, isOpen, onClose } = context;
-    return (
-        <PopoverDialog {...args} anchorRef={anchorRef} isOpen={isOpen} onClose={onClose}>
-            {args.children}
-        </PopoverDialog>
+                <Button className="lumx-spacing-margin-huge" onClick={close}>
+                    Close
+                </Button>
+            </PopoverDialog>
+        </>
     );
 };
-
-export const Default = Template.bind({});