linear-react-components-ui 1.1.27-rc.0 → 2.0.0-beta.0

package/lib/tabs/Panel.js

@@ -1,85 +1,42 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _tabHelpers = require("./tabHelpers");
-var _permissionValidations = require("../permissionValidations");
-var _noPermission = _interopRequireDefault(require("../noPermission"));
-var _useTabs = require("./useTabs");
-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 Panel = props => {
-  const {
-    id,
-    children,
-    onEndReached,
-    permissionAttr,
-    customClass = '',
-    onEndReachedThreshold = 0.1,
-    style
-  } = props;
-  const {
-    selectedTabId
-  } = (0, _useTabs.useTabs)();
-  const hidePanel = id !== selectedTabId ? 'hidepanel' : '';
-  const rootElementRef = (0, _react.useRef)(null);
-  const [onDenied] = (0, _react.useState)((0, _permissionValidations.actionsOnPermissionDenied)(_tabHelpers.onDeniedOptions, permissionAttr));
-  const {
-    hideContent
-  } = onDenied;
-  const enableOnEndReached = (0, _react.useRef)(true);
-  const lastScrollHeight = (0, _react.useRef)(0);
-  const onScrollEndReached = (0, _react.useCallback)(async () => {
-    const element = rootElementRef.current;
-    if (element && onEndReached) {
-      const {
-        scrollTop,
-        scrollHeight,
-        clientHeight
-      } = element;
-      const scrollOffset = scrollHeight - clientHeight - scrollTop - 1;
-      const threshold = (0, _tabHelpers.getCurrentThreshold)(element, onEndReachedThreshold);
-      if (scrollOffset <= threshold && enableOnEndReached.current) {
-        enableOnEndReached.current = false;
-        await new Promise(resolve => {
-          resolve(onEndReached());
-        });
-        lastScrollHeight.current = scrollHeight;
-      }
-    }
-  }, [onEndReached, onEndReachedThreshold, rootElementRef.current, lastScrollHeight.current]);
-  (0, _react.useEffect)(() => {
-    let observer;
-    if (rootElementRef.current && onEndReached) {
-      observer = new ResizeObserver(() => {
-        const {
-          scrollHeight
-        } = rootElementRef.current;
-        if (scrollHeight !== lastScrollHeight.current) {
-          var _observer;
-          enableOnEndReached.current = true;
-          (_observer = observer) === null || _observer === void 0 ? void 0 : _observer.disconnect();
-        }
-      });
-      observer.observe(rootElementRef.current);
-      rootElementRef.current.addEventListener('scroll', onScrollEndReached);
-      rootElementRef.current.addEventListener('resize', onScrollEndReached);
-    }
-    return () => {
-      var _rootElementRef$curre, _rootElementRef$curre2, _observer2;
-      (_rootElementRef$curre = rootElementRef.current) === null || _rootElementRef$curre === void 0 ? void 0 : _rootElementRef$curre.removeEventListener('scroll', onScrollEndReached);
-      (_rootElementRef$curre2 = rootElementRef.current) === null || _rootElementRef$curre2 === void 0 ? void 0 : _rootElementRef$curre2.removeEventListener('resize', onScrollEndReached);
-      (_observer2 = observer) === null || _observer2 === void 0 ? void 0 : _observer2.disconnect();
-    };
-  }, [onScrollEndReached]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: rootElementRef,
-    id: id,
-    className: "".concat(customClass, " panel ").concat(hidePanel),
-    style: style
-  }, hideContent ? /*#__PURE__*/_react.default.createElement(_noPermission.default, null) : children);
+import { actionsOnPermissionDenied as e } from "../permissionValidations.js";
+import t from "../noPermission/index.js";
+import { getCurrentThreshold as n, onDeniedOptions as r } from "./tabHelpers.js";
+import { useTabs as i } from "./useTabs.js";
+import { useCallback as a, useEffect as o, useRef as s, useState as c } from "react";
+import { jsx as l } from "react/jsx-runtime";
+//#region src/lib/tabs/Panel.tsx
+var u = (u) => {
+	let { id: d, children: f, onEndReached: p, permissionAttr: m, customClass: h = "", onEndReachedThreshold: g = .1, style: _ } = u, { selectedTabId: v } = i(), y = d === v ? "" : "hidepanel", b = s(null), [x] = c(e(r, m)), { hideContent: S } = x, C = s(!0), w = s(0), T = a(async () => {
+		let e = b.current;
+		if (e && p) {
+			let { scrollTop: t, scrollHeight: r, clientHeight: i } = e;
+			r - i - t - 1 <= n(e, g) && C.current && (C.current = !1, await new Promise((e) => {
+				e(p());
+			}), w.current = r);
+		}
+	}, [
+		p,
+		g,
+		b.current,
+		w.current
+	]);
+	return o(() => {
+		let e;
+		return b.current && p && (e = new ResizeObserver(() => {
+			let { scrollHeight: t } = b.current;
+			t !== w.current && (C.current = !0, e?.disconnect());
+		}), e.observe(b.current), b.current.addEventListener("scroll", T), b.current.addEventListener("resize", T)), () => {
+			b.current?.removeEventListener("scroll", T), b.current?.removeEventListener("resize", T), e?.disconnect();
+		};
+	}, [T]), /* @__PURE__ */ l("div", {
+		ref: b,
+		id: d,
+		className: `${h} panel ${y}`,
+		style: _,
+		children: S ? /* @__PURE__ */ l(t, {}) : f
+	});
 };
