@hitachivantara/uikit-react-core 5.87.2 → 5.88.0

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

@@ -2,45 +2,30 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const BaseInput_styles = require("../BaseInput/BaseInput.styles.cjs");
-const Suggestions_styles = require("../FormElement/Suggestions/Suggestions.styles.cjs");
+const focusUtils = require("../utils/focusUtils.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTagsInput", {
-  input: {
-    width: "100%",
-    ...uikitStyles.theme.typography.caption1
-  },
-  listItemGutters: { padding: "0 5px" },
-  listItemRoot: {
-    marginBottom: 2,
-    height: 24,
-    lineHeight: "24px",
-    "&:not(:last-child)": {
-      marginBottom: 2
-    },
-    "&$singleLine": {
-      display: "table-cell",
-      paddingTop: "2px"
-    }
-  },
+  /** @deprecated unused */
+  listItemGutters: {},
+  /** @deprecated use `chipRoot` */
+  listItemRoot: {},
   root: { display: "inline-block", width: "100%" },
+  // TODO: consider renaming this
   chipRoot: {
     maxWidth: "none"
   },
   disabled: {
     "& $tagsList": {
       backgroundColor: uikitStyles.theme.colors.atmo2,
-      border: `1px solid ${uikitStyles.theme.colors.atmo4}`,
-      "&:focus-within, &:hover": {
-        border: `1px solid ${uikitStyles.theme.colors.atmo4}`
+      "&,:hover": {
+        borderColor: uikitStyles.theme.colors.atmo4
       }
     }
   },
   readOnly: {
     "& $tagsList": {
       backgroundColor: uikitStyles.theme.colors.atmo2,
-      border: `1px solid ${uikitStyles.theme.colors.secondary_60}`,
-      "&:hover": {
-        border: `1px solid ${uikitStyles.theme.colors.secondary_60}`
+      "&,:hover": {
+        borderColor: uikitStyles.theme.colors.secondary_60
       }
     }
   },
@@ -57,118 +42,67 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTagsInput
   },
   tagsList: {
     display: "flex",
+    alignItems: "center",
     alignContent: "flex-start",
-    float: "left",
-    clear: "both",
+    gap: uikitStyles.theme.spacing("xxs", "xs"),
+    cursor: "text",
     width: "100%",
-    maxWidth: "100%",
-    height: "32px",
-    padding: 5,
+    minHeight: 32,
+    padding: uikitStyles.theme.spacing("xxs", "xs"),
     overflow: "auto",
     position: "relative",
     flexDirection: "row",
     flexWrap: "wrap",
     backgroundColor: uikitStyles.theme.colors.atmo1,
-    border: `1px solid ${uikitStyles.theme.colors.secondary_80}`,
+    borderWidth: 1,
+    borderColor: uikitStyles.theme.colors.secondary_80,
     borderRadius: uikitStyles.theme.radii.base,
     "&:hover": {
-      cursor: "text",
-      border: `1px solid ${uikitStyles.theme.colors.primary}`
+      borderColor: uikitStyles.theme.colors.primary
     },
-    [`& .${BaseInput_styles.staticClasses.inputRoot}`]: {
-      border: "none"
-    },
-    "&:focus, &:focus-within, &:focus-visible": {
-      outlineColor: "#52A8EC",
-      outlineStyle: "solid",
-      outlineWidth: "0px",
-      outlineOffset: "-1px",
-      boxShadow: "0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)"
+    "&:focus-within, &:focus-visible": {
+      ...focusUtils.outlineStyles
     },
     "&$singleLine": {
-      overflowX: "hidden",
-      overflowY: "hidden",
-      height: 32,
-      display: "table-row",
-      paddingTop: 0
+      flexWrap: "nowrap"
     },
     "&$error": {
-      border: `1px solid ${uikitStyles.theme.colors.negative_120}`
+      borderColor: uikitStyles.theme.colors.negative_120
     },
     "&$invalid": {
-      border: `1px solid ${uikitStyles.theme.colors.negative_120}`
+      borderColor: uikitStyles.theme.colors.negative_120
     }
   },
-  tagInputContainerRoot: {
+  /** @deprecated use `classes.input` instead */
+  tagInputContainerRoot: {},
+  /** @deprecated use `classes.input` instead */
+  tagInputRoot: {},
+  input: {
     display: "flex",
-    flexGrow: 1,
-    height: 24,
-    lineHeight: "24px",
-    "&$singleLine": {
-      display: "table-cell",
-      minWidth: 60,
-      width: "100%",
-      paddingTop: "3px",
-      verticalAlign: "middle"
-    }
-  },
-  tagInputRoot: {
-    [`& .${BaseInput_styles.staticClasses.root}`]: {
-      width: "100%",
-      border: "none",
-      "&:hover $tagInputBorderContainer": {
-        background: "none"
-      }
-    },
-    [`&& .${BaseInput_styles.staticClasses.inputRoot}`]: {
-      marginLeft: 0,
-      marginRight: 0,
-      flex: "1 1 auto",
-      height: 24,
-      lineHeight: "24px",
-      padding: 0,
-      border: "none"
-    },
-    [`& .${BaseInput_styles.staticClasses.inputBorderContainer}`]: {
-      border: "none",
-      background: "none"
-    },
-    [`& .${BaseInput_styles.staticClasses.inputRootFocused}`]: {
-      outline: "none",
-      boxShadow: "none"
-    },
-    [`& .${BaseInput_styles.staticClasses.root} .${BaseInput_styles.staticClasses.inputRootReadOnly}`]: {
-      backgroundColor: "transparent",
-      border: "none",
-      "&:hover": {
-        border: "none"
-      }
-    },
-    [`&& .${BaseInput_styles.staticClasses.input}`]: {
-      marginLeft: 0
-    }
-  },
-  tagSelected: {
-    outlineColor: "#52A8EC",
-    outlineStyle: "solid",
-    outlineWidth: "0px",
-    outlineOffset: "-1px",
-    boxShadow: "0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)"
+    flex: "1 0 auto",
+    height: "auto",
+    width: 0,
+    minWidth: 60,
+    border: "none",
+    margin: 0,
+    padding: 0,
+    ...uikitStyles.theme.typography.caption1,
+    backgroundColor: "transparent",
+    outline: "none",
+    boxShadow: "none"
   },
+  /** @deprecated unused.  use `:focus` or `:focus-visible` instead */
+  tagSelected: {},
+  /** @deprecated unused. use `::after` instead */
   tagInputBorderContainer: {},
+  /** @deprecated unused. use `:focus` or `:focus-visible` instead */
   tagInputRootFocused: {},
+  /** @deprecated unused */
   tagInputRootEmpty: {},
   singleLine: {},
   error: { float: "left" },
   inputExtension: {},
-  suggestionsContainer: {
-    width: "100%",
-    position: "relative",
-    top: 59,
-    [`& .${Suggestions_styles.staticClasses.root} .${Suggestions_styles.staticClasses.list} &`]: {
-      width: "100%"
-    }
-  },
+  suggestionsContainer: {},
   suggestionList: {}
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/TextArea/TextArea.cjs

@@ -83,7 +83,6 @@ const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
   const performValidation = React.useCallback(() => {
     const inputValidity = validations.validateInput(
       inputRef.current,
-      String(value),
       required,
       minCharQuantity,
       maxCharQuantity,
@@ -104,8 +103,7 @@ const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
     required,
     setValidationMessage,
     setValidationState,
-    validation,
-    value
+    validation
   ]);
   const limitValue = (currentValue) => {
     if (currentValue === void 0 || !blockMax) return currentValue;

package/dist/cjs/TextArea/TextArea.styles.cjs

@@ -8,7 +8,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTextArea"
   invalid: {},
   baseInput: { clear: "both", float: "left" },
   input: {},
-  inputResizable: { width: "100%", resize: "both" },
+  inputResizable: {},
   labelContainer: { float: "left", display: "flex", alignItems: "flex-start" },
   label: {},
   description: { display: "block", float: "left" },

package/dist/cjs/TimePicker/TimePicker.cjs

@@ -3,12 +3,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const date = require("@internationalized/date");
-const utils = require("@mui/material/utils");
+const utils$1 = require("@mui/material/utils");
 const datepicker$1 = require("@react-aria/datepicker");
 const datepicker = require("@react-stately/datepicker");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const utils$1 = require("../Calendar/utils.cjs");
+const utils = require("../Calendar/utils.cjs");
 const useControlled = require("../hooks/useControlled.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
 const setId = require("../utils/setId.cjs");
@@ -52,7 +52,7 @@ const HvTimePicker = React.forwardRef(
       timeFormat,
       showSeconds,
       disableExpand,
-      locale = utils$1.DEFAULT_LOCALE,
+      locale = utils.DEFAULT_LOCALE,
       onToggle,
       onChange,
       // misc properties:
@@ -65,7 +65,7 @@ const HvTimePicker = React.forwardRef(
     const { classes, cx } = TimePicker_styles.useClasses(classesProp);
     const timeFieldRef = React.useRef(null);
     const { ref: refProp, ...otherDropdownProps } = dropdownProps;
-    const dropdownForkedRef = utils.useForkRef(ref, refProp);
+    const dropdownForkedRef = utils$1.useForkRef(ref, refProp);
     const stateProps = {
       value: toTime(valueProp),
       defaultValue: toTime(defaultValueProp),
@@ -77,6 +77,7 @@ const HvTimePicker = React.forwardRef(
       granularity: showSeconds === false ? "minute" : "second",
       hourCycle: timeFormat === "12" ? 12 : 24,
       onChange: (value) => {
+        if (!value) return;
         const { hour: hours, minute: minutes, second: seconds } = value;
         onChange?.({ hours, minutes, seconds });
       }

package/dist/cjs/TimePicker/Unit/Unit.cjs

@@ -32,7 +32,6 @@ const Unit = ({
         classes: {
           input: classes.input,
           root: classes.inputContainer,
-          inputBorderContainer: classes.inputBorderContainer,
           inputRoot: classes.inputRoot
         },
         onKeyDown: (event) => {

package/dist/cjs/TimePicker/Unit/Unit.styles.cjs

@@ -48,9 +48,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTimePicke
   inputContainer: {
     minWidth: 40,
     maxWidth: 40
-  },
-  inputBorderContainer: {
-    top: 40
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/hooks/useFocus.cjs

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const document = require("../utils/document.cjs");
+const getActiveEl = () => document.getDocument()?.activeElement || null;
+function makeFocusUtils(containerRef) {
+  function focus(el, checkFocus = true) {
+    if (!checkFocus || containerRef.current?.contains(getActiveEl())) {
+      el?.focus();
+    }
+  }
+  return {
+    focusPrevious() {
+      focus(getActiveEl()?.previousElementSibling);
+    },
+    focusNext() {
+      focus(getActiveEl()?.nextElementSibling);
+    },
+    focusFirst() {
+      focus(getActiveEl()?.parentElement?.firstElementChild);
+    },
+    focusLast() {
+      focus(getActiveEl()?.parentElement?.lastElementChild);
+    },
+    focusChild(index) {
+      focus(containerRef.current?.children[index], false);
+    },
+    focusSibling(index) {
+      focus(getActiveEl()?.parentElement?.children[index]);
+    }
+  };
+}
+function useFocus({
+  containerRef
+}) {
+  return React.useMemo(() => makeFocusUtils(containerRef), [containerRef]);
+}
+exports.useFocus = useFocus;

package/dist/cjs/utils/CounterLabel.cjs

@@ -4,9 +4,10 @@ const jsxRuntime = require("react/jsx-runtime");
 const CounterLabel = ({
   selected,
   total,
-  conjunctionLabel = "/"
+  conjunctionLabel = "/",
+  ...others
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { ...others, children: [
     /* @__PURE__ */ jsxRuntime.jsx("b", { children: selected }),
     " ",
     ` ${conjunctionLabel} ${total}`

package/dist/cjs/utils/focusUtils.cjs

@@ -1,10 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const outlineStyles = {
-  outlineColor: "#52A8EC",
-  outlineStyle: "solid",
-  outlineWidth: "0px",
-  outlineOffset: "-1px",
   boxShadow: "0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)"
 };
 exports.outlineStyles = outlineStyles;

package/dist/esm/ActionsGeneric/ActionsGeneric.js

@@ -5,9 +5,9 @@ import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./ActionsGeneric.styles.js";
 import { staticClasses } from "./ActionsGeneric.styles.js";
+import { HvDropDownMenu } from "../DropDownMenu/DropDownMenu.js";
 import { HvIconButton } from "../IconButton/IconButton.js";
 import { HvButton } from "../Button/Button.js";
-import { HvDropDownMenu } from "../DropDownMenu/DropDownMenu.js";
 const HvActionsGeneric = forwardRef(function HvActionsGeneric2(props, ref) {
   const {
     id: idProp,

package/dist/esm/AvatarGroup/AvatarGroupContext.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { createContext, useMemo, useContext } from "react";
+import { useContext, createContext, useMemo } from "react";
 const HvAvatarGroupContext = createContext(null);
 const HvAvatarGroupProvider = ({
   size,

package/dist/esm/Banner/BannerContent/BannerContent.js

@@ -6,8 +6,8 @@ import { iconVariant } from "../../utils/iconVariant.js";
 import { setId } from "../../utils/setId.js";
 import { useClasses } from "./BannerContent.styles.js";
 import { staticClasses } from "./BannerContent.styles.js";
-import { HvActionsGeneric } from "../../ActionsGeneric/ActionsGeneric.js";
 import { HvButton } from "../../Button/Button.js";
+import { HvActionsGeneric } from "../../ActionsGeneric/ActionsGeneric.js";
 const HvBannerContent = forwardRef(
   function HvBannerContent2(props, ref) {
     const {

package/dist/esm/BaseCheckBox/BaseCheckBox.js

@@ -4,7 +4,7 @@ import MuiCheckbox from "@mui/material/Checkbox";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./BaseCheckBox.styles.js";
 import { staticClasses } from "./BaseCheckBox.styles.js";
-import { Box, Partial, Check } from "./icons.js";
+import { Check, Partial, Box } from "./icons.js";
 const getSelectorIcons = () => {
   return {
     checkbox: /* @__PURE__ */ jsx(Box, {}),

package/dist/esm/BaseDropdown/BaseDropdown.js

@@ -1,5 +1,5 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, isValidElement, cloneElement, useState, useMemo, Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useCallback, useMemo, isValidElement, cloneElement, Fragment } from "react";
 import { usePopper } from "react-popper";
 import { useForkRef } from "@mui/material/utils";
 import { detectOverflow } from "@popperjs/core";
@@ -13,7 +13,7 @@ import { setId } from "../utils/setId.js";
 import { useClasses } from "./BaseDropdown.styles.js";
 import { staticClasses } from "./BaseDropdown.styles.js";
 import { BaseDropdownPanel } from "./BaseDropdownPanel.js";
-import { useBaseDropdownContext, BaseDropdownContext } from "./context.js";
+import { BaseDropdownContext, useBaseDropdownContext } from "./context.js";
 import { HvTypography } from "../Typography/Typography.js";
 const BaseDropdown = forwardRef(function BaseDropdown2(props, ref) {
   const {

package/dist/esm/BaseInput/BaseInput.js

@@ -1,36 +1,12 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef, useContext } from "react";
-import { css, Global } from "@emotion/react";
 import MuiInputBase from "@mui/material/InputBase";
 import { useForkRef } from "@mui/material/utils";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 import { useClasses } from "./BaseInput.styles.js";
 import { staticClasses } from "./BaseInput.styles.js";
 import { HvFormElementContext, HvFormElementDescriptorsContext } from "../FormElement/context.js";
 import { buildFormElementPropsFromContext, buildAriaPropsFromContext } from "../FormElement/utils.js";
-const baseInputStyles = css({
-  "input:-webkit-autofill": {
-    WebkitBoxShadow: `0 0 0px 1000px ${theme.colors.atmo1} inset`,
-    WebkitTextFillColor: theme.colors.secondary
-  },
-  // Clears number input up/down arrows in Chrome and Firefox
-  "input::-webkit-outer-spin-button,input::-webkit-inner-spin-button": {
-    WebkitAppearance: "none",
-    margin: 0
-  },
-  "input[type=number]": {
-    MozAppearance: "textfield"
-  },
-  // Clears time input clock in Chrome
-  "input::-webkit-calendar-picker-indicator": {
-    display: "none"
-  },
-  // Clears search input clear button in Chrome
-  "input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration": {
-    display: "none"
-  }
-});
 const HvBaseInput = forwardRef(function HvBaseInput2(props, ref) {
   const {
     classes: classesProp,
@@ -47,7 +23,7 @@ const HvBaseInput = forwardRef(function HvBaseInput2(props, ref) {
     placeholder,
     multiline,
     resizable,
-    invalid,
+    invalid: invalidProp,
     inputRef,
     inputProps = {},
     ...others
@@ -62,72 +38,57 @@ const HvBaseInput = forwardRef(function HvBaseInput2(props, ref) {
     formElementContext
   );
   const forkedRef = useForkRef(ref, inputRef);
-  const localInvalid = invalid || formElementProps.status === "invalid";
+  const invalid = invalidProp || formElementProps.status === "invalid";
   const formElementDescriptorsContext = useContext(
     HvFormElementDescriptorsContext
   );
   const ariaProps = buildAriaPropsFromContext(
     inputProps,
     formElementDescriptorsContext,
-    localInvalid,
+    invalid,
     id
   );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Global, { styles: baseInputStyles }),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cx(classes.root, className, {
-          [classes.disabled]: formElementProps.disabled,
-          [classes.invalid]: localInvalid,
-          [classes.resizable]: multiline && resizable,
-          [classes.readOnly]: formElementProps.readOnly
-        }),
-        children: [
-          /* @__PURE__ */ jsx(
-            MuiInputBase,
-            {
-              id,
-              name: formElementProps.name,
-              value,
-              defaultValue,
-              type,
-              placeholder,
-              readOnly: !!formElementProps.readOnly,
-              disabled: formElementProps.disabled,
-              onChange: (event) => onChange?.(event, event.target.value),
-              className: cx({
-                [classes.inputRootInvalid]: localInvalid,
-                [classes.inputRootReadOnly]: formElementProps.readOnly
-              }),
-              classes: {
-                root: classes.inputRoot,
-                focused: classes.inputRootFocused,
-                disabled: classes.inputRootDisabled,
-                multiline: classes.inputRootMultiline,
-                input: cx(classes.input, {
-                  [classes.inputResizable]: !formElementProps.disabled && resizable,
-                  [classes.inputDisabled]: formElementProps.disabled,
-                  [classes.inputReadOnly]: formElementProps.readOnly
-                })
-              },
-              inputProps: {
-                // Avoid the required attribute at the root node
-                required: formElementProps.required,
-                ...inputProps,
-                ...ariaProps
-              },
-              inputRef: forkedRef,
-              multiline,
-              rows: 10,
-              ...others
-            }
-          ),
-          !multiline && /* @__PURE__ */ jsx("div", { role: "presentation", className: classes.inputBorderContainer })
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx(
+    MuiInputBase,
+    {
+      id,
+      name: formElementProps.name,
+      value,
+      defaultValue,
+      placeholder,
+      readOnly: !!formElementProps.readOnly,
+      disabled: formElementProps.disabled,
+      onChange: (event) => onChange?.(event, event.target.value),
+      className: cx(classes.root, classes.inputRoot, className, {
+        [classes.inputRootMultiline]: multiline,
+        [classes.multiline]: multiline,
+        [classes.inputRootInvalid]: invalid,
+        [classes.invalid]: invalid,
+        [classes.inputRootReadOnly]: formElementProps.readOnly,
+        [classes.readOnly]: formElementProps.readOnly,
+        [classes.inputRootDisabled]: formElementProps.disabled,
+        [classes.disabled]: formElementProps.disabled
+      }),
+      classes: {
+        focused: cx(classes.focused, classes.inputRootFocused),
+        input: cx(classes.input, {
+          [classes.inputResizable]: !formElementProps.disabled && resizable,
+          [classes.inputDisabled]: formElementProps.disabled,
+          [classes.inputReadOnly]: formElementProps.readOnly
+        })
+      },
+      inputProps: {
+        // Avoid the required attribute at the root node
+        required: formElementProps.required,
+        ...inputProps,
+        ...ariaProps
+      },
+      inputRef: forkedRef,
+      multiline,
+      ...multiline ? { rows: 10 } : { type },
+      ...others
+    }
+  );
 });
 export {
   HvBaseInput,

package/dist/esm/BaseInput/BaseInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseInput.js","sources":["../../../src/BaseInput/BaseInput.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\nimport { css as emotionCss, Global } from \"@emotion/react\";\nimport MuiInputBase, { InputBaseProps } from \"@mui/material/InputBase\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n  buildAriaPropsFromContext,\n  buildFormElementPropsFromContext,\n  HvFormElementContext,\n  HvFormElementDescriptorsContext,\n} from \"../FormElement\";\nimport { staticClasses, useClasses } from \"./BaseInput.styles\";\n\nexport { staticClasses as baseInputClasses };\n\nexport type HvBaseInputClasses = ExtractNames<typeof useClasses>;\n\n// Global styles for the base input.\nconst baseInputStyles = emotionCss({\n  \"input:-webkit-autofill\": {\n    WebkitBoxShadow: `0 0 0px 1000px ${theme.colors.atmo1} inset`,\n    WebkitTextFillColor: theme.colors.secondary,\n  },\n\n  // Clears number input up/down arrows in Chrome and Firefox\n  \"input::-webkit-outer-spin-button,input::-webkit-inner-spin-button\": {\n    WebkitAppearance: \"none\",\n    margin: 0,\n  },\n  \"input[type=number]\": {\n    MozAppearance: \"textfield\",\n  },\n\n  // Clears time input clock in Chrome\n  \"input::-webkit-calendar-picker-indicator\": {\n    display: \"none\",\n  },\n\n  // Clears search input clear button in Chrome\n  \"input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration\":\n    {\n      display: \"none\",\n    },\n});\n\nexport interface HvBaseInputProps\n  extends Omit<\n    InputBaseProps,\n    \"onChange\" | \"classes\" | \"ref\" | \"color\" | \"size\"\n  > {\n  /** The input name. */\n  name?: string;\n  /** The value of the input, when controlled. */\n  value?: React.InputHTMLAttributes<HTMLInputElement>[\"value\"];\n  /** The initial value of the input, when uncontrolled. */\n  defaultValue?: React.InputHTMLAttributes<HTMLInputElement>[\"value\"];\n  /** If `true` the input is disabled. */\n  disabled?: boolean;\n  /** Indicates that the input is not editable. */\n  readOnly?: boolean;\n  /** If true, the input element will be required. */\n  required?: boolean;\n  /** The function that will be executed onChange, allows modification of the input,\n   * it receives the value. If a new value should be presented it must returned it. */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\n    value: string,\n  ) => void;\n  /** If true, a textarea element will be rendered. */\n  multiline?: boolean;\n  /** If true and multiline is also true the textarea element will be resizable. */\n  resizable?: boolean;\n  /** Denotes if the input is in an invalid state. */\n  invalid?: boolean;\n  /**\n   * Allows passing a ref to the underlying input\n   * @deprecated Use `ref` directly instead\n   * */\n  inputRef?: InputBaseProps[\"inputRef\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBaseInputClasses;\n}\n\n/**\n * An Input component that only posses the most basic functionalities.\n * It should be used alongside the other form elements to construct a proper accessible form.\n */\nexport const HvBaseInput = forwardRef<\n  // no-indent\n  React.ElementRef<\"input\">,\n  HvBaseInputProps\n>(function HvBaseInput(props, ref) {\n  const {\n    classes: classesProp,\n    className = \"\",\n    id,\n    name,\n    value,\n    defaultValue,\n    required,\n    readOnly,\n    disabled,\n    onChange,\n    type = \"text\",\n    placeholder,\n    multiline,\n    resizable,\n    invalid,\n    inputRef,\n    inputProps = {},\n    ...others\n  } = useDefaultProps(\"HvBaseInput\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const formElementContext = useContext(HvFormElementContext);\n  const formElementProps = buildFormElementPropsFromContext(\n    name,\n    disabled,\n    readOnly,\n    required,\n    formElementContext,\n  );\n\n  const forkedRef = useForkRef(ref, inputRef);\n\n  const localInvalid = invalid || formElementProps.status === \"invalid\";\n\n  const formElementDescriptorsContext = useContext(\n    HvFormElementDescriptorsContext,\n  );\n  const ariaProps = buildAriaPropsFromContext(\n    inputProps,\n    formElementDescriptorsContext,\n    localInvalid,\n    id,\n  );\n\n  return (\n    <>\n      <Global styles={baseInputStyles} />\n      <div\n        className={cx(classes.root, className, {\n          [classes.disabled]: formElementProps.disabled,\n          [classes.invalid]: localInvalid,\n          [classes.resizable]: multiline && resizable,\n          [classes.readOnly]: formElementProps.readOnly,\n        })}\n      >\n        <MuiInputBase\n          id={id}\n          name={formElementProps.name}\n          value={value}\n          defaultValue={defaultValue}\n          type={type}\n          placeholder={placeholder}\n          readOnly={!!formElementProps.readOnly}\n          disabled={formElementProps.disabled}\n          onChange={(event) => onChange?.(event, event.target.value)}\n          className={cx({\n            [classes.inputRootInvalid]: localInvalid,\n            [classes.inputRootReadOnly]: formElementProps.readOnly,\n          })}\n          classes={{\n            root: classes.inputRoot,\n            focused: classes.inputRootFocused,\n            disabled: classes.inputRootDisabled,\n            multiline: classes.inputRootMultiline,\n            input: cx(classes.input, {\n              [classes.inputResizable]: !formElementProps.disabled && resizable,\n              [classes.inputDisabled]: formElementProps.disabled,\n              [classes.inputReadOnly]: formElementProps.readOnly,\n            }),\n          }}\n          inputProps={{\n            // Avoid the required attribute at the root node\n            required: formElementProps.required,\n            ...inputProps,\n            ...ariaProps,\n          }}\n          inputRef={forkedRef}\n          multiline={multiline}\n          rows={10}\n          {...others}\n        />\n        {!multiline && (\n          <div role=\"presentation\" className={classes.inputBorderContainer} />\n        )}\n      </div>\n    </>\n  );\n});\n"],"names":["emotionCss","HvBaseInput"],"mappings":"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"}
+{"version":3,"file":"BaseInput.js","sources":["../../../src/BaseInput/BaseInput.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\nimport MuiInputBase, { type InputBaseProps } from \"@mui/material/InputBase\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  buildAriaPropsFromContext,\n  buildFormElementPropsFromContext,\n  HvFormElementContext,\n  HvFormElementDescriptorsContext,\n} from \"../FormElement\";\nimport { staticClasses, useClasses } from \"./BaseInput.styles\";\n\nexport { staticClasses as baseInputClasses };\n\nexport type HvBaseInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseInputProps\n  extends Omit<\n    InputBaseProps,\n    \"onChange\" | \"classes\" | \"ref\" | \"color\" | \"size\"\n  > {\n  /** The input name. */\n  name?: string;\n  /** The value of the input, when controlled. */\n  value?: React.InputHTMLAttributes<HTMLInputElement>[\"value\"];\n  /** The initial value of the input, when uncontrolled. */\n  defaultValue?: React.InputHTMLAttributes<HTMLInputElement>[\"value\"];\n  /** If `true` the input is disabled. */\n  disabled?: boolean;\n  /** Indicates that the input is not editable. */\n  readOnly?: boolean;\n  /** If true, the input element will be required. */\n  required?: boolean;\n  /**\n   * Callback fired when the value is changed.\n   *\n   * You can pull out the new value by accessing `event.target.value` (string),\n   * or using the second callback argument.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\n    value: string,\n  ) => void;\n  /** If true, a textarea element will be rendered. */\n  multiline?: boolean;\n  /** If true and multiline is also true the textarea element will be resizable. */\n  resizable?: boolean;\n  /** Denotes if the input is in an invalid state. */\n  invalid?: boolean;\n  /**\n   * Allows passing a ref to the underlying input\n   * @deprecated Use `ref` directly instead\n   * */\n  inputRef?: InputBaseProps[\"inputRef\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBaseInputClasses;\n}\n\n/**\n * An Input component that only posses the most basic functionalities.\n * It should be used alongside the other form elements to construct a proper accessible form.\n */\nexport const HvBaseInput = forwardRef<\n  // no-indent\n  React.ElementRef<\"input\">,\n  HvBaseInputProps\n>(function HvBaseInput(props, ref) {\n  const {\n    classes: classesProp,\n    className = \"\",\n    id,\n    name,\n    value,\n    defaultValue,\n    required,\n    readOnly,\n    disabled,\n    onChange,\n    type = \"text\",\n    placeholder,\n    multiline,\n    resizable,\n    invalid: invalidProp,\n    inputRef,\n    inputProps = {},\n    ...others\n  } = useDefaultProps(\"HvBaseInput\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const formElementContext = useContext(HvFormElementContext);\n  const formElementProps = buildFormElementPropsFromContext(\n    name,\n    disabled,\n    readOnly,\n    required,\n    formElementContext,\n  );\n\n  const forkedRef = useForkRef(ref, inputRef);\n\n  const invalid = invalidProp || formElementProps.status === \"invalid\";\n\n  const formElementDescriptorsContext = useContext(\n    HvFormElementDescriptorsContext,\n  );\n  const ariaProps = buildAriaPropsFromContext(\n    inputProps,\n    formElementDescriptorsContext,\n    invalid,\n    id,\n  );\n\n  return (\n    <MuiInputBase\n      id={id}\n      name={formElementProps.name}\n      value={value}\n      defaultValue={defaultValue}\n      placeholder={placeholder}\n      readOnly={!!formElementProps.readOnly}\n      disabled={formElementProps.disabled}\n      onChange={(event) => onChange?.(event, event.target.value)}\n      className={cx(classes.root, classes.inputRoot, className, {\n        [classes.inputRootMultiline]: multiline,\n        [classes.multiline]: multiline,\n        [classes.inputRootInvalid]: invalid,\n        [classes.invalid]: invalid,\n        [classes.inputRootReadOnly]: formElementProps.readOnly,\n        [classes.readOnly]: formElementProps.readOnly,\n        [classes.inputRootDisabled]: formElementProps.disabled,\n        [classes.disabled]: formElementProps.disabled,\n      })}\n      classes={{\n        focused: cx(classes.focused, classes.inputRootFocused),\n        input: cx(classes.input, {\n          [classes.inputResizable]: !formElementProps.disabled && resizable,\n          [classes.inputDisabled]: formElementProps.disabled,\n          [classes.inputReadOnly]: formElementProps.readOnly,\n        }),\n      }}\n      inputProps={{\n        // Avoid the required attribute at the root node\n        required: formElementProps.required,\n        ...inputProps,\n        ...ariaProps,\n      }}\n      inputRef={forkedRef}\n      multiline={multiline}\n      {...(multiline ? { rows: 10 } : { type })}\n      {...others}\n    />\n  );\n});\n"],"names":["HvBaseInput"],"mappings":";;;;;;;;;AAkEO,MAAM,cAAc,WAIzB,SAASA,aAAY,OAAO,KAAK;AAC3B,QAAA;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,aAAa,CAAC;AAAA,IACd,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AACxC,QAAA,qBAAqB,WAAW,oBAAoB;AAC1D,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEM,QAAA,YAAY,WAAW,KAAK,QAAQ;AAEpC,QAAA,UAAU,eAAe,iBAAiB,WAAW;AAE3D,QAAM,gCAAgC;AAAA,IACpC;AAAA,EACF;AACA,QAAM,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAM,iBAAiB;AAAA,MACvB;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,CAAC,CAAC,iBAAiB;AAAA,MAC7B,UAAU,iBAAiB;AAAA,MAC3B,UAAU,CAAC,UAAU,WAAW,OAAO,MAAM,OAAO,KAAK;AAAA,MACzD,WAAW,GAAG,QAAQ,MAAM,QAAQ,WAAW,WAAW;AAAA,QACxD,CAAC,QAAQ,kBAAkB,GAAG;AAAA,QAC9B,CAAC,QAAQ,SAAS,GAAG;AAAA,QACrB,CAAC,QAAQ,gBAAgB,GAAG;AAAA,QAC5B,CAAC,QAAQ,OAAO,GAAG;AAAA,QACnB,CAAC,QAAQ,iBAAiB,GAAG,iBAAiB;AAAA,QAC9C,CAAC,QAAQ,QAAQ,GAAG,iBAAiB;AAAA,QACrC,CAAC,QAAQ,iBAAiB,GAAG,iBAAiB;AAAA,QAC9C,CAAC,QAAQ,QAAQ,GAAG,iBAAiB;AAAA,MAAA,CACtC;AAAA,MACD,SAAS;AAAA,QACP,SAAS,GAAG,QAAQ,SAAS,QAAQ,gBAAgB;AAAA,QACrD,OAAO,GAAG,QAAQ,OAAO;AAAA,UACvB,CAAC,QAAQ,cAAc,GAAG,CAAC,iBAAiB,YAAY;AAAA,UACxD,CAAC,QAAQ,aAAa,GAAG,iBAAiB;AAAA,UAC1C,CAAC,QAAQ,aAAa,GAAG,iBAAiB;AAAA,QAC3C,CAAA;AAAA,MACH;AAAA,MACA,YAAY;AAAA;AAAA,QAEV,UAAU,iBAAiB;AAAA,QAC3B,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACC,GAAI,YAAY,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK;AAAA,MACtC,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ,CAAC;"}