linear-react-components-ui 1.1.26-beta.17 → 1.1.26-beta.18

package/lib/tabs/context.js

@@ -1,67 +1,129 @@
-import { jsx as G } from "react/jsx-runtime";
-import { useState as p, useRef as H, useMemo as v, useCallback as b, useEffect as C, createContext as J } from "react";
-import D from "../_virtual/lodash.js";
-import { getTabs as M } from "./tabHelpers.js";
-const K = J({});
-function V({
-  children: O,
-  tabs: x,
-  container: d,
-  selectedTab: f = null,
-  onTabChange: T,
-  onTabClose: w,
-  tabsWidth: c,
-  firstTabIdent: W = !1,
-  keepPanelsInOrder: j,
-  keepTabOriginalPosition: k = !0
-}) {
-  const [o, l] = p(f), [I, R] = p(() => d.current?.clientWidth ?? 0), [n, a] = p(M(x)), h = H(null), z = (h.current?.clientWidth ?? 0) - 38 - (W ? 15 : 0), E = v(() => typeof c == "string" ? c === "auto" ? 100 : parseInt(c) || 100 : c, [c]), m = Math.round(z / E);
-  f && f !== o && l(f), n.length > 0 && o === null && l(n[0]?.id);
-  const u = v(() => z === 0 ? [] : n.slice(m), [n, m, I]), g = v(() => n.slice(0, m), [n, m, I]), q = n.length, y = b((e) => {
-    const t = u.findIndex((s) => s.id === e);
-    if (t !== -1) {
-      const s = n.findIndex((i) => i.id === e), r = u[t];
-      a((i) => (i.splice(s, 1), [r, ...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 _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 TabsContext = exports.TabsContext = /*#__PURE__*/(0, _react.createContext)({});
+function TabsProvider(_ref) {
+  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)(() => {
+    return container.current?.clientWidth ?? 0;
+  });
+  const [tabs, setTabs] = (0, _react.useState)((0, _tabHelpers.getTabs)(tabsProp));
+  const menuRef = (0, _react.useRef)(null);
+  const menuSize = (menuRef.current?.clientWidth ?? 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) {
+    setSelectedTabId(tabs[0]?.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, g, n, u]), S = b((e) => {
-    k || y(e), l(e), T && T(e);
-  }, [T, l, y]), A = b((e) => {
-    const t = n.findIndex((r) => r.id === e), s = t === 0 ? n[t + 1] : n[t - 1];
-    o === e && S(s.id), t !== -1 && a((r) => (r.splice(t, 1), r)), w && w(String(e));
-  }, [w, n, u, o]), B = b((e) => {
-    R(e.width);
-  }, [R]);
-  return C(() => {
-    const e = M(x);
-    if (e !== n) {
-      const t = D.differenceBy(e, n, "id"), s = D.differenceBy(n, e, "id").map((r) => r.id);
-      a((r) => {
-        let i = r;
-        return s && (i = i.filter((F) => !s.includes(F.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;
       });
     }
-  }, [x]), C(() => {
-    const e = new ResizeObserver(([t]) => {
-      B(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, B]), /* @__PURE__ */ G(K.Provider, { value: {
-    tabs: n,
-    menuTabs: g,
-    dropdownTabs: u,
-    containerWidth: I,
-    tabsCount: q,
-    selectTab: S,
-    selectedTabId: o,
-    removeTab: A,
-    menuRef: h,
-    keepPanelsInOrder: j
-  }, children: O });
-}
-export {
-  K as TabsContext,
-  V as TabsProvider
-};
-//# sourceMappingURL=context.js.map
+  }, [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, children, firstTabIdent, handlerTabClick, handlerCloseTab, style, tabMenuSize, tabMenuAlign, tabMenuPosition, customClassForToolBar, tabsWidth, tabsWithError, keepPanelsInOrder, ...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,84 +1,76 @@
-import { jsx as F, jsxs as O } from "react/jsx-runtime";
-import { c as z } from "../_virtual/compiler-runtime.js";
-import '../assets/styles/tabs.css';/* empty css                         */
-import { useRef as S, Children as _, isValidElement as N, Fragment as R } from "react";
-import V from "../_virtual/lodash.js";
-import $ from "./Menu.js";
-import { default as ot } from "./Panel.js";
-import { tabsClass as q } from "./tabHelpers.js";
-import { TabsProvider as w } from "./context.js";
-const D = ({
-  children: l,
-  tabMenuPosition: t,
-  toolbar: e,
-  tabsWidth: r,
-  customClassForToolBar: n,
-  tabMenuSize: i,
-  tabMenuAlign: o,
-  firstTabIdent: a,
-  tabsWithError: s
-}) => {
-  const c = /* @__PURE__ */ F($, { tabsWithError: s, toolbar: e, tabWidth: r, customClassForToolBar: n, tabMenuSize: i, tabMenuAlign: o, firstTabIdent: a });
-  return t === "top" || t === "left" ? /* @__PURE__ */ O(R, { children: [
-    c,
-    l
-  ] }) : /* @__PURE__ */ O(R, { children: [
-    l,
-    c
-  ] });
-}, Z = (l) => {
-  const t = z.c(45);
-  let e, r, n, i, o, a, s, c, T, v, C, P, d, f;
-  t[0] !== l ? ({
-    toolbar: f,
-    children: e,
-    firstTabIdent: r,
-    handlerTabClick: i,
-    handlerCloseTab: n,
-    style: s,
-    tabMenuSize: c,
-    tabMenuAlign: T,
-    tabMenuPosition: v,
-    customClassForToolBar: C,
-    tabsWidth: P,
-    tabsWithError: d,
-    keepPanelsInOrder: o,
-    ...a
-  } = l, t[0] = l, t[1] = e, t[2] = r, t[3] = n, t[4] = i, t[5] = o, t[6] = a, t[7] = s, t[8] = c, t[9] = T, t[10] = v, t[11] = C, t[12] = P, t[13] = d, t[14] = f) : (e = t[1], r = t[2], n = t[3], i = t[4], o = t[5], a = t[6], s = t[7], c = t[8], T = t[9], v = t[10], C = t[11], P = t[12], d = t[13], f = t[14]);
-  let x;
-  t[15] !== s ? (x = s === void 0 ? {} : s, t[15] = s, t[16] = x) : x = t[16];
-  const y = x, W = c === void 0 ? "default" : c, A = T === void 0 ? "left" : T, m = v === void 0 ? "top" : v, B = C === void 0 ? "" : C, p = P === void 0 ? "auto" : P, I = S(null);
-  let M;
-  if (t[17] !== e || t[18] !== o) {
-    const j = _.toArray(e).filter(G);
-    M = o ? V.sortBy(j, (k) => o.indexOf(k.props.id)) : e, t[17] = e, t[18] = o, t[19] = M;
-  } else
-    M = t[19];
-  const E = M;
-  let u;
-  t[20] !== m ? (u = q(m), t[20] = m, t[21] = u) : u = t[21];
-  let b;
-  t[22] !== e || t[23] !== B || t[24] !== r || t[25] !== A || t[26] !== m || t[27] !== W || t[28] !== p || t[29] !== d || t[30] !== f ? (b = D({
-    children: e,
-    tabMenuPosition: m,
-    toolbar: f,
-    tabsWidth: p,
-    customClassForToolBar: B,
-    tabMenuSize: W,
-    tabMenuAlign: A,
-    firstTabIdent: r,
-    tabsWithError: d
-  }), t[22] = e, t[23] = B, t[24] = r, t[25] = A, t[26] = m, t[27] = W, t[28] = p, t[29] = d, t[30] = f, t[31] = b) : b = t[31];
-  let h;
-  t[32] !== y || t[33] !== b || t[34] !== u ? (h = /* @__PURE__ */ F("div", { ref: I, className: u, style: y, children: b }), t[32] = y, t[33] = b, t[34] = u, t[35] = h) : h = t[35];
-  let g;
-  return t[36] !== E || t[37] !== r || t[38] !== n || t[39] !== i || t[40] !== o || t[41] !== a || t[42] !== h || t[43] !== p ? (g = /* @__PURE__ */ F(w, { tabs: E, container: I, onTabChange: i, onTabClose: n, tabsWidth: p, firstTabIdent: r, keepPanelsInOrder: o, ...a, children: h }), t[36] = E, t[37] = r, t[38] = n, t[39] = i, t[40] = o, t[41] = a, t[42] = h, t[43] = p, t[44] = g) : g = t[44], g;
+"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 _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 _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));
 };
-function G(l) {
-  return N(l) ? !!l.props.id : !1;
-}
-export {
-  ot as TabPanel,
-  Z as default
-};
-//# sourceMappingURL=index.js.map
+var _default = exports.default = Tabs;

package/lib/tabs/tabHelpers.d.ts

@@ -1,27 +1,12 @@
-import { ReactNode } from 'react';
-import { Position } from '../@types/Position';
-export declare function getCurrentThreshold(scrollableElement: HTMLDivElement, scrollThreshold: number): number;
-export declare const getTabs: (tabsProp: ReactNode) => {
-    id: string | number;
-    title: string;
-    hidden?: boolean;
-    iconAlign?: Extract<Position, "left" | "center">;
-    iconName?: import('../@types/Icon').IconNames;
-    icon?: import('react').ReactElement;
-    disabled?: boolean;
-    permissionAttr?: import('../@types/PermissionAttr').PermissionAttr;
-    tabWidth?: string | number;
-    tabMenuSize?: import('../@types/Size').Size;
-    tabMenuAlign?: Position;
-    tooltip?: string;
-    tooltipPosition?: Exclude<Position, "center">;
-    tooltipWidth?: string | number;
-    closeable?: boolean;
-    tabsLength?: number;
-    tabsWithError?: Array<string | number>;
-}[];
-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 { Children as f, isValidElement as a } from "react";
-import { OPTIONS_ON_DENIED as o } 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: r,
-    clientHeight: l
-  } = t, i = r - l, u = Math.round(r * n), c = Math.round(i - i * 0.3);
-  return Math.min(u, c);
+    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 b = (t) => (f.map(t, (e) => {
-  if (!e || !a(e)) return null;
-  const {
-    ...s
-  } = e.props;
-  return s;
-}) || []).filter((e) => !e.hidden), m = {
-  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 M(t) {
-  let n = "tabs-component ";
-  return n += m[t], n;
+function tabsClass(tabMenuPosition) {
+  let cssClass = 'tabs-component ';
+  cssClass += positionsMenuClass[tabMenuPosition];
+  return cssClass;
 }
-const H = {
-  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 O(t) {
+function menuStyles(tabMenuAlign) {
   return {
-    justifyContent: H[t]
+    justifyContent: flextJustifyContent[tabMenuAlign]
   };
 }
-const S = [o.disabled, o.unvisible, o.hideContent];
-export {
-  h as getCurrentThreshold,
-  b as getTabs,
-  O as menuStyles,
-  S as onDeniedOptions,
-  M as tabsClass
-};
-//# sourceMappingURL=tabHelpers.js.map
+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[];
@@ -15,9 +17,9 @@ export type TabsContextType = {
     menuRef: RefObject<HTMLUListElement>;
     keepPanelsInOrder?: Array<string | number>;
 };
-export interface TabsProviderProps {
-    children: ReactNode;
-    tabs: ReactNode;
+interface TabsProviderProps {
+    children: React.ReactNode;
+    tabs: React.ReactNode;
     container: RefObject<HTMLDivElement>;
     tabsWidth: number | string;
     selectedTab?: string | number | null;
@@ -27,7 +29,7 @@ export interface TabsProviderProps {
     keepPanelsInOrder?: Array<string | number>;
     keepTabOriginalPosition?: boolean;
 }
-export interface ITabsPros {
+interface ITabsPros {
     style?: CSSProperties;
     toolbar?: ReactElement;
     toolBarRef?: (value: HTMLDivElement | null) => void;
@@ -45,10 +47,9 @@ export interface ITabsPros {
     keepPanelsInOrder?: Array<string | number>;
     keepTabOriginalPosition?: boolean;
 }
-export interface TabProps {
+interface TabProps {
     id: string | number;
     title: string;
-    hidden?: boolean;
     iconAlign?: Extract<Position, 'left' | 'center'>;
     iconName?: IconNames;
     icon?: ReactElement;
@@ -64,8 +65,8 @@ export interface TabProps {
     tabsLength?: number;
     tabsWithError?: Array<string | number>;
 }
-export interface MenuProps {
-    toolbar?: ReactElement<any>;
+interface MenuProps {
+    toolbar?: ReactElement;
     customClass?: string;
     customClassForToolBar?: string;
     tabWidth?: string | number;
@@ -78,9 +79,9 @@ export interface MenuProps {
     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;
@@ -100,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,9 +1,11 @@
-import { useContext as t } from "react";
-import { TabsContext as o } from "./context.js";
-function n() {
-  return t(o);
-}
-export {
-  n as useTabs
-};
-//# sourceMappingURL=useTabs.js.map
+"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);
+}