@tsiky/components-r19 1.1.0 → 1.2.0

package/src/components/DynamicTable/AdvancedFilters.tsx

@@ -1,196 +1,196 @@
-'use client';
-
-import React, { useEffect, useRef, useState } from 'react';
-import { X, Filter } from 'lucide-react';
-import type { FilterConfig, AppliedFilter } from './tools/filterTypes';
-import { useFilters } from './hooks/useFilters';
-import FilterRenderer from './filters/FilterRenderer';
-import styles from './TableauDynamique.module.css';
-
-interface AdvancedFiltersProps {
-  filters: FilterConfig[];
-  externalFilters?: AppliedFilter[];
-  onFiltersChange?: (filters: AppliedFilter[]) => void;
-  onApply?: (filters: AppliedFilter[]) => void;
-  isControlled?: boolean;
-  debounceTimeout?: number;
-  resultsCount?: number;
-  expanded?: boolean;
-  onToggle?: (expanded: boolean) => void;
-  panelPlacement?: 'overlay' | 'top';
-  onPanelHeightChange?: (height: number) => void;
-}
-
-const AdvancedFilters: React.FC<AdvancedFiltersProps> = ({
-  filters,
-  externalFilters = [],
-  onFiltersChange,
-  onApply,
-  isControlled = false,
-  debounceTimeout = 300,
-  resultsCount = 0,
-  expanded,
-  onToggle,
-  panelPlacement = 'top',
-  onPanelHeightChange,
-}) => {
-  const [localExpanded, setLocalExpanded] = useState(false);
-  const isExpanded = typeof expanded === 'boolean' ? expanded : localExpanded;
-
-  const { appliedFilters, tempFilters, updateFilter, applyFilters, clearAllFilters } = useFilters({
-    filters,
-    externalFilters,
-    onFiltersChange,
-    onApply,
-    debounceTimeout,
-    isControlled,
-  });
-
-  const panelRef = useRef<HTMLDivElement | null>(null);
-  const wrapperRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    if (isExpanded && panelRef.current) {
-      const h = panelRef.current.getBoundingClientRect().height;
-      onPanelHeightChange?.(h);
-    } else {
-      onPanelHeightChange?.(0);
-    }
-  }, [isExpanded, filters, tempFilters, onPanelHeightChange]);
-
-  const toggle = () => {
-    if (typeof expanded === 'boolean') {
-      onToggle?.(!expanded);
-    } else {
-      setLocalExpanded((s) => {
-        const next = !s;
-        onToggle?.(next);
-        return next;
-      });
-    }
-  };
-
-  const handleApply = async () => {
-    await applyFilters();
-    onToggle?.(false);
-    if (typeof expanded !== 'boolean') setLocalExpanded(false);
-  };
-
-  useEffect(() => {
-    const onPointerDown = (e: PointerEvent) => {
-      if (!isExpanded) return;
-      if (!wrapperRef.current) return;
-      if (!wrapperRef.current.contains(e.target as Node)) {
-        onToggle?.(false);
-        if (typeof expanded !== 'boolean') setLocalExpanded(false);
-      }
-    };
-
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && isExpanded) {
-        onToggle?.(false);
-        if (typeof expanded !== 'boolean') setLocalExpanded(false);
-      }
-    };
-
-    if (isExpanded) {
-      document.addEventListener('pointerdown', onPointerDown);
-      document.addEventListener('keydown', onKey);
-    }
-
-    return () => {
-      document.removeEventListener('pointerdown', onPointerDown);
-      document.removeEventListener('keydown', onKey);
-    };
-  }, [isExpanded, expanded, onToggle]);
-
-  return (
-    <div className={styles.advancedFiltersContainer} ref={wrapperRef}>
-      <div className={styles.filtersHeader}>
-        <button
-          className={styles.toggleFiltersButton}
-          onClick={toggle}
-          aria-expanded={isExpanded}
-          aria-controls='advanced-filters-panel'
-        >
-          <Filter size={14} />
-          <span className={styles.buttonTextCompact}>Advanced-Filters</span>
-        </button>
-
-        {appliedFilters.length > 0 && (
-          <button className={styles.clearFiltersButton} onClick={clearAllFilters}>
-            <X size={14} /> <span className={styles.buttonTextCompact}>Effacer</span>
-          </button>
-        )}
-      </div>
-
-      {isExpanded && (
-        <div
-          id='advanced-filters-panel'
-          ref={panelRef}
-          className={`${styles.filtersPanel} ${
-            panelPlacement === 'top'
-              ? `${styles.filtersPanelInline} ${styles.filtersPanelHorizontal}`
-              : ''
-          }`}
-          role='region'
-          aria-label='Panneau de filtres avancés'
-        >
-          <div className={styles.filtersRow}>
-            {filters.map((filter) => (
-              <div key={filter.id} className={`${styles.filterItem} ${styles.filterItemInline}`}>
-                <label className={styles.filterLabel}>
-                  {filter.label}
-                  {filter.required && <span className={styles.required}>*</span>}
-                </label>
-                <FilterRenderer
-                  config={filter}
-                  value={tempFilters[filter.id]}
-                  onChange={(value) => updateFilter(filter.id, value)}
-                  disabled={filter.disabled}
-                />
-              </div>
-            ))}
-          </div>
-
-          <div className={styles.filtersActionsHorizontal}>
-            <div className={styles.activeFiltersWrap}>
-              {appliedFilters.length > 0 && (
-                <div className={styles.activeFilters}>
-                  <span className={styles.activeLabelCompact}>Actifs :</span>
-                  {appliedFilters.map((f) => (
-                    <div key={f.id} className={styles.activeFilterTag}>
-                      {f.label ?? f.id}
-                      <button
-                        onClick={() => updateFilter(f.id, undefined)}
-                        aria-label={`Supprimer ${f.id}`}
-                      >
-                        ×
-                      </button>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-
-            <div className={styles.actionsGroup}>
-              <button
-                className={styles.cancelButton}
-                onClick={() => {
-                  onToggle?.(false);
-                }}
-              >
-                Cancel
-              </button>
-              <button className={styles.applyButton} onClick={handleApply}>
-                Apply
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default AdvancedFilters;
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+import { X, Filter } from 'lucide-react';
+import type { FilterConfig, AppliedFilter } from './tools/filterTypes';
+import { useFilters } from './hooks/useFilters';
+import FilterRenderer from './filters/FilterRenderer';
+import styles from './TableauDynamique.module.css';
+
+interface AdvancedFiltersProps {
+  filters: FilterConfig[];
+  externalFilters?: AppliedFilter[];
+  onFiltersChange?: (filters: AppliedFilter[]) => void;
+  onApply?: (filters: AppliedFilter[]) => void;
+  isControlled?: boolean;
+  debounceTimeout?: number;
+  resultsCount?: number;
+  expanded?: boolean;
+  onToggle?: (expanded: boolean) => void;
+  panelPlacement?: 'overlay' | 'top';
+  onPanelHeightChange?: (height: number) => void;
+}
+
+const AdvancedFilters: React.FC<AdvancedFiltersProps> = ({
+  filters,
+  externalFilters = [],
+  onFiltersChange,
+  onApply,
+  isControlled = false,
+  debounceTimeout = 300,
+  resultsCount = 0,
+  expanded,
+  onToggle,
+  panelPlacement = 'top',
+  onPanelHeightChange,
+}) => {
+  const [localExpanded, setLocalExpanded] = useState(false);
+  const isExpanded = typeof expanded === 'boolean' ? expanded : localExpanded;
+
+  const { appliedFilters, tempFilters, updateFilter, applyFilters, clearAllFilters } = useFilters({
+    filters,
+    externalFilters,
+    onFiltersChange,
+    onApply,
+    debounceTimeout,
+    isControlled,
+  });
+
+  const panelRef = useRef<HTMLDivElement | null>(null);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (isExpanded && panelRef.current) {
+      const h = panelRef.current.getBoundingClientRect().height;
+      onPanelHeightChange?.(h);
+    } else {
+      onPanelHeightChange?.(0);
+    }
+  }, [isExpanded, filters, tempFilters, onPanelHeightChange]);
+
+  const toggle = () => {
+    if (typeof expanded === 'boolean') {
+      onToggle?.(!expanded);
+    } else {
+      setLocalExpanded((s) => {
+        const next = !s;
+        onToggle?.(next);
+        return next;
+      });
+    }
+  };
+
+  const handleApply = async () => {
+    await applyFilters();
+    onToggle?.(false);
+    if (typeof expanded !== 'boolean') setLocalExpanded(false);
+  };
+
+  useEffect(() => {
+    const onPointerDown = (e: PointerEvent) => {
+      if (!isExpanded) return;
+      if (!wrapperRef.current) return;
+      if (!wrapperRef.current.contains(e.target as Node)) {
+        onToggle?.(false);
+        if (typeof expanded !== 'boolean') setLocalExpanded(false);
+      }
+    };
+
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isExpanded) {
+        onToggle?.(false);
+        if (typeof expanded !== 'boolean') setLocalExpanded(false);
+      }
+    };
+
+    if (isExpanded) {
+      document.addEventListener('pointerdown', onPointerDown);
+      document.addEventListener('keydown', onKey);
+    }
+
+    return () => {
+      document.removeEventListener('pointerdown', onPointerDown);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [isExpanded, expanded, onToggle]);
+
+  return (
+    <div className={styles.advancedFiltersContainer} ref={wrapperRef}>
+      <div className={styles.filtersHeader}>
+        <button
+          className={styles.toggleFiltersButton}
+          onClick={toggle}
+          aria-expanded={isExpanded}
+          aria-controls='advanced-filters-panel'
+        >
+          <Filter size={14} />
+          <span className={styles.buttonTextCompact}>Advanced-Filters</span>
+        </button>
+
+        {appliedFilters.length > 0 && (
+          <button className={styles.clearFiltersButton} onClick={clearAllFilters}>
+            <X size={14} /> <span className={styles.buttonTextCompact}>Effacer</span>
+          </button>
+        )}
+      </div>
+
+      {isExpanded && (
+        <div
+          id='advanced-filters-panel'
+          ref={panelRef}
+          className={`${styles.filtersPanel} ${
+            panelPlacement === 'top'
+              ? `${styles.filtersPanelInline} ${styles.filtersPanelHorizontal}`
+              : ''
+          }`}
+          role='region'
+          aria-label='Panneau de filtres avancés'
+        >
+          <div className={styles.filtersRow}>
+            {filters.map((filter) => (
+              <div key={filter.id} className={`${styles.filterItem} ${styles.filterItemInline}`}>
+                <label className={styles.filterLabel}>
+                  {filter.label}
+                  {filter.required && <span className={styles.required}>*</span>}
+                </label>
+                <FilterRenderer
+                  config={filter}
+                  value={tempFilters[filter.id]}
+                  onChange={(value) => updateFilter(filter.id, value)}
+                  disabled={filter.disabled}
+                />
+              </div>
+            ))}
+          </div>
+
+          <div className={styles.filtersActionsHorizontal}>
+            <div className={styles.activeFiltersWrap}>
+              {appliedFilters.length > 0 && (
+                <div className={styles.activeFilters}>
+                  <span className={styles.activeLabelCompact}>Actifs :</span>
+                  {appliedFilters.map((f) => (
+                    <div key={f.id} className={styles.activeFilterTag}>
+                      {f.label ?? f.id}
+                      <button
+                        onClick={() => updateFilter(f.id, undefined)}
+                        aria-label={`Supprimer ${f.id}`}
+                      >
+                        ×
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            <div className={styles.actionsGroup}>
+              <button
+                className={styles.cancelButton}
+                onClick={() => {
+                  onToggle?.(false);
+                }}
+              >
+                Cancel
+              </button>
+              <button className={styles.applyButton} onClick={handleApply}>
+                Apply
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AdvancedFilters;