@jsenv/navi 0.18.22 → 0.18.23

package/dist/jsenv_navi.js

@@ -6485,6 +6485,7 @@ const PSEUDO_CLASSES_DEFAULT = [];
 const PSEUDO_ELEMENTS_DEFAULT = [];
 const STYLE_CSS_VARS_DEFAULT = {};
 const PROPS_CSS_VARS_DEFAULT = {};
+const CHILD_PROP_SET_DEFAULT = new Set();
 const Box = props => {
   const {
     as = "div",
@@ -6511,6 +6512,7 @@ const Box = props => {
     // -> introduced for <Input /> with a wrapped for loading, checkboxes, etc
     pseudoStateSelector,
     hasChildFunction,
+    childPropSet = CHILD_PROP_SET_DEFAULT,
     // preventInitialTransition can be used to prevent transition on mount
     // (when transition is set via props, this is done automatically)
     // so this prop is useful only when transition is enabled from "outside" (via CSS)
@@ -6765,6 +6767,10 @@ const Box = props => {
     }
     for (const propName of remainingPropKeySet) {
       const propValue = rest[propName];
+      if (childPropSet.has(propName)) {
+        childForwardedProps[propName] = propValue;
+        continue;
+      }
       const isDataAttribute = propName.startsWith("data-");
       if (isDataAttribute) {
         selfForwardedProps[propName] = propValue;
@@ -15736,6 +15742,8 @@ const fromSelectorAttribute = (messageAttributeValue) => {
   return mirror;
 };
 
+const CONSTRAINT_ATTRIBUTE_SET = new Set();
+
 const generateFieldInvalidMessage = (template, { field }) => {
   return replaceStringVars(template, {
     "{field}": () => generateThisFieldText(field),
@@ -15791,7 +15799,7 @@ const MIN_LOWER_LETTER_CONSTRAINT = {
       }
     }
     if (numberOfLowercaseChars < min) {
-      if (min === 0) {
+      if (min === 1) {
         return generateFieldInvalidMessage(
           `{field} doit contenir au moins une lettre minuscule.`,
           { field },
@@ -15805,6 +15813,9 @@ const MIN_LOWER_LETTER_CONSTRAINT = {
     return "";
   },
 };
+CONSTRAINT_ATTRIBUTE_SET.add("data-min-lower-letter");
+CONSTRAINT_ATTRIBUTE_SET.add("data-min-lower-letter-message");
+
 const MIN_UPPER_LETTER_CONSTRAINT = {
   name: "min_upper_letter",
   messageAttribute: "data-min-upper-letter-message",
@@ -15825,7 +15836,7 @@ const MIN_UPPER_LETTER_CONSTRAINT = {
       }
     }
     if (numberOfUppercaseChars < min) {
-      if (min === 0) {
+      if (min === 1) {
         return generateFieldInvalidMessage(
           `{field} doit contenir au moins une lettre majuscule.`,
           { field },
@@ -15839,6 +15850,9 @@ const MIN_UPPER_LETTER_CONSTRAINT = {
     return "";
   },
 };
+CONSTRAINT_ATTRIBUTE_SET.add("data-min-upper-letter");
+CONSTRAINT_ATTRIBUTE_SET.add("data-min-upper-letter-message");
+
 const MIN_DIGIT_CONSTRAINT = {
   name: "min_digit",
   messageAttribute: "data-min-digit-message",
@@ -15859,7 +15873,7 @@ const MIN_DIGIT_CONSTRAINT = {
       }
     }
     if (numberOfDigitChars < min) {
-      if (min === 0) {
+      if (min === 1) {
         return generateFieldInvalidMessage(
           `{field} doit contenir au moins un chiffre.`,
           { field },
@@ -15873,6 +15887,9 @@ const MIN_DIGIT_CONSTRAINT = {
     return "";
   },
 };
+CONSTRAINT_ATTRIBUTE_SET.add("data-min-digit");
+CONSTRAINT_ATTRIBUTE_SET.add("data-min-digit-message");
+
 const MIN_SPECIAL_CHAR_CONSTRAINT = {
   name: "min_special_char",
   messageAttribute: "data-min-special-char-message",
@@ -15912,6 +15929,9 @@ const MIN_SPECIAL_CHAR_CONSTRAINT = {
     return "";
   },
 };
+CONSTRAINT_ATTRIBUTE_SET.add("data-special-charset");
+CONSTRAINT_ATTRIBUTE_SET.add("data-min-special-char");
+CONSTRAINT_ATTRIBUTE_SET.add("data-min-special-char-message");
 
 const READONLY_CONSTRAINT = {
   name: "readonly",
@@ -15948,6 +15968,10 @@ const READONLY_CONSTRAINT = {
     };
   },
 };
+CONSTRAINT_ATTRIBUTE_SET.add("readOnly");
+CONSTRAINT_ATTRIBUTE_SET.add("data-readonly");
+CONSTRAINT_ATTRIBUTE_SET.add("data-readonly-message");
+CONSTRAINT_ATTRIBUTE_SET.add("data-readonly-silent");
 
 const SAME_AS_CONSTRAINT = {
   name: "same_as",
@@ -15986,6 +16010,8 @@ const SAME_AS_CONSTRAINT = {
     return `Ce champ doit être identique au précédent.`;
   },
 };
+CONSTRAINT_ATTRIBUTE_SET.add("data-same-as");
+CONSTRAINT_ATTRIBUTE_SET.add("data-same-as-message");
 
 const SINGLE_SPACE_CONSTRAINT = {
   name: "single_space",
@@ -16020,6 +16046,8 @@ const SINGLE_SPACE_CONSTRAINT = {
     return "";
   },
 };
+CONSTRAINT_ATTRIBUTE_SET.add("data-single-space");
+CONSTRAINT_ATTRIBUTE_SET.add("data-single-space-message");
 
 /**
  * https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation
@@ -16038,6 +16066,9 @@ const DISABLED_CONSTRAINT = {
     return null;
   },
 };
+CONSTRAINT_ATTRIBUTE_SET.add("disabled");
+CONSTRAINT_ATTRIBUTE_SET.add("data-disabled");
+CONSTRAINT_ATTRIBUTE_SET.add("data-disabled-message");
 
 const REQUIRED_CONSTRAINT = {
   name: "required",
@@ -16107,6 +16138,8 @@ const REQUIRED_CONSTRAINT = {
       : `Veuillez remplir ce champ.`;
   },
 };
+CONSTRAINT_ATTRIBUTE_SET.add("required");
+CONSTRAINT_ATTRIBUTE_SET.add("data-required-message");
 
 const PATTERN_CONSTRAINT = {
   name: "pattern",
@@ -16135,6 +16168,9 @@ const PATTERN_CONSTRAINT = {
     return message;
   },
 };
+CONSTRAINT_ATTRIBUTE_SET.add("pattern");
+CONSTRAINT_ATTRIBUTE_SET.add("data-pattern-message");
+
 // https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/email#validation
 const emailregex =
   /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
@@ -16158,6 +16194,7 @@ const TYPE_EMAIL_CONSTRAINT = {
     return null;
   },
 };
+CONSTRAINT_ATTRIBUTE_SET.add("data-type-message");
 
 const MIN_LENGTH_CONSTRAINT = {
   name: "min_length",
@@ -16170,7 +16207,6 @@ const MIN_LENGTH_CONSTRAINT = {
     } else if (field.tagName !== "TEXTAREA") {
       return null;
     }
-
     const minLength = field.minLength;
     if (minLength === -1) {
       return null;
@@ -16195,6 +16231,8 @@ const MIN_LENGTH_CONSTRAINT = {
     );
   },
 };
+CONSTRAINT_ATTRIBUTE_SET.add("minLength");
+CONSTRAINT_ATTRIBUTE_SET.add("data-min-length-message");
 const INPUT_TYPE_SUPPORTING_MIN_LENGTH_SET = new Set([
   "text",
   "search",
@@ -16230,6 +16268,8 @@ const MAX_LENGTH_CONSTRAINT = {
     );
   },
 };
+CONSTRAINT_ATTRIBUTE_SET.add("maxLength");
+CONSTRAINT_ATTRIBUTE_SET.add("data-max-length-message");
 const INPUT_TYPE_SUPPORTING_MAX_LENGTH_SET = new Set(
   INPUT_TYPE_SUPPORTING_MIN_LENGTH_SET,
 );
@@ -16258,6 +16298,7 @@ const TYPE_NUMBER_CONSTRAINT = {
     return null;
   },
 };
+CONSTRAINT_ATTRIBUTE_SET.add("data-type-message");
 
 const MIN_CONSTRAINT = {
   name: "min",
@@ -16311,6 +16352,8 @@ const MIN_CONSTRAINT = {
     return null;
   },
 };
+CONSTRAINT_ATTRIBUTE_SET.add("min");
+CONSTRAINT_ATTRIBUTE_SET.add("data-min-message");
 
 const MAX_CONSTRAINT = {
   name: "max",
@@ -16359,6 +16402,8 @@ const MAX_CONSTRAINT = {
     return null;
   },
 };
+CONSTRAINT_ATTRIBUTE_SET.add("max");
+CONSTRAINT_ATTRIBUTE_SET.add("data-max-message");
 
 const listenInputValue = (
   input,
@@ -16812,6 +16857,8 @@ const installCustomConstraintValidation = (
   }
 
   const isForm = element.tagName === "FORM";
+  const isInput = element.tagName === "INPUT" || element.tagName === "TEXTAREA";
+  const isCheckbox = element.tagName === "INPUT" && element.type === "checkbox";
   if (isForm) {
     formInstrumentedWeakSet.add(element);
     addTeardown(() => {
@@ -17231,8 +17278,6 @@ const installCustomConstraintValidation = (
   }
 
   request_on_input_value_change: {
-    const isInput =
-      element.tagName === "INPUT" || element.tagName === "TEXTAREA";
     if (!isInput) {
       break request_on_input_value_change;
     }
@@ -17241,6 +17286,9 @@ const installCustomConstraintValidation = (
       break request_on_input_value_change;
     }
     const closestElementWithActionAttr = element.closest("[data-action]");
+    if (closestElementWithActionAttr.tagName === "FORM") {
+      break request_on_input_value_change;
+    }
     const stop = listenInputValue(
       element,
       (e) => {
@@ -17268,8 +17316,6 @@ const installCustomConstraintValidation = (
   }
 
   request_on_checkbox_change: {
-    const isCheckbox =
-      element.tagName === "INPUT" && element.type === "checkbox";
     if (!isCheckbox) {
       break request_on_checkbox_change;
     }
@@ -17294,6 +17340,10 @@ const installCustomConstraintValidation = (
     }
     // We will dispatch "action" when "submit" occurs (code called from.submit() to bypass validation)
     const form = element;
+    if (!form.hasAttribute("data-action")) {
+      form.setAttribute("data-action", "toto");
+    }
+    form.setAttribute("novalidate", ""); // make sure browser don't prevent "submit" nor display messages
     const removeListener = addEventListener(form, "submit", (e) => {
       e.preventDefault();
       const actionCustomEvent = new CustomEvent("action", {
@@ -22067,6 +22117,8 @@ const DetailsWithConnectedAction = props => {
   });
 };
 
+CONSTRAINT_ATTRIBUTE_SET.add("data-available-message");
+
 const createAvailableConstraint = (
   // the set might be incomplete (the front usually don't have the full copy of all the items from the backend)
   // but this is already nice to help user with what we know
@@ -24328,6 +24380,7 @@ Object.assign(PSEUDO_CLASSES, {
   }
 });
 const InputPseudoElements = ["::-navi-loader"];
+const InputPropSet = new Set([...CONSTRAINT_ATTRIBUTE_SET]);
 const InputTextualBasic = props => {
   const contextReadOnly = useContext(ReadOnlyContext);
   const contextDisabled = useContext(DisabledContext);
@@ -24398,7 +24451,8 @@ const InputTextualBasic = props => {
       }
       // style management
       ,
-      baseClassName: "navi_native_input"
+      baseClassName: "navi_native_input",
+      "data-rendered-by": ".navi_input"
     });
   };
   const renderInputMemoized = useCallback(renderInput, [type, uiState, innerValue, innerOnInput, innerId]);
@@ -24429,6 +24483,7 @@ const InputTextualBasic = props => {
     pseudoClasses: InputPseudoClasses,
     pseudoElements: InputPseudoElements,
     hasChildFunction: true,
+    childPropSet: InputPropSet,
     "data-start-icon": innerIcon ? "" : undefined,
     "data-end-icon": cancelButton ? "" : undefined,
     ...remainingProps,