@hanzogui/toast 8.3.1 → 8.3.2

package/dist/cjs/Toast.js

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToastState = exports.useToastController = exports.useToast = exports.ToastViewport = exports.ToastProvider = exports.Toast = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const animate_presence_1 = require("@hanzogui/animate-presence");
+const core_1 = require("@hanzogui/core");
+const helpers_1 = require("@hanzogui/helpers");
+const stacks_1 = require("@hanzogui/stacks");
+const text_1 = require("@hanzogui/text");
+const use_controllable_state_1 = require("@hanzogui/use-controllable-state");
+const React = tslib_1.__importStar(require("react"));
+const ToastAnnounce_tsx_1 = require("./ToastAnnounce.js");
+const ToastImperative_tsx_1 = require("./ToastImperative.js");
+Object.defineProperty(exports, "useToast", { enumerable: true, get: function () { return ToastImperative_tsx_1.useToast; } });
+Object.defineProperty(exports, "useToastController", { enumerable: true, get: function () { return ToastImperative_tsx_1.useToastController; } });
+Object.defineProperty(exports, "useToastState", { enumerable: true, get: function () { return ToastImperative_tsx_1.useToastState; } });
+const ToastImpl_tsx_1 = require("./ToastImpl.js");
+const ToastProvider_tsx_1 = require("./ToastProvider.js");
+Object.defineProperty(exports, "ToastProvider", { enumerable: true, get: function () { return ToastProvider_tsx_1.ToastProvider; } });
+const ToastViewport_tsx_1 = require("./ToastViewport.js");
+Object.defineProperty(exports, "ToastViewport", { enumerable: true, get: function () { return ToastViewport_tsx_1.ToastViewport; } });
+/* -------------------------------------------------------------------------------------------------
+ * ToastTitle
+ * -----------------------------------------------------------------------------------------------*/
+const TITLE_NAME = 'ToastTitle';
+const ToastTitle = (0, core_1.styled)(text_1.SizableText, {
+    name: TITLE_NAME,
+    variants: {
+        unstyled: {
+            false: {
+                color: '$color',
+                size: '$4',
+            },
+        },
+    },
+    defaultVariants: {
+        unstyled: process.env.GUI_HEADLESS === '1',
+    },
+});
+/* -------------------------------------------------------------------------------------------------
+ * ToastDescription
+ * -----------------------------------------------------------------------------------------------*/
+const DESCRIPTION_NAME = 'ToastDescription';
+const ToastDescription = (0, core_1.styled)(text_1.SizableText, {
+    name: DESCRIPTION_NAME,
+    variants: {
+        unstyled: {
+            false: {
+                color: '$color11',
+                size: '$1',
+            },
+        },
+    },
+    defaultVariants: {
+        unstyled: process.env.GUI_HEADLESS === '1',
+    },
+});
+/* -------------------------------------------------------------------------------------------------
+ * ToastAction
+ * -----------------------------------------------------------------------------------------------*/
+const ACTION_NAME = 'ToastAction';
+const ToastAction = React.forwardRef(function ToastAction(props, forwardedRef) {
+    const { altText, ...actionProps } = props;
+    if (!altText)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(ToastAnnounce_tsx_1.ToastAnnounceExclude, { altText: altText, asChild: true, children: (0, jsx_runtime_1.jsx)(ToastClose, { ...actionProps, ref: forwardedRef }) }));
+});
+ToastAction.propTypes = {
+    altText(props) {
+        if (!props.altText) {
+            return new Error(`Missing prop \`altText\` expected on \`${ACTION_NAME}\``);
+        }
+        return null;
+    },
+};
+/* -------------------------------------------------------------------------------------------------
+ * ToastClose
+ * -----------------------------------------------------------------------------------------------*/
+const CLOSE_NAME = 'ToastClose';
+const ToastCloseFrame = (0, core_1.styled)(stacks_1.YStack, {
+    name: CLOSE_NAME,
+    render: 'button',
+});
+const ToastClose = React.forwardRef(function ToastClose(props, forwardedRef) {
+    const { scope, ...closeProps } = props;
+    const interactiveContext = (0, ToastImpl_tsx_1.useToastInteractiveContext)(scope);
+    return ((0, jsx_runtime_1.jsx)(ToastAnnounce_tsx_1.ToastAnnounceExclude, { asChild: true, children: (0, jsx_runtime_1.jsx)(ToastCloseFrame, { "aria-label": "Close", ...closeProps, ref: forwardedRef, onPress: (0, helpers_1.composeEventHandlers)(props.onPress, interactiveContext.onClose) }) }));
+});
+/* -------------------------------------------------------------------------------------------------
+ * Toast
+ * -----------------------------------------------------------------------------------------------*/
+const ToastComponent = ToastImpl_tsx_1.ToastImplFrame.styleable(function Toast(props, forwardedRef) {
+    const { forceMount, open: openProp, defaultOpen, onOpenChange, ...toastProps } = props;
+    const [open, setOpen] = (0, use_controllable_state_1.useControllableState)({
+        prop: openProp,
+        defaultProp: defaultOpen ?? true,
+        onChange: onOpenChange,
+        strategy: 'most-recent-wins',
+    });
+    const currentToast = (0, ToastImperative_tsx_1.useToastState)();
+    const { hide } = (0, ToastImperative_tsx_1.useToastController)();
+    const id = React.useId();
+    const onPause = (0, core_1.useEvent)(props.onPause);
+    const onResume = (0, core_1.useEvent)(props.onResume);
+    const isHide = currentToast?.hide === true;
+    const shouldShow = (forceMount || open) && !isHide;
+    return ((0, jsx_runtime_1.jsx)(animate_presence_1.AnimatePresence, { children: shouldShow ? ((0, jsx_runtime_1.jsx)(ToastImpl_tsx_1.ToastImpl, { id: id, open: open, ...toastProps, ref: forwardedRef, onClose: () => {
+                setOpen(false);
+                hide();
+            }, onPause: onPause, onResume: onResume, onSwipeEnd: (0, helpers_1.composeEventHandlers)(props.onSwipeEnd, (event) => {
+                setOpen(false);
+            }) })) : null }, id));
+});
+const Toast = (0, helpers_1.withStaticProperties)(ToastComponent, {
+    Title: ToastTitle,
+    Description: ToastDescription,
+    Action: ToastAction,
+    Close: ToastClose,
+});
+exports.Toast = Toast;
+//# sourceMappingURL=Toast.js.map

