@edifice.io/react 2.0.0-develop-rc.8 → 2.0.0-develop-rc.14

package/dist/ui/src/hooks/useDropdown/useDropdown.js

@@ -0,0 +1,158 @@
+import { useId, useState, useRef, useEffect, useCallback } from "react";
+import { useFloating, autoUpdate, offset, size, flip, useHover, safePolygon } from "@floating-ui/react";
+import { mergeRefs } from "../../utils/ref.js";
+const useDropdown = (placement, extraTriggerKeyDownHandler, isTriggerHovered = !1) => {
+  const id = useId(), [visible, setVisible] = useState(!1), [activeIndex, setActiveIndex] = useState(-1), [isFocused, setIsFocused] = useState(null), {
+    refs,
+    floatingStyles,
+    context
+  } = useFloating({
+    placement,
+    open: visible,
+    onOpenChange: setVisible,
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(4), size({
+      apply({
+        rects,
+        elements
+      }) {
+        elements.floating.style.minWidth = `${rects.reference.width}px`;
+      }
+    }), flip({
+      padding: 0
+    })]
+  });
+  useHover(context, {
+    enabled: isTriggerHovered,
+    // Configure the delay for opening and closing separately.
+    delay: {
+      open: 200
+    },
+    handleClose: safePolygon()
+  });
+  const menuRef = useRef(null), triggerRef = useRef(null), itemRefs = useRef({});
+  useEffect(() => {
+    visible ? menuRef.current && (menuRef.current.focus(), setActiveIndex(0)) : (setActiveIndex(-1), itemRefs.current = {});
+  }, [visible]), useEffect(() => {
+    if (activeIndex !== -1) {
+      const currentItem = Object.values(itemRefs.current)[activeIndex];
+      if (currentItem) {
+        const id2 = currentItem.getAttribute("id");
+        setIsFocused(id2), currentItem.focus();
+      }
+    }
+  }, [activeIndex]);
+  const nextItem = () => {
+    const itemCount = Object.values(itemRefs.current).length;
+    setActiveIndex((prevIndex) => (prevIndex + 1) % itemCount);
+  }, previousItem = () => {
+    const itemCount = Object.values(itemRefs.current).length;
+    setActiveIndex((prevIndex) => (prevIndex - 1 + itemCount) % itemCount);
+  }, firstItem = () => {
+    setActiveIndex(0);
+  }, lastItem = () => {
+    const itemCount = Object.values(itemRefs.current).length;
+    setActiveIndex(itemCount - 1);
+  }, openDropdown = useCallback(() => {
+    setVisible(!0);
+  }, []), closeDropdown = useCallback(() => {
+    triggerRef.current && (triggerRef.current.focus({
+      preventScroll: !0
+    }), setVisible(!1));
+  }, []), stopEvents = (flag, event) => {
+    flag && (event.stopPropagation(), event.preventDefault());
+  }, onTriggerKeyDown = useCallback((event) => {
+    let flag = !1;
+    switch (event.code) {
+      case " ":
+      case "Space":
+      case "Enter":
+      case "ArrowDown":
+      case "Down":
+        openDropdown(), flag = !0;
+        break;
+      case "Esc":
+      case "Escape":
+        closeDropdown(), flag = !0;
+        break;
+      case "Up":
+      case "ArrowUp":
+        openDropdown(), flag = !0;
+        break;
+    }
+    extraTriggerKeyDownHandler == null || extraTriggerKeyDownHandler(event), stopEvents(flag, event);
+  }, [closeDropdown, openDropdown]), onMenuItemMouseEnter = (event) => {
+    const index = Object.values(itemRefs.current).findIndex((item) => item.id === event.currentTarget.getAttribute("id"));
+    setActiveIndex(index);
+  }, onMenuItemKeyDown = useCallback((event, onSuccess) => {
+    let flag = !1;
+    if (event.shiftKey)
+      event.key === "Tab" && (closeDropdown(), flag = !0);
+    else {
+      switch (event.code) {
+        case "Escape":
+          closeDropdown();
+          break;
+        case " ":
+        case "Enter":
+          activeIndex !== -1 && (Object.values(itemRefs.current)[activeIndex].getAttribute("role") === "menuitem" && triggerRef.current && (triggerRef.current.focus(), setVisible(!1)), onSuccess == null || onSuccess()), flag = !0;
+          break;
+        case "ArrowDown":
+        case "Down":
+          nextItem(), flag = !0;
+          break;
+        case "ArrowUp":
+        case "Up":
+          previousItem(), flag = !0;
+          break;
+        case "Home":
+          firstItem(), flag = !0;
+          break;
+        case "End":
+          lastItem(), flag = !0;
+          break;
+      }
+      stopEvents(flag, event);
+    }
+  }, [activeIndex, closeDropdown]), onTriggerClick = useCallback((event) => {
+    setVisible(visible !== !0), event.stopPropagation(), event.preventDefault();
+  }, [visible]);
+  return {
+    isFocused,
+    visible,
+    itemRefs,
+    triggerRef,
+    menuRef,
+    /* TriggerProps to spread to any Trigger component */
+    triggerProps: {
+      ref: mergeRefs(triggerRef, refs.setReference),
+      id: `dropdown-toggle-${id}`,
+      "aria-haspopup": "menu",
+      "aria-controls": `dropdown-${id}`,
+      "aria-expanded": !!visible,
+      className: `${visible ? "selected" : ""}`,
+      onClick: onTriggerClick,
+      onKeyDown: onTriggerKeyDown,
+      "aria-activedescendant": isFocused
+    },
+    /* MenuProps to spread to any Menu Component */
+    menuProps: {
+      ref: mergeRefs(menuRef, refs.setFloating),
+      className: "dropdown-menu",
+      "aria-labelledby": `dropdown-toggle-${id}`,
+      style: {
+        ...floatingStyles
+      }
+    },
+    /* ItemProps to spread to any item Component */
+    itemProps: {
+      onMenuItemMouseEnter,
+      onMenuItemClick: closeDropdown,
+      onMenuItemKeyDown
+    },
+    setVisible
+  };
+}, useDropdown$1 = useDropdown;
+export {
+  useDropdown$1 as default
+};

