@jsenv/navi 0.3.1 → 0.3.3

package/dist/jsenv_navi.js

@@ -13320,11 +13320,12 @@ const installCustomConstraintValidation = (
       closeElementValidationMessage("cleanup");
     };
 
-    failedConstraintInfo.target || elementReceivingValidationMessage;
-
+    const anchorElement =
+      failedConstraintInfo.target || elementReceivingValidationMessage;
     validationInterface.validationMessage = openCallout(
       failedConstraintInfo.message,
       {
+        anchorElement,
         level: failedConstraintInfo.level,
         closeOnClickOutside: failedConstraintInfo.closeOnClickOutside,
         onClose: () => {
@@ -20572,6 +20573,7 @@ const InputTextualBasic = forwardRef((props, ref) => {
     autoSelect,
     appearance = "navi",
     accentColor,
+    style,
     width,
     height,
     ...rest
@@ -20589,12 +20591,20 @@ const InputTextualBasic = forwardRef((props, ref) => {
     autoSelect
   });
   useConstraints(innerRef, constraints);
+  const innerStyle = {
+    ...style
+  };
+  if (width !== undefined) {
+    innerStyle.width = width;
+  }
+  if (height !== undefined) {
+    innerStyle.height = height;
+  }
   const inputTextual = jsx("input", {
     ...rest,
     ref: innerRef,
     className: appearance === "navi" ? "navi_input" : undefined,
-    width: width,
-    height: height,
+    style: innerStyle,
     type: type,
     "data-value": uiState,
     value: innerValue,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/navi",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "Library of components including navigation to create frontend applications",
   "repository": {
     "type": "git",

package/src/components/field/input_textual.jsx

@@ -165,6 +165,7 @@ const InputTextualBasic = forwardRef((props, ref) => {
     autoSelect,
     appearance = "navi",
     accentColor,
+    style,
     width,
     height,
     ...rest
@@ -187,13 +188,19 @@ const InputTextualBasic = forwardRef((props, ref) => {
   });
   useConstraints(innerRef, constraints);
 
+  const innerStyle = { ...style };
+  if (width !== undefined) {
+    innerStyle.width = width;
+  }
+  if (height !== undefined) {
+    innerStyle.height = height;
+  }
   const inputTextual = (
     <input
       {...rest}
       ref={innerRef}
       className={appearance === "navi" ? "navi_input" : undefined}
-      width={width}
-      height={height}
+      style={innerStyle}
       type={type}
       data-value={uiState}
       value={innerValue}

package/src/validation/custom_constraint_validation.js

@@ -370,13 +370,12 @@ export const installCustomConstraintValidation = (
       closeElementValidationMessage("cleanup");
     };
 
-    const elementTarget =
+    const anchorElement =
       failedConstraintInfo.target || elementReceivingValidationMessage;
-
     validationInterface.validationMessage = openCallout(
       failedConstraintInfo.message,
       {
-        anchors: elementTarget,
+        anchorElement,
         level: failedConstraintInfo.level,
         closeOnClickOutside: failedConstraintInfo.closeOnClickOutside,
         onClose: () => {