@zendeskgarden/react-modals 9.0.0-next.7 → 9.0.0-next.8

package/dist/esm/types/index.js

@@ -0,0 +1,11 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import { PLACEMENT as PLACEMENT$1 } from '@zendeskgarden/react-theming';
+
+const PLACEMENT = ['auto', ...PLACEMENT$1];
+
+export { PLACEMENT };

package/dist/esm/utils/useModalContext.js

@@ -0,0 +1,18 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import { createContext, useContext } from 'react';
+
+const ModalsContext = createContext(undefined);
+const useModalContext = () => {
+  const context = useContext(ModalsContext);
+  if (context === undefined) {
+    throw new Error('useModalContext must be used within a ModalsContext.Provider');
+  }
+  return context;
+};
+
+export { ModalsContext, useModalContext };

package/dist/esm/utils/useTooltipModalContext.js

@@ -0,0 +1,18 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import { createContext, useContext } from 'react';
+
+const TooltipModalContext = createContext(undefined);
+const useTooltipModalContext = () => {
+  const context = useContext(TooltipModalContext);
+  if (context === undefined) {
+    throw new Error('Element must be used within a TooltipModal component.');
+  }
+  return context;
+};
+
+export { TooltipModalContext, useTooltipModalContext };

package/dist/index.cjs.js

