@automattic/vip-design-system 0.18.5-0 → 0.19.0

package/build/system/Dropdown/Dropdown.stories.js

@@ -153,7 +153,8 @@ var WithDialog = function WithDialog() {
 
   var _React$useState5 = _react["default"].useState(false),
       menuOpen = _React$useState5[0],
-      setMenuOpen = _React$useState5[1];
+      setMenuOpen = _React$useState5[1]; // eslint-disable-next-line react/prop-types
+
 
   var AreYouSureDialog = function AreYouSureDialog(_ref) {
     var onConfirm = _ref.onConfirm,

package/build/system/NewDialog/NewDialog.js

@@ -7,6 +7,8 @@ exports.NewDialog = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -25,19 +27,12 @@ var _DialogContent = require("./DialogContent");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
+var _excluded = ["trigger", "description", "title", "content", "showHeading", "disabled", "style", "contentProps", "portalProps"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 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; }
 
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
 var NewDialog = function NewDialog(_ref) {
   var _ref$trigger = _ref.trigger,
       trigger = _ref$trigger === void 0 ? null : _ref$trigger,
@@ -54,20 +49,9 @@ var NewDialog = function NewDialog(_ref) {
       contentProps = _ref$contentProps === void 0 ? {} : _ref$contentProps,
       _ref$portalProps = _ref.portalProps,
       portalProps = _ref$portalProps === void 0 ? {} : _ref$portalProps,
-      _ref$defaultOpen = _ref.defaultOpen,
-      defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
-      _ref$allowPinchZoom = _ref.allowPinchZoom,
-      allowPinchZoom = _ref$allowPinchZoom === void 0 ? false : _ref$allowPinchZoom,
-      _ref$onOpenChange = _ref.onOpenChange,
-      onOpenChange = _ref$onOpenChange === void 0 ? undefined : _ref$onOpenChange,
-      _ref$open = _ref.open,
-      open = _ref$open === void 0 ? undefined : _ref$open,
-      _ref$id = _ref.id,
-      id = _ref$id === void 0 ? undefined : _ref$id;
-
-  var _React$useState = _react["default"].useState(open || defaultOpen),
-      isOpen = _React$useState[0],
-      setIsOpen = _React$useState[1];
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+
+  var closeRef = _react["default"].useRef(null);
 
   if (disabled) {
     return;
@@ -76,24 +60,13 @@ var NewDialog = function NewDialog(_ref) {
 
   var isContentFunction = typeof content === 'function';
 
-  var handleOnOpenChange = function handleOnOpenChange(status) {
-    setIsOpen(status);
+  var onClose = function onClose() {
+    var _closeRef$current;
 
-    if (onOpenChange) {
-      onOpenChange(status);
-    }
+    closeRef == null ? void 0 : (_closeRef$current = closeRef.current) == null ? void 0 : _closeRef$current.click();
   };
 
-  _react["default"].useEffect(function () {
-    handleOnOpenChange(open);
-  }, [open]);
-
-  return (0, _jsxRuntime.jsxs)(DialogPrimitive.Root, {
-    id: id,
-    open: isOpen,
-    onOpenChange: handleOnOpenChange,
-    defaultOpen: defaultOpen,
-    allowPinchZoom: allowPinchZoom,
+  return (0, _jsxRuntime.jsxs)(DialogPrimitive.Root, (0, _extends2["default"])({}, props, {
     children: [trigger && (0, _jsxRuntime.jsx)(DialogPrimitive.Trigger, {
       asChild: true,
       children: trigger
@@ -102,7 +75,9 @@ var NewDialog = function NewDialog(_ref) {
         className: "vip-dialog-component",
         sx: (0, _extends2["default"])({}, _DialogContent.contentStyles, extraStyles)
       }, contentProps, {
-        children: [(0, _jsxRuntime.jsx)(_DialogClose.DialogCloseDefault, {}), (0, _jsxRuntime.jsx)(_DialogTitle.DialogTitle, {
+        children: [(0, _jsxRuntime.jsx)(_DialogClose.DialogCloseDefault, {
+          ref: closeRef
+        }), (0, _jsxRuntime.jsx)(_DialogTitle.DialogTitle, {
           title: title,
           hidden: !showHeading
         }), (0, _jsxRuntime.jsx)(_DialogDescription.DialogDescription, {
@@ -111,14 +86,12 @@ var NewDialog = function NewDialog(_ref) {
         }), (0, _jsxRuntime.jsx)("div", {
           role: "document",
           children: isContentFunction ? content({
-            onClose: function onClose() {
-              return setIsOpen(false);
-            }
+            onClose: onClose
           }) : content
         })]
       }))]
     }))]
-  });
+  }));
 };
 
 exports.NewDialog = NewDialog;
@@ -133,12 +106,5 @@ NewDialog.propTypes = {
   // Content props in: https://www.radix-ui.com/docs/primitives/components/dialog#content
   contentProps: _propTypes["default"].any,
   // Portal props in: https://www.radix-ui.com/docs/primitives/components/dialog#portal
-  portalProps: _propTypes["default"].any,
-  // Radix DialogPrimitive.Root properties
-  // https://www.radix-ui.com/docs/primitives/components/dialog#root
-  id: _propTypes["default"].string,
-  open: _propTypes["default"].bool,
-  defaultOpen: _propTypes["default"].bool,
-  allowPinchZoom: _propTypes["default"].bool,
-  onOpenChange: _propTypes["default"].func
+  portalProps: _propTypes["default"].any
 };

package/build/system/NewDialog/NewDialog.stories.js

@@ -225,7 +225,7 @@ var CustomStateManagement = function CustomStateManagement() {
       onOpenChange: function onOpenChange(status) {
         // eslint-disable-next-line no-console
         console.log('New status changed', status);
-        setOpen(!!open);
+        setOpen(!open);
       },
       trigger: (0, _jsxRuntime.jsx)(_system.Button, {
         children: "Trigger Dialog"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.18.5-0",
+	"version": "0.19.0",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",

package/src/system/Dropdown/Dropdown.stories.jsx

@@ -117,6 +117,7 @@ export const WithDialog = () => {
 	const [ alertOpen, setAlertOpen ] = React.useState( false );
 	const [ menuOpen, setMenuOpen ] = React.useState( false );
 
+	// eslint-disable-next-line react/prop-types
 	const AreYouSureDialog = ( { onConfirm, ...props } ) => (
 		<NewDialog.Root
 			{ ...props }
@@ -125,7 +126,6 @@ export const WithDialog = () => {
 					<Button variant="secondary" onClick={ () => onConfirm() }>
 						Custom Close.
 					</Button>
-
 					<p>Teste abc.</p>
 				</>
 			}

package/src/system/NewDialog/NewDialog.js

@@ -25,15 +25,9 @@ export const NewDialog = ( {
 	style: extraStyles,
 	contentProps = {},
 	portalProps = {},
-
-	// Radix Specific Properties
-	defaultOpen = false,
-	allowPinchZoom = false,
-	onOpenChange = undefined,
-	open = undefined,
-	id = undefined,
+	...props
 } ) => {
-	const [ isOpen, setIsOpen ] = React.useState( open || defaultOpen );
+	const closeRef = React.useRef( null );
 
 	if ( disabled ) {
 		return;
@@ -42,26 +36,12 @@ export const NewDialog = ( {
 	// if content is a function, pass in onClose
 	const isContentFunction = typeof content === 'function';
 
-	const handleOnOpenChange = status => {
-		setIsOpen( status );
-
-		if ( onOpenChange ) {
-			onOpenChange( status );
-		}
+	const onClose = () => {
+		closeRef?.current?.click();
 	};
 
-	React.useEffect( () => {
-		handleOnOpenChange( open );
-	}, [ open ] );
-
 	return (
-		<DialogPrimitive.Root
-			id={ id }
-			open={ isOpen }
-			onOpenChange={ handleOnOpenChange }
-			defaultOpen={ defaultOpen }
-			allowPinchZoom={ allowPinchZoom }
-		>
+		<DialogPrimitive.Root { ...props }>
 			{ trigger && <DialogPrimitive.Trigger asChild>{ trigger }</DialogPrimitive.Trigger> }
 
 			<DialogPrimitive.Portal { ...portalProps }>
@@ -72,13 +52,11 @@ export const NewDialog = ( {
 					sx={ { ...contentStyles, ...extraStyles } }
 					{ ...contentProps }
 				>
-					<DialogClose />
+					<DialogClose ref={ closeRef } />
 					<DialogTitle title={ title } hidden={ ! showHeading } />
 					<DialogDescription description={ description } hidden={ ! showHeading } />
 
-					<div role="document">
-						{ isContentFunction ? content( { onClose: () => setIsOpen( false ) } ) : content }
-					</div>
+					<div role="document">{ isContentFunction ? content( { onClose } ) : content }</div>
 				</DialogPrimitive.Content>
 			</DialogPrimitive.Portal>
 		</DialogPrimitive.Root>
@@ -99,12 +77,4 @@ NewDialog.propTypes = {
 
 	// Portal props in: https://www.radix-ui.com/docs/primitives/components/dialog#portal
 	portalProps: PropTypes.any,
-
-	// Radix DialogPrimitive.Root properties
-	// https://www.radix-ui.com/docs/primitives/components/dialog#root
-	id: PropTypes.string,
-	open: PropTypes.bool,
-	defaultOpen: PropTypes.bool,
-	allowPinchZoom: PropTypes.bool,
-	onOpenChange: PropTypes.func,
 };

package/src/system/NewDialog/NewDialog.stories.jsx

@@ -155,7 +155,7 @@ export const CustomStateManagement = () => {
 					// eslint-disable-next-line no-console
 					console.log( 'New status changed', status );
 
-					setOpen( !! open );
+					setOpen( ! open );
 				} }
 				trigger={ <Button>Trigger Dialog</Button> }
 				content={