@lumx/react 3.10.1-alpha.2 → 3.10.1-alpha.4

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.10.1-alpha.2",
-        "@lumx/icons": "^3.10.1-alpha.2",
+        "@lumx/core": "^3.10.1-alpha.4",
+        "@lumx/icons": "^3.10.1-alpha.4",
         "@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.2"
+    "version": "3.10.1-alpha.4"
 }

package/src/components/button/Button.tsx

@@ -1,7 +1,6 @@
 import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
-import isEmpty from 'lodash/isEmpty';
 
 import { Emphasis, Icon, Size, Theme, Text } from '@lumx/react';
 import { isComponent } from '@lumx/react/utils/type';
@@ -62,8 +61,8 @@ export const Button = forwardRef<ButtonProps, HTMLButtonElement | HTMLAnchorElem
 
     const buttonClassName = classNames(
         className,
-        getBasicClass({ prefix: CLASSNAME, type: 'hasLeftIcon', value: !isEmpty(leftIcon) }),
-        getBasicClass({ prefix: CLASSNAME, type: 'hasRightIcon', value: !isEmpty(rightIcon) }),
+        getBasicClass({ prefix: CLASSNAME, type: 'hasLeftIcon', value: !!leftIcon }),
+        getBasicClass({ prefix: CLASSNAME, type: 'hasRightIcon', value: !!rightIcon }),
     );
 
     return (
@@ -73,9 +72,9 @@ export const Button = forwardRef<ButtonProps, HTMLButtonElement | HTMLAnchorElem
             className={buttonClassName}
             variant="button"
         >
-            {leftIcon && !isEmpty(leftIcon) && <Icon icon={leftIcon} />}
+            {leftIcon && <Icon icon={leftIcon} />}
             {children && (isComponent(Text)(children) ? children : <span>{children}</span>)}
-            {rightIcon && !isEmpty(rightIcon) && <Icon icon={rightIcon} />}
+            {rightIcon && <Icon icon={rightIcon} />}
         </ButtonRoot>
     );
 });

package/src/components/button/ButtonRoot.tsx

@@ -1,7 +1,5 @@
 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';
