@lumx/react 3.20.1-alpha.2 → 3.20.1-alpha.20

package/src/components/message/index.ts

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

package/src/components/mosaic/Mosaic.stories.tsx

@@ -1,89 +0,0 @@
-import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
-import { IMAGES } from '@lumx/react/stories/controls/image';
-import { Mosaic } from './Mosaic';
-
-export default {
-    title: 'LumX components/mosaic/Mosaic',
-    component: Mosaic,
-    args: Mosaic.defaultProps,
-    argTypes: {},
-    decorators: [withWrapper({ style: { width: 250 } })],
-};
-
-export const OneThumbnail = {
-    args: {
-        thumbnails: [{ image: IMAGES.landscape1 }],
-    },
-};
-
-export const OneThumbnailClickable = {
-    ...OneThumbnail,
-    argTypes: {
-        onImageClick: { action: true },
-    },
-};
-
-export const TwoThumbnail = {
-    args: {
-        thumbnails: [...OneThumbnail.args.thumbnails, { image: IMAGES.landscape2 }],
-    },
-};
-
-export const TwoThumbnailClickable = {
-    ...TwoThumbnail,
-    argTypes: {
-        onImageClick: { action: true },
-    },
-};
-
-export const ThreeThumbnail = {
-    args: {
-        thumbnails: [...TwoThumbnail.args.thumbnails, { image: IMAGES.landscape3 }],
-    },
-};
-
-export const ThreeThumbnailClickable = {
-    ...ThreeThumbnail,
-    argTypes: {
-        onImageClick: { action: true },
-    },
-};
-
-export const FourThumbnail = {
-    args: {
-        thumbnails: [...ThreeThumbnail.args.thumbnails, { image: IMAGES.portrait1 }],
-    },
-};
-
-export const FourThumbnailClickable = {
-    ...FourThumbnail,
-    argTypes: {
-        onImageClick: { action: true },
-    },
-};
-
-export const FiveThumbnail = {
-    args: {
-        thumbnails: [...FourThumbnail.args.thumbnails, { image: IMAGES.portrait2 }],
-    },
-};
-
-export const FiveThumbnailClickable = {
-    ...FiveThumbnail,
-    argTypes: {
-        onImageClick: { action: true },
-    },
-};
-
-export const SixThumbnail = {
-    args: {
-        thumbnails: [...FiveThumbnail.args.thumbnails, { image: IMAGES.portrait3 }],
-    },
-};
-
-export const SixThumbnailClickable = {
-    ...SixThumbnail,
-    argTypes: {
-        onImageClick: { action: true },
-    },
-};

package/src/components/mosaic/Mosaic.test.tsx

