pixel-react 1.9.1 → 1.9.3

package/src/components/DatePicker/DatePicker.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
+import ReactDOM from 'react-dom';
 import { DayPicker } from 'react-day-picker';
 import { formatInTimeZone } from 'date-fns-tz';
 import TimePicker from './Timepicker';
@@ -38,6 +39,10 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
     new Date()
   );
   const [view, setView] = useState<string>('days');
+  const [positionStyles, setPositionStyles] = useState<{
+    top: number | null;
+    left: number | null;
+  }>({ top: null, left: null });
 
   const selectedDateRef = useRef<Date | undefined>(undefined);
   const [startYear, setStartYear] = useState(() => {
@@ -83,33 +88,38 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
 
   useEffect(() => {
     const adjustPosition = () => {
-      if (containerRef.current && pickerRef.current) {
-        const relativeRect = containerRef.current.getBoundingClientRect();
-        const pickerHeight = pickerRef.current.offsetHeight;
-        const spacing = 5; // spacing in pixels
-
-        const spaceBelow = window.innerHeight - relativeRect.bottom;
-        const spaceAbove = relativeRect.top;
-
-        let top = relativeRect.bottom + window.scrollY + spacing; // Default position to below
-        if (spaceBelow < pickerHeight && spaceAbove >= pickerHeight) {
-          top = relativeRect.top + window.scrollY - pickerHeight - spacing; // Place above
+      if (containerRef.current) {
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const spacing = 8;
+
+        let top = containerRect.bottom + spacing;
+        let left = containerRect.left;
+
+        if (pickerRef.current) {
+          const pickerHeight = pickerRef.current.offsetHeight;
+          const pickerWidth = pickerRef.current.offsetWidth;
+
+          if (window.innerHeight - containerRect.bottom < pickerHeight) {
+            top = containerRect.top - pickerHeight - spacing;
+          }
+          if (window.innerWidth - containerRect.left < pickerWidth) {
+            left = containerRect.right - pickerWidth;
+          }
         }
 
-        // Horizontal position: align to container with optional adjustments
-        const left = relativeRect.left + window.scrollX;
-
-        pickerRef.current.style.top = `${top}px`;
-        pickerRef.current.style.left = `${left}px`;
+        setPositionStyles({ top, left });
       }
     };
 
-    // Initial adjustment
-    adjustPosition();
+    if (isPickerOpen) {
+      adjustPosition();
+      setTimeout(() => {}, 200);
+      window.addEventListener('resize', () => {});
+    }
 
-    // Recalculate on resize
-    window.addEventListener('resize', adjustPosition);
-    return () => window.removeEventListener('resize', adjustPosition);
+    return () => {
+      window.removeEventListener('resize', adjustPosition);
+    };
   }, [isPickerOpen]);
 
   const calendarStyle = {
@@ -151,7 +161,6 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
   };
 
   const handleSave = () => {
-    console.log('selectedDate1', selectedDateRef.current);
     onChange(selectedDateRef.current);
     resetAndCloseDatePicker();
   };
@@ -316,7 +325,15 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
                 'ff-custom-month--disabled': isDisabled,
               })}
             >
-              <Typography>{month}</Typography>
+              <Typography
+                color={
+                  index === selectedMonth?.getMonth()
+                    ? 'var(--primary-button-text-color)'
+                    : undefined
+                }
+              >
+                {month}
+              </Typography>
             </div>
           );
         })}
@@ -370,7 +387,15 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
                 'ff-custom-year--disabled': isDisabled,
               })}
             >
-              <Typography>{year}</Typography>
+              <Typography
+                color={
+                  year === selectedMonth?.getFullYear()
+                    ? 'var(--primary-button-text-color)'
+                    : undefined
+                }
+              >
+                {year}
+              </Typography>
             </div>
           );
         })}
@@ -427,82 +452,89 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
         )}
       </div>
 
