npm - @hitachivantara/uikit-react-core - Versions diffs - 5.86.0 → 5.87.1 - Mend

@hitachivantara/uikit-react-core 5.86.0 → 5.87.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 (32) hide show

package/dist/cjs/ColorPicker/Fields/Fields.styles.cjs CHANGED Viewed

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
 const name = "HvColorPicker-Fields";
 const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
   fields: {
@@ -11,7 +12,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
   },
   single: {
     maxWidth: "50px",
-    paddingLeft: "4px",
+    paddingLeft: uikitStyles.theme.space.xxs,
     "& input": {
       marginLeft: 5,
       marginRight: 5
@@ -22,7 +23,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
   },
   double: {
     maxWidth: "82px",
-    paddingRight: "4px",
+    paddingRight: uikitStyles.theme.space.xxs,
     "& input": {
       textTransform: "uppercase",
       marginLeft: 5,

package/dist/cjs/ColorPicker/PresetColors/PresetColors.styles.cjs CHANGED Viewed

@@ -20,7 +20,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
   swatchWrap: {
     width: "32px",
     height: "32px",
-    margin: "4px",
+    margin: uikitStyles.theme.space.xxs,
     "& > span > div": {
       borderRadius: uikitStyles.theme.radii.base
     }

package/dist/cjs/ColorPicker/SavedColors/SavedColors.styles.cjs CHANGED Viewed

@@ -5,7 +5,7 @@ const uikitStyles = require("@hitachivantara/uikit-styles");
 const name = "HvColorPicker-SavedColors";
 const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
   addButton: {
-    margin: "4px",
+    margin: uikitStyles.theme.space.xxs,
     width: "32px",
     height: "32px"
   },
@@ -22,7 +22,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
   swatchWrap: {
     width: "32px",
     height: "32px",
-    margin: "4px",
+    margin: uikitStyles.theme.space.xxs,
     "& > span > div": {
       borderRadius: uikitStyles.theme.radii.base
     }

package/dist/cjs/EmptyState/EmptyState.styles.cjs CHANGED Viewed

@@ -18,7 +18,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvEmptyStat
   },
   iconContainer: {},
   titleContainer: {
-    marginTop: "4px",
+    marginTop: uikitStyles.theme.space.xxs,
     marginBottom: uikitStyles.theme.space.sm
   },
   textContainer: {

package/dist/cjs/FilterGroup/RightPanel/RightPanel.cjs CHANGED Viewed

@@ -32,8 +32,8 @@ const HvFilterGroupRightPanel = ({
       (option) => option.name.toLowerCase().includes(searchStr.toLowerCase())
     );
     return {
-      all: filteredOptions.map((option) => option.id) || [],
-      enabled: filteredOptions.filter((option) => !option.disabled).map((option) => option.id) || []
+      all: filteredOptions?.map((option) => option.id) || [],
+      enabled: filteredOptions?.filter((option) => !option.disabled)?.map((option) => option.id) || []
     };
   }, [filterOptions, activeGroup, searchStr]);
   const activeFilterValues = React.useMemo(

package/dist/cjs/Tag/Tag.styles.cjs CHANGED Viewed

@@ -34,7 +34,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTag", {
     }
   },
   label: {
-    padding: uikitStyles.theme.spacing(0, "4px"),
+    padding: uikitStyles.theme.spacing(0, "xxs"),
     color: "inherit"
   },
   deleteIcon: {

package/dist/esm/ActionBar/ActionBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ActionBar.js","sources":["../../../src/ActionBar/ActionBar.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./ActionBar.styles\";\n\nexport { staticClasses as actionBarClasses };\n\nexport type HvActionBarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionBarProps extends HvBaseProps {\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvActionBarClasses;\n}\n\nexport const HvActionBar = forwardRef<\n React.ComponentRef<\"div\">,\n HvActionBarProps\n>(function HvActionBar(props, ref) {\n const {\n classes: classesProp,\n className,\n children,\n ...others\n } = useDefaultProps(\"HvActionBar\", props);\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <div ref={ref} className={cx(classes.root, className)} {...others}>\n {children}\n </div>\n );\n});\n"],"names":["HvActionBar"],"mappings":";;;;;~~AAkBO~~,MAAM,cAAc,WAGzB,SAASA,aAAY,OAAO,KAAK;AAC3B,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAG5C,SAAA,oBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACxD,SACH,CAAA;AAEJ,CAAC;"}
1	+ {"version":3,"file":"ActionBar.js","sources":["../../../src/ActionBar/ActionBar.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./ActionBar.styles\";\n\nexport { staticClasses as actionBarClasses };\n\nexport type HvActionBarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionBarProps extends HvBaseProps {\n /** A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvActionBarClasses;\n}\n\n/\n The Action Bar accommodates all the actions related to a specific task on a screen or pattern.\n */\nexport const HvActionBar = forwardRef<\n React.ComponentRef<\"div\">,\n HvActionBarProps\n>(function HvActionBar(props, ref) {\n const {\n classes: classesProp,\n className,\n children,\n ...others\n } = useDefaultProps(\"HvActionBar\", props);\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <div ref={ref} className={cx(classes.root, className)} {...others}>\n {children}\n </div>\n );\n});\n"],"names":["HvActionBar"],"mappings":";;;;;AAqBO,MAAM,cAAc,WAGzB,SAASA,aAAY,OAAO,KAAK;AAC3B,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAG5C,SAAA,oBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACxD,SACH,CAAA;AAEJ,CAAC;"}

package/dist/esm/CheckBox/CheckBox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckBox.js","sources":["../../../src/CheckBox/CheckBox.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseCheckBox, HvBaseCheckBoxProps } from \"../BaseCheckBox\";\nimport {\n HvFormElement,\n HvFormStatus,\n HvLabel,\n HvLabelProps,\n HvWarningText,\n isInvalid,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./CheckBox.styles\";\n\nexport { staticClasses as checkBoxClasses };\n\nexport type HvCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCheckBoxProps extends Omit<HvBaseCheckBoxProps, \"classes\"> {\n /*\n The label of the form element.\n \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 /\n Properties passed on to the label element.\n /\n labelProps?: HvLabelProps;\n /\n The status of the form element.\n \n Valid is correct, invalid is incorrect and standBy means no validations have run.\n \n When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to the state.\n /\n status?: HvFormStatus;\n /\n The error message to show when the validation status is \"invalid\".\n \n Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n /\n statusMessage?: React.ReactNode;\n /\n A Jss Object used to override or extend the styles applied to the checkbox.\n /\n classes?: HvCheckBoxClasses;\n}\n\n/\n A Checkbox is a mechanism that allows the user to select one or more options.\n \n Usually used in a Checkbox Group to present the user with a range of options from\n * which the user <b>may select any number of options</b> to complete their task.\n \n It can also be used individually to represent the toggle of a single option, when\n * the Toggle Switch and Toggle Button aren't more appropriate.\n */\nexport const HvCheckBox = forwardRef<HTMLButtonElement, HvCheckBoxProps>(\n function HvCheckBox(props, ref) {\n const {\n id,\n classes: classesProp,\n className,\n name,\n checked,\n status,\n indeterminate,\n statusMessage,\n label,\n labelProps,\n inputProps,\n value = \"on\",\n required,\n readOnly,\n disabled,\n semantic,\n defaultChecked,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-errormessage\": ariaErrorMessage,\n onChange,\n onFocusVisible,\n onBlur,\n ...others\n } = useDefaultProps(\"HvCheckBox\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const elementId = useUniqueId(id);\n\n const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n const [validationState, setValidationState] = useControlled<HvFormStatus>(\n status,\n \"standBy\",\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const [isChecked, setIsChecked] = useControlled(\n checked,\n Boolean(defaultChecked),\n );\n\n const [isIndeterminate, setIsIndeterminate] = useControlled(\n checked !== undefined ? indeterminate : undefined,\n Boolean(indeterminate),\n );\n\n const isStateInvalid = isInvalid(validationState);\n\n const onChangeCallback = useCallback<\n NonNullable<HvBaseCheckBoxProps[\"onChange\"]>\n >(\n (event, newChecked) => {\n setIsChecked(() => {\n // This will only run if uncontrolled\n setIsIndeterminate(false);\n\n if (required && !newChecked) {\n setValidationState(\"invalid\");\n } else {\n setValidationState(\"valid\");\n }\n\n return newChecked;\n });\n\n onChange?.(event, newChecked, value);\n },\n [\n onChange,\n required,\n setIsChecked,\n setIsIndeterminate,\n setValidationState,\n value,\n ],\n );\n\n const onFocusVisibleCallback: HvBaseCheckBoxProps[\"onBlur\"] = (event) => {\n setFocusVisible(true);\n onFocusVisible?.(event);\n };\n\n const onBlurCallback: HvBaseCheckBoxProps[\"onBlur\"] = (event) => {\n setFocusVisible(false);\n onBlur?.(event);\n };\n\n // The error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) \|\|\n (status === undefined && required));\n\n const hasLabel = label != null;\n\n let errorMessageId;\n if (isStateInvalid) {\n errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n }\n\n const checkbox = (\n <HvBaseCheckBox\n ref={ref}\n id={hasLabel ? setId(elementId, \"input\") : setId(id, \"input\")}\n name={name}\n className={cx(classes.checkbox, {\n [classes.invalidCheckbox]: isStateInvalid,\n [classes.checked]: isChecked,\n [classes.indeterminate]: isIndeterminate,\n [classes.semantic]: semantic,\n })}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n onChange={onChangeCallback}\n value={value}\n checked={isChecked}\n indeterminate={isIndeterminate}\n semantic={semantic}\n inputProps={{\n \"aria-invalid\": isStateInvalid ? true : undefined,\n \"aria-errormessage\": errorMessageId,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n ...inputProps,\n }}\n onFocusVisible={onFocusVisibleCallback}\n onBlur={onBlurCallback}\n {...others}\n />\n );\n\n return (\n <HvFormElement\n id={id}\n name={name}\n status={validationState}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n className={cx(\n classes.root,\n { [classes.focusVisible]: !!(focusVisible && label) },\n className,\n )}\n >\n {hasLabel ? (\n <div\n className={cx(classes.container, {\n [classes.disabled]: disabled,\n [classes.invalidContainer]: isStateInvalid,\n })}\n >\n {checkbox}\n <HvLabel\n id={setId(elementId, \"label\")}\n htmlFor={setId(elementId, \"input\")}\n label={label}\n className={classes.label}\n {...labelProps}\n />\n </div>\n ) : (\n checkbox\n )}\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableAdornment={!hasLabel}\n hideText={!hasLabel}\n disableBorder\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n },\n);\n"],"names":["HvCheckBox"],"mappings":"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"}
1	+ {"version":3,"file":"CheckBox.js","sources":["../../../src/CheckBox/CheckBox.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseCheckBox, HvBaseCheckBoxProps } from \"../BaseCheckBox\";\nimport {\n HvFormElement,\n HvFormStatus,\n HvLabel,\n HvLabelProps,\n HvWarningText,\n isInvalid,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./CheckBox.styles\";\n\nexport { staticClasses as checkBoxClasses };\n\nexport type HvCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCheckBoxProps extends Omit<HvBaseCheckBoxProps, \"classes\"> {\n /*\n The label of the form element.\n \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 /\n Properties passed on to the label element.\n /\n labelProps?: HvLabelProps;\n /\n The status of the form element.\n \n Valid is correct, invalid is incorrect and standBy means no validations have run.\n \n When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to the state.\n /\n status?: HvFormStatus;\n /\n The error message to show when the validation status is \"invalid\".\n \n Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n /\n statusMessage?: React.ReactNode;\n /\n A Jss Object used to override or extend the styles applied to the checkbox.\n /\n classes?: HvCheckBoxClasses;\n}\n\n/\n A Checkbox is a mechanism that allows the user to select one or more options.\n \n Usually used in a Checkbox Group to present the user with a range of options from\n * which the user may select any number of options to complete their task.\n \n It can also be used individually to represent the toggle of a single option, when\n * the Toggle Switch and Toggle Button aren't more appropriate.\n */\nexport const HvCheckBox = forwardRef<HTMLButtonElement, HvCheckBoxProps>(\n function HvCheckBox(props, ref) {\n const {\n id,\n classes: classesProp,\n className,\n name,\n checked,\n status,\n indeterminate,\n statusMessage,\n label,\n labelProps,\n inputProps,\n value = \"on\",\n required,\n readOnly,\n disabled,\n semantic,\n defaultChecked,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-errormessage\": ariaErrorMessage,\n onChange,\n onFocusVisible,\n onBlur,\n ...others\n } = useDefaultProps(\"HvCheckBox\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const elementId = useUniqueId(id);\n\n const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n const [validationState, setValidationState] = useControlled<HvFormStatus>(\n status,\n \"standBy\",\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const [isChecked, setIsChecked] = useControlled(\n checked,\n Boolean(defaultChecked),\n );\n\n const [isIndeterminate, setIsIndeterminate] = useControlled(\n checked !== undefined ? indeterminate : undefined,\n Boolean(indeterminate),\n );\n\n const isStateInvalid = isInvalid(validationState);\n\n const onChangeCallback = useCallback<\n NonNullable<HvBaseCheckBoxProps[\"onChange\"]>\n >(\n (event, newChecked) => {\n setIsChecked(() => {\n // This will only run if uncontrolled\n setIsIndeterminate(false);\n\n if (required && !newChecked) {\n setValidationState(\"invalid\");\n } else {\n setValidationState(\"valid\");\n }\n\n return newChecked;\n });\n\n onChange?.(event, newChecked, value);\n },\n [\n onChange,\n required,\n setIsChecked,\n setIsIndeterminate,\n setValidationState,\n value,\n ],\n );\n\n const onFocusVisibleCallback: HvBaseCheckBoxProps[\"onBlur\"] = (event) => {\n setFocusVisible(true);\n onFocusVisible?.(event);\n };\n\n const onBlurCallback: HvBaseCheckBoxProps[\"onBlur\"] = (event) => {\n setFocusVisible(false);\n onBlur?.(event);\n };\n\n // The error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) \|\|\n (status === undefined && required));\n\n const hasLabel = label != null;\n\n let errorMessageId;\n if (isStateInvalid) {\n errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n }\n\n const checkbox = (\n <HvBaseCheckBox\n ref={ref}\n id={hasLabel ? setId(elementId, \"input\") : setId(id, \"input\")}\n name={name}\n className={cx(classes.checkbox, {\n [classes.invalidCheckbox]: isStateInvalid,\n [classes.checked]: isChecked,\n [classes.indeterminate]: isIndeterminate,\n [classes.semantic]: semantic,\n })}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n onChange={onChangeCallback}\n value={value}\n checked={isChecked}\n indeterminate={isIndeterminate}\n semantic={semantic}\n inputProps={{\n \"aria-invalid\": isStateInvalid ? true : undefined,\n \"aria-errormessage\": errorMessageId,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n ...inputProps,\n }}\n onFocusVisible={onFocusVisibleCallback}\n onBlur={onBlurCallback}\n {...others}\n />\n );\n\n return (\n <HvFormElement\n id={id}\n name={name}\n status={validationState}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n className={cx(\n classes.root,\n { [classes.focusVisible]: !!(focusVisible && label) },\n className,\n )}\n >\n {hasLabel ? (\n <div\n className={cx(classes.container, {\n [classes.disabled]: disabled,\n [classes.invalidContainer]: isStateInvalid,\n })}\n >\n {checkbox}\n <HvLabel\n id={setId(elementId, \"label\")}\n htmlFor={setId(elementId, \"input\")}\n label={label}\n className={classes.label}\n {...labelProps}\n />\n </div>\n ) : (\n checkbox\n )}\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableAdornment={!hasLabel}\n hideText={!hasLabel}\n disableBorder\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n },\n);\n"],"names":["HvCheckBox"],"mappings":"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"}

