@openameba/spindle-ui 0.28.0 → 0.29.0

package/Breadcrumb/BreadcrumbItem.mjs

@@ -0,0 +1,7 @@
+import React, { forwardRef } from 'react';
+export const BreadcrumbItem = forwardRef(function Item({ children, current, ...rest }, ref) {
+    if (current) {
+        return (React.createElement("a", Object.assign({ ref: ref, "aria-current": "page" }, rest), children));
+    }
+    return (React.createElement("a", Object.assign({ ref: ref }, rest), children));
+});

package/Breadcrumb/BreadcrumbList.mjs

@@ -0,0 +1,12 @@
+import React from 'react';
+import ChevronRightBold from '../Icon/ChevronRightBold';
+const BLOCK_NAME = 'spui-Breadcrumb';
+export const BreadcrumbList = (props) => {
+    const { children, className, ...rest } = props;
+    return (React.createElement("nav", Object.assign({ "aria-label": "\u30D1\u30F3\u304F\u305A\u30EA\u30B9\u30C8", className: [BLOCK_NAME, className].join(' ').trim() }, rest),
+        React.createElement("ol", { className: `${BLOCK_NAME}-list` }, React.Children.map(children, (child) => {
+            return React.isValidElement(child) ? (React.createElement("li", { className: `${BLOCK_NAME}-item` },
+                child,
+                React.createElement(ChevronRightBold, { "aria-hidden": "true", className: `${BLOCK_NAME}-chevron` }))) : null;
+        }))));
+};

package/Breadcrumb/index.mjs

@@ -0,0 +1,2 @@
+export { BreadcrumbList } from './BreadcrumbList';
+export { BreadcrumbItem } from './BreadcrumbItem';

package/Button/Button.mjs

@@ -0,0 +1,7 @@
+import React, { forwardRef } from 'react';
+const BLOCK_NAME = 'spui-Button';
+export const Button = forwardRef(function Button({ children, layout = 'intrinsic', size = 'large', variant = 'contained', icon, ...rest }, ref) {
+    return (React.createElement("button", Object.assign({ className: `${BLOCK_NAME} ${BLOCK_NAME}--${layout} ${BLOCK_NAME}--${size} ${BLOCK_NAME}--${variant}`, ref: ref }, rest), icon ? (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: `${BLOCK_NAME}-icon ${BLOCK_NAME}-icon--${size}` }, icon),
+        children)) : (children)));
+});

package/Button/index.mjs

@@ -0,0 +1 @@
+export { Button } from './Button';

package/ButtonGroup/ButtonGroup.mjs