-      {isPickerOpen && (
-        <div
-          className="ff-date-picker-container"
-          ref={pickerRef}
-          style={{
-            zIndex,
-          }}
-        >
-          <div className="ff-calendar-container">
-            <DayPicker
-              style={calendarStyle}
-              className="ff-calendar"
-              mode="single"
-              selected={selectedDate}
-              onSelect={handleDaySelect}
-              month={selectedMonth}
-              onMonthChange={(month) => {
-                if (view === 'days') {
-                  setSelectedMonth(month);
-                }
-              }}
-              onNextClick={handleNextClick}
-              onPrevClick={handlePrevClick}
-              disableNavigation={view === 'months'}
-              disabled={[
-                {
-                  before: new Date(minDate ? minDate : ''),
-                  after: new Date(maxDate ? maxDate : ''),
-                },
-              ]}
-              timeZone={timezone}
-              components={{
-                CaptionLabel: (props) => <CustomCaption {...props} />,
-                PreviousMonthButton: (props) => <CustomPrevButton {...props} />,
-                NextMonthButton: (props) => <CustomNextButton {...props} />,
-                ...(view === 'months'
-                  ? {
-                      MonthGrid: () => <CustomMonthGrid />,
-                    }
-                  : {}),
-                ...(view === 'years'
-                  ? {
-                      MonthGrid: () => <CustomYearGrid />,
-                    }
-                  : {}),
-              }}
-            />
-            {!dateOnly && (
-              <TimePicker
-                value={timeValue}
-                onChange={handleTimeChange}
-                minTime={minTime}
-                maxTime={maxTime}
-                onErrorChange={setTimeError}
-              />
-            )}
-          </div>
-          {!dateOnly && (
-            <div className="ff-date-picker-controls">
-              <Button
-                className="ff-date-picker-button"
-                variant="secondary"
-                onClick={handleCancel}
-                label="Cancel"
-              />
-              <Button
-                className="ff-date-picker-button"
-                variant="primary"
-                onClick={handleSave}
-                label="Save"
-                disabled={timeError}
+      {isPickerOpen &&
+        !!top &&
+        ReactDOM.createPortal(
+          <div
+            className="ff-date-picker-container"
+            ref={pickerRef}
+            style={{
+              zIndex,
+              top: `${positionStyles.top}px`,
+              left: `${positionStyles.left}px`,
+            }}
+          >
+            <div className="ff-calendar-container">
+              <DayPicker
+                style={calendarStyle}
+                className="ff-calendar"
+                mode="single"
+                selected={selectedDate}
+                onSelect={handleDaySelect}
+                month={selectedMonth}
+                onMonthChange={(month) => {
+                  if (view === 'days') {
+                    setSelectedMonth(month);
+                  }
+                }}
+                onNextClick={handleNextClick}
+                onPrevClick={handlePrevClick}
+                disableNavigation={view === 'months'}
+                disabled={[
+                  {
+                    before: new Date(minDate ? minDate : ''),
+                    after: new Date(maxDate ? maxDate : ''),
+                  },
+                ]}
+                timeZone={timezone}
+                components={{
+                  CaptionLabel: (props) => <CustomCaption {...props} />,
+                  PreviousMonthButton: (props) => (
+                    <CustomPrevButton {...props} />
+                  ),
+                  NextMonthButton: (props) => <CustomNextButton {...props} />,
+                  ...(view === 'months'
+                    ? {
+                        MonthGrid: () => <CustomMonthGrid />,
+                      }
+                    : {}),
+                  ...(view === 'years'
+                    ? {
+                        MonthGrid: () => <CustomYearGrid />,
+                      }
+                    : {}),
+                }}
               />
+              {!dateOnly && (
+                <TimePicker
+                  value={timeValue}
+                  onChange={handleTimeChange}
+                  minTime={minTime}
+                  maxTime={maxTime}
+                  onErrorChange={setTimeError}
+                />
+              )}
             </div>
-          )}
-        </div>
-      )}
+            {!dateOnly && (
+              <div className="ff-date-picker-controls">
+                <Button
+                  className="ff-date-picker-button"
+                  variant="secondary"
+                  onClick={handleCancel}
+                  label="Cancel"
+                />
+                <Button
+                  className="ff-date-picker-button"
+                  variant="primary"
+                  onClick={handleSave}
+                  label="Save"
+                  disabled={timeError}
+                />
+              </div>
+            )}
+          </div>,
+          document.body
+        )}
     </div>
   );
 };

