kelt-ui-kit-react 2.0.3 → 2.0.5

package/src/grid/grid.interface.tsx

@@ -1,7 +1,27 @@
-export interface GridInterface {
-  sm?: number;
-  xs?: number;
-  md?: number;
-  lg?: number;
+/**
+ * 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;
+  sm?: GridColumnSpan;
+  md?: GridColumnSpan;
+  lg?: GridColumnSpan;
+  xl?: GridColumnSpan;
+}
+
+export interface GridInterface extends GridBreakpoints {
   children: React.ReactNode;
 }

package/src/grid/row/Row.tsx

@@ -1,12 +1,49 @@
-import "./row.css";
-type RowProps = {
-  children: React.ReactNode;
-  className?: string;
-  scroll?: boolean;
-};
-
-export const Row: React.FC<RowProps> = ({ children, className, scroll }) => (
-  <div className={`grid-row ${className ?? ""} ${scroll ? "scroll" : ""}`}>
-    {children}
-  </div>
-);
+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/grid/row/row.css

@@ -1,18 +1,26 @@
 .grid-row {
+  --grid-gutter: 15px;
   display: flex;
   flex-wrap: wrap;
-  margin: 0 -15px;
+  column-gap: var(--grid-gutter);
+
+  /* responsive="row" : les breakpoints des Col se basent sur la largeur de la Row.
+     Attention : la Row a alors une largeur min de contenu de 0 dans un parent flex. */
+  &.grid-row--responsive {
+    container: kelt-grid / inline-size;
+  }
+
   &.scroll {
     overflow-x: auto;
     flex-wrap: nowrap;
   }
 }
 
-@container (min-width: 998px) {
+@container app-container (min-width: 998px) {
   .grid-row {
     &.scroll {
       overflow-x: auto;
       flex-wrap: wrap;
     }
   }
-}
+}

package/src/header/Header.tsx

