@lumx/react 2.2.20-alpha.xss.datatable → 2.2.20

package/src/components/popover/Popover.tsx

@@ -1,5 +1,5 @@
 import { detectOverflow } from '@popperjs/core';
-import React, { forwardRef, ReactNode, RefObject, useEffect, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, ReactNode, RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
 
@@ -13,6 +13,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';
+import { getFirstAndLastFocusable } from '@lumx/react/utils/focus/getFirstAndLastFocusable';
 
 /**
  * Different possible placements for the popover.
@@ -90,6 +91,8 @@ export interface PopoverProps extends GenericProps {
     isOpen: boolean;
     /** Offset placement relative to anchor. */
     offset?: Offset;
+    /** Reference to the parent element that triggered the popover (will get back focus on close or else fallback on the anchor element). */
+    parentElement?: RefObject<HTMLElement>;
     /** Placement relative to anchor. */
     placement?: Placement;
     /** Whether the popover should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */
@@ -212,6 +215,7 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
         isOpen,
         offset,
         onClose,
+        parentElement,
         placement,
         style,
         usePortal,
@@ -245,7 +249,8 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
     });
 
     /** Action on close */
-    const handleClose = () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const handleClose = useCallback(() => {
         if (!onClose) {
             return;
         }
@@ -256,11 +261,22 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
          * unless specifically requested not to.
          */
         if (isFocusedWithin.current && focusAnchorOnClose) {
-            anchorRef.current?.focus();
+            if (parentElement?.current) {
+                parentElement?.current.focus();
+            }
+
+            const firstFocusable = anchorRef?.current && getFirstAndLastFocusable(anchorRef?.current).first;
+            if (firstFocusable) {
+                // Focus the first focusable element in anchor.
+                firstFocusable.focus();
+            } else {
+                // Fallback on the anchor element.
+                anchorRef?.current?.focus();
+            }
         }
 
         onClose();
-    };
+    }, [anchorRef, focusAnchorOnClose, onClose, parentElement]);
 
     const modifiers: any = [];
     const actualOffset: [number, number] = [offset?.along ?? 0, (offset?.away ?? 0) + (hasArrow ? ARROW_SIZE : 0)];

package/src/components/select/Select.stories.tsx

@@ -1,3 +1,4 @@
+import { mdiBullhornOutline } from '@lumx/icons/';
 import { List, ListItem, Select, Size, TextField } from '@lumx/react';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import { text } from '@storybook/addon-knobs';
