@hitachivantara/uikit-react-core 5.87.2 → 5.87.3

package/dist/cjs/Input/Input.styles.cjs

@@ -35,18 +35,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvInput", {
     backgroundColor: uikitStyles.theme.colors.atmo1,
     boxShadow: `0px 8px 0px ${uikitStyles.theme.colors.atmo1}, 0px 0px 9px 0px rgba(65,65,65,.12)`
   },
-  input: {
-    "&::-ms-clear": {
-      display: "none"
-    }
-  },
+  input: {},
   inputRoot: {
-    ":hover": {
-      "& $iconClear": {
-        display: "block"
-      }
-    },
-    ":focus-within $iconClear": {
+    ":is(:hover,:focus-within) $iconClear": {
       display: "block"
     }
   },
@@ -55,15 +46,10 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvInput", {
       display: "block"
     }
   },
-  inputRootDisabled: {
-    cursor: "not-allowed"
-  },
+  inputRootDisabled: {},
   inputRootMultiline: { padding: 0 },
-  inputBorderContainer: {
-    "$hasSuggestions &": {
-      display: "none"
-    }
-  },
+  /** @deprecated unused. use `::after` instead */
+  inputBorderContainer: {},
   error: {}
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/List/List.cjs

@@ -5,6 +5,7 @@ const React = require("react");
 const reactWindow = require("react-window");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const CounterLabel = require("../utils/CounterLabel.cjs");
 const setId = require("../utils/setId.cjs");
 const List_styles = require("./List.styles.cjs");
 const useSelectableList = require("./useSelectableList.cjs");
@@ -14,10 +15,11 @@ const OverflowTooltip = require("../OverflowTooltip/OverflowTooltip.cjs");
 const Link = require("../Link/Link.cjs");
 const Radio = require("../Radio/Radio.cjs");
 const ListContainer = require("../ListContainer/ListContainer.cjs");
