@lumx/react 3.0.1 → 3.0.2-alpha-react-utils.2

package/src/components/heading/Heading.test.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+
+import { commonTestsSuite } from '@lumx/react/testing/utils';
+import { Heading, HeadingProps } from './Heading';
+import { HeadingLevelProvider } from './HeadingLevelProvider';
+
+const setup = (props: Partial<HeadingProps> = {}) => {
+    const wrapper = shallow(<Heading {...props} />);
+    return { props, wrapper };
+};
+
+describe(`<${Heading.displayName}>`, () => {
+    describe('Snapshots and structure', () => {
+        it('should render a Text component with h1 by default', () => {
+            const { wrapper } = setup({ children: 'Some text' });
+            expect(wrapper).toHaveDisplayName('Text');
+            expect(wrapper).toHaveProp('as', 'h1');
+            expect(wrapper.prop('className')).toBe(Heading.className);
+        });
+
+        it('should render with as', () => {
+            const { wrapper } = setup({ children: 'Some text', as: 'h2' });
+            expect(wrapper).toHaveDisplayName('Text');
+            expect(wrapper).toHaveProp('as', 'h2');
+            expect(wrapper.prop('className')).toBe(Heading.className);
+        });
+
+        it('should correctly render levels nested in HeadingLevel', () => {
+            const wrapper = mount(
+                <>
+                    <Heading>Level 1</Heading>
+                    <HeadingLevelProvider>
+                        <Heading>Level 2</Heading>
+                        <HeadingLevelProvider>
+                            <Heading>Level 3</Heading>
+                            <HeadingLevelProvider>
+                                <Heading>Level 4</Heading>
+                                <HeadingLevelProvider>
+                                    <Heading>Level 5 - 1</Heading>
+                                    <Heading>Level 5 - 2</Heading>
+                                    <HeadingLevelProvider>
+                                        <Heading>Level 6</Heading>
+                                        <HeadingLevelProvider>
+                                            <Heading>Level 7</Heading>
+                                        </HeadingLevelProvider>
+                                    </HeadingLevelProvider>
+                                </HeadingLevelProvider>
+                            </HeadingLevelProvider>
+                        </HeadingLevelProvider>
+                    </HeadingLevelProvider>
+                    ,
+                </>,
+            );
+
+            expect(wrapper.find('h1')).toHaveText('Level 1');
+            expect(wrapper.find('h2')).toHaveText('Level 2');
+            expect(wrapper.find('h3')).toHaveText('Level 3');
+            expect(wrapper.find('h4')).toHaveText('Level 4');
+
+            const h5 = wrapper.find('h5');
+            expect(h5).toHaveLength(2);
+            expect(h5.at(0)).toHaveText('Level 5 - 1');
+            expect(h5.at(1)).toHaveText('Level 5 - 2');
+            // There should be 2 h6 because it is the maximum value;
+            const h6 = wrapper.find('h6');
+            expect(h6).toHaveLength(2);
+            expect(h6.at(0)).toHaveText('Level 6');
+            expect(h6.at(1)).toHaveText('Level 7');
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: Heading.className });
+});

package/src/components/heading/Heading.tsx

@@ -0,0 +1,63 @@
+import { Comp, HeadingElement } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import classNames from 'classnames';
+import React, { forwardRef } from 'react';
+import { Text, TextProps } from '../text';
+import { DEFAULT_TYPOGRAPHY_BY_LEVEL } from './constants';
+import { useHeadingLevel } from './useHeadingLevel';
+
+/**
+ * Defines the props of the component.
+ */
+export interface HeadingProps extends Partial<TextProps> {
+    /**
+     * Display a specific heading level instead of the one provided by parent context provider.
+     */
+    as?: HeadingElement;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Heading';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {} as const;
+
+/**
+ * Renders a heading component.
+ * Extends the `Text` Component with the heading level automatically computed based on
+ * the current level provided by the context.
+ */
+export const Heading: Comp<HeadingProps> = forwardRef((props, ref) => {
+    const { children, as, className, ...forwardedProps } = props;
+    const { headingElement } = useHeadingLevel();
+
+    return (
+        <Text
+            ref={ref}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    prefix: CLASSNAME,
+                }),
+            )}
+            as={as || headingElement}
+            typography={DEFAULT_TYPOGRAPHY_BY_LEVEL[headingElement]}
+            {...forwardedProps}
+        >
+            {children}
+        </Text>
+    );
+});
+
+Heading.displayName = COMPONENT_NAME;
+Heading.className = CLASSNAME;
+Heading.defaultProps = DEFAULT_PROPS;

