pixel-react 1.2.1 → 1.2.2

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

@@ -1,12 +1,12 @@
-import * as React from "react";
-import classnames from "classnames";
-import * as Actions from "./actions";
-import * as Types from "./types";
-import * as Point from "./point";
-import useSelector from "./use-selector";
-import useDispatch from "./use-dispatch";
-import { getCellDimensions } from "./util";
-import * as Matrix from "./matrix";
+import * as React from 'react';
+import classnames from 'classnames';
+import * as Actions from './actions';
+import * as Types from './types';
+import * as Point from './point';
+import useSelector from './use-selector';
+import useDispatch from './use-dispatch';
+import { getCellDimensions } from './util';
+import * as Matrix from './matrix';
 
 type Props = {
   DataEditor: Types.DataEditorComponent;
@@ -77,7 +77,7 @@ const ActiveCell: React.FC<Props> = (props) => {
 
     const coordsChanged =
       active?.row !== prevActive.row || active?.column !== prevActive.column;
-    const exitedEditMode = mode !== "edit";
+    const exitedEditMode = mode !== 'edit';
 
     if (coordsChanged || exitedEditMode) {
       const initialCell = initialCellRef.current;
@@ -107,14 +107,14 @@ const ActiveCell: React.FC<Props> = (props) => {
     <div
       ref={rootRef}
       className={classnames(
-        "Spreadsheet__active-cell",
+        'Spreadsheet__active-cell',
         `Spreadsheet__active-cell--${mode}`
       )}
       style={dimensions}
-      onClick={mode === "view" && !readOnly ? edit : undefined}
+      onClick={mode === 'view' && !readOnly ? edit : undefined}
       tabIndex={0}
     >
-      {mode === "edit" && active && (
+      {mode === 'edit' && active && (
         <DataEditor
           row={active.row}
           column={active.column}

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

@@ -51,7 +51,7 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
 
   const handleMouseOver = React.useCallback(
     (event: React.MouseEvent<HTMLTableCellElement>) => {
-      if (dragging && first && !isDotDragging) { 
+      if (dragging && first && !isDotDragging) {
         setCellDimensions(point, getOffsetRect(event.currentTarget));
         select(point);
       }
@@ -102,10 +102,11 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
   return (
     <td
       ref={rootRef}
+      // style={data?.style}
       className={classnames('Spreadsheet__cell', data?.className, {
         'Spreadsheet__active-cell': active || dragging,
       })}
-      onMouseEnter={handleMouseOver} // Handle drag when mouse enters
+      onMouseEnter={handleMouseOver}
       onMouseDown={handleMouseDown}
       tabIndex={0}
     >
@@ -130,15 +131,15 @@ export const enhance = (
 ): React.FC<
   Omit<
     Types.CellComponentProps,
-    | "selected"
-    | "active"
-    | "copied"
-    | "dragging"
-    | "mode"
-    | "data"
-    | "select"
-    | "activate"
-    | "setCellDimensions"
+    | 'selected'
+    | 'active'
+    | 'copied'
+    | 'dragging'
+    | 'mode'
+    | 'data'
+    | 'select'
+    | 'activate'
+    | 'setCellDimensions'
   >
 > => {
   return function CellWrapper(props) {
@@ -169,7 +170,7 @@ export const enhance = (
       [dispatch]
     );
     const active = useSelector((state) => isActive(state.active, point));
-    const mode = useSelector((state) => (active ? state.mode : "view"));
+    const mode = useSelector((state) => (active ? state.mode : 'view'));
     const data = useSelector((state) => Matrix.get(point, state.model.data));
     const evaluatedData = useSelector((state) =>
       Matrix.get(point, state.model.evaluatedData)

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

@@ -1,10 +1,10 @@
-import * as React from "react";
-import classNames from "classnames";
-import * as Types from "./types";
-import * as Point from "./point";
-import * as Actions from "./actions";
-import useDispatch from "./use-dispatch";
-import useSelector from "./use-selector";
+import * as React from 'react';
+import classNames from 'classnames';
+import * as Types from './types';
+import * as Point from './point';
+import * as Actions from './actions';
+import useDispatch from './use-dispatch';
+import useSelector from './use-selector';
 
 const ColumnIndicator: Types.ColumnIndicatorComponent = ({
   column,
@@ -14,7 +14,7 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
 }) => {
   const dispatch = useDispatch();
   const [width, setWidth] = React.useState(100);
-  
+
   // Function to handle the start of the resize (mouse down)
   const onMouseDown = (e: React.MouseEvent) => {
     const startX = e.clientX;
@@ -23,26 +23,33 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
     const onMouseMove = (moveEvent: MouseEvent) => {
       const newWidth = width + (moveEvent.clientX - startX);
       setWidth(newWidth);
-      
-      // const selectedAllRow = document.querySelector(".Spreadsheet__floating-rect--selected");
-      // const selectedSingleRow = document.querySelector(".Spreadsheet__active-cell");
 
-      // // If the element exists, update its height
-      // if (selectedAllRow instanceof HTMLElement&&selectedSingleRow instanceof HTMLElement) {
-      //   selectedAllRow.style.width = `${newWidth}px`; // Set the width
-      //   selectedSingleRow.style.width = `${newWidth}px`; // Set the width
-      // }
+      const selectedAllRow = document.querySelector(
+        '.Spreadsheet__floating-rect--selected'
+      );
+      const selectedSingleRow = document.querySelector(
+        '.Spreadsheet__active-cell'
+      );
+
+      // If the element exists, update its height
+      if (
+        selectedAllRow instanceof HTMLElement &&
+        selectedSingleRow instanceof HTMLElement
+      ) {
+        selectedAllRow.style.width = `${newWidth}px`;
+        selectedSingleRow.style.width = `${newWidth}px`;
+      }
     };
 
     // Function to stop the resizing (mouse up)
     const onMouseUp = () => {
-      document.removeEventListener("mousemove", onMouseMove);
-      document.removeEventListener("mouseup", onMouseUp);
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
     };
 
     // Add event listeners for mouse move and mouse up
-    document.addEventListener("mousemove", onMouseMove);
-    document.addEventListener("mouseup", onMouseUp);
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
   };
 
   const activate = React.useCallback(
@@ -58,12 +65,11 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
     [onSelect, column]
   );
 
-
   return (
     <th
-      style={{ minWidth: `${width}px`, position: "relative" }} // Use dynamic width
-      className={classNames("Spreadsheet__header", {
-        "Spreadsheet__header--selected": selected,
+      style={{ minWidth: `${width}px`, position: 'relative' }} // Use dynamic width
+      className={classNames('Spreadsheet__header', {
+        'Spreadsheet__header--selected': selected,
       })}
       onClick={handleClick}
       tabIndex={0}
@@ -71,15 +77,17 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
       {label !== undefined ? label : columnIndexToLabel(column)}
       <div
         onMouseDown={onMouseDown}
-        onClick={()=>{activate}}
+        onClick={() => {
+          activate;
+        }}
         style={{
-          zIndex: "inherit",
-          width: "2px",
-          position: "absolute",
+          zIndex: 'inherit',
+          width: '2px',
+          position: 'absolute',
           right: 0,
           top: 0,
-          height: "100%",
-          cursor: "ew-resize",
+          height: '100%',
+          cursor: 'ew-resize',
         }}
       />
     </th>
@@ -90,7 +98,7 @@ export default ColumnIndicator;
 
 export const enhance = (
   ColumnIndicatorComponent: Types.ColumnIndicatorComponent
-): React.FC<Omit<Types.ColumnIndicatorProps, "selected" | "onSelect">> => {
+): React.FC<Omit<Types.ColumnIndicatorProps, 'selected' | 'onSelect'>> => {
   return function ColumnIndicatorWrapper(props) {
     const dispatch = useDispatch();
     const selectEntireColumn = React.useCallback(
@@ -113,7 +121,7 @@ export const enhance = (
 
 // Utility function to convert column index to label (e.g., 0 -> A, 1 -> B, etc.)
 function columnIndexToLabel(column: number): string {
-  let label = "";
+  let label = '';
   let index = column;
   while (index >= 0) {
     label = String.fromCharCode(65 + (index % 26)) + label;

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

@@ -1,7 +1,7 @@
-import * as React from "react";
-import FloatingRect from "./FloatingRect";
-import { getRangeDimensions } from "./util";
-import useSelector from "./use-selector";
+import * as React from 'react';
+import FloatingRect from './FloatingRect';
+import { getRangeDimensions } from './util';
+import useSelector from './use-selector';
 
 const Copied: React.FC = () => {
   const range = useSelector((state) => state.copied);

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

@@ -1,10 +1,10 @@
-import * as React from "react";
-import classNames from "classnames";
-import * as Actions from "./actions";
-import { EntireWorksheetSelection } from "./selection";
-import * as Types from "./types";
-import useDispatch from "./use-dispatch";
-import useSelector from "./use-selector";
+import * as React from 'react';
+import classNames from 'classnames';
+import * as Actions from './actions';
+import { EntireWorksheetSelection } from './selection';
+import * as Types from './types';
+import useDispatch from './use-dispatch';
+import useSelector from './use-selector';
 
 const CornerIndicator: Types.CornerIndicatorComponent = ({
   selected,
@@ -15,8 +15,8 @@ const CornerIndicator: Types.CornerIndicatorComponent = ({
   }, [onSelect]);
   return (
     <th
-      className={classNames("Spreadsheet__header", {
-        "Spreadsheet__header--selected": selected,
+      className={classNames('Spreadsheet__header', {
+        'Spreadsheet__header--selected': selected,
       })}
       onClick={handleClick}
       tabIndex={0}
@@ -28,7 +28,7 @@ export default CornerIndicator;
 
 export const enhance = (
   CornerIndicatorComponent: Types.CornerIndicatorComponent
-): React.FC<Omit<Types.CornerIndicatorProps, "selected" | "onSelect">> => {
+): React.FC<Omit<Types.CornerIndicatorProps, 'selected' | 'onSelect'>> => {
   return function CornerIndicatorWrapper(props) {
     const dispatch = useDispatch();
     const selectEntireWorksheet = React.useCallback(

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

@@ -1,6 +1,6 @@
-import * as React from "react";
-import * as Types from "./types";
-import { moveCursorToEnd } from "./util";
+import * as React from 'react';
+import * as Types from './types';
+import { moveCursorToEnd } from './util';
 
 /** The default Spreadsheet DataEditor component */
 const DataEditor: React.FC<Types.DataEditorProps> = ({ onChange, cell }) => {
@@ -8,7 +8,7 @@ const DataEditor: React.FC<Types.DataEditorProps> = ({ onChange, cell }) => {
 
   const handleChange = React.useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
-      onChange({ ...cell, value: event.target.value,style:cell?.style});
+      onChange({ ...cell, value: event.target.value, style: cell?.style });
     },
     [onChange, cell]
   );
@@ -19,7 +19,7 @@ const DataEditor: React.FC<Types.DataEditorProps> = ({ onChange, cell }) => {
     }
   }, [inputRef]);
 
-  const value = cell?.value ?? "";
+  const value = cell?.value ?? '';
 
   return (
     <div className="Spreadsheet__data-editor">

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

@@ -1,10 +1,10 @@
-import * as React from "react";
-import classNames from "classnames";
-import * as Types from "./types";
-import { hasLineBreaker } from "./util";
+import * as React from 'react';
+import classNames from 'classnames';
+import * as Types from './types';
+import { hasLineBreaker } from './util';
 
-export const TRUE_TEXT = "TRUE";
-export const FALSE_TEXT = "FALSE";
+export const TRUE_TEXT = 'TRUE';
+export const FALSE_TEXT = 'FALSE';
 
 /** The default Spreadsheet DataViewer component */
 const DataViewer = <Cell extends Types.CellBase<Value>, Value>({
@@ -13,14 +13,14 @@ const DataViewer = <Cell extends Types.CellBase<Value>, Value>({
 }: Types.DataViewerProps<Cell>): React.ReactElement => {
   const value = getValue(cell, evaluatedCell);
 
-  return typeof value === "boolean" ? (
+  return typeof value === 'boolean' ? (
     <span className="Spreadsheet__data-viewer Spreadsheet__data-viewer--boolean">
       {convertBooleanToText(value)}
     </span>
   ) : (
     <span
-      className={classNames("Spreadsheet__data-viewer", {
-        "Spreadsheet__data-viewer--preserve-breaks": hasLineBreaker(value),
+      className={classNames('Spreadsheet__data-viewer', {
+        'Spreadsheet__data-viewer--preserve-breaks': hasLineBreaker(value),
       })}
     >
       {value}
@@ -35,7 +35,7 @@ function getValue(
   evaluatedCell: Types.CellBase | undefined
 ) {
   const baseValue = evaluatedCell?.value ?? cell?.value;
-  if (baseValue && typeof baseValue === "object") {
+  if (baseValue && typeof baseValue === 'object') {
     return baseValue.toString();
   }
   return baseValue;

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

@@ -1,6 +1,6 @@
-import * as React from "react";
-import classnames from "classnames";
-import * as Types from "./types";
+import * as React from 'react';
+import classnames from 'classnames';
+import * as Types from './types';
 
 export type Props = {
   variant?: string;
@@ -18,10 +18,10 @@ const FloatingRect: React.FC<Props> = ({
   const { width, height, top, left } = dimensions || {};
   return (
     <div
-      className={classnames("Spreadsheet__floating-rect", {
+      className={classnames('Spreadsheet__floating-rect', {
         [`Spreadsheet__floating-rect--${variant}`]: variant,
-        "Spreadsheet__floating-rect--dragging": dragging,
-        "Spreadsheet__floating-rect--hidden": hidden,
+        'Spreadsheet__floating-rect--dragging': dragging,
+        'Spreadsheet__floating-rect--hidden': hidden,
       })}
       style={{ width, height, top, left }}
     />

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

@@ -1,4 +1,4 @@
-import * as Types from "./types";
+import * as Types from './types';
 
 const HeaderRow: Types.HeaderRowComponent = (props) => <tr {...props} />;
 

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

@@ -1,4 +1,4 @@
-import * as Types from "./types";
+import * as Types from './types';
 
 const Row: Types.RowComponent = (props) => <tr {...props} />;
 

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

@@ -1,9 +1,9 @@
-import * as React from "react";
-import classNames from "classnames";
-import * as Actions from "./actions";
-import * as Types from "./types";
-import useDispatch from "./use-dispatch";
-import useSelector from "./use-selector";
+import * as React from 'react';
+import classNames from 'classnames';
+import * as Actions from './actions';
+import * as Types from './types';
+import useDispatch from './use-dispatch';
+import useSelector from './use-selector';
 
 const RowIndicator: Types.RowIndicatorComponent = ({
   row,
@@ -12,7 +12,7 @@ const RowIndicator: Types.RowIndicatorComponent = ({
   onSelect,
 }) => {
   const [height, setHeight] = React.useState(0);
-  
+
   // Function to handle the start of the resize (mouse down)
   const onMouseDown = (e: React.MouseEvent) => {
     const startY = e.clientY;
@@ -22,25 +22,32 @@ const RowIndicator: Types.RowIndicatorComponent = ({
       const newHeight = height + (moveEvent.clientY - startY);
       setHeight(newHeight);
       // Fetch the floating rectangle element from the DOM
-      // const selectedAllRow = document.querySelector(".Spreadsheet__floating-rect--selected");
-      // const selectedSingleRow = document.querySelector(".Spreadsheet__active-cell");
+      const selectedAllRow = document.querySelector(
+        '.Spreadsheet__floating-rect--selected'
+      );
+      const selectedSingleRow = document.querySelector(
+        '.Spreadsheet__active-cell'
+      );
 
-      // // If the element exists, update its height
-      // if (selectedAllRow instanceof HTMLElement&&selectedSingleRow instanceof HTMLElement) {
-      //   selectedAllRow.style.height = `${newHeight}px`; // Set the height
-      //   selectedSingleRow.style.height = `${newHeight}px`; // Set the height
-      // }
+      // If the element exists, update its height
+      if (
+        selectedAllRow instanceof HTMLElement &&
+        selectedSingleRow instanceof HTMLElement
+      ) {
+        selectedAllRow.style.height = `${newHeight}px`;
+        selectedSingleRow.style.height = `${newHeight}px`;
+      }
     };
 
     // Function to stop the resizing (mouse up)
     const onMouseUp = () => {
-      document.removeEventListener("mousemove", onMouseMove);
-      document.removeEventListener("mouseup", onMouseUp);
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
     };
 
     // Add event listeners for mouse move and mouse up
-    document.addEventListener("mousemove", onMouseMove);
-    document.addEventListener("mouseup", onMouseUp);
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
   };
 
   const handleClick = React.useCallback(
@@ -52,9 +59,9 @@ const RowIndicator: Types.RowIndicatorComponent = ({
 
   return (
     <th
-    style={{ height: `${height}px`,minWidth:'60px', position: "relative" }}
-      className={classNames("Spreadsheet__header", {
-        "Spreadsheet__header--selected": selected,
+      style={{ height: `${height}px`, minWidth: '60px', position: 'relative' }}
+      className={classNames('Spreadsheet__header', {
+        'Spreadsheet__header--selected': selected,
       })}
       onClick={handleClick}
       tabIndex={0}
@@ -63,13 +70,13 @@ const RowIndicator: Types.RowIndicatorComponent = ({
       <div
         onMouseDown={onMouseDown}
         style={{
-          zIndex: "inherit",
-          height: "2px",
-          position: "absolute",
+          zIndex: 'inherit',
+          height: '2px',
+          position: 'absolute',
           right: 0,
           bottom: 0,
-          width: "100%",
-          cursor: "ns-resize",
+          width: '100%',
+          cursor: 'ns-resize',
         }}
       />
     </th>
@@ -80,7 +87,7 @@ export default RowIndicator;
 
 export const enhance = (
   RowIndicatorComponent: Types.RowIndicatorComponent
-): React.FC<Omit<Types.RowIndicatorProps, "selected" | "onSelect">> => {
+): React.FC<Omit<Types.RowIndicatorProps, 'selected' | 'onSelect'>> => {
   return function RowIndicatorWrapper(props) {
     const dispatch = useDispatch();
     const selected = useSelector((state) =>

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

@@ -1,10 +1,10 @@
-import * as React from "react";
-import { getSelectedDimensions } from "./util";
-import FloatingRect from "./FloatingRect";
-import useSelector from "./use-selector";
+import * as React from 'react';
+import { getSelectedDimensions } from './util';
+import FloatingRect from './FloatingRect';
+import useSelector from './use-selector';
 
 const Selected: React.FC = () => {
-  const selected = useSelector((state) => state.selected);  
+  const selected = useSelector((state) => state.selected);
   const dimensions = useSelector(
     (state) =>
       selected &&

package/src/components/ExcelFile/ExcelFile/Excel/{Spreadsheet.css → Spreadsheet.scss}

@@ -1,12 +1,12 @@
 .Spreadsheet {
-  --background-color: white;
-  --text-color: black;
-  --readonly-text-color: rgba(0, 0, 0, 0.4);
-  --outline-color: #4285f4;
-  --outline-background-color: rgba(160, 195, 255, 0.2);
-  --border-color: hsl(2deg, 0%, 91%);
-  --header-background-color: rgba(0, 0, 0, 0.04);
-  --elevation: 0 2px 5px rgba(0, 0, 0, 0.4);
+  --background-color: var(--drawer-footer-bg);
+  --text-color: var(--text-color);
+  --readonly-text-color: var(--toggle-strip-active);
+  --outline-color: var(--toggle-strip-active);
+  --outline-background-color: var(--overlay-bg);
+  --border-color: var(--toggle-strip-color);
+  --header-background-color: var(--pop-up-background-blur);
+  --elevation: var(--brand-color);
 
   position: relative;
   overflow: visible;
@@ -15,14 +15,6 @@
   display: inline-block;
 }
 
-.Spreadsheet--dark-mode {
-  --background-color: black;
-  --text-color: white;
-  --readonly-text-color: rgba(255, 255, 255, 0.4);
-  --header-background-color: rgba(255, 255, 255, 0.04);
-  --border-color: hsl(2deg, 0%, 19%);
-}
-
 .Spreadsheet__active-cell {
   position: absolute;
   border: 2px solid var(--outline-color);
@@ -39,32 +31,26 @@
   table-layout: fixed;
 }
 
-.Spreadsheet__cell,
-.Spreadsheet__active-cell {
-  cursor: cell;
-}
-
 .Spreadsheet__cell {
   outline: none;
   position: relative;
-
 }
 
-/* .Spreadsheet__active-cell .Selection_dot{
-  background-color:red;
-  height:7px;
-  width:7px;
-  border-radius:50%;
-  position:absolute;
-  right:-3px;
+.Spreadsheet__active-cell .Selection_dot {
+  background-color: var(--elevation);
+  height: 7px;
+  width: 7px;
+  border-radius: 50%;
+  position: absolute;
+  right: -3px;
   z-index: 10;
-  bottom:-3px;
+  bottom: -3px;
   cursor: crosshair;
-} */
+}
 
-/* .Spreadsheet__cell--readonly {
+.Spreadsheet__cell--readonly {
   color: var(--readonly-text-color);
-} */
+}
 
 .Spreadsheet__cell,
 .Spreadsheet__header {
@@ -75,19 +61,17 @@
   text-align: left;
   box-sizing: border-box;
   user-select: none;
-  
 }
 
 .Spreadsheet__header {
   background: var(--header-background-color);
   color: var(--readonly-text-color);
   text-align: center;
-  font: inherit;
 }
 
 .Spreadsheet__header--selected {
-  background: #5f6268;
-  color: #fff;
+  background: var(--brand-color);
+  color: var(--tooltip-text-color);
 }
 
 .Spreadsheet__header,