@vitrosoftware/common-ui-ts 1.0.9 → 1.1.11

package/dist/index.js

@@ -215,6 +215,10 @@ var TopLevelMenu = function TopLevelMenu(props) {
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
+function unwrapExports (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
 function createCommonjsModule(fn, module) {
 	return module = { exports: {} }, fn(module, module.exports), module.exports;
 }
@@ -19971,8 +19975,8 @@ var JsTreeViewContextImpl = /*#__PURE__*/function () {
     this.deselectAll();
     this.jsTree.jstree(METHOD.SELECT_NODE, node);
   };
-  _proto.openNode = function openNode(node) {
-    this.jsTree.jstree(METHOD.OPEN_NODE, node);
+  _proto.openNode = function openNode(node, callback, durationMs) {
+    this.jsTree.jstree(METHOD.OPEN_NODE, node, callback, durationMs);
   };
   _proto.editNode = function editNode() {
     var selected = this.getSelected();
@@ -20034,6 +20038,20 @@ function _createClass(Constructor, protoProps, staticProps) {
   });
   return Constructor;
 }
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -20219,6 +20237,36 @@ var TreeGridTableViewContextImpl = /*#__PURE__*/function () {
   _proto.isVisibleGantt = function isVisibleGantt() {
     return this.grid.Cols.gantt.Visible;
   };
+  _proto.setAttribute = function setAttribute(row, col, attribute, value, refresh, undo) {
+    this.grid.SetAttribute(row, col, attribute, value, refresh, undo);
+  };
+  _proto.getRows = function getRows() {
+    return this.grid.Rows;
+  };
+  _proto.getMainTag = function getMainTag() {
+    return this.grid.MainTag;
+  };
+  _proto.focusCell = function focusCell(row, col) {
+    this.grid.Focus(row, col);
+  };
+  _proto.getType = function getType(row, col) {
+    return this.grid.GetType(row, col);
+  };
+  _proto.setStringEdit = function setStringEdit(row, col, value, timeout) {
+    this.grid.SetStringEdit(row, col, value, timeout);
+  };
+  _proto.getValue = function getValue(row, col) {
+    return this.grid.GetValue(row, col);
+  };
+  _proto.getFocusedCols = function getFocusedCols() {
+    return this.grid.GetFocusedCols();
+  };
+  _proto.getFocusedRows = function getFocusedRows() {
+    return this.grid.GetFocusedRows();
+  };
+  _proto.getFilter = function getFilter(spec) {
+    return this.grid.GetFilter(spec);
+  };
   _createClass(TreeGridTableViewContextImpl, [{
     key: "columnList",
     get: function get() {
@@ -20934,6 +20982,21 @@ var classnames = createCommonjsModule(function (module) {
 }());
 });
 
+function _extends$1() {
+  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$1.apply(this, arguments);
+}
+
 function _objectWithoutPropertiesLoose$1(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -20947,6 +21010,14 @@ function _objectWithoutPropertiesLoose$1(source, excluded) {
   return target;
 }
 
+function defaultKey(key) {
+  return 'default' + key.charAt(0).toUpperCase() + key.substr(1);
+}
+
+function _toPropertyKey$1(arg) { var key = _toPrimitive$1(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+
+function _toPrimitive$1(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+
 function useUncontrolledProp(propValue, defaultValue, handler) {
   var wasPropRef = React.useRef(propValue !== undefined);
 
@@ -20975,6 +21046,24 @@ function useUncontrolledProp(propValue, defaultValue, handler) {
     setState(value);
   }, [handler])];
 }
+function useUncontrolled(props, config) {
+  return Object.keys(config).reduce(function (result, fieldName) {
+    var _extends2;
+
+    var _ref = result,
+        defaultValue = _ref[defaultKey(fieldName)],
+        propsValue = _ref[fieldName],
+        rest = _objectWithoutPropertiesLoose$1(_ref, [defaultKey(fieldName), fieldName].map(_toPropertyKey$1));
+
+    var handlerName = config[fieldName];
+
+    var _useUncontrolledProp = useUncontrolledProp(propsValue, defaultValue, props[handlerName]),
+        value = _useUncontrolledProp[0],
+        handler = _useUncontrolledProp[1];
+
+    return _extends$1({}, rest, (_extends2 = {}, _extends2[fieldName] = value, _extends2[handlerName] = handler, _extends2));
+  }, props);
+}
 
 function _setPrototypeOf(o, p) {
   _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
@@ -54011,6 +54100,129 @@ var isDOM = typeof document !== 'undefined';
 
 var useIsomorphicEffect = isDOM || isReactNative ? React.useLayoutEffect : React.useEffect;
 
+const _excluded = ["as", "disabled"];
+function _objectWithoutPropertiesLoose$2(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; }
+function isTrivialHref(href) {
+  return !href || href.trim() === '#';
+}
+function useButtonProps({
+  tagName,
+  disabled,
+  href,
+  target,
+  rel,
+  role,
+  onClick,
+  tabIndex = 0,
+  type
+}) {
+  if (!tagName) {
+    if (href != null || target != null || rel != null) {
+      tagName = 'a';
+    } else {
+      tagName = 'button';
+    }
+  }
+  const meta = {
+    tagName
+  };
+  if (tagName === 'button') {
+    return [{
+      type: type || 'button',
+      disabled
+    }, meta];
+  }
+  const handleClick = event => {
+    if (disabled || tagName === 'a' && isTrivialHref(href)) {
+      event.preventDefault();
+    }
+    if (disabled) {
+      event.stopPropagation();
+      return;
+    }
+    onClick == null ? void 0 : onClick(event);
+  };
+  const handleKeyDown = event => {
+    if (event.key === ' ') {
+      event.preventDefault();
+      handleClick(event);
+    }
+  };
+  if (tagName === 'a') {
+    // Ensure there's a href so Enter can trigger anchor button.
+    href || (href = '#');
+    if (disabled) {
+      href = undefined;
+    }
+  }
+  return [{
+    role: role != null ? role : 'button',
+    // explicitly undefined so that it overrides the props disabled in a spread
+    // e.g. <Tag {...props} {...hookProps} />
+    disabled: undefined,
+    tabIndex: disabled ? undefined : tabIndex,
+    href,
+    target: tagName === 'a' ? target : undefined,
+    'aria-disabled': !disabled ? undefined : disabled,
+    rel: tagName === 'a' ? rel : undefined,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown
+  }, meta];
+}
+const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      as: asProp,
+      disabled
+    } = _ref,
+    props = _objectWithoutPropertiesLoose$2(_ref, _excluded);
+  const [buttonProps, {
+    tagName: Component
+  }] = useButtonProps(Object.assign({
+    tagName: asProp,
+    disabled
+  }, props));
+  return /*#__PURE__*/jsxRuntime.jsx(Component, Object.assign({}, props, buttonProps, {
+    ref: ref
+  }));
+});
+Button.displayName = 'Button';
+
+const _excluded$1 = ["onKeyDown"];
+function _objectWithoutPropertiesLoose$3(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; }
+function isTrivialHref$1(href) {
+  return !href || href.trim() === '#';
+}
+/**
+ * An generic `<a>` component that covers a few A11y cases, ensuring that
+ * cases where the `href` is missing or trivial like "#" are treated like buttons.
+ */
+const Anchor = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      onKeyDown
+    } = _ref,
+    props = _objectWithoutPropertiesLoose$3(_ref, _excluded$1);
+  const [buttonProps] = useButtonProps(Object.assign({
+    tagName: 'a'
+  }, props));
+  const handleKeyDown = useEventCallback(e => {
+    buttonProps.onKeyDown(e);
+    onKeyDown == null ? void 0 : onKeyDown(e);
+  });
+  if (isTrivialHref$1(props.href) || props.role === 'button') {
+    return /*#__PURE__*/jsxRuntime.jsx("a", Object.assign({
+      ref: ref
+    }, props, buttonProps, {
+      onKeyDown: handleKeyDown
+    }));
+  }
+  return /*#__PURE__*/jsxRuntime.jsx("a", Object.assign({
+    ref: ref
+  }, props, {
+    onKeyDown: onKeyDown
+  }));
+});
+Anchor.displayName = 'Anchor';
+
 const fadeStyles = {
   [ENTERING]: 'show',
   [ENTERED]: 'show'
@@ -54082,6 +54294,9 @@ function createWithBsPrefix(prefix, {
   return BsComponent;
 }
 
+const context = /*#__PURE__*/React.createContext(null);
+context.displayName = 'CardHeaderContext';
+
 /**
  * Returns a ref that is immediately updated with the new value
  *
@@ -54183,6 +54398,46 @@ function useTimeout() {
   }, []);
 }
 
+var toArray = Function.prototype.bind.call(Function.prototype.call, [].slice);
+/**
+ * Runs `querySelectorAll` on a given element.
+ * 
+ * @param element the element
+ * @param selector the selector
+ */
+
+function qsa(element, selector) {
+  return toArray(element.querySelectorAll(selector));
+}
+
+/**
+ * Returns a function that triggers a component update. the hook equivalent to
+ * `this.forceUpdate()` in a class component. In most cases using a state value directly
+ * is preferable but may be required in some advanced usages of refs for interop or
+ * when direct DOM manipulation is required.
+ *
+ * ```ts
+ * const forceUpdate = useForceUpdate();
+ *
+ * const updateOnClick = useCallback(() => {
+ *  forceUpdate()
+ * }, [forceUpdate])
+ *
+ * return <button type="button" onClick={updateOnClick}>Hi there</button>
+ * ```
+ */
+
+function useForceUpdate() {
+  // The toggling state value is designed to defeat React optimizations for skipping
+  // updates when they are stricting equal to the last state value
+  var _useReducer = React.useReducer(function (state) {
+    return !state;
+  }, false),
+      dispatch = _useReducer[1];
+
+  return dispatch;
+}
+
 var has$2 = Object.prototype.hasOwnProperty;
 
 function find(iter, tar, key) {
@@ -54643,17 +54898,7 @@ function effect(_ref2) {
     }
   }
 
-  if (process.env.NODE_ENV !== "production") {
-    if (!isHTMLElement(arrowElement)) {
-      console.error(['Popper: "arrow" element must be an HTMLElement (not an SVGElement).', 'To use an SVG arrow, wrap it in an HTMLElement that will be used as', 'the arrow.'].join(' '));
-    }
-  }
-
   if (!contains(state.elements.popper, arrowElement)) {
-    if (process.env.NODE_ENV !== "production") {
-      console.error(['Popper: "arrow" modifier\'s `element` must be a child of the popper', 'element.'].join(' '));
-    }
-
     return;
   }
 
@@ -54795,17 +55040,6 @@ function computeStyles(_ref5) {
       adaptive = _options$adaptive === void 0 ? true : _options$adaptive,
       _options$roundOffsets = options.roundOffsets,
       roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
-
-  if (process.env.NODE_ENV !== "production") {
-    var transitionProperty = getComputedStyle$1(state.elements.popper).transitionProperty || '';
-
-    if (adaptive && ['transform', 'top', 'right', 'bottom', 'left'].some(function (property) {
-      return transitionProperty.indexOf(property) >= 0;
-    })) {
-      console.warn(['Popper: Detected CSS transitions on at least one of the following', 'CSS properties: "transform", "top", "right", "bottom", "left".', '\n\n', 'Disable the "computeStyles" modifier\'s `adaptive` option to allow', 'for smooth transitions, or remove these properties from the CSS', 'transition declaration on the popper element if only transitioning', 'opacity or background-color for example.', '\n\n', 'We recommend using the popper element as a wrapper around an inner', 'element that can have any CSS property transitioned for animations.'].join(' '));
-    }
-  }
-
   var commonStyles = {
     placement: getBasePlacement(state.placement),
     variation: getVariation(state.placement),
@@ -55246,10 +55480,6 @@ function computeAutoPlacement(state, options) {
 
   if (allowedPlacements.length === 0) {
     allowedPlacements = placements$1;
-
-    if (process.env.NODE_ENV !== "production") {
-      console.error(['Popper: The `allowedAutoPlacements` option did not allow any', 'placements. Ensure the `placement` option matches the variation', 'of the allowed placements.', 'For example, "auto" cannot be used to allow "bottom-start".', 'Use "auto-start" instead.'].join(' '));
-    }
   } // $FlowFixMe[incompatible-type]: Flow seems to have problems with two array unions...
 
 
@@ -55801,108 +56031,6 @@ function debounce(fn) {
   };
 }
 
-function format(str) {
-  for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    args[_key - 1] = arguments[_key];
-  }
-
-  return [].concat(args).reduce(function (p, c) {
-    return p.replace(/%s/, c);
-  }, str);
-}
-
-var INVALID_MODIFIER_ERROR = 'Popper: modifier "%s" provided an invalid %s property, expected %s but got %s';
-var MISSING_DEPENDENCY_ERROR = 'Popper: modifier "%s" requires "%s", but "%s" modifier is not available';
-var VALID_PROPERTIES = ['name', 'enabled', 'phase', 'fn', 'effect', 'requires', 'options'];
-function validateModifiers(modifiers) {
-  modifiers.forEach(function (modifier) {
-    [].concat(Object.keys(modifier), VALID_PROPERTIES) // IE11-compatible replacement for `new Set(iterable)`
-    .filter(function (value, index, self) {
-      return self.indexOf(value) === index;
-    }).forEach(function (key) {
-      switch (key) {
-        case 'name':
-          if (typeof modifier.name !== 'string') {
-            console.error(format(INVALID_MODIFIER_ERROR, String(modifier.name), '"name"', '"string"', "\"" + String(modifier.name) + "\""));
-          }
-
-          break;
-
-        case 'enabled':
-          if (typeof modifier.enabled !== 'boolean') {
-            console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"enabled"', '"boolean"', "\"" + String(modifier.enabled) + "\""));
-          }
-
-          break;
-
-        case 'phase':
-          if (modifierPhases.indexOf(modifier.phase) < 0) {
-            console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"phase"', "either " + modifierPhases.join(', '), "\"" + String(modifier.phase) + "\""));
-          }
-
-          break;
-
-        case 'fn':
-          if (typeof modifier.fn !== 'function') {
-            console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"fn"', '"function"', "\"" + String(modifier.fn) + "\""));
-          }
-
-          break;
-
-        case 'effect':
-          if (modifier.effect != null && typeof modifier.effect !== 'function') {
-            console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"effect"', '"function"', "\"" + String(modifier.fn) + "\""));
-          }
-
-          break;
-
-        case 'requires':
-          if (modifier.requires != null && !Array.isArray(modifier.requires)) {
-            console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requires"', '"array"', "\"" + String(modifier.requires) + "\""));
-          }
-
-          break;
-
-        case 'requiresIfExists':
-          if (!Array.isArray(modifier.requiresIfExists)) {
-            console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requiresIfExists"', '"array"', "\"" + String(modifier.requiresIfExists) + "\""));
-          }
-
-          break;
-
-        case 'options':
-        case 'data':
-          break;
-
-        default:
-          console.error("PopperJS: an invalid property has been provided to the \"" + modifier.name + "\" modifier, valid properties are " + VALID_PROPERTIES.map(function (s) {
-            return "\"" + s + "\"";
-          }).join(', ') + "; but \"" + key + "\" was provided.");
-      }
-
-      modifier.requires && modifier.requires.forEach(function (requirement) {
-        if (modifiers.find(function (mod) {
-          return mod.name === requirement;
-        }) == null) {
-          console.error(format(MISSING_DEPENDENCY_ERROR, String(modifier.name), requirement, requirement));
-        }
-      });
-    });
-  });
-}
-
-function uniqueBy(arr, fn) {
-  var identifiers = new Set();
-  return arr.filter(function (item) {
-    var identifier = fn(item);
-
-    if (!identifiers.has(identifier)) {
-      identifiers.add(identifier);
-      return true;
-    }
-  });
-}
-
 function mergeByName(modifiers) {
   var merged = modifiers.reduce(function (merged, current) {
     var existing = merged[current.name];
@@ -55918,8 +56046,6 @@ function mergeByName(modifiers) {
   });
 }
 
-var INVALID_ELEMENT_ERROR = 'Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.';
-var INFINITE_LOOP_ERROR = 'Popper: An infinite loop in the modifiers cycle has been detected! The cycle has been interrupted to prevent a browser crash.';
 var DEFAULT_OPTIONS = {
   placement: 'bottom',
   modifiers: [],
@@ -55981,42 +56107,7 @@ function popperGenerator(generatorOptions) {
 
         state.orderedModifiers = orderedModifiers.filter(function (m) {
           return m.enabled;
-        }); // Validate the provided modifiers so that the consumer will get warned
-        // if one of the modifiers is invalid for any reason
-
-        if (process.env.NODE_ENV !== "production") {
-          var modifiers = uniqueBy([].concat(orderedModifiers, state.options.modifiers), function (_ref) {
-            var name = _ref.name;
-            return name;
-          });
-          validateModifiers(modifiers);
-
-          if (getBasePlacement(state.options.placement) === auto) {
-            var flipModifier = state.orderedModifiers.find(function (_ref2) {
-              var name = _ref2.name;
-              return name === 'flip';
-            });
-
-            if (!flipModifier) {
-              console.error(['Popper: "auto" placements require the "flip" modifier be', 'present and enabled to work.'].join(' '));
-            }
-          }
-
-          var _getComputedStyle = getComputedStyle$1(popper),
-              marginTop = _getComputedStyle.marginTop,
-              marginRight = _getComputedStyle.marginRight,
-              marginBottom = _getComputedStyle.marginBottom,
-              marginLeft = _getComputedStyle.marginLeft; // We no longer take into account `margins` on the popper, and it can
-          // cause bugs with positioning, so we'll warn the consumer
-
-
-          if ([marginTop, marginRight, marginBottom, marginLeft].some(function (margin) {
-            return parseFloat(margin);
-          })) {
-            console.warn(['Popper: CSS "margin" styles cannot be used to apply padding', 'between the popper and its reference element or boundary.', 'To replicate margin, use the `offset` modifier, as well as', 'the `padding` option in the `preventOverflow` and `flip`', 'modifiers.'].join(' '));
-          }
-        }
-
+        });
         runModifierEffects();
         return instance.update();
       },
@@ -56036,10 +56127,6 @@ function popperGenerator(generatorOptions) {
         // anymore
 
         if (!areValidElements(reference, popper)) {
-          if (process.env.NODE_ENV !== "production") {
-            console.error(INVALID_ELEMENT_ERROR);
-          }
-
           return;
         } // Store the reference and popper rects to be read by modifiers
 
@@ -56062,18 +56149,8 @@ function popperGenerator(generatorOptions) {
         state.orderedModifiers.forEach(function (modifier) {
           return state.modifiersData[modifier.name] = Object.assign({}, modifier.data);
         });
-        var __debug_loops__ = 0;
 
         for (var index = 0; index < state.orderedModifiers.length; index++) {
-          if (process.env.NODE_ENV !== "production") {
-            __debug_loops__ += 1;
-
-            if (__debug_loops__ > 100) {
-              console.error(INFINITE_LOOP_ERROR);
-              break;
-            }
-          }
-
           if (state.reset === true) {
             state.reset = false;
             index = -1;
@@ -56111,10 +56188,6 @@ function popperGenerator(generatorOptions) {
     };
 
     if (!areValidElements(reference, popper)) {
-      if (process.env.NODE_ENV !== "production") {
-        console.error(INVALID_ELEMENT_ERROR);
-      }
-
       return instance;
     }
 
@@ -56129,11 +56202,11 @@ function popperGenerator(generatorOptions) {
     // one.
 
     function runModifierEffects() {
-      state.orderedModifiers.forEach(function (_ref3) {
-        var name = _ref3.name,
-            _ref3$options = _ref3.options,
-            options = _ref3$options === void 0 ? {} : _ref3$options,
-            effect = _ref3.effect;
+      state.orderedModifiers.forEach(function (_ref) {
+        var name = _ref.name,
+            _ref$options = _ref.options,
+            options = _ref$options === void 0 ? {} : _ref$options,
+            effect = _ref.effect;
 
         if (typeof effect === 'function') {
           var cleanupFn = effect({
@@ -56167,8 +56240,8 @@ const createPopper = popperGenerator({
   defaultModifiers: [hide$1, popperOffsets$1, computeStyles$1, eventListeners, offset$1, flip$1, preventOverflow$1, arrow$1]
 });
 
-const _excluded = ["enabled", "placement", "strategy", "modifiers"];
-function _objectWithoutPropertiesLoose$2(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; }
+const _excluded$2 = ["enabled", "placement", "strategy", "modifiers"];
+function _objectWithoutPropertiesLoose$4(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; }
 const disabledApplyStylesModifier = {
   name: 'applyStyles',
   enabled: false,
@@ -56235,7 +56308,7 @@ function usePopper(referenceElement, popperElement, _ref = {}) {
       strategy = 'absolute',
       modifiers = EMPTY_MODIFIERS
     } = _ref,
-    config = _objectWithoutPropertiesLoose$2(_ref, _excluded);
+    config = _objectWithoutPropertiesLoose$4(_ref, _excluded$2);
   const prevModifiers = React.useRef(modifiers);
   const popperInstanceRef = React.useRef();
   const update = React.useCallback(() => {
@@ -56445,12 +56518,16 @@ function useClickOutside(ref, onClickOutside = noop$1, {
     }
   });
   React.useEffect(() => {
+    var _ownerWindow$event, _ownerWindow$parent;
     if (disabled || ref == null) return undefined;
     const doc = ownerDocument(getRefTarget(ref));
+    const ownerWindow = doc.defaultView || window;
 
     // Store the current event to avoid triggering handlers immediately
+    // For things rendered in an iframe, the event might originate on the parent window
+    // so we should fall back to that global event if the local one doesn't exist
     // https://github.com/facebook/react/issues/20074
-    let currentEvent = (doc.defaultView || window).event;
+    let currentEvent = (_ownerWindow$event = ownerWindow.event) != null ? _ownerWindow$event : (_ownerWindow$parent = ownerWindow.parent) == null ? void 0 : _ownerWindow$parent.event;
     let removeInitialTriggerListener = null;
     if (InitialTriggerEvents[clickTrigger]) {
       removeInitialTriggerListener = listen(doc, InitialTriggerEvents[clickTrigger], handleInitialMouse, true);
@@ -56545,6 +56622,24 @@ function mergeOptionsWithPopperConfig({
   });
 }
 
+const SelectableContext = /*#__PURE__*/React.createContext(null);
+const makeEventKey = (eventKey, href = null) => {
+  if (eventKey != null) return String(eventKey);
+  return href || null;
+};
+
+const NavContext = /*#__PURE__*/React.createContext(null);
+NavContext.displayName = 'NavContext';
+
+const ATTRIBUTE_PREFIX = `data-rr-ui-`;
+const PROPERTY_PREFIX = `rrUi`;
+function dataAttr(property) {
+  return `${ATTRIBUTE_PREFIX}${property}`;
+}
+function dataProp(property) {
+  return `${PROPERTY_PREFIX}${property}`;
+}
+
 const Context = /*#__PURE__*/React.createContext(canUseDOM ? window : undefined);
 
 /**
@@ -56557,6 +56652,198 @@ function useWindow() {
   return React.useContext(Context);
 }
 
+// TODO: check
+
+const context$1 = /*#__PURE__*/React.createContext(null);
+context$1.displayName = 'NavbarContext';
+
+const TabContext = /*#__PURE__*/React.createContext(null);
+
+const _excluded$3 = ["as", "active", "eventKey"];
+function _objectWithoutPropertiesLoose$5(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; }
+function useNavItem({
+  key,
+  onClick,
+  active,
+  id,
+  role,
+  disabled
+}) {
+  const parentOnSelect = React.useContext(SelectableContext);
+  const navContext = React.useContext(NavContext);
+  const tabContext = React.useContext(TabContext);
+  let isActive = active;
+  const props = {
+    role
+  };
+  if (navContext) {
+    if (!role && navContext.role === 'tablist') props.role = 'tab';
+    const contextControllerId = navContext.getControllerId(key != null ? key : null);
+    const contextControlledId = navContext.getControlledId(key != null ? key : null);
+
+    // @ts-ignore
+    props[dataAttr('event-key')] = key;
+    props.id = contextControllerId || id;
+    isActive = active == null && key != null ? navContext.activeKey === key : active;
+
+    /**
+     * Simplified scenario for `mountOnEnter`.
+     *
+     * While it would make sense to keep 'aria-controls' for tabs that have been mounted at least
+     * once, it would also complicate the code quite a bit, for very little gain.
+     * The following implementation is probably good enough.
+     *
+     * @see https://github.com/react-restart/ui/pull/40#issuecomment-1009971561
+     */
+    if (isActive || !(tabContext != null && tabContext.unmountOnExit) && !(tabContext != null && tabContext.mountOnEnter)) props['aria-controls'] = contextControlledId;
+  }
+  if (props.role === 'tab') {
+    props['aria-selected'] = isActive;
+    if (!isActive) {
+      props.tabIndex = -1;
+    }
+    if (disabled) {
+      props.tabIndex = -1;
+      props['aria-disabled'] = true;
+    }
+  }
+  props.onClick = useEventCallback(e => {
+    if (disabled) return;
+    onClick == null ? void 0 : onClick(e);
+    if (key == null) {
+      return;
+    }
+    if (parentOnSelect && !e.isPropagationStopped()) {
+      parentOnSelect(key, e);
+    }
+  });
+  return [props, {
+    isActive
+  }];
+}
+const NavItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      as: Component = Button,
+      active,
+      eventKey
+    } = _ref,
+    options = _objectWithoutPropertiesLoose$5(_ref, _excluded$3);
+  const [props, meta] = useNavItem(Object.assign({
+    key: makeEventKey(eventKey, options.href),
+    active
+  }, options));
+
+  // @ts-ignore
+  props[dataAttr('active')] = meta.isActive;
+  return /*#__PURE__*/jsxRuntime.jsx(Component, Object.assign({}, options, props, {
+    ref: ref
+  }));
+});
+NavItem.displayName = 'NavItem';
+
+const _excluded$4 = ["as", "onSelect", "activeKey", "role", "onKeyDown"];
+function _objectWithoutPropertiesLoose$6(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; }
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop$2 = () => {};
+const EVENT_KEY_ATTR = dataAttr('event-key');
+const Nav = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+      as: Component = 'div',
+      onSelect,
+      activeKey,
+      role,
+      onKeyDown
+    } = _ref,
+    props = _objectWithoutPropertiesLoose$6(_ref, _excluded$4);
+  // A ref and forceUpdate for refocus, b/c we only want to trigger when needed
+  // and don't want to reset the set in the effect
+  const forceUpdate = useForceUpdate();
+  const needsRefocusRef = React.useRef(false);
+  const parentOnSelect = React.useContext(SelectableContext);
+  const tabContext = React.useContext(TabContext);
+  let getControlledId, getControllerId;
+  if (tabContext) {
+    role = role || 'tablist';
+    activeKey = tabContext.activeKey;
+    // TODO: do we need to duplicate these?
+    getControlledId = tabContext.getControlledId;
+    getControllerId = tabContext.getControllerId;
+  }
+  const listNode = React.useRef(null);
+  const getNextActiveTab = offset => {
+    const currentListNode = listNode.current;
+    if (!currentListNode) return null;
+    const items = qsa(currentListNode, `[${EVENT_KEY_ATTR}]:not([aria-disabled=true])`);
+    const activeChild = currentListNode.querySelector('[aria-selected=true]');
+    if (!activeChild || activeChild !== document.activeElement) return null;
+    const index = items.indexOf(activeChild);
+    if (index === -1) return null;
+    let nextIndex = index + offset;
+    if (nextIndex >= items.length) nextIndex = 0;
+    if (nextIndex < 0) nextIndex = items.length - 1;
+    return items[nextIndex];
+  };
+  const handleSelect = (key, event) => {
+    if (key == null) return;
+    onSelect == null ? void 0 : onSelect(key, event);
+    parentOnSelect == null ? void 0 : parentOnSelect(key, event);
+  };
+  const handleKeyDown = event => {
+    onKeyDown == null ? void 0 : onKeyDown(event);
+    if (!tabContext) {
+      return;
+    }
+    let nextActiveChild;
+    switch (event.key) {
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        nextActiveChild = getNextActiveTab(-1);
+        break;
+      case 'ArrowRight':
+      case 'ArrowDown':
+        nextActiveChild = getNextActiveTab(1);
+        break;
+      default:
+        return;
+    }
+    if (!nextActiveChild) return;
+    event.preventDefault();
+    handleSelect(nextActiveChild.dataset[dataProp('EventKey')] || null, event);
+    needsRefocusRef.current = true;
+    forceUpdate();
+  };
+  React.useEffect(() => {
+    if (listNode.current && needsRefocusRef.current) {
+      const activeChild = listNode.current.querySelector(`[${EVENT_KEY_ATTR}][aria-selected=true]`);
+      activeChild == null ? void 0 : activeChild.focus();
+    }
+    needsRefocusRef.current = false;
+  });
+  const mergedRef = useMergedRefs(ref, listNode);
+  return /*#__PURE__*/jsxRuntime.jsx(SelectableContext.Provider, {
+    value: handleSelect,
+    children: /*#__PURE__*/jsxRuntime.jsx(NavContext.Provider, {
+      value: {
+        role,
+        // used by NavLink to determine it's role
+        activeKey: makeEventKey(activeKey),
+        getControlledId: getControlledId || noop$2,
+        getControllerId: getControllerId || noop$2
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(Component, Object.assign({}, props, {
+        onKeyDown: handleKeyDown,
+        ref: mergedRef,
+        role: role
+      }))
+    })
+  });
+});
+Nav.displayName = 'Nav';
+var BaseNav = Object.assign(Nav, {
+  Item: NavItem
+});
+
 const resolveContainerRef = (ref, document) => {
   if (!canUseDOM) return null;
   if (ref == null) return (document || ownerDocument()).body;
@@ -56716,7 +57003,179 @@ function hasClass(element, className) {
   return (" " + (element.className.baseVal || element.className) + " ").indexOf(" " + className + " ") !== -1;
 }
 
-const noop$2 = () => {};
+var createChainableTypeChecker_1 = createCommonjsModule(function (module, exports) {
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = createChainableTypeChecker;
+/**
+ * Copyright 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+// Mostly taken from ReactPropTypes.
+
+function createChainableTypeChecker(validate) {
+  function checkType(isRequired, props, propName, componentName, location, propFullName) {
+    var componentNameSafe = componentName || '<<anonymous>>';
+    var propFullNameSafe = propFullName || propName;
+
+    if (props[propName] == null) {
+      if (isRequired) {
+        return new Error('Required ' + location + ' `' + propFullNameSafe + '` was not specified ' + ('in `' + componentNameSafe + '`.'));
+      }
+
+      return null;
+    }
+
+    for (var _len = arguments.length, args = Array(_len > 6 ? _len - 6 : 0), _key = 6; _key < _len; _key++) {
+      args[_key - 6] = arguments[_key];
+    }
+
+    return validate.apply(undefined, [props, propName, componentNameSafe, location, propFullNameSafe].concat(args));
+  }
+
+  var chainedCheckType = checkType.bind(null, false);
+  chainedCheckType.isRequired = checkType.bind(null, true);
+
+  return chainedCheckType;
+}
+module.exports = exports['default'];
+});
+
+unwrapExports(createChainableTypeChecker_1);
+
+var all_1 = createCommonjsModule(function (module, exports) {
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = all;
+
+
+
+var _createChainableTypeChecker2 = _interopRequireDefault(createChainableTypeChecker_1);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function all() {
+  for (var _len = arguments.length, validators = Array(_len), _key = 0; _key < _len; _key++) {
+    validators[_key] = arguments[_key];
+  }
+
+  function allPropTypes() {
+    for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    var error = null;
+
+    validators.forEach(function (validator) {
+      if (error != null) {
+        return;
+      }
+
+      var result = validator.apply(undefined, args);
+      if (result != null) {
+        error = result;
+      }
+    });
+
+    return error;
+  }
+
+  return (0, _createChainableTypeChecker2.default)(allPropTypes);
+}
+module.exports = exports['default'];
+});
+
+unwrapExports(all_1);
+
+var NavItem$1 = createWithBsPrefix('nav-item');
+
+const NavLink = /*#__PURE__*/React.forwardRef(({
+  bsPrefix,
+  className,
+  as: Component = Anchor,
+  active,
+  eventKey,
+  disabled = false,
+  ...props
+}, ref) => {
+  bsPrefix = useBootstrapPrefix(bsPrefix, 'nav-link');
+  const [navItemProps, meta] = useNavItem({
+    key: makeEventKey(eventKey, props.href),
+    active,
+    disabled,
+    ...props
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(Component, {
+    ...props,
+    ...navItemProps,
+    ref: ref,
+    disabled: disabled,
+    className: classnames(className, bsPrefix, disabled && 'disabled', meta.isActive && 'active')
+  });
+});
+NavLink.displayName = 'NavLink';
+
+const Nav$1 = /*#__PURE__*/React.forwardRef((uncontrolledProps, ref) => {
+  const {
+    as = 'div',
+    bsPrefix: initialBsPrefix,
+    variant,
+    fill = false,
+    justify = false,
+    navbar,
+    navbarScroll,
+    className,
+    activeKey,
+    ...props
+  } = useUncontrolled(uncontrolledProps, {
+    activeKey: 'onSelect'
+  });
+  const bsPrefix = useBootstrapPrefix(initialBsPrefix, 'nav');
+  let navbarBsPrefix;
+  let cardHeaderBsPrefix;
+  let isNavbar = false;
+  const navbarContext = React.useContext(context$1);
+  const cardHeaderContext = React.useContext(context);
+  if (navbarContext) {
+    navbarBsPrefix = navbarContext.bsPrefix;
+    isNavbar = navbar == null ? true : navbar;
+  } else if (cardHeaderContext) {
+    ({
+      cardHeaderBsPrefix
+    } = cardHeaderContext);
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(BaseNav, {
+    as: as,
+    ref: ref,
+    activeKey: activeKey,
+    className: classnames(className, {
+      [bsPrefix]: !isNavbar,
+      [`${navbarBsPrefix}-nav`]: isNavbar,
+      [`${navbarBsPrefix}-nav-scroll`]: isNavbar && navbarScroll,
+      [`${cardHeaderBsPrefix}-${variant}`]: !!cardHeaderBsPrefix,
+      [`${bsPrefix}-${variant}`]: !!variant,
+      [`${bsPrefix}-fill`]: fill,
+      [`${bsPrefix}-justified`]: justify
+    }),
+    ...props
+  });
+});
+Nav$1.displayName = 'Nav';
+var Nav$2 = Object.assign(Nav$1, {
+  Item: NavItem$1,
+  Link: NavLink
+});
+
+const noop$3 = () => {};
 /**
  * The `useRootClose` hook registers your callback on the document
  * when rendered. Powers the `<Overlay/>` component. This is used achieve modal
@@ -56733,7 +57192,7 @@ function useRootClose(ref, onRootClose, {
   disabled,
   clickTrigger
 } = {}) {
-  const onClose = onRootClose || noop$2;
+  const onClose = onRootClose || noop$3;
   useClickOutside(ref, onClose, {
     disabled,
     clickTrigger
@@ -57156,12 +57615,12 @@ function OverlayTrigger({
   });
 }
 
-var styles$5 = {"vitro-action-handler":"_action-handler_vitro-action-handler_1_HNxCd","vitro-icon-before":"_action-handler_vitro-icon-before_3vTdV08","vitro-icon-progress":"_action-handler_vitro-icon-progress_28liEuB","vitro-icon-success":"_action-handler_vitro-icon-success_1jnQDIv","vitro-icon-error":"_action-handler_vitro-icon-error_3OPWhCB","vitro-button-close":"_action-handler_vitro-button-close_33qzSIU","vitro-flex":"_action-handler_vitro-flex_3Pyc7fz"};
+var styles$5 = {"vitro-action-handler":"_action-handler_vitro-action-handler_1_HNxCd","vitro-icon-before":"_action-handler_vitro-icon-before_3vTdV08","vitro-icon-progress":"_action-handler_vitro-icon-progress_28liEuB","vitro-icon-success":"_action-handler_vitro-icon-success_1jnQDIv","vitro-icon-error":"_action-handler_vitro-icon-error_3OPWhCB","vitro-button-close":"_action-handler_vitro-button-close_33qzSIU","vitro-flex":"_action-handler_vitro-flex_3Pyc7fz","vitro-interface-blur":"_action-handler_vitro-interface-blur_e0d8w42"};
 
-var _excluded$1 = ["popper", "children", "show"];
+var _excluded$5 = ["popper", "children", "show"];
 var UpdatingPopover = React__default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   return React__default.createElement("div", {
     className: styles$5["vitro-action-handler"]
   }, React__default.createElement(Popover$1, Object.assign({
@@ -57225,26 +57684,29 @@ var ActionHandler = function ActionHandler(props) {
   var _useState3 = React.useState(false),
     show = _useState3[0],
     setShow = _useState3[1];
-  var _useState4 = React.useState(actionMap.before),
-    currentAction = _useState4[0],
-    setCurrentAction = _useState4[1];
-  var _useState5 = React.useState(null),
-    icon = _useState5[0],
-    setIcon = _useState5[1];
+  var _useState4 = React.useState(false),
+    blockInterface = _useState4[0],
+    setBlockInterface = _useState4[1];
+  var _useState5 = React.useState(actionMap.before),
+    currentAction = _useState5[0],
+    setCurrentAction = _useState5[1];
+  var _useState6 = React.useState(null),
+    icon = _useState6[0],
+    setIcon = _useState6[1];
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
   React.useEffect(function () {
-    setIsCloseByOutsideClick(true);
+    setIsCloseByOutsideClick(currentAction !== actionMap.progress);
     if (currentAction === actionMap.before) setIcon(styles$5['vitro-icon-before']);
     if (currentAction === actionMap.progress) {
       setIcon(styles$5['vitro-icon-progress']);
     }
   }, [currentAction]);
   React.useEffect(function () {
-    if (!props.showProgress && !props.showAfterAction && !props.isConfirm) {
+    if (!props.isShowProgress && !props.isShowAfterAction && !props.isConfirm) {
       onStart();
     } else {
-      if (props.show) {
-        setShow(props.show);
+      if (props.isShow) {
+        setShow(props.isShow);
         if (props.isConfirm) {
           init();
         } else {
@@ -57284,7 +57746,7 @@ var ActionHandler = function ActionHandler(props) {
     if (props.onAfterAction) {
       props.onAfterAction(error, successResult, failResult);
     }
-    if (!props.showAfterAction) {
+    if (!props.isShowAfterAction) {
       window.document.body.click();
       return;
     }
@@ -57292,6 +57754,9 @@ var ActionHandler = function ActionHandler(props) {
       if (props.onAfterActionClose) {
         props.onAfterActionClose(error, successResult, failResult);
       }
+      if (props.isBlockInterface) {
+        setBlockInterface(false);
+      }
       window.document.body.click();
     }, props.durationMs || 2000);
     setIcon(success ? styles$5['vitro-icon-success'] : styles$5['vitro-icon-error']);
@@ -57343,7 +57808,10 @@ var ActionHandler = function ActionHandler(props) {
       }
     }
     setCurrentAction(actionMap.progress);
-    if (!props.showProgress && !props.showAfterAction && !props.isConfirm) {
+    if (props.isBlockInterface) {
+      setBlockInterface(true);
+    }
+    if (!props.isShowProgress && !props.isShowAfterAction && !props.isConfirm) {
       setIsCloseByOutsideClick(true);
       window.document.body.click();
     }
@@ -57388,7 +57856,7 @@ var ActionHandler = function ActionHandler(props) {
     }
   };
   var onEnter = function onEnter() {
-    if (!props.showProgress && !props.showAfterAction && !props.isConfirm) {
+    if (!props.isShowProgress && !props.isShowAfterAction && !props.isConfirm) {
       window.document.body.click();
     }
     if (currentAction !== actionMap.progress) {
@@ -57403,6 +57871,11 @@ var ActionHandler = function ActionHandler(props) {
       window.document.body.click();
     }
   };
+  var onHide = function onHide() {
+    if (isCloseByOutsideClick) {
+      setShow(false);
+    }
+  };
   var showButtonGroup = props.isConfirm && (currentAction === actionMap.before || currentAction === actionMap.progress && itemCount > 1);
   return React__default.createElement(React__default.Fragment, null, props.children && React__default.createElement(OverlayTrigger, {
     trigger: TRIGGER.CLICK,
@@ -57410,7 +57883,7 @@ var ActionHandler = function ActionHandler(props) {
     rootClose: isCloseByOutsideClick,
     placement: props.placement || PLACEMENT.TOP,
     overlay: React__default.createElement(UpdatingPopover, null, React__default.createElement("div", {
-      className: styles$5["vitro-flex"]
+      className: styles$5['vitro-flex']
     }, icon && React__default.createElement("div", {
       className: icon
     }), text), showButtonGroup && React__default.createElement(commonUi.ButtonGroup, null, React__default.createElement(commonUi.Button, {
@@ -57420,18 +57893,16 @@ var ActionHandler = function ActionHandler(props) {
     }), React__default.createElement(commonUi.Button, {
       onClick: cancel,
       text: localeService.create(LOCALE.NO) || props.labelNo,
-      className: styles$5["vitro-button-close"]
+      className: styles$5['vitro-button-close']
     })))
   }, React__default.createElement("div", null, props.children)), props.target && !props.children && React__default.createElement(Overlay$1, {
     show: show,
     target: props.target,
     rootClose: isCloseByOutsideClick,
-    onHide: function onHide() {
-      return setShow(false);
-    },
+    onHide: onHide,
     placement: props.placement || PLACEMENT.TOP
   }, React__default.createElement(UpdatingPopover, null, React__default.createElement("div", {
-    className: styles$5["vitro-flex"]
+    className: styles$5['vitro-flex']
   }, icon && React__default.createElement("div", {
     className: icon
   }), text), showButtonGroup && React__default.createElement(commonUi.ButtonGroup, null, React__default.createElement(commonUi.Button, {
@@ -57441,8 +57912,223 @@ var ActionHandler = function ActionHandler(props) {
   }), React__default.createElement(commonUi.Button, {
     onClick: cancel,
     text: localeService.create(LOCALE.NO) || props.labelNo,
-    className: styles$5["vitro-button-close"]
-  })))));
+    className: styles$5['vitro-button-close']
+  })))), blockInterface && React__default.createElement("div", {
+    className: styles$5['vitro-interface-blur']
+  }));
+};
+
+var styles$6 = {"vitro-view-part":"_view-part_vitro-view-part_1jRQS_n"};
+
+var ViewPart = function ViewPart(props) {
+  var _useState = React.useState(null),
+    component = _useState[0],
+    setComponent = _useState[1];
+  React.useEffect(function () {
+    if (props.component) {
+      var _component = React__default.createElement(props.component, props.props);
+      setComponent(_component);
+    } else {
+      setComponent(null);
+    }
+  }, [props.component]);
+  return React__default.createElement("div", {
+    className: styles$6["vitro-view-part"]
+  }, component);
+};
+
+var styles$7 = {"vitro-view":"_view_vitro-view_1PIFv5i"};
+
+var styles$8 = {"vitro-tab":"_tab-group_vitro-tab_1JjKD6A","vitro-item":"_tab-group_vitro-item_1rEUKKg","active":"_tab-group_active_1bm9FlF","vitro-dropdown-button":"_tab-group_vitro-dropdown-button_2khJUBS"};
+
+var OverflowButton = function OverflowButton(props) {
+  if (!props.list || !props.list.length) return null;
+  return React__default.createElement(commonUi.DropdownButton, {
+    className: styles$8['vitro-dropdown-button'],
+    itemList: props.list.map(function (x, i) {
+      return _extends({}, x, {
+        value: props.offset + i,
+        key: x.text,
+        onClick: function onClick() {
+          return props.onSelect(props.offset + i);
+        }
+      });
+    })
+  });
+};
+
+var Tab = function Tab(props) {
+  return React__default.createElement("div", {
+    key: props.index,
+    className: styles$8['vitro-item']
+  }, React__default.createElement(Nav$2.Item, {
+    className: props.active ? styles$8['active'] : undefined,
+    onClick: function onClick() {
+      return props.onClick(props.index);
+    }
+  }, React__default.createElement(Nav$2.Link, {
+    eventKey: props.eventKey
+  }, React__default.createElement("span", null, props.icon && React__default.createElement(commonUi.Image, {
+    src: props.icon
+  }), props.title))));
+};
+
+var TabGroupHeader = function TabGroupHeader(props) {
+  var overflowTabList = [];
+  var tabMinWidth = 120;
+  return React__default.createElement(Nav$2, null, props.width > 0 && props.itemList && props.itemList.map(function (item, index) {
+    if ((index + 1) * tabMinWidth < props.width || !props.wrap) {
+      return React__default.createElement(Tab, {
+        key: item.text,
+        index: index,
+        active: index === props.currentTab,
+        onClick: props.changeTab,
+        eventKey: item.eventKey,
+        icon: item.icon,
+        title: item.text
+      });
+    }
+    overflowTabList.push(item);
+    return null;
+  }), props.itemList && props.wrap && React__default.createElement(OverflowButton, {
+    list: overflowTabList,
+    offset: props.itemList.length - overflowTabList.length,
+    onSelect: props.changeTab
+  }));
+};
+
+var w$3 = window;
+var TabGroupComponent = function TabGroupComponent(props) {
+  var _useState = React.useState(0),
+    width = _useState[0],
+    setWidth = _useState[1];
+  var _useState2 = React.useState(0),
+    currentTab = _useState2[0],
+    setCurrentTab = _useState2[1];
+  var _useState3 = React.useState(null),
+    component = _useState3[0],
+    setComponent = _useState3[1];
+  var changeTab = function changeTab(index) {
+    setCurrentTab(index);
+    if (props.onChange) {
+      props.onChange(index);
+    }
+  };
+  var ref = React.useRef(null);
+  React.useEffect(function () {
+    if (ref.current) {
+      setWidth(ref.current.offsetWidth);
+      if (props.wrap) {
+        if (w$3.addResizeListener) {
+          w$3.addResizeListener(ref.current, function () {
+            return setWidth(ref.current.offsetWidth);
+          });
+        }
+      }
+    }
+  }, [ref.current]);
+  React.useEffect(function () {
+    if (props.itemList) {
+      if (props.itemList[currentTab] && props.itemList[currentTab].content) {
+        var c = React__default.createElement(props.itemList[currentTab].content.component, props.itemList[currentTab].content.props);
+        setComponent(c);
+      } else if (props.itemList[0]) {
+        setCurrentTab(0);
+      }
+    } else {
+      setComponent(null);
+    }
+  }, [currentTab, props.itemList]);
+  return React__default.createElement("div", {
+    className: styles$8['vitro-tab'],
+    ref: ref
+  }, React__default.createElement(TabGroupHeader, {
+    itemList: props.itemList,
+    width: width,
+    currentTab: currentTab,
+    changeTab: changeTab,
+    wrap: props.wrap
+  }), React__default.createElement("div", {
+    className: 'vitro-content'
+  }, component));
+};
+
+var tabScriptList = [{
+  url: 'js/resizeEventListener.js',
+  id: 'vitro-script-event-resizer'
+}, {
+  url: 'js/perfect-scrollbar.min.js',
+  id: 'vitro-script-perfect-scroll'
+}];
+
+var TabGroup = function TabGroup(props) {
+  var scriptList = tabScriptList;
+  return props.wrap ? React__default.createElement(commonUi.ScriptLoader, {
+    urlList: scriptList.map(function (x) {
+      return x.url;
+    }),
+    idList: scriptList.map(function (x) {
+      return x.id;
+    }),
+    placeholder: props.placeholder
+  }, React__default.createElement(TabGroupComponent, Object.assign({}, props))) : React__default.createElement(TabGroupComponent, Object.assign({}, props));
+};
+
+var styles$9 = {"vitro-control":"_control-group_vitro-control_O12WSU5","vitro-control-row":"_control-group_vitro-control-row_3H0qlpT","vitro-label":"_control-group_vitro-label_3M058up"};
+
+var ControlGroup = function ControlGroup(props) {
+  if (props.horizontal) {
+    return React__default.createElement("div", {
+      className: 'container ' + styles$9['vitro-control']
+    }, React__default.createElement("div", {
+      className: props.as
+    }, props.children));
+  }
+  return React__default.createElement("div", {
+    className: styles$9['vitro-control-row']
+  }, props.children);
+};
+
+var View = function View(props) {
+  var _useState = React.useState([]),
+    tabList = _useState[0],
+    setTabList = _useState[1];
+  var createTabList = function createTabList(tabList) {
+    return tabList.map(function (tab) {
+      return {
+        text: tab.text,
+        content: {
+          component: GetGroupControl,
+          props: {
+            item: props.item,
+            componentList: tab.componentList
+          }
+        }
+      };
+    });
+  };
+  React.useEffect(function () {
+    if (props.tabList) {
+      setTabList(createTabList(props.tabList));
+    }
+  }, [props.tabList]);
+  return tabList && React__default.createElement("div", {
+    className: styles$7["vitro-view"]
+  }, React__default.createElement(TabGroup, {
+    itemList: tabList,
+    wrap: true
+  }));
+};
+var GetGroupControl = function GetGroupControl(props) {
+  return React__default.createElement(ControlGroup, {
+    horizontal: true
+  }, props.componentList.map(function (viewPart) {
+    return React__default.createElement(ViewPart, {
+      component: viewPart.component,
+      settings: viewPart.settings,
+      props: props
+    });
+  }));
 };
 
 exports.ACTION_HANDLER = ActionHandlerConstants;
@@ -57450,12 +58136,15 @@ exports.ActionHandler = ActionHandler;
 exports.Breadcrumbs = Breadcrumbs;
 exports.ComponentLoader = ComponentLoader;
 exports.ComponentLoaderContextImpl = ComponentLoaderContextImpl;
+exports.ControlGroup = ControlGroup;
 exports.MicroFrontend = MicroFrontend;
 exports.TABLE_VIEW = TableViewConstants;
 exports.TREE_VIEW = TreeViewConstants;
+exports.TabGroup = TabGroup;
 exports.TableView = TableView;
 exports.TelerikUploader = TelerikUploader;
 exports.TelerikUploaderContextImpl = TelerikUploaderContextImpl;
 exports.TopLevelMenu = TopLevelMenu;
 exports.TreeView = TreeView;
+exports.View = View;
 //# sourceMappingURL=index.js.map