@lumx/react 2.2.6 → 2.2.9-alpha-exported-hooks1

package/index.js

@@ -0,0 +1,90 @@
+import './esm/_internal/_rolluppluginbabelhelpers.53.js';
+export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, Size, Theme, Typography, TypographyInterface, TypographyTitleCustom } from './esm/_internal/components.js';
+import 'react';
+import './esm/_internal/getrootclassname.54.js';
+export { I as Icon } from './esm/_internal/icon.21.js';
+import './esm/_internal/index.55.js';
+import 'lodash/isBoolean';
+import 'lodash/isEmpty';
+import 'lodash/kebabCase';
+import 'lodash/noop';
+import './esm/_internal/constants.59.js';
+import 'lodash/concat';
+import 'lodash/dropRight';
+import 'lodash/last';
+import 'lodash/partition';
+import 'lodash/reduce';
+import './esm/_internal/partitionmulti.62.js';
+import 'lodash/get';
+import './esm/_internal/type.64.js';
+export { A as AlertDialog } from './esm/_internal/alertdialog.1.js';
+export { P as Placement, a as Popover } from './esm/_internal/popover.33.js';
+import './esm/_internal/mergerefs.56.js';
+export { A as Autocomplete, a as AutocompleteMultiple } from './esm/_internal/autocompletemultiple.2.js';
+export { A as Avatar } from './esm/_internal/avatar.3.js';
+export { B as Badge } from './esm/_internal/badge.4.js';
+import './esm/_internal/renderlink.65.js';
+import './esm/_internal/buttonroot.57.js';
+export { a as Button, B as ButtonEmphasis } from './esm/_internal/button.5.js';
+export { I as IconButton } from './esm/_internal/iconbutton.6.js';
+export { B as ButtonGroup } from './esm/_internal/buttongroup.7.js';
+export { C as Checkbox } from './esm/_internal/checkbox.8.js';
+import 'lodash/isFunction';
+export { C as Chip } from './esm/_internal/chip.9.js';
+export { C as ChipGroup } from './esm/_internal/chipgroup.10.js';
+export { a as CommentBlock, C as CommentBlockVariant } from './esm/_internal/commentblock.11.js';
+import 'moment';
+export { D as DatePicker, a as DatePickerControlled, b as DatePickerField } from './esm/_internal/datepickerfield.12.js';
+import 'lodash/range';
+import 'moment-range';
+import './esm/_internal/usefocustrap.58.js';
+import 'react-dom';
+import './esm/_internal/clickawayprovider.60.js';
+export { D as Dialog } from './esm/_internal/dialog.13.js';
+import 'lodash/pull';
+import './esm/_internal/usedelayedvisibility.63.js';
+import './esm/_internal/usedisablebodyscroll.61.js';
+export { D as DEFAULT_PROPS, a as Divider } from './esm/_internal/divider.14.js';
+export { D as DragHandle } from './esm/_internal/draghandle.15.js';
+export { L as List, a as ListItem, i as isClickable } from './esm/_internal/list.28.js';
+export { D as Dropdown } from './esm/_internal/dropdown.16.js';
+export { E as ExpansionPanel } from './esm/_internal/expansionpanel.17.js';
+export { F as Flag } from './esm/_internal/flag.18.js';
+import 'lodash/castArray';
+export { F as FlexBox } from './esm/_internal/flexbox.19.js';
+export { G as Grid, a as GridItem } from './esm/_internal/griditem.20.js';
+import 'lodash/isObject';
+export { a as ImageBlock, I as ImageBlockCaptionPosition } from './esm/_internal/imageblock.22.js';
+export { I as InputHelper } from './esm/_internal/inputhelper.23.js';
+export { I as InputLabel } from './esm/_internal/inputlabel.24.js';
+export { L as Lightbox } from './esm/_internal/lightbox.25.js';
+export { L as Link } from './esm/_internal/link.26.js';
+export { L as LinkPreview } from './esm/_internal/linkpreview.27.js';
+export { L as ListDivider, a as ListSubheader } from './esm/_internal/listsubheader.29.js';
+export { M as Message } from './esm/_internal/message.30.js';
+import 'lodash/take';
+export { M as Mosaic } from './esm/_internal/mosaic.31.js';
+export { N as Notification } from './esm/_internal/notification.32.js';
+export { P as PostBlock } from './esm/_internal/postblock.34.js';
+export { a as Progress, P as ProgressVariant } from './esm/_internal/progress.35.js';
+import './esm/_internal/userovingtabindex.66.js';
+export { a as ProgressTracker, P as ProgressTrackerProvider, b as ProgressTrackerStep, c as ProgressTrackerStepPanel } from './esm/_internal/progresstrackersteppanel.36.js';
+export { R as RadioButton, a as RadioGroup } from './esm/_internal/radiogroup.37.js';
+export { a as Select, c as SelectMultiple, b as SelectMultipleField, S as SelectVariant } from './esm/_internal/selectmultiple.38.js';
+export { S as SideNavigation, a as SideNavigationItem } from './esm/_internal/sidenavigationitem.39.js';
+export { S as SkeletonCircle, b as SkeletonRectangle, a as SkeletonRectangleVariant, c as SkeletonTypography } from './esm/_internal/skeletontypography.40.js';
+export { S as Slider, c as clamp } from './esm/_internal/slider.41.js';
+export { S as Slideshow, b as SlideshowControls, a as SlideshowItem } from './esm/_internal/slideshowcontrols.42.js';
+import 'lodash/uniqueId';
+import './hooks/useFocusWithin.js';
+export { S as Switch } from './esm/_internal/switch.43.js';
+export { T as Table, a as TableBody, d as TableCell, c as TableCellVariant, e as TableHeader, f as TableRow, b as ThOrder } from './esm/_internal/tablerow.44.js';
+export { c as Tab, b as TabList, a as TabListLayout, d as TabPanel, T as TabProvider } from './esm/_internal/tabpanel.45.js';
+export { T as TextField } from './esm/_internal/textfield.46.js';
+export { T as Thumbnail } from './esm/_internal/thumbnail.47.js';
+export { T as ThumbnailAspectRatio, a as ThumbnailVariant } from './esm/_internal/types.48.js';
+export { T as Toolbar } from './esm/_internal/toolbar.49.js';
+export { T as Tooltip } from './esm/_internal/tooltip.50.js';
+export { a as Uploader, U as UploaderVariant } from './esm/_internal/uploader.51.js';
+export { U as UserBlock } from './esm/_internal/userblock.52.js';
+//# sourceMappingURL=index.js.map

