@edifice.io/react 2.5.8 → 2.5.9-develop-pedago.20260203115913

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/isSameOrAfter.js

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

package/dist/_virtual/isToday.js

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

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { UserProfile } from '@edifice.io/client';
+import { IWebApp, UserProfile } from '@edifice.io/client';
 export type BadgeRef = HTMLSpanElement;
 /** Badge variant : notification */
 export type NotificationBadgeVariant = {
@@ -31,10 +31,16 @@ export type LinkBadgeVariant = {
  * 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.
+ * Beta Badge has a fixed text 'BÊTA' unless children is provided.
+ * If app is provided, the color of the Beta Badge is derived from the application colors.
+ * Example:
+ * <Badge variant={{ type: 'beta', color: '#823AA1', app: myApp }} />
+ * where myApp is of type IWebApp.
  */
 export type BetaBadgeVariant = {
     type: 'beta';
     color?: string;
+    app?: IWebApp;
 };
 export type BadgeVariants = NotificationBadgeVariant | ContentBadgeVariant | ProfileBadgeVariant | ChipBadgeVariant | LinkBadgeVariant | BetaBadgeVariant;
 export interface BadgeProps extends React.ComponentPropsWithRef<'span'> {

package/dist/components/Badge/Badge.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import clsx from "clsx";
+import useEdificeIcons from "../../hooks/useEdificeIcons/useEdificeIcons.js";
 const Badge = /* @__PURE__ */ forwardRef(({
   className,
   variant = {
@@ -10,7 +11,18 @@ const Badge = /* @__PURE__ */ forwardRef(({
   children,
   ...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);
+  const {
+    getIconClass,
+    getBackgroundLightIconClass,
+    getBorderIconClass
+  } = useEdificeIcons();
+  let badgeColorClassName = "";
+  if (variant.type === "beta" && variant.app) {
+    const colorAppClassName = getIconClass(variant.app), backgroundLightAppClassName = getBackgroundLightIconClass(variant.app), borderAppClassName = getBorderIconClass(variant.app);
+    badgeColorClassName = `${colorAppClassName} ${backgroundLightAppClassName} ${borderAppClassName}`;
+  }
+  console.log(badgeColorClassName);
+  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", variant.type === "beta" && badgeColorClassName, className);
   return /* @__PURE__ */ jsxs("span", { ref, className: classes, style: (() => {
     if (variant.type !== "beta") return;
     const color = variant.color ?? "#000000";

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

@@ -16,7 +16,8 @@ const DatePicker = /* @__PURE__ */ forwardRef(({
   onChange,
   dateFormat = "DD / MM / YYYY",
   minDate,
-  maxDate
+  maxDate,
+  ...htmlProps
 }, ref) => {
   const handleChange = (date) => {
     onChange == null || onChange(date ? date.toDate() : void 0);
@@ -26,9 +27,11 @@ const DatePicker = /* @__PURE__ */ forwardRef(({
     format: dateFormat,
     minDate: minDate ? dayjs(minDate) : void 0,
     maxDate: maxDate ? dayjs(maxDate) : void 0,
-    ref
+    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 });
+  return /* @__PURE__ */ jsx(DatePicker$1, { ...antProps, getPopupContainer: (triggerNode) => triggerNode.parentElement || document.body });
 });
 export {
   DatePicker as default

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/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/Layout/components/Header.js

@@ -93,7 +93,7 @@ const Header = ({
           }, className: "position-absolute", children: messages }),
           /* @__PURE__ */ jsx(VisuallyHidden, { children: t("navbar.messages") })
         ] }) }),
-        hasCarbonioPreauthWorkflow && /* @__PURE__ */ jsx(NavItem, { children: /* @__PURE__ */ jsxs("a", { href: "/auth/carbonio/preauth", className: "nav-link", children: [
+        hasCarbonioPreauthWorkflow && /* @__PURE__ */ jsx(NavItem, { children: /* @__PURE__ */ jsxs("a", { href: "/auth/carbonio/preauth", target: "_blank", className: "nav-link", children: [
           /* @__PURE__ */ jsx(SvgIconOneMessaging, { className: "icon notification" }),
           /* @__PURE__ */ jsx(VisuallyHidden, { children: t("navbar.messages") })
         ] }) }),
@@ -157,7 +157,10 @@ const Header = ({
           level: "warning"
         }, className: "position-absolute", children: messages })
       ] }) }),
-      hasCarbonioPreauthWorkflow && /* @__PURE__ */ jsx(NavItem, { children: /* @__PURE__ */ jsx(NavLink, { className: "position-relative", link: "/auth/carbonio/preauth", translate: t("conversation"), children: /* @__PURE__ */ jsx(SvgIconNeoMessaging, { color: "#fff" }) }) }),
+      hasCarbonioPreauthWorkflow && /* @__PURE__ */ jsx(NavItem, { children: /* @__PURE__ */ jsxs("a", { className: "nav-link position-relative", href: "/auth/carbonio/preauth", target: "_blank", children: [
+        /* @__PURE__ */ jsx(SvgIconNeoMessaging, { color: "#fff" }),
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: t("conversation") })
+      ] }) }),
       currentLanguage === "fr" && hasOldHelpEnableWorkflow ? /* @__PURE__ */ jsxs(NavItem, { children: [
         /* @__PURE__ */ jsxs("button", { className: "nav-link btn btn-naked", onClick: () => {
           setIsHelpOpen(!0);

package/dist/components/Layout/components/WidgetApps.js

@@ -6,7 +6,7 @@ const WidgetAppsFooter = () => {
     t
   } = useTranslation();
   return /* @__PURE__ */ jsx("div", { className: "widget-footer", children: /* @__PURE__ */ jsx("div", { className: "widget-footer-action", children: /* @__PURE__ */ jsx("a", { href: "/welcome", className: "link", children: t("plus") }) }) });
-}, WidgetAppsBody = ({
+}, appToOpenOnBlank = ["Administration"], WidgetAppsBody = ({
   bookmarkedApps
 }) => {
   const {
@@ -14,7 +14,7 @@ const WidgetAppsFooter = () => {
   } = useTranslation();
   return /* @__PURE__ */ jsxs("div", { className: "widget-body d-flex flex-wrap", children: [
     !bookmarkedApps.length && /* @__PURE__ */ jsx("div", { className: "text-dark", children: t("navbar.myapps.more") }),
-    bookmarkedApps.slice(0, 6).map((app, index) => /* @__PURE__ */ jsx("a", { href: app.address, className: "bookmarked-app", target: app.isExternal || app.category === "connector" ? "_blank" : void 0, children: /* @__PURE__ */ jsx(AppIcon, { app, size: "32" }) }, index))
+    bookmarkedApps.slice(0, 6).map((app, index) => /* @__PURE__ */ jsx("a", { href: app.address, className: "bookmarked-app", target: appToOpenOnBlank.includes(app.name) || app.isExternal || app.category === "connector" ? "_blank" : void 0, rel: appToOpenOnBlank.includes(app.name) || app.isExternal || app.category === "connector" ? "noopener noreferrer" : void 0, children: /* @__PURE__ */ jsx(AppIcon, { app, size: "32" }) }, index))
   ] });
 };
 export {

package/dist/components/MediaViewer/MediaViewer.d.ts

@@ -0,0 +1,17 @@
+import { MediaLibraryType } from 'src/modules/multimedia';
+export interface MediaProps {
+    name: string;
+    url: string;
+    type: MediaLibraryType;
+    mimeType?: string;
+}
+interface MediaViewerProps {
+    onClose: () => void;
+    media: MediaProps[];
+    indexMedia?: number;
+}
+declare const MediaViewer: {
+    ({ onClose, media, indexMedia }: MediaViewerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default MediaViewer;

package/dist/components/MediaViewer/MediaViewer.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Carousel } from "antd";
+import ToolbarZoom from "./ToolbarZoom.js";
+import useZoom from "../../hooks/useZoom/useZoom.js";
+import ToolbarViewer from "./ToolbarViewer.js";
+import { useState, useEffect } from "react";
+import { MediaWrapper } from "./MediaWrapper.js";
+import Flex from "../Flex/Flex.js";
+const MediaViewer = ({
+  onClose,
+  media,
+  indexMedia = 0
+}) => {
+  const {
+    zoomIn,
+    zoomOut,
+    setScale,
+    scale
+  } = useZoom(1), [currentIndex, setCurrentIndex] = useState(indexMedia);
+  return useEffect(() => {
+    setCurrentIndex(indexMedia);
+  }, [indexMedia]), /* @__PURE__ */ jsxs("div", { className: "media-viewer", children: [
+    /* @__PURE__ */ jsx(ToolbarViewer, { onClose, mediaUrl: media[currentIndex].url, mediaName: media[currentIndex].name, nbMedia: media.length, currentIndex }),
+    /* @__PURE__ */ jsx(Flex, { className: "media-viewer-inner-overlay", onClick: onClose, children: /* @__PURE__ */ jsxs("div", { className: "media-viewer-inner", onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsx(Carousel, { initialSlide: indexMedia, dots: !1, arrows: !0, draggable: !0, infinite: !1, afterChange: (current) => {
+        setCurrentIndex(current);
+      }, beforeChange: () => {
+        setScale(1);
+      }, children: media.map((item, index) => /* @__PURE__ */ jsx("div", { className: "viewer-slide", children: /* @__PURE__ */ jsx(MediaWrapper, { mediaUrl: item.url, mediaType: item.type, mimeType: item.mimeType, scale: index === currentIndex ? scale : 1 }) }, index)) }),
+      /* @__PURE__ */ jsx(ToolbarZoom, { zoomIn, zoomOut })
+    ] }) })
+  ] });
+};
+export {
+  MediaViewer as default
+};

package/dist/components/MediaViewer/MediaWrapper.d.ts

@@ -0,0 +1,7 @@
+import { MediaLibraryType } from 'src/modules/multimedia';
+export declare const MediaWrapper: ({ mediaUrl, mediaType, mimeType, scale, }: {
+    mediaUrl: string;
+    mediaType: MediaLibraryType;
+    mimeType?: string;
+    scale?: number;
+}) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/MediaViewer/MediaWrapper.js

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import SvgIconTextPage from "../../modules/icons/components/IconTextPage.js";
+import SvgIconLink from "../../modules/icons/components/IconLink.js";
+import SvgIconHeadphone from "../../modules/icons/components/IconHeadphone.js";
+import SvgIconDownload from "../../modules/icons/components/IconDownload.js";
+import SvgIconExternalLink from "../../modules/icons/components/IconExternalLink.js";
+import { useTranslation } from "react-i18next";
+import PdfViewer from "./PdfViewer.js";
+import Flex from "../Flex/Flex.js";
+import Button from "../Button/Button.js";
+import Image from "../Image/Image.js";
+const MediaWrapper = ({
+  mediaUrl,
+  mediaType,
+  mimeType,
+  scale
+}) => {
+  const {
+    t
+  } = useTranslation(), imageMediaStyle = {
+    flex: "none",
+    height: "100%",
+    transform: `scale(${scale})`,
+    maxHeight: "70vh"
+  }, audioStyle = {
+    width: "100%",
+    maxWidth: "500px"
+  }, videoMediaStyle = {
+    height: "100%",
+    objectFit: "cover",
+    transform: `scale(${scale})`
+  }, iframeMediaStyle = {
+    width: "100%",
+    height: "600px",
+    maxWidth: "900px",
+    transform: `scale(${scale})`
+  };
+  switch (mediaType) {
+    case "image":
+      return /* @__PURE__ */ jsx(Image, { className: "rounded-2", src: mediaUrl, alt: mediaType, width: "100%", objectFit: "contain", style: imageMediaStyle });
+    case "audio":
+      return /* @__PURE__ */ jsxs(Flex, { direction: "column", align: "center", style: {
+        height: "200px"
+      }, children: [
+        /* @__PURE__ */ jsx(Flex, { justify: "center", align: "center", className: "bg-gray-300 h-100 w-100 rounded-2 mb-8", style: {
+          maxWidth: "500px"
+        }, children: /* @__PURE__ */ jsx(SvgIconHeadphone, { width: 40, height: 40, color: "#B0B0B0" }) }),
+        /* @__PURE__ */ jsx("audio", { src: mediaUrl, className: "media-audio", controls: !0, style: audioStyle })
+      ] });
+    case "video":
+      return /* @__PURE__ */ jsx(Flex, { justify: "center", align: "center", children: /* @__PURE__ */ jsx("video", { src: mediaUrl, controls: !0, className: "media-video", style: videoMediaStyle }) });
+    case "embedder":
+      return /* @__PURE__ */ jsx(Flex, { justify: "center", align: "center", children: /* @__PURE__ */ jsx("iframe", { title: "Embedded media content", src: mediaUrl, className: "media-video", style: iframeMediaStyle }) });
+    case "hyperlink":
+    case "attachment":
+      return mimeType && mimeType === "application/pdf" ? /* @__PURE__ */ jsx(PdfViewer, { mediaUrl, scale }) : /* @__PURE__ */ jsxs(Flex, { direction: "column", align: "center", children: [
+        /* @__PURE__ */ jsx(Flex, { justify: "center", align: "center", className: "bg-gray-300 w-100 rounded-2 mb-8", style: {
+          maxWidth: "500px",
+          height: "200px"
+        }, children: mediaType === "hyperlink" ? /* @__PURE__ */ jsx(SvgIconLink, { width: 40, height: 40, color: "#B0B0B0" }) : /* @__PURE__ */ jsx(SvgIconTextPage, { width: 40, height: 40, color: "#B0B0B0" }) }),
+        /* @__PURE__ */ jsx("a", { className: "w-100 d-flex justify-content-center", href: mediaUrl, download: mediaType !== "hyperlink", target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx(Button, { className: "w-100", style: {
+          height: "40px",
+          maxWidth: "500px"
+        }, leftIcon: mediaType === "hyperlink" ? /* @__PURE__ */ jsx(SvgIconExternalLink, {}) : /* @__PURE__ */ jsx(SvgIconDownload, {}), color: "tertiary", children: t(mediaType === "hyperlink" ? "mediaWrapper.attachment.open" : "mediaWrapper.attachment.download") }) })
+      ] });
+    default:
+      return null;
+  }
+};
+export {
+  MediaWrapper
+};

package/dist/components/MediaViewer/PdfViewer.d.ts

@@ -0,0 +1,4 @@
+export default function PdfViewer({ mediaUrl, scale, }: {
+    mediaUrl: string;
+    scale?: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/MediaViewer/PdfViewer.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import { Document, Page } from "react-pdf";
+import LoadingScreen from "../LoadingScreen/LoadingScreen.js";
+function PdfViewer({
+  mediaUrl,
+  scale
+}) {
+  const [numPages, setNumPages] = useState(null), pagesRef = useRef([]), onDocumentLoadSuccess = ({
+    numPages: numPages2
+  }) => {
+    setNumPages(numPages2);
+  };
+  return /* @__PURE__ */ jsx("div", { style: {
+    width: `calc(600px * ${scale})`,
+    height: "calc(100vh - 52px)",
+    overflowY: "auto",
+    marginTop: "20px"
+  }, children: /* @__PURE__ */ jsx(Document, { file: mediaUrl, onLoadSuccess: onDocumentLoadSuccess, loading: /* @__PURE__ */ jsx(LoadingScreen, {}), children: Array.from(new Array(numPages), (_, index) => /* @__PURE__ */ jsx("div", { ref: (el) => pagesRef.current[index] = el, style: {
+    marginBottom: 32,
+    transformOrigin: "top center"
+  }, children: /* @__PURE__ */ jsx(Page, { className: "pdf-page", pageNumber: index + 1, renderTextLayer: !1, renderAnnotationLayer: !1, width: 600 * (scale ?? 1), loading: /* @__PURE__ */ jsx(LoadingScreen, {}) }) }, index)) }) });
+}
+export {
+  PdfViewer as default
+};

package/dist/components/MediaViewer/ToolbarViewer.d.ts

@@ -0,0 +1,7 @@
+export default function ToolbarViewer({ onClose, mediaName, mediaUrl, nbMedia, currentIndex, }: {
+    onClose: () => void;
+    mediaName: string;
+    nbMedia?: number;
+    mediaUrl?: string;
+    currentIndex: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/MediaViewer/ToolbarViewer.js

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import SvgIconClose from "../../modules/icons/components/IconClose.js";
+import SvgIconDownload from "../../modules/icons/components/IconDownload.js";
+import SvgIconExternalLink from "../../modules/icons/components/IconExternalLink.js";
+import Flex from "../Flex/Flex.js";
+import IconButton from "../Button/IconButton.js";
+import SmartEllipsis from "../SmartEllipsis/SmartEllipsis.js";
+function ToolbarViewer({
+  onClose,
+  mediaName,
+  mediaUrl,
+  nbMedia,
+  currentIndex
+}) {
+  return useEffect(() => {
+    const handleKeyDown = (e) => {
+      e.key === "Escape" && onClose();
+    };
+    return window.addEventListener("keydown", handleKeyDown), () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [onClose]), /* @__PURE__ */ jsxs(Flex, { className: "media-viewer-toolbar p-8", align: "center", children: [
+    /* @__PURE__ */ jsxs(Flex, { gap: "8", align: "center", style: {
+      minWidth: "50%"
+    }, children: [
+      /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(SvgIconClose, { color: "#fff" }), onClick: onClose, variant: "ghost" }),
+      /* @__PURE__ */ jsx(SmartEllipsis, { text: mediaName })
+    ] }),
+    /* @__PURE__ */ jsxs(Flex, { gap: "8", align: "center", justify: "between", className: "w-100", children: [
+      nbMedia ? /* @__PURE__ */ jsx("p", { children: `${currentIndex + 1}/${nbMedia} ` }) : /* @__PURE__ */ jsx("p", { children: `${currentIndex + 1}` }),
+      mediaUrl && /* @__PURE__ */ jsxs(Flex, { className: "ms-8", gap: "8", align: "center", children: [
+        /* @__PURE__ */ jsx("a", { href: mediaUrl, download: !0, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(SvgIconDownload, { color: "#fff" }), variant: "ghost" }) }),
+        /* @__PURE__ */ jsx("a", { href: mediaUrl, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(SvgIconExternalLink, { color: "#fff" }), variant: "ghost" }) })
+      ] })
+    ] })
+  ] });
+}
+export {
+  ToolbarViewer as default
+};

package/dist/components/MediaViewer/ToolbarZoom.d.ts

@@ -0,0 +1,4 @@
+export default function ToolbarZoom({ zoomIn, zoomOut, }: {
+    zoomIn: () => void;
+    zoomOut: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/MediaViewer/ToolbarZoom.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import SvgIconMinus from "../../modules/icons/components/IconMinus.js";
+import SvgIconPlus from "../../modules/icons/components/IconPlus.js";
+import SvgIconZoomIn from "../../modules/icons/components/IconZoomIn.js";
+import Flex from "../Flex/Flex.js";
+import IconButton from "../Button/IconButton.js";
+function ToolbarZoom({
+  zoomIn,
+  zoomOut
+}) {
+  return /* @__PURE__ */ jsx(Flex, { justify: "center", className: "media-viewer-toolbar-zoom-container", children: /* @__PURE__ */ jsxs(Flex, { gap: "4", className: "p-12 media-viewer-toolbar-zoom", align: "center", children: [
+    /* @__PURE__ */ jsx(IconButton, { variant: "ghost", icon: /* @__PURE__ */ jsx(SvgIconMinus, { color: "#fff" }), onClick: zoomOut }),
+    /* @__PURE__ */ jsx(SvgIconZoomIn, { color: "#fff", className: "m-4" }),
+    /* @__PURE__ */ jsx(IconButton, { variant: "ghost", icon: /* @__PURE__ */ jsx(SvgIconPlus, { color: "#fff" }), onClick: zoomIn })
+  ] }) });
+}
+export {
+  ToolbarZoom as default
+};

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

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

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: {

package/dist/components/PromotionCard/PromotionCard.d.ts

@@ -0,0 +1,74 @@
+export interface PromotionCardProps {
+    children: React.ReactNode;
+    borderColor?: string;
+    backgroundColor?: string;
+    className?: string;
+}
+/**
+ * Promotion Card component to display promotional features in a card format.
+ *
+ * The component PromotionCard is a Compound Component composed of:
+ * - PromotionCardHeader: information on the top right corner
+ * - PromotionCardIcon: Icon on the left side (background color and Icon)
+ * - PromotionCardBody:
+ *   - PromotionCardTitle: Card Title
+ *   - PromotionCardDescription: Card Description
+ *   - PromotionCardAction: Card Action (mainly a button with a onClick action)
+ *
+ * @example
+ * <PromotionCard>
+ *   <PromotionCard.Header backgroundColor="#faea9c">
+ *     header content
+ *   </PromotionCard.Header>
+ *   <PromotionCard.Icon
+ *     backgroundColor="#FFEFE3"
+ *     icon={<IconEdit color="#FF8D2E" />}
+ *   />
+ *   <PromotionCard.Body>
+ *     <PromotionCard.Title>Création Libre</PromotionCard.Title>
+ *     <PromotionCard.Description>
+ *       Vous n'avez pas peur de la "page blanche" ? Lancez-vous pour créer
+ *       votre cours ou votre document !
+ *     </PromotionCard.Description>
+ *     <PromotionCard.Actions>
+ *       <Button
+ *         color="tertiary"
+ *         variant="ghost"
+ *         size="sm"
+ *         onClick={() => {}}
+ *         leftIcon={<IconPlus />}
+ *       >
+ *         Nouvelle page
+ *       </Button>
+ *     </PromotionCard.Actions>
+ *   </PromotionCard.Body>
+ * </PromotionCard>
+ */
+export declare const Root: ({ children, borderColor, backgroundColor, className, }: PromotionCardProps) => import("react/jsx-runtime").JSX.Element;
+declare const PromotionCard: (({ children, borderColor, backgroundColor, className, }: PromotionCardProps) => import("react/jsx-runtime").JSX.Element) & {
+    Header: {
+        ({ backgroundColor, textColor, children, className, }: import('./PromotionCardHeader').PromotionCardHeaderProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        ({ children, textColor, className, }: import('./PromotionCardBody').PromotionCardBodyProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Icon: {
+        ({ icon, backgroundColor, className, }: import('./PromotionCardIcon').PromotionCardIconProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Title: {
+        ({ children, className, }: import('./PromotionCardTitle').PromotionCardTitleProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Description: {
+        ({ children, className, }: import('./PromotionCardDescription').PromotionCardDescriptionProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ children, className, }: import('./PromotionCardFooter').PromotionCardFooterProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export default PromotionCard;

package/dist/components/PromotionCard/PromotionCard.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import PromotionCardBody from "./PromotionCardBody.js";
+import PromotionCardDescription from "./PromotionCardDescription.js";
+import PromotionCardFooter from "./PromotionCardFooter.js";
+import PromotionCardHeader from "./PromotionCardHeader.js";
+import PromotionCardIcon from "./PromotionCardIcon.js";
+import PromotionCardTitle from "./PromotionCardTitle.js";
+import clsx from "clsx";
+const Root = ({
+  children,
+  borderColor,
+  backgroundColor,
+  className
+}) => {
+  const classNames = clsx("promotion-card", className);
+  return /* @__PURE__ */ jsx("div", { className: classNames, style: {
+    borderColor,
+    backgroundColor
+  }, children });
+}, PromotionCard = /* @__PURE__ */ Object.assign(Root, {
+  Header: PromotionCardHeader,
+  Body: PromotionCardBody,
+  Icon: PromotionCardIcon,
+  Title: PromotionCardTitle,
+  Description: PromotionCardDescription,
+  Footer: PromotionCardFooter
+});
+export {
+  Root,
+  PromotionCard as default
+};