pixel-react-excel-sheet 1.0.30 → 1.0.31

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react-excel-sheet",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.0.30",
+  "version": "1.0.31",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/src/components/Charts/BarChart/BarChart.stories.tsx

@@ -63,5 +63,8 @@ export const BarChartDashboard: Story = {
       'opera',
     ],
     iconSize: 20,
+    onSelectedBar: (label) => {
+      console.log(label);
+    },
   },
 };

package/src/components/Charts/BarChart/BarChart.tsx

@@ -22,6 +22,7 @@ type BarChartProps = {
   backgroundColor?: string;
   legendPosition?: 'top' | 'bottom';
   legendGap?: number;
+  onSelectedBar?: (_label: string) => void;
 };
 
 const BarChart: React.FC<BarChartProps> = ({
@@ -41,6 +42,7 @@ const BarChart: React.FC<BarChartProps> = ({
   iconSize,
   legendPosition = 'bottom',
   legendGap = 5,
+  onSelectedBar = (_label) => {},
 }) => {
   const [tooltip, setTooltip] = useState<{
     visible: boolean;
@@ -120,6 +122,10 @@ const BarChart: React.FC<BarChartProps> = ({
     });
   };
 
+  const handleSelectLabel = (label: string) => {
+    onSelectedBar(label);
+  };
+
   return (
     <div className="ff-bar-chart-container" style={{ width: chartWidth }}>
       {legend && legendPosition === 'top' && (
@@ -232,6 +238,7 @@ const BarChart: React.FC<BarChartProps> = ({
                   }
                   onMouseMove={handleMouseMove}
                   onMouseLeave={handleMouseLeave}
+                  onClick={() => handleSelectLabel(item.label)}
                 ></rect>
 
                 {showXAxisLabels && (

package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss

@@ -111,6 +111,10 @@
     border-collapse: collapse;
     text-align: left;
 
+    .ff-legend-table-thead {
+      position: static; 
+      top: auto;
+    } 
     .ff-table-header {
       @extend .fontXs;
       font-weight: bold;

package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx

@@ -314,7 +314,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
         return (
           <div className="ff-legend-table-wrapper">
             <table className="ff-legend-table">
-              <thead>
+              <thead className='ff-legend-table-thead'>
                 <tr>
                   <th className="ff-table-header" style={{ width: tableWidth }}>
                     Name

package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import './ExcelToolBar.scss';
 import MenuOption from '../../MenuOption';
 import Tooltip from '../../Tooltip';
@@ -69,6 +69,8 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
   };
 
   const [cellStyle, setCellStyle] = useState(cell?.style || basicStyle);
+  const underLineMenuRef = useRef<HTMLSpanElement>(null);
+  const borderMenuRef = useRef<HTMLSpanElement>(null);
 
   useEffect(() => {
     setCellStyle(cell?.style || basicStyle);
@@ -315,19 +317,22 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
               onClick={() => setUnderlineType(data, underLine, true)}
               name={getUnderlineIcon()}
             />
-            <MenuOption
-              iconName="arrow_down"
-              zIndex={1000}
-              iconSize={12}
-              options={underlineTypeIcon}
-              tooltipPlacement="top"
-              variant="light"
-              onOptionClick={(e) => {
-                let selectedValue = e.value as string;
-                setUnderlineType(data, selectedValue, true);
-                setUnderLine(selectedValue);
-              }}
-            />
+            <span ref={underLineMenuRef}>
+              <MenuOption
+                targetRef={underLineMenuRef}
+                iconName="arrow_down"
+                zIndex={1000}
+                iconSize={12}
+                options={underlineTypeIcon}
+                tooltipPlacement="top"
+                variant="light"
+                onOptionClick={(e) => {
+                  let selectedValue = e.value as string;
+                  setUnderlineType(data, selectedValue, true);
+                  setUnderLine(selectedValue);
+                }}
+              />
+            </span>
           </div>
         </Tooltip>
       </div>
@@ -391,19 +396,22 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
               onClick={() => setBorderType(data, border, 'black')}
               name={getBorderIcon()}
             />
-            <MenuOption
-              iconName="arrow_down"
-              iconSize={12}
-              zIndex={1000}
-              options={borderTypeIcon}
-              tooltipPlacement="top"
-              variant="light"
-              onOptionClick={(e) => {
-                let selectedValue = e.value as string;
-                setBorderType(data, selectedValue, 'black');
-                setBorder(selectedValue);
-              }}
-            />
+            <span ref={borderMenuRef}>
+              <MenuOption
+                iconName="arrow_down"
+                targetRef={borderMenuRef}
+                iconSize={12}
+                zIndex={1000}
+                options={borderTypeIcon}
+                tooltipPlacement="top"
+                variant="light"
+                onOptionClick={(e) => {
+                  let selectedValue = e.value as string;
+                  setBorderType(data, selectedValue, 'black');
+                  setBorder(selectedValue);
+                }}
+              />
+            </span>
           </div>
         </Tooltip>
       </div>

package/src/components/MenuOption/MenuOption.stories.tsx

@@ -135,13 +135,12 @@ export const MenuOptionBottom: Story = {
     dropdownPlacement: 'down',
   },
   render: (args) => {
-    const moreRef = useRef<HTMLDivElement>(null);
     return (
-      <div ref={moreRef}>
+      <div id="more">
         <MenuOption
           {...args}
           options={options}
-          targetRef={moreRef}
+          targetRef={'more'}
           onOptionClick={handleOptionClick}
         />
       </div>

package/src/components/MenuOption/MenuOption.tsx

@@ -153,9 +153,15 @@ const MenuOption = ({
   };
 
   const calculateDims = () => {
-    if (targetRef?.current) {
-      const rect = targetRef.current.getBoundingClientRect();
+    let targetElement: HTMLElement | null = null;
+    if (typeof targetRef === 'string') {
+      targetElement = document.getElementById(targetRef);
+    } else if (targetRef && targetRef.current) {
+      targetElement = targetRef.current;
+    }
 
+    if (targetElement) {
+      const rect = targetElement.getBoundingClientRect();
       setMenuPosition({
         top: rect.top + window.scrollY,
         left: rect.left + window.scrollX,
@@ -164,6 +170,7 @@ const MenuOption = ({
       });
     }
   };
+
   return (
     <div className="ff-menu-option-container" ref={menuRef}>
       <Tooltip title={tooltipTitle} placement={tooltipPlacement}>

package/src/components/MenuOption/types.ts

@@ -208,7 +208,7 @@ interface MenuOptionProps {
    * @optional
    */
   optionCardVariant?: 'primary';
-  targetRef?: React.RefObject<HTMLElement>;
+  targetRef?: string | React.RefObject<HTMLElement>;
 }
 
 interface OptionProps {

package/src/components/PopUpModal/types.ts

@@ -5,12 +5,13 @@ export interface PopUpModalProps {
   titleMessage: string;
   subTitleMessage?: string;
   iconName: string;
-  modalMessage: string;
+  modalMessage: string | React.ReactNode;
+  secondaryMessage?: string | React.ReactNode;
   firstButtonLabel?: string;
   secondButtonLabel: string;
   buttonVariant: any;
   border: string;
-    popupWidth?:string,
+  popupWidth?: string;
   colorForTitleMessage?: string;
-  footerContent?:React.ReactNode;
+  footerContent?: React.ReactNode;
 }

package/src/components/Search/Search.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import Search from './Search';
-import React,{ useState } from 'react';
+import React, { useState } from 'react';
 const meta: Meta<typeof Search> = {
   title: 'Components/Search',
   component: Search,
@@ -17,7 +17,6 @@ export const Default: Story = {
     const [searchValue, setSearchValue] = useState('');
 
     const handleSearch = (value: string) => {
-      alert(`Searching for: ${value}`);
       setSearchValue(value);
     };
 

package/src/components/Search/Search.tsx

@@ -57,9 +57,7 @@ const Search = ({
   };
   const handleChange = (data: string) => {
     setSearchValue(data);
-    if (data === '') {
-      onSearch('');
-    }
+    onSearch(data);
   };
 
   return (

package/src/components/StatusCard/StatusCard.scss

@@ -1,6 +1,5 @@
 .ff-card-container {
-  width: 120px;
-  height: 93px;
+  height: 78px;
   display: flex;
   align-items: center;
   border: 1px solid var(--border-color);
@@ -31,14 +30,14 @@
   }
 
   .ff-status-bar {
-    width: 24px;
+    width: 12%;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: start;
     align-items: center;
     border-right: 1px solid var(--border-color);
-    gap: 30px;
+    gap: 17px;
 
     .ff-status-text {
       transform: rotate(-90deg);
@@ -49,18 +48,23 @@
 
   &.passed .ff-status-bar {
     background-color: var(--ff-card-passed-status-bg-color);
+    color: var(--base-bg-color);
   }
   &.failed .ff-status-bar {
     background-color: var(--ff-card-failed-status-bg-color);
+    color: var(--base-bg-color);
   }
   &.warning .ff-status-bar {
     background-color: var(--ff-card-warning-status-bg-color);
+    color: var(--base-bg-color);
   }
   &.skipped .ff-status-bar {
     background-color: var(--ff-card-skipped-status-bg-color);
+    color: var(--base-bg-color);
   }
   &.flaky .ff-status-bar {
     background-color: var(--ff-card-flaky-status-bg-color);
+    color: var(--base-bg-color);
   }
 
   .ff-content {
@@ -91,4 +95,43 @@
   &.flaky .ff-number {
     color: var(--ff-card-flaky-status-bg-color);
   }
+
+  &.toggled {
+    &.passed .ff-status-bar {
+      background-color: var(--base-bg-color);
+      color: var(--ff-card-passed-status-bg-color);
+    }
+    &.failed .ff-status-bar {
+      background-color: var(--base-bg-color);
+      color: var(--ff-card-failed-status-bg-color);
+    }
+    &.warning .ff-status-bar {
+      background-color: var(--base-bg-color);
+      color: var(--ff-card-warning-status-bg-color);
+    }
+    &.skipped .ff-status-bar {
+      background-color: var(--base-bg-color);
+      color: var(--ff-card-skipped-status-bg-color);
+    }
+    &.flaky .ff-status-bar {
+      background-color: var(--base-bg-color);
+      color: var(--ff-card-flaky-status-bg-color);
+    }
+
+    &.passed .ff-content {
+      background-color: var(--ff-card-passed-status-bg-color);
+    }
+    &.failed .ff-content {
+      background-color: var(--ff-card-failed-status-bg-color);
+    }
+    &.warning .ff-content {
+      background-color: var(--ff-card-warning-status-bg-color);
+    }
+    &.skipped .ff-content {
+      background-color: var(--ff-card-skipped-status-bg-color);
+    }
+    &.flaky .ff-content {
+      background-color: var(--ff-card-flaky-status-bg-color);
+    }
+  }
 }

package/src/components/StatusCard/StatusCard.stories.tsx

@@ -18,6 +18,7 @@ export const Passed: Story = {
     status: 'Passed',
     count: 66,
     text: 'Scripts were passed all the time.',
+    style:{width:'200px'},
   },
 };
 

package/src/components/StatusCard/StatusCard.tsx

@@ -1,12 +1,31 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './StatusCard.scss';
 import { CardProps } from './types';
 import Typography from '../Typography';
 import Icon from '../Icon';
 
-const StatusCard: React.FC<CardProps> = ({ icon, status, count, text }) => {
+const StatusCard: React.FC<CardProps> = ({
+  icon,
+  status,
+  count,
+  text,
+  style = { width: '196.4px' },
+  onSelectedStatus = (_status) => {},
+}) => {
+  const [isToggled, setIsToggled] = useState<boolean>(false);
+
+  const handleSelectStatus = (status: string) => {
+    setIsToggled(true);
+    onSelectedStatus(status);
+  };
   return (
-    <div className={`ff-card-container ${status.toLowerCase()}`}>
+    <div
+      className={`ff-card-container ${status.toLowerCase()} ${
+        isToggled ? 'toggled' : ''
+      }`}
+      style={style}
+      onClick={() => handleSelectStatus(status)}
+    >
       <div className="ff-status-bar">
         <div>
           <Icon name={icon} height={20} width={20} hoverEffect={false} />
@@ -14,7 +33,6 @@ const StatusCard: React.FC<CardProps> = ({ icon, status, count, text }) => {
         <Typography
           fontWeight="semi-bold"
           fontSize="10px"
-          color="var(--ff-status-card-text-color)"
           textAlign="center"
           lineHeight="15px"
           className="ff-status-text"
@@ -29,6 +47,7 @@ const StatusCard: React.FC<CardProps> = ({ icon, status, count, text }) => {
           fontSize="24px"
           className="ff-number"
           lineHeight="36px"
+          color={isToggled ? 'var(--base-bg-color)' : ''}
         >
           {count}
         </Typography>
@@ -37,7 +56,11 @@ const StatusCard: React.FC<CardProps> = ({ icon, status, count, text }) => {
           fontSize="10px"
           className="ff-text"
           lineHeight="15px"
-          color="var(--ff-card-status-text-color)"
+          color={
+            isToggled
+              ? 'var(--base-bg-color)'
+              : 'var(--ff-card-status-text-color)'
+          }
         >
           {text}
         </Typography>

package/src/components/StatusCard/types.ts

@@ -1,11 +1,16 @@
 export interface CardProps {
-    /** The icon to display in the card */
-    icon: string;
-    /** The status of the card (Passed, Failed, Warning, Skipped, Flaky) */
-    status: 'Passed' | 'Failed' | 'Warning' | 'Skipped' | 'Flaky';
-    /** The number displayed in the card */
-    count: number | string;
-    /** The description text displayed at the bottom of the card */
-    text: string;
-  }
-  
+  /** The icon to display in the card */
+  icon: string;
+  /** The status of the card (Passed, Failed, Warning, Skipped, Flaky) */
+  status: 'Passed' | 'Failed' | 'Warning' | 'Skipped' | 'Flaky' | 'PASSED' | 'FAIL' | 'WARNING' | 'SKIPPED' | 'FLAKY';
+  /** The number displayed in the card */
+  count: number | string;
+  /** The description text displayed at the bottom of the card */
+  text: string;
+  /** Inline Styling */
+  style?: React.CSSProperties;
+  /** toggle update */
+  handleToggleStatus?: (_status: boolean) => void;
+  /** call back */
+  onSelectedStatus?: (_status: string) => void;
+}

package/src/components/Toastify/Toastify.tsx

@@ -73,6 +73,7 @@ export const Toastify = () => {
       variant={toastProps.variant}
       toastTitle={toastProps.toastTitle}
       toastMessage={toastProps.toastMessage}
+      zIndex={1000000000}
     />
   );
 };