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

Spectrum 2 UI components in React

{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAuBD,MAAM;AAON,MAAM;AAQN,MAAM;AAWN,MAAM;AAMC,MAAM;AAyDN,MAAM,0DAAmB,CAAA,GAAA,uBAAS,EAAE,SAAS,iBAAiB,KAA4B,EAAE,GAAW;IAC5G,IAAI,WAAC,UAAU,yCAAc,yBAAyB,EAAC,GAAG;IAC1D,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,gCAAC,CAAA,GAAA,+BAAI;QAAE,MAAM;QAAS,2BAA2B;kBAC/C,cAAA,gCAAC,CAAA,GAAA,iCAAQ;YACN,GAAG,KAAK;YACT,KAAK;YACL,OAAO,MAAM,YAAY;YACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK;sBAC3C,CAAA,GAAA,6CAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,WACnC,oGAAoG;8BACpG,gCAAC,CAAA,GAAA,qDAAyB,EAAE,QAAQ;oBAAC,OAAO;8BAC1C,cAAA,gCAAC,CAAA,GAAA,mCAAO;wBACN,QAAQ;4BACN;gCAAC,CAAA,GAAA,wCAAa;gCAAG;oCAAC,QAAQ;gCAAO;6BAAE;4BACnC;gCAAC,CAAA,GAAA,uCAAY;gCAAG;oCAAC,QAAQ;gCAAM;6BAAE;4BACjC;gCAAC,CAAA,GAAA,wCAAa;gCAAG;oCAAC,QAAQ;gCAAO;6BAAE;4BACnC;gCAAC,CAAA,GAAA,4CAAiB;gCAAG;oCAAC,QAAQ;gCAAW;6BAAE;yBAC5C;kCACA;;;;;AAOf","sources":["packages/@react-spectrum/s2/src/FullscreenDialog.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 {composeRenderProps, OverlayTriggerStateContext, Provider, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';\nimport {ContentContext, HeaderContext, HeadingContext} from './Content';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef} from 'react';\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 FullscreenDialogProps extends Omit<RACDialogProps, 'className' | 'style'>, StyleProps {\n  /**\n   * The variant of fullscreen dialog to display.\n   * @default \"fullscreen\"\n   */\n  variant?: 'fullscreen' | 'fullscreenTakeover',\n  /** Whether pressing the escape key to close the dialog should be disabled. */\n  isKeyboardDismissDisabled?: boolean\n}\n\nconst heading = style({\n  gridArea: 'heading',\n  flexGrow: 1,\n  marginY: 0,\n  font: 'heading'\n});\n\nconst header = style({\n  gridArea: 'header',\n  marginX: {\n    sm: 'auto'\n  },\n  font: 'body-lg'\n});\n\nconst content =  style({\n  gridArea: 'content',\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});\n\nconst buttonGroup = style({\n  gridArea: 'buttons',\n  marginStart: 'auto',\n  maxWidth: 'full'\n});\n\nexport const dialogInner = style({\n  display: 'grid',\n  gridTemplateAreas: {\n    // Button group moves to the bottom on small screens.\n    default: [\n      'heading',\n      'header',\n      '.',\n      'content',\n      '.',\n      'buttons'\n    ],\n    sm: [\n      'heading header buttons',\n      '. . .',\n      'content content content'\n    ]\n  },\n  gridTemplateColumns: {\n    default: ['1fr'],\n    sm: ['auto', '1fr', 'auto']\n  },\n  gridTemplateRows: {\n    default: [\n      'auto',\n      'auto',\n      24,\n      '1fr',\n      24,\n      'auto'\n    ],\n    sm: [\n      'auto',\n      32,\n      '1fr'\n    ]\n  },\n  padding: {\n    default: 24,\n    sm: 32\n  },\n  columnGap: {\n    default: 16,\n    sm: 24\n  },\n  maxHeight: 'inherit',\n  height: 'full',\n  boxSizing: 'border-box',\n  outlineStyle: 'none',\n  fontFamily: 'sans',\n  borderRadius: 'inherit',\n  overflow: 'auto'\n});\n\n/**\n * Takeover dialogs are large types of dialogs. They use the totality of the screen and should be used for modal experiences with complex workflows.\n */\nexport const FullscreenDialog = forwardRef(function FullscreenDialog(props: FullscreenDialogProps, ref: DOMRef) {\n  let {variant = 'fullscreen', isKeyboardDismissDisabled} = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <Modal size={variant} 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          // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n          <OverlayTriggerStateContext.Provider value={null}>\n            <Provider\n              values={[\n                [HeadingContext, {styles: heading}],\n                [HeaderContext, {styles: header}],\n                [ContentContext, {styles: content}],\n                [ButtonGroupContext, {styles: buttonGroup}]\n              ]}>\n              {children}\n            </Provider>\n          </OverlayTriggerStateContext.Provider>\n        ))}\n      </RACDialog>\n    </Modal>\n  );\n});\n\n"],"names":[],"version":3,"file":"FullscreenDialog.cjs.map"}