@hitachivantara/uikit-react-core 6.8.1 → 6.9.0

package/dist/TextArea/TextArea.js

@@ -1,278 +1,211 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useRef, useState, useMemo, useCallback, useEffect } from "react";
-import { useForkRef } from "@mui/material/utils";
-import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
-import { DEFAULT_ERROR_MESSAGES, validateInput, computeValidationState, computeValidationMessage, hasBuiltInValidations } from "../BaseInput/validations.js";
-import { HvLabelContainer } from "../FormElement/LabelContainer.js";
-import { useControlled } from "../hooks/useControlled.js";
-import { useUniqueId } from "../hooks/useUniqueId.js";
 import { setId } from "../utils/setId.js";
-import { useClasses } from "./TextArea.styles.js";
-import { staticClasses } from "./TextArea.styles.js";
-import { HvFormElement } from "../FormElement/FormElement.js";
-import { HvBaseInput } from "../BaseInput/BaseInput.js";
-import { isInvalid } from "../FormElement/utils.js";
 import { HvCharCounter } from "../FormElement/CharCounter/CharCounter.js";
-import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
+import { useUniqueId } from "../hooks/useUniqueId.js";
+import { isInvalid } from "../FormElement/utils.js";
+import { HvFormElement } from "../FormElement/FormElement.js";
 import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
