@navinc/base-react-components/dist/wayfinder/dialog/standard-dialog.js

Nav's Pattern Library

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 { styled } from 'styled-components';
import { CopyOnSurface } from '../copy/index.js';
import { elevation4 } from '../../themes/elevation.js';
import { DialogContent, DialogInternal, DialogRoot, DialogTrigger } from './dialog.js';
import { NoStyleButton } from '../../no-style-button.js';
import { Icon } from '../icon/icon.js';
import { styledBackwardsCompatibility } from '../../styled-backwards-compatibility.js';
const StandardDialogHeader = styled.div.withConfig({ displayName: "brc-sc-StandardDialogHeader", componentId: "brc-sc-fz4ctz" }) `
  display: grid;
  grid-template-columns: ${({ $noCloseIcon }) => ($noCloseIcon ? 'auto' : '48px auto 48px')};
  justify-content: ${({ $noCloseIcon }) => ($noCloseIcon ? 'center' : 'space-between')};
  align-items: center;
  padding: ${({ theme }) => theme.spacing.space200};
  border-bottom: 1px solid ${({ theme }) => theme.outlineVariant};
`;
const StandardDialogLayout = styled.div.withConfig({ displayName: "brc-sc-StandardDialogLayout", componentId: "brc-sc-kbyhnw" }) `
  display: flex;
  flex-direction: column;
  width: 100%;
`;
const TextAlignCenter = styled.div.withConfig({ displayName: "brc-sc-TextAlignCenter", componentId: "brc-sc-jvxyke" }) `
  text-align: center;
`;
const FixedBottomOnPhone = styled.div.withConfig({ displayName: "brc-sc-FixedBottomOnPhone", componentId: "brc-sc-10b1dgw" }) `
  position: fixed;
  left: 50%;
  bottom: 0%;
  transform: translateX(-50%);
  max-width: 100%;
  max-height: calc(100% - 80px);
  display: flex;
  z-index: 1001;

  ${({ theme }) => theme.mediaQuery.largerThanPhone} {
    top: 50%;
    bottom: unset;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 80px);
    padding: ${({ theme }) => theme.spacing.space200};
  }
`;
const BottomContainer = styled.div.withConfig({ displayName: "brc-sc-BottomContainer", componentId: "brc-sc-qb76aw" }) `
  ${elevation4}
  display: flex;
  background-color: ${({ theme }) => theme.surfaceContainer};
  border-radius: ${({ theme }) => theme.radius.radius400};
  border-radius: ${({ theme }) => theme.radius.radius0};
  border-top-left-radius: ${({ theme }) => theme.radius.radius400};
  border-top-right-radius: ${({ theme }) => theme.radius.radius400};
  width: ${({ $width }) => $width || '800px'};
  max-width: 100%;
  overflow: hidden;

  ${({ theme }) => theme.mediaQuery.largerThanPhone} {
    border-radius: ${({ theme }) => theme.radius.radius400};
  }
`;
export const StandardDialogFooter = styled.div.withConfig({ displayName: "brc-sc-StandardDialogFooter", componentId: "brc-sc-syuz5x" }) `
  border-top: 1px solid ${({ theme }) => theme.outlineVariant};
  background-color: ${({ theme }) => theme.surfaceContainer};
`;
export const StandardDialogBody = styled.div.withConfig({ displayName: "brc-sc-StandardDialogBody", componentId: "brc-sc-1njin04" }) `
  overflow-y: auto;

  ${StandardDialogFooter} {
    position: sticky;
    bottom: 0;
    z-index: 1;
  }
`;
export const StandardDialogBodyPadding = styled.div.withConfig({ displayName: "brc-sc-StandardDialogBodyPadding", componentId: "brc-sc-acvq7c" }) `
  padding: ${({ theme }) => theme.spacing.space400};
`;
export const StandardDialogCloseIconButton = styled((props) => (_jsx(DialogInternal.Close, Object.assign({ asChild: true, "data-testid": "standard-dialog:close-x" }, props, { children: _jsx(NoStyleButton, { "aria-label": "Close", children: _jsx(Icon, { name: "actions/close", size: "large" }) }) })))).withConfig({ displayName: "brc-sc-StandardDialogCloseIconButton", componentId: "brc-sc-1grcm0p" }) `
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
`;
export const StandardDialogContainer = (_a) => {
    var { children, width, contentOverlayStyle } = _a, props = __rest(_a, ["children", "width", "contentOverlayStyle"]);
    return (_jsx(FixedBottomOnPhone, { style: contentOverlayStyle, children: _jsx(BottomContainer, Object.assign({ "$width": width }, props, { children: children })) }));
};
export const StandardDialogContent = (_a) => {
    var { title, noCloseIcon, children } = _a, props = __rest(_a, ["title", "noCloseIcon", "children"]);
    return (_jsxs(StandardDialogLayout, Object.assign({}, props, { children: [(!noCloseIcon || title) && (_jsxs(StandardDialogHeader, { "data-testid": "standard-dialog:header", "$noCloseIcon": noCloseIcon, children: [noCloseIcon ? _jsx("div", {}) : _jsx(StandardDialogCloseIconButton, {}), title && (_jsx(DialogInternal.Title, { asChild: true, children: _jsx(TextAlignCenter, { children: _jsx(CopyOnSurface, { component: "h4", size: "title2", children: title }) }) }))] })), _jsx(StandardDialogBody, { children: children })] })));
};
export const StandardDialog = styledBackwardsCompatibility((_a) => {
    var { open, defaultOpen, onOpenChange, modal, trigger, title, noCloseIcon, children, overlayStyle, onInteractOutside } = _a, props = __rest(_a, ["open", "defaultOpen", "onOpenChange", "modal", "trigger", "title", "noCloseIcon", "children", "overlayStyle", "onInteractOutside"]);
    return (_jsxs(DialogRoot, { open, defaultOpen, onOpenChange, modal, children: [trigger && _jsx(DialogTrigger, { asChild: true, children: trigger }), _jsx(DialogContent, { overlayStyle: overlayStyle, onInteractOutside: onInteractOutside, children: _jsx(StandardDialogContainer, Object.assign({}, props, { children: _jsx(StandardDialogContent, { title, noCloseIcon, children: children }) })) })] }));
});
//# sourceMappingURL=standard-dialog.js.map