pixel-react 1.5.2 → 1.5.4

package/src/components/Excel/Types.ts

@@ -1,174 +1,174 @@
-interface ExcelFileProps {
-  /** The Excel data containing sheets and their content */
-  excelData: {
-    sheets: WorkSheet[];
-  };
-
-  /** Optional: Provide context menu options for actions like right-click */
-  contextOption?: {
-    name: string;
-    title: React.ReactNode;
-    action: () => void;
-  }[];
-
-  /** Controls whether the toolbar is shown, disabled, or hidden */
-  toolbar?: 'show' | 'disable' | 'hide';
-
-  /** Callback function to save the Excel data */
-  onSave?: (excelData?: any) => void;
-}
-
-interface WorkSheet {
-  /** The name of the worksheet */
-  sheetName: string;
-
-  /** 2D array of worksheet data (cells) */
-  data: WorkData[][];
-}
-
-interface WorkData {
-  /** Value of the cell */
-  value: string;
-
-  /** Styling options for the cell */
-  style: React.CSSProperties;
-  type?: boolean;
-}
-
-/** A generic type to represent a 2D matrix of any type (or undefined values) */
-type Matrix<T> = (T | undefined)[][];
-
-interface ContextAction {
-  /** Name of the right-click option */
-  name: string;
-
-  /** Display title of the right-click menu option */
-  title: React.ReactNode;
-
-  /** The action that occurs when the right-click menu option is selected */
-  action: () => void;
-}
-
-interface ContextOption {
-  /** Type of the context option ('cell', 'row', 'column') */
-  name: string;
-
-  /** Array of context menu actions for right-click options */
-  value: ContextAction[];
-}
-
-interface ContextMenuState {
-  /** Whether the context menu is visible */
-  visible: boolean;
-
-  /** X-coordinate position for the context menu */
-  x: number;
-
-  /** Y-coordinate position for the context menu */
-  y: number;
-
-  /** Type of the context menu ('cell', 'row', 'column', or 'sheet_options') */
-  type: 'cell' | 'row' | 'column' | 'sheet_options' | null;
-}
-
-interface SelectedCell {
-  /** The row index of the selected cell */
-  row: number;
-
-  /** The column index of the selected cell */
-  column: number;
-}
-
-interface ColorContainer {
-  /** The color used for the text (hex code) */
-  color: string;
-
-  /** The background color used for the cell (hex code) */
-  backgroundColor: string;
-
-  /** The border color used for the cell (hex code) */
-  borderColor: string;
-}
-
-interface SelectedValue {
-  /** The value inside the selected cell */
-  value: string;
-
-  /** The row index of the selected cell */
-  row: number;
-
-  /** The column index of the selected cell */
-  column: number;
-
-  /** The column represented as an alphabetical string ('A', 'B') */
-  alphaCol: string;
-
-  /** The style applied to the selected cell */
-  style: React.CSSProperties;
-
-  /** The sheet name where the cell is located */
-  sheet: string;
-}
-interface ExcelSheetBarProps {
-  /** Object containing details about the file, including sheet names */
-  fileDetails: {
-    sheetNames: string[];
-  };
-
-  /** Function to handle sheet change events */
-  handleSheetChange: (name: string, index: number) => void;
-
-  /** Function to open the context menu on a sheet */
-  contextMenu: (
-    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
-    name: string,
-    index: number
-  ) => void;
-
-  /** Function to add a new sheet */
-  addSheet: () => void;
-
-  /** Object representing the currently selected sheet */
-  selectedSheet: {
-    name: string;
-    index: number;
-  };
-  /** Function to update the context Type */
-  contextSelect: (event: React.MouseEvent) => void;
-}
-
-interface ContextMenuProps {
-  /** Custom context menu options */
-  customContext: {
-    name: string;
-    title: React.ReactNode;
-    action: () => void;
-  }[];
-
-  /** Object that holds different context actions based on the type (cell, row, column, sheet_options) */
-  contextAction: {
-    /** Function to add a row */
-    addRow: () => void;
-
-    /** Function to delete a row */
-    deleteRow: () => void;
-
-    /** Function to add a column */
-    addColumn: () => void;
-
-    /** Function to delete a column */
-    deleteColumn: () => void;
-
-    /** Function to add a new sheet */
-    addSheet: () => void;
-
-    /** Function to delete a sheet */
-    deleteSheet: () => void;
-  };
-
-  /** The state of the context menu, controlling its visibility and position */
-  contextData: ContextMenuState;
-
-  /** Function to update the context menu state */
-  setContextData: React.Dispatch<React.SetStateAction<ContextMenuState>>;
-}
+interface ExcelFileProps {
+  /** The Excel data containing sheets and their content */
+  excelData: {
+    sheets: WorkSheet[];
+  };
+
+  /** Optional: Provide context menu options for actions like right-click */
+  contextOption?: {
+    name: string;
+    title: React.ReactNode;
+    action: () => void;
+  }[];
+
+  /** Controls whether the toolbar is shown, disabled, or hidden */
+  toolbar?: 'show' | 'disable' | 'hide';
+
+  /** Callback function to save the Excel data */
+  onSave?: (excelData?: any) => void;
+}
+
+interface WorkSheet {
+  /** The name of the worksheet */
+  sheetName: string;
+
+  /** 2D array of worksheet data (cells) */
+  data: WorkData[][];
+}
+
+interface WorkData {
+  /** Value of the cell */
+  value: string;
+
+  /** Styling options for the cell */
+  style: React.CSSProperties;
+  type?: boolean;
+}
+
+/** A generic type to represent a 2D matrix of any type (or undefined values) */
+type Matrix<T> = (T | undefined)[][];
+
+interface ContextAction {
+  /** Name of the right-click option */
+  name: string;
+
+  /** Display title of the right-click menu option */
+  title: React.ReactNode;
+
+  /** The action that occurs when the right-click menu option is selected */
+  action: () => void;
+}
+
+interface ContextOption {
+  /** Type of the context option ('cell', 'row', 'column') */
+  name: string;
+
+  /** Array of context menu actions for right-click options */
+  value: ContextAction[];
+}
+
+interface ContextMenuState {
+  /** Whether the context menu is visible */
+  visible: boolean;
+
+  /** X-coordinate position for the context menu */
+  x: number;
+
+  /** Y-coordinate position for the context menu */
+  y: number;
+
+  /** Type of the context menu ('cell', 'row', 'column', or 'sheet_options') */
+  type: 'cell' | 'row' | 'column' | 'sheet_options' | null;
+}
+
+interface SelectedCell {
+  /** The row index of the selected cell */
+  row: number;
+
+  /** The column index of the selected cell */
+  column: number;
+}
+
+interface ColorContainer {
+  /** The color used for the text (hex code) */
+  color: string;
+
+  /** The background color used for the cell (hex code) */
+  backgroundColor: string;
+
+  /** The border color used for the cell (hex code) */
+  borderColor: string;
+}
+
+interface SelectedValue {
+  /** The value inside the selected cell */
+  value: string;
+
+  /** The row index of the selected cell */
+  row: number;
+
+  /** The column index of the selected cell */
+  column: number;
+
+  /** The column represented as an alphabetical string ('A', 'B') */
+  alphaCol: string;
+
+  /** The style applied to the selected cell */
+  style: React.CSSProperties;
+
+  /** The sheet name where the cell is located */
+  sheet: string;
+}
+interface ExcelSheetBarProps {
+  /** Object containing details about the file, including sheet names */
+  fileDetails: {
+    sheetNames: string[];
+  };
+
+  /** Function to handle sheet change events */
+  handleSheetChange: (name: string, index: number) => void;
+
+  /** Function to open the context menu on a sheet */
+  contextMenu: (
+    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    name: string,
+    index: number
+  ) => void;
+
+  /** Function to add a new sheet */
+  addSheet: () => void;
+
+  /** Object representing the currently selected sheet */
+  selectedSheet: {
+    name: string;
+    index: number;
+  };
+  /** Function to update the context Type */
+  contextSelect: (event: React.MouseEvent) => void;
+}
+
+interface ContextMenuProps {
+  /** Custom context menu options */
+  customContext: {
+    name: string;
+    title: React.ReactNode;
+    action: () => void;
+  }[];
+
+  /** Object that holds different context actions based on the type (cell, row, column, sheet_options) */
+  contextAction: {
+    /** Function to add a row */
+    addRow: () => void;
+
+    /** Function to delete a row */
+    deleteRow: () => void;
+
+    /** Function to add a column */
+    addColumn: () => void;
+
+    /** Function to delete a column */
+    deleteColumn: () => void;
+
+    /** Function to add a new sheet */
+    addSheet: () => void;
+
+    /** Function to delete a sheet */
+    deleteSheet: () => void;
+  };
+
+  /** The state of the context menu, controlling its visibility and position */
+  contextData: ContextMenuState;
+
+  /** Function to update the context menu state */
+  setContextData: React.Dispatch<React.SetStateAction<ContextMenuState>>;
+}