@@ -11,6 +11,7 @@ export const Header = ({
   onClickMenu,
   userChildren,
   positionFixed,
+  overlayClassName,
   onClickLogo,
   showBackNavigation,
   onClickBackNavigation,
@@ -23,7 +24,7 @@ export const Header = ({
   return (
     <div className={`header ${positionFixed ? "header--fixed" : ""}`}>
       <div className="flex-1 d-flex align-items-center">
-        <span onClick={onClickMenu}>
+        <span className="header-menu-btn" onClick={onClickMenu}>
           <Icon size={IconSizeEnum.MEDIUM} classIcon="bi-list"></Icon>
         </span>
         {showBackNavigation && (
@@ -39,7 +40,7 @@ export const Header = ({
           className={`header-logo ${onClickLogo && "cursor-pointer"} `}
           onClick={onClickLogo}
         >
-          {logo && <img src={logo} alt="logo" />}
+          {logo && logo}
         </span>
       </div>
       <div className="d-flex align-items-center">
@@ -49,6 +50,7 @@ export const Header = ({
         </div>
         {openOverlay && refButton.current && (
           <OverlayPanel
+            className={overlayClassName}
             position="bottomRight"
             show={openOverlay}
             closeOverlay={setOpenOverlay}

package/src/header/header.css

@@ -23,4 +23,21 @@
   .bi {
     cursor: pointer;
   }
+
+  .header-menu-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    cursor: pointer;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: -15px;
+      bottom: -15px;
+      left: -15px;
+      right: -15px;
+    }
+  }
 }

package/src/header/header.interface.tsx

@@ -1,10 +1,11 @@
 export interface HeaderInterface {
-  logo?: string;
+  logo?: React.ReactNode;
   children?: React.ReactNode;
   positionFixed?: boolean;
   onClickMenu?: () => void;
   userChildren?: React.ReactNode;
   onClickLogo?: () => void;
+  overlayClassName?: string;
   showBackNavigation?: boolean;
   onClickBackNavigation?: () => void;
 }

package/src/icon/Icon.tsx

@@ -1,10 +1,6 @@
 import "./icon.css";
 import { IconInterface } from "./icon.interface";
 
-export const Icon = ({
-  classIcon,
-  size,
-  onClick,
-}: IconInterface): JSX.Element => {
-  return <i className={`bi ${classIcon} ${size ?? "sm"}`} onClick={onClick} />;
+export const Icon = ({ classIcon, size }: IconInterface): JSX.Element => {
+  return <i className={`bi ${classIcon} ${size ?? "sm"}`} />;
 };

package/src/icon/icon.interface.tsx

@@ -3,5 +3,4 @@ import { IconSizeEnum } from "./iconSize.enum";
 export interface IconInterface {
   classIcon: string;
   size?: IconSizeEnum;
-  onClick?: (e: React.MouseEvent) => void;
 }

package/src/index.css

@@ -1,9 +1,9 @@
 /* variables couleur */
 :root {
-  --primary-color: #004aad;
-  --secondary-color: #ff914d;
-  --tertiary-color: #00ada1;
-  --quaternary-color: #0082ad;
+  --primary-color: #123852;
+  --secondary-color: #EB5E3B;
+  --tertiary-color: #30B8C2;
+  --quaternary-color: #7dc2ef;
   --success-color: #28a745;
   --info-color: #17a2b8;
   --warning-color: #ec942c;
@@ -17,7 +17,10 @@
 html,
 body {
   margin: 0;
-  font-family: "Raleway", sans-serif !important;
+  font-family: "Lexend", sans-serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+  font-size: 18px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   height: 100%;
@@ -28,38 +31,48 @@ body {
   width: 100%;
   background-color: #fff;
 }
+
 .app {
   container: app-container/ inline-size;
 }
 
 input[type="number"]::-webkit-outer-spin-button,
 input[type="number"]::-webkit-inner-spin-button {
-  -webkit-appearance: none; /* Chrome, Safari, Edge */
+  -webkit-appearance: none;
+  /* Chrome, Safari, Edge */
   margin: 0;
 }
+
 /* flex properties */
 
 .d-flex {
   display: flex;
 }
+
 .justify-content-start {
   justify-content: start;
 }
+
 .justify-content-end {
   justify-content: end;
 }
+
 .justify-content-center {
   justify-content: center;
 }
+
 .justify-content-between {
   justify-content: space-between;
 }
+
 .justify-content-around {
   justify-content: space-around;
 }
+
 .justify-content-evenly {
   justify-content: space-evenly;
 }
+
 .align-items-start {
   align-items: start;
 }
@@ -310,63 +323,83 @@ a {
 .mb-3 {
   margin-bottom: 1rem;
 }
+
 .pb-0 {
   padding-bottom: 0;
 }
+
 .pb-1 {
   padding-bottom: 0.25rem;
 }
+
 .pb-2 {
   padding-bottom: 0.5rem;
 }
+
 .pb-3 {
   padding-bottom: 1rem;
 }
+
 .pt-0 {
   padding-top: 0;
 }
+
 .pt-1 {
   padding-top: 0.25rem;
 }
+
 .pt-2 {
   padding-top: 0.5rem;
 }
+
 .pt-3 {
   padding-top: 1rem;
 }
+
 .pl-0 {
   padding-left: 0;
 }
+
 .pl-1 {
   padding-left: 0.25rem;
 }
+
 .pl-2 {
   padding-left: 0.5rem;
 }
+
 .pl-3 {
   padding-left: 1rem;
 }
+
 .pr-0 {
   padding-right: 0;
 }
+
 .pr-1 {
   padding-right: 0.25rem;
 }
+
 .pr-2 {
   padding-right: 0.5rem;
 }
+
 .pr-3 {
   padding-right: 1rem;
 }
+
 .p-0 {
   padding: 0;
 }
+
 .p-1 {
   padding: 0.25rem;
 }
+
 .p-2 {
   padding: 0.5rem;
 }
+
 .p-3 {
   padding: 1rem;
 }
@@ -375,25 +408,32 @@ a {
 .border-bottom {
   border-bottom: 1px solid #cfbdbd;
 }
+
 .border-top {
   border-top: 1px solid #cfbdbd;
 }
+
 .border-left {
   border-left: 1px solid #cfbdbd;
 }
+
 .border-right {
   border-right: 1px solid #cfbdbd;
 }
+
 /* fonts */
 .font-weight-bold {
   font-weight: 600;
 }
+
 .font-weight-light {
   font-weight: 300;
 }
+
 .font-weight-normal {
   font-weight: 400;
 }
+
 .font-weight-italic {
   font-style: italic;
 }
@@ -402,32 +442,41 @@ a {
 .visible {
   visibility: visible;
 }
+
 .hidden {
   visibility: hidden;
 }
+
 .position-relative {
   position: relative;
 }
+
 .position-absolute {
   position: absolute;
 }
+
 .cursor-pointer {
   cursor: pointer;
 }
+
 .w-100 {
   width: 100%;
 }
+
 .min-width-auto {
   min-width: auto;
 }
+
 .disabled {
   opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none;
 }
+
 .overflow-auto {
   overflow: auto;
 }
+
 .toggle-btn {
   display: flex;
   width: 100%;
@@ -492,11 +541,8 @@ a {
   /* Couleurs : gris pour la barre, transparent pour le fond */
 }
 
-@media (min-width: 576px) {
-}
+@media (min-width: 576px) {}
 
-@media (min-width: 768px) {
-}
+@media (min-width: 768px) {}
 
-@media (min-width: 992px) {
-}
+@media (min-width: 992px) {}

package/src/index.ts

@@ -19,13 +19,13 @@ export { useIsMobile } from "./_core/hooks/useIsMobile";
 export { useToken } from "./_core/hooks/useToken";
 export { useValidate } from "./_core/hooks/useValidate";
 export { WidgetSupport } from "./_core/hooks/widgetSupport";
-
 export { ButtonAction } from "./action/ButtonAction";
+export { AddressSearch } from "./addressSearch/AddressSearch";
+export type { AddressSearchProps } from "./addressSearch/AddressSearch";
 export { Badge } from "./badge/Badge";
 export { Button } from "./button/Button";
 export { ButtonActions } from "./button/buttonActions/ButtonActions";
 export { ButtonFile } from "./button/buttonFile/ButtonFile";
-export { ButtonFilters } from "./button/buttonFilters/ButtonFilters";
 export { Card } from "./card/Card";
 export { Carousel } from "./carousel/Carousel";
 export { Damier } from "./damier/Damier";
@@ -35,11 +35,21 @@ export { Expands } from "./expands/Expands";
 export { FilAriane } from "./filAriane/FilAriane";
 export { DynamicForm } from "./form/Form";
 export { TypeInputEnum } from "./form/form.enum";
+export type { FormMode, FormSection } from "./form/form.interface";
 export { Input } from "./form/input/Input";
 export { InputNumber } from "./form/inputNumber/InputNumber";
 export { InputPrice } from "./form/inputPrice/InputPrice";
 export { TextArea } from "./form/textArea/TextArea";
 export { Grid } from "./grid/Grid";
+export {
+  GeocodingService,
+  geocodingService,
+} from "./geocoding/GeocodingService";
+export type {
+  GeocodedAddress,
+  GeocodingProvider,
+  GeocodingSearchOptions,
+} from "./geocoding/geocoding.interface";
 export { Header } from "./header/Header";
 export { Icon } from "./icon/Icon";
 export { IconSizeEnum } from "./icon/iconSize.enum";

package/src/menus/Menus.tsx

@@ -22,6 +22,7 @@ export const Menus = (props: ExpandProps) => {
           <Menu
             item={item}
             onChange={onChange}
+            className={item.subMenu && item.subMenu.length > 0 ? "has-submenu" : ""}
             active={currentItem?.id === item.id}
           />
           {item.subMenu && item.subMenu.length > 0 && (

package/src/menus/menu/Menu.tsx

@@ -4,12 +4,13 @@ export type MenuProps = {
   active: boolean;
   item: MenuInterface;
   onChange: (item: MenuInterface) => void;
+  className?: string;
 };
 export const Menu = (props: MenuProps): JSX.Element => {
   return (
     <div
       onClick={() => props.onChange(props.item)}
-      className={props.active ? "expand expand--active" : "expand"}
+      className={`expand ${props.active ? "expand--active" : ""} ${props.className || ""}`}
     >
       {props.item.children}
     </div>

package/src/select/Select.tsx

@@ -10,6 +10,7 @@ export interface SelectProps {
   label?: string;
   title?: string;
   disabled?: boolean;
+  style?: React.CSSProperties;
   name?: string;
   defaultValue?: string | string[];
   multiple?: boolean;
@@ -33,6 +34,7 @@ export const Select = ({
   options,
   className,
   disabled,
+  style,
   multiple = false,
   showOptions = false,
   defaultValue,
@@ -151,6 +153,7 @@ export const Select = ({
         ref={triggerRef}
         id={`select-${id}`}
         disabled={disabled}
+        style={style}
         className="select-container-button"
         onClick={(e) => {
           setOverlayRef(e.currentTarget as HTMLElement);
@@ -203,9 +206,8 @@ export const Select = ({
                   <div
                     key={option.value}
                     aria-valuetext={option.label}
-                    className={`select-overlay-option ${option.disabled ? "disabled" : ""}  ${
-                      selectedValues.includes(option.value) ? "selected" : ""
-                    }`}
+                    className={`select-overlay-option ${option.disabled ? "disabled" : ""}  ${selectedValues.includes(option.value) ? "selected" : ""
+                      }`}
                     onClick={() =>
                       !option.disabled && handleOptionClick(option.value)
                     }