@lumx/react 3.10.1-alpha.7 → 3.10.1-alpha.8

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

@@ -6,6 +6,7 @@ import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
 import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
 import { toFlattenProps } from '@lumx/react/stories/utils/toFlattenProps';
 import { withCategory } from '@lumx/react/stories/utils/withCategory';
+import get from 'lodash/get';
 import times from 'lodash/times';
 import React, { useState } from 'react';
 
@@ -17,9 +18,9 @@ export default {
 
 /** Default tab behavior with some controllable args */
 export const Default = {
-    render: ({ theme, tabProviderProps, tabListProps, tabProps }: any) => (
+    render: ({ tabProviderProps, tabListProps, tabProps }: any) => (
         <TabProvider {...tabProviderProps}>
-            <TabList theme={theme} aria-label="Tab list" {...tabListProps}>
+            <TabList aria-label="Tab list" {...tabListProps}>
                 <Tab {...tabProps[0]} />
                 <Tab {...tabProps[1]} />
                 <Tab {...tabProps[2]} />
@@ -60,15 +61,15 @@ export const Default = {
 
 /* Control active tab externally (with activate tab on focus). */
 export const Controlled = {
-    render({ theme }: any) {
+    render() {
         const [activeTab, setActiveTab] = useState(1);
-        const changeActiveTabIndex = (evt: any) => setActiveTab(parseInt(evt.target.value || 0, 10));
+        const changeActiveTabIndex = (evt: any) => setActiveTab(parseInt(get(evt, 'target.value', '0'), 10));
 
         const [isLazy, setIsLazy] = useState(true);
-        const changeIsLazy = (evt: any) => setIsLazy(evt.target.checked);
+        const changeIsLazy = (evt: any) => setIsLazy(get(evt, 'target.checked'));
 
         const [shouldActivateOnFocus, setShouldActivateOnFocus] = useState(true);
-        const changeShouldActivateOnFocus = (evt: any) => setShouldActivateOnFocus(evt.target.checked);
+        const changeShouldActivateOnFocus = (evt: any) => setShouldActivateOnFocus(get(evt, 'target.checked'));
 
         return (
             <>
@@ -92,7 +93,7 @@ export const Controlled = {
                     isLazy={isLazy}
                     shouldActivateOnFocus={shouldActivateOnFocus}
                 >
-                    <TabList theme={theme} aria-label="Tab list">
+                    <TabList aria-label="Tab list">
                         <Tab label="Tab a" />
                         <Tab label="Tab b" />
                         <Tab label="Tab c" />
@@ -110,7 +111,7 @@ export const Controlled = {
 
 /* Display tabs far from their tab panels. */
 export const SplitTabListAndTabPanels = {
-    render({ theme }: any) {
+    render() {
         const [isOpen, setOpen] = useState(true);
         const [activeTabIndex, onChange] = useState(1);
 
@@ -130,7 +131,7 @@ export const SplitTabListAndTabPanels = {
                     <TabPanel className="lumx-spacing-padding-huge">Tab 3 content</TabPanel>
 
                     <footer>
-                        <TabList theme={theme} aria-label="Tab list">
+                        <TabList aria-label="Tab list">
                             <Tab label="Tab 1" />
                             <Tab label="Tab 2" />
                             <Tab label="Tab 3" />
@@ -145,10 +146,10 @@ export const SplitTabListAndTabPanels = {
 
 /* Dynamically generate tabs. */
 export const DynamicTabs = {
-    render({ theme, tabCount }: any) {
+    render({ tabCount }: any) {
         return (
             <TabProvider>
-                <TabList theme={theme} aria-label="Tab list">
+                <TabList aria-label="Tab list">
                     {times(tabCount, (tabNumber) => (
                         <Tab key={tabNumber} label={`Tab ${tabNumber}`} />
                     ))}

package/src/components/text/Text.tsx

@@ -3,10 +3,15 @@ import React, { Children, Fragment } from 'react';
 import classNames from 'classnames';
 
 import { Icon, ColorPalette, ColorVariant, Typography, WhiteSpace } from '@lumx/react';
-import { type GenericProps, type TextElement, isComponentType, type ComponentClassName } from '@lumx/react/utils/type';
-import { getFontColorClassName, handleBasicClasses, getTypographyClassName } from '@lumx/react/utils/className';
+import { GenericProps, TextElement, isComponent } from '@lumx/react/utils/type';
+import {
+    getFontColorClassName,
+    getRootClassName,
+    handleBasicClasses,
+    getTypographyClassName,
+} from '@lumx/react/utils/className';
 import { useOverflowTooltipLabel } from '@lumx/react/hooks/useOverflowTooltipLabel';
-import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
@@ -46,6 +51,10 @@ export interface TextProps extends GenericProps {
      * Ignored when `truncate` is set to true or lines: 1
      * */
     whiteSpace?: WhiteSpace;
+    /**
+     * Children
+     */
+    children?: React.ReactNode;
 }
 
 /**
@@ -56,7 +65,7 @@ const COMPONENT_NAME = 'Text';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-text';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.
@@ -126,7 +135,7 @@ export const Text = forwardRef<TextProps>((props, ref) => {
             {children &&
                 Children.toArray(children).map((child, index) => {
                     // Force wrap spaces around icons to make sure they are never stuck against text.
-                    if (isComponentType(Icon)(child)) {
+                    if (isComponent(Icon)(child)) {
                         return <Fragment key={child.key || index}> {child} </Fragment>;
                     }
                     return child;

package/src/components/text-field/TextField.test.tsx

@@ -12,10 +12,10 @@ import {
     queryByClassName,
     queryByTagName,
 } from '@lumx/react/testing/utils/queries';
+import partition from 'lodash/partition';
 import userEvent from '@testing-library/user-event';
 
 import { isFocusVisible } from '@lumx/react/utils/browser/isFocusVisible';
-import { partitionMulti } from '@lumx/react/utils/collection/partitionMulti';
 import { TextField, TextFieldProps } from './TextField';
 
 const CLASSNAME = TextField.className as string;
@@ -34,7 +34,7 @@ const setup = (propsOverride: Partial<TextFieldProps> = {}, { wrapper }: SetupRe
         | HTMLTextAreaElement
         | HTMLInputElement;
     const helpers = queryAllByClassName(container, 'lumx-text-field__helper');
-    const [[helper], [error]] = partitionMulti(helpers, [(h) => !h.className.includes('lumx-input-helper--color-red')]);
+    const [[helper], [error]] = partition(helpers, (h) => !h.className.includes('lumx-input-helper--color-red'));
     const clearButton = queryByClassName(container, 'lumx-text-field__input-clear');
 
     return {

package/src/components/text-field/TextField.tsx

@@ -1,6 +1,7 @@
 import React, { ReactNode, Ref, RefObject, SyntheticEvent, useEffect, useRef, useState } from 'react';
 
 import classNames from 'classnames';
+import get from 'lodash/get';
 
 import { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle } from '@lumx/icons';
 import {
@@ -15,9 +16,9 @@ import {
     Size,
     Theme,
 } from '@lumx/react';
-import type { GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
-import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { useId } from '@lumx/react/hooks/useId';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
@@ -27,7 +28,7 @@ import { forwardRef } from '@lumx/react/utils/react/forwardRef';
  */
 export interface TextFieldProps extends GenericProps, HasTheme {
     /** Chip Group to be rendered before the main text input. */
-    chips?: HTMLElement | ReactNode;
+    chips?: ReactNode;
     /** Props to pass to the clear button (minus those already set by the TextField props). If not specified, the button won't be displayed. */
     clearButtonProps?: Pick<IconButtonProps, 'label'> &
         Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
@@ -91,7 +92,7 @@ const COMPONENT_NAME = 'TextField';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-text-field';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Default minimum number of rows in the multiline mode.
@@ -216,8 +217,8 @@ const renderInputNative: React.FC<InputNativeProps> = (props) => {
         setFocus(false);
     };
 
-    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        onChange(event.target.value, name, event);
+    const handleChange = (event: React.ChangeEvent) => {
+        onChange(get(event, 'target.value'), name, event);
     };
 
     const Component = multiline ? 'textarea' : 'input';

package/src/components/thumbnail/Thumbnail.tsx

@@ -12,10 +12,10 @@ import React, {
 import classNames from 'classnames';
 
 import { AspectRatio, HorizontalAlignment, Icon, Size, Theme, ThumbnailObjectFit } from '@lumx/react';
-import type { Falsy, GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { Falsy, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mdiImageBroken } from '@lumx/icons';
-import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { useImageLoad } from '@lumx/react/components/thumbnail/useImageLoad';
 import { useFocusPointStyle } from '@lumx/react/components/thumbnail/useFocusPointStyle';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
@@ -81,7 +81,7 @@ const COMPONENT_NAME = 'Thumbnail';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-thumbnail';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.

package/src/components/toolbar/Toolbar.tsx

@@ -2,8 +2,8 @@ import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { GenericProps, ComponentClassName } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
@@ -26,7 +26,7 @@ const COMPONENT_NAME = 'Toolbar';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-toolbar';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.

package/src/components/tooltip/Tooltip.tsx

@@ -5,9 +5,9 @@ import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 
 import { DOCUMENT, VISUALLY_HIDDEN } from '@lumx/react/constants';
-import type { GenericProps, HasCloseMode, ComponentClassName } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
-import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
+import { GenericProps, HasCloseMode } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { Placement } from '@lumx/react/components/popover';
 import { TooltipContextProvider } from '@lumx/react/components/tooltip/context';
 import { useId } from '@lumx/react/hooks/useId';
@@ -47,7 +47,7 @@ const COMPONENT_NAME = 'Tooltip';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-tooltip';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.

package/src/components/tooltip/context.tsx

@@ -10,7 +10,7 @@ const DEFAULT_VALUE = {};
  */
 const TooltipContext = React.createContext<TooltipContextValue | undefined>(undefined);
 
-export const TooltipContextProvider: React.FC = ({ children }) => (
+export const TooltipContextProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
     <TooltipContext.Provider value={DEFAULT_VALUE}>{children}</TooltipContext.Provider>
 );
 

package/src/components/tooltip/useInjectTooltipRef.tsx

@@ -1,6 +1,6 @@
 import React, { cloneElement, ReactNode, useMemo } from 'react';
 
-import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
 
 interface Options {
     /** Original tooltip anchor */

package/src/components/uploader/Uploader.tsx

@@ -3,8 +3,8 @@ import React, { MouseEventHandler } from 'react';
 import classNames from 'classnames';
 
 import { AspectRatio, Icon, Size, Theme } from '@lumx/react';
-import type { GenericProps, HasTheme, ValueOf, ComponentClassName } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import { useId } from '@lumx/react/hooks/useId';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
@@ -60,7 +60,7 @@ const COMPONENT_NAME = 'Uploader';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-uploader';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.

package/src/components/user-block/UserBlock.tsx

@@ -1,9 +1,12 @@
 import React, { ReactNode } from 'react';
+
 import classNames from 'classnames';
+import isEmpty from 'lodash/isEmpty';
+import set from 'lodash/set';
 
 import { Avatar, ColorPalette, Link, Orientation, Size, Theme } from '@lumx/react';
-import type { GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
@@ -54,7 +57,7 @@ const COMPONENT_NAME = 'UserBlock';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-user-block';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.
@@ -104,7 +107,7 @@ export const UserBlock = forwardRef<UserBlockProps, HTMLDivElement>((props, ref)
     const isClickable = !!onClick || isLink;
 
     const nameBlock: ReactNode = React.useMemo(() => {
-        if (!name) {
+        if (isEmpty(name)) {
             return null;
         }
         let NameComponent: any = 'span';
@@ -121,8 +124,12 @@ export const UserBlock = forwardRef<UserBlockProps, HTMLDivElement>((props, ref)
                 color: ColorPalette.dark,
             });
         }
+        // Disable avatar focus since the name block is the same link / same button.
+        if (avatarProps) {
+            set(avatarProps, ['thumbnailProps', 'tabIndex'], -1);
+        }
         return <NameComponent {...nProps}>{name}</NameComponent>;
-    }, [isClickable, linkAs, linkProps, name, nameProps, onClick]);
+    }, [avatarProps, isClickable, linkAs, linkProps, name, nameProps, onClick]);
 
     const fieldsBlock: ReactNode = fields && componentSize !== Size.s && componentSize !== Size.xs && (
         <div className={`${CLASSNAME}__fields`}>
@@ -155,11 +162,6 @@ export const UserBlock = forwardRef<UserBlockProps, HTMLDivElement>((props, ref)
                     size={componentSize}
                     onClick={onClick}
                     theme={theme}
-                    thumbnailProps={{
-                        ...avatarProps?.thumbnailProps,
-                        // Disable avatar focus since the name block is the same link / same button.
-                        tabIndex: avatarProps ? -1 : undefined,
-                    }}
                 />
             )}
             {(fields || name) && (

package/src/hooks/useCallbackOnEscape.ts

@@ -2,7 +2,7 @@ import { DOCUMENT } from '@lumx/react/constants';
 import { Callback } from '@lumx/react/utils/type';
 import { onEscapePressed } from '@lumx/react/utils/browser/event';
 import { useEffect } from 'react';
-import { Listener, makeListenerTowerContext } from '@lumx/react/utils/makeListenerTowerContext';
+import { Listener, makeListenerTowerContext } from '@lumx/react/utils/function/makeListenerTowerContext';
 
 const LISTENERS = makeListenerTowerContext();
 

package/src/hooks/useClickAway.tsx

@@ -1,7 +1,8 @@
 import { RefObject, useEffect } from 'react';
 
 import { Falsy } from '@lumx/react/utils/type';
-import { isEmpty } from '@lumx/react/utils/collection/isEmpty';
+
+import isEmpty from 'lodash/isEmpty';
 
 const EVENT_TYPES = ['mousedown', 'touchstart'];
 

package/src/hooks/useFocusTrap.ts

@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import { DOCUMENT } from '@lumx/react/constants';
 import { getFirstAndLastFocusable } from '@lumx/react/utils/browser/focus/getFirstAndLastFocusable';
 import { Falsy } from '@lumx/react/utils/type';
-import { Listener, makeListenerTowerContext } from '@lumx/react/utils/makeListenerTowerContext';
+import { Listener, makeListenerTowerContext } from '@lumx/react/utils/function/makeListenerTowerContext';
 
 const FOCUS_TRAPS = makeListenerTowerContext();
 

package/src/hooks/useInterval.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react';
 
+import isFunction from 'lodash/isFunction';
 import { Callback } from '@lumx/react/utils/type';
 
 /**
@@ -20,7 +21,9 @@ export function useInterval(callback: Callback, delay: number | null): void {
         if (delay === null) return undefined;
 
         function tick() {
-            savedCallback.current?.();
+            if (isFunction(savedCallback.current)) {
+                savedCallback.current();
+            }
         }
         const id = setInterval(tick, delay);
         return () => clearInterval(id);

package/src/hooks/useKeyboardListNavigation.tsx

@@ -1,5 +1,7 @@
 import { RefObject, SetStateAction, useEffect, useState } from 'react';
 
+import get from 'lodash/get';
+
 type Listener = (evt: KeyboardEvent) => void;
 
 interface UseKeyboardListNavigationType {
@@ -133,7 +135,7 @@ export const useKeyboardListNavigation: useKeyboardListNavigationType = (
             onListItemSelected(selectedItem);
             resetActiveIndex();
         } else if (activeItemIndex === initialIndex && onEnterPressed) {
-            const value = (evt.target as any)?.value;
+            const value = get(evt, 'target.value');
             onEnterPressed(value);
             resetActiveIndex();
         }
@@ -144,7 +146,7 @@ export const useKeyboardListNavigation: useKeyboardListNavigationType = (
      * @param evt - key pressed event
      */
     const onTabKeyPressed: Listener = (evt) => {
-        const value = (evt.target as any)?.value;
+        const value = get(evt, 'target.value');
 
         if (preventTabOnEnteredValue && value && value.length > 0) {
             preventDefaultAndStopPropagation(evt);

package/src/hooks/useSizeOnWindowResize.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import type { RectSize } from '@lumx/react/utils/type';
+import throttle from 'lodash/throttle';
+import { RectSize } from '@lumx/react/utils/type';
 
 /**
  * Observe element size (only works if it's size depends on the window size).
@@ -12,19 +13,14 @@ import type { RectSize } from '@lumx/react/utils/type';
  */
 export function useSizeOnWindowResize(elementRef: React.RefObject<HTMLElement>): [RectSize | null, () => void] {
     const [size, setSize] = React.useState<null | RectSize>(null);
-    const updateSize = React.useMemo(() => {
-        let prevTimeout: ReturnType<typeof setTimeout> | undefined;
-        function update() {
-            const newSize = elementRef.current?.getBoundingClientRect();
-            if (newSize) setSize(newSize);
-            prevTimeout = undefined;
-        }
-        return () => {
-            if (!prevTimeout) {
-                prevTimeout = setTimeout(update, 10);
-            }
-        };
-    }, [elementRef]);
+    const updateSize = React.useMemo(
+        () =>
+            throttle(() => {
+                const newSize = elementRef.current?.getBoundingClientRect();
+                if (newSize) setSize(newSize);
+            }, 10),
+        [elementRef],
+    );
     React.useEffect(() => {
         updateSize();
         window.addEventListener('resize', updateSize);

package/src/hooks/useStopPropagation.ts

@@ -1,3 +1,4 @@
+import isFunction from 'lodash/isFunction';
 import { MouseEventHandler, useCallback } from 'react';
 
 /**
@@ -9,7 +10,7 @@ import { MouseEventHandler, useCallback } from 'react';
 export function useStopPropagation(handler?: MouseEventHandler): MouseEventHandler {
     return useCallback(
         (evt) => {
-            if (!evt || !handler) {
+            if (!evt || !isFunction(handler)) {
                 return;
             }
             handler(evt);

package/src/stories/decorators/withCombinations.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name,jsx-a11y/control-has-associated-label,prefer-object-spread */
 import React from 'react';
-import { isEmpty } from '@lumx/react/utils/collection/isEmpty';
+import isEmpty from 'lodash/isEmpty';
 import { Heading, HeadingLevelProvider } from '@lumx/react';
 
 type PropEntry = [key: string, value: unknown];

package/src/testing/utils/commonTestsSuiteRTL.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
+import isEmpty from 'lodash/isEmpty';
 
 import { GenericProps } from '@lumx/react/utils/type';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
+import React from 'react';
 import { Theme } from '@lumx/react';
 import { RenderOptions } from '@testing-library/react';
 import { ThemeProvider } from '@lumx/react/utils/theme/ThemeContext';
 import castArray from 'lodash/castArray';
 import { invertTheme } from '@lumx/react/utils/theme/invertTheme';
-import { isEmpty } from '@lumx/react/utils/collection/isEmpty';
 
 interface CommonSetup {
     props: GenericProps;

package/src/utils/ClickAwayProvider/ClickAwayProvider.tsx

@@ -13,6 +13,10 @@ interface ClickAwayProviderProps extends ClickAwayParameters {
      * (Optional) Element that should be considered as part of the parent
      */
     parentRef?: RefObject<HTMLElement>;
+    /**
+     * Children
+     */
+    children?: React.ReactNode;
 }
 
 /**

package/src/utils/className/getRootClassName.test.ts

@@ -0,0 +1,11 @@
+import { getRootClassName } from '@lumx/react/utils/className/getRootClassName';
+
+describe(getRootClassName, () => {
+    it('should transform the component name into a lumx class', () => {
+        expect(getRootClassName('Table')).toBe('lumx-table');
+    });
+
+    it('should transform the sub component name into a lumx class', () => {
+        expect(getRootClassName('TableBody', true)).toBe('lumx-table__body');
+    });
+});

package/src/utils/className/getRootClassName.ts

@@ -0,0 +1,24 @@
+import { CSS_PREFIX } from '@lumx/core/js/constants';
+import kebabCase from 'lodash/kebabCase';
+
+// See https://regex101.com/r/YjS1uI/3
+const LAST_PART_CLASSNAME = /^(.*)-(.+)$/gi;
+
+/**
+ * Get the name of the root CSS class of a component based on its name.
+ *
+ * @param  componentName The name of the component. This name should contains the component prefix and be
+ *                       written in PascalCase.
+ * @param  subComponent Whether the current component is a sub component, if true, define the class according
+ *                      to BEM standards.
+ * @return The name of the root CSS class. This classname include the CSS classname prefix and is written in
+ *         lower-snake-case.
+ */
+export function getRootClassName(componentName: string, subComponent?: boolean): string {
+    const formattedClassName = `${CSS_PREFIX}-${kebabCase(componentName)}`;
+
+    if (subComponent) {
+        return formattedClassName.replace(LAST_PART_CLASSNAME, '$1__$2');
+    }
+    return formattedClassName;
+}

package/src/utils/className/index.ts

@@ -1,3 +1,4 @@
 export { getBasicClass, handleBasicClasses } from '@lumx/core/js/utils';
+export { getRootClassName } from './getRootClassName';
 export { getTypographyClassName } from './getTypographyClassName';
 export { getFontColorClassName } from './getFontColorClassName';

package/src/utils/date/getMonthCalendar.ts

@@ -1,6 +1,7 @@
+import last from 'lodash/last';
+
 import { getWeekDays, WeekDayInfo } from '@lumx/react/utils/date/getWeekDays';
 import { Locale } from '@lumx/react/utils/locale/types';
-import { last } from '@lumx/react/utils/collection/last';
 
 type AnnotatedDay = { date: Date; isOutOfRange?: boolean };
 type AnnotatedWeek = Partial<Record<number, AnnotatedDay>>;
@@ -28,7 +29,7 @@ export const getMonthCalendar = (
     iterDate.setDate(1);
 
     const weekDays = getWeekDays(locale);
-    const lastDayOfWeek = last(weekDays);
+    const lastDayOfWeek = last(weekDays) as WeekDayInfo;
 
     const weeks: Array<AnnotatedWeek> = [];
     let week: AnnotatedWeek = {};
@@ -46,7 +47,7 @@ export const getMonthCalendar = (
             week[weekDayNumber] = day;
         }
 
-        if (weekDayNumber === lastDayOfWeek?.number) {
+        if (weekDayNumber === lastDayOfWeek.number) {
             weeks.push(week);
             rowCount += 1;
             week = {};

package/src/utils/{makeListenerTowerContext.ts → function/makeListenerTowerContext.ts}

@@ -1,5 +1,5 @@
-import { pull } from '@lumx/react/utils/collection/pull';
-import { last } from '@lumx/react/utils/collection/last';
+import last from 'lodash/last';
+import pull from 'lodash/pull';
 
 export type Listener = { enable(): void; disable(): void };
 

package/src/utils/{collection/partitionMulti.ts → partitionMulti.ts}

@@ -1,4 +1,9 @@
-import type { Predicate } from '../type';
+import concat from 'lodash/concat';
+import dropRight from 'lodash/dropRight';
+import last from 'lodash/last';
+import partition from 'lodash/partition';
+import reduce from 'lodash/reduce';
+import { Predicate } from './type';
 
 /**
  * Similar to lodash `partition` function but working with multiple predicates.
@@ -14,16 +19,10 @@ import type { Predicate } from '../type';
  * @return partitioned elements by the given predicates
  */
 export function partitionMulti<T>(elements: T[], predicates: Array<Predicate<T>>): T[][] {
-    const others = [] as T[];
-    const groups = predicates.map(() => []) as T[][];
-
-    for (const element of elements) {
-        const index = predicates.findIndex((predicate) => predicate(element));
-        if (index !== -1) {
-            groups[index].push(element);
-        } else {
-            others.push(element);
-        }
-    }
-    return [...groups, others];
+    return reduce(
+        predicates,
+        (partitioned: T[][], predicate: Predicate<T>) =>
+            concat(dropRight(partitioned), partition(last(partitioned), predicate)),
+        [elements],
+    );
 }