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

package/dist/components/Input/Input.js

@@ -1,33 +1,31 @@
-import { jsx as f } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import u from "clsx";
-import { useFormControl as v } from "../Form/FormContext.js";
-const y = /* @__PURE__ */ p(({
-  noValidationIcon: i,
-  placeholder: l,
-  size: r = "md",
-  type: n = "text",
-  className: s,
-  ...m
-}, a) => {
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { useFormControl } from "../Form/FormContext.js";
+const Input = /* @__PURE__ */ forwardRef(({
+  noValidationIcon,
+  placeholder,
+  size = "md",
+  type = "text",
+  className,
+  ...restProps
+}, ref) => {
   const {
-    id: e,
-    isRequired: d,
-    isReadOnly: o,
-    status: t
-  } = v(), c = u({
-    "form-control": !o,
-    "form-control-lg": r === "lg",
-    "form-control-sm": r === "sm",
-    "is-invalid": t === "invalid",
-    "is-valid": t === "valid",
-    "form-control-plaintext": o,
-    "no-validation-icon": i
-  }, s);
-  return /* @__PURE__ */ f("input", { ref: a, id: e, className: c, type: n, placeholder: l, required: d, readOnly: o, ...m });
-});
+    id,
+    isRequired,
+    isReadOnly,
+    status
+  } = useFormControl(), classes = clsx({
+    "form-control": !isReadOnly,
+    "form-control-lg": size === "lg",
+    "form-control-sm": size === "sm",
+    "is-invalid": status === "invalid",
+    "is-valid": status === "valid",
+    "form-control-plaintext": isReadOnly,
+    "no-validation-icon": noValidationIcon
+  }, className);
+  return /* @__PURE__ */ jsx("input", { ref, id, className: classes, type, placeholder, required: isRequired, readOnly: isReadOnly, ...restProps });
+}), Input$1 = Input;
 export {
-  y as Input,
-  y as default
+  Input$1 as default
 };
-//# sourceMappingURL=Input.js.map

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

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

package/dist/components/Label/Label.d.ts

@@ -22,5 +22,5 @@ export interface LabelProps extends Omit<React.ComponentPropsWithRef<'label'>, O
      */
     className?: string;
 }
-export declare const Label: import('react').ForwardRefExoticComponent<Omit<LabelProps, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
+declare const Label: import('react').ForwardRefExoticComponent<Omit<LabelProps, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
 export default Label;

package/dist/components/Label/Label.js

