@lumx/react 2.2.21 → 2.2.22-alpha-fix-generic-block.2

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/flex-box/FlexBox.stories.tsx

@@ -18,7 +18,7 @@ const flexViewKnobConfigs: Array<
     ['fillSpace', boolean],
     ['noShrink', boolean],
     ['wrap', boolean],
-    ['gap', select, [DEFAULT_PROPS.gap, Size.regular, Size.medium, Size.big, Size.huge]],
+    ['gap', select, [DEFAULT_PROPS.gap, Size.tiny, Size.regular, Size.medium, Size.big, Size.huge]],
     ['hAlign', select, [DEFAULT_PROPS.hAlign, Alignment.center, Alignment.top, Alignment.bottom]],
     ['vAlign', select, [DEFAULT_PROPS.vAlign, Alignment.center, Alignment.right, Alignment.left]],
     ['orientation', select, [undefined, Orientation.horizontal, Orientation.vertical]],

package/src/components/flex-box/FlexBox.tsx

@@ -6,7 +6,7 @@ import React, { forwardRef, ReactNode } from 'react';
 import { Size } from '..';
 
 export type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;
-export type GapSize = Extract<Size, 'regular' | 'medium' | 'big' | 'huge'>;
+export type GapSize = Extract<Size, 'tiny' | 'regular' | 'medium' | 'big' | 'huge'>;
 
 /**
  * Defines the props of the component.

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

@@ -0,0 +1,106 @@
+import React from 'react';
+import { mdiPencil } from '@lumx/icons';
+import { GenericBlock, Button, Icon, Size } from '@lumx/react';
+
+export default { title: 'LumX components/generic-block/GenericBlock' };
+
+const redBorderStyle = { border: '1px solid red' };
+
+export const SectionsInProps = ({ theme }) => (
+    <GenericBlock
+        figure={<Icon icon={mdiPencil} size={Size.m} />}
+        actionsProps={{ style: redBorderStyle }}
+        figureProps={{ style: redBorderStyle }}
+        contentProps={{ style: redBorderStyle }}
+        actions={<Button theme={theme}>Button</Button>}
+    >
+        Content
+    </GenericBlock>
+);
+
+export const SectionsInChildren = ({ theme }) => (
+    <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>
+);
+
+const Template = ({ theme, ...props }) => (
+    <GenericBlock {...props}>
+        <GenericBlock.Figure style={redBorderStyle} {...props.figureProps}>
+            <Icon icon={mdiPencil} size={Size.m} />
+        </GenericBlock.Figure>
+        <GenericBlock.Content style={redBorderStyle} {...props.contentProps}>
+            {props.content || 'Content'}
+        </GenericBlock.Content>
+        <GenericBlock.Actions style={redBorderStyle} {...props.actionsProps}>
+            <Button theme={theme}>Button</Button>
+        </GenericBlock.Actions>
+    </GenericBlock>
+);
+
+export const Vertical = Template.bind({});
+Vertical.args = {
+    orientation: 'vertical',
+};
+
+export const VerticalAlignCenter = Template.bind({});
+VerticalAlignCenter.args = {
+    orientation: 'vertical',
+    vAlign: 'center',
+};
+
+export const VerticalOverflow = Template.bind({});
+VerticalOverflow.args = {
+    orientation: 'vertical',
+    style: { width: 300 },
+    content: (
+        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            _________________________________________________________________
+        </span>
+    ),
+};
+
+export const Horizontal = Template.bind({});
+Horizontal.args = {
+    orientation: 'horizontal',
+};
+
+export const HorizontalAlignRightBottom = Template.bind({});
+HorizontalAlignRightBottom.args = {
+    orientation: 'horizontal',
+    vAlign: 'right',
+    hAlign: 'bottom',
+};
+
+export const HorizontalOverflow = Template.bind({});
+HorizontalOverflow.args = {
+    orientation: 'horizontal',
+    style: { width: 300 },
+    content: (
+        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            _________________________________________________________________
+        </span>
+    ),
+};
+
+export const GapSizes = ({ theme }) =>
+    [Size.regular, Size.big, Size.huge].map((gap) => (
+        <GenericBlock key={gap} 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';
+import { GenericBlock, GenericBlockProps } from '.';
 
 const CLASSNAME = GenericBlock.className as string;
 
@@ -20,7 +19,132 @@ 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 figure="figure" actions="actions">
+                    Content
+                </GenericBlock>,
+            );
+
+            expect(wrapper.prop('gap')).toBe('big');
+            expect(wrapper.prop('orientation')).toBe('horizontal');
+
+            const figure = wrapper.find('.lumx-generic-block__figure');
+            expect(figure).toHaveLength(1);
+
+            const content = wrapper.find('.lumx-generic-block__content');
+            expect(content).toHaveLength(1);
+            expect(content.prop('fillSpace')).toBe(true);
+            expect(content.prop('orientation')).toBe('vertical');
+
+            const actions = wrapper.find('.lumx-generic-block__actions');
+            expect(actions).toHaveLength(1);
+        });
+
+        it('should forward vAlign & hAlign', () => {
+            const wrapper = shallow(
+                <GenericBlock figure="figure" actions="actions" vAlign="left" hAlign="bottom">
+                    Content
+                </GenericBlock>,
+            );
+
+            expect(wrapper.prop('vAlign')).toBe('left');
+            expect(wrapper.prop('hAlign')).toBe('bottom');
+
+            const figure = wrapper.find('.lumx-generic-block__figure');
+            expect(figure).toHaveLength(1);
+            expect(figure.prop('vAlign')).toBe('left');
+            expect(figure.prop('hAlign')).toBe('bottom');
+
+            const content = wrapper.find('.lumx-generic-block__content');
+            expect(content).toHaveLength(1);
+            expect(content.prop('vAlign')).toBe('left');
+            expect(content.prop('hAlign')).toBe('bottom');
+
+            const actions = wrapper.find('.lumx-generic-block__actions');
+            expect(actions).toHaveLength(1);
+            expect(actions.prop('vAlign')).toBe('left');
+            expect(actions.prop('hAlign')).toBe('bottom');
+        });
+
+        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');
+
+            expect(wrapper.find('.lumx-generic-block__content')).toHaveLength(0);
+            expect(wrapper.find('.lumx-generic-block__actions')).toHaveLength(0);
+        });
+
+        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');
+
+            expect(wrapper.find('.lumx-generic-block__figure')).toHaveLength(0);
+            expect(wrapper.find('.lumx-generic-block__actions')).toHaveLength(0);
+        });
+
+        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');
+
+            expect(wrapper.find('.lumx-generic-block__figure')).toHaveLength(0);
+            expect(wrapper.find('.lumx-generic-block__content')).toHaveLength(0);
+        });
+
+        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.