@pingux/astro 2.190.4-alpha.0 → 2.191.0-alpha.0

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

@@ -31,7 +31,7 @@ var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _Text = _interopRequireDefault(require("../Text"));
 var _ModalHeader = _interopRequireDefault(require("./ModalHeader"));
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "closeButton", "hasAutoFocus", "hasCloseButton", "id", "isClosedOnBlur", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "role", "size", "state", "title", "onClose", "shouldCloseOnInteractOutside", "children", "contentProps", "containerProps", "headerContainerProps"];
+var _excluded = ["className", "closeButton", "hasAutoFocus", "hasCloseButton", "id", "isClosedOnBlur", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "role", "size", "state", "title", "onClose", "shouldCloseOnInteractOutside", "children", "contentProps", "containerProps", "headerContainerProps", "isNotFullPage"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -55,6 +55,7 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     propsContentProps = props.contentProps,
     containerProps = props.containerProps,
     headerContainerProps = props.headerContainerProps,
+    isNotFullPage = props.isNotFullPage,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var contentProps = _objectSpread({
     id: id,
@@ -94,7 +95,7 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   // useMountTransition hook will not break, because this className gives the
   // component the styling properties that it needs.
   var isOpenNoTransition = (state === null || state === void 0 ? void 0 : state.isTransitioning) === undefined && isOpen === true;
-  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "is-".concat(size || 'custom'), size), "isOpen", isOpen), "isTransitioning", state === null || state === void 0 ? void 0 : state.isTransitioning), "isOpenNoTransition", isOpenNoTransition)),
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "is-".concat(size || 'custom'), size), "isOpen", isOpen), "isTransitioning", state === null || state === void 0 ? void 0 : state.isTransitioning), "isOpenNoTransition", isOpenNoTransition), "isNotFullPage", isNotFullPage)),
     classNames = _useStatusClasses.classNames;
   var _React$Children$toArr = _react["default"].Children.toArray(children),
     _React$Children$toArr2 = (0, _toArray2["default"])(_React$Children$toArr),

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

@@ -8,7 +8,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithPopoverMenu = exports.WithInputField = exports.WithComboBoxField = exports.LargeContentWithScroll = exports.LargeContent = exports.Default = void 0;
+exports["default"] = exports.WithPopoverMenu = exports.WithNotFullPage = exports.WithInputField = exports.WithComboBoxField = exports.LargeContentWithScroll = exports.LargeContent = exports.Default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
@@ -299,4 +299,28 @@ var WithComboBoxField = exports.WithComboBoxField = function WithComboBoxField()
       "data-id": item.name
     }, item.name);
   })))));
+};
+var WithNotFullPage = exports.WithNotFullPage = function WithNotFullPage(args) {
+  var state = (0, _hooks.useModalState)();
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
+      onPress: state.open,
+      "aria-label": "Open modal",
+      tabIndex: state.isOpen ? -1 : 0
+    }, "Open Modal"), (state.isOpen || state.isTransitioning) && (0, _react2.jsx)(_index.Modal, (0, _extends2["default"])({}, args, {
+      isOpen: state.isOpen,
+      onClose: state.close,
+      isNotFullPage: true
+    }), (0, _react2.jsx)(_index.ModalHeader, {
+      hasCloseButton: true,
+      onClose: state.close,
+      title: "Continue"
+    }), (0, _react2.jsx)(_index.ModalBody, null, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, null, "Do you want to continue with this action that you\u2018re performing?"))), (0, _react2.jsx)(_index.ModalFooter, {
+      onSubmit: state.close,
+      onCancel: state.close,
+      primaryButtonText: "Continue"
+    })))
+  );
 };

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

@@ -24,6 +24,7 @@ export declare const astroBlacklistStory: {
     Card: string[];
     ListViewItem: string[];
     MaterialSymbolIcon: string[];
+    Modal: string[];
 };
 export declare const nextGenOnlyComponents: string[];
 export declare const onyxOnlyRecipes: string[];

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