package/dist/esm/ColorPicker/Fields/Fields.styles.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
+import { theme } from "@hitachivantara/uikit-styles";
 const name = "HvColorPicker-Fields";
 const { staticClasses, useClasses } = createClasses(name, {
   fields: {
@@ -9,7 +10,7 @@ const { staticClasses, useClasses } = createClasses(name, {
   },
   single: {
     maxWidth: "50px",
-    paddingLeft: "4px",
+    paddingLeft: theme.space.xxs,
     "& input": {
       marginLeft: 5,
       marginRight: 5
@@ -20,7 +21,7 @@ const { staticClasses, useClasses } = createClasses(name, {
   },
   double: {
     maxWidth: "82px",
-    paddingRight: "4px",
+    paddingRight: theme.space.xxs,
     "& input": {
       textTransform: "uppercase",
       marginLeft: 5,

package/dist/esm/ColorPicker/Fields/Fields.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Fields.styles.js","sources":["../../../../src/ColorPicker/Fields/Fields.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nconst name = \"HvColorPicker-Fields\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n fields: {\n width: \"100%\",\n display: \"flex\",\n paddingTop: \"18px\",\n marginRight: \"0px\",\n },\n single: {\n maxWidth: \"50px\",\n paddingLeft: ~~\"4px\"~~,\n \"& input\": {\n marginLeft: 5,\n marginRight: 5,\n },\n \"& label\": {\n paddingLeft: 5,\n },\n },\n double: {\n maxWidth: \"82px\",\n paddingRight: ~~\"4px\"~~,\n \"& input\": {\n textTransform: \"uppercase\",\n marginLeft: 5,\n marginRight: 5,\n },\n \"& label\": {\n paddingLeft: 5,\n },\n },\n});\n"],"names":[],"mappings":"~~;AAEA~~,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,aAAa;AAAA,EACf;AAAA,EACA,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,~~IACb~~,WAAW;AAAA,MACT,YAAY;AAAA,MACZ,aAAa;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EAEjB;AAAA,EACA,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,cAAc;AAAA,~~IACd~~,WAAW;AAAA,MACT,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,aAAa;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,CAAC;"}
1	+ {"version":3,"file":"Fields.styles.js","sources":["../../../../src/ColorPicker/Fields/Fields.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst name = \"HvColorPicker-Fields\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n fields: {\n width: \"100%\",\n display: \"flex\",\n paddingTop: \"18px\",\n marginRight: \"0px\",\n },\n single: {\n maxWidth: \"50px\",\n paddingLeft: theme.space.xxs,\n \"& input\": {\n marginLeft: 5,\n marginRight: 5,\n },\n \"& label\": {\n paddingLeft: 5,\n },\n },\n double: {\n maxWidth: \"82px\",\n paddingRight: theme.space.xxs,\n \"& input\": {\n textTransform: \"uppercase\",\n marginLeft: 5,\n marginRight: 5,\n },\n \"& label\": {\n paddingLeft: 5,\n },\n },\n});\n"],"names":[],"mappings":";;AAGA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,aAAa;AAAA,EACf;AAAA,EACA,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,aAAa,MAAM,MAAM;AAAA,IACzB,WAAW;AAAA,MACT,YAAY;AAAA,MACZ,aAAa;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EAEjB;AAAA,EACA,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,cAAc,MAAM,MAAM;AAAA,IAC1B,WAAW;AAAA,MACT,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,aAAa;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,CAAC;"}

package/dist/esm/ColorPicker/PresetColors/PresetColors.styles.js CHANGED Viewed

@@ -18,7 +18,7 @@ const { staticClasses, useClasses } = createClasses(name, {
   swatchWrap: {
     width: "32px",
     height: "32px",
-    margin: "4px",
+    margin: theme.space.xxs,
     "& > span > div": {
       borderRadius: theme.radii.base
     }

package/dist/esm/ColorPicker/PresetColors/PresetColors.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PresetColors.styles.js","sources":["../../../../src/ColorPicker/PresetColors/PresetColors.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst name = \"HvColorPicker-PresetColors\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n root: { width: \"232px\" },\n colors: {\n display: \"flex\",\n flexWrap: \"wrap\",\n position: \"relative\",\n width: \"calc(100% + 8px)\",\n margin: \"-4px -4px\",\n padding: 0,\n },\n title: {\n fontWeight: theme.fontWeights.semibold,\n marginBottom: 8,\n },\n swatchWrap: {\n width: \"32px\",\n height: \"32px\",\n margin: ~~\"4px\"~~,\n\n \"& > span > div\": {\n borderRadius: theme.radii.base,\n },\n },\n});\n"],"names":[],"mappings":";;AAGA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,MAAM,EAAE,OAAO,QAAQ;AAAA,EACvB,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,YAAY,MAAM,YAAY;AAAA,IAC9B,cAAc;AAAA,EAChB;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,~~IAER~~,kBAAkB;AAAA,MAChB,cAAc,MAAM,MAAM;AAAA,IAAA;AAAA,EAC5B;AAEJ,CAAC;"}
1	+ {"version":3,"file":"PresetColors.styles.js","sources":["../../../../src/ColorPicker/PresetColors/PresetColors.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst name = \"HvColorPicker-PresetColors\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n root: { width: \"232px\" },\n colors: {\n display: \"flex\",\n flexWrap: \"wrap\",\n position: \"relative\",\n width: \"calc(100% + 8px)\",\n margin: \"-4px -4px\",\n padding: 0,\n },\n title: {\n fontWeight: theme.fontWeights.semibold,\n marginBottom: 8,\n },\n swatchWrap: {\n width: \"32px\",\n height: \"32px\",\n margin: theme.space.xxs,\n\n \"& > span > div\": {\n borderRadius: theme.radii.base,\n },\n },\n});\n"],"names":[],"mappings":";;AAGA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,MAAM,EAAE,OAAO,QAAQ;AAAA,EACvB,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,YAAY,MAAM,YAAY;AAAA,IAC9B,cAAc;AAAA,EAChB;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ,MAAM,MAAM;AAAA,IAEpB,kBAAkB;AAAA,MAChB,cAAc,MAAM,MAAM;AAAA,IAAA;AAAA,EAC5B;AAEJ,CAAC;"}

package/dist/esm/ColorPicker/SavedColors/SavedColors.styles.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { theme } from "@hitachivantara/uikit-styles";
 const name = "HvColorPicker-SavedColors";
 const { staticClasses, useClasses } = createClasses(name, {
   addButton: {
-    margin: "4px",
+    margin: theme.space.xxs,
     width: "32px",
     height: "32px"
   },
@@ -20,7 +20,7 @@ const { staticClasses, useClasses } = createClasses(name, {
   swatchWrap: {
     width: "32px",
     height: "32px",
-    margin: "4px",
+    margin: theme.space.xxs,
     "& > span > div": {
       borderRadius: theme.radii.base
     }

package/dist/esm/ColorPicker/SavedColors/SavedColors.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SavedColors.styles.js","sources":["../../../../src/ColorPicker/SavedColors/SavedColors.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst name = \"HvColorPicker-SavedColors\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n addButton: {\n margin: ~~\"4px\"~~,\n width: \"32px\",\n height: \"32px\",\n },\n root: {\n display: \"flex\",\n flexWrap: \"wrap\",\n position: \"relative\",\n alignItems: \"center\",\n padding: 0,\n width: \"calc(100% + 8px)\",\n margin: \"-4px -4px\",\n },\n swatchRoot: { position: \"relative\" },\n swatchWrap: {\n width: \"32px\",\n height: \"32px\",\n margin: ~~\"4px\"~~,\n\n \"& > span > div\": {\n borderRadius: theme.radii.base,\n },\n },\n removeButtonRoot: {\n position: \"absolute\",\n top: 0,\n right: 0,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height: 16,\n width: 16,\n background: theme.colors.atmo1,\n borderRadius: theme.radii.base,\n },\n removeButton: {\n height: 16,\n width: 16,\n minWidth: 16,\n minHeight: 16,\n padding: 0,\n margin: 0,\n\n \"& div > span\": {\n height: 16,\n width: 16,\n\n \"& > div\": { height: 16, width: 16 },\n },\n },\n});\n"],"names":[],"mappings":";;AAGA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,WAAW;AAAA,IACT,QAAQ;AAAA,~~IACR~~,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,YAAY,EAAE,UAAU,WAAW;AAAA,EACnC,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,~~IAER~~,kBAAkB;AAAA,MAChB,cAAc,MAAM,MAAM;AAAA,IAAA;AAAA,EAE9B;AAAA,EACA,kBAAkB;AAAA,IAChB,UAAU;AAAA,IACV,KAAK;AAAA,IACL,OAAO;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,YAAY,MAAM,OAAO;AAAA,IACzB,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,cAAc;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,IACX,SAAS;AAAA,IACT,QAAQ;AAAA,IAER,gBAAgB;AAAA,MACd,QAAQ;AAAA,MACR,OAAO;AAAA,MAEP,WAAW,EAAE,QAAQ,IAAI,OAAO,GAAG;AAAA,IAAA;AAAA,EACrC;AAEJ,CAAC;"}
1	+ {"version":3,"file":"SavedColors.styles.js","sources":["../../../../src/ColorPicker/SavedColors/SavedColors.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst name = \"HvColorPicker-SavedColors\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n addButton: {\n margin: theme.space.xxs,\n width: \"32px\",\n height: \"32px\",\n },\n root: {\n display: \"flex\",\n flexWrap: \"wrap\",\n position: \"relative\",\n alignItems: \"center\",\n padding: 0,\n width: \"calc(100% + 8px)\",\n margin: \"-4px -4px\",\n },\n swatchRoot: { position: \"relative\" },\n swatchWrap: {\n width: \"32px\",\n height: \"32px\",\n margin: theme.space.xxs,\n\n \"& > span > div\": {\n borderRadius: theme.radii.base,\n },\n },\n removeButtonRoot: {\n position: \"absolute\",\n top: 0,\n right: 0,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height: 16,\n width: 16,\n background: theme.colors.atmo1,\n borderRadius: theme.radii.base,\n },\n removeButton: {\n height: 16,\n width: 16,\n minWidth: 16,\n minHeight: 16,\n padding: 0,\n margin: 0,\n\n \"& div > span\": {\n height: 16,\n width: 16,\n\n \"& > div\": { height: 16, width: 16 },\n },\n },\n});\n"],"names":[],"mappings":";;AAGA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,WAAW;AAAA,IACT,QAAQ,MAAM,MAAM;AAAA,IACpB,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,YAAY,EAAE,UAAU,WAAW;AAAA,EACnC,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ,MAAM,MAAM;AAAA,IAEpB,kBAAkB;AAAA,MAChB,cAAc,MAAM,MAAM;AAAA,IAAA;AAAA,EAE9B;AAAA,EACA,kBAAkB;AAAA,IAChB,UAAU;AAAA,IACV,KAAK;AAAA,IACL,OAAO;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,YAAY,MAAM,OAAO;AAAA,IACzB,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,cAAc;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,IACX,SAAS;AAAA,IACT,QAAQ;AAAA,IAER,gBAAgB;AAAA,MACd,QAAQ;AAAA,MACR,OAAO;AAAA,MAEP,WAAW,EAAE,QAAQ,IAAI,OAAO,GAAG;AAAA,IAAA;AAAA,EACrC;AAEJ,CAAC;"}

package/dist/esm/Dialog/Dialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dialog.js","sources":["../../../src/Dialog/Dialog.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n useTheme,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvIconButton } from \"../IconButton\";\nimport { getElementById } from \"../utils/document\";\nimport { setId } from \"../utils/setId\";\nimport { DialogContext } from \"./context\";\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n extends Omit<MuiDialogProps, \"fullScreen\" \| \"classes\" \| \"open\"> {\n /** Current state of the Dialog. /\n open?: boolean;\n /* Callback fired when the component requests to be closed. /\n onClose?: (\n event: React.MouseEvent<HTMLButtonElement> \| {},\n reason?: \"escapeKeyDown\" \| \"backdropClick\",\n ) => void;\n /* @inheritdoc /\n maxWidth?: MuiDialogProps[\"maxWidth\"];\n /* @inheritdoc /\n fullWidth?: MuiDialogProps[\"fullWidth\"];\n /* If true, the dialog stretches vertically, limited by the margins. @default false /\n fullHeight?: boolean;\n /\n Element id that should be focus when the Dialog opens.\n * Auto-focusing elements can cause usability issues, so this should be avoided.\n * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n /\n firstFocusable?: string;\n /* Title for the button close. /\n buttonTitle?: string;\n /* Set the dialog to fullscreen mode. /\n fullscreen?: boolean;\n /* Prevent closing the dialog when clicking on the backdrop. /\n disableBackdropClick?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvDialogClasses;\n /* Variant of the dialog. Adds a status bar to the top of the dialog. If not provided, no status bar is added. /\n variant?: \"success\" \| \"error\" \| \"warning\";\n /* @ignore /\n ref?: MuiDialogProps[\"ref\"];\n /* @ignore */\n component?: MuiDialogProps[\"component\"];\n}\n\nexport const HvDialog = (props: HvDialogProps) => {\n const {\n variant,\n classes: classesProp,\n className,\n id,\n children,\n open = false,\n onClose,\n firstFocusable,\n buttonTitle = \"Close\",\n fullHeight,\n fullscreen: fullScreen = false, // TODO: rename to `fullScreen` in v6\n disableBackdropClick = false,\n ...others\n } = useDefaultProps(\"HvDialog\", props);\n\n const { classes, cx } = useClasses(classesProp);\n const { rootId } = useTheme();\n\n const measuredRef = useCallback(() => {\n if (!firstFocusable) return;\n\n const element = document.getElementById(firstFocusable);\n element?.focus();\n }, [firstFocusable]);\n\n const contextValue = useMemo(() => ({ fullScreen }), [fullScreen]);\n\n return (\n <MuiDialog\n container={getElementById(rootId)}\n className={className}\n classes={{\n root: classes.root,\n paper: cx(classes.paper, classes[variant!], {\n [classes.fullHeight]: fullHeight,\n [classes.statusBar]: !!variant,\n [classes.fullscreen]: fullScreen,\n }),\n }}\n id={id}\n ref={measuredRef}\n open={open}\n fullScreen={fullScreen}\n onClose={(event, reason) => {\n // `disableBackdropClick` property was removed in MUI5\n // and we want to maintain that functionality\n if (disableBackdropClick) return;\n\n onClose?.(event, reason);\n }}\n slotProps={{\n backdrop: {\n classes: {\n root: classes.background,\n },\n },\n }}\n {...others}\n >\n <HvIconButton<\"button\">\n title={buttonTitle}\n id={setId(id, \"close\")}\n className={classes.closeButton}\n onClick={(event) => onClose?.(event, undefined)}\n >\n <Close />\n </HvIconButton>\n <DialogContext.Provider value={contextValue}>\n {children}\n </DialogContext.Provider>\n </MuiDialog>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;~~AAwDa~~,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA,YAAY,aAAa;AAAA;AAAA,IACzB,uBAAuB;AAAA,IACvB,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AACxC,QAAA,EAAE,OAAO,IAAI,SAAS;AAEtB,QAAA,cAAc,YAAY,MAAM;AACpC,QAAI,CAAC,eAAgB;AAEf,UAAA,UAAU,SAAS,eAAe,cAAc;AACtD,aAAS,MAAM;AAAA,EAAA,GACd,CAAC,cAAc,CAAC;AAEb,QAAA,eAAe,QAAQ,OAAO,EAAE,eAAe,CAAC,UAAU,CAAC;AAG/D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,eAAe,MAAM;AAAA,MAChC;AAAA,MACA,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,OAAO,GAAG,QAAQ,OAAO,QAAQ,OAAQ,GAAG;AAAA,UAC1C,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,SAAS,GAAG,CAAC,CAAC;AAAA,UACvB,CAAC,QAAQ,UAAU,GAAG;AAAA,QACvB,CAAA;AAAA,MACH;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS,CAAC,OAAO,WAAW;AAG1B,YAAI,qBAAsB;AAE1B,kBAAU,OAAO,MAAM;AAAA,MACzB;AAAA,MACA,WAAW;AAAA,QACT,UAAU;AAAA,UACR,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,UAAA;AAAA,QAChB;AAAA,MAEJ;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,IAAI,MAAM,IAAI,OAAO;AAAA,YACrB,WAAW,QAAQ;AAAA,YACnB,SAAS,CAAC,UAAU,UAAU,OAAO,MAAS;AAAA,YAE9C,8BAAC,OAAM,CAAA,CAAA;AAAA,UAAA;AAAA,QACT;AAAA,4BACC,cAAc,UAAd,EAAuB,OAAO,cAC5B,SACH,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
1	+ {"version":3,"file":"Dialog.js","sources":["../../../src/Dialog/Dialog.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n useTheme,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvIconButton } from \"../IconButton\";\nimport { getElementById } from \"../utils/document\";\nimport { setId } from \"../utils/setId\";\nimport { DialogContext } from \"./context\";\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n extends Omit<MuiDialogProps, \"fullScreen\" \| \"classes\" \| \"open\"> {\n /** Current state of the Dialog. /\n open?: boolean;\n /* Callback fired when the component requests to be closed. /\n onClose?: (\n event: React.MouseEvent<HTMLButtonElement> \| {},\n reason?: \"escapeKeyDown\" \| \"backdropClick\",\n ) => void;\n /* @inheritdoc /\n maxWidth?: MuiDialogProps[\"maxWidth\"];\n /* @inheritdoc /\n fullWidth?: MuiDialogProps[\"fullWidth\"];\n /* If true, the dialog stretches vertically, limited by the margins. @default false /\n fullHeight?: boolean;\n /\n Element id that should be focus when the Dialog opens.\n * Auto-focusing elements can cause usability issues, so this should be avoided.\n * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n /\n firstFocusable?: string;\n /* Title for the button close. /\n buttonTitle?: string;\n /* Set the dialog to fullscreen mode. /\n fullscreen?: boolean;\n /* Prevent closing the dialog when clicking on the backdrop. /\n disableBackdropClick?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvDialogClasses;\n /* Variant of the dialog. Adds a status bar to the top of the dialog. If not provided, no status bar is added. /\n variant?: \"success\" \| \"error\" \| \"warning\";\n /* @ignore /\n ref?: MuiDialogProps[\"ref\"];\n /* @ignore /\n component?: MuiDialogProps[\"component\"];\n}\n\n/\n A Dialog is a graphical control element in the form of a small panel that communicates information and prompts for a response.\n */\nexport const HvDialog = (props: HvDialogProps) => {\n const {\n variant,\n classes: classesProp,\n className,\n id,\n children,\n open = false,\n onClose,\n firstFocusable,\n buttonTitle = \"Close\",\n fullHeight,\n fullscreen: fullScreen = false, // TODO: rename to `fullScreen` in v6\n disableBackdropClick = false,\n ...others\n } = useDefaultProps(\"HvDialog\", props);\n\n const { classes, cx } = useClasses(classesProp);\n const { rootId } = useTheme();\n\n const measuredRef = useCallback(() => {\n if (!firstFocusable) return;\n\n const element = document.getElementById(firstFocusable);\n element?.focus();\n }, [firstFocusable]);\n\n const contextValue = useMemo(() => ({ fullScreen }), [fullScreen]);\n\n return (\n <MuiDialog\n container={getElementById(rootId)}\n className={className}\n classes={{\n root: classes.root,\n paper: cx(classes.paper, classes[variant!], {\n [classes.fullHeight]: fullHeight,\n [classes.statusBar]: !!variant,\n [classes.fullscreen]: fullScreen,\n }),\n }}\n id={id}\n ref={measuredRef}\n open={open}\n fullScreen={fullScreen}\n onClose={(event, reason) => {\n // `disableBackdropClick` property was removed in MUI5\n // and we want to maintain that functionality\n if (disableBackdropClick) return;\n\n onClose?.(event, reason);\n }}\n slotProps={{\n backdrop: {\n classes: {\n root: classes.background,\n },\n },\n }}\n {...others}\n >\n <HvIconButton<\"button\">\n title={buttonTitle}\n id={setId(id, \"close\")}\n className={classes.closeButton}\n onClick={(event) => onClose?.(event, undefined)}\n >\n <Close />\n </HvIconButton>\n <DialogContext.Provider value={contextValue}>\n {children}\n </DialogContext.Provider>\n </MuiDialog>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AA2Da,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA,YAAY,aAAa;AAAA;AAAA,IACzB,uBAAuB;AAAA,IACvB,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AACxC,QAAA,EAAE,OAAO,IAAI,SAAS;AAEtB,QAAA,cAAc,YAAY,MAAM;AACpC,QAAI,CAAC,eAAgB;AAEf,UAAA,UAAU,SAAS,eAAe,cAAc;AACtD,aAAS,MAAM;AAAA,EAAA,GACd,CAAC,cAAc,CAAC;AAEb,QAAA,eAAe,QAAQ,OAAO,EAAE,eAAe,CAAC,UAAU,CAAC;AAG/D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,eAAe,MAAM;AAAA,MAChC;AAAA,MACA,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,OAAO,GAAG,QAAQ,OAAO,QAAQ,OAAQ,GAAG;AAAA,UAC1C,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,SAAS,GAAG,CAAC,CAAC;AAAA,UACvB,CAAC,QAAQ,UAAU,GAAG;AAAA,QACvB,CAAA;AAAA,MACH;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS,CAAC,OAAO,WAAW;AAG1B,YAAI,qBAAsB;AAE1B,kBAAU,OAAO,MAAM;AAAA,MACzB;AAAA,MACA,WAAW;AAAA,QACT,UAAU;AAAA,UACR,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,UAAA;AAAA,QAChB;AAAA,MAEJ;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,IAAI,MAAM,IAAI,OAAO;AAAA,YACrB,WAAW,QAAQ;AAAA,YACnB,SAAS,CAAC,UAAU,UAAU,OAAO,MAAS;AAAA,YAE9C,8BAAC,OAAM,CAAA,CAAA;AAAA,UAAA;AAAA,QACT;AAAA,4BACC,cAAc,UAAd,EAAuB,OAAO,cAC5B,SACH,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/esm/EmptyState/EmptyState.styles.js CHANGED Viewed

@@ -16,7 +16,7 @@ const { staticClasses, useClasses } = createClasses("HvEmptyState", {
   },
   iconContainer: {},
   titleContainer: {
-    marginTop: "4px",
+    marginTop: theme.space.xxs,
     marginBottom: theme.space.sm
   },
   textContainer: {

package/dist/esm/EmptyState/EmptyState.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmptyState.styles.js","sources":["../../../src/EmptyState/EmptyState.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvEmptyState\", {\n root: {\n width: \"100%\",\n height: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n },\n container: { display: \"flex\", flexDirection: \"row\" },\n containerMessageOnly: {\n alignItems: \"center\",\n \"& $textContainer\": {\n marginLeft: 0,\n },\n },\n iconContainer: {},\n titleContainer: {\n marginTop: ~~\"4px\"~~,\n marginBottom: theme.space.sm,\n },\n textContainer: {\n background: \"transparent\",\n maxWidth: \"510px\",\n overflow: \"hidden\",\n },\n messageContainer: {},\n actionContainer: { marginTop: theme.space.sm },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,gBAAgB;AAAA,EAClB;AAAA,EACA,WAAW,EAAE,SAAS,QAAQ,eAAe,MAAM;AAAA,EACnD,sBAAsB;AAAA,IACpB,YAAY;AAAA,IACZ,oBAAoB;AAAA,MAClB,YAAY;AAAA,IAAA;AAAA,EAEhB;AAAA,EACA,eAAe,CAAC;AAAA,EAChB,gBAAgB;AAAA,IACd,WAAW;AAAA,~~IACX~~,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,eAAe;AAAA,IACb,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAU;AAAA,EACZ;AAAA,EACA,kBAAkB,CAAC;AAAA,EACnB,iBAAiB,EAAE,WAAW,MAAM,MAAM,GAAG;AAC/C,CAAC;"}
1	+ {"version":3,"file":"EmptyState.styles.js","sources":["../../../src/EmptyState/EmptyState.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvEmptyState\", {\n root: {\n width: \"100%\",\n height: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n },\n container: { display: \"flex\", flexDirection: \"row\" },\n containerMessageOnly: {\n alignItems: \"center\",\n \"& $textContainer\": {\n marginLeft: 0,\n },\n },\n iconContainer: {},\n titleContainer: {\n marginTop: theme.space.xxs,\n marginBottom: theme.space.sm,\n },\n textContainer: {\n background: \"transparent\",\n maxWidth: \"510px\",\n overflow: \"hidden\",\n },\n messageContainer: {},\n actionContainer: { marginTop: theme.space.sm },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,gBAAgB;AAAA,EAClB;AAAA,EACA,WAAW,EAAE,SAAS,QAAQ,eAAe,MAAM;AAAA,EACnD,sBAAsB;AAAA,IACpB,YAAY;AAAA,IACZ,oBAAoB;AAAA,MAClB,YAAY;AAAA,IAAA;AAAA,EAEhB;AAAA,EACA,eAAe,CAAC;AAAA,EAChB,gBAAgB;AAAA,IACd,WAAW,MAAM,MAAM;AAAA,IACvB,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,eAAe;AAAA,IACb,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAU;AAAA,EACZ;AAAA,EACA,kBAAkB,CAAC;AAAA,EACnB,iBAAiB,EAAE,WAAW,MAAM,MAAM,GAAG;AAC/C,CAAC;"}

package/dist/esm/FilterGroup/RightPanel/RightPanel.js CHANGED Viewed

@@ -31,8 +31,8 @@ const HvFilterGroupRightPanel = ({
       (option) => option.name.toLowerCase().includes(searchStr.toLowerCase())
     );
     return {
-      all: filteredOptions.map((option) => option.id) || [],
-      enabled: filteredOptions.filter((option) => !option.disabled).map((option) => option.id) || []
+      all: filteredOptions?.map((option) => option.id) || [],
+      enabled: filteredOptions?.filter((option) => !option.disabled)?.map((option) => option.id) || []
     };
   }, [filterOptions, activeGroup, searchStr]);
   const activeFilterValues = useMemo(

package/dist/esm/FilterGroup/RightPanel/RightPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RightPanel.js","sources":["../../../../src/FilterGroup/RightPanel/RightPanel.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useState } from \"react\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvCheckBox } from \"../../CheckBox\";\nimport { HvInput } from \"../../Input\";\nimport { HvList, HvListProps } from \"../../List\";\nimport { HvPanel } from \"../../Panel\";\nimport { HvTypography } from \"../../Typography\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { staticClasses, useClasses } from \"./RightPanel.styles\";\n\nexport { staticClasses as filterGroupRightPanelClasses };\n\nexport type HvFilterGroupRightPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupRightPanelProps {\n id?: string;\n className?: string;\n labels?: {\n searchBoxPlaceholder?: string;\n selectAll?: string;\n multiSelectionConjunction?: string;\n };\n emptyElement?: React.ReactNode;\n classes?: HvFilterGroupRightPanelClasses;\n}\n\nexport const HvFilterGroupRightPanel = ({\n id,\n className,\n labels,\n emptyElement,\n classes: classesProp,\n}: HvFilterGroupRightPanelProps) => {\n const { classes } = useClasses(classesProp);\n const [searchStr, setSearchStr] = useState(\"\");\n const [allSelected, setAllSelected] = useState(false);\n const [anySelected, setAnySelected] = useState(false);\n\n const {\n filterOptions,\n filterValues = [],\n setFilterValues,\n activeGroup,\n } = useContext(HvFilterGroupContext);\n\n const { all: allActiveGroupOptions, enabled: enabledActiveGroupOptions } =\n useMemo(() => {\n const filteredOptions = filterOptions[activeGroup]?.data.filter(\n (option) => option.name.toLowerCase().includes(searchStr.toLowerCase()),\n );\n\n return {\n all: filteredOptions.map((option) => option.id) \|\| [],\n enabled:\n filteredOptions\n .filter((option) => !option.disabled)\n .map((option) => option.id) \|\| [],\n };\n }, [filterOptions, activeGroup, searchStr]);\n\n const activeFilterValues = useMemo(\n () =>\n filterValues[activeGroup]?.filter((value) =>\n allActiveGroupOptions.includes(value),\n ) \|\| [],\n [filterValues, allActiveGroupOptions, activeGroup],\n );\n\n const listValues = useMemo(\n () =>\n filterOptions[activeGroup]?.data.map((option) => ({\n ...option,\n label: option.name,\n selected: filterValues[activeGroup]?.includes(option.id),\n isHidden:\n option.name.toLowerCase().indexOf(searchStr.toLowerCase()) < 0,\n })) \|\| [],\n [filterOptions, filterValues, activeGroup, searchStr],\n );\n\n const updateSelectAll = useCallback(() => {\n const nbrSelected = activeFilterValues?.length;\n const hasSelection = nbrSelected > 0;\n const allSelect = nbrSelected === allActiveGroupOptions.length;\n\n setAnySelected(hasSelection);\n setAllSelected(hasSelection && allSelect);\n }, [activeFilterValues, allActiveGroupOptions]);\n\n useEffect(() => {\n updateSelectAll();\n }, [activeFilterValues, updateSelectAll]);\n\n useEffect(() => setSearchStr(\"\"), [activeGroup]);\n\n const onChangeHandler: HvListProps[\"onChange\"] = (values) => {\n const newFilterValues = filterOptions.map((_, i) =>\n activeGroup === i\n ? values.filter((v) => v.selected).map((v) => v.id)\n : [...(filterValues[i] \|\| [])],\n );\n setFilterValues(newFilterValues as any);\n };\n\n const handleSelectAll = useCallback(() => {\n const newFilterValues = structuredClone(filterValues);\n\n if (anySelected) {\n if (searchStr !== \"\") {\n newFilterValues[activeGroup] = filterValues[activeGroup]?.filter(\n (value) => !enabledActiveGroupOptions.includes(value),\n );\n } else {\n newFilterValues[activeGroup] = [];\n }\n } else {\n const currentOptions = newFilterValues[activeGroup] \|\| [];\n newFilterValues[activeGroup] = [\n ...currentOptions,\n ...enabledActiveGroupOptions,\n ];\n }\n\n setFilterValues(newFilterValues);\n }, [\n activeGroup,\n enabledActiveGroupOptions,\n anySelected,\n filterValues,\n setFilterValues,\n searchStr,\n ]);\n\n const SelectAll = useCallback(() => {\n const nbrSelected = activeFilterValues?.length;\n\n const defaultLabel = (\n <HvTypography component=\"span\">\n {nbrSelected > 0 ? (\n <>\n <b>{nbrSelected}</b>\n {` ${labels?.multiSelectionConjunction} ${allActiveGroupOptions.length}`}\n </>\n ) : (\n <>\n <b>{labels?.selectAll}</b>\n {` (${allActiveGroupOptions.length})`}\n </>\n )}\n </HvTypography>\n );\n\n return (\n <div className={classes.selectAllContainer}>\n <HvCheckBox\n id={setId(id, \"select-all\")}\n label={defaultLabel}\n onChange={() => handleSelectAll()}\n className={classes.selectAll}\n indeterminate={anySelected && !allSelected}\n checked={allSelected}\n />\n </div>\n );\n }, [\n activeFilterValues?.length,\n allActiveGroupOptions.length,\n allSelected,\n anySelected,\n handleSelectAll,\n id,\n labels,\n classes?.selectAllContainer,\n classes?.selectAll,\n ]);\n\n return (\n <HvPanel id={setId(id, \"rightPanel\")} className={className}>\n {listValues.length > 0 ? (\n <>\n <HvInput\n id={setId(id, \"search\")}\n classes={{\n root: classes.search,\n }}\n type=\"search\"\n placeholder={labels?.searchBoxPlaceholder}\n value={searchStr}\n onChange={(_, str) => setSearchStr(str)}\n />\n <SelectAll />\n <HvList\n key={activeGroup}\n id={setId(id, \"list\")}\n values={listValues}\n className={classes.list}\n multiSelect\n useSelector\n showSelectAll={false}\n onChange={onChangeHandler}\n selectable\n condensed\n hasTooltips\n />\n </>\n ) : (\n emptyElement\n )}\n </HvPanel>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AA4BO,MAAM,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AACX,MAAoC;AAClC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAC1C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,EAAE;AAC7C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAE9C,QAAA;AAAA,IACJ;AAAA,IACA,eAAe,CAAC;AAAA,IAChB;AAAA,IACA;AAAA,EAAA,IACE,WAAW,oBAAoB;AAEnC,QAAM,EAAE,KAAK,uBAAuB,SAAS,0BAA0B,IACrE,QAAQ,MAAM;AACZ,UAAM,kBAAkB,cAAc,WAAW,GAAG,KAAK;AAAA,MACvD,CAAC,WAAW,OAAO,KAAK,cAAc,SAAS,UAAU,YAAa,CAAA;AAAA,IACxE;AAEO,WAAA;AAAA,MACL,KAAK,~~gBAAgB~~,IAAI,CAAC,WAAW,OAAO,EAAE,KAAK,CAAC;AAAA,~~MACpD~~,SACE,~~gBACG~~,OAAO,CAAC,WAAW,CAAC,OAAO,QAAQ,~~EACnC~~,IAAI,CAAC,WAAW,OAAO,EAAE,KAAK,CAAA;AAAA,~~IACrC~~;AAAA,EACC,GAAA,CAAC,eAAe,aAAa,SAAS,CAAC;AAE5C,QAAM,qBAAqB;AAAA,IACzB,MACE,aAAa,WAAW,GAAG;AAAA,MAAO,CAAC,UACjC,sBAAsB,SAAS,KAAK;AAAA,IAAA,KACjC,CAAC;AAAA,IACR,CAAC,cAAc,uBAAuB,WAAW;AAAA,EACnD;AAEA,QAAM,aAAa;AAAA,IACjB,MACE,cAAc,WAAW,GAAG,KAAK,IAAI,CAAC,YAAY;AAAA,MAChD,GAAG;AAAA,MACH,OAAO,OAAO;AAAA,MACd,UAAU,aAAa,WAAW,GAAG,SAAS,OAAO,EAAE;AAAA,MACvD,UACE,OAAO,KAAK,YAAA,EAAc,QAAQ,UAAU,YAAY,CAAC,IAAI;AAAA,IACjE,EAAE,KAAK,CAAC;AAAA,IACV,CAAC,eAAe,cAAc,aAAa,SAAS;AAAA,EACtD;AAEM,QAAA,kBAAkB,YAAY,MAAM;AACxC,UAAM,cAAc,oBAAoB;AACxC,UAAM,eAAe,cAAc;AAC7B,UAAA,YAAY,gBAAgB,sBAAsB;AAExD,mBAAe,YAAY;AAC3B,mBAAe,gBAAgB,SAAS;AAAA,EAAA,GACvC,CAAC,oBAAoB,qBAAqB,CAAC;AAE9C,YAAU,MAAM;AACE,oBAAA;AAAA,EAAA,GACf,CAAC,oBAAoB,eAAe,CAAC;AAExC,YAAU,MAAM,aAAa,EAAE,GAAG,CAAC,WAAW,CAAC;AAEzC,QAAA,kBAA2C,CAAC,WAAW;AAC3D,UAAM,kBAAkB,cAAc;AAAA,MAAI,CAAC,GAAG,MAC5C,gBAAgB,IACZ,OAAO,OAAO,CAAC,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAChD,CAAC,GAAI,aAAa,CAAC,KAAK,CAAG,CAAA;AAAA,IACjC;AACA,oBAAgB,eAAsB;AAAA,EACxC;AAEM,QAAA,kBAAkB,YAAY,MAAM;AAClC,UAAA,kBAAkB,gBAAgB,YAAY;AAEpD,QAAI,aAAa;AACf,UAAI,cAAc,IAAI;AACpB,wBAAgB,WAAW,IAAI,aAAa,WAAW,GAAG;AAAA,UACxD,CAAC,UAAU,CAAC,0BAA0B,SAAS,KAAK;AAAA,QACtD;AAAA,MAAA,OACK;AACW,wBAAA,WAAW,IAAI,CAAC;AAAA,MAAA;AAAA,IAClC,OACK;AACL,YAAM,iBAAiB,gBAAgB,WAAW,KAAK,CAAC;AACxD,sBAAgB,WAAW,IAAI;AAAA,QAC7B,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,IAAA;AAGF,oBAAgB,eAAe;AAAA,EAAA,GAC9B;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAEK,QAAA,YAAY,YAAY,MAAM;AAClC,UAAM,cAAc,oBAAoB;AAExC,UAAM,eACH,oBAAA,cAAA,EAAa,WAAU,QACrB,UAAA,cAAc,IAEX,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA,oBAAC,OAAG,UAAY,YAAA,CAAA;AAAA,MACf,IAAI,QAAQ,yBAAyB,IAAI,sBAAsB,MAAM;AAAA,IAAA,EAAA,CACxE,IAGE,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAC,oBAAA,KAAA,EAAG,kBAAQ,UAAU,CAAA;AAAA,MACrB,KAAK,sBAAsB,MAAM;AAAA,IAAA,EAAA,CACpC,EAEJ,CAAA;AAGF,WACG,oBAAA,OAAA,EAAI,WAAW,QAAQ,oBACtB,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,YAAY;AAAA,QAC1B,OAAO;AAAA,QACP,UAAU,MAAM,gBAAgB;AAAA,QAChC,WAAW,QAAQ;AAAA,QACnB,eAAe,eAAe,CAAC;AAAA,QAC/B,SAAS;AAAA,MAAA;AAAA,IAAA,GAEb;AAAA,EAAA,GAED;AAAA,IACD,oBAAoB;AAAA,IACpB,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,EAAA,CACV;AAGC,SAAA,oBAAC,SAAQ,EAAA,IAAI,MAAM,IAAI,YAAY,GAAG,WACnC,UAAA,WAAW,SAAS,IAEjB,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,QAAQ;AAAA,QACtB,SAAS;AAAA,UACP,MAAM,QAAQ;AAAA,QAChB;AAAA,QACA,MAAK;AAAA,QACL,aAAa,QAAQ;AAAA,QACrB,OAAO;AAAA,QACP,UAAU,CAAC,GAAG,QAAQ,aAAa,GAAG;AAAA,MAAA;AAAA,IACxC;AAAA,wBACC,WAAU,EAAA;AAAA,IACX;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,IAAI,MAAM,IAAI,MAAM;AAAA,QACpB,QAAQ;AAAA,QACR,WAAW,QAAQ;AAAA,QACnB,aAAW;AAAA,QACX,aAAW;AAAA,QACX,eAAe;AAAA,QACf,UAAU;AAAA,QACV,YAAU;AAAA,QACV,WAAS;AAAA,QACT,aAAW;AAAA,MAAA;AAAA,MAVN;AAAA,IAAA;AAAA,EAWP,EACF,CAAA,IAEA,cAEJ;AAEJ;"}
1	+ {"version":3,"file":"RightPanel.js","sources":["../../../../src/FilterGroup/RightPanel/RightPanel.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useState } from \"react\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvCheckBox } from \"../../CheckBox\";\nimport { HvInput } from \"../../Input\";\nimport { HvList, HvListProps } from \"../../List\";\nimport { HvPanel } from \"../../Panel\";\nimport { HvTypography } from \"../../Typography\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { staticClasses, useClasses } from \"./RightPanel.styles\";\n\nexport { staticClasses as filterGroupRightPanelClasses };\n\nexport type HvFilterGroupRightPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupRightPanelProps {\n id?: string;\n className?: string;\n labels?: {\n searchBoxPlaceholder?: string;\n selectAll?: string;\n multiSelectionConjunction?: string;\n };\n emptyElement?: React.ReactNode;\n classes?: HvFilterGroupRightPanelClasses;\n}\n\nexport const HvFilterGroupRightPanel = ({\n id,\n className,\n labels,\n emptyElement,\n classes: classesProp,\n}: HvFilterGroupRightPanelProps) => {\n const { classes } = useClasses(classesProp);\n const [searchStr, setSearchStr] = useState(\"\");\n const [allSelected, setAllSelected] = useState(false);\n const [anySelected, setAnySelected] = useState(false);\n\n const {\n filterOptions,\n filterValues = [],\n setFilterValues,\n activeGroup,\n } = useContext(HvFilterGroupContext);\n\n const { all: allActiveGroupOptions, enabled: enabledActiveGroupOptions } =\n useMemo(() => {\n const filteredOptions = filterOptions[activeGroup]?.data.filter(\n (option) => option.name.toLowerCase().includes(searchStr.toLowerCase()),\n );\n\n return {\n all: filteredOptions?.map((option) => option.id) \|\| [],\n enabled:\n filteredOptions\n ?.filter((option) => !option.disabled)\n ?.map((option) => option.id) \|\| [],\n };\n }, [filterOptions, activeGroup, searchStr]);\n\n const activeFilterValues = useMemo(\n () =>\n filterValues[activeGroup]?.filter((value) =>\n allActiveGroupOptions.includes(value),\n ) \|\| [],\n [filterValues, allActiveGroupOptions, activeGroup],\n );\n\n const listValues = useMemo(\n () =>\n filterOptions[activeGroup]?.data.map((option) => ({\n ...option,\n label: option.name,\n selected: filterValues[activeGroup]?.includes(option.id),\n isHidden:\n option.name.toLowerCase().indexOf(searchStr.toLowerCase()) < 0,\n })) \|\| [],\n [filterOptions, filterValues, activeGroup, searchStr],\n );\n\n const updateSelectAll = useCallback(() => {\n const nbrSelected = activeFilterValues?.length;\n const hasSelection = nbrSelected > 0;\n const allSelect = nbrSelected === allActiveGroupOptions.length;\n\n setAnySelected(hasSelection);\n setAllSelected(hasSelection && allSelect);\n }, [activeFilterValues, allActiveGroupOptions]);\n\n useEffect(() => {\n updateSelectAll();\n }, [activeFilterValues, updateSelectAll]);\n\n useEffect(() => setSearchStr(\"\"), [activeGroup]);\n\n const onChangeHandler: HvListProps[\"onChange\"] = (values) => {\n const newFilterValues = filterOptions.map((_, i) =>\n activeGroup === i\n ? values.filter((v) => v.selected).map((v) => v.id)\n : [...(filterValues[i] \|\| [])],\n );\n setFilterValues(newFilterValues as any);\n };\n\n const handleSelectAll = useCallback(() => {\n const newFilterValues = structuredClone(filterValues);\n\n if (anySelected) {\n if (searchStr !== \"\") {\n newFilterValues[activeGroup] = filterValues[activeGroup]?.filter(\n (value) => !enabledActiveGroupOptions.includes(value),\n );\n } else {\n newFilterValues[activeGroup] = [];\n }\n } else {\n const currentOptions = newFilterValues[activeGroup] \|\| [];\n newFilterValues[activeGroup] = [\n ...currentOptions,\n ...enabledActiveGroupOptions,\n ];\n }\n\n setFilterValues(newFilterValues);\n }, [\n activeGroup,\n enabledActiveGroupOptions,\n anySelected,\n filterValues,\n setFilterValues,\n searchStr,\n ]);\n\n const SelectAll = useCallback(() => {\n const nbrSelected = activeFilterValues?.length;\n\n const defaultLabel = (\n <HvTypography component=\"span\">\n {nbrSelected > 0 ? (\n <>\n <b>{nbrSelected}</b>\n {` ${labels?.multiSelectionConjunction} ${allActiveGroupOptions.length}`}\n </>\n ) : (\n <>\n <b>{labels?.selectAll}</b>\n {` (${allActiveGroupOptions.length})`}\n </>\n )}\n </HvTypography>\n );\n\n return (\n <div className={classes.selectAllContainer}>\n <HvCheckBox\n id={setId(id, \"select-all\")}\n label={defaultLabel}\n onChange={() => handleSelectAll()}\n className={classes.selectAll}\n indeterminate={anySelected && !allSelected}\n checked={allSelected}\n />\n </div>\n );\n }, [\n activeFilterValues?.length,\n allActiveGroupOptions.length,\n allSelected,\n anySelected,\n handleSelectAll,\n id,\n labels,\n classes?.selectAllContainer,\n classes?.selectAll,\n ]);\n\n return (\n <HvPanel id={setId(id, \"rightPanel\")} className={className}>\n {listValues.length > 0 ? (\n <>\n <HvInput\n id={setId(id, \"search\")}\n classes={{\n root: classes.search,\n }}\n type=\"search\"\n placeholder={labels?.searchBoxPlaceholder}\n value={searchStr}\n onChange={(_, str) => setSearchStr(str)}\n />\n <SelectAll />\n <HvList\n key={activeGroup}\n id={setId(id, \"list\")}\n values={listValues}\n className={classes.list}\n multiSelect\n useSelector\n showSelectAll={false}\n onChange={onChangeHandler}\n selectable\n condensed\n hasTooltips\n />\n </>\n ) : (\n emptyElement\n )}\n </HvPanel>\n );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Grid/Grid.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Grid.js","sources":["../../../src/Grid/Grid.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport MuiGrid, { GridProps as MuiGridProps } from \"@mui/material/Grid\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useWidth } from \"../hooks/useWidth\";\nimport { staticClasses, useClasses } from \"./Grid.styles\";\n\nexport { staticClasses as gridClasses };\n\nexport type HvGridClasses = ExtractNames<typeof useClasses>;\n\nconst BREAKPOINT_GUTTERS = {\n xs: 2,\n sm: 2,\n md: 4,\n lg: 4,\n xl: 4,\n};\n\nconst BREAKPOINT_COLUMNS = {\n xs: 4,\n sm: 8,\n md: 12,\n lg: 12,\n xl: 12,\n};\n\nexport type HvGridDirection =\n \| \"row\"\n \| \"row-reverse\"\n \| \"column\"\n \| \"column-reverse\";\n\nexport type HvGridSpacing =\n \| \"xs\"\n \| \"sm\"\n \| \"md\"\n \| \"lg\"\n \| \"xl\"\n \| \"auto\"\n \| 1\n \| 2\n \| 3\n \| 4\n \| 5\n \| 6\n \| 7\n \| 8\n \| 9\n \| 10;\n\nexport interface HvGridProps extends Omit<MuiGridProps, \"classes\" \| \"columns\"> {\n /*\n If `true`, the component will have the flex container behavior.\n * You should be wrapping items with a container.\n /\n container?: boolean;\n /\n If `true`, the component will have the flex item behavior.\n * You should be wrapping items with a container.\n /\n item?: boolean;\n /\n Defines the space between the type item component. It can only be used on a type container component.\n * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n * (number between 0 and 10), breakpoint or auto.\n /\n spacing?: HvGridSpacing \| number;\n /\n Defines the vertical space between the type item component. It can only be used on a type container component.\n * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n * (number between 0 and 10), breakpoint or auto.\n * It overrides the value of the spacing prop.\n /\n rowSpacing?: HvGridSpacing \| number;\n /\n Defines the horizontal space between the type item component. It can only be used on a type container component.\n * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n * (number between 0 and 10), breakpoint or auto.\n * It overrides the value of the spacing prop.\n /\n columnSpacing?: HvGridSpacing \| number;\n /\n The number of columns.\n * Defaults to a 12-column grid.\n * The value \"auto\" implements the Design System directives in terms of variable number of columns.\n * @default 12\n /\n columns?: \"auto\" \| MuiGridProps[\"columns\"];\n /\n Defines the `flex-direction` style property.\n * It is applied for all screen sizes.\n /\n direction?: HvGridDirection;\n /\n Defines the `justify-content` style property.\n * It is applied for all screen sizes.\n /\n justify?:\n \| \"flex-start\"\n \| \"center\"\n \| \"flex-end\"\n \| \"space-between\"\n \| \"space-around\"\n \| \"space-evenly\";\n /\n Defines the number of grids the component is going to use.\n * It's applied for all the screen sizes with the lowest priority.\n /\n xs?: number \| boolean;\n /\n Defines the number of grids the component is going to use.\n * It's applied for the `sm` breakpoint and wider screens if not overridden.\n /\n sm?: number \| boolean;\n /\n Defines the number of grids the component is going to use.\n * It's applied for the `md` breakpoint and wider screens if not overridden.\n /\n md?: number \| boolean;\n /\n Defines the number of grids the component is going to use.\n * It's applied for the `lg` breakpoint and wider screens if not overridden.\n /\n lg?: number \| boolean;\n /\n Defines the number of grids the component is going to use.\n * It's applied for the `xl` breakpoint and wider screens.\n /\n xl?: number \| boolean;\n /\n Defines the `flex-wrap` style property.\n * It's applied for all screen sizes.\n /\n wrap?: \"nowrap\" \| \"wrap\" \| \"wrap-reverse\";\n /\n If `true`, it sets `min-width: 0` on the item.\n * Refer to the limitations section of the documentation to better understand the use case.\n /\n zeroMinWidth?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvGridClasses;\n}\n\nfunction getGridSpacing(spacing: HvGridProps[\"spacing\"]) {\n let gridSpacing: MuiGridProps[\"spacing\"];\n\n if (typeof spacing === \"string\") {\n if (spacing === \"auto\") {\n gridSpacing = BREAKPOINT_GUTTERS;\n } else {\n gridSpacing = BREAKPOINT_GUTTERS[spacing];\n }\n } else if (typeof spacing === \"object\") {\n gridSpacing = Object.keys(spacing).reduce<Record<string, number>>(\n (acc, bp) => {\n acc[bp] = BREAKPOINT_GUTTERS[spacing[bp]] ?? spacing[bp];\n return acc;\n },\n {},\n );\n } else if (spacing === 0) {\n gridSpacing = { xs: 0 };\n } else {\n gridSpacing = spacing;\n }\n\n return gridSpacing;\n}\n\nfunction getNumberOfColumns(columns: HvGridProps[\"columns\"]) {\n let numberOfColumns: MuiGridProps[\"columns\"];\n\n if (columns === \"auto\") {\n numberOfColumns = BREAKPOINT_COLUMNS;\n } else {\n numberOfColumns = columns;\n }\n\n return numberOfColumns;\n}\n\nfunction getContainerProps(\n spacing: HvGridProps[\"spacing\"],\n rowSpacing: HvGridProps[\"rowSpacing\"],\n columnSpacing: HvGridProps[\"columnSpacing\"],\n columns: HvGridProps[\"columns\"],\n) {\n const containerProps: Pick<\n MuiGridProps,\n \"container\" \| \"spacing\" \| \"rowSpacing\" \| \"columnSpacing\" \| \"columns\"\n > = { container: true };\n\n if (spacing != null) {\n containerProps.spacing = getGridSpacing(spacing);\n }\n if (rowSpacing != null) {\n containerProps.rowSpacing = getGridSpacing(rowSpacing);\n }\n if (columnSpacing != null) {\n containerProps.columnSpacing = getGridSpacing(columnSpacing);\n }\n if (columns != null) {\n containerProps.columns = getNumberOfColumns(columns);\n }\n\n return containerProps;\n}\n\nconst WidthGrid = forwardRef<\n // no-indent\n HTMLDivElement,\n HvGridProps\n>(function WidthGrid(props, ref) {\n const { container, spacing, rowSpacing, columnSpacing, columns, ...others } =\n props;\n\n const width = useWidth();\n\n const containerProps = container\n ? getContainerProps(\n spacing === \"auto\" ? width : spacing,\n rowSpacing === \"auto\" ? width : rowSpacing,\n columnSpacing === \"auto\" ? width : columnSpacing,\n columns,\n )\n : {};\n\n return <MuiGrid ref={ref} {...containerProps} {...others} />;\n});\n\n/\n The grid creates visual consistency between layouts while allowing flexibility\n * across a wide variety of designs. This component is based on a 12-column grid layout.\n \n It's based on the [Material UI Grid](https://mui.com/material-ui/react-grid/).\n \n The definitions were set following the Design System directives:\n \n \| Breakpoint \| Width (in px) \| Gutters (in px) \| Number of columns \|\n * \| ---------- \| ------------- \| --------------- \| ----------------- \|\n * \| xs \| [0-600[ \| 16 \| 4 \|\n * \| sm \| [600-960[ \| 16 \| 8 \|\n * \| md \| [960-1270[ \| 32 \| 12 \|\n * \| lg \| [1270-1920[ \| 32 \| 12 \|\n * \| xl \| [1920-...[ \| 32 \| 12 \|\n \n However, the number of columns is set to 12 for all breakpoints, as it serves most\n * of the use cases and simplifies the implementation.\n * To opt-in to the Design System directives, you can set the `columns` prop to `auto`.\n \n Also, the Design System specifications are omissive about the horizontal gutters.\n * The HvGrid sets them to the same value as the vertical gutters, depending on the breakpoint.\n * It can be overridden by setting the `rowSpacing` prop.\n */\nexport const HvGrid = forwardRef<\n // no-indent\n HTMLDivElement,\n HvGridProps\n>(function HvGrid(props, ref) {\n const {\n item,\n container,\n spacing = \"auto\",\n rowSpacing,\n columnSpacing,\n columns,\n classes: classesProp,\n ...others\n } = useDefaultProps(\"HvGrid\", props);\n\n const { classes } = useClasses(classesProp);\n\n // Fixes MUI error when using spacings as objects and the grid is an item and container\n // When set to \"auto\", the spacing changes depending on the screen's breakpoint\n // The condition avoids using useWidth and re-rendering the component unnecessarily\n if (\n container &&\n item &&\n (spacing === \"auto\" \|\| rowSpacing === \"auto\" \|\| columnSpacing === \"auto\")\n ) {\n return (\n <WidthGrid\n ref={ref}\n classes={classes}\n item={item}\n container={container}\n spacing={spacing}\n rowSpacing={rowSpacing}\n columnSpacing={columnSpacing}\n columns={columns}\n {...others}\n />\n );\n }\n\n const containerProps = container\n ? getContainerProps(spacing, rowSpacing, columnSpacing, columns)\n : {};\n\n return (\n <MuiGrid\n ref={ref}\n classes={classes}\n item={item}\n {...containerProps}\n {...others}\n />\n );\n});\n"],"names":["WidthGrid","HvGrid"],"mappings":";;;;;;;AAcA,MAAM,qBAAqB;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,qBAAqB;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAuHA,SAAS,eAAe,SAAiC;AACnD,MAAA;AAEA,MAAA,OAAO,YAAY,UAAU;AAC/B,QAAI,YAAY,QAAQ;AACR,oBAAA;AAAA,IAAA,OACT;AACL,oBAAc,mBAAmB,OAAO;AAAA,IAAA;AAAA,EAC1C,WACS,OAAO,YAAY,UAAU;AACxB,kBAAA,OAAO,KAAK,OAAO,EAAE;AAAA,MACjC,CAAC,KAAK,OAAO;AACP,YAAA,EAAE,IAAI,mBAAmB,QAAQ,EAAE,CAAC,KAAK,QAAQ,EAAE;AAChD,eAAA;AAAA,MACT;AAAA,MACA,CAAA;AAAA,IACF;AAAA,EAAA,WACS,YAAY,GAAG;AACV,kBAAA,EAAE,IAAI,EAAE;AAAA,EAAA,OACjB;AACS,kBAAA;AAAA,EAAA;AAGT,SAAA;AACT;AAEA,SAAS,mBAAmB,SAAiC;AACvD,MAAA;AAEJ,MAAI,YAAY,QAAQ;AACJ,sBAAA;AAAA,EAAA,OACb;AACa,sBAAA;AAAA,EAAA;AAGb,SAAA;AACT;AAEA,SAAS,kBACP,SACA,YACA,eACA,SACA;AACM,QAAA,iBAGF,EAAE,WAAW,KAAK;AAEtB,MAAI,WAAW,MAAM;AACJ,mBAAA,UAAU,eAAe,OAAO;AAAA,EAAA;AAEjD,MAAI,cAAc,MAAM;AACP,mBAAA,aAAa,eAAe,UAAU;AAAA,EAAA;AAEvD,MAAI,iBAAiB,MAAM;AACV,mBAAA,gBAAgB,eAAe,aAAa;AAAA,EAAA;AAE7D,MAAI,WAAW,MAAM;AACJ,mBAAA,UAAU,mBAAmB,OAAO;AAAA,EAAA;AAG9C,SAAA;AACT;AAEA,MAAM,YAAY,WAIhB,SAASA,WAAU,OAAO,KAAK;AACzB,QAAA,EAAE,WAAW,SAAS,YAAY,eAAe,SAAS,GAAG,WACjE;AAEF,QAAM,QAAQ,SAAS;AAEvB,QAAM,iBAAiB,YACnB;AAAA,IACE,YAAY,SAAS,QAAQ;AAAA,IAC7B,eAAe,SAAS,QAAQ;AAAA,IAChC,kBAAkB,SAAS,QAAQ;AAAA,IACnC;AAAA,EAAA,IAEF,CAAC;AAEL,6BAAQ,SAAQ,EAAA,KAAW,GAAG,gBAAiB,GAAG,QAAQ;AAC5D,CAAC;AA0BM,MAAM,SAAS,WAIpB,SAASC,QAAO,OAAO,KAAK;AACtB,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,UAAU,KAAK;AAEnC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAK1C,MACE,aACA,SACC,YAAY,UAAU,eAAe,UAAU,kBAAkB,SAClE;AAEE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAIE,QAAA,iBAAiB,YACnB,kBAAkB,SAAS,YAAY,eAAe,OAAO,IAC7D,CAAC;AAGH,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ,CAAC;"}
1	+ {"version":3,"file":"Grid.js","sources":["../../../src/Grid/Grid.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport MuiGrid, { GridProps as MuiGridProps } from \"@mui/material/Grid\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useWidth } from \"../hooks/useWidth\";\nimport { staticClasses, useClasses } from \"./Grid.styles\";\n\nexport { staticClasses as gridClasses };\n\nexport type HvGridClasses = ExtractNames<typeof useClasses>;\n\nconst BREAKPOINT_GUTTERS = {\n xs: 2,\n sm: 2,\n md: 4,\n lg: 4,\n xl: 4,\n};\n\nconst BREAKPOINT_COLUMNS = {\n xs: 4,\n sm: 8,\n md: 12,\n lg: 12,\n xl: 12,\n};\n\nexport type HvGridDirection =\n \| \"row\"\n \| \"row-reverse\"\n \| \"column\"\n \| \"column-reverse\";\n\nexport type HvGridSpacing =\n \| \"xs\"\n \| \"sm\"\n \| \"md\"\n \| \"lg\"\n \| \"xl\"\n \| \"auto\"\n \| 1\n \| 2\n \| 3\n \| 4\n \| 5\n \| 6\n \| 7\n \| 8\n \| 9\n \| 10;\n\nexport interface HvGridProps extends Omit<MuiGridProps, \"classes\" \| \"columns\"> {\n /*\n If `true`, the component will have the flex container behavior.\n * You should be wrapping items with a container.\n /\n container?: boolean;\n /\n If `true`, the component will have the flex item behavior.\n * You should be wrapping items with a container.\n /\n item?: boolean;\n /\n Defines the space between the type item component. It can only be used on a type container component.\n * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n * (number between 0 and 10), breakpoint or auto.\n /\n spacing?: HvGridSpacing \| number;\n /\n Defines the vertical space between the type item component. It can only be used on a type container component.\n * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n * (number between 0 and 10), breakpoint or auto.\n * It overrides the value of the spacing prop.\n /\n rowSpacing?: HvGridSpacing \| number;\n /\n Defines the horizontal space between the type item component. It can only be used on a type container component.\n * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n * (number between 0 and 10), breakpoint or auto.\n * It overrides the value of the spacing prop.\n /\n columnSpacing?: HvGridSpacing \| number;\n /\n The number of columns.\n * Defaults to a 12-column grid.\n * The value \"auto\" implements the Design System directives in terms of variable number of columns.\n * @default 12\n /\n columns?: \"auto\" \| MuiGridProps[\"columns\"];\n /\n Defines the `flex-direction` style property.\n * It is applied for all screen sizes.\n /\n direction?: HvGridDirection;\n /\n Defines the `justify-content` style property.\n * It is applied for all screen sizes.\n /\n justify?:\n \| \"flex-start\"\n \| \"center\"\n \| \"flex-end\"\n \| \"space-between\"\n \| \"space-around\"\n \| \"space-evenly\";\n /\n Defines the number of grids the component is going to use.\n * It's applied for all the screen sizes with the lowest priority.\n /\n xs?: number \| boolean;\n /\n Defines the number of grids the component is going to use.\n * It's applied for the `sm` breakpoint and wider screens if not overridden.\n /\n sm?: number \| boolean;\n /\n Defines the number of grids the component is going to use.\n * It's applied for the `md` breakpoint and wider screens if not overridden.\n /\n md?: number \| boolean;\n /\n Defines the number of grids the component is going to use.\n * It's applied for the `lg` breakpoint and wider screens if not overridden.\n /\n lg?: number \| boolean;\n /\n Defines the number of grids the component is going to use.\n * It's applied for the `xl` breakpoint and wider screens.\n /\n xl?: number \| boolean;\n /\n Defines the `flex-wrap` style property.\n * It's applied for all screen sizes.\n /\n wrap?: \"nowrap\" \| \"wrap\" \| \"wrap-reverse\";\n /\n If `true`, it sets `min-width: 0` on the item.\n * Refer to the limitations section of the documentation to better understand the use case.\n /\n zeroMinWidth?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvGridClasses;\n}\n\nfunction getGridSpacing(spacing: HvGridProps[\"spacing\"]) {\n let gridSpacing: MuiGridProps[\"spacing\"];\n\n if (typeof spacing === \"string\") {\n if (spacing === \"auto\") {\n gridSpacing = BREAKPOINT_GUTTERS;\n } else {\n gridSpacing = BREAKPOINT_GUTTERS[spacing];\n }\n } else if (typeof spacing === \"object\") {\n gridSpacing = Object.keys(spacing).reduce<Record<string, number>>(\n (acc, bp) => {\n acc[bp] = BREAKPOINT_GUTTERS[spacing[bp]] ?? spacing[bp];\n return acc;\n },\n {},\n );\n } else if (spacing === 0) {\n gridSpacing = { xs: 0 };\n } else {\n gridSpacing = spacing;\n }\n\n return gridSpacing;\n}\n\nfunction getNumberOfColumns(columns: HvGridProps[\"columns\"]) {\n let numberOfColumns: MuiGridProps[\"columns\"];\n\n if (columns === \"auto\") {\n numberOfColumns = BREAKPOINT_COLUMNS;\n } else {\n numberOfColumns = columns;\n }\n\n return numberOfColumns;\n}\n\nfunction getContainerProps(\n spacing: HvGridProps[\"spacing\"],\n rowSpacing: HvGridProps[\"rowSpacing\"],\n columnSpacing: HvGridProps[\"columnSpacing\"],\n columns: HvGridProps[\"columns\"],\n) {\n const containerProps: Pick<\n MuiGridProps,\n \"container\" \| \"spacing\" \| \"rowSpacing\" \| \"columnSpacing\" \| \"columns\"\n > = { container: true };\n\n if (spacing != null) {\n containerProps.spacing = getGridSpacing(spacing);\n }\n if (rowSpacing != null) {\n containerProps.rowSpacing = getGridSpacing(rowSpacing);\n }\n if (columnSpacing != null) {\n containerProps.columnSpacing = getGridSpacing(columnSpacing);\n }\n if (columns != null) {\n containerProps.columns = getNumberOfColumns(columns);\n }\n\n return containerProps;\n}\n\nconst WidthGrid = forwardRef<\n // no-indent\n HTMLDivElement,\n HvGridProps\n>(function WidthGrid(props, ref) {\n const { container, spacing, rowSpacing, columnSpacing, columns, ...others } =\n props;\n\n const width = useWidth();\n\n const containerProps = container\n ? getContainerProps(\n spacing === \"auto\" ? width : spacing,\n rowSpacing === \"auto\" ? width : rowSpacing,\n columnSpacing === \"auto\" ? width : columnSpacing,\n columns,\n )\n : {};\n\n return <MuiGrid ref={ref} {...containerProps} {...others} />;\n});\n\n/\n The grid creates visual consistency between layouts while allowing flexibility\n * across a wide variety of designs. This component is based on a 12-column grid layout.\n \n It's based on the [Material UI Grid](https://mui.com/material-ui/react-grid/).\n \n However, the number of columns is set to 12 for all breakpoints, as it serves most\n * of the use cases and simplifies the implementation.\n * To opt-in to the Design System directives, you can set the `columns` prop to `auto`.\n \n Also, the Design System specifications are omissive about the horizontal gutters.\n * The HvGrid sets them to the same value as the vertical gutters, depending on the breakpoint.\n * It can be overridden by setting the `rowSpacing` prop.\n */\nexport const HvGrid = forwardRef<\n // no-indent\n HTMLDivElement,\n HvGridProps\n>(function HvGrid(props, ref) {\n const {\n item,\n container,\n spacing = \"auto\",\n rowSpacing,\n columnSpacing,\n columns,\n classes: classesProp,\n ...others\n } = useDefaultProps(\"HvGrid\", props);\n\n const { classes } = useClasses(classesProp);\n\n // Fixes MUI error when using spacings as objects and the grid is an item and container\n // When set to \"auto\", the spacing changes depending on the screen's breakpoint\n // The condition avoids using useWidth and re-rendering the component unnecessarily\n if (\n container &&\n item &&\n (spacing === \"auto\" \|\| rowSpacing === \"auto\" \|\| columnSpacing === \"auto\")\n ) {\n return (\n <WidthGrid\n ref={ref}\n classes={classes}\n item={item}\n container={container}\n spacing={spacing}\n rowSpacing={rowSpacing}\n columnSpacing={columnSpacing}\n columns={columns}\n {...others}\n />\n );\n }\n\n const containerProps = container\n ? getContainerProps(spacing, rowSpacing, columnSpacing, columns)\n : {};\n\n return (\n <MuiGrid\n ref={ref}\n classes={classes}\n item={item}\n {...containerProps}\n {...others}\n />\n );\n});\n"],"names":["WidthGrid","HvGrid"],"mappings":";;;;;;;AAcA,MAAM,qBAAqB;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,qBAAqB;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAuHA,SAAS,eAAe,SAAiC;AACnD,MAAA;AAEA,MAAA,OAAO,YAAY,UAAU;AAC/B,QAAI,YAAY,QAAQ;AACR,oBAAA;AAAA,IAAA,OACT;AACL,oBAAc,mBAAmB,OAAO;AAAA,IAAA;AAAA,EAC1C,WACS,OAAO,YAAY,UAAU;AACxB,kBAAA,OAAO,KAAK,OAAO,EAAE;AAAA,MACjC,CAAC,KAAK,OAAO;AACP,YAAA,EAAE,IAAI,mBAAmB,QAAQ,EAAE,CAAC,KAAK,QAAQ,EAAE;AAChD,eAAA;AAAA,MACT;AAAA,MACA,CAAA;AAAA,IACF;AAAA,EAAA,WACS,YAAY,GAAG;AACV,kBAAA,EAAE,IAAI,EAAE;AAAA,EAAA,OACjB;AACS,kBAAA;AAAA,EAAA;AAGT,SAAA;AACT;AAEA,SAAS,mBAAmB,SAAiC;AACvD,MAAA;AAEJ,MAAI,YAAY,QAAQ;AACJ,sBAAA;AAAA,EAAA,OACb;AACa,sBAAA;AAAA,EAAA;AAGb,SAAA;AACT;AAEA,SAAS,kBACP,SACA,YACA,eACA,SACA;AACM,QAAA,iBAGF,EAAE,WAAW,KAAK;AAEtB,MAAI,WAAW,MAAM;AACJ,mBAAA,UAAU,eAAe,OAAO;AAAA,EAAA;AAEjD,MAAI,cAAc,MAAM;AACP,mBAAA,aAAa,eAAe,UAAU;AAAA,EAAA;AAEvD,MAAI,iBAAiB,MAAM;AACV,mBAAA,gBAAgB,eAAe,aAAa;AAAA,EAAA;AAE7D,MAAI,WAAW,MAAM;AACJ,mBAAA,UAAU,mBAAmB,OAAO;AAAA,EAAA;AAG9C,SAAA;AACT;AAEA,MAAM,YAAY,WAIhB,SAASA,WAAU,OAAO,KAAK;AACzB,QAAA,EAAE,WAAW,SAAS,YAAY,eAAe,SAAS,GAAG,WACjE;AAEF,QAAM,QAAQ,SAAS;AAEvB,QAAM,iBAAiB,YACnB;AAAA,IACE,YAAY,SAAS,QAAQ;AAAA,IAC7B,eAAe,SAAS,QAAQ;AAAA,IAChC,kBAAkB,SAAS,QAAQ;AAAA,IACnC;AAAA,EAAA,IAEF,CAAC;AAEL,6BAAQ,SAAQ,EAAA,KAAW,GAAG,gBAAiB,GAAG,QAAQ;AAC5D,CAAC;AAgBM,MAAM,SAAS,WAIpB,SAASC,QAAO,OAAO,KAAK;AACtB,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,UAAU,KAAK;AAEnC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAK1C,MACE,aACA,SACC,YAAY,UAAU,eAAe,UAAU,kBAAkB,SAClE;AAEE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAIE,QAAA,iBAAiB,YACnB,kBAAkB,SAAS,YAAY,eAAe,OAAO,IAC7D,CAAC;AAGH,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ,CAAC;"}

package/dist/esm/Radio/Radio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.js","sources":["../../../src/Radio/Radio.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport { RadioProps as MuiRadioProps } from \"@mui/material/Radio\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseRadio } from \"../BaseRadio\";\nimport {\n HvFormElement,\n HvLabel,\n HvLabelProps,\n HvWarningText,\n isInvalid,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Radio.styles\";\n\nexport { staticClasses as radioClasses };\n\nexport type HvRadioClasses = ExtractNames<typeof useClasses>;\n\nexport type HvRadioStatus = \"standBy\" \| \"valid\" \| \"invalid\";\n\nexport interface HvRadioProps\n extends Omit<MuiRadioProps, \"onChange\" \| \"classes\"> {\n /*\n A Jss Object used to override or extend the styles applied to the radio button.\n /\n classes?: HvRadioClasses;\n /\n The form element name.\n /\n name?: string;\n /\n The value of the form element.\n \n The default value is \"on\".\n /\n value?: any;\n /\n The label of the form element.\n \n The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be provided.\n /\n label?: React.ReactNode;\n /\n Properties passed on to the label element.\n /\n labelProps?: HvLabelProps;\n /\n Indicates that user input is required on the form element.\n \n If a single radio button in a group has the required attribute, a radio button in\n * that group must be check, though it doesn't have to be the one with the attribute is applied.\n \n For that reason, the component doesn't make any uncontrolled changes to its validation status.\n * That should ideally be managed in the context of a radio button group.\n /\n required?: boolean;\n /\n Indicates that the form element is not editable.\n /\n readOnly?: boolean;\n /\n Indicates that the form element is disabled.\n /\n disabled?: boolean;\n /\n If `true` the radio button is selected, if set to `false` the radio button is not selected.\n \n When defined the radio button state becomes controlled.\n /\n checked?: boolean;\n /\n When uncontrolled, defines the initial checked state.\n /\n defaultChecked?: boolean;\n /\n The status of the form element.\n \n Valid is correct, invalid is incorrect and standBy means no validations have run.\n /\n status?: HvRadioStatus;\n /\n The error message to show when `status` is \"invalid\".\n /\n statusMessage?: string;\n /\n Identifies the element that provides an error message for the radio button.\n \n Will only be used when the validation status is invalid.\n /\n \"aria-errormessage\"?: string;\n /\n The callback fired when the radio button is pressed.\n /\n onChange?: (\n event: React.ChangeEvent<HTMLInputElement>,\n checked: boolean,\n value: any,\n ) => void;\n /\n Whether the selector should use semantic colors.\n /\n semantic?: boolean;\n /\n Properties passed on to the input element.\n /\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /\n Callback fired when the component is focused with a keyboard.\n * We trigger a `onFocus` callback too.\n /\n onFocusVisible?: (event: React.FocusEvent<any>) => void;\n /* @ignore /\n ref?: MuiRadioProps[\"ref\"];\n /* @ignore /\n component?: MuiRadioProps[\"component\"];\n}\n\n/\n A Radio Button is a mechanism that allows user to select just an option from a group of options.\n \n It should used in a Radio Button Group to present the user with a range of options from\n * which the user <b>may select just one option</b> to complete their task.\n \n Individual use of radio buttons, at least uncontrolled, is unadvised as React state management doesn't\n * respond to the browser's native management of radio inputs checked state.\n */\nexport const HvRadio = forwardRef<HTMLButtonElement, HvRadioProps>(\n function HvRadio(props, ref) {\n const {\n classes: classesProp,\n className,\n id,\n name,\n value = \"on\",\n required,\n readOnly,\n disabled,\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n labelProps,\n checked,\n defaultChecked = false,\n onChange,\n status = \"standBy\",\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n semantic,\n inputProps,\n onFocusVisible,\n onBlur,\n ...others\n } = useDefaultProps(\"HvRadio\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const elementId = useUniqueId(id);\n\n const [focusVisible, setFocusVisible] = useState(false);\n\n const onFocusVisibleCallback = useCallback(\n (evt: React.FocusEvent<any>) => {\n setFocusVisible(true);\n onFocusVisible?.(evt);\n },\n [onFocusVisible],\n );\n\n const onBlurCallback = useCallback(\n (evt: React.FocusEvent<any>) => {\n setFocusVisible(false);\n onBlur?.(evt);\n },\n [onBlur],\n );\n\n const [isChecked, setIsChecked] = useControlled(checked, defaultChecked);\n\n const onLocalChange = useCallback(\n (evt: React.ChangeEvent<HTMLInputElement>, newChecked: boolean) => {\n setIsChecked(newChecked);\n\n onChange?.(evt, newChecked, value);\n },\n [onChange, setIsChecked, value],\n );\n\n // the error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled\n const canShowError =\n ariaErrorMessage == null &&\n status !== undefined &&\n statusMessage !== undefined;\n\n const hasLabel = label != null;\n\n const isStateInvalid = isInvalid(status);\n\n let errorMessageId: string \| undefined;\n if (isStateInvalid) {\n errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n }\n\n const radio = (\n <HvBaseRadio\n ref={ref}\n id={label ? setId(elementId, \"input\") : setId(id, \"input\")}\n name={name}\n className={cx(classes.radio, {\n [classes.invalidRadio]: isStateInvalid,\n })}\n disabled={disabled}\n readOnly={readOnly}\n onChange={onLocalChange}\n value={value}\n checked={isChecked}\n semantic={semantic}\n inputProps={{\n \"aria-invalid\": isStateInvalid ? true : undefined,\n \"aria-errormessage\": errorMessageId,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n ...inputProps,\n }}\n onFocusVisible={onFocusVisibleCallback}\n onBlur={onBlurCallback}\n {...others}\n />\n );\n\n return (\n <HvFormElement\n id={id}\n name={name}\n status={status \|\| \"standBy\"}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n className={cx(classes.root, className)}\n >\n {hasLabel ? (\n <div\n className={cx(classes.container, {\n [classes.disabled]: disabled,\n [classes.focusVisible]: !!(focusVisible && label),\n [classes.invalidContainer]: isStateInvalid,\n [classes.checked]: isChecked,\n [classes.semantic]: semantic,\n })}\n >\n {radio}\n <HvLabel\n id={setId(elementId, \"label\")}\n htmlFor={setId(elementId, \"input\")}\n label={label}\n className={classes.label}\n {...labelProps}\n />\n </div>\n ) : (\n radio\n )}\n {canShowError && (\n <HvWarningText id={setId(elementId, \"error\")} disableBorder>\n {statusMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n },\n);\n"],"names":["HvRadio"],"mappings":"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"}
1	+ {"version":3,"file":"Radio.js","sources":["../../../src/Radio/Radio.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport { RadioProps as MuiRadioProps } from \"@mui/material/Radio\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseRadio } from \"../BaseRadio\";\nimport {\n HvFormElement,\n HvLabel,\n HvLabelProps,\n HvWarningText,\n isInvalid,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Radio.styles\";\n\nexport { staticClasses as radioClasses };\n\nexport type HvRadioClasses = ExtractNames<typeof useClasses>;\n\nexport type HvRadioStatus = \"standBy\" \| \"valid\" \| \"invalid\";\n\nexport interface HvRadioProps\n extends Omit<MuiRadioProps, \"onChange\" \| \"classes\"> {\n /*\n A Jss Object used to override or extend the styles applied to the radio button.\n /\n classes?: HvRadioClasses;\n /\n The form element name.\n /\n name?: string;\n /\n The value of the form element.\n \n The default value is \"on\".\n /\n value?: any;\n /\n The label of the form element.\n \n The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be provided.\n /\n label?: React.ReactNode;\n /\n Properties passed on to the label element.\n /\n labelProps?: HvLabelProps;\n /\n Indicates that user input is required on the form element.\n \n If a single radio button in a group has the required attribute, a radio button in\n * that group must be check, though it doesn't have to be the one with the attribute is applied.\n \n For that reason, the component doesn't make any uncontrolled changes to its validation status.\n * That should ideally be managed in the context of a radio button group.\n /\n required?: boolean;\n /\n Indicates that the form element is not editable.\n /\n readOnly?: boolean;\n /\n Indicates that the form element is disabled.\n /\n disabled?: boolean;\n /\n If `true` the radio button is selected, if set to `false` the radio button is not selected.\n \n When defined the radio button state becomes controlled.\n /\n checked?: boolean;\n /\n When uncontrolled, defines the initial checked state.\n /\n defaultChecked?: boolean;\n /\n The status of the form element.\n \n Valid is correct, invalid is incorrect and standBy means no validations have run.\n /\n status?: HvRadioStatus;\n /\n The error message to show when `status` is \"invalid\".\n /\n statusMessage?: string;\n /\n Identifies the element that provides an error message for the radio button.\n \n Will only be used when the validation status is invalid.\n /\n \"aria-errormessage\"?: string;\n /\n The callback fired when the radio button is pressed.\n /\n onChange?: (\n event: React.ChangeEvent<HTMLInputElement>,\n checked: boolean,\n value: any,\n ) => void;\n /\n Whether the selector should use semantic colors.\n /\n semantic?: boolean;\n /\n Properties passed on to the input element.\n /\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /\n Callback fired when the component is focused with a keyboard.\n * We trigger a `onFocus` callback too.\n /\n onFocusVisible?: (event: React.FocusEvent<any>) => void;\n /* @ignore /\n ref?: MuiRadioProps[\"ref\"];\n /* @ignore /\n component?: MuiRadioProps[\"component\"];\n}\n\n/\n A Radio Button is a mechanism that allows user to select just an option from a group of options.\n \n It should used in a Radio Button Group to present the user with a range of options from\n * which the user may select just one option to complete their task.\n \n Individual use of radio buttons, at least uncontrolled, is unadvised as React state management doesn't\n * respond to the browser's native management of radio inputs checked state.\n */\nexport const HvRadio = forwardRef<HTMLButtonElement, HvRadioProps>(\n function HvRadio(props, ref) {\n const {\n classes: classesProp,\n className,\n id,\n name,\n value = \"on\",\n required,\n readOnly,\n disabled,\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n labelProps,\n checked,\n defaultChecked = false,\n onChange,\n status = \"standBy\",\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n semantic,\n inputProps,\n onFocusVisible,\n onBlur,\n ...others\n } = useDefaultProps(\"HvRadio\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const elementId = useUniqueId(id);\n\n const [focusVisible, setFocusVisible] = useState(false);\n\n const onFocusVisibleCallback = useCallback(\n (evt: React.FocusEvent<any>) => {\n setFocusVisible(true);\n onFocusVisible?.(evt);\n },\n [onFocusVisible],\n );\n\n const onBlurCallback = useCallback(\n (evt: React.FocusEvent<any>) => {\n setFocusVisible(false);\n onBlur?.(evt);\n },\n [onBlur],\n );\n\n const [isChecked, setIsChecked] = useControlled(checked, defaultChecked);\n\n const onLocalChange = useCallback(\n (evt: React.ChangeEvent<HTMLInputElement>, newChecked: boolean) => {\n setIsChecked(newChecked);\n\n onChange?.(evt, newChecked, value);\n },\n [onChange, setIsChecked, value],\n );\n\n // the error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled\n const canShowError =\n ariaErrorMessage == null &&\n status !== undefined &&\n statusMessage !== undefined;\n\n const hasLabel = label != null;\n\n const isStateInvalid = isInvalid(status);\n\n let errorMessageId: string \| undefined;\n if (isStateInvalid) {\n errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n }\n\n const radio = (\n <HvBaseRadio\n ref={ref}\n id={label ? setId(elementId, \"input\") : setId(id, \"input\")}\n name={name}\n className={cx(classes.radio, {\n [classes.invalidRadio]: isStateInvalid,\n })}\n disabled={disabled}\n readOnly={readOnly}\n onChange={onLocalChange}\n value={value}\n checked={isChecked}\n semantic={semantic}\n inputProps={{\n \"aria-invalid\": isStateInvalid ? true : undefined,\n \"aria-errormessage\": errorMessageId,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n ...inputProps,\n }}\n onFocusVisible={onFocusVisibleCallback}\n onBlur={onBlurCallback}\n {...others}\n />\n );\n\n return (\n <HvFormElement\n id={id}\n name={name}\n status={status \|\| \"standBy\"}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n className={cx(classes.root, className)}\n >\n {hasLabel ? (\n <div\n className={cx(classes.container, {\n [classes.disabled]: disabled,\n [classes.focusVisible]: !!(focusVisible && label),\n [classes.invalidContainer]: isStateInvalid,\n [classes.checked]: isChecked,\n [classes.semantic]: semantic,\n })}\n >\n {radio}\n <HvLabel\n id={setId(elementId, \"label\")}\n htmlFor={setId(elementId, \"input\")}\n label={label}\n className={classes.label}\n {...labelProps}\n />\n </div>\n ) : (\n radio\n )}\n {canShowError && (\n <HvWarningText id={setId(elementId, \"error\")} disableBorder>\n {statusMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n },\n);\n"],"names":["HvRadio"],"mappings":"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"}

package/dist/esm/RadioGroup/RadioGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioGroup.js","sources":["../../../src/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n forwardRef,\n useCallback,\n useMemo,\n} from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n HvFormElement,\n HvFormStatus,\n HvInfoMessage,\n HvLabel,\n HvWarningText,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./RadioGroup.styles\";\n\nexport { staticClasses as radioGroupClasses };\n\nexport type HvRadioGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvRadioGroupProps\n extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n /*\n The form element name.\n \n It is propagated to the children radio buttons, unless they already have one (which they shouldn't).\n /\n name?: string;\n /\n The value of the form element, represented in one of the child radio buttons values.\n \n When defined the radio button group state becomes controlled.\n /\n value?: any;\n /\n When uncontrolled, defines the initial value.\n /\n defaultValue?: any;\n /\n The label of the form element.\n \n The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be provided instead.\n /\n label?: React.ReactNode;\n /\n Provide additional descriptive text for the form element.\n /\n description?: React.ReactNode;\n /\n Indicates that the form element is disabled.\n * If `true` the state is propagated to the children radio buttons.\n /\n disabled?: boolean;\n /\n Indicates that the form element is not editable.\n * If `true` the state is propagated to the children radio buttons.\n /\n readOnly?: boolean;\n /\n Indicates that user input is required on the form element.\n * If `true` the state is propagated to the children radio buttons' input element.\n /\n required?: boolean;\n /\n The status of the form element.\n \n Valid is correct, invalid is incorrect and standBy means no validations have run.\n \n When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to the state.\n /\n status?: HvFormStatus;\n /\n The error message to show when `status` is \"invalid\".\n /\n statusMessage?: React.ReactNode;\n /\n The callback fired when the value changes.\n /\n onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any) => void;\n /\n Indicates whether the radio buttons group's orientation is horizontal or vertical.\n \n Defaults to vertical.\n /\n orientation?: \"vertical\" \| \"horizontal\";\n /\n A Jss Object used to override or extend the component styles applied.\n /\n classes?: HvRadioGroupClasses;\n}\n\nconst getValueFromSelectedChildren = (children: React.ReactNode) => {\n const childrenArray = Children.toArray(children);\n const childrenCount = childrenArray.length;\n for (let i = 0; i !== childrenCount; i += 1) {\n const child: any = childrenArray[i];\n\n const childIsControlled = child?.props?.checked !== undefined;\n const childIsSelected = childIsControlled\n ? child?.props?.checked\n : child?.props?.defaultChecked;\n\n if (childIsSelected) {\n return child?.props?.value;\n }\n }\n\n return null;\n};\n\n/\n A group of radio buttons.\n \n A radio group is a type of selection list that can only have a single entry checked at any one time.\n */\nexport const HvRadioGroup = forwardRef<HTMLDivElement, HvRadioGroupProps>(\n function HvRadioGroup(props, ref) {\n const {\n id,\n classes: classesProp,\n className,\n children,\n name,\n value: valueProp,\n defaultValue,\n label,\n description,\n status,\n statusMessage,\n required,\n readOnly,\n disabled,\n orientation = \"vertical\",\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-errormessage\": ariaErrorMessage,\n onChange,\n ...others\n } = useDefaultProps(\"HvRadioGroup\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const elementId = useUniqueId(id);\n\n const [value, setValue] = useControlled(\n valueProp,\n defaultValue !== undefined\n ? defaultValue\n : // When uncontrolled and no default value is given,\n // extract the initial selected values from the children own state\n () => getValueFromSelectedChildren(children),\n );\n\n const onChildChangeInterceptor = useCallback(\n (\n childOnChange: (\n event: React.ChangeEvent<HTMLInputElement>,\n checked: boolean,\n value: any,\n ) => void,\n event: React.ChangeEvent<HTMLInputElement>,\n isChecked: boolean,\n newValue: any,\n ) => {\n childOnChange?.(event, isChecked, newValue);\n\n onChange?.(event, newValue);\n\n setValue(newValue);\n },\n [onChange, setValue],\n );\n\n const modifiedChildren = useMemo(() => {\n return Children.map(children, (child: any) => {\n const childValue = child?.props?.value ?? \"on\";\n\n const childIsSelected = childValue === value;\n\n return cloneElement(child, {\n checked: childIsSelected,\n name: child?.props?.name \|\| name \|\| elementId,\n onChange: (\n event: React.ChangeEvent<HTMLInputElement>,\n isChecked: boolean,\n newValue: any,\n ) =>\n onChildChangeInterceptor(\n child?.props?.onChange,\n event,\n isChecked,\n newValue,\n ),\n inputProps: {\n ...child?.props?.inputProps,\n // Set the required attribute directly in the input\n // the radio form element context shouldn't be aware so the\n // label doesn't show redundant asterisk\n required,\n },\n disabled: disabled \|\| child?.props?.disabled,\n readOnly: readOnly \|\| child?.props?.readOnly,\n });\n });\n }, [\n children,\n disabled,\n elementId,\n name,\n onChildChangeInterceptor,\n readOnly,\n required,\n value,\n ]);\n\n // The error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) \|\|\n (status === undefined && required));\n\n const errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n\n return (\n <HvFormElement\n id={id}\n name={name}\n status={status \|\| \"standBy\"}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n className={cx(classes.root, className)}\n >\n {label && (\n <HvLabel\n showGutter\n id={setId(elementId, \"label\")}\n label={label}\n className={classes.label}\n />\n )}\n\n {description && (\n <HvInfoMessage id={setId(elementId, \"description\")}>\n {description}\n </HvInfoMessage>\n )}\n\n <div\n ref={ref}\n role=\"radiogroup\"\n aria-label={ariaLabel}\n aria-labelledby={\n ariaLabelledBy \|\| (label && setId(elementId, \"label\")) \|\| undefined\n }\n aria-invalid={status === \"invalid\" ? true : undefined}\n aria-errormessage={status === \"invalid\" ? errorMessageId : undefined}\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n className={cx(classes.group, {\n [classes.vertical]: orientation === \"vertical\",\n [classes.horizontal]: orientation === \"horizontal\",\n [classes.invalid]: status === \"invalid\",\n })}\n {...others}\n >\n {modifiedChildren}\n </div>\n\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableBorder\n className={classes.error}\n >\n {statusMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n },\n);\n"],"names":["HvRadioGroup"],"mappings":";;;;;;;;;;;;AAsGA,MAAM,+BAA+B,CAAC,aAA8B;AAC5D,QAAA,gBAAgB,SAAS,QAAQ,QAAQ;AAC/C,QAAM,gBAAgB,cAAc;AACpC,WAAS,IAAI,GAAG,MAAM,eAAe,KAAK,GAAG;AACrC,UAAA,QAAa,cAAc,CAAC;AAE5B,UAAA,oBAAoB,OAAO,OAAO,YAAY;AACpD,UAAM,kBAAkB,oBACpB,OAAO,OAAO,UACd,OAAO,OAAO;AAElB,QAAI,iBAAiB;AACnB,aAAO,OAAO,OAAO;AAAA,IAAA;AAAA,EACvB;AAGK,SAAA;AACT;AAOO,MAAM,eAAe;AAAA,EAC1B,SAASA,cAAa,OAAO,KAAK;AAC1B,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,qBAAqB;AAAA,MACrB;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,gBAAgB,KAAK;AAEzC,UAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,UAAA,YAAY,YAAY,EAAE;AAE1B,UAAA,CAAC,OAAO,QAAQ,IAAI;AAAA,MACxB;AAAA,MACA,iBAAiB,SACb;AAAA;AAAA;AAAA,QAGA,MAAM,6BAA6B,QAAQ;AAAA;AAAA,IACjD;AAEA,UAAM,2BAA2B;AAAA,MAC/B,CACE,eAKA,OACA,WACA,aACG;AACa,wBAAA,OAAO,WAAW,QAAQ;AAE1C,mBAAW,OAAO,QAAQ;AAE1B,iBAAS,QAAQ;AAAA,MACnB;AAAA,MACA,CAAC,UAAU,QAAQ;AAAA,IACrB;AAEM,UAAA,mBAAmB,QAAQ,MAAM;AACrC,aAAO,SAAS,IAAI,UAAU,CAAC,UAAe;AACtC,cAAA,aAAa,OAAO,OAAO,SAAS;AAE1C,cAAM,kBAAkB,eAAe;AAEvC,eAAO,aAAa,OAAO;AAAA,UACzB,SAAS;AAAA,UACT,MAAM,OAAO,OAAO,QAAQ,QAAQ;AAAA,UACpC,UAAU,CACR,OACA,WACA,aAEA;AAAA,YACE,OAAO,OAAO;AAAA,YACd;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UACF,YAAY;AAAA,YACV,GAAG,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,YAIjB;AAAA,UACF;AAAA,UACA,UAAU,YAAY,OAAO,OAAO;AAAA,UACpC,UAAU,YAAY,OAAO,OAAO;AAAA,QAAA,CACrC;AAAA,MAAA,CACF;AAAA,IAAA,GACA;AAAA,MACD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAMK,UAAA,eACJ,oBAAoB,SAClB,WAAW,UAAa,kBAAkB,UACzC,WAAW,UAAa;AAE7B,UAAM,iBAAiB,eACnB,MAAM,WAAW,OAAO,IACxB;AAGF,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,QAAQ,UAAU;AAAA,QAClB;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QAEpC,UAAA;AAAA,UACC,SAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,YAAU;AAAA,cACV,IAAI,MAAM,WAAW,OAAO;AAAA,cAC5B;AAAA,cACA,WAAW,QAAQ;AAAA,YAAA;AAAA,UACrB;AAAA,UAGD,mCACE,eAAc,EAAA,IAAI,MAAM,WAAW,aAAa,GAC9C,UACH,aAAA;AAAA,UAGF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,MAAK;AAAA,cACL,cAAY;AAAA,cACZ,mBACE,kBAAmB,SAAS,MAAM,WAAW,OAAO,KAAM;AAAA,cAE5D,gBAAc,WAAW,YAAY,OAAO;AAAA,cAC5C,qBAAmB,WAAW,YAAY,iBAAiB;AAAA,cAC3D,oBACE,CAAC,eAAe,MAAM,WAAW,aAAa,GAAG,eAAe,EAC7D,KAAK,GAAG,EACR,UAAU;AAAA,cAEf,WAAW,GAAG,QAAQ,OAAO;AAAA,gBAC3B,CAAC,QAAQ,QAAQ,GAAG,gBAAgB;AAAA,gBACpC,CAAC,QAAQ,UAAU,GAAG,gBAAgB;AAAA,gBACtC,CAAC,QAAQ,OAAO,GAAG,WAAW;AAAA,cAAA,CAC/B;AAAA,cACA,GAAG;AAAA,cAEH,UAAA;AAAA,YAAA;AAAA,UACH;AAAA,UAEC,gBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,WAAW,OAAO;AAAA,cAC5B,eAAa;AAAA,cACb,WAAW,QAAQ;AAAA,cAElB,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAGN;"}
1	+ {"version":3,"file":"RadioGroup.js","sources":["../../../src/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n forwardRef,\n useCallback,\n useMemo,\n} from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n HvFormElement,\n HvFormStatus,\n HvInfoMessage,\n HvLabel,\n HvWarningText,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./RadioGroup.styles\";\n\nexport { staticClasses as radioGroupClasses };\n\nexport type HvRadioGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvRadioGroupProps\n extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n /*\n The form element name.\n \n It is propagated to the children radio buttons, unless they already have one (which they shouldn't).\n /\n name?: string;\n /\n The value of the form element, represented in one of the child radio buttons values.\n \n When defined the radio button group state becomes controlled.\n /\n value?: any;\n /\n When uncontrolled, defines the initial value.\n /\n defaultValue?: any;\n /\n The label of the form element.\n \n The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be provided instead.\n /\n label?: React.ReactNode;\n /\n Provide additional descriptive text for the form element.\n /\n description?: React.ReactNode;\n /\n Indicates that the form element is disabled.\n * If `true` the state is propagated to the children radio buttons.\n /\n disabled?: boolean;\n /\n Indicates that the form element is not editable.\n * If `true` the state is propagated to the children radio buttons.\n /\n readOnly?: boolean;\n /\n Indicates that user input is required on the form element.\n * If `true` the state is propagated to the children radio buttons' input element.\n /\n required?: boolean;\n /\n The status of the form element.\n \n Valid is correct, invalid is incorrect and standBy means no validations have run.\n \n When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to the state.\n /\n status?: HvFormStatus;\n /\n The error message to show when `status` is \"invalid\".\n /\n statusMessage?: React.ReactNode;\n /\n The callback fired when the value changes.\n /\n onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any) => void;\n /\n Indicates whether the radio buttons group's orientation is horizontal or vertical.\n \n Defaults to vertical.\n /\n orientation?: \"vertical\" \| \"horizontal\";\n /\n A Jss Object used to override or extend the component styles applied.\n /\n classes?: HvRadioGroupClasses;\n}\n\nconst getValueFromSelectedChildren = (children: React.ReactNode) => {\n const childrenArray = Children.toArray(children);\n const childrenCount = childrenArray.length;\n for (let i = 0; i !== childrenCount; i += 1) {\n const child: any = childrenArray[i];\n\n const childIsControlled = child?.props?.checked !== undefined;\n const childIsSelected = childIsControlled\n ? child?.props?.checked\n : child?.props?.defaultChecked;\n\n if (childIsSelected) {\n return child?.props?.value;\n }\n }\n\n return null;\n};\n\n/\n A radio group is a type of selection list that can only have a single entry checked at any one time.\n */\nexport const HvRadioGroup = forwardRef<HTMLDivElement, HvRadioGroupProps>(\n function HvRadioGroup(props, ref) {\n const {\n id,\n classes: classesProp,\n className,\n children,\n name,\n value: valueProp,\n defaultValue,\n label,\n description,\n status,\n statusMessage,\n required,\n readOnly,\n disabled,\n orientation = \"vertical\",\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-errormessage\": ariaErrorMessage,\n onChange,\n ...others\n } = useDefaultProps(\"HvRadioGroup\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const elementId = useUniqueId(id);\n\n const [value, setValue] = useControlled(\n valueProp,\n defaultValue !== undefined\n ? defaultValue\n : // When uncontrolled and no default value is given,\n // extract the initial selected values from the children own state\n () => getValueFromSelectedChildren(children),\n );\n\n const onChildChangeInterceptor = useCallback(\n (\n childOnChange: (\n event: React.ChangeEvent<HTMLInputElement>,\n checked: boolean,\n value: any,\n ) => void,\n event: React.ChangeEvent<HTMLInputElement>,\n isChecked: boolean,\n newValue: any,\n ) => {\n childOnChange?.(event, isChecked, newValue);\n\n onChange?.(event, newValue);\n\n setValue(newValue);\n },\n [onChange, setValue],\n );\n\n const modifiedChildren = useMemo(() => {\n return Children.map(children, (child: any) => {\n const childValue = child?.props?.value ?? \"on\";\n\n const childIsSelected = childValue === value;\n\n return cloneElement(child, {\n checked: childIsSelected,\n name: child?.props?.name \|\| name \|\| elementId,\n onChange: (\n event: React.ChangeEvent<HTMLInputElement>,\n isChecked: boolean,\n newValue: any,\n ) =>\n onChildChangeInterceptor(\n child?.props?.onChange,\n event,\n isChecked,\n newValue,\n ),\n inputProps: {\n ...child?.props?.inputProps,\n // Set the required attribute directly in the input\n // the radio form element context shouldn't be aware so the\n // label doesn't show redundant asterisk\n required,\n },\n disabled: disabled \|\| child?.props?.disabled,\n readOnly: readOnly \|\| child?.props?.readOnly,\n });\n });\n }, [\n children,\n disabled,\n elementId,\n name,\n onChildChangeInterceptor,\n readOnly,\n required,\n value,\n ]);\n\n // The error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) \|\|\n (status === undefined && required));\n\n const errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n\n return (\n <HvFormElement\n id={id}\n name={name}\n status={status \|\| \"standBy\"}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n className={cx(classes.root, className)}\n >\n {label && (\n <HvLabel\n showGutter\n id={setId(elementId, \"label\")}\n label={label}\n className={classes.label}\n />\n )}\n\n {description && (\n <HvInfoMessage id={setId(elementId, \"description\")}>\n {description}\n </HvInfoMessage>\n )}\n\n <div\n ref={ref}\n role=\"radiogroup\"\n aria-label={ariaLabel}\n aria-labelledby={\n ariaLabelledBy \|\| (label && setId(elementId, \"label\")) \|\| undefined\n }\n aria-invalid={status === \"invalid\" ? true : undefined}\n aria-errormessage={status === \"invalid\" ? errorMessageId : undefined}\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n className={cx(classes.group, {\n [classes.vertical]: orientation === \"vertical\",\n [classes.horizontal]: orientation === \"horizontal\",\n [classes.invalid]: status === \"invalid\",\n })}\n {...others}\n >\n {modifiedChildren}\n </div>\n\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableBorder\n className={classes.error}\n >\n {statusMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n },\n);\n"],"names":["HvRadioGroup"],"mappings":"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"}

package/dist/esm/Snackbar/Snackbar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Snackbar.js","sources":["../../../src/Snackbar/Snackbar.tsx"],"sourcesContent":["import { forwardRef, useCallback } from \"react\";\nimport Slide, { SlideProps } from \"@mui/material/Slide\";\nimport MuiSnackbar, {\n SnackbarProps as MuiSnackbarProps,\n SnackbarCloseReason,\n SnackbarOrigin,\n} from \"@mui/material/Snackbar\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvActionGeneric, HvActionsGenericProps } from \"../ActionsGeneric\";\nimport { capitalize } from \"../utils/helpers\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Snackbar.styles\";\nimport { HvSnackbarContent, HvSnackbarContentProps } from \"./SnackbarContent\";\nimport { HvSnackbarVariant } from \"./types\";\n\nexport { staticClasses as snackbarClasses };\n\nexport type HvSnackbarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSnackbarProps\n extends Omit<MuiSnackbarProps, \"action\" \| \"classes\" \| \"children\"> {\n /** If true, Snackbar is open. /\n open?: boolean;\n /\n Callback fired when the component requests to be closed.\n * Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop.\n * The reason parameter can optionally be used to control the response to onClose, for example ignoring click away.\n * /\n onClose?: (\n event: Event \| React.SyntheticEvent<any, Event>,\n reason: SnackbarCloseReason,\n ) => void;\n /* The message to display. /\n label?: React.ReactNode;\n /\n The anchor of the Snackbar. vertical: \"top\", \"bottom\" \| horizontal: \"left\", \"center\", \"right\".\n * It defines where the snackbar will end his animation /\n anchorOrigin?: SnackbarOrigin;\n /* The number of milliseconds to wait before automatically calling the onClose function. onClose should then set the state of the open prop to hide the Snackbar /\n autoHideDuration?: number;\n /* Variant of the snackbar. /\n variant?: HvSnackbarVariant;\n /* Custom icon to replace the variant default. /\n customIcon?: React.ReactNode;\n /* Controls if the associated icon to the variant should be shown. /\n showIcon?: boolean;\n /* Action to display. /\n action?: React.ReactNode \| HvActionGeneric;\n /\n The callback function called when an action is triggered, receiving `action` as parameter.\n \n @deprecated Use `onAction` instead.\n * /\n actionCallback?: HvActionsGenericProps[\"actionsCallback\"];\n /* The callback function called when an action is triggered, receiving `action` as parameter. /\n onAction?: HvActionsGenericProps[\"onAction\"];\n /* Duration of transition in milliseconds. /\n transitionDuration?: number;\n /* Direction of slide transition. /\n transitionDirection?: \"up\" \| \"down\" \| \"left\" \| \"right\";\n /* The container the snackbar should slide from. /\n container?: SlideProps[\"container\"];\n /* Custom offset from top/bottom of the page, in px. /\n offset?: number;\n /* Others applied to the content of the snackbar. /\n snackbarContentProps?: HvSnackbarContentProps;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvSnackbarClasses;\n /* @ignore /\n ref?: MuiSnackbarProps[\"ref\"];\n}\n\n/\n A Snackbar provides brief messages about app processes.\n * It is dismissed automatically after a given interval.\n \n Snackbar can be built with two different components.\n * ~~One~~ ~~is the~~ HvSnackbar, which wraps all the positioning, transition, auto hide, etc.\n * ~~The~~ ~~other is the~~ HvSnackbarContent, which allows a finer control and customization of the content of the Snackbar.\n */\nexport const HvSnackbar = forwardRef<\n React.ComponentRef<typeof MuiSnackbar>,\n HvSnackbarProps\n>(function HvSnackbar(props, ref) {\n const {\n classes: classesProp,\n className,\n id,\n open = false,\n onClose,\n label = \"\",\n anchorOrigin = { vertical: \"top\", horizontal: \"right\" },\n autoHideDuration = 5000,\n variant = \"default\",\n showIcon = false,\n customIcon = null,\n action = null,\n actionCallback, // TODO - remove in v6\n onAction,\n transitionDuration = 300,\n transitionDirection = \"left\",\n container,\n offset = 60,\n snackbarContentProps,\n ...others\n } = useDefaultProps(\"HvSnackbar\", props);\n const { classes } = useClasses(classesProp);\n\n const anchorOriginOffset = {\n anchorOriginTop: {\n top: `${offset}px`,\n },\n anchorOriginBottom: {\n bottom: `${offset}px`,\n },\n };\n\n const SlideTransition = useCallback<\n NonNullable<MuiSnackbarProps[\"TransitionComponent\"]>\n >(\n (properties) => (\n <Slide\n {...properties}\n container={container}\n direction={transitionDirection}\n />\n ),\n [container, transitionDirection],\n );\n\n return (\n <MuiSnackbar\n ref={ref}\n style={\n anchorOriginOffset[`anchorOrigin${capitalize(anchorOrigin.vertical)}`]\n }\n classes={classes}\n className={className}\n id={id}\n anchorOrigin={anchorOrigin}\n open={open}\n onClose={onClose}\n autoHideDuration={autoHideDuration}\n transitionDuration={transitionDuration}\n TransitionComponent={SlideTransition}\n {...others}\n >\n <HvSnackbarContent\n id={setId(id, \"content\")}\n label={label}\n variant={variant}\n customIcon={customIcon}\n showIcon={showIcon}\n action={action}\n actionCallback={actionCallback}\n onAction={onAction}\n {...snackbarContentProps}\n />\n </MuiSnackbar>\n );\n});\n"],"names":["HvSnackbar","MuiSnackbar"],"mappings":";;;;;;;;;;AAoFO,MAAM,aAAa,WAGxB,SAASA,YAAW,OAAO,KAAK;AAC1B,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,QAAQ;AAAA,IACR,eAAe,EAAE,UAAU,OAAO,YAAY,QAAQ;AAAA,IACtD,mBAAmB;AAAA,IACnB,UAAU;AAAA,IACV,WAAW;AAAA,IACX,aAAa;AAAA,IACb,SAAS;AAAA,IACT;AAAA;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,IACtB;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,qBAAqB;AAAA,IACzB,iBAAiB;AAAA,MACf,KAAK,GAAG,MAAM;AAAA,IAChB;AAAA,IACA,oBAAoB;AAAA,MAClB,QAAQ,GAAG,MAAM;AAAA,IAAA;AAAA,EAErB;AAEA,QAAM,kBAAkB;AAAA,IAGtB,CAAC,eACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,CAAC,WAAW,mBAAmB;AAAA,EACjC;AAGE,SAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,OACE,mBAAmB,eAAe,WAAW,aAAa,QAAQ,CAAC,EAAE;AAAA,MAEvE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,MACpB,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,SAAS;AAAA,UACvB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ,CAAC;"}
1	+ {"version":3,"file":"Snackbar.js","sources":["../../../src/Snackbar/Snackbar.tsx"],"sourcesContent":["import { forwardRef, useCallback } from \"react\";\nimport Slide, { SlideProps } from \"@mui/material/Slide\";\nimport MuiSnackbar, {\n SnackbarProps as MuiSnackbarProps,\n SnackbarCloseReason,\n SnackbarOrigin,\n} from \"@mui/material/Snackbar\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvActionGeneric, HvActionsGenericProps } from \"../ActionsGeneric\";\nimport { capitalize } from \"../utils/helpers\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Snackbar.styles\";\nimport { HvSnackbarContent, HvSnackbarContentProps } from \"./SnackbarContent\";\nimport { HvSnackbarVariant } from \"./types\";\n\nexport { staticClasses as snackbarClasses };\n\nexport type HvSnackbarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSnackbarProps\n extends Omit<MuiSnackbarProps, \"action\" \| \"classes\" \| \"children\"> {\n /** If true, Snackbar is open. /\n open?: boolean;\n /\n Callback fired when the component requests to be closed.\n * Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop.\n * The reason parameter can optionally be used to control the response to onClose, for example ignoring click away.\n * /\n onClose?: (\n event: Event \| React.SyntheticEvent<any, Event>,\n reason: SnackbarCloseReason,\n ) => void;\n /* The message to display. /\n label?: React.ReactNode;\n /\n The anchor of the Snackbar. vertical: \"top\", \"bottom\" \| horizontal: \"left\", \"center\", \"right\".\n * It defines where the snackbar will end his animation /\n anchorOrigin?: SnackbarOrigin;\n /* The number of milliseconds to wait before automatically calling the onClose function. onClose should then set the state of the open prop to hide the Snackbar /\n autoHideDuration?: number;\n /* Variant of the snackbar. /\n variant?: HvSnackbarVariant;\n /* Custom icon to replace the variant default. /\n customIcon?: React.ReactNode;\n /* Controls if the associated icon to the variant should be shown. /\n showIcon?: boolean;\n /* Action to display. /\n action?: React.ReactNode \| HvActionGeneric;\n /\n The callback function called when an action is triggered, receiving `action` as parameter.\n \n @deprecated Use `onAction` instead.\n * /\n actionCallback?: HvActionsGenericProps[\"actionsCallback\"];\n /* The callback function called when an action is triggered, receiving `action` as parameter. /\n onAction?: HvActionsGenericProps[\"onAction\"];\n /* Duration of transition in milliseconds. /\n transitionDuration?: number;\n /* Direction of slide transition. /\n transitionDirection?: \"up\" \| \"down\" \| \"left\" \| \"right\";\n /* The container the snackbar should slide from. /\n container?: SlideProps[\"container\"];\n /* Custom offset from top/bottom of the page, in px. /\n offset?: number;\n /* Others applied to the content of the snackbar. /\n snackbarContentProps?: HvSnackbarContentProps;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvSnackbarClasses;\n /* @ignore /\n ref?: MuiSnackbarProps[\"ref\"];\n}\n\n/\n A Snackbar provides brief messages about app processes.\n * It is dismissed automatically after a given interval.\n \n Snackbar can be built with two different components:\n * - `HvSnackbar`, which wraps all the positioning, transition, auto hide, etc.\n * - `HvSnackbarContent`, which allows a finer control and customization of the content of the Snackbar.\n */\nexport const HvSnackbar = forwardRef<\n React.ComponentRef<typeof MuiSnackbar>,\n HvSnackbarProps\n>(function HvSnackbar(props, ref) {\n const {\n classes: classesProp,\n className,\n id,\n open = false,\n onClose,\n label = \"\",\n anchorOrigin = { vertical: \"top\", horizontal: \"right\" },\n autoHideDuration = 5000,\n variant = \"default\",\n showIcon = false,\n customIcon = null,\n action = null,\n actionCallback, // TODO - remove in v6\n onAction,\n transitionDuration = 300,\n transitionDirection = \"left\",\n container,\n offset = 60,\n snackbarContentProps,\n ...others\n } = useDefaultProps(\"HvSnackbar\", props);\n const { classes } = useClasses(classesProp);\n\n const anchorOriginOffset = {\n anchorOriginTop: {\n top: `${offset}px`,\n },\n anchorOriginBottom: {\n bottom: `${offset}px`,\n },\n };\n\n const SlideTransition = useCallback<\n NonNullable<MuiSnackbarProps[\"TransitionComponent\"]>\n >(\n (properties) => (\n <Slide\n {...properties}\n container={container}\n direction={transitionDirection}\n />\n ),\n [container, transitionDirection],\n );\n\n return (\n <MuiSnackbar\n ref={ref}\n style={\n anchorOriginOffset[`anchorOrigin${capitalize(anchorOrigin.vertical)}`]\n }\n classes={classes}\n className={className}\n id={id}\n anchorOrigin={anchorOrigin}\n open={open}\n onClose={onClose}\n autoHideDuration={autoHideDuration}\n transitionDuration={transitionDuration}\n TransitionComponent={SlideTransition}\n {...others}\n >\n <HvSnackbarContent\n id={setId(id, \"content\")}\n label={label}\n variant={variant}\n customIcon={customIcon}\n showIcon={showIcon}\n action={action}\n actionCallback={actionCallback}\n onAction={onAction}\n {...snackbarContentProps}\n />\n </MuiSnackbar>\n );\n});\n"],"names":["HvSnackbar","MuiSnackbar"],"mappings":";;;;;;;;;;AAoFO,MAAM,aAAa,WAGxB,SAASA,YAAW,OAAO,KAAK;AAC1B,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,QAAQ;AAAA,IACR,eAAe,EAAE,UAAU,OAAO,YAAY,QAAQ;AAAA,IACtD,mBAAmB;AAAA,IACnB,UAAU;AAAA,IACV,WAAW;AAAA,IACX,aAAa;AAAA,IACb,SAAS;AAAA,IACT;AAAA;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,IACtB;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,qBAAqB;AAAA,IACzB,iBAAiB;AAAA,MACf,KAAK,GAAG,MAAM;AAAA,IAChB;AAAA,IACA,oBAAoB;AAAA,MAClB,QAAQ,GAAG,MAAM;AAAA,IAAA;AAAA,EAErB;AAEA,QAAM,kBAAkB;AAAA,IAGtB,CAAC,eACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,CAAC,WAAW,mBAAmB;AAAA,EACjC;AAGE,SAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,OACE,mBAAmB,eAAe,WAAW,aAAa,QAAQ,CAAC,EAAE;AAAA,MAEvE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,MACpB,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,SAAS;AAAA,UACvB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ,CAAC;"}

package/dist/esm/SnackbarProvider/SnackbarProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SnackbarProvider.js","sources":["../../../src/SnackbarProvider/SnackbarProvider.tsx"],"sourcesContent":["import { forwardRef, useCallback, useMemo } from \"react\";\nimport { SnackbarOrigin } from \"@mui/material/Snackbar\";\nimport {\n OptionsObject,\n SnackbarContent,\n SnackbarProvider,\n SnackbarProviderProps,\n useSnackbar,\n} from \"notistack\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n HvSnackbarContent,\n HvSnackbarContentProps,\n} from \"../Snackbar/SnackbarContent\";\nimport { HvSnackbarVariant } from \"../Snackbar/types\";\nimport { staticClasses, useClasses } from \"./SnackbarProvider.styles\";\n\nexport { staticClasses as snackbarProviderClasses };\n\nexport type HvSnackbarProviderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSnackbarProviderProps {\n /** Your component tree. /\n children: React.ReactNode;\n /* Max visible snackbars. /\n maxSnack?: number;\n /* How much time the snackbar remains visible in milliseconds. /\n autoHideDuration?: number;\n /* Where is the snackbar placed. /\n anchorOrigin?: SnackbarOrigin;\n /* Class object used to override notistack classes. /\n notistackClassesOverride?: SnackbarProviderProps[\"classes\"];\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvSnackbarProviderClasses;\n /* Class names to be applied. /\n className?: string;\n /* The container the snackbar should slide from. /\n container?: SnackbarProviderProps[\"domRoot\"];\n}\n\nexport interface HvNotistackSnackMessageProps extends OptionsObject {\n /* Id to be applied to the root node. /\n id?: string;\n /* class name to apply on the root node /\n className?: string;\n /* Your component tree. /\n message?: React.ReactNode;\n /* Variant of the snackbar. /\n variant?: HvSnackbarVariant;\n /* Extra values to pass to the snackbar. */\n snackbarContentProps?: HvSnackbarContentProps;\n}\n\nconst HvNotistackSnackMessage = forwardRef<\n HTMLDivElement,\n HvNotistackSnackMessageProps\n>(function HvNotistackSnackMessage(props, ref) {\n const { id, message, variant = \"success\", snackbarContentProps } = props;\n\n return (\n <SnackbarContent ref={ref}>\n <HvSnackbarContent\n id={id}\n variant={variant}\n showIcon\n label={message}\n role=\"none\"\n {...snackbarContentProps}\n />\n </SnackbarContent>\n );\n});\n\n// We override notistack hook to be able to customize the snackbar that should be called.\nexport const useHvSnackbar = () => {\n const snackbarContext = useSnackbar();\n\n if (!snackbarContext) {\n throw new Error(\"useHvSnackbar must be used within an HvSnackbarProvider\");\n }\n\n const { enqueueSnackbar: enqueueNotistackSnackbar, closeSnackbar } =\n snackbarContext;\n\n const enqueueSnackbar = useCallback(\n (message: React.ReactNode, options: HvNotistackSnackMessageProps = {}) => {\n const {\n id,\n variant = \"success\",\n snackbarContentProps,\n className,\n ...otherOptions\n } = options;\n\n return enqueueNotistackSnackbar(\n <HvNotistackSnackMessage\n id={id}\n message={message}\n variant={variant}\n snackbarContentProps={snackbarContentProps}\n />,\n { ...otherOptions, className },\n );\n },\n [enqueueNotistackSnackbar],\n );\n return useMemo(\n () => ({\n enqueueSnackbar,\n closeSnackbar,\n }),\n [enqueueSnackbar, closeSnackbar],\n );\n};\n\nexport const HvSnackbarProvider = ({\n children,\n notistackClassesOverride,\n maxSnack = 5,\n autoHideDuration = 5000,\n anchorOrigin = {\n vertical: \"top\",\n horizontal: \"right\",\n },\n classes: classesProp,\n className,\n container,\n ...others\n}: HvSnackbarProviderProps) => {\n const { classes, css, cx } = useClasses(classesProp);\n\n const { containerRoot, ...otherNotistackClasses } =\n notistackClassesOverride \|\| {};\n\n const notistackClasses: SnackbarProviderProps[\"classes\"] = {\n containerRoot: cx(\n css({\n pointerEvents: \"all\",\n \"& > div > div\": {\n // Overrides notistack extra padding\n padding: \"0 !important\",\n transition: \"all 0s ease 0s !important\",\n },\n }),\n containerRoot,\n ),\n ...otherNotistackClasses,\n };\n\n return (\n <SnackbarProvider\n classes={notistackClasses}\n maxSnack={maxSnack}\n autoHideDuration={autoHideDuration}\n anchorOrigin={anchorOrigin}\n className={cx(classes.snackItemRoot, className)}\n domRoot={container}\n {...others}\n >\n {children}\n </SnackbarProvider>\n );\n};\n"],"names":["HvNotistackSnackMessage"],"mappings":";;;;;;AAsDA,MAAM,0BAA0B,WAG9B,SAASA,yBAAwB,OAAO,KAAK;AAC7C,QAAM,EAAE,IAAI,SAAS,UAAU,WAAW,yBAAyB;AAGjE,SAAA,oBAAC,mBAAgB,KACf,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAQ;AAAA,MACR,OAAO;AAAA,MACP,MAAK;AAAA,MACJ,GAAG;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ,CAAC;AAGM,MAAM,gBAAgB,MAAM;AACjC,QAAM,kBAAkB,YAAY;AAEpC,MAAI,CAAC,iBAAiB;AACd,UAAA,IAAI,MAAM,yDAAyD;AAAA,EAAA;AAG3E,QAAM,EAAE,iBAAiB,0BAA0B,cACjD,IAAA;AAEF,QAAM,kBAAkB;AAAA,IACtB,CAAC,SAA0B,UAAwC,OAAO;AAClE,YAAA;AAAA,QACJ;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MAAA,IACD;AAEG,aAAA;AAAA,QACL;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QACA,EAAE,GAAG,cAAc,UAAU;AAAA,MAC/B;AAAA,IACF;AAAA,IACA,CAAC,wBAAwB;AAAA,EAC3B;AACO,SAAA;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,CAAC,iBAAiB,aAAa;AAAA,EACjC;AACF;~~AAEO~~,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,eAAe;AAAA,IACb,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA+B;AAC7B,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAEnD,QAAM,EAAE,eAAe,GAAG,sBAAsB,IAC9C,4BAA4B,CAAC;AAE/B,QAAM,mBAAqD;AAAA,IACzD,eAAe;AAAA,MACb,IAAI;AAAA,QACF,eAAe;AAAA,QACf,iBAAiB;AAAA;AAAA,UAEf,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,MACd,CACD;AAAA,MACD;AAAA,IACF;AAAA,IACA,GAAG;AAAA,EACL;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,QAAQ,eAAe,SAAS;AAAA,MAC9C,SAAS;AAAA,MACR,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;"}
1	+ {"version":3,"file":"SnackbarProvider.js","sources":["../../../src/SnackbarProvider/SnackbarProvider.tsx"],"sourcesContent":["import { forwardRef, useCallback, useMemo } from \"react\";\nimport { SnackbarOrigin } from \"@mui/material/Snackbar\";\nimport {\n OptionsObject,\n SnackbarContent,\n SnackbarProvider,\n SnackbarProviderProps,\n useSnackbar,\n} from \"notistack\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n HvSnackbarContent,\n HvSnackbarContentProps,\n} from \"../Snackbar/SnackbarContent\";\nimport { HvSnackbarVariant } from \"../Snackbar/types\";\nimport { staticClasses, useClasses } from \"./SnackbarProvider.styles\";\n\nexport { staticClasses as snackbarProviderClasses };\n\nexport type HvSnackbarProviderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSnackbarProviderProps {\n /** Your component tree. /\n children: React.ReactNode;\n /* Max visible snackbars. /\n maxSnack?: number;\n /* How much time the snackbar remains visible in milliseconds. /\n autoHideDuration?: number;\n /* Where is the snackbar placed. /\n anchorOrigin?: SnackbarOrigin;\n /* Class object used to override notistack classes. /\n notistackClassesOverride?: SnackbarProviderProps[\"classes\"];\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvSnackbarProviderClasses;\n /* Class names to be applied. /\n className?: string;\n /* The container the snackbar should slide from. /\n container?: SnackbarProviderProps[\"domRoot\"];\n}\n\nexport interface HvNotistackSnackMessageProps extends OptionsObject {\n /* Id to be applied to the root node. /\n id?: string;\n /* class name to apply on the root node /\n className?: string;\n /* Your component tree. /\n message?: React.ReactNode;\n /* Variant of the snackbar. /\n variant?: HvSnackbarVariant;\n /* Extra values to pass to the snackbar. /\n snackbarContentProps?: HvSnackbarContentProps;\n}\n\nconst HvNotistackSnackMessage = forwardRef<\n HTMLDivElement,\n HvNotistackSnackMessageProps\n>(function HvNotistackSnackMessage(props, ref) {\n const { id, message, variant = \"success\", snackbarContentProps } = props;\n\n return (\n <SnackbarContent ref={ref}>\n <HvSnackbarContent\n id={id}\n variant={variant}\n showIcon\n label={message}\n role=\"none\"\n {...snackbarContentProps}\n />\n </SnackbarContent>\n );\n});\n\n// We override notistack hook to be able to customize the snackbar that should be called.\nexport const useHvSnackbar = () => {\n const snackbarContext = useSnackbar();\n\n if (!snackbarContext) {\n throw new Error(\"useHvSnackbar must be used within an HvSnackbarProvider\");\n }\n\n const { enqueueSnackbar: enqueueNotistackSnackbar, closeSnackbar } =\n snackbarContext;\n\n const enqueueSnackbar = useCallback(\n (message: React.ReactNode, options: HvNotistackSnackMessageProps = {}) => {\n const {\n id,\n variant = \"success\",\n snackbarContentProps,\n className,\n ...otherOptions\n } = options;\n\n return enqueueNotistackSnackbar(\n <HvNotistackSnackMessage\n id={id}\n message={message}\n variant={variant}\n snackbarContentProps={snackbarContentProps}\n />,\n { ...otherOptions, className },\n );\n },\n [enqueueNotistackSnackbar],\n );\n return useMemo(\n () => ({\n enqueueSnackbar,\n closeSnackbar,\n }),\n [enqueueSnackbar, closeSnackbar],\n );\n};\n\n/\n A snackbar provider to control the stacking of multiple snackbars in the app.\n \n This component uses of the [Notistack](https://github.com/iamhosseindhv/notistack) library.\n * Please refer to its [API Reference](https://notistack.com/v2.x/api-reference) for more complex usage scenarios.\n */\nexport const HvSnackbarProvider = ({\n children,\n notistackClassesOverride,\n maxSnack = 5,\n autoHideDuration = 5000,\n anchorOrigin = {\n vertical: \"top\",\n horizontal: \"right\",\n },\n classes: classesProp,\n className,\n container,\n ...others\n}: HvSnackbarProviderProps) => {\n const { classes, css, cx } = useClasses(classesProp);\n\n const { containerRoot, ...otherNotistackClasses } =\n notistackClassesOverride \|\| {};\n\n const notistackClasses: SnackbarProviderProps[\"classes\"] = {\n containerRoot: cx(\n css({\n pointerEvents: \"all\",\n \"& > div > div\": {\n // Overrides notistack extra padding\n padding: \"0 !important\",\n transition: \"all 0s ease 0s !important\",\n },\n }),\n containerRoot,\n ),\n ...otherNotistackClasses,\n };\n\n return (\n <SnackbarProvider\n classes={notistackClasses}\n maxSnack={maxSnack}\n autoHideDuration={autoHideDuration}\n anchorOrigin={anchorOrigin}\n className={cx(classes.snackItemRoot, className)}\n domRoot={container}\n {...others}\n >\n {children}\n </SnackbarProvider>\n );\n};\n"],"names":["HvNotistackSnackMessage"],"mappings":";;;;;;AAsDA,MAAM,0BAA0B,WAG9B,SAASA,yBAAwB,OAAO,KAAK;AAC7C,QAAM,EAAE,IAAI,SAAS,UAAU,WAAW,yBAAyB;AAGjE,SAAA,oBAAC,mBAAgB,KACf,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAQ;AAAA,MACR,OAAO;AAAA,MACP,MAAK;AAAA,MACJ,GAAG;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ,CAAC;AAGM,MAAM,gBAAgB,MAAM;AACjC,QAAM,kBAAkB,YAAY;AAEpC,MAAI,CAAC,iBAAiB;AACd,UAAA,IAAI,MAAM,yDAAyD;AAAA,EAAA;AAG3E,QAAM,EAAE,iBAAiB,0BAA0B,cACjD,IAAA;AAEF,QAAM,kBAAkB;AAAA,IACtB,CAAC,SAA0B,UAAwC,OAAO;AAClE,YAAA;AAAA,QACJ;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MAAA,IACD;AAEG,aAAA;AAAA,QACL;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QACA,EAAE,GAAG,cAAc,UAAU;AAAA,MAC/B;AAAA,IACF;AAAA,IACA,CAAC,wBAAwB;AAAA,EAC3B;AACO,SAAA;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,CAAC,iBAAiB,aAAa;AAAA,EACjC;AACF;AAQO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,eAAe;AAAA,IACb,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA+B;AAC7B,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAEnD,QAAM,EAAE,eAAe,GAAG,sBAAsB,IAC9C,4BAA4B,CAAC;AAE/B,QAAM,mBAAqD;AAAA,IACzD,eAAe;AAAA,MACb,IAAI;AAAA,QACF,eAAe;AAAA,QACf,iBAAiB;AAAA;AAAA,UAEf,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,MACd,CACD;AAAA,MACD;AAAA,IACF;AAAA,IACA,GAAG;AAAA,EACL;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,QAAQ,eAAe,SAAS;AAAA,MAC9C,SAAS;AAAA,MACR,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/esm/Switch/Switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Switch.js","sources":["../../../src/Switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useCallback } from \"react\";\nimport { SwitchProps as MuiSwitchProps } from \"@mui/material/Switch\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseSwitch } from \"../BaseSwitch\";\nimport {\n HvFormElement,\n HvFormStatus,\n HvLabel,\n HvLabelProps,\n HvWarningText,\n isInvalid,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Switch.styles\";\n\nexport { staticClasses as switchClasses };\n\nexport type HvSwitchClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSwitchProps\n extends Omit<MuiSwitchProps, \"color\" \| \"onChange\" \| \"classes\"> {\n /*\n A Jss Object used to override or extend the styles applied to the switch.\n /\n classes?: HvSwitchClasses;\n /\n The form element name.\n /\n name?: string;\n /\n The value of the form element.\n \n Is up to the application's logic when to consider the submission of this value.\n * Generally it should be used only when the switch is neither unchecked nor indeterminate.\n \n The default value is \"on\".\n /\n value?: any;\n /\n The label of the form element.\n \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 /\n Properties passed on to the label element.\n /\n labelProps?: HvLabelProps;\n /\n Indicates that the form element is disabled.\n /\n disabled?: boolean;\n /\n Indicates that the form element is not editable.\n /\n readOnly?: boolean;\n /\n Indicates that user input is required on the form element.\n /\n required?: boolean;\n /\n If `true` the switch is selected, if set to `false` the switch is not selected.\n \n When defined the switch state becomes controlled.\n /\n checked?: boolean;\n /\n When uncontrolled, defines the initial checked state.\n /\n defaultChecked?: boolean;\n /\n The status of the form element.\n \n Valid is correct, invalid is incorrect and standBy means no validations have run.\n \n When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to `checked`, depending of the values of both `required` and `checked`.\n /\n status?: HvFormStatus;\n /\n The error message to show when the validation status is \"invalid\".\n \n Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n /\n statusMessage?: string;\n /\n Identifies the element that provides an error message for the switch.\n \n Will only be used when the validation status is invalid.\n /\n \"aria-errormessage\"?: string;\n /\n The callback fired when the switch is pressed.\n /\n onChange?: (\n event: React.ChangeEvent<HTMLInputElement>,\n checked: boolean,\n value: any,\n ) => void;\n /\n Properties passed on to the input element.\n /\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /* @ignore /\n ref?: MuiSwitchProps[\"ref\"];\n /* @ignore /\n component?: MuiSwitchProps[\"component\"];\n /* Color applied to the switch. /\n color?: HvColorAny;\n}\n\nconst isSemantical = (color: HvColorAny) =>\n [\"positive\", \"negative\", \"warning\"].includes(color);\n\n/\n A Switch is <b>binary</b> and work as a digital on/off button.\n \n Use when two states are <b>opposite</b> and to trigger immediate\n * changes in the system.\n */\nexport const HvSwitch = forwardRef<HTMLButtonElement, HvSwitchProps>(\n function HvSwitch(props, ref) {\n const {\n classes: classesProp,\n className,\n\n id,\n name,\n value = \"on\",\n required,\n readOnly,\n disabled,\n\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n labelProps,\n\n checked,\n defaultChecked = false,\n\n onChange,\n\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n\n inputProps,\n\n color,\n\n ...others\n } = useDefaultProps(\"HvSwitch\", props);\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const elementId = useUniqueId(id);\n\n const [isChecked, setIsChecked] = useControlled(checked, defaultChecked);\n\n const [validationState, setValidationState] = useControlled<HvFormStatus>(\n status,\n \"standBy\",\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const onLocalChange = useCallback(\n (evt: React.ChangeEvent<HTMLInputElement>, newChecked: boolean) => {\n setIsChecked(() => {\n // this will only run if uncontrolled\n if (required && !newChecked) {\n setValidationState(\"invalid\");\n } else {\n setValidationState(\"valid\");\n }\n\n return newChecked;\n });\n\n onChange?.(evt, newChecked, value);\n },\n [onChange, required, setIsChecked, setValidationState, value],\n );\n\n // the error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) \|\|\n (status === undefined && required));\n\n const isStateInvalid = isInvalid(validationState);\n\n let errorMessageId: string \| undefined;\n if (isStateInvalid) {\n errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n }\n\n return (\n <HvFormElement\n id={id}\n name={name}\n status={validationState}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n className={cx(classes.root, className)}\n >\n {label && (\n <HvLabel\n showGutter\n id={setId(elementId, \"label\")}\n htmlFor={setId(elementId, \"input\")}\n label={label}\n className={classes.label}\n {...labelProps}\n />\n )}\n <div\n className={cx(classes.switchContainer, {\n [classes.invalidSwitch]: isStateInvalid,\n })}\n >\n <HvBaseSwitch\n ref={ref}\n id={label ? setId(elementId, \"input\") : setId(id, \"input\")}\n name={name}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n onChange={onLocalChange}\n value={value}\n checked={isChecked}\n inputProps={{\n \"aria-invalid\": isStateInvalid ? true : undefined,\n \"aria-errormessage\": errorMessageId,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n ...inputProps,\n }}\n {...(color && {\n classes: {\n switchBase: css({\n \"&&&+.HvBaseSwitch-track,&&&.HvBaseSwitch-checked+.HvBaseSwitch-track\":\n {\n backgroundColor: getColor(color),\n borderColor: isSemantical(color)\n ? getColor(`${color}_120`)\n : \"#00000032\",\n },\n }),\n },\n })}\n {...others}\n />\n </div>\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n className={classes.error}\n disableBorder\n disableAdornment\n hideText\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n },\n);\n"],"names":["HvSwitch"],"mappings":"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"}
1	+ {"version":3,"file":"Switch.js","sources":["../../../src/Switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useCallback } from \"react\";\nimport { SwitchProps as MuiSwitchProps } from \"@mui/material/Switch\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseSwitch } from \"../BaseSwitch\";\nimport {\n HvFormElement,\n HvFormStatus,\n HvLabel,\n HvLabelProps,\n HvWarningText,\n isInvalid,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Switch.styles\";\n\nexport { staticClasses as switchClasses };\n\nexport type HvSwitchClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSwitchProps\n extends Omit<MuiSwitchProps, \"color\" \| \"onChange\" \| \"classes\"> {\n /*\n A Jss Object used to override or extend the styles applied to the switch.\n /\n classes?: HvSwitchClasses;\n /\n The form element name.\n /\n name?: string;\n /\n The value of the form element.\n \n Is up to the application's logic when to consider the submission of this value.\n * Generally it should be used only when the switch is neither unchecked nor indeterminate.\n \n The default value is \"on\".\n /\n value?: any;\n /\n The label of the form element.\n \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 /\n Properties passed on to the label element.\n /\n labelProps?: HvLabelProps;\n /\n Indicates that the form element is disabled.\n /\n disabled?: boolean;\n /\n Indicates that the form element is not editable.\n /\n readOnly?: boolean;\n /\n Indicates that user input is required on the form element.\n /\n required?: boolean;\n /\n If `true` the switch is selected, if set to `false` the switch is not selected.\n \n When defined the switch state becomes controlled.\n /\n checked?: boolean;\n /\n When uncontrolled, defines the initial checked state.\n /\n defaultChecked?: boolean;\n /\n The status of the form element.\n \n Valid is correct, invalid is incorrect and standBy means no validations have run.\n \n When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to `checked`, depending of the values of both `required` and `checked`.\n /\n status?: HvFormStatus;\n /\n The error message to show when the validation status is \"invalid\".\n \n Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n /\n statusMessage?: string;\n /\n Identifies the element that provides an error message for the switch.\n \n Will only be used when the validation status is invalid.\n /\n \"aria-errormessage\"?: string;\n /\n The callback fired when the switch is pressed.\n /\n onChange?: (\n event: React.ChangeEvent<HTMLInputElement>,\n checked: boolean,\n value: any,\n ) => void;\n /\n Properties passed on to the input element.\n /\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /* @ignore /\n ref?: MuiSwitchProps[\"ref\"];\n /* @ignore /\n component?: MuiSwitchProps[\"component\"];\n /* Color applied to the switch. /\n color?: HvColorAny;\n}\n\nconst isSemantical = (color: HvColorAny) =>\n [\"positive\", \"negative\", \"warning\"].includes(color);\n\n/\n A Switch is binary and works as a digital on/off button.\n \n Use when two states are opposite and to trigger immediate changes in the system.\n */\nexport const HvSwitch = forwardRef<HTMLButtonElement, HvSwitchProps>(\n function HvSwitch(props, ref) {\n const {\n classes: classesProp,\n className,\n\n id,\n name,\n value = \"on\",\n required,\n readOnly,\n disabled,\n\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n labelProps,\n\n checked,\n defaultChecked = false,\n\n onChange,\n\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n\n inputProps,\n\n color,\n\n ...others\n } = useDefaultProps(\"HvSwitch\", props);\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const elementId = useUniqueId(id);\n\n const [isChecked, setIsChecked] = useControlled(checked, defaultChecked);\n\n const [validationState, setValidationState] = useControlled<HvFormStatus>(\n status,\n \"standBy\",\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const onLocalChange = useCallback(\n (evt: React.ChangeEvent<HTMLInputElement>, newChecked: boolean) => {\n setIsChecked(() => {\n // this will only run if uncontrolled\n if (required && !newChecked) {\n setValidationState(\"invalid\");\n } else {\n setValidationState(\"valid\");\n }\n\n return newChecked;\n });\n\n onChange?.(evt, newChecked, value);\n },\n [onChange, required, setIsChecked, setValidationState, value],\n );\n\n // the error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) \|\|\n (status === undefined && required));\n\n const isStateInvalid = isInvalid(validationState);\n\n let errorMessageId: string \| undefined;\n if (isStateInvalid) {\n errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n }\n\n return (\n <HvFormElement\n id={id}\n name={name}\n status={validationState}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n className={cx(classes.root, className)}\n >\n {label && (\n <HvLabel\n showGutter\n id={setId(elementId, \"label\")}\n htmlFor={setId(elementId, \"input\")}\n label={label}\n className={classes.label}\n {...labelProps}\n />\n )}\n <div\n className={cx(classes.switchContainer, {\n [classes.invalidSwitch]: isStateInvalid,\n })}\n >\n <HvBaseSwitch\n ref={ref}\n id={label ? setId(elementId, \"input\") : setId(id, \"input\")}\n name={name}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n onChange={onLocalChange}\n value={value}\n checked={isChecked}\n inputProps={{\n \"aria-invalid\": isStateInvalid ? true : undefined,\n \"aria-errormessage\": errorMessageId,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n ...inputProps,\n }}\n {...(color && {\n classes: {\n switchBase: css({\n \"&&&+.HvBaseSwitch-track,&&&.HvBaseSwitch-checked+.HvBaseSwitch-track\":\n {\n backgroundColor: getColor(color),\n borderColor: isSemantical(color)\n ? getColor(`${color}_120`)\n : \"#00000032\",\n },\n }),\n },\n })}\n {...others}\n />\n </div>\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n className={classes.error}\n disableBorder\n disableAdornment\n hideText\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n },\n);\n"],"names":["HvSwitch"],"mappings":"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"}

package/dist/esm/Tag/Tag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tag.js","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import { cloneElement, forwardRef, isValidElement } from \"react\";\nimport {\n Checkbox,\n CheckboxCheck,\n CloseXS,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n mergeStyles,\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButtonBase, HvButtonBaseProps } from \"../ButtonBase\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvTypography } from \"../Typography\";\nimport { isDeleteKey } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n extends Omit<\n HvButtonBaseProps,\n \"type\" \| \"color\" \| \"classes\" \| \"onClick\" \| \"onToggle\"\n > {\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 /* The color variant of the tag /\n color?: HvColorAny;\n /* Icon used to customize the delete icon /\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?: React.EventHandler<any>;\n /* Callback triggered when any item is clicked. /\n onClick?: (event: React.MouseEvent<HTMLElement>, selected?: boolean) => void;\n /* Aria properties to apply to delete button in tag\n * @deprecated no longer used\n /\n deleteButtonArialLabel?: string;\n /* Props to apply to delete icon /\n deleteButtonProps?: React.HTMLAttributes<HTMLDivElement>;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvTagClasses;\n /* Determines whether or not the tag is selectable. /\n selectable?: boolean;\n /* Defines if the tag is selected. When defined the tag state becomes controlled. /\n selected?: boolean;\n /* When uncontrolled, defines the initial selected state. /\n defaultSelected?: boolean;\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 = forwardRef<\n // no-indent\n HTMLElement,\n HvTagProps\n>(function HvTag(props, ref) {\n const {\n classes: classesProp,\n className,\n component,\n style,\n label,\n disabled,\n type = \"semantic\",\n selectable,\n selected,\n defaultSelected = false,\n color,\n deleteIcon: deleteIconProp,\n onDelete,\n onClick,\n onKeyDown,\n onKeyUp,\n // TODO: remove from API\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n deleteButtonArialLabel = \"Delete tag\",\n deleteButtonProps = {},\n ...others\n } = useDefaultProps(\"HvTag\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const [isSelected, setIsSelected] = useControlled(\n selected,\n Boolean(defaultSelected),\n );\n\n const handleDeleteClick = (event: React.MouseEvent) => {\n // Stop the event from bubbling up to the tag\n event.stopPropagation();\n onDelete?.(event);\n };\n\n const backgroundColor =\n (type === \"semantic\" && getColor(color, \"neutral_20\")) \|\|\n (type === \"categorical\" && theme.alpha(getColor(color, \"cat1\")!, 0.2)) \|\|\n undefined;\n\n const isClickable = !!(onClick \|\| onDelete \|\| selectable);\n\n const CheckboxIcon = isSelected ? CheckboxCheck : Checkbox;\n\n const deleteIcon =\n deleteIconProp && isValidElement(deleteIconProp) ? (\n cloneElement<any>(deleteIconProp, {\n className: cx(classes.deleteIcon, {\n [classes.disabledDeleteIcon]: disabled,\n }),\n onClick: handleDeleteClick,\n })\n ) : (\n <CloseXS\n size=\"XS\"\n onClick={handleDeleteClick}\n className={cx(classes.deleteIcon, classes.button, classes.tagButton)}\n {...deleteButtonProps}\n />\n );\n\n return (\n <HvButtonBase\n ref={ref as any}\n component={isClickable ? HvButtonBase : \"div\"}\n disabled={disabled}\n data-color={color}\n style={mergeStyles(style, {\n \"--bgColor\": backgroundColor,\n })}\n className={cx(classes.root, classes.chipRoot, className, {\n [classes.disabled]: disabled,\n [classes.selected]: isSelected,\n [classes.clickable]: isClickable && !disabled,\n [classes.categorical]: type === \"categorical\",\n [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n })}\n onKeyUp={(event: React.KeyboardEvent<HTMLButtonElement>) => {\n // Ignore events from children.\n if (event.currentTarget === event.target && isDeleteKey(event)) {\n onDelete?.(event);\n }\n\n onKeyUp?.(event);\n }}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled) return;\n if (selectable) setIsSelected(!isSelected);\n onClick?.(event, !isSelected);\n }}\n selected={isClickable && isSelected}\n {...others}\n >\n {selectable && type === \"semantic\" && (\n <CheckboxIcon\n className={classes.icon}\n color={(disabled && [\"atmo3\", \"secondary_60\"]) \|\| undefined}\n size=\"XS\"\n />\n )}\n <HvTypography\n noWrap\n variant=\"caption2\"\n component=\"span\"\n className={classes.label}\n >\n {label}\n </HvTypography>\n {onDelete && deleteIcon}\n </HvButtonBase>\n );\n});\n"],"names":["HvTag"],"mappings":"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"}
1	+ {"version":3,"file":"Tag.js","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import { cloneElement, forwardRef, isValidElement } from \"react\";\nimport {\n Checkbox,\n CheckboxCheck,\n CloseXS,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n mergeStyles,\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButtonBase, HvButtonBaseProps } from \"../ButtonBase\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvTypography } from \"../Typography\";\nimport { isDeleteKey } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n extends Omit<\n HvButtonBaseProps,\n \"type\" \| \"color\" \| \"classes\" \| \"onClick\" \| \"onToggle\"\n > {\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 /* The color variant of the tag /\n color?: HvColorAny;\n /* Icon used to customize the delete icon /\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?: React.EventHandler<any>;\n /* Callback triggered when any item is clicked. /\n onClick?: (event: React.MouseEvent<HTMLElement>, selected?: boolean) => void;\n /* Aria properties to apply to delete button in tag\n * @deprecated no longer used\n /\n deleteButtonArialLabel?: string;\n /* Props to apply to delete icon /\n deleteButtonProps?: React.HTMLAttributes<HTMLDivElement>;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvTagClasses;\n /* Determines whether or not the tag is selectable. /\n selectable?: boolean;\n /* Defines if the tag is selected. When defined the tag state becomes controlled. /\n selected?: boolean;\n /* When uncontrolled, defines the initial selected state. /\n defaultSelected?: boolean;\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 [MUI Chip](https://mui.com/material-ui/react-chip/) component\n */\nexport const HvTag = forwardRef<\n // no-indent\n HTMLElement,\n HvTagProps\n>(function HvTag(props, ref) {\n const {\n classes: classesProp,\n className,\n component,\n style,\n label,\n disabled,\n type = \"semantic\",\n selectable,\n selected,\n defaultSelected = false,\n color,\n deleteIcon: deleteIconProp,\n onDelete,\n onClick,\n onKeyDown,\n onKeyUp,\n // TODO: remove from API\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n deleteButtonArialLabel = \"Delete tag\",\n deleteButtonProps = {},\n ...others\n } = useDefaultProps(\"HvTag\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const [isSelected, setIsSelected] = useControlled(\n selected,\n Boolean(defaultSelected),\n );\n\n const handleDeleteClick = (event: React.MouseEvent) => {\n // Stop the event from bubbling up to the tag\n event.stopPropagation();\n onDelete?.(event);\n };\n\n const backgroundColor =\n (type === \"semantic\" && getColor(color, \"neutral_20\")) \|\|\n (type === \"categorical\" && theme.alpha(getColor(color, \"cat1\")!, 0.2)) \|\|\n undefined;\n\n const isClickable = !!(onClick \|\| onDelete \|\| selectable);\n\n const CheckboxIcon = isSelected ? CheckboxCheck : Checkbox;\n\n const deleteIcon =\n deleteIconProp && isValidElement(deleteIconProp) ? (\n cloneElement<any>(deleteIconProp, {\n className: cx(classes.deleteIcon, {\n [classes.disabledDeleteIcon]: disabled,\n }),\n onClick: handleDeleteClick,\n })\n ) : (\n <CloseXS\n size=\"XS\"\n onClick={handleDeleteClick}\n className={cx(classes.deleteIcon, classes.button, classes.tagButton)}\n {...deleteButtonProps}\n />\n );\n\n return (\n <HvButtonBase\n ref={ref as any}\n component={isClickable ? HvButtonBase : \"div\"}\n disabled={disabled}\n data-color={color}\n style={mergeStyles(style, {\n \"--bgColor\": backgroundColor,\n })}\n className={cx(classes.root, classes.chipRoot, className, {\n [classes.disabled]: disabled,\n [classes.selected]: isSelected,\n [classes.clickable]: isClickable && !disabled,\n [classes.categorical]: type === \"categorical\",\n [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n })}\n onKeyUp={(event: React.KeyboardEvent<HTMLButtonElement>) => {\n // Ignore events from children.\n if (event.currentTarget === event.target && isDeleteKey(event)) {\n onDelete?.(event);\n }\n\n onKeyUp?.(event);\n }}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled) return;\n if (selectable) setIsSelected(!isSelected);\n onClick?.(event, !isSelected);\n }}\n selected={isClickable && isSelected}\n {...others}\n >\n {selectable && type === \"semantic\" && (\n <CheckboxIcon\n className={classes.icon}\n color={(disabled && [\"atmo3\", \"secondary_60\"]) \|\| undefined}\n size=\"XS\"\n />\n )}\n <HvTypography\n noWrap\n variant=\"caption2\"\n component=\"span\"\n className={classes.label}\n >\n {label}\n </HvTypography>\n {onDelete && deleteIcon}\n </HvButtonBase>\n );\n});\n"],"names":["HvTag"],"mappings":"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"}

package/dist/esm/Tag/Tag.styles.js CHANGED Viewed

@@ -32,7 +32,7 @@ const { staticClasses, useClasses } = createClasses("HvTag", {
     }
   },
   label: {
-    padding: theme.spacing(0, "4px"),
+    padding: theme.spacing(0, "xxs"),
     color: "inherit"
   },
   deleteIcon: {

package/dist/esm/Tag/Tag.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tag.styles.js","sources":["../../../src/Tag/Tag.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n root: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"default\",\n color: theme.colors.base_dark,\n backgroundColor: \"var(--bgColor)\",\n height: 16,\n borderRadius: 0,\n maxWidth: 180,\n whiteSpace: \"nowrap\",\n\n \":hover, :focus\": {\n backgroundColor: \"var(--bgColor)\",\n },\n },\n categorical: {\n borderRadius: 8,\n \"& $label\": {\n color: theme.colors.secondary,\n },\n },\n\n disabled: {\n backgroundColor: theme.colors.atmo3,\n \":hover, :focus\": {\n backgroundColor: theme.colors.atmo3,\n },\n \"& $label\": {\n color: theme.colors.secondary_60,\n },\n },\n label: {\n padding: theme.spacing(0, \"~~4px~~\"),\n color: \"inherit\",\n },\n deleteIcon: {\n width: 16,\n height: 16,\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n },\n selected: {},\n clickable: {\n cursor: \"pointer\",\n },\n icon: {\n width: 12,\n height: 12,\n marginLeft: 2,\n },\n\n /** @deprecated use `root` instead /\n chipRoot: {},\n /* @deprecated unused /\n // TODO: redundant - use deleteIcon. remove in v6\n /* @deprecated /\n button: {},\n /* @deprecated /\n tagButton: {},\n // TODO: redundant - use $clickable or :not($disabled). remove in v6\n /* @deprecated /\n focusVisible: {},\n /* @deprecated /\n disabledDeleteIcon: {},\n /* @deprecated /\n categoricalFocus: {},\n /* @deprecated */\n categoricalDisabled: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,SAAS;AAAA,EAClE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,UAAU;AAAA,IACV,YAAY;AAAA,IAEZ,kBAAkB;AAAA,MAChB,iBAAiB;AAAA,IAAA;AAAA,EAErB;AAAA,EACA,aAAa;AAAA,IACX,cAAc;AAAA,IACd,YAAY;AAAA,MACV,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EAEA,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,kBAAkB;AAAA,MAChB,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,YAAY;AAAA,MACV,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EACA,OAAO;AAAA,IACL,SAAS,MAAM,QAAQ,GAAG,KAAK;AAAA,IAC/B,OAAO;AAAA,EACT;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAElC;AAAA,EACA,UAAU,CAAC;AAAA,EACX,WAAW;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AAAA;AAAA,EAGA,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,EAIX,QAAQ,CAAC;AAAA;AAAA,EAET,WAAW,CAAC;AAAA;AAAA;AAAA,EAGZ,cAAc,CAAC;AAAA;AAAA,EAEf,oBAAoB,CAAC;AAAA;AAAA,EAErB,kBAAkB,CAAC;AAAA;AAAA,EAEnB,qBAAqB,CAAA;AACvB,CAAC;"}
1	+ {"version":3,"file":"Tag.styles.js","sources":["../../../src/Tag/Tag.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n root: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"default\",\n color: theme.colors.base_dark,\n backgroundColor: \"var(--bgColor)\",\n height: 16,\n borderRadius: 0,\n maxWidth: 180,\n whiteSpace: \"nowrap\",\n\n \":hover, :focus\": {\n backgroundColor: \"var(--bgColor)\",\n },\n },\n categorical: {\n borderRadius: 8,\n \"& $label\": {\n color: theme.colors.secondary,\n },\n },\n\n disabled: {\n backgroundColor: theme.colors.atmo3,\n \":hover, :focus\": {\n backgroundColor: theme.colors.atmo3,\n },\n \"& $label\": {\n color: theme.colors.secondary_60,\n },\n },\n label: {\n padding: theme.spacing(0, \"xxs\"),\n color: \"inherit\",\n },\n deleteIcon: {\n width: 16,\n height: 16,\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n },\n selected: {},\n clickable: {\n cursor: \"pointer\",\n },\n icon: {\n width: 12,\n height: 12,\n marginLeft: 2,\n },\n\n /** @deprecated use `root` instead /\n chipRoot: {},\n /* @deprecated unused /\n // TODO: redundant - use deleteIcon. remove in v6\n /* @deprecated /\n button: {},\n /* @deprecated /\n tagButton: {},\n // TODO: redundant - use $clickable or :not($disabled). remove in v6\n /* @deprecated /\n focusVisible: {},\n /* @deprecated /\n disabledDeleteIcon: {},\n /* @deprecated /\n categoricalFocus: {},\n /* @deprecated */\n categoricalDisabled: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,SAAS;AAAA,EAClE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,UAAU;AAAA,IACV,YAAY;AAAA,IAEZ,kBAAkB;AAAA,MAChB,iBAAiB;AAAA,IAAA;AAAA,EAErB;AAAA,EACA,aAAa;AAAA,IACX,cAAc;AAAA,IACd,YAAY;AAAA,MACV,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EAEA,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,kBAAkB;AAAA,MAChB,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,YAAY;AAAA,MACV,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EACA,OAAO;AAAA,IACL,SAAS,MAAM,QAAQ,GAAG,KAAK;AAAA,IAC/B,OAAO;AAAA,EACT;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAElC;AAAA,EACA,UAAU,CAAC;AAAA,EACX,WAAW;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AAAA;AAAA,EAGA,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,EAIX,QAAQ,CAAC;AAAA;AAAA,EAET,WAAW,CAAC;AAAA;AAAA;AAAA,EAGZ,cAAc,CAAC;AAAA;AAAA,EAEf,oBAAoB,CAAC;AAAA;AAAA,EAErB,kBAAkB,CAAC;AAAA;AAAA,EAEnB,qBAAqB,CAAA;AACvB,CAAC;"}

package/dist/esm/ToggleButton/ToggleButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ToggleButton.js","sources":["../../../src/ToggleButton/ToggleButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { useDefaultProps } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton } from \"../Button\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvBaseProps } from \"../types/generic\";\n\nexport interface HvToggleButtonProps\n extends HvBaseProps<HTMLButtonElement, \"onClick\"> {\n /** When uncontrolled, defines the initial selected state. /\n defaultSelected?: boolean;\n /* Defines if the button is selected. When defined the button state becomes controlled. /\n selected?: boolean;\n /* Defines if the button is disabled. /\n disabled?: boolean;\n /* Icon for when not selected. Ignored if the component has children. /\n notSelectedIcon?: React.ReactNode;\n /* Icon for when selected. Ignored if the component has children. /\n selectedIcon?: React.ReactNode;\n /* Function called when icon is clicked. */\n onClick?: (\n event: React.MouseEvent<HTMLButtonElement>,\n selected: boolean,\n ) => void;\n}\n\nexport const HvToggleButton = forwardRef<\n HTMLButtonElement,\n HvToggleButtonProps\n>(function HvToggleButton(props, ref) {\n const {\n defaultSelected,\n selected,\n notSelectedIcon,\n selectedIcon = null,\n onClick,\n children,\n ...others\n } = useDefaultProps(\"HvToggleButton\", props);\n\n const [isSelected, setIsSelected] = useControlled(\n selected,\n Boolean(defaultSelected),\n );\n\n return (\n <HvButton\n ref={ref}\n icon\n selected={isSelected}\n onClick={(event) => {\n setIsSelected(!isSelected);\n onClick?.(event, !isSelected);\n }}\n {...others}\n >\n {children \|\| (!isSelected ? notSelectedIcon : selectedIcon)}\n </HvButton>\n );\n});\n"],"names":["HvToggleButton"],"mappings":";;;;;~~AA0BO~~,MAAM,iBAAiB,WAG5B,SAASA,gBAAe,OAAO,KAAK;AAC9B,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAErC,QAAA,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC;AAAA,IACA,QAAQ,eAAe;AAAA,EACzB;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAI;AAAA,MACJ,UAAU;AAAA,MACV,SAAS,CAAC,UAAU;AAClB,sBAAc,CAAC,UAAU;AACf,kBAAA,OAAO,CAAC,UAAU;AAAA,MAC9B;AAAA,MACC,GAAG;AAAA,MAEH,UAAA,aAAa,CAAC,aAAa,kBAAkB;AAAA,IAAA;AAAA,EAChD;AAEJ,CAAC;"}
1	+ {"version":3,"file":"ToggleButton.js","sources":["../../../src/ToggleButton/ToggleButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { useDefaultProps } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton } from \"../Button\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvBaseProps } from \"../types/generic\";\n\nexport interface HvToggleButtonProps\n extends HvBaseProps<HTMLButtonElement, \"onClick\"> {\n /** When uncontrolled, defines the initial selected state. /\n defaultSelected?: boolean;\n /* Defines if the button is selected. When defined the button state becomes controlled. /\n selected?: boolean;\n /* Defines if the button is disabled. /\n disabled?: boolean;\n /* Icon for when not selected. Ignored if the component has children. /\n notSelectedIcon?: React.ReactNode;\n /* Icon for when selected. Ignored if the component has children. /\n selectedIcon?: React.ReactNode;\n /* Function called when icon is clicked. /\n onClick?: (\n event: React.MouseEvent<HTMLButtonElement>,\n selected: boolean,\n ) => void;\n}\n\n/\n Use when two instances are opposite and the on/off analogy doesn’t apply. Only well-known icons should be used, otherwise, use a single checkbox for the same situation.\n */\nexport const HvToggleButton = forwardRef<\n HTMLButtonElement,\n HvToggleButtonProps\n>(function HvToggleButton(props, ref) {\n const {\n defaultSelected,\n selected,\n notSelectedIcon,\n selectedIcon = null,\n onClick,\n children,\n ...others\n } = useDefaultProps(\"HvToggleButton\", props);\n\n const [isSelected, setIsSelected] = useControlled(\n selected,\n Boolean(defaultSelected),\n );\n\n return (\n <HvButton\n ref={ref}\n icon\n selected={isSelected}\n onClick={(event) => {\n setIsSelected(!isSelected);\n onClick?.(event, !isSelected);\n }}\n {...others}\n >\n {children \|\| (!isSelected ? notSelectedIcon : selectedIcon)}\n </HvButton>\n );\n});\n"],"names":["HvToggleButton"],"mappings":";;;;;AA6BO,MAAM,iBAAiB,WAG5B,SAASA,gBAAe,OAAO,KAAK;AAC9B,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAErC,QAAA,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC;AAAA,IACA,QAAQ,eAAe;AAAA,EACzB;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAI;AAAA,MACJ,UAAU;AAAA,MACV,SAAS,CAAC,UAAU;AAClB,sBAAc,CAAC,UAAU;AACf,kBAAA,OAAO,CAAC,UAAU;AAAA,MAC9B;AAAA,MACC,GAAG;AAAA,MAEH,UAAA,aAAa,CAAC,aAAa,kBAAkB;AAAA,IAAA;AAAA,EAChD;AAEJ,CAAC;"}

