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

package/dist/hooks/useDropdown/useDropdown.js

@@ -1,159 +1,158 @@
-import { useId as N, useState as b, useRef as g, useEffect as E, useCallback as l } from "react";
-import { useFloating as z, autoUpdate as V, offset as W, size as q, flip as B, useHover as G, safePolygon as J } from "@floating-ui/react";
-import { mergeRefs as v } from "../../utils/ref.js";
-const T = (C, p, y = !1) => {
-  const d = N(), [o, r] = b(!1), [a, c] = b(-1), [w, A] = b(null), {
-    refs: I,
-    floatingStyles: D,
-    context: O
-  } = z({
-    placement: C,
-    open: o,
-    onOpenChange: r,
-    whileElementsMounted: V,
-    middleware: [W(4), q({
+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: e,
-        elements: t
+        rects,
+        elements
       }) {
-        t.floating.style.minWidth = `${e.reference.width}px`;
+        elements.floating.style.minWidth = `${rects.reference.width}px`;
       }
-    }), B({
+    }), flip({
       padding: 0
     })]
   });
-  G(O, {
-    enabled: y,
+  useHover(context, {
+    enabled: isTriggerHovered,
     // Configure the delay for opening and closing separately.
     delay: {
       open: 200
     },
-    handleClose: J()
+    handleClose: safePolygon()
   });
-  const f = g(null), i = g(null), n = g({});
-  E(() => {
-    o ? f.current && (f.current.focus(), c(0)) : (c(-1), n.current = {});
-  }, [o]), E(() => {
-    if (a !== -1) {
-      const e = Object.values(n.current)[a];
-      if (e) {
-        const t = e.getAttribute("id");
-        A(t), e.focus();
+  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();
       }
     }
-  }, [a]);
-  const j = () => {
-    const t = Object.values(n.current).length;
-    c((s) => (s + 1) % t);
-  }, P = () => {
-    const t = Object.values(n.current).length;
-    c((s) => (s - 1 + t) % t);
-  }, R = () => {
-    c(0);
-  }, x = () => {
-    const t = Object.values(n.current).length;
-    c(t - 1);
-  }, m = l(() => {
-    r(!0);
-  }, []), u = l(() => {
-    i.current && (i.current.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
-    }), r(!1));
-  }, []), k = (e, t) => {
-    e && (t.stopPropagation(), t.preventDefault());
-  }, M = l((e) => {
-    let t = !1;
-    switch (e.code) {
+    }), 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":
-        m(), t = !0;
+        openDropdown(), flag = !0;
         break;
       case "Esc":
       case "Escape":
-        u(), t = !0;
+        closeDropdown(), flag = !0;
         break;
       case "Up":
       case "ArrowUp":
-        m(), t = !0;
+        openDropdown(), flag = !0;
         break;
     }
