@lumx/react 3.9.1 → 3.9.2-alpha.0

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.9.1",
-        "@lumx/icons": "^3.9.1",
+        "@lumx/core": "^3.9.2-alpha.0",
+        "@lumx/icons": "^3.9.2-alpha.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -110,5 +110,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.9.1"
+    "version": "3.9.2-alpha.0"
 }

package/src/components/side-navigation/SideNavigationItem.tsx

@@ -7,7 +7,7 @@ import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
 
 import { Emphasis, Icon, Size, IconButton, IconButtonProps } from '@lumx/react';
 
-import { Comp, GenericProps, isComponent } from '@lumx/react/utils/type';
+import { Comp, GenericProps, HasCloseMode, isComponent } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { renderLink } from '@lumx/react/utils/renderLink';
 import { renderButtonOrLink } from '@lumx/react/utils/renderButtonOrLink';
@@ -16,7 +16,7 @@ import { useId } from '@lumx/react/hooks/useId';
 /**
  * Defines the props of the component.
  */
-export interface SideNavigationItemProps extends GenericProps {
+export interface SideNavigationItemProps extends GenericProps, HasCloseMode {
     /** SideNavigationItem elements. */
     children?: ReactNode;
     /** Emphasis variant. */
@@ -36,11 +36,6 @@ export interface SideNavigationItemProps extends GenericProps {
     /** Props to pass to the toggle button (minus those already set by the SideNavigationItem props). */
     toggleButtonProps: Pick<IconButtonProps, 'label'> &
         Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color' | 'size'>;
-    /**
-     * Choose how the children are hidden when closed
-     * ('hide' keeps the children in DOM but hide them, 'unmount' remove the children from the DOM).
-     */
-    closeMode?: 'hide' | 'unmount';
     /** On action button click callback. */
     onActionClick?(evt: React.MouseEvent): void;
     /** On click callback. */

package/src/components/tooltip/Tooltip.stories.tsx

@@ -42,6 +42,14 @@ export const ForceOpen = {
     },
 };
 
+/** Hide on close instead of unmounting */
+export const CloseModeHide = {
+    args: {
+        ...OnAButton.args,
+        closeMode: 'hide',
+    },
+};
+
 /** Display a multiline tooltip */
 export const MultilineTooltip = {
     args: {

package/src/components/tooltip/Tooltip.test.tsx

@@ -158,6 +158,20 @@ describe(`<${Tooltip.displayName}>`, () => {
             // Children ref is stable
             expect(ref.current === element).toBe(true);
         });
+
+        it.only('should render in closeMode=hide', async () => {
+            const { tooltip, anchorWrapper } = await setup({
+                label: 'Tooltip label',
+                children: <Button>Anchor</Button>,
+                closeMode: 'hide',
+            });
+            screen.logTestingPlaygroundURL()
+            expect(tooltip).toBeInTheDocument();
+            expect(anchorWrapper).toBeInTheDocument();
+            expect(anchorWrapper).toHaveAttribute('aria-describedby', tooltip?.id);
+            const button = screen.queryByRole('button', { name: 'Anchor' });
+            expect(button?.parentElement).toBe(anchorWrapper);
+        });
     });
 
     describe('activation', () => {

package/src/components/tooltip/Tooltip.tsx

@@ -6,7 +6,7 @@ import { usePopper } from 'react-popper';
 import classNames from 'classnames';
 
 import { DOCUMENT } from '@lumx/react/constants';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { Comp, GenericProps, HasCloseMode } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { Placement } from '@lumx/react/components/popover';
@@ -22,7 +22,7 @@ export type TooltipPlacement = Extract<Placement, 'top' | 'right' | 'bottom' | '
 /**
  * Defines the props of the component.
  */
-export interface TooltipProps extends GenericProps {
+export interface TooltipProps extends GenericProps, HasCloseMode {
     /** Anchor (element on which we activate the tooltip). */
     children: ReactNode;
     /** Delay (in ms) before closing the tooltip. */
@@ -50,6 +50,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 const DEFAULT_PROPS: Partial<TooltipProps> = {
     placement: Placement.BOTTOM,
+    closeMode: 'hide',
 };
 
 /**
@@ -65,9 +66,9 @@ const ARROW_SIZE = 8;
  * @return React element.
  */
 export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { label, children, className, delay, placement, forceOpen, ...forwardedProps } = props;
+    const { label, children, className, delay, placement, forceOpen, closeMode, ...forwardedProps } = props;
     // Disable in SSR.
-    if (!DOCUMENT) {
+    if (!DOCUMENT && closeMode === 'unmount') {
         return <>{children}</>;
     }
 
@@ -88,28 +89,38 @@ export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, re
     const position = attributes?.popper?.['data-popper-placement'] ?? placement;
     const { isOpen: isActivated, onPopperMount } = useTooltipOpen(delay, anchorElement);
     const isOpen = (isActivated || forceOpen) && !!label;
-    const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isOpen, id, label);
+    const isMounted = isOpen || closeMode === 'hide';
+    const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isMounted, id, label);
+
+    const labelLines = label ? label.split('\n') : [];
 
     return (
         <>
             <TooltipContextProvider>{wrappedChildren}</TooltipContextProvider>
-            {isOpen &&
+            {isMounted &&
                 createPortal(
                     <div
                         ref={mergeRefs(ref, setPopperElement, onPopperMount)}
                         {...forwardedProps}
                         id={id}
                         role="tooltip"
-                        aria-label={label}
-                        className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, position }))}
+                        aria-label={label || ''}
+                        className={classNames(
+                            className,
+                            handleBasicClasses({
+                                prefix: CLASSNAME,
+                                position,
+                                hidden: !isOpen && closeMode === 'hide',
+                            }),
+                        )}
                         style={styles.popper}
                         {...attributes.popper}
                     >
                         <div className={`${CLASSNAME}__arrow`} />
                         <div className={`${CLASSNAME}__inner`}>
-                            {label.indexOf('\n') !== -1
-                                ? label.split('\n').map((sentence: string) => <p key={sentence}>{sentence}</p>)
-                                : label}
+                            {labelLines.map((line) => (
+                                <p key={line}>{line}</p>
+                            ))}
                         </div>
                     </div>,
                     document.body,

package/src/utils/type.ts

@@ -59,6 +59,15 @@ export interface HasClassName {
     className?: string;
 }
 
+
+export interface HasCloseMode {
+    /**
+     * Choose how the children are hidden when closed
+     * ('hide' keeps the children in DOM but hide them, 'unmount' remove the children from the DOM).
+     */
+    closeMode?: 'hide' | 'unmount';
+}
+
 /**
  * Define a generic props types.
  */