@pingux/astro 2.53.0-alpha.1 → 2.53.0

package/lib/cjs/components/IconButton/IconButton.styles.d.ts

@@ -278,7 +278,42 @@ declare const _default: {
         outline: string;
     };
     messageCloseButton: any;
-    modalCloseButton: any;
+    modalCloseButton: {
+        position: string;
+        top: number;
+        right: number;
+        width: string;
+        height: string;
+        justifyContent: string;
+        appearance: string;
+        alignItems: string;
+        alignSelf: string;
+        display: string;
+        flexGrow: number;
+        flexShrink: number;
+        borderRadius: string;
+        cursor: string;
+        bg: string;
+        p: string;
+        path: {
+            fill: string;
+        };
+        outline: string;
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&.is-hovered': {
+            bg: string;
+        };
+        '&.is-pressed': {
+            path: {
+                fill: string;
+            };
+            bg: string;
+        };
+    };
     invertedBadgeDeleteButton: {
         path: {
             fill: string;

package/lib/cjs/components/Modal/Modal.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ModalProps } from '../../types';
+declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLElement>>;
+export default Modal;

package/lib/cjs/components/Modal/Modal.js

@@ -22,9 +22,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _CloseIcon = _interopRequireDefault(require("@pingux/mdi-react/CloseIcon"));
 var _overlays = require("@react-aria/overlays");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../../hooks");
-var _modalSizes = require("../../utils/devUtils/constants/modalSizes");
 var _Box = _interopRequireDefault(require("../Box"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
@@ -70,11 +68,8 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isOpen: isOpen,
     close: onClose
   };
-  var modalRef = (0, _react.useRef)();
-  /* istanbul ignore next */
-  (0, _react.useImperativeHandle)(ref, function () {
-    return modalRef.current;
-  });
+  var modalRef = (0, _hooks.useLocalOrForwardRef)(ref);
+
   // Handle interacting outside the dialog and pressing
   // the Escape key to close the modal,
   // prevent scrolling while the modal is open, and hide content
@@ -91,7 +86,9 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     classNames = _useStatusClasses.classNames;
   return (0, _react2.jsx)(_reactAria.OverlayContainer, null, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     variant: "modal.container"
-  }, (0, _reactAria.mergeProps)(containerProps, underlayProps, others)), (0, _react2.jsx)(_reactAria.FocusScope, {
+  }, (0, _reactAria.mergeProps)(containerProps, underlayProps, others), {
+    role: "none"
+  }), (0, _react2.jsx)(_reactAria.FocusScope, {
     contain: true,
     restoreFocus: true,
     autoFocus: hasAutoFocus
@@ -100,7 +97,8 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     className: classNames
   }, propsContentProps, dialogProps, modalProps, {
     ref: modalRef,
-    "aria-modal": true
+    "aria-modal": true,
+    role: "dialog"
   }), hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : (0, _react2.jsx)(_IconButton["default"], {
     "aria-label": "Close modal window",
     "data-id": "icon-button__close-modal-window",
@@ -112,63 +110,10 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       name: 'Close Icon'
     }
   }))), title && (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({}, titleProps, {
-    variant: "variants.modal.title"
+    variant: "variants.modal.title",
+    role: "heading"
   }), title), children))));
 });
