kelt-ui-kit-react 1.8.3 → 1.8.5

package/src/select/Select.tsx

@@ -1,7 +1,5 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useRef } from "react";
 import { Icon } from "../icon/Icon";
-
-import { OverlayPanel } from "../overlayPanel/OverlayPanel";
 import "./select.css";
 import { SelectOptionInterface } from "./selectOption.interface";
 
@@ -13,8 +11,6 @@ export interface SelectProps {
   name?: string;
   defaultValue?: string | string[];
   multiple?: boolean;
-  showOptions?: boolean;
-  usePortal?: boolean;
   required?: boolean;
   value?: string | string[];
   className?: string;
@@ -22,7 +18,6 @@ export interface SelectProps {
   onChangeMultiple?: (value: string[]) => void;
   onChange?: (value: string) => void;
   placeholder?: string;
-  classNameOverlay?: string;
 }
 
 export const Select = ({
@@ -32,92 +27,38 @@ export const Select = ({
   className,
   disabled,
   multiple = false,
-  showOptions = false,
+  required = false,
   defaultValue,
-  usePortal = false,
+  name,
   onChange,
   onChangeMultiple,
   value,
   placeholder,
-  classNameOverlay,
 }: SelectProps): JSX.Element => {
-  const [showOverlay, setShowOverlay] = useState(false);
-  const [overlayRef, setOverlayRef] = useState<HTMLElement | null>(null);
-  const triggerRef = useRef<HTMLButtonElement | null>(null);
-  const hasAutoOpened = useRef(false);
-  const optionsListRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    if (!showOverlay) return;
-    const timer = setTimeout(() => {
-      const container = optionsListRef.current;
-      if (!container) return;
-      const selected = container.querySelector<HTMLElement>(
-        ".select-overlay-option.selected",
-      );
-      selected?.scrollIntoView({ block: "nearest" });
-    }, 0);
-    return () => clearTimeout(timer);
-  }, [showOverlay]);
-  const selectedValues = Array.isArray(value)
-    ? value
-    : value
-      ? [value]
-      : defaultValue
-        ? Array.isArray(defaultValue)
-          ? defaultValue
-          : [defaultValue]
-        : [];
+  const inputRefs = useRef<{ [key: string]: HTMLSelectElement | null }>({});
 
-  const getDisplayValue = () => {
-    if (selectedValues.length === 0) return placeholder || "";
+  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    let selectedValue: string | string[];
     if (multiple) {
-      const labels = selectedValues
-        .map((v) => options.find((opt) => opt.value === v)?.label)
-        .filter((l): l is string => !!l);
-      return labels.join(", ");
-    }
-    const selected = options.find((opt) => opt.value === selectedValues[0]);
-    return selected?.label || "";
-  };
-
-  const handleOptionClick = (optionValue: string) => {
-    if (multiple) {
-      const newValues = selectedValues.includes(optionValue)
-        ? selectedValues.filter((v) => v !== optionValue)
-        : [...selectedValues, optionValue];
+      selectedValue = Array.from(
+        event.target.selectedOptions,
+        (opt) => opt.value
+      );
       if (onChangeMultiple) {
-        onChangeMultiple(newValues);
+        onChangeMultiple(selectedValue as string[]);
       }
     } else {
+      selectedValue = event.target.value;
       if (onChange) {
-        onChange(optionValue);
+        onChange(selectedValue);
       }
-      setShowOverlay(false);
     }
   };
-
   const resetValue = useCallback(() => {
-    if (multiple && onChangeMultiple) {
-      onChangeMultiple([]);
-    } else if (onChange) {
+    if (onChange) {
       onChange("");
     }
-  }, [onChange, onChangeMultiple, multiple]);
-
-  useEffect(() => {
-    if (
-      showOptions &&
-      !disabled &&
-      !hasAutoOpened.current &&
-      triggerRef.current
-    ) {
-      setOverlayRef(triggerRef.current);
-      setShowOverlay(true);
-      hasAutoOpened.current = true;
-    }
-  }, [showOptions, disabled]);
-
+  }, [onChange]);
   return (
     <div id={id} className={`select-container ${className ? className : ""}`}>
       {label && (
@@ -125,73 +66,36 @@ export const Select = ({
           {label}
         </label>
       )}
-      <button
-        ref={triggerRef}
-        id={`select-${id}`}
+      <select
+        defaultValue=""
+        required={required}
+        name={name}
         disabled={disabled}
-        className="select-container-button"
-        onClick={(e) => {
-          setOverlayRef(e.currentTarget as HTMLElement);
-          setShowOverlay(true);
-        }}
-        type="button"
-        aria-valuetext={getDisplayValue() || placeholder}
-        aria-haspopup="listbox"
-        aria-expanded={showOverlay}
+        id={`select-${id}`}
+        className="select-container-select"
+        value={value ?? defaultValue ?? (multiple ? [] : "")}
+        onChange={handleChange}
+        multiple={multiple}
+        ref={(el) => (inputRefs.current[id ?? "select"] = el)}
       >
-        <span className="select-container-value">
-          {getDisplayValue() || (
-            <span className="placeholder">{placeholder}</span>
-          )}
-        </span>
-      </button>
-
-      {showOverlay && overlayRef && (
-        <OverlayPanel
-          show={showOverlay}
-          position="bottomLeft"
-          className={classNameOverlay ?? ""}
-          closeOverlay={() => setShowOverlay(false)}
-          referenceElement={overlayRef}
-          usePortal={usePortal}
-          children={
-            <div className="select-overlay-options" ref={optionsListRef}>
-              {options.map((option) => (
-                <div
-                  key={option.value}
-                  aria-valuetext={option.label}
-                  className={`select-overlay-option ${option.disabled ? "disabled" : ""}  ${
-                    selectedValues.includes(option.value) ? "selected" : ""
-                  }`}
-                  onClick={() =>
-                    !option.disabled && handleOptionClick(option.value)
-                  }
-                  role="option"
-                  aria-selected={selectedValues.includes(option.value)}
-                >
-                  {multiple && (
-                    <input
-                      type="checkbox"
-                      checked={selectedValues.includes(option.value)}
-                      readOnly
-                      className="select-overlay-checkbox"
-                    />
-                  )}
-                  <span>{option.label}</span>
-                </div>
-              ))}
-            </div>
-          }
-        />
-      )}
-
-      {selectedValues.length > 0 && placeholder && (
+        {placeholder && !defaultValue && !multiple && (
+          <option selected disabled hidden value="">
+            {placeholder}
+          </option>
+        )}
+        {options.map((option, index) => (
+          <option key={index} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+      {value !== "" && placeholder && (
         <div
           className="clear-btn"
           onClick={resetValue}
           aria-label="Réinitialiser"
         >
-          <Icon classIcon="bi-x-circle" />
+          <Icon classIcon="bi-x" />
         </div>
       )}
     </div>

package/src/select/select.css

@@ -1,6 +1,5 @@
 .select-container {
   position: relative;
-
   &::after,
   &::before {
     --size: 0.3rem;
@@ -9,19 +8,23 @@
     right: 1rem;
     pointer-events: none;
   }
-
+  select:has(option[value=""]:checked) {
+    color: gray;
+  }
+  option {
+    color: #000;
+  }
   .clear-btn {
     position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
+    top: 2px;
     display: flex;
     align-items: center;
     z-index: 2;
     justify-content: center;
-    right: 10px;
+    bottom: 0;
+    right: 30px;
     cursor: pointer;
   }
-
   &::before {
     border-left: var(--size) solid transparent;
     border-right: var(--size) solid transparent;
@@ -35,18 +38,15 @@
     border-top: var(--size) solid black;
     top: 55%;
   }
-
   .select-container-label {
     font-weight: bold;
     color: #333;
     margin-bottom: 2px;
-    display: block;
   }
-
-  .select-container-button {
+  .select-container-select {
     appearance: none;
     width: 100%;
-    font-size: 0.8rem;
+    font-size: 1rem;
     padding: 0.5rem 1rem;
     margin: 0.25rem 0;
     background-color: #fff;
@@ -54,67 +54,16 @@
     border-radius: 0.25rem;
     color: #000;
     cursor: pointer;
-    text-align: left;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-right: 2rem;
-
-    .select-container-value {
-      flex: 1;
-
-      .placeholder {
-        color: gray;
-      }
-    }
-
+    font-size: 0.8rem;
     &:disabled {
       background-color: #e9ecef;
       color: #6c757d;
       cursor: not-allowed;
     }
-
     &:focus {
+      border-color: #007bff;
       outline: none;
       background-color: #fff;
     }
-
-
-  }
-
-  .select-overlay-options {
-    display: flex;
-    flex-direction: column;
-    max-height: 300px;
-    overflow-y: auto;
-    padding: 0.5rem 0;
-    background-color: #fff;
-    border: 1px solid #b2a1a1;
-    border-radius: 0.25rem;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-
-    .select-overlay-option {
-      padding: 0.5rem 1rem;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      user-select: none;
-
-      .select-overlay-checkbox {
-        min-width: 20px;
-        width: 20px;
-        cursor: pointer;
-      }
-
-      &:hover {
-        background-color: #f0f0f0;
-      }
-
-      &.selected {
-        background-color: #e7f3ff;
-        color: #007bff;
-      }
-    }
   }
-}
+}

package/src/select/selectOption.interface.ts

@@ -1,5 +1,4 @@
 export interface SelectOptionInterface {
   value: string;
   label: string;
-  disabled?: boolean;
 }

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,10 +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(() => {
@@ -62,7 +68,7 @@ export const Sidebar = ({
   }, [onClose]);
 
   const handleClickOutside = useCallback(
-    (event: MouseEvent) => {
+    (event: MouseEvent | TouchEvent) => {
       if (!closeOnClickOutside) return;
       if (
         sidebarRef.current &&
@@ -78,33 +84,87 @@ export const Sidebar = ({
     const touch = event.touches[0];
     touchStartX.current = touch.clientX;
     touchStartY.current = touch.clientY;
+    axisLocked.current = null;
+    setIsDragging(false);
+    setDragX(0);
   }, []);
 
-  const handleTouchEnd = useCallback(
+  const handleTouchMove = useCallback(
     (event: React.TouchEvent) => {
       if (!isOpen) return;
 
-      const touch = event.changedTouches[0];
+      const touch = event.touches[0];
       const deltaX = touch.clientX - touchStartX.current;
-      const deltaY = Math.abs(touch.clientY - touchStartY.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";
+      }
 
-      // Ferme seulement sur un vrai swipe horizontal gauche -> droite.
-      if (deltaX > 60 && deltaY < 40) {
-        toggleSidebar();
+      if (axisLocked.current !== "x") return; // c'est un scroll vertical, on laisse faire
+
+      // On gère le swipe horizontal nous-mêmes : on empêche le scroll natif
+      // et on bloque le bounce/scroll de la page pendant le drag
+      event.preventDefault();
+
+      setIsDragging(true);
+      // On ne permet que le swipe vers la droite (fermeture), pas de drag négatif
+      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]);
 
@@ -114,12 +174,23 @@ 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 ?? ""}`}
         onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
         onTouchEnd={handleTouchEnd}
       >
         <div className="sidebar-header">

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,13 +25,9 @@ export const Tabs = ({
   className = "",
   tabClassName = "",
   panelClassName = "",
-  keepMountedVisited = false,
 }: TabsProps) => {
   const isControlled = typeof index === "number";
   const [active, setActive] = useState<number>(defaultIndex);
-  const [visitedTabs, setVisitedTabs] = useState<Set<number>>(
-    () => new Set([defaultIndex]),
-  );
   const current = isControlled ? (index as number) : active;
 
   useEffect(() => {
@@ -42,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) => {
@@ -99,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/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;