-const Typography = require("../Typography/Typography.cjs");
 const ListItem = require("../ListContainer/ListItem/ListItem.cjs");
 const DEFAULT_LABELS = {
+  /** The label used for the All checkbox action. @deprecated no longer used */
   selectAll: "Select All",
+  /** The label used in the middle of the multi-selection count. */
   selectionConjunction: "/"
 };
 const HvList = (props) => {
@@ -89,22 +91,20 @@ const HvList = (props) => {
     }) : null;
   };
   const renderSelectAll = () => {
-    const { selectAll, selectionConjunction } = labels;
     const anySelected2 = !!selection?.length;
     const allSelected = selection.length === list.length;
-    const selectionLabel = /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "span", children: !anySelected2 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("b", { children: selectAll }),
-      ` (${list.length})`
-    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("b", { children: selection.length }),
-      ` ${selectionConjunction} `,
-      list.length
-    ] }) });
     return /* @__PURE__ */ jsxRuntime.jsx(
       CheckBox.HvCheckBox,
       {
         id: setId.setId(id, "select-all"),
-        label: selectionLabel,
+        label: /* @__PURE__ */ jsxRuntime.jsx(
+          CounterLabel.CounterLabel,
+          {
+            selected: selection.length,
+            total: list.length,
+            conjunctionLabel: labels.selectionConjunction
+          }
+        ),
         onChange: handleSelectAll,
         className: classes.selectAllSelector,
         indeterminate: anySelected2 && !allSelected,

package/dist/cjs/Pagination/Pagination.styles.cjs

@@ -5,6 +5,7 @@ const uikitStyles = require("@hitachivantara/uikit-styles");
 const BaseDropdown_styles = require("../BaseDropdown/BaseDropdown.styles.cjs");
 require("../BaseDropdown/BaseDropdown.cjs");
 const Input_styles = require("../Input/Input.styles.cjs");
+require("../Input/Input.cjs");
 const hoverColor = uikitStyles.theme.colors.atmo3;
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvPagination", {
   /** Styles applied to the component root class. */

package/dist/cjs/Select/Select.styles.cjs

@@ -12,7 +12,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSelect",
   disabled: {},
   readOnly: {},
   invalid: {
-    border: `1px solid ${uikitStyles.theme.colors.negative_120}`
+    borderColor: uikitStyles.theme.colors.negative_120
   },
   labelContainer: {
     display: "flex",

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

@@ -3,6 +3,7 @@ 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");
+require("../BaseInput/BaseInput.cjs");
 const Suggestions_styles = require("../FormElement/Suggestions/Suggestions.styles.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTagsInput", {
   input: {
@@ -115,10 +116,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTagsInput
   tagInputRoot: {
     [`& .${BaseInput_styles.staticClasses.root}`]: {
       width: "100%",
-      border: "none",
-      "&:hover $tagInputBorderContainer": {
-        background: "none"
-      }
+      border: "none"
     },
     [`&& .${BaseInput_styles.staticClasses.inputRoot}`]: {
       marginLeft: 0,
@@ -129,10 +127,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTagsInput
       padding: 0,
       border: "none"
     },
-    [`& .${BaseInput_styles.staticClasses.inputBorderContainer}`]: {
-      border: "none",
-      background: "none"
-    },
     [`& .${BaseInput_styles.staticClasses.inputRootFocused}`]: {
       outline: "none",
       boxShadow: "none"
@@ -155,6 +149,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTagsInput
     outlineOffset: "-1px",
     boxShadow: "0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)"
   },
+  /** @deprecated unused. use `::after` instead */
   tagInputBorderContainer: {},
   tagInputRootFocused: {},
   tagInputRootEmpty: {},

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/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/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/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  /** 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: 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":";;;;;;;;;AA8DO,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;"}

package/dist/esm/BaseInput/BaseInput.styles.js

@@ -3,176 +3,99 @@ import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../utils/focusUtils.js";
 const { staticClasses, useClasses } = createClasses("HvBaseInput", {
   root: {
-    display: "inline-block",
-    width: "100%",
-    position: "relative",
-    "&:hover $inputBorderContainer": {
-      backgroundColor: theme.colors.primary
-    },
-    "&:focus-within $inputBorderContainer": {
-      backgroundColor: theme.colors.primary
-    }
-  },
-  disabled: {
-    "& $inputRoot": {
-      backgroundColor: theme.colors.atmo2,
-      borderColor: theme.colors.secondary_60
-    },
-    "& $inputBorderContainer": {
-      backgroundColor: theme.colors.atmo4
-    },
-    "&:hover $inputBorderContainer": {
-      backgroundColor: theme.colors.atmo4
-    },
-    "&& $input": {
-      color: theme.colors.secondary_60,
-      WebkitTextFillColor: theme.colors.secondary_60
-    },
-    "& $inputRootMultiline": {
-      "& $input": {
-        backgroundColor: theme.colors.atmo2,
-        border: `1px solid ${theme.colors.secondary_60}`
-      }
-    },
-    "&:hover $inputRootMultiline": {
-      "& $input": {
-        backgroundColor: theme.colors.atmo2,
-        border: `1px solid ${theme.colors.secondary_60}`
-      }
-    }
-  },
-  invalid: {
-    "&:not(.disabled)": {
-      "& $inputBorderContainer": {
-        backgroundColor: theme.colors.negative_120
-      },
-      "&:hover $inputBorderContainer": {
-        backgroundColor: theme.colors.negative_120
-      },
-      "& $inputRootMultiline": {
-        "& $input": {
-          border: `1px solid ${theme.colors.negative_120}`
-        }
-      },
-      "&:hover $inputRootMultiline": {
-        "& $input": {
-          border: `1px solid ${theme.colors.negative_120}`
-        }
-      },
-      "&:focus-within $inputRootMultiline": {
-        "& $input": {
-          border: `1px solid ${theme.colors.negative_120}`
-        }
+    // #region `input` style reset
+    "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[type=number]": {
+      MozAppearance: "textfield",
+      "&::-webkit-outer-spin-button,&::-webkit-inner-spin-button": {
+        WebkitAppearance: "none",
+        margin: 0
       }
-    }
-  },
-  resizable: { width: "auto" },
-  readOnly: {
-    "& $inputBorderContainer": {
-      backgroundColor: "transparent"
     },
-    "&:hover $inputBorderContainer": {
-      backgroundColor: "transparent"
-    },
-    "&:focus-within $inputBorderContainer": {
-      backgroundColor: "transparent"
-    },
-    "& $inputRootMultiline": {
-      "& $input": {
-        border: `1px solid ${theme.colors.secondary_60}`,
-        backgroundColor: theme.colors.atmo2
-      }
+    // Clears time input clock in Chrome
+    "input::-webkit-calendar-picker-indicator": {
+      display: "none"
     },
-    "&:hover $inputRootMultiline": {
-      "& $input": {
-        border: `1px solid ${theme.colors.secondary_60}`,
-        backgroundColor: theme.colors.atmo2
-      }
+    // Clears search input clear button in Chrome
+    "input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration": {
+      display: "none"
     },
-    "&:focus-within $inputRootMultiline": {
-      "& $input": {
-        border: `1px solid ${theme.colors.secondary_60}`,
-        backgroundColor: theme.colors.atmo2
-      }
-    }
-  },
-  inputBorderContainer: {
-    position: "absolute",
-    width: "calc(100% - 4px)",
-    height: "0px",
-    top: "31px",
-    left: "2px",
-    backgroundColor: theme.colors.atmo4
-  },
-  inputRootInvalid: { borderColor: theme.colors.negative_120 },
-  inputRootReadOnly: {
-    borderColor: theme.colors.secondary_60,
-    backgroundColor: theme.colors.atmo2
-  },
-  inputRoot: {
-    margin: 0,
+    // #endregion
+    display: "inline-flex",
     width: "100%",
+    position: "relative",
+    margin: 0,
     borderRadius: theme.radii.base,
     height: "32px",
-    border: `1px solid ${theme.colors.secondary}`,
+    borderWidth: 1,
+    borderColor: theme.colors.secondary,
     boxSizing: "border-box",
     backgroundColor: theme.colors.atmo1,
     fontFamily: theme.fontFamily.body,
-    "&:hover:not($inputRootDisabled):not($inputRootInvalid):not($inputRootReadOnly)": {
+    ":hover:not($disabled,$invalid,$readOnly)": {
       borderColor: theme.colors.primary
     },
-    "&:hover:not($inputRootDisabled)::before": {
-      borderBottom: "none"
-    },
-    "&::before": {
-      borderBottom: "none"
-    },
-    "&::after": {
-      borderBottom: "none"
+    ":focus-within:not($disabled)": {
+      ...outlineStyles
     }
   },
-  inputRootFocused: {
-    backgroundColor: theme.colors.atmo1,
-    ...outlineStyles,
-    "&:hover": {
-      backgroundColor: theme.colors.atmo1
-    },
-    "&$inputRootReadOnly": {
-      backgroundColor: theme.colors.atmo2
-    }
-  },
-  inputRootDisabled: {
+  disabled: {
+    backgroundColor: theme.colors.atmo2,
+    borderColor: theme.colors.secondary_60,
     cursor: "not-allowed",
     "&&::before": {
       borderBottomStyle: "none"
     }
   },
-  inputRootMultiline: {
+  invalid: {
+    borderColor: theme.colors.negative_120
+  },
+  multiline: {
     padding: 0,
-    backgroundColor: "transparent",
     overflow: "auto",
-    border: "none",
     height: "auto",
     "& $input": {
-      border: `1px solid ${theme.colors.secondary}`,
       borderRadius: theme.radii.base,
-      backgroundColor: theme.colors.atmo1,
       height: "auto",
       minHeight: "21px",
       padding: "5px 10px",
       overflow: "auto",
-      marginLeft: "0px",
-      marginRight: "0px",
-      "&:hover": {
-        border: `1px solid ${theme.colors.primary}`
-      }
+      margin: 0
     }
   },
+  resizable: { width: "auto" },
+  readOnly: {
+    borderColor: theme.colors.secondary_60,
+    backgroundColor: theme.colors.atmo2
+  },
+  focused: {},
+  /** @deprecated unused. use `::after` instead */
+  inputBorderContainer: {},
+  /** @deprecated use `classes.invalid` instead */
+  inputRootInvalid: { borderColor: theme.colors.negative_120 },
+  /** @deprecated use `classes.readOnly` instead */
+  inputRootReadOnly: {
+    borderColor: theme.colors.secondary_60,
+    backgroundColor: theme.colors.atmo2
+  },
+  /** @deprecated use `classes.root` instead */
+  inputRoot: {},
+  /** @deprecated unused */
+  inputRootFocused: {},
+  /** @deprecated use `classes.disabled` instead */
+  inputRootDisabled: {},
+  /** @deprecated use `classes.multiline` instead */
+  inputRootMultiline: {},
   input: {
-    height: "19px",
+    height: "100%",
     marginLeft: theme.space.xs,
     marginRight: theme.space.xs,
-    padding: "6px 0 5px",
+    padding: theme.spacing("5px", 0),
+    backgroundColor: "transparent",
     overflow: "hidden",
     textOverflow: "ellipsis",
     outline: "none",
@@ -182,16 +105,19 @@ const { staticClasses, useClasses } = createClasses("HvBaseInput", {
     "&::placeholder": {
       opacity: 1,
       color: theme.colors.secondary_80
-    },
-    "&::-ms-clear": {
-      display: "none"
     }
   },
-  inputDisabled: {},
+  inputDisabled: {
+    color: theme.colors.secondary_60,
+    WebkitTextFillColor: theme.colors.secondary_60
+  },
   inputReadOnly: {
     color: theme.colors.secondary_80
   },
-  inputResizable: { resize: "both", width: "100%" }
+  inputResizable: {
+    resize: "both",
+    width: "100%"
+  }
 });
 export {
   staticClasses,