@@ -1,79 +0,0 @@
-import React from 'react';
-
-import { Mosaic, MosaicProps } from '@lumx/react/components/mosaic/Mosaic';
-import { render, screen, within } from '@testing-library/react';
-import { getByClassName, queryAllByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
-import { Thumbnail } from '@lumx/react';
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import range from 'lodash/range';
-import userEvent from '@testing-library/user-event';
-
-const CLASSNAME = Mosaic.className as string;
-
-const setup = (props: Partial<MosaicProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    render(<Mosaic thumbnails={[]} {...props} />, { wrapper });
-    const mosaic = getByClassName(document.body, CLASSNAME);
-    const thumbnails = queryAllByClassName(mosaic, Thumbnail.className as string);
-    const overlay = queryByClassName(mosaic, `${CLASSNAME}__overlay`);
-    return { props, mosaic, thumbnails, overlay };
-};
-
-const generateThumbnails = (count: number) =>
-    range(1, count + 1).map((i) => ({
-        image: `https://example.com/image${i}.png`,
-        alt: '',
-    }));
-
-describe(`<${Mosaic.displayName}>`, () => {
-    it.each([1, 2, 3, 4])('should render %s thumbnail', async (count) => {
-        const { mosaic, thumbnails } = setup({
-            thumbnails: generateThumbnails(count),
-        });
-        expect(mosaic).toHaveClass(`${CLASSNAME}--has-${count}-thumbnail${count > 1 ? 's' : ''}`);
-        expect(thumbnails.length).toBe(count);
-        for (const thumbnail of thumbnails) {
-            expect(within(thumbnail).queryByRole('img')).toBeInTheDocument();
-        }
-    });
-
-    it('should render more than 4 thumbnails', () => {
-        const { mosaic, thumbnails, overlay } = setup({
-            thumbnails: generateThumbnails(6),
-        });
-        expect(mosaic).toHaveClass(`${CLASSNAME}--has-4-thumbnails`);
-        expect(thumbnails.length).toBe(4);
-        expect(overlay).toBeInTheDocument();
-        expect(overlay).toHaveTextContent('+2');
-    });
-
-    it('should render clickable', async () => {
-        const onClick = jest.fn();
-        const onImageClick = jest.fn();
-        const { thumbnails } = setup({
-            thumbnails: generateThumbnails(6),
-            onImageClick,
-            onClick,
-        });
-
-        expect(screen.queryAllByRole('button').length).toBe(thumbnails.length);
-
-        // Click the third image
-        await userEvent.click(thumbnails[2]);
-        expect(onImageClick).toHaveBeenCalledWith(2);
-        expect(onClick).toHaveBeenCalled();
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'mosaic',
-        forwardAttributes: 'mosaic',
-        forwardRef: 'mosaic',
-        applyTheme: {
-            affects: [{ element: 'mosaic' }, { element: 'thumbnails' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});

package/src/components/mosaic/Mosaic.tsx

@@ -1,98 +0,0 @@
-import React, { MouseEventHandler, useMemo } from 'react';
-
-import classNames from 'classnames';
-import take from 'lodash/take';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-
-import { Alignment, AspectRatio, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-/**
- * Defines the props of the component.
- */
-export interface MosaicProps extends GenericProps, HasTheme {
-    /** Thumbnails. */
-    thumbnails: ThumbnailProps[];
-    /** On image click callback. */
-    onImageClick?(index: number): void;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Mosaic';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<MosaicProps> = {};
-
-/**
- * Mosaic component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Mosaic = forwardRef<MosaicProps, HTMLDivElement>((props, ref) => {
-    const defaultTheme = useTheme() || Theme.light;
-    const { className, theme = defaultTheme, thumbnails, onImageClick, ...forwardedProps } = props;
-    const handleImageClick = useMemo(() => {
-        if (!onImageClick) return undefined;
-
-        return (index: number, onClick?: MouseEventHandler): MouseEventHandler =>
-            (event) => {
-                onClick?.(event);
-                onImageClick?.(index);
-            };
-    }, [onImageClick]);
-
-    return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }), {
-                [`${CLASSNAME}--has-1-thumbnail`]: thumbnails?.length === 1,
-                [`${CLASSNAME}--has-2-thumbnails`]: thumbnails?.length === 2,
-                [`${CLASSNAME}--has-3-thumbnails`]: thumbnails?.length === 3,
-                [`${CLASSNAME}--has-4-thumbnails`]: thumbnails?.length >= 4,
-            })}
-        >
-            <div className={`${CLASSNAME}__wrapper`}>
-                {take(thumbnails, 4).map((thumbnail: any, index: number) => {
-                    const { image, onClick, align, ...thumbnailProps } = thumbnail;
-
-                    return (
-                        <div key={index} className={`${CLASSNAME}__thumbnail`}>
-                            <Thumbnail
-                                {...thumbnailProps}
-                                align={align || Alignment.left}
-                                image={image}
-                                theme={theme}
-                                aspectRatio={AspectRatio.free}
-                                fillHeight
-                                onClick={handleImageClick?.(index, onClick) || onClick}
-                            />
-
-                            {thumbnails.length > 4 && index === 3 && (
-                                <div className={`${CLASSNAME}__overlay`}>
-                                    <span>+{thumbnails.length - 4}</span>
-                                </div>
-                            )}
-                        </div>
-                    );
-                })}
-            </div>
-        </div>
-    );
-});
-Mosaic.displayName = COMPONENT_NAME;
-Mosaic.className = CLASSNAME;
-Mosaic.defaultProps = DEFAULT_PROPS;

package/src/components/mosaic/index.ts

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

package/src/components/navigation/Navigation.stories.tsx

@@ -1,236 +0,0 @@
-import React from 'react';
-
-import {
-    mdiHome,
-    mdiMessageTextOutline,
-    mdiFolderGoogleDrive,
-    mdiTextBox,
-    mdiLink,
-    mdiGoogleCirclesExtended,
-    mdiFolder,
-} from '@lumx/icons';
-import { Navigation, Orientation, Theme } from '@lumx/react';
-import { CustomLink } from '@lumx/react/stories/utils/CustomLink';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-import { withThemedBackground } from '@lumx/react/stories/decorators/withThemedBackground';
-import { withTheming } from '@lumx/react/stories/utils/theming';
-import pick from 'lodash/pick';
-import { DESIGN_TOKENS } from '@lumx/core/js/constants/design-tokens';
-import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
-import { iconArgType } from '@lumx/react/stories/controls/icons';
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-
-export default {
-    title: 'LumX components/navigation/Navigation',
-    component: Navigation,
-    argTypes: {
-        'itemProps.onClick': { action: true, table: { disable: true } },
-    },
-};
-
-/**
- * Demonstrate a full-featured navigation
- */
-export const FullFeatured = {
-    render({ itemProps, orientation }: any) {
-        return (
-            <Navigation aria-label="navigation" orientation={orientation}>
-                <Navigation.Item isCurrentPage label="Homepage" icon={mdiHome} href="#" {...itemProps} />
-                <Navigation.Item
-                    label="Some very very very very very very very very very very very very very very very very very very very very very very very very very very very long text"
-                    href="#"
-                    {...itemProps}
-                />
-                <Navigation.Item
-                    label="Custom link element"
-                    icon={mdiMessageTextOutline}
-                    as={CustomLink}
-                    // `to` prop is required in CustomLink
-                    to="#"
-                    {...itemProps}
-                />
-                <Navigation.Item as="button" label="Button element" icon={mdiFolderGoogleDrive} {...itemProps} />
-                <Navigation.Section label="Section 1" icon={mdiFolder} {...itemProps}>
-                    <Navigation.Item label="A content" href="#content" {...itemProps} />
-                    <Navigation.Item label="A button" icon={mdiLink} href="https://www.google.com" {...itemProps} />
-                    <Navigation.Item
-                        label="Some very very very very very very very very very very very very very very very very very very very very very very very very very very very long text"
-                        icon={mdiTextBox}
-                        href="#content"
-                        {...itemProps}
-                    />
-                    <Navigation.Item
-                        label="A community"
-                        icon={mdiGoogleCirclesExtended}
-                        href="#community"
-                        {...itemProps}
-                    />
-                    <Navigation.Section label="Section 1.1" icon={mdiFolder} {...itemProps}>
-                        <Navigation.Item label="A content" icon={mdiTextBox} href="#content" {...itemProps} />
-                        <Navigation.Item
-                            label="Some very very very very very very very very very very very very very very very very very very very very very very very very very very very long text"
-                            icon={mdiTextBox}
-                            href="#content"
-                            {...itemProps}
-                        />
-                        <Navigation.Item label="A link" icon={mdiLink} href="https://www.google.com" {...itemProps} />
-                        <Navigation.Item
-                            label="A community"
-                            icon={mdiGoogleCirclesExtended}
-                            href="#community"
-                            {...itemProps}
-                        />
-                    </Navigation.Section>
-                </Navigation.Section>
-                <Navigation.Section label="Section 2" icon={mdiFolder} {...itemProps}>
-                    <Navigation.Item label="A content" icon={mdiTextBox} href="#content" {...itemProps} />
-                    <Navigation.Item label="A link" icon={mdiLink} href="https://www.google.com" {...itemProps} />
-                    <Navigation.Item
-                        label="A community"
-                        icon={mdiGoogleCirclesExtended}
-                        href="#community"
-                        {...itemProps}
-                    />
-                </Navigation.Section>
-            </Navigation>
-        );
-    },
-    decorators: [withNestedProps()],
-};
-
-/**
- * Horizontal navigation
- */
-export const FullFeaturedHorizontal = { ...FullFeatured, args: { orientation: Orientation.horizontal } };
-
-/**
- * Demonstrate all item variants
- */
-export const ItemVariants = {
-    args: {
-        'itemProps.icon': mdiHome,
-        'itemProps.as': 'button',
-    },
-    argTypes: {
-        'itemProps.icon': iconArgType,
-        'itemProps.as': getSelectArgType(['button', 'a']),
-        'itemProps.href': { control: 'text', if: { arg: 'itemProps.as', eq: 'a' } },
-    },
-    render: ({ itemProps, ...args }: any) => (
-        <Navigation aria-label="navigation" {...args}>
-            {Object.entries({
-                '': {},
-                Current: { isCurrentPage: true },
-            }).map(([key1, currentProps]) =>
-                Object.entries({
-                    Item: {},
-                    'Item (hover)': { 'data-lumx-hover': true },
-                    'Item (active)': { 'data-lumx-active': true },
-                }).map(([key2, stateProps]) => (
-                    <Navigation.Item
-                        key={key1 + key2}
-                        label={`${key1} ${key2}`}
-                        {...currentProps}
-                        {...stateProps}
-                        {...itemProps}
-                    />
-                )),
-            )}
-
-            {Object.entries({
-                Section: {},
-                'Section (hover)': { 'data-lumx-hover': true },
-                'Section (active)': { 'data-lumx-active': true },
-            }).map(([key2, stateProps]) => (
-                <Navigation.Section key={key2} label={key2} {...stateProps} {...itemProps}>
-                    <Navigation.Item as="button" label="SubItem 1" />
-                    <Navigation.Item as="button" label="SubItem 2" />
-                </Navigation.Section>
-            ))}
-        </Navigation>
-    ),
-    decorators: [
-        withNestedProps(),
-        withThemedBackground(),
-        withCombinations({
-            sectionStyle: { display: 'inline-block' },
-            combinations: {
-                cols: { '': {}, Focused: { 'itemProps.data-focus-visible-added': true } },
-                sections: {
-                    'Theme light': { theme: undefined },
-                    'Theme dark': { theme: Theme.dark },
-                },
-            },
-        }),
-    ],
-};
-
-/**
- * Test CSS variable theming
- */
-export const Theming = {
-    ...ItemVariants,
-    decorators: [
-        ...ItemVariants.decorators,
-        withTheming({
-            properties: pick(DESIGN_TOKENS, ['navigation']),
-            values: `
-            --lumx-navigation-item-emphasis-low-state-default-border-top-width: 5px;
-            --lumx-navigation-item-emphasis-low-state-default-border-right-width: 2px;
-            --lumx-navigation-item-emphasis-low-state-default-border-bottom-width: 3px;
-            --lumx-navigation-item-emphasis-low-state-default-border-left-width: 4px;
-            --lumx-navigation-item-emphasis-low-state-default-theme-light-border-color: lightcoral;
-            --lumx-navigation-item-emphasis-low-state-default-theme-light-background-color: lightsalmon;
-            --lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color: lightsalmon;
-            --lumx-navigation-item-emphasis-low-state-default-theme-dark-background-color: lightcoral;
-
-            --lumx-navigation-item-emphasis-low-state-hover-border-top-width: 4px;
-            --lumx-navigation-item-emphasis-low-state-hover-border-right-width: 5px;
-            --lumx-navigation-item-emphasis-low-state-hover-border-bottom-width: 2px;
-            --lumx-navigation-item-emphasis-low-state-hover-border-left-width: 3px;
-            --lumx-navigation-item-emphasis-low-state-hover-theme-light-border-color: lightgreen;
-            --lumx-navigation-item-emphasis-low-state-hover-theme-light-background-color: lightpink;
-            --lumx-navigation-item-emphasis-low-state-hover-theme-dark-border-color: lightpink;
-            --lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color: lightgreen;
-
-            --lumx-navigation-item-emphasis-low-state-active-border-top-width: 3px;
-            --lumx-navigation-item-emphasis-low-state-active-border-right-width: 4px;
-            --lumx-navigation-item-emphasis-low-state-active-border-bottom-width: 5px;
-            --lumx-navigation-item-emphasis-low-state-active-border-left-width: 2px;
-            --lumx-navigation-item-emphasis-low-state-active-theme-light-border-color: lemonchiffon;
-            --lumx-navigation-item-emphasis-low-state-active-theme-light-background-color: lavenderblush;
-            --lumx-navigation-item-emphasis-low-state-active-theme-dark-border-color: lavenderblush;
-            --lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color: lemonchiffon;
-
-            ////
-
-            --lumx-navigation-item-emphasis-selected-state-default-border-top-width: 2px;
-            --lumx-navigation-item-emphasis-selected-state-default-border-right-width: 3px;
-            --lumx-navigation-item-emphasis-selected-state-default-border-bottom-width: 4px;
-            --lumx-navigation-item-emphasis-selected-state-default-border-left-width: 5px;
-            --lumx-navigation-item-emphasis-selected-state-default-theme-light-border-color: red;
-            --lumx-navigation-item-emphasis-selected-state-default-theme-light-background-color: orange;
-            --lumx-navigation-item-emphasis-selected-state-default-theme-dark-border-color: blue;
-            --lumx-navigation-item-emphasis-selected-state-default-theme-dark-background-color: violet;
-
-            --lumx-navigation-item-emphasis-selected-state-hover-border-top-width: 3px;
-            --lumx-navigation-item-emphasis-selected-state-hover-border-right-width: 4px;
-            --lumx-navigation-item-emphasis-selected-state-hover-border-bottom-width: 5px;
-            --lumx-navigation-item-emphasis-selected-state-hover-border-left-width: 2px;
-            --lumx-navigation-item-emphasis-selected-state-hover-theme-light-border-color: green;
-            --lumx-navigation-item-emphasis-selected-state-hover-theme-light-background-color: violet;
-            --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-border-color: violet;
-            --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-background-color: green;
-
-            --lumx-navigation-item-emphasis-selected-state-active-border-top-width: 4px;
-            --lumx-navigation-item-emphasis-selected-state-active-border-right-width: 5px;
-            --lumx-navigation-item-emphasis-selected-state-active-border-bottom-width: 2px;
-            --lumx-navigation-item-emphasis-selected-state-active-border-left-width: 3px;
-            --lumx-navigation-item-emphasis-selected-state-active-theme-light-border-color: orange;
-            --lumx-navigation-item-emphasis-selected-state-active-theme-light-background-color: pink;
-            --lumx-navigation-item-emphasis-selected-state-active-theme-dark-border-color: pink;
-            --lumx-navigation-item-emphasis-selected-state-active-theme-dark-background-color: orange;
-            `,
-        }),
-    ],
-};

package/src/components/navigation/Navigation.test.tsx

@@ -1,67 +0,0 @@
-import React from 'react';
-
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { render } from '@testing-library/react';
-import { getAllByClassName, getByClassName } from '@lumx/react/testing/utils/queries';
-import { Orientation } from '@lumx/core/js/constants';
-import { Navigation, NavigationProps } from '.';
-
-const CLASSNAME = Navigation.className as string;
-
-type SetupProps = Partial<NavigationProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-
-const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions = {}) => {
-    const props = { 'aria-label': 'navigation', ...propsOverride } as any;
-    const { container } = render(
-        <Navigation {...props}>
-            <Navigation.Item label="A link" href="" />
-            <Navigation.Item label="A link" as="button" />
-            <Navigation.Item label="A link" href="" />
-        </Navigation>,
-        { wrapper },
-    );
-
-    const element = getByClassName(container, CLASSNAME);
-    const items = getAllByClassName(element, Navigation.Item.className as string);
-    return { container, element, items, props };
-};
-
-describe(`<${Navigation.displayName}>`, () => {
-    it('should render default', () => {
-        const { element } = setup();
-        expect(element).toBeInTheDocument();
-        expect(element).toHaveClass(CLASSNAME);
-    });
-
-    it('should render vertically by default', () => {
-        const { element } = setup();
-        expect(element).toHaveClass(`${CLASSNAME}--orientation-vertical`);
-    });
-
-    it('should render vertically when orientation is set to vertical', () => {
-        const { element } = setup({ orientation: Orientation.vertical });
-        expect(element).toHaveClass(`${CLASSNAME}--orientation-vertical`);
-    });
-
-    it('should render horizontally when orientation is set to horizontal', () => {
-        const { element } = setup({ orientation: Orientation.horizontal });
-        expect(element).toHaveClass(`${CLASSNAME}--orientation-horizontal`);
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'element',
-        forwardAttributes: 'element',
-        applyTheme: {
-            affects: [{ element: 'element' }, { element: 'items' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});

package/src/components/navigation/Navigation.tsx

@@ -1,81 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-
-import { HasAriaLabelOrLabelledBy, HasClassName, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { Orientation, Theme } from '@lumx/react';
-import { ThemeProvider, useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-import { NavigationSection } from './NavigationSection';
-import { NavigationItem } from './NavigationItem';
-import { NavigationContext } from './context';
-
-export type NavigationProps = React.ComponentProps<'nav'> &
-    HasClassName &
-    HasTheme & {
-        /** Content of the navigation. These components should be of type NavigationItem to be rendered */
-        children?: React.ReactNode;
-        orientation?: Orientation;
-    } & HasAriaLabelOrLabelledBy;
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Navigation';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props
- */
-const DEFAULT_PROPS = {
-    orientation: Orientation.vertical,
-};
-
-type SubComponents = {
-    Section: typeof NavigationSection;
-    Item: typeof NavigationItem;
-};
-
-export const Navigation = forwardRef<NavigationProps, HTMLElement, SubComponents>((props, ref) => {
-    const defaultTheme = useTheme() || Theme.light;
-    const {
-        children,
-        className,
-        theme = defaultTheme,
-        orientation = DEFAULT_PROPS.orientation,
-        ...forwardedProps
-    } = props;
-    return (
-        <ThemeProvider value={theme}>
-            <nav
-                className={classNames(
-                    className,
-                    handleBasicClasses({
-                        prefix: CLASSNAME,
-                        theme,
-                        orientation,
-                    }),
-                )}
-                ref={ref}
-                {...forwardedProps}
-            >
-                <NavigationContext.Provider value={{ orientation }}>
-                    <ul className={`${CLASSNAME}__list`}>{children}</ul>
-                </NavigationContext.Provider>
-            </nav>
-        </ThemeProvider>
-    );
-});
-Navigation.displayName = COMPONENT_NAME;
-Navigation.className = CLASSNAME;
-Navigation.defaultProps = DEFAULT_PROPS;
-
-// Sub components
-Navigation.Section = NavigationSection;
-Navigation.Item = NavigationItem;