@lumx/react 2.2.12-alpha.2 → 2.2.14

package/src/components/comment-block/CommentBlock.stories.tsx

@@ -10,18 +10,21 @@ export const WithHeaderActions = ({ theme }: any) => (
     <CommentBlock
         hasActions
         actions={[
-            <Button key="button0" emphasis={Emphasis.low} size={Size.s} leftIcon={mdiHeart}>
+            <Button key="button0" theme={theme} emphasis={Emphasis.low} size={Size.s} leftIcon={mdiHeart}>
                 24 likes
             </Button>,
-            <Button key="button1" emphasis={Emphasis.low} size={Size.s} leftIcon={mdiReply}>
+            <Button key="button1" theme={theme} emphasis={Emphasis.low} size={Size.s} leftIcon={mdiReply}>
                 Reply
             </Button>,
         ]}
         theme={theme}
         avatarProps={{ image: avatarImageKnob(), alt: 'Avatar' }}
-        date="4 hours ago"
+        date="5 days"
+        fullDate="Monday, March 30, 2021 at 4:06 PM"
         name="Emmitt O. Lum"
         text="All the rumors have finally died down and many skeptics have tightened their lips, the iPod does support video format now on its fifth generation."
-        headerActions={<IconButton label="Actions" icon={mdiDotsHorizontal} emphasis={Emphasis.low} size={Size.s} />}
+        headerActions={
+            <IconButton label="Actions" icon={mdiDotsHorizontal} theme={theme} emphasis={Emphasis.low} size={Size.s} />
+        }
     />
 );

package/src/components/comment-block/CommentBlock.tsx

@@ -2,7 +2,7 @@ import React, { Children, forwardRef, KeyboardEvent, KeyboardEventHandler, React
 
 import classNames from 'classnames';
 
-import { Avatar, Size, Theme } from '@lumx/react';
+import { Avatar, Size, Theme, Tooltip } from '@lumx/react';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses, ValueOf } from '@lumx/react/utils';
 
 import isFunction from 'lodash/isFunction';
