kelt-ui-kit-react 2.0.1 → 2.0.3

package/dist/_core/type/generiqueType.d.ts

@@ -0,0 +1,4 @@
+export interface EnumerableType {
+    label: string;
+    value: string;
+}

package/dist/badge/Badge.d.ts

@@ -4,7 +4,9 @@ export type BadgeInterface = {
     className?: string;
     onClick?: (e: React.MouseEvent) => void;
     title?: string;
+    color?: string;
+    onRemove?: (e: React.MouseEvent) => void;
     sizeIcon?: IconSizeEnum;
     classIcon?: string;
 };
-export declare const Badge: ({ className, onClick, title, sizeIcon, classIcon, }: BadgeInterface) => import("react/jsx-runtime").JSX.Element;
+export declare const Badge: ({ className, onClick, color, title, onRemove, sizeIcon, classIcon, }: BadgeInterface) => import("react/jsx-runtime").JSX.Element;

package/dist/button/Button.d.ts

@@ -1,3 +1,3 @@
 import { ButtonInterface } from './button.interface';
 
-export declare const Button: ({ className, onClick, badge, title, sizeIcon, id, classIcon, positionicon, disabled, style, }: ButtonInterface) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ className, onClick, badge, title, sizeIcon, id, classIcon, positionicon, disabled, }: ButtonInterface) => import("react/jsx-runtime").JSX.Element;

package/dist/button/button.interface.d.ts

