kelt-ui-kit-react 2.0.6 → 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/expands.css

@@ -1,102 +1,102 @@
-.expands {
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-
-  .expand {
-    border: 1px solid #cfbdbd;
-    overflow: hidden;
-    margin-bottom: 1rem;
-    border-radius: 4px;
-    display: flex;
-    flex-direction: column;
-    background-color: #fff;
-    cursor: pointer;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    .expand-header-content {
-      display: flex;
-      width: 100%;
-      align-items: center;
-
-      .expand-header-content-default {
-        display: flex;
-        width: 100%;
-        align-items: center;
-      }
-    }
-
-    .expand-header-custom {
-      .expand-header--children {
-        display: none;
-      }
-    }
-
-    &.expand--active {
-      height: 300px;
-      flex: 1;
-      min-height: 200px;
-
-      .expand-header {
-        background-color: color-mix(in srgb, var(--primary-color), white 5%);
-        color: #fff;
-      }
-
-      .expand-header-custom {
-        .expand-header--children {
-          display: flex;
-        }
-
-        .expand-header--values {
-          display: none;
-        }
-      }
-
-      & .expand-body {
-        display: flex;
-      }
-    }
-
-    & .expand-header {
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      padding: 15px;
-      color: #333;
-      background-color: #fff;
-
-      &.expand-header-custom {
-        margin-bottom: 1rem;
-      }
-
-      .expand-header-title-right {
-        font-size: 0.85rem;
-        font-weight: 600;
-      }
-
-      .expand-header-title-left {
-        margin-right: 0.5rem;
-        text-transform: uppercase;
-        font-size: 18px;
-        font-weight: 500;
-      }
-    }
-
-    & .expand-footer {
-      padding: 15px;
-    }
-
-    & .expand-body {
-      display: none;
-      flex: 1;
-      width: 100%;
-      padding-top: 1rem;
-      padding: 15px;
-      overflow: auto;
-      flex-direction: column;
-    }
-  }
+.expands {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+
+  .expand {
+    border: 1px solid #cfbdbd;
+    overflow: hidden;
+    margin-bottom: 1rem;
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    background-color: #fff;
+    cursor: pointer;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .expand-header-content {
+      display: flex;
+      width: 100%;
+      align-items: center;
+
+      .expand-header-content-default {
+        display: flex;
+        width: 100%;
+        align-items: center;
+      }
+    }
+
+    .expand-header-custom {
+      .expand-header--children {
+        display: none;
+      }
+    }
+
+    &.expand--active {
+      height: 300px;
+      flex: 1;
+      min-height: 200px;
+
+      .expand-header {
+        background-color: color-mix(in srgb, var(--primary-color), white 5%);
+        color: #fff;
+      }
+
+      .expand-header-custom {
+        .expand-header--children {
+          display: flex;
+        }
+
+        .expand-header--values {
+          display: none;
+        }
+      }
+
+      & .expand-body {
+        display: flex;
+      }
+    }
+
+    & .expand-header {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      padding: 15px;
+      color: #333;
+      background-color: #fff;
+
+      &.expand-header-custom {
+        margin-bottom: 1rem;
+      }
+
+      .expand-header-title-right {
+        font-size: 0.85rem;
+        font-weight: 600;
+      }
+
+      .expand-header-title-left {
+        margin-right: 0.5rem;
+        text-transform: uppercase;
+        font-size: 18px;
+        font-weight: 500;
+      }
+    }
+
+    & .expand-footer {
+      padding: 15px;
+    }
+
+    & .expand-body {
+      display: none;
+      flex: 1;
+      width: 100%;
+      padding-top: 1rem;
+      padding: 15px;
+      overflow: auto;
+      flex-direction: column;
+    }
+  }
 }

package/src/filAriane/FilAriane.tsx

@@ -1,57 +1,57 @@
-import { useCallback } from "react";
-import "./filAriane.css";
-import { FilArianeInterface } from "./filAriane.interface";
-type FilArianeProps = {
-  filArianes?: FilArianeInterface[];
-  currentFil?: number;
-  title?: string;
-  onClick?: (fil?: FilArianeInterface) => void;
-};
-export const FilAriane = ({
-  filArianes,
-  onClick,
-  currentFil,
-  title,
-}: FilArianeProps) => {
-  const handleClick = useCallback(
-    (e: React.MouseEvent<HTMLAnchorElement>, fil?: FilArianeInterface) => {
-      if (!fil?.url) {
-        e.preventDefault();
-      }
-      if (onClick) {
-        onClick(fil);
-      }
-    },
-    [onClick]
-  );
-  return (
-    <div className="filArianes">
-      {title && (
-        <small className="filAriane font-weight-bold text-uppercase">
-          {title} <i className="filAriane-chevron bi bi-caret-right-fill"></i>
-        </small>
-      )}
-      {filArianes?.map((filAriane, index) => {
-        return (
-          <div
-            key={index}
-            className={`filAriane ${
-              filAriane.id === currentFil ? "filAriane--active" : ""
-            }`}
-          >
-            <a
-              href={filAriane.url || "#"}
-              onClick={(e) => handleClick(e, filAriane)}
-            >
-              {filAriane.title}
-            </a>
-
-            {!filAriane.isLast && (
-              <i className="filAriane-chevron bi bi-caret-right-fill"></i>
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-};
+import { useCallback } from "react";
+import "./filAriane.css";
+import { FilArianeInterface } from "./filAriane.interface";
+type FilArianeProps = {
+  filArianes?: FilArianeInterface[];
+  currentFil?: number;
+  title?: string;
+  onClick?: (fil?: FilArianeInterface) => void;
+};
+export const FilAriane = ({
+  filArianes,
+  onClick,
+  currentFil,
+  title,
+}: FilArianeProps) => {
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLAnchorElement>, fil?: FilArianeInterface) => {
+      if (!fil?.url) {
+        e.preventDefault();
+      }
+      if (onClick) {
+        onClick(fil);
+      }
+    },
+    [onClick]
+  );
+  return (
+    <div className="filArianes">
+      {title && (
+        <small className="filAriane font-weight-bold text-uppercase">
+          {title} <i className="filAriane-chevron bi bi-caret-right-fill"></i>
+        </small>
+      )}
+      {filArianes?.map((filAriane, index) => {
+        return (
+          <div
+            key={index}
+            className={`filAriane ${
+              filAriane.id === currentFil ? "filAriane--active" : ""
+            }`}
+          >
+            <a
+              href={filAriane.url || "#"}
+              onClick={(e) => handleClick(e, filAriane)}
+            >
+              {filAriane.title}
+            </a>
+
+            {!filAriane.isLast && (
+              <i className="filAriane-chevron bi bi-caret-right-fill"></i>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/filAriane/FilAriane.view.tsx

@@ -1,28 +1,28 @@
-import { FilAriane } from "./FilAriane";
-
-export const FilArianeView = () => {
-  const filArianes = [
-    {
-      id: 1,
-      title: "Home",
-      url: "/",
-      isCurrent: false,
-      isLast: false,
-    },
-    {
-      id: 2,
-      title: "Page",
-      url: "/page",
-      isCurrent: false,
-      isLast: false,
-    },
-    {
-      id: 3,
-      title: "Test",
-      url: "/page",
-      isCurrent: true,
-      isLast: true,
-    },
-  ];
-  return <FilAriane title={"test"} filArianes={filArianes} />;
-};
+import { FilAriane } from "./FilAriane";
+
+export const FilArianeView = () => {
+  const filArianes = [
+    {
+      id: 1,
+      title: "Home",
+      url: "/",
+      isCurrent: false,
+      isLast: false,
+    },
+    {
+      id: 2,
+      title: "Page",
+      url: "/page",
+      isCurrent: false,
+      isLast: false,
+    },
+    {
+      id: 3,
+      title: "Test",
+      url: "/page",
+      isCurrent: true,
+      isLast: true,
+    },
+  ];
+  return <FilAriane title={"test"} filArianes={filArianes} />;
+};