kelt-ui-kit-react 2.0.8 → 2.0.9

package/src/select/Select.tsx

@@ -1,245 +1,245 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Icon } from "../icon/Icon";
-
-import { OverlayPanel } from "../overlayPanel/OverlayPanel";
-import "./select.css";
-import { SelectOptionInterface } from "./selectOption.interface";
-
-export interface SelectProps {
-  id?: string;
-  label?: string;
-  title?: string;
-  disabled?: boolean;
-  style?: React.CSSProperties;
-  name?: string;
-  defaultValue?: string | string[];
-  multiple?: boolean;
-  showOptions?: boolean;
-  usePortal?: boolean;
-  searchable?: boolean;
-  searchPlaceholder?: string;
-  required?: boolean;
-  value?: string | string[];
-  className?: string;
-  options: SelectOptionInterface[];
-  onChangeMultiple?: (value: string[]) => void;
-  onChange?: (value: string) => void;
-  placeholder?: string;
-  classNameOverlay?: string;
-}
-
-export const Select = ({
-  id,
-  label,
-  options,
-  className,
-  disabled,
-  style,
-  multiple = false,
-  showOptions = false,
-  defaultValue,
-  usePortal = false,
-  searchable = false,
-  searchPlaceholder = "Rechercher...",
-  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);
-  const [search, setSearch] = useState("");
-
-  useEffect(() => {
-    if (!showOverlay) setSearch("");
-  }, [showOverlay]);
-
-  const filteredOptions = useMemo(() => {
-    const normalize = (text: string) =>
-      text.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().trim();
-    const term = normalize(search);
-    if (!searchable || !term) return options;
-    return options.filter((option) => normalize(option.label).includes(term));
-  }, [options, search, searchable]);
-
-  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]);
-  // "" est une vraie valeur si une option la porte (ex. "Aucun", "État")
-  const hasEmptyOption = options.some((option) => option.value === "");
-  const isDefined = (v?: string | string[]) =>
-    v !== undefined && v !== null && (v !== "" || hasEmptyOption);
-  const selectedValues = Array.isArray(value)
-    ? value
-    : isDefined(value)
-      ? [value as string]
-      : isDefined(defaultValue)
-        ? Array.isArray(defaultValue)
-          ? defaultValue
-          : [defaultValue as string]
-        : [];
-  const hasSelection = selectedValues.some((v) => v !== "");
-
-  const getDisplayValue = () => {
-    if (selectedValues.length === 0) return placeholder || "";
-    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];
-      if (onChangeMultiple) {
-        onChangeMultiple(newValues);
-      }
-    } else {
-      if (onChange) {
-        onChange(optionValue);
-      }
-      setShowOverlay(false);
-    }
-  };
-
-  const resetValue = useCallback(() => {
-    if (multiple && onChangeMultiple) {
-      onChangeMultiple([]);
-    } else if (onChange) {
-      onChange("");
-    }
-  }, [onChange, onChangeMultiple, multiple]);
-
-  useEffect(() => {
-    if (
-      showOptions &&
-      !disabled &&
-      !hasAutoOpened.current &&
-      triggerRef.current
-    ) {
-      setOverlayRef(triggerRef.current);
-      setShowOverlay(true);
-      hasAutoOpened.current = true;
-    }
-  }, [showOptions, disabled]);
-
-  return (
-    <div id={id} className={`select-container ${className ? className : ""}`}>
-      {label && (
-        <label htmlFor={`select-${id}`} className="select-container-label">
-          {label}
-        </label>
-      )}
-      <button
-        ref={triggerRef}
-        id={`select-${id}`}
-        disabled={disabled}
-        style={style}
-        className="select-container-button"
-        onClick={(e) => {
-          setOverlayRef(e.currentTarget as HTMLElement);
-          setShowOverlay(true);
-        }}
-        type="button"
-        aria-valuetext={getDisplayValue() || placeholder}
-        title={getDisplayValue() || placeholder}
-        aria-haspopup="listbox"
-        aria-expanded={showOverlay}
-      >
-        <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}
-          matchReferenceWidth={usePortal}
-          children={
-            <>
-              {searchable && (
-                <div className="select-overlay-search">
-                  <input
-                    type="text"
-                    autoFocus
-                    value={search}
-                    placeholder={searchPlaceholder}
-                    onChange={(e) => setSearch(e.target.value)}
-                    onKeyDown={(e) => {
-                      // évite de soumettre le formulaire parent
-                      if (e.key === "Enter") e.preventDefault();
-                    }}
-                  />
-                </div>
-              )}
-              <div className="select-overlay-options" ref={optionsListRef}>
-                {searchable && filteredOptions.length === 0 && (
-                  <div className="select-overlay-empty">Aucun résultat</div>
-                )}
-                {filteredOptions.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>
-            </>
-          }
-        />
-      )}
-
-      {hasSelection && placeholder && (
-        <div
-          className="clear-btn"
-          onClick={resetValue}
-          aria-label="Réinitialiser"
-        >
-          <Icon classIcon="bi-x-circle" />
-        </div>
-      )}
-    </div>
-  );
-};
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Icon } from "../icon/Icon";
+
+import { OverlayPanel } from "../overlayPanel/OverlayPanel";
+import "./select.css";
+import { SelectOptionInterface } from "./selectOption.interface";
+
+export interface SelectProps {
+  id?: string;
+  label?: string;
+  title?: string;
+  disabled?: boolean;
+  style?: React.CSSProperties;
+  name?: string;
+  defaultValue?: string | string[];
+  multiple?: boolean;
+  showOptions?: boolean;
+  usePortal?: boolean;
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  required?: boolean;
+  value?: string | string[];
+  className?: string;
+  options: SelectOptionInterface[];
+  onChangeMultiple?: (value: string[]) => void;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  classNameOverlay?: string;
+}
+
+export const Select = ({
+  id,
+  label,
+  options,
+  className,
+  disabled,
+  style,
+  multiple = false,
+  showOptions = false,
+  defaultValue,
+  usePortal = false,
+  searchable = false,
+  searchPlaceholder = "Rechercher...",
+  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);
+  const [search, setSearch] = useState("");
+
+  useEffect(() => {
+    if (!showOverlay) setSearch("");
+  }, [showOverlay]);
+
+  const filteredOptions = useMemo(() => {
+    const normalize = (text: string) =>
+      text.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().trim();
+    const term = normalize(search);
+    if (!searchable || !term) return options;
+    return options.filter((option) => normalize(option.label).includes(term));
+  }, [options, search, searchable]);
+
+  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]);
+  // "" est une vraie valeur si une option la porte (ex. "Aucun", "État")
+  const hasEmptyOption = options.some((option) => option.value === "");
+  const isDefined = (v?: string | string[]) =>
+    v !== undefined && v !== null && (v !== "" || hasEmptyOption);
+  const selectedValues = Array.isArray(value)
+    ? value
+    : isDefined(value)
+      ? [value as string]
+      : isDefined(defaultValue)
+        ? Array.isArray(defaultValue)
+          ? defaultValue
+          : [defaultValue as string]
+        : [];
+  const hasSelection = selectedValues.some((v) => v !== "");
+
+  const getDisplayValue = () => {
+    if (selectedValues.length === 0) return placeholder || "";
+    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];
+      if (onChangeMultiple) {
+        onChangeMultiple(newValues);
+      }
+    } else {
+      if (onChange) {
+        onChange(optionValue);
+      }
+      setShowOverlay(false);
+    }
+  };
+
+  const resetValue = useCallback(() => {
+    if (multiple && onChangeMultiple) {
+      onChangeMultiple([]);
+    } else if (onChange) {
+      onChange("");
+    }
+  }, [onChange, onChangeMultiple, multiple]);
+
+  useEffect(() => {
+    if (
+      showOptions &&
+      !disabled &&
+      !hasAutoOpened.current &&
+      triggerRef.current
+    ) {
+      setOverlayRef(triggerRef.current);
+      setShowOverlay(true);
+      hasAutoOpened.current = true;
+    }
+  }, [showOptions, disabled]);
+
+  return (
+    <div id={id} className={`select-container ${className ? className : ""}`}>
+      {label && (
+        <label htmlFor={`select-${id}`} className="select-container-label">
+          {label}
+        </label>
+      )}
+      <button
+        ref={triggerRef}
+        id={`select-${id}`}
+        disabled={disabled}
+        style={style}
+        className="select-container-button"
+        onClick={(e) => {
+          setOverlayRef(e.currentTarget as HTMLElement);
+          setShowOverlay(true);
+        }}
+        type="button"
+        aria-valuetext={getDisplayValue() || placeholder}
+        title={getDisplayValue() || placeholder}
+        aria-haspopup="listbox"
+        aria-expanded={showOverlay}
+      >
+        <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}
+          matchReferenceWidth={usePortal}
+          children={
+            <>
+              {searchable && (
+                <div className="select-overlay-search">
+                  <input
+                    type="text"
+                    autoFocus
+                    value={search}
+                    placeholder={searchPlaceholder}
+                    onChange={(e) => setSearch(e.target.value)}
+                    onKeyDown={(e) => {
+                      // évite de soumettre le formulaire parent
+                      if (e.key === "Enter") e.preventDefault();
+                    }}
+                  />
+                </div>
+              )}
+              <div className="select-overlay-options" ref={optionsListRef}>
+                {searchable && filteredOptions.length === 0 && (
+                  <div className="select-overlay-empty">Aucun résultat</div>
+                )}
+                {filteredOptions.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>
+            </>
+          }
+        />
+      )}
+
+      {hasSelection && placeholder && (
+        <div
+          className="clear-btn"
+          onClick={resetValue}
+          aria-label="Réinitialiser"
+        >
+          <Icon classIcon="bi-x-circle" />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/select/Select.view.tsx

@@ -1,71 +1,71 @@
-import { useMemo } from "react";
-import { Select } from "./Select";
-
-export const SelectView = () => {
-  const selectData = useMemo(() => {
-    return [
-      {
-        id: "select",
-        title: "Select",
-        className: "select-component",
-        options: [
-          { value: "option1", label: "Option 1" },
-          { value: "option2", label: "Option 2" },
-          { value: "option3", label: "Option 3" },
-        ],
-      },
-      {
-        id: "select-disabled",
-        title: "Select Disabled",
-        className: "select-component",
-        disabled: true,
-        options: [
-          { value: "option1", label: "Option 1" },
-          { value: "option2", label: "Option 2" },
-          { value: "option3", label: "Option 3" },
-        ],
-      },
-      {
-        id: "select-placeholder",
-        title: "Select Placeholder",
-        className: "select-component",
-        placeholder: "Select an option",
-        options: [
-          { value: "option1", label: "Option 1" },
-          { value: "option2", label: "Option 2" },
-          { value: "option3", label: "Option 3" },
-        ],
-      },
-      {
-        id: "select-default-value",
-        title: "Select Default Value",
-        className: "select-component",
-        defaultValue: "option2",
-        options: [
-          { value: "option1", label: "Option 1" },
-          { value: "option2", label: "Option 2" },
-          { value: "option3", label: "Option 3" },
-        ],
-      },
-      {
-        id: "select-value",
-        title: "Select Value",
-        className: "select-component",
-        value: "option3",
-        options: [
-          { value: "option1", label: "Option 1" },
-          { value: "option2", label: "Option 2" },
-          { value: "option3", label: "Option 3" },
-        ],
-      },
-    ];
-  }, []);
-
-  return (
-    <>
-      {selectData.map((data) => (
-        <Select key={data.id} {...data} />
-      ))}
-    </>
-  );
-};
+import { useMemo } from "react";
+import { Select } from "./Select";
+
+export const SelectView = () => {
+  const selectData = useMemo(() => {
+    return [
+      {
+        id: "select",
+        title: "Select",
+        className: "select-component",
+        options: [
+          { value: "option1", label: "Option 1" },
+          { value: "option2", label: "Option 2" },
+          { value: "option3", label: "Option 3" },
+        ],
+      },
+      {
+        id: "select-disabled",
+        title: "Select Disabled",
+        className: "select-component",
+        disabled: true,
+        options: [
+          { value: "option1", label: "Option 1" },
+          { value: "option2", label: "Option 2" },
+          { value: "option3", label: "Option 3" },
+        ],
+      },
+      {
+        id: "select-placeholder",
+        title: "Select Placeholder",
+        className: "select-component",
+        placeholder: "Select an option",
+        options: [
+          { value: "option1", label: "Option 1" },
+          { value: "option2", label: "Option 2" },
+          { value: "option3", label: "Option 3" },
+        ],
+      },
+      {
+        id: "select-default-value",
+        title: "Select Default Value",
+        className: "select-component",
+        defaultValue: "option2",
+        options: [
+          { value: "option1", label: "Option 1" },
+          { value: "option2", label: "Option 2" },
+          { value: "option3", label: "Option 3" },
+        ],
+      },
+      {
+        id: "select-value",
+        title: "Select Value",
+        className: "select-component",
+        value: "option3",
+        options: [
+          { value: "option1", label: "Option 1" },
+          { value: "option2", label: "Option 2" },
+          { value: "option3", label: "Option 3" },
+        ],
+      },
+    ];
+  }, []);
+
+  return (
+    <>
+      {selectData.map((data) => (
+        <Select key={data.id} {...data} />
+      ))}
+    </>
+  );
+};