kelt-ui-kit-react 2.0.8 → 2.1.0

package/src/sidebarData/SidebarData.tsx

@@ -1,19 +1,19 @@
-import { Sidebar, SidebarProps } from "../sidebar/Sidebar";
-import "./sidebarData.css";
-
-interface SidebarDataProps extends SidebarProps {
-  children?: React.ReactNode;
-  classNameContent?: string;
-}
-
-export const SidebarData = (props: SidebarDataProps) => {
-  return (
-    <Sidebar {...props} className={`full sidebar-data ${props.className}`}>
-      {props.children && (
-        <div className={`sidebar-data-content ${props.classNameContent} `}>
-          {props.children}
-        </div>
-      )}
-    </Sidebar>
-  );
-};
+import { Sidebar, SidebarProps } from "../sidebar/Sidebar";
+import "./sidebarData.css";
+
+interface SidebarDataProps extends SidebarProps {
+  children?: React.ReactNode;
+  classNameContent?: string;
+}
+
+export const SidebarData = (props: SidebarDataProps) => {
+  return (
+    <Sidebar {...props} className={`full sidebar-data ${props.className}`}>
+      {props.children && (
+        <div className={`sidebar-data-content ${props.classNameContent} `}>
+          {props.children}
+        </div>
+      )}
+    </Sidebar>
+  );
+};

package/src/sidebarData/SidebarData.view.tsx

@@ -1,19 +1,19 @@
-import { useCallback, useState } from "react";
-import { Button } from "../button/Button";
-import { SidebarData } from "./SidebarData";
-
-export const SidebarDataView = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  const onClick = useCallback(() => {
-    setIsOpen(true);
-  }, [setIsOpen]);
-  const onClose = useCallback(() => {
-    setIsOpen(false);
-  }, [setIsOpen]);
-  return (
-    <>
-      <Button title={"open me"} onClick={onClick}></Button>
-      <SidebarData onClose={onClose} width="20vw" title="Infos" open={isOpen} />
-    </>
-  );
-};
+import { useCallback, useState } from "react";
+import { Button } from "../button/Button";
+import { SidebarData } from "./SidebarData";
+
+export const SidebarDataView = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const onClick = useCallback(() => {
+    setIsOpen(true);
+  }, [setIsOpen]);
+  const onClose = useCallback(() => {
+    setIsOpen(false);
+  }, [setIsOpen]);
+  return (
+    <>
+      <Button title={"open me"} onClick={onClick}></Button>
+      <SidebarData onClose={onClose} width="20vw" title="Infos" open={isOpen} />
+    </>
+  );
+};

package/src/sidebarData/sidebarData.css

@@ -1,27 +1,27 @@
-.sidebar {
-  &.sidebar-data {
-    background-color: #fff;
-    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.3);
-    color: #333;
-    display: flex;
-    flex-direction: column;
-    &.closed {
-      transform: translateX(100vw);
-    }
-
-    .toggle-btn {
-      color: #333;
-    }
-
-    .sidebar-data-content {
-      padding: 1rem;
-    }
-  }
-}
-@media screen and (max-width: 992px) {
-  .sidebar {
-    &.sidebar-data {
-      width: 100% !important;
-    }
-  }
-}
+.sidebar {
+  &.sidebar-data {
+    background-color: #fff;
+    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.3);
+    color: #333;
+    display: flex;
+    flex-direction: column;
+    &.closed {
+      transform: translateX(100vw);
+    }
+
+    .toggle-btn {
+      color: #333;
+    }
+
+    .sidebar-data-content {
+      padding: 1rem;
+    }
+  }
+}
+@media screen and (max-width: 992px) {
+  .sidebar {
+    &.sidebar-data {
+      width: 100% !important;
+    }
+  }
+}

package/src/tabs/Tabs.tsx

