@openameba/spindle-ui 0.28.0 → 0.31.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,52 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.31.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.30.0...@openameba/spindle-ui@0.31.0) (2022-05-17)
+
+
+### Features
+
+* **spindle-icons:** update icons ([6984597](https://github.com/openameba/spindle/commit/69845972e18052f9df4a4566e31ff9fe32fec1ce))
+
+
+
+
+
+# [0.30.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.29.0...@openameba/spindle-ui@0.30.0) (2022-04-11)
+
+
+### Features
+
+* **spindle-icons:** update icons ([4213e85](https://github.com/openameba/spindle/commit/4213e853777a2767e4d3627cff70a1a2af23ca2b))
+* **spindle-icons:** update icons ([2a50310](https://github.com/openameba/spindle/commit/2a503101577fc758c766f8b21b809c9118604ad3))
+
+
+
+
+
+# [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 +65,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 +127,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 +194,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 +228,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 +296,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 +354,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/CONTRIBUTING.md

@@ -0,0 +1,19 @@
+# Contributing to Spindle UI
+
+Spindleは、Amebaで利用するデザインシステムです。このリポジトリは、デザインシステムで定義された内容を実際に利用しやすいように実装に落とし込んだものです。
+
+Amebaとして提供される成果物は、それらに則って開発されることを推奨しています。そのため、機能の要望や修正のPull RequestはAmebaに在籍するメンバーからのみとしています(ごめんなさい🙇)。
+
+ただし、リンク先のミス、誤字・脱字などのPull Request、Issue提起は大歓迎です。わかりづらい点や疑問に思う箇所がありましたら、お気軽にお知らせください！
+
+## 新規コンポーネントの作り方
+
+新規コンポーネントを作る際には大まかに以下のフローを辿ります。
+
+1. コンポーネント命名・利用方法などのドキュメント化。通常これはSlackやGitHub Discussionsなどをきっかけに作業が開始され、まずFigmaにルールがまとまります。
+2. Design Docの作成。SpindleではコンポーネントごとにDesign Docを作成し、該当コンポーネントに関わる事柄を整理します。コンポーネント名・概要・使用するデザイントークン・アクセシビリティ対応項目などを記載します。Design Docの雛形はNotionにありますので確認してみてください。
+3. Design Docのレビュー。ある程度Design DocができあがったらSpindleチームやWebチームでレビューをします。この段階でのDesign Docはレビュー用途で使用するので完璧に仕上げる必要はありません！
+4. コンポーネント作成。コンポーネントに関する動作やスタイルを実装します。Storybookやテストの作成も忘れずお願いします！また、コンポーネント設計に困った場合には、すでに作成されているコンポーネントを見たり、[Spindle UIのDesign Doc](/packages/spindle-ui/docs/design-doc.md)を見てみてください。
+5. コンポーネントStabilityの決定。Spindle UIではコンポーネントごとにStabilityを決め、どうゆう利用が想定されているか明記しています。[定められたStability](/packages/spindle-ui#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E4%B8%80%E8%A6%A7)の中から選択肢、Storybookの冒頭に記載します。
+6. Pull Requestの作成。ここまでできたら後はGitHub上でやりとりし、リリースまで進めます。Pull Requestやリリースに関しては[Contributing to Spindle](/CONTRIBUTING.md)を参照してください。
+

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