@jsenv/navi 0.1.0 → 0.2.0

package/src/components/loader/loader_background.jsx

@@ -1,6 +1,7 @@
 import { resolveCSSSize } from "@jsenv/dom";
-import { createPortal } from "preact/compat";
+import { createPortal, forwardRef } from "preact/compat";
 import { useLayoutEffect, useRef, useState } from "preact/hooks";
+
 import { useDebounceTrue } from "../use_debounce_true.js";
 import { RectangleLoading } from "./rectangle_loading.jsx";
 
@@ -10,6 +11,8 @@ import.meta.css = /* css */ `
     width: fit-content;
     display: inline-flex;
     height: fit-content;
+    border-radius: inherit;
+    cursor: inherit;
   }
 
   .navi_loading_rectangle_wrapper {
@@ -27,31 +30,53 @@ import.meta.css = /* css */ `
   }
 `;
 
-export const LoadableInlineElement = ({
-  children,
-  width,
-  height,
-  ...props
-}) => {
-  const actionName = props["data-action"];
-  if (actionName) {
-    delete props["data-action"];
-  }
+export const LoadableInlineElement = forwardRef((props, ref) => {
+  const {
+    // background props
+    loading,
+    containerRef,
+    targetSelector,
+    color,
+    inset,
+    spacingTop,
+    spacingLeft,
+    spacingBottom,
+    spacingRight,
+    // other props
+    width,
+    height,
+    children,
+    ...rest
+  } = props;
 
   return (
     <span
+      {...rest}
+      ref={ref}
       className="navi_inline_wrapper"
       style={{
+        ...rest.style,
         ...(width ? { width } : {}),
         ...(height ? { height } : {}),
       }}
-      data-action={actionName}
     >
-      <LoaderBackground {...props} />
+      <LoaderBackground
+        {...{
+          loading,
+          containerRef,
+          targetSelector,
+          color,
+          inset,
+          spacingTop,
+          spacingLeft,
+          spacingBottom,
+          spacingRight,
+        }}
+      />
       {children}
     </span>
   );
-};
+});
 
 export const LoaderBackground = ({
   loading,
@@ -249,6 +274,8 @@ const LoaderBackgroundBasic = ({
         setPaddingBottom(paddingBottom);
 
         if (color) {
+          // const resolvedColor = resolveCSSColor(color, rectangle, "css");
+          //  console.log(resolvedColor);
           setCurrentColor(color);
         } else if (
           newOutlineColor &&

package/src/validation/constraints/readonly_constraint.js

@@ -7,6 +7,9 @@ export const READONLY_CONSTRAINT = {
     if (!element.readonly && !element.hasAttribute("data-readonly")) {
       return null;
     }
+    if (element.type === "hidden") {
+      return null;
+    }
     const readonlySilent = element.hasAttribute("data-readonly-silent");
     if (readonlySilent) {
       return { silent: true };
@@ -21,11 +24,13 @@ export const READONLY_CONSTRAINT = {
     const isBusy = element.getAttribute("aria-busy") === "true";
     if (isBusy) {
       return {
+        target: element,
         message: `Cette action est en cours. Veuillez patienter.`,
         level: "info",
       };
     }
     return {
+      target: element,
       message:
         element.tagName === "BUTTON"
           ? `Cet action n'est pas disponible pour l'instant.`

package/src/validation/validation_message.js

@@ -1,5 +1,7 @@
 import {
   allowWheelThrough,
+  createPubSub,
+  createStyleController,
   getBorderSizes,
   pickPositionRelativeTo,
   visibleRectEffect,
@@ -23,7 +25,21 @@ import {
  * @returns {Function} - Function to hide and remove the validation message
  */
 
+// Configuration parameters for validation message appearance
+const BORDER_WIDTH = 1;
+const CORNER_RADIUS = 3;
+const ARROW_WIDTH = 16;
+const ARROW_HEIGHT = 8;
+const ARROW_SPACING = 8;
+
 import.meta.css = /* css */ `
+  :root {
+    --navi-info-color: #2196f3;
+    --navi-warning-color: #ff9800;
+    --navi-error-color: #f44336;
+    --navi-validation-message-background-color: white;
+  }
+
   /* Ensure the validation message CANNOT cause overflow */
   /* might be important to ensure it cannot create scrollbars in the document */
   /* When measuring the size it should take */
