@hitachivantara/uikit-react-core 5.26.1 → 5.26.3

package/dist/cjs/components/FileUploader/DropZone/DropZone.cjs

@@ -3,7 +3,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const uniqueId = require("lodash/uniqueId");
 const accept = require("attr-accept");
-const keyboardUtils = require("../../../utils/keyboardUtils.cjs");
 const setId = require("../../../utils/setId.cjs");
 const useUniqueId = require("../../../hooks/useUniqueId.cjs");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
@@ -67,7 +66,6 @@ const HvDropZone = ({
     children: [!hideLabels && /* @__PURE__ */ jsxRuntime.jsxs("div", {
       id,
       className: classes.dropZoneLabelsGroup,
-      "aria-label": "File Dropzone",
       children: [/* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, {
         id: setId.setId(id, "input-file-label"),
         htmlFor: setId.setId(id, "input-file"),
@@ -78,50 +76,13 @@ const HvDropZone = ({
         children: [Number.isInteger(maxFileSize) && `${labels == null ? void 0 : labels.sizeWarning} ${utils.convertUnits(maxFileSize)}`, (labels == null ? void 0 : labels.acceptedFiles) && labels.acceptedFiles, !(labels == null ? void 0 : labels.acceptedFiles) && acceptedFiles.length > 0 && ` (${acceptedFiles.join(", ")})`]
       })]
     }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      id: setId.setId(id, "button"),
+      id: setId.setId(id, "input-file-container"),
       className: cx(classes.dropZoneContainer, {
         [classes.dragAction]: dragState,
         [classes.dropZoneContainerDisabled]: disabled
       }),
-      role: "button",
-      tabIndex: 0,
-      onDragEnter: (event) => {
-        if (!disabled) {
-          enterDropArea();
-          event.stopPropagation();
-          event.preventDefault();
-        }
-      },
-      onDragLeave: leaveDropArea,
-      onDropCapture: leaveDropArea,
-      onDragOver: (event) => {
-        if (!disabled) {
-          enterDropArea();
-          event.stopPropagation();
-          event.preventDefault();
-        }
-      },
-      onDrop: (event) => {
-        if (!disabled) {
-          const {
-            files
-          } = event.dataTransfer;
-          if (multiple === true || files.length === 1) {
-            event.stopPropagation();
-            event.preventDefault();
-            onChangeHandler(files);
-          }
-        }
-      },
-      onKeyDown: (e) => {
-        var _a;
-        if (keyboardUtils.isKey(e, "Enter") || keyboardUtils.isKey(e, "Space")) {
-          (_a = inputRef.current) == null ? void 0 : _a.click();
-        }
-      },
       children: [/* @__PURE__ */ jsxRuntime.jsx("input", {
         id: setId.setId(id, "input-file"),
-        tabIndex: -1,
         className: classes.inputArea,
         type: "file",
         multiple,
@@ -138,6 +99,34 @@ const HvDropZone = ({
             onChangeHandler(inputRef.current.files);
           }
         },
+        onDragEnter: (event) => {
+          if (!disabled) {
+            enterDropArea();
+            event.stopPropagation();
+            event.preventDefault();
+          }
+        },
+        onDragLeave: leaveDropArea,
+        onDropCapture: leaveDropArea,
+        onDragOver: (event) => {
+          if (!disabled) {
+            enterDropArea();
+            event.stopPropagation();
+            event.preventDefault();
+          }
+        },
+        onDrop: (event) => {
+          if (!disabled) {
+            const {
+              files
+            } = event.dataTransfer;
+            if (multiple === true || files.length === 1) {
+              event.stopPropagation();
+              event.preventDefault();
+              onChangeHandler(files);
+            }
+          }
+        },
         ref: inputRef,
         accept: acceptedFiles.join(","),
         ...inputProps

package/dist/cjs/components/FileUploader/DropZone/DropZone.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropZone.cjs","sources":["../../../../../src/components/FileUploader/DropZone/DropZone.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\n\nimport uniqueId from \"lodash/uniqueId\";\n\nimport accept from \"attr-accept\";\n\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { Doc } from \"@hitachivantara/uikit-react-icons\";\nimport { HvInfoMessage, HvLabel } from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { convertUnits } from \"../utils\";\nimport { HvFileData, HvFilesAddedEvent } from \"../File\";\n\nimport { staticClasses, useClasses } from \"./DropZone.styles\";\n\nexport { staticClasses as dropZoneClasses };\n\nexport type HvDropZoneClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropZoneLabels {\n  /**\n   * Extensions of the accepted file types\n   */\n  acceptedFiles?: string;\n  /**\n   * Dropzone area label.\n   */\n  dropzone?: string;\n  /**\n   * Size file warning label.\n   */\n  sizeWarning?: string;\n  /**\n   * Size file warning label.\n   */\n  drag?: string;\n  /**\n   * Size file warning label.\n   */\n  selectFiles?: string;\n  /**\n   * Theming sheet used to style components\n   * */\n  dropFiles?: string;\n  /**\n   * Message to display when file size is greater than allowed\n   * */\n  fileSizeError?: string;\n  /**\n   * Message to display when file type is greater than allowed\n   * */\n  fileTypeError?: string;\n}\n\nexport interface HvDropZoneProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * Labels to present in FileUploader.\n   */\n  labels?: HvDropZoneLabels;\n  /**\n   * Whether the Dropzone should accept multiple files at once.\n   */\n  multiple?: boolean;\n  /**\n   * If the input is disabled or not\n   */\n  disabled?: boolean;\n  /**\n   * Files extensions accepted for upload.\n   */\n  acceptedFiles: string[];\n  /**\n   * Max upload size\n   * */\n  maxFileSize: number;\n  /**\n   * Function responsible for processing files added to the drop zone.\n   */\n  onFilesAdded?: HvFilesAddedEvent;\n  /**\n   * Whether the DropZone should hide labels or not.\n   */\n  hideLabels?: boolean;\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvDropZoneClasses;\n}\n\nexport const HvDropZone = ({\n  id: idProp,\n  classes: classesProp,\n  labels,\n  acceptedFiles,\n  maxFileSize,\n  inputProps,\n  hideLabels,\n  multiple = true,\n  disabled = false,\n  onFilesAdded,\n}: HvDropZoneProps) => {\n  const id = useUniqueId(idProp, \"dropzone\");\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [dragState, setDrag] = useState<boolean>(false);\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const leaveDropArea = () => {\n    setDrag(false);\n  };\n\n  const enterDropArea = () => {\n    setDrag(true);\n  };\n\n  const onChangeHandler = (filesList: FileList) => {\n    const filesToProcess = Object.keys(filesList).map((e) => filesList[e]);\n\n    const newFiles: HvFileData[] = [];\n\n    filesToProcess.forEach((file: File) => {\n      const newFile: HvFileData = file;\n\n      const isSizeAllowed = file.size <= maxFileSize;\n      const isFileAccepted =\n        !acceptedFiles.length ||\n        acceptedFiles.indexOf(file.type.split(\"/\")[1]) > -1 ||\n        acceptedFiles.some((acceptExtension) =>\n          accept({ name: file.name, type: file.type }, acceptExtension)\n        );\n\n      if (!isFileAccepted) {\n        newFile.errorMessage = labels?.fileTypeError;\n        newFile.status = \"fail\";\n      } else if (!isSizeAllowed) {\n        newFile.errorMessage = labels?.fileSizeError;\n        newFile.status = \"fail\";\n      }\n\n      newFile.id = uniqueId(\"uploaded-file-data-\");\n      newFiles.push(newFile);\n    });\n\n    onFilesAdded?.(newFiles);\n  };\n\n  return (\n    <>\n      {!hideLabels && (\n        <div\n          id={id}\n          className={classes.dropZoneLabelsGroup}\n          aria-label=\"File Dropzone\"\n        >\n          <HvLabel\n            id={setId(id, \"input-file-label\")}\n            htmlFor={setId(id, \"input-file\")}\n            label={labels?.dropzone}\n            className={classes.dropZoneLabel}\n          />\n          <HvInfoMessage id={setId(id, \"description\")}>\n            {Number.isInteger(maxFileSize) &&\n              `${labels?.sizeWarning} ${convertUnits(maxFileSize)}`}\n            {labels?.acceptedFiles && labels.acceptedFiles}\n            {!labels?.acceptedFiles &&\n              acceptedFiles.length > 0 &&\n              `\\u00A0(${acceptedFiles.join(\", \")})`}\n          </HvInfoMessage>\n        </div>\n      )}\n      <div\n        id={setId(id, \"button\")}\n        className={cx(classes.dropZoneContainer, {\n          [classes.dragAction]: dragState,\n          [classes.dropZoneContainerDisabled]: disabled,\n        })}\n        role=\"button\"\n        tabIndex={0}\n        onDragEnter={(event) => {\n          if (!disabled) {\n            enterDropArea();\n            event.stopPropagation();\n            event.preventDefault();\n          }\n        }}\n        onDragLeave={leaveDropArea}\n        onDropCapture={leaveDropArea}\n        onDragOver={(event) => {\n          if (!disabled) {\n            enterDropArea();\n            event.stopPropagation();\n            event.preventDefault();\n          }\n        }}\n        onDrop={(event) => {\n          if (!disabled) {\n            const { files } = event.dataTransfer;\n            if (multiple === true || files.length === 1) {\n              event.stopPropagation();\n              event.preventDefault();\n              onChangeHandler(files);\n            }\n          }\n        }}\n        onKeyDown={(e) => {\n          if (isKey(e, \"Enter\") || isKey(e, \"Space\")) {\n            inputRef.current?.click();\n          }\n        }}\n      >\n        <input\n          id={setId(id, \"input-file\")}\n          tabIndex={-1}\n          className={classes.inputArea}\n          type=\"file\"\n          multiple={multiple}\n          disabled={disabled}\n          title={!disabled ? `${labels?.drag}\\xa0${labels?.selectFiles}` : \"\"}\n          onClick={() => {\n            if (inputRef.current) {\n              inputRef.current.value = \"\";\n            }\n          }}\n          onChange={() => {\n            if (!disabled && inputRef.current?.files) {\n              onChangeHandler(inputRef.current.files);\n            }\n          }}\n          ref={inputRef}\n          accept={acceptedFiles.join(\",\")}\n          {...inputProps}\n        />\n        <div className={classes?.dropArea}>\n          {dragState ? (\n            <div className={classes.dropZoneAreaLabels}>\n              <HvTypography className={classes.dragText}>\n                {labels?.dropFiles}\n              </HvTypography>\n            </div>\n          ) : (\n            <>\n              <Doc\n                iconSize=\"M\"\n                className={classes.dropZoneAreaIcon}\n                color={disabled ? \"secondary_60\" : \"secondary\"}\n              />\n              <div className={classes.dropZoneAreaLabels}>\n                <HvTypography className={classes.dragText}>\n                  {labels?.drag}\n                  <span\n                    className={classes.selectFilesText}\n                  >{`\\xa0${labels?.selectFiles}`}</span>\n                </HvTypography>\n              </div>\n            </>\n          )}\n        </div>\n      </div>\n    </>\n  );\n};\n"],"names":["HvDropZone","id","idProp","classes","classesProp","labels","acceptedFiles","maxFileSize","inputProps","hideLabels","multiple","disabled","onFilesAdded","useUniqueId","cx","useClasses","dragState","setDrag","useState","inputRef","useRef","leaveDropArea","enterDropArea","onChangeHandler","filesList","filesToProcess","Object","keys","map","e","newFiles","forEach","file","newFile","isSizeAllowed","size","isFileAccepted","length","indexOf","type","split","some","acceptExtension","accept","name","errorMessage","fileTypeError","status","fileSizeError","uniqueId","push","_Fragment","children","className","dropZoneLabelsGroup","_jsx","HvLabel","setId","htmlFor","label","dropzone","dropZoneLabel","_jsxs","HvInfoMessage","Number","isInteger","sizeWarning","convertUnits","join","dropZoneContainer","dragAction","dropZoneContainerDisabled","role","tabIndex","onDragEnter","event","stopPropagation","preventDefault","onDragLeave","onDropCapture","onDragOver","onDrop","files","dataTransfer","onKeyDown","isKey","current","click","inputArea","title","drag","selectFiles","onClick","value","onChange","ref","dropArea","dropZoneAreaLabels","HvTypography","dragText","dropFiles","Doc","iconSize","dropZoneAreaIcon","color","selectFilesText"],"mappings":"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"}
+{"version":3,"file":"DropZone.cjs","sources":["../../../../../src/components/FileUploader/DropZone/DropZone.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\n\nimport uniqueId from \"lodash/uniqueId\";\n\nimport accept from \"attr-accept\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { Doc } from \"@hitachivantara/uikit-react-icons\";\nimport { HvInfoMessage, HvLabel } from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { convertUnits } from \"../utils\";\nimport { HvFileData, HvFilesAddedEvent } from \"../File\";\n\nimport { staticClasses, useClasses } from \"./DropZone.styles\";\n\nexport { staticClasses as dropZoneClasses };\n\nexport type HvDropZoneClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropZoneLabels {\n  /**\n   * Extensions of the accepted file types\n   */\n  acceptedFiles?: string;\n  /**\n   * Dropzone area label.\n   */\n  dropzone?: string;\n  /**\n   * Size file warning label.\n   */\n  sizeWarning?: string;\n  /**\n   * Size file warning label.\n   */\n  drag?: string;\n  /**\n   * Size file warning label.\n   */\n  selectFiles?: string;\n  /**\n   * Theming sheet used to style components\n   * */\n  dropFiles?: string;\n  /**\n   * Message to display when file size is greater than allowed\n   * */\n  fileSizeError?: string;\n  /**\n   * Message to display when file type is greater than allowed\n   * */\n  fileTypeError?: string;\n}\n\nexport interface HvDropZoneProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * Labels to present in FileUploader.\n   */\n  labels?: HvDropZoneLabels;\n  /**\n   * Whether the Dropzone should accept multiple files at once.\n   */\n  multiple?: boolean;\n  /**\n   * If the input is disabled or not\n   */\n  disabled?: boolean;\n  /**\n   * Files extensions accepted for upload.\n   */\n  acceptedFiles: string[];\n  /**\n   * Max upload size\n   * */\n  maxFileSize: number;\n  /**\n   * Function responsible for processing files added to the drop zone.\n   */\n  onFilesAdded?: HvFilesAddedEvent;\n  /**\n   * Whether the DropZone should hide labels or not.\n   */\n  hideLabels?: boolean;\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvDropZoneClasses;\n}\n\nexport const HvDropZone = ({\n  id: idProp,\n  classes: classesProp,\n  labels,\n  acceptedFiles,\n  maxFileSize,\n  inputProps,\n  hideLabels,\n  multiple = true,\n  disabled = false,\n  onFilesAdded,\n}: HvDropZoneProps) => {\n  const id = useUniqueId(idProp, \"dropzone\");\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [dragState, setDrag] = useState<boolean>(false);\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const leaveDropArea = () => {\n    setDrag(false);\n  };\n\n  const enterDropArea = () => {\n    setDrag(true);\n  };\n\n  const onChangeHandler = (filesList: FileList) => {\n    const filesToProcess = Object.keys(filesList).map((e) => filesList[e]);\n\n    const newFiles: HvFileData[] = [];\n\n    filesToProcess.forEach((file: File) => {\n      const newFile: HvFileData = file;\n\n      const isSizeAllowed = file.size <= maxFileSize;\n      const isFileAccepted =\n        !acceptedFiles.length ||\n        acceptedFiles.indexOf(file.type.split(\"/\")[1]) > -1 ||\n        acceptedFiles.some((acceptExtension) =>\n          accept({ name: file.name, type: file.type }, acceptExtension)\n        );\n\n      if (!isFileAccepted) {\n        newFile.errorMessage = labels?.fileTypeError;\n        newFile.status = \"fail\";\n      } else if (!isSizeAllowed) {\n        newFile.errorMessage = labels?.fileSizeError;\n        newFile.status = \"fail\";\n      }\n\n      newFile.id = uniqueId(\"uploaded-file-data-\");\n      newFiles.push(newFile);\n    });\n\n    onFilesAdded?.(newFiles);\n  };\n\n  return (\n    <>\n      {!hideLabels && (\n        <div id={id} className={classes.dropZoneLabelsGroup}>\n          <HvLabel\n            id={setId(id, \"input-file-label\")}\n            htmlFor={setId(id, \"input-file\")}\n            label={labels?.dropzone}\n            className={classes.dropZoneLabel}\n          />\n          <HvInfoMessage id={setId(id, \"description\")}>\n            {Number.isInteger(maxFileSize) &&\n              `${labels?.sizeWarning} ${convertUnits(maxFileSize)}`}\n            {labels?.acceptedFiles && labels.acceptedFiles}\n            {!labels?.acceptedFiles &&\n              acceptedFiles.length > 0 &&\n              `\\u00A0(${acceptedFiles.join(\", \")})`}\n          </HvInfoMessage>\n        </div>\n      )}\n      <div\n        id={setId(id, \"input-file-container\")}\n        className={cx(classes.dropZoneContainer, {\n          [classes.dragAction]: dragState,\n          [classes.dropZoneContainerDisabled]: disabled,\n        })}\n      >\n        <input\n          id={setId(id, \"input-file\")}\n          className={classes.inputArea}\n          type=\"file\"\n          multiple={multiple}\n          disabled={disabled}\n          title={!disabled ? `${labels?.drag}\\xa0${labels?.selectFiles}` : \"\"}\n          onClick={() => {\n            if (inputRef.current) {\n              inputRef.current.value = \"\";\n            }\n          }}\n          onChange={() => {\n            if (!disabled && inputRef.current?.files) {\n              onChangeHandler(inputRef.current.files);\n            }\n          }}\n          onDragEnter={(event) => {\n            if (!disabled) {\n              enterDropArea();\n              event.stopPropagation();\n              event.preventDefault();\n            }\n          }}\n          onDragLeave={leaveDropArea}\n          onDropCapture={leaveDropArea}\n          onDragOver={(event) => {\n            if (!disabled) {\n              enterDropArea();\n              event.stopPropagation();\n              event.preventDefault();\n            }\n          }}\n          onDrop={(event) => {\n            if (!disabled) {\n              const { files } = event.dataTransfer;\n              if (multiple === true || files.length === 1) {\n                event.stopPropagation();\n                event.preventDefault();\n                onChangeHandler(files);\n              }\n            }\n          }}\n          ref={inputRef}\n          accept={acceptedFiles.join(\",\")}\n          {...inputProps}\n        />\n        <div className={classes?.dropArea}>\n          {dragState ? (\n            <div className={classes.dropZoneAreaLabels}>\n              <HvTypography className={classes.dragText}>\n                {labels?.dropFiles}\n              </HvTypography>\n            </div>\n          ) : (\n            <>\n              <Doc\n                iconSize=\"M\"\n                className={classes.dropZoneAreaIcon}\n                color={disabled ? \"secondary_60\" : \"secondary\"}\n              />\n              <div className={classes.dropZoneAreaLabels}>\n                <HvTypography className={classes.dragText}>\n                  {labels?.drag}\n                  <span\n                    className={classes.selectFilesText}\n                  >{`\\xa0${labels?.selectFiles}`}</span>\n                </HvTypography>\n              </div>\n            </>\n          )}\n        </div>\n      </div>\n    </>\n  );\n};\n"],"names":["HvDropZone","id","idProp","classes","classesProp","labels","acceptedFiles","maxFileSize","inputProps","hideLabels","multiple","disabled","onFilesAdded","useUniqueId","cx","useClasses","dragState","setDrag","useState","inputRef","useRef","leaveDropArea","enterDropArea","onChangeHandler","filesList","filesToProcess","Object","keys","map","e","newFiles","forEach","file","newFile","isSizeAllowed","size","isFileAccepted","length","indexOf","type","split","some","acceptExtension","accept","name","errorMessage","fileTypeError","status","fileSizeError","uniqueId","push","_Fragment","children","className","dropZoneLabelsGroup","_jsx","HvLabel","setId","htmlFor","label","dropzone","dropZoneLabel","_jsxs","HvInfoMessage","Number","isInteger","sizeWarning","convertUnits","join","dropZoneContainer","dragAction","dropZoneContainerDisabled","inputArea","title","drag","selectFiles","onClick","current","value","onChange","files","onDragEnter","event","stopPropagation","preventDefault","onDragLeave","onDropCapture","onDragOver","onDrop","dataTransfer","ref","dropArea","dropZoneAreaLabels","HvTypography","dragText","dropFiles","Doc","iconSize","dropZoneAreaIcon","color","selectFilesText"],"mappings":"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"}

package/dist/cjs/components/FileUploader/DropZone/DropZone.styles.cjs

@@ -19,7 +19,7 @@ const {
       background: `${uikitStyles.theme.colors.atmo1}`,
       border: `1px ${uikitStyles.theme.fileUploader.dropZone.borderType} ${uikitStyles.theme.colors.secondary}`
     },
-    "&:focus": {
+    "&:focus-within": {
       background: `${uikitStyles.theme.colors.atmo1}`,
       border: `1px ${uikitStyles.theme.fileUploader.dropZone.borderType} ${uikitStyles.theme.colors.secondary}`,
       ...focusUtils.outlineStyles
@@ -69,7 +69,7 @@ const {
   },
   dropZoneAreaLabels: {
     display: "flex",
-    width: 115,
+    maxWidth: 120,
     margin: "auto"
   },
   dropZoneAreaIcon: {

package/dist/cjs/components/FileUploader/DropZone/DropZone.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropZone.styles.cjs","sources":["../../../../../src/components/FileUploader/DropZone/DropZone.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { CSSProperties } from \"react\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropZone\", {\n  dropZoneContainer: {\n    position: \"relative\",\n    width: \"100%\",\n    display: \"flex\",\n    border: `1px ${theme.fileUploader.dropZone.borderType} ${theme.fileUploader.dropZone.borderColor}`,\n    cursor: \"pointer\",\n    background: theme.fileUploader.dropZone.backgroundColor,\n    borderRadius: theme.fileUploader.dropZone.borderRadius,\n\n    \"&:hover\": {\n      background: `${theme.colors.atmo1}`,\n      border: `1px ${theme.fileUploader.dropZone.borderType} ${theme.colors.secondary}`,\n    },\n\n    \"&:focus\": {\n      background: `${theme.colors.atmo1}`,\n      border: `1px ${theme.fileUploader.dropZone.borderType} ${theme.colors.secondary}`,\n      ...outlineStyles,\n    },\n  },\n  dropZoneLabelsGroup: {\n    display: \"flex\",\n    justifyContent: \"start\",\n\n    \"& label:nth-of-type(1)\": {},\n\n    \"& p:nth-of-type(2)\": {\n      marginLeft: \"auto\",\n    },\n  },\n  dragAction: {\n    background: `${theme.colors.atmo1}`,\n    border: `1px ${theme.fileUploader.dropZone.borderType} ${theme.fileUploader.dropZone.borderColorDrag}`,\n  },\n  dropZoneContainerDisabled: {\n    background: `${theme.colors.atmo3}`,\n    border: `1px ${theme.fileUploader.dropZone.borderType} ${theme.fileUploader.dropZone.borderColorDisabled}`,\n    cursor: \"not-allowed\",\n    \"&:hover\": {\n      background: `${theme.colors.atmo3}`,\n      border: `1px ${theme.fileUploader.dropZone.borderType} ${theme.fileUploader.dropZone.borderColorDisabled}`,\n    },\n\n    \"& $dragText\": {\n      color: theme.colors.secondary_60,\n    },\n    \"& $selectFilesText\": {\n      color: theme.colors.secondary_60,\n    },\n  },\n  inputArea: {\n    opacity: 0,\n    width: \"100%\",\n    position: \"absolute\",\n    height: \"100%\",\n    cursor: \"pointer\",\n\n    \"&:disabled\": {\n      cursor: \"not-allowed\",\n    },\n  },\n  dropArea: {\n    display: \"flex\",\n    margin: `${theme.space.md} auto`,\n    minHeight: 48,\n  },\n  dropZoneAreaLabels: {\n    display: \"flex\",\n    width: 115,\n    margin: \"auto\",\n  },\n  dropZoneAreaIcon: {\n    margin: \"auto\",\n    marginRight: theme.space.xs,\n  },\n  dropZoneLabel: {\n    paddingBottom: 6,\n  },\n  dragText: {\n    ...(theme.typography.body as CSSProperties),\n  },\n  selectFilesText: {\n    ...(theme.typography.label as CSSProperties),\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","dropZoneContainer","position","width","display","border","theme","fileUploader","dropZone","borderType","borderColor","cursor","background","backgroundColor","borderRadius","colors","atmo1","secondary","outlineStyles","dropZoneLabelsGroup","justifyContent","marginLeft","dragAction","borderColorDrag","dropZoneContainerDisabled","atmo3","borderColorDisabled","color","secondary_60","inputArea","opacity","height","dropArea","margin","space","md","minHeight","dropZoneAreaLabels","dropZoneAreaIcon","marginRight","xs","dropZoneLabel","paddingBottom","dragText","typography","body","selectFilesText","label"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,cAAc;AAAA,EACvEC,mBAAmB;AAAA,IACjBC,UAAU;AAAA,IACVC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,QAAS,OAAMC,YAAMC,MAAAA,aAAaC,SAASC,cAAcH,YAAAA,MAAMC,aAAaC,SAASE;AAAAA,IACrFC,QAAQ;AAAA,IACRC,YAAYN,YAAMC,MAAAA,aAAaC,SAASK;AAAAA,IACxCC,cAAcR,YAAMC,MAAAA,aAAaC,SAASM;AAAAA,IAE1C,WAAW;AAAA,MACTF,YAAa,GAAEN,YAAAA,MAAMS,OAAOC;AAAAA,MAC5BX,QAAS,OAAMC,YAAAA,MAAMC,aAAaC,SAASC,cAAcH,YAAAA,MAAMS,OAAOE;AAAAA,IACxE;AAAA,IAEA,WAAW;AAAA,MACTL,YAAa,GAAEN,YAAAA,MAAMS,OAAOC;AAAAA,MAC5BX,QAAS,OAAMC,YAAAA,MAAMC,aAAaC,SAASC,cAAcH,YAAAA,MAAMS,OAAOE;AAAAA,MACtE,GAAGC,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,qBAAqB;AAAA,IACnBf,SAAS;AAAA,IACTgB,gBAAgB;AAAA,IAEhB,0BAA0B,CAAC;AAAA,IAE3B,sBAAsB;AAAA,MACpBC,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAC,YAAY;AAAA,IACVV,YAAa,GAAEN,YAAAA,MAAMS,OAAOC;AAAAA,IAC5BX,QAAS,OAAMC,YAAMC,MAAAA,aAAaC,SAASC,cAAcH,YAAAA,MAAMC,aAAaC,SAASe;AAAAA,EACvF;AAAA,EACAC,2BAA2B;AAAA,IACzBZ,YAAa,GAAEN,YAAAA,MAAMS,OAAOU;AAAAA,IAC5BpB,QAAS,OAAMC,YAAMC,MAAAA,aAAaC,SAASC,cAAcH,YAAAA,MAAMC,aAAaC,SAASkB;AAAAA,IACrFf,QAAQ;AAAA,IACR,WAAW;AAAA,MACTC,YAAa,GAAEN,YAAAA,MAAMS,OAAOU;AAAAA,MAC5BpB,QAAS,OAAMC,YAAMC,MAAAA,aAAaC,SAASC,cAAcH,YAAAA,MAAMC,aAAaC,SAASkB;AAAAA,IACvF;AAAA,IAEA,eAAe;AAAA,MACbC,OAAOrB,YAAAA,MAAMS,OAAOa;AAAAA,IACtB;AAAA,IACA,sBAAsB;AAAA,MACpBD,OAAOrB,YAAAA,MAAMS,OAAOa;AAAAA,IACtB;AAAA,EACF;AAAA,EACAC,WAAW;AAAA,IACTC,SAAS;AAAA,IACT3B,OAAO;AAAA,IACPD,UAAU;AAAA,IACV6B,QAAQ;AAAA,IACRpB,QAAQ;AAAA,IAER,cAAc;AAAA,MACZA,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAqB,UAAU;AAAA,IACR5B,SAAS;AAAA,IACT6B,QAAS,GAAE3B,YAAAA,MAAM4B,MAAMC;AAAAA,IACvBC,WAAW;AAAA,EACb;AAAA,EACAC,oBAAoB;AAAA,IAClBjC,SAAS;AAAA,IACTD,OAAO;AAAA,IACP8B,QAAQ;AAAA,EACV;AAAA,EACAK,kBAAkB;AAAA,IAChBL,QAAQ;AAAA,IACRM,aAAajC,YAAAA,MAAM4B,MAAMM;AAAAA,EAC3B;AAAA,EACAC,eAAe;AAAA,IACbC,eAAe;AAAA,EACjB;AAAA,EACAC,UAAU;AAAA,IACR,GAAIrC,YAAAA,MAAMsC,WAAWC;AAAAA,EACvB;AAAA,EACAC,iBAAiB;AAAA,IACf,GAAIxC,YAAAA,MAAMsC,WAAWG;AAAAA,EACvB;AACF,CAAC;;;"}
+{"version":3,"file":"DropZone.styles.cjs","sources":["../../../../../src/components/FileUploader/DropZone/DropZone.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { CSSProperties } from \"react\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropZone\", {\n  dropZoneContainer: {\n    position: \"relative\",\n    width: \"100%\",\n    display: \"flex\",\n    border: `1px ${theme.fileUploader.dropZone.borderType} ${theme.fileUploader.dropZone.borderColor}`,\n    cursor: \"pointer\",\n    background: theme.fileUploader.dropZone.backgroundColor,\n    borderRadius: theme.fileUploader.dropZone.borderRadius,\n\n    \"&:hover\": {\n      background: `${theme.colors.atmo1}`,\n      border: `1px ${theme.fileUploader.dropZone.borderType} ${theme.colors.secondary}`,\n    },\n\n    \"&:focus-within\": {\n      background: `${theme.colors.atmo1}`,\n      border: `1px ${theme.fileUploader.dropZone.borderType} ${theme.colors.secondary}`,\n      ...outlineStyles,\n    },\n  },\n  dropZoneLabelsGroup: {\n    display: \"flex\",\n    justifyContent: \"start\",\n\n    \"& label:nth-of-type(1)\": {},\n\n    \"& p:nth-of-type(2)\": {\n      marginLeft: \"auto\",\n    },\n  },\n  dragAction: {\n    background: `${theme.colors.atmo1}`,\n    border: `1px ${theme.fileUploader.dropZone.borderType} ${theme.fileUploader.dropZone.borderColorDrag}`,\n  },\n  dropZoneContainerDisabled: {\n    background: `${theme.colors.atmo3}`,\n    border: `1px ${theme.fileUploader.dropZone.borderType} ${theme.fileUploader.dropZone.borderColorDisabled}`,\n    cursor: \"not-allowed\",\n    \"&:hover\": {\n      background: `${theme.colors.atmo3}`,\n      border: `1px ${theme.fileUploader.dropZone.borderType} ${theme.fileUploader.dropZone.borderColorDisabled}`,\n    },\n\n    \"& $dragText\": {\n      color: theme.colors.secondary_60,\n    },\n    \"& $selectFilesText\": {\n      color: theme.colors.secondary_60,\n    },\n  },\n  inputArea: {\n    opacity: 0,\n    width: \"100%\",\n    position: \"absolute\",\n    height: \"100%\",\n    cursor: \"pointer\",\n\n    \"&:disabled\": {\n      cursor: \"not-allowed\",\n    },\n  },\n  dropArea: {\n    display: \"flex\",\n    margin: `${theme.space.md} auto`,\n    minHeight: 48,\n  },\n  dropZoneAreaLabels: {\n    display: \"flex\",\n    maxWidth: 120,\n    margin: \"auto\",\n  },\n  dropZoneAreaIcon: {\n    margin: \"auto\",\n    marginRight: theme.space.xs,\n  },\n  dropZoneLabel: {\n    paddingBottom: 6,\n  },\n  dragText: {\n    ...(theme.typography.body as CSSProperties),\n  },\n  selectFilesText: {\n    ...(theme.typography.label as CSSProperties),\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","dropZoneContainer","position","width","display","border","theme","fileUploader","dropZone","borderType","borderColor","cursor","background","backgroundColor","borderRadius","colors","atmo1","secondary","outlineStyles","dropZoneLabelsGroup","justifyContent","marginLeft","dragAction","borderColorDrag","dropZoneContainerDisabled","atmo3","borderColorDisabled","color","secondary_60","inputArea","opacity","height","dropArea","margin","space","md","minHeight","dropZoneAreaLabels","maxWidth","dropZoneAreaIcon","marginRight","xs","dropZoneLabel","paddingBottom","dragText","typography","body","selectFilesText","label"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,cAAc;AAAA,EACvEC,mBAAmB;AAAA,IACjBC,UAAU;AAAA,IACVC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,QAAS,OAAMC,YAAMC,MAAAA,aAAaC,SAASC,cAAcH,YAAAA,MAAMC,aAAaC,SAASE;AAAAA,IACrFC,QAAQ;AAAA,IACRC,YAAYN,YAAMC,MAAAA,aAAaC,SAASK;AAAAA,IACxCC,cAAcR,YAAMC,MAAAA,aAAaC,SAASM;AAAAA,IAE1C,WAAW;AAAA,MACTF,YAAa,GAAEN,YAAAA,MAAMS,OAAOC;AAAAA,MAC5BX,QAAS,OAAMC,YAAAA,MAAMC,aAAaC,SAASC,cAAcH,YAAAA,MAAMS,OAAOE;AAAAA,IACxE;AAAA,IAEA,kBAAkB;AAAA,MAChBL,YAAa,GAAEN,YAAAA,MAAMS,OAAOC;AAAAA,MAC5BX,QAAS,OAAMC,YAAAA,MAAMC,aAAaC,SAASC,cAAcH,YAAAA,MAAMS,OAAOE;AAAAA,MACtE,GAAGC,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,qBAAqB;AAAA,IACnBf,SAAS;AAAA,IACTgB,gBAAgB;AAAA,IAEhB,0BAA0B,CAAC;AAAA,IAE3B,sBAAsB;AAAA,MACpBC,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAC,YAAY;AAAA,IACVV,YAAa,GAAEN,YAAAA,MAAMS,OAAOC;AAAAA,IAC5BX,QAAS,OAAMC,YAAMC,MAAAA,aAAaC,SAASC,cAAcH,YAAAA,MAAMC,aAAaC,SAASe;AAAAA,EACvF;AAAA,EACAC,2BAA2B;AAAA,IACzBZ,YAAa,GAAEN,YAAAA,MAAMS,OAAOU;AAAAA,IAC5BpB,QAAS,OAAMC,YAAMC,MAAAA,aAAaC,SAASC,cAAcH,YAAAA,MAAMC,aAAaC,SAASkB;AAAAA,IACrFf,QAAQ;AAAA,IACR,WAAW;AAAA,MACTC,YAAa,GAAEN,YAAAA,MAAMS,OAAOU;AAAAA,MAC5BpB,QAAS,OAAMC,YAAMC,MAAAA,aAAaC,SAASC,cAAcH,YAAAA,MAAMC,aAAaC,SAASkB;AAAAA,IACvF;AAAA,IAEA,eAAe;AAAA,MACbC,OAAOrB,YAAAA,MAAMS,OAAOa;AAAAA,IACtB;AAAA,IACA,sBAAsB;AAAA,MACpBD,OAAOrB,YAAAA,MAAMS,OAAOa;AAAAA,IACtB;AAAA,EACF;AAAA,EACAC,WAAW;AAAA,IACTC,SAAS;AAAA,IACT3B,OAAO;AAAA,IACPD,UAAU;AAAA,IACV6B,QAAQ;AAAA,IACRpB,QAAQ;AAAA,IAER,cAAc;AAAA,MACZA,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAqB,UAAU;AAAA,IACR5B,SAAS;AAAA,IACT6B,QAAS,GAAE3B,YAAAA,MAAM4B,MAAMC;AAAAA,IACvBC,WAAW;AAAA,EACb;AAAA,EACAC,oBAAoB;AAAA,IAClBjC,SAAS;AAAA,IACTkC,UAAU;AAAA,IACVL,QAAQ;AAAA,EACV;AAAA,EACAM,kBAAkB;AAAA,IAChBN,QAAQ;AAAA,IACRO,aAAalC,YAAAA,MAAM4B,MAAMO;AAAAA,EAC3B;AAAA,EACAC,eAAe;AAAA,IACbC,eAAe;AAAA,EACjB;AAAA,EACAC,UAAU;AAAA,IACR,GAAItC,YAAAA,MAAMuC,WAAWC;AAAAA,EACvB;AAAA,EACAC,iBAAiB;AAAA,IACf,GAAIzC,YAAAA,MAAMuC,WAAWG;AAAAA,EACvB;AACF,CAAC;;;"}

package/dist/cjs/components/OverflowTooltip/OverflowTooltip.cjs

@@ -45,7 +45,7 @@ const HvOverflowTooltip = (props) => {
     }, className),
     children: data
   }), [className, classes.tooltipAnchor, classes.tooltipAnchorParagraph, cx, data, isParag, ref]);
-  return open || isOverflowing ? /* @__PURE__ */ jsxRuntime.jsx(Tooltip.HvTooltip, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.HvTooltip, {
     id,
     disableHoverListener: !isOverflowing,
     open,
@@ -55,9 +55,11 @@ const HvOverflowTooltip = (props) => {
       variant: "body",
       children: data
     }),
+    "aria-label": null,
+    "aria-labelledby": null,
     ...tooltipsProps,
     children: content
-  }) : content;
+  });
 };
 exports.overflowTooltipClasses = OverflowTooltip_styles.staticClasses;
 exports.HvOverflowTooltip = HvOverflowTooltip;

package/dist/cjs/components/OverflowTooltip/OverflowTooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowTooltip.cjs","sources":["../../../../src/components/OverflowTooltip/OverflowTooltip.tsx"],"sourcesContent":["import { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { useMemo } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTooltip, HvTooltipProps } from \"@core/components/Tooltip\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { staticClasses, useClasses } from \"./OverflowTooltip.styles\";\n\nexport { staticClasses as overflowTooltipClasses };\nexport type HvOverflowTooltipClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvOverflowTooltipProps extends HvBaseProps {\n  /** The node that will be rendered inside the tooltip. */\n  data: React.ReactNode;\n  /** If true, the tooltip is shown. */\n  open?: boolean;\n  /** If `true` the overflow tooltip will always use the paragraph overflow style. */\n  paragraphOverflow?: boolean;\n  /** Tooltip placement. */\n  placement?:\n    | \"bottom-end\"\n    | \"bottom-start\"\n    | \"bottom\"\n    | \"left-end\"\n    | \"left-start\"\n    | \"left\"\n    | \"right-end\"\n    | \"right-start\"\n    | \"right\"\n    | \"top-end\"\n    | \"top-start\"\n    | \"top\";\n  /** Extra properties to add to the tooltip. */\n  tooltipsProps?: Partial<HvTooltipProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvOverflowTooltipClasses;\n}\n\nconst isParagraph = (children = \"\") => /\\s/.test(children);\n\n/**\n * This component generates a tooltip whenever the text is overflowed.\n */\nexport const HvOverflowTooltip = (props: HvOverflowTooltipProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    data,\n    open,\n    paragraphOverflow,\n    placement = \"top-start\",\n    tooltipsProps,\n  } = useDefaultProps(\"HvOverflowTooltip\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const { width = 0, ref } = useResizeDetector({\n    refreshMode: \"debounce\",\n    refreshOptions: {\n      trailing: true,\n    },\n    handleHeight: false,\n  });\n  const scrollWidth = ref.current?.scrollWidth || 0;\n  // The difference should be higher than a pixel to be considered as overflowing\n  const isOverflowing = scrollWidth - width >= 1;\n\n  const isParag = useMemo(\n    () => paragraphOverflow && isParagraph(data?.toString()),\n    [data, paragraphOverflow]\n  );\n\n  const content = useMemo(\n    () => (\n      <div\n        ref={ref}\n        className={cx(\n          {\n            [classes.tooltipAnchor]: !isParag,\n            [classes.tooltipAnchorParagraph]: isParag,\n          },\n          className\n        )}\n      >\n        {data}\n      </div>\n    ),\n    [\n      className,\n      classes.tooltipAnchor,\n      classes.tooltipAnchorParagraph,\n      cx,\n      data,\n      isParag,\n      ref,\n    ]\n  );\n\n  return open || isOverflowing ? (\n    <HvTooltip\n      id={id}\n      disableHoverListener={!isOverflowing}\n      open={open}\n      placement={placement}\n      title={\n        <HvTypography className={classes.tooltipData} variant=\"body\">\n          {data}\n        </HvTypography>\n      }\n      {...tooltipsProps}\n    >\n      {content}\n    </HvTooltip>\n  ) : (\n    content\n  );\n};\n"],"names":["isParagraph","children","test","HvOverflowTooltip","props","id","classes","classesProp","className","data","open","paragraphOverflow","placement","tooltipsProps","useDefaultProps","cx","useClasses","width","ref","useResizeDetector","refreshMode","refreshOptions","trailing","handleHeight","scrollWidth","current","isOverflowing","isParag","useMemo","toString","content","_jsx","tooltipAnchor","tooltipAnchorParagraph","HvTooltip","disableHoverListener","title","HvTypography","tooltipData","variant"],"mappings":";;;;;;;;;AAuCA,MAAMA,cAAcA,CAACC,WAAW,OAAO,KAAKC,KAAKD,QAAQ;AAK5CE,MAAAA,oBAAoBA,CAACC,UAAkC;;AAC5D,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,YAAY;AAAA,IACZC;AAAAA,EAAAA,IACEC,gBAAgB,gBAAA,qBAAqBV,KAAK;AACxC,QAAA;AAAA,IAAEE;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,uBAAAA,WAAWT,WAAW;AAExC,QAAA;AAAA,IAAEU,QAAQ;AAAA,IAAGC;AAAAA,MAAQC,sCAAkB;AAAA,IAC3CC,aAAa;AAAA,IACbC,gBAAgB;AAAA,MACdC,UAAU;AAAA,IACZ;AAAA,IACAC,cAAc;AAAA,EAAA,CACf;AACKC,QAAAA,gBAAcN,SAAIO,YAAJP,mBAAaM,gBAAe;AAE1CE,QAAAA,gBAAgBF,cAAcP,SAAS;AAE7C,QAAMU,UAAUC,MAAAA,QACd,MAAMjB,qBAAqBX,YAAYS,6BAAMoB,UAAU,GACvD,CAACpB,MAAME,iBAAiB,CAC1B;AAEA,QAAMmB,UAAUF,MAAAA,QACd,MACEG,2BAAAA,IAAA,OAAA;AAAA,IACEb;AAAAA,IACAV,WAAWO,GACT;AAAA,MACE,CAACT,QAAQ0B,aAAa,GAAG,CAACL;AAAAA,MAC1B,CAACrB,QAAQ2B,sBAAsB,GAAGN;AAAAA,OAEpCnB,SACF;AAAA,IAAEP,UAEDQ;AAAAA,EACE,CAAA,GAEP,CACED,WACAF,QAAQ0B,eACR1B,QAAQ2B,wBACRlB,IACAN,MACAkB,SACAT,GAAG,CAEP;AAEOR,SAAAA,QAAQgB,gBACbK,2BAAAA,IAACG,mBAAS;AAAA,IACR7B;AAAAA,IACA8B,sBAAsB,CAACT;AAAAA,IACvBhB;AAAAA,IACAE;AAAAA,IACAwB,sCACGC,yBAAY;AAAA,MAAC7B,WAAWF,QAAQgC;AAAAA,MAAaC,SAAQ;AAAA,MAAMtC,UACzDQ;AAAAA,IAAAA,CACW;AAAA,IACf,GACGI;AAAAA,IAAaZ,UAEhB6B;AAAAA,EACQ,CAAA,IAEXA;AAEJ;;;"}
+{"version":3,"file":"OverflowTooltip.cjs","sources":["../../../../src/components/OverflowTooltip/OverflowTooltip.tsx"],"sourcesContent":["import { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { useMemo } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTooltip, HvTooltipProps } from \"@core/components/Tooltip\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { staticClasses, useClasses } from \"./OverflowTooltip.styles\";\n\nexport { staticClasses as overflowTooltipClasses };\nexport type HvOverflowTooltipClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvOverflowTooltipProps extends HvBaseProps {\n  /** The node that will be rendered inside the tooltip. */\n  data: React.ReactNode;\n  /** If true, the tooltip is shown. */\n  open?: boolean;\n  /** If `true` the overflow tooltip will always use the paragraph overflow style. */\n  paragraphOverflow?: boolean;\n  /** Tooltip placement. */\n  placement?:\n    | \"bottom-end\"\n    | \"bottom-start\"\n    | \"bottom\"\n    | \"left-end\"\n    | \"left-start\"\n    | \"left\"\n    | \"right-end\"\n    | \"right-start\"\n    | \"right\"\n    | \"top-end\"\n    | \"top-start\"\n    | \"top\";\n  /** Extra properties to add to the tooltip. */\n  tooltipsProps?: Partial<HvTooltipProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvOverflowTooltipClasses;\n}\n\nconst isParagraph = (children = \"\") => /\\s/.test(children);\n\n/**\n * This component generates a tooltip whenever the text is overflowed.\n */\nexport const HvOverflowTooltip = (props: HvOverflowTooltipProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    data,\n    open,\n    paragraphOverflow,\n    placement = \"top-start\",\n    tooltipsProps,\n  } = useDefaultProps(\"HvOverflowTooltip\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const { width = 0, ref } = useResizeDetector({\n    refreshMode: \"debounce\",\n    refreshOptions: {\n      trailing: true,\n    },\n    handleHeight: false,\n  });\n  const scrollWidth = ref.current?.scrollWidth || 0;\n  // The difference should be higher than a pixel to be considered as overflowing\n  const isOverflowing = scrollWidth - width >= 1;\n\n  const isParag = useMemo(\n    () => paragraphOverflow && isParagraph(data?.toString()),\n    [data, paragraphOverflow]\n  );\n\n  const content = useMemo(\n    () => (\n      <div\n        ref={ref}\n        className={cx(\n          {\n            [classes.tooltipAnchor]: !isParag,\n            [classes.tooltipAnchorParagraph]: isParag,\n          },\n          className\n        )}\n      >\n        {data}\n      </div>\n    ),\n    [\n      className,\n      classes.tooltipAnchor,\n      classes.tooltipAnchorParagraph,\n      cx,\n      data,\n      isParag,\n      ref,\n    ]\n  );\n\n  return (\n    <HvTooltip\n      id={id}\n      disableHoverListener={!isOverflowing}\n      open={open}\n      placement={placement}\n      title={\n        <HvTypography className={classes.tooltipData} variant=\"body\">\n          {data}\n        </HvTypography>\n      }\n      // unset since `content` *is* the label\n      aria-label={null as any}\n      aria-labelledby={null as any}\n      {...tooltipsProps}\n    >\n      {content}\n    </HvTooltip>\n  );\n};\n"],"names":["isParagraph","children","test","HvOverflowTooltip","props","id","classes","classesProp","className","data","open","paragraphOverflow","placement","tooltipsProps","useDefaultProps","cx","useClasses","width","ref","useResizeDetector","refreshMode","refreshOptions","trailing","handleHeight","scrollWidth","current","isOverflowing","isParag","useMemo","toString","content","_jsx","tooltipAnchor","tooltipAnchorParagraph","HvTooltip","disableHoverListener","title","HvTypography","tooltipData","variant"],"mappings":";;;;;;;;;AAuCA,MAAMA,cAAcA,CAACC,WAAW,OAAO,KAAKC,KAAKD,QAAQ;AAK5CE,MAAAA,oBAAoBA,CAACC,UAAkC;;AAC5D,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,YAAY;AAAA,IACZC;AAAAA,EAAAA,IACEC,gBAAgB,gBAAA,qBAAqBV,KAAK;AACxC,QAAA;AAAA,IAAEE;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,uBAAAA,WAAWT,WAAW;AAExC,QAAA;AAAA,IAAEU,QAAQ;AAAA,IAAGC;AAAAA,MAAQC,sCAAkB;AAAA,IAC3CC,aAAa;AAAA,IACbC,gBAAgB;AAAA,MACdC,UAAU;AAAA,IACZ;AAAA,IACAC,cAAc;AAAA,EAAA,CACf;AACKC,QAAAA,gBAAcN,SAAIO,YAAJP,mBAAaM,gBAAe;AAE1CE,QAAAA,gBAAgBF,cAAcP,SAAS;AAE7C,QAAMU,UAAUC,MAAAA,QACd,MAAMjB,qBAAqBX,YAAYS,6BAAMoB,UAAU,GACvD,CAACpB,MAAME,iBAAiB,CAC1B;AAEA,QAAMmB,UAAUF,MAAAA,QACd,MACEG,2BAAAA,IAAA,OAAA;AAAA,IACEb;AAAAA,IACAV,WAAWO,GACT;AAAA,MACE,CAACT,QAAQ0B,aAAa,GAAG,CAACL;AAAAA,MAC1B,CAACrB,QAAQ2B,sBAAsB,GAAGN;AAAAA,OAEpCnB,SACF;AAAA,IAAEP,UAEDQ;AAAAA,EACE,CAAA,GAEP,CACED,WACAF,QAAQ0B,eACR1B,QAAQ2B,wBACRlB,IACAN,MACAkB,SACAT,GAAG,CAEP;AAEA,wCACGgB,QAAAA,WAAS;AAAA,IACR7B;AAAAA,IACA8B,sBAAsB,CAACT;AAAAA,IACvBhB;AAAAA,IACAE;AAAAA,IACAwB,sCACGC,yBAAY;AAAA,MAAC7B,WAAWF,QAAQgC;AAAAA,MAAaC,SAAQ;AAAA,MAAMtC,UACzDQ;AAAAA,IAAAA,CACW;AAAA,IAGhB,cAAY;AAAA,IACZ,mBAAiB;AAAA,IAAY,GACzBI;AAAAA,IAAaZ,UAEhB6B;AAAAA,EAAAA,CACQ;AAEf;;;"}

package/dist/cjs/components/Tag/Tag.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.cjs","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { CSSProperties, useState } from \"react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport {\n  HvSemanticColorKeys,\n  HvCategoricalColorKeys,\n} from \"@core/types/tokens\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport { staticClasses, useClasses } from \"./Tag.styles\";\nimport { getOnDeleteCallback, hasDeleteAction, hasClickAction } from \"./utils\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n  extends Omit<MuiChipProps, \"color\" | \"classes\">,\n    HvBaseProps<HTMLDivElement, \"children\"> {\n  /** Inline styles to be applied to the root element. */\n  style?: CSSProperties;\n  /** The label of the tag element. */\n  label?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** The type of the tag element. A tag can be of semantic or categoric type. */\n  type?: \"semantic\" | \"categorical\";\n  /** Background color to be applied to the tag */\n  color?: HvSemanticColorKeys | HvCategoricalColorKeys | string;\n  /** Icon used to customize the delete icon in the Chip element */\n  deleteIcon?: React.ReactElement;\n  /**\n   * The callback fired when the delete icon is pressed.\n   * This function has to be provided to the component, in order to render the delete icon\n   * */\n  onDelete?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Callback triggered when any item is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** The role of the element with an attributed event. */\n  role?: string;\n  /** Aria properties to apply to delete button in tag */\n  deleteButtonArialLabel?: string;\n  /** Props to apply to delete button */\n  deleteButtonProps?: HvButtonProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n}\n\nconst getColor = (customColor, type, colors) => {\n  const defaultSemanticColor = theme.colors.neutral_20;\n  const defaultCategoricalColor = colors.cat1;\n\n  let backgroundColor;\n\n  if (type === \"semantic\") {\n    backgroundColor =\n      theme.colors[customColor] || customColor || defaultSemanticColor;\n  }\n  if (type === \"categorical\") {\n    backgroundColor =\n      colors[customColor] || customColor || defaultCategoricalColor;\n  }\n  return backgroundColor;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = (props: HvTagProps) => {\n  const {\n    classes: classesProp,\n    className,\n    style,\n    label,\n    disabled,\n    type = \"semantic\",\n    color,\n    deleteIcon,\n    onDelete,\n    onClick,\n    role,\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { activeTheme, selectedMode } = useTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const getDeleteIcon = () => {\n    const disabledSemanticColor =\n      type === \"semantic\" ? \"secondary_60\" : \"base_dark\";\n    const { tabIndex = 0 } = deleteButtonProps;\n\n    const closeIconStyles = css({\n      ...(disabled ? { cursor: \"not-allowed\" } : undefined),\n      height: 16,\n      \"& svg .color0\": {\n        fill: theme.colors[disabled ? disabledSemanticColor : \"base_dark\"],\n      },\n    });\n    return (\n      <HvButton\n        classes={{\n          startIcon: classes.tagButton,\n          focusVisible: classes.focusVisible,\n          root: classes.button,\n        }}\n        aria-label={deleteButtonArialLabel}\n        tabIndex={tabIndex}\n        variant=\"secondaryGhost\"\n        {...deleteButtonProps}\n      >\n        <CloseXS\n          iconSize=\"XS\"\n          className={closeIconStyles}\n          color={disabled ? disabledSemanticColor : \"base_dark\"}\n        />\n      </HvButton>\n    );\n  };\n\n  const inlineStyle = {\n    ...style,\n  };\n\n  let categoricalBackgroundColor;\n\n  if (type === \"semantic\") {\n    inlineStyle.backgroundColor = getColor(color, type, {});\n  } else if (type === \"categorical\") {\n    categoricalBackgroundColor = getColor(\n      color,\n      type,\n      activeTheme?.colors?.modes[selectedMode]\n    );\n\n    inlineStyle.backgroundColor = `${categoricalBackgroundColor}30`;\n  }\n\n  const [hover, setHover] = useState(false);\n\n  return (\n    <Chip\n      label={label}\n      className={cx(classes.root, className)}\n      onMouseEnter={() => {\n        setHover(!!onClick);\n      }}\n      onMouseLeave={() => {\n        setHover(false);\n      }}\n      style={{\n        ...(disabled ? null : inlineStyle),\n        ...(hover && !disabled\n          ? { boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}` }\n          : null),\n      }}\n      classes={{\n        root: cx(classes.chipRoot, {\n          [classes.disabled]: disabled,\n          [classes.clickable]: !!onClick,\n          [classes.categorical]: type === \"categorical\",\n          [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n          [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n        }),\n        label: classes.label,\n        deleteIcon: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n      }}\n      deleteIcon={(hasDeleteAction(onDelete) && deleteIcon) || getDeleteIcon()}\n      onDelete={getOnDeleteCallback(disabled, onDelete)}\n      onClick={disabled ? undefined : onClick}\n      role={role || (hasClickAction(onClick) ? \"button\" : undefined)}\n      tabIndex={hasDeleteAction(onDelete) ? undefined : 0}\n      {...others}\n    />\n  );\n};\n"],"names":["getColor","customColor","type","colors","defaultSemanticColor","theme","neutral_20","defaultCategoricalColor","cat1","backgroundColor","HvTag","props","classes","classesProp","className","style","label","disabled","color","deleteIcon","onDelete","onClick","role","deleteButtonArialLabel","deleteButtonProps","others","useDefaultProps","activeTheme","selectedMode","useTheme","cx","css","useClasses","getDeleteIcon","disabledSemanticColor","tabIndex","closeIconStyles","cursor","undefined","height","fill","HvButton","startIcon","tagButton","focusVisible","root","button","variant","children","CloseXS","iconSize","inlineStyle","categoricalBackgroundColor","modes","hover","setHover","useState","Chip","onMouseEnter","onMouseLeave","boxShadow","chipRoot","clickable","categorical","categoricalFocus","categoricalDisabled","disabledDeleteIcon","hasDeleteAction","getOnDeleteCallback","hasClickAction"],"mappings":"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"}
+{"version":3,"file":"Tag.cjs","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { CSSProperties, useState } from \"react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport {\n  HvSemanticColorKeys,\n  HvCategoricalColorKeys,\n} from \"@core/types/tokens\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport { staticClasses, useClasses } from \"./Tag.styles\";\nimport { getOnDeleteCallback, hasDeleteAction, hasClickAction } from \"./utils\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n  extends Omit<MuiChipProps, \"color\" | \"classes\">,\n    HvBaseProps<HTMLDivElement, \"children\"> {\n  /** Inline styles to be applied to the root element. */\n  style?: CSSProperties;\n  /** The label of the tag element. */\n  label?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** The type of the tag element. A tag can be of semantic or categoric type. */\n  type?: \"semantic\" | \"categorical\";\n  /** Background color to be applied to the tag */\n  color?: HvSemanticColorKeys | HvCategoricalColorKeys | string;\n  /** Icon used to customize the delete icon in the Chip element */\n  deleteIcon?: React.ReactElement;\n  /**\n   * The callback fired when the delete icon is pressed.\n   * This function has to be provided to the component, in order to render the delete icon\n   * */\n  onDelete?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Callback triggered when any item is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** The role of the element with an attributed event. */\n  role?: string;\n  /** Aria properties to apply to delete button in tag */\n  deleteButtonArialLabel?: string; // TODO: fix typo \"ArialLabel\" in next version\n  /** Props to apply to delete button */\n  deleteButtonProps?: HvButtonProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n}\n\nconst getColor = (customColor, type, colors) => {\n  const defaultSemanticColor = theme.colors.neutral_20;\n  const defaultCategoricalColor = colors.cat1;\n\n  let backgroundColor;\n\n  if (type === \"semantic\") {\n    backgroundColor =\n      theme.colors[customColor] || customColor || defaultSemanticColor;\n  }\n  if (type === \"categorical\") {\n    backgroundColor =\n      colors[customColor] || customColor || defaultCategoricalColor;\n  }\n  return backgroundColor;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = (props: HvTagProps) => {\n  const {\n    classes: classesProp,\n    className,\n    style,\n    label,\n    disabled,\n    type = \"semantic\",\n    color,\n    deleteIcon,\n    onDelete,\n    onClick,\n    role,\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { activeTheme, selectedMode } = useTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const getDeleteIcon = () => {\n    const disabledSemanticColor =\n      type === \"semantic\" ? \"secondary_60\" : \"base_dark\";\n    const { tabIndex = 0 } = deleteButtonProps;\n\n    const closeIconStyles = css({\n      ...(disabled ? { cursor: \"not-allowed\" } : undefined),\n      height: 16,\n      \"& svg .color0\": {\n        fill: theme.colors[disabled ? disabledSemanticColor : \"base_dark\"],\n      },\n    });\n    return (\n      <HvButton\n        classes={{\n          startIcon: classes.tagButton,\n          focusVisible: classes.focusVisible,\n          root: classes.button,\n        }}\n        aria-label={deleteButtonArialLabel}\n        tabIndex={tabIndex}\n        variant=\"secondaryGhost\"\n        {...deleteButtonProps}\n      >\n        <CloseXS\n          iconSize=\"XS\"\n          className={closeIconStyles}\n          color={disabled ? disabledSemanticColor : \"base_dark\"}\n        />\n      </HvButton>\n    );\n  };\n\n  const inlineStyle = {\n    ...style,\n  };\n\n  let categoricalBackgroundColor;\n\n  if (type === \"semantic\") {\n    inlineStyle.backgroundColor = getColor(color, type, {});\n  } else if (type === \"categorical\") {\n    categoricalBackgroundColor = getColor(\n      color,\n      type,\n      activeTheme?.colors?.modes[selectedMode]\n    );\n\n    inlineStyle.backgroundColor = `${categoricalBackgroundColor}30`;\n  }\n\n  const [hover, setHover] = useState(false);\n\n  return (\n    <Chip\n      label={label}\n      className={cx(classes.root, className)}\n      onMouseEnter={() => {\n        setHover(!!onClick);\n      }}\n      onMouseLeave={() => {\n        setHover(false);\n      }}\n      style={{\n        ...(disabled ? null : inlineStyle),\n        ...(hover && !disabled\n          ? { boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}` }\n          : null),\n      }}\n      classes={{\n        root: cx(classes.chipRoot, {\n          [classes.disabled]: disabled,\n          [classes.clickable]: !!onClick,\n          [classes.categorical]: type === \"categorical\",\n          [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n          [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n        }),\n        label: classes.label,\n        deleteIcon: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n      }}\n      deleteIcon={(hasDeleteAction(onDelete) && deleteIcon) || getDeleteIcon()}\n      onDelete={getOnDeleteCallback(disabled, onDelete)}\n      onClick={disabled ? undefined : onClick}\n      role={role || (hasClickAction(onClick) ? \"button\" : undefined)}\n      tabIndex={hasDeleteAction(onDelete) ? undefined : 0}\n      {...others}\n    />\n  );\n};\n"],"names":["getColor","customColor","type","colors","defaultSemanticColor","theme","neutral_20","defaultCategoricalColor","cat1","backgroundColor","HvTag","props","classes","classesProp","className","style","label","disabled","color","deleteIcon","onDelete","onClick","role","deleteButtonArialLabel","deleteButtonProps","others","useDefaultProps","activeTheme","selectedMode","useTheme","cx","css","useClasses","getDeleteIcon","disabledSemanticColor","tabIndex","closeIconStyles","cursor","undefined","height","fill","HvButton","startIcon","tagButton","focusVisible","root","button","variant","children","CloseXS","iconSize","inlineStyle","categoricalBackgroundColor","modes","hover","setHover","useState","Chip","onMouseEnter","onMouseLeave","boxShadow","chipRoot","clickable","categorical","categoricalFocus","categoricalDisabled","disabledDeleteIcon","hasDeleteAction","getOnDeleteCallback","hasClickAction"],"mappings":";;;;;;;;;;;;;;AAqDA,MAAMA,WAAWA,CAACC,aAAaC,MAAMC,WAAW;AACxCC,QAAAA,uBAAuBC,YAAAA,MAAMF,OAAOG;AAC1C,QAAMC,0BAA0BJ,OAAOK;AAEnCC,MAAAA;AAEJ,MAAIP,SAAS,YAAY;AACvBO,sBACEJ,YAAMF,MAAAA,OAAOF,WAAW,KAAKA,eAAeG;AAAAA,EAChD;AACA,MAAIF,SAAS,eAAe;AAExBC,sBAAAA,OAAOF,WAAW,KAAKA,eAAeM;AAAAA,EAC1C;AACOE,SAAAA;AACT;AAUaC,MAAAA,QAAQA,CAACC,UAAsB;;AACpC,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAf,OAAO;AAAA,IACPgB;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,yBAAyB;AAAA,IACzBC,oBAAoB,CAAC;AAAA,IACrB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,SAASf,KAAK;AAC5B,QAAA;AAAA,IAAEgB;AAAAA,IAAaC;AAAAA,MAAiBC,SAAS,SAAA;AACzC,QAAA;AAAA,IAAEjB;AAAAA,IAASkB;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAAA,WAAWnB,WAAW;AAEnD,QAAMoB,gBAAgBA,MAAM;AACpBC,UAAAA,wBACJhC,SAAS,aAAa,iBAAiB;AACnC,UAAA;AAAA,MAAEiC,WAAW;AAAA,IAAMX,IAAAA;AAEzB,UAAMY,kBAAkBL,IAAI;AAAA,MAC1B,GAAId,WAAW;AAAA,QAAEoB,QAAQ;AAAA,MAAkBC,IAAAA;AAAAA,MAC3CC,QAAQ;AAAA,MACR,iBAAiB;AAAA,QACfC,MAAMnC,YAAAA,MAAMF,OAAOc,WAAWiB,wBAAwB,WAAW;AAAA,MACnE;AAAA,IAAA,CACD;AACD,0CACGO,OAAAA,UAAQ;AAAA,MACP7B,SAAS;AAAA,QACP8B,WAAW9B,QAAQ+B;AAAAA,QACnBC,cAAchC,QAAQgC;AAAAA,QACtBC,MAAMjC,QAAQkC;AAAAA,MAChB;AAAA,MACA,cAAYvB;AAAAA,MACZY;AAAAA,MACAY,SAAQ;AAAA,MAAgB,GACpBvB;AAAAA,MAAiBwB,yCAEpBC,yBAAO;AAAA,QACNC,UAAS;AAAA,QACTpC,WAAWsB;AAAAA,QACXlB,OAAOD,WAAWiB,wBAAwB;AAAA,MAAA,CAC3C;AAAA,IAAA,CACO;AAAA,EAAA;AAId,QAAMiB,cAAc;AAAA,IAClB,GAAGpC;AAAAA,EAAAA;AAGDqC,MAAAA;AAEJ,MAAIlD,SAAS,YAAY;AACvBiD,gBAAY1C,kBAAkBT,SAASkB,OAAOhB,MAAM,CAAE,CAAA;AAAA,EAAA,WAC7CA,SAAS,eAAe;AACjCkD,iCAA6BpD,SAC3BkB,OACAhB,OACAyB,gDAAaxB,WAAbwB,mBAAqB0B,MAAMzB,aAC7B;AAEAuB,gBAAY1C,kBAAmB,GAAE2C;AAAAA,EACnC;AAEA,QAAM,CAACE,OAAOC,QAAQ,IAAIC,eAAS,KAAK;AAExC,wCACGC,cAAAA,SAAI;AAAA,IACHzC;AAAAA,IACAF,WAAWgB,GAAGlB,QAAQiC,MAAM/B,SAAS;AAAA,IACrC4C,cAAcA,MAAM;AACT,eAAA,CAAC,CAACrC,OAAO;AAAA,IACpB;AAAA,IACAsC,cAAcA,MAAM;AAClBJ,eAAS,KAAK;AAAA,IAChB;AAAA,IACAxC,OAAO;AAAA,MACL,GAAIE,WAAW,OAAOkC;AAAAA,MACtB,GAAIG,SAAS,CAACrC,WACV;AAAA,QAAE2C,WAAY,aAAYR;AAAAA,MAAAA,IAC1B;AAAA,IACN;AAAA,IACAxC,SAAS;AAAA,MACPiC,MAAMf,GAAGlB,QAAQiD,UAAU;AAAA,QACzB,CAACjD,QAAQK,QAAQ,GAAGA;AAAAA,QACpB,CAACL,QAAQkD,SAAS,GAAG,CAAC,CAACzC;AAAAA,QACvB,CAACT,QAAQmD,WAAW,GAAG7D,SAAS;AAAA,QAChC,CAACU,QAAQoD,gBAAgB,GAAG9D,SAAS,iBAAiB,CAACe;AAAAA,QACvD,CAACL,QAAQqD,mBAAmB,GAAG/D,SAAS,iBAAiBe;AAAAA,MAAAA,CAC1D;AAAA,MACDD,OAAOJ,QAAQI;AAAAA,MACfG,YAAYW,GAAGlB,QAAQO,YAAY;AAAA,QACjC,CAACP,QAAQsD,kBAAkB,GAAGjD;AAAAA,MAAAA,CAC/B;AAAA,IACH;AAAA,IACAE,YAAagD,MAAAA,gBAAgB/C,QAAQ,KAAKD,cAAec,cAAc;AAAA,IACvEb,UAAUgD,MAAAA,oBAAoBnD,UAAUG,QAAQ;AAAA,IAChDC,SAASJ,WAAWqB,SAAYjB;AAAAA,IAChCC,MAAMA,SAAS+C,MAAehD,eAAAA,OAAO,IAAI,WAAWiB;AAAAA,IACpDH,UAAUgC,MAAAA,gBAAgB/C,QAAQ,IAAIkB,SAAY;AAAA,IAAE,GAChDb;AAAAA,EAAAA,CACL;AAEL;;;"}

