visits-style 1.4.18 → 1.4.19

package/dist/components/Toast/index.d.ts

@@ -1,2 +1,2 @@
 import type { ToastContainerProps } from './types';
-export default function Toast({ toasts, clear, fixed, margin, position, space }: ToastContainerProps): import("react/jsx-runtime").JSX.Element;
+export default function Toast({ toasts, clear, fixed, offset, position, space }: ToastContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Toast/types.d.ts

@@ -30,10 +30,15 @@ export interface ToastContainerProps {
      */
     position?: ToastContainerPositionType;
     /**
-     * margin 単位はpx
-     * @default '16px'
+     * offset 単位はpx
+     * @default positionによって16px自動反映
      */
-    margin?: string;
+    offset?: Partial<{
+        top: string;
+        left: string;
+        right: string;
+        bottom: string;
+    }>;
     /**
      * toast間の間隔
      * @default '16px'

package/dist/index.cjs.js

@@ -1017,7 +1017,7 @@ function ToastItem({
   clearRef.current = clear;
   if (!isMounted)
     return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(Item, { ref: refs.setFloating, role: "status", "data-testid": "vs-toast-item", className, style: styles, onClick: handleClickToast, children: message });
+  return /* @__PURE__ */ jsxRuntime.jsx(Item, { ref: refs.setFloating, role: "log", "data-testid": "vs-toast-item", className, style: styles, onClick: handleClickToast, children: message });
 }
 const Item = /* @__PURE__ */ styledComponents.styled.li.withConfig({
   displayName: "ToastItem__Item",
@@ -1028,24 +1028,30 @@ function Toast({
   toasts,
   clear,
   fixed,
-  margin = "16px",
+  offset = {},
   position = "top-left",
   space = "16px"
 }) {
   const style = React.useMemo(() => {
     const base = {
-      position: fixed ? "fixed" : "absolute"
+      position: fixed ? "fixed" : "absolute",
+      ...offset
     };
-    if (position.indexOf("top") > -1) {
-      base.top = margin;
-    } else if (position.indexOf("bottom") > -1) {
-      base.bottom = margin;
+    if (!Object.keys(offset).length) {
+      if (position.indexOf("top") > -1) {
+        base.top = "16px";
+      } else if (position.indexOf("bottom") > -1) {
+        base.bottom = "16px";
+      }
+      if (position.indexOf("left") > -1) {
+        base.left = "16px";
+      } else if (position.indexOf("right") > -1) {
+        base.right = "16px";
+      }
     }
     if (position.indexOf("left") > -1) {
-      base.left = margin;
       base.alignItems = "flex-start";
     } else if (position.indexOf("right") > -1) {
-      base.right = margin;
       base.alignItems = "flex-end";
     } else {
       base.left = "50%";
@@ -1053,7 +1059,7 @@ function Toast({
       base.transform = "translateX(-50%)";
     }
     return base;
-  }, [fixed, margin, position]);
+  }, [fixed, offset, position]);
   return /* @__PURE__ */ jsxRuntime.jsx(Portal$1, { children: /* @__PURE__ */ jsxRuntime.jsx(ToastList, { style, $space: space, children: toasts.map((props) => /* @__PURE__ */ React.createElement(ToastItem, { ...props, key: props.id, clear })) }) });
 }
 const ToastList = /* @__PURE__ */ styledComponents.styled.ul.withConfig({

package/dist/index.es.js

@@ -1009,7 +1009,7 @@ function ToastItem({
   clearRef.current = clear;
   if (!isMounted)
     return null;
-  return /* @__PURE__ */ jsx(Item, { ref: refs.setFloating, role: "status", "data-testid": "vs-toast-item", className, style: styles, onClick: handleClickToast, children: message });
+  return /* @__PURE__ */ jsx(Item, { ref: refs.setFloating, role: "log", "data-testid": "vs-toast-item", className, style: styles, onClick: handleClickToast, children: message });
 }
 const Item = /* @__PURE__ */ styled.li.withConfig({
   displayName: "ToastItem__Item",
@@ -1020,24 +1020,30 @@ function Toast({
   toasts,
   clear,
   fixed,
-  margin = "16px",
+  offset = {},
   position = "top-left",
   space = "16px"
 }) {
   const style = useMemo(() => {
     const base = {
-      position: fixed ? "fixed" : "absolute"
+      position: fixed ? "fixed" : "absolute",
+      ...offset
     };
-    if (position.indexOf("top") > -1) {
-      base.top = margin;
-    } else if (position.indexOf("bottom") > -1) {
-      base.bottom = margin;
+    if (!Object.keys(offset).length) {
+      if (position.indexOf("top") > -1) {
+        base.top = "16px";
+      } else if (position.indexOf("bottom") > -1) {
+        base.bottom = "16px";
+      }
+      if (position.indexOf("left") > -1) {
+        base.left = "16px";
+      } else if (position.indexOf("right") > -1) {
+        base.right = "16px";
+      }
     }
     if (position.indexOf("left") > -1) {
-      base.left = margin;
       base.alignItems = "flex-start";
     } else if (position.indexOf("right") > -1) {
-      base.right = margin;
       base.alignItems = "flex-end";
     } else {
       base.left = "50%";
@@ -1045,7 +1051,7 @@ function Toast({
       base.transform = "translateX(-50%)";
     }
     return base;
-  }, [fixed, margin, position]);
+  }, [fixed, offset, position]);
   return /* @__PURE__ */ jsx(Portal$1, { children: /* @__PURE__ */ jsx(ToastList, { style, $space: space, children: toasts.map((props) => /* @__PURE__ */ createElement(ToastItem, { ...props, key: props.id, clear })) }) });
 }
 const ToastList = /* @__PURE__ */ styled.ul.withConfig({

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/visits-works/visits-style.git"
   },
   "homepage": "https://github.com/visits-works/visits-style",
-  "version": "1.4.18",
+  "version": "1.4.19",
   "type": "module",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",