kelt-ui-kit-react 2.0.5 → 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.5",
+  "version": "2.0.8",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/expands/expand/expand.tsx

@@ -37,6 +37,11 @@ export const Expand = ({
     }
   }, [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;
@@ -70,7 +75,7 @@ export const Expand = ({
   }, []);
 
   useEffect(() => {
-    if (!catchfocusCapture || catchFocusCaptureId && catchFocusCaptureId !== currentExpand?.id) return;
+    if (!canCatchFocus) return;
     if (active) {
       const timer1 = setTimeout(() => {
         scrollToHeader();
@@ -83,11 +88,11 @@ export const Expand = ({
         clearTimeout(timer2);
       };
     }
-  }, [active, scrollToHeader, catchfocusCapture, catchFocusCaptureId]);
+  }, [active, scrollToHeader, canCatchFocus]);
 
   const handleFocusCapture = useCallback(
     (e: React.FocusEvent<HTMLDivElement>) => {
-      if (!catchfocusCapture || catchFocusCaptureId && catchFocusCaptureId !== currentExpand?.id) return;
+      if (!canCatchFocus) return;
       const target = e.target as HTMLElement;
       if (
         active &&
@@ -137,7 +142,7 @@ export const Expand = ({
         setTimeout(performScroll, 300);
       }
     },
-    [active, catchfocusCapture, catchFocusCaptureId],
+    [active, canCatchFocus],
   );
 
   const handleChange = useCallback(

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

package/src/grid/row/Row.tsx

@@ -1,49 +1,49 @@
-import { createContext } from "react";
-import { GridResponsive } from "../grid.interface";
-import "./row.css";
-
-export type GridGap = boolean | number | string;
-
-export const RowResponsiveContext = createContext<GridResponsive>("app");
-
-type RowProps = {
-  children: React.ReactNode;
-  className?: string;
-  scroll?: boolean;
-  /** true (défaut) : gap par défaut, false : pas de gap, number : px, string : valeur CSS ("1rem") */
-  gap?: GridGap;
-  /** Largeur sur laquelle se basent les breakpoints des Col (défaut : "app") */
-  responsive?: GridResponsive;
-};
-
-const getGutter = (gap: GridGap) => {
-  if (gap === true) return undefined; // garde la valeur par défaut du CSS
-  if (gap === false) return "0px";
-  return typeof gap === "number" ? `${gap}px` : gap;
-};
-
-export const Row: React.FC<RowProps> = ({
-  children,
-  className,
-  scroll,
-  gap = true,
-  responsive = "app",
-}) => {
-  const gutter = getGutter(gap);
-  return (
-    <RowResponsiveContext.Provider value={responsive}>
-      <div
-        className={`grid-row ${className ?? ""} ${scroll ? "scroll" : ""} ${
-          responsive === "row" ? "grid-row--responsive" : ""
-        }`}
-        style={
-          gutter
-            ? ({ "--grid-gutter": gutter } as React.CSSProperties)
-            : undefined
-        }
-      >
-        {children}
-      </div>
-    </RowResponsiveContext.Provider>
-  );
-};
+import { createContext } from "react";
+import { GridResponsive } from "../grid.interface";
+import "./row.css";
+
+export type GridGap = boolean | number | string;
+
+export const RowResponsiveContext = createContext<GridResponsive>("app");
+
+type RowProps = {
+  children: React.ReactNode;
+  className?: string;
+  scroll?: boolean;
+  /** true (défaut) : gap par défaut, false : pas de gap, number : px, string : valeur CSS ("1rem") */
+  gap?: GridGap;
+  /** Largeur sur laquelle se basent les breakpoints des Col (défaut : "app") */
+  responsive?: GridResponsive;
+};
+
+const getGutter = (gap: GridGap) => {
+  if (gap === true) return undefined; // garde la valeur par défaut du CSS
+  if (gap === false) return "0px";
+  return typeof gap === "number" ? `${gap}px` : gap;
+};
+
+export const Row: React.FC<RowProps> = ({
+  children,
+  className,
+  scroll,
+  gap = true,
+  responsive = "app",
+}) => {
+  const gutter = getGutter(gap);
+  return (
+    <RowResponsiveContext.Provider value={responsive}>
+      <div
+        className={`grid-row ${className ?? ""} ${scroll ? "scroll" : ""} ${
+          responsive === "row" ? "grid-row--responsive" : ""
+        }`}
+        style={
+          gutter
+            ? ({ "--grid-gutter": gutter } as React.CSSProperties)
+            : undefined
+        }
+      >
+        {children}
+      </div>
+    </RowResponsiveContext.Provider>
+  );
+};

package/src/toaster/Toaster.tsx

@@ -14,6 +14,7 @@ export const Toaster = () => {
     duration,
     hideToast,
     close,
+    position,
   } = useToasterStore();
   const onClose = useCallback(() => {
     hideToast();
@@ -32,7 +33,7 @@ export const Toaster = () => {
   if (!toasterRoot) return null;
 
   return ReactDOM.createPortal(
-    <div className={`toaster toaster-${severity}`}>
+    <div className={`toaster toaster-${severity} toaster--${position}`}>
       {close && (
         <button
           type="button"

package/src/toaster/store/useToasterStore.tsx

@@ -1,5 +1,11 @@
 import { create } from "zustand";
 
+export type ToasterPosition =
+  | "top-right"
+  | "top-center"
+  | "bottom-right"
+  | "bottom-center";
+
 type ToasterState = {
   title: string;
   description?: string;
@@ -8,6 +14,7 @@ type ToasterState = {
   visible: boolean;
   duration: number;
   close?: boolean;
+  position: ToasterPosition;
   showToast: (
     title: string,
     options?: {
@@ -16,6 +23,8 @@ type ToasterState = {
       duration?: number;
       children?: React.ReactNode;
       close?: boolean;
+      /** Position à l'écran (défaut : "top-right") */
+      position?: ToasterPosition;
     }
   ) => void;
   hideToast: () => void;
@@ -28,6 +37,7 @@ export const useToasterStore = create<ToasterState>((set) => ({
   visible: false,
   duration: 2500,
   close: true,
+  position: "top-right",
   children: null,
   showToast: (title, options = {}) =>
     set(() => ({
@@ -38,6 +48,7 @@ export const useToasterStore = create<ToasterState>((set) => ({
       visible: true,
       children: options.children || null,
       close: options.close ?? true,
+      position: options.position ?? "top-right",
     })),
   hideToast: () => set(() => ({ visible: false })),
 }));

package/src/toaster/toaster.css

@@ -11,6 +11,19 @@
   width: 300px;
   border-radius: 4px;
   border: 1px solid #dede;
+  &.toaster--bottom-right,
+  &.toaster--bottom-center {
+    top: auto;
+    bottom: 0.5rem;
+  }
+  &.toaster--top-center,
+  &.toaster--bottom-center {
+    right: auto;
+    left: 50%;
+    transform: translateX(-50%);
+    max-width: calc(100vw - 1rem);
+    box-sizing: border-box;
+  }
   .toaster--close {
     position: absolute;
     top: 2px;