@procore/core-react 12.25.1 → 12.26.0

package/dist/Modal/Modal.js

@@ -16,6 +16,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { Clear } from '@procore/core-icons/dist';
+import { useId } from '@react-aria/utils';
 import React, { useEffect } from 'react';
 import { Button } from '../Button';
 import { useModalDialogLike } from '../OverlayTrigger/a11yPresets';
@@ -41,9 +42,13 @@ var ModalCloseContext = /*#__PURE__*/React.createContext({
   howToClose: [],
   onClose: undefined
 });
+var ModalPrimaryHeadingCheckContext = /*#__PURE__*/React.createContext({
+  inModalHeader: false
+});
 var ModalBodyScrollContext = /*#__PURE__*/React.createContext({
   isBodyScrolled: false,
-  setIsBodyScrolled: noop
+  setIsBodyScrolled: noop,
+  ariaLabelledBy: undefined
 });
 var ModalClosableHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -53,6 +58,7 @@ var ModalClosableHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     qa = _ref.qa,
     props = _objectWithoutProperties(_ref, _excluded);
   var _React$useContext = React.useContext(ModalBodyScrollContext),
+    ariaLabelledBy = _React$useContext.ariaLabelledBy,
     isBodyScrolled = _React$useContext.isBodyScrolled;
   var _React$useContext2 = React.useContext(ModalCloseContext),
     howToClose = _React$useContext2.howToClose,
@@ -80,8 +86,15 @@ var ModalClosableHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     $isBodyScrolled: isBodyScrolled
   }, props, {
     ref: mergeRefs(ref, modalClosableHeaderRef)
-  }), /*#__PURE__*/React.createElement(StyledModalHeading, {
+  }), /*#__PURE__*/React.createElement(ModalPrimaryHeadingCheckContext.Provider, {
+    value: {
+      inModalHeader: true
+    }
+  }, /*#__PURE__*/React.createElement(StyledModalHeading, {
     $compact: compact
+    // This made all children the heading, like Title content
+    ,
+    id: ariaLabelledBy
   }, children), onClose && howToClose !== null && howToClose !== void 0 && howToClose.includes('x') || externalOnClose ? /*#__PURE__*/React.createElement(StyledModalCancel, null, /*#__PURE__*/React.createElement(Button, {
     "aria-label": I18n.t('core.modal.a11y.close'),
     "data-internal": "close-button",
@@ -90,7 +103,7 @@ var ModalClosableHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onClick: onClickButton,
     size: compact ? 'sm' : 'md',
     variant: "tertiary"
-  })) : null);
+  })) : null));
 });
 var ModalClosableFooterButtons = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var children = _ref2.children,
@@ -153,6 +166,7 @@ var ModalBody = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
   var scrollRef = React.useRef(null);
   var modalBodyRef = React.useRef(null);
   var _React$useContext5 = React.useContext(ModalBodyScrollContext),
+    ariaLabelledBy = _React$useContext5.ariaLabelledBy,
     setIsBodyScrolled = _React$useContext5.setIsBodyScrolled;
   var registerChildRef = useModalChildRegistryDispatch();
   useEffect(function () {
@@ -175,7 +189,9 @@ var ModalBody = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
     $isOverflowingY: isOverflowingY,
     $noSideSpacing: noSideSpacing,
     ref: mergeRefs(overflowRef, scrollRef, ref, modalBodyRef),
-    tabIndex: 0
+    tabIndex: 0,
+    role: "region",
+    "aria-labelledby": ariaLabelledBy
   }), children)));
 });
 var ModalFooterSummary = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
@@ -217,6 +233,8 @@ var Modal_ = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
     role = _ref7.role,
     props = _objectWithoutProperties(_ref7, _excluded7);
   useScrollLock(open);
+  var defaultLabelId = useId();
+  var labelledbyId = ariaLabel ? id : ariaLabelledby !== null && ariaLabelledby !== void 0 ? ariaLabelledby : defaultLabelId;
   var _React$useState = React.useState(open),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     visible = _React$useState2[0],
@@ -256,7 +274,7 @@ var Modal_ = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
   var _useModalDialogLike = useModalDialogLike({
       'aria-describedby': ariaDescribedby,
       'aria-details': ariaDetails,
-      'aria-labelledby': ariaLabelledby,
+      'aria-labelledby': labelledbyId,
       'aria-label': ariaLabel,
       id: id,
       isModal: false,
@@ -297,23 +315,27 @@ var Modal_ = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
     placement: placement
   }), /*#__PURE__*/React.createElement(StyledModalContent, {
     $compact: compact
-  }, /*#__PURE__*/React.createElement(ModalBodyScrollObserver, null, /*#__PURE__*/React.createElement(CloseWithConfirmContext.Provider, {
+  }, /*#__PURE__*/React.createElement(ModalBodyScrollObserver, {
+    ariaLabelledBy: labelledbyId
+  }, /*#__PURE__*/React.createElement(CloseWithConfirmContext.Provider, {
     value: closeWithConfirmState
   }, children)))))))))) : null;
 });
-function ModalBodyScrollObserver(_ref8) {
-  var children = _ref8.children;
+var ModalBodyScrollObserver = function ModalBodyScrollObserver(_ref8) {
+  var ariaLabelledBy = _ref8.ariaLabelledBy,
+    children = _ref8.children;
   var _React$useState5 = React.useState(false),
     _React$useState6 = _slicedToArray(_React$useState5, 2),
     isBodyScrolled = _React$useState6[0],
     setIsBodyScrolled = _React$useState6[1];
   return /*#__PURE__*/React.createElement(ModalBodyScrollContext.Provider, {
     value: {
+      ariaLabelledBy: ariaLabelledBy,
       isBodyScrolled: isBodyScrolled,
       setIsBodyScrolled: setIsBodyScrolled
     }
   }, children);
-}
+};
 export var ConfirmModal = /*#__PURE__*/React.forwardRef(function (_ref9, ref) {
   var children = _ref9.children,
     headline = _ref9.headline,
@@ -327,6 +349,21 @@ export var ConfirmModal = /*#__PURE__*/React.forwardRef(function (_ref9, ref) {
     size: "lg"
   }), headline), children);
 });
