pixel-react 1.6.9 → 1.7.0

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

@@ -0,0 +1,145 @@
+import { dropdownPositionType } from "../Editor/types";
+export type dynamicObject = {
+    [key: string]: any;
+};
+export type TestDataObject = {
+    _id: string;
+    name: string;
+    actualPath: string;
+    searchKey: string;
+    parentId: string;
+};
+export interface ConditionalDropdownProps {
+    /**
+     * Label for the field
+     */
+    label?: string;
+    /**
+     * Value in the input should stored in this state
+     */
+    hashInputValue?: TestDataObject | dynamicObject;
+    /**
+     * Function storing and updating the inputValue state
+     */
+    setHashInputValue?: (value: dynamicObject | undefined) => void;
+    /**
+     * List of variables
+     */
+    variableList?: dynamicObject[];
+    /**
+     * Place holder for the input field
+     */
+    placeholder?: string;
+    /**
+     * Function to handle input change
+     * @param value
+     * @returns
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Function to handle create variable icon click
+     */
+    onCreateVariableClick?: () => void;
+    /**
+     * Width of the dropdown
+     */
+    dropdownWidth?: string;
+    /**
+     * Name | name of the input field
+     */
+    name?: string;
+    /**
+     * value | input field value
+     */
+    value?: string;
+    /**
+     * variants to set color/style of the input field
+     */
+    variant?: 'default' | 'primary';
+    /**
+     * type to set color/style of the input field
+     */
+    type?: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
+    /**
+     * error | If true, error message will be displayed
+     */
+    error?: boolean;
+    /**
+     * helperText | error, success, warning message to be shown
+     */
+    helperText?: string;
+    /**
+     * to disable the input field
+     */
+    disabled?: boolean;
+    /**
+     * if true, input field will be mandatory
+     */
+    required?: boolean;
+    /**
+     * classnames to style the input field
+     */
+    className?: string;
+    /**
+     * noBorder prop 'true' removes border of input
+     */
+    noBorder?: boolean;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * id to select the input field uniquely
+     */
+    id?: string;
+    /**
+     * if on, suggestion popup will be displayed
+     */
+    autoComplete?: 'on' | 'off';
+    /**
+     *  minimum and maximum values for the number type input field and their functions
+     */
+    minValue?: number;
+    maxValue?: number;
+    /**
+     * background of the input field prop
+     */
+    transparentBackground?: boolean;
+    /**
+     * size for the input field
+     */
+    size?: 'small' | 'medium';
+    /**
+     * isLabelRequired for the input field without label,showing placeholder
+     */
+    isLabelRequired?: boolean;
+    /**
+    * If true, dropdown opens when '#' is entered at the first position.
+    */
+    isHash?: boolean;
+    /**
+     * Options for the dropdown when `isHash` is true.
+     */
+    dataFiles?: dynamicObject[];
+}
+export interface OptionsDropdownProps {
+    /**
+    * Position whether absoloute or relative
+    */
+    position: 'absolute' | 'relative';
+    /**
+     * Dropdown width
+     */
+    width: string;
+    /**
+     * chars entered to search in Input :
+     */
+    filteredOptions?: dynamicObject[];
+    /**
+     * Function to handle click on variable
+     */
+    onSelectVariable: (variable: object) => void;
+    /**
+     * Dropdown postion used for dropdown placement
+     */
+    dropdownPosition?: dropdownPositionType;
+}

package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ConnectingBranch from './ConnectingBranch';
+declare const meta: Meta<typeof ConnectingBranch>;
+export default meta;
+type Story = StoryObj<typeof ConnectingBranch>;
+export declare const Default: Story;

package/lib/components/DatePicker/DatePicker.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import CustomDatePicker from './DatePicker';
+declare const meta: Meta<typeof CustomDatePicker>;
+export default meta;
+type Story = StoryObj<typeof CustomDatePicker>;
+export declare const Default: Story;
+export declare const StartDateFilter: Story;
+export declare const EndDateInput: Story;
+export declare const ScheduleDateInput: Story;

