@edifice.io/react 2.5.6 → 2.5.8-develop-b2school.20260123114940

package/README.md

@@ -105,6 +105,11 @@ export interface ButtonProps {
 export * from './Button';
 ```
 
+## Adding Icons
+
+https://edifice-community.atlassian.net/wiki/spaces/ODE/pages/4371611649/Overview#Ajout-de-l%E2%80%99ic%C3%B4ne
+
 ## Dev
 
 You can build your component using `Storybook`. See [README](../../docs//README.md)
+

package/dist/_virtual/_commonjsHelpers.js

@@ -0,0 +1,8 @@
+var commonjsGlobal = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
+}
+export {
+  commonjsGlobal,
+  getDefaultExportFromCjs
+};

package/dist/_virtual/common.js

@@ -0,0 +1,4 @@
+var common = {};
+export {
+  common as __exports
+};

package/dist/_virtual/de_DE.js

@@ -0,0 +1,4 @@
+var de_DE = {};
+export {
+  de_DE as __exports
+};

package/dist/_virtual/de_DE2.js

@@ -0,0 +1,4 @@
+var de_DE = {};
+export {
+  de_DE as __exports
+};

package/dist/_virtual/de_DE3.js

@@ -0,0 +1,4 @@
+var de_DE = {};
+export {
+  de_DE as __exports
+};

package/dist/_virtual/de_DE4.js

@@ -0,0 +1,4 @@
+var de_DE = {};
+export {
+  de_DE as __exports
+};

package/dist/_virtual/de_DE5.js

@@ -0,0 +1,4 @@
+var de_DE = {};
+export {
+  de_DE as __exports
+};

package/dist/_virtual/de_DE6.js

@@ -0,0 +1,4 @@
+var de_DE = {};
+export {
+  de_DE as __exports
+};

package/dist/_virtual/defineProperty.js

@@ -0,0 +1,4 @@
+var defineProperty = { exports: {} };
+export {
+  defineProperty as __module
+};

package/dist/_virtual/es_ES.js

@@ -0,0 +1,4 @@
+var es_ES = {};
+export {
+  es_ES as __exports
+};

package/dist/_virtual/es_ES2.js

@@ -0,0 +1,4 @@
+var es_ES = {};
+export {
+  es_ES as __exports
+};

package/dist/_virtual/es_ES3.js

@@ -0,0 +1,4 @@
+var es_ES = {};
+export {
+  es_ES as __exports
+};

package/dist/_virtual/es_ES4.js

@@ -0,0 +1,4 @@
+var es_ES = {};
+export {
+  es_ES as __exports
+};

package/dist/_virtual/es_ES5.js

@@ -0,0 +1,4 @@
+var es_ES = {};
+export {
+  es_ES as __exports
+};

package/dist/_virtual/es_ES6.js

@@ -0,0 +1,4 @@
+var es_ES = {};
+export {
+  es_ES as __exports
+};

package/dist/_virtual/fr_FR.js

@@ -0,0 +1,4 @@
+var fr_FR = {};
+export {
+  fr_FR as __exports
+};

package/dist/_virtual/fr_FR2.js

@@ -0,0 +1,4 @@
+var fr_FR = {};
+export {
+  fr_FR as __exports
+};

package/dist/_virtual/fr_FR3.js

@@ -0,0 +1,4 @@
+var fr_FR = {};
+export {
+  fr_FR as __exports
+};

package/dist/_virtual/fr_FR4.js

@@ -0,0 +1,4 @@
+var fr_FR = {};
+export {
+  fr_FR as __exports
+};

package/dist/_virtual/fr_FR5.js

@@ -0,0 +1,4 @@
+var fr_FR = {};
+export {
+  fr_FR as __exports
+};

package/dist/_virtual/fr_FR6.js

@@ -0,0 +1,4 @@
+var fr_FR = {};
+export {
+  fr_FR as __exports
+};

package/dist/_virtual/interopRequireDefault.js

@@ -0,0 +1,4 @@
+var interopRequireDefault = { exports: {} };
+export {
+  interopRequireDefault as __module
+};

package/dist/_virtual/it_IT.js

@@ -0,0 +1,4 @@
+var it_IT = {};
+export {
+  it_IT as __exports
+};

package/dist/_virtual/it_IT2.js

@@ -0,0 +1,4 @@
+var it_IT = {};
+export {
+  it_IT as __exports
+};

package/dist/_virtual/it_IT3.js

@@ -0,0 +1,4 @@
+var it_IT = {};
+export {
+  it_IT as __exports
+};

package/dist/_virtual/it_IT4.js

@@ -0,0 +1,4 @@
+var it_IT = {};
+export {
+  it_IT as __exports
+};

package/dist/_virtual/it_IT5.js

@@ -0,0 +1,4 @@
+var it_IT = {};
+export {
+  it_IT as __exports
+};

package/dist/_virtual/it_IT6.js

@@ -0,0 +1,4 @@
+var it_IT = {};
+export {
+  it_IT as __exports
+};

package/dist/_virtual/localeData.js

@@ -0,0 +1,4 @@
+var localeData = { exports: {} };
+export {
+  localeData as __module
+};

package/dist/_virtual/objectSpread2.js

@@ -0,0 +1,4 @@
+var objectSpread2 = { exports: {} };
+export {
+  objectSpread2 as __module
+};

package/dist/_virtual/pt_PT.js

@@ -0,0 +1,4 @@
+var pt_PT = {};
+export {
+  pt_PT as __exports
+};

package/dist/_virtual/pt_PT2.js

@@ -0,0 +1,4 @@
+var pt_PT = {};
+export {
+  pt_PT as __exports
+};

package/dist/_virtual/pt_PT3.js

@@ -0,0 +1,4 @@
+var pt_PT = {};
+export {
+  pt_PT as __exports
+};

package/dist/_virtual/pt_PT4.js

@@ -0,0 +1,4 @@
+var pt_PT = {};
+export {
+  pt_PT as __exports
+};

package/dist/_virtual/pt_PT5.js

@@ -0,0 +1,4 @@
+var pt_PT = {};
+export {
+  pt_PT as __exports
+};

package/dist/_virtual/pt_PT6.js

@@ -0,0 +1,4 @@
+var pt_PT = {};
+export {
+  pt_PT as __exports
+};

package/dist/_virtual/toPrimitive.js

@@ -0,0 +1,4 @@
+var toPrimitive = { exports: {} };
+export {
+  toPrimitive as __module
+};

package/dist/_virtual/toPropertyKey.js

@@ -0,0 +1,4 @@
+var toPropertyKey = { exports: {} };
+export {
+  toPropertyKey as __module
+};

package/dist/_virtual/typeof.js

@@ -0,0 +1,4 @@
+var _typeof = { exports: {} };
+export {
+  _typeof as __module
+};

package/dist/_virtual/weekday.js

@@ -0,0 +1,4 @@
+var weekday = { exports: {} };
+export {
+  weekday as __module
+};

package/dist/components/AppIcon/index.d.ts

@@ -1 +1,2 @@
+export * from './AppIcon';
 export { default as AppIcon } from './AppIcon';

package/dist/components/Badge/Badge.d.ts

@@ -26,7 +26,17 @@ export type ChipBadgeVariant = {
 export type LinkBadgeVariant = {
     type: 'link';
 };
-export type BadgeVariants = NotificationBadgeVariant | ContentBadgeVariant | ProfileBadgeVariant | ChipBadgeVariant | LinkBadgeVariant;
+/**
+ * Badge variant : beta.
+ * Beta Badge is used to indicate that a feature is in beta phase.
+ * The color prop allows to customize the badge color to match the app color.
+ * Defaults to black if not provided.
+ */
+export type BetaBadgeVariant = {
+    type: 'beta';
+    color?: string;
+};
+export type BadgeVariants = NotificationBadgeVariant | ContentBadgeVariant | ProfileBadgeVariant | ChipBadgeVariant | LinkBadgeVariant | BetaBadgeVariant;
 export interface BadgeProps extends React.ComponentPropsWithRef<'span'> {
     /**
      * Badge variant : notification, link or profile (Teacher|Student|Relative|Personnel)
@@ -35,6 +45,7 @@ export interface BadgeProps extends React.ComponentPropsWithRef<'span'> {
     variant?: BadgeVariants;
     /**
      * Text or icon (or whatever) to render as children elements.
+     * Defaults to 'BÊTA' for beta variant.
      */
     children?: ReactNode;
     /**

package/dist/components/Badge/Badge.js

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import clsx from "clsx";
 const Badge = /* @__PURE__ */ forwardRef(({
@@ -11,7 +11,20 @@ const Badge = /* @__PURE__ */ forwardRef(({
   ...restProps
 }, ref) => {
   const classes = clsx("badge rounded-pill", (variant.type === "content" || variant.type === "user") && "background" in variant ? "bg-gray-200" : (variant.type === "content" || variant.type === "user") && !("background" in variant) ? "border border-0" : "", variant.type === "content" && `text-${variant.level}`, variant.type === "notification" && `badge-notification bg-${variant.level} text-light border border-0`, variant.type === "user" && `badge-profile-${variant.profile.toLowerCase()}`, variant.type === "link" && "badge-link border border-0", variant.type === "chip" && "bg-gray-200", className);
-  return /* @__PURE__ */ jsx("span", { ref, className: classes, ...restProps, children: variant.type === "chip" ? /* @__PURE__ */ jsx("div", { className: "d-flex fw-800 align-items-center", children }) : children });
+  return /* @__PURE__ */ jsxs("span", { ref, className: classes, style: (() => {
+    if (variant.type !== "beta") return;
+    const color = variant.color ?? "#000000";
+    return {
+      borderColor: color,
+      color,
+      backgroundColor: `${color}10`
+      // the 2 last hexadecimal numbers are for opacity
+    };
+  })(), ...restProps, children: [
+    variant.type === "chip" && /* @__PURE__ */ jsx("div", { className: "d-flex fw-800 align-items-center", children }),
+    variant.type === "beta" && (children ?? "BÊTA"),
+    variant.type !== "chip" && variant.type !== "beta" && children
+  ] });
 });
 export {
   Badge as default

package/dist/components/Combobox/Combobox.js

@@ -51,7 +51,7 @@ const ComboboxComponent = /* @__PURE__ */ forwardRef(({
     /* @__PURE__ */ jsx(Combobox.Trigger, { placeholder, searchMinLength, handleSearchInputChange: onSearchInputChange, handleSearchInputKeyUp: (event) => {
       onSearchInputKeyUp == null || onSearchInputKeyUp(event);
     }, value, variant, renderInputGroup, renderSelectedItems, hasDefault: !!options.length, onFocus, onBlur, inputRef }),
-    /* @__PURE__ */ jsx(Dropdown.Menu, { children: renderContent() })
+    /* @__PURE__ */ jsx(Dropdown.Menu, { "data-testid": "combobox-search-menu", children: renderContent() })
   ] });
 }), Combobox = /* @__PURE__ */ Object.assign(ComboboxComponent, {
   Trigger: ComboboxTrigger

package/dist/components/Combobox/ComboboxTrigger.js

@@ -48,7 +48,7 @@ const ComboboxTrigger = ({
     !!renderInputGroup && /* @__PURE__ */ jsx("label", { className: "input-group-text pe-0" + classNameVariant, htmlFor: triggerProps.id, children: renderInputGroup }),
     /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center flex-wrap flex-fill", children: [
       renderSelectedItems,
-      /* @__PURE__ */ jsx(Input, { ...inputProps, className: classNameInput, onFocus, onBlur, noValidationIcon: !0, placeholder, size: "md", type: "search", onKeyDown: itemProps.onMenuItemKeyDown })
+      /* @__PURE__ */ jsx(Input, { "data-testid": "combobox-search-input", ...inputProps, className: classNameInput, onFocus, onBlur, noValidationIcon: !0, placeholder, size: "md", type: "search", onKeyDown: itemProps.onMenuItemKeyDown })
     ] })
   ] });
 };

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,57 @@
+/**
+ * DatePicker component props
+ *
+ * Minimal interface that only exposes what is necessary.
+ * Ant Design implementation is hidden and no Ant Design-specific props are exposed.
+ * Standard HTML div attributes are supported (passed through to the underlying DOM element).
+ */
+export interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'value' | 'defaultValue'> {
+    /**
+     * Selected date values
+     * @default today's date is setted by ant design if no value is provided
+     */
+    value?: Date;
+    /**
+     * Callback called when date changes
+     */
+    onChange?: (date?: Date) => void;
+    /**
+     * Date format to display in the picker
+     * @default 'DD / MM / YYYY'
+     */
+    dateFormat?: string;
+    /**
+     * Minimum selectable date
+     */
+    minDate?: Date;
+    /**
+     * Maximum selectable date
+     */
+    maxDate?: Date;
+}
+/**
+ * Type for DatePicker ref
+ */
+/**
+ * DatePicker component
+ *
+ * Date picker component for selecting a date.
+ *
+ * **Note:** This component uses Ant Design's DatePicker component internally.
+ * Only the props defined in DatePickerProps are allowed to prevent
+ * dependency on Ant Design-specific features. To replace the implementation,
+ * modify the component body below.
+ *
+ * @example
+ * ```tsx
+ * <DatePicker
+ *   value={date}
+ *   onChange={(date) => setDate(date)}
+ *   dateFormat="YYYY-MM-DD"
+ *   minDate={new Date(today.setDate(today.getDate() - 2))}
+ *   maxDate={new Date(today.setDate(today.getDate() + 3))}
+ * />
+ * ```
+ */
+declare const DatePicker: import('react').ForwardRefExoticComponent<DatePickerProps & import('react').RefAttributes<HTMLElement>>;
+export default DatePicker;

package/dist/components/DatePicker/DatePicker.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import { DatePicker as DatePicker$1 } from "antd";
+import dayjs from "dayjs";
+import localeData from "../../node_modules/.pnpm/dayjs@1.11.19/node_modules/dayjs/plugin/localeData.js";
+import weekday from "../../node_modules/.pnpm/dayjs@1.11.19/node_modules/dayjs/plugin/weekday.js";
+import { forwardRef } from "react";
+import "dayjs/locale/de.js";
+import "dayjs/locale/es.js";
+import "dayjs/locale/fr.js";
+import "dayjs/locale/it.js";
+import "dayjs/locale/pt.js";
+dayjs.extend(weekday);
+dayjs.extend(localeData);
+const DatePicker = /* @__PURE__ */ forwardRef(({
+  value,
+  onChange,
+  dateFormat = "DD / MM / YYYY",
+  minDate,
+  maxDate,
+  ...htmlProps
+}, ref) => {
+  const handleChange = (date) => {
+    onChange == null || onChange(date ? date.toDate() : void 0);
+  }, antProps = {
+    value: value ? dayjs(value) : void 0,
+    onChange: handleChange,
+    format: dateFormat,
+    minDate: minDate ? dayjs(minDate) : void 0,
+    maxDate: maxDate ? dayjs(maxDate) : void 0,
+    ref,
+    // Cast necessary because AntDatePicker expects a specific type, but our API exposes only HTMLElement to avoid dependency on Ant Design-specific features.
+    ...htmlProps
+  };
+  return /* @__PURE__ */ jsx(DatePicker$1, { ...antProps, getPopupContainer: (triggerNode) => triggerNode.parentElement || document.body });
+});
+export {
+  DatePicker as default
+};

package/dist/components/DatePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DatePicker } from './DatePicker';
+export * from './DatePicker';

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+/**
+ * A divider component that renders a horizontal or vertical line to separate content.
+ *
+ * @param props - The component props
+ * @param props.children - Content to be displayed inside the divider
+ * @param props.vertical - Whether the divider is vertical. Defaults to false
+ * @param props.className - Optional CSS class name for additional styling of the divider
+ * @default 'border-gray-500'
+ * @param props.style - Optional inline styles for the divider
+ *
+ * @returns A React component that renders a divider with the specified properties
+ *
+ * @example
+ * ```tsx
+ * // Basic horizontal divider
+ * <Divider />
+ *
+ * // Divider with text content
+ * <Divider>Section Title</Divider>
+ *
+ * // Vertical divider
+ * <Divider vertical />
+ *
+ * // Custom colored divider
+ * <Divider className="border-red-500" />
+ * ```
+ */
+declare const Divider: {
+    ({ children, vertical, className, style, }: {
+        children?: ReactNode;
+        vertical?: boolean;
+        className?: string;
+        style?: React.CSSProperties;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Divider;

package/dist/components/Divider/Divider.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import { Divider as Divider$1 } from "antd";
+const Divider = ({
+  children,
+  vertical = !1,
+  className = "border-gray-500",
+  style
+}) => /* @__PURE__ */ jsx(Divider$1, { plain: !0, children, type: vertical ? "vertical" : "horizontal", className, orientation: "center", style });
+export {
+  Divider as default
+};

package/dist/components/Divider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Divider';
+export { default as Divider } from './Divider';

package/dist/components/Dropdown/DropdownContext.js

@@ -1,4 +1,4 @@
-import { createContext, useContext } from "react";
+import { useContext, createContext } from "react";
 const DropdownContext = /* @__PURE__ */ createContext(null), useDropdownContext = () => {
   const context = useContext(DropdownContext);
   if (!context)

package/dist/components/Flex/Flex.js

@@ -13,7 +13,7 @@ const Flex = /* @__PURE__ */ forwardRef(({
   children,
   ...restProps
 }, ref) => {
-  const classes = clsx("d-flex", direction && `flex-${direction}`, fill && "flex-fill", align && `align-items-${align}`, justify && `justify-content-${justify}`, gap && `gap-${gap}`, wrap && `flex-${wrap}`, className);
+  const classes = clsx("d-flex", direction && `flex-${direction}`, fill && "flex-fill", align && `align-items-${align}`, justify && `justify-content-${justify}`, gap && `gap-${gap}`, wrap && `flex-${wrap === "reverse" ? "wrap-reverse" : wrap}`, className);
   return /* @__PURE__ */ jsx(Component, { ref, className: classes, ...restProps, children });
 });
 export {

package/dist/components/Form/FormContext.js

@@ -1,4 +1,4 @@
-import { createContext, useContext } from "react";
+import { useContext, createContext } from "react";
 const Context = /* @__PURE__ */ createContext(null), useFormControl = () => {
   const context = useContext(Context);
   if (!context)

package/dist/components/Layout/Layout.js

@@ -42,6 +42,5 @@ const Layout = ({
   ] });
 };
 export {
-  Layout,
-  Layout as default
+  Layout
 };

package/dist/components/Menu/components/MenuButton.d.ts

@@ -1,5 +1,7 @@
 import { ButtonProps } from '../../Button';
 export type MenuButtonProps = Pick<ButtonProps, 'children' | 'leftIcon' | 'rightIcon' | 'onClick'> & {
     selected: boolean;
+    className?: string;
+    size?: 'md' | 'lg';
 };
 export declare const MenuButton: (props: Partial<MenuButtonProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/components/MenuButton.js

@@ -8,13 +8,22 @@ const MenuButton = (props) => {
     leftIcon,
     rightIcon,
     onClick,
-    children
+    children,
+    className,
+    size
   } = props, {
     childProps
   } = useMenuContext();
-  return /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", className: clsx("stack w-100", {
-    selected
-  }), leftIcon, rightIcon, onClick, ...childProps, children });
+  return /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", className: clsx("stack w-100 overflow-hidden", {
+    selected,
+    "menu-button-lg": size === "lg"
+  }, className), leftIcon, rightIcon, onClick, ...childProps, style: size === "lg" ? {
+    height: "auto"
+  } : void 0, children: /* @__PURE__ */ jsx("div", { className: clsx("text-truncate w-100 text-start", {
+    "text-truncate-2 text-start ms-0": size === "lg"
+  }), style: {
+    overflowWrap: "break-word"
+  }, children }) });
 };
 export {
   MenuButton

package/dist/components/Modal/Modal.d.ts

@@ -5,6 +5,10 @@ export interface ModalProps {
      * Modal id (useful when multiple modal on the same page)
      */
     id: string;
+    /**
+     * Modal testid
+     */
+    ['data-testid']?: string;
     /**
      * Is Modal Open
      */

package/dist/components/Modal/Modal.js

@@ -10,17 +10,18 @@ import ModalSubtitle from "./ModalSubtitle.js";
 import useClickOutside from "../../hooks/useClickOutside/useClickOutside.js";
 import useTrapFocus from "../../hooks/useTrapFocus/useTrapFocus.js";
 import useKeyPress from "../../hooks/useKeyPress/useKeyPress.js";
-const Root = /* @__PURE__ */ forwardRef((props, ref) => {
-  const {
-    id,
-    isOpen,
-    onModalClose,
-    size = "md",
-    viewport = !1,
-    scrollable = !1,
-    focusId,
-    children
-  } = props, ariaLabelId = `aria_label_${id}`, ariaDescriptionId = `aria_desc_${id}`, modalRef = useClickOutside(onModalClose), trapRef = useTrapFocus(isOpen);
+const Root = /* @__PURE__ */ forwardRef(({
+  id,
+  isOpen,
+  onModalClose,
+  size = "md",
+  viewport = !1,
+  scrollable = !1,
+  focusId,
+  children,
+  ...otherDivProps
+}, ref) => {
+  const ariaLabelId = `aria_label_${id}`, ariaDescriptionId = `aria_desc_${id}`, modalRef = useClickOutside(onModalClose), trapRef = useTrapFocus(isOpen);
   useKeyPress(onModalClose, ["Escape"]), useEffect(() => {
     if (isOpen && (document.body.style.overflow = "hidden", focusId)) {
       const elem = document.getElementById(focusId);
@@ -54,7 +55,7 @@ const Root = /* @__PURE__ */ forwardRef((props, ref) => {
     }
   });
   return /* @__PURE__ */ jsx(ModalContext.Provider, { value: modalContextValue, children: transition((style, isOpen2) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    isOpen2 && /* @__PURE__ */ jsx(animated.div, { id, ref, role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelId, "aria-describedby": ariaDescriptionId, className: modalClasses, style, tabIndex: -1, children: /* @__PURE__ */ jsx("div", { id: `${id}_ref`, ref: (node) => {
+    isOpen2 && /* @__PURE__ */ jsx(animated.div, { id, ref, role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelId, "aria-describedby": ariaDescriptionId, className: modalClasses, style, tabIndex: -1, ...otherDivProps, children: /* @__PURE__ */ jsx("div", { id: `${id}_ref`, ref: (node) => {
       modalRef.current = node, isOpen2 && (trapRef.current = node);
     }, className: dialogClasses, children: /* @__PURE__ */ jsx("div", { className: "modal-content", children }) }) }),
     isOpen2 && /* @__PURE__ */ jsx(animated.div, { className: "modal-backdrop fade show", style: {