linear-react-components-ui 1.1.21-beta.3 → 1.1.21-beta.5

package/lib/inputs/select/Dropdown.js

@@ -37,7 +37,8 @@ const Dropdown = props => {
     searchOnDropdown,
     handleOnKeydown,
     searchNotFoundText,
-    idKey
+    idKey,
+    selectFieldRef
   } = props;
   const [dropdownDynamicStyles, setDropdownDynamicStyles] = (0, _react.useState)(helper.returnDropdownDynamicStyles(_objectSpread({}, props)));
   (0, _react.useEffect)(() => {
@@ -48,7 +49,8 @@ const Dropdown = props => {
   return /*#__PURE__*/_react.default.createElement(_Popup.default, {
     align: "left",
     leftPosition: dropdownDynamicStyles.left,
-    topPosition: dropdownDynamicStyles.top
+    topPosition: dropdownDynamicStyles.top,
+    targetRef: selectFieldRef?.current
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "select-dropdown",
     ref: dropdownRef,

package/lib/inputs/select/multiple/index.js

@@ -29,7 +29,11 @@ const MultipleSelect = props => {
     showClearButton,
     rightElements = [],
     hint,
-    hintPosition = 'below'
+    hintPosition = 'below',
+    customClassForLabel,
+    customClassForWrapper,
+    customClassForInputContent,
+    customClassForSideButtons
   } = props;
   const [dataCombo, setDataCombo] = (0, _react.useState)(dataSource);
   const [currents, setCurrents] = (0, _react.useState)([]);
@@ -233,8 +237,9 @@ const MultipleSelect = props => {
     },
     onClick: onFocus,
     onKeyDown: onInputKeyDown,
-    customClassForWrapper: `selectwrapper ${(props.readOnly || shouldDisable() || shouldBeReadOnly()) && ' -undigitable'}`,
-    customClassForInputContent: "multiselect",
+    customClassForLabel: customClassForLabel,
+    customClassForWrapper: `selectwrapper ${(props.readOnly || shouldDisable() || shouldBeReadOnly()) && ' -undigitable'} ${customClassForWrapper}`,
+    customClassForInputContent: `multiselect ${customClassForInputContent}`,
     inputBaseRef: r => {
       selectWrapper.current = r;
     },
@@ -248,7 +253,8 @@ const MultipleSelect = props => {
         if (shouldDisable()) return null;
         return onClearClick();
       },
-      handlerOpenClose: onOpenClose
+      handlerOpenClose: onOpenClose,
+      customClassForSideButtons: customClassForSideButtons
     })]
   }), /*#__PURE__*/_react.default.createElement(_Selecteds.default, _extends({}, props, {
     currents: currents,

package/lib/inputs/select/simple/index.js

@@ -35,7 +35,11 @@ const SimpleSelect = props => {
     allOptions = undefined,
     showClearButton = false,
     searchNotFoundText,
-    rightElements = []
+    rightElements = [],
+    customClassForWrapper,
+    customClassForInputContent,
+    customClassForLabel,
+    customClassForSideButtons
   } = props;
   const descriptionKeyIsString = typeof descriptionKey === 'string';
   const dataSourceWithAllOptions = allOptions ? [{
@@ -262,8 +266,9 @@ const SimpleSelect = props => {
     },
     onClick: onFocus,
     onKeyDown: onInputKeyDown,
-    customClassForWrapper: `selectwrapper ${(undigitable || searchOnDropdown || shouldBeReadOnly()) && ' -undigitable'}`,
-    customClassForInputContent: "multiselect",
+    customClassForLabel: customClassForLabel,
+    customClassForWrapper: `selectwrapper ${(undigitable || searchOnDropdown || shouldBeReadOnly()) && ' -undigitable'} ${customClassForWrapper}`,
+    customClassForInputContent: `multiselect ${customClassForInputContent}`,
     inputBaseRef: r => {
       selectWrapper.current = r;
     },
@@ -277,7 +282,8 @@ const SimpleSelect = props => {
         if (shouldDisable()) return null;
         return onClearClick();
       },
-      handlerOpenClose: onOpenClose
+      handlerOpenClose: onOpenClose,
+      customClassForSideButtons: customClassForSideButtons
     })]
   })), opened && /*#__PURE__*/_react.default.createElement(_Dropdown.default, _extends({}, props, {
     opened: opened,

package/lib/inputs/select/types.d.ts

@@ -50,6 +50,10 @@ interface ISimpleSelectProps {
     onFocus?: () => void;
     allOptions?: AllOptions;
     inputRef?: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null> | ((ref: HTMLInputElement | HTMLTextAreaElement | null) => void);
+    customClassForWrapper?: string;
+    customClassForInputContent?: string;
+    customClassForLabel?: string;
+    customClassForSideButtons?: string;
     rightElements?: JSX.Element[];
     hintPosition?: 'below' | 'onLabelRight';
     themePopover?: 'light' | 'dark';

package/lib/inputs/types.d.ts

@@ -137,6 +137,7 @@ interface IActionButtonsSelectProps {
     dropDownOpened: boolean;
     showClearButton?: boolean;
     disabled?: boolean;
+    customClassForSideButtons?: string;
 }
 interface IButtonsProps {
     onClick?: (e: MouseEvent<HTMLButtonElement>) => void;

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/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/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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linear-react-components-ui",
-  "version": "1.1.21-beta.3",
+  "version": "1.1.21-beta.5",
   "description": "Linear Sistemas ReactJs Components",
   "main": "lib/index.js",
   "module": "lib/index.cjs",