@hitachivantara/uikit-react-core 5.82.3 → 5.83.0

package/dist/cjs/hocs/withTooltip.cjs

@@ -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

@@ -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

@@ -33,19 +33,6 @@ const theme = require("./utils/theme.cjs");
 const useSavedState = require("./utils/useSavedState.cjs");
 const wrapperTooltip = require("./utils/wrapperTooltip.cjs");
 const helpers = require("./utils/helpers.cjs");
-const useTable = require("./Table/hooks/useTable.cjs");
-const useTableStyles = require("./Table/hooks/useTableStyles.cjs");
-const useSortBy = require("./Table/hooks/useSortBy.cjs");
-const useSticky = require("./Table/hooks/useSticky.cjs");
-const usePagination = require("./Table/hooks/usePagination.cjs");
-const useRowSelection = require("./Table/hooks/useRowSelection.cjs");
-const useBulkActions = require("./Table/hooks/useBulkActions.cjs");
-const useRowExpand = require("./Table/hooks/useRowExpand.cjs");
-const useHeaderGroups = require("./Table/hooks/useHeaderGroups.cjs");
-const useResizeColumns = require("./Table/hooks/useResizeColumns.cjs");
-const useGlobalFilter = require("./Table/hooks/useGlobalFilter.cjs");
-const useFilters = require("./Table/hooks/useFilters.cjs");
-const useRowState = require("./Table/hooks/useRowState.cjs");
 const utils = require("./Typography/utils.cjs");
 const Typography_styles = require("./Typography/Typography.styles.cjs");
 const Typography = require("./Typography/Typography.cjs");
@@ -245,6 +232,7 @@ const Switch_styles = require("./Switch/Switch.styles.cjs");
 const Switch = require("./Switch/Switch.cjs");
 const Tab_styles = require("./Tab/Tab.styles.cjs");
 const Tab = require("./Tab/Tab.cjs");
+const useHvTable = require("./Table/hooks/useHvTable.cjs");
 const Table_styles = require("./Table/Table.styles.cjs");
 const Table = require("./Table/Table.cjs");
 const TableContainer_styles = require("./Table/TableContainer/TableContainer.styles.cjs");
@@ -259,13 +247,23 @@ const TableRow_styles = require("./Table/TableRow/TableRow.styles.cjs");
 const TableRow = require("./Table/TableRow/TableRow.cjs");
 const TableCell_styles = require("./Table/TableCell/TableCell.styles.cjs");
 const TableCell = require("./Table/TableCell/TableCell.cjs");
+const useHvTableStyles = require("./Table/hooks/useHvTableStyles.cjs");
+const useHvSortBy = require("./Table/hooks/useHvSortBy.cjs");
+const useHvSticky = require("./Table/hooks/useHvSticky.cjs");
+const useHvPagination = require("./Table/hooks/useHvPagination.cjs");
+const useHvRowSelection = require("./Table/hooks/useHvRowSelection.cjs");
+const useHvBulkActions = require("./Table/hooks/useHvBulkActions.cjs");
+const useHvRowExpand = require("./Table/hooks/useHvRowExpand.cjs");
+const useHvHeaderGroups = require("./Table/hooks/useHvHeaderGroups.cjs");
+const useHvResizeColumns = require("./Table/hooks/useHvResizeColumns.cjs");
+const useHvGlobalFilter = require("./Table/hooks/useHvGlobalFilter.cjs");
+const useHvFilters = require("./Table/hooks/useHvFilters.cjs");
+const useHvRowState = require("./Table/hooks/useHvRowState.cjs");
 const renderers = require("./Table/renderers/renderers.cjs");
-const DateColumnCell = require("./Table/renderers/DateColumnCell/DateColumnCell.cjs");
-const DropdownColumnCell = require("./Table/renderers/DropdownColumnCell/DropdownColumnCell.cjs");
-const ProgressColumnCell = require("./Table/renderers/ProgressColumnCell/ProgressColumnCell.cjs");
-const SwitchColumnCell = require("./Table/renderers/SwitchColumnCell/SwitchColumnCell.cjs");
-const fallbacks = require("./Table/utils/fallbacks.cjs");
-const utils$1 = require("./Table/utils/utils.cjs");
+const DateColumnCell = require("./Table/renderers/DateColumnCell.cjs");
+const DropdownColumnCell = require("./Table/renderers/DropdownColumnCell.cjs");
+const ProgressColumnCell = require("./Table/renderers/ProgressColumnCell.cjs");
+const SwitchColumnCell = require("./Table/renderers/SwitchColumnCell.cjs");
 const Tabs_styles = require("./Tabs/Tabs.styles.cjs");
 const Tabs = require("./Tabs/Tabs.cjs");
 const Tag_styles = require("./Tag/Tag.styles.cjs");
