linear-react-components-ui 1.1.21-beta.4 → 1.1.21-beta.6

package/lib/menus/sidenav/popup_menu_help/index.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _list = _interopRequireWildcard(require("../../../list"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const body = document.getElementsByTagName('body')[0];
+const PopupMenuHelp = props => {
+  const {
+    style,
+    copyright,
+    handlerClose,
+    version,
+    helpList = [],
+    helpRef
+  } = props;
+  const searchFieldRef = (0, _react.useRef)(null);
+  const popupRef = (0, _react.useRef)(document.createElement('div'));
+  Object.assign(popupRef.current, {
+    className: 'helpmenu',
+    style
+  });
+  const closeOnEsc = e => {
+    if (e.key === 'Escape') {
+      handlerClose();
+      e.stopPropagation();
+    }
+  };
+  (0, _react.useEffect)(() => {
+    body.appendChild(popupRef.current);
+    if (searchFieldRef && searchFieldRef.current) searchFieldRef.current.focus();
+    document.body.addEventListener('keydown', closeOnEsc);
+    return () => {
+      body.removeChild(popupRef.current);
+      document.body.removeEventListener('keydown', closeOnEsc);
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    Object.assign(popupRef.current, {
+      style
+    });
+  }, [style]);
+  const getPopupContent = () => /*#__PURE__*/_react.default.createElement("div", {
+    className: "popup-help",
+    ref: helpRef
+  }, /*#__PURE__*/_react.default.createElement(_list.default, {
+    condensed: true,
+    selectable: true,
+    onSelectItem: handlerClose,
+    selectOnEnter: true,
+    style: {
+      border: 'none',
+      boxShadow: 'hidden',
+      overflow: 'none'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_list.ListHeader, {
+    customClass: "helpheader",
+    title: "Ajuda"
+  }), helpList.map(item => /*#__PURE__*/_react.default.createElement(_list.ListItem, {
+    separator: true,
+    selectOnEnter: true,
+    key: item.id,
+    itemId: item.id,
+    url: item.url,
+    text: item.title
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "infomartion",
+    style: {
+      padding: '10px 0px 0px 7px',
+      backgroundColor: 'white'
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "help-information"
+  }, /*#__PURE__*/_react.default.createElement("b", null, "Vers\xE3o:"), version), /*#__PURE__*/_react.default.createElement("p", {
+    className: "help-information"
+  }, copyright)));
+  return /*#__PURE__*/_reactDom.default.createPortal(getPopupContent(), popupRef.current);
+};
+var _default = exports.default = PopupMenuHelp;

package/lib/popover/PopoverText.d.ts

@@ -4,6 +4,7 @@ import '../@types/Position.js';
 import '../@types/SizePixels.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
+import '../@types/PermissionAttr.js';
 
 declare const PopoverText: React__default.ForwardRefExoticComponent<PopoverTextProps & React__default.RefAttributes<HTMLParagraphElement>>;
 

package/lib/popover/PopoverTitle.d.ts

@@ -4,6 +4,7 @@ import '../@types/Position.js';
 import '../@types/SizePixels.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
+import '../@types/PermissionAttr.js';
 
 declare const PopoverTitle: ({ children }: PopoverTitleProps) => JSX.Element;
 

package/lib/popover/index.d.ts

@@ -6,10 +6,8 @@ import '../@types/Position.js';
 import '../@types/SizePixels.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
+import '../@types/PermissionAttr.js';
 
-declare const _default: {
-    (props: IPopoverProps): JSX.Element;
-    displayName: string;
-};
+declare const Popover: ({ children, align, theme, iconName, iconSize, iconColor, customClass, style, customStyle, ...rest }: IPopoverProps) => JSX.Element;
 
-export { _default as default };
+export { Popover as default };

package/lib/popover/index.js

@@ -21,21 +21,26 @@ var _buttons = _interopRequireDefault(require("../buttons"));
 var _icons = _interopRequireDefault(require("../icons"));
 var _PopoverText = _interopRequireDefault(require("./PopoverText"));
 var _PopoverTitle = _interopRequireDefault(require("./PopoverTitle"));
-var _withDropdown = _interopRequireDefault(require("../dropdown/withDropdown"));
 require("../assets/styles/popover.scss");
+const _excluded = ["children", "align", "theme", "iconName", "iconSize", "iconColor", "customClass", "style", "customStyle"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 const Popover = _ref => {
   let {
-    children,
-    align = 'left',
-    theme = 'dark',
-    iconName,
-    iconSize = 16,
-    iconColor = '',
-    customClass = '',
-    style
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_buttons.default, {
+      children,
+      align = 'left',
+      theme = 'dark',
+      iconName,
+      iconSize = 16,
+      iconColor = '',
+      customClass = '',
+      style,
+      customStyle
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_buttons.default, _extends({
     round: true,
     dropdown: true,
     transparent: true,
@@ -55,9 +60,10 @@ const Popover = _ref => {
     onClick: e => {
       e.preventDefault();
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: `${customClass} popovercontainer -${theme}`,
-    "data-testid": "popover-container"
+  }, rest), /*#__PURE__*/_react.default.createElement("div", {
+    className: `popovercontainer -${theme} ${customClass}`,
+    "data-testid": "popover-container",
+    style: customStyle
   }, children));
 };
-var _default = exports.default = (0, _withDropdown.default)(Popover);
+var _default = exports.default = Popover;

package/lib/popover/types.d.ts

@@ -2,6 +2,7 @@ import { ReactNode, CSSProperties } from 'react';
 import { Position } from '../@types/Position.js';
 import { SizePixels } from '../@types/SizePixels.js';
 import { IconNames } from '../@types/Icon.js';
+import { PermissionAttr } from '../@types/PermissionAttr.js';
 import '../icons/helper.js';
 
 interface PopoverTitleProps {
@@ -18,6 +19,16 @@ interface IPopoverProps {
     theme?: 'light' | 'dark';
     align?: Extract<Position, 'left' | 'right'>;
     iconSize?: Extract<SizePixels, 10 | 16 | 24 | 32 | 40 | 64>;
+    disabled?: boolean;
+    customStyle?: CSSProperties;
+    isLoading?: boolean;
+    visible?: boolean;
+    skeletonize?: boolean;
+    tooltipPosition?: Exclude<Position, 'center'>;
+    tooltipWidth?: string | number;
+    tooltip?: string;
+    handlerClose?: (cb: () => void) => void;
+    permissionAttr?: PermissionAttr | PermissionAttr[];
     style?: CSSProperties;
 }
 

package/lib/tabs/DropdownItems.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _buttons = _interopRequireDefault(require("../buttons"));
+var _list = _interopRequireWildcard(require("../list"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const DropdownItems = _ref => {
+  let {
+    handlerClick,
+    handlerRemovePanel,
+    dropdownPanels = [],
+    tabMenuSize = 'medium'
+  } = _ref;
+  return dropdownPanels.length > 0 ? /*#__PURE__*/_react.default.createElement(_buttons.default, {
+    dropdown: true,
+    dropdownAlign: "right",
+    transparent: true,
+    boxShadow: false,
+    size: "large",
+    customClass: "dropdownbutton"
+  }, /*#__PURE__*/_react.default.createElement(_list.default, {
+    customClass: "dropdown-hide-tabs"
+  }, dropdownPanels.map((panel, index) => {
+    const {
+      id,
+      title,
+      closeable,
+      iconAlign,
+      icon,
+      iconName,
+      disabled
+    } = panel.props;
+    return /*#__PURE__*/_react.default.createElement(_list.ListItem, {
+      key: id
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "menuitem"
+    }, /*#__PURE__*/_react.default.createElement(_buttons.default, {
+      className: "btn menubutton",
+      boxShadow: false,
+      onClick: () => handlerClick === null || handlerClick === void 0 ? void 0 : handlerClick(id),
+      iconAlign: iconAlign,
+      iconName: iconName,
+      icon: icon,
+      disabled: disabled,
+      label: title,
+      size: tabMenuSize,
+      transparent: true
+    }), closeable && /*#__PURE__*/_react.default.createElement("button", {
+      className: "closepanel",
+      onClick: () => {
+        handlerRemovePanel === null || handlerRemovePanel === void 0 ? void 0 : handlerRemovePanel(id, index, true);
+      }
+    })));
+  }))) : null;
+};
+var _default = exports.default = DropdownItems;

package/lib/tabs/DropdownTabs.js

@@ -4,11 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _lodash = _interopRequireDefault(require("lodash"));
 var _react = _interopRequireDefault(require("react"));
 var _buttons = _interopRequireDefault(require("../buttons"));
 var _list = _interopRequireWildcard(require("../list"));
 var _useTabs = require("./useTabs");
-var _lodash = _interopRequireDefault(require("lodash"));
+var _2 = require("..");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -26,16 +27,25 @@ const DropdownTab = _ref => {
   } = _ref;
   const {
     selectTab,
-    removeTab
+    removeTab,
+    selectedTabId
   } = (0, _useTabs.useTabs)();
   return /*#__PURE__*/_react.default.createElement(_list.ListItem, {
-    key: id
+    key: id,
+    onClick: () => selectTab(id)
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "menuitem"
-  }, /*#__PURE__*/_react.default.createElement(_buttons.default, {
+  }, selectedTabId === id ? /*#__PURE__*/_react.default.createElement(_2.Icon, {
+    name: "checkmark",
+    color: "#A10D0D"
+  }) : /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: 16,
+      height: 16
+    }
+  }), /*#__PURE__*/_react.default.createElement(_buttons.default, {
     className: "btn menubutton",
     boxShadow: false,
-    onClick: () => selectTab(id),
     iconAlign: iconAlign,
     iconName: iconName,
     icon: icon,
@@ -53,16 +63,20 @@ const DropdownTabs = _ref2 => {
     tabs = [],
     tabMenuSize = 'medium'
   } = _ref2;
+  const {
+    selectedTabId
+  } = (0, _useTabs.useTabs)();
+  const hasSelectedTab = tabs.some(tab => tab.id === selectedTabId);
   const hasTabs = tabs.length > 0;
   const uniqueTabs = _lodash.default.uniqBy(tabs, 'id');
-  if (tabs.length === 0) return null;
+  if (!hasTabs) return null;
   return /*#__PURE__*/_react.default.createElement(_buttons.default, {
     dropdown: true,
     dropdownAlign: "right",
     transparent: true,
     boxShadow: false,
     size: "large",
-    customClass: `dropdownbutton ${hasTabs ? 'show' : ''}`
+    customClass: `dropdownbutton ${hasTabs ? 'show' : ''} ${hasSelectedTab ? 'has-selected' : ''}`
   }, /*#__PURE__*/_react.default.createElement(_list.default, {
     customClass: "dropdown-hide-tabs"
   }, uniqueTabs.map(tab => /*#__PURE__*/_react.default.createElement(DropdownTab, _extends({

package/lib/tabs/Menu.d.ts

@@ -6,6 +6,6 @@ import '../@types/PermissionAttr.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
 
-declare const Menu: ({ toolbar, customClassForToolBar, tabWidth, ...props }: MenuProps) => JSX.Element;
+declare const Menu: ({ toolbar, customClassForToolBar, tabWidth, tabsWithError, ...props }: MenuProps) => JSX.Element;
 
 export { Menu as default };

package/lib/tabs/Menu.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _MenuTabs = _interopRequireDefault(require("./MenuTabs"));
 var _DropdownTabs = _interopRequireDefault(require("./DropdownTabs"));
 var _useTabs = require("./useTabs");
-const _excluded = ["toolbar", "customClassForToolBar", "tabWidth"];
+const _excluded = ["toolbar", "customClassForToolBar", "tabWidth", "tabsWithError"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
@@ -16,7 +16,8 @@ const Menu = _ref => {
   let {
       toolbar,
       customClassForToolBar = '',
-      tabWidth = 'auto'
+      tabWidth = 'auto',
+      tabsWithError
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const {
@@ -27,6 +28,7 @@ const Menu = _ref => {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "menucontainer"
   }, /*#__PURE__*/_react.default.createElement(_MenuTabs.default, {
+    tabsWithError: tabsWithError,
     tabs: menuTabs,
     tabWidth: tabWidth,
     tabMenuSize: props.tabMenuSize,

package/lib/tabs/MenuItems.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _buttons = _interopRequireDefault(require("../buttons"));
+var helpers = _interopRequireWildcard(require("./tabHelpers"));
+var _permissionValidations = require("../permissionValidations");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const MenuItems = _ref => {
+  let {
+    handlerClick,
+    currentPanels,
+    handlerRemovePanel,
+    tabWidth = 'auto',
+    tabMenuSize = 'medium',
+    tabMenuAlign = 'left',
+    selectedTabId = '',
+    firstTabIdent = false
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("ul", {
+    className: "menu ".concat(firstTabIdent && '-firsttabident'),
+    style: helpers.menuStyles(tabMenuAlign)
+  }, currentPanels === null || currentPanels === void 0 ? void 0 : currentPanels.map((panel, index) => {
+    const {
+      id,
+      icon,
+      title,
+      tooltip,
+      disabled,
+      iconName,
+      closeable,
+      iconAlign,
+      tooltipWidth,
+      permissionAttr,
+      tooltipPosition
+    } = panel.props;
+    const onDenied = (0, _permissionValidations.actionsOnPermissionDenied)(helpers.onDeniedOptions, permissionAttr);
+    return onDenied.unvisible ? null : /*#__PURE__*/_react.default.createElement("li", {
+      key: id,
+      style: {
+        width: tabWidth
+      },
+      className: "menuitem ".concat(selectedTabId === id && 'selected')
+    }, /*#__PURE__*/_react.default.createElement(_buttons.default, {
+      className: "btn menubutton",
+      boxShadow: false,
+      onClick: () => handlerClick === null || handlerClick === void 0 ? void 0 : handlerClick(id),
+      iconAlign: iconAlign,
+      iconName: iconName,
+      icon: icon,
+      disabled: disabled || !!onDenied.disabled,
+      label: title,
+      size: tabMenuSize,
+      tooltip: tooltip || title,
+      tooltipPosition: tooltipPosition,
+      tooltipWidth: tooltipWidth
+    }), closeable && currentPanels.length > 1 && /*#__PURE__*/_react.default.createElement("button", {
+      className: "closepanel",
+      onClick: () => {
+        handlerRemovePanel === null || handlerRemovePanel === void 0 ? void 0 : handlerRemovePanel(id, index);
+      }
+    }));
+  }));
+};
+var _default = exports.default = MenuItems;

package/lib/tabs/MenuTabs.js

@@ -28,7 +28,8 @@ const MenuTab = _ref => {
     tooltip,
     tooltipPosition,
     tooltipWidth,
-    closeable
+    closeable,
+    tabsWithError
   } = _ref;
   const {
     selectedTabId,
@@ -37,12 +38,17 @@ const MenuTab = _ref => {
     tabsCount
   } = (0, _useTabs.useTabs)();
   const onDenied = (0, _permissionValidations.actionsOnPermissionDenied)(helpers.onDeniedOptions, permissionAttr);
+  const withErrorInContent = tabsWithError?.includes(id);
   return onDenied.unvisible ? null : /*#__PURE__*/_react.default.createElement("li", {
     key: id,
     style: {
       width: tabWidth
     },
-    className: `menuitem ${selectedTabId === id && 'selected'}`
+    className: `
+          menuitem 
+          ${selectedTabId === id && 'selected'} 
+          ${withErrorInContent && 'witherrorcontent'}
+        `
   }, /*#__PURE__*/_react.default.createElement(_buttons.default, {
     className: "btn menubutton",
     boxShadow: false,
@@ -67,9 +73,13 @@ const MenuTabs = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     tabWidth = 'auto',
     tabMenuSize = 'medium',
     tabMenuAlign = 'left',
-    firstTabIdent = false
+    firstTabIdent = false,
+    tabsWithError
   } = _ref2;
-  const uniqueTabs = _lodash.default.uniqBy(tabs, 'id');
+  const {
+    keepPanelsInOrder
+  } = (0, _useTabs.useTabs)();
+  const uniqueTabs = keepPanelsInOrder ? _lodash.default.sortBy(_lodash.default.uniqBy(tabs, 'id'), tabPanel => keepPanelsInOrder.indexOf(tabPanel.id)) : _lodash.default.uniqBy(tabs, 'id');
   return /*#__PURE__*/_react.default.createElement("ul", {
     className: `menu ${firstTabIdent && '-firsttabident'}`,
     style: helpers.menuStyles(tabMenuAlign),
@@ -77,7 +87,8 @@ const MenuTabs = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   }, uniqueTabs.map(tab => /*#__PURE__*/_react.default.createElement(MenuTab, _extends({
     key: tab.id,
     tabMenuSize: tabMenuSize,
-    tabWidth: tabWidth
+    tabWidth: tabWidth,
+    tabsWithError: tabsWithError
   }, tab))));
 });
 MenuTabs.displayName = 'MenuTabs';

package/lib/tabs/context.d.ts

@@ -7,6 +7,6 @@ import '../@types/Icon.js';
 import '../icons/helper.js';
 
 declare const TabsContext: React__default.Context<TabsContextType>;
-declare function TabsProvider({ children, tabs: tabsProp, container, selectedTab, onTabChange, onTabClose, tabsWidth: tabsWidthProp, firstTabIdent, }: TabsProviderProps): JSX.Element;
+declare function TabsProvider({ children, tabs: tabsProp, container, selectedTab, onTabChange, onTabClose, tabsWidth: tabsWidthProp, firstTabIdent, keepPanelsInOrder, keepTabOriginalPosition, }: TabsProviderProps): JSX.Element;
 
 export { TabsContext, TabsProvider };

package/lib/tabs/context.js

@@ -21,7 +21,9 @@ function TabsProvider(_ref) {
     onTabChange,
     onTabClose,
     tabsWidth: tabsWidthProp,
-    firstTabIdent = false
+    firstTabIdent = false,
+    keepPanelsInOrder,
+    keepTabOriginalPosition = true
   } = _ref;
   const [selectedTabId, setSelectedTabId] = _react.default.useState(selectedTab);
   const [containerWidth, setContainerWidth] = (0, _react.useState)(() => {
@@ -61,7 +63,7 @@ function TabsProvider(_ref) {
     }
   }, [setTabs, menuTabs, tabs, dropdownTabs]);
   const selectTab = (0, _react.useCallback)(tabId => {
-    updateTabs(tabId);
+    if (!keepTabOriginalPosition) updateTabs(tabId);
     setSelectedTabId(tabId);
     if (onTabChange) {
       onTabChange(tabId);
@@ -117,11 +119,11 @@ function TabsProvider(_ref) {
       dropdownTabs,
       containerWidth,
       tabsCount,
-      updateTabs,
       selectTab,
       selectedTabId,
       removeTab,
-      menuRef
+      menuRef,
+      keepPanelsInOrder
     }
   }, children);
 }

package/lib/tabs/index.d.ts

@@ -7,6 +7,6 @@ import '../@types/PermissionAttr.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
 
-declare const Tabs: ({ toolbar, toolBarRef, children, firstTabIdent, handlerTabClick, handlerCloseTab, style, tabMenuSize, tabMenuAlign, tabMenuPosition, customClassForToolBar, tabsWidth, ...props }: ITabsPros) => JSX.Element;
+declare const Tabs: ({ toolbar, toolBarRef, children, firstTabIdent, handlerTabClick, handlerCloseTab, style, tabMenuSize, tabMenuAlign, tabMenuPosition, customClassForToolBar, tabsWidth, tabsWithError, keepPanelsInOrder, ...props }: ITabsPros) => JSX.Element;
 
 export { Tabs as default };

package/lib/tabs/index.js

@@ -16,7 +16,8 @@ var _Panel = _interopRequireDefault(require("./Panel"));
 var _tabHelpers = require("./tabHelpers");
 require("../assets/styles/tabs.scss");
 var _context = require("./context");
-const _excluded = ["toolbar", "toolBarRef", "children", "firstTabIdent", "handlerTabClick", "handlerCloseTab", "style", "tabMenuSize", "tabMenuAlign", "tabMenuPosition", "customClassForToolBar", "tabsWidth"];
+var _lodash = _interopRequireDefault(require("lodash"));
+const _excluded = ["toolbar", "toolBarRef", "children", "firstTabIdent", "handlerTabClick", "handlerCloseTab", "style", "tabMenuSize", "tabMenuAlign", "tabMenuPosition", "customClassForToolBar", "tabsWidth", "tabsWithError", "keepPanelsInOrder"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -36,12 +37,17 @@ const Tabs = _ref => {
       tabMenuAlign = 'left',
       tabMenuPosition = 'top',
       customClassForToolBar = '',
-      tabsWidth = 'auto'
+      tabsWidth = 'auto',
+      tabsWithError,
+      keepPanelsInOrder
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const containerRef = (0, _react.useRef)(null);
+  const childrensTabPanels = _react.default.Children.toArray(children).filter(childComp => /*#__PURE__*/_react.default.isValidElement(childComp) && !!childComp.props.id);
+  const childrensInOrder = keepPanelsInOrder ? _lodash.default.sortBy(childrensTabPanels, tabPanel => keepPanelsInOrder.indexOf(tabPanel.props.id)) : children;
   const content = (0, _react.useMemo)(() => {
     const menu = /*#__PURE__*/_react.default.createElement(_Menu.default, {
+      tabsWithError: tabsWithError,
       toolbar: toolbar,
       tabWidth: tabsWidth,
       customClassForToolBar: customClassForToolBar,
@@ -50,17 +56,18 @@ const Tabs = _ref => {
       firstTabIdent: firstTabIdent
     });
     if (tabMenuPosition === 'top' || tabMenuPosition === 'left') {
-      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, menu, children);
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, menu, childrensInOrder);
     }
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, children, menu);
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, childrensInOrder, menu);
   }, [children, tabMenuPosition]);
   return /*#__PURE__*/_react.default.createElement(_context.TabsProvider, _extends({
-    tabs: children,
+    tabs: childrensInOrder,
     container: containerRef,
     onTabChange: handlerTabClick,
     onTabClose: handlerCloseTab,
     tabsWidth: tabsWidth,
-    firstTabIdent: firstTabIdent
+    firstTabIdent: firstTabIdent,
+    keepPanelsInOrder: keepPanelsInOrder
   }, props), /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef,
     className: (0, _tabHelpers.tabsClass)(tabMenuPosition),

package/lib/tabs/types.d.ts

@@ -11,11 +11,11 @@ type TabsContextType = {
     dropdownTabs: TabProps[];
     selectedTabId: string | number | null;
     selectTab: (tabId: string | number) => void;
-    updateTabs: (tabId: string | number) => void;
     removeTab: (tabId: string | number) => void;
     containerWidth: number;
     tabsCount: number;
     menuRef: RefObject<HTMLUListElement>;
+    keepPanelsInOrder?: Array<string | number>;
 };
 interface TabsProviderProps {
     children: React.ReactNode;
@@ -26,6 +26,8 @@ interface TabsProviderProps {
     onTabChange?: (tabId: string | number) => void;
     onTabClose?: (tabId: string) => void;
     firstTabIdent?: boolean;
+    keepPanelsInOrder?: Array<string | number>;
+    keepTabOriginalPosition?: boolean;
 }
 interface ITabsPros {
     style?: CSSProperties;
@@ -41,6 +43,9 @@ interface ITabsPros {
     handlerCloseTab?: (id?: string, idx?: string) => void;
     customClassForToolBar?: string;
     tabsWidth?: string | number;
+    tabsWithError?: Array<string | number>;
+    keepPanelsInOrder?: Array<string | number>;
+    keepTabOriginalPosition?: boolean;
 }
 interface TabProps {
     id: string | number;
@@ -58,6 +63,7 @@ interface TabProps {
     tooltipWidth?: string | number;
     closeable?: boolean;
     tabsLength?: number;
+    tabsWithError?: Array<string | number>;
 }
 interface MenuProps {
     toolbar?: ReactElement;
@@ -71,6 +77,7 @@ interface MenuProps {
     tabMenuSize?: Size;
     handlerClick?: (id?: string) => void;
     handlerRemovePanel?: (id?: string, idx?: number, bool?: boolean) => void;
+    tabsWithError?: Array<string | number>;
 }
 interface DropdownProps extends MenuProps {
 }

package/lib/toolbar/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, CSSProperties, ReactElement } from 'react';
+import { ReactNode, CSSProperties, ReactElement, MutableRefObject } from 'react';
 import { ButtonTypes } from '../@types/ButtonTypes.js';
 import { Position } from '../@types/Position.js';
 import { Size } from '../@types/Size.js';
@@ -28,6 +28,7 @@ interface IButtonBarProps {
     boxShadow?: boolean;
     id?: string;
     onNodeElementClick?: (node: NodeItem) => void;
+    buttonRef?: MutableRefObject<HTMLButtonElement | null> | ((ref: HTMLButtonElement | null) => void);
 }
 interface ILabelBarProps {
     iconName?: IconNames;