@lumx/react 3.9.4-alpha.1 → 3.9.4-alpha.2

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.9.4-alpha.1",
-        "@lumx/icons": "^3.9.4-alpha.1",
+        "@lumx/core": "^3.9.4-alpha.2",
+        "@lumx/icons": "^3.9.4-alpha.2",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -111,5 +111,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.9.4-alpha.1"
+    "version": "3.9.4-alpha.2"
 }

package/src/components/slideshow/Slides.tsx

@@ -3,10 +3,11 @@ import chunk from 'lodash/chunk';
 
 import classNames from 'classnames';
 
-import { FULL_WIDTH_PERCENT } from '@lumx/react/components/slideshow/constants';
+import { FULL_WIDTH_PERCENT, NEXT_SLIDE_EVENT } from '@lumx/react/components/slideshow/constants';
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useKeyNavigate } from '@lumx/react/components/slideshow/useKeyNavigate';
 import { buildSlideShowGroupId, SlideshowItemGroup } from './SlideshowItemGroup';
 
 export interface SlidesProps extends GenericProps, HasTheme {
@@ -84,6 +85,11 @@ export const Slides: Comp<SlidesProps, HTMLDivElement> = forwardRef((props, ref)
 
     const slidesRef = React.useRef<HTMLDivElement>(null);
 
+    const slide = slidesRef.current;
+    const onNextSlide = React.useCallback(() => slide?.dispatchEvent(new CustomEvent(NEXT_SLIDE_EVENT)), [slide]);
+    const onPrevSlide = React.useCallback(() => slide?.dispatchEvent(new CustomEvent(NEXT_SLIDE_EVENT)), [slide]);
+    useKeyNavigate(slide, onNextSlide, onPrevSlide);
+
     return (
         <section
             id={id}
@@ -107,7 +113,7 @@ export const Slides: Comp<SlidesProps, HTMLDivElement> = forwardRef((props, ref)
                         <SlideshowItemGroup
                             key={index}
                             id={slidesId && buildSlideShowGroupId(slidesId, index)}
-                            label={slideGroupLabel ? slideGroupLabel(index + 1, groups.length) : undefined}
+                            label={slideGroupLabel?.(index + 1, groups.length)}
                             isDisplayed={index >= startIndexVisible && index < endIndexVisible}
                             slidesRef={slidesRef}
                         >

package/src/components/slideshow/constants.ts

@@ -22,3 +22,7 @@ export const PAGINATION_ITEMS_MAX = 5;
  * Size of a pagination item. Used to translate wrapper.
  */
 export const PAGINATION_ITEM_SIZE = 12;
+
+
+export const NEXT_SLIDE_EVENT = 'lumx-next-slide-event';
+export const PREV_SLIDE_EVENT = 'lumx-prev-slide-event';

package/src/components/slideshow/useSlideshowControls.ts

@@ -3,7 +3,7 @@ import { clamp } from '@lumx/react';
 import { useInterval } from '@lumx/react/hooks/useInterval';
 import { useId } from '@lumx/react/hooks/useId';
 
-import { AUTOPLAY_DEFAULT_INTERVAL } from './constants';
+import { AUTOPLAY_DEFAULT_INTERVAL, NEXT_SLIDE_EVENT, PREV_SLIDE_EVENT } from './constants';
 
 export interface UseSlideshowControlsOptions {
     /** default active index to be displayed */
@@ -179,6 +179,18 @@ export const useSlideshowControls = ({
         [goTo, stopAutoPlay],
     );
 
+    // Listen to custom next/prev slide events
+    useEffect(() => {
+        if (!element) return undefined;
+
+        element.addEventListener(NEXT_SLIDE_EVENT, onNextClick);
+        element.addEventListener(PREV_SLIDE_EVENT, onPreviousClick);
+        return () => {
+            element.removeEventListener(NEXT_SLIDE_EVENT, onNextClick);
+            element.removeEventListener(PREV_SLIDE_EVENT, onPreviousClick);
+        };
+    }, [element, onNextClick, onPreviousClick]);
+
     // If the activeIndex props changes, update the current slide
     useEffect(() => {
         setActiveIndex(activeIndex as number);