reshaped 2.10.4 → 2.10.6

package/components/Toast/Toast.constants.d.ts

@@ -3,6 +3,7 @@ export declare const timeouts: Record<T.Timeout, number>;
 export declare const positions: T.Position[];
 export declare const defaultContextData: {
     queues: Record<T.Position, T.ContainerProps[]>;
+    id: string;
     show: () => void;
     hide: () => void;
     remove: () => void;

package/components/Toast/Toast.constants.js

@@ -13,6 +13,7 @@ export const positions = [
 const defaultPositionData = positions.reduce((acc, cur) => (Object.assign({ [cur]: [] }, acc)), {});
 export const defaultContextData = {
     queues: defaultPositionData,
+    id: "",
     show: () => { },
     hide: () => { },
     remove: () => { },

package/components/Toast/Toast.module.css

@@ -1 +1 @@
-.container{display:block;opacity:0;position:relative;transition:var(--rs-duration-medium) ease-out;transition-property:transform,height,opacity;width:100%}.container--visible{opacity:1}.container--visible .wrapper{height:calc(100% - var(--rs-unit-x2))}.container--index-0{z-index:var(--rs-z-index-raised)}.container--index-1{height:var(--rs-unit-x2)!important}.container--index-1 .wrapper{height:100%;transform:translateY(calc(var(--rs-unit-x1) * -1)) translateZ(0) scaleX(.9)}.container--index-2{height:var(--rs-unit-x2)!important}.container--index-2 .wrapper{height:100%;transform:translateY(calc(var(--rs-unit-x2) * -1)) translateZ(0) scaleX(.8)}.container--index-overflow{height:0!important}.container--index-overflow .wrapper{height:100%;opacity:0;transform:translateY(calc(var(--rs-unit-x3) * -1)) translateZ(0) scaleX(.8)}.wrapper{border-radius:var(--rs-unit-radius-medium);box-shadow:var(--rs-shadow-overlay);height:100%;margin-top:var(--rs-unit-x2);overflow:hidden;transform-origin:50% 0;transition:var(--rs-duration-medium) ease-out;transition-property:height,transform,opacity}.region,.wrapper{display:flex;flex-direction:column}.region{max-width:100%;padding:var(--rs-unit-x4);position:fixed;width:100%;z-index:var(--rs-z-index-notification)}.region--position-top{align-items:center;left:50%;top:0;transform:translateX(-50%)}.region--position-top-start{align-items:start;inset-inline-start:0;top:0}.region--position-top-end{inset-inline-end:0;top:0}.region--position-top,.region--position-top-end,.region--position-top-start{flex-direction:column-reverse}.region--position-top .wrapper,.region--position-top-end .wrapper,.region--position-top-start .wrapper{justify-content:flex-end;margin-bottom:var(--rs-unit-x2);margin-top:0;transform-origin:bottom}.region--position-top .container--index-2 .wrapper,.region--position-top-end .container--index-2 .wrapper,.region--position-top-start .container--index-2 .wrapper{transform:translateY(0) translateZ(0) scaleX(.8)}.region--position-top .container--index-overflow .wrapper,.region--position-top-end .container--index-overflow .wrapper,.region--position-top-start .container--index-overflow .wrapper{transform:translateY(var(--rs-unit-x1)) translateZ(0) scaleX(.8)}.region--position-bottom{align-items:center;bottom:0;left:50%;transform:translateX(-50%)}.region--position-bottom-start{align-items:start;bottom:0;inset-inline-start:0}.region--position-bottom-end{align-items:end;bottom:0;inset-inline-end:0}@media (--rs-viewport-m ){.region{width:360px}}
+.container{display:block;opacity:0;position:relative;transition:var(--rs-duration-medium) ease-out;transition-property:transform,height,opacity;width:100%}.container--visible{opacity:1}.container--visible .wrapper{height:calc(100% - var(--rs-unit-x2))}.container--index-0{z-index:var(--rs-z-index-raised)}.container--index-1{height:var(--rs-unit-x2)!important}.container--index-1 .wrapper{height:100%;transform:translateY(calc(var(--rs-unit-x1) * -1)) translateZ(0) scaleX(.9)}.container--index-2{height:var(--rs-unit-x2)!important}.container--index-2 .wrapper{height:100%;transform:translateY(calc(var(--rs-unit-x2) * -1)) translateZ(0) scaleX(.8)}.container--index-overflow{height:0!important}.container--index-overflow .wrapper{height:100%;opacity:0;transform:translateY(calc(var(--rs-unit-x3) * -1)) translateZ(0) scaleX(.8)}.wrapper{border-radius:var(--rs-unit-radius-medium);box-shadow:var(--rs-shadow-overlay);height:100%;margin-top:var(--rs-unit-x2);overflow:hidden;transform-origin:50% 0;transition:var(--rs-duration-medium) ease-out;transition-property:height,transform,opacity}.region,.wrapper{display:flex;flex-direction:column}.region{max-width:100%;padding:var(--rs-unit-x4);position:fixed;width:100%;z-index:var(--rs-z-index-notification)}.region--nested{position:absolute}.region--position-top{align-items:center;left:50%;top:0;transform:translateX(-50%)}.region--position-top-start{align-items:start;inset-inline-start:0;top:0}.region--position-top-end{inset-inline-end:0;top:0}.region--position-top,.region--position-top-end,.region--position-top-start{flex-direction:column-reverse}.region--position-top .wrapper,.region--position-top-end .wrapper,.region--position-top-start .wrapper{justify-content:flex-end;margin-bottom:var(--rs-unit-x2);margin-top:0;transform-origin:bottom}.region--position-top .container--index-2 .wrapper,.region--position-top-end .container--index-2 .wrapper,.region--position-top-start .container--index-2 .wrapper{transform:translateY(0) translateZ(0) scaleX(.8)}.region--position-top .container--index-overflow .wrapper,.region--position-top-end .container--index-overflow .wrapper,.region--position-top-start .container--index-overflow .wrapper{transform:translateY(var(--rs-unit-x1)) translateZ(0) scaleX(.8)}.region--position-bottom{align-items:center;bottom:0;left:50%;transform:translateX(-50%)}.region--position-bottom-start{align-items:start;bottom:0;inset-inline-start:0}.region--position-bottom-end{align-items:end;bottom:0;inset-inline-end:0}@media (--rs-viewport-m ){.region{width:360px}}

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

@@ -26,6 +26,7 @@ export type ProviderProps = {
 };
 export type RegionProps = {
     position: Position;
+    nested?: boolean;
 };
 export type ContainerProps = {
     id: string;
@@ -43,6 +44,7 @@ export type Context = {
     show: (id: string) => void;
     hide: (id: string) => void;
     remove: (id: string) => void;
+    id: string;
 };
 export type ShowOptions = {
     timeout?: Timeout;

package/components/Toast/ToastProvider.js

@@ -14,6 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import ToastContext from "./Toast.context.js";
 import ToastRegion from "./ToastRegion.js";
+import useToast from "./useToast.js";
 import { positions, defaultContextData } from "./Toast.constants.js";
 let counter = 0;
 const generateId = () => `__rs-toast-${counter++}`;
@@ -52,6 +53,8 @@ const toastReducer = (state, action) => {
 };
 const ToastProvider = (props) => {
     const { children, options } = props;
+    const toast = useToast();
+    const id = React.useId();
     const [data, dispatch] = React.useReducer(toastReducer, defaultContextData.queues);
     const add = React.useCallback((toastProps) => {
         const id = generateId();
@@ -69,13 +72,14 @@ const ToastProvider = (props) => {
     }, []);
     const value = React.useMemo(() => ({
         queues: data,
+        id,
         add,
         show,
         hide,
         remove,
         inspecting: false,
         options,
-    }), [data, show, hide, add, remove, options]);
-    return (_jsxs(ToastContext.Provider, { value: value, children: [children, positions.map((position) => (_jsx(ToastRegion, { position: position }, position)))] }));
+    }), [data, show, hide, add, remove, id, options]);
+    return (_jsxs(ToastContext.Provider, { value: value, children: [children, positions.map((position) => (_jsx(ToastRegion, { position: position, nested: !!toast.id }, position)))] }));
 };
 export default ToastProvider;

package/components/Toast/ToastRegion.js

@@ -7,14 +7,14 @@ import ToastContainer from "./ToastContainer.js";
 import ToastContext from "./Toast.context.js";
 import s from "./Toast.module.css";
 const ToastRegion = (props) => {
-    const { position } = props;
+    const { position, nested } = props;
     const { queues, options } = React.useContext(ToastContext);
     const [inspecting, setInspecting] = React.useState(false);
     const ignoreHoverRef = React.useRef(false);
     const rootRef = React.useRef(null);
     const queue = queues[position];
     const { width, expanded } = (options === null || options === void 0 ? void 0 : options[position]) || {};
-    const regionClassNames = classNames(s.region, s[`region--position-${position}`]);
+    const regionClassNames = classNames(s.region, s[`region--position-${position}`], nested && s["region--nested"]);
     const filteredLength = queue.filter((item) => item.status === "entered").length;
     let hiddenCount = 0;
     // If touch event was triggered – ignore hover events

package/components/Toast/tests/Toast.stories.js

@@ -1,5 +1,5 @@
 import { Example } from "../../../utilities/storybook/index.js";
-import { useToast } from "../index.js";
+import { useToast, ToastProvider } from "../index.js";
 import Button from "../../Button/index.js";
 import View from "../../View/index.js";
 import Image from "../../Image/index.js";
@@ -295,16 +295,33 @@ const Slots = () => {
 export const slots = () => <Slots />;
 const Multiline = () => {
     const toast = useToast();
-    return (<Example>
-			<Example.Item title="Multiline, should support dynamic height">
-				<Button onClick={() => {
+    return (<Button onClick={() => {
             toast.show({
                 text: "Very long event completed notification message",
             });
         }}>
-					Show toast
-				</Button>
-			</Example.Item>
-		</Example>);
+			Show toast
+		</Button>);
 };
-export const edgeCases = () => <Multiline />;
+const Nested = () => {
+    const toast = useToast();
+    return (<View height="300px">
+			<Button onClick={() => {
+            toast.show({
+                text: "Notification sent",
+            });
+        }}>
+				Show toast
+			</Button>
+		</View>);
+};
+export const edgeCases = () => (<Example>
+		<Example.Item title="Multiline, should support dynamic height">
+			<Multiline />
+		</Example.Item>
+		<Example.Item title="Nested ToastProvider">
+			<ToastProvider>
+				<Nested />
+			</ToastProvider>
+		</Example.Item>
+	</Example>);

package/components/Toast/useToast.d.ts

@@ -1,5 +1,6 @@
 declare const useToast: () => {
     show: (toast: import("./Toast.types").Props & import("./Toast.types").ShowOptions) => string;
     hide: (id: string) => void;
+    id: string;
 };
 export default useToast;

package/components/Toast/useToast.js

@@ -2,7 +2,7 @@
 import React from "react";
 import ToastContext from "./Toast.context.js";
 const useToast = () => {
-    const { add, hide } = React.useContext(ToastContext);
-    return React.useMemo(() => ({ show: add, hide }), [add, hide]);
+    const { add, hide, id } = React.useContext(ToastContext);
+    return React.useMemo(() => ({ show: add, hide, id }), [add, hide, id]);
 };
 export default useToast;

package/components/View/View.js

@@ -127,6 +127,13 @@ const View = (props) => {
             const key = child.key || index;
             return (_createElement(Hidden, Object.assign({}, hiddenProps, { key: key }), (className) => renderItem({ className, child: hiddenChild, index: renderedIndex })));
         }
+        if (child.type === React.Fragment) {
+            return child.props.children.map((child) => {
+                const index = renderedIndex;
+                renderedItemIndex += 1;
+                return renderItem({ child, index });
+            });
+        }
         return renderItem({ child, index: renderedIndex });
     });
     // Classnames and attributes are written here so we can assign nowrap to the root element based on the children

package/components/View/tests/View.stories.js

@@ -134,9 +134,10 @@ export const direction = () => (<Example title="Item 1 is another component, Ite
 	</Example>);
 export const gap = () => (<Example>
 		<Example.Item title="gap: 4, direction: row">
-			<View direction="row" gap={4}>
+			<View direction="row" gap={4} divided>
 				<Placeholder>Item 1</Placeholder>
 				<Placeholder>Item 2</Placeholder>
+				<Placeholder>Item 3</Placeholder>
 			</View>
 		</Example.Item>
 		<Example.Item title="gap: 0, direction: row">
@@ -202,6 +203,15 @@ export const divided = () => (<Example>
 				</View.Item>
 			</View>
 		</Example.Item>
+		<Example.Item title="with React.Fragment">
+			<View direction="row" gap={4} divided>
+				<Placeholder>Item 1</Placeholder>
+				<>
+					<Placeholder>Item 2</Placeholder>
+					<Placeholder>Item 3</Placeholder>
+				</>
+			</View>
+		</Example.Item>
 	</Example>);
 export const bleed = () => (<Example title="Removes side borders and border radius when applied">
 		<Example.Item title="bleed: 4">

package/index.d.ts

@@ -99,8 +99,8 @@ export { default as TextField } from "./components/TextField";
 export type { TextFieldProps } from "./components/TextField";
 export { default as Timeline } from "./components/Timeline";
 export type { TimelineProps, TimelineItemProps } from "./components/Timeline";
-export { useToast } from "./components/Toast";
-export type { ToastProps } from "./components/Toast";
+export { useToast, ToastProvider } from "./components/Toast";
+export type { ToastProps, ToastProviderProps } from "./components/Toast";
 export { default as Tooltip } from "./components/Tooltip";
 export type { TooltipProps } from "./components/Tooltip";
 export { default as View } from "./components/View";

package/index.js

@@ -50,7 +50,7 @@ export { default as Text } from "./components/Text/index.js";
 export { default as TextArea } from "./components/TextArea/index.js";
 export { default as TextField } from "./components/TextField/index.js";
 export { default as Timeline } from "./components/Timeline/index.js";
-export { useToast } from "./components/Toast/index.js";
+export { useToast, ToastProvider } from "./components/Toast/index.js";
 export { default as Tooltip } from "./components/Tooltip/index.js";
 export { default as View } from "./components/View/index.js";
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "reshaped",
 	"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-	"version": "2.10.4",
+	"version": "2.10.6",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",