package/dist/ui/src/hooks/useDropzone/useDropzone.js

@@ -0,0 +1,76 @@
+import { useState, useRef } from "react";
+const useDropzone = (props) => {
+  const [dragging, setDragging] = useState(!1), [files, setFiles] = useState([]), inputRef = useRef(null), addFile = (file) => {
+    addFiles([file]);
+  }, deleteFile = (file) => {
+    setFiles((prevFiles) => prevFiles.filter((prevFile) => prevFile.name !== file.name));
+  }, replaceFileAt = (index, file) => {
+    setFiles((prevFiles) => {
+      if (0 <= index && index < prevFiles.length) {
+        const firstPart = prevFiles.slice(0, index), lastPart = index === prevFiles.length - 1 ? [] : prevFiles.slice(index + 1);
+        return [...firstPart, file, ...lastPart];
+      }
+      return prevFiles;
+    });
+  }, applyInputFiltersOn = (files2) => {
+    var _a;
+    let filteredFiles = files2;
+    if ((_a = inputRef.current) != null && _a.accept) {
+      const filters = inputRef.current.accept.split(",").map((filter) => filter.trim().toLowerCase()), extensions = filters.filter((filter) => filter.startsWith(".")), mimes = filters.filter((filter) => !filter.startsWith(".")).map((mime) => mime.replace("*", ""));
+      filteredFiles = [], files2.forEach((file) => {
+        const fileName = file.name.toLowerCase();
+        (extensions.some((extension) => fileName.endsWith(extension)) || mimes.some((mime) => file.type.includes(mime))) && filteredFiles.push(file);
+      });
+    }
+    return filteredFiles;
+  }, addFiles = (files2) => {
+    if (props != null && props.forceFilters) {
+      const filesToAdd = applyInputFiltersOn(files2);
+      filesToAdd && filesToAdd.length && setFiles((prevFiles) => [...prevFiles, ...filesToAdd]);
+    } else
+      setFiles((prevFiles) => [...prevFiles, ...files2]);
+  }, cleanFiles = () => {
+    setFiles([]);
+  }, handleOnChange = (event) => {
+    const files2 = event.target.files;
+    files2 && addFiles([...files2]);
+  }, handleDragging = (event) => {
+    event.preventDefault(), event.stopPropagation(), setDragging(!0);
+  }, handleDragLeave = (event) => {
+    event.preventDefault(), event.stopPropagation(), setDragging(!1);
+  };
+  return {
+    /** Reference to an `input[type=file]` HTMLElement, null at first. */
+    inputRef,
+    /** Read-only list of File·s  managed by this hook. */
+    files,
+    /** Truthy when a drag event is triggered. */
+    dragging,
+    /** Callback to attach to your drop zone (any HTMLElement). */
+    handleDragging,
+    /** Callback to attach to your drop zone (any HTMLElement). */
+    handleDragLeave,
+    /** Callback to attach to your drop zone (any HTMLElement). */
+    handleDrop: (event) => {
+      var _a;
+      handleDragLeave(event);
+      const files2 = (_a = event.dataTransfer) == null ? void 0 : _a.files;
+      files2 && (addFiles([...files2]), inputRef != null && inputRef.current && (inputRef.current.files = files2));
+    },
+    /** Replace a file in the `files` list. */
+    replaceFileAt,
+    /** Remove a file from the `files` list. */
+    deleteFile,
+    /** Add a file to the `files` list. */
+    addFile,
+    /** Add many files to the `files` list. */
+    addFiles,
+    /** Empty the `files` list. */
+    cleanFiles,
+    /** Callback to attach to your `input[type=file]` HTMLElement. */
+    handleOnChange
+  };
+}, useDropzone$1 = useDropzone;
+export {
+  useDropzone$1 as default
+};

