kelt-ui-kit-react 1.7.8 → 1.8.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "1.7.8",
+  "version": "1.8.0",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/sidebar/Sidebar.tsx

@@ -29,6 +29,8 @@ export const Sidebar = ({
   const [isOpen, setIsOpen] = useState(open || false);
   const sidebarRef = useRef<HTMLDivElement | null>(null);
   const rootRef = useRef<HTMLDivElement | null>(null);
+  const touchStartX = useRef(0);
+  const touchStartY = useRef(0);
 
   // Créer le conteneur une seule fois
   useEffect(() => {
@@ -60,7 +62,7 @@ export const Sidebar = ({
   }, [onClose]);
 
   const handleClickOutside = useCallback(
-    (event: MouseEvent) => {
+    (event: MouseEvent | TouchEvent) => {
       if (!closeOnClickOutside) return;
       if (
         sidebarRef.current &&
@@ -69,18 +71,53 @@ export const Sidebar = ({
         toggleSidebar();
       }
     },
-    [toggleSidebar, closeOnClickOutside]
+    [toggleSidebar, closeOnClickOutside],
+  );
+
+  const handleTouchStart = useCallback((event: React.TouchEvent) => {
+    const touch = event.touches[0];
+    touchStartX.current = touch.clientX;
+    touchStartY.current = touch.clientY;
+  }, []);
+
+  const handleTouchEnd = useCallback(
+    (event: React.TouchEvent) => {
+      if (!isOpen) return;
+
+      const touch = event.changedTouches[0];
+      const deltaX = touch.clientX - touchStartX.current;
+      const deltaY = Math.abs(touch.clientY - touchStartY.current);
+
+      // Ferme seulement sur un vrai swipe horizontal gauche -> droite.
+      if (deltaX > 60 && deltaY < 40) {
+        toggleSidebar();
+      }
+    },
+    [isOpen, toggleSidebar],
+  );
+
+  const handleOverlayTouchEnd = useCallback(
+    (event: React.TouchEvent) => {
+      event.preventDefault();
+      toggleSidebar();
+    },
+    [toggleSidebar],
   );
 
   useEffect(() => {
     if (isOpen) {
       document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("touchstart", handleClickOutside, {
+        passive: true,
+      });
     } else {
       document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("touchstart", handleClickOutside);
     }
 
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("touchstart", handleClickOutside);
     };
   }, [isOpen, handleClickOutside]);
 
@@ -90,11 +127,19 @@ export const Sidebar = ({
 
   return ReactDOM.createPortal(
     <>
-      {isOpen && displayOverlay && <div className="overlay"></div>}
+      {isOpen && displayOverlay && (
+        <div
+          className="overlay"
+          onClick={toggleSidebar}
+          onTouchEnd={handleOverlayTouchEnd}
+        ></div>
+      )}
       <div
         ref={sidebarRef}
         style={width ? { width: width } : {}}
         className={`sidebar ${isOpen ? "open" : "closed"} ${className ?? ""}`}
+        onTouchStart={handleTouchStart}
+        onTouchEnd={handleTouchEnd}
       >
         <div className="sidebar-header">
           {title && <h2 className="flex-1">{title}</h2>}
@@ -106,6 +151,6 @@ export const Sidebar = ({
         {children && children}
       </div>
     </>,
-    rootRef.current
+    rootRef.current,
   );
 };

package/src/sidebar/sidebar.css

@@ -1,3 +1,12 @@
+.overlay {
+  touch-action: none;
+}
+
+.toggle-btn {
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+
 .sidebar {
   width: 200px;
   height: 100vh;
@@ -10,6 +19,8 @@
   transform: translateX(0);
   z-index: 2;
 
+
+
   &:not(.full) {
     inset: 0;
   }
@@ -84,4 +95,4 @@
       width: 40vw;
     }
   }
-}
+}

package/dist/App.d.ts

@@ -1,3 +0,0 @@
-
-declare const App: React.FC;
-export default App;

package/dist/App.menu.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-export type MenuProps = {
-    id: number;
-    name: string;
-    children: JSX.Element;
-    link: string;
-    element: JSX.Element;
-};
-export declare const MenuList: MenuProps[];
-export declare const AppMenu: () => JSX.Element;

package/dist/App.routes.d.ts

@@ -1 +0,0 @@
-export declare const AppRoutes: () => JSX.Element;

package/dist/_core/hooks/HistoryProvider.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare function HistoryProvider({ children }: {
-    children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function useHistoryDepth(): number;

package/dist/_core/hooks/ImageChecker.d.ts

@@ -1,7 +0,0 @@
-import { default as React } from 'react';
-
-interface ImageCheckerProps {
-    imageUrl: string;
-}
-export declare const ImageChecker: React.FC<ImageCheckerProps>;
-export {};

package/dist/_core/hooks/imageExist.d.ts

@@ -1,7 +0,0 @@
-import { default as React } from 'react';
-
-interface ImageCheckerProps {
-    imageUrl: string;
-}
-export declare const ImageExist: React.FC<ImageCheckerProps>;
-export {};

package/dist/_core/hooks/isEAN13.d.ts

@@ -1 +0,0 @@
-export declare const isValidEAN13: (value: string) => boolean;

package/dist/_core/hooks/objectToQueryParams.d.ts

@@ -1 +0,0 @@
-export declare const objectToQueryParams: (obj: Record<string, any>, prefix?: string) => string;

package/dist/_core/hooks/useCurrency.d.ts

@@ -1,3 +0,0 @@
-export declare const useCurrency: (locale?: string, currency?: string) => {
-    formatCurrency: (value: number) => string;
-};

package/dist/_core/hooks/useDateutils.d.ts

@@ -1,4 +0,0 @@
-export declare function FormatDate(date: Date, format: string): string;
-export declare function LocalDateStringToUTC(dateStr: string): string;
-export declare function localDateStartToUTC(dateStr: string): Date;
-export declare function localDateEndToUTC(dateStr: string): Date;

package/dist/_core/hooks/useIsMobile.d.ts

@@ -1 +0,0 @@
-export declare const useIsMobile: (maxWidth?: number) => boolean;

package/dist/_core/hooks/useToken.d.ts

@@ -1,3 +0,0 @@
-export declare const useToken: () => {
-    getTokenValidate: () => string | null;
-};

package/dist/_core/hooks/useValidate.d.ts

@@ -1,5 +0,0 @@
-export declare const useValidate: () => {
-    isValidateEmail: (input: string) => boolean;
-    isValidateTel: (input: string) => boolean;
-    isValidateCodePostal: (input: string) => boolean;
-};

package/dist/_core/hooks/widgetSupport.d.ts

@@ -1 +0,0 @@
-export declare const WidgetSupport: () => import("react/jsx-runtime").JSX.Element;

package/dist/action/Action.view.d.ts

@@ -1 +0,0 @@
-export declare const ActionView: () => JSX.Element;

package/dist/action/ButtonAction.d.ts

@@ -1,10 +0,0 @@
-import { BadgeInterface } from '../badge/Badge';
-
-export type ButtonActionProps = {
-    className?: string;
-    onClick?: (e: React.MouseEvent) => void;
-    title?: string;
-    classIcon?: string;
-    badge?: BadgeInterface;
-};
-export declare const ButtonAction: ({ className, onClick, title, classIcon, badge, }: ButtonActionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/badge/Badge.d.ts

@@ -1,10 +0,0 @@
-import { IconSizeEnum } from '../icon/iconSize.enum';
-
-export type BadgeInterface = {
-    className?: string;
-    onClick?: (e: React.MouseEvent) => void;
-    title?: string;
-    sizeIcon?: IconSizeEnum;
-    classIcon?: string;
-};
-export declare const Badge: ({ className, onClick, title, sizeIcon, classIcon, }: BadgeInterface) => import("react/jsx-runtime").JSX.Element;

package/dist/badge/Badge.view.d.ts

@@ -1 +0,0 @@
-export declare const BadgeView: () => JSX.Element;

package/dist/button/Button.d.ts

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

package/dist/button/Button.view.d.ts

@@ -1 +0,0 @@
-export declare const ButtonView: () => JSX.Element;

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

@@ -1,21 +0,0 @@
-import { BadgeInterface } from '../badge/Badge';
-import { IconSizeEnum } from '../icon/iconSize.enum';
-
-export interface ButtonInterface {
-    className?: string;
-    badge?: BadgeInterface;
-    id?: string;
-    onClick?: (e: React.MouseEvent) => void;
-    title: string;
-    classIcon?: string;
-    positionicon?: number;
-    disabled?: boolean;
-    sizeIcon?: IconSizeEnum;
-}
-export interface buttonActionInterface {
-    icon?: string;
-    id?: number | string;
-    label: string;
-    disabled?: boolean;
-    onClick: (a: buttonActionInterface) => void;
-}

package/dist/button/buttonActions/ButtonActions.d.ts

@@ -1,14 +0,0 @@
-import { PositionOverlay } from '../../overlayPanel/OverlayPanel';
-import { buttonActionInterface } from '../button.interface';
-
-export type ButtonActionsProps = {
-    className?: string;
-    onClick?: (e: React.MouseEvent) => void;
-    title: string;
-    actions?: buttonActionInterface[];
-    classIcon?: string;
-    positionActions?: PositionOverlay;
-    disabled?: boolean;
-    id?: string;
-};
-export declare const ButtonActions: ({ className, onClick, title, actions, positionActions, disabled, id, }: ButtonActionsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/button/buttonFile/ButtonFile.d.ts

@@ -1,9 +0,0 @@
-interface ButtonFileProps {
-    onFileSelected?: (file: File, buffer: ArrayBuffer) => void;
-    accept?: string;
-    buttonText?: string;
-    buttonClassName?: string;
-    containerClassName?: string;
-}
-export declare const ButtonFile: ({ onFileSelected, accept, buttonText, buttonClassName, containerClassName, }: ButtonFileProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/button/buttonFile/ButtonFile.view.d.ts

@@ -1 +0,0 @@
-export declare const ButtonFileView: () => import("react/jsx-runtime").JSX.Element;

package/dist/button/buttonFilters/ButtonFilters.d.ts

@@ -1,19 +0,0 @@
-import { FormInterface, FormValuesInterface } from '../../form/form.interface';
-import { IconSizeEnum } from '../../icon/iconSize.enum';
-
-export type ButtonActionsProps<T extends {
-    [key: string]: string | number | boolean | Date | string[];
-}> = {
-    className?: string;
-    onClick?: (e: React.MouseEvent) => void;
-    title: string;
-    classIcon?: string;
-    sizeIcon?: IconSizeEnum;
-    dataForm: FormInterface[];
-    onChange?: (values: FormValuesInterface<T>) => void;
-    disabled?: boolean;
-    id?: string;
-};
-export declare const ButtonFilters: <T extends {
-    [key: string]: string | number | boolean | string[] | Date;
-}>({ className, onClick, title, classIcon, sizeIcon, disabled, id, dataForm, onChange, }: ButtonActionsProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/card/Card.d.ts

@@ -1,16 +0,0 @@
-import { PositionOverlay } from '../overlayPanel/OverlayPanel';
-import { CardInterface } from './card.interface';
-import { CardActionInterface } from './cardAction.interface';
-
-type CardProps = {
-    item: CardInterface;
-    actions?: CardActionInterface[];
-    className?: string;
-    handleClick?: (item: CardInterface) => void;
-    onClose?: (item: CardInterface) => void;
-    children?: JSX.Element;
-    customAction?: JSX.Element;
-    positionOverlay?: PositionOverlay;
-};
-export declare const Card: ({ item, actions, className, handleClick, onClose, customAction, positionOverlay, children, }: CardProps) => JSX.Element;
-export {};

package/dist/card/Card.view.d.ts

@@ -1 +0,0 @@
-export declare const CardView: () => JSX.Element;

package/dist/card/card.interface.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-export interface CardInterface {
-    id?: number | string;
-    uuid?: string;
-    title: string | JSX.Element;
-    description?: string | JSX.Element;
-    image?: string;
-    prix?: string | JSX.Element;
-    quantity?: number;
-}

package/dist/card/cardAction/CardAction.d.ts

@@ -1,16 +0,0 @@
-import { CardInterface } from '../card.interface';
-import { CardActionInterface } from '../cardAction.interface';
-
-export type PositionOverlay = "left" | "right" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
-export type CardActionProps = {
-    actions: CardActionInterface[];
-    item?: CardInterface;
-    openActions?: boolean;
-    positions?: {
-        top: number;
-        left: number;
-    };
-    positionOverlay?: PositionOverlay;
-    setOpenActions?: (open: boolean) => void;
-};
-export declare const CardAction: ({ actions, openActions, item, positions, positionOverlay, setOpenActions, }: CardActionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/card/cardAction.interface.d.ts

@@ -1,10 +0,0 @@
-import { CardInterface } from './card.interface';
-
-export interface CardActionInterface {
-    icon: string;
-    label?: string;
-    disabled?: (item: CardInterface) => boolean;
-    onClick: (item: CardInterface) => void;
-    setLabel?: (item: CardInterface) => string;
-    type?: "menu" | "link";
-}

package/dist/card/hook/useCardInteractions.d.ts

@@ -1,8 +0,0 @@
-export declare const useCardInteractions: (callback: () => void) => {
-    ref: import('react').RefObject<HTMLDivElement>;
-    isHovered: boolean;
-    mouseHandlers: {
-        onMouseEnter: () => void;
-        onMouseLeave: () => void;
-    };
-};

package/dist/carousel/Carousel.d.ts

@@ -1,16 +0,0 @@
-import { default as React, ReactNode } from 'react';
-
-interface Breakpoints {
-    sm?: number;
-    md?: number;
-    lg?: number;
-    xl?: number;
-}
-interface CarouselProps {
-    children: ReactNode[];
-    showControls?: boolean;
-    itemsToScroll?: number;
-    breakpoints?: Breakpoints;
-}
-export declare const Carousel: React.FC<CarouselProps>;
-export {};

package/dist/carousel/Carousel.view.d.ts

@@ -1 +0,0 @@
-export declare const CarouselView: () => import("react/jsx-runtime").JSX.Element;

package/dist/damier/Damier.d.ts

@@ -1,11 +0,0 @@
-import { DamierCellInterface } from './damierCell/damierCell.interface';
-
-interface DamierProps {
-    cols?: number;
-    rows?: number;
-    page?: number;
-    damierCells?: DamierCellInterface[];
-    onClick?: (cell: DamierCellInterface) => void;
-}
-export declare const Damier: ({ cols, rows, damierCells, page, onClick, }: DamierProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/damier/Damier.view.d.ts

@@ -1 +0,0 @@
-export declare const DamierView: () => import("react/jsx-runtime").JSX.Element;

package/dist/damier/damierCell/DamierCell.d.ts

@@ -1,8 +0,0 @@
-import { DamierCellInterface } from './damierCell.interface';
-
-interface DamierCellProps {
-    cell: DamierCellInterface;
-    onClick?: (cell: DamierCellInterface) => void;
-}
-export declare const DamierCell: ({ cell, onClick }: DamierCellProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/damier/damierCell/damierCell.interface.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export interface DamierCellInterface {
-    child?: JSX.Element;
-    position?: number;
-    id?: number;
-}

package/dist/dataTable/DataTable.d.ts

@@ -1,23 +0,0 @@
-import { dataTableActionsInterface, dataTableColumnsInterface } from './dataTable.interface';
-
-export type DataTableProps<T> = {
-    id: string;
-    name?: string;
-    className?: string;
-    children?: JSX.Element;
-    element?: JSX.Element;
-    data: T[];
-    emptyMessage?: string;
-    actions?: dataTableActionsInterface<T>[];
-    columns: dataTableColumnsInterface<T>[];
-    loading?: boolean;
-    onRowClick?: (row: any) => void;
-    onColumnClick?: (column: any) => void;
-    onLoadMore?: () => void;
-    hasMore?: boolean;
-    onSelectionChange?: (selectedRows: T[]) => void;
-    hideToggleAll?: boolean;
-    limitSelect?: number;
-    getRowId?: (row: T) => string | number;
-};
-export declare function DataTable<T>(props: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/dataTable/DataTable.view.d.ts

@@ -1 +0,0 @@
-export declare const DataTableView: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,33 +0,0 @@
-import { HTMLInputTypeAttribute } from 'react';
-
-export interface dataTableColumnsInterface<T> {
-    id: string;
-    label: string;
-    minWidth?: number;
-    maxWidth?: number;
-    width?: number;
-    align?: "right" | "left" | "center";
-    format?: (value: any) => string;
-    sortable?: boolean;
-    filterable?: boolean;
-    filterValue?: string;
-    editable?: boolean;
-    options?: {
-        label: string;
-        value: string;
-    }[];
-    onEdit?: (value: any, row: T) => void;
-    onRowStyle?: (row: T) => React.CSSProperties;
-    type: HTMLInputTypeAttribute | "select";
-}
-export interface dataTableActionsInterface<T> {
-    id: string;
-    label: string;
-    type: "button" | "link" | "icon";
-    classIcon?: string;
-    onClick: (row: T) => void;
-    shouldDisplay?: (row: T) => boolean;
-    disabled?: boolean;
-    labelButton?: (row: T) => string;
-    visible?: boolean;
-}

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

@@ -1,9 +0,0 @@
-import { dataTableActionsInterface } from '../dataTable.interface';
-
-type DataTableActionProps = {
-    action: dataTableActionsInterface<any>;
-    row: any;
-    index?: number;
-};
-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 +0,0 @@
-import { dataTableColumnsInterface } from '../dataTable.interface';
-
-type DataTableColumnProps = {
-    column: dataTableColumnsInterface<any>;
-    idx: number;
-    onColumnClick?: (column: dataTableColumnsInterface<any>) => void;
-};
-export declare const DataTableColumn: ({ column, idx, onColumnClick, }: DataTableColumnProps) => import("react/jsx-runtime").JSX.Element;
-export {};

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

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

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

@@ -1,9 +0,0 @@
-import { dataTableColumnsInterface } from '../dataTable.interface';
-
-type DataTableRowProps = {
-    column: dataTableColumnsInterface<any>;
-    idx: number;
-    row: any;
-};
-export declare const DataTableRow: ({ column, idx, row }: DataTableRowProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/datePicker/DatePicker.d.ts

@@ -1,9 +0,0 @@
-import { Value } from 'react-calendar/dist/cjs/shared/types';
-
-export type DatePickerProps = {
-    value?: Value;
-    maxDate?: Date;
-    onChange?: (date: Value) => void;
-    children?: React.ReactNode;
-};
-export declare const DatePicker: ({ value, onChange, maxDate, children, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/datePicker/DatePicker.view.d.ts

@@ -1 +0,0 @@
-export declare const DatePickerView: () => import("react/jsx-runtime").JSX.Element;

package/dist/expands/Expands.d.ts

@@ -1,11 +0,0 @@
-import { ExpandInterface } from './expand/expand.interface';
-
-type ExpandProps = {
-    items: ExpandInterface[];
-    className?: string;
-    onChange?: (item: ExpandInterface) => void;
-    currentItem?: ExpandInterface;
-    showArrow?: boolean;
-};
-export declare const Expands: (props: ExpandProps) => import("react/jsx-runtime").JSX.Element;
-export type { ExpandProps };

package/dist/expands/Expands.view.d.ts

@@ -1 +0,0 @@
-export declare const ExpandsView: () => JSX.Element;

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

@@ -1,10 +0,0 @@
-import { ExpandInterface } from './expand.interface';
-
-export type ExpandProps = {
-    currentExpand?: ExpandInterface;
-    item: ExpandInterface;
-    className?: string;
-    showArrow?: boolean;
-    onChange: (item: ExpandInterface) => void;
-};
-export declare const Expand: ({ currentExpand, item, className, showArrow, onChange, }: ExpandProps) => JSX.Element;

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

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-export interface ExpandInterface {
-    id?: number;
-    title: string | React.ReactNode;
-    description?: string | React.ReactNode;
-    content?: React.ReactNode;
-    headerContent?: React.ReactNode;
-    footer?: JSX.Element;
-}

package/dist/filAriane/FilAriane.d.ts

@@ -1,10 +0,0 @@
-import { FilArianeInterface } from './filAriane.interface';
-
-type FilArianeProps = {
-    filArianes?: FilArianeInterface[];
-    currentFil?: number;
-    title?: string;
-    onClick?: (fil?: FilArianeInterface) => void;
-};
-export declare const FilAriane: ({ filArianes, onClick, currentFil, title, }: FilArianeProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/filAriane/FilAriane.view.d.ts

@@ -1 +0,0 @@
-export declare const FilArianeView: () => import("react/jsx-runtime").JSX.Element;

package/dist/filAriane/filAriane.interface.d.ts

@@ -1,6 +0,0 @@
-export interface FilArianeInterface {
-    id: number;
-    title?: string;
-    url?: string;
-    isLast: boolean;
-}