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

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

@@ -8,6 +8,8 @@ import {
     ProgressTrackerStep,
     ProgressTrackerStepPanel,
 } from '@lumx/react';
+import cloneDeep from 'lodash/cloneDeep';
+import set from 'lodash/set';
 import React, { useState } from 'react';
 
 export default { title: 'LumX components/progress-tracker/Progress Tracker' };
@@ -50,26 +52,24 @@ export const Controlled = () => {
     ]);
 
     const toggleError = (index: number) => () => {
-        const newSteps = [...steps];
-        const step = steps[index];
-        const newStep = { ...step, hasError: !step?.hasError, isComplete: false };
-        newSteps[index] = newStep;
-        setSteps(newSteps);
+        const clonedSteps = cloneDeep(steps);
+        set(clonedSteps, [index, 'hasError'], !steps[index].hasError);
+        set(clonedSteps, [index, 'isComplete'], false);
+        setSteps(clonedSteps);
     };
 
     const previous = (index: number) => () => setActiveStep(index - 1);
 
     const next = (index: number) => () => {
         const isLast = index === steps.length - 1;
-        const step = steps[index];
-        const newSteps = [...steps];
-        const newStep = { ...step, hasError: false, isComplete: true };
+        const clonedSteps = cloneDeep(steps);
+        set(clonedSteps, [index, 'isComplete'], true);
+        set(clonedSteps, [index, 'hasError'], false);
         if (!isLast) {
-            newSteps[index + 1].isDisabled = false;
+            set(clonedSteps, [index + 1, 'isDisabled'], false);
             setActiveStep(index + 1);
         }
-        newSteps[index] = newStep;
-        setSteps(newSteps);
+        setSteps(clonedSteps);
     };
 
     return (

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

@@ -2,8 +2,9 @@ import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import type { GenericProps, ComponentClassName } from '@lumx/react/utils/type';
-import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName } from '@lumx/react/utils/className';
+import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useRovingTabIndex } from '../../hooks/useRovingTabIndex';
@@ -27,7 +28,7 @@ const COMPONENT_NAME = 'ProgressTracker';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-progress-tracker';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.

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

@@ -4,8 +4,8 @@ import classNames from 'classnames';
 
 import { mdiAlertCircle, mdiCheckCircle, mdiRadioboxBlank, mdiRadioboxMarked } from '@lumx/icons';
 import { Icon, InputHelper, InputLabel, Kind, Size } from '@lumx/react';
