npm - @hitachivantara/uikit-react-core - Versions diffs - 5.25.0 → 5.25.1 - Mend

@hitachivantara/uikit-react-core 5.25.0 → 5.25.1

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 (120) hide show

package/dist/cjs/components/Forms/WarningText/WarningText.cjs CHANGED Viewed

@@ -56,6 +56,7 @@ const HvWarningText = (props) => {
         [classes.hideText]: hideText
       }),
       role: "status",
+      "aria-live": "polite",
       "aria-relevant": "additions text",
       ...others,
       children: showWarning && content

package/dist/cjs/components/Forms/WarningText/WarningText.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"WarningText.cjs","sources":["../../../../../src/components/Forms/WarningText/WarningText.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { Fail } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { staticClasses, useClasses } from \"./WarningText.styles\";\nimport { HvFormElementContext } from \"../FormElement\";\n\nexport { staticClasses as warningTextClasses };\n\nexport type HvWarningTextClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWarningTextProps extends HvBaseProps {\n /** Icon to be rendered alongside the warning text. /\n adornment?: React.ReactNode;\n /* If `true` the text is not rendered. /\n isVisible?: boolean;\n /* If `true` the text is disabled. /\n disabled?: boolean;\n /* If `true` the text won't include a gutter. /\n disableGutter?: boolean;\n /* If `true` the text won't include the top border. /\n disableBorder?: boolean;\n /* If `true` the adornment icon isn't shown. /\n disableAdornment?: boolean;\n /* If `true` the text isn't shown. /\n hideText?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvWarningTextClasses;\n}\n\n/\n Provides the user with a descriptive text, signaling an error, for when the form element is in an invalid state.\n */\nexport const HvWarningText = (props: HvWarningTextProps) => {\n const {\n children,\n adornment,\n isVisible,\n classes: classesProp,\n className,\n id,\n disabled,\n disableGutter = false,\n disableBorder = false,\n disableAdornment = false,\n hideText = false,\n ...others\n } = useDefaultProps(\"HvWarningText\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const { elementId, elementStatus, elementDisabled } =\n useContext(HvFormElementContext);\n const localDisabled = disabled \|\| elementDisabled;\n const localVisible = !isNil(isVisible)\n ? isVisible\n : elementStatus === \"invalid\";\n const localId = id ?? setId(elementId, \"error\");\n const showWarning = localVisible && !localDisabled;\n const content = showWarning ? children : \"\";\n const localAdornment = adornment \|\| (\n <Fail className={classes.defaultIcon} semantic=\"negative\" />\n );\n\n return (\n <div\n className={cx(\n classes.root,\n {\n [classes.show]: showWarning,\n [classes.topBorder]: !disableBorder,\n },\n className\n )}\n >\n {!disableAdornment && localAdornment}\n <HvTypography\n id={localId}\n className={cx(classes.warningText, {\n [classes.topGutter]: !disableGutter,\n [classes.hideText]: hideText,\n })}\n role=\"status\"\n aria-relevant=\"additions text\"\n {...others}\n >\n {showWarning && content}\n </HvTypography>\n </div>\n );\n};\n"],"names":["HvWarningText","props","children","adornment","isVisible","classes","classesProp","className","id","disabled","disableGutter","disableBorder","disableAdornment","hideText","others","useDefaultProps","cx","useClasses","elementId","elementStatus","elementDisabled","useContext","HvFormElementContext","localDisabled","localVisible","isNil","localId","setId","showWarning","content","localAdornment","_jsx","Fail","defaultIcon","semantic","root","show","topBorder","HvTypography","warningText","topGutter","role"],"mappings":";;;;;;;;;;;;;AAyCaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,gBAAgB;AAAA,IAChBC,gBAAgB;AAAA,IAChBC,mBAAmB;AAAA,IACnBC,WAAW;AAAA,IACX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,iBAAiBd,KAAK;AAEpC,QAAA;AAAA,IAAEI;AAAAA,IAASW;AAAAA,EAAAA,IAAOC,mBAAAA,WAAWX,WAAW;AAExC,QAAA;AAAA,IAAEY;AAAAA,IAAWC;AAAAA,IAAeC;AAAAA,EAAAA,IAChCC,MAAAA,WAAWC,mBAAAA,oBAAoB;AACjC,QAAMC,gBAAgBd,YAAYW;AAClC,QAAMI,eAAe,CAACC,uBAAMrB,SAAS,IACjCA,YACAe,kBAAkB;AACtB,QAAMO,UAAUlB,MAAMmB,MAAMT,MAAAA,WAAW,OAAO;AACxCU,QAAAA,cAAcJ,gBAAgB,CAACD;AAC/BM,QAAAA,UAAUD,cAAc1B,WAAW;AACnC4B,QAAAA,iBAAiB3B,aACrB4B,2BAAAA,IAACC,sBAAI;AAAA,IAACzB,WAAWF,QAAQ4B;AAAAA,IAAaC,UAAS;AAAA,EAAA,CAAY;AAG7D,yCACE,OAAA;AAAA,IACE3B,WAAWS,GACTX,QAAQ8B,MACR;AAAA,MACE,CAAC9B,QAAQ+B,IAAI,GAAGR;AAAAA,MAChB,CAACvB,QAAQgC,SAAS,GAAG,CAAC1B;AAAAA,OAExBJ,SACF;AAAA,IAAEL,UAAA,CAED,CAACU,oBAAoBkB,+CACrBQ,WAAAA,cAAY;AAAA,MACX9B,IAAIkB;AAAAA,MACJnB,WAAWS,GAAGX,QAAQkC,aAAa;AAAA,QACjC,CAAClC,QAAQmC,SAAS,GAAG,CAAC9B;AAAAA,QACtB,CAACL,QAAQQ,QAAQ,GAAGA;AAAAA,MAAAA,CACrB;AAAA,MACD4B,MAAK;AAAA,MACL,iBAAc;AAAA,MAAgB,GAC1B3B;AAAAA,MAAMZ,UAET0B,eAAeC;AAAAA,IAAAA,CACJ,CAAC;AAAA,EAAA,CACZ;AAET;;;"}
1	+ {"version":3,"file":"WarningText.cjs","sources":["../../../../../src/components/Forms/WarningText/WarningText.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { Fail } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { staticClasses, useClasses } from \"./WarningText.styles\";\nimport { HvFormElementContext } from \"../FormElement\";\n\nexport { staticClasses as warningTextClasses };\n\nexport type HvWarningTextClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWarningTextProps extends HvBaseProps {\n /** Icon to be rendered alongside the warning text. /\n adornment?: React.ReactNode;\n /* If `true` the text is not rendered. /\n isVisible?: boolean;\n /* If `true` the text is disabled. /\n disabled?: boolean;\n /* If `true` the text won't include a gutter. /\n disableGutter?: boolean;\n /* If `true` the text won't include the top border. /\n disableBorder?: boolean;\n /* If `true` the adornment icon isn't shown. /\n disableAdornment?: boolean;\n /* If `true` the text isn't shown. /\n hideText?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvWarningTextClasses;\n}\n\n/\n Provides the user with a descriptive text, signaling an error, for when the form element is in an invalid state.\n */\nexport const HvWarningText = (props: HvWarningTextProps) => {\n const {\n children,\n adornment,\n isVisible,\n classes: classesProp,\n className,\n id,\n disabled,\n disableGutter = false,\n disableBorder = false,\n disableAdornment = false,\n hideText = false,\n ...others\n } = useDefaultProps(\"HvWarningText\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const { elementId, elementStatus, elementDisabled } =\n useContext(HvFormElementContext);\n const localDisabled = disabled \|\| elementDisabled;\n const localVisible = !isNil(isVisible)\n ? isVisible\n : elementStatus === \"invalid\";\n const localId = id ?? setId(elementId, \"error\");\n const showWarning = localVisible && !localDisabled;\n const content = showWarning ? children : \"\";\n const localAdornment = adornment \|\| (\n <Fail className={classes.defaultIcon} semantic=\"negative\" />\n );\n\n return (\n <div\n className={cx(\n classes.root,\n {\n [classes.show]: showWarning,\n [classes.topBorder]: !disableBorder,\n },\n className\n )}\n >\n {!disableAdornment && localAdornment}\n <HvTypography\n id={localId}\n className={cx(classes.warningText, {\n [classes.topGutter]: !disableGutter,\n [classes.hideText]: hideText,\n })}\n role=\"status\"\n aria-live=\"polite\"\n aria-relevant=\"additions text\"\n {...others}\n >\n {showWarning && content}\n </HvTypography>\n </div>\n );\n};\n"],"names":["HvWarningText","props","children","adornment","isVisible","classes","classesProp","className","id","disabled","disableGutter","disableBorder","disableAdornment","hideText","others","useDefaultProps","cx","useClasses","elementId","elementStatus","elementDisabled","useContext","HvFormElementContext","localDisabled","localVisible","isNil","localId","setId","showWarning","content","localAdornment","_jsx","Fail","defaultIcon","semantic","root","show","topBorder","HvTypography","warningText","topGutter","role"],"mappings":";;;;;;;;;;;;;AAyCaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,gBAAgB;AAAA,IAChBC,gBAAgB;AAAA,IAChBC,mBAAmB;AAAA,IACnBC,WAAW;AAAA,IACX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,iBAAiBd,KAAK;AAEpC,QAAA;AAAA,IAAEI;AAAAA,IAASW;AAAAA,EAAAA,IAAOC,mBAAAA,WAAWX,WAAW;AAExC,QAAA;AAAA,IAAEY;AAAAA,IAAWC;AAAAA,IAAeC;AAAAA,EAAAA,IAChCC,MAAAA,WAAWC,mBAAAA,oBAAoB;AACjC,QAAMC,gBAAgBd,YAAYW;AAClC,QAAMI,eAAe,CAACC,uBAAMrB,SAAS,IACjCA,YACAe,kBAAkB;AACtB,QAAMO,UAAUlB,MAAMmB,MAAMT,MAAAA,WAAW,OAAO;AACxCU,QAAAA,cAAcJ,gBAAgB,CAACD;AAC/BM,QAAAA,UAAUD,cAAc1B,WAAW;AACnC4B,QAAAA,iBAAiB3B,aACrB4B,2BAAAA,IAACC,sBAAI;AAAA,IAACzB,WAAWF,QAAQ4B;AAAAA,IAAaC,UAAS;AAAA,EAAA,CAAY;AAG7D,yCACE,OAAA;AAAA,IACE3B,WAAWS,GACTX,QAAQ8B,MACR;AAAA,MACE,CAAC9B,QAAQ+B,IAAI,GAAGR;AAAAA,MAChB,CAACvB,QAAQgC,SAAS,GAAG,CAAC1B;AAAAA,OAExBJ,SACF;AAAA,IAAEL,UAAA,CAED,CAACU,oBAAoBkB,+CACrBQ,WAAAA,cAAY;AAAA,MACX9B,IAAIkB;AAAAA,MACJnB,WAAWS,GAAGX,QAAQkC,aAAa;AAAA,QACjC,CAAClC,QAAQmC,SAAS,GAAG,CAAC9B;AAAAA,QACtB,CAACL,QAAQQ,QAAQ,GAAGA;AAAAA,MAAAA,CACrB;AAAA,MACD4B,MAAK;AAAA,MACL,aAAU;AAAA,MACV,iBAAc;AAAA,MAAgB,GAC1B3B;AAAAA,MAAMZ,UAET0B,eAAeC;AAAAA,IAAAA,CACJ,CAAC;AAAA,EAAA,CACZ;AAET;;;"}

package/dist/cjs/components/TagsInput/TagsInput.cjs CHANGED Viewed

