@jsenv/navi 0.1.1 → 0.2.1

package/src/components/field/label.jsx

@@ -3,29 +3,43 @@ import { forwardRef } from "preact/compat";
 import { useImperativeHandle, useRef, useState } from "preact/hooks";
 
 import.meta.css = /* css */ `
-  label[data-readonly] {
-    color: rgba(0, 0, 0, 0.5);
+  @layer navi {
+    label {
+      cursor: pointer;
+    }
+
+    label[data-readonly],
+    label[data-disabled] {
+      color: rgba(0, 0, 0, 0.5);
+      cursor: default;
+    }
   }
 `;
 
 export const ReportReadOnlyOnLabelContext = createContext();
+export const ReportDisabledOnLabelContext = createContext();
 
 export const Label = forwardRef((props, ref) => {
-  const { readOnly, children, ...rest } = props;
+  const { readOnly, disabled, children, ...rest } = props;
   const innerRef = useRef();
   useImperativeHandle(ref, () => innerRef.current);
 
   const [inputReadOnly, setInputReadOnly] = useState(false);
   const innerReadOnly = readOnly || inputReadOnly;
+  const [inputDisabled, setInputDisabled] = useState(false);
+  const innerDisabled = disabled || inputDisabled;
 
   return (
     <label
       ref={innerRef}
       data-readonly={innerReadOnly ? "" : undefined}
+      data-disabled={innerDisabled ? "" : undefined}
       {...rest}
     >
       <ReportReadOnlyOnLabelContext.Provider value={setInputReadOnly}>
-        {children}
+        <ReportDisabledOnLabelContext.Provider value={setInputDisabled}>
+          {children}
+        </ReportDisabledOnLabelContext.Provider>
       </ReportReadOnlyOnLabelContext.Provider>
     </label>
   );

package/src/components/field/navi_css_vars.js

@@ -0,0 +1,10 @@
+import.meta.css = /* css */ `
+  @layer navi {
+    :root {
+      --navi-background-color-readonly: #d3d3d3;
+      --navi-color-readonly: grey;
+      --navi-background-color-disabled: #d3d3d3;
+      --navi-color-disabled: #eeeeee;
+    }
+  }
+`;

package/src/components/field/radio_list.jsx

@@ -28,9 +28,11 @@ import {
 } from "./use_ui_state_controller.js";
 
 import.meta.css = /* css */ `
-  .navi_radio_list {
-    display: flex;
-    flex-direction: column;
+  @layer navi {
+    .navi_radio_list {
+      display: flex;
+      flex-direction: column;
+    }
   }
 `;
 

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,126 +25,149 @@ import {
  * @returns {Function} - Function to hide and remove the validation message
  */
 
-import.meta.css = /* css */ `
-  /* 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 */
-  .jsenv_validation_message_container {
-    position: fixed;
-    inset: 0;
-    overflow: hidden;
-  }
+// 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;
 
-  .jsenv_validation_message {
-    display: block;
-    overflow: visible;
-    height: auto;
-    position: absolute;
-    z-index: 1;
-    opacity: 0;
-    left: 0;
-    top: 0;
-    /* will be positioned with transform: translate */
-    transition: opacity 0.2s ease-in-out;
-  }
+import.meta.css = /* css */ `
+  @layer navi {
+    :root {
+      --navi-info-color: #2196f3;
+      --navi-warning-color: #ff9800;
+      --navi-error-color: #f44336;
+      --navi-validation-message-background-color: white;
+    }
 
-  .jsenv_validation_message_border {
-    position: absolute;
-    pointer-events: none;
-    filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.2));
-  }
+    /* 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 */
+    .jsenv_validation_message_container {
+      position: fixed;
+      inset: 0;
+      overflow: hidden;
+    }
 
-  .jsenv_validation_message_body_wrapper {
-    border-style: solid;
-    border-color: transparent;
-    position: relative;
-  }
+    .jsenv_validation_message {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      display: block;
+      height: auto;
+      opacity: 0;
+      /* will be positioned with transform: translate */
+      transition: opacity 0.2s ease-in-out;
+      overflow: visible;
+    }
 
-  .jsenv_validation_message_body {
-    padding: 8px;
-    position: relative;
-    max-width: 47vw;
-    display: flex;
-    flex-direction: row;
-    gap: 10px;
-  }
+    .jsenv_validation_message_border {
+      position: absolute;
+      filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.2));
+      pointer-events: none;
+    }
 