-const HvTextArea = forwardRef(function HvTextArea2(props, ref) {
-  const {
-    id,
-    className,
-    classes: classesProp,
-    name,
-    label,
-    description: descriptionProp,
-    placeholder,
-    status,
-    statusMessage,
-    infoMessage: infoMessageProp,
-    validationMessages,
-    maxCharQuantity,
-    minCharQuantity,
-    value: valueProp,
-    inputRef: inputRefProp,
-    rows = 1,
-    defaultValue = "",
-    middleCountLabel = "/",
-    countCharProps,
-    inputProps,
-    required,
-    readOnly,
-    disabled,
-    autoFocus,
-    resizable,
-    autoScroll,
-    hideCounter,
-    blockMax,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedBy,
-    "aria-errormessage": ariaErrorMessage,
-    validation,
-    onChange,
-    onBlur,
-    onFocus,
-    ...others
-  } = useDefaultProps("HvTextArea", props);
-  const { classes, cx } = useClasses(classesProp);
-  const elementId = useUniqueId(id);
-  const { activeTheme } = useTheme();
-  const isDirty = useRef(false);
-  const inputRef = useRef(null);
-  const forkedRef = useForkRef(ref, inputRefProp, inputRef);
-  const [description, infoMessage] = activeTheme?.name === "pentahoPlus" ? [infoMessageProp, descriptionProp] : [descriptionProp, infoMessageProp];
-  const [focused, setFocused] = useState(false);
-  const [autoScrolling, setAutoScrolling] = useState(autoScroll);
-  const [validationState, setValidationState] = useControlled(
-    status,
-    "standBy"
-  );
-  const [validationMessage, setValidationMessage] = useControlled(
-    statusMessage,
-    ""
-  );
-  const [value, setValue] = useControlled(valueProp, defaultValue);
-  const isStateInvalid = isInvalid(validationState);
-  const isEmptyValue = value == null || value === "";
-  const hasLabel = label != null;
-  const hasCounter = maxCharQuantity != null && !hideCounter;
-  const errorMessages = useMemo(
-    () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),
-    [validationMessages]
-  );
-  const performValidation = useCallback(() => {
-    const inputValidity = validateInput(
-      inputRef.current,
-      required,
-      minCharQuantity,
-      maxCharQuantity,
-      validation
-    );
-    setValidationState(computeValidationState(inputValidity, isEmptyValue));
-    setValidationMessage(
-      computeValidationMessage(inputValidity, errorMessages) || ""
-    );
-    return inputValidity;
-  }, [
-    errorMessages,
-    inputRef,
-    isEmptyValue,
-    maxCharQuantity,
-    minCharQuantity,
-    required,
-    setValidationMessage,
-    setValidationState,
-    validation
-  ]);
-  const limitValue = (currentValue) => {
-    if (currentValue === void 0 || !blockMax) return currentValue;
-    const isOverflow = maxCharQuantity == null ? false : currentValue.length > maxCharQuantity;
-    return !isOverflow ? currentValue : currentValue.slice(0, maxCharQuantity);
-  };
-  const onContainerBlurHandler = (event) => {
-    setFocused(false);
-    const inputValidity = performValidation();
-    onBlur?.(event, String(value), inputValidity);
-  };
-  const onChangeHandler = (event, currentValue) => {
-    isDirty.current = true;
-    const limitedValue = blockMax ? limitValue(currentValue) : currentValue;
-    setValue(limitedValue);
-    onChange?.(event, limitedValue);
-  };
-  const onFocusHandler = (event) => {
-    setFocused(true);
-    setValidationState("standBy");
-    onFocus?.(event, String(value));
-  };
-  const isScrolledDown = useCallback(() => {
-    const el = inputRef.current;
-    return el == null || el.offsetHeight + el.scrollTop >= el.scrollHeight;
-  }, [inputRef]);
-  const scrollDown = useCallback(() => {
-    const el = inputRef.current;
-    if (el != null) {
-      el.scrollTop = el.scrollHeight - el.clientHeight;
-    }
-  }, [inputRef]);
-  const addScrollListener = useCallback(() => {
-    const scrollHandler = {
-      handleEvent: () => {
-        setAutoScrolling(isScrolledDown());
-      }
-    };
-    inputRef.current?.addEventListener("scroll", scrollHandler);
-  }, [inputRef, isScrolledDown]);
-  useEffect(() => {
-    if (autoScroll) {
-      addScrollListener();
-    }
-  }, [autoScroll, addScrollListener]);
-  useEffect(() => {
-    if (autoScrolling) {
-      scrollDown();
-    }
-  }, [valueProp, autoScrolling, scrollDown]);
-  useEffect(() => {
-    if (focused || !isDirty.current && isEmptyValue) {
-      return;
-    }
-    performValidation();
-  }, [focused, isEmptyValue, performValidation]);
-  const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && hasBuiltInValidations(
-    required,
-    "text",
-    minCharQuantity,
-    // If blockMax is true maxCharQuantity will never produce an error
-    // unless the value is controlled, so we can't prevent it to overflow maxCharQuantity
-    maxCharQuantity != null && (blockMax !== true || value != null) ? maxCharQuantity : null,
-    validation,
-    inputProps
-  ));
-  const willShowError = canShowError && isStateInvalid;
-  const canShowInfo = !!infoMessage && !willShowError;
-  let errorMessageId;
-  if (isStateInvalid) {
-    errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
-  }
-  return /* @__PURE__ */ jsxs(
-    HvFormElement,
-    {
-      id,
-      name,
-      status: validationState,
-      disabled,
-      required,
-      readOnly,
-      className: cx(
-        classes.root,
-        {
-          [classes.resizable]: resizable,
-          [classes.invalid]: isStateInvalid,
-          [classes.disabled]: disabled
-        },
-        className
-      ),
-      onBlur: onContainerBlurHandler,
-      children: [
-        /* @__PURE__ */ jsx(
-          HvLabelContainer,
-          {
-            label,
-            description,
-            inputId: setId(elementId, "input"),
-            labelId: setId(elementId, "label"),
-            descriptionId: setId(elementId, "description"),
-            classes: {
-              root: classes.labelContainer,
-              label: classes.label,
-              description: classes.description
-            },
-            children: hasCounter && /* @__PURE__ */ jsx(
-              HvCharCounter,
-              {
-                disableGutter: true,
-                id: setId(elementId, "charCounter"),
-                className: classes.characterCounter,
-                separator: middleCountLabel,
-                currentCharQuantity: String(value).length,
-                maxCharQuantity,
-                ...countCharProps
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          HvBaseInput,
-          {
-            classes: {
-              root: classes.baseInput,
-              input: classes.input,
-              inputResizable: classes.inputResizable
-            },
-            id: hasLabel ? setId(elementId, "input") : setId(id, "input"),
-            name,
-            value,
-            required,
-            readOnly,
-            disabled,
-            onChange: onChangeHandler,
-            autoFocus,
-            onFocus: onFocusHandler,
-            placeholder,
-            invalid: isStateInvalid,
-            resizable,
-            multiline: true,
-            rows,
-            inputProps: {
-              "aria-label": ariaLabel,
-              "aria-labelledby": ariaLabelledBy,
-              "aria-invalid": isStateInvalid ? true : void 0,
-              "aria-errormessage": errorMessageId,
-              "aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : description && setId(elementId, "description") || void 0,
-              "aria-controls": maxCharQuantity ? setId(elementId, "charCounter") : void 0,
-              ...inputProps
-            },
-            inputRef: forkedRef,
-            ...others
-          }
-        ),
-        canShowError && /* @__PURE__ */ jsx(
-          HvWarningText,
-          {
-            id: setId(elementId, "error"),
-            className: classes.error,
-            disableBorder: true,
-            children: validationMessage
-          }
-        ),
-        canShowInfo && /* @__PURE__ */ jsx(HvInfoMessage, { disableGutter: true, variant: "caption1", children: infoMessage })
-      ]
-    }
-  );
+import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
+import { useControlled as useControlled$1 } from "../hooks/useControlled.js";
+import { HvLabelContainer } from "../FormElement/LabelContainer.js";
+import { HvBaseInput } from "../BaseInput/BaseInput.js";
+import { DEFAULT_ERROR_MESSAGES, computeValidationMessage, computeValidationState, hasBuiltInValidations, validateInput } from "../BaseInput/validations.js";
+import { useClasses } from "./TextArea.styles.js";
+import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useForkRef } from "@mui/material/utils";
+//#region src/TextArea/TextArea.tsx
+/**
+* A text area is a multiline text input box, with an optional character counter when there is a length limit.
+*/
+var HvTextArea = forwardRef(function HvTextArea(props, ref) {
+	const { id, className, classes: classesProp, name, label, description: descriptionProp, placeholder, status, statusMessage, infoMessage: infoMessageProp, validationMessages, maxCharQuantity, minCharQuantity, value: valueProp, inputRef: inputRefProp, rows = 1, defaultValue = "", middleCountLabel = "/", countCharProps, inputProps, required, readOnly, disabled, autoFocus, resizable, autoScroll, hideCounter, blockMax, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, validation, onChange, onBlur, onFocus, ...others } = useDefaultProps("HvTextArea", props);
+	const { classes, cx } = useClasses(classesProp);
+	const elementId = useUniqueId(id);
+	const { activeTheme } = useTheme();
+	const isDirty = useRef(false);
+	const inputRef = useRef(null);
+	const forkedRef = useForkRef(ref, inputRefProp, inputRef);
+	const [description, infoMessage] = activeTheme?.name === "pentahoPlus" ? [infoMessageProp, descriptionProp] : [descriptionProp, infoMessageProp];
+	const [focused, setFocused] = useState(false);
+	const [autoScrolling, setAutoScrolling] = useState(autoScroll);
+	const [validationState, setValidationState] = useControlled$1(status, "standBy");
+	const [validationMessage, setValidationMessage] = useControlled$1(statusMessage, "");
+	const [value, setValue] = useControlled$1(valueProp, defaultValue);
+	const isStateInvalid = isInvalid(validationState);
+	const isEmptyValue = value == null || value === "";
+	const hasLabel = label != null;
+	const hasCounter = maxCharQuantity != null && !hideCounter;
+	const errorMessages = useMemo(() => ({
+		...DEFAULT_ERROR_MESSAGES,
+		...validationMessages
+	}), [validationMessages]);
+	const performValidation = useCallback(() => {
+		const inputValidity = validateInput(inputRef.current, required, minCharQuantity, maxCharQuantity, validation);
+		setValidationState(computeValidationState(inputValidity, isEmptyValue));
+		setValidationMessage(computeValidationMessage(inputValidity, errorMessages) || "");
+		return inputValidity;
+	}, [
+		errorMessages,
+		inputRef,
+		isEmptyValue,
+		maxCharQuantity,
+		minCharQuantity,
+		required,
+		setValidationMessage,
+		setValidationState,
+		validation
+	]);
+	/**
+	* Limit the string to the maxCharQuantity length.
+	*/
+	const limitValue = (currentValue) => {
+		if (currentValue === void 0 || !blockMax) return currentValue;
+		return !(maxCharQuantity == null ? false : currentValue.length > maxCharQuantity) ? currentValue : currentValue.slice(0, maxCharQuantity);
+	};
+	/**
+	* Validates the text area updating the state and modifying the warning text, also executes
+	* the user provided onBlur passing the current validation status and value.
+	*/
+	const onContainerBlurHandler = (event) => {
+		setFocused(false);
+		const inputValidity = performValidation();
+		onBlur?.(event, String(value), inputValidity);
+	};
+	/**
+	* Updates the length of the string while is being inputted, also executes the user onChange
+	* allowing the customization of the input if required.
+	*/
+	const onChangeHandler = (event, currentValue) => {
+		isDirty.current = true;
+		const limitedValue = blockMax ? limitValue(currentValue) : currentValue;
+		setValue(limitedValue);
+		onChange?.(event, limitedValue);
+	};
+	/**
+	* Updates the state putting again the value from the state because the input value is
+	* not automatically manage, it also executes the onFocus function from the user passing the value
+	*/
+	const onFocusHandler = (event) => {
+		setFocused(true);
+		setValidationState("standBy");
+		onFocus?.(event, String(value));
+	};
+	const isScrolledDown = useCallback(() => {
+		const el = inputRef.current;
+		return el == null || el.offsetHeight + el.scrollTop >= el.scrollHeight;
+	}, [inputRef]);
+	const scrollDown = useCallback(() => {
+		const el = inputRef.current;
+		if (el != null) el.scrollTop = el.scrollHeight - el.clientHeight;
+	}, [inputRef]);
+	const addScrollListener = useCallback(() => {
+		inputRef.current?.addEventListener("scroll", { handleEvent: () => {
+			setAutoScrolling(isScrolledDown());
+		} });
+	}, [inputRef, isScrolledDown]);
+	useEffect(() => {
+		if (autoScroll) addScrollListener();
+	}, [autoScroll, addScrollListener]);
+	useEffect(() => {
+		if (autoScrolling) scrollDown();
+	}, [
+		valueProp,
+		autoScrolling,
+		scrollDown
+	]);
+	useEffect(() => {
+		if (focused || !isDirty.current && isEmptyValue) return;
+		performValidation();
+	}, [
+		focused,
+		isEmptyValue,
+		performValidation
+	]);
+	const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && hasBuiltInValidations(required, "text", minCharQuantity, maxCharQuantity != null && (blockMax !== true || value != null) ? maxCharQuantity : null, validation, inputProps));
+	const canShowInfo = !!infoMessage && !(canShowError && isStateInvalid);
+	let errorMessageId;
+	if (isStateInvalid) errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
+	return /* @__PURE__ */ jsxs(HvFormElement, {
+		id,
+		name,
+		status: validationState,
+		disabled,
+		required,
+		readOnly,
+		className: cx(classes.root, {
+			[classes.resizable]: resizable,
+			[classes.invalid]: isStateInvalid,
+			[classes.disabled]: disabled
+		}, className),
+		onBlur: onContainerBlurHandler,
+		children: [
+			/* @__PURE__ */ jsx(HvLabelContainer, {
+				label,
+				description,
+				inputId: setId(elementId, "input"),
+				labelId: setId(elementId, "label"),
+				descriptionId: setId(elementId, "description"),
+				classes: {
+					root: classes.labelContainer,
+					label: classes.label,
+					description: classes.description
+				},
+				children: hasCounter && /* @__PURE__ */ jsx(HvCharCounter, {
+					disableGutter: true,
+					id: setId(elementId, "charCounter"),
+					className: classes.characterCounter,
+					separator: middleCountLabel,
+					currentCharQuantity: String(value).length,
+					maxCharQuantity,
+					...countCharProps
+				})
+			}),
+			/* @__PURE__ */ jsx(HvBaseInput, {
+				classes: {
+					root: classes.baseInput,
+					input: classes.input,
+					inputResizable: classes.inputResizable
+				},
+				id: hasLabel ? setId(elementId, "input") : setId(id, "input"),
+				name,
+				value,
+				required,
+				readOnly,
+				disabled,
+				onChange: onChangeHandler,
+				autoFocus,
+				onFocus: onFocusHandler,
+				placeholder,
+				invalid: isStateInvalid,
+				resizable,
+				multiline: true,
+				rows,
+				inputProps: {
+					"aria-label": ariaLabel,
+					"aria-labelledby": ariaLabelledBy,
+					"aria-invalid": isStateInvalid ? true : void 0,
+					"aria-errormessage": errorMessageId,
+					"aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : description && setId(elementId, "description") || void 0,
+					"aria-controls": maxCharQuantity ? setId(elementId, "charCounter") : void 0,
+					...inputProps
+				},
+				inputRef: forkedRef,
+				...others
+			}),
+			canShowError && /* @__PURE__ */ jsx(HvWarningText, {
+				id: setId(elementId, "error"),
+				className: classes.error,
+				disableBorder: true,
+				children: validationMessage
+			}),
+			canShowInfo && /* @__PURE__ */ jsx(HvInfoMessage, {
+				disableGutter: true,
+				variant: "caption1",
+				children: infoMessage
+			})
+		]
+	});
 });
-export {
-  HvTextArea,
-  staticClasses as textAreaClasses
-};
+//#endregion
+export { HvTextArea };

package/dist/TextArea/TextArea.styles.js

@@ -1,22 +1,27 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
-const { staticClasses, useClasses } = createClasses("HvTextArea", {
-  root: { display: "inline-block", width: "100%" },
-  disabled: {},
-  resizable: { width: "fit-content" },
-  invalid: {},
-  baseInput: { clear: "both", float: "left" },
-  input: {},
-  inputResizable: {},
-  labelContainer: {},
-  label: {},
-  description: {},
-  characterCounter: {
-    textAlign: "right",
-    marginLeft: "auto"
-  },
-  error: { float: "left" }
+//#region src/TextArea/TextArea.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvTextArea", {
+	root: {
+		display: "inline-block",
+		width: "100%"
+	},
+	disabled: {},
+	resizable: { width: "fit-content" },
+	invalid: {},
+	baseInput: {
+		clear: "both",
+		float: "left"
+	},
+	input: {},
+	inputResizable: {},
+	labelContainer: {},
+	label: {},
+	description: {},
+	characterCounter: {
+		textAlign: "right",
+		marginLeft: "auto"
+	},
+	error: { float: "left" }
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/TimeAgo/TimeAgo.js

@@ -1,34 +1,28 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { DEFAULT_LOCALE } from "../Calendar/utils.js";
 import { fixedForwardRef } from "../types/generic.js";
+import { HvTypography } from "../Typography/Typography.js";
 import { useClasses } from "./TimeAgo.styles.js";
-import { staticClasses } from "./TimeAgo.styles.js";
 import useTimeAgo from "./useTimeAgo.js";
-import { HvTypography } from "../Typography/Typography.js";
-const HvTimeAgo = fixedForwardRef(function HvTimeAgo2(props, ref) {
-  const {
-    classes: classesProp,
-    className,
-    timestamp,
-    locale = DEFAULT_LOCALE,
-    component: Component = HvTypography,
-    emptyElement = "—",
-    disableRefresh = false,
-    showSeconds = false,
-    justText = false,
-    ...others
-  } = useDefaultProps("HvTimeAgo", props);
-  const { classes, cx } = useClasses(classesProp);
-  const timeAgo = useTimeAgo(timestamp, {
-    locale,
-    disableRefresh,
-    showSeconds
-  });
-  if (justText && timestamp) return /* @__PURE__ */ jsx(Fragment, { children: timeAgo });
-  return /* @__PURE__ */ jsx(Component, { ref, className: cx(classes.root, className), ...others, children: !timestamp ? emptyElement : timeAgo });
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { Fragment, jsx } from "react/jsx-runtime";
+//#region src/TimeAgo/TimeAgo.tsx
+/**
+* The HvTimeAgo component implements the Design System relative time format guidelines.
+*/
+var HvTimeAgo = fixedForwardRef(function HvTimeAgo(props, ref) {
+	const { classes: classesProp, className, timestamp, locale = "en", component: Component = HvTypography, emptyElement = "—", disableRefresh = false, showSeconds = false, justText = false, ...others } = useDefaultProps("HvTimeAgo", props);
+	const { classes, cx } = useClasses(classesProp);
+	const timeAgo = useTimeAgo(timestamp, {
+		locale,
+		disableRefresh,
+		showSeconds
+	});
+	if (justText && timestamp) return /* @__PURE__ */ jsx(Fragment, { children: timeAgo });
+	return /* @__PURE__ */ jsx(Component, {
+		ref,
+		className: cx(classes.root, className),
+		...others,
+		children: !timestamp ? emptyElement : timeAgo
+	});
 });
-export {
-  HvTimeAgo,
-  staticClasses as timeAgoClasses
-};
+//#endregion
+export { HvTimeAgo };

package/dist/TimeAgo/TimeAgo.styles.js

@@ -1,8 +1,5 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
-const { staticClasses, useClasses } = createClasses("HvTimeAgo", {
-  root: {}
-});
-export {
-  staticClasses,
-  useClasses
-};
+//#region src/TimeAgo/TimeAgo.styles.ts
+var { staticClasses, useClasses } = createClasses("HvTimeAgo", { root: {} });
+//#endregion
+export { staticClasses, useClasses };