kelt-ui-kit-react 2.0.3 → 2.0.4

package/src/sidebar/Sidebar.tsx

@@ -15,6 +15,9 @@ export interface SidebarProps {
   onClose?: (close: boolean) => void;
 }
 
+const SWIPE_CLOSE_THRESHOLD = 60; // px à parcourir pour fermer
+const SWIPE_AXIS_LOCK_THRESHOLD = 10; // px pour déterminer l'axe du geste
+
 export const Sidebar = ({
   open,
   children,
@@ -27,8 +30,13 @@ export const Sidebar = ({
   displayOverlay = true,
 }: SidebarProps): JSX.Element => {
   const [isOpen, setIsOpen] = useState(open || false);
+  const [dragX, setDragX] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
   const sidebarRef = useRef<HTMLDivElement | null>(null);
   const rootRef = useRef<HTMLDivElement | null>(null);
+  const touchStartX = useRef(0);
+  const touchStartY = useRef(0);
+  const axisLocked = useRef<"x" | "y" | null>(null);
 
   // Créer le conteneur une seule fois
   useEffect(() => {
@@ -60,7 +68,7 @@ export const Sidebar = ({
   }, [onClose]);
 
   const handleClickOutside = useCallback(
-    (event: MouseEvent) => {
+    (event: MouseEvent | TouchEvent) => {
       if (!closeOnClickOutside) return;
       if (
         sidebarRef.current &&
@@ -69,18 +77,98 @@ 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;
+    axisLocked.current = null;
+    setIsDragging(false);
+    setDragX(0);
+  }, []);
+
+  const handleTouchMove = useCallback(
+    (event: React.TouchEvent) => {
+      if (!isOpen) return;
+
+      const touch = event.touches[0];
+      const deltaX = touch.clientX - touchStartX.current;
+      const deltaY = touch.clientY - touchStartY.current;
+
+      // Détermine l'axe du geste une seule fois, dès qu'on a un déplacement suffisant
+      if (!axisLocked.current) {
+        if (
+          Math.abs(deltaX) < SWIPE_AXIS_LOCK_THRESHOLD &&
+          Math.abs(deltaY) < SWIPE_AXIS_LOCK_THRESHOLD
+        ) {
+          return; // pas encore assez de mouvement pour trancher
+        }
+        axisLocked.current = Math.abs(deltaX) > Math.abs(deltaY) ? "x" : "y";
+      }
+
+      if (axisLocked.current !== "x") {
+        return;
+      }
+
+      // Ignore les petits mouvements horizontaux
+      if (deltaX < 20) {
+        return;
+      }
+
+      event.preventDefault();
+
+      setIsDragging(true);
+      setDragX(Math.max(0, deltaX));
+    },
+    [isOpen],
+  );
+
+  const handleTouchEnd = useCallback(
+    (event: React.TouchEvent) => {
+      if (!isOpen) {
+        return;
+      }
+
+      if (axisLocked.current === "x") {
+        const touch = event.changedTouches[0];
+        const deltaX = touch.clientX - touchStartX.current;
+
+        if (deltaX > SWIPE_CLOSE_THRESHOLD) {
+          toggleSidebar();
+        }
+      }
+
+      setIsDragging(false);
+      setDragX(0);
+      axisLocked.current = null;
+    },
+    [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 +178,25 @@ 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 } : {}}
+        style={{
+          ...(width ? { width } : {}),
+          transform: dragX ? `translateX(${dragX}px)` : undefined,
+          transition: isDragging ? "none" : undefined,
+        }}
         className={`sidebar ${isOpen ? "open" : "closed"} ${className ?? ""}`}
+        onClick={(event) => event.stopPropagation()}
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}
       >
         <div className="sidebar-header">
           {title && <h2 className="flex-1">{title}</h2>}
@@ -106,6 +208,6 @@ export const Sidebar = ({
         {children && children}
       </div>
     </>,
-    rootRef.current
+    rootRef.current,
   );
 };

package/src/sidebar/sidebar.css

@@ -1,3 +1,18 @@
+.sidebar {
+  touch-action: pan-y;
+  /* laisse le scroll vertical natif, gère le X nous-même */
+  will-change: transform;
+}
+
+.overlay {
+  touch-action: none;
+}
+
+.toggle-btn {
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+
 .sidebar {
   width: 200px;
   height: 100vh;
@@ -10,6 +25,8 @@
   transform: translateX(0);
   z-index: 2;
 
+
+
   &:not(.full) {
     inset: 0;
   }
@@ -84,4 +101,4 @@
       width: 40vw;
     }
   }
-}
+}

package/src/tabs/Tabs.tsx

@@ -15,7 +15,6 @@ export type TabsProps = {
   className?: string;
   tabClassName?: string;
   panelClassName?: string;
-  keepMountedVisited?: boolean;
 };
 
 export const Tabs = ({
@@ -26,14 +25,9 @@ export const Tabs = ({
   className = "",
   tabClassName = "",
   panelClassName = "",
-  keepMountedVisited = false,
 }: TabsProps) => {
   const isControlled = typeof index === "number";
   const [active, setActive] = useState<number>(defaultIndex);
-  // En mode contrôlé, seul l'onglet réellement affiché est considéré comme visité
-  const [visitedTabs, setVisitedTabs] = useState<Set<number>>(
-    () => new Set([isControlled ? (index as number) : defaultIndex]),
-  );
   const current = isControlled ? (index as number) : active;
 
   useEffect(() => {
@@ -43,18 +37,6 @@ export const Tabs = ({
     }
   }, [defaultIndex, items.length, isControlled]);
 
-  useEffect(() => {
-    setVisitedTabs((prev) => {
-      if (prev.has(current)) {
-        return prev;
-      }
-
-      const next = new Set(prev);
-      next.add(current);
-      return next;
-    });
-  }, [current]);
-
   const tabsRef = useRef<Array<HTMLButtonElement | null>>([]);
 
   const activate = (next: number) => {
@@ -100,8 +82,7 @@ export const Tabs = ({
           hidden={current !== i}
           className={`${panelClassName} mt-3`}
         >
-          {(current === i || (keepMountedVisited && visitedTabs.has(i))) &&
-            t.panel}
+          {current === i && t.panel}
         </div>
       ))}
     </div>

package/src/tabs/tabs.css

@@ -1,24 +1,30 @@
 .tabs-root {
   height: 100%;
+
   .tabs-header {
     display: flex;
     border-bottom: 1px solid #b2a1a1;
+
     .tab-button {
       padding: 0.5rem 0.75rem;
       border: 0px;
       outline: none;
       background-color: transparent;
-      color: #1e293b; /* slate-800 */
+      color: #1e293b;
+      /* slate-800 */
       cursor: pointer;
 
       &.tab-button--active {
-        border-bottom: 2px solid var(--primary-color); /* slate-800 */
+        border-bottom: 2px solid var(--primary-color);
+        /* slate-800 */
         border-radius: 0px;
+        font-weight: bold;
       }
+
       &.tab-button--disabled {
         opacity: 0.5;
         cursor: not-allowed;
       }
     }
   }
-}
+}

package/src/toaster/Toaster.tsx

@@ -34,9 +34,14 @@ export const Toaster = () => {
   return ReactDOM.createPortal(
     <div className={`toaster toaster-${severity}`}>
       {close && (
-        <div className="toaster--close" onClick={onClose}>
+        <button
+          type="button"
+          className="toaster--close"
+          onClick={onClose}
+          aria-label="Fermer la notification"
+        >
           <Icon classIcon="bi-x" />
-        </div>
+        </button>
       )}
       <div>
         {severity === "info" && <Icon classIcon="bi-info-circle" />}

package/src/toaster/Toaster.view.tsx

@@ -9,6 +9,7 @@ export const ToasterView = (): JSX.Element => {
       description: "This is a description for the toast message.",
       severity: "warning",
       duration: 10000,
+      close: true,
       children: <div>Additional content can go here.</div>,
     });
   }, [showToast]);

package/src/toaster/store/useToasterStore.tsx

@@ -15,6 +15,7 @@ type ToasterState = {
       severity?: "info" | "success" | "error" | "warning";
       duration?: number;
       children?: React.ReactNode;
+      close?: boolean;
     }
   ) => void;
   hideToast: () => void;
@@ -36,6 +37,7 @@ export const useToasterStore = create<ToasterState>((set) => ({
       duration: options.duration || 2500,
       visible: true,
       children: options.children || null,
+      close: options.close ?? true,
     })),
   hideToast: () => set(() => ({ visible: false })),
 }));

package/src/toaster/toaster.css

@@ -15,7 +15,12 @@
     position: absolute;
     top: 2px;
     right: 2px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
     color: #333;
+    min-width: auto;
     cursor: pointer;
     .bi {
       font-size: 1.2rem;
@@ -55,7 +60,7 @@
   }
   .title {
     font-weight: 500;
-    font-size: 16px;
+    font-size: 18px;
     &.title-info {
       color: var(--primary-color);
     }
@@ -70,7 +75,7 @@
     }
   }
   .subtitle {
-    font-size: 14px;
+    font-size: 16px;
   }
   .bi-info-circle {
     color: var(--primary-color);

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

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

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

@@ -1,10 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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/dataTableRow/dataTableRowOverlay/DataTableRowOverlay.d.ts

@@ -1,12 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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/package/package.json

@@ -1,56 +0,0 @@
-{
-  "name": "kelt-ui-kit-react",
-  "type": "module",
-  "version": "1.8.2",
-  "private": false,
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "dependencies": {
-    "@types/node": "^22.5.5",
-    "@vitejs/plugin-react": "^4.3.1",
-    "bootstrap-icons": "^1.11.3",
-    "jwt-decode": "^4.0.0",
-    "react-date-picker": "^11.0.0",
-    "styled-components": "^6.1.13",
-    "vite": "^5.4.6",
-    "vite-plugin-dts": "^4.2.2",
-    "vite-plugin-eslint": "^1.8.1",
-    "web-vitals": "^2.1.4",
-    "zustand": "^5.0.5"
-  },
-  "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router-dom": "^6.26.2"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@types/react-dom": "^18.3.0",
-    "@types/react-router-dom": "^5.3.3",
-    "typescript": "^4.9.5",
-    "vite-plugin-checker": "^0.8.0"
-  }
-}