package/dist/esm/TreeView/TreeView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TreeView.js","sources":["../../../src/TreeView/TreeView.tsx"],"sourcesContent":["import { useSlotProps } from \"@mui/base/utils\";\nimport { DropDownXS, DropRightXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { fixedForwardRef, HvBaseProps } from \"../types/generic\";\nimport {\n DEFAULT_TREE_VIEW_PLUGINS,\n DefaultTreeViewPluginParameters,\n} from \"./internals/hooks/plugins\";\nimport { useTreeView } from \"./internals/hooks/useTreeView\";\nimport { TreeViewProvider } from \"./internals/TreeViewProvider\";\nimport { staticClasses, useClasses } from \"./TreeView.styles\";\n\nexport { staticClasses as treeView2Classes }; // TODO: remove old `treeViewClasses`\n\nexport type HvTreeViewClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTreeViewProps<Multiple extends boolean \| undefined>\n extends HvBaseProps<HTMLUListElement>,\n DefaultTreeViewPluginParameters<Multiple> {\n /** A Jss Object used to override or extend the styles applied. /\n classes?: HvTreeViewClasses;\n /* Tree View children. Usually a `HvTreeItem` instance, or a custom variation of it /\n children?: React.ReactNode;\n}\n\n/\n A Tree View displays hierarchical structures.\n * It also facilitates the exploration of categorical levels and their content.\n \n Tree structures are built through composing the `HvTreeItem` component,\n * or a custom variation of it.\n \n It is based on MUI's [TreeView](https://mui.com/x/react-tree-view) component.\n \n @example\n * ```tsx\n * <HvTreeView>\n * <HvTreeItem nodeId=\"1\" label=\"File1\" />\n * </HvTreeView>\n * ```\n */\nexport const HvTreeView = fixedForwardRef(function HvTreeView<\n Multiple extends boolean \| undefined,\n>(props: HvTreeViewProps<Multiple>, ref: React.Ref<HTMLUListElement>) {\n const {\n id,\n children,\n classes: classesProp,\n className,\n\n disabledItemsFocusable,\n multiSelect,\n expanded,\n defaultExpanded,\n selected,\n defaultSelected,\n disableSelection,\n defaultCollapseIcon = <DropDownXS />,\n defaultExpandIcon = <DropRightXS />,\n defaultEndIcon,\n defaultParentIcon,\n onNodeSelect,\n onNodeToggle,\n onNodeFocus,\n ...others\n } = useDefaultProps(\"HvTreeView\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const { getRootProps, contextValue } = useTreeView({\n disabledItemsFocusable,\n expanded,\n defaultExpanded,\n onNodeToggle,\n onNodeFocus,\n disableSelection,\n defaultSelected,\n selected,\n multiSelect,\n onNodeSelect: onNodeSelect as HvTreeViewProps<any>[\"onNodeSelect\"],\n id,\n defaultCollapseIcon,\n defaultEndIcon,\n defaultExpandIcon,\n defaultParentIcon,\n plugins: DEFAULT_TREE_VIEW_PLUGINS,\n rootRef: ref,\n });\n\n const rootProps = useSlotProps({\n elementType: \"ul\",\n externalSlotProps: {},\n externalForwardedProps: others,\n className: classes.root,\n getSlotProps: getRootProps,\n ownerState: props,\n });\n\n return (\n <TreeViewProvider value={contextValue}>\n <ul className={cx(classes.root, className)} {...rootProps} {...others}>\n {children}\n </ul>\n </TreeViewProvider>\n );\n});\n"],"names":["HvTreeView"],"mappings":";;;;;;;;;;AA6CO,MAAM,aAAa,gBAAgB,SAASA,YAEjD,OAAkC,KAAkC;AAC9D,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,0CAAuB,YAAW,EAAA;AAAA,IAClC,wCAAqB,aAAY,EAAA;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,EAAE,cAAc,aAAa,IAAI,YAAY;AAAA,IACjD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,EAAA,CACV;AAED,QAAM,YAAY,aAAa;AAAA,IAC7B,aAAa;AAAA,IACb,mBAAmB,CAAC;AAAA,IACpB,wBAAwB;AAAA,IACxB,WAAW,QAAQ;AAAA,IACnB,cAAc;AAAA,IACd,YAAY;AAAA,EAAA,CACb;AAED,6BACG,kBAAiB,EAAA,OAAO,cACvB,UAAA,oBAAC,QAAG,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,WAAY,GAAG,QAC5D,SACH,CAAA,GACF;AAEJ,CAAC;"}
1	+ {"version":3,"file":"TreeView.js","sources":["../../../src/TreeView/TreeView.tsx"],"sourcesContent":["import { useSlotProps } from \"@mui/base/utils\";\nimport { DropDownXS, DropRightXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { fixedForwardRef, HvBaseProps } from \"../types/generic\";\nimport {\n DEFAULT_TREE_VIEW_PLUGINS,\n DefaultTreeViewPluginParameters,\n} from \"./internals/hooks/plugins\";\nimport { useTreeView } from \"./internals/hooks/useTreeView\";\nimport { TreeViewProvider } from \"./internals/TreeViewProvider\";\nimport { staticClasses, useClasses } from \"./TreeView.styles\";\n\nexport { staticClasses as treeView2Classes }; // TODO: remove old `treeViewClasses`\n\nexport type HvTreeViewClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTreeViewProps<Multiple extends boolean \| undefined>\n extends HvBaseProps<HTMLUListElement>,\n DefaultTreeViewPluginParameters<Multiple> {\n /** A Jss Object used to override or extend the styles applied. /\n classes?: HvTreeViewClasses;\n /* Tree View children. Usually a `HvTreeItem` instance, or a custom variation of it /\n children?: React.ReactNode;\n}\n\n/\n A Tree View displays hierarchical structures.\n * It also facilitates the exploration of categorical levels and their content.\n \n Tree structures are built through composing the `HvTreeItem` component,\n * or a custom variation of it.\n \n It is based on the [MUI X TreeView](https://mui.com/x/react-tree-view) component.\n \n @example\n * ```tsx\n * <HvTreeView>\n * <HvTreeItem nodeId=\"1\" label=\"File1\" />\n * </HvTreeView>\n * ```\n */\nexport const HvTreeView = fixedForwardRef(function HvTreeView<\n Multiple extends boolean \| undefined,\n>(props: HvTreeViewProps<Multiple>, ref: React.Ref<HTMLUListElement>) {\n const {\n id,\n children,\n classes: classesProp,\n className,\n\n disabledItemsFocusable,\n multiSelect,\n expanded,\n defaultExpanded,\n selected,\n defaultSelected,\n disableSelection,\n defaultCollapseIcon = <DropDownXS />,\n defaultExpandIcon = <DropRightXS />,\n defaultEndIcon,\n defaultParentIcon,\n onNodeSelect,\n onNodeToggle,\n onNodeFocus,\n ...others\n } = useDefaultProps(\"HvTreeView\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const { getRootProps, contextValue } = useTreeView({\n disabledItemsFocusable,\n expanded,\n defaultExpanded,\n onNodeToggle,\n onNodeFocus,\n disableSelection,\n defaultSelected,\n selected,\n multiSelect,\n onNodeSelect: onNodeSelect as HvTreeViewProps<any>[\"onNodeSelect\"],\n id,\n defaultCollapseIcon,\n defaultEndIcon,\n defaultExpandIcon,\n defaultParentIcon,\n plugins: DEFAULT_TREE_VIEW_PLUGINS,\n rootRef: ref,\n });\n\n const rootProps = useSlotProps({\n elementType: \"ul\",\n externalSlotProps: {},\n externalForwardedProps: others,\n className: classes.root,\n getSlotProps: getRootProps,\n ownerState: props,\n });\n\n return (\n <TreeViewProvider value={contextValue}>\n <ul className={cx(classes.root, className)} {...rootProps} {...others}>\n {children}\n </ul>\n </TreeViewProvider>\n );\n});\n"],"names":["HvTreeView"],"mappings":";;;;;;;;;;AA6CO,MAAM,aAAa,gBAAgB,SAASA,YAEjD,OAAkC,KAAkC;AAC9D,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,0CAAuB,YAAW,EAAA;AAAA,IAClC,wCAAqB,aAAY,EAAA;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,EAAE,cAAc,aAAa,IAAI,YAAY;AAAA,IACjD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,EAAA,CACV;AAED,QAAM,YAAY,aAAa;AAAA,IAC7B,aAAa;AAAA,IACb,mBAAmB,CAAC;AAAA,IACpB,wBAAwB;AAAA,IACxB,WAAW,QAAQ;AAAA,IACnB,cAAc;AAAA,IACd,YAAY;AAAA,EAAA,CACb;AAED,6BACG,kBAAiB,EAAA,OAAO,cACvB,UAAA,oBAAC,QAAG,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,WAAY,GAAG,QAC5D,SACH,CAAA,GACF;AAEJ,CAAC;"}

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

