npm - @hitachivantara/uikit-react-core - Versions diffs - 5.82.2 → 5.82.3 - Mend

@hitachivantara/uikit-react-core 5.82.2 → 5.82.3

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.

Files changed (160) hide show

package/dist/cjs/Switch/Switch.cjs CHANGED Viewed

@@ -4,15 +4,15 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const validationStates = require("../Forms/FormElement/validationStates.cjs");
 const useControlled = require("../hooks/useControlled.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
 const setId = require("../utils/setId.cjs");
 const Switch_styles = require("./Switch.styles.cjs");
 const BaseSwitch = require("../BaseSwitch/BaseSwitch.cjs");
-const FormElement = require("../Forms/FormElement/FormElement.cjs");
-const Label = require("../Forms/Label/Label.cjs");
-const WarningText = require("../Forms/WarningText/WarningText.cjs");
+const utils = require("../FormElement/utils.cjs");
+const FormElement = require("../FormElement/FormElement.cjs");
+const Label = require("../FormElement/Label/Label.cjs");
+const WarningText = require("../FormElement/WarningText/WarningText.cjs");
 const isSemantical = (color) => ["positive", "negative", "warning"].includes(color);
 const HvSwitch = React.forwardRef(
   function HvSwitch2(props, ref) {
@@ -22,9 +22,9 @@ const HvSwitch = React.forwardRef(
       id,
       name,
       value = "on",
-      required = false,
-      readOnly = false,
-      disabled = false,
+      required,
+      readOnly,
+      disabled,
       label,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
@@ -42,10 +42,7 @@ const HvSwitch = React.forwardRef(
     } = uikitReactUtils.useDefaultProps("HvSwitch", props);
     const { classes, cx, css } = Switch_styles.useClasses(classesProp);
     const elementId = useUniqueId.useUniqueId(id);
-    const [isChecked, setIsChecked] = useControlled.useControlled(
-      checked,
-      Boolean(defaultChecked)
-    );
+    const [isChecked, setIsChecked] = useControlled.useControlled(checked, defaultChecked);
     const [validationState, setValidationState] = useControlled.useControlled(
       status,
       "standBy"
@@ -66,7 +63,7 @@ const HvSwitch = React.forwardRef(
       [onChange, required, setIsChecked, setValidationState, value]
     );
     const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
-    const isStateInvalid = validationStates.isInvalid(validationState);
+    const isStateInvalid = utils.isInvalid(validationState);
     let errorMessageId;
     if (isStateInvalid) {
       errorMessageId = canShowError ? setId.setId(elementId, "error") : ariaErrorMessage;

package/dist/cjs/TagsInput/TagsInput.cjs CHANGED Viewed

@@ -6,24 +6,24 @@ const utils = require("@mui/material/utils");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const validations = require("../BaseInput/validations.cjs");
-const validationStates = require("../Forms/FormElement/validationStates.cjs");
+const Suggestions = require("../FormElement/Suggestions/Suggestions.cjs");
 const useControlled = require("../hooks/useControlled.cjs");
 const useIsMounted = require("../hooks/useIsMounted.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
 const keyboardUtils = require("../utils/keyboardUtils.cjs");
 const setId = require("../utils/setId.cjs");
 const TagsInput_styles = require("./TagsInput.styles.cjs");
-const CharCounter = require("../Forms/CharCounter/CharCounter.cjs");
-const FormElement = require("../Forms/FormElement/FormElement.cjs");
-const Label = require("../Forms/Label/Label.cjs");
-const InfoMessage = require("../Forms/InfoMessage/InfoMessage.cjs");
+const CharCounter = require("../FormElement/CharCounter/CharCounter.cjs");
+const utils$1 = require("../FormElement/utils.cjs");
+const FormElement = require("../FormElement/FormElement.cjs");
+const Label = require("../FormElement/Label/Label.cjs");
+const InfoMessage = require("../FormElement/InfoMessage/InfoMessage.cjs");
 const ListContainer = require("../ListContainer/ListContainer.cjs");
 const ListItem = require("../ListContainer/ListItem/ListItem.cjs");
 const Tag = require("../Tag/Tag.cjs");
 const BaseInput_styles = require("../BaseInput/BaseInput.styles.cjs");
 const Input = require("../Input/Input.cjs");
-const Suggestions = require("../Forms/Suggestions/Suggestions.cjs");
-const WarningText = require("../Forms/WarningText/WarningText.cjs");
+const WarningText = require("../FormElement/WarningText/WarningText.cjs");
 const HvTagsInput = React.forwardRef(
   function HvTagsInput2(props, ref) {
     const {
@@ -33,9 +33,9 @@ const HvTagsInput = React.forwardRef(
       name,
       value: valueProp,
       defaultValue = [],
-      readOnly = false,
-      disabled = false,
-      required = false,
+      readOnly,
+      disabled,
+      required,
       label: textAreaLabel,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
@@ -47,21 +47,21 @@ const HvTagsInput = React.forwardRef(
       onBlur,
       onFocus,
       placeholder,
-      hideCounter = false,
+      hideCounter,
       middleCountLabel = "/",
       maxTagsQuantity,
       resizable = true,
       inputProps,
       countCharProps,
-      multiline = false,
+      multiline,
       status,
       statusMessage,
       validationMessages,
       commitTagOn = ["Enter"],
-      commitOnBlur = false,
+      commitOnBlur,
       suggestionListCallback,
       suggestionValidation,
-      suggestionsLoose = false,
+      suggestionsLoose,
       ...others
     } = uikitReactUtils.useDefaultProps("HvTagsInput", props);
     const { classes, cx, css } = TagsInput_styles.useClasses(classesProp);
@@ -101,11 +101,11 @@ const HvTagsInput = React.forwardRef(
     const performValidation = React.useCallback(
       (currValue) => {
         if (maxTagsQuantity !== null && maxTagsQuantity !== void 0 && currValue.length > maxTagsQuantity) {
-          setValidationState(validationStates.default.invalid);
+          setValidationState(utils$1.validationStates.invalid);
           setValidationMessage(errorMessages.maxCharError);
           setStateValid(false);
         } else {
-          setValidationState(validationStates.default.valid);
+          setValidationState(utils$1.validationStates.valid);
           setValidationMessage("");
           setStateValid(true);
         }
@@ -286,7 +286,7 @@ const HvTagsInput = React.forwardRef(
     const onDeleteTagHandler = React.useCallback(
       (event, i) => {
         deleteTag(i, event, true);
-        setValidationState(validationStates.default.standBy);
+        setValidationState(utils$1.validationStates.standBy);
       },
       [deleteTag, setValidationState]
     );

package/dist/cjs/TagsInput/TagsInput.styles.cjs CHANGED Viewed

@@ -4,7 +4,7 @@ const Chip = require("@mui/material/Chip");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const BaseInput_styles = require("../BaseInput/BaseInput.styles.cjs");
-const Suggestions_styles = require("../Forms/Suggestions/Suggestions.styles.cjs");
+const Suggestions_styles = require("../FormElement/Suggestions/Suggestions.styles.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTagsInput", {
   input: {
     width: "100%",

package/dist/cjs/TextArea/TextArea.cjs CHANGED Viewed

@@ -5,17 +5,17 @@ const React = require("react");
 const utils = require("@mui/material/utils");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const validations = require("../BaseInput/validations.cjs");
-const validationStates = require("../Forms/FormElement/validationStates.cjs");
 const useControlled = require("../hooks/useControlled.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
 const setId = require("../utils/setId.cjs");
 const TextArea_styles = require("./TextArea.styles.cjs");
-const FormElement = require("../Forms/FormElement/FormElement.cjs");
-const Label = require("../Forms/Label/Label.cjs");
-const InfoMessage = require("../Forms/InfoMessage/InfoMessage.cjs");
-const CharCounter = require("../Forms/CharCounter/CharCounter.cjs");
+const utils$1 = require("../FormElement/utils.cjs");
+const FormElement = require("../FormElement/FormElement.cjs");
+const Label = require("../FormElement/Label/Label.cjs");
+const InfoMessage = require("../FormElement/InfoMessage/InfoMessage.cjs");
+const CharCounter = require("../FormElement/CharCounter/CharCounter.cjs");
 const BaseInput = require("../BaseInput/BaseInput.cjs");
-const WarningText = require("../Forms/WarningText/WarningText.cjs");
+const WarningText = require("../FormElement/WarningText/WarningText.cjs");
 const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
   const {
     id,
@@ -37,14 +37,14 @@ const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
     middleCountLabel = "/",
     countCharProps = {},
     inputProps = {},
-    required = false,
-    readOnly = false,
-    disabled = false,
-    autoFocus = false,
-    resizable = false,
-    autoScroll = false,
-    hideCounter = false,
-    blockMax = false,
+    required,
+    readOnly,
+    disabled,
+    autoFocus,
+    resizable,
+    autoScroll,
+    hideCounter,
+    blockMax,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": ariaDescribedBy,
@@ -64,14 +64,14 @@ const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
   const [autoScrolling, setAutoScrolling] = React.useState(autoScroll);
   const [validationState, setValidationState] = useControlled.useControlled(
     status,
-    validationStates.default.standBy
+    utils$1.validationStates.standBy
   );
   const [validationMessage, setValidationMessage] = useControlled.useControlled(
     statusMessage,
     ""
   );
   const [value, setValue] = useControlled.useControlled(valueProp, defaultValue);
-  const isStateInvalid = validationStates.isInvalid(validationState);
+  const isStateInvalid = utils$1.isInvalid(validationState);
   const isEmptyValue = value == null || value === "";
   const hasLabel = label != null;
   const hasDescription = description != null;
@@ -125,7 +125,7 @@ const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
   };
   const onFocusHandler = (event) => {
     setFocused(true);
-    setValidationState(validationStates.default.standBy);
+    setValidationState(utils$1.validationStates.standBy);
     onFocus?.(event, value);
   };
   const isScrolledDown = React.useCallback(() => {

package/dist/cjs/TimePicker/TimePicker.cjs CHANGED Viewed

@@ -14,11 +14,11 @@ const setId = require("../utils/setId.cjs");
 const Placeholder = require("./Placeholder.cjs");
 const TimePicker_styles = require("./TimePicker.styles.cjs");
 const Unit = require("./Unit/Unit.cjs");
-const FormElement = require("../Forms/FormElement/FormElement.cjs");
-const Label = require("../Forms/Label/Label.cjs");
-const InfoMessage = require("../Forms/InfoMessage/InfoMessage.cjs");
+const FormElement = require("../FormElement/FormElement.cjs");
+const Label = require("../FormElement/Label/Label.cjs");
+const InfoMessage = require("../FormElement/InfoMessage/InfoMessage.cjs");
 const BaseDropdown = require("../BaseDropdown/BaseDropdown.cjs");
-const WarningText = require("../Forms/WarningText/WarningText.cjs");
+const WarningText = require("../FormElement/WarningText/WarningText.cjs");
 const toTime = (value) => {
   if (!value) return value;
   const { hours, minutes, seconds } = value;
@@ -31,9 +31,9 @@ const HvTimePicker = React.forwardRef(
       className,
       id: idProp,
       name,
-      required = false,
-      disabled = false,
-      readOnly = false,
+      required,
+      disabled,
+      readOnly,
       label,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,

package/dist/cjs/index.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const FormElement = require("./FormElement/FormElement.cjs");
 const useClickOutside = require("./hooks/useClickOutside.cjs");
 const useComputation = require("./hooks/useComputation.cjs");
 const useControlled = require("./hooks/useControlled.cjs");
@@ -57,31 +58,25 @@ const ListContainer_styles = require("./ListContainer/ListContainer.styles.cjs")
 const ListContainer = require("./ListContainer/ListContainer.cjs");
 const ListItem_styles = require("./ListContainer/ListItem/ListItem.styles.cjs");
 const ListItem = require("./ListContainer/ListItem/ListItem.cjs");
-const CharCounter_styles = require("./Forms/CharCounter/CharCounter.styles.cjs");
-const CharCounter = require("./Forms/CharCounter/CharCounter.cjs");
-const Adornment_styles = require("./Forms/Adornment/Adornment.styles.cjs");
-const Adornment = require("./Forms/Adornment/Adornment.cjs");
-const FormElement_styles = require("./Forms/FormElement/FormElement.styles.cjs");
-const FormElement = require("./Forms/FormElement/FormElement.cjs");
-const FormElementContext = require("./Forms/FormElement/context/FormElementContext.cjs");
-const FormElementValueContext = require("./Forms/FormElement/context/FormElementValueContext.cjs");
-const FormElementDescriptorsContext = require("./Forms/FormElement/context/FormElementDescriptorsContext.cjs");
-const FormUtils = require("./Forms/FormElement/utils/FormUtils.cjs");
-const validationStates = require("./Forms/FormElement/validationStates.cjs");
-const Label_styles = require("./Forms/Label/Label.styles.cjs");
-const Label = require("./Forms/Label/Label.cjs");
-const InfoMessage_styles = require("./Forms/InfoMessage/InfoMessage.styles.cjs");
-const InfoMessage = require("./Forms/InfoMessage/InfoMessage.cjs");
-const WarningText_styles = require("./Forms/WarningText/WarningText.styles.cjs");
-const WarningText = require("./Forms/WarningText/WarningText.cjs");
+const CharCounter_styles = require("./FormElement/CharCounter/CharCounter.styles.cjs");
+const CharCounter = require("./FormElement/CharCounter/CharCounter.cjs");
+const Adornment_styles = require("./FormElement/Adornment/Adornment.styles.cjs");
+const Adornment = require("./FormElement/Adornment/Adornment.cjs");
+const FormElement_styles = require("./FormElement/FormElement.styles.cjs");
+const Label_styles = require("./FormElement/Label/Label.styles.cjs");
+const Label = require("./FormElement/Label/Label.cjs");
+const InfoMessage_styles = require("./FormElement/InfoMessage/InfoMessage.styles.cjs");
+const InfoMessage = require("./FormElement/InfoMessage/InfoMessage.cjs");
+const WarningText_styles = require("./FormElement/WarningText/WarningText.styles.cjs");
+const WarningText = require("./FormElement/WarningText/WarningText.cjs");
 const Select_styles = require("./Select/Select.styles.cjs");
 const Select = require("./Select/Select.cjs");
 const Option = require("./Select/Option.cjs");
 const OptionGroup = require("./Select/OptionGroup.cjs");
 const SelectionList_styles = require("./SelectionList/SelectionList.styles.cjs");
 const SelectionList = require("./SelectionList/SelectionList.cjs");
-const Suggestions_styles = require("./Forms/Suggestions/Suggestions.styles.cjs");
-const Suggestions = require("./Forms/Suggestions/Suggestions.cjs");
+const Suggestions_styles = require("./FormElement/Suggestions/Suggestions.styles.cjs");
+const Suggestions = require("./FormElement/Suggestions/Suggestions.cjs");
 const BaseInput_styles = require("./BaseInput/BaseInput.styles.cjs");
 const BaseInput = require("./BaseInput/BaseInput.cjs");
 const BaseDropdown_styles = require("./BaseDropdown/BaseDropdown.styles.cjs");
@@ -350,6 +345,7 @@ Object.defineProperty(exports, "useTheme", {
   enumerable: true,
   get: () => uikitReactUtils.useTheme
 });
+exports.HvFormElement = FormElement.HvFormElement;
 exports.useClickOutside = useClickOutside.useClickOutside;
 exports.useComputation = useComputation.useComputation;
 exports.useControlled = useControlled.useControlled;
@@ -432,23 +428,6 @@ exports.HvCharCounter = CharCounter.HvCharCounter;
 exports.adornmentClasses = Adornment_styles.staticClasses;
 exports.HvAdornment = Adornment.HvAdornment;
 exports.formElementClasses = FormElement_styles.staticClasses;
-exports.HvFormElement = FormElement.HvFormElement;
-exports.HvFormElementContext = FormElementContext.HvFormElementContext;
-exports.HvFormElementContextConsumer = FormElementContext.HvFormElementContextConsumer;
-exports.HvFormElementContextProvider = FormElementContext.HvFormElementContextProvider;
-exports.HvFormElementValueContext = FormElementValueContext.HvFormElementValueContext;
-exports.HvFormElementValueContextConsumer = FormElementValueContext.HvFormElementValueContextConsumer;
-exports.HvFormElementValueContextProvider = FormElementValueContext.HvFormElementValueContextProvider;
-exports.HvFormElementDescriptorsContext = FormElementDescriptorsContext.HvFormElementDescriptorsContext;
-exports.HvFormElementDescriptorsContextConsumer = FormElementDescriptorsContext.HvFormElementDescriptorsContextConsumer;
-exports.HvFormElementDescriptorsContextProvider = FormElementDescriptorsContext.HvFormElementDescriptorsContextProvider;
-exports.buildAriaPropsFromContext = FormUtils.buildAriaPropsFromContext;
-exports.buildFormElementPropsFromContext = FormUtils.buildFormElementPropsFromContext;
-exports.findDescriptors = FormUtils.findDescriptors;
-exports.getIdReferenceFor = FormUtils.getIdReferenceFor;
-exports.getIdReferenceListFor = FormUtils.getIdReferenceListFor;
-exports.isInvalid = validationStates.isInvalid;
-exports.isValid = validationStates.isValid;
 exports.labelClasses = Label_styles.staticClasses;
 exports.HvLabel = Label.HvLabel;
 exports.infoMessageClasses = InfoMessage_styles.staticClasses;

package/dist/esm/BaseInput/BaseInput.js CHANGED Viewed

@@ -7,9 +7,8 @@ import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 import { useClasses } from "./BaseInput.styles.js";
 import { staticClasses } from "./BaseInput.styles.js";
-import { buildFormElementPropsFromContext, buildAriaPropsFromContext } from "../Forms/FormElement/utils/FormUtils.js";
-import { HvFormElementContext } from "../Forms/FormElement/context/FormElementContext.js";
-import { HvFormElementDescriptorsContext } from "../Forms/FormElement/context/FormElementDescriptorsContext.js";
+import { HvFormElementContext, HvFormElementDescriptorsContext } from "../FormElement/context.js";
+import { buildFormElementPropsFromContext, buildAriaPropsFromContext } from "../FormElement/utils.js";
 const baseInputStyles = css({
   "input:-webkit-autofill": {
     WebkitBoxShadow: `0 0 0px 1000px ${theme.colors.atmo1} inset`,
@@ -46,9 +45,9 @@ const HvBaseInput = forwardRef(function HvBaseInput2(props, ref) {
     onChange,
     type = "text",
     placeholder,
-    multiline = false,
-    resizable = false,
-    invalid = false,
+    multiline,
+    resizable,
+    invalid,
     inputRef,
     inputProps = {},
     ...others

package/dist/esm/BaseInput/BaseInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseInput.js","sources":["../../../src/BaseInput/BaseInput.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\nimport { css as emotionCss, Global } from \"@emotion/react\";\nimport MuiInput, { InputProps as MuiInputProps } from \"@mui/material/Input\";\nimport {\n InputBaseProps,\n InputBaseComponentProps as MuiInputBaseComponentProps,\n} from \"@mui/material/InputBase\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n buildAriaPropsFromContext,\n buildFormElementPropsFromContext,\n HvFormElementContext,\n HvFormElementDescriptorsContext,\n} from \"../~~Forms~~\";\nimport { staticClasses, useClasses } from \"./BaseInput.styles\";\n\nexport { staticClasses as baseInputClasses };\n\nexport type HvBaseInputClasses = ExtractNames<typeof useClasses>;\n\n// Global styles for the base input.\nconst baseInputStyles = emotionCss({\n \"input:-webkit-autofill\": {\n WebkitBoxShadow: `0 0 0px 1000px ${theme.colors.atmo1} inset`,\n WebkitTextFillColor: theme.colors.secondary,\n },\n\n // Clears number input up/down arrows in Chrome and Firefox\n \"input::-webkit-outer-spin-button,input::-webkit-inner-spin-button\": {\n WebkitAppearance: \"none\",\n margin: 0,\n },\n \"input[type=number]\": {\n MozAppearance: \"textfield\",\n },\n\n // Clears time input clock in Chrome\n \"input::-webkit-calendar-picker-indicator\": {\n display: \"none\",\n },\n\n // Clears search input clear button in Chrome\n \"input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration\":\n {\n display: \"none\",\n },\n});\n\nexport interface HvBaseInputProps\n extends Omit<MuiInputProps, \"onChange\" \| \"classes\" \| \"ref\"> {\n /** The input name. /\n name?: string;\n /* The value of the input, when controlled. /\n value?: string;\n /* The initial value of the input, when uncontrolled. /\n defaultValue?: string;\n /* If `true` the input is disabled. /\n disabled?: boolean;\n /* Indicates that the input is not editable. /\n readOnly?: boolean;\n /* If true, the input element will be required. /\n required?: boolean;\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 onChange?: (\n event: React.ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>,\n value: string,\n ) => void;\n /* The input type. /\n type?: string;\n /* Label inside the input used to help user. /\n placeholder?: string;\n /* If true, a textarea element will be rendered. /\n multiline?: boolean;\n /* If true and multiline is also true the textarea element will be resizable. /\n resizable?: boolean;\n /* Denotes if the input is in an invalid state. /\n invalid?: boolean;\n /* Attributes applied to the input element. /\n inputProps?: MuiInputBaseComponentProps;\n /* Allows passing a ref to the underlying input /\n inputRef?: InputBaseProps[\"inputRef\"];\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvBaseInputClasses;\n}\n\n/\n An Input component that only posses the most basic functionalities.\n * It should be used alongside the other form elements to construct a proper accessible form.\n */\nexport const HvBaseInput = forwardRef<\n // no-indent\n unknown,\n HvBaseInputProps\n>(function HvBaseInput(props, ref) {\n const {\n classes: classesProp,\n className = \"\",\n id,\n name,\n value,\n defaultValue,\n required,\n readOnly,\n disabled,\n onChange,\n type = \"text\",\n placeholder,\n multiline ~~= false~~,\n resizable ~~= false~~,\n invalid ~~= false~~,\n inputRef,\n inputProps = {},\n ...others\n } = useDefaultProps(\"HvBaseInput\", props);\n const { classes, cx } = useClasses(classesProp);\n const formElementContext = useContext(HvFormElementContext);\n const formElementProps = buildFormElementPropsFromContext(\n name,\n disabled,\n readOnly,\n required,\n formElementContext,\n );\n\n const forkedRef = useForkRef(ref, inputRef);\n\n const localInvalid = invalid \|\| formElementProps.status === \"invalid\";\n\n const formElementDescriptorsContext = useContext(\n HvFormElementDescriptorsContext,\n );\n const ariaProps = buildAriaPropsFromContext(\n inputProps,\n formElementDescriptorsContext,\n localInvalid,\n id,\n );\n\n const onChangeHandler: MuiInputProps[\"onChange\"] = (event) => {\n onChange?.(event, event.target.value);\n };\n\n return (\n <>\n <Global styles={baseInputStyles} />\n <div\n className={cx(classes.root, className, {\n [classes.disabled]: formElementProps.disabled,\n [classes.invalid]: localInvalid,\n [classes.resizable]: multiline && resizable,\n [classes.readOnly]: formElementProps.readOnly,\n })}\n >\n <MuiInput\n id={id}\n name={formElementProps.name}\n value={value}\n defaultValue={defaultValue}\n type={type}\n placeholder={placeholder}\n readOnly={!!formElementProps.readOnly}\n disabled={formElementProps.disabled}\n onChange={onChangeHandler}\n className={cx({\n [classes.inputRootInvalid]: localInvalid,\n [classes.inputRootReadOnly]: formElementProps.readOnly,\n })}\n classes={{\n root: classes.inputRoot,\n focused: classes.inputRootFocused,\n disabled: classes.inputRootDisabled,\n multiline: classes.inputRootMultiline,\n input: cx(classes.input, {\n [classes.inputResizable]: !formElementProps.disabled && resizable,\n [classes.inputDisabled]: formElementProps.disabled,\n [classes.inputReadOnly]: formElementProps.readOnly,\n }),\n }}\n inputProps={{\n // Avoid the required attribute at the root node\n required: formElementProps.required,\n ...inputProps,\n ...ariaProps,\n }}\n inputRef={forkedRef}\n multiline={multiline}\n rows={10}\n {...others}\n />\n {!multiline && (\n <div role=\"presentation\" className={classes.inputBorderContainer} />\n )}\n </div>\n </>\n );\n});\n"],"names":["emotionCss","HvBaseInput"],"mappings":"~~;;;;;;;;;;;;~~AA2BA,MAAM,kBAAkBA,IAAW;AAAA,EACjC,0BAA0B;AAAA,IACxB,iBAAiB,kBAAkB,MAAM,OAAO,KAAK;AAAA,IACrD,qBAAqB,MAAM,OAAO;AAAA,EACpC;AAAA;AAAA,EAGA,qEAAqE;AAAA,IACnE,kBAAkB;AAAA,IAClB,QAAQ;AAAA,EACV;AAAA,EACA,sBAAsB;AAAA,IACpB,eAAe;AAAA,EACjB;AAAA;AAAA,EAGA,4CAA4C;AAAA,IAC1C,SAAS;AAAA,EACX;AAAA;AAAA,EAGA,sJACE;AAAA,IACE,SAAS;AAAA,EAAA;AAEf,CAAC;AA4CM,MAAM,cAAc,WAIzB,SAASC,aAAY,OAAO,KAAK;AAC3B,QAAA;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA~~,YAAY~~;AAAA,~~IACZ,YAAY~~;AAAA,~~IACZ,UAAU~~;AAAA,~~IACV~~;AAAA,IACA,aAAa,CAAC;AAAA,IACd,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AACxC,QAAA,qBAAqB,WAAW,oBAAoB;AAC1D,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEM,QAAA,YAAY,WAAW,KAAK,QAAQ;AAEpC,QAAA,eAAe,WAAW,iBAAiB,WAAW;AAE5D,QAAM,gCAAgC;AAAA,IACpC;AAAA,EACF;AACA,QAAM,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEM,QAAA,kBAA6C,CAAC,UAAU;AACjD,eAAA,OAAO,MAAM,OAAO,KAAK;AAAA,EACtC;AAEA,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,oBAAA,QAAA,EAAO,QAAQ,gBAAiB,CAAA;AAAA,IACjC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,UACrC,CAAC,QAAQ,QAAQ,GAAG,iBAAiB;AAAA,UACrC,CAAC,QAAQ,OAAO,GAAG;AAAA,UACnB,CAAC,QAAQ,SAAS,GAAG,aAAa;AAAA,UAClC,CAAC,QAAQ,QAAQ,GAAG,iBAAiB;AAAA,QAAA,CACtC;AAAA,QAED,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,MAAM,iBAAiB;AAAA,cACvB;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,UAAU,CAAC,CAAC,iBAAiB;AAAA,cAC7B,UAAU,iBAAiB;AAAA,cAC3B,UAAU;AAAA,cACV,WAAW,GAAG;AAAA,gBACZ,CAAC,QAAQ,gBAAgB,GAAG;AAAA,gBAC5B,CAAC,QAAQ,iBAAiB,GAAG,iBAAiB;AAAA,cAAA,CAC/C;AAAA,cACD,SAAS;AAAA,gBACP,MAAM,QAAQ;AAAA,gBACd,SAAS,QAAQ;AAAA,gBACjB,UAAU,QAAQ;AAAA,gBAClB,WAAW,QAAQ;AAAA,gBACnB,OAAO,GAAG,QAAQ,OAAO;AAAA,kBACvB,CAAC,QAAQ,cAAc,GAAG,CAAC,iBAAiB,YAAY;AAAA,kBACxD,CAAC,QAAQ,aAAa,GAAG,iBAAiB;AAAA,kBAC1C,CAAC,QAAQ,aAAa,GAAG,iBAAiB;AAAA,gBAC3C,CAAA;AAAA,cACH;AAAA,cACA,YAAY;AAAA;AAAA,gBAEV,UAAU,iBAAiB;AAAA,gBAC3B,GAAG;AAAA,gBACH,GAAG;AAAA,cACL;AAAA,cACA,UAAU;AAAA,cACV;AAAA,cACA,MAAM;AAAA,cACL,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,UACC,CAAC,aACC,oBAAA,OAAA,EAAI,MAAK,gBAAe,WAAW,QAAQ,qBAAsB,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAEtE,GACF;AAEJ,CAAC;"}
1	+ {"version":3,"file":"BaseInput.js","sources":["../../../src/BaseInput/BaseInput.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\nimport { css as emotionCss, Global } from \"@emotion/react\";\nimport MuiInput, { InputProps as MuiInputProps } from \"@mui/material/Input\";\nimport {\n InputBaseProps,\n InputBaseComponentProps as MuiInputBaseComponentProps,\n} from \"@mui/material/InputBase\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n buildAriaPropsFromContext,\n buildFormElementPropsFromContext,\n HvFormElementContext,\n HvFormElementDescriptorsContext,\n} from \"../FormElement\";\nimport { staticClasses, useClasses } from \"./BaseInput.styles\";\n\nexport { staticClasses as baseInputClasses };\n\nexport type HvBaseInputClasses = ExtractNames<typeof useClasses>;\n\n// Global styles for the base input.\nconst baseInputStyles = emotionCss({\n \"input:-webkit-autofill\": {\n WebkitBoxShadow: `0 0 0px 1000px ${theme.colors.atmo1} inset`,\n WebkitTextFillColor: theme.colors.secondary,\n },\n\n // Clears number input up/down arrows in Chrome and Firefox\n \"input::-webkit-outer-spin-button,input::-webkit-inner-spin-button\": {\n WebkitAppearance: \"none\",\n margin: 0,\n },\n \"input[type=number]\": {\n MozAppearance: \"textfield\",\n },\n\n // Clears time input clock in Chrome\n \"input::-webkit-calendar-picker-indicator\": {\n display: \"none\",\n },\n\n // Clears search input clear button in Chrome\n \"input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration\":\n {\n display: \"none\",\n },\n});\n\nexport interface HvBaseInputProps\n extends Omit<MuiInputProps, \"onChange\" \| \"classes\" \| \"ref\"> {\n /** The input name. /\n name?: string;\n /* The value of the input, when controlled. /\n value?: string;\n /* The initial value of the input, when uncontrolled. /\n defaultValue?: string;\n /* If `true` the input is disabled. /\n disabled?: boolean;\n /* Indicates that the input is not editable. /\n readOnly?: boolean;\n /* If true, the input element will be required. /\n required?: boolean;\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 onChange?: (\n event: React.ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>,\n value: string,\n ) => void;\n /* The input type. /\n type?: string;\n /* Label inside the input used to help user. /\n placeholder?: string;\n /* If true, a textarea element will be rendered. /\n multiline?: boolean;\n /* If true and multiline is also true the textarea element will be resizable. /\n resizable?: boolean;\n /* Denotes if the input is in an invalid state. /\n invalid?: boolean;\n /* Attributes applied to the input element. /\n inputProps?: MuiInputBaseComponentProps;\n /* Allows passing a ref to the underlying input /\n inputRef?: InputBaseProps[\"inputRef\"];\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvBaseInputClasses;\n}\n\n/\n An Input component that only posses the most basic functionalities.\n * It should be used alongside the other form elements to construct a proper accessible form.\n */\nexport const HvBaseInput = forwardRef<\n // no-indent\n unknown,\n HvBaseInputProps\n>(function HvBaseInput(props, ref) {\n const {\n classes: classesProp,\n className = \"\",\n id,\n name,\n value,\n defaultValue,\n required,\n readOnly,\n disabled,\n onChange,\n type = \"text\",\n placeholder,\n multiline,\n resizable,\n invalid,\n inputRef,\n inputProps = {},\n ...others\n } = useDefaultProps(\"HvBaseInput\", props);\n const { classes, cx } = useClasses(classesProp);\n const formElementContext = useContext(HvFormElementContext);\n const formElementProps = buildFormElementPropsFromContext(\n name,\n disabled,\n readOnly,\n required,\n formElementContext,\n );\n\n const forkedRef = useForkRef(ref, inputRef);\n\n const localInvalid = invalid \|\| formElementProps.status === \"invalid\";\n\n const formElementDescriptorsContext = useContext(\n HvFormElementDescriptorsContext,\n );\n const ariaProps = buildAriaPropsFromContext(\n inputProps,\n formElementDescriptorsContext,\n localInvalid,\n id,\n );\n\n const onChangeHandler: MuiInputProps[\"onChange\"] = (event) => {\n onChange?.(event, event.target.value);\n };\n\n return (\n <>\n <Global styles={baseInputStyles} />\n <div\n className={cx(classes.root, className, {\n [classes.disabled]: formElementProps.disabled,\n [classes.invalid]: localInvalid,\n [classes.resizable]: multiline && resizable,\n [classes.readOnly]: formElementProps.readOnly,\n })}\n >\n <MuiInput\n id={id}\n name={formElementProps.name}\n value={value}\n defaultValue={defaultValue}\n type={type}\n placeholder={placeholder}\n readOnly={!!formElementProps.readOnly}\n disabled={formElementProps.disabled}\n onChange={onChangeHandler}\n className={cx({\n [classes.inputRootInvalid]: localInvalid,\n [classes.inputRootReadOnly]: formElementProps.readOnly,\n })}\n classes={{\n root: classes.inputRoot,\n focused: classes.inputRootFocused,\n disabled: classes.inputRootDisabled,\n multiline: classes.inputRootMultiline,\n input: cx(classes.input, {\n [classes.inputResizable]: !formElementProps.disabled && resizable,\n [classes.inputDisabled]: formElementProps.disabled,\n [classes.inputReadOnly]: formElementProps.readOnly,\n }),\n }}\n inputProps={{\n // Avoid the required attribute at the root node\n required: formElementProps.required,\n ...inputProps,\n ...ariaProps,\n }}\n inputRef={forkedRef}\n multiline={multiline}\n rows={10}\n {...others}\n />\n {!multiline && (\n <div role=\"presentation\" className={classes.inputBorderContainer} />\n )}\n </div>\n </>\n );\n});\n"],"names":["emotionCss","HvBaseInput"],"mappings":"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"}

package/dist/esm/BaseInput/validations.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import validationState from "../Forms/FormElement/validationStates.js";
+import { validationStates } from "../FormElement/utils.js";
 const isNumeric = (num) => (
   // to prevent Number( <spaces> ) = 0
   num.trim().length > 0 && !Number.isNaN(Number(num))
@@ -25,9 +25,9 @@ const computeValidationType = (type) => {
 const hasBuiltInValidations = (required, validationType, minCharQuantity, maxCharQuantity, validation, inputProps) => required || validationType !== validationTypes.none || minCharQuantity != null || maxCharQuantity != null || validation != null || inputProps?.required != null || inputProps?.minLength != null || inputProps?.maxLength != null || inputProps?.min != null || inputProps?.max != null || inputProps?.type != null && inputProps?.type !== "text" && inputProps?.type !== "password" || inputProps?.pattern != null;
 const computeValidationState = (inputValidity, isEmptyValue) => {
   if (inputValidity.valid && isEmptyValue) {
-    return validationState.standBy;
+    return validationStates.standBy;
   }
-  return inputValidity.valid ? validationState.valid : validationState.invalid;
+  return inputValidity.valid ? validationStates.valid : validationStates.invalid;
 };
 const computeValidationMessage = (inputValidity, errorMessages) => {
   if (inputValidity.valid) {

package/dist/esm/BaseInput/validations.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"validations.js","sources":["../../../src/BaseInput/validations.ts"],"sourcesContent":["import { InputBaseComponentProps } from \"@mui/material/InputBase\";\n\nimport validationStates from \"../~~Forms/~~FormElement~~/validationStates~~\";\n\n/** Checks if the value is a number. /\nconst isNumeric = (num: string) =>\n // to prevent Number( <spaces> ) = 0\n num.trim().length > 0 && !Number.isNaN(Number(num));\n\n/* Checks if the value is an email /\nconst isEmail = (email: string) => {\n const regexp =\n /^[^\\\\s]+[a-z0-9!#$%&'+/=?^_`{\|}~-]+(?:.[a-z0-9!#$%&'+/=?^_`{\|}~-]+)@(?:[a-z0-9](?:[a-z0-9-][a-z0-9])?[.])+[a-z0-9](?:[a-z0-9-][a-z0-9])$/i;\n return regexp.test(email);\n};\n\nexport const validationTypes = Object.freeze({\n none: \"none\",\n number: \"number\",\n email: \"email\",\n});\n\n/** Returns the input's validation type based in the type of the input. /\nexport const computeValidationType = (type: React.HTMLInputTypeAttribute) => {\n switch (type) {\n case \"number\":\n return validationTypes.number;\n case \"email\":\n return validationTypes.email;\n\n default:\n return validationTypes.none;\n }\n};\n\n/\n Checks whether any integrated validation, native or not, is active.\n /\nexport const hasBuiltInValidations = (\n required: boolean,\n validationType: React.HTMLInputTypeAttribute,\n minCharQuantity: number \| null \| undefined,\n maxCharQuantity: number \| null \| undefined,\n validation?: (value: string) => boolean,\n inputProps?: InputBaseComponentProps,\n) =>\n required \|\|\n validationType !== validationTypes.none \|\|\n minCharQuantity != null \|\|\n maxCharQuantity != null \|\|\n validation != null \|\|\n inputProps?.required != null \|\|\n inputProps?.minLength != null \|\|\n inputProps?.maxLength != null \|\|\n inputProps?.min != null \|\|\n inputProps?.max != null \|\|\n (inputProps?.type != null &&\n inputProps?.type !== \"text\" &&\n inputProps?.type !== \"password\") \|\|\n inputProps?.pattern != null;\n\n/* Returns the form element's validation state based in the validity state of the input. /\nexport const computeValidationState = (\n inputValidity: HvInputValidity,\n isEmptyValue: boolean,\n) => {\n // to keep 2.x behaviour,\n // consider that if the value is empty (and not required) we're returning to the standBy state.\n // might not make sense, as it makes impossible to say if the user explicitly cleared the input.\n if (inputValidity.valid && isEmptyValue) {\n return validationStates.standBy;\n }\n\n return inputValidity.valid\n ? validationStates.valid\n : validationStates.invalid;\n};\n\n/\n Returns a error message based in the validity state of the input.\n \n Only one error message is returned even if multiple validations fail.\n * Also, only required, minCharQuantity, maxCharQuantity and validationType have specific error messages.\n \n For further customization both status and statusMessage should be controlled and\n * set using the onBlur callback that receives both the value and the input validity object.\n /\nexport const computeValidationMessage = (\n inputValidity: HvInputValidity,\n /* The available localized error messages. /\n errorMessages: Record<string, string>,\n) => {\n if (inputValidity.valid) {\n return \"\";\n }\n\n if (inputValidity.valueMissing) {\n return errorMessages.requiredError;\n }\n if (inputValidity.tooLong) {\n return errorMessages.maxCharError;\n }\n if (inputValidity.tooShort) {\n return errorMessages.minCharError;\n }\n if (inputValidity.typeMismatch) {\n return errorMessages.typeMismatchError;\n }\n\n return errorMessages.error;\n};\n\n/\n Returns a object describing the validity state of the input.\n \n It implements the native browser's ValidityState interface:\n * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n */\nexport const validateInput = (\n input: HTMLInputElement \| HTMLTextAreaElement \| null,\n value: string,\n required: boolean,\n minCharQuantity: any,\n maxCharQuantity: any,\n validationType: string,\n validation?: (value: string) => boolean,\n): HvInputValidity => {\n // bootstrap validity object using browser's built-in validation\n const inputValidity: HvInputValidity = {\n valid: input?.validity?.valid ?? true,\n badInput: input?.validity?.badInput,\n customError: input?.validity?.customError,\n patternMismatch: input?.validity?.patternMismatch,\n rangeOverflow: input?.validity?.rangeOverflow,\n rangeUnderflow: input?.validity?.rangeUnderflow,\n stepMismatch: input?.validity?.stepMismatch,\n tooLong: input?.validity?.tooLong,\n tooShort: input?.validity?.tooShort,\n typeMismatch: input?.validity?.typeMismatch,\n valueMissing: input?.validity?.valueMissing,\n };\n\n if (!value) {\n if (required) {\n // this is redundant because we're setting the required property in the native input\n inputValidity.valueMissing = true;\n inputValidity.valid = false;\n }\n } else {\n // we're not setting minlength and maxlength in the native input\n // to avoid different browser's behaviours and keep the user experience consistent\n if (minCharQuantity !== null && value.length < minCharQuantity) {\n inputValidity.tooShort = true;\n inputValidity.valid = false;\n }\n\n if (maxCharQuantity !== null && value.length > maxCharQuantity) {\n inputValidity.tooLong = true;\n inputValidity.valid = false;\n }\n\n // the validationType is used instead of type\n // for the same reason stated above\n switch (validationType) {\n case validationTypes.number:\n if (!isNumeric(value)) {\n inputValidity.typeMismatch = true;\n inputValidity.valid = false;\n }\n break;\n\n case validationTypes.email:\n if (!isEmail(value)) {\n inputValidity.typeMismatch = true;\n inputValidity.valid = false;\n }\n break;\n\n default:\n }\n\n if (validation != null && !validation(value)) {\n inputValidity.customError = true;\n inputValidity.valid = false;\n }\n }\n\n return inputValidity;\n};\n\~~nexport~~ ~~type~~ ~~HvInputValidity~~ = {~~\n valid?:~~ ~~boolean;\n badInput?:~~ ~~boolean;\n customError?:~~ ~~boolean;\n patternMismatch?:~~ ~~boolean;\n rangeOverflow?:~~ ~~boolean;\n rangeUnderflow?:~~ ~~boolean;\n stepMismatch?:~~ ~~boolean~~;\n ~~tooLong?:~~ ~~boolean;\n tooShort?:~~ ~~boolean;\n typeMismatch?:~~ ~~boolean;\n valueMissing?:~~ ~~boolean;\n~~};\n\nexport const DEFAULT_ERROR_MESSAGES = {\n error: \"Invalid value\",\n requiredError: \"The value is required\",\n minCharError: \"The value is too short\",\n maxCharError: \"The value is too long\",\n typeMismatchError: \"Invalid value\",\n};\n"],"names":[~~"validationStates"~~],"mappings":";AAKA,MAAM,YAAY,CAAC;AAAA;AAAA,EAEjB,IAAI,KAAK,EAAE,SAAS,KAAK,CAAC,OAAO,MAAM,OAAO,GAAG,CAAC;AAAA;AAGpD,MAAM,UAAU,CAAC,UAAkB;AACjC,QAAM,SACJ;AACK,SAAA,OAAO,KAAK,KAAK;AAC1B;AAEa,MAAA,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT,CAAC;AAGY,MAAA,wBAAwB,CAAC,SAAuC;AAC3E,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,gBAAgB;AAAA,IACzB,KAAK;AACH,aAAO,gBAAgB;AAAA,IAEzB;AACE,aAAO,gBAAgB;AAAA,EAAA;AAE7B;AAKO,MAAM,wBAAwB,CACnC,UACA,gBACA,iBACA,iBACA,YACA,eAEA,YACA,mBAAmB,gBAAgB,QACnC,mBAAmB,QACnB,mBAAmB,QACnB,cAAc,QACd,YAAY,YAAY,QACxB,YAAY,aAAa,QACzB,YAAY,aAAa,QACzB,YAAY,OAAO,QACnB,YAAY,OAAO,QAClB,YAAY,QAAQ,QACnB,YAAY,SAAS,UACrB,YAAY,SAAS,cACvB,YAAY,WAAW;AAGZ,MAAA,yBAAyB,CACpC,eACA,iBACG;AAIC,MAAA,cAAc,SAAS,cAAc;AACvC,~~WAAOA~~,~~gBAAiB~~;AAAA,EAAA;AAG1B,SAAO,cAAc,~~QACjBA~~,~~gBAAiB~~,~~QACjBA~~,~~gBAAiB~~;AACvB;AAWa,MAAA,2BAA2B,CACtC,eAEA,kBACG;AACH,MAAI,cAAc,OAAO;AAChB,WAAA;AAAA,EAAA;AAGT,MAAI,cAAc,cAAc;AAC9B,WAAO,cAAc;AAAA,EAAA;AAEvB,MAAI,cAAc,SAAS;AACzB,WAAO,cAAc;AAAA,EAAA;AAEvB,MAAI,cAAc,UAAU;AAC1B,WAAO,cAAc;AAAA,EAAA;AAEvB,MAAI,cAAc,cAAc;AAC9B,WAAO,cAAc;AAAA,EAAA;AAGvB,SAAO,cAAc;AACvB;AAQa,MAAA,gBAAgB,CAC3B,OACA,OACA,UACA,iBACA,iBACA,gBACA,eACoB;AAEpB,QAAM,gBAAiC;AAAA,IACrC,OAAO,OAAO,UAAU,SAAS;AAAA,IACjC,UAAU,OAAO,UAAU;AAAA,IAC3B,aAAa,OAAO,UAAU;AAAA,IAC9B,iBAAiB,OAAO,UAAU;AAAA,IAClC,eAAe,OAAO,UAAU;AAAA,IAChC,gBAAgB,OAAO,UAAU;AAAA,IACjC,cAAc,OAAO,UAAU;AAAA,IAC/B,SAAS,OAAO,UAAU;AAAA,IAC1B,UAAU,OAAO,UAAU;AAAA,IAC3B,cAAc,OAAO,UAAU;AAAA,IAC/B,cAAc,OAAO,UAAU;AAAA,EACjC;AAEA,MAAI,CAAC,OAAO;AACV,QAAI,UAAU;AAEZ,oBAAc,eAAe;AAC7B,oBAAc,QAAQ;AAAA,IAAA;AAAA,EACxB,OACK;AAGL,QAAI,oBAAoB,QAAQ,MAAM,SAAS,iBAAiB;AAC9D,oBAAc,WAAW;AACzB,oBAAc,QAAQ;AAAA,IAAA;AAGxB,QAAI,oBAAoB,QAAQ,MAAM,SAAS,iBAAiB;AAC9D,oBAAc,UAAU;AACxB,oBAAc,QAAQ;AAAA,IAAA;AAKxB,YAAQ,gBAAgB;AAAA,MACtB,KAAK,gBAAgB;AACf,YAAA,CAAC,UAAU,KAAK,GAAG;AACrB,wBAAc,eAAe;AAC7B,wBAAc,QAAQ;AAAA,QAAA;AAExB;AAAA,MAEF,KAAK,gBAAgB;AACf,YAAA,CAAC,QAAQ,KAAK,GAAG;AACnB,wBAAc,eAAe;AAC7B,wBAAc,QAAQ;AAAA,QAAA;AAExB;AAAA,IAEF;AAGF,QAAI,cAAc,QAAQ,CAAC,WAAW,KAAK,GAAG;AAC5C,oBAAc,cAAc;AAC5B,oBAAc,QAAQ;AAAA,IAAA;AAAA,EACxB;AAGK,SAAA;AACT;~~AAgBO~~,MAAM,yBAAyB;AAAA,EACpC,OAAO;AAAA,EACP,eAAe;AAAA,EACf,cAAc;AAAA,EACd,cAAc;AAAA,EACd,mBAAmB;AACrB;"}
1	+ {"version":3,"file":"validations.js","sources":["../../../src/BaseInput/validations.ts"],"sourcesContent":["import { InputBaseComponentProps } from \"@mui/material/InputBase\";\n\nimport { validationStates } from \"../FormElement\";\n\n/** Checks if the value is a number. /\nconst isNumeric = (num: string) =>\n // to prevent Number( <spaces> ) = 0\n num.trim().length > 0 && !Number.isNaN(Number(num));\n\n/* Checks if the value is an email /\nconst isEmail = (email: string) => {\n const regexp =\n /^[^\\\\s]+[a-z0-9!#$%&'+/=?^_`{\|}~-]+(?:.[a-z0-9!#$%&'+/=?^_`{\|}~-]+)@(?:[a-z0-9](?:[a-z0-9-][a-z0-9])?[.])+[a-z0-9](?:[a-z0-9-][a-z0-9])$/i;\n return regexp.test(email);\n};\n\nexport const validationTypes = Object.freeze({\n none: \"none\",\n number: \"number\",\n email: \"email\",\n});\n\n/** Returns the input's validation type based in the type of the input. /\nexport const computeValidationType = (type: React.HTMLInputTypeAttribute) => {\n switch (type) {\n case \"number\":\n return validationTypes.number;\n case \"email\":\n return validationTypes.email;\n\n default:\n return validationTypes.none;\n }\n};\n\n/\n Checks whether any integrated validation, native or not, is active.\n /\nexport const hasBuiltInValidations = (\n required: boolean \| undefined,\n validationType: React.HTMLInputTypeAttribute,\n minCharQuantity: number \| null \| undefined,\n maxCharQuantity: number \| null \| undefined,\n validation?: (value: string) => boolean,\n inputProps?: InputBaseComponentProps,\n) =>\n required \|\|\n validationType !== validationTypes.none \|\|\n minCharQuantity != null \|\|\n maxCharQuantity != null \|\|\n validation != null \|\|\n inputProps?.required != null \|\|\n inputProps?.minLength != null \|\|\n inputProps?.maxLength != null \|\|\n inputProps?.min != null \|\|\n inputProps?.max != null \|\|\n (inputProps?.type != null &&\n inputProps?.type !== \"text\" &&\n inputProps?.type !== \"password\") \|\|\n inputProps?.pattern != null;\n\n/* Returns the form element's validation state based in the validity state of the input. /\nexport const computeValidationState = (\n inputValidity: HvInputValidity,\n isEmptyValue: boolean,\n) => {\n // to keep 2.x behaviour,\n // consider that if the value is empty (and not required) we're returning to the standBy state.\n // might not make sense, as it makes impossible to say if the user explicitly cleared the input.\n if (inputValidity.valid && isEmptyValue) {\n return validationStates.standBy;\n }\n\n return inputValidity.valid\n ? validationStates.valid\n : validationStates.invalid;\n};\n\n/\n Returns a error message based in the validity state of the input.\n \n Only one error message is returned even if multiple validations fail.\n * Also, only required, minCharQuantity, maxCharQuantity and validationType have specific error messages.\n \n For further customization both status and statusMessage should be controlled and\n * set using the onBlur callback that receives both the value and the input validity object.\n /\nexport const computeValidationMessage = (\n inputValidity: HvInputValidity,\n /* The available localized error messages. /\n errorMessages: Record<string, string>,\n) => {\n if (inputValidity.valid) {\n return \"\";\n }\n\n if (inputValidity.valueMissing) {\n return errorMessages.requiredError;\n }\n if (inputValidity.tooLong) {\n return errorMessages.maxCharError;\n }\n if (inputValidity.tooShort) {\n return errorMessages.minCharError;\n }\n if (inputValidity.typeMismatch) {\n return errorMessages.typeMismatchError;\n }\n\n return errorMessages.error;\n};\n\n/\n Returns a object describing the validity state of the input.\n \n It implements the native browser's ValidityState interface:\n * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n */\nexport const validateInput = (\n input: HTMLInputElement \| HTMLTextAreaElement \| null,\n value: string,\n required: boolean \| undefined,\n minCharQuantity: any,\n maxCharQuantity: any,\n validationType: string,\n validation?: (value: string) => boolean,\n): HvInputValidity => {\n // bootstrap validity object using browser's built-in validation\n const inputValidity: HvInputValidity = {\n valid: input?.validity?.valid ?? true,\n badInput: input?.validity?.badInput,\n customError: input?.validity?.customError,\n patternMismatch: input?.validity?.patternMismatch,\n rangeOverflow: input?.validity?.rangeOverflow,\n rangeUnderflow: input?.validity?.rangeUnderflow,\n stepMismatch: input?.validity?.stepMismatch,\n tooLong: input?.validity?.tooLong,\n tooShort: input?.validity?.tooShort,\n typeMismatch: input?.validity?.typeMismatch,\n valueMissing: input?.validity?.valueMissing,\n };\n\n if (!value) {\n if (required) {\n // this is redundant because we're setting the required property in the native input\n inputValidity.valueMissing = true;\n inputValidity.valid = false;\n }\n } else {\n // we're not setting minlength and maxlength in the native input\n // to avoid different browser's behaviours and keep the user experience consistent\n if (minCharQuantity !== null && value.length < minCharQuantity) {\n inputValidity.tooShort = true;\n inputValidity.valid = false;\n }\n\n if (maxCharQuantity !== null && value.length > maxCharQuantity) {\n inputValidity.tooLong = true;\n inputValidity.valid = false;\n }\n\n // the validationType is used instead of type\n // for the same reason stated above\n switch (validationType) {\n case validationTypes.number:\n if (!isNumeric(value)) {\n inputValidity.typeMismatch = true;\n inputValidity.valid = false;\n }\n break;\n\n case validationTypes.email:\n if (!isEmail(value)) {\n inputValidity.typeMismatch = true;\n inputValidity.valid = false;\n }\n break;\n\n default:\n }\n\n if (validation != null && !validation(value)) {\n inputValidity.customError = true;\n inputValidity.valid = false;\n }\n }\n\n return inputValidity;\n};\n\ntype Mutable<T> = { -readonly [P in keyof T]: T[P] };\n\nexport interface HvInputValidity extends Partial<Mutable<ValidityState>> {}\n\nexport const DEFAULT_ERROR_MESSAGES = {\n error: \"Invalid value\",\n requiredError: \"The value is required\",\n minCharError: \"The value is too short\",\n maxCharError: \"The value is too long\",\n typeMismatchError: \"Invalid value\",\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Calendar/Calendar.js CHANGED Viewed

@@ -6,14 +6,13 @@ import { useClasses } from "./Calendar.styles.js";
 import { staticClasses } from "./Calendar.styles.js";
 import { isRange } from "./utils.js";
 import { HvSingleCalendar } from "./SingleCalendar/SingleCalendar.js";
-import { HvFormElementContext } from "../Forms/FormElement/context/FormElementContext.js";
-import { HvFormElementValueContext } from "../Forms/FormElement/context/FormElementValueContext.js";
+import { HvFormElementContext, HvFormElementValueContext } from "../FormElement/context.js";
 const HvCalendar = (props) => {
   const {
     classes: classesProp,
-    id,
+    id: idProp,
     locale = "en-US",
-    value,
+    value: valueProp,
     visibleMonth,
     visibleYear,
     rightVisibleMonth,
@@ -28,19 +27,19 @@ const HvCalendar = (props) => {
     ...others
   } = useDefaultProps("HvCalendar", props);
   const { classes } = useClasses(classesProp);
-  const { elementId } = useContext(HvFormElementContext);
+  const context = useContext(HvFormElementContext);
   const elementValue = useContext(HvFormElementValueContext);
-  const localValue = value ?? elementValue;
-  const localId = id ?? setId(elementId, "single-calendar");
-  const rangeMode = isRange(localValue);
-  const rightCalendarId = setId(localId, "single-calendar-right");
+  const value = valueProp ?? elementValue;
+  const id = idProp ?? setId(context.id, "single-calendar");
+  const rangeMode = isRange(value);
+  const rightCalendarId = setId(id, "single-calendar-right");
   const clampedMonth = visibleMonth && visibleMonth % 13 > 0 ? visibleMonth % 13 : 1;
   const singleCalendar = /* @__PURE__ */ jsx(
     HvSingleCalendar,
     {
-      id: localId,
+      id,
       locale,
-      value: localValue,
+      value,
       visibleMonth: clampedMonth,
       visibleYear,
       minimumDate,
@@ -59,9 +58,9 @@ const HvCalendar = (props) => {
       HvSingleCalendar,
       {
         className: classes.singleCalendar,
-        id: localId,
+        id,
         locale,
-        value: localValue,
+        value,
         visibleMonth: clampedMonth,
         visibleYear,
         minimumDate,
@@ -81,7 +80,7 @@ const HvCalendar = (props) => {
         className: classes.singleCalendar,
         id: rightCalendarId,
         locale,
-        value: localValue,
+        value,
         visibleMonth: rightVisibleMonth,
         visibleYear: rightVisibleYear,
         minimumDate,

package/dist/esm/Calendar/Calendar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Calendar.js","sources":["../../../src/Calendar/Calendar.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvFormElementContext, HvFormElementValueContext } from \"../~~Forms~~\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Calendar.styles\";\nimport { HvSingleCalendar } from \"./SingleCalendar\";\nimport { DateRangeProp, VisibilitySelectorActions } from \"./types\";\nimport { isRange } from \"./utils\";\n\nexport { staticClasses as calendarClasses };\n\nexport type HvCalendarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCalendarProps {\n /*\n Styles applied from the theme.\n /\n classes?: HvCalendarClasses;\n /\n Identifier.\n /\n id?: string;\n /\n The calendar locale. If undefined, it defaults to en-US\n \n /\n locale?: string;\n /*\n Date that the calendar would show.\n * if using the object format the calendar enter in range mode showing two calendars\n /\n value?: DateRangeProp \| Date;\n /\n Controls the visible month of the Calendar\n /\n visibleMonth?: number;\n /\n Controls the visible year of the Calendar\n /\n visibleYear?: number;\n /\n Controls the visible month of the Calendar on the right side of the datepicker\n /\n rightVisibleMonth?: number;\n /\n Controls the visible year of the Calendar on the right side of the datepicker\n /\n rightVisibleYear?: number;\n /\n Callback function to be triggered when the selected date has changed.\n /\n onChange?: (\n event:\n \| React.ChangeEvent<HTMLTextAreaElement \| HTMLInputElement>\n \| undefined,\n value: Date \| DateRangeProp,\n ) => void;\n /\n Callback function to be triggered when the selected date input has changed.\n /\n onInputChange?: (\n event:\n \| React.ChangeEvent<\n HTMLTextAreaElement \| HTMLInputElement \| HTMLButtonElement\n >\n \| undefined,\n value: Date \| DateRangeProp,\n position: \"left\" \| \"right\",\n ) => void;\n /\n Callback function to be triggered when the user clicks on the month or year selector.\n * it receives the action that was pressed:\n * previous_month, next_month, previous_year, next_year,month\n /\n onVisibleDateChange?: (\n event:\n \| React.ChangeEvent<HTMLTextAreaElement \| HTMLInputElement>\n \| undefined,\n action: VisibilitySelectorActions,\n value?: Date \| DateRangeProp \| number,\n position?: \"left\" \| \"right\",\n ) => void;\n /\n The maximum selectable date after this all values are disabled.\n /\n maximumDate?: Date;\n /\n The minimum selectable date before this all values are disabled.\n /\n minimumDate?: Date;\n /\n An element placed before the Calendar\n /\n startAdornment?: React.ReactNode;\n /\n Indicates if header should display the day of week.\n /\n showDayOfWeek?: boolean;\n /\n Label shown when date is invalid.\n */\n invalidDateLabel?: string;\n}\n\nexport const HvCalendar = (props: HvCalendarProps) => {\n const {\n classes: classesProp,\n id,\n locale = \"en-US\",\n value,\n visibleMonth,\n visibleYear,\n rightVisibleMonth,\n rightVisibleYear,\n minimumDate,\n maximumDate,\n startAdornment,\n onChange,\n onInputChange,\n onVisibleDateChange,\n invalidDateLabel,\n ...others\n } = useDefaultProps(\"HvCalendar\", props);\n const { classes } = useClasses(classesProp);\n\n const { ~~elementId }~~ = useContext(HvFormElementContext);\n const elementValue = useContext(HvFormElementValueContext);\n const ~~localValue~~ = ~~value~~ ?? elementValue;\n const ~~localId~~ = id ?? setId(~~elementId~~, \"single-calendar\");\n const rangeMode = isRange(~~localValue~~);\n const rightCalendarId = setId(~~localId~~, \"single-calendar-right\");\n const clampedMonth =\n visibleMonth && visibleMonth % 13 > 0 ? visibleMonth % 13 : 1;\n\n const singleCalendar = (\n <HvSingleCalendar\n id={~~localId~~}\n locale={locale}\n value={~~localValue~~}\n visibleMonth={clampedMonth}\n visibleYear={visibleYear}\n minimumDate={minimumDate}\n maximumDate={maximumDate}\n onChange={onChange}\n onInputChange={(evt, date) => {\n onInputChange?.(evt, date, \"left\");\n }}\n onVisibleDateChange={onVisibleDateChange}\n invalidDateLabel={invalidDateLabel}\n {...others}\n />\n );\n\n const rangeCalendar = (\n <div className={classes.rangeCalendarContainer}>\n <HvSingleCalendar\n className={classes.singleCalendar}\n id={~~localId~~}\n locale={locale}\n value={~~localValue~~}\n visibleMonth={clampedMonth}\n visibleYear={visibleYear}\n minimumDate={minimumDate}\n maximumDate={maximumDate}\n onChange={onChange}\n onInputChange={(evt, date) => {\n onInputChange?.(evt, date, \"left\");\n }}\n onVisibleDateChange={(event, action, index) =>\n onVisibleDateChange?.(event, action, index, \"left\")\n }\n invalidDateLabel={invalidDateLabel}\n {...others}\n />\n\n <HvSingleCalendar\n className={classes.singleCalendar}\n id={rightCalendarId}\n locale={locale}\n value={~~localValue~~}\n visibleMonth={rightVisibleMonth}\n visibleYear={rightVisibleYear}\n minimumDate={minimumDate}\n maximumDate={maximumDate}\n onChange={onChange}\n onInputChange={(evt, date) => {\n onInputChange?.(evt, date, \"right\");\n }}\n onVisibleDateChange={(event, action, index) => {\n onVisibleDateChange?.(event, action, index, \"right\");\n }}\n showEndDate\n invalidDateLabel={invalidDateLabel}\n {...others}\n />\n </div>\n );\n\n return (\n <div className={classes.root}>\n {startAdornment}\n {rangeMode ? rangeCalendar : singleCalendar}\n </div>\n );\n};\n"],"names":[],"mappings":"~~;;;;;;;;;;AA4Ga~~,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,~~IACA~~,SAAS;AAAA,IACT;AAAA,~~IACA~~;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;~~AAE1C~~,~~QAAM~~,~~EAAE~~,~~UAAA,IAAc,~~WAAW,oBAAoB;~~AAC/C~~,QAAA,eAAe,WAAW,yBAAyB;AACzD,QAAM,aAAa~~,SAAS~~;~~AAC5B~~,QAAM,UAAU,MAAM,~~MAAM~~,~~WAAW~~,iBAAiB;AAClD,QAAA,YAAY,QAAQ,~~UAAU~~;~~AAC9B~~,QAAA,kBAAkB,MAAM,~~SAAS~~,uBAAuB;~~AAC9D~~,QAAM,eACJ,gBAAgB,eAAe,KAAK,IAAI,eAAe,KAAK;AAE9D,QAAM,iBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC~~,IAAI~~;AAAA,~~MACJ~~;AAAA,MACA~~,OAAO~~;AAAA,~~MACP~~,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe,CAAC,KAAK,SAAS;AACZ,wBAAA,KAAK,MAAM,MAAM;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EACN;AAGF,QAAM,gBACJ,qBAAC,OAAI,EAAA,WAAW,QAAQ,wBACtB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB~~,IAAI~~;AAAA,~~QACJ~~;AAAA,QACA~~,OAAO~~;AAAA,~~QACP~~,cAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,CAAC,KAAK,SAAS;AACZ,0BAAA,KAAK,MAAM,MAAM;AAAA,QACnC;AAAA,QACA,qBAAqB,CAAC,OAAO,QAAQ,UACnC,sBAAsB,OAAO,QAAQ,OAAO,MAAM;AAAA,QAEpD;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,IAAI;AAAA,QACJ;AAAA,QACA~~,OAAO~~;AAAA,~~QACP~~,cAAc;AAAA,QACd,aAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,CAAC,KAAK,SAAS;AACZ,0BAAA,KAAK,MAAM,OAAO;AAAA,QACpC;AAAA,QACA,qBAAqB,CAAC,OAAO,QAAQ,UAAU;AACvB,gCAAA,OAAO,QAAQ,OAAO,OAAO;AAAA,QACrD;AAAA,QACA,aAAW;AAAA,QACX;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EACN,GACF;AAGF,SACG,qBAAA,OAAA,EAAI,WAAW,QAAQ,MACrB,UAAA;AAAA,IAAA;AAAA,IACA,YAAY,gBAAgB;AAAA,EAAA,GAC/B;AAEJ;"}
1	+ {"version":3,"file":"Calendar.js","sources":["../../../src/Calendar/Calendar.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n HvFormElementContext,\n HvFormElementValueContext,\n} from \"../FormElement\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Calendar.styles\";\nimport { HvSingleCalendar } from \"./SingleCalendar\";\nimport { DateRangeProp, VisibilitySelectorActions } from \"./types\";\nimport { isRange } from \"./utils\";\n\nexport { staticClasses as calendarClasses };\n\nexport type HvCalendarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCalendarProps {\n /*\n Styles applied from the theme.\n /\n classes?: HvCalendarClasses;\n /\n Identifier.\n /\n id?: string;\n /\n The calendar locale. If undefined, it defaults to en-US\n \n /\n locale?: string;\n /*\n Date that the calendar would show.\n * if using the object format the calendar enter in range mode showing two calendars\n /\n value?: DateRangeProp \| Date;\n /\n Controls the visible month of the Calendar\n /\n visibleMonth?: number;\n /\n Controls the visible year of the Calendar\n /\n visibleYear?: number;\n /\n Controls the visible month of the Calendar on the right side of the datepicker\n /\n rightVisibleMonth?: number;\n /\n Controls the visible year of the Calendar on the right side of the datepicker\n /\n rightVisibleYear?: number;\n /\n Callback function to be triggered when the selected date has changed.\n /\n onChange?: (\n event:\n \| React.ChangeEvent<HTMLTextAreaElement \| HTMLInputElement>\n \| undefined,\n value: Date \| DateRangeProp,\n ) => void;\n /\n Callback function to be triggered when the selected date input has changed.\n /\n onInputChange?: (\n event:\n \| React.ChangeEvent<\n HTMLTextAreaElement \| HTMLInputElement \| HTMLButtonElement\n >\n \| undefined,\n value: Date \| DateRangeProp,\n position: \"left\" \| \"right\",\n ) => void;\n /\n Callback function to be triggered when the user clicks on the month or year selector.\n * it receives the action that was pressed:\n * previous_month, next_month, previous_year, next_year,month\n /\n onVisibleDateChange?: (\n event:\n \| React.ChangeEvent<HTMLTextAreaElement \| HTMLInputElement>\n \| undefined,\n action: VisibilitySelectorActions,\n value?: Date \| DateRangeProp \| number,\n position?: \"left\" \| \"right\",\n ) => void;\n /\n The maximum selectable date after this all values are disabled.\n /\n maximumDate?: Date;\n /\n The minimum selectable date before this all values are disabled.\n /\n minimumDate?: Date;\n /\n An element placed before the Calendar\n /\n startAdornment?: React.ReactNode;\n /\n Indicates if header should display the day of week.\n /\n showDayOfWeek?: boolean;\n /\n Label shown when date is invalid.\n */\n invalidDateLabel?: string;\n}\n\nexport const HvCalendar = (props: HvCalendarProps) => {\n const {\n classes: classesProp,\n id: idProp,\n locale = \"en-US\",\n value: valueProp,\n visibleMonth,\n visibleYear,\n rightVisibleMonth,\n rightVisibleYear,\n minimumDate,\n maximumDate,\n startAdornment,\n onChange,\n onInputChange,\n onVisibleDateChange,\n invalidDateLabel,\n ...others\n } = useDefaultProps(\"HvCalendar\", props);\n const { classes } = useClasses(classesProp);\n\n const context = useContext(HvFormElementContext);\n const elementValue = useContext(HvFormElementValueContext);\n const value = valueProp ?? elementValue;\n const id = idProp ?? setId(context.id, \"single-calendar\");\n const rangeMode = isRange(value);\n const rightCalendarId = setId(id, \"single-calendar-right\");\n const clampedMonth =\n visibleMonth && visibleMonth % 13 > 0 ? visibleMonth % 13 : 1;\n\n const singleCalendar = (\n <HvSingleCalendar\n id={id}\n locale={locale}\n value={value}\n visibleMonth={clampedMonth}\n visibleYear={visibleYear}\n minimumDate={minimumDate}\n maximumDate={maximumDate}\n onChange={onChange}\n onInputChange={(evt, date) => {\n onInputChange?.(evt, date, \"left\");\n }}\n onVisibleDateChange={onVisibleDateChange}\n invalidDateLabel={invalidDateLabel}\n {...others}\n />\n );\n\n const rangeCalendar = (\n <div className={classes.rangeCalendarContainer}>\n <HvSingleCalendar\n className={classes.singleCalendar}\n id={id}\n locale={locale}\n value={value}\n visibleMonth={clampedMonth}\n visibleYear={visibleYear}\n minimumDate={minimumDate}\n maximumDate={maximumDate}\n onChange={onChange}\n onInputChange={(evt, date) => {\n onInputChange?.(evt, date, \"left\");\n }}\n onVisibleDateChange={(event, action, index) =>\n onVisibleDateChange?.(event, action, index, \"left\")\n }\n invalidDateLabel={invalidDateLabel}\n {...others}\n />\n\n <HvSingleCalendar\n className={classes.singleCalendar}\n id={rightCalendarId}\n locale={locale}\n value={value}\n visibleMonth={rightVisibleMonth}\n visibleYear={rightVisibleYear}\n minimumDate={minimumDate}\n maximumDate={maximumDate}\n onChange={onChange}\n onInputChange={(evt, date) => {\n onInputChange?.(evt, date, \"right\");\n }}\n onVisibleDateChange={(event, action, index) => {\n onVisibleDateChange?.(event, action, index, \"right\");\n }}\n showEndDate\n invalidDateLabel={invalidDateLabel}\n {...others}\n />\n </div>\n );\n\n return (\n <div className={classes.root}>\n {startAdornment}\n {rangeMode ? rangeCalendar : singleCalendar}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AA+Ga,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,QAAA,UAAU,WAAW,oBAAoB;AACzC,QAAA,eAAe,WAAW,yBAAyB;AACzD,QAAM,QAAQ,aAAa;AAC3B,QAAM,KAAK,UAAU,MAAM,QAAQ,IAAI,iBAAiB;AAClD,QAAA,YAAY,QAAQ,KAAK;AACzB,QAAA,kBAAkB,MAAM,IAAI,uBAAuB;AACzD,QAAM,eACJ,gBAAgB,eAAe,KAAK,IAAI,eAAe,KAAK;AAE9D,QAAM,iBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe,CAAC,KAAK,SAAS;AACZ,wBAAA,KAAK,MAAM,MAAM;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EACN;AAGF,QAAM,gBACJ,qBAAC,OAAI,EAAA,WAAW,QAAQ,wBACtB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,CAAC,KAAK,SAAS;AACZ,0BAAA,KAAK,MAAM,MAAM;AAAA,QACnC;AAAA,QACA,qBAAqB,CAAC,OAAO,QAAQ,UACnC,sBAAsB,OAAO,QAAQ,OAAO,MAAM;AAAA,QAEpD;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,IAAI;AAAA,QACJ;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd,aAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,CAAC,KAAK,SAAS;AACZ,0BAAA,KAAK,MAAM,OAAO;AAAA,QACpC;AAAA,QACA,qBAAqB,CAAC,OAAO,QAAQ,UAAU;AACvB,gCAAA,OAAO,QAAQ,OAAO,OAAO;AAAA,QACrD;AAAA,QACA,aAAW;AAAA,QACX;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EACN,GACF;AAGF,SACG,qBAAA,OAAA,EAAI,WAAW,QAAQ,MACrB,UAAA;AAAA,IAAA;AAAA,IACA,YAAY,gBAAgB;AAAA,EAAA,GAC/B;AAEJ;"}