@decisiv/ui-components 2.0.1-alpha.204 → 2.0.1-alpha.205

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ModalProps } from './types';
-declare function ModalWrapper({ onClose, visible, children, ...rest }: ModalProps): JSX.Element;
+declare function ModalWrapper({ onClose, visible, children, zIndex, ...rest }: ModalProps): JSX.Element;
 declare namespace ModalWrapper {
     var propTypes: any;
     var defaultProps: {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":";AAgCA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAiIrC,iBAAS,YAAY,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,eAQxE;kBARQ,YAAY;;;;;;;;AAwBrB,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":";AAgCA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAkIrC,iBAAS,YAAY,CAAC,EACpB,OAAO,EACP,OAAO,EACP,QAAQ,EACR,MAAa,EACb,GAAG,IAAI,EACR,EAAE,UAAU,eAUZ;kBAhBQ,YAAY;;;;;;;;AAgCrB,eAAe,YAAY,CAAC"}

package/lib/components/Modal/index.js

@@ -49,6 +49,8 @@ var _ResponsiveModalWrapper = _interopRequireDefault(require("./ResponsiveModalW
 
 var _schema = _interopRequireDefault(require("./schema"));
 
+var _useStackingContext = require("../../utils/useStackingContext");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
@@ -92,7 +94,7 @@ function Modal(_ref) {
       size = _ref$size === void 0 ? 'medium' : _ref$size,
       title = _ref.title,
       _ref$zIndex = _ref.zIndex,
-      zIndex = _ref$zIndex === void 0 ? 100 : _ref$zIndex;
+      zIndex = _ref$zIndex === void 0 ? 1001 : _ref$zIndex;
 
   var breakpoints = _defineProperty({}, _breakpointObserver.sizes.LG, 650);
 
@@ -173,15 +175,20 @@ function ModalWrapper(_ref8) {
   var onClose = _ref8.onClose,
       visible = _ref8.visible,
       children = _ref8.children,
-      rest = _objectWithoutProperties(_ref8, ["onClose", "visible", "children"]);
+      _ref8$zIndex = _ref8.zIndex,
+      zIndex = _ref8$zIndex === void 0 ? 1001 : _ref8$zIndex,
+      rest = _objectWithoutProperties(_ref8, ["onClose", "visible", "children", "zIndex"]);
 
-  return _react.default.createElement(_Manager.default, {
+  return _react.default.createElement(_useStackingContext.StackingContextProvider, {
+    zIndex: zIndex
+  }, _react.default.createElement(_Manager.default, {
     onClose: onClose,
     visible: visible
   }, _react.default.createElement(Modal, _extends({
     onClose: onClose,
-    visible: visible
-  }, rest), children));
+    visible: visible,
+    zIndex: zIndex
+  }, rest), children)));
 } // @ts-ignore
 
 

package/lib/components/Modal/index.test.js

@@ -14,8 +14,14 @@ var _constants = require("./constants");
 
 var _ = _interopRequireDefault(require("."));
 
+var _Combobox = _interopRequireDefault(require("../Combobox"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -26,8 +32,24 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+// Prevent warnings about missing document methods (createRange, etc.)
+jest.mock('popper.js', function () {
+  var _class, _temp;
+
+  var PopperJS = jest.requireActual('popper.js');
+  return _temp = _class = function _class() {
+    _classCallCheck(this, _class);
+
+    return {
+      destroy: function destroy() {},
+      scheduleUpdate: function scheduleUpdate() {}
+    };
+  }, _defineProperty(_class, "placements", PopperJS.placements), _temp;
+});
 beforeAll(function () {
   var root = document.createElement('div');
   root.setAttribute('id', 'modal-root');
@@ -238,4 +260,45 @@ describe('Modal', function () {
       });
     });
   });
+  describe('with a Popover as its children', function () {
+    it('renders the Popover with the same zIndex', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var _render5, getByRole, getByLabelText, modal, combobox, modalZIndex, comboboxOptionsZIndex;
+
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _render5 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+                zIndex: 1234
+              }), _react.default.createElement(_Combobox.default, {
+                label: "Nested Combobox",
+                options: [{
+                  id: '1',
+                  value: '1',
+                  label: 'Combobox Opt 1'
+                }]
+              }))), getByRole = _render5.getByRole, getByLabelText = _render5.getByLabelText;
+              modal = getByRole('dialog');
+              combobox = getByLabelText('Nested Combobox');
+              (0, _react2.act)(function () {
+                _react2.fireEvent.click(combobox);
+              });
+              _context.next = 6;
+              return (0, _react2.wait)(function () {
+                expect(getByRole('listbox')).toBeInTheDocument();
+              });
+
+            case 6:
+              modalZIndex = window.getComputedStyle(modal).zIndex;
+              comboboxOptionsZIndex = window.getComputedStyle(getByRole('listbox')).zIndex;
+              expect(modalZIndex).toEqual(comboboxOptionsZIndex);
+
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })));
+  });
 });