+
+/**
+ * Applies proper smenatics regardless of where in the Modal.
+ * Adds the generate ID to node when necessary so the dialog and scroll region
+ * aria-labelledby by can find the primary heading (in the Modal.Header)
+ */
+var ModalHeading = function ModalHeading(props) {
+  var _React$useContext6 = React.useContext(ModalBodyScrollContext),
+    ariaLabelledBy = _React$useContext6.ariaLabelledBy;
+  var _React$useContext7 = React.useContext(ModalPrimaryHeadingCheckContext),
+    inModalHeader = _React$useContext7.inModalHeader;
+  return /*#__PURE__*/React.createElement(Heading, _extends({
+    id: inModalHeader ? ariaLabelledBy : undefined
+  }, props));
+};
 function ModalState(props) {
   useDeprecation({
     oldThing: 'Modal.State'
@@ -375,8 +412,7 @@ export var Modal = addSubcomponents({
   FooterNotation: FooterNotation,
   FooterSummary: FooterSummary,
   Header: Header,
-  Heading: Heading,
-  // Could make this tabIndex -1, and focus it on open
+  Heading: ModalHeading,
   Overlay: Overlay,
   Scrim: Scrim,
   State: State,

package/dist/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":["Clear","React","useEffect","Button","useModalDialogLike","Portal","Heading","LevelContext","Section","SectionProvider","useDeprecation","useLayoutEventListener","OverridableFocusScope","useI18nContext","useOverflowObserver","useScrollLock","Visibility","addSubcomponents","CloseWithConfirmContext","useCloseWithConfirmContext","useCloseWithConfirmState","mergeRefs","ChildRegistryProvider","useModalChildRegistryDispatch","fadeInClassName","fadeOutClassName","StyledModal","StyledModalBody","StyledModalButtons","StyledModalCancel","StyledModalContainer","StyledModalContent","StyledModalFooter","StyledModalFooterNotation","StyledModalFooterSummary","StyledModalHeader","StyledModalHeading","StyledModalScrim","StyledModalWarningIcon","useInitializeModalFocus","noop","defaultStartLevel","initialBodyLevel","ModalCloseContext","createContext","howToClose","onClose","undefined","ModalBodyScrollContext","isBodyScrolled","setIsBodyScrolled","ModalClosableHeader","forwardRef","_ref","ref","children","_ref$compact","compact","externalOnClose","qa","props","_objectWithoutProperties","_excluded","_React$useContext","useContext","_React$useContext2","I18n","modalClosableHeaderRef","useRef","_useCloseWithConfirmC","closeWithConfirm","registerChildRef","child","onClickButton","e","includes","createElement","_extends","$compact","$isBodyScrolled","t","closeButton","icon","onClick","size","variant","ModalClosableFooterButtons","_ref2","_excluded2","_React$useContext3","_useCloseWithConfirmC2","modalClosableFooterButtonsRef","ModalContainer","_ref3","_ref3$compact","placement","width","_excluded3","_React$useContext4","modalContainerRef","hasOnClose","shadowStrength","$placement","$width","ModalBody","_ref4","_ref4$compact","_ref4$noSideSpacing","noSideSpacing","_excluded4","_useOverflowObserver","isOverflowingY","overflowRef","scrollRef","modalBodyRef","_React$useContext5","event","handler","currentTarget","scrollTop","scope","Provider","value","$isOverflowingY","$noSideSpacing","tabIndex","ModalFooterSummary","_ref5","_excluded5","ModalFooterNotation","_ref6","_excluded6","intent","color","italic","Modal_","_ref7","ariaDescribedby","ariaDetails","ariaLabelledby","ariaLabel","_ref7$compact","id","_ref7$onClickOverlay","onClickOverlay","_ref7$open","open","_ref7$placement","role","_excluded7","_React$useState","useState","_React$useState2","_slicedToArray","visible","setVisible","_React$useState3","_React$useState4","fadeType","setFadeType","closeWithConfirmState","fadeTimer","setTimeout","clearTimeout","onTransitionEnd","handleKeyDown","key","preventDefault","stopPropagation","_useModalDialogLike","isModal","isOpen","dialogProps_","dialogProps","onClickScrim","autoFocus","contain","restoreFocus","className","onKeyDown","ModalBodyScrollObserver","_ref8","_React$useState5","_React$useState6","ConfirmModal","_ref9","headline","_excluded8","Modal","ModalState","oldThing","displayName","Body","Container","Content","FooterSummary","Footer","FooterButtons","FooterNotation","Header","Overlay","Scrim","State"],"sources":["../../src/Modal/Modal.tsx"],"sourcesContent":["import { Clear } from '@procore/core-icons/dist'\nimport React, { useEffect } from 'react'\nimport { Button } from '../Button'\nimport { useModalDialogLike } from '../OverlayTrigger/a11yPresets'\nimport { Portal } from '../Portal'\nimport {\n  Heading,\n  LevelContext,\n  Section,\n  SectionProvider,\n} from '../Section/Section'\nimport type { TypographyProps } from '../Typography'\nimport { useDeprecation } from '../_hooks/Deprecation'\nimport { useLayoutEventListener } from '../_hooks/EventListener'\nimport { OverridableFocusScope } from '../_hooks/FocusScopeOverride'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { useOverflowObserver } from '../_hooks/OverflowObserver'\nimport { useScrollLock } from '../_hooks/ScrollLock'\nimport type { RenderProps } from '../_hooks/Visibility'\nimport { Visibility } from '../_hooks/Visibility'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport {\n  CloseWithConfirmContext,\n  useCloseWithConfirmContext,\n  useCloseWithConfirmState,\n} from '../_utils/closeWithConfirm'\nimport { mergeRefs } from '../_utils/mergeRefs'\nimport type { DivAttributes, SpanAttributes } from '../_utils/types'\nimport {\n  ChildRegistryProvider,\n  useModalChildRegistryDispatch,\n} from './ChildRegistry.context'\nimport {\n  fadeInClassName,\n  fadeOutClassName,\n  StyledModal,\n  StyledModalBody,\n  StyledModalButtons,\n  StyledModalCancel,\n  StyledModalContainer,\n  StyledModalContent,\n  StyledModalFooter,\n  StyledModalFooterNotation,\n  StyledModalFooterSummary,\n  StyledModalHeader,\n  StyledModalHeading,\n  StyledModalScrim,\n  StyledModalWarningIcon,\n} from './Modal.styles'\nimport type {\n  ConfirmModalProps,\n  ModalBodyProps,\n  ModalCloseableHeaderProps,\n  ModalCloseContextApi,\n  ModalContainerProps,\n  ModalProps,\n} from './Modal.types'\nimport { useInitializeModalFocus } from './useInitializeModalFocus'\n\nfunction noop() {}\nconst defaultStartLevel = 2\nconst initialBodyLevel = 3\n\nconst ModalCloseContext = React.createContext<ModalCloseContextApi>({\n  howToClose: [],\n  onClose: undefined,\n})\n\ninterface ModalBodyScrollContextApi {\n  isBodyScrolled: boolean\n  setIsBodyScrolled: React.Dispatch<React.SetStateAction<boolean>>\n}\n\nconst ModalBodyScrollContext = React.createContext<ModalBodyScrollContextApi>({\n  isBodyScrolled: false,\n  setIsBodyScrolled: noop,\n})\n\nconst ModalClosableHeader = React.forwardRef<\n  HTMLDivElement,\n  ModalCloseableHeaderProps\n>(\n  (\n    { children, compact = false, onClose: externalOnClose, qa, ...props },\n    ref\n  ) => {\n    const { isBodyScrolled } = React.useContext(ModalBodyScrollContext)\n    const { howToClose, onClose } = React.useContext(ModalCloseContext)\n    const I18n = useI18nContext()\n    const modalClosableHeaderRef = React.useRef(null)\n\n    const { closeWithConfirm } = useCloseWithConfirmContext()\n    const registerChildRef = useModalChildRegistryDispatch()\n\n    useEffect(() => {\n      registerChildRef({ child: 'header', ref: modalClosableHeaderRef })\n    }, [])\n\n    function onClickButton(e: React.MouseEvent<HTMLButtonElement>) {\n      if (onClose && howToClose?.includes('x')) {\n        closeWithConfirm(onClose)(e, 'x')\n        return\n      }\n      closeWithConfirm(externalOnClose!)(e)\n    }\n\n    return (\n      <StyledModalHeader\n        $compact={compact}\n        $isBodyScrolled={isBodyScrolled}\n        {...props}\n        ref={mergeRefs(ref, modalClosableHeaderRef)}\n      >\n        <StyledModalHeading $compact={compact}>{children}</StyledModalHeading>\n        {(onClose && howToClose?.includes('x')) || externalOnClose ? (\n          <StyledModalCancel>\n            <Button\n              aria-label={I18n.t('core.modal.a11y.close')}\n              data-internal=\"close-button\"\n              data-qa={qa?.closeButton}\n              icon={<Clear />}\n              onClick={onClickButton}\n              size={compact ? 'sm' : 'md'}\n              variant=\"tertiary\"\n            />\n          </StyledModalCancel>\n        ) : null}\n      </StyledModalHeader>\n    )\n  }\n)\n\nconst ModalClosableFooterButtons = React.forwardRef<\n  HTMLDivElement,\n  ModalCloseableHeaderProps\n>(({ children, ...props }, ref) => {\n  const { howToClose, onClose } = React.useContext(ModalCloseContext)\n  const I18n = useI18nContext()\n  const { closeWithConfirm } = useCloseWithConfirmContext()\n  const modalClosableFooterButtonsRef = React.useRef(null)\n\n  const registerChildRef = useModalChildRegistryDispatch()\n\n  useEffect(() => {\n    registerChildRef({\n      child: 'closeableButtons',\n      ref: modalClosableFooterButtonsRef,\n    })\n  }, [])\n\n  function onClickButton(e: React.MouseEvent<HTMLButtonElement>) {\n    closeWithConfirm(onClose!)(e, 'footer-button')\n  }\n\n  return (\n    <StyledModalButtons\n      {...props}\n      ref={mergeRefs(ref, modalClosableFooterButtonsRef)}\n    >\n      {howToClose?.includes('footer-button') && (\n        <Button onClick={onClickButton} variant=\"tertiary\">\n          {I18n.t('core.modal.cancel')}\n        </Button>\n      )}\n      {children}\n    </StyledModalButtons>\n  )\n})\n\nconst ModalContainer = React.forwardRef<HTMLDivElement, ModalContainerProps>(\n  ({ compact = false, placement, width, ...props }, ref) => {\n    const { onClose } = React.useContext(ModalCloseContext)\n    const modalContainerRef = React.useRef<HTMLDivElement>(null)\n    useInitializeModalFocus({ modalContainerRef, hasOnClose: !!onClose })\n\n    return (\n      <StyledModalContainer\n        {...props}\n        shadowStrength={4}\n        $compact={compact}\n        $placement={placement}\n        $width={width}\n        ref={mergeRefs(ref, modalContainerRef)}\n      />\n    )\n  }\n)\n\nconst ModalBody = React.forwardRef<HTMLDivElement, ModalBodyProps>(\n  ({ children, compact = false, noSideSpacing = false, ...props }, ref) => {\n    const { isOverflowingY, ref: overflowRef } = useOverflowObserver()\n    const scrollRef = React.useRef(null)\n    const modalBodyRef = React.useRef(null)\n    const { setIsBodyScrolled } = React.useContext(ModalBodyScrollContext)\n    const registerChildRef = useModalChildRegistryDispatch()\n\n    useEffect(() => {\n      registerChildRef({ child: 'body', ref: modalBodyRef })\n    }, [])\n\n    useLayoutEventListener({\n      event: 'scroll',\n      handler: (e: React.UIEvent<HTMLElement>) => {\n        setIsBodyScrolled(e.currentTarget.scrollTop > 0)\n      },\n      scope: scrollRef,\n    })\n\n    return (\n      <SectionProvider>\n        <LevelContext.Provider value={initialBodyLevel}>\n          <StyledModalBody\n            {...props}\n            $compact={compact}\n            $isOverflowingY={isOverflowingY}\n            $noSideSpacing={noSideSpacing}\n            ref={mergeRefs(overflowRef, scrollRef, ref, modalBodyRef)}\n            tabIndex={0}\n          >\n            {children}\n          </StyledModalBody>\n        </LevelContext.Provider>\n      </SectionProvider>\n    )\n  }\n)\n\nconst ModalFooterSummary = React.forwardRef<HTMLDivElement, DivAttributes>(\n  ({ children, ...props }, ref) => {\n    return (\n      <StyledModalFooterSummary {...props} ref={ref}>\n        {children}\n      </StyledModalFooterSummary>\n    )\n  }\n)\n\nconst ModalFooterNotation = React.forwardRef<\n  HTMLSpanElement,\n  SpanAttributes & TypographyProps\n>(({ children, ...props }, ref) => (\n  <StyledModalFooterNotation\n    aria-live=\"polite\"\n    intent=\"small\"\n    color=\"gray45\"\n    italic\n    {...props}\n    ref={ref}\n  >\n    {children}\n  </StyledModalFooterNotation>\n))\n\nconst Modal_ = React.forwardRef<HTMLDivElement, ModalProps>(\n  (\n    {\n      ['aria-describedby']: ariaDescribedby,\n      ['aria-details']: ariaDetails,\n      ['aria-labelledby']: ariaLabelledby,\n      ['aria-label']: ariaLabel,\n      children,\n      compact = false,\n      howToClose,\n      id,\n      onClickOverlay = noop,\n      onClose,\n      open = false,\n      placement = 'center',\n      role,\n      ...props\n    },\n    ref\n  ) => {\n    useScrollLock(open)\n    const [visible, setVisible] = React.useState<boolean>(open)\n    const [fadeType, setFadeType] = React.useState<string>('')\n    const closeWithConfirmState = useCloseWithConfirmState()\n    const { closeWithConfirm } = closeWithConfirmState\n\n    React.useEffect(() => {\n      if (open) {\n        setVisible(true)\n        const fadeTimer = setTimeout(() => {\n          setFadeType(fadeInClassName)\n        }, 0)\n        return () => clearTimeout(fadeTimer)\n      } else {\n        setFadeType(fadeOutClassName)\n      }\n    }, [open])\n\n    const onTransitionEnd = () => {\n      if (fadeType === fadeOutClassName) {\n        setVisible(false)\n      }\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (!onClose) return\n      if (e.key === 'Escape') {\n        e.preventDefault()\n        e.stopPropagation()\n        closeWithConfirm(onClose)(e, 'x')\n      }\n    }\n\n    const { dialogProps: dialogProps_ } = useModalDialogLike({\n      'aria-describedby': ariaDescribedby,\n      'aria-details': ariaDetails,\n      'aria-labelledby': ariaLabelledby,\n      'aria-label': ariaLabel,\n      id,\n      isModal: false,\n      isOpen: open,\n      role,\n    })\n\n    const dialogProps = onClose && role === 'dialog' ? dialogProps_ : {}\n\n    function onClickScrim(e: React.MouseEvent<HTMLDivElement>) {\n      onClickOverlay(e)\n      if (onClose && howToClose?.includes('scrim')) {\n        closeWithConfirm(onClose)(e, 'scrim')\n      }\n    }\n\n    return visible ? (\n      <Portal>\n        <ModalCloseContext.Provider value={{ onClose, howToClose }}>\n          <LevelContext.Provider value={defaultStartLevel}>\n            <ChildRegistryProvider>\n              <OverridableFocusScope\n                // TODO breaking - always\n                autoFocus={!!onClose}\n                contain={!!onClose}\n                restoreFocus={!!onClose}\n              >\n                <StyledModal\n                  className={fadeType}\n                  ref={ref}\n                  onTransitionEnd={onTransitionEnd}\n                  onKeyDown={handleKeyDown}\n                  {...dialogProps}\n                >\n                  <StyledModalScrim\n                    data-qa=\"core-modal-scrim\"\n                    onClick={onClickScrim}\n                  />\n\n                  <ModalContainer\n                    {...props}\n                    compact={compact}\n                    placement={placement}\n                  >\n                    <StyledModalContent $compact={compact}>\n                      <ModalBodyScrollObserver>\n                        <CloseWithConfirmContext.Provider\n                          value={closeWithConfirmState}\n                        >\n                          {children}\n                        </CloseWithConfirmContext.Provider>\n                      </ModalBodyScrollObserver>\n                    </StyledModalContent>\n                  </ModalContainer>\n                </StyledModal>\n              </OverridableFocusScope>\n            </ChildRegistryProvider>\n          </LevelContext.Provider>\n        </ModalCloseContext.Provider>\n      </Portal>\n    ) : null\n  }\n)\n\nfunction ModalBodyScrollObserver({ children }: { children: React.ReactNode }) {\n  const [isBodyScrolled, setIsBodyScrolled] = React.useState<boolean>(false)\n\n  return (\n    <ModalBodyScrollContext.Provider\n      value={{ isBodyScrolled, setIsBodyScrolled }}\n    >\n      {children}\n    </ModalBodyScrollContext.Provider>\n  )\n}\n\nexport const ConfirmModal = React.forwardRef<HTMLDivElement, ConfirmModalProps>(\n  ({ children, headline, onClose, ...props }, ref) => {\n    return (\n      <Modal {...props} ref={ref}>\n        <ModalClosableHeader onClose={onClose}>\n          <StyledModalWarningIcon size=\"lg\" />\n          {headline}\n        </ModalClosableHeader>\n        {children}\n      </Modal>\n    )\n  }\n)\n\nfunction ModalState(props: RenderProps) {\n  useDeprecation({ oldThing: 'Modal.State' })\n  return <Visibility {...props} />\n}\n\nModal_.displayName = 'Modal'\n\nConfirmModal.displayName = 'ConfirmModal'\n\nModalBody.displayName = 'Modal.Body'\n\nModalFooterNotation.displayName = 'Modal.FooterNotation'\n\nModalFooterSummary.displayName = 'Modal.FooterSummary'\n\nconst Body = ModalBody\nconst Container = ModalContainer\nconst Content = StyledModalContent\nconst FooterSummary = ModalFooterSummary\nconst Footer = StyledModalFooter\nconst FooterButtons = ModalClosableFooterButtons\nconst FooterNotation = ModalFooterNotation\nconst Header = ModalClosableHeader\nconst Overlay = StyledModal\nconst Scrim = StyledModalScrim\nconst State = ModalState\n\n/**\n\n We use modals to present additional actions, information, or forms on pages\n where a user’s experience would benefit from remaining on the same page.\n They can include graphics, inputs, buttons, and other elements as needed to\n produce the workflow or action needed.\n\n Do not include modals on pages with complicated UI layouts.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-modal--demo)\n\n @see [Design Guidelines](https://design.procore.com/modal)\n\n */\nexport const Modal = addSubcomponents(\n  {\n    Body,\n    Container,\n    Content,\n    Footer,\n    FooterButtons,\n    FooterNotation,\n    FooterSummary,\n    Header,\n    Heading: Heading, // Could make this tabIndex -1, and focus it on open\n    Overlay,\n    Scrim,\n    State,\n    Section,\n  },\n  Modal_\n)\n"],"mappings":"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"}
+{"version":3,"file":"Modal.js","names":["Clear","useId","React","useEffect","Button","useModalDialogLike","Portal","Heading","LevelContext","Section","SectionProvider","useDeprecation","useLayoutEventListener","OverridableFocusScope","useI18nContext","useOverflowObserver","useScrollLock","Visibility","addSubcomponents","CloseWithConfirmContext","useCloseWithConfirmContext","useCloseWithConfirmState","mergeRefs","ChildRegistryProvider","useModalChildRegistryDispatch","fadeInClassName","fadeOutClassName","StyledModal","StyledModalBody","StyledModalButtons","StyledModalCancel","StyledModalContainer","StyledModalContent","StyledModalFooter","StyledModalFooterNotation","StyledModalFooterSummary","StyledModalHeader","StyledModalHeading","StyledModalScrim","StyledModalWarningIcon","useInitializeModalFocus","noop","defaultStartLevel","initialBodyLevel","ModalCloseContext","createContext","howToClose","onClose","undefined","ModalPrimaryHeadingCheckContext","inModalHeader","ModalBodyScrollContext","isBodyScrolled","setIsBodyScrolled","ariaLabelledBy","ModalClosableHeader","forwardRef","_ref","ref","children","_ref$compact","compact","externalOnClose","qa","props","_objectWithoutProperties","_excluded","_React$useContext","useContext","_React$useContext2","I18n","modalClosableHeaderRef","useRef","_useCloseWithConfirmC","closeWithConfirm","registerChildRef","child","onClickButton","e","includes","createElement","_extends","$compact","$isBodyScrolled","Provider","value","id","t","closeButton","icon","onClick","size","variant","ModalClosableFooterButtons","_ref2","_excluded2","_React$useContext3","_useCloseWithConfirmC2","modalClosableFooterButtonsRef","ModalContainer","_ref3","_ref3$compact","placement","width","_excluded3","_React$useContext4","modalContainerRef","hasOnClose","shadowStrength","$placement","$width","ModalBody","_ref4","_ref4$compact","_ref4$noSideSpacing","noSideSpacing","_excluded4","_useOverflowObserver","isOverflowingY","overflowRef","scrollRef","modalBodyRef","_React$useContext5","event","handler","currentTarget","scrollTop","scope","$isOverflowingY","$noSideSpacing","tabIndex","role","ModalFooterSummary","_ref5","_excluded5","ModalFooterNotation","_ref6","_excluded6","intent","color","italic","Modal_","_ref7","ariaDescribedby","ariaDetails","ariaLabelledby","ariaLabel","_ref7$compact","_ref7$onClickOverlay","onClickOverlay","_ref7$open","open","_ref7$placement","_excluded7","defaultLabelId","labelledbyId","_React$useState","useState","_React$useState2","_slicedToArray","visible","setVisible","_React$useState3","_React$useState4","fadeType","setFadeType","closeWithConfirmState","fadeTimer","setTimeout","clearTimeout","onTransitionEnd","handleKeyDown","key","preventDefault","stopPropagation","_useModalDialogLike","isModal","isOpen","dialogProps_","dialogProps","onClickScrim","autoFocus","contain","restoreFocus","className","onKeyDown","ModalBodyScrollObserver","_ref8","_React$useState5","_React$useState6","ConfirmModal","_ref9","headline","_excluded8","Modal","ModalHeading","_React$useContext6","_React$useContext7","ModalState","oldThing","displayName","Body","Container","Content","FooterSummary","Footer","FooterButtons","FooterNotation","Header","Overlay","Scrim","State"],"sources":["../../src/Modal/Modal.tsx"],"sourcesContent":["import { Clear } from '@procore/core-icons/dist'\nimport { useId } from '@react-aria/utils'\nimport React, { useEffect } from 'react'\nimport { Button } from '../Button'\nimport { useModalDialogLike } from '../OverlayTrigger/a11yPresets'\nimport { Portal } from '../Portal'\nimport {\n  Heading,\n  LevelContext,\n  Section,\n  SectionProvider,\n} from '../Section/Section'\nimport type { HeadingProps } from '../Semantic/Semantic.types'\nimport type { TypographyProps } from '../Typography'\nimport { useDeprecation } from '../_hooks/Deprecation'\nimport { useLayoutEventListener } from '../_hooks/EventListener'\nimport { OverridableFocusScope } from '../_hooks/FocusScopeOverride'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { useOverflowObserver } from '../_hooks/OverflowObserver'\nimport { useScrollLock } from '../_hooks/ScrollLock'\nimport type { RenderProps } from '../_hooks/Visibility'\nimport { Visibility } from '../_hooks/Visibility'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport {\n  CloseWithConfirmContext,\n  useCloseWithConfirmContext,\n  useCloseWithConfirmState,\n} from '../_utils/closeWithConfirm'\nimport { mergeRefs } from '../_utils/mergeRefs'\nimport {\n  ChildRegistryProvider,\n  useModalChildRegistryDispatch,\n} from './ChildRegistry.context'\nimport {\n  fadeInClassName,\n  fadeOutClassName,\n  StyledModal,\n  StyledModalBody,\n  StyledModalButtons,\n  StyledModalCancel,\n  StyledModalContainer,\n  StyledModalContent,\n  StyledModalFooter,\n  StyledModalFooterNotation,\n  StyledModalFooterSummary,\n  StyledModalHeader,\n  StyledModalHeading,\n  StyledModalScrim,\n  StyledModalWarningIcon,\n} from './Modal.styles'\nimport type {\n  ConfirmModalProps,\n  ModalBodyProps,\n  ModalCloseableHeaderProps,\n  ModalCloseContextApi,\n  ModalContainerProps,\n  ModalProps,\n} from './Modal.types'\nimport { useInitializeModalFocus } from './useInitializeModalFocus'\n\nfunction noop() {}\nconst defaultStartLevel = 2\nconst initialBodyLevel = 3\n\nconst ModalCloseContext = React.createContext<ModalCloseContextApi>({\n  howToClose: [],\n  onClose: undefined,\n})\n\nconst ModalPrimaryHeadingCheckContext = React.createContext({\n  inModalHeader: false,\n})\n\ninterface ModalBodyScrollContextApi {\n  isBodyScrolled: boolean\n  setIsBodyScrolled: React.Dispatch<React.SetStateAction<boolean>>\n  ariaLabelledBy?: string\n}\n\nconst ModalBodyScrollContext = React.createContext<ModalBodyScrollContextApi>({\n  isBodyScrolled: false,\n  setIsBodyScrolled: noop,\n  ariaLabelledBy: undefined,\n})\n\nconst ModalClosableHeader = React.forwardRef<\n  HTMLDivElement,\n  ModalCloseableHeaderProps\n>(\n  (\n    { children, compact = false, onClose: externalOnClose, qa, ...props },\n    ref\n  ) => {\n    const { ariaLabelledBy, isBodyScrolled } = React.useContext(\n      ModalBodyScrollContext\n    )\n    const { howToClose, onClose } = React.useContext(ModalCloseContext)\n    const I18n = useI18nContext()\n    const modalClosableHeaderRef = React.useRef(null)\n\n    const { closeWithConfirm } = useCloseWithConfirmContext()\n    const registerChildRef = useModalChildRegistryDispatch()\n\n    useEffect(() => {\n      registerChildRef({ child: 'header', ref: modalClosableHeaderRef })\n    }, [])\n\n    function onClickButton(e: React.MouseEvent<HTMLButtonElement>) {\n      if (onClose && howToClose?.includes('x')) {\n        closeWithConfirm(onClose)(e, 'x')\n        return\n      }\n      closeWithConfirm(externalOnClose!)(e)\n    }\n\n    return (\n      <StyledModalHeader\n        $compact={compact}\n        $isBodyScrolled={isBodyScrolled}\n        {...props}\n        ref={mergeRefs(ref, modalClosableHeaderRef)}\n      >\n        <ModalPrimaryHeadingCheckContext.Provider\n          value={{ inModalHeader: true }}\n        >\n          <StyledModalHeading\n            $compact={compact}\n            // This made all children the heading, like Title content\n            id={ariaLabelledBy}\n          >\n            {children}\n          </StyledModalHeading>\n          {(onClose && howToClose?.includes('x')) || externalOnClose ? (\n            <StyledModalCancel>\n              <Button\n                aria-label={I18n.t('core.modal.a11y.close')}\n                data-internal=\"close-button\"\n                data-qa={qa?.closeButton}\n                icon={<Clear />}\n                onClick={onClickButton}\n                size={compact ? 'sm' : 'md'}\n                variant=\"tertiary\"\n              />\n            </StyledModalCancel>\n          ) : null}\n        </ModalPrimaryHeadingCheckContext.Provider>\n      </StyledModalHeader>\n    )\n  }\n)\n\nconst ModalClosableFooterButtons = React.forwardRef<\n  HTMLDivElement,\n  ModalCloseableHeaderProps\n>(({ children, ...props }, ref) => {\n  const { howToClose, onClose } = React.useContext(ModalCloseContext)\n  const I18n = useI18nContext()\n  const { closeWithConfirm } = useCloseWithConfirmContext()\n  const modalClosableFooterButtonsRef = React.useRef(null)\n\n  const registerChildRef = useModalChildRegistryDispatch()\n\n  useEffect(() => {\n    registerChildRef({\n      child: 'closeableButtons',\n      ref: modalClosableFooterButtonsRef,\n    })\n  }, [])\n\n  function onClickButton(e: React.MouseEvent<HTMLButtonElement>) {\n    closeWithConfirm(onClose!)(e, 'footer-button')\n  }\n\n  return (\n    <StyledModalButtons\n      {...props}\n      ref={mergeRefs(ref, modalClosableFooterButtonsRef)}\n    >\n      {howToClose?.includes('footer-button') && (\n        <Button onClick={onClickButton} variant=\"tertiary\">\n          {I18n.t('core.modal.cancel')}\n        </Button>\n      )}\n      {children}\n    </StyledModalButtons>\n  )\n})\n\nconst ModalContainer = React.forwardRef<HTMLDivElement, ModalContainerProps>(\n  ({ compact = false, placement, width, ...props }, ref) => {\n    const { onClose } = React.useContext(ModalCloseContext)\n    const modalContainerRef = React.useRef<HTMLDivElement>(null)\n    useInitializeModalFocus({ modalContainerRef, hasOnClose: !!onClose })\n\n    return (\n      <StyledModalContainer\n        {...props}\n        shadowStrength={4}\n        $compact={compact}\n        $placement={placement}\n        $width={width}\n        ref={mergeRefs(ref, modalContainerRef)}\n      />\n    )\n  }\n)\n\nconst ModalBody = React.forwardRef<HTMLDivElement, ModalBodyProps>(\n  ({ children, compact = false, noSideSpacing = false, ...props }, ref) => {\n    const { isOverflowingY, ref: overflowRef } = useOverflowObserver()\n    const scrollRef = React.useRef(null)\n    const modalBodyRef = React.useRef(null)\n    const { ariaLabelledBy, setIsBodyScrolled } = React.useContext(\n      ModalBodyScrollContext\n    )\n    const registerChildRef = useModalChildRegistryDispatch()\n\n    useEffect(() => {\n      registerChildRef({ child: 'body', ref: modalBodyRef })\n    }, [])\n\n    useLayoutEventListener({\n      event: 'scroll',\n      handler: (e: React.UIEvent<HTMLElement>) => {\n        setIsBodyScrolled(e.currentTarget.scrollTop > 0)\n      },\n      scope: scrollRef,\n    })\n\n    return (\n      <SectionProvider>\n        <LevelContext.Provider value={initialBodyLevel}>\n          <StyledModalBody\n            {...props}\n            $compact={compact}\n            $isOverflowingY={isOverflowingY}\n            $noSideSpacing={noSideSpacing}\n            ref={mergeRefs(overflowRef, scrollRef, ref, modalBodyRef)}\n            tabIndex={0}\n            role=\"region\"\n            aria-labelledby={ariaLabelledBy}\n          >\n            {children}\n          </StyledModalBody>\n        </LevelContext.Provider>\n      </SectionProvider>\n    )\n  }\n)\n\nconst ModalFooterSummary = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ children, ...props }, ref) => {\n  return (\n    <StyledModalFooterSummary {...props} ref={ref}>\n      {children}\n    </StyledModalFooterSummary>\n  )\n})\n\nconst ModalFooterNotation = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLSpanElement> & TypographyProps\n>(({ children, ...props }, ref) => (\n  <StyledModalFooterNotation\n    aria-live=\"polite\"\n    intent=\"small\"\n    color=\"gray45\"\n    italic\n    {...props}\n    ref={ref}\n  >\n    {children}\n  </StyledModalFooterNotation>\n))\n\nconst Modal_ = React.forwardRef<HTMLDivElement, ModalProps>(\n  (\n    {\n      ['aria-describedby']: ariaDescribedby,\n      ['aria-details']: ariaDetails,\n      ['aria-labelledby']: ariaLabelledby,\n      ['aria-label']: ariaLabel,\n      children,\n      compact = false,\n      howToClose,\n      id,\n      onClickOverlay = noop,\n      onClose,\n      open = false,\n      placement = 'center',\n      role,\n      ...props\n    },\n    ref\n  ) => {\n    useScrollLock(open)\n    const defaultLabelId = useId()\n    const labelledbyId = ariaLabel ? id : ariaLabelledby ?? defaultLabelId\n    const [visible, setVisible] = React.useState<boolean>(open)\n    const [fadeType, setFadeType] = React.useState<string>('')\n    const closeWithConfirmState = useCloseWithConfirmState()\n    const { closeWithConfirm } = closeWithConfirmState\n\n    React.useEffect(() => {\n      if (open) {\n        setVisible(true)\n        const fadeTimer = setTimeout(() => {\n          setFadeType(fadeInClassName)\n        }, 0)\n        return () => clearTimeout(fadeTimer)\n      } else {\n        setFadeType(fadeOutClassName)\n      }\n    }, [open])\n\n    const onTransitionEnd = () => {\n      if (fadeType === fadeOutClassName) {\n        setVisible(false)\n      }\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (!onClose) return\n      if (e.key === 'Escape') {\n        e.preventDefault()\n        e.stopPropagation()\n        closeWithConfirm(onClose)(e, 'x')\n      }\n    }\n\n    const { dialogProps: dialogProps_ } = useModalDialogLike({\n      'aria-describedby': ariaDescribedby,\n      'aria-details': ariaDetails,\n      'aria-labelledby': labelledbyId,\n      'aria-label': ariaLabel,\n      id,\n      isModal: false,\n      isOpen: open,\n      role,\n    })\n\n    const dialogProps = onClose && role === 'dialog' ? dialogProps_ : {}\n\n    function onClickScrim(e: React.MouseEvent<HTMLDivElement>) {\n      onClickOverlay(e)\n      if (onClose && howToClose?.includes('scrim')) {\n        closeWithConfirm(onClose)(e, 'scrim')\n      }\n    }\n\n    return visible ? (\n      <Portal>\n        <ModalCloseContext.Provider value={{ onClose, howToClose }}>\n          <LevelContext.Provider value={defaultStartLevel}>\n            <ChildRegistryProvider>\n              <OverridableFocusScope\n                // TODO breaking - always\n                autoFocus={!!onClose}\n                contain={!!onClose}\n                restoreFocus={!!onClose}\n              >\n                <StyledModal\n                  className={fadeType}\n                  ref={ref}\n                  onTransitionEnd={onTransitionEnd}\n                  onKeyDown={handleKeyDown}\n                  {...dialogProps}\n                >\n                  <StyledModalScrim\n                    data-qa=\"core-modal-scrim\"\n                    onClick={onClickScrim}\n                  />\n\n                  <ModalContainer\n                    {...props}\n                    compact={compact}\n                    placement={placement}\n                  >\n                    <StyledModalContent $compact={compact}>\n                      <ModalBodyScrollObserver ariaLabelledBy={labelledbyId}>\n                        <CloseWithConfirmContext.Provider\n                          value={closeWithConfirmState}\n                        >\n                          {children}\n                        </CloseWithConfirmContext.Provider>\n                      </ModalBodyScrollObserver>\n                    </StyledModalContent>\n                  </ModalContainer>\n                </StyledModal>\n              </OverridableFocusScope>\n            </ChildRegistryProvider>\n          </LevelContext.Provider>\n        </ModalCloseContext.Provider>\n      </Portal>\n    ) : null\n  }\n)\n\ninterface ModalBodyScrollObserverProps {\n  ariaLabelledBy?: string\n}\n\nconst ModalBodyScrollObserver = ({\n  ariaLabelledBy,\n  children,\n}: React.PropsWithChildren<ModalBodyScrollObserverProps>) => {\n  const [isBodyScrolled, setIsBodyScrolled] = React.useState<boolean>(false)\n\n  return (\n    <ModalBodyScrollContext.Provider\n      value={{ ariaLabelledBy, isBodyScrolled, setIsBodyScrolled }}\n    >\n      {children}\n    </ModalBodyScrollContext.Provider>\n  )\n}\n\nexport const ConfirmModal = React.forwardRef<HTMLDivElement, ConfirmModalProps>(\n  ({ children, headline, onClose, ...props }, ref) => {\n    return (\n      <Modal {...props} ref={ref}>\n        <ModalClosableHeader onClose={onClose}>\n          <StyledModalWarningIcon size=\"lg\" />\n          {headline}\n        </ModalClosableHeader>\n        {children}\n      </Modal>\n    )\n  }\n)\n\n/**\n * Applies proper smenatics regardless of where in the Modal.\n * Adds the generate ID to node when necessary so the dialog and scroll region\n * aria-labelledby by can find the primary heading (in the Modal.Header)\n */\nconst ModalHeading = (\n  props: React.PropsWithChildren<HeadingProps & { level?: number }>\n) => {\n  const { ariaLabelledBy } = React.useContext(ModalBodyScrollContext)\n  const { inModalHeader } = React.useContext(ModalPrimaryHeadingCheckContext)\n\n  return <Heading id={inModalHeader ? ariaLabelledBy : undefined} {...props} />\n}\n\nfunction ModalState(props: RenderProps) {\n  useDeprecation({ oldThing: 'Modal.State' })\n  return <Visibility {...props} />\n}\n\nModal_.displayName = 'Modal'\n\nConfirmModal.displayName = 'ConfirmModal'\n\nModalBody.displayName = 'Modal.Body'\n\nModalFooterNotation.displayName = 'Modal.FooterNotation'\n\nModalFooterSummary.displayName = 'Modal.FooterSummary'\n\nconst Body = ModalBody\nconst Container = ModalContainer\nconst Content = StyledModalContent\nconst FooterSummary = ModalFooterSummary\nconst Footer = StyledModalFooter\nconst FooterButtons = ModalClosableFooterButtons\nconst FooterNotation = ModalFooterNotation\nconst Header = ModalClosableHeader\nconst Overlay = StyledModal\nconst Scrim = StyledModalScrim\nconst State = ModalState\n\n/**\n\n We use modals to present additional actions, information, or forms on pages\n where a user’s experience would benefit from remaining on the same page.\n They can include graphics, inputs, buttons, and other elements as needed to\n produce the workflow or action needed.\n\n Do not include modals on pages with complicated UI layouts.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-modal--demo)\n\n @see [Design Guidelines](https://design.procore.com/modal)\n\n */\nexport const Modal = addSubcomponents(\n  {\n    Body,\n    Container,\n    Content,\n    Footer,\n    FooterButtons,\n    FooterNotation,\n    FooterSummary,\n    Header,\n    Heading: ModalHeading,\n    Overlay,\n    Scrim,\n    State,\n    Section,\n  },\n  Modal_\n)\n"],"mappings":"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"}

package/dist/Modal/Modal.styles.d.ts

@@ -12,13 +12,13 @@ export declare const modalPixelWidths: {
 };
 export declare const StyledModal: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledModalButtons: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledModalContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("..").DivAttributes & import("..").CardProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+export declare const StyledModalContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("react").HTMLAttributes<HTMLDivElement> & import("..").CardProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, {
     $compact: boolean;
     $placement: ModalPlacement;
     $width?: ModalWidth | undefined;
-}>> & string & Omit<import("react").ForwardRefExoticComponent<import("..").DivAttributes & import("..").CardProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("..").CardProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledModalFooter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledModalBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $compact: boolean;
@@ -28,9 +28,9 @@ export declare const StyledModalBody: import("styled-components/dist/types").ISt
 export declare const StyledModalContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $compact?: boolean | undefined;
 }>> & string;
-export declare const StyledModalFooterNotation: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("..").SpanAttributes & import("..").TypographyProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & {
+export declare const StyledModalFooterNotation: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").HTMLAttributes<HTMLSpanElement> & import("..").TypographyProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("..").SpanAttributes & import("..").TypographyProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;
+}, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("..").TypographyProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledModalHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $compact: boolean;
     $isBodyScrolled: boolean;

package/dist/Modal/Modal.styles.js

@@ -5,6 +5,7 @@ import { StyledSection, StyledSectionInner } from '../Section/Section.styles';
 import { Typography } from '../Typography/Typography';
 import { getTypographyIntent } from '../Typography/Typography.styles';
 import { colors } from '../_styles/colors';
+import { getFocusInset } from '../_styles/mixins';
 import { spacing } from '../_styles/spacing';
 export var fadeInClassName = 'fade-in';
 export var fadeOutClassName = 'fade-out';
@@ -31,15 +32,15 @@ var screenWidthPixelBreakpoints = {
 };
 export var StyledModal = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModal",
-  componentId: "core-12_25_1__sc-1ijdug2-0"
+  componentId: "core-12_26_0__sc-1ijdug2-0"
 })(["display:flex;height:100vh;position:absolute;opacity:0;transition:0.3s opacity ease;width:100vw;z-index:0;pointer-events:none;&.", "{opacity:1;pointer-events:auto;}&.", "{opacity:0;pointer-events:none;}"], fadeInClassName, fadeOutClassName);
 export var StyledModalButtons = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalButtons",
-  componentId: "core-12_25_1__sc-1ijdug2-1"
+  componentId: "core-12_26_0__sc-1ijdug2-1"
 })(["display:flex;flex:0 0 auto;margin-left:", "px;> * + *{margin-left:", "px;}"], spacing.lg, spacing.sm);
 export var StyledModalContainer = /*#__PURE__*/styled(Card).withConfig({
   displayName: "StyledModalContainer",
-  componentId: "core-12_25_1__sc-1ijdug2-2"
+  componentId: "core-12_26_0__sc-1ijdug2-2"
 })(["display:flex;flex-direction:row;position:absolute;z-index:2;", " ", " ", ""], function (_ref) {
   var $compact = _ref.$compact;
   if (!$compact) {
@@ -63,12 +64,12 @@ export var StyledModalContainer = /*#__PURE__*/styled(Card).withConfig({
 });
 export var StyledModalFooter = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalFooter",
-  componentId: "core-12_25_1__sc-1ijdug2-3"
+  componentId: "core-12_26_0__sc-1ijdug2-3"
 })(["align-items:center;display:flex;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end;padding:", "px ", "px ", "px;"], spacing.xl, spacing.xxl, spacing.xxl);
 export var StyledModalBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalBody",
-  componentId: "core-12_25_1__sc-1ijdug2-4"
-})(["", " box-sizing:border-box;color:", ";display:flex;flex-direction:column;overflow:auto;", " ", " > ", "{padding-left:0;padding-right:0;&:first-child > ", "{padding-top:0;}}", ""], getTypographyIntent('body'), colors.gray15, function (_ref4) {
+  componentId: "core-12_26_0__sc-1ijdug2-4"
+})(["", " &:focus-visible{", "}box-sizing:border-box;color:", ";display:flex;flex-direction:column;overflow:auto;", " ", " > ", "{padding-left:0;padding-right:0;&:first-child > ", "{padding-top:0;}}", ""], getTypographyIntent('body'), getFocusInset(), colors.gray15, function (_ref4) {
   var $noSideSpacing = _ref4.$noSideSpacing;
   return css(["padding:", "px ", "px;"], spacing.xl, $noSideSpacing ? 0 : spacing.xxl);
 }, function (_ref5) {
@@ -84,7 +85,7 @@ export var StyledModalBody = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledModalContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalContent",
-  componentId: "core-12_25_1__sc-1ijdug2-5"
+  componentId: "core-12_26_0__sc-1ijdug2-5"
 })(["display:flex;flex-direction:column;max-height:90vh;overflow:hidden;width:100%;", ""], function (_ref7) {
   var _ref7$$compact = _ref7.$compact,
     $compact = _ref7$$compact === void 0 ? false : _ref7$$compact;
@@ -95,11 +96,11 @@ export var StyledModalContent = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledModalFooterNotation = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledModalFooterNotation",
-  componentId: "core-12_25_1__sc-1ijdug2-6"
+  componentId: "core-12_26_0__sc-1ijdug2-6"
 })(["flex-grow:1;"]);
 export var StyledModalHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalHeader",
-  componentId: "core-12_25_1__sc-1ijdug2-7"
+  componentId: "core-12_26_0__sc-1ijdug2-7"
 })(["align-items:flex-start;color:", ";display:flex;flex:0 0 auto;position:relative;", " ", ""], colors.gray10, function (_ref8) {
   var $compact = _ref8.$compact,
     $isBodyScrolled = _ref8.$isBodyScrolled;
@@ -117,7 +118,7 @@ export var StyledModalHeader = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledModalHeading = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalHeading",
-  componentId: "core-12_25_1__sc-1ijdug2-8"
+  componentId: "core-12_26_0__sc-1ijdug2-8"
 })(["", " align-items:center;display:flex;flex:1 1 auto;min-height:36px;padding-right:", "px;", ""], function (_ref0) {
   var $compact = _ref0.$compact;
   return getTypographyIntent($compact ? 'h3' : 'h2');
@@ -133,18 +134,18 @@ export var StyledModalHeading = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledModalCancel = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalCancel",
-  componentId: "core-12_25_1__sc-1ijdug2-9"
+  componentId: "core-12_26_0__sc-1ijdug2-9"
 })(["flex:0 0 auto;"]);
 export var StyledModalScrim = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalScrim",
