kelt-ui-kit-react 2.0.8 → 2.0.9

package/src/expands/Expands.tsx

@@ -1,46 +1,46 @@
-import { useCallback, useEffect, useState } from "react";
-import { Expand } from "./expand/expand";
-import { ExpandInterface } from "./expand/expand.interface";
-import "./expands.css";
-
-type ExpandProps = {
-  items: ExpandInterface[];
-  className?: string;
-  onChange?: (item: ExpandInterface) => void;
-  currentItem?: ExpandInterface;
-  showArrow?: boolean;
-  catchfocusCapture?: boolean;
-  catchFocusCaptureId?: number;
-};
-
-export const Expands = (props: ExpandProps) => {
-  const [currentExpand, setCurrentExpand] = useState<ExpandInterface>();
-  const onChangeExpand = useCallback(
-    (item: ExpandInterface) => {
-      if (props.onChange) {
-        props.onChange(item);
-      }
-      setCurrentExpand(item);
-    },
-    [setCurrentExpand, props.onChange]
-  );
-  useEffect(() => {
-    setCurrentExpand(props.currentItem);
-  }, [props.currentItem, setCurrentExpand, document.activeElement]);
-  return (
-    <div className={`expands ${props.className || ""}`}>
-      {props.items.map((item: ExpandInterface) => (
-        <Expand
-          key={item.id}
-          item={item}
-          showArrow={props.showArrow}
-          onChange={onChangeExpand}
-          currentExpand={currentExpand}
-          catchfocusCapture={props.catchfocusCapture}
-          catchFocusCaptureId={props.catchFocusCaptureId}
-        />
-      ))}
-    </div>
-  );
-};
-export type { ExpandProps };
+import { useCallback, useEffect, useState } from "react";
+import { Expand } from "./expand/expand";
+import { ExpandInterface } from "./expand/expand.interface";
+import "./expands.css";
+
+type ExpandProps = {
+  items: ExpandInterface[];
+  className?: string;
+  onChange?: (item: ExpandInterface) => void;
+  currentItem?: ExpandInterface;
+  showArrow?: boolean;
+  catchfocusCapture?: boolean;
+  catchFocusCaptureId?: number;
+};
+
+export const Expands = (props: ExpandProps) => {
+  const [currentExpand, setCurrentExpand] = useState<ExpandInterface>();
+  const onChangeExpand = useCallback(
+    (item: ExpandInterface) => {
+      if (props.onChange) {
+        props.onChange(item);
+      }
+      setCurrentExpand(item);
+    },
+    [setCurrentExpand, props.onChange]
+  );
+  useEffect(() => {
+    setCurrentExpand(props.currentItem);
+  }, [props.currentItem, setCurrentExpand, document.activeElement]);
+  return (
+    <div className={`expands ${props.className || ""}`}>
+      {props.items.map((item: ExpandInterface) => (
+        <Expand
+          key={item.id}
+          item={item}
+          showArrow={props.showArrow}
+          onChange={onChangeExpand}
+          currentExpand={currentExpand}
+          catchfocusCapture={props.catchfocusCapture}
+          catchFocusCaptureId={props.catchFocusCaptureId}
+        />
+      ))}
+    </div>
+  );
+};
+export type { ExpandProps };

package/src/expands/Expands.view.tsx

