linear-react-components-ui 1.1.26-beta.9 → 1.1.27-rc.0

package/lib/tabs/context.js

@@ -1,64 +1,131 @@
-import { j as F } from "../chunks/jsx-runtime.D1SHvdVE.js";
-import G, { createContext as H, useState as y, useRef as J, useMemo as I, useCallback as x, useEffect as B } from "react";
-import { _ as C } from "../chunks/lodash.CIAK_hAg.js";
-import { getTabs as D } from "./tabHelpers.js";
-const K = H({});
-function V({
-  children: E,
-  tabs: b,
-  container: d,
-  selectedTab: f = null,
-  onTabChange: T,
-  onTabClose: p,
-  tabsWidth: c,
-  firstTabIdent: M = !1,
-  keepTabOriginalPosition: O = !0
-}) {
-  const [o, l] = G.useState(f), [w, R] = y(() => d.current?.clientWidth ?? 0), [n, a] = y(D(b)), v = J(null), h = (v.current?.clientWidth ?? 0) - 38 - (M ? 15 : 0), W = I(() => typeof c == "string" ? c === "auto" ? 100 : parseInt(c) || 100 : c, [c]), m = Math.round(h / W);
-  f && f !== o && l(f), n.length > 0 && o === null && l(n[0]?.id);
-  const u = I(() => h === 0 ? [] : n.slice(m), [n, m, w]), z = I(() => n.slice(0, m), [n, m, w]), k = n.length, S = x((e) => {
-    const t = u.findIndex((r) => r.id === e);
-    if (t !== -1) {
-      const r = n.findIndex((i) => i.id === e), s = u[t];
-      a((i) => (i.splice(r, 1), [s, ...i]));
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabsContext = void 0;
+exports.TabsProvider = TabsProvider;
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _tabHelpers = require("./tabHelpers");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const TabsContext = exports.TabsContext = /*#__PURE__*/(0, _react.createContext)({});
+function TabsProvider(_ref) {
+  var _menuRef$current$clie, _menuRef$current;
+  let {
+    children,
+    tabs: tabsProp,
+    container,
+    selectedTab = null,
+    onTabChange,
+    onTabClose,
+    tabsWidth: tabsWidthProp,
+    firstTabIdent = false,
+    keepPanelsInOrder,
+    keepTabOriginalPosition = true
+  } = _ref;
+  const [selectedTabId, setSelectedTabId] = _react.default.useState(selectedTab);
+  const [containerWidth, setContainerWidth] = (0, _react.useState)(() => {
+    var _container$current$cl, _container$current;
+    return (_container$current$cl = (_container$current = container.current) === null || _container$current === void 0 ? void 0 : _container$current.clientWidth) !== null && _container$current$cl !== void 0 ? _container$current$cl : 0;
+  });
+  const [tabs, setTabs] = (0, _react.useState)((0, _tabHelpers.getTabs)(tabsProp));
+  const menuRef = (0, _react.useRef)(null);
+  const 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);
+  const tabsWidth = (0, _react.useMemo)(() => {
+    if (typeof tabsWidthProp === 'string') return tabsWidthProp === 'auto' ? 100 : parseInt(tabsWidthProp) || 100;
+    return tabsWidthProp;
+  }, [tabsWidthProp]);
+  const maxTabs = Math.round(menuSize / tabsWidth);
+  if (selectedTab && selectedTab !== selectedTabId) {
+    setSelectedTabId(selectedTab);
+  }
+  if (tabs.length > 0 && selectedTabId === null) {
+    var _tabs$;
+    setSelectedTabId((_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.id);
+  }
+  const dropdownTabs = (0, _react.useMemo)(() => {
+    if (menuSize === 0) return [];
+    return tabs.slice(maxTabs);
+  }, [tabs, maxTabs, containerWidth]);
+  const menuTabs = (0, _react.useMemo)(() => {
+    return tabs.slice(0, maxTabs);
+  }, [tabs, maxTabs, containerWidth]);
+  const tabsCount = tabs.length;
+  const updateTabs = (0, _react.useCallback)(tabId => {
+    const tabInDropdownIndex = dropdownTabs.findIndex(tab => tab.id === tabId);
+    if (tabInDropdownIndex !== -1) {
+      const tabIndex = tabs.findIndex(tab => tab.id === tabId);
+      const tabInDropdown = dropdownTabs[tabInDropdownIndex];
+      setTabs(prevState => {
+        prevState.splice(tabIndex, 1);
+        return [tabInDropdown, ...prevState];
+      });
+    }
+  }, [setTabs, menuTabs, tabs, dropdownTabs]);
+  const selectTab = (0, _react.useCallback)(tabId => {
+    if (!keepTabOriginalPosition) updateTabs(tabId);
+    setSelectedTabId(tabId);
+    if (onTabChange) {
+      onTabChange(tabId);
     }
-  }, [a, z, n, u]), g = x((e) => {
-    O || S(e), l(e), T && T(e);
-  }, [T, l, S]), q = x((e) => {
-    const t = n.findIndex((s) => s.id === e), r = t === 0 ? n[t + 1] : n[t - 1];
-    o === e && g(r.id), t !== -1 && a((s) => (s.splice(t, 1), s)), p && p(String(e));
-  }, [p, n, u, o]), j = x((e) => {
-    R(e.width);
-  }, [R]);
-  return B(() => {
-    const e = D(b);
-    if (e !== n) {
-      const t = C.differenceBy(e, n, "id"), r = C.differenceBy(n, e, "id").map((s) => s.id);
-      a((s) => {
-        let i = s;
-        return r && (i = i.filter((A) => !r.includes(A.id))), [...i, ...t];
+  }, [onTabChange, setSelectedTabId, updateTabs]);
+  const removeTab = (0, _react.useCallback)(tabId => {
+    const tabIndex = tabs.findIndex(tab => tab.id === tabId);
+    const newSelectedTab = tabIndex === 0 ? tabs[tabIndex + 1] : tabs[tabIndex - 1];
+    if (selectedTabId === tabId) {
+      selectTab(newSelectedTab.id);
+    }
+    if (tabIndex !== -1) {
+      setTabs(prevState => {
+        prevState.splice(tabIndex, 1);
+        return prevState;
       });
     }
-  }, [b]), B(() => {
-    const e = new ResizeObserver(([t]) => {
-      j(t.contentRect);
+    if (onTabClose) {
+      onTabClose(String(tabId));
+    }
+  }, [onTabClose, tabs, dropdownTabs, selectedTabId]);
+  const onResizeContainer = (0, _react.useCallback)(contentRect => {
+    setContainerWidth(contentRect.width);
+  }, [setContainerWidth]);
+  (0, _react.useEffect)(() => {
+    const newTabs = (0, _tabHelpers.getTabs)(tabsProp);
+    if (newTabs !== tabs) {
+      const includedTabs = _lodash.default.differenceBy(newTabs, tabs, 'id');
+      const excludedTabsIds = _lodash.default.differenceBy(tabs, newTabs, 'id').map(tab => tab.id);
+      setTabs(prevState => {
+        let currentTabs = prevState;
+        if (excludedTabsIds) {
+          currentTabs = currentTabs.filter(tab => !excludedTabsIds.includes(tab.id));
+        }
+        return [...currentTabs, ...includedTabs];
+      });
+    }
+  }, [tabsProp]);
+  (0, _react.useEffect)(() => {
+    const resizeObserver = new ResizeObserver(_ref2 => {
+      let [entry] = _ref2;
+      onResizeContainer(entry.contentRect);
     });
-    return d.current && e.observe(d.current), () => {
-      e.disconnect();
+    if (container.current) resizeObserver.observe(container.current);
+    return () => {
+      resizeObserver.disconnect();
     };
-  }, [d.current, j]), /* @__PURE__ */ F.jsx(K.Provider, { value: {
-    tabs: n,
-    menuTabs: z,
-    dropdownTabs: u,
-    containerWidth: w,
-    tabsCount: k,
-    selectTab: g,
-    selectedTabId: o,
-    removeTab: q,
-    menuRef: v
-  }, children: E });
-}
-export {
-  K as TabsContext,
-  V as TabsProvider
-};
+  }, [container.current, onResizeContainer]);
+  return /*#__PURE__*/_react.default.createElement(TabsContext.Provider, {
+    value: {
+      tabs,
+      menuTabs,
+      dropdownTabs,
+      containerWidth,
+      tabsCount,
+      selectTab,
+      selectedTabId,
+      removeTab,
+      menuRef,
+      keepPanelsInOrder
+    }
+  }, children);
+}

package/lib/tabs/index.d.ts

@@ -1,5 +1,12 @@
-import { default as TabPanel } from './Panel';
-import { ITabsPros } from './types';
-declare const Tabs: ({ toolbar, toolBarRef, children, firstTabIdent, handlerTabClick, handlerCloseTab, style, tabMenuSize, tabMenuAlign, tabMenuPosition, customClassForToolBar, tabsWidth, ...props }: ITabsPros) => import("react/jsx-runtime").JSX.Element;
-export default Tabs;
-export { TabPanel };
+export { default as TabPanel } from './Panel.js';
+import { ITabsPros } 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 Tabs: ({ toolbar, 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

@@ -1,73 +1,75 @@
-import { j as C } from "../chunks/jsx-runtime.D1SHvdVE.js";
-import { c as D } from "../chunks/compiler-runtime.Cu50tn6L.js";
-import { useRef as G, Fragment as P } from "react";
-import H from "./Menu.js";
-import { default as lt } from "./Panel.js";
-import { tabsClass as J } from "./tabHelpers.js";
-import "../chunks/tabs.BvKfeA6Y.js";
-import { TabsProvider as K } from "./context.js";
-const L = ({
-  children: i,
-  tabMenuPosition: t,
-  toolbar: e,
-  tabsWidth: o,
-  customClassForToolBar: s,
-  tabMenuSize: n,
-  tabMenuAlign: r,
-  firstTabIdent: l
-}) => {
-  const a = /* @__PURE__ */ C.jsx(H, { toolbar: e, tabWidth: o, customClassForToolBar: s, tabMenuSize: n, tabMenuAlign: r, firstTabIdent: l });
-  return t === "top" || t === "left" ? /* @__PURE__ */ C.jsxs(P, { children: [
-    a,
-    i
-  ] }) : /* @__PURE__ */ C.jsxs(P, { children: [
-    i,
-    a
-  ] });
-}, tt = (i) => {
-  const t = D.c(38);
-  let e, o, s, n, r, l, a, p, h, T, x, c;
-  if (t[0] !== i) {
-    const {
-      toolbar: W,
-      toolBarRef: O,
-      children: k,
-      firstTabIdent: y,
-      handlerTabClick: z,
-      handlerCloseTab: A,
-      style: E,
-      tabMenuSize: I,
-      tabMenuAlign: S,
-      tabMenuPosition: N,
-      customClassForToolBar: $,
-      tabsWidth: q,
-      ...w
-    } = i;
-    c = W, e = k, o = y, n = z, s = A, l = E, a = I, p = S, h = N, T = $, x = q, r = w, t[0] = i, t[1] = e, t[2] = o, t[3] = s, t[4] = n, t[5] = r, t[6] = l, t[7] = a, t[8] = p, t[9] = h, t[10] = T, t[11] = x, t[12] = c;
-  } else
-    e = t[1], o = t[2], s = t[3], n = t[4], r = t[5], l = t[6], a = t[7], p = t[8], h = t[9], T = t[10], x = t[11], c = t[12];
-  let v;
-  t[13] !== l ? (v = l === void 0 ? {} : l, t[13] = l, t[14] = v) : v = t[14];
-  const M = v, g = a === void 0 ? "default" : a, R = p === void 0 ? "left" : p, d = h === void 0 ? "top" : h, B = T === void 0 ? "" : T, f = x === void 0 ? "auto" : x, F = G(null);
-  let b;
-  t[15] !== d ? (b = J(d), t[15] = d, t[16] = b) : b = t[16];
-  let m;
-  t[17] !== e || t[18] !== B || t[19] !== o || t[20] !== R || t[21] !== d || t[22] !== g || t[23] !== f || t[24] !== c ? (m = L({
-    children: e,
-    tabMenuPosition: d,
-    toolbar: c,
-    tabsWidth: f,
-    customClassForToolBar: B,
-    tabMenuSize: g,
-    tabMenuAlign: R,
-    firstTabIdent: o
-  }), t[17] = e, t[18] = B, t[19] = o, t[20] = R, t[21] = d, t[22] = g, t[23] = f, t[24] = c, t[25] = m) : m = t[25];
-  let u;
-  t[26] !== M || t[27] !== b || t[28] !== m ? (u = /* @__PURE__ */ C.jsx("div", { ref: F, className: b, style: M, children: m }), t[26] = M, t[27] = b, t[28] = m, t[29] = u) : u = t[29];
-  let j;
-  return t[30] !== e || t[31] !== o || t[32] !== s || t[33] !== n || t[34] !== r || t[35] !== u || t[36] !== f ? (j = /* @__PURE__ */ C.jsx(K, { tabs: e, container: F, onTabChange: n, onTabClose: s, tabsWidth: f, firstTabIdent: o, ...r, children: u }), t[30] = e, t[31] = o, t[32] = s, t[33] = n, t[34] = r, t[35] = u, t[36] = f, t[37] = j) : j = t[37], j;
-};
-export {
-  lt as TabPanel,
-  tt as default
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TabPanel", {
+  enumerable: true,
+  get: function () {
+    return _Panel.default;
+  }
+});
+exports.default = void 0;
+require("../assets/styles/tabs.scss");
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _Menu = _interopRequireDefault(require("./Menu"));
+var _Panel = _interopRequireDefault(require("./Panel"));
+var _tabHelpers = require("./tabHelpers");
+var _context = require("./context");
+const _excluded = ["toolbar", "children", "firstTabIdent", "handlerTabClick", "handlerCloseTab", "style", "tabMenuSize", "tabMenuAlign", "tabMenuPosition", "customClassForToolBar", "tabsWidth", "tabsWithError", "keepPanelsInOrder"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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 n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(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 (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const Tabs = _ref => {
+  let {
+      toolbar,
+      children,
+      firstTabIdent,
+      handlerTabClick,
+      handlerCloseTab,
+      style = {},
+      tabMenuSize = 'default',
+      tabMenuAlign = 'left',
+      tabMenuPosition = 'top',
+      customClassForToolBar = '',
+      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,
+      tabMenuSize: tabMenuSize,
+      tabMenuAlign: tabMenuAlign,
+      firstTabIdent: firstTabIdent
+    });
+    if (tabMenuPosition === 'top' || tabMenuPosition === 'left') {
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, menu, childrensInOrder);
+    }
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, childrensInOrder, menu);
+  }, [children, tabMenuPosition]);
+  return /*#__PURE__*/_react.default.createElement(_context.TabsProvider, _extends({
+    tabs: childrensInOrder,
+    container: containerRef,
+    onTabChange: handlerTabClick,
+    onTabClose: handlerCloseTab,
+    tabsWidth: tabsWidth,
+    firstTabIdent: firstTabIdent,
+    keepPanelsInOrder: keepPanelsInOrder
+  }, props), /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef,
+    className: (0, _tabHelpers.tabsClass)(tabMenuPosition),
+    style: style
+  }, content));
 };
+var _default = exports.default = Tabs;

package/lib/tabs/tabHelpers.d.ts

@@ -1,9 +1,12 @@
-import { default as React } from 'react';
-import { Position } from '../@types/Position';
-export declare function getCurrentThreshold(scrollableElement: HTMLDivElement, scrollThreshold: number): number;
-export declare const getTabs: (tabsProp: React.ReactNode) => any[];
-export declare function tabsClass(tabMenuPosition: Exclude<Position, 'center'>): string;
-export declare function menuStyles(tabMenuAlign: Position): {
+import React__default from 'react';
+import { Position } from '../@types/Position.js';
+
+declare function getCurrentThreshold(scrollableElement: HTMLDivElement, scrollThreshold: number): number;
+declare const getTabs: (tabsProp: React__default.ReactNode) => any[];
+declare function tabsClass(tabMenuPosition: Exclude<Position, 'center'>): string;
+declare function menuStyles(tabMenuAlign: Position): {
     justifyContent: string;
 };
-export declare const onDeniedOptions: string[];
+declare const onDeniedOptions: string[];
+
+export { getCurrentThreshold, getTabs, menuStyles, onDeniedOptions, tabsClass };

package/lib/tabs/tabHelpers.js

@@ -1,48 +1,70 @@
-import i from "react";
-import { OPTIONS_ON_DENIED as r } from "../permissionValidations.js";
-function h(t, n) {
-  if (n < 0) return 0;
-  if (n > 1) return 1;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCurrentThreshold = getCurrentThreshold;
+exports.getTabs = void 0;
+exports.menuStyles = menuStyles;
+exports.onDeniedOptions = void 0;
+exports.tabsClass = tabsClass;
+var _react = _interopRequireDefault(require("react"));
+var _permissionValidations = require("../permissionValidations");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
+function getCurrentThreshold(scrollableElement, scrollThreshold) {
+  const MIN_THRESHOLD = 0;
+  const MAX_THRESHOLD = 1;
+  if (scrollThreshold < MIN_THRESHOLD) return MIN_THRESHOLD;
+  if (scrollThreshold > MAX_THRESHOLD) return MAX_THRESHOLD;
   const {
-    scrollHeight: o,
-    clientHeight: c
-  } = t, s = o - c, u = Math.round(o * n), f = Math.round(s - s * 0.3);
-  return Math.min(u, f);
+    scrollHeight,
+    clientHeight
+  } = scrollableElement;
+  const offsetHeight = scrollHeight - clientHeight;
+  const calculatedScrollThreshold = Math.round(scrollHeight * scrollThreshold);
+  const maxScrollThreshold = Math.round(offsetHeight - offsetHeight * 0.3);
+  return Math.min(calculatedScrollThreshold, maxScrollThreshold);
 }
-const p = (t) => (i.Children.map(t, (e) => {
-  if (!e || !i.isValidElement(e)) return null;
-  const {
-    children: l,
-    ...o
-  } = e.props;
-  return o;
-}) || []).filter((e) => !e.hidden), a = {
-  top: "",
-  left: "menu-left",
-  bottom: "menu-bottom",
-  right: "menu-right"
+const getTabs = tabsProp => {
+  const tabs = _react.default.Children.map(tabsProp, child => {
+    if (!child || ! /*#__PURE__*/_react.default.isValidElement(child)) return null;
+    const _child$props = child.props,
+      props = Object.assign({}, (_objectDestructuringEmpty(_child$props), _child$props));
+    return props;
+  }) || [];
+  return tabs.filter(tab => !tab.hidden);
+};
+
+/**
+ * Get the css class according to the options passed to the Tabs Component
+ */
+exports.getTabs = getTabs;
+const positionsMenuClass = {
+  top: '',
+  left: 'menu-left',
+  bottom: 'menu-bottom',
+  right: 'menu-right'
 };
-function b(t) {
-  let n = "tabs-component ";
-  return n += a[t], n;
+function tabsClass(tabMenuPosition) {
+  let cssClass = 'tabs-component ';
+  cssClass += positionsMenuClass[tabMenuPosition];
+  return cssClass;
 }
-const m = {
-  left: "flex-start",
-  top: "flex-start",
-  right: "flex-end",
-  bottom: "flex-end",
-  center: "center"
+
+/**
+ * Menu Styles for tab menus
+ */
+const flextJustifyContent = {
+  left: 'flex-start',
+  top: 'flex-start',
+  right: 'flex-end',
+  bottom: 'flex-end',
+  center: 'center'
 };
-function M(t) {
+function menuStyles(tabMenuAlign) {
   return {
-    justifyContent: m[t]
+    justifyContent: flextJustifyContent[tabMenuAlign]
   };
 }
-const O = [r.disabled, r.unvisible, r.hideContent];
-export {
-  h as getCurrentThreshold,
-  p as getTabs,
-  M as menuStyles,
-  O as onDeniedOptions,
-  b as tabsClass
-};
+const onDeniedOptions = exports.onDeniedOptions = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible, _permissionValidations.OPTIONS_ON_DENIED.hideContent];

package/lib/tabs/types.d.ts

@@ -1,9 +1,11 @@
-import { CSSProperties, ReactElement, ReactNode, RefObject } from 'react';
-import { Size } from '../@types/Size';
-import { Position } from '../@types/Position';
-import { PermissionAttr } from '../@types/PermissionAttr';
-import { IconNames } from '../@types/Icon';
-export type TabsContextType = {
+import { RefObject, CSSProperties, ReactElement, ReactNode } from 'react';
+import { Size } from '../@types/Size.js';
+import { Position } from '../@types/Position.js';
+import { PermissionAttr } from '../@types/PermissionAttr.js';
+import { IconNames } from '../@types/Icon.js';
+import '../icons/helper.js';
+
+type TabsContextType = {
     tabs: TabProps[];
     menuTabs: TabProps[];
     dropdownTabs: TabProps[];
@@ -13,8 +15,9 @@ export type TabsContextType = {
     containerWidth: number;
     tabsCount: number;
     menuRef: RefObject<HTMLUListElement>;
+    keepPanelsInOrder?: Array<string | number>;
 };
-export interface TabsProviderProps {
+interface TabsProviderProps {
     children: React.ReactNode;
     tabs: React.ReactNode;
     container: RefObject<HTMLDivElement>;
@@ -23,9 +26,10 @@ export interface TabsProviderProps {
     onTabChange?: (tabId: string | number) => void;
     onTabClose?: (tabId: string) => void;
     firstTabIdent?: boolean;
+    keepPanelsInOrder?: Array<string | number>;
     keepTabOriginalPosition?: boolean;
 }
-export interface ITabsPros {
+interface ITabsPros {
     style?: CSSProperties;
     toolbar?: ReactElement;
     toolBarRef?: (value: HTMLDivElement | null) => void;
@@ -39,12 +43,14 @@ export interface ITabsPros {
     handlerCloseTab?: (id?: string, idx?: string) => void;
     customClassForToolBar?: string;
     tabsWidth?: string | number;
+    tabsWithError?: Array<string | number>;
+    keepPanelsInOrder?: Array<string | number>;
     keepTabOriginalPosition?: boolean;
 }
-export interface TabProps {
+interface TabProps {
     id: string | number;
     title: string;
-    iconAlign?: Extract<Position, 'left' | 'right'>;
+    iconAlign?: Extract<Position, 'left' | 'center'>;
     iconName?: IconNames;
     icon?: ReactElement;
     disabled?: boolean;
@@ -57,9 +63,10 @@ export interface TabProps {
     tooltipWidth?: string | number;
     closeable?: boolean;
     tabsLength?: number;
+    tabsWithError?: Array<string | number>;
 }
-export interface MenuProps {
-    toolbar?: ReactElement<any>;
+interface MenuProps {
+    toolbar?: ReactElement;
     customClass?: string;
     customClassForToolBar?: string;
     tabWidth?: string | number;
@@ -70,10 +77,11 @@ export interface MenuProps {
     tabMenuSize?: Size;
     handlerClick?: (id?: string) => void;
     handlerRemovePanel?: (id?: string, idx?: number, bool?: boolean) => void;
+    tabsWithError?: Array<string | number>;
 }
-export interface DropdownProps extends MenuProps {
+interface DropdownProps extends MenuProps {
 }
-export interface PanelProps {
+interface PanelProps {
     id?: string;
     icon?: ReactElement;
     title?: string;
@@ -93,3 +101,5 @@ export interface PanelProps {
     onEndReachedThreshold?: number;
     style?: CSSProperties;
 }
+
+export { DropdownProps, ITabsPros, MenuProps, PanelProps, TabProps, TabsContextType, TabsProviderProps };

package/lib/tabs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/tabs/useTabs.d.ts

@@ -1 +1,11 @@
-export declare function useTabs(): import('./types').TabsContextType;
+import { TabsContextType } 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 function useTabs(): TabsContextType;
+
+export { useTabs };

package/lib/tabs/useTabs.js

@@ -1,8 +1,11 @@
-import { useContext as t } from "react";
-import { TabsContext as o } from "./context.js";
-function n() {
-  return t(o);
-}
-export {
-  n as useTabs
-};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTabs = useTabs;
+var _react = require("react");
+var _context = require("./context");
+function useTabs() {
+  return (0, _react.useContext)(_context.TabsContext);
+}