@lumx/react 3.1.1 → 3.1.3-alpha.0

package/dist/src/hooks/useSlideshowControls.ts

@@ -1,243 +0,0 @@
-import { useState, useCallback, useEffect, useMemo } from 'react';
-
-import { useInterval } from '@lumx/react/hooks/useInterval';
-import uniqueId from 'lodash/uniqueId';
-import { AUTOPLAY_DEFAULT_INTERVAL } from '@lumx/react/components/slideshow/constants';
-
-export interface UseSlideshowControlsOptions {
-    /** default active index to be displayed */
-    defaultActiveIndex?: number;
-    /** total slides to display */
-    itemsCount: number;
-    /** Index of the current slide. */
-    activeIndex?: number;
-    /** Whether the automatic rotation of the slideshow is enabled or not. */
-    autoPlay?: boolean;
-    /** Whether the image has to fill its container height or not. */
-    fillHeight?: boolean;
-    /** Number of slides to group together. */
-    groupBy?: number;
-    /** Interval between each slide when automatic rotation is enabled. */
-    interval?: number;
-    /** Callback when slide changes */
-    onChange?(index: number): void;
-    /** slideshow HTML id attribute */
-    id?: string;
-    /** slides wrapper HTML id attribute */
-    slidesId?: string;
-}
-
-export interface UseSlideshowControls {
-    /** Index for the first visible slide, should be used when groupBy is passed in */
-    startIndexVisible: number;
-    /** Index for the last visible slide, should be used when groupBy is passed in */
-    endIndexVisible: number;
-    /** total slides to be displayed */
-    slidesCount: number;
-    /** callback to set  */
-    setSlideshow: (element: HTMLDivElement | null) => void;
-    /** reference to the slideshow element */
-    slideshow: HTMLDivElement | null;
-    /** id to be used for the slideshow */
-    slideshowId: string;
-    /** id to be used for the wrapper that contains the slides */
-    slideshowSlidesId: string;
-    /** callback that triggers the previous slide while using the slideshow controls  */
-    onPreviousClick: (loopback: boolean) => void;
-    /** callback that triggers the next slide while using the slideshow controls */
-    onNextClick: (loopback: boolean) => void;
-    /** callback that triggers a specific page while using the slideshow controls */
-    onPaginationClick: (index: number) => void;
-    /** whether the slideshow is autoplaying or not */
-    isAutoPlaying: boolean;
-    /** whether the slideshow was force paused or not */
-    isForcePaused: boolean;
-    /** callback to change whether the slideshow is autoplaying or not */
-    toggleAutoPlay: () => void;
-    /** calback to change whether the slideshow should be force paused or not */
-    toggleForcePause: () => void;
-    /** current active slide index  */
-    activeIndex: number;
-    /** set the current index as the active one */
-    setActiveIndex: (index: number) => void;
-    /** callback that stops the auto play */
-    stopAutoPlay: () => void;
-    /** callback that starts the auto play */
-    startAutoPlay: () => void;
-}
-
-export const DEFAULT_OPTIONS: Partial<UseSlideshowControlsOptions> = {
-    activeIndex: 0,
-    groupBy: 1,
-    interval: AUTOPLAY_DEFAULT_INTERVAL,
-};
-
-export const useSlideshowControls = ({
-    activeIndex = DEFAULT_OPTIONS.activeIndex,
-    groupBy = DEFAULT_OPTIONS.groupBy,
-    interval = DEFAULT_OPTIONS.interval,
-    autoPlay,
-    defaultActiveIndex,
-    onChange,
-    itemsCount,
-    id,
-    slidesId,
-}: UseSlideshowControlsOptions): UseSlideshowControls => {
-    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 | null>(null);
-
-    // Number of slides when using groupBy prop.
-    const slidesCount = Math.ceil(itemsCount / Math.min(groupBy as number, itemsCount));
-
-    // 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));
-    const [isForcePaused, setIsForcePaused] = useState(false);
-
-    const isSlideshowAutoPlaying = isForcePaused ? false : isAutoPlaying;
-    // Start
-    useInterval(goToNextSlide, isSlideshowAutoPlaying && slidesCount > 1 ? (interval as number) : null);
-
-    // Reset current index if it become invalid.
-    useEffect(() => {
-        if (currentIndex > slidesCount - 1) {
-            setCurrentIndex(defaultActiveIndex as number);
-        }
-    }, [currentIndex, slidesCount, defaultActiveIndex]);
-
-    const startAutoPlay = () => {
-        setIsAutoPlaying(Boolean(autoPlay));
-    };
-
-    const stopAutoPlay = () => {
-        setIsAutoPlaying(false);
-    };
-
-    // Handle click on a bullet to go to a specific slide.
-    const onPaginationClick = useCallback(
-        (index: number) => {
-            stopAutoPlay();
-            setIsForcePaused(true);
-
-            if (index >= 0 && index < slidesCount) {
-                setCurrentIndex(index);
-            }
-        },
-        [slidesCount, setCurrentIndex],
-    );
-
-    // Handle click or keyboard event to go to next slide.
-    const onNextClick = useCallback(
-        (loopback = true) => {
-            stopAutoPlay();
-            setIsForcePaused(true);
-            goToNextSlide(loopback);
-        },
-        [goToNextSlide],
-    );
-
-    // Handle click or keyboard event to go to previous slide.
-    const onPreviousClick = useCallback(
-        (loopback = true) => {
-            stopAutoPlay();
-            setIsForcePaused(true);
-            goToPreviousSlide(loopback);
-        },
-        [goToPreviousSlide],
-    );
-
-    // If the activeIndex props changes, update the current slide
-    useEffect(() => {
-        setCurrentIndex(activeIndex as number);
-    }, [activeIndex]);
-
-    // If the slide changes, with autoplay for example, trigger "onChange"
-    useEffect(() => {
-        if (!onChange) return;
-        onChange(currentIndex);
-    }, [currentIndex, onChange]);
-
-    const slideshowId = useMemo(() => id || uniqueId('slideshow'), [id]);
-    const slideshowSlidesId = useMemo(() => slidesId || uniqueId('slideshow-slides'), [slidesId]);
-
-    const toggleAutoPlay = () => {
-        if (isSlideshowAutoPlaying) {
-            stopAutoPlay();
-        } else {
-            startAutoPlay();
-        }
-    };
-
-    const toggleForcePause = () => {
-        const shouldBePaused = !isForcePaused;
-
-        setIsForcePaused(shouldBePaused);
-
-        if (!shouldBePaused) {
-            startAutoPlay();
-        } else {
-            stopAutoPlay();
-        }
-    };
-
-    // Start index and end index of visible slides.
-    const startIndexVisible = currentIndex * (groupBy as number);
-    const endIndexVisible = startIndexVisible + (groupBy as number);
-
-    return {
-        startIndexVisible,
-        endIndexVisible,
-        setSlideshow: setElement,
-        slideshow: element,
-        slideshowId,
-        slideshowSlidesId,
-        onPreviousClick,
-        onNextClick,
-        onPaginationClick,
-        isAutoPlaying: isSlideshowAutoPlaying,
-        toggleAutoPlay,
-        activeIndex: currentIndex,
-        slidesCount,
-        setActiveIndex: setCurrentIndex,
-        startAutoPlay,
-        stopAutoPlay,
-        isForcePaused,
-        toggleForcePause,
-    };
-};

