@jsenv/navi 0.27.47 → 0.27.49

package/dist/jsenv_navi.js

@@ -15447,7 +15447,12 @@ const asControlHostValue = (
     if (type === "datetime-local") {
       return asDatetimeLocalString(jsValue);
     }
-    if (type === "number" || type === "range" || inputMode === "numeric") {
+    if (
+      type === "number" ||
+      type === "range" ||
+      inputMode === "numeric" ||
+      inputMode === "decimal"
+    ) {
       return asNumberString(jsValue);
     }
     if (type === "color") {
@@ -15521,7 +15526,8 @@ const readControlValue = (controlHost) => {
     if (
       type === "number" ||
       type === "range" ||
-      controlHost.inputMode === "numeric"
+      controlHost.inputMode === "numeric" ||
+      controlHost.inputMode === "decimal"
     ) {
       return readNumberFromInput(controlHost);
     }
@@ -19426,7 +19432,11 @@ const REQUIRED_CONSTRAINT = {
       return naviI18n("constraint.required.time");
     }
     const inputMode = field.controlHostProps.inputMode;
-    if (type === "number" || inputMode === "numeric") {
+    if (
+      type === "number" ||
+      inputMode === "numeric" ||
+      inputMode === "decimal"
+    ) {
       return naviI18n("constraint.required.number");
     }
     if (type === "datetime-local") {
@@ -19587,7 +19597,8 @@ const MAX_LENGTH_CONSTRAINT = {
     } else if (!isTextarea) {
       return null;
     }
-    const maxLength = field.controlHostProps.maxLength ?? field.props?.maxLengthGuard;
+    const maxLength =
+      field.controlHostProps.maxLength ?? field.props?.maxLengthGuard;
     if (maxLength === undefined) {
       return null;
     }
@@ -19630,7 +19641,8 @@ const TYPE_NUMBER_CONSTRAINT = {
     }
     const type = field.controlHostProps.type;
     const inputMode = field.controlHostProps.inputMode;
-    const isNumber = type === "number" || inputMode === "numeric";
+    const isNumber =
+      type === "number" || inputMode === "numeric" || inputMode === "decimal";
     if (!isNumber) {
       return null;
     }
@@ -19711,7 +19723,8 @@ const MIN_CONSTRAINT = {
     if (!valueAsString) {
       return null;
     }
-    const isNumber = type === "number" || inputMode === "numeric";
+    const isNumber =
+      type === "number" || inputMode === "numeric" || inputMode === "decimal";
     if (isNumber) {
       const minNumber = parseFloat(minString);
       if (isNaN(minNumber)) {
@@ -19818,7 +19831,8 @@ const MAX_CONSTRAINT = {
     if (!valueAsString) {
       return null;
     }
-    const isNumber = type === "number" || inputMode === "numeric";
+    const isNumber =
+      type === "number" || inputMode === "numeric" || inputMode === "decimal";
     if (isNumber) {
       const maxNumber = parseFloat(maxString);
       if (isNaN(maxNumber)) {
@@ -19940,7 +19954,8 @@ const STEP_CONSTRAINT = {
     }
     const type = field.controlHostProps.type;
     const inputMode = field.controlHostProps.inputMode;
-    const isNumericText = type === "text" && inputMode === "numeric";
+    const isNumericText =
+      type === "text" && (inputMode === "numeric" || inputMode === "decimal");
     if (!isNumericText && !STEP_SUPPORTED_TYPE_SET.has(type)) {
       return null;
     }
@@ -21279,7 +21294,7 @@ const isAncestorOpen = (ancestor) => {
  *   the browser's built-in scroll-into-view that accompanies focus.
  * @param {boolean} [options.focusVisible]
  *   Passed as `focusVisible` to `element.focus()`.
- * @param {boolean} [options.autoSelect]
+ * @param {boolean} [options.autoFocusSelect]
  *   When true, also calls `element.select()` after focusing (useful for text inputs).
  * @returns {Function} triggerAutofocus — can be called manually with a synthetic
  *   event to re-run the focus logic outside of the layout-effect lifecycle.
@@ -21392,7 +21407,7 @@ const useAutoFocus = (
         ? ""
         : autoFocus
       : undefined,
-    "navi-autofocus-select": autoFocus && autoSelect ? "" : undefined,
+    "navi-autofocus-select": autoSelect ? "" : undefined,
   };
 };
 
@@ -21909,7 +21924,7 @@ const CONTROL_PROP_SET = new Set([
 
   "autoFocus",
   "autoFocusVisible",
-  "autoSelect",
+  "autoFocusSelect",
 
   "onMouseDown",
   "onClick",
@@ -24573,11 +24588,11 @@ const useInteractiveProps = (props, {
     const {
       autoFocus,
       autoFocusVisible,
-      autoSelect
+      autoFocusSelect
     } = props;
     const autoFocusProps = useAutoFocus(ref, autoFocus, {
       focusVisible: autoFocusVisible,
-      autoSelect
+      autoSelect: autoFocusSelect
     });
     Object.assign(controlHostProps, autoFocusProps);
   }
@@ -32124,7 +32139,6 @@ const NAVI_TYPE_DEFAULTS = {
   },
   navi_number: {
     type: "text",
-    inputMode: "numeric",
     autoCorrect: "off",
     spellcheck: false,
     autoComplete: "off",
@@ -32203,6 +32217,16 @@ const resolveInputProps = (props) => {
   if (!currentTypeDefaults) {
     return;
   }
+  // For navi_number: choose inputMode based on whether step/min/max suggest decimals.
+  // inputMode="numeric" (integer keyboard) vs "decimal" (keyboard with decimal separator).
+  if (currentType === "navi_number" && props.inputMode === undefined) {
+    props.inputMode =
+      hasDecimalPlaces(props.step) ||
+      hasDecimalPlaces(props.min) ||
+      hasDecimalPlaces(props.max)
+        ? "decimal"
+        : "numeric";
+  }
   for (const key of Object.keys(currentTypeDefaults)) {
     if (props[key] === undefined) {
       props[key] = currentTypeDefaults[key];
@@ -32297,6 +32321,14 @@ const STEP_FORMATTER_BY_TYPE = {
   "datetime": timeStringToSeconds,
 };
 
+const hasDecimalPlaces = (value) => {
+  if (value === undefined || value === null) {
+    return false;
+  }
+  const num = Number(value);
+  return !isNaN(num) && !Number.isInteger(num);
+};
+
 installImportMetaCssBuild(import.meta);const css$y = /* css */`
   @layer navi {
     .navi_input_range {
@@ -32669,7 +32701,7 @@ const RangePseudoElements = ["::-navi-loader"];
 
 const InputModeResolver = props => {
   const Next = useNextResolver();
-  if (props.inputMode === "numeric") {
+  if (props.inputMode === "numeric" || props.inputMode === "decimal") {
     return jsx(InputModeNumeric, {
       ...props
     });
@@ -33853,7 +33885,7 @@ const Editable = props => {
     maxLength,
     pattern,
     wrapperProps,
-    autoSelect = true,
+    autoFocusSelect = true,
     width,
     height,
     ...rest
@@ -33898,7 +33930,7 @@ const Editable = props => {
     valueSignal: valueSignal,
     autoFocus: editing,
     autoFocusVisible: true,
-    autoSelect: autoSelect,
+    autoFocusSelect: autoFocusSelect,
     cancelOnEscape: true,
     cancelOnBlurInvalid: true,
     constraints: constraints,
@@ -35087,7 +35119,11 @@ const InputDurationPart = ({
   return jsxs(Label, {
     flex: "y",
     "data-separator": separator || undefined,
-    children: [jsx(Input, {
+    children: [jsx(Input
+    // When autofocused this field should be selected
+    // this help to modify the value on mobile
+    , {
+      autoFocusSelect: true,
       type: "navi_number",
       "navi-input-type": unit,
       name: unit,