-Modal.propTypes = {
-  /** Used in tandem with `hasCloseButton` to customize how the close button is rendered. */
-  closeButton: _propTypes["default"].node,
-  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
-  id: _propTypes["default"].string,
-  /** Whether to auto focus the first focusable element in the focus scope on mount. */
-  hasAutoFocus: _propTypes["default"].bool,
-  /** Whether the modal has a visible close button. */
-  hasCloseButton: _propTypes["default"].bool,
-  /** Whether the overlay should close when focus is lost or moves outside it. */
-  isClosedOnBlur: _propTypes["default"].bool,
-  /** Whether to close the overlay when the user interacts outside it. */
-  isDismissable: _propTypes["default"].bool,
-  /** Whether pressing the escape key to close the overlay should be disabled. */
-  isKeyboardDismissDisabled: _propTypes["default"].bool,
-  /** Whether the overlay is currently open. */
-  isOpen: _propTypes["default"].bool,
-  /** The accessibility role for the dialog. */
-  role: _propTypes["default"].oneOf(['dialog', 'alertdialog']),
-  /** Sets the size of the modal container. */
-  size: _propTypes["default"].oneOf(_modalSizes.modalSizes),
-  /** The title for the modal. */
-  title: _propTypes["default"].node,
-  /**
-   * Handler that is called when the overlay should close.
-   *
-   * `() => void`
-   */
-  onClose: _propTypes["default"].func,
-  /**
-   * When a user interacts with the argument element outside of the overlay ref, return true if
-   * onClose should be called. This gives you a chance to filter out interaction with elements that
-   * should not dismiss the overlay. By default, onClose will always be called on interaction
-   * outside the overlay ref.
-   *
-   * `(element: HTMLElement) => boolean`
-   */
-  shouldCloseOnInteractOutside: _propTypes["default"].func,
-  /** Defines a string value that labels the current element. */
-  'aria-label': _propTypes["default"].string,
-  /** Identifies the element (or elements) that labels the current element. */
-  'aria-labelledby': _propTypes["default"].string,
-  /** Identifies the element (or elements) that describes the object. */
-  'aria-describedby': _propTypes["default"].string,
-  /**
-   * Identifies the element (or elements) that provide a detailed, extended description for the
-   * object.
-   */
-  'aria-details': _propTypes["default"].string,
-  /** Props object spread directly into the modal content Box. */
-  contentProps: _propTypes["default"].shape({}),
-  /** Props object spread directly into the modal container Box. */
-  containerProps: _propTypes["default"].shape({})
-};
 Modal.defaultProps = {
   role: 'dialog'
 };

package/lib/cjs/components/Modal/Modal.stories.d.ts

@@ -0,0 +1,5 @@
+import { StoryFn } from '@storybook/react';
+import { ModalProps } from '../../types';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: StoryFn<ModalProps>;

package/lib/cjs/components/Modal/Modal.stories.js

@@ -12,7 +12,7 @@ var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _hooks = require("../../hooks");
 var _index = require("../../index");
-var _figmaLinks = require("../../utils/designUtils/figmaLinks.ts");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _modalSizes = require("../../utils/devUtils/constants/modalSizes");
 var _Modal = _interopRequireDefault(require("./Modal.mdx"));
 var _react2 = require("@emotion/react");

package/lib/cjs/components/Modal/Modal.styles.d.ts

@@ -0,0 +1,77 @@
+export declare const modalCloseButton: {
+    position: string;
+    top: number;
+    right: number;
+    width: string;
+    height: string;
+};
+declare const _default: {
+    closeIcon: {
+        color: string;
+    };
+    container: {
+        position: string;
+        zIndex: number;
+        top: number;
+        left: number;
+        bottom: number;
+        right: number;
+        background: string;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+    };
+    content: {
+        position: string;
+        outline: string;
+        background: string;
+        color: string;
+        pt: string;
+        pr: string;
+        pb: string;
+        pl: string;
+        maxWidth: string;
+        boxShadow: string;
+        borderRadius: number;
+        '&.is-extra-small': {
+            maxWidth: string;
+            width: string;
+        };
+        '&.is-small': {
+            maxWidth: string;
+            width: string;
+        };
+        '&.is-medium': {
+            maxWidth: string;
+            width: string;
+        };
+        '&.is-large': {
+            maxWidth: string;
+            width: string;
+        };
+        '&.is-full': {
+            maxWidth: string;
+            width: string;
+        };
+    };
+    title: {
+        mr: string;
+        fontWeight: number;
+        fontSize: string;
+        color: string;
+        fontFamily: string;
+        display: string;
+        overflowWrap: import("../..").overflowWrap;
+        maxWidth: string;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
+    };
+    modalCloseButton: {
+        position: string;
+        top: number;
+        right: number;
+        width: string;
+        height: string;
+    };
+};
+export default _default;

package/lib/cjs/components/Modal/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Modal';

package/lib/cjs/components/Modal/tests/Modal.integration.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/cjs/components/Modal/tests/Modal.integration.test.js

@@ -22,7 +22,9 @@ var _react2 = require("@emotion/react");
     hasCloseButton: true
   }, modalProps))));
 };