@@ -34,48 +50,48 @@ import.meta.css = /* css */ `
   }
 
   .jsenv_validation_message {
-    display: block;
-    overflow: visible;
-    height: auto;
     position: absolute;
+    top: 0;
+    left: 0;
     z-index: 1;
+    display: block;
+    height: auto;
     opacity: 0;
-    left: 0;
-    top: 0;
     /* will be positioned with transform: translate */
     transition: opacity 0.2s ease-in-out;
+    overflow: visible;
   }
 
   .jsenv_validation_message_border {
     position: absolute;
-    pointer-events: none;
     filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.2));
+    pointer-events: none;
   }
 
   .jsenv_validation_message_body_wrapper {
+    position: relative;
     border-style: solid;
     border-color: transparent;
-    position: relative;
   }
 
   .jsenv_validation_message_body {
-    padding: 8px;
     position: relative;
-    max-width: 47vw;
     display: flex;
+    max-width: 47vw;
+    padding: 8px;
     flex-direction: row;
     gap: 10px;
   }
 
   .jsenv_validation_message_icon {
     display: flex;
-    align-self: flex-start;
-    align-items: center;
-    justify-content: center;
     width: 22px;
     height: 22px;
-    border-radius: 2px;
     flex-shrink: 0;
+    align-items: center;
+    align-self: flex-start;
+    justify-content: center;
+    border-radius: 2px;
   }
 
   .jsenv_validation_message_exclamation_svg {
@@ -84,21 +100,30 @@ import.meta.css = /* css */ `
     color: white;
   }
 
+  .jsenv_validation_message[data-level="info"] .border_path {
+    fill: var(--navi-info-color);
+  }
   .jsenv_validation_message[data-level="info"] .jsenv_validation_message_icon {
-    background-color: #2196f3;
+    background-color: var(--navi-info-color);
+  }
+  .jsenv_validation_message[data-level="warning"] .border_path {
+    fill: var(--navi-warning-color);
   }
   .jsenv_validation_message[data-level="warning"]
     .jsenv_validation_message_icon {
-    background-color: #ff9800;
+    background-color: var(--navi-warning-color);
+  }
+  .jsenv_validation_message[data-level="error"] .border_path {
+    fill: var(--navi-error-color);
   }
   .jsenv_validation_message[data-level="error"] .jsenv_validation_message_icon {
-    background-color: #f44336;
+    background-color: var(--navi-error-color);
   }
 
   .jsenv_validation_message_content {
+    min-width: 0;
     align-self: center;
     word-break: break-word;
-    min-width: 0;
     overflow-wrap: anywhere;
   }
 
@@ -108,12 +133,8 @@ import.meta.css = /* css */ `
     overflow: visible;
   }
 
-  .border_path {
-    fill: var(--border-color);
-  }
-
   .background_path {
-    fill: var(--background-color);
+    fill: var(--navi-validation-message-background-color);
   }
 
   .jsenv_validation_message_close_button_column {
@@ -121,16 +142,16 @@ import.meta.css = /* css */ `
     height: 22px;
   }
   .jsenv_validation_message_close_button {
-    border: none;
-    background: none;
-    padding: 0;
     width: 1em;
     height: 1em;
-    font-size: inherit;
-    cursor: pointer;
-    border-radius: 0.2em;
+    padding: 0;
     align-self: center;
     color: currentColor;
+    font-size: inherit;
+    background: none;
+    border: none;
+    border-radius: 0.2em;
+    cursor: pointer;
   }
   .jsenv_validation_message_close_button:hover {
     background: rgba(0, 0, 0, 0.1);
@@ -141,8 +162,8 @@ import.meta.css = /* css */ `
   }
 
   .error_stack {
-    overflow: auto;
     max-height: 200px;
+    overflow: auto;
   }
 `;
 
@@ -191,6 +212,9 @@ const validationMessageTemplate = /* html */ `
   </div>
 `;
 
+const validationMessageStyleController =
+  createStyleController("validation_message");
+
 export const openValidationMessage = (
   targetElement,
   message,
@@ -210,8 +234,8 @@ export const openValidationMessage = (
     });
   }
 
+  const [teardown, addTeardown] = createPubSub(true);
   let opened = true;
