qbs-react-grid 2.2.3 → 2.2.5

package/src/qbsTable/TableCardList.tsx

@@ -7,7 +7,6 @@ import HeaderCell from '../HeaderCell';
 import Pagination from '../Pagination';
 import Table from '../Table';
 import { QbsColumnProps, QbsTableProps } from './commontypes';
-import { mergeLabels } from './labels';
 import {
   ActionCell,
   CheckCell,
@@ -82,22 +81,15 @@ const QbsTable: React.FC<QbsTableProps> = ({
   renderEmpty,
   autoHeight,
   emptySubTitle,
-  emptyTitle,
-  dropType = 'horizontal',
-  labels: labelsProp
+  emptyTitle
 }) => {
-  const labels = useMemo(() => mergeLabels(labelsProp), [labelsProp]);
   const [loading, setLoading] = useState(false);
   const [columns, setColumns] = useState(propColumn);
   const [checkedKeys, setCheckedKeys] = useState<(number | string)[]>([]);
-  const dataTheme = useMemo(
-    () => theme ?? (typeof localStorage !== 'undefined' ? localStorage.getItem('theme') : null) ?? 'light',
-    [theme]
-  );
+  const dataTheme = useMemo(() => localStorage.getItem('theme') ?? theme, [theme]);
   const [isOpen, setIsOpen] = useState(false);
   const prevColumns = useRef<any | null>(null);
   const tableBodyRef = useRef<HTMLDivElement>(null);
-  const wheelWrapperRef = useRef<HTMLDivElement>(null);
   const handleSortColumn = useCallback(
     (sortColumn: any, sortType: any) => {
       setLoading(true);
@@ -149,6 +141,16 @@ const QbsTable: React.FC<QbsTableProps> = ({
     [checkedKeys]
   );
 
+  const rowKeyField = dataRowKey ?? 'id';
+  const getRowClassName = useCallback(
+    (rowData: Record<string, unknown>) => {
+      if (!selection) return '';
+      const key = rowData?.[rowKeyField] as string | number | undefined;
+      return key !== undefined && checkedKeys?.includes(key) ? 'qbs-table-row-checked' : '';
+    },
+    [selection, checkedKeys, rowKeyField]
+  );
+
   const handleToggle = useCallback(
     (columnName: string) => {
       let lastVisibleColumn: any = null;
@@ -234,25 +236,11 @@ const QbsTable: React.FC<QbsTableProps> = ({
     onSelect: handleClear,
     handleColumnToggle: handleColumnToggle,
     dataLength: data?.length,
-    searchPlaceholder: searchPlaceholder,
-    labels
+    searchPlaceholder: searchPlaceholder
   };
+  const themeToggle = useMemo(() => document.getElementById('themeToggle') as HTMLInputElement, []);
 
   useEffect(() => {
-    if (!dataTheme || typeof document === 'undefined') return;
-
-    document.body.setAttribute('data-theme', dataTheme === 'dark' ? 'dark' : 'light');
-    document.documentElement.dataset.theme = dataTheme;
-  }, [dataTheme]);
-
-  const themeToggle = useMemo(
-    () => (typeof document !== 'undefined' ? document.getElementById('themeToggle') : null),
-    []
-  ) as HTMLInputElement | null;
-
-  useEffect(() => {
-    if (theme || typeof document === 'undefined') return;
-
     const handleThemeToggle = () => {
       if (themeToggle?.checked) {
         document.body.setAttribute('data-theme', 'dark');
@@ -277,10 +265,11 @@ const QbsTable: React.FC<QbsTableProps> = ({
       themeToggle?.removeEventListener('change', handleThemeToggle);
       document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
     };
-  }, [theme, themeToggle]);
+  }, [themeToggle]);
 
   const handleExpanded = useCallback(
     (rowData: any) => {
+      console.log(rowData);
       const keyValue = dataRowKey as string;
       const key = rowData[keyValue];
 
@@ -471,7 +460,6 @@ const QbsTable: React.FC<QbsTableProps> = ({
           wordWrap={wordWrap}
           autoHeight={autoHeight}
           sortColumn={sortColumn}
-          wheelWrapperRef={wheelWrapperRef}
           style={{ position: 'relative' }}
           sortType={sortType}
           onSortColumn={handleSortColumn}
@@ -483,7 +471,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
             renderEmpty ? (
               renderEmpty(info)
             ) : (
-              <NoData title={emptyTitle ?? labels.noDataFound} subtitle={emptySubTitle} />
+              <NoData title={emptyTitle ?? 'No Data Found'} subtitle={emptySubTitle} />
             )
           }
           columns={columns}
@@ -496,6 +484,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
           expandedRowKeys={expandedRowKeys}
           onExpandChange={onExpandChange}
           rowKey={dataRowKey ?? 'id'}
+          rowClassName={selection ? getRowClassName : undefined}
           defaultExpandAllRows={defaultExpandAllRows}
           shouldUpdateScroll={shouldUpdateScroll}
           renderRowExpanded={rowData => {
@@ -601,7 +590,6 @@ const QbsTable: React.FC<QbsTableProps> = ({
                     setIsOpen={setIsOpen}
                     handleResetColumns={handleResetColumns}
                     handleColumnToggle={handleColumnToggle}
-                    labels={labels}
                   />
                 </HeaderCell>
                 <Cell />
@@ -627,14 +615,12 @@ const QbsTable: React.FC<QbsTableProps> = ({
                     setIsOpen={setIsOpen}
                     handleResetColumns={handleResetColumns}
                     handleColumnToggle={handleColumnToggle}
-                    labels={labels}
                   />
                 )}
               </HeaderCell>
               <ActionCell
                 tableBodyRef={tableBodyRef}
                 actionProps={actionProps}
-                dropType={dropType}
                 className={`${classes.cellClass} ${classes.actionCellClass}`}
                 handleMenuActions={handleMenuActions}
                 dataTheme={dataTheme}
@@ -644,9 +630,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
         </Table>
 
         <div>
-          {pagination && data?.length > 0 && (
-            <Pagination paginationProps={paginationProps} labels={labels} dataTheme={dataTheme} />
-          )}
+          {pagination && data?.length > 0 && <Pagination paginationProps={paginationProps} />}
         </div>
       </div>
     </div>

package/src/qbsTable/Toolbar.tsx

@@ -3,9 +3,8 @@ import React, { useCallback, useRef, useState } from 'react';
 import useResponsiveStore from '../utils/useResponsiveStore';
 import { QbsTableToolbarProps } from './commontypes';
 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';
 
@@ -28,16 +27,8 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
   searchPlaceholder,
   tableViewToggle,
   setTableViewToggle,
-  enableTableToggle = false,
-  rowViewToggle = false,
-  defaultRowView = true,
-  fullWidthView = false,
-  setTableFullView,
-  setRowViewToggle,
-  isFullScreen = false,
-  labels: labelsProp
+  enableTableToggle = false
 }) => {
-  const labels = mergeLabels(labelsProp);
   const debouncedOnSearch = useCallback(debounce(onSearch ?? (() => {}), 1000), [onSearch]);
   const [searchParam, setSearchParam] = useState<string | undefined>(searchValue);
   const toolbarRef = useRef<HTMLDivElement>(null);
@@ -82,8 +73,7 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
           <div className="qbs-table-primary-filter">
             {search && (
               <SearchInput
-                placeholder={searchPlaceholder ?? labels.search}
-                searchAriaLabel={labels.searchAriaLabel}
+                placeholder={searchPlaceholder ?? 'Search'}
                 handleChange={handleChange}
                 handleSearch={handleSearch}
                 searchValue={searchParam}
@@ -113,38 +103,10 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
             </span>
           )}
           {tableHeaderActions}
-          <div className=" pr-1 cursor-pointer relative table_custom_ctions   ">
-            {(rowViewToggle || isFullScreen) && (
-              <div className="flex gap-2 qbs-row-switch-cntainer">
-                {rowViewToggle && (
-                  <div className="flex gap-2 table_cell_style">
-                    <TooltipComponent tableBodyRef={toolbarRef} title={labels.switchToDefaultView}>
-                      <div onClick={() => setRowViewToggle?.(true)}>
-                        <DefaultView className={`${defaultRowView ? 'active' : ''}`} />
-                      </div>
-                    </TooltipComponent>
-                    <TooltipComponent tableBodyRef={toolbarRef} title={labels.switchToRelaxedView}>
-                      <div onClick={() => setRowViewToggle?.(false)}>
-                        <ContentView className={`${!defaultRowView ? 'active' : ''}`} />
-                      </div>
-                    </TooltipComponent>
-                  </div>
-                )}
-                {isFullScreen && (
-                  <div className=" table_full_width">
-                    <TooltipComponent tableBodyRef={toolbarRef} title={labels.switchToFullScreen}>
-                      <div onClick={() => setTableFullView?.(!fullWidthView)}>
-                        <ExpandIcon className={`${fullWidthView ? 'active' : ''}`} />
-                      </div>
-                    </TooltipComponent>
-                  </div>
-                )}
-              </div>
-            )}
-
+          <div className=" pr-1 cursor-pointer relative  ">
             {enableTableToggle && !isMobile && (
               <div className="qbs-table-top-icons flex gap-2">
-                <TooltipComponent tableBodyRef={toolbarRef} title={labels.switchToTableView}>
+                <TooltipComponent tableBodyRef={toolbarRef} title={'Switch to Table View'}>
                   <div onClick={() => setTableViewToggle?.(true)}>
                     <TableView className={`${tableViewToggle ? 'active' : ''}`} />
                   </div>
@@ -153,7 +115,7 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
                 <div className="border-r h-4 w-1"></div>
 
                 <div onClick={() => setTableViewToggle?.(false)}>
-                  <TooltipComponent tableBodyRef={toolbarRef} title={labels.switchToCardView}>
+                  <TooltipComponent tableBodyRef={toolbarRef} title={'Switch to Card View'}>
                     <CardView className={`${!tableViewToggle ? 'active' : ''}`} />
                   </TooltipComponent>
                 </div>
@@ -179,24 +141,21 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
         >
           {checkedKeys && checkedKeys?.length > 0 ? (
             <div className="qbs-table-toolbar-sub-container-start">
-              <div className="selected-row">
-                {formatSelectedItems(labels.selectedItems, checkedKeys?.length ?? 0)}
-              </div>
+              <div className="selected-row">{`Selected Items(${checkedKeys?.length}) `}</div>
               <div className="selected-row-action">
                 <button className="btn" onClick={() => onSelect?.([])}>
-                  {labels.clear}
+                  Clear
                 </button>
                 {selectedRowActions?.map((actions, index: number) => (
                   <>
                     {handleHide(actions) && (
                       <button
                         key={index.toString()}
-                        className={`btn ${actions?.buttonClassName}`}
+                        className="btn"
                         disabled={actions.disabled}
                         onClick={() => actions?.action(checkedKeys)}
                       >
-                        {actions?.icon && <span className="mr-2">{actions?.icon}</span>}
-                        <span>{actions.actionTitle}</span>
+                        {actions.actionTitle}
                       </button>
                     )}
                   </>
@@ -210,8 +169,7 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
                   {getRowDisplayRange(
                     paginationProps.total ?? 0,
                     paginationProps.rowsPerPage ?? 0,
-                    paginationProps.currentPage ?? 0,
-                    labels.showingRange
+                    paginationProps.currentPage ?? 0
                   )}
                 </div>
               )}

package/src/qbsTable/commontypes.ts

@@ -1,9 +1,5 @@
 import React, { ReactElement, ReactNode } from 'react';
 
-import type { QbsTableLabels } from './labels';
-
-export type { QbsTableLabels };
-
 interface Content {
   cell: ReactNode | string;
   toolTip?: string;
@@ -47,7 +43,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;
@@ -78,7 +74,6 @@ export interface QbsTableProps {
   searchValue?: string;
   handleSearchValue?: (value?: string) => void;
   theme?: string;
-  rtl?: boolean;
   onRowClick?: (data: any) => void;
   cellBordered?: boolean;
   bordered?: boolean;
@@ -99,15 +94,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?: { [key: string]: any };
@@ -138,20 +130,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 {
@@ -177,7 +155,6 @@ export interface QbsTableToolbarProps {
   dataLength: number;
   headerHeight?: number;
   searchPlaceholder?: string;
-  labels?: QbsTableLabels;
   tableView?: boolean;
   enableTableToggle?: boolean;
   tableViewToggle?: boolean;
@@ -188,13 +165,5 @@ 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;
 }

package/src/qbsTable/utilities/CardComponent.tsx

@@ -1,7 +1,6 @@
 import React, { useRef, useState } from 'react';
 
 import { QbsColumnProps } from '../commontypes';
-import { mergeLabels, type QbsTableLabels } from '../labels';
 import CardMenuDropdown from './CardMenuDropdown';
 import { handleCellFormat } from './handleFormatCell';
 import { ArrowUpIcon } from './icons';
@@ -18,7 +17,6 @@ type Props = {
   handleMenuActions?: () => void;
   cardColumLimit?: number;
   childDetailHeading?: string;
-  labels?: QbsTableLabels;
 };
 
 const CardComponent: React.FC<Props> = ({
@@ -29,10 +27,8 @@ const CardComponent: React.FC<Props> = ({
   index,
   cardColumLimit = 5,
   handleMenuActions,
-  childDetailHeading = '',
-  labels: labelsProp
+  childDetailHeading = ''
 }) => {
-  const labels = mergeLabels(labelsProp);
   const [viewMore, setViewMore] = useState(false);
   const initialDisplayCount = cardColumLimit;
 
@@ -106,14 +102,13 @@ const CardComponent: React.FC<Props> = ({
                 iconName="more"
                 rowIndex={index}
                 handleMenuActions={handleMenuActions}
-                labels={labels}
               />
             </div>
 
             {columns.length > initialDisplayCount && (
               <TooltipComponent
                 tableBodyRef={useCardRef}
-                title={viewMore ? labels.viewLess : labels.viewMore}
+                title={viewMore ? ' View Less' : 'View More'}
                 enabled={false}
               >
                 <button

package/src/qbsTable/utilities/CardMenuDropdown.tsx

@@ -1,6 +1,7 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import React from 'react';
+
 import { ActionProps } from '../commontypes';
-import { mergeLabels, type QbsTableLabels } from '../labels';
 import { ThreeDotIcon } from './icons';
 import TooltipComponent from './ToolTip';
 
@@ -12,16 +13,9 @@ type Props = {
   dataTheme?: string;
   tableBodyRef: React.RefObject<HTMLDivElement>;
   rowIndex?: number;
-  labels?: QbsTableLabels;
 };
 
-const CardMenuDropdown: React.FC<Props> = ({
-  actionDropDown,
-  handleMenuActions,
-  rowData,
-  labels: labelsProp
-}) => {
-  const labels = mergeLabels(labelsProp);
+const CardMenuDropdown: React.FC<Props> = ({ actionDropDown, handleMenuActions, rowData }) => {
   const [openMenu, setOpenMenu] = useState(false);
   const [menuPositionStyles, setMenuPositionStyles] = useState<{
     top?: string;
@@ -52,6 +46,7 @@ const CardMenuDropdown: React.FC<Props> = ({
         const dropdownHeight = 200; // Adjust this if your dropdown height varies
         const spaceBelow = window.innerHeight - buttonRect.bottom;
         const spaceAbove = buttonRect.top;
+        console.log(spaceAbove, spaceBelow, dropdownHeight);
         if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
           setMenuPositionStyles({
             bottom: '30px',
@@ -81,7 +76,7 @@ const CardMenuDropdown: React.FC<Props> = ({
   return (
     <div className="dropdown text-black dark:text-white dark:bg-[#424242] bg-white" ref={menuRef}>
       <button className="dropdown-toggle" onClick={toggleMenu} ref={menuButtonRef}>
-        <TooltipComponent title={labels.actions} enabled={false}>
+        <TooltipComponent title="Actions" enabled={false} ref={menuButtonRef}>
           <ThreeDotIcon />
         </TooltipComponent>
       </button>

package/src/qbsTable/utilities/ColumShowHide.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import { QbsColumnProps } from '../commontypes';
-import { mergeLabels, type QbsTableLabels } from '../labels';
 import { SettingsIcon } from './icons';
 
 interface ColumnToggleProps {
@@ -13,9 +12,6 @@ interface ColumnToggleProps {
   handleColumnToggle?: (columns: QbsColumnProps[]) => void;
   handleResetColumns?: () => void;
   tableHeight?: number;
-  viewMode?: string;
-  setViewMode?: (value: string) => void;
-  labels?: QbsTableLabels;
 }
 
 const ColumnToggle: React.FC<ColumnToggleProps> = ({
@@ -26,10 +22,8 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
   setIsOpen,
   handleResetColumns,
   handleColumnToggle,
-  tableHeight = 450,
-  labels: labelsProp
+  tableHeight = 450
 }) => {
-  const labels = mergeLabels(labelsProp);
   const [draggedItem, setDraggedItem] = useState<number | null>(null);
   const popupRef = useRef<HTMLDivElement | null>(null);
   const [dragOverPosition, setDragOverPosition] = useState<number | null>();
@@ -189,7 +183,7 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
           >
             <div className="qbs-table-popup-container">
               <div className="qbs-table-popup-item">
-                <div className="qbs-table-popup-label">{labels.fixedColumns}</div>
+                <div className="qbs-table-popup-label">FIXED COLUMNS</div>
                 <div className="qbs-table-columns-container">
                   <div className="qbs-table-column">
                     {columns.map((column, index) =>
@@ -200,7 +194,7 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
               </div>
               <div className="qbs-table-divider"></div>
               <div className="qbs-table-popup-item">
-                <div className="qbs-table-popup-label">{labels.visibleColumns}</div>
+                <div className="qbs-table-popup-label">VISIBLE COLUMNS</div>
                 <div className="qbs-table-columns-container">
                   <div className="qbs-table-column">
                     {columns.map((column, index) =>
@@ -213,7 +207,7 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
                 <>
                   <div className="qbs-table-divider"></div>
                   <div className="qbs-table-popup-item">
-                    <div className="qbs-table-popup-label">{labels.availableColumns}</div>
+                    <div className="qbs-table-popup-label">AVAILABLE COLUMNS</div>
                     <div className="qbs-table-columns-container">
                       <div className="qbs-table-column">
                         {columns.map((column, index) =>
@@ -237,35 +231,14 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
                     href="#"
                     onClick={() => handleResetColumns?.()}
                   >
-                    {labels.resetToDefault}
+                    Reset to default
                   </a>
                   <a className="qbs-table-reset-link" href="#" onClick={() => handleColToggle()}>
-                    {labels.save}
+                    Save
                   </a>
                 </div>
               </>
             )}
-            {/* <div className="qbs-table-popup-item">
-              <label className="flex items-center gap-2">
-                <input
-                  type="radio"
-                  value="compact"
-                  checked={viewMode === 'compact'}
-                  onChange={() => setViewMode?.('compact')}
-                />
-                Compact View
-              </label>
-
-              <label className="flex items-center gap-2">
-                <input
-                  type="radio"
-                  value="expanded"
-                  checked={viewMode === 'expanded'}
-                  onChange={() => setViewMode?.('expanded')}
-                />
-                Default View
-              </label>
-            </div> */}
           </div>
         </div>
       )}

package/src/qbsTable/utilities/SearchInput.tsx

@@ -2,14 +2,12 @@ import React, { memo, useCallback } from 'react';
 
 export interface SearchProps {
   placeholder: string;
-  searchAriaLabel?: string;
   handleChange: (value: string) => void;
   searchValue: string | undefined;
   handleSearch: (value?: string) => void;
 }
 const SearchInput: React.FC<SearchProps> = ({
   placeholder,
-  searchAriaLabel = 'Search',
   handleChange,
   searchValue,
   handleSearch
@@ -39,7 +37,7 @@ const SearchInput: React.FC<SearchProps> = ({
           placeholder={placeholder}
           value={searchValue ?? ''}
           onChange={handleInputChange}
-          aria-label={searchAriaLabel}
+          aria-label="Search"
         />
         <button
           className="search-button absolute left-1 bottom-1.5 bg-white text-grey-dark"