@lumx/react 3.6.1-alpha.1 → 3.6.1

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.6.1-alpha.1",
-        "@lumx/icons": "^3.6.1-alpha.1",
+        "@lumx/core": "^3.6.1",
+        "@lumx/icons": "^3.6.1",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -113,5 +113,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.6.1-alpha.1"
+    "version": "3.6.1"
 }

package/src/components/index.ts

@@ -172,6 +172,19 @@ export const Kind = {
 } as const;
 export type Kind = ValueOf<typeof Kind>;
 
+/**
+ * All available white-space values
+ * */
+export const WhiteSpace = {
+    normal: 'normal',
+    nowrap: 'nowrap',
+    pre: 'pre',
+    'pre-wrap': 'pre-wrap',
+    'pre-line': 'pre-line',
+    'break-spaces': 'break-spaces',
+};
+export type WhiteSpace = ValueOf<typeof WhiteSpace>;
+
 /**
  * Re-exporting some utils types.
  */

package/src/components/text/Text.stories.tsx

@@ -6,9 +6,10 @@ import { textElementArgType } from '@lumx/react/stories/controls/element';
 import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
 import { loremIpsum } from '@lumx/react/stories/utils/lorem';
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-import { ColorPalette, ColorVariant, Icon } from '@lumx/react';
+import { ColorPalette, ColorVariant, Icon, WhiteSpace } from '@lumx/react';
 import { mdiEarth, mdiHeart } from '@lumx/icons';
 import { withResizableBox } from '@lumx/react/stories/decorators/withResizableBox';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
 
 import { Text } from './Text';
 
@@ -22,6 +23,7 @@ export default {
         typography: allTypographyArgType,
         color: colorArgType,
         colorVariant: colorVariantArgType,
+        whiteSpace: getSelectArgType(WhiteSpace),
     },
 };
 
@@ -71,6 +73,29 @@ export const NoWrap = {
     },
 };
 
+/**
+ * Long text with line breaks
+ */
+export const AllWhiteSpace = {
+    args: {
+        ...Default.args,
+        children: `
+        But ere she from the church-door stepped She smiled and told us why: 'It was a wicked woman's curse,' Quoth she,
+        'and what care I?' She smiled, and smiled, and passed it off Ere from the door she stept—
+      `,
+    },
+    decorators: [
+        withCombinations({
+            combinations: {
+                rows: { key: 'whiteSpace', options: Object.values(WhiteSpace) },
+            },
+            tableStyle: { width: 500, tableLayout: 'fixed' },
+            firstColStyle: { width: 100 },
+            cellStyle: { border: '1px solid #000', width: '100%' },
+        }),
+    ],
+};
+
 /**
  * Long text with single line truncate ellipsis
  */

package/src/components/text/Text.test.tsx

@@ -61,6 +61,12 @@ describe(`<${Text.displayName}>`, () => {
             expect(element).toHaveClass('lumx-text--no-wrap');
         });
 