@@ -1,90 +1,101 @@
-import React, { useEffect, useRef, useState } from "react";
-import "./tabs.css";
-export type TabItem = {
-  key: string;
-  title: React.ReactNode;
-  panel: React.ReactNode;
-  disabled?: boolean;
-};
-
-export type TabsProps = {
-  items: TabItem[];
-  defaultIndex?: number;
-  index?: number; // if provided, component is controlled
-  onChange?: (nextIndex: number) => void;
-  className?: string;
-  tabClassName?: string;
-  panelClassName?: string;
-};
-
-export const Tabs = ({
-  items,
-  defaultIndex = 0,
-  index,
-  onChange,
-  className = "",
-  tabClassName = "",
-  panelClassName = "",
-}: TabsProps) => {
-  const isControlled = typeof index === "number";
-  const [active, setActive] = useState<number>(defaultIndex);
-  const current = isControlled ? (index as number) : active;
-
-  useEffect(() => {
-    // clamp
-    if (!isControlled && (defaultIndex < 0 || defaultIndex >= items.length)) {
-      setActive(0);
-    }
-  }, [defaultIndex, items.length, isControlled]);
-
-  const tabsRef = useRef<Array<HTMLButtonElement | null>>([]);
-
-  const activate = (next: number) => {
-    if (items[next]?.disabled) return;
-    if (isControlled) {
-      onChange?.(next);
-    } else {
-      setActive(next);
-      onChange?.(next);
-    }
-    tabsRef.current[next]?.focus();
-  };
-
-  return (
-    <div className={`tabs-root ${className}`}>
-      <div role="tablist" className="tabs-header">
-        {items.map((t, i) => (
-          <button
-            key={`tab-${t.key}`}
-            ref={(r) => (tabsRef.current[i] = r)}
-            role="tab"
-            id={`tab-${t.key}`}
-            aria-selected={current === i}
-            aria-controls={`panel-${t.key}`}
-            tabIndex={current === i ? 0 : -1}
-            disabled={t.disabled}
-            onClick={() => activate(i)}
-            className={`${tabClassName} tab-button ${
-              current === i ? "tab-button--active" : ""
-            } ${t.disabled ? "tab-button--disabled" : ""}`}
-          >
-            {t.title}
-          </button>
-        ))}
-      </div>
-
-      {items.map((t, i) => (
-        <div
-          key={`panel-${t.key}`}
-          role="tabpanel"
-          id={`panel-${t.key}`}
-          aria-labelledby={`tab-${t.key}`}
-          hidden={current !== i}
-          className={`${panelClassName} mt-3`}
-        >
-          {current === i && t.panel}
-        </div>
-      ))}
-    </div>
-  );
-};
+import React, { useEffect, useRef, useState } from "react";
+import "./tabs.css";
+export type TabItem = {
+  key: string;
+  title: React.ReactNode;
+  panel: React.ReactNode;
+  disabled?: boolean;
+};
+
+export type TabsProps = {
+  items: TabItem[];
+  defaultIndex?: number;
+  index?: number; // if provided, component is controlled
+  onChange?: (nextIndex: number) => void;
+  className?: string;
+  tabClassName?: string;
+  panelClassName?: string;
+  keepMountedVisited?: boolean;
+};
+
+export const Tabs = ({
+  items,
+  defaultIndex = 0,
+  index,
+  onChange,
+  className = "",
+  tabClassName = "",
+  panelClassName = "",
+  keepMountedVisited = false,
+}: TabsProps) => {
+  const isControlled = typeof index === "number";
+  const [active, setActive] = useState<number>(defaultIndex);
+  const current = isControlled ? (index as number) : active;
+  const [visitedTabs, setVisitedTabs] = useState<Set<number>>(
+    () => new Set([current]),
+  );
+
+  useEffect(() => {
+    if (keepMountedVisited) {
+      setVisitedTabs((visited) => visited.has(current) ? visited : new Set([...Array.from(visited), current]));
+    }
+  }, [current, keepMountedVisited]);
+
+  useEffect(() => {
+    // clamp
+    if (!isControlled && (defaultIndex < 0 || defaultIndex >= items.length)) {
+      setActive(0);
+    }
+  }, [defaultIndex, items.length, isControlled]);
+
+  const tabsRef = useRef<Array<HTMLButtonElement | null>>([]);
+
+  const activate = (next: number) => {
+    if (items[next]?.disabled) return;
+    if (isControlled) {
+      onChange?.(next);
+    } else {
+      setActive(next);
+      onChange?.(next);
+    }
+    tabsRef.current[next]?.focus();
+  };
+
+  return (
+    <div className={`tabs-root ${className}`}>
+      <div role="tablist" className="tabs-header">
+        {items.map((t, i) => (
+          <button
+            key={`tab-${t.key}`}
+            ref={(r) => (tabsRef.current[i] = r)}
+            role="tab"
+            id={`tab-${t.key}`}
+            aria-selected={current === i}
+            aria-controls={`panel-${t.key}`}
+            tabIndex={current === i ? 0 : -1}
+            disabled={t.disabled}
+            onClick={() => activate(i)}
+            className={`${tabClassName} tab-button ${
+              current === i ? "tab-button--active" : ""
+            } ${t.disabled ? "tab-button--disabled" : ""}`}
+          >
+            {t.title}
+          </button>
+        ))}
+      </div>
+
+      {items.map((t, i) => (
+        <div
+          key={`panel-${t.key}`}
+          role="tabpanel"
+          id={`panel-${t.key}`}
+          aria-labelledby={`tab-${t.key}`}
+          hidden={current !== i}
+          className={`${panelClassName} mt-3`}
+        >
+          {(current === i || (keepMountedVisited && visitedTabs.has(i))) && t.panel}
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/tabs/Tabs.view.tsx

@@ -1,20 +1,20 @@
-import { TabItem, Tabs } from "./Tabs";
-
-export const TabsView = () => {
-  const items: TabItem[] = [
-    { key: "first", title: "Info", panel: <div>Contenu 1</div> },
-    { key: "second", title: "Détails", panel: <div>Contenu 2</div> },
-    {
-      key: "third",
-      title: "Paramètres",
-      panel: <div>Contenu 3</div>,
-      disabled: false,
-    },
-  ];
-  return (
-    <div>
-      <h2 className="text-xl mb-4">Exemple de Tabs</h2>
-      <Tabs items={items} defaultIndex={0} />
-    </div>
-  );
-};
+import { TabItem, Tabs } from "./Tabs";
+
+export const TabsView = () => {
+  const items: TabItem[] = [
+    { key: "first", title: "Info", panel: <div>Contenu 1</div> },
+    { key: "second", title: "Détails", panel: <div>Contenu 2</div> },
+    {
+      key: "third",
+      title: "Paramètres",
+      panel: <div>Contenu 3</div>,
+      disabled: false,
+    },
+  ];
+  return (
+    <div>
+      <h2 className="text-xl mb-4">Exemple de Tabs</h2>
+      <Tabs items={items} defaultIndex={0} />
+    </div>
+  );
+};

package/src/tabs/tabs.css

@@ -1,30 +1,30 @@
-.tabs-root {
-  height: 100%;
-
-  .tabs-header {
-    display: flex;
-    border-bottom: 1px solid #b2a1a1;
-
-    .tab-button {
-      padding: 0.5rem 0.75rem;
-      border: 0px;
-      outline: none;
-      background-color: transparent;
-      color: #1e293b;
-      /* slate-800 */
-      cursor: pointer;
-
-      &.tab-button--active {
-        border-bottom: 2px solid var(--primary-color);
-        /* slate-800 */
-        border-radius: 0px;
-        font-weight: bold;
-      }
-
-      &.tab-button--disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-    }
-  }
+.tabs-root {
+  height: 100%;
+
+  .tabs-header {
+    display: flex;
+    border-bottom: 1px solid #b2a1a1;
+
+    .tab-button {
+      padding: 0.5rem 0.75rem;
+      border: 0px;
+      outline: none;
+      background-color: transparent;
+      color: #1e293b;
+      /* slate-800 */
+      cursor: pointer;
+
+      &.tab-button--active {
+        border-bottom: 2px solid var(--primary-color);
+        /* slate-800 */
+        border-radius: 0px;
+        font-weight: bold;
+      }
+
+      &.tab-button--disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+  }
 }

package/src/toaster/Toaster.tsx

@@ -1,61 +1,61 @@
-import { useCallback, useEffect } from "react";
-import ReactDOM from "react-dom";
-import { Icon } from "../icon/Icon";
-import { useToasterStore } from "./store/useToasterStore";
-import "./toaster.css";
-
-export const Toaster = () => {
-  const {
-    title,
-    description,
-    severity = "info",
-    visible,
-    children,
-    duration,
-    hideToast,
-    close,
-    position,
-  } = useToasterStore();
-  const onClose = useCallback(() => {
-    hideToast();
-  }, [hideToast]);
-  useEffect(() => {
-    if (!visible) return;
-    const timer = setTimeout(() => {
-      hideToast();
-    }, duration);
-    return () => clearTimeout(timer);
-  }, [visible, duration, hideToast]);
-
-  if (!visible) return null;
-
-  const toasterRoot = document.getElementById("toaster-root");
-  if (!toasterRoot) return null;
-
-  return ReactDOM.createPortal(
-    <div className={`toaster toaster-${severity} toaster--${position}`}>
-      {close && (
-        <button
-          type="button"
-          className="toaster--close"
-          onClick={onClose}
-          aria-label="Fermer la notification"
-        >
-          <Icon classIcon="bi-x" />
-        </button>
-      )}
-      <div>
-        {severity === "info" && <Icon classIcon="bi-info-circle" />}
-        {severity === "success" && <Icon classIcon="bi-check-circle" />}
-        {severity === "error" && <Icon classIcon="bi-x-circle" />}
-        {severity === "warning" && <Icon classIcon="bi-exclamation-triangle" />}
-      </div>
-      <div>
-        <div className={`title title-${severity}`}>{title}</div>
-        {description && <div className="subtitle">{description}</div>}
-        {children}
-      </div>
-    </div>,
-    toasterRoot
-  );
-};
+import { useCallback, useEffect } from "react";
+import ReactDOM from "react-dom";
+import { Icon } from "../icon/Icon";
+import { useToasterStore } from "./store/useToasterStore";
+import "./toaster.css";
+
+export const Toaster = () => {
+  const {
+    title,
+    description,
+    severity = "info",
+    visible,
+    children,
+    duration,
+    hideToast,
+    close,
+    position,
+  } = useToasterStore();
+  const onClose = useCallback(() => {
+    hideToast();
+  }, [hideToast]);
+  useEffect(() => {
+    if (!visible) return;
+    const timer = setTimeout(() => {
+      hideToast();
+    }, duration);
+    return () => clearTimeout(timer);
+  }, [visible, duration, hideToast]);
+
+  if (!visible) return null;
+
+  const toasterRoot = document.getElementById("toaster-root");
+  if (!toasterRoot) return null;
+
+  return ReactDOM.createPortal(
+    <div className={`toaster toaster-${severity} toaster--${position}`}>
+      {close && (
+        <button
+          type="button"
+          className="toaster--close"
+          onClick={onClose}
+          aria-label="Fermer la notification"
+        >
+          <Icon classIcon="bi-x" />
+        </button>
+      )}
+      <div>
+        {severity === "info" && <Icon classIcon="bi-info-circle" />}
+        {severity === "success" && <Icon classIcon="bi-check-circle" />}
+        {severity === "error" && <Icon classIcon="bi-x-circle" />}
+        {severity === "warning" && <Icon classIcon="bi-exclamation-triangle" />}
+      </div>
+      <div>
+        <div className={`title title-${severity}`}>{title}</div>
+        {description && <div className="subtitle">{description}</div>}
+        {children}
+      </div>
+    </div>,
+    toasterRoot
+  );
+};

package/src/toaster/Toaster.view.tsx

@@ -1,25 +1,25 @@
-import { useCallback } from "react";
-import { Button } from "../button/Button";
-import { useToasterStore } from "./store/useToasterStore";
-
-export const ToasterView = (): JSX.Element => {
-  const { showToast } = useToasterStore();
-  const handleClickToast = useCallback(() => {
-    showToast("This is a toast message", {
-      description: "This is a description for the toast message.",
-      severity: "warning",
-      duration: 10000,
-      close: true,
-      children: <div>Additional content can go here.</div>,
-    });
-  }, [showToast]);
-  return (
-    <div>
-      <Button
-        title="Show Toast"
-        onClick={handleClickToast}
-        className="btn btn-primary"
-      />
-    </div>
-  );
-};
+import { useCallback } from "react";
+import { Button } from "../button/Button";
+import { useToasterStore } from "./store/useToasterStore";
+
+export const ToasterView = (): JSX.Element => {
+  const { showToast } = useToasterStore();
+  const handleClickToast = useCallback(() => {
+    showToast("This is a toast message", {
+      description: "This is a description for the toast message.",
+      severity: "warning",
+      duration: 10000,
+      close: true,
+      children: <div>Additional content can go here.</div>,
+    });
+  }, [showToast]);
+  return (
+    <div>
+      <Button
+        title="Show Toast"
+        onClick={handleClickToast}
+        className="btn btn-primary"
+      />
+    </div>
+  );
+};