@@ -369,6 +367,7 @@ exports.outlineStyles = focusUtils.outlineStyles;
 exports.getComponentName = getComponentName.getComponentName;
 exports.hexToRgbA = hexToRgbA.hexToRgbA;
 exports.iconVariant = iconVariant.iconVariant;
+exports.isDeleteKey = keyboardUtils.isDeleteKey;
 exports.isKey = keyboardUtils.isKey;
 exports.isOneOfKeys = keyboardUtils.isOneOfKeys;
 exports.multiSelectionEventHandler = multiSelectionEventHandler.multiSelectionEventHandler;
@@ -384,33 +383,6 @@ exports.setElementAttrs = theme.setElementAttrs;
 exports.useSavedState = useSavedState.useSavedState;
 exports.wrapperTooltip = wrapperTooltip.wrapperTooltip;
 exports.uniqueId = helpers.uniqueId;
-exports.useHvData = useTable.default;
-exports.useHvTable = useTable.default;
-exports.getHeaderFooterPropsHook = useTableStyles.getHeaderFooterPropsHook;
-exports.useHvTableStyles = useTableStyles.default;
-exports.useHvSortBy = useSortBy.default;
-exports.getHeaderGroupPropsHook = useSticky.getHeaderGroupPropsHook;
-exports.getTableHeadPropsHook = useSticky.getTableHeadPropsHook;
-exports.useHvTableSticky = useSticky.default;
-exports.defaultGetHvPaginationProps = usePagination.defaultGetHvPaginationProps;
-exports.useHvPagination = usePagination.default;
-exports.CellWithCheckBox = useRowSelection.CellWithCheckBox;
-exports.defaultGetToggleAllPageRowsSelectedProps = useRowSelection.defaultGetToggleAllPageRowsSelectedProps;
-exports.defaultGetToggleAllRowsSelectedProps = useRowSelection.defaultGetToggleAllRowsSelectedProps;
-exports.defaultGetToggleRowSelectedProps = useRowSelection.defaultGetToggleRowSelectedProps;
-exports.prepareRow = useRowSelection.prepareRow;
-exports.reducer = useRowSelection.reducer;
-exports.useHvRowSelection = useRowSelection.default;
-exports.useInstance = useRowSelection.useInstance;
-exports.defaultgetHvBulkActionsProps = useBulkActions.defaultgetHvBulkActionsProps;
-exports.useHvBulkActions = useBulkActions.default;
-exports.CellWithExpandButton = useRowExpand.CellWithExpandButton;
-exports.useHvRowExpand = useRowExpand.default;
-exports.useHvHeaderGroups = useHeaderGroups.default;
-exports.useHvResizeColumns = useResizeColumns.default;
-exports.useHvGlobalFilter = useGlobalFilter.default;
-exports.useHvFilters = useFilters.default;
-exports.useHvRowState = useRowState.default;
 exports.typographyVariants = utils.typographyVariants;
 exports.typographyClasses = Typography_styles.staticClasses;
 exports.HvTypography = Typography.HvTypography;
@@ -617,6 +589,8 @@ exports.switchClasses = Switch_styles.staticClasses;
 exports.HvSwitch = Switch.HvSwitch;
 exports.tabClasses = Tab_styles.staticClasses;
 exports.HvTab = Tab.HvTab;
+exports.useHvData = useHvTable.useHvTable;
+exports.useHvTable = useHvTable.useHvTable;
 exports.tableClasses = Table_styles.staticClasses;
 exports.HvTable = Table.HvTable;
 exports.tableContainerClasses = TableContainer_styles.staticClasses;
@@ -631,11 +605,31 @@ exports.tableRowClasses = TableRow_styles.staticClasses;
 exports.HvTableRow = TableRow.HvTableRow;
 exports.tableCellClasses = TableCell_styles.staticClasses;
 exports.HvTableCell = TableCell.HvTableCell;
