@workday/canvas-kit-docs
Version:
Documentation components of Canvas Kit components
63 lines (62 loc) • 3.85 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useRef } from 'react';
import { DeleteButton } from '@workday/canvas-kit-react/button';
import { useUniqueId } from '@workday/canvas-kit-react/common';
import { Box, Flex } from '@workday/canvas-kit-react/layout';
import { Popup, useCloseOnEscape, useCloseOnOutsideClick, useInitialFocus, usePopupModel, useReturnFocus, } from '@workday/canvas-kit-react/popup';
import { Heading } from '@workday/canvas-kit-react/text';
import { createStyles, px2rem } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
const headingStyles = createStyles({
marginBlockStart: '0',
});
const cardStyles = createStyles({
width: px2rem(320),
});
const flexStyles = createStyles({
gap: system.gap.md,
padding: system.padding.xs,
});
const bodyStyles = createStyles({
marginBlock: '0',
});
const clipContainerStyles = createStyles({
padding: system.padding.md,
border: `${px2rem(2)} dashed ${system.color.border.info.default}`,
height: px2rem(200),
position: 'relative',
overflow: 'clip',
});
const visibleContainerStyles = createStyles({
padding: system.padding.md,
border: `${px2rem(2)} dashed ${system.color.border.info.default}`,
height: px2rem(200),
position: 'relative',
overflow: 'visible',
});
const scrollContainerStyles = createStyles({
padding: system.padding.md,
border: `${px2rem(2)} dashed ${system.color.border.info.default}`,
height: px2rem(200),
position: 'relative',
overflow: 'scroll',
});
const comparisonLayoutStyles = createStyles({
display: 'grid',
gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
gap: system.gap.lg,
marginBlockEnd: system.gap.md,
});
function SingleInlinePopup({ overflowLabel, containerStyles, }) {
const messageId = useUniqueId();
const initialFocusRef = useRef(null);
const model = usePopupModel({ initialFocusRef });
useCloseOnOutsideClick(model);
useCloseOnEscape(model);
useInitialFocus(model);
useReturnFocus(model);
return (_jsxs(Box, { cs: containerStyles, children: [_jsx(Heading, { size: "small", as: "h4", cs: headingStyles, children: overflowLabel }), _jsxs(Popup, { model: model, children: [_jsx(Popup.Target, { as: DeleteButton, children: "Delete Item" }), _jsx(Popup.Popper, { placement: "top", portal: false, children: _jsxs(Popup.Card, { cs: cardStyles, "aria-describedby": messageId, children: [_jsx(Popup.Heading, { children: "Delete Item" }), _jsx(Popup.Body, { children: _jsx(Box, { as: "p", id: messageId, cs: bodyStyles, children: "Are you sure you'd like to delete the item titled 'My Item'?" }) }), _jsxs(Flex, { cs: flexStyles, children: [_jsx(Popup.CloseButton, { ref: initialFocusRef, children: "Cancel" }), _jsx(Popup.CloseButton, { as: DeleteButton, children: "Delete" })] })] }) })] })] }));
}
export const InlinePopupNoPortal = () => {
return (_jsxs(_Fragment, { children: [_jsxs(Flex, { cs: comparisonLayoutStyles, children: [_jsx(SingleInlinePopup, { overflowLabel: "overflow: visible", containerStyles: visibleContainerStyles }), _jsx(SingleInlinePopup, { overflowLabel: "overflow: clip", containerStyles: clipContainerStyles }), _jsx(SingleInlinePopup, { overflowLabel: "overflow: scroll", containerStyles: scrollContainerStyles })] }), _jsxs("p", { children: ["With ", _jsx("code", { children: "overflow: visible" }), ", the popup can extend past the dashed border. With", ' ', _jsx("code", { children: "overflow: scroll" }), " (or ", _jsx("code", { children: "hidden" }), " / ", _jsx("code", { children: "clip" }), "), the popup is constrained and any overflow is clipped. The container uses ", _jsx("code", { children: "position: relative" }), ' ', "so it establishes a containing block for the positioned popup."] })] }));
};