-  componentId: "core-12_25_1__sc-1ijdug2-10"
+  componentId: "core-12_26_0__sc-1ijdug2-10"
 })(["background:hsla(200,8%,10%,0.6);height:100vh;left:0;position:absolute;top:0;width:100vw;z-index:1;"]);
 export var StyledModalWarningIcon = /*#__PURE__*/styled(Warning).withConfig({
   displayName: "StyledModalWarningIcon",
-  componentId: "core-12_25_1__sc-1ijdug2-11"
+  componentId: "core-12_26_0__sc-1ijdug2-11"
 })(["color:", ";margin-right:", "px;"], colors.yellow40, spacing.sm);
 export var StyledModalFooterSummary = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledModalFooterSummary",
-  componentId: "core-12_25_1__sc-1ijdug2-12"
+  componentId: "core-12_26_0__sc-1ijdug2-12"
 })(["", " border-top:1px solid ", ";border-bottom:1px solid ", ";padding:", "px ", "px;color:", ";font-style:italic;background-color:", ";margin:-", "px -", "px ", "px -", "px;flex:1 1 100%;"], getTypographyIntent('small'), colors.gray85, colors.gray85, spacing.md, spacing.xxl, colors.gray15, colors.gray98, spacing.xl, spacing.xxl, spacing.xl, spacing.xxl);
 //# sourceMappingURL=Modal.styles.js.map

