diff --git a/packages/toast/src/components/base-toast/component.tsx b/packages/toast/src/components/base-toast/component.tsx index 4e9e8ff94f..b823c77bf4 100644 --- a/packages/toast/src/components/base-toast/component.tsx +++ b/packages/toast/src/components/base-toast/component.tsx @@ -31,6 +31,7 @@ const CSS_TRANSITION_CLASS_NAMES = { export type BaseToastProps = ToastPlateProps & Pick< PopoverProps, + | 'fallbackPlacements' | 'position' | 'offset' | 'open' @@ -102,6 +103,7 @@ export const BaseToast = forwardRef( getPortalContainer, useAnchorWidth, closeWithClickOutside = true, + fallbackPlacements, ...restProps }, ref, @@ -190,6 +192,7 @@ export const BaseToast = forwardRef( getPortalContainer={getPortalContainer} zIndex={zIndex} useAnchorWidth={useAnchorWidth} + fallbackPlacements={fallbackPlacements} > {ToastPlate ? ( diff --git a/packages/toast/src/docs/Component.stories.tsx b/packages/toast/src/docs/Component.stories.tsx index 24fc4cf385..5fdd2e4bae 100644 --- a/packages/toast/src/docs/Component.stories.tsx +++ b/packages/toast/src/docs/Component.stories.tsx @@ -30,14 +30,14 @@ export const toast: Story = { 'left', 'left-start', 'left-end', - ]; + ] as const; const [anchorToastOpen, setAnchorToastOpen] = React.useState(false); const [fixedToastOpen, setFixedToastOpen] = React.useState(false); - const [buttonElement, setButtonElement] = React.useState(null); - const handleButtonRef = (node) => { + const [buttonElement, setButtonElement] = React.useState(null); + const handleButtonRef = (node: HTMLButtonElement) => { setButtonElement(node); }; - const containerRef = React.useRef(); + const containerRef = React.useRef(null); const isMobile = document.body.clientWidth < 450; const closeWithClickOutside = boolean('closeWithClickOutside', true); return ( @@ -150,14 +150,14 @@ export const toast_mobile: Story = { 'left', 'left-start', 'left-end', - ]; + ] as const; const [anchorToastOpen, setAnchorToastOpen] = React.useState(false); const [fixedToastOpen, setFixedToastOpen] = React.useState(false); - const [buttonElement, setButtonElement] = React.useState(null); - const handleButtonRef = (node) => { + const [buttonElement, setButtonElement] = React.useState(null); + const handleButtonRef = (node: HTMLButtonElement) => { setButtonElement(node); }; - const containerRef = React.useRef(); + const containerRef = React.useRef(null); const closeWithClickOutside = boolean('closeWithClickOutside', true); return (
{ + const [buttonElement, setButtonElement] = React.useState(null); + const handleButtonRef = (node: HTMLButtonElement) => { setButtonElement(node); }; - const containerRef = React.useRef(); + const containerRef = React.useRef(null); const closeWithClickOutside = boolean('closeWithClickOutside', true); return (
{ const [buttonElement, setButtonElement] = React.useState(null); - const handleButtonRef = node => { + const handleButtonRef = (node) => { setButtonElement(node); }; - const isMobile = document.body.clientWidth < 450; - return (
{ }} > { autoCloseDelay={1500} /> { setFixedToastOpen(false); }} autoCloseDelay={3000} actionButton={ } - style={{ ...(!isMobile && {maxWidth: 'calc(100vw - 150px)'} )}} + style={{ ...(!isMobile() && { maxWidth: 'calc(100vw - 150px)' }) }} />