@lumx/react 3.8.2-alpha.1 → 3.9.0

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;
+}