linear-react-components-ui 1.1.0-beta.4 → 1.1.0-beta.5

package/lib/assets/styles/tabs.scss

@@ -36,6 +36,10 @@ $dropdown-width: 38px;
     display: flex;
     flex: 1;
     overflow: hidden;
+
+    &.-firsttabident>.menuitem:first-child {
+      margin-left: 15px;
+    }
   }
   .menu>.menuitem {
     border-bottom: 0;

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, }: TabsProviderProps): JSX.Element;
+declare function TabsProvider({ children, tabs: tabsProp, container, selectedTab, onTabChange, onTabClose, tabsWidth: tabsWidthProp, firstTabIdent, }: TabsProviderProps): JSX.Element;
 
 export { TabsContext, TabsProvider };

package/lib/tabs/context.js

@@ -24,6 +24,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var TabsContext = exports.TabsContext = /*#__PURE__*/(0, _react.createContext)({});
 function TabsProvider(_ref) {
+  var _menuRef$current$clie, _menuRef$current;
   var children = _ref.children,
     tabsProp = _ref.tabs,
     container = _ref.container,
@@ -31,7 +32,9 @@ function TabsProvider(_ref) {
     selectedTab = _ref$selectedTab === void 0 ? null : _ref$selectedTab,
     onTabChange = _ref.onTabChange,
     onTabClose = _ref.onTabClose,
-    tabsWidthProp = _ref.tabsWidth;
+    tabsWidthProp = _ref.tabsWidth,
+    _ref$firstTabIdent = _ref.firstTabIdent,
+    firstTabIdent = _ref$firstTabIdent === void 0 ? false : _ref$firstTabIdent;
   var _React$useState = _react["default"].useState(selectedTab),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     selectedTabId = _React$useState2[0],
@@ -48,10 +51,12 @@ function TabsProvider(_ref) {
     tabs = _useState4[0],
     setTabs = _useState4[1];
   var menuRef = (0, _react.useRef)(null);
+  var menuSize = ((_menuRef$current$clie = (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 ? void 0 : _menuRef$current.clientWidth) !== null && _menuRef$current$clie !== void 0 ? _menuRef$current$clie : 0) - 38 - (firstTabIdent ? 15 : 0);
   var tabsWidth = (0, _react.useMemo)(function () {
     if (typeof tabsWidthProp === 'string') return tabsWidthProp === 'auto' ? 100 : parseInt(tabsWidthProp) || 100;
     return tabsWidthProp;
   }, [tabsWidthProp]);
+  var maxTabs = Math.round(menuSize / tabsWidth);
   if (selectedTab && selectedTab !== selectedTabId) {
     setSelectedTabId(selectedTab);
   }
@@ -60,18 +65,12 @@ function TabsProvider(_ref) {
     setSelectedTabId((_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.id);
   }
   var dropdownTabs = (0, _react.useMemo)(function () {
-    var _menuRef$current$clie, _menuRef$current;
-    var menuSize = ((_menuRef$current$clie = (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 ? void 0 : _menuRef$current.clientWidth) !== null && _menuRef$current$clie !== void 0 ? _menuRef$current$clie : 0) - 38;
     if (menuSize === 0) return [];
-    var maxTabs = Math.floor(menuSize / tabsWidth);
     return tabs.slice(maxTabs);
-  }, [tabs, tabsWidth, containerWidth]);
+  }, [tabs, maxTabs, containerWidth]);
   var menuTabs = (0, _react.useMemo)(function () {
-    var _menuRef$current$clie2, _menuRef$current2;
-    var menuSize = ((_menuRef$current$clie2 = (_menuRef$current2 = menuRef.current) === null || _menuRef$current2 === void 0 ? void 0 : _menuRef$current2.clientWidth) !== null && _menuRef$current$clie2 !== void 0 ? _menuRef$current$clie2 : 0) - 38;
-    var maxTabs = Math.floor(menuSize / tabsWidth);
     return tabs.slice(0, maxTabs);
-  }, [tabs, tabsWidth, containerWidth]);
+  }, [tabs, maxTabs, containerWidth]);
   var tabsCount = tabs.length;
   var updateTabs = (0, _react.useCallback)(function (tabId) {
     var tabInDropdownIndex = dropdownTabs.findIndex(function (tab) {

package/lib/tabs/index.js

@@ -64,7 +64,8 @@ var Tabs = function Tabs(_ref) {
     container: containerRef,
     onTabChange: handlerTabClick,
     onTabClose: handlerCloseTab,
-    tabsWidth: tabsWidth
+    tabsWidth: tabsWidth,
+    firstTabIdent: firstTabIdent
   }, props), /*#__PURE__*/_react["default"].createElement("div", {
     ref: containerRef,
     className: (0, _tabHelpers.tabsClass)(tabMenuPosition),

package/lib/tabs/types.d.ts

@@ -25,6 +25,7 @@ interface TabsProviderProps {
     selectedTab?: string | number | null;
     onTabChange?: (tabId: string) => void;
     onTabClose?: (tabId: string) => void;
+    firstTabIdent?: boolean;
 }
 interface ITabsPros {
     style?: CSSProperties;
@@ -40,7 +41,6 @@ interface ITabsPros {
     handlerCloseTab?: (id?: string, idx?: string) => void;
     customClassForToolBar?: string;
     tabsWidth?: string | number;
-    tabsWidthOnExceedCount?: number;
 }
 interface TabProps {
     id: string | number;

package/package.json

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