-  const closeCallbackSet = new Set();
   const close = (reason) => {
     if (!opened) {
       return;
@@ -220,10 +244,7 @@ export const openValidationMessage = (
       console.debug(`validation message closed (reason: ${reason})`);
     }
     opened = false;
-    for (const closeCallback of closeCallbackSet) {
-      closeCallback();
-    }
-    closeCallbackSet.clear();
+    teardown(reason);
   };
 
   // Create and add validation message to document
@@ -244,15 +265,6 @@ export const openValidationMessage = (
     { level = "warning", closeOnClickOutside = level === "info" } = {},
   ) => {
     _closeOnClickOutside = closeOnClickOutside;
-    const borderColor =
-      level === "info" ? "blue" : level === "warning" ? "grey" : "red";
-    const backgroundColor = "white";
-
-    jsenvValidationMessage.style.setProperty("--border-color", borderColor);
-    jsenvValidationMessage.style.setProperty(
-      "--background-color",
-      backgroundColor,
-    );
 
     if (Error.isError(newMessage)) {
       const error = newMessage;
@@ -265,7 +277,7 @@ export const openValidationMessage = (
   };
   update(message, { level });
 
-  jsenvValidationMessage.style.opacity = "0";
+  validationMessageStyleController.set(jsenvValidationMessage, { opacity: 0 });
 
   allowWheelThrough(jsenvValidationMessage, targetElement);
 
@@ -274,13 +286,18 @@ export const openValidationMessage = (
   jsenvValidationMessage.id = validationMessageId;
   targetElement.setAttribute("aria-invalid", "true");
   targetElement.setAttribute("aria-errormessage", validationMessageId);
-  closeCallbackSet.add(() => {
+  targetElement.style.setProperty(
+    "--invalid-color",
+    `var(--navi-${level}-color)`,
+  );
+  addTeardown(() => {
     targetElement.removeAttribute("aria-invalid");
     targetElement.removeAttribute("aria-errormessage");
+    targetElement.style.removeProperty("--invalid-color");
   });
 
   document.body.appendChild(jsenvValidationMessage);
-  closeCallbackSet.add(() => {
+  addTeardown(() => {
     jsenvValidationMessage.remove();
   });
 
@@ -291,12 +308,12 @@ export const openValidationMessage = (
       debug,
     },
   );
-  closeCallbackSet.add(() => {
+  addTeardown(() => {
     positionFollower.stop();
   });
 
   if (onClose) {
-    closeCallbackSet.add(onClose);
+    addTeardown(onClose);
   }
   close_on_target_focus: {
     const onfocus = () => {
@@ -310,7 +327,7 @@ export const openValidationMessage = (
       close("target_element_focus");
     };
     targetElement.addEventListener("focus", onfocus);
-    closeCallbackSet.add(() => {
+    addTeardown(() => {
       targetElement.removeEventListener("focus", onfocus);
     });
   }
@@ -337,7 +354,7 @@ export const openValidationMessage = (
       close("click_outside");
     };
     document.addEventListener("click", handleClickOutside, true);
-    closeCallbackSet.add(() => {
+    addTeardown(() => {
       document.removeEventListener("click", handleClickOutside, true);
     });
   }
@@ -349,19 +366,12 @@ export const openValidationMessage = (
     updatePosition: positionFollower.updatePosition,
   };
   targetElement.jsenvValidationMessage = validationMessage;
-  closeCallbackSet.add(() => {
+  addTeardown(() => {
     delete targetElement.jsenvValidationMessage;
   });
   return validationMessage;
 };
 
-// Configuration parameters for validation message appearance
-const ARROW_WIDTH = 16;
-const ARROW_HEIGHT = 8;
-const CORNER_RADIUS = 3;
-const BORDER_WIDTH = 1;
-const ARROW_SPACING = 8;
-
 /**
  * Generates SVG path for validation message with arrow on top
  * @param {number} width - Validation message width
@@ -567,6 +577,8 @@ const stickValidationMessageToTarget = (validationMessage, targetElement) => {
         spaceBelowTarget,
       } = pickPositionRelativeTo(validationMessageClone, targetElement, {
         alignToViewportEdgeWhenTargetNearEdge: 20,
+        // when fully to the left, the border color is collé to the browser window making it hard to see
+        minLeft: 1,
       });
 
       // Get element padding and border to properly position arrow
@@ -581,7 +593,7 @@ const stickValidationMessageToTarget = (validationMessage, targetElement) => {
       let arrowTargetLeft;
       if (arrowPositionAttribute === "center") {
         // Target the center of the element
-        arrowTargetLeft = targetRight / 2;
+        arrowTargetLeft = (targetLeft + targetRight) / 2;
       } else {
         // Default behavior: target the left edge of the element (after borders)
         arrowTargetLeft = targetLeft + targetBorderSizes.left;
@@ -626,14 +638,6 @@ const stickValidationMessageToTarget = (validationMessage, targetElement) => {
       contentHeight -= 16; // padding * 2
       const spaceRemainingAfterContent =
         spaceAvailableForContent - contentHeight;
-      console.log({
-        position,
-        spaceBelowTarget,
-        validationMessageHeight,
-        spaceAvailableForContent,
-        contentHeight,
-        spaceRemainingAfterContent,
-      });
       if (spaceRemainingAfterContent < 2) {
         const maxHeight = spaceAvailableForContent;
         validationMessageContent.style.maxHeight = `${maxHeight}px`;
@@ -667,10 +671,14 @@ const stickValidationMessageToTarget = (validationMessage, targetElement) => {
         );
       }
 
-      validationMessage.style.opacity = visibilityRatio ? "1" : "0";
       validationMessage.setAttribute("data-position", position);
-      validationMessage.style.transform = `translateX(${validationMessageLeft}px) translateY(${validationMessageTop}px)`;
-
+      validationMessageStyleController.set(validationMessage, {
+        opacity: visibilityRatio ? 1 : 0,
+        transform: {
+          translateX: validationMessageLeft,
+          translateY: validationMessageTop,
+        },
+      });
       validationMessageClone.remove();
     },
   );