-var _default = exports.default = Panel;
+//#endregion
+export { u as default };
+
+//# sourceMappingURL=Panel.js.map

package/lib/tabs/Panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","names":[],"sources":["../../src/lib/tabs/Panel.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { getCurrentThreshold, onDeniedOptions } from './tabHelpers';\nimport { actionsOnPermissionDenied } from '../permissionValidations';\nimport NoPermission from '../noPermission';\nimport { PanelProps } from './types';\nimport { OnDenied } from '../@types/PermissionAttr';\nimport { useTabs } from './useTabs';\n\nconst Panel = (props: PanelProps) => {\n  const {\n    id,\n    children,\n    onEndReached,\n    permissionAttr,\n    customClass = '',\n    onEndReachedThreshold = 0.1,\n    style,\n  } = props;\n  const { selectedTabId } = useTabs();\n  const hidePanel = (id !== selectedTabId ? 'hidepanel' : '');\n  const rootElementRef = useRef<HTMLDivElement>(null);\n  const [onDenied] = useState<OnDenied>(actionsOnPermissionDenied(onDeniedOptions, permissionAttr));\n  const { hideContent } = onDenied;\n  const enableOnEndReached = useRef(true);\n  const lastScrollHeight = useRef(0);\n\n  const onScrollEndReached = useCallback(async () => {\n    const element = rootElementRef.current;\n\n    if (element && onEndReached) {\n      const { scrollTop, scrollHeight, clientHeight } = element;\n      const scrollOffset = scrollHeight - clientHeight - scrollTop - 1;\n      const threshold = getCurrentThreshold(element, onEndReachedThreshold);\n\n      if (scrollOffset <= threshold && enableOnEndReached.current) {\n        enableOnEndReached.current = false;\n        await new Promise((resolve) => {\n          resolve(onEndReached());\n        });\n        lastScrollHeight.current = scrollHeight;\n      }\n    }\n  }, [\n    onEndReached, onEndReachedThreshold,\n    rootElementRef.current, lastScrollHeight.current,\n  ]);\n\n  useEffect(() => {\n    let observer: ResizeObserver | null;\n    if (rootElementRef.current && onEndReached) {\n      observer = new ResizeObserver(() => {\n        const { scrollHeight } = rootElementRef.current as HTMLDivElement;\n        if (scrollHeight !== lastScrollHeight.current) {\n          enableOnEndReached.current = true;\n          observer?.disconnect();\n        }\n      });\n\n      observer.observe(rootElementRef.current);\n      rootElementRef.current.addEventListener('scroll', onScrollEndReached);\n      rootElementRef.current.addEventListener('resize', onScrollEndReached);\n    }\n\n    return () => {\n      rootElementRef.current?.removeEventListener('scroll', onScrollEndReached);\n      rootElementRef.current?.removeEventListener('resize', onScrollEndReached);\n      observer?.disconnect();\n    };\n  }, [onScrollEndReached]);\n\n  return (\n    <div\n      ref={rootElementRef}\n      id={id}\n      className={`${customClass} panel ${hidePanel}`}\n      style={style}>\n      {hideContent ? <NoPermission /> : children}\n    </div>\n  );\n};\n\nexport default Panel;\n"],"mappings":";;;;;;;AAQA,IAAM,KAAS,MAAsB;CACnC,IAAM,EACJ,OACA,aACA,iBACA,mBACA,iBAAc,IACd,2BAAwB,IACxB,aACE,GACE,EAAE,qBAAkB,GAAS,EAC7B,IAAa,MAAO,IAA8B,KAAd,aACpC,IAAiB,EAAuB,KAAK,EAC7C,CAAC,KAAY,EAAmB,EAA0B,GAAiB,EAAe,CAAC,EAC3F,EAAE,mBAAgB,GAClB,IAAqB,EAAO,GAAK,EACjC,IAAmB,EAAO,EAAE,EAE5B,IAAqB,EAAY,YAAY;EACjD,IAAM,IAAU,EAAe;AAE/B,MAAI,KAAW,GAAc;GAC3B,IAAM,EAAE,cAAW,iBAAc,oBAAiB;AAIlD,GAHqB,IAAe,IAAe,IAAY,KAC7C,EAAoB,GAAS,EAAsB,IAEpC,EAAmB,YAClD,EAAmB,UAAU,IAC7B,MAAM,IAAI,SAAS,MAAY;AAC7B,MAAQ,GAAc,CAAC;KACvB,EACF,EAAiB,UAAU;;IAG9B;EACD;EAAc;EACd,EAAe;EAAS,EAAiB;EAC1C,CAAC;AAyBF,QAvBA,QAAgB;EACd,IAAI;AAeJ,SAdI,EAAe,WAAW,MAC5B,IAAW,IAAI,qBAAqB;GAClC,IAAM,EAAE,cAAA,MAAiB,EAAe;AACxC,GAAI,MAAiB,EAAiB,YACpC,EAAmB,UAAU,IAC7B,GAAU,YAAY;IAExB,EAEF,EAAS,QAAQ,EAAe,QAAQ,EACxC,EAAe,QAAQ,iBAAiB,UAAU,EAAmB,EACrE,EAAe,QAAQ,iBAAiB,UAAU,EAAmB,SAG1D;AAGX,GAFA,EAAe,SAAS,oBAAoB,UAAU,EAAmB,EACzE,EAAe,SAAS,oBAAoB,UAAU,EAAmB,EACzE,GAAU,YAAY;;IAEvB,CAAC,EAAmB,CAAC,EAGtB,kBAAC,OAAD;EACE,KAAK;EACD;EACJ,WAAW,GAAG,EAAA,SAAqB;EAC5B;YACN,IAAc,kBAAC,GAAD,EAAgB,CAAA,GAAG;EAC9B,CAAA"}

