@lumx/react 3.1.1 → 3.1.3-alpha.0

package/dist/src/components/toolbar/Toolbar.tsx

@@ -1,67 +0,0 @@
-import React, { forwardRef, ReactNode } from 'react';
-
-import classNames from 'classnames';
-
-import { Comp, GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-
-/**
- * Defines the props of the component.
- */
-export interface ToolbarProps extends GenericProps {
-    /** After content (placed after the label). */
-    after?: ReactNode;
-    /** Before content (placed before the label). */
-    before?: ReactNode;
-    /** Label content. */
-    label?: ReactNode;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Toolbar';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<ToolbarProps> = {};
-
-/**
- * Toolbar component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Toolbar: Comp<ToolbarProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { after, before, className, label, ...forwardedProps } = props;
-
-    return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    hasAfter: Boolean(after),
-                    hasBefore: Boolean(before),
-                    hasLabel: Boolean(label),
-                    prefix: CLASSNAME,
-                }),
-            )}
-        >
-            {before && <div className={`${CLASSNAME}__before`}>{before}</div>}
-            {label && <div className={`${CLASSNAME}__label`}>{label}</div>}
-            {after && <div className={`${CLASSNAME}__after`}>{after}</div>}
-        </div>
-    );
-});
-Toolbar.displayName = COMPONENT_NAME;
-Toolbar.className = CLASSNAME;
-Toolbar.defaultProps = DEFAULT_PROPS;

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

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

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

@@ -1,172 +0,0 @@
-import { mdiHelp, mdiPrinter } from '@lumx/icons';
-import {
-    Button,
-    Dialog,
-    Dropdown,
-    FlexBox,
-    Icon,
-    IconButton,
-    Orientation,
-    Placement,
-    Size,
-    Switch,
-    Tooltip,
-} from '@lumx/react';
-import { select, text } from '@storybook/addon-knobs';
-import noop from 'lodash/noop';
-import range from 'lodash/range';
-import React, { Fragment, useRef, useState } from 'react';
-
-export default { title: 'LumX components/tooltip/Tooltip' };
-
-export const ForceOpen = () => {
-    return (
-        <Tooltip
-            forceOpen
-            placement={select(
-                'placement',
-                [Placement.TOP, Placement.BOTTOM, Placement.RIGHT, Placement.LEFT],
-                Placement.TOP,
-            )}
-            label={text('label', 'Tooltip label')}
-        >
-            <Button>Button</Button>
-        </Tooltip>
-    );
-};
-
-export const InlineTooltip = () => (
-    <div className="lumx-spacing-margin-huge">
-        Some text with a
-        <Tooltip label="extremely complex and difficult to follow" forceOpen>
-            <abbr style={{ borderBottom: '1px dotted', margin: '0 4px' }}>convoluted</abbr>
-        </Tooltip>
-        word in it. And some text with a contextual help at the end
-        <Tooltip
-            label="A contextual help is help that is displayed in your product or web site"
-            placement={Placement.TOP}
-            forceOpen
-        >
-            <Icon icon={mdiHelp} size={Size.xxs} style={{ display: 'inline-block', verticalAlign: 'super' }} />
-        </Tooltip>
-        .
-    </div>
-);
-
-export const MultilineTooltip = () => (
-    <>
-        <Tooltip label="Only one sentence.">
-            <Button>One line</Button>
-        </Tooltip>
-        <Tooltip label={'First sentence.\nSecond sentence.\nThird sentence.\n'}>
-            <Button>Multiline</Button>
-        </Tooltip>
-    </>
-);
-
-export const EmptyTooltip = () => (
-    <>
-        <Tooltip label="">
-            <Button>Empty</Button>
-        </Tooltip>
-        <Tooltip label={false}>
-            <Button>Conditionnaly not displayed</Button>
-        </Tooltip>
-    </>
-);
-
-export const TooltipWithDropdown = () => {
-    const [button, setButton] = useState<HTMLElement | null>(null);
-    const [isOpen, setOpen] = useState(false);
-    return (
-        <>
-            <Tooltip label={!isOpen && 'Tooltip'} placement="top">
-                <Button ref={setButton} onClick={() => setOpen((o) => !o)}>
-                    Anchor
-                </Button>
-            </Tooltip>
-            <Dropdown anchorRef={{ current: button }} isOpen={isOpen}>
-                Dropdown
-            </Dropdown>
-        </>
-    );
-};
-
-export const TooltipOnDisabledButton = () => {
-    const [disabled, setDisabled] = useState(false);
-
-    return (
-        <>
-            <Switch isChecked={disabled} onChange={setDisabled}>
-                Toggle button disabled
-            </Switch>
-            <Tooltip label="Tooltip on disabled button">
-                <Button isDisabled={disabled} onClick={noop}>
-                    Click to disable button
-                </Button>
-            </Tooltip>
-        </>
-    );
-};
-
-export const TooltipOnDifferentComponents = () => {
-    return (
-        <FlexBox orientation={Orientation.horizontal} className="lumx-spacing-margin-top-huge">
-            <FlexBox fillSpace />
-            <FlexBox fillSpace>
-                <Tooltip forceOpen label="Tooltip on Button">
-                    <Button>Button</Button>
-                </Tooltip>
-            </FlexBox>
-            <FlexBox fillSpace>
-                <IconButton icon={mdiPrinter} label="Tooltip on IconButton" tooltipProps={{ forceOpen: true }} />
-            </FlexBox>
-            <FlexBox fillSpace>
-                <Tooltip forceOpen label="Tooltip on Icon">
-                    <Icon icon={mdiPrinter} style={{ display: 'inline-block' }} />
-                </Tooltip>
-            </FlexBox>
-            <FlexBox fillSpace>
-                <Tooltip forceOpen label="Tooltip on shaped Icon">
-                    <Icon icon={mdiPrinter} hasShape />
-                </Tooltip>
-            </FlexBox>
-            <FlexBox fillSpace>
-                <Tooltip forceOpen label="Tooltip on word">
-                    <span>word</span>
-                </Tooltip>
-            </FlexBox>
-        </FlexBox>
-    );
-};
-
-export const HideTooltipOnHiddenAnchor = () => {
-    const anchorRef = useRef(null);
-    const [isOpen, setOpen] = useState(false);
-    return (
-        <>
-            The tooltip should show when the button is hovered but it should disappear when the popover get in-between
-            the mouse and the button
-            <br />
-            <Tooltip label="Tooltip label">
-                <Button ref={anchorRef} onClick={() => setOpen((wasOpen) => !wasOpen)}>
-                    Open popover
-                </Button>
-            </Tooltip>
-            <Dialog isOpen={isOpen} onClose={() => setOpen(false)}>
-                Dialog
-            </Dialog>
-        </>
-    );
-};
-
-export const StressTest = () => {
-    return range(1000).map((i) => (
-        <Fragment key={i}>
-            <Tooltip label={`Label ${i}`}>
-                <Button>Button {i}</Button>
-            </Tooltip>
-            <br />
-        </Fragment>
-    ));
-};

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

@@ -1,105 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-
-import { Wrapper, commonTestsSuite } from '@lumx/react/testing/utils';
-
-import { Button, Icon } from '@lumx/react';
-import { Tooltip, TooltipProps } from './Tooltip';
-
-const CLASSNAME = Tooltip.className as string;
-
-jest.mock('uid', () => ({ uid: () => 'uid' }));
-
-type SetupProps = Partial<TooltipProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: SetupProps = {}, shallowRendering = true) => {
-    const props: any = { ...propsOverride };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper = renderer(
-        <Tooltip label="Tooltip" {...props}>
-            Anchor
-        </Tooltip>,
-    );
-    const tooltip = wrapper.find(`.${CLASSNAME}`);
-
-    return {
-        props,
-        tooltip,
-        wrapper,
-    };
-};
-
-jest.mock('./useTooltipOpen', () => ({ useTooltipOpen: () => true }));
-
-describe(`<${Tooltip.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        // Here is an example of a basic rendering check, with snapshot.
-
-        it('should render correctly', () => {
-            const { tooltip, wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-
-            expect(tooltip).toExist();
-            expect(tooltip).toHaveClassName(CLASSNAME);
-        });
-
-        it('should return children when empty label', () => {
-            const wrapper = shallow(
-                <Tooltip label="">
-                    <Icon icon="icon" />
-                </Tooltip>,
-            );
-            expect(wrapper).toMatchSnapshot();
-        });
-
-        it('should wrap children', () => {
-            // Wrap string children
-            const wrapper1 = shallow(<Tooltip label="tooltip1">children</Tooltip>);
-            expect(wrapper1).toMatchSnapshot();
-
-            // Wrap fragment children
-            const wrapper2 = shallow(
-                <Tooltip label="tooltip1">
-                    <>children</>
-                </Tooltip>,
-            );
-            expect(wrapper2).toMatchSnapshot();
-        });
-
-        it('should not wrap Icon', () => {
-            const wrapper = shallow(
-                <Tooltip label="tooltip1">
-                    <Icon icon="icon" />
-                </Tooltip>,
-            );
-            expect(wrapper).toMatchSnapshot();
-        });
-
-        it('should not wrap Button', () => {
-            const wrapper = shallow(
-                <Tooltip label="tooltip1">
-                    <Button>button</Button>
-                </Tooltip>,
-            );
-            expect(wrapper).toMatchSnapshot();
-        });
-
-        it('should work on disabled elements', () => {
-            const wrapper = shallow(
-                <Tooltip label="Tooltip on disabled button" forceOpen>
-                    <Button isDisabled>Empty</Button>
-                </Tooltip>,
-            );
-            expect(wrapper).toMatchSnapshot();
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuite(setup, { className: 'tooltip', prop: 'tooltip' }, { className: CLASSNAME });
-});

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

@@ -1,122 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-import React, { forwardRef, ReactNode, useMemo, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { usePopper } from 'react-popper';
-import { uid } from 'uid';
-
-import classNames from 'classnames';
-
-import { Placement } from '@lumx/react/components/popover/Popover';
-
-import { DOCUMENT } from '@lumx/react/constants';
-
-import { Comp, GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-import { mergeRefs } from '@lumx/react/utils/mergeRefs';
-
-import { useInjectTooltipRef } from './useInjectTooltipRef';
-import { useTooltipOpen } from './useTooltipOpen';
-
-/** Position of the tooltip relative to the anchor element. */
-export type TooltipPlacement = Extract<Placement, 'top' | 'right' | 'bottom' | 'left'>;
-
-/**
- * Defines the props of the component.
- */
-export interface TooltipProps extends GenericProps {
-    /** Anchor (element on which we activate the tooltip). */
-    children: ReactNode;
-    /** Delay (in ms) before closing the tooltip. */
-    delay?: number;
-    /** Whether the tooltip is displayed even without the mouse hovering the anchor. */
-    forceOpen?: boolean;
-    /** Label text. */
-    label?: string | null | false;
-    /** Placement of the tooltip relative to the anchor. */
-    placement?: TooltipPlacement;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Tooltip';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<TooltipProps> = {
-    placement: Placement.BOTTOM,
-};
-
-/**
- * Arrow size (in pixel).
- */
-const ARROW_SIZE = 8;
-
-/**
- * Tooltip component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { label, children, className, delay, placement, forceOpen, ...forwardedProps } = props;
-    // Disable in SSR or without a label.
-    if (!DOCUMENT || !label) {
-        return <>{children}</>;
-    }
-
-    const id = useMemo(() => `tooltip-${uid()}`, []);
-
-    const [popperElement, setPopperElement] = useState<null | HTMLElement>(null);
-    const [anchorElement, setAnchorElement] = useState<null | HTMLElement>(null);
-    const { styles, attributes } = usePopper(anchorElement, popperElement, {
-        placement,
-        modifiers: [
-            {
-                name: 'offset',
-                options: { offset: [0, ARROW_SIZE] },
-            },
-        ],
-    });
-
-    const position = attributes?.popper?.['data-popper-placement'] ?? placement;
-    const isOpen = useTooltipOpen(delay, anchorElement) || forceOpen;
-    const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isOpen as boolean, id);
-
-    return (
-        <>
-            {wrappedChildren}
-            {isOpen &&
-                createPortal(
-                    <div
-                        ref={mergeRefs(ref, setPopperElement)}
-                        {...forwardedProps}
-                        id={id}
-                        role="tooltip"
-                        aria-label={label}
-                        className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, position }))}
-                        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}
-                        </div>
-                    </div>,
-                    document.body,
-                )}
-        </>
-    );
-});
-Tooltip.displayName = COMPONENT_NAME;
-Tooltip.className = CLASSNAME;
-Tooltip.defaultProps = DEFAULT_PROPS;

package/dist/src/components/tooltip/__snapshots__/Tooltip.test.tsx.snap

@@ -1,233 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Tooltip> Snapshots and structure should not wrap Button 1`] = `
-<Fragment>
-  <Button
-    aria-describedby="tooltip-uid"
-    emphasis="high"
-    size="m"
-    theme="light"
-  >
-    button
-  </Button>
-  <Portal
-    containerInfo={<body />}
-  >
-    <div
-      aria-label="tooltip1"
-      className="lumx-tooltip lumx-tooltip--position-bottom"
-      id="tooltip-uid"
-      role="tooltip"
-      style={
-        {
-          "left": "0",
-          "position": "absolute",
-          "top": "0",
-        }
-      }
-    >
-      <div
-        className="lumx-tooltip__arrow"
-      />
-      <div
-        className="lumx-tooltip__inner"
-      >
-        tooltip1
-      </div>
-    </div>
-  </Portal>
-</Fragment>
-`;
-
-exports[`<Tooltip> Snapshots and structure should not wrap Icon 1`] = `
-<Fragment>
-  <Icon
-    aria-describedby="tooltip-uid"
-    icon="icon"
-  />
-  <Portal
-    containerInfo={<body />}
-  >
-    <div
-      aria-label="tooltip1"
-      className="lumx-tooltip lumx-tooltip--position-bottom"
-      id="tooltip-uid"
-      role="tooltip"
-      style={
-        {
-          "left": "0",
-          "position": "absolute",
-          "top": "0",
-        }
-      }
-    >
-      <div
-        className="lumx-tooltip__arrow"
-      />
-      <div
-        className="lumx-tooltip__inner"
-      >
-        tooltip1
-      </div>
-    </div>
-  </Portal>
-</Fragment>
-`;
-
-exports[`<Tooltip> Snapshots and structure should render correctly 1`] = `
-<Fragment>
-  <div
-    aria-describedby="tooltip-uid"
-    className="lumx-tooltip-anchor-wrapper"
-  >
-    Anchor
-  </div>
-  <Portal
-    containerInfo={<body />}
-  >
-    <div
-      aria-label="Tooltip"
-      className="lumx-tooltip lumx-tooltip--position-bottom"
-      id="tooltip-uid"
-      role="tooltip"
-      style={
-        {
-          "left": "0",
-          "position": "absolute",
-          "top": "0",
-        }
-      }
-    >
-      <div
-        className="lumx-tooltip__arrow"
-      />
-      <div
-        className="lumx-tooltip__inner"
-      >
-        Tooltip
-      </div>
-    </div>
-  </Portal>
-</Fragment>
-`;
-
-exports[`<Tooltip> Snapshots and structure should return children when empty label 1`] = `
-<Fragment>
-  <Icon
-    icon="icon"
-  />
-</Fragment>
-`;
-
-exports[`<Tooltip> Snapshots and structure should work on disabled elements 1`] = `
-<Fragment>
-  <div
-    aria-describedby="tooltip-uid"
-    className="lumx-tooltip-anchor-wrapper"
-  >
-    <Button
-      emphasis="high"
-      isDisabled={true}
-      size="m"
-      theme="light"
-    >
-      Empty
-    </Button>
-  </div>
-  <Portal
-    containerInfo={<body />}
-  >
-    <div
-      aria-label="Tooltip on disabled button"
-      className="lumx-tooltip lumx-tooltip--position-bottom"
-      id="tooltip-uid"
-      role="tooltip"
-      style={
-        {
-          "left": "0",
-          "position": "absolute",
-          "top": "0",
-        }
-      }
-    >
-      <div
-        className="lumx-tooltip__arrow"
-      />
-      <div
-        className="lumx-tooltip__inner"
-      >
-        Tooltip on disabled button
-      </div>
-    </div>
-  </Portal>
-</Fragment>
-`;
-
-exports[`<Tooltip> Snapshots and structure should wrap children 1`] = `
-<Fragment>
-  <div
-    aria-describedby="tooltip-uid"
-    className="lumx-tooltip-anchor-wrapper"
-  >
-    children
-  </div>
-  <Portal
-    containerInfo={<body />}
-  >
-    <div
-      aria-label="tooltip1"
-      className="lumx-tooltip lumx-tooltip--position-bottom"
-      id="tooltip-uid"
-      role="tooltip"
-      style={
-        {
-          "left": "0",
-          "position": "absolute",
-          "top": "0",
-        }
-      }
-    >
-      <div
-        className="lumx-tooltip__arrow"
-      />
-      <div
-        className="lumx-tooltip__inner"
-      >
-        tooltip1
-      </div>
-    </div>
-  </Portal>
-</Fragment>
-`;
-
-exports[`<Tooltip> Snapshots and structure should wrap children 2`] = `
-<Fragment>
-  children
-  <Portal
-    containerInfo={<body />}
-  >
-    <div
-      aria-label="tooltip1"
-      className="lumx-tooltip lumx-tooltip--position-bottom"
-      id="tooltip-uid"
-      role="tooltip"
-      style={
-        {
-          "left": "0",
-          "position": "absolute",
-          "top": "0",
-        }
-      }
-    >
-      <div
-        className="lumx-tooltip__arrow"
-      />
-      <div
-        className="lumx-tooltip__inner"
-      >
-        tooltip1
-      </div>
-    </div>
-  </Portal>
-</Fragment>
-`;

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

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