@@ -315,7 +315,7 @@ const HvTagsInput = (props) => {
             gutters: classes.listItemGutters,
             root: classes.listItemRoot
           },
-          id: `tag-${i}`,
+          id: setId.setId(elementId, `tag-${i}`),
           children: /* @__PURE__ */ jsxRuntime.jsx(Tag.HvTag, {
             label,
             className: cx({
@@ -347,7 +347,7 @@ const HvTagsInput = (props) => {
           root: classes.tagInputContainerRoot,
           gutters: classes.listItemGutters
         },
-        id: `tag-${value.length}`,
+        id: setId.setId(elementId, `tag-${value.length}`),
         children: /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, {
           value: tagInput,
           disableClear: true,

package/dist/cjs/components/TagsInput/TagsInput.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TagsInput.cjs","sources":["../../../../src/components/TagsInput/TagsInput.tsx"],"sourcesContent":["import React, {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { InputBaseComponentProps as MuiInputBaseComponentProps } from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvListContainer, HvListItem } from \"@core/components/ListContainer\";\nimport { baseInputClasses } from \"@core/components/BaseInput\";\nimport { HvInput } from \"@core/components/Input\";\nimport { HvTagSuggestion, HvValidationMessages } from \"@core/types/forms\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useIsMounted } from \"@core/hooks/useIsMounted\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport validationStates from \"@core/components/Forms/FormElement/validationStates\";\nimport { DEFAULT_ERROR_MESSAGES } from \"@core/components/BaseInput/validations\";\nimport { HvTag, HvTagProps } from \"@core/components/Tag\";\nimport {\n HvCharCounter,\n HvCharCounterProps,\n HvFormElement,\n HvFormStatus,\n HvInfoMessage,\n HvLabel,\n HvSuggestions,\n HvWarningText,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./TagsInput.styles\";\n\nexport { staticClasses as tagsInputClasses };\n\nexport type HvTagsInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagsInputProps\n extends HvBaseProps<\n HTMLElement,\n \"onChange\" \| \"onBlur\" \| \"onFocus\" \| \"onKeyDown\" \| \"color\" \| \"defaultValue\"\n > {\n /** The form element name. /\n name?: string;\n /* The value of the form element. /\n value?: string[] \| HvTagProps[];\n /* When uncontrolled, defines the initial input value. /\n defaultValue?: string[] \| HvTagProps[];\n /\n The label of the form element.\n * The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n /\n label?: React.ReactNode;\n /* Provide additional descriptive text for the form element. /\n description?: React.ReactNode;\n /* Indicates that the form element is disabled. /\n disabled?: boolean;\n /* Indicates that the form element is not editable. /\n readOnly?: boolean;\n /* Indicates that the form element is required. /\n required?: boolean;\n /* The function that will be executed onChange. /\n onChange?: (\n event:\n \| React.ChangeEvent<HTMLInputElement>\n \| React.KeyboardEvent<HTMLInputElement>\n \| React.MouseEvent<HTMLButtonElement>\n \| React.MouseEvent<HTMLElement, MouseEvent>\n \| React.KeyboardEventHandler<HTMLElement>,\n value: HvTagProps[]\n ) => void;\n /* The function that will be executed when the element is focused. /\n onFocus?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n /* The function that will be executed when the element is blurred. /\n onBlur?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n /* The function that will be executed when a tag is deleted. /\n onDelete?: (\n event:\n \| React.ChangeEvent<HTMLInputElement>\n \| React.KeyboardEvent<HTMLInputElement>\n \| React.MouseEvent<HTMLButtonElement>\n \| React.MouseEvent<HTMLElement, MouseEvent>\n \| React.KeyboardEventHandler<HTMLElement>,\n value: HvTagProps,\n index: number\n ) => void;\n /* The function that will be executed when a tag is added. /\n onAdd?: (\n event:\n \| React.ChangeEvent<HTMLInputElement>\n \| React.KeyboardEvent<HTMLInputElement>\n \| React.MouseEvent<HTMLButtonElement>\n \| React.MouseEvent<HTMLElement, MouseEvent>\n \| React.KeyboardEventHandler<HTMLElement>,\n value: HvTagProps,\n index: number\n ) => void;\n /* The placeholder value of the input. /\n placeholder?: string;\n /* If `true` the character counter isn't shown even if maxTagsQuantity is set. /\n hideCounter?: boolean;\n /* Text between the current char counter and max value. /\n middleCountLabel?: string;\n /* The maximum allowed length of the characters, if this value is null no check will be performed. /\n maxTagsQuantity?: number;\n /* Attributes applied to the input element. /\n inputProps?: MuiInputBaseComponentProps;\n /* If `true` it should autofocus. /\n autoFocus?: boolean;\n /* If `true` the component is resizable. /\n resizable?: boolean;\n /* Props passed to the HvCharCount component. /\n countCharProps?: Partial<HvCharCounterProps>;\n /* If `true` the component is in multiline mode. /\n multiline?: boolean;\n /* The status of the form element. /\n status?: HvFormStatus;\n /* The error message to show when `status` is \"invalid\". /\n statusMessage?: React.ReactNode;\n /* An Object containing the various texts associated with the input. /\n validationMessages?: HvValidationMessages;\n /* An array of strings that represent the character used to input a tag. This character is the string representation of the event.code from the input event. /\n commitTagOn?: string[];\n /* If `true` the tag will be committed when the blur event occurs. /\n commitOnBlur?: boolean;\n /* The function that will be executed to received an array of objects that has a label and id to create list of suggestion /\n suggestionListCallback?: (value: string) => HvTagSuggestion[] \| null;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvTagsInputClasses;\n}\n\n/\n A tags input is a single or multiline control that allows the input of tags.\n /\nexport const HvTagsInput = (props: HvTagsInputProps) => {\n const {\n classes: classesProp,\n className,\n id,\n name,\n value: valueProp,\n defaultValue = [],\n readOnly = false,\n disabled = false,\n required = false,\n label: textAreaLabel,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n onChange,\n onAdd,\n onDelete,\n onBlur,\n onFocus,\n placeholder,\n hideCounter = false,\n middleCountLabel = \"/\",\n maxTagsQuantity,\n autoFocus = false,\n resizable = true,\n inputProps = {},\n countCharProps = {},\n multiline = false,\n status,\n statusMessage,\n validationMessages,\n commitTagOn = [\"Enter\"],\n commitOnBlur = false,\n suggestionListCallback,\n ...others\n } = useDefaultProps(\"HvTagsInput\", props);\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const elementId = useUniqueId(id, \"hvTagsInput\");\n\n const hasLabel = textAreaLabel != null;\n const hasDescription = description != null;\n\n const [value, setValue] = useControlled(valueProp, defaultValue);\n\n const [validationState, setValidationState] = useControlled(\n status,\n validationStates.standBy\n );\n const [validationMessage, setValidationMessage] = useControlled(\n statusMessage,\n \"\"\n );\n\n const [tagInput, setTagInput] = useState(\"\");\n const [tagCursorPos, setTagCursorPos] = useState(value.length);\n const [stateValid, setStateValid] = useState(true);\n\n const inputRef = useRef<any>();\n const containerRef = useRef<any>();\n const skipReset = useRef(false);\n const blurTimeout = useRef<any>();\n const materialInputRef = useRef<any>(null);\n\n const isTagSelected = tagCursorPos >= 0 && tagCursorPos < value.length;\n const hasCounter = maxTagsQuantity != null && !hideCounter;\n\n // suggestions related state\n const [suggestionValues, setSuggestionValues] = useState<\n HvTagSuggestion[] \| null\n >(null);\n\n const isStateInvalid = useMemo(() => {\n return hasCounter && value.length > maxTagsQuantity;\n }, [hasCounter, maxTagsQuantity, value.length]);\n\n const canShowSuggestions = suggestionListCallback != null;\n const hasSuggestions = !!suggestionValues;\n\n const errorMessages = useMemo(\n () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n [validationMessages]\n );\n\n const performValidation = useCallback(\n (currValue) => {\n if (\n maxTagsQuantity !== null &&\n maxTagsQuantity !== undefined &&\n currValue.length > maxTagsQuantity\n ) {\n setValidationState(validationStates.invalid);\n setValidationMessage(errorMessages.maxCharError);\n setStateValid(false);\n } else {\n setValidationState(validationStates.valid);\n setValidationMessage(\"\");\n setStateValid(true);\n }\n },\n [\n errorMessages.maxCharError,\n maxTagsQuantity,\n setValidationMessage,\n setValidationState,\n ]\n );\n\n /\n Deletes a Tag from the array of tags and sets the new position for the tag cursor.\n * Also executes the user provided onDelete and onChange events.\n \n @param {number} tagPos - the position at which to remove the tag\n * @param {Event} event - the event associated with the delete\n * @param {boolean} end - whether or not to set the cursor at the end of the array\n /\n const deleteTag = useCallback(\n (tagPos, event, end) => {\n const newTagsArr = [\n ...value.slice(0, tagPos),\n ...value.slice(tagPos + 1),\n ];\n setValue(newTagsArr);\n setTagCursorPos(\n end ? newTagsArr.length : tagCursorPos > 0 ? tagCursorPos - 1 : 0\n );\n inputRef.current?.focus();\n performValidation(newTagsArr);\n onDelete?.(event, value[tagPos], tagPos);\n onChange?.(event, newTagsArr);\n skipReset.current = true;\n },\n [onChange, onDelete, performValidation, setValue, tagCursorPos, value]\n );\n\n /\n Adds a Tag to the array of tags.\n * Also executes the user provided onAdd and onDelete events.\n \n @param {Event} event - whatever event triggered adding a tag\n * @param {string} tag - the string for the tag\n /\n const addTag = useCallback(\n (event, tag) => {\n event.preventDefault();\n if (tag !== \"\") {\n const newTag: HvTagProps = { label: tag, type: \"semantic\" };\n const newTagsArr = [...value, newTag];\n setValue(newTagsArr);\n performValidation(newTagsArr);\n onAdd?.(event, newTag, newTagsArr.length - 1);\n onChange?.(event, newTagsArr);\n }\n },\n [onAdd, onChange, performValidation, setValue, value]\n );\n\n const canShowError =\n (status !== undefined &&\n status === \"invalid\" &&\n statusMessage !== undefined) \|\|\n !stateValid;\n\n useEffect(() => {\n if (!multiline) {\n const element = containerRef?.current?.children[tagCursorPos];\n // this setTimeout is a workaround for Firefox not properly dealing\n // with setting the scrollLeft value.\n setTimeout(() => {\n const container = containerRef.current;\n if (isNil(container)) return;\n container.scrollLeft = element\n ? element.offsetLeft -\n container.getBoundingClientRect().width / 2 +\n element.getBoundingClientRect().width / 2\n : 0;\n }, 50);\n\n element?.focus();\n }\n }, [multiline, tagCursorPos]);\n\n useEffect(() => {\n if (!skipReset.current) {\n setTagInput(\"\");\n setTagCursorPos(value.length);\n }\n skipReset.current = false;\n }, [value]);\n\n const isMounted = useIsMounted();\n\n /\n Looks for the node that represent the input inside the material tree and focus it.\n /\n const focusInput = () => {\n materialInputRef.current.focus();\n };\n\n const getSuggestions = useCallback(\n (li) => {\n // TODO Replace with ref\n const listEl = document.getElementById(\n setId(elementId, \"suggestions-list\") \|\| \"\"\n );\n return li != null ? listEl?.getElementsByTagName(\"li\")?.[li] : listEl;\n },\n [elementId]\n );\n\n /\n Clears the suggestion array.\n /\n const suggestionClearHandler = useCallback(() => {\n if (isMounted.current) {\n setSuggestionValues(null);\n }\n }, [isMounted]);\n\n /\n Fills of the suggestion array.\n /\n const suggestionHandler = useCallback(\n (val) => {\n const suggestionsArray = suggestionListCallback?.(val);\n if (suggestionsArray?.[0]?.label) {\n setSuggestionValues(suggestionsArray);\n } else {\n suggestionClearHandler();\n }\n },\n [suggestionClearHandler, suggestionListCallback]\n );\n\n /\n Executes the user callback adds the selection to the state and clears the suggestions.\n /\n const suggestionSelectedHandler = (event, item) => {\n addTag(event, item.value \|\| item.label);\n\n // set the input value (only when value is uncontrolled)\n setTagInput(item.value \|\| item.label);\n\n focusInput();\n suggestionClearHandler();\n };\n\n /\n Handler for the `onKeyDown` event on the suggestions component\n /\n const onSuggestionKeyDown = (event) => {\n if (isKey(event, \"Esc\")) {\n suggestionClearHandler();\n focusInput();\n } else if (isKey(event, \"Tab\")) {\n suggestionClearHandler();\n }\n };\n\n /\n Handler for the `onChange` event on the tag input\n /\n const onChangeHandler = useCallback(\n (_, input) => {\n setTagInput(input);\n\n if (canShowSuggestions) {\n // an edge case might be a controlled input whose onChange callback\n // doesn't change the value (or sets another): the suggestionListCallback\n // callback will still receive the original rejected value.\n // a refactor is needed so the suggestionListCallback might be called only\n // when the input is uncontrolled, providing a way to externally control\n // the suggestion values.\n suggestionHandler(input);\n }\n },\n [canShowSuggestions, suggestionHandler]\n );\n\n /\n Handler for the `onKeyDown` event on the form element\n /\n const onInputKeyDownHandler = useCallback(\n (event) => {\n if (!canShowSuggestions && commitTagOn.includes(event.code)) {\n addTag(event, tagInput);\n }\n },\n [addTag, canShowSuggestions, commitTagOn, tagInput]\n );\n\n /\n Handler for the `onKeyDown` event on the list container.\n /\n const onKeyDownHandler = useCallback(\n (event) => {\n if (tagInput === \"\") {\n switch (event.code) {\n case \"ArrowLeft\":\n setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);\n break;\n case \"ArrowRight\":\n setTagCursorPos(\n tagCursorPos < value.length ? tagCursorPos + 1 : value.length\n );\n break;\n case \"Backspace\":\n if (isTagSelected) {\n deleteTag(tagCursorPos, event, false);\n } else {\n setTagCursorPos(value.length - 1);\n }\n break;\n case \"Delete\":\n if (isTagSelected) {\n deleteTag(tagCursorPos, event, false);\n }\n break;\n default:\n break;\n }\n } else {\n switch (event.code) {\n case \"ArrowDown\":\n getSuggestions(0)?.focus();\n break;\n default:\n break;\n }\n }\n },\n [\n deleteTag,\n getSuggestions,\n isTagSelected,\n tagCursorPos,\n tagInput,\n value.length,\n ]\n );\n\n /\n Handler for the `onDelete` event on the tag component\n /\n const onDeleteTagHandler = useCallback(\n (event, i) => {\n deleteTag(i, event, true);\n setValidationState(validationStates.standBy);\n },\n [deleteTag, setValidationState]\n );\n\n /\n Handler for the `onClick` event on the list container\n */\n const onContainerClickHandler = useCallback(() => {\n inputRef.current?.focus();\n clearTimeout(blurTimeout.current);\n setTagCursorPos(value.length);\n }, [value.length]);\n\n const onBlurHandler = (evt) => {\n blurTimeout.current = setTimeout(() => {\n if (commitOnBlur) {\n addTag(evt, tagInput);\n }\n onBlur?.(evt, tagInput);\n }, 250);\n };\n\n const onFocusHandler = (evt) => {\n clearTimeout(blurTimeout.current);\n onFocus?.(evt, tagInput);\n };\n\n return (\n <HvFormElement\n id={id}\n name={name}\n disabled={disabled}\n readOnly={readOnly}\n status={validationState}\n required={required}\n onBlur={onBlurHandler}\n onFocus={onFocusHandler}\n className={cx(\n classes.root,\n { [classes.disabled]: disabled, [classes.readOnly]: readOnly },\n className\n )}\n >\n {(hasLabel \|\| hasDescription) && (\n <div className={classes.labelContainer}>\n {hasLabel && (\n <HvLabel\n className={classes.label}\n id={setId(id, \"label\")}\n htmlFor={setId(elementId, \"input\")}\n label={textAreaLabel}\n />\n )}\n\n {hasDescription && (\n <HvInfoMessage\n className={classes.description}\n id={setId(elementId, \"description\")}\n >\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n\n {hasCounter && (\n <HvCharCounter\n id={setId(elementId, \"charCounter\")}\n className={classes.characterCounter}\n separator={middleCountLabel}\n currentCharQuantity={value.length}\n maxCharQuantity={maxTagsQuantity}\n {...countCharProps}\n />\n )}\n\n <HvListContainer\n className={cx(classes.tagsList, {\n [classes.error]: canShowError,\n [classes.resizable]: resizable && multiline,\n [classes.invalid]: isStateInvalid,\n [classes.singleLine]: !multiline,\n })}\n onKeyDown={onKeyDownHandler}\n onClick={onContainerClickHandler}\n ref={containerRef}\n >\n {value &&\n value.map((t, i) => {\n const tag =\n typeof t === \"string\"\n ? {\n label: t,\n type: \"semantic\",\n }\n : t;\n const { label, type, ...otherProps } = tag;\n return (\n <HvListItem\n key={`${tag.label}-${i}`}\n tabIndex={-1}\n className={cx({ [classes.singleLine]: !multiline })}\n classes={{\n gutters: classes.listItemGutters,\n root: classes.listItemRoot,\n }}\n id={`tag-${i}`}\n >\n <HvTag\n label={label}\n className={cx({ [classes.tagSelected]: i === tagCursorPos })}\n classes={{\n chipRoot: classes.chipRoot,\n }}\n type={type}\n {...(!(readOnly \|\| disabled \|\| type === \"categorical\") && {\n onDelete: (event) => onDeleteTagHandler(event, i),\n })}\n deleteButtonProps={{\n tabIndex: -1,\n }}\n {...otherProps}\n />\n </HvListItem>\n );\n })}\n {!(disabled \|\| readOnly) && (\n <HvListItem\n className={cx(\n {\n [classes.singleLine]: !multiline,\n [classes.tagInputRootEmpty]: value.length === 0,\n },\n !!isTagSelected &&\n css({\n [`& .${baseInputClasses.inputRoot}`]: {\n backgroundColor: theme.colors.atmo1,\n },\n })\n )}\n classes={{\n root: classes.tagInputContainerRoot,\n gutters: classes.listItemGutters,\n }}\n id={`tag-${value.length}`}\n >\n <HvInput\n value={tagInput}\n disableClear\n onChange={onChangeHandler}\n onKeyDown={onInputKeyDownHandler}\n placeholder={value.length === 0 ? placeholder : \"\"}\n autoFocus={autoFocus}\n className={cx({\n [classes.singleLine]: !multiline,\n })}\n classes={{\n root: classes.tagInputRoot,\n input: classes.input,\n inputBorderContainer: classes.tagInputBorderContainer,\n inputRootFocused: classes.tagInputRootFocused,\n }}\n disabled={disabled}\n readOnly={readOnly \|\| isTagSelected}\n inputProps={{\n ref: materialInputRef,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\":\n ariaDescribedBy != null\n ? ariaDescribedBy\n : (description && setId(elementId, \"description\")) \|\|\n undefined,\n\n ...inputProps,\n }}\n inputRef={inputRef}\n {...others}\n />\n </HvListItem>\n )}\n </HvListContainer>\n {canShowSuggestions && (\n <>\n {hasSuggestions && (\n <div role=\"presentation\" className={classes.inputExtension} />\n )}\n <HvSuggestions\n id={setId(elementId, \"suggestions\")}\n classes={{\n root: classes.suggestionsContainer,\n list: classes.suggestionList,\n }}\n expanded={hasSuggestions}\n anchorEl={containerRef?.current?.parentElement}\n onClose={suggestionClearHandler}\n onKeyDown={onSuggestionKeyDown}\n onSuggestionSelected={suggestionSelectedHandler}\n suggestionValues={suggestionValues}\n />\n </>\n )}\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableBorder\n className={classes.error}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n};\n"],"names":["HvTagsInput","props","classes","classesProp","className","id","name","value","valueProp","defaultValue","readOnly","disabled","required","label","textAreaLabel","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onAdd","onDelete","onBlur","onFocus","placeholder","hideCounter","middleCountLabel","maxTagsQuantity","autoFocus","resizable","inputProps","countCharProps","multiline","status","statusMessage","validationMessages","commitTagOn","commitOnBlur","suggestionListCallback","others","useDefaultProps","cx","css","useClasses","elementId","useUniqueId","hasLabel","hasDescription","setValue","useControlled","validationState","setValidationState","validationStates","standBy","validationMessage","setValidationMessage","tagInput","setTagInput","useState","tagCursorPos","setTagCursorPos","length","stateValid","setStateValid","inputRef","useRef","containerRef","skipReset","blurTimeout","materialInputRef","isTagSelected","hasCounter","suggestionValues","setSuggestionValues","isStateInvalid","useMemo","canShowSuggestions","hasSuggestions","errorMessages","DEFAULT_ERROR_MESSAGES","performValidation","useCallback","currValue","undefined","invalid","maxCharError","valid","deleteTag","tagPos","event","end","newTagsArr","slice","current","focus","addTag","tag","preventDefault","newTag","type","canShowError","useEffect","element","children","setTimeout","container","isNil","scrollLeft","offsetLeft","getBoundingClientRect","width","isMounted","useIsMounted","focusInput","getSuggestions","li","listEl","document","getElementById","setId","getElementsByTagName","suggestionClearHandler","suggestionHandler","val","suggestionsArray","suggestionSelectedHandler","item","onSuggestionKeyDown","isKey","onChangeHandler","_","input","onInputKeyDownHandler","includes","code","onKeyDownHandler","_a","onDeleteTagHandler","i","onContainerClickHandler","clearTimeout","onBlurHandler","evt","onFocusHandler","HvFormElement","root","labelContainer","_jsx","HvLabel","htmlFor","HvInfoMessage","HvCharCounter","characterCounter","separator","currentCharQuantity","maxCharQuantity","_jsxs","HvListContainer","tagsList","error","singleLine","onKeyDown","onClick","ref","map","t","otherProps","HvListItem","tabIndex","gutters","listItemGutters","listItemRoot","HvTag","tagSelected","chipRoot","deleteButtonProps","tagInputRootEmpty","baseInputClasses","inputRoot","backgroundColor","theme","colors","atmo1","tagInputContainerRoot","HvInput","disableClear","tagInputRoot","inputBorderContainer","tagInputBorderContainer","inputRootFocused","tagInputRootFocused","_Fragment","role","inputExtension","HvSuggestions","suggestionsContainer","list","suggestionList","expanded","anchorEl","parentElement","onClose","onSuggestionSelected","HvWarningText","disableBorder"],"mappings":"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"}
1	+ {"version":3,"file":"TagsInput.cjs","sources":["../../../../src/components/TagsInput/TagsInput.tsx"],"sourcesContent":["import React, {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { InputBaseComponentProps as MuiInputBaseComponentProps } from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvListContainer, HvListItem } from \"@core/components/ListContainer\";\nimport { baseInputClasses } from \"@core/components/BaseInput\";\nimport { HvInput } from \"@core/components/Input\";\nimport { HvTagSuggestion, HvValidationMessages } from \"@core/types/forms\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useIsMounted } from \"@core/hooks/useIsMounted\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport validationStates from \"@core/components/Forms/FormElement/validationStates\";\nimport { DEFAULT_ERROR_MESSAGES } from \"@core/components/BaseInput/validations\";\nimport { HvTag, HvTagProps } from \"@core/components/Tag\";\nimport {\n HvCharCounter,\n HvCharCounterProps,\n HvFormElement,\n HvFormStatus,\n HvInfoMessage,\n HvLabel,\n HvSuggestions,\n HvWarningText,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./TagsInput.styles\";\n\nexport { staticClasses as tagsInputClasses };\n\nexport type HvTagsInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagsInputProps\n extends HvBaseProps<\n HTMLElement,\n \"onChange\" \| \"onBlur\" \| \"onFocus\" \| \"onKeyDown\" \| \"color\" \| \"defaultValue\"\n > {\n /** The form element name. /\n name?: string;\n /* The value of the form element. /\n value?: string[] \| HvTagProps[];\n /* When uncontrolled, defines the initial input value. /\n defaultValue?: string[] \| HvTagProps[];\n /\n The label of the form element.\n * The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n /\n label?: React.ReactNode;\n /* Provide additional descriptive text for the form element. /\n description?: React.ReactNode;\n /* Indicates that the form element is disabled. /\n disabled?: boolean;\n /* Indicates that the form element is not editable. /\n readOnly?: boolean;\n /* Indicates that the form element is required. /\n required?: boolean;\n /* The function that will be executed onChange. /\n onChange?: (\n event:\n \| React.ChangeEvent<HTMLInputElement>\n \| React.KeyboardEvent<HTMLInputElement>\n \| React.MouseEvent<HTMLButtonElement>\n \| React.MouseEvent<HTMLElement, MouseEvent>\n \| React.KeyboardEventHandler<HTMLElement>,\n value: HvTagProps[]\n ) => void;\n /* The function that will be executed when the element is focused. /\n onFocus?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n /* The function that will be executed when the element is blurred. /\n onBlur?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n /* The function that will be executed when a tag is deleted. /\n onDelete?: (\n event:\n \| React.ChangeEvent<HTMLInputElement>\n \| React.KeyboardEvent<HTMLInputElement>\n \| React.MouseEvent<HTMLButtonElement>\n \| React.MouseEvent<HTMLElement, MouseEvent>\n \| React.KeyboardEventHandler<HTMLElement>,\n value: HvTagProps,\n index: number\n ) => void;\n /* The function that will be executed when a tag is added. /\n onAdd?: (\n event:\n \| React.ChangeEvent<HTMLInputElement>\n \| React.KeyboardEvent<HTMLInputElement>\n \| React.MouseEvent<HTMLButtonElement>\n \| React.MouseEvent<HTMLElement, MouseEvent>\n \| React.KeyboardEventHandler<HTMLElement>,\n value: HvTagProps,\n index: number\n ) => void;\n /* The placeholder value of the input. /\n placeholder?: string;\n /* If `true` the character counter isn't shown even if maxTagsQuantity is set. /\n hideCounter?: boolean;\n /* Text between the current char counter and max value. /\n middleCountLabel?: string;\n /* The maximum allowed length of the characters, if this value is null no check will be performed. /\n maxTagsQuantity?: number;\n /* Attributes applied to the input element. /\n inputProps?: MuiInputBaseComponentProps;\n /* If `true` it should autofocus. /\n autoFocus?: boolean;\n /* If `true` the component is resizable. /\n resizable?: boolean;\n /* Props passed to the HvCharCount component. /\n countCharProps?: Partial<HvCharCounterProps>;\n /* If `true` the component is in multiline mode. /\n multiline?: boolean;\n /* The status of the form element. /\n status?: HvFormStatus;\n /* The error message to show when `status` is \"invalid\". /\n statusMessage?: React.ReactNode;\n /* An Object containing the various texts associated with the input. /\n validationMessages?: HvValidationMessages;\n /* An array of strings that represent the character used to input a tag. This character is the string representation of the event.code from the input event. /\n commitTagOn?: string[];\n /* If `true` the tag will be committed when the blur event occurs. /\n commitOnBlur?: boolean;\n /* The function that will be executed to received an array of objects that has a label and id to create list of suggestion /\n suggestionListCallback?: (value: string) => HvTagSuggestion[] \| null;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvTagsInputClasses;\n}\n\n/\n A tags input is a single or multiline control that allows the input of tags.\n /\nexport const HvTagsInput = (props: HvTagsInputProps) => {\n const {\n classes: classesProp,\n className,\n id,\n name,\n value: valueProp,\n defaultValue = [],\n readOnly = false,\n disabled = false,\n required = false,\n label: textAreaLabel,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n onChange,\n onAdd,\n onDelete,\n onBlur,\n onFocus,\n placeholder,\n hideCounter = false,\n middleCountLabel = \"/\",\n maxTagsQuantity,\n autoFocus = false,\n resizable = true,\n inputProps = {},\n countCharProps = {},\n multiline = false,\n status,\n statusMessage,\n validationMessages,\n commitTagOn = [\"Enter\"],\n commitOnBlur = false,\n suggestionListCallback,\n ...others\n } = useDefaultProps(\"HvTagsInput\", props);\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const elementId = useUniqueId(id, \"hvTagsInput\");\n\n const hasLabel = textAreaLabel != null;\n const hasDescription = description != null;\n\n const [value, setValue] = useControlled(valueProp, defaultValue);\n\n const [validationState, setValidationState] = useControlled(\n status,\n validationStates.standBy\n );\n const [validationMessage, setValidationMessage] = useControlled(\n statusMessage,\n \"\"\n );\n\n const [tagInput, setTagInput] = useState(\"\");\n const [tagCursorPos, setTagCursorPos] = useState(value.length);\n const [stateValid, setStateValid] = useState(true);\n\n const inputRef = useRef<any>();\n const containerRef = useRef<any>();\n const skipReset = useRef(false);\n const blurTimeout = useRef<any>();\n const materialInputRef = useRef<any>(null);\n\n const isTagSelected = tagCursorPos >= 0 && tagCursorPos < value.length;\n const hasCounter = maxTagsQuantity != null && !hideCounter;\n\n // suggestions related state\n const [suggestionValues, setSuggestionValues] = useState<\n HvTagSuggestion[] \| null\n >(null);\n\n const isStateInvalid = useMemo(() => {\n return hasCounter && value.length > maxTagsQuantity;\n }, [hasCounter, maxTagsQuantity, value.length]);\n\n const canShowSuggestions = suggestionListCallback != null;\n const hasSuggestions = !!suggestionValues;\n\n const errorMessages = useMemo(\n () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n [validationMessages]\n );\n\n const performValidation = useCallback(\n (currValue) => {\n if (\n maxTagsQuantity !== null &&\n maxTagsQuantity !== undefined &&\n currValue.length > maxTagsQuantity\n ) {\n setValidationState(validationStates.invalid);\n setValidationMessage(errorMessages.maxCharError);\n setStateValid(false);\n } else {\n setValidationState(validationStates.valid);\n setValidationMessage(\"\");\n setStateValid(true);\n }\n },\n [\n errorMessages.maxCharError,\n maxTagsQuantity,\n setValidationMessage,\n setValidationState,\n ]\n );\n\n /\n Deletes a Tag from the array of tags and sets the new position for the tag cursor.\n * Also executes the user provided onDelete and onChange events.\n \n @param {number} tagPos - the position at which to remove the tag\n * @param {Event} event - the event associated with the delete\n * @param {boolean} end - whether or not to set the cursor at the end of the array\n /\n const deleteTag = useCallback(\n (tagPos, event, end) => {\n const newTagsArr = [\n ...value.slice(0, tagPos),\n ...value.slice(tagPos + 1),\n ];\n setValue(newTagsArr);\n setTagCursorPos(\n end ? newTagsArr.length : tagCursorPos > 0 ? tagCursorPos - 1 : 0\n );\n inputRef.current?.focus();\n performValidation(newTagsArr);\n onDelete?.(event, value[tagPos], tagPos);\n onChange?.(event, newTagsArr);\n skipReset.current = true;\n },\n [onChange, onDelete, performValidation, setValue, tagCursorPos, value]\n );\n\n /\n Adds a Tag to the array of tags.\n * Also executes the user provided onAdd and onDelete events.\n \n @param {Event} event - whatever event triggered adding a tag\n * @param {string} tag - the string for the tag\n /\n const addTag = useCallback(\n (event, tag) => {\n event.preventDefault();\n if (tag !== \"\") {\n const newTag: HvTagProps = { label: tag, type: \"semantic\" };\n const newTagsArr = [...value, newTag];\n setValue(newTagsArr);\n performValidation(newTagsArr);\n onAdd?.(event, newTag, newTagsArr.length - 1);\n onChange?.(event, newTagsArr);\n }\n },\n [onAdd, onChange, performValidation, setValue, value]\n );\n\n const canShowError =\n (status !== undefined &&\n status === \"invalid\" &&\n statusMessage !== undefined) \|\|\n !stateValid;\n\n useEffect(() => {\n if (!multiline) {\n const element = containerRef?.current?.children[tagCursorPos];\n // this setTimeout is a workaround for Firefox not properly dealing\n // with setting the scrollLeft value.\n setTimeout(() => {\n const container = containerRef.current;\n if (isNil(container)) return;\n container.scrollLeft = element\n ? element.offsetLeft -\n container.getBoundingClientRect().width / 2 +\n element.getBoundingClientRect().width / 2\n : 0;\n }, 50);\n\n element?.focus();\n }\n }, [multiline, tagCursorPos]);\n\n useEffect(() => {\n if (!skipReset.current) {\n setTagInput(\"\");\n setTagCursorPos(value.length);\n }\n skipReset.current = false;\n }, [value]);\n\n const isMounted = useIsMounted();\n\n /\n Looks for the node that represent the input inside the material tree and focus it.\n /\n const focusInput = () => {\n materialInputRef.current.focus();\n };\n\n const getSuggestions = useCallback(\n (li) => {\n // TODO Replace with ref\n const listEl = document.getElementById(\n setId(elementId, \"suggestions-list\") \|\| \"\"\n );\n return li != null ? listEl?.getElementsByTagName(\"li\")?.[li] : listEl;\n },\n [elementId]\n );\n\n /\n Clears the suggestion array.\n /\n const suggestionClearHandler = useCallback(() => {\n if (isMounted.current) {\n setSuggestionValues(null);\n }\n }, [isMounted]);\n\n /\n Fills of the suggestion array.\n /\n const suggestionHandler = useCallback(\n (val) => {\n const suggestionsArray = suggestionListCallback?.(val);\n if (suggestionsArray?.[0]?.label) {\n setSuggestionValues(suggestionsArray);\n } else {\n suggestionClearHandler();\n }\n },\n [suggestionClearHandler, suggestionListCallback]\n );\n\n /\n Executes the user callback adds the selection to the state and clears the suggestions.\n /\n const suggestionSelectedHandler = (event, item) => {\n addTag(event, item.value \|\| item.label);\n\n // set the input value (only when value is uncontrolled)\n setTagInput(item.value \|\| item.label);\n\n focusInput();\n suggestionClearHandler();\n };\n\n /\n Handler for the `onKeyDown` event on the suggestions component\n /\n const onSuggestionKeyDown = (event) => {\n if (isKey(event, \"Esc\")) {\n suggestionClearHandler();\n focusInput();\n } else if (isKey(event, \"Tab\")) {\n suggestionClearHandler();\n }\n };\n\n /\n Handler for the `onChange` event on the tag input\n /\n const onChangeHandler = useCallback(\n (_, input) => {\n setTagInput(input);\n\n if (canShowSuggestions) {\n // an edge case might be a controlled input whose onChange callback\n // doesn't change the value (or sets another): the suggestionListCallback\n // callback will still receive the original rejected value.\n // a refactor is needed so the suggestionListCallback might be called only\n // when the input is uncontrolled, providing a way to externally control\n // the suggestion values.\n suggestionHandler(input);\n }\n },\n [canShowSuggestions, suggestionHandler]\n );\n\n /\n Handler for the `onKeyDown` event on the form element\n /\n const onInputKeyDownHandler = useCallback(\n (event) => {\n if (!canShowSuggestions && commitTagOn.includes(event.code)) {\n addTag(event, tagInput);\n }\n },\n [addTag, canShowSuggestions, commitTagOn, tagInput]\n );\n\n /\n Handler for the `onKeyDown` event on the list container.\n /\n const onKeyDownHandler = useCallback(\n (event) => {\n if (tagInput === \"\") {\n switch (event.code) {\n case \"ArrowLeft\":\n setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);\n break;\n case \"ArrowRight\":\n setTagCursorPos(\n tagCursorPos < value.length ? tagCursorPos + 1 : value.length\n );\n break;\n case \"Backspace\":\n if (isTagSelected) {\n deleteTag(tagCursorPos, event, false);\n } else {\n setTagCursorPos(value.length - 1);\n }\n break;\n case \"Delete\":\n if (isTagSelected) {\n deleteTag(tagCursorPos, event, false);\n }\n break;\n default:\n break;\n }\n } else {\n switch (event.code) {\n case \"ArrowDown\":\n getSuggestions(0)?.focus();\n break;\n default:\n break;\n }\n }\n },\n [\n deleteTag,\n getSuggestions,\n isTagSelected,\n tagCursorPos,\n tagInput,\n value.length,\n ]\n );\n\n /\n Handler for the `onDelete` event on the tag component\n /\n const onDeleteTagHandler = useCallback(\n (event, i) => {\n deleteTag(i, event, true);\n setValidationState(validationStates.standBy);\n },\n [deleteTag, setValidationState]\n );\n\n /\n Handler for the `onClick` event on the list container\n */\n const onContainerClickHandler = useCallback(() => {\n inputRef.current?.focus();\n clearTimeout(blurTimeout.current);\n setTagCursorPos(value.length);\n }, [value.length]);\n\n const onBlurHandler = (evt) => {\n blurTimeout.current = setTimeout(() => {\n if (commitOnBlur) {\n addTag(evt, tagInput);\n }\n onBlur?.(evt, tagInput);\n }, 250);\n };\n\n const onFocusHandler = (evt) => {\n clearTimeout(blurTimeout.current);\n onFocus?.(evt, tagInput);\n };\n\n return (\n <HvFormElement\n id={id}\n name={name}\n disabled={disabled}\n readOnly={readOnly}\n status={validationState}\n required={required}\n onBlur={onBlurHandler}\n onFocus={onFocusHandler}\n className={cx(\n classes.root,\n { [classes.disabled]: disabled, [classes.readOnly]: readOnly },\n className\n )}\n >\n {(hasLabel \|\| hasDescription) && (\n <div className={classes.labelContainer}>\n {hasLabel && (\n <HvLabel\n className={classes.label}\n id={setId(id, \"label\")}\n htmlFor={setId(elementId, \"input\")}\n label={textAreaLabel}\n />\n )}\n\n {hasDescription && (\n <HvInfoMessage\n className={classes.description}\n id={setId(elementId, \"description\")}\n >\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n\n {hasCounter && (\n <HvCharCounter\n id={setId(elementId, \"charCounter\")}\n className={classes.characterCounter}\n separator={middleCountLabel}\n currentCharQuantity={value.length}\n maxCharQuantity={maxTagsQuantity}\n {...countCharProps}\n />\n )}\n\n <HvListContainer\n className={cx(classes.tagsList, {\n [classes.error]: canShowError,\n [classes.resizable]: resizable && multiline,\n [classes.invalid]: isStateInvalid,\n [classes.singleLine]: !multiline,\n })}\n onKeyDown={onKeyDownHandler}\n onClick={onContainerClickHandler}\n ref={containerRef}\n >\n {value &&\n value.map((t, i) => {\n const tag =\n typeof t === \"string\"\n ? {\n label: t,\n type: \"semantic\",\n }\n : t;\n const { label, type, ...otherProps } = tag;\n return (\n <HvListItem\n key={`${tag.label}-${i}`}\n tabIndex={-1}\n className={cx({ [classes.singleLine]: !multiline })}\n classes={{\n gutters: classes.listItemGutters,\n root: classes.listItemRoot,\n }}\n id={setId(elementId, `tag-${i}`)}\n >\n <HvTag\n label={label}\n className={cx({ [classes.tagSelected]: i === tagCursorPos })}\n classes={{\n chipRoot: classes.chipRoot,\n }}\n type={type}\n {...(!(readOnly \|\| disabled \|\| type === \"categorical\") && {\n onDelete: (event) => onDeleteTagHandler(event, i),\n })}\n deleteButtonProps={{\n tabIndex: -1,\n }}\n {...otherProps}\n />\n </HvListItem>\n );\n })}\n {!(disabled \|\| readOnly) && (\n <HvListItem\n className={cx(\n {\n [classes.singleLine]: !multiline,\n [classes.tagInputRootEmpty]: value.length === 0,\n },\n !!isTagSelected &&\n css({\n [`& .${baseInputClasses.inputRoot}`]: {\n backgroundColor: theme.colors.atmo1,\n },\n })\n )}\n classes={{\n root: classes.tagInputContainerRoot,\n gutters: classes.listItemGutters,\n }}\n id={setId(elementId, `tag-${value.length}`)}\n >\n <HvInput\n value={tagInput}\n disableClear\n onChange={onChangeHandler}\n onKeyDown={onInputKeyDownHandler}\n placeholder={value.length === 0 ? placeholder : \"\"}\n autoFocus={autoFocus}\n className={cx({\n [classes.singleLine]: !multiline,\n })}\n classes={{\n root: classes.tagInputRoot,\n input: classes.input,\n inputBorderContainer: classes.tagInputBorderContainer,\n inputRootFocused: classes.tagInputRootFocused,\n }}\n disabled={disabled}\n readOnly={readOnly \|\| isTagSelected}\n inputProps={{\n ref: materialInputRef,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\":\n ariaDescribedBy != null\n ? ariaDescribedBy\n : (description && setId(elementId, \"description\")) \|\|\n undefined,\n\n ...inputProps,\n }}\n inputRef={inputRef}\n {...others}\n />\n </HvListItem>\n )}\n </HvListContainer>\n {canShowSuggestions && (\n <>\n {hasSuggestions && (\n <div role=\"presentation\" className={classes.inputExtension} />\n )}\n <HvSuggestions\n id={setId(elementId, \"suggestions\")}\n classes={{\n root: classes.suggestionsContainer,\n list: classes.suggestionList,\n }}\n expanded={hasSuggestions}\n anchorEl={containerRef?.current?.parentElement}\n onClose={suggestionClearHandler}\n onKeyDown={onSuggestionKeyDown}\n onSuggestionSelected={suggestionSelectedHandler}\n suggestionValues={suggestionValues}\n />\n </>\n )}\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableBorder\n className={classes.error}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n};\n"],"names":["HvTagsInput","props","classes","classesProp","className","id","name","value","valueProp","defaultValue","readOnly","disabled","required","label","textAreaLabel","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onAdd","onDelete","onBlur","onFocus","placeholder","hideCounter","middleCountLabel","maxTagsQuantity","autoFocus","resizable","inputProps","countCharProps","multiline","status","statusMessage","validationMessages","commitTagOn","commitOnBlur","suggestionListCallback","others","useDefaultProps","cx","css","useClasses","elementId","useUniqueId","hasLabel","hasDescription","setValue","useControlled","validationState","setValidationState","validationStates","standBy","validationMessage","setValidationMessage","tagInput","setTagInput","useState","tagCursorPos","setTagCursorPos","length","stateValid","setStateValid","inputRef","useRef","containerRef","skipReset","blurTimeout","materialInputRef","isTagSelected","hasCounter","suggestionValues","setSuggestionValues","isStateInvalid","useMemo","canShowSuggestions","hasSuggestions","errorMessages","DEFAULT_ERROR_MESSAGES","performValidation","useCallback","currValue","undefined","invalid","maxCharError","valid","deleteTag","tagPos","event","end","newTagsArr","slice","current","focus","addTag","tag","preventDefault","newTag","type","canShowError","useEffect","element","children","setTimeout","container","isNil","scrollLeft","offsetLeft","getBoundingClientRect","width","isMounted","useIsMounted","focusInput","getSuggestions","li","listEl","document","getElementById","setId","getElementsByTagName","suggestionClearHandler","suggestionHandler","val","suggestionsArray","suggestionSelectedHandler","item","onSuggestionKeyDown","isKey","onChangeHandler","_","input","onInputKeyDownHandler","includes","code","onKeyDownHandler","_a","onDeleteTagHandler","i","onContainerClickHandler","clearTimeout","onBlurHandler","evt","onFocusHandler","HvFormElement","root","labelContainer","_jsx","HvLabel","htmlFor","HvInfoMessage","HvCharCounter","characterCounter","separator","currentCharQuantity","maxCharQuantity","_jsxs","HvListContainer","tagsList","error","singleLine","onKeyDown","onClick","ref","map","t","otherProps","HvListItem","tabIndex","gutters","listItemGutters","listItemRoot","HvTag","tagSelected","chipRoot","deleteButtonProps","tagInputRootEmpty","baseInputClasses","inputRoot","backgroundColor","theme","colors","atmo1","tagInputContainerRoot","HvInput","disableClear","tagInputRoot","inputBorderContainer","tagInputBorderContainer","inputRootFocused","tagInputRootFocused","_Fragment","role","inputExtension","HvSuggestions","suggestionsContainer","list","suggestionList","expanded","anchorEl","parentElement","onClose","onSuggestionSelected","HvWarningText","disableBorder"],"mappings":"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"}

package/dist/cjs/components/VerticalNavigation/Actions/Action.cjs CHANGED Viewed

@@ -1,16 +1,15 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const clsx = require("clsx");
 const React = require("react");
 const keyboardUtils = require("../../../utils/keyboardUtils.cjs");
 const setId = require("../../../utils/setId.cjs");
 const VerticalNavigationContext = require("../VerticalNavigationContext.cjs");
 const Action_styles = require("./Action.styles.cjs");
-const actionClasses = require("./actionClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+const Typography = require("../../Typography/Typography.cjs");
 const HvVerticalNavigationAction = ({
   className,
-  classes,
+  classes: classesProp,
   id,
   label = "",
   icon,
@@ -20,17 +19,24 @@ const HvVerticalNavigationAction = ({
   const {
     isOpen
   } = React.useContext(VerticalNavigationContext.VerticalNavigationContext);
+  const {
+    classes,
+    cx
+  } = Action_styles.useClasses(classesProp);
   const handleKeyDown = React.useCallback((event) => {
     if (onClick == null || !keyboardUtils.isKey(event, "Enter") && !keyboardUtils.isKey(event, "Space")) {
       return;
     }
     onClick(event);
   }, [onClick]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Action_styles.StyledAction, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Typography.HvTypography, {
     id: setId.setId(id, "button"),
     component: "div",
     role: "button",
-    className: clsx.clsx(className, actionClasses.default.action, classes == null ? void 0 : classes.action, !icon && clsx.clsx(actionClasses.default.noIcon, classes == null ? void 0 : classes.noIcon), !isOpen && clsx.clsx(actionClasses.default.minimized, classes == null ? void 0 : classes.action)),
+    className: cx(classes.action, {
+      [classes.noIcon]: !icon,
+      [classes.minimized]: !isOpen
+    }, className),
     tabIndex: 0,
     onKeyDown: handleKeyDown,
     onClick,
@@ -38,5 +44,6 @@ const HvVerticalNavigationAction = ({
     children: [icon, isOpen && label]
   });
 };
+exports.actionClasses = Action_styles.staticClasses;
 exports.HvVerticalNavigationAction = HvVerticalNavigationAction;
 //# sourceMappingURL=Action.cjs.map

package/dist/cjs/components/VerticalNavigation/Actions/Action.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Action.cjs","sources":["../../../../../src/components/VerticalNavigation/Actions/Action.tsx"],"sourcesContent":["import { ~~clsx~~ } from \"~~clsx~~\";\n\nimport { ~~MouseEventHandler,~~ ~~useCallback,~~ ~~useContext~~ } from \"~~react~~\";\n\nimport { ~~isKey~~ } from \"@core/utils/~~keyboardUtils~~\";\nimport { ~~setId~~ } from \"@core/~~utils~~/~~setId~~\";\n\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { ~~StyledAction~~ } from \"./Action.styles\";\~~nimport~~ actionClasses, {\n HvVerticalNavigationActionClasses~~,\n}~~ ~~from~~ ~~\"./actionClasses\";\~~n\nexport interface HvVerticalNavigationActionProps {\n /*\n Class names to be applied.\n /\n className?: string;\n /\n A Jss Object used to override or extend the styles applied to the component.\n /\n classes?: HvVerticalNavigationActionClasses;\n /\n Id to be applied to the action.\n /\n id?: string;\n /\n Visual label.\n /\n label?: string;\n /\n Icon.\n /\n icon?: React.ReactNode;\n /\n Callback called when clicked.\n */\n onClick?: MouseEventHandler<HTMLElement>;\n}\n\nexport const HvVerticalNavigationAction = ({\n className,\n classes,\n id,\n label = \"\",\n icon,\n onClick,\n ...others\n}: HvVerticalNavigationActionProps) => {\n const { isOpen } = useContext(VerticalNavigationContext);\n\n const handleKeyDown = useCallback(\n (event) => {\n if (\n onClick == null \|\|\n (!isKey(event, \"Enter\") && !isKey(event, \"Space\"))\n ) {\n return;\n }\n\n onClick(event);\n },\n [onClick]\n );\n\n return (\n <~~StyledAction~~\n id={setId(id, \"button\")}\n component=\"div\"\n role=\"button\"\n className={~~clsx~~(\n ~~className,\n actionClasses~~.action,\n classes~~?.action,\n !icon && clsx(actionClasses~~.noIcon, ~~classes?.noIcon)~~,\n ~~!isOpen && clsx(actionClasses~~.minimized, ~~classes?.action)~~\n )}\n tabIndex={0}\n onKeyDown={handleKeyDown}\n onClick={onClick}\n {...others}\n >\n {icon}\n {isOpen && label}\n </~~StyledAction~~>\n );\n};\n"],"names":["HvVerticalNavigationAction","className","classes","id","label","icon","onClick","others","isOpen","useContext","VerticalNavigationContext","handleKeyDown","useCallback","event","isKey","~~StyledAction~~","setId","component","role","~~clsx","actionClasses","~~action","noIcon","minimized","tabIndex","onKeyDown","children"],"mappings":"~~;;;;;;;;;;AAwCO~~,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC;AAAAA,~~EACAC~~;AAAAA,EACAC,QAAQ;AAAA,EACRC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC4B,MAAM;AAC/B,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAWC,MAAAA,WAAWC,0BAAAA,yBAAyB;~~AAEjDC~~,QAAAA,gBAAgBC,kBACnBC,CAAU,UAAA;~~AAEPP~~,QAAAA,WAAW,QACV,~~CAACQ~~,cAAAA,MAAMD,OAAO,OAAO,KAAK,CAACC,cAAAA,MAAMD,OAAO,OAAO,GAChD;AACA;AAAA,IACF;~~AAEAP~~,~~YAAQO~~,KAAK;AAAA,EAAA,GAEf,~~CAACP~~,OAAO,CACV;AAEA,~~yCACGS~~,~~cAAAA~~,cAAY;AAAA,~~IACXZ~~,~~IAAIa~~,MAAAA,~~MAAMb~~,IAAI,QAAQ;AAAA,~~IACtBc~~,WAAU;AAAA,IACVC,MAAK;AAAA,~~IACLjB~~,~~WAAWkB~~,~~KAAAA~~,~~KACTlB~~,~~WACAmB~~,~~sBAAcC~~,~~QACdnB~~,~~mCAASmB~~,~~QACT,CAAChB,QAAQc,UAAKC,cAAAA,QAAcE,QAAQpB,mCAASoB,~~MAAM,~~GACnD~~,~~CAACd~~,~~UAAUW~~,~~UAAKC~~,~~cAAAA~~,~~QAAcG~~,~~WAAWrB~~,~~mCAASmB~~,~~MAAM~~,~~CAC1D~~;AAAA,~~IACAG~~,UAAU;AAAA,IACVC,~~WAAWd~~;AAAAA,~~IACXL~~;AAAAA,IAAiB,GACbC;AAAAA,IAAMmB,UAETrB,CAAAA,MACAG,UAAUJ,KAAK;AAAA,EAAA,CACJ;AAElB;;"}
1	+ {"version":3,"file":"Action.cjs","sources":["../../../../../src/components/VerticalNavigation/Actions/Action.tsx"],"sourcesContent":["import { MouseEventHandler, useCallback, useContext } from \"react\";\n\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { staticClasses, useClasses } from \"./Action.styles\";\n\nexport { staticClasses as actionClasses };\n\nexport type HvVerticalNavigationActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationActionProps {\n /*\n Class names to be applied.\n /\n className?: string;\n /\n A Jss Object used to override or extend the styles applied to the component.\n /\n classes?: HvVerticalNavigationActionClasses;\n /\n Id to be applied to the action.\n /\n id?: string;\n /\n Visual label.\n /\n label?: string;\n /\n Icon.\n /\n icon?: React.ReactNode;\n /\n Callback called when clicked.\n */\n onClick?: MouseEventHandler<HTMLElement>;\n}\n\nexport const HvVerticalNavigationAction = ({\n className,\n classes: classesProp,\n id,\n label = \"\",\n icon,\n onClick,\n ...others\n}: HvVerticalNavigationActionProps) => {\n const { isOpen } = useContext(VerticalNavigationContext);\n\n const { classes, cx } = useClasses(classesProp);\n\n const handleKeyDown = useCallback(\n (event) => {\n if (\n onClick == null \|\|\n (!isKey(event, \"Enter\") && !isKey(event, \"Space\"))\n ) {\n return;\n }\n\n onClick(event);\n },\n [onClick]\n );\n\n return (\n <HvTypography\n id={setId(id, \"button\")}\n component=\"div\"\n role=\"button\"\n className={cx(\n classes.action,\n {\n [classes.noIcon]: !icon,\n [classes.minimized]: !isOpen,\n },\n className\n )}\n tabIndex={0}\n onKeyDown={handleKeyDown}\n onClick={onClick}\n {...others}\n >\n {icon}\n {isOpen && label}\n </HvTypography>\n );\n};\n"],"names":["HvVerticalNavigationAction","className","classes","classesProp","id","label","icon","onClick","others","isOpen","useContext","VerticalNavigationContext","cx","useClasses","handleKeyDown","useCallback","event","isKey","HvTypography","setId","component","role","action","noIcon","minimized","tabIndex","onKeyDown","children"],"mappings":";;;;;;;;;AAyCO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC,QAAQ;AAAA,EACRC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC4B,MAAM;AAC/B,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAWC,MAAAA,WAAWC,0BAAAA,yBAAyB;AAEjD,QAAA;AAAA,IAAET;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,cAAAA,WAAWV,WAAW;AAExCW,QAAAA,gBAAgBC,kBACnBC,CAAU,UAAA;AAEPT,QAAAA,WAAW,QACV,CAACU,cAAAA,MAAMD,OAAO,OAAO,KAAK,CAACC,cAAAA,MAAMD,OAAO,OAAO,GAChD;AACA;AAAA,IACF;AAEAT,YAAQS,KAAK;AAAA,EAAA,GAEf,CAACT,OAAO,CACV;AAEA,yCACGW,WAAAA,cAAY;AAAA,IACXd,IAAIe,MAAAA,MAAMf,IAAI,QAAQ;AAAA,IACtBgB,WAAU;AAAA,IACVC,MAAK;AAAA,IACLpB,WAAWW,GACTV,QAAQoB,QACR;AAAA,MACE,CAACpB,QAAQqB,MAAM,GAAG,CAACjB;AAAAA,MACnB,CAACJ,QAAQsB,SAAS,GAAG,CAACf;AAAAA,OAExBR,SACF;AAAA,IACAwB,UAAU;AAAA,IACVC,WAAWZ;AAAAA,IACXP;AAAAA,IAAiB,GACbC;AAAAA,IAAMmB,UAETrB,CAAAA,MACAG,UAAUJ,KAAK;AAAA,EAAA,CACJ;AAElB;;;"}

package/dist/cjs/components/VerticalNavigation/Actions/Action.styles.cjs CHANGED Viewed

@@ -1,48 +1,45 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const focusUtils = require("../../../utils/focusUtils.cjs");
-const actionClasses = require("./actionClasses.cjs");
-const Typography = require("../../Typography/Typography.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const classes = require("../../../utils/classes.cjs");
 const hover = () => ({
   background: uikitStyles.theme.verticalNavigation.hoverColor
 });
-const StyledAction = /* @__PURE__ */ _styled__default.default(Typography.HvTypography, process.env.NODE_ENV === "production" ? {
-  target: "e13j4on70"
-} : {
-  target: "e13j4on70",
-  label: "StyledAction"
-})({
-  width: "100%",
-  display: "flex",
-  justifyContent: "flex-start",
-  alignItems: "center",
-  height: "32px",
-  color: uikitStyles.theme.colors.secondary,
-  // hover
-  "&:hover": hover(),
-  "&:focus": {
-    outline: "none",
-    ...hover()
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvVerticalNavigationAction", {
+  action: {
+    width: "100%",
+    display: "flex",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    height: "32px",
+    color: uikitStyles.theme.colors.secondary,
+    // hover
+    "&:hover": hover(),
+    "&:focus": {
+      outline: "none",
+      ...hover()
+    },
+    "&:focus-visible": {
+      ...focusUtils.outlineStyles
+    },
+    // cursor
+    cursor: "pointer",
+    "& *": {
+      cursor: "pointer"
+    }
   },
-  "&:focus-visible": {
-    ...focusUtils.outlineStyles
-  },
-  // cursor
-  cursor: "pointer",
-  "& *": {
-    cursor: "pointer"
-  },
-  [`& .${actionClasses.default.noIcon}`]: {
+  noIcon: {
     paddingLeft: uikitStyles.theme.space.xs
   },
-  [`&.${actionClasses.default.minimized}`]: {
+  minimized: {
     justifyContent: "center",
     paddingRight: 0
   }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL0FjdGlvbnMvQWN0aW9uLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVTRCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL0FjdGlvbnMvQWN0aW9uLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IEh2VHlwb2dyYXBoeSB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL1R5cG9ncmFwaHlcIjtcbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvZm9jdXNVdGlsc1wiO1xuaW1wb3J0IGFjdGlvbkNsYXNzZXMgZnJvbSBcIi4vYWN0aW9uQ2xhc3Nlc1wiO1xuXG5jb25zdCBob3ZlciA9ICgpID0+ICh7XG4gIGJhY2tncm91bmQ6IHRoZW1lLnZlcnRpY2FsTmF2aWdhdGlvbi5ob3ZlckNvbG9yLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRBY3Rpb24gPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGp1c3RpZnlDb250ZW50OiBcImZsZXgtc3RhcnRcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgaGVpZ2h0OiBcIjMycHhcIixcbiAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnksXG5cbiAgLy8gaG92ZXJcbiAgXCImOmhvdmVyXCI6IGhvdmVyKCksXG5cbiAgXCImOmZvY3VzXCI6IHtcbiAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgICAuLi5ob3ZlcigpLFxuICB9LFxuXG4gIFwiJjpmb2N1cy12aXNpYmxlXCI6IHtcbiAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICB9LFxuXG4gIC8vIGN1cnNvclxuICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICBcIiYgKlwiOiB7XG4gICAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgfSxcblxuICBbYCYgLiR7YWN0aW9uQ2xhc3Nlcy5ub0ljb259YF06IHtcbiAgICBwYWRkaW5nTGVmdDogdGhlbWUuc3BhY2UueHMsXG4gIH0sXG5cbiAgW2AmLiR7YWN0aW9uQ2xhc3Nlcy5taW5pbWl6ZWR9YF06IHtcbiAgICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcbiAgICBwYWRkaW5nUmlnaHQ6IDAsXG4gIH0sXG59KTtcbiJdfQ== */");
-exports.StyledAction = StyledAction;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=Action.styles.cjs.map

package/dist/cjs/components/VerticalNavigation/Actions/Action.styles.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Action.styles.cjs","sources":["../../../../../src/components/VerticalNavigation/Actions/Action.styles.tsx"],"sourcesContent":["import ~~styled from \"@emotion/styled\";\nimport~~ { theme } from \"@hitachivantara/uikit-styles\";\nimport { ~~HvTypography~~ } from \"@core/~~components~~/~~Typography~~\";\nimport { ~~outlineStyles~~ } from \"@core/utils/~~focusUtils~~\";\~~nimport actionClasses from \"./actionClasses\";\~~n\nconst hover = () => ({\n background: theme.verticalNavigation.hoverColor,\n});\n\nexport const ~~StyledAction~~ = ~~styled~~(~~HvTypography)(~~{\n width: \"100%\",\n display: \"flex\",\n justifyContent: \"flex-start\",\n alignItems: \"center\",\n height: \"32px\",\n color: theme.colors.secondary,\n\n // hover\n \"&:hover\": hover(),\n\n \"&:focus\": {\n outline: \"none\",\n ...hover(),\n },\n\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n\n // cursor\n cursor: \"pointer\",\n \"& *\": {\n cursor: \"pointer\",\n },\n\n ~~[`& .${actionClasses.~~noIcon~~}`]~~: {\n paddingLeft: theme.space.xs,\n },\n~~\n [`&.${actionClasses.~~minimized~~}`]~~: {\n justifyContent: \"center\",\n paddingRight: 0,\n },\n});\n"],"names":["hover","background","theme","verticalNavigation","hoverColor","~~StyledAction~~","~~HvTypography~~","~~process~~","~~env~~","~~NODE_ENV","target","label","~~width","display","justifyContent","alignItems","height","color","colors","secondary","outline","outlineStyles","cursor","~~actionClasses","~~noIcon","paddingLeft","space","xs","minimized","paddingRight"],"mappings":"~~;;;;;;;;;AAMA~~,MAAMA,QAAQA,OAAO;AAAA,EACnBC,YAAYC,YAAAA,MAAMC,mBAAmBC;AACvC;~~AAEO~~,~~MAAMC,eAAsBC,iCAAAA,QAAAA,WAAAA,cAAYC,QAAAC,IAAAC,aAAA,eAAA~~;AAAA,~~EAAAC,QAAA~~;~~AAAA~~,~~IAAA~~;~~AAAA~~,~~EAAAA~~,~~QAAA;AAAA~~,~~EAAAC~~,~~OAAA~~;AAAA,~~CAAA~~,~~EAAE~~;AAAA,~~EAC/CC~~,OAAO;AAAA,~~EACPC~~,SAAS;AAAA,~~EACTC~~,gBAAgB;AAAA,~~EAChBC~~,YAAY;AAAA,~~EACZC~~,QAAQ;AAAA,~~EACRC~~,~~OAAOf~~,YAAAA,~~MAAMgB~~,OAAOC;AAAAA;AAAAA,~~EAGpB~~,~~WAAWnB~~,MAAM;AAAA,~~EAEjB~~,WAAW;AAAA,~~IACToB~~,SAAS;AAAA,~~IACT~~,~~GAAGpB~~,MAAM;AAAA,~~EACX~~;AAAA,~~EAEA~~,mBAAmB;AAAA,~~IACjB~~,~~GAAGqB~~,WAAAA;AAAAA,~~EACL~~;AAAA;AAAA,~~EAGAC~~,QAAQ;AAAA,~~EACR~~,OAAO;AAAA,~~IACLA~~,QAAQ;AAAA,~~EACV~~;AAAA,~~EAEA~~,~~CAAE~~,~~MAAKC,sBAAcC,~~QAAQ~~,GAAG~~;AAAA,~~IAC9BC~~,~~aAAavB~~,YAAAA,~~MAAMwB~~,MAAMC;AAAAA,EAC3B;AAAA,~~EAEA~~,~~CAAE,KAAIJ,sBAAcK,~~WAAW~~,GAAG~~;AAAA,~~IAChCd~~,gBAAgB;AAAA,~~IAChBe~~,cAAc;AAAA,EAChB;AACF,~~GAACtB,QAAAC,IAAAC,aAAC,eAAA,KAAA,qzDAAA;;~~"}
1	+ {"version":3,"file":"Action.styles.cjs","sources":["../../../../../src/components/VerticalNavigation/Actions/Action.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nconst hover = () => ({\n background: theme.verticalNavigation.hoverColor,\n});\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvVerticalNavigationAction\",\n {\n action: {\n width: \"100%\",\n display: \"flex\",\n justifyContent: \"flex-start\",\n alignItems: \"center\",\n height: \"32px\",\n color: theme.colors.secondary,\n\n // hover\n \"&:hover\": hover(),\n\n \"&:focus\": {\n outline: \"none\",\n ...hover(),\n },\n\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n\n // cursor\n cursor: \"pointer\",\n \"& *\": {\n cursor: \"pointer\",\n },\n },\n noIcon: {\n paddingLeft: theme.space.xs,\n },\n minimized: {\n justifyContent: \"center\",\n paddingRight: 0,\n },\n }\n);\n"],"names":["hover","background","theme","verticalNavigation","hoverColor","staticClasses","useClasses","createClasses","action","width","display","justifyContent","alignItems","height","color","colors","secondary","outline","outlineStyles","cursor","noIcon","paddingLeft","space","xs","minimized","paddingRight"],"mappings":";;;;;AAIA,MAAMA,QAAQA,OAAO;AAAA,EACnBC,YAAYC,YAAAA,MAAMC,mBAAmBC;AACvC;AAEa,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAC3C,8BACA;AAAA,EACEC,QAAQ;AAAA,IACNC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,QAAQ;AAAA,IACRC,OAAOZ,YAAAA,MAAMa,OAAOC;AAAAA;AAAAA,IAGpB,WAAWhB,MAAM;AAAA,IAEjB,WAAW;AAAA,MACTiB,SAAS;AAAA,MACT,GAAGjB,MAAM;AAAA,IACX;AAAA,IAEA,mBAAmB;AAAA,MACjB,GAAGkB,WAAAA;AAAAA,IACL;AAAA;AAAA,IAGAC,QAAQ;AAAA,IACR,OAAO;AAAA,MACLA,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,QAAQ;AAAA,IACNC,aAAanB,YAAAA,MAAMoB,MAAMC;AAAAA,EAC3B;AAAA,EACAC,WAAW;AAAA,IACTb,gBAAgB;AAAA,IAChBc,cAAc;AAAA,EAChB;AACF,CACF;;;"}

package/dist/cjs/components/VerticalNavigation/Actions/Actions.cjs CHANGED Viewed

@@ -1,28 +1,33 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const clsx = require("clsx");
 const React = require("react");
 const VerticalNavigationContext = require("../VerticalNavigationContext.cjs");
 const Actions_styles = require("./Actions.styles.cjs");
-const actionsClasses = require("./actionsClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvVerticalNavigationActions = ({
   className,
-  classes,
+  classes: classesProp,
   id,
   children,
   ...others
 }) => {
+  const {
+    classes,
+    cx
+  } = Actions_styles.useClasses(classesProp);
   const {
     isOpen,
     useIcons
   } = React.useContext(VerticalNavigationContext.VerticalNavigationContext);
-  return /* @__PURE__ */ jsxRuntime.jsx(Actions_styles.StyledRoot, {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     id,
-    className: clsx.clsx(className, actionsClasses.default.root, classes == null ? void 0 : classes.root, !isOpen && !useIcons && clsx.clsx(actionsClasses.default.hide, classes == null ? void 0 : classes.hide)),
+    className: cx(classes.root, {
+      [classes.hide]: !isOpen && !useIcons
+    }, className),
     ...others,
     children
   });
 };
+exports.actionsClasses = Actions_styles.staticClasses;
 exports.HvVerticalNavigationActions = HvVerticalNavigationActions;
 //# sourceMappingURL=Actions.cjs.map

package/dist/cjs/components/VerticalNavigation/Actions/Actions.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Actions.cjs","sources":["../../../../../src/components/VerticalNavigation/Actions/Actions.tsx"],"sourcesContent":["import { ~~clsx~~ } from \"~~clsx~~\";\n\nimport { useContext } from \"react\";\n\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { ~~StyledRoot~~ } from \"./Actions.styles\";\~~nimport~~ actionsClasses, {\n ~~HvVerticalNavigationActionsClasses,\n}~~ ~~from~~ \~~"./actionsClasses\";\~~n\nexport interface HvVerticalNavigationActionsProps {\n /*\n Class names to be applied.\n /\n className?: string;\n /\n A Jss Object used to override or extend the styles applied to the component.\n /\n classes?: HvVerticalNavigationActionsClasses;\n /\n Id to be applied to the actions container.\n /\n id?: string;\n /\n Node to be rendered\n */\n children?: React.ReactNode;\n}\n\nexport const HvVerticalNavigationActions = ({\n className,\n classes,\n id,\n children,\n ...others\n}: HvVerticalNavigationActionsProps) => {\n const { isOpen, useIcons } = useContext(VerticalNavigationContext);\n\n return (\n <~~StyledRoot~~\n id={id}\n className={~~clsx~~(\n ~~className,\n actionsClasses~~.root,\n classes~~?.root,\n~~ !isOpen && !useIcons ~~&& clsx(actionsClasses.hide, classes?.hide)~~\n )}\n {...others}\n >\n {children}\n </~~StyledRoot~~>\n );\n};\n"],"names":["HvVerticalNavigationActions","className","classes","id","children","others","~~isOpen~~","~~useIcons~~","~~useContext~~","~~VerticalNavigationContext~~","~~StyledRoot~~","~~clsx~~","~~actionsClasses","~~root","hide"],"mappings":"~~;;;;;;;;AA6BO~~,MAAMA,8BAA8BA,CAAC;AAAA,EAC1CC;AAAAA,EACAC;AAAAA,~~EACAC~~;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC6B,MAAM;AAChC,QAAA;AAAA,~~IAAEC~~;AAAAA,IAAQC;AAAAA,EAAAA,IAAaC,MAAAA,WAAWC,0BAAAA,yBAAyB;AAEjE,~~wCACGC~~,~~eAAAA,YAAU~~;AAAA,~~IACTP~~;AAAAA,~~IACAF~~,~~WAAWU~~,~~KACTV~~,~~KAAAA~~,~~WACAW~~,~~eAAeC~~,~~QAAAA~~,~~MACfX~~,~~mCAASW~~,~~MACT~~,~~CAACP~~,UAAU,CAACC,~~YAAYI~~,~~KAAAA,KAAKC,eAAAA,QAAeE,MAAMZ,mCAASY,IAAI,CACjE~~;AAAA,IAAE,~~GACET~~;AAAAA,IAAMD;AAAAA,EAAAA,~~CAGA~~;~~AAEhB;;~~"}
1	+ {"version":3,"file":"Actions.cjs","sources":["../../../../../src/components/VerticalNavigation/Actions/Actions.tsx"],"sourcesContent":["import { ExtractNames } from \"@core/utils/classes\";\n\nimport { useContext } from \"react\";\n\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { staticClasses, useClasses } from \"./Actions.styles\";\n\nexport { staticClasses as actionsClasses };\n\nexport type HvVerticalNavigationActionsClasses = ExtractNames<\n typeof useClasses\n>;\n\nexport interface HvVerticalNavigationActionsProps {\n /*\n Class names to be applied.\n /\n className?: string;\n /\n A Jss Object used to override or extend the styles applied to the component.\n /\n classes?: HvVerticalNavigationActionsClasses;\n /\n Id to be applied to the actions container.\n /\n id?: string;\n /\n Node to be rendered\n */\n children?: React.ReactNode;\n}\n\nexport const HvVerticalNavigationActions = ({\n className,\n classes: classesProp,\n id,\n children,\n ...others\n}: HvVerticalNavigationActionsProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const { isOpen, useIcons } = useContext(VerticalNavigationContext);\n\n return (\n <div\n id={id}\n className={cx(\n classes.root,\n {\n [classes.hide]: !isOpen && !useIcons,\n },\n className\n )}\n {...others}\n >\n {children}\n </div>\n );\n};\n"],"names":["HvVerticalNavigationActions","className","classes","classesProp","id","children","others","cx","useClasses","isOpen","useIcons","useContext","VerticalNavigationContext","root","hide"],"mappings":";;;;;;AAgCO,MAAMA,8BAA8BA,CAAC;AAAA,EAC1CC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC6B,MAAM;AAChC,QAAA;AAAA,IAAEJ;AAAAA,IAASK;AAAAA,EAAAA,IAAOC,eAAAA,WAAWL,WAAW;AAExC,QAAA;AAAA,IAAEM;AAAAA,IAAQC;AAAAA,EAAAA,IAAaC,MAAAA,WAAWC,0BAAAA,yBAAyB;AAEjE,wCACE,OAAA;AAAA,IACER;AAAAA,IACAH,WAAWM,GACTL,QAAQW,MACR;AAAA,MACE,CAACX,QAAQY,IAAI,GAAG,CAACL,UAAU,CAACC;AAAAA,OAE9BT,SACF;AAAA,IAAE,GACEK;AAAAA,IAAMD;AAAAA,EAAAA,CAGP;AAET;;;"}

package/dist/cjs/components/VerticalNavigation/Actions/Actions.styles.cjs CHANGED Viewed

@@ -1,26 +1,23 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
+const classes = require("../../../utils/classes.cjs");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const actionsClasses = require("./actionsClasses.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const StyledRoot = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "e11q2fjk0"
-} : {
-  target: "e11q2fjk0",
-  label: "StyledRoot"
-})({
-  display: "block",
-  background: uikitStyles.theme.colors.atmo1,
-  marginTop: uikitStyles.theme.verticalNavigation.actionsMarginTop,
-  "& :not(:last-child)": {
-    // theme.verticalNavigation.actionsMarginTop,
-    marginBottom: "8px"
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvVerticalNavigationActions", {
+  root: {
+    display: "block",
+    background: uikitStyles.theme.colors.atmo1,
+    marginTop: uikitStyles.theme.verticalNavigation.actionsMarginTop,
+    "& :not(:last-child)": {
+      marginBottom: "8px"
+    }
   },
-  [`&.${actionsClasses.default.hide}`]: {
+  hide: {
     display: "none"
   }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL0FjdGlvbnMvQWN0aW9ucy5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU0wQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1ZlcnRpY2FsTmF2aWdhdGlvbi9BY3Rpb25zL0FjdGlvbnMuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5cbmltcG9ydCBhY3Rpb25zQ2xhc3NlcyBmcm9tIFwiLi9hY3Rpb25zQ2xhc3Nlc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiYmxvY2tcIixcbiAgYmFja2dyb3VuZDogdGhlbWUuY29sb3JzLmF0bW8xLFxuICBtYXJnaW5Ub3A6IHRoZW1lLnZlcnRpY2FsTmF2aWdhdGlvbi5hY3Rpb25zTWFyZ2luVG9wLFxuXG4gIFwiJiA6bm90KDpsYXN0LWNoaWxkKVwiOiB7XG4gICAgLy8gdGhlbWUudmVydGljYWxOYXZpZ2F0aW9uLmFjdGlvbnNNYXJnaW5Ub3AsXG4gICAgbWFyZ2luQm90dG9tOiBcIjhweFwiLFxuICB9LFxuXG4gIFtgJi4ke2FjdGlvbnNDbGFzc2VzLmhpZGV9YF06IHtcbiAgICBkaXNwbGF5OiBcIm5vbmVcIixcbiAgfSxcbn0pO1xuIl19 */");
-exports.StyledRoot = StyledRoot;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=Actions.styles.cjs.map

package/dist/cjs/components/VerticalNavigation/Actions/Actions.styles.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Actions.styles.cjs","sources":["../../../../../src/components/VerticalNavigation/Actions/Actions.styles.tsx"],"sourcesContent":["import ~~styled~~ from \"@~~emotion~~/~~styled~~\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\~~nimport~~ ~~actionsClasses~~ ~~from~~ ~~\"./actionsClasses\";\n\nexport~~ ~~const~~ ~~StyledRoot~~ = ~~styled~~(\"~~div~~\")({\n display: \"block\",\n background: theme.colors.atmo1,\n marginTop: theme.verticalNavigation.actionsMarginTop,\n\n \"& :not(:last-child)\": {\n ~~// theme.verticalNavigation.actionsMarginTop,\n~~ marginBottom: \"8px\",\n },\n\n ~~[`&.${actionsClasses.~~hide~~}`]~~: {\n display: \"none\",\n },\n});\n"],"names":["~~StyledRoot~~","~~_styled~~","~~process~~","~~env~~","~~NODE_ENV","target","label","~~display","background","theme","colors","atmo1","marginTop","verticalNavigation","actionsMarginTop","marginBottom","~~actionsClasses","~~hide"],"mappings":"~~;;;;;;;AAMO~~,~~MAAMA,aAAoBC,iCAAA,QAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA~~;AAAA,~~EAAAC,QAAA~~;~~AAAA~~,~~IAAA~~;~~AAAA~~,~~EAAAA~~,~~QAAA;AAAA~~,~~EAAAC,OAAA~~;AAAA,~~CAAA~~,~~EAAE~~;AAAA,~~EACtCC~~,SAAS;AAAA,~~EACTC~~,YAAYC,YAAAA,MAAMC,OAAOC;AAAAA,~~EACzBC~~,WAAWH,YAAAA,MAAMI,mBAAmBC;AAAAA,~~EAEpC~~,uBAAuB;AAAA~~;AAAA~~,~~IAErBC~~,cAAc;AAAA,~~EAChB~~;AAAA,~~EAEA~~,~~CAAE~~,~~KAAIC,uBAAeC,~~MAAM~~,GAAG~~;AAAA,~~IAC5BV~~,SAAS;AAAA,EACX;AACF,~~GAACL,QAAAC,IAAAC,aAAC,eAAA,KAAA,iqCAAA;;~~"}
1	+ {"version":3,"file":"Actions.styles.cjs","sources":["../../../../../src/components/VerticalNavigation/Actions/Actions.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvVerticalNavigationActions\",\n {\n root: {\n display: \"block\",\n background: theme.colors.atmo1,\n marginTop: theme.verticalNavigation.actionsMarginTop,\n\n \"& :not(:last-child)\": {\n marginBottom: \"8px\",\n },\n },\n hide: {\n display: \"none\",\n },\n }\n);\n"],"names":["staticClasses","useClasses","createClasses","root","display","background","theme","colors","atmo1","marginTop","verticalNavigation","actionsMarginTop","marginBottom","hide"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAC3C,+BACA;AAAA,EACEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,YAAYC,YAAAA,MAAMC,OAAOC;AAAAA,IACzBC,WAAWH,YAAAA,MAAMI,mBAAmBC;AAAAA,IAEpC,uBAAuB;AAAA,MACrBC,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJT,SAAS;AAAA,EACX;AACF,CACF;;;"}

package/dist/cjs/components/VerticalNavigation/Header/Header.cjs CHANGED Viewed

@@ -2,10 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const React = require("react");
-const clsx = require("clsx");
 const VerticalNavigationContext = require("../VerticalNavigationContext.cjs");
 const Header_styles = require("./Header.styles.cjs");
-const headerClasses = require("./headerClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Button = require("../../Button/Button.cjs");
 const Typography = require("../../Typography/Typography.cjs");
@@ -16,7 +14,7 @@ const HvVerticalNavigationHeader = ({
   collapseButtonProps,
   backButtonProps,
   className,
-  classes,
+  classes: classesProp,
   onCollapseButtonClick,
   ...others
 }) => {
@@ -28,14 +26,20 @@ const HvVerticalNavigationHeader = ({
     navigateToParentHandler,
     parentItem
   } = React.useContext(VerticalNavigationContext.VerticalNavigationContext);
+  const {
+    classes,
+    cx
+  } = Header_styles.useClasses(classesProp);
   openIcon = !useIcons ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Menu, {}) : openIcon;
   const backButtonClickHandler = () => {
     if (navigateToParentHandler)
       navigateToParentHandler();
   };
   const shouldShowTitle = React.useMemo(() => !slider || slider && !Array.isArray(parentItem), [parentItem, slider]);
-  return shouldShowTitle ? /* @__PURE__ */ jsxRuntime.jsxs(Header_styles.StyledHeader, {
-    className: clsx.clsx(className, headerClasses.default.root, classes == null ? void 0 : classes.root, !isOpen && clsx.clsx(headerClasses.default.minimized, classes == null ? void 0 : classes.minimized)),
+  return shouldShowTitle ? /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    className: cx(classes.root, {
+      [classes.minimized]: !isOpen
+    }, className),
     ...others,
     children: [isOpen && headerTitle && slider && /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
       icon: true,
@@ -48,16 +52,18 @@ const HvVerticalNavigationHeader = ({
     }), isOpen && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
       variant: slider ? "label" : "title3",
       children: headerTitle && slider ? headerTitle : title
-    }), onCollapseButtonClick && /* @__PURE__ */ jsxRuntime.jsx(Header_styles.StyledCollapseButton, {
+    }), onCollapseButtonClick && /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
       icon: true,
       onClick: onCollapseButtonClick,
+      className: classes.collapseButton,
       classes: {
-        root: isOpen ? "" : headerClasses.default.minimized
+        root: isOpen ? "" : classes.minimized
       },
       ...collapseButtonProps,
       children: isOpen ? closeIcon : openIcon
     })]
   }) : null;
 };
+exports.verticalNavigationHeaderClasses = Header_styles.staticClasses;
 exports.HvVerticalNavigationHeader = HvVerticalNavigationHeader;
 //# sourceMappingURL=Header.cjs.map