@lumx/react 3.10.1-alpha.7 → 3.11.0

package/src/components/list/List.tsx

@@ -4,9 +4,9 @@ import classNames from 'classnames';
 
 import { Size } from '@lumx/react';
 import { useKeyboardListNavigation } from '@lumx/react/hooks/useKeyboardListNavigation';
-import type { GenericProps, ComponentClassName } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
-import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { GenericProps } from '@lumx/react/utils/type';
+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 { useInteractiveList } from './useInteractiveList';
@@ -44,7 +44,7 @@ const COMPONENT_NAME = 'List';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-list';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.

package/src/components/list/ListDivider.tsx

@@ -2,7 +2,8 @@ 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';
 
 /**
@@ -18,7 +19,7 @@ const COMPONENT_NAME = 'ListDivider';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-list-divider';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * ListDivider component.

package/src/components/list/ListItem.tsx

@@ -1,12 +1,13 @@
 import React, { ReactNode, Ref, SyntheticEvent, useMemo } from 'react';
 
 import classNames from 'classnames';
+import isEmpty from 'lodash/isEmpty';
 
 import { ListProps, Size } from '@lumx/react';
-import type { GenericProps, ComponentClassName } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { onEnterPressed, onButtonPressed } from '@lumx/react/utils/browser/event';
-import { handleBasicClasses } from '@lumx/react/utils/className';
-import { renderLink } from '@lumx/react/utils/renderLink';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { renderLink } from '@lumx/react/utils/react/renderLink';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 export type ListItemSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
@@ -50,7 +51,7 @@ const COMPONENT_NAME = 'ListItem';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-list-item';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.
@@ -64,7 +65,7 @@ const DEFAULT_PROPS: Partial<ListProps> = {
  * @return `true` if the list item is clickable; `false` otherwise.
  */
 export function isClickable({ linkProps, onItemSelected }: Partial<ListItemProps>): boolean {
-    return !!linkProps?.href || !!onItemSelected;
+    return !isEmpty(linkProps?.href) || !!onItemSelected;
 }
 
 /**

package/src/components/list/ListSubheader.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 = 'ListSubheader';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-list-subheader';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * ListSubheader component.

package/src/components/list/useInteractiveList.tsx

@@ -1,9 +1,10 @@
-import { ListItem, ListItemProps } from '@lumx/react';
+import { ListItemProps } from '@lumx/react';
 import { isClickable } from '@lumx/react/components/list/ListItem';
 
-import { isComponentType } from '@lumx/react/utils/type';
-import { flattenChildren } from '@lumx/react/utils/flattenChildren';
-import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { isComponent } from '@lumx/react/utils/type';
+import { flattenChildren } from '@lumx/react/utils/react/flattenChildren';
+import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
+import get from 'lodash/get';
 import {
     cloneElement,
     Key,
@@ -74,7 +75,7 @@ function onKeyboardFocus(props: any, handler: (evt: FocusEvent) => void) {
 }
 
 const isNavigableItem = (node: ReactNode): node is ReactElement => {
-    return isComponentType(ListItem)(node) && isClickable(node.props) && !node.props.isDisabled;
+    return isComponent('ListItem')(node) && isClickable(node.props) && !node.props.isDisabled;
 };
 
 /**
@@ -146,7 +147,7 @@ export const useInteractiveList: useInteractiveList = (options) => {
             setActiveItemIndex(nextIndex);
             evt.preventDefault();
             evt.stopPropagation();
-            onListItemNavigated?.(nextIndex, (items[nextIndex] as ReactElement)?.key);
+            onListItemNavigated?.(nextIndex, get(items, [nextIndex, 'key']));
         };
 
         /**

package/src/components/message/Message.tsx

@@ -4,8 +4,8 @@ import classNames from 'classnames';
 
 import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiClose, mdiInformation } from '@lumx/icons';
 import { ColorPalette, Emphasis, Icon, IconButton, 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';
 
 /**
@@ -41,7 +41,7 @@ const COMPONENT_NAME = 'Message';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-message';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Associative map from message kind to color and icon.

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

@@ -5,8 +5,8 @@ import { render, screen, within } from '@testing-library/react';
 import { getByClassName, queryAllByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { Thumbnail } from '@lumx/react';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
+import range from 'lodash/range';
 import userEvent from '@testing-library/user-event';
-import { range } from '@lumx/react/utils/collection/range';
 
 const CLASSNAME = Mosaic.className as string;
 
@@ -19,8 +19,8 @@ const setup = (props: Partial<MosaicProps> = {}, { wrapper }: SetupRenderOptions
 };
 
 const generateThumbnails = (count: number) =>
-    range(count).map((i) => ({
-        image: `https://example.com/image${i + 1}.png`,
+    range(1, count + 1).map((i) => ({
+        image: `https://example.com/image${i}.png`,
         alt: '',
     }));
 

package/src/components/mosaic/Mosaic.tsx

@@ -1,11 +1,12 @@
 import React, { MouseEventHandler, useMemo } from 'react';
 
 import classNames from 'classnames';
-
+import take from 'lodash/take';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+
 import { Alignment, AspectRatio, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';
-import 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';
 
 /**
@@ -26,7 +27,7 @@ const COMPONENT_NAME = 'Mosaic';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-mosaic';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.
@@ -65,7 +66,7 @@ export const Mosaic = forwardRef<MosaicProps, HTMLDivElement>((props, ref) => {
             })}
         >
             <div className={`${CLASSNAME}__wrapper`}>
-                {thumbnails.slice(-4).map((thumbnail: any, index: number) => {
+                {take(thumbnails, 4).map((thumbnail: any, index: number) => {
                     const { image, onClick, align, ...thumbnailProps } = thumbnail;
 
                     return (

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

@@ -32,9 +32,9 @@ export default {
  * Demonstrate a full-featured navigation
  */
 export const FullFeatured = {
-    render({ theme, itemProps, orientation }: any) {
+    render({ itemProps, orientation }: any) {
         return (
-            <Navigation theme={theme} aria-label="navigation" orientation={orientation}>
+            <Navigation aria-label="navigation" orientation={orientation}>
                 <Navigation.Item isCurrentPage label="Homepage" icon={mdiHome} href="#" {...itemProps} />
                 <Navigation.Item
                     label="Some very very very very very very very very very very very very very very very very very very very very very very very very very very very long text"

package/src/components/navigation/Navigation.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 
 import classNames from 'classnames';
 
-import type { HasAriaLabelOrLabelledBy, HasClassName, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { HasAriaLabelOrLabelledBy, HasClassName, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { Orientation, Theme } from '@lumx/react';
 import { ThemeProvider, useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
@@ -28,7 +28,7 @@ const COMPONENT_NAME = 'Navigation';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-navigation';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props

package/src/components/navigation/NavigationItem.tsx

@@ -1,13 +1,7 @@
 import React, { ElementType, ReactNode } from 'react';
 import { Icon, Placement, Size, Tooltip, Text } from '@lumx/react';
-import { handleBasicClasses } from '@lumx/react/utils/className';
-import type {
-    ComponentRef,
-    HasClassName,
-    HasPolymorphicAs,
-    HasTheme,
-    ComponentClassName,
-} from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { ComponentRef, HasClassName, HasPolymorphicAs, HasTheme } from '@lumx/react/utils/type';
 import classNames from 'classnames';
 import { forwardRefPolymorphic } from '@lumx/react/utils/react/forwardRefPolymorphic';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
@@ -42,7 +36,7 @@ const COMPONENT_NAME = 'NavigationItem';
 /**
  * Component default class name and class prefix.
  */
-export const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-navigation-item';
+export const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 export const NavigationItem = Object.assign(
     forwardRefPolymorphic(<E extends ElementType = 'a'>(props: NavigationItemProps<E>, ref: ComponentRef<E>) => {

package/src/components/navigation/NavigationSection.tsx

@@ -3,8 +3,8 @@ import React, { useRef, useState, useContext } from 'react';
 import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
 import { Icon, Size, Text, Orientation, Popover, Placement, Theme } from '@lumx/react';
 import classNames from 'classnames';
-import { handleBasicClasses } from '@lumx/react/utils/className';
-import type { HasClassName, ComponentClassName } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { HasClassName } from '@lumx/react/utils/type';
 import { ThemeProvider, useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { useId } from '@lumx/react/hooks/useId';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
@@ -29,7 +29,7 @@ const COMPONENT_NAME = 'NavigationSection';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-navigation-section';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 export const NavigationSection = forwardRef<NavigationSectionProps, HTMLLIElement>((props, ref) => {
     const { children, className, label, icon, ...forwardedProps } = props;

package/src/components/notification/Notification.tsx

@@ -2,13 +2,15 @@ import React, { useRef } from 'react';
 import { createPortal } from 'react-dom';
 
 import classNames from 'classnames';
+import isFunction from 'lodash/isFunction';
+
 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 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 { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
-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';
 
@@ -42,7 +44,7 @@ const COMPONENT_NAME = 'Notification';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-notification';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.
@@ -86,7 +88,9 @@ export const Notification = forwardRef<NotificationProps, HTMLDivElement>((props
     const hasAction: boolean = Boolean(onActionClick) && Boolean(actionLabel);
 
     const handleCallback = (evt: React.MouseEvent) => {
-        onActionClick?.();
+        if (isFunction(onActionClick)) {
+            onActionClick();
+        }
         evt.stopPropagation();
     };
 

package/src/components/popover/Popover.stories.tsx

@@ -110,7 +110,7 @@ export const Placements = {
     ],
 };
 
-export const WithUpdatingChildren = ({ theme }: any) => {
+export const WithUpdatingChildren = () => {
     const anchorRef = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
 
@@ -142,7 +142,6 @@ export const WithUpdatingChildren = ({ theme }: any) => {
             <Popover
                 closeOnClickAway
                 closeOnEscape
-                theme={theme}
                 isOpen={isOpen}
                 anchorRef={anchorRef}
                 placement={Placement.BOTTOM_END}
@@ -159,7 +158,7 @@ export const WithUpdatingChildren = ({ theme }: any) => {
     );
 };
 
-export const WithScrollingPopover = ({ theme }: any) => {
+export const WithScrollingPopover = () => {
     const anchorRef = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
 
@@ -179,7 +178,6 @@ export const WithScrollingPopover = ({ theme }: any) => {
             <Popover
                 closeOnClickAway
                 closeOnEscape
-                theme={theme}
                 isOpen={isOpen}
                 anchorRef={anchorRef}
                 placement={Placement.BOTTOM}
@@ -204,7 +202,7 @@ export const WithScrollingPopover = ({ theme }: any) => {
     );
 };
 
-export const FitToAnchorWidth = ({ theme }: any) => {
+export const FitToAnchorWidth = () => {
     const demoPopperStyle = {
         alignItems: 'center',
         display: 'flex',
@@ -231,43 +229,43 @@ export const FitToAnchorWidth = ({ theme }: any) => {
     return (
         <div style={container}>
             <div>
-                <Chip ref={maxWidthAnchorRef} theme={theme} size={Size.s}>
+                <Chip ref={maxWidthAnchorRef} size={Size.s}>
                     Anchor
                 </Chip>
             </div>
-            <Popover theme={theme} anchorRef={maxWidthAnchorRef} fitToAnchorWidth="maxWidth" isOpen placement="top">
+            <Popover anchorRef={maxWidthAnchorRef} fitToAnchorWidth="maxWidth" isOpen placement="top">
                 <div style={demoPopperStyle}>Popover maxWidth</div>
             </Popover>
             <div>
-                <Chip ref={widthSmallAnchorRef} theme={theme} size={Size.s}>
+                <Chip ref={widthSmallAnchorRef} size={Size.s}>
                     Anchor
                 </Chip>
             </div>
-            <Popover theme={theme} anchorRef={widthSmallAnchorRef} fitToAnchorWidth="width" isOpen placement="top">
+            <Popover anchorRef={widthSmallAnchorRef} fitToAnchorWidth="width" isOpen placement="top">
                 <div style={demoPopperStyle}>Popover width small anchor</div>
             </Popover>
             <div>
-                <Chip ref={widthLargeAnchorRef} theme={theme} size={Size.s}>
+                <Chip ref={widthLargeAnchorRef} size={Size.s}>
                     VeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLargeAnchor
                 </Chip>
             </div>
-            <Popover theme={theme} anchorRef={widthLargeAnchorRef} fitToAnchorWidth="width" isOpen placement="top">
+            <Popover anchorRef={widthLargeAnchorRef} fitToAnchorWidth="width" isOpen placement="top">
                 <div style={demoPopperStyle}>Popover width large anchor</div>
             </Popover>
             <div>
-                <Chip ref={minWidthAnchorRef} theme={theme} size={Size.s}>
+                <Chip ref={minWidthAnchorRef} size={Size.s}>
                     VeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLargeAnchor
                 </Chip>
             </div>
-            <Popover theme={theme} anchorRef={minWidthAnchorRef} fitToAnchorWidth="minWidth" isOpen placement="top">
+            <Popover anchorRef={minWidthAnchorRef} fitToAnchorWidth="minWidth" isOpen placement="top">
                 <div style={demoPopperStyle}>Popover minWidth</div>
             </Popover>
             <div>
-                <Chip ref={defaultWidthAnchorRef} theme={theme} size={Size.s}>
+                <Chip ref={defaultWidthAnchorRef} size={Size.s}>
                     VeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLargeAnchor
                 </Chip>
             </div>
-            <Popover theme={theme} anchorRef={defaultWidthAnchorRef} isOpen placement="top">
+            <Popover anchorRef={defaultWidthAnchorRef} isOpen placement="top">
                 <div style={demoPopperStyle}>Popover default</div>
             </Popover>
         </div>

package/src/components/popover/Popover.test.tsx

@@ -51,8 +51,13 @@ describe(`<${Popover.displayName}>`, () => {
         forwardClassName: 'element',
         forwardAttributes: 'element',
         applyTheme: {
-            affects: [{ element: 'element' }, { not: { element: 'themeSentinel' } }],
+            affects: [
+                { element: 'element' },
+                // Theme automatically transferred to the children
+                { element: 'themeSentinel' },
+            ],
             viaProp: true,
+            // Parent context does not affect the popover
             viaContext: false,
         },
     });

package/src/components/popover/Popover.tsx

@@ -7,11 +7,11 @@ import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
 import { useFocus } from '@lumx/react/hooks/useFocus';
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 import { DOCUMENT } from '@lumx/react/constants';
-import type { Comp, GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
-import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
-import { skipRender } from '@lumx/react/utils/skipRender';
+import { skipRender } from '@lumx/react/utils/react/skipRender';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { ThemeProvider } from '@lumx/react/utils/theme/ThemeContext';
@@ -80,7 +80,7 @@ const COMPONENT_NAME = 'Popover';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-popover';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.
@@ -181,7 +181,7 @@ const _InnerPopover = forwardRef<PopoverProps, HTMLDivElement>((props, ref) => {
                               </svg>
                           </div>
                       )}
-                      <ThemeProvider value={undefined}>{children}</ThemeProvider>
+                      <ThemeProvider value={theme}>{children}</ThemeProvider>
                   </ClickAwayProvider>
               </Component>,
               usePortal,

package/src/components/popover/usePopoverStyle.tsx

@@ -1,12 +1,10 @@
 import React, { useEffect, useMemo, useState } from 'react';
-
+import memoize from 'lodash/memoize';
 import { detectOverflow } from '@popperjs/core';
 
 import { DOCUMENT, WINDOW } from '@lumx/react/constants';
 import { PopoverProps } from '@lumx/react/components/popover/Popover';
 import { usePopper } from '@lumx/react/hooks/usePopper';
-import { memoize } from '@lumx/react/utils/function/memoize';
-
 import { ARROW_SIZE, FitAnchorWidth, Placement } from './constants';
 
 /**

package/src/components/popover/useRestoreFocusOnClose.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { getFirstAndLastFocusable } from '@lumx/react/utils/browser/focus/getFirstAndLastFocusable';
-import { OnBeforeUnmount } from '@lumx/react/utils/OnBeforeUnmount';
+import { OnBeforeUnmount } from '@lumx/react/utils/react/OnBeforeUnmount';
 import type { PopoverProps } from './Popover';
 
 /**

package/src/components/popover-dialog/PopoverDialog.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 
 import classNames from 'classnames';
 
-import { HasAriaLabelOrLabelledBy, ComponentClassName } from '@lumx/react/utils/type';
+import { HasAriaLabelOrLabelledBy } from '@lumx/react/utils/type';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { Popover, PopoverProps } from '../popover/Popover';
@@ -21,7 +22,7 @@ const COMPONENT_NAME = 'PopoverDialog';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-popover-dialog';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.

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

@@ -1,9 +1,11 @@
 import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
+import isObject from 'lodash/isObject';
+
 import { Orientation, Theme, Thumbnail, ThumbnailProps, ThumbnailVariant } 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';
 
@@ -41,7 +43,7 @@ const COMPONENT_NAME = 'PostBlock';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-post-block';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.
@@ -75,9 +77,6 @@ export const PostBlock = forwardRef<PostBlockProps, HTMLDivElement>((props, ref)
         ...forwardedProps
     } = props;
 
-    // Display text as string or HTML
-    const textContent = typeof text === 'string' ? { children: text } : { dangerouslySetInnerHTML: text };
-
     return (
         <div
             ref={ref}
@@ -100,7 +99,12 @@ export const PostBlock = forwardRef<PostBlockProps, HTMLDivElement>((props, ref)
 
                 {meta && <span className={`${CLASSNAME}__meta`}>{meta}</span>}
 
-                <p className={`${CLASSNAME}__text`} {...textContent} />
+                {isObject(text) && text.__html ? (
+                    // eslint-disable-next-line react/no-danger
+                    <p dangerouslySetInnerHTML={text} className={`${CLASSNAME}__text`} />
+                ) : (
+                    <p className={`${CLASSNAME}__text`}>{text}</p>
+                )}
 
                 {attachments && <div className={`${CLASSNAME}__attachments`}>{attachments}</div>}
                 {(tags || actions) && (

package/src/components/progress/Progress.tsx

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

package/src/components/progress/ProgressCircular.tsx

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

package/src/components/progress/ProgressLinear.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';
 
@@ -18,7 +18,7 @@ const COMPONENT_NAME = 'ProgressLinear';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-progress-linear';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.