@@ -155,7 +153,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 || !isEmpty(props.href)) && !isDisabled) {
+    if ((linkAs || props.href) && !isDisabled) {
         return renderLink(
             {
                 linkAs,

package/src/components/chip/Chip.tsx

@@ -1,14 +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 { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-import { onEnterPressed } from '@lumx/react/utils/event';
+import { onEnterPressed } from '@lumx/react/utils/browser/event';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
@@ -89,11 +88,8 @@ export const Chip = forwardRef<ChipProps, HTMLAnchorElement>((props, ref) => {
         onKeyDown,
         ...forwardedProps
     } = props;
-    const hasAfterClick = isFunction(onAfterClick);
-    const hasBeforeClick = isFunction(onBeforeClick);
-    const hasOnClick = isFunction(onClick);
-    const isButton = hasOnClick && !href;
-    const isClickable = Boolean(hasOnClick) || Boolean(href) || propIsClickable;
+    const isButton = onClick && !href;
+    const isClickable = Boolean(onClick) || Boolean(href) || propIsClickable;
 
     // Adapt color to the theme.
     const chipColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
@@ -102,7 +98,7 @@ export const Chip = forwardRef<ChipProps, HTMLAnchorElement>((props, ref) => {
     const handleOnAfterClick = useStopPropagation(onAfterClick);
     const handleKeyDown = (evt: React.KeyboardEvent) => {
         onKeyDown?.(evt);
-        if (hasOnClick) {
+        if (onClick) {
             onEnterPressed(onClick)(evt);
         }
     };
@@ -131,14 +127,14 @@ export const Chip = forwardRef<ChipProps, HTMLAnchorElement>((props, ref) => {
                 }),
             )}
             aria-disabled={(isClickable && isDisabled) || undefined}
-            onClick={hasOnClick ? onClick : undefined}
+            onClick={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`]: hasBeforeClick,
+                        [`${CLASSNAME}__before--is-clickable`]: !!onBeforeClick,
                     })}
                     onClick={handleOnBeforeClick}
                 >
@@ -150,7 +146,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`]: hasAfterClick,
+                        [`${CLASSNAME}__after--is-clickable`]: !!onAfterClick,
                     })}
                     onClick={handleOnAfterClick}
                 >

package/src/components/date-picker/DatePickerControlled.tsx

@@ -21,7 +21,7 @@ import { parseLocale } from '@lumx/react/utils/locale/parseLocale';
 import { Locale } from '@lumx/react/utils/locale/types';
 import { usePreviousValue } from '@lumx/react/hooks/usePreviousValue';
 import { getYearDisplayName } from '@lumx/react/utils/date/getYearDisplayName';
-import { onEnterPressed } from '@lumx/react/utils/event';
+import { onEnterPressed } from '@lumx/react/utils/browser/event';
 import { addMonthResetDay } from '@lumx/react/utils/date/addMonthResetDay';
 import { formatDayNumber } from '@lumx/react/utils/date/formatDayNumber';
 import { VISUALLY_HIDDEN } from '@lumx/react/constants';

package/src/components/dialog/Dialog.tsx

@@ -11,7 +11,7 @@ import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 import { useIntersectionObserver } from '@lumx/react/hooks/useIntersectionObserver';
 
 import { GenericProps, isComponent } from '@lumx/react/utils/type';
-import { partitionMulti } from '@lumx/react/utils/partitionMulti';
+import { partitionMulti } from '@lumx/react/utils/collection/partitionMulti';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';

package/src/components/expansion-panel/ExpansionPanel.test.tsx

@@ -4,14 +4,14 @@ import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/uti
 import { queryByRole, render, screen } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import userEvent from '@testing-library/user-event';
-import { isFocusVisible } from '@lumx/react/utils/isFocusVisible';
+import { isFocusVisible } from '@lumx/react/utils/browser/isFocusVisible';
 
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import { ExpansionPanel, ExpansionPanelProps } from '.';
 
 const CLASSNAME = ExpansionPanel.className as string;
 
-jest.mock('@lumx/react/utils/isFocusVisible');
+jest.mock('@lumx/react/utils/browser/isFocusVisible');
 
 const mockChildrenContent = 'children content';
 

package/src/components/expansion-panel/ExpansionPanel.tsx

@@ -4,18 +4,15 @@ import classNames from 'classnames';
 
 import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
 
-import get from 'lodash/get';
-import isEmpty from 'lodash/isEmpty';
-import isFunction from 'lodash/isFunction';
-
 import { ColorPalette, DragHandle, Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
 import { GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-import { partitionMulti } from '@lumx/react/utils/partitionMulti';
+import { partitionMulti } from '@lumx/react/utils/collection/partitionMulti';
 import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
 import { EXPANSION_PANEL_TRANSITION_DURATION } from '@lumx/core/js/constants';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { isEmpty } from '@lumx/react/utils/collection/isEmpty';
 
 /**
  * Defines the props of the component.
@@ -90,24 +87,23 @@ export const ExpansionPanel = forwardRef<ExpansionPanelProps, HTMLDivElement>((p
 
     // Either take the header in children or create one with the label.
     const headerProps: PropsWithChildren<any> = React.isValidElement(header) ? header.props : {};
-    const headerContent = !isEmpty(headerProps.children) ? (
-        headerProps.children
-    ) : (
-        <span className={`${CLASSNAME}__label`}>{label}</span>
-    );
+    const headerContent =
+        React.Children.count(headerProps.children) > 0 ? (
+            headerProps.children
+        ) : (
+            <span className={`${CLASSNAME}__label`}>{label}</span>
+        );
 
     const toggleOpen = (event: React.MouseEvent) => {
         const shouldOpen = !isOpen;
 
-        if (isFunction(onOpen) && shouldOpen) {
-            onOpen(event);
-        }
-        if (isFunction(onClose) && !shouldOpen) {
-            onClose(event);
+        if (shouldOpen) {
+            onOpen?.(event);
         }
-        if (isFunction(onToggleOpen)) {
-            onToggleOpen(shouldOpen, event);
+        if (!shouldOpen) {
+            onClose?.(event);
         }
+        onToggleOpen?.(shouldOpen, event);
     };
 
     const color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
@@ -134,7 +130,7 @@ export const ExpansionPanel = forwardRef<ExpansionPanelProps, HTMLDivElement>((p
     // Switch max height on/off to activate the CSS transition (updates when children changes).
     const [maxHeight, setMaxHeight] = useState('0');
     useEffect(() => {
-        const height = isOpen ? get(wrapperRef.current, 'offsetHeight', 0) : 0;
+        const height = isOpen ? wrapperRef.current?.offsetHeight ?? 0 : 0;
         setMaxHeight(`${height}px`);
     }, [children, isOpen]);
 

package/src/components/flex-box/FlexBox.tsx

@@ -1,9 +1,9 @@
 import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
-import castArray from 'lodash/castArray';
 
 import { Alignment, Orientation } from '@lumx/react';
+import { castArray } from '@lumx/react/utils/collection/castArray';
 import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';

package/src/components/generic-block/GenericBlock.tsx

@@ -1,12 +1,10 @@
 import React, { Children, ReactElement, ReactNode } from 'react';
 
 import classNames from 'classnames';
-import isEmpty from 'lodash/isEmpty';
-import noop from 'lodash/noop';
 
 import { Comp, isComponentType } from '@lumx/react/utils/type';
 import { getRootClassName } from '@lumx/react/utils/className';
-import { partitionMulti } from '@lumx/react/utils/partitionMulti';
+import { partitionMulti } from '@lumx/react/utils/collection/partitionMulti';
 import { Orientation, Size, FlexBox, FlexBoxProps } from '@lumx/react';
 import { GenericBlockGapSize } from '@lumx/react/components/generic-block/constants';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
@@ -101,13 +99,13 @@ interface GenericBlock extends BaseGenericBlock {
     Actions: Comp<GenericBlockSectionProps>;
 }
 
-const Figure = noop.bind({}) as Comp<FlexBoxProps>;
+const Figure = (() => {}) as unknown as Comp<FlexBoxProps>;
 const isFigure = isComponentType(Figure);
 
-const Content = noop.bind({}) as Comp<FlexBoxProps>;
+const Content = (() => {}) as unknown as Comp<FlexBoxProps>;
 const isContent = isComponentType(Content);
 
-const Actions = noop.bind({}) as Comp<FlexBoxProps>;
+const Actions = (() => {}) as unknown as Comp<FlexBoxProps>;
 const isActions = isComponentType(Actions);
 
 /**
@@ -148,7 +146,8 @@ const BaseGenericBlock: BaseGenericBlock = forwardRef((props, ref) => {
             contentChildProps: (contentChild as ReactElement)?.props,
             actionsChild,
             actionsChildProps: (actionsChild as ReactElement)?.props,
-            otherChildren: otherChildren.filter((child) => !isEmpty(child)),
+            // TODO: check this is working
+            otherChildren: otherChildren.filter((child) => React.Children.count(child) > 0),
         };
     }, [children]);
 

package/src/components/generic-block/constants.ts

@@ -1,9 +1,14 @@
-import pick from 'lodash/pick';
 import { Size } from '@lumx/react';
-import { ValueOf } from '@lumx/react/utils/type';
+
+export type GenericBlockGapSize = Extract<Size, 'tiny' | 'regular' | 'medium' | 'big' | 'huge'>;
 
 /**
  * Accepted gap sizes for the generic block.
  */
-export const GenericBlockGapSize = pick(Size, ['tiny', 'regular', 'medium', 'big', 'huge']);
-export type GenericBlockGapSize = ValueOf<typeof GenericBlockGapSize>;
+export const GenericBlockGapSize: { [S in GenericBlockGapSize]: S } = {
+    tiny: Size.tiny,
+    regular: Size.regular,
+    medium: Size.medium,
+    big: Size.big,
+    huge: Size.huge,
+};

package/src/components/grid-column/GridColumn.tsx

@@ -1,6 +1,5 @@
 import React, { ReactElement, ReactNode } from 'react';
 
-import isInteger from 'lodash/isInteger';
 import classNames from 'classnames';
 
 import { Size } from '@lumx/react';
@@ -74,7 +73,7 @@ export const GridColumn = forwardRef<GridColumnProps>((props, ref): ReactElement
             )}
             style={{
                 ...style,
-                ['--lumx-grid-column-item-min-width' as any]: isInteger(itemMinWidth) && `${itemMinWidth}px`,
+                ['--lumx-grid-column-item-min-width' as any]: Number.isInteger(itemMinWidth) && `${itemMinWidth}px`,
                 ['--lumx-grid-column-columns' as any]: maxColumns,
                 ['--lumx-grid-column-gap' as any]: gap && `var(--lumx-spacing-unit-${gap})`,
             }}

package/src/components/image-lightbox/internal/ImageSlide.tsx

@@ -4,7 +4,7 @@ import { SlideshowItem, Thumbnail } from '@lumx/react';
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useSizeOnWindowResize } from '@lumx/react/hooks/useSizeOnWindowResize';
 import { useImageSize } from '@lumx/react/hooks/useImageSize';
-import { getPrefersReducedMotion } from '@lumx/react/utils/browser/getPrefersReducedMotion';
+import { isReducedMotion } from '@lumx/react/utils/browser/isReducedMotion';
 import { isEqual } from '@lumx/react/utils/object/isEqual';
 
 import { CLASSNAME } from '../constants';
@@ -97,7 +97,7 @@ export const ImageSlide = React.memo((props: ImageSlideProps) => {
                             maxWidth: scrollAreaSize?.width,
                         }),
                         // Only animate when scale is set, and we are not pointer zooming and the user does not prefer reduced motion
-                        transition: scale && !isPointerZooming && !getPrefersReducedMotion() ? 'all 250ms' : undefined,
+                        transition: scale && !isPointerZooming && !isReducedMotion() ? 'all 250ms' : undefined,
                     },
                 }}
                 loadingPlaceholderImageRef={loadingPlaceholderImageRef}

package/src/components/image-lightbox/internal/ImageSlideshow.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import { mdiMagnifyMinusOutline, mdiMagnifyPlusOutline } from '@lumx/icons';
 import { FlexBox, IconButton, Slides, SlideshowControls } from '@lumx/react';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { memoize } from '@lumx/react/utils/function/memoize';
 
-import memoize from 'lodash/memoize';
 import { ImageCaption } from '../../image-block/ImageCaption';
 import { CLASSNAME } from '../constants';
 import type { ImagesProps, InheritedSlideShowProps, ZoomButtonProps } from '../types';
@@ -113,13 +113,9 @@ export const ImageSlideshow: React.FC<ImageSlideshowProps> = ({
 
     const getImgRef = React.useMemo(
         () =>
-            memoize(
-                (index: number, isActive: boolean) => {
-                    return mergeRefs(images?.[index].imgRef, isActive ? activeImageRef : undefined);
-                },
-                // memoize based on both arguments
-                (...args) => args.join(),
-            ),
+            memoize((index: number, isActive: boolean) => {
+                return mergeRefs(images?.[index].imgRef, isActive ? activeImageRef : undefined);
+            }),
         [images, activeImageRef],
     );
 

package/src/components/image-lightbox/useImageLightbox.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 
-import memoize from 'lodash/memoize';
-
-import { startViewTransition } from '@lumx/react/utils/DOM/startViewTransition';
-import { findImage } from '@lumx/react/utils/DOM/findImage';
+import { startViewTransition } from '@lumx/react/utils/browser/DOM/startViewTransition';
+import { findImage } from '@lumx/react/utils/browser/DOM/findImage';
+import { memoize } from '@lumx/react/utils/function/memoize';
 
 import type { ImageLightboxProps } from './types';
 import { CLASSNAME } from './constants';

package/src/components/link/Link.tsx

@@ -1,7 +1,5 @@
 import React, { RefObject, useMemo } from 'react';
 
-import isEmpty from 'lodash/isEmpty';
-
 import classNames from 'classnames';
 
 import { ColorPalette, ColorVariant, Icon, Size, Typography } from '@lumx/react';
@@ -102,7 +100,7 @@ export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>
     const renderedChildren = useMemo(
         () => (
             <>
-                {leftIcon && !isEmpty(leftIcon) && (
+                {leftIcon && (
                     <Icon icon={leftIcon} className={`${CLASSNAME}__left-icon`} size={getIconSize(typography)} />
                 )}
 
@@ -116,7 +114,7 @@ export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>
                     </span>
                 )}
 
-                {rightIcon && !isEmpty(rightIcon) && (
+                {rightIcon && (
                     <Icon icon={rightIcon} className={`${CLASSNAME}__right-icon`} size={getIconSize(typography)} />
                 )}
             </>
@@ -128,7 +126,7 @@ export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>
      * If there is no linkAs prop and no href, we returned a <button> instead of a <a>.
      * If the component is disabled, we also returned a <button> since disabled is not compatible with <a>.
      */
-    if ((!linkAs && isEmpty(href)) || isDisabled) {
+    if ((!linkAs && href) || isDisabled) {
         return (
             <button
                 type="button"

package/src/components/list/ListItem.tsx

@@ -1,11 +1,10 @@
 import React, { ReactNode, Ref, SyntheticEvent, useMemo } from 'react';
 
 import classNames from 'classnames';
-import isEmpty from 'lodash/isEmpty';
 
 import { ListProps, Size } from '@lumx/react';
 import { GenericProps } from '@lumx/react/utils/type';
-import { onEnterPressed, onButtonPressed } from '@lumx/react/utils/event';
+import { onEnterPressed, onButtonPressed } from '@lumx/react/utils/browser/event';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { renderLink } from '@lumx/react/utils/renderLink';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
@@ -65,7 +64,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 !isEmpty(linkProps?.href) || !!onItemSelected;
+    return !!linkProps?.href || !!onItemSelected;
 }
 
 /**

package/src/components/list/useInteractiveList.tsx

@@ -4,7 +4,6 @@ import { isClickable } from '@lumx/react/components/list/ListItem';
 import { isComponent } from '@lumx/react/utils/type';
 import { flattenChildren } from '@lumx/react/utils/flattenChildren';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
-import get from 'lodash/get';
 import {
     cloneElement,
     Key,
@@ -147,7 +146,7 @@ export const useInteractiveList: useInteractiveList = (options) => {
             setActiveItemIndex(nextIndex);
             evt.preventDefault();
             evt.stopPropagation();
-            onListItemNavigated?.(nextIndex, get(items, [nextIndex, 'key']));
+            onListItemNavigated?.(nextIndex, (items[nextIndex] as ReactElement)?.key);
         };
 
         /**

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(1, count + 1).map((i) => ({
-        image: `https://example.com/image${i}.png`,
+    range(count).map((i) => ({
+        image: `https://example.com/image${i + 1}.png`,
         alt: '',
     }));
 

package/src/components/mosaic/Mosaic.tsx

@@ -1,9 +1,8 @@
 import React, { MouseEventHandler, useMemo } from 'react';
 
 import classNames from 'classnames';
-import take from 'lodash/take';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { Alignment, AspectRatio, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
@@ -66,7 +65,7 @@ export const Mosaic = forwardRef<MosaicProps, HTMLDivElement>((props, ref) => {
             })}
         >
             <div className={`${CLASSNAME}__wrapper`}>
-                {take(thumbnails, 4).map((thumbnail: any, index: number) => {
+                {thumbnails.slice(-4).map((thumbnail: any, index: number) => {
                     const { image, onClick, align, ...thumbnailProps } = thumbnail;
 
                     return (

package/src/components/navigation/Navigation.tsx

@@ -1,9 +1,13 @@
-import React, { forwardRef, ReactNode } from 'react';
+import React from 'react';
+
 import classNames from 'classnames';
+
 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';
+
 import { NavigationSection } from './NavigationSection';
 import { NavigationItem } from './NavigationItem';
 import { NavigationContext } from './context';
@@ -12,7 +16,7 @@ export type NavigationProps = React.ComponentProps<'nav'> &
     HasClassName &
     HasTheme & {
         /** Content of the navigation. These components should be of type NavigationItem to be rendered */
-        children?: ReactNode;
+        children?: React.ReactNode;
         orientation?: Orientation;
     } & HasAriaLabelOrLabelledBy;
 
@@ -33,38 +37,39 @@ const DEFAULT_PROPS = {
     orientation: Orientation.vertical,
 };
 
-export const Navigation = Object.assign(
-    // eslint-disable-next-line react/display-name
-    forwardRef<HTMLElement, NavigationProps>((props, ref) => {
-        const defaultTheme = useTheme() || Theme.light;
-        const { children, className, theme = defaultTheme, orientation, ...forwardedProps } = props;
-        return (
-            <ThemeProvider value={theme}>
-                <nav
-                    className={classNames(
-                        className,
-                        handleBasicClasses({
-                            prefix: CLASSNAME,
-                            theme,
-                            orientation,
-                        }),
-                    )}
-                    ref={ref}
-                    {...forwardedProps}
-                >
-                    <NavigationContext.Provider value={{ orientation }}>
-                        <ul className={`${CLASSNAME}__list`}>{children}</ul>
-                    </NavigationContext.Provider>
-                </nav>
-            </ThemeProvider>
-        );
-    }),
-    {
-        displayName: COMPONENT_NAME,
-        className: CLASSNAME,
-        defaultProps: DEFAULT_PROPS,
-        // Sub components
-        Section: NavigationSection,
-        Item: NavigationItem,
-    },
-);
+type SubComponents = {
+    Section: typeof NavigationSection;
+    Item: typeof NavigationItem;
+};
+
+export const Navigation = forwardRef<NavigationProps, HTMLElement, SubComponents>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
+    const { children, className, theme = defaultTheme, orientation, ...forwardedProps } = props;
+    return (
+        <ThemeProvider value={theme}>
+            <nav
+                className={classNames(
+                    className,
+                    handleBasicClasses({
+                        prefix: CLASSNAME,
+                        theme,
+                        orientation,
+                    }),
+                )}
+                ref={ref}
+                {...forwardedProps}
+            >
+                <NavigationContext.Provider value={{ orientation }}>
+                    <ul className={`${CLASSNAME}__list`}>{children}</ul>
+                </NavigationContext.Provider>
+            </nav>
+        </ThemeProvider>
+    );
+});
+Navigation.displayName = COMPONENT_NAME;
+Navigation.className = CLASSNAME;
+Navigation.defaultProps = DEFAULT_PROPS;
+
+// Sub components
+Navigation.Section = NavigationSection;
+Navigation.Item = NavigationItem;