package/src/components/heading/HeadingLevelProvider.tsx

@@ -0,0 +1,30 @@
+import { HeadingElement } from '@lumx/react/utils/type';
+import React, { ReactNode } from 'react';
+import { MAX_HEADING_LEVEL } from './constants';
+import { HeadingLevelContext } from './context';
+import { useHeadingLevel } from './useHeadingLevel';
+
+export interface HeadingLevelProviderProps {
+    /** The heading level to start at. If left undefined, the parent context will be used, if any. */
+    level?: number;
+    /** The children to display */
+    children: ReactNode;
+}
+
+/**
+ * Provide a new heading level context.
+ */
+export const HeadingLevelProvider: React.FC<HeadingLevelProviderProps> = ({ children, level }) => {
+    const { level: contextLevel } = useHeadingLevel();
+
+    const incrementedLevel = level || contextLevel + 1;
+    /** Don't allow a level beyond the maximum level. */
+    const nextLevel = incrementedLevel > MAX_HEADING_LEVEL ? MAX_HEADING_LEVEL : incrementedLevel;
+    const headingElement = `h${nextLevel}` as HeadingElement;
+
+    return (
+        <HeadingLevelContext.Provider value={{ level: nextLevel, headingElement }}>
+            {children}
+        </HeadingLevelContext.Provider>
+    );
+};

package/src/components/heading/constants.ts

@@ -0,0 +1,16 @@
+import { Typography } from '..';
+
+/** The maximum authorized heading level. */
+export const MAX_HEADING_LEVEL = 6;
+
+/**
+ * Typography to use by default depending on the heading level.
+ */
+export const DEFAULT_TYPOGRAPHY_BY_LEVEL = {
+    h1: Typography.display1,
+    h2: Typography.headline,
+    h3: Typography.title,
+    h4: Typography.subtitle2,
+    h5: Typography.subtitle1,
+    h6: Typography.body2,
+};

package/src/components/heading/context.tsx

@@ -0,0 +1,13 @@
+import { HeadingElement } from '@lumx/react/utils/type';
+import { createContext } from 'react';
+
+interface HeadingLevelContext {
+    /** The current level */
+    level: number;
+    /** The heading element matching the current level */
+    headingElement: HeadingElement;
+}
+
+const defaultContext: HeadingLevelContext = { level: 1, headingElement: 'h1' };
+
+export const HeadingLevelContext = createContext<HeadingLevelContext>(defaultContext);

package/src/components/heading/index.ts

@@ -0,0 +1,3 @@
+export * from './Heading';
+export * from './HeadingLevelProvider';
+export * from './useHeadingLevel';

package/src/components/heading/useHeadingLevel.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { HeadingLevelContext } from './context';
+
+export const useHeadingLevel = () => {
+    const { level = 1, headingElement = 'h1' } = React.useContext(HeadingLevelContext);
+
+    return { level, headingElement };
+};

package/src/components/icon/Icon.test.tsx

@@ -7,7 +7,7 @@ import { build, fake, oneOf } from 'test-data-bot';
 import { mdiCheck, mdiPlus } from '@lumx/icons';
 import { ColorPalette, ColorVariant, Size } from '@lumx/react';
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 
 import { Icon, IconProps } from './Icon';
 

package/src/components/icon/Icon.tsx

@@ -3,7 +3,8 @@ import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 
 import { Color, ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mdiAlertCircle } from '@lumx/icons';
 
 export type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;

package/src/components/image-block/ImageBlock.tsx

