@lumx/react 2.2.11 → 2.2.12

package/src/components/icon/Icon.stories.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { mdiEmail } from '@lumx/icons';
-import { ColorPalette, FlexBox, Icon, IconSizes, Size } from '@lumx/react';
+import { ColorPalette, ColorVariant, FlexBox, Icon, IconSizes, Size } from '@lumx/react';
 import { Orientation } from '..';
 
-export default { title: 'LumX components/icon/Icon' };
+export default { title: 'LumX components/icon/Icon', parameters: { hasGreyBackground: true } };
 
 const iconSizes: Array<IconSizes | undefined> = [
     undefined,
@@ -16,42 +16,61 @@ const iconSizes: Array<IconSizes | undefined> = [
     Size.xl,
     Size.xxl,
 ];
-const iconColors = [undefined, ...Object.values(ColorPalette)];
-const iconShapes = [false, true];
 
-export const AllIcon = ({ theme }: any) => {
+const TemplateSizeVariants = ({ hasShape, theme }: any) => (
+    <FlexBox orientation={Orientation.horizontal}>
+        {iconSizes.map((size) => (
+            <FlexBox fillSpace key={`${size}`}>
+                <h2>Size: {size || 'undefined'}</h2>
+                <Icon icon={mdiEmail} size={size} hasShape={hasShape} theme={theme} />
+            </FlexBox>
+        ))}
+    </FlexBox>
+);
+
+export const AllSize = ({ theme }: any) => TemplateSizeVariants({ theme });
+
+export const AllSizeWithShape = ({ theme }: any) => TemplateSizeVariants({ theme, hasShape: true });
+
+const TemplateColorVariants = ({ hasShape, theme }: any) => {
+    const withUndefined = (a: any) => [undefined].concat(Object.values(a));
     return (
-        <>
-            {iconShapes.map((hasShape) => {
-                return (
-                    <>
-                        <h1>{`With shape: ${hasShape}`}</h1>
-                        {iconSizes.map((size) => {
-                            return (
+        <FlexBox orientation={Orientation.horizontal}>
+            {withUndefined(ColorPalette).map((color) => (
+                <FlexBox fillSpace key={`${color}`}>
+                    <small key={`${color}`}>Color: {color || 'undefined'}</small>
+                    <br />
+                    {withUndefined(Object.values(ColorVariant).reverse()).map((colorVariant) => (
+                        <Fragment key={`${colorVariant}`}>
+                            {!colorVariant && (
                                 <>
-                                    <h2>{`Size: ${size}`}</h2>
-                                    <FlexBox orientation={Orientation.horizontal}>
-                                        {iconColors.map((color) => {
-                                            return (
-                                                <FlexBox fillSpace key={color}>
-                                                    {`Color: ${color}`}
-                                                    <Icon
-                                                        hasShape={hasShape}
-                                                        icon={mdiEmail}
-                                                        color={color}
-                                                        size={size}
-                                                        theme={theme}
-                                                    />
-                                                </FlexBox>
-                                            );
-                                        })}
-                                    </FlexBox>
+                                    <small>No theme</small>
+                                    <Icon
+                                        icon={mdiEmail}
+                                        color={color}
+                                        colorVariant={colorVariant}
+                                        size="m"
+                                        hasShape={hasShape}
+                                    />
                                 </>
-                            );
-                        })}
-                    </>
-                );
-            })}
-        </>
+                            )}
+                            <small>Variant: {colorVariant || 'undefined'}</small>
+                            <Icon
+                                icon={mdiEmail}
+                                color={color}
+                                colorVariant={colorVariant}
+                                size="m"
+                                theme={theme}
+                                hasShape={hasShape}
+                            />
+                        </Fragment>
+                    ))}
+                </FlexBox>
+            ))}
+        </FlexBox>
     );
 };
+
+export const AllColors = ({ theme }: any) => TemplateColorVariants({ theme });
+
+export const AllColorsWithShape = ({ theme }: any) => TemplateColorVariants({ theme, hasShape: true });

package/src/components/icon/Icon.tsx

@@ -19,8 +19,8 @@ export interface IconProps extends GenericProps {
     /** Whether the icon has a shape. */
     hasShape?: boolean;
     /**
-     * Icon (SVG path).draw code (`d` property of the `<path>` SVG element).
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths}
+     * Icon (SVG path) draw code (`d` property of the `<path>` SVG element).
+     * See https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
      */
     icon: string;
     /** Size variant. */
@@ -56,35 +56,25 @@ const DEFAULT_PROPS: Partial<IconProps> = {};
 export const Icon: Comp<IconProps, HTMLElement> = forwardRef((props, ref) => {
     const { className, color, colorVariant, hasShape, icon, size, theme, alt, ...forwardedProps } = props;
 
-    let iconColor;
-    let iconColorVariant;
-    if (color) {
-        iconColor = color;
-        iconColorVariant = colorVariant;
-    } else if (theme) {
-        iconColor = theme === Theme.light ? ColorPalette.dark : ColorPalette.light;
+    // Color
+    let iconColor = color;
+    if (!iconColor && (hasShape || theme)) {
+        iconColor = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
+    }
 
-        if (colorVariant) {
-            iconColorVariant = colorVariant;
-        } else {
-            iconColorVariant = Theme.light ? 'L1' : 'N';
-        }
-    } else if (hasShape) {
-        iconColor = ColorPalette.dark;
+    // Color variant
+    let iconColorVariant = colorVariant;
+    if (!iconColorVariant && hasShape && iconColor === ColorPalette.dark) {
+        iconColorVariant = 'L2';
     }
 
-    let iconSize;
-    if (size) {
-        if (hasShape) {
-            if (size === Size.xxs || size === Size.xs) {
-                iconSize = Size.s;
-            } else if (size === Size.xxl) {
-                iconSize = Size.xl;
-            } else {
-                iconSize = size;
-            }
-        } else {
-            iconSize = size;
+    // Size
+    let iconSize = size;
+    if (size && hasShape) {
+        if (size === Size.xxs || size === Size.xs) {
+            iconSize = Size.s;
+        } else if (size === Size.xxl) {
+            iconSize = Size.xl;
         }
     } else if (hasShape) {
         iconSize = Size.m;
@@ -101,6 +91,7 @@ export const Icon: Comp<IconProps, HTMLElement> = forwardRef((props, ref) => {
                     colorVariant: iconColorVariant,
                     hasShape,
                     prefix: CLASSNAME,
+                    theme,
                     size: iconSize,
                 }),
                 !hasShape && `${CLASSNAME}--no-shape`,

package/src/components/list/List.tsx

@@ -21,6 +21,8 @@ export interface ListProps extends GenericProps {
     isClickable?: boolean;
     /** Item padding size. */
     itemPadding?: Extract<Size, 'big' | 'huge'>;
+    /** Tab index of the list. Default to -1 */
+    tabIndex?: number;
     /**
      * On list item selected callback.
      *
@@ -41,6 +43,13 @@ const COMPONENT_NAME = 'List';
  */
 const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<ListProps> = {
+    tabIndex: -1,
+};
+
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
 /**
  * List component.
@@ -50,7 +59,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @return React element.
  */
 const InternalList: Comp<ListProps, HTMLUListElement> = forwardRef((props, ref) => {
-    const { children, className, isClickable, itemPadding, onListItemSelected, ...forwardedProps } = props;
+    const { children, className, isClickable, itemPadding, onListItemSelected, tabIndex, ...forwardedProps } = props;
     const listElementRef = useRef<HTMLUListElement>(null);
 
     const { items, hasClickableItem } = useInteractiveList({
@@ -70,7 +79,7 @@ const InternalList: Comp<ListProps, HTMLUListElement> = forwardRef((props, ref)
                     itemPadding: itemPadding ?? (clickable ? Size.big : undefined),
                 }),
             )}
-            tabIndex={clickable ? 0 : -1}
+            tabIndex={tabIndex}
             ref={mergeRefs(ref, listElementRef)}
         >
             {items}
@@ -79,5 +88,6 @@ const InternalList: Comp<ListProps, HTMLUListElement> = forwardRef((props, ref)
 });
 InternalList.displayName = COMPONENT_NAME;
 InternalList.className = CLASSNAME;
+InternalList.defaultProps = DEFAULT_PROPS;
 
 export const List = Object.assign(InternalList, { useKeyboardListNavigation });

package/src/components/list/__snapshots__/List.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<List> Snapshots and structure should render story 'AsLink' 1`] = `
 <ul
   className="lumx-list lumx-list--item-padding-big"
-  tabIndex={0}
+  tabIndex={-1}
 >
   <ListItem
     before={
@@ -62,7 +62,7 @@ exports[`<List> Snapshots and structure should render story 'AsLink' 1`] = `
 exports[`<List> Snapshots and structure should render story 'KeyboardNavigation' 1`] = `
 <ul
   className="lumx-list lumx-list--item-padding-big"
-  tabIndex={0}
+  tabIndex={-1}
 >
   <ListItem
     isHighlighted={false}
@@ -193,7 +193,7 @@ exports[`<List> Snapshots and structure should render story 'WithItemPadding' 1`
 Array [
   <ul
     className="lumx-list lumx-list--item-padding-big"
-    tabIndex={0}
+    tabIndex={-1}
   >
     <ListItem
       className="lumx-color-background-dark-L6"
@@ -248,7 +248,7 @@ Array [
   </ul>,
   <ul
     className="lumx-list lumx-list--item-padding-big"
-    tabIndex={0}
+    tabIndex={-1}
   >
     <ListItem
       className="lumx-color-background-dark-L6"
@@ -303,7 +303,7 @@ Array [
   </ul>,
   <ul
     className="lumx-list lumx-list--item-padding-huge"
-    tabIndex={0}
+    tabIndex={-1}
   >
     <ListItem
       className="lumx-color-background-dark-L6"

package/src/components/popover/Popover.tsx

@@ -12,6 +12,7 @@ import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 
 import { Comp, GenericProps, getRootClassName, handleBasicClasses, ValueOf } from '@lumx/react/utils';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';
 
 /**
  * Different possible placements for the popover.
@@ -81,6 +82,8 @@ export interface PopoverProps extends GenericProps {
     fitWithinViewportHeight?: boolean;
     /** Element to focus when opening the popover. */
     focusElement?: RefObject<HTMLElement>;
+    /** Whether the focus should go back on the anchor when popover closes and focus is within. */
+    focusAnchorOnClose?: boolean;
     /** Whether we put an arrow or not. */
     hasArrow?: boolean;
     /** Whether the popover is open or not. */
@@ -213,6 +216,7 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
         style,
         usePortal,
         zIndex,
+        focusAnchorOnClose = true,
         ...forwardedProps
     } = props;
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -222,6 +226,42 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const clickAwayRef = useRef<HTMLDivElement>(null);
 
+    /**
+     * Track whether the focus is currently set in the
+     * popover.
+     * */
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const isFocusedWithin = useRef(false);
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useFocusWithin({
+        element: popperElement || null,
+        onFocusIn: () => {
+            isFocusedWithin.current = true;
+        },
+        onFocusOut: () => {
+            isFocusedWithin.current = false;
+        },
+    });
+
+    /** Action on close */
+    const handleClose = () => {
+        if (!onClose) {
+            return;
+        }
+
+        /**
+         * If the focus is currently within the popover
+         * when the popover closes, reset the focus back to the anchor element
+         * unless specifically requested not to.
+         */
+        if (isFocusedWithin.current && focusAnchorOnClose) {
+            anchorRef.current?.focus();
+        }
+
+        onClose();
+    };
+
     const modifiers: any = [];
     const actualOffset: [number, number] = [offset?.along ?? 0, (offset?.away ?? 0) + (hasArrow ? ARROW_SIZE : 0)];
     modifiers.push({
@@ -267,7 +307,7 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
     }, [style, styles.popper, zIndex, fitWithinViewportHeight]);
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useCallbackOnEscape(onClose, isOpen && closeOnEscape);
+    useCallbackOnEscape(handleClose, isOpen && closeOnEscape);
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useFocus(focusElement?.current, isOpen && (state?.rects?.popper?.y ?? -1) >= 0);
 
@@ -286,7 +326,7 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
                   style={popoverStyle}
                   {...attributes.popper}
               >
-                  <ClickAwayProvider callback={closeOnClickAway && onClose} refs={clickAwayRefs}>
+                  <ClickAwayProvider callback={closeOnClickAway && handleClose} refs={clickAwayRefs}>
                       {hasArrow && <div ref={setArrowElement} className={`${CLASSNAME}__arrow`} style={styles.arrow} />}
                       {children}
                   </ClickAwayProvider>

package/src/components/select/__snapshots__/Select.test.tsx.snap

@@ -29,6 +29,7 @@ exports[`<Select> Snapshots and structure should render correctly 1`] = `
     closeOnEscape={true}
     fitToAnchorWidth={true}
     fitWithinViewportHeight={true}
+    focusAnchorOnClose={true}
     isOpen={false}
     onClose={[Function]}
     placement="bottom-start"

package/src/components/select/__snapshots__/SelectMultiple.test.tsx.snap

@@ -30,6 +30,7 @@ exports[`<SelectMultiple> Snapshots and structure should render chips 1`] = `
     closeOnEscape={true}
     fitToAnchorWidth={true}
     fitWithinViewportHeight={true}
+    focusAnchorOnClose={true}
     isOpen={false}
     onClose={[Function]}
     placement="bottom-start"
@@ -72,6 +73,7 @@ exports[`<SelectMultiple> Snapshots and structure should render defaults 1`] = `
     closeOnEscape={true}
     fitToAnchorWidth={true}
     fitWithinViewportHeight={true}
+    focusAnchorOnClose={true}
     isOpen={false}
     onClose={[Function]}
     placement="bottom-start"

package/src/components/tooltip/useTooltipOpen.tsx

@@ -103,7 +103,6 @@ export function useTooltipOpen(delay: number | undefined, anchorElement: HTMLEle
             for (const [node, eventType, evenHandler] of events) {
                 node.removeEventListener(eventType, evenHandler);
             }
-            closeImmediately();
         };
     }, [anchorElement, delay]);
 

package/types.d.ts

@@ -938,6 +938,8 @@ export interface PopoverProps extends GenericProps {
 	fitWithinViewportHeight?: boolean;
 	/** Element to focus when opening the popover. */
 	focusElement?: RefObject<HTMLElement>;
+	/** Whether the focus should go back on the anchor when popover closes and focus is within. */
+	focusAnchorOnClose?: boolean;
 	/** Whether we put an arrow or not. */
 	hasArrow?: boolean;
 	/** Whether the popover is open or not. */
@@ -1012,6 +1014,8 @@ export interface DropdownProps extends GenericProps {
 	placement?: Placement;
 	/** Whether the focus should be set on the list when the dropdown is open or not. */
 	shouldFocusOnOpen?: boolean;
+	/** Whether the focus should go back on the anchor when dropdown closes and focus is within. */
+	focusAnchorOnClose?: boolean;
 	/**
 	 * Z-axis position.
 	 * @see {@link PopoverProps#zIndex}
@@ -1171,8 +1175,8 @@ export interface IconProps extends GenericProps {
 	/** Whether the icon has a shape. */
 	hasShape?: boolean;
 	/**
-	 * Icon (SVG path).draw code (`d` property of the `<path>` SVG element).
-	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths}
+	 * Icon (SVG path) draw code (`d` property of the `<path>` SVG element).
+	 * See https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
 	 */
 	icon: string;
 	/** Size variant. */
@@ -1474,6 +1478,8 @@ export interface ListProps extends GenericProps {
 	isClickable?: boolean;
 	/** Item padding size. */
 	itemPadding?: Extract<Size, "big" | "huge">;
+	/** Tab index of the list. Default to -1 */
+	tabIndex?: number;
 	/**
 	 * On list item selected callback.
 	 *