linear-react-components-ui 1.1.26-beta.9 → 2.0.0-beta.0

package/lib/tabs/Panel.js

@@ -1,62 +1,42 @@
-import { j as P } from "../chunks/jsx-runtime.D1SHvdVE.js";
-import { c as N } from "../chunks/compiler-runtime.Cu50tn6L.js";
-import { useRef as g, useState as A, useEffect as I } from "react";
-import { onDeniedOptions as _, getCurrentThreshold as k } from "./tabHelpers.js";
-import { actionsOnPermissionDenied as q } from "../permissionValidations.js";
-import B from "../noPermission/index.js";
-import { useTabs as F } from "./useTabs.js";
-const W = (j) => {
-  const e = N.c(18), {
-    id: c,
-    children: u,
-    onEndReached: s,
-    permissionAttr: f,
-    customClass: x,
-    onEndReachedThreshold: T,
-    style: h
-  } = j, C = x === void 0 ? "" : x, p = T === void 0 ? 0.1 : T, {
-    selectedTabId: L
-  } = F(), w = c !== L ? "hidepanel" : "", t = g(null);
-  let i;
-  e[0] !== f ? (i = q(_, f), e[0] = f, e[1] = i) : i = e[1];
-  const [z] = A(i), {
-    hideContent: E
-  } = z, v = g(!0), H = g(0);
-  let l;
-  e[2] !== s || e[3] !== p ? (l = async () => {
-    const n = t.current;
-    if (n && s) {
-      const {
-        scrollTop: b,
-        scrollHeight: O,
-        clientHeight: D
-      } = n, S = O - D - b - 1, $ = k(n, p);
-      S <= $ && v.current && (v.current = !1, await new Promise((y) => {
-        y(s());
-      }), H.current = O);
-    }
-  }, e[2] = s, e[3] = p, e[4] = l) : l = e[4];
-  const r = l;
-  let d;
-  e[5] !== s || e[6] !== r ? (d = () => {
-    let n;
-    return t.current && s && (n = new ResizeObserver(() => {
-      const {
-        scrollHeight: b
-      } = t.current;
-      b !== H.current && (v.current = !0, n?.disconnect());
-    }), n.observe(t.current), t.current.addEventListener("scroll", r), t.current.addEventListener("resize", r)), () => {
-      t.current?.removeEventListener("scroll", r), t.current?.removeEventListener("resize", r), n?.disconnect();
-    };
-  }, e[5] = s, e[6] = r, e[7] = d) : d = e[7];
-  let a;
-  e[8] !== r ? (a = [r], e[8] = r, e[9] = a) : a = e[9], I(d, a);
-  const R = `${C} panel ${w}`;
-  let o;
-  e[10] !== u || e[11] !== E ? (o = E ? /* @__PURE__ */ P.jsx(B, {}) : u, e[10] = u, e[11] = E, e[12] = o) : o = e[12];
-  let m;
-  return e[13] !== c || e[14] !== h || e[15] !== R || e[16] !== o ? (m = /* @__PURE__ */ P.jsx("div", { ref: t, id: c, className: R, style: h, children: o }), e[13] = c, e[14] = h, e[15] = R, e[16] = o, e[17] = m) : m = e[17], m;
-};
-export {
-  W as default
+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
+	});
 };
+//#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,4 +1,3 @@
-import { default as React } from 'react';
 import { TabsContextType, TabsProviderProps } from './types';
-export declare const TabsContext: React.Context<TabsContextType>;
-export declare function TabsProvider({ children, tabs: tabsProp, container, selectedTab, onTabChange, onTabClose, tabsWidth: tabsWidthProp, firstTabIdent, keepTabOriginalPosition, }: TabsProviderProps): import("react/jsx-runtime").JSX.Element;
+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,64 +1,82 @@
-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]));
-    }
-  }, [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];
-      });
-    }
-  }, [b]), B(() => {
-    const e = new ResizeObserver(([t]) => {
-      j(t.contentRect);
-    });
-    return d.current && e.observe(d.current), () => {
-      e.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 });
+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
+	});
 }
-export {
-  K as TabsContext,
-  V as TabsProvider
-};
+//#endregion
+export { d as TabsContext, f as TabsProvider };
+
+//# 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":"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"}

package/lib/tabs/index.d.ts

@@ -1,5 +1,5 @@
 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;
+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,73 +1,54 @@
-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
+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
+			})
+		})
+	});
 };
+//#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,7 +1,25 @@
-import { default as React } from 'react';
+import { ReactNode } 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 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;

package/lib/tabs/tabHelpers.js

