@automattic/vip-design-system 0.14.2 → 0.17.0

package/.prettierignore

@@ -0,0 +1 @@
+src/system/theme/generated

package/README.md

@@ -41,6 +41,32 @@ For components that include storybooks, we can run `npm run storybook` to view t
 
 Note: it's super useful to run `npm run watch` in another process, so any changes will be almost immediately available / testable.
 
+### Updating the Theme with VIP Design System Tokens
+
+You need to update the tokens once the VIP Design System updates the core files.
+
+#### How the theming works
+
+We use the VIP Design System Tokens as our base theme structure. All colors, spaces, types should come from a dynamic token system provided by the VIP Design team, currently using Figma as the design software. When the design system is updated by the Design team, they push a file to the root of this repository: `tokens/valet-core.json`.
+
+By using the [Token Transformer](https://docs.tokens.studio/sync/github#7-how-to-use-tokens-stored-in-github-in-development) and a custom npm script, we parse this file getting only the VIP Dashboard theme we need for the react components. The theme is called: `productive-color-wpvip`.
+
+Once the new file is updated, we need to generate a custom theme file in `src/generated/valet-theme.json`. This operation generates a small json file with the colors we need already filled in.
+
+Once the theme is updated, the file `src/system/theme/index.js` reads the colors and apply to all components.
+
+Use the section below to run the script and update the theme.
+
+_Important:_ If you change the `generated/valet-theme.json`, make it sure to open a new pull request with these changes and release a new version if needed.
+
+#### Update theme script
+
+Run this command to update the VIP Valet Theme with the latest `tokens/valet-core.json`.
+
+```bash
+npm run theme-update
+```
+
 ### Publish NPM Package Instructions
 
 Once all the changes needed are merged to trunk, and you are ready to release a new version, follow these steps:

package/build/system/Button/Button.js

@@ -9,17 +9,19 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _themeUi = require("theme-ui");
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _themeUi = require("theme-ui");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["sx"];
 
-var Button = function Button(_ref) {
+var Button = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var sx = _ref.sx,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsx)(_themeUi.Button, (0, _extends2["default"])({
@@ -43,10 +45,13 @@ var Button = function Button(_ref) {
       }
     }, sx),
     className: (0, _classnames["default"])('vip-button-component', props.className)
-  }, props));
-};
+  }, props, {
+    ref: forwardRef
+  }));
+});
 
 exports.Button = Button;
