pixel-react 1.2.8 → 1.2.9

package/lib/components/ExcelFile/Types.d.ts

@@ -0,0 +1,176 @@
+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: CellStyle;
+    type?: boolean;
+}
+interface CellStyle {
+    /** Font name for the cell text */
+    name?: string;
+    /** Font size of the cell text */
+    size?: number;
+    position?: string;
+    /** Whether the text is bold */
+    bold?: boolean;
+    fontSize?: string;
+    fontFamily?: string;
+    /** Whether the text is italicized */
+    italic?: boolean;
+    /** Text color in the cell (hex code) */
+    color?: string;
+    /** Background color of the cell (hex code) */
+    backgroundColor?: string;
+    /** Border color of the cell (hex code) */
+    borderColor?: string;
+    /** Border styles for each side of the cell */
+    border?: {
+        /** Border style for the top side of the cell */
+        top: string;
+        /** Border style for the bottom side of the cell */
+        bottom: string;
+        /** Border style for the left side of the cell */
+        left: string;
+        /** Border style for the right side of the cell */
+        right: string;
+    };
+    /** Text alignment and wrapping properties */
+    alignment?: {
+        /** Horizontal text alignment ('left', 'center', or 'right') */
+        horizontal: string;
+        /** Vertical text alignment ('top', 'middle', or 'bottom') */
+        vertical: string;
+        /** Whether the text is wrapped within the cell */
+        wrapText: 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: CellStyle;
+    /** The sheet name where the cell is located */
+    sheet: string;
+}
+interface ExcelToolBarProps {
+    /** use this to hide/show/disable the toolbar */
+    toolbar?: 'show' | 'disable' | 'hide';
+    /** function to apply styles */
+    applyStyle: (styleType: string, value: any) => void;
+    /** function to trigger format painter */
+    formatePaint: () => void;
+}
+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/lib/components/ExcelFile/index.d.ts

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

package/lib/components/InputWithDropdown/InputWithDropdown.d.ts

@@ -1,4 +1,4 @@
 import './InputWithDropdown.scss';
 import { InputWithDropdownProps } from './types';
-declare const InputWithDropdown: ({ name, label, value, disabled, required, placeholder, error, helperText, optionsList, selectedOption, onDropdownChangeHandler, onInputChangeHandler, onInputBlurHandler, optionsRequired, }: InputWithDropdownProps) => import("react/jsx-runtime").JSX.Element;
+declare const InputWithDropdown: ({ name, label, value, disabled, required, placeholder, error, helperText, optionsList, selectedOption, onDropdownChangeHandler, onInputChangeHandler, onInputBlurHandler, optionsRequired, dropdownPosition, type, }: InputWithDropdownProps) => import("react/jsx-runtime").JSX.Element;
 export default InputWithDropdown;

package/lib/components/InputWithDropdown/types.d.ts

@@ -15,7 +15,8 @@ export interface InputWithDropdownProps {
     /**
      * value | input field value
      */
-    value?: number;
+    value?: string | number;
+    type?: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
     /**
      * variants to set color/style of the input field
      */
@@ -85,4 +86,5 @@ export interface InputWithDropdownProps {
      * optionsRequired:false prop removes options from dropdown & shows static label only
      */
     optionsRequired?: boolean;
+    dropdownPosition?: 'left' | 'right';
 }

package/lib/components/Select/Select.d.ts

@@ -1,4 +1,5 @@
-import { SelectProps } from './types';
+import { FC } from 'react';
 import './Select.scss';
-declare const Select: ({ label, showLabel, optionsList, selectedOption, onChange, errorMsg, className, optionZIndex, disabled, borderRadius, showBorder, required, optionsRequired, selectedOptionColor, labelAccessor, valueAccessor, }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+import { SelectProps } from './types';
+declare const Select: FC<SelectProps>;
 export default Select;

package/lib/components/Select/components/Dropdown.d.ts

@@ -0,0 +1,5 @@
+import { type FC } from 'react';
+import { DropdownProps } from './types';
+import './Dropdown.scss';
+declare const Dropdown: FC<DropdownProps>;
+export default Dropdown;

package/lib/components/Select/components/types.d.ts

@@ -0,0 +1,18 @@
+import { DrowdownPosition, Option } from '../types';
+export interface DropdownProps {
+    options: Option[];
+    dropdownPosition: DrowdownPosition;
+    optionZIndex: number;
+    labelAccessor?: string;
+    valueAccessor?: string;
+    onSelectBlur: () => void;
+    onSelectOptionSelector: (option: Option) => void;
+    inputRef?: React.RefObject<HTMLInputElement>;
+    selectArrowRef?: React.RefObject<HTMLDivElement>;
+}
+export declare const dropdownDefaultCSSData: {
+    margin: number;
+    optionHeight: number;
+    selectInputHeight: number;
+    dropDownWrapperPadding: number;
+};

package/lib/components/Select/types.d.ts

@@ -15,18 +15,11 @@ export interface SelectProps {
      * optionsRequired:false prop removes options from dropdown & shows static label only
      */
     optionsRequired?: boolean;
-    /**
-     * selectedOptionColor prop provides the custom color for the selected option
-     */
     selectedOptionColor?: string;
-    /**
-     * Label accessor
-     */
     labelAccessor?: string;
-    /**
-     * Value accessor
-     */
     valueAccessor?: string;
+    height?: number;
+    width?: number;
 }
 export interface DrowdownPosition {
     positionX: number;
@@ -43,39 +36,6 @@ export interface SelectState {
     option: string;
     dropdownPosition: DrowdownPosition;
 }
-export type SelectAction = {
-    type: 'FOCUS_INPUT';
-} | {
-    type: 'BLUR_INPUT';
-    payload: {
-        optionsList: Option[];
-        option: Option['value'];
-    };
-} | {
-    type: 'MOUSE_ENTER';
-} | {
-    type: 'MOUSE_LEAVE';
-} | {
-    type: 'UPDATE_DROPDOWN_POSITION';
-    payload: {
-        positionX: number;
-        positionY: number;
-        width: number;
-        fromBottom: number;
-    };
-} | {
-    type: 'UPDATE_OPTION';
-    payload: string;
-} | {
-    type: 'UPDATE_OPTION_LIST';
-    payload: Option[];
-} | {
-    type: 'SHOW_ERROR';
-    payload: {
-        optionsList: Option[];
-        option: Option['value'];
-    };
-};
 type OptionValue = any;
 export interface Option {
     [key: string]: OptionValue;

package/lib/index.d.ts

@@ -638,25 +638,18 @@ interface SelectProps$1 {
      * optionsRequired:false prop removes options from dropdown & shows static label only
      */
     optionsRequired?: boolean;
-    /**
-     * selectedOptionColor prop provides the custom color for the selected option
-     */
     selectedOptionColor?: string;
-    /**
-     * Label accessor
-     */
     labelAccessor?: string;
-    /**
-     * Value accessor
-     */
     valueAccessor?: string;
+    height?: number;
+    width?: number;
 }
 type OptionValue = any;
 interface Option$2 {
     [key: string]: OptionValue;
 }
 
-declare const Select: ({ label, showLabel, optionsList, selectedOption, onChange, errorMsg, className, optionZIndex, disabled, borderRadius, showBorder, required, optionsRequired, selectedOptionColor, labelAccessor, valueAccessor, }: SelectProps$1) => react_jsx_runtime.JSX.Element;
+declare const Select: FC<SelectProps$1>;
 
 interface TextareaProps {
     /**
@@ -1177,7 +1170,8 @@ interface InputWithDropdownProps {
     /**
      * value | input field value
      */
-    value?: number;
+    value?: string | number;
+    type?: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
     /**
      * variants to set color/style of the input field
      */
@@ -1247,9 +1241,10 @@ interface InputWithDropdownProps {
      * optionsRequired:false prop removes options from dropdown & shows static label only
      */
     optionsRequired?: boolean;
+    dropdownPosition?: 'left' | 'right';
 }
 
-declare const InputWithDropdown: ({ name, label, value, disabled, required, placeholder, error, helperText, optionsList, selectedOption, onDropdownChangeHandler, onInputChangeHandler, onInputBlurHandler, optionsRequired, }: InputWithDropdownProps) => react_jsx_runtime.JSX.Element;
+declare const InputWithDropdown: ({ name, label, value, disabled, required, placeholder, error, helperText, optionsList, selectedOption, onDropdownChangeHandler, onInputChangeHandler, onInputBlurHandler, optionsRequired, dropdownPosition, type, }: InputWithDropdownProps) => react_jsx_runtime.JSX.Element;
 
 declare const RadioButton: React__default.FC<RadioButtonProps>;