@lumx/react 3.1.1 → 3.1.3-alpha.0

package/dist/src/components/tabs/TabPanel.test.tsx

@@ -1,74 +0,0 @@
-import { Wrapper, commonTestsSuite } from '@lumx/react/testing/utils';
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import React, { ReactElement } from 'react';
-
-import { TabPanel, TabPanelProps } from './TabPanel';
-import { setupTabProviderMocks } from './test.mocks';
-
-const CLASSNAME = TabPanel.className as string;
-
-// Mock useTabProviderContext.
-jest.mock('./state', () => {
-    const state = jest.requireActual('./state');
-    return { ...state, useTabProviderContext: jest.fn(), useTabProviderContextState: jest.fn() };
-});
-
-type SetupProps = Partial<TabPanelProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) => {
-    const props: TabPanelProps = { ...propsOverride, children: 'Tab panel content' };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<TabPanel {...props} />);
-
-    return { props, wrapper };
-};
-
-describe(`<${TabPanel.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render correctly', () => {
-            setupTabProviderMocks({ index: 1 });
-            const { wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-            expect(wrapper).toHaveClassName(CLASSNAME);
-        });
-
-        it('should render isActive state', () => {
-            setupTabProviderMocks({ index: 2, isActive: true });
-            const { wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-        });
-
-        it('should not render children when not active and lazy', () => {
-            setupTabProviderMocks({ isLazy: true, isActive: false });
-            const { wrapper } = setup();
-            expect(wrapper.find('div').props().children).toBeFalsy();
-        });
-
-        it('should render children when active and lazy', () => {
-            setupTabProviderMocks({ isLazy: true, isActive: true });
-            const { wrapper } = setup();
-            expect(wrapper.find('div').props().children).toBeTruthy();
-        });
-
-        it('should render children when not active and not lazy', () => {
-            setupTabProviderMocks({ isActive: false, isLazy: false });
-            const { wrapper } = setup();
-            expect(wrapper.find('div').props().children).toBeTruthy();
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuite(
-        (...args: any[]) => {
-            setupTabProviderMocks();
-            return setup(...args);
-        },
-        { className: 'wrapper', prop: 'wrapper' },
-        { className: CLASSNAME },
-    );
-});

package/dist/src/components/tabs/TabPanel.tsx

@@ -1,65 +0,0 @@
-import { useTabProviderContext } from '@lumx/react/components/tabs/state';
-import { CSS_PREFIX } from '@lumx/react/constants';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
-
-import classNames from 'classnames';
-import React, { forwardRef } from 'react';
-
-/**
- * Defines the props of the component.
- */
-export interface TabPanelProps extends GenericProps {
-    /** Native id property */
-    id?: string;
-    /** Whether the tab is active or not. */
-    isActive?: boolean;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'TabPanel';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = `${CSS_PREFIX}-tab-panel`;
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<TabPanelProps> = {};
-
-/**
- * TabPanel component.
- *
- * Implements WAI-ARIA `tabpanel` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const TabPanel: Comp<TabPanelProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { children, id, className, isActive: propIsActive, ...forwardedProps } = props;
-
-    const state = useTabProviderContext('tabPanel', id);
-    const isActive = propIsActive || state?.isActive;
-
-    return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            id={state?.tabPanelId}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, isActive }))}
-            role="tabpanel"
-            tabIndex={0}
-            aria-labelledby={state?.tabId}
-        >
-            {(!state?.isLazy || isActive) && children}
-        </div>
-    );
-});
-TabPanel.displayName = COMPONENT_NAME;
-TabPanel.className = CLASSNAME;
-TabPanel.defaultProps = DEFAULT_PROPS;

package/dist/src/components/tabs/TabProvider.test.tsx

@@ -1,42 +0,0 @@
-import { Tab, TabList, TabPanel, TabProvider } from '@lumx/react';
-import { mount } from 'enzyme';
-import 'jest-enzyme';
-import React from 'react';
-
-describe(`<${TabProvider.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render', () => {
-            const wrapper = mount(
-                <TabProvider>
-                    <TabList aria-label="Tab list">
-                        <Tab label="tab 1" />
-                        <Tab label="tab 1" />
-                    </TabList>
-
-                    <TabPanel>Tab 1 content</TabPanel>
-                    <TabPanel>Tab 2 content</TabPanel>
-                </TabProvider>,
-            );
-            const tabs = wrapper.find(Tab).find('button');
-            const firstTab = tabs.get(0);
-            const secondTab = tabs.get(1);
-
-            const tabPanels = wrapper.find(TabPanel).find('div');
-            const firstTabPanel = tabPanels.get(0);
-            const secondTabPanel = tabPanels.get(1);
-
-            // First tab is selected.
-            expect(firstTab.props['aria-selected']).toBe(true);
-            expect(secondTab.props['aria-selected']).toBe(false);
-
-            // Tab id and tab panel aria-labelledby by should match
-            expect(firstTab.props.id).toBe(firstTabPanel.props['aria-labelledby']);
-            expect(secondTab.props.id).toBe(secondTabPanel.props['aria-labelledby']);
-
-            // Tab panel id and tab aria-controls by should match
-            expect(firstTabPanel.props.id).toBe(firstTab.props['aria-controls']);
-            expect(secondTabPanel.props.id).toBe(secondTab.props['aria-controls']);
-        });
-    });
-});