package/dist/src/hooks/useStopPropagation.ts

@@ -1,21 +0,0 @@
-import isFunction from 'lodash/isFunction';
-import { MouseEventHandler, useCallback } from 'react';
-
-/**
- * Wrap mouse event handler to stop event propagation.
- *
- * @param  handler   The mouse handler to wrap.
- * @return Mouse handler stopping propagation.
- */
-export function useStopPropagation(handler?: MouseEventHandler): MouseEventHandler {
-    return useCallback(
-        (evt) => {
-            if (!evt || !isFunction(handler)) {
-                return;
-            }
-            handler(evt);
-            evt.stopPropagation();
-        },
-        [handler],
-    );
-}

package/dist/src/hooks/useTransitionVisibility.ts

@@ -1,54 +0,0 @@
-import { RefObject, useEffect, useRef, useState } from 'react';
-import { userHasReducedMotion } from '@lumx/react/utils/userHasReducedMotion';
-
-/**
- * Returns true if the component is visible tracking the opacity transition.
- *
- * @param ref Element on which to listen the transition event.
- * @param isComponentVisible Whether the component intends to be visible or not.
- * @param onVisibilityChange Callback called when the visibility changes.
- * @return true if the component should be rendered
- */
-export const useTransitionVisibility = (
-    ref: RefObject<HTMLElement>,
-    isComponentVisible: boolean,
-    onVisibilityChange?: (isVisible: boolean) => void,
-) => {
-    const [isVisible, setVisible] = useState(isComponentVisible);
-    const previousVisibility = useRef(isVisible);
-
-    // On component visibility change.
-    useEffect(() => {
-        if (isComponentVisible) {
-            setVisible(true);
-            return undefined;
-        }
-        const { current: element } = ref;
-
-        // Transition event is not supported or the user prefers reduced motion.
-        // => Skip `transitionend` event listening and set visibility to false directly.
-        if (!element || !window.TransitionEvent || userHasReducedMotion()) {
-            setVisible(false);
-            return undefined;
-        }
-
-        // Update visibility on opacity transition end.
-        const onTransitionEnd = (e: TransitionEvent) => {
-            if (e.target !== ref.current || e.propertyName !== 'opacity') return;
-            setVisible((wasVisible) => !wasVisible);
-        };
-        element.addEventListener('transitionend', onTransitionEnd);
-        return () => {
-            element.removeEventListener('transitionend', onTransitionEnd);
-        };
-    }, [isComponentVisible, ref]);
-
-    useEffect(() => {
-        if (onVisibilityChange && previousVisibility.current !== isVisible) {
-            onVisibilityChange(isVisible);
-            previousVisibility.current = isVisible;
-        }
-    }, [isVisible, onVisibilityChange]);
-
-    return isVisible || isComponentVisible;
-};

