pixel-react 1.6.9 → 1.7.0

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

@@ -0,0 +1,178 @@
+import * as React from 'react';
+import FormulaParser from 'fast-formula-parser';
+import { Point } from './point';
+import { Selection } from './selection';
+import { Model } from './engine';
+import { PointRange } from './point-range';
+import { Matrix } from './matrix';
+/** The base type of cell data in Spreadsheet */
+export type CellBase<Value = any> = {
+    /** Whether the cell should not be editable */
+    readOnly?: boolean;
+    /** Class to be given for the cell element */
+    className?: string;
+    /** The value of the cell */
+    value: Value;
+    style?: React.CSSProperties | undefined;
+    type?: boolean;
+    /** Custom component to render when the cell is edited, if not defined would default to the component defined for the Spreadsheet */
+    DataEditor?: DataEditorComponent<CellBase<Value>>;
+    /** Custom component to render when the cell is viewed, if not defined would default to the component defined for the Spreadsheet */
+    DataViewer?: DataViewerComponent<CellBase<Value>>;
+};
+/**
+ * A cell with it's coordinates
+ * @deprecated the component does not use cell descriptors anymore. Instead it passes cell point and cell value explicitly.
+ */
+export type CellDescriptor<Cell extends CellBase> = {
+    /** The cell's data */
+    data: Cell | undefined;
+} & Point;
+/** The spreadsheet's write mode */
+export type Mode = 'view' | 'edit';
+/** Dimensions of an element */
+export type Dimensions = {
+    /** The element's width in pixels */
+    width: number;
+    /** The element's height in pixels */
+    height: number;
+    /** The distance of the element from it's container top border in pixels */
+    top: number;
+    /** The distance of the element from it's container left border in pixels */
+    left: number;
+};
+export type StoreState<Cell extends CellBase = CellBase> = {
+    model: Model<Cell>;
+    selected: Selection;
+    copied: PointRange | null;
+    hasPasted: boolean;
+    cut: boolean;
+    active: Point | null;
+    mode: Mode;
+    rowDimensions: Record<number, Pick<Dimensions, 'height' | 'top'> | undefined>;
+    columnDimensions: Record<number, Pick<Dimensions, 'width' | 'left'> | undefined>;
+    dragging: boolean;
+    lastChanged: Point | null;
+    lastCommit: null | CellChange<Cell>[];
+};
+export type CellChange<Cell extends CellBase = CellBase> = {
+    prevCell: Cell | null;
+    nextCell: Cell | null;
+};
+/** Type of Spreadsheet Cell component props */
+export type CellComponentProps<Cell extends CellBase = CellBase> = {
+    /** The row of the cell */
+    row: number;
+    /** The column of the cell */
+    column: number;
+    /** The DataViewer component to be used by the cell */
+    DataViewer: DataViewerComponent<Cell>;
+    /** Whether the cell is selected */
+    selected: boolean;
+    /** Whether the cell is active */
+    active: boolean;
+    /** Whether the cell is copied */
+    copied: boolean;
+    /** Whether the user is dragging */
+    dragging: boolean;
+    /** The mode of the cell */
+    mode: Mode;
+    /** The data of the cell */
+    data: Cell | undefined;
+    /** The evaluated data of the cell */
+    evaluatedData: Cell | undefined;
+    /** Select the cell at the given point */
+    select: (point: Point) => void;
+    /** Activate the cell at the given point */
+    activate: (point: Point) => void;
+    /** Set the dimensions of the cell at the given point with the given dimensions */
+    setCellDimensions: (point: Point, dimensions: Dimensions) => void;
+    /** Set data of the cell */
+    setCellData: (cell: Cell) => void;
+};
+/** Type of the Spreadsheet Cell component */
+export type CellComponent<Cell extends CellBase = CellBase> = React.ComponentType<CellComponentProps<Cell>>;
+type DataComponentProps<Cell extends CellBase> = {
+    /** The rendered cell by the component */
+    cell: Cell | undefined;
+} & Point;
+/** Type of the Spreadsheet DataViewer component props */
+export type DataViewerProps<Cell extends CellBase = CellBase> = DataComponentProps<Cell> & {
+    /** Set data of the cell */
+    setCellData: (cell: Cell) => void;
+    evaluatedCell: Cell | undefined;
+};
+/** Type of the Spreadsheet DataViewer component */
+export type DataViewerComponent<Cell extends CellBase = CellBase> = React.ComponentType<DataViewerProps<Cell>>;
+/** Type of the Spreadsheet DataEditor component props */
+export type DataEditorProps<Cell extends CellBase = CellBase> = DataComponentProps<Cell> & {
+    /** Callback to be called when the cell's value is changed */
+    onChange: (cell: Cell) => void;
+    /** Callback to be called when edit mode should be exited */
+    exitEditMode: () => void;
+};
+/** Type of the Spreadsheet DataEditor component */
+export type DataEditorComponent<Cell extends CellBase = CellBase> = React.ComponentType<DataEditorProps<Cell>>;
+/** Type of the Spreadsheet Table component props */
+export type TableProps = React.PropsWithChildren<{
+    /** Number of columns the table should render */
+    columns: number;
+    /** Whether column indicators are hidden */
+    hideColumnIndicators?: boolean | null;
+}>;
+/** Type of the Spreadsheet Table component */
+export type TableComponent = React.ComponentType<TableProps>;
+/** Type of the Spreadsheet Row component props */
+export type RowProps = React.PropsWithChildren<{
+    /** The row index of the table */
+    row: number;
+}>;
+/** Type of the Row component */
+export type RowComponent = React.ComponentType<RowProps>;
+/** Type of the Spreadsheet HeaderRow component props */
+export type HeaderRowProps = React.PropsWithChildren<{}>;
+/** Type of the HeaderRow component */
+export type HeaderRowComponent = React.ComponentType<HeaderRowProps>;
+/** Type of the Spreadsheet RowIndicator component props */
+export type RowIndicatorProps = {
+    /** The row the indicator indicates */
+    row: number;
+    /** A custom label for the indicator as provided in rowLabels */
+    label?: React.ReactNode | null;
+    /** Whether the entire row is selected */
+    selected: boolean;
+    /** Callback to be called when the row is selected */
+    onSelect: (row: number, extend: boolean) => void;
+};
+/** Type of the RowIndicator component */
+export type RowIndicatorComponent = React.ComponentType<RowIndicatorProps>;
+/** Type of the Spreadsheet ColumnIndicator component props */
+export type ColumnIndicatorProps = {
+    /** The column the indicator indicates */
+    column: number;
+    /** A custom label for the indicator as provided in columnLabels */
+    label?: React.ReactNode | null;
+    /** Whether the entire column in selected */
+    selected: boolean;
+    /** Whether the entire column in Fixed */
+    fixed?: boolean;
+    /** Callback to be called when the column is selected */
+    onSelect: (column: number, extend: boolean) => void;
+};
+/** Type of the ColumnIndicator component */
+export type ColumnIndicatorComponent = React.ComponentType<ColumnIndicatorProps>;
+/** Type of the Spreadsheet CornerIndicator component props */
+export type CornerIndicatorProps = {
+    /** Whether the entire table is selected */
+    selected: boolean;
+    /** Callback to select the entire table */
+    onSelect: () => void;
+};
+/** Type of the CornerIndicator component */
+export type CornerIndicatorComponent = React.ComponentType<CornerIndicatorProps>;
+export type CommitChanges<Cell extends CellBase = CellBase> = Array<{
+    prevCell: Cell | null;
+    nextCell: Cell | null;
+}>;
+export type CreateFormulaParser = (data: Matrix<CellBase>) => FormulaParser;
+export {};