package/dist/cjs/components/Tooltip/Tooltip.styles.cjs

@@ -25,6 +25,7 @@ const popperSx = (useSingle) => {
       opacity: 1
     },
     [`& .${material.tooltipClasses.tooltip}`]: {
+      fontFamily: uikitStyles.theme.fontFamily.body,
       ...uikitStyles.theme.typography.body,
       display: "flex",
       width: "fit-content",

package/dist/cjs/components/Tooltip/Tooltip.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.styles.cjs","sources":["../../../../src/components/Tooltip/Tooltip.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { tooltipClasses as MuitooltipClasses } from \"@mui/material\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTooltip\", {\n  root: {},\n  tooltip: {},\n  tooltipMulti: {},\n  popper: {},\n  title: {},\n  valuesContainer: {},\n  values: {},\n  color: {},\n  separatorColor: {},\n  separator: {},\n  valueWrapper: {},\n});\n\nexport const popperSx = (useSingle: boolean) => {\n  return {\n    [`& .${MuitooltipClasses.popper}`]: {\n      opacity: 1,\n    },\n    [`& .${MuitooltipClasses.tooltip}`]: {\n      ...theme.typography.body,\n      display: \"flex\",\n      width: \"fit-content\",\n      maxWidth: 532,\n      backgroundColor: theme.colors.atmo1,\n      boxShadow: theme.colors.shadow,\n      padding: 0,\n      ...(useSingle && {\n        padding: \"15px 20px\",\n        borderRadius: theme.tooltip.borderRadius,\n      }),\n\n      \"& p\": {\n        display: \"-webkit-box\",\n        width: \"fit-content\",\n        boxOrient: \"vertical\",\n        textOverflow: \"ellipsis\",\n        overflow: \"hidden\",\n        ...(useSingle && { wordBreak: \"break-word\" }),\n      },\n    },\n    [`& .${staticClasses.title}`]: {\n      padding: \"15px 20px\",\n      borderBottom: `3px solid ${theme.colors.atmo2}`,\n    },\n    [`& .${staticClasses.valuesContainer}`]: {\n      padding: theme.space.sm,\n    },\n    [`& .${staticClasses.values}`]: {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      paddingBottom: \"10px\",\n      \"&:last-child\": {\n        paddingBottom: 0,\n      },\n    },\n    [`& .${staticClasses.color}`]: {\n      width: theme.space.xs,\n    },\n    [`& .${staticClasses.separator}`]: {\n      width: theme.space.xs,\n    },\n    [`& .${staticClasses.separatorColor}`]: {\n      width: \"5px\",\n    },\n    [`& .${staticClasses.valueWrapper}`]: {\n      padding: theme.space.sm,\n    },\n  };\n};\n"],"names":["staticClasses","useClasses","createClasses","root","tooltip","tooltipMulti","popper","title","valuesContainer","values","color","separatorColor","separator","valueWrapper","popperSx","useSingle","MuitooltipClasses","opacity","theme","typography","body","display","width","maxWidth","backgroundColor","colors","atmo1","boxShadow","shadow","padding","borderRadius","boxOrient","textOverflow","overflow","wordBreak","borderBottom","atmo2","space","sm","justifyContent","paddingBottom","xs"],"mappings":";;;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,aAAa;AAAA,EACtEC,MAAM,CAAC;AAAA,EACPC,SAAS,CAAC;AAAA,EACVC,cAAc,CAAC;AAAA,EACfC,QAAQ,CAAC;AAAA,EACTC,OAAO,CAAC;AAAA,EACRC,iBAAiB,CAAC;AAAA,EAClBC,QAAQ,CAAC;AAAA,EACTC,OAAO,CAAC;AAAA,EACRC,gBAAgB,CAAC;AAAA,EACjBC,WAAW,CAAC;AAAA,EACZC,cAAc,CAAC;AACjB,CAAC;AAEYC,MAAAA,WAAWA,CAACC,cAAuB;AACvC,SAAA;AAAA,IACL,CAAE,MAAKC,wBAAkBV,QAAQ,GAAG;AAAA,MAClCW,SAAS;AAAA,IACX;AAAA,IACA,CAAE,MAAKD,wBAAkBZ,SAAS,GAAG;AAAA,MACnC,GAAGc,YAAAA,MAAMC,WAAWC;AAAAA,MACpBC,SAAS;AAAA,MACTC,OAAO;AAAA,MACPC,UAAU;AAAA,MACVC,iBAAiBN,YAAAA,MAAMO,OAAOC;AAAAA,MAC9BC,WAAWT,YAAAA,MAAMO,OAAOG;AAAAA,MACxBC,SAAS;AAAA,MACT,GAAId,aAAa;AAAA,QACfc,SAAS;AAAA,QACTC,cAAcZ,YAAAA,MAAMd,QAAQ0B;AAAAA,MAC9B;AAAA,MAEA,OAAO;AAAA,QACLT,SAAS;AAAA,QACTC,OAAO;AAAA,QACPS,WAAW;AAAA,QACXC,cAAc;AAAA,QACdC,UAAU;AAAA,QACV,GAAIlB,aAAa;AAAA,UAAEmB,WAAW;AAAA,QAAa;AAAA,MAC7C;AAAA,IACF;AAAA,IACA,CAAE,MAAKlC,cAAcO,OAAO,GAAG;AAAA,MAC7BsB,SAAS;AAAA,MACTM,cAAe,aAAYjB,YAAAA,MAAMO,OAAOW;AAAAA,IAC1C;AAAA,IACA,CAAE,MAAKpC,cAAcQ,iBAAiB,GAAG;AAAA,MACvCqB,SAASX,YAAAA,MAAMmB,MAAMC;AAAAA,IACvB;AAAA,IACA,CAAE,MAAKtC,cAAcS,QAAQ,GAAG;AAAA,MAC9BY,SAAS;AAAA,MACTkB,gBAAgB;AAAA,MAChBC,eAAe;AAAA,MACf,gBAAgB;AAAA,QACdA,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,IACA,CAAE,MAAKxC,cAAcU,OAAO,GAAG;AAAA,MAC7BY,OAAOJ,YAAAA,MAAMmB,MAAMI;AAAAA,IACrB;AAAA,IACA,CAAE,MAAKzC,cAAcY,WAAW,GAAG;AAAA,MACjCU,OAAOJ,YAAAA,MAAMmB,MAAMI;AAAAA,IACrB;AAAA,IACA,CAAE,MAAKzC,cAAcW,gBAAgB,GAAG;AAAA,MACtCW,OAAO;AAAA,IACT;AAAA,IACA,CAAE,MAAKtB,cAAca,cAAc,GAAG;AAAA,MACpCgB,SAASX,YAAAA,MAAMmB,MAAMC;AAAAA,IACvB;AAAA,EAAA;AAEJ;;;;"}
+{"version":3,"file":"Tooltip.styles.cjs","sources":["../../../../src/components/Tooltip/Tooltip.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { tooltipClasses as MuitooltipClasses } from \"@mui/material\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTooltip\", {\n  root: {},\n  tooltip: {},\n  tooltipMulti: {},\n  popper: {},\n  title: {},\n  valuesContainer: {},\n  values: {},\n  color: {},\n  separatorColor: {},\n  separator: {},\n  valueWrapper: {},\n});\n\nexport const popperSx = (useSingle: boolean) => {\n  return {\n    [`& .${MuitooltipClasses.popper}`]: {\n      opacity: 1,\n    },\n    [`& .${MuitooltipClasses.tooltip}`]: {\n      fontFamily: theme.fontFamily.body,\n      ...theme.typography.body,\n      display: \"flex\",\n      width: \"fit-content\",\n      maxWidth: 532,\n      backgroundColor: theme.colors.atmo1,\n      boxShadow: theme.colors.shadow,\n      padding: 0,\n      ...(useSingle && {\n        padding: \"15px 20px\",\n        borderRadius: theme.tooltip.borderRadius,\n      }),\n\n      \"& p\": {\n        display: \"-webkit-box\",\n        width: \"fit-content\",\n        boxOrient: \"vertical\",\n        textOverflow: \"ellipsis\",\n        overflow: \"hidden\",\n        ...(useSingle && { wordBreak: \"break-word\" }),\n      },\n    },\n    [`& .${staticClasses.title}`]: {\n      padding: \"15px 20px\",\n      borderBottom: `3px solid ${theme.colors.atmo2}`,\n    },\n    [`& .${staticClasses.valuesContainer}`]: {\n      padding: theme.space.sm,\n    },\n    [`& .${staticClasses.values}`]: {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      paddingBottom: \"10px\",\n      \"&:last-child\": {\n        paddingBottom: 0,\n      },\n    },\n    [`& .${staticClasses.color}`]: {\n      width: theme.space.xs,\n    },\n    [`& .${staticClasses.separator}`]: {\n      width: theme.space.xs,\n    },\n    [`& .${staticClasses.separatorColor}`]: {\n      width: \"5px\",\n    },\n    [`& .${staticClasses.valueWrapper}`]: {\n      padding: theme.space.sm,\n    },\n  };\n};\n"],"names":["staticClasses","useClasses","createClasses","root","tooltip","tooltipMulti","popper","title","valuesContainer","values","color","separatorColor","separator","valueWrapper","popperSx","useSingle","MuitooltipClasses","opacity","fontFamily","theme","body","typography","display","width","maxWidth","backgroundColor","colors","atmo1","boxShadow","shadow","padding","borderRadius","boxOrient","textOverflow","overflow","wordBreak","borderBottom","atmo2","space","sm","justifyContent","paddingBottom","xs"],"mappings":";;;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,aAAa;AAAA,EACtEC,MAAM,CAAC;AAAA,EACPC,SAAS,CAAC;AAAA,EACVC,cAAc,CAAC;AAAA,EACfC,QAAQ,CAAC;AAAA,EACTC,OAAO,CAAC;AAAA,EACRC,iBAAiB,CAAC;AAAA,EAClBC,QAAQ,CAAC;AAAA,EACTC,OAAO,CAAC;AAAA,EACRC,gBAAgB,CAAC;AAAA,EACjBC,WAAW,CAAC;AAAA,EACZC,cAAc,CAAC;AACjB,CAAC;AAEYC,MAAAA,WAAWA,CAACC,cAAuB;AACvC,SAAA;AAAA,IACL,CAAE,MAAKC,wBAAkBV,QAAQ,GAAG;AAAA,MAClCW,SAAS;AAAA,IACX;AAAA,IACA,CAAE,MAAKD,wBAAkBZ,SAAS,GAAG;AAAA,MACnCc,YAAYC,YAAAA,MAAMD,WAAWE;AAAAA,MAC7B,GAAGD,YAAAA,MAAME,WAAWD;AAAAA,MACpBE,SAAS;AAAA,MACTC,OAAO;AAAA,MACPC,UAAU;AAAA,MACVC,iBAAiBN,YAAAA,MAAMO,OAAOC;AAAAA,MAC9BC,WAAWT,YAAAA,MAAMO,OAAOG;AAAAA,MACxBC,SAAS;AAAA,MACT,GAAIf,aAAa;AAAA,QACfe,SAAS;AAAA,QACTC,cAAcZ,YAAAA,MAAMf,QAAQ2B;AAAAA,MAC9B;AAAA,MAEA,OAAO;AAAA,QACLT,SAAS;AAAA,QACTC,OAAO;AAAA,QACPS,WAAW;AAAA,QACXC,cAAc;AAAA,QACdC,UAAU;AAAA,QACV,GAAInB,aAAa;AAAA,UAAEoB,WAAW;AAAA,QAAa;AAAA,MAC7C;AAAA,IACF;AAAA,IACA,CAAE,MAAKnC,cAAcO,OAAO,GAAG;AAAA,MAC7BuB,SAAS;AAAA,MACTM,cAAe,aAAYjB,YAAAA,MAAMO,OAAOW;AAAAA,IAC1C;AAAA,IACA,CAAE,MAAKrC,cAAcQ,iBAAiB,GAAG;AAAA,MACvCsB,SAASX,YAAAA,MAAMmB,MAAMC;AAAAA,IACvB;AAAA,IACA,CAAE,MAAKvC,cAAcS,QAAQ,GAAG;AAAA,MAC9Ba,SAAS;AAAA,MACTkB,gBAAgB;AAAA,MAChBC,eAAe;AAAA,MACf,gBAAgB;AAAA,QACdA,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,IACA,CAAE,MAAKzC,cAAcU,OAAO,GAAG;AAAA,MAC7Ba,OAAOJ,YAAAA,MAAMmB,MAAMI;AAAAA,IACrB;AAAA,IACA,CAAE,MAAK1C,cAAcY,WAAW,GAAG;AAAA,MACjCW,OAAOJ,YAAAA,MAAMmB,MAAMI;AAAAA,IACrB;AAAA,IACA,CAAE,MAAK1C,cAAcW,gBAAgB,GAAG;AAAA,MACtCY,OAAO;AAAA,IACT;AAAA,IACA,CAAE,MAAKvB,cAAca,cAAc,GAAG;AAAA,MACpCiB,SAASX,YAAAA,MAAMmB,MAAMC;AAAAA,IACvB;AAAA,EAAA;AAEJ;;;;"}

