@jsenv/navi 0.9.2 → 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.2",
+  "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

@@ -37,7 +37,6 @@ const SelectControlled = forwardRef((props, ref) => {
     <select
       className="navi_select"
       ref={innerRef}
-      data-field=""
       data-readonly={readOnly && !disabled ? "" : undefined}
       onKeyDown={(e) => {
         if (readOnly) {
@@ -196,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/components/link/link.jsx

@@ -20,6 +20,7 @@ import {
   SelectionContext,
   useSelectableElement,
 } from "../selection/selection.jsx";
+import { useTypographyStyle } from "../text/text.jsx";
 import { useAutoFocus } from "../use_auto_focus.js";
 
 /*
@@ -35,45 +36,40 @@ import.meta.css = /* css */ `
   .navi_link {
     border-radius: 2px;
   }
-
+  /* Focus */
   .navi_link:focus {
     position: relative;
     z-index: 1; /* Ensure focus outline is above other elements */
   }
-
-  .navi_link[data-readonly] > *,
-  .navi_link[inert] > * {
-    opacity: 0.5;
-  }
-
-  .navi_link[inert] {
-    pointer-events: none;
+  /* Visited */
+  .navi_link[data-visited] {
+    color: light-dark(#6a1b9a, #ab47bc);
   }
-
+  /* Selected */
   .navi_link[aria-selected] {
     position: relative;
   }
-
+  .navi_link[aria-selected="true"] {
+    background-color: light-dark(#bbdefb, #2563eb);
+  }
   .navi_link[aria-selected] input[type="checkbox"] {
     position: absolute;
     opacity: 0;
   }
-
-  /* Visual feedback for selected state */
-  .navi_link[aria-selected="true"] {
-    background-color: light-dark(#bbdefb, #2563eb);
-  }
-
+  /* Active */
   .navi_link[data-active] {
     font-weight: bold;
   }
-
-  .navi_link[data-visited] {
-    color: light-dark(#6a1b9a, #ab47bc);
+  /* Readonly */
+  .navi_link[data-readonly] > * {
+    opacity: 0.5;
   }
-
-  .navi_link[data-no-text-decoration] {
-    text-decoration: none;
+  /* Disabled */
+  .navi_link[inert] {
+    pointer-events: none;
+  }
+  .navi_link[inert] > * {
+    opacity: 0.5;
   }
 `;
 
@@ -122,7 +118,13 @@ const LinkPlain = forwardRef((props, ref) => {
 
   const innerClassName = withPropsClassName("navi_link", className);
   const { all } = useLayoutStyle(rest);
-  const innerStyle = withPropsStyle(all, style);
+  const innerStyle = withPropsStyle(
+    {
+      ...all,
+      ...useTypographyStyle(rest),
+    },
+    style,
+  );
 
   return (
     <LoadableInlineElement
@@ -137,7 +139,7 @@ const LinkPlain = forwardRef((props, ref) => {
         style={innerStyle}
         aria-busy={loading}
         inert={disabled}
-        data-field=""
+        data-disabled={disabled ? "" : undefined}
         data-readonly={readOnly ? "" : undefined}
         data-active={active ? "" : undefined}
         data-visited={visited || isVisited ? "" : undefined}