package/dist/src/components/tabs/TabProvider.tsx

@@ -1,59 +0,0 @@
-import React, { ReactNode, useEffect, useReducer } from 'react';
-import { INIT_STATE, TabProviderContext, reducer } from './state';
-
-export interface TabProviderProps {
-    /** Active tab index. */
-    activeTabIndex?: number;
-    /** Tab provider children. */
-    children: ReactNode;
-    /** Tab panel children should not render if the tab panel is hidden. */
-    isLazy?: boolean;
-    /** Activate tabs on focus. */
-    shouldActivateOnFocus?: boolean;
-
-    /** Tab change callback. */
-    onChange?(index: number): void;
-}
-
-const DEFAULT_PROPS: Partial<TabProviderProps> = {
-    isLazy: INIT_STATE.isLazy,
-    shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus,
-};
-
-/**
- * This component provides a context in which tabs can be defined and linked to their tab panel.
- *
- * It does not produce any markup so you can wrap it around any React elements and then split the TabList and TabPanel
- * components in the react tree.
- *
- * @param  props React component props.
- * @return React element.
- */
-export const TabProvider: React.FC<TabProviderProps> = (props) => {
-    const { children, onChange, ...propState } = props;
-    const [state, dispatch] = useReducer(reducer, INIT_STATE);
-
-    // On prop state change => dispatch update.
-    useEffect(
-        () => {
-            dispatch({ type: 'update', payload: propState });
-        },
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [dispatch, ...Object.values(propState)],
-    );
-
-    // On active tab index state change => send update to the onChange.
-    useEffect(
-        () => {
-            if (state === INIT_STATE || !onChange || propState.activeTabIndex === state.activeTabIndex) {
-                return;
-            }
-            onChange(state.activeTabIndex);
-        },
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [onChange, state.activeTabIndex],
-    );
-
-    return <TabProviderContext.Provider value={[state, dispatch]}>{children}</TabProviderContext.Provider>;
-};
-TabProvider.defaultProps = DEFAULT_PROPS;

package/dist/src/components/tabs/Tabs.stories.tsx

@@ -1,134 +0,0 @@
-import { Button, Dialog, Tab, TabList, TabPanel, TabProvider } from '@lumx/react';
-import { number } from '@storybook/addon-knobs';
-import get from 'lodash/get';
-import times from 'lodash/times';
-import React, { useState } from 'react';
-
-export default { title: 'LumX components/tabs' };
-
-/* Control active tab externally (with activate tab on focus). */
-export const Controlled = ({ theme }: any) => {
-    const [activeTab, setActiveTab] = useState(1);
-    const changeActiveTabIndex = (evt: any) => setActiveTab(parseInt(get(evt, 'target.value', '0'), 10));
-
-    const [isLazy, setIsLazy] = useState(true);
-    const changeIsLazy = (evt: any) => setIsLazy(get(evt, 'target.checked'));
-
-    const [shouldActivateOnFocus, setShouldActivateOnFocus] = useState(true);
-    const changeShouldActivateOnFocus = (evt: any) => setShouldActivateOnFocus(get(evt, 'target.checked'));
-
-    return (
-        <>
-            <div>
-                Active tab index:
-                <input type="number" min={0} max={2} value={activeTab} onChange={changeActiveTabIndex} />
-            </div>
-
-            <div>
-                Lazy render tab panel content:
-                <input type="checkbox" checked={isLazy} onChange={changeIsLazy} />
-            </div>
-
-            <div>
-                Activate tab on focus:
-                <input type="checkbox" checked={shouldActivateOnFocus} onChange={changeShouldActivateOnFocus} />
-            </div>
-            <TabProvider
-                activeTabIndex={activeTab}
-                onChange={setActiveTab}
-                isLazy={isLazy}
-                shouldActivateOnFocus={shouldActivateOnFocus}
-            >
-                <TabList theme={theme} aria-label="Tab list">
-                    <Tab label="Tab a" />
-                    <Tab label="Tab b" />
-                    <Tab label="Tab c" />
-                </TabList>
-
-                <TabPanel className="lumx-spacing-padding-huge">Tab a content</TabPanel>
-                <TabPanel className="lumx-spacing-padding-huge">Tab b content</TabPanel>
-                <TabPanel className="lumx-spacing-padding-huge">Tab c content</TabPanel>
-            </TabProvider>
-        </>
-    );
-};
-
-/* Control active tab internally (with activate tab on focus). */
-export const NotControlled = ({ theme }: any) => {
-    return (
-        <TabProvider shouldActivateOnFocus onChange={console.log}>
-            <TabList theme={theme} aria-label="Tab list">
-                <Tab label="Tab a" />
-                <Tab label="Tab b" />
-            </TabList>
-            <TabPanel className="lumx-spacing-padding-huge">Tab a content</TabPanel>
-            <TabPanel className="lumx-spacing-padding-huge">Tab b content</TabPanel>
-        </TabProvider>
-    );
-};
-
-/* Display tabs far from their tab panels. */
-export const DisabledTab = ({ theme }: any) => (
-    <TabProvider shouldActivateOnFocus>
-        <TabList theme={theme} aria-label="Tab list">
-            <Tab label="Tab 1" />
-            <Tab label="Tab 2" isDisabled />
-            <Tab label="Tab 3" />
-        </TabList>
-        <TabPanel className="lumx-spacing-padding-huge">Tab 1 content</TabPanel>
-        <TabPanel className="lumx-spacing-padding-huge">Tab 2 content</TabPanel>
-        <TabPanel className="lumx-spacing-padding-huge">Tab 3 content</TabPanel>
-    </TabProvider>
-);
-
-/* Display tabs far from their tab panels. */
-export const SplitTabListAndTabPanels = ({ theme }: any) => {
-    const [isOpen, setOpen] = useState(true);
-    const [activeTabIndex, onChange] = useState(1);
-
-    return (
-        <TabProvider activeTabIndex={activeTabIndex} onChange={onChange} isLazy={false}>
-            <Button
-                onClick={() => {
-                    setOpen(!isOpen);
-                    onChange(1);
-                }}
-            >
-                Open dialog with tabs in footer
-            </Button>
-            <Dialog isOpen={isOpen} forceFooterDivider onClose={() => setOpen(false)}>
-                <TabPanel className="lumx-spacing-padding-huge">Tab 1 content</TabPanel>
-                <TabPanel className="lumx-spacing-padding-huge">Tab 2 content</TabPanel>
-                <TabPanel className="lumx-spacing-padding-huge">Tab 3 content</TabPanel>
-
-                <footer>
-                    <TabList theme={theme} aria-label="Tab list">
-                        <Tab label="Tab 1" />
-                        <Tab label="Tab 2" />
-                        <Tab label="Tab 3" />
-                    </TabList>
-                </footer>
-            </Dialog>
-        </TabProvider>
-    );
-};
-
-/* Dynamically generate tabs. */
-export const DynamicTabs = ({ theme }: any) => {
-    const tabCount = number('Tab count', 3);
-    return (
-        <TabProvider>
-            <TabList theme={theme} aria-label="Tab list">
-                {times(tabCount, (tabNumber) => (
-                    <Tab key={tabNumber} label={`Tab ${tabNumber}`} />
-                ))}
-            </TabList>
-
-            {times(tabCount, (tabNumber) => (
-                <TabPanel key={tabNumber} className="lumx-spacing-padding-huge">
-                    Tab {tabNumber} content
-                </TabPanel>
-            ))}
-        </TabProvider>
-    );
-};

