qbs-react-grid 2.2.17 → 2.2.18

package/lib/qbsTable/QbsTable.js

@@ -11,6 +11,7 @@ var _ColumnGroup = _interopRequireDefault(require("../ColumnGroup"));
 var _HeaderCell = _interopRequireDefault(require("../HeaderCell"));
 var _Pagination = _interopRequireDefault(require("../Pagination"));
 var _Table = _interopRequireDefault(require("../Table"));
+var _isRTL = _interopRequireDefault(require("../utils/isRTL"));
 var _useResponsiveStore = _interopRequireDefault(require("../utils/useResponsiveStore"));
 var _labels = require("./labels");
 var _CustomTableCell = require("./CustomTableCell");
@@ -29,6 +30,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var CHECKBOX_LINE_HEIGHT = '36px';
 var COLUMN_WIDTH = 250;
+var REFRESH_KEY = 0;
 var QbsTable = function QbsTable(_ref) {
   var _Object$keys;
   var handleColumnSort = _ref.handleColumnSort,
@@ -59,7 +61,7 @@ var QbsTable = function QbsTable(_ref) {
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? 630 : _ref$height,
     onExpandChange = _ref.onExpandChange,
-    wordWrap = _ref.wordWrap,
+    propsWordWrap = _ref.wordWrap,
     _ref$dataRowKey = _ref.dataRowKey,
     dataRowKey = _ref$dataRowKey === void 0 ? 'id' : _ref$dataRowKey,
     defaultExpandAllRows = _ref.defaultExpandAllRows,
@@ -71,6 +73,7 @@ var QbsTable = function QbsTable(_ref) {
     _ref$actionProps = _ref.actionProps,
     actionProps = _ref$actionProps === void 0 ? [] : _ref$actionProps,
     theme = _ref.theme,
+    rtlProp = _ref.rtl,
     handleMenuActions = _ref.handleMenuActions,
     onRowClick = _ref.onRowClick,
     expandedRowKeys = _ref.expandedRowKeys,
@@ -114,10 +117,11 @@ var QbsTable = function QbsTable(_ref) {
     isCustomTableCardView = _ref$isCustomTableCar === void 0 ? false : _ref$isCustomTableCar,
     handleTableCardView = _ref.handleTableCardView,
     handleCustomCardLoader = _ref.handleCustomCardLoader,
-    dropType = _ref.dropType,
-    labelsProp = _ref.labels,
-    _ref$rtl = _ref.rtl,
-    rtl = _ref$rtl === void 0 ? false : _ref$rtl,
+    hasMoreData = _ref.hasMoreData,
+    loadMoreData = _ref.loadMoreData,
+    infiniteLoading = _ref.infiniteLoading,
+    _ref$infiniteScroll = _ref.infiniteScroll,
+    infiniteScroll = _ref$infiniteScroll === void 0 ? false : _ref$infiniteScroll,
     _ref$rowViewToggle = _ref.rowViewToggle,
     rowViewToggle = _ref$rowViewToggle === void 0 ? false : _ref$rowViewToggle,
     _ref$defaultRowView = _ref.defaultRowView,
@@ -126,43 +130,50 @@ var QbsTable = function QbsTable(_ref) {
     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,
+    _ref$dropType = _ref.dropType,
+    dropType = _ref$dropType === void 0 ? 'horizondal' : _ref$dropType,
     rowHeight = _ref.rowHeight,
+    isFullScreen = _ref.isFullScreen,
     _ref$showHeader = _ref.showHeader,
-    showHeader = _ref$showHeader === void 0 ? true : _ref$showHeader;
+    showHeader = _ref$showHeader === void 0 ? true : _ref$showHeader,
+    labelsProp = _ref.labels;
   var labels = (0, _react.useMemo)(function () {
     return (0, _labels.mergeQbsTableLabels)(labelsProp);
   }, [labelsProp]);
-  var effectiveWordWrap = (0, _react.useMemo)(function () {
-    if (!rowViewToggle) return wordWrap;
-    return defaultRowView ? false : 'break-word';
-  }, [rowViewToggle, defaultRowView, wordWrap]);
-  var _useState = (0, _react.useState)(false),
-    loading = _useState[0],
-    setLoading = _useState[1];
-  var _useState2 = (0, _react.useState)(propColumn),
-    columns = _useState2[0],
-    setColumns = _useState2[1];
-  var _useState3 = (0, _react.useState)([]),
-    checkedKeys = _useState3[0],
-    setCheckedKeys = _useState3[1];
+  var _useState = (0, _react.useState)(0),
+    rowViewRefreshKey = _useState[0],
+    setRowViewRefreshKey = _useState[1];
+  var _useState2 = (0, _react.useState)(false),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  var _useState3 = (0, _react.useState)(propColumn),
+    columns = _useState3[0],
+    setColumns = _useState3[1];
+  var _useState4 = (0, _react.useState)([]),
+    checkedKeys = _useState4[0],
+    setCheckedKeys = _useState4[1];
   var dataTheme = (0, _react.useMemo)(function () {
-    var _localStorage$getItem;
-    return (_localStorage$getItem = localStorage.getItem('theme')) != null ? _localStorage$getItem : theme;
+    var _ref2;
+    return (_ref2 = theme != null ? theme : typeof localStorage !== 'undefined' ? localStorage.getItem('theme') : null) != null ? _ref2 : 'light';
   }, [theme]);
-  var _useState4 = (0, _react.useState)(false),
-    isOpen = _useState4[0],
-    setIsOpen = _useState4[1];
+  var rtl = rtlProp != null ? rtlProp : (0, _isRTL["default"])();
+  var _useState5 = (0, _react.useState)(false),
+    isOpen = _useState5[0],
+    setIsOpen = _useState5[1];
   var prevColumns = (0, _react.useRef)(null);
-  var _useState5 = (0, _react.useState)(tableView),
-    tableViewToggle = _useState5[0],
-    setTableViewToggle = _useState5[1];
+  var _useState6 = (0, _react.useState)(tableView),
+    tableViewToggle = _useState6[0],
+    setTableViewToggle = _useState6[1];
   var isMobile = (0, _useResponsiveStore["default"])();
   var tableBodyRef = (0, _react.useRef)(null);
-  var _useState6 = (0, _react.useState)(0),
-    rowViewRefreshKey = _useState6[0],
-    setRowViewRefreshKey = _useState6[1];
+  var wheelWrapperRef = (0, _react.useRef)(null);
+  var _useState7 = (0, _react.useState)(propsWordWrap != null ? propsWordWrap : false),
+    wordWrap = _useState7[0],
+    setWordWrap = _useState7[1];
+  var effectiveWordWrap = (0, _react.useMemo)(function () {
+    if (!rowViewToggle) return wordWrap;
+    return defaultRowView ? false : 'break-word';
+  }, [rowViewToggle, defaultRowView, wordWrap]);
   (0, _react.useEffect)(function () {
     if (rowViewToggle) {
       setRowViewRefreshKey(function (key) {
@@ -209,12 +220,6 @@ var QbsTable = function QbsTable(_ref) {
       handleChecked(updatedKeys);
     }
   }, [checkedKeys]);
-  var rowKeyField = dataRowKey != null ? dataRowKey : 'id';
-  var getRowClassName = (0, _react.useCallback)(function (rowData) {
-    if (!selection) return '';
-    var key = rowData === null || rowData === void 0 ? void 0 : rowData[rowKeyField];
-    return key !== undefined && checkedKeys !== null && checkedKeys !== void 0 && checkedKeys.includes(key) ? 'qbs-table-row-checked' : '';
-  }, [selection, checkedKeys, rowKeyField]);
   var handleToggle = (0, _react.useCallback)(function (columnName) {
     var lastVisibleColumn = null;
     var visibleCount = 0;
@@ -245,6 +250,7 @@ var QbsTable = function QbsTable(_ref) {
   }, [columns]);
   var handleColumnWidth = (0, _react.useCallback)(function (newWidth, dataKey) {
     if (newWidth === undefined || dataKey === undefined) return;
+    REFRESH_KEY = REFRESH_KEY + 1;
     setColumns(function (prevColumns) {
       return prevColumns.map(function (column) {
         return column.field === dataKey ? (0, _extends2["default"])({}, column, {
@@ -264,14 +270,21 @@ var QbsTable = function QbsTable(_ref) {
       });
     }
   }, [wordWrap]);
+  (0, _react.useEffect)(function () {
+    if (!defaultRowView) {
+      setWordWrap('break-word');
+    } else {
+      setWordWrap(false);
+    }
+    REFRESH_KEY = REFRESH_KEY + 1;
+  }, [defaultRowView]);
   var onReorder = (0, _react.useCallback)(function (columns) {
     setColumns(columns);
   }, []);
 
   // useEffect(() => {
   // }, [columns]);
-
-  var handleClear = function handleClear(_ref2) {
+  var handleClear = function handleClear(_ref3) {
     setCheckedKeys([]);
     handleChecked([]);
   };
@@ -310,10 +323,16 @@ var QbsTable = function QbsTable(_ref) {
     labels: labels,
     rtl: rtl
   };
+  (0, _react.useEffect)(function () {
+    if (!dataTheme || typeof document === 'undefined') return;
+    document.body.setAttribute('data-theme', dataTheme === 'dark' ? 'dark' : 'light');
+    document.documentElement.dataset.theme = dataTheme;
+  }, [dataTheme]);
   var themeToggle = (0, _react.useMemo)(function () {
-    return document.getElementById('themeToggle');
+    return typeof document !== 'undefined' ? document.getElementById('themeToggle') : null;
   }, []);
   (0, _react.useEffect)(function () {
+    if (theme || typeof document === 'undefined') return;
     var handleThemeToggle = function handleThemeToggle() {
       if (themeToggle !== null && themeToggle !== void 0 && themeToggle.checked) {
         document.body.setAttribute('data-theme', 'dark');
@@ -335,9 +354,8 @@ var QbsTable = function QbsTable(_ref) {
       themeToggle === null || themeToggle === void 0 ? void 0 : themeToggle.removeEventListener('change', handleThemeToggle);
       document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
     };
-  }, [themeToggle]);
+  }, [theme, themeToggle]);
   var handleExpanded = (0, _react.useCallback)(function (rowData) {
-    console.log(rowData);
     var keyValue = dataRowKey;
     var key = rowData[keyValue];
     var nextExpandedRowKeys = new Set(expandedRowKeys);
@@ -512,26 +530,26 @@ var QbsTable = function QbsTable(_ref) {
   //   [columns, dataTheme]
   // );
   var columnsRendered = (0, _react.useMemo)(function () {
-    return (columns != null ? columns : []).map(function (_ref3) {
-      var title = _ref3.title,
-        field = _ref3.field,
-        resizable = _ref3.resizable,
-        sortable = _ref3.sortable,
-        colWidth = _ref3.colWidth,
-        align = _ref3.align,
-        grouped = _ref3.grouped,
-        groupHeader = _ref3.groupHeader,
-        fixed = _ref3.fixed,
-        children = _ref3.children,
-        customCell = _ref3.customCell,
-        renderCell = _ref3.renderCell,
-        isVisible = _ref3.isVisible,
-        link = _ref3.link,
-        getPath = _ref3.getPath,
-        rowClick = _ref3.rowClick,
-        sortKey = _ref3.sortKey,
-        type = _ref3.type,
-        hideLink = _ref3.hideLink;
+    return (columns != null ? columns : []).map(function (_ref4) {
+      var title = _ref4.title,
+        field = _ref4.field,
+        resizable = _ref4.resizable,
+        sortable = _ref4.sortable,
+        colWidth = _ref4.colWidth,
+        align = _ref4.align,
+        grouped = _ref4.grouped,
+        groupHeader = _ref4.groupHeader,
+        fixed = _ref4.fixed,
+        children = _ref4.children,
+        customCell = _ref4.customCell,
+        renderCell = _ref4.renderCell,
+        isVisible = _ref4.isVisible,
+        link = _ref4.link,
+        getPath = _ref4.getPath,
+        rowClick = _ref4.rowClick,
+        sortKey = _ref4.sortKey,
+        type = _ref4.type,
+        hideLink = _ref4.hideLink;
       return isVisible ? grouped ? /*#__PURE__*/_react["default"].createElement(_ColumnGroup["default"], {
         header: groupHeader,
         fixed: fixed,
@@ -599,41 +617,57 @@ var QbsTable = function QbsTable(_ref) {
   },
   // ✅ Fix: Type assertion to ReactElement[]
   [columns, dataTheme]);
+  var handleInfiniteScroll = function handleInfiniteScroll(scroll) {
+    if (!infiniteScroll) return;
+    var wrapper = wheelWrapperRef.current;
+    if (!wrapper || !hasMoreData || infiniteLoading) return;
+    var scrollTop = wrapper.scrollTop,
+      clientHeight = wrapper.clientHeight;
+    var scrollHeight = Math.abs(scroll) + (height - headerHeight);
+    // Trigger fetch when user scrolls within 100px of bottom
+    if (scrollTop + clientHeight >= scrollHeight - 70) {
+      loadMoreData === null || loadMoreData === void 0 ? void 0 : loadMoreData(); // fetch next page here
+    }
+  };
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table " + classes.tableContainerClass,
-    "data-theme": dataTheme
+    "data-theme": dataTheme,
+    dir: rtl ? 'rtl' : 'ltr'
   }, toolbar && /*#__PURE__*/_react["default"].createElement(_Toolbar["default"], toolbarProps), /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-border-wrap"
   }, tableViewToggle ? /*#__PURE__*/_react["default"].createElement(_Table["default"], {
     height: autoHeight ? undefined : height,
     key: tableKey + "-" + rowViewRefreshKey,
     tableKey: tableKey,
-    rtl: rtl,
     data: data,
+    rtl: rtl,
     tableBodyRef: tableBodyRef,
     dataTheme: dataTheme,
     wordWrap: effectiveWordWrap,
+    wheelWrapperRef: wheelWrapperRef,
+    rowHeight: rowHeight,
     autoHeight: autoHeight,
+    handleInfiniteScroll: handleInfiniteScroll,
     sortColumn: sortColumn,
     style: {
       position: 'relative'
     },
     sortType: sortType,
     onSortColumn: handleSortColumn,
+    infiniteLoading: infiniteLoading,
     onRowClick: onRowClick,
     tableBodyHeight: tableBodyHeight,
     cellBordered: cellBordered,
     bordered: bordered,
     renderEmpty: function renderEmpty(info) {
       return _renderEmpty ? _renderEmpty(info) : /*#__PURE__*/_react["default"].createElement(_empty["default"], {
-        title: emptyTitle != null ? emptyTitle : 'No Data Found',
+        title: emptyTitle != null ? emptyTitle : labels.noDataFound,
         subtitle: emptySubTitle
       });
     },
     columns: columns,
     minHeight: minHeight,
     headerHeight: headerHeight,
-    rowHeight: rowHeight,
     rowExpandedHeight: rowExpandedHeight,
     loading: isLoading != null ? isLoading : loading,
     showHeader: showHeader,
@@ -641,7 +675,6 @@ var QbsTable = function QbsTable(_ref) {
     expandedRowKeys: expandedRowKeys,
     onExpandChange: onExpandChange,
     rowKey: dataRowKey != null ? dataRowKey : 'id',
-    rowClassName: selection ? getRowClassName : undefined,
     defaultExpandAllRows: defaultExpandAllRows,
     shouldUpdateScroll: shouldUpdateScroll,
     renderRowExpanded: function renderRowExpanded(rowData) {
@@ -756,11 +789,12 @@ var QbsTable = function QbsTable(_ref) {
     rtl: rtl
   })), /*#__PURE__*/_react["default"].createElement(_CustomTableCell.ActionCell, {
     tableBodyRef: tableBodyRef,
+    dropType: dropType,
+    wheelWrapperRef: wheelWrapperRef,
     actionProps: actionProps,
     className: classes.cellClass + " " + classes.actionCellClass,
     handleMenuActions: handleMenuActions,
-    dataTheme: dataTheme,
-    dropType: dropType
+    dataTheme: dataTheme
   }))) : /*#__PURE__*/_react["default"].createElement("div", {
     className: isCustomTableCardView && ((data === null || data === void 0 ? void 0 : data.length) === 0 || !data) && !isLoading ? 'qbs-card-empty-wrapper' : isCustomTableCardView ? 'qbs-card-wrapper' : ' p-2',
     style: {
@@ -771,7 +805,7 @@ var QbsTable = function QbsTable(_ref) {
   }, ((data === null || data === void 0 ? void 0 : data.length) === 0 || !data) && !isLoading && /*#__PURE__*/_react["default"].createElement("div", {
     className: "flex flex-col gap-2 p-2 mt-6 card-empty-container"
   }, /*#__PURE__*/_react["default"].createElement(_empty["default"], {
-    title: emptyTitle != null ? emptyTitle : 'No Data Found',
+    title: emptyTitle != null ? emptyTitle : labels.noDataFound,
     subtitle: emptySubTitle
   })), isLoading ? handleCustomCardLoader ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, handleCustomCardLoader()) : /*#__PURE__*/_react["default"].createElement("div", {
     className: "flex flex-col gap-2 p-2"
@@ -786,10 +820,13 @@ var QbsTable = function QbsTable(_ref) {
       childDetailHeading: childDetailHeading,
       columns: columns,
       tableBodyRef: tableBodyRef,
-      actionProps: actionProps
+      actionProps: actionProps,
+      labels: labels
     }));
   })), /*#__PURE__*/_react["default"].createElement("div", null, pagination && (data === null || data === void 0 ? void 0 : data.length) > 0 && /*#__PURE__*/_react["default"].createElement(_Pagination["default"], {
-    paginationProps: paginationProps
+    paginationProps: paginationProps,
+    labels: labels,
+    dataTheme: dataTheme
   }))));
 };
 var _default = QbsTable;

package/lib/qbsTable/TableCardList.js

@@ -140,6 +140,7 @@ var QbsTable = function QbsTable(_ref) {
     setIsOpen = _useState4[1];
   var prevColumns = (0, _react.useRef)(null);
   var tableBodyRef = (0, _react.useRef)(null);
+  var wheelWrapperRef = (0, _react.useRef)(null);
   var handleSortColumn = (0, _react.useCallback)(function (sortColumn, sortType) {
     setLoading(true);
     setTimeout(function () {
@@ -459,6 +460,7 @@ var QbsTable = function QbsTable(_ref) {
     rtl: rtl,
     data: data,
     tableBodyRef: tableBodyRef,
+    wheelWrapperRef: wheelWrapperRef,
     dataTheme: dataTheme,
     wordWrap: effectiveWordWrap,
     autoHeight: autoHeight,

package/lib/qbsTable/Toolbar.js

@@ -218,19 +218,22 @@ var ToolBar = function ToolBar(_ref) {
       return onSelect === null || onSelect === void 0 ? void 0 : onSelect([]);
     }
   }, labels.clear), selectedRowActions === null || selectedRowActions === void 0 ? void 0 : selectedRowActions.map(function (actions, index) {
+    var _actions$buttonClassN;
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
       key: index.toString()
     }, handleHide(actions) && /*#__PURE__*/_react["default"].createElement("button", {
       type: "button",
-      className: "btn",
+      className: "btn " + ((_actions$buttonClassN = actions === null || actions === void 0 ? void 0 : actions.buttonClassName) != null ? _actions$buttonClassN : ''),
       disabled: actions.disabled,
       onClick: function onClick() {
         return actions === null || actions === void 0 ? void 0 : actions.action(checkedKeys);
       }
-    }, actions.actionTitle));
+    }, (actions === null || actions === void 0 ? void 0 : actions.icon) && /*#__PURE__*/_react["default"].createElement("span", {
+      className: "mr-2"
+    }, actions.icon), /*#__PURE__*/_react["default"].createElement("span", null, actions.actionTitle)));
   }))) : /*#__PURE__*/_react["default"].createElement("div", null, pagination && paginationProps && dataLength > 0 && /*#__PURE__*/_react["default"].createElement("div", {
     className: "rows-count"
-  }, (0, _tablecalc.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)))));
+  }, (0, _tablecalc.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)))));
 };
 var _default = ToolBar;
 exports["default"] = _default;

package/lib/qbsTable/commontypes.d.ts

@@ -40,7 +40,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;
@@ -70,6 +70,7 @@ export interface QbsTableProps {
     searchValue?: string;
     handleSearchValue?: (value?: string) => void;
     theme?: string;
+    rtl?: boolean;
     onRowClick?: (data: any) => void;
     cellBordered?: boolean;
     bordered?: boolean;
@@ -83,9 +84,8 @@ export interface QbsTableProps {
     expandedRowKeys?: readonly number[];
     setExpandedRowKeys?: (value: readonly number[]) => void;
     handleMenuActions?: (actions: ActionProps, rowData: any) => void;
-    dropType?: 'vertical' | string;
+    dropType?: 'horizondal' | 'vertical' | string;
     labels?: QbsTableLabels;
-    rtl?: boolean;
     handleRowExpanded?: (rowData: any) => React.ReactNode;
     shouldUpdateScroll?: boolean;
     rowExpand?: boolean;
@@ -99,6 +99,8 @@ export interface QbsTableProps {
         disabled?: boolean;
         hidden?: boolean;
         customHide?: string;
+        buttonClassName?: string;
+        icon?: ReactElement | ReactNode;
     }[];
     selectedRows?: (number | string)[];
     classes?: {
@@ -131,13 +133,18 @@ 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;
-    isFullScreen?: boolean;
     rowHeight?: number;
+    isFullScreen?: boolean;
     showHeader?: boolean;
 }
 export interface QbsTableToolbarProps {
@@ -163,24 +170,26 @@ export interface QbsTableToolbarProps {
     dataLength: number;
     headerHeight?: number;
     searchPlaceholder?: string;
+    labels?: QbsTableLabels;
+    rtl?: boolean;
     tableView?: boolean;
     enableTableToggle?: boolean;
     tableViewToggle?: boolean;
     setTableViewToggle?: (value: boolean) => void;
-    rowViewToggle?: boolean;
-    defaultRowView?: boolean;
-    fullWidthView?: boolean;
-    setTableFullView?: (value: boolean) => void;
-    setRowViewToggle?: (value: boolean) => void;
-    isFullScreen?: boolean;
-    labels?: QbsTableLabels;
-    rtl?: boolean;
     selectedRowActions?: {
         actionTitle?: string;
         action: (checked: (number | string)[]) => void;
         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/lib/qbsTable/labels.d.ts

@@ -1,4 +1,4 @@
-export type QbsTableLabels = {
+export interface QbsTableLabels {
     search?: string;
     searchAriaLabel?: string;
     clear?: string;
@@ -19,7 +19,11 @@ export type QbsTableLabels = {
     viewMore?: string;
     viewLess?: string;
     actions?: string;
-};
+}
 export declare const defaultQbsTableLabels: QbsTableLabels;
+/** @deprecated Use defaultQbsTableLabels */
+export declare const DEFAULT_QBS_TABLE_LABELS: QbsTableLabels;
 export declare const mergeQbsTableLabels: (overrides?: QbsTableLabels) => QbsTableLabels;
+/** @deprecated Use mergeQbsTableLabels */
+export declare const mergeLabels: (overrides?: QbsTableLabels) => QbsTableLabels;
 export declare const formatSelectedItems: (count: number, labels?: QbsTableLabels) => string;

package/lib/qbsTable/labels.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.mergeQbsTableLabels = exports.formatSelectedItems = exports.defaultQbsTableLabels = void 0;
+exports.mergeQbsTableLabels = exports.mergeLabels = exports.formatSelectedItems = exports.defaultQbsTableLabels = exports.DEFAULT_QBS_TABLE_LABELS = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var defaultQbsTableLabels = {
   search: 'Search',
@@ -28,11 +28,22 @@ var defaultQbsTableLabels = {
   viewLess: 'View Less',
   actions: 'Actions'
 };
+
+/** @deprecated Use defaultQbsTableLabels */
 exports.defaultQbsTableLabels = defaultQbsTableLabels;
+var DEFAULT_QBS_TABLE_LABELS = defaultQbsTableLabels;
+exports.DEFAULT_QBS_TABLE_LABELS = DEFAULT_QBS_TABLE_LABELS;
 var mergeQbsTableLabels = function mergeQbsTableLabels(overrides) {
-  return (0, _extends2["default"])({}, defaultQbsTableLabels, overrides);
+  var _overrides$showingRan;
+  return (0, _extends2["default"])({}, defaultQbsTableLabels, overrides, {
+    showingRange: (_overrides$showingRan = overrides === null || overrides === void 0 ? void 0 : overrides.showingRange) != null ? _overrides$showingRan : defaultQbsTableLabels.showingRange
+  });
 };
+
+/** @deprecated Use mergeQbsTableLabels */
 exports.mergeQbsTableLabels = mergeQbsTableLabels;
+var mergeLabels = mergeQbsTableLabels;
+exports.mergeLabels = mergeLabels;
 var formatSelectedItems = function formatSelectedItems(count, labels) {
   var merged = mergeQbsTableLabels(labels);
   return merged.selectedItems + " (" + count + ")";

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

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

package/lib/qbsTable/utilities/CardComponent.js

@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _labels = require("../labels");
 var _CardMenuDropdown = _interopRequireDefault(require("./CardMenuDropdown"));
 var _handleFormatCell = require("./handleFormatCell");
 var _icons = require("./icons");
@@ -22,7 +23,9 @@ 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;
+    childDetailHeading = _ref$childDetailHeadi === void 0 ? '' : _ref$childDetailHeadi,
+    labelsProp = _ref.labels;
+  var labels = (0, _labels.mergeLabels)(labelsProp);
   var _useState = (0, _react.useState)(false),
     viewMore = _useState[0],
     setViewMore = _useState[1];
@@ -71,10 +74,11 @@ var CardComponent = function CardComponent(_ref) {
     rowData: data,
     iconName: "more",
     rowIndex: index,
-    handleMenuActions: handleMenuActions
+    handleMenuActions: handleMenuActions,
+    labels: labels
   })), columns.length > initialDisplayCount && /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
     tableBodyRef: useCardRef,
-    title: viewMore ? ' View Less' : 'View More',
+    title: viewMore ? labels.viewLess : labels.viewMore,
     enabled: false
   }, /*#__PURE__*/_react["default"].createElement("button", {
     onClick: toggleViewMore,

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

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

package/lib/qbsTable/utilities/CardMenuDropdown.js

@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _labels = require("../labels");
 var _icons = require("./icons");
 var _ToolTip = _interopRequireDefault(require("./ToolTip"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -11,7 +12,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var CardMenuDropdown = function CardMenuDropdown(_ref) {
   var actionDropDown = _ref.actionDropDown,
     handleMenuActions = _ref.handleMenuActions,
-    rowData = _ref.rowData;
+    rowData = _ref.rowData,
+    labelsProp = _ref.labels;
+  var labels = (0, _labels.mergeLabels)(labelsProp);
   var _useState = (0, _react.useState)(false),
     openMenu = _useState[0],
     setOpenMenu = _useState[1];
@@ -38,7 +41,6 @@ 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',
@@ -71,9 +73,8 @@ var CardMenuDropdown = function CardMenuDropdown(_ref) {
     onClick: toggleMenu,
     ref: menuButtonRef
   }, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
-    title: "Actions",
-    enabled: false,
-    ref: menuButtonRef
+    title: labels.actions,
+    enabled: false
   }, /*#__PURE__*/_react["default"].createElement(_icons.ThreeDotIcon, null))), openMenu && /*#__PURE__*/_react["default"].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/lib/qbsTable/utilities/SearchInput.d.ts

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