package/lib/tabs/context.d.ts

@@ -1,12 +1,3 @@
-import React__default from 'react';
-import { TabsContextType, TabsProviderProps } from './types.js';
-import '../@types/Size.js';
-import '../@types/Position.js';
-import '../@types/PermissionAttr.js';
-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, keepPanelsInOrder, keepTabOriginalPosition, }: TabsProviderProps): JSX.Element;
-
-export { TabsContext, TabsProvider };
+import { TabsContextType, TabsProviderProps } from './types';
+export declare const TabsContext: import('react').Context<TabsContextType>;
+export declare function TabsProvider({ children, tabs: tabsProp, container, selectedTab, onTabChange, onTabClose, tabsWidth: tabsWidthProp, firstTabIdent, keepPanelsInOrder, keepTabOriginalPosition, }: TabsProviderProps): import("react/jsx-runtime").JSX.Element;

package/lib/tabs/context.js

@@ -1,131 +1,82 @@
-"use strict";
+import { __toESM as e } from "../_virtual/_rolldown/runtime.js";
+import { require_lodash as t } from "../node_modules/lodash/lodash.js";
+import { getTabs as n } from "./tabHelpers.js";
+import { createContext as r, useCallback as i, useEffect as a, useMemo as o, useRef as s, useState as c } from "react";
+import { jsx as l } from "react/jsx-runtime";
+//#region src/lib/tabs/context.tsx
+var u = /* @__PURE__ */ e(t(), 1), d = r({});
+function f({ children: e, tabs: t, container: r, selectedTab: f = null, onTabChange: p, onTabClose: m, tabsWidth: h, firstTabIdent: g = !1, keepPanelsInOrder: _, keepTabOriginalPosition: v = !0 }) {
+	let [y, b] = c(f), [x, S] = c(() => r.current?.clientWidth ?? 0), [C, w] = c(n(t)), T = s(null), E = (T.current?.clientWidth ?? 0) - 38 - (g ? 15 : 0), D = o(() => typeof h == "string" ? h === "auto" ? 100 : parseInt(h) || 100 : h, [h]), O = Math.round(E / D);
+	f && f !== y && b(f), C.length > 0 && y === null && b(C[0]?.id);
+	let k = o(() => E === 0 ? [] : C.slice(O), [
+		C,
+		O,
+		x
+	]), A = o(() => C.slice(0, O), [
+		C,
+		O,
+		x
+	]), j = C.length, M = i((e) => {
+		let t = k.findIndex((t) => t.id === e);
+		if (t !== -1) {
+			let n = C.findIndex((t) => t.id === e), r = k[t];
+			w((e) => (e.splice(n, 1), [r, ...e]));
+		}
+	}, [
+		w,
+		A,
+		C,
+		k
+	]), N = i((e) => {
+		v || M(e), b(e), p && p(e);
+	}, [
+		p,
+		b,
+		M
+	]), P = i((e) => {
+		let t = C.findIndex((t) => t.id === e), n = t === 0 ? C[t + 1] : C[t - 1];
+		y === e && N(n.id), t !== -1 && w((e) => (e.splice(t, 1), e)), m && m(String(e));
+	}, [
+		m,
+		C,
+		k,
+		y
+	]), F = i((e) => {
+		S(e.width);
+	}, [S]);
+	return a(() => {
+		let e = n(t);
+		if (e !== C) {
+			let t = u.default.differenceBy(e, C, "id"), n = u.default.differenceBy(C, e, "id").map((e) => e.id);
+			w((e) => {
+				let r = e;
+				return n && (r = r.filter((e) => !n.includes(e.id))), [...r, ...t];
+			});
+		}
+	}, [t]), a(() => {
+		let e = new ResizeObserver(([e]) => {
+			F(e.contentRect);
+		});
+		return r.current && e.observe(r.current), () => {
+			e.disconnect();
+		};
+	}, [r.current, F]), /* @__PURE__ */ l(d.Provider, {
+		value: {
+			tabs: C,
+			menuTabs: A,
+			dropdownTabs: k,
+			containerWidth: x,
+			tabsCount: j,
+			selectTab: N,
+			selectedTabId: y,
+			removeTab: P,
+			menuRef: T,
+			keepPanelsInOrder: _
+		},
+		children: e
+	});
+}
+//#endregion
+export { d as TabsContext, f as TabsProvider };
 