package/dist/src/components/tabs/__snapshots__/Tab.test.tsx.snap

@@ -1,62 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Tab> Snapshots and structure should render 1`] = `
-<button
-  aria-controls="tab-panel-1"
-  aria-selected={false}
-  className="lumx-tabs__link"
-  id="tab-1"
-  onClick={[Function]}
-  onFocus={[Function]}
-  onKeyPress={[Function]}
-  role="tab"
-  tabIndex={-1}
-  type="button"
->
-  <span>
-    Test Tab Label
-  </span>
-</button>
-`;
-
-exports[`<Tab> Snapshots and structure should render active state 1`] = `
-<button
-  aria-controls="tab-panel-3"
-  aria-selected={true}
-  className="lumx-tabs__link lumx-tabs__link--is-active"
-  id="tab-3"
-  onClick={[Function]}
-  onFocus={[Function]}
-  onKeyPress={[Function]}
-  role="tab"
-  tabIndex={0}
-  type="button"
->
-  <span>
-    Test Tab Label
-  </span>
-</button>
-`;
-
-exports[`<Tab> Snapshots and structure should render icon 1`] = `
-<button
-  aria-controls="tab-panel-2"
-  aria-selected={false}
-  className="lumx-tabs__link"
-  id="tab-2"
-  onClick={[Function]}
-  onFocus={[Function]}
-  onKeyPress={[Function]}
-  role="tab"
-  tabIndex={-1}
-  type="button"
->
-  <Icon
-    icon="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
-    size="xs"
-  />
-  <span>
-    Test Tab Label
-  </span>
-</button>
-`;

package/dist/src/components/tabs/__snapshots__/TabList.test.tsx.snap

@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<TabList> Snapshots and structure should render correctly 1`] = `
-<div
-  className="lumx-tabs lumx-tabs--layout-fixed lumx-tabs--position-left lumx-tabs--theme-light"
->
-  <div
-    aria-label="Tab list"
-    className="lumx-tabs__links"
-    role="tablist"
-  >
-    <Tab
-      key="0"
-      label="Tab 0"
-    />
-    <Tab
-      key="1"
-      label="Tab 1"
-    />
-  </div>
-</div>
-`;

package/dist/src/components/tabs/__snapshots__/TabPanel.test.tsx.snap