@@ -27,8 +27,10 @@ export interface CommentBlockProps extends GenericProps {
     avatarProps: AvatarProps;
     /** Comment block replies. */
     children?: ReactNode;
-    /** Comment date. */
+    /** Comment date with the minimal timestamp informations (xx minutes, x hours, yesterday, 6 days, Month Day, Month Day Year)*/
     date: string;
+    /** Comment date with the full timestamp informations (day, month, year, time) */
+    fullDate?: string;
     /** Whether the component has actions to display or not. */
     hasActions?: boolean;
     /** Action toolbar header content. */
@@ -85,6 +87,7 @@ export const CommentBlock: Comp<CommentBlockProps, HTMLDivElement> = forwardRef(
         children,
         className,
         date,
+        fullDate,
         hasActions,
         headerActions,
         isOpen,
@@ -146,11 +149,18 @@ export const CommentBlock: Comp<CommentBlockProps, HTMLDivElement> = forwardRef(
                             >
                                 {name}
                             </span>
-                            {date && <span className={`${CLASSNAME}__date`}>{date}</span>}
                             {headerActions && <span className={`${CLASSNAME}__header-actions`}>{headerActions}</span>}
                         </div>
 
                         <div className={`${CLASSNAME}__text`}>{text}</div>
+                        {date &&
+                            (fullDate ? (
+                                <Tooltip label={fullDate} placement="top">
+                                    <span className={`${CLASSNAME}__date`}>{date}</span>
+                                </Tooltip>
+                            ) : (
+                                <span className={`${CLASSNAME}__date`}>{date}</span>
+                            ))}
                     </div>
                     {hasActions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}
                 </div>

package/src/components/comment-block/__snapshots__/CommentBlock.test.tsx.snap

@@ -36,11 +36,6 @@ exports[`<CommentBlock> Snapshots and structure should render story 'WithHeaderA
           >
             Emmitt O. Lum
           </span>
-          <span
-            className="lumx-comment-block__date"
-          >
-            4 hours ago
-          </span>
           <span
             className="lumx-comment-block__header-actions"
           >
@@ -58,6 +53,16 @@ exports[`<CommentBlock> Snapshots and structure should render story 'WithHeaderA
         >
           All the rumors have finally died down and many skeptics have tightened their lips, the iPod does support video format now on its fifth generation.
         </div>
+        <Tooltip
+          label="Monday, March 30, 2021 at 4:06 PM"
+          placement="top"
+        >
+          <span
+            className="lumx-comment-block__date"
+          >
+            5 days
+          </span>
+        </Tooltip>
       </div>
       <div
         className="lumx-comment-block__actions"

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

@@ -182,6 +182,7 @@ exports[`<Dialog> Snapshots and structure should render story DialogWithFocusabl
         >
           <List
             isClickable={true}
+            tabIndex={-1}
           >
             <ListItem
               isSelected={true}

package/src/components/dropdown/Dropdown.tsx

@@ -58,6 +58,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}
@@ -93,6 +95,7 @@ const DEFAULT_PROPS: Partial<DropdownProps> = {
     fitWithinViewportHeight: true,
     placement: Placement.BOTTOM_START,
     shouldFocusOnOpen: true,
+    focusAnchorOnClose: true,
 };
 
 /**
@@ -114,6 +117,7 @@ export const Dropdown: Comp<DropdownProps, HTMLDivElement> = forwardRef((props,
         fitWithinViewportHeight,
         isOpen,
         offset,
+        focusAnchorOnClose,
         onClose,
         onInfiniteScroll,
         placement,
@@ -147,6 +151,7 @@ export const Dropdown: Comp<DropdownProps, HTMLDivElement> = forwardRef((props,
         <Popover
             ref={ref}
             {...forwardedProps}
+            focusAnchorOnClose={focusAnchorOnClose}
             anchorRef={anchorRef}
             className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}
             elevation={0 as any}

package/src/components/dropdown/__snapshots__/Dropdown.test.tsx.snap

@@ -13,6 +13,7 @@ exports[`<Dropdown> Snapshots and structure should render correctly 1`] = `
   elevation={0}
   fitToAnchorWidth={true}
   fitWithinViewportHeight={true}
+  focusAnchorOnClose={true}
   focusElement={
     Object {
       "current": null,

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/radio-button/RadioButton.tsx

@@ -15,6 +15,8 @@ export interface RadioButtonProps extends GenericProps {
     helper?: string;
     /** Native input id property. */
     id?: string;
+    /** Native input ref. */
+    inputRef?: React.Ref<HTMLInputElement>;
     /** Whether it is checked or not. */
     isChecked?: boolean;
     /** Whether the component is disabled or not. */
@@ -62,6 +64,7 @@ export const RadioButton: Comp<RadioButtonProps, HTMLDivElement> = forwardRef((p
         disabled,
         helper,
         id,
+        inputRef,
         isChecked = checked,
         isDisabled = disabled,
         label,
@@ -96,6 +99,7 @@ export const RadioButton: Comp<RadioButtonProps, HTMLDivElement> = forwardRef((p
         >
             <div className={`${CLASSNAME}__input-wrapper`}>
                 <input
+                    ref={inputRef}
                     className={`${CLASSNAME}__input-native`}
                     disabled={isDisabled}
                     id={radioButtonId}

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/src/stories/generated/Toolbar/Demos.stories.tsx

@@ -6,4 +6,5 @@ export default { title: 'LumX components/toolbar/Toolbar Demos' };
 export { App as Back } from './back';
 export { App as Default } from './default';
 export { App as Dialog } from './dialog';
+export { App as FileWidget } from './file-widget';
 export { App as MediaPicker } from './media-picker';

package/types.d.ts

@@ -585,6 +585,8 @@ export interface CheckboxProps extends GenericProps {
 	helper?: string;
 	/** Native input id property. */
 	id?: string;
+	/** Native input ref. */
+	inputRef?: React.Ref<HTMLInputElement>;
 	/** Whether it is checked or not. */
 	isChecked?: boolean;
 	/** Whether the component is disabled or not. */
@@ -688,8 +690,10 @@ export interface CommentBlockProps extends GenericProps {
 	avatarProps: AvatarProps;
 	/** Comment block replies. */
 	children?: ReactNode;
-	/** Comment date. */
+	/** Comment date with the minimal timestamp informations (xx minutes, x hours, yesterday, 6 days, Month Day, Month Day Year)*/
 	date: string;
+	/** Comment date with the full timestamp informations (day, month, year, time) */
+	fullDate?: string;
 	/** Whether the component has actions to display or not. */
 	hasActions?: boolean;
 	/** Action toolbar header content. */
@@ -938,6 +942,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 +1018,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}
@@ -1474,6 +1482,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.
 	 *
@@ -1788,6 +1798,8 @@ export interface RadioButtonProps extends GenericProps {
 	helper?: string;
 	/** Native input id property. */
 	id?: string;
+	/** Native input ref. */
+	inputRef?: React.Ref<HTMLInputElement>;
 	/** Whether it is checked or not. */
 	isChecked?: boolean;
 	/** Whether the component is disabled or not. */