@zendeskgarden/react-modals 8.69.2 → 8.69.4

package/dist/index.cjs.js

@@ -15,8 +15,14 @@ var reactTheming = require('@zendeskgarden/react-theming');
 var containerModal = require('@zendeskgarden/container-modal');
 var containerFocusvisible = require('@zendeskgarden/container-focusvisible');
 var mergeRefs = require('react-merge-refs');
+var isWindow = require('dom-helpers/isWindow');
+var ownerDocument = require('dom-helpers/ownerDocument');
+var ownerWindow = require('dom-helpers/ownerWindow');
+var css = require('dom-helpers/css');
+var getScrollbarSize = require('dom-helpers/scrollbarSize');
 var reactPopper = require('react-popper');
 var reactTransitionGroup = require('react-transition-group');
+var activeElement = require('dom-helpers/activeElement');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -43,6 +49,12 @@ var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
+var isWindow__default = /*#__PURE__*/_interopDefault(isWindow);
+var ownerDocument__default = /*#__PURE__*/_interopDefault(ownerDocument);
+var ownerWindow__default = /*#__PURE__*/_interopDefault(ownerWindow);
+var css__default = /*#__PURE__*/_interopDefault(css);
+var getScrollbarSize__default = /*#__PURE__*/_interopDefault(getScrollbarSize);
+var activeElement__default = /*#__PURE__*/_interopDefault(activeElement);
 
 function _extends$2() {
   _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
@@ -59,95 +71,21 @@ function _extends$2() {
   return _extends$2.apply(this, arguments);
 }
 
-function isDocument(element) {
-  return 'nodeType' in element && element.nodeType === document.DOCUMENT_NODE;
-}
-
-function isWindow(node) {
-  if ('window' in node && node.window === node) return node;
-  if (isDocument(node)) return node.defaultView || false;
-  return false;
-}
-
-function ownerDocument(node) {
-  return node && node.ownerDocument || document;
-}
-
-function ownerWindow(node) {
-  var doc = ownerDocument(node);
-  return doc && doc.defaultView || window;
-}
-
-function getComputedStyle(node, psuedoElement) {
-  return ownerWindow(node).getComputedStyle(node, psuedoElement);
-}
-
-var rUpper = /([A-Z])/g;
-function hyphenate(string) {
-  return string.replace(rUpper, '-$1').toLowerCase();
-}
-
-var msPattern = /^ms-/;
-function hyphenateStyleName(string) {
-  return hyphenate(string).replace(msPattern, '-ms-');
-}
-
-var supportedTransforms = /^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i;
-function isTransform(value) {
-  return !!(value && supportedTransforms.test(value));
-}
-
-function style(node, property) {
-  var css = '';
-  var transforms = '';
-  if (typeof property === 'string') {
-    return node.style.getPropertyValue(hyphenateStyleName(property)) || getComputedStyle(node).getPropertyValue(hyphenateStyleName(property));
-  }
-  Object.keys(property).forEach(function (key) {
-    var value = property[key];
-    if (!value && value !== 0) {
-      node.style.removeProperty(hyphenateStyleName(key));
-    } else if (isTransform(key)) {
-      transforms += key + "(" + value + ") ";
-    } else {
-      css += hyphenateStyleName(key) + ": " + value + ";";
-    }
-  });
-  if (transforms) {
-    css += "transform: " + transforms + ";";
-  }
-  node.style.cssText += ";" + css;
-}
-
-var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
-
-var size;
-function scrollbarSize(recalc) {
-  if (!size && size !== 0 || recalc) {
-    if (canUseDOM) {
-      var scrollDiv = document.createElement('div');
-      scrollDiv.style.position = 'absolute';
-      scrollDiv.style.top = '-9999px';
-      scrollDiv.style.width = '50px';
-      scrollDiv.style.height = '50px';
-      scrollDiv.style.overflow = 'scroll';
-      document.body.appendChild(scrollDiv);
-      size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-      document.body.removeChild(scrollDiv);
-    }
-  }
-  return size;
-}
-
 const COMPONENT_ID$j = 'modals.backdrop';
 const animationName$1 = styled.keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
+const animationStyles$1 = props => {
+  if (props.isAnimated) {
+    return styled.css(["animation:", " 0.15s ease-in;"], animationName$1);
+  }
+  return '';
+};
 const StyledBackdrop = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.69.2'
+  'data-garden-version': '8.69.4'
 }).withConfig({
   displayName: "StyledBackdrop",
   componentId: "sc-mzdjpo-0"
-})(["display:flex;position:fixed;top:0;right:0;bottom:0;left:0;align-items:", ";justify-content:", ";z-index:400;background-color:", ";overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";animation:", ";", ";"], props => props.isCentered && 'center', props => props.isCentered && 'center', props => reactTheming.getColor('neutralHue', 800, props.theme, 0.85), props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => props.isAnimated && styled.css(["", " 0.15s ease-in"], animationName$1), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$j, props));
+})(["display:flex;position:fixed;inset:0;align-items:", ";justify-content:", ";z-index:400;background-color:", ";overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";", ";", ";"], props => props.isCentered && 'center', props => props.isCentered && 'center', props => reactTheming.getColor('neutralHue', 800, props.theme, 0.85), props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', animationStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$j, props));
 StyledBackdrop.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -159,7 +97,7 @@ StyledBackdrop.propTypes = {
 const COMPONENT_ID$i = 'modals.body';
 const StyledBody = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.69.2'
+  'data-garden-version': '8.69.4'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14rzecg-0"
@@ -184,7 +122,7 @@ const BASE_MULTIPLIERS$1 = {
 };
 const StyledClose = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.69.2'
+  'data-garden-version': '8.69.4'
 }).withConfig({
   displayName: "StyledClose",
   componentId: "sc-iseudj-0"
@@ -196,7 +134,7 @@ StyledClose.defaultProps = {
 const COMPONENT_ID$g = 'modals.footer';
 const StyledFooter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.69.2'
+  'data-garden-version': '8.69.4'
 }).withConfig({
   displayName: "StyledFooter",
   componentId: "sc-d8pfdu-0"
@@ -208,7 +146,7 @@ StyledFooter.defaultProps = {
 const COMPONENT_ID$f = 'modals.footer_item';
 const StyledFooterItem = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.69.2'
+  'data-garden-version': '8.69.4'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1mb76hl-0"
@@ -220,7 +158,7 @@ StyledFooterItem.defaultProps = {
 const COMPONENT_ID$e = 'modals.header';
 const StyledHeader = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.69.2'
+  'data-garden-version': '8.69.4'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1787r9v-0"
@@ -267,6 +205,12 @@ StyledDangerIcon.defaultProps = {
 
 const COMPONENT_ID$d = 'modals.modal';
 const animationName = styled.keyframes(["0%{transform:scale(0);opacity:0;}50%{transform:scale(1.05);}100%{opacity:1;}"]);
+const animationStyles = props => {
+  if (props.isAnimated) {
+    return styled.css(["animation:", " 0.3s ease-in;"], animationName);
+  }
+  return '';
+};
 const boxShadow$1 = props => {
   const {
     theme
@@ -285,11 +229,11 @@ const sizeStyles$1 = props => {
 };
 const StyledModal = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.69.2'
+  'data-garden-version': '8.69.4'
 }).withConfig({
   displayName: "StyledModal",
   componentId: "sc-1pe1axu-0"
-})(["display:flex;position:fixed;flex-direction:column;margin:", ";border-radius:", ";box-shadow:", ";background-color:", ";min-height:60px;max-height:calc(100vh - ", "px);animation:", ";animation-delay:0.01s;overflow:auto;direction:", ";", " &:focus{outline:none;}@media (max-height:399px){top:", "px;bottom:auto;margin-bottom:", "px;max-height:none;}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){right:", ";bottom:", ";transform:", ";}", ";"], props => props.isCentered ? '0' : `${props.theme.space.base * 12}px`, props => props.theme.borderRadii.md, boxShadow$1, props => props.theme.colors.background, props => props.theme.space.base * 24, props => props.isAnimated && styled.css(["", " 0.3s ease-in-out"], animationName), props => props.theme.rtl && 'rtl', sizeStyles$1, props => props.theme.space.base * 6, props => props.theme.space.base * 6, props => props.isCentered && '50%', props => props.isCentered && '50%', props => props.isCentered && 'translate(50%, 50%)', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
+})(["display:flex;position:fixed;flex-direction:column;animation-delay:0.01s;margin:", ";border-radius:", ";box-shadow:", ";background-color:", ";min-height:60px;max-height:calc(100vh - ", "px);overflow:auto;direction:", ";", ";", ";&:focus{outline:none;}@media (max-height:399px){top:", "px;bottom:auto;margin-bottom:", "px;max-height:none;}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){right:", ";bottom:", ";transform:", ";}", ";"], props => props.isCentered ? '0' : `${props.theme.space.base * 12}px`, props => props.theme.borderRadii.md, boxShadow$1, props => props.theme.colors.background, props => props.theme.space.base * 24, props => props.theme.rtl && 'rtl', animationStyles, sizeStyles$1, props => props.theme.space.base * 6, props => props.theme.space.base * 6, props => props.isCentered && '50%', props => props.isCentered && '50%', props => props.isCentered && 'translate(50%, 50%)', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
 StyledModal.propTypes = {
   isLarge: PropTypes__default.default.bool,
   isAnimated: PropTypes__default.default.bool
@@ -301,11 +245,11 @@ StyledModal.defaultProps = {
 const COMPONENT_ID$c = 'modals.tooltip_modal.backdrop';
 const StyledTooltipModalBackdrop = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.69.2'
+  'data-garden-version': '8.69.4'
 }).withConfig({
   displayName: "StyledTooltipModalBackdrop",
   componentId: "sc-1yaomgq-0"
-})(["position:fixed;top:0;right:0;bottom:0;left:0;z-index:400;overflow:hidden;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";&.garden-tooltip-modal-transition-exit-active{pointer-events:none;}&.garden-tooltip-modal-transition-exit-active div{transition:opacity 200ms;opacity:0;}", ";"], props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props));
+})(["position:fixed;inset:0;z-index:400;overflow:hidden;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";&.garden-tooltip-modal-transition-exit-active{pointer-events:none;}&.garden-tooltip-modal-transition-exit-active div{transition:opacity 200ms;opacity:0;}", ";"], props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props));
 StyledTooltipModalBackdrop.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -384,7 +328,7 @@ StyledTooltipWrapper.defaultProps = {
 const COMPONENT_ID$b = 'modals.tooltip_modal';
 const StyledTooltipModal = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.69.2',
+  'data-garden-version': '8.69.4',
   className: props.isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledTooltipModal",
@@ -413,7 +357,7 @@ const sizeStyles = props => `
 `;
 const StyledTooltipModalTitle = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.69.2'
+  'data-garden-version': '8.69.4'
 }).withConfig({
   displayName: "StyledTooltipModalTitle",
   componentId: "sc-11xjgjs-0"
@@ -425,7 +369,7 @@ StyledTooltipModalTitle.defaultProps = {
 const COMPONENT_ID$9 = 'modals.tooltip_modal.body';
 const StyledTooltipModalBody = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.69.2'
+  'data-garden-version': '8.69.4'
 }).withConfig({
   displayName: "StyledTooltipModalBody",
   componentId: "sc-195dkzj-0"
@@ -437,7 +381,7 @@ StyledTooltipModalBody.defaultProps = {
 const COMPONENT_ID$8 = 'modals.tooltip_modal.footer';
 const StyledTooltipModalFooter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.69.2'
+  'data-garden-version': '8.69.4'
 }).withConfig({
   displayName: "StyledTooltipModalFooter",
   componentId: "sc-fm36a9-0"
@@ -449,7 +393,7 @@ StyledTooltipModalFooter.defaultProps = {
 const COMPONENT_ID$7 = 'modals.tooltip_modal.footer_item';
 const StyledTooltipModalFooterItem = styled__default.default(StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.69.2'
+  'data-garden-version': '8.69.4'
 }).withConfig({
   displayName: "StyledTooltipModalFooterItem",
   componentId: "sc-1nahj6p-0"
@@ -461,7 +405,7 @@ StyledTooltipModalFooterItem.defaultProps = {
 const COMPONENT_ID$6 = 'modals.tooltip_modal.close';
 const StyledTooltipModalClose = styled__default.default(StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.69.2'
+  'data-garden-version': '8.69.4'
 }).withConfig({
   displayName: "StyledTooltipModalClose",
   componentId: "sc-1h2ke3q-0"
@@ -487,7 +431,7 @@ const boxShadow = props => {
 };
 const StyledDrawerModal = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.69.2'
+  'data-garden-version': '8.69.4'
 }).withConfig({
   displayName: "StyledDrawerModal",
   componentId: "sc-i1sake-0"
@@ -504,7 +448,7 @@ const BASE_MULTIPLIERS = {
 };
 const StyledDrawerModalClose = styled__default.default(StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.69.2'
+  'data-garden-version': '8.69.4'
 }).withConfig({
   displayName: "StyledDrawerModalClose",
   componentId: "sc-hrnaom-0"
@@ -516,7 +460,7 @@ StyledDrawerModalClose.defaultProps = {
 const COMPONENT_ID$3 = 'modals.drawer_modal.header';
 const StyledDrawerModalHeader = styled__default.default(StyledHeader).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.69.2'
+  'data-garden-version': '8.69.4'
 }).withConfig({
   displayName: "StyledDrawerModalHeader",
   componentId: "sc-1u04rqw-0"
@@ -528,7 +472,7 @@ StyledDrawerModalHeader.defaultProps = {
 const COMPONENT_ID$2 = 'modals.drawer_modal.body';
 const StyledDrawerModalBody = styled__default.default(StyledBody).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.69.2'
+  'data-garden-version': '8.69.4'
 }).withConfig({
   displayName: "StyledDrawerModalBody",
   componentId: "sc-yafe2y-0"
@@ -540,7 +484,7 @@ StyledDrawerModalBody.defaultProps = {
 const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
 const StyledDrawerModalFooter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.69.2'
+  'data-garden-version': '8.69.4'
 }).withConfig({
   displayName: "StyledDrawerModalFooter",
   componentId: "sc-17if4ka-0"
@@ -552,7 +496,7 @@ StyledDrawerModalFooter.defaultProps = {
 const COMPONENT_ID = 'modals.drawer_modal.footer_item';
 const StyledDrawerModalFooterItem = styled__default.default(StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.69.2'
+  'data-garden-version': '8.69.4'
 }).withConfig({
   displayName: "StyledDrawerModalFooterItem",
   componentId: "sc-1vbl885-0"
@@ -571,10 +515,10 @@ const useModalContext = () => {
 };
 
 const isOverflowing = element => {
-  const doc = ownerDocument(element);
-  const win = ownerWindow(doc);
+  const doc = ownerDocument__default.default(element);
+  const win = ownerWindow__default.default(doc);
   const isBody = element && element.tagName.toLowerCase() === 'body';
-  if (!isWindow(doc) && !isBody) {
+  if (!isWindow__default.default(doc) && !isBody) {
     return element.scrollHeight > element.clientHeight;
   }
   const style = win.getComputedStyle(doc.body);
@@ -628,10 +572,10 @@ const Modal = React.forwardRef((_ref, ref) => {
     let previousBodyPaddingRight;
     if (bodyElement) {
       if (isOverflowing(bodyElement)) {
-        const scrollbarSize$1 = scrollbarSize();
-        const bodyPaddingRight = parseInt(style(bodyElement, 'paddingRight') || '0', 10);
+        const scrollbarSize = getScrollbarSize__default.default();
+        const bodyPaddingRight = parseInt(css__default.default(bodyElement, 'paddingRight') || '0', 10);
         previousBodyPaddingRight = bodyElement.style.paddingRight;
-        bodyElement.style.paddingRight = `${bodyPaddingRight + scrollbarSize$1}px`;
+        bodyElement.style.paddingRight = `${bodyPaddingRight + scrollbarSize}px`;
       }
       if (htmlElement) {
         previousHtmlOverflow = htmlElement.style.overflow;
@@ -1020,19 +964,6 @@ TooltipModal.Footer = Footer$1;
 TooltipModal.FooterItem = FooterItem$1;
 TooltipModal.Title = Title;
 
-function activeElement(doc) {
-  if (doc === void 0) {
-    doc = ownerDocument();
-  }
-  try {
-    var active = doc.activeElement;
-    if (!active || !active.nodeName) return null;
-    return active;
-  } catch (e) {
-    return doc.body;
-  }
-}
-
 const HeaderComponent = React.forwardRef((_ref, ref) => {
   let {
     tag,
@@ -1152,7 +1083,7 @@ const DrawerModalComponent = React.forwardRef((_ref, ref) => {
     if (environment) {
       if (isOpen && modalRef.current) {
         if (restoreFocus) {
-          triggerRef.current = activeElement(environment);
+          triggerRef.current = activeElement__default.default(environment);
         }
         if (focusOnMount) {
           modalRef.current.focus();