package/src/components/DatePicker/Timepicker.tsx

@@ -18,7 +18,6 @@ const TimePicker: React.FC<TimePickerProps> = ({
   const [period, setPeriod] = useState<string | undefined>('AM');
   const [timeFieldError, setTimeFieldError] = useState<boolean>(false);
   const [isPeriodDropdownOpen, setIsPeriodDropdownOpen] = useState(false);
-  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 });
   const inputRef = useRef<HTMLInputElement>(null);
   const periodRef = useRef<HTMLDivElement>(null);
 
@@ -173,10 +172,6 @@ const TimePicker: React.FC<TimePickerProps> = ({
 
   const togglePeriodDropdown = () => {
     setIsPeriodDropdownOpen((prev) => !prev);
-    if (periodRef.current) {
-      const { top, left, height } = periodRef.current.getBoundingClientRect();
-      setDropdownPosition({ top: top + height, left: left });
-    }
   };
 
   const handlePeriodChange = (option: string) => {
@@ -322,14 +317,7 @@ const TimePicker: React.FC<TimePickerProps> = ({
           </div>
 
           {isPeriodDropdownOpen && (
-            <ul
-              className="ff-time-period-options"
-              style={{
-                top: `${dropdownPosition.top}px`,
-                left: `${dropdownPosition.left}px`,
-              }}
-              role="listbox"
-            >
+            <ul className="ff-time-period-options" role="listbox">
               <Typography
                 as="li"
                 className="ff-option-item"

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

@@ -17,9 +17,7 @@ import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
 
 interface ExcelFileProps {
   /** The Excel data containing sheets and their content */
-  excelData: {
-    sheets: WorkSheet[];
-  };
+  excelData: WorkSheet[];
 
   /** Optional: Provide context menu options for actions like right-click */
   contextOption?: {
@@ -130,49 +128,57 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
 
   useEffect(() => {
     const payload = excelData;
-    const sheetNames = payload.sheets.map((e) => e.sheetName);
-    setSheetNames(sheetNames);
-    if (sheetNames.length > 0) {
-      pageRef.current = sheetNames[0] ? sheetNames[0] : '';
-      setSelectedSheet({ name: sheetNames[0] ? sheetNames[0] : '', index: 0 });
-    }
-    const newWorksheetsData: { [key: string]: Matrix.Matrix<CellBase> } = {};
-    payload.sheets.forEach((sheet) => {
-      const sheetName = sheet.sheetName;
-      const json = sheet.data;
-      const maxRows = Math.max(26, json.length + 2);
-      const maxCols = Math.max(
-        26,
-        Math.max(...json.map((row) => row.length)) + 2
-      );
-
-      let spreadsheetData: Matrix.Matrix<CellBase> = Array.from(
-        { length: maxRows },
-        () => Array.from({ length: maxCols }, () => EmptyRow)
-      );
-      json.forEach((row, rowIndex) => {
-        row.forEach((cell, colIndex) => {
-          if (rowIndex < maxRows && colIndex < maxCols) {
-            if (!spreadsheetData[rowIndex]) {
-              spreadsheetData[rowIndex] = [];
+    if (payload) {
+      const sheetNames = payload.map((e) => e.sheetName);
+      setSheetNames(sheetNames);
+
+      if (!checkEmpty(sheetNames.length)) {
+        pageRef.current = sheetNames[0] ? sheetNames[0] : ''; //Ternary is required, must use ''
+        setSelectedSheet({
+          name: sheetNames[0] ? sheetNames[0] : '', //Ternary is required, must use ''
+          index: 0,
+        });
+      }
+      const newWorksheetsData: { [key: string]: Matrix.Matrix<CellBase> } = {};
+      payload.forEach((sheet) => {
+        const sheetName = sheet.sheetName;
+        const json = sheet.data;
+        const maxRows = Math.max(26, json.length + 2);
+        const maxCols = Math.max(
+          26,
+          Math.max(...json.map((row) => row.length)) + 2
+        );
+
+        let spreadsheetData: Matrix.Matrix<CellBase> = Array.from(
+          { length: maxRows },
+          () => Array.from({ length: maxCols }, () => EmptyRow)
+        );
+
+        json.forEach((row, rowIndex) => {
+          row.forEach((cell, colIndex) => {
+            if (rowIndex < maxRows && colIndex < maxCols) {
+              if (!spreadsheetData[rowIndex]) {
+                spreadsheetData[rowIndex] = [];
+              }
+              spreadsheetData[rowIndex][colIndex] = {
+                value: checkVal(cell.value),
+                style: convertStyleToFrontend(cell?.styles), //TODO remove 's' for Style
+                type: true,
+              };
             }
-            spreadsheetData[rowIndex][colIndex] = {
-              value: checkVal(cell.value),
-              style: convertStyleToFrontend(cell?.style),
-              type: true,
-            };
-          }
+          });
         });
-      });
 
-      newWorksheetsData[sheetName] = spreadsheetData;
-    });
-    setWorksheetsData(newWorksheetsData);
-    const firstSheetName = Object.keys(newWorksheetsData)[0];
-    if (firstSheetName && newWorksheetsData[firstSheetName] !== undefined) {
-      setSelectedSheetData(newWorksheetsData[firstSheetName]);
+        newWorksheetsData[sheetName] = spreadsheetData;
+      });
+      setWorksheetsData(newWorksheetsData);
+      const firstSheetName = Object.keys(newWorksheetsData)[0];
+      if (firstSheetName && newWorksheetsData[firstSheetName] !== undefined) {
+        setSelectedSheetData(newWorksheetsData[firstSheetName]);
+      }
     }
-  }, []);
+  }, [excelData]);
+
   const handleSave = React.useCallback(
     (event: KeyboardEvent) => {
       if (event.ctrlKey && event.key === 's') {

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

@@ -27,111 +27,113 @@ type Story = StoryObj<typeof ExcelFile>;
 
 export const Default: Story = {
   args: {
-    excelData: {
-      sheets: [
-        {
-          sheetName: 'fireflink',
-          data: [
-            [
-              {
-                value: 'Test Sample Data 1',
-                style: {
-                  name: 'Arial',
-                  size: 11,
-                  bold: true,
-                  italic: false,
-                  color: 'ffffff', // Sample data from backend without #
-                  backgroundColor: '434db8', // Sample data from backend without #
-                  borderColor: 'F2F2F2', // Sample data from backend without #
-                  border: {
-                    top: 'NONE',
-                    bottom: 'NONE',
-                    left: 'NONE',
-                    right: 'NONE',
-                  },
-                  alignment: {
-                    horizontal: 'GENERAL',
-                    vertical: 'BOTTOM',
-                    wrapText: false,
-                  },
+    excelData: [
+      {
+        sheetName: 'fireflink',
+        data: [
+          [
+            {
+              value: 'Test Sample Data 1',
+              styles: {
+                //TODO remove 's' for Style
+                name: 'Arial',
+                size: 11,
+                bold: true,
+                italic: false,
+                color: 'ffffff', // Sample data from backend without #
+                backgroundColor: '434db8', // Sample data from backend without #
+                borderColor: 'F2F2F2', // Sample data from backend without #
+                border: {
+                  top: 'NONE',
+                  bottom: 'NONE',
+                  left: 'NONE',
+                  right: 'NONE',
+                },
+                alignment: {
+                  horizontal: 'GENERAL',
+                  vertical: 'BOTTOM',
+                  wrapText: false,
                 },
               },
-              {
-                value: 'Test Data 2',
-                style: {
-                  name: 'Arial',
-                  size: 12,
-                  bold: true,
-                  italic: true,
-                  color: 'EB5B00', // Sample data from backend without #
-                  backgroundColor: '88C273', // Sample data from backend without #
-                  borderColor: 'F2F2F2', // Sample data from backend without #
-                  border: {
-                    top: 'NONE',
-                    bottom: 'NONE',
-                    left: 'NONE',
-                    right: 'NONE',
-                  },
-                  alignment: {
-                    horizontal: 'GENERAL',
-                    vertical: 'BOTTOM',
-                    wrapText: false,
-                  },
+            },
+            {
+              value: 'Test Data 2',
+              styles: {
+                //TODO remove 's' for Style
+                name: 'Arial',
+                size: 12,
+                bold: true,
+                italic: true,
+                color: 'EB5B00', // Sample data from backend without #
+                backgroundColor: '88C273', // Sample data from backend without #
+                borderColor: 'F2F2F2', // Sample data from backend without #
+                border: {
+                  top: 'NONE',
+                  bottom: 'NONE',
+                  left: 'NONE',
+                  right: 'NONE',
+                },
+                alignment: {
+                  horizontal: 'GENERAL',
+                  vertical: 'BOTTOM',
+                  wrapText: false,
                 },
               },
-            ],
-            [
-              {
-                value: 'Test Data 3',
-                style: {
-                  name: 'Arial',
-                  size: 11,
-                  bold: false,
-                  italic: false,
-                  color: '000000', // Sample data from backend without #
-                  backgroundColor: 'EB5B00', // Sample data from backend without #
-                  borderColor: 'F2F2F2', // Sample data from backend without #
-                  border: {
-                    top: 'NONE',
-                    bottom: 'NONE',
-                    left: 'NONE',
-                    right: 'NONE',
-                  },
-                  alignment: {
-                    horizontal: 'GENERAL',
-                    vertical: 'BOTTOM',
-                    wrapText: false,
-                  },
+            },
+          ],
+          [
+            {
+              value: 'Test Data 3',
+              styles: {
+                //TODO remove 's' for Style
+                name: 'Arial',
+                size: 11,
+                bold: false,
+                italic: false,
+                color: '000000', // Sample data from backend without #
+                backgroundColor: 'EB5B00', // Sample data from backend without #
+                borderColor: 'F2F2F2', // Sample data from backend without #
+                border: {
+                  top: 'NONE',
+                  bottom: 'NONE',
+                  left: 'NONE',
+                  right: 'NONE',
+                },
+                alignment: {
+                  horizontal: 'GENERAL',
+                  vertical: 'BOTTOM',
+                  wrapText: false,
                 },
               },
-              {
-                value: 'Test Sample Data 4',
-                style: {
-                  name: 'Arial',
-                  size: 11,
-                  bold: false,
-                  italic: false,
-                  color: '3D0301', // Sample data from backend without #
-                  backgroundColor: 'C6E7FF', // Sample data from backend without #
-                  borderColor: 'F2F2F2', // Sample data from backend without #
-                  border: {
-                    top: 'THIN',
-                    bottom: 'THIN',
-                    left: 'THIN',
-                    right: 'THIN',
-                  },
-                  alignment: {
-                    horizontal: 'GENERAL',
-                    vertical: 'BOTTOM',
-                    wrapText: false,
-                  },
+            },
+            {
+              value: 'Test Sample Data 4',
+              styles: {
+                //TODO remove 's' for Style
+                name: 'Arial',
+                size: 11,
+                bold: false,
+                italic: false,
+                color: '3D0301', // Sample data from backend without #
+                backgroundColor: 'C6E7FF', // Sample data from backend without #
+                borderColor: 'F2F2F2', // Sample data from backend without #
+                border: {
+                  top: 'THIN',
+                  bottom: 'THIN',
+                  left: 'THIN',
+                  right: 'THIN',
+                },
+                alignment: {
+                  horizontal: 'GENERAL',
+                  vertical: 'BOTTOM',
+                  wrapText: false,
                 },
               },
-            ],
+            },
           ],
-        },
-      ],
-    },
+        ],
+      },
+    ],
     toolbar: 'show',
     contextOption: {
       open: true,