@@ -30,7 +30,8 @@ var astroBlacklistStory = exports.astroBlacklistStory = {
   Loader: ['Circular', 'Custom Circular'],
   Card: ['With Shadow'],
   ListViewItem: ['With Expandable Item'],
-  MaterialSymbolIcon: ['Default', 'Sizes', 'Commonly Used']
+  MaterialSymbolIcon: ['Default', 'Sizes', 'Commonly Used'],
+  Modal: ['With Full Page']
 };
 var nextGenOnlyComponents = exports.nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input', 'Footer', 'Onyx Input Patterns'];
 var onyxOnlyRecipes = exports.onyxOnlyRecipes = ['Vertical Onyx Stepper'];

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

@@ -3219,6 +3219,9 @@ declare const _default: {
         icons: {
             xxxl: string;
         };
+        sideNav: {
+            halfWidth: string;
+        };
     };
     badges: {
         dataTableBadge: {
@@ -5775,6 +5778,11 @@ declare const _default: {
                     width: string;
                     maxWidth: string[];
                 };
+                '&.is-not-full-page': {
+                    position: string;
+                    margin: string;
+                    left: string;
+                };
             };
             headingContainer: {
                 borderBottom: string;

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

@@ -36,5 +36,8 @@ declare const _default: {
     icons: {
         xxxl: string;
     };
+    sideNav: {
+        halfWidth: string;
+    };
 };
 export default _default;

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

@@ -6,6 +6,11 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _onyxTokens = require("@pingux/onyx-tokens");
+var sidenavWidth = 230;
+var halfSidenavWidth = sidenavWidth / 2;
+var sideNav = {
+  halfWidth: "".concat(halfSidenavWidth, "px")
+};
 var fontSizes = _onyxTokens.astroTokens["default"]['font-size'];
 var avatar = {
   sm: "".concat(_onyxTokens.astroTokens.size.avatar.sm, "px"),
@@ -50,5 +55,6 @@ var _default = exports["default"] = {
   avatarFontSize: avatarFontSize,
   container: container,
   iconBadge: iconBadge,
-  icons: icons
+  icons: icons,
+  sideNav: sideNav
 };

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

@@ -1146,6 +1146,11 @@ declare const _default: {
                 width: string;
                 maxWidth: string[];
             };
+            '&.is-not-full-page': {
+                position: string;
+                margin: string;
+                left: string;
+            };
         };
         headingContainer: {
             borderBottom: string;

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

@@ -20,6 +20,7 @@ var _onyxTokens = require("@pingux/onyx-tokens");
 var _Attachment = _interopRequireDefault(require("../../../../components/AIComponents/Attachment/Attachment.styles"));
 var _Skeleton = _interopRequireDefault(require("../../../../components/Skeleton/Skeleton.styles"));
 var _codeView = _interopRequireDefault(require("../codeView/codeView"));
+var _sizes = _interopRequireDefault(require("../sizes"));
 var _accordion = _interopRequireDefault(require("./accordion"));
 var _accordionGrid = _interopRequireDefault(require("./accordionGrid"));
 var _avatar = require("./avatar");
@@ -116,6 +117,11 @@ var modal = {
     '&.is-full': {
       width: '100%',
       maxWidth: modalSize.full
+    },
+    '&.is-not-full-page': {
+      position: 'relative',
+      margin: '4.75rem 0px',
+      left: _sizes["default"].sideNav.halfWidth // 115,
     }
   },
   headingContainer: {

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

@@ -60,6 +60,7 @@ export interface ModalProps extends DOMAttributes, TestingAttributes {
     /** Props object spread directly into the modal container Box. */
     containerProps?: object;
     headerContainerProps?: object;
+    isNotFullPage?: boolean;
 }
 export interface ModalHeaderProps extends StyleProps {
     titleProps?: object;

package/lib/components/Modal/Modal.js

@@ -10,7 +10,7 @@ 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"];
+var _excluded = ["className", "closeButton", "hasAutoFocus", "hasCloseButton", "id", "isClosedOnBlur", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "role", "size", "state", "title", "onClose", "shouldCloseOnInteractOutside", "children", "contentProps", "containerProps", "headerContainerProps", "isNotFullPage"];
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -45,6 +45,7 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
     propsContentProps = props.contentProps,
     containerProps = props.containerProps,
     headerContainerProps = props.headerContainerProps,
+    isNotFullPage = props.isNotFullPage,
     others = _objectWithoutProperties(props, _excluded);
   var contentProps = _objectSpread({
     id: id,
@@ -84,7 +85,7 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   // useMountTransition hook will not break, because this className gives the
   // component the styling properties that it needs.
   var isOpenNoTransition = (state === null || state === void 0 ? void 0 : state.isTransitioning) === undefined && isOpen === true;
-  var _useStatusClasses = useStatusClasses(className, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "is-".concat(size || 'custom'), size), "isOpen", isOpen), "isTransitioning", state === null || state === void 0 ? void 0 : state.isTransitioning), "isOpenNoTransition", isOpenNoTransition)),
+  var _useStatusClasses = useStatusClasses(className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "is-".concat(size || 'custom'), size), "isOpen", isOpen), "isTransitioning", state === null || state === void 0 ? void 0 : state.isTransitioning), "isOpenNoTransition", isOpenNoTransition), "isNotFullPage", isNotFullPage)),
     classNames = _useStatusClasses.classNames;
   var _React$Children$toArr = React.Children.toArray(children),
     _React$Children$toArr2 = _toArray(_React$Children$toArr),

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

