@jsenv/navi 0.16.59 → 0.17.0

package/dist/jsenv_navi.js

@@ -12083,10 +12083,11 @@ const renderActionableComponent = (props, {
 }) => {
   const {
     action,
+    liveAction,
     shortcuts
   } = props;
   const formContext = useContext(FormContext);
-  const hasActionProps = Boolean(action || shortcuts && shortcuts.length > 0);
+  const hasActionProps = Boolean(action || liveAction || shortcuts && shortcuts.length > 0);
   const considerInsideForm = Boolean(formContext);
   if (hasActionProps && WithAction) {
     if (considerInsideForm && WithActionInsideForm) {
@@ -15571,7 +15572,82 @@ const MAX_CONSTRAINT = {
   },
 };
 
-const listenInputChange = (input, callback) => {
+const listenInputValue = (
+  input,
+  callback,
+  { waitForChange = false } = {},
+) => {
+  if (waitForChange) {
+    return listenInputValueChange(input, callback);
+  }
+  const [teardown, addTeardown] = createPubSub();
+  let currentValue = input.value;
+
+  let timeout;
+  const onAsyncEvent = (e) => {
+    timeout = setTimeout(() => {
+      onEvent(e);
+    }, 0);
+  };
+  const onEvent = (e) => {
+    clearTimeout(timeout);
+    const value = input.value;
+    if (value === currentValue) {
+      return;
+    }
+    currentValue = value;
+    callback(e);
+  };
+
+  // Standard user input (typing)
+  input.addEventListener("input", onEvent);
+  addTeardown(() => {
+    input.removeEventListener("input", onEvent);
+  });
+
+  // Autocomplete, programmatic changes, form restoration
+  input.addEventListener("change", onEvent);
+  addTeardown(() => {
+    input.removeEventListener("change", onEvent);
+  });
+
+  // Form reset - need to check the form
+  const form = input.form;
+  if (form) {
+    // Form reset happens asynchronously, check value after reset completes
+    form.addEventListener("reset", onAsyncEvent);
+    addTeardown(() => {
+      form.removeEventListener("reset", onAsyncEvent);
+    });
+  }
+
+  // Paste events (some browsers need special handling)
+  input.addEventListener("paste", onEvent);
+  addTeardown(() => {
+    input.removeEventListener("paste", onEvent);
+  });
+
+  // Focus events to catch programmatic changes that don't fire other events
+  // (like when value is set before user interaction)
+  input.addEventListener("focus", onEvent);
+  addTeardown(() => {
+    input.removeEventListener("focus", onEvent);
+  });
+
+  // "navi_delete_content" behaves like an async event
+  // a bit like form reset because
+  // our action will be updated async after the component re-renders
+  // and we need to wait that to happen to properly call action with the right value
+  input.addEventListener("navi_delete_content", onAsyncEvent);
+  addTeardown(() => {
+    input.removeEventListener("navi_delete_content", onAsyncEvent);
+  });
+  return () => {
+    teardown();
+  };
+};
+
+const listenInputValueChange = (input, callback) => {
   const [teardown, addTeardown] = createPubSub();
 
   let valueAtInteraction;
@@ -16331,22 +16407,28 @@ const installCustomConstraintValidation = (
     });
   }
 
-  request_on_input_change: {
+  request_on_input_value_change: {
     const isInput =
       element.tagName === "INPUT" || element.tagName === "TEXTAREA";
     if (!isInput) {
-      break request_on_input_change;
+      break request_on_input_value_change;
     }
-    const stop = listenInputChange(element, (e) => {
-      const elementWithAction = closestElementWithAction(element);
-      if (!elementWithAction) {
-        return;
-      }
-      dispatchActionRequestedCustomEvent(elementWithAction, {
-        event: e,
-        requester: element,
-      });
-    });
+    const elementWithAction = closestElementWithAction(element);
+    if (!elementWithAction) {
+      break request_on_input_value_change;
+    }
+    const stop = listenInputValue(
+      element,
+      (e) => {
+        dispatchActionRequestedCustomEvent(elementWithAction, {
+          event: e,
+          requester: element,
+        });
+      },
+      {
+        waitForChange: !element.closest("[data-live-action]"),
+      },
+    );
     addTeardown(() => {
       stop();
     });
@@ -18718,8 +18800,8 @@ const useUIStateController = (
 ) => {
   const parentUIStateController = useContext(ParentUIStateControllerContext);
   const formContext = useContext(FormContext);
-  const { id, name, onUIStateChange, action } = props;
-  const uncontrolled = !formContext && !action;
+  const { id, name, onUIStateChange, action, liveAction } = props;
+  const uncontrolled = !formContext && !action && !liveAction;
   const [navState, setNavState] = useNavState$1(id);
 
   const uiStateControllerRef = useRef();
@@ -19246,6 +19328,7 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
         --button-padding-left,
         var(--button-padding-x, var(--button-padding))
       );
+      padding: var(--button-padding, unset);
       align-items: inherit;
       justify-content: inherit;
       color: var(--x-button-color);
@@ -22593,25 +22676,45 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
       }
     }
 
-    .navi_start_icon_label {
+    .navi_input_start_icon {
       position: absolute;
       top: 0;
       bottom: 0;
       left: 0.25em;
     }
-    .navi_end_icon_label {
+    .navi_input_end_button {
       position: absolute;
       top: 0;
       right: 0.25em;
       bottom: 0;
+      display: inline-flex;
+      margin: 0;
+      padding: 0;
+      justify-content: center;
+      background: none;
+      border: none;
       opacity: 0;
       pointer-events: none;
     }
     &[data-has-value] {
-      .navi_end_icon_label {
+      .navi_input_end_button {
         opacity: 1;
+        cursor: pointer;
         pointer-events: auto;
       }
+
+      &[data-readonly] {
+        .navi_input_end_button {
+          opacity: 0;
+          pointer-events: none;
+        }
+      }
+      &[data-disabled] {
+        .navi_input_end_button {
+          opacity: 0;
+          pointer-events: none;
+        }
+      }
     }
 
     &[data-start-icon] {
@@ -22709,38 +22812,7 @@ Object.assign(PSEUDO_CLASSES, {
   ":navi-has-value": {
     attribute: "data-has-value",
     setup: (el, callback) => {
-      const onValueChange = () => {
-        callback();
-      };
-
-      // Standard user input (typing)
-      el.addEventListener("input", onValueChange);
-      // Autocomplete, programmatic changes, form restoration
-      el.addEventListener("change", onValueChange);
-      // Form reset - need to check the form
-      const form = el.form;
-      const onFormReset = () => {
-        // Form reset happens asynchronously, check value after reset completes
-        setTimeout(onValueChange, 0);
-      };
-      if (form) {
-        form.addEventListener("reset", onFormReset);
-      }
-
-      // Paste events (some browsers need special handling)
-      el.addEventListener("paste", onValueChange);
-      // Focus events to catch programmatic changes that don't fire other events
-      // (like when value is set before user interaction)
-      el.addEventListener("focus", onValueChange);
-      return () => {
-        el.removeEventListener("input", onValueChange);
-        el.removeEventListener("change", onValueChange);
-        el.removeEventListener("paste", onValueChange);
-        el.removeEventListener("focus", onValueChange);
-        if (form) {
-          form.removeEventListener("reset", onFormReset);
-        }
-      };
+      return listenInputValue(el, callback);
     },
     test: el => {
       if (el.value === "") {
@@ -22859,28 +22931,39 @@ const InputTextualBasic = props => {
       loading: innerLoading,
       color: "var(--loader-color)",
       inset: -1
-    }), innerIcon && jsx(Icon, {
-      as: "label",
+    }), innerIcon && jsx(Label, {
       htmlFor: innerId,
-      className: "navi_start_icon_label",
+      disabled: innerDisabled,
+      readOnly: innerReadOnly,
+      className: "navi_input_start_icon",
+      box: true,
       alignY: "center",
-      color: "rgba(28, 43, 52, 0.5)",
-      children: innerIcon
-    }), renderInputMemoized, cancelButton && jsx(Icon, {
-      as: "label",
+      children: jsx(Icon, {
+        color: "rgba(28, 43, 52, 0.5)",
+        children: innerIcon
+      })
+    }), renderInputMemoized, cancelButton && jsx("label", {
       htmlFor: innerId,
-      className: "navi_end_icon_label",
-      alignY: "center",
-      color: "rgba(28, 43, 52, 0.5)",
-      onMousedown: e => {
-        e.preventDefault(); // keep focus on the button
+      "data-readonly": innerReadOnly ? "" : undefined,
+      "data-disabled": innerDisabled ? "" : undefined,
+      className: "navi_input_end_button",
+      onMouseDown: e => {
+        e.preventDefault(); // keep focus in the input
       },
       onClick: () => {
+        if (innerReadOnly || innerDisabled) {
+          return;
+        }
         uiStateController.setUIState("", {
           trigger: "cancel_button"
         });
+        ref.current.value = "";
+        ref.current.dispatchEvent(new Event("navi_delete_content"));
       },
-      children: jsx(CloseSvg, {})
+      children: jsx(Icon, {
+        color: "rgba(28, 43, 52, 0.5)",
+        children: jsx(CloseSvg, {})
+      })
     })]
   });
 };
@@ -22888,6 +22971,7 @@ const InputTextualWithAction = props => {
   const uiState = useContext(UIStateContext);
   const {
     action,
+    liveAction,
     loading,
     onCancel,
     onActionPrevented,
@@ -22901,7 +22985,7 @@ const InputTextualWithAction = props => {
   } = props;
   const defaultRef = useRef();
   const ref = props.ref || defaultRef;
-  const [boundAction] = useActionBoundToOneParam(action, uiState);
+  const [boundAction] = useActionBoundToOneParam(liveAction || action, uiState);
   const {
     loading: actionLoading
   } = useActionStatus(boundAction);
@@ -22942,6 +23026,7 @@ const InputTextualWithAction = props => {
   });
   return jsx(InputTextualBasic, {
     "data-action": boundAction.name,
+    "data-live-action": liveAction ? "" : undefined,
     ...rest,
     ref: ref,
     loading: loading || actionLoading
@@ -27495,63 +27580,73 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
   @layer navi {
   }
   .navi_badge_count {
-    --x-size: 1.5em;
-    --x-border-radius: var(--border-radius);
-    --x-number-font-size: var(--font-size);
+    --x-background: var(--background);
+    --x-background-color: var(--background-color);
     position: relative;
     display: inline-block;
-
     color: var(--color, var(--x-color-contrasting));
     font-size: var(--font-size);
     vertical-align: middle;
-    border-radius: var(--x-border-radius);
-  }
-  .navi_count_badge_overflow {
-    position: relative;
-    top: -0.1em;
-  }
-  /* Ellipse */
-  .navi_badge_count[data-ellipse] {
-    padding-right: 0.4em;
-    padding-left: 0.4em;
-    background: var(--background);
-    background-color: var(--background-color, var(--background));
-    border-radius: 1em;
-  }
-  /* Circle */
-  .navi_badge_count[data-circle] {
-    width: var(--x-size);
-    height: var(--x-size);
-  }
-  .navi_badge_count_frame {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: var(--background);
-    background-color: var(--background-color, var(--background));
-    border-radius: inherit;
-    transform: translateY(-50%);
-  }
-  .navi_badge_count_text {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    font-size: var(--x-number-font-size, inherit);
-    transform: translate(-50%, -50%);
-  }
-  .navi_badge_count[data-single-char] {
-    --x-border-radius: 100%;
-    --x-number-font-size: unset;
-  }
-  .navi_badge_count[data-two-chars] {
-    --x-border-radius: 100%;
-    --x-number-font-size: 0.8em;
-  }
-  .navi_badge_count[data-three-chars] {
-    --x-border-radius: 100%;
-    --x-number-font-size: 0.6em;
+
+    .navi_count_badge_overflow {
+      position: relative;
+      top: -0.1em;
+    }
+
+    /* Ellipse */
+    &[data-ellipse] {
+      padding-right: 0.4em;
+      padding-left: 0.4em;
+      background: var(--x-background);
+      background-color: var(--x-background-color, var(--x-background));
+      border-radius: 1em;
+      &[data-loading] {
+        --x-background: transparent;
+      }
+    }
+
+    /* Circle */
+    &[data-circle] {
+      --x-size: 1.5em;
+      --x-border-radius: var(--border-radius);
+      --x-number-font-size: var(--font-size);
+
+      width: var(--x-size);
+      height: var(--x-size);
+      border-radius: var(--x-border-radius);
+      &[data-single-char] {
+        --x-border-radius: 100%;
+        --x-number-font-size: unset;
+      }
+      &[data-two-chars] {
+        --x-border-radius: 100%;
+        --x-number-font-size: 0.8em;
+      }
+      &[data-three-chars] {
+        --x-border-radius: 100%;
+        --x-number-font-size: 0.6em;
+      }
+
+      .navi_badge_count_frame {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: var(--x-background);
+        background-color: var(--x-background-color, var(--x-background));
+        border-radius: inherit;
+        transform: translateY(-50%);
+      }
+
+      .navi_badge_count_text {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        font-size: var(--x-number-font-size, inherit);
+        transform: translate(-50%, -50%);
+      }
+    }
   }
 `;
 const BadgeStyleCSSVars = {
@@ -27572,11 +27667,11 @@ const BadgeCountOverflow = () => jsx("span", {
 const MAX_CHAR_AS_CIRCLE = 3;
 const BadgeCount = ({
   children,
-  max = 99,
   maxElement = jsx(BadgeCountOverflow, {}),
   // When you use max="none" (or max > 99) it might be a good idea to force ellipse
   // so that visually the interface do not suddently switch from circle to ellipse depending on the count
   ellipse,
+  max = ellipse ? Infinity : 99,
   ...props
 }) => {
   const defaultRef = useRef();
@@ -27660,26 +27755,32 @@ const BadgeCountCircle = ({
 };
 const BadgeCountEllipse = ({
   ref,
+  loading,
   children,
   hasOverflow,
   ...props
 }) => {
-  return jsxs(Text, {
+  return jsx(Text, {
     ref: ref,
     className: "navi_badge_count",
     bold: true,
     "data-ellipse": "",
     "data-value-overflow": hasOverflow ? "" : undefined,
+    "data-loading": loading ? "" : undefined,
     ...props,
     styleCSSVars: BadgeStyleCSSVars,
     spacing: "pre",
-    children: [jsx("span", {
-      style: "user-select: none",
-      children: "\u200B"
-    }), children, jsx("span", {
-      style: "user-select: none",
-      children: "\u200B"
-    })]
+    children: loading ? jsx(Icon, {
+      children: jsx(LoadingDots, {})
+    }) : jsxs(Fragment, {
+      children: [jsx("span", {
+        style: "user-select: none",
+        children: "\u200B"
+      }), children, jsx("span", {
+        style: "user-select: none",
+        children: "\u200B"
+      })]
+    })
   });
 };