package/dist/ui/src/hooks/useHover/useHover.js

@@ -0,0 +1,22 @@
+import { useState, useRef, useEffect } from "react";
+function useHover() {
+  const [value, setValue] = useState(!1), ref = useRef(null), handleMouseOver = () => {
+    setValue(!0);
+  }, handleMouseOut = () => {
+    setValue(!1);
+  };
+  return useEffect(
+    () => {
+      const node = ref.current;
+      if (node)
+        return node.addEventListener("mouseover", handleMouseOver), node.addEventListener("mouseout", handleMouseOut), () => {
+          node.removeEventListener("mouseover", handleMouseOver), node.removeEventListener("mouseout", handleMouseOut);
+        };
+    },
+    [ref]
+    // Recall only if ref changes
+  ), [ref, value];
+}
+export {
+  useHover as default
+};

package/dist/ui/src/hooks/useImage/useImage.js

@@ -0,0 +1,18 @@
+import { useState, useCallback, useEffect } from "react";
+function useImage({
+  src,
+  placeholder
+}) {
+  const [imgSrc, setImgSrc] = useState(src || placeholder), onError = useCallback(() => {
+    setImgSrc(placeholder);
+  }, [placeholder]);
+  return useEffect(() => {
+    setImgSrc(src);
+  }, [src]), {
+    imgSrc,
+    onError
+  };
+}
+export {
+  useImage as default
+};

package/dist/ui/src/hooks/useImageResizer/useImageResizer.js