package/dist/cjs/Toast.js.map

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

package/dist/cjs/ToastAnnounce.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastAnnounceExclude = exports.ToastAnnounce = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const constants_1 = require("@hanzogui/constants");
+const core_1 = require("@hanzogui/core");
+const portal_1 = require("@hanzogui/portal");
+const start_transition_1 = require("@hanzogui/start-transition");
+const visually_hidden_1 = require("@hanzogui/visually-hidden");
+const React = tslib_1.__importStar(require("react"));
+const ToastProvider_tsx_1 = require("./ToastProvider.js");
+const ToastAnnounceExcludeFrame = (0, core_1.styled)(core_1.View, {
+    name: 'ToastAnnounceExclude',
+});
+const ToastAnnounceExclude = React.forwardRef((props, forwardedRef) => {
+    const { altText, ...announceExcludeProps } = props;
+    return ((0, jsx_runtime_1.jsx)(ToastAnnounceExcludeFrame, { "data-toast-announce-exclude": "", "data-toast-announce-alt": altText || undefined, ...announceExcludeProps, ref: forwardedRef }));
+});
+exports.ToastAnnounceExclude = ToastAnnounceExclude;
+const ToastAnnounce = (props) => {
+    const { scope, children, ...announceProps } = props;
+    const context = (0, ToastProvider_tsx_1.useToastProviderContext)(scope);
+    const [renderAnnounceText, setRenderAnnounceText] = React.useState(false);
+    const [isAnnounced, setIsAnnounced] = React.useState(false);
+    // render text content in the next frame to ensure toast is announced in NVDA
+    useNextFrame(() => {
+        (0, start_transition_1.startTransition)(() => {
+            setRenderAnnounceText(true);
+        });
+    });
+    // cleanup after announcing
+    React.useEffect(() => {
+        const timer = setTimeout(() => setIsAnnounced(true), 1000);
+        return () => clearTimeout(timer);
+    }, []);
+    return isAnnounced ? null : ((0, jsx_runtime_1.jsx)(portal_1.Portal, { children: (0, jsx_runtime_1.jsx)(visually_hidden_1.VisuallyHidden, { ...announceProps, children: renderAnnounceText && ((0, jsx_runtime_1.jsxs)(core_1.Text, { children: [context.label, " ", children] })) }) }));
+};
+exports.ToastAnnounce = ToastAnnounce;
+/* -----------------------------------------------------------------------------------------------*/
+function useNextFrame(callback = () => { }) {
+    const fn = (0, core_1.useEvent)(callback);
+    (0, constants_1.useIsomorphicLayoutEffect)(() => {
+        let raf1 = 0;
+        let raf2 = 0;
+        raf1 = requestAnimationFrame(() => {
+            raf2 = requestAnimationFrame(fn);
+        });
+        return () => {
+            cancelAnimationFrame(raf1);
+            cancelAnimationFrame(raf2);
+        };
+    }, [fn]);
+}
+//# sourceMappingURL=ToastAnnounce.js.map