@@ -32,6 +33,7 @@ export const SimpleSelect = ({ theme }: any) => {
             theme={theme}
             onInputClick={toggleSelect}
             onDropdownClose={closeSelect}
+            icon={mdiBullhornOutline}
         >
             <List isClickable>
                 {CHOICES.length > 0

package/src/components/select/Select.tsx

@@ -5,7 +5,7 @@ import lodashIsEmpty from 'lodash/isEmpty';
 
 import { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle, mdiMenuDown } from '@lumx/icons';
 
-import { Emphasis, Size } from '@lumx/react/components';
+import { Emphasis, Size, Theme } from '@lumx/react/components';
 import { IconButton } from '@lumx/react/components/button/IconButton';
 import { Chip } from '@lumx/react/components/chip/Chip';
 import { Icon } from '@lumx/react/components/icon/Icon';
@@ -46,6 +46,7 @@ const SelectField: React.FC<SelectProps> = ({
     handleKeyboardNav,
     hasError,
     hasInputClear,
+    icon,
     id,
     isDisabled,
     isEmpty,
@@ -89,6 +90,15 @@ const SelectField: React.FC<SelectProps> = ({
                         aria-disabled={isDisabled || undefined}
                         {...forwardedProps}
                     >
+                        {icon && (
+                            <Icon
+                                className={`${CLASSNAME}__input-icon`}
+                                color={theme === Theme.dark ? 'light' : undefined}
+                                icon={icon}
+                                size={Size.xs}
+                            />
+                        )}
+
                         <div
                             className={classNames([
                                 `${CLASSNAME}__input-native`,

package/src/components/select/SelectMultiple.stories.tsx

@@ -1,4 +1,5 @@
 /* istanbul ignore file */
+import { mdiTram } from '@lumx/icons/';
 import { Chip, List, ListItem, SelectMultiple, Size } from '@lumx/react';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import noop from 'lodash/noop';
@@ -40,6 +41,7 @@ export const DefaultSelectMultiple = ({ theme }: any) => {
             theme={theme}
             onInputClick={toggleSelect}
             onDropdownClose={closeSelect}
+            icon={mdiTram}
         >
             <List isClickable>
                 {CHOICES.length > 0

package/src/components/select/SelectMultiple.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { mdiAlertCircle, mdiCheckCircle, mdiClose, mdiCloseCircle, mdiMenuDown } from '@lumx/icons';
 
-import { Size } from '@lumx/react/components';
+import { Size, Theme } from '@lumx/react/components';
 import { Chip } from '@lumx/react/components/chip/Chip';
 import { Icon } from '@lumx/react/components/icon/Icon';
 import { InputLabel } from '@lumx/react/components/input-label/InputLabel';
@@ -59,6 +59,7 @@ export const SelectMultipleField: React.FC<SelectMultipleProps> = ({
     anchorRef,
     handleKeyboardNav,
     hasError,
+    icon,
     id,
     isDisabled,
     isEmpty,
@@ -102,6 +103,15 @@ export const SelectMultipleField: React.FC<SelectMultipleProps> = ({
                     aria-disabled={isDisabled || undefined}
                     {...forwardedProps}
                 >
+                    {icon && (
+                        <Icon
+                            className={`${CLASSNAME}__input-icon`}
+                            color={theme === Theme.dark ? 'light' : undefined}
+                            icon={icon}
+                            size={Size.xs}
+                        />
+                    )}
+
                     <div className={`${CLASSNAME}__chips`}>
                         {!isEmpty &&
                             value.map((val, index) => selectedChipRender?.(val, index, onClear, isDisabled, theme))}

package/src/components/select/constants.ts

@@ -21,6 +21,8 @@ export interface CoreSelectProps extends GenericProps {
     helper?: string;
     /** Whether the select should close on click. */
     closeOnClick?: boolean;
+    /** Icon (SVG path). */
+    icon?: string;
     /** Whether the component is disabled or not. */
     isDisabled?: boolean;
     /** Whether the component is required or not. */

package/src/components/table/__snapshots__/Table.test.tsx.snap

@@ -3,6 +3,11 @@
 exports[`<Table> Snapshots and structure should render story 'Default' 1`] = `
 <table
   className="lumx-table lumx-table--has-dividers lumx-table--theme-light"
+  style={
+    Object {
+      "minWidth": 620,
+    }
+  }
 >
   <TableHeader>
     <TableRow>

package/src/hooks/useCallbackOnEscape.ts

@@ -1,25 +1,33 @@
 import { DOCUMENT } from '@lumx/react/constants';
 import { Callback, onEscapePressed } from '@lumx/react/utils';
 import { useEffect } from 'react';
+import { Listener, makeListenerTowerContext } from '@lumx/react/utils/makeListenerTowerContext';
+
+const LISTENERS = makeListenerTowerContext();
 
 /**
- * Triggers a callback when the escape key is pressed.
+ * Register a global listener on 'Escape' key pressed.
+ *
+ * If multiple listener are registered, only the last one is maintained. When a listener is unregistered, the previous
+ * one gets activated again.
  *
  * @param callback      Callback
  * @param closeOnEscape Disables the hook when false
- * @param rootElement   Element on which to listen the escape key
  */
-export function useCallbackOnEscape(
-    callback: Callback | undefined,
-    closeOnEscape = true,
-    rootElement = DOCUMENT?.body,
-) {
+export function useCallbackOnEscape(callback: Callback | undefined, closeOnEscape = true) {
     useEffect(() => {
-        if (closeOnEscape && callback && rootElement) {
-            const onKeyDown = onEscapePressed(callback);
-            rootElement.addEventListener('keydown', onKeyDown);
-            return () => rootElement.removeEventListener('keydown', onKeyDown);
+        const rootElement = DOCUMENT?.body;
+        if (!closeOnEscape || !callback || !rootElement) {
+            return undefined;
         }
-        return undefined;
-    }, [callback, closeOnEscape, rootElement]);
+        const onKeyDown = onEscapePressed(callback);
+
+        const listener: Listener = {
+            enable: () => rootElement.addEventListener('keydown', onKeyDown),
+            disable: () => rootElement.removeEventListener('keydown', onKeyDown),
+        };
+
+        LISTENERS.register(listener);
+        return () => LISTENERS.unregister(listener);
+    }, [callback, closeOnEscape]);
 }

package/src/hooks/useFocusTrap.ts

@@ -2,67 +2,84 @@ import { useEffect } from 'react';
 
 import { DOCUMENT } from '@lumx/react/constants';
 import { getFirstAndLastFocusable } from '@lumx/react/utils/focus/getFirstAndLastFocusable';
+import { Falsy } from '@lumx/react/utils';
+import { Listener, makeListenerTowerContext } from '@lumx/react/utils/makeListenerTowerContext';
+
+const FOCUS_TRAPS = makeListenerTowerContext();
 
 /**
- * Add a key down event handler to the given root element (document.body by default) to trap the move of focus
- * (TAB and SHIFT-TAB keys) inside the given focusZoneElement.
- * Will focus the given focus element when activating the focus trap.
+ * Trap 'Tab' focus switch inside the `focusZoneElement`.
+ *
+ * If multiple focus trap are activated, only the last one is maintained and when a focus trap closes, the previous one
+ * gets activated again.
  *
  * @param focusZoneElement The element in which to trap the focus.
- * @param focusElement     The element to focus when the focus trap is activated.
- * @param rootElement      The element on which the key down event will be placed.
+ * @param focusElement     The element to focus when the focus trap is activated (otherwise the first focusable element
+ *                         will be focused).
  */
-export function useFocusTrap(
-    focusZoneElement: HTMLElement | null,
-    focusElement?: HTMLElement | null,
-    rootElement = DOCUMENT?.body,
-): void {
+export function useFocusTrap(focusZoneElement: HTMLElement | Falsy, focusElement?: HTMLElement | null): void {
     useEffect(() => {
-        if (rootElement && focusZoneElement) {
-            (document.activeElement as HTMLElement)?.blur();
-            if (focusElement) {
-                focusElement.focus();
+        // Body element can be undefined in SSR context.
+        const rootElement = DOCUMENT?.body;
+
+        if (!rootElement || !focusZoneElement) {
+            return undefined;
+        }
+
+        // Trap 'Tab' key down focus switch into the focus zone.
+        const trapTabFocusInFocusZone = (evt: KeyboardEvent) => {
+            const { key } = evt;
+            if (key !== 'Tab') {
+                return;
             }
+            const focusable = getFirstAndLastFocusable(focusZoneElement);
 
-            const onKeyDown = (evt: KeyboardEvent) => {
-                const { key } = evt;
-                if (key !== 'Tab') {
-                    return;
-                }
-                const focusable = getFirstAndLastFocusable(focusZoneElement);
+            // Prevent focus switch if no focusable available.
+            if (!focusable.first) {
+                evt.preventDefault();
+                return;
+            }
 
-                // Prevent focus switch if no focusable available.
-                if (!focusable.first) {
-                    evt.preventDefault();
-                    return;
-                }
+            if (
+                // No previous focus
+                !document.activeElement ||
+                // Previous focus is at the end of the focus zone.
+                (!evt.shiftKey && document.activeElement === focusable.last) ||
+                // Previous focus is outside the focus zone
+                !focusZoneElement.contains(document.activeElement)
+            ) {
+                focusable.first.focus();
+                evt.preventDefault();
+                return;
+            }
 
-                if (
-                    // No previous focus
-                    !document.activeElement ||
-                    // Previous focus is at the end of the focus zone.
-                    (!evt.shiftKey && document.activeElement === focusable.last) ||
-                    // Previous focus is outside the focus zone
-                    !focusZoneElement.contains(document.activeElement)
-                ) {
-                    focusable.first.focus();
-                    evt.preventDefault();
-                    return;
-                }
+            if (
+                // Focus order reversed
+                evt.shiftKey &&
+                // Previous focus is at the start of the focus zone.
+                document.activeElement === focusable.first
+            ) {
+                focusable.last.focus();
+                evt.preventDefault();
+            }
+        };
 
-                if (
-                    // Focus order reversed
-                    evt.shiftKey &&
-                    // Previous focus is at the start of the focus zone.
-                    document.activeElement === focusable.first
-                ) {
-                    focusable.last.focus();
-                    evt.preventDefault();
-                }
-            };
-            rootElement.addEventListener('keydown', onKeyDown);
-            return () => rootElement.removeEventListener('keydown', onKeyDown);
+        const focusTrap: Listener = {
+            enable: () => rootElement.addEventListener('keydown', trapTabFocusInFocusZone),
+            disable: () => rootElement.removeEventListener('keydown', trapTabFocusInFocusZone),
+        };
+
+        // SETUP:
+        if (focusElement && focusZoneElement.contains(focusElement)) {
+            // Focus the given element.
+            focusElement.focus();
+        } else {
+            // Focus the first focusable element in the zone.
+            getFirstAndLastFocusable(focusZoneElement).first?.focus();
         }
-        return undefined;
-    }, [focusElement, focusZoneElement, rootElement]);
+        FOCUS_TRAPS.register(focusTrap);
+
+        // TEARDOWN:
+        return () => FOCUS_TRAPS.unregister(focusTrap);
+    }, [focusElement, focusZoneElement]);
 }

package/src/index.ts

@@ -15,6 +15,7 @@ export * from './components/dropdown';
 export * from './components/expansion-panel';
 export * from './components/flag';
 export * from './components/flex-box';
+export * from './components/generic-block';
 export * from './components/grid';
 export * from './components/icon';
 export * from './components/image-block';

package/src/stories/generated/GenericBlock/Demos.stories.tsx

@@ -0,0 +1,6 @@
+/**
+ * File generated when storybook is started. Do not edit directly!
+ */
+export default { title: 'LumX components/generic-block/GenericBlock Demos' };
+
+export { App as Default } from './default';

package/src/utils/makeListenerTowerContext.ts

@@ -0,0 +1,32 @@
+import last from 'lodash/last';
+import pull from 'lodash/pull';
+
+export type Listener = { enable(): void; disable(): void };
+
+/**
+ * Keep track of listeners, only the last registered listener gets activated at any point (previously registered
+ * listener are disabled).
+ * When a listener gets unregistered, the previously registered listener gets enabled again.
+ */
+export function makeListenerTowerContext() {
+    const LISTENERS: Listener[] = [];
+
+    return {
+        register(listener: Listener) {
+            // Disable previous listener.
+            last(LISTENERS)?.disable();
+            // Keep track of current listener.
+            LISTENERS.push(listener);
+            // Enable current listener.
+            listener.enable();
+        },
+        unregister(listener: Listener) {
+            // Disable current listener.
+            listener.disable();
+            // Remove current listener.
+            pull(LISTENERS, listener);
+            // Enable previous listener.
+            last(LISTENERS)?.enable();
+        },
+    };
+}

package/src/utils/type.ts

@@ -31,6 +31,9 @@ export type Comp<P, T = HTMLElement> = {
     className?: string;
 };
 
+/** Union type of all heading elements */
+export type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
 /**
  * Define a generic props types.
  */

package/types.d.ts

@@ -18,6 +18,8 @@ export declare type Comp<P, T = HTMLElement> = {
 	/** Component base class name. */
 	className?: string;
 };
+/** Union type of all heading elements */
+export declare type HeadingElement = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 /**
  * Define a generic props types.
  */
@@ -741,7 +743,7 @@ export interface DatePickerProps extends GenericProps {
 	/** Props to pass to the previous month button (minus those already set by the DatePickerControlled props). */
 	previousButtonProps: Pick<IconButtonProps, "label"> & Omit<IconButtonProps, "label" | "onClick" | "icon" | "emphasis">;
 	/** Reference to the <button> element corresponding to the current date or the selected date. */
-	todayOrSelectedDateRef?: RefObject<HTMLButtonElement>;
+	todayOrSelectedDateRef?: Ref<HTMLButtonElement>;
 	/** Currently selected date. */
 	value: Date | undefined;
 	/** On change callback. */
@@ -949,6 +951,8 @@ export interface PopoverProps extends GenericProps {
 	isOpen: boolean;
 	/** Offset placement relative to anchor. */
 	offset?: Offset;
+	/** Reference to the parent element that triggered the popover (will get back focus on close or else fallback on the anchor element). */
+	parentElement?: RefObject<HTMLElement>;
 	/** Placement relative to anchor. */
 	placement?: Placement;
 	/** Whether the popover should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */
@@ -1122,6 +1126,41 @@ export interface FlexBoxProps extends GenericProps {
  * @return React element.
  */
 export declare const FlexBox: Comp<FlexBoxProps, HTMLDivElement>;
+export interface GenericBlockProps extends FlexBoxProps {
+	/** Component to use as visual element. */
+	figure?: ReactNode;
+	/** Actions to set after the main content. */
+	actions?: ReactNode;
+	/** Main content to display */
+	children: ReactNode;
+	/** Orientation of the 3 sections */
+	orientation?: FlexBoxProps["orientation"];
+	/** Horizontal alignment. */
+	hAlign?: FlexBoxProps["hAlign"];
+	/** Vertical alignment. */
+	vAlign?: FlexBoxProps["vAlign"];
+	/**
+	 * The props to forward to the content.
+	 * By default, the content will have the same alignment as wrapper.
+	 */
+	contentProps?: Omit<FlexBoxProps, "children">;
+	/** props to forward to the actions element. */
+	actionsProps?: Omit<FlexBoxProps, "children">;
+	/** props to forward to the figure element. */
+	figureProps?: Omit<FlexBoxProps, "children">;
+}
+/**
+ * The GenericBlock is a layout component made of 3 sections that can be
+ * displayed either horizontally of vertically with the same gap between each section.
+ *
+ * The sections are:
+ * * (Optional) `Figure` => A visual element to display before the main content.
+ * * (Required) `Content` => The main content displayed
+ * * (Optional) `Actions` => One or more actions to set after the element.
+ *
+ * @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076
+ */
+export declare const GenericBlock: Comp<GenericBlockProps, HTMLDivElement>;
 export declare type GridGutterSize = Extract<Size, "regular" | "big" | "huge">;
 /**
  * Defines the props of the component.
@@ -1431,12 +1470,12 @@ export declare const Link: Comp<LinkProps, HTMLAnchorElement | HTMLButtonElement
  * Defines the props of the component.
  */
 export interface LinkPreviewProps extends GenericProps {
-	/** Description (either a string, or sanitized html). */
-	description?: string | {
-		__html: string;
-	};
+	/** Description. */
+	description?: string;
 	/** Link URL. */
 	link: string;
+	/** Custom react component for the link (can be used to inject react router Link). */
+	linkAs?: "a" | any;
 	/** Props to pass to the link (minus those already set by the LinkPreview props). */
 	linkProps?: Omit<LinkProps, "color" | "colorVariant" | "href" | "target">;
 	/** Size variant. */
@@ -1447,6 +1486,8 @@ export interface LinkPreviewProps extends GenericProps {
 	thumbnailProps?: ThumbnailProps;
 	/** Title. */
 	title?: string;
+	/** Customize the title heading tag. */
+	titleHeading?: HeadingElement;
 }
 /**
  * LinkPreview component.
@@ -1856,6 +1897,8 @@ export interface CoreSelectProps extends GenericProps {
 	helper?: string;
 	/** Whether the select should close on click. */
 	closeOnClick?: boolean;
+	/** Icon (SVG path). */
+	icon?: string;
 	/** Whether the component is disabled or not. */
 	isDisabled?: boolean;
 	/** Whether the component is required or not. */

package/src/components/link-preview/__snapshots__/LinkPreview.test.tsx.snap

@@ -1,51 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<LinkPreview> Snapshots and structure should render correctly 1`] = `
-<div
-  className="lumx-link-preview lumx-link-preview--size-regular lumx-link-preview--theme-light"
->
-  <div
-    className="lumx-link-preview__wrapper"
-  >
-    <div
-      className="lumx-link-preview__container"
-    >
-      <div
-        className="lumx-link-preview__link"
-      >
-        <Link
-          className="lumx-link-preview__link"
-          color="primary"
-          colorVariant="N"
-          target="_blank"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<LinkPreview> Snapshots and structure should render correctly 2`] = `
-<div
-  className="lumx-link-preview lumx-link-preview--size-regular lumx-link-preview--theme-light"
->
-  <div
-    className="lumx-link-preview__wrapper"
-  >
-    <div
-      className="lumx-link-preview__container"
-    >
-      <div
-        className="lumx-link-preview__link"
-      >
-        <Link
-          className="lumx-link-preview__link"
-          color="primary"
-          colorVariant="N"
-          target="_blank"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;