@tsiky/components-r19 1.1.0 → 1.3.0

package/src/components/DynamicInput/input/assets/SelectInput.module.css

@@ -1,95 +1,95 @@
-.wrapper {
-  position: relative;
-  width: 100%;
-  border: 1px solid #d3d6db;
-  border-radius: 10px;
-  padding: 12px 44px 12px 14px;
-  box-sizing: border-box;
-  cursor: pointer;
-  transition:
-    border-color 0.15s ease,
-    box-shadow 0.15s ease;
-}
-
-.wrapper:focus-within {
-  border-color: #2684ff;
-}
-
-.wrapperInvalid {
-  border-color: #dc3545;
-}
-
-.nativeSelect {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-}
-
-.display {
-  display: flex;
-  flex-direction: column;
-  pointer-events: none;
-  user-select: none;
-}
-
-.topLabel {
-  font-size: 0.8rem;
-  color: #8b9094;
-  font-weight: 500;
-  line-height: 1;
-  margin-bottom: 6px;
-}
-
-.valueLine {
-  font-size: 1rem;
-  line-height: 1.1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.valuePlaceholder {
-  color: #99a0a6;
-}
-
-.valueActive {
-  color: var(--color-text, #222);
-}
-
-.caret {
-  position: absolute;
-  right: 12px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 16px;
-  height: 16px;
-  pointer-events: none;
-  background-image: url("data:image/svg+xml;utf8,<svg fill='%23888' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 16px;
-}
-
-.error {
-  display: block;
-  margin-top: 8px;
-  font-size: 0.85rem;
-  color: #dc3545;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .wrapper,
-  .wrapper:focus-within {
-    transition: none;
-  }
-}
-
-.optionStyle {
-  background-color: var(--color-card-background);
-  color: var(--color-text);
-}
+.wrapper {
+  position: relative;
+  width: 100%;
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+  padding: 12px 44px 12px 14px;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.wrapper:focus-within {
+  border-color: #2684ff;
+}
+
+.wrapperInvalid {
+  border-color: #dc3545;
+}
+
+.nativeSelect {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+.display {
+  display: flex;
+  flex-direction: column;
+  pointer-events: none;
+  user-select: none;
+}
+
+.topLabel {
+  font-size: 0.8rem;
+  color: #8b9094;
+  font-weight: 500;
+  line-height: 1;
+  margin-bottom: 6px;
+}
+
+.valueLine {
+  font-size: 1rem;
+  line-height: 1.1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.valuePlaceholder {
+  color: #99a0a6;
+}
+
+.valueActive {
+  color: var(--color-text, #222);
+}
+
+.caret {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  pointer-events: none;
+  background-image: url("data:image/svg+xml;utf8,<svg fill='%23888' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 16px;
+}
+
+.error {
+  display: block;
+  margin-top: 8px;
+  font-size: 0.85rem;
+  color: #dc3545;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wrapper,
+  .wrapper:focus-within {
+    transition: none;
+  }
+}
+
+.optionStyle {
+  background-color: var(--color-card-background);
+  color: var(--color-text);
+}

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;