@lumx/react 3.8.2-alpha.2 → 3.9.0

package/package.json

@@ -6,14 +6,13 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.8.2-alpha.2",
-        "@lumx/icons": "^3.8.2-alpha.2",
+        "@lumx/core": "^3.9.0",
+        "@lumx/icons": "^3.9.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
         "react-is": ">=16.13.0",
-        "react-popper": "^2.2.4",
-        "uid": "^2.0.0"
+        "react-popper": "^2.2.4"
     },
     "devDependencies": {
         "@babel/core": "^7.18.13",
@@ -111,5 +110,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.8.2-alpha.2"
+    "version": "3.9.0"
 }

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

@@ -5,7 +5,7 @@ import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';
 import { AlertDialog, AlertDialogProps } from './AlertDialog';
 
-jest.mock('uid', () => ({ uid: () => 'uid' }));
+jest.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
 
 const CLASSNAME = AlertDialog.className as string;
 

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

@@ -16,9 +16,9 @@ import {
 } from '@lumx/react';
 
 import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons';
-import { uid } from 'uid';
 import { Comp } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { useId } from '@lumx/react/hooks/useId';
 
 export interface AlertDialogProps extends Omit<DialogProps, 'header' | 'footer'> {
     /** Message variant. */
@@ -86,7 +86,8 @@ export const AlertDialog: Comp<AlertDialogProps, HTMLDivElement> = forwardRef((p
     const { color, icon } = CONFIG[kind as Kind] || {};
 
     // Define a unique ID to target title and description for aria attributes.
-    const uniqueId = React.useMemo(() => id || uid(), [id]);
+    const generatedId = useId();
+    const uniqueId = id || generatedId;
     const titleId = `${uniqueId}-title`;
     const descriptionId = `${uniqueId}-description`;
 

package/src/components/checkbox/Checkbox.tsx

@@ -1,13 +1,13 @@
-import React, { forwardRef, InputHTMLAttributes, ReactNode, SyntheticEvent, useMemo } from 'react';
+import React, { forwardRef, InputHTMLAttributes, ReactNode, SyntheticEvent } from 'react';
 
 import classNames from 'classnames';
-import { uid } from 'uid';
 
 import { mdiCheck, mdiMinus } from '@lumx/icons';
 
 import { Icon, InputHelper, InputLabel, Theme } from '@lumx/react';
 import { Comp, 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';
 
 /**
@@ -84,7 +84,8 @@ export const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props,
         ...forwardedProps
     } = props;
     const localInputRef = React.useRef<HTMLInputElement>(null);
-    const inputId = useMemo(() => id || `${CLASSNAME.toLowerCase()}-${uid()}`, [id]);
+    const generatedInputId = useId();
+    const inputId = id || generatedInputId;
 
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         if (onChange) {

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

@@ -12,6 +12,7 @@ import { usePreviousValue } from '@lumx/react/hooks/usePreviousValue';
 import { getYearDisplayName } from '@lumx/react/utils/date/getYearDisplayName';
 import { onEnterPressed } from '@lumx/react/utils/event';
 import { addMonthResetDay } from '@lumx/react/utils/date/addMonthResetDay';
+import { formatDayNumber } from '@lumx/react/utils/date/formatDayNumber';
 import { CLASSNAME } from './constants';
 
 /**
@@ -198,9 +199,7 @@ export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElemen
                                             type="button"
                                             onClick={() => onChange(date)}
                                         >
-                                            <span aria-hidden>
-                                                {date.toLocaleDateString(locale, { day: 'numeric' })}
-                                            </span>
+                                            <span aria-hidden>{formatDayNumber(locale, date)}</span>
                                             <span className="visually-hidden">
                                                 {date.toLocaleDateString(locale, {
                                                     day: 'numeric',

package/src/components/message/Message.tsx

@@ -45,7 +45,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 const CONFIG = {
     [Kind.error]: { color: ColorPalette.red, icon: mdiAlert },
-    [Kind.info]: { color: ColorPalette.dark, icon: mdiInformation },
+    [Kind.info]: { color: ColorPalette.blue, icon: mdiInformation },
     [Kind.success]: { color: ColorPalette.green, icon: mdiCheckCircle },
     [Kind.warning]: { color: ColorPalette.yellow, icon: mdiAlertCircle },
 };

package/src/components/navigation/NavigationSection.tsx

@@ -1,12 +1,13 @@
-import React, { forwardRef, ReactNode, useRef, useState, useMemo, useContext } from 'react';
+import React, { forwardRef, ReactNode, useRef, useState, useContext } from 'react';
 
 import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
 import { Icon, Size, Text, Orientation, Popover, Placement, Theme } from '@lumx/react';
-import uniqueId from 'lodash/uniqueId';
 import classNames from 'classnames';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { HasClassName } from '@lumx/react/utils/type';
 import { ThemeContext } from '@lumx/react/utils/ThemeContext';
+import { useId } from '@lumx/react/hooks/useId';
+
 import { CLASSNAME as ITEM_CLASSNAME } from './NavigationItem';
 import { NavigationContext } from './context';
 
@@ -34,7 +35,7 @@ export const NavigationSection = Object.assign(
         const { children, className, label, icon, ...forwardedProps } = props;
         const [isOpen, setIsOpen] = useState(false);
         const buttonRef = useRef<HTMLButtonElement>(null);
-        const sectionId = useMemo(() => uniqueId('section'), []);
+        const sectionId = useId();
         const { orientation } = useContext(NavigationContext) || {};
         const theme = useContext(ThemeContext);
         const isDropdown = orientation === Orientation.horizontal;

package/src/components/notification/constants.ts

@@ -14,7 +14,7 @@ export const NOTIFICATION_CONFIGURATION = {
         icon: mdiAlert,
     },
     info: {
-        color: 'dark',
+        color: 'blue',
         icon: mdiInformation,
     },
     success: {

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

@@ -1,12 +1,12 @@
-import React, { useMemo, forwardRef, ReactNode, SyntheticEvent, InputHTMLAttributes } from 'react';
+import React, { forwardRef, ReactNode, SyntheticEvent, InputHTMLAttributes } from 'react';
 
 import classNames from 'classnames';
-import { uid } from 'uid';
 
 import { InputHelper, InputLabel, Theme } from '@lumx/react';
 
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { useId } from '@lumx/react/hooks/useId';
 
 /**
  * Defines the props of the component.
@@ -76,7 +76,8 @@ export const RadioButton: Comp<RadioButtonProps, HTMLDivElement> = forwardRef((p
         inputProps,
         ...forwardedProps
     } = props;
-    const inputId = useMemo(() => id || `${CLASSNAME.toLowerCase()}-${uid()}`, [id]);
+    const generatedInputId = useId();
+    const inputId = id || generatedInputId;
 
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         if (onChange) {

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

@@ -14,7 +14,7 @@ import { Select, SelectProps, SelectVariant } from './Select';
 const CLASSNAME = Select.className as string;
 
 jest.mock('@lumx/react/utils/isFocusVisible');
-jest.mock('uid', () => ({ uid: () => 'uid' }));
+jest.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
 
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.

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

@@ -18,7 +18,7 @@ import { SelectVariant } from './constants';
 
 const CLASSNAME = SelectMultiple.className as string;
 
-jest.mock('uid', () => ({ uid: () => 'uid' }));
+jest.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
 
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.

package/src/components/select/WithSelectContext.tsx

@@ -1,6 +1,5 @@
 import classNames from 'classnames';
-import React, { Ref, useCallback, useMemo, useRef } from 'react';
-import { uid } from 'uid';
+import React, { Ref, useCallback, useRef } from 'react';
 
 import { Placement } from '@lumx/react';
 import { Kind, Theme } from '@lumx/react/components';
@@ -11,6 +10,7 @@ import { useListenFocus } from '@lumx/react/hooks/useListenFocus';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
+import { useId } from '@lumx/react/hooks/useId';
 import { CoreSelectProps, SelectVariant } from './constants';
 
 /** The display name of the component. */
@@ -56,7 +56,8 @@ export const WithSelectContext = (
     }: CoreSelectProps,
     ref: Ref<HTMLDivElement>,
 ): React.ReactElement => {
-    const selectId = useMemo(() => id || `select-${uid()}`, [id]);
+    const generatedSelectId = useId();
+    const selectId = id || generatedSelectId;
     const anchorRef = useRef<HTMLElement>(null);
     const selectRef = useRef<HTMLDivElement>(null);
     const dropdownRef = useRef<HTMLDivElement>(null);

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

@@ -10,7 +10,7 @@ const CLASSNAME = SideNavigationItem.className as string;
 
 const toggleButtonProps = { label: 'Toggle' };
 
-jest.mock('uid', () => ({ uid: () => 'id' }));
+jest.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
 
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.

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

@@ -2,7 +2,6 @@ import React, { Children, forwardRef, ReactNode } from 'react';
 
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
-import { uid } from 'uid';
 
 import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
 
@@ -12,6 +11,7 @@ import { Comp, GenericProps, isComponent } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { renderLink } from '@lumx/react/utils/renderLink';
 import { renderButtonOrLink } from '@lumx/react/utils/renderButtonOrLink';
+import { useId } from '@lumx/react/hooks/useId';
 
 /**
  * Defines the props of the component.
@@ -95,7 +95,7 @@ export const SideNavigationItem: Comp<SideNavigationItemProps, HTMLLIElement> =
     const shouldSplitActions = Boolean(onActionClick);
     const showChildren = hasContent && isOpen;
 
-    const contentId = React.useMemo(uid, []);
+    const contentId = useId();
     const ariaProps: any = {};
     if (hasContent) {
         ariaProps['aria-expanded'] = !!showChildren;

package/src/components/slider/Slider.test.tsx

@@ -7,7 +7,7 @@ import { Slider, SliderProps } from './Slider';
 
 const CLASSNAME = Slider.className as string;
 
-jest.mock('uid', () => ({ uid: () => 'uid' }));
+jest.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
 
 const setup = (props: Partial<SliderProps> = {}) => {
     render(<Slider {...(props as any)} />);

package/src/components/slider/Slider.tsx

@@ -9,8 +9,8 @@ import useEventCallback from '@lumx/react/hooks/useEventCallback';
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
-import { uid } from 'uid';
 import { clamp } from '@lumx/react/utils/clamp';
+import { useId } from '@lumx/react/hooks/useId';
 
 /**
  * Defines the props of the component.
@@ -111,7 +111,8 @@ export const Slider: Comp<SliderProps, HTMLDivElement> = forwardRef((props, ref)
         value,
         ...forwardedProps
     } = props;
-    const sliderId = useMemo(() => id || `slider-${uid()}`, [id]);
+    const generatedId = useId();
+    const sliderId = id || generatedId;
     const sliderLabelId = useMemo(() => `label-${sliderId}`, [sliderId]);
     const sliderRef = useRef<HTMLDivElement>(null);
 

package/src/components/switch/Switch.test.tsx

@@ -24,7 +24,7 @@ const setup = (propsOverride: SetupProps = {}) => {
     return { switchWrapper, input, helper, label, props };
 };
 
-jest.mock('uid', () => ({ uid: () => 'uid' }));
+jest.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
 
 describe(`<${Switch.displayName}>`, () => {
     describe('Props', () => {

package/src/components/switch/Switch.tsx

@@ -1,7 +1,6 @@
-import React, { Children, forwardRef, InputHTMLAttributes, SyntheticEvent, useMemo } from 'react';
+import React, { Children, forwardRef, InputHTMLAttributes, SyntheticEvent } from 'react';
 
 import classNames from 'classnames';
-import { uid } from 'uid';
 
 import isEmpty from 'lodash/isEmpty';
 
@@ -9,6 +8,7 @@ import { Alignment, InputHelper, InputLabel, Theme } from '@lumx/react';
 
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { useId } from '@lumx/react/hooks/useId';
 
 /**
  * Defines the props of the component.
@@ -75,7 +75,8 @@ export const Switch: Comp<SwitchProps, HTMLDivElement> = forwardRef((props, ref)
         inputProps = {},
         ...forwardedProps
     } = props;
-    const inputId = useMemo(() => id || `switch-${uid()}`, [id]);
+    const generatedInputId = useId();
+    const inputId = id || generatedInputId;
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         if (onChange) {
             onChange(!isChecked, value, name, event);

package/src/components/tabs/state.ts

@@ -1,5 +1,5 @@
 import { Dispatch, createContext, useCallback, useContext, useEffect, useMemo } from 'react';
-import { uid } from 'uid';
+import { useId } from '@lumx/react/hooks/useId';
 
 type TabType = 'tab' | 'tabPanel';
 
@@ -76,11 +76,9 @@ export const useTabProviderContext = (type: TabType, originalId?: string): undef
     const [state, dispatch] = context;
 
     // Current tab or tab panel id.
-    const id = useMemo(
-        () => originalId || `${type}-${uid()}`,
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [],
-    );
+    const generatedId = useId();
+    const id = originalId || generatedId;
+
     useEffect(
         () => {
             // On mount: register tab or tab panel id.

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

@@ -1,18 +1,7 @@
-import React, {
-    forwardRef,
-    ReactNode,
-    Ref,
-    RefObject,
-    SyntheticEvent,
-    useEffect,
-    useMemo,
-    useRef,
-    useState,
-} from 'react';
+import React, { forwardRef, ReactNode, Ref, RefObject, SyntheticEvent, useEffect, useRef, useState } from 'react';
 
 import classNames from 'classnames';
 import get from 'lodash/get';
-import { uid } from 'uid';
 
 import { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle } from '@lumx/icons';
 import {
@@ -30,6 +19,7 @@ import {
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useId } from '@lumx/react/hooks/useId';
 
 /**
  * Defines the props of the component.
@@ -296,7 +286,8 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
         afterElement,
         ...forwardedProps
     } = props;
-    const textFieldId = useMemo(() => id || `text-field-${uid()}`, [id]);
+    const generatedTextFieldId = useId();
+    const textFieldId = id || generatedTextFieldId;
     /** Keep a clean local input ref to manage focus */
     const localInputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);
     /** Merge prop input ref and local input ref */
@@ -307,8 +298,8 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
      * we want to first use the most important one, which is the errorId. That way, screen readers will read first
      * the error and then the helper
      */
-    const helperId = helper ? `text-field-helper-${uid()}` : undefined;
-    const errorId = error ? `text-field-error-${uid()}` : undefined;
+    const helperId = helper ? `text-field-helper-${generatedTextFieldId}` : undefined;
+    const errorId = error ? `text-field-error-${generatedTextFieldId}` : undefined;
     const describedByIds = [errorId, helperId, forwardedProps['aria-describedby']].filter(Boolean);
     const describedById = describedByIds.length === 0 ? undefined : describedByIds.join(' ');
 

package/src/components/tooltip/Tooltip.test.tsx

@@ -12,7 +12,7 @@ import { Tooltip, TooltipProps } from './Tooltip';
 const CLASSNAME = Tooltip.className as string;
 
 jest.mock('@lumx/react/utils/isFocusVisible');
-jest.mock('uid', () => ({ uid: () => 'uid' }));
+jest.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
 // Skip delays
 jest.mock('@lumx/react/constants', () => ({
     ...jest.requireActual('@lumx/react/constants'),

package/src/components/tooltip/Tooltip.tsx

@@ -1,8 +1,7 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import React, { forwardRef, ReactNode, useMemo, useState } from 'react';
+import React, { forwardRef, ReactNode, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
-import { uid } from 'uid';
 
 import classNames from 'classnames';
 
@@ -11,8 +10,9 @@ import { Comp, GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { Placement } from '@lumx/react/components/popover';
-
 import { TooltipContextProvider } from '@lumx/react/components/tooltip/context';
+import { useId } from '@lumx/react/hooks/useId';
+
 import { useInjectTooltipRef } from './useInjectTooltipRef';
 import { useTooltipOpen } from './useTooltipOpen';
 
@@ -71,7 +71,7 @@ export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, re
         return <TooltipContextProvider>{children}</TooltipContextProvider>;
     }
 
-    const id = useMemo(() => `tooltip-${uid()}`, []);
+    const id = useId();
 
     const [popperElement, setPopperElement] = useState<null | HTMLElement>(null);
     const [anchorElement, setAnchorElement] = useState<null | HTMLElement>(null);

package/src/components/uploader/Uploader.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef, MouseEventHandler } from 'react';
 import classNames from 'classnames';
-import uniqueId from 'lodash/uniqueId';
 
 import { AspectRatio, Icon, Size, Theme } from '@lumx/react';
 import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
+import { useId } from '@lumx/react/hooks/useId';
 
 /**
  * Uploader variants.
@@ -81,7 +81,8 @@ export const Uploader: Comp<UploaderProps> = forwardRef((props, ref) => {
     // Adjust to square aspect ratio when using circle variants.
     const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio.square : aspectRatio;
 
-    const inputId = React.useMemo(() => fileInputProps?.id || uniqueId('uploader-input-'), [fileInputProps?.id]);
+    const generatedInputId = useId();
+    const inputId = fileInputProps?.id || generatedInputId;
     const [isDragHovering, unsetDragHovering, setDragHovering] = useBooleanState(false);
     const wrapper = fileInputProps
         ? { Component: 'label' as const, props: { htmlFor: inputId } as const }

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

@@ -9,7 +9,7 @@ import { withCombinations } from '@lumx/react/stories/decorators/withCombination
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
 import { UserBlock } from './UserBlock';
 
-const sizes = [Size.s, Size.m, Size.l];
+const sizes = [Size.xs, Size.s, Size.m, Size.l];
 
 export default {
     title: 'LumX components/user-block/UserBlock',

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

@@ -12,7 +12,7 @@ import { AvatarProps } from '../avatar/Avatar';
 /**
  * User block sizes.
  */
-export type UserBlockSize = Extract<Size, 's' | 'm' | 'l'>;
+export type UserBlockSize = Extract<Size, 'xs' | 's' | 'm' | 'l'>;
 
 /**
  * Defines the props of the component.
@@ -128,7 +128,7 @@ export const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props
         return <NameComponent {...nProps}>{name}</NameComponent>;
     }, [avatarProps, isClickable, linkAs, linkProps, name, nameProps, onClick]);
 
-    const fieldsBlock: ReactNode = fields && componentSize !== Size.s && (
+    const fieldsBlock: ReactNode = fields && componentSize !== Size.s && componentSize !== Size.xs && (
         <div className={`${CLASSNAME}__fields`}>
             {fields.map((field: string, idx: number) => (
                 <span key={idx} className={`${CLASSNAME}__field`}>

package/src/hooks/useId.test.tsx

@@ -0,0 +1,23 @@
+import { useId } from '@lumx/react/hooks/useId';
+import { render } from '@testing-library/react';
+import React from 'react';
+
+function setup() {
+    const Component = (): any => useId();
+    const result = render(<Component />);
+    const rerender = () => result.rerender(<Component />);
+    return { ...result, rerender };
+}
+
+describe(useId, () => {
+    it('should render a unique id stable after re-renders', () => {
+        const result = setup();
+        // Id generated
+        const initialId = result.container.textContent;
+        expect(initialId).toMatch(/:lumx\d+:/);
+
+        // Id is stable after re-render
+        result.rerender();
+        expect(result.container.textContent).toEqual(initialId);
+    });
+});

package/src/hooks/useId.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+
+let i = 0;
+
+/**
+ * Generate a unique id (for use in a11y or other id based DOM linking).
+ *
+ * (Tries to emulate React 18 useId hook, to remove once we upgrade React)
+ */
+export function useId() {
+    return React.useMemo(() => {
+        i += 1;
+        return `:lumx${i}:`;
+    }, []);
+}

package/src/hooks/useSlideshowControls.ts

@@ -1,8 +1,8 @@
-import { useState, useCallback, useEffect, useMemo } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 
 import { useInterval } from '@lumx/react/hooks/useInterval';
-import uniqueId from 'lodash/uniqueId';
 import { AUTOPLAY_DEFAULT_INTERVAL } from '@lumx/react/components/slideshow/constants';
+import { useId } from '@lumx/react/hooks/useId';
 
 export interface UseSlideshowControlsOptions {
     /** default active index to be displayed */
@@ -193,8 +193,11 @@ export const useSlideshowControls = ({
         onChange(currentIndex);
     }, [currentIndex, onChange]);
 
-    const slideshowId = useMemo(() => id || uniqueId('slideshow'), [id]);
-    const slideshowSlidesId = useMemo(() => slidesId || uniqueId('slideshow-slides'), [slidesId]);
+    const generatedSlideshowId = useId();
+    const slideshowId = id || generatedSlideshowId;
+
+    const generatedSlidesId = useId();
+    const slideshowSlidesId = slidesId || generatedSlidesId;
 
     const toggleAutoPlay = () => {
         if (isSlideshowAutoPlaying) {

package/src/stories/generated/UserBlock/Demos.stories.tsx

@@ -7,4 +7,5 @@ export { App as Extended } from './extended';
 export { App as SizeL } from './size-l';
 export { App as SizeM } from './size-m';
 export { App as SizeS } from './size-s';
+export { App as SizeXs } from './size-xs';
 export { App as Vertical } from './vertical';

package/src/utils/date/formatDayNumber.test.ts

@@ -0,0 +1,12 @@
+import { formatDayNumber } from '@lumx/react/utils/date/formatDayNumber';
+
+describe(formatDayNumber, () => {
+    it('should format ', () => {
+        // Standard numerical formatting.
+        expect(formatDayNumber('en', new Date('2024-05-11'))).toEqual('11');
+        // Keep only the numerical part (if any). Raw formatted day number here is '11日'.
+        expect(formatDayNumber('ja', new Date('2024-05-11'))).toEqual('11');
+        // Else Keep the non-numerical formatting
+        expect(formatDayNumber('ar-eg', new Date('2024-05-11'))).toEqual('١١');
+    });
+});

package/src/utils/date/formatDayNumber.ts

@@ -0,0 +1,5 @@
+export function formatDayNumber(locale: string, date: Date): string {
+    const formattedDate = date.toLocaleDateString(locale, { day: 'numeric' });
+    if (formattedDate.match(/\d/)) return formattedDate.replace(/\D*(\d+)\D*/g, '$1');
+    return formattedDate;
+}