qbs-react-grid 2.2.4 → 2.2.6

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"

package/src/qbsTable/utilities/ToolTip.tsx

@@ -1,149 +1,38 @@
-import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import ReactDOM from 'react-dom';
-
-type TooltipComponentProps = {
-  title?: React.ReactNode;
-  children: React.ReactNode;
-  tableBodyRef?: React.RefObject<HTMLDivElement | null>;
-  /** When false, renders children only (no tooltip). */
-  enabled?: boolean;
-};
-
-const VIEWPORT_PADDING = 8;
-const TOOLTIP_GAP = 8;
-
-const TooltipComponent: React.FC<TooltipComponentProps> = ({
-  title,
-  children,
-  tableBodyRef,
-  enabled = true,
-}) => {
-  const [visible, setVisible] = useState(false);
-  const [positioned, setPositioned] = useState(false);
-  const [placement, setPlacement] = useState<'up' | 'down'>('down');
-  const [coords, setCoords] = useState({ top: 0, left: 0 });
-  const [arrowOffset, setArrowOffset] = useState(0);
-  const triggerRef = useRef<HTMLSpanElement>(null);
-  const tooltipRef = useRef<HTMLSpanElement>(null);
-
-  const updatePosition = useCallback(() => {
-    const trigger = triggerRef.current;
-    const tooltip = tooltipRef.current;
-    if (!trigger || !tooltip) {
-      return;
+import React, { useRef, useState } from 'react';
+
+const TooltipComponent: React.FC<any> = ({ title, children, tableBodyRef }) => {
+  const [dropdownPosition, setDropdownPosition] = useState('bottom-position');
+  const dropRef = useRef(null);
+  const menuButtonRef = useRef<HTMLElement>(null);
+  const adjustDropdownPosition = () => {
+    if (menuButtonRef.current && tableBodyRef?.current) {
+      const inputBoxRect = menuButtonRef.current?.getBoundingClientRect();
+      const tableRect = tableBodyRef.current.getBoundingClientRect();
+      // Calculate positions relative to the table
+      const spaceAbove = inputBoxRect.top - tableRect.top;
+      const spaceBelow = tableRect.bottom - inputBoxRect.bottom;
+
+      if (spaceAbove > spaceBelow) {
+        setDropdownPosition('top-position');
+      } else {
+        setDropdownPosition('bottom-position');
+      }
     }
-
-    const triggerRect = trigger.getBoundingClientRect();
-    const tooltipRect = tooltip.getBoundingClientRect();
-    const boundaryRect =
-      tableBodyRef?.current?.getBoundingClientRect() ??
-      trigger.closest('.qbs-table')?.getBoundingClientRect();
-
-    const spaceAbove = boundaryRect
-      ? triggerRect.top - boundaryRect.top
-      : triggerRect.top;
-    const spaceBelow = boundaryRect
-      ? boundaryRect.bottom - triggerRect.bottom
-      : window.innerHeight - triggerRect.bottom;
-
-    const nextPlacement =
-      spaceBelow >= tooltipRect.height + TOOLTIP_GAP || spaceBelow >= spaceAbove ? 'down' : 'up';
-
-    const triggerCenter = triggerRect.left + triggerRect.width / 2;
-    let 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;
-    }
-
-    const top =
-      nextPlacement === 'down'
-        ? triggerRect.bottom + TOOLTIP_GAP
-        : triggerRect.top - tooltipRect.height - TOOLTIP_GAP;
-
-    setPlacement(nextPlacement);
-    setCoords({ top, left });
-    setArrowOffset(triggerCenter - left);
-    setPositioned(true);
-  }, [tableBodyRef]);
-
-  const showTooltip = () => {
-    setPositioned(false);
-    setVisible(true);
-  };
-
-  const hideTooltip = () => {
-    setVisible(false);
-    setPositioned(false);
   };
 
-  useLayoutEffect(() => {
-    if (!visible) {
-      return;
-    }
-
-    updatePosition();
-    const frame = window.requestAnimationFrame(updatePosition);
-    return () => window.cancelAnimationFrame(frame);
-  }, [visible, title, updatePosition]);
-
-  useEffect(() => {
-    if (!visible) {
-      return;
-    }
-
-    const handleReposition = () => updatePosition();
-    window.addEventListener('resize', handleReposition);
-    window.addEventListener('scroll', handleReposition, true);
-    return () => {
-      window.removeEventListener('resize', handleReposition);
-      window.removeEventListener('scroll', handleReposition, true);
-    };
-  }, [visible, updatePosition]);
-
-  if (!title || enabled === false) {
-    return <>{children}</>;
-  }
-
-  const portalRoot = typeof document !== 'undefined' ? document.body : null;
-
   return (
-    <>
+    <div className={`qbs-table-tooltip ${dropdownPosition == 'bottom-position' ? 'down' : 'up'} `}>
       <span
-        ref={triggerRef}
-        className="qbs-table-tooltip-trigger"
-        style={{ display: 'inline-flex' }}
-        onMouseEnter={showTooltip}
-        onMouseLeave={hideTooltip}
-        onFocus={showTooltip}
-        onBlur={hideTooltip}
+        ref={menuButtonRef}
+        style={{ display: 'flex' }}
+        onMouseEnter={() => adjustDropdownPosition()}
       >
         {children}
       </span>
-      {visible &&
-        portalRoot &&
-        ReactDOM.createPortal(
-          <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`,
-              } as React.CSSProperties
-            }
-          >
-            {title}
-          </span>,
-          portalRoot,
-        )}
-    </>
+      <span ref={dropRef} className={'tooltiptext'}>
+        {title}
+      </span>
+    </div>
   );
 };
 

package/src/qbsTable/utilities/VerticalDropDownMenu.tsx

@@ -1,75 +1,119 @@
 import React, { useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 
-import { ActionProps } from '../commontypes';
 import { ThreeDotIcon } from './icons';
 import TooltipComponent from './ToolTip';
+import type { ActionProps } from '../commontypes';
 
-type Props = {
-  actionDropDown: ActionProps[];
-  handleMenuActions?: (slug: ActionProps, rowData?: any) => void;
-  rowData?: any;
-  dataTheme?: string;
-  tableBodyRef: React.RefObject<HTMLDivElement | null>;
+type VerticalMenuDropdownProps = {
+  actionDropDown?: readonly ActionProps[];
+  handleMenuActions?: (actions: ActionProps, rowData: any) => void;
+  rowData: any;
+  tableBodyRef?: React.RefObject<HTMLDivElement>;
   rowIndex?: number;
-  wheelWrapperRef?: React.RefObject<HTMLDivElement>;
 };
 
-const VerticalMenuDropdown: React.FC<Props> = ({
+const VerticalMenuDropdown: React.FC<VerticalMenuDropdownProps> = ({
   actionDropDown,
   handleMenuActions,
   rowData,
   tableBodyRef,
-  rowIndex
+  rowIndex,
 }) => {
   const [openMenu, setOpenMenu] = useState(false);
   const [position, setPosition] = useState({ top: 0, left: 0 });
-  const menuButtonRef = useRef<HTMLButtonElement | null>(null);
-  const menuRef = useRef<HTMLDivElement | null>(null);
+  const menuButtonRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const updateMenuPosition = () => {
+    if (!menuButtonRef.current) return;
+
+    const rect = menuButtonRef.current.getBoundingClientRect();
+    const viewportPadding = 8;
+    const menuGap = 4;
+    const visibleItems =
+      actionDropDown?.filter(
+        item =>
+          !item.hidden && !(item.hide?.call(item, rowData, rowIndex) ?? false),
+      ) ?? [];
+    const menuWidth =
+      menuRef.current && menuRef.current.offsetWidth > 0
+        ? menuRef.current.offsetWidth
+        : Math.max(120, visibleItems.length * 48);
+    const menuHeight = visibleItems.length * 40;
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const openBelow = spaceBelow >= menuHeight + menuGap;
+
+    let left = rect.left;
+    if (left + menuWidth > window.innerWidth - viewportPadding) {
+      left = Math.max(viewportPadding, rect.right - menuWidth);
+    }
+
+    setPosition({
+      top: openBelow ? rect.bottom + menuGap : rect.top - menuHeight - menuGap,
+      left,
+    });
+  };
+
+  useEffect(() => {
+    if (!openMenu) return;
+    updateMenuPosition();
+    const frame = requestAnimationFrame(() => updateMenuPosition());
+    const resizeObserver =
+      menuRef.current && typeof ResizeObserver !== 'undefined'
+        ? new ResizeObserver(() => updateMenuPosition())
+        : null;
+    if (resizeObserver && menuRef.current) {
+      resizeObserver.observe(menuRef.current);
+    }
+    return () => {
+      cancelAnimationFrame(frame);
+      resizeObserver?.disconnect();
+    };
+  }, [openMenu]);
 
   useEffect(() => {
+    if (!openMenu) return;
+
     const handleClickOutside = (event: MouseEvent) => {
-      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
-        setOpenMenu(false);
+      const target = event.target as Node;
+      if (
+        menuRef.current?.contains(target) ||
+        menuButtonRef.current?.contains(target)
+      ) {
+        return;
       }
-    };
-    const handleScroll = () => {
       setOpenMenu(false);
     };
+    const handleScroll = () => setOpenMenu(false);
 
     document.addEventListener('click', handleClickOutside);
     window.addEventListener('scroll', handleScroll, true);
-    // Use capture phase to catch all scrolls
 
     return () => {
       document.removeEventListener('click', handleClickOutside);
       window.removeEventListener('scroll', handleScroll, true);
     };
-  }, []);
-  useEffect(() => {
-    const handleStyleChange = () => {
-      setOpenMenu(false); // Close the dropdown
-    };
+  }, [openMenu]);
 
+  useEffect(() => {
     const scrollbarHandle = document.querySelector('.rs-table-scrollbar-handle');
     if (!scrollbarHandle) return;
 
     const observer = new MutationObserver(mutations => {
       for (const mutation of mutations) {
         if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
-          handleStyleChange();
+          setOpenMenu(false);
         }
       }
     });
 
     observer.observe(scrollbarHandle, {
       attributes: true,
-      attributeFilter: ['style']
+      attributeFilter: ['style'],
     });
 
-    return () => {
-      observer.disconnect();
-    };
+    return () => observer.disconnect();
   }, [openMenu]);
 
   const handleMenuItemClick = (slug: ActionProps) => {
@@ -78,63 +122,29 @@ const VerticalMenuDropdown: React.FC<Props> = ({
     setOpenMenu(false);
   };
 
-  const handleShowHideMenu = () => {
-    return (
-      actionDropDown?.filter(item => !item.hidden && !item?.hide?.(rowData, rowIndex))?.length ?? 0
-    );
-  };
-
-  const toggleMenu = () => {
-    if (!openMenu && menuButtonRef.current) {
-      const rect = menuButtonRef.current.getBoundingClientRect();
-      const viewportPadding = 8;
-      const menuGap = 4;
-      const dropdownWidth = 200;
-      const visibleItems =
-        actionDropDown?.filter(item => !item.hidden && !item?.hide?.(rowData, rowIndex)) ?? [];
-      const menuHeight = visibleItems.length * 40;
-
-      const spaceBelow = window.innerHeight - rect.bottom;
-      const openBelow = spaceBelow >= menuHeight + menuGap;
+  const visibleCount =
+    actionDropDown?.filter(
+      item => !item.hidden && !(item.hide?.call(item, rowData, rowIndex) ?? false),
+    ).length ?? 0;
 
-      // Anchor to trigger; prefer opening toward inline-start (left in LTR).
-      let left = rect.right - dropdownWidth;
-
-      if (left < viewportPadding) {
-        left = rect.left;
-      }
-      if (left + dropdownWidth > window.innerWidth - viewportPadding) {
-        left = Math.max(viewportPadding, rect.left - dropdownWidth);
-      }
-      if (left + dropdownWidth > window.innerWidth - viewportPadding) {
-        left = window.innerWidth - viewportPadding - dropdownWidth;
-      }
-
-      setPosition({
-        top: openBelow ? rect.bottom + menuGap : rect.top - menuHeight - menuGap,
-        left,
-      });
-    }
-    setTimeout(() => {
-      setOpenMenu(prev => !prev);
-    }, 200);
-  };
+  const portalTarget =
+    document.getElementById('portal-root') ?? document.body;
 
-  const portalTarget = document.getElementById('portal-root');
   const dropdownContent = (
     <div
       className="absolute z-[60] min-w-48 rounded-md vertical-menu-dropdown-content"
       ref={menuRef}
       style={{
-        width: 200,
         top: position.top,
         left: position.left,
         position: 'fixed',
+        minWidth: 120,
+        width: 'max-content',
       }}
     >
       <div className="py-1">
         {actionDropDown?.map(item =>
-          !item?.hidden && !item?.hide?.(rowData, rowIndex) ? (
+          !item.hidden && !(item.hide?.call(item, rowData, rowIndex) ?? false) ? (
             <div
               key={item.title}
               className="vertical-menu-item px-4 py-2 text-sm text-base-black hover:bg-gray-light-1 cursor-pointer flex items-center gap-2 transition-colors"
@@ -146,12 +156,12 @@ const VerticalMenuDropdown: React.FC<Props> = ({
             >
               <TooltipComponent title={item.toolTip} tableBodyRef={tableBodyRef}>
                 <div className="vertical-menu-icon-title flex items-center gap-2">
-                  {item?.icon && <span className="vertical-menu-icon">{item.icon}</span>}
+                  {item.icon && <span className="vertical-menu-icon">{item.icon}</span>}
                   <span className="vertical-menu-title">{item.title}</span>
                 </div>
               </TooltipComponent>
             </div>
-          ) : null
+          ) : null,
         )}
       </div>
     </div>
@@ -160,10 +170,15 @@ const VerticalMenuDropdown: React.FC<Props> = ({
   return (
     <>
       <div className="inline-block vertical-menu-dropdown-wrapper">
-        {handleShowHideMenu() > 0 && (
+        {visibleCount > 0 && (
           <button
+            type="button"
             className="vertical-menu-trigger-button p-2 rounded text-base-gray hover:bg-gray-light-1 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
-            onClick={toggleMenu}
+            onClick={event => {
+              event.stopPropagation();
+              if (!openMenu) updateMenuPosition();
+              setOpenMenu(prev => !prev);
+            }}
             ref={menuButtonRef}
           >
             <ThreeDotIcon />

package/src/qbsTable/utilities/empty.tsx

@@ -18,7 +18,7 @@ const NoData: React.FC<props> = ({ title, subtitle }) => {
       }}
     >
       <div style={{ width: 145, marginBottom: 20 }} className="nodata-img">
-        <svg
+       <svg
           xmlns="http://www.w3.org/2000/svg"
           width="148"
           height="132"
@@ -71,7 +71,7 @@ const NoData: React.FC<props> = ({ title, subtitle }) => {
             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"
           ></path>
-        </svg>{' '}
+        </svg> {' '}
       </div>
       <p className="text-center text-common font-bold text-blackAlt nodata-title">{title}</p>
       <span className="text-xxs font-medium text-grey-medium nodata-sub-title">{subtitle}</span>