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

@hitachivantara/uikit-react-core 5.82.2 → 5.82.4

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 (231) hide show

package/dist/cjs/hocs/withTooltip.cjs CHANGED Viewed

@@ -10,41 +10,44 @@ const styles = {
     whiteSpace: "nowrap"
   }
 };
-const withTooltip = (Component, label = "", placement, hideTooltip, tooltipProps, tooltipContainerProps) => (props) => {
-  const [isHoverDisabled, setIsHoverDisabled] = React.useState(
-    false
-  );
-  const [open, setOpen] = React.useState(false);
-  const handleMouseEnter = (event) => {
-    const isHidden = hideTooltip?.(event);
-    setIsHoverDisabled(isHidden);
-    setOpen(!isHidden);
-  };
-  const handleMouseLeave = () => {
-    setIsHoverDisabled(false);
-    setOpen(false);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Tooltip.HvTooltip,
-    {
-      style: { ...styles.truncate },
-      disableHoverListener: isHoverDisabled,
-      disableFocusListener: true,
-      disableTouchListener: true,
-      title: label,
-      open,
-      placement,
-      ...tooltipProps,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          ...tooltipContainerProps,
-          onMouseEnter: handleMouseEnter,
-          onMouseLeave: handleMouseLeave,
-          children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props })
-        }
-      )
-    }
-  );
-};
+const withTooltip = (Component, label = "", placement, hideTooltip, tooltipProps, tooltipContainerProps) => (
+  // eslint-disable-next-line react/display-name
+  (props) => {
+    const [isHoverDisabled, setIsHoverDisabled] = React.useState(
+      false
+    );
+    const [open, setOpen] = React.useState(false);
+    const handleMouseEnter = (event) => {
+      const isHidden = hideTooltip?.(event);
+      setIsHoverDisabled(isHidden);
+      setOpen(!isHidden);
+    };
+    const handleMouseLeave = () => {
+      setIsHoverDisabled(false);
+      setOpen(false);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Tooltip.HvTooltip,
+      {
+        style: { ...styles.truncate },
+        disableHoverListener: isHoverDisabled,
+        disableFocusListener: true,
+        disableTouchListener: true,
+        title: label,
+        open,
+        placement,
+        ...tooltipProps,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ...tooltipContainerProps,
+            onMouseEnter: handleMouseEnter,
+            onMouseLeave: handleMouseLeave,
+            children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props })
+          }
+        )
+      }
+    );
+  }
+);
 exports.withTooltip = withTooltip;

package/dist/cjs/hooks/useIsMounted.cjs CHANGED Viewed

