@bluemarble/bm-components 0.0.20 → 0.0.23

package/dist/esm/types/components/Autocomplete/index.d.ts

@@ -1,8 +1,7 @@
 import { ReactNode } from "react";
-import { Autocomplete as MuiAutocomplete, AutocompleteProps as MuiAutocompleteProps, AutocompleteRenderInputParams } from "@mui/material";
-declare type MuiAutocomplete<T> = Omit<MuiAutocompleteProps<T, boolean, undefined, boolean>, "renderInput" | "getOptionLabel">;
-declare type AutocompleteProps<T> = AutocompleteWithoutProps<T> | AutocompleteWithFormikProps<T>;
-interface AutocompleteWithoutProps<T> extends MuiAutocomplete<T> {
+import { AutocompleteProps as MuiAutocompleteProps, AutocompleteRenderInputParams } from "@mui/material";
+declare type MuiAutocompleteBaseProps<T> = Omit<MuiAutocompleteProps<T, boolean, undefined, boolean>, "renderInput" | "getOptionLabel">;
+interface AutocompleteWithoutProps<T> extends MuiAutocompleteBaseProps<T> {
     name?: never;
     withFormik: false;
     getOptionValue?: never;
@@ -10,13 +9,19 @@ interface AutocompleteWithoutProps<T> extends MuiAutocomplete<T> {
     getOptionLabel: (option: T) => string;
     renderInput?: (params: AutocompleteRenderInputParams) => ReactNode;
 }
-interface AutocompleteWithFormikProps<T> extends MuiAutocomplete<T> {
+interface AutocompleteWithFormikProps<T> extends MuiAutocompleteBaseProps<T> {
     name: string;
     withFormik?: true;
     label?: string;
+    option?: {
+        label?: keyof T;
+        value?: keyof T;
+        key?: string;
+    };
     renderInput?: (params: AutocompleteRenderInputParams) => ReactNode;
-    getOptionLabel: (option: T) => string;
-    getOptionValue: (option: T) => string | number;
+    getOptionLabel?: (option: T) => string;
+    getOptionValue?: (option: T) => string | number;
 }
+declare type AutocompleteProps<T> = AutocompleteWithoutProps<T> | AutocompleteWithFormikProps<T>;
 export declare function Autocomplete<T>({ withFormik, name, getOptionValue, ...rest }: AutocompleteProps<T>): JSX.Element;
 export {};

package/dist/esm/types/components/EditableGrid/GridCell.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { TableCellProps } from "@mui/material";
+import { ColumnsProps } from ".";
+interface GridCellProps {
+    focusedIndex: {
+        x: number;
+        y: number;
+    };
+    rowIndex: number;
+    columnIndex: number;
+    isEditing: boolean;
+    value: any;
+    bordered?: boolean;
+    onClick: () => void;
+    onDoubleClick: () => void;
+    onInputChange: (value: string) => void;
+    setCanSave: (value: boolean) => void;
+    canEditTable: boolean;
+    tableCellProps?: TableCellProps;
+    validationErrors?: string[];
+    column: ColumnsProps<any>;
+}
+export declare const GridCell: ({ value, focusedIndex, canEditTable, columnIndex, rowIndex, isEditing, onInputChange, bordered, onClick, onDoubleClick, setCanSave, tableCellProps, validationErrors, column, }: GridCellProps) => JSX.Element;
+export {};

package/dist/esm/types/components/EditableGrid/GridInput/index.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { BaseTextFieldProps } from "@mui/material";
+import { InputSelectCellProps } from "../GridSelect";
+export interface GridInputProps extends BaseTextFieldProps {
+    onDefaultValue?: (value: string) => string;
+}
+export interface InputCellProps {
+    currentValue: string;
+    defaultValue?: string;
+    inputProps?: GridInputProps;
+    type?: GridInputProps["type"] | "select";
+    select?: Omit<InputSelectCellProps, "setCanSave" | "onInputChange">;
+    onInputChange: (value: string) => void;
+    setCanSave: (value: boolean) => void;
+}
+export declare const InputCell: (props: InputCellProps) => JSX.Element;

package/dist/esm/types/components/EditableGrid/GridInputAutocomplete/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface InputAutocompleteCellProps {
+    options: any[];
+    label: string;
+    value: string;
+    setCanSave: (value: boolean) => void;
+    onInputChange: (value: string) => void;
+    currentValue?: string;
+    defaultValue?: string;
+}
+export declare const InputAutocompleteCell: ({ options, label, value, onInputChange, currentValue, defaultValue: ExternalDefaultValue, }: InputAutocompleteCellProps) => JSX.Element;

package/dist/esm/types/components/EditableGrid/GridInputText/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { InputCellProps } from "../GridInput";
+export declare const InputTextCell: ({ defaultValue, currentValue, inputProps, onInputChange, }: InputCellProps) => JSX.Element;

package/dist/esm/types/components/EditableGrid/GridSelect/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export interface InputSelectCellProps {
+    options: any[];
+    label: string;
+    value: string;
+    setCanSave: (value: boolean) => void;
+    onInputChange: (value: string) => void;
+    currentValue?: string;
+}
+export declare const InputSelectCell: ({ options, label, value, setCanSave, onInputChange, currentValue, }: InputSelectCellProps) => JSX.Element;

package/dist/esm/types/components/EditableGrid/NewRow/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ColumnsProps } from "..";
+interface NewRowProps {
+    columns: ColumnsProps<any>[];
+    hasCheckbox: boolean;
+    maxPositions: {
+        x: number;
+        y: number;
+    };
+    onSaveNewRow?: (prop: any) => void;
+}
+export declare const NewRow: ({ columns, hasCheckbox, maxPositions, onSaveNewRow, }: NewRowProps) => JSX.Element;
+export {};

package/dist/esm/types/components/EditableGrid/index.d.ts

@@ -0,0 +1,52 @@
+/// <reference types="react" />
+import { TableCellProps } from "@mui/material";
+import { GridInputProps } from "./GridInput";
+import { InputSelectCellProps } from "./GridSelect";
+export interface onSaveOptions<T> {
+    prop: keyof T;
+    newValue: string;
+    index: number;
+}
+export interface ColumnsProps<T> {
+    id?: string | number;
+    name: keyof T | "";
+    label: string;
+    visible?: boolean;
+    type?: GridInputProps["type"] | "select" | "autocomplete";
+    inputProps?: GridInputProps;
+    select?: Omit<InputSelectCellProps, "setCanSave" | "onInputChange">;
+    formatLabelValue?: (value: string) => string;
+    required?: boolean;
+    TableCellProps?: TableCellProps;
+    newRow?: {
+        defaultValue?: string;
+    };
+}
+interface EditableGridProps<T> {
+    columns: ColumnsProps<T>[];
+    data: Array<T>;
+    primaryKey: keyof T;
+    focusedIndex: {
+        x: number;
+        y: number;
+    };
+    isEditing: boolean;
+    bordered?: boolean;
+    onSave: (item: T, options: onSaveOptions<T>) => void;
+    setFocusedIndex: (props: {
+        x: number;
+        y: number;
+    }) => void;
+    setIsEditing: (value: boolean) => void;
+    canEditTable: boolean;
+    setCanEditTable: (value: boolean) => void;
+    selectedRows: number[];
+    setSelectedRows: (value: number[]) => void;
+    checkbox?: boolean;
+    checkMultiple?: boolean;
+    onSaveNewRow?: (newRow: T) => void;
+    canInsertNewRow: boolean;
+    setCanInsertNewRow: (value: boolean) => void;
+}
+export declare function EditableGrid<T extends Record<string, any>>({ columns, data, primaryKey, onSave, setFocusedIndex, setIsEditing, focusedIndex, isEditing, bordered, canEditTable, setCanEditTable, selectedRows, setSelectedRows, checkbox, checkMultiple, onSaveNewRow, canInsertNewRow, }: EditableGridProps<T>): JSX.Element;
+export {};

package/dist/esm/types/components/hooks/useEditableGrid.d.ts

@@ -0,0 +1,23 @@
+import { onSaveOptions } from "../EditableGrid";
+export declare type useEditableGridResponseProps<T> = {
+    data: Array<T>;
+    focusedIndex: {
+        x: number;
+        y: number;
+    };
+    isEditing: boolean;
+    setData: (props: Array<T>) => void;
+    setIsEditing: (value: boolean) => void;
+    setFocusedIndex: (props: {
+        x: number;
+        y: number;
+    }) => void;
+    onSave: (newItem: T, props: onSaveOptions<T>) => void;
+    canEditTable: boolean;
+    setCanEditTable: (value: boolean) => void;
+    selectedRows: number[];
+    setSelectedRows: (value: number[]) => void;
+    canInsertNewRow: boolean;
+    setCanInsertNewRow: (value: boolean) => void;
+};
+export declare function useEditableGrid<T>(): useEditableGridResponseProps<T>;

package/dist/esm/types/components/hooks/useEvent.d.ts

@@ -0,0 +1 @@
+export declare function useEvent(event: keyof WindowEventMap, handler: (ev: any) => void, passive?: boolean): void;

package/dist/esm/types/components/index.d.ts

@@ -7,3 +7,6 @@ export { Checkbox } from "./Checkbox";
 export { Switch } from "./Switch";
 export { Radio } from "./Radio";
 export { LargeButton } from "./LargeButton";
+export { EditableGrid } from "./EditableGrid";
+export { useEditableGrid } from "./hooks/useEditableGrid";
+export { useEvent } from "./hooks/useEvent";

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React, { ReactNode, FC } from 'react';
-import { TableCellProps, TextFieldProps, TableRowProps, StandardTextFieldProps, SelectProps as SelectProps$1, FormControlProps, InputLabelProps, AutocompleteRenderInputParams, AutocompleteProps as AutocompleteProps$1, CheckboxProps as CheckboxProps$1, FormControlLabelProps, SwitchProps as SwitchProps$1, RadioGroupProps, ButtonProps, CircularProgressProps } from '@mui/material';
+import { TableCellProps, TextFieldProps, TableRowProps, StandardTextFieldProps, SelectProps as SelectProps$1, FormControlProps, InputLabelProps, AutocompleteRenderInputParams, AutocompleteProps as AutocompleteProps$1, CheckboxProps as CheckboxProps$1, FormControlLabelProps, SwitchProps as SwitchProps$1, RadioGroupProps, ButtonProps, CircularProgressProps, BaseTextFieldProps } from '@mui/material';
 import IMask$1 from 'imask';
 
 interface ColumnTitleProps {
@@ -100,9 +100,8 @@ interface SelectProps extends SelectProps$1 {
 }
 declare const Select: FC<SelectProps>;
 
-declare type MuiAutocomplete<T> = Omit<AutocompleteProps$1<T, boolean, undefined, boolean>, "renderInput" | "getOptionLabel">;
-declare type AutocompleteProps<T> = AutocompleteWithoutProps<T> | AutocompleteWithFormikProps<T>;
-interface AutocompleteWithoutProps<T> extends MuiAutocomplete<T> {
+declare type MuiAutocompleteBaseProps<T> = Omit<AutocompleteProps$1<T, boolean, undefined, boolean>, "renderInput" | "getOptionLabel">;
+interface AutocompleteWithoutProps<T> extends MuiAutocompleteBaseProps<T> {
     name?: never;
     withFormik: false;
     getOptionValue?: never;
@@ -110,14 +109,20 @@ interface AutocompleteWithoutProps<T> extends MuiAutocomplete<T> {
     getOptionLabel: (option: T) => string;
     renderInput?: (params: AutocompleteRenderInputParams) => ReactNode;
 }
-interface AutocompleteWithFormikProps<T> extends MuiAutocomplete<T> {
+interface AutocompleteWithFormikProps<T> extends MuiAutocompleteBaseProps<T> {
     name: string;
     withFormik?: true;
     label?: string;
+    option?: {
+        label?: keyof T;
+        value?: keyof T;
+        key?: string;
+    };
     renderInput?: (params: AutocompleteRenderInputParams) => ReactNode;
-    getOptionLabel: (option: T) => string;
-    getOptionValue: (option: T) => string | number;
+    getOptionLabel?: (option: T) => string;
+    getOptionValue?: (option: T) => string | number;
 }
+declare type AutocompleteProps<T> = AutocompleteWithoutProps<T> | AutocompleteWithFormikProps<T>;
 declare function Autocomplete<T>({ withFormik, name, getOptionValue, ...rest }: AutocompleteProps<T>): JSX.Element;
 
 declare type CheckboxProps = CheckboxWithFormik | CheckboxWithoutFormik;
@@ -176,4 +181,90 @@ interface LargeButtonProps extends ButtonProps {
 }
 declare const LargeButton: ({ loading, children, CircularProgressProps, ...rest }: LargeButtonProps) => JSX.Element;
 
-export { Autocomplete, Checkbox, ColumnTitleProps, EditableTableCell, FilterProps, Grid, IFilter, Input, InputMask, LargeButton, Radio, Select, Switch, Td, Tr, filterData };
+interface InputSelectCellProps {
+    options: any[];
+    label: string;
+    value: string;
+    setCanSave: (value: boolean) => void;
+    onInputChange: (value: string) => void;
+    currentValue?: string;
+}
+
+interface GridInputProps extends BaseTextFieldProps {
+    onDefaultValue?: (value: string) => string;
+}
+
+interface onSaveOptions<T> {
+    prop: keyof T;
+    newValue: string;
+    index: number;
+}
+interface ColumnsProps<T> {
+    id?: string | number;
+    name: keyof T | "";
+    label: string;
+    visible?: boolean;
+    type?: GridInputProps["type"] | "select" | "autocomplete";
+    inputProps?: GridInputProps;
+    select?: Omit<InputSelectCellProps, "setCanSave" | "onInputChange">;
+    formatLabelValue?: (value: string) => string;
+    required?: boolean;
+    TableCellProps?: TableCellProps;
+    newRow?: {
+        defaultValue?: string;
+    };
+}
+interface EditableGridProps<T> {
+    columns: ColumnsProps<T>[];
+    data: Array<T>;
+    primaryKey: keyof T;
+    focusedIndex: {
+        x: number;
+        y: number;
+    };
+    isEditing: boolean;
+    bordered?: boolean;
+    onSave: (item: T, options: onSaveOptions<T>) => void;
+    setFocusedIndex: (props: {
+        x: number;
+        y: number;
+    }) => void;
+    setIsEditing: (value: boolean) => void;
+    canEditTable: boolean;
+    setCanEditTable: (value: boolean) => void;
+    selectedRows: number[];
+    setSelectedRows: (value: number[]) => void;
+    checkbox?: boolean;
+    checkMultiple?: boolean;
+    onSaveNewRow?: (newRow: T) => void;
+    canInsertNewRow: boolean;
+    setCanInsertNewRow: (value: boolean) => void;
+}
+declare function EditableGrid<T extends Record<string, any>>({ columns, data, primaryKey, onSave, setFocusedIndex, setIsEditing, focusedIndex, isEditing, bordered, canEditTable, setCanEditTable, selectedRows, setSelectedRows, checkbox, checkMultiple, onSaveNewRow, canInsertNewRow, }: EditableGridProps<T>): JSX.Element;
+
+declare type useEditableGridResponseProps<T> = {
+    data: Array<T>;
+    focusedIndex: {
+        x: number;
+        y: number;
+    };
+    isEditing: boolean;
+    setData: (props: Array<T>) => void;
+    setIsEditing: (value: boolean) => void;
+    setFocusedIndex: (props: {
+        x: number;
+        y: number;
+    }) => void;
+    onSave: (newItem: T, props: onSaveOptions<T>) => void;
+    canEditTable: boolean;
+    setCanEditTable: (value: boolean) => void;
+    selectedRows: number[];
+    setSelectedRows: (value: number[]) => void;
+    canInsertNewRow: boolean;
+    setCanInsertNewRow: (value: boolean) => void;
+};
+declare function useEditableGrid<T>(): useEditableGridResponseProps<T>;
+
+declare function useEvent(event: keyof WindowEventMap, handler: (ev: any) => void, passive?: boolean): void;
+
+export { Autocomplete, Checkbox, ColumnTitleProps, EditableGrid, EditableTableCell, FilterProps, Grid, IFilter, Input, InputMask, LargeButton, Radio, Select, Switch, Td, Tr, filterData, useEditableGrid, useEvent };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bluemarble/bm-components",
-  "version": "0.0.20",
+  "version": "0.0.23",
   "description": "BM components",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",