package/dist/Modal/Modal.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.styles.js","names":["Warning","styled","css","Card","StyledSection","StyledSectionInner","Typography","getTypographyIntent","colors","spacing","fadeInClassName","fadeOutClassName","modalMaxWidth","modalPixelGutter","xl","modalPixelWidths","sm","md","lg","compactModalFullscreenMaxHeight","screenWidthPixelBreakpoints","mobile","small","min","max","large","StyledModal","div","withConfig","displayName","componentId","StyledModalButtons","StyledModalContainer","_ref","$compact","_ref2","$placement","_ref3","$width","StyledModalBody","StyledModalFooter","xxl","gray15","_ref4","$noSideSpacing","_ref5","_ref6","$isOverflowingY","gray85","StyledModalFooterSummary","StyledModalContent","_ref7","_ref7$$compact","StyledModalFooterNotation","StyledModalHeader","gray10","_ref8","$isBodyScrolled","_ref9","spacings","concat","StyledModalHeading","_ref0","_ref1","_ref10","StyledModalCancel","StyledModalScrim","StyledModalWarningIcon","yellow40","gray98"],"sources":["../../src/Modal/Modal.styles.ts"],"sourcesContent":["import { Warning } from '@procore/core-icons'\nimport styled, { css } from 'styled-components'\nimport { Card } from '../Card/Card'\nimport { StyledSection, StyledSectionInner } from '../Section/Section.styles'\nimport { Typography } from '../Typography/Typography'\nimport { getTypographyIntent } from '../Typography/Typography.styles'\nimport { colors } from '../_styles/colors'\nimport { spacing } from '../_styles/spacing'\nimport type { ModalPlacement, ModalWidth } from './Modal.types'\n\nexport const fadeInClassName = 'fade-in'\nexport const fadeOutClassName = 'fade-out'\nexport const modalMaxWidth = '640px'\nexport const modalPixelGutter = spacing.xl\nexport const modalPixelWidths = {\n  sm: 432,\n  md: 688,\n  lg: 1152,\n  xl: 1920,\n}\n\nconst compactModalFullscreenMaxHeight = 940\nconst screenWidthPixelBreakpoints = {\n  mobile: {\n    small: {\n      min: 0,\n      max: 439,\n    },\n    large: {\n      min: 440,\n      max: 767,\n    },\n  },\n}\n\nexport const StyledModal = styled.div`\n  display: flex;\n  height: 100vh;\n  position: absolute;\n  opacity: 0;\n  transition: 0.3s opacity ease;\n  width: 100vw;\n  z-index: 0;\n  pointer-events: none;\n\n  &.${fadeInClassName} {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  &.${fadeOutClassName} {\n    opacity: 0;\n    pointer-events: none;\n  }\n`\n\nexport const StyledModalButtons = styled.div`\n  display: flex;\n  flex: 0 0 auto;\n  margin-left: ${spacing.lg}px;\n\n  > * + * {\n    margin-left: ${spacing.sm}px;\n  }\n`\n\nexport const StyledModalContainer = styled(Card)<{\n  $compact: boolean\n  $placement: ModalPlacement\n  $width?: ModalWidth\n}>`\n  display: flex;\n  flex-direction: row;\n  position: absolute;\n  z-index: 2;\n\n  ${({ $compact }) => {\n    if (!$compact) {\n      return ''\n    }\n\n    return css`\n      @media (max-width: ${screenWidthPixelBreakpoints.mobile.small\n          .max}px) and (max-height: ${compactModalFullscreenMaxHeight}px) {\n        border-radius: 0;\n        height: 100vh;\n        width: 100vw;\n      }\n      @media (min-width: ${screenWidthPixelBreakpoints.mobile.large\n          .min}px) and (max-width: ${screenWidthPixelBreakpoints.mobile.large\n          .max}px) {\n        max-height: calc(100vh - 24px);\n        width: 416px;\n      }\n      @media (min-height: ${compactModalFullscreenMaxHeight + 1}px) {\n        height: 916px;\n        max-width: 100vw;\n      }\n    `\n  }}\n\n  ${({ $placement }) => {\n    if ($placement === 'top') {\n      return css`\n        top: 5vh;\n      `\n    }\n\n    return css`\n      top: 50vh;\n      transform: translateY(-50%);\n    `\n  }}\n\n  ${({ $width, $placement }) => {\n    if ($width) {\n      return css`\n        left: ${modalPixelGutter}px;\n        right: ${modalPixelGutter}px;\n        margin-left: auto;\n        margin-right: auto;\n        max-width: ${modalPixelWidths[$width]}px;\n\n        // TODO deprecated, moving width up. delete line in breaking change\n        ${StyledModalBody} {\n          max-width: none;\n        }\n      `\n    }\n    // TODO deprecated, uses new centering, required width\n    return css`\n      left: 50vw;\n      transform: translateX(-50%)\n        ${$placement === 'center' && 'translateY(-50%)'};\n    `\n  }}\n`\n\nexport const StyledModalFooter = styled.div`\n  align-items: center;\n  display: flex;\n  flex: 0 0 auto;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  padding: ${spacing.xl}px ${spacing.xxl}px ${spacing.xxl}px;\n`\n\nexport const StyledModalBody = styled.div<{\n  $compact: boolean\n  $isOverflowingY: boolean\n  $noSideSpacing: boolean\n}>`\n  ${getTypographyIntent('body')}\n\n  box-sizing: border-box;\n  color: ${colors.gray15};\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  ${({ $noSideSpacing }) => {\n    return css`\n      padding: ${spacing.xl}px ${$noSideSpacing ? 0 : spacing.xxl}px;\n    `\n  }}\n\n  ${({ $compact }) => {\n    if (!$compact) {\n      // TODO deprecated, moving width up. delete line in breaking change\n      return css`\n        max-width: ${modalMaxWidth};\n      `\n    }\n\n    return css`\n      padding: 8px 16px;\n    `\n  }}\n\n  > ${StyledSection} {\n    padding-left: 0;\n    padding-right: 0;\n\n    &:first-child > ${StyledSectionInner} {\n      padding-top: 0;\n    }\n  }\n\n  ${({ $isOverflowingY }) =>\n    $isOverflowingY &&\n    css`\n      & + ${StyledModalFooter} {\n        border-top-width: 1px;\n        border-top-style: solid;\n        border-top-color: ${colors.gray85};\n        ${StyledModalFooterSummary} {\n          border-top: none;\n        }\n      }\n    `}\n`\n\nexport const StyledModalContent = styled.div<{ $compact?: boolean }>`\n  display: flex;\n  flex-direction: column;\n  max-height: 90vh;\n  overflow: hidden;\n  width: 100%;\n\n  ${({ $compact = false }) => {\n    if (!$compact) {\n      return ''\n    }\n\n    return css`\n      max-height: unset;\n    `\n  }}\n`\n\nexport const StyledModalFooterNotation = styled(Typography)`\n  flex-grow: 1;\n`\n\nexport const StyledModalHeader = styled.div<{\n  $compact: boolean\n  $isBodyScrolled: boolean\n}>`\n  align-items: flex-start;\n  color: ${colors.gray10};\n  display: flex;\n  flex: 0 0 auto;\n  position: relative;\n  ${({ $compact, $isBodyScrolled }) => {\n    if ($compact) {\n      return css`\n        border-bottom: 1px solid ${colors.gray85};\n      `\n    }\n\n    return css`\n      border-bottom: 1px solid\n        ${$isBodyScrolled ? colors.gray85 : 'transparent'};\n    `\n  }}\n\n  ${({ $compact }) => {\n    let spacings = `${spacing.xl}px ${spacing.xxl}px`\n\n    if ($compact) {\n      spacings = `${spacing.md}px ${spacing.lg}px`\n    }\n\n    return css`\n      padding: ${spacings};\n    `\n  }}\n`\n\nexport const StyledModalHeading = styled.div<{ $compact: boolean }>`\n  ${({ $compact }) => getTypographyIntent($compact ? 'h3' : 'h2')}\n  align-items: center;\n  display: flex;\n  flex: 1 1 auto;\n  min-height: 36px;\n  padding-right: ${({ $compact }) => ($compact ? 36 : spacing.lg)}px;\n\n  ${({ $compact }) => {\n    if (!$compact) {\n      return ''\n    }\n\n    return css`\n      min-height: unset;\n    `\n  }}\n`\n\nexport const StyledModalCancel = styled.div`\n  flex: 0 0 auto;\n`\n\nexport const StyledModalScrim = styled.div`\n  background: hsla(200, 8%, 10%, 0.6);\n  height: 100vh;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100vw;\n  z-index: 1;\n`\n\nexport const StyledModalWarningIcon = styled(Warning)`\n  color: ${colors.yellow40};\n  margin-right: ${spacing.sm}px;\n`\nexport const StyledModalFooterSummary = styled.div`\n  ${getTypographyIntent('small')}\n  border-top: 1px solid ${colors.gray85};\n  border-bottom: 1px solid ${colors.gray85};\n  padding: ${spacing.md}px ${spacing.xxl}px;\n  color: ${colors.gray15};\n  font-style: italic;\n  background-color: ${colors.gray98};\n  margin: -${spacing.xl}px -${spacing.xxl}px ${spacing.xl}px -${spacing.xxl}px;\n  flex: 1 1 100%;\n`\n"],"mappings":"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"}
+{"version":3,"file":"Modal.styles.js","names":["Warning","styled","css","Card","StyledSection","StyledSectionInner","Typography","getTypographyIntent","colors","getFocusInset","spacing","fadeInClassName","fadeOutClassName","modalMaxWidth","modalPixelGutter","xl","modalPixelWidths","sm","md","lg","compactModalFullscreenMaxHeight","screenWidthPixelBreakpoints","mobile","small","min","max","large","StyledModal","div","withConfig","displayName","componentId","StyledModalButtons","StyledModalContainer","_ref","$compact","_ref2","$placement","_ref3","$width","StyledModalBody","StyledModalFooter","xxl","gray15","_ref4","$noSideSpacing","_ref5","_ref6","$isOverflowingY","gray85","StyledModalFooterSummary","StyledModalContent","_ref7","_ref7$$compact","StyledModalFooterNotation","StyledModalHeader","gray10","_ref8","$isBodyScrolled","_ref9","spacings","concat","StyledModalHeading","_ref0","_ref1","_ref10","StyledModalCancel","StyledModalScrim","StyledModalWarningIcon","yellow40","gray98"],"sources":["../../src/Modal/Modal.styles.ts"],"sourcesContent":["import { Warning } from '@procore/core-icons'\nimport styled, { css } from 'styled-components'\nimport { Card } from '../Card/Card'\nimport { StyledSection, StyledSectionInner } from '../Section/Section.styles'\nimport { Typography } from '../Typography/Typography'\nimport { getTypographyIntent } from '../Typography/Typography.styles'\nimport { colors } from '../_styles/colors'\nimport { getFocusInset } from '../_styles/mixins'\nimport { spacing } from '../_styles/spacing'\nimport type { ModalPlacement, ModalWidth } from './Modal.types'\n\nexport const fadeInClassName = 'fade-in'\nexport const fadeOutClassName = 'fade-out'\nexport const modalMaxWidth = '640px'\nexport const modalPixelGutter = spacing.xl\nexport const modalPixelWidths = {\n  sm: 432,\n  md: 688,\n  lg: 1152,\n  xl: 1920,\n}\n\nconst compactModalFullscreenMaxHeight = 940\nconst screenWidthPixelBreakpoints = {\n  mobile: {\n    small: {\n      min: 0,\n      max: 439,\n    },\n    large: {\n      min: 440,\n      max: 767,\n    },\n  },\n}\n\nexport const StyledModal = styled.div`\n  display: flex;\n  height: 100vh;\n  position: absolute;\n  opacity: 0;\n  transition: 0.3s opacity ease;\n  width: 100vw;\n  z-index: 0;\n  pointer-events: none;\n\n  &.${fadeInClassName} {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  &.${fadeOutClassName} {\n    opacity: 0;\n    pointer-events: none;\n  }\n`\n\nexport const StyledModalButtons = styled.div`\n  display: flex;\n  flex: 0 0 auto;\n  margin-left: ${spacing.lg}px;\n\n  > * + * {\n    margin-left: ${spacing.sm}px;\n  }\n`\n\nexport const StyledModalContainer = styled(Card)<{\n  $compact: boolean\n  $placement: ModalPlacement\n  $width?: ModalWidth\n}>`\n  display: flex;\n  flex-direction: row;\n  position: absolute;\n  z-index: 2;\n\n  ${({ $compact }) => {\n    if (!$compact) {\n      return ''\n    }\n\n    return css`\n      @media (max-width: ${screenWidthPixelBreakpoints.mobile.small\n          .max}px) and (max-height: ${compactModalFullscreenMaxHeight}px) {\n        border-radius: 0;\n        height: 100vh;\n        width: 100vw;\n      }\n      @media (min-width: ${screenWidthPixelBreakpoints.mobile.large\n          .min}px) and (max-width: ${screenWidthPixelBreakpoints.mobile.large\n          .max}px) {\n        max-height: calc(100vh - 24px);\n        width: 416px;\n      }\n      @media (min-height: ${compactModalFullscreenMaxHeight + 1}px) {\n        height: 916px;\n        max-width: 100vw;\n      }\n    `\n  }}\n\n  ${({ $placement }) => {\n    if ($placement === 'top') {\n      return css`\n        top: 5vh;\n      `\n    }\n\n    return css`\n      top: 50vh;\n      transform: translateY(-50%);\n    `\n  }}\n\n  ${({ $width, $placement }) => {\n    if ($width) {\n      return css`\n        left: ${modalPixelGutter}px;\n        right: ${modalPixelGutter}px;\n        margin-left: auto;\n        margin-right: auto;\n        max-width: ${modalPixelWidths[$width]}px;\n\n        // TODO deprecated, moving width up. delete line in breaking change\n        ${StyledModalBody} {\n          max-width: none;\n        }\n      `\n    }\n    // TODO deprecated, uses new centering, required width\n    return css`\n      left: 50vw;\n      transform: translateX(-50%)\n        ${$placement === 'center' && 'translateY(-50%)'};\n    `\n  }}\n`\n\nexport const StyledModalFooter = styled.div`\n  align-items: center;\n  display: flex;\n  flex: 0 0 auto;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  padding: ${spacing.xl}px ${spacing.xxl}px ${spacing.xxl}px;\n`\n\nexport const StyledModalBody = styled.div<{\n  $compact: boolean\n  $isOverflowingY: boolean\n  $noSideSpacing: boolean\n}>`\n  ${getTypographyIntent('body')}\n\n  &:focus-visible {\n    ${getFocusInset()}\n  }\n\n  box-sizing: border-box;\n  color: ${colors.gray15};\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  ${({ $noSideSpacing }) => {\n    return css`\n      padding: ${spacing.xl}px ${$noSideSpacing ? 0 : spacing.xxl}px;\n    `\n  }}\n\n  ${({ $compact }) => {\n    if (!$compact) {\n      // TODO deprecated, moving width up. delete line in breaking change\n      return css`\n        max-width: ${modalMaxWidth};\n      `\n    }\n\n    return css`\n      padding: 8px 16px;\n    `\n  }}\n\n  > ${StyledSection} {\n    padding-left: 0;\n    padding-right: 0;\n\n    &:first-child > ${StyledSectionInner} {\n      padding-top: 0;\n    }\n  }\n\n  ${({ $isOverflowingY }) =>\n    $isOverflowingY &&\n    css`\n      & + ${StyledModalFooter} {\n        border-top-width: 1px;\n        border-top-style: solid;\n        border-top-color: ${colors.gray85};\n        ${StyledModalFooterSummary} {\n          border-top: none;\n        }\n      }\n    `}\n`\n\nexport const StyledModalContent = styled.div<{ $compact?: boolean }>`\n  display: flex;\n  flex-direction: column;\n  max-height: 90vh;\n  overflow: hidden;\n  width: 100%;\n\n  ${({ $compact = false }) => {\n    if (!$compact) {\n      return ''\n    }\n\n    return css`\n      max-height: unset;\n    `\n  }}\n`\n\nexport const StyledModalFooterNotation = styled(Typography)`\n  flex-grow: 1;\n`\n\nexport const StyledModalHeader = styled.div<{\n  $compact: boolean\n  $isBodyScrolled: boolean\n}>`\n  align-items: flex-start;\n  color: ${colors.gray10};\n  display: flex;\n  flex: 0 0 auto;\n  position: relative;\n  ${({ $compact, $isBodyScrolled }) => {\n    if ($compact) {\n      return css`\n        border-bottom: 1px solid ${colors.gray85};\n      `\n    }\n\n    return css`\n      border-bottom: 1px solid\n        ${$isBodyScrolled ? colors.gray85 : 'transparent'};\n    `\n  }}\n\n  ${({ $compact }) => {\n    let spacings = `${spacing.xl}px ${spacing.xxl}px`\n\n    if ($compact) {\n      spacings = `${spacing.md}px ${spacing.lg}px`\n    }\n\n    return css`\n      padding: ${spacings};\n    `\n  }}\n`\n\nexport const StyledModalHeading = styled.div<{ $compact: boolean }>`\n  ${({ $compact }) => getTypographyIntent($compact ? 'h3' : 'h2')}\n  align-items: center;\n  display: flex;\n  flex: 1 1 auto;\n  min-height: 36px;\n  padding-right: ${({ $compact }) => ($compact ? 36 : spacing.lg)}px;\n\n  ${({ $compact }) => {\n    if (!$compact) {\n      return ''\n    }\n\n    return css`\n      min-height: unset;\n    `\n  }}\n`\n\nexport const StyledModalCancel = styled.div`\n  flex: 0 0 auto;\n`\n\nexport const StyledModalScrim = styled.div`\n  background: hsla(200, 8%, 10%, 0.6);\n  height: 100vh;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100vw;\n  z-index: 1;\n`\n\nexport const StyledModalWarningIcon = styled(Warning)`\n  color: ${colors.yellow40};\n  margin-right: ${spacing.sm}px;\n`\nexport const StyledModalFooterSummary = styled.div`\n  ${getTypographyIntent('small')}\n  border-top: 1px solid ${colors.gray85};\n  border-bottom: 1px solid ${colors.gray85};\n  padding: ${spacing.md}px ${spacing.xxl}px;\n  color: ${colors.gray15};\n  font-style: italic;\n  background-color: ${colors.gray98};\n  margin: -${spacing.xl}px -${spacing.xxl}px ${spacing.xl}px -${spacing.xxl}px;\n  flex: 1 1 100%;\n`\n"],"mappings":"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"}

