pixel-react 1.5.9 → 1.6.1

package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { MultiRadialChartProps, ChartItem, LegendType } from './types';
 import './MultiRadialChart.scss';
 import Typography from '../../Typography';
+import { truncateText } from '../../../utils/truncateText/truncateText';
 
 const calculateArc = (
   centerX: number,
@@ -30,7 +31,17 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
   legendType = 'numberLegend',
   isLegendDetails = true,
 }) => {
-  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+  const [tooltip, setTooltip] = useState<{
+    visible: boolean;
+    x: number;
+    y: number;
+    content: string;
+  }>({
+    visible: false,
+    x: 0,
+    y: 0,
+    content: '',
+  });
 
   const totalBarValue = barValues.reduce(
     (acc, status) => acc + status.value,
@@ -59,7 +70,11 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
                 >
                   {item.value}
                 </Typography>
-                <Typography fontSize={10} className="ff-legend-key">
+                <Typography
+                  fontSize={10}
+                  className="ff-legend-key"
+                  color="  var(--text-color)"
+                >
                   {item.label}
                 </Typography>
               </div>
@@ -80,7 +95,12 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
                 >
                   <Typography fontSize={10}>{item.value}</Typography>
                 </span>
-                <Typography className="ff-legend-key">{item.label}</Typography>
+                <Typography
+                  className="ff-legend-key"
+                  color="  var(--text-color)"
+                >
+                  {item.label}
+                </Typography>
               </div>
             ))}
           </div>
@@ -91,6 +111,38 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
     }
   };
 