-    p == null || p(e), k(t, e);
-  }, [u, m]), U = (e) => {
-    const s = Object.values(n.current).findIndex((h) => h.id === e.currentTarget.getAttribute("id"));
-    c(s);
-  }, $ = l((e, t) => {
-    let s = !1;
-    if (e.shiftKey)
-      e.key === "Tab" && (u(), s = !0);
+    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 (e.code) {
+      switch (event.code) {
         case "Escape":
-          u();
+          closeDropdown();
           break;
         case " ":
         case "Enter":
-          a !== -1 && (Object.values(n.current)[a].getAttribute("role") === "menuitem" && i.current && (i.current.focus(), r(!1)), t == null || t()), s = !0;
+          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":
-          j(), s = !0;
+          nextItem(), flag = !0;
           break;
         case "ArrowUp":
         case "Up":
-          P(), s = !0;
+          previousItem(), flag = !0;
           break;
         case "Home":
-          R(), s = !0;
+          firstItem(), flag = !0;
           break;
         case "End":
-          x(), s = !0;
+          lastItem(), flag = !0;
           break;
       }
-      k(s, e);
+      stopEvents(flag, event);
     }
-  }, [a, u]), F = l((e) => {
-    r(o !== !0), e.stopPropagation(), e.preventDefault();
-  }, [o]);
+  }, [activeIndex, closeDropdown]), onTriggerClick = useCallback((event) => {
+    setVisible(visible !== !0), event.stopPropagation(), event.preventDefault();
+  }, [visible]);
   return {
-    isFocused: w,
-    visible: o,
-    itemRefs: n,
-    triggerRef: i,
-    menuRef: f,
+    isFocused,
+    visible,
+    itemRefs,
+    triggerRef,
+    menuRef,
     /* TriggerProps to spread to any Trigger component */
     triggerProps: {
-      ref: v(i, I.setReference),
-      id: `dropdown-toggle-${d}`,
+      ref: mergeRefs(triggerRef, refs.setReference),
+      id: `dropdown-toggle-${id}`,
       "aria-haspopup": "menu",
-      "aria-controls": `dropdown-${d}`,
-      "aria-expanded": !!o,
-      className: `${o ? "selected" : ""}`,
-      onClick: F,
-      onKeyDown: M,
-      "aria-activedescendant": w
+      "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: v(f, I.setFloating),
+      ref: mergeRefs(menuRef, refs.setFloating),
       className: "dropdown-menu",
-      "aria-labelledby": `dropdown-toggle-${d}`,
+      "aria-labelledby": `dropdown-toggle-${id}`,
       style: {
-        ...D
+        ...floatingStyles
       }
     },
     /* ItemProps to spread to any item Component */
     itemProps: {
-      onMenuItemMouseEnter: U,
-      onMenuItemClick: u,
-      onMenuItemKeyDown: $
+      onMenuItemMouseEnter,
+      onMenuItemClick: closeDropdown,
+      onMenuItemKeyDown
     },
-    setVisible: r
+    setVisible
   };
-};
+}, useDropdown$1 = useDropdown;
 export {
-  T as default
+  useDropdown$1 as default
 };
-//# sourceMappingURL=useDropdown.js.map

package/dist/hooks/useDropzone/useDropzone.js