@@ -1,10 +1,9 @@
 /**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
 'use strict';
 
 var React = require('react');
@@ -54,21 +53,6 @@ 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) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$2.apply(this, arguments);
-}
-
 const COMPONENT_ID$j = 'modals.backdrop';
 const animationName$1 = styled.keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
 const animationStyles$1 = props => {
@@ -79,7 +63,7 @@ const animationStyles$1 = props => {
 };
 const StyledBackdrop = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledBackdrop",
   componentId: "sc-mzdjpo-0"
@@ -95,7 +79,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': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14rzecg-0"
@@ -110,7 +94,9 @@ const colorStyles = props => {
   const foregroundColor = 'neutralHue';
   return styled.css(["background-color:transparent;color:", ";&:hover{background-color:", ";color:", ";}", " &:active{transition:background-color 0.1s ease-in-out,color 0.1s ease-in-out;background-color:", ";color:", ";}"], reactTheming.getColorV8(foregroundColor, 600, props.theme), reactTheming.getColorV8(backgroundColor, 600, props.theme, 0.08), reactTheming.getColorV8(foregroundColor, 700, props.theme), reactTheming.focusStyles({
     theme: props.theme,
-    hue: backgroundColor
+    color: {
+      hue: backgroundColor
+    }
   }), reactTheming.getColorV8(backgroundColor, 600, props.theme, 0.2), reactTheming.getColorV8(foregroundColor, 800, props.theme));
 };
 const BASE_MULTIPLIERS$1 = {
@@ -120,7 +106,7 @@ const BASE_MULTIPLIERS$1 = {
 };
 const StyledClose = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledClose",
   componentId: "sc-iseudj-0"
@@ -132,7 +118,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': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledFooter",
   componentId: "sc-d8pfdu-0"
@@ -144,7 +130,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': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1mb76hl-0"
@@ -156,7 +142,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': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1787r9v-0"
@@ -227,7 +213,7 @@ const sizeStyles$1 = props => {
 };
 const StyledModal = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledModal",
   componentId: "sc-1pe1axu-0"
@@ -243,7 +229,7 @@ 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': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledTooltipModalBackdrop",
   componentId: "sc-1yaomgq-0"
@@ -270,7 +256,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': '9.0.0-next.7',
+  'data-garden-version': '9.0.0-next.8',
   className: props.isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledTooltipModal",
@@ -299,7 +285,7 @@ const sizeStyles = props => `
 `;
 const StyledTooltipModalTitle = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledTooltipModalTitle",
   componentId: "sc-11xjgjs-0"
@@ -311,7 +297,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': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledTooltipModalBody",
   componentId: "sc-195dkzj-0"
@@ -323,7 +309,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': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledTooltipModalFooter",
   componentId: "sc-fm36a9-0"
@@ -335,7 +321,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': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledTooltipModalFooterItem",
   componentId: "sc-1nahj6p-0"
@@ -347,7 +333,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': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledTooltipModalClose",
   componentId: "sc-1h2ke3q-0"
@@ -373,7 +359,7 @@ const boxShadow = props => {
 };
 const StyledDrawer = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledDrawer",
   componentId: "sc-zp66t3-0"
@@ -390,7 +376,7 @@ const BASE_MULTIPLIERS = {
 };
 const StyledDrawerClose = styled__default.default(StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledDrawerClose",
   componentId: "sc-1a0xt3x-0"
@@ -402,7 +388,7 @@ StyledDrawerClose.defaultProps = {
 const COMPONENT_ID$3 = 'modals.drawer_modal.header';
 const StyledDrawerHeader = styled__default.default(StyledHeader).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledDrawerHeader",
   componentId: "sc-y4mgkj-0"
@@ -414,7 +400,7 @@ StyledDrawerHeader.defaultProps = {
 const COMPONENT_ID$2 = 'modals.drawer_modal.body';
 const StyledDrawerBody = styled__default.default(StyledBody).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledDrawerBody",
   componentId: "sc-13qufyn-0"
@@ -426,7 +412,7 @@ StyledDrawerBody.defaultProps = {
 const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
 const StyledDrawerFooter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledDrawerFooter",
   componentId: "sc-kc7e6p-0"
@@ -438,7 +424,7 @@ StyledDrawerFooter.defaultProps = {
 const COMPONENT_ID = 'modals.drawer_modal.footer_item';
 const StyledDrawerFooterItem = styled__default.default(StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledDrawerFooterItem",
   componentId: "sc-m2yul4-0"
@@ -460,7 +446,7 @@ const Body$2 = React.forwardRef((props, ref) => {
   const {
     getContentProps
   } = useModalContext();
-  return React__namespace.default.createElement(StyledBody, _extends$2({}, getContentProps(props), {
+  return React__namespace.default.createElement(StyledBody, Object.assign({}, getContentProps(props), {
     ref: ref
   }));
 });
@@ -493,7 +479,7 @@ const Close$2 = React.forwardRef((props, ref) => {
     return () => setIsCloseButtonPresent(false);
   });
   const ariaLabel = reactTheming.useText(Close$2, props, 'aria-label', 'Close modal');
-  return React__namespace.default.createElement(StyledClose, _extends$2({}, getCloseProps({
+  return React__namespace.default.createElement(StyledClose, Object.assign({}, getCloseProps({
     ...props,
     'aria-label': ariaLabel
   }), {
@@ -506,14 +492,14 @@ const Footer$2 = React__namespace.default.forwardRef((props, ref) => {
   const {
     isLarge
   } = useModalContext();
-  return React__namespace.default.createElement(StyledFooter, _extends$2({
+  return React__namespace.default.createElement(StyledFooter, Object.assign({
     ref: ref,
     isLarge: isLarge
   }, props));
 });
 Footer$2.displayName = 'Footer';
 
-const FooterItem$2 = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledFooterItem, _extends$2({
+const FooterItem$2 = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledFooterItem, Object.assign({
   ref: ref
 }, props)));
 FooterItem$2.displayName = 'FooterItem';
@@ -540,7 +526,7 @@ const Header$1 = React.forwardRef((_ref, ref) => {
       }
     };
   }, [hasHeader, setHasHeader]);
-  return React__namespace.default.createElement(StyledHeader, _extends$2({}, getTitleProps(other), {
+  return React__namespace.default.createElement(StyledHeader, Object.assign({}, getTitleProps(other), {
     as: tag,
     isCloseButtonPresent: isCloseButtonPresent,
     ref: ref
@@ -665,10 +651,10 @@ const ModalComponent = React.forwardRef((_ref, ref) => {
   }
   return ReactDOM.createPortal( React__namespace.default.createElement(ModalsContext.Provider, {
     value: value
-  }, React__namespace.default.createElement(StyledBackdrop, _extends$2({
+  }, React__namespace.default.createElement(StyledBackdrop, Object.assign({
     isCentered: isCentered,
     isAnimated: isAnimated
-  }, getBackdropProps(backdropProps)), React__namespace.default.createElement(StyledModal, _extends$2({
+  }, getBackdropProps(backdropProps)), React__namespace.default.createElement(StyledModal, Object.assign({
     isCentered: isCentered,
     isAnimated: isAnimated,
     isLarge: isLarge
@@ -728,7 +714,7 @@ const TitleComponent = React.forwardRef((_ref, ref) => {
       }
     };
   }, [hasTitle, setHasTitle]);
-  return React__namespace.default.createElement(StyledTooltipModalTitle, _extends$2({}, getTitleProps(other), {
+  return React__namespace.default.createElement(StyledTooltipModalTitle, Object.assign({}, getTitleProps(other), {
     as: tag,
     ref: ref
   }), children);
@@ -746,7 +732,7 @@ const BodyComponent$1 = React.forwardRef((props, ref) => {
   const {
     getContentProps
   } = useTooltipModalContext();
-  return React__namespace.default.createElement(StyledTooltipModalBody, _extends$2({}, getContentProps(props), {
+  return React__namespace.default.createElement(StyledTooltipModalBody, Object.assign({}, getContentProps(props), {
     ref: ref
   }));
 });
@@ -758,7 +744,7 @@ const CloseComponent$1 = React.forwardRef((props, ref) => {
     getCloseProps
   } = useTooltipModalContext();
   const ariaLabel = reactTheming.useText(CloseComponent$1, props, 'aria-label', 'Close tooltip');
-  return React__namespace.default.createElement(StyledTooltipModalClose, _extends$2({}, getCloseProps({
+  return React__namespace.default.createElement(StyledTooltipModalClose, Object.assign({}, getCloseProps({
     ...props,
     'aria-label': ariaLabel
   }), {
@@ -768,13 +754,13 @@ const CloseComponent$1 = React.forwardRef((props, ref) => {
 CloseComponent$1.displayName = 'TooltipModal.Close';
 const Close$1 = CloseComponent$1;
 
-const FooterComponent$1 = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledTooltipModalFooter, _extends$2({
+const FooterComponent$1 = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledTooltipModalFooter, Object.assign({
   ref: ref
 }, props)));
 FooterComponent$1.displayName = 'TooltipModal.Footer';
 const Footer$1 = FooterComponent$1;
 
-const FooterItemComponent$1 = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledTooltipModalFooterItem, _extends$2({
+const FooterItemComponent$1 = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledTooltipModalFooterItem, Object.assign({
   ref: ref
 }, props)));
 FooterItemComponent$1.displayName = 'TooltipModal.FooterItem';
@@ -880,7 +866,7 @@ const TooltipModalComponent = React__namespace.default.forwardRef((_ref, ref) =>
   }, transitionState => {
     return React__namespace.default.createElement(TooltipModalContext.Provider, {
       value: value
-    }, React__namespace.default.createElement(StyledTooltipModalBackdrop, _extends$2({}, getBackdropProps(), backdropProps, {
+    }, React__namespace.default.createElement(StyledTooltipModalBackdrop, Object.assign({}, getBackdropProps(), backdropProps, {
       ref: transitionRef
     }), React__namespace.default.createElement(StyledTooltipWrapper, {
       ref: setFloatingElement,
@@ -890,7 +876,7 @@ const TooltipModalComponent = React__namespace.default.forwardRef((_ref, ref) =>
       placement: placement,
       zIndex: zIndex,
       isAnimated: isAnimated
-    }, React__namespace.default.createElement(StyledTooltipModal, _extends$2({
+    }, React__namespace.default.createElement(StyledTooltipModal, Object.assign({
       transitionState: transitionState,
       placement: placement,
       hasArrow: hasArrow,
@@ -948,7 +934,7 @@ const HeaderComponent = React.forwardRef((_ref, ref) => {
       }
     };
   }, [hasHeader, setHasHeader]);
-  return React__namespace.default.createElement(StyledDrawerHeader, _extends$2({}, getTitleProps(other), {
+  return React__namespace.default.createElement(StyledDrawerHeader, Object.assign({}, getTitleProps(other), {
     as: tag,
     isCloseButtonPresent: isCloseButtonPresent,
     ref: ref
@@ -967,7 +953,7 @@ const BodyComponent = React.forwardRef((props, ref) => {
   const {
     getContentProps
   } = useModalContext();
-  return React__namespace.default.createElement(StyledDrawerBody, _extends$2({}, getContentProps(props), {
+  return React__namespace.default.createElement(StyledDrawerBody, Object.assign({}, getContentProps(props), {
     ref: ref
   }), props.children);
 });
@@ -984,7 +970,7 @@ const CloseComponent = React.forwardRef((props, ref) => {
     return () => setIsCloseButtonPresent(false);
   });
   const ariaLabel = reactTheming.useText(CloseComponent, props, 'aria-label', 'Close drawer');
-  return React__namespace.default.createElement(StyledDrawerClose, _extends$2({}, getCloseProps({
+  return React__namespace.default.createElement(StyledDrawerClose, Object.assign({}, getCloseProps({
     ...props,
     'aria-label': ariaLabel
   }), {
@@ -994,13 +980,13 @@ const CloseComponent = React.forwardRef((props, ref) => {
 CloseComponent.displayName = 'Drawer.Close';
 const Close = CloseComponent;
 
-const FooterComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledDrawerFooter, _extends$2({
+const FooterComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledDrawerFooter, Object.assign({
   ref: ref
 }, props)));
 FooterComponent.displayName = 'Drawer.Footer';
 const Footer = FooterComponent;
 
-const FooterItemComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledDrawerFooterItem, _extends$2({
+const FooterItemComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledDrawerFooterItem, Object.assign({
   ref: ref
 }, props)));
 FooterItemComponent.displayName = 'Drawer.FooterItem';
@@ -1117,9 +1103,9 @@ const DrawerComponent = React.forwardRef((_ref, ref) => {
     unmountOnExit: true,
     classNames: "garden-drawer-transition",
     nodeRef: transitionRef
-  }, React__namespace.default.createElement(StyledBackdrop, _extends$2({
+  }, React__namespace.default.createElement(StyledBackdrop, Object.assign({
     isAnimated: true
-  }, getBackdropProps(backdropProps)), React__namespace.default.createElement(StyledDrawer, _extends$2({}, modalProps, ariaProps, props, {
+  }, getBackdropProps(backdropProps)), React__namespace.default.createElement(StyledDrawer, Object.assign({}, modalProps, ariaProps, props, {
     ref: reactMergeRefs.mergeRefs([ref, modalRef, transitionRef])
   }))))), rootNode);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-modals",
-  "version": "9.0.0-next.7",
+  "version": "9.0.0-next.8",
   "description": "Components relating to modals in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -10,7 +10,7 @@
     "url": "https://github.com/zendeskgarden/react-components/issues"
   },
   "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
+  "module": "dist/esm/index.js",
   "files": [
     "dist"
   ],
@@ -30,14 +30,14 @@
     "react-transition-group": "^4.4.2"
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0",
+    "@zendeskgarden/react-theming": ">=9.0.0-next",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
     "@types/react-transition-group": "4.4.10",
-    "@zendeskgarden/react-theming": "^9.0.0-next.7",
+    "@zendeskgarden/react-theming": "^9.0.0-next.8",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -50,5 +50,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "50a2b45b2e237a490a6d460818d33498b92479ec"
+  "gitHead": "a3d6534843d5a4f5cb60b52bc67264f3230f2da0"
 }