@hitachivantara/uikit-react-core 5.92.0 → 5.93.0

package/dist/esm/Dropdown/Dropdown.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
 import { useForkRef } from "@mui/material/utils";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvLabelContainer } from "../FormElement/LabelContainer.js";
 import { useControlled } from "../hooks/useControlled.js";
 import { useLabels } from "../hooks/useLabels.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
@@ -12,11 +13,9 @@ import { useClasses } from "./Dropdown.styles.js";
 import { staticClasses } from "./Dropdown.styles.js";
 import { getSelectionLabel, getSelected } from "./utils.js";
 import { HvDropdownList } from "./List/List.js";
-import { isInvalid } from "../FormElement/utils.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
-import { HvLabel } from "../FormElement/Label/Label.js";
-import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
 import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
+import { isInvalid } from "../FormElement/utils.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 import { HvTypography } from "../Typography/Typography.js";
 const DEFAULT_LABELS = {
@@ -195,8 +194,6 @@ const HvDropdown = fixedForwardRef(function HvDropdown2(props, ref) {
       }
     );
   };
-  const hasLabel = label != null;
-  const hasDescription = description != null;
   const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
   const isStateInvalid = isInvalid(validationState);
   let errorMessageId;
@@ -221,25 +218,20 @@ const HvDropdown = fixedForwardRef(function HvDropdown2(props, ref) {
       ),
       ...others,
       children: [
-        (hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
-          hasLabel && /* @__PURE__ */ jsx(
-            HvLabel,
-            {
-              showGutter: true,
-              id: setId(elementId, "label"),
-              label,
-              className: classes.label
-            }
-          ),
-          hasDescription && /* @__PURE__ */ jsx(
-            HvInfoMessage,
-            {
-              id: setId(elementId, "description"),
-              className: classes.description,
-              children: description
+        /* @__PURE__ */ jsx(
+          HvLabelContainer,
+          {
+            label,
+            description,
+            labelId: setId(elementId, "label"),
+            descriptionId: setId(elementId, "description"),
+            classes: {
+              root: classes.labelContainer,
+              label: classes.label,
+              description: classes.description
             }
-          )
-        ] }),
+          }
+        ),
         /* @__PURE__ */ jsx(
           HvBaseDropdown,
           {
@@ -295,7 +287,7 @@ const HvDropdown = fixedForwardRef(function HvDropdown2(props, ref) {
                 hasTooltips,
                 singleSelectionToggle,
                 "aria-label": ariaLabel,
-                "aria-labelledby": hasLabel ? setId(elementId, "label") : void 0,
+                "aria-labelledby": label ? setId(elementId, "label") : void 0,
                 height,
                 maxHeight,
                 virtualized,

package/dist/esm/Dropdown/Dropdown.styles.js

@@ -6,7 +6,7 @@ const { staticClasses, useClasses } = createClasses("HvDropdown", {
     position: "relative",
     display: "inline-block"
   },
-  labelContainer: { display: "flex", alignItems: "flex-start" },
+  labelContainer: {},
   label: {},
   description: {},
   error: {},

package/dist/esm/FileUploader/DropZone/DropZone.js

@@ -1,6 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useContext, useState, useRef } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvLabelContainer } from "../../FormElement/LabelContainer.js";
 import { useLabels } from "../../hooks/useLabels.js";
 import { useUniqueId } from "../../hooks/useUniqueId.js";
 import { HvIcon } from "../../icons.js";
@@ -10,8 +11,6 @@ import { convertUnits } from "../utils.js";
 import { useClasses } from "./DropZone.styles.js";
 import { staticClasses } from "./DropZone.styles.js";
 import { HvFormElementContext } from "../../FormElement/context.js";
-import { HvLabel } from "../../FormElement/Label/Label.js";
-import { HvInfoMessage } from "../../FormElement/InfoMessage/InfoMessage.js";
 const DEFAULT_LABELS = {
   /** Extensions of the accepted file types */
   acceptedFiles: "",
@@ -98,23 +97,26 @@ const HvDropZone = (props) => {
     });
     onFilesAdded?.(newFiles);
   };
+  const description = /* @__PURE__ */ jsxs(Fragment, { children: [
+    Number.isInteger(maxFileSize) && `${labels.sizeWarning} ${convertUnits(maxFileSize)}`,
+    labels.acceptedFiles || accept && ` (${accept?.replaceAll(",", ", ")})`
+  ] });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    !hideLabels && /* @__PURE__ */ jsxs("div", { id, className: classes.dropZoneLabelsGroup, children: [
-      /* @__PURE__ */ jsx(
-        HvLabel,
-        {
-          showGutter: true,
-          id: setId(id, "input-file-label"),
-          htmlFor: setId(id, "input-file"),
-          label: label ?? labels?.dropzone,
-          className: classes.dropZoneLabel
+    !hideLabels && /* @__PURE__ */ jsx(
+      HvLabelContainer,
+      {
+        id,
+        label: label ?? labels.dropzone,
+        description,
+        inputId: setId(id, "input-file"),
+        labelId: setId(id, "input-file-label"),
+        descriptionId: setId(id, "description"),
+        classes: {
+          root: classes.dropZoneLabelsGroup,
+          label: classes.dropZoneLabel
         }
-      ),
-      /* @__PURE__ */ jsxs(HvInfoMessage, { id: setId(id, "description"), children: [
-        Number.isInteger(maxFileSize) && `${labels?.sizeWarning} ${convertUnits(maxFileSize)}`,
-        labels?.acceptedFiles ? labels.acceptedFiles : accept && ` (${accept?.replaceAll(",", ", ")})`
-      ] })
-    ] }),
+      }
+    ),
     /* @__PURE__ */ jsxs(
       "div",
       {

package/dist/esm/FileUploader/DropZone/DropZone.styles.js

@@ -19,9 +19,6 @@ const { staticClasses, useClasses } = createClasses("HvDropZone", {
     }
   },
   dropZoneLabelsGroup: {
-    display: "flex",
-    justifyContent: "start",
-    "& label:nth-of-type(1)": {},
     "& p:nth-of-type(2)": {
       marginLeft: "auto"
     }

package/dist/esm/FilterGroup/FilterGroup.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvLabelContainer } from "../FormElement/LabelContainer.js";
 import { useControlled } from "../hooks/useControlled.js";
 import { useLabels } from "../hooks/useLabels.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
@@ -10,8 +11,6 @@ import { staticClasses } from "./FilterGroup.styles.js";
 import { HvFilterGroupProvider } from "./FilterGroupContext.js";
 import { HvFilterGroupContent } from "./FilterContent/FilterContent.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
-import { HvLabel } from "../FormElement/Label/Label.js";
-import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 const DEFAULT_LABELS = {
   /** Apply button label. */
@@ -63,8 +62,6 @@ const HvFilterGroup = forwardRef(
     const [validationMessage] = useControlled(statusMessage, "Required");
     const elementId = useUniqueId(id);
     const labels = useLabels(DEFAULT_LABELS, labelsProp);
-    const hasLabel = label != null;
-    const hasDescription = description != null;
     const canShowError = status !== void 0 || required;
     return /* @__PURE__ */ jsxs(
       HvFormElement,
@@ -78,26 +75,21 @@ const HvFilterGroup = forwardRef(
         className: cx(classes.root, className),
         ...others,
         children: [
-          (hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
-            hasLabel && /* @__PURE__ */ jsx(
-              HvLabel,
-              {
-                showGutter: true,
-                id: setId(elementId, "label"),
-                htmlFor: setId(elementId, "input"),
-                label,
-                className: classes.label
-              }
-            ),
-            hasDescription && /* @__PURE__ */ jsx(
-              HvInfoMessage,
-              {
-                id: setId(elementId, "description"),
-                className: classes.description,
-                children: description
+          /* @__PURE__ */ jsx(
+            HvLabelContainer,
+            {
+              label,
+              description,
+              inputId: setId(elementId, "input"),
+              labelId: setId(elementId, "label"),
+              descriptionId: setId(elementId, "description"),
+              classes: {
+                root: classes.labelContainer,
+                label: classes.label,
+                description: classes.description
               }
-            )
-          ] }),
+            }
+          ),
           /* @__PURE__ */ jsxs(
             HvFilterGroupProvider,
             {

package/dist/esm/FilterGroup/FilterGroup.styles.js

@@ -2,7 +2,7 @@ import { createClasses } from "@hitachivantara/uikit-react-utils";
 const { staticClasses, useClasses } = createClasses("HvFilterGroup", {
   root: {},
   label: {},
-  labelContainer: { display: "flex", alignItems: "flex-start" },
+  labelContainer: {},
   description: {},
   error: {}
 });

package/dist/esm/FormElement/InfoMessage/InfoMessage.js

@@ -13,7 +13,7 @@ const HvInfoMessage = (props) => {
     className,
     children,
     disabled: disabledProp,
-    disableGutter = false,
+    disableGutter,
     ...others
   } = useDefaultProps("HvInfoMessage", props);
   const { classes, cx } = useClasses(classesProp);

package/dist/esm/FormElement/Label/Label.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useContext } from "react";
+import { useContext, useMemo } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { setId } from "../../utils/setId.js";
 import { HvFormElementContext } from "../context.js";
@@ -25,7 +25,10 @@ const HvLabel = (props) => {
   const disabled = disabledProp ?? context.disabled;
   const required = requiredProp ?? context.required;
   const id = idProp ?? setId(context.id, "label");
-  const forId = htmlForProp || findDescriptors(children)?.input?.[0]?.id;
+  const forId = useMemo(
+    () => htmlForProp || findDescriptors(children)?.input?.[0]?.id,
+    [children, htmlForProp]
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       HvTypography,

package/dist/esm/FormElement/LabelContainer.js

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useDefaultProps, createClasses } from "@hitachivantara/uikit-react-utils";
+import { theme } from "@hitachivantara/uikit-styles";
+import { HvInfoMessage } from "./InfoMessage/InfoMessage.js";
+import { HvLabel } from "./Label/Label.js";
+const { useClasses } = createClasses("HvLabelContainer", {
+  root: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.space.xs,
+    height: 24,
+    marginBottom: theme.space.xxs
+  },
+  label: {},
+  description: {}
+});
+const HvLabelContainer = (props) => {
+  const {
+    label,
+    description,
+    inputId,
+    labelId,
+    descriptionId,
+    classes: classesProp,
+    labelProps,
+    descriptionProps,
+    children,
+    ...others
+  } = useDefaultProps("HvLabelContainer", props);
+  const { classes } = useClasses(classesProp, false);
+  if (label == null && description == null && children == null) return null;
+  return /* @__PURE__ */ jsxs("div", { className: classes.root, ...others, children: [
+    label != null && /* @__PURE__ */ jsx(
+      HvLabel,
+      {
+        id: labelId,
+        className: classes.label,
+        htmlFor: inputId,
+        label,
+        ...labelProps
+      }
+    ),
+    description != null && /* @__PURE__ */ jsx(
+      HvInfoMessage,
+      {
+        disableGutter: true,
+        id: descriptionId,
+        className: classes.description,
+        ...descriptionProps,
+        children: description
+      }
+    ),
+    children
+  ] });
+};
+export {
+  HvLabelContainer
+};

package/dist/esm/FormElement/WarningText/WarningText.js

@@ -15,10 +15,10 @@ const HvWarningText = (props) => {
     className,
     id: idProp,
     disabled: disabledProp,
-    disableGutter = false,
-    disableBorder = false,
-    disableAdornment = false,
-    hideText = false,
+    disableGutter,
+    disableBorder,
+    disableAdornment,
+    hideText,
     ...others
   } = useDefaultProps("HvWarningText", props);
   const { classes, cx } = useClasses(classesProp);

package/dist/esm/FormElement/utils.js

@@ -52,13 +52,8 @@ const buildAriaPropsFromContext = (props, context, isInvalid2, inputId) => {
   }
   return arias;
 };
-const validationStates = Object.freeze({
-  standBy: "standBy",
-  valid: "valid",
-  invalid: "invalid"
-});
-const isValid = (state) => state === validationStates.valid;
-const isInvalid = (state) => state === validationStates.invalid;
+const isValid = (state) => state === "valid";
+const isInvalid = (state) => state === "invalid";
 export {
   buildAriaPropsFromContext,
   buildFormElementPropsFromContext,
@@ -66,6 +61,5 @@ export {
   getIdReferenceFor,
   getIdReferenceListFor,
   isInvalid,
-  isValid,
-  validationStates
+  isValid
 };

package/dist/esm/InlineEditor/InlineEditor.js

@@ -101,6 +101,7 @@ const HvInlineEditor = fixedForwardRef(function HvInlineEditor2(props, ref) {
       endIcon: /* @__PURE__ */ jsx(
         HvIcon,
         {
+          compact: true,
           name: "Edit",
           color: "textDisabled",
           className: cx(classes.icon, {

package/dist/esm/InlineEditor/InlineEditor.styles.js

@@ -45,8 +45,7 @@ const { staticClasses, useClasses } = createClasses("HvInlineEditor", {
   icon: {
     cursor: "pointer",
     visibility: "hidden",
-    alignSelf: "center",
-    height: 16
+    alignSelf: "center"
   },
   iconVisible: {
     visibility: "visible"

package/dist/esm/Input/Input.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useRef, useState, useMemo, useCallback, useEffect } from "react";
 import { useForkRef } from "@mui/material/utils";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
 import { DEFAULT_ERROR_MESSAGES, computeValidationType, 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";
 import { useIsMounted } from "../hooks/useIsMounted.js";
@@ -15,14 +16,14 @@ import { setId } from "../utils/setId.js";
 import { EyeIcon } from "./icons.js";
 import { useClasses } from "./Input.styles.js";
 import { staticClasses } from "./Input.styles.js";
+import { changeInputValue } from "./utils.js";
 import { HvAdornment } from "../FormElement/Adornment/Adornment.js";
-import { validationStates, isInvalid, isValid } from "../FormElement/utils.js";
+import { isValid, isInvalid } from "../FormElement/utils.js";
 import { HvBaseInput } from "../BaseInput/BaseInput.js";
 import { HvTooltip } from "../Tooltip/Tooltip.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
-import { HvLabel } from "../FormElement/Label/Label.js";
-import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
+import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
 const DEFAULT_LABELS = {
   /** The label of the clear button. */
   clearButtonLabel: "Clear the text",
@@ -38,15 +39,6 @@ const DEFAULT_LABELS = {
 function eventTargetIsInsideContainer(container, event) {
   return !!container?.contains(event.relatedTarget);
 }
-const changeInputValue = (input, value = "") => {
-  const event = new Event("input", { bubbles: true });
-  const setInputValue = Object.getOwnPropertyDescriptor(
-    window.HTMLInputElement.prototype,
-    "value"
-  )?.set;
-  setInputValue?.call(input, value);
-  input?.dispatchEvent(event);
-};
 const HvInput = fixedForwardRef(function HvInput2(props, ref) {
   const {
     classes: classesProp,
@@ -61,14 +53,15 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
     enablePortal,
     suggestOnFocus,
     label,
+    description: descriptionProp,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
-    description,
     "aria-describedby": ariaDescribedBy,
     onChange,
     onEnter,
     status,
     statusMessage,
+    infoMessage: infoMessageProp,
     "aria-errormessage": ariaErrorMessage,
     type = "text",
     placeholder,
@@ -94,15 +87,17 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
   const { classes, cx } = useClasses(classesProp);
   const labels = useLabels(DEFAULT_LABELS, labelsProp);
   const elementId = useUniqueId(id);
+  const { activeTheme } = useTheme();
   const inputRef = useRef(null);
   const forkedRef = useForkRef(ref, inputRef, inputRefProp);
   const suggestionsRef = useRef(null);
+  const [description, infoMessage] = activeTheme?.name === "pentahoPlus" ? [infoMessageProp, descriptionProp] : [descriptionProp, infoMessageProp];
   const [focused, setFocused] = useState(false);
   const isDirty = useRef(false);
   const isEmptyValue = !inputRef.current?.value;
   const [validationState, setValidationState] = useControlled(
     status,
-    validationStates.standBy
+    "standBy"
   );
   const [validationMessage, setValidationMessage] = useControlled(
     statusMessage,
@@ -154,6 +149,8 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
     inputProps
   ));
   const isStateInvalid = isInvalid(validationState);
+  const willShowError = canShowError && isStateInvalid;
+  const canShowInfo = !!infoMessage && !willShowError;
   const [revealPassword, setRevealPassword] = useState(false);
   const realType = useMemo(() => {
     if (type === "password") {
@@ -162,13 +159,15 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
     if (type === "search") {
       return "search";
     }
+    if (type === "number") {
+      return "number";
+    }
     return "text";
   }, [revealPassword, type]);
   const [suggestionValues, setSuggestionValues] = useState(null);
   const canShowSuggestions = suggestionListCallback != null;
   const hasSuggestions = !!suggestionValues;
   const hasLabel = label != null;
-  const hasDescription = description != null;
   const focusInput = () => {
     inputRef.current?.focus();
   };
@@ -210,7 +209,7 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
   };
   const onFocusHandler = (event) => {
     setFocused(true);
-    setValidationState(validationStates.standBy);
+    setValidationState("standBy");
     onFocus?.(event, event.target.value);
   };
   const getSuggestions = (li) => {
@@ -245,12 +244,12 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
       }, 10);
     }
   };
-  const showClear = !disabled && !readOnly && !disableClear && !isEmptyValue && (!onEnter || type !== "search" || disableSearchButton || validationState !== validationStates.standBy);
+  const showClear = !disabled && !readOnly && !disableClear && !isEmptyValue && (!onEnter || type !== "search" || disableSearchButton || validationState !== "standBy");
   const showSearchIcon = type === "search" && !disableSearchButton;
   const showRevealPasswordButton = type === "password" && !disableRevealPassword;
   const handleClear = useCallback(
     (event) => {
-      setValidationState(validationStates.standBy);
+      setValidationState("standBy");
       changeInputValue(inputRef.current, "");
       if (canShowSuggestions && suggestOnFocus) event.stopPropagation();
       else {
@@ -286,7 +285,7 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
     cx
   ]);
   const searchButton = useMemo(() => {
-    const reallyShowIt = showSearchIcon && (isEmptyValue || onEnter && validationState === validationStates.standBy);
+    const reallyShowIt = showSearchIcon && (isEmptyValue || onEnter && validationState === "standBy");
     if (!reallyShowIt) return null;
     return /* @__PURE__ */ jsx(
       HvAdornment,
@@ -378,26 +377,21 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
       ),
       onBlur: onContainerBlurHandler,
       children: [
-        (hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
-          hasLabel && /* @__PURE__ */ jsx(
-            HvLabel,
-            {
-              showGutter: true,
-              id: setId(elementId, "label"),
-              className: classes.label,
-              htmlFor: setId(elementId, "input"),
-              label
-            }
-          ),
-          hasDescription && /* @__PURE__ */ jsx(
-            HvInfoMessage,
-            {
-              id: setId(elementId, "description"),
-              className: classes.description,
-              children: description
+        /* @__PURE__ */ jsx(
+          HvLabelContainer,
+          {
+            label,
+            description,
+            inputId: setId(elementId, "input"),
+            labelId: setId(elementId, "label"),
+            descriptionId: setId(elementId, "description"),
+            classes: {
+              root: classes.labelContainer,
+              label: classes.label,
+              description: classes.description
             }
-          )
-        ] }),
+          }
+        ),
         /* @__PURE__ */ jsx(
           HvBaseInput,
           {
@@ -478,7 +472,8 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
             className: classes.error,
             children: validationMessage
           }
-        )
+        ),
+        canShowInfo && /* @__PURE__ */ jsx(HvInfoMessage, { disableGutter: true, variant: "caption1", children: infoMessage })
       ]
     }
   );

package/dist/esm/Input/Input.styles.js

@@ -4,11 +4,7 @@ import { staticClasses as staticClasses$1 } from "../FormElement/Suggestions/Sug
 import "../FormElement/Suggestions/Suggestions.js";
 const { staticClasses, useClasses } = createClasses("HvInput", {
   root: { display: "block" },
-  labelContainer: {
-    display: "flex",
-    alignItems: "flex-start",
-    paddingBottom: 2
-  },
+  labelContainer: {},
   label: {},
   description: {},
   adornmentsBox: {

package/dist/esm/Input/utils.js

@@ -0,0 +1,12 @@
+const changeInputValue = (input, value = "") => {
+  const event = new Event("input", { bubbles: true });
+  const setInputValue = Object.getOwnPropertyDescriptor(
+    window.HTMLInputElement.prototype,
+    "value"
+  )?.set;
+  setInputValue?.call(input, value);
+  input?.dispatchEvent(event);
+};
+export {
+  changeInputValue
+};

package/dist/esm/NumberInput/NumberInput.js

@@ -0,0 +1,54 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useMemo } from "react";
+import { useForkRef } from "@mui/material";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvIcon } from "../icons.js";
+import { changeInputValue } from "../Input/utils.js";
+import { useClasses } from "./NumberInput.styles.js";
+import { HvAdornment } from "../FormElement/Adornment/Adornment.js";
+import { HvInput } from "../Input/Input.js";
+const HvNumberInput = forwardRef(function HvNumberInput2(props, ref) {
+  const {
+    classes: classesProp,
+    className,
+    readOnly,
+    ...others
+  } = useDefaultProps("HvNumberInput", props);
+  const { classes, cx } = useClasses(classesProp);
+  const inputRef = useRef(null);
+  const forkedRef = useForkRef(ref, inputRef);
+  const buttons = useMemo(() => {
+    const handleIncrease = () => {
+      if (inputRef.current) {
+        inputRef.current.stepUp();
+        changeInputValue(inputRef.current, inputRef.current.value);
+      }
+    };
+    const handleDecrease = () => {
+      if (inputRef.current) {
+        inputRef.current.stepDown();
+        changeInputValue(inputRef.current, inputRef.current.value);
+      }
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(HvAdornment, { icon: /* @__PURE__ */ jsx(HvIcon, { name: "Remove" }), onClick: handleDecrease }),
+      /* @__PURE__ */ jsx(HvAdornment, { icon: /* @__PURE__ */ jsx(HvIcon, { name: "Add" }), onClick: handleIncrease })
+    ] });
+  }, []);
+  return /* @__PURE__ */ jsx(
+    HvInput,
+    {
+      ref: forkedRef,
+      type: "number",
+      className: cx(classes.root, className),
+      endAdornment: !readOnly && buttons,
+      classes,
+      readOnly,
+      disableClear: true,
+      ...others
+    }
+  );
+});
+export {
+  HvNumberInput
+};

package/dist/esm/NumberInput/NumberInput.styles.js

@@ -0,0 +1,11 @@
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+import { staticClasses as staticClasses$1 } from "../Input/Input.styles.js";
+import "../Input/Input.js";
+const { staticClasses, useClasses } = createClasses(
+  "HvNumberInput",
+  staticClasses$1
+);
+export {
+  staticClasses,
+  useClasses
+};