@@ -287,4 +287,28 @@ export var WithComboBoxField = function WithComboBoxField() {
       "data-id": item.name
     }, item.name);
   })))));
+};
+export var WithNotFullPage = function WithNotFullPage(args) {
+  var state = useModalState();
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
+      onPress: state.open,
+      "aria-label": "Open modal",
+      tabIndex: state.isOpen ? -1 : 0
+    }, "Open Modal"), (state.isOpen || state.isTransitioning) && ___EmotionJSX(Modal, _extends({}, args, {
+      isOpen: state.isOpen,
+      onClose: state.close,
+      isNotFullPage: true
+    }), ___EmotionJSX(ModalHeader, {
+      hasCloseButton: true,
+      onClose: state.close,
+      title: "Continue"
+    }), ___EmotionJSX(ModalBody, null, ___EmotionJSX(Box, null, ___EmotionJSX(Text, null, "Do you want to continue with this action that you\u2018re performing?"))), ___EmotionJSX(ModalFooter, {
+      onSubmit: state.close,
+      onCancel: state.close,
+      primaryButtonText: "Continue"
+    })))
+  );
 };

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -23,7 +23,8 @@ export var astroBlacklistStory = {
   Loader: ['Circular', 'Custom Circular'],
   Card: ['With Shadow'],
   ListViewItem: ['With Expandable Item'],
-  MaterialSymbolIcon: ['Default', 'Sizes', 'Commonly Used']
+  MaterialSymbolIcon: ['Default', 'Sizes', 'Commonly Used'],
+  Modal: ['With Full Page']
 };
 export var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input', 'Footer', 'Onyx Input Patterns'];
 export var onyxOnlyRecipes = ['Vertical Onyx Stepper'];

package/lib/styles/themes/next-gen/sizes.js

@@ -1,4 +1,9 @@
 import { astroTokens } from '@pingux/onyx-tokens';
+var sidenavWidth = 230;
+var halfSidenavWidth = sidenavWidth / 2;
+var sideNav = {
+  halfWidth: "".concat(halfSidenavWidth, "px")
+};
 var fontSizes = astroTokens["default"]['font-size'];
 var avatar = {
   sm: "".concat(astroTokens.size.avatar.sm, "px"),
@@ -43,5 +48,6 @@ export default {
   avatarFontSize: avatarFontSize,
   container: container,
   iconBadge: iconBadge,
-  icons: icons
+  icons: icons,
+  sideNav: sideNav
 };

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

@@ -13,6 +13,7 @@ import { astroTokens } from '@pingux/onyx-tokens';
 import attachment from '../../../../components/AIComponents/Attachment/Attachment.styles';
 import skeleton from '../../../../components/Skeleton/Skeleton.styles';
 import codeView from '../codeView/codeView';
+import sizes from '../sizes';
 import accordion from './accordion';
 import accordionGrid from './accordionGrid';
 import { avatar } from './avatar';
@@ -106,6 +107,11 @@ var modal = {
     '&.is-full': {
       width: '100%',
       maxWidth: modalSize.full
+    },
+    '&.is-not-full-page': {
+      position: 'relative',
+      margin: '4.75rem 0px',
+      left: sizes.sideNav.halfWidth // 115,
     }
   },
   headingContainer: {

package/package.json

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