@@ -1098,6 +1098,9 @@ export declare interface HvAccordionProps extends HvBaseProps<HTMLDivElement, "o
     disableEventHandling?: boolean;
 }
+/**
+ * The Action Bar accommodates all the actions related to a specific task on a screen or pattern.
+ */
 export declare const HvActionBar: ForwardRefExoticComponent<HvActionBarProps & RefAttributes<HTMLDivElement>>;
 export declare type HvActionBarClasses = ExtractNames<typeof useClasses_21>;
@@ -2396,7 +2399,7 @@ export declare interface HvCharCounterProps extends HvBaseProps {
  * A Checkbox is a mechanism that allows the user to select one or more options.
  *
  * Usually used in a Checkbox Group to present the user with a range of options from
- * which the user <b>may select any number of options</b> to complete their task.
+ * which the user **may select any number of options** to complete their task.
  *
  * It can also be used individually to represent the toggle of a single option, when
  * the Toggle Switch and Toggle Button aren't more appropriate.
@@ -2857,6 +2860,9 @@ export declare interface HvDatePickerProps extends Omit<HvFormElementProps, "onC
 /** @deprecated use `HvFormStatus` instead */
 export declare type HvDatePickerStatus = HvFormStatus;
+/**
+ * A Dialog is a graphical control element in the form of a small panel that communicates information and prompts for a response.
+ */
 export declare const HvDialog: (props: HvDialogProps) => JSX_3.Element;
 export declare type HvDialogActionClasses = ExtractNames<typeof useClasses_63>;
@@ -3784,16 +3790,6 @@ export declare type HvGlobalActionsVariant = "global" | "section";
  *
  * It's based on the [Material UI Grid](https://mui.com/material-ui/react-grid/).
  *
- * The definitions were set following the Design System directives:
- *
- * | Breakpoint | Width (in px) | Gutters (in px) | Number of columns |
- * | ---------- | ------------- | --------------- | ----------------- |
- * | xs         | [0-600[       | 16              | 4                 |
- * | sm         | [600-960[     | 16              | 8                 |
- * | md         | [960-1270[     | 32              | 12                |
- * | lg         | [1270-1920[    | 32              | 12                |
- * | xl         | [1920-...[    | 32              | 12                |
- *
  * However, the number of columns is set to 12 for all breakpoints, as it serves most
  * of the use cases and simplifies the implementation.
  * To opt-in to the Design System directives, you can set the `columns` prop to `auto`.
@@ -5138,7 +5134,7 @@ export declare type HvQueryBuilderRenderers = Record<string, ValueRenderer>;
  * A Radio Button is a mechanism that allows user to select just an option from a group of options.
  *
  * It should used in a Radio Button Group to present the user with a range of options from
- * which the user <b>may select just one option</b> to complete their task.
+ * which the user **may select just one option** to complete their task.
  *
  * Individual use of radio buttons, at least uncontrolled, is unadvised as React state management doesn't
  * respond to the browser's native management of radio inputs checked state.
@@ -5148,8 +5144,6 @@ export declare const HvRadio: ForwardRefExoticComponent<Omit<HvRadioProps, "ref"
 export declare type HvRadioClasses = ExtractNames<typeof useClasses_97>;
 /**
- * A group of radio buttons.
- *
  * A radio group is a type of selection list that can only have a single entry checked at any one time.
  */
 export declare const HvRadioGroup: ForwardRefExoticComponent<HvRadioGroupProps & RefAttributes<HTMLDivElement>>;
@@ -5816,9 +5810,9 @@ export declare interface HvSliderProps extends HvBaseProps<HTMLDivElement, "onCh
  * A Snackbar provides brief messages about app processes.
  * It is dismissed automatically after a given interval.
  *
- * Snackbar can be built with two different components.
- * One is the HvSnackbar, which wraps all the positioning, transition, auto hide, etc.
- * The other is the HvSnackbarContent, which allows a finer control and customization of the content of the Snackbar.
+ * Snackbar can be built with two different components:
+ * - `HvSnackbar`, which wraps all the positioning, transition, auto hide, etc.
+ * - `HvSnackbarContent`, which allows a finer control and customization of the content of the Snackbar.
  */
 export declare const HvSnackbar: ForwardRefExoticComponent<Omit<HvSnackbarProps, "ref"> & RefAttributes<unknown>>;
@@ -5900,6 +5894,12 @@ export declare interface HvSnackbarProps extends Omit<SnackbarProps, "action" |
     ref?: SnackbarProps["ref"];
 }
+/**
+ * A snackbar provider to control the stacking of multiple snackbars in the app.
+ *
+ * This component uses of the [Notistack](https://github.com/iamhosseindhv/notistack) library.
+ * Please refer to its [API Reference](https://notistack.com/v2.x/api-reference) for more complex usage scenarios.
+ */
 export declare const HvSnackbarProvider: ({ children, notistackClassesOverride, maxSnack, autoHideDuration, anchorOrigin, classes: classesProp, className, container, ...others }: HvSnackbarProviderProps) => JSX_3.Element;
 export declare type HvSnackbarProviderClasses = ExtractNames<typeof useClasses_107>;
@@ -6005,10 +6005,9 @@ export declare type HvSupportColorKeys = HvSupportColor;
 export declare type HvSupportColors = Record<HvSupportColorKeys, string>;
 /**
- * A Switch is <b>binary</b> and work as a digital on/off button.
+ * A Switch is **binary** and works as a digital on/off button.
  *
- * Use when two states are <b>opposite</b> and to trigger immediate
- * changes in the system.
+ * Use when two states are **opposite** and to trigger immediate changes in the system.
  */
 export declare const HvSwitch: ForwardRefExoticComponent<Omit<HvSwitchProps, "ref"> & RefAttributes<HTMLButtonElement>>;
@@ -6486,7 +6485,7 @@ export declare interface HvTabsProps extends Omit<TabsProps, "onChange"> {
  * Use tags to highlight an item's status for quick recognition and navigation
  * Use color to indicate meanings that users can learn and recognize across products
  *
- * It leverages the Chip component from Material UI
+ * It leverages the [MUI Chip](https://mui.com/material-ui/react-chip/) component
  */
 export declare const HvTag: ForwardRefExoticComponent<Omit<HvTagProps, "ref"> & RefAttributes<HTMLElement>>;
@@ -6853,6 +6852,9 @@ export declare type HvTimePickerValue = {
     seconds: number;
 };
+/**
+ * Use when two instances are opposite and the on/off analogy doesn’t apply. Only well-known icons should be used, otherwise, use a single checkbox for the same situation.
+ */
 export declare const HvToggleButton: ForwardRefExoticComponent<HvToggleButtonProps & RefAttributes<HTMLButtonElement>>;
 export declare interface HvToggleButtonProps extends HvBaseProps<HTMLButtonElement, "onClick"> {
@@ -6991,7 +6993,7 @@ export declare interface HvTreeItemProps extends React.HTMLAttributes<HTMLElemen
  * Tree structures are built through composing the `HvTreeItem` component,
  * or a custom variation of it.
  *
- * It is based on MUI's [TreeView](https://mui.com/x/react-tree-view) component.
+ * It is based on the [MUI X TreeView](https://mui.com/x/react-tree-view) component.
  *
  * @example
  * ```tsx

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.86.0",
+  "version": "5.87.1",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -32,10 +32,10 @@
   "dependencies": {
     "@emotion/cache": "^11.11.0",
     "@emotion/serialize": "^1.1.2",
-    "@hitachivantara/uikit-react-icons": "^5.13.4",
-    "@hitachivantara/uikit-react-shared": "^5.3.20",
-    "@hitachivantara/uikit-react-utils": "^0.2.21",
-    "@hitachivantara/uikit-styles": "^5.40.6",
+    "@hitachivantara/uikit-react-icons": "^5.13.5",
+    "@hitachivantara/uikit-react-shared": "^5.3.21",
+    "@hitachivantara/uikit-react-utils": "^0.2.22",
+    "@hitachivantara/uikit-styles": "^5.41.0",
     "@internationalized/date": "^3.2.0",
     "@mui/base": "^5.0.0-beta.40",
     "@popperjs/core": "^2.11.8",
@@ -62,7 +62,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "b640963c1ededed00ec3f0f2bce7f7cdab8891c6",
+  "gitHead": "bd8ed1f9b047a8760957e405541061b5468c689c",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",