+exports.useHvTableStyles = useHvTableStyles.useHvTableStyles;
+exports.useHvSortBy = useHvSortBy.useHvSortBy;
+exports.useHvTableSticky = useHvSticky.useHvTableSticky;
+exports.defaultGetHvPaginationProps = useHvPagination.defaultGetHvPaginationProps;
+exports.useHvPagination = useHvPagination.useHvPagination;
+exports.defaultGetToggleAllPageRowsSelectedProps = useHvRowSelection.defaultGetToggleAllPageRowsSelectedProps;
+exports.defaultGetToggleAllRowsSelectedProps = useHvRowSelection.defaultGetToggleAllRowsSelectedProps;
+exports.defaultGetToggleRowSelectedProps = useHvRowSelection.defaultGetToggleRowSelectedProps;
+exports.useHvRowSelection = useHvRowSelection.useHvRowSelection;
+exports.useHvBulkActions = useHvBulkActions.useHvBulkActions;
+exports.CellWithExpandButton = useHvRowExpand.CellWithExpandButton;
+exports.useHvRowExpand = useHvRowExpand.useHvRowExpand;
+exports.useHvHeaderGroups = useHvHeaderGroups.useHvHeaderGroups;
+exports.useHvResizeColumns = useHvResizeColumns.useHvResizeColumns;
+exports.useHvGlobalFilter = useHvGlobalFilter.useHvGlobalFilter;
+exports.useHvFilters = useHvFilters.useHvFilters;
+exports.useHvRowState = useHvRowState.useHvRowState;
 exports.hvDateColumn = renderers.hvDateColumn;
 exports.hvDropdownColumn = renderers.hvDropdownColumn;
 exports.hvExpandColumn = renderers.hvExpandColumn;
+exports.hvNodeFallback = renderers.hvNodeFallback;
 exports.hvNumberColumn = renderers.hvNumberColumn;
+exports.hvNumberFallback = renderers.hvNumberFallback;
 exports.hvProgressColumn = renderers.hvProgressColumn;
+exports.hvStringFallback = renderers.hvStringFallback;
 exports.hvSwitchColumn = renderers.hvSwitchColumn;
 exports.hvTagColumn = renderers.hvTagColumn;
 exports.hvTextColumn = renderers.hvTextColumn;
@@ -644,10 +638,6 @@ exports.HvDropdownColumnCell = DropdownColumnCell.HvDropdownColumnCell;
 exports.HvProgressColumnCell = ProgressColumnCell.HvProgressColumnCell;
 exports.normalizeProgressBar = ProgressColumnCell.normalizeProgressBar;
 exports.HvSwitchColumnCell = SwitchColumnCell.HvSwitchColumnCell;
-exports.hvNodeFallback = fallbacks.hvNodeFallback;
-exports.hvNumberFallback = fallbacks.hvNumberFallback;
-exports.hvStringFallback = fallbacks.hvStringFallback;
-exports.getBorderStyles = utils$1.getBorderStyles;
 exports.tabsClasses = Tabs_styles.staticClasses;
 exports.HvTabs = Tabs.HvTabs;
 exports.tagClasses = Tag_styles.staticClasses;

package/dist/cjs/utils/keyboardUtils.cjs

