@jsenv/navi 0.9.3 → 0.10.0

package/index.js

@@ -107,6 +107,11 @@ export {
   addCustomMessage,
   removeCustomMessage,
 } from "./src/validation/custom_message.js";
+// advanced constraint validation functions
+export {
+  forwardActionRequested,
+  installCustomConstraintValidation,
+} from "./src/validation/custom_constraint_validation.js";
 
 // Other
 export { useDependenciesDiff } from "./src/components/use_dependencies_diff.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/navi",
-  "version": "0.9.3",
+  "version": "0.10.0",
   "description": "Library of components including navigation to create frontend applications",
   "repository": {
     "type": "git",

package/src/components/callout/callout.js

@@ -86,7 +86,9 @@ export const openCallout = (
     addTeardown(onClose);
   }
 
-  const [updateLevel, addLevelEffect] = createValueEffect(undefined);
+  const [updateLevel, addLevelEffect, cleanupLevelEffects] =
+    createValueEffect(undefined);
+  addTeardown(cleanupLevelEffects);
 
   // Create and add callout to document
   const calloutElement = createCalloutElement();

package/src/components/details/details.jsx

@@ -16,33 +16,33 @@ import { SummaryMarker } from "./summary_marker.jsx";
 
 import.meta.css = /* css */ `
   .navi_details {
-    display: flex;
-    flex-direction: column;
     position: relative;
     z-index: 1;
+    display: flex;
     flex-shrink: 0;
+    flex-direction: column;
   }
 
   .navi_details > summary {
-    flex-shrink: 0;
-    cursor: pointer;
     display: flex;
+    flex-shrink: 0;
     flex-direction: column;
+    cursor: pointer;
     user-select: none;
   }
   .summary_body {
     display: flex;
+    width: 100%;
     flex-direction: row;
     align-items: center;
-    width: 100%;
     gap: 0.2em;
   }
   .summary_label {
     display: flex;
+    padding-right: 10px;
     flex: 1;
-    gap: 0.2em;
     align-items: center;
-    padding-right: 10px;
+    gap: 0.2em;
   }
 
   .navi_details > summary:focus {
@@ -230,7 +230,6 @@ const DetailsWithAction = forwardRef((props, ref) => {
         const isOpen = toggleEvent.newState === "open";
         if (isOpen) {
           requestAction(toggleEvent.target, effectiveAction, {
-            actionOrigin: "action_prop",
             event: toggleEvent,
             method: "run",
           });

package/src/components/field/button.jsx

@@ -8,7 +8,7 @@ import {
 
 import { getActionPrivateProperties } from "../../action_private_properties.js";
 import { useActionStatus } from "../../use_action_status.js";
-import { requestAction } from "../../validation/custom_constraint_validation.js";
+import { forwardActionRequested } from "../../validation/custom_constraint_validation.js";
 import { useConstraints } from "../../validation/hooks/use_constraints.js";
 import { FormActionContext } from "../action_execution/form_context.js";
 import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
@@ -285,7 +285,6 @@ const ButtonWithAction = forwardRef((props, ref) => {
   const {
     action,
     loading,
-    onClick,
     actionErrorEffect,
     onActionPrevented,
     onActionStart,
@@ -302,22 +301,16 @@ const ButtonWithAction = forwardRef((props, ref) => {
     errorEffect: actionErrorEffect,
   });
 
+  const innerLoading = loading || actionLoading;
+
   useActionEvents(innerRef, {
     onPrevented: onActionPrevented,
+    onRequested: (e) => forwardActionRequested(e, boundAction),
     onAction: executeAction,
     onStart: onActionStart,
     onError: onActionError,
     onEnd: onActionEnd,
   });
-  const handleClick = (event) => {
-    event.preventDefault();
-    const button = innerRef.current;
-    requestAction(button, boundAction, {
-      event,
-      actionOrigin: "action_prop",
-    });
-  };
-  const innerLoading = loading || actionLoading;
 
   return (
     <ButtonBasic
@@ -326,10 +319,6 @@ const ButtonWithAction = forwardRef((props, ref) => {
       {...rest}
       ref={innerRef}
       loading={innerLoading}
-      onClick={(event) => {
-        handleClick(event);
-        onClick?.(event);
-      }}
     >
       {children}
     </ButtonBasic>
@@ -341,7 +330,6 @@ const ButtonInsideForm = forwardRef((props, ref) => {
     // eslint-disable-next-line no-unused-vars
     formContext,
     type,
-    onClick,
     children,
     loading,
     readOnly,
@@ -350,40 +338,8 @@ const ButtonInsideForm = forwardRef((props, ref) => {
   const innerRef = useRef();
   useImperativeHandle(ref, () => innerRef.current);
 
-  const wouldSubmitFormByType = type === "submit" || type === "image";
   const innerLoading = loading;
   const innerReadOnly = readOnly;
-  const handleClick = (event) => {
-    const buttonElement = innerRef.current;
-    const { form } = buttonElement;
-    let wouldSubmitForm = wouldSubmitFormByType;
-    if (!wouldSubmitForm && type === undefined) {
-      const formSubmitButton = form.querySelector(
-        "button[type='submit'], input[type='submit'], input[type='image']",
-      );
-      const wouldSubmitFormBecauseSingleButtonWithoutType = !formSubmitButton;
-      wouldSubmitForm = wouldSubmitFormBecauseSingleButtonWithoutType;
-    }
-    if (!wouldSubmitForm) {
-      if (buttonElement.hasAttribute("data-readonly")) {
-        event.preventDefault();
-      }
-      return;
-    }
-    // prevent default behavior that would submit the form
-    // we want to go through the action execution process (with validation and all)
-    event.preventDefault();
-    form.dispatchEvent(
-      new CustomEvent("actionrequested", {
-        detail: {
-          requester: buttonElement,
-          event,
-          meta: { isSubmit: true },
-          actionOrigin: "action_prop",
-        },
-      }),
-    );
-  };
 
   return (
     <ButtonBasic
@@ -392,10 +348,6 @@ const ButtonInsideForm = forwardRef((props, ref) => {
       type={type}
       loading={innerLoading}
       readOnly={innerReadOnly}
-      onClick={(event) => {
-        handleClick(event);
-        onClick?.(event);
-      }}
     >
       {children}
     </ButtonBasic>
@@ -411,7 +363,6 @@ const ButtonWithActionInsideForm = forwardRef((props, ref) => {
     action,
     loading,
     children,
-    onClick,
     onActionPrevented,
     onActionStart,
     onActionAbort,
@@ -468,16 +419,8 @@ const ButtonWithActionInsideForm = forwardRef((props, ref) => {
       ref={innerRef}
       type={type}
       loading={innerLoading}
-      onClick={(event) => {
-        const button = innerRef.current;
-        const form = button.form;
-        event.preventDefault();
-        requestAction(form, actionBoundToFormParams, {
-          event,
-          requester: button,
-          actionOrigin: "action_prop",
-        });
-        onClick?.(event);
+      onactionrequested={(e) => {
+        forwardActionRequested(e, actionBoundToFormParams, e.target.form);
       }}
     >
       {children}

package/src/components/field/checkbox_list.jsx

@@ -172,7 +172,6 @@ const CheckboxListWithAction = forwardRef((props, ref) => {
         requestAction(checkboxList, boundAction, {
           event,
           requester: checkbox,
-          actionOrigin: "action_prop",
         });
       }}
       loading={loading || actionLoading}

package/src/components/field/form.jsx

@@ -16,7 +16,7 @@
 import { forwardRef } from "preact/compat";
 import { useContext, useImperativeHandle, useMemo, useRef } from "preact/hooks";
 
-import { requestAction } from "../../validation/custom_constraint_validation.js";
+import { forwardActionRequested } from "../../validation/custom_constraint_validation.js";
 import { useConstraints } from "../../validation/hooks/use_constraints.js";
 import {
   FormActionContext,
@@ -150,13 +150,7 @@ const FormWithAction = forwardRef((props, ref) => {
   useActionEvents(innerRef, {
     onPrevented: onActionPrevented,
     onRequested: (e) => {
-      const form = innerRef.current;
-      requestAction(form, actionBoundToUIState, {
-        requester: e.detail?.requester,
-        event: e.detail?.event || e,
-        meta: e.detail?.meta,
-        actionOrigin: e.detail?.actionOrigin,
-      });
+      forwardActionRequested(e, actionBoundToUIState);
     },
     onAction: (e) => {
       const form = innerRef.current;
@@ -194,15 +188,6 @@ const FormWithAction = forwardRef((props, ref) => {
       {...rest}
       ref={innerRef}
       loading={innerLoading}
-      onrequestsubmit={(e) => {
-        // prevent "submit" event that would be dispatched by the browser after form.requestSubmit()
-        // (not super important because our <form> listen the "action" and do does preventDefault on "submit")
-        e.preventDefault();
-        requestAction(e.target, actionBoundToUIState, {
-          event: e,
-          actionOrigin: "action_prop",
-        });
-      }}
     >
       <FormActionContext.Provider value={actionBoundToUIState}>
         <LoadingElementContext.Provider value={formActionRequester}>

package/src/components/field/input_checkbox.jsx

@@ -425,7 +425,6 @@ const InputCheckboxWithAction = forwardRef((props, ref) => {
       onChange={(e) => {
         requestAction(e.target, actionBoundToUIState, {
           event: e,
-          actionOrigin: "action_prop",
         });
         onChange?.(e);
       }}

package/src/components/field/input_textual.jsx

@@ -19,14 +19,13 @@
 import { forwardRef } from "preact/compat";
 import {
   useContext,
-  useEffect,
   useImperativeHandle,
   useLayoutEffect,
   useRef,
 } from "preact/hooks";
 
 import { useActionStatus } from "../../use_action_status.js";
-import { requestAction } from "../../validation/custom_constraint_validation.js";
+import { forwardActionRequested } from "../../validation/custom_constraint_validation.js";
 import { useConstraints } from "../../validation/hooks/use_constraints.js";
 import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
 import { useActionBoundToOneParam } from "../action_execution/use_action.js";
@@ -274,8 +273,6 @@ const InputTextualWithAction = forwardRef((props, ref) => {
     cancelOnBlurInvalid,
     cancelOnEscape,
     actionErrorEffect,
-    onInput,
-    onKeyDown,
     ...rest
   } = props;
   const innerRef = useRef(null);
@@ -285,21 +282,6 @@ const InputTextualWithAction = forwardRef((props, ref) => {
   const executeAction = useExecuteAction(innerRef, {
     errorEffect: actionErrorEffect,
   });
-  const valueAtInteractionRef = useRef(null);
-
-  useOnInputChange(innerRef, (e) => {
-    if (
-      valueAtInteractionRef.current !== null &&
-      e.target.value === valueAtInteractionRef.current
-    ) {
-      valueAtInteractionRef.current = null;
-      return;
-    }
-    requestAction(e.target, boundAction, {
-      event: e,
-      actionOrigin: "action_prop",
-    });
-  });
   // here updating the input won't call the associated action
   // (user have to blur or press enter for this to happen)
   // so we can keep the ui state on cancel/abort/error and let user decide
@@ -322,16 +304,12 @@ const InputTextualWithAction = forwardRef((props, ref) => {
         if (!cancelOnEscape) {
           return;
         }
-        /**
-         * Browser trigger a "change" event right after the escape is pressed
-         * if the input value has changed.
-         * We need to prevent the next change event otherwise we would request action when
-         * we actually want to cancel
-         */
-        valueAtInteractionRef.current = e.target.value;
       }
       onCancel?.(e, reason);
     },
+    onRequested: (e) => {
+      forwardActionRequested(e, boundAction);
+    },
     onPrevented: onActionPrevented,
     onAction: executeAction,
     onStart: onActionStart,
@@ -345,135 +323,20 @@ const InputTextualWithAction = forwardRef((props, ref) => {
       {...rest}
       ref={innerRef}
       loading={loading || actionLoading}
-      onInput={(e) => {
-        valueAtInteractionRef.current = null;
-        onInput?.(e);
-      }}
-      onKeyDown={(e) => {
-        if (e.key !== "Enter") {
-          return;
-        }
-        e.preventDefault();
-        /**
-         * Browser trigger a "change" event right after the enter is pressed
-         * if the input value has changed.
-         * We need to prevent the next change event otherwise we would request action twice
-         */
-        valueAtInteractionRef.current = e.target.value;
-        requestAction(e.target, boundAction, {
-          event: e,
-          actionOrigin: "action_prop",
-        });
-        onKeyDown?.(e);
-      }}
     />
   );
 });
 const InputTextualInsideForm = forwardRef((props, ref) => {
   const {
-    onKeyDown,
     // We destructure formContext to avoid passing it to the underlying input element
     // eslint-disable-next-line no-unused-vars
     formContext,
     ...rest
   } = props;
 
-  return (
-    <InputTextualBasic
-      {...rest}
-      ref={ref}
-      onKeyDown={(e) => {
-        if (e.key === "Enter") {
-          const inputElement = e.target;
-          const { form } = inputElement;
-          const formSubmitButton = form.querySelector(
-            "button[type='submit'], input[type='submit'], input[type='image']",
-          );
-          e.preventDefault();
-          form.dispatchEvent(
-            new CustomEvent("actionrequested", {
-              detail: {
-                requester: formSubmitButton ? formSubmitButton : inputElement,
-                event: e,
-                meta: { isSubmit: true },
-                actionOrigin: "action_prop",
-              },
-            }),
-          );
-        }
-        onKeyDown?.(e);
-      }}
-    />
-  );
+  return <InputTextualBasic {...rest} ref={ref} />;
 });
 
-const useOnInputChange = (inputRef, callback) => {
-  // we must use a custom event listener because preact bind onChange to onInput for compat with react
-  useEffect(() => {
-    const input = inputRef.current;
-    input.addEventListener("change", callback);
-    return () => {
-      input.removeEventListener("change", callback);
-    };
-  }, [callback]);
-
-  // Handle programmatic value changes that don't trigger browser change events
-  //
-  // Problem: When input values are set programmatically (not by user typing),
-  // browsers don't fire the 'change' event. However, our application logic
-  // still needs to detect these changes.
-  //
-  // Example scenario:
-  // 1. User starts editing (letter key pressed, value set programmatically)
-  // 2. User doesn't type anything additional (this is the key part)
-  // 3. User clicks outside to finish editing
-  // 4. Without this code, no change event would fire despite the fact that the input value did change from its original state
-  //
-  // This distinction is crucial because:
-  //
-  // - If the user typed additional text after the initial programmatic value,
-  //   the browser would fire change events normally
-  // - But when they don't type anything else, the browser considers it as "no user interaction"
-  //   even though the programmatic initial value represents a meaningful change
-  const valueAtStartRef = useRef();
-  const interactedRef = useRef(false);
-  useLayoutEffect(() => {
-    const input = inputRef.current;
-    valueAtStartRef.current = input.value;
-
-    const onfocus = () => {
-      interactedRef.current = false;
-      valueAtStartRef.current = input.value;
-    };
-    const oninput = (e) => {
-      if (!e.isTrusted) {
-        // non trusted "input" events will be ignored by the browser when deciding to fire "change" event
-        // we ignore them too
-        return;
-      }
-      interactedRef.current = true;
-    };
-    const onblur = (e) => {
-      if (interactedRef.current) {
-        return;
-      }
-      if (valueAtStartRef.current === input.value) {
-        return;
-      }
-      callback(e);
-    };
-
-    input.addEventListener("focus", onfocus);
-    input.addEventListener("input", oninput);
-    input.addEventListener("blur", onblur);
-
-    return () => {
-      input.removeEventListener("focus", onfocus);
-      input.removeEventListener("input", oninput);
-      input.removeEventListener("blur", onblur);
-    };
-  }, []);
-};
 // As explained in https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/datetime-local#setting_timezones
 // datetime-local does not support timezones
 const convertToLocalTimezone = (dateTimeString) => {

package/src/components/field/radio_list.jsx

@@ -170,7 +170,6 @@ const RadioListWithAction = forwardRef((props, ref) => {
         requestAction(radioListContainer, boundAction, {
           event: e,
           requester: radio,
-          actionOrigin: "action_prop",
         });
       }}
       loading={loading || actionLoading}

package/src/components/field/select.jsx

@@ -195,7 +195,6 @@ const SelectWithAction = forwardRef((props, ref) => {
         requestAction(radioListContainer, boundAction, {
           event,
           requester: optionSelected,
-          actionOrigin: "action_prop",
         });
       }}
       {...rest}

package/src/components/field/use_form_events.js

@@ -7,6 +7,7 @@ export const useFormEvents = (
   elementRef,
   {
     onFormReset,
+    onFormActionRequested,
     onFormActionPrevented,
     onFormActionStart,
     onFormActionAbort,
@@ -15,6 +16,7 @@ export const useFormEvents = (
   },
 ) => {
   onFormReset = useStableCallback(onFormReset);
+  onFormActionRequested = useStableCallback(onFormActionRequested);
   onFormActionPrevented = useStableCallback(onFormActionPrevented);
   onFormActionStart = useStableCallback(onFormActionStart);
   onFormActionAbort = useStableCallback(onFormActionAbort);
@@ -38,6 +40,7 @@ export const useFormEvents = (
     }
     return addManyEventListeners(form, {
       reset: onFormReset,
+      actionrequested: onFormActionRequested,
       actionprevented: onFormActionPrevented,
       actionstart: onFormActionStart,
       actionabort: onFormActionAbort,
@@ -46,6 +49,7 @@ export const useFormEvents = (
     });
   }, [
     onFormReset,
+    onFormActionRequested,
     onFormActionPrevented,
     onFormActionStart,
     onFormActionAbort,

package/src/components/keyboard_shortcuts/keyboard_shortcuts.js

@@ -165,10 +165,10 @@ export const useKeyboardShortcuts = (
           }
           const { action } = shortcutCandidate;
           return requestAction(element, action, {
+            actionOrigin: "keyboard_shortcut",
             event: keyboardEvent,
             requester: document.activeElement,
             confirmMessage: shortcutCandidate.confirmMessage,
-            actionOrigin: "keyboard_shortcut",
             meta: {
               shortcut: shortcutCandidate,
             },

package/src/validation/constraints/native_constraints.js

@@ -71,10 +71,25 @@ export const REQUIRED_CONSTRAINT = {
           : undefined,
       };
     }
-    if (!element.value) {
-      return requiredMessage || `Veuillez remplir ce champ.`;
+    if (element.value) {
+      return null;
     }
-    return null;
+    if (requiredMessage) {
+      return requiredMessage;
+    }
+    if (element.type === "password") {
+      return element.hasAttribute("data-same-as")
+        ? `Veuillez confirmer le mot de passe.`
+        : `Veuillez saisir un mot de passe.`;
+    }
+    if (element.type === "email") {
+      return element.hasAttribute("data-same-as")
+        ? `Veuillez confirmer l'adresse e-mail`
+        : `Veuillez saisir une adresse e-mail.`;
+    }
+    return element.hasAttribute("data-same-as")
+      ? `Veuillez confirmer le champ précédent`
+      : `Veuillez remplir ce champ.`;
   },
 };
 export const PATTERN_CONSTRAINT = {
@@ -89,19 +104,19 @@ export const PATTERN_CONSTRAINT = {
       return null;
     }
     const regex = new RegExp(pattern);
-    if (!regex.test(value)) {
-      const patternMessage = input.getAttribute("data-pattern-message");
-      if (patternMessage) {
-        return patternMessage;
-      }
-      let message = `Veuillez respecter le format requis.`;
-      const title = input.title;
-      if (title) {
-        message += `<br />${title}`;
-      }
-      return message;
+    if (regex.test(value)) {
+      return null;
     }
-    return null;
+    const patternMessage = input.getAttribute("data-pattern-message");
+    if (patternMessage) {
+      return patternMessage;
+    }
+    let message = `Veuillez respecter le format requis.`;
+    const title = input.title;
+    if (title) {
+      message += `<br />${title}`;
+    }
+    return message;
   },
 };
 // https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/email#validation