@@ -1,90 +1,90 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Button } from "../button/Button";
-import { Search } from "../search/Search";
-import { ExpandInterface } from "./expand/expand.interface";
-import { Expands } from "./Expands";
-
-export const ExpandsView = (): JSX.Element => {
-  const searchRef = useRef<{
-    clearInput: (name: string) => void;
-    resetForm: () => void;
-    focusInitialElement: () => void;
-  }>(null);
-  const [currentId, setCurrentId] = useState<number>(2);
-
-  const handleRefocus = () => {
-    searchRef.current?.focusInitialElement();
-  };
-  const mockItems: ExpandInterface[] = useMemo(
-    () => [
-      {
-        id: 1,
-        title: "Client",
-        description: "Description 1",
-        headerContent: currentId === 1 && (
-          <Search ref={searchRef} focus={true} />
-        ),
-        footer: <button>Valider</button>,
-      },
-      {
-        id: 2,
-        title: "Produits",
-        description: "Description 2",
-        headerContent: currentId === 2 && (
-          <Search ref={searchRef} focus={true} />
-        ),
-        content: (
-          <Button title={"Go to produits"} onClick={() => setCurrentId(3)} />
-        ),
-      },
-      {
-        id: 3,
-        title: "Total",
-        description: "Description 3",
-      },
-    ],
-    [currentId]
-  );
-  const [currentItem, setCurrentItem] = useState<ExpandInterface>(mockItems[0]);
-  useEffect(() => {
-    setTimeout(() => {
-      searchRef.current?.focusInitialElement();
-    }, 0);
-  }, [searchRef, currentItem]);
-  useEffect(() => {
-    const item = mockItems.find((item) => item.id === currentId);
-    if (item) {
-      setCurrentItem(item);
-    }
-  }, [currentId, setCurrentItem]);
-
-  const goToProduits = useCallback(() => {
-    setCurrentItem(mockItems[2]);
-  }, [setCurrentItem]);
-
-  const onChange = useCallback(
-    (item: ExpandInterface) => {
-      if (item.id) {
-        setCurrentId(item.id);
-      }
-    },
-    [setCurrentId]
-  );
-  return (
-    <div className="d-flex flex-column" style={{ height: "100%" }}>
-      <div className="mb-2">
-        <Button title={"Go to produits"} onClick={goToProduits} />
-
-        <Button onClick={handleRefocus} title="Re-focus" />
-      </div>
-      <div className="flex-1">
-        <Expands
-          onChange={onChange}
-          currentItem={currentItem}
-          items={mockItems}
-        />
-        ;
-      </div>
-    </div>
-  );
-};
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "../button/Button";
+import { Search } from "../search/Search";
+import { ExpandInterface } from "./expand/expand.interface";
+import { Expands } from "./Expands";
+
+export const ExpandsView = (): JSX.Element => {
+  const searchRef = useRef<{
+    clearInput: (name: string) => void;
+    resetForm: () => void;
+    focusInitialElement: () => void;
+  }>(null);
+  const [currentId, setCurrentId] = useState<number>(2);
+
+  const handleRefocus = () => {
+    searchRef.current?.focusInitialElement();
+  };
+  const mockItems: ExpandInterface[] = useMemo(
+    () => [
+      {
+        id: 1,
+        title: "Client",
+        description: "Description 1",
+        headerContent: currentId === 1 && (
+          <Search ref={searchRef} focus={true} />
+        ),
+        footer: <button>Valider</button>,
+      },
+      {
+        id: 2,
+        title: "Produits",
+        description: "Description 2",
+        headerContent: currentId === 2 && (
+          <Search ref={searchRef} focus={true} />
+        ),
+        content: (
+          <Button title={"Go to produits"} onClick={() => setCurrentId(3)} />
+        ),
+      },
+      {
+        id: 3,
+        title: "Total",
+        description: "Description 3",
+      },
+    ],
+    [currentId]
+  );
+  const [currentItem, setCurrentItem] = useState<ExpandInterface>(mockItems[0]);
+  useEffect(() => {
+    setTimeout(() => {
+      searchRef.current?.focusInitialElement();
+    }, 0);
+  }, [searchRef, currentItem]);
+  useEffect(() => {
+    const item = mockItems.find((item) => item.id === currentId);
+    if (item) {
+      setCurrentItem(item);
+    }
+  }, [currentId, setCurrentItem]);
+
+  const goToProduits = useCallback(() => {
+    setCurrentItem(mockItems[2]);
+  }, [setCurrentItem]);
+
+  const onChange = useCallback(
+    (item: ExpandInterface) => {
+      if (item.id) {
+        setCurrentId(item.id);
+      }
+    },
+    [setCurrentId]
+  );
+  return (
+    <div className="d-flex flex-column" style={{ height: "100%" }}>
+      <div className="mb-2">
+        <Button title={"Go to produits"} onClick={goToProduits} />
+
+        <Button onClick={handleRefocus} title="Re-focus" />
+      </div>
+      <div className="flex-1">
+        <Expands
+          onChange={onChange}
+          currentItem={currentItem}
+          items={mockItems}
+        />
+        ;
+      </div>
+    </div>
+  );
+};