package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts

@@ -0,0 +1,3 @@
+import { Dispatch } from './context';
+declare function useDispatch(): Dispatch;
+export default useDispatch;

package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts

@@ -0,0 +1,3 @@
+import * as Types from './types';
+declare function useSelector<T>(selector: (state: Types.StoreState) => T): T;
+export default useSelector;

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

@@ -0,0 +1,44 @@
+import * as Types from './types';
+import * as Matrix from './matrix';
+import * as Point from './point';
+import { PointRange } from './point-range';
+import { Selection } from './selection';
+export { createEmpty as createEmptyMatrix } from './matrix';
+export declare const PLAIN_TEXT_MIME = "text/plain";
+export declare const FOCUS_WITHIN_SELECTOR = ":focus-within";
+/** Move the cursor of given input element to the input's end */
+export declare function moveCursorToEnd(el: HTMLInputElement): void;
+/**
+ * Creates an array of numbers (positive and/or negative) progressing from start up to, but not including, end. A step of -1 is used if a negative start is specified without an end or step. If end is not specified, it's set to start with start then set to 0.
+ * @param end - an integer number specifying at which position to stop (not included).
+ * @param start - An integer number specifying at which position to start.
+ * @param step - An integer number specifying the Increment */
+export declare function range(end: number, start?: number, step?: number): number[];
+/** Return whether given point is active */
+export declare function isActive(active: Types.StoreState['active'], point: Point.Point): boolean;
+/** Get the offset values of given element */
+export declare function getOffsetRect(element: HTMLElement): Types.Dimensions;
+/** Write given data to clipboard with given event */
+export declare function writeTextToClipboard(event: ClipboardEvent, data: string): void;
+/** Read text from given clipboard event */
+export declare function readTextFromClipboard(event: ClipboardEvent): string;
+/** Get the dimensions of cell at point from state */
+export declare function getCellDimensions(point: Point.Point, rowDimensions: Types.StoreState['rowDimensions'] | undefined, columnDimensions: Types.StoreState['columnDimensions'] | undefined): Types.Dimensions | undefined;
+/** Get the dimensions of a range of cells */
+export declare function getRangeDimensions(rowDimensions: Types.StoreState['rowDimensions'], columnDimensions: Types.StoreState['columnDimensions'], range: PointRange): Types.Dimensions | undefined;
+/** Get the dimensions of selected */
+export declare function getSelectedDimensions(rowDimensions: Types.StoreState['rowDimensions'], columnDimensions: Types.StoreState['columnDimensions'], data: Matrix.Matrix<unknown>, selected: Selection): Types.Dimensions | undefined;
+/** Get given data as CSV */
+export declare function getCSV(data: Matrix.Matrix<Types.CellBase>): string;
+/**
+ * Calculate the rows and columns counts of a spreadsheet
+ * @param data - the spreadsheet's data
+ * @param rowLabels - the spreadsheet's row labels (if defined)
+ * @param columnLabels - the spreadsheet's column labels (if defined)
+ * @returns the rows and columns counts of a spreadsheet
+ */
+export declare function calculateSpreadsheetSize(data: Matrix.Matrix<unknown>, rowLabels?: string[], columnLabels?: string[]): Matrix.Size;
+/** Should spreadsheet handle clipboard event */
+export declare function shouldHandleClipboardEvent(root: Element | null, mode: Types.Mode): boolean;
+export declare function isFocusedWithin(element: Element): boolean;
+export declare function hasLineBreaker(value: unknown): boolean;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+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;
+}
+declare const ExcelFile: React.FC<ExcelFileProps>;
+export default ExcelFile;

