@jsenv/navi 0.1.1 → 0.2.1

package/src/components/field/input_checkbox.jsx

@@ -1,5 +1,11 @@
+import { pickLightOrDark } from "@jsenv/dom";
 import { forwardRef } from "preact/compat";
-import { useContext, useImperativeHandle, useRef } from "preact/hooks";
+import {
+  useContext,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+} from "preact/hooks";
 
 import { useActionStatus } from "../../use_action_status.js";
 import { requestAction } from "../../validation/custom_constraint_validation.js";
@@ -7,9 +13,17 @@ 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";
 import { useExecuteAction } from "../action_execution/use_execute_action.js";
-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 "./navi_css_vars.js";
 import { useActionEvents } from "./use_action_events.js";
 import {
   DisabledContext,
@@ -25,108 +39,131 @@ import {
 } from "./use_ui_state_controller.js";
 
 import.meta.css = /* css */ `
-  .custom_checkbox_wrapper[data-field-wrapper] {
-    display: inline-flex;
-    box-sizing: content-box;
+  @layer navi {
+    :root {
+      --navi-checkmark-color-light: white;
+      --navi-checkmark-color-dark: rgb(55, 55, 55);
+      --navi-checkmark-color: var(--navi-checkmark-light-color);
+    }
 
-    --checkmark-color: white;
-    --checkmark-disabled-color: #eeeeee;
-    --checked-color: #3b82f6;
-    --checked-disabled-color: #d3d3d3;
+    .navi_checkbox {
+      position: relative;
+      display: inline-flex;
+      box-sizing: content-box;
 
-    /* TODO: find a better way maybe? */
-    --field-strong-color: var(--checked-color);
-  }
+      --outline-offset: 1px;
+      --outline-width: 2px;
+      --border-width: 1px;
+      --border-radius: 2px;
+      --width: 13px;
+      --height: 13px;
 
-  .custom_checkbox_wrapper input {
-    position: absolute;
-    opacity: 0;
-    inset: 0;
-    margin: 0;
-    padding: 0;
-    border: none;
-  }
+      --outline-color: light-dark(#4476ff, #3b82f6);
+      --border-color: light-dark(#767676, #8e8e93);
+      --background-color: white;
+      --accent-color: light-dark(#4476ff, #3b82f6);
+      /* --color: currentColor; */
+      --checkmark-color: var(--navi-checkmark-color);
 
-  .custom_checkbox {
-    width: 13px;
-    height: 13px;
-    border: 1px solid var(--field-border-color);
-    border-radius: 2px;
-    box-sizing: border-box;
-    display: inline-flex;
-    margin: 3px 3px 3px 4px;
-  }
-  .custom_checkbox svg {
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    transform: scale(0.5);
-    transition: all 0.15s ease;
-    pointer-events: none;
-  }
-  .custom_checkbox svg path {
-    stroke: var(--checkmark-color);
-  }
+      --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-readonly: #d3d3d3;
+      --border-color-checked-disabled: #d3d3d3;
+      --background-color-checked-readonly: var(
+        --navi-background-color-readonly
+      );
+      --background-color-checked-disabled: var(
+        --navi-background-color-disabled
+      );
+      --checkmark-color-readonly: var(--navi-color-readonly);
+      --checkmark-color-disabled: var(--navi-color-disabled);
+    }
+    .navi_checkbox input {
+      position: absolute;
+      inset: 0;
+      margin: 0;
+      padding: 0;
+      border: none;
+      opacity: 0;
+      cursor: inherit;
+    }
+    .navi_checkbox_field {
+      display: inline-flex;
+      box-sizing: border-box;
+      width: var(--width);
+      height: var(--height);
+      margin: 3px 3px 3px 4px;
+      background-color: var(--background-color);
+      border-width: var(--border-width);
+      border-style: solid;
+      border-color: var(--border-color);
+      border-radius: var(--border-radius);
+      outline-width: var(--outline-width);
 
-  .custom_checkbox_wrapper:hover .custom_checkbox {
-    border-color: var(--field-hover-border-color);
-  }
-  .custom_checkbox_wrapper:hover input:checked + .custom_checkbox {
-    background: var(--field-strong-color);
-    border-color: var(--field-strong-color);
-  }
-  .custom_checkbox_wrapper input:checked + .custom_checkbox {
-    background: var(--checked-color);
-    border-color: var(--checked-color);
-  }
-  .custom_checkbox_wrapper input:checked + .custom_checkbox svg {
-    opacity: 1;
-    transform: scale(1);
-  }
+      outline-style: none;
 
-  .custom_checkbox_wrapper input[data-readonly] + .custom_checkbox {
-    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-readonly-background-color);
-    border-color: var(--field-readonly-border-color);
-  }
-  .custom_checkbox_wrapper:hover
-    input[data-readonly]:checked
-    + .custom_checkbox {
-    background: var(--checked-disabled-color);
-    border-color: var(--checked-disabled-color);
-  }
-  .custom_checkbox_wrapper
-    input[data-readonly]:checked
-    + .custom_checkbox
-    .custom_checkbox_marker {
-    stroke: var(--checkmark-disabled-color);
-  }
+      outline-color: var(--outline-color);
+      outline-offset: var(--outline-offset);
+      /* color: var(--color); */
+    }
+    .navi_checkbox_marker {
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      transform: scale(0.5);
+      transition: all 0.15s ease;
+      pointer-events: none;
+    }
 
-  .custom_checkbox_wrapper input:focus-visible + .custom_checkbox {
-    outline: 2px solid var(--field-outline-color);
-    outline-offset: 1px;
-  }
+    /* Focus */
+    .navi_checkbox[data-focus-visible] .navi_checkbox_field {
+      outline-style: solid;
+    }
+    /* Hover */
+    .navi_checkbox[data-hover] .navi_checkbox_field {
+      --border-color: var(--border-color-hover);
+    }
+    /* Checked */
+    .navi_checkbox[data-checked] .navi_checkbox_field {
+      --background-color: var(--accent-color);
+      --border-color: var(--accent-color);
+    }
+    .navi_checkbox[data-checked] .navi_checkbox_marker {
+      opacity: 1;
+      stroke: var(--checkmark-color);
+      transform: scale(1);
+    }
+    /* Readonly */
+    .navi_checkbox[data-readonly] .navi_checkbox_field,
+    .navi_checkbox[data-readonly][data-hover] .navi_checkbox_field {
+      --border-color: var(--border-color-readonly);
+      --background-color: var(--background-color-readonly);
+    }
+    .navi_checkbox[data-checked][data-readonly] .navi_checkbox_field {
+      --background-color: var(--background-color-checked-readonly);
+      --border-color: var(--border-color-checked-readonly);
+    }
+    .navi_checkbox[data-checked][data-readonly] .navi_checkbox_marker {
+      stroke: var(--checkmark-color-readonly);
+    }
+    /* Disabled */
+    .navi_checkbox[data-disabled] .navi_checkbox_field {
+      --background-color: var(--background-color-disabled);
+      --border-color: var(--border-color-disabled);
+    }
+    .navi_checkbox[data-checked][data-disabled] .navi_checkbox_field {
+      --border-color: var(--border-color-checked-disabled);
+      --background-color: var(--background-color-checked-disabled);
+    }
 
-  .custom_checkbox_wrapper input[disabled] + .custom_checkbox {
-    background-color: var(--field-disabled-background-color);
-    border-color: var(--field-disabled-border-color);
-  }
-  .custom_checkbox_wrapper input[disabled]:checked + .custom_checkbox {
-    background: var(--checked-disabled-color);
-    border-color: var(--checked-disabled-color);
-  }
-  .custom_checkbox_wrapper
-    input[disabled]:checked
-    + .custom_checkbox
-    .custom_checkbox_marker {
-    stroke: var(--checkmark-disabled-color);
+    .navi_checkbox[data-checked][data-disabled] .navi_checkbox_marker {
+      stroke: var(--checkmark-color-disabled);
+    }
   }
 `;
 
@@ -165,6 +202,7 @@ const InputCheckboxBasic = forwardRef((props, ref) => {
   const uiStateController = useContext(UIStateControllerContext);
   const uiState = useContext(UIStateContext);
   const reportReadOnlyOnLabel = useContext(ReportReadOnlyOnLabelContext);
+  const reportDisabledOnLabel = useContext(ReportDisabledOnLabelContext);
   const {
     name,
     readOnly,
@@ -174,10 +212,11 @@ const InputCheckboxBasic = 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);
@@ -191,6 +230,7 @@ const InputCheckboxBasic = forwardRef((props, ref) => {
   const innerReadOnly =
     readOnly || contextReadOnly || innerLoading || uiStateController.readOnly;
   reportReadOnlyOnLabel?.(innerReadOnly);
+  reportDisabledOnLabel?.(innerDisabled);
   useAutoFocus(innerRef, autoFocus);
   useConstraints(innerRef, constraints);
 
@@ -204,9 +244,9 @@ const InputCheckboxBasic = forwardRef((props, ref) => {
       {...rest}
       ref={innerRef}
       type="checkbox"
+      style={appeareance === "default" ? style : undefined}
       name={innerName}
       checked={checked}
-      data-readonly={innerReadOnly ? "" : undefined}
       readOnly={innerReadOnly}
       disabled={innerDisabled}
       required={innerRequired}
@@ -233,44 +273,85 @@ const InputCheckboxBasic = forwardRef((props, ref) => {
       }}
     />
   );
-
-  const inputCheckboxDisplayed =
-    appeareance === "custom" ? (
-      <CustomCheckbox accentColor={accentColor}>{inputCheckbox}</CustomCheckbox>
-    ) : (
-      inputCheckbox
+  const loaderProps = {
+    loading: innerLoading,
+    inset: -1,
+    style: {
+      "--accent-color": accentColor || "light-dark(#355fcc, #4476ff)",
+    },
+    color: "var(--accent-color)",
+  };
+  if (appeareance === "navi") {
+    return (
+      <NaviCheckbox
+        data-action={actionName}
+        inputRef={innerRef}
+        accentColor={accentColor}
+        readOnly={readOnly}
+        disabled={innerDisabled}
+        style={style}
+      >
+        <LoaderBackground
+          {...loaderProps}
+          targetSelector=".navi_checkbox_field"
+        >
+          {inputCheckbox}
+        </LoaderBackground>
+      </NaviCheckbox>
     );
+  }
 
   return (
-    <LoadableInlineElement
-      data-action={actionName}
-      loading={innerLoading}
-      inset={-1}
-      targetSelector={appeareance === "custom" ? ".custom_checkbox" : ""}
-      color="light-dark(#355fcc, #3b82f6)"
-    >
-      {inputCheckboxDisplayed}
+    <LoadableInlineElement {...loaderProps} data-action={actionName}>
+      {inputCheckbox}
     </LoadableInlineElement>
   );
 });
-const CustomCheckbox = ({ accentColor, children }) => {
+const NaviCheckbox = ({
+  accentColor,
+  readOnly,
+  disabled,
+  inputRef,
+  style,
+  children,
+  ...rest
+}) => {
+  const ref = useRef();
+  useLayoutEffect(() => {
+    const naviCheckbox = ref.current;
+    const colorPicked = pickLightOrDark(
+      naviCheckbox,
+      "var(--accent-color)",
+      "var(--navi-checkmark-color-light)",
+      "var(--navi-checkmark-color-dark)",
+    );
+    naviCheckbox.style.setProperty("--checkmark-color", colorPicked);
+  }, [accentColor]);
+
+  useLayoutEffect(() => {
+    return initCustomField(ref.current, inputRef.current);
+  }, []);
+
   return (
     <div
-      className="custom_checkbox_wrapper"
-      data-field-wrapper=""
+      {...rest}
+      ref={ref}
+      className="navi_checkbox"
       style={{
-        ...(accentColor ? { "--checked-color": accentColor } : {}),
+        ...(accentColor ? { "--accent-color": accentColor } : {}),
+        ...style,
       }}
+      data-readonly={readOnly ? "" : undefined}
+      data-disabled={disabled ? "" : undefined}
     >
       {children}
-      <div className="custom_checkbox">
-        <svg viewBox="0 0 12 12" aria-hidden="true">
-          <path
-            className="custom_checkbox_marker"
-            d="M10.5 2L4.5 9L1.5 5.5"
-            fill="none"
-            strokeWidth="2"
-          />
+      <div className="navi_checkbox_field">
+        <svg
+          viewBox="0 0 12 12"
+          aria-hidden="true"
+          className="navi_checkbox_marker"
+        >
+          <path d="M10.5 2L4.5 9L1.5 5.5" fill="none" strokeWidth="2" />
         </svg>
       </div>
     </div>