@pingux/astro 2.149.0-alpha.2 → 2.149.1-alpha.0

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

@@ -199,7 +199,6 @@ test('should only hide the top-most overlay', function () {
 });
 test('should render a close button if hasCloseButton is true', function () {
   getComponent({
-    title: 'Lorem Ipsum',
     hasCloseButton: true
   });
   expect(_testWrapper.screen.queryByRole('button')).toBeInTheDocument();
@@ -211,7 +210,6 @@ test('should render a custom close button if hasCloseButton is true and custom b
     });
   };
   getComponent({
-    title: 'Lorem Ipsum',
     hasCloseButton: true,
     closeButton: (0, _react2.jsx)(MyButton, null)
   });
@@ -220,7 +218,6 @@ test('should render a custom close button if hasCloseButton is true and custom b
 });
 test('shouldn\'t auto focus the first tabbable element', function () {
   getComponent({
-    title: 'Lorem Ipsum',
     hasCloseButton: true
   });
   var button = _testWrapper.screen.queryByRole('button');
@@ -228,7 +225,6 @@ test('shouldn\'t auto focus the first tabbable element', function () {
 });
 test('should auto focus the first tabbable element if "hasAutoFocus" is true', function () {
   getComponent({
-    title: 'Lorem Ipsum',
     hasCloseButton: true,
     hasAutoFocus: true
   });

package/lib/cjs/index.d.ts

@@ -225,5 +225,5 @@ export { default as OnyxDarkTheme } from './styles/themeOverrides/nextGenDarkMod
 export { default as NextGenTheme } from './styles/themes/next-gen';
 export { default as OnyxTheme } from './styles/themes/next-gen';
 export * from './types';
-export { OverlayProvider, useOverlayPosition, useOverlayTrigger, } from 'react-aria';
+export { OverlayProvider, useOverlayPosition, useOverlayTrigger } from 'react-aria';
 export { Cell, Column, TableBody as DataTableBody, Cell as DataTableCell, Column as DataTableColumn, TableHeader as DataTableHeader, Row as DataTableRow, Item, Row, Section, TableBody as TBody, TableHeader as THead, useOverlayTriggerState, useTreeData, } from 'react-stately';

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/buttons.d.ts

@@ -318,29 +318,6 @@ declare const buttons: {
                 };
             };
         };
-        modalHeaderCloseButton: {
-            path: {
-                fill: string;
-            };
-            '&.is-focused': {
-                outline: string;
-                outlineColor: string;
-                outlineOffset: string;
-            };
-            '&.is-hovered': {
-                path: {
-                    fill: string;
-                };
-                backgroundColor: string;
-            };
-            '&.is-pressed': {
-                backgroundColor: string;
-                borderColor: string;
-                path: {
-                    fill: string;
-                };
-            };
-        };
         messageCloseButton: {
             '&.is-hovered': {
                 backgroundColor: string;
@@ -362,29 +339,6 @@ declare const buttons: {
             };
         };
     };
-    modalCloseButton: {
-        path: {
-            fill: string;
-        };
-        '&.is-focused': {
-            outline: string;
-            outlineColor: string;
-            outlineOffset: string;
-        };
-        '&.is-hovered': {
-            path: {
-                fill: string;
-            };
-            backgroundColor: string;
-        };
-        '&.is-pressed': {
-            backgroundColor: string;
-            borderColor: string;
-            path: {
-                fill: string;
-            };
-        };
-    };
     listBoxLink: {
         color: string;
         '&.is-pressed': {

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/buttons.js

@@ -42,7 +42,6 @@ var baseIconButton = {
   }
 };
 var hintButton = _objectSpread({}, baseIconButton);
-var modalCloseButton = _objectSpread({}, baseIconButton);
 var iconButtons = {
   base: _objectSpread({}, baseIconButton),
   inverted: _objectSpread(_objectSpread({}, baseIconButton), {}, {
@@ -86,7 +85,6 @@ var iconButtons = {
     }
   }),
   modalCloseButton: _objectSpread({}, baseIconButton),
-  modalHeaderCloseButton: _objectSpread({}, baseIconButton),
   messageCloseButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {
     '&.is-hovered': {
       backgroundColor: '#455469'
@@ -285,7 +283,6 @@ var buttons = {
     }
   },
   iconButtons: iconButtons,
-  modalCloseButton: modalCloseButton,
   listBoxLink: {
     color: 'blue-400',
     '&.is-pressed': {

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.d.ts

@@ -377,26 +377,9 @@ declare const _default: {
             bg: string;
         };
         headingContainer: {
-            borderBottom: string;
-            borderBottomColor: string;
             bg: string;
         };
-        header: {
-            borderBottom: string;
-            borderBottomColor: string;
-            bg: string;
-        };
-        body: {
-            bg: string;
-        };
-        footer: {
-            borderTop: string;
-            borderTopColor: string;
-            bg: string;
-        };
-        footerContainer: {
-            borderTop: string;
-            borderTopColor: string;
+        buttonsContainer: {
             bg: string;
         };
     };

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -54,26 +54,9 @@ var modal = {
     bg: 'background.base'
   },
   headingContainer: {
-    borderBottom: '1px solid',
-    borderBottomColor: 'border.base',
     bg: 'background.base'
   },
-  header: {
-    borderBottom: '1px solid',
-    borderBottomColor: 'border.base',
-    bg: 'background.base'
-  },
-  body: {
-    bg: 'background.base'
-  },
-  footer: {
-    borderTop: '1px solid',
-    borderTopColor: 'border.base',
-    bg: 'background.base'
-  },
-  footerContainer: {
-    borderTop: '1px solid',
-    borderTopColor: 'border.base',
+  buttonsContainer: {
     bg: 'background.base'
   }
 };

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -1296,38 +1296,9 @@ declare const _default: {
                 };
             };
             modalCloseButton: {
-                cursor: string;
-                transition: string;
-                outline: string;
-                borderRadius: string;
-                border: string;
-                borderColor: string;
-                path: {
-                    fill: string;
-                };
-                '&.is-focused': {
-                    outline: string;
-                    outlineColor: string;
-                    outlineOffset: string;
-                };
-                '&.is-hovered': {
-                    backgroundColor: string;
-                    path: {
-                        fill: string;
-                    };
-                };
-                '&.is-pressed': {
-                    backgroundColor: string;
-                    borderColor: string;
-                    path: {
-                        fill: string;
-                    };
-                };
-            };
-            modalHeaderCloseButton: {
-                top: string;
-                transform: string;
-                right: string;
+                position: string;
+                top: number;
+                right: number;
                 cursor: string;
                 transition: string;
                 outline: string;
@@ -1607,6 +1578,9 @@ declare const _default: {
             };
         };
         modalCloseButton: {
+            position: string;
+            top: number;
+            right: number;
             cursor: string;
             transition: string;
             outline: string;
@@ -4269,10 +4243,17 @@ declare const _default: {
         modal: {
             content: {
                 boxShadow: string;
+                px: string;
+                pb: string;
+                pt: number;
                 borderRadius: string;
                 opacity: number;
+                top: string;
+                transform: string;
                 transition: string;
                 m: string[];
+                maxHeight: string;
+                overflowY: string;
                 '&.is-open-no-transition': {
                     opacity: string;
                     transform: string;
@@ -4302,35 +4283,13 @@ declare const _default: {
                     maxWidth: string[];
                 };
             };
-            headingContainer: {
-                borderBottom: string;
-                borderBottomColor: string;
-                bg: string;
-                borderRadius: string;
+            container: {
+                justifyContent: string;
             };
             header: {
-                borderBottom: string;
-                borderBottomColor: string;
-                borderRadius: string;
-                px: string;
-                py: string;
-            };
-            bodyContainer: {
-                p: string;
-            };
-            body: {
-                p: string;
-            };
-            footer: {
-                borderTop: string;
-                borderTopColor: string;
-                borderRadius: string;
-                p: string;
-            };
-            footerContainer: {
-                borderTop: string;
-                borderTopColor: string;
-                borderRadius: string;
+                pt: string;
+                bg: string;
+                mb: string;
             };
         };
         navBar: {

package/lib/cjs/styles/themes/next-gen/variants/button.d.ts

@@ -1003,38 +1003,9 @@ declare const buttons: {
             };
         };
         modalCloseButton: {
-            cursor: string;
-            transition: string;
-            outline: string;
-            borderRadius: string;
-            border: string;
-            borderColor: string;
-            path: {
-                fill: string;
-            };
-            '&.is-focused': {
-                outline: string;
-                outlineColor: string;
-                outlineOffset: string;
-            };
-            '&.is-hovered': {
-                backgroundColor: string;
-                path: {
-                    fill: string;
-                };
-            };
-            '&.is-pressed': {
-                backgroundColor: string;
-                borderColor: string;
-                path: {
-                    fill: string;
-                };
-            };
-        };
-        modalHeaderCloseButton: {
-            top: string;
-            transform: string;
-            right: string;
+            position: string;
+            top: number;
+            right: number;
             cursor: string;
             transition: string;
             outline: string;
@@ -1314,6 +1285,9 @@ declare const buttons: {
         };
     };
     modalCloseButton: {
+        position: string;
+        top: number;
+        right: number;
         cursor: string;
         transition: string;
         outline: string;

package/lib/cjs/styles/themes/next-gen/variants/button.js

@@ -356,7 +356,11 @@ var baseIconButton = {
     }
   }
 };
-var modalCloseButton = _objectSpread({}, baseIconButton);
+var modalCloseButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
+  position: 'absolute',
+  top: 32,
+  right: 18
+});
 var onyxIconButton = _objectSpread(_objectSpread(_objectSpread({}, baseIconButton), secondary), {}, {
   path: {
     fill: 'blue'
@@ -447,11 +451,6 @@ var iconButtons = {
     display: 'inline-flex'
   }),
   modalCloseButton: modalCloseButton,
-  modalHeaderCloseButton: _objectSpread(_objectSpread({}, modalCloseButton), {}, {
-    top: '50%',
-    transform: 'translateY(-50%)',
-    right: '16px'
-  }),
   badge: {
     deleteButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {
       borderRadius: '50%',

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -749,10 +749,17 @@ declare const _default: {
     modal: {
         content: {
             boxShadow: string;
+            px: string;
+            pb: string;
+            pt: number;
             borderRadius: string;
             opacity: number;
+            top: string;
+            transform: string;
             transition: string;
             m: string[];
+            maxHeight: string;
+            overflowY: string;
             '&.is-open-no-transition': {
                 opacity: string;
                 transform: string;
@@ -782,35 +789,13 @@ declare const _default: {
                 maxWidth: string[];
             };
         };
-        headingContainer: {
-            borderBottom: string;
-            borderBottomColor: string;
-            bg: string;
-            borderRadius: string;
+        container: {
+            justifyContent: string;
         };
         header: {
-            borderBottom: string;
-            borderBottomColor: string;
-            borderRadius: string;
-            px: string;
-            py: string;
-        };
-        bodyContainer: {
-            p: string;
-        };
-        body: {
-            p: string;
-        };
-        footer: {
-            borderTop: string;
-            borderTopColor: string;
-            borderRadius: string;
-            p: string;
-        };
-        footerContainer: {
-            borderTop: string;
-            borderTopColor: string;
-            borderRadius: string;
+            pt: string;
+            bg: string;
+            mb: string;
         };
     };
     navBar: {

package/lib/cjs/styles/themes/next-gen/variants/variants.js

@@ -83,10 +83,17 @@ var modalSize = {
 var modal = {
   content: {
     boxShadow: '0px 8px 16px 0px rgba(0, 0, 0, 0.5)',
-    borderRadius: '1em',
+    px: 'lg',
+    pb: 'lg',
+    pt: 0,
+    borderRadius: '4px',
     opacity: 0,
+    top: '0',
+    transform: 'translate(0, -50px)',
     transition: 'opacity 300ms ease, transform 500ms ease-out',
     m: ['sm', 'sm', '1.75rem auto'],
+    maxHeight: 'calc(100vh - 3.5rem)',
+    overflowY: 'auto',
     '&.is-open-no-transition': {
       opacity: '100%',
       transform: 'none'
@@ -116,35 +123,13 @@ var modal = {
       maxWidth: modalSize.full
     }
   },
-  headingContainer: {
-    borderBottom: '1px solid',
-    borderBottomColor: 'gray-200',
-    bg: 'background.base',
-    borderRadius: '1em 1em 0px 0px'
+  container: {
+    justifyContent: 'start'
   },
   header: {
-    borderBottom: '1px solid',
-    borderBottomColor: 'gray-200',
-    borderRadius: '1em 1em 0px 0px',
-    px: 'lg',
-    py: 'md'
-  },
-  bodyContainer: {
-    p: 'lg'
-  },
-  body: {
-    p: 'lg'
-  },
-  footer: {
-    borderTop: '1px solid',
-    borderTopColor: 'gray-200',
-    borderRadius: '0px 0px 1em 1em',
-    p: 'lg'
-  },
-  footerContainer: {
-    borderTop: '1px solid',
-    borderTopColor: 'gray-200',
-    borderRadius: '0px 0px 1em 1em'
+    pt: 'lg',
+    bg: 'background.base',
+    mb: 'lg'
   }
 };
 var listBox = {

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

@@ -33,8 +33,6 @@ export interface ModalProps extends DOMAttributes, TestingAttributes {
      * `() => void`
      */
     onClose?: () => void;
-    onSubmit?: () => void;
-    onCancel?: () => 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
@@ -61,20 +59,3 @@ export interface ModalProps extends DOMAttributes, TestingAttributes {
     containerProps?: object;
     headerContainerProps?: object;
 }
-export type ModalHeaderProps = {
-    titleProps?: object;
-    containerProps?: object;
-    closeButton?: ReactNode;
-    hasCloseButton?: boolean;
-    onClose?: () => void;
-    title?: ReactNode;
-    hasNoSeparator?: boolean;
-};
-export type ModalFooterProps = {
-    onSubmit?: () => void;
-    onCancel?: () => void;
-    children?: ReactNode;
-    footerProps?: object;
-    primaryButtonText?: string;
-    secondaryButtonText?: string;
-};

package/lib/components/IconButton/IconButton.styles.js

@@ -17,7 +17,7 @@ import { copyButton } from '../CopyText/CopyText.styles';
 import { containedIcon } from '../DatePicker/DatePicker.styles';
 import { hintButton } from '../HelpHint/HelpHint.styles';
 import { messageCloseButton } from '../Messages/Message.styles';
-import { closeButton, modalCloseButton } from '../Modal/Modal.styles';
+import { modalCloseButton } from '../Modal/Modal.styles';
 import { button } from '../TooltipTrigger/Tooltip.styles';
 export var base = {
   justifyContent: 'center',
@@ -43,7 +43,7 @@ export var base = {
     boxShadow: 'standard'
   },
   '&.is-pressed': {
-    path: {
+    'path': {
       fill: 'white'
     },
     bg: 'active',
@@ -71,7 +71,7 @@ var bidirectional = {
 var inverted = _objectSpread(_objectSpread({}, base), {}, {
   bg: 'active',
   borderColor: 'active',
-  path: {
+  'path': {
     fill: 'white'
   },
   '&.is-hovered': {
@@ -108,29 +108,29 @@ var applicationPortal = _objectSpread(_objectSpread({}, base), {}, {
   background: 'transparent',
   '&.is-focused': _objectSpread({}, defaultFocus),
   '&.is-hovered': {
-    path: {
+    'path': {
       fill: 'active'
     }
   },
   '&.is-pressed': {
-    path: {
+    'path': {
       fill: 'active'
     }
   }
 });
 var applicationPortalPinned = _objectSpread(_objectSpread({}, base), {}, {
-  path: {
+  'path': {
     fill: 'success.bright'
   },
   background: 'transparent',
   '&.is-focused': _objectSpread({}, defaultFocus),
   '&.is-hovered': {
-    path: {
+    'path': {
       fill: 'active'
     }
   },
   '&.is-pressed': {
-    path: {
+    'path': {
       fill: 'active'
     }
   }
@@ -187,7 +187,6 @@ export default {
   inverted: inverted,
   messageCloseButton: _objectSpread(_objectSpread({}, base), messageCloseButton),
   modalCloseButton: _objectSpread(_objectSpread({}, base), modalCloseButton),
-  modalHeaderCloseButton: _objectSpread(_objectSpread({}, base), closeButton),
   invertedBadgeDeleteButton: invertedBadgeDeleteButton,
   invertedSquare: invertedSquare,
   square: square,

package/lib/components/Modal/Modal.js

@@ -7,11 +7,9 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _toArray from "@babel/runtime-corejs3/helpers/esm/toArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "closeButton", "hasAutoFocus", "hasCloseButton", "id", "isClosedOnBlur", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "role", "size", "state", "title", "onClose", "shouldCloseOnInteractOutside", "children", "contentProps", "containerProps", "headerContainerProps"];
-import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 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 } from 'react';
@@ -23,7 +21,6 @@ import Box from '../Box';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
 import Text from '../Text';
-import ModalHeader from './ModalHeader';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useStatusClasses2;
@@ -87,12 +84,7 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   var isOpenNoTransition = (state === null || state === void 0 ? void 0 : state.isTransitioning) === undefined && isOpen === true;
   var _useStatusClasses = useStatusClasses(className, (_useStatusClasses2 = {}, _defineProperty(_useStatusClasses2, "is-".concat(size || 'custom'), size), _defineProperty(_useStatusClasses2, "isOpen", isOpen), _defineProperty(_useStatusClasses2, "isTransitioning", state === null || state === void 0 ? void 0 : state.isTransitioning), _defineProperty(_useStatusClasses2, "isOpenNoTransition", isOpenNoTransition), _useStatusClasses2)),
     classNames = _useStatusClasses.classNames;
-  var _React$Children$toArr = React.Children.toArray(children),
-    _React$Children$toArr2 = _toArray(_React$Children$toArr),
-    header = _React$Children$toArr2[0],
-    siblings = _sliceInstanceProperty(_React$Children$toArr2).call(_React$Children$toArr2, 1);
-  var hasHeaderContent = /*#__PURE__*/React.isValidElement(header) && header.type === ModalHeader;
-  var titleContent = !hasHeaderContent && title && (isOnyx ? ___EmotionJSX(Box, {
+  var titleContent = title && (isOnyx ? ___EmotionJSX(Box, {
     variant: "modal.header"
   }, ___EmotionJSX(Text, _extends({}, titleProps, {
     variant: "modalTitle",
@@ -115,7 +107,7 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   }, propsContentProps, dialogProps, modalProps, {
     ref: modalRef,
     "aria-modal": true
-  }), titleContent && ___EmotionJSX(Box, _extends({
+  }), ___EmotionJSX(Box, _extends({
     variant: "modal.headingContainer"
   }, headerContainerProps), hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : ___EmotionJSX(IconButton, {
     "aria-label": "Close modal window",
@@ -127,9 +119,8 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
     title: {
       name: 'Close Icon'
     }
-  }))), titleContent), isOnyx ? children : ___EmotionJSX(Box, {
-    pt: "md",
-    px: "lg"
+  }))), titleContent), ___EmotionJSX(Box, {
+    pt: "md"
   }, children)))));
 });
 Modal.defaultProps = {