kelt-ui-kit-react 2.0.6 → 2.0.8

package/dist/toaster/store/useToasterStore.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+export type ToasterPosition = "top-right" | "top-center" | "bottom-right" | "bottom-center";
 type ToasterState = {
     title: string;
     description?: string;
@@ -7,12 +8,15 @@ type ToasterState = {
     visible: boolean;
     duration: number;
     close?: boolean;
+    position: ToasterPosition;
     showToast: (title: string, options?: {
         description?: string;
         severity?: "info" | "success" | "error" | "warning";
         duration?: number;
         children?: React.ReactNode;
         close?: boolean;
+        /** Position à l'écran (défaut : "top-right") */
+        position?: ToasterPosition;
     }) => void;
     hideToast: () => void;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

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>
+  );
+};

package/src/grid/Grid.tsx

@@ -1,34 +1,34 @@
-import { Col } from "./col/Col";
-import { Container } from "./container/Container";
-import { GridInterface, GridResponsive } from "./grid.interface";
-import { GridGap, Row } from "./row/Row";
-type GridProps = {
-  items: GridInterface[];
-  className?: string;
-  scroll?: boolean;
-  gap?: GridGap;
-  responsive?: GridResponsive;
-};
-
-export const Grid = ({
-  items,
-  className,
-  scroll,
-  gap,
-  responsive,
-}: GridProps) => {
-  return (
-    <Container>
-      <Row
-        scroll={scroll}
-        className={className}
-        gap={gap}
-        responsive={responsive}
-      >
-        {items.map((item, id) => (
-          <Col key={id} {...item} />
-        ))}
-      </Row>
-    </Container>
-  );
-};
+import { Col } from "./col/Col";
+import { Container } from "./container/Container";
+import { GridInterface, GridResponsive } from "./grid.interface";
+import { GridGap, Row } from "./row/Row";
+type GridProps = {
+  items: GridInterface[];
+  className?: string;
+  scroll?: boolean;
+  gap?: GridGap;
+  responsive?: GridResponsive;
+};
+
+export const Grid = ({
+  items,
+  className,
+  scroll,
+  gap,
+  responsive,
+}: GridProps) => {
+  return (
+    <Container>
+      <Row
+        scroll={scroll}
+        className={className}
+        gap={gap}
+        responsive={responsive}
+      >
+        {items.map((item, id) => (
+          <Col key={id} {...item} />
+        ))}
+      </Row>
+    </Container>
+  );
+};

package/src/grid/col/Col.tsx

@@ -1,24 +1,24 @@
-import { useContext } from "react";
-import { ColStyled } from "./colStyled/ColStyled";
-import { GridBreakpoints } from "../grid.interface";
-import { RowResponsiveContext } from "../row/Row";
-import "./col.css"
-type ColProps = GridBreakpoints & {
-  children: React.ReactNode;
-};
-export const Col: React.FC<ColProps> = ({ xs, sm, md, lg, xl, children }) => {
-  const responsive = useContext(RowResponsiveContext);
-  return (
-    <ColStyled
-      className="col"
-      $responsive={responsive}
-      $xs={xs}
-      $sm={sm}
-      $md={md}
-      $lg={lg}
-      $xl={xl}
-    >
-      {children}
-    </ColStyled>
-  );
-};
+import { useContext } from "react";
+import { ColStyled } from "./colStyled/ColStyled";
+import { GridBreakpoints } from "../grid.interface";
+import { RowResponsiveContext } from "../row/Row";
+import "./col.css"
+type ColProps = GridBreakpoints & {
+  children: React.ReactNode;
+};
+export const Col: React.FC<ColProps> = ({ xs, sm, md, lg, xl, children }) => {
+  const responsive = useContext(RowResponsiveContext);
+  return (
+    <ColStyled
+      className="col"
+      $responsive={responsive}
+      $xs={xs}
+      $sm={sm}
+      $md={md}
+      $lg={lg}
+      $xl={xl}
+    >
+      {children}
+    </ColStyled>
+  );
+};

package/src/grid/col/col.css

@@ -1,3 +1,3 @@
-.col {
-    padding: 0;
-}
+.col {
+    padding: 0;
+}

package/src/grid/col/colStyled/ColStyled.tsx

