@jsenv/navi 0.0.1

package/src/components/input/input_radio.jsx

@@ -0,0 +1,299 @@
+import { useConstraints } from "@jsenv/validation";
+import { forwardRef } from "preact/compat";
+import { useImperativeHandle, useRef, useState } from "preact/hooks";
+import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
+import { LoaderBackground } from "../loader/loader_background.jsx";
+import { useAutoFocus } from "../use_auto_focus.js";
+
+import.meta.css = /* css */ `
+  .custom_radio_wrapper {
+    display: inline-flex;
+    box-sizing: content-box;
+
+    --checked-color: #3b82f6;
+    --checked-disabled-color: var(--field-disabled-border-color);
+
+    --checkmark-color: var(--checked-color);
+    --checkmark-disabled-color: var(--field-disabled-text-color);
+  }
+
+  .custom_radio_wrapper input {
+    position: absolute;
+    opacity: 0;
+    inset: 0;
+    margin: 0;
+    padding: 0;
+    border: none;
+  }
+
+  .custom_radio {
+    width: 13px;
+    height: 13px;
+    background: transparent;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 5px;
+    margin-top: 3px;
+    margin-right: 3px;
+  }
+
+  .custom_radio svg {
+    width: 100%;
+    height: 100%;
+    transition: all 0.15s ease;
+    pointer-events: none;
+  }
+
+  .custom_radio svg .custom_radio_border {
+    transition: all 0.15s ease;
+  }
+
+  .custom_radio svg .custom_radio_dashed_border {
+    display: none;
+    transition: all 0.15s ease;
+  }
+
+  .custom_radio svg .custom_radio_marker {
+    fill: var(--checkmark-color);
+    opacity: 0;
+    transform-origin: center;
+    transform: scale(0.3);
+    transition: all 0.15s ease;
+  }
+
+  /* États hover */
+  .custom_radio_wrapper:hover .custom_radio svg .custom_radio_border {
+    stroke: var(--field-hover-border-color);
+  }
+  .custom_radio_wrapper:hover .custom_radio svg .custom_radio_marker {
+    fill: var(--field-strong-color);
+  }
+
+  .custom_radio_wrapper:hover
+    input:checked
+    + .custom_radio
+    svg
+    .custom_radio_border {
+    stroke: var(--field-strong-color);
+  }
+
+  /* État checked */
+  .custom_radio_wrapper input:checked + .custom_radio svg .custom_radio_border {
+    stroke: var(--field-strong-color);
+  }
+
+  .custom_radio_wrapper input:checked + .custom_radio svg .custom_radio_marker {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  /* États disabled */
+  .custom_radio_wrapper
+    input[disabled]
+    + .custom_radio
+    svg
+    .custom_radio_border {
+    fill: light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
+    stroke: var(--field-disabled-border-color);
+  }
+
+  .custom_radio_wrapper
+    input[disabled]:checked
+    + .custom_radio
+    svg
+    .custom_radio_border {
+    stroke: var(--checked-disabled-color);
+  }
+
+  .custom_radio_wrapper
+    input[disabled]:checked
+    + .custom_radio
+    svg
+    .custom_radio_marker {
+    fill: var(--checkmark-disabled-color);
+  }
+
+  .custom_radio_wrapper
+    input[data-readonly]
+    + .custom_radio
+    svg
+    .custom_radio_border {
+    fill: light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
+    stroke: var(--field-disabled-border-color);
+  }
+  .custom_radio_wrapper
+    input[data-readonly]
+    + .custom_radio
+    svg
+    .custom_radio_dashed_border {
+    display: none;
+  }
+  .custom_radio_wrapper
+    input[data-readonly]:checked
+    + .custom_radio
+    svg
+    .custom_radio_border {
+    stroke: var(--checked-disabled-color);
+  }
+  .custom_radio_wrapper
+    input[data-readonly]:checked
+    + .custom_radio
+    svg
+    .custom_radio_marker {
+    fill: var(--checkmark-disabled-color);
+  }
+  .custom_radio_wrapper:hover
+    input[data-readonly]
+    + .custom_radio
+    svg
+    .custom_radio_border {
+    fill: light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
+    stroke: var(--field-disabled-border-color);
+  }
+  .custom_radio_wrapper:hover
+    input[data-readonly]:checked
+    + .custom_radio
+    svg
+    .custom_radio_border {
+    stroke: var(--checked-disabled-color);
+  }
+
+  /* Focus state avec outline */
+  .custom_radio_wrapper input:focus-visible + .custom_radio {
+    outline: 2px solid var(--field-outline-color);
+    outline-offset: 1px;
+    border-radius: 50%;
+  }
+`;
+
+export const InputRadio = forwardRef((props, ref) => {
+  return renderActionableComponent(props, ref, {
+    Basic: InputRadioBasic,
+    WithAction: InputRadioWithAction,
+    InsideForm: InputRadioInsideForm,
+  });
+});
+
+const InputRadioBasic = forwardRef((props, ref) => {
+  const {
+    autoFocus,
+    constraints = [],
+    checked,
+    readOnly,
+    disabled,
+    loading,
+    onClick,
+    onChange,
+    appeareance = "custom", // "custom" or "default"
+    ...rest
+  } = props;
+
+  const innerRef = useRef(null);
+  useImperativeHandle(ref, () => innerRef.current);
+  useAutoFocus(innerRef, autoFocus);
+  useConstraints(innerRef, constraints);
+
+  const [innerChecked, setInnerChecked] = useState(checked);
+  const checkedRef = useRef(checked);
+  if (checkedRef.current !== checked) {
+    setInnerChecked(checked);
+    checkedRef.current = checked;
+  }
+
+  const handleChange = (e) => {
+    const isChecked = e.target.checked;
+    setInnerChecked(isChecked);
+    onChange?.(e);
+  };
+
+  const inputRadio = (
+    <input
+      ref={innerRef}
+      type="radio"
+      checked={innerChecked}
+      data-readonly={readOnly && !disabled ? "" : undefined}
+      disabled={disabled}
+      data-validation-message-arrow-x="center"
+      onClick={(e) => {
+        if (readOnly) {
+          e.preventDefault();
+        }
+        onClick?.(e);
+      }}
+      onChange={handleChange}
+      {...rest}
+    />
+  );
+  const inputRadioDisplayed =
+    appeareance === "custom" ? (
+      <CustomRadio>{inputRadio}</CustomRadio>
+    ) : (
+      inputRadio
+    );
+
+  const inputRadioWithLoader = (
+    <LoaderBackground
+      loading={loading}
+      targetSelector={appeareance === "custom" ? ".custom_radio" : ""}
+      inset={-2}
+      color="light-dark(#355fcc, #3b82f6)"
+    >
+      {inputRadioDisplayed}
+    </LoaderBackground>
+  );
+
+  return inputRadioWithLoader;
+});
+const CustomRadio = ({ children }) => {
+  return (
+    <div className="custom_radio_wrapper" data-field-wrapper="">
+      {children}
+      <div className="custom_radio">
+        <svg
+          viewBox="0 0 12 12"
+          aria-hidden="true"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          {/* Border circle - always visible */}
+          <circle
+            className="custom_radio_border"
+            cx="6"
+            cy="6"
+            r="5.5"
+            fill="white"
+            stroke="var(--field-border-color)"
+            strokeWidth="1"
+          />
+          {/* Dashed border for readonly - calculated for even distribution */}
+          <circle
+            className="custom_radio_dashed_border"
+            cx="6"
+            cy="6"
+            r="5.5"
+            fill="var(--field-readonly-background-color)"
+            stroke="var(--field-border-color)"
+            strokeWidth="1"
+            strokeDasharray="2.16 2.16"
+            strokeDashoffset="0"
+          />
+          {/* Inner fill circle - only visible when checked */}
+          <circle className="custom_radio_marker" cx="6" cy="6" r="3.5" />
+        </svg>
+      </div>
+    </div>
+  );
+};
+
+const InputRadioWithAction = () => {
+  throw new Error(
+    `Do not use <Input type="radio" />, use <RadioList /> instead`,
+  );
+};
+
+const InputRadioInsideForm = () => {
+  throw new Error(
+    `Do not use <Input type="radio" />, use <RadioList /> instead`,
+  );
+};