+  const handleMouseEnter = (e: React.MouseEvent, content: string) => {
+    const { clientX, clientY } = e;
+    setTooltip({
+      visible: true,
+      x: clientX,
+      y: clientY,
+      content: content,
+    });
+  };
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    const { clientX, clientY } = e;
+    setTooltip((prev) => ({
+      ...prev,
+      x: clientX,
+      y: clientY,
+    }));
+  };
+
+  const handleMouseLeave = () => {
+    setTooltip({ visible: false, x: 0, y: 0, content: '' });
+  };
+
+  const textData = (text: string, maxLength: number) => {
+    return text.length > maxLength ? text.slice(0, maxLength) + '...' : text;
+  };
+  const getArcColorFromTooltip = () => {
+    if (!tooltip.visible) return '';
+    const value = tooltip.content.split(':')[1]?.trim();
+    const matchingBar = barValues.find((val) => `${val.value}` === value);
+    return matchingBar?.arcColor || '';
+  };
   return (
     <div
       className={`ff-multi-radial-chart-container ${
@@ -148,8 +200,14 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
                     stroke={values.arcColor}
                     strokeWidth={lineWidth}
                     strokeLinecap={lineCap === 'square' ? 'butt' : 'round'}
-                    onMouseEnter={() => setHoveredIndex(originalIndex)}
-                    onMouseLeave={() => setHoveredIndex(null)}
+                    onMouseEnter={(e) =>
+                      handleMouseEnter(
+                        e,
+                        `${values.barLabel || 'Data'}: ${values.value}`
+                      )
+                    }
+                    onMouseMove={handleMouseMove}
+                    onMouseLeave={handleMouseLeave}
                     style={{
                       pointerEvents: 'stroke',
                     }}
@@ -160,42 +218,69 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
             <text
               x="0"
               y="-20"
-              fill={
-                hoveredIndex !== null ? barValues[hoveredIndex]?.arcColor : ''
-              }
+              fill={getArcColorFromTooltip()}
               textAnchor="middle"
               dominantBaseline="central"
             >
-              {hoveredIndex !== null ? (
+              {tooltip.visible ? (
                 <>
-                  <tspan x="0" dy={0} className="ff-center-text">
-                    {barValues[hoveredIndex]?.value}
+                  <tspan x="0" dy={10} className="ff-center-text-tooltip">
+                    {textData(tooltip.content.split(':')[1]?.trim() || '', 5)}
                   </tspan>
-                  <tspan x="0" dy={18} className="ff-center-text">
-                    {barValues[hoveredIndex]?.barLabel}
+                  <tspan x="0" dy={18} className="ff-center-text-tooltip">
+                    {textData(tooltip.content.split(':')[0] ?? '', 8)}
                   </tspan>
                 </>
               ) : (
-                labelLines.map((line, index) => (
-                  <tspan
-                    key={index}
-                    x="0"
-                    dy={index === 0 ? 0 : 18}
-                    className="ff-center-text"
-                  >
-                    {line}
-                  </tspan>
-                ))
+                <>
+                  {labelLines.map((line, index) => {
+                    if (index === 0) {
+                      const [firstWord, ...restWords] = line.split(' ');
+                      return (
+                        <tspan key={index}>
+                          <tspan x="0" dy="0" className="ff-center-first-text">
+                            {firstWord}
+                          </tspan>
+                          <tspan x="0" dy={18} className="ff-center-text">
+                            {restWords.join(' ')}
+                          </tspan>
+                        </tspan>
+                      );
+                    }
+                    return (
+                      <tspan
+                        key={index}
+                        x="0"
+                        dy={index === 0 ? 0 : 18}
+                        className="ff-center-text"
+                      >
+                        {line}
+                      </tspan>
+                    );
+                  })}
+                </>
               )}
             </text>
           </g>
         </svg>
+        {tooltip.visible && (
+          <div
+            className="ff-multi-radial-tooltip"
+            style={{
+              top: tooltip.y + 10,
+              left: tooltip.x + 10,
+              zIndex: 1000,
+            }}
+          >
+            {tooltip.content}
+          </div>
+        )}
       </div>
       {isLegendDetails &&
         renderLegend(
           barValues.map((value) => ({
             ...value,
-            label: value.barLabel || '',
+            label: truncateText(value?.barLabel, 8),
             key: value.value.toString(),
           })),
           legendType

package/src/components/Charts/PieChart/PieChart.scss

@@ -1,3 +1,4 @@
+@use '../../../assets/styles/fonts';
 .ff-pie-chart-container {
   display: flex;
   flex-direction: column;
@@ -18,11 +19,9 @@
     border-radius: 4px;
     background-color: var(--tooltip-bg-color);
     color: var(--primary-icon-color);
-    border: 10px solid;
-    font-size: 14px;
+    @extend .fontSm;
     font-weight: 400;
     pointer-events: none;
-    opacity: 0.8;
   }
 
   .ff-pie-chart-legend {
@@ -35,5 +34,8 @@
       align-items: center;
       text-align: center;
     }
+    .ff-pie-chart-legend-value {
+      color: var(--drawer-title-color);
+    }
   }
 }

package/src/components/Charts/PieChart/PieChart.tsx

@@ -119,7 +119,7 @@ const PieChart: React.FC<PieChartProps> = ({
         fontSize={10}
         fontWeight="regular"
         lineHeight="18px"
-        className="ff-Pie-chart-legend-value"
+        className="ff-pie-chart-legend-value"
       >
         {item.label}
       </Typography>
@@ -178,7 +178,6 @@ const PieChart: React.FC<PieChartProps> = ({
           style={{
             top: tooltipPosition.y,
             left: tooltipPosition.x,
-            border: `2px solid ${tooltip.color}`,
           }}
         >
           {tooltip.label} : {tooltip.value}

package/src/components/Checkbox/Checkbox.tsx

@@ -21,12 +21,6 @@ const Checkbox: React.FC<CheckboxProps> = ({
     setChecked(initialChecked);
   }, [initialChecked]);
 
-  const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (!disabled) {
-      setChecked((prev) => !prev), onChange?.(event);
-    }
-  };
-
   return (
     <label className="ff-checkbox--overlay" htmlFor={id}>
       <input
@@ -35,7 +29,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
         id={id}
         name={name}
         checked={checked}
-        onChange={handleCheckboxChange}
+        onChange={onChange}
         disabled={disabled}
       />
       <span

package/src/components/DatePicker/DatePicker.scss

@@ -118,7 +118,7 @@
       margin: 0 5px;
       border: 1px solid var(--border-color);
       background-color: var(--toggle-button-bg-color);
-      box-shadow: 0 -2px 2px 0 var(--ff-mini-modal-box-shadow);
+      box-shadow: 0 -1px 2px 0 var(--ff-mini-modal-box-shadow);
       padding: 0px;
       border-radius: 30%;
       cursor: pointer;
@@ -231,6 +231,7 @@
           width: 100%;
           text-align: center;
           border-radius: 4px 0 0 4px;
+          font-weight: 400;
           @extend .fontSm;
 
           &::placeholder {
@@ -325,10 +326,23 @@
         }
 
         .ff-time-period-icon {
+          svg {
+            path {
+              fill: var(--default-icon-color);
+            }
+          }
           margin-left: auto;
           pointer-events: none;
         }
 
+        &:hover {
+          svg {
+            path {
+              fill: var(--brand-color);
+            }
+          }
+        }
+
         .ff-time-period-options {
           position: fixed;
           z-index: 100;

package/src/components/DragAndDrop/DragAndDropList.tsx

@@ -21,6 +21,7 @@ const {
 import Typography from '../Typography';
 
 import './DragAndDropList.scss';
+import { DragEndEvent } from '@dnd-kit/core';
 
 interface TaskProps {
   id: number;
@@ -117,14 +118,14 @@ const DragAndDropList = () => {
   const getTaskPos = (id: number): number =>
     tasks.findIndex((task) => task.id === id);
 
-  const handleDragEnd = (event: any) => {
+  const handleDragEnd = (event: DragEndEvent) => {
     const { active, over } = event;
 
-    if (active.id === over.id) return;
+    if (active.id === over?.id) return;
 
     setTasks((tasks) => {
-      const originalPos = getTaskPos(active.id);
-      const newPos = getTaskPos(over.id);
+      const originalPos = getTaskPos(Number(active?.id));
+      const newPos = getTaskPos(Number(over?.id));
 
       return arrayMove(tasks, originalPos, newPos);
     });

package/src/components/Excel/ExcelFile/ExcelFile.scss

@@ -18,7 +18,7 @@
     // }
 
     .ff-excel-sheet-bar {
-      margin-left: 83px;
+      margin-left: 60px;
       display: flex;
       height: 36px;
       align-items: center;

package/src/components/Excel/ExcelFile/ExcelFile.tsx

@@ -34,9 +34,7 @@ interface ExcelFileProps {
 
 const ExcelFile: React.FC<ExcelFileProps> = ({
   excelData,
-  onSave = (saveData) => {
-    saveData();
-  },
+  onSave = (saveData) => {saveData()},
 }) => {
   const [sheetNames, setSheetNames] = useState<string[]>([]);
   const [contextMenu, setContextMenu] = React.useState<ContextMenuState>({
@@ -51,6 +49,8 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
       color: 'var(--text-color)',
       backgroundColor: 'var(--drawer-footer-bg)',
       borderColor: 'var(--toggle-strip-color)',
+      textDecoration: 'none',
+      textDecorationStyle: 'solid',
     },
   };
 
@@ -128,7 +128,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
             }
             spreadsheetData[rowIndex][colIndex] = {
               value: checkVal(cell.value),
-              style: convertStyleToFrontend(cell?.style),
+              style: convertStyleToFrontend(cell?.style) ,
               type: true,
             };
           }
@@ -143,6 +143,23 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
       setSelectedSheetData(newWorksheetsData[firstSheetName]);
     }
   }, []);
+  const handleSave = React.useCallback(
+    (event: KeyboardEvent) => {
+      if (event.ctrlKey && event.key === 's') {
+        event.preventDefault();
+        event.stopPropagation();
+        onSaveWorksheetData();
+      }
+    },
+    [onSave]
+  );
+  
+  React.useEffect(() => {
+    document.addEventListener('keydown', handleSave);
+    return () => {
+      document.removeEventListener('keydown', handleSave);
+    };
+  }, [handleSave]);
 
   const onSaveWorksheetData = () => {
     const savedData = {
@@ -159,21 +176,18 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
             }, -1);
 
             const filteredRow = row
-              .map((cell, index) => {
-                if (cell && cell.value !== null) {
-                  return {
-                    value: cell.value,
-                    styles: convertStyleToBackend(cell.style ?? {}),
-                  };
-                } else if ((cell && cell.type) || index <= lastIndex) {
-                  return {
-                    value: '',
-                    styles: convertStyleToBackend(cell?.style ?? {}),
-                  };
-                }
-                return null;
-              })
-              .filter((cell) => cell !== null);
+            .map((cell, index) => {
+              if (cell && cell.value !== null) {
+                return {
+                  value: cell.value,
+                  styles: convertStyleToBackend(cell.style ?? {}),
+                };
+              } else if (cell && cell.type || index <= lastIndex) {
+                return { value: '', styles: convertStyleToBackend(cell?.style ?? {}) };
+              }
+              return null;
+            })
+            .filter((cell) => cell !== null);
 
             return filteredRow.length > 0 ? filteredRow : [];
           }) || [];
@@ -194,7 +208,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     onSave(savedData);
     toast.success('File saved successfully!');
   };
-
+  
   const onEvaluateChange = (data: Matrix.Matrix<CellBase>) => {
     setWorksheetsData((prev) => ({ ...prev, [pageRef.current]: data }));
     onSaveWorksheetData();

package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx

@@ -444,7 +444,6 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     () => (
       <div className="ff-excel">
         <ExcelToolBar
-          data={props.data}
           onBold={onBold}
           onItalic={onItalic}
           setUnderlineType={setUnderlineType}

package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts

@@ -12,7 +12,7 @@ import {
 
 export function applyBoldToCells(
   currentData: Matrix.Matrix<Types.CellBase<any>>,
-  selectedRange: PointRange
+  selectedRange: PointRange,
 ): Matrix.Matrix<Types.CellBase<any>> {
   if (!selectedRange) {
     return currentData;
@@ -21,24 +21,33 @@ export function applyBoldToCells(
   const { start, end } = selectedRange;
 
   let updatedData = currentData;
+  let anyBold = false;
 
   for (let row = start.row; row <= end.row; row++) {
     for (let col = start.column; col <= end.column; col++) {
       const currentCell = Matrix.get({ row, column: col }, updatedData);
+      if (!currentCell) continue;
 
-      if (!currentCell) {
-        continue;
+      if (currentCell.style?.fontWeight === 'bold') {
+        anyBold = true;
+        break;
       }
+    }
+    if (anyBold) break;
+  }
+
+  for (let row = start.row; row <= end.row; row++) {
+    for (let col = start.column; col <= end.column; col++) {
+      const currentCell = Matrix.get({ row, column: col }, updatedData);
+      if (!currentCell) continue;
 
       const updatedCell = {
         ...currentCell,
         style: {
           ...currentCell.style,
-          fontWeight:
-            currentCell.style?.fontWeight !== 'bold' ? 'bold' : 'normal',
+          fontWeight: anyBold ? 'normal' : 'bold',
         },
       };
-
       updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
     }
   }
@@ -57,24 +66,33 @@ export function applyItalicToCells(
   const { start, end } = selectedRange;
 
   let updatedData = currentData;
+  let anyItalic = false;
 
   for (let row = start.row; row <= end.row; row++) {
     for (let col = start.column; col <= end.column; col++) {
       const currentCell = Matrix.get({ row, column: col }, updatedData);
+      if (!currentCell) continue;
 
-      if (!currentCell) {
-        continue;
+      if (currentCell.style?.fontStyle === 'italic') {
+        anyItalic = true;
+        break;
       }
+    }
+    if (anyItalic) break;
+  }
+
+  for (let row = start.row; row <= end.row; row++) {
+    for (let col = start.column; col <= end.column; col++) {
+      const currentCell = Matrix.get({ row, column: col }, updatedData);
+      if (!currentCell) continue;
 
       const updatedCell = {
         ...currentCell,
         style: {
           ...currentCell.style,
-          fontStyle:
-            currentCell.style?.fontStyle !== 'italic' ? 'italic' : 'normal',
+          fontStyle: anyItalic ? 'normal' : 'italic',
         },
       };
-
       updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
     }
   }
@@ -289,23 +307,34 @@ export function applyUnderlineToCells(
   const { start, end } = selectedRange;
 
   let updatedData = currentData;
+  let anyUnderlined = false;
 
   for (let row = start.row; row <= end.row; row++) {
     for (let col = start.column; col <= end.column; col++) {
       const currentCell = Matrix.get({ row, column: col }, updatedData);
+      if (!currentCell) continue;
 
-      if (!currentCell) {
-        continue;
+      if (currentCell.style?.textDecoration === 'underline') {
+        anyUnderlined = true;
+        break;
       }
+    }
+    if (anyUnderlined) break;
+  }
+
+  for (let row = start.row; row <= end.row; row++) {
+    for (let col = start.column; col <= end.column; col++) {
+      const currentCell = Matrix.get({ row, column: col }, updatedData);
+      if (!currentCell) continue;
 
       let updatedCell;
-      if (!active) {
+      if (!active || anyUnderlined) {
         updatedCell = {
           ...currentCell,
           style: {
             ...currentCell.style,
             textDecoration: 'none',
-            textDecorationStyle: 'none' as TextDecorationStyle,
+            textDecorationStyle: 'solid' as TextDecorationStyle,
           },
         };
       } else {