linear-react-components-ui 1.1.20-beta.33 → 1.1.20-beta.34

package/lib/table/index.js

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TBody", {
+  enumerable: true,
+  get: function () {
+    return _Body.default;
+  }
+});
+Object.defineProperty(exports, "THeader", {
+  enumerable: true,
+  get: function () {
+    return _Header.default;
+  }
+});
+Object.defineProperty(exports, "TRow", {
+  enumerable: true,
+  get: function () {
+    return _Row.default;
+  }
+});
+Object.defineProperty(exports, "Td", {
+  enumerable: true,
+  get: function () {
+    return _RowColumn.default;
+  }
+});
+Object.defineProperty(exports, "Th", {
+  enumerable: true,
+  get: function () {
+    return _HeaderColumn.default;
+  }
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _Header = _interopRequireDefault(require("./Header"));
+var _Row = _interopRequireDefault(require("./Row"));
+var _Body = _interopRequireDefault(require("./Body"));
+var _HeaderColumn = _interopRequireDefault(require("./HeaderColumn"));
+var _RowColumn = _interopRequireDefault(require("./RowColumn"));
+require("../assets/styles/table.scss");
+var _helpers = _interopRequireDefault(require("./helpers"));
+const _excluded = ["children"],
+  _excluded2 = ["onColClick", "onRowClick", "bodyScrollable", "vertical", "skeletonize", "strict", "skeletonHeight", "skeletonInHeader", "skeletonInRows", "customClass", "bordered", "hovered", "headerColored", "condensed", "selectedRowId", "striped"];
+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 s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(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 (e.includes(n)) continue; t[n] = r[n]; } return t; }
+// TODO - Precisa finalizar o scroll no corpo da tabela.
+const getClass = _ref => {
+  let {
+    customClass,
+    striped,
+    bordered,
+    hovered,
+    skeletonize,
+    headerColored,
+    condensed,
+    vertical,
+    bodyScrollable,
+    skeletonInRows = 10
+  } = _ref;
+  return `table-component ${customClass} ${striped && '-striped'} 
+  ${bordered && '-bordered'} ${hovered && '-hovered'} ${headerColored && '-headercolor'}
+  ${condensed && '-condensed'}
+  ${vertical && '-vertical'}
+  ${skeletonize && !skeletonInRows ? '-skeletonized' : ''}
+  ${bodyScrollable ? '-scrollable' : ''}`;
+};
+const Table = _ref2 => {
+  let {
+      children
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  const {
+      onColClick,
+      onRowClick,
+      bodyScrollable,
+      vertical,
+      skeletonize,
+      strict,
+      skeletonHeight,
+      skeletonInHeader,
+      skeletonInRows,
+      customClass,
+      bordered,
+      hovered,
+      headerColored,
+      condensed,
+      selectedRowId: selectedRowIdFromProps,
+      striped
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded2);
+  const [selectedRowId, setSelectedRowId] = (0, _react.useState)(selectedRowIdFromProps);
+  const [bodyScrollWidth, setBodyScrollWidth] = (0, _react.useState)(0);
+  const [columnsWidth, setColumnsWidth] = (0, _react.useState)([]);
+  const [columnsCount, setColumnsCount] = (0, _react.useState)(0);
+  const bodyContainerRef = (0, _react.useRef)(null);
+  const handleSelectRow = (0, _react.useCallback)(selectedId => {
+    setSelectedRowId(selectedId);
+  }, []);
+  const handlerSetColumnsWidth = (0, _react.useCallback)(widths => {
+    if (!_lodash.default.isEmpty(widths) && _lodash.default.isEmpty(columnsWidth)) setColumnsWidth(widths);
+  }, [columnsWidth]);
+  const handlerSetColumnsCount = (0, _react.useCallback)(count => setColumnsCount(count), []);
+  const getContextValues = (0, _react.useCallback)(() => ({
+    bodyContainerRef,
+    bodyScrollWidth,
+    selectedRowId,
+    vertical,
+    skeletonize,
+    skeletonHeight,
+    skeletonInHeader,
+    skeletonInRows,
+    strict,
+    columnsCount,
+    handleSelectRow,
+    handleTableColClick: onColClick,
+    handleTableRowClick: onRowClick,
+    handlerSetColumnsWidth,
+    columnsWidth,
+    handlerSetColumnsCount
+  }), [bodyContainerRef, bodyScrollWidth, selectedRowId, vertical, skeletonize, skeletonHeight, skeletonInHeader, skeletonInRows, strict, columnsCount, handleSelectRow, onColClick, onRowClick, handlerSetColumnsWidth, columnsWidth, handlerSetColumnsCount]);
+  const contextValues = (0, _react.useMemo)(() => getContextValues(), [getContextValues]);
+  (0, _react.useEffect)(() => {
+    if (bodyScrollable && bodyContainerRef && bodyContainerRef.current) {
+      const {
+        offsetWidth,
+        clientWidth
+      } = bodyContainerRef.current;
+      const scrollWidth = offsetWidth - clientWidth;
+      if (scrollWidth !== bodyScrollWidth) setBodyScrollWidth(scrollWidth);
+    }
+  }, []);
+  (0, _react.useEffect)(() => {
+    setSelectedRowId(props.selectedRowId);
+  }, [props.selectedRowId]);
+  return /*#__PURE__*/_react.default.createElement(_helpers.default.Provider, {
+    value: contextValues
+  }, bodyScrollable ? /*#__PURE__*/_react.default.createElement("div", {
+    className: getClass(props)
+  }, children) : /*#__PURE__*/_react.default.createElement("table", _extends({
+    style: {
+      contain: strict ? 'strict' : 'size style'
+    },
+    className: getClass(props)
+  }, rest), children));
+};
+var _default = exports.default = Table;

package/lib/table/types.d.ts

@@ -0,0 +1,97 @@
+import { TableHTMLAttributes, ReactNode, ComponentProps, MouseEvent, CSSProperties, LegacyRef, SetStateAction } from 'react';
+
+interface ITableProps extends TableHTMLAttributes<HTMLTableElement> {
+    children?: ReactNode;
+    striped?: boolean;
+    customClass?: string;
+    bordered?: boolean;
+    hovered?: boolean;
+    headerColored?: boolean;
+    condensed?: boolean;
+    onRowClick?: () => void;
+    onColClick?: () => void;
+    vertical?: boolean;
+    selectedRowId?: string;
+    bodyScrollable?: boolean;
+    skeletonize?: boolean;
+    strict?: boolean;
+    skeletonInRows?: number;
+    skeletonInHeader?: boolean;
+    skeletonHeight?: number;
+}
+interface ITableHeaderProps extends ComponentProps<'th'> {
+    children?: ReactNode;
+    customClass?: string;
+    textAlign?: string;
+    visible?: boolean;
+    id?: string;
+    isMenuColumn?: boolean;
+}
+interface ITableBodyProps extends TableHTMLAttributes<HTMLTableElement> {
+    children?: ReactNode;
+    customClass?: string;
+    columnsCount?: number;
+    vertical?: boolean;
+    skeletonize?: boolean;
+    skeletonInRows?: number;
+    skeletonHeight?: number;
+}
+interface ITableRowProps extends Pick<TableHTMLAttributes<HTMLTableRowElement>, 'onMouseEnter' | 'onMouseLeave'> {
+    children?: ReactNode;
+    color?: string;
+    customClass?: string;
+    rowId?: string;
+    dataId?: number | string;
+    onClick?: (e: MouseEvent, dataId?: number | string) => void;
+    handleTableColClick?: (e: MouseEvent, dataId?: number | string) => void;
+    rowBorder?: boolean;
+    height?: string;
+    style?: CSSProperties;
+    ignoreTableColClick?: boolean;
+    textAlign?: string;
+    displayContent?: 'always' | 'never' | 'onRowHover';
+    visible?: boolean;
+    divider?: boolean;
+    dividerTitle?: string;
+    dividerColor?: 'primary' | 'danger' | 'info' | 'success' | 'warning';
+    dividerColSpan?: number;
+    dividerStyle?: CSSProperties;
+    rowSpan?: number;
+    colSpan?: number;
+    isMenuColumn?: boolean;
+}
+interface ITableContext {
+    bodyScrollable?: boolean;
+    skeletonInRows?: number;
+    bodyContainerRef?: LegacyRef<HTMLDivElement>;
+    bodyScrollWidth?: number | string;
+    selectedRowId?: string;
+    vertical?: boolean;
+    skeletonize?: boolean;
+    skeletonInHeader?: boolean;
+    skeletonHeight?: number;
+    strict?: boolean;
+    columnsCount?: number;
+    columnsWidth?: string[] | number[];
+    handleSelectRow?: (rowId: SetStateAction<string | undefined>) => void;
+    handleTableColClick?: () => void;
+    handleTableRowClick?: (e: MouseEvent, dataId?: number | string) => void;
+    handlerSetColumnsWidth?: (width: (string | number | undefined)[]) => void;
+    handlerSetColumnsCount?: (count: number) => void;
+    tableContainer?: HTMLTableElement | null;
+}
+interface ITableRowContext {
+    skeletonize?: boolean;
+    vertical?: boolean;
+    skeletonInRows?: number;
+    rowBorder?: boolean;
+}
+type TableElement = {
+    props: {
+        style: {
+            width: string | number;
+        };
+    };
+};
+
+export { ITableBodyProps, ITableContext, ITableHeaderProps, ITableProps, ITableRowContext, ITableRowProps, TableElement };

package/lib/table/types.js

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

package/lib/tabs/DropdownTabs.d.ts

@@ -0,0 +1,11 @@
+import { DropdownProps } 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 DropdownTabs: ({ tabs, tabMenuSize, }: DropdownProps) => JSX.Element | null;
+
+export { DropdownTabs as default };

package/lib/tabs/DropdownTabs.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _buttons = _interopRequireDefault(require("../buttons"));
+var _list = _interopRequireWildcard(require("../list"));
+var _useTabs = require("./useTabs");
+var _lodash = _interopRequireDefault(require("lodash"));
+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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+const DropdownTab = _ref => {
+  let {
+    id,
+    title,
+    closeable,
+    iconAlign,
+    icon,
+    iconName,
+    disabled,
+    tabMenuSize
+  } = _ref;
+  const {
+    selectTab,
+    removeTab
+  } = (0, _useTabs.useTabs)();
+  return /*#__PURE__*/_react.default.createElement(_list.ListItem, {
+    key: id
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "menuitem"
+  }, /*#__PURE__*/_react.default.createElement(_buttons.default, {
+    className: "btn menubutton",
+    boxShadow: false,
+    onClick: () => selectTab(id),
+    iconAlign: iconAlign,
+    iconName: iconName,
+    icon: icon,
+    disabled: disabled,
+    label: title,
+    size: tabMenuSize,
+    transparent: true
+  }), closeable && /*#__PURE__*/_react.default.createElement("button", {
+    className: "closepanel",
+    onClick: () => removeTab(id)
+  })));
+};
+const DropdownTabs = _ref2 => {
+  let {
+    tabs = [],
+    tabMenuSize = 'medium'
+  } = _ref2;
+  const hasTabs = tabs.length > 0;
+  const uniqueTabs = _lodash.default.uniqBy(tabs, 'id');
+  if (tabs.length === 0) return null;
+  return /*#__PURE__*/_react.default.createElement(_buttons.default, {
+    dropdown: true,
+    dropdownAlign: "right",
+    transparent: true,
+    boxShadow: false,
+    size: "large",
+    customClass: `dropdownbutton ${hasTabs ? 'show' : ''}`
+  }, /*#__PURE__*/_react.default.createElement(_list.default, {
+    customClass: "dropdown-hide-tabs"
+  }, uniqueTabs.map(tab => /*#__PURE__*/_react.default.createElement(DropdownTab, _extends({
+    key: tab.id,
+    tabMenuSize: tabMenuSize
+  }, tab)))));
+};
+var _default = exports.default = DropdownTabs;

package/lib/tabs/Menu.d.ts

@@ -0,0 +1,11 @@
+import { MenuProps } 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 Menu: ({ toolbar, customClassForToolBar, tabWidth, ...props }: MenuProps) => JSX.Element;
+
+export { Menu as default };

package/lib/tabs/Menu.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _MenuTabs = _interopRequireDefault(require("./MenuTabs"));
+var _DropdownTabs = _interopRequireDefault(require("./DropdownTabs"));
+var _useTabs = require("./useTabs");
+const _excluded = ["toolbar", "customClassForToolBar", "tabWidth"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(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 (e.includes(n)) continue; t[n] = r[n]; } return t; }
+const Menu = _ref => {
+  let {
+      toolbar,
+      customClassForToolBar = '',
+      tabWidth = 'auto'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    menuTabs,
+    menuRef,
+    dropdownTabs
+  } = (0, _useTabs.useTabs)();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "menucontainer"
+  }, /*#__PURE__*/_react.default.createElement(_MenuTabs.default, {
+    tabs: menuTabs,
+    tabWidth: tabWidth,
+    tabMenuSize: props.tabMenuSize,
+    tabMenuAlign: props.tabMenuAlign,
+    firstTabIdent: props.firstTabIdent,
+    ref: menuRef
+  }), /*#__PURE__*/_react.default.createElement(_DropdownTabs.default, {
+    tabs: dropdownTabs,
+    tabWidth: tabWidth,
+    tabMenuSize: props.tabMenuSize,
+    tabMenuAlign: props.tabMenuAlign,
+    firstTabIdent: props.firstTabIdent
+  }), toolbar && /*#__PURE__*/_react.default.cloneElement(toolbar, {
+    customClass: `menubar ${customClassForToolBar}`
+  }));
+};
+var _default = exports.default = Menu;

