@jsenv/navi 0.0.1 → 0.1.1

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

@@ -1,21 +1,31 @@
-import { requestAction, useConstraints } from "@jsenv/validation";
 import { forwardRef } from "preact/compat";
-import { useEffect, useImperativeHandle, useRef, useState } from "preact/hooks";
-import { useNavState } from "../../browser_integration/browser_integration.js";
+import { useContext, useImperativeHandle, 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 { useFormEvents } from "./use_form_event.js";
+import { ReportReadOnlyOnLabelContext } from "./label.jsx";
+import { useActionEvents } from "./use_action_events.js";
+import {
+  DisabledContext,
+  FieldNameContext,
+  LoadingContext,
+  LoadingElementContext,
+  ReadOnlyContext,
+  RequiredContext,
+  UIStateContext,
+  UIStateControllerContext,
+  useUIState,
+  useUIStateController,
+} from "./use_ui_state_controller.js";
 
 import.meta.css = /* css */ `
-  .custom_checkbox_wrapper {
+  .custom_checkbox_wrapper[data-field-wrapper] {
     display: inline-flex;
     box-sizing: content-box;
 
@@ -23,6 +33,9 @@ import.meta.css = /* css */ `
     --checkmark-disabled-color: #eeeeee;
     --checked-color: #3b82f6;
     --checked-disabled-color: #d3d3d3;
+
+    /* TODO: find a better way maybe? */
+    --field-strong-color: var(--checked-color);
   }
 
   .custom_checkbox_wrapper input {
@@ -72,16 +85,16 @@ import.meta.css = /* css */ `
   }
 
   .custom_checkbox_wrapper input[data-readonly] + .custom_checkbox {
-    background-color: var(--field-disabled-background-color);
-    border-color: var(--field-disabled-border-color);
+    background-color: var(--field-readonly-background-color);
+    border-color: var(--field-readonly-border-color);
   }
   .custom_checkbox_wrapper input[data-readonly]:checked + .custom_checkbox {
     background: var(--checked-disabled-color);
     border-color: var(--checked-disabled-color);
   }
   .custom_checkbox_wrapper:hover input[data-readonly] + .custom_checkbox {
-    background-color: var(--field-disabled-background-color);
-    border-color: var(--field-disabled-border-color);
+    background-color: var(--field-readonly-background-color);
+    border-color: var(--field-readonly-border-color);
   }
   .custom_checkbox_wrapper:hover
     input[data-readonly]:checked
@@ -118,89 +131,137 @@ import.meta.css = /* css */ `
 `;
 
 export const InputCheckbox = forwardRef((props, ref) => {
-  return renderActionableComponent(props, ref, {
+  const { value = "on" } = props;
+  const uiStateController = useUIStateController(props, "checkbox", {
+    statePropName: "checked",
+    defaultStatePropName: "defaultChecked",
+    fallbackState: false,
+    getStateFromProp: (checked) => (checked ? value : undefined),
+    getPropFromState: Boolean,
+  });
+  const uiState = useUIState(uiStateController);
+
+  const checkbox = renderActionableComponent(props, ref, {
     Basic: InputCheckboxBasic,
     WithAction: InputCheckboxWithAction,
     InsideForm: InputCheckboxInsideForm,
   });
+  return (
+    <UIStateControllerContext.Provider value={uiStateController}>
+      <UIStateContext.Provider value={uiState}>
+        {checkbox}
+      </UIStateContext.Provider>
+    </UIStateControllerContext.Provider>
+  );
 });
 
 const InputCheckboxBasic = forwardRef((props, ref) => {
+  const contextFieldName = useContext(FieldNameContext);
+  const contextReadOnly = useContext(ReadOnlyContext);
+  const contextDisabled = useContext(DisabledContext);
+  const contextRequired = useContext(RequiredContext);
+  const contextLoading = useContext(LoadingContext);
+  const loadingElement = useContext(LoadingElementContext);
+  const uiStateController = useContext(UIStateControllerContext);
+  const uiState = useContext(UIStateContext);
+  const reportReadOnlyOnLabel = useContext(ReportReadOnlyOnLabelContext);
   const {
-    autoFocus,
-    constraints = [],
-    value = "on",
-    checked,
-    loading,
+    name,
     readOnly,
     disabled,
-    onClick,
-    onChange,
+    required,
+    loading,
+
+    autoFocus,
+    constraints = [],
     appeareance = "custom", // "custom" or "default"
+    accentColor,
+    onClick,
+    onInput,
     ...rest
   } = props;
-
-  const innerRef = useRef();
+  const innerRef = useRef(null);
   useImperativeHandle(ref, () => innerRef.current);
+
+  const innerName = name || contextFieldName;
+  const innerDisabled = disabled || contextDisabled;
+  const innerRequired = required || contextRequired;
+  const innerLoading =
+    loading || (contextLoading && loadingElement === innerRef.current);
+  const innerReadOnly =
+    readOnly || contextReadOnly || innerLoading || uiStateController.readOnly;
+  reportReadOnlyOnLabel?.(innerReadOnly);
   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 checked = Boolean(uiState);
+  const actionName = rest["data-action"];
+  if (actionName) {
+    delete rest["data-action"];
   }
-
-  const handleChange = (e) => {
-    const isChecked = e.target.checked;
-    setInnerChecked(isChecked);
-    onChange?.(e);
-  };
-
   const inputCheckbox = (
     <input
+      {...rest}
       ref={innerRef}
       type="checkbox"
-      value={value}
-      checked={innerChecked}
-      data-readonly={readOnly && !disabled ? "" : undefined}
+      name={innerName}
+      checked={checked}
+      data-readonly={innerReadOnly ? "" : undefined}
+      readOnly={innerReadOnly}
+      disabled={innerDisabled}
+      required={innerRequired}
       data-validation-message-arrow-x="center"
-      disabled={disabled}
       onClick={(e) => {
-        if (readOnly) {
+        if (innerReadOnly) {
           e.preventDefault();
         }
         onClick?.(e);
       }}
-      onChange={handleChange}
-      {...rest}
+      onInput={(e) => {
+        const checkbox = e.target;
+        const checkboxIsChecked = checkbox.checked;
+        uiStateController.setUIState(checkboxIsChecked, 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);
+      }}
     />
   );
 
   const inputCheckboxDisplayed =
     appeareance === "custom" ? (
-      <CustomCheckbox>{inputCheckbox}</CustomCheckbox>
+      <CustomCheckbox accentColor={accentColor}>{inputCheckbox}</CustomCheckbox>
     ) : (
       inputCheckbox
     );
 
-  const inputCheckboxWithLoader = (
-    <LoaderBackground
-      loading={loading}
+  return (
+    <LoadableInlineElement
+      data-action={actionName}
+      loading={innerLoading}
       inset={-1}
       targetSelector={appeareance === "custom" ? ".custom_checkbox" : ""}
       color="light-dark(#355fcc, #3b82f6)"
     >
       {inputCheckboxDisplayed}
-    </LoaderBackground>
+    </LoadableInlineElement>
   );
-
-  return inputCheckboxWithLoader;
 });
-const CustomCheckbox = ({ children }) => {
+const CustomCheckbox = ({ accentColor, children }) => {
   return (
-    <div className="custom_checkbox_wrapper" data-field-wrapper="">
+    <div
+      className="custom_checkbox_wrapper"
+      data-field-wrapper=""
+      style={{
+        ...(accentColor ? { "--checked-color": accentColor } : {}),
+      }}
+    >
       {children}
       <div className="custom_checkbox">
         <svg viewBox="0 0 12 12" aria-hidden="true">
@@ -217,15 +278,10 @@ const CustomCheckbox = ({ children }) => {
 };
 
 const InputCheckboxWithAction = forwardRef((props, ref) => {
+  const uiStateController = useContext(UIStateControllerContext);
+  const uiState = useContext(UIStateContext);
   const {
-    id,
-    name,
-    value = "on",
-    checked: checkedExternal,
-    valueSignal,
     action,
-    readOnly,
-    loading,
     onCancel,
     onChange,
     actionErrorEffect,
@@ -234,137 +290,58 @@ const InputCheckboxWithAction = forwardRef((props, ref) => {
     onActionAbort,
     onActionError,
     onActionEnd,
+    loading,
     ...rest
   } = props;
-  if (import.meta.dev && !name && !valueSignal) {
-    console.warn(`InputCheckboxWithAction requires a name prop to be set.`);
-  }
-
   const innerRef = useRef(null);
   useImperativeHandle(ref, () => innerRef.current);
-
-  const [navState, setNavState] = useNavState(id);
-  const [boundAction, checkedValue, setCheckedValue, resetCheckedValue] =
-    useActionBoundToOneParam(
-      action,
-      name,
-      valueSignal ? valueSignal : checkedExternal ? value : undefined,
-      navState ? value : undefined,
-    );
-  const checked = checkedValue === value;
-  useEffect(() => {
-    if (checkedExternal) {
-      setNavState(checked ? false : undefined);
-    } else {
-      setNavState(checked ? true : undefined);
-    }
-  }, [checkedExternal, checked]);
-  const { loading: actionLoading } = useActionStatus(boundAction);
+  const [actionBoundToUIState] = useActionBoundToOneParam(action, uiState);
+  const { loading: actionLoading } = useActionStatus(actionBoundToUIState);
   const executeAction = useExecuteAction(innerRef, {
     errorEffect: actionErrorEffect,
   });
-  const innerLoading = loading || actionLoading;
 
+  // In this situation updating the ui state === calling associated action
+  // so cance/abort/error have to revert the ui state to the one before user interaction
+  // to show back the real state of the checkbox (not the one user tried to set)
   useActionEvents(innerRef, {
     onCancel: (e, reason) => {
       if (reason === "blur_invalid") {
         return;
       }
-      setNavState(undefined);
-      resetCheckedValue();
+      uiStateController.resetUIState(e);
       onCancel?.(e, reason);
     },
     onPrevented: onActionPrevented,
     onAction: executeAction,
     onStart: onActionStart,
     onAbort: (e) => {
-      resetCheckedValue();
+      uiStateController.resetUIState(e);
       onActionAbort?.(e);
     },
     onError: (e) => {
-      resetCheckedValue();
+      uiStateController.resetUIState(e);
       onActionError?.(e);
     },
     onEnd: (e) => {
-      setNavState(undefined);
       onActionEnd?.(e);
     },
   });
 
   return (
     <InputCheckboxBasic
+      data-action={actionBoundToUIState.name}
       {...rest}
       ref={innerRef}
-      id={id}
-      name={name}
-      value={value}
-      checked={checked}
-      data-action={boundAction}
-      loading={innerLoading}
-      readOnly={readOnly || innerLoading}
-      onChange={(e) => {
-        const checkboxIsChecked = e.target.checked;
-        setCheckedValue(checkboxIsChecked ? value : undefined);
-        requestAction(boundAction, { event: e });
-        onChange?.(e);
-      }}
-    />
-  );
-});
-
-const InputCheckboxInsideForm = forwardRef((props, ref) => {
-  const {
-    formContext,
-    id,
-    name,
-    value = "on",
-    checked: checkedExternal,
-    readOnly,
-    onChange,
-    ...rest
-  } = props;
-  const { formIsReadOnly } = formContext;
-
-  const innerRef = useRef(null);
-  useImperativeHandle(ref, () => innerRef.current);
-
-  const [navState, setNavState] = useNavState(id);
-  const [checkedValue, setCheckedValue, resetCheckedValue] = useOneFormParam(
-    name,
-    checkedExternal ? value : undefined,
-    navState ? value : undefined,
-  );
-  const checked = checkedValue === value;
-  useEffect(() => {
-    if (checkedExternal) {
-      setNavState(checked ? false : undefined);
-    } else {
-      setNavState(checked ? true : undefined);
-    }
-  }, [checkedExternal, checked]);
-
-  useFormEvents(innerRef, {
-    onFormActionAbort: () => {
-      resetCheckedValue();
-    },
-    onFormActionError: () => {
-      resetCheckedValue();
-    },
-  });
-
-  return (
-    <InputCheckboxBasic
-      {...rest}
-      ref={innerRef}
-      id={id}
-      name={name}
-      checked={checked}
-      readOnly={readOnly || formIsReadOnly}
+      loading={loading || actionLoading}
       onChange={(e) => {
-        const checkboxIsChecked = e.target.checked;
-        setCheckedValue(checkboxIsChecked ? value : undefined);
+        requestAction(e.target, actionBoundToUIState, {
+          event: e,
+          actionOrigin: "action_prop",
+        });
         onChange?.(e);
       }}
     />
   );
 });
+const InputCheckboxInsideForm = InputCheckboxBasic;

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

@@ -1,12 +1,32 @@
-import { useConstraints } from "@jsenv/validation";
 import { forwardRef } from "preact/compat";
-import { useImperativeHandle, useRef, useState } from "preact/hooks";
+import {
+  useContext,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+} from "preact/hooks";
+
+import { useConstraints } from "../../validation/hooks/use_constraints.js";
 import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
-import { LoaderBackground } from "../loader/loader_background.jsx";
+import { LoadableInlineElement } from "../loader/loader_background.jsx";
 import { useAutoFocus } from "../use_auto_focus.js";
+import { ReportReadOnlyOnLabelContext } from "./label.jsx";
+import {
+  DisabledContext,
+  FieldNameContext,
+  LoadingContext,
+  LoadingElementContext,
+  ReadOnlyContext,
+  RequiredContext,
+  UIStateContext,
+  UIStateControllerContext,
+  useUIState,
+  useUIStateController,
+} from "./use_ui_state_controller.js";
 
 import.meta.css = /* css */ `
   .custom_radio_wrapper {
+    position: relative;
     display: inline-flex;
     box-sizing: content-box;
 
@@ -42,17 +62,11 @@ import.meta.css = /* css */ `
   .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 {
@@ -60,6 +74,15 @@ import.meta.css = /* css */ `
     opacity: 0;
     transform-origin: center;
     transform: scale(0.3);
+  }
+
+  .custom_radio[data-transition] svg {
+    transition: all 0.15s ease;
+  }
+  .custom_radio[data-transition] svg .custom_radio_dashed_border {
+    transition: all 0.15s ease;
+  }
+  .custom_radio[data-transition] svg .custom_radio_border {
     transition: all 0.15s ease;
   }
 
@@ -169,82 +192,152 @@ import.meta.css = /* css */ `
 `;
 
 export const InputRadio = forwardRef((props, ref) => {
-  return renderActionableComponent(props, ref, {
+  const { value = "on" } = props;
+  const uiStateController = useUIStateController(props, "radio", {
+    statePropName: "checked",
+    fallbackState: false,
+    getStateFromProp: (checked) => (checked ? value : undefined),
+    getPropFromState: Boolean,
+  });
+  const uiState = useUIState(uiStateController);
+
+  const radio = renderActionableComponent(props, ref, {
     Basic: InputRadioBasic,
     WithAction: InputRadioWithAction,
     InsideForm: InputRadioInsideForm,
   });
+  return (
+    <UIStateControllerContext.Provider value={uiStateController}>
+      <UIStateContext.Provider value={uiState}>{radio}</UIStateContext.Provider>
+    </UIStateControllerContext.Provider>
+  );
 });
 
 const InputRadioBasic = forwardRef((props, ref) => {
+  const contextName = useContext(FieldNameContext);
+  const contextReadOnly = useContext(ReadOnlyContext);
+  const contextDisabled = useContext(DisabledContext);
+  const contextRequired = useContext(RequiredContext);
+  const contextLoading = useContext(LoadingContext);
+  const contextLoadingElement = useContext(LoadingElementContext);
+  const uiStateController = useContext(UIStateControllerContext);
+  const uiState = useContext(UIStateContext);
+  const reportReadOnlyOnLabel = useContext(ReportReadOnlyOnLabelContext);
   const {
-    autoFocus,
-    constraints = [],
-    checked,
+    name,
     readOnly,
     disabled,
+    required,
     loading,
-    onClick,
-    onChange,
+
+    autoFocus,
+    constraints = [],
+
     appeareance = "custom", // "custom" or "default"
+    accentColor,
+    onClick,
+    onInput,
     ...rest
   } = props;
-
   const innerRef = useRef(null);
   useImperativeHandle(ref, () => innerRef.current);
+
+  const innerName = name || contextName;
+  const innerDisabled = disabled || contextDisabled;
+  const innerRequired = required || contextRequired;
+  const innerLoading =
+    loading || (contextLoading && contextLoadingElement === innerRef.current);
+  const innerReadOnly =
+    readOnly || contextReadOnly || innerLoading || uiStateController.readOnly;
+
+  reportReadOnlyOnLabel?.(innerReadOnly);
   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 checked = Boolean(uiState);
+  const actionName = rest["data-action"];
+  if (actionName) {
+    delete rest["data-action"];
   }
 
-  const handleChange = (e) => {
-    const isChecked = e.target.checked;
-    setInnerChecked(isChecked);
-    onChange?.(e);
+  // we must first dispatch an event to inform all other radios they where unchecked
+  // this way each other radio uiStateController knows thery are unchecked
+  // we do this on "input"
+  // but also when we are becoming checked from outside (hence the useLayoutEffect)
+  const updateOtherRadiosInGroup = () => {
+    const thisRadio = innerRef.current;
+    const radioList = thisRadio.closest("[data-radio-list]");
+    const radioInputs = radioList.querySelectorAll(
+      `input[type="radio"][name="${thisRadio.name}"]`,
+    );
+    for (const radioInput of radioInputs) {
+      if (radioInput === thisRadio) {
+        continue;
+      }
+      radioInput.dispatchEvent(
+        new CustomEvent("setuistate", { detail: false }),
+      );
+    }
   };
+  useLayoutEffect(() => {
+    if (checked) {
+      updateOtherRadiosInGroup();
+    }
+  }, [checked]);
 
   const inputRadio = (
     <input
+      {...rest}
       ref={innerRef}
       type="radio"
-      checked={innerChecked}
-      data-readonly={readOnly && !disabled ? "" : undefined}
-      disabled={disabled}
+      name={innerName}
+      checked={checked}
+      data-readonly={innerReadOnly ? "" : undefined}
+      disabled={innerDisabled}
+      required={innerRequired}
       data-validation-message-arrow-x="center"
       onClick={(e) => {
-        if (readOnly) {
+        if (innerReadOnly) {
           e.preventDefault();
         }
         onClick?.(e);
       }}
-      onChange={handleChange}
-      {...rest}
+      onInput={(e) => {
+        const radio = e.target;
+        const radioIsChecked = radio.checked;
+        if (radioIsChecked) {
+          updateOtherRadiosInGroup();
+        }
+        uiStateController.setUIState(radioIsChecked, 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);
+      }}
     />
   );
   const inputRadioDisplayed =
     appeareance === "custom" ? (
-      <CustomRadio>{inputRadio}</CustomRadio>
+      <CustomRadio accentColor={accentColor}>{inputRadio}</CustomRadio>
     ) : (
       inputRadio
     );
 
-  const inputRadioWithLoader = (
-    <LoaderBackground
-      loading={loading}
+  return (
+    <LoadableInlineElement
+      data-action={actionName}
+      loading={innerLoading}
       targetSelector={appeareance === "custom" ? ".custom_radio" : ""}
-      inset={-2}
+      inset={-1}
       color="light-dark(#355fcc, #3b82f6)"
     >
       {inputRadioDisplayed}
-    </LoaderBackground>
+    </LoadableInlineElement>
   );
-
-  return inputRadioWithLoader;
 });
 const CustomRadio = ({ children }) => {
   return (
@@ -288,12 +381,8 @@ const CustomRadio = ({ children }) => {
 
 const InputRadioWithAction = () => {
   throw new Error(
-    `Do not use <Input type="radio" />, use <RadioList /> instead`,
+    `<Input type="radio" /> with an action make no sense. Use <RadioList action={something} /> instead`,
   );
 };
 
-const InputRadioInsideForm = () => {
-  throw new Error(
-    `Do not use <Input type="radio" />, use <RadioList /> instead`,
-  );
-};
+const InputRadioInsideForm = InputRadio;