@hitachivantara/uikit-react-core 5.87.3 → 5.88.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/ActionsGeneric/ActionsGeneric.cjs +1 -1
- package/dist/cjs/Banner/BannerContent/BannerContent.cjs +1 -1
- package/dist/cjs/BaseInput/BaseInput.styles.cjs +1 -1
- package/dist/cjs/BaseInput/validations.cjs +2 -1
- package/dist/cjs/ColorPicker/ColorPicker.cjs +1 -1
- package/dist/cjs/DatePicker/DatePicker.cjs +12 -12
- package/dist/cjs/FilterGroup/FilterContent/FilterContent.cjs +1 -1
- package/dist/cjs/FormElement/Adornment/Adornment.cjs +15 -36
- package/dist/cjs/FormElement/Adornment/Adornment.styles.cjs +11 -17
- package/dist/cjs/Input/Input.cjs +29 -51
- package/dist/cjs/Input/Input.styles.cjs +1 -0
- package/dist/cjs/List/List.cjs +1 -1
- package/dist/cjs/Pagination/Pagination.styles.cjs +2 -2
- package/dist/cjs/Pagination/Select.cjs +1 -1
- package/dist/cjs/Table/TableBody/TableBody.cjs +16 -17
- package/dist/cjs/TableSection/TableSection.styles.cjs +10 -10
- package/dist/cjs/Tag/Tag.cjs +1 -1
- package/dist/cjs/TagsInput/TagsInput.cjs +103 -169
- package/dist/cjs/TagsInput/TagsInput.styles.cjs +44 -105
- package/dist/cjs/TextArea/TextArea.cjs +1 -3
- package/dist/cjs/TimePicker/TimePicker.cjs +5 -4
- package/dist/cjs/hooks/useFocus.cjs +38 -0
- package/dist/cjs/utils/focusUtils.cjs +0 -4
- package/dist/esm/ActionsGeneric/ActionsGeneric.js +1 -1
- package/dist/esm/AvatarGroup/AvatarGroupContext.js +1 -1
- package/dist/esm/Banner/BannerContent/BannerContent.js +1 -1
- package/dist/esm/BaseCheckBox/BaseCheckBox.js +1 -1
- package/dist/esm/BaseDropdown/BaseDropdown.js +3 -3
- package/dist/esm/BaseInput/BaseInput.js.map +1 -1
- package/dist/esm/BaseInput/BaseInput.styles.js +1 -1
- package/dist/esm/BaseInput/BaseInput.styles.js.map +1 -1
- package/dist/esm/BaseInput/validations.js +2 -1
- package/dist/esm/BaseInput/validations.js.map +1 -1
- package/dist/esm/BaseRadio/BaseRadio.js +1 -1
- package/dist/esm/Button/Button.js +1 -1
- package/dist/esm/Calendar/CalendarHeader/CalendarHeader.js +1 -1
- package/dist/esm/CheckBoxGroup/CheckBoxGroup.js.map +1 -1
- package/dist/esm/ColorPicker/ColorPicker.js +1 -1
- package/dist/esm/ColorPicker/ColorPicker.js.map +1 -1
- package/dist/esm/ColorPicker/Fields/Fields.js.map +1 -1
- package/dist/esm/DatePicker/DatePicker.js.map +1 -1
- package/dist/esm/DatePicker/utils.js +1 -1
- package/dist/esm/Dialog/context.js +1 -1
- package/dist/esm/DotPagination/DotPagination.js +1 -1
- package/dist/esm/Dropdown/Dropdown.js.map +1 -1
- package/dist/esm/DropdownButton/DropdownButton.js.map +1 -1
- package/dist/esm/FilterGroup/FilterContent/FilterContent.js +1 -1
- package/dist/esm/FilterGroup/FilterContent/FilterContent.js.map +1 -1
- package/dist/esm/FilterGroup/FilterGroupContext.js +1 -1
- package/dist/esm/Focus/Focus.js +1 -1
- package/dist/esm/FormElement/Adornment/Adornment.js +15 -36
- package/dist/esm/FormElement/Adornment/Adornment.js.map +1 -1
- package/dist/esm/FormElement/Adornment/Adornment.styles.js +11 -17
- package/dist/esm/FormElement/Adornment/Adornment.styles.js.map +1 -1
- package/dist/esm/Header/Navigation/useSelectionPath.js.map +1 -1
- package/dist/esm/Input/Input.js +30 -52
- package/dist/esm/Input/Input.js.map +1 -1
- package/dist/esm/Input/Input.styles.js +1 -0
- package/dist/esm/Input/Input.styles.js.map +1 -1
- package/dist/esm/List/List.js +1 -1
- package/dist/esm/Pagination/Pagination.styles.js +5 -5
- package/dist/esm/Pagination/Select.js +1 -1
- package/dist/esm/QueryBuilder/Context.js +1 -1
- package/dist/esm/QueryBuilder/QueryBuilder.js +1 -1
- package/dist/esm/QueryBuilder/utils/index.js +1 -1
- package/dist/esm/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/esm/SelectionList/SelectionList.js.map +1 -1
- package/dist/esm/Slider/Slider.js +1 -1
- package/dist/esm/Slider/Slider.js.map +1 -1
- package/dist/esm/SnackbarProvider/SnackbarProvider.js +2 -2
- package/dist/esm/Table/TableBody/TableBody.js +16 -17
- package/dist/esm/Table/TableBody/TableBody.js.map +1 -1
- package/dist/esm/TableSection/TableSection.styles.js +24 -24
- package/dist/esm/Tag/Tag.js +1 -1
- package/dist/esm/Tag/Tag.js.map +1 -1
- package/dist/esm/TagsInput/TagsInput.js +103 -169
- package/dist/esm/TagsInput/TagsInput.js.map +1 -1
- package/dist/esm/TagsInput/TagsInput.styles.js +44 -105
- package/dist/esm/TagsInput/TagsInput.styles.js.map +1 -1
- package/dist/esm/TextArea/TextArea.js +1 -3
- package/dist/esm/TextArea/TextArea.js.map +1 -1
- package/dist/esm/TimePicker/TimePicker.js +1 -0
- package/dist/esm/TimePicker/TimePicker.js.map +1 -1
- package/dist/esm/TreeView/internals/TreeViewProvider.js +1 -1
- package/dist/esm/TreeView/internals/hooks/plugins/useTreeViewKeyboardNavigation.js +1 -1
- package/dist/esm/VerticalNavigation/NavigationSlider/NavigationSlider.js.map +1 -1
- package/dist/esm/hooks/useFocus.js +38 -0
- package/dist/esm/hooks/useFocus.js.map +1 -0
- package/dist/esm/hooks/useScrollTo.js.map +1 -1
- package/dist/esm/utils/document.js.map +1 -1
- package/dist/esm/utils/focusUtils.js +0 -4
- package/dist/esm/utils/focusUtils.js.map +1 -1
- package/dist/types/index.d.ts +189 -248
- package/package.json +8 -8
|
@@ -6,9 +6,9 @@ const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
|
|
|
6
6
|
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
7
7
|
const setId = require("../utils/setId.cjs");
|
|
8
8
|
const ActionsGeneric_styles = require("./ActionsGeneric.styles.cjs");
|
|
9
|
+
const DropDownMenu = require("../DropDownMenu/DropDownMenu.cjs");
|
|
9
10
|
const IconButton = require("../IconButton/IconButton.cjs");
|
|
10
11
|
const Button = require("../Button/Button.cjs");
|
|
11
|
-
const DropDownMenu = require("../DropDownMenu/DropDownMenu.cjs");
|
|
12
12
|
const HvActionsGeneric = React.forwardRef(function HvActionsGeneric2(props, ref) {
|
|
13
13
|
const {
|
|
14
14
|
id: idProp,
|
|
@@ -7,8 +7,8 @@ const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
|
|
|
7
7
|
const iconVariant = require("../../utils/iconVariant.cjs");
|
|
8
8
|
const setId = require("../../utils/setId.cjs");
|
|
9
9
|
const BannerContent_styles = require("./BannerContent.styles.cjs");
|
|
10
|
-
const ActionsGeneric = require("../../ActionsGeneric/ActionsGeneric.cjs");
|
|
11
10
|
const Button = require("../../Button/Button.cjs");
|
|
11
|
+
const ActionsGeneric = require("../../ActionsGeneric/ActionsGeneric.cjs");
|
|
12
12
|
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
|
|
13
13
|
const SnackbarContent__default = /* @__PURE__ */ _interopDefault(SnackbarContent);
|
|
14
14
|
const HvBannerContent = React.forwardRef(
|
|
@@ -96,7 +96,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseInput
|
|
|
96
96
|
height: "100%",
|
|
97
97
|
marginLeft: uikitStyles.theme.space.xs,
|
|
98
98
|
marginRight: uikitStyles.theme.space.xs,
|
|
99
|
-
padding:
|
|
99
|
+
padding: 0,
|
|
100
100
|
backgroundColor: "transparent",
|
|
101
101
|
overflow: "hidden",
|
|
102
102
|
textOverflow: "ellipsis",
|
|
@@ -49,7 +49,7 @@ const computeValidationMessage = (inputValidity, errorMessages) => {
|
|
|
49
49
|
}
|
|
50
50
|
return errorMessages.error;
|
|
51
51
|
};
|
|
52
|
-
const validateInput = (input,
|
|
52
|
+
const validateInput = (input, required, minCharQuantity, maxCharQuantity, validationType, validation) => {
|
|
53
53
|
const inputValidity = {
|
|
54
54
|
valid: input?.validity?.valid ?? true,
|
|
55
55
|
badInput: input?.validity?.badInput,
|
|
@@ -63,6 +63,7 @@ const validateInput = (input, value, required, minCharQuantity, maxCharQuantity,
|
|
|
63
63
|
typeMismatch: input?.validity?.typeMismatch,
|
|
64
64
|
valueMissing: input?.validity?.valueMissing
|
|
65
65
|
};
|
|
66
|
+
const value = input?.value;
|
|
66
67
|
if (!value) {
|
|
67
68
|
if (required) {
|
|
68
69
|
inputValidity.valueMissing = true;
|
|
@@ -16,8 +16,8 @@ const FormElement = require("../FormElement/FormElement.cjs");
|
|
|
16
16
|
const Label = require("../FormElement/Label/Label.cjs");
|
|
17
17
|
const InfoMessage = require("../FormElement/InfoMessage/InfoMessage.cjs");
|
|
18
18
|
const BaseDropdown = require("../BaseDropdown/BaseDropdown.cjs");
|
|
19
|
-
const Typography = require("../Typography/Typography.cjs");
|
|
20
19
|
const Panel = require("../Panel/Panel.cjs");
|
|
20
|
+
const Typography = require("../Typography/Typography.cjs");
|
|
21
21
|
const DEFAULT_LABELS = {
|
|
22
22
|
recommendedColorsLabel: "Recommended colors:",
|
|
23
23
|
customColorsLabel: "Custom colors:"
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
4
|
const React = require("react");
|
|
5
|
-
const utils = require("@mui/material/utils");
|
|
5
|
+
const utils$1 = require("@mui/material/utils");
|
|
6
6
|
const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
|
|
7
7
|
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
8
|
-
const utils
|
|
8
|
+
const utils = require("../Calendar/utils.cjs");
|
|
9
9
|
const useControlled = require("../hooks/useControlled.cjs");
|
|
10
10
|
const useLabels = require("../hooks/useLabels.cjs");
|
|
11
11
|
const useUniqueId = require("../hooks/useUniqueId.cjs");
|
|
@@ -13,10 +13,10 @@ const setId = require("../utils/setId.cjs");
|
|
|
13
13
|
const useSavedState = require("../utils/useSavedState.cjs");
|
|
14
14
|
const DatePicker_styles = require("./DatePicker.styles.cjs");
|
|
15
15
|
const useVisibleDate = require("./useVisibleDate.cjs");
|
|
16
|
-
const utils$
|
|
16
|
+
const utils$2 = require("./utils.cjs");
|
|
17
17
|
const Calendar = require("../Calendar/Calendar.cjs");
|
|
18
18
|
const Button = require("../Button/Button.cjs");
|
|
19
|
-
const utils$
|
|
19
|
+
const utils$3 = require("../FormElement/utils.cjs");
|
|
20
20
|
const FormElement = require("../FormElement/FormElement.cjs");
|
|
21
21
|
const Label = require("../FormElement/Label/Label.cjs");
|
|
22
22
|
const InfoMessage = require("../FormElement/InfoMessage/InfoMessage.cjs");
|
|
@@ -65,7 +65,7 @@ const HvDatePicker = React.forwardRef(
|
|
|
65
65
|
rangeMode = false,
|
|
66
66
|
startAdornment,
|
|
67
67
|
horizontalPlacement = "right",
|
|
68
|
-
locale = utils
|
|
68
|
+
locale = utils.DEFAULT_LOCALE,
|
|
69
69
|
showActions,
|
|
70
70
|
showClear,
|
|
71
71
|
disablePortal = true,
|
|
@@ -93,7 +93,7 @@ const HvDatePicker = React.forwardRef(
|
|
|
93
93
|
const [visibleDate, dispatchAction] = useVisibleDate.default(startDate, endDate);
|
|
94
94
|
const focusTarget = React.useRef(null);
|
|
95
95
|
const { ref: refProp, ...otherDropdownProps } = dropdownProps;
|
|
96
|
-
const dropdownForkedRef = utils.useForkRef(ref, refProp);
|
|
96
|
+
const dropdownForkedRef = utils$1.useForkRef(ref, refProp);
|
|
97
97
|
React.useEffect(() => {
|
|
98
98
|
setStartDate(rangeMode ? startValue : value, true);
|
|
99
99
|
setEndDate(endValue, true);
|
|
@@ -125,7 +125,7 @@ const HvDatePicker = React.forwardRef(
|
|
|
125
125
|
setEndDate(endDate ?? startDate, true);
|
|
126
126
|
onChange?.(startDate, endDate);
|
|
127
127
|
setValidationState(() => {
|
|
128
|
-
if (required && (!utils
|
|
128
|
+
if (required && (!utils.isDate(startDate) || rangeMode && !utils.isDate(endDate))) {
|
|
129
129
|
return "invalid";
|
|
130
130
|
}
|
|
131
131
|
return "valid";
|
|
@@ -158,7 +158,7 @@ const HvDatePicker = React.forwardRef(
|
|
|
158
158
|
focusTarget.current?.focus();
|
|
159
159
|
};
|
|
160
160
|
const handleDateChange = (event, newDate) => {
|
|
161
|
-
if (!utils
|
|
161
|
+
if (!utils.isDate(newDate)) return;
|
|
162
162
|
const autoSave = !showActions && !rangeMode;
|
|
163
163
|
if (rangeMode) {
|
|
164
164
|
if (!startDate || startDate && endDate || newDate < startDate) {
|
|
@@ -173,7 +173,7 @@ const HvDatePicker = React.forwardRef(
|
|
|
173
173
|
if (autoSave) {
|
|
174
174
|
onChange?.(newDate);
|
|
175
175
|
setValidationState(() => {
|
|
176
|
-
if (required && !utils
|
|
176
|
+
if (required && !utils.isDate(newDate)) {
|
|
177
177
|
return "invalid";
|
|
178
178
|
}
|
|
179
179
|
return "valid";
|
|
@@ -182,7 +182,7 @@ const HvDatePicker = React.forwardRef(
|
|
|
182
182
|
}
|
|
183
183
|
};
|
|
184
184
|
const handleInputDateChange = (event, newDate, position) => {
|
|
185
|
-
if (!utils
|
|
185
|
+
if (!utils.isDate(newDate)) return;
|
|
186
186
|
if (!rangeMode) {
|
|
187
187
|
handleDateChange(event, newDate);
|
|
188
188
|
return;
|
|
@@ -232,11 +232,11 @@ const HvDatePicker = React.forwardRef(
|
|
|
232
232
|
] })
|
|
233
233
|
] });
|
|
234
234
|
const dateValue = rangeMode ? { startDate, endDate } : startDate;
|
|
235
|
-
const dateString = utils$
|
|
235
|
+
const dateString = utils$2.getDateLabel(dateValue, rangeMode, locale);
|
|
236
236
|
const hasLabel = label != null;
|
|
237
237
|
const hasDescription = description != null;
|
|
238
238
|
const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
|
|
239
|
-
const isStateInvalid = utils$
|
|
239
|
+
const isStateInvalid = utils$3.isInvalid(validationState);
|
|
240
240
|
let errorMessageId;
|
|
241
241
|
if (isStateInvalid) {
|
|
242
242
|
errorMessageId = canShowError ? setId.setId(elementId, "error") : ariaErrorMessage;
|
|
@@ -12,8 +12,8 @@ const RightPanel = require("../RightPanel/RightPanel.cjs");
|
|
|
12
12
|
const Button = require("../../Button/Button.cjs");
|
|
13
13
|
const Typography = require("../../Typography/Typography.cjs");
|
|
14
14
|
const BaseDropdown = require("../../BaseDropdown/BaseDropdown.cjs");
|
|
15
|
-
const Counter = require("../Counter/Counter.cjs");
|
|
16
15
|
const ActionBar = require("../../ActionBar/ActionBar.cjs");
|
|
16
|
+
const Counter = require("../Counter/Counter.cjs");
|
|
17
17
|
const HvFilterGroupContent = React.forwardRef(function HvFilterGroupContent2(props, ref) {
|
|
18
18
|
const {
|
|
19
19
|
id,
|
|
@@ -6,68 +6,47 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
|
6
6
|
const context = require("../context.cjs");
|
|
7
7
|
const Adornment_styles = require("./Adornment.styles.cjs");
|
|
8
8
|
const ButtonBase = require("../../ButtonBase/ButtonBase.cjs");
|
|
9
|
-
const noop = () => {
|
|
10
|
-
};
|
|
11
9
|
const HvAdornment = React.forwardRef(function HvAdornment2(props, ref) {
|
|
12
10
|
const {
|
|
13
|
-
id,
|
|
14
11
|
classes: classesProp,
|
|
15
12
|
className,
|
|
16
13
|
icon,
|
|
17
14
|
showWhen,
|
|
18
15
|
onClick,
|
|
19
16
|
isVisible,
|
|
17
|
+
tabIndex,
|
|
20
18
|
...others
|
|
21
19
|
} = uikitReactUtils.useDefaultProps("HvAdornment", props);
|
|
22
20
|
const { classes, cx } = Adornment_styles.useClasses(classesProp);
|
|
23
21
|
const { status, disabled } = React.useContext(context.HvFormElementContext);
|
|
24
22
|
const { input } = React.useContext(context.HvFormElementDescriptorsContext);
|
|
25
23
|
const displayIcon = isVisible ?? (showWhen == null || status === showWhen);
|
|
26
|
-
const
|
|
27
|
-
return
|
|
28
|
-
|
|
24
|
+
const Component = onClick ? ButtonBase.HvButtonBase : "div";
|
|
25
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
26
|
+
Component,
|
|
29
27
|
{
|
|
30
|
-
id,
|
|
31
|
-
focusableWhenDisabled: true,
|
|
32
28
|
ref,
|
|
33
|
-
|
|
34
|
-
tabIndex: -1,
|
|
35
|
-
"aria-controls": input?.[0]?.id,
|
|
29
|
+
"aria-hidden": tabIndex == null || tabIndex < 0 ? true : void 0,
|
|
36
30
|
className: cx(
|
|
37
31
|
classes.root,
|
|
38
32
|
classes.adornment,
|
|
39
|
-
classes.
|
|
33
|
+
classes.icon,
|
|
34
|
+
onClick ? classes.adornmentButton : classes.adornmentIcon,
|
|
40
35
|
{
|
|
41
36
|
[classes.hideIcon]: !displayIcon,
|
|
42
37
|
[classes.disabled]: disabled
|
|
43
38
|
},
|
|
44
39
|
className
|
|
45
40
|
),
|
|
46
|
-
onClick
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
41
|
+
...onClick && {
|
|
42
|
+
disabled,
|
|
43
|
+
tabIndex: tabIndex ?? -1,
|
|
44
|
+
"aria-controls": input?.[0]?.id,
|
|
45
|
+
onClick,
|
|
46
|
+
onMouseDown: (event) => event.preventDefault()
|
|
47
|
+
},
|
|
50
48
|
...others,
|
|
51
|
-
children:
|
|
52
|
-
}
|
|
53
|
-
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
54
|
-
"div",
|
|
55
|
-
{
|
|
56
|
-
id,
|
|
57
|
-
ref,
|
|
58
|
-
className: cx(
|
|
59
|
-
classes.root,
|
|
60
|
-
classes.adornment,
|
|
61
|
-
classes.adornmentIcon,
|
|
62
|
-
{
|
|
63
|
-
[classes.hideIcon]: !displayIcon,
|
|
64
|
-
[classes.disabled]: disabled
|
|
65
|
-
},
|
|
66
|
-
className
|
|
67
|
-
),
|
|
68
|
-
role: "presentation",
|
|
69
|
-
...others,
|
|
70
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.icon, children: icon })
|
|
49
|
+
children: icon
|
|
71
50
|
}
|
|
72
51
|
);
|
|
73
52
|
});
|
|
@@ -2,27 +2,21 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
4
4
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
5
|
-
const focusUtils = require("../../utils/focusUtils.cjs");
|
|
6
5
|
const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvAdornment", {
|
|
7
|
-
root: {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
backgroundColor: "transparent",
|
|
11
|
-
border: "none",
|
|
12
|
-
padding: 0,
|
|
13
|
-
margin: 0
|
|
6
|
+
root: {
|
|
7
|
+
width: 32,
|
|
8
|
+
height: 30
|
|
14
9
|
},
|
|
15
|
-
|
|
10
|
+
/** @deprecated use `classes.root` */
|
|
11
|
+
icon: {},
|
|
12
|
+
/** @deprecated use `classes.root` */
|
|
13
|
+
adornment: {},
|
|
14
|
+
/** @deprecated use `classes.root` */
|
|
15
|
+
adornmentIcon: {},
|
|
16
16
|
hideIcon: { display: "none" },
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
"&:focus": {
|
|
20
|
-
...focusUtils.outlineStyles
|
|
21
|
-
}
|
|
22
|
-
},
|
|
17
|
+
/** @deprecated use `classes.root` */
|
|
18
|
+
adornmentButton: {},
|
|
23
19
|
disabled: {
|
|
24
|
-
"&$adornmentButton": { cursor: "not-allowed" },
|
|
25
|
-
"&$adornmentIcon": { cursor: "not-allowed" },
|
|
26
20
|
"& svg *.color0": { fill: uikitStyles.theme.colors.secondary_60 }
|
|
27
21
|
}
|
|
28
22
|
});
|
package/dist/cjs/Input/Input.cjs
CHANGED
|
@@ -54,7 +54,7 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
|
|
|
54
54
|
id,
|
|
55
55
|
name,
|
|
56
56
|
value: valueProp,
|
|
57
|
-
defaultValue
|
|
57
|
+
defaultValue,
|
|
58
58
|
required,
|
|
59
59
|
readOnly,
|
|
60
60
|
disabled,
|
|
@@ -99,8 +99,7 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
|
|
|
99
99
|
const suggestionsRef = React.useRef(null);
|
|
100
100
|
const [focused, setFocused] = React.useState(false);
|
|
101
101
|
const isDirty = React.useRef(false);
|
|
102
|
-
const
|
|
103
|
-
const isEmptyValue = value == null || value === "";
|
|
102
|
+
const isEmptyValue = !inputRef.current?.value;
|
|
104
103
|
const [validationState, setValidationState] = useControlled.useControlled(
|
|
105
104
|
status,
|
|
106
105
|
utils$1.validationStates.standBy
|
|
@@ -124,7 +123,6 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
|
|
|
124
123
|
const performValidation = React.useCallback(() => {
|
|
125
124
|
const inputValidity = validations.validateInput(
|
|
126
125
|
inputRef.current,
|
|
127
|
-
String(value),
|
|
128
126
|
required,
|
|
129
127
|
minCharQuantity,
|
|
130
128
|
maxCharQuantity,
|
|
@@ -145,8 +143,7 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
|
|
|
145
143
|
setValidationMessage,
|
|
146
144
|
setValidationState,
|
|
147
145
|
validation,
|
|
148
|
-
validationType
|
|
149
|
-
value
|
|
146
|
+
validationType
|
|
150
147
|
]);
|
|
151
148
|
const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && validations.hasBuiltInValidations(
|
|
152
149
|
required,
|
|
@@ -200,7 +197,6 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
|
|
|
200
197
|
};
|
|
201
198
|
const onChangeHandler = (event, newValue) => {
|
|
202
199
|
isDirty.current = true;
|
|
203
|
-
setValue(newValue);
|
|
204
200
|
onChange?.(event, newValue);
|
|
205
201
|
if (canShowSuggestions) {
|
|
206
202
|
suggestionHandler(newValue);
|
|
@@ -210,12 +206,12 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
|
|
|
210
206
|
if (eventTargetIsInsideContainer(suggestionsRef.current, event)) return;
|
|
211
207
|
setFocused(false);
|
|
212
208
|
const inputValidity = performValidation();
|
|
213
|
-
onBlur?.(event,
|
|
209
|
+
onBlur?.(event, event.target.value, inputValidity);
|
|
214
210
|
};
|
|
215
211
|
const onFocusHandler = (event) => {
|
|
216
212
|
setFocused(true);
|
|
217
213
|
setValidationState(utils$1.validationStates.standBy);
|
|
218
|
-
onFocus?.(event,
|
|
214
|
+
onFocus?.(event, event.target.value);
|
|
219
215
|
};
|
|
220
216
|
const getSuggestions = (li) => {
|
|
221
217
|
const listEl = document.getElementById(
|
|
@@ -232,13 +228,14 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
|
|
|
232
228
|
}
|
|
233
229
|
};
|
|
234
230
|
const onKeyDownHandler = (event) => {
|
|
231
|
+
const { value } = event.currentTarget;
|
|
235
232
|
if (keyboardUtils.isKey(event, "ArrowDown") && hasSuggestions) {
|
|
236
233
|
const li = getSuggestions(0);
|
|
237
234
|
li?.focus();
|
|
238
235
|
} else if (keyboardUtils.isKey(event, "Enter")) {
|
|
239
|
-
onEnter?.(event,
|
|
236
|
+
onEnter?.(event, value);
|
|
240
237
|
}
|
|
241
|
-
onKeyDown?.(event,
|
|
238
|
+
onKeyDown?.(event, value);
|
|
242
239
|
};
|
|
243
240
|
const onContainerBlurHandler = (event) => {
|
|
244
241
|
if (event.relatedTarget) {
|
|
@@ -248,8 +245,7 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
|
|
|
248
245
|
}, 10);
|
|
249
246
|
}
|
|
250
247
|
};
|
|
251
|
-
const
|
|
252
|
-
const showClear = !disabled && !readOnly && !disableClear && !isEmptyValue && (!hasOnEnter || type !== "search" || disableSearchButton || validationState !== utils$1.validationStates.standBy);
|
|
248
|
+
const showClear = !disabled && !readOnly && !disableClear && !isEmptyValue && (!onEnter || type !== "search" || disableSearchButton || validationState !== utils$1.validationStates.standBy);
|
|
253
249
|
const showSearchIcon = type === "search" && !disableSearchButton;
|
|
254
250
|
const showRevealPasswordButton = type === "password" && !disableRevealPassword;
|
|
255
251
|
const handleClear = React.useCallback(
|
|
@@ -289,42 +285,27 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
|
|
|
289
285
|
elementId,
|
|
290
286
|
cx
|
|
291
287
|
]);
|
|
292
|
-
const handleSearch = React.useCallback(
|
|
293
|
-
(event) => {
|
|
294
|
-
onEnter?.(event, String(value));
|
|
295
|
-
},
|
|
296
|
-
[onEnter, value]
|
|
297
|
-
);
|
|
298
288
|
const searchButton = React.useMemo(() => {
|
|
299
|
-
const reallyShowIt = showSearchIcon && (isEmptyValue ||
|
|
300
|
-
if (!reallyShowIt)
|
|
301
|
-
return null;
|
|
302
|
-
}
|
|
289
|
+
const reallyShowIt = showSearchIcon && (isEmptyValue || onEnter && validationState === utils$1.validationStates.standBy);
|
|
290
|
+
if (!reallyShowIt) return null;
|
|
303
291
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
304
292
|
Adornment.HvAdornment,
|
|
305
293
|
{
|
|
306
294
|
className: classes.adornmentButton,
|
|
307
|
-
onClick:
|
|
308
|
-
|
|
309
|
-
icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Search, {})
|
|
295
|
+
onClick: onEnter && ((evt) => onEnter?.(evt, inputRef.current?.value ?? "")),
|
|
296
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Search, { title: labels.searchButtonLabel })
|
|
310
297
|
}
|
|
311
298
|
);
|
|
312
299
|
}, [
|
|
313
300
|
showSearchIcon,
|
|
314
301
|
isEmptyValue,
|
|
315
|
-
|
|
302
|
+
onEnter,
|
|
316
303
|
validationState,
|
|
317
304
|
classes.adornmentButton,
|
|
318
|
-
|
|
319
|
-
labels?.searchButtonLabel
|
|
305
|
+
labels.searchButtonLabel
|
|
320
306
|
]);
|
|
321
|
-
const handleRevealPassword = React.useCallback(() => {
|
|
322
|
-
setRevealPassword(!revealPassword);
|
|
323
|
-
}, [revealPassword]);
|
|
324
307
|
const revealPasswordButton = React.useMemo(() => {
|
|
325
|
-
if (!showRevealPasswordButton)
|
|
326
|
-
return null;
|
|
327
|
-
}
|
|
308
|
+
if (!showRevealPasswordButton) return null;
|
|
328
309
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
329
310
|
Tooltip.HvTooltip,
|
|
330
311
|
{
|
|
@@ -335,10 +316,12 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
|
|
|
335
316
|
Adornment.HvAdornment,
|
|
336
317
|
{
|
|
337
318
|
className: classes.adornmentButton,
|
|
338
|
-
onClick:
|
|
319
|
+
onClick: () => setRevealPassword((s) => !s),
|
|
339
320
|
"aria-label": labels?.revealPasswordButtonLabel,
|
|
340
321
|
"aria-controls": setId.setId(elementId, "input"),
|
|
341
|
-
icon: revealPassword ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.PreviewOff, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Preview, {})
|
|
322
|
+
icon: revealPassword ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.PreviewOff, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Preview, {}),
|
|
323
|
+
tabIndex: 0,
|
|
324
|
+
...{ selected: revealPassword }
|
|
342
325
|
}
|
|
343
326
|
)
|
|
344
327
|
}
|
|
@@ -350,28 +333,23 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
|
|
|
350
333
|
labels?.revealPasswordButtonClickToShowTooltip,
|
|
351
334
|
labels?.revealPasswordButtonLabel,
|
|
352
335
|
classes.adornmentButton,
|
|
353
|
-
handleRevealPassword,
|
|
354
336
|
elementId
|
|
355
337
|
]);
|
|
356
338
|
const validationIcon = React.useMemo(() => {
|
|
357
|
-
if (!showValidationIcon)
|
|
358
|
-
|
|
359
|
-
}
|
|
360
|
-
if (!utils$1.isValid(validationState)) {
|
|
361
|
-
return null;
|
|
362
|
-
}
|
|
339
|
+
if (!showValidationIcon) return null;
|
|
340
|
+
if (!utils$1.isValid(validationState)) return null;
|
|
363
341
|
return /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Success, { color: "positive", className: classes.icon });
|
|
364
342
|
}, [showValidationIcon, validationState, classes.icon]);
|
|
365
343
|
const customIconEl = React.useMemo(
|
|
366
|
-
() => React.isValidElement(endAdornment)
|
|
344
|
+
() => React.isValidElement(endAdornment) ? React.cloneElement(endAdornment, {
|
|
367
345
|
className: cx(endAdornment.props.className, classes.icon)
|
|
368
|
-
}),
|
|
346
|
+
}) : endAdornment,
|
|
369
347
|
[classes.icon, endAdornment, cx]
|
|
370
348
|
);
|
|
371
349
|
const adornments = React.useMemo(() => {
|
|
372
350
|
if (!clearButton && !revealPasswordButton && !searchButton && !validationIcon && !customIconEl)
|
|
373
351
|
return null;
|
|
374
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.adornmentsBox,
|
|
352
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.adornmentsBox, children: [
|
|
375
353
|
clearButton,
|
|
376
354
|
revealPasswordButton,
|
|
377
355
|
searchButton,
|
|
@@ -435,7 +413,8 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
|
|
|
435
413
|
{
|
|
436
414
|
id: hasLabel || showClear || showRevealPasswordButton ? setId.setId(elementId, "input") : setId.setId(id, "input"),
|
|
437
415
|
name,
|
|
438
|
-
value,
|
|
416
|
+
value: valueProp,
|
|
417
|
+
defaultValue,
|
|
439
418
|
required,
|
|
440
419
|
readOnly,
|
|
441
420
|
disabled,
|
|
@@ -461,13 +440,12 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
|
|
|
461
440
|
"aria-errormessage": errorMessageId,
|
|
462
441
|
"aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : description ? setId.setId(elementId, "description") : void 0,
|
|
463
442
|
"aria-controls": canShowSuggestions ? setId.setId(elementId, "suggestions") : void 0,
|
|
464
|
-
ref: inputRef,
|
|
465
443
|
// prevent browsers auto-fill/suggestions when we have our own
|
|
466
444
|
autoComplete: canShowSuggestions ? "off" : void 0,
|
|
467
445
|
onFocus: (event) => {
|
|
468
446
|
inputProps.onFocus?.(event);
|
|
469
447
|
if (canShowSuggestions && suggestOnFocus) {
|
|
470
|
-
suggestionHandler(
|
|
448
|
+
suggestionHandler(event.currentTarget.value);
|
|
471
449
|
}
|
|
472
450
|
},
|
|
473
451
|
onClick: (event) => {
|
|
@@ -476,7 +454,7 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
|
|
|
476
454
|
},
|
|
477
455
|
...inputProps
|
|
478
456
|
},
|
|
479
|
-
|
|
457
|
+
ref: forkedRef,
|
|
480
458
|
endAdornment: adornments,
|
|
481
459
|
...others
|
|
482
460
|
}
|
package/dist/cjs/List/List.cjs
CHANGED
|
@@ -11,9 +11,9 @@ const List_styles = require("./List.styles.cjs");
|
|
|
11
11
|
const useSelectableList = require("./useSelectableList.cjs");
|
|
12
12
|
const utils = require("./utils.cjs");
|
|
13
13
|
const CheckBox = require("../CheckBox/CheckBox.cjs");
|
|
14
|
+
const Radio = require("../Radio/Radio.cjs");
|
|
14
15
|
const OverflowTooltip = require("../OverflowTooltip/OverflowTooltip.cjs");
|
|
15
16
|
const Link = require("../Link/Link.cjs");
|
|
16
|
-
const Radio = require("../Radio/Radio.cjs");
|
|
17
17
|
const ListContainer = require("../ListContainer/ListContainer.cjs");
|
|
18
18
|
const ListItem = require("../ListContainer/ListItem/ListItem.cjs");
|
|
19
19
|
const DEFAULT_LABELS = {
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
4
4
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
5
|
-
const BaseDropdown_styles = require("../BaseDropdown/BaseDropdown.styles.cjs");
|
|
6
|
-
require("../BaseDropdown/BaseDropdown.cjs");
|
|
7
5
|
const Input_styles = require("../Input/Input.styles.cjs");
|
|
8
6
|
require("../Input/Input.cjs");
|
|
7
|
+
const BaseDropdown_styles = require("../BaseDropdown/BaseDropdown.styles.cjs");
|
|
8
|
+
require("../BaseDropdown/BaseDropdown.cjs");
|
|
9
9
|
const hoverColor = uikitStyles.theme.colors.atmo3;
|
|
10
10
|
const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvPagination", {
|
|
11
11
|
/** Styles applied to the component root class. */
|
|
@@ -4,10 +4,10 @@ const jsxRuntime = require("react/jsx-runtime");
|
|
|
4
4
|
const React = require("react");
|
|
5
5
|
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
6
6
|
const Select_styles = require("./Select.styles.cjs");
|
|
7
|
-
const ListItem = require("../ListContainer/ListItem/ListItem.cjs");
|
|
8
7
|
const BaseDropdown = require("../BaseDropdown/BaseDropdown.cjs");
|
|
9
8
|
const Panel = require("../Panel/Panel.cjs");
|
|
10
9
|
const SelectionList = require("../SelectionList/SelectionList.cjs");
|
|
10
|
+
const ListItem = require("../ListContainer/ListItem/ListItem.cjs");
|
|
11
11
|
const Option = ({ ...props }) => /* @__PURE__ */ jsxRuntime.jsx(ListItem.HvListItem, { ...props });
|
|
12
12
|
const HvSelect = (props) => {
|
|
13
13
|
const {
|
|
@@ -10,7 +10,7 @@ const TableBody_styles = require("./TableBody.styles.cjs");
|
|
|
10
10
|
const Focus = require("../../Focus/Focus.cjs");
|
|
11
11
|
const tableSectionContext = {
|
|
12
12
|
type: "body",
|
|
13
|
-
filterClassName: "
|
|
13
|
+
filterClassName: "_trgrid"
|
|
14
14
|
};
|
|
15
15
|
const defaultComponent = "tbody";
|
|
16
16
|
const HvTableBody = React.forwardRef(
|
|
@@ -36,22 +36,21 @@ const HvTableBody = React.forwardRef(
|
|
|
36
36
|
role: Component === defaultComponent ? null : "rowgroup",
|
|
37
37
|
...others,
|
|
38
38
|
children: withNavigation ? React.Children.map(children, (element) => {
|
|
39
|
-
if (React.isValidElement(element))
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
}
|
|
39
|
+
if (!React.isValidElement(element)) return void 0;
|
|
40
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
41
|
+
Focus.HvFocus,
|
|
42
|
+
{
|
|
43
|
+
id: `my-id-${element.key}`,
|
|
44
|
+
rootRef: bodyRef,
|
|
45
|
+
strategy: "grid",
|
|
46
|
+
filterClass: tableSectionContext.filterClassName,
|
|
47
|
+
navigationJump: 1,
|
|
48
|
+
focusDisabled: false,
|
|
49
|
+
selected: element.props.selected,
|
|
50
|
+
children: element
|
|
51
|
+
},
|
|
52
|
+
`row-${element.key}`
|
|
53
|
+
);
|
|
55
54
|
}) : children
|
|
56
55
|
}
|
|
57
56
|
) });
|
|
@@ -2,18 +2,18 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
4
4
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
5
|
-
const TableContainer_styles = require("../Table/TableContainer/TableContainer.styles.cjs");
|
|
6
|
-
require("../Table/TableContainer/TableContainer.cjs");
|
|
7
|
-
const TableHeader_styles = require("../Table/TableHeader/TableHeader.styles.cjs");
|
|
8
|
-
require("../Table/TableHeader/TableHeader.cjs");
|
|
9
|
-
const TableRow_styles = require("../Table/TableRow/TableRow.styles.cjs");
|
|
10
|
-
require("../Table/TableRow/TableRow.cjs");
|
|
11
|
-
const TableCell_styles = require("../Table/TableCell/TableCell.styles.cjs");
|
|
12
|
-
require("../Table/TableCell/TableCell.cjs");
|
|
13
|
-
const BulkActions_styles = require("../BulkActions/BulkActions.styles.cjs");
|
|
14
|
-
require("../BulkActions/BulkActions.cjs");
|
|
15
5
|
const Pagination_styles = require("../Pagination/Pagination.styles.cjs");
|
|
16
6
|
require("../Pagination/Pagination.cjs");
|
|
7
|
+
const BulkActions_styles = require("../BulkActions/BulkActions.styles.cjs");
|
|
8
|
+
require("../BulkActions/BulkActions.cjs");
|
|
9
|
+
const TableCell_styles = require("../Table/TableCell/TableCell.styles.cjs");
|
|
10
|
+
require("../Table/TableCell/TableCell.cjs");
|
|
11
|
+
const TableRow_styles = require("../Table/TableRow/TableRow.styles.cjs");
|
|
12
|
+
require("../Table/TableRow/TableRow.cjs");
|
|
13
|
+
const TableHeader_styles = require("../Table/TableHeader/TableHeader.styles.cjs");
|
|
14
|
+
require("../Table/TableHeader/TableHeader.cjs");
|
|
15
|
+
const TableContainer_styles = require("../Table/TableContainer/TableContainer.styles.cjs");
|
|
16
|
+
require("../Table/TableContainer/TableContainer.cjs");
|
|
17
17
|
const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableSection", {
|
|
18
18
|
root: {},
|
|
19
19
|
header: {
|