@@ -0,0 +1,13 @@
+import React from 'react';
+const BLOCK_NAME = 'spui-ButtonGroup';
+export const ButtonGroup = ({ children, className, direction = 'row', size = 'large', ...rest }) => {
+    const classnames = [
+        BLOCK_NAME,
+        `${BLOCK_NAME}--${direction}`,
+        `${BLOCK_NAME}--${size}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (React.createElement("div", Object.assign({ className: classnames }, rest), children));
+};

package/ButtonGroup/index.mjs

@@ -0,0 +1 @@
+export { ButtonGroup } from './ButtonGroup';

package/CHANGELOG.md

@@ -3,12 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.29.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.28.0...@openameba/spindle-ui@0.29.0) (2022-03-31)
+
+
+### Bug Fixes
+
+* **spindle-ui:** set side effect for css ([b171005](https://github.com/openameba/spindle/commit/b17100528232b3d2cc2664e12e6a2b3a8e54a7eb))
+
+
+
+
+
 # [0.28.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.27.1...@openameba/spindle-ui@0.28.0) (2022-03-31)
 
 
 ### Features
 
 * **spindle-icons:** update icons ([1090484](https://github.com/openameba/spindle/commit/1090484fe176a51481868dccf86251dc8e418f26))
+## [0.27.2-alpha.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.27.1...@openameba/spindle-ui@0.27.2-alpha.0) (2022-03-29)
+
+
+### Bug Fixes
+
+* **spindle-ui:** set side effect for css ([1527f43](https://github.com/openameba/spindle/commit/1527f4383f15515b9a106e8adf6190a87dc7624d))
 
 
 
@@ -25,6 +42,17 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
+## [0.27.1-alpha.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.27.0...@openameba/spindle-ui@0.27.1-alpha.0) (2022-03-18)
+
+
+### Bug Fixes
+
+* **spindle-ui:** set side effect for css ([c70cd42](https://github.com/openameba/spindle/commit/c70cd42e91959e8fe921a992f2c26eac3f5e920f))
+
+
+
+
+
 # [0.27.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.26.3...@openameba/spindle-ui@0.27.0) (2022-03-18)
 
 
@@ -76,6 +104,13 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 * **spindle-ui:** add HeroCarousel component ([d7e0a53](https://github.com/openameba/spindle/commit/d7e0a5302cfca4d7600188098ef4dd224998e2bb))
 
+## [0.25.2-alpha.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.25.1...@openameba/spindle-ui@0.25.2-alpha.0) (2021-12-09)
+
+
+### Bug Fixes
+
+* **spindle-ui:** set side effect for css ([bdf0c9f](https://github.com/openameba/spindle/commit/bdf0c9ff79a69ad9dd2706dcfe96bd29559b373e))
+
 
 
 
@@ -136,12 +171,19 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 ### Features
 
 * **spindle-icons:** update icons ([39ce767](https://github.com/openameba/spindle/commit/39ce7673df4556ee3b9a6ea6dc62ad25236a6fc9))
+## [0.22.1-alpha.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.22.0...@openameba/spindle-ui@0.22.1-alpha.0) (2021-09-06)
+
+
+### Bug Fixes
+
+* **spindle-ui:** set side effect for css ([f26be31](https://github.com/openameba/spindle/commit/f26be31bf53ec73fbe00222773ba691809dae5d5))
 
 
 
 
 
 # [0.22.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.21.2...@openameba/spindle-ui@0.22.0) (2021-09-06)
+## [0.21.3-alpha.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.21.2...@openameba/spindle-ui@0.21.3-alpha.0) (2021-07-30)
 
 
 ### Bug Fixes
@@ -163,12 +205,14 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 ### BREAKING CHANGES
 
 * **spindle-icons,spindle-ui:** setting icon was renamed to gear
+* **spindle-ui:** set side effect for css ([ec4e8f1](https://github.com/openameba/spindle/commit/ec4e8f143cd6769cc6b3d49534233a46eaf79b2d))
 
 
 
 
 
 ## [0.21.2](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.21.1...@openameba/spindle-ui@0.21.2) (2021-07-30)
+## [0.21.2-alpha.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.21.1...@openameba/spindle-ui@0.21.2-alpha.0) (2021-07-28)
 
 **Note:** Version bump only for package @openameba/spindle-ui
 
@@ -229,6 +273,9 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 ### Features
 
 * **spindle-icons:** update icons ([ae07c8e](https://github.com/openameba/spindle/commit/ae07c8eca4f33789c45b3c3d6a2e7f8f17c11e81))
+## [0.18.1-alpha.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.18.0...@openameba/spindle-ui@0.18.1-alpha.0) (2021-06-11)
+
+**Note:** Version bump only for package @openameba/spindle-ui
 
 
 
@@ -284,6 +331,9 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 ### Bug Fixes
 
 * **spindle-ui:** fix CSS variable name ([f76d2ee](https://github.com/openameba/spindle/commit/f76d2ee1840574a1247a20ea1ee212b85d99708e))
+# [0.15.0-alpha.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.14.0...@openameba/spindle-ui@0.15.0-alpha.0) (2021-03-15)
+
+**Note:** Version bump only for package @openameba/spindle-ui
 
 
 

package/Form/Checkbox.mjs

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import { CheckBold } from '../Icon';
+const BLOCK_NAME = 'spui-Checkbox';
+export const Checkbox = forwardRef(function Checkbox({ children, ...rest }, ref) {
+    return (React.createElement("label", { className: `${BLOCK_NAME}-label` },
+        React.createElement("input", Object.assign({ className: `${BLOCK_NAME}-input`, ref: ref, type: "checkbox" }, rest)),
+        React.createElement("span", { className: `${BLOCK_NAME}-icon` },
+            React.createElement(CheckBold, { "aria-hidden": "true" })),
+        React.createElement("span", { className: `${BLOCK_NAME}-outline` }),
+        children && React.createElement("span", { className: `${BLOCK_NAME}-text` }, children)));
+});

package/Form/DropDown.mjs

@@ -0,0 +1,38 @@
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import mergeRefs from 'react-merge-refs';
+import { ChevronDownBold } from '../Icon';
+const BLOCK_NAME = 'spui-DropDown';
+export const DropDown = forwardRef(function DropDown({ children, hasError = false, onChange, ...rest }, ref) {
+    const selectEl = useRef(null);
+    const [text, setText] = useState('');
+    const [disabled, setDisabled] = useState(false);
+    const update = () => {
+        if (selectEl && selectEl.current) {
+            const selectedEl = selectEl.current.options[selectEl.current.selectedIndex];
+            const value = selectedEl.text;
+            const disabled = selectedEl.disabled;
+            setText(value);
+            setDisabled(disabled);
+        }
+    };
+    const handleChange = (event) => {
+        if (typeof onChange === 'function') {
+            onChange(event);
+        }
+        update();
+    };
+    // Update text once
+    useEffect(update, []);
+    return (React.createElement("label", { className: [
+            `${BLOCK_NAME}-label`,
+            !disabled ? 'is-active' : '',
+            hasError ? 'is-error' : '',
+        ]
+            .filter(Boolean)
+            .join(' ') },
+        React.createElement("span", { className: `${BLOCK_NAME}-visual` }, text),
+        React.createElement("span", { className: `${BLOCK_NAME}-icon` },
+            React.createElement(ChevronDownBold, { "aria-hidden": "true" })),
+        React.createElement("select", Object.assign({ className: `${BLOCK_NAME}-select`, ref: mergeRefs([selectEl, ref]), onChange: handleChange }, rest), children),
+        React.createElement("span", { className: `${BLOCK_NAME}-outline` })));
+});

package/Form/InlineDropDown.mjs

@@ -0,0 +1,30 @@
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import mergeRefs from 'react-merge-refs';
+import { ChevronDownBold } from '../Icon';
+const BLOCK_NAME = 'spui-InlineDropDown';
+export const InlineDropDown = forwardRef(function InlineDropDown({ children, visualSize = 'medium', onChange, ...rest }, ref) {
+    const selectEl = useRef(null);
+    const [text, setText] = useState('');
+    const update = () => {
+        if (selectEl && selectEl.current) {
+            const selectedEl = selectEl.current.options[selectEl.current.selectedIndex];
+            const value = selectedEl.text;
+            setText(value);
+        }
+    };
+    const handleChange = (event) => {
+        if (typeof onChange === 'function') {
+            onChange(event);
+        }
+        update();
+    };
+    // Update text once
+    useEffect(update, []);
+    return (React.createElement("label", { className: [`${BLOCK_NAME}-label`].filter(Boolean).join(' ') },
+        React.createElement("span", { className: `${BLOCK_NAME}-visual` },
+            React.createElement("span", { className: `${BLOCK_NAME}-text ${BLOCK_NAME}-text--${visualSize}` }, text),
+            React.createElement("span", { className: `${BLOCK_NAME}-icon ${BLOCK_NAME}-icon--${visualSize}` },
+                React.createElement(ChevronDownBold, { "aria-hidden": "true" }))),
+        React.createElement("select", Object.assign({ className: `${BLOCK_NAME}-select ${BLOCK_NAME}-select--${visualSize}`, ref: mergeRefs([selectEl, ref]), onChange: handleChange }, rest), children),
+        React.createElement("span", { className: `${BLOCK_NAME}-outline` })));
+});

package/Form/InputLabel.mjs

@@ -0,0 +1,5 @@
+import React from 'react';
+const BLOCK_NAME = 'spui-InputLabel';
+export const InputLabel = ({ children, id = '', ...rest }) => {
+    return (React.createElement("label", Object.assign({ className: BLOCK_NAME, htmlFor: id }, rest), children));
+};

package/Form/InvalidMessage.mjs

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ExclamationmarkCircleFill } from '../Icon';
+const BLOCK_NAME = 'spui-InvalidMessage';
+export const InvalidMessage = ({ children, visible = false, ...rest }) => {
+    return (React.createElement("p", Object.assign({ className: BLOCK_NAME, hidden: !visible }, rest),
+        React.createElement("span", { className: `${BLOCK_NAME}-icon` },
+            React.createElement(ExclamationmarkCircleFill, { "aria-hidden": "true" })),
+        React.createElement("span", { className: `${BLOCK_NAME}-body` }, children)));
+};

package/Form/Radio.mjs

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import { CheckBold } from '../Icon';
+const BLOCK_NAME = 'spui-Radio';
+export const Radio = forwardRef(function Radio({ children, id = '', ...rest }, ref) {
+    return (React.createElement("label", { className: `${BLOCK_NAME}-label`, htmlFor: id },
+        React.createElement("input", Object.assign({ className: `${BLOCK_NAME}-input`, id: id, ref: ref, type: "radio" }, rest)),
+        React.createElement("span", { className: `${BLOCK_NAME}-icon` },
+            React.createElement(CheckBold, { "aria-hidden": "true" })),
+        React.createElement("span", { className: `${BLOCK_NAME}-outline` }),
+        children && React.createElement("span", { className: `${BLOCK_NAME}-text` }, children)));
+});

package/Form/TextArea.mjs

@@ -0,0 +1,5 @@
+import React, { forwardRef } from 'react';
+const BLOCK_NAME = 'spui-TextArea';
+export const TextArea = forwardRef(function TextArea({ children, hasError = false, id = '', ...rest }, ref) {
+    return (React.createElement("textarea", Object.assign({ className: [`${BLOCK_NAME}`, hasError ? 'is-error' : ''].join(' '), id: id, ref: ref }, rest), children));
+});

package/Form/TextField.mjs

@@ -0,0 +1,9 @@
+import React, { forwardRef } from 'react';
+const BLOCK_NAME = 'spui-TextField';
+export const TextField = forwardRef(function TextField({ hasError = false, id = '', variant = 'medium', ...rest }, ref) {
+    return (React.createElement("input", Object.assign({ className: [
+            `${BLOCK_NAME}`,
+            `${BLOCK_NAME}--${variant}`,
+            hasError ? 'is-error' : '',
+        ].join(' '), id: id, ref: ref }, rest)));
+});

package/Form/ToggleSwitch.mjs

@@ -0,0 +1,8 @@
+import React, { forwardRef } from 'react';
+const BLOCK_NAME = 'spui-ToggleSwitch';
+export const ToggleSwitch = forwardRef(function ToggleSwitch({ id = '', ...rest }, ref) {
+    return (React.createElement("label", { className: BLOCK_NAME },
+        React.createElement("input", Object.assign({ className: `${BLOCK_NAME}-input`, id: id, ref: ref, type: "checkbox" }, rest)),
+        React.createElement("span", { className: `${BLOCK_NAME}-visual` }),
+        React.createElement("span", { className: `${BLOCK_NAME}-outline` })));
+});

package/Form/index.mjs

@@ -0,0 +1,8 @@
+export { Checkbox } from './Checkbox';
+export { DropDown } from './DropDown';
+export { InputLabel } from './InputLabel';
+export { InvalidMessage } from './InvalidMessage';
+export { Radio } from './Radio';
+export { TextArea } from './TextArea';
+export { TextField } from './TextField';
+export { ToggleSwitch } from './ToggleSwitch';

package/HeroCarousel/HeroCarousel.mjs

@@ -0,0 +1,27 @@
+import React from 'react';
+import ChevronLeftBold from '../Icon/ChevronLeftBold';
+import ChevronRightBold from '../Icon/ChevronRightBold';
+import Pause from '../Icon/Pause';
+import PlayFill from '../Icon/PlayFill';
+import HeroCarouselItem from './HeroCarouselItem';
+import { useAutoPlayCarousel } from './hooks/useAutoPlayCarousel';
+const BLOCK_NAME = 'spui-HeroCarousel';
+const ITEM_LINK_CLASS_NAME = 'js-auto-play-carousel-item-link';
+export const HeroCarousel = React.memo(function HeroCarousel({ carouselList, }) {
+    if (carouselList.length === 0) {
+        return null;
+    }
+    const { handleSlideToPrev, handleSlideToNext, handleMouseEnter, handleMouseDown, handleMouseLeave, handleTouchStart, handleTransitionEnd, isAutoPlaying, isLinkClicked, itemsToRender, listRef, listStyles, toggleAutoPlay, handleFocus, handleBlur, } = useAutoPlayCarousel({
+        items: carouselList,
+        itemLinkClassName: ITEM_LINK_CLASS_NAME,
+    });
+    return (React.createElement("div", null,
+        React.createElement("div", { className: `${BLOCK_NAME}-container`, onBlur: handleBlur, onFocus: handleFocus, onMouseDown: handleMouseDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onTouchStart: handleTouchStart, onTransitionEnd: handleTransitionEnd },
+            React.createElement("ul", { "aria-roledescription": "\u30AB\u30EB\u30FC\u30BB\u30EB", className: `${BLOCK_NAME}-list`, ref: listRef, role: "group", style: listStyles }, itemsToRender.map((item, index) => (React.createElement(HeroCarouselItem, { carouselItem: item, isLinkClicked: isLinkClicked, itemLinkClassName: ITEM_LINK_CLASS_NAME, key: `hero-carousel-${index}` }))))),
+        React.createElement("div", { className: `${BLOCK_NAME}-controls` },
+            React.createElement("button", { "aria-label": "1\u3064\u524D\u306E\u30A2\u30A4\u30C6\u30E0\u306B\u79FB\u52D5", className: `${BLOCK_NAME}-control ${BLOCK_NAME}-control--prev`, type: "button", onClick: handleSlideToPrev },
+                React.createElement(ChevronLeftBold, { "aria-hidden": true })),
+            React.createElement("button", { "aria-label": isAutoPlaying ? 'スライドを停止' : 'スライドを再生', className: `${BLOCK_NAME}-control`, type: "button", onClick: toggleAutoPlay }, isAutoPlaying ? (React.createElement(Pause, { "aria-hidden": true })) : (React.createElement(PlayFill, { "aria-hidden": true }))),
+            React.createElement("button", { "aria-label": "1\u3064\u5F8C\u308D\u306E\u30A2\u30A4\u30C6\u30E0\u306B\u79FB\u52D5", className: `${BLOCK_NAME}-control ${BLOCK_NAME}-control--next`, type: "button", onClick: handleSlideToNext },
+                React.createElement(ChevronRightBold, { "aria-hidden": true })))));
+});

package/HeroCarousel/HeroCarouselItem.mjs

@@ -0,0 +1,20 @@
+import React, { useCallback } from 'react';
+const BLOCK_NAME = 'spui-HeroCarouselItem';
+export const HeroCarouselItem = React.memo(function HeroCarouselItem({ carouselItem, isLinkClicked, itemLinkClassName, }) {
+    const handleLinkClick = useCallback((e) => {
+        if (!isLinkClicked) {
+            e.preventDefault();
+        }
+    }, [isLinkClicked]);
+    return (React.createElement("li", { className: `${BLOCK_NAME}-listItem` },
+        React.createElement("a", { className: `${itemLinkClassName} ${BLOCK_NAME}-link`, href: carouselItem.link, onClick: handleLinkClick },
+            React.createElement("span", { className: `${BLOCK_NAME}-imageBlock` },
+                React.createElement("img", { alt: "", className: `${BLOCK_NAME}-image`, src: carouselItem.imageUrl })),
+            React.createElement("div", { className: `${BLOCK_NAME}-titleContainer` },
+                React.createElement("p", { className: `${BLOCK_NAME}-title` }, carouselItem.title)))));
+}, (prevProps, nextProps) => prevProps.isLinkClicked === nextProps.isLinkClicked &&
+    prevProps.itemLinkClassName === nextProps.itemLinkClassName &&
+    prevProps.carouselItem.title === nextProps.carouselItem.title &&
+    prevProps.carouselItem.link === nextProps.carouselItem.link &&
+    prevProps.carouselItem.imageUrl === nextProps.carouselItem.imageUrl);
+export default HeroCarouselItem;

package/HeroCarousel/hooks/useAutoPlayCarousel.mjs

@@ -0,0 +1,158 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useAutoSlide } from './useAutoSlide';
+import { useCarouselFocus } from './useCarouselFocus';
+import { useSliderMoveEvent } from './useSliderMoveEvent';
+import { useSliderTransition } from './useSliderTransition';
+import { useValueRef } from './useValueRef';
+const COPY_COUNT = 5;
+const SWIPE_THRESHOLD_X = 20;
+export function useAutoPlayCarousel({ items, itemLinkClassName, }) {
+    const { diffXRef, diffYRef, setDiffX, setDiffY, setStartX, setStartY, } = useSliderMoveEvent();
+    const [focusOffset, setFocusOffset] = useState(0);
+    const [isHovering, setIsHovering] = useState(false);
+    const [isLinkClicked, setIsLinkClicked] = useState(false);
+    const isHoveringRef = useValueRef(isHovering);
+    const slideToNextRef = useValueRef(() => slideToNext());
+    const itemCount = useMemo(() => items.length, [items]);
+    const getIsCopiedItem = useCallback((index) => {
+        return index < COPY_COUNT || index >= itemCount + COPY_COUNT;
+    }, [itemCount]);
+    const { isAutoPlaying, setIsAutoPlaying, resetAutoSlide, resetTimeOut, toggleAutoPlay, } = useAutoSlide({
+        onTimeOut: slideToNextRef.current,
+    });
+    const { linkRefs, listRef } = useCarouselFocus({
+        getIsCopiedItem,
+        itemLinkClassName,
+    });
+    const isAutoPlayingRef = useValueRef(isAutoPlaying);
+    const { currentIndexRef, handleTransitionEnd, listStyles, setCurrentIndex, setDisableAutoFocus, setDisableTransition, } = useSliderTransition({
+        copyCount: COPY_COUNT,
+        itemCount,
+        isAutoPlaying,
+        linkRefs,
+    });
+    const itemsToRender = useMemo(
+    // generate copy contents on both ends to make carousel look like looping
+    () => [
+        ...items.slice(-COPY_COUNT),
+        ...items,
+        ...items.slice(0, COPY_COUNT),
+    ], [items]);
+    const slideToNext = (ignoreHover = false) => {
+        const shouldSlideToNext = ((!isHoveringRef.current && isAutoPlayingRef.current) || ignoreHover) &&
+            currentIndexRef.current <= itemCount;
+        if (shouldSlideToNext) {
+            setDisableTransition(false);
+            setCurrentIndex(currentIndexRef.current + 1);
+        }
+        resetAutoSlide();
+    };
+    const slideToPrev = () => {
+        if (currentIndexRef.current >= 0) {
+            setDisableTransition(false);
+            setCurrentIndex(currentIndexRef.current - 1);
+        }
+        resetAutoSlide();
+    };
+    const handleMouseEnter = () => setIsHovering(true);
+    const handleMouseLeave = () => {
+        setIsHovering(false);
+        resetAutoSlide();
+    };
+    const handleMouseDown = (e) => {
+        resetTimeOut();
+        setStartX(e.clientX);
+        setStartY(e.clientY);
+    };
+    const onMouseUp = () => {
+        if (diffXRef.current > SWIPE_THRESHOLD_X) {
+            setIsLinkClicked(false);
+            setIsAutoPlaying(false);
+            slideToPrev();
+        }
+        if (diffXRef.current < -SWIPE_THRESHOLD_X) {
+            setIsLinkClicked(false);
+            setIsAutoPlaying(false);
+            slideToNext(true);
+        }
+        if (diffXRef.current === 0 && diffYRef.current === 0) {
+            setIsLinkClicked(true);
+        }
+        setStartX(null);
+        setStartY(null);
+        setDiffX(0);
+        setDiffY(0);
+    };
+    const handleTouchStart = (e) => {
+        if (!e.touches.length)
+            return;
+        const touch = e.touches[0];
+        resetTimeOut();
+        handleMouseEnter();
+        setStartX(touch.clientX);
+        setStartY(touch.clientY);
+    };
+    const onTouchEnd = () => {
+        setIsHovering(false);
+        onMouseUp();
+    };
+    const handleSlideToPrev = () => {
+        resetTimeOut();
+        setIsAutoPlaying(false);
+        slideToPrev();
+    };
+    const handleSlideToNext = () => {
+        resetTimeOut();
+        setIsAutoPlaying(false);
+        slideToNext(true);
+    };
+    const handleFocus = (e) => {
+        setIsAutoPlaying(false);
+        const { offsetLeft: newFocusOffset } = e.target;
+        setFocusOffset(newFocusOffset);
+        if (focusOffset === 0) {
+            return;
+        }
+        setDisableAutoFocus(true);
+        if (isHovering && diffXRef.current === 0 && diffYRef.current === 0) {
+            setIsLinkClicked(true);
+            return;
+        }
+        if (focusOffset > newFocusOffset) {
+            setDisableTransition(false);
+            setCurrentIndex(currentIndexRef.current - 1);
+        }
+        if (focusOffset < newFocusOffset) {
+            setDisableTransition(false);
+            setCurrentIndex(currentIndexRef.current + 1);
+        }
+    };
+    const handleBlur = () => {
+        setIsAutoPlaying(true);
+    };
+    useEffect(() => {
+        document.body.addEventListener('mouseup', onMouseUp);
+        document.body.addEventListener('touchend', onTouchEnd);
+        return () => {
+            document.body.removeEventListener('mouseup', onMouseUp);
+            document.body.removeEventListener('touchend', onTouchEnd);
+        };
+    }, []);
+    return {
+        handleSlideToPrev,
+        handleSlideToNext,
+        handleMouseEnter,
+        handleMouseDown,
+        handleMouseLeave,
+        handleTouchStart,
+        handleTransitionEnd,
+        isAutoPlaying,
+        isLinkClicked,
+        itemsToRender,
+        listRef,
+        listStyles,
+        toggleAutoPlay,
+        handleFocus,
+        handleBlur,
+    };
+}

package/HeroCarousel/hooks/useAutoSlide.mjs

@@ -0,0 +1,40 @@
+import { useCallback, useEffect, useState } from 'react';
+const AUTO_SLIDE_SPEED = 4000; // ms
+export function useAutoSlide({ onTimeOut }) {
+    const [isAutoPlaying, setIsAutoPlaying] = useState(true);
+    const [timeoutId, setTimeoutId] = useState(null);
+    const resetTimeOut = useCallback(() => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+    }, [timeoutId]);
+    const activateAutoSlide = () => {
+        resetTimeOut();
+        const newTimeoutId = setTimeout(() => {
+            onTimeOut();
+        }, AUTO_SLIDE_SPEED);
+        setTimeoutId(newTimeoutId);
+    };
+    const resetAutoSlide = () => {
+        if (isAutoPlaying) {
+            activateAutoSlide();
+        }
+    };
+    const toggleAutoPlay = () => {
+        resetTimeOut();
+        if (!isAutoPlaying) {
+            activateAutoSlide();
+        }
+        setIsAutoPlaying((prev) => !prev);
+    };
+    useEffect(() => {
+        activateAutoSlide();
+    }, []);
+    return {
+        isAutoPlaying,
+        setIsAutoPlaying,
+        resetAutoSlide,
+        resetTimeOut,
+        toggleAutoPlay,
+    };
+}

package/HeroCarousel/hooks/useCarouselFocus.mjs

@@ -0,0 +1,22 @@
+import { useEffect, useRef } from 'react';
+export function useCarouselFocus({ getIsCopiedItem, itemLinkClassName, }) {
+    const listRef = useRef(null);
+    const linkRefs = useRef([]);
+    useEffect(() => {
+        if (!listRef.current)
+            return;
+        const linkElements = listRef.current.querySelectorAll(`a.${itemLinkClassName}`);
+        if (!linkElements)
+            return;
+        // NOTE: use NodeList forEach as IE polyfill
+        Array.prototype.forEach.call(linkElements, (link, index) => {
+            linkRefs.current.push(link);
+            link.setAttribute('tabindex', getIsCopiedItem(index) ? '-1' : '0');
+            link.setAttribute('aria-hidden', getIsCopiedItem(index) ? 'true' : 'false');
+        });
+    }, [getIsCopiedItem, itemLinkClassName]);
+    return {
+        linkRefs,
+        listRef,
+    };
+}

package/HeroCarousel/hooks/useSliderMoveEvent.mjs

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+import { useValueRef } from './useValueRef';
+export function useSliderMoveEvent() {
+    const [diffX, setDiffX] = useState(0);
+    const [diffY, setDiffY] = useState(0);
+    const [startX, setStartX] = useState(null);
+    const [startY, setStartY] = useState(null);
+    const diffXRef = useValueRef(diffX);
+    const diffYRef = useValueRef(diffY);
+    const startXRef = useValueRef(startX);
+    const startYRef = useValueRef(startY);
+    const onMouseMove = (e) => {
+        if (startXRef.current === null || startYRef.current === null)
+            return;
+        e.preventDefault();
+        setDiffX(e.clientX - startXRef.current);
+        setDiffY(e.clientY - startYRef.current);
+    };
+    const onTouchMove = (e) => {
+        if (startXRef.current === null ||
+            startYRef.current === null ||
+            !e.touches.length) {
+            return;
+        }
+        const touch = e.touches[0];
+        setDiffX(touch.clientX - startXRef.current);
+        setDiffY(touch.clientY - startYRef.current);
+    };
+    useEffect(() => {
+        document.body.addEventListener('mousemove', onMouseMove);
+        document.body.addEventListener('touchmove', onTouchMove, {
+            passive: true,
+        });
+        return () => {
+            document.body.removeEventListener('mousemove', onMouseMove);
+            document.body.removeEventListener('touchmove', onTouchMove);
+        };
+    }, []);
+    return {
+        diffXRef,
+        diffYRef,
+        setDiffX,
+        setDiffY,
+        setStartX,
+        setStartY,
+    };
+}