@lumx/react 2.2.21 → 2.2.22

package/src/components/chip/Chip.tsx

@@ -1,7 +1,7 @@
 import { Color, ColorPalette, Size, Theme } from '@lumx/react';
 import { useStopPropagation } from '@lumx/react/hooks/useStopPropagation';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, onEnterPressed } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme, onEnterPressed } from '@lumx/react/utils';
 
 import classNames from 'classnames';
 
@@ -16,7 +16,7 @@ type ChipSize = Extract<Size, 's' | 'm'>;
 /**
  * Defines the props of the component.
  */
-export interface ChipProps extends GenericProps {
+export interface ChipProps extends GenericProps, HasTheme {
     /** A component to be rendered after the content. */
     after?: ReactNode;
     /** A component to be rendered before the content. */
@@ -33,8 +33,6 @@ export interface ChipProps extends GenericProps {
     isSelected?: boolean;
     /** Size variant. */
     size?: ChipSize;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
     /** On "after" element clicked callback. */
     onAfterClick?: MouseEventHandler;
     /** On "before" element clicked callback. */

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

@@ -3,7 +3,7 @@ import React, { Children, forwardRef, KeyboardEvent, KeyboardEventHandler, React
 import classNames from 'classnames';
 
 import { Avatar, Size, Theme, Tooltip } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, ValueOf } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme, ValueOf } from '@lumx/react/utils';
 
 import isFunction from 'lodash/isFunction';
 import { AvatarProps } from '../avatar/Avatar';
@@ -20,7 +20,7 @@ export type CommentBlockVariant = ValueOf<typeof CommentBlockVariant>;
 /**
  * Defines the props of the component.
  */
-export interface CommentBlockProps extends GenericProps {
+export interface CommentBlockProps extends GenericProps, HasTheme {
     /** Action toolbar content. */
     actions?: ReactNode;
     /** Props to pass to the avatar. */
@@ -49,8 +49,6 @@ export interface CommentBlockProps extends GenericProps {
     onMouseLeave?(): void;
     /** Comment content. */
     text: ReactNode | string;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
     /** Comment variant. */
     variant?: CommentBlockVariant;
 }

package/src/components/dialog/Dialog.stories.tsx

@@ -1,4 +1,3 @@
-import noop from 'lodash/noop';
 import { mdiClose } from '@lumx/icons';
 import {
     AlertDialog,
@@ -302,6 +301,7 @@ export const DialogFocusTrap = ({ theme }: any) => {
         setValue(item);
     };
     const [date, setDate] = useState<Date | undefined>(new Date('2020-05-18'));
+    const [date2, setDate2] = useState<Date | undefined>();
 
     const datePickerDialogButtonRef = useRef<HTMLButtonElement>(null);
     const [isDatePickerDialogOpen, closeDatePickerDialog, openDatePickerDialog] = useBooleanState(false);
@@ -381,8 +381,8 @@ export const DialogFocusTrap = ({ theme }: any) => {
                                     label="Start date"
                                     placeholder="Pick a date"
                                     theme={theme}
-                                    onChange={noop}
-                                    value={undefined}
+                                    onChange={setDate2}
+                                    value={date2}
                                     nextButtonProps={{ label: 'Next month' }}
                                     previousButtonProps={{ label: 'Previous month' }}
                                     defaultMonth={new Date('2020-05-18')}

package/src/components/dialog/Dialog.tsx

@@ -1,4 +1,4 @@
-import React, { Children, forwardRef, ReactElement, ReactNode, RefObject, useMemo, useRef, useState } from 'react';
+import React, { Children, forwardRef, ReactElement, ReactNode, Ref, RefObject, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import classNames from 'classnames';
@@ -42,7 +42,7 @@ export interface DialogProps extends GenericProps {
     /** Reference to the parent element that triggered modal opening (will get back focus on close). */
     parentElement?: RefObject<HTMLElement>;
     /** Reference to the dialog content element. */
-    contentRef?: RefObject<HTMLDivElement>;
+    contentRef?: Ref<HTMLDivElement>;
     /** Reference to the of the element that should get the focus when the dialogs opens. By default, the first child will take focus. */
     focusElement?: RefObject<HTMLElement>;
     /** Whether to keep the dialog open on clickaway or escape press. */
@@ -176,10 +176,13 @@ export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref)
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const clickAwayRefs = useRef([wrapperRef]);
 
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const rootRef = useRef<HTMLDivElement>(null);
+
     return isOpen || isVisible
         ? createPortal(
               <div
-                  ref={ref}
+                  ref={mergeRefs(rootRef, ref)}
                   {...forwardedProps}
                   className={classNames(
                       className,
@@ -196,7 +199,11 @@ export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref)
                   <div className={`${CLASSNAME}__overlay`} />
 
                   <section className={`${CLASSNAME}__container`} role="dialog" aria-modal="true" {...dialogProps}>
-                      <ClickAwayProvider callback={!preventAutoClose && onClose} refs={clickAwayRefs}>
+                      <ClickAwayProvider
+                          callback={!preventAutoClose && onClose}
+                          childrenRefs={clickAwayRefs}
+                          parentRef={rootRef}
+                      >
                           <div className={`${CLASSNAME}__wrapper`} ref={wrapperRef}>
                               {(header || headerChildContent) && (
                                   <header

package/src/components/divider/Divider.tsx

@@ -3,15 +3,12 @@ import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 
 import { Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
 
 /**
  * Defines the props of the component.
  */
-export interface DividerProps extends GenericProps {
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
-}
+export interface DividerProps extends GenericProps, HasTheme {}
 
 /**
  * Component display name.

package/src/components/drag-handle/DragHandle.tsx

@@ -4,15 +4,12 @@ import classNames from 'classnames';
 
 import { mdiDragVertical } from '@lumx/icons';
 import { ColorPalette, Icon, Size, Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
 
 /**
  * Defines the props of the component.
  */
-export interface DragHandleProps extends GenericProps {
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
-}
+export interface DragHandleProps extends GenericProps, HasTheme {}
 
 /**
  * Component display name.

package/src/components/dropdown/Dropdown.tsx

@@ -3,7 +3,7 @@ import React, { cloneElement, forwardRef, useMemo, useRef } from 'react';
 import classNames from 'classnames';
 
 import { List, ListProps } from '@lumx/react/components/list/List';
-import { Offset, Placement, Popover } from '@lumx/react/components/popover/Popover';
+import { Offset, Placement, Popover, PopoverProps } from '@lumx/react/components/popover/Popover';
 import { useInfiniteScroll } from '@lumx/react/hooks/useInfiniteScroll';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses, isComponent } from '@lumx/react/utils';
 
@@ -11,10 +11,11 @@ import { Comp, GenericProps, getRootClassName, handleBasicClasses, isComponent }
  * Defines the props of the component.
  */
 export interface DropdownProps extends GenericProps {
-    /** Reference to the element around which the dropdown is placed.
+    /**
+     * Reference to the element around which the dropdown is placed.
      * @see {@link PopoverProps#anchorRef}
      */
-    anchorRef: React.RefObject<HTMLElement>;
+    anchorRef: PopoverProps['anchorRef'];
     /** Dropdown content. */
     children: React.ReactNode;
     /**

package/src/components/expansion-panel/ExpansionPanel.tsx

@@ -15,6 +15,7 @@ import {
     GenericProps,
     getRootClassName,
     handleBasicClasses,
+    HasTheme,
     isComponent,
     partitionMulti,
 } from '@lumx/react/utils';
@@ -22,7 +23,7 @@ import {
 /**
  * Defines the props of the component.
  */
-export interface ExpansionPanelProps extends GenericProps {
+export interface ExpansionPanelProps extends GenericProps, HasTheme {
     /** Whether the expansion panel has a background. */
     hasBackground?: boolean;
     /** Whether the header has a divider. */
@@ -31,8 +32,6 @@ export interface ExpansionPanelProps extends GenericProps {
     isOpen?: boolean;
     /** Label text (overwritten if a `<header>` is provided in the children). */
     label?: string;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
     /** On open callback. */
     onOpen?: Callback;
     /** On close callback. */

package/src/components/flag/Flag.tsx

@@ -2,11 +2,9 @@ import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 
 import { ColorPalette, Icon, Size, Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
 
-export interface FlagProps extends GenericProps {
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
+export interface FlagProps extends GenericProps, HasTheme {
     /** Color of the component. */
     color?: ColorPalette;
     /** Icon to use before the label. */

package/src/components/generic-block/GenericBlock.stories.tsx

@@ -1,149 +1,90 @@
 import React from 'react';
 import { mdiPencil } from '@lumx/icons';
 import { GenericBlock, Button, Icon, Size, Orientation, Alignment } from '@lumx/react';
+import { HasTheme } from '@lumx/react/utils';
 
 export default { title: 'LumX components/generic-block/GenericBlock' };
 
-export const Horizontal = ({ theme }: any) => (
+const redBorderStyle = { border: '1px solid red' };
+
+/**
+ * Fill sections using props
+ */
+export const SectionsInProps = ({ theme }: HasTheme) => (
     <GenericBlock
-        orientation={Orientation.horizontal}
         figure={<Icon icon={mdiPencil} size={Size.m} />}
-        actionsProps={{
-            style: { border: '1px solid red' },
-        }}
-        figureProps={{
-            style: { border: '1px solid red' },
-        }}
-        contentProps={{
-            style: { border: '1px solid red' },
-        }}
+        actionsProps={{ style: redBorderStyle }}
+        figureProps={{ style: redBorderStyle }}
+        contentProps={{ style: redBorderStyle }}
         actions={<Button theme={theme}>Button</Button>}
     >
         Content
     </GenericBlock>
 );
 
-export const HorizontalWithAlignment = ({ theme }: any) => (
-    <GenericBlock
-        orientation={Orientation.horizontal}
-        figure={<Icon icon={mdiPencil} size={Size.m} />}
-        actionsProps={{
-            fillSpace: true,
-            style: { border: '1px solid red' },
-            vAlign: 'center',
-        }}
-        figureProps={{
-            style: { border: '1px solid red' },
-        }}
-        contentProps={{
-            style: { border: '1px solid red' },
-        }}
-        actions={<Button theme={theme}>Centered button</Button>}
-    >
-        Content
+/**
+ * Fill sections using child section components.
+ */
+export const SectionsInChildren = ({ theme }: HasTheme) => (
+    <GenericBlock>
+        <GenericBlock.Figure style={redBorderStyle}>
+            <Icon icon={mdiPencil} size={Size.m} />
+        </GenericBlock.Figure>
+        <GenericBlock.Content style={redBorderStyle}>Content</GenericBlock.Content>
+        <GenericBlock.Actions style={redBorderStyle}>
+            <Button theme={theme}>Button</Button>
+        </GenericBlock.Actions>
     </GenericBlock>
 );
 
-export const HorizontalTop = ({ theme }: any) => (
-    <GenericBlock
-        orientation={Orientation.horizontal}
-        hAlign={Alignment.top}
-        figure={<Icon icon={mdiPencil} size={Size.m} />}
-        actionsProps={{
-            style: { border: '1px solid red' },
-        }}
-        figureProps={{
-            style: { border: '1px solid red' },
-        }}
-        contentProps={{
-            style: { border: '1px solid red' },
-        }}
-        actions={<Button theme={theme}>Centered button</Button>}
-    >
-        Content
+export const Vertical = ({ theme }: HasTheme) => (
+    <GenericBlock orientation={Orientation.vertical}>
+        <GenericBlock.Figure style={redBorderStyle}>
+            <Icon icon={mdiPencil} size={Size.m} />
+        </GenericBlock.Figure>
+        <GenericBlock.Content style={redBorderStyle}>Content</GenericBlock.Content>
+        <GenericBlock.Actions fillSpace style={redBorderStyle}>
+            <Button theme={theme}>Button</Button>
+        </GenericBlock.Actions>
     </GenericBlock>
 );
 
-export const Vertical = ({ theme }: any) => (
-    <GenericBlock
-        orientation={Orientation.vertical}
-        figure={<Icon icon={mdiPencil} size={Size.m} />}
-        actionsProps={{
-            fillSpace: true,
-            style: { border: '1px solid red' },
-        }}
-        figureProps={{
-            style: { border: '1px solid red' },
-        }}
-        contentProps={{
-            style: { border: '1px solid red' },
-        }}
-        actions={<Button theme={theme}>Button</Button>}
-    >
-        Content
+export const Horizontal = ({ theme }: HasTheme) => (
+    <GenericBlock orientation={Orientation.horizontal}>
+        <GenericBlock.Figure style={redBorderStyle}>
+            <Icon icon={mdiPencil} size={Size.m} />
+        </GenericBlock.Figure>
+        <GenericBlock.Content style={redBorderStyle}>Content</GenericBlock.Content>
+        <GenericBlock.Actions style={redBorderStyle}>
+            <Button theme={theme}>Button</Button>
+        </GenericBlock.Actions>
     </GenericBlock>
 );
 
-export const GapSizes = ({ theme }: any) => (
-    <>
-        <GenericBlock
-            orientation={Orientation.vertical}
-            figure={<Icon icon={mdiPencil} size={Size.m} />}
-            gap={Size.regular}
-            style={{ marginBottom: 40 }}
-            actionsProps={{
-                style: { border: '1px solid red' },
-            }}
-            figureProps={{
-                style: { border: '1px solid red' },
-            }}
-            contentProps={{
-                style: { border: '1px solid red' },
-            }}
-            actions={<Button theme={theme}>Button</Button>}
-        >
-            <h2>Small gap size</h2>
-            <p>For small blocks</p>
-        </GenericBlock>
-
-        <GenericBlock
-            orientation={Orientation.vertical}
-            figure={<Icon icon={mdiPencil} size={Size.m} />}
-            gap={Size.big}
-            style={{ marginBottom: 40 }}
-            actionsProps={{
-                style: { border: '1px solid red' },
-            }}
-            figureProps={{
-                style: { border: '1px solid red' },
-            }}
-            contentProps={{
-                style: { border: '1px solid red' },
-            }}
-            actions={<Button theme={theme}>Button</Button>}
-        >
-            <h2>Medium gap size</h2>
-            <p>For medium blocks</p>
-        </GenericBlock>
+export const HorizontalTop = ({ theme }: HasTheme) => (
+    <GenericBlock orientation={Orientation.horizontal} hAlign={Alignment.top}>
+        <GenericBlock.Figure style={redBorderStyle}>
+            <Icon icon={mdiPencil} size={Size.m} />
+        </GenericBlock.Figure>
+        <GenericBlock.Content style={redBorderStyle}>Content</GenericBlock.Content>
+        <GenericBlock.Actions style={redBorderStyle}>
+            <Button theme={theme}>Button</Button>
+        </GenericBlock.Actions>
+    </GenericBlock>
+);
 
-        <GenericBlock
-            orientation={Orientation.vertical}
-            figure={<Icon icon={mdiPencil} size={Size.m} />}
-            gap={Size.huge}
-            style={{ marginBottom: 40 }}
-            actionsProps={{
-                style: { border: '1px solid red' },
-            }}
-            figureProps={{
-                style: { border: '1px solid red' },
-            }}
-            contentProps={{
-                style: { border: '1px solid red' },
-            }}
-            actions={<Button theme={theme}>Button</Button>}
-        >
-            <h2>Big gap size</h2>
-            <p>For large blocks</p>
+export const GapSizes = ({ theme }: HasTheme) =>
+    [Size.regular, Size.big, Size.huge].map((gap) => (
+        <GenericBlock key={gap} orientation={Orientation.vertical} gap={gap} style={{ marginBottom: 40 }}>
+            <GenericBlock.Figure style={redBorderStyle}>
+                <Icon icon={mdiPencil} size={Size.m} />
+            </GenericBlock.Figure>
+            <GenericBlock.Content style={redBorderStyle}>
+                <h2>{gap} gap size</h2>
+                <p>block description</p>
+            </GenericBlock.Content>
+            <GenericBlock.Actions style={redBorderStyle}>
+                <Button theme={theme}>Button</Button>
+            </GenericBlock.Actions>
         </GenericBlock>
-    </>
-);
+    ));

package/src/components/generic-block/GenericBlock.test.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
+import React, { createRef } from 'react';
 import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';
-import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
+import { commonTestsSuite } from '@lumx/react/testing/utils';
 
 import { GenericBlock, GenericBlockProps } from './GenericBlock';
-import * as stories from '../../stories/generated/GenericBlock/Demos.stories';
 
 const CLASSNAME = GenericBlock.className as string;
 
@@ -20,7 +19,115 @@ const setup = (props: Partial<GenericBlockProps> = {}, shallowRendering = true)
 describe(`<${GenericBlock.displayName}>`, () => {
     // 1. Test render via snapshot.
     describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, GenericBlock);
+        it('should render default', () => {
+            const wrapper = shallow(<GenericBlock>Content</GenericBlock>);
+
+            expect(wrapper.prop('gap')).toBe('regular');
+            expect(wrapper.prop('hAlign')).toBe('center');
+            expect(wrapper.prop('orientation')).toBe('vertical');
+            expect(wrapper.prop('vAlign')).toBe('center');
+
+            const figure = wrapper.find('.lumx-generic-block__figure');
+            expect(figure).toBeDefined();
+
+            const content = wrapper.find('.lumx-generic-block__content');
+            expect(content.prop('fillSpace')).toBe(true);
+            expect(content.prop('vAlign')).toBe('center');
+            expect(content.prop('orientation')).toBe('vertical');
+
+            const actions = wrapper.find('.lumx-generic-block__actions');
+            expect(actions.prop('vAlign')).toBe('center');
+        });
+
+        it('should render horizontal', () => {
+            const wrapper = shallow(<GenericBlock orientation="horizontal">Content</GenericBlock>);
+
+            expect(wrapper.prop('gap')).toBe('regular');
+            expect(wrapper.prop('hAlign')).toBe('center');
+            expect(wrapper.prop('orientation')).toBe('horizontal');
+            expect(wrapper.prop('vAlign')).toBe('center');
+
+            const figure = wrapper.find('.lumx-generic-block__figure');
+            expect(figure).toBeDefined();
+
+            const content = wrapper.find('.lumx-generic-block__content');
+            expect(content.prop('fillSpace')).toBe(true);
+            expect(content.prop('vAlign')).toBe('left');
+            expect(content.prop('orientation')).toBe('vertical');
+
+            const actions = wrapper.find('.lumx-generic-block__actions');
+            expect(actions.prop('vAlign')).toBe('right');
+        });
+
+        it('should combine figure props', () => {
+            const wrapper = shallow(
+                <GenericBlock figure="Figure 1" figureProps={{ className: 'figure1', vAlign: 'left' }}>
+                    <GenericBlock.Figure className="figure2" fillSpace>
+                        Figure 2
+                    </GenericBlock.Figure>
+                </GenericBlock>,
+            );
+
+            const figure = wrapper.find('.lumx-generic-block__figure');
+            expect(figure).toHaveClassName('figure1');
+            expect(figure).toHaveClassName('figure2');
+            expect(figure.prop('fillSpace')).toBe(true);
+            expect(figure.prop('vAlign')).toBe('left');
+            expect(figure).toHaveText('Figure 1Figure 2');
+        });
+
+        it('should combine content props', () => {
+            const wrapper = shallow(
+                <GenericBlock contentProps={{ className: 'content1', vAlign: 'left' }}>
+                    Content 1
+                    <GenericBlock.Content className="content2" fillSpace>
+                        Content 2
+                    </GenericBlock.Content>
+                </GenericBlock>,
+            );
+
+            const content = wrapper.find('.lumx-generic-block__content');
+            expect(content).toHaveClassName('content1');
+            expect(content).toHaveClassName('content2');
+            expect(content.prop('fillSpace')).toBe(true);
+            expect(content.prop('vAlign')).toBe('left');
+            expect(content).toHaveText('Content 2Content 1');
+        });
+
+        it('should combine actions props', () => {
+            const wrapper = shallow(
+                <GenericBlock actions="Actions 1" actionsProps={{ className: 'actions1', vAlign: 'left' }}>
+                    <GenericBlock.Actions className="actions2" fillSpace>
+                        Actions 2
+                    </GenericBlock.Actions>
+                </GenericBlock>,
+            );
+
+            const actions = wrapper.find('.lumx-generic-block__actions');
+            expect(actions).toHaveClassName('actions1');
+            expect(actions).toHaveClassName('actions2');
+            expect(actions.prop('fillSpace')).toBe(true);
+            expect(actions.prop('vAlign')).toBe('left');
+            expect(actions).toHaveText('Actions 1Actions 2');
+        });
+
+        it('should forward refs', () => {
+            const rootRef = createRef<HTMLDivElement>();
+            const figureRef = createRef<HTMLDivElement>();
+            const contentRef = createRef<HTMLDivElement>();
+            const actionsRef = createRef<HTMLDivElement>();
+            shallow(
+                <GenericBlock ref={rootRef}>
+                    <GenericBlock.Figure ref={figureRef} />
+                    <GenericBlock.Content ref={contentRef} />
+                    <GenericBlock.Actions ref={actionsRef} />
+                </GenericBlock>,
+            );
+            expect(rootRef.current).toBeDefined();
+            expect(figureRef.current).toBeDefined();
+            expect(contentRef.current).toBeDefined();
+            expect(actionsRef.current).toBeDefined();
+        });
     });
 
     // Common tests suite.