@@ -25,5 +25,9 @@ const isKey = (event, keyCode) => {
 const isOneOfKeys = (event, keys) => {
   return keys.some((key) => isKey(event, key));
 };
+function isDeleteKey(event) {
+  return isOneOfKeys(event, ["Backspace", "Delete"]);
+}
+exports.isDeleteKey = isDeleteKey;
 exports.isKey = isKey;
 exports.isOneOfKeys = isOneOfKeys;

package/dist/esm/BaseDropdown/BaseDropdown.js

@@ -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

@@ -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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"}
+{"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

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, useContext } from "react";
 import { css, Global } from "@emotion/react";
-import MuiInput from "@mui/material/Input";
+import MuiInputBase from "@mui/material/InputBase";
 import { useForkRef } from "@mui/material/utils";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
@@ -72,9 +72,6 @@ const HvBaseInput = forwardRef(function HvBaseInput2(props, ref) {
     localInvalid,
     id
   );
-  const onChangeHandler = (event) => {
-    onChange?.(event, event.target.value);
-  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Global, { styles: baseInputStyles }),
     /* @__PURE__ */ jsxs(
@@ -88,7 +85,7 @@ const HvBaseInput = forwardRef(function HvBaseInput2(props, ref) {
         }),
         children: [
           /* @__PURE__ */ jsx(
-            MuiInput,
+            MuiInputBase,
             {
               id,
               name: formElementProps.name,
@@ -98,7 +95,7 @@ const HvBaseInput = forwardRef(function HvBaseInput2(props, ref) {
               placeholder,
               readOnly: !!formElementProps.readOnly,
               disabled: formElementProps.disabled,
-              onChange: onChangeHandler,
+              onChange: (event) => onChange?.(event, event.target.value),
               className: cx({
                 [classes.inputRootInvalid]: localInvalid,
                 [classes.inputRootReadOnly]: formElementProps.readOnly

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

@@ -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 \"../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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"}
+{"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 MuiInputBase, { InputBaseProps } 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<\n    InputBaseProps,\n    \"onChange\" | \"classes\" | \"ref\" | \"color\" | \"size\"\n  > {\n  /** The input name. */\n  name?: string;\n  /** The value of the input, when controlled. */\n  value?: React.InputHTMLAttributes<HTMLInputElement>[\"value\"];\n  /** The initial value of the input, when uncontrolled. */\n  defaultValue?: React.InputHTMLAttributes<HTMLInputElement>[\"value\"];\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  /** 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  /**\n   * Allows passing a ref to the underlying input\n   * @deprecated Use `ref` directly instead\n   * */\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  React.ElementRef<\"input\">,\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  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        <MuiInputBase\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={(event) => onChange?.(event, event.target.value)}\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/ButtonBase/ButtonBase.styles.js

@@ -8,12 +8,13 @@ const { staticClasses, useClasses } = createClasses("HvButtonBase", {
     background: "none",
     padding: 0,
     // Background color common for almost all variants
-    "&:hover": {
-      backgroundColor: theme.colors.containerBackgroundHover
+    ":where(:not($disabled))": {
+      ":hover, :focus-visible": {
+        backgroundColor: theme.colors.containerBackgroundHover
+      }
     },
-    "&:focus-visible": {
-      ...outlineStyles,
-      backgroundColor: theme.colors.containerBackgroundHover
+    ":focus-visible": {
+      ...outlineStyles
     },
     // Default button - no size specified
     fontFamily: theme.fontFamily.body,

package/dist/esm/ButtonBase/ButtonBase.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.styles.js","sources":["../../../src/ButtonBase/ButtonBase.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButtonBase\", {\n  root: {\n    display: \"inline-flex\",\n    cursor: \"pointer\",\n    background: \"none\",\n    padding: 0,\n\n    // Background color common for almost all variants\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n\n    // Default button - no size specified\n    fontFamily: theme.fontFamily.body,\n    fontSize: \"inherit\",\n    color: \"inherit\",\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    color: theme.colors.secondary_60,\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,SAAS;AAAA;AAAA,IAGT,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAG;AAAA,MACH,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA;AAAA,IAGA,YAAY,MAAM,WAAW;AAAA,IAC7B,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,4BAA4B;AAAA,MAC1B,iBAAiB;AAAA,IAAA;AAAA,EACnB;AAEJ,CAAC;"}
+{"version":3,"file":"ButtonBase.styles.js","sources":["../../../src/ButtonBase/ButtonBase.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButtonBase\", {\n  root: {\n    display: \"inline-flex\",\n    cursor: \"pointer\",\n    background: \"none\",\n    padding: 0,\n\n    // Background color common for almost all variants\n    \":where(:not($disabled))\": {\n      \":hover, :focus-visible\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n      },\n    },\n    \":focus-visible\": {\n      ...outlineStyles,\n    },\n\n    // Default button - no size specified\n    fontFamily: theme.fontFamily.body,\n    fontSize: \"inherit\",\n    color: \"inherit\",\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    color: theme.colors.secondary_60,\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,SAAS;AAAA;AAAA,IAGT,2BAA2B;AAAA,MACzB,0BAA0B;AAAA,QACxB,iBAAiB,MAAM,OAAO;AAAA,MAAA;AAAA,IAElC;AAAA,IACA,kBAAkB;AAAA,MAChB,GAAG;AAAA,IACL;AAAA;AAAA,IAGA,YAAY,MAAM,WAAW;AAAA,IAC7B,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,4BAA4B;AAAA,MAC1B,iBAAiB;AAAA,IAAA;AAAA,EACnB;AAEJ,CAAC;"}

package/dist/esm/Calendar/Calendar.js

@@ -4,14 +4,14 @@ import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./Calendar.styles.js";
 import { staticClasses } from "./Calendar.styles.js";
-import { isRange } from "./utils.js";
-import { HvSingleCalendar } from "./SingleCalendar/SingleCalendar.js";
+import { DEFAULT_LOCALE, isRange } from "./utils.js";
 import { HvFormElementContext, HvFormElementValueContext } from "../FormElement/context.js";
+import { HvSingleCalendar } from "./SingleCalendar/SingleCalendar.js";
 const HvCalendar = (props) => {
   const {
     classes: classesProp,
     id: idProp,
-    locale = "en-US",
+    locale = DEFAULT_LOCALE,
     value: valueProp,
     visibleMonth,
     visibleYear,

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

@@ -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 {\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;"}
+{"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 { DEFAULT_LOCALE, isRange } from \"./utils\";\n\nexport { staticClasses as calendarClasses };\n\nexport type HvCalendarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCalendarProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /**\n   * Styles applied from the theme.\n   */\n  classes?: HvCalendarClasses;\n  /**\n   * The calendar locale.\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 = DEFAULT_LOCALE,\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":";;;;;;;;;AA2Ga,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;"}