@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<TabPanel> Snapshots and structure should render correctly 1`] = `
-<div
-  aria-labelledby="tab-1"
-  className="lumx-tab-panel"
-  id="tab-panel-1"
-  role="tabpanel"
-  tabIndex={0}
->
-  Tab panel content
-</div>
-`;
-
-exports[`<TabPanel> Snapshots and structure should render isActive state 1`] = `
-<div
-  aria-labelledby="tab-2"
-  className="lumx-tab-panel lumx-tab-panel--is-active"
-  id="tab-panel-2"
-  role="tabpanel"
-  tabIndex={0}
->
-  Tab panel content
-</div>
-`;

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

@@ -1,4 +0,0 @@
-export * from './TabProvider';
-export * from './TabList';
-export * from './Tab';
-export * from './TabPanel';

package/dist/src/components/tabs/state.ts

@@ -1,116 +0,0 @@
-import { Dispatch, createContext, useCallback, useContext, useEffect, useMemo } from 'react';
-import { uid } from 'uid';
-
-type TabType = 'tab' | 'tabPanel';
-
-export interface State {
-    isLazy: boolean;
-    shouldActivateOnFocus: boolean;
-    activeTabIndex: number;
-    ids: Record<TabType, string[]>;
-}
-
-export const INIT_STATE: State = {
-    isLazy: true,
-    shouldActivateOnFocus: false,
-    activeTabIndex: 0,
-    ids: { tab: [], tabPanel: [] },
-};
-
-export type Action =
-    | { type: 'update'; payload: Partial<State> }
-    | { type: 'setActiveTabIndex'; payload: number }
-    | { type: 'register'; payload: { type: TabType; id: string } }
-    | { type: 'unregister'; payload: { type: TabType; id: string } };
-
-export const reducer = (state: State, action: Action): State => {
-    switch (action.type) {
-        case 'update':
-            return { ...state, ...action.payload };
-        case 'setActiveTabIndex': {
-            if (state.activeTabIndex === action.payload) {
-                return state;
-            }
-            // Change active tab index.
-            return { ...state, activeTabIndex: action.payload };
-        }
-        case 'register': {
-            const { type, id } = action.payload;
-            // Append tab/tabPanel id in state.
-            return { ...state, ids: { ...state.ids, [type]: [...state.ids[type], id] } };
-        }
-        case 'unregister': {
-            const { type, id } = action.payload;
-            const index = state.ids[type].indexOf(id);
-            if (index === -1) return state;
-            // Remove tab & tab panel at index.
-            const tabIds = [...state.ids.tab];
-            tabIds.splice(index, 1);
-            const tabPanelIds = [...state.ids.tabPanel];
-            tabPanelIds.splice(index, 1);
-            return {
-                ...state,
-                ids: { tab: tabIds, tabPanel: tabPanelIds },
-            };
-        }
-        default:
-            return state;
-    }
-};
-
-export const TabProviderContext = createContext<[State, Dispatch<Action>] | null>(null);
-
-export type TabState = Pick<Required<State>, 'isLazy' | 'shouldActivateOnFocus'> & {
-    isActive: boolean;
-    tabId: string;
-    tabPanelId: string;
-    changeToTab(): void;
-};
-
-/* eslint-disable react-hooks/rules-of-hooks */
-export const useTabProviderContext = (type: TabType, originalId?: string): undefined | TabState => {
-    const context = useContext(TabProviderContext);
-    if (!context) {
-        return undefined;
-    }
-    const [state, dispatch] = context;
-
-    // Current tab or tab panel id.
-    const id = useMemo(
-        () => originalId || `${type}-${uid()}`,
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [],
-    );
-    useEffect(
-        () => {
-            // On mount: register tab or tab panel id.
-            dispatch({ type: 'register', payload: { type, id } });
-            return () => {
-                // On unmount: unregister tab or tab panel id.
-                dispatch({ type: 'unregister', payload: { type, id } });
-            };
-        },
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [],
-    );
-
-    // Find tab/tabPanel index using it's id.
-    const index = useMemo(() => state.ids[type].indexOf(id), [state.ids, type, id]);
-    const tabId = useMemo(() => state.ids.tab[index] || '', [state, index]);
-    const tabPanelId = useMemo(() => state.ids.tabPanel[index] || '', [state, index]);
-    const isActive = useMemo(() => state.activeTabIndex === index, [state, index]);
-    const changeToTab = useCallback(() => dispatch({ type: 'setActiveTabIndex', payload: index }), [dispatch, index]);
-    return {
-        isLazy: state.isLazy,
-        shouldActivateOnFocus: state.shouldActivateOnFocus,
-        tabId,
-        tabPanelId,
-        isActive,
-        changeToTab,
-    };
-};
-
-export const useTabProviderContextState = (): State | undefined => {
-    const context = useContext(TabProviderContext);
-    return context?.[0];
-};

package/dist/src/components/tabs/test.mocks.ts

@@ -1,33 +0,0 @@
-import { TabState, useTabProviderContext, useTabProviderContextState } from './state';
-
-export function setupTabProviderMocks(options: any = {}) {
-    const changeToTab = jest.fn();
-    const mockedHook = jest.fn(
-        (): TabState => {
-            const index = options.index || 0;
-            const isLazy = options.isLazy as any;
-            const shouldActivateOnFocus = options.shouldActivateOnFocus as any;
-            const isActive = options.isActive || false;
-            return {
-                isLazy,
-                shouldActivateOnFocus,
-                changeToTab,
-                tabId: `tab-${index}`,
-                tabPanelId: `tab-panel-${index}`,
-                isActive,
-            };
-        },
-    );
-    (useTabProviderContext as jest.Mock).mockImplementationOnce(mockedHook);
-
-    const mockedHook2 = jest.fn((): any => {
-        const index = options.index || 0;
-        const numberOfSteps = options.numberOfSteps || 2;
-        return {
-            ids: { tab: { length: numberOfSteps } },
-            activeTabIndex: index,
-        };
-    });
-    (useTabProviderContextState as jest.Mock).mockImplementationOnce(mockedHook2);
-    return { mockedHook, changeToTab };
-}