kelt-ui-kit-react 2.0.2 → 2.0.4

package/package.json

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

package/src/card/Card.tsx

@@ -1,10 +1,12 @@
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { Icon } from "../icon/Icon";
 import { PositionOverlay } from "../overlayPanel/OverlayPanel";
 import "./card.css";
 import { CardInterface } from "./card.interface";
 import { CardActionInterface } from "./cardAction.interface";
 import { CardAction } from "./cardAction/CardAction";
+import { GridInterface, GridResponsive } from "../grid/grid.interface";
+import { Grid } from "../grid/Grid";
 type CardProps = {
   item: CardInterface;
   actions?: CardActionInterface[];
@@ -14,6 +16,8 @@ type CardProps = {
   children?: JSX.Element;
   customAction?: JSX.Element;
   positionOverlay?: PositionOverlay;
+  /** Largeur sur laquelle se basent les breakpoints du footer, défaut : "app" */
+  responsive?: GridResponsive;
 };
 
 // Composant Card modifié
@@ -25,6 +29,7 @@ export const Card = ({
   onClose,
   customAction,
   positionOverlay,
+  responsive = "app",
   children,
 }: CardProps): JSX.Element => {
   const [cliqueAction, setCliqueAction] = useState(false);
@@ -69,14 +74,38 @@ export const Card = ({
       cliqueAction,
     ]
   );
+  const customeActionGrid: GridInterface[] = useMemo(() => {
+    return customAction ? [
+      {
+        xs: 12,
+        md: 6,
+        children: (
+          <div className="card-custom-action">{customAction}</div>
+        ),
+      }
+    ] : [];
+  }, [customAction]);
 
+  const footerGrid: GridInterface[] = useMemo(() => {
+    return [
+      ...customeActionGrid,
+      {
+        xs: 12,
+        md: customAction ? 6 : 12,
+        children: (
+          <div className="d-flex flex-1 align-items-center">
+            {item.prix && <div className="card-prix">{item.prix}</div>}
+          </div>
+        ),
+      },
+    ];
+  }, [customAction, item.prix]);
   return (
     <div
       onContextMenu={(e) => e.preventDefault()}
       onMouseDown={(e) => onClickCard(e, item)}
-      className={`card ${className ?? ""} ${
-        cliqueAction ? "card--active" : ""
-      } `}
+      className={`card ${className ?? ""} ${cliqueAction ? "card--active" : ""
+        } `}
     >
       {children}
       {!children && (
@@ -92,14 +121,11 @@ export const Card = ({
               <div className="card-content">{item.description}</div>
             )}
           </div>
-          <div className="card-footer">
-            {customAction && (
-              <div className="card-custom-action">{customAction}</div>
-            )}
-            <div className="d-flex flex-1 align-items-center">
-              {item.prix && <div className="card-prix">{item.prix}</div>}
+          {footerGrid.length > 0 && (
+            <div className="card-footer">
+              <Grid items={footerGrid} responsive={responsive} />
             </div>
-          </div>
+          )}
           {onClose && (
             <div
               className="ml-2 cursor-pointer"

package/src/card/card.css

@@ -69,8 +69,7 @@
       flex: 1;
       display: flex;
       justify-content: flex-end;
-    }
-  }
+    }  }
 
   &:not(.card--horizontal) {
     .card-title {
@@ -97,7 +96,7 @@
     display: none;
   }
 }
-@container (min-width: 992px) {
+@container app-container (min-width: 992px) {
   .card {
     .card-custom-action {
       justify-content: end;

package/src/expands/Expands.tsx

@@ -9,6 +9,7 @@ type ExpandProps = {
   onChange?: (item: ExpandInterface) => void;
   currentItem?: ExpandInterface;
   showArrow?: boolean;
+  catchfocusCapture?: boolean;
 };
 
 export const Expands = (props: ExpandProps) => {
@@ -34,6 +35,7 @@ export const Expands = (props: ExpandProps) => {
           showArrow={props.showArrow}
           onChange={onChangeExpand}
           currentExpand={currentExpand}
+          catchfocusCapture={props.catchfocusCapture}
         />
       ))}
     </div>

package/src/expands/expand/expand.tsx

@@ -7,6 +7,8 @@ export type ExpandProps = {
   item: ExpandInterface;
   className?: string;
   showArrow?: boolean;
+  catchfocusCapture?: boolean
+
   onChange: (item: ExpandInterface) => void;
 };
 export const Expand = ({
@@ -14,12 +16,14 @@ export const Expand = ({
   item,
   className,
   showArrow = true,
+  catchfocusCapture = false,
   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) {
@@ -66,6 +70,7 @@ export const Expand = ({
   }, []);
 
   useEffect(() => {
+    if (!catchfocusCapture) return;
     if (active) {
       const timer1 = setTimeout(() => {
         scrollToHeader();
@@ -78,10 +83,11 @@ export const Expand = ({
         clearTimeout(timer2);
       };
     }
-  }, [active, scrollToHeader]);
+  }, [active, scrollToHeader, catchfocusCapture]);
 
   const handleFocusCapture = useCallback(
     (e: React.FocusEvent<HTMLDivElement>) => {
+      if (!catchfocusCapture) return;
       const target = e.target as HTMLElement;
       if (
         active &&

package/src/form/Form.tsx

@@ -20,6 +20,7 @@ import { InputPrice } from "./inputPrice/InputPrice";
 import { TextArea } from "./textArea/TextArea";
 import { Col } from "../grid/col/Col";
 import { Row } from "../grid/row/Row";
+import { GridBreakpoints, GridResponsive } from "../grid/grid.interface";
 import { TypeInputEnum } from "./form.enum";
 import { AddressSearch } from "../addressSearch/AddressSearch";
 
@@ -54,6 +55,11 @@ export type FormProps<
   sections?: FormSection[];
   disabledSubmit?: boolean;
   mode?: FormMode;
+  /** Largeur sur laquelle se basent les breakpoints des champs (col), défaut : "app" */
+  responsive?: GridResponsive;
+  /** Place le bouton submit dans la grid (dernière ligne) avec ces tailles de col.
+   *  Ignoré si les champs n'utilisent pas la grid : le bouton reste dans le footer. */
+  submitCol?: GridBreakpoints;
   onSubmit?: (values: FormValuesInterface<T>) => void;
   onChange?: (values: FormValuesInterface<T>) => void;
 };
@@ -73,6 +79,8 @@ export const DynamicForm = forwardRef(
       disabledSubmit = false,
       mode = "edit",
       className,
+      responsive,
+      submitCol,
     }: FormProps<T>,
     ref: React.Ref<{
       clearInput?: (name: string) => void;
@@ -272,12 +280,30 @@ export const DynamicForm = forwardRef(
         : String(value);
     };
 
-    const renderFields = (fields: FormInterface[]) => {
+    const submitButton = mode === "edit" && !hideSubmit && (
+      <Button
+        id={`button-${id}`}
+        disabled={btnDisabledSubmit}
+        title={title || "submit"}
+      />
+    );
+    // Le bouton va dans la grid de la dernière liste de champs, si elle en a une
+    const lastFields = sections
+      ? sections[sections.length - 1]?.fields ?? []
+      : initialForm ?? [];
+    const submitInGrid =
+      !!submitCol && lastFields.some((field) => field.col !== undefined);
+
+    const renderFields = (fields: FormInterface[], withSubmit = false) => {
       const gridEnabled = fields.some((field) => field.col !== undefined);
-      const FieldsContainer = gridEnabled ? Row : React.Fragment;
+      const FieldsContainer: React.ElementType = gridEnabled
+        ? Row
+        : React.Fragment;
+      // Un Fragment n'accepte pas de props : on ne les passe qu'à la Row
+      const containerProps = gridEnabled ? { responsive } : {};
 
       return (
-        <FieldsContainer>
+        <FieldsContainer {...containerProps}>
           {fields.map((v, key) => {
             const required = v.onRequired
               ? v.onRequired(v.value)
@@ -339,6 +365,8 @@ export const DynamicForm = forwardRef(
                       options={v.options ?? []}
                       disabled={disabled}
                       multiple={v.multiple}
+                      usePortal={v.usePortal}
+                      searchable={v.searchable}
                       value={values[v.name] as any}
                       required={required}
                       defaultValue={v.value as string | string[]}
@@ -406,6 +434,11 @@ export const DynamicForm = forwardRef(
               </FormFieldContainer>
             );
           })}
+          {withSubmit && submitButton && (
+            <Col {...submitCol}>
+              <div className="form-submit-col">{submitButton}</div>
+            </Col>
+          )}
         </FieldsContainer>
       );
     };
@@ -426,20 +459,17 @@ export const DynamicForm = forwardRef(
                 {section.title && (
                   <h3 className="form-section-title">{section.title}</h3>
                 )}
-                {renderFields(section.fields)}
+                {renderFields(
+                  section.fields,
+                  submitInGrid && index === sections.length - 1
+                )}
               </section>
             ))
-            : renderFields(initialForm ?? [])}
+            : renderFields(initialForm ?? [], submitInGrid)}
           {children}
         </div>
         <div className="d-flex justify-content-end form-footer">
-          {mode === "edit" && !hideSubmit && (
-            <Button
-              id={`button-${id}`}
-              disabled={btnDisabledSubmit}
-              title={title || "submit"}
-            />
-          )}
+          {!submitInGrid && submitButton}
         </div>
       </form>
     );

package/src/form/form.css

@@ -25,7 +25,7 @@ form {
   }
 
   .form-section-title {
-    margin: 0 15px 0.5rem;
+    margin: 0 0 0.5rem;
     padding-bottom: 0.5rem;
     border-bottom: 1px solid #dedede;
     color: var(--primary-color);
@@ -87,7 +87,7 @@ form {
   .form-read-value {
     width: 100%;
     min-width: 250px;
-    min-height: calc(1em + 1rem + 2px);
+    min-height: 0px;
     box-sizing: border-box;
     border: 1px solid transparent;
     border-radius: 4px;
@@ -105,6 +105,19 @@ form {
 
   .grid-row {
 
+    /* Bouton submit placé dans la grid (submitCol) : aligné en bas, sur les inputs */
+    .form-submit-col {
+      display: flex;
+      align-items: flex-end;
+      justify-content: flex-end;
+      height: 100%;
+
+      button {
+        margin-top: 0;
+        margin-bottom: 0.25rem;
+      }
+    }
+
     .form-group,
     .input-container,
     .select-container,

package/src/form/form.interface.tsx

@@ -24,7 +24,7 @@ export interface FormSection {
 }
 
 export interface FormInterface {
-  value: string | number | boolean | Date;
+  value: string | number | boolean | Date | string[];
   id?: string;
   label?: string;
   focus?: boolean;
@@ -36,6 +36,8 @@ export interface FormInterface {
   condition?: FormCondition;
   icon?: string;
   multiple?: boolean;
+  usePortal?: boolean;
+  searchable?: boolean;
   options?: { value: string; label: string }[]; // <--- pour les <option>
   className?: string;
   col?: GridBreakpoints;
@@ -59,7 +61,7 @@ export interface FormInterface {
     value: string | number | boolean | Date | string[],
     name?: string
   ) => void;
-  onRequired?: (value: string | number | boolean | Date) => boolean;
-  onDisabled?: (value: string | number | boolean | Date) => boolean;
+  onRequired?: (value: string | number | boolean | Date | string[]) => boolean;
+  onDisabled?: (value: string | number | boolean | Date | string[]) => boolean;
   onInvalid?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }

package/src/form/input/input.css

@@ -2,15 +2,18 @@
   position: relative;
   min-width: 250px;
   width: 100%;
+
   &.input-container-radio,
   &.input-container-checkbox {
     min-width: 10px;
     width: 10px;
+
     input {
-      width: 10px;
+      width: 20px;
       min-width: 10px;
     }
   }
+
   .input-password-icon {
     position: absolute;
     right: 10px;
@@ -19,8 +22,9 @@
     display: flex;
     align-items: center;
   }
+
   input {
     width: 100%;
     font-size: 0.8rem;
   }
-}
+}

package/src/grid/Grid.tsx

@@ -1,21 +1,34 @@
-import { Col } from "./col/Col";
-import { Container } from "./container/Container";
-import { GridInterface } from "./grid.interface";
-import { Row } from "./row/Row";
-type GridProps = {
-  items: GridInterface[];
-  className?: string;
-  scroll?: boolean;
-};
-
-export const Grid = ({ items, className, scroll }: GridProps) => {
-  return (
-    <Container>
-      <Row scroll={scroll} className={className}>
-        {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,13 +1,24 @@
-import { ColStyled } from "./colStyled/ColStyled";
-import { GridBreakpoints } from "../grid.interface";
-
-type ColProps = GridBreakpoints & {
-  children: React.ReactNode;
-};
-export const Col: React.FC<ColProps> = ({ xs, sm, md, lg, xl, children }) => {
-  return (
-    <ColStyled $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

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

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

@@ -1,55 +1,59 @@
-import styled, { css } from "styled-components";
-import { GridColumnSpan } from "../../grid.interface";
-
-const getColWidth = (size = 12) => `${(size / 12) * 100}%`;
-type ColStyledProps = {
-  $xs?: GridColumnSpan;
-  $sm?: GridColumnSpan;
-  $md?: GridColumnSpan;
-  $lg?: GridColumnSpan;
-  $xl?: GridColumnSpan;
-};
-export const ColStyled = styled.div<ColStyledProps>`
-  box-sizing: border-box;
-  min-width: 0;
-  padding: 0 15px;
-  flex: 0 0 ${({ $xs }) => getColWidth($xs)};
-  max-width: ${({ $xs }) => getColWidth($xs)};
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  ${({ $sm }) =>
-    $sm &&
-    css`
-      @media (min-width: 576px) {
-        flex: 0 0 ${getColWidth($sm)};
-        max-width: ${getColWidth($sm)};
-      }
-    `}
-
-  ${({ $md }) =>
-    $md &&
-    css`
-      @media (min-width: 768px) {
-        flex: 0 0 ${getColWidth($md)};
-        max-width: ${getColWidth($md)};
-      }
-    `}
-
-  ${({ $lg }) =>
-    $lg &&
-    css`
-      @media (min-width: 992px) {
-        flex: 0 0 ${getColWidth($lg)};
-        max-width: ${getColWidth($lg)};
-      }
-    `}
-
-  ${({ $xl }) =>
-    $xl &&
-    css`
-      @media (min-width: 1200px) {
-        flex: 0 0 ${getColWidth($xl)};
-        max-width: ${getColWidth($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/container/container.css

@@ -1,5 +1,5 @@
 .container {
   width: 100%;
   margin: 0 auto;
-  padding: 0 15px;
-}
+  box-sizing: border-box;
+}

package/src/grid/grid.interface.tsx

@@ -1,4 +1,18 @@
-export type GridColumnSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+/**
+ * Largeur de référence pour les breakpoints des Col :
+ * - "app" (défaut) : le conteneur app-container
+ * - "viewport" : la fenêtre (@media)
+ * - "row" : la Row elle-même (utile pour une grid dans une card, un panneau...)
+ */
+export type GridResponsive = "app" | "viewport" | "row";
+
+/**
+ * Nombre de colonnes sur 12, ou "auto" : la colonne partage la place restante
+ * de la ligne à parts égales avec les autres "auto" (ex. 5 champs sur une ligne).
+ */
+export type GridColumnSpan =
+  | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+  | "auto";
 
 export interface GridBreakpoints {
   xs?: GridColumnSpan;