+Button.displayName = 'Button';
 Button.propTypes = {
   sx: _propTypes["default"].object,
   className: _propTypes["default"].any

package/build/system/NewConfirmationDialog/NewConfirmationDialog.js

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.NewConfirmationDialog = void 0;
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var NewConfirmationDialogContent = function NewConfirmationDialogContent(_ref) {
+  var _ref$label = _ref.label,
+      label = _ref$label === void 0 ? 'Confirm' : _ref$label,
+      onConfirm = _ref.onConfirm,
+      onClose = _ref.onClose,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className;
+  return (0, _jsxRuntime.jsx)(_.Box, {
+    className: (0, _classnames["default"])('vip-confirmation-dialog-component', className),
+    children: (0, _jsxRuntime.jsxs)(_.Flex, {
+      sx: {
+        justifyContent: 'flex-end',
+        mt: 4
+      },
+      children: [(0, _jsxRuntime.jsx)(_.Button, {
+        variant: "secondary",
+        sx: {
+          mr: 2
+        },
+        onClick: onClose,
+        children: "Cancel"
+      }), (0, _jsxRuntime.jsx)(_.NewDialog.Close, {
+        children: (0, _jsxRuntime.jsx)(_.Button, {
+          variant: "danger",
+          onClick: function onClick() {
+            onConfirm();
+            onClose();
+          },
+          children: label
+        })
+      })]
+    })
+  });
+};
+
+NewConfirmationDialogContent.propTypes = {
+  body: _propTypes["default"].node,
+  label: _propTypes["default"].string,
+  onClose: _propTypes["default"].func,
+  onConfirm: _propTypes["default"].func,
+  className: _propTypes["default"].any
+};
+
+var NewConfirmationDialog = function NewConfirmationDialog(_ref2) {
+  var trigger = _ref2.trigger,
+      onConfirm = _ref2.onConfirm,
+      _ref2$needsConfirm = _ref2.needsConfirm,
+      needsConfirm = _ref2$needsConfirm === void 0 ? true : _ref2$needsConfirm,
+      label = _ref2.label,
+      title = _ref2.title,
+      _ref2$body = _ref2.body,
+      body = _ref2$body === void 0 ? '' : _ref2$body;
+
+  var _React$useState = _react["default"].useState(false),
+      open = _React$useState[0],
+      setOpen = _React$useState[1];
+
+  var directTrigger = /*#__PURE__*/_react["default"].cloneElement(trigger, {
+    onClick: onConfirm
+  });
+
+  if (!needsConfirm) {
+    return directTrigger;
+  }
+
+  return (0, _jsxRuntime.jsx)(_.NewDialog.Root, {
+    open: open,
+    onOpenChange: setOpen,
+    sx: {
+      maxWidth: 680
+    },
+    title: title,
+    description: body,
+    content: (0, _jsxRuntime.jsx)(NewConfirmationDialogContent, {
+      onClose: function onClose() {
+        return setOpen(false);
+      },
+      onConfirm: onConfirm,
+      body: body,
+      label: label
+    }),
+    trigger: trigger
+  });
+};
+
+exports.NewConfirmationDialog = NewConfirmationDialog;
+NewConfirmationDialog.propTypes = {
+  needsConfirm: _propTypes["default"].bool,
+  trigger: _propTypes["default"].node,
+  onConfirm: _propTypes["default"].func,
+  title: _propTypes["default"].node,
+  body: _propTypes["default"].node,
+  label: _propTypes["default"].node
+};

package/build/system/NewConfirmationDialog/NewConfirmationDialog.stories.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'NewConfirmationDialog',
+  component: _.NewConfirmationDialog
+};
+exports["default"] = _default;
+var ConfirmationTrigger = (0, _jsxRuntime.jsx)(_.Button, {
+  sx: {
+    mr: 3
+  },
+  children: "Click to answer"
+});
+
+var Default = function Default() {
+  var _React$useState = _react["default"].useState('🤔'),
+      answer = _React$useState[0],
+      setAnswer = _React$useState[1];
+
+  return (0, _jsxRuntime.jsxs)(_.Box, {
+    children: [(0, _jsxRuntime.jsx)("p", {
+      children: "Confirm that your name is John doe?"
+    }), (0, _jsxRuntime.jsx)(_.NewConfirmationDialog, {
+      title: 'Are you John Doe?',
+      description: 'Please confirm that your name is John Doe.',
+      trigger: ConfirmationTrigger,
+      body: "A modal is used to perform more detailed actions that don\u2018t necessarily need the context behind.",
+      onConfirm: function onConfirm() {
+        return setAnswer('👍');
+      },
+      needsConfirm: true
+    }), (0, _jsxRuntime.jsxs)("p", {
+      children: ["Answer: ", answer]
+    })]
+  });
+};
+
+exports.Default = Default;

package/build/system/NewConfirmationDialog/NewConfirmationDialog.test.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _NewConfirmationDialog = require("./NewConfirmationDialog");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var defaultProps = {
+  needsConfirm: true,
+  title: 'My Custom Title',
+  body: 'My Custom Text',
+  label: 'Submit this!',
+  trigger: (0, _jsxRuntime.jsx)("button", {
+    children: "Trigger"
+  })
+};
+
+var getButton = function getButton() {
+  return _react.screen.getByText('Trigger');
+};
+
+var getConfirmButton = function getConfirmButton() {
+  return _react.screen.getByText(defaultProps.label);
+};
+
+var getTitle = function getTitle() {
+  return _react.screen.getByRole('heading', {
+    level: 2
+  });
+};
+
+describe('<NewConfirmationDialog />', function () {
+  it('renders the NewConfirmationDialog component', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container;
+
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react.render)((0, _jsxRuntime.jsx)(_NewConfirmationDialog.NewConfirmationDialog, (0, _extends2["default"])({}, defaultProps))), container = _render.container;
+            expect(getButton()).toBeInTheDocument();
+
+            _react.fireEvent.click(getButton());
+
+            expect(getTitle()).toHaveTextContent(defaultProps.title);
+            expect(getConfirmButton()).toBeInTheDocument(); // Check for accessibility issues
+
+            _context.t0 = expect;
+            _context.next = 8;
+            return (0, _jestAxe.axe)(container);
+
+          case 8:
+            _context.t1 = _context.sent;
+            _context.next = 11;
+            return (0, _context.t0)(_context.t1).toHaveNoViolations();
+
+          case 11:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+});