@@ -1,77 +1,76 @@
-import { useState as d, useRef as A } from "react";
-const z = (c) => {
-  const [h, u] = d(!1), [m, r] = d([]), a = A(null), p = (t) => {
-    o([t]);
-  }, D = (t) => {
-    r((e) => e.filter((s) => s.name !== t.name));
-  }, F = (t, e) => {
-    r((s) => {
-      if (0 <= t && t < s.length) {
-        const l = s.slice(0, t), i = t === s.length - 1 ? [] : s.slice(t + 1);
-        return [...l, e, ...i];
+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 s;
+      return prevFiles;
     });
-  }, P = (t) => {
-    var s;
-    let e = t;
-    if ((s = a.current) != null && s.accept) {
-      const l = a.current.accept.split(",").map((n) => n.trim().toLowerCase()), i = l.filter((n) => n.startsWith(".")), w = l.filter((n) => !n.startsWith(".")).map((n) => n.replace("*", ""));
-      e = [], t.forEach((n) => {
-        const y = n.name.toLowerCase();
-        (i.some((f) => y.endsWith(f)) || w.some((f) => n.type.includes(f))) && e.push(n);
+  }, 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 e;
-  }, o = (t) => {
-    if (c != null && c.forceFilters) {
-      const e = P(t);
-      e && e.length && r((s) => [...s, ...e]);
+    return filteredFiles;
+  }, addFiles = (files2) => {
+    if (props != null && props.forceFilters) {
+      const filesToAdd = applyInputFiltersOn(files2);
+      filesToAdd && filesToAdd.length && setFiles((prevFiles) => [...prevFiles, ...filesToAdd]);
     } else
-      r((e) => [...e, ...t]);
-  }, C = () => {
-    r([]);
-  }, L = (t) => {
-    const e = t.target.files;
-    e && o([...e]);
-  }, W = (t) => {
-    t.preventDefault(), t.stopPropagation(), u(!0);
-  }, g = (t) => {
-    t.preventDefault(), t.stopPropagation(), u(!1);
+      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: a,
+    inputRef,
     /** Read-only list of File·s  managed by this hook. */
-    files: m,
+    files,
     /** Truthy when a drag event is triggered. */
-    dragging: h,
+    dragging,
     /** Callback to attach to your drop zone (any HTMLElement). */
-    handleDragging: W,
+    handleDragging,
     /** Callback to attach to your drop zone (any HTMLElement). */
-    handleDragLeave: g,
+    handleDragLeave,
     /** Callback to attach to your drop zone (any HTMLElement). */
-    handleDrop: (t) => {
-      var s;
-      g(t);
-      const e = (s = t.dataTransfer) == null ? void 0 : s.files;
-      e && (o([...e]), a != null && a.current && (a.current.files = e));
+    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: F,
+    replaceFileAt,
     /** Remove a file from the `files` list. */
-    deleteFile: D,
+    deleteFile,
     /** Add a file to the `files` list. */
-    addFile: p,
+    addFile,
     /** Add many files to the `files` list. */
-    addFiles: o,
+    addFiles,
     /** Empty the `files` list. */
-    cleanFiles: C,
+    cleanFiles,
     /** Callback to attach to your `input[type=file]` HTMLElement. */
-    handleOnChange: L
+    handleOnChange
   };
-};
+}, useDropzone$1 = useDropzone;
 export {
-  z as default
+  useDropzone$1 as default
 };
-//# sourceMappingURL=useDropzone.js.map

package/dist/hooks/useHover/useHover.js

@@ -1,23 +1,22 @@
-import { useState as r, useRef as a, useEffect as v } from "react";
-function l() {
-  const [u, o] = r(!1), t = a(null), s = () => {
-    o(!0);
-  }, n = () => {
-    o(!1);
+import { useState, useRef, useEffect } from "react";
+function useHover() {
+  const [value, setValue] = useState(!1), ref = useRef(null), handleMouseOver = () => {
+    setValue(!0);
+  }, handleMouseOut = () => {
+    setValue(!1);
   };
-  return v(
+  return useEffect(
     () => {
-      const e = t.current;
-      if (e)
-        return e.addEventListener("mouseover", s), e.addEventListener("mouseout", n), () => {
-          e.removeEventListener("mouseover", s), e.removeEventListener("mouseout", n);
+      const node = ref.current;
+      if (node)
+        return node.addEventListener("mouseover", handleMouseOver), node.addEventListener("mouseout", handleMouseOut), () => {
+          node.removeEventListener("mouseover", handleMouseOver), node.removeEventListener("mouseout", handleMouseOut);
         };
     },
-    [t]
+    [ref]
     // Recall only if ref changes
-  ), [t, u];
+  ), [ref, value];
 }
 export {
-  l as default
+  useHover as default
 };
-//# sourceMappingURL=useHover.js.map

package/dist/hooks/useImage/useImage.js

@@ -1,19 +1,18 @@
-import { useState as r, useCallback as s, useEffect as f } from "react";
-function a({
-  src: t,
-  placeholder: e
+import { useState, useCallback, useEffect } from "react";
+function useImage({
+  src,
+  placeholder
 }) {
-  const [n, u] = r(t || e), o = s(() => {
-    u(e);
-  }, [e]);
-  return f(() => {
-    u(t);
-  }, [t]), {
-    imgSrc: n,
-    onError: o
+  const [imgSrc, setImgSrc] = useState(src || placeholder), onError = useCallback(() => {
+    setImgSrc(placeholder);
+  }, [placeholder]);
+  return useEffect(() => {
+    setImgSrc(src);
+  }, [src]), {
+    imgSrc,
+    onError
   };
 }
 export {
-  a as default
+  useImage as default
 };
-//# sourceMappingURL=useImage.js.map

package/dist/hooks/useImageResizer/useImageResizer.js

@@ -1,43 +1,42 @@
-function z() {
-  const h = (e, n, t, o) => (t > o && (e = Math.round(e * o / t), t = o), e > n && (t = Math.round(t * n / e), e = n), {
-    height: e,
-    width: t
-  }), p = (e, n) => {
-    const t = e.split(".");
-    return t.pop(), t.join(".") + "." + n;
-  }, w = (e, n, t, o, s = "jpeg", g = 80) => {
-    const i = g / 100, r = document.createElement("canvas"), l = `image/${s}`;
-    let c = e.width, m = e.height;
-    const u = h(m, o, c, t);
-    c = u.width, m = u.height;
-    const a = r.getContext("2d");
-    return a && (r.width = c, r.height = m, a.imageSmoothingEnabled && a.imageSmoothingQuality && (a.imageSmoothingQuality = "high"), a.drawImage(e, 0, 0, c, m)), new Promise((f, y) => {
-      r.toBlob((d) => {
-        d ? f(new File([d], n, {
-          type: l,
+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()
-        })) : y();
-      }, l, i);
+        })) : reject();
+      }, contentType, qualityDecimal);
     });
   };
   return {
-    resizeImageFile: async (e, n = 1440, t = 1440, o = 80) => {
-      if (!e) throw Error("Image resizer: file not found!");
-      if (!e.type || !e.type.startsWith("image/")) throw Error("Image resizer: the file given is not an image.");
-      const s = "jpeg";
-      return new Promise((g) => {
-        const i = new Image();
-        i.setAttribute("style", "max-width: none;"), i.src = URL.createObjectURL(e), i.onload = async () => {
-          const r = await w(i, p(e.name, s), n, t, s, o);
-          g(r);
-        }, i.onerror = (r) => {
-          throw Error("Image Loading Error: " + r);
+    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 {
-  z as default
+  useImageResizer as default
 };
-//# sourceMappingURL=useImageResizer.js.map

package/dist/hooks/useKeyPress/useKeyPress.js

@@ -1,15 +1,14 @@
-import { useCallback as o, useEffect as s } from "react";
-function i(n, t) {
-  const e = o(({
-    code: r
+import { useCallback, useEffect } from "react";
+function useKeyPress(callback, keyCodes) {
+  const handler = useCallback(({
+    code
   }) => {
-    t.includes(r) && n();
-  }, [n, t]);
-  s(() => (window.addEventListener("keydown", e), () => {
-    window.removeEventListener("keydown", e);
-  }), [e]);
+    keyCodes.includes(code) && callback();
+  }, [callback, keyCodes]);
+  useEffect(() => (window.addEventListener("keydown", handler), () => {
+    window.removeEventListener("keydown", handler);
+  }), [handler]);
 }
 export {
-  i as default
+  useKeyPress as default
 };
-//# sourceMappingURL=useKeyPress.js.map

package/dist/hooks/useScrollToTop/useScrollToTop.js

@@ -1,10 +1,9 @@
-function e() {
-  const o = document.querySelector("html");
+function useScrollToTop() {
+  const refToTop = document.querySelector("html");
   return () => {
-    o && o.scrollIntoView();
+    refToTop && refToTop.scrollIntoView();
   };
 }
 export {
-  e as default
+  useScrollToTop as default
 };
-//# sourceMappingURL=useScrollToTop.js.map

package/dist/hooks/useThumbnail/useThumbnail.js

@@ -1,30 +1,29 @@
-import { useState as t, useEffect as a } from "react";
-import { useInView as d } from "react-intersection-observer";
-function w(c, r) {
-  const [m, l] = t(null), {
-    ref: u,
-    inView: f
-  } = d({
+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,
-    ...r == null ? void 0 : r.intersectionOptions
+    ...options == null ? void 0 : options.intersectionOptions
   });
-  return a(() => {
-    var e;
-    (e = r == null ? void 0 : r.ref) != null && e.current && (u == null || u(r.ref.current));
-  }, [r == null ? void 0 : r.ref, u]), a(() => {
-    if ((r == null ? void 0 : r.ref) === void 0 || f) {
-      const e = new Image();
-      return e.src = c, e.onload = () => {
-        l(!0);
-      }, e.onerror = () => {
-        l(!1);
+  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);
       }, () => {
-        e.onload = null, e.onerror = null, l(null);
+        img.onload = null, img.onerror = null, setStatus(null);
       };
     }
-  }, [f]), m;
+  }, [inView]), status;
 }
 export {
-  w as default
+  useThumbnail as default
 };
-//# sourceMappingURL=useThumbnail.js.map