pixel-react-excel-sheet 1.0.38 → 1.0.40

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

@@ -2,8 +2,6 @@ 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,
   centerY: number,
@@ -16,10 +14,7 @@ const calculateArc = (
   const endX = centerX + radius * Math.cos(endAngle);
   const endY = centerY + radius * Math.sin(endAngle);
   const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
-  return `
-    M ${startX} ${startY}
-    A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}
-  `;
+  return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`;
 };
 
 const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
@@ -86,7 +81,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
 
       case 'pillLegend':
         return (
-          <div className={`ff-legend-container ff-pill-legend`}>
+          <div className="ff-legend-container ff-pill-legend">
             {legendData.reverse().map((item, index) => (
               <div className="ff-legend-item" key={index}>
                 <span
@@ -95,12 +90,9 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
                     backgroundColor: item.arcColor,
                   }}
                 >
-                  <Typography fontSize={10}>{item.value}</Typography>
+                  <Typography fontSize={10} color="var(--tooltip-text-color)">{item.value}</Typography>
                 </span>
-                <Typography
-                  className="ff-legend-key"
-                  color="  var(--text-color)"
-                >
+                <Typography className="ff-legend-key">
                   {item.label}
                 </Typography>
               </div>
@@ -139,12 +131,16 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
   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 || '';
+    const valueString = tooltip.content.split(':')[1]?.trim(); 
+    const value = valueString ? Number(valueString) : undefined; 
+    if (value === undefined) return ''; 
+    const matchingBar = barValues.find((val) => val.value === value); 
+    return matchingBar?.arcColor || ''; 
   };
+
   return (
     <div
       className={`ff-multi-radial-chart-container ${
@@ -154,40 +150,51 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
       }`}
     >
       <div className="relative" style={{ width: svgSize, height: svgSize }}>
-        <svg
-          width={svgSize}
-          height={svgSize}
-          viewBox={`0 0 ${svgSize} ${svgSize}`}
-          className="absolute top-0 left-0"
-        >
+        <svg width={svgSize} height={svgSize} viewBox={`0 0 ${svgSize} ${svgSize}`} className="absolute top-0 left-0">
           <g transform={`translate(${svgSize / 2}, ${svgSize / 2})`}>
             {reversedBarValues.map((values, i) => {
               const originalIndex = barValues.length - 1 - i;
               const percentage = values.value / totalBarValue;
               const angleIncrement = percentage * 2 * Math.PI;
-              let startAngle = -Math.PI / 2;
+              let startAngle = -Math.PI / 2; 
               let endAngle = startAngle + angleIncrement;
               if (values.value === totalBarValue) {
                 startAngle = 0;
                 endAngle = 2 * Math.PI;
               }
-              const currentRadius =
-                baseRadius + radiusIncrement * originalIndex;
-              const backGroundArcPath = calculateArc(
-                0,
-                0,
-                currentRadius,
-                0,
-                2 * Math.PI
-              );
+              const currentRadius = baseRadius + radiusIncrement * originalIndex;
 
-              const foregroundArcPath = calculateArc(
-                0,
-                0,
-                currentRadius,
-                startAngle,
-                endAngle
-              );
+              const backGroundArcPath = calculateArc(0, 0, currentRadius, 0, 2 * Math.PI);
+
+              // If value is 0, render a dot at the top of the circle (angle = -Math.PI / 2)
+              if (values.value === 0) {
+                const dotX = currentRadius * Math.cos(-Math.PI / 2);
+                const dotY = currentRadius * Math.sin(-Math.PI / 2); 
+                return (
+                  <g key={originalIndex}>
+                    <path
+                      d={backGroundArcPath}
+                      fill="none"
+                      stroke={values.arcBackgroundColor}
+                      strokeWidth={lineWidth}
+                      className="transition-all duration-300"
+                    />
+                    <circle
+                      cx={dotX}
+                      cy={dotY}
+                      r={5}
+                      fill={values.arcColor}
+                      onMouseEnter={(e) =>
+                        handleMouseEnter(e, `${values.barLabel || 'Data'}: ${values.value}`)
+                      }
+                      onMouseMove={handleMouseMove}
+                      onMouseLeave={handleMouseLeave}
+                    />
+                  </g>
+                );
+              }
+
+              const foregroundArcPath = calculateArc(0, 0, currentRadius, startAngle, endAngle);
               return (
                 <g key={originalIndex}>
                   <path
@@ -204,10 +211,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
                     strokeWidth={lineWidth}
                     strokeLinecap={lineCap === 'square' ? 'butt' : 'round'}
                     onMouseEnter={(e) =>
-                      handleMouseEnter(
-                        e,
-                        `${values.barLabel || 'Data'}: ${values.value}`
-                      )
+                      handleMouseEnter(e, `${values.barLabel || 'Data'}: ${values.value}`)
                     }
                     onMouseMove={handleMouseMove}
                     onMouseLeave={handleMouseLeave}
@@ -294,7 +298,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
         renderLegend(
           barValues.map((value) => ({
             ...value,
-            label: truncateText(value?.barLabel, 8),
+            label:value?.barLabel,
             key: value.value.toString(),
           })),
           legendType

package/src/components/ChooseFile/ChooseFile.tsx

@@ -1,9 +1,8 @@
-import { memo, type FC } from 'react'
+import {  type FC } from 'react'
 import { ChooseFileProps } from './types'
 import Button from '../Button'
 
-const areEqual = (prevProps: ChooseFileProps, nextProps: ChooseFileProps) =>
-    prevProps.selectedFile?.name === nextProps.selectedFile?.name;
+
 
 const ChooseFile:FC<ChooseFileProps> = ({
     variant = 'primary',
@@ -43,4 +42,4 @@ const ChooseFile:FC<ChooseFileProps> = ({
   )
 }
 
-export default memo(ChooseFile, areEqual);
+export default ChooseFile;

package/src/components/Comment/Comments.scss

@@ -5,7 +5,6 @@
 
   .comment-wrapper-one {
     position: relative;
-    padding-left: 20px;
   }
   .comment-wrapper {
     position: relative;

package/src/components/Comment/Comments.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Comments from './Comments';
 import '../../assets/styles/_colors.scss';
 import './Comments.scss';
+import { CommentType } from './type';
 import React from 'react';
 
 const meta: Meta<typeof Comments> = {
@@ -37,9 +38,26 @@ export const basicCommentWithOutData: Story = {
 export const basicCommentWithData: Story = {
   render: () => {
     const handleCommentsDataChange = (inputValue: string) => {
-      //DEMO: we are getting that value from LabelEditTextField
+      //DEMO: we are getting that value from Comment
       console.info('Confirmed input value:', inputValue);
     };
+    const handleAddComment = (
+      newComment: CommentType,
+      parentNode: CommentType | null
+    ) => {
+      console.info('Adding', newComment, parentNode);
+    };
+
+    const handleEditComment = (
+      commentId: string,
+      updatedDescription: string,
+      updatedNode: CommentType | null
+    ) => {
+      console.info('Updated', commentId, updatedDescription, updatedNode);
+    };
+    const handleDelete = (id: string | number) => {
+      console.info('Delete Comment ID:', id);
+    };
     return (
       <Comments
         onCommentsDataChange={handleCommentsDataChange}
@@ -201,9 +219,9 @@ export const basicCommentWithData: Story = {
             },
           ],
         }}
-        handleAddComment={() => {}}
-        handleEditComment={() => {}}
-        handleDeleteComment={() => {}}
+        handleEditComment={handleEditComment}
+        handleAddComment={handleAddComment}
+        handleDeleteComment={handleDelete}
       />
     );
   },

package/src/components/Comment/Comments.tsx

@@ -10,7 +10,9 @@ const initialComments: CommentType = {
 
 const Comments = ({
   commentsData,
-
+  handleAddComment,
+  handleEditComment,
+  handleDeleteComment,
   onCommentsDataChange,
 }: CommentsProps) => {
   const [commentData, setCommentsData] = useState(
@@ -21,21 +23,38 @@ const Comments = ({
   const handleInsertNode: HandleNodeFunction = (commentId, item) => {
     const updatedTree = insertNode(commentData, commentId, item);
     setCommentsData({ ...updatedTree });
+    const updatedNode = findNode(updatedTree, commentId);
+    if (handleAddComment) handleAddComment(item, updatedNode);
   };
 
   const handleEditNode: HandleNodeFunction = (commentId, value) => {
     const updatedTree = editNode(commentData, commentId, value);
     setCommentsData({ ...updatedTree });
+    const updatedNode = findNode(updatedTree, commentId);
+    if (handleEditComment) handleEditComment(commentId, value, updatedNode);
   };
 
   const handleDeleteNode = (commentId: number) => {
     const updatedTree = deleteNode(commentData, commentId);
     setCommentsData({ ...updatedTree });
+    if (handleDeleteComment) handleDeleteComment(commentId);
   };
   useEffect(() => {
     onCommentsDataChange(commentData);
   }, [commentData, onCommentsDataChange]);
+  const findNode = (
+    node: CommentType,
+    id: number | string
+  ): CommentType | null => {
+    if (node.id === id) return node;
+
+    for (const child of node.comments) {
+      const found = findNode(child, id);
+      if (found) return found;
+    }
 
+    return null;
+  };
   return (
     <div className="ff-comments-container">
       <Comment

package/src/components/Comment/type.ts

@@ -29,8 +29,8 @@ export type HandleDeleteComment = (commentId: string) => void;
 export type HandleNodeFunction = (commentId: string, value: string) => void;
 export interface CommentsProps {
   commentsData: any;
-  handleAddComment: HandleAddComment;
-  handleEditComment: HandleEditComment;
-  handleDeleteComment: HandleDeleteComment;
+  handleAddComment: any;
+  handleEditComment: any;
+  handleDeleteComment: any;
   onCommentsDataChange: (data: any) => void;
 }

package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx

@@ -44,6 +44,7 @@ const Template: StoryFn<ConditionalDropdownProps> = (args) => {
         value={inputValue}
         onCreateVariableClick={() => setOpenCreateVariable(true)}
         ref={inputRef}
+        showAddVariableIcon
       />
       {openCreateVariable && (
         <CreateVariableSlider

package/src/components/ConditionalDropdown/ConditionalDropdown.tsx

@@ -30,6 +30,7 @@ const ConditionalDropdown = forwardRef<
       dropdownWidth = 'inherit',
       isHash = false,
       dataFiles = [],
+      showAddVariableIcon = true,
       ...props
     },
     ref
@@ -122,7 +123,7 @@ const ConditionalDropdown = forwardRef<
             label={label}
             placeholder={placeholder}
           />
-          {!checkEmpty(value) && !isHash && showCreateVariableIcon && (
+          {!checkEmpty(value) && !isHash && showCreateVariableIcon && showAddVariableIcon && (
             <Icon
               onClick={onCreateVariableClick}
               name="add_variable"

package/src/components/ConditionalDropdown/types.ts

@@ -130,6 +130,10 @@ export interface ConditionalDropdownProps {
    * Options for the dropdown when `isHash` is true.
    */
   dataFiles?: dynamicObject[];
+  /**
+   * a boolean prop to show add variable icon or not.
+   */
+  showAddVariableIcon?: boolean;
 }
 
 export interface OptionsDropdownProps {

package/src/components/DatePicker/DatePicker.scss

@@ -85,14 +85,13 @@
   .ff-date-picker-container {
     display: flex;
     flex-direction: column;
-    position: absolute;
+    position: fixed;
     border-radius: 8px;
     padding: 4px;
     box-sizing: border-box;
     background-color: var(--tab-bg-color);
     box-shadow: 0 0 12px 0 #00000033;
     gap: 8px;
-    z-index: 10;
 
     .ff-calendar-container {
       display: flex;
@@ -721,3 +720,309 @@
 }
 
 
+// Adding react day picker library node modules css here to get the css style available in platform 
+
+/* Variables declaration */
+/* prettier-ignore */
+.rdp-root {
+  --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */
+  --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */
+  --rdp-font-family: system-ui; /* The font family used by the calendar. Note that `inherit`does not work here. */
+
+  --rdp-day-font: inherit; /* The font used for the day cells. */
+  --rdp-day-height: 2.75rem; /* The height of the day cells. */
+  --rdp-day-width: 2.75rem; /* The width of the day cells. */
+  
+  --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */
+  --rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */
+  --rdp-day_button-height: var(--rdp-day-height); /* The height of the day cells. */
+  --rdp-day_button-width: var(--rdp-day-width); /* The width of the day cells. */
+  
+  --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */
+  --rdp-selected-font: bold large var(--rdp-font-family); /* The font of the selected days. */
+  --rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */
+  --rdp-outside-opacity: 0.75; /* The opacity of the days outside the current month. */
+  --rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */
+  
+  --rdp-dropdown-gap: 0.5rem;/* The gap between the dropdowns used in the month captons. */
+  
+  --rdp-month_caption-font: bold larger var(--rdp-font-family); /* The font of the month caption. */
+  --rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */
+  
+  --rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */
+  --rdp-nav_button-height: 2.25rem; /* The height of the navigation buttons. */
+  --rdp-nav_button-width: 2.25rem; /* The width of the navigation buttons. */
+  --rdp-nav-height: 2.75rem; /* The height of the navigation bar. */
+  
+  --rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */
+  --rdp-range_middle-font: normal medium var(--rdp-font-family); /* The font for days in the middle of a range. */
+  --rdp-range_middle-foreground-color: white; /* The font for days in the middle of a range. */
+  --rdp-range_middle-color: inherit;/* The color of the range text. */
+  
+  --rdp-range_start-color: white; /* The color of the range text. */
+  --rdp-range_start-background: linear-gradient(var(--rdp-gradient-direction), transparent 50%, var(--rdp-range_middle-background-color) 50%); /* Used for the background of the start of the selected range. */
+  --rdp-range_start-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the start of the selected range. */
+  
+  --rdp-range_end-background: linear-gradient(var(--rdp-gradient-direction), var(--rdp-range_middle-background-color) 50%, transparent 50%); /* Used for the background of the end of the selected range. */
+  --rdp-range_end-color: white;/* The color of the range text. */
+  --rdp-range_end-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the end of the selected range. */
+  
+  --rdp-week_number-border-radius: 100%; /* The border radius of the week number. */
+  --rdp-week_number-border: 2px solid transparent; /* The border of the week number. */
+  --rdp-week_number-font: 400 small var(--rdp-font-family); /* The font of the week number cells. */
+  --rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */
+  --rdp-week_number-opacity: 0.75; /* The opacity of the week number. */
+  --rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */
+  --rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */
+
+  --rdp-weekday-font: 500 smaller var(--rdp-font-family); /* The font of the weekday. */
+  --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */
+  --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */
+  --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */
+
+  --rdp-gradient-direction: 90deg;
+}
+
+.rdp-root[dir="rtl"] {
+  --rdp-gradient-direction: -90deg;
+}
+
+/* Root of the component. */
+.rdp-root {
+  position: relative; /* Required to position the navigation toolbar. */
+  box-sizing: border-box;
+}
+
+.rdp-root * {
+  box-sizing: border-box;
+}
+
+.rdp-day {
+  width: var(--rdp-day-width);
+  height: var(--rdp-day-height);
+  font: var(--rdp-day-font);
+  text-align: center;
+}
+
+.rdp-day_button {
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+
+  width: var(--rdp-day_button-width);
+  height: var(--rdp-day_button-height);
+  border: var(--rdp-day_button-border);
+  border-radius: var(--rdp-day_button-border-radius);
+}
+
+.rdp-day_button:disabled {
+  cursor: revert;
+}
+
+.rdp-caption_label {
+  z-index: 1;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  white-space: nowrap;
+  border: 0;
+}
+
+.rdp-button_next,
+.rdp-button_previous {
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  appearance: none;
+
+  width: var(--rdp-nav_button-width);
+  height: var(--rdp-nav_button-height);
+}
+
+.rdp-button_next:disabled,
+.rdp-button_previous:disabled {
+  cursor: revert;
+
+  opacity: var(--rdp-nav_button-disabled-opacity);
+}
+
+.rdp-chevron {
+  display: inline-block;
+  fill: var(--rdp-accent-color);
+}
+
+.rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
+  transform: rotate(180deg);
+}
+
+.rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
+  transform: rotate(180deg);
+  transform-origin: 50%;
+}
+
+.rdp-dropdowns {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rdp-dropdown-gap);
+}
+.rdp-dropdown {
+  z-index: 2;
+
+  /* Reset */
+  opacity: 0;
+  appearance: none;
+  position: absolute;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  cursor: inherit;
+  border: none;
+  line-height: inherit;
+}
+
+.rdp-dropdown_root {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.rdp-dropdown_root[data-disabled="true"] .rdp-chevron {
+  opacity: var(--rdp-disabled-opacity);
+}
+
+.rdp-month_caption {
+  display: flex;
+  align-content: center;
+  height: var(--rdp-nav-height);
+  font: var(--rdp-month_caption-font);
+}
+
+.rdp-months {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--rdp-months-gap);
+  max-width: fit-content;
+}
+
+.rdp-month_grid {
+  border-collapse: collapse;
+}
+
+.rdp-nav {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+
+  display: flex;
+  align-items: center;
+
+  height: var(--rdp-nav-height);
+}
+
+.rdp-weekday {
+  opacity: var(--rdp-weekday-opacity);
+  padding: var(--rdp-weekday-padding);
+  font: var(--rdp-weekday-font);
+  text-align: var(--rdp-weekday-text-align);
+  text-transform: var(--rdp-weekday-text-transform);
+}
+
+.rdp-week_number {
+  opacity: var(--rdp-week_number-opacity);
+  font: var(--rdp-week_number-font);
+  height: var(--rdp-week_number-height);
+  width: var(--rdp-week_number-width);
+  border: var(--rdp-week_number-border);
+  border-radius: var(--rdp-week_number-border-radius);
+  text-align: var(--rdp-weeknumber-text-align);
+}
+
+/* DAY MODIFIERS */
+.rdp-today:not(.rdp-outside) {
+  color: var(--rdp-today-color);
+}
+
+.rdp-selected {
+  font: var(--rdp-selected-font);
+}
+
+.rdp-selected .rdp-day_button {
+  border: var(--rdp-selected-border);
+}
+
+.rdp-outside {
+  opacity: var(--rdp-outside-opacity);
+}
+
+.rdp-disabled {
+  opacity: var(--rdp-disabled-opacity);
+}
+
+.rdp-hidden {
+  visibility: hidden;
+  color: var(--rdp-range_start-color);
+}
+
+.rdp-range_start {
+  background: var(--rdp-range_start-background);
+}
+
+.rdp-range_start .rdp-day_button {
+  background-color: var(--rdp-range_start-date-background-color);
+  color: var(--rdp-range_start-color);
+}
+
+.rdp-range_middle {
+  background-color: var(--rdp-range_middle-background-color);
+  font: var(--rdp-range_middle-font);
+}
+
+.rdp-range_middle .rdp-day_button {
+  border-color: transparent;
+  border: unset;
+  border-radius: unset;
+  color: var(--rdp-range_middle-color);
+}
+
+.rdp-range_end {
+  background: var(--rdp-range_end-background);
+  color: var(--rdp-range_end-color);
+}
+
+.rdp-range_end .rdp-day_button {
+  color: var(--rdp-range_start-color);
+  background-color: var(--rdp-range_end-date-background-color);
+}
+
+.rdp-range_start.rdp-range_end {
+  background: revert;
+}
+
+.rdp-focusable {
+  cursor: pointer;
+}
+
+