@jsenv/navi 0.1.0 → 0.2.0

package/src/components/field/input_radio.jsx

@@ -8,9 +8,16 @@ import {
 
 import { useConstraints } from "../../validation/hooks/use_constraints.js";
 import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
-import { LoadableInlineElement } from "../loader/loader_background.jsx";
+import {
+  LoadableInlineElement,
+  LoaderBackground,
+} from "../loader/loader_background.jsx";
 import { useAutoFocus } from "../use_auto_focus.js";
-import { ReportReadOnlyOnLabelContext } from "./label.jsx";
+import { initCustomField } from "./custom_field.js";
+import {
+  ReportDisabledOnLabelContext,
+  ReportReadOnlyOnLabelContext,
+} from "./label.jsx";
 import {
   DisabledContext,
   FieldNameContext,
@@ -25,169 +32,152 @@ import {
 } from "./use_ui_state_controller.js";
 
 import.meta.css = /* css */ `
-  .custom_radio_wrapper {
+  :root {
+    --navi-radiomark-color: light-dark(#4476ff, #3b82f6);
+  }
+
+  .navi_radio {
     position: relative;
     display: inline-flex;
     box-sizing: content-box;
 
-    --checked-color: #3b82f6;
-    --checked-disabled-color: var(--field-disabled-border-color);
+    --outline-offset: 1px;
+    --outline-width: 2px;
+    --width: 13px;
+    --height: 13px;
 
-    --checkmark-color: var(--checked-color);
-    --checkmark-disabled-color: var(--field-disabled-text-color);
-  }
+    --outline-color: light-dark(#4476ff, #3b82f6);
+    --border-color: light-dark(#767676, #8e8e93);
+    --background-color: white;
+    --accent-color: var(--navi-radiomark-color);
+    --mark-color: var(--accent-color);
+
+    /* light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3)); */
+    --accent-color-checked: color-mix(in srgb, var(--accent-color) 70%, black);
 
-  .custom_radio_wrapper input {
+    --border-color-readonly: color-mix(in srgb, var(--border-color) 30%, white);
+    --border-color-disabled: var(--border-color-readonly);
+    --border-color-hover: color-mix(in srgb, var(--border-color) 70%, black);
+    --border-color-checked: var(--accent-color);
+    --border-color-checked-hover: var(--accent-color-checked);
+    --border-color-checked-readonly: #d3d3d3;
+    --border-color-checked-disabled: #d3d3d3;
+    --background-color-readonly: var(--background-color);
+    --background-color-disabled: var(--background-color);
+    --background-color-checked-readonly: #d3d3d3;
+    --background-color-checked-disabled: var(--background-color);
+    --mark-color-hover: var(--accent-color-checked);
+    --mark-color-readonly: grey;
+    --mark-color-disabled: #eeeeee;
+  }
+  .navi_radio input {
     position: absolute;
-    opacity: 0;
     inset: 0;
     margin: 0;
     padding: 0;
-    border: none;
+    opacity: 0;
+    cursor: inherit;
   }
-
-  .custom_radio {
-    width: 13px;
-    height: 13px;
-    background: transparent;
-    border-radius: 50%;
+  .navi_radio_field {
     display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    margin-left: 5px;
+    width: var(--width);
+    height: var(--height);
     margin-top: 3px;
     margin-right: 3px;
-  }
+    margin-left: 5px;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    outline-width: var(--outline-width);
+
+    outline-style: none;
 
-  .custom_radio svg {
+    outline-color: var(--outline-color);
+
+    outline-offset: var(--outline-offset);
+  }
+  .navi_radio_field svg {
+    overflow: visible;
+  }
+  .navi_radio_border {
+    fill: var(--background-color);
+    stroke: var(--border-color);
+  }
+  .navi_radio_marker {
     width: 100%;
     height: 100%;
+    opacity: 0;
+    fill: var(--mark-color);
+    transform: scale(0.3);
+    transform-origin: center;
     pointer-events: none;
   }
-
-  .custom_radio svg .custom_radio_dashed_border {
+  .navi_radio_dashed_border {
     display: none;
   }
-
-  .custom_radio svg .custom_radio_marker {
-    fill: var(--checkmark-color);
-    opacity: 0;
-    transform-origin: center;
-    transform: scale(0.3);
-  }
-
-  .custom_radio[data-transition] svg {
+  .navi_radio[data-transition] .navi_radio_marker {
     transition: all 0.15s ease;
   }
-  .custom_radio[data-transition] svg .custom_radio_dashed_border {
+  .navi_radio[data-transition] .navi_radio_dashed_border {
     transition: all 0.15s ease;
   }
-  .custom_radio[data-transition] svg .custom_radio_border {
+  .navi_radio[data-transition] .navi_radio_border {
     transition: all 0.15s ease;
   }
 
-  /* États hover */
-  .custom_radio_wrapper:hover .custom_radio svg .custom_radio_border {
-    stroke: var(--field-hover-border-color);
+  /* Focus */
+  .navi_radio[data-focus-visible] .navi_radio_field {
+    outline-style: solid;
   }
-  .custom_radio_wrapper:hover .custom_radio svg .custom_radio_marker {
-    fill: var(--field-strong-color);
+  /* Hover */
+  .navi_radio[data-hover] .navi_radio_border {
+    stroke: var(--border-color-hover);
   }
-
-  .custom_radio_wrapper:hover
-    input:checked
-    + .custom_radio
-    svg
-    .custom_radio_border {
-    stroke: var(--field-strong-color);
+  .navi_radio[data-hover] .navi_radio_marker {
+    fill: var(--mark-color-hover);
   }
-
-  /* État checked */
-  .custom_radio_wrapper input:checked + .custom_radio svg .custom_radio_border {
-    stroke: var(--field-strong-color);
+  /* Checked */
+  .navi_radio[data-checked] .navi_radio_border {
+    stroke: var(--border-color-checked);
   }
-
-  .custom_radio_wrapper input:checked + .custom_radio svg .custom_radio_marker {
+  .navi_radio[data-checked] .navi_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);
+  .navi_radio[data-hover][data-checked] .navi_radio_border {
+    stroke: var(--border-color-checked-hover);
   }
-
-  .custom_radio_wrapper
-    input[disabled]:checked
-    + .custom_radio
-    svg
-    .custom_radio_marker {
-    fill: var(--checkmark-disabled-color);
+  /* Readonly */
+  .navi_radio[data-readonly] .navi_radio_border {
+    fill: var(--background-color-readonly);
+    stroke: var(--border-color-readonly);
   }
-
-  .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);
+  .navi_radio[data-readonly] .navi_radio_marker {
+    fill: var(--mark-color-readonly);
   }
-  .custom_radio_wrapper
-    input[data-readonly]
-    + .custom_radio
-    svg
-    .custom_radio_dashed_border {
+  .navi_radio[data-readonly] .navi_radio_dashed_border {
     display: none;
   }
-  .custom_radio_wrapper
-    input[data-readonly]:checked
-    + .custom_radio
-    svg
-    .custom_radio_border {
-    stroke: var(--checked-disabled-color);
+  .navi_radio[data-checked][data-readonly] .navi_radio_border {
+    fill: var(--background-color-checked-readonly);
+    stroke: var(--border-color-checked-readonly);
   }
-  .custom_radio_wrapper
-    input[data-readonly]:checked
-    + .custom_radio
-    svg
-    .custom_radio_marker {
-    fill: var(--checkmark-disabled-color);
+  .navi_radio[data-checked][data-readonly] .navi_radio_marker {
+    fill: var(--mark-color-readonly);
   }
-  .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);
+  /* Disabled */
+  .navi_radio[data-disabled] .navi_radio_border {
+    fill: var(--background-color-disabled);
+    stroke: var(--border-color-disabled);
   }
-  .custom_radio_wrapper:hover
-    input[data-readonly]:checked
-    + .custom_radio
-    svg
-    .custom_radio_border {
-    stroke: var(--checked-disabled-color);
+  .navi_radio[data-disabled] .navi_radio_marker {
+    fill: var(--mark-color-disabled);
   }
-
-  /* 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%;
+  .navi_radio[data-hover][data-checked][data-disabled] .navi_radio_border {
+    stroke: var(--border-color-disabled);
+  }
+  .navi_radio[data-checked][data-disabled] .navi_radio_marker {
+    fill: var(--mark-color-disabled);
   }
 `;
 
@@ -223,6 +213,7 @@ const InputRadioBasic = forwardRef((props, ref) => {
   const uiStateController = useContext(UIStateControllerContext);
   const uiState = useContext(UIStateContext);
   const reportReadOnlyOnLabel = useContext(ReportReadOnlyOnLabelContext);
+  const reportDisabledOnLabel = useContext(ReportDisabledOnLabelContext);
   const {
     name,
     readOnly,
@@ -233,10 +224,11 @@ const InputRadioBasic = forwardRef((props, ref) => {
     autoFocus,
     constraints = [],
 
-    appeareance = "custom", // "custom" or "default"
+    appeareance = "navi", // "navi" or "default"
     accentColor,
     onClick,
     onInput,
+    style,
     ...rest
   } = props;
   const innerRef = useRef(null);
@@ -251,14 +243,10 @@ const InputRadioBasic = forwardRef((props, ref) => {
     readOnly || contextReadOnly || innerLoading || uiStateController.readOnly;
 
   reportReadOnlyOnLabel?.(innerReadOnly);
+  reportDisabledOnLabel?.(innerDisabled);
   useAutoFocus(innerRef, autoFocus);
   useConstraints(innerRef, constraints);
   const checked = Boolean(uiState);
-  const actionName = rest["data-action"];
-  if (actionName) {
-    delete rest["data-action"];
-  }
-
   // 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"
@@ -266,6 +254,9 @@ const InputRadioBasic = forwardRef((props, ref) => {
   const updateOtherRadiosInGroup = () => {
     const thisRadio = innerRef.current;
     const radioList = thisRadio.closest("[data-radio-list]");
+    if (!radioList) {
+      return;
+    }
     const radioInputs = radioList.querySelectorAll(
       `input[type="radio"][name="${thisRadio.name}"]`,
     );
@@ -284,14 +275,18 @@ const InputRadioBasic = forwardRef((props, ref) => {
     }
   }, [checked]);
 
+  const actionName = rest["data-action"];
+  if (actionName) {
+    delete rest["data-action"];
+  }
   const inputRadio = (
     <input
       {...rest}
       ref={innerRef}
       type="radio"
+      style={appeareance === "default" ? style : undefined}
       name={innerName}
       checked={checked}
-      data-readonly={innerReadOnly ? "" : undefined}
       disabled={innerDisabled}
       required={innerRequired}
       data-validation-message-arrow-x="center"
@@ -320,30 +315,65 @@ const InputRadioBasic = forwardRef((props, ref) => {
       }}
     />
   );
-  const inputRadioDisplayed =
-    appeareance === "custom" ? (
-      <CustomRadio accentColor={accentColor}>{inputRadio}</CustomRadio>
-    ) : (
-      inputRadio
+  const loaderProps = {
+    loading: innerLoading,
+    inset: -1,
+    style: {
+      "--accent-color": accentColor || "light-dark(#355fcc, #4476ff)",
+    },
+    color: "var(--accent-color)",
+  };
+  if (appeareance === "navi") {
+    return (
+      <NaviRadio
+        data-action={actionName}
+        inputRef={innerRef}
+        accentColor={accentColor}
+        readOnly={innerReadOnly}
+        disabled={innerDisabled}
+        style={style}
+      >
+        <LoaderBackground {...loaderProps} targetSelector=".navi_radio_field">
+          {inputRadio}
+        </LoaderBackground>
+      </NaviRadio>
     );
+  }
 
   return (
-    <LoadableInlineElement
-      data-action={actionName}
-      loading={innerLoading}
-      targetSelector={appeareance === "custom" ? ".custom_radio" : ""}
-      inset={-1}
-      color="light-dark(#355fcc, #3b82f6)"
-    >
-      {inputRadioDisplayed}
+    <LoadableInlineElement {...loaderProps} data-action={actionName}>
+      {inputRadio}
     </LoadableInlineElement>
   );
 });
-const CustomRadio = ({ children }) => {
+const NaviRadio = ({
+  inputRef,
+  accentColor,
+  readOnly,
+  disabled,
+  style,
+  children,
+  ...rest
+}) => {
+  const ref = useRef();
+  useLayoutEffect(() => {
+    return initCustomField(ref.current, inputRef.current);
+  }, []);
+
   return (
-    <div className="custom_radio_wrapper" data-field-wrapper="">
+    <span
+      {...rest}
+      ref={ref}
+      className="navi_radio"
+      style={{
+        ...(accentColor ? { "--accent-color": accentColor } : {}),
+        ...style,
+      }}
+      data-readonly={readOnly ? "" : undefined}
+      data-disabled={disabled ? "" : undefined}
+    >
       {children}
-      <div className="custom_radio">
+      <span className="navi_radio_field">
         <svg
           viewBox="0 0 12 12"
           aria-hidden="true"
@@ -351,31 +381,27 @@ const CustomRadio = ({ children }) => {
         >
           {/* Border circle - always visible */}
           <circle
-            className="custom_radio_border"
+            className="navi_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"
+            className="navi_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" />
+          <circle className="navi_radio_marker" cx="6" cy="6" r="3.5" />
         </svg>
-      </div>
-    </div>
+      </span>
+    </span>
   );
 };
 

package/src/components/field/input_textual.jsx

@@ -33,6 +33,7 @@ import { useActionBoundToOneParam } from "../action_execution/use_action.js";
 import { useExecuteAction } from "../action_execution/use_execute_action.js";
 import { LoadableInlineElement } from "../loader/loader_background.jsx";
 import { useAutoFocus } from "../use_auto_focus.js";
+import { initCustomField } from "./custom_field.js";
 import "./field_css.js";
 import { ReportReadOnlyOnLabelContext } from "./label.jsx";
 import { useActionEvents } from "./use_action_events.js";
@@ -47,6 +48,84 @@ import {
   useUIStateController,
 } from "./use_ui_state_controller.js";
 
+import.meta.css = /* css */ `
+  .navi_input {
+    --border-width: 1px;
+    --outline-width: 1px;
+    --outer-width: calc(var(--border-width) + var(--outline-width));
+    --padding-x: 6px;
+    --padding-y: 1px;
+
+    --outline-color: light-dark(#4476ff, #3b82f6);
+
+    --border-radius: 2px;
+    --border-color: light-dark(#767676, #8e8e93);
+    --border-color-hover: color-mix(in srgb, var(--border-color) 70%, black);
+    --border-color-active: color-mix(in srgb, var(--border-color) 90%, black);
+    --border-color-readonly: color-mix(
+      in srgb,
+      var(--border-color) 45%,
+      transparent
+    );
+    --border-color-disabled: var(--border-color-readonly);
+
+    --background-color: white;
+    --background-color-hover: color-mix(
+      in srgb,
+      var(--background-color) 95%,
+      black
+    );
+    --background-color-readonly: var(--background-color);
+    --background-color-disabled: color-mix(
+      in srgb,
+      var(--background-color) 60%,
+      transparent
+    );
+
+    --color: currentColor;
+    --color-readonly: color-mix(in srgb, currentColor 60%, transparent);
+    --color-disabled: var(--color-readonly);
+    color: var(--color);
+
+    background-color: var(--background-color);
+    border-width: var(--outer-width);
+    border-width: var(--outer-width);
+    border-style: solid;
+    border-color: transparent;
+    border-radius: var(--border-radius);
+    outline-width: var(--border-width);
+    outline-style: solid;
+    outline-color: var(--border-color);
+    outline-offset: calc(-1 * (var(--border-width)));
+  }
+  /* Focus */
+  .navi_input[data-focus] {
+    border-color: var(--outline-color);
+    outline-width: var(--outer-width);
+    outline-color: var(--outline-color);
+    outline-offset: calc(-1 * var(--outer-width));
+  }
+  /* Readonly */
+  .navi_input[data-readonly] {
+    color: var(--color-readonly);
+    background-color: var(--background-color-readonly);
+    outline-color: var(--border-color-readonly);
+  }
+  .navi_input[data-readonly]::placeholder {
+    color: var(--color-readonly);
+  }
+  /* Disabled */
+  .navi_input[data-disabled] {
+    color: var(--color-disabled);
+    background-color: var(--background-color-disabled);
+    outline-color: var(--border-color-disabled);
+  }
+  /* Invalid */
+  .navi_input[aria-invalid="true"] {
+    border-color: var(--invalid-color);
+  }
+`;
+
 export const InputTextual = forwardRef((props, ref) => {
   const uiStateController = useUIStateController(props, "input");
   const uiState = useUIState(uiStateController);
@@ -83,7 +162,8 @@ const InputTextualBasic = forwardRef((props, ref) => {
     autoFocus,
     autoFocusVisible,
     autoSelect,
-    appearance = "custom",
+    appearance = "navi",
+    accentColor,
     width,
     height,
     ...rest
@@ -110,14 +190,14 @@ const InputTextualBasic = forwardRef((props, ref) => {
     <input
       {...rest}
       ref={innerRef}
+      className={appearance === "navi" ? "navi_input" : undefined}
       type={type}
       data-value={uiState}
       value={innerValue}
-      data-field=""
-      data-field-with-border=""
-      data-custom={appearance === "custom" ? "" : undefined}
       readOnly={innerReadOnly}
       disabled={innerDisabled}
+      data-readOnly={innerReadOnly ? "" : undefined}
+      data-disabled={innerDisabled ? "" : undefined}
       onInput={(e) => {
         let inputValue;
         if (type === "number") {
@@ -141,12 +221,23 @@ const InputTextualBasic = forwardRef((props, ref) => {
     />
   );
 
+  useLayoutEffect(() => {
+    return initCustomField(innerRef.current, innerRef.current);
+  }, []);
+
+  if (type === "hidden") {
+    return inputTextual;
+  }
   return (
     <LoadableInlineElement
       loading={innerLoading}
-      color="light-dark(#355fcc, #3b82f6)"
+      style={{
+        "--accent-color": accentColor || "light-dark(#355fcc, #4476ff)",
+      }}
+      color="var(--accent-color)"
       width={width}
       height={height}
+      inset={-1}
     >
       {inputTextual}
     </LoadableInlineElement>
@@ -262,7 +353,13 @@ const InputTextualWithAction = forwardRef((props, ref) => {
   );
 });
 const InputTextualInsideForm = forwardRef((props, ref) => {
-  const { onKeyDown, ...rest } = props;
+  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

package/src/components/field/label.jsx

@@ -3,29 +3,41 @@ import { forwardRef } from "preact/compat";
 import { useImperativeHandle, useRef, useState } from "preact/hooks";
 
 import.meta.css = /* css */ `
-  label[data-readonly] {
+  label {
+    cursor: pointer;
+  }
+
+  label[data-readonly],
+  label[data-disabled] {
     color: rgba(0, 0, 0, 0.5);
+    cursor: default;
   }
 `;
 
 export const ReportReadOnlyOnLabelContext = createContext();
+export const ReportDisabledOnLabelContext = createContext();
 
 export const Label = forwardRef((props, ref) => {
-  const { readOnly, children, ...rest } = props;
+  const { readOnly, disabled, children, ...rest } = props;
   const innerRef = useRef();
   useImperativeHandle(ref, () => innerRef.current);
 
   const [inputReadOnly, setInputReadOnly] = useState(false);
   const innerReadOnly = readOnly || inputReadOnly;
+  const [inputDisabled, setInputDisabled] = useState(false);
+  const innerDisabled = disabled || inputDisabled;
 
   return (
     <label
       ref={innerRef}
       data-readonly={innerReadOnly ? "" : undefined}
+      data-disabled={innerDisabled ? "" : undefined}
       {...rest}
     >
       <ReportReadOnlyOnLabelContext.Provider value={setInputReadOnly}>
-        {children}
+        <ReportDisabledOnLabelContext.Provider value={setInputDisabled}>
+          {children}
+        </ReportDisabledOnLabelContext.Provider>
       </ReportReadOnlyOnLabelContext.Provider>
     </label>
   );

package/src/components/field/navi_css_vars.js

@@ -0,0 +1,8 @@
+import.meta.css = /* css */ `
+  :root {
+    --navi-background-color-readonly: #d3d3d3;
+    --navi-color-readonly: grey;
+    --navi-background-color-disabled: #d3d3d3;
+    --navi-color-disabled: #eeeeee;
+  }
+`;