-import type { 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';
 
 import { useTabProviderContext } from '../tabs/state';
@@ -40,7 +40,7 @@ const COMPONENT_NAME = 'ProgressTrackerStep';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-progress-tracker-step';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.

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

@@ -16,6 +16,8 @@ export interface ProgressTrackerStepPanelProps extends GenericProps {
     id?: string;
     /** Whether the step is active or not. */
     isActive?: boolean;
+    /** Children */
+    children?: React.ReactNode;
 }
 
 /**

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

@@ -3,8 +3,8 @@ import React, { ReactNode, SyntheticEvent, InputHTMLAttributes } from 'react';
 import classNames from 'classnames';
 
 import { InputHelper, InputLabel, 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 { useId } from '@lumx/react/hooks/useId';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
@@ -43,7 +43,7 @@ const COMPONENT_NAME = 'RadioButton';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-radio-button';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.

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

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 
 export default { title: 'LumX components/radio-button/Radio Group' };
 
-export const Simple = ({ theme }: any) => {
+export const Simple = () => {
     const [value, onChange] = useState('lorem');
 
     return (
@@ -13,7 +13,6 @@ export const Simple = ({ theme }: any) => {
                 helper="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur."
                 label="Radio button with help 1"
                 name="test2"
-                theme={theme}
                 value="lorem"
                 onChange={onChange as any}
             />
@@ -23,7 +22,6 @@ export const Simple = ({ theme }: any) => {
                 helper="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur."
                 label="Radio button with help 2"
                 name="test2"
-                theme={theme}
                 value="ipsum"
                 onChange={onChange as any}
             />
@@ -33,7 +31,6 @@ export const Simple = ({ theme }: any) => {
                 helper="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur."
                 label="Radio button with help 3"
                 name="test2"
-                theme={theme}
                 value="dolor"
                 onChange={onChange as any}
             />

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

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

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

@@ -1,6 +1,7 @@
 import { mdiBullhornOutline } from '@lumx/icons';
 import { List, ListItem, Select, Size, TextField } from '@lumx/react';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
+import noop from 'lodash/noop';
 import range from 'lodash/range';
 import React, { SyntheticEvent, useState } from 'react';
 import { SelectVariant } from './constants';
@@ -8,15 +9,11 @@ import { SelectVariant } from './constants';
 export default {
     title: 'LumX components/select/Select',
     component: Select,
-    argTypes: {
-        onInputClick: { action: true },
-        onDropdownClose: { action: true },
-    },
 };
 
 const CHOICES = ['First item', 'Second item', 'Third item'];
 
-export const SimpleSelect = ({ theme }: any) => {
+export const SimpleSelect = () => {
     const PLACEHOLDER = 'Select a value';
     const LABEL = 'Select label';
 
@@ -35,7 +32,6 @@ export const SimpleSelect = ({ theme }: any) => {
             value={value}
             label={LABEL}
             placeholder={PLACEHOLDER}
-            theme={theme}
             onInputClick={toggleSelect}
             onDropdownClose={closeSelect}
             icon={mdiBullhornOutline}
@@ -62,7 +58,7 @@ export const SimpleSelect = ({ theme }: any) => {
     );
 };
 
-export const SimpleSelectWithInfiniteScroll = ({ theme }: any) => {
+export const SimpleSelectWithInfiniteScroll = () => {
     const PLACEHOLDER = 'Select a value';
     const LABEL = 'Select label';
     const [items, setItems] = useState(CHOICES);
@@ -85,7 +81,6 @@ export const SimpleSelectWithInfiniteScroll = ({ theme }: any) => {
             value={value}
             label={LABEL}
             placeholder={PLACEHOLDER}
-            theme={theme}
             onInputClick={toggleSelect}
             onDropdownClose={closeSelect}
             onInfiniteScroll={onInfinite}
@@ -112,19 +107,18 @@ export const SimpleSelectWithInfiniteScroll = ({ theme }: any) => {
     );
 };
 
-export const DisabledSelect = ({ theme, onInputClick, onDropdownClose }: any) => {
+export const DisabledSelect = () => {
     return (
         <Select
             isOpen={false}
             value=""
             label="My select"
             placeholder="Placeholder"
-            theme={theme}
-            onInputClick={onInputClick}
-            onDropdownClose={onDropdownClose}
+            onInputClick={noop}
+            onDropdownClose={noop}
             isDisabled
         >
-            <List theme={theme} isClickable>
+            <List isClickable>
                 <ListItem key={0} size={Size.tiny}>
                     No data
                 </ListItem>
@@ -133,7 +127,7 @@ export const DisabledSelect = ({ theme, onInputClick, onDropdownClose }: any) =>
     );
 };
 
-export const SelectWithClearButton = ({ theme }: any) => {
+export const SelectWithClearButton = () => {
     const PLACEHOLDER = 'Select a value';
     const LABEL = 'Select label';
 
@@ -159,7 +153,6 @@ export const SelectWithClearButton = ({ theme }: any) => {
             clearButtonProps={{ label: 'Clear' }}
             label={LABEL}
             placeholder={PLACEHOLDER}
-            theme={theme}
             onInputClick={toggleSelect}
             onDropdownClose={closeSelect}
         >
@@ -185,7 +178,7 @@ export const SelectWithClearButton = ({ theme }: any) => {
     );
 };
 
-export const SelectWithAnotherField = ({ theme }: any) => {
+export const SelectWithAnotherField = () => {
     const PLACEHOLDER = 'Select a value';
     const LABEL = 'Select label';
 
@@ -209,13 +202,7 @@ export const SelectWithAnotherField = ({ theme }: any) => {
 
     return (
         <>
-            <TextField
-                value="myvalue"
-                label="I am the label"
-                placeholder="ex: A value"
-                theme={theme}
-                onChange={() => {}}
-            />
+            <TextField value="myvalue" label="I am the label" placeholder="ex: A value" onChange={noop} />
             <Select
                 style={{ width: '100%' }}
                 isOpen={isOpen}
@@ -224,7 +211,6 @@ export const SelectWithAnotherField = ({ theme }: any) => {
                 clearButtonProps={{ label: 'Clear' }}
                 label={LABEL}
                 placeholder={PLACEHOLDER}
-                theme={theme}
                 onInputClick={toggleSelect}
                 onDropdownClose={closeSelect}
                 onBlur={onBlur}
@@ -253,7 +239,7 @@ export const SelectWithAnotherField = ({ theme }: any) => {
     );
 };
 
-export const SelectWithNoData = ({ theme }: any) => {
+export const SelectWithNoData = () => {
     const [isOpen, closeSelect, , toggleSelect] = useBooleanState(true);
 
     return (
@@ -262,11 +248,10 @@ export const SelectWithNoData = ({ theme }: any) => {
             value=""
             label="My select"
             placeholder="Placeholder"
-            theme={theme}
             onInputClick={toggleSelect}
             onDropdownClose={closeSelect}
         >
-            <List theme={theme} isClickable>
+            <List isClickable>
                 <ListItem key={0} size={Size.tiny}>
                     No data
                 </ListItem>
@@ -275,7 +260,7 @@ export const SelectWithNoData = ({ theme }: any) => {
     );
 };
 
-export const SelectWithHelper = ({ theme }: any) => {
+export const SelectWithHelper = () => {
     const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
 
     return (
@@ -284,12 +269,11 @@ export const SelectWithHelper = ({ theme }: any) => {
             value=""
             label="Country"
             placeholder="Your country"
-            theme={theme}
             helper="This is used in analytics"
             onInputClick={toggleSelect}
             onDropdownClose={closeSelect}
         >
-            <List theme={theme} isClickable>
+            <List isClickable>
                 {CHOICES.map((choice) => (
                     <ListItem key={choice} size={Size.tiny}>
                         {choice}
@@ -300,7 +284,7 @@ export const SelectWithHelper = ({ theme }: any) => {
     );
 };
 
-export const SelectWithError = ({ theme }: any) => {
+export const SelectWithError = () => {
     const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
 
     return (
@@ -309,14 +293,13 @@ export const SelectWithError = ({ theme }: any) => {
             value=""
             label="Country"
             placeholder="Your country"
-            theme={theme}
             helper="This is used in analytics"
             onInputClick={toggleSelect}
             onDropdownClose={closeSelect}
             hasError
             error="Please select something :)"
         >
-            <List theme={theme} isClickable>
+            <List isClickable>
                 {CHOICES.map((choice) => (
                     <ListItem key={choice} size={Size.tiny}>
                         {choice}
@@ -327,7 +310,7 @@ export const SelectWithError = ({ theme }: any) => {
     );
 };
 
-export const SelectSuccess = ({ theme }: any) => {
+export const SelectSuccess = () => {
     const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
 
     return (
@@ -336,13 +319,12 @@ export const SelectSuccess = ({ theme }: any) => {
             value=""
             label="Country"
             placeholder="Your country"
-            theme={theme}
             helper="This is used in analytics"
             onInputClick={toggleSelect}
             onDropdownClose={closeSelect}
             isValid
         >
-            <List theme={theme} isClickable>
+            <List isClickable>
                 {CHOICES.map((choice) => (
                     <ListItem key={choice} size={Size.tiny}>
                         {choice}
@@ -353,7 +335,7 @@ export const SelectSuccess = ({ theme }: any) => {
     );
 };
 
-export const SelectWithChipVariant = ({ theme }: any) => {
+export const SelectWithChipVariant = () => {
     const PLACEHOLDER = 'Select a value';
     const LABEL = 'Select label';
 
@@ -374,7 +356,6 @@ export const SelectWithChipVariant = ({ theme }: any) => {
             value={value}
             label={LABEL}
             placeholder={PLACEHOLDER}
-            theme={theme}
             onInputClick={toggleSelect}
             onDropdownClose={closeSelect}
             variant={SelectVariant.chip}

package/src/components/select/Select.tsx

@@ -1,6 +1,7 @@
 import React, { RefObject } from 'react';
 
 import classNames from 'classnames';
+import lodashIsEmpty from 'lodash/isEmpty';
 
 import { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle, mdiMenuDown } from '@lumx/icons';
 import { Emphasis, Size, Theme } from '@lumx/react/components';
@@ -8,10 +9,9 @@ import { IconButton } from '@lumx/react/components/button/IconButton';
 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 { handleBasicClasses } from '@lumx/react/utils/className';
-import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import type { ComponentClassName } from '@lumx/react/utils/type';
 
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { WithSelectContext } from './WithSelectContext';
@@ -29,7 +29,7 @@ export { SelectVariant };
 const COMPONENT_NAME = 'Select';
 
 /** The default class name and classes prefix for this component. */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-select';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /** The default value of props. */
 const DEFAULT_PROPS: Partial<SelectProps> = {
@@ -170,7 +170,7 @@ const SelectField: React.FC<SelectProps> = (props) => {
  * @return React element.
  */
 export const Select = forwardRef<SelectProps, HTMLDivElement>((props, ref) => {
-    const isEmpty = !props.value;
+    const isEmpty = lodashIsEmpty(props.value);
     const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty;
 
     return WithSelectContext(

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

@@ -13,19 +13,17 @@ import {
     Toolbar,
 } from '@lumx/react';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
+import noop from 'lodash/noop';
 import React, { MouseEventHandler, SyntheticEvent, useRef, useState } from 'react';
 import { SelectVariant } from './constants';
 
-export default {
-    title: 'LumX components/select/Select Multiple',
-    argTypes: { onClear: { action: true }, onInputClick: { action: true }, onDropdownClose: { action: true } },
-};
+export default { title: 'LumX components/select/Select Multiple' };
 
 const PLACEHOLDER = 'Select values';
 const LABEL = 'Select label';
 const CHOICES = ['First item', 'Second item', 'Third item'];
 
-export const DefaultSelectMultiple = ({ theme }: any) => {
+export const DefaultSelectMultiple = () => {
     const [values, setValues] = useState<string[]>([]);
     const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
 
@@ -51,7 +49,6 @@ export const DefaultSelectMultiple = ({ theme }: any) => {
             clearButtonProps={{ label: 'Clear' }}
             label={LABEL}
             placeholder={PLACEHOLDER}
-            theme={theme}
             onInputClick={toggleSelect}
             onDropdownClose={closeSelect}
             icon={mdiTram}
@@ -78,18 +75,17 @@ export const DefaultSelectMultiple = ({ theme }: any) => {
     );
 };
 
-export const SelectMultipleWithNoData = ({ theme, onClear, onInputClick, onDropdownClose }: any) => {
+export const SelectMultipleWithNoData = () => {
     return (
         <SelectMultiple
             isOpen
             value={[]}
-            onClear={onClear}
+            onClear={noop}
             clearButtonProps={{ label: 'Clear' }}
             label="Select label"
             placeholder="Select values"
-            theme={theme}
-            onInputClick={onInputClick}
-            onDropdownClose={onDropdownClose}
+            onInputClick={noop}
+            onDropdownClose={noop}
         >
             <List isClickable>
                 <ListItem key={0} size={Size.tiny}>
@@ -100,24 +96,23 @@ export const SelectMultipleWithNoData = ({ theme, onClear, onInputClick, onDropd
     );
 };
 
-export const DisabledSelectMultiple = ({ theme, onClear, onInputClick, onDropdownClose }: any) => {
+export const DisabledSelectMultiple = () => {
     return (
         <SelectMultiple
             isOpen
             value={[]}
-            onClear={onClear}
+            onClear={noop}
             clearButtonProps={{ label: 'Clear' }}
             label="Select label"
             placeholder="Select values"
-            theme={theme}
-            onInputClick={onInputClick}
-            onDropdownClose={onDropdownClose}
+            onInputClick={noop}
+            onDropdownClose={noop}
             isDisabled
         />
     );
 };
 
-export const ChipsSelectMultiple = ({ theme }: any) => {
+export const ChipsSelectMultiple = () => {
     const [values, setValues] = useState<string[]>([]);
     const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
 
@@ -144,7 +139,6 @@ export const ChipsSelectMultiple = ({ theme }: any) => {
             clearButtonProps={{ label: 'Clear' }}
             label={LABEL}
             placeholder={PLACEHOLDER}
-            theme={theme}
             onInputClick={toggleSelect}
             onDropdownClose={closeSelect}
         >
@@ -170,7 +164,7 @@ export const ChipsSelectMultiple = ({ theme }: any) => {
     );
 };
 
-export const ChipsCustomSelectMultiple = ({ theme }: any) => {
+export const ChipsCustomSelectMultiple = () => {
     const [values, setValues] = useState<string[]>([]);
     const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
 
@@ -191,14 +185,7 @@ export const ChipsCustomSelectMultiple = ({ theme }: any) => {
     const customSelectChipRenderer = (choice: string, index: number, onClear: any, isDisabled: any) => {
         const onClick: MouseEventHandler = (event) => onClear && onClear(event, choice);
         return (
-            <Chip
-                key={choice}
-                isDisabled={isDisabled}
-                size={Size.s}
-                onAfterClick={onClick}
-                onClick={onClick}
-                theme={theme}
-            >
+            <Chip key={choice} isDisabled={isDisabled} size={Size.s} onAfterClick={onClick} onClick={onClick}>
                 {choice}
             </Chip>
         );
@@ -212,7 +199,6 @@ export const ChipsCustomSelectMultiple = ({ theme }: any) => {
             clearButtonProps={{ label: 'Clear' }}
             label={LABEL}
             placeholder={PLACEHOLDER}
-            theme={theme}
             onInputClick={toggleSelect}
             onDropdownClose={closeSelect}
             selectedChipRender={customSelectChipRenderer}
@@ -242,7 +228,7 @@ export const ChipsCustomSelectMultiple = ({ theme }: any) => {
 /**
  * Test select focus trap (focus is contained inside the dialog then inside the select dropdown)
  */
-export const SelectWithinADialog = ({ theme }: any) => {
+export const SelectWithinADialog = () => {
     const searchFieldRef = useRef(null);
 
     const [searchText, setSearchText] = useState<string>();
@@ -285,7 +271,6 @@ export const SelectWithinADialog = ({ theme }: any) => {
                     clearButtonProps={{ label: 'Clear' }}
                     label={LABEL}
                     placeholder={PLACEHOLDER}
-                    theme={theme}
                     onInputClick={toggleSelect}
                     onDropdownClose={closeSelect}
                     icon={mdiTram}

package/src/components/select/SelectMultiple.tsx

@@ -7,11 +7,10 @@ import { Size, Theme } from '@lumx/react/components';
 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 { handleBasicClasses } from '@lumx/react/utils/className';
-import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import type { ComponentClassName } from '@lumx/react/utils/type';
 
 import { WithSelectContext } from './WithSelectContext';
 import { CoreSelectProps, SelectVariant } from './constants';
@@ -34,7 +33,7 @@ export interface SelectMultipleProps extends CoreSelectProps {
 const COMPONENT_NAME = 'Select';
 
 /** The default class name and classes prefix for this component. */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-select';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /** The default value of props. */
 const DEFAULT_PROPS: Partial<SelectMultipleProps> = {

package/src/components/select/WithSelectContext.tsx

@@ -7,9 +7,8 @@ import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';
 import { InputHelper } from '@lumx/react/components/input-helper/InputHelper';
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 import { useListenFocus } from '@lumx/react/hooks/useListenFocus';
-import { handleBasicClasses } from '@lumx/react/utils/className';
-import { mergeRefs } from '@lumx/react/utils/mergeRefs';
-import type { ComponentClassName } 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';
@@ -19,7 +18,7 @@ import { CoreSelectProps, SelectVariant } from './constants';
 const COMPONENT_NAME = 'Select';
 
 /** The default class name and classes prefix for this component. */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-select';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /** The default value of props. */
 export const DEFAULT_PROPS: Partial<CoreSelectProps> = {

package/src/components/select/constants.ts

@@ -1,6 +1,6 @@
 import { IconButtonProps } from '@lumx/react';
 import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
-import { ReactNode, SyntheticEvent } from 'react';
+import React, { ReactNode, SyntheticEvent } from 'react';
 
 /**
  * Select variants.
@@ -50,4 +50,6 @@ export interface CoreSelectProps extends GenericProps, HasTheme {
     onInfiniteScroll?(): void;
     /** Render value function. Default: Renders the value as a string. */
     selectedValueRender?(choice: string): ReactNode | string;
+    /** Children */
+    children?: React.ReactNode;
 }

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

@@ -6,7 +6,7 @@ import { Emphasis, SideNavigation, SideNavigationItem } from '@lumx/react';
 
 export default { title: 'LumX components/side-navigation/Side Navigation' };
 
-const CustomLink: React.FC = ({ children, ...props }) =>
+const CustomLink: React.FC<{ children?: React.ReactNode }> = ({ children, ...props }) =>
     React.createElement('a', { ...props, style: { color: 'red' } }, children);
 
 export const Simple = () => (