@yahoo/uds 3.175.11 → 3.176.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/automated-config/dist/utils/getConfigVariantProperties.d.cts +2 -2
- package/dist/automated-config/dist/utils/getConfigVariantProperties.d.ts +2 -2
- package/dist/components/client/Popover/UDSPopoverConfigProvider.d.cts +1 -1
- package/dist/components/client/Popover/UDSPopoverConfigProvider.d.ts +1 -1
- package/dist/components/client/Toast/Toast.cjs +2 -1
- package/dist/components/client/Toast/Toast.d.cts +1 -1
- package/dist/components/client/Toast/Toast.d.ts +1 -1
- package/dist/components/client/Toast/Toast.js +2 -1
- package/dist/components/client/Toast/ToastPortal.cjs +60 -0
- package/dist/components/client/Toast/ToastPortal.js +61 -1
- package/dist/components/client/Toast/createToast.cjs +3 -1
- package/dist/components/client/Toast/createToast.d.cts +6 -1
- package/dist/components/client/Toast/createToast.d.ts +6 -1
- package/dist/components/client/Toast/createToast.js +3 -1
- package/dist/types/dist/index.d.cts +5 -0
- package/dist/types/dist/index.d.ts +5 -0
- package/dist/uds/generated/componentData.cjs +170 -169
- package/dist/uds/generated/componentData.js +170 -169
- package/generated/componentData.json +248 -243
- package/package.json +1 -1
|
@@ -10,8 +10,8 @@ import { VariantConfig } from "../types/ComponentConfig.cjs";
|
|
|
10
10
|
* @returns A Record of layer names to their properties, or null if no properties are found
|
|
11
11
|
*/
|
|
12
12
|
declare function getConfigVariantProperties(variant?: VariantConfig): {
|
|
13
|
-
[x: string]: Readonly<Record<string, SelectedConfigurableProperty<"
|
|
14
|
-
root: Readonly<Record<string, SelectedConfigurableProperty<"
|
|
13
|
+
[x: string]: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "opacity" | "fillOpacity" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
|
|
14
|
+
root: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "opacity" | "fillOpacity" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
|
|
15
15
|
} | null;
|
|
16
16
|
//#endregion
|
|
17
17
|
export { getConfigVariantProperties };
|
|
@@ -10,8 +10,8 @@ import { VariantConfig } from "../types/ComponentConfig.js";
|
|
|
10
10
|
* @returns A Record of layer names to their properties, or null if no properties are found
|
|
11
11
|
*/
|
|
12
12
|
declare function getConfigVariantProperties(variant?: VariantConfig): {
|
|
13
|
-
[x: string]: Readonly<Record<string, SelectedConfigurableProperty<"
|
|
14
|
-
root: Readonly<Record<string, SelectedConfigurableProperty<"
|
|
13
|
+
[x: string]: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "opacity" | "fillOpacity" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
|
|
14
|
+
root: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "opacity" | "fillOpacity" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
|
|
15
15
|
} | null;
|
|
16
16
|
//#endregion
|
|
17
17
|
export { getConfigVariantProperties };
|
|
@@ -24,7 +24,7 @@ declare function usePopoverConfig(sizeProp?: PopoverSize | undefined, variantPro
|
|
|
24
24
|
gap: SpacingAlias;
|
|
25
25
|
dismissButtonSpacing: SpacingAlias;
|
|
26
26
|
dismissIconSize: number;
|
|
27
|
-
ariaKitPlacement: ("
|
|
27
|
+
ariaKitPlacement: ("top-start" | "top-end" | "bottom-start" | "bottom-end" | ("top" | "bottom" | "left" | "right") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
|
|
28
28
|
animationDuration: number;
|
|
29
29
|
};
|
|
30
30
|
//#endregion
|
|
@@ -25,7 +25,7 @@ declare function usePopoverConfig(sizeProp?: PopoverSize | undefined, variantPro
|
|
|
25
25
|
gap: SpacingAlias;
|
|
26
26
|
dismissButtonSpacing: SpacingAlias;
|
|
27
27
|
dismissIconSize: number;
|
|
28
|
-
ariaKitPlacement: ("
|
|
28
|
+
ariaKitPlacement: ("top-start" | "top-end" | "bottom-start" | "bottom-end" | ("top" | "bottom" | "left" | "right") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
|
|
29
29
|
animationDuration: number;
|
|
30
30
|
};
|
|
31
31
|
//#endregion
|
|
@@ -42,7 +42,7 @@ const iconMap = {
|
|
|
42
42
|
*
|
|
43
43
|
* @related [Tooltip](https://uds.build/docs/components/tooltip), [Popover](https://uds.build/docs/components/popover)
|
|
44
44
|
**/
|
|
45
|
-
const Toast = ({ message, onClickCloseButton, size: sizeProp, variant: variantProp, actionButton, onClickActionButton, startIcon, closeIcon = _yahoo_uds_icons.Cross, closeToast, slotProps, className, id, reduceMotion: forceReduceMotion }) => {
|
|
45
|
+
const Toast = ({ message, onClickCloseButton, size: sizeProp, variant: variantProp, actionButton, onClickActionButton, startIcon, closeIcon = _yahoo_uds_icons.Cross, closeAriaLabel = "Close", closeToast, slotProps, className, id, reduceMotion: forceReduceMotion }) => {
|
|
46
46
|
const { iconVariant, iconSize, buttonVariant, buttonSize, size, variant, textVariant, textColor } = require_components_client_Toast_UDSToastConfigProvider.useToastConfig(sizeProp, variantProp);
|
|
47
47
|
const { className: startIconClassName, ...startIconProps } = slotProps?.startIcon ?? {};
|
|
48
48
|
const { className: closeIconContainerClassName, ...closeIconContainerProps } = slotProps?.closeIconContainer ?? {};
|
|
@@ -110,6 +110,7 @@ const Toast = ({ message, onClickCloseButton, size: sizeProp, variant: variantPr
|
|
|
110
110
|
}),
|
|
111
111
|
closeIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Pressable.Pressable, {
|
|
112
112
|
onClick: handleClose,
|
|
113
|
+
"aria-label": closeAriaLabel,
|
|
113
114
|
className: require_styles_styler.cx(classNames.closeIconContainer, closeIconContainerClassName),
|
|
114
115
|
...closeIconContainerProps,
|
|
115
116
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
|
|
@@ -46,7 +46,7 @@ interface ToastProps extends UniversalToastProps, Partial<ReactToastifyContext>
|
|
|
46
46
|
* @related [Tooltip](https://uds.build/docs/components/tooltip), [Popover](https://uds.build/docs/components/popover)
|
|
47
47
|
**/
|
|
48
48
|
declare const Toast: {
|
|
49
|
-
({ message, onClickCloseButton, size: sizeProp, variant: variantProp, actionButton, onClickActionButton, startIcon, closeIcon, closeToast, slotProps, className, id, reduceMotion: forceReduceMotion }: ToastProps): import("react/jsx-runtime").JSX.Element;
|
|
49
|
+
({ message, onClickCloseButton, size: sizeProp, variant: variantProp, actionButton, onClickActionButton, startIcon, closeIcon, closeAriaLabel, closeToast, slotProps, className, id, reduceMotion: forceReduceMotion }: ToastProps): import("react/jsx-runtime").JSX.Element;
|
|
50
50
|
displayName: string;
|
|
51
51
|
};
|
|
52
52
|
//#endregion
|
|
@@ -47,7 +47,7 @@ interface ToastProps extends UniversalToastProps, Partial<ReactToastifyContext>
|
|
|
47
47
|
* @related [Tooltip](https://uds.build/docs/components/tooltip), [Popover](https://uds.build/docs/components/popover)
|
|
48
48
|
**/
|
|
49
49
|
declare const Toast: {
|
|
50
|
-
({ message, onClickCloseButton, size: sizeProp, variant: variantProp, actionButton, onClickActionButton, startIcon, closeIcon, closeToast, slotProps, className, id, reduceMotion: forceReduceMotion }: ToastProps): import("react/jsx-runtime").JSX.Element;
|
|
50
|
+
({ message, onClickCloseButton, size: sizeProp, variant: variantProp, actionButton, onClickActionButton, startIcon, closeIcon, closeAriaLabel, closeToast, slotProps, className, id, reduceMotion: forceReduceMotion }: ToastProps): import("react/jsx-runtime").JSX.Element;
|
|
51
51
|
displayName: string;
|
|
52
52
|
};
|
|
53
53
|
//#endregion
|
|
@@ -41,7 +41,7 @@ const iconMap = {
|
|
|
41
41
|
*
|
|
42
42
|
* @related [Tooltip](https://uds.build/docs/components/tooltip), [Popover](https://uds.build/docs/components/popover)
|
|
43
43
|
**/
|
|
44
|
-
const Toast = ({ message, onClickCloseButton, size: sizeProp, variant: variantProp, actionButton, onClickActionButton, startIcon, closeIcon = Cross, closeToast, slotProps, className, id, reduceMotion: forceReduceMotion }) => {
|
|
44
|
+
const Toast = ({ message, onClickCloseButton, size: sizeProp, variant: variantProp, actionButton, onClickActionButton, startIcon, closeIcon = Cross, closeAriaLabel = "Close", closeToast, slotProps, className, id, reduceMotion: forceReduceMotion }) => {
|
|
45
45
|
const { iconVariant, iconSize, buttonVariant, buttonSize, size, variant, textVariant, textColor } = useToastConfig(sizeProp, variantProp);
|
|
46
46
|
const { className: startIconClassName, ...startIconProps } = slotProps?.startIcon ?? {};
|
|
47
47
|
const { className: closeIconContainerClassName, ...closeIconContainerProps } = slotProps?.closeIconContainer ?? {};
|
|
@@ -109,6 +109,7 @@ const Toast = ({ message, onClickCloseButton, size: sizeProp, variant: variantPr
|
|
|
109
109
|
}),
|
|
110
110
|
closeIcon && /* @__PURE__ */ jsx(Pressable, {
|
|
111
111
|
onClick: handleClose,
|
|
112
|
+
"aria-label": closeAriaLabel,
|
|
112
113
|
className: cx(classNames.closeIconContainer, closeIconContainerClassName),
|
|
113
114
|
...closeIconContainerProps,
|
|
114
115
|
children: /* @__PURE__ */ jsx(IconSlot, {
|
|
@@ -4,11 +4,71 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
4
4
|
const require_components_client_Toast_UDSToastConfigProvider = require("./UDSToastConfigProvider.cjs");
|
|
5
5
|
const require_components_client_Toast_ToastContainer = require("./ToastContainer.cjs");
|
|
6
6
|
const require_components_client_Toast_createToast = require("./createToast.cjs");
|
|
7
|
+
let react = require("react");
|
|
7
8
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
8
9
|
let react_toastify = require("react-toastify");
|
|
9
10
|
//#region src/components/client/Toast/ToastPortal.tsx
|
|
11
|
+
/**
|
|
12
|
+
* Pauses the container's toasts while keyboard focus is inside them, and resumes once focus leaves.
|
|
13
|
+
* react-toastify only pauses on hover, window blur, and its Alt+T hotkey.
|
|
14
|
+
*/
|
|
15
|
+
const usePauseOnKeyboardFocus = (containerId) => {
|
|
16
|
+
(0, react.useEffect)(() => {
|
|
17
|
+
const regionId = containerId === void 0 ? "" : String(containerId);
|
|
18
|
+
let pausedRegion = null;
|
|
19
|
+
let resumeTimeout;
|
|
20
|
+
let usingPointer = false;
|
|
21
|
+
const getOwnRegion = (target) => {
|
|
22
|
+
const region = target instanceof Element ? target.closest("section.Toastify") : null;
|
|
23
|
+
return region?.id === regionId ? region : null;
|
|
24
|
+
};
|
|
25
|
+
const resumeIfFocusLeft = () => {
|
|
26
|
+
if (pausedRegion && !pausedRegion.contains(document.activeElement)) {
|
|
27
|
+
pausedRegion = null;
|
|
28
|
+
observer.disconnect();
|
|
29
|
+
react_toastify.toast.play({ containerId });
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
const observer = new MutationObserver(resumeIfFocusLeft);
|
|
33
|
+
const handlePointerDown = () => {
|
|
34
|
+
usingPointer = true;
|
|
35
|
+
};
|
|
36
|
+
const handleKeyDown = () => {
|
|
37
|
+
usingPointer = false;
|
|
38
|
+
};
|
|
39
|
+
const handleFocusIn = (event) => {
|
|
40
|
+
const region = getOwnRegion(event.target);
|
|
41
|
+
if (!region || usingPointer) return;
|
|
42
|
+
clearTimeout(resumeTimeout);
|
|
43
|
+
if (!pausedRegion) {
|
|
44
|
+
pausedRegion = region;
|
|
45
|
+
observer.observe(region, {
|
|
46
|
+
childList: true,
|
|
47
|
+
subtree: true
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
react_toastify.toast.pause({ containerId });
|
|
51
|
+
};
|
|
52
|
+
const handleFocusOut = (event) => {
|
|
53
|
+
if (getOwnRegion(event.target)) resumeTimeout = setTimeout(resumeIfFocusLeft);
|
|
54
|
+
};
|
|
55
|
+
document.addEventListener("pointerdown", handlePointerDown, true);
|
|
56
|
+
document.addEventListener("keydown", handleKeyDown, true);
|
|
57
|
+
document.addEventListener("focusin", handleFocusIn);
|
|
58
|
+
document.addEventListener("focusout", handleFocusOut);
|
|
59
|
+
return () => {
|
|
60
|
+
document.removeEventListener("pointerdown", handlePointerDown, true);
|
|
61
|
+
document.removeEventListener("keydown", handleKeyDown, true);
|
|
62
|
+
document.removeEventListener("focusin", handleFocusIn);
|
|
63
|
+
document.removeEventListener("focusout", handleFocusOut);
|
|
64
|
+
clearTimeout(resumeTimeout);
|
|
65
|
+
observer.disconnect();
|
|
66
|
+
};
|
|
67
|
+
}, [containerId]);
|
|
68
|
+
};
|
|
10
69
|
const ToastPortal = ({ toastClassName, ...props }) => {
|
|
11
70
|
const { autoClose, position } = require_components_client_Toast_UDSToastConfigProvider.useToastConfig();
|
|
71
|
+
usePauseOnKeyboardFocus(props.containerId);
|
|
12
72
|
const mappedPosition = require_components_client_Toast_createToast.POSTION_MAP[position];
|
|
13
73
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_toastify.ToastContainer, {
|
|
14
74
|
toastClassName: require_components_client_Toast_ToastContainer.getToastClassName(toastClassName),
|
|
@@ -3,11 +3,71 @@
|
|
|
3
3
|
import { useToastConfig } from "./UDSToastConfigProvider.js";
|
|
4
4
|
import { getToastClassName } from "./ToastContainer.js";
|
|
5
5
|
import { POSTION_MAP } from "./createToast.js";
|
|
6
|
+
import { useEffect } from "react";
|
|
6
7
|
import { jsx } from "react/jsx-runtime";
|
|
7
|
-
import { Slide, ToastContainer } from "react-toastify";
|
|
8
|
+
import { Slide, ToastContainer, toast } from "react-toastify";
|
|
8
9
|
//#region src/components/client/Toast/ToastPortal.tsx
|
|
10
|
+
/**
|
|
11
|
+
* Pauses the container's toasts while keyboard focus is inside them, and resumes once focus leaves.
|
|
12
|
+
* react-toastify only pauses on hover, window blur, and its Alt+T hotkey.
|
|
13
|
+
*/
|
|
14
|
+
const usePauseOnKeyboardFocus = (containerId) => {
|
|
15
|
+
useEffect(() => {
|
|
16
|
+
const regionId = containerId === void 0 ? "" : String(containerId);
|
|
17
|
+
let pausedRegion = null;
|
|
18
|
+
let resumeTimeout;
|
|
19
|
+
let usingPointer = false;
|
|
20
|
+
const getOwnRegion = (target) => {
|
|
21
|
+
const region = target instanceof Element ? target.closest("section.Toastify") : null;
|
|
22
|
+
return region?.id === regionId ? region : null;
|
|
23
|
+
};
|
|
24
|
+
const resumeIfFocusLeft = () => {
|
|
25
|
+
if (pausedRegion && !pausedRegion.contains(document.activeElement)) {
|
|
26
|
+
pausedRegion = null;
|
|
27
|
+
observer.disconnect();
|
|
28
|
+
toast.play({ containerId });
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
const observer = new MutationObserver(resumeIfFocusLeft);
|
|
32
|
+
const handlePointerDown = () => {
|
|
33
|
+
usingPointer = true;
|
|
34
|
+
};
|
|
35
|
+
const handleKeyDown = () => {
|
|
36
|
+
usingPointer = false;
|
|
37
|
+
};
|
|
38
|
+
const handleFocusIn = (event) => {
|
|
39
|
+
const region = getOwnRegion(event.target);
|
|
40
|
+
if (!region || usingPointer) return;
|
|
41
|
+
clearTimeout(resumeTimeout);
|
|
42
|
+
if (!pausedRegion) {
|
|
43
|
+
pausedRegion = region;
|
|
44
|
+
observer.observe(region, {
|
|
45
|
+
childList: true,
|
|
46
|
+
subtree: true
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
toast.pause({ containerId });
|
|
50
|
+
};
|
|
51
|
+
const handleFocusOut = (event) => {
|
|
52
|
+
if (getOwnRegion(event.target)) resumeTimeout = setTimeout(resumeIfFocusLeft);
|
|
53
|
+
};
|
|
54
|
+
document.addEventListener("pointerdown", handlePointerDown, true);
|
|
55
|
+
document.addEventListener("keydown", handleKeyDown, true);
|
|
56
|
+
document.addEventListener("focusin", handleFocusIn);
|
|
57
|
+
document.addEventListener("focusout", handleFocusOut);
|
|
58
|
+
return () => {
|
|
59
|
+
document.removeEventListener("pointerdown", handlePointerDown, true);
|
|
60
|
+
document.removeEventListener("keydown", handleKeyDown, true);
|
|
61
|
+
document.removeEventListener("focusin", handleFocusIn);
|
|
62
|
+
document.removeEventListener("focusout", handleFocusOut);
|
|
63
|
+
clearTimeout(resumeTimeout);
|
|
64
|
+
observer.disconnect();
|
|
65
|
+
};
|
|
66
|
+
}, [containerId]);
|
|
67
|
+
};
|
|
9
68
|
const ToastPortal = ({ toastClassName, ...props }) => {
|
|
10
69
|
const { autoClose, position } = useToastConfig();
|
|
70
|
+
usePauseOnKeyboardFocus(props.containerId);
|
|
11
71
|
const mappedPosition = POSTION_MAP[position];
|
|
12
72
|
return /* @__PURE__ */ jsx(ToastContainer, {
|
|
13
73
|
toastClassName: getToastClassName(toastClassName),
|
|
@@ -24,7 +24,8 @@ const splitCreateToastArgs = (args) => {
|
|
|
24
24
|
"containerId",
|
|
25
25
|
"data",
|
|
26
26
|
"position",
|
|
27
|
-
"autoClose"
|
|
27
|
+
"autoClose",
|
|
28
|
+
"role"
|
|
28
29
|
]))
|
|
29
30
|
},
|
|
30
31
|
props: { ...(0, lodash_pick_js.default)(args, [
|
|
@@ -32,6 +33,7 @@ const splitCreateToastArgs = (args) => {
|
|
|
32
33
|
"onClickActionButton",
|
|
33
34
|
"startIcon",
|
|
34
35
|
"closeIcon",
|
|
36
|
+
"closeAriaLabel",
|
|
35
37
|
"className"
|
|
36
38
|
]) },
|
|
37
39
|
data: { ...(0, lodash_pick_js.default)(args, [
|
|
@@ -5,11 +5,16 @@ import { ToastProps } from "./Toast.cjs";
|
|
|
5
5
|
import { ReactNode } from "react";
|
|
6
6
|
import { ToastContentProps, ToastOptions } from "react-toastify";
|
|
7
7
|
//#region src/components/client/Toast/createToast.d.ts
|
|
8
|
-
type CreateToastProps = Pick<ToastProps, 'actionButton' | 'onClickActionButton' | 'startIcon' | 'closeIcon' | 'className' | 'id'>;
|
|
8
|
+
type CreateToastProps = Pick<ToastProps, 'actionButton' | 'onClickActionButton' | 'startIcon' | 'closeIcon' | 'closeAriaLabel' | 'className' | 'id'>;
|
|
9
9
|
type CreateToastOptions<Data = unknown> = Pick<ToastOptions, 'closeOnClick' | 'pauseOnHover' | 'containerId' | 'onClose'> & {
|
|
10
10
|
data?: Data;
|
|
11
11
|
position?: ToastPosition;
|
|
12
12
|
autoClose?: number | false;
|
|
13
|
+
/**
|
|
14
|
+
* ARIA role of the toast. `alert` is announced assertively; `status` is announced politely.
|
|
15
|
+
* @default "alert"
|
|
16
|
+
*/
|
|
17
|
+
role?: 'alert' | 'status';
|
|
13
18
|
};
|
|
14
19
|
type ToastLoadingPromise = Promise<{
|
|
15
20
|
result: 'success' | 'error';
|
|
@@ -6,11 +6,16 @@ import { ToastProps } from "./Toast.js";
|
|
|
6
6
|
import { ReactNode } from "react";
|
|
7
7
|
import { ToastContentProps, ToastOptions } from "react-toastify";
|
|
8
8
|
//#region src/components/client/Toast/createToast.d.ts
|
|
9
|
-
type CreateToastProps = Pick<ToastProps, 'actionButton' | 'onClickActionButton' | 'startIcon' | 'closeIcon' | 'className' | 'id'>;
|
|
9
|
+
type CreateToastProps = Pick<ToastProps, 'actionButton' | 'onClickActionButton' | 'startIcon' | 'closeIcon' | 'closeAriaLabel' | 'className' | 'id'>;
|
|
10
10
|
type CreateToastOptions<Data = unknown> = Pick<ToastOptions, 'closeOnClick' | 'pauseOnHover' | 'containerId' | 'onClose'> & {
|
|
11
11
|
data?: Data;
|
|
12
12
|
position?: ToastPosition;
|
|
13
13
|
autoClose?: number | false;
|
|
14
|
+
/**
|
|
15
|
+
* ARIA role of the toast. `alert` is announced assertively; `status` is announced politely.
|
|
16
|
+
* @default "alert"
|
|
17
|
+
*/
|
|
18
|
+
role?: 'alert' | 'status';
|
|
14
19
|
};
|
|
15
20
|
type ToastLoadingPromise = Promise<{
|
|
16
21
|
result: 'success' | 'error';
|
|
@@ -19,7 +19,8 @@ const splitCreateToastArgs = (args) => {
|
|
|
19
19
|
"containerId",
|
|
20
20
|
"data",
|
|
21
21
|
"position",
|
|
22
|
-
"autoClose"
|
|
22
|
+
"autoClose",
|
|
23
|
+
"role"
|
|
23
24
|
]))
|
|
24
25
|
},
|
|
25
26
|
props: { ...pick(args, [
|
|
@@ -27,6 +28,7 @@ const splitCreateToastArgs = (args) => {
|
|
|
27
28
|
"onClickActionButton",
|
|
28
29
|
"startIcon",
|
|
29
30
|
"closeIcon",
|
|
31
|
+
"closeAriaLabel",
|
|
30
32
|
"className"
|
|
31
33
|
]) },
|
|
32
34
|
data: { ...pick(args, [
|
|
@@ -897,6 +897,11 @@ interface UniversalToastProps {
|
|
|
897
897
|
* Optional icon displayed at the start of the toast.
|
|
898
898
|
*/
|
|
899
899
|
closeIcon?: UniversalIconSlot | false;
|
|
900
|
+
/**
|
|
901
|
+
* Accessible label for the close button.
|
|
902
|
+
* @default "Close"
|
|
903
|
+
*/
|
|
904
|
+
closeAriaLabel?: string;
|
|
900
905
|
/**
|
|
901
906
|
* Callback function to be called when the close button is clicked.
|
|
902
907
|
*/
|
|
@@ -897,6 +897,11 @@ interface UniversalToastProps {
|
|
|
897
897
|
* Optional icon displayed at the start of the toast.
|
|
898
898
|
*/
|
|
899
899
|
closeIcon?: UniversalIconSlot | false;
|
|
900
|
+
/**
|
|
901
|
+
* Accessible label for the close button.
|
|
902
|
+
* @default "Close"
|
|
903
|
+
*/
|
|
904
|
+
closeAriaLabel?: string;
|
|
900
905
|
/**
|
|
901
906
|
* Callback function to be called when the close button is clicked.
|
|
902
907
|
*/
|