@hitachivantara/uikit-react-core 5.38.1 → 5.38.2
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.
- package/dist/cjs/components/Banner/Banner.cjs.map +1 -1
- package/dist/cjs/components/Banner/BannerContent/BannerContent.cjs.map +1 -1
- package/dist/cjs/components/BaseCheckBox/BaseCheckBox.cjs.map +1 -1
- package/dist/cjs/components/BaseInput/BaseInput.cjs +1 -1
- package/dist/cjs/components/BaseInput/BaseInput.cjs.map +1 -1
- package/dist/cjs/components/BaseRadio/BaseRadio.cjs.map +1 -1
- package/dist/cjs/components/BaseSwitch/BaseSwitch.cjs.map +1 -1
- package/dist/cjs/components/Button/Button.styles.cjs +7 -18
- package/dist/cjs/components/Button/Button.styles.cjs.map +1 -1
- package/dist/cjs/components/Card/Content/Content.cjs.map +1 -1
- package/dist/cjs/components/Card/Header/Header.cjs.map +1 -1
- package/dist/cjs/components/Container/Container.cjs.map +1 -1
- package/dist/cjs/components/Dialog/Actions/Actions.cjs.map +1 -1
- package/dist/cjs/components/Dialog/Content/Content.cjs.map +1 -1
- package/dist/cjs/components/Dialog/Dialog.cjs.map +1 -1
- package/dist/cjs/components/Drawer/Drawer.cjs.map +1 -1
- package/dist/cjs/components/Grid/Grid.cjs.map +1 -1
- package/dist/cjs/components/ListContainer/ListItem/ListItem.cjs.map +1 -1
- package/dist/cjs/components/Radio/Radio.cjs.map +1 -1
- package/dist/cjs/components/Snackbar/Snackbar.cjs.map +1 -1
- package/dist/cjs/components/Snackbar/SnackbarContent/SnackbarContent.cjs.map +1 -1
- package/dist/cjs/components/Switch/Switch.cjs.map +1 -1
- package/dist/cjs/components/Tab/Tab.cjs.map +1 -1
- package/dist/esm/components/Banner/Banner.js.map +1 -1
- package/dist/esm/components/Banner/BannerContent/BannerContent.js.map +1 -1
- package/dist/esm/components/BaseCheckBox/BaseCheckBox.js.map +1 -1
- package/dist/esm/components/BaseInput/BaseInput.js +1 -1
- package/dist/esm/components/BaseInput/BaseInput.js.map +1 -1
- package/dist/esm/components/BaseRadio/BaseRadio.js.map +1 -1
- package/dist/esm/components/BaseSwitch/BaseSwitch.js.map +1 -1
- package/dist/esm/components/Button/Button.styles.js +7 -18
- package/dist/esm/components/Button/Button.styles.js.map +1 -1
- package/dist/esm/components/Card/Content/Content.js.map +1 -1
- package/dist/esm/components/Card/Header/Header.js.map +1 -1
- package/dist/esm/components/Container/Container.js.map +1 -1
- package/dist/esm/components/Dialog/Actions/Actions.js.map +1 -1
- package/dist/esm/components/Dialog/Content/Content.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/components/Drawer/Drawer.js.map +1 -1
- package/dist/esm/components/Grid/Grid.js.map +1 -1
- package/dist/esm/components/ListContainer/ListItem/ListItem.js.map +1 -1
- package/dist/esm/components/Radio/Radio.js.map +1 -1
- package/dist/esm/components/Snackbar/Snackbar.js.map +1 -1
- package/dist/esm/components/Snackbar/SnackbarContent/SnackbarContent.js.map +1 -1
- package/dist/esm/components/Switch/Switch.js.map +1 -1
- package/dist/esm/components/Tab/Tab.js.map +1 -1
- package/dist/types/index.d.ts +19 -25
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseRadio.js","sources":["../../../../src/components/BaseRadio/BaseRadio.tsx"],"sourcesContent":["import React, { useState, useCallback, forwardRef } from \"react\";\n\nimport MuiRadio, { RadioProps as MuiRadioProps } from \"@mui/material/Radio\";\n\nimport {\n RadioButtonUnselected,\n RadioButtonSelected,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport {
|
|
1
|
+
{"version":3,"file":"BaseRadio.js","sources":["../../../../src/components/BaseRadio/BaseRadio.tsx"],"sourcesContent":["import React, { useState, useCallback, forwardRef } from \"react\";\n\nimport MuiRadio, { RadioProps as MuiRadioProps } from \"@mui/material/Radio\";\n\nimport {\n RadioButtonUnselected,\n RadioButtonSelected,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./BaseRadio.styles\";\n\nexport { staticClasses as baseRadioClasses };\n\nexport type HvBaseRadioClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseRadioProps\n extends Omit<MuiRadioProps, \"onChange\" | \"classes\"> {\n /**\n * Class names to be applied.\n */\n className?: string;\n /**\n * A Jss Object used to override or extend the styles applied to the radio button.\n */\n classes?: HvBaseRadioClasses;\n /**\n * Id to be applied to the root node.\n */\n id?: string;\n /**\n * The input name.\n */\n name?: string;\n /**\n * The value of the input.\n *\n * The default value is \"on\".\n */\n value?: any;\n /**\n * Indicates that user input is required.\n */\n required?: boolean;\n /**\n * Indicates that the input is not editable.\n */\n readOnly?: boolean;\n /**\n * Indicates that the input 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 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 /**\n * @ignore\n */\n onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\nexport const getSelectorIcons = (\n options: { disabled: boolean; semantic: boolean },\n classes: HvBaseRadioClasses\n) => {\n const { disabled, semantic } = options;\n const color =\n (disabled && [\"atmo3\", \"secondary_60\"]) ||\n (semantic && [\"base_light\", \"base_dark\"]) ||\n undefined;\n const checkedColor =\n (disabled && [\"atmo3\", \"secondary_60\"]) ||\n (semantic && [\"base_dark\", \"base_light\"]) ||\n undefined;\n\n return {\n radio: <RadioButtonUnselected color={color} className={classes.icon} />,\n radioChecked: (\n <RadioButtonSelected color={checkedColor} className={classes.icon} />\n ),\n };\n};\n\n/**\n * A Radio Button is a mechanism that allows user to select one or more options.\n *\n * The Base Radio Button is a building block of the Radio Button form element. Don't\n * use unless implementing a custom use case not covered by the Radio Button form element.\n */\nexport const HvBaseRadio = forwardRef<HTMLButtonElement, HvBaseRadioProps>(\n (props, ref) => {\n const {\n classes: classesProp,\n className,\n id,\n name,\n value = \"on\",\n required = false,\n readOnly = false,\n disabled = false,\n checked,\n defaultChecked,\n onChange,\n semantic = false,\n inputProps,\n onFocusVisible,\n onBlur,\n ...others\n } = useDefaultProps(\"HvBaseRadio\", props);\n\n const { classes, cx } = useClasses(classesProp);\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 icons = getSelectorIcons({ disabled, semantic }, classes);\n\n const onLocalChange = useCallback(\n (evt: React.ChangeEvent<HTMLInputElement>) => {\n if (readOnly) {\n return;\n }\n\n onChange?.(evt, evt.target.checked, value);\n },\n [onChange, readOnly, value]\n );\n\n return (\n <MuiRadio\n ref={ref}\n id={id}\n name={name}\n className={cx(\n classes.root,\n {\n [classes.disabled]: disabled,\n [classes.focusVisible]: focusVisible,\n },\n className\n )}\n icon={icons.radio}\n checkedIcon={icons.radioChecked}\n color=\"default\"\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n disableRipple\n onChange={onLocalChange}\n value={value}\n checked={checked}\n defaultChecked={defaultChecked}\n inputProps={inputProps}\n onFocusVisible={onFocusVisibleCallback}\n onBlur={onBlurCallback}\n {...others}\n />\n );\n }\n);\n"],"names":["getSelectorIcons","options","classes","disabled","semantic","color","undefined","checkedColor","radio","icon","radioChecked","HvBaseRadio","forwardRef","props","ref","classesProp","className","id","name","value","required","readOnly","checked","defaultChecked","onChange","inputProps","onFocusVisible","onBlur","others","useDefaultProps","cx","useClasses","focusVisible","setFocusVisible","useState","onFocusVisibleCallback","useCallback","evt","onBlurCallback","icons","onLocalChange","target","root"],"mappings":";;;;;;;AA2FaA,MAAAA,mBAAmBA,CAC9BC,SACAC,YACG;AACG,QAAA;AAAA,IAAEC;AAAAA,IAAUC;AAAAA,EAAaH,IAAAA;AACzBI,QAAAA,QACHF,YAAY,CAAC,SAAS,cAAc,KACpCC,YAAY,CAAC,cAAc,WAAW,KACvCE;AACIC,QAAAA,eACHJ,YAAY,CAAC,SAAS,cAAc,KACpCC,YAAY,CAAC,aAAa,YAAY,KACvCE;AAEK,SAAA;AAAA,IACLE,OAAQ,oBAAA,uBAAA,EAAsB,OAAc,WAAWN,QAAQO,MAAQ;AAAA,IACvEC,cACG,oBAAA,qBAAA,EAAoB,OAAOH,cAAc,WAAWL,QAAQO,MAAK;AAAA,EAAA;AAGxE;AAQO,MAAME,cAAcC,WACzB,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJZ,SAASa;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXlB,WAAW;AAAA,IACXmB;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACApB,WAAW;AAAA,IACXqB;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,eAAehB,KAAK;AAElC,QAAA;AAAA,IAAEX;AAAAA,IAAS4B;AAAAA,EAAAA,IAAOC,WAAWhB,WAAW;AAE9C,QAAM,CAACiB,cAAcC,eAAe,IAAIC,SAAS,KAAK;AAEhDC,QAAAA,yBAAyBC,YAC7B,CAACC,QAA+B;AAC9BJ,oBAAgB,IAAI;AACpBP,qBAAiBW,GAAG;AAAA,EAAA,GAEtB,CAACX,cAAc,CACjB;AAEMY,QAAAA,iBAAiBF,YACrB,CAACC,QAA+B;AAC9BJ,oBAAgB,KAAK;AACrBN,aAASU,GAAG;AAAA,EAAA,GAEd,CAACV,MAAM,CACT;AAEA,QAAMY,QAAQvC,iBAAiB;AAAA,IAAEG;AAAAA,IAAUC;AAAAA,KAAYF,OAAO;AAExDsC,QAAAA,gBAAgBJ,YACpB,CAACC,QAA6C;AAC5C,QAAIhB,UAAU;AACZ;AAAA,IACF;AAEAG,eAAWa,KAAKA,IAAII,OAAOnB,SAASH,KAAK;AAAA,EAE3C,GAAA,CAACK,UAAUH,UAAUF,KAAK,CAC5B;AAGE,SAAA,oBAAC,YACC,KACA,IACA,MACA,WAAWW,GACT5B,QAAQwC,MACR;AAAA,IACE,CAACxC,QAAQC,QAAQ,GAAGA;AAAAA,IACpB,CAACD,QAAQ8B,YAAY,GAAGA;AAAAA,EAC1B,GACAhB,SACF,GACA,MAAMuB,MAAM/B,OACZ,aAAa+B,MAAM7B,cACnB,OAAM,WACN,UACA,UACA,UACA,eAAa,MACb,UAAU8B,eACV,OACA,SACA,gBACA,YACA,gBAAgBL,wBAChB,QAAQG,gBACJV,GAAAA,OACJ,CAAA;AAEN,CACF;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseSwitch.js","sources":["../../../../src/components/BaseSwitch/BaseSwitch.tsx"],"sourcesContent":["import React, { useState, useCallback, forwardRef } from \"react\";\n\nimport MuiSwitch, { SwitchProps as MuiSwitchProps } from \"@mui/material/Switch\";\n\nimport {
|
|
1
|
+
{"version":3,"file":"BaseSwitch.js","sources":["../../../../src/components/BaseSwitch/BaseSwitch.tsx"],"sourcesContent":["import React, { useState, useCallback, forwardRef } from \"react\";\n\nimport MuiSwitch, { SwitchProps as MuiSwitchProps } from \"@mui/material/Switch\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses, staticClasses } from \"./BaseSwitch.styles\";\n\nexport { staticClasses as baseSwitchClasses };\n\nexport type HvBaseSwitchClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseSwitchProps\n extends Omit<MuiSwitchProps, \"onChange\" | \"classes\"> {\n /**\n * Class names to be applied.\n */\n className?: string;\n /**\n * A Jss Object used to override or extend the styles applied to the switch.\n */\n classes?: HvBaseSwitchClasses;\n /**\n * Id to be applied to the root node.\n */\n id?: string;\n /**\n * The input name.\n */\n name?: string;\n /**\n * The value of the input.\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 * Indicates that user input is required.\n */\n required?: boolean;\n /**\n * Indicates that the input is not editable.\n */\n readOnly?: boolean;\n /**\n * Indicates that the input is disabled.\n */\n disabled?: 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 callback fired when the switch is pressed.\n */\n onChange?: (event: React.ChangeEvent, checked: boolean, value: any) => void;\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 /**\n * @ignore\n */\n onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\n/**\n * A Switch is <b>binary</b> and work as a digital on/off button.\n *\n * The Base Switch is a building block of the Switch form element. Don't use unless\n * implementing a custom use case not covered by the Switch form element.\n */\nexport const HvBaseSwitch = forwardRef<HTMLButtonElement, HvBaseSwitchProps>(\n (props, ref) => {\n const {\n classes: classesProp,\n className,\n\n id,\n name,\n value = \"on\",\n\n required = false,\n readOnly = false,\n disabled = false,\n\n checked,\n defaultChecked,\n\n onChange,\n\n inputProps,\n\n onFocusVisible,\n onBlur,\n\n ...others\n } = useDefaultProps(\"HvBaseSwitch\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [focusVisible, setFocusVisible] = useState(false);\n\n const onFocusVisibleCallback = useCallback(\n (evt: React.FocusEvent<any, Element>) => {\n setFocusVisible(true);\n onFocusVisible?.(evt);\n },\n [onFocusVisible]\n );\n\n const onBlurCallback = useCallback(\n (evt: React.FocusEvent<any, Element>) => {\n setFocusVisible(false);\n onBlur?.(evt);\n },\n [onBlur]\n );\n\n const onLocalChange = useCallback(\n (evt: React.ChangeEvent<HTMLInputElement>) => {\n if (readOnly) {\n return;\n }\n\n onChange?.(evt, evt.target.checked, value);\n },\n [onChange, readOnly, value]\n );\n\n return (\n <MuiSwitch\n ref={ref}\n id={id}\n name={name}\n className={cx(\n classes.root,\n {\n [classes.disabled]: disabled,\n [classes.readOnly]: readOnly,\n [classes.focusVisible]: focusVisible,\n },\n className\n )}\n color=\"default\"\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n disableRipple\n onChange={onLocalChange}\n value={value}\n checked={checked}\n defaultChecked={defaultChecked}\n classes={{\n root: classes.switch,\n switchBase: classes.switchBase,\n checked: classes.checked,\n track: classes.track,\n thumb: classes.thumb,\n disabled: classes.disabled,\n }}\n inputProps={inputProps}\n onFocusVisible={onFocusVisibleCallback}\n onBlur={onBlurCallback}\n {...others}\n />\n );\n }\n);\n"],"names":["HvBaseSwitch","forwardRef","props","ref","classes","classesProp","className","id","name","value","required","readOnly","disabled","checked","defaultChecked","onChange","inputProps","onFocusVisible","onBlur","others","useDefaultProps","cx","useClasses","focusVisible","setFocusVisible","useState","onFocusVisibleCallback","useCallback","evt","onBlurCallback","onLocalChange","target","root","switch","switchBase","track","thumb"],"mappings":";;;;;;AAuFO,MAAMA,eAAeC,WAC1B,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IAEAC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IAERC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,WAAW;AAAA,IAEXC;AAAAA,IACAC;AAAAA,IAEAC;AAAAA,IAEAC;AAAAA,IAEAC;AAAAA,IACAC;AAAAA,IAEA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAgBlB,KAAK;AAEnC,QAAA;AAAA,IAAEE;AAAAA,IAASiB;AAAAA,EAAAA,IAAOC,WAAWjB,WAAW;AAE9C,QAAM,CAACkB,cAAcC,eAAe,IAAIC,SAAS,KAAK;AAEhDC,QAAAA,yBAAyBC,YAC7B,CAACC,QAAwC;AACvCJ,oBAAgB,IAAI;AACpBP,qBAAiBW,GAAG;AAAA,EAAA,GAEtB,CAACX,cAAc,CACjB;AAEMY,QAAAA,iBAAiBF,YACrB,CAACC,QAAwC;AACvCJ,oBAAgB,KAAK;AACrBN,aAASU,GAAG;AAAA,EAAA,GAEd,CAACV,MAAM,CACT;AAEMY,QAAAA,gBAAgBH,YACpB,CAACC,QAA6C;AAC5C,QAAIjB,UAAU;AACZ;AAAA,IACF;AAEAI,eAAWa,KAAKA,IAAIG,OAAOlB,SAASJ,KAAK;AAAA,EAE3C,GAAA,CAACM,UAAUJ,UAAUF,KAAK,CAC5B;AAGE,SAAA,oBAAC,aACC,KACA,IACA,MACA,WAAWY,GACTjB,QAAQ4B,MACR;AAAA,IACE,CAAC5B,QAAQQ,QAAQ,GAAGA;AAAAA,IACpB,CAACR,QAAQO,QAAQ,GAAGA;AAAAA,IACpB,CAACP,QAAQmB,YAAY,GAAGA;AAAAA,EAAAA,GAE1BjB,SACF,GACA,OAAM,WACN,UACA,UACA,UACA,eAAa,MACb,UAAUwB,eACV,OACA,SACA,gBACA,SAAS;AAAA,IACPE,MAAM5B,QAAQ6B;AAAAA,IACdC,YAAY9B,QAAQ8B;AAAAA,IACpBrB,SAAST,QAAQS;AAAAA,IACjBsB,OAAO/B,QAAQ+B;AAAAA,IACfC,OAAOhC,QAAQgC;AAAAA,IACfxB,UAAUR,QAAQQ;AAAAA,EAAAA,GAEpB,YACA,gBAAgBc,wBAChB,QAAQG,gBACR,GAAIV,OACJ,CAAA;AAEN,CACF;"}
|
|
@@ -13,12 +13,13 @@ const {
|
|
|
13
13
|
cursor: "pointer",
|
|
14
14
|
minWidth: "70px",
|
|
15
15
|
whiteSpace: "nowrap",
|
|
16
|
-
"&:hover": {
|
|
17
|
-
|
|
16
|
+
"&:hover": {
|
|
17
|
+
backgroundColor: theme.colors.containerBackgroundHover
|
|
18
|
+
},
|
|
18
19
|
"&:focus-visible": {
|
|
19
|
-
...outlineStyles
|
|
20
|
+
...outlineStyles,
|
|
21
|
+
backgroundColor: theme.colors.containerBackgroundHover
|
|
20
22
|
},
|
|
21
|
-
"&:active": {},
|
|
22
23
|
// default button - no size specified
|
|
23
24
|
fontFamily: theme.fontFamily.body,
|
|
24
25
|
fontSize: theme.fontSizes.base,
|
|
@@ -59,17 +60,11 @@ const {
|
|
|
59
60
|
primarySubtle: {
|
|
60
61
|
color: theme.colors.primary,
|
|
61
62
|
backgroundColor: "transparent",
|
|
62
|
-
border:
|
|
63
|
-
"&:hover, &:focus-visible": {
|
|
64
|
-
backgroundColor: theme.colors.containerBackgroundHover
|
|
65
|
-
}
|
|
63
|
+
border: "1px solid currentColor"
|
|
66
64
|
},
|
|
67
65
|
primaryGhost: {
|
|
68
66
|
color: theme.colors.primary,
|
|
69
67
|
backgroundColor: "transparent",
|
|
70
|
-
"&:hover, &:focus-visible": {
|
|
71
|
-
backgroundColor: theme.colors.containerBackgroundHover
|
|
72
|
-
},
|
|
73
68
|
"&:disabled": {
|
|
74
69
|
backgroundColor: "transparent"
|
|
75
70
|
}
|
|
@@ -77,17 +72,11 @@ const {
|
|
|
77
72
|
secondarySubtle: {
|
|
78
73
|
color: theme.colors.secondary,
|
|
79
74
|
backgroundColor: "transparent",
|
|
80
|
-
border:
|
|
81
|
-
"&:hover, &:focus-visible": {
|
|
82
|
-
backgroundColor: theme.colors.containerBackgroundHover
|
|
83
|
-
}
|
|
75
|
+
border: "1px solid currentColor"
|
|
84
76
|
},
|
|
85
77
|
secondaryGhost: {
|
|
86
78
|
color: theme.colors.secondary,
|
|
87
79
|
backgroundColor: "transparent",
|
|
88
|
-
"&:hover, &:focus-visible": {
|
|
89
|
-
backgroundColor: theme.colors.containerBackgroundHover
|
|
90
|
-
},
|
|
91
80
|
"&:disabled": {
|
|
92
81
|
backgroundColor: "transparent"
|
|
93
82
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.styles.js","sources":["../../../../src/components/Button/Button.styles.ts"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nimport { HvButtonRadius, HvButtonSize } from \"./types\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButton\", {\n root: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n textTransform: \"none\",\n cursor: \"pointer\",\n minWidth: \"70px\",\n\n whiteSpace: \"nowrap\",\n\n \"&:hover\": {
|
|
1
|
+
{"version":3,"file":"Button.styles.js","sources":["../../../../src/components/Button/Button.styles.ts"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nimport { HvButtonRadius, HvButtonSize } from \"./types\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButton\", {\n root: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n textTransform: \"none\",\n cursor: \"pointer\",\n minWidth: \"70px\",\n\n whiteSpace: \"nowrap\",\n\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n \"&:focus-visible\": {\n ...outlineStyles,\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n\n // default button - no size specified\n fontFamily: theme.fontFamily.body,\n fontSize: theme.fontSizes.base,\n fontWeight: theme.fontWeights.semibold,\n lineHeight: \"11px\",\n letterSpacing: 0,\n height: \"32px\",\n borderRadius: theme.radii.base,\n padding: theme.spacing(\"xs\", \"sm\"),\n },\n startIcon: {\n marginLeft: `calc(-1 * ${theme.space.xs})`,\n },\n endIcon: {\n marginRight: `calc(-1 * ${theme.space.xs})`,\n },\n focusVisible: {},\n\n disabled: {\n color: theme.colors.secondary_60,\n borderColor: theme.colors.atmo4,\n backgroundColor: theme.colors.atmo3,\n cursor: \"not-allowed\",\n pointerEvents: \"none\",\n },\n\n icon: {\n margin: 0,\n padding: 0,\n height: \"fit-content\",\n minWidth: \"unset\",\n },\n\n primary: {\n color: theme.colors.atmo1,\n backgroundColor: theme.colors.primary,\n \"&:hover, &:focus-visible\": {\n backgroundColor: theme.colors.primary_80,\n },\n },\n primarySubtle: {\n color: theme.colors.primary,\n backgroundColor: \"transparent\",\n border: \"1px solid currentColor\",\n },\n primaryGhost: {\n color: theme.colors.primary,\n backgroundColor: \"transparent\",\n \"&:disabled\": {\n backgroundColor: \"transparent\",\n },\n },\n secondarySubtle: {\n color: theme.colors.secondary,\n backgroundColor: \"transparent\",\n border: \"1px solid currentColor\",\n },\n secondaryGhost: {\n color: theme.colors.secondary,\n backgroundColor: \"transparent\",\n \"&:disabled\": {\n backgroundColor: \"transparent\",\n },\n },\n semantic: {\n color: theme.colors.base_dark,\n backgroundColor: \"transparent\",\n \"&:hover, &:focus-visible\": {\n backgroundColor: \"rgba(251, 252, 252, 0.3)\",\n },\n \"&:disabled\": {\n backgroundColor: \"rgba(251, 252, 252, 0.1)\",\n },\n },\n secondary: {},\n ghost: {},\n});\n\nexport const getRadiusStyles = (radius: HvButtonRadius): CSSInterpolation => ({\n borderRadius: theme.radii[radius],\n});\n\nexport const getSizeStyles = (size: HvButtonSize): CSSInterpolation => ({\n height: theme.sizes[size],\n paddingLeft: theme.space[size],\n paddingRight: theme.space[size],\n fontSize: theme.fontSizes[size],\n});\n\nexport const getOverrideColors = (): CSSInterpolation => ({\n \"& svg .color0\": {\n fill: \"currentcolor\",\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","alignItems","justifyContent","textTransform","cursor","minWidth","whiteSpace","backgroundColor","theme","colors","containerBackgroundHover","outlineStyles","fontFamily","body","fontSize","fontSizes","base","fontWeight","fontWeights","semibold","lineHeight","letterSpacing","height","borderRadius","radii","padding","spacing","startIcon","marginLeft","space","xs","endIcon","marginRight","focusVisible","disabled","color","secondary_60","borderColor","atmo4","atmo3","pointerEvents","icon","margin","primary","atmo1","primary_80","primarySubtle","border","primaryGhost","secondarySubtle","secondary","secondaryGhost","semantic","base_dark","ghost","getRadiusStyles","radius","getSizeStyles","size","sizes","paddingLeft","paddingRight","getOverrideColors","fill"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Content.js","sources":["../../../../../src/components/Card/Content/Content.tsx"],"sourcesContent":["import MuiCardContent, {\n CardContentProps as MuiCardContentProps,\n} from \"@mui/material/CardContent\";\n\nimport {
|
|
1
|
+
{"version":3,"file":"Content.js","sources":["../../../../../src/components/Card/Content/Content.tsx"],"sourcesContent":["import MuiCardContent, {\n CardContentProps as MuiCardContentProps,\n} from \"@mui/material/CardContent\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Content.styles\";\n\nexport { staticClasses as cardContentClasses };\n\nexport type HvCardContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardContentProps\n extends Omit<MuiCardContentProps, \"classes\"> {\n /** The function that will be executed when this section is clicked. */\n onClick?: (event: React.SyntheticEvent) => void;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvCardContentClasses;\n}\n\nexport const HvCardContent = ({\n id,\n classes: classesProp,\n className,\n children,\n onClick,\n ...others\n}: HvCardContentProps) => {\n const { classes, cx } = useClasses(classesProp);\n return (\n <MuiCardContent\n id={id}\n className={cx(classes.content, className)}\n onClick={onClick}\n {...others}\n >\n {children}\n </MuiCardContent>\n );\n};\n"],"names":["HvCardContent","id","classes","classesProp","className","children","onClick","others","cx","useClasses","content"],"mappings":";;;;AAoBO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACe,MAAM;AAClB,QAAA;AAAA,IAAEL;AAAAA,IAASM;AAAAA,EAAAA,IAAOC,WAAWN,WAAW;AAC9C,SACG,oBAAA,gBAAA,EACC,IACA,WAAWK,GAAGN,QAAQQ,SAASN,SAAS,GACxC,SACA,GAAIG,QAEHF,SACH,CAAA;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","sources":["../../../../../src/components/Card/Header/Header.tsx"],"sourcesContent":["import MuiCardHeader, {\n CardHeaderProps as MuiCardHeaderProps,\n} from \"@mui/material/CardHeader\";\n\nimport {
|
|
1
|
+
{"version":3,"file":"Header.js","sources":["../../../../../src/components/Card/Header/Header.tsx"],"sourcesContent":["import MuiCardHeader, {\n CardHeaderProps as MuiCardHeaderProps,\n} from \"@mui/material/CardHeader\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks\";\n\nimport { staticClasses, useClasses } from \"./Header.styles\";\n\nexport { staticClasses as cardHeaderClasses };\n\nexport type HvCardHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardHeaderProps extends Omit<MuiCardHeaderProps, \"classes\"> {\n /** The renderable content inside the title slot of the header. */\n title: React.ReactNode;\n /** The renderable content inside the subheader slot of the header. */\n subheader?: React.ReactNode;\n /** The renderable content inside the icon slot of the header. */\n icon?: React.ReactNode;\n /** The function that will be executed when this section is clicked. */\n onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvCardHeaderClasses;\n}\n\nexport const HvCardHeader = (props: HvCardHeaderProps) => {\n const {\n classes: classesProp,\n className,\n title,\n subheader,\n icon,\n onClick,\n ...others\n } = useDefaultProps(\"HvCardHeader\", props);\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <MuiCardHeader\n title={title}\n subheader={subheader}\n action={icon}\n onClick={onClick}\n className={cx(classes.root, className)}\n classes={{\n title: cx({\n // TODO: review conditional in v6\n [classes.titleShort]: icon,\n [classes.title]: !icon,\n }),\n subheader: classes.subheader,\n action: classes.action,\n content: classes.content,\n }}\n {...others}\n />\n );\n};\n"],"names":["HvCardHeader","props","classes","classesProp","className","title","subheader","icon","onClick","others","useDefaultProps","cx","useClasses","root","titleShort","action","content"],"mappings":";;;;;AA2BaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAgBT,KAAK;AACnC,QAAA;AAAA,IAAEC;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AAE9C,SACG,oBAAA,eAAA,EACC,OACA,WACA,QAAQI,MACR,SACA,WAAWI,GAAGT,QAAQW,MAAMT,SAAS,GACrC,SAAS;AAAA,IACPC,OAAOM,GAAG;AAAA;AAAA,MAER,CAACT,QAAQY,UAAU,GAAGP;AAAAA,MACtB,CAACL,QAAQG,KAAK,GAAG,CAACE;AAAAA,IAAAA,CACnB;AAAA,IACDD,WAAWJ,QAAQI;AAAAA,IACnBS,QAAQb,QAAQa;AAAAA,IAChBC,SAASd,QAAQc;AAAAA,EAAAA,GAEfP,GAAAA,OACJ,CAAA;AAEN;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Container.js","sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport MuiContainer, {\n ContainerProps as MuiContainerProps,\n} from \"@mui/material/Container\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nimport {
|
|
1
|
+
{"version":3,"file":"Container.js","sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport MuiContainer, {\n ContainerProps as MuiContainerProps,\n} from \"@mui/material/Container\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Container.styles\";\n\nexport { staticClasses as containerClasses };\n\nexport type HvContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvContainerProps extends Omit<MuiContainerProps, \"classes\"> {\n /**\n * The component used for the root node.\n * Either a string to use a DOM element or a component.\n */\n component?: React.ElementType;\n /**\n * Determine the max-width of the container.\n * The container width grows with the size of the screen.\n * Set to `false` to disable `maxWidth`.\n */\n maxWidth?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | false;\n /** If `true`, the left and right padding is removed. */\n disableGutters?: boolean;\n /**\n * Set the max-width to match the min-width of the current breakpoint.\n * This is useful if you'd prefer to design for a fixed set of sizes\n * instead of trying to accommodate a fully fluid viewport.\n * It's fluid by default.\n */\n fixed?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvContainerClasses;\n}\n\n/** The container enables you to center your content horizontally and bound it to a specific breakpoint. */\nexport const HvContainer = forwardRef<HTMLDivElement, HvContainerProps>(\n (props, ref) => {\n const {\n maxWidth = false,\n classes: classesProp,\n className,\n fixed,\n disableGutters,\n ...others\n } = useDefaultProps(\"HvContainer\", props);\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const muiTheme = useTheme();\n\n const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n const gutters = upMd\n ? {\n // Increases specificity\n [`&.${staticClasses.root}`]: {\n paddingLeft: theme.spacing(4),\n paddingRight: theme.spacing(4),\n },\n }\n : {\n // Increases specificity\n [`&.${staticClasses.root}`]: {\n paddingLeft: theme.space.sm,\n paddingRight: theme.space.sm,\n },\n };\n\n return (\n <MuiContainer\n className={cx({ [css(gutters)]: !disableGutters }, className)}\n classes={{\n root: classes.root,\n disableGutters: classes.disableGutters,\n fixed: classes.fixed,\n maxWidthXs: classes.maxWidthXs,\n maxWidthSm: classes.maxWidthSm,\n maxWidthMd: classes.maxWidthMd,\n maxWidthLg: classes.maxWidthLg,\n maxWidthXl: classes.maxWidthXl,\n }}\n ref={ref}\n maxWidth={maxWidth}\n fixed={fixed}\n disableGutters={disableGutters}\n {...others}\n />\n );\n }\n);\n"],"names":["HvContainer","forwardRef","props","ref","maxWidth","classes","classesProp","className","fixed","disableGutters","others","useDefaultProps","cx","css","useClasses","muiTheme","useTheme","upMd","useMediaQuery","breakpoints","up","gutters","staticClasses","root","paddingLeft","theme","spacing","paddingRight","space","sm","maxWidthXs","maxWidthSm","maxWidthMd","maxWidthLg","maxWidthXl"],"mappings":";;;;;;;;AA6CO,MAAMA,cAAcC,WACzB,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC,WAAW;AAAA,IACXC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,eAAeT,KAAK;AAElC,QAAA;AAAA,IAAEG;AAAAA,IAASO;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWR,WAAW;AAEnD,QAAMS,WAAWC;AAEjB,QAAMC,OAAOC,cAAcH,SAASI,YAAYC,GAAG,IAAI,CAAC;AAExD,QAAMC,UAAUJ,OACZ;AAAA;AAAA,IAEE,CAAE,KAAIK,cAAcC,IAAK,EAAC,GAAG;AAAA,MAC3BC,aAAaC,MAAMC,QAAQ,CAAC;AAAA,MAC5BC,cAAcF,MAAMC,QAAQ,CAAC;AAAA,IAC/B;AAAA,EAAA,IAEF;AAAA;AAAA,IAEE,CAAE,KAAIJ,cAAcC,IAAK,EAAC,GAAG;AAAA,MAC3BC,aAAaC,MAAMG,MAAMC;AAAAA,MACzBF,cAAcF,MAAMG,MAAMC;AAAAA,IAC5B;AAAA,EAAA;AAIJ,SAAA,oBAAC,cACC,EAAA,WAAWjB,GAAG;AAAA,IAAE,CAACC,IAAIQ,OAAO,CAAC,GAAG,CAACZ;AAAAA,EAAAA,GAAkBF,SAAS,GAC5D,SAAS;AAAA,IACPgB,MAAMlB,QAAQkB;AAAAA,IACdd,gBAAgBJ,QAAQI;AAAAA,IACxBD,OAAOH,QAAQG;AAAAA,IACfsB,YAAYzB,QAAQyB;AAAAA,IACpBC,YAAY1B,QAAQ0B;AAAAA,IACpBC,YAAY3B,QAAQ2B;AAAAA,IACpBC,YAAY5B,QAAQ4B;AAAAA,IACpBC,YAAY7B,QAAQ6B;AAAAA,EAAAA,GAEtB,KACA,UACA,OACA,gBACIxB,GAAAA,OACJ,CAAA;AAEN,CACF;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Actions.js","sources":["../../../../../src/components/Dialog/Actions/Actions.tsx"],"sourcesContent":["import MuiDialogActions, {\n DialogActionsProps as MuiDialogActionsProps,\n} from \"@mui/material/DialogActions\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport {
|
|
1
|
+
{"version":3,"file":"Actions.js","sources":["../../../../../src/components/Dialog/Actions/Actions.tsx"],"sourcesContent":["import MuiDialogActions, {\n DialogActionsProps as MuiDialogActionsProps,\n} from \"@mui/material/DialogActions\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Actions.styles\";\nimport { useDialogContext } from \"../context\";\n\nexport { staticClasses as dialogActionClasses };\n\nexport type HvDialogActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogActionsProps\n extends Omit<MuiDialogActionsProps, \"classes\"> {\n /** Set the dialog to fullscreen mode. @deprecated set `fullscreen` in `HvDialog` */\n fullscreen?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDialogActionClasses;\n}\n\nexport const HvDialogActions = (props: HvDialogActionsProps) => {\n const {\n classes: classesProp,\n className,\n children,\n fullscreen: fullScreenProp,\n ...others\n } = useDefaultProps(\"HvDialogActions\", props);\n const context = useDialogContext();\n const fullscreen = fullScreenProp ?? context.fullscreen;\n\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <MuiDialogActions\n className={className}\n classes={{\n root: cx(classes.root, { [classes.fullscreen]: fullscreen }),\n spacing: classes.spacing,\n }}\n {...others}\n >\n {children}\n </MuiDialogActions>\n );\n};\n"],"names":["HvDialogActions","props","classes","classesProp","className","children","fullscreen","fullScreenProp","others","useDefaultProps","context","useDialogContext","cx","useClasses","root","spacing"],"mappings":";;;;;;AAuBaA,MAAAA,kBAAkBA,CAACC,UAAgC;AACxD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,YAAYC;AAAAA,IACZ,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,mBAAmBR,KAAK;AAC5C,QAAMS,UAAUC;AACVL,QAAAA,aAAaC,kBAAkBG,QAAQJ;AAEvC,QAAA;AAAA,IAAEJ;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAG5C,SAAA,oBAAC,kBACC,EAAA,WACA,SAAS;AAAA,IACPW,MAAMF,GAAGV,QAAQY,MAAM;AAAA,MAAE,CAACZ,QAAQI,UAAU,GAAGA;AAAAA,IAAAA,CAAY;AAAA,IAC3DS,SAASb,QAAQa;AAAAA,EAAAA,GAEfP,GAAAA,QAEHH,SACH,CAAA;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Content.js","sources":["../../../../../src/components/Dialog/Content/Content.tsx"],"sourcesContent":["import MuiDialogContent, {\n DialogContentProps as MuiDialogContentProps,\n} from \"@mui/material/DialogContent\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport {
|
|
1
|
+
{"version":3,"file":"Content.js","sources":["../../../../../src/components/Dialog/Content/Content.tsx"],"sourcesContent":["import MuiDialogContent, {\n DialogContentProps as MuiDialogContentProps,\n} from \"@mui/material/DialogContent\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { staticClasses, useClasses } from \"./Content.styles\";\n\nexport { staticClasses as dialogContentClasses };\n\nexport type HvDialogContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogContentProps\n extends Omit<MuiDialogContentProps, \"classes\"> {\n /** Content should be indented in relationship to the Dialog title. */\n indentContent?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDialogContentClasses;\n}\n\nexport const HvDialogContent = (props: HvDialogContentProps) => {\n const {\n classes: classesProp,\n className,\n children,\n indentContent = false,\n } = useDefaultProps(\"HvDialogContent\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <HvTypography\n component={MuiDialogContent}\n className={cx(\n classes.root,\n { [classes.textContent]: !!indentContent },\n className\n )}\n >\n {children}\n </HvTypography>\n );\n};\n"],"names":["HvDialogContent","props","classes","classesProp","className","children","indentContent","useDefaultProps","cx","useClasses","MuiDialogContent","root","textContent"],"mappings":";;;;;;AAuBaA,MAAAA,kBAAkBA,CAACC,UAAgC;AACxD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,gBAAgB;AAAA,EAAA,IACdC,gBAAgB,mBAAmBN,KAAK;AAEtC,QAAA;AAAA,IAAEC;AAAAA,IAASM;AAAAA,EAAAA,IAAOC,WAAWN,WAAW;AAE9C,6BACG,cACC,EAAA,WAAWO,kBACX,WAAWF,GACTN,QAAQS,MACR;AAAA,IAAE,CAACT,QAAQU,WAAW,GAAG,CAAC,CAACN;AAAAA,EAAAA,GAC3BF,SACF,GAECC,SACH,CAAA;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\n\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport {
|
|
1
|
+
{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\n\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { getElementById } from \"@core/utils/document\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\nimport { DialogContext } from \"./context\";\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?: (event: any, reason?: \"escapeKeyDown\" | \"backdropClick\") => void;\n /** @inheritdoc */\n maxWidth?: MuiDialogProps[\"maxWidth\"];\n /** @inheritdoc */\n fullWidth?: MuiDialogProps[\"fullWidth\"];\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 fullscreen = false,\n disableBackdropClick = false,\n ...others\n } = useDefaultProps(\"HvDialog\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n const { rootId, colors } = 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={cx(classes.root, className)}\n classes={{ container: css({ position: \"relative\" }) }}\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: cx(\n css({\n background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4, 0.8),\n }),\n classes.background\n ),\n },\n },\n }}\n PaperProps={{\n classes: {\n root: cx(\n css({ position: \"absolute\" }),\n classes.paper,\n variant && cx(classes.statusBar, classes[variant]),\n {\n [classes.fullscreen]: fullscreen,\n }\n ),\n },\n }}\n aria-modal\n {...others}\n >\n <HvTooltip placement=\"top\" title={buttonTitle}>\n <HvButton\n id={setId(id, \"close\")}\n className={classes.closeButton}\n variant=\"secondaryGhost\"\n onClick={(event) => onClose?.(event, undefined)}\n >\n <Close role=\"none\" />\n </HvButton>\n </HvTooltip>\n <DialogContext.Provider value={contextValue}>\n {children}\n </DialogContext.Provider>\n </MuiDialog>\n );\n};\n"],"names":["HvDialog","props","variant","classes","classesProp","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","useDefaultProps","css","cx","useClasses","rootId","colors","useTheme","measuredRef","useCallback","element","document","getElementById","focus","contextValue","useMemo","root","container","position","event","reason","backdrop","background","hexToRgbA","atmo4","theme","paper","statusBar","setId","closeButton","undefined"],"mappings":";;;;;;;;;;;;;;;AAwDaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC,cAAc;AAAA,IACdC,aAAa;AAAA,IACbC,uBAAuB;AAAA,IACvB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYd,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASa;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWd,WAAW;AAC7C,QAAA;AAAA,IAAEe;AAAAA,IAAQC;AAAAA,MAAWC,SAAS;AAE9BC,QAAAA,cAAcC,YAAY,MAAM;AACpC,QAAI,CAACb;AAAgB;AAEfc,UAAAA,UAAUC,SAASC,eAAehB,cAAc;AACtDc,aAASG,MAAM;AAAA,EAAA,GACd,CAACjB,cAAc,CAAC;AAEbkB,QAAAA,eAAeC,QAAQ,OAAO;AAAA,IAAEjB;AAAAA,EAAAA,IAAe,CAACA,UAAU,CAAC;AAEjE,SACG,qBAAA,WAAA,EACC,WAAWc,eAAeP,MAAM,GAChC,WAAWF,GAAGd,QAAQ2B,MAAMzB,SAAS,GACrC,SAAS;AAAA,IAAE0B,WAAWf,IAAI;AAAA,MAAEgB,UAAU;AAAA,IAAA,CAAY;AAAA,EAAA,GAClD,IACA,KAAKV,aACL,MACA,YAAYV,YACZ,SAAS,CAACqB,OAAOC,WAAW;AAGtBrB,QAAAA;AAAsB;AAE1BJ,cAAUwB,OAAOC,MAAM;AAAA,KAEzB,WAAW;AAAA,IACTC,UAAU;AAAA,MACRhC,SAAS;AAAA,QACP2B,MAAMb,GACJD,IAAI;AAAA,UACFoB,YAAYC,UAAUjB,QAAQkB,SAASC,MAAMnB,OAAOkB,OAAO,GAAG;AAAA,QAAA,CAC/D,GACDnC,QAAQiC,UACV;AAAA,MACF;AAAA,IACF;AAAA,KAEF,YAAY;AAAA,IACVjC,SAAS;AAAA,MACP2B,MAAMb,GACJD,IAAI;AAAA,QAAEgB,UAAU;AAAA,MAAA,CAAY,GAC5B7B,QAAQqC,OACRtC,WAAWe,GAAGd,QAAQsC,WAAWtC,QAAQD,OAAO,CAAC,GACjD;AAAA,QACE,CAACC,QAAQS,UAAU,GAAGA;AAAAA,MAAAA,CAE1B;AAAA,IACF;AAAA,EAEF,GAAA,cAAU,MACV,GAAIE,QAEJ,UAAA;AAAA,IAAA,oBAAC,WAAU,EAAA,WAAU,OAAM,OAAOH,aAChC,UAAA,oBAAC,UACC,EAAA,IAAI+B,MAAMpC,IAAI,OAAO,GACrB,WAAWH,QAAQwC,aACnB,SAAQ,kBACR,SAAUV,CAAUxB,UAAAA,UAAUwB,OAAOW,MAAS,GAE9C,UAAA,oBAAC,OAAM,EAAA,MAAK,OAAM,CAAA,EACpB,CAAA,GACF;AAAA,wBACC,cAAc,UAAd,EAAuB,OAAOhB,cAC5BrB,UACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import {\n Drawer as MuiDrawer,\n DrawerProps as MuiDrawerProps,\n Backdrop as MuiBackdrop,\n} from \"@mui/material\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport {
|
|
1
|
+
{"version":3,"file":"Drawer.js","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import {\n Drawer as MuiDrawer,\n DrawerProps as MuiDrawerProps,\n Backdrop as MuiBackdrop,\n} from \"@mui/material\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { IconButton } from \"@core/utils/IconButton\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps extends Omit<MuiDrawerProps, \"classes\"> {\n /**\n * Class names to be applied.\n */\n className?: string;\n /**\n * Id to be applied to the root node.\n */\n id?: string;\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes?: HvDrawerClasses;\n /**\n * Components of the Drawer.\n */\n children?: React.ReactNode;\n /**\n * Current state of the Drawer.\n */\n open?: boolean;\n /**\n * Function executed on close.\n * Extended from Modal from material-ui\n *\n */\n onClose?: (\n event: React.SyntheticEvent,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => void;\n /**\n * The side the drawer opens from.\n */\n anchor?: \"left\" | \"top\" | \"right\" | \"bottom\";\n /**\n * Title for the button close.\n */\n buttonTitle?: string;\n /**\n * Show backdrop when drawer ix open.\n */\n showBackdrop?: boolean;\n /**\n * Prevent closing the dialog when clicking on the backdrop.\n */\n disableBackdropClick?: boolean;\n /** @ignore */\n ref?: MuiDrawerProps[\"ref\"];\n /** @ignore */\n component?: MuiDrawerProps[\"component\"];\n}\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = (props: HvDrawerProps) => {\n const {\n className,\n classes: classesProp,\n id,\n children,\n open,\n onClose,\n anchor = \"right\",\n buttonTitle = \"Close\",\n showBackdrop = true,\n disableBackdropClick = false,\n ...others\n } = useDefaultProps(\"HvDrawer\", props);\n\n const { classes, cx, css } = useClasses(classesProp);\n const { colors } = useTheme();\n\n return (\n <>\n <MuiDrawer\n className={cx(classes.root, className)}\n id={id}\n anchor={anchor}\n open={open}\n PaperProps={{\n classes: {\n root: classes.paper,\n },\n }}\n onClose={onClose}\n {...others}\n >\n <IconButton\n id={setId(id, \"close\")}\n className={classes.closeButton}\n variant=\"secondaryGhost\"\n onClick={onClose}\n title={buttonTitle}\n >\n <Close role=\"none\" />\n </IconButton>\n {children}\n </MuiDrawer>\n {showBackdrop && (\n <MuiBackdrop\n open={!!open}\n onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n if (disableBackdropClick) return;\n onClose?.(event, \"backdropClick\");\n }}\n className={cx(\n css({\n background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4),\n }),\n classes.background\n )}\n />\n )}\n </>\n );\n};\n"],"names":["HvDrawer","props","className","classes","classesProp","id","children","open","onClose","anchor","buttonTitle","showBackdrop","disableBackdropClick","others","useDefaultProps","cx","css","useClasses","colors","useTheme","MuiDrawer","root","paper","setId","closeButton","MuiBackdrop","event","background","hexToRgbA","atmo4","theme"],"mappings":";;;;;;;;;;;AAiFaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAAS;AAAA,IACTC,cAAc;AAAA,IACdC,eAAe;AAAA,IACfC,uBAAuB;AAAA,IACvB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYb,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASY;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWb,WAAW;AAC7C,QAAA;AAAA,IAAEc;AAAAA,MAAWC,SAAS;AAE5B,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,qBAAAC,QAAA,EACC,WAAWL,GAAGZ,QAAQkB,MAAMnB,SAAS,GACrC,IACA,QACA,MACA,YAAY;AAAA,MACVC,SAAS;AAAA,QACPkB,MAAMlB,QAAQmB;AAAAA,MAChB;AAAA,IAAA,GAEF,SACIT,GAAAA,QAEJ,UAAA;AAAA,MAAA,oBAAC,cACC,IAAIU,MAAMlB,IAAI,OAAO,GACrB,WAAWF,QAAQqB,aACnB,SAAQ,kBACR,SAAShB,SACT,OAAOE,aAEP,8BAAC,OAAM,EAAA,MAAK,QAAM,EACpB,CAAA;AAAA,MACCJ;AAAAA,IAAAA,GACH;AAAA,IACCK,oCACEc,UACC,EAAA,MAAM,CAAC,CAAClB,MACR,SAAS,CAACmB,UAAqD;AACzDd,UAAAA;AAAsB;AAC1BJ,gBAAUkB,OAAO,eAAe;AAAA,IAAA,GAElC,WAAWX,GACTC,IAAI;AAAA,MACFW,YAAYC,UAAUV,QAAQW,SAASC,MAAMZ,OAAOW,KAAK;AAAA,IAAA,CAC1D,GACD1B,QAAQwB,UACV,GAEH;AAAA,EACH,EAAA,CAAA;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.js","sources":["../../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Grid as MuiGrid, GridProps as MuiGridProps } from \"@mui/material\";\n\nimport isString from \"lodash/isString\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps, useWidth } from \"@core/hooks\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\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\n extends Omit<MuiGridProps, \"classes\" | \"columns\">,\n HvBaseProps<HTMLDivElement, \"color\"> {\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 (isString(spacing)) {\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(\n (acc, breakpoint) => ({\n ...acc,\n [breakpoint]:\n BREAKPOINT_GUTTERS[spacing[breakpoint]] ?? spacing[breakpoint],\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<HTMLDivElement, HvGridProps>((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<HTMLDivElement, HvGridProps>((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":["BREAKPOINT_GUTTERS","xs","sm","md","lg","xl","BREAKPOINT_COLUMNS","getGridSpacing","spacing","gridSpacing","isString","Object","keys","reduce","acc","breakpoint","getNumberOfColumns","columns","numberOfColumns","getContainerProps","rowSpacing","columnSpacing","containerProps","container","WidthGrid","forwardRef","props","ref","others","width","useWidth","MuiGrid","HvGrid","item","classes","classesProp","useDefaultProps","useClasses"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Grid.js","sources":["../../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Grid as MuiGrid, GridProps as MuiGridProps } from \"@mui/material\";\n\nimport isString from \"lodash/isString\";\n\nimport { useDefaultProps, useWidth } from \"@core/hooks\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\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 (isString(spacing)) {\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(\n (acc, breakpoint) => ({\n ...acc,\n [breakpoint]:\n BREAKPOINT_GUTTERS[spacing[breakpoint]] ?? spacing[breakpoint],\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<HTMLDivElement, HvGridProps>((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<HTMLDivElement, HvGridProps>((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":["BREAKPOINT_GUTTERS","xs","sm","md","lg","xl","BREAKPOINT_COLUMNS","getGridSpacing","spacing","gridSpacing","isString","Object","keys","reduce","acc","breakpoint","getNumberOfColumns","columns","numberOfColumns","getContainerProps","rowSpacing","columnSpacing","containerProps","container","WidthGrid","forwardRef","props","ref","others","width","useWidth","MuiGrid","HvGrid","item","classes","classesProp","useDefaultProps","useClasses"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.js","sources":["../../../../../src/components/ListContainer/ListItem/ListItem.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvFocus } from \"@core/components/Focus\";\n\nimport HvListContext from \"../ListContext\";\nimport { staticClasses, useClasses } from \"./ListItem.styles\";\n\nexport { staticClasses as listItemClasses };\n\nexport type HvListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListItemProps extends HvBaseProps<HTMLLIElement> {\n /**\n * Overrides the implicit list item role.\n */\n role?: HvBaseProps<HTMLLIElement>[\"role\"];\n /** Indicates if the list item is selected. */\n selected?: boolean;\n /** If true, the list item will be disabled. */\n disabled?: boolean;\n /**\n * If the list item is focusable and reacts to mouse over events.\n * Defaults to true if the container list is interactive, false otherwise.\n */\n interactive?: boolean;\n /**\n * If `true` compacts the vertical spacing intended to separate the list items.\n * Defaults to the value set in container list.\n */\n condensed?: boolean;\n /**\n * If `true`, the left and right padding is removed.\n * Defaults to the value set in container list.\n */\n disableGutters?: boolean;\n /**\n * Element placed before the children.\n * Also removes the left padding (gutter).\n *\n * Some modifications are applied, assuming that it is either an icon (changing the color when the item is disabled)\n * or a selector (preventing the double focus ring, propagating the checked and disabled states and wiring the onChange event).\n * If unwanted, the element should be placed directly as a child.\n */\n startAdornment?: React.ReactNode;\n /**\n * Element placed after the children and aligned next to the margin.\n * Also removes the right padding (gutter).\n *\n * Some modifications are applied, assuming that it is an icon (changing the color when the item is disabled).\n * If unwanted, the element should be placed directly as a child.\n */\n endAdornment?: React.ReactNode;\n /** The value to be set on the 'li' element */\n value?: any;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvListItemClasses;\n}\n\nconst applyClassNameAndStateToElement = (\n element,\n selected,\n disabled,\n onClick,\n className\n) => {\n if (element != null) {\n return React.cloneElement(element, {\n className,\n checked: !!selected,\n disabled,\n onChange: (evt) => onClick?.(evt),\n });\n }\n\n return null;\n};\n\nconst applyClassNameToElement = (element, className) => {\n if (element != null) {\n return React.cloneElement(element, {\n className,\n });\n }\n\n return null;\n};\n\n/**\n * ListItem description/documentation paragraph\n */\nexport const HvListItem = forwardRef<any, HvListItemProps>((props, ref) => {\n const {\n id,\n classes: classesProp,\n className,\n role,\n value,\n selected,\n disabled,\n interactive: interactiveProp,\n condensed: condensedProp,\n disableGutters: disableGuttersProp,\n startAdornment,\n endAdornment,\n onClick,\n children,\n tabIndex,\n ...others\n } = useDefaultProps(\"HvListItem\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const {\n topContainerRef,\n condensed: condensedContext,\n disableGutters: disableGuttersContext,\n interactive: interactiveContext,\n } = useContext(HvListContext);\n\n const condensed = condensedProp != null ? condensedProp : condensedContext;\n const disableGutters =\n disableGuttersProp != null ? disableGuttersProp : disableGuttersContext;\n const interactive =\n interactiveProp != null ? interactiveProp : interactiveContext;\n\n const handleOnClick = useCallback(\n (evt) => {\n if (!disabled) {\n onClick?.(evt);\n }\n },\n [disabled, onClick]\n );\n\n const clonedStartAdornment = useMemo(\n () =>\n applyClassNameAndStateToElement(\n startAdornment,\n selected,\n disabled,\n handleOnClick,\n cx(\n classes.startAdornment,\n { [classes.disabled]: disabled },\n React.isValidElement(startAdornment)\n ? startAdornment.props.className\n : undefined\n )\n ),\n [\n cx,\n classes?.startAdornment,\n classes?.disabled,\n disabled,\n handleOnClick,\n selected,\n startAdornment,\n ]\n );\n const clonedEndAdornment = useMemo(\n () =>\n applyClassNameToElement(\n endAdornment,\n cx(\n classes.endAdornment,\n { [classes.disabled]: disabled },\n React.isValidElement(endAdornment)\n ? endAdornment.props.className\n : undefined\n )\n ),\n [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]\n );\n\n const roleOptionAriaProps =\n role === \"option\" || role === \"menuitem\"\n ? {\n \"aria-disabled\": disabled || undefined,\n \"aria-selected\": selected,\n }\n : {};\n\n const listItem = (\n // For later: this should only have an onClick event if interactive and has the appropriate role.\n // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n <li\n id={id}\n ref={ref}\n role={role}\n value={value}\n className={cx(\n classes.root,\n {\n [classes.gutters]: !disableGutters,\n [classes.condensed]: condensed,\n [classes.interactive]: interactive,\n [classes.selected]: !!selected,\n [classes.disabled]: !!disabled,\n [classes.withStartAdornment]: startAdornment != null,\n [classes.withEndAdornment]: endAdornment != null,\n },\n className\n )}\n onClick={handleOnClick}\n onKeyDown={() => {}} // Needed because of jsx-a11yclick-events-have-key-events\n {...roleOptionAriaProps}\n {...others}\n >\n {clonedStartAdornment}\n {children}\n {clonedEndAdornment}\n </li>\n );\n\n return interactive ? (\n <HvFocus\n rootRef={topContainerRef}\n selected={selected}\n disabledClass={disabled || undefined}\n strategy={role === \"option\" ? \"listbox\" : \"menu\"}\n classes={{ focus: classes.focus }}\n configuration={{\n tabIndex,\n }}\n >\n {listItem}\n </HvFocus>\n ) : (\n listItem\n );\n});\n"],"names":["applyClassNameAndStateToElement","element","selected","disabled","onClick","className","React","cloneElement","checked","onChange","evt","applyClassNameToElement","HvListItem","forwardRef","props","ref","id","classes","classesProp","role","value","interactive","interactiveProp","condensed","condensedProp","disableGutters","disableGuttersProp","startAdornment","endAdornment","children","tabIndex","others","useDefaultProps","cx","useClasses","topContainerRef","condensedContext","disableGuttersContext","interactiveContext","useContext","HvListContext","handleOnClick","useCallback","clonedStartAdornment","useMemo","isValidElement","undefined","clonedEndAdornment","roleOptionAriaProps","listItem","root","gutters","withStartAdornment","withEndAdornment","focus"],"mappings":";;;;;;;AA6DA,MAAMA,kCAAkCA,CACtCC,SACAC,UACAC,UACAC,SACAC,cACG;AACH,MAAIJ,WAAW,MAAM;AACZK,WAAAA,eAAMC,aAAaN,SAAS;AAAA,MACjCI;AAAAA,MACAG,SAAS,CAAC,CAACN;AAAAA,MACXC;AAAAA,MACAM,UAAWC,CAAQN,QAAAA,UAAUM,GAAG;AAAA,IAAA,CACjC;AAAA,EACH;AAEO,SAAA;AACT;AAEA,MAAMC,0BAA0BA,CAACV,SAASI,cAAc;AACtD,MAAIJ,WAAW,MAAM;AACZK,WAAAA,eAAMC,aAAaN,SAAS;AAAA,MACjCI;AAAAA,IAAAA,CACD;AAAA,EACH;AAEO,SAAA;AACT;AAKO,MAAMO,aAAaC,WAAiC,CAACC,OAAOC,QAAQ;AACnE,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTb;AAAAA,IACAc;AAAAA,IACAC;AAAAA,IACAlB;AAAAA,IACAC;AAAAA,IACAkB,aAAaC;AAAAA,IACbC,WAAWC;AAAAA,IACXC,gBAAgBC;AAAAA,IAChBC;AAAAA,IACAC;AAAAA,IACAxB;AAAAA,IACAyB;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,cAAclB,KAAK;AAEjC,QAAA;AAAA,IAAEG;AAAAA,IAASgB;AAAAA,EAAAA,IAAOC,WAAWhB,WAAW;AAExC,QAAA;AAAA,IACJiB;AAAAA,IACAZ,WAAWa;AAAAA,IACXX,gBAAgBY;AAAAA,IAChBhB,aAAaiB;AAAAA,EAAAA,IACXC,WAAWC,aAAa;AAEtBjB,QAAAA,YAAYC,iBAAiB,OAAOA,gBAAgBY;AACpDX,QAAAA,iBACJC,sBAAsB,OAAOA,qBAAqBW;AAC9ChB,QAAAA,cACJC,mBAAmB,OAAOA,kBAAkBgB;AAExCG,QAAAA,gBAAgBC,YACnBhC,CAAQ,QAAA;AACP,QAAI,CAACP,UAAU;AACbC,gBAAUM,GAAG;AAAA,IACf;AAAA,EAAA,GAEF,CAACP,UAAUC,OAAO,CACpB;AAEMuC,QAAAA,uBAAuBC,QAC3B,MACE5C,gCACE2B,gBACAzB,UACAC,UACAsC,eACAR,GACEhB,QAAQU,gBACR;AAAA,IAAE,CAACV,QAAQd,QAAQ,GAAGA;AAAAA,EAAAA,GACtBG,eAAMuC,eAAelB,cAAc,IAC/BA,eAAeb,MAAMT,YACrByC,MACN,CACF,GACF,CACEb,IACAhB,SAASU,gBACTV,SAASd,UACTA,UACAsC,eACAvC,UACAyB,cAAc,CAElB;AACA,QAAMoB,qBAAqBH,QACzB,MACEjC,wBACEiB,cACAK,GACEhB,QAAQW,cACR;AAAA,IAAE,CAACX,QAAQd,QAAQ,GAAGA;AAAAA,EAAAA,GACtBG,eAAMuC,eAAejB,YAAY,IAC7BA,aAAad,MAAMT,YACnByC,MACN,CACF,GACF,CAACb,IAAIhB,SAASW,cAAcX,SAASd,UAAUA,UAAUyB,YAAY,CACvE;AAEA,QAAMoB,sBACJ7B,SAAS,YAAYA,SAAS,aAC1B;AAAA,IACE,iBAAiBhB,YAAY2C;AAAAA,IAC7B,iBAAiB5C;AAAAA,MAEnB;AAEA+C,QAAAA;AAAAA;AAAAA;AAAAA,IAGJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAWhB,GACThB,QAAQiC,MACR;AAAA,UACE,CAACjC,QAAQkC,OAAO,GAAG,CAAC1B;AAAAA,UACpB,CAACR,QAAQM,SAAS,GAAGA;AAAAA,UACrB,CAACN,QAAQI,WAAW,GAAGA;AAAAA,UACvB,CAACJ,QAAQf,QAAQ,GAAG,CAAC,CAACA;AAAAA,UACtB,CAACe,QAAQd,QAAQ,GAAG,CAAC,CAACA;AAAAA,UACtB,CAACc,QAAQmC,kBAAkB,GAAGzB,kBAAkB;AAAA,UAChD,CAACV,QAAQoC,gBAAgB,GAAGzB,gBAAgB;AAAA,WAE9CvB,SACF;AAAA,QACA,SAASoC;AAAAA,QACT,WAAW,MAAM;AAAA,QAAC;AAAA,QAClB,GAAIO;AAAAA,QACJ,GAAIjB;AAAAA,QAEHY,UAAAA;AAAAA,UAAAA;AAAAA,UACAd;AAAAA,UACAkB;AAAAA,QAAAA;AAAAA,MAAAA;AAAAA,IACH;AAAA;AAGF,SAAO1B,cACL,oBAAC,SACC,EAAA,SAASc,iBACT,UACA,eAAehC,YAAY2C,QAC3B,UAAU3B,SAAS,WAAW,YAAY,QAC1C,SAAS;AAAA,IAAEmC,OAAOrC,QAAQqC;AAAAA,KAC1B,eAAe;AAAA,IACbxB;AAAAA,EACF,GAECmB,oBACH,IAEAA;AAEJ,CAAC;"}
|
|
1
|
+
{"version":3,"file":"ListItem.js","sources":["../../../../../src/components/ListContainer/ListItem/ListItem.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvFocus } from \"@core/components/Focus\";\n\nimport HvListContext from \"../ListContext\";\nimport { staticClasses, useClasses } from \"./ListItem.styles\";\n\nexport { staticClasses as listItemClasses };\n\nexport type HvListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListItemProps extends HvBaseProps<HTMLLIElement> {\n /** Indicates if the list item is selected. */\n selected?: boolean;\n /** If true, the list item will be disabled. */\n disabled?: boolean;\n /**\n * If the list item is focusable and reacts to mouse over events.\n * Defaults to true if the container list is interactive, false otherwise.\n */\n interactive?: boolean;\n /**\n * If `true` compacts the vertical spacing intended to separate the list items.\n * Defaults to the value set in container list.\n */\n condensed?: boolean;\n /**\n * If `true`, the left and right padding is removed.\n * Defaults to the value set in container list.\n */\n disableGutters?: boolean;\n /**\n * Element placed before the children.\n * Also removes the left padding (gutter).\n *\n * Some modifications are applied, assuming that it is either an icon (changing the color when the item is disabled)\n * or a selector (preventing the double focus ring, propagating the checked and disabled states and wiring the onChange event).\n * If unwanted, the element should be placed directly as a child.\n */\n startAdornment?: React.ReactNode;\n /**\n * Element placed after the children and aligned next to the margin.\n * Also removes the right padding (gutter).\n *\n * Some modifications are applied, assuming that it is an icon (changing the color when the item is disabled).\n * If unwanted, the element should be placed directly as a child.\n */\n endAdornment?: React.ReactNode;\n /** The value to be set on the 'li' element */\n value?: any;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvListItemClasses;\n}\n\nconst applyClassNameAndStateToElement = (\n element,\n selected,\n disabled,\n onClick,\n className\n) => {\n if (element != null) {\n return React.cloneElement(element, {\n className,\n checked: !!selected,\n disabled,\n onChange: (evt) => onClick?.(evt),\n });\n }\n\n return null;\n};\n\nconst applyClassNameToElement = (element, className) => {\n if (element != null) {\n return React.cloneElement(element, {\n className,\n });\n }\n\n return null;\n};\n\n/**\n * ListItem description/documentation paragraph\n */\nexport const HvListItem = forwardRef<any, HvListItemProps>((props, ref) => {\n const {\n id,\n classes: classesProp,\n className,\n role,\n value,\n selected,\n disabled,\n interactive: interactiveProp,\n condensed: condensedProp,\n disableGutters: disableGuttersProp,\n startAdornment,\n endAdornment,\n onClick,\n children,\n tabIndex,\n ...others\n } = useDefaultProps(\"HvListItem\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const {\n topContainerRef,\n condensed: condensedContext,\n disableGutters: disableGuttersContext,\n interactive: interactiveContext,\n } = useContext(HvListContext);\n\n const condensed = condensedProp != null ? condensedProp : condensedContext;\n const disableGutters =\n disableGuttersProp != null ? disableGuttersProp : disableGuttersContext;\n const interactive =\n interactiveProp != null ? interactiveProp : interactiveContext;\n\n const handleOnClick = useCallback(\n (evt) => {\n if (!disabled) {\n onClick?.(evt);\n }\n },\n [disabled, onClick]\n );\n\n const clonedStartAdornment = useMemo(\n () =>\n applyClassNameAndStateToElement(\n startAdornment,\n selected,\n disabled,\n handleOnClick,\n cx(\n classes.startAdornment,\n { [classes.disabled]: disabled },\n React.isValidElement(startAdornment)\n ? startAdornment.props.className\n : undefined\n )\n ),\n [\n cx,\n classes?.startAdornment,\n classes?.disabled,\n disabled,\n handleOnClick,\n selected,\n startAdornment,\n ]\n );\n const clonedEndAdornment = useMemo(\n () =>\n applyClassNameToElement(\n endAdornment,\n cx(\n classes.endAdornment,\n { [classes.disabled]: disabled },\n React.isValidElement(endAdornment)\n ? endAdornment.props.className\n : undefined\n )\n ),\n [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]\n );\n\n const roleOptionAriaProps =\n role === \"option\" || role === \"menuitem\"\n ? {\n \"aria-disabled\": disabled || undefined,\n \"aria-selected\": selected,\n }\n : {};\n\n const listItem = (\n // For later: this should only have an onClick event if interactive and has the appropriate role.\n // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n <li\n id={id}\n ref={ref}\n role={role}\n value={value}\n className={cx(\n classes.root,\n {\n [classes.gutters]: !disableGutters,\n [classes.condensed]: condensed,\n [classes.interactive]: interactive,\n [classes.selected]: !!selected,\n [classes.disabled]: !!disabled,\n [classes.withStartAdornment]: startAdornment != null,\n [classes.withEndAdornment]: endAdornment != null,\n },\n className\n )}\n onClick={handleOnClick}\n onKeyDown={() => {}} // Needed because of jsx-a11yclick-events-have-key-events\n {...roleOptionAriaProps}\n {...others}\n >\n {clonedStartAdornment}\n {children}\n {clonedEndAdornment}\n </li>\n );\n\n return interactive ? (\n <HvFocus\n rootRef={topContainerRef}\n selected={selected}\n disabledClass={disabled || undefined}\n strategy={role === \"option\" ? \"listbox\" : \"menu\"}\n classes={{ focus: classes.focus }}\n configuration={{\n tabIndex,\n }}\n >\n {listItem}\n </HvFocus>\n ) : (\n listItem\n );\n});\n"],"names":["applyClassNameAndStateToElement","element","selected","disabled","onClick","className","React","cloneElement","checked","onChange","evt","applyClassNameToElement","HvListItem","forwardRef","props","ref","id","classes","classesProp","role","value","interactive","interactiveProp","condensed","condensedProp","disableGutters","disableGuttersProp","startAdornment","endAdornment","children","tabIndex","others","useDefaultProps","cx","useClasses","topContainerRef","condensedContext","disableGuttersContext","interactiveContext","useContext","HvListContext","handleOnClick","useCallback","clonedStartAdornment","useMemo","isValidElement","undefined","clonedEndAdornment","roleOptionAriaProps","listItem","root","gutters","withStartAdornment","withEndAdornment","focus"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.js","sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useState } from \"react\";\n\nimport { RadioProps as MuiRadioProps } from \"@mui/material\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvBaseRadio } from \"@core/components/BaseRadio\";\nimport {\n HvWarningText,\n HvLabelProps,\n isInvalid,\n HvFormElement,\n HvLabel,\n} from \"@core/components/Forms\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\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 HvBaseProps<HTMLButtonElement, \"onChange\" | \"color\"> {\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 (props, ref) => {\n const {\n classes: classesProp,\n className,\n id,\n name,\n value = \"on\",\n required = false,\n readOnly = false,\n disabled = false,\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 = false,\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, \"hvradio\");\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(\n checked,\n Boolean(defaultChecked)\n );\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 })}\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","forwardRef","props","ref","classes","classesProp","className","id","name","value","required","readOnly","disabled","label","ariaLabel","ariaLabelledBy","ariaDescribedBy","labelProps","checked","defaultChecked","onChange","status","statusMessage","ariaErrorMessage","semantic","inputProps","onFocusVisible","onBlur","others","useDefaultProps","cx","useClasses","elementId","useUniqueId","focusVisible","setFocusVisible","useState","onFocusVisibleCallback","useCallback","evt","onBlurCallback","isChecked","setIsChecked","useControlled","Boolean","onLocalChange","newChecked","canShowError","undefined","hasLabel","isStateInvalid","isInvalid","errorMessageId","setId","radio","invalidRadio","root","container","invalidContainer"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Radio.js","sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useState } from \"react\";\n\nimport { RadioProps as MuiRadioProps } from \"@mui/material\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseRadio } from \"@core/components/BaseRadio\";\nimport {\n HvWarningText,\n HvLabelProps,\n isInvalid,\n HvFormElement,\n HvLabel,\n} from \"@core/components/Forms\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\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 (props, ref) => {\n const {\n classes: classesProp,\n className,\n id,\n name,\n value = \"on\",\n required = false,\n readOnly = false,\n disabled = false,\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 = false,\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, \"hvradio\");\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(\n checked,\n Boolean(defaultChecked)\n );\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 })}\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","forwardRef","props","ref","classes","classesProp","className","id","name","value","required","readOnly","disabled","label","ariaLabel","ariaLabelledBy","ariaDescribedBy","labelProps","checked","defaultChecked","onChange","status","statusMessage","ariaErrorMessage","semantic","inputProps","onFocusVisible","onBlur","others","useDefaultProps","cx","useClasses","elementId","useUniqueId","focusVisible","setFocusVisible","useState","onFocusVisibleCallback","useCallback","evt","onBlurCallback","isChecked","setIsChecked","useControlled","Boolean","onLocalChange","newChecked","canShowError","undefined","hasLabel","isStateInvalid","isInvalid","errorMessageId","setId","radio","invalidRadio","root","container","invalidContainer"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Snackbar.js","sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import { SyntheticEvent } from \"react\";\nimport Slide from \"@mui/material/Slide\";\nimport {\n SnackbarCloseReason,\n SnackbarOrigin,\n SnackbarProps as MuiSnackbarProps,\n} from \"@mui/material/Snackbar\";\nimport { Snackbar as MuiSnackbar } from \"@mui/material\";\n\nimport capitalize from \"lodash/capitalize\";\n\nimport {
|
|
1
|
+
{"version":3,"file":"Snackbar.js","sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import { SyntheticEvent } from \"react\";\nimport Slide from \"@mui/material/Slide\";\nimport {\n SnackbarCloseReason,\n SnackbarOrigin,\n SnackbarProps as MuiSnackbarProps,\n} from \"@mui/material/Snackbar\";\nimport { Snackbar as MuiSnackbar } from \"@mui/material\";\n\nimport capitalize from \"lodash/capitalize\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvActionGeneric } from \"@core/components/ActionsGeneric\";\n\nimport { HvSnackbarContentProps, HvSnackbarContent } from \"./SnackbarContent\";\nimport { staticClasses, useClasses } from \"./Snackbar.styles\";\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 /** Callback fired when the component requests to be closed. Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop. The reason parameter can optionally be used to control the response to onClose, for example ignoring clickaway. */\n onClose?:\n | ((\n event: Event | SyntheticEvent<any, Event>,\n reason: SnackbarCloseReason\n ) => void)\n | undefined;\n /** The message to display. */\n label?: React.ReactNode;\n /** The anchor of the Snackbar. vertical: \"top\", \"bottom\" | horizontal: \"left\",\"center\",\"right. 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 /** The callback function ran when an action is triggered, receiving `action` as param */\n actionCallback?: (\n event: React.SyntheticEvent,\n id: string,\n action: HvActionGeneric\n ) => void;\n /** Duration of transition in milliseconds. */\n transitionDuration?: number;\n /** Direction of slide transition. */\n transitionDirection?: \"up\" | \"down\" | \"left\" | \"right\";\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\nconst transLeft = (props) => <Slide {...props} direction=\"left\" />;\nconst transRight = (props) => <Slide {...props} direction=\"right\" />;\nconst transUp = (props) => <Slide {...props} direction=\"up\" />;\nconst transDown = (props) => <Slide {...props} direction=\"down\" />;\n\nconst snackBarDirComponent = (direction) => {\n switch (direction) {\n case \"right\":\n return transRight;\n case \"up\":\n return transUp;\n case \"down\":\n return transDown;\n case \"left\":\n default:\n return transLeft;\n }\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 = ({\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,\n transitionDuration = 300,\n transitionDirection = \"left\",\n offset = 60,\n snackbarContentProps,\n ...others\n}: HvSnackbarProps) => {\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 return (\n <MuiSnackbar\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={snackBarDirComponent(transitionDirection)}\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 {...snackbarContentProps}\n />\n </MuiSnackbar>\n );\n};\n"],"names":["transLeft","props","transRight","transUp","transDown","snackBarDirComponent","direction","HvSnackbar","classes","classesProp","className","id","open","onClose","label","anchorOrigin","vertical","horizontal","autoHideDuration","variant","showIcon","customIcon","action","actionCallback","transitionDuration","transitionDirection","offset","snackbarContentProps","others","useClasses","anchorOriginOffset","anchorOriginTop","top","anchorOriginBottom","bottom","MuiSnackbar","capitalize","setId"],"mappings":";;;;;;;;AAoEA,MAAMA,YAAaC,CAAU,UAAA,oBAAC,SAAUA,GAAAA,OAAO,WAAU,OAAS,CAAA;AAClE,MAAMC,aAAcD,CAAU,UAAA,oBAAC,SAAUA,GAAAA,OAAO,WAAU,QAAU,CAAA;AACpE,MAAME,UAAWF,CAAU,UAAA,oBAAC,SAAUA,GAAAA,OAAO,WAAU,KAAO,CAAA;AAC9D,MAAMG,YAAaH,CAAU,UAAA,oBAAC,SAAUA,GAAAA,OAAO,WAAU,OAAS,CAAA;AAElE,MAAMI,uBAAwBC,CAAc,cAAA;AAC1C,UAAQA,WAAS;AAAA,IACf,KAAK;AACIJ,aAAAA;AAAAA,IACT,KAAK;AACIC,aAAAA;AAAAA,IACT,KAAK;AACIC,aAAAA;AAAAA,IACT,KAAK;AAAA,IACL;AACSJ,aAAAA;AAAAA,EACX;AACF;AAUO,MAAMO,aAAaA,CAAC;AAAA,EACzBC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC,QAAQ;AAAA,EACRC,eAAe;AAAA,IAAEC,UAAU;AAAA,IAAOC,YAAY;AAAA,EAAQ;AAAA,EACtDC,mBAAmB;AAAA,EACnBC,UAAU;AAAA,EACVC,WAAW;AAAA,EACXC,aAAa;AAAA,EACbC,SAAS;AAAA,EACTC;AAAAA,EACAC,qBAAqB;AAAA,EACrBC,sBAAsB;AAAA,EACtBC,SAAS;AAAA,EACTC;AAAAA,EACA,GAAGC;AACY,MAAM;AACf,QAAA;AAAA,IAAEpB;AAAAA,EAAAA,IAAYqB,WAAWpB,WAAW;AAE1C,QAAMqB,qBAAqB;AAAA,IACzBC,iBAAiB;AAAA,MACfC,KAAM,GAAEN,MAAO;AAAA,IACjB;AAAA,IACAO,oBAAoB;AAAA,MAClBC,QAAS,GAAER,MAAO;AAAA,IACpB;AAAA,EAAA;AAGF,6BACGS,UACC,EAAA,OACEL,mBAAoB,eAAcM,WAAWrB,aAAaC,QAAQ,CAAE,EAAC,GAEvE,SACA,WACA,IACA,cACA,MACA,SACA,kBACA,oBACA,qBAAqBX,qBAAqBoB,mBAAmB,GAC7D,GAAIG,QAEJ,8BAAC,mBACC,EAAA,IAAIS,MAAM1B,IAAI,SAAS,GACvB,OACA,SACA,YACA,UACA,QACA,gBACIgB,GAAAA,sBAAqB,EAE7B,CAAA;AAEJ;"}
|