@jsenv/navi 0.16.60 → 0.17.1

package/dist/jsenv_navi.js

@@ -4858,6 +4858,15 @@ window.addEventListener("unhandledrejection", (event) => {
   }
 });
 
+const useCancelPrevious = () => {
+  const cancellerRef = useRef();
+  if (!cancellerRef.current) {
+    cancellerRef.current = createRequestCanceller();
+  }
+  const canceller = cancellerRef.current;
+  return canceller;
+};
+
 /**
  * Merges a component's base className with className received from props.
  *
@@ -15571,7 +15580,114 @@ const MAX_CONSTRAINT = {
   },
 };
 
-const listenInputChange = (input, callback) => {
+const listenInputValue = (
+  input,
+  callback,
+  { waitForChange = false, debounce = 0 } = {},
+) => {
+  if (waitForChange) {
+    return listenInputValueChange(input, callback);
+  }
+  const [teardown, addTeardown] = createPubSub();
+  let currentValue = input.value;
+  let timeout;
+  let debounceTimeout;
+
+  const onAsyncEvent = (e) => {
+    timeout = setTimeout(() => {
+      onEvent(e);
+    }, 0);
+  };
+
+  let onEvent;
+  if (debounce) {
+    onEvent = (e, { skipDebounce } = {}) => {
+      clearTimeout(timeout);
+      clearTimeout(debounceTimeout);
+
+      const value = input.value;
+      if (value === currentValue) {
+        return;
+      }
+
+      if (skipDebounce) {
+        currentValue = value;
+        callback(e);
+      } else {
+        debounceTimeout = setTimeout(() => {
+          currentValue = value;
+          callback(e);
+        }, debounce);
+      }
+    };
+    // no need to wait for change events (blur, enter key)
+    // we consider this as strong interactions requesting an immediate response
+    const stop = listenInputValueChange(input, (e) => {
+      onEvent(e, { skipDebounce: true });
+    });
+    addTeardown(() => {
+      stop();
+    });
+  } else {
+    onEvent = (e) => {
+      clearTimeout(timeout);
+      const value = input.value;
+      if (value === currentValue) {
+        return;
+      }
+      currentValue = value;
+      callback(e);
+    };
+    // Autocomplete, programmatic changes, form restoration
+    input.addEventListener("change", onEvent);
+    addTeardown(() => {
+      input.removeEventListener("change", onEvent);
+    });
+  }
+
+  // Standard user input (typing)
+  input.addEventListener("input", onEvent);
+  addTeardown(() => {
+    input.removeEventListener("input", 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 +16447,38 @@ 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 closestElementWithActionAttr = element.closest("[data-action]");
+    const stop = listenInputValue(
+      element,
+      (e) => {
+        dispatchActionRequestedCustomEvent(elementWithAction, {
+          event: e,
+          requester: element,
+        });
+      },
+      {
+        waitForChange: closestElementWithActionAttr.hasAttribute(
+          "data-action-after-change",
+        ),
+        debounce: closestElementWithActionAttr.hasAttribute(
+          "data-action-debounce",
+        )
+          ? parseFloat(
+              closestElementWithActionAttr.getAttribute("data-action-debounce"),
+            )
+          : undefined,
+      },
+    );
     addTeardown(() => {
       stop();
     });
@@ -19246,6 +19378,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 +22726,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 +22862,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 +22981,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 +23021,8 @@ const InputTextualWithAction = props => {
   const uiState = useContext(UIStateContext);
   const {
     action,
+    actionDebounce,
+    actionAfterChange,
     loading,
     onCancel,
     onActionPrevented,
@@ -22942,6 +23077,8 @@ const InputTextualWithAction = props => {
   });
   return jsx(InputTextualBasic, {
     "data-action": boundAction.name,
+    "data-action-debounce": actionDebounce,
+    "data-action-after-change": actionAfterChange ? "" : undefined,
     ...rest,
     ref: ref,
     loading: loading || actionLoading
@@ -28780,5 +28917,5 @@ const UserSvg = () => jsx("svg", {
   })
 });
 
-export { ActionRenderer, ActiveKeyboardShortcuts, Address, BadgeCount, Box, Button, ButtonCopyToClipboard, Caption, CheckSvg, Checkbox, CheckboxList, Code, Col, Colgroup, ConstructionSvg, Details, DialogLayout, Editable, ErrorBoundaryContext, ExclamationSvg, EyeClosedSvg, EyeSvg, Form, Group, HeartSvg, HomeSvg, Icon, Image, Input, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, MessageBox, Paragraph, Radio, RadioList, Route, RouteLink, Routes, RowNumberCol, RowNumberTableCell, SINGLE_SPACE_CONSTRAINT, SVGMaskOverlay, SearchSvg, Select, SelectionContext, Separator, SettingsSvg, StarSvg, SummaryMarker, Svg, Tab, TabList, Table, TableCell, Tbody, Text, Thead, Title, Tr, UITransition, UserSvg, ViewportLayout, actionIntegratedVia, addCustomMessage, clearAllRoutes, compareTwoJsValues, createAction, createAvailableConstraint, createRequestCanceller, createSelectionKeyboardShortcuts, enableDebugActions, enableDebugOnDocumentLoading, forwardActionRequested, installCustomConstraintValidation, isCellSelected, isColumnSelected, isRowSelected, localStorageSignal, navBack, navForward, navTo, openCallout, rawUrlPart, reload, removeCustomMessage, requestAction, rerunActions, resource, setBaseUrl, setupRoutes, stateSignal, stopLoad, stringifyTableSelectionValue, updateActions, useActionData, useActionStatus, useArraySignalMembership, useCalloutClose, useCellsAndColumns, useConstraintValidityState, useDependenciesDiff, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useKeyboardShortcuts, useMatchingRouteInfo, useNavState$1 as useNavState, useRouteStatus, useRunOnMount, useSelectableElement, useSelectionController, useSignalSync, useStateArray, useTitleLevel, useUrlSearchParam, valueInLocalStorage };
+export { ActionRenderer, ActiveKeyboardShortcuts, Address, BadgeCount, Box, Button, ButtonCopyToClipboard, Caption, CheckSvg, Checkbox, CheckboxList, Code, Col, Colgroup, ConstructionSvg, Details, DialogLayout, Editable, ErrorBoundaryContext, ExclamationSvg, EyeClosedSvg, EyeSvg, Form, Group, HeartSvg, HomeSvg, Icon, Image, Input, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, MessageBox, Paragraph, Radio, RadioList, Route, RouteLink, Routes, RowNumberCol, RowNumberTableCell, SINGLE_SPACE_CONSTRAINT, SVGMaskOverlay, SearchSvg, Select, SelectionContext, Separator, SettingsSvg, StarSvg, SummaryMarker, Svg, Tab, TabList, Table, TableCell, Tbody, Text, Thead, Title, Tr, UITransition, UserSvg, ViewportLayout, actionIntegratedVia, addCustomMessage, clearAllRoutes, compareTwoJsValues, createAction, createAvailableConstraint, createRequestCanceller, createSelectionKeyboardShortcuts, enableDebugActions, enableDebugOnDocumentLoading, forwardActionRequested, installCustomConstraintValidation, isCellSelected, isColumnSelected, isRowSelected, localStorageSignal, navBack, navForward, navTo, openCallout, rawUrlPart, reload, removeCustomMessage, requestAction, rerunActions, resource, setBaseUrl, setupRoutes, stateSignal, stopLoad, stringifyTableSelectionValue, updateActions, useActionData, useActionStatus, useArraySignalMembership, useCalloutClose, useCancelPrevious, useCellsAndColumns, useConstraintValidityState, useDependenciesDiff, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useKeyboardShortcuts, useMatchingRouteInfo, useNavState$1 as useNavState, useRouteStatus, useRunOnMount, useSelectableElement, useSelectionController, useSignalSync, useStateArray, useTitleLevel, useUrlSearchParam, valueInLocalStorage };
 //# sourceMappingURL=jsenv_navi.js.map