package/dist/esm/components/Avatar/Avatar.js

@@ -1,3 +1,4 @@
+import { forwardRef } from "react";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { User } from "@hitachivantara/uikit-react-icons";
 import { theme } from "@hitachivantara/uikit-styles";
@@ -8,7 +9,7 @@ import { useClasses } from "./Avatar.styles.js";
 import { staticClasses } from "./Avatar.styles.js";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 const getColor = (color, defaultColor) => theme.colors[color] || color || defaultColor;
-const HvAvatar = (props) => {
+const HvAvatar = forwardRef((props, ref) => {
   const {
     className,
     style,
@@ -74,6 +75,7 @@ const HvAvatar = (props) => {
   }
   const badgeColor = getColor(badge || "", theme.colors.positive);
   return /* @__PURE__ */ jsx("div", {
+    ref,
     className: classes.container,
     ...others,
     children: /* @__PURE__ */ jsxs("div", {
@@ -95,7 +97,7 @@ const HvAvatar = (props) => {
       })]
     })
   });
-};
+});
 export {
   HvAvatar,
   staticClasses as avatarClasses

package/dist/esm/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { CSSProperties, HTMLAttributes } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { User } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport MuiAvatar, { AvatarProps as MuiAvatarProps } from \"@mui/material/Avatar\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useImageLoaded } from \"@core/hooks/useImageLoaded\";\nimport { decreaseSize } from \"@core/utils/sizes\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Avatar.styles\";\n\nexport { staticClasses as avatarClasses };\n\nexport type HvAvatarClasses = ExtractNames<typeof useClasses>;\n\nexport type HvAvatarVariant = \"circular\" | \"square\";\n\nexport type HvAvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface HvAvatarProps extends HvBaseProps {\n  /** Inline styles to be applied to the root element. */\n  style?: CSSProperties;\n  /** The component used for the root node. Either a string to use a DOM element or a component. */\n  component?: React.ElementType;\n  /** Sets one of the standard sizes of the icons */\n  size?: HvAvatarSize;\n  /**\n   * A string representing the foreground color of the avatar's\n   * letters or the generic User icon fallback.\n   * You can use either an HEX or color name from the palette.\n   */\n  color?: string;\n  /** A String representing the background color of the avatar. You can use either an HEX or color name from the palette. */\n  backgroundColor?: string;\n  /** The `src` attribute for the `img` element. */\n  src?: string;\n  /** The `srcSet` attribute for the `img` element. Use this attribute for responsive image display. */\n  srcSet?: string;\n  /** The `sizes` attribute for the `img` element. */\n  sizes?: string;\n  /** Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. */\n  alt?: string;\n  /**\n   * Attributes applied to the `img` element if the component is used to display an image.\n   * It can be used to listen for the loading error event.\n   */\n  imgProps?: HTMLAttributes<HTMLImageElement>;\n  /** A string representing the type of avatar to display, circular or square. */\n  variant?: HvAvatarVariant;\n  /** A string representing the color of the avatar border that represents its status. */\n  status?: string;\n  /** A string representing the color of the avatar badge. */\n  badge?: string;\n  /** Attributes applied to the avatar element. */\n  avatarProps?: MuiAvatarProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAvatarClasses;\n}\n\n/**\n * Get a color from the theme palette\n * @param {object} theme The theme object\n * @param {string} color A color to use if none is found on the theme palette\n * @param {string} defaultColor The fallback color to use\n */\nconst getColor = (color: string, defaultColor: string): string =>\n  theme.colors[color] || color || defaultColor;\n\n/**\n * Avatars can be used to represent a user or a brand.\n * They can show an image, an icon or the initial letters of a name, for example.\n */\nexport const HvAvatar = (props: HvAvatarProps) => {\n  const {\n    className,\n    style,\n    classes: classesProp,\n    children: childrenProp,\n    component = \"div\",\n    size = \"sm\",\n    backgroundColor = \"secondary\",\n    color = \"atmo1\",\n    src,\n    srcSet,\n    sizes,\n    alt,\n    imgProps,\n    status,\n    badge,\n    variant = \"circular\",\n    avatarProps,\n    ...others\n  } = useDefaultProps(\"HvAvatar\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  let children: React.ReactNode;\n\n  // Use a hook instead of onError on the img element to support server-side rendering.\n  const imageLoaded = useImageLoaded(src, srcSet);\n  const hasImg = src || srcSet;\n  const hasImgNotFailing = hasImg && imageLoaded !== \"error\";\n\n  if (hasImgNotFailing) {\n    children = (\n      <img\n        alt={alt}\n        src={src}\n        srcSet={srcSet}\n        sizes={sizes}\n        className={classes.img}\n        {...imgProps}\n      />\n    );\n  } else if (childrenProp != null) {\n    children = childrenProp;\n  } else if (hasImg && alt) {\n    [children] = alt;\n  } else {\n    children = (\n      <User\n        color={color}\n        iconSize={decreaseSize(size)}\n        className={classes.fallback}\n      />\n    );\n  }\n\n  const inlineStyle: CSSProperties = {\n    ...style,\n  };\n\n  if (component != null && typeof component !== \"string\") {\n    // override border-radius with custom components\n    inlineStyle.borderRadius = \"50%\";\n  }\n\n  if (!hasImgNotFailing) {\n    inlineStyle.backgroundColor = getColor(\n      backgroundColor,\n      theme.colors.secondary\n    );\n    inlineStyle.color = getColor(color, theme.colors.atmo1);\n  }\n\n  const statusInlineStyle: CSSProperties = {};\n  if (status) {\n    // set the status border. we're using the boxShadow property to set the border\n    // to be inside the container and not on its edge.\n    const statusColor = getColor(status, theme.colors.positive);\n    statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;\n  }\n\n  const badgeColor = getColor(badge || \"\", theme.colors.positive);\n\n  return (\n    <div className={classes.container} {...others}>\n      <div\n        className={cx(classes.status, classes[variant], classes[size])}\n        style={statusInlineStyle}\n      >\n        {badge && (\n          <div\n            className={classes.badge}\n            style={{ backgroundColor: badgeColor }}\n          />\n        )}\n        <MuiAvatar\n          component={component}\n          // Consider not using the root and className classes in this component\n          className={cx(classes.root, classes.avatar, classes[size], className)}\n          style={inlineStyle}\n          variant={variant}\n          size={size}\n          {...avatarProps}\n        >\n          {children}\n        </MuiAvatar>\n      </div>\n    </div>\n  );\n};\n"],"names":["getColor","color","defaultColor","theme","colors","HvAvatar","props","className","style","classes","classesProp","children","childrenProp","component","size","backgroundColor","src","srcSet","sizes","alt","imgProps","status","badge","variant","avatarProps","others","useDefaultProps","cx","useClasses","imageLoaded","useImageLoaded","hasImg","hasImgNotFailing","img","User","iconSize","decreaseSize","fallback","inlineStyle","borderRadius","secondary","atmo1","statusInlineStyle","statusColor","positive","boxShadow","badgeColor","container","_jsx","MuiAvatar","root","avatar"],"mappings":";;;;;;;;;AAqEA,MAAMA,WAAWA,CAACC,OAAeC,iBAC/BC,MAAMC,OAAOH,KAAK,KAAKA,SAASC;AAMrBG,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC,UAAUC;AAAAA,IACVC,YAAY;AAAA,IACZC,OAAO;AAAA,IACPC,kBAAkB;AAAA,IAClBd,QAAQ;AAAA,IACRe;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,UAAU;AAAA,IACVC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYpB,KAAK;AAC/B,QAAA;AAAA,IAAEG;AAAAA,IAASkB;AAAAA,EAAAA,IAAOC,WAAWlB,WAAW;AAE1CC,MAAAA;AAGEkB,QAAAA,cAAcC,eAAed,KAAKC,MAAM;AAC9C,QAAMc,SAASf,OAAOC;AAChBe,QAAAA,mBAAmBD,UAAUF,gBAAgB;AAEnD,MAAIG,kBAAkB;AACpBrB,mCACE,OAAA;AAAA,MACEQ;AAAAA,MACAH;AAAAA,MACAC;AAAAA,MACAC;AAAAA,MACAX,WAAWE,QAAQwB;AAAAA,MAAI,GACnBb;AAAAA,IAAAA,CACL;AAAA,EAAA,WAEMR,gBAAgB,MAAM;AACpBA,eAAAA;AAAAA,EAAAA,WACFmB,UAAUZ,KAAK;AACxB,KAACR,QAAQ,IAAIQ;AAAAA,EAAAA,OACR;AACLR,mCACGuB,MAAI;AAAA,MACHjC;AAAAA,MACAkC,UAAUC,aAAatB,IAAI;AAAA,MAC3BP,WAAWE,QAAQ4B;AAAAA,IAAAA,CACpB;AAAA,EAEL;AAEA,QAAMC,cAA6B;AAAA,IACjC,GAAG9B;AAAAA,EAAAA;AAGL,MAAIK,aAAa,QAAQ,OAAOA,cAAc,UAAU;AAEtDyB,gBAAYC,eAAe;AAAA,EAC7B;AAEA,MAAI,CAACP,kBAAkB;AACrBM,gBAAYvB,kBAAkBf,SAC5Be,iBACAZ,MAAMC,OAAOoC,SACf;AACAF,gBAAYrC,QAAQD,SAASC,OAAOE,MAAMC,OAAOqC,KAAK;AAAA,EACxD;AAEA,QAAMC,oBAAmC,CAAA;AACzC,MAAIrB,QAAQ;AAGV,UAAMsB,cAAc3C,SAASqB,QAAQlB,MAAMC,OAAOwC,QAAQ;AAC1DF,sBAAkBG,YAAa,yBAAwBF;AAAAA,EACzD;AAEA,QAAMG,aAAa9C,SAASsB,SAAS,IAAInB,MAAMC,OAAOwC,QAAQ;AAE9D,6BACE,OAAA;AAAA,IAAKrC,WAAWE,QAAQsC;AAAAA,IAAU,GAAKtB;AAAAA,IAAMd,+BAC3C,OAAA;AAAA,MACEJ,WAAWoB,GAAGlB,QAAQY,QAAQZ,QAAQc,OAAO,GAAGd,QAAQK,IAAI,CAAC;AAAA,MAC7DN,OAAOkC;AAAAA,MAAkB/B,UAAA,CAExBW,SACC0B,oBAAA,OAAA;AAAA,QACEzC,WAAWE,QAAQa;AAAAA,QACnBd,OAAO;AAAA,UAAEO,iBAAiB+B;AAAAA,QAAW;AAAA,MAAA,CACtC,GAEHE,oBAACC,WAAS;AAAA,QACRpC;AAAAA,QAEAN,WAAWoB,GAAGlB,QAAQyC,MAAMzC,QAAQ0C,QAAQ1C,QAAQK,IAAI,GAAGP,SAAS;AAAA,QACpEC,OAAO8B;AAAAA,QACPf;AAAAA,QACAT;AAAAA,QAAW,GACPU;AAAAA,QAAWb;AAAAA,MAAAA,CAGN,CAAC;AAAA,IAAA,CACT;AAAA,EAAA,CACF;AAET;"}
+{"version":3,"file":"Avatar.js","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { CSSProperties, HTMLAttributes, forwardRef } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { User } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport MuiAvatar, { AvatarProps as MuiAvatarProps } from \"@mui/material/Avatar\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useImageLoaded } from \"@core/hooks/useImageLoaded\";\nimport { decreaseSize } from \"@core/utils/sizes\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Avatar.styles\";\n\nexport { staticClasses as avatarClasses };\n\nexport type HvAvatarClasses = ExtractNames<typeof useClasses>;\n\nexport type HvAvatarVariant = \"circular\" | \"square\";\n\nexport type HvAvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface HvAvatarProps extends HvBaseProps {\n  /** Inline styles to be applied to the root element. */\n  style?: CSSProperties;\n  /** The component used for the root node. Either a string to use a DOM element or a component. */\n  component?: React.ElementType;\n  /** Sets one of the standard sizes of the icons */\n  size?: HvAvatarSize;\n  /**\n   * A string representing the foreground color of the avatar's\n   * letters or the generic User icon fallback.\n   * You can use either an HEX or color name from the palette.\n   */\n  color?: string;\n  /** A String representing the background color of the avatar. You can use either an HEX or color name from the palette. */\n  backgroundColor?: string;\n  /** The `src` attribute for the `img` element. */\n  src?: string;\n  /** The `srcSet` attribute for the `img` element. Use this attribute for responsive image display. */\n  srcSet?: string;\n  /** The `sizes` attribute for the `img` element. */\n  sizes?: string;\n  /** Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. */\n  alt?: string;\n  /**\n   * Attributes applied to the `img` element if the component is used to display an image.\n   * It can be used to listen for the loading error event.\n   */\n  imgProps?: HTMLAttributes<HTMLImageElement>;\n  /** A string representing the type of avatar to display, circular or square. */\n  variant?: HvAvatarVariant;\n  /** A string representing the color of the avatar border that represents its status. */\n  status?: string;\n  /** A string representing the color of the avatar badge. */\n  badge?: string;\n  /** Attributes applied to the avatar element. */\n  avatarProps?: MuiAvatarProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAvatarClasses;\n}\n\n/**\n * Get a color from the theme palette\n * @param {object} theme The theme object\n * @param {string} color A color to use if none is found on the theme palette\n * @param {string} defaultColor The fallback color to use\n */\nconst getColor = (color: string, defaultColor: string): string =>\n  theme.colors[color] || color || defaultColor;\n\n/**\n * Avatars can be used to represent a user or a brand.\n * They can show an image, an icon or the initial letters of a name, for example.\n */\nexport const HvAvatar = forwardRef<any, HvAvatarProps>((props, ref) => {\n  const {\n    className,\n    style,\n    classes: classesProp,\n    children: childrenProp,\n    component = \"div\",\n    size = \"sm\",\n    backgroundColor = \"secondary\",\n    color = \"atmo1\",\n    src,\n    srcSet,\n    sizes,\n    alt,\n    imgProps,\n    status,\n    badge,\n    variant = \"circular\",\n    avatarProps,\n    ...others\n  } = useDefaultProps(\"HvAvatar\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  let children: React.ReactNode;\n\n  // Use a hook instead of onError on the img element to support server-side rendering.\n  const imageLoaded = useImageLoaded(src, srcSet);\n  const hasImg = src || srcSet;\n  const hasImgNotFailing = hasImg && imageLoaded !== \"error\";\n\n  if (hasImgNotFailing) {\n    children = (\n      <img\n        alt={alt}\n        src={src}\n        srcSet={srcSet}\n        sizes={sizes}\n        className={classes.img}\n        {...imgProps}\n      />\n    );\n  } else if (childrenProp != null) {\n    children = childrenProp;\n  } else if (hasImg && alt) {\n    [children] = alt;\n  } else {\n    children = (\n      <User\n        color={color}\n        iconSize={decreaseSize(size)}\n        className={classes.fallback}\n      />\n    );\n  }\n\n  const inlineStyle: CSSProperties = {\n    ...style,\n  };\n\n  if (component != null && typeof component !== \"string\") {\n    // override border-radius with custom components\n    inlineStyle.borderRadius = \"50%\";\n  }\n\n  if (!hasImgNotFailing) {\n    inlineStyle.backgroundColor = getColor(\n      backgroundColor,\n      theme.colors.secondary\n    );\n    inlineStyle.color = getColor(color, theme.colors.atmo1);\n  }\n\n  const statusInlineStyle: CSSProperties = {};\n  if (status) {\n    // set the status border. we're using the boxShadow property to set the border\n    // to be inside the container and not on its edge.\n    const statusColor = getColor(status, theme.colors.positive);\n    statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;\n  }\n\n  const badgeColor = getColor(badge || \"\", theme.colors.positive);\n\n  return (\n    <div ref={ref} className={classes.container} {...others}>\n      <div\n        className={cx(classes.status, classes[variant], classes[size])}\n        style={statusInlineStyle}\n      >\n        {badge && (\n          <div\n            className={classes.badge}\n            style={{ backgroundColor: badgeColor }}\n          />\n        )}\n        <MuiAvatar\n          component={component}\n          // Consider not using the root and className classes in this component\n          className={cx(classes.root, classes.avatar, classes[size], className)}\n          style={inlineStyle}\n          variant={variant}\n          size={size}\n          {...avatarProps}\n        >\n          {children}\n        </MuiAvatar>\n      </div>\n    </div>\n  );\n});\n"],"names":["getColor","color","defaultColor","theme","colors","HvAvatar","forwardRef","props","ref","className","style","classes","classesProp","children","childrenProp","component","size","backgroundColor","src","srcSet","sizes","alt","imgProps","status","badge","variant","avatarProps","others","useDefaultProps","cx","useClasses","imageLoaded","useImageLoaded","hasImg","hasImgNotFailing","img","User","iconSize","decreaseSize","fallback","inlineStyle","borderRadius","secondary","atmo1","statusInlineStyle","statusColor","positive","boxShadow","badgeColor","container","_jsx","MuiAvatar","root","avatar"],"mappings":";;;;;;;;;;AAqEA,MAAMA,WAAWA,CAACC,OAAeC,iBAC/BC,MAAMC,OAAOH,KAAK,KAAKA,SAASC;AAM3B,MAAMG,WAAWC,WAA+B,CAACC,OAAOC,QAAQ;AAC/D,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC,UAAUC;AAAAA,IACVC,YAAY;AAAA,IACZC,OAAO;AAAA,IACPC,kBAAkB;AAAA,IAClBhB,QAAQ;AAAA,IACRiB;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,UAAU;AAAA,IACVC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYrB,KAAK;AAC/B,QAAA;AAAA,IAAEI;AAAAA,IAASkB;AAAAA,EAAAA,IAAOC,WAAWlB,WAAW;AAE1CC,MAAAA;AAGEkB,QAAAA,cAAcC,eAAed,KAAKC,MAAM;AAC9C,QAAMc,SAASf,OAAOC;AAChBe,QAAAA,mBAAmBD,UAAUF,gBAAgB;AAEnD,MAAIG,kBAAkB;AACpBrB,mCACE,OAAA;AAAA,MACEQ;AAAAA,MACAH;AAAAA,MACAC;AAAAA,MACAC;AAAAA,MACAX,WAAWE,QAAQwB;AAAAA,MAAI,GACnBb;AAAAA,IAAAA,CACL;AAAA,EAAA,WAEMR,gBAAgB,MAAM;AACpBA,eAAAA;AAAAA,EAAAA,WACFmB,UAAUZ,KAAK;AACxB,KAACR,QAAQ,IAAIQ;AAAAA,EAAAA,OACR;AACLR,mCACGuB,MAAI;AAAA,MACHnC;AAAAA,MACAoC,UAAUC,aAAatB,IAAI;AAAA,MAC3BP,WAAWE,QAAQ4B;AAAAA,IAAAA,CACpB;AAAA,EAEL;AAEA,QAAMC,cAA6B;AAAA,IACjC,GAAG9B;AAAAA,EAAAA;AAGL,MAAIK,aAAa,QAAQ,OAAOA,cAAc,UAAU;AAEtDyB,gBAAYC,eAAe;AAAA,EAC7B;AAEA,MAAI,CAACP,kBAAkB;AACrBM,gBAAYvB,kBAAkBjB,SAC5BiB,iBACAd,MAAMC,OAAOsC,SACf;AACAF,gBAAYvC,QAAQD,SAASC,OAAOE,MAAMC,OAAOuC,KAAK;AAAA,EACxD;AAEA,QAAMC,oBAAmC,CAAA;AACzC,MAAIrB,QAAQ;AAGV,UAAMsB,cAAc7C,SAASuB,QAAQpB,MAAMC,OAAO0C,QAAQ;AAC1DF,sBAAkBG,YAAa,yBAAwBF;AAAAA,EACzD;AAEA,QAAMG,aAAahD,SAASwB,SAAS,IAAIrB,MAAMC,OAAO0C,QAAQ;AAE9D,6BACE,OAAA;AAAA,IAAKtC;AAAAA,IAAUC,WAAWE,QAAQsC;AAAAA,IAAU,GAAKtB;AAAAA,IAAMd,+BACrD,OAAA;AAAA,MACEJ,WAAWoB,GAAGlB,QAAQY,QAAQZ,QAAQc,OAAO,GAAGd,QAAQK,IAAI,CAAC;AAAA,MAC7DN,OAAOkC;AAAAA,MAAkB/B,UAAA,CAExBW,SACC0B,oBAAA,OAAA;AAAA,QACEzC,WAAWE,QAAQa;AAAAA,QACnBd,OAAO;AAAA,UAAEO,iBAAiB+B;AAAAA,QAAW;AAAA,MAAA,CACtC,GAEHE,oBAACC,WAAS;AAAA,QACRpC;AAAAA,QAEAN,WAAWoB,GAAGlB,QAAQyC,MAAMzC,QAAQ0C,QAAQ1C,QAAQK,IAAI,GAAGP,SAAS;AAAA,QACpEC,OAAO8B;AAAAA,QACPf;AAAAA,QACAT;AAAAA,QAAW,GACPU;AAAAA,QAAWb;AAAAA,MAAAA,CAGN,CAAC;AAAA,IAAA,CACT;AAAA,EAAA,CACF;AAET,CAAC;"}