package/build/system/NewConfirmationDialog/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+exports.__esModule = true;
+
+var _NewConfirmationDialog = require("./NewConfirmationDialog");
+
+exports.NewConfirmationDialog = _NewConfirmationDialog.NewConfirmationDialog;

package/build/system/NewDialog/DialogClose.js

@@ -3,35 +3,50 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.DialogClose = void 0;
+exports.DialogCloseDefault = exports.DialogClose = 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"));
+
 var DialogPrimitive = _interopRequireWildcard(require("@radix-ui/react-dialog"));
 
 var _io = require("react-icons/io5");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
+var _excluded = ["children"];
+
 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 DialogClose = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardedRef) {
+var DialogClose = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardedRef) {
+  var children = _ref.children,
+      rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsx)(DialogPrimitive.Close, (0, _extends2["default"])({
     asChild: true
-  }, props, {
+  }, rest, {
+    ref: forwardedRef,
+    children: children
+  }));
+});
+
+exports.DialogClose = DialogClose;
+DialogClose.propTypes = {
+  children: _propTypes["default"].node
+};
+DialogClose.displayName = 'DialogClose';
+
+var DialogCloseDefault = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardedRef) {
+  return (0, _jsxRuntime.jsx)(DialogClose, (0, _extends2["default"])({}, props, {
     ref: forwardedRef,
     children: (0, _jsxRuntime.jsx)("button", {
       "aria-label": "Close",
@@ -72,5 +87,5 @@ var DialogClose = /*#__PURE__*/_react["default"].forwardRef(function (props, for
   }));
 });
 
-exports.DialogClose = DialogClose;
-DialogClose.displayName = 'DialogClose';
+exports.DialogCloseDefault = DialogCloseDefault;
+DialogCloseDefault.displayName = 'DialogCloseDefault';

package/build/system/NewDialog/DialogClose.test.js

@@ -44,7 +44,7 @@ describe('<DialogClose />', function () {
         switch (_context.prev = _context.next) {
           case 0:
             _render = (0, _react.render)((0, _jsxRuntime.jsx)(Wrapper, {
-              children: (0, _jsxRuntime.jsx)(_DialogClose.DialogClose, (0, _extends2["default"])({}, defaultProps))
+              children: (0, _jsxRuntime.jsx)(_DialogClose.DialogCloseDefault, (0, _extends2["default"])({}, defaultProps))
             })), container = _render.container;
             expect(_react.screen.getByLabelText('Close')).toBeInTheDocument(); // Check for accessibility issues
 

package/build/system/NewDialog/DialogDescription.js

@@ -15,7 +15,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var DialogPrimitive = _interopRequireWildcard(require("@radix-ui/react-dialog"));
 
-var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText/ScreenReaderText"));
+var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 

package/build/system/NewDialog/DialogTitle.js

@@ -9,7 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var DialogPrimitive = _interopRequireWildcard(require("@radix-ui/react-dialog"));
 
-var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText/ScreenReaderText"));
+var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 

package/build/system/NewDialog/NewDialog.js

@@ -52,22 +52,21 @@ var NewDialog = function NewDialog(_ref) {
       defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
       _ref$allowPinchZoom = _ref.allowPinchZoom,
       allowPinchZoom = _ref$allowPinchZoom === void 0 ? false : _ref$allowPinchZoom,
-      _ref$onOpenAutoFocus = _ref.onOpenAutoFocus,
-      onOpenAutoFocus = _ref$onOpenAutoFocus === void 0 ? null : _ref$onOpenAutoFocus,
-      _ref$onCloseAutoFocus = _ref.onCloseAutoFocus,
-      onCloseAutoFocus = _ref$onCloseAutoFocus === void 0 ? null : _ref$onCloseAutoFocus,
-      _ref$onEscapeKeyDown = _ref.onEscapeKeyDown,
-      onEscapeKeyDown = _ref$onEscapeKeyDown === void 0 ? null : _ref$onEscapeKeyDown,
-      _ref$onPointerDownOut = _ref.onPointerDownOutside,
-      onPointerDownOutside = _ref$onPointerDownOut === void 0 ? null : _ref$onPointerDownOut,
-      _ref$onInteractOutsid = _ref.onInteractOutside,
-      onInteractOutside = _ref$onInteractOutsid === void 0 ? null : _ref$onInteractOutsid;
+      _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;
 
   if (disabled) {
     return;
   }
 
   return (0, _jsxRuntime.jsxs)(DialogPrimitive.Root, {
+    id: id,
+    open: open,
+    onOpenChange: onOpenChange,
     defaultOpen: defaultOpen,
     allowPinchZoom: allowPinchZoom,
     children: [trigger && (0, _jsxRuntime.jsx)(DialogPrimitive.Trigger, {
@@ -77,12 +76,7 @@ var NewDialog = function NewDialog(_ref) {
       children: [(0, _jsxRuntime.jsx)(_DialogOverlay.DialogOverlay, {}), (0, _jsxRuntime.jsxs)(DialogPrimitive.Content, {
         className: "vip-dialog-component",
         sx: (0, _extends2["default"])({}, _DialogContent.contentStyles, extraStyles),
-        onOpenAutoFocus: onOpenAutoFocus,
-        onCloseAutoFocus: onCloseAutoFocus,
-        onEscapeKeyDown: onEscapeKeyDown,
-        onPointerDownOutside: onPointerDownOutside,
-        onInteractOutside: onInteractOutside,
-        children: [(0, _jsxRuntime.jsx)(_DialogClose.DialogClose, {}), (0, _jsxRuntime.jsx)(_DialogTitle.DialogTitle, {
+        children: [(0, _jsxRuntime.jsx)(_DialogClose.DialogCloseDefault, {}), (0, _jsxRuntime.jsx)(_DialogTitle.DialogTitle, {
           title: title,
           hidden: !showHeading
         }), (0, _jsxRuntime.jsx)(_DialogDescription.DialogDescription, {
@@ -108,13 +102,9 @@ NewDialog.propTypes = {
   style: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].func]),
   // 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,
-  // Radix DialogPrimitive.Content properties
-  // https://www.radix-ui.com/docs/primitives/components/dialog#content
-  onOpenAutoFocus: _propTypes["default"].func,
-  onCloseAutoFocus: _propTypes["default"].func,
-  onEscapeKeyDown: _propTypes["default"].func,
-  onPointerDownOutside: _propTypes["default"].func,
-  onInteractOutside: _propTypes["default"].func
+  onOpenChange: _propTypes["default"].func
 };

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

@@ -3,27 +3,37 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.HiddenHeadings = exports.Default = exports.CustomStyling = exports.AutoOpen = void 0;
+exports["default"] = exports.HiddenHeadings = exports.Default = exports.CustomStyling = exports.CustomStateManagement = exports.CustomClose = exports.AutoOpen = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _react = require("react");
+
 var _system = require("../../system");
 
-var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText/ScreenReaderText"));
+var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
 
-var _NewDialog = require("./NewDialog");
+var NewDialog = _interopRequireWildcard(require("."));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
+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 _default = {
   title: 'NewDialog',
-  component: _NewDialog.NewDialog
+  component: NewDialog.Root
 };
 exports["default"] = _default;
 var defaultProps = {
@@ -39,7 +49,7 @@ var Default = function Default() {
         mb: 3
       },
       children: "Regular Dialog where the title and description are built-in and the content is provided by the user."
-    }), (0, _jsxRuntime.jsx)(_NewDialog.NewDialog, (0, _extends2["default"])({}, defaultProps, {
+    }), (0, _jsxRuntime.jsx)(NewDialog.Root, (0, _extends2["default"])({}, defaultProps, {
       trigger: (0, _jsxRuntime.jsx)(_system.Button, {
         children: "Trigger Dialog"
       })
@@ -57,7 +67,7 @@ var AutoOpen = function AutoOpen() {
         mb: 3
       },
       children: "Auto Opens when rendered. Press escape to close it."
-    }), (0, _jsxRuntime.jsx)(_NewDialog.NewDialog, (0, _extends2["default"])({}, defaultProps, {
+    }), (0, _jsxRuntime.jsx)(NewDialog.Root, (0, _extends2["default"])({}, defaultProps, {
       defaultOpen: true,
       content: (0, _jsxRuntime.jsxs)("div", {
         children: [(0, _jsxRuntime.jsx)("h3", {
@@ -83,7 +93,7 @@ var HiddenHeadings = function HiddenHeadings() {
         mb: 3
       },
       children: "Title and description are hidden, but still announced using a screen reader. Activate VoiceOver or any similar screen reader to listen to: Custom dialog title, Description of the dialog content."
-    }), (0, _jsxRuntime.jsx)(_NewDialog.NewDialog, (0, _extends2["default"])({}, defaultProps, {
+    }), (0, _jsxRuntime.jsx)(NewDialog.Root, (0, _extends2["default"])({}, defaultProps, {
       trigger: (0, _jsxRuntime.jsx)(_system.Button, {
         children: "Trigger Dialog"
       }),
@@ -124,7 +134,7 @@ var CustomStyling = function CustomStyling() {
         mb: 3
       },
       children: "Custom Styling on Dialog Content"
-    }), (0, _jsxRuntime.jsx)(_NewDialog.NewDialog, (0, _extends2["default"])({}, defaultProps, {
+    }), (0, _jsxRuntime.jsx)(NewDialog.Root, (0, _extends2["default"])({}, defaultProps, {
       defaultOpen: true,
       trigger: (0, _jsxRuntime.jsx)(_system.Button, {
         children: "Trigger Dialog"
@@ -167,4 +177,65 @@ var CustomStyling = function CustomStyling() {
   });
 };
 
-exports.CustomStyling = CustomStyling;
+exports.CustomStyling = CustomStyling;
+
+var CustomClose = function CustomClose() {
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsx)(_system.Text, {
+      sx: {
+        fontSize: 3,
+        mb: 3
+      },
+      children: "This example shows how you can create a custom Close trigger to your dialog"
+    }), (0, _jsxRuntime.jsx)(NewDialog.Root, (0, _extends2["default"])({}, defaultProps, {
+      trigger: (0, _jsxRuntime.jsx)(_system.Button, {
+        children: "Trigger Dialog"
+      }),
+      content: (0, _jsxRuntime.jsx)("div", {
+        children: (0, _jsxRuntime.jsx)(NewDialog.Close, {
+          children: (0, _jsxRuntime.jsx)(_system.Button, {
+            children: "Close here instead"
+          })
+        })
+      })
+    }))]
+  });
+};
+
+exports.CustomClose = CustomClose;
+
+var CustomStateManagement = function CustomStateManagement() {
+  var _useState = (0, _react.useState)(false),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsxs)(_system.Text, {
+      sx: {
+        fontSize: 3,
+        mb: 3
+      },
+      children: ["This example shows how you can create a custom state management. To achieve accessibility, you need to control the ", (0, _jsxRuntime.jsx)("strong", {
+        children: "open"
+      }), " state, but also keep consistency using the", ' ', (0, _jsxRuntime.jsx)("strong", {
+        children: "onOpenChange"
+      }), " attribute."]
+    }), (0, _jsxRuntime.jsx)(NewDialog.Root, (0, _extends2["default"])({}, defaultProps, {
+      open: open,
+      onOpenChange: setOpen,
+      trigger: (0, _jsxRuntime.jsx)(_system.Button, {
+        children: "Trigger Dialog"
+      }),
+      content: (0, _jsxRuntime.jsx)("div", {
+        children: (0, _jsxRuntime.jsx)(_system.Button, {
+          onClick: function onClick() {
+            return setOpen(false);
+          },
+          children: "Close here instead"
+        })
+      })
+    }))]
+  });
+};
+
+exports.CustomStateManagement = CustomStateManagement;

package/build/system/NewDialog/index.js

@@ -1,7 +1,20 @@
 "use strict";
 
 exports.__esModule = true;
+exports["default"] = exports.Root = exports.Close = void 0;
+
+var _DialogClose = require("./DialogClose");
 
 var _NewDialog = require("./NewDialog");
 
-exports.NewDialog = _NewDialog.NewDialog;
+exports.NewDialog = _NewDialog.NewDialog;
+
+/**
+ * Internal dependencies
+ */
+var Root = _NewDialog.NewDialog;
+exports.Root = Root;
+var Close = _DialogClose.DialogClose;
+exports.Close = Close;
+var _default = _NewDialog.NewDialog;
+exports["default"] = _default;