package/src/expands/expand/expand.interface.tsx

@@ -1,8 +1,8 @@
-export interface ExpandInterface {
-  id?: number;
-  title: string | React.ReactNode;
-  description?: string | React.ReactNode;
-  content?: React.ReactNode;
-  headerContent?: React.ReactNode;
-  footer?: JSX.Element;
-}
+export interface ExpandInterface {
+  id?: number;
+  title: string | React.ReactNode;
+  description?: string | React.ReactNode;
+  content?: React.ReactNode;
+  headerContent?: React.ReactNode;
+  footer?: JSX.Element;
+}

package/src/expands/expand/expand.tsx

@@ -1,191 +1,191 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { Icon } from "../../icon/Icon";
-import { ExpandInterface } from "./expand.interface";
-
-export type ExpandProps = {
-  currentExpand?: ExpandInterface;
-  item: ExpandInterface;
-  className?: string;
-  showArrow?: boolean;
-  catchfocusCapture?: boolean
-  catchFocusCaptureId?: number;
-  onChange: (item: ExpandInterface) => void;
-};
-export const Expand = ({
-  currentExpand,
-  item,
-  className,
-  showArrow = true,
-  catchfocusCapture = false,
-  catchFocusCaptureId,
-  onChange,
-}: ExpandProps): JSX.Element => {
-  const [active, setActive] = useState<boolean>(false);
-  const expandRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (item && currentExpand) {
-      if (currentExpand.id === item.id) {
-        if (!active) {
-          setActive(true);
-        }
-      } else {
-        setActive(false);
-      }
-    } else {
-      setActive(false);
-    }
-  }, [currentExpand, setActive, item, active]);
-
-  // Si catchFocusCaptureId est fourni, seul l'expand portant cet id gère le focus / scroll
-  const canCatchFocus =
-    catchfocusCapture &&
-    (catchFocusCaptureId === undefined || catchFocusCaptureId === item.id);
-
-  const scrollToHeader = useCallback(() => {
-    const expandElement = expandRef.current;
-    if (!expandElement) return;
-
-    let scrollParent: HTMLElement | null = expandElement.parentElement;
-    while (scrollParent) {
-      const style = window.getComputedStyle(scrollParent);
-      const isScrollable =
-        /(auto|scroll)/.test(style.overflow + style.overflowY) &&
-        scrollParent.scrollHeight > scrollParent.clientHeight;
-
-      if (isScrollable) {
-        const parentRect = scrollParent.getBoundingClientRect();
-        const targetRect = expandElement.getBoundingClientRect();
-        const offsetTop =
-          targetRect.top - parentRect.top + scrollParent.scrollTop;
-
-        scrollParent.scrollTo({
-          top: offsetTop,
-          behavior: "smooth",
-        });
-        return;
-      }
-      scrollParent = scrollParent.parentElement;
-    }
-
-    const header =
-      expandElement.querySelector<HTMLElement>(".expand-header") ||
-      expandElement;
-    header.scrollIntoView({ behavior: "smooth", block: "start" });
-  }, []);
-
-  useEffect(() => {
-    if (!canCatchFocus) return;
-    if (active) {
-      const timer1 = setTimeout(() => {
-        scrollToHeader();
-      }, 100);
-      const timer2 = setTimeout(() => {
-        scrollToHeader();
-      }, 350);
-      return () => {
-        clearTimeout(timer1);
-        clearTimeout(timer2);
-      };
-    }
-  }, [active, scrollToHeader, canCatchFocus]);
-
-  const handleFocusCapture = useCallback(
-    (e: React.FocusEvent<HTMLDivElement>) => {
-      if (!canCatchFocus) return;
-      const target = e.target as HTMLElement;
-      if (
-        active &&
-        (target.tagName === "INPUT" ||
-          target.tagName === "TEXTAREA" ||
-          target.tagName === "SELECT")
-      ) {
-        const expandElement = expandRef.current;
-        if (!expandElement) return;
-
-        const performScroll = () => {
-          let scrollParent: HTMLElement | null = expandElement.parentElement;
-          while (scrollParent) {
-            const style = window.getComputedStyle(scrollParent);
-            const isScrollable =
-              /(auto|scroll)/.test(style.overflow + style.overflowY) &&
-              scrollParent.scrollHeight > scrollParent.clientHeight;
-
-            if (isScrollable) {
-              const parentRect = scrollParent.getBoundingClientRect();
-              const headerRect = expandElement.getBoundingClientRect();
-              const headerOffsetTop =
-                headerRect.top - parentRect.top + scrollParent.scrollTop;
-
-              // Si on a déjà scrollé vers ou au-delà du header, on ne remonte JAMAIS au header
-              if (scrollParent.scrollTop >= headerOffsetTop - 10) {
-                const targetRect = target.getBoundingClientRect();
-                if (targetRect.bottom > parentRect.bottom) {
-                  target.scrollIntoView({ behavior: "smooth", block: "nearest" });
-                }
-                return;
-              }
-
-              // Si on n'a pas encore scrollé jusqu'au header, on y va
-              scrollParent.scrollTo({
-                top: headerOffsetTop,
-                behavior: "smooth",
-              });
-              return;
-            }
-            scrollParent = scrollParent.parentElement;
-          }
-        };
-
-        performScroll();
-        // Répéter après l'ouverture du clavier virtuel (spécifique tablettes / mobiles Android)
-        setTimeout(performScroll, 300);
-      }
-    },
-    [active, canCatchFocus],
-  );
-
-  const handleChange = useCallback(
-    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-      e.stopPropagation();
-      if (onChange) {
-        onChange(item);
-      }
-    },
-    [onChange, item],
-  );
-  return (
-    <div
-      ref={expandRef}
-      onClick={handleChange}
-      onFocusCapture={handleFocusCapture}
-      className={`expand ${active ? "expand--active" : ""} ${className ?? ""}`}
-    >
-      <div className={`expand-header`}>
-        <div className="expand-header-content">
-          <div className="expand-header-content-default">
-            {active && showArrow && (
-              <Icon classIcon="bi bi-chevron-down mr-2"></Icon>
-            )}
-            {!active && showArrow && (
-              <Icon classIcon="bi bi-chevron-right mr-2"></Icon>
-            )}
-            <span className="flex-1 expand-header-title-left">
-              {item.title}
-            </span>
-            {item.description && (
-              <span className="expand-header-title-right">
-                {item.description}
-              </span>
-            )}
-          </div>
-        </div>
-      </div>
-      <div className="expand-body">
-        <div>{item.headerContent}</div>
-        {item.content}
-      </div>
-      {item.footer && <div className="expand-footer">{item.footer}</div>}
-    </div>
-  );
-};
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Icon } from "../../icon/Icon";
+import { ExpandInterface } from "./expand.interface";
+
+export type ExpandProps = {
+  currentExpand?: ExpandInterface;
+  item: ExpandInterface;
+  className?: string;
+  showArrow?: boolean;
+  catchfocusCapture?: boolean
+  catchFocusCaptureId?: number;
+  onChange: (item: ExpandInterface) => void;
+};
+export const Expand = ({
+  currentExpand,
+  item,
+  className,
+  showArrow = true,
+  catchfocusCapture = false,
+  catchFocusCaptureId,
+  onChange,
+}: ExpandProps): JSX.Element => {
+  const [active, setActive] = useState<boolean>(false);
+  const expandRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (item && currentExpand) {
+      if (currentExpand.id === item.id) {
+        if (!active) {
+          setActive(true);
+        }
+      } else {
+        setActive(false);
+      }
+    } else {
+      setActive(false);
+    }
+  }, [currentExpand, setActive, item, active]);
+
+  // Si catchFocusCaptureId est fourni, seul l'expand portant cet id gère le focus / scroll
+  const canCatchFocus =
+    catchfocusCapture &&
+    (catchFocusCaptureId === undefined || catchFocusCaptureId === item.id);
+
+  const scrollToHeader = useCallback(() => {
+    const expandElement = expandRef.current;
+    if (!expandElement) return;
+
+    let scrollParent: HTMLElement | null = expandElement.parentElement;
+    while (scrollParent) {
+      const style = window.getComputedStyle(scrollParent);
+      const isScrollable =
+        /(auto|scroll)/.test(style.overflow + style.overflowY) &&
+        scrollParent.scrollHeight > scrollParent.clientHeight;
+
+      if (isScrollable) {
+        const parentRect = scrollParent.getBoundingClientRect();
+        const targetRect = expandElement.getBoundingClientRect();
+        const offsetTop =
+          targetRect.top - parentRect.top + scrollParent.scrollTop;
+
+        scrollParent.scrollTo({
+          top: offsetTop,
+          behavior: "smooth",
+        });
+        return;
+      }
+      scrollParent = scrollParent.parentElement;
+    }
+
+    const header =
+      expandElement.querySelector<HTMLElement>(".expand-header") ||
+      expandElement;
+    header.scrollIntoView({ behavior: "smooth", block: "start" });
+  }, []);
+
+  useEffect(() => {
+    if (!canCatchFocus) return;
+    if (active) {
+      const timer1 = setTimeout(() => {
+        scrollToHeader();
+      }, 100);
+      const timer2 = setTimeout(() => {
+        scrollToHeader();
+      }, 350);
+      return () => {
+        clearTimeout(timer1);
+        clearTimeout(timer2);
+      };
+    }
+  }, [active, scrollToHeader, canCatchFocus]);
+
+  const handleFocusCapture = useCallback(
+    (e: React.FocusEvent<HTMLDivElement>) => {
+      if (!canCatchFocus) return;
+      const target = e.target as HTMLElement;
+      if (
+        active &&
+        (target.tagName === "INPUT" ||
+          target.tagName === "TEXTAREA" ||
+          target.tagName === "SELECT")
+      ) {
+        const expandElement = expandRef.current;
+        if (!expandElement) return;
+
+        const performScroll = () => {
+          let scrollParent: HTMLElement | null = expandElement.parentElement;
+          while (scrollParent) {
+            const style = window.getComputedStyle(scrollParent);
+            const isScrollable =
+              /(auto|scroll)/.test(style.overflow + style.overflowY) &&
+              scrollParent.scrollHeight > scrollParent.clientHeight;
+
+            if (isScrollable) {
+              const parentRect = scrollParent.getBoundingClientRect();
+              const headerRect = expandElement.getBoundingClientRect();
+              const headerOffsetTop =
+                headerRect.top - parentRect.top + scrollParent.scrollTop;
+
+              // Si on a déjà scrollé vers ou au-delà du header, on ne remonte JAMAIS au header
+              if (scrollParent.scrollTop >= headerOffsetTop - 10) {
+                const targetRect = target.getBoundingClientRect();
+                if (targetRect.bottom > parentRect.bottom) {
+                  target.scrollIntoView({ behavior: "smooth", block: "nearest" });
+                }
+                return;
+              }
+
+              // Si on n'a pas encore scrollé jusqu'au header, on y va
+              scrollParent.scrollTo({
+                top: headerOffsetTop,
+                behavior: "smooth",
+              });
+              return;
+            }
+            scrollParent = scrollParent.parentElement;
+          }
+        };
+
+        performScroll();
+        // Répéter après l'ouverture du clavier virtuel (spécifique tablettes / mobiles Android)
+        setTimeout(performScroll, 300);
+      }
+    },
+    [active, canCatchFocus],
+  );
+
+  const handleChange = useCallback(
+    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+      e.stopPropagation();
+      if (onChange) {
+        onChange(item);
+      }
+    },
+    [onChange, item],
+  );
+  return (
+    <div
+      ref={expandRef}
+      onClick={handleChange}
+      onFocusCapture={handleFocusCapture}
+      className={`expand ${active ? "expand--active" : ""} ${className ?? ""}`}
+    >
+      <div className={`expand-header`}>
+        <div className="expand-header-content">
+          <div className="expand-header-content-default">
+            {active && showArrow && (
+              <Icon classIcon="bi bi-chevron-down mr-2"></Icon>
+            )}
+            {!active && showArrow && (
+              <Icon classIcon="bi bi-chevron-right mr-2"></Icon>
+            )}
+            <span className="flex-1 expand-header-title-left">
+              {item.title}
+            </span>
+            {item.description && (
+              <span className="expand-header-title-right">
+                {item.description}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="expand-body">
+        <div>{item.headerContent}</div>
+        {item.content}
+      </div>
+      {item.footer && <div className="expand-footer">{item.footer}</div>}
+    </div>
+  );
+};