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

package/src/components/navigation/NavigationSection.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, ReactNode, useRef, useState, useContext } from 'react';
+import React, { useRef, useState, useContext } from 'react';
 
 import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
 import { Icon, Size, Text, Orientation, Popover, Placement, Theme } from '@lumx/react';
@@ -7,17 +7,18 @@ import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/classNam
 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';
 
 import { CLASSNAME as ITEM_CLASSNAME } from './NavigationItem';
 import { NavigationContext } from './context';
 
 export interface NavigationSectionProps extends React.ComponentPropsWithoutRef<'button'>, HasClassName {
     /** Items inside the section */
-    children: ReactNode;
+    children: React.ReactNode;
     /** Icon (SVG path). */
     icon?: string;
     /** Label content. */
-    label: string | ReactNode;
+    label: string | React.ReactNode;
 }
 
 /**
@@ -30,81 +31,77 @@ const COMPONENT_NAME = 'NavigationSection';
  */
 const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
-export const NavigationSection = Object.assign(
-    forwardRef<HTMLLIElement, NavigationSectionProps>((props, ref) => {
-        const { children, className, label, icon, ...forwardedProps } = props;
-        const [isOpen, setIsOpen] = useState(false);
-        const buttonRef = useRef<HTMLButtonElement>(null);
-        const sectionId = useId();
-        const { orientation } = useContext(NavigationContext) || {};
-        const theme = useTheme();
-        const isDropdown = orientation === Orientation.horizontal;
-        return (
-            <li
-                className={classNames(
-                    className,
-                    CLASSNAME,
-                    ITEM_CLASSNAME,
-                    handleBasicClasses({
-                        prefix: ITEM_CLASSNAME,
-                        theme,
-                    }),
-                )}
-                ref={ref}
+export const NavigationSection = forwardRef<NavigationSectionProps, HTMLLIElement>((props, ref) => {
+    const { children, className, label, icon, ...forwardedProps } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const sectionId = useId();
+    const { orientation } = useContext(NavigationContext) || {};
+    const theme = useTheme();
+    const isDropdown = orientation === Orientation.horizontal;
+    return (
+        <li
+            className={classNames(
+                className,
+                CLASSNAME,
+                ITEM_CLASSNAME,
+                handleBasicClasses({
+                    prefix: ITEM_CLASSNAME,
+                    theme,
+                }),
+            )}
+            ref={ref}
+        >
+            <button
+                {...forwardedProps}
+                aria-controls={sectionId}
+                aria-expanded={isOpen}
+                className={classNames(`${ITEM_CLASSNAME}__link`)}
+                ref={buttonRef}
+                onClick={(event) => {
+                    setIsOpen(!isOpen);
+                    event.stopPropagation();
+                }}
+                type="button"
             >
-                <button
-                    {...forwardedProps}
-                    aria-controls={sectionId}
-                    aria-expanded={isOpen}
-                    className={classNames(`${ITEM_CLASSNAME}__link`)}
-                    ref={buttonRef}
-                    onClick={(event) => {
-                        setIsOpen(!isOpen);
-                        event.stopPropagation();
-                    }}
-                    type="button"
-                >
-                    {icon ? <Icon className={`${ITEM_CLASSNAME}__icon`} icon={icon} size={Size.xs} /> : null}
+                {icon ? <Icon className={`${ITEM_CLASSNAME}__icon`} icon={icon} size={Size.xs} /> : null}
 
-                    <Text as="span" truncate className={`${ITEM_CLASSNAME}__label`} ref={ref}>
-                        {label}
-                    </Text>
-                    <Icon
-                        className={classNames(`${ITEM_CLASSNAME}__icon`, `${CLASSNAME}__chevron`)}
-                        icon={isOpen ? mdiChevronUp : mdiChevronDown}
-                    />
-                </button>
-                {isOpen &&
-                    (isDropdown ? (
-                        <Popover
-                            anchorRef={buttonRef}
-                            isOpen={isOpen}
-                            placement={Placement.BOTTOM_START}
-                            usePortal={false}
-                            closeOnClickAway
-                            closeOnEscape
-                            onClick={() => setIsOpen(false)}
-                            onClose={() => setIsOpen(false)}
-                            zIndex={996}
-                        >
-                            <ThemeProvider value={Theme.light}>
-                                <ul className={`${CLASSNAME}__drawer--popover`} id={sectionId}>
-                                    <NavigationContext.Provider value={{ orientation: Orientation.vertical }}>
-                                        {children}
-                                    </NavigationContext.Provider>
-                                </ul>
-                            </ThemeProvider>
-                        </Popover>
-                    ) : (
-                        <ul className={`${CLASSNAME}__drawer`} id={sectionId}>
-                            {children}
-                        </ul>
-                    ))}
-            </li>
-        );
-    }),
-    {
-        displayName: COMPONENT_NAME,
-        className: CLASSNAME,
-    },
-);
+                <Text as="span" truncate className={`${ITEM_CLASSNAME}__label`} ref={ref}>
+                    {label}
+                </Text>
+                <Icon
+                    className={classNames(`${ITEM_CLASSNAME}__icon`, `${CLASSNAME}__chevron`)}
+                    icon={isOpen ? mdiChevronUp : mdiChevronDown}
+                />
+            </button>
+            {isOpen &&
+                (isDropdown ? (
+                    <Popover
+                        anchorRef={buttonRef}
+                        isOpen={isOpen}
+                        placement={Placement.BOTTOM_START}
+                        usePortal={false}
+                        closeOnClickAway
+                        closeOnEscape
+                        onClick={() => setIsOpen(false)}
+                        onClose={() => setIsOpen(false)}
+                        zIndex={996}
+                    >
+                        <ThemeProvider value={Theme.light}>
+                            <ul className={`${CLASSNAME}__drawer--popover`} id={sectionId}>
+                                <NavigationContext.Provider value={{ orientation: Orientation.vertical }}>
+                                    {children}
+                                </NavigationContext.Provider>
+                            </ul>
+                        </ThemeProvider>
+                    </Popover>
+                ) : (
+                    <ul className={`${CLASSNAME}__drawer`} id={sectionId}>
+                        {children}
+                    </ul>
+                ))}
+        </li>
+    );
+});
+NavigationSection.displayName = COMPONENT_NAME;
+NavigationSection.className = CLASSNAME;