package/dist/src/index.ts

@@ -1,58 +0,0 @@
-/**
- * Components listed here will be exposed to NPM in '@lumx/react'.
- */
-
-export * from './components';
-export * from './components/alert-dialog';
-export * from './components/autocomplete';
-export * from './components/avatar';
-export * from './components/badge';
-export * from './components/button';
-export * from './components/checkbox';
-export * from './components/chip';
-export * from './components/comment-block';
-export * from './components/date-picker';
-export * from './components/dialog';
-export * from './components/divider';
-export * from './components/drag-handle';
-export * from './components/dropdown';
-export * from './components/expansion-panel';
-export * from './components/flag';
-export * from './components/flex-box';
-export * from './components/generic-block';
-export * from './components/heading';
-export * from './components/grid';
-export * from './components/grid-column';
-export * from './components/icon';
-export * from './components/image-block';
-export * from './components/inline-list';
-export * from './components/input-helper';
-export * from './components/input-label';
-export * from './components/lightbox';
-export * from './components/link';
-export * from './components/link-preview';
-export * from './components/list';
-export * from './components/message';
-export * from './components/mosaic';
-export * from './components/notification';
-export * from './components/popover';
-export * from './components/popover-dialog';
-export * from './components/post-block';
-export * from './components/progress';
-export * from './components/progress-tracker';
-export * from './components/radio-button';
-export * from './components/select';
-export * from './components/side-navigation';
-export * from './components/skeleton';
-export * from './components/slider';
-export * from './components/slideshow';
-export * from './components/switch';
-export * from './components/table';
-export * from './components/tabs';
-export * from './components/text';
-export * from './components/text-field';
-export * from './components/thumbnail';
-export * from './components/toolbar';
-export * from './components/tooltip';
-export * from './components/uploader';
-export * from './components/user-block';