@@ -1,59 +1,59 @@
-import styled, { css } from "styled-components";
-import { GridColumnSpan, GridResponsive } from "../../grid.interface";
-
-// Largeur = part de la ligne moins la part des gaps qui revient à la colonne.
-// Pour une ligne dont les spans font 12, la somme des largeurs + les gaps = 100%.
-const getColWidth = (size: number) =>
-  `calc(${(size / 12) * 100}% - var(--grid-gutter, 0px) * ${1 - size / 12})`;
-
-// "auto" : base 0 et grow 1, les colonnes "auto" d'une ligne se partagent
-// la place restante (gaps déduits) à parts égales.
-const colSize = (size: GridColumnSpan = 12) =>
-  size === "auto"
-    ? `flex: 1 1 0; max-width: 100%;`
-    : `flex: 0 0 ${getColWidth(size)}; max-width: ${getColWidth(size)};`;
-
-// Règle de breakpoint selon la largeur de référence choisie sur la Row
-const breakpoint = (responsive: GridResponsive, minWidth: number) => {
-  switch (responsive) {
-    case "viewport":
-      return `@media (min-width: ${minWidth}px)`;
-    case "row":
-      return `@container kelt-grid (min-width: ${minWidth}px)`;
-    default:
-      return `@container app-container (min-width: ${minWidth}px)`;
-  }
-};
-
-type ColStyledProps = {
-  $responsive: GridResponsive;
-  $xs?: GridColumnSpan;
-  $sm?: GridColumnSpan;
-  $md?: GridColumnSpan;
-  $lg?: GridColumnSpan;
-  $xl?: GridColumnSpan;
-};
-
-const colAt = (
-  responsive: GridResponsive,
-  minWidth: number,
-  size?: GridColumnSpan
-) =>
-  size &&
-  css`
-    ${breakpoint(responsive, minWidth)} {
-      ${colSize(size)}
-    }
-  `;
-
-export const ColStyled = styled.div<ColStyledProps>`
-  box-sizing: border-box;
-  min-width: 0;
-  ${({ $xs }) => colSize($xs)}
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  ${({ $responsive, $sm }) => colAt($responsive, 576, $sm)}
-  ${({ $responsive, $md }) => colAt($responsive, 768, $md)}
-  ${({ $responsive, $lg }) => colAt($responsive, 992, $lg)}
-  ${({ $responsive, $xl }) => colAt($responsive, 1200, $xl)}
-`;
+import styled, { css } from "styled-components";
+import { GridColumnSpan, GridResponsive } from "../../grid.interface";
+
+// Largeur = part de la ligne moins la part des gaps qui revient à la colonne.
+// Pour une ligne dont les spans font 12, la somme des largeurs + les gaps = 100%.
+const getColWidth = (size: number) =>
+  `calc(${(size / 12) * 100}% - var(--grid-gutter, 0px) * ${1 - size / 12})`;
+
+// "auto" : base 0 et grow 1, les colonnes "auto" d'une ligne se partagent
+// la place restante (gaps déduits) à parts égales.
+const colSize = (size: GridColumnSpan = 12) =>
+  size === "auto"
+    ? `flex: 1 1 0; max-width: 100%;`
+    : `flex: 0 0 ${getColWidth(size)}; max-width: ${getColWidth(size)};`;
+
+// Règle de breakpoint selon la largeur de référence choisie sur la Row
+const breakpoint = (responsive: GridResponsive, minWidth: number) => {
+  switch (responsive) {
+    case "viewport":
+      return `@media (min-width: ${minWidth}px)`;
+    case "row":
+      return `@container kelt-grid (min-width: ${minWidth}px)`;
+    default:
+      return `@container app-container (min-width: ${minWidth}px)`;
+  }
+};
+
+type ColStyledProps = {
+  $responsive: GridResponsive;
+  $xs?: GridColumnSpan;
+  $sm?: GridColumnSpan;
+  $md?: GridColumnSpan;
+  $lg?: GridColumnSpan;
+  $xl?: GridColumnSpan;
+};
+
+const colAt = (
+  responsive: GridResponsive,
+  minWidth: number,
+  size?: GridColumnSpan
+) =>
+  size &&
+  css`
+    ${breakpoint(responsive, minWidth)} {
+      ${colSize(size)}
+    }
+  `;
+
+export const ColStyled = styled.div<ColStyledProps>`
+  box-sizing: border-box;
+  min-width: 0;
+  ${({ $xs }) => colSize($xs)}
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  ${({ $responsive, $sm }) => colAt($responsive, 576, $sm)}
+  ${({ $responsive, $md }) => colAt($responsive, 768, $md)}
+  ${({ $responsive, $lg }) => colAt($responsive, 992, $lg)}
+  ${({ $responsive, $xl }) => colAt($responsive, 1200, $xl)}
+`;