@jsenv/navi 0.1.1 → 0.2.0

package/src/components/demos/action/0_button_demo.html

@@ -46,7 +46,7 @@
                 <p>
                   <strong>Border radius</strong>
                 </p>
-                <Button style={{ borderRadius: "20px" }}>C</Button>
+                <Button style={{ "--border-radius": "20px" }}>C</Button>
               </div>
             </div>
 
@@ -55,21 +55,23 @@
                 <p>
                   <strong>Violet border</strong>
                 </p>
-                <Button style={{ borderColor: "violet" }}>D</Button>
+                <Button style={{ "--border-color": "violet" }}>D</Button>
               </div>
 
               <div>
                 <p>
                   <strong>Border width</strong>
                 </p>
-                <Button style={{ borderWidth: "10px" }}>D</Button>
+                <Button style={{ "--border-width": "10px" }}>D</Button>
               </div>
 
               <div>
                 <p>
                   <strong>Outline width</strong>
                 </p>
-                <Button style={{ borderWidth: "5px", outlineWidth: "5px" }}>
+                <Button
+                  style={{ "--border-width": "5px", "--outline-width": "5px" }}
+                >
                   D
                 </Button>
               </div>

package/src/components/demos/action/1_input_text_demo.html

@@ -7,59 +7,59 @@
     <title>Input Text Demo</title>
     <style>
       body {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 20px;
         font-family:
           system-ui,
           -apple-system,
           sans-serif;
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 20px;
         background: #f5f5f5;
       }
       .demo-grid {
         display: grid;
+        margin-bottom: 30px;
         grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
         gap: 20px;
-        margin-bottom: 30px;
       }
       .demo-card {
+        padding: 20px;
         background: white;
         border-radius: 8px;
-        padding: 20px;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
       }
       .demo-title {
         margin: 0 0 15px 0;
+        padding-bottom: 8px;
         color: #333;
-        font-size: 16px;
         font-weight: 600;
+        font-size: 16px;
         border-bottom: 2px solid #e0e0e0;
-        padding-bottom: 8px;
       }
       .result-display {
+        min-height: 20px;
         margin-top: 15px;
         padding: 12px;
+        font-size: 14px;
+        font-family: monospace;
         background: #f8f9fa;
         border: 1px solid #dee2e6;
         border-radius: 4px;
-        min-height: 20px;
-        font-family: monospace;
-        font-size: 14px;
       }
       .result-success {
+        color: #155724;
         background: #d4edda;
         border-color: #c3e6cb;
-        color: #155724;
       }
       .result-error {
+        color: #721c24;
         background: #f8d7da;
         border-color: #f5c6cb;
-        color: #721c24;
       }
       .result-loading {
+        color: #0c5460;
         background: #d1ecf1;
         border-color: #bee5eb;
-        color: #0c5460;
       }
       nav a {
         color: #007bff;
@@ -76,21 +76,21 @@
       }
       h2:first-of-type {
         margin-top: 0;
-        border-top: none;
         padding-top: 0;
+        border-top: none;
       }
       .button-group {
         display: flex;
-        gap: 10px;
         margin-top: 10px;
+        gap: 10px;
       }
       button {
         padding: 8px 16px;
+        font-size: 14px;
+        background: white;
         border: 1px solid #ccc;
         border-radius: 4px;
-        background: white;
         cursor: pointer;
-        font-size: 14px;
       }
       button:hover {
         background: #f8f9fa;
@@ -100,18 +100,12 @@
       }
       label {
         margin-bottom: 15px;
-        font-weight: 500;
         color: #555;
+        font-weight: 500;
       }
       label input {
-        display: block;
-        margin-top: 5px;
-        width: 100%;
+        margin-left: 5px;
         padding: 8px 12px;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        font-size: 14px;
-        box-sizing: border-box;
       }
     </style>
   </head>

package/src/components/field/button.jsx

