@hitachivantara/uikit-react-core 5.96.1 → 5.96.3

package/dist/cjs/BaseInput/validations.cjs

@@ -1,24 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const isNumeric = (num) => (
-  // to prevent Number( <spaces> ) = 0
-  num.trim().length > 0 && !Number.isNaN(Number(num))
-);
-const isEmail = (email) => {
-  const regexp = /^[^\\s]+[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?[.])+[a-z0-9](?:[a-z0-9-]*[a-z0-9])$/i;
-  return regexp.test(email);
+const isTypeValidationIgnored = (type) => {
+  return type === "text" || type === "password";
 };
-const computeValidationType = (type) => {
-  switch (type) {
-    case "number":
-      return "number";
-    case "email":
-      return "email";
-    default:
-      return "none";
-  }
-};
-const hasBuiltInValidations = (required, validationType, minCharQuantity, maxCharQuantity, validation, inputProps) => required || validationType !== "none" || minCharQuantity != null || maxCharQuantity != null || validation != null || inputProps?.required != null || inputProps?.minLength != null || inputProps?.maxLength != null || inputProps?.min != null || inputProps?.max != null || inputProps?.type != null && inputProps?.type !== "text" && inputProps?.type !== "password" || inputProps?.pattern != null;
+const hasBuiltInValidations = (required, inputType, minCharQuantity, maxCharQuantity, validation, inputProps) => required || !isTypeValidationIgnored(inputType) || minCharQuantity != null || maxCharQuantity != null || validation != null || inputProps?.required != null || inputProps?.minLength != null || inputProps?.maxLength != null || inputProps?.min != null || inputProps?.max != null || inputProps?.type && !isTypeValidationIgnored(inputProps.type) || inputProps?.pattern != null;
 const computeValidationState = (inputValidity, isEmptyValue) => {
   if (inputValidity.valid && isEmptyValue) {
     return "standBy";
@@ -43,19 +28,10 @@ const computeValidationMessage = (inputValidity, errorMessages) => {
   }
   return errorMessages.error;
 };
-const validateInput = (input, required, minCharQuantity, maxCharQuantity, validationType, validation) => {
+const validateInput = (input, required, minCharQuantity, maxCharQuantity, validation) => {
   const inputValidity = {
-    valid: input?.validity?.valid ?? true,
-    badInput: input?.validity?.badInput,
-    customError: input?.validity?.customError,
-    patternMismatch: input?.validity?.patternMismatch,
-    rangeOverflow: input?.validity?.rangeOverflow,
-    rangeUnderflow: input?.validity?.rangeUnderflow,
-    stepMismatch: input?.validity?.stepMismatch,
-    tooLong: input?.validity?.tooLong,
-    tooShort: input?.validity?.tooShort,
-    typeMismatch: input?.validity?.typeMismatch,
-    valueMissing: input?.validity?.valueMissing
+    ...input?.validity,
+    valid: input?.validity?.valid ?? true
   };
   const value = input?.value;
   if (!value) {
@@ -72,20 +48,6 @@ const validateInput = (input, required, minCharQuantity, maxCharQuantity, valida
       inputValidity.tooLong = true;
       inputValidity.valid = false;
     }
-    switch (validationType) {
-      case "number":
-        if (!isNumeric(value)) {
-          inputValidity.typeMismatch = true;
-          inputValidity.valid = false;
-        }
-        break;
-      case "email":
-        if (!isEmail(value)) {
-          inputValidity.typeMismatch = true;
-          inputValidity.valid = false;
-        }
-        break;
-    }
     if (validation != null && !validation(value)) {
       inputValidity.customError = true;
       inputValidity.valid = false;
@@ -94,15 +56,19 @@ const validateInput = (input, required, minCharQuantity, maxCharQuantity, valida
   return inputValidity;
 };
 const DEFAULT_ERROR_MESSAGES = {
+  /** The value when a validation fails. */
   error: "Invalid value",
-  requiredError: "The value is required",
-  minCharError: "The value is too short",
+  /** The message that appears when there are too many characters. */
   maxCharError: "The value is too long",
+  /** The message that appears when there are too few characters. */
+  minCharError: "The value is too short",
+  /** The message that appears when the input is empty and required. */
+  requiredError: "The value is required",
+  /** The message that appears when the input is value is incompatible with the expected type. */
   typeMismatchError: "Invalid value"
 };
 exports.DEFAULT_ERROR_MESSAGES = DEFAULT_ERROR_MESSAGES;
 exports.computeValidationMessage = computeValidationMessage;
 exports.computeValidationState = computeValidationState;
-exports.computeValidationType = computeValidationType;
 exports.hasBuiltInValidations = hasBuiltInValidations;
 exports.validateInput = validateInput;

package/dist/cjs/Input/Input.cjs

@@ -115,19 +115,17 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
       validationMessages?.typeMismatchError
     ]
   );
-  const validationType = React.useMemo(() => validations.computeValidationType(type), [type]);
   const performValidation = React.useCallback(() => {
     const inputValidity = validations.validateInput(
       inputRef.current,
       required,
       minCharQuantity,
       maxCharQuantity,
-      validationType,
       validation
     );
     setValidationState(validations.computeValidationState(inputValidity, isEmptyValue));
     setValidationMessage(
-      validations.computeValidationMessage(inputValidity, errorMessages)
+      validations.computeValidationMessage(inputValidity, errorMessages) || ""
     );
     return inputValidity;
   }, [
@@ -138,12 +136,11 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
     required,
     setValidationMessage,
     setValidationState,
-    validation,
-    validationType
+    validation
   ]);
   const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && validations.hasBuiltInValidations(
     required,
-    validationType,
+    type,
     minCharQuantity,
     maxCharQuantity,
     validation,
@@ -157,12 +154,7 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
     if (type === "password") {
       return revealPassword ? "text" : "password";
     }
-    if (type === "search") {
-      return "search";
-    }
-    if (type === "number") {
-      return "number";
-    }
+    if (["search", "number", "email"].includes(type)) return type;
     return "text";
   }, [revealPassword, type]);
   const [suggestionValues, setSuggestionValues] = React.useState(null);

package/dist/cjs/TagsInput/TagsInput.cjs

@@ -93,7 +93,7 @@ const HvTagsInput = React.forwardRef(
       (currValue) => {
         if (maxTagsQuantity !== null && maxTagsQuantity !== void 0 && currValue.length > maxTagsQuantity) {
           setValidationState("invalid");
-          setValidationMessage(errorMessages.maxCharError);
+          setValidationMessage(errorMessages.maxCharError || "");
           setStateValid(false);
         } else {
           setValidationState("valid");

package/dist/cjs/TagsInput/TagsInput.styles.cjs

@@ -83,10 +83,13 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTagsInput
     border: "none",
     margin: 0,
     padding: 0,
-    ...uikitStyles.theme.typography.caption1,
+    ...uikitStyles.theme.typography.body,
     backgroundColor: "transparent",
     outline: "none",
-    boxShadow: "none"
+    boxShadow: "none",
+    "&::placeholder": {
+      color: uikitStyles.theme.colors.textSubtle
+    }
   },
   /** @deprecated unused.  use `:focus` or `:focus-visible` instead */
   tagSelected: {},

package/dist/cjs/TextArea/TextArea.cjs

@@ -88,12 +88,11 @@ const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
       required,
       minCharQuantity,
       maxCharQuantity,
-      "none",
       validation
     );
     setValidationState(validations.computeValidationState(inputValidity, isEmptyValue));
     setValidationMessage(
-      validations.computeValidationMessage(inputValidity, errorMessages)
+      validations.computeValidationMessage(inputValidity, errorMessages) || ""
     );
     return inputValidity;
   }, [
@@ -164,7 +163,7 @@ const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
   }, [focused, isEmptyValue, performValidation]);
   const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && validations.hasBuiltInValidations(
     required,
-    "none",
+    "text",
     minCharQuantity,
     // If blockMax is true maxCharQuantity will never produce an error
     // unless the value is controlled, so we can't prevent it to overflow maxCharQuantity

package/dist/cjs/themes/pentahoPlus.cjs

@@ -194,10 +194,22 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
       classes: {
         tagsList: {
           backgroundColor: inputColors.bg,
-          padding: uikitStyles.theme.space.xxs
+          padding: uikitStyles.theme.space.xxs,
+          borderColor: uikitStyles.theme.colors.textDimmed
         },
         singleLine: {
           height: 32
+        },
+        disabled: {
+          "& .HvTagsInput-tagsList": {
+            backgroundColor: uikitStyles.theme.colors.bgDisabled,
+            "&,:hover": {
+              borderColor: uikitStyles.theme.colors.textDisabled
+            }
+          },
+          "& .HvTagsInput-chipRoot": {
+            outlineColor: uikitStyles.theme.colors.textDisabled
+          }
         }
       }
     },

package/dist/esm/BaseInput/validations.js

@@ -1,22 +1,7 @@
-const isNumeric = (num) => (
-  // to prevent Number( <spaces> ) = 0
-  num.trim().length > 0 && !Number.isNaN(Number(num))
-);
-const isEmail = (email) => {
-  const regexp = /^[^\\s]+[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?[.])+[a-z0-9](?:[a-z0-9-]*[a-z0-9])$/i;
-  return regexp.test(email);
+const isTypeValidationIgnored = (type) => {
+  return type === "text" || type === "password";
 };
-const computeValidationType = (type) => {
-  switch (type) {
-    case "number":
-      return "number";
-    case "email":
-      return "email";
-    default:
-      return "none";
-  }
-};
-const hasBuiltInValidations = (required, validationType, minCharQuantity, maxCharQuantity, validation, inputProps) => required || validationType !== "none" || minCharQuantity != null || maxCharQuantity != null || validation != null || inputProps?.required != null || inputProps?.minLength != null || inputProps?.maxLength != null || inputProps?.min != null || inputProps?.max != null || inputProps?.type != null && inputProps?.type !== "text" && inputProps?.type !== "password" || inputProps?.pattern != null;
+const hasBuiltInValidations = (required, inputType, minCharQuantity, maxCharQuantity, validation, inputProps) => required || !isTypeValidationIgnored(inputType) || minCharQuantity != null || maxCharQuantity != null || validation != null || inputProps?.required != null || inputProps?.minLength != null || inputProps?.maxLength != null || inputProps?.min != null || inputProps?.max != null || inputProps?.type && !isTypeValidationIgnored(inputProps.type) || inputProps?.pattern != null;
 const computeValidationState = (inputValidity, isEmptyValue) => {
   if (inputValidity.valid && isEmptyValue) {
     return "standBy";
@@ -41,19 +26,10 @@ const computeValidationMessage = (inputValidity, errorMessages) => {
   }
   return errorMessages.error;
 };
-const validateInput = (input, required, minCharQuantity, maxCharQuantity, validationType, validation) => {
+const validateInput = (input, required, minCharQuantity, maxCharQuantity, validation) => {
   const inputValidity = {
-    valid: input?.validity?.valid ?? true,
-    badInput: input?.validity?.badInput,
-    customError: input?.validity?.customError,
-    patternMismatch: input?.validity?.patternMismatch,
-    rangeOverflow: input?.validity?.rangeOverflow,
-    rangeUnderflow: input?.validity?.rangeUnderflow,
-    stepMismatch: input?.validity?.stepMismatch,
-    tooLong: input?.validity?.tooLong,
-    tooShort: input?.validity?.tooShort,
-    typeMismatch: input?.validity?.typeMismatch,
-    valueMissing: input?.validity?.valueMissing
+    ...input?.validity,
+    valid: input?.validity?.valid ?? true
   };
   const value = input?.value;
   if (!value) {
@@ -70,20 +46,6 @@ const validateInput = (input, required, minCharQuantity, maxCharQuantity, valida
       inputValidity.tooLong = true;
       inputValidity.valid = false;
     }
-    switch (validationType) {
-      case "number":
-        if (!isNumeric(value)) {
-          inputValidity.typeMismatch = true;
-          inputValidity.valid = false;
-        }
-        break;
-      case "email":
-        if (!isEmail(value)) {
-          inputValidity.typeMismatch = true;
-          inputValidity.valid = false;
-        }
-        break;
-    }
     if (validation != null && !validation(value)) {
       inputValidity.customError = true;
       inputValidity.valid = false;
@@ -92,17 +54,21 @@ const validateInput = (input, required, minCharQuantity, maxCharQuantity, valida
   return inputValidity;
 };
 const DEFAULT_ERROR_MESSAGES = {
+  /** The value when a validation fails. */
   error: "Invalid value",
-  requiredError: "The value is required",
-  minCharError: "The value is too short",
+  /** The message that appears when there are too many characters. */
   maxCharError: "The value is too long",
+  /** The message that appears when there are too few characters. */
+  minCharError: "The value is too short",
+  /** The message that appears when the input is empty and required. */
+  requiredError: "The value is required",
+  /** The message that appears when the input is value is incompatible with the expected type. */
   typeMismatchError: "Invalid value"
 };
 export {
   DEFAULT_ERROR_MESSAGES,
   computeValidationMessage,
   computeValidationState,
-  computeValidationType,
   hasBuiltInValidations,
   validateInput
 };

package/dist/esm/Input/Input.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState, useMemo, useCallback, useEffect } from "react";
 import { useForkRef } from "@mui/material/utils";
 import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
-import { DEFAULT_ERROR_MESSAGES, computeValidationType, validateInput, computeValidationState, computeValidationMessage, hasBuiltInValidations } from "../BaseInput/validations.js";
+import { DEFAULT_ERROR_MESSAGES, validateInput, computeValidationState, computeValidationMessage, hasBuiltInValidations } from "../BaseInput/validations.js";
 import { HvLabelContainer } from "../FormElement/LabelContainer.js";
 import { HvSuggestions } from "../FormElement/Suggestions/Suggestions.js";
 import { useControlled } from "../hooks/useControlled.js";
@@ -114,19 +114,17 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
       validationMessages?.typeMismatchError
     ]
   );
-  const validationType = useMemo(() => computeValidationType(type), [type]);
   const performValidation = useCallback(() => {
     const inputValidity = validateInput(
       inputRef.current,
       required,
       minCharQuantity,
       maxCharQuantity,
-      validationType,
       validation
     );
     setValidationState(computeValidationState(inputValidity, isEmptyValue));
     setValidationMessage(
-      computeValidationMessage(inputValidity, errorMessages)
+      computeValidationMessage(inputValidity, errorMessages) || ""
     );
     return inputValidity;
   }, [
@@ -137,12 +135,11 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
     required,
     setValidationMessage,
     setValidationState,
-    validation,
-    validationType
+    validation
   ]);
   const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && hasBuiltInValidations(
     required,
-    validationType,
+    type,
     minCharQuantity,
     maxCharQuantity,
     validation,
@@ -156,12 +153,7 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
     if (type === "password") {
       return revealPassword ? "text" : "password";
     }
-    if (type === "search") {
-      return "search";
-    }
-    if (type === "number") {
-      return "number";
-    }
+    if (["search", "number", "email"].includes(type)) return type;
     return "text";
   }, [revealPassword, type]);
   const [suggestionValues, setSuggestionValues] = useState(null);

package/dist/esm/TagsInput/TagsInput.js

@@ -92,7 +92,7 @@ const HvTagsInput = forwardRef(
       (currValue) => {
         if (maxTagsQuantity !== null && maxTagsQuantity !== void 0 && currValue.length > maxTagsQuantity) {
           setValidationState("invalid");
-          setValidationMessage(errorMessages.maxCharError);
+          setValidationMessage(errorMessages.maxCharError || "");
           setStateValid(false);
         } else {
           setValidationState("valid");

package/dist/esm/TagsInput/TagsInput.styles.js

@@ -81,10 +81,13 @@ const { staticClasses, useClasses } = createClasses("HvTagsInput", {
     border: "none",
     margin: 0,
     padding: 0,
-    ...theme.typography.caption1,
+    ...theme.typography.body,
     backgroundColor: "transparent",
     outline: "none",
-    boxShadow: "none"
+    boxShadow: "none",
+    "&::placeholder": {
+      color: theme.colors.textSubtle
+    }
   },
   /** @deprecated unused.  use `:focus` or `:focus-visible` instead */
   tagSelected: {},

package/dist/esm/TextArea/TextArea.js

@@ -87,12 +87,11 @@ const HvTextArea = forwardRef(function HvTextArea2(props, ref) {
       required,
       minCharQuantity,
       maxCharQuantity,
-      "none",
       validation
     );
     setValidationState(computeValidationState(inputValidity, isEmptyValue));
     setValidationMessage(
-      computeValidationMessage(inputValidity, errorMessages)
+      computeValidationMessage(inputValidity, errorMessages) || ""
     );
     return inputValidity;
   }, [
@@ -163,7 +162,7 @@ const HvTextArea = forwardRef(function HvTextArea2(props, ref) {
   }, [focused, isEmptyValue, performValidation]);
   const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && hasBuiltInValidations(
     required,
-    "none",
+    "text",
     minCharQuantity,
     // If blockMax is true maxCharQuantity will never produce an error
     // unless the value is controlled, so we can't prevent it to overflow maxCharQuantity

package/dist/esm/themes/pentahoPlus.js

@@ -192,10 +192,22 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
       classes: {
         tagsList: {
           backgroundColor: inputColors.bg,
-          padding: theme.space.xxs
+          padding: theme.space.xxs,
+          borderColor: theme.colors.textDimmed
         },
         singleLine: {
           height: 32
+        },
+        disabled: {
+          "& .HvTagsInput-tagsList": {
+            backgroundColor: theme.colors.bgDisabled,
+            "&,:hover": {
+              borderColor: theme.colors.textDisabled
+            }
+          },
+          "& .HvTagsInput-chipRoot": {
+            outlineColor: theme.colors.textDisabled
+          }
         }
       }
     },

package/dist/types/index.d.ts

@@ -625,6 +625,19 @@ export declare type DeepPartial<T> = T extends {} ? Partial<{
     [P in keyof T]: DeepPartial<T[P]>;
 }> : T;
 
+declare const DEFAULT_ERROR_MESSAGES: {
+    /** The value when a validation fails. */
+    error: string;
+    /** The message that appears when there are too many characters. */
+    maxCharError: string;
+    /** The message that appears when there are too few characters. */
+    minCharError: string;
+    /** The message that appears when the input is empty and required. */
+    requiredError: string;
+    /** The message that appears when the input is value is incompatible with the expected type. */
+    typeMismatchError: string;
+};
+
 declare const DEFAULT_LABELS: {
     dropdownMenu: string;
 };
@@ -7174,18 +7187,7 @@ export declare interface HvUseTableProps extends Omit<TableProps, "role">, UseHv
 export declare interface HvUseTableRowProps extends Omit<TableRowProps, "role">, UseHvTableStylesTableRowProps, UseHvRowSelectionTableRowProps, UseHvRowExpandTableRowProps, HvTableRowProps {
 }
 
-export declare interface HvValidationMessages {
-    /** The value when a validation fails. */
-    error?: string;
-    /** The message that appears when there are too many characters. */
-    maxCharError?: string;
-    /** The message that appears when there are too few characters. */
-    minCharError?: string;
-    /** The message that appears when the input is empty and required. */
-    requiredError?: string;
-    /** The message that appears when the input is value is incompatible with the expected type. */
-    typeMismatchError?: string;
-}
+export declare type HvValidationMessages = Partial<typeof DEFAULT_ERROR_MESSAGES>;
 
 /**
  * Use a vertical layout for global navigation on wide screens. treeview mode provides structured hierarchy but overrides standard keyboard navigation.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.96.1",
+  "version": "5.96.3",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -61,7 +61,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "866c81403b508ea7748f7bbedeeca80144ceb8fa",
+  "gitHead": "e8e37e375a8b3101ac3d223d1a08ca06b53b43de",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",