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

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.10.1-alpha.6",
-        "@lumx/icons": "^3.10.1-alpha.6",
+        "@lumx/core": "^3.10.1-alpha.8",
+        "@lumx/icons": "^3.10.1-alpha.8",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -110,5 +110,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.10.1-alpha.6"
+    "version": "3.10.1-alpha.8"
 }

package/src/components/alert-dialog/AlertDialog.tsx

@@ -15,10 +15,9 @@ import {
     ButtonProps,
 } from '@lumx/react';
 import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useId } from '@lumx/react/hooks/useId';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import type { ComponentClassName } from '@lumx/react/utils/type';
 
 export interface AlertDialogProps extends Omit<DialogProps, 'header' | 'footer'> {
     /** Message variant. */
@@ -38,6 +37,10 @@ export interface AlertDialogProps extends Omit<DialogProps, 'header' | 'footer'>
         onClick(): void;
         label: string;
     };
+    /**
+     * Children
+     */
+    children?: React.ReactNode;
 }
 
 /**
@@ -58,7 +61,7 @@ const COMPONENT_NAME = 'AlertDialog';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-alert-dialog';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.

package/src/components/autocomplete/Autocomplete.stories.tsx

@@ -8,7 +8,7 @@ export default { title: 'LumX components/autocomplete/Autocomplete' };
 
 const cityNames = CITIES.map((city) => city.text);
 
-export const Simple = ({ theme, ...args }: any) => {
+export const Simple = (args: any) => {
     const [showSuggestions, setShowSuggestions] = useState(false);
     const [value, setValue] = useState('');
     const inputRef = useRef(null);
@@ -43,7 +43,6 @@ export const Simple = ({ theme, ...args }: any) => {
 
     return (
         <Autocomplete
-            theme={theme}
             isOpen={showSuggestions && hasSuggestions}
             onClose={close}
             value={value}

package/src/components/autocomplete/Autocomplete.tsx

@@ -5,11 +5,11 @@ import classNames from 'classnames';
 import { Dropdown, DropdownProps, IconButtonProps, Offset, Placement, TextField, TextFieldProps } from '@lumx/react';
 
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { useFocus } from '@lumx/react/hooks/useFocus';
-import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+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';
 
 /**
  * Defines the props of the component.
@@ -181,7 +181,7 @@ const COMPONENT_NAME = 'Autocomplete';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-autocomplete';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.

package/src/components/autocomplete/AutocompleteMultiple.stories.tsx

@@ -13,7 +13,7 @@ interface City {
     text: string;
 }
 
-export const Simple = ({ theme }: any) => {
+export const Simple = () => {
     const INITIAL_STATE_SHOW_SUGGESTIONS = false;
     const INITIAL_STATE_NAVIGATION_SUGGESTION = '';
 
@@ -119,7 +119,6 @@ export const Simple = ({ theme }: any) => {
 
     const renderChip = (city: City, index: number) => (
         <Chip
-            theme={theme}
             isClickable
             key={index}
             after={<Icon icon={mdiClose} size={Size.xxs} />}
@@ -134,7 +133,6 @@ export const Simple = ({ theme }: any) => {
 
     return (
         <AutocompleteMultiple
-            theme={theme}
             isOpen={showSuggestions && hasSuggestions}
             onClose={closeAutocomplete}
             value={navigationSuggestionValue || filterValue}
@@ -149,13 +147,12 @@ export const Simple = ({ theme }: any) => {
             icon={mdiFlag}
             label="Label"
         >
-            <List isClickable theme={theme}>
+            <List isClickable>
                 {filteredCities.map((city, index) => {
                     const onItemSelected = () => setSelectedCity(city);
                     return (
                         <ListItem
                             size={Size.tiny}
-                            theme={theme}
                             key={city.id}
                             isHighlighted={index === activeItemIndex}
                             onItemSelected={onItemSelected}

package/src/components/autocomplete/AutocompleteMultiple.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { mdiClose } from '@lumx/icons';
 
 import { Autocomplete, AutocompleteProps, Chip, HorizontalAlignment, Icon, Size } from '@lumx/react';
-import type { ComponentClassName } from '@lumx/react/utils/type';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
@@ -34,7 +34,7 @@ const COMPONENT_NAME = 'AutocompleteMultiple';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-autocomplete-multiple';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.

package/src/components/avatar/Avatar.tsx

@@ -4,8 +4,8 @@ import classNames from 'classnames';
 
 import { AspectRatio, Size, Theme, Thumbnail, ThumbnailProps } 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 { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
@@ -51,7 +51,7 @@ const COMPONENT_NAME = 'Avatar';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-avatar';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.

package/src/components/badge/Badge.tsx

@@ -3,8 +3,8 @@ import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { ColorPalette } 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';
 
 /**
@@ -25,7 +25,7 @@ const COMPONENT_NAME = 'Badge';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-badge';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.

package/src/components/badge/BadgeWrapper.tsx

@@ -2,8 +2,9 @@ import React, { ReactElement, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
+import { getRootClassName } from '@lumx/react/utils/className';
 import { DEFAULT_PROPS } from '@lumx/react/components/select/WithSelectContext';
-import type { GenericProps, ComponentClassName } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 export interface BadgeWrapperProps extends GenericProps {
@@ -21,7 +22,7 @@ const COMPONENT_NAME = 'BadgeWrapper';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-badge-wrapper';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 export const BadgeWrapper = forwardRef<BadgeWrapperProps, HTMLDivElement>((props, ref) => {
     const { badge, children, className, ...forwardedProps } = props;

package/src/components/button/Button.tsx

@@ -1,10 +1,11 @@
 import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
+import isEmpty from 'lodash/isEmpty';
 
 import { Emphasis, Icon, Size, Theme, Text } from '@lumx/react';
-import { isComponentType, type ComponentClassName } from '@lumx/react/utils/type';
-import { getBasicClass } from '@lumx/react/utils/className';
+import { isComponent } from '@lumx/react/utils/type';
+import { getBasicClass, getRootClassName } from '@lumx/react/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
@@ -38,7 +39,7 @@ const COMPONENT_NAME = 'Button';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-button';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.
@@ -61,8 +62,8 @@ export const Button = forwardRef<ButtonProps, HTMLButtonElement | HTMLAnchorElem
 
     const buttonClassName = classNames(
         className,
-        getBasicClass({ prefix: CLASSNAME, type: 'hasLeftIcon', value: !!leftIcon }),
-        getBasicClass({ prefix: CLASSNAME, type: 'hasRightIcon', value: !!rightIcon }),
+        getBasicClass({ prefix: CLASSNAME, type: 'hasLeftIcon', value: !isEmpty(leftIcon) }),
+        getBasicClass({ prefix: CLASSNAME, type: 'hasRightIcon', value: !isEmpty(rightIcon) }),
     );
 
     return (
@@ -72,9 +73,9 @@ export const Button = forwardRef<ButtonProps, HTMLButtonElement | HTMLAnchorElem
             className={buttonClassName}
             variant="button"
         >
-            {leftIcon && <Icon icon={leftIcon} />}
-            {children && (isComponentType(Text)(children) ? children : <span>{children}</span>)}
-            {rightIcon && <Icon icon={rightIcon} />}
+            {leftIcon && !isEmpty(leftIcon) && <Icon icon={leftIcon} />}
+            {children && (isComponent(Text)(children) ? children : <span>{children}</span>)}
+            {rightIcon && !isEmpty(rightIcon) && <Icon icon={rightIcon} />}
         </ButtonRoot>
     );
 });

package/src/components/button/ButtonGroup.tsx

@@ -2,13 +2,19 @@ import React 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';
 
 /**
  * Defines the props of the component
  */
