@pingux/astro 2.24.1-alpha.0 → 2.25.0-alpha.1

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

@@ -8,7 +8,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Expandable = exports.Default = exports.CustomWidth = void 0;
+exports["default"] = exports.InnerPanel = exports.Expandable = exports.Default = exports.CustomWidth = void 0;
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
@@ -389,4 +389,106 @@ var Expandable = function Expandable() {
     }, schemaTabContent))), footer))
   );
 };
-exports.Expandable = Expandable;
+exports.Expandable = Expandable;
+var InnerPanel = function InnerPanel(_ref3) {
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref3), _ref3));
+  var _useOverlayPanelState4 = (0, _hooks.useOverlayPanelState)(),
+    state = _useOverlayPanelState4.state,
+    onClose = _useOverlayPanelState4.onClose;
+  var _useOverlayPanelState5 = (0, _hooks.useOverlayPanelState)(),
+    innerState = _useOverlayPanelState5.state,
+    onCloseInner = _useOverlayPanelState5.onClose;
+  var outerTriggerRef = (0, _react.useRef)();
+  var innerTriggerRef = (0, _react.useRef)();
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    messagesOpen = _useState6[0],
+    setMessagesOpen = _useState6[1];
+  var toggleMessagesOpen = function toggleMessagesOpen() {
+    setMessagesOpen(!messagesOpen);
+  };
+  var closeOuterPanel = function closeOuterPanel() {
+    if (innerState.isOpen) {
+      innerState.close();
+    }
+    onClose(state, outerTriggerRef);
+  };
+  var closeInnerPanel = function closeInnerPanel() {
+    onCloseInner(innerState, innerTriggerRef);
+  };
+  var inner = innerState.isOpen && (0, _react2.jsx)(_index.OverlayPanel, (0, _extends2["default"])({
+    variant: "overlayPanel.innerPanel" // applies higher z-index
+    ,
+    isOpen: innerState.isOpen
+  }, args, {
+    state: innerState,
+    triggerRef: innerTriggerRef
+  }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
+    onPress: closeInnerPanel
+  }, "Close Inner Panel"), (0, _react2.jsx)(_index.Text, {
+    pt: "md"
+  }, "Children render here.")));
+  var items = [{
+    id: 1,
+    name: 'Form 1'
+  }, {
+    id: 2,
+    name: 'Form 2'
+  }];
+  var outer =
+  // should have higher z-index applied
+  (state.isOpen || state.isTransitioning) && (0, _react2.jsx)(_index.OverlayPanel, (0, _extends2["default"])({
+    isOpen: state.isOpen,
+    isTransitioning: state.isTransitioning,
+    sx: {
+      p: '0px'
+    }
+  }, args, {
+    state: state,
+    triggerRef: outerTriggerRef
+  }), (0, _react2.jsx)(_index.Box, {
+    sx: {
+      p: '12px'
+    }
+  }, (0, _react2.jsx)(_index.Button, {
+    onPress: closeOuterPanel,
+    "aria-expanded": state.isOpen
+  }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
+    pt: "md",
+    mb: "24px"
+  }, "Children render here."), (0, _react2.jsx)(_index.ListView, {
+    items: items
+  }, function (item) {
+    return (0, _react2.jsx)(_reactStately.Item, {
+      key: item.id
+    }, (0, _react2.jsx)(_index.ListViewItem, {
+      data: {
+        text: item.name
+      }
+    }));
+  }), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
+    onPress: toggleMessagesOpen
+  }, "Toggle Messages"), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
+    ref: innerTriggerRef,
+    onPress: innerState.open,
+    "aria-expanded": innerState.isOpen
+  }, "Open Inner Panel"), inner));
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
+      ref: outerTriggerRef,
+      onPress: state.open,
+      "aria-expanded": state.isOpen
+    }, "Open Panel"), outer), messagesOpen && (0, _react2.jsx)(_index.Messages, {
+      sx: {
+        zIndex: 11
+      },
+      onClose: toggleMessagesOpen
+    }, (0, _react2.jsx)(_reactStately.Item, {
+      key: "message2",
+      status: "success"
+    }, "Z Index higher than inner pannel")))
+  );
+};
+exports.InnerPanel = InnerPanel;

package/lib/components/OverlayPanel/OverlayPanel.stories.js