-var getComposedComponent = function getComposedComponent(defaultState, modalProps) {
+var getComposedComponent = function getComposedComponent() {
+  var defaultState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var modalProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   return (0, _testWrapper.render)((0, _react2.jsx)(ComposedComponent, {
     defaultState: defaultState,
     modalProps: modalProps
@@ -33,12 +35,12 @@ test('clicking the trigger should open the modal', function () {
   expect(_testWrapper.screen.queryByRole('dialog')).not.toBeInTheDocument();
 
   // Open it with the button trigger
-  _userEvent["default"].click(_testWrapper.screen.queryByRole('button'));
+  _userEvent["default"].click(_testWrapper.screen.getByRole('button'));
   expect(_testWrapper.screen.queryByRole('dialog')).toBeInTheDocument();
 });
 test('keyboard interaction with the trigger should open the modal', function () {
   getComposedComponent();
-  var button = _testWrapper.screen.queryByRole('button');
+  var button = _testWrapper.screen.getByRole('button');
   expect(_testWrapper.screen.queryByRole('dialog')).not.toBeInTheDocument();
 
   // Open it with the button trigger
@@ -79,11 +81,11 @@ test('keyboard interactions on the close button should close the modal', functio
 });
 test('assign aria-hidden to elements outside the modal when the modal is opened', function () {
   getComposedComponent();
-  var button = _testWrapper.screen.queryByRole('button');
+  var button = _testWrapper.screen.getByRole('button');
   var buttonParent = button.closest('div');
   expect(buttonParent).not.toHaveAttribute('aria-hidden');
 
   // Open the modal
-  _userEvent["default"].click(_testWrapper.screen.queryByRole('button'));
+  _userEvent["default"].click(_testWrapper.screen.getByRole('button'));
   expect(buttonParent).toHaveAttribute('aria-hidden');
 });

package/lib/cjs/components/Modal/tests/Modal.unit.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/cjs/components/Modal/tests/Modal.unit.test.js

@@ -32,32 +32,32 @@ test('default modal', function () {
 });
 test('should spread undocumented props to the container element', function () {
   getComponent({
-    'data-prop': 'test'
+    'data-testid': 'test'
   });
-  var container = (0, _testWrapper.queryByAttribute)('data-prop', document, 'test');
+  var container = _testWrapper.screen.queryByTestId('test');
   var modal = _testWrapper.screen.getByRole('dialog');
   expect(container).toContainElement(modal);
-  expect(modal).not.toHaveAttribute('data-prop', 'test');
+  expect(modal).not.toHaveAttribute('data-testid', 'test');
 });
 test('should spread container props to the container element even if documented', function () {
   getComponent({
     containerProps: {
-      id: 'test'
+      'data-testid': 'test'
     }
   });
-  var container = (0, _testWrapper.queryByAttribute)('id', document, 'test');
+  var container = _testWrapper.screen.queryByTestId('test');
   var modal = _testWrapper.screen.getByRole('dialog');
   expect(container).toContainElement(modal);
-  expect(modal).not.toHaveAttribute('id', 'test');
+  expect(modal).not.toHaveAttribute('data-testid', 'test');
 });
 test('should spread content props to the modal dialog even if undocumented', function () {
   getComponent({
     contentProps: {
-      'data-prop': 'test'
+      'data-testid': 'test'
     }
   });
   var modal = _testWrapper.screen.getByRole('dialog');
-  expect(modal).toHaveAttribute('data-prop', 'test');
+  expect(modal).toHaveAttribute('data-testid', 'test');
 });
 test('should display title for modal', function () {
   var title = 'my title';

package/lib/cjs/types/Modal.d.ts

@@ -0,0 +1,58 @@
+import { ReactNode } from 'react';
+import { DOMAttributes } from './shared/dom';
+import { ModalSizeProps } from './shared/style';
+import { TestingAttributes } from './shared/test';
+export interface ModalProps extends DOMAttributes, TestingAttributes {
+    /** Used in tandem with `hasCloseButton` to customize how the close button is rendered. */
+    closeButton?: ReactNode;
+    /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
+    id?: string;
+    /** Whether to auto focus the first focusable element in the focus scope on mount. */
+    hasAutoFocus?: boolean;
+    /** Whether the modal has a visible close button. */
+    hasCloseButton?: boolean;
+    /** Whether the overlay should close when focus is lost or moves outside it. */
+    isClosedOnBlur?: boolean;
+    /** Whether to close the overlay when the user interacts outside it. */
+    isDismissable?: boolean;
+    /** Whether pressing the escape key to close the overlay should be disabled. */
+    isKeyboardDismissDisabled?: boolean;
+    /** Whether the overlay is currently open. */
+    isOpen?: boolean;
+    /** The accessibility role for the dialog. */
+    role?: 'dialog' | 'alertdialog';
+    /** Sets the size of the modal container. */
+    size?: ModalSizeProps;
+    /** The title for the modal. */
+    title?: ReactNode;
+    /**
+     * Handler that is called when the overlay should close.
+     *
+     * `() => void`
+     */
+    onClose?: () => void;
+    /**
+     * When a user interacts with the argument element outside of the overlay ref, return true if
+     * onClose should be called. This gives you a chance to filter out interaction with elements that
+     * should not dismiss the overlay. By default, onClose will always be called on interaction
+     * outside the overlay ref.
+     *
+     * `(element: HTMLElement) => boolean`
+     */
+    shouldCloseOnInteractOutside?: (element: Element) => boolean;
+    /** Defines a string value that labels the current element. */
+    'aria-label'?: string;
+    /** Identifies the element (or elements) that labels the current element. */
+    'aria-labelledby'?: string;
+    /** Identifies the element (or elements) that describes the object. */
+    'aria-describedby'?: string;
+    /**
+     * Identifies the element (or elements) that provide a detailed, extended description for the
+     * object.
+     */
+    'aria-details'?: string;
+    /** Props object spread directly into the modal content Box. */
+    contentProps?: object;
+    /** Props object spread directly into the modal container Box. */
+    containerProps?: object;
+}

package/lib/cjs/types/Modal.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/index.d.ts

@@ -21,6 +21,7 @@ export * from './listItem';
 export * from './loader';
 export * from './menu';
 export * from './menuItem';
+export * from './Modal';
 export * from './overlayPanel';
 export * from './popoverContainer';
 export * from './popoverMenu';

package/lib/cjs/types/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35;
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
@@ -260,8 +260,19 @@ _forEachInstanceProperty(_context23 = _Object$keys(_menuItem)).call(_context23,
     }
   });
 });
+var _Modal = require("./Modal");
+_forEachInstanceProperty(_context24 = _Object$keys(_Modal)).call(_context24, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Modal[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Modal[key];
+    }
+  });
+});
 var _overlayPanel = require("./overlayPanel");
-_forEachInstanceProperty(_context24 = _Object$keys(_overlayPanel)).call(_context24, function (key) {
+_forEachInstanceProperty(_context25 = _Object$keys(_overlayPanel)).call(_context25, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _overlayPanel[key]) return;
   _Object$defineProperty(exports, key, {
@@ -272,7 +283,7 @@ _forEachInstanceProperty(_context24 = _Object$keys(_overlayPanel)).call(_context
   });
 });
 var _popoverContainer = require("./popoverContainer");
-_forEachInstanceProperty(_context25 = _Object$keys(_popoverContainer)).call(_context25, function (key) {
+_forEachInstanceProperty(_context26 = _Object$keys(_popoverContainer)).call(_context26, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverContainer[key]) return;
   _Object$defineProperty(exports, key, {
@@ -283,7 +294,7 @@ _forEachInstanceProperty(_context25 = _Object$keys(_popoverContainer)).call(_con
   });
 });
 var _popoverMenu = require("./popoverMenu");
-_forEachInstanceProperty(_context26 = _Object$keys(_popoverMenu)).call(_context26, function (key) {
+_forEachInstanceProperty(_context27 = _Object$keys(_popoverMenu)).call(_context27, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverMenu[key]) return;
   _Object$defineProperty(exports, key, {
@@ -294,7 +305,7 @@ _forEachInstanceProperty(_context26 = _Object$keys(_popoverMenu)).call(_context2
   });
 });
 var _requirementsList = require("./requirementsList");
-_forEachInstanceProperty(_context27 = _Object$keys(_requirementsList)).call(_context27, function (key) {
+_forEachInstanceProperty(_context28 = _Object$keys(_requirementsList)).call(_context28, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _requirementsList[key]) return;
   _Object$defineProperty(exports, key, {
@@ -305,7 +316,7 @@ _forEachInstanceProperty(_context27 = _Object$keys(_requirementsList)).call(_con
   });
 });
 var _rockerButtonGroup = require("./rockerButtonGroup");
-_forEachInstanceProperty(_context28 = _Object$keys(_rockerButtonGroup)).call(_context28, function (key) {
+_forEachInstanceProperty(_context29 = _Object$keys(_rockerButtonGroup)).call(_context29, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _rockerButtonGroup[key]) return;
   _Object$defineProperty(exports, key, {
@@ -316,7 +327,7 @@ _forEachInstanceProperty(_context28 = _Object$keys(_rockerButtonGroup)).call(_co
   });
 });
 var _scrollBox = require("./scrollBox");
-_forEachInstanceProperty(_context29 = _Object$keys(_scrollBox)).call(_context29, function (key) {
+_forEachInstanceProperty(_context30 = _Object$keys(_scrollBox)).call(_context30, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _scrollBox[key]) return;
   _Object$defineProperty(exports, key, {
@@ -327,7 +338,7 @@ _forEachInstanceProperty(_context29 = _Object$keys(_scrollBox)).call(_context29,
   });
 });
 var _separator = require("./separator");
-_forEachInstanceProperty(_context30 = _Object$keys(_separator)).call(_context30, function (key) {
+_forEachInstanceProperty(_context31 = _Object$keys(_separator)).call(_context31, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _separator[key]) return;
   _Object$defineProperty(exports, key, {
@@ -338,7 +349,7 @@ _forEachInstanceProperty(_context30 = _Object$keys(_separator)).call(_context30,
   });
 });
 var _shared = require("./shared");
-_forEachInstanceProperty(_context31 = _Object$keys(_shared)).call(_context31, function (key) {
+_forEachInstanceProperty(_context32 = _Object$keys(_shared)).call(_context32, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _shared[key]) return;
   _Object$defineProperty(exports, key, {
@@ -349,7 +360,7 @@ _forEachInstanceProperty(_context31 = _Object$keys(_shared)).call(_context31, fu
   });
 });
 var _table = require("./table");
-_forEachInstanceProperty(_context32 = _Object$keys(_table)).call(_context32, function (key) {
+_forEachInstanceProperty(_context33 = _Object$keys(_table)).call(_context33, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _table[key]) return;
   _Object$defineProperty(exports, key, {
@@ -360,7 +371,7 @@ _forEachInstanceProperty(_context32 = _Object$keys(_table)).call(_context32, fun
   });
 });
 var _text = require("./text");
-_forEachInstanceProperty(_context33 = _Object$keys(_text)).call(_context33, function (key) {
+_forEachInstanceProperty(_context34 = _Object$keys(_text)).call(_context34, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _text[key]) return;
   _Object$defineProperty(exports, key, {
@@ -371,7 +382,7 @@ _forEachInstanceProperty(_context33 = _Object$keys(_text)).call(_context33, func
   });
 });
 var _tooltipTrigger = require("./tooltipTrigger");
-_forEachInstanceProperty(_context34 = _Object$keys(_tooltipTrigger)).call(_context34, function (key) {
+_forEachInstanceProperty(_context35 = _Object$keys(_tooltipTrigger)).call(_context35, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tooltipTrigger[key]) return;
   _Object$defineProperty(exports, key, {

package/lib/cjs/types/shared/style.d.ts

@@ -17,6 +17,7 @@ export type Alignment = 'start' | 'end' | 'middle';
 export type SizeAxis = 'width' | 'height';
 export type PlacementAxis = Axis | 'center';
 export type PanelSize = 'small' | 'medium' | 'large' | 'full' | 'custom';
+export type ModalSizeProps = 'extra-small' | 'small' | 'medium' | 'large' | 'full';
 type IconTShirtSize = 'xs' | 'sm' | 'md';
 type pixelSize = 'em' | 'px' | 'rem';
 export type IconSize = IconTShirtSize | number | `${number}${pixelSize}`;

package/lib/components/Modal/Modal.js

@@ -12,13 +12,11 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["className", "closeButton", "hasAutoFocus", "hasCloseButton", "id", "isClosedOnBlur", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "role", "size", "title", "onClose", "shouldCloseOnInteractOutside", "children", "contentProps", "containerProps"];
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef } from 'react';
 import { FocusScope, mergeProps, OverlayContainer, useDialog } from 'react-aria';
 import CloseIcon from '@pingux/mdi-react/CloseIcon';
 import { useModalOverlay } from '@react-aria/overlays';
-import PropTypes from 'prop-types';
-import { useStatusClasses } from '../../hooks';
-import { modalSizes } from '../../utils/devUtils/constants/modalSizes';
+import { useLocalOrForwardRef, useStatusClasses } from '../../hooks';
 import Box from '../Box';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
@@ -59,11 +57,8 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
     isOpen: isOpen,
     close: onClose
   };
-  var modalRef = useRef();
-  /* istanbul ignore next */
-  useImperativeHandle(ref, function () {
-    return modalRef.current;
-  });
+  var modalRef = useLocalOrForwardRef(ref);
+
   // Handle interacting outside the dialog and pressing
   // the Escape key to close the modal,
   // prevent scrolling while the modal is open, and hide content
@@ -80,7 +75,9 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
     classNames = _useStatusClasses.classNames;
   return ___EmotionJSX(OverlayContainer, null, ___EmotionJSX(Box, _extends({
     variant: "modal.container"
-  }, mergeProps(containerProps, underlayProps, others)), ___EmotionJSX(FocusScope, {
+  }, mergeProps(containerProps, underlayProps, others), {
+    role: "none"
+  }), ___EmotionJSX(FocusScope, {
     contain: true,
     restoreFocus: true,
     autoFocus: hasAutoFocus
@@ -89,7 +86,8 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
     className: classNames
   }, propsContentProps, dialogProps, modalProps, {
     ref: modalRef,
-    "aria-modal": true
+    "aria-modal": true,
+    role: "dialog"
   }), hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : ___EmotionJSX(IconButton, {
     "aria-label": "Close modal window",
     "data-id": "icon-button__close-modal-window",
@@ -101,63 +99,10 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
       name: 'Close Icon'
     }
   }))), title && ___EmotionJSX(Text, _extends({}, titleProps, {
-    variant: "variants.modal.title"
+    variant: "variants.modal.title",
+    role: "heading"
   }), title), children))));
 });
-Modal.propTypes = {
-  /** Used in tandem with `hasCloseButton` to customize how the close button is rendered. */
-  closeButton: PropTypes.node,
-  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
-  id: PropTypes.string,
-  /** Whether to auto focus the first focusable element in the focus scope on mount. */
-  hasAutoFocus: PropTypes.bool,
-  /** Whether the modal has a visible close button. */
-  hasCloseButton: PropTypes.bool,
-  /** Whether the overlay should close when focus is lost or moves outside it. */
-  isClosedOnBlur: PropTypes.bool,
-  /** Whether to close the overlay when the user interacts outside it. */
-  isDismissable: PropTypes.bool,
-  /** Whether pressing the escape key to close the overlay should be disabled. */
-  isKeyboardDismissDisabled: PropTypes.bool,
-  /** Whether the overlay is currently open. */
-  isOpen: PropTypes.bool,
-  /** The accessibility role for the dialog. */
-  role: PropTypes.oneOf(['dialog', 'alertdialog']),
-  /** Sets the size of the modal container. */
-  size: PropTypes.oneOf(modalSizes),
-  /** The title for the modal. */
-  title: PropTypes.node,
-  /**
-   * Handler that is called when the overlay should close.
-   *
-   * `() => void`
-   */
-  onClose: PropTypes.func,
-  /**
-   * When a user interacts with the argument element outside of the overlay ref, return true if
-   * onClose should be called. This gives you a chance to filter out interaction with elements that
-   * should not dismiss the overlay. By default, onClose will always be called on interaction
-   * outside the overlay ref.
-   *
-   * `(element: HTMLElement) => boolean`
-   */
-  shouldCloseOnInteractOutside: PropTypes.func,
-  /** Defines a string value that labels the current element. */
-  'aria-label': PropTypes.string,
-  /** Identifies the element (or elements) that labels the current element. */
-  'aria-labelledby': PropTypes.string,
-  /** Identifies the element (or elements) that describes the object. */
-  'aria-describedby': PropTypes.string,
-  /**
-   * Identifies the element (or elements) that provide a detailed, extended description for the
-   * object.
-   */
-  'aria-details': PropTypes.string,
-  /** Props object spread directly into the modal content Box. */
-  contentProps: PropTypes.shape({}),
-  /** Props object spread directly into the modal container Box. */
-  containerProps: PropTypes.shape({})
-};
 Modal.defaultProps = {
   role: 'dialog'
 };

package/lib/components/Modal/Modal.stories.js

@@ -4,7 +4,7 @@ import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { useModalState } from '../../hooks';
 import { Box, Button, Modal, OverlayProvider, Text } from '../../index';
-import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import { modalSizes } from '../../utils/devUtils/constants/modalSizes';
 import ModalReadme from './Modal.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";

package/lib/components/Modal/tests/Modal.integration.test.js

@@ -21,7 +21,9 @@ var ComposedComponent = function ComposedComponent(props) {
     hasCloseButton: true
   }, modalProps))));
 };
-var getComposedComponent = function getComposedComponent(defaultState, modalProps) {
+var getComposedComponent = function getComposedComponent() {
+  var defaultState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var modalProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   return render(___EmotionJSX(ComposedComponent, {
     defaultState: defaultState,
     modalProps: modalProps
@@ -32,12 +34,12 @@ test('clicking the trigger should open the modal', function () {
   expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
 
   // Open it with the button trigger
-  userEvent.click(screen.queryByRole('button'));
+  userEvent.click(screen.getByRole('button'));
   expect(screen.queryByRole('dialog')).toBeInTheDocument();
 });
 test('keyboard interaction with the trigger should open the modal', function () {
   getComposedComponent();
-  var button = screen.queryByRole('button');
+  var button = screen.getByRole('button');
   expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
 
   // Open it with the button trigger
@@ -78,11 +80,11 @@ test('keyboard interactions on the close button should close the modal', functio
 });
 test('assign aria-hidden to elements outside the modal when the modal is opened', function () {
   getComposedComponent();
-  var button = screen.queryByRole('button');
+  var button = screen.getByRole('button');
   var buttonParent = button.closest('div');
   expect(buttonParent).not.toHaveAttribute('aria-hidden');
 
   // Open the modal
-  userEvent.click(screen.queryByRole('button'));
+  userEvent.click(screen.getByRole('button'));
   expect(buttonParent).toHaveAttribute('aria-hidden');
 });

package/lib/components/Modal/tests/Modal.unit.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { Modal, OverlayProvider } from '../../../index';
-import { queryByAttribute, render, screen } from '../../../utils/testUtils/testWrapper';
+import { render, screen } from '../../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../../utils/testUtils/universalComponentTest';
 
 // For testing the modal alone
@@ -30,32 +30,32 @@ test('default modal', function () {
 });
 test('should spread undocumented props to the container element', function () {
   getComponent({
-    'data-prop': 'test'
+    'data-testid': 'test'
   });
-  var container = queryByAttribute('data-prop', document, 'test');
+  var container = screen.queryByTestId('test');
   var modal = screen.getByRole('dialog');
   expect(container).toContainElement(modal);
-  expect(modal).not.toHaveAttribute('data-prop', 'test');
+  expect(modal).not.toHaveAttribute('data-testid', 'test');
 });
 test('should spread container props to the container element even if documented', function () {
   getComponent({
     containerProps: {
-      id: 'test'
+      'data-testid': 'test'
     }
   });
-  var container = queryByAttribute('id', document, 'test');
+  var container = screen.queryByTestId('test');
   var modal = screen.getByRole('dialog');
   expect(container).toContainElement(modal);
-  expect(modal).not.toHaveAttribute('id', 'test');
+  expect(modal).not.toHaveAttribute('data-testid', 'test');
 });
 test('should spread content props to the modal dialog even if undocumented', function () {
   getComponent({
     contentProps: {
-      'data-prop': 'test'
+      'data-testid': 'test'
     }
   });
   var modal = screen.getByRole('dialog');
-  expect(modal).toHaveAttribute('data-prop', 'test');
+  expect(modal).toHaveAttribute('data-testid', 'test');
 });
 test('should display title for modal', function () {
   var title = 'my title';

package/lib/types/Modal.js

@@ -0,0 +1 @@
+export {};

package/lib/types/index.js

@@ -21,6 +21,7 @@ export * from './listItem';
 export * from './loader';
 export * from './menu';
 export * from './menuItem';
+export * from './Modal';
 export * from './overlayPanel';
 export * from './popoverContainer';
 export * from './popoverMenu';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.53.0-alpha.1",
+  "version": "2.53.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",