package/dist/esm/components/BaseDropdown/BaseDropdown.js

@@ -173,8 +173,7 @@ const HvBaseDropdown = (props) => {
   const headerComponent = (() => {
     if (component) {
       return React__default.cloneElement(component, {
-        ref: handleDropdownHeaderRef,
-        "aria-controls": isOpen ? setId(elementId, "children-container") : void 0
+        ref: handleDropdownHeaderRef
       });
     }
     const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;
@@ -191,7 +190,6 @@ const HvBaseDropdown = (props) => {
       style: disabled || readOnly ? {
         pointerEvents: "none"
       } : void 0,
-      "aria-controls": isOpen ? setId(elementId, "children-container") : void 0,
       "aria-label": others["aria-label"] ?? void 0,
       "aria-labelledby": others["aria-labelledby"] ?? void 0,
       "aria-required": required ?? void 0,
@@ -290,6 +288,7 @@ const HvBaseDropdown = (props) => {
       role: ariaRole,
       "aria-expanded": ariaExpanded,
       "aria-owns": isOpen ? setId(elementId, "children-container") : void 0,
+      "aria-controls": isOpen ? setId(elementId, "children-container") : void 0,
       "aria-required": required ?? void 0,
       "aria-readonly": readOnly ?? void 0,
       className: cx(classes.anchor, {