package/dist/cjs/ToastAnnounce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastAnnounce.js","sourceRoot":"","sources":["../../src/ToastAnnounce.tsx"],"names":[],"mappings":";;;;;AAAA,mDAA+D;AAE/D,yCAA6D;AAC7D,6CAAyC;AACzC,iEAA4D;AAC5D,+DAA0D;AAC1D,MAAY,KAAK,0CAAa;AAG9B,0DAA6D;AAE7D,MAAM,yBAAyB,GAAG,IAAA,aAAM,EAAC,WAAI,EAAE;IAC7C,IAAI,EAAE,sBAAsB;CAC7B,CAAC,CAAA;AAWF,MAAM,oBAAoB,GAAG,KAAK,CAAC,UAAU,CAC3C,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE;IACtB,MAAM,EAAE,OAAO,EAAE,GAAG,oBAAoB,EAAE,GAAG,KAAK,CAAA;IAElD,OAAO,CACL,uBAAC,yBAAyB,mCACI,EAAE,6BACL,OAAO,IAAI,SAAS,KACzC,oBAAoB,EACxB,GAAG,EAAE,YAAY,GACjB,CACH,CAAA;AACH,CAAC,CACF,CAAA;QA8DC,oBAAoB;AArDtB,MAAM,aAAa,GAAiC,CAClD,KAAsC,EACtC,EAAE;IACF,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAE,GAAG,KAAK,CAAA;IACnD,MAAM,OAAO,GAAG,IAAA,2CAAuB,EAAC,KAAK,CAAC,CAAA;IAC9C,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IACzE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE3D,6EAA6E;IAC7E,YAAY,CAAC,GAAG,EAAE;QAChB,IAAA,kCAAe,EAAC,GAAG,EAAE;YACnB,qBAAqB,CAAC,IAAI,CAAC,CAAA;QAC7B,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,2BAA2B;IAC3B,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAA;QAC1D,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;IAClC,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1B,uBAAC,eAAM,cACL,uBAAC,gCAAc,OAAK,aAAa,YAC9B,kBAAkB,IAAI,CACrB,wBAAC,WAAI,eACF,OAAO,CAAC,KAAK,OAAG,QAAQ,IACpB,CACR,GACc,GACV,CACV,CAAA;AACH,CAAC,CAAA;QAoBC,aAAa;AAlBf,oGAAoG;AAEpG,SAAS,YAAY,CAAC,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC;IACvC,MAAM,EAAE,GAAG,IAAA,eAAQ,EAAC,QAAQ,CAAC,CAAA;IAC7B,IAAA,qCAAyB,EAAC,GAAG,EAAE;QAC7B,IAAI,IAAI,GAAG,CAAC,CAAA;QACZ,IAAI,IAAI,GAAG,CAAC,CAAA;QACZ,IAAI,GAAG,qBAAqB,CAAC,GAAG,EAAE;YAChC,IAAI,GAAG,qBAAqB,CAAC,EAAE,CAAC,CAAA;QAClC,CAAC,CAAC,CAAA;QACF,OAAO,GAAG,EAAE;YACV,oBAAoB,CAAC,IAAI,CAAC,CAAA;YAC1B,oBAAoB,CAAC,IAAI,CAAC,CAAA;QAC5B,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;AACV,CAAC"}