package/lib/components/Popover/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAUN,MAAM,OAAO,CAAC;AAWf,OAAc,EAAE,WAAW,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,SAAS,CAAC;AAE7E,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EACL,UAAU,IAAI,cAAc,EAC5B,WAAW,IAAI,eAAe,EAE9B,SAAS,IAAI,aAAa,EAC1B,YAAY,IAAI,SAAS,EACzB,MAAM,IAAI,aAAa,EACvB,cAAc,IAAI,kBAAkB,EACpC,mBAAmB,IAAI,uBAAuB,EAE/C,MAAM,SAAS,CAAC;AAGjB,oBAAY,UAAU,GAAG,cAAc,CAAC;AACxC,oBAAY,WAAW,GAAG,eAAe,CAAC;AAC1C,oBAAY,WAAW,GAAG,eAAe,CAAC;AAC1C,oBAAY,SAAS,GAAG,aAAa,CAAC;AACtC,oBAAY,YAAY,GAAG,SAAS,CAAC;AACrC,oBAAY,MAAM,GAAG,aAAa,CAAC;AACnC,oBAAY,cAAc,GAAG,kBAAkB,CAAC;AAChD,oBAAY,mBAAmB,GAAG,uBAAuB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC;AAyQnC,QAAA,MAAM,cAAc,mFAAsB,CAAC;AAkD3C,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAUN,MAAM,OAAO,CAAC;AAWf,OAAc,EAAE,WAAW,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,SAAS,CAAC;AAE7E,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EACL,UAAU,IAAI,cAAc,EAC5B,WAAW,IAAI,eAAe,EAE9B,SAAS,IAAI,aAAa,EAC1B,YAAY,IAAI,SAAS,EACzB,MAAM,IAAI,aAAa,EACvB,cAAc,IAAI,kBAAkB,EACpC,mBAAmB,IAAI,uBAAuB,EAE/C,MAAM,SAAS,CAAC;AAIjB,oBAAY,UAAU,GAAG,cAAc,CAAC;AACxC,oBAAY,WAAW,GAAG,eAAe,CAAC;AAC1C,oBAAY,WAAW,GAAG,eAAe,CAAC;AAC1C,oBAAY,SAAS,GAAG,aAAa,CAAC;AACtC,oBAAY,YAAY,GAAG,SAAS,CAAC;AACrC,oBAAY,MAAM,GAAG,aAAa,CAAC;AACnC,oBAAY,cAAc,GAAG,kBAAkB,CAAC;AAChD,oBAAY,mBAAmB,GAAG,uBAAuB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC;AA4QnC,QAAA,MAAM,cAAc,mFAAsB,CAAC;AAkD3C,eAAe,cAAc,CAAC"}

package/lib/components/Popover/index.js

@@ -47,6 +47,8 @@ var _types = require("./types");
 
 var _utils = require("./utils");
 