package/{esm/index.js.map → index.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^2.2.6",
-        "@lumx/icons": "^2.2.6",
+        "@lumx/core": "^2.2.9-alpha-exported-hooks1",
+        "@lumx/icons": "^2.2.9-alpha-exported-hooks1",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -42,7 +42,6 @@
         "babel-loader": "^8.0.6",
         "chromatic": "^6.0.6",
         "core-js": "^3.6.4",
-        "dts-bundle-generator": "^5.5.0",
         "enzyme": "^3.11.0",
         "enzyme-adapter-react-16": "^1.15.2",
         "enzyme-to-json": "^3.5.0",
@@ -67,6 +66,7 @@
         "rollup-plugin-babel": "^4.4.0",
         "rollup-plugin-cleaner": "^1.0.0",
         "rollup-plugin-copy": "^3.3.0",
+        "rollup-plugin-dts": "^4.1.0",
         "rollup-plugin-peer-deps-external": "^2.2.4",
         "rollup-plugin-ts-paths-resolve": "^1.3.0",
         "rollup-plugin-typescript-paths": "^1.2.2",
@@ -98,9 +98,9 @@
         "React"
     ],
     "license": "MIT",
-    "module": "esm/index.js",
-    "main": "esm/index.js",
-    "types": "types.d.ts",
+    "module": "index.js",
+    "main": "index.js",
+    "types": "index.d.ts",
     "name": "@lumx/react",
     "publishConfig": {
         "directory": "dist"
@@ -110,8 +110,7 @@
         "url": "git+https://github.com/lumapps/design-system.git"
     },
     "scripts": {
-        "build": "rollup -c && yarn generate:types",
-        "generate:types": "dts-bundle-generator --no-check --external-types=react --external-imports=moment -o dist/types.d.ts src/index.ts",
+        "build": "rollup -c",
         "prepare": "install-peers || exit 0",
         "prepublishOnly": "yarn build",
         "test": "jest --config jest/index.js --coverage --notify --passWithNoTests --detectOpenHandles --runInBand",
@@ -120,6 +119,6 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "2.2.6",
-    "gitHead": "fc0a2a32102883668d8a1427154ae4d5f2b4cfda"
+    "version": "2.2.9-alpha-exported-hooks1",
+    "gitHead": "1833b1ecc3e80672a1a6bd5e60f424b1a8685e81"
 }

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