@@ -0,0 +1,42 @@
+function useImageResizer() {
+  const changeHeightWidth = (height, maxHeight, width, maxWidth) => (width > maxWidth && (height = Math.round(height * maxWidth / width), width = maxWidth), height > maxHeight && (width = Math.round(width * maxHeight / height), height = maxHeight), {
+    height,
+    width
+  }), renameFileNameExtension = (filename, newExtension) => {
+    const filenameParts = filename.split(".");
+    return filenameParts.pop(), filenameParts.join(".") + "." + newExtension;
+  }, resizeImage = (image, fileName, maxWidth, maxHeight, compressFormat = "jpeg", quality = 80) => {
+    const qualityDecimal = quality / 100, canvas = document.createElement("canvas"), contentType = `image/${compressFormat}`;
+    let width = image.width, height = image.height;
+    const newHeightWidth = changeHeightWidth(height, maxHeight, width, maxWidth);
+    width = newHeightWidth.width, height = newHeightWidth.height;
+    const ctx = canvas.getContext("2d");
+    return ctx && (canvas.width = width, canvas.height = height, ctx.imageSmoothingEnabled && ctx.imageSmoothingQuality && (ctx.imageSmoothingQuality = "high"), ctx.drawImage(image, 0, 0, width, height)), new Promise((resolve, reject) => {
+      canvas.toBlob((blob) => {
+        blob ? resolve(new File([blob], fileName, {
+          type: contentType,
+          lastModified: (/* @__PURE__ */ new Date()).getTime()
+        })) : reject();
+      }, contentType, qualityDecimal);
+    });
+  };
+  return {
+    resizeImageFile: async (file, maxWidth = 1440, maxHeight = 1440, quality = 80) => {
+      if (!file) throw Error("Image resizer: file not found!");
+      if (!file.type || !file.type.startsWith("image/")) throw Error("Image resizer: the file given is not an image.");
+      const compressFormat = "jpeg";
+      return new Promise((resolve) => {
+        const image = new Image();
+        image.setAttribute("style", "max-width: none;"), image.src = URL.createObjectURL(file), image.onload = async () => {
+          const resizedFile = await resizeImage(image, renameFileNameExtension(file.name, compressFormat), maxWidth, maxHeight, compressFormat, quality);
+          resolve(resizedFile);
+        }, image.onerror = (error) => {
+          throw Error("Image Loading Error: " + error);
+        };
+      });
+    }
+  };
+}
+export {
+  useImageResizer as default
+};

package/dist/ui/src/hooks/useKeyPress/useKeyPress.js

@@ -0,0 +1,14 @@
+import { useCallback, useEffect } from "react";
+function useKeyPress(callback, keyCodes) {
+  const handler = useCallback(({
+    code
+  }) => {
+    keyCodes.includes(code) && callback();
+  }, [callback, keyCodes]);
+  useEffect(() => (window.addEventListener("keydown", handler), () => {
+    window.removeEventListener("keydown", handler);
+  }), [handler]);
+}
+export {
+  useKeyPress as default
+};

package/dist/ui/src/hooks/useScrollToTop/useScrollToTop.js

@@ -0,0 +1,9 @@
+function useScrollToTop() {
+  const refToTop = document.querySelector("html");
+  return () => {
+    refToTop && refToTop.scrollIntoView();
+  };
+}
+export {
+  useScrollToTop as default
+};

package/dist/ui/src/hooks/useThumbnail/useThumbnail.js

@@ -0,0 +1,29 @@
+import { useState, useEffect } from "react";
+import { useInView } from "react-intersection-observer";
+function useThumbnail(src, options) {
+  const [status, setStatus] = useState(null), {
+    ref: inViewRef,
+    inView
+  } = useInView({
+    triggerOnce: !0,
+    ...options == null ? void 0 : options.intersectionOptions
+  });
+  return useEffect(() => {
+    var _a;
+    (_a = options == null ? void 0 : options.ref) != null && _a.current && (inViewRef == null || inViewRef(options.ref.current));
+  }, [options == null ? void 0 : options.ref, inViewRef]), useEffect(() => {
+    if ((options == null ? void 0 : options.ref) === void 0 || inView) {
+      const img = new Image();
+      return img.src = src, img.onload = () => {
+        setStatus(!0);
+      }, img.onerror = () => {
+        setStatus(!1);
+      }, () => {
+        img.onload = null, img.onerror = null, setStatus(null);
+      };
+    }
+  }, [inView]), status;
+}
+export {
+  useThumbnail as default
+};

package/dist/ui/src/hooks/useTitle/useTitle.js

