qbs-react-grid 2.2.3 → 2.2.5

package/es/qbsTable/Toolbar.js

@@ -1,13 +1,12 @@
 import React, { useCallback, useRef, useState } from 'react';
 import useResponsiveStore from '../utils/useResponsiveStore';
 import debounce from './utilities/debounce';
-import { CardView, ContentView, DefaultView, ExpandIcon, TableView } from './utilities/icons';
+import { CardView, TableView } from './utilities/icons';
 import SearchInput from './utilities/SearchInput';
-import { formatSelectedItems, mergeLabels } from './labels';
 import { getRowDisplayRange } from './utilities/tablecalc';
 import TooltipComponent from './utilities/ToolTip';
 var ToolBar = function ToolBar(_ref) {
-  var _checkedKeys$length, _paginationProps$tota, _paginationProps$rows, _paginationProps$curr;
+  var _paginationProps$tota, _paginationProps$rows, _paginationProps$curr;
   var pagination = _ref.pagination,
     _ref$paginationProps = _ref.paginationProps,
     paginationProps = _ref$paginationProps === void 0 ? {} : _ref$paginationProps,
@@ -28,19 +27,7 @@ var ToolBar = function ToolBar(_ref) {
     tableViewToggle = _ref.tableViewToggle,
     setTableViewToggle = _ref.setTableViewToggle,
     _ref$enableTableToggl = _ref.enableTableToggle,
-    enableTableToggle = _ref$enableTableToggl === void 0 ? false : _ref$enableTableToggl,
-    _ref$rowViewToggle = _ref.rowViewToggle,
-    rowViewToggle = _ref$rowViewToggle === void 0 ? false : _ref$rowViewToggle,
-    _ref$defaultRowView = _ref.defaultRowView,
-    defaultRowView = _ref$defaultRowView === void 0 ? true : _ref$defaultRowView,
-    _ref$fullWidthView = _ref.fullWidthView,
-    fullWidthView = _ref$fullWidthView === void 0 ? false : _ref$fullWidthView,
-    setTableFullView = _ref.setTableFullView,
-    setRowViewToggle = _ref.setRowViewToggle,
-    _ref$isFullScreen = _ref.isFullScreen,
-    isFullScreen = _ref$isFullScreen === void 0 ? false : _ref$isFullScreen,
-    labelsProp = _ref.labels;
-  var labels = mergeLabels(labelsProp);
+    enableTableToggle = _ref$enableTableToggl === void 0 ? false : _ref$enableTableToggl;
   var debouncedOnSearch = useCallback(debounce(onSearch != null ? onSearch : function () {}, 1000), [onSearch]);
   var _useState = useState(searchValue),
     searchParam = _useState[0],
@@ -89,8 +76,7 @@ var ToolBar = function ToolBar(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-primary-filter"
   }, search && /*#__PURE__*/React.createElement(SearchInput, {
-    placeholder: searchPlaceholder != null ? searchPlaceholder : labels.search,
-    searchAriaLabel: labels.searchAriaLabel,
+    placeholder: searchPlaceholder != null ? searchPlaceholder : 'Search',
     handleChange: handleChange,
     handleSearch: handleSearch,
     searchValue: searchParam
@@ -111,45 +97,12 @@ var ToolBar = function ToolBar(_ref) {
     strokeLinejoin: "round",
     d: "M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z"
   }))), tableHeaderActions, /*#__PURE__*/React.createElement("div", {
-    className: " pr-1 cursor-pointer relative table_custom_ctions   "
-  }, (rowViewToggle || isFullScreen) && /*#__PURE__*/React.createElement("div", {
-    className: "flex gap-2 qbs-row-switch-cntainer"
-  }, rowViewToggle && /*#__PURE__*/React.createElement("div", {
-    className: "flex gap-2 table_cell_style"
-  }, /*#__PURE__*/React.createElement(TooltipComponent, {
-    tableBodyRef: toolbarRef,
-    title: labels.switchToDefaultView
-  }, /*#__PURE__*/React.createElement("div", {
-    onClick: function onClick() {
-      return setRowViewToggle === null || setRowViewToggle === void 0 ? void 0 : setRowViewToggle(true);
-    }
-  }, /*#__PURE__*/React.createElement(DefaultView, {
-    className: "" + (defaultRowView ? 'active' : '')
-  }))), /*#__PURE__*/React.createElement(TooltipComponent, {
-    tableBodyRef: toolbarRef,
-    title: labels.switchToRelaxedView
-  }, /*#__PURE__*/React.createElement("div", {
-    onClick: function onClick() {
-      return setRowViewToggle === null || setRowViewToggle === void 0 ? void 0 : setRowViewToggle(false);
-    }
-  }, /*#__PURE__*/React.createElement(ContentView, {
-    className: "" + (!defaultRowView ? 'active' : '')
-  })))), isFullScreen && /*#__PURE__*/React.createElement("div", {
-    className: " table_full_width"
-  }, /*#__PURE__*/React.createElement(TooltipComponent, {
-    tableBodyRef: toolbarRef,
-    title: labels.switchToFullScreen
-  }, /*#__PURE__*/React.createElement("div", {
-    onClick: function onClick() {
-      return setTableFullView === null || setTableFullView === void 0 ? void 0 : setTableFullView(!fullWidthView);
-    }
-  }, /*#__PURE__*/React.createElement(ExpandIcon, {
-    className: "" + (fullWidthView ? 'active' : '')
-  }))))), enableTableToggle && !isMobile && /*#__PURE__*/React.createElement("div", {
+    className: " pr-1 cursor-pointer relative  "
+  }, enableTableToggle && !isMobile && /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-top-icons flex gap-2"
   }, /*#__PURE__*/React.createElement(TooltipComponent, {
     tableBodyRef: toolbarRef,
-    title: labels.switchToTableView
+    title: 'Switch to Table View'
   }, /*#__PURE__*/React.createElement("div", {
     onClick: function onClick() {
       return setTableViewToggle === null || setTableViewToggle === void 0 ? void 0 : setTableViewToggle(true);
@@ -164,7 +117,7 @@ var ToolBar = function ToolBar(_ref) {
     }
   }, /*#__PURE__*/React.createElement(TooltipComponent, {
     tableBodyRef: toolbarRef,
-    title: labels.switchToCardView
+    title: 'Switch to Card View'
   }, /*#__PURE__*/React.createElement(CardView, {
     className: "" + (!tableViewToggle ? 'active' : '')
   }))))))), isMobile && isOpen && /*#__PURE__*/React.createElement("div", {
@@ -177,26 +130,24 @@ var ToolBar = function ToolBar(_ref) {
     className: "qbs-table-toolbar-sub-container-start"
   }, /*#__PURE__*/React.createElement("div", {
     className: "selected-row"
-  }, formatSelectedItems(labels.selectedItems, (_checkedKeys$length = checkedKeys === null || checkedKeys === void 0 ? void 0 : checkedKeys.length) != null ? _checkedKeys$length : 0)), /*#__PURE__*/React.createElement("div", {
+  }, "Selected Items(" + (checkedKeys === null || checkedKeys === void 0 ? void 0 : checkedKeys.length) + ") "), /*#__PURE__*/React.createElement("div", {
     className: "selected-row-action"
   }, /*#__PURE__*/React.createElement("button", {
     className: "btn",
     onClick: function onClick() {
       return onSelect === null || onSelect === void 0 ? void 0 : onSelect([]);
     }
-  }, labels.clear), selectedRowActions === null || selectedRowActions === void 0 ? void 0 : selectedRowActions.map(function (actions, index) {
+  }, "Clear"), selectedRowActions === null || selectedRowActions === void 0 ? void 0 : selectedRowActions.map(function (actions, index) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, handleHide(actions) && /*#__PURE__*/React.createElement("button", {
       key: index.toString(),
-      className: "btn " + (actions === null || actions === void 0 ? void 0 : actions.buttonClassName),
+      className: "btn",
       disabled: actions.disabled,
       onClick: function onClick() {
         return actions === null || actions === void 0 ? void 0 : actions.action(checkedKeys);
       }
-    }, (actions === null || actions === void 0 ? void 0 : actions.icon) && /*#__PURE__*/React.createElement("span", {
-      className: "mr-2"
-    }, actions === null || actions === void 0 ? void 0 : actions.icon), /*#__PURE__*/React.createElement("span", null, actions.actionTitle)));
+    }, actions.actionTitle));
   }))) : /*#__PURE__*/React.createElement("div", null, pagination && paginationProps && dataLength > 0 && /*#__PURE__*/React.createElement("div", {
     className: "rows-count"
-  }, getRowDisplayRange((_paginationProps$tota = paginationProps.total) != null ? _paginationProps$tota : 0, (_paginationProps$rows = paginationProps.rowsPerPage) != null ? _paginationProps$rows : 0, (_paginationProps$curr = paginationProps.currentPage) != null ? _paginationProps$curr : 0, labels.showingRange)))));
+  }, getRowDisplayRange((_paginationProps$tota = paginationProps.total) != null ? _paginationProps$tota : 0, (_paginationProps$rows = paginationProps.rowsPerPage) != null ? _paginationProps$rows : 0, (_paginationProps$curr = paginationProps.currentPage) != null ? _paginationProps$curr : 0)))));
 };
 export default ToolBar;

