braid-design-system
Version:
Themeable design system for the SEEK Group
160 lines (159 loc) • 8.11 kB
JavaScript
"use strict";
const jsxRuntime = require("react/jsx-runtime");
const assert = require("assert");
const react = require("react");
const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
const lib_components_ButtonIcon_ButtonIcon_cjs = require("../ButtonIcon/ButtonIcon.cjs");
const lib_components_Column_Column_cjs = require("../Column/Column.cjs");
const lib_components_Columns_Columns_cjs = require("../Columns/Columns.cjs");
const lib_components_Inline_Inline_cjs = require("../Inline/Inline.cjs");
const lib_components_Stack_Stack_cjs = require("../Stack/Stack.cjs");
const lib_components_Text_Text_cjs = require("../Text/Text.cjs");
const lib_components_TextLinkButton_TextLinkButton_cjs = require("../TextLinkButton/TextLinkButton.cjs");
const lib_components_private_Overlay_Overlay_cjs = require("../private/Overlay/Overlay.cjs");
const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
const lib_components_useToast_consts_cjs = require("./consts.cjs");
const lib_components_useToast_useTimeout_cjs = require("./useTimeout.cjs");
const lib_components_useToast_Toast_css_cjs = require("./Toast.css.cjs");
const lib_css_lineHeightContainer_css_cjs = require("../../css/lineHeightContainer.css.cjs");
const lib_components_icons_IconClear_IconClear_cjs = require("../icons/IconClear/IconClear.cjs");
const lib_components_icons_IconPositive_IconPositive_cjs = require("../icons/IconPositive/IconPositive.cjs");
const lib_components_icons_IconCritical_IconCritical_cjs = require("../icons/IconCritical/IconCritical.cjs");
const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
const toneToIcon = {
critical: lib_components_icons_IconCritical_IconCritical_cjs.IconCritical,
positive: lib_components_icons_IconPositive_IconPositive_cjs.IconPositive
};
const toastDuration = 10 * 1e3;
const borderRadius = "large";
const Action = ({ label, onClick, removeToast }) => {
const handleClick = react.useCallback(
(event) => {
event.stopPropagation();
removeToast();
onClick();
},
[removeToast, onClick]
);
return /* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_Text_cjs.Text, { baseline: false, children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { component: "span", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_TextLinkButton_TextLinkButton_cjs.TextLinkButton, { onClick: handleClick, hitArea: "large", children: label }) }) });
};
const ToastIcon = ({ tone, icon }) => {
if (tone !== "neutral") {
const Icon = toneToIcon[tone];
return /* @__PURE__ */ jsxRuntime.jsx(Icon, { tone });
}
if (icon) {
return react.cloneElement(icon, { tone });
}
return null;
};
const Toast = react.forwardRef(
({
toastKey,
dedupeKey,
message,
description,
tone,
icon,
onClose,
closeLabel = "Close",
action,
shouldRemove,
data,
expanded = true,
...restProps
}, ref) => {
const remove = react.useCallback(
() => onClose(dedupeKey, toastKey),
[onClose, dedupeKey, toastKey]
);
const { stopTimeout, startTimeout } = lib_components_useToast_useTimeout_cjs.useTimeout({
duration: toastDuration,
onTimeout: remove
});
react.useEffect(() => {
if (shouldRemove) {
stopTimeout();
remove();
}
}, [shouldRemove, remove, stopTimeout]);
react.useEffect(
() => expanded ? stopTimeout() : startTimeout(),
[expanded, startTimeout, stopTimeout]
);
assert__default.default(
!icon || icon.props.size === void 0 && icon.props.tone === void 0,
"Icons cannot set the 'size' or 'tone' prop when passed to a Toast component"
);
assert__default.default(
!icon || icon && tone === "neutral",
`Icons cannot be customised on a Toast component using '${tone}' tone`
);
const content = description ? /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Stack_Stack_cjs.Stack, { space: "xxsmall", children: [
/* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_Text_cjs.Text, { weight: "medium", tone, baseline: false, children: message }),
description ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_Text_cjs.Text, { baseline: false, tone: "secondary", children: description }) : null,
action ? /* @__PURE__ */ jsxRuntime.jsx(Action, { removeToast: remove, ...action }, action.label) : null
] }) : /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Inline_Inline_cjs.Inline, { space: "xxsmall", children: [
/* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { paddingRight: "medium", children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_Text_cjs.Text, { weight: "medium", tone, baseline: false, children: message }) }),
action ? /* @__PURE__ */ jsxRuntime.jsx(Action, { removeToast: remove, ...action }, action.label) : null
] });
return /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { position: "relative", width: "full", display: "flex", ref, children: /* @__PURE__ */ jsxRuntime.jsxs(
lib_components_Box_Box_cjs.Box,
{
role: "alert",
textAlign: "left",
background: { lightMode: "surfaceDark", darkMode: "surface" },
boxShadow: {
lightMode: "borderNeutral",
darkMode: "borderNeutralLight"
},
borderRadius,
paddingY: "medium",
paddingX: "gutter",
marginTop: lib_components_useToast_consts_cjs.toastGap,
width: "full",
position: "relative",
className: lib_components_useToast_Toast_css_cjs.toast,
tabIndex: 0,
outline: "focus",
onClick: (event) => {
event.stopPropagation();
},
...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
children: [
/* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { transition: "fast", className: lib_components_useToast_Toast_css_cjs.collapsedToastContent, children: /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Columns_Columns_cjs.Columns, { space: "none", children: [
tone !== "neutral" || tone === "neutral" && icon ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_Column_Column_cjs.Column, { width: "content", children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { paddingRight: "small", children: /* @__PURE__ */ jsxRuntime.jsx(ToastIcon, { tone, icon }) }) }) : null,
/* @__PURE__ */ jsxRuntime.jsx(lib_components_Column_Column_cjs.Column, { children: content }),
/* @__PURE__ */ jsxRuntime.jsx(lib_components_Column_Column_cjs.Column, { width: "content", children: /* @__PURE__ */ jsxRuntime.jsx(
lib_components_Box_Box_cjs.Box,
{
width: "touchable",
display: "flex",
justifyContent: "flexEnd",
alignItems: "center",
className: lib_css_lineHeightContainer_css_cjs.lineHeightContainer.standard,
"aria-hidden": true,
children: /* @__PURE__ */ jsxRuntime.jsx(
lib_components_ButtonIcon_ButtonIcon_cjs.ButtonIcon,
{
icon: /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconClear_IconClear_cjs.IconClear, { tone: "secondary" }),
variant: "transparent",
onClick: (event) => {
event.stopPropagation();
remove();
},
label: closeLabel,
data: process.env.NODE_ENV !== "production" ? { testid: "clearToast" } : {}
}
)
}
) })
] }) }),
/* @__PURE__ */ jsxRuntime.jsx(lib_components_private_Overlay_Overlay_cjs.Overlay, { visible: true, borderRadius, boxShadow: "large" })
]
}
) });
}
);
exports.Toast = Toast;