@@ -0,0 +1,10 @@
+import { useState, useEffect } from "react";
+function useTitle() {
+  const documentDefined = typeof document < "u", [title, setTitle] = useState(() => document.title);
+  return useEffect(() => {
+    documentDefined && setTitle(document.title);
+  }, [documentDefined]), title;
+}
+export {
+  useTitle as default
+};

package/dist/ui/src/hooks/useToast/useToast.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import toast from "react-hot-toast";
+import Alert from "../../components/Alert/Alert.js";
+const DEFAULT_POSITION = "top-right";
+function useToast() {
+  return {
+    success: (message, options) => toast.custom(/* @__PURE__ */ jsx(Alert, { type: "success", isToast: !0, isDismissible: options == null ? void 0 : options.isDismissible, className: "mb-12", children: message }), {
+      id: options == null ? void 0 : options.id,
+      duration: options == null ? void 0 : options.duration,
+      position: (options == null ? void 0 : options.position) ?? DEFAULT_POSITION
+    }),
+    error: (message, options) => toast.custom(/* @__PURE__ */ jsx(Alert, { type: "danger", isToast: !0, isDismissible: options == null ? void 0 : options.isDismissible, className: "mb-12", children: message }), {
+      id: options == null ? void 0 : options.id,
+      duration: options == null ? void 0 : options.duration,
+      position: (options == null ? void 0 : options.position) ?? DEFAULT_POSITION
+    }),
+    info: (message, options) => toast.custom(/* @__PURE__ */ jsx(Alert, { type: "info", isToast: !0, isDismissible: options == null ? void 0 : options.isDismissible, className: "mb-12", children: message }), {
+      id: options == null ? void 0 : options.id,
+      duration: options == null ? void 0 : options.duration,
+      position: (options == null ? void 0 : options.position) ?? DEFAULT_POSITION
+    }),
+    warning: (message, options) => toast.custom(/* @__PURE__ */ jsx(Alert, { type: "warning", isToast: !0, isDismissible: options == null ? void 0 : options.isDismissible, className: "mb-12", children: message }), {
+      id: options == null ? void 0 : options.id,
+      duration: options == null ? void 0 : options.duration,
+      position: (options == null ? void 0 : options.position) ?? DEFAULT_POSITION
+    }),
+    loading: toast.loading,
+    dismiss: (id) => toast.dismiss(id),
+    remove: (id) => toast.remove(id)
+  };
+}
+export {
+  useToast as default
+};

package/dist/ui/src/hooks/useToggle/useToggle.js

@@ -0,0 +1,10 @@
+import { useState, useCallback } from "react";
+function useToggle(initialState = !1) {
+  const [state, setState] = useState(initialState), toggle = useCallback(() => {
+    setState((prevState) => !prevState);
+  }, []);
+  return [state, toggle];
+}
+export {
+  useToggle as default
+};

package/dist/ui/src/hooks/useTrapFocus/useTrapFocus.js

@@ -0,0 +1,16 @@
+import { useRef, useEffect } from "react";
+function useTrapFocus() {
+  const ref = useRef(null), focusableElements = 'button:not([disabled]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+  return useEffect(() => {
+    const node = ref.current, firstFocusableElement = node.querySelectorAll(focusableElements)[0], focusableContent = node.querySelectorAll(focusableElements), lastFocusableElement = ref && (focusableContent == null ? void 0 : focusableContent[focusableContent.length - 1]), handleKeydown = (event) => {
+      event.key === "Tab" && (event.shiftKey ? document.activeElement === firstFocusableElement && (lastFocusableElement.focus(), event.preventDefault()) : document.activeElement === lastFocusableElement && (firstFocusableElement.focus(), event.preventDefault()));
+    };
+    if (node)
+      return node.addEventListener("keydown", handleKeydown), () => {
+        node.removeEventListener("keydown", handleKeydown);
+      };
+  }, []), ref;
+}
+export {
+  useTrapFocus as default
+};

package/dist/ui/src/multimedia/AudioRecorder/AudioRecorder.js