package/lib/components/ExcelFile/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/ExcelSheetBar/ExcelSheetBar.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface ExcelSheetBarProps {
+    fileDetails: {
+        sheetNames: string[];
+    };
+    handleSheetChange: (name: string, index: number) => void;
+    selectedSheet: {
+        name: string;
+    };
+}
+declare const ExcelSheetBar: React.FC<ExcelSheetBarProps>;
+export default ExcelSheetBar;

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

@@ -0,0 +1,15 @@
+import './ExcelToolBar.scss';
+import { CellBase } from '../ExcelFile/Excel';
+import * as Matrix from '../ExcelFile/Excel/matrix';
+interface ExcelToolBarProps {
+    toolbar?: 'show' | 'disable' | 'hide';
+    data: Matrix.Matrix<CellBase>;
+    onBold: (data: Matrix.Matrix<CellBase>) => void;
+    onItalic: (data: Matrix.Matrix<CellBase>) => void;
+    onUnderline: (data: Matrix.Matrix<CellBase>) => void;
+    setColor: (data: Matrix.Matrix<CellBase>, value: string) => void;
+    setBackgroundColor: (data: Matrix.Matrix<CellBase>, value: string) => void;
+    setFormatePainter: (data: Matrix.Matrix<CellBase>) => void;
+}
+declare const ExcelToolBar: React.FC<ExcelToolBarProps>;
+export default ExcelToolBar;

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

@@ -0,0 +1,24 @@
+interface CellStyle {
+    color?: string;
+    backgroundColor?: string;
+    bold?: boolean;
+    italic?: boolean;
+    name?: string;
+    border: {
+        top: string;
+        bottom: string;
+        left: string;
+        right: string;
+    };
+    alignment: {
+        horizontal?: string;
+        vertical?: string;
+        wrapText?: boolean;
+    };
+}
+interface CellData {
+    style?: CellStyle;
+}
+type ImportExcelStylesData = Array<Array<CellData>>;
+export default function ImportExcelStyles(data: ImportExcelStylesData | null): void;
+export {};

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

@@ -0,0 +1,129 @@
+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/lib/components/ExcelFile/index.d.ts

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

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

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

package/lib/components/FF_Captcha/captcha.stories.d.ts

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

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

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

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