package/lib/tabs/MenuTabs.d.ts

@@ -0,0 +1,11 @@
+import React__default from 'react';
+import { MenuProps } 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 MenuTabs: React__default.ForwardRefExoticComponent<MenuProps & React__default.RefAttributes<HTMLUListElement>>;
+
+export { MenuTabs as default };

package/lib/tabs/MenuTabs.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _buttons = _interopRequireDefault(require("../buttons"));
+var helpers = _interopRequireWildcard(require("./tabHelpers"));
+var _permissionValidations = require("../permissionValidations");
+var _useTabs = require("./useTabs");
+var _lodash = _interopRequireDefault(require("lodash"));
+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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+const MenuTab = _ref => {
+  let {
+    id,
+    title,
+    tabWidth,
+    iconAlign,
+    iconName,
+    icon,
+    disabled,
+    permissionAttr,
+    tabMenuSize,
+    tooltip,
+    tooltipPosition,
+    tooltipWidth,
+    closeable
+  } = _ref;
+  const {
+    selectedTabId,
+    selectTab,
+    removeTab,
+    tabsCount
+  } = (0, _useTabs.useTabs)();
+  const onDenied = (0, _permissionValidations.actionsOnPermissionDenied)(helpers.onDeniedOptions, permissionAttr);
+  return onDenied.unvisible ? null : /*#__PURE__*/_react.default.createElement("li", {
+    key: id,
+    style: {
+      width: tabWidth
+    },
+    className: `menuitem ${selectedTabId === id && 'selected'}`
+  }, /*#__PURE__*/_react.default.createElement(_buttons.default, {
+    className: "btn menubutton",
+    boxShadow: false,
+    onClick: () => selectTab(id),
+    iconAlign: iconAlign,
+    iconName: iconName,
+    icon: icon,
+    disabled: disabled || !!onDenied.disabled,
+    label: title,
+    size: tabMenuSize,
+    tooltip: tooltip || title,
+    tooltipPosition: tooltipPosition,
+    tooltipWidth: tooltipWidth
+  }), closeable && tabsCount > 1 && /*#__PURE__*/_react.default.createElement("button", {
+    className: "closepanel",
+    onClick: () => removeTab(id)
+  }));
+};
+const MenuTabs = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    tabs = [],
+    tabWidth = 'auto',
+    tabMenuSize = 'medium',
+    tabMenuAlign = 'left',
+    firstTabIdent = false
+  } = _ref2;
+  const uniqueTabs = _lodash.default.uniqBy(tabs, 'id');
+  return /*#__PURE__*/_react.default.createElement("ul", {
+    className: `menu ${firstTabIdent && '-firsttabident'}`,
+    style: helpers.menuStyles(tabMenuAlign),
+    ref: ref
+  }, uniqueTabs.map(tab => /*#__PURE__*/_react.default.createElement(MenuTab, _extends({
+    key: tab.id,
+    tabMenuSize: tabMenuSize,
+    tabWidth: tabWidth
+  }, tab))));
+});
+MenuTabs.displayName = 'MenuTabs';
+var _default = exports.default = MenuTabs;