package/lib/components/DownloadClient/type.d.ts

@@ -1,35 +1,27 @@
 export interface DownloadClientProps {
     /**
-     * Title of the popup.
-     */
-    title: string;
+     * Close dialog function to close the modal dialog
+     **/
+    onClose: () => void;
     /**
-     * Description or body text of the popup.
-     */
-    description: string;
+     * distance between modal dialog and parent from top
+     **/
+    top?: string;
     /**
-     * Callback for when the "Cancel" icon is clicked.
-     */
-    onCancel: () => void;
+     * distance between modal dialog and parent from left
+     **/
+    left?: string;
     /**
-     * Callback for when the "Download for Windows" icon is clicked.
-     */
-    onDownloadWindows: () => void;
+     * To be used custom properties for the modal dialog through className
+     **/
+    className?: string;
     /**
-     * Callback for when the "Download for macOS" icon is clicked.
-     */
-    onDownloadMac: () => void;
+     * Description of the dialog box
+     **/
+    description?: string;
     /**
-     * Optional flag to control whether to display icons for download actions instead of buttons.
-     * Defaults to `false` for buttons.
-     */
-    showIcons?: boolean;
-}
-export interface DownloadClientProps {
-    onClose?: () => void;
-    onClickWindows: () => void;
-    onClickLinux: () => void;
-    onClickMac: () => void;
-    top?: string;
-    left?: string;
+     * Download button function
+     **/
+    onClick?: (os: string) => void;
+    optionZIndex?: number;
 }

package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import DragAndDropList from './DragAndDropList';
+declare const meta: Meta<typeof DragAndDropList>;
+type Story = StoryObj<typeof DragAndDropList>;
+export declare const Primary: Story;
+export default meta;

package/lib/components/Drawer/Drawer.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Drawer from './Drawer';
+declare const meta: Meta<typeof Drawer>;
+export default meta;
+type Story = StoryObj<typeof Drawer>;
+export declare const Default: Story;
+export declare const WithoutHeader: Story;
+export declare const WithCustomHeader: Story;
+export declare const WithCustomFooter: Story;
+export declare const WithTertiaryButtons: Story;
+export declare const WithCustomZIndex: Story;
+export declare const Controlled: Story;

package/lib/components/EditTextField/EditTextField.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import EditTextField from './EditTextField';
+import '../../assets/styles/_colors.scss';
+import './EditTextField.scss';
+declare const meta: Meta<typeof EditTextField>;
+type Story = StoryObj<typeof EditTextField>;
+export declare const textFieldWithLabel: Story;
+export declare const textFieldWithOutLabel: Story;
+export declare const openTextField: Story;
+export default meta;

package/lib/components/Editor/Editor.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { EditorProps } from './types';
+declare const meta: Meta<EditorProps>;
+export default meta;
+type Story = StoryObj<EditorProps>;
+export declare const Default: Story;

package/lib/components/Excel/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './ContextMenu.scss';
+declare const ContextMenu: React.FC<ContextMenuProps>;
+export default ContextMenu;

package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts

@@ -40,9 +40,16 @@ export declare const DELETE_ROW = "DELETE_ROW";
 export declare const DELETE_COLUMN = "DELETE_COLUMN";
 export declare const SET_ROW_HEIGHT = "SET_ROW_HEIGHT";
 export declare const SET_COLUMN_POSITION = "SET_COLUMN_POSITION";
+export declare const SET_AUTO_FILL = "SET_AUTO_FILL";
 export type BaseAction<T extends string> = {
     type: T;
 };