@@ -1,11 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const React__default = /* @__PURE__ */ _interopDefault(React);
 const useIsMounted = () => {
-  const isMounted = React__default.default.useRef(false);
-  React__default.default.useEffect(() => {
+  const isMounted = React.useRef(false);
+  React.useEffect(() => {
     isMounted.current = true;
     return () => {
       isMounted.current = false;

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/BaseDropdown/BaseDropdown.js CHANGED Viewed

@@ -15,7 +15,7 @@ import { staticClasses } from "./BaseDropdown.styles.js";
 import { BaseDropdownPanel } from "./BaseDropdownPanel.js";
 import { useBaseDropdownContext, BaseDropdownContext } from "./context.js";
 import { HvTypography } from "../Typography/Typography.js";
-const BaseDropdown = forwardRef((props, ref) => {
+const BaseDropdown = forwardRef(function BaseDropdown2(props, ref) {
   const {
     id: idProp,
     className,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseDropdown.js","sources":["../../../src/BaseDropdown/BaseDropdown.tsx"],"sourcesContent":["import {\n cloneElement,\n forwardRef,\n Fragment,\n isValidElement,\n useCallback,\n useMemo,\n useState,\n} from \"react\";\nimport { PopperProps, usePopper } from \"react-popper\";\nimport type { ClickAwayListenerProps } from \"@mui/material/ClickAwayListener\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { detectOverflow, Options, Placement } from \"@popperjs/core\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { getFirstAndLastFocus } from \"../utils/focusableElementFinder\";\nimport { isKey, isOneOfKeys } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./BaseDropdown.styles\";\nimport { BaseDropdownPanel } from \"./BaseDropdownPanel\";\nimport { BaseDropdownContext, useBaseDropdownContext } from \"./context\";\n\nexport { staticClasses as baseDropdownClasses };\n\nexport type HvBaseDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseDropdownProps\n extends HvBaseProps<HTMLDivElement, \"onToggle\"> {\n /*\n The role of the element that triggers the popup.\n \n Defaults to \"combobox\" if `component` and the default\n * \"textbox\" header is used, undefined otherwise.\n /\n role?: string;\n /\n Header placeholder.\n /\n placeholder?: React.ReactNode;\n /\n If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.\n /\n disabled?: boolean;\n /\n If `true` the dropdown will be in read only mode, unable to be interacted.\n /\n readOnly?: boolean;\n /\n Indicates that user input is required on the form element.\n /\n required?: boolean;\n /\n Disable the portal behavior.\n * The children stay within it's parent DOM hierarchy.\n /\n disablePortal?: boolean;\n /\n If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n * Defaults to `false`.\n /\n variableWidth?: boolean;\n /\n If `true` the dropdown starts opened if `false` it starts closed.\n /\n expanded?: boolean;\n /\n When uncontrolled, defines the initial expanded state.\n /\n defaultExpanded?: boolean;\n /\n An object containing props to be wired to the popper component.\n /\n popperProps?: Partial<PopperProps<any>>;\n /\n Placement of the dropdown.\n /\n placement?: \"left\" \| \"right\";\n /\n Replacement for the header component.\n * @deprecated use `Component` instead\n /\n component?: React.ReactNode;\n /* Replacement for the header component /\n headerComponent?: React.ElementType;\n /\n Adornment to replace the default arrows.\n /\n adornment?: React.ReactNode;\n /\n When dropdown changes the expanded state.\n /\n onToggle?: (event: Event, open: boolean) => void;\n /\n When user click outside the open container.\n /\n onClickOutside?: (event: Event) => void;\n /\n Callback called when the dropdown is opened and ready,\n * commonly used to set focus to the content.\n /\n onContainerCreation?: (container: HTMLElement \| null) => void;\n /\n Attributes applied to the dropdown header element.\n /\n dropdownHeaderProps?: React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLDivElement>,\n HTMLDivElement\n >;\n /\n Pass a ref to the dropdown header element.\n /\n dropdownHeaderRef?: React.Ref<HTMLDivElement>;\n /\n A Jss Object used to override or extend the component styles applied.\n /\n classes?: HvBaseDropdownClasses;\n /* @ignore /\n ref?: React.Ref<HTMLDivElement>;\n}\n\nconst BaseDropdown = forwardRef<\n HTMLDivElement,\n Omit<\n HvBaseDropdownProps,\n \"popperProps\" \| \"variableWidth\" \| \"placement\" \| \"onContainerCreation\"\n >\n>((props, ref) => {\n const {\n id: idProp,\n className,\n classes: classesProp,\n children,\n role,\n placeholder,\n component,\n headerComponent: HeaderComponentProp,\n adornment,\n expanded,\n dropdownHeaderProps,\n defaultExpanded,\n disabled,\n readOnly,\n required,\n disablePortal,\n \"aria-expanded\": ariaExpandedProp,\n \"aria-label\": ariaLabelProp,\n \"aria-labelledby\": ariaLabelledByProp,\n dropdownHeaderRef: dropdownHeaderRefProp,\n onToggle,\n onClickOutside,\n ...others\n } = props;\n\n const { classes, cx } = useClasses(classesProp);\n\n const {\n popperPlacement,\n popperElement,\n referenceElement,\n setReferenceElement,\n } = useBaseDropdownContext();\n\n const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n const headerRef = useForkRef(\n setReferenceElement,\n dropdownHeaderRefProp,\n dropdownHeaderProps?.ref as any,\n );\n\n const customHeaderRef = useForkRef(ref, headerRef);\n\n const ariaRole = role \|\| (component == null ? \"combobox\" : undefined);\n\n const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : undefined);\n\n const id = useUniqueId(idProp);\n const containerId = setId(id, \"children-container\");\n\n const headerControlArias = {\n \"aria-required\": required ?? undefined,\n \"aria-readonly\": readOnly ?? undefined,\n \"aria-disabled\": disabled ?? undefined,\n\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": isOpen ? containerId : undefined,\n \"aria-controls\": isOpen ? containerId : undefined,\n } satisfies React.AriaAttributes;\n\n const headerAriaLabels = {\n \"aria-label\": ariaLabelProp,\n \"aria-labelledby\": ariaLabelledByProp,\n } satisfies React.AriaAttributes;\n\n const handleToggle = useCallback(\n (event: any) => {\n if (event && !isKey(event, \"Tab\")) {\n event.preventDefault();\n }\n\n const notControlKey =\n !!event?.code &&\n !isOneOfKeys(event, [\"Tab\", \"Enter\", \"Esc\", \"ArrowDown\", \"Space\"]);\n\n const ignoredCombinations =\n (isKey(event, \"Esc\") && !isOpen) \|\|\n (isKey(event, \"ArrowDown\") && isOpen) \|\|\n (isKey(event, \"Tab\") && !isOpen);\n\n if (disabled \|\| notControlKey \|\| ignoredCombinations) return;\n\n const newOpen = !isOpen;\n\n / If about to close focus on the header component. /\n setIsOpen(() => {\n if (!newOpen) {\n // Focus-ring won't be visible even if using the keyboard:\n // https://github.com/WICG/focus-visible/issues/88\n referenceElement?.focus({ preventScroll: true });\n }\n\n return newOpen;\n });\n\n onToggle?.(event, newOpen);\n },\n [isOpen, disabled, setIsOpen, onToggle, referenceElement],\n );\n\n const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;\n\n const defaultHeaderElement = (\n <div\n id={setId(id, \"header\")}\n className={cx(classes.header, {\n [classes.headerDisabled]: disabled,\n [classes.headerReadOnly]: readOnly,\n [classes.headerOpen]: isOpen,\n [classes.headerOpenUp]: isOpen && popperPlacement?.includes(\"top\"),\n [classes.headerOpenDown]: isOpen && popperPlacement?.includes(\"bottom\"),\n })}\n // TODO: review \"textbox\" role\n role={ariaRole === \"combobox\" ? \"textbox\" : undefined}\n {...headerAriaLabels}\n style={disabled \|\| readOnly ? { pointerEvents: \"none\" } : undefined}\n // Removes the element from the navigation sequence for keyboard focus if disabled\n tabIndex={disabled ? -1 : 0}\n ref={headerRef}\n {...dropdownHeaderProps}\n >\n <div\n className={cx(classes.selection, {\n [classes.selectionDisabled]: disabled,\n })}\n >\n {placeholder && typeof placeholder === \"string\" ? (\n <HvTypography noWrap className={classes.placeholder}>\n {placeholder}\n </HvTypography>\n ) : (\n placeholder\n )}\n </div>\n <div className={classes.arrowContainer}>\n {adornment \|\| (\n <ExpanderComponent\n iconSize=\"XS\"\n color={disabled ? \"secondary_60\" : undefined}\n className={classes.arrow}\n />\n )}\n </div>\n </div>\n );\n\n const headerElement =\n component && isValidElement(component)\n ? cloneElement(component as React.ReactElement, {\n ref: headerRef,\n ...headerControlArias,\n })\n : defaultHeaderElement;\n\n /* Handle keyboard inside children container. */\n const handleContainerKeyDown: React.KeyboardEventHandler = (event) => {\n if (isKey(event, \"Esc\")) {\n handleToggle(event);\n }\n if (isKey(event, \"Tab\") && !event.shiftKey) {\n const focusList = getFirstAndLastFocus(popperElement);\n if (document.activeElement === focusList?.last) {\n event.preventDefault();\n focusList?.first?.focus();\n }\n }\n };\n\n const handleOutside: ClickAwayListenerProps[\"onClickAway\"] = (event) => {\n const isButtonClick = referenceElement?.contains(event.target as any);\n if (!isButtonClick) {\n onClickOutside?.(event);\n setIsOpen(false);\n onToggle?.(event, false);\n }\n };\n\n const hasCustomHeader = !!HeaderComponentProp;\n const HeaderComponent = HeaderComponentProp \|\| \"div\";\n const RootComponent = HeaderComponentProp ? Fragment : \"div\";\n\n return (\n <RootComponent {...(!hasCustomHeader && { className: classes.root })}>\n <HeaderComponent\n ref={hasCustomHeader ? customHeaderRef : ref}\n id={id}\n disabled={hasCustomHeader && disabled}\n className={cx(className, {\n [classes.anchor]: !hasCustomHeader,\n [classes.rootDisabled]: disabled,\n })}\n {...(!readOnly && {\n onKeyDown: handleToggle,\n onClick: handleToggle,\n })}\n {...((ariaRole \|\| hasCustomHeader) && {\n role: hasCustomHeader ? undefined : ariaRole,\n ...headerAriaLabels,\n ...headerControlArias,\n })}\n // Removes the element from the navigation sequence for keyboard focus\n tabIndex={hasCustomHeader ? undefined : -1}\n {...others}\n >\n {headerElement}\n </HeaderComponent>\n {isOpen && (\n <BaseDropdownPanel\n classes={classes}\n containerId={containerId}\n onClickAway={handleOutside}\n onContainerKeyDown={handleContainerKeyDown}\n >\n {children}\n </BaseDropdownPanel>\n )}\n </RootComponent>\n );\n});\n\nexport const HvBaseDropdown = forwardRef<HTMLDivElement, HvBaseDropdownProps>(\n function HvBaseDropdown(props, ref) {\n const {\n popperProps = {},\n variableWidth,\n placement: placementProp = \"right\",\n onContainerCreation,\n ...others\n } = useDefaultProps(\"HvBaseDropdown\", props);\n\n const placement: Placement = `bottom-${\n placementProp === \"right\" ? \"start\" : \"end\"\n }`;\n\n const { modifiers: popperPropsModifiers, ...otherPopperProps } =\n popperProps;\n\n const [referenceElement, setReferenceElement] =\n useState<HTMLElement \| null>(null);\n const [popperElement, setPopperElement] = useState<HTMLElement \| null>(\n null,\n );\n\n const onFirstUpdate = useCallback(() => {\n onContainerCreation?.(popperElement);\n }, [onContainerCreation, popperElement]);\n\n const modifiers = useMemo<Options[\"modifiers\"]>(\n () => [\n {\n name: \"variableWidth\",\n enabled: !variableWidth,\n phase: \"beforeWrite\",\n requires: [\"computeStyles\"],\n fn: ({ state }) => {\n state.styles.popper.width = `${state.rects.reference.width}px`;\n },\n effect: ({ state }) => {\n state.elements.popper.style.width = `${\n (state.elements.reference as any).offsetWidth\n }px`;\n },\n },\n {\n name: \"maxSize\",\n enabled: true,\n phase: \"main\",\n requiresIfExists: [\"offset\", \"preventOverflow\", \"flip\"],\n fn: ({ state, name, options }) => {\n const overflow = detectOverflow(state, options);\n\n const x = state.modifiersData.preventOverflow?.x \|\| 0;\n const y = state.modifiersData.preventOverflow?.y \|\| 0;\n\n const popperWidth = state.rects.popper.width;\n const popperHeight = state.rects.popper.height;\n\n const basePlacement = state.placement.split(\"-\")[0];\n\n const widthProp = basePlacement === \"left\" ? \"left\" : \"right\";\n const heightProp = basePlacement === \"top\" ? \"top\" : \"bottom\";\n\n state.modifiersData[name] = {\n width: popperWidth - overflow[widthProp] - x,\n height: popperHeight - overflow[heightProp] - y,\n };\n },\n },\n {\n name: \"applyMaxSize\",\n enabled: true,\n phase: \"beforeWrite\",\n requires: [\"maxSize\"],\n fn: ({ state }) => {\n // The `maxSize` modifier provides this data\n const { width, height } = state.modifiersData.maxSize;\n state.styles.popper.maxWidth = `${width}px`;\n state.styles.popper.maxHeight = `${height}px`;\n },\n },\n ...(popperPropsModifiers \|\| []),\n ],\n [popperPropsModifiers, variableWidth],\n );\n\n const popper = usePopper(referenceElement, popperElement, {\n placement,\n modifiers,\n onFirstUpdate,\n ...otherPopperProps,\n });\n\n const value = useMemo(\n () => ({\n popperPlacement:\n (popper?.attributes.popper?.[\"data-popper-placement\"] as Placement) ??\n \"bottom\",\n popper,\n popperElement,\n setPopperElement,\n referenceElement,\n setReferenceElement,\n }),\n [popper, popperElement, referenceElement],\n );\n\n return (\n <BaseDropdownContext.Provider value={value}>\n <BaseDropdown ref={ref} {...others} />\n </BaseDropdownContext.Provider>\n );\n },\n);\n"],"names":["HvBaseDropdown"],"mappings":"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"}
1	+ {"version":3,"file":"BaseDropdown.js","sources":["../../../src/BaseDropdown/BaseDropdown.tsx"],"sourcesContent":["import {\n cloneElement,\n forwardRef,\n Fragment,\n isValidElement,\n useCallback,\n useMemo,\n useState,\n} from \"react\";\nimport { PopperProps, usePopper } from \"react-popper\";\nimport type { ClickAwayListenerProps } from \"@mui/material/ClickAwayListener\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { detectOverflow, Options, Placement } from \"@popperjs/core\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { getFirstAndLastFocus } from \"../utils/focusableElementFinder\";\nimport { isKey, isOneOfKeys } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./BaseDropdown.styles\";\nimport { BaseDropdownPanel } from \"./BaseDropdownPanel\";\nimport { BaseDropdownContext, useBaseDropdownContext } from \"./context\";\n\nexport { staticClasses as baseDropdownClasses };\n\nexport type HvBaseDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseDropdownProps\n extends HvBaseProps<HTMLDivElement, \"onToggle\"> {\n /*\n The role of the element that triggers the popup.\n \n Defaults to \"combobox\" if `component` and the default\n * \"textbox\" header is used, undefined otherwise.\n /\n role?: string;\n /\n Header placeholder.\n /\n placeholder?: React.ReactNode;\n /\n If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.\n /\n disabled?: boolean;\n /\n If `true` the dropdown will be in read only mode, unable to be interacted.\n /\n readOnly?: boolean;\n /\n Indicates that user input is required on the form element.\n /\n required?: boolean;\n /\n Disable the portal behavior.\n * The children stay within it's parent DOM hierarchy.\n /\n disablePortal?: boolean;\n /\n If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n * Defaults to `false`.\n /\n variableWidth?: boolean;\n /\n If `true` the dropdown starts opened if `false` it starts closed.\n /\n expanded?: boolean;\n /\n When uncontrolled, defines the initial expanded state.\n /\n defaultExpanded?: boolean;\n /\n An object containing props to be wired to the popper component.\n /\n popperProps?: Partial<PopperProps<any>>;\n /\n Placement of the dropdown.\n /\n placement?: \"left\" \| \"right\";\n /\n Replacement for the header component.\n * @deprecated use `Component` instead\n /\n component?: React.ReactNode;\n /* Replacement for the header component /\n headerComponent?: React.ElementType;\n /\n Adornment to replace the default arrows.\n /\n adornment?: React.ReactNode;\n /\n When dropdown changes the expanded state.\n /\n onToggle?: (event: Event, open: boolean) => void;\n /\n When user click outside the open container.\n /\n onClickOutside?: (event: Event) => void;\n /\n Callback called when the dropdown is opened and ready,\n * commonly used to set focus to the content.\n /\n onContainerCreation?: (container: HTMLElement \| null) => void;\n /\n Attributes applied to the dropdown header element.\n /\n dropdownHeaderProps?: React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLDivElement>,\n HTMLDivElement\n >;\n /\n Pass a ref to the dropdown header element.\n /\n dropdownHeaderRef?: React.Ref<HTMLDivElement>;\n /\n A Jss Object used to override or extend the component styles applied.\n /\n classes?: HvBaseDropdownClasses;\n /* @ignore /\n ref?: React.Ref<HTMLDivElement>;\n}\n\nconst BaseDropdown = forwardRef<\n HTMLDivElement,\n Omit<\n HvBaseDropdownProps,\n \"popperProps\" \| \"variableWidth\" \| \"placement\" \| \"onContainerCreation\"\n >\n>(function BaseDropdown(props, ref) {\n const {\n id: idProp,\n className,\n classes: classesProp,\n children,\n role,\n placeholder,\n component,\n headerComponent: HeaderComponentProp,\n adornment,\n expanded,\n dropdownHeaderProps,\n defaultExpanded,\n disabled,\n readOnly,\n required,\n disablePortal,\n \"aria-expanded\": ariaExpandedProp,\n \"aria-label\": ariaLabelProp,\n \"aria-labelledby\": ariaLabelledByProp,\n dropdownHeaderRef: dropdownHeaderRefProp,\n onToggle,\n onClickOutside,\n ...others\n } = props;\n\n const { classes, cx } = useClasses(classesProp);\n\n const {\n popperPlacement,\n popperElement,\n referenceElement,\n setReferenceElement,\n } = useBaseDropdownContext();\n\n const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n const headerRef = useForkRef(\n setReferenceElement,\n dropdownHeaderRefProp,\n dropdownHeaderProps?.ref as any,\n );\n\n const customHeaderRef = useForkRef(ref, headerRef);\n\n const ariaRole = role \|\| (component == null ? \"combobox\" : undefined);\n\n const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : undefined);\n\n const id = useUniqueId(idProp);\n const containerId = setId(id, \"children-container\");\n\n const headerControlArias = {\n \"aria-required\": required ?? undefined,\n \"aria-readonly\": readOnly ?? undefined,\n \"aria-disabled\": disabled ?? undefined,\n\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": isOpen ? containerId : undefined,\n \"aria-controls\": isOpen ? containerId : undefined,\n } satisfies React.AriaAttributes;\n\n const headerAriaLabels = {\n \"aria-label\": ariaLabelProp,\n \"aria-labelledby\": ariaLabelledByProp,\n } satisfies React.AriaAttributes;\n\n const handleToggle = useCallback(\n (event: any) => {\n if (event && !isKey(event, \"Tab\")) {\n event.preventDefault();\n }\n\n const notControlKey =\n !!event?.code &&\n !isOneOfKeys(event, [\"Tab\", \"Enter\", \"Esc\", \"ArrowDown\", \"Space\"]);\n\n const ignoredCombinations =\n (isKey(event, \"Esc\") && !isOpen) \|\|\n (isKey(event, \"ArrowDown\") && isOpen) \|\|\n (isKey(event, \"Tab\") && !isOpen);\n\n if (disabled \|\| notControlKey \|\| ignoredCombinations) return;\n\n const newOpen = !isOpen;\n\n / If about to close focus on the header component. /\n setIsOpen(() => {\n if (!newOpen) {\n // Focus-ring won't be visible even if using the keyboard:\n // https://github.com/WICG/focus-visible/issues/88\n referenceElement?.focus({ preventScroll: true });\n }\n\n return newOpen;\n });\n\n onToggle?.(event, newOpen);\n },\n [isOpen, disabled, setIsOpen, onToggle, referenceElement],\n );\n\n const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;\n\n const defaultHeaderElement = (\n <div\n id={setId(id, \"header\")}\n className={cx(classes.header, {\n [classes.headerDisabled]: disabled,\n [classes.headerReadOnly]: readOnly,\n [classes.headerOpen]: isOpen,\n [classes.headerOpenUp]: isOpen && popperPlacement?.includes(\"top\"),\n [classes.headerOpenDown]: isOpen && popperPlacement?.includes(\"bottom\"),\n })}\n // TODO: review \"textbox\" role\n role={ariaRole === \"combobox\" ? \"textbox\" : undefined}\n {...headerAriaLabels}\n style={disabled \|\| readOnly ? { pointerEvents: \"none\" } : undefined}\n // Removes the element from the navigation sequence for keyboard focus if disabled\n tabIndex={disabled ? -1 : 0}\n ref={headerRef}\n {...dropdownHeaderProps}\n >\n <div\n className={cx(classes.selection, {\n [classes.selectionDisabled]: disabled,\n })}\n >\n {placeholder && typeof placeholder === \"string\" ? (\n <HvTypography noWrap className={classes.placeholder}>\n {placeholder}\n </HvTypography>\n ) : (\n placeholder\n )}\n </div>\n <div className={classes.arrowContainer}>\n {adornment \|\| (\n <ExpanderComponent\n iconSize=\"XS\"\n color={disabled ? \"secondary_60\" : undefined}\n className={classes.arrow}\n />\n )}\n </div>\n </div>\n );\n\n const headerElement =\n component && isValidElement(component)\n ? cloneElement(component as React.ReactElement, {\n ref: headerRef,\n ...headerControlArias,\n })\n : defaultHeaderElement;\n\n /* Handle keyboard inside children container. */\n const handleContainerKeyDown: React.KeyboardEventHandler = (event) => {\n if (isKey(event, \"Esc\")) {\n handleToggle(event);\n }\n if (isKey(event, \"Tab\") && !event.shiftKey) {\n const focusList = getFirstAndLastFocus(popperElement);\n if (document.activeElement === focusList?.last) {\n event.preventDefault();\n focusList?.first?.focus();\n }\n }\n };\n\n const handleOutside: ClickAwayListenerProps[\"onClickAway\"] = (event) => {\n const isButtonClick = referenceElement?.contains(event.target as any);\n if (!isButtonClick) {\n onClickOutside?.(event);\n setIsOpen(false);\n onToggle?.(event, false);\n }\n };\n\n const hasCustomHeader = !!HeaderComponentProp;\n const HeaderComponent = HeaderComponentProp \|\| \"div\";\n const RootComponent = HeaderComponentProp ? Fragment : \"div\";\n\n return (\n <RootComponent {...(!hasCustomHeader && { className: classes.root })}>\n <HeaderComponent\n ref={hasCustomHeader ? customHeaderRef : ref}\n id={id}\n disabled={hasCustomHeader && disabled}\n className={cx(className, {\n [classes.anchor]: !hasCustomHeader,\n [classes.rootDisabled]: disabled,\n })}\n {...(!readOnly && {\n onKeyDown: handleToggle,\n onClick: handleToggle,\n })}\n {...((ariaRole \|\| hasCustomHeader) && {\n role: hasCustomHeader ? undefined : ariaRole,\n ...headerAriaLabels,\n ...headerControlArias,\n })}\n // Removes the element from the navigation sequence for keyboard focus\n tabIndex={hasCustomHeader ? undefined : -1}\n {...others}\n >\n {headerElement}\n </HeaderComponent>\n {isOpen && (\n <BaseDropdownPanel\n classes={classes}\n containerId={containerId}\n onClickAway={handleOutside}\n onContainerKeyDown={handleContainerKeyDown}\n >\n {children}\n </BaseDropdownPanel>\n )}\n </RootComponent>\n );\n});\n\nexport const HvBaseDropdown = forwardRef<HTMLDivElement, HvBaseDropdownProps>(\n function HvBaseDropdown(props, ref) {\n const {\n popperProps = {},\n variableWidth,\n placement: placementProp = \"right\",\n onContainerCreation,\n ...others\n } = useDefaultProps(\"HvBaseDropdown\", props);\n\n const placement: Placement = `bottom-${\n placementProp === \"right\" ? \"start\" : \"end\"\n }`;\n\n const { modifiers: popperPropsModifiers, ...otherPopperProps } =\n popperProps;\n\n const [referenceElement, setReferenceElement] =\n useState<HTMLElement \| null>(null);\n const [popperElement, setPopperElement] = useState<HTMLElement \| null>(\n null,\n );\n\n const onFirstUpdate = useCallback(() => {\n onContainerCreation?.(popperElement);\n }, [onContainerCreation, popperElement]);\n\n const modifiers = useMemo<Options[\"modifiers\"]>(\n () => [\n {\n name: \"variableWidth\",\n enabled: !variableWidth,\n phase: \"beforeWrite\",\n requires: [\"computeStyles\"],\n fn: ({ state }) => {\n state.styles.popper.width = `${state.rects.reference.width}px`;\n },\n effect: ({ state }) => {\n state.elements.popper.style.width = `${\n (state.elements.reference as any).offsetWidth\n }px`;\n },\n },\n {\n name: \"maxSize\",\n enabled: true,\n phase: \"main\",\n requiresIfExists: [\"offset\", \"preventOverflow\", \"flip\"],\n fn: ({ state, name, options }) => {\n const overflow = detectOverflow(state, options);\n\n const x = state.modifiersData.preventOverflow?.x \|\| 0;\n const y = state.modifiersData.preventOverflow?.y \|\| 0;\n\n const popperWidth = state.rects.popper.width;\n const popperHeight = state.rects.popper.height;\n\n const basePlacement = state.placement.split(\"-\")[0];\n\n const widthProp = basePlacement === \"left\" ? \"left\" : \"right\";\n const heightProp = basePlacement === \"top\" ? \"top\" : \"bottom\";\n\n state.modifiersData[name] = {\n width: popperWidth - overflow[widthProp] - x,\n height: popperHeight - overflow[heightProp] - y,\n };\n },\n },\n {\n name: \"applyMaxSize\",\n enabled: true,\n phase: \"beforeWrite\",\n requires: [\"maxSize\"],\n fn: ({ state }) => {\n // The `maxSize` modifier provides this data\n const { width, height } = state.modifiersData.maxSize;\n state.styles.popper.maxWidth = `${width}px`;\n state.styles.popper.maxHeight = `${height}px`;\n },\n },\n ...(popperPropsModifiers \|\| []),\n ],\n [popperPropsModifiers, variableWidth],\n );\n\n const popper = usePopper(referenceElement, popperElement, {\n placement,\n modifiers,\n onFirstUpdate,\n ...otherPopperProps,\n });\n\n const value = useMemo(\n () => ({\n popperPlacement:\n (popper?.attributes.popper?.[\"data-popper-placement\"] as Placement) ??\n \"bottom\",\n popper,\n popperElement,\n setPopperElement,\n referenceElement,\n setReferenceElement,\n }),\n [popper, popperElement, referenceElement],\n );\n\n return (\n <BaseDropdownContext.Provider value={value}>\n <BaseDropdown ref={ref} {...others} />\n </BaseDropdownContext.Provider>\n );\n },\n);\n"],"names":["BaseDropdown","HvBaseDropdown"],"mappings":"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"}

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;"}

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

@@ -10,17 +10,15 @@ import { setId } from "../../utils/setId.js";
 import { isRange, isDate, formatToLocale, isSameDay } from "../utils.js";
 import { useClasses } from "./CalendarHeader.styles.js";
 import { staticClasses } from "./CalendarHeader.styles.js";
-import { HvFormElementValueContext } from "../../Forms/FormElement/context/FormElementValueContext.js";
+import { HvFormElementContext, HvFormElementValueContext, HvFormElementDescriptorsContext } from "../../FormElement/context.js";
 import { HvInput } from "../../Input/Input.js";
-import { HvFormElementContext } from "../../Forms/FormElement/context/FormElementContext.js";
-import { HvFormElementDescriptorsContext } from "../../Forms/FormElement/context/FormElementDescriptorsContext.js";
 import { HvTypography } from "../../Typography/Typography.js";
 dayjs.extend(localeData);
 dayjs.extend(localizedFormat);
 dayjs.extend(customParseFormat);
 const HvCalendarHeader = (props) => {
   const {
-    id,
+    id: idProp,
     value,
     locale = "en-US",
     classes: classesProp,
@@ -31,7 +29,7 @@ const HvCalendarHeader = (props) => {
     invalidDateLabel = "Invalid Date"
   } = useDefaultProps("HvCalendarHeader", props);
   const { classes, cx } = useClasses(classesProp);
-  const { elementId } = useContext(HvFormElementContext);
+  const context = useContext(HvFormElementContext);
   const elementValue = useContext(HvFormElementValueContext);
   const { label } = useContext(HvFormElementDescriptorsContext);
   let localValue = value ?? elementValue ?? "";
@@ -42,7 +40,7 @@ const HvCalendarHeader = (props) => {
   const [editedValue, setEditedValue] = useState(null);
   const [displayValue, setDisplayValue] = useState("");
   const [weekdayDisplay, setWeekdayDisplay] = useState("");
-  const localId = id ?? setId(elementId, "calendarHeader");
+  const id = idProp ?? setId(context.id, "calendarHeader");
   const inputValue = editedValue ?? displayValue;
   const localeFormat = dayjs().locale(locale).localeData().longDateFormat("L");
   const [isValidValue, setIsValidValue] = useState(
@@ -108,7 +106,7 @@ const HvCalendarHeader = (props) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      id: localId,
+      id,
       className: cx(classes.root, {
         [classes.invalid]: isInvalid
       }),
@@ -118,7 +116,7 @@ const HvCalendarHeader = (props) => {
           HvInput,
           {
             type: "text",
-            id: setId(localId, "header-input"),
+            id: setId(id, "header-input"),
             className: classes.headerDate,
             classes: {
               input: classes.input,