package/es/qbsTable/commontypes.d.ts

@@ -1,6 +1,4 @@
 import React, { ReactElement, ReactNode } from 'react';
-import type { QbsTableLabels } from './labels';
-export type { QbsTableLabels };
 interface Content {
     cell: ReactNode | string;
     toolTip?: string;
@@ -41,7 +39,7 @@ export interface PaginationProps {
 export interface ActionProps {
     title?: string;
     action?: (row: any) => void;
-    icon?: React.ReactNode;
+    icon: React.ReactNode;
     toolTip?: string;
     hidden?: boolean;
     hide?: (data: any, index?: number) => boolean;
@@ -71,7 +69,6 @@ export interface QbsTableProps {
     searchValue?: string;
     handleSearchValue?: (value?: string) => void;
     theme?: string;
-    rtl?: boolean;
     onRowClick?: (data: any) => void;
     cellBordered?: boolean;
     bordered?: boolean;
@@ -92,15 +89,12 @@ export interface QbsTableProps {
     advancefilter?: ReactElement | ReactNode;
     tableHeaderActions?: ReactElement | ReactNode;
     searchPlaceholder?: string;
-    labels?: QbsTableLabels;
     selectedRowActions?: {
         actionTitle?: string;
         action: (checked: (number | string)[]) => void;
         disabled?: boolean;
         hidden?: boolean;
         customHide?: string;
-        buttonClassName?: string;
-        icon?: ReactElement | ReactNode;
     }[];
     selectedRows?: (number | string)[];
     classes?: {
@@ -133,20 +127,6 @@ export interface QbsTableProps {
     handleTableCardView?: (data: any) => React.ReactNode;
     isCustomTableCardView?: boolean;
     handleCustomCardLoader?: () => React.ReactNode;
-    hasMoreData?: boolean;
-    loadMoreData?: () => void;
-    infiniteScroll?: boolean;
-    infiniteLoading?: boolean;
-    viewMode?: string;
-    rowViewToggle?: boolean;
-    defaultRowView?: boolean;
-    fullWidthView?: boolean;
-    setTableFullView?: (value: boolean) => void;
-    setRowViewToggle?: (value: boolean) => void;
-    dropType?: 'horizondal' | 'vertical';
-    rowHeight?: number;
-    isFullScreen?: boolean;
-    showHeader?: boolean;
 }
 export interface QbsTableToolbarProps {
     title?: string;
@@ -171,7 +151,6 @@ export interface QbsTableToolbarProps {
     dataLength: number;
     headerHeight?: number;
     searchPlaceholder?: string;
-    labels?: QbsTableLabels;
     tableView?: boolean;
     enableTableToggle?: boolean;
     tableViewToggle?: boolean;
@@ -182,13 +161,6 @@ export interface QbsTableToolbarProps {
         disabled?: boolean;
         hidden?: boolean;
         customHide?: string;
-        buttonClassName?: string;
-        icon?: ReactElement | ReactNode;
     }[];
-    rowViewToggle?: boolean;
-    defaultRowView?: boolean;
-    fullWidthView?: boolean;
-    setTableFullView?: (value: boolean) => void;
-    setRowViewToggle?: (value: boolean) => void;
-    isFullScreen?: boolean;
 }
+export {};

package/es/qbsTable/utilities/CardComponent.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { QbsColumnProps } from '../commontypes';
-import { type QbsTableLabels } from '../labels';
 type Props = {
     columns: QbsColumnProps[];
     data: any;
@@ -10,7 +9,6 @@ type Props = {
     handleMenuActions?: () => void;
     cardColumLimit?: number;
     childDetailHeading?: string;
-    labels?: QbsTableLabels;
 };
 declare const CardComponent: React.FC<Props>;
 export default CardComponent;

package/es/qbsTable/utilities/CardComponent.js

@@ -1,5 +1,4 @@
 import React, { useRef, useState } from 'react';
-import { mergeLabels } from '../labels';
 import CardMenuDropdown from './CardMenuDropdown';
 import { handleCellFormat } from './handleFormatCell';
 import { ArrowUpIcon } from './icons';
@@ -16,9 +15,7 @@ var CardComponent = function CardComponent(_ref) {
     cardColumLimit = _ref$cardColumLimit === void 0 ? 5 : _ref$cardColumLimit,
     handleMenuActions = _ref.handleMenuActions,
     _ref$childDetailHeadi = _ref.childDetailHeading,
-    childDetailHeading = _ref$childDetailHeadi === void 0 ? '' : _ref$childDetailHeadi,
-    labelsProp = _ref.labels;
-  var labels = mergeLabels(labelsProp);
+    childDetailHeading = _ref$childDetailHeadi === void 0 ? '' : _ref$childDetailHeadi;
   var _useState = useState(false),
     viewMore = _useState[0],
     setViewMore = _useState[1];
@@ -67,11 +64,10 @@ var CardComponent = function CardComponent(_ref) {
     rowData: data,
     iconName: "more",
     rowIndex: index,
-    handleMenuActions: handleMenuActions,
-    labels: labels
+    handleMenuActions: handleMenuActions
   })), columns.length > initialDisplayCount && /*#__PURE__*/React.createElement(TooltipComponent, {
     tableBodyRef: useCardRef,
-    title: viewMore ? labels.viewLess : labels.viewMore,
+    title: viewMore ? ' View Less' : 'View More',
     enabled: false
   }, /*#__PURE__*/React.createElement("button", {
     onClick: toggleViewMore,

package/es/qbsTable/utilities/CardMenuDropdown.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { ActionProps } from '../commontypes';
-import { type QbsTableLabels } from '../labels';
 type Props = {
     iconName: string;
     actionDropDown: ActionProps[];
@@ -9,7 +8,6 @@ type Props = {
     dataTheme?: string;
     tableBodyRef: React.RefObject<HTMLDivElement>;
     rowIndex?: number;
-    labels?: QbsTableLabels;
 };
 declare const CardMenuDropdown: React.FC<Props>;
 export default CardMenuDropdown;

package/es/qbsTable/utilities/CardMenuDropdown.js

@@ -1,13 +1,11 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { mergeLabels } from '../labels';
+import { useEffect, useRef, useState } from 'react';
+import React from 'react';
 import { ThreeDotIcon } from './icons';
 import TooltipComponent from './ToolTip';
 var CardMenuDropdown = function CardMenuDropdown(_ref) {
   var actionDropDown = _ref.actionDropDown,
     handleMenuActions = _ref.handleMenuActions,
-    rowData = _ref.rowData,
-    labelsProp = _ref.labels;
-  var labels = mergeLabels(labelsProp);
+    rowData = _ref.rowData;
   var _useState = useState(false),
     openMenu = _useState[0],
     setOpenMenu = _useState[1];
@@ -34,6 +32,7 @@ var CardMenuDropdown = function CardMenuDropdown(_ref) {
         var dropdownHeight = 200; // Adjust this if your dropdown height varies
         var spaceBelow = window.innerHeight - buttonRect.bottom;
         var spaceAbove = buttonRect.top;
+        console.log(spaceAbove, spaceBelow, dropdownHeight);
         if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
           setMenuPositionStyles({
             bottom: '30px',
@@ -66,8 +65,9 @@ var CardMenuDropdown = function CardMenuDropdown(_ref) {
     onClick: toggleMenu,
     ref: menuButtonRef
   }, /*#__PURE__*/React.createElement(TooltipComponent, {
-    title: labels.actions,
-    enabled: false
+    title: "Actions",
+    enabled: false,
+    ref: menuButtonRef
   }, /*#__PURE__*/React.createElement(ThreeDotIcon, null))), openMenu && /*#__PURE__*/React.createElement("div", {
     className: " qbs-card-dropdown rounded absolute right-0 mt-2 w-auto min-w-11 z-10 shadow-modalShadow bg-white dark:bg-[#424242] dark:text-white",
     style: menuPositionStyles

package/es/qbsTable/utilities/ColumShowHide.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { QbsColumnProps } from '../commontypes';
-import { type QbsTableLabels } from '../labels';
 interface ColumnToggleProps {
     columns: QbsColumnProps[];
     onToggle: (columnName: string) => void;
@@ -10,9 +9,6 @@ interface ColumnToggleProps {
     handleColumnToggle?: (columns: QbsColumnProps[]) => void;
     handleResetColumns?: () => void;
     tableHeight?: number;
-    viewMode?: string;
-    setViewMode?: (value: string) => void;
-    labels?: QbsTableLabels;
 }
 declare const ColumnToggle: React.FC<ColumnToggleProps>;
 export default ColumnToggle;

package/es/qbsTable/utilities/ColumShowHide.js

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { mergeLabels } from '../labels';
 import { SettingsIcon } from './icons';
 var ColumnToggle = function ColumnToggle(_ref) {
   var columns = _ref.columns,
@@ -10,9 +9,7 @@ var ColumnToggle = function ColumnToggle(_ref) {
     handleResetColumns = _ref.handleResetColumns,
     handleColumnToggle = _ref.handleColumnToggle,
     _ref$tableHeight = _ref.tableHeight,
-    tableHeight = _ref$tableHeight === void 0 ? 450 : _ref$tableHeight,
-    labelsProp = _ref.labels;
-  var labels = mergeLabels(labelsProp);
+    tableHeight = _ref$tableHeight === void 0 ? 450 : _ref$tableHeight;
   var _useState = useState(null),
     draggedItem = _useState[0],
     setDraggedItem = _useState[1];
@@ -167,7 +164,7 @@ var ColumnToggle = function ColumnToggle(_ref) {
     className: "qbs-table-popup-item"
   }, /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-popup-label"
-  }, labels.fixedColumns), /*#__PURE__*/React.createElement("div", {
+  }, "FIXED COLUMNS"), /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-columns-container"
   }, /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-column"
@@ -179,7 +176,7 @@ var ColumnToggle = function ColumnToggle(_ref) {
     className: "qbs-table-popup-item"
   }, /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-popup-label"
-  }, labels.visibleColumns), /*#__PURE__*/React.createElement("div", {
+  }, "VISIBLE COLUMNS"), /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-columns-container"
   }, /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-column"
@@ -191,7 +188,7 @@ var ColumnToggle = function ColumnToggle(_ref) {
     className: "qbs-table-popup-item"
   }, /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-popup-label"
-  }, labels.availableColumns), /*#__PURE__*/React.createElement("div", {
+  }, "AVAILABLE COLUMNS"), /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-columns-container"
   }, /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-column"
@@ -212,12 +209,12 @@ var ColumnToggle = function ColumnToggle(_ref) {
     onClick: function onClick() {
       return handleResetColumns === null || handleResetColumns === void 0 ? void 0 : handleResetColumns();
     }
-  }, labels.resetToDefault), /*#__PURE__*/React.createElement("a", {
+  }, "Reset to default"), /*#__PURE__*/React.createElement("a", {
     className: "qbs-table-reset-link",
     href: "#",
     onClick: function onClick() {
       return handleColToggle();
     }
-  }, labels.save))))));
+  }, "Save"))))));
 };
 export default ColumnToggle;

