@primer/components 0.0.0-2021111171525 → 0.0.0-20211111716

package/lib/Dialog.js

@@ -7,51 +7,52 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _ButtonClose = _interopRequireDefault(require("./Button/ButtonClose"));
+
 var _constants = require("./constants");
 
-var _theme = _interopRequireDefault(require("./theme"));
+var _Box = _interopRequireDefault(require("./Box"));
+
+var _useDialog = _interopRequireDefault(require("./hooks/useDialog"));
 
 var _sx = _interopRequireDefault(require("./sx"));
 
 var _Text = _interopRequireDefault(require("./Text"));
 
-var _Flex = _interopRequireDefault(require("./Flex"));
-
-var _ButtonClose = _interopRequireDefault(require("./Button/ButtonClose"));
-
-var _useDialog = _interopRequireDefault(require("./hooks/useDialog"));
+var _useCombinedRefs = require("./hooks/useCombinedRefs");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _extends() { _extends = Object.assign || 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.apply(this, arguments); }
 
-const StyledDialog = _styledComponents.default.div.withConfig({
-  displayName: "Dialog__StyledDialog",
-  componentId: "dh15lb-0"
-})(["box-shadow:0px 4px 32px rgba(0,0,0,0.35);border-radius:", ";position:fixed;top:0;left:50%;transform:translateX(-50%);max-height:80vh;z-index:999;margin:10vh auto;background-color:", ";width:", ";outline:none;@media screen and (max-width:750px){width:100vw;margin:0;border-radius:0;height:100vh;}", ";", ";", ";"], (0, _constants.get)('radii.2'), (0, _constants.get)('colors.white'), props => props.narrow ? '320px' : props.wide ? '640px' : '440px', _constants.LAYOUT, _constants.COMMON, _sx.default);
+const noop = () => null;
+
+const DialogBase = _styledComponents.default.div.withConfig({
+  displayName: "Dialog__DialogBase",
+  componentId: "sc-1vcjhsg-0"
+})(["box-shadow:", ";border-radius:", ";position:fixed;top:0;left:50%;transform:translateX(-50%);max-height:80vh;z-index:999;margin:10vh auto;background-color:", ";width:", ";outline:none;@media screen and (max-width:750px){width:100vw;margin:0;border-radius:0;height:100vh;}", ";"], (0, _constants.get)('shadows.shadow.large'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.canvas.default'), props => props.narrow ? '320px' : props.wide ? '640px' : '440px', _sx.default);
 
-const DialogHeaderBase = (0, _styledComponents.default)(_Flex.default).withConfig({
+const DialogHeaderBase = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "Dialog__DialogHeaderBase",
-  componentId: "dh15lb-1"
-})(["border-radius:4px 4px 0px 0px;border-bottom:1px solid #dad5da;@media screen and (max-width:750px){border-radius:0px;}", ";"], _sx.default);
+  componentId: "sc-1vcjhsg-1"
+})(["border-radius:", " ", " 0px 0px;border-bottom:1px solid ", ";display:flex;@media screen and (max-width:750px){border-radius:0px;}", ";"], (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.border.default'), _sx.default);
 
 function DialogHeader({
   theme,
   children,
+  backgroundColor = 'gray.1',
   ...rest
 }) {
   if (_react.default.Children.toArray(children).every(ch => typeof ch === 'string')) {
     children = /*#__PURE__*/_react.default.createElement(_Text.default, {
       theme: theme,
-      color: "gray.9",
+      color: "fg.default",
       fontSize: 1,
       fontWeight: "bold",
       fontFamily: "sans-serif"
@@ -60,7 +61,8 @@ function DialogHeader({
 
   return /*#__PURE__*/_react.default.createElement(DialogHeaderBase, _extends({
     theme: theme,
-    p: 3
+    p: 3,
+    backgroundColor: backgroundColor
   }, rest), children);
 }
 
@@ -68,20 +70,19 @@ DialogHeader.displayName = "DialogHeader";
 
 const Overlay = _styledComponents.default.span.withConfig({
   displayName: "Dialog__Overlay",
-  componentId: "dh15lb-2"
-})(["&:before{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;display:block;cursor:default;content:' ';background:transparent;z-index:99;background:rgba(27,31,35,0.5);}"]);
+  componentId: "sc-1vcjhsg-2"
+})(["&:before{position:fixed;top:0;right:0;bottom:0;left:0;display:block;cursor:default;content:' ';background:transparent;z-index:99;background:", ";}"], (0, _constants.get)('colors.primer.canvas.backdrop'));
 
-const Dialog = (0, _react.forwardRef)(({
+const Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
-  onDismiss,
+  onDismiss = noop,
   isOpen,
   initialFocusRef,
   returnFocusRef,
   ...props
 }, forwardedRef) => {
-  const backupRef = (0, _react.useRef)(null);
   const overlayRef = (0, _react.useRef)(null);
-  const modalRef = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
+  const modalRef = (0, _useCombinedRefs.useCombinedRefs)(forwardedRef);
   const closeButtonRef = (0, _react.useRef)(null);
 
   const onCloseClick = () => {
@@ -105,7 +106,7 @@ const Dialog = (0, _react.forwardRef)(({
   });
   return isOpen ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Overlay, {
     ref: overlayRef
-  }), /*#__PURE__*/_react.default.createElement(StyledDialog, _extends({
+  }), /*#__PURE__*/_react.default.createElement(DialogBase, _extends({
     tabIndex: -1,
     ref: modalRef,
     role: "dialog",
@@ -120,32 +121,16 @@ const Dialog = (0, _react.forwardRef)(({
     }
   }), children)) : null;
 });
-Dialog.defaultProps = {
-  theme: _theme.default
-};
-Dialog.propTypes = { ..._constants.COMMON.propTypes,
-  ..._constants.LAYOUT.propTypes,
-  initialFocusRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
-    current: _propTypes.default.any
-  })]),
-  isOpen: _propTypes.default.bool.isRequired,
-  narrow: _propTypes.default.bool,
-  onDismiss: _propTypes.default.func.isRequired,
-  ..._sx.default.propTypes,
-  returnFocusRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
-    current: _propTypes.default.any
-  })]),
-  theme: _propTypes.default.object,
-  wide: _propTypes.default.bool
-};
 DialogHeader.defaultProps = {
-  backgroundColor: 'gray.1',
-  theme: _theme.default
+  backgroundColor: 'canvas.subtle'
 };
-DialogHeader.propTypes = { ..._Flex.default.propTypes
+DialogHeader.propTypes = { ..._Box.default.propTypes
 };
 DialogHeader.displayName = 'Dialog.Header';
 Dialog.displayName = 'Dialog';
-Dialog.Header = DialogHeader;
-var _default = Dialog;
+
+var _default = Object.assign(Dialog, {
+  Header: DialogHeader
+});
+
 exports.default = _default;