@@ -149,10 +164,11 @@ export const MIN_LENGTH_CONSTRAINT = {
       return null;
     }
     if (valueLength < minLength) {
+      const thisField = generateThisFieldText(element);
       if (valueLength === 1) {
-        return `Ce champ doit contenir au moins ${minLength} caractère (il contient actuellement un seul caractère).`;
+        return `${thisField} doit contenir au moins ${minLength} caractère (il contient actuellement un seul caractère).`;
       }
-      return `Ce champ doit contenir au moins ${minLength} caractères (il contient actuellement ${valueLength} caractères).`;
+      return `${thisField} doit contenir au moins ${minLength} caractères (il contient actuellement ${valueLength} caractères).`;
     }
     return null;
   },
@@ -166,6 +182,14 @@ const INPUT_TYPE_SUPPORTING_MIN_LENGTH_SET = new Set([
   "password",
 ]);
 
+const generateThisFieldText = (field) => {
+  return field.type === "password"
+    ? "Ce mot de passe"
+    : field.type === "email"
+      ? "Cette adresse e-mail"
+      : "Ce champ";
+};
+
 export const MAX_LENGTH_CONSTRAINT = {
   name: "max_length",
   check: (element) => {
@@ -185,7 +209,8 @@ export const MAX_LENGTH_CONSTRAINT = {
     const value = element.value;
     const valueLength = value.length;
     if (valueLength > maxLength) {
-      return `Ce champ doit contenir au maximum ${maxLength} caractères (il contient actuellement ${valueLength} caractères).`;
+      const thisField = generateThisFieldText(element);
+      return `${thisField} doit contenir au maximum ${maxLength} caractères (il contient actuellement ${valueLength} caractères).`;
     }
     return null;
   },

package/src/validation/constraints/same_as_constraint.js

@@ -0,0 +1,42 @@
+export const SAME_AS_CONSTRAINT = {
+  name: "same_as",
+  check: (element) => {
+    const sameAs = element.getAttribute("data-same-as");
+    if (!sameAs) {
+      return null;
+    }
+
+    const otherElement = document.querySelector(sameAs);
+    if (!otherElement) {
+      console.warn(
+        `Same as constraint: could not find element for selector ${sameAs}`,
+      );
+      return null;
+    }
+
+    const value = element.value;
+    const otherValue = otherElement.value;
+    if (value === "" || otherValue === "") {
+      // don't validate if one of the two values is empty
+      return null;
+    }
+
+    if (value === otherValue) {
+      return null;
+    }
+
+    const message = element.getAttribute("data-same-as-message");
+    if (message) {
+      return message;
+    }
+
+    const type = element.type;
+    if (type === "password") {
+      return `Ce mot de passe doit être identique au précédent.`;
+    }
+    if (type === "email") {
+      return `Cette adresse e-mail doit être identique a la précédente.`;
+    }
+    return `Ce champ doit être identique au précédent.`;
+  },
+};