package/es/qbsTable/utilities/SearchInput.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 export interface SearchProps {
     placeholder: string;
-    searchAriaLabel?: string;
     handleChange: (value: string) => void;
     searchValue: string | undefined;
     handleSearch: (value?: string) => void;

package/es/qbsTable/utilities/SearchInput.js

@@ -1,8 +1,6 @@
 import React, { memo, useCallback } from 'react';
 var SearchInput = function SearchInput(_ref) {
   var placeholder = _ref.placeholder,
-    _ref$searchAriaLabel = _ref.searchAriaLabel,
-    searchAriaLabel = _ref$searchAriaLabel === void 0 ? 'Search' : _ref$searchAriaLabel,
     handleChange = _ref.handleChange,
     searchValue = _ref.searchValue,
     handleSearch = _ref.handleSearch;
@@ -26,7 +24,7 @@ var SearchInput = function SearchInput(_ref) {
     placeholder: placeholder,
     value: searchValue != null ? searchValue : '',
     onChange: handleInputChange,
-    "aria-label": searchAriaLabel
+    "aria-label": "Search"
   }), /*#__PURE__*/React.createElement("button", {
     className: "search-button absolute left-1 bottom-1.5 bg-white text-grey-dark",
     onClick: function onClick() {

package/es/qbsTable/utilities/ToolTip.d.ts

@@ -1,10 +1,3 @@
 import React from 'react';
-type TooltipComponentProps = {
-    title?: React.ReactNode;
-    children: React.ReactNode;
-    tableBodyRef?: React.RefObject<HTMLDivElement | null>;
-    /** When false, renders children only (no tooltip). */
-    enabled?: boolean;
-};
-declare const TooltipComponent: React.FC<TooltipComponentProps>;
+declare const TooltipComponent: React.FC<any>;
 export default TooltipComponent;

package/es/qbsTable/utilities/ToolTip.js

@@ -1,117 +1,41 @@
-import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import ReactDOM from 'react-dom';
-var VIEWPORT_PADDING = 8;
-var TOOLTIP_GAP = 8;
+import React, { useRef, useState } from 'react';
 var TooltipComponent = function TooltipComponent(_ref) {
   var title = _ref.title,
     children = _ref.children,
-    tableBodyRef = _ref.tableBodyRef,
-    _ref$enabled = _ref.enabled,
-    enabled = _ref$enabled === void 0 ? true : _ref$enabled;
-  var _useState = useState(false),
-    visible = _useState[0],
-    setVisible = _useState[1];
-  var _useState2 = useState(false),
-    positioned = _useState2[0],
-    setPositioned = _useState2[1];
-  var _useState3 = useState('down'),
-    placement = _useState3[0],
-    setPlacement = _useState3[1];
-  var _useState4 = useState({
-      top: 0,
-      left: 0
-    }),
-    coords = _useState4[0],
-    setCoords = _useState4[1];
-  var _useState5 = useState(0),
-    arrowOffset = _useState5[0],
-    setArrowOffset = _useState5[1];
-  var triggerRef = useRef(null);
-  var tooltipRef = useRef(null);
-  var updatePosition = useCallback(function () {
-    var _tableBodyRef$current, _tableBodyRef$current2, _trigger$closest;
-    var trigger = triggerRef.current;
-    var tooltip = tooltipRef.current;
-    if (!trigger || !tooltip) {
-      return;
+    tableBodyRef = _ref.tableBodyRef;
+  var _useState = useState('bottom-position'),
+    dropdownPosition = _useState[0],
+    setDropdownPosition = _useState[1];
+  var dropRef = useRef(null);
+  var menuButtonRef = useRef(null);
+  var adjustDropdownPosition = function adjustDropdownPosition() {
+    if (menuButtonRef.current && tableBodyRef !== null && tableBodyRef !== void 0 && tableBodyRef.current) {
+      var _menuButtonRef$curren;
+      var inputBoxRect = (_menuButtonRef$curren = menuButtonRef.current) === null || _menuButtonRef$curren === void 0 ? void 0 : _menuButtonRef$curren.getBoundingClientRect();
+      var tableRect = tableBodyRef.current.getBoundingClientRect();
+      // Calculate positions relative to the table
+      var spaceAbove = inputBoxRect.top - tableRect.top;
+      var spaceBelow = tableRect.bottom - inputBoxRect.bottom;
+      if (spaceAbove > spaceBelow) {
+        setDropdownPosition('top-position');
+      } else {
+        setDropdownPosition('bottom-position');
+      }
     }
-    var triggerRect = trigger.getBoundingClientRect();
-    var tooltipRect = tooltip.getBoundingClientRect();
-    var boundaryRect = (_tableBodyRef$current = tableBodyRef === null || tableBodyRef === void 0 ? void 0 : (_tableBodyRef$current2 = tableBodyRef.current) === null || _tableBodyRef$current2 === void 0 ? void 0 : _tableBodyRef$current2.getBoundingClientRect()) != null ? _tableBodyRef$current : (_trigger$closest = trigger.closest('.qbs-table')) === null || _trigger$closest === void 0 ? void 0 : _trigger$closest.getBoundingClientRect();
-    var spaceAbove = boundaryRect ? triggerRect.top - boundaryRect.top : triggerRect.top;
-    var spaceBelow = boundaryRect ? boundaryRect.bottom - triggerRect.bottom : window.innerHeight - triggerRect.bottom;
-    var nextPlacement = spaceBelow >= tooltipRect.height + TOOLTIP_GAP || spaceBelow >= spaceAbove ? 'down' : 'up';
-    var triggerCenter = triggerRect.left + triggerRect.width / 2;
-    var left = triggerCenter - tooltipRect.width / 2;
-    if (left < VIEWPORT_PADDING) {
-      left = VIEWPORT_PADDING;
-    } else if (left + tooltipRect.width > window.innerWidth - VIEWPORT_PADDING) {
-      left = window.innerWidth - VIEWPORT_PADDING - tooltipRect.width;
-    }
-    var top = nextPlacement === 'down' ? triggerRect.bottom + TOOLTIP_GAP : triggerRect.top - tooltipRect.height - TOOLTIP_GAP;
-    setPlacement(nextPlacement);
-    setCoords({
-      top: top,
-      left: left
-    });
-    setArrowOffset(triggerCenter - left);
-    setPositioned(true);
-  }, [tableBodyRef]);
-  var showTooltip = function showTooltip() {
-    setPositioned(false);
-    setVisible(true);
-  };
-  var hideTooltip = function hideTooltip() {
-    setVisible(false);
-    setPositioned(false);
   };
-  useLayoutEffect(function () {
-    if (!visible) {
-      return;
-    }
-    updatePosition();
-    var frame = window.requestAnimationFrame(updatePosition);
-    return function () {
-      return window.cancelAnimationFrame(frame);
-    };
-  }, [visible, title, updatePosition]);
-  useEffect(function () {
-    if (!visible) {
-      return;
-    }
-    var handleReposition = function handleReposition() {
-      return updatePosition();
-    };
-    window.addEventListener('resize', handleReposition);
-    window.addEventListener('scroll', handleReposition, true);
-    return function () {
-      window.removeEventListener('resize', handleReposition);
-      window.removeEventListener('scroll', handleReposition, true);
-    };
-  }, [visible, updatePosition]);
-  if (!title || enabled === false) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
-  }
-  var portalRoot = typeof document !== 'undefined' ? document.body : null;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    ref: triggerRef,
-    className: "qbs-table-tooltip-trigger",
+  return /*#__PURE__*/React.createElement("div", {
+    className: "qbs-table-tooltip " + (dropdownPosition == 'bottom-position' ? 'down' : 'up') + " "
+  }, /*#__PURE__*/React.createElement("span", {
+    ref: menuButtonRef,
     style: {
-      display: 'inline-flex'
+      display: 'flex'
     },
-    onMouseEnter: showTooltip,
-    onMouseLeave: hideTooltip,
-    onFocus: showTooltip,
-    onBlur: hideTooltip
-  }, children), visible && portalRoot && /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("span", {
-    ref: tooltipRef,
-    role: "tooltip",
-    className: "qbs-table-tooltip-floating tooltiptext qbs-table-tooltip-floating--" + placement + " " + (positioned ? 'is-positioned' : ''),
-    style: {
-      top: coords.top,
-      left: coords.left,
-      '--tooltip-arrow-offset': arrowOffset + "px"
+    onMouseEnter: function onMouseEnter() {
+      return adjustDropdownPosition();
     }
-  }, title), portalRoot));
+  }, children), /*#__PURE__*/React.createElement("span", {
+    ref: dropRef,
+    className: 'tooltiptext'
+  }, title));
 };
 export default TooltipComponent;

package/es/qbsTable/utilities/empty.js

@@ -70,7 +70,7 @@ var NoData = function NoData(_ref) {
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#797979",
     d: "M47.365 57.417a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 57.417a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 52.974a.926.926 0 00.926-.927V50.27a.926.926 0 00-1.852 0v1.777c0 .512.415.927.926.927zM104.183 52.974a.926.926 0 00.926-.927V50.27a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 44.088a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 44.088a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 39.645a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 39.645a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 35.202a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 35.202a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 30.758a.926.926 0 00.926-.926v-.888c0-.248.02-.49.057-.726a.926.926 0 00-1.83-.288c-.052.33-.08.67-.08 1.014v.888c0 .512.416.926.927.926zM104.183 30.758a.926.926 0 00.926-.926v-.888c0-.345-.027-.683-.079-1.014a.926.926 0 10-1.83.288c.037.236.057.478.057.726v.888c0 .512.414.926.926.926zM47.881 26.426a.926.926 0 001.294-.204c.286-.394.633-.74 1.026-1.026a.926.926 0 00-1.09-1.498c-.55.4-1.034.884-1.434 1.434a.926.926 0 00.204 1.294zM103.667 26.426a.926.926 0 00.204-1.294 6.509 6.509 0 00-1.434-1.434.926.926 0 00-1.09 1.498c.393.286.74.632 1.026 1.026a.926.926 0 001.294.204zM51.138 23.597c.08.506.554.851 1.059.772a4.67 4.67 0 01.726-.057h.914a.926.926 0 000-1.852h-.914c-.344 0-.683.026-1.014.078a.926.926 0 00-.77 1.06zM100.41 23.597a.927.927 0 00-.771-1.059 6.522 6.522 0 00-1.014-.078h-.914a.926.926 0 100 1.852h.914c.248 0 .49.02.726.057a.926.926 0 001.059-.772zM55.653 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H56.58a.926.926 0 00-.926.926zM60.223 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H61.15a.926.926 0 00-.926.926zM64.793 23.386c0 .511.415.926.926.926h1.829a.926.926 0 000-1.852h-1.829a.926.926 0 00-.926.926zM69.364 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852H70.29a.926.926 0 00-.927.926zM73.934 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852H74.86a.926.926 0 00-.926.926zM78.504 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H79.43a.926.926 0 00-.926.926zM83.074 23.386c0 .511.415.926.927.926h1.828a.926.926 0 000-1.852H84a.926.926 0 00-.927.926zM87.644 23.386c0 .511.415.926.927.926h1.828a.926.926 0 000-1.852H88.57a.926.926 0 00-.927.926zM92.215 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852h-1.828a.926.926 0 00-.926.926zM72.178 36.453a1.39 1.39 0 10-1.965 1.965l3.797 3.797-3.797 3.798a1.39 1.39 0 001.965 1.965l3.797-3.798 3.798 3.798a1.39 1.39 0 001.965-1.965l-3.798-3.798 3.798-3.797a1.39 1.39 0 10-1.965-1.965l-3.798 3.797-3.797-3.797z"
-  })), ' '), /*#__PURE__*/React.createElement("p", {
+  })), " ", ' '), /*#__PURE__*/React.createElement("p", {
     className: "text-center text-common font-bold text-blackAlt nodata-title"
   }, title), /*#__PURE__*/React.createElement("span", {
     className: "text-xxs font-medium text-grey-medium nodata-sub-title"

package/es/qbsTable/utilities/icons.d.ts

@@ -6,6 +6,3 @@ export declare const TableIcon: React.FC<any>;
 export declare const CardIcon: React.FC<any>;
 export declare const CardView: React.FC<any>;
 export declare const TableView: React.FC<any>;
-export declare const ExpandIcon: React.FC<any>;
-export declare const ContentView: React.FC<any>;
-export declare const DefaultView: React.FC<any>;