linear-react-components-ui 1.1.13 → 1.1.14-beta.0

package/lib/table/index.js

@@ -1,35 +1,36 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "TBody", {
   enumerable: true,
-  get: function () {
+  get: function get() {
     return _Body.default;
   }
 });
 Object.defineProperty(exports, "THeader", {
   enumerable: true,
-  get: function () {
+  get: function get() {
     return _Header.default;
   }
 });
 Object.defineProperty(exports, "TRow", {
   enumerable: true,
-  get: function () {
+  get: function get() {
     return _Row.default;
   }
 });
 Object.defineProperty(exports, "Td", {
   enumerable: true,
-  get: function () {
+  get: function get() {
     return _RowColumn.default;
   }
 });
 Object.defineProperty(exports, "Th", {
   enumerable: true,
-  get: function () {
+  get: function get() {
     return _HeaderColumn.default;
   }
 });
@@ -43,96 +44,114 @@ var _HeaderColumn = _interopRequireDefault(require("./HeaderColumn"));
 var _RowColumn = _interopRequireDefault(require("./RowColumn"));
 require("../assets/styles/table.scss");
 var _helpers = _interopRequireDefault(require("./helpers"));
-const _excluded = ["children"],
+var _excluded = ["children"],
   _excluded2 = ["onColClick", "onRowClick", "bodyScrollable", "vertical", "skeletonize", "strict", "skeletonHeight", "skeletonInHeader", "skeletonInRows", "customClass", "bordered", "hovered", "headerColored", "condensed", "selectedRowId", "striped"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 // TODO - Precisa finalizar o scroll no corpo da tabela.
-const getClass = _ref => {
-  let {
-    customClass,
-    striped,
-    bordered,
-    hovered,
-    skeletonize,
-    headerColored,
-    condensed,
-    vertical,
-    bodyScrollable,
-    skeletonInRows = 10
-  } = _ref;
+var getClass = function getClass(_ref) {
+  var customClass = _ref.customClass,
+    striped = _ref.striped,
+    bordered = _ref.bordered,
+    hovered = _ref.hovered,
+    skeletonize = _ref.skeletonize,
+    headerColored = _ref.headerColored,
+    condensed = _ref.condensed,
+    vertical = _ref.vertical,
+    bodyScrollable = _ref.bodyScrollable,
+    _ref$skeletonInRows = _ref.skeletonInRows,
+    skeletonInRows = _ref$skeletonInRows === void 0 ? 10 : _ref$skeletonInRows;
   return "table-component ".concat(customClass, " ").concat(striped && '-striped', " \n  ").concat(bordered && '-bordered', " ").concat(hovered && '-hovered', " ").concat(headerColored && '-headercolor', "\n  ").concat(condensed && '-condensed', "\n  ").concat(vertical && '-vertical', "\n  ").concat(skeletonize && !skeletonInRows ? '-skeletonized' : '', "\n  ").concat(bodyScrollable ? '-scrollable' : '');
 };
-const Table = _ref2 => {
-  let {
-      children
-    } = _ref2,
+var Table = function Table(_ref2) {
+  var children = _ref2.children,
     props = _objectWithoutProperties(_ref2, _excluded);
-  const {
-      onColClick,
-      onRowClick,
-      bodyScrollable,
-      vertical,
-      skeletonize,
-      strict,
-      skeletonHeight,
-      skeletonInHeader,
-      skeletonInRows,
-      customClass,
-      bordered,
-      hovered,
-      headerColored,
-      condensed,
-      selectedRowId: selectedRowIdFromProps,
-      striped
-    } = props,
+  var onColClick = props.onColClick,
+    onRowClick = props.onRowClick,
+    bodyScrollable = props.bodyScrollable,
+    vertical = props.vertical,
+    skeletonize = props.skeletonize,
+    strict = props.strict,
+    skeletonHeight = props.skeletonHeight,
+    skeletonInHeader = props.skeletonInHeader,
+    skeletonInRows = props.skeletonInRows,
+    customClass = props.customClass,
+    bordered = props.bordered,
+    hovered = props.hovered,
+    headerColored = props.headerColored,
+    condensed = props.condensed,
+    selectedRowIdFromProps = props.selectedRowId,
+    striped = props.striped,
     rest = _objectWithoutProperties(props, _excluded2);
-  const [selectedRowId, setSelectedRowId] = (0, _react.useState)(selectedRowIdFromProps);
-  const [bodyScrollWidth, setBodyScrollWidth] = (0, _react.useState)(0);
-  const [columnsWidth, setColumnsWidth] = (0, _react.useState)([]);
-  const [columnsCount, setColumnsCount] = (0, _react.useState)(0);
-  const bodyContainerRef = (0, _react.useRef)(null);
-  const handleSelectRow = (0, _react.useCallback)(selectedId => {
+  var _useState = (0, _react.useState)(selectedRowIdFromProps),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedRowId = _useState2[0],
+    setSelectedRowId = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    bodyScrollWidth = _useState4[0],
+    setBodyScrollWidth = _useState4[1];
+  var _useState5 = (0, _react.useState)([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    columnsWidth = _useState6[0],
+    setColumnsWidth = _useState6[1];
+  var _useState7 = (0, _react.useState)(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    columnsCount = _useState8[0],
+    setColumnsCount = _useState8[1];
+  var bodyContainerRef = (0, _react.useRef)(null);
+  var handleSelectRow = (0, _react.useCallback)(function (selectedId) {
     setSelectedRowId(selectedId);
   }, []);
-  const handlerSetColumnsWidth = (0, _react.useCallback)(widths => {
+  var handlerSetColumnsWidth = (0, _react.useCallback)(function (widths) {
     if (!_lodash.default.isEmpty(widths) && _lodash.default.isEmpty(columnsWidth)) setColumnsWidth(widths);
   }, [columnsWidth]);
-  const handlerSetColumnsCount = (0, _react.useCallback)(count => setColumnsCount(count), []);
-  const getContextValues = (0, _react.useCallback)(() => ({
-    bodyContainerRef,
-    bodyScrollWidth,
-    selectedRowId,
-    vertical,
-    skeletonize,
-    skeletonHeight,
-    skeletonInHeader,
-    skeletonInRows,
-    strict,
-    columnsCount,
-    handleSelectRow,
-    handleTableColClick: onColClick,
-    handleTableRowClick: onRowClick,
-    handlerSetColumnsWidth,
-    columnsWidth,
-    handlerSetColumnsCount
-  }), [bodyContainerRef, bodyScrollWidth, selectedRowId, vertical, skeletonize, skeletonHeight, skeletonInHeader, skeletonInRows, strict, columnsCount, handleSelectRow, onColClick, onRowClick, handlerSetColumnsWidth, columnsWidth, handlerSetColumnsCount]);
-  const contextValues = (0, _react.useMemo)(() => getContextValues(), [getContextValues]);
-  (0, _react.useEffect)(() => {
+  var handlerSetColumnsCount = (0, _react.useCallback)(function (count) {
+    return setColumnsCount(count);
+  }, []);
+  var getContextValues = (0, _react.useCallback)(function () {
+    return {
+      bodyContainerRef: bodyContainerRef,
+      bodyScrollWidth: bodyScrollWidth,
+      selectedRowId: selectedRowId,
+      vertical: vertical,
+      skeletonize: skeletonize,
+      skeletonHeight: skeletonHeight,
+      skeletonInHeader: skeletonInHeader,
+      skeletonInRows: skeletonInRows,
+      strict: strict,
+      columnsCount: columnsCount,
+      handleSelectRow: handleSelectRow,
+      handleTableColClick: onColClick,
+      handleTableRowClick: onRowClick,
+      handlerSetColumnsWidth: handlerSetColumnsWidth,
+      columnsWidth: columnsWidth,
+      handlerSetColumnsCount: handlerSetColumnsCount
+    };
+  }, [bodyContainerRef, bodyScrollWidth, selectedRowId, vertical, skeletonize, skeletonHeight, skeletonInHeader, skeletonInRows, strict, columnsCount, handleSelectRow, onColClick, onRowClick, handlerSetColumnsWidth, columnsWidth, handlerSetColumnsCount]);
+  var contextValues = (0, _react.useMemo)(function () {
+    return getContextValues();
+  }, [getContextValues]);
+  (0, _react.useEffect)(function () {
     if (bodyScrollable && bodyContainerRef && bodyContainerRef.current) {
-      const {
-        offsetWidth,
-        clientWidth
-      } = bodyContainerRef.current;
-      const scrollWidth = offsetWidth - clientWidth;
+      var _bodyContainerRef$cur = bodyContainerRef.current,
+        offsetWidth = _bodyContainerRef$cur.offsetWidth,
+        clientWidth = _bodyContainerRef$cur.clientWidth;
+      var scrollWidth = offsetWidth - clientWidth;
       if (scrollWidth !== bodyScrollWidth) setBodyScrollWidth(scrollWidth);
     }
   }, []);
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     setSelectedRowId(props.selectedRowId);
   }, [props.selectedRowId]);
   return /*#__PURE__*/_react.default.createElement(_helpers.default.Provider, {
@@ -146,4 +165,5 @@ const Table = _ref2 => {
     className: getClass(props)
   }, rest), children));
 };
-var _default = exports.default = Table;
+var _default = Table;
+exports.default = _default;

package/lib/table/types.d.ts

@@ -25,9 +25,6 @@ interface ITableHeaderProps extends TableHTMLAttributes<HTMLTableElement> {
     textAlign?: string;
     visible?: boolean;
     id?: string;
-    rowSpan?: number;
-    colSpan?: number;
-    isMenuColumn?: boolean;
 }
 interface ITableBodyProps extends TableHTMLAttributes<HTMLTableElement> {
     children?: ReactNode;

package/lib/tabs/{MenuTabs.d.ts → DropdownItems.d.ts}

@@ -1,11 +1,11 @@
-import React__default from 'react';
 import { MenuProps } from './types.js';
+import 'react';
 import '../@types/Size.js';
 import '../@types/Position.js';
 import '../@types/PermissionAttr.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
 
-declare const MenuTabs: React__default.ForwardRefExoticComponent<MenuProps & React__default.RefAttributes<HTMLUListElement>>;
+declare const DropdownItems: ({ handlerClick, handlerRemovePanel, dropdownPanels, tabMenuSize, }: MenuProps) => JSX.Element | null;
 
-export { MenuTabs as default };
+export { DropdownItems as default };

package/lib/tabs/DropdownItems.js

@@ -0,0 +1,65 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+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(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var DropdownItems = function DropdownItems(_ref) {
+  var handlerClick = _ref.handlerClick,
+    handlerRemovePanel = _ref.handlerRemovePanel,
+    _ref$dropdownPanels = _ref.dropdownPanels,
+    dropdownPanels = _ref$dropdownPanels === void 0 ? [] : _ref$dropdownPanels,
+    _ref$tabMenuSize = _ref.tabMenuSize,
+    tabMenuSize = _ref$tabMenuSize === void 0 ? 'medium' : _ref$tabMenuSize;
+  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(function (panel, index) {
+    var _panel$props = panel.props,
+      id = _panel$props.id,
+      title = _panel$props.title,
+      closeable = _panel$props.closeable,
+      iconAlign = _panel$props.iconAlign,
+      icon = _panel$props.icon,
+      iconName = _panel$props.iconName,
+      disabled = _panel$props.disabled;
+    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: function onClick() {
+        return 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: function onClick() {
+        handlerRemovePanel === null || handlerRemovePanel === void 0 ? void 0 : handlerRemovePanel(id, index, true);
+      }
+    })));
+  }))) : null;
+};
+var _default = DropdownItems;
+exports.default = _default;

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: ({ menuRef, toolbar, toolBarRef, customClassForToolBar, ...props }: MenuProps) => JSX.Element;
 
 export { Menu as default };

package/lib/tabs/Menu.js

@@ -5,42 +5,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _MenuTabs = _interopRequireDefault(require("./MenuTabs"));
-var _DropdownTabs = _interopRequireDefault(require("./DropdownTabs"));
-var _useTabs = require("./useTabs");
-const _excluded = ["toolbar", "customClassForToolBar", "tabWidth"];
+var _MenuItems = _interopRequireDefault(require("./MenuItems"));
+var _DropdownItems = _interopRequireDefault(require("./DropdownItems"));
+var _excluded = ["menuRef", "toolbar", "toolBarRef", "customClassForToolBar"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-const Menu = _ref => {
-  let {
-      toolbar,
-      customClassForToolBar = '',
-      tabWidth = 'auto'
-    } = _ref,
+var Menu = function Menu(_ref) {
+  var menuRef = _ref.menuRef,
+    toolbar = _ref.toolbar,
+    toolBarRef = _ref.toolBarRef,
+    _ref$customClassForTo = _ref.customClassForToolBar,
+    customClassForToolBar = _ref$customClassForTo === void 0 ? '' : _ref$customClassForTo,
     props = _objectWithoutProperties(_ref, _excluded);
-  const {
-    menuTabs,
-    menuRef,
-    dropdownTabs
-  } = (0, _useTabs.useTabs)();
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "menucontainer"
-  }, /*#__PURE__*/_react.default.createElement(_MenuTabs.default, {
-    tabs: menuTabs,
-    tabWidth: tabWidth,
-    tabMenuSize: props.tabMenuSize,
-    tabMenuAlign: props.tabMenuAlign,
-    firstTabIdent: props.firstTabIdent,
-    ref: menuRef
-  }), /*#__PURE__*/_react.default.createElement(_DropdownTabs.default, {
-    tabs: dropdownTabs,
-    tabWidth: tabWidth,
-    tabMenuSize: props.tabMenuSize,
-    tabMenuAlign: props.tabMenuAlign,
-    firstTabIdent: props.firstTabIdent
-  }), toolbar && /*#__PURE__*/_react.default.cloneElement(toolbar, {
-    customClass: "menubar ".concat(customClassForToolBar)
+    className: "menucontainer",
+    ref: function ref(_ref2) {
+      menuRef === null || menuRef === void 0 ? void 0 : menuRef(_ref2);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_MenuItems.default, props), /*#__PURE__*/_react.default.createElement(_DropdownItems.default, props), toolbar && /*#__PURE__*/_react.default.cloneElement(toolbar, {
+    customClass: "menubar ".concat(customClassForToolBar),
+    innerRef: toolBarRef ? function (r) {
+      toolBarRef(r);
+    } : undefined
   }));
 };
-var _default = exports.default = Menu;
+var _default = Menu;
+exports.default = _default;

package/lib/tabs/MenuItems.d.ts

@@ -0,0 +1,11 @@
+import { MenuProps } from './types.js';
+import 'react';
+import '../@types/Size.js';
+import '../@types/Position.js';
+import '../@types/PermissionAttr.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
+
+declare const MenuItems: ({ handlerClick, currentPanels, handlerRemovePanel, tabWidth, tabMenuSize, tabMenuAlign, selectedTabId, firstTabIdent, }: MenuProps) => JSX.Element;
+
+export { MenuItems as default };

package/lib/tabs/MenuItems.js

@@ -0,0 +1,76 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+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(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var MenuItems = function MenuItems(_ref) {
+  var handlerClick = _ref.handlerClick,
+    currentPanels = _ref.currentPanels,
+    handlerRemovePanel = _ref.handlerRemovePanel,
+    _ref$tabWidth = _ref.tabWidth,
+    tabWidth = _ref$tabWidth === void 0 ? 'auto' : _ref$tabWidth,
+    _ref$tabMenuSize = _ref.tabMenuSize,
+    tabMenuSize = _ref$tabMenuSize === void 0 ? 'medium' : _ref$tabMenuSize,
+    _ref$tabMenuAlign = _ref.tabMenuAlign,
+    tabMenuAlign = _ref$tabMenuAlign === void 0 ? 'left' : _ref$tabMenuAlign,
+    _ref$selectedTabId = _ref.selectedTabId,
+    selectedTabId = _ref$selectedTabId === void 0 ? '' : _ref$selectedTabId,
+    _ref$firstTabIdent = _ref.firstTabIdent,
+    firstTabIdent = _ref$firstTabIdent === void 0 ? false : _ref$firstTabIdent;
+  return /*#__PURE__*/_react.default.createElement("ul", {
+    className: "menu ".concat(firstTabIdent && '-firsttabident'),
+    style: helpers.menuStyles(tabMenuAlign)
+  }, currentPanels === null || currentPanels === void 0 ? void 0 : currentPanels.map(function (panel, index) {
+    var _panel$props = panel.props,
+      id = _panel$props.id,
+      icon = _panel$props.icon,
+      title = _panel$props.title,
+      tooltip = _panel$props.tooltip,
+      disabled = _panel$props.disabled,
+      iconName = _panel$props.iconName,
+      closeable = _panel$props.closeable,
+      iconAlign = _panel$props.iconAlign,
+      tooltipWidth = _panel$props.tooltipWidth,
+      permissionAttr = _panel$props.permissionAttr,
+      tooltipPosition = _panel$props.tooltipPosition;
+    var 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: function onClick() {
+        return 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: function onClick() {
+        handlerRemovePanel === null || handlerRemovePanel === void 0 ? void 0 : handlerRemovePanel(id, index);
+      }
+    }));
+  }));
+};
+var _default = MenuItems;
+exports.default = _default;

package/lib/tabs/Panel.d.ts

@@ -6,6 +6,6 @@ import '../@types/PermissionAttr.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
 
-declare const Panel: (props: PanelProps) => JSX.Element;
+declare const Panel: ({ id, children, onEndReached, permissionAttr, customClass, onEndReachedThreshold, }: PanelProps) => JSX.Element;
 
 export { Panel as default };