package/dist/src/stories/chromaticForceScreenSize.tsx

@@ -1,7 +0,0 @@
-/* eslint-disable */
-import React from 'react';
-import isChromatic from 'chromatic/isChromatic';
-
-/** Story decorator used to force a minimum screen size when running in chromatic */
-export const chromaticForceScreenSize = (story: any) =>
-    isChromatic() ? <div style={{ minWidth: 1200, minHeight: 800 }}>{story()}</div> : story();

package/dist/src/stories/generated/Autocomplete/Demos.stories.tsx

@@ -1,7 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/autocomplete/Autocomplete Demos' };
-
-export { App as Default } from './default';
-export { App as Multiple } from './multiple';

package/dist/src/stories/generated/Avatar/Demos.stories.tsx

@@ -1,7 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/avatar/Avatar Demos' };
-
-export { App as Actions } from './actions';
-export { App as Default } from './default';

package/dist/src/stories/generated/Badge/Demos.stories.tsx

@@ -1,9 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/badge/Badge Demos' };
-
-export { App as Colors } from './colors';
-export { App as Icon } from './icon';
-export { App as Label } from './label';
-export { App as Thumbnail } from './thumbnail';

package/dist/src/stories/generated/Button/Demos.stories.tsx

@@ -1,11 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/button/Button Demos' };
-
-export { App as EmphasisHigh } from './emphasis-high';
-export { App as EmphasisLow } from './emphasis-low';
-export { App as EmphasisMedium } from './emphasis-medium';
-export { App as FullWidth } from './full-width';
-export { App as Small } from './small';
-export { App as Toggle } from './toggle';

package/dist/src/stories/generated/Checkbox/Demos.stories.tsx

@@ -1,6 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/checkbox/Checkbox Demos' };
-
-export { App as Default } from './default';

package/dist/src/stories/generated/Chip/Demos.stories.tsx

@@ -1,11 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/chip/Chip Demos' };
-
-export { App as Choice } from './choice';
-export { App as Default } from './default';
-export { App as Dismissible } from './dismissible';
-export { App as Filter } from './filter';
-export { App as Group } from './group';
-export { App as Small } from './small';

package/dist/src/stories/generated/CommentBlock/Demos.stories.tsx

@@ -1,8 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/comment-block/CommentBlock Demos' };
-
-export { App as Default } from './default';
-export { App as Relevant } from './relevant';
-export { App as Threaded } from './threaded';

package/dist/src/stories/generated/DatePicker/Demos.stories.tsx

@@ -1,8 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/date-picker/DatePicker Demos' };
-
-export { App as Default } from './default';
-export { App as Input } from './input';
-export { App as Restricted } from './restricted';

package/dist/src/stories/generated/Dialog/Demos.stories.tsx

@@ -1,10 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/dialog/Dialog Demos' };
-
-export { App as Alert } from './alert';
-export { App as Confirm } from './confirm';
-export { App as Default } from './default';
-export { App as Isloading } from './isloading';
-export { App as Sizes } from './sizes';

package/dist/src/stories/generated/Divider/Demos.stories.tsx

@@ -1,6 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/divider/Divider Demos' };
-
-export { App as Default } from './default';

package/dist/src/stories/generated/Dropdown/Demos.stories.tsx

@@ -1,8 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/dropdown/Dropdown Demos' };
-
-export { App as Default } from './default';
-export { App as Selects } from './selects';
-export { App as Target } from './target';

package/dist/src/stories/generated/ExpansionPanel/Demos.stories.tsx

@@ -1,9 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/expansion-panel/ExpansionPanel Demos' };
-
-export { App as Default } from './default';
-export { App as DragHandle } from './drag-handle';
-export { App as Examples } from './examples';
-export { App as Trimmed } from './trimmed';