-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);
-    }
-  }, [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;
-      });
-    }
-    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);
-    });
-    if (container.current) resizeObserver.observe(container.current);
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [container.current, onResizeContainer]);
-  return /*#__PURE__*/_react.default.createElement(TabsContext.Provider, {
-    value: {
-      tabs,
-      menuTabs,
-      dropdownTabs,
-      containerWidth,
-      tabsCount,
-      selectTab,
-      selectedTabId,
-      removeTab,
-      menuRef,
-      keepPanelsInOrder
-    }
-  }, children);
-}
+//# sourceMappingURL=context.js.map

package/lib/tabs/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../src/lib/tabs/context.tsx"],"sourcesContent":["import { createContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport _ from 'lodash';\nimport { TabProps, TabsContextType, TabsProviderProps } from './types';\nimport { getTabs } from './tabHelpers';\n\nexport const TabsContext = createContext({} as TabsContextType);\n\nexport function TabsProvider({\n  children,\n  tabs: tabsProp,\n  container,\n  selectedTab = null,\n  onTabChange,\n  onTabClose,\n  tabsWidth: tabsWidthProp,\n  firstTabIdent = false,\n  keepPanelsInOrder,\n  keepTabOriginalPosition = true,\n}: TabsProviderProps) {\n  const [selectedTabId, setSelectedTabId] = useState<string | number | null>(selectedTab);\n  const [containerWidth, setContainerWidth] = useState(() => {\n    return container.current?.clientWidth ?? 0;\n  });\n  const [tabs, setTabs] = useState<TabProps[]>(getTabs(tabsProp));\n  const menuRef = useRef<any>(null);\n  const menuSize = (menuRef.current?.clientWidth ?? 0) - 38 - (firstTabIdent ? 15 : 0);\n  const tabsWidth = useMemo(() => {\n    if (typeof tabsWidthProp === 'string')\n      return tabsWidthProp === 'auto' ? 100 : (parseInt(tabsWidthProp) || 100);\n\n    return tabsWidthProp;\n  }, [tabsWidthProp]);\n  const maxTabs = Math.round(menuSize / tabsWidth);\n\n  if (selectedTab && selectedTab !== selectedTabId) {\n    setSelectedTabId(selectedTab);\n  }\n\n  if (tabs.length > 0 && selectedTabId === null) {\n    setSelectedTabId(tabs[0]?.id);\n  }\n\n  const dropdownTabs = useMemo(() => {\n    if (menuSize === 0) return [];\n    return tabs.slice(maxTabs);\n  }, [tabs, maxTabs, containerWidth]);\n\n  const menuTabs = useMemo(() => {\n    return tabs.slice(0, maxTabs);\n  }, [tabs, maxTabs, containerWidth]);\n\n  const tabsCount = tabs.length;\n\n  const updateTabs = useCallback((tabId: string | number) => {\n    const tabInDropdownIndex = dropdownTabs.findIndex(tab => tab.id === tabId);\n\n    if (tabInDropdownIndex !== -1) {\n      const tabIndex = tabs.findIndex(tab => tab.id === tabId);\n      const tabInDropdown = dropdownTabs[tabInDropdownIndex];\n\n      setTabs((prevState) => {\n        prevState.splice(tabIndex, 1);\n        return [tabInDropdown, ...prevState];\n      });\n    }\n  }, [setTabs, menuTabs, tabs, dropdownTabs]);\n\n  const selectTab = useCallback((tabId:  string | number) => {\n    if (!keepTabOriginalPosition) updateTabs(tabId);\n    setSelectedTabId(tabId);\n\n    if (onTabChange) {\n      onTabChange(tabId);\n    }\n  }, [onTabChange, setSelectedTabId, updateTabs]);\n\n  const removeTab = useCallback((tabId: string | number) => {\n    const tabIndex = tabs.findIndex(tab => tab.id === tabId);\n    const newSelectedTab = tabIndex === 0 ? tabs[tabIndex + 1] : tabs[tabIndex - 1];\n\n    if (selectedTabId === tabId) {\n      selectTab(newSelectedTab.id);\n    }\n\n    if (tabIndex !== -1) {\n      setTabs((prevState) => {\n        prevState.splice(tabIndex, 1);\n        return prevState;\n      });\n    }\n    if (onTabClose) {\n      onTabClose(String(tabId));\n    }\n  }, [onTabClose, tabs, dropdownTabs, selectedTabId]);\n\n  const onResizeContainer = useCallback((contentRect: DOMRectReadOnly) => {\n    setContainerWidth(contentRect.width);\n  }, [setContainerWidth]);\n\n  useEffect(() => {\n    const newTabs = getTabs(tabsProp);\n\n    if (newTabs !== tabs) {\n      const includedTabs = _.differenceBy(newTabs, tabs, 'id');\n      const excludedTabsIds = _.differenceBy(tabs, newTabs, 'id').map(tab => tab.id);\n\n      setTabs((prevState) => {\n        let currentTabs = prevState;\n        if (excludedTabsIds) {\n          currentTabs = currentTabs.filter(tab => !excludedTabsIds.includes(tab.id));\n        }\n\n        return [...currentTabs, ...includedTabs];\n      });\n    }\n  }, [tabsProp]);\n\n  useEffect(() => {\n    const resizeObserver = new ResizeObserver(([entry]) => {\n      onResizeContainer(entry.contentRect);\n    });\n\n    if (container.current) resizeObserver.observe(container.current);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [container.current, onResizeContainer]);\n\n  return (\n    <TabsContext.Provider value={{\n      tabs, menuTabs, dropdownTabs, containerWidth, tabsCount, selectTab, selectedTabId, removeTab, \n      menuRef, keepPanelsInOrder,\n    } satisfies TabsContextType}>\n      {children}\n    </TabsContext.Provider>\n  );\n}\n"],"mappings":";;;;;;mCAKa,IAAc,EAAc,EAAE,CAAoB;AAE/D,SAAgB,EAAa,EAC3B,aACA,MAAM,GACN,cACA,iBAAc,MACd,gBACA,eACA,WAAW,GACX,mBAAgB,IAChB,sBACA,6BAA0B,MACN;CACpB,IAAM,CAAC,GAAe,KAAoB,EAAiC,EAAY,EACjF,CAAC,GAAgB,KAAqB,QACnC,EAAU,SAAS,eAAe,EACzC,EACI,CAAC,GAAM,KAAW,EAAqB,EAAQ,EAAS,CAAC,EACzD,IAAU,EAAY,KAAK,EAC3B,KAAY,EAAQ,SAAS,eAAe,KAAK,MAAM,IAAgB,KAAK,IAC5E,IAAY,QACZ,OAAO,KAAkB,WACpB,MAAkB,SAAS,MAAO,SAAS,EAAc,IAAI,MAE/D,GACN,CAAC,EAAc,CAAC,EACb,IAAU,KAAK,MAAM,IAAW,EAAU;AAMhD,CAJI,KAAe,MAAgB,KACjC,EAAiB,EAAY,EAG3B,EAAK,SAAS,KAAK,MAAkB,QACvC,EAAiB,EAAK,IAAI,GAAG;CAG/B,IAAM,IAAe,QACf,MAAa,IAAU,EAAE,GACtB,EAAK,MAAM,EAAQ,EACzB;EAAC;EAAM;EAAS;EAAe,CAAC,EAE7B,IAAW,QACR,EAAK,MAAM,GAAG,EAAQ,EAC5B;EAAC;EAAM;EAAS;EAAe,CAAC,EAE7B,IAAY,EAAK,QAEjB,IAAa,GAAa,MAA2B;EACzD,IAAM,IAAqB,EAAa,WAAU,MAAO,EAAI,OAAO,EAAM;AAE1E,MAAI,MAAuB,IAAI;GAC7B,IAAM,IAAW,EAAK,WAAU,MAAO,EAAI,OAAO,EAAM,EAClD,IAAgB,EAAa;AAEnC,MAAS,OACP,EAAU,OAAO,GAAU,EAAE,EACtB,CAAC,GAAe,GAAG,EAAU,EACpC;;IAEH;EAAC;EAAS;EAAU;EAAM;EAAa,CAAC,EAErC,IAAY,GAAa,MAA4B;AAIzD,EAHK,KAAyB,EAAW,EAAM,EAC/C,EAAiB,EAAM,EAEnB,KACF,EAAY,EAAM;IAEnB;EAAC;EAAa;EAAkB;EAAW,CAAC,EAEzC,IAAY,GAAa,MAA2B;EACxD,IAAM,IAAW,EAAK,WAAU,MAAO,EAAI,OAAO,EAAM,EAClD,IAAiB,MAAa,IAAI,EAAK,IAAW,KAAK,EAAK,IAAW;AAY7E,EAVI,MAAkB,KACpB,EAAU,EAAe,GAAG,EAG1B,MAAa,MACf,GAAS,OACP,EAAU,OAAO,GAAU,EAAE,EACtB,GACP,EAEA,KACF,EAAW,OAAO,EAAM,CAAC;IAE1B;EAAC;EAAY;EAAM;EAAc;EAAc,CAAC,EAE7C,IAAoB,GAAa,MAAiC;AACtE,IAAkB,EAAY,MAAM;IACnC,CAAC,EAAkB,CAAC;AAgCvB,QA9BA,QAAgB;EACd,IAAM,IAAU,EAAQ,EAAS;AAEjC,MAAI,MAAY,GAAM;GACpB,IAAM,IAAe,EAAA,QAAE,aAAa,GAAS,GAAM,KAAK,EAClD,IAAkB,EAAA,QAAE,aAAa,GAAM,GAAS,KAAK,CAAC,KAAI,MAAO,EAAI,GAAG;AAE9E,MAAS,MAAc;IACrB,IAAI,IAAc;AAKlB,WAJI,MACF,IAAc,EAAY,QAAO,MAAO,CAAC,EAAgB,SAAS,EAAI,GAAG,CAAC,GAGrE,CAAC,GAAG,GAAa,GAAG,EAAa;KACxC;;IAEH,CAAC,EAAS,CAAC,EAEd,QAAgB;EACd,IAAM,IAAiB,IAAI,gBAAgB,CAAC,OAAW;AACrD,KAAkB,EAAM,YAAY;IACpC;AAIF,SAFI,EAAU,WAAS,EAAe,QAAQ,EAAU,QAAQ,QAEnD;AACX,KAAe,YAAY;;IAE5B,CAAC,EAAU,SAAS,EAAkB,CAAC,EAGxC,kBAAC,EAAY,UAAb;EAAsB,OAAO;GAC3B;GAAM;GAAU;GAAc;GAAgB;GAAW;GAAW;GAAe;GACnF;GAAS;GACV;EACE;EACoB,CAAA"}

package/lib/tabs/index.d.ts

@@ -1,12 +1,5 @@
-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 };
+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 };