package/src/components/notification/Notification.tsx

@@ -2,8 +2,6 @@ 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';
@@ -88,9 +86,7 @@ export const Notification = forwardRef<NotificationProps, HTMLDivElement>((props
     const hasAction: boolean = Boolean(onActionClick) && Boolean(actionLabel);
 
     const handleCallback = (evt: React.MouseEvent) => {
-        if (isFunction(onActionClick)) {
-            onActionClick();
-        }
+        onActionClick?.();
         evt.stopPropagation();
     };
 

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

@@ -1,8 +1,6 @@
 import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
-import isObject from 'lodash/isObject';
-
 import { Orientation, Theme, Thumbnail, ThumbnailProps, ThumbnailVariant } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
@@ -77,6 +75,9 @@ 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}
@@ -99,12 +100,7 @@ export const PostBlock = forwardRef<PostBlockProps, HTMLDivElement>((props, ref)
 
                 {meta && <span className={`${CLASSNAME}__meta`}>{meta}</span>}
 
-                {isObject(text) && text.__html ? (
-                    // eslint-disable-next-line react/no-danger
-                    <p dangerouslySetInnerHTML={text} className={`${CLASSNAME}__text`} />
-                ) : (
-                    <p className={`${CLASSNAME}__text`}>{text}</p>
-                )}
+                <p className={`${CLASSNAME}__text`} {...textContent} />
 
                 {attachments && <div className={`${CLASSNAME}__attachments`}>{attachments}</div>}
                 {(tags || actions) && (

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

@@ -8,8 +8,6 @@ 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' };
@@ -52,24 +50,26 @@ export const Controlled = () => {
     ]);
 
     const toggleError = (index: number) => () => {
-        const clonedSteps = cloneDeep(steps);
-        set(clonedSteps, [index, 'hasError'], !steps[index].hasError);
-        set(clonedSteps, [index, 'isComplete'], false);
-        setSteps(clonedSteps);
+        const newSteps = [...steps];
+        const step = steps[index];
+        const newStep = { ...step, hasError: !step?.hasError, isComplete: false };
+        newSteps[index] = newStep;
+        setSteps(newSteps);
     };
 
     const previous = (index: number) => () => setActiveStep(index - 1);
 
     const next = (index: number) => () => {
         const isLast = index === steps.length - 1;
-        const clonedSteps = cloneDeep(steps);
-        set(clonedSteps, [index, 'isComplete'], true);
-        set(clonedSteps, [index, 'hasError'], false);
+        const step = steps[index];
+        const newSteps = [...steps];
+        const newStep = { ...step, hasError: false, isComplete: true };
         if (!isLast) {
-            set(clonedSteps, [index + 1, 'isDisabled'], false);
+            newSteps[index + 1].isDisabled = false;
             setActiveStep(index + 1);
         }
-        setSteps(clonedSteps);
+        newSteps[index] = newStep;
+        setSteps(newSteps);
     };
 
     return (

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

@@ -1,7 +1,6 @@
 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';
@@ -9,6 +8,10 @@ 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'];
@@ -109,7 +112,7 @@ export const SimpleSelectWithInfiniteScroll = ({ theme }: any) => {
     );
 };
 
-export const DisabledSelect = ({ theme }: any) => {
+export const DisabledSelect = ({ theme, onInputClick, onDropdownClose }: any) => {
     return (
         <Select
             isOpen={false}
@@ -117,8 +120,8 @@ export const DisabledSelect = ({ theme }: any) => {
             label="My select"
             placeholder="Placeholder"
             theme={theme}
-            onInputClick={noop}
-            onDropdownClose={noop}
+            onInputClick={onInputClick}
+            onDropdownClose={onDropdownClose}
             isDisabled
         >
             <List theme={theme} isClickable>
@@ -206,7 +209,13 @@ export const SelectWithAnotherField = ({ theme }: any) => {
 
     return (
         <>
-            <TextField value="myvalue" label="I am the label" placeholder="ex: A value" theme={theme} onChange={noop} />
+            <TextField
+                value="myvalue"
+                label="I am the label"
+                placeholder="ex: A value"
+                theme={theme}
+                onChange={() => {}}
+            />
             <Select
                 style={{ width: '100%' }}
                 isOpen={isOpen}

package/src/components/select/Select.tsx

@@ -1,7 +1,6 @@
 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';
@@ -170,7 +169,7 @@ const SelectField: React.FC<SelectProps> = (props) => {
  * @return React element.
  */
 export const Select = forwardRef<SelectProps, HTMLDivElement>((props, ref) => {
-    const isEmpty = lodashIsEmpty(props.value);
+    const isEmpty = !props.value;
     const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty;
 
     return WithSelectContext(

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

@@ -13,11 +13,13 @@ 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' };
+export default {
+    title: 'LumX components/select/Select Multiple',
+    argTypes: { onClear: { action: true }, onInputClick: { action: true }, onDropdownClose: { action: true } },
+};
 
 const PLACEHOLDER = 'Select values';
 const LABEL = 'Select label';
@@ -76,18 +78,18 @@ export const DefaultSelectMultiple = ({ theme }: any) => {
     );
 };
 
-export const SelectMultipleWithNoData = ({ theme }: any) => {
+export const SelectMultipleWithNoData = ({ theme, onClear, onInputClick, onDropdownClose }: any) => {
     return (
         <SelectMultiple
             isOpen
             value={[]}
-            onClear={noop}
+            onClear={onClear}
             clearButtonProps={{ label: 'Clear' }}
             label="Select label"
             placeholder="Select values"
             theme={theme}
-            onInputClick={noop}
-            onDropdownClose={noop}
+            onInputClick={onInputClick}
+            onDropdownClose={onDropdownClose}
         >
             <List isClickable>
                 <ListItem key={0} size={Size.tiny}>
@@ -98,18 +100,18 @@ export const SelectMultipleWithNoData = ({ theme }: any) => {
     );
 };
 
-export const DisabledSelectMultiple = ({ theme }: any) => {
+export const DisabledSelectMultiple = ({ theme, onClear, onInputClick, onDropdownClose }: any) => {
     return (
         <SelectMultiple
             isOpen
             value={[]}
-            onClear={noop}
+            onClear={onClear}
             clearButtonProps={{ label: 'Clear' }}
             label="Select label"
             placeholder="Select values"
             theme={theme}
-            onInputClick={noop}
-            onDropdownClose={noop}
+            onInputClick={onInputClick}
+            onDropdownClose={onDropdownClose}
             isDisabled
         />
     );

package/src/components/side-navigation/SideNavigationItem.tsx

@@ -1,7 +1,6 @@
 import React, { Children, ReactNode } from 'react';
 
 import classNames from 'classnames';
-import isEmpty from 'lodash/isEmpty';
 
 import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
 import { Emphasis, Icon, Size, IconButton, IconButtonProps } from '@lumx/react';
@@ -11,6 +10,7 @@ import { renderLink } from '@lumx/react/utils/renderLink';
 import { renderButtonOrLink } from '@lumx/react/utils/renderButtonOrLink';
 import { useId } from '@lumx/react/hooks/useId';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { isEmpty } from '@lumx/react/utils/collection/isEmpty';
 
 /**
  * Defines the props of the component.

package/src/components/slideshow/Slides.tsx

@@ -1,6 +1,5 @@
 import React, { Children, CSSProperties } from 'react';
 
-import chunk from 'lodash/chunk';
 import classNames from 'classnames';
 
 import { FULL_WIDTH_PERCENT } from '@lumx/react/components/slideshow/constants';
@@ -8,6 +7,7 @@ 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';
+import { chunk } from '@lumx/react/utils/collection/chunk';
 
 import { buildSlideShowGroupId, SlideshowItemGroup } from './SlideshowItemGroup';
 

package/src/components/slideshow/SlideshowControls.tsx

@@ -1,7 +1,6 @@
 import React, { RefObject, useCallback, useMemo } from 'react';
 
 import classNames from 'classnames';
-import range from 'lodash/range';
 
 import { mdiChevronLeft, mdiChevronRight, mdiPlayCircleOutline, mdiPauseCircleOutline } from '@lumx/icons';
 import { Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
@@ -16,6 +15,7 @@ import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { useSwipeNavigate } from './useSwipeNavigate';
 import { PAGINATION_ITEM_SIZE, PAGINATION_ITEMS_MAX } from './constants';
 import { usePaginationVisibleRange } from './usePaginationVisibleRange';
+import { range } from '@lumx/react/utils/collection/range';
 
 /**
  * Defines the props of the component.

package/src/components/switch/Switch.tsx

@@ -1,7 +1,6 @@
 import React, { Children, InputHTMLAttributes, SyntheticEvent } from 'react';
 
 import classNames from 'classnames';
-import isEmpty from 'lodash/isEmpty';
 
 import { Alignment, InputHelper, InputLabel, Theme } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
@@ -127,7 +126,7 @@ export const Switch = forwardRef<SwitchProps, HTMLDivElement>((props, ref) => {
                     <InputLabel htmlFor={inputId} theme={theme} className={`${CLASSNAME}__label`}>
                         {children}
                     </InputLabel>
-                    {!isEmpty(helper) && (
+                    {helper && (
                         <InputHelper id={`${inputId}-helper`} theme={theme} className={`${CLASSNAME}__helper`}>
                             {helper}
                         </InputHelper>

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

@@ -6,7 +6,6 @@ import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
 import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
 import { toFlattenProps } from '@lumx/react/stories/utils/toFlattenProps';
 import { withCategory } from '@lumx/react/stories/utils/withCategory';
-import get from 'lodash/get';
 import times from 'lodash/times';
 import React, { useState } from 'react';
 
@@ -63,13 +62,13 @@ export const Default = {
 export const Controlled = {
     render({ theme }: any) {
         const [activeTab, setActiveTab] = useState(1);
-        const changeActiveTabIndex = (evt: any) => setActiveTab(parseInt(get(evt, 'target.value', '0'), 10));
+        const changeActiveTabIndex = (evt: any) => setActiveTab(parseInt(evt.target.value || 0, 10));
 
         const [isLazy, setIsLazy] = useState(true);
-        const changeIsLazy = (evt: any) => setIsLazy(get(evt, 'target.checked'));
+        const changeIsLazy = (evt: any) => setIsLazy(evt.target.checked);
 
         const [shouldActivateOnFocus, setShouldActivateOnFocus] = useState(true);
-        const changeShouldActivateOnFocus = (evt: any) => setShouldActivateOnFocus(get(evt, 'target.checked'));
+        const changeShouldActivateOnFocus = (evt: any) => setShouldActivateOnFocus(evt.target.checked);
 
         return (
             <>

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

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

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

@@ -1,7 +1,6 @@
 import React, { ReactNode, Ref, RefObject, SyntheticEvent, useEffect, useRef, useState } from 'react';
 
 import classNames from 'classnames';
-import get from 'lodash/get';
 
 import { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle } from '@lumx/icons';
 import {
@@ -217,8 +216,8 @@ const renderInputNative: React.FC<InputNativeProps> = (props) => {
         setFocus(false);
     };
 
-    const handleChange = (event: React.ChangeEvent) => {
-        onChange(get(event, 'target.value'), name, event);
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        onChange(event.target.value, name, event);
     };
 
     const Component = multiline ? 'textarea' : 'input';

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

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

package/src/hooks/useClickAway.tsx

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

package/src/hooks/useInterval.tsx

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

package/src/hooks/useKeyboardListNavigation.tsx

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