+var _useStackingContext2 = _interopRequireDefault(require("../../utils/useStackingContext"));
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -106,7 +108,8 @@ var Popover = function Popover(props, instanceRef) {
       showArrow = _props$showArrow === void 0 ? true : _props$showArrow,
       target = props.target,
       visible = props.visible,
-      zIndex = props.zIndex,
+      _props$zIndex = props.zIndex,
+      zIndexProp = _props$zIndex === void 0 ? 0 : _props$zIndex,
       rest = _objectWithoutProperties(props, ["alwaysRender", "arrowColor", "borderRadius", "children", "containerSelector", "contentRole", "defaultVisible", "enabled", "hideOnClickOutside", "hideOnESC", "id", "manageEvents", "onHide", "onRequestHide", "onShow", "placement", "showArrow", "target", "visible", "zIndex"]);
 
   var contentRef = (0, _react.useRef)(null);
@@ -120,11 +123,15 @@ var Popover = function Popover(props, instanceRef) {
       setIsVisibleState = _useState2[1];
 
   var _useConfig = (0, _ConfigProvider.useConfig)(),
-      createPortal = _useConfig.createPortal; // wrapper for setting visibility state; forces a recalculation
+      createPortal = _useConfig.createPortal;
+
+  var _useStackingContext = (0, _useStackingContext2.default)(),
+      currentZIndex = _useStackingContext.currentZIndex;
+
+  var zIndex = currentZIndex + zIndexProp; // wrapper for setting visibility state; forces a recalculation
   // of the popper position (computing new offsets) each time the
   // popover window becomes visible
 
-
   var setIsVisible = (0, _react.useCallback)(function (makeItVisible) {
     setIsVisibleState(makeItVisible);
 

package/lib/utils/useStackingContext.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface StackingContextType {
+    setZIndex: (zIndex: number) => void;
+    currentZIndex: number;
+}
+export declare const StackingContextProvider: ({ zIndex, children, }: {
+    zIndex: number;
+    children: React.ReactNode;
+}) => JSX.Element;
+export default function useStackingContext(): StackingContextType;
+export {};
+//# sourceMappingURL=useStackingContext.d.ts.map

package/lib/utils/useStackingContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStackingContext.d.ts","sourceRoot":"","sources":["../../src/utils/useStackingContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAE5E,UAAU,mBAAmB;IAC3B,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,aAAa,EAAE,MAAM,CAAC;CACvB;AAWD,eAAO,MAAM,uBAAuB;;;iBAoBnC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,kBAAkB,IAAI,mBAAmB,CAQhE"}

package/lib/utils/useStackingContext.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useStackingContext;
+exports.StackingContextProvider = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+var defaultStackingContext = {
+  setZIndex: function setZIndex() {},
+  currentZIndex: 0
+};
+var StackingContext = (0, _react.createContext)(defaultStackingContext);
+
+var StackingContextProvider = function StackingContextProvider(_ref) {
+  var zIndex = _ref.zIndex,
+      children = _ref.children;
+  var zIndexRef = (0, _react.useRef)(zIndex);
+
+  var setZIndex = function setZIndex(newZIndex) {
+    zIndexRef.current = newZIndex;
+  };
+
+  return _react.default.createElement(StackingContext.Provider, {
+    value: {
+      currentZIndex: zIndexRef.current,
+      setZIndex: setZIndex
+    }
+  }, children);
+};
+
+exports.StackingContextProvider = StackingContextProvider;
+
+function useStackingContext() {
+  var context = (0, _react.useContext)(StackingContext);
+
+  if (context === undefined) {
+    return defaultStackingContext;
+  }
+
+  return context;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.204+c24f3c2",
+  "version": "2.0.1-alpha.205+071b21e",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -71,5 +71,5 @@
     "access": "public"
   },
   "private": false,
-  "gitHead": "c24f3c218b6fea48968eaca4ab40241a6d143ea0"
+  "gitHead": "071b21ea22be3164a47c3b165fac67a1d4303b83"
 }