package/lib/tabs/index.js

@@ -1,75 +1,54 @@
-"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));
+import { __toESM as e } from "../_virtual/_rolldown/runtime.js";
+import { require_lodash as t } from "../node_modules/lodash/lodash.js";
+import '../assets/styles/tabs.css';/* empty css                    */
+import { tabsClass as n } from "./tabHelpers.js";
+import { TabsProvider as r } from "./context.js";
+import i from "./Menu.js";
+import a from "./Panel.js";
+import { Children as o, Fragment as s, isValidElement as c, useRef as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/lib/tabs/index.tsx
+var f = /* @__PURE__ */ e(t(), 1), p = ({ children: e, tabMenuPosition: t, toolbar: n, tabsWidth: r, customClassForToolBar: a, tabMenuSize: o, tabMenuAlign: c, firstTabIdent: l, tabsWithError: f }) => {
+	let p = /* @__PURE__ */ u(i, {
+		tabsWithError: f,
+		toolbar: n,
+		tabWidth: r,
+		customClassForToolBar: a,
+		tabMenuSize: o,
+		tabMenuAlign: c,
+		firstTabIdent: l
+	});
+	return t === "top" || t === "left" ? /* @__PURE__ */ d(s, { children: [p, e] }) : /* @__PURE__ */ d(s, { children: [e, p] });
+}, m = ({ toolbar: e, children: t, firstTabIdent: i, handlerTabClick: a, handlerCloseTab: s, style: d = {}, tabMenuSize: m = "default", tabMenuAlign: h = "left", tabMenuPosition: g = "top", customClassForToolBar: _ = "", tabsWidth: v = "auto", tabsWithError: y, keepPanelsInOrder: b, ...x }) => {
+	let S = l(null), C = o.toArray(t).filter((e) => c(e) ? !!e.props.id : !1);
+	return /* @__PURE__ */ u(r, {
+		tabs: b ? f.default.sortBy(C, (e) => b.indexOf(e.props.id)) : t,
+		container: S,
+		onTabChange: a,
+		onTabClose: s,
+		tabsWidth: v,
+		firstTabIdent: i,
+		keepPanelsInOrder: b,
+		...x,
+		children: /* @__PURE__ */ u("div", {
+			ref: S,
+			className: n(g),
+			style: d,
+			children: p({
+				children: t,
+				tabMenuPosition: g,
+				toolbar: e,
+				tabsWidth: v,
+				customClassForToolBar: _,
+				tabMenuSize: m,
+				tabMenuAlign: h,
+				firstTabIdent: i,
+				tabsWithError: y
+			})
+		})
+	});
 };
-var _default = exports.default = Tabs;
+//#endregion
+export { a as TabPanel, m as default };
+
+//# sourceMappingURL=index.js.map

package/lib/tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/lib/tabs/index.tsx"],"sourcesContent":["import '../assets/styles/tabs.scss';\n\nimport { Children, Fragment, isValidElement, useRef, type ReactElement } from 'react';\nimport _ from 'lodash';\nimport Menu from './Menu';\nimport TabPanel from './Panel';\nimport { tabsClass } from './tabHelpers';\nimport { ITabsPros, type TabProps } from './types';\nimport { TabsProvider } from './context';\n\nconst getContent = ({ \n  children, tabMenuPosition, toolbar, tabsWidth, customClassForToolBar, tabMenuSize,\n  tabMenuAlign, firstTabIdent, tabsWithError,\n}: ITabsPros) => {\n  const menu = (\n    <Menu\n      tabsWithError={tabsWithError}\n      toolbar={toolbar} \n      tabWidth={tabsWidth}\n      customClassForToolBar={customClassForToolBar}\n      tabMenuSize={tabMenuSize}\n      tabMenuAlign={tabMenuAlign}\n      firstTabIdent={firstTabIdent} />\n  );\n    \n  if (tabMenuPosition === 'top' || tabMenuPosition === 'left') {\n    return (\n      <Fragment>\n        {menu}\n        {children}\n      </Fragment>\n    );\n  }\n\n  return (\n    <Fragment>\n      {children}\n      {menu}\n    </Fragment>\n  );\n};\n\nconst Tabs = ({\n  toolbar,\n  children,\n  firstTabIdent,\n  handlerTabClick,\n  handlerCloseTab,\n  style = {},\n  tabMenuSize = 'default',\n  tabMenuAlign = 'left',\n  tabMenuPosition = 'top',\n  customClassForToolBar = '',\n  tabsWidth = 'auto',\n  tabsWithError,\n  keepPanelsInOrder,\n  ...props\n}: ITabsPros) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const childrensTabPanels = Children.toArray(children)\n    .filter((childComp): childComp is ReactElement<TabProps> => {\n      if (isValidElement(childComp)) {\n        const childProps = childComp.props as TabProps;\n        return !!childProps.id;\n      }\n      return false;\n    });\n\n  const childrensInOrder = keepPanelsInOrder ?\n      _.sortBy(childrensTabPanels, tabPanel => keepPanelsInOrder.indexOf(tabPanel.props.id))\n    : children;\n\n  return (\n    <TabsProvider\n      tabs={childrensInOrder}\n      container={containerRef as any}\n      onTabChange={handlerTabClick}\n      onTabClose={handlerCloseTab}\n      tabsWidth={tabsWidth}\n      firstTabIdent={firstTabIdent}\n      keepPanelsInOrder={keepPanelsInOrder}\n      {...props}>\n      <div\n        ref={containerRef}\n        className={tabsClass(tabMenuPosition)}\n        style={style}>\n        {getContent({ \n          children, tabMenuPosition, toolbar, tabsWidth, customClassForToolBar, tabMenuSize,\n          tabMenuAlign, firstTabIdent, tabsWithError,\n        })}\n      </div>\n    </TabsProvider>\n  );\n};\n\nexport default Tabs;\nexport { TabPanel };\n"],"mappings":";;;;;;;;;;mCAUM,KAAc,EAClB,aAAU,oBAAiB,YAAS,cAAW,0BAAuB,gBACtE,iBAAc,kBAAe,uBACd;CACf,IAAM,IACJ,kBAAC,GAAD;EACiB;EACN;EACT,UAAU;EACa;EACV;EACC;EACC;EAAiB,CAAA;AAYpC,QATI,MAAoB,SAAS,MAAoB,SAEjD,kBAAC,GAAD,EAAA,UAAA,CACG,GACA,EAAA,EACQ,CAAA,GAKb,kBAAC,GAAD,EAAA,UAAA,CACG,GACA,EAAA,EACQ,CAAA;GAIT,KAAQ,EACZ,YACA,aACA,kBACA,oBACA,oBACA,WAAQ,EAAE,EACV,iBAAc,WACd,kBAAe,QACf,qBAAkB,OAClB,2BAAwB,IACxB,eAAY,QACZ,kBACA,sBACA,GAAG,QACY;CACf,IAAM,IAAe,EAAuB,KAAK,EAE3C,IAAqB,EAAS,QAAQ,EAAS,CAClD,QAAQ,MACH,EAAe,EAAU,GAEpB,CAAC,CADW,EAAU,MACT,KAEf,GACP;AAMJ,QACE,kBAAC,GAAD;EACE,MANqB,IACrB,EAAA,QAAE,OAAO,IAAoB,MAAY,EAAkB,QAAQ,EAAS,MAAM,GAAG,CAAC,GACtF;EAKA,WAAW;EACX,aAAa;EACb,YAAY;EACD;EACI;EACI;EACnB,GAAI;YACJ,kBAAC,OAAD;GACE,KAAK;GACL,WAAW,EAAU,EAAgB;GAC9B;aACN,EAAW;IACV;IAAU;IAAiB;IAAS;IAAW;IAAuB;IACtE;IAAc;IAAe;IAC9B,CAAA;GACG,CAAA;EACO,CAAA"}

package/lib/tabs/tabHelpers.d.ts

@@ -1,12 +1,27 @@
-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): {
+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): {
     justifyContent: string;
 };
-declare const onDeniedOptions: string[];
-
-export { getCurrentThreshold, getTabs, menuStyles, onDeniedOptions, tabsClass };
+export declare const onDeniedOptions: string[];