+export type SetAutoFill = BaseAction<typeof SET_AUTO_FILL> & {
+    payload: {
+        autofill: boolean;
+    };
+};
+export declare function autoFill(autofill: boolean): SetAutoFill;
 export type SetRowHeight = BaseAction<typeof SET_ROW_HEIGHT> & {
     payload: {
         row: number;
@@ -244,4 +251,4 @@ export type ClearAction = BaseAction<typeof CLEAR>;
 export declare function clear(): ClearAction;
 export type BlurAction = BaseAction<typeof BLUR>;
 export declare function blur(): BlurAction;
-export type Action = SetDataAction | SetCreateFormulaParserAction | SelectEntireRowAction | SelectEntireColumnAction | SelectEntireWorksheetAction | SetSelectionAction | SelectAction | ActivateAction | SetCellDataAction | SetCellDimensionsAction | PasteAction | KeyDownAction | DragStartAction | DragEndAction | CommitAction | CopyAction | CutAction | EditAction | ViewAction | ClearAction | UnderlineTypeStyle | FontSize | FontFamily | TextAlignType | BorderType | ItalicStyle | BoldStyle | ColorStyle | BackgroundStyle | FormatePainterStyle | AddRowTop | AddColumnLeft | DeleteRow | DeleteColumn | SetRowHeight | SetColumnPosition | BlurAction;
+export type Action = SetDataAction | SetCreateFormulaParserAction | SelectEntireRowAction | SelectEntireColumnAction | SelectEntireWorksheetAction | SetSelectionAction | SelectAction | ActivateAction | SetCellDataAction | SetCellDimensionsAction | PasteAction | KeyDownAction | DragStartAction | DragEndAction | CommitAction | CopyAction | CutAction | EditAction | ViewAction | ClearAction | UnderlineTypeStyle | FontSize | FontFamily | TextAlignType | BorderType | ItalicStyle | BoldStyle | ColorStyle | BackgroundStyle | FormatePainterStyle | AddRowTop | AddColumnLeft | DeleteRow | DeleteColumn | SetRowHeight | SetColumnPosition | SetAutoFill | BlurAction;

package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts

@@ -14,6 +14,8 @@ export declare function isValidHexColor(color: string): boolean;
 export declare function applyColorToCells(currentData: Matrix.Matrix<Types.CellBase<any>>, selectedRange: PointRange | null, color: string): Matrix.Matrix<Types.CellBase<any>>;
 export declare function applyBackgroundColorToCells(currentData: Matrix.Matrix<Types.CellBase<any>>, selectedRange: PointRange | null, backgroundColor: string): Matrix.Matrix<Types.CellBase<any>>;
 export declare function applyFormatePainter(currentData: Matrix.Matrix<Types.CellBase<any>>, activePoint: Point.Point | null): React.CSSProperties | undefined;
+export declare function dragEndFormatePainter(currentData: Matrix.Matrix<Types.CellBase<any>>, selectedRange: PointRange | null, formattedStyle: Types.formattedStyle): Matrix.Matrix<Types.CellBase<any>>;
+export declare function dragEndAutoFill(currentData: Matrix.Matrix<Types.CellBase<any>>, selectedRange: PointRange | null, cellValue: Types.CellBase, activeCell: Point.Point | null): Matrix.Matrix<Types.CellBase<any>>;
 export declare function edit(state: Types.StoreState): Types.StoreState;
 export declare function clear(state: Types.StoreState): Types.StoreState;
 export declare function blur(state: Types.StoreState): Types.StoreState;

package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts

@@ -47,19 +47,26 @@ export type StoreState<Cell extends CellBase = CellBase> = {
     copied: PointRange | null;
     hasPasted: boolean;
     cut: boolean;
+    autoFill: {
+        open: boolean;
+        cellValue: Cell;
+    };
     active: Point | null;
     mode: Mode;
-    rowDimensions: Record<number, Pick<Dimensions, 'height' | 'top'> | undefined>;
-    columnDimensions: Record<number, Pick<Dimensions, 'width' | 'left'> | undefined>;
+    rowDimensions: rowDimensions;
+    columnDimensions: columnDimensions;
     dragging: boolean;
     lastChanged: Point | null;
     lastCommit: null | CellChange<Cell>[];
     selectedRow: null | number;
     selectedColumn: null | number;
-    formattedStyle: {
-        open: boolean;
-        style: undefined | React.CSSProperties;
-    };
+    formattedStyle: formattedStyle;
+};
+export type rowDimensions = Record<number, Pick<Dimensions, 'height' | 'top'> | undefined>;
+export type columnDimensions = Record<number, Pick<Dimensions, 'width' | 'left'> | undefined>;
+export type formattedStyle = {
+    open: boolean;
+    style: undefined | React.CSSProperties;
 };
 export type CellChange<Cell extends CellBase = CellBase> = {
     prevCell: Cell | null;

package/lib/components/Excel/ExcelFile.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ExcelFile from './ExcelFile/ExcelFile';
+declare const meta: Meta<typeof ExcelFile>;
+type Story = StoryObj<typeof ExcelFile>;
+export declare const Default: Story;
+export default meta;

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

@@ -0,0 +1,14 @@
+import { CellBase } from "./ExcelFile/Excel";
+interface ChangeExcelStylesOptions {
+    sheetName: string;
+    styleType: string;
+    value: string;
+    selectedCell: {
+        row: number;
+        column: number;
+    }[];
+}
+export default function ChangeExcelStyles(setWorksheetsData: React.Dispatch<React.SetStateAction<{
+    [key: string]: Matrix<CellBase>;
+}>>, options: ChangeExcelStylesOptions): void;
+export {};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import './ColorBarSelector.scss';
+interface ColorBarSelectorProps {
+    getColorValue: (color: string) => void;
+    disabled: boolean;
+}
+declare const ColorBarSelector: React.FC<ColorBarSelectorProps>;
+export default ColorBarSelector;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import './ContextMenu.scss';
+declare const ContextMenu: React.FC<ContextMenuProps>;
+export default ContextMenu;

package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as Types from './types';
+type Props = {
+    DataEditor: Types.DataEditorComponent;
+};
+declare const ActiveCell: React.FC<Props>;
+export default ActiveCell;

package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import * as Types from './types';
+export declare const Cell: React.FC<Types.CellComponentProps>;
+export declare const enhance: (CellComponent: React.ComponentType<Types.CellComponentProps>) => React.FC<Omit<Types.CellComponentProps, "selected" | "active" | "copied" | "dragging" | "mode" | "data" | "select" | "activate" | "setCellDimensions">>;

package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import * as Types from './types';
+declare const ColumnIndicator: Types.ColumnIndicatorComponent;
+export default ColumnIndicator;
+export declare const enhance: (ColumnIndicatorComponent: Types.ColumnIndicatorComponent) => React.FC<Omit<Types.ColumnIndicatorProps, "selected" | "onSelect">>;

package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const Copied: React.FC;
+export default Copied;

package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import * as Types from './types';
+declare const CornerIndicator: Types.CornerIndicatorComponent;
+export default CornerIndicator;
+export declare const enhance: (CornerIndicatorComponent: Types.CornerIndicatorComponent) => React.FC<Omit<Types.CornerIndicatorProps, "selected" | "onSelect">>;

package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import * as Types from './types';
+/** The default Spreadsheet DataEditor component */
+declare const DataEditor: React.FC<Types.DataEditorProps>;
+export default DataEditor;

package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import * as Types from './types';
+export declare const TRUE_TEXT = "TRUE";
+export declare const FALSE_TEXT = "FALSE";
+/** The default Spreadsheet DataViewer component */
+declare const DataViewer: <Cell extends Types.CellBase<Value>, Value>({ cell, evaluatedCell, }: Types.DataViewerProps<Cell>) => React.ReactElement;
+export default DataViewer;
+export declare function convertBooleanToText(value: boolean): string;

package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import * as Types from './types';
+export type Props = {
+    variant?: string;
+    dimensions?: Types.Dimensions | null | undefined;
+    hidden?: boolean;
+    dragging?: boolean;
+};
+declare const FloatingRect: React.FC<Props>;
+export default FloatingRect;

package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts

@@ -0,0 +1,3 @@
+import * as Types from './types';
+declare const HeaderRow: Types.HeaderRowComponent;
+export default HeaderRow;

package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts

@@ -0,0 +1,3 @@
+import * as Types from './types';
+declare const Row: Types.RowComponent;
+export default Row;

package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import * as Types from './types';
+declare const RowIndicator: Types.RowIndicatorComponent;
+export default RowIndicator;
+export declare const enhance: (RowIndicatorComponent: Types.RowIndicatorComponent) => React.FC<Omit<Types.RowIndicatorProps, "selected" | "onSelect">>;

package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const Selected: React.FC;
+export default Selected;

package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import * as Types from './types';
+import * as Matrix from './matrix';
+import * as Point from './point';
+import { Selection } from './selection';
+import './Spreadsheet.scss';
+/** The Spreadsheet component props */
+export type Props<CellType extends Types.CellBase> = {
+    /** The spreadsheet's data */
+    data: Matrix.Matrix<CellType>;
+    /** Class name to be added to the spreadsheet's root element */
+    className?: string;
+    /**
+     * Use dark colors that complement dark mode
+     * @defaultValue `false`
+     */
+    /**
+     * Function used to create the formula parser (instance of
+     * "fast-formula-parser") used by the Spreadsheet by getting the spreadsheet's
+     * data.
+     * @defaultValue function which creates a formula parser bound to the
+     * Spreadsheet's data.
+     * @see `createFormulaParser`
+     * @see https://www.npmjs.com/package/fast-formula-parser
+     */
+    createFormulaParser?: Types.CreateFormulaParser;
+    /**
+     * Labels to use in column indicators.
+     * @defaultValue alphabetical labels.
+     */
+    columnLabels?: string[];
+    /**
+     * Labels to use in row indicators.
+     * @defaultValue row index labels.
+     */
+    rowLabels?: string[];
+    /**
+     * If set to true, hides the row indicators of the spreadsheet.
+     * @defaultValue `false`.
+     */
+    hideRowIndicators?: boolean;
+    /**
+     * If set to true, hides the column indicators of the spreadsheet.
+     * @defaultValue `false`.
+     */
+    hideColumnIndicators?: boolean;
+    /** The selected cells in the worksheet. */
+    selected?: Selection;
+    /** Component rendered above each column. */
+    ColumnIndicator?: Types.ColumnIndicatorComponent;
+    /** Component rendered in the corner of row and column indicators. */
+    CornerIndicator?: Types.CornerIndicatorComponent;
+    /** Component rendered next to each row. */
+    RowIndicator?: Types.RowIndicatorComponent;
+    /** The Spreadsheet's table component. */
+    Table?: Types.TableComponent;
+    /** The Spreadsheet's row component. */
+    Row?: Types.RowComponent;
+    /** The spreadsheet's header row component */
+    HeaderRow?: Types.HeaderRowComponent;
+    /** The Spreadsheet's cell component. */
+    Cell?: Types.CellComponent<CellType>;
+    /** Component rendered for cells in view mode. */
+    DataViewer?: Types.DataViewerComponent<CellType>;
+    /** Component rendered for cells in edit mode. */
+    DataEditor?: Types.DataEditorComponent<CellType>;
+    /** Callback called on key down inside the spreadsheet. */
+    onKeyDown?: (event: React.KeyboardEvent) => void;
+    /** Callback called when the Spreadsheet's selection changes. */
+    onSelect?: (selected: Selection) => void;
+    /** Callback called when Spreadsheet's active cell changes. */
+    onActivate?: (active: Point.Point) => void;
+    /** Callback called when the Spreadsheet's evaluated data changes. */
+    onEvaluatedDataChange?: (data: Matrix.Matrix<CellType>) => void;
+};
+/**
+ * The Spreadsheet component
+ */
+declare const Spreadsheet: <CellType extends Types.CellBase>(props: Props<CellType>) => React.ReactElement;
+export default Spreadsheet;

package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts

@@ -0,0 +1,3 @@
+import * as Types from './types';
+declare const Table: Types.TableComponent;
+export default Table;