@@ -1,16 +1,23 @@
-import { resolveCSSSize } from "@jsenv/dom";
 import { forwardRef } from "preact/compat";
-import { useContext, useImperativeHandle, useRef } from "preact/hooks";
+import {
+  useContext,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+} from "preact/hooks";
 
+import { getActionPrivateProperties } from "../../action_private_properties.js";
 import { useActionStatus } from "../../use_action_status.js";
 import { requestAction } from "../../validation/custom_constraint_validation.js";
 import { useConstraints } from "../../validation/hooks/use_constraints.js";
+import { FormActionContext } from "../action_execution/form_context.js";
 import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
 import { useAction } from "../action_execution/use_action.js";
 import { useExecuteAction } from "../action_execution/use_execute_action.js";
-import { LoadableInlineElement } from "../loader/loader_background.jsx";
+import { LoaderBackground } from "../loader/loader_background.jsx";
 import { useAutoFocus } from "../use_auto_focus.js";
-import "./field_css.js";
+import { initCustomField } from "./custom_field.js";
+import "./navi_css_vars.js";
 import { useActionEvents } from "./use_action_events.js";
 import { useFormEvents } from "./use_form_events.js";
 import {
@@ -31,38 +38,87 @@ import {
  * So we redefine chrome styles so that loader can keep up with the actual color visible to the user
  */
 import.meta.css = /* css */ `
-  button[data-custom] {
-    border: none;
-    background: none;
+  .navi_button {
+    position: relative;
     display: inline-block;
     padding: 0;
-  }
+    background: none;
+    border: none;
+    outline: none;
 
-  button[data-custom] .navi_button_content {
-    transition-duration: 0.15s;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-property: transform;
-    display: inline-flex;
-    position: relative;
-    padding-block: 1px;
-    padding-inline: 6px;
-  }
+    --border-width: 1px;
+    --outline-width: 1px;
+    --outer-width: calc(var(--border-width) + var(--outline-width));
+    --padding-x: 6px;
+    --padding-y: 1px;
 
-  button[data-custom]:active .navi_button_content {
-    transform: scale(0.9);
-  }
+    --outline-color: light-dark(#4476ff, #3b82f6);
 
-  button[data-custom]:disabled .navi_button_content {
-    transform: none;
-  }
+    --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) 30%, white);
+    --border-color-disabled: var(--border-color-readonly);
+
+    --background-color: light-dark(#f3f4f6, #2d3748);
+    --background-color-hover: color-mix(
+      in srgb,
+      var(--background-color) 95%,
+      black
+    );
+    --background-color-readonly: var(--background-color);
+    --background-color-disabled: var(--background-color);
 
-  button[data-custom] .navi_button_shadow {
+    --color: currentColor;
+    --color-readonly: color-mix(in srgb, currentColor 30%, transparent);
+    --color-disabled: var(--color-readonly);
+  }
+  .navi_button_content {
+    position: relative;
+    display: inline-flex;
+    padding-top: var(--padding-y);
+    padding-right: var(--padding-x);
+    padding-bottom: var(--padding-y);
+    padding-left: var(--padding-x);
+    color: var(--color);
+    background-color: var(--background-color);
+    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)));
+    transition-property: transform;
+    transition-duration: 0.15s;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .navi_button_shadow {
     position: absolute;
-    inset: calc(-1 * (var(--field-border-width) + var(--field-outline-width)));
-    pointer-events: none;
+    inset: calc(-1 * var(--outer-width));
     border-radius: inherit;
+    pointer-events: none;
   }
-  button[data-custom]:active .navi_button_shadow {
+  /* Focus */
+  .navi_button[data-focus-visible] .navi_button_content {
+    --border-color: var(--outline-color);
+    outline-width: var(--outer-width);
+    outline-offset: calc(-1 * var(--outer-width));
+  }
+  /* Hover */
+  .navi_button[data-hover] .navi_button_content {
+    --border-color: var(--border-color-hover);
+    --background-color: var(--background-color-hover);
+  }
+  /* Active */
+  .navi_button[data-active] .navi_button_content {
+    --outline-color: var(--border-color-active);
+    --background-color: none;
+    transform: scale(0.9);
+  }
+  .navi_button[data-active] .navi_button_shadow {
     box-shadow:
       inset 0 3px 6px rgba(0, 0, 0, 0.2),
       inset 0 1px 2px rgba(0, 0, 0, 0.3),
@@ -70,9 +126,53 @@ import.meta.css = /* css */ `
       inset 2px 0 4px rgba(0, 0, 0, 0.1),
       inset -2px 0 4px rgba(0, 0, 0, 0.1);
   }
-  button[data-custom]:disabled > .navi_button_shadow {
+  /* Readonly */
+  .navi_button[data-readonly] .navi_button_content {
+    --border-color: var(--border-color-disabled);
+    --outline-color: var(--border-color-readonly);
+    --background-color: var(--background-color-readonly);
+    --color: var(--color-readonly);
+  }
+  /* Disabled */
+  .navi_button[data-disabled] .navi_button_content {
+    --border-color: var(--border-color-disabled);
+    --background-color: var(--background-color-disabled);
+    --color: var(--color-disabled);
+    transform: none; /* no active effect */
+  }
+  .navi_button[data-disabled] .navi_button_shadow {
     box-shadow: none;
   }
+  /* Invalid */
+  .navi_button[aria-invalid="true"] .navi_button_content {
+    --border-color: var(--invalid-color);
+  }
+
+  /* Discrete variant */
+  .navi_button[data-discrete] .navi_button_content {
+    --background-color: transparent;
+    --border-color: transparent;
+  }
+  .navi_button[data-discrete][data-hover] .navi_button_content {
+    --border-color: var(--border-color-hover);
+  }
+  .navi_button[data-discrete][data-readonly] .navi_button_content {
+    --border-color: transparent;
+  }
+  .navi_button[data-discrete][data-disabled] .navi_button_content {
+    --border-color: transparent;
+  }
+  button[data-discrete] {
+    background-color: transparent;
+    border-color: transparent;
+  }
+  button[data-discrete]:hover {
+    border-color: revert;
+  }
+  button[data-discrete][data-readonly],
+  button[data-discrete][data-disabled] {
+    border-color: transparent;
+  }
 `;
 export const Button = forwardRef((props, ref) => {
   return renderActionableComponent(props, ref, {
@@ -94,9 +194,8 @@ const ButtonBasic = forwardRef((props, ref) => {
     loading,
     constraints = [],
     autoFocus,
-    appearance = "custom",
+    appearance = "navi",
     discrete,
-    style = {},
     children,
     ...rest
   } = props;
@@ -109,57 +208,49 @@ const ButtonBasic = forwardRef((props, ref) => {
     loading || (contextLoading && contextLoadingElement === innerRef.current);
   const innerReadOnly = readOnly || contextReadOnly || innerLoading;
   const innerDisabled = disabled || contextDisabled;
-  let {
-    border,
-    borderWidth = border === "none" || discrete ? 0 : 1,
-    outlineWidth = discrete ? 0 : 1,
-    borderColor = "light-dark(#767676, #8e8e93)",
-    ...restStyle
-  } = style;
-  borderWidth = resolveCSSSize(borderWidth);
-  outlineWidth = resolveCSSSize(outlineWidth);
+
+  let buttonChildren;
+  if (appearance === "navi") {
+    buttonChildren = <NaviButton buttonRef={innerRef}>{children}</NaviButton>;
+  } else {
+    buttonChildren = children;
+  }
 
   return (
     <button
       {...rest}
       ref={innerRef}
-      data-custom={appearance === "custom" ? "" : undefined}
-      data-readonly-silent={innerReadOnly ? "" : undefined}
+      className={appearance === "navi" ? "navi_button" : undefined}
+      data-discrete={discrete ? "" : undefined}
       data-readonly={innerReadOnly ? "" : undefined}
+      data-readonly-silent={innerLoading ? "" : undefined}
+      data-disabled={innerDisabled ? "" : undefined}
+      data-validation-message-arrow-x="center"
       aria-busy={innerLoading}
-      style={{
-        ...restStyle,
-      }}
     >
-      <LoadableInlineElement
+      <LoaderBackground
         loading={innerLoading}
         inset={-1}
         color="light-dark(#355fcc, #3b82f6)"
       >
-        <span
-          className="navi_button_content"
-          data-field=""
-          data-field-with-background=""
-          data-field-with-hover=""
-          data-field-with-border={borderWidth ? "" : undefined}
-          data-field-with-border-hover={discrete ? "" : undefined}
-          data-field-with-background-hover={discrete ? "" : undefined}
-          data-validation-message-arrow-x="center"
-          data-readonly={innerReadOnly ? "" : undefined}
-          data-disabled={innerDisabled ? "" : undefined}
-          style={{
-            "--field-border-width": `${borderWidth}px`,
-            "--field-outline-width": `${outlineWidth}px`,
-            "--field-border-color": borderColor,
-          }}
-        >
-          {children}
-          <span className="navi_button_shadow"></span>
-        </span>
-      </LoadableInlineElement>
+        {buttonChildren}
+      </LoaderBackground>
     </button>
   );
 });
+const NaviButton = ({ buttonRef, children }) => {
+  const ref = useRef();
+  useLayoutEffect(() => {
+    return initCustomField(buttonRef.current, buttonRef.current);
+  }, []);
+
+  return (
+    <span ref={ref} className="navi_button_content">
+      {children}
+      <span className="navi_button_shadow"></span>
+    </span>
+  );
+};
 
 const ButtonWithAction = forwardRef((props, ref) => {
   const {
@@ -217,13 +308,22 @@ const ButtonWithAction = forwardRef((props, ref) => {
 });
 
 const ButtonInsideForm = forwardRef((props, ref) => {
-  const { formContext, type, onClick, children, loading, ...rest } = props;
-  const formLoading = formContext.loading;
+  const {
+    // eslint-disable-next-line no-unused-vars
+    formContext,
+    type,
+    onClick,
+    children,
+    loading,
+    readOnly,
+    ...rest
+  } = props;
   const innerRef = useRef();
   useImperativeHandle(ref, () => innerRef.current);
 
   const wouldSubmitFormByType = type === "submit" || type === "image";
-  const innerLoading = loading || (formLoading && wouldSubmitFormByType);
+  const innerLoading = loading;
+  const innerReadOnly = readOnly;
   const handleClick = (event) => {
     const buttonElement = innerRef.current;
     const { form } = buttonElement;
@@ -262,6 +362,7 @@ const ButtonInsideForm = forwardRef((props, ref) => {
       ref={innerRef}
       type={type}
       loading={innerLoading}
+      readOnly={innerReadOnly}
       onClick={(event) => {
         handleClick(event);
         onClick?.(event);
@@ -273,8 +374,10 @@ const ButtonInsideForm = forwardRef((props, ref) => {
 });
 
 const ButtonWithActionInsideForm = forwardRef((props, ref) => {
+  const formAction = useContext(FormActionContext);
   const {
-    formContext,
+    // eslint-disable-next-line no-unused-vars
+    formContext, // to avoid passing it to the button element
     type,
     action,
     loading,
@@ -294,7 +397,7 @@ const ButtonWithActionInsideForm = forwardRef((props, ref) => {
       `<Button type="${type}" /> should not have their own action`,
     );
   }
-  const { formParamsSignal } = formContext;
+  const formParamsSignal = getActionPrivateProperties(formAction).paramsSignal;
   const innerRef = useRef();
   useImperativeHandle(ref, () => innerRef.current);
   const actionBoundToFormParams = useAction(action, formParamsSignal);

package/src/components/field/custom_field.js

@@ -0,0 +1,106 @@
+import { createPubSub } from "@jsenv/dom";
+
+export const initCustomField = (customField, field) => {
+  const [teardown, addTeardown] = createPubSub();
+
+  const addEventListener = (element, eventType, listener) => {
+    element.addEventListener(eventType, listener);
+    return addTeardown(() => {
+      element.removeEventListener(eventType, listener);
+    });
+  };
+  const updateBooleanAttribute = (attributeName, isPresent) => {
+    if (isPresent) {
+      customField.setAttribute(attributeName, "");
+    } else {
+      customField.removeAttribute(attributeName);
+    }
+  };
+  const checkPseudoClasses = () => {
+    const hover = field.matches(":hover");
+    const active = field.matches(":active");
+    const checked = field.matches(":checked");
+    const focus = field.matches(":focus");
+    const focusVisible = field.matches(":focus-visible");
+    const valid = field.matches(":valid");
+    const invalid = field.matches(":invalid");
+    updateBooleanAttribute(`data-hover`, hover);
+    updateBooleanAttribute(`data-active`, active);
+    updateBooleanAttribute(`data-checked`, checked);
+    updateBooleanAttribute(`data-focus`, focus);
+    updateBooleanAttribute(`data-focus-visible`, focusVisible);
+    updateBooleanAttribute(`data-valid`, valid);
+    updateBooleanAttribute(`data-invalid`, invalid);
+  };
+
+  // :hover
+  addEventListener(field, "mouseenter", checkPseudoClasses);
+  addEventListener(field, "mouseleave", checkPseudoClasses);
+  // :active
+  addEventListener(field, "mousedown", checkPseudoClasses);
+  addEventListener(document, "mouseup", checkPseudoClasses);
+  // :focus
+  addEventListener(field, "focusin", checkPseudoClasses);
+  addEventListener(field, "focusout", checkPseudoClasses);
+  // :focus-visible
+  addEventListener(document, "keydown", checkPseudoClasses);
+  addEventListener(document, "keyup", checkPseudoClasses);
+  // :checked
+  if (field.type === "checkbox") {
+    // Listen to user interactions
+    addEventListener(field, "input", checkPseudoClasses);
+
+    // Intercept programmatic changes to .checked property
+    const originalDescriptor = Object.getOwnPropertyDescriptor(
+      HTMLInputElement.prototype,
+      "checked",
+    );
+    Object.defineProperty(field, "checked", {
+      get: originalDescriptor.get,
+      set(value) {
+        originalDescriptor.set.call(this, value);
+        checkPseudoClasses();
+      },
+      configurable: true,
+    });
+    addTeardown(() => {
+      // Restore original property descriptor
+      Object.defineProperty(field, "checked", originalDescriptor);
+    });
+  } else if (field.type === "radio") {
+    // Listen to changes on the radio group
+    const radioSet =
+      field.closest("[data-radio-list], fieldset, form") || document;
+    addEventListener(radioSet, "input", checkPseudoClasses);
+
+    // Intercept programmatic changes to .checked property
+    const originalDescriptor = Object.getOwnPropertyDescriptor(
+      HTMLInputElement.prototype,
+      "checked",
+    );
+    Object.defineProperty(field, "checked", {
+      get: originalDescriptor.get,
+      set(value) {
+        originalDescriptor.set.call(this, value);
+        checkPseudoClasses();
+      },
+      configurable: true,
+    });
+    addTeardown(() => {
+      // Restore original property descriptor
+      Object.defineProperty(field, "checked", originalDescriptor);
+    });
+  } else if (field.tagName === "INPUT") {
+    addEventListener(field, "input", checkPseudoClasses);
+  }
+
+  // just in case + catch use forcing them in chrome devtools
+  const interval = setInterval(() => {
+    checkPseudoClasses();
+  }, 150);
+  addTeardown(() => {
+    clearInterval(interval);
+  });
+
+  return teardown;
+};