package/dist/src/stories/generated/Flag/Demos.stories.tsx

@@ -1,6 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/flag/Flag Demos' };
-
-export { App as Flag } from './flag';

package/dist/src/stories/generated/GenericBlock/Demos.stories.tsx

@@ -1,8 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/generic-block/GenericBlock Demos' };
-
-export { App as HorizontalAlignment } from './horizontal-alignment';
-export { App as Sizes } from './sizes';
-export { App as VerticalAlignment } from './vertical-alignment';

package/dist/src/stories/generated/Heading/Demos.stories.tsx

@@ -1,6 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/heading/Heading Demos' };
-
-export { App as AutomaticHeadingLevel } from './automatic-heading-level';

package/dist/src/stories/generated/Icon/Demos.stories.tsx

@@ -1,8 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/icon/Icon Demos' };
-
-export { App as Colors } from './colors';
-export { App as Shape } from './shape';
-export { App as Simple } from './simple';

package/dist/src/stories/generated/ImageBlock/Demos.stories.tsx

@@ -1,9 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/image-block/ImageBlock Demos' };
-
-export { App as Default } from './default';
-export { App as ImageBlockAbove } from './image-block-above';
-export { App as ImageBlockAlignment } from './image-block-alignment';
-export { App as ImageBlockPadding } from './image-block-padding';

package/dist/src/stories/generated/Lightbox/Demos.stories.tsx

@@ -1,6 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/lightbox/Lightbox Demos' };
-
-export { App as Default } from './default';

package/dist/src/stories/generated/Link/Demos.stories.tsx

@@ -1,8 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/link/Link Demos' };
-
-export { App as Default } from './default';
-export { App as Implicit } from './implicit';
-export { App as Sizes } from './sizes';

package/dist/src/stories/generated/LinkPreview/Demos.stories.tsx

@@ -1,7 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/link-preview/LinkPreview Demos' };
-
-export { App as Big } from './big';
-export { App as Default } from './default';

package/dist/src/stories/generated/List/Demos.stories.tsx

@@ -1,11 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/list/List Demos' };
-
-export { App as Big } from './big';
-export { App as Clickable } from './clickable';
-export { App as Huge } from './huge';
-export { App as Paddings } from './paddings';
-export { App as Regular } from './regular';
-export { App as Tiny } from './tiny';

package/dist/src/stories/generated/Message/Demos.stories.tsx

@@ -1,10 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/message/Message Demos' };
-
-export { App as Error } from './error';
-export { App as Info } from './info';
-export { App as Success } from './success';
-export { App as Trimmed } from './trimmed';
-export { App as Warning } from './warning';

package/dist/src/stories/generated/Mosaic/Demos.stories.tsx

@@ -1,9 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/mosaic/Mosaic Demos' };
-
-export { App as FourImages } from './four-images';
-export { App as MoreImages } from './more-images';
-export { App as ThreeImages } from './three-images';
-export { App as TwoImages } from './two-images';

package/dist/src/stories/generated/Notification/Demos.stories.tsx

@@ -1,6 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/notification/Notification Demos' };
-
-export { App as Default } from './default';

package/dist/src/stories/generated/Popover/Demos.stories.tsx

@@ -1,11 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/popover/Popover Demos' };
-
-export { App as Alignments } from './alignments';
-export { App as Auto } from './auto';
-export { App as Default } from './default';
-export { App as MatchingWidth } from './matching-width';
-export { App as Offset } from './offset';
-export { App as Positions } from './positions';

package/dist/src/stories/generated/PopoverDialog/Demos.stories.tsx

@@ -1,6 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/popover-dialog/PopoverDialog Demos' };
-
-export { App as Default } from './default';

package/dist/src/stories/generated/PostBlock/Demos.stories.tsx

@@ -1,6 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/post-block/PostBlock Demos' };
-
-export { App as Default } from './default';