package/dist/Modal/Modal.types.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { DivAttributes, Props } from '../_utils/types';
+import type { Props } from '../_utils/types';
 export declare type ModalPlacement = 'top' | 'center';
 export declare type ModalWidth = 'sm' | 'md' | 'lg' | 'xl';
 /**
@@ -18,7 +18,7 @@ export interface ModalCloseContextApi {
     howToClose: ModalOptionalCloseStartegy[] | undefined;
     onClose: ModalOnClose | undefined;
 }
-export interface ModalCloseableHeaderProps extends DivAttributes {
+export interface ModalCloseableHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * @deprecated @experimental Changes the UI of modal to work on mobile breakpoints, to be used on Helix Header ONLY
      * @defaultValue false
@@ -33,12 +33,14 @@ export interface ModalProps extends Props {
     'aria-describedby'?: string;
     'aria-details'?: string;
     /**
-     * @a11y `role='dialog'` MUST be labelled. Prefer `aria-labelledby` over `aria-label`.
+     * @a11y Automatially created when using `Modal.Heading`. The `role='dialog'` MUST be labelled. Prefer `aria-labelledby` over `aria-label`.
      * @since 11.12.0
      */
     'aria-labelledby'?: string;
     /**
      * @a11y `role='dialog'` MUST be labelled. Prefer `aria-labelledby` over `aria-label`.
+     * If using an `aria-label` instead of a node, be sure give the modal an `id` so
+     * other regions can reference it.
      * @since 11.12.0
      */
     'aria-label'?: string;