package/src/components/Excel/index.ts

@@ -1 +1 @@
-export { default } from './ExcelFile/ExcelFile';
+export { default } from './ExcelFile/ExcelFile';

package/src/components/ExpandableMenu/ExpandableMenu.scss

@@ -1,110 +1,110 @@
-@use '../../assets/styles/fonts';
-
-.ff-expandable-chip-menu {
-  display: inline-flex;
-  gap: 16px;
-  align-items: center;
-  border-radius: 16px;
-  cursor: pointer;
-  overflow: hidden;
-  width: auto;
-  padding: 4px 8px;
-  transition: all 0.3s ease;
-
-  &--primary {
-    border: 0.5px solid var(--brand-color);
-    background-color: var(--expandable-menu-default-bg);
-  }
-
-  .ff-label-chip {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 4px;
-    white-space: nowrap;
-    padding: 2px 0;
-
-    .arrow-icon {
-      height: 14px;
-      width: 14px;
-      display: grid;
-      place-items: center;
-    }
-
-    &--primary {
-      color: var(--brand-color);
-    }
-  }
-
-  &--disabled {
-    opacity: 0.5;
-    &:disabled {
-      pointer-events: none;
-    }
-  }
-
-  &--medium {
-    @extend .fontSm;
-    line-height: 18px;
-  }
-
-  .ff-sub-chips {
-    display: flex;
-    gap: 8px;
-    max-width: 500px;
-    overflow-x: auto;
-    -ms-overflow-style: none;
-    &::-webkit-scrollbar {
-      display: none;
-    }
-    transform: scaleX(0);
-    transform-origin: left;
-    transition: transform 0.3s ease, opacity 0.3s ease;
-    opacity: 0;
-  }
-
-  &.expanded .ff-sub-chips {
-    transform: scaleX(1);
-    opacity: 1;
-  }
-
-  .ff-sub-chip {
-    padding: 2px 8px;
-    border-radius: 12px;
-    white-space: nowrap;
-    transition: background-color 0.3s ease, color 0.3s ease;
-    opacity: 0;
-    transform: translateX(-10px);
-    animation: fadeIn 0.5s ease forwards;
-
-    &--primary {
-      background: var(--expandable-menu-option-bg);
-      color: var(--brand-color);
-
-      &:hover,
-      &.selected {
-        background-color: var(--brand-color);
-        color: var(--expandable-menu-default-bg);
-      }
-    }
-    &--medium {
-      @extend .fontSm;
-      line-height: 18px;
-    }
-  }
-
-  @keyframes fadeIn {
-    0% {
-      opacity: 0;
-      transform: translateX(-10px);
-    }
-    100% {
-      opacity: 1;
-      transform: translateX(0);
-    }
-  }
-
-  &.expanded .ff-sub-chip {
-    animation: fadeIn 0.5s ease forwards;
-  }
-}
+@use '../../assets/styles/fonts';
+
+.ff-expandable-chip-menu {
+  display: inline-flex;
+  gap: 16px;
+  align-items: center;
+  border-radius: 16px;
+  cursor: pointer;
+  overflow: hidden;
+  width: auto;
+  padding: 4px 8px;
+  transition: all 0.3s ease;
+
+  &--primary {
+    border: 0.5px solid var(--brand-color);
+    background-color: var(--expandable-menu-default-bg);
+  }
+
+  .ff-label-chip {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 4px;
+    white-space: nowrap;
+    padding: 2px 0;
+
+    .arrow-icon {
+      height: 14px;
+      width: 14px;
+      display: grid;
+      place-items: center;
+    }
+
+    &--primary {
+      color: var(--brand-color);
+    }
+  }
+
+  &--disabled {
+    opacity: 0.5;
+    &:disabled {
+      pointer-events: none;
+    }
+  }
+
+  &--medium {
+    @extend .fontSm;
+    line-height: 18px;
+  }
+
+  .ff-sub-chips {
+    display: flex;
+    gap: 8px;
+    max-width: 500px;
+    overflow-x: auto;
+    -ms-overflow-style: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: transform 0.3s ease, opacity 0.3s ease;
+    opacity: 0;
+  }
+
+  &.expanded .ff-sub-chips {
+    transform: scaleX(1);
+    opacity: 1;
+  }
+
+  .ff-sub-chip {
+    padding: 2px 8px;
+    border-radius: 12px;
+    white-space: nowrap;
+    transition: background-color 0.3s ease, color 0.3s ease;
+    opacity: 0;
+    transform: translateX(-10px);
+    animation: fadeIn 0.5s ease forwards;
+
+    &--primary {
+      background: var(--expandable-menu-option-bg);
+      color: var(--brand-color);
+
+      &:hover,
+      &.selected {
+        background-color: var(--brand-color);
+        color: var(--expandable-menu-default-bg);
+      }
+    }
+    &--medium {
+      @extend .fontSm;
+      line-height: 18px;
+    }
+  }
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+      transform: translateX(-10px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  &.expanded .ff-sub-chip {
+    animation: fadeIn 0.5s ease forwards;
+  }
+}