@@ -1,39 +1,37 @@
-import { jsxs as t, jsx as u } from "react/jsx-runtime";
-import { forwardRef as h, useEffect as x } from "react";
-import b from "clsx";
-import { useTranslation as q } from "react-i18next";
-import { useFormControl as w } from "../Form/FormContext.js";
-const R = /* @__PURE__ */ h(({
-  leftIcon: r,
-  optionalText: s,
-  requiredText: a = "*",
-  children: i,
-  className: l
-}, n) => {
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect } from "react";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { useFormControl } from "../Form/FormContext.js";
+const Label = /* @__PURE__ */ forwardRef(({
+  leftIcon,
+  optionalText,
+  requiredText = "*",
+  children,
+  className
+}, ref) => {
   const {
-    id: m,
-    isOptional: o,
-    isRequired: e
-  } = w(), {
-    t: c
-  } = q(), p = b("form-label", {
-    "has-icon": r
-  }, l), d = o && !e, f = e && !o;
-  return x(() => {
-    if (o && e)
+    id,
+    isOptional,
+    isRequired
+  } = useFormControl(), {
+    t
+  } = useTranslation(), classes = clsx("form-label", {
+    "has-icon": leftIcon
+  }, className), optionalState = isOptional && !isRequired, requiredState = isRequired && !isOptional;
+  return useEffect(() => {
+    if (isOptional && isRequired)
       throw new Error("Cannot be optional and required at the same time");
-  }, [o, e]), /* @__PURE__ */ t("label", { ref: n, htmlFor: m, className: p, children: [
-    r,
-    i,
-    d && /* @__PURE__ */ t("em", { className: "optional", children: [
+  }, [isOptional, isRequired]), /* @__PURE__ */ jsxs("label", { ref, htmlFor: id, className: classes, children: [
+    leftIcon,
+    children,
+    optionalState && /* @__PURE__ */ jsxs("em", { className: "optional", children: [
       "- ",
-      s ?? c("explorer.optional")
+      optionalText ?? t("explorer.optional")
     ] }),
-    f && /* @__PURE__ */ u("em", { className: "required", children: a })
+    requiredState && /* @__PURE__ */ jsx("em", { className: "required", children: requiredText })
   ] });
-});
+}), Label$1 = Label;
 export {
-  R as Label,
-  R as default
+  Label$1 as default
 };
-//# sourceMappingURL=Label.js.map

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

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

package/dist/components/Loading/Loading.d.ts

@@ -25,5 +25,5 @@ export interface LoadingProps {
 /**
  * Inform user about loading status
  */
-export declare const Loading: import('react').ForwardRefExoticComponent<LoadingProps & import('react').RefAttributes<HTMLDivElement>>;
+declare const Loading: import('react').ForwardRefExoticComponent<LoadingProps & import('react').RefAttributes<HTMLDivElement>>;
 export default Loading;

package/dist/components/Loading/Loading.js

@@ -1,29 +1,27 @@
-import { jsxs as g, jsx as m } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import p from "clsx";
-import { Icon as x } from "../Icon/Icon.js";
-const j = /* @__PURE__ */ f((a, n) => {
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Loader } from "@edifice.io/icons";
+import clsx from "clsx";
+const Loading = /* @__PURE__ */ forwardRef((props, ref) => {
   const {
-    isLoading: r,
-    loadingIcon: i,
-    loadingPosition: o = "left",
-    children: t,
-    className: l,
-    ...c
-  } = a, s = () => {
-    let e;
-    return i ? e = i : e = /* @__PURE__ */ m(x, { name: "loader", ...c, "aria-label": "Loading" }), e;
-  }, d = p("loading d-flex align-items-center gap-8", {
-    "is-loading": r
-  }, l);
-  return /* @__PURE__ */ g("div", { className: d, role: "status", ref: n, children: [
-    (!o || o === "left") && s(),
-    t,
-    o === "right" && s()
+    isLoading,
+    loadingIcon,
+    loadingPosition = "left",
+    children,
+    className,
+    ...restProps
+  } = props, getLoadingIcon = () => {
+    let icon;
+    return loadingIcon ? icon = loadingIcon : icon = /* @__PURE__ */ jsx(Loader, { ...restProps, "aria-label": "Loading" }), icon;
+  }, classes = clsx("loading d-flex align-items-center gap-8", {
+    "is-loading": isLoading
+  }, className);
+  return /* @__PURE__ */ jsxs("div", { className: classes, role: "status", ref, children: [
+    (!loadingPosition || loadingPosition === "left") && getLoadingIcon(),
+    children,
+    loadingPosition === "right" && getLoadingIcon()
   ] });
-});
+}), Loading$1 = Loading;
 export {
-  j as Loading,
-  j as default
+  Loading$1 as default
 };
-//# sourceMappingURL=Loading.js.map

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

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

package/dist/components/LoadingScreen/LoadingScreen.d.ts

@@ -3,5 +3,5 @@ export interface LoadingScreenProps {
     position?: boolean;
     caption?: string;
 }
-export declare const LoadingScreen: import('react').ForwardRefExoticComponent<LoadingScreenProps & import('react').RefAttributes<HTMLDivElement>>;
+declare const LoadingScreen: import('react').ForwardRefExoticComponent<LoadingScreenProps & import('react').RefAttributes<HTMLDivElement>>;
 export default LoadingScreen;

package/dist/components/LoadingScreen/LoadingScreen.js

@@ -1,27 +1,25 @@
-import { jsxs as r, Fragment as l, jsx as t } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import s from "clsx";
-import g from "../../core/usePaths/usePaths.js";
-const u = /* @__PURE__ */ m(({
-  position: e = !0,
-  caption: a
-}, n) => {
-  const [i] = g(), c = `${i}/loading/screen-loading.gif`, o = s("top-0 end-0 start-0 bottom-0 d-grid justify-content-center align-content-center align-items-center z-2000", {
-    "position-fixed": !e,
-    "position-static": e
-  }), d = s("text-center pt-12", {
-    "text-white": !e
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import usePaths from "../../core/usePaths/usePaths.js";
+const LoadingScreen = /* @__PURE__ */ forwardRef(({
+  position = !0,
+  caption
+}, ref) => {
+  const [imagePath] = usePaths(), image = `${imagePath}/loading/screen-loading.gif`, containerClasses = clsx("top-0 end-0 start-0 bottom-0 d-grid justify-content-center align-content-center align-items-center z-2000", {
+    "position-fixed": !position,
+    "position-static": position
+  }), captionClasses = clsx("text-center pt-12", {
+    "text-white": !position
   });
-  return /* @__PURE__ */ r(l, { children: [
-    /* @__PURE__ */ r("div", { ref: n, className: o, children: [
-      /* @__PURE__ */ t("div", { className: "bg-white rounded-circle mx-auto w-25", children: /* @__PURE__ */ t("img", { src: c, alt: "loading" }) }),
-      a && /* @__PURE__ */ t("div", { className: d, children: a })
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { ref, className: containerClasses, children: [
+      /* @__PURE__ */ jsx("div", { className: "bg-white rounded-circle mx-auto w-25", children: /* @__PURE__ */ jsx("img", { src: image, alt: "loading" }) }),
+      caption && /* @__PURE__ */ jsx("div", { className: captionClasses, children: caption })
     ] }),
-    !e && /* @__PURE__ */ t("div", { className: "modal-backdrop fade show" })
+    !position && /* @__PURE__ */ jsx("div", { className: "modal-backdrop fade show" })
   ] });
-});
+}), LoadingScreen$1 = LoadingScreen;
 export {
-  u as LoadingScreen,
-  u as default
+  LoadingScreen$1 as default
 };
-//# sourceMappingURL=LoadingScreen.js.map

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

@@ -1 +1 @@
-export * from './LoadingScreen';
+export { default as LoadingScreen } from './LoadingScreen';

package/dist/components/Logo/Logo.d.ts

@@ -4,5 +4,5 @@ export interface LogoProps {
     is1d?: boolean;
     translate?: string;
 }
-export declare const Logo: import('react').ForwardRefExoticComponent<LogoProps & import('react').RefAttributes<HTMLAnchorElement>>;
+declare const Logo: import('react').ForwardRefExoticComponent<LogoProps & import('react').RefAttributes<HTMLAnchorElement>>;
 export default Logo;

package/dist/components/Logo/Logo.js

@@ -1,16 +1,14 @@
-import { jsx as o } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import s from "clsx";
-const f = /* @__PURE__ */ i(({
-  src: e,
-  is1d: a,
-  translate: l = "Retour accueil"
-}, r) => {
-  const t = s("navbar-brand d-none d-md-block");
-  return /* @__PURE__ */ o("a", { ref: r, className: t, href: "/timeline/timeline", "aria-label": l, children: /* @__PURE__ */ o("img", { className: "logo", src: e, alt: `logo ${a ? "ONE" : "NEO"}`, width: "300", height: "52" }) });
-});
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+const Logo = /* @__PURE__ */ forwardRef(({
+  src,
+  is1d,
+  translate = "Retour accueil"
+}, ref) => {
+  const classes = clsx("navbar-brand d-none d-md-block");
+  return /* @__PURE__ */ jsx("a", { ref, className: classes, href: "/timeline/timeline", "aria-label": translate, children: /* @__PURE__ */ jsx("img", { className: "logo", src, alt: `logo ${is1d ? "ONE" : "NEO"}`, width: "300", height: "52" }) });
+}), Logo$1 = Logo;
 export {
-  f as Logo,
-  f as default
+  Logo$1 as default
 };
-//# sourceMappingURL=Logo.js.map

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

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

package/dist/components/Menu/Menu.js

@@ -1,59 +1,58 @@
-import { jsx as i } from "react/jsx-runtime";
-import { usePrevious as M } from "@uidotdev/usehooks";
-import { useRef as p, useState as k, useEffect as C, useMemo as d } from "react";
-import { MenuButton as P } from "./MenuButton.js";
-import { MenuContext as y } from "./MenuContext.js";
-import { MenuItem as z } from "./MenuItem.js";
-const x = ({
-  label: u,
-  children: b
+import { jsx } from "react/jsx-runtime";
+import { usePrevious } from "@uidotdev/usehooks";
+import { useRef, useState, useEffect, useMemo } from "react";
+import { MenuButton } from "./MenuButton.js";
+import { MenuContext } from "./MenuContext.js";
+import { MenuItem } from "./MenuItem.js";
+const Menu = ({
+  label,
+  children
 }) => {
-  const c = p(null), r = p(/* @__PURE__ */ new Set()).current, [t, n] = k(0), o = M(t) ?? 0;
-  C(() => {
-    var e, l;
-    if (t !== o) {
-      const f = Array.from(r), s = (e = f[t]) == null ? void 0 : e.firstChild, a = (l = f[o]) == null ? void 0 : l.firstChild;
-      a == null || a.setAttribute("tabindex", "-1"), s == null || s.setAttribute("tabindex", "0"), s == null || s.focus({
+  const menuRef = useRef(null), menuItems = useRef(/* @__PURE__ */ new Set()).current, [currentIndex, setCurrentIndex] = useState(0), previousIndex = usePrevious(currentIndex) ?? 0;
+  useEffect(() => {
+    var _a, _b;
+    if (currentIndex !== previousIndex) {
+      const items = Array.from(menuItems), currentNode = (_a = items[currentIndex]) == null ? void 0 : _a.firstChild, previousNode = (_b = items[previousIndex]) == null ? void 0 : _b.firstChild;
+      previousNode == null || previousNode.setAttribute("tabindex", "-1"), currentNode == null || currentNode.setAttribute("tabindex", "0"), currentNode == null || currentNode.focus({
         preventScroll: !0
       });
     }
-  }, [t, o, r]);
-  const h = () => n(0), w = () => n(r.size - 1), D = () => {
-    const e = t === r.size - 1 ? 0 : t + 1;
-    n(e);
-  }, I = () => {
-    const e = t === 0 ? r.size - 1 : t - 1;
-    n(e);
-  }, v = (e) => {
-    switch (e.stopPropagation(), e.code) {
+  }, [currentIndex, previousIndex, menuItems]);
+  const first = () => setCurrentIndex(0), last = () => setCurrentIndex(menuItems.size - 1), next = () => {
+    const index = currentIndex === menuItems.size - 1 ? 0 : currentIndex + 1;
+    setCurrentIndex(index);
+  }, previous = () => {
+    const index = currentIndex === 0 ? menuItems.size - 1 : currentIndex - 1;
+    setCurrentIndex(index);
+  }, onKeyDown = (event) => {
+    switch (event.stopPropagation(), event.code) {
       case "ArrowUp":
-        e.preventDefault(), I();
+        event.preventDefault(), previous();
         break;
       case "ArrowDown":
-        e.preventDefault(), D();
+        event.preventDefault(), next();
         break;
     }
-    switch (e.code) {
+    switch (event.code) {
       case "End":
-        e.preventDefault(), w();
+        event.preventDefault(), last();
         break;
       case "Home":
-        e.preventDefault(), h();
+        event.preventDefault(), first();
         break;
     }
-  }, m = d(() => ({
+  }, childProps = useMemo(() => ({
     "data-menubar-menuitem": "",
     role: "menuitem"
-  }), []), A = d(() => ({
-    menuRef: c,
-    menuItems: r,
-    childProps: m
-  }), [m, r]);
-  return /* @__PURE__ */ i(y.Provider, { value: A, children: /* @__PURE__ */ i("nav", { "aria-label": u, className: "menu", children: /* @__PURE__ */ i("ul", { ref: c, role: "menubar", "aria-label": u, onKeyDown: v, "data-menubar-list": !0, className: "list-unstyled d-flex flex-column gap-4", children: b }) }) });
+  }), []), values = useMemo(() => ({
+    menuRef,
+    menuItems,
+    childProps
+  }), [childProps, menuItems]);
+  return /* @__PURE__ */ jsx(MenuContext.Provider, { value: values, children: /* @__PURE__ */ jsx("nav", { "aria-label": label, className: "menu", children: /* @__PURE__ */ jsx("ul", { ref: menuRef, role: "menubar", "aria-label": label, onKeyDown, "data-menubar-list": !0, className: "list-unstyled d-flex flex-column gap-4", children }) }) });
 };
-x.Item = z;
-x.Button = P;
+Menu.Item = MenuItem;
+Menu.Button = MenuButton;
 export {
-  x as Menu
+  Menu
 };
-//# sourceMappingURL=Menu.js.map

package/dist/components/Menu/MenuButton.js

@@ -1,22 +1,21 @@
-import { jsx as i } from "react/jsx-runtime";
-import m from "clsx";
-import { useMenuContext as l } from "./MenuContext.js";
-import { Button as a } from "../Button/Button.js";
-const x = (t) => {
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useMenuContext } from "./MenuContext.js";
+import Button from "../Button/Button.js";
+const MenuButton = (props) => {
   const {
-    selected: o,
-    leftIcon: r,
-    rightIcon: n,
-    onClick: c,
-    children: e
-  } = t, {
-    childProps: s
-  } = l();
-  return /* @__PURE__ */ i(a, { variant: "ghost", color: "tertiary", className: m("stack w-100", {
-    selected: o
-  }), leftIcon: r, rightIcon: n, onClick: c, ...s, children: e });
+    selected,
+    leftIcon,
+    rightIcon,
+    onClick,
+    children
+  } = props, {
+    childProps
+  } = useMenuContext();
+  return /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", className: clsx("stack w-100", {
+    selected
+  }), leftIcon, rightIcon, onClick, ...childProps, children });
 };
 export {
-  x as MenuButton
+  MenuButton
 };
-//# sourceMappingURL=MenuButton.js.map

package/dist/components/Menu/MenuContext.js

@@ -1,13 +1,12 @@
-import { createContext as t, useContext as n } from "react";
-const o = /* @__PURE__ */ t(null);
-function u() {
-  const e = n(o);
-  if (!e)
+import { createContext, useContext } from "react";
+const MenuContext = /* @__PURE__ */ createContext(null);
+function useMenuContext() {
+  const context = useContext(MenuContext);
+  if (!context)
     throw new Error("Cannot be rendered outside the Menu component");
-  return e;
+  return context;
 }
 export {
-  o as MenuContext,
-  u as useMenuContext
+  MenuContext,
+  useMenuContext
 };
-//# sourceMappingURL=MenuContext.js.map

package/dist/components/Menu/MenuItem.js

@@ -1,20 +1,19 @@
-import { jsx as m } from "react/jsx-runtime";
-import { useRef as u, useId as s, useEffect as i } from "react";
-import { useMenuContext as f } from "./MenuContext.js";
-const a = ({
-  children: n
+import { jsx } from "react/jsx-runtime";
+import { useRef, useId, useEffect } from "react";
+import { useMenuContext } from "./MenuContext.js";
+const MenuItem = ({
+  children
 }) => {
-  const r = u(null), o = s(), {
-    menuItems: t
-  } = f();
-  return i(() => {
-    const e = r.current;
-    return e && t.add(e), () => {
-      e && t.delete(e);
+  const itemRef = useRef(null), id = useId(), {
+    menuItems
+  } = useMenuContext();
+  return useEffect(() => {
+    const itemNode = itemRef.current;
+    return itemNode && menuItems.add(itemNode), () => {
+      itemNode && menuItems.delete(itemNode);
     };
-  }, [t]), /* @__PURE__ */ m("li", { ref: r, id: o, role: "none", "data-menubar-listitem": !0, children: n });
+  }, [menuItems]), /* @__PURE__ */ jsx("li", { ref: itemRef, id, role: "none", "data-menubar-listitem": !0, children });
 };
 export {
-  a as MenuItem
+  MenuItem
 };
-//# sourceMappingURL=MenuItem.js.map

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

@@ -35,9 +35,12 @@ export interface ModalProps {
      */
     children: React.ReactNode;
 }
-export declare const Modal: import('react').ForwardRefExoticComponent<ModalProps & import('react').RefAttributes<HTMLDivElement>> & {
+declare const Modal: import('react').ForwardRefExoticComponent<ModalProps & import('react').RefAttributes<HTMLDivElement>> & {
     Header: {
         (props: import('./ModalHeader').ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
+        /**
+         * Is modal scrollable (see https://getbootstrap.com/docs/5.0/components/modal/#scrolling-long-content)
+         */
         displayName: string;
     };
     Subtitle: {