package/lib/tabs/Panel.d.ts

@@ -0,0 +1,11 @@
+import { PanelProps } 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 Panel: (props: PanelProps) => JSX.Element;
+
+export { Panel as default };

package/lib/tabs/Panel.js

@@ -0,0 +1,84 @@
+"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 _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 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) {
+          enableOnEndReached.current = true;
+          observer?.disconnect();
+        }
+      });
+      observer.observe(rootElementRef.current);
+      rootElementRef.current.addEventListener('scroll', onScrollEndReached);
+      rootElementRef.current.addEventListener('resize', onScrollEndReached);
+    }
+    return () => {
+      rootElementRef.current?.removeEventListener('scroll', onScrollEndReached);
+      rootElementRef.current?.removeEventListener('resize', onScrollEndReached);
+      observer?.disconnect();
+    };
+  }, [onScrollEndReached]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: rootElementRef,
+    id: id,
+    className: `${customClass} panel ${hidePanel}`,
+    style: style
+  }, hideContent ? /*#__PURE__*/_react.default.createElement(_noPermission.default, null) : children);
+};
+var _default = exports.default = Panel;

package/lib/tabs/context.d.ts

@@ -0,0 +1,12 @@
+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, }: TabsProviderProps): JSX.Element;
+
+export { TabsContext, TabsProvider };