@openameba/spindle-ui 0.45.0 → 0.46.0

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.46.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.45.0...@openameba/spindle-ui@0.46.0) (2022-08-25)
+
+
+### Bug Fixes
+
+* **spindle-ui:** fix SnackBar component interface for stacking feature ([412930e](https://github.com/openameba/spindle/commit/412930e551e167b3f7673089f45c13b7be031621))
+* **spindle-ui:** fix Toast component interface for stacking feature ([1682a0b](https://github.com/openameba/spindle/commit/1682a0b1fcb06f26a92806d3b1b7112b1a009d85))
+* do hooks called by every render to resolve error of react-hooks/rules-of-hooks ([d1b3eea](https://github.com/openameba/spindle/commit/d1b3eea6a7bf3be8549e3b48020b2b5062228955))
+
+
+### Features
+
+* **spindle-ui:** add DropdownMenu component ([70f8a73](https://github.com/openameba/spindle/commit/70f8a730a044c528f85dd70223ed8f0e98345419))
+* **spindle-ui:** add StackNotificationManager for stacking notification components ([e3a6128](https://github.com/openameba/spindle/commit/e3a61284ba8c91285d1148a470e6ee5e0e911f12))
+* **spindle-ui:** update TextButton docs ([5bad71b](https://github.com/openameba/spindle/commit/5bad71bc10f8da467eda755a8f8bf724172a0d6d))
+
+
+
+
+
 # [0.45.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.44.0...@openameba/spindle-ui@0.45.0) (2022-08-18)
 
 

package/DropdownMenu/DropdownMenu.css

@@ -0,0 +1 @@
+:root{--DropdownMenu-z-index:1;--DropdownMenu-onFocus-outlineColor:var(--color-focus-clarity)}.spui-DropdownMenu{position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.spui-DropdownMenu-menu{-webkit-animation:spui-DropdownMenu-fade-in .3s;animation:spui-DropdownMenu-fade-in .3s;background-color:var(--color-surface-primary);border-radius:12px;box-shadow:0 11px 28px rgba(8,18,26,.12);box-sizing:border-box;left:-256px;list-style:none;margin:0;padding:12px 0;position:absolute;top:0;width:256px;z-index:var(--DropdownMenu-z-index)}.spui-DropdownMenu-menu.is-fade-out{-webkit-animation:spui-DropdownMenu-fade-out .3s;animation:spui-DropdownMenu-fade-out .3s;opacity:0}.spui-DropdownMenu-menu--right{left:auto;right:-256px;width:256px}.spui-DropdownMenu-menuButton{align-items:center;background-color:var(--color-surface-primary);border:none;display:flex;font-size:1em;position:relative;transition:background-color .3s;width:100%}.spui-DropdownMenu-menu--text .spui-DropdownMenu-menuButton,.spui-DropdownMenu-menu--textWithIcon .spui-DropdownMenu-menuButton{padding:10px 16px}.spui-DropdownMenu-menu--headWithIcon .spui-DropdownMenu-menuButton{padding:16px}.spui-DropdownMenu-menu--headWithIconAndCaption .spui-DropdownMenu-menuButton{padding:14px 16px}.spui-DropdownMenu-menuButton:hover{background-color:var(--color-surface-secondary)}.spui-DropdownMenu-menuButton:focus-visible{outline:2px solid var(--DropdownMenu-onFocus-outlineColor);z-index:var(--DropdownMenu-z-index)}.spui-DropdownMenu-menuItem .spui-DropdownMenu-menuButton:before{background-color:var(--color-border-low-emphasis);content:"";height:1px;position:absolute;top:0;width:calc(100% - 32px)}.spui-DropdownMenu-menuItem:first-child .spui-DropdownMenu-menuButton:before{height:0}.spui-DropdownMenu-iconContainer{color:var(--color-object-high-emphasis);display:flex;font-size:1.5em;margin-right:16px}.spui-DropdownMenu-textContainer{text-align:left}.spui-DropdownMenu-title{color:var(--color-text-high-emphasis);font-size:1em;line-height:1.3;margin:0}.spui-DropdownMenu-caption{color:var(--color-text-low-emphasis);font-size:.75em;line-height:1.4;margin:4px 0 0}@-webkit-keyframes spui-DropdownMenu-fade-in{0%{opacity:0}to{opacity:1}}@keyframes spui-DropdownMenu-fade-in{0%{opacity:0}to{opacity:1}}@-webkit-keyframes spui-DropdownMenu-fade-out{0%{opacity:1}to{opacity:0}}@keyframes spui-DropdownMenu-fade-out{0%{opacity:1}to{opacity:0}}@media screen and (max-width:768px){.spui-DropdownMenu-menu{left:auto;right:0;top:auto}.spui-DropdownMenu-menu--right{left:0;top:auto}}@media (prefers-reduced-motion:reduce){.spui-DropdownMenu-menu{-webkit-animation:spui-DropdownMenu-fade-in 0s;animation:spui-DropdownMenu-fade-in 0s}.spui-DropdownMenu-menu.is-fade-out{-webkit-animation:spui-DropdownMenu-fade-out 0s;animation:spui-DropdownMenu-fade-out 0s}}

package/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+declare type Variant = 'text' | 'textWithIcon' | 'headWithIcon' | 'headWithIconAndCaption';
+interface DefaultProps {
+    children: React.ReactNode;
+}
+interface ListItemProps extends DefaultProps {
+    icon?: React.ReactNode;
+    onClick: () => void;
+}
+interface ListProps extends DefaultProps {
+    id?: string;
+    onClose: () => void;
+    open: boolean;
+    position?: 'left' | 'right';
+    triggerRef: React.RefObject<HTMLButtonElement>;
+    variant?: Variant;
+}
+export declare const BLOCK_NAME = "spui-DropdownMenu";
+export declare const DropdownMenu: {
+    Caption: ({ children }: DefaultProps) => JSX.Element;
+    Frame: ({ children }: DefaultProps) => JSX.Element;
+    List: ({ children, id, onClose, open, position, triggerRef, variant, }: ListProps) => JSX.Element;
+    ListItem: ({ children, icon, onClick }: ListItemProps) => JSX.Element;
+    Title: ({ children }: DefaultProps) => JSX.Element;
+};
+export {};
+//# sourceMappingURL=DropdownMenu.d.ts.map

package/DropdownMenu/DropdownMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,aAAK,OAAO,GACR,MAAM,GACN,cAAc,GACd,cAAc,GACd,wBAAwB,CAAC;AAE7B,UAAU,YAAY;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,UAAU,aAAc,SAAQ,YAAY;IAC1C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,UAAU,SAAU,SAAQ,YAAY;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,UAAU,sBAAsB,CAAC;AA+H9C,eAAO,MAAM,YAAY;4BA5HM,YAAY;0BAId,YAAY;4EAYtC,SAAS;4CA6FmC,aAAa;0BAW/B,YAAY;CAUxC,CAAC"}

package/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,119 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownMenu = exports.BLOCK_NAME = void 0;
+var react_1 = __importStar(require("react"));
+exports.BLOCK_NAME = 'spui-DropdownMenu';
+var FADE_IN_ANIMATION = 'spui-DropdownMenu-fade-in';
+var Caption = function (_a) {
+    var children = _a.children;
+    return react_1.default.createElement("p", { className: "".concat(exports.BLOCK_NAME, "-caption") }, children);
+};
+var Frame = function (_a) {
+    var children = _a.children;
+    return react_1.default.createElement("div", { className: "".concat(exports.BLOCK_NAME) }, children);
+};
+var List = function (_a) {
+    var children = _a.children, id = _a.id, onClose = _a.onClose, open = _a.open, _b = _a.position, position = _b === void 0 ? 'left' : _b, triggerRef = _a.triggerRef, _c = _a.variant, variant = _c === void 0 ? 'text' : _c;
+    var CLOSE_KEY_LIST = ['Escape', 'Esc'];
+    var menuEl = (0, react_1.useRef)(null);
+    var _d = (0, react_1.useState)(false), fadeOut = _d[0], setFadeOut = _d[1];
+    var onClickBody = (0, react_1.useCallback)(function (e) {
+        if (!open)
+            return;
+        if (triggerRef.current && e.composedPath().includes(triggerRef.current))
+            return;
+        var menuEl = document.querySelector(".".concat(exports.BLOCK_NAME, "-menu"));
+        if (menuEl && e.composedPath().includes(menuEl))
+            return;
+        setFadeOut(true);
+    }, [open, setFadeOut, triggerRef]);
+    var onClickCloser = (0, react_1.useCallback)(function () {
+        var _a;
+        setFadeOut(true);
+        (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [setFadeOut, triggerRef]);
+    var handleKeyDown = (0, react_1.useCallback)(function (e) {
+        if (CLOSE_KEY_LIST.includes(e.key)) {
+            onClickCloser();
+        }
+    }, [onClickCloser]);
+    var handleAnimationEnd = (0, react_1.useCallback)(function (event) {
+        if (event.animationName === FADE_IN_ANIMATION)
+            return;
+        onClose();
+        setFadeOut(false);
+    }, [onClose, setFadeOut]);
+    (0, react_1.useEffect)(function () {
+        var _a;
+        (_a = menuEl.current) === null || _a === void 0 ? void 0 : _a.addEventListener('animationend', handleAnimationEnd, false);
+        return function () {
+            var _a;
+            return (_a = menuEl.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('animationend', handleAnimationEnd, false);
+        };
+    }, [menuEl, handleAnimationEnd]);
+    (0, react_1.useEffect)(function () {
+        window.addEventListener('click', onClickBody, false);
+        return function () {
+            window.removeEventListener('click', onClickBody, false);
+        };
+    }, [onClickBody]);
+    (0, react_1.useEffect)(function () {
+        window.addEventListener('keydown', handleKeyDown);
+        return function () {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [handleKeyDown]);
+    if (!open) {
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    }
+    return (react_1.default.createElement("ul", { id: id, onClick: onClickCloser, className: [
+            "".concat(exports.BLOCK_NAME, "-menu"),
+            "".concat(exports.BLOCK_NAME, "-menu--").concat(variant),
+            position === 'right' && "".concat(exports.BLOCK_NAME, "-menu--right"),
+            fadeOut && 'is-fade-out',
+        ]
+            .filter(Boolean)
+            .join(' '), ref: menuEl, role: "menu" }, children));
+};
+var ListItem = function (_a) {
+    var children = _a.children, icon = _a.icon, onClick = _a.onClick;
+    return (react_1.default.createElement("li", { className: "".concat(exports.BLOCK_NAME, "-menuItem"), role: "menuItem" },
+        react_1.default.createElement("button", { className: "".concat(exports.BLOCK_NAME, "-menuButton"), onClick: onClick },
+            icon && react_1.default.createElement("div", { className: "".concat(exports.BLOCK_NAME, "-iconContainer") }, icon),
+            react_1.default.createElement("div", { className: "".concat(exports.BLOCK_NAME, "-textContainer") }, children))));
+};
+var Title = function (_a) {
+    var children = _a.children;
+    return react_1.default.createElement("p", { className: "".concat(exports.BLOCK_NAME, "-title") }, children);
+};
+exports.DropdownMenu = {
+    Caption: Caption,
+    Frame: Frame,
+    List: List,
+    ListItem: ListItem,
+    Title: Title,
+};
+//# sourceMappingURL=DropdownMenu.js.map

package/DropdownMenu/DropdownMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.js","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"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"}

package/DropdownMenu/DropdownMenu.mjs

@@ -0,0 +1,82 @@
+import React, { useEffect, useCallback, useRef, useState } from 'react';
+export const BLOCK_NAME = 'spui-DropdownMenu';
+const FADE_IN_ANIMATION = 'spui-DropdownMenu-fade-in';
+const Caption = ({ children }) => {
+    return React.createElement("p", { className: `${BLOCK_NAME}-caption` }, children);
+};
+const Frame = ({ children }) => {
+    return React.createElement("div", { className: `${BLOCK_NAME}` }, children);
+};
+const List = ({ children, id, onClose, open, position = 'left', triggerRef, variant = 'text', }) => {
+    const CLOSE_KEY_LIST = ['Escape', 'Esc'];
+    const menuEl = useRef(null);
+    const [fadeOut, setFadeOut] = useState(false);
+    const onClickBody = useCallback((e) => {
+        if (!open)
+            return;
+        if (triggerRef.current && e.composedPath().includes(triggerRef.current))
+            return;
+        const menuEl = document.querySelector(`.${BLOCK_NAME}-menu`);
+        if (menuEl && e.composedPath().includes(menuEl))
+            return;
+        setFadeOut(true);
+    }, [open, setFadeOut, triggerRef]);
+    const onClickCloser = useCallback(() => {
+        setFadeOut(true);
+        triggerRef.current?.focus();
+    }, [setFadeOut, triggerRef]);
+    const handleKeyDown = useCallback((e) => {
+        if (CLOSE_KEY_LIST.includes(e.key)) {
+            onClickCloser();
+        }
+    }, [onClickCloser]);
+    const handleAnimationEnd = useCallback((event) => {
+        if (event.animationName === FADE_IN_ANIMATION)
+            return;
+        onClose();
+        setFadeOut(false);
+    }, [onClose, setFadeOut]);
+    useEffect(() => {
+        menuEl.current?.addEventListener('animationend', handleAnimationEnd, false);
+        return () => menuEl.current?.removeEventListener('animationend', handleAnimationEnd, false);
+    }, [menuEl, handleAnimationEnd]);
+    useEffect(() => {
+        window.addEventListener('click', onClickBody, false);
+        return () => {
+            window.removeEventListener('click', onClickBody, false);
+        };
+    }, [onClickBody]);
+    useEffect(() => {
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [handleKeyDown]);
+    if (!open) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement("ul", { id: id, onClick: onClickCloser, className: [
+            `${BLOCK_NAME}-menu`,
+            `${BLOCK_NAME}-menu--${variant}`,
+            position === 'right' && `${BLOCK_NAME}-menu--right`,
+            fadeOut && 'is-fade-out',
+        ]
+            .filter(Boolean)
+            .join(' '), ref: menuEl, role: "menu" }, children));
+};
+const ListItem = ({ children, icon, onClick }) => {
+    return (React.createElement("li", { className: `${BLOCK_NAME}-menuItem`, role: "menuItem" },
+        React.createElement("button", { className: `${BLOCK_NAME}-menuButton`, onClick: onClick },
+            icon && React.createElement("div", { className: `${BLOCK_NAME}-iconContainer` }, icon),
+            React.createElement("div", { className: `${BLOCK_NAME}-textContainer` }, children))));
+};
+const Title = ({ children }) => {
+    return React.createElement("p", { className: `${BLOCK_NAME}-title` }, children);
+};
+export const DropdownMenu = {
+    Caption,
+    Frame,
+    List,
+    ListItem,
+    Title,
+};

package/DropdownMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { DropdownMenu } from './DropdownMenu';
+//# sourceMappingURL=index.d.ts.map

package/DropdownMenu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/DropdownMenu/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownMenu = void 0;
+var DropdownMenu_1 = require("./DropdownMenu");
+Object.defineProperty(exports, "DropdownMenu", { enumerable: true, get: function () { return DropdownMenu_1.DropdownMenu; } });
+//# sourceMappingURL=index.js.map

package/DropdownMenu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/DropdownMenu/index.ts"],"names":[],"mappings":";;;AAAA,+CAA8C;AAArC,4GAAA,YAAY,OAAA"}

package/DropdownMenu/index.mjs

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

package/HeroCarousel/HeroCarousel.js

@@ -15,13 +15,13 @@ var BLOCK_NAME = 'spui-HeroCarousel';
 var ITEM_LINK_CLASS_NAME = 'js-auto-play-carousel-item-link';
 exports.HeroCarousel = react_1.default.memo(function HeroCarousel(_a) {
     var carouselList = _a.carouselList;
-    if (carouselList.length === 0) {
-        return null;
-    }
     var _b = (0, useAutoPlayCarousel_1.useAutoPlayCarousel)({
         items: carouselList,
         itemLinkClassName: ITEM_LINK_CLASS_NAME,
     }), handleSlideToPrev = _b.handleSlideToPrev, handleSlideToNext = _b.handleSlideToNext, handleMouseEnter = _b.handleMouseEnter, handleMouseDown = _b.handleMouseDown, handleMouseLeave = _b.handleMouseLeave, handleTouchStart = _b.handleTouchStart, handleTransitionEnd = _b.handleTransitionEnd, isAutoPlaying = _b.isAutoPlaying, isLinkClicked = _b.isLinkClicked, itemsToRender = _b.itemsToRender, listRef = _b.listRef, listStyles = _b.listStyles, toggleAutoPlay = _b.toggleAutoPlay, handleFocus = _b.handleFocus, handleBlur = _b.handleBlur;
+    if (carouselList.length === 0) {
+        return null;
+    }
     return (react_1.default.createElement("div", null,
         react_1.default.createElement("div", { className: "".concat(BLOCK_NAME, "-container"), onBlur: handleBlur, onFocus: handleFocus, onMouseDown: handleMouseDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onTouchStart: handleTouchStart, onTransitionEnd: handleTransitionEnd },
             react_1.default.createElement("ul", { "aria-roledescription": "\u30AB\u30EB\u30FC\u30BB\u30EB", className: "".concat(BLOCK_NAME, "-list"), ref: listRef, role: "group", style: listStyles }, itemsToRender.map(function (item, index) { return (react_1.default.createElement(HeroCarouselItem_1.default, { carouselItem: item, isLinkClicked: isLinkClicked, itemLinkClassName: ITEM_LINK_CLASS_NAME, key: "hero-carousel-".concat(index) })); }))),

package/HeroCarousel/HeroCarousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeroCarousel.js","sourceRoot":"","sources":["../../src/HeroCarousel/HeroCarousel.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAkC;AAClC,4EAAsD;AACtD,8EAAwD;AACxD,wDAAkC;AAClC,8DAAwC;AAExC,wEAAkD;AAClD,mEAAkE;AAMlE,IAAM,UAAU,GAAG,mBAAmB,CAAC;AACvC,IAAM,oBAAoB,GAAG,iCAAiC,CAAC;AAElD,QAAA,YAAY,GAAc,eAAK,CAAC,IAAI,CAAC,SAAS,YAAY,CAAC,EAEvE;QADC,YAAY,kBAAA;IAEZ,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;QAC7B,OAAO,IAAI,CAAC;KACb;IAEK,IAAA,KAgBF,IAAA,yCAAmB,EAAC;QACtB,KAAK,EAAE,YAAY;QACnB,iBAAiB,EAAE,oBAAoB;KACxC,CAAC,EAlBA,iBAAiB,uBAAA,EACjB,iBAAiB,uBAAA,EACjB,gBAAgB,sBAAA,EAChB,eAAe,qBAAA,EACf,gBAAgB,sBAAA,EAChB,gBAAgB,sBAAA,EAChB,mBAAmB,yBAAA,EACnB,aAAa,mBAAA,EACb,aAAa,mBAAA,EACb,aAAa,mBAAA,EACb,OAAO,aAAA,EACP,UAAU,gBAAA,EACV,cAAc,oBAAA,EACd,WAAW,iBAAA,EACX,UAAU,gBAIV,CAAC;IAEH,OAAO,CACL;QACE,uCACE,SAAS,EAAE,UAAG,UAAU,eAAY,EACpC,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,eAAe,EAC5B,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAC9B,eAAe,EAAE,mBAAmB;YAEpC,8DACuB,gCAAO,EAC5B,SAAS,EAAE,UAAG,UAAU,UAAO,EAC/B,GAAG,EAAE,OAAO,EACZ,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,UAAU,IAEhB,aAAa,CAAC,GAAG,CAAC,UAAC,IAAkB,EAAE,KAAa,IAAK,OAAA,CACxD,8BAAC,0BAAgB,IACf,YAAY,EAAE,IAAI,EAClB,aAAa,EAAE,aAAa,EAC5B,iBAAiB,EAAE,oBAAoB,EACvC,GAAG,EAAE,wBAAiB,KAAK,CAAE,GAC7B,CACH,EAPyD,CAOzD,CAAC,CACC,CACD;QAEN,uCAAK,SAAS,EAAE,UAAG,UAAU,cAAW;YACtC,wDACa,+DAAa,EACxB,SAAS,EAAE,UAAG,UAAU,sBAAY,UAAU,mBAAgB,EAC9D,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,iBAAiB;gBAE1B,8BAAC,yBAAe,mBAAc,IAAI,GAAI,CAC/B;YACT,wDACc,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACjD,SAAS,EAAE,UAAG,UAAU,aAAU,EAClC,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,cAAc,IAEtB,aAAa,CAAC,CAAC,CAAC,CACf,8BAAC,eAAK,mBAAc,IAAI,GAAI,CAC7B,CAAC,CAAC,CAAC,CACF,8BAAC,kBAAQ,mBAAc,IAAI,GAAI,CAChC,CACM;YACT,wDACa,qEAAc,EACzB,SAAS,EAAE,UAAG,UAAU,sBAAY,UAAU,mBAAgB,EAC9D,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,iBAAiB;gBAE1B,8BAAC,0BAAgB,mBAAc,IAAI,GAAI,CAChC,CACL,CACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"HeroCarousel.js","sourceRoot":"","sources":["../../src/HeroCarousel/HeroCarousel.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAkC;AAClC,4EAAsD;AACtD,8EAAwD;AACxD,wDAAkC;AAClC,8DAAwC;AAExC,wEAAkD;AAClD,mEAAkE;AAMlE,IAAM,UAAU,GAAG,mBAAmB,CAAC;AACvC,IAAM,oBAAoB,GAAG,iCAAiC,CAAC;AAElD,QAAA,YAAY,GAAc,eAAK,CAAC,IAAI,CAAC,SAAS,YAAY,CAAC,EAEvE;QADC,YAAY,kBAAA;IAEN,IAAA,KAgBF,IAAA,yCAAmB,EAAC;QACtB,KAAK,EAAE,YAAY;QACnB,iBAAiB,EAAE,oBAAoB;KACxC,CAAC,EAlBA,iBAAiB,uBAAA,EACjB,iBAAiB,uBAAA,EACjB,gBAAgB,sBAAA,EAChB,eAAe,qBAAA,EACf,gBAAgB,sBAAA,EAChB,gBAAgB,sBAAA,EAChB,mBAAmB,yBAAA,EACnB,aAAa,mBAAA,EACb,aAAa,mBAAA,EACb,aAAa,mBAAA,EACb,OAAO,aAAA,EACP,UAAU,gBAAA,EACV,cAAc,oBAAA,EACd,WAAW,iBAAA,EACX,UAAU,gBAIV,CAAC;IAEH,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;QAC7B,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL;QACE,uCACE,SAAS,EAAE,UAAG,UAAU,eAAY,EACpC,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,eAAe,EAC5B,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAC9B,eAAe,EAAE,mBAAmB;YAEpC,8DACuB,gCAAO,EAC5B,SAAS,EAAE,UAAG,UAAU,UAAO,EAC/B,GAAG,EAAE,OAAO,EACZ,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,UAAU,IAEhB,aAAa,CAAC,GAAG,CAAC,UAAC,IAAkB,EAAE,KAAa,IAAK,OAAA,CACxD,8BAAC,0BAAgB,IACf,YAAY,EAAE,IAAI,EAClB,aAAa,EAAE,aAAa,EAC5B,iBAAiB,EAAE,oBAAoB,EACvC,GAAG,EAAE,wBAAiB,KAAK,CAAE,GAC7B,CACH,EAPyD,CAOzD,CAAC,CACC,CACD;QAEN,uCAAK,SAAS,EAAE,UAAG,UAAU,cAAW;YACtC,wDACa,+DAAa,EACxB,SAAS,EAAE,UAAG,UAAU,sBAAY,UAAU,mBAAgB,EAC9D,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,iBAAiB;gBAE1B,8BAAC,yBAAe,mBAAc,IAAI,GAAI,CAC/B;YACT,wDACc,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACjD,SAAS,EAAE,UAAG,UAAU,aAAU,EAClC,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,cAAc,IAEtB,aAAa,CAAC,CAAC,CAAC,CACf,8BAAC,eAAK,mBAAc,IAAI,GAAI,CAC7B,CAAC,CAAC,CAAC,CACF,8BAAC,kBAAQ,mBAAc,IAAI,GAAI,CAChC,CACM;YACT,wDACa,qEAAc,EACzB,SAAS,EAAE,UAAG,UAAU,sBAAY,UAAU,mBAAgB,EAC9D,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,iBAAiB;gBAE1B,8BAAC,0BAAgB,mBAAc,IAAI,GAAI,CAChC,CACL,CACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/HeroCarousel/HeroCarousel.mjs

@@ -8,13 +8,13 @@ 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,
     });
+    if (carouselList.length === 0) {
+        return null;
+    }
     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}` }))))),

package/SnackBar/SnackBar.css

@@ -1 +1 @@
-:root{--IconButton-tapHighlightColor:var(--gray-5-alpha);--IconButton-onFocus-outlineColor:var(--color-focus-clarity);--IconButton--contained-backgroundColor:var(--color-surface-accent-primary);--IconButton--contained-color:var(--color-object-high-emphasis-inverse);--IconButton--contained-onActive-backgroundColor:var(--primary-green-100);--IconButton--contained-onHover-backgroundColor:var(--primary-green-100);--IconButton--outlined-borderColor:var(--color-border-accent-primary);--IconButton--outlined-color:var(--color-object-accent-primary);--IconButton--outlined-onActive-backgroundColor:var(--primary-green-5);--IconButton--outlined-onHover-backgroundColor:var(--primary-green-5);--IconButton--lighted-backgroundColor:var(--color-surface-accent-primary-light);--IconButton--lighted-color:var(--color-object-accent-primary);--IconButton--lighted-onActive-backgroundColor:var(--primary-green-10);--IconButton--lighted-onHover-backgroundColor:var(--primary-green-10);--IconButton--neutral-backgroundColor:var(--color-surface-tertiary);--IconButton--neutral-color:var(--color-object-medium-emphasis);--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--danger-borderColor:var(--color-border-caution);--IconButton--danger-color:var(--color-object-caution);--IconButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--IconButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-IconButton{align-items:center;border-radius:100%;box-sizing:border-box;display:inline-flex;justify-content:center;margin:0;padding:0;-webkit-tap-highlight-color:var(--IconButton-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-IconButton:disabled{opacity:.3}.spui-IconButton:focus{outline:2px solid var(--IconButton-onFocus-outlineColor);outline-offset:1px}.spui-IconButton:focus:not(:focus-visible){outline:none}.spui-IconButton--large{font-size:1.375em;height:48px;width:48px}.spui-IconButton--medium{font-size:1.25em;height:40px;width:40px}.spui-IconButton--small{font-size:1em;height:32px;width:32px}.spui-IconButton--exSmall{font-size:1em;height:24px;width:24px}.spui-IconButton--contained{background-color:var(--IconButton--contained-backgroundColor);border:none;color:var(--IconButton--contained-color)}.spui-IconButton--contained:active{background-color:var(--IconButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--contained:not([disabled]):hover{background-color:var(--IconButton--contained-onHover-backgroundColor)}}.spui-IconButton--outlined{background-color:transparent;border:2px solid var(--IconButton--outlined-borderColor);color:var(--IconButton--outlined-color)}.spui-IconButton--outlined:active{background-color:var(--IconButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--outlined:not([disabled]):hover{background-color:var(--IconButton--outlined-onHover-backgroundColor)}}.spui-IconButton--lighted{background-color:var(--IconButton--lighted-backgroundColor);border:none;color:var(--IconButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-IconButton--lighted:active{background-color:var(--IconButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--lighted:not([disabled]):hover{background-color:var(--IconButton--lighted-onHover-backgroundColor)}}.spui-IconButton--neutral{background-color:var(--IconButton--neutral-backgroundColor);border:none;color:var(--IconButton--neutral-color)}.spui-IconButton--neutral:active{background-color:var(--IconButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--neutral:not([disabled]):hover{background-color:var(--IconButton--neutral-onHover-backgroundColor)}}.spui-IconButton--danger{background-color:transparent;border:2px solid var(--IconButton--danger-borderColor);color:var(--IconButton--danger-color)}.spui-IconButton--danger:active{background-color:var(--IconButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--danger:hover{background-color:var(--IconButton--danger-onHover-backgroundColor)}}:root{--TextLink-tapHighlightColor:var(--white-60-alpha);--TextLink-onFocus-outlineColor:var(--color-focus-clarity);--TextLink-color:var(--color-text-accent-primary);--TextLink-icon-color:var(--color-object-accent-primary);--TextLink-fontWeight:bold;--TextLink--subtle-color:var(--color-text-low-emphasis);--TextLink--subtle-icon-color:var(--color-object-low-emphasis)}.spui-TextLink{border-radius:4px;color:var(--TextLink-color);font-family:inherit;font-weight:var(--TextLink-fontWeight);-webkit-tap-highlight-color:var(--TextLink-tapHighlightColor)}.spui-TextLink:focus{outline:2px solid var(--TextLink-onFocus-outlineColor);outline-offset:1px}.spui-TextLink:focus:not(:focus-visible){outline:none}.spui-TextLink--subtle{color:var(--TextLink--subtle-color)}.spui-TextLink--hasIcon{align-items:center;display:inline-flex}.spui-TextLink-icon{line-height:0}.spui-TextLink--iconstart .spui-TextLink-icon{margin-right:4px}.spui-TextLink--iconend{flex-direction:row-reverse}.spui-TextLink--iconend .spui-TextLink-icon{margin-left:4px}.spui-TextLink{text-decoration:underline}.spui-TextLink--hasIcon,.spui-TextLink--underlinehover{text-decoration:none}@media (hover:hover){.spui-TextLink:hover{text-decoration:none}:is(.spui-TextLink--hasIcon,.spui-TextLink--underlinehover):hover{text-decoration:underline}}:root{--TextButton-tapHighlightColor:var(--white-60-alpha);--TextButton-onFocus-outlineColor:var(--color-focus-clarity);--TextButton-color:var(--color-text-accent-primary);--TextButton-icon-color:var(--color-object-accent-primary);--TextButton-fontWeight:bold;--TextButton--subtle-color:var(--color-text-low-emphasis);--TextButton--subtle-icon-color:var(--color-object-low-emphasis)}.spui-TextButton{background:none;border:none;border-radius:4px;color:var(--TextButton-color);font-family:inherit;font-size:1em;font-weight:var(--TextButton-fontWeight);margin:0;padding:0;-webkit-tap-highlight-color:var(--TextButton-tapHighlightColor)}.spui-TextButton:focus{outline:2px solid var(--TextButton-onFocus-outlineColor);outline-offset:1px}.spui-TextButton:focus:not(:focus-visible){outline:none}.spui-TextButton--subtle{color:var(--TextButton--subtle-color)}.spui-TextButton--hasIcon{align-items:center;display:inline-flex}.spui-TextButton-icon{line-height:0}.spui-TextButton--iconstart .spui-TextButton-icon{margin-right:4px}.spui-TextButton--iconend{flex-direction:row-reverse}.spui-TextButton--iconend .spui-TextButton-icon{margin-left:4px}.spui-TextButton{text-decoration:underline}.spui-TextButton--hasIcon,.spui-TextButton--underlinehover{text-decoration:none}@media (hover:hover){.spui-TextButton:hover{text-decoration:none}:is(.spui-TextButton--hasIcon,.spui-TextButton--underlinehover):hover{text-decoration:underline}}:root{--SnackBar-z-index:1;--SnackBar-onFocus-outlineColor:var(--color-focus-clarity)}.spui-SnackBar{box-sizing:border-box;left:0;padding:0 var(--SnackBar--offset-right) 0 var(--SnackBar--offset-left);position:fixed;right:0;text-align:var(--SnackBar--text-align);z-index:var(--SnackBar-z-index)}.spui-SnackBar-content{align-items:center;border-radius:16px;box-shadow:0 11px 28px rgba(8,18,26,.24);box-sizing:border-box;display:inline-grid;grid-template:"Icon Text Button IconButton" auto/auto 1fr auto auto;max-width:440px;min-height:52px;min-width:360px;padding:14px 16px 14px 20px}.spui-SnackBar-icon{flex-shrink:0;font-size:1.375rem;grid-area:Icon;line-height:0;margin-right:12px}.spui-SnackBar-text{--SnackBar-max-lines:3;font-family:inherit;font-size:.875rem;font-weight:700;grid-area:Text;line-height:1.6;max-height:calc(1.6em*var(--SnackBar-max-lines));overflow:hidden;text-align:left}.spui-SnackBar-button{font-size:.875rem;grid-area:Button;margin-left:16px;margin-right:13px;position:relative}.spui-SnackBar-button:after{bottom:0;content:"";display:inline-block;position:absolute;right:-12px;top:0;width:1px}.spui-SnackBar--top{top:0;transform:translateY(calc(var(--SnackBar--initial-height-top) - var(--SnackBar--offset-top)))}.spui-SnackBar--bottom{bottom:0;transform:translateY(calc(var(--SnackBar--initial-height-bottom)*-1 - var(--SnackBar--offset-bottom)*-1))}.spui-SnackBar--slide{opacity:0;transition:transform .3s ease,opacity .3s ease}.spui-SnackBar--hidden{visibility:hidden}.spui-SnackBar-slide--in{opacity:1;transition:transform .5s ease,opacity .5s ease}.spui-SnackBar-slide--in.spui-SnackBar--top{transform:translateY(var(--SnackBar--order-offset-top))}.spui-SnackBar-slide--in.spui-SnackBar--bottom{transform:translateY(var(--SnackBar--order-offset-bottom))}.spui-SnackBar-iconButton{--IconButton--neutral-backgroundColor:transparent;grid-area:IconButton;margin-left:12px}.spui-SnackBar-content--information{background-color:var(--gray-80);color:var(--color-text-high-emphasis-inverse)}.spui-SnackBar-iconButton--information{--IconButton--neutral-onActive-backgroundColor:var(--white-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--white-20-alpha);--IconButton--neutral-color:var(--color-object-high-emphasis-inverse)}.spui-SnackBar-button--information{--TextLink-color:var(--color-text-high-emphasis-inverse);--TextLink-icon-color:var(--color-object-high-emphasis-inverse);--TextButton-color:var(--color-text-high-emphasis-inverse);--TextButton-icon-color:var(--color-object-high-emphasis-inverse)}.spui-SnackBar-button--information:after{background:var(--white-20-alpha)}.spui-SnackBar-content--confirmation{background-color:var(--color-surface-primary);border:2px solid var(--color-border-low-emphasis);color:var(--color-text-accent-primary)}.spui-SnackBar-iconButton--confirmation{--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-color:var(--color-object-low-emphasis)}.spui-SnackBar-button--confirmation{--TextLink-color:var(--color-text-low-emphasis);--TextLink-icon-color:var(--color-object-low-emphasis);--TextButton-color:var(--color-text-low-emphasis);--TextButton-icon-color:var(--color-object-low-emphasis)}.spui-SnackBar-button--confirmation:after{background:var(--color-border-low-emphasis)}.spui-SnackBar-content--error{background-color:var(--color-surface-caution);color:var(--color-text-high-emphasis-inverse)}.spui-SnackBar-iconButton--error{--IconButton--neutral-onActive-backgroundColor:var(--white-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--white-20-alpha);--IconButton--neutral-color:var(--color-object-high-emphasis-inverse)}.spui-SnackBar-button--error{--TextLink-color:var(--color-text-high-emphasis-inverse);--TextLink-icon-color:var(--color-object-high-emphasis-inverse);--TextButton-color:var(--color-text-high-emphasis-inverse);--TextButton-icon-color:var(--color-object-high-emphasis-inverse)}.spui-SnackBar-button--error:after{background:var(--white-20-alpha)}@media (prefers-reduced-motion:reduce){.spui-SnackBar--slide,.spui-SnackBar-slide--in{transition-duration:.1ms}}@media (max-width:464px){.spui-SnackBar{padding:0 12px;text-align:center;bottom:0;top:unset;transform:translateY(calc(var(--SnackBar--initial-height-bottom)*-1 - var(--SnackBar--offset-bottom)*-1))}.spui-SnackBar-slide--in.spui-SnackBar--top{transform:translateY(var(--SnackBar--order-offset-bottom))}.spui-SnackBar-content{border-radius:82px;max-width:400px;min-width:calc(100% - 24px);padding:14px 16px 14px 20px}}@media (max-width:320px){.spui-SnackBar-text{--SnackBar-max-lines:4}}
+:root{--IconButton-tapHighlightColor:var(--gray-5-alpha);--IconButton-onFocus-outlineColor:var(--color-focus-clarity);--IconButton--contained-backgroundColor:var(--color-surface-accent-primary);--IconButton--contained-color:var(--color-object-high-emphasis-inverse);--IconButton--contained-onActive-backgroundColor:var(--primary-green-100);--IconButton--contained-onHover-backgroundColor:var(--primary-green-100);--IconButton--outlined-borderColor:var(--color-border-accent-primary);--IconButton--outlined-color:var(--color-object-accent-primary);--IconButton--outlined-onActive-backgroundColor:var(--primary-green-5);--IconButton--outlined-onHover-backgroundColor:var(--primary-green-5);--IconButton--lighted-backgroundColor:var(--color-surface-accent-primary-light);--IconButton--lighted-color:var(--color-object-accent-primary);--IconButton--lighted-onActive-backgroundColor:var(--primary-green-10);--IconButton--lighted-onHover-backgroundColor:var(--primary-green-10);--IconButton--neutral-backgroundColor:var(--color-surface-tertiary);--IconButton--neutral-color:var(--color-object-medium-emphasis);--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--danger-borderColor:var(--color-border-caution);--IconButton--danger-color:var(--color-object-caution);--IconButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--IconButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-IconButton{align-items:center;border-radius:100%;box-sizing:border-box;display:inline-flex;justify-content:center;margin:0;padding:0;-webkit-tap-highlight-color:var(--IconButton-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-IconButton:disabled{opacity:.3}.spui-IconButton:focus{outline:2px solid var(--IconButton-onFocus-outlineColor);outline-offset:1px}.spui-IconButton:focus:not(:focus-visible){outline:none}.spui-IconButton--large{font-size:1.375em;height:48px;width:48px}.spui-IconButton--medium{font-size:1.25em;height:40px;width:40px}.spui-IconButton--small{font-size:1em;height:32px;width:32px}.spui-IconButton--exSmall{font-size:1em;height:24px;width:24px}.spui-IconButton--contained{background-color:var(--IconButton--contained-backgroundColor);border:none;color:var(--IconButton--contained-color)}.spui-IconButton--contained:active{background-color:var(--IconButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--contained:not([disabled]):hover{background-color:var(--IconButton--contained-onHover-backgroundColor)}}.spui-IconButton--outlined{background-color:transparent;border:2px solid var(--IconButton--outlined-borderColor);color:var(--IconButton--outlined-color)}.spui-IconButton--outlined:active{background-color:var(--IconButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--outlined:not([disabled]):hover{background-color:var(--IconButton--outlined-onHover-backgroundColor)}}.spui-IconButton--lighted{background-color:var(--IconButton--lighted-backgroundColor);border:none;color:var(--IconButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-IconButton--lighted:active{background-color:var(--IconButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--lighted:not([disabled]):hover{background-color:var(--IconButton--lighted-onHover-backgroundColor)}}.spui-IconButton--neutral{background-color:var(--IconButton--neutral-backgroundColor);border:none;color:var(--IconButton--neutral-color)}.spui-IconButton--neutral:active{background-color:var(--IconButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--neutral:not([disabled]):hover{background-color:var(--IconButton--neutral-onHover-backgroundColor)}}.spui-IconButton--danger{background-color:transparent;border:2px solid var(--IconButton--danger-borderColor);color:var(--IconButton--danger-color)}.spui-IconButton--danger:active{background-color:var(--IconButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--danger:hover{background-color:var(--IconButton--danger-onHover-backgroundColor)}}:root{--TextLink-tapHighlightColor:var(--white-60-alpha);--TextLink-onFocus-outlineColor:var(--color-focus-clarity);--TextLink-color:var(--color-text-accent-primary);--TextLink-icon-color:var(--color-object-accent-primary);--TextLink-fontWeight:bold;--TextLink--subtle-color:var(--color-text-low-emphasis);--TextLink--subtle-icon-color:var(--color-object-low-emphasis)}.spui-TextLink{border-radius:4px;color:var(--TextLink-color);font-family:inherit;font-weight:var(--TextLink-fontWeight);-webkit-tap-highlight-color:var(--TextLink-tapHighlightColor)}.spui-TextLink:focus{outline:2px solid var(--TextLink-onFocus-outlineColor);outline-offset:1px}.spui-TextLink:focus:not(:focus-visible){outline:none}.spui-TextLink--subtle{color:var(--TextLink--subtle-color)}.spui-TextLink--hasIcon{align-items:center;display:inline-flex}.spui-TextLink-icon{line-height:0}.spui-TextLink--iconstart .spui-TextLink-icon{margin-right:4px}.spui-TextLink--iconend{flex-direction:row-reverse}.spui-TextLink--iconend .spui-TextLink-icon{margin-left:4px}.spui-TextLink{text-decoration:underline}.spui-TextLink--hasIcon,.spui-TextLink--underlinehover{text-decoration:none}@media (hover:hover){.spui-TextLink:hover{text-decoration:none}:is(.spui-TextLink--hasIcon,.spui-TextLink--underlinehover):hover{text-decoration:underline}}:root{--TextButton-tapHighlightColor:var(--white-60-alpha);--TextButton-onFocus-outlineColor:var(--color-focus-clarity);--TextButton-color:var(--color-text-accent-primary);--TextButton-icon-color:var(--color-object-accent-primary);--TextButton-fontWeight:bold;--TextButton--subtle-color:var(--color-text-low-emphasis);--TextButton--subtle-icon-color:var(--color-object-low-emphasis)}.spui-TextButton{background:none;border:none;border-radius:4px;color:var(--TextButton-color);font-family:inherit;font-size:1em;font-weight:var(--TextButton-fontWeight);margin:0;padding:0;-webkit-tap-highlight-color:var(--TextButton-tapHighlightColor)}.spui-TextButton:focus{outline:2px solid var(--TextButton-onFocus-outlineColor);outline-offset:1px}.spui-TextButton:focus:not(:focus-visible){outline:none}.spui-TextButton--subtle{color:var(--TextButton--subtle-color)}.spui-TextButton--hasIcon{align-items:center;display:inline-flex}.spui-TextButton-icon{line-height:0}.spui-TextButton--iconstart .spui-TextButton-icon{margin-right:4px}.spui-TextButton--iconend{flex-direction:row-reverse}.spui-TextButton--iconend .spui-TextButton-icon{margin-left:4px}.spui-TextButton{text-decoration:underline}.spui-TextButton--hasIcon,.spui-TextButton--underlinehover{text-decoration:none}@media (hover:hover){.spui-TextButton:hover{text-decoration:none}:is(.spui-TextButton--hasIcon,.spui-TextButton--underlinehover):hover{text-decoration:underline}}:root{--SnackBar-z-index:1;--SnackBar-onFocus-outlineColor:var(--color-focus-clarity)}.spui-SnackBar{box-sizing:border-box;left:0;opacity:0;padding:0 var(--SnackBar--offset-right) 0 var(--SnackBar--offset-left);pointer-events:none;position:fixed;right:0;text-align:var(--SnackBar--text-align);z-index:var(--SnackBar-z-index)}.spui-SnackBar-content{align-items:center;border-radius:16px;box-shadow:0 11px 28px rgba(8,18,26,.24);box-sizing:border-box;display:inline-grid;grid-template:"Icon Text Button IconButton" auto/auto 1fr auto auto;max-width:440px;min-height:52px;min-width:360px;padding:14px 16px 14px 20px;pointer-events:auto}.spui-SnackBar-icon{flex-shrink:0;font-size:1.375rem;grid-area:Icon;line-height:0;margin-right:12px}.spui-SnackBar-text{--SnackBar-max-lines:3;font-family:inherit;font-size:.875rem;font-weight:700;grid-area:Text;line-height:1.6;max-height:calc(1.6em*var(--SnackBar-max-lines));overflow:hidden;text-align:left}.spui-SnackBar-button{font-size:.875rem;grid-area:Button;margin-left:16px;margin-right:13px;position:relative}.spui-SnackBar-button:after{bottom:0;content:"";display:inline-block;position:absolute;right:-12px;top:0;width:1px}.spui-SnackBar--top{top:0;transform:translateY(calc(var(--SnackBar--initial-height-top) - var(--SnackBar--offset-top)))}.spui-SnackBar--bottom{bottom:0;transform:translateY(calc(var(--SnackBar--initial-height-bottom)*-1 - var(--SnackBar--offset-bottom)*-1))}.spui-SnackBar--slide{transition:transform .3s ease,opacity .3s ease}.spui-SnackBar--hidden{visibility:hidden}.spui-SnackBar-slide--in{opacity:1;transition:transform .5s ease,opacity .5s ease}.spui-SnackBar-slide--in.spui-SnackBar--top{transform:translateY(var(--SnackBar--order-offset-top))}.spui-SnackBar-slide--in.spui-SnackBar--bottom{transform:translateY(var(--SnackBar--order-offset-bottom))}.spui-SnackBar-iconButton{--IconButton--neutral-backgroundColor:transparent;grid-area:IconButton;margin-left:12px}.spui-SnackBar-content--information{background-color:var(--gray-80);color:var(--color-text-high-emphasis-inverse)}.spui-SnackBar-iconButton--information{--IconButton--neutral-onActive-backgroundColor:var(--white-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--white-20-alpha);--IconButton--neutral-color:var(--color-object-high-emphasis-inverse)}.spui-SnackBar-button--information{--TextLink-color:var(--color-text-high-emphasis-inverse);--TextLink-icon-color:var(--color-object-high-emphasis-inverse);--TextButton-color:var(--color-text-high-emphasis-inverse);--TextButton-icon-color:var(--color-object-high-emphasis-inverse)}.spui-SnackBar-button--information:after{background:var(--white-20-alpha)}.spui-SnackBar-content--confirmation{background-color:var(--color-surface-primary);border:2px solid var(--color-border-low-emphasis);color:var(--color-text-accent-primary)}.spui-SnackBar-iconButton--confirmation{--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-color:var(--color-object-low-emphasis)}.spui-SnackBar-button--confirmation{--TextLink-color:var(--color-text-low-emphasis);--TextLink-icon-color:var(--color-object-low-emphasis);--TextButton-color:var(--color-text-low-emphasis);--TextButton-icon-color:var(--color-object-low-emphasis)}.spui-SnackBar-button--confirmation:after{background:var(--color-border-low-emphasis)}.spui-SnackBar-content--error{background-color:var(--color-surface-caution);color:var(--color-text-high-emphasis-inverse)}.spui-SnackBar-iconButton--error{--IconButton--neutral-onActive-backgroundColor:var(--white-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--white-20-alpha);--IconButton--neutral-color:var(--color-object-high-emphasis-inverse)}.spui-SnackBar-button--error{--TextLink-color:var(--color-text-high-emphasis-inverse);--TextLink-icon-color:var(--color-object-high-emphasis-inverse);--TextButton-color:var(--color-text-high-emphasis-inverse);--TextButton-icon-color:var(--color-object-high-emphasis-inverse)}.spui-SnackBar-button--error:after{background:var(--white-20-alpha)}@media (prefers-reduced-motion:reduce){.spui-SnackBar--slide,.spui-SnackBar-slide--in{transition-duration:.1ms}}@media (max-width:464px){.spui-SnackBar{padding:0 12px;text-align:center;bottom:0;top:unset;transform:translateY(calc(var(--SnackBar--initial-height-bottom)*-1 - var(--SnackBar--offset-bottom)*-1))}.spui-SnackBar-slide--in.spui-SnackBar--top{transform:translateY(var(--SnackBar--order-offset-bottom))}.spui-SnackBar-content{border-radius:82px;max-width:400px;min-width:calc(100% - 24px);padding:14px 16px 14px 20px}}@media (max-width:320px){.spui-SnackBar-text{--SnackBar-max-lines:4}}

package/SnackBar/SnackBar.d.ts

@@ -1,29 +1,24 @@
 import React, { ReactNode } from 'react';
-declare type Position = `${'top' | 'bottom'}${'Left' | 'Center' | 'Right'}`;
-declare type PositionOffset = {
-    top: number;
-    right: number;
-    left: number;
-    bottom: number;
-};
+import { StackPosition, StackPositionOffset } from '../StackNotificationManager';
 declare type Variant = 'information' | 'confirmation' | 'error';
 declare type Props = {
     children?: React.ReactElement;
     active?: boolean;
-    order?: number;
     offset?: {
-        [K in keyof PositionOffset]?: PositionOffset[K];
+        [K in keyof StackPositionOffset]?: StackPositionOffset[K];
     };
     duration?: number;
     onHide?: () => void;
-    position?: Position;
+    position?: StackPosition;
     variant?: Variant;
+    setContentHeight?: (height: number) => void;
+    stackPosition?: number;
 };
 export declare const BLOCK_NAME = "spui-SnackBar";
 export declare const ANIMATION_DURATION = 300;
 export declare const MAX_DURATION = 10000;
 export declare const SnackBar: {
-    Frame: ({ children, active, position, order, offset: _offset, onHide, variant, }: Props) => React.ReactElement;
+    Frame: ({ children, active: _active, position, offset: _offset, onHide, variant, stackPosition, setContentHeight, }: Props) => React.ReactElement;
     Icon: React.FC<{
         children: ReactNode;
     }>;

package/SnackBar/SnackBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SnackBar.d.ts","sourceRoot":"","sources":["../../src/SnackBar/SnackBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAOZ,SAAS,EAOV,MAAM,OAAO,CAAC;AAMf,aAAK,QAAQ,GAAG,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,EAAE,CAAC;AAEpE,aAAK,cAAc,GAAG;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,aAAK,OAAO,GAAG,aAAa,GAAG,cAAc,GAAG,OAAO,CAAC;AAExD,aAAK,KAAK,GAAG;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE;SAAG,CAAC,IAAI,MAAM,cAAc,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC;KAAE,CAAC;IAE7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,UAAU,kBAAkB,CAAC;AAG1C,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAEtC,eAAO,MAAM,YAAY,QAAQ,CAAC;AAqMlC,eAAO,MAAM,QAAQ;sFApLlB,KAAK,KAAG,MAAM,YAAY;;kBAyIF,SAAS;;;kBAGT,SAAS;;;eAIzB,SAAS;kBAAY,SAAS;;;eAkB9B,SAAS;kBAAY,SAAS;;CAwBxC,CAAC"}
+{"version":3,"file":"SnackBar.d.ts","sourceRoot":"","sources":["../../src/SnackBar/SnackBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAOZ,SAAS,EAOV,MAAM,OAAO,CAAC;AACf,OAAO,EACL,aAAa,EACb,mBAAmB,EACpB,MAAM,6BAA6B,CAAC;AAMrC,aAAK,OAAO,GAAG,aAAa,GAAG,cAAc,GAAG,OAAO,CAAC;AAExD,aAAK,KAAK,GAAG;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE;SAAG,CAAC,IAAI,MAAM,mBAAmB,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC;KAAE,CAAC;IAEvE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,UAAU,kBAAkB,CAAC;AAG1C,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAEtC,eAAO,MAAM,YAAY,QAAQ,CAAC;AAwOlC,eAAO,MAAM,QAAQ;yHAtNlB,KAAK,KAAG,MAAM,YAAY;;kBAqKF,SAAS;;;kBAGT,SAAS;;;eAIzB,SAAS;kBAAY,SAAS;;;eAqB9B,SAAS;kBAAY,SAAS;;CA2BxC,CAAC"}

package/SnackBar/SnackBar.js

@@ -59,18 +59,21 @@ var VERTICAL_GAP = 20;
 var DEFAULT_VARIANT = 'information';
 var Frame = function (_a) {
     var _b;
-    var children = _a.children, _c = _a.active, active = _c === void 0 ? false : _c, _d = _a.position, position = _d === void 0 ? 'topCenter' : _d, _e = _a.order, order = _e === void 0 ? 0 : _e, _f = _a.offset, _offset = _f === void 0 ? {} : _f, onHide = _a.onHide, _g = _a.variant, variant = _g === void 0 ? DEFAULT_VARIANT : _g;
-    var _h = (0, react_1.useState)(false), isShow = _h[0], setIsShow = _h[1];
+    var _c, _d, _e, _f;
+    var children = _a.children, _active = _a.active, _g = _a.position, position = _g === void 0 ? 'topCenter' : _g, _h = _a.offset, _offset = _h === void 0 ? {} : _h, onHide = _a.onHide, _j = _a.variant, variant = _j === void 0 ? DEFAULT_VARIANT : _j, _k = _a.stackPosition, stackPosition = _k === void 0 ? 0 : _k, setContentHeight = _a.setContentHeight;
+    var _l = (0, react_1.useState)(false), isShow = _l[0], setIsShow = _l[1];
     var offset = {
-        top: _offset.top || 24,
+        top: (_c = _offset.top) !== null && _c !== void 0 ? _c : 24,
         // If position is top or bottom, then horizontal offset is not needed.
-        left: position.endsWith('Left') ? _offset.left || 32 : 0,
-        right: position.endsWith('Right') ? _offset.right || 32 : 0,
-        bottom: _offset.bottom || 24,
+        left: position.endsWith('Left') ? (_d = _offset.left) !== null && _d !== void 0 ? _d : 32 : 0,
+        right: position.endsWith('Right') ? (_e = _offset.right) !== null && _e !== void 0 ? _e : 32 : 0,
+        bottom: (_f = _offset.bottom) !== null && _f !== void 0 ? _f : 24,
     };
     var formattedDuration = exports.MAX_DURATION - exports.ANIMATION_DURATION;
     var timeoutID = (0, react_1.useRef)(null);
-    var _j = (0, react_1.useState)(0), clientHeight = _j[0], setClientHeight = _j[1];
+    var _m = (0, react_1.useState)(0), clientHeight = _m[0], setClientHeight = _m[1];
+    var _o = (0, react_1.useState)(false), shouldAnimation = _o[0], setShouldAnimation = _o[1];
+    var _p = (0, react_1.useState)(false), active = _p[0], setActive = _p[1];
     var setIsShowWithTimeout = (0, react_1.useCallback)(function () {
         // Out animation is executed after `formattedDuration` seconds.
         if (timeoutID.current === null && isShow) {
@@ -88,6 +91,7 @@ var Frame = function (_a) {
     var handleTransitionEnd = (0, react_1.useCallback)(function () {
         if (onHide && !isShow) {
             onHide();
+            setActive(false);
             timeoutID.current = null;
         }
     }, [isShow, setIsShow, onHide]);
@@ -97,21 +101,36 @@ var Frame = function (_a) {
     (0, react_1.useEffect)(function () {
         // Animation is not stopped even if `active` props is changed while running animation.
         if (active && timeoutID.current === null) {
+            // Wait for applying transition until style is determined.
+            setShouldAnimation(true);
             setIsShow(true);
         }
+        if (!active) {
+            setShouldAnimation(false);
+        }
     }, [active]);
     (0, react_1.useEffect)(function () {
         setIsShowWithTimeout();
         return resetTimeout;
     }, [setIsShowWithTimeout, resetTimeout]);
-    var contentHeight = clientHeight;
+    (0, react_1.useEffect)(function () {
+        if (_active) {
+            setActive(true);
+        }
+        if (!_active && isShow) {
+            setIsShow(false);
+        }
+    }, [_active, isShow]);
+    (0, react_1.useEffect)(function () {
+        setContentHeight === null || setContentHeight === void 0 ? void 0 : setContentHeight(clientHeight + VERTICAL_GAP);
+    }, [clientHeight]);
     var positionPrefix = position.startsWith('top') ? 'top' : 'bottom';
     var positionSuffix = position.slice(positionPrefix.length).toLowerCase();
-    var orderOffsetTop = order * (contentHeight + VERTICAL_GAP) + offset.top;
-    var orderOffsetBottom = order * (contentHeight + VERTICAL_GAP) + offset.bottom;
+    var orderOffsetTop = stackPosition + offset.top;
+    var orderOffsetBottom = stackPosition + offset.bottom;
     return (react_1.default.createElement("div", { style: (_b = {},
-            _b['--SnackBar--initial-height-top'] = "".concat(orderOffsetTop - contentHeight + offset.top, "px"),
-            _b['--SnackBar--initial-height-bottom'] = "".concat(orderOffsetBottom - contentHeight + offset.bottom, "px"),
+            _b['--SnackBar--initial-height-top'] = "".concat(orderOffsetTop - clientHeight + offset.top, "px"),
+            _b['--SnackBar--initial-height-bottom'] = "".concat(orderOffsetBottom - clientHeight + offset.bottom, "px"),
             _b['--SnackBar--order-offset-top'] = "".concat(orderOffsetTop, "px"),
             _b['--SnackBar--order-offset-bottom'] = "".concat(-orderOffsetBottom, "px"),
             _b['--SnackBar--offset-top'] = "".concat(offset.top, "px"),
@@ -122,7 +141,7 @@ var Frame = function (_a) {
             _b), className: [
             exports.BLOCK_NAME,
             "".concat(exports.BLOCK_NAME, "--").concat(positionPrefix),
-            "".concat(exports.BLOCK_NAME, "--slide"),
+            shouldAnimation && "".concat(exports.BLOCK_NAME, "--slide"),
             isShow && "".concat(exports.BLOCK_NAME, "-slide--in"),
             !active && "".concat(exports.BLOCK_NAME, "--hidden"),
         ]
@@ -136,18 +155,22 @@ var Frame = function (_a) {
                 react_1.default.createElement(IconButton_1.IconButton, { size: "exSmall", variant: "neutral", onClick: handleOnClickCloseButton },
                     react_1.default.createElement(Icon_1.CrossBold, { "aria-label": "\u9589\u3058\u308B" }))))));
 };
-var getInternalChildProps = function (props) {
+var convertInternalChildProps = function (props) {
     var hasInternalChildProps = function (props) {
         return ({}.hasOwnProperty.call(props, 'setIsShow') ||
             {}.hasOwnProperty.call(props, 'variant'));
     };
     if (hasInternalChildProps(props)) {
-        return {
+        var result = {
             setIsShow: props.setIsShow,
             variant: props.variant,
         };
+        // Remove unnecessary props.
+        delete props.setIsShow;
+        delete props.variant;
+        return [props, result];
     }
-    return {};
+    return [props, {}];
 };
 var Icon = function (_a) {
     var children = _a.children;
@@ -159,7 +182,7 @@ var Text = function (_a) {
 };
 var TextButton = function (_a) {
     var icon = _a.icon, children = _a.children, onClick = _a.onClick, rest = __rest(_a, ["icon", "children", "onClick"]);
-    var internalProps = (0, react_1.useMemo)(function () { return getInternalChildProps(rest); }, []);
+    var _b = (0, react_1.useMemo)(function () { return convertInternalChildProps(rest); }, []), props = _b[0], internalProps = _b[1];
     var variant = internalProps.variant || DEFAULT_VARIANT;
     var setIsShow = internalProps.setIsShow;
     var handleOnClick = function (e) {
@@ -167,11 +190,11 @@ var TextButton = function (_a) {
         setIsShow === null || setIsShow === void 0 ? void 0 : setIsShow(false);
     };
     return (react_1.default.createElement("div", { className: "".concat(exports.BLOCK_NAME, "-button ").concat(exports.BLOCK_NAME, "-button--").concat(variant) },
-        react_1.default.createElement(TextButton_1.TextButton, __assign({ icon: icon, onClick: handleOnClick }, rest), children)));
+        react_1.default.createElement(TextButton_1.TextButton, __assign({ icon: icon, onClick: handleOnClick }, props), children)));
 };
 var TextLink = function (_a) {
     var icon = _a.icon, children = _a.children, onClick = _a.onClick, rest = __rest(_a, ["icon", "children", "onClick"]);
-    var internalProps = (0, react_1.useMemo)(function () { return getInternalChildProps(rest); }, []);
+    var _b = (0, react_1.useMemo)(function () { return convertInternalChildProps(rest); }, []), props = _b[0], internalProps = _b[1];
     var variant = internalProps.variant || DEFAULT_VARIANT;
     var setIsShow = internalProps.setIsShow;
     var handleOnClick = function (e) {
@@ -179,7 +202,7 @@ var TextLink = function (_a) {
         setIsShow === null || setIsShow === void 0 ? void 0 : setIsShow(false);
     };
     return (react_1.default.createElement("div", { className: "".concat(exports.BLOCK_NAME, "-button ").concat(exports.BLOCK_NAME, "-button--").concat(variant) },
-        react_1.default.createElement(TextLink_1.TextLink, __assign({ icon: icon, onClick: handleOnClick }, rest), children)));
+        react_1.default.createElement(TextLink_1.TextLink, __assign({ icon: icon, onClick: handleOnClick }, props), children)));
 };
 exports.SnackBar = {
     Frame: Frame,