package/src/components/input/input_textual.jsx

@@ -0,0 +1,338 @@
+/**
+ * Input component for all textual input types.
+ *
+ * Supports:
+ * - text (default)
+ * - password
+ * - hidden
+ * - email
+ * - url
+ * - search
+ * - tel
+ * - etc.
+ *
+ * For non-textual inputs, specialized components will be used:
+ * - <InputCheckbox /> for type="checkbox"
+ * - <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 { useActionStatus } from "../../use_action_status.js";
+import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
+import {
+  useActionBoundToOneParam,
+  useOneFormParam,
+} 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 { useAutoFocus } from "../use_auto_focus.js";
+import "./field_css.js";
+import { useOnChange } from "./use_on_change.js";
+
+export const InputTextual = forwardRef((props, ref) => {
+  return renderActionableComponent(props, ref, {
+    Basic: InputTextualBasic,
+    WithAction: InputTextualWithAction,
+    InsideForm: InputTextualInsideForm,
+  });
+});
+
+const InputTextualBasic = forwardRef((props, ref) => {
+  let {
+    type,
+    value,
+    autoFocus,
+    autoFocusVisible,
+    autoSelect,
+    constraints = [],
+    loading,
+    appearance = "custom",
+    ...rest
+  } = props;
+
+  const innerRef = useRef();
+  useImperativeHandle(ref, () => innerRef.current);
+  useAutoFocus(innerRef, autoFocus, {
+    autoFocusVisible,
+    autoSelect,
+  });
+  useConstraints(innerRef, constraints);
+
+  if (type === "datetime-local") {
+    value = convertToLocalTimezone(value);
+  }
+
+  const inputTextual = (
+    <input
+      ref={innerRef}
+      type={type}
+      value={value}
+      data-field=""
+      data-field-with-border=""
+      data-custom={appearance === "custom" ? "" : undefined}
+      {...rest}
+    />
+  );
+
+  return (
+    <LoaderBackground loading={loading} color="light-dark(#355fcc, #3b82f6)">
+      {inputTextual}
+    </LoaderBackground>
+  );
+});
+
+// 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 {
+    id,
+    type,
+    action,
+    name,
+    value: externalValue,
+    valueSignal,
+    cancelOnBlurInvalid,
+    cancelOnEscape,
+    actionErrorEffect,
+    readOnly,
+    loading,
+    onInput,
+    onCancel,
+    onActionPrevented,
+    onActionStart,
+    onActionError,
+    onActionEnd,
+    ...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 { loading: actionLoading } = useActionStatus(boundAction);
+  const executeAction = useExecuteAction(innerRef, {
+    errorEffect: actionErrorEffect,
+  });
+  useEffect(() => {
+    setNavState(value);
+  }, [value]);
+
+  const valueAtInteractionRef = useRef(null);
+  useOnChange(innerRef, (e) => {
+    if (
+      valueAtInteractionRef.current !== null &&
+      e.target.value === valueAtInteractionRef.current
+    ) {
+      valueAtInteractionRef.current = null;
+      return;
+    }
+    requestAction(boundAction, { event: e });
+  });
+
+  useActionEvents(innerRef, {
+    onCancel: (e, reason) => {
+      if (reason.startsWith("blur_invalid")) {
+        if (!cancelOnBlurInvalid) {
+          return;
+        }
+        if (
+          // error prevent cancellation until the user closes it (or something closes it)
+          e.detail.failedConstraintInfo.level === "error" &&
+          e.detail.failedConstraintInfo.reportStatus !== "closed"
+        ) {
+          return;
+        }
+      }
+      if (reason === "escape_key") {
+        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;
+      }
+      resetValue();
+      onCancel?.(e, reason);
+    },
+    onPrevented: onActionPrevented,
+    onAction: executeAction,
+    onStart: onActionStart,
+    onError: onActionError,
+    onEnd: (e) => {
+      setNavState(undefined);
+      onActionEnd?.(e);
+    },
+  });
+
+  const innerLoading = loading || actionLoading;
+
+  return (
+    <InputTextualBasic
+      {...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}
+      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) => {
+        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(boundAction, { event: 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]);
+
+  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);
+      }}
+      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();
+          requestAction(formAction, {
+            event: e,
+            target: form,
+            requester: formSubmitButton ? formSubmitButton : inputElement,
+          });
+        }
+        onKeyDown?.(e);
+      }}
+    />
+  );
+});