@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
package/dist/esm/Input/Input.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { useRef, useState, useMemo, useCallback,
|
|
2
|
+
import { useRef, useState, useMemo, useCallback, cloneElement, isValidElement, useEffect } from "react";
|
|
3
3
|
import { useForkRef } from "@mui/material/utils";
|
|
4
4
|
import { CloseXS, Search, PreviewOff, Preview, Success } from "@hitachivantara/uikit-react-icons";
|
|
5
5
|
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
|
|
@@ -53,7 +53,7 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
|
|
|
53
53
|
id,
|
|
54
54
|
name,
|
|
55
55
|
value: valueProp,
|
|
56
|
-
defaultValue
|
|
56
|
+
defaultValue,
|
|
57
57
|
required,
|
|
58
58
|
readOnly,
|
|
59
59
|
disabled,
|
|
@@ -98,8 +98,7 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
|
|
|
98
98
|
const suggestionsRef = useRef(null);
|
|
99
99
|
const [focused, setFocused] = useState(false);
|
|
100
100
|
const isDirty = useRef(false);
|
|
101
|
-
const
|
|
102
|
-
const isEmptyValue = value == null || value === "";
|
|
101
|
+
const isEmptyValue = !inputRef.current?.value;
|
|
103
102
|
const [validationState, setValidationState] = useControlled(
|
|
104
103
|
status,
|
|
105
104
|
validationStates.standBy
|
|
@@ -123,7 +122,6 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
|
|
|
123
122
|
const performValidation = useCallback(() => {
|
|
124
123
|
const inputValidity = validateInput(
|
|
125
124
|
inputRef.current,
|
|
126
|
-
String(value),
|
|
127
125
|
required,
|
|
128
126
|
minCharQuantity,
|
|
129
127
|
maxCharQuantity,
|
|
@@ -144,8 +142,7 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
|
|
|
144
142
|
setValidationMessage,
|
|
145
143
|
setValidationState,
|
|
146
144
|
validation,
|
|
147
|
-
validationType
|
|
148
|
-
value
|
|
145
|
+
validationType
|
|
149
146
|
]);
|
|
150
147
|
const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && hasBuiltInValidations(
|
|
151
148
|
required,
|
|
@@ -199,7 +196,6 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
|
|
|
199
196
|
};
|
|
200
197
|
const onChangeHandler = (event, newValue) => {
|
|
201
198
|
isDirty.current = true;
|
|
202
|
-
setValue(newValue);
|
|
203
199
|
onChange?.(event, newValue);
|
|
204
200
|
if (canShowSuggestions) {
|
|
205
201
|
suggestionHandler(newValue);
|
|
@@ -209,12 +205,12 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
|
|
|
209
205
|
if (eventTargetIsInsideContainer(suggestionsRef.current, event)) return;
|
|
210
206
|
setFocused(false);
|
|
211
207
|
const inputValidity = performValidation();
|
|
212
|
-
onBlur?.(event,
|
|
208
|
+
onBlur?.(event, event.target.value, inputValidity);
|
|
213
209
|
};
|
|
214
210
|
const onFocusHandler = (event) => {
|
|
215
211
|
setFocused(true);
|
|
216
212
|
setValidationState(validationStates.standBy);
|
|
217
|
-
onFocus?.(event,
|
|
213
|
+
onFocus?.(event, event.target.value);
|
|
218
214
|
};
|
|
219
215
|
const getSuggestions = (li) => {
|
|
220
216
|
const listEl = document.getElementById(
|
|
@@ -231,13 +227,14 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
|
|
|
231
227
|
}
|
|
232
228
|
};
|
|
233
229
|
const onKeyDownHandler = (event) => {
|
|
230
|
+
const { value } = event.currentTarget;
|
|
234
231
|
if (isKey(event, "ArrowDown") && hasSuggestions) {
|
|
235
232
|
const li = getSuggestions(0);
|
|
236
233
|
li?.focus();
|
|
237
234
|
} else if (isKey(event, "Enter")) {
|
|
238
|
-
onEnter?.(event,
|
|
235
|
+
onEnter?.(event, value);
|
|
239
236
|
}
|
|
240
|
-
onKeyDown?.(event,
|
|
237
|
+
onKeyDown?.(event, value);
|
|
241
238
|
};
|
|
242
239
|
const onContainerBlurHandler = (event) => {
|
|
243
240
|
if (event.relatedTarget) {
|
|
@@ -247,8 +244,7 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
|
|
|
247
244
|
}, 10);
|
|
248
245
|
}
|
|
249
246
|
};
|
|
250
|
-
const
|
|
251
|
-
const showClear = !disabled && !readOnly && !disableClear && !isEmptyValue && (!hasOnEnter || type !== "search" || disableSearchButton || validationState !== validationStates.standBy);
|
|
247
|
+
const showClear = !disabled && !readOnly && !disableClear && !isEmptyValue && (!onEnter || type !== "search" || disableSearchButton || validationState !== validationStates.standBy);
|
|
252
248
|
const showSearchIcon = type === "search" && !disableSearchButton;
|
|
253
249
|
const showRevealPasswordButton = type === "password" && !disableRevealPassword;
|
|
254
250
|
const handleClear = useCallback(
|
|
@@ -288,42 +284,27 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
|
|
|
288
284
|
elementId,
|
|
289
285
|
cx
|
|
290
286
|
]);
|
|
291
|
-
const handleSearch = useCallback(
|
|
292
|
-
(event) => {
|
|
293
|
-
onEnter?.(event, String(value));
|
|
294
|
-
},
|
|
295
|
-
[onEnter, value]
|
|
296
|
-
);
|
|
297
287
|
const searchButton = useMemo(() => {
|
|
298
|
-
const reallyShowIt = showSearchIcon && (isEmptyValue ||
|
|
299
|
-
if (!reallyShowIt)
|
|
300
|
-
return null;
|
|
301
|
-
}
|
|
288
|
+
const reallyShowIt = showSearchIcon && (isEmptyValue || onEnter && validationState === validationStates.standBy);
|
|
289
|
+
if (!reallyShowIt) return null;
|
|
302
290
|
return /* @__PURE__ */ jsx(
|
|
303
291
|
HvAdornment,
|
|
304
292
|
{
|
|
305
293
|
className: classes.adornmentButton,
|
|
306
|
-
onClick:
|
|
307
|
-
|
|
308
|
-
icon: /* @__PURE__ */ jsx(Search, {})
|
|
294
|
+
onClick: onEnter && ((evt) => onEnter?.(evt, inputRef.current?.value ?? "")),
|
|
295
|
+
icon: /* @__PURE__ */ jsx(Search, { title: labels.searchButtonLabel })
|
|
309
296
|
}
|
|
310
297
|
);
|
|
311
298
|
}, [
|
|
312
299
|
showSearchIcon,
|
|
313
300
|
isEmptyValue,
|
|
314
|
-
|
|
301
|
+
onEnter,
|
|
315
302
|
validationState,
|
|
316
303
|
classes.adornmentButton,
|
|
317
|
-
|
|
318
|
-
labels?.searchButtonLabel
|
|
304
|
+
labels.searchButtonLabel
|
|
319
305
|
]);
|
|
320
|
-
const handleRevealPassword = useCallback(() => {
|
|
321
|
-
setRevealPassword(!revealPassword);
|
|
322
|
-
}, [revealPassword]);
|
|
323
306
|
const revealPasswordButton = useMemo(() => {
|
|
324
|
-
if (!showRevealPasswordButton)
|
|
325
|
-
return null;
|
|
326
|
-
}
|
|
307
|
+
if (!showRevealPasswordButton) return null;
|
|
327
308
|
return /* @__PURE__ */ jsx(
|
|
328
309
|
HvTooltip,
|
|
329
310
|
{
|
|
@@ -334,10 +315,12 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
|
|
|
334
315
|
HvAdornment,
|
|
335
316
|
{
|
|
336
317
|
className: classes.adornmentButton,
|
|
337
|
-
onClick:
|
|
318
|
+
onClick: () => setRevealPassword((s) => !s),
|
|
338
319
|
"aria-label": labels?.revealPasswordButtonLabel,
|
|
339
320
|
"aria-controls": setId(elementId, "input"),
|
|
340
|
-
icon: revealPassword ? /* @__PURE__ */ jsx(PreviewOff, {}) : /* @__PURE__ */ jsx(Preview, {})
|
|
321
|
+
icon: revealPassword ? /* @__PURE__ */ jsx(PreviewOff, {}) : /* @__PURE__ */ jsx(Preview, {}),
|
|
322
|
+
tabIndex: 0,
|
|
323
|
+
...{ selected: revealPassword }
|
|
341
324
|
}
|
|
342
325
|
)
|
|
343
326
|
}
|
|
@@ -349,28 +332,23 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
|
|
|
349
332
|
labels?.revealPasswordButtonClickToShowTooltip,
|
|
350
333
|
labels?.revealPasswordButtonLabel,
|
|
351
334
|
classes.adornmentButton,
|
|
352
|
-
handleRevealPassword,
|
|
353
335
|
elementId
|
|
354
336
|
]);
|
|
355
337
|
const validationIcon = useMemo(() => {
|
|
356
|
-
if (!showValidationIcon)
|
|
357
|
-
|
|
358
|
-
}
|
|
359
|
-
if (!isValid(validationState)) {
|
|
360
|
-
return null;
|
|
361
|
-
}
|
|
338
|
+
if (!showValidationIcon) return null;
|
|
339
|
+
if (!isValid(validationState)) return null;
|
|
362
340
|
return /* @__PURE__ */ jsx(Success, { color: "positive", className: classes.icon });
|
|
363
341
|
}, [showValidationIcon, validationState, classes.icon]);
|
|
364
342
|
const customIconEl = useMemo(
|
|
365
|
-
() => isValidElement(endAdornment)
|
|
343
|
+
() => isValidElement(endAdornment) ? cloneElement(endAdornment, {
|
|
366
344
|
className: cx(endAdornment.props.className, classes.icon)
|
|
367
|
-
}),
|
|
345
|
+
}) : endAdornment,
|
|
368
346
|
[classes.icon, endAdornment, cx]
|
|
369
347
|
);
|
|
370
348
|
const adornments = useMemo(() => {
|
|
371
349
|
if (!clearButton && !revealPasswordButton && !searchButton && !validationIcon && !customIconEl)
|
|
372
350
|
return null;
|
|
373
|
-
return /* @__PURE__ */ jsxs("div", { className: classes.adornmentsBox,
|
|
351
|
+
return /* @__PURE__ */ jsxs("div", { className: classes.adornmentsBox, children: [
|
|
374
352
|
clearButton,
|
|
375
353
|
revealPasswordButton,
|
|
376
354
|
searchButton,
|
|
@@ -434,7 +412,8 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
|
|
|
434
412
|
{
|
|
435
413
|
id: hasLabel || showClear || showRevealPasswordButton ? setId(elementId, "input") : setId(id, "input"),
|
|
436
414
|
name,
|
|
437
|
-
value,
|
|
415
|
+
value: valueProp,
|
|
416
|
+
defaultValue,
|
|
438
417
|
required,
|
|
439
418
|
readOnly,
|
|
440
419
|
disabled,
|
|
@@ -460,13 +439,12 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
|
|
|
460
439
|
"aria-errormessage": errorMessageId,
|
|
461
440
|
"aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : description ? setId(elementId, "description") : void 0,
|
|
462
441
|
"aria-controls": canShowSuggestions ? setId(elementId, "suggestions") : void 0,
|
|
463
|
-
ref: inputRef,
|
|
464
442
|
// prevent browsers auto-fill/suggestions when we have our own
|
|
465
443
|
autoComplete: canShowSuggestions ? "off" : void 0,
|
|
466
444
|
onFocus: (event) => {
|
|
467
445
|
inputProps.onFocus?.(event);
|
|
468
446
|
if (canShowSuggestions && suggestOnFocus) {
|
|
469
|
-
suggestionHandler(
|
|
447
|
+
suggestionHandler(event.currentTarget.value);
|
|
470
448
|
}
|
|
471
449
|
},
|
|
472
450
|
onClick: (event) => {
|
|
@@ -475,7 +453,7 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
|
|
|
475
453
|
},
|
|
476
454
|
...inputProps
|
|
477
455
|
},
|
|
478
|
-
|
|
456
|
+
ref: forkedRef,
|
|
479
457
|
endAdornment: adornments,
|
|
480
458
|
...others
|
|
481
459
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sources":["../../../src/Input/Input.tsx"],"sourcesContent":["import {\n cloneElement,\n isValidElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n CloseXS,\n Preview,\n PreviewOff,\n Search,\n Success,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseInput, HvBaseInputProps } from \"../BaseInput\";\nimport {\n computeValidationMessage,\n computeValidationState,\n computeValidationType,\n DEFAULT_ERROR_MESSAGES,\n hasBuiltInValidations,\n HvInputValidity,\n validateInput,\n} from \"../BaseInput/validations\";\nimport {\n HvAdornment,\n HvAdornmentProps,\n HvFormElement,\n HvFormElementProps,\n HvFormStatus,\n HvInfoMessage,\n HvLabel,\n HvWarningText,\n isInvalid,\n isValid,\n validationStates,\n} from \"../FormElement\";\nimport {\n HvSuggestion,\n HvSuggestions,\n HvSuggestionsProps,\n} from \"../FormElement/Suggestions/Suggestions\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useIsMounted } from \"../hooks/useIsMounted\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvTooltip } from \"../Tooltip\";\nimport { fixedForwardRef } from \"../types/generic\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Input.styles\";\n\nexport { staticClasses as inputClasses };\n\nexport type HvInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvValidationMessages {\n /** The value when a validation fails. */\n error?: string;\n /** The message that appears when there are too many characters. */\n maxCharError?: string;\n /** The message that appears when there are too few characters. */\n minCharError?: string;\n /** The message that appears when the input is empty and required. */\n requiredError?: string;\n /** The message that appears when the input is value is incompatible with the expected type. */\n typeMismatchError?: string;\n}\n\nexport interface HvInputSuggestion {\n id: string;\n label: string;\n value?: string;\n}\n\nexport interface HvInputProps<\n InputElement extends HTMLElement = HTMLInputElement | HTMLTextAreaElement,\n> extends Omit<\n HvBaseInputProps,\n \"onChange\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\"\n > {\n /** The form element name. */\n name?: string;\n /** The value of the form element. */\n value?: React.InputHTMLAttributes<InputElement>[\"value\"];\n /** When uncontrolled, defines the initial input value. */\n defaultValue?: React.InputHTMLAttributes<InputElement>[\"value\"];\n /**\n * The label of the form element.\n *\n * The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n */\n label?: React.ReactNode;\n /** Provide additional descriptive text for the form element. */\n description?: React.ReactNode;\n /** Indicates that the form element is disabled. */\n disabled?: boolean;\n /** Indicates that the form element is not editable. */\n readOnly?: boolean;\n /** Indicates that user input is required on the form element. */\n required?: boolean;\n /**\n * The status of the form element.\n *\n * Valid is correct, invalid is incorrect and standBy means no validations have run.\n *\n * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to `checked`, depending of the values of both `required` and `checked`.\n */\n status?: HvFormStatus;\n /** The error message to show when `status` is \"invalid\". */\n statusMessage?: string;\n /**\n * Callback called when the user submits the value by pressing Enter/Return.\n *\n * Also called when the search button is clicked (when type is \"search\").\n */\n /**\n * The function that will be executed onChange, allows modification of the input,\n * it receives the value. If a new value should be presented it must returned it.\n */\n onChange?: (event: React.ChangeEvent<InputElement>, value: string) => void;\n // onEnter?: (event: React.KeyboardEvent<InputElement>, value: string) => void;\n onEnter?: (\n event: React.KeyboardEvent<InputElement> | React.MouseEvent,\n value: string,\n ) => void;\n /**\n * The function that will be executed onBlur, allows checking the validation state,\n * it receives the value and the validation state.\n */\n onBlur?: (\n event: React.FocusEvent<InputElement>,\n value: string,\n validationState: HvInputValidity,\n ) => void;\n /**\n * The function that will be executed onBlur, allows checking the value state,\n * it receives the value.\n */\n onFocus?: (event: React.FocusEvent<InputElement>, value: string) => void;\n /**\n * The function that will be executed onKeyDown, allows checking the value state,\n * it receives the event and value.\n */\n onKeyDown?: (event: React.KeyboardEvent<InputElement>, value: string) => void;\n /** The input type. */\n type?: React.HTMLInputTypeAttribute;\n /** The placeholder value of the input. */\n placeholder?: string;\n /** Internal labels?. */\n labels?: HvInputLabels & Record<string, any>;\n /** An Object containing the various texts associated with the input. */\n validationMessages?: HvValidationMessages;\n /** The function that will be executed to received an array of objects that has a label and id to create list of suggestion */\n suggestionListCallback?: (value: string) => HvInputSuggestion[] | null;\n /**\n * If enabled, the suggestions list will be rendered using a portal.\n * If disabled, it will be under the DOM hierarchy of the parent component.\n * @default false\n * */\n enablePortal?: boolean;\n /**\n * Whether the suggestions should be triggered once the input is focused and not only when typing.\n * @default false\n * */\n suggestOnFocus?: boolean;\n /**\n * The custom validation function, it receives the value and must return\n * either `true` for valid or `false` for invalid, default validations would only\n * occur if this function is null or undefined\n */\n validation?: (value: string) => boolean;\n /** If `true` it should autofocus. */\n autoFocus?: boolean;\n /** If `true` the clear button is disabled. */\n disableClear?: boolean; // TODO - rename in v6 since it doesn't disable but hides the button\n /** If `true` the reveal password button is disabled. Valid only when type is \"password\". */\n disableRevealPassword?: boolean; // TODO - rename in v6 since it doesn't disable but hides the button\n /** If `true` the search button is disabled. Valid only when type is \"search\". */\n disableSearchButton?: boolean; // TODO - rename in v6 since it doesn't disable but hides the button\n /**\n * If `true` the validation icon adornment is visible. Defaults to `false`.\n *\n * Currently, DS specifications define only a positive feedback icon;\n * errors are signaled through the border style and by displaying the error message.\n */\n showValidationIcon?: boolean;\n /** A custom icon to be added into the input. */\n endAdornment?: React.ReactNode;\n /** The maximum allowed length of the characters, if this value is null no check will be performed. */\n maxCharQuantity?: number;\n /** The minimum allowed length of the characters, if this value is null no check will be perform. */\n minCharQuantity?: number;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvInputClasses;\n}\n\nconst DEFAULT_LABELS = {\n /** The label of the clear button. */\n clearButtonLabel: \"Clear the text\",\n /** The label of the reveal password button. */\n revealPasswordButtonLabel: \"Reveal password\",\n /** The tooltip of the reveal password button when the password is hidden. */\n revealPasswordButtonClickToShowTooltip: \"Click to show password.\",\n /** The tooltip of the reveal password button when the password is revealed. */\n revealPasswordButtonClickToHideTooltip: \"Click to hide password.\",\n /** The label of the search button. */\n searchButtonLabel: \"Search\",\n};\n\nexport type HvInputLabels = Partial<typeof DEFAULT_LABELS>;\n\nfunction eventTargetIsInsideContainer(\n container: HTMLElement | null,\n event: React.FocusEvent<any>,\n) {\n return !!container?.contains(event.relatedTarget);\n}\n\n/** Changes a given `input`'s `value`, triggering its `onChange` */\nconst changeInputValue = (input: HTMLInputElement | null, value = \"\") => {\n const event = new Event(\"input\", { bubbles: true });\n\n /** Original `input.value` setter (React overrides it). */\n const setInputValue = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n \"value\",\n )?.set;\n\n setInputValue?.call(input, value);\n input?.dispatchEvent(event);\n};\n\n/**\n * A text input box is a graphical control element intended to enable the user to input text information to be used by the software.\n */\nexport const HvInput = fixedForwardRef(function HvInput<\n InputElement extends HTMLElement = HTMLInputElement | HTMLTextAreaElement,\n>(props: HvInputProps<InputElement>, ref: React.Ref<InputElement>) {\n const {\n classes: classesProp,\n className,\n id,\n name,\n value: valueProp,\n defaultValue = \"\",\n required,\n readOnly,\n disabled,\n enablePortal = false,\n suggestOnFocus = false,\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n onChange,\n onEnter,\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n type = \"text\",\n placeholder,\n autoFocus = false,\n labels: labelsProp,\n validationMessages,\n disableClear = false,\n disableRevealPassword = false,\n disableSearchButton = false,\n endAdornment,\n maxCharQuantity,\n minCharQuantity,\n validation,\n showValidationIcon = false,\n suggestionListCallback,\n inputRef: inputRefProp,\n onBlur,\n onFocus,\n onKeyDown,\n inputProps = {},\n ...others\n } = useDefaultProps(\"HvInput\", props);\n const { classes, cx } = useClasses(classesProp);\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n const elementId = useUniqueId(id);\n\n const inputRef = useRef<HTMLInputElement>(null);\n const forkedRef = useForkRef(ref, inputRef, inputRefProp);\n const suggestionsRef = useRef<HTMLDivElement>(null);\n\n const [focused, setFocused] = useState(false);\n\n // Signals that the user has manually edited the input value\n const isDirty = useRef(false);\n\n // Value related state\n const [value, setValue] = useControlled(valueProp, defaultValue);\n\n const isEmptyValue = value == null || value === \"\";\n\n // Validation related state\n const [validationState, setValidationState] = useControlled(\n status,\n validationStates.standBy,\n );\n\n const [validationMessage, setValidationMessage] = useControlled(\n statusMessage,\n \"\",\n );\n\n // validationMessages reference tends to change, as users will not memoize/useState for it;\n // dependencies must be more explicit so we set\n const errorMessages = useMemo(\n () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n validationMessages?.error,\n validationMessages?.requiredError,\n validationMessages?.minCharError,\n validationMessages?.maxCharError,\n validationMessages?.typeMismatchError,\n ],\n );\n\n const validationType = useMemo(() => computeValidationType(type), [type]);\n\n // Validates the input, sets the status and the statusMessage accordingly (if uncontrolled)\n // and returns the validity state of the input.\n const performValidation = useCallback(() => {\n const inputValidity = validateInput(\n inputRef.current,\n String(value),\n required,\n minCharQuantity,\n maxCharQuantity,\n validationType,\n validation,\n );\n\n // This will only run if status is uncontrolled\n setValidationState(computeValidationState(inputValidity, isEmptyValue));\n\n // This will only run if statusMessage is uncontrolled\n setValidationMessage(\n computeValidationMessage(inputValidity, errorMessages),\n );\n\n return inputValidity;\n }, [\n errorMessages,\n isEmptyValue,\n maxCharQuantity,\n minCharQuantity,\n required,\n setValidationMessage,\n setValidationState,\n validation,\n validationType,\n value,\n ]);\n\n // The error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and any of the built-in validations are active\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) ||\n (status === undefined &&\n hasBuiltInValidations(\n required,\n validationType,\n minCharQuantity,\n maxCharQuantity,\n validation,\n inputProps,\n )));\n\n const isStateInvalid = isInvalid(validationState);\n\n // Input type related state\n const [revealPassword, setRevealPassword] = useState(false);\n\n const realType = useMemo(() => {\n if (type === \"password\") {\n return revealPassword ? \"text\" : \"password\";\n }\n\n if (type === \"search\") {\n return \"search\";\n }\n\n return \"text\";\n }, [revealPassword, type]);\n\n // Suggestions related state\n const [suggestionValues, setSuggestionValues] = useState<\n HvSuggestion[] | null\n >(null);\n\n const canShowSuggestions = suggestionListCallback != null;\n const hasSuggestions = !!suggestionValues;\n\n // Miscellaneous state\n const hasLabel = label != null;\n const hasDescription = description != null;\n\n /**\n * Looks for the node that represent the input inside the material tree and focus it.\n */\n const focusInput = () => {\n inputRef.current?.focus();\n };\n\n const isMounted = useIsMounted();\n\n /**\n * Clears the suggestion array.\n */\n const suggestionClearHandler = () => {\n if (isMounted.current) {\n setSuggestionValues(null);\n }\n };\n\n /**\n * Fills of the suggestion array.\n */\n const suggestionHandler = (val: string) => {\n const suggestionsArray = suggestionListCallback?.(val);\n if (suggestionsArray?.[0]?.label) {\n setSuggestionValues(suggestionsArray);\n } else {\n suggestionClearHandler();\n }\n };\n\n /**\n * Executes the user callback adds the selection to the state and clears the suggestions.\n */\n const suggestionSelectedHandler: HvSuggestionsProps[\"onSuggestionSelected\"] =\n (event, item) => {\n const newValue = item.value || (item.label as any);\n\n changeInputValue(inputRef.current, newValue);\n\n focusInput();\n suggestionClearHandler();\n\n if (type === \"search\") {\n // trigger the onEnter callback when the user selects an option in a search box\n onEnter?.(event, newValue);\n }\n };\n\n const onChangeHandler: HvBaseInputProps[\"onChange\"] = (event, newValue) => {\n isDirty.current = true;\n\n // set the input value (only when value is uncontrolled)\n setValue(newValue);\n\n onChange?.(event as any, newValue);\n\n if (canShowSuggestions) {\n // an edge case might be a controlled input whose onChange callback\n // doesn't change the value (or sets another): the suggestionListCallback\n // callback will still receive the original rejected value.\n // a refactor is needed so the suggestionListCallback might be called only\n // when the input is uncontrolled, providing a way to externally control\n // the suggestion values.\n suggestionHandler(newValue);\n }\n };\n\n /**\n * Validates the input updating the state and modifying the info text, also executes\n * the user provided onBlur passing the current validation status and value.\n */\n const onInputBlurHandler: HvBaseInputProps[\"onBlur\"] = (event) => {\n // If the blur is executed when choosing an suggestion it should be ignored.\n if (eventTargetIsInsideContainer(suggestionsRef.current, event)) return;\n\n setFocused(false);\n\n const inputValidity = performValidation();\n\n onBlur?.(event as any, String(value), inputValidity);\n };\n\n /**\n * Updates the state putting again the value from the state because the input value is\n * not automatically manage, it also executes the onFocus function from the user passing the value\n */\n const onFocusHandler: HvBaseInputProps[\"onFocus\"] = (event) => {\n setFocused(true);\n\n // reset validation status to standBy (only when status is uncontrolled)\n setValidationState(validationStates.standBy);\n\n onFocus?.(event as any, String(value));\n };\n\n const getSuggestions = (li: number | null) => {\n // TODO Replace with ref\n const listEl = document.getElementById(\n setId(elementId, \"suggestions-list\") || \"\",\n );\n return li != null ? listEl?.getElementsByTagName(\"li\")?.[li] : listEl;\n };\n\n const onSuggestionKeyDown: HvSuggestionsProps[\"onKeyDown\"] = (event) => {\n if (isKey(event, \"Esc\")) {\n suggestionClearHandler();\n focusInput();\n } else if (isKey(event, \"Tab\")) {\n suggestionClearHandler();\n }\n };\n\n /** Focus the suggestion list when the arrow down is pressed. */\n const onKeyDownHandler: HvBaseInputProps[\"onKeyDown\"] = (event) => {\n if (isKey(event, \"ArrowDown\") && hasSuggestions) {\n const li = getSuggestions(0);\n li?.focus();\n } else if (isKey(event, \"Enter\")) {\n onEnter?.(event as any, String(value));\n }\n\n onKeyDown?.(event as any, String(value));\n };\n\n /** Clears the suggestion list on blur. */\n const onContainerBlurHandler: HvFormElementProps[\"onBlur\"] = (event) => {\n if (event.relatedTarget) {\n setTimeout(() => {\n const list = getSuggestions(null);\n if (!list?.contains(document.activeElement)) suggestionClearHandler();\n }, 10);\n }\n };\n\n const hasOnEnter = onEnter != null;\n\n // show the clear button only if the input is enabled, not read-only, disableClear is false and the input is not empty\n // also, don't show it when the input type is \"search\" and the input is active (standBy)\n const showClear =\n !disabled &&\n !readOnly &&\n !disableClear &&\n !isEmptyValue &&\n (!hasOnEnter ||\n type !== \"search\" ||\n disableSearchButton ||\n validationState !== validationStates.standBy);\n\n const showSearchIcon = type === \"search\" && !disableSearchButton;\n\n const showRevealPasswordButton =\n type === \"password\" && !disableRevealPassword;\n\n /**\n * Clears the input value from the state and refocus the input.\n */\n const handleClear = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n // reset validation status to standBy (only when status is uncontrolled)\n setValidationState(validationStates.standBy);\n\n changeInputValue(inputRef.current, \"\");\n\n // prevent triggering the suggestions when clicking on the clear button when suggestOnFocus is true\n if (canShowSuggestions && suggestOnFocus) event.stopPropagation();\n else {\n // we want to focus the input when clicked and not active\n setTimeout(focusInput);\n }\n },\n [canShowSuggestions, setValidationState, suggestOnFocus],\n );\n\n const clearButton = useMemo(() => {\n if (!showClear) {\n return null;\n }\n\n return (\n <HvAdornment\n // Don't control visibility when the search icon is enabled\n className={cx(classes.adornmentButton, {\n [classes.iconClear]: !showSearchIcon,\n })}\n onClick={handleClear}\n aria-label={labels?.clearButtonLabel}\n aria-controls={setId(elementId, \"input\")}\n icon={<CloseXS />}\n />\n );\n }, [\n showClear,\n classes.adornmentButton,\n classes.iconClear,\n showSearchIcon,\n handleClear,\n labels?.clearButtonLabel,\n elementId,\n cx,\n ]);\n\n /**\n * Calls the onEnter callback and refocus the input.\n */\n const handleSearch = useCallback<NonNullable<HvAdornmentProps[\"onClick\"]>>(\n (event) => {\n onEnter?.(event, String(value));\n },\n [onEnter, value],\n );\n\n const searchButton = useMemo(() => {\n // If the search icon is not actionable, only show it when the input is empty or active\n const reallyShowIt =\n showSearchIcon &&\n (isEmptyValue ||\n (hasOnEnter && validationState === validationStates.standBy));\n\n if (!reallyShowIt) {\n return null;\n }\n\n return (\n <HvAdornment\n className={classes.adornmentButton}\n onClick={hasOnEnter ? handleSearch : undefined}\n aria-label={labels?.searchButtonLabel}\n icon={<Search />}\n />\n );\n }, [\n showSearchIcon,\n isEmptyValue,\n hasOnEnter,\n validationState,\n classes.adornmentButton,\n handleSearch,\n labels?.searchButtonLabel,\n ]);\n\n /**\n * Changes input type and refocus the input.\n */\n const handleRevealPassword = useCallback(() => {\n setRevealPassword(!revealPassword);\n }, [revealPassword]);\n\n const revealPasswordButton = useMemo(() => {\n if (!showRevealPasswordButton) {\n return null;\n }\n\n return (\n <HvTooltip\n disableFocusListener\n disableTouchListener\n title={\n revealPassword\n ? labels?.revealPasswordButtonClickToHideTooltip\n : labels?.revealPasswordButtonClickToShowTooltip\n }\n >\n <HvAdornment\n className={classes.adornmentButton}\n onClick={handleRevealPassword}\n aria-label={labels?.revealPasswordButtonLabel}\n aria-controls={setId(elementId, \"input\")}\n icon={revealPassword ? <PreviewOff /> : <Preview />}\n />\n </HvTooltip>\n );\n }, [\n showRevealPasswordButton,\n revealPassword,\n labels?.revealPasswordButtonClickToHideTooltip,\n labels?.revealPasswordButtonClickToShowTooltip,\n labels?.revealPasswordButtonLabel,\n classes.adornmentButton,\n handleRevealPassword,\n elementId,\n ]);\n\n const validationIcon = useMemo(() => {\n if (!showValidationIcon) {\n return null;\n }\n\n if (!isValid(validationState)) {\n return null;\n }\n\n return <Success color=\"positive\" className={classes.icon} />;\n }, [showValidationIcon, validationState, classes.icon]);\n\n // useMemo to avoid repetitive cloning of the custom icon\n const customIconEl = useMemo(\n () =>\n isValidElement(endAdornment) &&\n cloneElement(endAdornment as React.ReactElement, {\n className: cx(endAdornment.props.className, classes.icon),\n }),\n [classes.icon, endAdornment, cx],\n );\n\n const adornments = useMemo(() => {\n if (\n !clearButton &&\n !revealPasswordButton &&\n !searchButton &&\n !validationIcon &&\n !customIconEl\n )\n return null;\n\n // note: specification implies that the custom icon should be hidden when\n // a validation feedback icon is being shown.\n return (\n <div className={classes.adornmentsBox} aria-hidden=\"true\">\n {clearButton}\n {revealPasswordButton}\n {searchButton}\n {validationIcon || customIconEl}\n </div>\n );\n }, [\n classes.adornmentsBox,\n clearButton,\n customIconEl,\n revealPasswordButton,\n searchButton,\n validationIcon,\n ]);\n\n // run initial validation after first render\n // and also when any validation condition changes\n useEffect(() => {\n if (focused || (!isDirty.current && isEmptyValue)) {\n // skip validation if currently focused or if empty and\n // the user never manually edited the input value\n return;\n }\n\n performValidation();\n }, [focused, isEmptyValue, performValidation]);\n\n const errorMessageId = isStateInvalid\n ? canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage\n : undefined;\n\n return (\n <HvFormElement\n id={id}\n name={name}\n status={validationState}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n className={cx(\n classes.root,\n {\n [classes.hasSuggestions]: hasSuggestions,\n },\n className,\n )}\n onBlur={onContainerBlurHandler}\n >\n {(hasLabel || hasDescription) && (\n <div className={classes.labelContainer}>\n {hasLabel && (\n <HvLabel\n showGutter\n id={setId(elementId, \"label\")}\n className={classes.label}\n htmlFor={setId(elementId, \"input\")}\n label={label}\n />\n )}\n\n {hasDescription && (\n <HvInfoMessage\n id={setId(elementId, \"description\")}\n className={classes.description}\n >\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n <HvBaseInput\n id={\n hasLabel || showClear || showRevealPasswordButton\n ? setId(elementId, \"input\")\n : setId(id, \"input\")\n }\n name={name}\n value={value}\n required={required}\n readOnly={readOnly}\n disabled={disabled}\n onChange={onChangeHandler}\n autoFocus={autoFocus}\n onKeyDown={onKeyDownHandler}\n onBlur={onInputBlurHandler}\n onFocus={onFocusHandler}\n placeholder={placeholder}\n type={realType}\n classes={{\n input: classes.input,\n root: classes.inputRoot,\n focused: classes.inputRootFocused,\n disabled: classes.inputRootDisabled,\n multiline: classes.inputRootMultiline,\n }}\n invalid={isStateInvalid}\n inputProps={{\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-invalid\": isStateInvalid ? true : undefined,\n \"aria-errormessage\": errorMessageId,\n \"aria-describedby\":\n ariaDescribedBy != null\n ? ariaDescribedBy\n : description\n ? setId(elementId, \"description\")\n : undefined,\n \"aria-controls\": canShowSuggestions\n ? setId(elementId, \"suggestions\")\n : undefined,\n\n ref: inputRef,\n\n // prevent browsers auto-fill/suggestions when we have our own\n autoComplete: canShowSuggestions ? \"off\" : undefined,\n\n onFocus: (event) => {\n inputProps.onFocus?.(event);\n\n // trigger suggestions when focusing the input\n if (canShowSuggestions && suggestOnFocus) {\n suggestionHandler(String(value));\n }\n },\n\n onClick: (event) => {\n inputProps.onClick?.(event);\n\n // prevent closing the suggestions when clicking on the input when suggestOnFocus is true\n if (canShowSuggestions && suggestOnFocus) event.stopPropagation();\n },\n\n ...inputProps,\n }}\n inputRef={forkedRef}\n endAdornment={adornments}\n {...others}\n />\n {canShowSuggestions && (\n <>\n {hasSuggestions && (\n <div role=\"presentation\" className={classes.inputExtension} />\n )}\n <HvSuggestions\n id={setId(elementId, \"suggestions\")}\n classes={{\n root: classes.suggestionsContainer,\n list: classes.suggestionList,\n }}\n expanded={hasSuggestions}\n anchorEl={inputRef.current?.parentElement}\n onClose={suggestionClearHandler}\n onKeyDown={onSuggestionKeyDown}\n onSuggestionSelected={suggestionSelectedHandler}\n suggestionValues={suggestionValues}\n enablePortal={enablePortal}\n popperProps={{ ref: suggestionsRef }}\n />\n </>\n )}\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableBorder\n className={classes.error}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n});\n"],"names":["HvInput"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Input.js","sources":["../../../src/Input/Input.tsx"],"sourcesContent":["import {\n cloneElement,\n isValidElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n CloseXS,\n Preview,\n PreviewOff,\n Search,\n Success,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseInput, HvBaseInputProps } from \"../BaseInput\";\nimport {\n computeValidationMessage,\n computeValidationState,\n computeValidationType,\n DEFAULT_ERROR_MESSAGES,\n hasBuiltInValidations,\n HvInputValidity,\n validateInput,\n} from \"../BaseInput/validations\";\nimport type { HvButtonBaseProps } from \"../ButtonBase\";\nimport {\n HvAdornment,\n HvFormElement,\n HvFormElementProps,\n HvFormStatus,\n HvInfoMessage,\n HvLabel,\n HvWarningText,\n isInvalid,\n isValid,\n validationStates,\n} from \"../FormElement\";\nimport {\n HvSuggestion,\n HvSuggestions,\n HvSuggestionsProps,\n} from \"../FormElement/Suggestions/Suggestions\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useIsMounted } from \"../hooks/useIsMounted\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvTooltip } from \"../Tooltip\";\nimport { fixedForwardRef } from \"../types/generic\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Input.styles\";\n\nexport { staticClasses as inputClasses };\n\nexport type HvInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvValidationMessages {\n /** The value when a validation fails. */\n error?: string;\n /** The message that appears when there are too many characters. */\n maxCharError?: string;\n /** The message that appears when there are too few characters. */\n minCharError?: string;\n /** The message that appears when the input is empty and required. */\n requiredError?: string;\n /** The message that appears when the input is value is incompatible with the expected type. */\n typeMismatchError?: string;\n}\n\nexport interface HvInputSuggestion {\n id: string;\n label: string;\n value?: string;\n}\n\nexport interface HvInputProps<\n InputElement extends HTMLElement = HTMLInputElement | HTMLTextAreaElement,\n> extends Omit<\n HvBaseInputProps,\n \"onChange\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\"\n > {\n /** @inheritdoc */\n name?: string;\n /** @inheritdoc */\n value?: React.InputHTMLAttributes<InputElement>[\"value\"];\n /** @inheritdoc */\n defaultValue?: React.InputHTMLAttributes<InputElement>[\"value\"];\n /**\n * The label of the form element.\n *\n * The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n */\n label?: React.ReactNode;\n /** Provide additional descriptive text for the form element. */\n description?: React.ReactNode;\n /** @inheritdoc */\n disabled?: boolean;\n /** @inheritdoc */\n readOnly?: boolean;\n /** @inheritdoc */\n required?: boolean;\n /**\n * The status of the form element.\n *\n * Valid is correct, invalid is incorrect and standBy means no validations have run.\n *\n * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to `checked`, depending of the values of both `required` and `checked`.\n */\n status?: HvFormStatus;\n /** The error message to show when `status` is \"invalid\". */\n statusMessage?: string;\n /** @inheritdoc */\n onChange?: (event: React.ChangeEvent<InputElement>, value: string) => void;\n /**\n * Callback called when the user submits the value by pressing Enter/Return.\n *\n * Also called when the search button is clicked (when `type=\"search\"`).\n */\n onEnter?: (event: React.KeyboardEvent<InputElement>, value: string) => void;\n /**\n * The function that will be executed onBlur, allows checking the validation state,\n * it receives the value and the validation state.\n */\n onBlur?: (\n event: React.FocusEvent<InputElement>,\n value: string,\n validationState: HvInputValidity,\n ) => void;\n /**\n * The function that will be executed onBlur, allows checking the value state,\n * it receives the value.\n */\n onFocus?: (event: React.FocusEvent<InputElement>, value: string) => void;\n /**\n * The function that will be executed onKeyDown, allows checking the value state,\n * it receives the event and value.\n */\n onKeyDown?: (event: React.KeyboardEvent<InputElement>, value: string) => void;\n /** The input type. */\n type?: React.HTMLInputTypeAttribute;\n /** The placeholder value of the input. */\n placeholder?: string;\n /** Internal labels?. */\n labels?: HvInputLabels & Record<string, any>;\n /** An Object containing the various texts associated with the input. */\n validationMessages?: HvValidationMessages;\n /** The function that will be executed to received an array of objects that has a label and id to create list of suggestion */\n suggestionListCallback?: (value: string) => HvInputSuggestion[] | null;\n /**\n * If enabled, the suggestions list will be rendered using a portal.\n * If disabled, it will be under the DOM hierarchy of the parent component.\n * @default false\n * */\n enablePortal?: boolean;\n /**\n * Whether the suggestions should be triggered once the input is focused and not only when typing.\n * @default false\n * */\n suggestOnFocus?: boolean;\n /**\n * The custom validation function, it receives the value and must return\n * either `true` for valid or `false` for invalid, default validations would only\n * occur if this function is null or undefined\n */\n validation?: (value: string) => boolean;\n /** If `true` it should autofocus. */\n autoFocus?: boolean;\n /** If `true` the clear button is disabled. */\n disableClear?: boolean; // TODO - rename in v6 since it doesn't disable but hides the button\n /** If `true` the reveal password button is disabled. Valid only when type is \"password\". */\n disableRevealPassword?: boolean; // TODO - rename in v6 since it doesn't disable but hides the button\n /** If `true` the search button is disabled. Valid only when type is \"search\". */\n disableSearchButton?: boolean; // TODO - rename in v6 since it doesn't disable but hides the button\n /**\n * If `true` the validation icon adornment is visible. Defaults to `false`.\n *\n * Currently, DS specifications define only a positive feedback icon;\n * errors are signaled through the border style and by displaying the error message.\n */\n showValidationIcon?: boolean;\n /** A custom icon to be added into the input. */\n endAdornment?: React.ReactNode;\n /** The maximum allowed length of the characters, if this value is null no check will be performed. */\n maxCharQuantity?: number;\n /** The minimum allowed length of the characters, if this value is null no check will be perform. */\n minCharQuantity?: number;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvInputClasses;\n}\n\nconst DEFAULT_LABELS = {\n /** The label of the clear button. */\n clearButtonLabel: \"Clear the text\",\n /** The label of the reveal password button. */\n revealPasswordButtonLabel: \"Reveal password\",\n /** The tooltip of the reveal password button when the password is hidden. */\n revealPasswordButtonClickToShowTooltip: \"Click to show password.\",\n /** The tooltip of the reveal password button when the password is revealed. */\n revealPasswordButtonClickToHideTooltip: \"Click to hide password.\",\n /** The label of the search button. */\n searchButtonLabel: \"Search\",\n};\n\nexport type HvInputLabels = Partial<typeof DEFAULT_LABELS>;\n\nfunction eventTargetIsInsideContainer(\n container: HTMLElement | null,\n event: React.FocusEvent<any>,\n) {\n return !!container?.contains(event.relatedTarget);\n}\n\n/** Changes a given `input`'s `value`, triggering its `onChange` */\nconst changeInputValue = (input: HTMLInputElement | null, value = \"\") => {\n const event = new Event(\"input\", { bubbles: true });\n\n /** Original `input.value` setter (React overrides it). */\n const setInputValue = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n \"value\",\n )?.set;\n\n setInputValue?.call(input, value);\n input?.dispatchEvent(event);\n};\n\n/**\n * A text input box is a graphical control element intended to enable the user to input text information to be used by the software.\n */\nexport const HvInput = fixedForwardRef(function HvInput<\n InputElement extends HTMLElement = HTMLInputElement | HTMLTextAreaElement,\n>(props: HvInputProps<InputElement>, ref: React.Ref<InputElement>) {\n const {\n classes: classesProp,\n className,\n id,\n name,\n value: valueProp,\n defaultValue,\n required,\n readOnly,\n disabled,\n enablePortal = false,\n suggestOnFocus = false,\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n onChange,\n onEnter,\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n type = \"text\",\n placeholder,\n autoFocus = false,\n labels: labelsProp,\n validationMessages,\n disableClear = false,\n disableRevealPassword = false,\n disableSearchButton = false,\n endAdornment,\n maxCharQuantity,\n minCharQuantity,\n validation,\n showValidationIcon = false,\n suggestionListCallback,\n inputRef: inputRefProp,\n onBlur,\n onFocus,\n onKeyDown,\n inputProps = {},\n ...others\n } = useDefaultProps(\"HvInput\", props);\n const { classes, cx } = useClasses(classesProp);\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n const elementId = useUniqueId(id);\n\n const inputRef = useRef<HTMLInputElement>(null);\n const forkedRef = useForkRef(ref, inputRef, inputRefProp);\n const suggestionsRef = useRef<HTMLDivElement>(null);\n\n const [focused, setFocused] = useState(false);\n\n // Signals that the user has manually edited the input value\n const isDirty = useRef(false);\n\n const isEmptyValue = !inputRef.current?.value;\n\n // Validation related state\n const [validationState, setValidationState] = useControlled(\n status,\n validationStates.standBy,\n );\n\n const [validationMessage, setValidationMessage] = useControlled(\n statusMessage,\n \"\",\n );\n\n // validationMessages reference tends to change, as users will not memoize/useState for it;\n // dependencies must be more explicit so we set\n const errorMessages = useMemo(\n () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n validationMessages?.error,\n validationMessages?.requiredError,\n validationMessages?.minCharError,\n validationMessages?.maxCharError,\n validationMessages?.typeMismatchError,\n ],\n );\n\n const validationType = useMemo(() => computeValidationType(type), [type]);\n\n // Validates the input, sets the status and the statusMessage accordingly (if uncontrolled)\n // and returns the validity state of the input.\n const performValidation = useCallback(() => {\n const inputValidity = validateInput(\n inputRef.current,\n required,\n minCharQuantity,\n maxCharQuantity,\n validationType,\n validation,\n );\n\n // This will only run if status is uncontrolled\n setValidationState(computeValidationState(inputValidity, isEmptyValue));\n\n // This will only run if statusMessage is uncontrolled\n setValidationMessage(\n computeValidationMessage(inputValidity, errorMessages),\n );\n\n return inputValidity;\n }, [\n errorMessages,\n isEmptyValue,\n maxCharQuantity,\n minCharQuantity,\n required,\n setValidationMessage,\n setValidationState,\n validation,\n validationType,\n ]);\n\n // The error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and any of the built-in validations are active\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) ||\n (status === undefined &&\n hasBuiltInValidations(\n required,\n validationType,\n minCharQuantity,\n maxCharQuantity,\n validation,\n inputProps,\n )));\n\n const isStateInvalid = isInvalid(validationState);\n\n // Input type related state\n const [revealPassword, setRevealPassword] = useState(false);\n\n const realType = useMemo(() => {\n if (type === \"password\") {\n return revealPassword ? \"text\" : \"password\";\n }\n\n if (type === \"search\") {\n return \"search\";\n }\n\n return \"text\";\n }, [revealPassword, type]);\n\n // Suggestions related state\n const [suggestionValues, setSuggestionValues] = useState<\n HvSuggestion[] | null\n >(null);\n\n const canShowSuggestions = suggestionListCallback != null;\n const hasSuggestions = !!suggestionValues;\n\n // Miscellaneous state\n const hasLabel = label != null;\n const hasDescription = description != null;\n\n /**\n * Looks for the node that represent the input inside the material tree and focus it.\n */\n const focusInput = () => {\n inputRef.current?.focus();\n };\n\n const isMounted = useIsMounted();\n\n /**\n * Clears the suggestion array.\n */\n const suggestionClearHandler = () => {\n if (isMounted.current) {\n setSuggestionValues(null);\n }\n };\n\n /**\n * Fills of the suggestion array.\n */\n const suggestionHandler = (val: string) => {\n const suggestionsArray = suggestionListCallback?.(val);\n if (suggestionsArray?.[0]?.label) {\n setSuggestionValues(suggestionsArray);\n } else {\n suggestionClearHandler();\n }\n };\n\n /**\n * Executes the user callback adds the selection to the state and clears the suggestions.\n */\n const suggestionSelectedHandler: HvSuggestionsProps[\"onSuggestionSelected\"] =\n (event, item) => {\n const newValue = item.value || (item.label as any);\n\n changeInputValue(inputRef.current, newValue);\n\n focusInput();\n suggestionClearHandler();\n\n if (type === \"search\") {\n // trigger the onEnter callback when the user selects an option in a search box\n onEnter?.(event as any, newValue);\n }\n };\n\n const onChangeHandler: HvBaseInputProps[\"onChange\"] = (event, newValue) => {\n isDirty.current = true;\n\n onChange?.(event as any, newValue);\n\n if (canShowSuggestions) {\n // an edge case might be a controlled input whose onChange callback\n // doesn't change the value (or sets another): the suggestionListCallback\n // callback will still receive the original rejected value.\n // a refactor is needed so the suggestionListCallback might be called only\n // when the input is uncontrolled, providing a way to externally control\n // the suggestion values.\n suggestionHandler(newValue);\n }\n };\n\n /**\n * Validates the input updating the state and modifying the info text, also executes\n * the user provided onBlur passing the current validation status and value.\n */\n const onInputBlurHandler: HvBaseInputProps[\"onBlur\"] = (event) => {\n // If the blur is executed when choosing an suggestion it should be ignored.\n if (eventTargetIsInsideContainer(suggestionsRef.current, event)) return;\n\n setFocused(false);\n\n const inputValidity = performValidation();\n\n onBlur?.(event as any, event.target.value, inputValidity);\n };\n\n /**\n * Updates the state putting again the value from the state because the input value is\n * not automatically manage, it also executes the onFocus function from the user passing the value\n */\n const onFocusHandler: HvBaseInputProps[\"onFocus\"] = (event) => {\n setFocused(true);\n\n // reset validation status to standBy (only when status is uncontrolled)\n setValidationState(validationStates.standBy);\n\n onFocus?.(event as any, event.target.value);\n };\n\n const getSuggestions = (li: number | null) => {\n // TODO Replace with ref\n const listEl = document.getElementById(\n setId(elementId, \"suggestions-list\") || \"\",\n );\n return li != null ? listEl?.getElementsByTagName(\"li\")?.[li] : listEl;\n };\n\n const onSuggestionKeyDown: HvSuggestionsProps[\"onKeyDown\"] = (event) => {\n if (isKey(event, \"Esc\")) {\n suggestionClearHandler();\n focusInput();\n } else if (isKey(event, \"Tab\")) {\n suggestionClearHandler();\n }\n };\n\n /** Focus the suggestion list when the arrow down is pressed. */\n const onKeyDownHandler: HvBaseInputProps[\"onKeyDown\"] = (event) => {\n const { value } = event.currentTarget;\n\n if (isKey(event, \"ArrowDown\") && hasSuggestions) {\n const li = getSuggestions(0);\n li?.focus();\n } else if (isKey(event, \"Enter\")) {\n onEnter?.(event as any, value);\n }\n\n onKeyDown?.(event as any, value);\n };\n\n /** Clears the suggestion list on blur. */\n const onContainerBlurHandler: HvFormElementProps[\"onBlur\"] = (event) => {\n if (event.relatedTarget) {\n setTimeout(() => {\n const list = getSuggestions(null);\n if (!list?.contains(document.activeElement)) suggestionClearHandler();\n }, 10);\n }\n };\n\n // show the clear button only if the input is enabled, not read-only, disableClear is false and the input is not empty\n // also, don't show it when the input type is \"search\" and the input is active (standBy)\n const showClear =\n !disabled &&\n !readOnly &&\n !disableClear &&\n !isEmptyValue &&\n (!onEnter ||\n type !== \"search\" ||\n disableSearchButton ||\n validationState !== validationStates.standBy);\n\n const showSearchIcon = type === \"search\" && !disableSearchButton;\n\n const showRevealPasswordButton =\n type === \"password\" && !disableRevealPassword;\n\n /**\n * Clears the input value from the state and refocus the input.\n */\n const handleClear = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n // reset validation status to standBy (only when status is uncontrolled)\n setValidationState(validationStates.standBy);\n\n changeInputValue(inputRef.current, \"\");\n\n // prevent triggering the suggestions when clicking on the clear button when suggestOnFocus is true\n if (canShowSuggestions && suggestOnFocus) event.stopPropagation();\n else {\n // we want to focus the input when clicked and not active\n setTimeout(focusInput);\n }\n },\n [canShowSuggestions, setValidationState, suggestOnFocus],\n );\n\n const clearButton = useMemo(() => {\n if (!showClear) {\n return null;\n }\n\n return (\n <HvAdornment\n // Don't control visibility when the search icon is enabled\n className={cx(classes.adornmentButton, {\n [classes.iconClear]: !showSearchIcon,\n })}\n onClick={handleClear}\n aria-label={labels?.clearButtonLabel}\n aria-controls={setId(elementId, \"input\")}\n icon={<CloseXS />}\n />\n );\n }, [\n showClear,\n classes.adornmentButton,\n classes.iconClear,\n showSearchIcon,\n handleClear,\n labels?.clearButtonLabel,\n elementId,\n cx,\n ]);\n\n const searchButton = useMemo(() => {\n // If the search icon is not actionable, only show it when the input is empty or active\n const reallyShowIt =\n showSearchIcon &&\n (isEmptyValue ||\n (onEnter && validationState === validationStates.standBy));\n\n if (!reallyShowIt) return null;\n\n return (\n <HvAdornment\n className={classes.adornmentButton}\n onClick={\n onEnter &&\n ((evt) => onEnter?.(evt as any, inputRef.current?.value ?? \"\"))\n }\n icon={<Search title={labels.searchButtonLabel} />}\n />\n );\n }, [\n showSearchIcon,\n isEmptyValue,\n onEnter,\n validationState,\n classes.adornmentButton,\n labels.searchButtonLabel,\n ]);\n\n const revealPasswordButton = useMemo(() => {\n if (!showRevealPasswordButton) return null;\n\n return (\n <HvTooltip\n disableFocusListener\n disableTouchListener\n title={\n revealPassword\n ? labels?.revealPasswordButtonClickToHideTooltip\n : labels?.revealPasswordButtonClickToShowTooltip\n }\n >\n <HvAdornment\n className={classes.adornmentButton}\n onClick={() => setRevealPassword((s) => !s)}\n aria-label={labels?.revealPasswordButtonLabel}\n aria-controls={setId(elementId, \"input\")}\n icon={revealPassword ? <PreviewOff /> : <Preview />}\n tabIndex={0}\n {...({ selected: revealPassword } satisfies HvButtonBaseProps)}\n />\n </HvTooltip>\n );\n }, [\n showRevealPasswordButton,\n revealPassword,\n labels?.revealPasswordButtonClickToHideTooltip,\n labels?.revealPasswordButtonClickToShowTooltip,\n labels?.revealPasswordButtonLabel,\n classes.adornmentButton,\n elementId,\n ]);\n\n const validationIcon = useMemo(() => {\n if (!showValidationIcon) return null;\n if (!isValid(validationState)) return null;\n\n return <Success color=\"positive\" className={classes.icon} />;\n }, [showValidationIcon, validationState, classes.icon]);\n\n // useMemo to avoid repetitive cloning of the custom icon\n const customIconEl = useMemo(\n () =>\n isValidElement(endAdornment)\n ? cloneElement(endAdornment as React.ReactElement, {\n className: cx(endAdornment.props.className, classes.icon),\n })\n : endAdornment,\n [classes.icon, endAdornment, cx],\n );\n\n const adornments = useMemo(() => {\n if (\n !clearButton &&\n !revealPasswordButton &&\n !searchButton &&\n !validationIcon &&\n !customIconEl\n )\n return null;\n\n return (\n <div className={classes.adornmentsBox}>\n {clearButton}\n {revealPasswordButton}\n {searchButton}\n {validationIcon || customIconEl}\n </div>\n );\n }, [\n classes.adornmentsBox,\n clearButton,\n customIconEl,\n revealPasswordButton,\n searchButton,\n validationIcon,\n ]);\n\n // run initial validation after first render\n // and also when any validation condition changes\n useEffect(() => {\n if (focused || (!isDirty.current && isEmptyValue)) {\n // skip validation if currently focused or if empty and\n // the user never manually edited the input value\n return;\n }\n\n performValidation();\n }, [focused, isEmptyValue, performValidation]);\n\n const errorMessageId = isStateInvalid\n ? canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage\n : undefined;\n\n return (\n <HvFormElement\n id={id}\n name={name}\n status={validationState}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n className={cx(\n classes.root,\n {\n [classes.hasSuggestions]: hasSuggestions,\n },\n className,\n )}\n onBlur={onContainerBlurHandler}\n >\n {(hasLabel || hasDescription) && (\n <div className={classes.labelContainer}>\n {hasLabel && (\n <HvLabel\n showGutter\n id={setId(elementId, \"label\")}\n className={classes.label}\n htmlFor={setId(elementId, \"input\")}\n label={label}\n />\n )}\n\n {hasDescription && (\n <HvInfoMessage\n id={setId(elementId, \"description\")}\n className={classes.description}\n >\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n <HvBaseInput\n id={\n hasLabel || showClear || showRevealPasswordButton\n ? setId(elementId, \"input\")\n : setId(id, \"input\")\n }\n name={name}\n value={valueProp}\n defaultValue={defaultValue}\n required={required}\n readOnly={readOnly}\n disabled={disabled}\n onChange={onChangeHandler}\n autoFocus={autoFocus}\n onKeyDown={onKeyDownHandler}\n onBlur={onInputBlurHandler}\n onFocus={onFocusHandler}\n placeholder={placeholder}\n type={realType}\n classes={{\n input: classes.input,\n root: classes.inputRoot,\n focused: classes.inputRootFocused,\n disabled: classes.inputRootDisabled,\n multiline: classes.inputRootMultiline,\n }}\n invalid={isStateInvalid}\n inputProps={{\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-invalid\": isStateInvalid ? true : undefined,\n \"aria-errormessage\": errorMessageId,\n \"aria-describedby\":\n ariaDescribedBy != null\n ? ariaDescribedBy\n : description\n ? setId(elementId, \"description\")\n : undefined,\n \"aria-controls\": canShowSuggestions\n ? setId(elementId, \"suggestions\")\n : undefined,\n\n // prevent browsers auto-fill/suggestions when we have our own\n autoComplete: canShowSuggestions ? \"off\" : undefined,\n\n onFocus: (event) => {\n inputProps.onFocus?.(event);\n\n // trigger suggestions when focusing the input\n if (canShowSuggestions && suggestOnFocus) {\n suggestionHandler(event.currentTarget.value);\n }\n },\n\n onClick: (event) => {\n inputProps.onClick?.(event);\n\n // prevent closing the suggestions when clicking on the input when suggestOnFocus is true\n if (canShowSuggestions && suggestOnFocus) event.stopPropagation();\n },\n\n ...inputProps,\n }}\n ref={forkedRef}\n endAdornment={adornments}\n {...others}\n />\n {canShowSuggestions && (\n <>\n {hasSuggestions && (\n <div role=\"presentation\" className={classes.inputExtension} />\n )}\n <HvSuggestions\n id={setId(elementId, \"suggestions\")}\n classes={{\n root: classes.suggestionsContainer,\n list: classes.suggestionList,\n }}\n expanded={hasSuggestions}\n anchorEl={inputRef.current?.parentElement}\n onClose={suggestionClearHandler}\n onKeyDown={onSuggestionKeyDown}\n onSuggestionSelected={suggestionSelectedHandler}\n suggestionValues={suggestionValues}\n enablePortal={enablePortal}\n popperProps={{ ref: suggestionsRef }}\n />\n </>\n )}\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableBorder\n className={classes.error}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n});\n"],"names":["HvInput"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.styles.js","sources":["../../../src/Input/Input.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { suggestionsClasses } from \"../FormElement/Suggestions\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvInput\", {\n root: { display: \"block\" },\n labelContainer: { display: \"flex\", alignItems: \"flex-start\" },\n label: {},\n description: {},\n adornmentsBox: {\n display: \"flex\",\n flexDirection: \"row\",\n height: \"30px\",\n justifyContent: \"center\",\n marginRight: 1,\n },\n icon: { width: \"30px\", height: \"30px\" },\n adornmentButton: {\n \":focus-visible,:hover\": {\n backgroundColor: \"transparent\",\n },\n },\n iconClear: { display: \"none\" },\n hasSuggestions: {},\n suggestionsContainer: { width: \"100%\", position: \"relative\" },\n suggestionList: {\n [`& .${suggestionsClasses.root} .${suggestionsClasses.list} &`]: {\n width: \"100%\",\n },\n },\n inputExtension: {\n height: theme.space.xs,\n backgroundColor: theme.colors.atmo1,\n boxShadow: `0px 8px 0px ${theme.colors.atmo1}, 0px 0px 9px 0px rgba(65,65,65,.12)`,\n },\n input: {},\n inputRoot: {\n \":is(:hover,:focus-within) $iconClear\": {\n display: \"block\",\n },\n },\n inputRootFocused: {\n \"& $iconClear\": {\n display: \"block\",\n },\n },\n inputRootDisabled: {},\n inputRootMultiline: { padding: 0 },\n /** @deprecated unused. use `::after` instead */\n inputBorderContainer: {},\n error: {},\n});\n"],"names":["suggestionsClasses"],"mappings":";;;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,EAAE,SAAS,QAAQ;AAAA,EACzB,gBAAgB,EAAE,SAAS,QAAQ,YAAY,aAAa;AAAA,EAC5D,OAAO,CAAC;AAAA,EACR,aAAa,CAAC;AAAA,EACd,eAAe;AAAA,IACb,SAAS;AAAA,IACT,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,aAAa;AAAA,EACf;AAAA,EACA,MAAM,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAAA,EACtC,iBAAiB;AAAA,IACf,yBAAyB;AAAA,MACvB,iBAAiB;AAAA,IAAA;AAAA,EAErB;AAAA,EACA,WAAW,EAAE,SAAS,OAAO;AAAA,EAC7B,gBAAgB,CAAC;AAAA,EACjB,sBAAsB,EAAE,OAAO,QAAQ,UAAU,WAAW;AAAA,EAC5D,gBAAgB;AAAA,IACd,CAAC,MAAMA,gBAAmB,IAAI,KAAKA,gBAAmB,IAAI,IAAI,GAAG;AAAA,MAC/D,OAAO;AAAA,IAAA;AAAA,EAEX;AAAA,EACA,gBAAgB;AAAA,IACd,QAAQ,MAAM,MAAM;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW,eAAe,MAAM,OAAO,KAAK;AAAA,EAC9C;AAAA,EACA,OAAO,CAAC;AAAA,EACR,WAAW;AAAA,IACT,wCAAwC;AAAA,MACtC,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,kBAAkB;AAAA,IAChB,gBAAgB;AAAA,MACd,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,mBAAmB,CAAC;AAAA,EACpB,oBAAoB,EAAE,SAAS,EAAE;AAAA;AAAA,EAEjC,sBAAsB,CAAC;AAAA,EACvB,OAAO,CAAA;AACT,CAAC;"}
|
|
1
|
+
{"version":3,"file":"Input.styles.js","sources":["../../../src/Input/Input.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { suggestionsClasses } from \"../FormElement/Suggestions\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvInput\", {\n root: { display: \"block\" },\n labelContainer: { display: \"flex\", alignItems: \"flex-start\" },\n label: {},\n description: {},\n adornmentsBox: {\n display: \"flex\",\n flexDirection: \"row\",\n height: \"30px\",\n alignItems: \"center\",\n justifyContent: \"center\",\n marginRight: 1,\n },\n icon: { width: \"30px\", height: \"30px\" },\n adornmentButton: {\n \":focus-visible,:hover\": {\n backgroundColor: \"transparent\",\n },\n },\n iconClear: { display: \"none\" },\n hasSuggestions: {},\n suggestionsContainer: { width: \"100%\", position: \"relative\" },\n suggestionList: {\n [`& .${suggestionsClasses.root} .${suggestionsClasses.list} &`]: {\n width: \"100%\",\n },\n },\n inputExtension: {\n height: theme.space.xs,\n backgroundColor: theme.colors.atmo1,\n boxShadow: `0px 8px 0px ${theme.colors.atmo1}, 0px 0px 9px 0px rgba(65,65,65,.12)`,\n },\n input: {},\n inputRoot: {\n \":is(:hover,:focus-within) $iconClear\": {\n display: \"block\",\n },\n },\n inputRootFocused: {\n \"& $iconClear\": {\n display: \"block\",\n },\n },\n inputRootDisabled: {},\n inputRootMultiline: { padding: 0 },\n /** @deprecated unused. use `::after` instead */\n inputBorderContainer: {},\n error: {},\n});\n"],"names":["suggestionsClasses"],"mappings":";;;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,EAAE,SAAS,QAAQ;AAAA,EACzB,gBAAgB,EAAE,SAAS,QAAQ,YAAY,aAAa;AAAA,EAC5D,OAAO,CAAC;AAAA,EACR,aAAa,CAAC;AAAA,EACd,eAAe;AAAA,IACb,SAAS;AAAA,IACT,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,aAAa;AAAA,EACf;AAAA,EACA,MAAM,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAAA,EACtC,iBAAiB;AAAA,IACf,yBAAyB;AAAA,MACvB,iBAAiB;AAAA,IAAA;AAAA,EAErB;AAAA,EACA,WAAW,EAAE,SAAS,OAAO;AAAA,EAC7B,gBAAgB,CAAC;AAAA,EACjB,sBAAsB,EAAE,OAAO,QAAQ,UAAU,WAAW;AAAA,EAC5D,gBAAgB;AAAA,IACd,CAAC,MAAMA,gBAAmB,IAAI,KAAKA,gBAAmB,IAAI,IAAI,GAAG;AAAA,MAC/D,OAAO;AAAA,IAAA;AAAA,EAEX;AAAA,EACA,gBAAgB;AAAA,IACd,QAAQ,MAAM,MAAM;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW,eAAe,MAAM,OAAO,KAAK;AAAA,EAC9C;AAAA,EACA,OAAO,CAAC;AAAA,EACR,WAAW;AAAA,IACT,wCAAwC;AAAA,MACtC,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,kBAAkB;AAAA,IAChB,gBAAgB;AAAA,MACd,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,mBAAmB,CAAC;AAAA,EACpB,oBAAoB,EAAE,SAAS,EAAE;AAAA;AAAA,EAEjC,sBAAsB,CAAC;AAAA,EACvB,OAAO,CAAA;AACT,CAAC;"}
|
package/dist/esm/List/List.js
CHANGED
|
@@ -10,9 +10,9 @@ import { staticClasses } from "./List.styles.js";
|
|
|
10
10
|
import { useSelectableList } from "./useSelectableList.js";
|
|
11
11
|
import { parseList } from "./utils.js";
|
|
12
12
|
import { HvCheckBox } from "../CheckBox/CheckBox.js";
|
|
13
|
+
import { HvRadio } from "../Radio/Radio.js";
|
|
13
14
|
import { HvOverflowTooltip } from "../OverflowTooltip/OverflowTooltip.js";
|
|
14
15
|
import { HvLink } from "../Link/Link.js";
|
|
15
|
-
import { HvRadio } from "../Radio/Radio.js";
|
|
16
16
|
import { HvListContainer } from "../ListContainer/ListContainer.js";
|
|
17
17
|
import { HvListItem } from "../ListContainer/ListItem/ListItem.js";
|
|
18
18
|
const DEFAULT_LABELS = {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { createClasses } from "@hitachivantara/uikit-react-utils";
|
|
2
2
|
import { theme } from "@hitachivantara/uikit-styles";
|
|
3
|
-
import { staticClasses as staticClasses$1 } from "../
|
|
4
|
-
import "../BaseDropdown/BaseDropdown.js";
|
|
5
|
-
import { staticClasses as staticClasses$2 } from "../Input/Input.styles.js";
|
|
3
|
+
import { staticClasses as staticClasses$1 } from "../Input/Input.styles.js";
|
|
6
4
|
import "../Input/Input.js";
|
|
5
|
+
import { staticClasses as staticClasses$2 } from "../BaseDropdown/BaseDropdown.styles.js";
|
|
6
|
+
import "../BaseDropdown/BaseDropdown.js";
|
|
7
7
|
const hoverColor = theme.colors.atmo3;
|
|
8
8
|
const { staticClasses, useClasses } = createClasses("HvPagination", {
|
|
9
9
|
/** Styles applied to the component root class. */
|
|
@@ -48,7 +48,7 @@ const { staticClasses, useClasses } = createClasses("HvPagination", {
|
|
|
48
48
|
height: 24,
|
|
49
49
|
display: "flex",
|
|
50
50
|
alignItems: "center",
|
|
51
|
-
[`& .${staticClasses$
|
|
51
|
+
[`& .${staticClasses$2.arrowContainer}`]: {
|
|
52
52
|
marginTop: -2
|
|
53
53
|
}
|
|
54
54
|
},
|
|
@@ -97,7 +97,7 @@ const { staticClasses, useClasses } = createClasses("HvPagination", {
|
|
|
97
97
|
pageJump: {
|
|
98
98
|
display: "inline-block",
|
|
99
99
|
marginRight: `4px`,
|
|
100
|
-
[`& .${staticClasses$
|
|
100
|
+
[`& .${staticClasses$1.inputRoot}`]: {
|
|
101
101
|
[`& $pageSizeInput`]: {
|
|
102
102
|
paddingLeft: `4px`,
|
|
103
103
|
paddingRight: `4px`,
|
|
@@ -2,10 +2,10 @@ import { jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { useState } from "react";
|
|
3
3
|
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
|
|
4
4
|
import { useClasses } from "./Select.styles.js";
|
|
5
|
-
import { HvListItem } from "../ListContainer/ListItem/ListItem.js";
|
|
6
5
|
import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
|
|
7
6
|
import { HvPanel } from "../Panel/Panel.js";
|
|
8
7
|
import { HvSelectionList } from "../SelectionList/SelectionList.js";
|
|
8
|
+
import { HvListItem } from "../ListContainer/ListItem/ListItem.js";
|
|
9
9
|
const Option = ({ ...props }) => /* @__PURE__ */ jsx(HvListItem, { ...props });
|
|
10
10
|
const HvSelect = (props) => {
|
|
11
11
|
const {
|
|
@@ -4,7 +4,7 @@ import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
|
|
|
4
4
|
import { useControlled } from "../hooks/useControlled.js";
|
|
5
5
|
import { useLabels } from "../hooks/useLabels.js";
|
|
6
6
|
import { isEqual } from "../utils/helpers.js";
|
|
7
|
-
import {
|
|
7
|
+
import { defaultOperators, defaultCombinators, HvQueryBuilderProvider, defaultLabels } from "./Context.js";
|
|
8
8
|
import { useClasses } from "./QueryBuilder.styles.js";
|
|
9
9
|
import { staticClasses } from "./QueryBuilder.styles.js";
|
|
10
10
|
import { emptyGroup, setNodeIds, clearNodeIds } from "./utils/index.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.js","sources":["../../../src/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n forwardRef,\n useCallback,\n useMemo,\n} from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n HvFormElement,\n HvFormStatus,\n HvInfoMessage,\n HvLabel,\n HvWarningText,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./RadioGroup.styles\";\n\nexport { staticClasses as radioGroupClasses };\n\nexport type HvRadioGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvRadioGroupProps\n extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n /**\n * The form element name.\n *\n * It is propagated to the children radio buttons, unless they already have one (which they shouldn't).\n */\n name?: string;\n /**\n * The value of the form element, represented in one of the child radio buttons values.\n *\n * When defined the radio button group state becomes controlled.\n */\n value?: any;\n /**\n * When uncontrolled, defines the initial value.\n */\n defaultValue?: any;\n /**\n * The label of the form element.\n *\n * The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be provided instead.\n */\n label?: React.ReactNode;\n /**\n * Provide additional descriptive text for the form element.\n */\n description?: React.ReactNode;\n /**\n * Indicates that the form element is disabled.\n * If `true` the state is propagated to the children radio buttons.\n */\n disabled?: boolean;\n /**\n * Indicates that the form element is not editable.\n * If `true` the state is propagated to the children radio buttons.\n */\n readOnly?: boolean;\n /**\n * Indicates that user input is required on the form element.\n * If `true` the state is propagated to the children radio buttons' input element.\n */\n required?: boolean;\n /**\n * The status of the form element.\n *\n * Valid is correct, invalid is incorrect and standBy means no validations have run.\n *\n * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to the state.\n */\n status?: HvFormStatus;\n /**\n * The error message to show when `status` is \"invalid\".\n */\n statusMessage?: React.ReactNode;\n /**\n * The callback fired when the value changes.\n */\n onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any) => void;\n /**\n * Indicates whether the radio buttons group's orientation is horizontal or vertical.\n *\n * Defaults to vertical.\n */\n orientation?: \"vertical\" | \"horizontal\";\n /**\n * A Jss Object used to override or extend the component styles applied.\n */\n classes?: HvRadioGroupClasses;\n}\n\nconst getValueFromSelectedChildren = (children: React.ReactNode) => {\n const childrenArray = Children.toArray(children);\n const childrenCount = childrenArray.length;\n for (let i = 0; i !== childrenCount; i += 1) {\n const child: any = childrenArray[i];\n\n const childIsControlled = child?.props?.checked !== undefined;\n const childIsSelected = childIsControlled\n ? child?.props?.checked\n : child?.props?.defaultChecked;\n\n if (childIsSelected) {\n return child?.props?.value;\n }\n }\n\n return null;\n};\n\n/**\n * A radio group is a type of selection list that can only have a single entry checked at any one time.\n */\nexport const HvRadioGroup = forwardRef<HTMLDivElement, HvRadioGroupProps>(\n function HvRadioGroup(props, ref) {\n const {\n id,\n classes: classesProp,\n className,\n children,\n name,\n value: valueProp,\n defaultValue,\n label,\n description,\n status,\n statusMessage,\n required,\n readOnly,\n disabled,\n orientation = \"vertical\",\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-errormessage\": ariaErrorMessage,\n onChange,\n ...others\n } = useDefaultProps(\"HvRadioGroup\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const elementId = useUniqueId(id);\n\n const [value, setValue] = useControlled(\n valueProp,\n defaultValue !== undefined\n ? defaultValue\n : // When uncontrolled and no default value is given,\n // extract the initial selected values from the children own state\n () => getValueFromSelectedChildren(children),\n );\n\n const onChildChangeInterceptor = useCallback(\n (\n childOnChange: (\n event: React.ChangeEvent<HTMLInputElement>,\n checked: boolean,\n value: any,\n ) => void,\n event: React.ChangeEvent<HTMLInputElement>,\n isChecked: boolean,\n newValue: any,\n ) => {\n childOnChange?.(event, isChecked, newValue);\n\n onChange?.(event, newValue);\n\n setValue(newValue);\n },\n [onChange, setValue],\n );\n\n const modifiedChildren = useMemo(() => {\n return Children.map(children, (child: any) => {\n const childValue = child?.props?.value ?? \"on\";\n\n const childIsSelected = childValue === value;\n\n return cloneElement(child, {\n checked: childIsSelected,\n name: child?.props?.name || name || elementId,\n onChange: (\n event: React.ChangeEvent<HTMLInputElement>,\n isChecked: boolean,\n newValue: any,\n ) =>\n onChildChangeInterceptor(\n child?.props?.onChange,\n event,\n isChecked,\n newValue,\n ),\n inputProps: {\n ...child?.props?.inputProps,\n // Set the required attribute directly in the input\n // the radio form element context shouldn't be aware so the\n // label doesn't show redundant asterisk\n required,\n },\n disabled: disabled || child?.props?.disabled,\n readOnly: readOnly || child?.props?.readOnly,\n });\n });\n }, [\n children,\n disabled,\n elementId,\n name,\n onChildChangeInterceptor,\n readOnly,\n required,\n value,\n ]);\n\n // The error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) ||\n (status === undefined && required));\n\n const errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n\n return (\n <HvFormElement\n id={id}\n name={name}\n status={status || \"standBy\"}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n className={cx(classes.root, className)}\n >\n {label && (\n <HvLabel\n showGutter\n id={setId(elementId, \"label\")}\n label={label}\n className={classes.label}\n />\n )}\n\n {description && (\n <HvInfoMessage id={setId(elementId, \"description\")}>\n {description}\n </HvInfoMessage>\n )}\n\n <div\n ref={ref}\n role=\"radiogroup\"\n aria-label={ariaLabel}\n aria-labelledby={\n ariaLabelledBy || (label && setId(elementId, \"label\")) || undefined\n }\n aria-invalid={status === \"invalid\" ? true : undefined}\n aria-errormessage={status === \"invalid\" ? errorMessageId : undefined}\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() || undefined\n }\n className={cx(classes.group, {\n [classes.vertical]: orientation === \"vertical\",\n [classes.horizontal]: orientation === \"horizontal\",\n [classes.invalid]: status === \"invalid\",\n })}\n {...others}\n >\n {modifiedChildren}\n </div>\n\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableBorder\n className={classes.error}\n >\n {statusMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n },\n);\n"],"names":["HvRadioGroup"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","sources":["../../../src/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n forwardRef,\n useCallback,\n useMemo,\n} from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n HvFormElement,\n HvFormStatus,\n HvInfoMessage,\n HvLabel,\n HvWarningText,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./RadioGroup.styles\";\n\nexport { staticClasses as radioGroupClasses };\n\nexport type HvRadioGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvRadioGroupProps\n extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n /**\n * The form element name.\n *\n * It is propagated to the children radio buttons, unless they already have one (which they shouldn't).\n */\n name?: string;\n /**\n * The value of the form element, represented in one of the child radio buttons values.\n *\n * When defined the radio button group state becomes controlled.\n */\n value?: any;\n /**\n * When uncontrolled, defines the initial value.\n */\n defaultValue?: any;\n /**\n * The label of the form element.\n *\n * The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be provided instead.\n */\n label?: React.ReactNode;\n /**\n * Provide additional descriptive text for the form element.\n */\n description?: React.ReactNode;\n /**\n * Indicates that the form element is disabled.\n * If `true` the state is propagated to the children radio buttons.\n */\n disabled?: boolean;\n /**\n * Indicates that the form element is not editable.\n * If `true` the state is propagated to the children radio buttons.\n */\n readOnly?: boolean;\n /**\n * Indicates that user input is required on the form element.\n * If `true` the state is propagated to the children radio buttons' input element.\n */\n required?: boolean;\n /**\n * The status of the form element.\n *\n * Valid is correct, invalid is incorrect and standBy means no validations have run.\n *\n * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to the state.\n */\n status?: HvFormStatus;\n /**\n * The error message to show when `status` is \"invalid\".\n */\n statusMessage?: React.ReactNode;\n /**\n * The callback fired when the value changes.\n */\n onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any) => void;\n /**\n * Indicates whether the radio buttons group's orientation is horizontal or vertical.\n *\n * Defaults to vertical.\n */\n orientation?: \"vertical\" | \"horizontal\";\n /**\n * A Jss Object used to override or extend the component styles applied.\n */\n classes?: HvRadioGroupClasses;\n}\n\nconst getValueFromSelectedChildren = (children: React.ReactNode) => {\n const childrenArray = Children.toArray(children);\n const childrenCount = childrenArray.length;\n for (let i = 0; i !== childrenCount; i += 1) {\n const child: any = childrenArray[i];\n\n const childIsControlled = child?.props?.checked !== undefined;\n const childIsSelected = childIsControlled\n ? child?.props?.checked\n : child?.props?.defaultChecked;\n\n if (childIsSelected) {\n return child?.props?.value;\n }\n }\n\n return null;\n};\n\n/**\n * A radio group is a type of selection list that can only have a single entry checked at any one time.\n */\nexport const HvRadioGroup = forwardRef<HTMLDivElement, HvRadioGroupProps>(\n function HvRadioGroup(props, ref) {\n const {\n id,\n classes: classesProp,\n className,\n children,\n name,\n value: valueProp,\n defaultValue,\n label,\n description,\n status,\n statusMessage,\n required,\n readOnly,\n disabled,\n orientation = \"vertical\",\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-errormessage\": ariaErrorMessage,\n onChange,\n ...others\n } = useDefaultProps(\"HvRadioGroup\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const elementId = useUniqueId(id);\n\n const [value, setValue] = useControlled(\n valueProp,\n defaultValue !== undefined\n ? defaultValue\n : // When uncontrolled and no default value is given,\n // extract the initial selected values from the children own state\n () => getValueFromSelectedChildren(children),\n );\n\n const onChildChangeInterceptor = useCallback(\n (\n childOnChange: (\n event: React.ChangeEvent<HTMLInputElement>,\n checked: boolean,\n value: any,\n ) => void,\n event: React.ChangeEvent<HTMLInputElement>,\n isChecked: boolean,\n newValue: any,\n ) => {\n childOnChange?.(event, isChecked, newValue);\n\n onChange?.(event, newValue);\n\n setValue(newValue);\n },\n [onChange, setValue],\n );\n\n const modifiedChildren = useMemo(() => {\n return Children.map(children, (child: any) => {\n const childValue = child?.props?.value ?? \"on\";\n\n const childIsSelected = childValue === value;\n\n return cloneElement(child, {\n checked: childIsSelected,\n name: child?.props?.name || name || elementId,\n onChange: (\n event: React.ChangeEvent<HTMLInputElement>,\n isChecked: boolean,\n newValue: any,\n ) =>\n onChildChangeInterceptor(\n child?.props?.onChange,\n event,\n isChecked,\n newValue,\n ),\n inputProps: {\n ...child?.props?.inputProps,\n // Set the required attribute directly in the input\n // the radio form element context shouldn't be aware so the\n // label doesn't show redundant asterisk\n required,\n },\n disabled: disabled || child?.props?.disabled,\n readOnly: readOnly || child?.props?.readOnly,\n });\n });\n }, [\n children,\n disabled,\n elementId,\n name,\n onChildChangeInterceptor,\n readOnly,\n required,\n value,\n ]);\n\n // The error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) ||\n (status === undefined && required));\n\n const errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n\n return (\n <HvFormElement\n id={id}\n name={name}\n status={status || \"standBy\"}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n className={cx(classes.root, className)}\n >\n {label && (\n <HvLabel\n showGutter\n id={setId(elementId, \"label\")}\n label={label}\n className={classes.label}\n />\n )}\n\n {description && (\n <HvInfoMessage id={setId(elementId, \"description\")}>\n {description}\n </HvInfoMessage>\n )}\n\n <div\n ref={ref}\n role=\"radiogroup\"\n aria-label={ariaLabel}\n aria-labelledby={\n ariaLabelledBy || (label && setId(elementId, \"label\")) || undefined\n }\n aria-invalid={status === \"invalid\" ? true : undefined}\n aria-errormessage={status === \"invalid\" ? errorMessageId : undefined}\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() || undefined\n }\n className={cx(classes.group, {\n [classes.vertical]: orientation === \"vertical\",\n [classes.horizontal]: orientation === \"horizontal\",\n [classes.invalid]: status === \"invalid\",\n })}\n {...others}\n >\n {modifiedChildren}\n </div>\n\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableBorder\n className={classes.error}\n >\n {statusMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n },\n);\n"],"names":["HvRadioGroup"],"mappings":"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"}
|