@@ -11,7 +11,7 @@ import CloseIcon from '@pingux/mdi-react/CloseIcon';
 import CogIcon from '@pingux/mdi-react/CogIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { useOverlayPanelState } from '../../hooks';
-import { Avatar, Box, Breadcrumbs, Button, ColorField, IconButton, MultivaluesField, OverlayPanel, OverlayProvider, SwitchField, Tab, Tabs, Text, TextField } from '../../index';
+import { Avatar, Box, Breadcrumbs, Button, ColorField, IconButton, ListView, ListViewItem, Messages, MultivaluesField, OverlayPanel, OverlayProvider, SwitchField, Tab, Tabs, Text, TextField } from '../../index';
 import { pingImg } from '../../utils/devUtils/constants/images';
 import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
 import OverlayPanelReadme from './OverlayPanel.mdx';
@@ -372,4 +372,105 @@ export var Expandable = function Expandable() {
       title: "Schema"
     }, schemaTabContent))), footer))
   );
+};
+export var InnerPanel = function InnerPanel(_ref3) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
+  var _useOverlayPanelState4 = useOverlayPanelState(),
+    state = _useOverlayPanelState4.state,
+    onClose = _useOverlayPanelState4.onClose;
+  var _useOverlayPanelState5 = useOverlayPanelState(),
+    innerState = _useOverlayPanelState5.state,
+    onCloseInner = _useOverlayPanelState5.onClose;
+  var outerTriggerRef = useRef();
+  var innerTriggerRef = useRef();
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    messagesOpen = _useState6[0],
+    setMessagesOpen = _useState6[1];
+  var toggleMessagesOpen = function toggleMessagesOpen() {
+    setMessagesOpen(!messagesOpen);
+  };
+  var closeOuterPanel = function closeOuterPanel() {
+    if (innerState.isOpen) {
+      innerState.close();
+    }
+    onClose(state, outerTriggerRef);
+  };
+  var closeInnerPanel = function closeInnerPanel() {
+    onCloseInner(innerState, innerTriggerRef);
+  };
+  var inner = innerState.isOpen && ___EmotionJSX(OverlayPanel, _extends({
+    variant: "overlayPanel.innerPanel" // applies higher z-index
+    ,
+    isOpen: innerState.isOpen
+  }, args, {
+    state: innerState,
+    triggerRef: innerTriggerRef
+  }), ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
+    onPress: closeInnerPanel
+  }, "Close Inner Panel"), ___EmotionJSX(Text, {
+    pt: "md"
+  }, "Children render here.")));
+  var items = [{
+    id: 1,
+    name: 'Form 1'
+  }, {
+    id: 2,
+    name: 'Form 2'
+  }];
+  var outer =
+  // should have higher z-index applied
+  (state.isOpen || state.isTransitioning) && ___EmotionJSX(OverlayPanel, _extends({
+    isOpen: state.isOpen,
+    isTransitioning: state.isTransitioning,
+    sx: {
+      p: '0px'
+    }
+  }, args, {
+    state: state,
+    triggerRef: outerTriggerRef
+  }), ___EmotionJSX(Box, {
+    sx: {
+      p: '12px'
+    }
+  }, ___EmotionJSX(Button, {
+    onPress: closeOuterPanel,
+    "aria-expanded": state.isOpen
+  }, "Close Panel"), ___EmotionJSX(Text, {
+    pt: "md",
+    mb: "24px"
+  }, "Children render here."), ___EmotionJSX(ListView, {
+    items: items
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.id
+    }, ___EmotionJSX(ListViewItem, {
+      data: {
+        text: item.name
+      }
+    }));
+  }), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
+    onPress: toggleMessagesOpen
+  }, "Toggle Messages"), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
+    ref: innerTriggerRef,
+    onPress: innerState.open,
+    "aria-expanded": innerState.isOpen
+  }, "Open Inner Panel"), inner));
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    ___EmotionJSX(React.Fragment, null, ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
+      ref: outerTriggerRef,
+      onPress: state.open,
+      "aria-expanded": state.isOpen
+    }, "Open Panel"), outer), messagesOpen && ___EmotionJSX(Messages, {
+      sx: {
+        zIndex: 11
+      },
+      onClose: toggleMessagesOpen
+    }, ___EmotionJSX(Item, {
+      key: "message2",
+      status: "success"
+    }, "Z Index higher than inner pannel")))
+  );
 };

package/package.json

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