-export type ButtonGroupProps = GenericProps;
+export interface ButtonGroupProps extends GenericProps {
+    /**
+     * Children
+     */
+    children?: React.ReactNode;
+}
 
 /**
  * Component display name.
@@ -18,7 +24,7 @@ const COMPONENT_NAME = 'ButtonGroup';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-button-group';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.

package/src/components/button/ButtonRoot.tsx

@@ -1,12 +1,14 @@
 import React, { AriaAttributes, ButtonHTMLAttributes, DetailedHTMLProps, RefObject } from 'react';
 
+import isEmpty from 'lodash/isEmpty';
+
 import classNames from 'classnames';
 
 import { ColorPalette, Emphasis, Size, Theme } from '@lumx/react';
 import { CSS_PREFIX } from '@lumx/react/constants';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { handleBasicClasses } from '@lumx/react/utils/className';
-import { renderLink } from '@lumx/react/utils/renderLink';
+import { renderLink } from '@lumx/react/utils/react/renderLink';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 type HTMLButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
@@ -42,6 +44,8 @@ export interface BaseButtonProps
     type?: HTMLButtonProps['type'];
     /** Custom react component for the link (can be used to inject react router Link). */
     linkAs?: 'a' | any;
+    /** Children */
+    children?: React.ReactNode;
 }
 
 export interface ButtonRootProps extends BaseButtonProps {
@@ -153,7 +157,7 @@ export const ButtonRoot = forwardRef<ButtonRootProps, HTMLButtonElement | HTMLAn
      *
      * However, in any case, if the component is disabled, we returned a <button> since disabled is not compatible with <a>.
      */
-    if ((linkAs || props.href) && !isDisabled) {
+    if ((linkAs || !isEmpty(props.href)) && !isDisabled) {
         return renderLink(
             {
                 linkAs,

package/src/components/button/IconButton.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 import { Emphasis, Icon, Size, Theme, Tooltip, TooltipProps } from '@lumx/react';
 import { BaseButtonProps, ButtonRoot } from '@lumx/react/components/button/ButtonRoot';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import type { ComponentClassName } from '@lumx/react/utils/type';
 
 export interface IconButtonProps extends BaseButtonProps {
     /**
@@ -39,7 +39,7 @@ const COMPONENT_NAME = 'IconButton';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-icon-button';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.

package/src/components/checkbox/Checkbox.tsx

@@ -5,10 +5,10 @@ import classNames from 'classnames';
 import { mdiCheck, mdiMinus } from '@lumx/icons';
 
 import { Icon, 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 { useMergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
@@ -51,7 +51,7 @@ const COMPONENT_NAME = 'Checkbox';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-checkbox';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.

package/src/components/chip/Chip.tsx

@@ -1,12 +1,13 @@
 import React, { MouseEventHandler, ReactNode } from 'react';
 
 import classNames from 'classnames';
+import isFunction from 'lodash/isFunction';
 
 import { ColorPalette, Size, Theme } from '@lumx/react';
 import { useStopPropagation } from '@lumx/react/hooks/useStopPropagation';
 
-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 { onEnterPressed } from '@lumx/react/utils/browser/event';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
@@ -40,6 +41,8 @@ export interface ChipProps extends GenericProps, HasTheme {
     onAfterClick?: MouseEventHandler;
     /** On "before" element clicked callback. */
     onBeforeClick?: MouseEventHandler;
+    /** Children */
+    children?: React.ReactNode;
 }
 
 /**
@@ -50,7 +53,7 @@ const COMPONENT_NAME = 'Chip';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-chip';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.
@@ -88,8 +91,11 @@ export const Chip = forwardRef<ChipProps, HTMLAnchorElement>((props, ref) => {
         onKeyDown,
         ...forwardedProps
     } = props;
-    const isButton = onClick && !href;
-    const isClickable = Boolean(onClick) || Boolean(href) || propIsClickable;
+    const hasAfterClick = isFunction(onAfterClick);
+    const hasBeforeClick = isFunction(onBeforeClick);
+    const hasOnClick = isFunction(onClick);
+    const isButton = hasOnClick && !href;
+    const isClickable = Boolean(hasOnClick) || Boolean(href) || propIsClickable;
 
     // Adapt color to the theme.
     const chipColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
@@ -98,7 +104,7 @@ export const Chip = forwardRef<ChipProps, HTMLAnchorElement>((props, ref) => {
     const handleOnAfterClick = useStopPropagation(onAfterClick);
     const handleKeyDown = (evt: React.KeyboardEvent) => {
         onKeyDown?.(evt);
-        if (onClick) {
+        if (hasOnClick) {
             onEnterPressed(onClick)(evt);
         }
     };
@@ -127,14 +133,14 @@ export const Chip = forwardRef<ChipProps, HTMLAnchorElement>((props, ref) => {
                 }),
             )}
             aria-disabled={(isClickable && isDisabled) || undefined}
-            onClick={onClick || undefined}
+            onClick={hasOnClick ? onClick : undefined}
             onKeyDown={handleKeyDown}
         >
             {before && (
                 // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
                 <div
                     className={classNames(`${CLASSNAME}__before`, {
-                        [`${CLASSNAME}__before--is-clickable`]: !!onBeforeClick,
+                        [`${CLASSNAME}__before--is-clickable`]: hasBeforeClick,
                     })}
                     onClick={handleOnBeforeClick}
                 >
@@ -146,7 +152,7 @@ export const Chip = forwardRef<ChipProps, HTMLAnchorElement>((props, ref) => {
                 // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
                 <div
                     className={classNames(`${CLASSNAME}__after`, {
-                        [`${CLASSNAME}__after--is-clickable`]: !!onAfterClick,
+                        [`${CLASSNAME}__after--is-clickable`]: hasAfterClick,
                     })}
                     onClick={handleOnAfterClick}
                 >

package/src/components/chip/ChipGroup.tsx

@@ -3,7 +3,8 @@ import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { HorizontalAlignment } from '@lumx/react/components';
-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';
 
 import { useChipGroupNavigation } from '@lumx/react/hooks/useChipGroupNavigation';
@@ -34,7 +35,7 @@ const COMPONENT_NAME = 'ChipGroup';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-chip-group';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * ChipGroup component.

package/src/components/comment-block/CommentBlock.stories.tsx

@@ -42,21 +42,18 @@ export const FullFeatured = {
         fullDate: 'Monday, March 30, 2021 at 4:06 PM',
         hasActions: true,
     },
-    render: ({ theme, ...props }: any) => (
+    render: (props: any) => (
         <CommentBlock
-            theme={theme}
             {...props}
             actions={[
-                <Button theme={theme} emphasis="low" size="s" leftIcon={mdiHeart}>
+                <Button emphasis="low" size="s" leftIcon={mdiHeart}>
                     24 likes
                 </Button>,
-                <Button theme={theme} emphasis="low" size="s" leftIcon={mdiReply}>
+                <Button emphasis="low" size="s" leftIcon={mdiReply}>
                     Reply
                 </Button>,
             ]}
-            headerActions={
-                <IconButton label="Actions" icon={mdiDotsHorizontal} theme={theme} emphasis="low" size="s" />
-            }
+            headerActions={<IconButton label="Actions" icon={mdiDotsHorizontal} emphasis="low" size="s" />}
         />
     ),
 };

package/src/components/comment-block/CommentBlock.tsx

@@ -3,8 +3,8 @@ import React, { Children, ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { Avatar, Size, Theme, Tooltip } 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 { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
@@ -72,7 +72,7 @@ const COMPONENT_NAME = 'CommentBlock';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-comment-block';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.

package/src/components/date-picker/constants.ts

@@ -1,4 +1,4 @@
-import type { ComponentClassName } from '@lumx/react/utils/type';
+import { getRootClassName } from '@lumx/react/utils/className';
 
 /**
  * Component display name.
@@ -8,4 +8,4 @@ export const COMPONENT_NAME = 'DatePicker';
 /**
  * Component default class name and class prefix.
  */
-export const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-date-picker';
+export const CLASSNAME = getRootClassName(COMPONENT_NAME);

package/src/components/dialog/Dialog.tsx

@@ -10,11 +10,11 @@ import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 import { useIntersectionObserver } from '@lumx/react/hooks/useIntersectionObserver';
 
-import { type GenericProps, isComponentType, type ComponentClassName } from '@lumx/react/utils/type';
-import { partitionMulti } from '@lumx/react/utils/collection/partitionMulti';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { GenericProps, isComponent } from '@lumx/react/utils/type';
+import { partitionMulti } from '@lumx/react/utils/partitionMulti';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
-import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';
@@ -61,12 +61,14 @@ export interface DialogProps extends GenericProps {
     onVisibilityChange?(isVisible: boolean): void;
     /** whether to disable the scroll on the body or not */
     disableBodyScroll?: boolean;
+    /** Children */
+    children?: React.ReactNode;
 }
 
 export type DialogSizes = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
 
-const isHeader = isComponentType('header');
-const isFooter = isComponentType('footer');
+const isHeader = isComponent('header');
+const isFooter = isComponent('footer');
 
 /**
  * Component display name.
@@ -76,7 +78,7 @@ const COMPONENT_NAME = 'Dialog';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-dialog';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.

package/src/components/divider/Divider.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { 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 { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
@@ -21,7 +21,7 @@ const COMPONENT_NAME = 'Divider';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-divider';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.

package/src/components/drag-handle/DragHandle.tsx

@@ -4,8 +4,8 @@ import classNames from 'classnames';
 
 import { mdiDragVertical } from '@lumx/icons';
 import { ColorPalette, Icon, 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 { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
@@ -22,7 +22,7 @@ const COMPONENT_NAME = 'DragHandle';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-drag-handle';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * DragHandle component.

package/src/components/dropdown/Dropdown.tsx

@@ -5,7 +5,8 @@ import classNames from 'classnames';
 import { List, ListProps } from '@lumx/react/components/list/List';
 import { Popover, PopoverProps } from '@lumx/react/components/popover/Popover';
 import { useInfiniteScroll } from '@lumx/react/hooks/useInfiniteScroll';
-import { type GenericProps, isComponentType, type ComponentClassName } from '@lumx/react/utils/type';
+import { GenericProps, isComponent } from '@lumx/react/utils/type';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { Offset, Placement } from '@lumx/react/components/popover/constants';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
@@ -90,7 +91,7 @@ const COMPONENT_NAME = 'Dropdown';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-dropdown';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.
@@ -139,7 +140,7 @@ export const Dropdown = forwardRef<DropdownProps, HTMLDivElement>((props, ref) =
     useInfiniteScroll(innerRef, onInfiniteScroll);
 
     const popperElement = useMemo(() => {
-        return !Array.isArray(children) && isComponentType(List)(children)
+        return !Array.isArray(children) && isComponent(List)(children)
             ? cloneElement<ListProps>(children, {
                   ...children.props,
                   ref: listElement,