@@ -143,7 +145,7 @@ export interface ModalCloseableHeaderProps extends Props {
         closeButton?: string;
     };
 }
-export interface ModalBodyProps extends DivAttributes {
+export interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * @deprecated @experimental Changes the UI of modal to work on mobile breakpoints, to be used on Helix Header ONLY
      * @defaultValue false

package/dist/Modal/Modal.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.types.js","names":[],"sources":["../../src/Modal/Modal.types.ts"],"sourcesContent":["import type React from 'react'\nimport type { DivAttributes, Props } from '../_utils/types'\n\nexport type ModalPlacement = 'top' | 'center'\nexport type ModalWidth = 'sm' | 'md' | 'lg' | 'xl'\n\n/**\n * Additional UI/UX to dismiss. (In addition to the Esc key)\n *  - `x` Close Button in the Modal Header\n *  - `scrim` Overlay dimmed scrim\n *  - `footer-button` Cancel Button in the Modal Footer Actions\n */\nexport type ModalOptionalCloseStartegy = 'x' | 'footer-button' | 'scrim'\ntype ModalCloseStragety = 'esc' | ModalOptionalCloseStartegy\n\ntype ModalOnClose = (\n  event: // clicked scrim\n  | React.MouseEvent<HTMLDivElement>\n    // clicked x button\n    | React.MouseEvent<HTMLButtonElement>\n    // pressed escape key\n    | React.KeyboardEvent<HTMLElement>,\n  how: ModalCloseStragety\n) => void\n\nexport interface ModalCloseContextApi {\n  /**\n   * Escape key will always close a dialog. This adds additional UI or UX to close.\n   */\n  howToClose: ModalOptionalCloseStartegy[] | undefined\n  onClose: ModalOnClose | undefined\n}\n\nexport interface ModalCloseableHeaderProps extends DivAttributes {\n  /**\n   * @deprecated @experimental Changes the UI of modal to work on mobile breakpoints, to be used on Helix Header ONLY\n   * @defaultValue false\n   * @since 12.8.0\n   */\n  compact?: boolean\n  qa?: { closeButton?: string }\n}\n\nexport interface ModalProps extends Props {\n  'aria-describedby'?: string\n  'aria-details'?: string\n  /**\n   * @a11y `role='dialog'` MUST be labelled. Prefer `aria-labelledby` over `aria-label`.\n   * @since 11.12.0\n   */\n  'aria-labelledby'?: string\n  /**\n   * @a11y `role='dialog'` MUST be labelled. Prefer `aria-labelledby` over `aria-label`.\n   * @since 11.12.0\n   */\n  'aria-label'?: string\n  /**\n   * @deprecated @experimental Changes the UI of modal to work on mobile breakpoints, to be used on Helix Header ONLY\n   * @defaultValue false\n   * @since 12.8.0\n   */\n  compact?: boolean\n  /**\n   * This adds additional UI or UX to close. Escape key will always close a dialog, see `onClose`.\n   *\n   * NOTE 'footer-button': Footer Cancel button still requires at least a rendered self closing `Modal.FooterButtons`.\n   *\n   * NOTE 'x': The X button still requires a rendered `Modal.Header` component.\n   * @defaultValue []\n   * @since 11.12.0\n   */\n  howToClose?: ModalOptionalCloseStartegy[]\n  /**\n   * Aligns with `role` and `ref` location.\n   */\n  id?: string\n  /**\n   * Callback for clicking the overlay\n   * @since 10.19.0\n   */\n  onClickOverlay?: (event: React.MouseEvent<HTMLDivElement>) => void\n  /**\n   * When a user closes the Modal by some approved `howToClose` method or the Escape key. This also opts-in to dialog focus management.\n   * @a11y Future default! Moves focus into and cycles focus in the Modal, and returning focus\n   * to the trigger when closed. Also enables the Escape key to close the Modal.\n   * @since 11.6.0\n   */\n  onClose?: ModalOnClose\n  /**\n   * Modal open state\n   * @defaultValue false\n   * @since 10.19.0\n   */\n  open?: boolean\n  /**\n   * Enable dialog props. REQUIRES `onClose` to enable Escape key and focus management. MUST be labelled, prefer `aria-labelledby` over `aria-label`.\n   */\n  role?: 'dialog'\n  /**\n   * Vertical placement of the modal.\n   * Positioning modal at the top ensures that variable height modal won't shift position during content loading,\n   * providing a more stable user experience.\n   * @defaultValue center\n   * @since 10.19.0\n   */\n  placement?: ModalPlacement\n  /**\n   * Sets a width on the container and uses next centering.\n   * Future will default to `md`\n   * @since 10.19.0\n   */\n  width?: ModalWidth\n}\n\nexport interface ModalContainerProps extends Props {\n  /**\n   * @deprecated @experimental Changes the UI of modal to work on mobile breakpoints, to be used on Helix Header ONLY\n   * @defaultValue false\n   * @since 12.8.0\n   */\n  compact?: boolean\n  /**\n   * @since 10.19.0\n   */\n  placement: ModalPlacement\n  /**\n   * @since 10.19.0\n   */\n  width?: ModalWidth\n}\n\nexport interface ConfirmModalProps extends Omit<ModalProps, 'onClose'> {\n  /**\n   * Headline message\n   * @since 10.19.0\n   */\n  headline?: string\n\n  /**\n   * The dismiss onClick callback\n   * @since 10.19.0\n   */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void\n}\n\n/**\n * NOTE: Using howToClose 'x' requires the `Modal.Header` component.\n * @a11y This component is a not semantic heading! For that, see `Modal.Heading`.\n */\nexport interface ModalCloseableHeaderProps extends Props {\n  /**\n   * @since 10.19.0\n   */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void\n  /**\n   * @since 10.19.0\n   */\n  qa?: { closeButton?: string }\n}\n\nexport interface ModalBodyProps extends DivAttributes {\n  /**\n   * @deprecated @experimental Changes the UI of modal to work on mobile breakpoints, to be used on Helix Header ONLY\n   * @defaultValue false\n   * @since 12.8.0\n   */\n  compact?: boolean\n  /**\n   * Removes left, right paddings from the modal body when true\n   * @defaultValue false\n   * @since 10.19.0\n   */\n  noSideSpacing?: boolean\n}\n"],"mappings":""}
+{"version":3,"file":"Modal.types.js","names":[],"sources":["../../src/Modal/Modal.types.ts"],"sourcesContent":["import type React from 'react'\nimport type { Props } from '../_utils/types'\n\nexport type ModalPlacement = 'top' | 'center'\nexport type ModalWidth = 'sm' | 'md' | 'lg' | 'xl'\n\n/**\n * Additional UI/UX to dismiss. (In addition to the Esc key)\n *  - `x` Close Button in the Modal Header\n *  - `scrim` Overlay dimmed scrim\n *  - `footer-button` Cancel Button in the Modal Footer Actions\n */\nexport type ModalOptionalCloseStartegy = 'x' | 'footer-button' | 'scrim'\ntype ModalCloseStragety = 'esc' | ModalOptionalCloseStartegy\n\ntype ModalOnClose = (\n  event: // clicked scrim\n  | React.MouseEvent<HTMLDivElement>\n    // clicked x button\n    | React.MouseEvent<HTMLButtonElement>\n    // pressed escape key\n    | React.KeyboardEvent<HTMLElement>,\n  how: ModalCloseStragety\n) => void\n\nexport interface ModalCloseContextApi {\n  /**\n   * Escape key will always close a dialog. This adds additional UI or UX to close.\n   */\n  howToClose: ModalOptionalCloseStartegy[] | undefined\n  onClose: ModalOnClose | undefined\n}\n\nexport interface ModalCloseableHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * @deprecated @experimental Changes the UI of modal to work on mobile breakpoints, to be used on Helix Header ONLY\n   * @defaultValue false\n   * @since 12.8.0\n   */\n  compact?: boolean\n  qa?: { closeButton?: string }\n}\n\nexport interface ModalProps extends Props {\n  'aria-describedby'?: string\n  'aria-details'?: string\n  /**\n   * @a11y Automatially created when using `Modal.Heading`. The `role='dialog'` MUST be labelled. Prefer `aria-labelledby` over `aria-label`.\n   * @since 11.12.0\n   */\n  'aria-labelledby'?: string\n  /**\n   * @a11y `role='dialog'` MUST be labelled. Prefer `aria-labelledby` over `aria-label`.\n   * If using an `aria-label` instead of a node, be sure give the modal an `id` so\n   * other regions can reference it.\n   * @since 11.12.0\n   */\n  'aria-label'?: string\n  /**\n   * @deprecated @experimental Changes the UI of modal to work on mobile breakpoints, to be used on Helix Header ONLY\n   * @defaultValue false\n   * @since 12.8.0\n   */\n  compact?: boolean\n  /**\n   * This adds additional UI or UX to close. Escape key will always close a dialog, see `onClose`.\n   *\n   * NOTE 'footer-button': Footer Cancel button still requires at least a rendered self closing `Modal.FooterButtons`.\n   *\n   * NOTE 'x': The X button still requires a rendered `Modal.Header` component.\n   * @defaultValue []\n   * @since 11.12.0\n   */\n  howToClose?: ModalOptionalCloseStartegy[]\n  /**\n   * Aligns with `role` and `ref` location.\n   */\n  id?: string\n  /**\n   * Callback for clicking the overlay\n   * @since 10.19.0\n   */\n  onClickOverlay?: (event: React.MouseEvent<HTMLDivElement>) => void\n  /**\n   * When a user closes the Modal by some approved `howToClose` method or the Escape key. This also opts-in to dialog focus management.\n   * @a11y Future default! Moves focus into and cycles focus in the Modal, and returning focus\n   * to the trigger when closed. Also enables the Escape key to close the Modal.\n   * @since 11.6.0\n   */\n  onClose?: ModalOnClose\n  /**\n   * Modal open state\n   * @defaultValue false\n   * @since 10.19.0\n   */\n  open?: boolean\n  /**\n   * Enable dialog props. REQUIRES `onClose` to enable Escape key and focus management. MUST be labelled, prefer `aria-labelledby` over `aria-label`.\n   */\n  role?: 'dialog'\n  /**\n   * Vertical placement of the modal.\n   * Positioning modal at the top ensures that variable height modal won't shift position during content loading,\n   * providing a more stable user experience.\n   * @defaultValue center\n   * @since 10.19.0\n   */\n  placement?: ModalPlacement\n  /**\n   * Sets a width on the container and uses next centering.\n   * Future will default to `md`\n   * @since 10.19.0\n   */\n  width?: ModalWidth\n}\n\nexport interface ModalContainerProps extends Props {\n  /**\n   * @deprecated @experimental Changes the UI of modal to work on mobile breakpoints, to be used on Helix Header ONLY\n   * @defaultValue false\n   * @since 12.8.0\n   */\n  compact?: boolean\n  /**\n   * @since 10.19.0\n   */\n  placement: ModalPlacement\n  /**\n   * @since 10.19.0\n   */\n  width?: ModalWidth\n}\n\nexport interface ConfirmModalProps extends Omit<ModalProps, 'onClose'> {\n  /**\n   * Headline message\n   * @since 10.19.0\n   */\n  headline?: string\n\n  /**\n   * The dismiss onClick callback\n   * @since 10.19.0\n   */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void\n}\n\n/**\n * NOTE: Using howToClose 'x' requires the `Modal.Header` component.\n * @a11y This component is a not semantic heading! For that, see `Modal.Heading`.\n */\nexport interface ModalCloseableHeaderProps extends Props {\n  /**\n   * @since 10.19.0\n   */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void\n  /**\n   * @since 10.19.0\n   */\n  qa?: { closeButton?: string }\n}\n\nexport interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * @deprecated @experimental Changes the UI of modal to work on mobile breakpoints, to be used on Helix Header ONLY\n   * @defaultValue false\n   * @since 12.8.0\n   */\n  compact?: boolean\n  /**\n   * Removes left, right paddings from the modal body when true\n   * @defaultValue false\n   * @since 10.19.0\n   */\n  noSideSpacing?: boolean\n}\n"],"mappings":""}

package/dist/MultiSelect/MultiSelect.styles.d.ts

@@ -11,9 +11,9 @@ export declare const StyledMultiSelectClearIcon: import("styled-components/dist/
 }, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledMultiSelectArrowContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledMultiSelectArrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledMultiSelectMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("..").DivAttributes & import("..").CardProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+export declare const StyledMultiSelectMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").HTMLAttributes<HTMLDivElement> & import("..").CardProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("..").DivAttributes & import("..").CardProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+}, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("..").CardProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledMultiSelectButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled" | "$loading" | "$block" | "$error" | "$open" | "$placeholder" | "$hasClearIcon"> & {
     $block: boolean;
     $disabled: boolean;