@react-spectrum/s2/dist/Dialog.cjs.map

Spectrum 2 UI components in React

{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Dialog.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ButtonGroupContext} from './ButtonGroup';\nimport {CloseButton} from './CloseButton';\nimport {composeRenderProps, OverlayTriggerStateContext, Provider, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';\nimport {ContentContext, FooterContext, HeaderContext, HeadingContext} from './Content';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef} from 'react';\nimport {ImageContext} from './Image';\nimport {Modal} from './Modal';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils';\nimport {useDOMRef} from '@react-spectrum/utils';\n\n// TODO: what style overrides should be allowed?\nexport interface DialogProps extends Omit<RACDialogProps, 'className' | 'style'>, StyleProps {\n  /**\n   * Whether the Dialog is dismissible.\n   */\n  isDismissible?: boolean,\n  /**\n   * The size of the Dialog.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /** Whether pressing the escape key to close the dialog should be disabled. */\n  isKeyboardDismissDisabled?: boolean\n}\n\nconst image = style({\n  width: 'full',\n  height: 140,\n  flexShrink: 0,\n  objectFit: 'cover'\n});\n\nconst heading = style({\n  flexGrow: 1,\n  marginY: 0,\n  font: 'heading'\n});\n\nconst header = style({\n  font: 'body-lg'\n});\n\nconst content =  style({\n  flexGrow: 1,\n  overflowY: {\n    default: 'auto',\n    // Make the whole dialog scroll rather than only the content when the height it small.\n    [`@media (height < ${400 / 16}rem)`]: 'visible'\n  },\n  font: 'body',\n  // TODO: adjust margin on mobile?\n  paddingX: {\n    default: 32\n  }\n});\n\nconst footer = style({\n  flexGrow: 1,\n  font: 'body'\n});\n\nconst buttonGroup = style({\n  marginStart: 'auto',\n  maxWidth: 'full'\n});\n\nexport const dialogInner = style({\n  display: 'flex',\n  flexDirection: 'column',\n  flexGrow: 1,\n  maxHeight: 'inherit',\n  boxSizing: 'border-box',\n  outlineStyle: 'none',\n  fontFamily: 'sans',\n  borderRadius: 'inherit',\n  overflow: 'auto'\n});\n\n/**\n * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.\n * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.\n */\nexport const Dialog = forwardRef(function Dialog(props: DialogProps, ref: DOMRef) {\n  let {size = 'M', isDismissible, isKeyboardDismissDisabled} = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <Modal size={size} isDismissable={isDismissible} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>\n      <RACDialog\n        {...props}\n        ref={domRef}\n        style={props.UNSAFE_style}\n        className={(props.UNSAFE_className || '') + dialogInner}>\n        {composeRenderProps(props.children, (children) => (\n          // Render the children multiple times inside the wrappers we need to implement the layout.\n          // Each instance hides certain children so that they are all rendered in the correct locations.\n          // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n          <OverlayTriggerStateContext.Provider value={null}>\n            {/* Hero image */}\n            <Provider\n              values={[\n                [ImageContext, {styles: image}],\n                [HeadingContext, {isHidden: true}],\n                [HeaderContext, {isHidden: true}],\n                [ContentContext, {isHidden: true}],\n                [FooterContext, {isHidden: true}],\n                [ButtonGroupContext, {isHidden: true}]\n              ]}>\n              {children}\n            </Provider>\n            {/* Top header: heading, header, dismiss button, and button group (in fullscreen dialogs). */}\n            <div\n              className={style({\n                // Wrapper that creates the margin for the dismiss button.\n                display: 'flex',\n                alignItems: 'start',\n                columnGap: 12,\n                paddingStart: {\n                  default: 32\n                },\n                paddingEnd: {\n                  default: 32,\n                  isDismissible: 12\n                },\n                paddingTop: {\n                  default: 12 // margin to dismiss button\n                }\n              })({isDismissible: props.isDismissible})}>\n              <div\n                className={style({\n                  // Wrapper for heading, header, and button group.\n                  // This swaps orientation from horizontal to vertical at small screen sizes.\n                  display: 'flex',\n                  flexGrow: 1,\n                  marginTop: {\n                    default: 20, // 32 - 12 (handled above)\n                    ':empty': 0\n                  },\n                  marginBottom: {\n                    default: 16,\n                    ':empty': 0\n                  },\n                  columnGap: 24,\n                  rowGap: 8,\n                  flexDirection: {\n                    default: 'column',\n                    sm: 'row'\n                  },\n                  alignItems: {\n                    default: 'start',\n                    sm: 'center'\n                  }\n                })}>\n                <Provider\n                  values={[\n                    [ImageContext, {hidden: true}],\n                    [HeadingContext, {styles: heading}],\n                    [HeaderContext, {styles: header}],\n                    [ContentContext, {isHidden: true}],\n                    [FooterContext, {isHidden: true}],\n                    [ButtonGroupContext, {isHidden: true}]\n                  ]}>\n                  {children}\n                </Provider>\n              </div>\n              {props.isDismissible && \n                <CloseButton styles={style({marginBottom: 12})} />\n              }\n            </div>\n            {/* Main content */}\n            <Provider\n              values={[\n                [ImageContext, {hidden: true}],\n                [HeadingContext, {isHidden: true}],\n                [HeaderContext, {isHidden: true}],\n                [ContentContext, {styles: content}],\n                [FooterContext, {isHidden: true}],\n                [ButtonGroupContext, {isHidden: true}]\n              ]}>\n              {children}\n            </Provider>\n            {/* Footer and button group */}\n            <div\n              className={style({\n                display: 'flex',\n                paddingX: {\n                  default: 32\n                },\n                paddingBottom: {\n                  default: 32\n                },\n                paddingTop: {\n                  default: 32,\n                  ':empty': 0\n                },\n                gap: 24,\n                alignItems: 'center',\n                flexWrap: 'wrap'\n              })}>\n              <Provider\n                values={[\n                  [ImageContext, {hidden: true}],\n                  [HeadingContext, {isHidden: true}],\n                  [HeaderContext, {isHidden: true}],\n                  [ContentContext, {isHidden: true}],\n                  [FooterContext, {styles: footer}],\n                  [ButtonGroupContext, {isHidden: props.isDismissible, styles: buttonGroup, align: 'end'}]\n                ]}>\n                {children}\n              </Provider>\n            </div>\n          </OverlayTriggerStateContext.Provider>\n        ))}\n      </RACDialog>\n    </Modal>\n  );\n});\n"],"names":[],"version":3,"file":"Dialog.cjs.map"}