@lumx/react 3.1.1 → 3.1.3-alpha.0

package/dist/src/components/dropdown/Dropdown.tsx

@@ -1,184 +0,0 @@
-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, PopoverProps } from '@lumx/react/components/popover/Popover';
-import { useInfiniteScroll } from '@lumx/react/hooks/useInfiniteScroll';
-import { Comp, GenericProps, isComponent } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-
-/**
- * Defines the props of the component.
- */
-export interface DropdownProps extends GenericProps {
-    /**
-     * Reference to the element around which the dropdown is placed.
-     * @see {@link PopoverProps#anchorRef}
-     */
-    anchorRef: PopoverProps['anchorRef'];
-    /** Dropdown content. */
-    children: React.ReactNode;
-    /**
-     * Whether a click anywhere out of the Dropdown would close it or not.
-     * @see {@link PopoverProps#closeOnClickAway}
-     */
-    closeOnClickAway?: boolean;
-    /**
-     * Whether to close the Dropdown when clicking in it or not.
-     */
-    closeOnClick?: boolean;
-    /**
-     * Whether an escape key press would close the Dropdown or not.
-     * @see {@link PopoverProps#closeOnEscape}
-     */
-    closeOnEscape?: boolean;
-    /**
-     * Manage dropdown width:
-     *   - `maxWidth`: dropdown not bigger than anchor
-     *   - `minWidth` or `true`: dropdown not smaller than anchor
-     *   - `width`: dropdown equal to the anchor.
-     * @see {@link PopoverProps#fitToAnchorWidth}
-     */
-    fitToAnchorWidth?: PopoverProps['fitToAnchorWidth'];
-    /**
-     * Whether the dropdown should shrink to fit within the viewport height or not.
-     * @see {@link PopoverProps#fitWithinViewportHeight}
-     */
-    fitWithinViewportHeight?: boolean;
-    /**
-     * Whether the dropdown should be displayed or not. Useful to control the Dropdown from outside the component.
-     * @see {@link PopoverProps#isOpen}
-     */
-    isOpen: boolean;
-    /**
-     * Offset applied to the Dropdown position.
-     * @see {@link PopoverProps#offset}
-     */
-    offset?: Offset;
-    /**
-     * Preferred Dropdown placement against the anchor element.
-     * @see {@link PopoverProps#placement}
-     */
-    placement?: Placement;
-    /** Whether the focus should be set on the list when the dropdown is open or not. */
-    shouldFocusOnOpen?: boolean;
-    /** Whether the dropdown should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */
-    usePortal?: 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}
-     */
-    zIndex?: number;
-    /**
-     * On close callback.
-     * @see {@link PopoverProps#onClose}
-     */
-    onClose?(): void;
-    /** On scroll end callback. */
-    onInfiniteScroll?(): void;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Dropdown';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<DropdownProps> = {
-    closeOnClick: true,
-    closeOnClickAway: true,
-    closeOnEscape: true,
-    fitToAnchorWidth: true,
-    fitWithinViewportHeight: true,
-    placement: Placement.BOTTOM_START,
-    shouldFocusOnOpen: true,
-    focusAnchorOnClose: true,
-};
-
-/**
- * Dropdown component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Dropdown: Comp<DropdownProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const {
-        anchorRef,
-        children,
-        className,
-        closeOnClick,
-        closeOnClickAway,
-        closeOnEscape,
-        fitToAnchorWidth,
-        fitWithinViewportHeight,
-        isOpen,
-        offset,
-        focusAnchorOnClose,
-        onClose,
-        onInfiniteScroll,
-        placement,
-        shouldFocusOnOpen,
-        zIndex,
-        ...forwardedProps
-    } = props;
-    const innerRef = useRef<HTMLDivElement>(null);
-    const listElement = useRef(null);
-
-    useInfiniteScroll(innerRef, onInfiniteScroll);
-
-    const popperElement = useMemo(() => {
-        return !Array.isArray(children) && isComponent(List)(children)
-            ? cloneElement<ListProps>(children, {
-                  ...children.props,
-                  ref: listElement,
-                  onClick(evt: MouseEvent) {
-                      children.props.onClick?.(evt);
-
-                      if (closeOnClick) {
-                          onClose?.();
-                      }
-                  },
-                  isClickable: true,
-              })
-            : children;
-    }, [children, closeOnClick, onClose]);
-
-    return isOpen ? (
-        <Popover
-            ref={ref}
-            {...forwardedProps}
-            focusAnchorOnClose={focusAnchorOnClose}
-            anchorRef={anchorRef}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}
-            elevation={0 as any}
-            closeOnClickAway={closeOnClickAway}
-            closeOnEscape={closeOnEscape}
-            fitToAnchorWidth={fitToAnchorWidth}
-            fitWithinViewportHeight={fitWithinViewportHeight}
-            focusElement={shouldFocusOnOpen ? listElement : undefined}
-            isOpen={isOpen}
-            offset={offset}
-            onClose={onClose}
-            placement={placement}
-            zIndex={zIndex}
-        >
-            <div className={`${CLASSNAME}__menu`} ref={innerRef}>
-                {popperElement}
-            </div>
-        </Popover>
-    ) : null;
-});
-Dropdown.displayName = COMPONENT_NAME;
-Dropdown.className = CLASSNAME;
-Dropdown.defaultProps = DEFAULT_PROPS;

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

@@ -1,35 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Dropdown> Snapshots and structure should render correctly 1`] = `
-<Popover
-  anchorRef={
-    {
-      "current": null,
-    }
-  }
-  className="lumx-dropdown"
-  closeOnClickAway={true}
-  closeOnEscape={true}
-  elevation={0}
-  fitToAnchorWidth={true}
-  fitWithinViewportHeight={true}
-  focusAnchorOnClose={true}
-  focusElement={
-    {
-      "current": null,
-    }
-  }
-  isOpen={true}
-  placement="bottom-start"
-  usePortal={true}
-  zIndex={9999}
->
-  <div
-    className="lumx-dropdown__menu"
-  >
-    <div>
-      This is the content of the dropdown
-    </div>
-  </div>
-</Popover>
-`;

package/dist/src/components/dropdown/index.ts

@@ -1 +0,0 @@
-export * from './Dropdown';

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

@@ -1,116 +0,0 @@
-import React from 'react';
-
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { queryByRole, render } from '@testing-library/react';
-import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
-import userEvent from '@testing-library/user-event';
-import { ExpansionPanel, ExpansionPanelProps } from '.';
-
-const CLASSNAME = ExpansionPanel.className as string;
-
-type SetupProps = Partial<ExpansionPanelProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: SetupProps = {}) => {
-    const props: ExpansionPanelProps = {
-        toggleButtonProps: { label: 'Toggle' },
-        ...propsOverride,
-    };
-    const { container } = render(<ExpansionPanel {...props} />);
-
-    return {
-        container,
-        element: getByClassName(container, CLASSNAME),
-        query: {
-            toggleButton: () => queryByRole(container, 'button', { name: /Toggle/i }),
-            header: () => queryByClassName(container, `${CLASSNAME}__header`),
-            content: () => queryByClassName(container, `${CLASSNAME}__wrapper`),
-        },
-        props,
-    };
-};
-
-describe(`<${ExpansionPanel.displayName}>`, () => {
-    describe('Render', () => {
-        it('should render default', () => {
-            const { element, query } = setup();
-            expect(element).toBeInTheDocument();
-            expect(element).toHaveClass(CLASSNAME);
-            expect(element).toHaveClass(`${CLASSNAME}--is-close`);
-            expect(element).toHaveClass(`${CLASSNAME}--theme-light`);
-
-            // Header is visible
-            expect(query.header()).toBeInTheDocument();
-
-            // Content is not visible
-            expect(query.content()).not.toBeInTheDocument();
-
-            expect(query.toggleButton()).toHaveAttribute('aria-expanded', 'false');
-        });
-
-        it('should render open', () => {
-            const { query } = setup({ isOpen: true });
-
-            // Content is visible
-            expect(query.content()).toBeInTheDocument();
-
-            expect(query.toggleButton()).toHaveAttribute('aria-expanded', 'true');
-        });
-
-        it('should show label', () => {
-            const labelText = 'Label text';
-            const { query } = setup({ label: labelText });
-
-            expect(query.header()).toHaveTextContent(labelText);
-        });
-
-        it('should show header instead of label', () => {
-            const labelText = 'Label text';
-            const headerText = 'Header text';
-            const { query } = setup({ label: labelText, children: <header>{headerText}</header> });
-
-            expect(query.header()).toHaveTextContent(headerText);
-        });
-    });
-
-    describe('Events', () => {
-        const onOpen: jest.Mock = jest.fn();
-        const onClose: jest.Mock = jest.fn();
-        const onToggleOpen: jest.Mock = jest.fn();
-
-        beforeEach(onOpen.mockClear);
-        beforeEach(onClose.mockClear);
-        beforeEach(onToggleOpen.mockClear);
-
-        it('should open on click', async () => {
-            const { query } = setup({ isOpen: false, onOpen, onClose, onToggleOpen });
-
-            // Content is not visible
-            expect(query.content()).not.toBeInTheDocument();
-
-            // Click on toggle button
-            await userEvent.click(query.toggleButton() as any);
-            expect(onOpen).toHaveBeenCalled();
-            expect(onClose).not.toHaveBeenCalled();
-            expect(onToggleOpen).toHaveBeenCalledWith(true);
-        });
-
-        it('should close on click', async () => {
-            const { query } = setup({ isOpen: true, onOpen, onClose, onToggleOpen });
-
-            // Content is visible
-            expect(query.content()).toBeInTheDocument();
-
-            // Click on header
-            await userEvent.click(query.header() as any);
-            expect(onOpen).not.toHaveBeenCalled();
-            expect(onClose).toHaveBeenCalled();
-            expect(onToggleOpen).toHaveBeenCalledWith(false);
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'element', forwardAttributes: 'element' });
-});

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

@@ -1,170 +0,0 @@
-import React, { Children, forwardRef, PropsWithChildren, ReactNode, useEffect, useRef, useState } from 'react';
-
-import classNames from 'classnames';
-
-import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
-
-import get from 'lodash/get';
-import isEmpty from 'lodash/isEmpty';
-import isFunction from 'lodash/isFunction';
-
-import { ColorPalette, DragHandle, Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
-import { Callback, Comp, GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-import { partitionMulti } from '@lumx/react/utils/partitionMulti';
-
-/**
- * Defines the props of the component.
- */
-export interface ExpansionPanelProps extends GenericProps, HasTheme {
-    /** Whether the expansion panel has a background. */
-    hasBackground?: boolean;
-    /** Whether the header has a divider. */
-    hasHeaderDivider?: boolean;
-    /** Whether the component is open or not. */
-    isOpen?: boolean;
-    /** Label text (overwritten if a `<header>` is provided in the children). */
-    label?: string;
-    /** On open callback. */
-    onOpen?: Callback;
-    /** On close callback. */
-    onClose?: Callback;
-    /** Props to pass to the toggle button (minus those already set by the ExpansionPanel props). */
-    toggleButtonProps: Pick<IconButtonProps, 'label'> &
-        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
-    /** On toggle open or close callback. */
-    onToggleOpen?(shouldOpen: boolean): void;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'ExpansionPanel';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<ExpansionPanelProps> = {
-    theme: Theme.light,
-};
-
-const isDragHandle = isComponent(DragHandle);
-const isHeader = isComponent('header');
-const isFooter = isComponent('footer');
-
-/**
- * ExpansionPanel component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const ExpansionPanel: Comp<ExpansionPanelProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const {
-        className,
-        children: anyChildren,
-        hasBackground,
-        hasHeaderDivider,
-        isOpen,
-        label,
-        onClose,
-        onOpen,
-        onToggleOpen,
-        theme,
-        toggleButtonProps,
-        ...forwardedProps
-    } = props;
-
-    const children: ReactNode[] = Children.toArray(anyChildren);
-
-    // Partition children by types.
-    const [[dragHandle], [header], [footer], content] = partitionMulti(children, [isDragHandle, isHeader, isFooter]);
-
-    // Either take the header in children or create one with the label.
-    const headerProps: PropsWithChildren<any> = React.isValidElement(header) ? header.props : {};
-    const headerContent = !isEmpty(headerProps.children) ? (
-        headerProps.children
-    ) : (
-        <span className={`${CLASSNAME}__label`}>{label}</span>
-    );
-
-    const toggleOpen = () => {
-        const shouldOpen = !isOpen;
-        if (isFunction(onOpen) && shouldOpen) {
-            onOpen();
-        }
-        if (isFunction(onClose) && !shouldOpen) {
-            onClose();
-        }
-        if (isFunction(onToggleOpen)) {
-            onToggleOpen(shouldOpen);
-        }
-    };
-
-    const color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
-
-    const rootClassName = classNames(
-        className,
-        handleBasicClasses({
-            hasBackground,
-            hasHeader: Boolean(!isEmpty(headerProps.children)),
-            hasHeaderDivider,
-            isClose: !isOpen,
-            isDraggable: Boolean(dragHandle),
-            isOpen,
-            prefix: CLASSNAME,
-            theme,
-        }),
-    );
-
-    const wrapperRef = useRef<HTMLDivElement>(null);
-    const isContentVisible = (): boolean => get(wrapperRef.current, 'clientHeight', 0) > 0;
-
-    // Switch max height on/off to activate the CSS transition (updates when children changes).
-    const [maxHeight, setMaxHeight] = useState('0');
-    useEffect(() => {
-        const height = isOpen ? get(wrapperRef.current, 'offsetHeight', 0) : 0;
-        setMaxHeight(`${height}px`);
-    }, [children, isOpen]);
-
-    return (
-        <section ref={ref} {...forwardedProps} className={rootClassName}>
-            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
-            <header className={`${CLASSNAME}__header`} onClick={toggleOpen}>
-                {dragHandle && <div className={`${CLASSNAME}__header-drag`}>{dragHandle}</div>}
-
-                <div {...headerProps} className={`${CLASSNAME}__header-content`}>
-                    {headerContent}
-                </div>
-
-                <div className={`${CLASSNAME}__header-toggle`}>
-                    <IconButton
-                        {...toggleButtonProps}
-                        color={color}
-                        emphasis={Emphasis.low}
-                        icon={isOpen ? mdiChevronUp : mdiChevronDown}
-                        aria-expanded={isOpen || 'false'}
-                    />
-                </div>
-            </header>
-
-            {(isOpen || isContentVisible()) && (
-                <div className={`${CLASSNAME}__wrapper`} style={{ maxHeight }}>
-                    <div className={`${CLASSNAME}__container`} ref={wrapperRef}>
-                        <div className={`${CLASSNAME}__content`}>{content}</div>
-
-                        {footer && <div className={`${CLASSNAME}__footer`}>{footer}</div>}
-                    </div>
-                </div>
-            )}
-        </section>
-    );
-});
-ExpansionPanel.displayName = COMPONENT_NAME;
-ExpansionPanel.className = CLASSNAME;
-ExpansionPanel.defaultProps = DEFAULT_PROPS;

package/dist/src/components/expansion-panel/index.ts

@@ -1 +0,0 @@
-export * from './ExpansionPanel';

package/dist/src/components/flag/Flag.stories.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { text } from '@storybook/addon-knobs';
-
-import { mdiHeart } from '@lumx/icons';
-import { ColorPalette, Flag } from '@lumx/react';
-
-export default { title: 'LumX components/flag/Flag' };
-
-export const defaultProps = ({ theme }: any) => <Flag label={text('Label', 'hearing')} theme={theme} />;
-export const withIcon = ({ theme }: any) => <Flag icon={mdiHeart} label={text('Label', 'hearing')} theme={theme} />;
-export const withColor = ({ theme }: any) => {
-    return (
-        <>
-            <Flag color={ColorPalette.blue} icon={mdiHeart} label="blue" theme={theme} />
-            <Flag color={ColorPalette.dark} icon={mdiHeart} label="dark" theme={theme} />
-            <Flag color={ColorPalette.green} icon={mdiHeart} label="green" theme={theme} />
-            <Flag color={ColorPalette.primary} icon={mdiHeart} label="primary" theme={theme} />
-            <Flag color={ColorPalette.red} icon={mdiHeart} label="red" theme={theme} />
-            <Flag color={ColorPalette.secondary} icon={mdiHeart} label="secondary" theme={theme} />
-            <Flag color={ColorPalette.yellow} icon={mdiHeart} label="yellow" theme={theme} />
-        </>
-    );
-};

package/dist/src/components/flag/Flag.test.tsx

@@ -1,86 +0,0 @@
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import React, { ReactElement } from 'react';
-
-import { ColorPalette, Theme } from '@lumx/react';
-import { mdiAbTesting } from '@lumx/icons';
-import { itShouldRenderStories, commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils/className';
-
-import { Flag, FlagProps } from './Flag';
-import * as stories from './Flag.stories';
-
-const CLASSNAME = Flag.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propOverrides: Partial<FlagProps> = {}, shallowRendering = true) => {
-    const props = {
-        label: 'default',
-        ...propOverrides,
-    };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper = renderer(<Flag {...props} />);
-
-    return {
-        props,
-        iconEl: wrapper.find('Icon'),
-        wrapper,
-    };
-};
-
-describe(`<${Flag.displayName} />`, () => {
-    // 1. Test render via snapshot (default state of component).
-    describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, Flag);
-    });
-
-    // 4. Test conditions (i.e. things that display or not in the UI based on props).
-    describe('Conditions', () => {
-        it('should use the icon', () => {
-            const { iconEl } = setup({ icon: mdiAbTesting });
-
-            expect(iconEl).toBeDefined();
-            expect(iconEl.prop('icon')).toEqual(mdiAbTesting);
-        });
-
-        it('should have correct default color', () => {
-            const { wrapper } = setup({});
-            expect(wrapper).toHaveClassName(
-                getBasicClass({
-                    prefix: CLASSNAME,
-                    type: 'color',
-                    value: ColorPalette.dark,
-                }),
-            );
-        });
-
-        it('should switch color with theme', () => {
-            const { wrapper } = setup({ theme: Theme.dark });
-            expect(wrapper).toHaveClassName(
-                getBasicClass({
-                    prefix: CLASSNAME,
-                    type: 'color',
-                    value: ColorPalette.light,
-                }),
-            );
-        });
-
-        it('should use the color', () => {
-            const color = ColorPalette.green;
-            const { wrapper } = setup({ icon: mdiAbTesting, color });
-
-            expect(wrapper).toHaveClassName(
-                getBasicClass({
-                    prefix: CLASSNAME,
-                    type: 'color',
-                    value: color,
-                }),
-            );
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
-});

package/dist/src/components/flag/Flag.tsx

@@ -1,47 +0,0 @@
-import React, { forwardRef } from 'react';
-import classNames from 'classnames';
-
-import { ColorPalette, Icon, Size, Theme } from '@lumx/react';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-
-export interface FlagProps extends GenericProps, HasTheme {
-    /** Color of the component. */
-    color?: ColorPalette;
-    /** Icon to use before the label. */
-    icon?: string;
-    /** Text label of the flag. */
-    label: string;
-}
-
-const COMPONENT_NAME = 'Flag';
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-const DEFAULT_PROPS: Partial<FlagProps> = {
-    theme: Theme.light,
-};
-
-/**
- * Flag component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Flag: Comp<FlagProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { label, icon, color, className, theme, ...forwardedProps } = props;
-    const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
-
-    return (
-        <div
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color: flagColor }))}
-            ref={ref}
-        >
-            {icon && <Icon icon={icon} size={Size.xxs} className={`${CLASSNAME}__icon`} />}
-            <span className={`${CLASSNAME}__label`}>{label}</span>
-        </div>
-    );
-});
-Flag.displayName = COMPONENT_NAME;
-Flag.className = CLASSNAME;
-Flag.defaultProps = DEFAULT_PROPS;