@@ -6,7 +6,8 @@ import isObject from 'lodash/isObject';
 
 import { Alignment, HorizontalAlignment, Size, Theme, Thumbnail } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme, ValueOf } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { ThumbnailProps } from '../thumbnail/Thumbnail';
 
 /**

package/src/components/index.ts

@@ -1,4 +1,4 @@
-import { ValueOf } from '@lumx/react/utils';
+import { ValueOf } from '@lumx/react/utils/type';
 
 /**
  * Alignments.
@@ -11,6 +11,7 @@ export const Alignment = {
     right: 'right',
     spaceAround: 'space-around',
     spaceBetween: 'space-between',
+    spaceEvenly: 'space-evenly',
     start: 'start',
     top: 'top',
 } as const;

package/src/components/input-helper/InputHelper.tsx

@@ -1,5 +1,6 @@
 import { Kind, Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import classNames from 'classnames';
 import React, { forwardRef, ReactNode } from 'react';
 

package/src/components/input-label/InputLabel.tsx

@@ -1,5 +1,6 @@
 import { Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import classNames from 'classnames';
 import React, { forwardRef, ReactNode } from 'react';
 

package/src/components/lightbox/Lightbox.tsx

@@ -6,7 +6,8 @@ import { createPortal } from 'react-dom';
 import { mdiClose } from '@lumx/icons';
 import { ColorPalette, Emphasis, IconButton, IconButtonProps } from '@lumx/react';
 import { DOCUMENT } from '@lumx/react/constants';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 import { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';

package/src/components/link/Link.tsx

@@ -5,7 +5,8 @@ import isEmpty from 'lodash/isEmpty';
 import classNames from 'classnames';
 
 import { Color, ColorVariant, Icon, Size, Typography } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { renderLink } from '@lumx/react/utils/renderLink';
 
 type HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;

package/src/components/link-preview/LinkPreview.test.tsx

@@ -4,7 +4,7 @@ import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';
 
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 import { Link, Thumbnail } from '@lumx/react';
 
 import { Size, Theme } from '..';

package/src/components/link-preview/LinkPreview.tsx

@@ -14,7 +14,8 @@ import {
     ThumbnailProps,
 } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HeadingElement, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HeadingElement, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/list/List.tsx

@@ -1,7 +1,8 @@
 import { Size } from '@lumx/react';
 
 import { useKeyboardListNavigation } from '@lumx/react/hooks/useKeyboardListNavigation';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
 import classNames from 'classnames';

package/src/components/list/ListDivider.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/list/ListItem.tsx

@@ -4,14 +4,9 @@ import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 
 import { ListProps, Size } from '@lumx/react';
-import {
-    Comp,
-    GenericProps,
-    getRootClassName,
-    handleBasicClasses,
-    onEnterPressed,
-    onButtonPressed,
-} from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { onEnterPressed, onButtonPressed } from '@lumx/react/utils/event';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { renderLink } from '@lumx/react/utils/renderLink';
 
 export type ListItemSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;

package/src/components/list/ListSubheader.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/list/useInteractiveList.tsx

@@ -1,7 +1,7 @@
 import { ListItemProps } from '@lumx/react';
 import { isClickable } from '@lumx/react/components/list/ListItem';
 
-import { isComponent } from '@lumx/react/utils';
+import { isComponent } from '@lumx/react/utils/type';
 import { flattenChildren } from '@lumx/react/utils/flattenChildren';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import get from 'lodash/get';

package/src/components/message/Message.test.tsx

@@ -1,6 +1,6 @@
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
 import { Kind } from '@lumx/react';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';
 import React, { ReactElement } from 'react';

package/src/components/message/Message.tsx

@@ -1,6 +1,7 @@
 import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons';
 import { ColorPalette, Icon, Kind, Size } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import classNames from 'classnames';
 import React, { forwardRef, ReactNode } from 'react';
 

package/src/components/mosaic/Mosaic.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef, MouseEventHandler, useMemo } from 'react';
 
 import { Alignment, AspectRatio, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import classNames from 'classnames';
 import take from 'lodash/take';
 

package/src/components/notification/Notification.tsx

@@ -9,7 +9,8 @@ import { Button, Emphasis, Icon, Kind, Size, Theme } from '@lumx/react';
 
 import { DOCUMENT, NOTIFICATION_TRANSITION_DURATION } from '@lumx/react/constants';
 import { NOTIFICATION_CONFIGURATION } from '@lumx/react/components/notification/constants';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';
 

package/src/components/popover/Popover.tsx

@@ -10,7 +10,8 @@ import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
 import { useFocus } from '@lumx/react/hooks/useFocus';
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, ValueOf } from '@lumx/react/utils';
+import { Comp, GenericProps, ValueOf } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';
 import { getFirstAndLastFocusable } from '@lumx/react/utils/focus/getFirstAndLastFocusable';

package/src/components/post-block/PostBlock.tsx

@@ -6,7 +6,8 @@ import isObject from 'lodash/isObject';
 
 import { Orientation, Theme, Thumbnail, ThumbnailProps, ThumbnailVariant } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/progress/Progress.tsx

@@ -4,7 +4,8 @@ import classNames from 'classnames';
 
 import { Theme } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme, ValueOf } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Progress variants.

package/src/components/progress-tracker/ProgressTracker.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useRovingTabIndex } from '../../hooks/useRovingTabIndex';
 import { useTabProviderContextState } from '../tabs/state';

package/src/components/progress-tracker/ProgressTrackerStep.test.tsx

@@ -1,5 +1,5 @@
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 
 import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';

package/src/components/progress-tracker/ProgressTrackerStep.tsx

@@ -4,7 +4,8 @@ import classNames from 'classnames';
 
 import { Icon, InputHelper, InputLabel, Kind, Size } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { mdiAlertCircle, mdiCheckCircle, mdiRadioboxBlank, mdiRadioboxMarked } from '@lumx/icons';
 import { useTabProviderContext } from '../tabs/state';

package/src/components/progress-tracker/ProgressTrackerStepPanel.tsx

@@ -1,6 +1,7 @@
 import { useTabProviderContext } from '@lumx/react/components/tabs/state';
 import { CSS_PREFIX } from '@lumx/react/constants';
-import { Comp, GenericProps, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 
 import classNames from 'classnames';
 import React, { forwardRef } from 'react';

package/src/components/radio-button/RadioButton.test.tsx

@@ -4,7 +4,7 @@ import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';
 
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 
 import { Theme } from '@lumx/react';
 import { RadioButton, RadioButtonProps } from './RadioButton';

package/src/components/radio-button/RadioButton.tsx

@@ -5,7 +5,8 @@ import { uid } from 'uid';
 
 import { InputHelper, InputLabel, Theme } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/radio-button/RadioGroup.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/select/Select.test.tsx

@@ -8,7 +8,7 @@ import { Chip } from '@lumx/react/components/chip/Chip';
 import { Icon } from '@lumx/react/components/icon/Icon';
 
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 
 import { mdiCloseCircle, mdiMenuDown } from '@lumx/icons';
 import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';

package/src/components/select/Select.tsx

@@ -11,7 +11,8 @@ import { Chip } from '@lumx/react/components/chip/Chip';
 import { Icon } from '@lumx/react/components/icon/Icon';
 import { InputLabel } from '@lumx/react/components/input-label/InputLabel';
 
-import { Comp, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { WithSelectContext } from './WithSelectContext';
 import { CoreSelectProps, SelectVariant } from './constants';

package/src/components/select/SelectMultiple.test.tsx

@@ -10,7 +10,7 @@ import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';
 import { Icon } from '@lumx/react/components/icon/Icon';
 
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 import { SelectMultiple, SelectMultipleProps } from './SelectMultiple';
 import { DEFAULT_PROPS } from './WithSelectContext';
 import { SelectVariant } from './constants';

package/src/components/select/SelectMultiple.tsx

@@ -9,7 +9,8 @@ import { Chip } from '@lumx/react/components/chip/Chip';
 import { Icon } from '@lumx/react/components/icon/Icon';
 import { InputLabel } from '@lumx/react/components/input-label/InputLabel';
 
-import { Comp, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { WithSelectContext } from './WithSelectContext';
 import { CoreSelectProps, SelectVariant } from './constants';

package/src/components/select/WithSelectContext.tsx

@@ -8,7 +8,7 @@ import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';
 import { InputHelper } from '@lumx/react/components/input-helper/InputHelper';
 import { Placement } from '@lumx/react/components/popover/Popover';
 
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useListenFocus } from '@lumx/react/hooks/useListenFocus';
 import { CoreSelectProps, SelectVariant } from './constants';

package/src/components/select/constants.ts

@@ -1,5 +1,5 @@
 import { IconButtonProps } from '@lumx/react';
-import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils';
+import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
 import { ReactNode, SyntheticEvent } from 'react';
 
 /**

package/src/components/side-navigation/SideNavigation.tsx

@@ -4,7 +4,8 @@ import classNames from 'classnames';
 
 import { SideNavigationItem, Theme } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme, isComponent } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/side-navigation/SideNavigationItem.test.tsx

@@ -5,7 +5,7 @@ import 'jest-enzyme';
 import without from 'lodash/without';
 
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 
 import { mdiAccount } from '@lumx/icons';