+        it('should render with custom whiteSpace', () => {
+            const { element } = setup({ whiteSpace: 'pre-wrap' });
+            expect(element.tagName).toBe('SPAN');
+            expect(element).toHaveStyle({ '--lumx-text-white-space': 'pre-wrap' });
+        });
+
         it('should wrap icons with spaces', () => {
             const { element } = setup({ children: ['Some text', <Icon key="icon" icon={mdiEarth} />, 'with icon'] });
             // Spaces have been inserted around the icon.

package/src/components/text/Text.tsx

@@ -1,6 +1,6 @@
 import React, { Children, Fragment, forwardRef } from 'react';
 
-import { Icon, ColorPalette, ColorVariant, Typography } from '@lumx/react';
+import { Icon, ColorPalette, ColorVariant, Typography, WhiteSpace } from '@lumx/react';
 import { Comp, GenericProps, TextElement, isComponent } from '@lumx/react/utils/type';
 import {
     getFontColorClassName,
@@ -41,6 +41,12 @@ export interface TextProps extends GenericProps {
      * (automatically activated when single line text truncate is activated).
      */
     noWrap?: boolean;
+    /**
+     * WhiteSpace variant
+     * Ignored when `noWrap` is set to true
+     * Ignored when `truncate` is set to true or lines: 1
+     * */
+    whiteSpace?: WhiteSpace;
 }
 
 /**
@@ -75,6 +81,7 @@ export const Text: Comp<TextProps> = forwardRef((props, ref) => {
         noWrap,
         typography,
         truncate,
+        whiteSpace,
         style,
         ...forwardedProps
     } = props;
@@ -88,6 +95,15 @@ export const Text: Comp<TextProps> = forwardRef((props, ref) => {
     const isTruncatedMultiline = !!truncateLinesStyle;
     const isTruncated = !!truncate;
 
+    /**
+     * Add custom white-space style if specified
+     * Disabled if noWrap is specified
+     * Disabled if truncated on one-line
+     * */
+    const whiteSpaceStyle = !noWrap &&
+        !(isTruncated && !isTruncatedMultiline) &&
+        whiteSpace && { '--lumx-text-white-space': whiteSpace };
+
     return (
         <Component
             ref={ref as React.Ref<any>}
@@ -102,7 +118,7 @@ export const Text: Comp<TextProps> = forwardRef((props, ref) => {
                 colorClass,
                 noWrap && `${CLASSNAME}--no-wrap`,
             )}
-            style={{ ...truncateLinesStyle, ...style }}
+            style={{ ...truncateLinesStyle, ...whiteSpaceStyle, ...style }}
             {...forwardedProps}
         >
             {children &&

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

@@ -1,13 +1,8 @@
 import React from 'react';
 
 import { Button } from '@lumx/react';
-import { act, render, waitFor } from '@testing-library/react';
-import {
-    findByClassName,
-    getByClassName,
-    queryAllByTagName,
-    queryByClassName,
-} from '@lumx/react/testing/utils/queries';
+import { screen, render, waitFor } from '@testing-library/react';
+import { queryAllByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import userEvent from '@testing-library/user-event';
 
@@ -16,23 +11,19 @@ import { Tooltip, TooltipProps } from './Tooltip';
 const CLASSNAME = Tooltip.className as string;
 
 jest.mock('uid', () => ({ uid: () => 'uid' }));
+// Skip delays
+jest.mock('@lumx/react/constants', () => ({
+    ...jest.requireActual('@lumx/react/constants'),
+    TOOLTIP_HOVER_DELAY: { open: 0, close: 0 },
+}));
 
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
 const setup = async (propsOverride: Partial<TooltipProps> = {}) => {
-    const props: any = { forceOpen: true, ...propsOverride };
-    // Hack to remove act() warning in console
-    await (act as any)(() =>
-        Promise.resolve(
-            render(
-                <Tooltip label="Tooltip" {...props}>
-                    {props.children || 'Anchor'}
-                </Tooltip>,
-            ),
-        ),
-    );
-    const tooltip = queryByClassName(document.body, CLASSNAME);
+    const props: any = { forceOpen: true, label: 'Tooltip label', children: 'Anchor', ...propsOverride };
+    render(<Tooltip {...props} />);
+    const tooltip = screen.queryByRole('tooltip', { name: props.label });
     const anchorWrapper = queryByClassName(document.body, 'lumx-tooltip-anchor-wrapper');
     return { props, tooltip, anchorWrapper };
 };
@@ -67,7 +58,7 @@ describe(`<${Tooltip.displayName}>`, () => {
             });
             expect(tooltip).toBeInTheDocument();
             expect(anchorWrapper).not.toBeInTheDocument();
-            const button = queryByClassName(document.body, Button.className as string);
+            const button = screen.queryByRole('button', { name: 'Anchor' });
             expect(button).toHaveAttribute('aria-describedby', tooltip?.id);
         });
 
@@ -80,7 +71,7 @@ describe(`<${Tooltip.displayName}>`, () => {
             expect(tooltip).toBeInTheDocument();
             expect(anchorWrapper).toBeInTheDocument();
             expect(anchorWrapper).toHaveAttribute('aria-describedby', tooltip?.id);
-            const button = queryByClassName(document.body, Button.className as string);
+            const button = screen.queryByRole('button', { name: 'Anchor' });
             expect(button?.parentElement).toBe(anchorWrapper);
         });
 
@@ -108,11 +99,11 @@ describe(`<${Tooltip.displayName}>`, () => {
             expect(tooltip).not.toBeInTheDocument();
 
             // Hover anchor button
-            const button = getByClassName(document.body, Button.className as string);
+            const button = screen.getByRole('button', { name: 'Anchor' });
             await userEvent.hover(button);
 
             // Tooltip opened
-            tooltip = await findByClassName(document.body, CLASSNAME);
+            tooltip = await screen.findByRole('tooltip', { name: 'Tooltip label' });
             expect(tooltip).toBeInTheDocument();
             expect(button).toHaveAttribute('aria-describedby', tooltip?.id);
 
@@ -135,11 +126,11 @@ describe(`<${Tooltip.displayName}>`, () => {
             expect(tooltip).not.toBeInTheDocument();
 
             // Hover anchor button
-            const button = getByClassName(document.body, Button.className as string);
+            const button = screen.getByRole('button', { name: 'Anchor' });
             await userEvent.hover(button);
 
             // Tooltip opened
-            tooltip = await findByClassName(document.body, CLASSNAME);
+            tooltip = await screen.findByRole('tooltip', { name: 'Tooltip label' });
             expect(tooltip).toBeInTheDocument();
             expect(button).toHaveAttribute('aria-describedby', tooltip?.id);
 
@@ -157,7 +148,7 @@ describe(`<${Tooltip.displayName}>`, () => {
             });
         });
 
-        it('should activate on anchor focus', async () => {
+        it('should activate on anchor focus and close on escape', async () => {
             let { tooltip } = await setup({
                 label: 'Tooltip label',
                 children: <Button>Anchor</Button>,
@@ -168,21 +159,27 @@ describe(`<${Tooltip.displayName}>`, () => {
 
             // Focus anchor button
             await userEvent.tab();
-            const button = getByClassName(document.body, Button.className as string);
+            const button = screen.getByRole('button', { name: 'Anchor' });
             expect(button).toHaveFocus();
 
             // Tooltip opened
-            tooltip = await findByClassName(document.body, CLASSNAME);
+            tooltip = await screen.findByRole('tooltip', { name: 'Tooltip label' });
             expect(tooltip).toBeInTheDocument();
             expect(button).toHaveAttribute('aria-describedby', tooltip?.id);
 
-            // Focus next element
-            userEvent.tab();
-            await waitFor(() => {
-                expect(button).not.toHaveFocus();
-                // Tooltip closed
-                expect(tooltip).not.toBeInTheDocument();
-            });
+            // Focus next element => close tooltip
+            await userEvent.tab();
+            expect(button).not.toHaveFocus();
+            expect(tooltip).not.toBeInTheDocument();
+
+            // Focus again
+            await userEvent.tab({ shift: true });
+            tooltip = await screen.findByRole('tooltip', { name: 'Tooltip label' });
+            expect(tooltip).toBeInTheDocument();
+
+            // Escape pressed => close tooltip
+            await userEvent.keyboard('{Escape}');
+            expect(tooltip).not.toBeInTheDocument();
         });
     });
 

package/src/components/tooltip/useTooltipOpen.tsx

@@ -17,7 +17,7 @@ export function useTooltipOpen(delay: number | undefined, anchorElement: HTMLEle
 
     // Global close on escape
     const [closeCallback, setCloseCallback] = useState<undefined | (() => void)>(undefined);
-    useCallbackOnEscape(closeCallback);
+    useCallbackOnEscape(isOpen ? closeCallback : undefined);
 
     useEffect(() => {
         if (!anchorElement) {