@jsenv/navi 0.0.1 → 0.1.0

package/src/components/{input → field}/input_textual.jsx

@@ -16,173 +16,170 @@
  * - <InputRadio /> for type="radio"
  */
 
-import { requestAction, useConstraints } from "@jsenv/validation";
 import { forwardRef } from "preact/compat";
-import { useEffect, useImperativeHandle, useRef } from "preact/hooks";
-import { useNavState } from "../../browser_integration/browser_integration.js";
+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 { useConstraints } from "../../validation/hooks/use_constraints.js";
 import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
-import {
-  useActionBoundToOneParam,
-  useOneFormParam,
-} from "../action_execution/use_action.js";
+import { useActionBoundToOneParam } from "../action_execution/use_action.js";
 import { useExecuteAction } from "../action_execution/use_execute_action.js";
-import { LoaderBackground } from "../loader/loader_background.jsx";
-import { useActionEvents } from "../use_action_events.js";
+import { LoadableInlineElement } from "../loader/loader_background.jsx";
 import { useAutoFocus } from "../use_auto_focus.js";
 import "./field_css.js";
-import { useOnChange } from "./use_on_change.js";
+import { ReportReadOnlyOnLabelContext } from "./label.jsx";
+import { useActionEvents } from "./use_action_events.js";
+import {
+  DisabledContext,
+  LoadingContext,
+  LoadingElementContext,
+  ReadOnlyContext,
+  UIStateContext,
+  UIStateControllerContext,
+  useUIState,
+  useUIStateController,
+} from "./use_ui_state_controller.js";
 
 export const InputTextual = forwardRef((props, ref) => {
-  return renderActionableComponent(props, ref, {
+  const uiStateController = useUIStateController(props, "input");
+  const uiState = useUIState(uiStateController);
+
+  const input = renderActionableComponent(props, ref, {
     Basic: InputTextualBasic,
     WithAction: InputTextualWithAction,
     InsideForm: InputTextualInsideForm,
   });
+  return (
+    <UIStateControllerContext.Provider value={uiStateController}>
+      <UIStateContext.Provider value={uiState}>{input}</UIStateContext.Provider>
+    </UIStateControllerContext.Provider>
+  );
 });
 
 const InputTextualBasic = forwardRef((props, ref) => {
-  let {
+  const contextReadOnly = useContext(ReadOnlyContext);
+  const contextDisabled = useContext(DisabledContext);
+  const contextLoading = useContext(LoadingContext);
+  const contextLoadingElement = useContext(LoadingElementContext);
+  const reportReadOnlyOnLabel = useContext(ReportReadOnlyOnLabelContext);
+  const uiStateController = useContext(UIStateControllerContext);
+  const uiState = useContext(UIStateContext);
+  const {
     type,
-    value,
+    onInput,
+
+    readOnly,
+    disabled,
+    constraints = [],
+    loading,
+
     autoFocus,
     autoFocusVisible,
     autoSelect,
-    constraints = [],
-    loading,
     appearance = "custom",
+    width,
+    height,
     ...rest
   } = props;
-
   const innerRef = useRef();
   useImperativeHandle(ref, () => innerRef.current);
+
+  const innerValue =
+    type === "datetime-local" ? convertToLocalTimezone(uiState) : uiState;
+  const innerLoading =
+    loading || (contextLoading && contextLoadingElement === innerRef.current);
+  const innerReadOnly =
+    readOnly || contextReadOnly || innerLoading || uiStateController.readOnly;
+  const innerDisabled = disabled || contextDisabled;
+  // infom any <label> parent of our readOnly state
+  reportReadOnlyOnLabel?.(innerReadOnly);
   useAutoFocus(innerRef, autoFocus, {
     autoFocusVisible,
     autoSelect,
   });
   useConstraints(innerRef, constraints);
 
-  if (type === "datetime-local") {
-    value = convertToLocalTimezone(value);
-  }
-
   const inputTextual = (
     <input
+      {...rest}
       ref={innerRef}
       type={type}
-      value={value}
+      data-value={uiState}
+      value={innerValue}
       data-field=""
       data-field-with-border=""
       data-custom={appearance === "custom" ? "" : undefined}
-      {...rest}
+      readOnly={innerReadOnly}
+      disabled={innerDisabled}
+      onInput={(e) => {
+        let inputValue;
+        if (type === "number") {
+          inputValue = e.target.valueAsNumber;
+        } else if (type === "datetime-local") {
+          inputValue = convertToUTCTimezone(e.target.value);
+        } else {
+          inputValue = e.target.value;
+        }
+        uiStateController.setUIState(inputValue, e);
+        onInput?.(e);
+      }}
+      // eslint-disable-next-line react/no-unknown-property
+      onresetuistate={(e) => {
+        uiStateController.resetUIState(e);
+      }}
+      // eslint-disable-next-line react/no-unknown-property
+      onsetuistate={(e) => {
+        uiStateController.setUIState(e.detail.value, e);
+      }}
     />
   );
 
   return (
-    <LoaderBackground loading={loading} color="light-dark(#355fcc, #3b82f6)">
+    <LoadableInlineElement
+      loading={innerLoading}
+      color="light-dark(#355fcc, #3b82f6)"
+      width={width}
+      height={height}
+    >
       {inputTextual}
-    </LoaderBackground>
+    </LoadableInlineElement>
   );
 });
 
-// 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) => {
-  const date = new Date(dateTimeString);
-  // Check if the date is valid
-  if (isNaN(date.getTime())) {
-    return dateTimeString;
-  }
-
-  // Format to YYYY-MM-DDThh:mm:ss
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const day = String(date.getDate()).padStart(2, "0");
-  const hours = String(date.getHours()).padStart(2, "0");
-  const minutes = String(date.getMinutes()).padStart(2, "0");
-  const seconds = String(date.getSeconds()).padStart(2, "0");
-
-  return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
-};
-
-/**
- * Converts a datetime string without timezone (local time) to UTC format with 'Z' notation
- *
- * @param {string} localDateTimeString - Local datetime string without timezone (e.g., "2023-07-15T14:30:00")
- * @returns {string} Datetime string in UTC with 'Z' notation (e.g., "2023-07-15T12:30:00Z")
- */
-const convertToUTCTimezone = (localDateTimeString) => {
-  if (!localDateTimeString) {
-    return localDateTimeString;
-  }
-
-  try {
-    // Create a Date object using the local time string
-    // The browser will interpret this as local timezone
-    const localDate = new Date(localDateTimeString);
-
-    // Check if the date is valid
-    if (isNaN(localDate.getTime())) {
-      return localDateTimeString;
-    }
-
-    // Convert to UTC ISO string
-    const utcString = localDate.toISOString();
-
-    // Return the UTC string (which includes the 'Z' notation)
-    return utcString;
-  } catch (error) {
-    console.error("Error converting local datetime to UTC:", error);
-    return localDateTimeString;
-  }
-};
-
 const InputTextualWithAction = forwardRef((props, ref) => {
+  const uiState = useContext(UIStateContext);
   const {
-    id,
-    type,
     action,
-    name,
-    value: externalValue,
-    valueSignal,
-    cancelOnBlurInvalid,
-    cancelOnEscape,
-    actionErrorEffect,
-    readOnly,
     loading,
-    onInput,
     onCancel,
     onActionPrevented,
     onActionStart,
     onActionError,
     onActionEnd,
+    cancelOnBlurInvalid,
+    cancelOnEscape,
+    actionErrorEffect,
+    onInput,
+    onKeyDown,
     ...rest
   } = props;
-  if (import.meta.dev && !name && !valueSignal) {
-    console.warn(`InputTextual with action requires a name prop to be set.`);
-  }
-
   const innerRef = useRef(null);
   useImperativeHandle(ref, () => innerRef.current);
-
-  const [navState, setNavState] = useNavState(id);
-  const [boundAction, value, setValue, resetValue] = useActionBoundToOneParam(
-    action,
-    name,
-    valueSignal ? valueSignal : externalValue,
-    navState,
-    "",
-  );
+  const [boundAction] = useActionBoundToOneParam(action, uiState);
   const { loading: actionLoading } = useActionStatus(boundAction);
   const executeAction = useExecuteAction(innerRef, {
     errorEffect: actionErrorEffect,
   });
-  useEffect(() => {
-    setNavState(value);
-  }, [value]);
-
   const valueAtInteractionRef = useRef(null);
-  useOnChange(innerRef, (e) => {
+
+  useOnInputChange(innerRef, (e) => {
     if (
       valueAtInteractionRef.current !== null &&
       e.target.value === valueAtInteractionRef.current
@@ -190,9 +187,15 @@ const InputTextualWithAction = forwardRef((props, ref) => {
       valueAtInteractionRef.current = null;
       return;
     }
-    requestAction(boundAction, { event: e });
+    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
+  // to update ui state or retry via blur/enter as is
   useActionEvents(innerRef, {
     onCancel: (e, reason) => {
       if (reason.startsWith("blur_invalid")) {
@@ -219,44 +222,23 @@ const InputTextualWithAction = forwardRef((props, ref) => {
          */
         valueAtInteractionRef.current = e.target.value;
       }
-      resetValue();
       onCancel?.(e, reason);
     },
     onPrevented: onActionPrevented,
     onAction: executeAction,
     onStart: onActionStart,
     onError: onActionError,
-    onEnd: (e) => {
-      setNavState(undefined);
-      onActionEnd?.(e);
-    },
+    onEnd: onActionEnd,
   });
 
-  const innerLoading = loading || actionLoading;
-
   return (
     <InputTextualBasic
+      data-action={boundAction.name}
       {...rest}
-      data-action={boundAction}
       ref={innerRef}
-      type={type}
-      id={id}
-      name={name}
-      value={value}
-      data-form-value={
-        type === "datetime-local" ? convertToUTCTimezone(value) : undefined
-      }
-      loading={innerLoading}
-      readOnly={readOnly || innerLoading}
+      loading={loading || actionLoading}
       onInput={(e) => {
         valueAtInteractionRef.current = null;
-        const inputValue =
-          type === "number" ? e.target.valueAsNumber : e.target.value;
-        setValue(
-          type === "datetime-local"
-            ? convertToUTCTimezone(inputValue)
-            : inputValue,
-        );
         onInput?.(e);
       }}
       onKeyDown={(e) => {
@@ -270,53 +252,22 @@ const InputTextualWithAction = forwardRef((props, ref) => {
          * We need to prevent the next change event otherwise we would request action twice
          */
         valueAtInteractionRef.current = e.target.value;
-        requestAction(boundAction, { event: e });
+        requestAction(e.target, boundAction, {
+          event: e,
+          actionOrigin: "action_prop",
+        });
+        onKeyDown?.(e);
       }}
     />
   );
 });
-
 const InputTextualInsideForm = forwardRef((props, ref) => {
-  const {
-    formContext,
-    id,
-    name,
-    value: externalValue,
-    loading,
-    readOnly,
-    onInput,
-    onKeyDown,
-    ...rest
-  } = props;
-
-  const innerRef = useRef(null);
-  useImperativeHandle(ref, () => innerRef.current);
-
-  const [navState, setNavState] = useNavState(id);
-  const { formAction, formIsBusy, formIsReadOnly, formActionRequester } =
-    formContext;
-  const [value, setValue] = useOneFormParam(name, externalValue, navState, "");
-  useEffect(() => {
-    setNavState(value);
-  }, [value]);
+  const { onKeyDown, ...rest } = props;
 
   return (
     <InputTextualBasic
       {...rest}
-      ref={innerRef}
-      id={id}
-      name={name}
-      value={value}
-      data-form-value={convertToUTCTimezone(value)}
-      loading={
-        loading || (formIsBusy && formActionRequester === innerRef.current)
-      }
-      readOnly={readOnly || formIsReadOnly}
-      onInput={(e) => {
-        const inputValue = e.target.value;
-        setValue(convertToUTCTimezone(inputValue));
-        onInput?.(e);
-      }}
+      ref={ref}
       onKeyDown={(e) => {
         if (e.key === "Enter") {
           const inputElement = e.target;
@@ -325,14 +276,137 @@ const InputTextualInsideForm = forwardRef((props, ref) => {
             "button[type='submit'], input[type='submit'], input[type='image']",
           );
           e.preventDefault();
-          requestAction(formAction, {
-            event: e,
-            target: form,
-            requester: formSubmitButton ? formSubmitButton : inputElement,
-          });
+          form.dispatchEvent(
+            new CustomEvent("actionrequested", {
+              detail: {
+                requester: formSubmitButton ? formSubmitButton : inputElement,
+                event: e,
+                meta: { isSubmit: true },
+                actionOrigin: "action_prop",
+              },
+            }),
+          );
         }
         onKeyDown?.(e);
       }}
     />
   );
 });
+
+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) => {
+  const date = new Date(dateTimeString);
+  // Check if the date is valid
+  if (isNaN(date.getTime())) {
+    return dateTimeString;
+  }
+
+  // Format to YYYY-MM-DDThh:mm:ss
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  const seconds = String(date.getSeconds()).padStart(2, "0");
+
+  return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
+};
+/**
+ * Converts a datetime string without timezone (local time) to UTC format with 'Z' notation
+ *
+ * @param {string} localDateTimeString - Local datetime string without timezone (e.g., "2023-07-15T14:30:00")
+ * @returns {string} Datetime string in UTC with 'Z' notation (e.g., "2023-07-15T12:30:00Z")
+ */
+const convertToUTCTimezone = (localDateTimeString) => {
+  if (!localDateTimeString) {
+    return localDateTimeString;
+  }
+
+  try {
+    // Create a Date object using the local time string
+    // The browser will interpret this as local timezone
+    const localDate = new Date(localDateTimeString);
+
+    // Check if the date is valid
+    if (isNaN(localDate.getTime())) {
+      return localDateTimeString;
+    }
+
+    // Convert to UTC ISO string
+    const utcString = localDate.toISOString();
+
+    // Return the UTC string (which includes the 'Z' notation)
+    return utcString;
+  } catch (error) {
+    console.error("Error converting local datetime to UTC:", error);
+    return localDateTimeString;
+  }
+};

package/src/components/field/label.jsx

@@ -0,0 +1,32 @@
+import { createContext } from "preact";
+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);
+  }
+`;
+
+export const ReportReadOnlyOnLabelContext = createContext();
+
+export const Label = forwardRef((props, ref) => {
+  const { readOnly, children, ...rest } = props;
+  const innerRef = useRef();
+  useImperativeHandle(ref, () => innerRef.current);
+
+  const [inputReadOnly, setInputReadOnly] = useState(false);
+  const innerReadOnly = readOnly || inputReadOnly;
+
+  return (
+    <label
+      ref={innerRef}
+      data-readonly={innerReadOnly ? "" : undefined}
+      {...rest}
+    >
+      <ReportReadOnlyOnLabelContext.Provider value={setInputReadOnly}>
+        {children}
+      </ReportReadOnlyOnLabelContext.Provider>
+    </label>
+  );
+});