@@ -0,0 +1,7 @@
+import Forms from './Forms';
+import { Meta, StoryObj } from '@storybook/react/*';
+import './Form.scss';
+declare const meta: Meta<typeof Forms>;
+type Story = StoryObj<typeof Forms>;
+export declare const WithDefaultValues: Story;
+export default meta;

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

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Container } from './GridLayout';
+import './GridLayoutStory.scss';
+declare const meta: Meta<typeof Container>;
+type ContainerStory = StoryObj<typeof Container>;
+export declare const Grid: ContainerStory;
+export declare const Grid2: ContainerStory;
+export default meta;

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

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

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Icon from './Icon';
+declare const meta: Meta<typeof Icon>;
+type Story = StoryObj<typeof Icon>;
+export declare const Icons: Story;
+export declare const AllIcons: Story;
+export declare const DarkVariantIcons: Story;
+export default meta;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import LabelEditTextField from './LabelEditTextField';
+import '../../assets/styles/_colors.scss';
+import './LabelEditTextField.scss';
+declare const meta: Meta<typeof LabelEditTextField>;
+type Story = StoryObj<typeof LabelEditTextField>;
+export declare const textField: Story;
+export declare const textFieldWithOutLabel: Story;
+export declare const openTextFieldWithOutLabel: Story;
+export declare const textFieldWithDropdown: Story;
+export declare const textFieldWithHighlight: Story;
+export declare const openLabelEditTextField: Story;
+export default meta;

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

@@ -38,6 +38,7 @@ export interface LabelEditTextFieldTypes {
     isOpen?: boolean;
     /**for conditionally handle custom error */
     customErrorCondition?: boolean;
+    placeholder?: string;
     onClick?: () => void;
     tooltip?: {
         tooltipTitle?: string;

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

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

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

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

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

@@ -9,4 +9,5 @@ export interface MachineInputFieldProps {
     className?: string;
     contentReverse?: boolean;
     onClick?: () => void;
+    modalId?: string;
 }

package/lib/components/MenuOption/MenuOption.d.ts

@@ -1,4 +1,4 @@
 import './MenuOption.scss';
 import { MenuOptionProps } from './types';
-declare const MenuOption: ({ labelName, iconName, tooltipTitle, tooltipPlacement, options, onClick, onOptionClick, iconButtonSize, iconButtonBorderRadius, iconSize, variant, zIndex, dropdownPlacement, optionCardVariant }: MenuOptionProps) => import("react/jsx-runtime").JSX.Element;
+declare const MenuOption: ({ labelName, iconName, tooltipTitle, tooltipPlacement, options, onClick, onOptionClick, iconButtonSize, iconButtonBorderRadius, iconSize, variant, zIndex, dropdownPlacement, optionCardVariant, targetRef, }: MenuOptionProps) => import("react/jsx-runtime").JSX.Element;
 export default MenuOption;

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

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import MenuOption from './MenuOption';
+import './MenuOption.scss';
+export declare const DefaultMenuOption: Story;
+declare const meta: Meta<typeof MenuOption>;
+type Story = StoryObj<typeof MenuOption>;
+export declare const ControlledMenuOption: Story;
+export declare const MenuOptionWithLabel: Story;
+export declare const MenuOptionWithDisabledHoverEffect: Story;
+export declare const MenuOptionWithToolTip: Story;
+export declare const MenuOptionPlacementTop: Story;
+export declare const MenuOptionPlacementDown: Story;
+export declare const MenuOptionPlacementLeft: Story;
+export declare const MenuOptionPlacementRight: Story;
+export declare const MenuOptionCustom: Story;
+export default meta;

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

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode } from 'react';
 interface OptionClick {
     /**
      * The label displayed for the option.
@@ -173,6 +173,7 @@ interface MenuOptionProps {
      * @optional
      */
     optionCardVariant?: 'primary';
+    targetRef?: React.RefObject<HTMLElement>;
 }
 interface OptionProps {
     /**

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import MiniModal from './MiniModal';
+import './MiniModal.scss';
+declare const meta: Meta<typeof MiniModal>;
+type Story = StoryObj<typeof MiniModal>;
+export declare const BasicModal: Story;
+export declare const CustomModalWithArrow: () => import("react/jsx-runtime").JSX.Element;
+export declare const CustomModalWithWrapper: () => import("react/jsx-runtime").JSX.Element;
+export declare const normalModalFollowedByIcon: () => import("react/jsx-runtime").JSX.Element;
+export default meta;