@@ -5,13 +5,12 @@ export interface ButtonInterface {
     className?: string;
     badge?: BadgeInterface;
     id?: string;
-    onClick?: (e: React.MouseEvent) => void;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     title: string;
     classIcon?: string;
     positionicon?: number;
     disabled?: boolean;
     sizeIcon?: IconSizeEnum;
-    style?: React.CSSProperties;
 }
 export interface buttonActionInterface {
     icon?: string;

package/dist/dataTable/DataTable.d.ts

@@ -1,5 +1,16 @@
-import { dataTableActionsInterface, dataTableColumnsInterface } from './dataTable.interface';
+import { DataTableActionsInterface, DataTableColumnsInterface } from './dataTable.interface';
 
+export type DataTableDateRangeFilterValue = {
+    startDate: string;
+    endDate: string;
+};
+export type FilterValue = string | number | boolean | string[] | DataTableDateRangeFilterValue | null;
+export type DataTableFilterState = Record<string, FilterValue>;
+export type DataTableSortDirection = "asc" | "desc";
+export type DataTableSortState = {
+    key: string;
+    direction: DataTableSortDirection;
+};
 export type DataTableProps<T> = {
     id: string;
     name?: string;
@@ -8,27 +19,19 @@ export type DataTableProps<T> = {
     element?: JSX.Element;
     data: T[];
     emptyMessage?: string;
-    actionsColumnWidth?: number;
-    actions?: dataTableActionsInterface<T>[];
-    footerAction?: (props: {
-        close: () => void;
-        selectedRows: T[];
-    }) => JSX.Element;
-    columns: dataTableColumnsInterface<T>[];
+    actions?: DataTableActionsInterface<T>[];
+    columns: DataTableColumnsInterface<T>[];
+    onFiltersChange?: (next: DataTableFilterState) => void;
+    onSortChange?: (next: DataTableSortState | null) => void;
     loading?: boolean;
     onRowClick?: (row: any) => void;
     onColumnClick?: (column: any) => void;
+    onEditColumnByOverlay?: (row: T) => void;
     onLoadMore?: () => void;
     hasMore?: boolean;
     onSelectionChange?: (selectedRows: T[]) => void;
-    autoFocusFirstEditable?: boolean;
     hideToggleAll?: boolean;
     limitSelect?: number;
     getRowId?: (row: T) => string | number;
-    onRowStyle?: (row: T) => React.CSSProperties | undefined;
-    onRowClassName?: (row: T) => string | undefined;
-    rowStyle?: (row: T) => React.CSSProperties | undefined;
-    rowClassName?: (row: T) => string | undefined;
-    mobileCardView?: boolean;
 };
 export declare function DataTable<T>(props: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/dataTable/dataTable.interface.d.ts

@@ -1,48 +1,53 @@
 import { HTMLInputTypeAttribute } from 'react';
+import { EnumerableType } from '../_core/type/generiqueType';
+import { TypeInputEnum } from '../form/form.enum';
 
-export interface dataTableColumnsInterface<T> {
+export interface DataTableColumnsInterface<T> {
     id: string;
     label: string;
+    key?: string;
+    name?: string;
+    sticky?: boolean;
     minWidth?: number;
     maxWidth?: number;
     width?: number;
     align?: "right" | "left" | "center";
+    alignText?: "right" | "left" | "center";
     format?: (value: any) => string;
     sortable?: boolean;
     filterable?: boolean;
-    filterValue?: string;
+    filterDataEnum?: EnumerableType[];
+    filterType?: TypeInputEnum;
     editable?: boolean;
-    enterToNextColumn?: boolean;
+    isUpdatable?: boolean;
     options?: {
         label: string;
         value: string;
     }[];
+    displayOverlay?: boolean;
+    onEditable?: (value: any, row: T) => boolean;
+    onChange?: (value: any, row: T) => void;
+    onEditByOverlay?: (value: any, row: T) => void;
     onEdit?: (value: any, row: T) => void;
-    onEnter?: (value: any, row: T) => void;
     onDisable?: (row: T) => boolean;
+    onEditTrigger?: "change" | "enter";
     onRowStyle?: (row: T) => React.CSSProperties;
-    type: HTMLInputTypeAttribute | "select" | "image";
-    imageAlt?: (row: T) => string;
-    imageStyle?: React.CSSProperties;
-    imageSrc?: (row: T) => string;
-    showStepButtons?: boolean | ((row: T) => boolean);
-    stepControls?: boolean | ((row: T) => boolean);
-    withStepControls?: boolean | ((row: T) => boolean);
-    step?: number;
-    min?: number;
-    max?: number;
+    renderComponent?: (value: any, row: T) => JSX.Element;
+    openClickCell?: boolean;
+    handleClickCell?: (e: React.MouseEvent<HTMLTableCellElement>, row: T) => void;
+    renderClickCellComponent?: (value: any, row: T) => JSX.Element;
+    type: HTMLInputTypeAttribute | "select";
+    children?: DataTableColumnsInterface<T>[];
 }
-export interface dataTableActionsInterface<T> {
+export interface DataTableActionsInterface<T> {
     id: string;
     label: string;
     type: "button" | "link" | "icon";
     classIcon?: string;
-    onClick: (row: T, rowIndex?: number) => void;
+    onClick: (row: T) => void;
     shouldDisplay?: (row: T) => boolean;
     disabled?: boolean;
     labelButton?: (row: T) => string;
     visible?: boolean;
-    width?: string | number;
-    minWidth?: string | number;
-    focusNextRow?: boolean;
+    width?: number;
 }

package/dist/dataTable/dataTableActions/DataTableAction.d.ts

@@ -1,11 +1,9 @@
-import { dataTableActionsInterface } from '../dataTable.interface';
+import { DataTableActionsInterface } from '../dataTable.interface';
 
 type DataTableActionProps = {
-    action: dataTableActionsInterface<any>;
+    action: DataTableActionsInterface<any>;
     row: any;
-    rowIndex?: number;
     index?: number;
-    onFocusNextRow?: (rowIndex: number) => void;
 };
-export declare const DataTableAction: ({ action, row, rowIndex, index, onFocusNextRow, }: DataTableActionProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const DataTableAction: ({ action, row, index, }: DataTableActionProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/dataTable/dataTableColumn/DataTableColumn.d.ts

@@ -1,9 +1,15 @@
-import { dataTableColumnsInterface } from '../dataTable.interface';
+import { DataTableSortDirection } from '../DataTable';
+import { DataTableColumnsInterface } from '../dataTable.interface';
 
-type DataTableColumnProps = {
-    column: dataTableColumnsInterface<any>;
+export declare function DataTableColumn<T>({ column, idx, onColumnClick, hasNestedColumns, isFilterVisible, onToggleFilterVisibility, currentSortDirection, onToggleSort, stickyLeft, stickyTop, }: {
+    hasNestedColumns: boolean;
+    column: DataTableColumnsInterface<T>;
     idx: number;
-    onColumnClick?: (column: dataTableColumnsInterface<any>) => void;
-};
-export declare const DataTableColumn: ({ column, idx, onColumnClick, }: DataTableColumnProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+    onColumnClick?: (column: DataTableColumnsInterface<T>) => void;
+    isFilterVisible?: boolean;
+    onToggleFilterVisibility?: (column: DataTableColumnsInterface<T>) => void;
+    currentSortDirection?: DataTableSortDirection | null;
+    onToggleSort?: (column: DataTableColumnsInterface<T>) => void;
+    stickyLeft?: number;
+    stickyTop?: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/dataTable/dataTableColumn/dataTableColumnFilter/DataTableColumnFilter.d.ts

@@ -0,0 +1,10 @@
+import { DataTableColumnsInterface } from '../../dataTable.interface';
+
+type DataTableColumnFilterProps<T> = {
+    className?: string;
+    column: DataTableColumnsInterface<T>;
+    isFilterVisible?: boolean;
+    onToggleVisibility?: (column: DataTableColumnsInterface<T>) => void;
+};
+export declare const DataTableColumnFilter: <T>({ className, column, isFilterVisible, onToggleVisibility, }: DataTableColumnFilterProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterDate/DataTableColumnFilterDate.d.ts

@@ -0,0 +1,9 @@
+type DataTableColumnFilterDateProps = {
+    id: string;
+    name: string;
+    label: string;
+    onChange: (value: string) => void;
+    currentValue?: string;
+};
+export declare const DataTableColumnFilterDate: ({ id, name, label, onChange, currentValue, }: DataTableColumnFilterDateProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterDateRange/dataTableColumnFilterDateRange.d.ts

@@ -0,0 +1,9 @@
+type DataTableColumnFilterDateRangeProps = {
+    id: string;
+    name: string;
+    onChange: (startDate: string, endDate: string) => void;
+    currentStartValue?: string;
+    currentEndValue?: string;
+};
+export declare const DataTableColumnFilterDateRange: ({ id, name, onChange, currentStartValue, currentEndValue, }: DataTableColumnFilterDateRangeProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterEnum/DataTableColumnFilterEnum.d.ts

@@ -0,0 +1,13 @@
+import { EnumerableType } from '../../../../_core/type/generiqueType';
+import { TypeInputEnum } from '../../../../form/form.enum';
+
+type DataTableColumnFilterEnumProps = {
+    type: TypeInputEnum;
+    id: string;
+    name?: string;
+    data: EnumerableType[];
+    onChange: (value: string) => void;
+    currentValue?: string;
+};
+export declare const DataTableColumnFilterEnum: ({ type, id, onChange, name, data, currentValue, }: DataTableColumnFilterEnumProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterString/DataTableColumnFilterString.d.ts

@@ -0,0 +1,9 @@
+type DataTableColumnFilterStringProps = {
+    id: string;
+    name: string;
+    label: string;
+    onChange: (value: string) => void;
+    currentValue?: string;
+};
+export declare const DataTableColumnFilterString: ({ id, name, label, onChange, currentValue, }: DataTableColumnFilterStringProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/dataTable/dataTableColumn/dataTableColumnSort/DataTableColumnSort.d.ts

@@ -0,0 +1,11 @@
+import { DataTableSortDirection } from '../../DataTable';
+import { DataTableColumnsInterface } from '../../dataTable.interface';
+
+type DataTableColumnSortProps<T> = {
+    className?: string;
+    column: DataTableColumnsInterface<T>;
+    sortDirection?: DataTableSortDirection | null;
+    onToggleSort?: (column: DataTableColumnsInterface<T>) => void;
+};
+export declare const DataTableColumnSort: <T>({ className, column, sortDirection, onToggleSort, }: DataTableColumnSortProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/dataTable/dataTableFilters/DataTableFilters.d.ts

@@ -0,0 +1,7 @@
+import { DataTableFilterState } from '../DataTable';
+
+export type DataTableFiltersProps = {
+    currentFilters: DataTableFilterState;
+    setCurrentFilters: React.Dispatch<React.SetStateAction<DataTableFilterState>>;
+};
+export declare const DataTableFilters: ({ currentFilters, setCurrentFilters, }: DataTableFiltersProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/dataTable/dataTableLoading/DataTableLoading.d.ts

@@ -1,7 +1,5 @@
 type DataTableLoadingProps = {
-    columns: any[];
-    actions: any[];
     emptyMessage?: string;
 };
-export declare const DataTableLoading: ({ columns, actions, emptyMessage, }: DataTableLoadingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DataTableLoading: ({ emptyMessage }: DataTableLoadingProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/dataTable/dataTableRow/DataTableRow.d.ts

@@ -1,12 +1,11 @@
-import { dataTableColumnsInterface } from '../dataTable.interface';
+import { DataTableColumnsInterface } from '../dataTable.interface';
 
 type DataTableRowProps = {
-    column: dataTableColumnsInterface<any>;
+    column: DataTableColumnsInterface<any>;
     idx: number;
-    rowIndex: number;
     row: any;
-    container?: "cell" | "card";
-    onEnterNextColumn?: (columnIndex: number, rowIndex: number) => void;
+    onEditColumnByOverlay?: (row: any) => void;
+    stickyLeft?: number;
 };
-export declare const DataTableRow: ({ column, idx, rowIndex, row, container, onEnterNextColumn, }: DataTableRowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DataTableRow: ({ column, idx, row, onEditColumnByOverlay, stickyLeft, }: DataTableRowProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/dataTable/dataTableRow/dataTableRowOverlay/DataTableRowOverlay.d.ts

@@ -0,0 +1,12 @@
+import { DataTableColumnsInterface } from '../../dataTable.interface';
+
+type DataTableRowOverlayProps = {
+    row: any;
+    column: DataTableColumnsInterface<any>;
+    value: string;
+    refRow: React.RefObject<HTMLTableCellElement>;
+    onClose?: (close: boolean) => void;
+    onEditColumnByOverlay?: (newRow: any) => void;
+};
+export declare const DataTableRowOverlay: ({ row, refRow, value, onClose, column, onEditColumnByOverlay, }: DataTableRowOverlayProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/dataTable/dataTableRow/dataTableRowValue/DataTableRowValue.d.ts

@@ -0,0 +1,11 @@
+import { DataTableColumnsInterface } from '../../dataTable.interface';
+
+type DataTableRowValueProps = {
+    column: DataTableColumnsInterface<any>;
+    value: any;
+    row: any;
+    editable?: boolean;
+    onChange?: (value: any) => void;
+};
+export declare const DataTableRowValue: ({ column, row, value, editable, onChange, }: DataTableRowValueProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/expands/expand/expand.d.ts

@@ -5,6 +5,6 @@ export type ExpandProps = {
     item: ExpandInterface;
     className?: string;
     showArrow?: boolean;
-    onChange: (item: ExpandInterface) => void;
+    onChange?: (item: ExpandInterface) => void;
 };
 export declare const Expand: ({ currentExpand, item, className, showArrow, onChange, }: ExpandProps) => JSX.Element;

package/dist/form/Form.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { FormInterface, FormMode, FormValuesInterface } from './form.interface';
+import { FormInterface, FormValuesInterface } from './form.interface';
 
 export type FormProps<T extends {
     [key: string]: string | number | boolean | Date | string[];
@@ -12,7 +12,6 @@ export type FormProps<T extends {
     children?: React.ReactNode;
     initialForm: FormInterface[];
     disabledSubmit?: boolean;
-    mode?: FormMode;
     onSubmit?: (values: FormValuesInterface<T>) => void;
     onChange?: (values: FormValuesInterface<T>) => void;
 };

package/dist/form/form.enum.d.ts

@@ -8,7 +8,7 @@ export declare enum TypeInputEnum {
     CHECKBOX = "checkbox",
     RADIO = "radio",
     DATE = "date",
+    DATERANGE = "daterange",
     SELECT = "select",
-    TEXTAREA = "textarea",
-    PRICE = "price"
+    TEXTAREA = "textarea"
 }

package/dist/form/form.interface.d.ts

@@ -1,7 +1,5 @@
 import { TypeInputEnum } from './form.enum';
-import { GridBreakpoints } from '../grid/grid.interface';
 
-export type FormMode = "read" | "edit";
 export type FormValuesInterface<T extends {
     [key: string]: string | number | boolean | Date | string[];
 }> = Partial<{
@@ -24,13 +22,13 @@ export interface FormInterface {
     condition?: FormCondition;
     icon?: string;
     multiple?: boolean;
+    usePortal?: boolean;
+    searchable?: boolean;
     options?: {
         value: string;
         label: string;
     }[];
     className?: string;
-    col?: GridBreakpoints;
-    formatReadValue?: (value: string | number | boolean | Date | string[]) => React.ReactNode;
     autoComplete?: string;
     step?: string;
     onChange?: (value: string | number | boolean | Date | string[], name?: string) => void;

package/dist/form/input/Input.d.ts

@@ -12,12 +12,15 @@ export interface InputProps {
     disabled?: boolean;
     autoFocus?: boolean;
     required?: boolean;
+    disabledDebounce?: boolean;
     minLength?: number;
     maxLength?: number;
+    width?: string;
     autoComplete?: string;
     step?: string;
     tabIndex?: number;
     checked?: boolean;
+    showClearButton?: boolean;
     handleKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;

package/dist/form/inputNumber/InputNumber.d.ts

@@ -5,10 +5,8 @@ export type InputNumberProps = {
     value?: string;
     placeholder?: string;
     className?: string;
-    pattern?: string;
     disabled?: boolean;
     required?: boolean;
-    inputMode?: "numeric" | "decimal";
     autoFocus?: boolean;
     maxLength?: number;
     autoComplete?: string;

package/dist/grid/col/Col.d.ts

@@ -1,6 +1,9 @@
-import { GridBreakpoints } from '../grid.interface';
-
-type ColProps = GridBreakpoints & {
+/// <reference types="react" />
+type ColProps = {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
     children: React.ReactNode;
 };
 export declare const Col: React.FC<ColProps>;

package/dist/grid/col/colStyled/ColStyled.d.ts

@@ -1,11 +1,9 @@
-import { GridColumnSpan } from '../../grid.interface';
-
+/// <reference types="react" />
 type ColStyledProps = {
-    $xs?: GridColumnSpan;
-    $sm?: GridColumnSpan;
-    $md?: GridColumnSpan;
-    $lg?: GridColumnSpan;
-    $xl?: GridColumnSpan;
+    $xs?: number;
+    $sm?: number;
+    $md?: number;
+    $lg?: number;
 };
 export declare const ColStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ColStyledProps>> & string;
 export {};

package/dist/grid/grid.interface.d.ts

@@ -1,12 +1,8 @@
 /// <reference types="react" />
-export type GridColumnSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-export interface GridBreakpoints {
-    xs?: GridColumnSpan;
-    sm?: GridColumnSpan;
-    md?: GridColumnSpan;
-    lg?: GridColumnSpan;
-    xl?: GridColumnSpan;
-}
-export interface GridInterface extends GridBreakpoints {
+export interface GridInterface {
+    sm?: number;
+    xs?: number;
+    md?: number;
+    lg?: number;
     children: React.ReactNode;
 }

package/dist/header/Header.d.ts

@@ -1,3 +1,3 @@
 import { HeaderInterface } from './header.interface';
 
-export declare const Header: ({ children, logo, onClickMenu, userChildren, positionFixed, overlayClassName, onClickLogo, showBackNavigation, onClickBackNavigation, }: HeaderInterface) => JSX.Element;
+export declare const Header: ({ children, logo, onClickMenu, userChildren, positionFixed, onClickLogo, showBackNavigation, onClickBackNavigation, }: HeaderInterface) => JSX.Element;

package/dist/header/header.interface.d.ts

@@ -1,12 +1,11 @@
 /// <reference types="react" />
 export interface HeaderInterface {
-    logo?: React.ReactNode;
+    logo?: string;
     children?: React.ReactNode;
     positionFixed?: boolean;
     onClickMenu?: () => void;
     userChildren?: React.ReactNode;
     onClickLogo?: () => void;
-    overlayClassName?: string;
     showBackNavigation?: boolean;
     onClickBackNavigation?: () => void;
 }

package/dist/icon/Icon.d.ts

@@ -1,3 +1,3 @@
 import { IconInterface } from './icon.interface';
 
-export declare const Icon: ({ classIcon, size }: IconInterface) => JSX.Element;
+export declare const Icon: ({ classIcon, size, onClick, }: IconInterface) => JSX.Element;

package/dist/icon/icon.interface.d.ts

@@ -3,4 +3,5 @@ import { IconSizeEnum } from './iconSize.enum';
 export interface IconInterface {
     classIcon: string;
     size?: IconSizeEnum;
+    onClick?: (e: React.MouseEvent) => void;
 }

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export { Badge } from './badge/Badge';
 export { Button } from './button/Button';
 export { ButtonActions } from './button/buttonActions/ButtonActions';
 export { ButtonFile } from './button/buttonFile/ButtonFile';
+export { ButtonFilters } from './button/buttonFilters/ButtonFilters';
 export { Card } from './card/Card';
 export { Carousel } from './carousel/Carousel';
 export { Damier } from './damier/Damier';
@@ -24,7 +25,6 @@ export { Expands } from './expands/Expands';
 export { FilAriane } from './filAriane/FilAriane';
 export { DynamicForm } from './form/Form';
 export { TypeInputEnum } from './form/form.enum';
-export type { FormMode } from './form/form.interface';
 export { Input } from './form/input/Input';
 export { InputNumber } from './form/inputNumber/InputNumber';
 export { InputPrice } from './form/inputPrice/InputPrice';