@@ -0,0 +1,49 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useState } from "react";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { Mic as SvgMic$1 } from "../../../../icons/dist/index.js";
+import AudioRecorderTimer from "./AudioRecorderTimer.js";
+import useAudioRecorder from "./useAudioRecorder.js";
+import FormControl from "../../components/Form/FormControl.js";
+import Input from "../../components/Input/Input.js";
+import Toolbar from "../../components/Toolbar/Toolbar.js";
+const AudioRecorder = /* @__PURE__ */ forwardRef(({
+  onSaveSuccess,
+  onRecordUpdated,
+  hideSaveAction = !1,
+  visibility = "protected"
+}, ref) => {
+  const {
+    recordState,
+    playState,
+    recordTime,
+    audioRef,
+    audioNameRef,
+    toolbarItems,
+    maxDuration,
+    handlePlayEnded,
+    handleSave
+  } = useAudioRecorder(onSaveSuccess, onRecordUpdated, hideSaveAction, visibility, "media-library"), {
+    t
+  } = useTranslation();
+  useImperativeHandle(ref, () => ({
+    save: handleSave
+  }));
+  const [audioTime, setAudioTime] = useState(0), classColor = clsx({
+    "text-danger": recordState === "RECORDING",
+    "text-success": playState === "PLAYING"
+  }), handleTimeUpdate = (event) => {
+    setAudioTime(event.target.currentTime);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "audio-recorder m-auto d-flex flex-column", children: [
+    /* @__PURE__ */ jsx(FormControl, { id: "recordName", className: "mb-32", isRequired: !0, isReadOnly: recordState === "SAVED" || recordState === "SAVING", children: /* @__PURE__ */ jsx(Input, { type: "text", size: "sm", placeholder: t("bbm.audio.recorder.name"), ref: audioNameRef, defaultValue: t("bbm.audio.recorder.defaultName") + (/* @__PURE__ */ new Date()).toLocaleDateString() }) }),
+    /* @__PURE__ */ jsx("div", { className: "audio-recorder-icon mx-auto", children: /* @__PURE__ */ jsx(SvgMic$1, { width: 64, height: 64, className: classColor }) }),
+    /* @__PURE__ */ jsx(AudioRecorderTimer, { recordState, playState, recordTime, audioTime, maxDuration }),
+    /* @__PURE__ */ jsx("audio", { ref: audioRef, onEnded: handlePlayEnded, onTimeUpdate: handleTimeUpdate, children: /* @__PURE__ */ jsx("track", { default: !0, kind: "captions", srcLang: "fr", src: "" }) }),
+    /* @__PURE__ */ jsx(Toolbar, { items: toolbarItems })
+  ] });
+}), AudioRecorder$1 = AudioRecorder;
+export {
+  AudioRecorder$1 as default
+};

package/dist/ui/src/multimedia/AudioRecorder/AudioRecorderTimer.js

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Pause as SvgPause$1, Record as SvgRecord$1, Mic as SvgMic$1 } from "../../../../icons/dist/index.js";
+import { convertMsToMS } from "../../utils/time.js";
+const AudioRecorderTimer = ({
+  recordState,
+  playState,
+  recordTime,
+  audioTime,
+  maxDuration
+}) => /* @__PURE__ */ jsxs("div", { className: "audio-recorder-time my-16 mx-auto", children: [
+  playState === "IDLE" && /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center", children: [
+    recordState === "PAUSED" ? /* @__PURE__ */ jsx(SvgPause$1, { width: 12, height: 12, className: "me-8 text-danger" }) : /* @__PURE__ */ jsx(SvgRecord$1, { width: 12, height: 12, className: "me-8 text-danger" }),
+    convertMsToMS(recordState !== "IDLE" ? recordTime : 0) + " / " + convertMsToMS(maxDuration)
+  ] }),
+  playState !== "IDLE" && /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center mx-auto", children: [
+    /* @__PURE__ */ jsx(SvgMic$1, { width: 12, height: 12, className: "me-8" }),
+    convertMsToMS(audioTime * 1e3),
+    " /",
+    convertMsToMS(recordTime)
+  ] })
+] });
+export {
+  AudioRecorderTimer as default
+};