kelt-ui-kit-react 2.0.6 → 2.0.8

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;