@hitachivantara/uikit-react-core 6.8.1 → 6.9.0

package/dist/BaseInput/BaseInput.styles.js

@@ -1,107 +1,87 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../utils/focusUtils.js";
-const { staticClasses, useClasses } = createClasses("HvBaseInput", {
-  root: {
-    // #region `input` style reset
-    // Clears number input up/down arrows in Chrome and Firefox
-    "input[type=number]": {
-      MozAppearance: "textfield",
-      "&::-webkit-outer-spin-button,&::-webkit-inner-spin-button": {
-        WebkitAppearance: "none",
-        margin: 0
-      }
-    },
-    // Clears time input clock in Chrome
-    "input::-webkit-calendar-picker-indicator": {
-      display: "none"
-    },
-    // Clears search input clear button in Chrome
-    "input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration": {
-      display: "none"
-    },
-    // #endregion
-    display: "inline-flex",
-    width: "100%",
-    position: "relative",
-    overflow: "hidden",
-    margin: 0,
-    borderRadius: theme.radii.round,
-    height: "32px",
-    borderWidth: 1,
-    borderColor: theme.colors.text,
-    boxSizing: "border-box",
-    backgroundColor: theme.colors.bgContainer,
-    fontFamily: theme.fontFamily.body,
-    alignItems: "stretch",
-    ...theme.typography.body,
-    ":hover:not($disabled,$readOnly)": {
-      borderColor: theme.colors.primary
-    },
-    ":focus-within:not($disabled)": {
-      ...outlineStyles
-    }
-  },
-  disabled: {
-    backgroundColor: theme.colors.bgPage,
-    borderColor: theme.colors.textDisabled,
-    cursor: "not-allowed",
-    "&&::before": {
-      borderBottomStyle: "none"
-    }
-  },
-  invalid: {
-    borderColor: theme.form.errorColor
-  },
-  multiline: {
-    padding: 0,
-    overflow: "auto",
-    height: "auto",
-    "& $input": {
-      borderRadius: theme.radii.base,
-      height: "auto",
-      minHeight: "21px",
-      padding: "5px 10px",
-      overflow: "auto",
-      margin: 0
-    }
-  },
-  resizable: { width: "auto" },
-  readOnly: {
-    borderColor: theme.colors.textDisabled,
-    backgroundColor: theme.colors.bgPage
-  },
-  focused: {},
-  input: {
-    height: "100%",
-    marginLeft: theme.space.xs,
-    marginRight: theme.space.xs,
-    padding: 0,
-    backgroundColor: "transparent",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    outline: "none",
-    width: "initial",
-    flexGrow: 1,
-    ...theme.typography.body,
-    "&::placeholder": {
-      opacity: 1,
-      color: theme.colors.textSubtle
-    }
-  },
-  inputDisabled: {
-    color: theme.colors.textDisabled,
-    WebkitTextFillColor: theme.colors.textDisabled
-  },
-  inputReadOnly: {
-    color: theme.colors.textSubtle
-  },
-  inputResizable: {
-    resize: "both",
-    width: "100%"
-  }
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/BaseInput/BaseInput.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvBaseInput", {
+	root: {
+		"input[type=number]": {
+			MozAppearance: "textfield",
+			"&::-webkit-outer-spin-button,&::-webkit-inner-spin-button": {
+				WebkitAppearance: "none",
+				margin: 0
+			}
+		},
+		"input::-webkit-calendar-picker-indicator": { display: "none" },
+		"input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration": { display: "none" },
+		display: "inline-flex",
+		width: "100%",
+		position: "relative",
+		overflow: "hidden",
+		margin: 0,
+		borderRadius: theme.radii.round,
+		height: "32px",
+		borderWidth: 1,
+		borderColor: theme.colors.text,
+		boxSizing: "border-box",
+		backgroundColor: theme.colors.bgContainer,
+		fontFamily: theme.fontFamily.body,
+		alignItems: "stretch",
+		...theme.typography.body,
+		":hover:not($disabled,$readOnly)": { borderColor: theme.colors.primary },
+		":focus-within:not($disabled)": { ...outlineStyles }
+	},
+	disabled: {
+		backgroundColor: theme.colors.bgPage,
+		borderColor: theme.colors.textDisabled,
+		cursor: "not-allowed",
+		"&&::before": { borderBottomStyle: "none" }
+	},
+	invalid: { borderColor: theme.form.errorColor },
+	multiline: {
+		padding: 0,
+		overflow: "auto",
+		height: "auto",
+		"& $input": {
+			borderRadius: theme.radii.base,
+			height: "auto",
+			minHeight: "21px",
+			padding: "5px 10px",
+			overflow: "auto",
+			margin: 0
+		}
+	},
+	resizable: { width: "auto" },
+	readOnly: {
+		borderColor: theme.colors.textDisabled,
+		backgroundColor: theme.colors.bgPage
+	},
+	focused: {},
+	input: {
+		height: "100%",
+		marginLeft: theme.space.xs,
+		marginRight: theme.space.xs,
+		padding: 0,
+		backgroundColor: "transparent",
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		outline: "none",
+		width: "initial",
+		flexGrow: 1,
+		...theme.typography.body,
+		"&::placeholder": {
+			opacity: 1,
+			color: theme.colors.textSubtle
+		}
+	},
+	inputDisabled: {
+		color: theme.colors.textDisabled,
+		WebkitTextFillColor: theme.colors.textDisabled
+	},
+	inputReadOnly: { color: theme.colors.textSubtle },
+	inputResizable: {
+		resize: "both",
+		width: "100%"
+	}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/BaseInput/validations.js

@@ -1,74 +1,77 @@
-const isTypeValidationIgnored = (type) => {
-  return type === "text" || type === "password";
+//#region src/BaseInput/validations.ts
+var isTypeValidationIgnored = (type) => {
+	return type === "text" || type === "password";
 };
-const hasBuiltInValidations = (required, inputType, minCharQuantity, maxCharQuantity, validation, inputProps) => required || !isTypeValidationIgnored(inputType) || minCharQuantity != null || maxCharQuantity != null || validation != null || inputProps?.required != null || inputProps?.minLength != null || inputProps?.maxLength != null || inputProps?.min != null || inputProps?.max != null || inputProps?.type && !isTypeValidationIgnored(inputProps.type) || inputProps?.pattern != null;
-const computeValidationState = (inputValidity, isEmptyValue) => {
-  if (inputValidity.valid && isEmptyValue) {
-    return "standBy";
-  }
-  return inputValidity.valid ? "valid" : "invalid";
+/**
+* Checks whether any integrated validation, native or not, is active.
+*/
+var hasBuiltInValidations = (required, inputType, minCharQuantity, maxCharQuantity, validation, inputProps) => required || !isTypeValidationIgnored(inputType) || minCharQuantity != null || maxCharQuantity != null || validation != null || inputProps?.required != null || inputProps?.minLength != null || inputProps?.maxLength != null || inputProps?.min != null || inputProps?.max != null || inputProps?.type && !isTypeValidationIgnored(inputProps.type) || inputProps?.pattern != null;
+/** Returns the form element's validation state based in the validity state of the input. */
+var computeValidationState = (inputValidity, isEmptyValue) => {
+	if (inputValidity.valid && isEmptyValue) return "standBy";
+	return inputValidity.valid ? "valid" : "invalid";
 };
-const computeValidationMessage = (inputValidity, errorMessages) => {
-  if (inputValidity.valid) {
-    return "";
-  }
-  if (inputValidity.valueMissing) {
-    return errorMessages.requiredError;
-  }
-  if (inputValidity.tooLong) {
-    return errorMessages.maxCharError;
-  }
-  if (inputValidity.tooShort) {
-    return errorMessages.minCharError;
-  }
-  if (inputValidity.typeMismatch) {
-    return errorMessages.typeMismatchError;
-  }
-  return errorMessages.error;
+/**
+* Returns a error message based in the validity state of the input.
+*
+* Only one error message is returned even if multiple validations fail.
+* Also, only required, minCharQuantity, maxCharQuantity and validationType have specific error messages.
+*
+* For further customization both status and statusMessage should be controlled and
+* set using the onBlur callback that receives both the value and the input validity object.
+*/
+var computeValidationMessage = (inputValidity, errorMessages) => {
+	if (inputValidity.valid) return "";
+	if (inputValidity.valueMissing) return errorMessages.requiredError;
+	if (inputValidity.tooLong) return errorMessages.maxCharError;
+	if (inputValidity.tooShort) return errorMessages.minCharError;
+	if (inputValidity.typeMismatch) return errorMessages.typeMismatchError;
+	return errorMessages.error;
 };
-const validateInput = (input, required, minCharQuantity, maxCharQuantity, validation) => {
-  const inputValidity = {
-    ...input?.validity,
-    valid: input?.validity?.valid ?? true
-  };
-  const value = input?.value;
-  if (!value) {
-    if (required) {
-      inputValidity.valueMissing = true;
-      inputValidity.valid = false;
-    }
-  } else {
-    if (minCharQuantity !== null && value.length < minCharQuantity) {
-      inputValidity.tooShort = true;
-      inputValidity.valid = false;
-    }
-    if (maxCharQuantity !== null && value.length > maxCharQuantity) {
-      inputValidity.tooLong = true;
-      inputValidity.valid = false;
-    }
-    if (validation != null && !validation(value)) {
-      inputValidity.customError = true;
-      inputValidity.valid = false;
-    }
-  }
-  return inputValidity;
+/**
+* Returns a object describing the validity state of the input.
+*
+* It implements the native browser's ValidityState interface:
+* https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
+*/
+var validateInput = (input, required, minCharQuantity, maxCharQuantity, validation) => {
+	const inputValidity = {
+		...input?.validity,
+		valid: input?.validity?.valid ?? true
+	};
+	const value = input?.value;
+	if (!value) {
+		if (required) {
+			inputValidity.valueMissing = true;
+			inputValidity.valid = false;
+		}
+	} else {
+		if (minCharQuantity !== null && value.length < minCharQuantity) {
+			inputValidity.tooShort = true;
+			inputValidity.valid = false;
+		}
+		if (maxCharQuantity !== null && value.length > maxCharQuantity) {
+			inputValidity.tooLong = true;
+			inputValidity.valid = false;
+		}
+		if (validation != null && !validation(value)) {
+			inputValidity.customError = true;
+			inputValidity.valid = false;
+		}
+	}
+	return inputValidity;
 };
-const DEFAULT_ERROR_MESSAGES = {
-  /** The value when a validation fails. */
-  error: "Invalid value",
-  /** The message that appears when there are too many characters. */
-  maxCharError: "The value is too long",
-  /** The message that appears when there are too few characters. */
-  minCharError: "The value is too short",
-  /** The message that appears when the input is empty and required. */
-  requiredError: "The value is required",
-  /** The message that appears when the input is value is incompatible with the expected type. */
-  typeMismatchError: "Invalid value"
-};
-export {
-  DEFAULT_ERROR_MESSAGES,
-  computeValidationMessage,
-  computeValidationState,
-  hasBuiltInValidations,
-  validateInput
+var DEFAULT_ERROR_MESSAGES = {
+	/** The value when a validation fails. */
+	error: "Invalid value",
+	/** The message that appears when there are too many characters. */
+	maxCharError: "The value is too long",
+	/** The message that appears when there are too few characters. */
+	minCharError: "The value is too short",
+	/** The message that appears when the input is empty and required. */
+	requiredError: "The value is required",
+	/** The message that appears when the input is value is incompatible with the expected type. */
+	typeMismatchError: "Invalid value"
 };
+//#endregion
+export { DEFAULT_ERROR_MESSAGES, computeValidationMessage, computeValidationState, hasBuiltInValidations, validateInput };

package/dist/BaseRadio/BaseRadio.js

@@ -1,87 +1,63 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef, useState, useCallback } from "react";
-import MuiRadio from "@mui/material/Radio";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./BaseRadio.styles.js";
-import { staticClasses } from "./BaseRadio.styles.js";
 import { HvRadioIcon } from "./RadioIcon.js";
-const HvBaseRadio = forwardRef(
-  function HvBaseRadio2(props, ref) {
-    const {
-      classes: classesProp,
-      className,
-      value = "on",
-      required,
-      readOnly,
-      disabled,
-      checked,
-      defaultChecked,
-      onChange,
-      semantic,
-      inputProps,
-      color,
-      onFocusVisible,
-      onBlur,
-      ...others
-    } = useDefaultProps("HvBaseRadio", props);
-    const { classes, cx } = useClasses(classesProp);
-    const [focusVisible, setFocusVisible] = useState(false);
-    const onFocusVisibleCallback = useCallback(
-      (evt) => {
-        setFocusVisible(true);
-        onFocusVisible?.(evt);
-      },
-      [onFocusVisible]
-    );
-    const onBlurCallback = useCallback(
-      (evt) => {
-        setFocusVisible(false);
-        onBlur?.(evt);
-      },
-      [onBlur]
-    );
-    const onLocalChange = useCallback(
-      (evt) => {
-        if (readOnly) {
-          return;
-        }
-        onChange?.(evt, evt.target.checked, value);
-      },
-      [onChange, readOnly, value]
-    );
-    return /* @__PURE__ */ jsx(
-      MuiRadio,
-      {
-        ref,
-        className: cx(
-          classes.root,
-          {
-            [classes.focusVisible]: focusVisible,
-            [classes.checked]: checked,
-            [classes.semantic]: semantic,
-            [classes.disabled]: disabled
-          },
-          className
-        ),
-        icon: /* @__PURE__ */ jsx(HvRadioIcon, { disabled }),
-        checkedIcon: /* @__PURE__ */ jsx(HvRadioIcon, { checked: true, disabled, color }),
-        color: "default",
-        disabled,
-        required,
-        readOnly,
-        onChange: onLocalChange,
-        value,
-        checked,
-        defaultChecked,
-        inputProps,
-        onFocusVisible: onFocusVisibleCallback,
-        onBlur: onBlurCallback,
-        ...others
-      }
-    );
-  }
-);
-export {
-  HvBaseRadio,
-  staticClasses as baseRadioClasses
-};
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef, useCallback, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import MuiRadio from "@mui/material/Radio";
+//#region src/BaseRadio/BaseRadio.tsx
+/**
+* A Radio Button is a mechanism that allows user to select one or more options.
+*
+* The Base Radio Button is a building block of the Radio Button form element. Don't
+* use unless implementing a custom use case not covered by the Radio Button form element.
+*/
+var HvBaseRadio = forwardRef(function HvBaseRadio(props, ref) {
+	const { classes: classesProp, className, value = "on", required, readOnly, disabled, checked, defaultChecked, onChange, semantic, inputProps, color, onFocusVisible, onBlur, ...others } = useDefaultProps("HvBaseRadio", props);
+	const { classes, cx } = useClasses(classesProp);
+	const [focusVisible, setFocusVisible] = useState(false);
+	const onFocusVisibleCallback = useCallback((evt) => {
+		setFocusVisible(true);
+		onFocusVisible?.(evt);
+	}, [onFocusVisible]);
+	const onBlurCallback = useCallback((evt) => {
+		setFocusVisible(false);
+		onBlur?.(evt);
+	}, [onBlur]);
+	const onLocalChange = useCallback((evt) => {
+		if (readOnly) return;
+		onChange?.(evt, evt.target.checked, value);
+	}, [
+		onChange,
+		readOnly,
+		value
+	]);
+	return /* @__PURE__ */ jsx(MuiRadio, {
+		ref,
+		className: cx(classes.root, {
+			[classes.focusVisible]: focusVisible,
+			[classes.checked]: checked,
+			[classes.semantic]: semantic,
+			[classes.disabled]: disabled
+		}, className),
+		icon: /* @__PURE__ */ jsx(HvRadioIcon, { disabled }),
+		checkedIcon: /* @__PURE__ */ jsx(HvRadioIcon, {
+			checked: true,
+			disabled,
+			color
+		}),
+		color: "default",
+		disabled,
+		required,
+		readOnly,
+		onChange: onLocalChange,
+		value,
+		checked,
+		defaultChecked,
+		inputProps,
+		onFocusVisible: onFocusVisibleCallback,
+		onBlur: onBlurCallback,
+		...others
+	});
+});
+//#endregion
+export { HvBaseRadio };

package/dist/BaseRadio/BaseRadio.styles.js

@@ -1,33 +1,28 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../utils/focusUtils.js";
-const { staticClasses, useClasses } = createClasses("HvBaseRadio", {
-  root: {
-    padding: 0,
-    width: 32,
-    minWidth: 32,
-    height: 32,
-    cursor: "pointer",
-    borderRadius: "inherit",
-    ":hover": {
-      backgroundColor: theme.colors.bgHover
-    }
-  },
-  disabled: {
-    cursor: "not-allowed",
-    pointerEvents: "initial"
-  },
-  focusVisible: {
-    "& svg": {
-      borderRadius: theme.radii.full,
-      ...outlineStyles
-    }
-  },
-  icon: {},
-  checked: {},
-  semantic: {}
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/BaseRadio/BaseRadio.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvBaseRadio", {
+	root: {
+		padding: 0,
+		width: 32,
+		minWidth: 32,
+		height: 32,
+		cursor: "pointer",
+		borderRadius: "inherit",
+		":hover": { backgroundColor: theme.colors.bgHover }
+	},
+	disabled: {
+		cursor: "not-allowed",
+		pointerEvents: "initial"
+	},
+	focusVisible: { "& svg": {
+		borderRadius: theme.radii.full,
+		...outlineStyles
+	} },
+	icon: {},
+	checked: {},
+	semantic: {}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/BaseRadio/RadioIcon.js

@@ -1,51 +1,46 @@
-import { jsx } from "react/jsx-runtime";
-import { useDefaultProps, mergeStyles, createClasses } from "@hitachivantara/uikit-react-utils";
-import { getColor, theme } from "@hitachivantara/uikit-styles";
 import { SvgBase } from "../icons.js";
-const { useClasses } = createClasses("HvRadioIcon", {
-  root: {
-    borderRadius: theme.radii.full,
-    border: `1px solid ${theme.colors.borderStrong}`,
-    backgroundColor: theme.colors.bgContainer
-  },
-  checked: {
-    borderColor: "transparent",
-    backgroundColor: `var(--bg-color, ${theme.colors.primaryStrong})`,
-    color: theme.colors.bgContainer
-  },
-  disabled: {
-    borderColor: theme.colors.textDisabled,
-    backgroundColor: theme.colors.bgDisabled
-  },
-  checkedDisabled: {
-    borderColor: "transparent",
-    backgroundColor: theme.colors.borderDisabled,
-    color: theme.colors.bgDisabled
-  }
+import { getColor, theme } from "@hitachivantara/uikit-styles";
+import { createClasses, mergeStyles, useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { jsx } from "react/jsx-runtime";
+//#region src/BaseRadio/RadioIcon.tsx
+var { useClasses } = createClasses("HvRadioIcon", {
+	root: {
+		borderRadius: theme.radii.full,
+		border: `1px solid ${theme.colors.borderStrong}`,
+		backgroundColor: theme.colors.bgContainer
+	},
+	checked: {
+		borderColor: "transparent",
+		backgroundColor: `var(--bg-color, ${theme.colors.primaryStrong})`,
+		color: theme.colors.bgContainer
+	},
+	disabled: {
+		borderColor: theme.colors.textDisabled,
+		backgroundColor: theme.colors.bgDisabled
+	},
+	checkedDisabled: {
+		borderColor: "transparent",
+		backgroundColor: theme.colors.borderDisabled,
+		color: theme.colors.bgDisabled
+	}
 });
-const HvRadioIcon = (props) => {
-  const {
-    className,
-    classes: classesProp,
-    checked,
-    disabled,
-    color
-  } = useDefaultProps("HvRadioIcon", props);
-  const { classes, cx } = useClasses(classesProp, false);
-  return /* @__PURE__ */ jsx(
-    SvgBase,
-    {
-      viewBox: "0 0 16 16",
-      className: cx(classes.root, className, {
-        [classes.checked]: checked,
-        [classes.disabled]: disabled,
-        [classes.checkedDisabled]: checked && disabled
-      }),
-      style: mergeStyles({}, { "--bg-color": getColor(color) }),
-      children: checked && /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "4.5" })
-    }
-  );
-};
-export {
-  HvRadioIcon
+var HvRadioIcon = (props) => {
+	const { className, classes: classesProp, checked, disabled, color } = useDefaultProps("HvRadioIcon", props);
+	const { classes, cx } = useClasses(classesProp, false);
+	return /* @__PURE__ */ jsx(SvgBase, {
+		viewBox: "0 0 16 16",
+		className: cx(classes.root, className, {
+			[classes.checked]: checked,
+			[classes.disabled]: disabled,
+			[classes.checkedDisabled]: checked && disabled
+		}),
+		style: mergeStyles({}, { "--bg-color": getColor(color) }),
+		children: checked && /* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "8",
+			r: "4.5"
+		})
+	});
 };
+//#endregion
+export { HvRadioIcon };