@@ -18,6 +18,7 @@ const setup = ({ ...propsOverride }: Partial<AlertDialogProps> = {}, shallowRend
     const props: AlertDialogProps = {
         title: 'Alert',
         description: 'Deserunt et sunt qui consequat sint sit.',
+        // eslint-disable-next-line no-alert
         confirmProps: { onClick: () => alert('confirm'), label: 'OK' },
         ...propsOverride,
     };

package/src/components/autocomplete/AutocompleteMultiple.tsx

@@ -1,5 +1,5 @@
 import { mdiClose } from '@lumx/icons';
-import { Autocomplete, AutocompleteProps, Chip, ChipGroup, HorizontalAlignment, Icon, Size } from '@lumx/react';
+import { Autocomplete, AutocompleteProps, Chip, HorizontalAlignment, Icon, Size } from '@lumx/react';
 
 import { Comp, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 
@@ -68,6 +68,8 @@ export const AutocompleteMultiple: Comp<AutocompleteMultipleProps, HTMLDivElemen
     const {
         anchorToInput,
         children,
+        // `chipsAlignment` needs to be here to remove it from `forwardedProps`.
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         chipsAlignment,
         className,
         closeOnClickAway,

package/src/components/button/__snapshots__/IconButton.test.tsx.snap

@@ -2,7 +2,6 @@
 
 exports[`<IconButton> Props should forward any CSS class 1`] = `
 <Tooltip
-  delay={500}
   placement="bottom"
 >
   <ButtonRoot
@@ -19,7 +18,6 @@ exports[`<IconButton> Props should forward any CSS class 1`] = `
 
 exports[`<IconButton> Props should use default props 1`] = `
 <Tooltip
-  delay={500}
   placement="bottom"
 >
   <ButtonRoot
@@ -35,7 +33,6 @@ exports[`<IconButton> Props should use default props 1`] = `
 
 exports[`<IconButton> Snapshots and structure should render icon button 1`] = `
 <Tooltip
-  delay={500}
   placement="bottom"
 >
   <ButtonRoot
@@ -51,7 +48,6 @@ exports[`<IconButton> Snapshots and structure should render icon button 1`] = `
 
 exports[`<IconButton> Snapshots and structure should render icon button with an image 1`] = `
 <Tooltip
-  delay={500}
   placement="bottom"
 >
   <ButtonRoot
@@ -70,7 +66,6 @@ exports[`<IconButton> Snapshots and structure should render icon button with an
 
 exports[`<IconButton> Snapshots and structure should render icon button with an image if both props are set 1`] = `
 <Tooltip
-  delay={500}
   placement="bottom"
 >
   <ButtonRoot

package/src/components/icon/Icon.tsx

@@ -27,6 +27,8 @@ export interface IconProps extends GenericProps {
     size?: IconSizes;
     /** Theme adapting the component to light or dark background. */
     theme?: Theme;
+    /** Sets an alternative text on the svg. Will set an `img` role to the svg. */
+    alt?: string;
 }
 
 /**
@@ -52,7 +54,7 @@ const DEFAULT_PROPS: Partial<IconProps> = {};
  * @return React element.
  */
 export const Icon: Comp<IconProps, HTMLElement> = forwardRef((props, ref) => {
-    const { className, color, colorVariant, hasShape, icon, size, theme, ...forwardedProps } = props;
+    const { className, color, colorVariant, hasShape, icon, size, theme, alt, ...forwardedProps } = props;
 
     let iconColor;
     let iconColorVariant;
@@ -110,7 +112,9 @@ export const Icon: Comp<IconProps, HTMLElement> = forwardRef((props, ref) => {
             )}
         >
             <svg
-                aria-hidden="true"
+                aria-hidden={alt ? undefined : 'true'}
+                role={alt ? 'img' : undefined}
+                aria-label={alt}
                 height="1em"
                 preserveAspectRatio="xMidYMid meet"
                 style={{ verticalAlign: '-0.125em' }}

package/src/components/image-block/ImageBlock.stories.tsx

@@ -2,7 +2,6 @@ import { LANDSCAPE_IMAGES, landscapeImageKnob } from '@lumx/react/stories/knobs/
 import React from 'react';
 
 import { Alignment, AspectRatio, Chip, ChipGroup, ImageBlock, Size } from '@lumx/react';
-import { htmlDecode } from '@lumx/react/utils/htmlDecode';
 import { boolean, select, text } from '@storybook/addon-knobs';
 import { enumKnob } from '@lumx/react/stories/knobs/enumKnob';
 import { focusKnob } from '@lumx/react/stories/knobs/focusKnob';
@@ -36,7 +35,7 @@ export const DefaultImageBlock = ({ theme }: any) => {
         <ImageBlock
             alt={alt}
             description={description}
-            image={htmlDecode(imageUrl)}
+            image={imageUrl}
             size={size}
             tags={tags}
             title={title}

package/src/components/lightbox/Lightbox.stories.tsx

@@ -29,6 +29,7 @@ const RowItem: React.FC<RowItemProps> = ({ image }) => {
         <>
             <Toolbar
                 label={
+                    // eslint-disable-next-line jsx-a11y/anchor-is-valid
                     <Link ref={linkRef} typography={Typography.subtitle1} onClick={() => setOpen(true)}>
                         {name}
                     </Link>

package/src/components/lightbox/Lightbox.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, RefObject, useRef } from 'react';
+import React, { forwardRef, RefObject, useRef, useEffect } from 'react';
 
 import classNames from 'classnames';
 import { createPortal } from 'react-dom';
@@ -89,9 +89,11 @@ export const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props,
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useFocusTrap(wrapperRef.current, childrenRef.current?.firstChild);
 
-    const previousOpen = React.useRef(isOpen);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const previousOpen = useRef(isOpen);
 
-    React.useEffect(() => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
         if (isOpen !== previousOpen.current) {
             previousOpen.current = isOpen;
 

package/src/components/notification/Notification.tsx

@@ -91,6 +91,7 @@ export const Notification: Comp<NotificationProps, HTMLDivElement> = forwardRef(
 
     return type && isVisible
         ? createPortal(
+              // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
               <div
                   ref={ref}
                   role="alert"

package/src/components/select/SelectMultiple.tsx

@@ -6,7 +6,6 @@ import { mdiAlertCircle, mdiCheckCircle, mdiClose, mdiCloseCircle, mdiMenuDown }
 
 import { Size } from '@lumx/react/components';
 import { Chip } from '@lumx/react/components/chip/Chip';
-import { ChipGroup } from '@lumx/react/components/chip/ChipGroup';
 import { Icon } from '@lumx/react/components/icon/Icon';
 import { InputLabel } from '@lumx/react/components/input-label/InputLabel';
 

package/src/components/slideshow/Slideshow.stories.tsx

@@ -29,7 +29,7 @@ export const Simple = ({ theme }: any) => {
             {images.map(({ image, alt }, index) => (
                 <SlideshowItem key={`${image}-${index}`}>
                     <ImageBlock
-                        thumbnailProps={{ aspectRatio: AspectRatio.horizontal }}
+                        thumbnailProps={{ aspectRatio: AspectRatio.horizontal, loading: 'eager' }}
                         image={image}
                         alt={alt}
                         theme={theme}

package/src/components/slideshow/Slideshow.tsx

@@ -1,11 +1,10 @@
-import React, { CSSProperties, forwardRef, useCallback, useEffect, useState } from 'react';
+import React, { CSSProperties, forwardRef } from 'react';
 
 import classNames from 'classnames';
 
 import { SlideshowControls, SlideshowControlsProps, Theme } from '@lumx/react';
-
-import { AUTOPLAY_DEFAULT_INTERVAL, FULL_WIDTH_PERCENT } from '@lumx/react/components/slideshow/constants';
-import { useInterval } from '@lumx/react/hooks/useInterval';
+import { DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';
+import { FULL_WIDTH_PERCENT } from '@lumx/react/components/slideshow/constants';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
@@ -39,6 +38,10 @@ export interface SlideshowProps extends GenericProps {
     theme?: Theme;
     /** Callback when slide changes */
     onChange?(index: number): void;
+    /** slideshow HTML id attribute */
+    id?: string;
+    /** slides wrapper HTML id attribute */
+    slidesId?: string;
 }
 
 /**
@@ -55,9 +58,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * Component default props.
  */
 const DEFAULT_PROPS: Partial<SlideshowProps> = {
-    activeIndex: 0,
-    groupBy: 1,
-    interval: AUTOPLAY_DEFAULT_INTERVAL,
+    ...DEFAULT_OPTIONS,
     theme: Theme.light,
 };
 
@@ -80,122 +81,76 @@ export const Slideshow: Comp<SlideshowProps, HTMLDivElement> = forwardRef((props
         onChange,
         slideshowControlsProps,
         theme,
+        id,
+        slidesId,
         ...forwardedProps
     } = props;
-    const [currentIndex, setCurrentIndex] = useState(activeIndex as number);
-    // Use state instead of a ref to make the slideshow controls update directly when the element is set.
-    const [element, setElement] = useState<HTMLDivElement>();
-
     // Number of slideshow items.
     const itemsCount = React.Children.count(children);
-    // Number of slides when using groupBy prop.
-    const slidesCount = Math.ceil(itemsCount / Math.min(groupBy as number, itemsCount));
-    // Inline style of wrapper element.
-    const wrapperStyle: CSSProperties = { transform: `translateX(-${FULL_WIDTH_PERCENT * currentIndex}%)` };
-
-    // Change current index to display next slide.
-    const goToNextSlide = useCallback(
-        (loopback = true) => {
-            setCurrentIndex((index) => {
-                if (loopback && index === slidesCount - 1) {
-                    // Loopback to the start.
-                    return 0;
-                }
-                if (index < slidesCount - 1) {
-                    // Next slide.
-                    return index + 1;
-                }
-                return index;
-            });
-        },
-        [slidesCount, setCurrentIndex],
-    );
-
-    // Change current index to display previous slide.
-    const goToPreviousSlide = useCallback(
-        (loopback = true) => {
-            setCurrentIndex((index) => {
-                if (loopback && index === 0) {
-                    // Loopback to the end.
-                    return slidesCount - 1;
-                }
-                if (index > 0) {
-                    // Previous slide.
-                    return index - 1;
-                }
-                return index;
-            });
-        },
-        [slidesCount, setCurrentIndex],
-    );
-
-    // Auto play
-    const [isAutoPlaying, setIsAutoPlaying] = useState(Boolean(autoPlay));
-    // Start
-    useInterval(goToNextSlide, isAutoPlaying && slidesCount > 1 ? (interval as number) : null);
-
-    // Reset current index if it become invalid.
-    useEffect(() => {
-        if (currentIndex > slidesCount - 1) {
-            setCurrentIndex(DEFAULT_PROPS.activeIndex as number);
-        }
-    }, [currentIndex, slidesCount]);
-
-    // Handle click on a bullet to go to a specific slide.
-    const handleControlGotToSlide = useCallback(
-        (index: number) => {
-            setIsAutoPlaying(false);
-
-            if (index >= 0 && index < slidesCount) {
-                setCurrentIndex(index);
-            }
-        },
-        [slidesCount, setCurrentIndex],
-    );
 
-    // Handle click or keyboard event to go to next slide.
-    const handleControlNextSlide = useCallback(
-        (loopback = true) => {
-            setIsAutoPlaying(false);
-            goToNextSlide(loopback);
-        },
-        [goToNextSlide],
-    );
-
-    // Handle click or keyboard event to go to previous slide.
-    const handleControlPreviousSlide = useCallback(
-        (loopback = true) => {
-            setIsAutoPlaying(false);
-            goToPreviousSlide(loopback);
-        },
-        [goToPreviousSlide],
-    );
-
-    // If the activeIndex props changes, update the current slide
-    useEffect(() => {
-        setCurrentIndex(activeIndex as number);
-    }, [activeIndex]);
+    const {
+        activeIndex: currentIndex,
+        slideshowId,
+        setSlideshow,
+        isAutoPlaying,
+        slideshowSlidesId,
+        setIsAutoPlaying,
+        startIndexVisible,
+        endIndexVisible,
+        slidesCount,
+        onNextClick,
+        onPaginationClick,
+        onPreviousClick,
+        slideshow,
+    } = SlideshowControls.useSlideshowControls({
+        activeIndex,
+        defaultActiveIndex: DEFAULT_PROPS.activeIndex as number,
+        autoPlay: Boolean(autoPlay),
+        itemsCount,
+        groupBy,
+        id,
+        interval,
+        onChange,
+        slidesId,
+    });
 
-    // If the slide changes, with autoplay for example, trigger "onChange"
-    useEffect(() => {
-        if (!onChange) return;
-        onChange(currentIndex);
-    }, [currentIndex, onChange]);
+    // Inline style of wrapper element.
+    const wrapperStyle: CSSProperties = { transform: `translateX(-${FULL_WIDTH_PERCENT * currentIndex}%)` };
 
     /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
     return (
-        <div
-            ref={mergeRefs(ref, setElement)}
+        <section
+            id={slideshowId}
+            ref={mergeRefs(ref, setSlideshow)}
             {...forwardedProps}
             className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }), {
                 [`${CLASSNAME}--fill-height`]: fillHeight,
                 [`${CLASSNAME}--group-by-${groupBy}`]: Boolean(groupBy),
             })}
-            tabIndex={0}
+            aria-roledescription="carousel"
+            aria-live={isAutoPlaying ? 'off' : 'polite'}
         >
-            <div className={`${CLASSNAME}__slides`}>
+            <div
+                id={slideshowSlidesId}
+                className={`${CLASSNAME}__slides`}
+                onMouseEnter={() => setIsAutoPlaying(false)}
+                onMouseLeave={() => setIsAutoPlaying(Boolean(autoPlay))}
+            >
                 <div className={`${CLASSNAME}__wrapper`} style={wrapperStyle}>
-                    {children}
+                    {React.Children.map(children, (child: React.ReactNode, index: number) => {
+                        if (React.isValidElement(child)) {
+                            const isCurrentlyVisible = index >= startIndexVisible && index <= endIndexVisible;
+
+                            return React.cloneElement(child, {
+                                style: !isCurrentlyVisible
+                                    ? { visibility: 'hidden', ...(child.props.style || {}) }
+                                    : child.props.style || {},
+                                'aria-hidden': !isCurrentlyVisible,
+                            });
+                        }
+
+                        return null;
+                    })}
                 </div>
             </div>
 
@@ -204,18 +159,27 @@ export const Slideshow: Comp<SlideshowProps, HTMLDivElement> = forwardRef((props
                     <SlideshowControls
                         {...slideshowControlsProps}
                         activeIndex={currentIndex}
-                        onPaginationClick={handleControlGotToSlide}
-                        onNextClick={handleControlNextSlide}
-                        onPreviousClick={handleControlPreviousSlide}
+                        onPaginationClick={onPaginationClick}
+                        onNextClick={onNextClick}
+                        onPreviousClick={onPreviousClick}
                         slidesCount={slidesCount}
-                        parentRef={element}
+                        parentRef={slideshow}
                         theme={theme}
+                        nextButtonProps={{
+                            'aria-controls': slideshowSlidesId,
+                            ...slideshowControlsProps.nextButtonProps,
+                        }}
+                        previousButtonProps={{
+                            'aria-controls': slideshowSlidesId,
+                            ...slideshowControlsProps.previousButtonProps,
+                        }}
                     />
                 </div>
             )}
-        </div>
+        </section>
     );
 });
+
 Slideshow.displayName = COMPONENT_NAME;
 Slideshow.className = CLASSNAME;
 Slideshow.defaultProps = DEFAULT_PROPS;

package/src/components/slideshow/SlideshowControls.stories.tsx

@@ -6,13 +6,15 @@ import { thumbnailsKnob } from '@lumx/react/stories/knobs/thumbnailsKnob';
 export default { title: 'LumX components/slideshow/Slideshow controls' };
 
 export const Simple = () => {
-    const slidesCount = 9;
-    const [activeIndex, setActiveIndex] = React.useState(0);
-    const maxIndex = slidesCount - 1;
-
-    const onNextClick = () => setActiveIndex(activeIndex === maxIndex ? 0 : activeIndex + 1);
-    const onPreviousClick = () => setActiveIndex(activeIndex === 0 ? maxIndex : activeIndex - 1);
-    const onPaginationClick = (index: number) => setActiveIndex(index);
+    const {
+        activeIndex,
+        slidesCount,
+        onNextClick,
+        onPreviousClick,
+        onPaginationClick,
+    } = SlideshowControls.useSlideshowControls({
+        itemsCount: 9,
+    });
 
     return (
         <SlideshowControls
@@ -29,15 +31,19 @@ export const Simple = () => {
 
 export const ControllingSlideshow = ({ theme }: any) => {
     const items = thumbnailsKnob(6);
-    const [activeIndex, setActiveIndex] = React.useState(0);
-    const maxIndex = items.length - 1;
     const slideshowStyle = {
         width: '50%',
     };
 
-    const onNextClick = () => setActiveIndex(activeIndex === maxIndex ? 0 : activeIndex + 1);
-    const onPreviousClick = () => setActiveIndex(activeIndex === 0 ? maxIndex : activeIndex - 1);
-    const onPaginationClick = (index: number) => setActiveIndex(index);
+    const {
+        activeIndex,
+        setActiveIndex,
+        onNextClick,
+        onPreviousClick,
+        onPaginationClick,
+    } = SlideshowControls.useSlideshowControls({
+        itemsCount: 6,
+    });
 
     return (
         <div style={{ height: 400, width: 500, position: 'relative' }}>