@@ -1,48 +1,42 @@
-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;
-  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);
+import { OPTIONS_ON_DENIED as e } from "../permissionValidations.js";
+import { Children as t, isValidElement as n } from "react";
+//#region src/lib/tabs/tabHelpers.ts
+function r(e, t) {
+	if (t < 0) return 0;
+	if (t > 1) return 1;
+	let { scrollHeight: n, clientHeight: r } = e, i = n - r, a = Math.round(n * t), o = Math.round(i - i * .3);
+	return Math.min(a, o);
 }
-const p = (t) => (i.Children.map(t, (e) => {
-  if (!e || !i.isValidElement(e)) return null;
-  const {
-    children: l,
-    ...o
-  } = e.props;
-  return o;
+var i = (e) => (t.map(e, (e) => {
+	if (!e || !n(e)) return null;
+	let { ...t } = e.props;
+	return t;
 }) || []).filter((e) => !e.hidden), a = {
-  top: "",
-  left: "menu-left",
-  bottom: "menu-bottom",
-  right: "menu-right"
+	top: "",
+	left: "menu-left",
+	bottom: "menu-bottom",
+	right: "menu-right"
 };
-function b(t) {
-  let n = "tabs-component ";
-  return n += a[t], n;
+function o(e) {
+	let t = "tabs-component ";
+	return t += a[e], t;
 }
-const m = {
-  left: "flex-start",
-  top: "flex-start",
-  right: "flex-end",
-  bottom: "flex-end",
-  center: "center"
+var s = {
+	left: "flex-start",
+	top: "flex-start",
+	right: "flex-end",
+	bottom: "flex-end",
+	center: "center"
 };
-function M(t) {
-  return {
-    justifyContent: m[t]
-  };
+function c(e) {
+	return { justifyContent: s[e] };
 }
-const O = [r.disabled, r.unvisible, r.hideContent];
-export {
-  h as getCurrentThreshold,
-  p as getTabs,
-  M as menuStyles,
-  O as onDeniedOptions,
-  b as tabsClass
-};
+var l = [
+	e.disabled,
+	e.unvisible,
+	e.hideContent
+];
+//#endregion
+export { r as getCurrentThreshold, i as getTabs, c as menuStyles, l as onDeniedOptions, o as tabsClass };
+
+//# sourceMappingURL=tabHelpers.js.map

package/lib/tabs/tabHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabHelpers.js","names":[],"sources":["../../src/lib/tabs/tabHelpers.ts"],"sourcesContent":["import { Children, isValidElement, ReactNode } from 'react';\nimport { OPTIONS_ON_DENIED } from '../permissionValidations';\nimport { Position } from '../@types/Position';\nimport { TabProps } from './types';\n\nexport function getCurrentThreshold(\n  scrollableElement: HTMLDivElement,\n  scrollThreshold: number,\n): number {\n  const MIN_THRESHOLD = 0;\n  const MAX_THRESHOLD = 1;\n  if (scrollThreshold < MIN_THRESHOLD) return MIN_THRESHOLD;\n  if (scrollThreshold > MAX_THRESHOLD) return MAX_THRESHOLD;\n  const { scrollHeight, clientHeight } = scrollableElement;\n  const offsetHeight = scrollHeight - clientHeight;\n\n  const calculatedScrollThreshold = Math.round(scrollHeight * scrollThreshold);\n  const maxScrollThreshold = Math.round(offsetHeight - (offsetHeight * 0.3));\n\n  return Math.min(calculatedScrollThreshold, maxScrollThreshold);\n}\n\nexport const getTabs = (tabsProp: ReactNode) => {\n  const tabs = Children.map(tabsProp, (child) => {\n    if (!child || !isValidElement(child)) return null;\n    const { ...props } = child.props as TabProps;\n    return props;\n  }) || [];\n\n  return tabs.filter(tab => !tab.hidden);\n};\n\n/**\n * Get the css class according to the options passed to the Tabs Component\n */\nconst positionsMenuClass = {\n  top: '',\n  left: 'menu-left',\n  bottom: 'menu-bottom',\n  right: 'menu-right',\n};\n\nexport function tabsClass(tabMenuPosition: Exclude<Position, 'center'>) {\n  let cssClass = 'tabs-component ';\n  cssClass += positionsMenuClass[tabMenuPosition];\n  return cssClass;\n}\n\n/**\n * Menu Styles for tab menus\n */\nconst flextJustifyContent = {\n  left: 'flex-start',\n  top: 'flex-start',\n  right: 'flex-end',\n  bottom: 'flex-end',\n  center: 'center',\n};\n\nexport function menuStyles(tabMenuAlign: Position) {\n  return {\n    justifyContent: flextJustifyContent[tabMenuAlign],\n  };\n}\n\nexport const onDeniedOptions = [\n  OPTIONS_ON_DENIED.disabled,\n  OPTIONS_ON_DENIED.unvisible,\n  OPTIONS_ON_DENIED.hideContent,\n];\n"],"mappings":";;;AAKA,SAAgB,EACd,GACA,GACQ;AAGR,KAAI,IAAkB,EAAe,QAAO;AAC5C,KAAI,IAAkB,EAAe,QAAO;CAC5C,IAAM,EAAE,iBAAc,oBAAiB,GACjC,IAAe,IAAe,GAE9B,IAA4B,KAAK,MAAM,IAAe,EAAgB,EACtE,IAAqB,KAAK,MAAM,IAAgB,IAAe,GAAK;AAE1E,QAAO,KAAK,IAAI,GAA2B,EAAmB;;AAGhE,IAAa,KAAW,OACT,EAAS,IAAI,IAAW,MAAU;AAC7C,KAAI,CAAC,KAAS,CAAC,EAAe,EAAM,CAAE,QAAO;CAC7C,IAAM,EAAE,GAAG,MAAU,EAAM;AAC3B,QAAO;EACP,IAAI,EAAE,EAEI,QAAO,MAAO,CAAC,EAAI,OAAO,EAMlC,IAAqB;CACzB,KAAK;CACL,MAAM;CACN,QAAQ;CACR,OAAO;CACR;AAED,SAAgB,EAAU,GAA8C;CACtE,IAAI,IAAW;AAEf,QADA,KAAY,EAAmB,IACxB;;AAMT,IAAM,IAAsB;CAC1B,MAAM;CACN,KAAK;CACL,OAAO;CACP,QAAQ;CACR,QAAQ;CACT;AAED,SAAgB,EAAW,GAAwB;AACjD,QAAO,EACL,gBAAgB,EAAoB,IACrC;;AAGH,IAAa,IAAkB;CAC7B,EAAkB;CAClB,EAAkB;CAClB,EAAkB;CACnB"}

package/lib/tabs/types.d.ts

@@ -13,16 +13,18 @@ export type TabsContextType = {
     containerWidth: number;
     tabsCount: number;
     menuRef: RefObject<HTMLUListElement>;
+    keepPanelsInOrder?: Array<string | number>;
 };
 export interface TabsProviderProps {
-    children: React.ReactNode;
-    tabs: React.ReactNode;
+    children: ReactNode;
+    tabs: ReactNode;
     container: RefObject<HTMLDivElement>;
     tabsWidth: number | string;
     selectedTab?: string | number | null;
     onTabChange?: (tabId: string | number) => void;
     onTabClose?: (tabId: string) => void;
     firstTabIdent?: boolean;
+    keepPanelsInOrder?: Array<string | number>;
     keepTabOriginalPosition?: boolean;
 }
 export interface ITabsPros {
@@ -39,12 +41,15 @@ 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 {
     id: string | number;
     title: string;
-    iconAlign?: Extract<Position, 'left' | 'right'>;
+    hidden?: boolean;
+    iconAlign?: Extract<Position, 'left' | 'center'>;
     iconName?: IconNames;
     icon?: ReactElement;
     disabled?: boolean;
@@ -57,6 +62,7 @@ export interface TabProps {
     tooltipWidth?: string | number;
     closeable?: boolean;
     tabsLength?: number;
+    tabsWithError?: Array<string | number>;
 }
 export interface MenuProps {
     toolbar?: ReactElement<any>;
@@ -70,6 +76,7 @@ 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 {
 }

package/lib/tabs/useTabs.js

@@ -1,8 +1,10 @@
+import { TabsContext as e } from "./context.js";
 import { useContext as t } from "react";
-import { TabsContext as o } from "./context.js";
+//#region src/lib/tabs/useTabs.ts
 function n() {
-  return t(o);
+	return t(e);
 }
-export {
-  n as useTabs
-};
+//#endregion
+export { n as useTabs };
+
+//# sourceMappingURL=useTabs.js.map

package/lib/tabs/useTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabs.js","names":[],"sources":["../../src/lib/tabs/useTabs.ts"],"sourcesContent":["import { useContext } from 'react';\nimport { TabsContext } from './context';\n\nexport function useTabs() {\n  return useContext(TabsContext);\n}\n"],"mappings":";;;AAGA,SAAO,IAAA;AAAA,QACE,EAAW,EAAY"}