-  .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;
-  }
+    .jsenv_validation_message_body_wrapper {
+      position: relative;
+      border-style: solid;
+      border-color: transparent;
+    }
 
-  .jsenv_validation_message_exclamation_svg {
-    width: 16px;
-    height: 12px;
-    color: white;
-  }
+    .jsenv_validation_message_body {
+      position: relative;
+      display: flex;
+      max-width: 47vw;
+      padding: 8px;
+      flex-direction: row;
+      gap: 10px;
+    }
 
-  .jsenv_validation_message[data-level="info"] .jsenv_validation_message_icon {
-    background-color: #2196f3;
-  }
-  .jsenv_validation_message[data-level="warning"]
     .jsenv_validation_message_icon {
-    background-color: #ff9800;
-  }
-  .jsenv_validation_message[data-level="error"] .jsenv_validation_message_icon {
-    background-color: #f44336;
-  }
+      display: flex;
+      width: 22px;
+      height: 22px;
+      flex-shrink: 0;
+      align-items: center;
+      align-self: flex-start;
+      justify-content: center;
+      border-radius: 2px;
+    }
 
-  .jsenv_validation_message_content {
-    align-self: center;
-    word-break: break-word;
-    min-width: 0;
-    overflow-wrap: anywhere;
-  }
+    .jsenv_validation_message_exclamation_svg {
+      width: 16px;
+      height: 12px;
+      color: white;
+    }
 
-  .jsenv_validation_message_border svg {
-    position: absolute;
-    inset: 0;
-    overflow: visible;
-  }
+    .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: 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: 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: var(--navi-error-color);
+    }
 
-  .border_path {
-    fill: var(--border-color);
-  }
+    .jsenv_validation_message_content {
+      min-width: 0;
+      align-self: center;
+      word-break: break-word;
+      overflow-wrap: anywhere;
+    }
 
-  .background_path {
-    fill: var(--background-color);
-  }
+    .jsenv_validation_message_border svg {
+      position: absolute;
+      inset: 0;
+      overflow: visible;
+    }
 
-  .jsenv_validation_message_close_button_column {
-    display: flex;
-    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;
-    align-self: center;
-    color: currentColor;
-  }
-  .jsenv_validation_message_close_button:hover {
-    background: rgba(0, 0, 0, 0.1);
-  }
-  .close_svg {
-    width: 100%;
-    height: 100%;
-  }
+    .background_path {
+      fill: var(--navi-validation-message-background-color);
+    }
+
+    .jsenv_validation_message_close_button_column {
+      display: flex;
+      height: 22px;
+    }
+    .jsenv_validation_message_close_button {
+      width: 1em;
+      height: 1em;
+      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);
+    }
+    .close_svg {
+      width: 100%;
+      height: 100%;
+    }
 
-  .error_stack {
-    overflow: auto;
-    max-height: 200px;
+    .error_stack {
+      max-height: 200px;
+      overflow: auto;
+    }
   }
 `;
 
@@ -191,6 +216,9 @@ const validationMessageTemplate = /* html */ `
   </div>
 `;
 
+const validationMessageStyleController =
+  createStyleController("validation_message");
+
 export const openValidationMessage = (
   targetElement,
   message,
@@ -210,8 +238,8 @@ export const openValidationMessage = (
     });
   }
 
+  const [teardown, addTeardown] = createPubSub(true);
   let opened = true;
-  const closeCallbackSet = new Set();
   const close = (reason) => {
     if (!opened) {
       return;
@@ -220,10 +248,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 +269,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 +281,7 @@ export const openValidationMessage = (
   };
   update(message, { level });
 
-  jsenvValidationMessage.style.opacity = "0";
+  validationMessageStyleController.set(jsenvValidationMessage, { opacity: 0 });
 
   allowWheelThrough(jsenvValidationMessage, targetElement);
 
@@ -274,13 +290,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 +312,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 +331,7 @@ export const openValidationMessage = (
       close("target_element_focus");
     };
     targetElement.addEventListener("focus", onfocus);
-    closeCallbackSet.add(() => {
+    addTeardown(() => {
       targetElement.removeEventListener("focus", onfocus);
     });
   }
@@ -337,7 +358,7 @@ export const openValidationMessage = (
       close("click_outside");
     };
     document.addEventListener("click", handleClickOutside, true);
-    closeCallbackSet.add(() => {
+    addTeardown(() => {
       document.removeEventListener("click", handleClickOutside, true);
     });
   }
@@ -349,19 +370,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 +581,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 +597,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 +642,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 +675,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();
     },
   );