npm - @hitachivantara/uikit-react-core - Versions diffs - 5.26.1 → 5.26.3 - Mend

@hitachivantara/uikit-react-core 5.26.1 → 5.26.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/dist/esm/components/FileUploader/DropZone/DropZone.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropZone.js","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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"}
1	+ {"version":3,"file":"DropZone.js","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/esm/components/FileUploader/DropZone/DropZone.styles.js CHANGED Viewed

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

package/dist/esm/components/FileUploader/DropZone/DropZone.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropZone.styles.js","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,cAAc,cAAc;AAAA,EACvEC,mBAAmB;AAAA,IACjBC,UAAU;AAAA,IACVC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,QAAS,OAAMC,MAAMC,aAAaC,SAASC,cAAcH,MAAMC,aAAaC,SAASE;AAAAA,IACrFC,QAAQ;AAAA,IACRC,YAAYN,MAAMC,aAAaC,SAASK;AAAAA,IACxCC,cAAcR,MAAMC,aAAaC,SAASM;AAAAA,IAE1C,WAAW;AAAA,MACTF,YAAa,GAAEN,MAAMS,OAAOC;AAAAA,MAC5BX,QAAS,OAAMC,MAAMC,aAAaC,SAASC,cAAcH,MAAMS,OAAOE;AAAAA,IACxE;AAAA,IAEA,~~WAAW~~;AAAA,~~MACTL~~,YAAa,GAAEN,MAAMS,OAAOC;AAAAA,MAC5BX,QAAS,OAAMC,MAAMC,aAAaC,SAASC,cAAcH,MAAMS,OAAOE;AAAAA,MACtE,GAAGC;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,MAAMS,OAAOC;AAAAA,IAC5BX,QAAS,OAAMC,MAAMC,aAAaC,SAASC,cAAcH,MAAMC,aAAaC,SAASe;AAAAA,EACvF;AAAA,EACAC,2BAA2B;AAAA,IACzBZ,YAAa,GAAEN,MAAMS,OAAOU;AAAAA,IAC5BpB,QAAS,OAAMC,MAAMC,aAAaC,SAASC,cAAcH,MAAMC,aAAaC,SAASkB;AAAAA,IACrFf,QAAQ;AAAA,IACR,WAAW;AAAA,MACTC,YAAa,GAAEN,MAAMS,OAAOU;AAAAA,MAC5BpB,QAAS,OAAMC,MAAMC,aAAaC,SAASC,cAAcH,MAAMC,aAAaC,SAASkB;AAAAA,IACvF;AAAA,IAEA,eAAe;AAAA,MACbC,OAAOrB,MAAMS,OAAOa;AAAAA,IACtB;AAAA,IACA,sBAAsB;AAAA,MACpBD,OAAOrB,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,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~~,MAAM4B,~~MAAMM~~;AAAAA,EAC3B;AAAA,EACAC,eAAe;AAAA,IACbC,eAAe;AAAA,EACjB;AAAA,EACAC,UAAU;AAAA,IACR,~~GAAIrC~~,~~MAAMsC~~,WAAWC;AAAAA,EACvB;AAAA,EACAC,iBAAiB;AAAA,IACf,~~GAAIxC~~,~~MAAMsC~~,WAAWG;AAAAA,EACvB;AACF,CAAC;"}
1	+ {"version":3,"file":"DropZone.styles.js","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,cAAc,cAAc;AAAA,EACvEC,mBAAmB;AAAA,IACjBC,UAAU;AAAA,IACVC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,QAAS,OAAMC,MAAMC,aAAaC,SAASC,cAAcH,MAAMC,aAAaC,SAASE;AAAAA,IACrFC,QAAQ;AAAA,IACRC,YAAYN,MAAMC,aAAaC,SAASK;AAAAA,IACxCC,cAAcR,MAAMC,aAAaC,SAASM;AAAAA,IAE1C,WAAW;AAAA,MACTF,YAAa,GAAEN,MAAMS,OAAOC;AAAAA,MAC5BX,QAAS,OAAMC,MAAMC,aAAaC,SAASC,cAAcH,MAAMS,OAAOE;AAAAA,IACxE;AAAA,IAEA,kBAAkB;AAAA,MAChBL,YAAa,GAAEN,MAAMS,OAAOC;AAAAA,MAC5BX,QAAS,OAAMC,MAAMC,aAAaC,SAASC,cAAcH,MAAMS,OAAOE;AAAAA,MACtE,GAAGC;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,MAAMS,OAAOC;AAAAA,IAC5BX,QAAS,OAAMC,MAAMC,aAAaC,SAASC,cAAcH,MAAMC,aAAaC,SAASe;AAAAA,EACvF;AAAA,EACAC,2BAA2B;AAAA,IACzBZ,YAAa,GAAEN,MAAMS,OAAOU;AAAAA,IAC5BpB,QAAS,OAAMC,MAAMC,aAAaC,SAASC,cAAcH,MAAMC,aAAaC,SAASkB;AAAAA,IACrFf,QAAQ;AAAA,IACR,WAAW;AAAA,MACTC,YAAa,GAAEN,MAAMS,OAAOU;AAAAA,MAC5BpB,QAAS,OAAMC,MAAMC,aAAaC,SAASC,cAAcH,MAAMC,aAAaC,SAASkB;AAAAA,IACvF;AAAA,IAEA,eAAe;AAAA,MACbC,OAAOrB,MAAMS,OAAOa;AAAAA,IACtB;AAAA,IACA,sBAAsB;AAAA,MACpBD,OAAOrB,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,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,MAAM4B,MAAMO;AAAAA,EAC3B;AAAA,EACAC,eAAe;AAAA,IACbC,eAAe;AAAA,EACjB;AAAA,EACAC,UAAU;AAAA,IACR,GAAItC,MAAMuC,WAAWC;AAAAA,EACvB;AAAA,EACAC,iBAAiB;AAAA,IACf,GAAIzC,MAAMuC,WAAWG;AAAAA,EACvB;AACF,CAAC;"}

package/dist/esm/components/OverflowTooltip/OverflowTooltip.js CHANGED Viewed

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

package/dist/esm/components/OverflowTooltip/OverflowTooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OverflowTooltip.js","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,qBAAqBV,KAAK;AACxC,QAAA;AAAA,IAAEE;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AAExC,QAAA;AAAA,IAAEU,QAAQ;AAAA,IAAGC;AAAAA,MAAQC,kBAAkB;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,QACd,MAAMjB,qBAAqBX,YAAYS,6BAAMoB,UAAU,GACvD,CAACpB,MAAME,iBAAiB,CAC1B;AAEA,QAAMmB,UAAUF,QACd,MACEG,oBAAA,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,oBAACG,~~WAAS;AAAA,IACR7B;AAAAA,IACA8B,sBAAsB,CAACT;AAAAA,IACvBhB;AAAAA,IACAE;AAAAA,IACAwB,2BACGC,cAAY;AAAA,MAAC7B,WAAWF,QAAQgC;AAAAA,MAAaC,SAAQ;AAAA,MAAMtC,UACzDQ;AAAAA,IAAAA,CACW;AAAA,~~IACf~~,~~GACGI~~;AAAAA,IAAaZ,UAEhB6B;AAAAA,~~EACQ~~,~~CAAA,IAEXA~~;~~AAEJ~~;"}
1	+ {"version":3,"file":"OverflowTooltip.js","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,qBAAqBV,KAAK;AACxC,QAAA;AAAA,IAAEE;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AAExC,QAAA;AAAA,IAAEU,QAAQ;AAAA,IAAGC;AAAAA,MAAQC,kBAAkB;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,QACd,MAAMjB,qBAAqBX,YAAYS,6BAAMoB,UAAU,GACvD,CAACpB,MAAME,iBAAiB,CAC1B;AAEA,QAAMmB,UAAUF,QACd,MACEG,oBAAA,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,6BACGgB,WAAS;AAAA,IACR7B;AAAAA,IACA8B,sBAAsB,CAACT;AAAAA,IACvBhB;AAAAA,IACAE;AAAAA,IACAwB,2BACGC,cAAY;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/esm/components/Tag/Tag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tag.js","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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"}
1	+ {"version":3,"file":"Tag.js","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":"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"}

package/dist/esm/components/Tooltip/Tooltip.styles.js CHANGED Viewed

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

package/dist/esm/components/Tooltip/Tooltip.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.styles.js","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,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,eAAkBV,QAAQ,GAAG;AAAA,MAClCW,SAAS;AAAA,IACX;AAAA,IACA,CAAE,MAAKD,eAAkBZ,SAAS,GAAG;AAAA,~~MACnC~~,~~GAAGc~~,~~MAAMC~~,~~WAAWC~~;AAAAA,~~MACpBC~~,SAAS;AAAA,MACTC,OAAO;AAAA,MACPC,UAAU;AAAA,MACVC,iBAAiBN,MAAMO,OAAOC;AAAAA,MAC9BC,WAAWT,MAAMO,OAAOG;AAAAA,MACxBC,SAAS;AAAA,MACT,~~GAAId~~,aAAa;AAAA,~~QACfc~~,SAAS;AAAA,QACTC,cAAcZ,~~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,MAAMO,OAAOW;AAAAA,IAC1C;AAAA,IACA,CAAE,~~MAAKpC~~,cAAcQ,iBAAiB,GAAG;AAAA,~~MACvCqB~~,SAASX,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,MAAMmB,MAAMI;AAAAA,IACrB;AAAA,IACA,CAAE,~~MAAKzC~~,cAAcY,WAAW,GAAG;AAAA,~~MACjCU~~,OAAOJ,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,MAAMmB,MAAMC;AAAAA,IACvB;AAAA,EAAA;AAEJ;"}
1	+ {"version":3,"file":"Tooltip.styles.js","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,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,eAAkBV,QAAQ,GAAG;AAAA,MAClCW,SAAS;AAAA,IACX;AAAA,IACA,CAAE,MAAKD,eAAkBZ,SAAS,GAAG;AAAA,MACnCc,YAAYC,MAAMD,WAAWE;AAAAA,MAC7B,GAAGD,MAAME,WAAWD;AAAAA,MACpBE,SAAS;AAAA,MACTC,OAAO;AAAA,MACPC,UAAU;AAAA,MACVC,iBAAiBN,MAAMO,OAAOC;AAAAA,MAC9BC,WAAWT,MAAMO,OAAOG;AAAAA,MACxBC,SAAS;AAAA,MACT,GAAIf,aAAa;AAAA,QACfe,SAAS;AAAA,QACTC,cAAcZ,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,MAAMO,OAAOW;AAAAA,IAC1C;AAAA,IACA,CAAE,MAAKrC,cAAcQ,iBAAiB,GAAG;AAAA,MACvCsB,SAASX,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,MAAMmB,MAAMI;AAAAA,IACrB;AAAA,IACA,CAAE,MAAK1C,cAAcY,WAAW,GAAG;AAAA,MACjCW,OAAOJ,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,MAAMmB,MAAMC;AAAAA,IACvB;AAAA,EAAA;AAEJ;"}

package/dist/types/index.d.ts CHANGED Viewed

@@ -1191,7 +1191,7 @@ export declare type HvAtmosphereColors = Record<HvAtmosphereColorKeys, string>;
  * Avatars can be used to represent a user or a brand.
  * They can show an image, an icon or the initial letters of a name, for example.
  */
-export declare const HvAvatar: (props: HvAvatarProps) => JSX_2.Element;
+export declare const HvAvatar: ForwardRefExoticComponent<HvAvatarProps & RefAttributes<any>>;
 export declare type HvAvatarClasses = ExtractNames<typeof useClasses_17>;
@@ -2418,6 +2418,8 @@ export declare interface HvColorPickerProps {
     onSavedColorRemoved?: (color?: string) => void;
     /** Aria label to apply to delete saved color button. */
     deleteSavedColorButtonArialLabel?: string;
+    /** Aria label to apply to add saved color button. */
+    addSavedColorButtonAriaLabel?: string;
 }
 declare type HvColumnGroup<D extends object = Record<string, unknown>, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer> = HvTableColumnOptions<D, H> & HvColumnGroupInterface<D, H> & ({

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.26.1",
+  "version": "5.26.3",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -64,7 +64,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "77e8178cbd9f102d7da0356e85042ed6142615b5",
+  "gitHead": "bc3297e5bbe00a372d261111b551817f0a00a821",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {