@vitrosoftware/common-ui-ts 1.0.10 → 1.1.11

package/dist/index.modern.js

@@ -1,5 +1,5 @@
-import React__default, { useState, useRef, useEffect, useMemo, useCallback, useContext, createContext, useLayoutEffect, forwardRef, cloneElement, Children } from 'react';
-import { ScriptLoader, Progress, ButtonGroup, Button } from '@vitrosoftware/common-ui';
+import React__default, { useState, useRef, useEffect, useMemo, useCallback, useContext, createContext, useLayoutEffect, forwardRef, cloneElement, useReducer, Children } from 'react';
+import { ScriptLoader, Progress, ButtonGroup, Button as Button$1, DropdownButton, Image } from '@vitrosoftware/common-ui';
 import { useInjection } from 'inversify-react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 
@@ -212,6 +212,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;
 }
@@ -19968,8 +19972,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();
@@ -20031,6 +20035,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 = {};
@@ -20961,6 +20979,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 = {};
@@ -20974,6 +21007,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 = useRef(propValue !== undefined);
 
@@ -21002,6 +21043,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) {
@@ -54038,6 +54097,129 @@ var isDOM = typeof document !== 'undefined';
 
 var useIsomorphicEffect = isDOM || isReactNative ? useLayoutEffect : 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__*/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__*/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__*/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__*/jsx("a", Object.assign({
+      ref: ref
+    }, props, buttonProps, {
+      onKeyDown: handleKeyDown
+    }));
+  }
+  return /*#__PURE__*/jsx("a", Object.assign({
+    ref: ref
+  }, props, {
+    onKeyDown: onKeyDown
+  }));
+});
+Anchor.displayName = 'Anchor';
+
 const fadeStyles = {
   [ENTERING]: 'show',
   [ENTERED]: 'show'
@@ -54109,6 +54291,9 @@ function createWithBsPrefix(prefix, {
   return BsComponent;
 }
 
+const context = /*#__PURE__*/createContext(null);
+context.displayName = 'CardHeaderContext';
+
 /**
  * Returns a ref that is immediately updated with the new value
  *
@@ -54210,6 +54395,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 = useReducer(function (state) {
+    return !state;
+  }, false),
+      dispatch = _useReducer[1];
+
+  return dispatch;
+}
+
 var has$2 = Object.prototype.hasOwnProperty;
 
 function find(iter, tar, key) {
@@ -56012,8 +56237,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,
@@ -56080,7 +56305,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 = useRef(modifiers);
   const popperInstanceRef = useRef();
   const update = useCallback(() => {
@@ -56394,6 +56619,24 @@ function mergeOptionsWithPopperConfig({
   });
 }
 
+const SelectableContext = /*#__PURE__*/createContext(null);
+const makeEventKey = (eventKey, href = null) => {
+  if (eventKey != null) return String(eventKey);
+  return href || null;
+};
+
+const NavContext = /*#__PURE__*/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__*/createContext(canUseDOM ? window : undefined);
 
 /**
@@ -56406,6 +56649,198 @@ function useWindow() {
   return useContext(Context);
 }
 
+// TODO: check
+
+const context$1 = /*#__PURE__*/createContext(null);
+context$1.displayName = 'NavbarContext';
+
+const TabContext = /*#__PURE__*/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 = useContext(SelectableContext);
+  const navContext = useContext(NavContext);
+  const tabContext = 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__*/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__*/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__*/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 = useRef(false);
+  const parentOnSelect = useContext(SelectableContext);
+  const tabContext = 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 = 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();
+  };
+  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__*/jsx(SelectableContext.Provider, {
+    value: handleSelect,
+    children: /*#__PURE__*/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__*/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;
@@ -56565,7 +57000,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__*/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__*/jsx(Component, {
+    ...props,
+    ...navItemProps,
+    ref: ref,
+    disabled: disabled,
+    className: classnames(className, bsPrefix, disabled && 'disabled', meta.isActive && 'active')
+  });
+});
+NavLink.displayName = 'NavLink';
+
+const Nav$1 = /*#__PURE__*/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 = useContext(context$1);
+  const cardHeaderContext = useContext(context);
+  if (navbarContext) {
+    navbarBsPrefix = navbarContext.bsPrefix;
+    isNavbar = navbar == null ? true : navbar;
+  } else if (cardHeaderContext) {
+    ({
+      cardHeaderBsPrefix
+    } = cardHeaderContext);
+  }
+  return /*#__PURE__*/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
@@ -56582,7 +57189,7 @@ function useRootClose(ref, onRootClose, {
   disabled,
   clickTrigger
 } = {}) {
-  const onClose = onRootClose || noop$2;
+  const onClose = onRootClose || noop$3;
   useClickOutside(ref, onClose, {
     disabled,
     clickTrigger
@@ -57005,12 +57612,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({
@@ -57074,26 +57681,29 @@ var ActionHandler = function ActionHandler(props) {
   var _useState3 = useState(false),
     show = _useState3[0],
     setShow = _useState3[1];
-  var _useState4 = useState(actionMap.before),
-    currentAction = _useState4[0],
-    setCurrentAction = _useState4[1];
-  var _useState5 = useState(null),
-    icon = _useState5[0],
-    setIcon = _useState5[1];
+  var _useState4 = useState(false),
+    blockInterface = _useState4[0],
+    setBlockInterface = _useState4[1];
+  var _useState5 = useState(actionMap.before),
+    currentAction = _useState5[0],
+    setCurrentAction = _useState5[1];
+  var _useState6 = useState(null),
+    icon = _useState6[0],
+    setIcon = _useState6[1];
   var localeService = useInjection(SERVICE.LOCALE);
   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]);
   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 {
@@ -57133,7 +57743,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;
     }
@@ -57141,6 +57751,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']);
@@ -57192,7 +57805,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();
     }
@@ -57237,7 +57853,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) {
@@ -57252,6 +57868,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,
@@ -57259,40 +57880,253 @@ 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(ButtonGroup, null, React__default.createElement(Button, {
+    }), text), showButtonGroup && React__default.createElement(ButtonGroup, null, React__default.createElement(Button$1, {
       onClick: onStart,
       text: localeService.create(LOCALE.YES) || props.labelYes,
       disabled: currentAction !== actionMap.before
-    }), React__default.createElement(Button, {
+    }), React__default.createElement(Button$1, {
       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(ButtonGroup, null, React__default.createElement(Button, {
+  }), text), showButtonGroup && React__default.createElement(ButtonGroup, null, React__default.createElement(Button$1, {
     onClick: onStart,
     text: localeService.create(LOCALE.YES) || props.labelYes,
     disabled: currentAction !== actionMap.before
-  }), React__default.createElement(Button, {
+  }), React__default.createElement(Button$1, {
     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 = useState(null),
+    component = _useState[0],
+    setComponent = _useState[1];
+  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(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(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 = useState(0),
+    width = _useState[0],
+    setWidth = _useState[1];
+  var _useState2 = useState(0),
+    currentTab = _useState2[0],
+    setCurrentTab = _useState2[1];
+  var _useState3 = useState(null),
+    component = _useState3[0],
+    setComponent = _useState3[1];
+  var changeTab = function changeTab(index) {
+    setCurrentTab(index);
+    if (props.onChange) {
+      props.onChange(index);
+    }
+  };
+  var ref = useRef(null);
+  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]);
+  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(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 = 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
+          }
+        }
+      };
+    });
+  };
+  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
+    });
+  }));
 };
 
-export { ActionHandlerConstants as ACTION_HANDLER, ActionHandler, Breadcrumbs, ComponentLoader, ComponentLoaderContextImpl, MicroFrontend, TableViewConstants as TABLE_VIEW, TreeViewConstants as TREE_VIEW, TableView, TelerikUploader, TelerikUploaderContextImpl, TopLevelMenu, TreeView };
+export { ActionHandlerConstants as ACTION_HANDLER, ActionHandler, Breadcrumbs, ComponentLoader, ComponentLoaderContextImpl, ControlGroup, MicroFrontend, TableViewConstants as TABLE_VIEW, TreeViewConstants as TREE_VIEW, TabGroup, TableView, TelerikUploader, TelerikUploaderContextImpl, TopLevelMenu, TreeView, View };
 //# sourceMappingURL=index.modern.js.map