@navinc/base-react-components
Version:
Nav's Pattern Library
47 lines • 2.55 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import { styled } from 'styled-components';
import { Button } from '../button/button.js';
import { styledBackwardsCompatibility } from '../../styled-backwards-compatibility.js';
/** All internal styled components used to build the Dialog to allow fine-grained overrides */
export const DialogInternal = {
Root: DialogPrimitive.Root,
Trigger: styledBackwardsCompatibility(DialogPrimitive.Trigger),
Portal: DialogPrimitive.Portal,
Overlay: styled(DialogPrimitive.Overlay) `
/* 80 suffix is 50% opacity */
background-color: ${({ theme }) => theme.onSurfaceDim}80;
position: fixed;
inset: 0;
backdrop-filter: blur(2px);
z-index: 1000;
`,
Content: styledBackwardsCompatibility(DialogPrimitive.Content),
Title: styledBackwardsCompatibility(DialogPrimitive.Title),
Description: DialogPrimitive.Description,
Close: styledBackwardsCompatibility(DialogPrimitive.Close),
};
/** Unstyled content container for dialog with the overlay. */
export const DialogContent = forwardRef((_a, forwardedRef) => {
var { children, overlayStyle } = _a, props = __rest(_a, ["children", "overlayStyle"]);
return (_jsxs(DialogInternal.Portal, { children: [_jsx(DialogInternal.Overlay, { "data-testid": "dialog:overlay", style: overlayStyle }), _jsx(DialogInternal.Content, Object.assign({ "data-testid": "dialog:content" }, props, { ref: forwardedRef, children: children }))] }));
});
/** Contains all the parts of a dialog. */
export const DialogRoot = DialogInternal.Root;
/** The button that opens the dialog. */
export const DialogTrigger = DialogInternal.Trigger;
/** A {@link Button} that handles closing the dialog. */
export const DialogCloseButton = (props) => (_jsx(DialogPrimitive.Close, { asChild: true, children: _jsx(Button, Object.assign({ "aria-label": "Close", "data-testid": "dialog:close-button" }, props)) }));
//# sourceMappingURL=dialog.js.map