@hitachivantara/uikit-react-core 5.81.2 → 5.82.0
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/Accordion/Accordion.cjs +1 -7
- package/dist/cjs/BaseInput/BaseInput.styles.cjs +6 -6
- package/dist/cjs/Button/Button.cjs +1 -1
- package/dist/cjs/CheckBox/CheckBox.styles.cjs +2 -2
- package/dist/cjs/CheckBoxGroup/CheckBoxGroup.styles.cjs +1 -1
- package/dist/cjs/DatePicker/DatePicker.styles.cjs +2 -2
- package/dist/cjs/Dropdown/Dropdown.styles.cjs +1 -1
- package/dist/cjs/DropdownButton/DropdownButton.cjs +1 -1
- package/dist/cjs/Forms/WarningText/WarningText.cjs +13 -16
- package/dist/cjs/Forms/WarningText/WarningText.styles.cjs +7 -3
- package/dist/cjs/MultiButton/MultiButton.styles.cjs +1 -2
- package/dist/cjs/Radio/Radio.styles.cjs +2 -2
- package/dist/cjs/RadioGroup/RadioGroup.styles.cjs +1 -1
- package/dist/cjs/Section/Section.cjs +1 -1
- package/dist/cjs/Select/Select.styles.cjs +1 -1
- package/dist/cjs/SelectionList/SelectionList.styles.cjs +1 -1
- package/dist/cjs/Switch/Switch.styles.cjs +1 -1
- package/dist/cjs/Table/hooks/useRowExpand.cjs +1 -1
- package/dist/cjs/TagsInput/TagsInput.styles.cjs +2 -2
- package/dist/cjs/TimePicker/TimePicker.styles.cjs +2 -2
- package/dist/cjs/TimePicker/Unit/Unit.cjs +6 -7
- package/dist/cjs/ToggleButton/ToggleButton.cjs +5 -6
- package/dist/cjs/VerticalNavigation/TreeView/TreeViewItem.cjs +1 -7
- package/dist/esm/Accordion/Accordion.js +1 -7
- package/dist/esm/Accordion/Accordion.js.map +1 -1
- package/dist/esm/BaseInput/BaseInput.styles.js +6 -6
- package/dist/esm/BaseInput/BaseInput.styles.js.map +1 -1
- package/dist/esm/Button/Button.js +1 -1
- package/dist/esm/Button/Button.js.map +1 -1
- package/dist/esm/CheckBox/CheckBox.styles.js +2 -2
- package/dist/esm/CheckBox/CheckBox.styles.js.map +1 -1
- package/dist/esm/CheckBoxGroup/CheckBoxGroup.styles.js +1 -1
- package/dist/esm/CheckBoxGroup/CheckBoxGroup.styles.js.map +1 -1
- package/dist/esm/DatePicker/DatePicker.styles.js +2 -2
- package/dist/esm/DatePicker/DatePicker.styles.js.map +1 -1
- package/dist/esm/Dropdown/Dropdown.styles.js +1 -1
- package/dist/esm/Dropdown/Dropdown.styles.js.map +1 -1
- package/dist/esm/DropdownButton/DropdownButton.js +1 -1
- package/dist/esm/DropdownButton/DropdownButton.js.map +1 -1
- package/dist/esm/Forms/WarningText/WarningText.js +13 -16
- package/dist/esm/Forms/WarningText/WarningText.js.map +1 -1
- package/dist/esm/Forms/WarningText/WarningText.styles.js +7 -3
- package/dist/esm/Forms/WarningText/WarningText.styles.js.map +1 -1
- package/dist/esm/MultiButton/MultiButton.styles.js +1 -2
- package/dist/esm/MultiButton/MultiButton.styles.js.map +1 -1
- package/dist/esm/Radio/Radio.styles.js +2 -2
- package/dist/esm/Radio/Radio.styles.js.map +1 -1
- package/dist/esm/RadioGroup/RadioGroup.styles.js +1 -1
- package/dist/esm/RadioGroup/RadioGroup.styles.js.map +1 -1
- package/dist/esm/Section/Section.js +1 -1
- package/dist/esm/Section/Section.js.map +1 -1
- package/dist/esm/Select/Select.styles.js +1 -1
- package/dist/esm/Select/Select.styles.js.map +1 -1
- package/dist/esm/SelectionList/SelectionList.styles.js +1 -1
- package/dist/esm/SelectionList/SelectionList.styles.js.map +1 -1
- package/dist/esm/Switch/Switch.styles.js +1 -1
- package/dist/esm/Switch/Switch.styles.js.map +1 -1
- package/dist/esm/Table/hooks/useRowExpand.js +1 -1
- package/dist/esm/Table/hooks/useRowExpand.js.map +1 -1
- package/dist/esm/TagsInput/TagsInput.styles.js +2 -2
- package/dist/esm/TagsInput/TagsInput.styles.js.map +1 -1
- package/dist/esm/TimePicker/TimePicker.styles.js +2 -2
- package/dist/esm/TimePicker/TimePicker.styles.js.map +1 -1
- package/dist/esm/TimePicker/Unit/Unit.js +6 -7
- package/dist/esm/TimePicker/Unit/Unit.js.map +1 -1
- package/dist/esm/ToggleButton/ToggleButton.js +5 -6
- package/dist/esm/ToggleButton/ToggleButton.js.map +1 -1
- package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.js +1 -7
- package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.js.map +1 -1
- package/package.json +6 -6
|
@@ -28,7 +28,7 @@ const { staticClasses, useClasses } = createClasses("HvCheckBox", {
|
|
|
28
28
|
}
|
|
29
29
|
},
|
|
30
30
|
invalidContainer: {
|
|
31
|
-
borderBottom: `1px solid ${theme.colors.
|
|
31
|
+
borderBottom: `1px solid ${theme.colors.negative_120}`,
|
|
32
32
|
"&:hover": {
|
|
33
33
|
borderBottomLeftRadius: "0px",
|
|
34
34
|
borderBottomRightRadius: "0px"
|
|
@@ -36,7 +36,7 @@ const { staticClasses, useClasses } = createClasses("HvCheckBox", {
|
|
|
36
36
|
},
|
|
37
37
|
checkbox: { height: "32px" },
|
|
38
38
|
invalidCheckbox: {
|
|
39
|
-
borderBottom: `1px solid ${theme.colors.
|
|
39
|
+
borderBottom: `1px solid ${theme.colors.negative_120}`,
|
|
40
40
|
borderBottomLeftRadius: "0px",
|
|
41
41
|
borderBottomRightRadius: "0px"
|
|
42
42
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckBox.styles.js","sources":["../../../src/CheckBox/CheckBox.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCheckBox\", {\n root: { display: \"inline-block\" },\n container: {\n cursor: \"pointer\",\n display: \"flex\",\n height: \"32px\",\n transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n borderRadius: theme.radii.base,\n },\n },\n disabled: {\n cursor: \"not-allowed\",\n \"& $label\": { color: theme.colors.secondary_60, cursor: \"not-allowed\" },\n },\n focusVisible: {\n ...outlineStyles,\n\n \"& div\": {\n backgroundColor: theme.colors.atmo3,\n },\n\n [`& $checkbox div > svg`]: {\n outline: \"none\",\n boxShadow: \"none\",\n },\n },\n invalidContainer: {\n borderBottom: `1px solid ${theme.colors.
|
|
1
|
+
{"version":3,"file":"CheckBox.styles.js","sources":["../../../src/CheckBox/CheckBox.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCheckBox\", {\n root: { display: \"inline-block\" },\n container: {\n cursor: \"pointer\",\n display: \"flex\",\n height: \"32px\",\n transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n borderRadius: theme.radii.base,\n },\n },\n disabled: {\n cursor: \"not-allowed\",\n \"& $label\": { color: theme.colors.secondary_60, cursor: \"not-allowed\" },\n },\n focusVisible: {\n ...outlineStyles,\n\n \"& div\": {\n backgroundColor: theme.colors.atmo3,\n },\n\n [`& $checkbox div > svg`]: {\n outline: \"none\",\n boxShadow: \"none\",\n },\n },\n invalidContainer: {\n borderBottom: `1px solid ${theme.colors.negative_120}`,\n\n \"&:hover\": {\n borderBottomLeftRadius: \"0px\",\n borderBottomRightRadius: \"0px\",\n },\n },\n checkbox: { height: \"32px\" },\n invalidCheckbox: {\n borderBottom: `1px solid ${theme.colors.negative_120}`,\n borderBottomLeftRadius: \"0px\",\n borderBottomRightRadius: \"0px\",\n },\n label: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n verticalAlign: \"middle\",\n paddingRight: theme.space.xs,\n whiteSpace: \"nowrap\",\n ...theme.typography.body,\n cursor: \"pointer\",\n height: \"32px\",\n lineHeight: \"32px\",\n width: \"100%\",\n },\n checked: {},\n indeterminate: {},\n semantic: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM,EAAE,SAAS,eAAe;AAAA,EAChC,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IAEZ,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc,MAAM,MAAM;AAAA,IAAA;AAAA,EAE9B;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,YAAY,EAAE,OAAO,MAAM,OAAO,cAAc,QAAQ,cAAc;AAAA,EACxE;AAAA,EACA,cAAc;AAAA,IACZ,GAAG;AAAA,IAEH,SAAS;AAAA,MACP,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IAEA,CAAC,uBAAuB,GAAG;AAAA,MACzB,SAAS;AAAA,MACT,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,kBAAkB;AAAA,IAChB,cAAc,aAAa,MAAM,OAAO,YAAY;AAAA,IAEpD,WAAW;AAAA,MACT,wBAAwB;AAAA,MACxB,yBAAyB;AAAA,IAAA;AAAA,EAE7B;AAAA,EACA,UAAU,EAAE,QAAQ,OAAO;AAAA,EAC3B,iBAAiB;AAAA,IACf,cAAc,aAAa,MAAM,OAAO,YAAY;AAAA,IACpD,wBAAwB;AAAA,IACxB,yBAAyB;AAAA,EAC3B;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,IACV,cAAc;AAAA,IACd,eAAe;AAAA,IACf,cAAc,MAAM,MAAM;AAAA,IAC1B,YAAY;AAAA,IACZ,GAAG,MAAM,WAAW;AAAA,IACpB,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACA,SAAS,CAAC;AAAA,EACV,eAAe,CAAC;AAAA,EAChB,UAAU,CAAA;AACZ,CAAC;"}
|
|
@@ -26,7 +26,7 @@ const { staticClasses, useClasses } = createClasses("HvCheckBoxGroup", {
|
|
|
26
26
|
},
|
|
27
27
|
invalid: {
|
|
28
28
|
paddingBottom: theme.space.xs,
|
|
29
|
-
borderBottom: `1px solid ${theme.colors.
|
|
29
|
+
borderBottom: `1px solid ${theme.colors.negative_120}`
|
|
30
30
|
},
|
|
31
31
|
selectAll: {},
|
|
32
32
|
error: {}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckBoxGroup.styles.js","sources":["../../../src/CheckBoxGroup/CheckBoxGroup.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCheckBoxGroup\", {\n root: {\n display: \"inline-block\",\n overflow: \"clip\",\n overflowClipMargin: 4,\n verticalAlign: \"top\",\n },\n label: { marginBottom: theme.space.xs },\n group: { display: \"flex\" },\n vertical: {\n flexDirection: \"column\",\n\n // Prevent the focus ring to be hidden by sibling hover background\n \"&>*\": {\n zIndex: 0,\n },\n \"&>*:focus-within\": {\n zIndex: 1,\n },\n },\n horizontal: {\n flexDirection: \"row\",\n flexWrap: \"wrap\",\n gap: theme.space.sm,\n },\n invalid: {\n paddingBottom: theme.space.xs,\n borderBottom: `1px solid ${theme.colors.
|
|
1
|
+
{"version":3,"file":"CheckBoxGroup.styles.js","sources":["../../../src/CheckBoxGroup/CheckBoxGroup.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCheckBoxGroup\", {\n root: {\n display: \"inline-block\",\n overflow: \"clip\",\n overflowClipMargin: 4,\n verticalAlign: \"top\",\n },\n label: { marginBottom: theme.space.xs },\n group: { display: \"flex\" },\n vertical: {\n flexDirection: \"column\",\n\n // Prevent the focus ring to be hidden by sibling hover background\n \"&>*\": {\n zIndex: 0,\n },\n \"&>*:focus-within\": {\n zIndex: 1,\n },\n },\n horizontal: {\n flexDirection: \"row\",\n flexWrap: \"wrap\",\n gap: theme.space.sm,\n },\n invalid: {\n paddingBottom: theme.space.xs,\n borderBottom: `1px solid ${theme.colors.negative_120}`,\n },\n selectAll: {},\n error: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,oBAAoB;AAAA,IACpB,eAAe;AAAA,EACjB;AAAA,EACA,OAAO,EAAE,cAAc,MAAM,MAAM,GAAG;AAAA,EACtC,OAAO,EAAE,SAAS,OAAO;AAAA,EACzB,UAAU;AAAA,IACR,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClB,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,YAAY;AAAA,IACV,eAAe;AAAA,IACf,UAAU;AAAA,IACV,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,IACP,eAAe,MAAM,MAAM;AAAA,IAC3B,cAAc,aAAa,MAAM,OAAO,YAAY;AAAA,EACtD;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,OAAO,CAAA;AACT,CAAC;"}
|
|
@@ -24,9 +24,9 @@ const { staticClasses, useClasses } = createClasses("HvDatePicker", {
|
|
|
24
24
|
},
|
|
25
25
|
panel: {},
|
|
26
26
|
dropdownHeaderInvalid: {
|
|
27
|
-
border: `1px solid ${theme.colors.
|
|
27
|
+
border: `1px solid ${theme.colors.negative_120}`,
|
|
28
28
|
"&:hover": {
|
|
29
|
-
border: `1px solid ${theme.colors.
|
|
29
|
+
border: `1px solid ${theme.colors.negative_120}`
|
|
30
30
|
}
|
|
31
31
|
},
|
|
32
32
|
dropdownHeaderOpen: {},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.styles.js","sources":["../../../src/DatePicker/DatePicker.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDatePicker\", {\n root: {\n position: \"relative\",\n },\n actionContainer: {\n justifyContent: \"space-between\",\n },\n leftContainer: {},\n rightContainer: {},\n\n labelContainer: {\n display: \"flex\",\n alignItems: \"flex-start\",\n },\n label: {\n paddingBottom: \"6px\",\n display: \"block\",\n },\n description: {},\n error: {},\n\n dropdown: {\n display: \"block\",\n },\n panel: {},\n\n dropdownHeaderInvalid: {\n border: `1px solid ${theme.colors.
|
|
1
|
+
{"version":3,"file":"DatePicker.styles.js","sources":["../../../src/DatePicker/DatePicker.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDatePicker\", {\n root: {\n position: \"relative\",\n },\n actionContainer: {\n justifyContent: \"space-between\",\n },\n leftContainer: {},\n rightContainer: {},\n\n labelContainer: {\n display: \"flex\",\n alignItems: \"flex-start\",\n },\n label: {\n paddingBottom: \"6px\",\n display: \"block\",\n },\n description: {},\n error: {},\n\n dropdown: {\n display: \"block\",\n },\n panel: {},\n\n dropdownHeaderInvalid: {\n border: `1px solid ${theme.colors.negative_120}`,\n \"&:hover\": {\n border: `1px solid ${theme.colors.negative_120}`,\n },\n },\n dropdownHeaderOpen: {},\n icon: {},\n action: {\n \"&:first-of-type\": {\n marginRight: theme.space.xs,\n },\n },\n inputText: {},\n dateText: {\n color: \"inherit\",\n fontWeight: theme.typography.label.fontWeight,\n },\n container: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA,EACA,iBAAiB;AAAA,IACf,gBAAgB;AAAA,EAClB;AAAA,EACA,eAAe,CAAC;AAAA,EAChB,gBAAgB,CAAC;AAAA,EAEjB,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,IACL,eAAe;AAAA,IACf,SAAS;AAAA,EACX;AAAA,EACA,aAAa,CAAC;AAAA,EACd,OAAO,CAAC;AAAA,EAER,UAAU;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO,CAAC;AAAA,EAER,uBAAuB;AAAA,IACrB,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,IAC9C,WAAW;AAAA,MACT,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,IAAA;AAAA,EAElD;AAAA,EACA,oBAAoB,CAAC;AAAA,EACrB,MAAM,CAAC;AAAA,EACP,QAAQ;AAAA,IACN,mBAAmB;AAAA,MACjB,aAAa,MAAM,MAAM;AAAA,IAAA;AAAA,EAE7B;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,UAAU;AAAA,IACR,OAAO;AAAA,IACP,YAAY,MAAM,WAAW,MAAM;AAAA,EACrC;AAAA,EACA,WAAW,CAAA;AACb,CAAC;"}
|
|
@@ -26,7 +26,7 @@ const { staticClasses, useClasses } = createClasses("HvDropdown", {
|
|
|
26
26
|
width: "100%",
|
|
27
27
|
borderRadius: theme.radii.base,
|
|
28
28
|
"& $dropdownHeaderInvalid": {
|
|
29
|
-
border: `1px solid ${theme.colors.
|
|
29
|
+
border: `1px solid ${theme.colors.negative_120}`
|
|
30
30
|
}
|
|
31
31
|
},
|
|
32
32
|
arrow: {},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.styles.js","sources":["../../../src/Dropdown/Dropdown.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropdown\", {\n root: {\n width: \"100%\",\n position: \"relative\",\n display: \"inline-block\",\n },\n labelContainer: { display: \"flex\", alignItems: \"flex-start\" },\n label: { paddingBottom: \"6px\", display: \"block\" },\n description: {},\n error: {},\n placeholder: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n },\n placeholderClosed: {\n color: theme.colors.secondary_80,\n },\n selectionDisabled: {\n lineHeight: theme.space.md,\n color: theme.colors.secondary_60,\n },\n dropdown: {\n width: \"100%\",\n borderRadius: theme.radii.base,\n\n \"& $dropdownHeaderInvalid\": {\n border: `1px solid ${theme.colors.
|
|
1
|
+
{"version":3,"file":"Dropdown.styles.js","sources":["../../../src/Dropdown/Dropdown.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropdown\", {\n root: {\n width: \"100%\",\n position: \"relative\",\n display: \"inline-block\",\n },\n labelContainer: { display: \"flex\", alignItems: \"flex-start\" },\n label: { paddingBottom: \"6px\", display: \"block\" },\n description: {},\n error: {},\n placeholder: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n },\n placeholderClosed: {\n color: theme.colors.secondary_80,\n },\n selectionDisabled: {\n lineHeight: theme.space.md,\n color: theme.colors.secondary_60,\n },\n dropdown: {\n width: \"100%\",\n borderRadius: theme.radii.base,\n\n \"& $dropdownHeaderInvalid\": {\n border: `1px solid ${theme.colors.negative_120}`,\n },\n },\n arrow: {},\n dropdownHeader: {},\n dropdownHeaderInvalid: {},\n dropdownHeaderOpen: {},\n dropdownListContainer: {},\n rootList: {},\n disabled: {\n color: theme.colors.secondary_60,\n },\n readOnly: {\n \"& $dropdownHeader\": {\n border: `1px solid ${theme.colors.secondary_80}`,\n backgroundColor: theme.colors.atmo1,\n },\n },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,EACX;AAAA,EACA,gBAAgB,EAAE,SAAS,QAAQ,YAAY,aAAa;AAAA,EAC5D,OAAO,EAAE,eAAe,OAAO,SAAS,QAAQ;AAAA,EAChD,aAAa,CAAC;AAAA,EACd,OAAO,CAAC;AAAA,EACR,aAAa;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,mBAAmB;AAAA,IACjB,YAAY,MAAM,MAAM;AAAA,IACxB,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,IACP,cAAc,MAAM,MAAM;AAAA,IAE1B,4BAA4B;AAAA,MAC1B,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,IAAA;AAAA,EAElD;AAAA,EACA,OAAO,CAAC;AAAA,EACR,gBAAgB,CAAC;AAAA,EACjB,uBAAuB,CAAC;AAAA,EACxB,oBAAoB,CAAC;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,UAAU,CAAC;AAAA,EACX,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,UAAU;AAAA,IACR,qBAAqB;AAAA,MACnB,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,MAC9C,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAChC;AAEJ,CAAC;"}
|
|
@@ -19,7 +19,7 @@ const HvDropdownButton = forwardRef(function HvDropdownButton2(props, ref) {
|
|
|
19
19
|
...others
|
|
20
20
|
} = useDefaultProps("HvDropdownButton", props);
|
|
21
21
|
const { classes, cx } = useClasses(classesProp);
|
|
22
|
-
const endIcon = icon ? void 0 : /* @__PURE__ */ jsx(DropDownXS, {
|
|
22
|
+
const endIcon = icon ? void 0 : /* @__PURE__ */ jsx(DropDownXS, { size: "XS", rotate: open });
|
|
23
23
|
return /* @__PURE__ */ jsx(
|
|
24
24
|
HvButton,
|
|
25
25
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownButton.js","sources":["../../../src/DropdownButton/DropdownButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { Placement } from \"@popperjs/core\";\nimport { DropDownXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { staticClasses, useClasses } from \"./DropdownButton.styles\";\n\nexport { staticClasses as dropdownButtonClasses };\n\nexport type HvDropdownButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownButtonProps\n extends Omit<HvButtonProps, \"startAdornment\" | \"endAdornment\" | \"classes\"> {\n /** Whether the button is in read only mode when used as a form element. */\n readOnly?: boolean;\n /** Whether the content triggered by the button is opened or not. */\n open?: boolean;\n /** Placement of the content triggered by the button. @default bottom */\n placement?: Placement;\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvDropdownButtonClasses;\n}\n\n/**\n * IMPORTANT: This component is not ready to be exported to external users.\n *\n * Implements the DS dropdown button pattern.\n */\nexport const HvDropdownButton = forwardRef<\n HTMLButtonElement,\n HvDropdownButtonProps\n>(function HvDropdownButton(props, ref) {\n const {\n className,\n classes: classesProp,\n placement = \"bottom\",\n disabled,\n open,\n icon,\n readOnly,\n children,\n variant,\n ...others\n } = useDefaultProps(\"HvDropdownButton\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const endIcon = icon ? undefined :
|
|
1
|
+
{"version":3,"file":"DropdownButton.js","sources":["../../../src/DropdownButton/DropdownButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { Placement } from \"@popperjs/core\";\nimport { DropDownXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { staticClasses, useClasses } from \"./DropdownButton.styles\";\n\nexport { staticClasses as dropdownButtonClasses };\n\nexport type HvDropdownButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownButtonProps\n extends Omit<HvButtonProps, \"startAdornment\" | \"endAdornment\" | \"classes\"> {\n /** Whether the button is in read only mode when used as a form element. */\n readOnly?: boolean;\n /** Whether the content triggered by the button is opened or not. */\n open?: boolean;\n /** Placement of the content triggered by the button. @default bottom */\n placement?: Placement;\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvDropdownButtonClasses;\n}\n\n/**\n * IMPORTANT: This component is not ready to be exported to external users.\n *\n * Implements the DS dropdown button pattern.\n */\nexport const HvDropdownButton = forwardRef<\n HTMLButtonElement,\n HvDropdownButtonProps\n>(function HvDropdownButton(props, ref) {\n const {\n className,\n classes: classesProp,\n placement = \"bottom\",\n disabled,\n open,\n icon,\n readOnly,\n children,\n variant,\n ...others\n } = useDefaultProps(\"HvDropdownButton\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const endIcon = icon ? undefined : <DropDownXS size=\"XS\" rotate={open} />;\n\n return (\n <HvButton\n ref={ref}\n icon={icon}\n disabled={disabled || readOnly}\n className={cx(\n classes.root,\n {\n [classes.open]: open,\n [classes.openUp]: open && placement.includes(\"top\"),\n [classes.openDown]: open && placement.includes(\"bottom\"),\n [classes.disabled]: disabled,\n [classes.readOnly]: readOnly,\n },\n className,\n )}\n classes={{ endIcon: classes.arrowContainer }}\n endIcon={endIcon}\n variant={open ? \"secondarySubtle\" : variant}\n {...others}\n >\n <div className={cx({ [classes.selection]: !icon })}>\n {children && typeof children === \"string\" ? (\n <div className={classes.placeholder}>{children}</div>\n ) : (\n children\n )}\n </div>\n </HvButton>\n );\n});\n"],"names":["HvDropdownButton"],"mappings":";;;;;;;AAgCO,MAAM,mBAAmB,WAG9B,SAASA,kBAAiB,OAAO,KAAK;AAChC,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,UAAU,OAAO,SAAY,oBAAC,cAAW,MAAK,MAAK,QAAQ,KAAM,CAAA;AAGrE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU,YAAY;AAAA,MACtB,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,MAAM,GAAG,QAAQ,UAAU,SAAS,KAAK;AAAA,UAClD,CAAC,QAAQ,QAAQ,GAAG,QAAQ,UAAU,SAAS,QAAQ;AAAA,UACvD,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA,SAAS,EAAE,SAAS,QAAQ,eAAe;AAAA,MAC3C;AAAA,MACA,SAAS,OAAO,oBAAoB;AAAA,MACnC,GAAG;AAAA,MAEJ,UAAA,oBAAC,OAAI,EAAA,WAAW,GAAG,EAAE,CAAC,QAAQ,SAAS,GAAG,CAAC,KAAM,CAAA,GAC9C,UAAY,YAAA,OAAO,aAAa,WAC9B,oBAAA,OAAA,EAAI,WAAW,QAAQ,aAAc,SAAS,CAAA,IAE/C,SAEJ,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ,CAAC;"}
|
|
@@ -6,16 +6,15 @@ import { setId } from "../../utils/setId.js";
|
|
|
6
6
|
import { useClasses } from "./WarningText.styles.js";
|
|
7
7
|
import { staticClasses } from "./WarningText.styles.js";
|
|
8
8
|
import { HvFormElementContext } from "../FormElement/context/FormElementContext.js";
|
|
9
|
-
import { HvTypography } from "../../Typography/Typography.js";
|
|
10
9
|
const HvWarningText = (props) => {
|
|
11
10
|
const {
|
|
12
11
|
children,
|
|
13
|
-
adornment,
|
|
14
|
-
isVisible,
|
|
12
|
+
adornment: adornmentProp,
|
|
13
|
+
isVisible: isVisibleProp,
|
|
15
14
|
classes: classesProp,
|
|
16
15
|
className,
|
|
17
|
-
id,
|
|
18
|
-
disabled,
|
|
16
|
+
id: idProp,
|
|
17
|
+
disabled: disabledProp,
|
|
19
18
|
disableGutter = false,
|
|
20
19
|
disableBorder = false,
|
|
21
20
|
disableAdornment = false,
|
|
@@ -24,12 +23,11 @@ const HvWarningText = (props) => {
|
|
|
24
23
|
} = useDefaultProps("HvWarningText", props);
|
|
25
24
|
const { classes, cx } = useClasses(classesProp);
|
|
26
25
|
const { elementId, elementStatus, elementDisabled } = useContext(HvFormElementContext);
|
|
27
|
-
const
|
|
28
|
-
const
|
|
29
|
-
const
|
|
30
|
-
const showWarning =
|
|
31
|
-
const
|
|
32
|
-
const localAdornment = adornment || /* @__PURE__ */ jsx(Fail, { iconSize: "XS", className: classes.defaultIcon, color: "negative" });
|
|
26
|
+
const disabled = disabledProp || elementDisabled;
|
|
27
|
+
const visible = isVisibleProp ?? elementStatus === "invalid";
|
|
28
|
+
const id = idProp ?? setId(elementId, "error");
|
|
29
|
+
const showWarning = visible && !disabled;
|
|
30
|
+
const adornment = adornmentProp || /* @__PURE__ */ jsx(Fail, { size: "xs", className: classes.defaultIcon });
|
|
33
31
|
return /* @__PURE__ */ jsxs(
|
|
34
32
|
"div",
|
|
35
33
|
{
|
|
@@ -42,21 +40,20 @@ const HvWarningText = (props) => {
|
|
|
42
40
|
className
|
|
43
41
|
),
|
|
44
42
|
children: [
|
|
45
|
-
!disableAdornment &&
|
|
43
|
+
!disableAdornment && adornment,
|
|
46
44
|
/* @__PURE__ */ jsx(
|
|
47
|
-
|
|
45
|
+
"span",
|
|
48
46
|
{
|
|
49
|
-
id
|
|
47
|
+
id,
|
|
50
48
|
className: cx(classes.warningText, {
|
|
51
49
|
[classes.topGutter]: !disableGutter,
|
|
52
50
|
[classes.hideText]: hideText
|
|
53
51
|
}),
|
|
54
|
-
variant: "caption1",
|
|
55
52
|
role: "status",
|
|
56
53
|
"aria-live": "polite",
|
|
57
54
|
"aria-relevant": "additions text",
|
|
58
55
|
...others,
|
|
59
|
-
children: showWarning &&
|
|
56
|
+
children: showWarning && children
|
|
60
57
|
}
|
|
61
58
|
)
|
|
62
59
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WarningText.js","sources":["../../../../src/Forms/WarningText/WarningText.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { Fail } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport {
|
|
1
|
+
{"version":3,"file":"WarningText.js","sources":["../../../../src/Forms/WarningText/WarningText.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { Fail } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFormElementContext } from \"../FormElement\";\nimport { staticClasses, useClasses } from \"./WarningText.styles\";\n\nexport { staticClasses as warningTextClasses };\n\nexport type HvWarningTextClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWarningTextProps extends HvBaseProps {\n /** Icon to be rendered alongside the warning text. */\n adornment?: React.ReactNode;\n /** If `true` the text is not rendered. */\n isVisible?: boolean;\n /** If `true` the text is disabled. */\n disabled?: boolean;\n /** If `true` the text won't include a gutter. */\n disableGutter?: boolean;\n /** If `true` the text won't include the top border. */\n disableBorder?: boolean;\n /** If `true` the adornment icon isn't shown. */\n disableAdornment?: boolean;\n /** If `true` the text isn't shown. */\n hideText?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvWarningTextClasses;\n}\n\n/**\n * Provides the user with a descriptive text, signaling an error, for when the form element is in an invalid state.\n */\nexport const HvWarningText = (props: HvWarningTextProps) => {\n const {\n children,\n adornment: adornmentProp,\n isVisible: isVisibleProp,\n classes: classesProp,\n className,\n id: idProp,\n disabled: disabledProp,\n disableGutter = false,\n disableBorder = false,\n disableAdornment = false,\n hideText = false,\n ...others\n } = useDefaultProps(\"HvWarningText\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const { elementId, elementStatus, elementDisabled } =\n useContext(HvFormElementContext);\n const disabled = disabledProp || elementDisabled;\n const visible = isVisibleProp ?? elementStatus === \"invalid\";\n const id = idProp ?? setId(elementId, \"error\");\n const showWarning = visible && !disabled;\n const adornment = adornmentProp || (\n <Fail size=\"xs\" className={classes.defaultIcon} />\n );\n\n return (\n <div\n className={cx(\n classes.root,\n {\n [classes.show]: showWarning,\n [classes.topBorder]: !disableBorder,\n },\n className,\n )}\n >\n {!disableAdornment && adornment}\n <span\n id={id}\n className={cx(classes.warningText, {\n [classes.topGutter]: !disableGutter,\n [classes.hideText]: hideText,\n })}\n role=\"status\"\n aria-live=\"polite\"\n aria-relevant=\"additions text\"\n {...others}\n >\n {showWarning && children}\n </span>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;AAsCa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT;AAAA,IACA,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,EAAE,WAAW,eAAe,gBAAgB,IAChD,WAAW,oBAAoB;AACjC,QAAM,WAAW,gBAAgB;AAC3B,QAAA,UAAU,iBAAiB,kBAAkB;AACnD,QAAM,KAAK,UAAU,MAAM,WAAW,OAAO;AACvC,QAAA,cAAc,WAAW,CAAC;AAC1B,QAAA,YAAY,iBACf,oBAAA,MAAA,EAAK,MAAK,MAAK,WAAW,QAAQ,aAAa;AAIhD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,SAAS,GAAG,CAAC;AAAA,QACxB;AAAA,QACA;AAAA,MACF;AAAA,MAEC,UAAA;AAAA,QAAA,CAAC,oBAAoB;AAAA,QACtB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,WAAW,GAAG,QAAQ,aAAa;AAAA,cACjC,CAAC,QAAQ,SAAS,GAAG,CAAC;AAAA,cACtB,CAAC,QAAQ,QAAQ,GAAG;AAAA,YAAA,CACrB;AAAA,YACD,MAAK;AAAA,YACL,aAAU;AAAA,YACV,iBAAc;AAAA,YACb,GAAG;AAAA,YAEH,UAAe,eAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAClB;AAAA,IAAA;AAAA,EACF;AAEJ;"}
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
import { createClasses } from "@hitachivantara/uikit-react-utils";
|
|
2
2
|
import { theme } from "@hitachivantara/uikit-styles";
|
|
3
3
|
const { staticClasses, useClasses } = createClasses("HvWarningText", {
|
|
4
|
-
root: {
|
|
4
|
+
root: {
|
|
5
|
+
display: "none",
|
|
6
|
+
color: theme.colors.negative_120
|
|
7
|
+
},
|
|
5
8
|
defaultIcon: { minWidth: "24px", width: "24px", height: "24px" },
|
|
6
9
|
warningText: {
|
|
7
|
-
|
|
10
|
+
...theme.typography.caption1,
|
|
11
|
+
color: "inherit",
|
|
8
12
|
paddingRight: theme.space.xs
|
|
9
13
|
},
|
|
10
14
|
show: { display: "flex" },
|
|
@@ -18,7 +22,7 @@ const { staticClasses, useClasses } = createClasses("HvWarningText", {
|
|
|
18
22
|
margin: 0,
|
|
19
23
|
overflow: "hidden"
|
|
20
24
|
},
|
|
21
|
-
topBorder: { borderTop:
|
|
25
|
+
topBorder: { borderTop: "1px solid currentcolor" }
|
|
22
26
|
});
|
|
23
27
|
export {
|
|
24
28
|
staticClasses,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WarningText.styles.js","sources":["../../../../src/Forms/WarningText/WarningText.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvWarningText\", {\n root: {
|
|
1
|
+
{"version":3,"file":"WarningText.styles.js","sources":["../../../../src/Forms/WarningText/WarningText.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvWarningText\", {\n root: {\n display: \"none\",\n color: theme.colors.negative_120,\n },\n defaultIcon: { minWidth: \"24px\", width: \"24px\", height: \"24px\" },\n warningText: {\n ...theme.typography.caption1,\n color: \"inherit\",\n paddingRight: theme.space.xs,\n },\n show: { display: \"flex\" },\n topGutter: { paddingTop: \"3px\" },\n hideText: {\n // display none or visibility hidden prevents\n // browser to trigger the aria-alert\n width: 0,\n height: 0,\n padding: 0,\n margin: 0,\n overflow: \"hidden\",\n },\n topBorder: { borderTop: \"1px solid currentcolor\" },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,aAAa,EAAE,UAAU,QAAQ,OAAO,QAAQ,QAAQ,OAAO;AAAA,EAC/D,aAAa;AAAA,IACX,GAAG,MAAM,WAAW;AAAA,IACpB,OAAO;AAAA,IACP,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,MAAM,EAAE,SAAS,OAAO;AAAA,EACxB,WAAW,EAAE,YAAY,MAAM;AAAA,EAC/B,UAAU;AAAA;AAAA;AAAA,IAGR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,WAAW,EAAE,WAAW,yBAAyB;AACnD,CAAC;"}
|
|
@@ -15,11 +15,10 @@ const { staticClasses, useClasses } = createClasses("HvMultiButton", {
|
|
|
15
15
|
borderRadius: theme.radii.base,
|
|
16
16
|
"& $button": {
|
|
17
17
|
minWidth: 32,
|
|
18
|
-
minHeight: 32,
|
|
19
18
|
width: "100%",
|
|
20
19
|
maxWidth: 200,
|
|
21
20
|
padding: 0,
|
|
22
|
-
flex: 1,
|
|
21
|
+
flex: "1 1 auto",
|
|
23
22
|
borderColor: "inherit",
|
|
24
23
|
borderRadius: 0,
|
|
25
24
|
fontWeight: theme.typography.body.fontWeight,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiButton.styles.js","sources":["../../../src/MultiButton/MultiButton.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { dropDownMenuClasses } from \"../DropDownMenu\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvMultiButton\", {\n root: {\n display: \"flex\",\n alignItems: \"center\",\n position: \"relative\",\n },\n multiple: {\n backgroundColor: theme.colors.atmo2,\n\n borderWidth: 0,\n borderColor: `${theme.colors.atmo4} transparent`,\n borderRadius: theme.radii.base,\n\n \"& $button\": {\n minWidth: 32,\n
|
|
1
|
+
{"version":3,"file":"MultiButton.styles.js","sources":["../../../src/MultiButton/MultiButton.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { dropDownMenuClasses } from \"../DropDownMenu\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvMultiButton\", {\n root: {\n display: \"flex\",\n alignItems: \"center\",\n position: \"relative\",\n },\n multiple: {\n backgroundColor: theme.colors.atmo2,\n\n borderWidth: 0,\n borderColor: `${theme.colors.atmo4} transparent`,\n borderRadius: theme.radii.base,\n\n \"& $button\": {\n minWidth: 32,\n width: \"100%\",\n maxWidth: 200,\n padding: 0,\n flex: \"1 1 auto\",\n borderColor: \"inherit\",\n borderRadius: 0,\n fontWeight: theme.typography.body.fontWeight,\n \"&:disabled\": {\n color: theme.colors.secondary_60,\n borderColor: \"inherit\",\n },\n \"&:hover\": {\n borderColor: \"inherit\",\n },\n \"&$firstButton\": {\n borderLeftColor: theme.colors.atmo4,\n borderTopLeftRadius: \"inherit\",\n borderBottomLeftRadius: \"inherit\",\n \"&:disabled\": {\n borderLeftColor: theme.colors.atmo4,\n },\n },\n \"&$lastButton\": {\n borderRightColor: theme.colors.atmo4,\n borderTopRightRadius: \"inherit\",\n borderBottomRightRadius: \"inherit\",\n \"&:disabled\": {\n borderRightColor: theme.colors.atmo4,\n },\n },\n \"&:not($firstButton)\": {\n marginLeft: \"-1px\",\n },\n \"&$selected\": {\n backgroundColor: theme.colors.atmo1,\n fontWeight: theme.typography.label.fontWeight,\n borderRadius: \"inherit\",\n borderColor: theme.colors.secondary,\n zIndex: 2,\n \"&:hover:not(:disabled),&:focus-visible\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n \"&:disabled\": {\n zIndex: 1,\n borderColor: theme.colors.atmo4,\n },\n },\n },\n },\n splitGroup: {\n width: \"fit-content\",\n\n \"& $button:not($firstButton)\": {\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n \"&:not([aria-controls])\": {\n borderLeftWidth: 0,\n },\n },\n \"& $button:not($lastButton)\": {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n \"&:not([aria-controls])\": {\n borderRightWidth: 0,\n },\n\n \"&::after\": {\n content: \"''\",\n position: \"absolute\",\n inset: \"4px -1px 4px auto\",\n width: 1,\n zIndex: 1,\n height: \"auto\",\n backgroundColor: \"currentcolor\",\n },\n },\n },\n splitGroupDisabled: {},\n button: {\n position: \"relative\",\n // prevent the focus ring to be hidden by sibling hover background\n [`&:focus-visible, &.${dropDownMenuClasses.iconSelected}`]: {\n zIndex: 5,\n },\n },\n selected: {},\n vertical: {\n flexDirection: \"column\",\n height: \"auto\",\n borderColor: `transparent ${theme.colors.atmo4}`,\n \"& $button\": {\n minWidth: 32,\n width: \"100%\",\n \"&$firstButton\": {\n borderTopColor: theme.colors.atmo4,\n borderTopLeftRadius: \"inherit\",\n borderTopRightRadius: \"inherit\",\n },\n \"&$lastButton\": {\n borderBottomColor: theme.colors.atmo4,\n borderBottomLeftRadius: \"inherit\",\n borderBottomRightRadius: \"inherit\",\n },\n \"&:not($firstButton)\": {\n marginLeft: 0,\n marginTop: -1,\n },\n \"&$selected\": {\n height: 32,\n width: \"calc(100% + 2px)\",\n borderColor: theme.colors.secondary,\n },\n },\n },\n\n // TODO - review the need for these classes in v6 (use :first-child and :last-child instead)\n firstButton: {},\n lastButton: {},\n\n // TODO - review the need for these classes in v6\n primary: {},\n primarySubtle: {},\n primaryGhost: {},\n secondary: {},\n secondarySubtle: {},\n secondaryGhost: {},\n});\n"],"names":["dropDownMenuClasses"],"mappings":"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"}
|
|
@@ -17,7 +17,7 @@ const { staticClasses, useClasses } = createClasses("HvRadio", {
|
|
|
17
17
|
}
|
|
18
18
|
},
|
|
19
19
|
invalidContainer: {
|
|
20
|
-
borderBottom: `1px solid ${theme.colors.
|
|
20
|
+
borderBottom: `1px solid ${theme.colors.negative_120}`,
|
|
21
21
|
"&:hover": {
|
|
22
22
|
borderBottomLeftRadius: "0px",
|
|
23
23
|
borderBottomRightRadius: "0px"
|
|
@@ -35,7 +35,7 @@ const { staticClasses, useClasses } = createClasses("HvRadio", {
|
|
|
35
35
|
}
|
|
36
36
|
},
|
|
37
37
|
invalidRadio: {
|
|
38
|
-
borderBottom: `1px solid ${theme.colors.
|
|
38
|
+
borderBottom: `1px solid ${theme.colors.negative_120}`,
|
|
39
39
|
"&:hover": {
|
|
40
40
|
borderBottomLeftRadius: "0px",
|
|
41
41
|
borderBottomRightRadius: "0px"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.styles.js","sources":["../../../src/Radio/Radio.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvRadio\", {\n root: { display: \"inline-block\" },\n container: {\n cursor: \"pointer\",\n display: \"flex\",\n height: \"32px\",\n transitionProperty: \"background-color\",\n transitionDuration: \"150ms\",\n transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n transitionDelay: \"0ms\",\n\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n borderRadius: theme.radii.base,\n },\n },\n invalidContainer: {\n borderBottom: `1px solid ${theme.colors.
|
|
1
|
+
{"version":3,"file":"Radio.styles.js","sources":["../../../src/Radio/Radio.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvRadio\", {\n root: { display: \"inline-block\" },\n container: {\n cursor: \"pointer\",\n display: \"flex\",\n height: \"32px\",\n transitionProperty: \"background-color\",\n transitionDuration: \"150ms\",\n transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n transitionDelay: \"0ms\",\n\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n borderRadius: theme.radii.base,\n },\n },\n invalidContainer: {\n borderBottom: `1px solid ${theme.colors.negative_120}`,\n\n \"&:hover\": {\n borderBottomLeftRadius: \"0px\",\n borderBottomRightRadius: \"0px\",\n },\n },\n disabled: {\n cursor: \"not-allowed\",\n\n \"& $label\": { color: theme.colors.secondary_60, cursor: \"not-allowed\" },\n },\n radio: {\n height: \"32px\",\n\n \"& svg\": {\n outline: \"none\",\n boxShadow: \"none\",\n },\n },\n invalidRadio: {\n borderBottom: `1px solid ${theme.colors.negative_120}`,\n\n \"&:hover\": {\n borderBottomLeftRadius: \"0px\",\n borderBottomRightRadius: \"0px\",\n },\n },\n label: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n verticalAlign: \"middle\",\n paddingRight: theme.space.xs,\n whiteSpace: \"nowrap\",\n ...theme.typography.body,\n cursor: \"pointer\",\n height: \"32px\",\n lineHeight: \"32px\",\n width: \"100%\",\n },\n focusVisible: { backgroundColor: theme.colors.atmo3, ...outlineStyles },\n checked: {},\n semantic: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,EAAE,SAAS,eAAe;AAAA,EAChC,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,0BAA0B;AAAA,IAC1B,iBAAiB;AAAA,IAEjB,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc,MAAM,MAAM;AAAA,IAAA;AAAA,EAE9B;AAAA,EACA,kBAAkB;AAAA,IAChB,cAAc,aAAa,MAAM,OAAO,YAAY;AAAA,IAEpD,WAAW;AAAA,MACT,wBAAwB;AAAA,MACxB,yBAAyB;AAAA,IAAA;AAAA,EAE7B;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IAER,YAAY,EAAE,OAAO,MAAM,OAAO,cAAc,QAAQ,cAAc;AAAA,EACxE;AAAA,EACA,OAAO;AAAA,IACL,QAAQ;AAAA,IAER,SAAS;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,cAAc;AAAA,IACZ,cAAc,aAAa,MAAM,OAAO,YAAY;AAAA,IAEpD,WAAW;AAAA,MACT,wBAAwB;AAAA,MACxB,yBAAyB;AAAA,IAAA;AAAA,EAE7B;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,IACV,cAAc;AAAA,IACd,eAAe;AAAA,IACf,cAAc,MAAM,MAAM;AAAA,IAC1B,YAAY;AAAA,IACZ,GAAG,MAAM,WAAW;AAAA,IACpB,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACA,cAAc,EAAE,iBAAiB,MAAM,OAAO,OAAO,GAAG,cAAc;AAAA,EACtE,SAAS,CAAC;AAAA,EACV,UAAU,CAAA;AACZ,CAAC;"}
|
|
@@ -26,7 +26,7 @@ const { staticClasses, useClasses } = createClasses("HvRadioGroup", {
|
|
|
26
26
|
},
|
|
27
27
|
invalid: {
|
|
28
28
|
paddingBottom: theme.space.xs,
|
|
29
|
-
borderBottom: `1px solid ${theme.colors.
|
|
29
|
+
borderBottom: `1px solid ${theme.colors.negative_120}`
|
|
30
30
|
},
|
|
31
31
|
error: {}
|
|
32
32
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.styles.js","sources":["../../../src/RadioGroup/RadioGroup.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvRadioGroup\", {\n root: {\n display: \"inline-block\",\n overflow: \"clip\",\n overflowClipMargin: 4,\n verticalAlign: \"top\",\n },\n label: { marginBottom: theme.space.xs },\n group: { display: \"flex\" },\n vertical: {\n flexDirection: \"column\",\n\n // Prevent the focus ring to be hidden by sibling hover background\n \"&>*\": {\n zIndex: 0,\n },\n \"&>*:focus-within\": {\n zIndex: 1,\n },\n },\n horizontal: {\n flexDirection: \"row\",\n flexWrap: \"wrap\",\n gap: theme.space.sm,\n },\n invalid: {\n paddingBottom: theme.space.xs,\n borderBottom: `1px solid ${theme.colors.
|
|
1
|
+
{"version":3,"file":"RadioGroup.styles.js","sources":["../../../src/RadioGroup/RadioGroup.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvRadioGroup\", {\n root: {\n display: \"inline-block\",\n overflow: \"clip\",\n overflowClipMargin: 4,\n verticalAlign: \"top\",\n },\n label: { marginBottom: theme.space.xs },\n group: { display: \"flex\" },\n vertical: {\n flexDirection: \"column\",\n\n // Prevent the focus ring to be hidden by sibling hover background\n \"&>*\": {\n zIndex: 0,\n },\n \"&>*:focus-within\": {\n zIndex: 1,\n },\n },\n horizontal: {\n flexDirection: \"row\",\n flexWrap: \"wrap\",\n gap: theme.space.sm,\n },\n invalid: {\n paddingBottom: theme.space.xs,\n borderBottom: `1px solid ${theme.colors.negative_120}`,\n },\n error: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,oBAAoB;AAAA,IACpB,eAAe;AAAA,EACjB;AAAA,EACA,OAAO,EAAE,cAAc,MAAM,MAAM,GAAG;AAAA,EACtC,OAAO,EAAE,SAAS,OAAO;AAAA,EACzB,UAAU;AAAA,IACR,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClB,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,YAAY;AAAA,IACV,eAAe;AAAA,IACf,UAAU;AAAA,IACV,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,IACP,eAAe,MAAM,MAAM;AAAA,IAC3B,cAAc,aAAa,MAAM,OAAO,YAAY;AAAA,EACtD;AAAA,EACA,OAAO,CAAA;AACT,CAAC;"}
|
|
@@ -53,7 +53,7 @@ const HvSection = forwardRef(
|
|
|
53
53
|
"aria-label": isOpen ? "Collapse" : "Expand",
|
|
54
54
|
...buttonProps,
|
|
55
55
|
...expandButtonProps,
|
|
56
|
-
children: /* @__PURE__ */ jsx(Down, {
|
|
56
|
+
children: /* @__PURE__ */ jsx(Down, { rotate: isOpen })
|
|
57
57
|
}
|
|
58
58
|
),
|
|
59
59
|
title,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Section.js","sources":["../../../src/Section/Section.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Down } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { useExpandable } from \"../hooks/useExpandable\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./Section.styles\";\n\nexport { staticClasses as sectionClasses };\n\nexport type HvSectionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSectionProps\n extends Omit<HvBaseProps<HTMLDivElement>, \"title\" | \"onToggle\"> {\n /** The title of the section */\n title?: React.ReactNode;\n /** Whether or not the section is expandable. */\n expandable?: boolean;\n /** Whether the section is open or not, if this property is defined the accordion must be fully controlled. */\n expanded?: boolean;\n /** When uncontrolled, defines the initial expanded state. */\n defaultExpanded?: boolean;\n /** Section actions */\n actions?: React.ReactNode;\n /** Section onExpand callback */\n onToggle?: (\n event: React.MouseEvent<HTMLButtonElement>,\n open: boolean,\n ) => void;\n /** Props to be passed to the expand button */\n expandButtonProps?: HvButtonProps;\n /** Determines whether or not the header has a shadow on the bottom border. */\n raisedHeader?: boolean;\n /** A Jss Object used to override or extend the styles applied to the empty state component. */\n classes?: HvSectionClasses;\n /** Content container ref. */\n contentRef?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Sections allow grouping information on a page under the same topic.\n */\nexport const HvSection = forwardRef<HTMLDivElement, HvSectionProps>(\n function HvSection(props, ref) {\n const {\n id,\n classes: classesProp,\n className,\n title,\n expandable,\n expanded,\n defaultExpanded = true,\n actions,\n onToggle,\n expandButtonProps,\n raisedHeader,\n contentRef,\n children,\n ...others\n } = useDefaultProps(\"HvSection\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable({\n id,\n expanded,\n defaultExpanded,\n });\n\n const hasHeader = title || actions || expandable;\n\n return (\n <div\n ref={ref}\n id={id}\n className={cx(classes.root, className, {\n [classes.raisedHeader]: raisedHeader && isOpen,\n })}\n {...others}\n >\n {hasHeader && (\n <div className={classes.header}>\n {expandable && (\n <HvButton\n icon\n onClick={(event) => {\n toggleOpen();\n onToggle?.(event, !isOpen);\n }}\n aria-label={isOpen ? \"Collapse\" : \"Expand\"}\n {...buttonProps}\n {...expandButtonProps}\n >\n <Down
|
|
1
|
+
{"version":3,"file":"Section.js","sources":["../../../src/Section/Section.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Down } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { useExpandable } from \"../hooks/useExpandable\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./Section.styles\";\n\nexport { staticClasses as sectionClasses };\n\nexport type HvSectionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSectionProps\n extends Omit<HvBaseProps<HTMLDivElement>, \"title\" | \"onToggle\"> {\n /** The title of the section */\n title?: React.ReactNode;\n /** Whether or not the section is expandable. */\n expandable?: boolean;\n /** Whether the section is open or not, if this property is defined the accordion must be fully controlled. */\n expanded?: boolean;\n /** When uncontrolled, defines the initial expanded state. */\n defaultExpanded?: boolean;\n /** Section actions */\n actions?: React.ReactNode;\n /** Section onExpand callback */\n onToggle?: (\n event: React.MouseEvent<HTMLButtonElement>,\n open: boolean,\n ) => void;\n /** Props to be passed to the expand button */\n expandButtonProps?: HvButtonProps;\n /** Determines whether or not the header has a shadow on the bottom border. */\n raisedHeader?: boolean;\n /** A Jss Object used to override or extend the styles applied to the empty state component. */\n classes?: HvSectionClasses;\n /** Content container ref. */\n contentRef?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Sections allow grouping information on a page under the same topic.\n */\nexport const HvSection = forwardRef<HTMLDivElement, HvSectionProps>(\n function HvSection(props, ref) {\n const {\n id,\n classes: classesProp,\n className,\n title,\n expandable,\n expanded,\n defaultExpanded = true,\n actions,\n onToggle,\n expandButtonProps,\n raisedHeader,\n contentRef,\n children,\n ...others\n } = useDefaultProps(\"HvSection\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable({\n id,\n expanded,\n defaultExpanded,\n });\n\n const hasHeader = title || actions || expandable;\n\n return (\n <div\n ref={ref}\n id={id}\n className={cx(classes.root, className, {\n [classes.raisedHeader]: raisedHeader && isOpen,\n })}\n {...others}\n >\n {hasHeader && (\n <div className={classes.header}>\n {expandable && (\n <HvButton\n icon\n onClick={(event) => {\n toggleOpen();\n onToggle?.(event, !isOpen);\n }}\n aria-label={isOpen ? \"Collapse\" : \"Expand\"}\n {...buttonProps}\n {...expandButtonProps}\n >\n <Down rotate={isOpen} />\n </HvButton>\n )}\n {title}\n <div className={classes.actions}>{actions}</div>\n </div>\n )}\n <div\n ref={contentRef}\n hidden={!isOpen}\n className={cx(classes.content, {\n [classes.hidden]: expandable && !isOpen,\n [classes.spaceTop]: !hasHeader,\n [classes.hasHeader]: hasHeader,\n })}\n {...(expandable && regionProps)}\n >\n {children}\n </div>\n </div>\n );\n },\n);\n"],"names":["HvSection"],"mappings":";;;;;;;;AA8CO,MAAM,YAAY;AAAA,EACvB,SAASA,WAAU,OAAO,KAAK;AACvB,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,aAAa,KAAK;AACtC,UAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,UAAM,EAAE,QAAQ,YAAY,aAAa,YAAA,IAAgB,cAAc;AAAA,MACrE;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAEK,UAAA,YAAY,SAAS,WAAW;AAGpC,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,UACrC,CAAC,QAAQ,YAAY,GAAG,gBAAgB;AAAA,QAAA,CACzC;AAAA,QACA,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,aACE,qBAAA,OAAA,EAAI,WAAW,QAAQ,QACrB,UAAA;AAAA,YACC,cAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAI;AAAA,gBACJ,SAAS,CAAC,UAAU;AACP,6BAAA;AACA,6BAAA,OAAO,CAAC,MAAM;AAAA,gBAC3B;AAAA,gBACA,cAAY,SAAS,aAAa;AAAA,gBACjC,GAAG;AAAA,gBACH,GAAG;AAAA,gBAEJ,UAAA,oBAAC,MAAK,EAAA,QAAQ,OAAQ,CAAA;AAAA,cAAA;AAAA,YACxB;AAAA,YAED;AAAA,YACA,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAU,UAAQ,QAAA,CAAA;AAAA,UAAA,GAC5C;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,QAAQ,CAAC;AAAA,cACT,WAAW,GAAG,QAAQ,SAAS;AAAA,gBAC7B,CAAC,QAAQ,MAAM,GAAG,cAAc,CAAC;AAAA,gBACjC,CAAC,QAAQ,QAAQ,GAAG,CAAC;AAAA,gBACrB,CAAC,QAAQ,SAAS,GAAG;AAAA,cAAA,CACtB;AAAA,cACA,GAAI,cAAc;AAAA,cAElB;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
|
|
@@ -10,7 +10,7 @@ const { staticClasses, useClasses } = createClasses("HvSelect", {
|
|
|
10
10
|
disabled: {},
|
|
11
11
|
readOnly: {},
|
|
12
12
|
invalid: {
|
|
13
|
-
border: `1px solid ${theme.colors.
|
|
13
|
+
border: `1px solid ${theme.colors.negative_120}`
|
|
14
14
|
},
|
|
15
15
|
labelContainer: {
|
|
16
16
|
display: "flex",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.styles.js","sources":["../../../src/Select/Select.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSelect\", {\n root: {\n position: \"relative\",\n \"&$disabled,&$readOnly\": {\n pointerEvents: \"none\",\n },\n },\n disabled: {},\n readOnly: {},\n invalid: {\n border: `1px solid ${theme.colors.
|
|
1
|
+
{"version":3,"file":"Select.styles.js","sources":["../../../src/Select/Select.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSelect\", {\n root: {\n position: \"relative\",\n \"&$disabled,&$readOnly\": {\n pointerEvents: \"none\",\n },\n },\n disabled: {},\n readOnly: {},\n invalid: {\n border: `1px solid ${theme.colors.negative_120}`,\n },\n labelContainer: {\n display: \"flex\",\n alignItems: \"flex-start\",\n },\n label: {\n display: \"block\",\n paddingBottom: 6,\n },\n description: {},\n select: {},\n popper: {\n zIndex: theme.zIndices.popover,\n },\n panel: {\n maxHeight: 400,\n border: `1px solid ${theme.colors.secondary}`,\n marginTop: -1,\n marginBottom: -1,\n },\n panelOpenedUp: {\n borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`,\n },\n panelOpenedDown: {\n borderRadius: `0 0 ${theme.radii.base} ${theme.radii.base}`,\n },\n error: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,yBAAyB;AAAA,MACvB,eAAe;AAAA,IAAA;AAAA,EAEnB;AAAA,EACA,UAAU,CAAC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,SAAS;AAAA,IACP,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,EAChD;AAAA,EACA,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,eAAe;AAAA,EACjB;AAAA,EACA,aAAa,CAAC;AAAA,EACd,QAAQ,CAAC;AAAA,EACT,QAAQ;AAAA,IACN,QAAQ,MAAM,SAAS;AAAA,EACzB;AAAA,EACA,OAAO;AAAA,IACL,WAAW;AAAA,IACX,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,IAC3C,WAAW;AAAA,IACX,cAAc;AAAA,EAChB;AAAA,EACA,eAAe;AAAA,IACb,cAAc,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EACvD;AAAA,EACA,iBAAiB;AAAA,IACf,cAAc,OAAO,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EAC3D;AAAA,EACA,OAAO,CAAA;AACT,CAAC;"}
|
|
@@ -30,7 +30,7 @@ const { staticClasses, useClasses } = createClasses("HvSelectionList", {
|
|
|
30
30
|
zIndex: 1
|
|
31
31
|
}
|
|
32
32
|
},
|
|
33
|
-
invalid: { borderBottom: `1px solid ${theme.colors.
|
|
33
|
+
invalid: { borderBottom: `1px solid ${theme.colors.negative_120}` }
|
|
34
34
|
});
|
|
35
35
|
export {
|
|
36
36
|
staticClasses,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectionList.styles.js","sources":["../../../src/SelectionList/SelectionList.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSelectionList\", {\n root: { display: \"inline-block\", padding: 0, margin: 0 },\n error: { width: \"100%\", float: \"left\", clear: \"both\" },\n listbox: {\n display: \"flex\",\n float: \"left\",\n clear: \"both\",\n width: \"100%\",\n paddingBottom: theme.space.xs,\n },\n label: { marginBottom: theme.space.xs, float: \"left\" },\n description: { float: \"left\" },\n horizontal: {\n flexDirection: \"row\",\n flexWrap: \"wrap\",\n marginLeft: -theme.space.sm,\n \"&>*\": {\n marginLeft: theme.space.sm,\n },\n },\n vertical: {\n flexDirection: \"column\",\n\n // Prevent the focus ring to be hidden by sibling hover background\n \"&>*\": {\n zIndex: 0,\n },\n \"&>*:focus-within\": {\n zIndex: 1,\n },\n },\n invalid: { borderBottom: `1px solid ${theme.colors.
|
|
1
|
+
{"version":3,"file":"SelectionList.styles.js","sources":["../../../src/SelectionList/SelectionList.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSelectionList\", {\n root: { display: \"inline-block\", padding: 0, margin: 0 },\n error: { width: \"100%\", float: \"left\", clear: \"both\" },\n listbox: {\n display: \"flex\",\n float: \"left\",\n clear: \"both\",\n width: \"100%\",\n paddingBottom: theme.space.xs,\n },\n label: { marginBottom: theme.space.xs, float: \"left\" },\n description: { float: \"left\" },\n horizontal: {\n flexDirection: \"row\",\n flexWrap: \"wrap\",\n marginLeft: -theme.space.sm,\n \"&>*\": {\n marginLeft: theme.space.sm,\n },\n },\n vertical: {\n flexDirection: \"column\",\n\n // Prevent the focus ring to be hidden by sibling hover background\n \"&>*\": {\n zIndex: 0,\n },\n \"&>*:focus-within\": {\n zIndex: 1,\n },\n },\n invalid: { borderBottom: `1px solid ${theme.colors.negative_120}` },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM,EAAE,SAAS,gBAAgB,SAAS,GAAG,QAAQ,EAAE;AAAA,EACvD,OAAO,EAAE,OAAO,QAAQ,OAAO,QAAQ,OAAO,OAAO;AAAA,EACrD,SAAS;AAAA,IACP,SAAS;AAAA,IACT,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,eAAe,MAAM,MAAM;AAAA,EAC7B;AAAA,EACA,OAAO,EAAE,cAAc,MAAM,MAAM,IAAI,OAAO,OAAO;AAAA,EACrD,aAAa,EAAE,OAAO,OAAO;AAAA,EAC7B,YAAY;AAAA,IACV,eAAe;AAAA,IACf,UAAU;AAAA,IACV,YAAY,CAAC,MAAM,MAAM;AAAA,IACzB,OAAO;AAAA,MACL,YAAY,MAAM,MAAM;AAAA,IAAA;AAAA,EAE5B;AAAA,EACA,UAAU;AAAA,IACR,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClB,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,SAAS,EAAE,cAAc,aAAa,MAAM,OAAO,YAAY,GAAG;AACpE,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.styles.js","sources":["../../../src/Switch/Switch.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSwitch\", {\n root: {\n display: \"inline-flex\",\n flexDirection: \"column\",\n alignItems: \"flex-start\",\n },\n label: { marginBottom: theme.space.xs },\n error: {},\n switchContainer: {\n height: \"32px\",\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: \"center\",\n borderBottom: \"1px solid transparent\",\n },\n invalidSwitch: {\n paddingBottom: \"1px\",\n borderBottom: `1px solid ${theme.colors.
|
|
1
|
+
{"version":3,"file":"Switch.styles.js","sources":["../../../src/Switch/Switch.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSwitch\", {\n root: {\n display: \"inline-flex\",\n flexDirection: \"column\",\n alignItems: \"flex-start\",\n },\n label: { marginBottom: theme.space.xs },\n error: {},\n switchContainer: {\n height: \"32px\",\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: \"center\",\n borderBottom: \"1px solid transparent\",\n },\n invalidSwitch: {\n paddingBottom: \"1px\",\n borderBottom: `1px solid ${theme.colors.negative_120}`,\n },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,EACd;AAAA,EACA,OAAO,EAAE,cAAc,MAAM,MAAM,GAAG;AAAA,EACtC,OAAO,CAAC;AAAA,EACR,iBAAiB;AAAA,IACf,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,cAAc;AAAA,EAChB;AAAA,EACA,eAAe;AAAA,IACb,eAAe;AAAA,IACf,cAAc,aAAa,MAAM,OAAO,YAAY;AAAA,EAAA;AAExD,CAAC;"}
|
|
@@ -22,7 +22,7 @@ const CellWithExpandButton = ({
|
|
|
22
22
|
"aria-label": row.isExpanded ? labels.collapseRowButtonAriaLabel : labels.expandRowButtonAriaLabel,
|
|
23
23
|
"aria-expanded": row.isExpanded,
|
|
24
24
|
onClick: rowProps?.onClick,
|
|
25
|
-
children: /* @__PURE__ */ jsx(DropDownXS, {
|
|
25
|
+
children: /* @__PURE__ */ jsx(DropDownXS, { rotate: row.isExpanded })
|
|
26
26
|
}
|
|
27
27
|
),
|
|
28
28
|
cell?.value && /* @__PURE__ */ jsx(HvTypography, { variant: "label", component: "span", children: cell.value })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRowExpand.js","sources":["../../../../src/Table/hooks/useRowExpand.tsx"],"sourcesContent":["import {\n Hooks,\n TableExpandedToggleProps,\n UseExpandedRowProps,\n} from \"react-table\";\nimport { DropDownXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton } from \"../../Button\";\nimport { useLabels } from \"../../hooks/useLabels\";\nimport { HvTypography } from \"../../Typography\";\nimport type { HvCellProps } from \"./useTable\";\n\n// #region ##### TYPES #####\n\nexport interface UseHvRowExpandTableRowProps {\n expanded?: boolean;\n}\n\nexport type UseHvRowExpandTableOptions = {\n disableCreateExpandButton?: boolean;\n};\n\nexport interface UseHvRowExpandRowToggleProps extends TableExpandedToggleProps {\n onClick?: React.MouseEventHandler<unknown>;\n}\n\nexport interface UseHvRowExpandRowInstance<\n D extends object = Record<string, unknown>,\n> extends UseExpandedRowProps<D> {\n getToggleRowExpandedProps: (\n props?: Partial<TableExpandedToggleProps>,\n ) => UseHvRowExpandRowToggleProps;\n}\n\nexport type UseRowExpandProps = (<D extends object = Record<string, unknown>>(\n hooks: Hooks<D>,\n) => void) & { pluginName: string };\n\n// #endregion ##### TYPES #####\n\nconst DEFAULT_LABELS = {\n expandRowButtonAriaLabel: \"Expand this row\",\n collapseRowButtonAriaLabel: \"Collapse this row\",\n};\n\nexport const CellWithExpandButton = ({\n row,\n cell,\n labels: labelsProp,\n}: HvCellProps<any>) => {\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n const rowProps = row.getToggleRowExpandedProps?.();\n\n return (\n <>\n <HvButton\n icon\n aria-label={\n row.isExpanded\n ? labels.collapseRowButtonAriaLabel\n : labels.expandRowButtonAriaLabel\n }\n aria-expanded={row.isExpanded}\n onClick={rowProps?.onClick}\n >\n <DropDownXS
|
|
1
|
+
{"version":3,"file":"useRowExpand.js","sources":["../../../../src/Table/hooks/useRowExpand.tsx"],"sourcesContent":["import {\n Hooks,\n TableExpandedToggleProps,\n UseExpandedRowProps,\n} from \"react-table\";\nimport { DropDownXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton } from \"../../Button\";\nimport { useLabels } from \"../../hooks/useLabels\";\nimport { HvTypography } from \"../../Typography\";\nimport type { HvCellProps } from \"./useTable\";\n\n// #region ##### TYPES #####\n\nexport interface UseHvRowExpandTableRowProps {\n expanded?: boolean;\n}\n\nexport type UseHvRowExpandTableOptions = {\n disableCreateExpandButton?: boolean;\n};\n\nexport interface UseHvRowExpandRowToggleProps extends TableExpandedToggleProps {\n onClick?: React.MouseEventHandler<unknown>;\n}\n\nexport interface UseHvRowExpandRowInstance<\n D extends object = Record<string, unknown>,\n> extends UseExpandedRowProps<D> {\n getToggleRowExpandedProps: (\n props?: Partial<TableExpandedToggleProps>,\n ) => UseHvRowExpandRowToggleProps;\n}\n\nexport type UseRowExpandProps = (<D extends object = Record<string, unknown>>(\n hooks: Hooks<D>,\n) => void) & { pluginName: string };\n\n// #endregion ##### TYPES #####\n\nconst DEFAULT_LABELS = {\n expandRowButtonAriaLabel: \"Expand this row\",\n collapseRowButtonAriaLabel: \"Collapse this row\",\n};\n\nexport const CellWithExpandButton = ({\n row,\n cell,\n labels: labelsProp,\n}: HvCellProps<any>) => {\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n const rowProps = row.getToggleRowExpandedProps?.();\n\n return (\n <>\n <HvButton\n icon\n aria-label={\n row.isExpanded\n ? labels.collapseRowButtonAriaLabel\n : labels.expandRowButtonAriaLabel\n }\n aria-expanded={row.isExpanded}\n onClick={rowProps?.onClick}\n >\n <DropDownXS rotate={row.isExpanded} />\n </HvButton>\n {cell?.value && (\n <HvTypography variant=\"label\" component=\"span\">\n {cell.value}\n </HvTypography>\n )}\n </>\n );\n};\n\nconst visibleColumnsHook = (columns: any, { instance }: any) => {\n if (instance.disableCreateExpandButton) {\n return columns;\n }\n\n // add a button to first data column, unless it has a custom renderer\n // if so, add an extra column instead\n const firstDataColumnIndex = columns.findIndex(\n (c: any) => c.id?.indexOf(\"_hv_\") !== 0,\n );\n\n if (firstDataColumnIndex !== -1) {\n const firstDataColumn = columns[firstDataColumnIndex];\n\n if (firstDataColumn.Cell == null) {\n firstDataColumn.Cell = CellWithExpandButton;\n firstDataColumn.variant = \"expand\";\n\n return columns;\n }\n }\n\n const expandColumn = {\n id: \"_hv_expand\",\n variant: \"none\",\n\n width: 32,\n\n // this will only work when using useHvTableSticky\n // but ensures it stays left of any sticky column\n sticky: \"left\",\n\n Cell: CellWithExpandButton,\n };\n\n const columnsCopy = [...columns];\n columnsCopy.splice(\n firstDataColumnIndex !== -1 ? firstDataColumnIndex : 0,\n 0,\n expandColumn,\n );\n\n return columnsCopy;\n};\n\nconst getRowPropsHook = (props: any, { row }: any) => {\n const nextProps: UseHvRowExpandTableRowProps = {\n expanded: row.isExpanded,\n };\n\n return [props, nextProps];\n};\n\nconst useRowExpand: UseRowExpandProps = (hooks) => {\n hooks.visibleColumns.push(visibleColumnsHook);\n hooks.getRowProps.push(getRowPropsHook);\n};\nuseRowExpand.pluginName = \"useHvRowExpand\";\n\nexport default useRowExpand;\n"],"names":[],"mappings":";;;;;AAwCA,MAAM,iBAAiB;AAAA,EACrB,0BAA0B;AAAA,EAC1B,4BAA4B;AAC9B;AAEO,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA,QAAQ;AACV,MAAwB;AAChB,QAAA,SAAS,UAAU,gBAAgB,UAAU;AAC7C,QAAA,WAAW,IAAI,4BAA4B;AAEjD,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,cACE,IAAI,aACA,OAAO,6BACP,OAAO;AAAA,QAEb,iBAAe,IAAI;AAAA,QACnB,SAAS,UAAU;AAAA,QAEnB,UAAC,oBAAA,YAAA,EAAW,QAAQ,IAAI,WAAY,CAAA;AAAA,MAAA;AAAA,IACtC;AAAA,IACC,MAAM,SACJ,oBAAA,cAAA,EAAa,SAAQ,SAAQ,WAAU,QACrC,UAAA,KAAK,MACR,CAAA;AAAA,EAAA,GAEJ;AAEJ;AAEA,MAAM,qBAAqB,CAAC,SAAc,EAAE,eAAoB;AAC9D,MAAI,SAAS,2BAA2B;AAC/B,WAAA;AAAA,EAAA;AAKT,QAAM,uBAAuB,QAAQ;AAAA,IACnC,CAAC,MAAW,EAAE,IAAI,QAAQ,MAAM,MAAM;AAAA,EACxC;AAEA,MAAI,yBAAyB,IAAI;AACzB,UAAA,kBAAkB,QAAQ,oBAAoB;AAEhD,QAAA,gBAAgB,QAAQ,MAAM;AAChC,sBAAgB,OAAO;AACvB,sBAAgB,UAAU;AAEnB,aAAA;AAAA,IAAA;AAAA,EACT;AAGF,QAAM,eAAe;AAAA,IACnB,IAAI;AAAA,IACJ,SAAS;AAAA,IAET,OAAO;AAAA;AAAA;AAAA,IAIP,QAAQ;AAAA,IAER,MAAM;AAAA,EACR;AAEM,QAAA,cAAc,CAAC,GAAG,OAAO;AACnB,cAAA;AAAA,IACV,yBAAyB,KAAK,uBAAuB;AAAA,IACrD;AAAA,IACA;AAAA,EACF;AAEO,SAAA;AACT;AAEA,MAAM,kBAAkB,CAAC,OAAY,EAAE,UAAe;AACpD,QAAM,YAAyC;AAAA,IAC7C,UAAU,IAAI;AAAA,EAChB;AAEO,SAAA,CAAC,OAAO,SAAS;AAC1B;AAEM,MAAA,eAAkC,CAAC,UAAU;AAC3C,QAAA,eAAe,KAAK,kBAAkB;AACtC,QAAA,YAAY,KAAK,eAAe;AACxC;AACA,aAAa,aAAa;"}
|
|
@@ -94,10 +94,10 @@ const { staticClasses, useClasses } = createClasses("HvTagsInput", {
|
|
|
94
94
|
paddingTop: 0
|
|
95
95
|
},
|
|
96
96
|
"&$error": {
|
|
97
|
-
border: `1px solid ${theme.colors.
|
|
97
|
+
border: `1px solid ${theme.colors.negative_120}`
|
|
98
98
|
},
|
|
99
99
|
"&$invalid": {
|
|
100
|
-
border: `1px solid ${theme.colors.
|
|
100
|
+
border: `1px solid ${theme.colors.negative_120}`
|
|
101
101
|
}
|
|
102
102
|
},
|
|
103
103
|
tagInputContainerRoot: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagsInput.styles.js","sources":["../../../src/TagsInput/TagsInput.styles.tsx"],"sourcesContent":["import { chipClasses } from \"@mui/material/Chip\";\nimport { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { baseInputClasses } from \"../BaseInput\";\nimport { suggestionsClasses } from \"../Forms\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTagsInput\", {\n input: {\n width: \"100%\",\n ...theme.typography.caption1,\n },\n listItemGutters: { padding: \"0 5px\" },\n listItemRoot: {\n marginBottom: 2,\n height: 24,\n lineHeight: \"24px\",\n\n \"&:not(:last-child)\": {\n marginBottom: 2,\n },\n\n \"&$singleLine\": {\n display: \"table-cell\",\n paddingTop: \"2px\",\n },\n },\n root: { display: \"inline-block\", width: \"100%\" },\n chipRoot: {\n [`&.${chipClasses.root}`]: {\n maxWidth: \"none\",\n },\n },\n disabled: {\n \"& $tagsList\": {\n backgroundColor: theme.colors.atmo2,\n border: `1px solid ${theme.colors.atmo4}`,\n\n \"&:focus-within, &:hover\": {\n border: `1px solid ${theme.colors.atmo4}`,\n },\n },\n },\n readOnly: {\n \"& $tagsList\": {\n backgroundColor: theme.colors.atmo2,\n border: `1px solid ${theme.colors.secondary_60}`,\n\n \"&:hover\": {\n border: `1px solid ${theme.colors.secondary_60}`,\n },\n },\n },\n resizable: { width: \"auto\", resize: \"both\", overflow: \"auto\" },\n invalid: {},\n labelContainer: { float: \"left\", display: \"flex\", alignItems: \"flex-start\" },\n label: { display: \"block\", float: \"left\", paddingBottom: \"6px\" },\n description: { display: \"block\", float: \"left\" },\n characterCounter: {\n display: \"block\",\n float: \"right\",\n textAlign: \"right\",\n marginBottom: \"6px\",\n },\n tagsList: {\n display: \"flex\",\n alignContent: \"flex-start\",\n float: \"left\",\n clear: \"both\",\n width: \"100%\",\n maxWidth: \"100%\",\n height: \"32px\",\n padding: 5,\n overflow: \"auto\",\n position: \"relative\",\n\n flexDirection: \"row\",\n flexWrap: \"wrap\",\n\n backgroundColor: theme.colors.atmo1,\n border: `1px solid ${theme.colors.secondary_80}`,\n borderRadius: theme.radii.base,\n\n \"&:hover\": {\n cursor: \"text\",\n border: `1px solid ${theme.colors.primary}`,\n },\n\n [`& .${baseInputClasses.inputRoot}`]: {\n border: \"none\",\n },\n\n \"&:focus, &:focus-within, &:focus-visible\": {\n outlineColor: \"#52A8EC\",\n outlineStyle: \"solid\",\n outlineWidth: \"0px\",\n outlineOffset: \"-1px\",\n boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n },\n\n \"&$singleLine\": {\n overflowX: \"hidden\",\n overflowY: \"hidden\",\n height: 32,\n display: \"table-row\",\n paddingTop: 0,\n },\n\n \"&$error\": {\n border: `1px solid ${theme.colors.
|
|
1
|
+
{"version":3,"file":"TagsInput.styles.js","sources":["../../../src/TagsInput/TagsInput.styles.tsx"],"sourcesContent":["import { chipClasses } from \"@mui/material/Chip\";\nimport { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { baseInputClasses } from \"../BaseInput\";\nimport { suggestionsClasses } from \"../Forms\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTagsInput\", {\n input: {\n width: \"100%\",\n ...theme.typography.caption1,\n },\n listItemGutters: { padding: \"0 5px\" },\n listItemRoot: {\n marginBottom: 2,\n height: 24,\n lineHeight: \"24px\",\n\n \"&:not(:last-child)\": {\n marginBottom: 2,\n },\n\n \"&$singleLine\": {\n display: \"table-cell\",\n paddingTop: \"2px\",\n },\n },\n root: { display: \"inline-block\", width: \"100%\" },\n chipRoot: {\n [`&.${chipClasses.root}`]: {\n maxWidth: \"none\",\n },\n },\n disabled: {\n \"& $tagsList\": {\n backgroundColor: theme.colors.atmo2,\n border: `1px solid ${theme.colors.atmo4}`,\n\n \"&:focus-within, &:hover\": {\n border: `1px solid ${theme.colors.atmo4}`,\n },\n },\n },\n readOnly: {\n \"& $tagsList\": {\n backgroundColor: theme.colors.atmo2,\n border: `1px solid ${theme.colors.secondary_60}`,\n\n \"&:hover\": {\n border: `1px solid ${theme.colors.secondary_60}`,\n },\n },\n },\n resizable: { width: \"auto\", resize: \"both\", overflow: \"auto\" },\n invalid: {},\n labelContainer: { float: \"left\", display: \"flex\", alignItems: \"flex-start\" },\n label: { display: \"block\", float: \"left\", paddingBottom: \"6px\" },\n description: { display: \"block\", float: \"left\" },\n characterCounter: {\n display: \"block\",\n float: \"right\",\n textAlign: \"right\",\n marginBottom: \"6px\",\n },\n tagsList: {\n display: \"flex\",\n alignContent: \"flex-start\",\n float: \"left\",\n clear: \"both\",\n width: \"100%\",\n maxWidth: \"100%\",\n height: \"32px\",\n padding: 5,\n overflow: \"auto\",\n position: \"relative\",\n\n flexDirection: \"row\",\n flexWrap: \"wrap\",\n\n backgroundColor: theme.colors.atmo1,\n border: `1px solid ${theme.colors.secondary_80}`,\n borderRadius: theme.radii.base,\n\n \"&:hover\": {\n cursor: \"text\",\n border: `1px solid ${theme.colors.primary}`,\n },\n\n [`& .${baseInputClasses.inputRoot}`]: {\n border: \"none\",\n },\n\n \"&:focus, &:focus-within, &:focus-visible\": {\n outlineColor: \"#52A8EC\",\n outlineStyle: \"solid\",\n outlineWidth: \"0px\",\n outlineOffset: \"-1px\",\n boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n },\n\n \"&$singleLine\": {\n overflowX: \"hidden\",\n overflowY: \"hidden\",\n height: 32,\n display: \"table-row\",\n paddingTop: 0,\n },\n\n \"&$error\": {\n border: `1px solid ${theme.colors.negative_120}`,\n },\n\n \"&$invalid\": {\n border: `1px solid ${theme.colors.negative_120}`,\n },\n },\n tagInputContainerRoot: {\n display: \"flex\",\n flexGrow: 1,\n height: 24,\n lineHeight: \"24px\",\n\n \"&$singleLine\": {\n display: \"table-cell\",\n minWidth: 60,\n width: \"100%\",\n paddingTop: \"3px\",\n verticalAlign: \"middle\",\n },\n },\n tagInputRoot: {\n [`& .${baseInputClasses.root}`]: {\n width: \"100%\",\n border: \"none\",\n \"&:hover $tagInputBorderContainer\": {\n background: \"none\",\n },\n },\n [`&& .${baseInputClasses.inputRoot}`]: {\n marginLeft: 0,\n marginRight: 0,\n flex: \"1 1 auto\",\n height: 24,\n lineHeight: \"24px\",\n padding: 0,\n border: \"none\",\n },\n [`& .${baseInputClasses.inputBorderContainer}`]: {\n border: \"none\",\n background: \"none\",\n },\n [`& .${baseInputClasses.inputRootFocused}`]: {\n outline: \"none\",\n boxShadow: \"none\",\n },\n [`& .${baseInputClasses.root} .${baseInputClasses.inputRootReadOnly}`]: {\n backgroundColor: \"transparent\",\n border: \"none\",\n \"&:hover\": {\n border: \"none\",\n },\n },\n [`&& .${baseInputClasses.input}`]: {\n marginLeft: 0,\n },\n },\n tagSelected: {\n outlineColor: \"#52A8EC\",\n outlineStyle: \"solid\",\n outlineWidth: \"0px\",\n outlineOffset: \"-1px\",\n boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n },\n tagInputBorderContainer: {},\n tagInputRootFocused: {},\n tagInputRootEmpty: {},\n singleLine: {},\n error: { float: \"left\" },\n inputExtension: {},\n suggestionsContainer: {\n width: \"100%\",\n position: \"relative\",\n top: 59,\n [`& .${suggestionsClasses.root} .${suggestionsClasses.list} &`]: {\n width: \"100%\",\n },\n },\n suggestionList: {},\n});\n"],"names":["baseInputClasses","suggestionsClasses"],"mappings":"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"}
|