@hitachivantara/uikit-react-core 5.82.4 → 5.83.1

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

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

@@ -1,26 +1,19 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useContext, useState, useEffect } from "react";
-import dayjs from "dayjs";
-import customParseFormat from "dayjs/plugin/customParseFormat";
-import localeData from "dayjs/plugin/localeData";
-import localizedFormat from "dayjs/plugin/localizedFormat";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { isKey } from "../../utils/keyboardUtils.js";
 import { setId } from "../../utils/setId.js";
-import { isRange, isDate, formatToLocale, isSameDay } from "../utils.js";
+import { isRange, getLocaleDateFormat, isDate, getFormattedDate, DEFAULT_LOCALE, getStringFromDate, parseDateString, isSameDay } from "../utils.js";
 import { useClasses } from "./CalendarHeader.styles.js";
 import { staticClasses } from "./CalendarHeader.styles.js";
-import { HvFormElementContext, HvFormElementValueContext, HvFormElementDescriptorsContext } from "../../FormElement/context.js";
 import { HvInput } from "../../Input/Input.js";
+import { HvFormElementContext, HvFormElementDescriptorsContext } from "../../FormElement/context.js";
 import { HvTypography } from "../../Typography/Typography.js";
-dayjs.extend(localeData);
-dayjs.extend(localizedFormat);
-dayjs.extend(customParseFormat);
 const HvCalendarHeader = (props) => {
   const {
     id: idProp,
-    value,
-    locale = "en-US",
+    value: valueProp,
+    locale = DEFAULT_LOCALE,
     classes: classesProp,
     onChange,
     showEndDate,
@@ -30,23 +23,19 @@ const HvCalendarHeader = (props) => {
   } = useDefaultProps("HvCalendarHeader", props);
   const { classes, cx } = useClasses(classesProp);
   const context = useContext(HvFormElementContext);
-  const elementValue = useContext(HvFormElementValueContext);
   const { label } = useContext(HvFormElementDescriptorsContext);
-  let localValue = value ?? elementValue ?? "";
-  if (isRange(localValue)) {
-    localValue = showEndDate ? localValue.endDate : localValue.startDate;
-  }
+  const localValue = isRange(valueProp) ? showEndDate ? valueProp.endDate : valueProp.startDate : valueProp;
   const [dateValue, setDateValue] = useState(localValue);
   const [editedValue, setEditedValue] = useState(null);
   const [displayValue, setDisplayValue] = useState("");
   const [weekdayDisplay, setWeekdayDisplay] = useState("");
   const id = idProp ?? setId(context.id, "calendarHeader");
   const inputValue = editedValue ?? displayValue;
-  const localeFormat = dayjs().locale(locale).localeData().longDateFormat("L");
+  const localeFormat = getLocaleDateFormat(locale);
   const [isValidValue, setIsValidValue] = useState(
-    inputValue.length === 0 || !!inputValue && dayjs(localValue).isValid()
+    inputValue.length === 0 || inputValue && isDate(new Date(inputValue))
   );
-  const validateInput = (incomingValid) => incomingValid === void 0 || dayjs(incomingValid).isValid();
+  const validateInput = (incomingValid) => incomingValid === void 0 || isDate(new Date(incomingValid));
   useEffect(() => {
     const valid = validateInput(localValue);
     setIsValidValue(valid);
@@ -60,15 +49,15 @@ const HvCalendarHeader = (props) => {
       const weekday = new Intl.DateTimeFormat(locale, {
         weekday: "short"
       }).format(isDate(localValue) ? localValue : 0);
-      setDisplayValue(formatToLocale(localValue, locale));
+      setDisplayValue(getFormattedDate(localValue, locale));
       setEditedValue(null);
       setWeekdayDisplay(weekday);
     }
   }, [localValue, locale]);
   const handleNewDate = (event, date) => {
-    const localeParsedDate = dayjs(date, localeFormat);
-    const isValidInput = localeParsedDate.isValid();
-    const dateParsed = isValidInput ? localeParsedDate.toDate() : dayjs(date).toDate();
+    const localeParsedDate = parseDateString(date, locale);
+    const isValidInput = isDate(localeParsedDate);
+    const dateParsed = isValidInput ? localeParsedDate : new Date(date);
     if (!isSameDay(dateParsed, dateValue)) {
       setDateValue(dateParsed);
       onChange?.(event, dateParsed);
@@ -95,7 +84,7 @@ const HvCalendarHeader = (props) => {
   };
   const onFocusHandler = (event) => {
     if (!localValue) return;
-    const formattedDate = isValidValue && isDate(localValue) ? dayjs(localValue).locale(locale).format("L") : editedValue;
+    const formattedDate = isValidValue && isDate(localValue) ? getStringFromDate(localValue, locale) : editedValue;
     setEditedValue(formattedDate);
     onFocus?.(event, formattedDate);
   };

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

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeader.js","sources":["../../../../src/Calendar/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import { useContext, useEffect, useState } from \"react\";\nimport dayjs from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\nimport localeData from \"dayjs/plugin/localeData\";\nimport localizedFormat from \"dayjs/plugin/localizedFormat\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  HvFormElementContext,\n  HvFormElementDescriptorsContext,\n  HvFormElementValueContext,\n} from \"../../FormElement\";\nimport { HvInput, HvInputProps } from \"../../Input\";\nimport { HvTypography } from \"../../Typography\";\nimport { isKey } from \"../../utils/keyboardUtils\";\nimport { setId } from \"../../utils/setId\";\nimport { DateRangeProp } from \"../types\";\nimport { formatToLocale, isDate, isRange, isSameDay } from \"../utils\";\nimport { staticClasses, useClasses } from \"./CalendarHeader.styles\";\n\nexport { staticClasses as calendarHeaderClasses };\n\nexport type HvCalendarHeaderClasses = ExtractNames<typeof useClasses>;\n\ndayjs.extend(localeData);\ndayjs.extend(localizedFormat);\ndayjs.extend(customParseFormat);\n\nexport const HvCalendarHeader = (props: HvCalendarHeaderProps) => {\n  const {\n    id: idProp,\n    value,\n    locale = \"en-US\",\n    classes: classesProp,\n    onChange,\n    showEndDate,\n    showDayOfWeek = false,\n    onFocus,\n    invalidDateLabel = \"Invalid Date\",\n  } = useDefaultProps(\"HvCalendarHeader\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const context = useContext(HvFormElementContext);\n  const elementValue = useContext(HvFormElementValueContext);\n  const { label } = useContext(HvFormElementDescriptorsContext);\n\n  let localValue: string | Date | DateRangeProp | undefined =\n    value ?? elementValue ?? \"\";\n  if (isRange(localValue)) {\n    localValue = showEndDate ? localValue.endDate : localValue.startDate;\n  }\n\n  const [dateValue, setDateValue] = useState<\n    string | Date | DateRangeProp | undefined\n  >(localValue);\n  const [editedValue, setEditedValue] = useState<string | null>(null);\n  const [displayValue, setDisplayValue] = useState(\"\");\n  const [weekdayDisplay, setWeekdayDisplay] = useState(\"\");\n\n  const id = idProp ?? setId(context.id, \"calendarHeader\");\n\n  const inputValue = editedValue ?? displayValue;\n  const localeFormat = dayjs().locale(locale).localeData().longDateFormat(\"L\");\n\n  const [isValidValue, setIsValidValue] = useState(\n    inputValue.length === 0 || (!!inputValue && dayjs(localValue).isValid()),\n  );\n\n  const validateInput = (incomingValid: any) =>\n    incomingValid === undefined || dayjs(incomingValid).isValid();\n\n  useEffect(() => {\n    const valid = validateInput(localValue);\n    setIsValidValue(valid);\n    if (valid) {\n      if (!localValue) {\n        setDisplayValue(\"\");\n        setEditedValue(null);\n        setWeekdayDisplay(\"\");\n        return;\n      }\n      const weekday = new Intl.DateTimeFormat(locale, {\n        weekday: \"short\",\n      }).format(isDate(localValue) ? localValue : 0);\n      setDisplayValue(formatToLocale(localValue, locale));\n      setEditedValue(null);\n      setWeekdayDisplay(weekday);\n    }\n  }, [localValue, locale]);\n\n  const handleNewDate = (event: any, date: string) => {\n    // attempt to format in locale data, or fallback to default\n    const localeParsedDate = dayjs(date, localeFormat);\n\n    const isValidInput = localeParsedDate.isValid();\n    const dateParsed = isValidInput\n      ? localeParsedDate.toDate()\n      : dayjs(date).toDate();\n    // prevent extra updates\n    if (!isSameDay(dateParsed, dateValue)) {\n      setDateValue(dateParsed);\n      onChange?.(event, dateParsed);\n    }\n\n    setIsValidValue(isValidInput);\n    if (isValidInput) {\n      setEditedValue(null);\n    }\n  };\n\n  const onBlurHandler: HvInputProps[\"onBlur\"] = (event) => {\n    if (editedValue == null) return;\n    if (editedValue === \"\") {\n      setIsValidValue(true);\n      setEditedValue(null);\n      return;\n    }\n    handleNewDate(event, editedValue);\n  };\n\n  const keyDownHandler: HvInputProps[\"onKeyDown\"] = (event) => {\n    if (!isKey(event, \"Enter\") || editedValue == null || editedValue === \"\")\n      return;\n    event.preventDefault();\n\n    handleNewDate(event, editedValue);\n  };\n\n  const onFocusHandler: HvInputProps[\"onFocus\"] = (event) => {\n    if (!localValue) return;\n    const formattedDate =\n      isValidValue && isDate(localValue)\n        ? dayjs(localValue).locale(locale).format(\"L\")\n        : editedValue;\n    setEditedValue(formattedDate);\n    onFocus?.(event, formattedDate);\n  };\n\n  const onChangeHandler: HvInputProps[\"onChange\"] = (event, val) => {\n    setEditedValue(val);\n  };\n\n  const isInvalid = !isValidValue && inputValue !== \"\";\n\n  // This component needs to be further refactored\n  // It's not possible to clear the date\n  // In a new major there's no need for all these classes\n  return (\n    <div\n      id={id}\n      className={cx(classes.root, {\n        [classes.invalid]: isInvalid,\n      })}\n    >\n      {showDayOfWeek && (\n        <HvTypography className={classes.headerDayOfWeek}>\n          {weekdayDisplay || \"\\u00A0\"}\n        </HvTypography>\n      )}\n      <HvInput\n        type=\"text\"\n        id={setId(id, \"header-input\")}\n        className={classes.headerDate}\n        classes={{\n          input: classes.input,\n          inputBorderContainer: classes.inputBorderContainer,\n          error: classes.invalidMessageStyling,\n        }}\n        placeholder={localeFormat}\n        value={inputValue}\n        aria-labelledby={label?.[0]?.id}\n        onBlur={onBlurHandler}\n        onFocus={onFocusHandler}\n        onChange={onChangeHandler}\n        onKeyDown={keyDownHandler}\n        status={isInvalid ? \"invalid\" : \"valid\"}\n        statusMessage={invalidDateLabel}\n      />\n    </div>\n  );\n};\n\n// TODO: refactor this out\nHvCalendarHeader.formElementType = \"HvCalendarHeader\";\n\nexport interface HvCalendarHeaderProps {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvCalendarHeaderClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * The text to be shown on the main part of the header.\n   */\n  value?: string | Date | DateRangeProp;\n  /**\n   * Locale to be used by the calendar.\n   */\n  locale?: string;\n  /**\n   * Callback to define the input date.\n   */\n  onChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    value: Date | DateRangeProp,\n  ) => void;\n  /**\n   * Callback to handle input onFocus.\n   */\n  onFocus?: (\n    event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n    formattedDate: string | null,\n  ) => void;\n  /**\n   * Indicates if header should display end date in a date range.\n   */\n  showEndDate?: boolean;\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"],"names":[],"mappings":"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"}
+{"version":3,"file":"CalendarHeader.js","sources":["../../../../src/Calendar/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import { useContext, useEffect, useState } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  HvFormElementContext,\n  HvFormElementDescriptorsContext,\n} from \"../../FormElement\";\nimport { HvInput, HvInputProps } from \"../../Input\";\nimport { HvTypography } from \"../../Typography\";\nimport { isKey } from \"../../utils/keyboardUtils\";\nimport { setId } from \"../../utils/setId\";\nimport type { HvSingleCalendarProps } from \"../SingleCalendar\";\nimport {\n  DEFAULT_LOCALE,\n  getFormattedDate,\n  getLocaleDateFormat,\n  getStringFromDate,\n  isDate,\n  isRange,\n  isSameDay,\n  parseDateString,\n} from \"../utils\";\nimport { staticClasses, useClasses } from \"./CalendarHeader.styles\";\n\nexport { staticClasses as calendarHeaderClasses };\n\nexport type HvCalendarHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport const HvCalendarHeader = (props: HvCalendarHeaderProps) => {\n  const {\n    id: idProp,\n    value: valueProp,\n    locale = DEFAULT_LOCALE,\n    classes: classesProp,\n    onChange,\n    showEndDate,\n    showDayOfWeek = false,\n    onFocus,\n    invalidDateLabel = \"Invalid Date\",\n  } = useDefaultProps(\"HvCalendarHeader\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const context = useContext(HvFormElementContext);\n  const { label } = useContext(HvFormElementDescriptorsContext);\n\n  const localValue = isRange(valueProp)\n    ? showEndDate\n      ? valueProp.endDate!\n      : valueProp.startDate\n    : valueProp;\n\n  const [dateValue, setDateValue] = useState(localValue);\n  const [editedValue, setEditedValue] = useState<string | null>(null);\n  const [displayValue, setDisplayValue] = useState(\"\");\n  const [weekdayDisplay, setWeekdayDisplay] = useState(\"\");\n\n  const id = idProp ?? setId(context.id, \"calendarHeader\");\n\n  const inputValue = editedValue ?? displayValue;\n  const localeFormat = getLocaleDateFormat(locale);\n\n  const [isValidValue, setIsValidValue] = useState(\n    inputValue.length === 0 || (inputValue && isDate(new Date(inputValue))),\n  );\n\n  const validateInput = (incomingValid: any) =>\n    incomingValid === undefined || isDate(new Date(incomingValid));\n\n  useEffect(() => {\n    const valid = validateInput(localValue);\n    setIsValidValue(valid);\n    if (valid) {\n      if (!localValue) {\n        setDisplayValue(\"\");\n        setEditedValue(null);\n        setWeekdayDisplay(\"\");\n        return;\n      }\n      const weekday = new Intl.DateTimeFormat(locale, {\n        weekday: \"short\",\n      }).format(isDate(localValue) ? localValue : 0);\n      setDisplayValue(getFormattedDate(localValue, locale));\n      setEditedValue(null);\n      setWeekdayDisplay(weekday);\n    }\n  }, [localValue, locale]);\n\n  const handleNewDate = (event: any, date: string) => {\n    // attempt to format in locale data, or fallback to default\n    const localeParsedDate = parseDateString(date, locale);\n\n    const isValidInput = isDate(localeParsedDate);\n    const dateParsed = isValidInput ? localeParsedDate : new Date(date);\n    // prevent extra updates\n    if (!isSameDay(dateParsed, dateValue)) {\n      setDateValue(dateParsed);\n      onChange?.(event, dateParsed);\n    }\n\n    setIsValidValue(isValidInput);\n    if (isValidInput) {\n      setEditedValue(null);\n    }\n  };\n\n  const onBlurHandler: HvInputProps[\"onBlur\"] = (event) => {\n    if (editedValue == null) return;\n    if (editedValue === \"\") {\n      setIsValidValue(true);\n      setEditedValue(null);\n      return;\n    }\n    handleNewDate(event, editedValue);\n  };\n\n  const keyDownHandler: HvInputProps[\"onKeyDown\"] = (event) => {\n    if (!isKey(event, \"Enter\") || editedValue == null || editedValue === \"\")\n      return;\n    event.preventDefault();\n\n    handleNewDate(event, editedValue);\n  };\n\n  const onFocusHandler: HvInputProps[\"onFocus\"] = (event) => {\n    if (!localValue) return;\n    const formattedDate =\n      isValidValue && isDate(localValue)\n        ? getStringFromDate(localValue, locale)\n        : editedValue;\n    setEditedValue(formattedDate);\n    onFocus?.(event, formattedDate);\n  };\n\n  const onChangeHandler: HvInputProps[\"onChange\"] = (event, val) => {\n    setEditedValue(val);\n  };\n\n  const isInvalid = !isValidValue && inputValue !== \"\";\n\n  // This component needs to be further refactored\n  // It's not possible to clear the date\n  // In a new major there's no need for all these classes\n  return (\n    <div\n      id={id}\n      className={cx(classes.root, {\n        [classes.invalid]: isInvalid,\n      })}\n    >\n      {showDayOfWeek && (\n        <HvTypography className={classes.headerDayOfWeek}>\n          {weekdayDisplay || \"\\u00A0\"}\n        </HvTypography>\n      )}\n      <HvInput\n        type=\"text\"\n        id={setId(id, \"header-input\")}\n        className={classes.headerDate}\n        classes={{\n          input: classes.input,\n          inputBorderContainer: classes.inputBorderContainer,\n          error: classes.invalidMessageStyling,\n        }}\n        placeholder={localeFormat}\n        value={inputValue}\n        aria-labelledby={label?.[0]?.id}\n        onBlur={onBlurHandler}\n        onFocus={onFocusHandler}\n        onChange={onChangeHandler}\n        onKeyDown={keyDownHandler}\n        status={isInvalid ? \"invalid\" : \"valid\"}\n        statusMessage={invalidDateLabel}\n      />\n    </div>\n  );\n};\n\n// TODO: refactor this out\nHvCalendarHeader.formElementType = \"HvCalendarHeader\";\n\nexport interface HvCalendarHeaderProps\n  extends Pick<\n    HvSingleCalendarProps,\n    | \"id\"\n    | \"value\"\n    | \"locale\"\n    | \"onChange\"\n    | \"showEndDate\"\n    | \"showDayOfWeek\"\n    | \"invalidDateLabel\"\n  > {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvCalendarHeaderClasses;\n  /**\n   * Callback to handle input onFocus.\n   */\n  onFocus?: (\n    event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n    formattedDate: string | null,\n  ) => void;\n}\n"],"names":[],"mappings":";;;;;;;;;;;AA+Ba,MAAA,mBAAmB,CAAC,UAAiC;AAC1D,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA,mBAAmB;AAAA,EAAA,IACjB,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,UAAU,WAAW,oBAAoB;AAC/C,QAAM,EAAE,MAAA,IAAU,WAAW,+BAA+B;AAEtD,QAAA,aAAa,QAAQ,SAAS,IAChC,cACE,UAAU,UACV,UAAU,YACZ;AAEJ,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,UAAU;AACrD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAwB,IAAI;AAClE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,EAAE;AACnD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,EAAE;AAEvD,QAAM,KAAK,UAAU,MAAM,QAAQ,IAAI,gBAAgB;AAEvD,QAAM,aAAa,eAAe;AAC5B,QAAA,eAAe,oBAAoB,MAAM;AAEzC,QAAA,CAAC,cAAc,eAAe,IAAI;AAAA,IACtC,WAAW,WAAW,KAAM,cAAc,OAAO,IAAI,KAAK,UAAU,CAAC;AAAA,EACvE;AAEM,QAAA,gBAAgB,CAAC,kBACrB,kBAAkB,UAAa,OAAO,IAAI,KAAK,aAAa,CAAC;AAE/D,YAAU,MAAM;AACR,UAAA,QAAQ,cAAc,UAAU;AACtC,oBAAgB,KAAK;AACrB,QAAI,OAAO;AACT,UAAI,CAAC,YAAY;AACf,wBAAgB,EAAE;AAClB,uBAAe,IAAI;AACnB,0BAAkB,EAAE;AACpB;AAAA,MAAA;AAEF,YAAM,UAAU,IAAI,KAAK,eAAe,QAAQ;AAAA,QAC9C,SAAS;AAAA,MAAA,CACV,EAAE,OAAO,OAAO,UAAU,IAAI,aAAa,CAAC;AAC7B,sBAAA,iBAAiB,YAAY,MAAM,CAAC;AACpD,qBAAe,IAAI;AACnB,wBAAkB,OAAO;AAAA,IAAA;AAAA,EAC3B,GACC,CAAC,YAAY,MAAM,CAAC;AAEjB,QAAA,gBAAgB,CAAC,OAAY,SAAiB;AAE5C,UAAA,mBAAmB,gBAAgB,MAAM,MAAM;AAE/C,UAAA,eAAe,OAAO,gBAAgB;AAC5C,UAAM,aAAa,eAAe,mBAAmB,IAAI,KAAK,IAAI;AAElE,QAAI,CAAC,UAAU,YAAY,SAAS,GAAG;AACrC,mBAAa,UAAU;AACvB,iBAAW,OAAO,UAAU;AAAA,IAAA;AAG9B,oBAAgB,YAAY;AAC5B,QAAI,cAAc;AAChB,qBAAe,IAAI;AAAA,IAAA;AAAA,EAEvB;AAEM,QAAA,gBAAwC,CAAC,UAAU;AACvD,QAAI,eAAe,KAAM;AACzB,QAAI,gBAAgB,IAAI;AACtB,sBAAgB,IAAI;AACpB,qBAAe,IAAI;AACnB;AAAA,IAAA;AAEF,kBAAc,OAAO,WAAW;AAAA,EAClC;AAEM,QAAA,iBAA4C,CAAC,UAAU;AAC3D,QAAI,CAAC,MAAM,OAAO,OAAO,KAAK,eAAe,QAAQ,gBAAgB;AACnE;AACF,UAAM,eAAe;AAErB,kBAAc,OAAO,WAAW;AAAA,EAClC;AAEM,QAAA,iBAA0C,CAAC,UAAU;AACzD,QAAI,CAAC,WAAY;AACX,UAAA,gBACJ,gBAAgB,OAAO,UAAU,IAC7B,kBAAkB,YAAY,MAAM,IACpC;AACN,mBAAe,aAAa;AAC5B,cAAU,OAAO,aAAa;AAAA,EAChC;AAEM,QAAA,kBAA4C,CAAC,OAAO,QAAQ;AAChE,mBAAe,GAAG;AAAA,EACpB;AAEM,QAAA,YAAY,CAAC,gBAAgB,eAAe;AAMhD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,QAAQ,MAAM;AAAA,QAC1B,CAAC,QAAQ,OAAO,GAAG;AAAA,MAAA,CACpB;AAAA,MAEA,UAAA;AAAA,QAAA,qCACE,cAAa,EAAA,WAAW,QAAQ,iBAC9B,4BAAkB,KACrB;AAAA,QAEF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,IAAI,MAAM,IAAI,cAAc;AAAA,YAC5B,WAAW,QAAQ;AAAA,YACnB,SAAS;AAAA,cACP,OAAO,QAAQ;AAAA,cACf,sBAAsB,QAAQ;AAAA,cAC9B,OAAO,QAAQ;AAAA,YACjB;AAAA,YACA,aAAa;AAAA,YACb,OAAO;AAAA,YACP,mBAAiB,QAAQ,CAAC,GAAG;AAAA,YAC7B,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,UAAU;AAAA,YACV,WAAW;AAAA,YACX,QAAQ,YAAY,YAAY;AAAA,YAChC,eAAe;AAAA,UAAA;AAAA,QAAA;AAAA,MACjB;AAAA,IAAA;AAAA,EACF;AAEJ;AAGA,iBAAiB,kBAAkB;"}

package/dist/esm/Calendar/SingleCalendar/SingleCalendar.js

@@ -4,7 +4,7 @@ import { isKey } from "../../utils/keyboardUtils.js";
 import { setId } from "../../utils/setId.js";
 import { HvCalendarHeader } from "../CalendarHeader/CalendarHeader.js";
 import { generateCalendarModel } from "../model.js";
-import { isDate, getWeekdayNamesList, isRange } from "../utils.js";
+import { isDate, getWeekdayNamesList, DEFAULT_LOCALE, isRange } from "../utils.js";
 import { HvCalendarCell } from "./CalendarCell.js";
 import { useClasses } from "./SingleCalendar.styles.js";
 import { staticClasses } from "./SingleCalendar.styles.js";
@@ -16,7 +16,7 @@ const HvSingleCalendar = ({
   classes: classesProp,
   className,
   id,
-  locale = "en-US",
+  locale = DEFAULT_LOCALE,
   value,
   visibleMonth,
   visibleYear,
@@ -104,6 +104,7 @@ const HvSingleCalendar = ({
       {
         id: setId(id, "header"),
         locale,
+        value,
         onChange: handleInputChange,
         showEndDate: showEndDate && !isDateSelectionMode,
         showDayOfWeek,

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

@@ -1 +1 @@
-{"version":3,"file":"SingleCalendar.js","sources":["../../../../src/Calendar/SingleCalendar/SingleCalendar.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvPanel } from \"../../Panel\";\nimport { HvTypography } from \"../../Typography\";\nimport { isKey } from \"../../utils/keyboardUtils\";\nimport { setId } from \"../../utils/setId\";\nimport { HvCalendarHeader } from \"../CalendarHeader/CalendarHeader\";\nimport { HvComposedNavigation, HvMonthSelector } from \"../CalendarNavigation\";\nimport { ViewMode } from \"../enums\";\nimport { generateCalendarModel } from \"../model\";\nimport { DateRangeProp, VisibilitySelectorActions } from \"../types\";\nimport { getWeekdayNamesList, isDate, isRange } from \"../utils\";\nimport { HvCalendarCell } from \"./CalendarCell\";\nimport { staticClasses, useClasses } from \"./SingleCalendar.styles\";\n\nexport { staticClasses as singleCalendarClasses };\n\nexport type HvSingleCalendarClasses = ExtractNames<typeof useClasses>;\n\nexport const HvSingleCalendar = ({\n  classes: classesProp,\n  className,\n  id,\n  locale = \"en-US\",\n  value,\n  visibleMonth,\n  visibleYear,\n  minimumDate,\n  maximumDate,\n  onChange,\n  onInputChange,\n  onVisibleDateChange,\n  showEndDate,\n  showDayOfWeek,\n  invalidDateLabel,\n  children,\n  ...others\n}: HvSingleCalendarProps) => {\n  // TODO: refactor this out\n  // const { HvCalendarHeader } = useContext(HvFormElementDescriptorsContext);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const today = new Date();\n  const localValue = value ?? today;\n\n  const [calViewMode, setCalViewMode] = useState<ViewMode>(\"calendar\");\n\n  const rangeMode = isRange(localValue);\n  const isDateSelectionMode = rangeMode && !isDate(localValue.endDate);\n  const calModel = rangeMode\n    ? generateCalendarModel(localValue.startDate, visibleMonth, visibleYear)\n    : generateCalendarModel(localValue, visibleMonth, visibleYear);\n  const firstDayOfCurrentMonth = new Date(calModel.year, calModel.month - 1, 1);\n  const firstDayOfCurrentMonthTime = firstDayOfCurrentMonth.getTime();\n\n  const listWeekdayNames = useMemo(() => getWeekdayNamesList(locale), [locale]);\n\n  const handleChange = (event: any, date: Date | DateRangeProp) => {\n    event?.preventDefault();\n    onChange?.(event, date);\n  };\n\n  const handleInputChange = (event: any, date: any) => {\n    event?.preventDefault();\n    onInputChange?.(event, date);\n  };\n\n  const getNavChild = (event: KeyboardEvent, siblings: any, i: number) => {\n    if (isKey(event, \"ArrowLeft\")) return siblings[i - 1];\n    if (isKey(event, \"ArrowRight\")) return siblings[i + 1];\n    if (isKey(event, \"ArrowUp\")) return siblings[i - 7];\n    if (isKey(event, \"ArrowDown\")) return siblings[i + 7];\n    return undefined;\n  };\n\n  const handleKeyDown = (event: any) => {\n    // This code is very brittle and should be managed with the focus wrapper\n    const el = document?.activeElement;\n    const parent = el?.parentElement?.parentElement;\n    const siblings =\n      parent != null\n        ? Array.from(\n            parent.getElementsByClassName(classes.cellContainer as string),\n          )\n        : [];\n    const elIndex = el ? siblings.indexOf(el) : 0;\n\n    if (isKey(event, \"Enter\")) {\n      (el as HTMLElement).focus();\n      return;\n    }\n\n    const child = getNavChild(event, siblings, elIndex);\n\n    if (child) {\n      const inMonth = child.getAttribute(\"data-in-month\");\n      if (inMonth === \"true\") {\n        event?.preventDefault();\n        child?.focus();\n      }\n    }\n  };\n\n  const renderWeekLabel = (dayName: string, index: number) => (\n    <HvTypography key={index} variant=\"label\" className={classes.calendarDay}>\n      {dayName}\n    </HvTypography>\n  );\n\n  /** Renders the element representing the received date. */\n  const renderCalendarDate = (currentDate: Date) => {\n    return (\n      <HvCalendarCell\n        classes={classes}\n        key={currentDate.toString()}\n        tabIndex={currentDate.getTime() === firstDayOfCurrentMonthTime ? 0 : -1}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        value={currentDate}\n        today={today}\n        calendarValue={localValue}\n        rangeMode={rangeMode}\n        isDateSelectionMode={isDateSelectionMode}\n        locale={locale}\n        firstDayOfCurrentMonth={firstDayOfCurrentMonth}\n        maximumDate={maximumDate}\n        minimumDate={minimumDate}\n      />\n    );\n  };\n\n  return (\n    <HvPanel id={id} className={cx(classes.root, className)} {...others}>\n      <HvCalendarHeader\n        id={setId(id, \"header\")}\n        locale={locale}\n        onChange={handleInputChange}\n        showEndDate={showEndDate && !isDateSelectionMode}\n        showDayOfWeek={showDayOfWeek}\n        invalidDateLabel={invalidDateLabel}\n      />\n      {calViewMode === \"calendar\" && (\n        <>\n          <HvComposedNavigation\n            id={id}\n            locale={locale}\n            onChange={onVisibleDateChange}\n            onViewModeChange={setCalViewMode}\n            visibleYear={visibleYear || today.getFullYear()}\n            visibleMonth={visibleMonth || today.getMonth() + 1}\n          />\n          <div\n            className={classes.calendarGrid}\n            // @ts-ignore TODO: review\n            aria-controls={HvCalendarHeader?.[0]?.id}\n          >\n            {listWeekdayNames.map(renderWeekLabel)}\n            {calModel.dates.map(renderCalendarDate)}\n          </div>\n        </>\n      )}\n      {calViewMode === \"monthly\" && (\n        <HvMonthSelector\n          id={id}\n          locale={locale}\n          onChange={onVisibleDateChange}\n          onViewModeChange={setCalViewMode}\n          visibleMonth={visibleMonth || today.getMonth() + 1}\n          rangeMode={rangeMode}\n        />\n      )}\n    </HvPanel>\n  );\n};\n\nexport interface HvSingleCalendarProps {\n  /**\n   * Styles applied from the theme.\n   */\n  classes?: HvSingleCalendarClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * The class name to add at the root of the single calendar\n   */\n  className?: string;\n  /**\n   * The calendar locale.\n   *\n   */\n  locale: string;\n  /**\n   * Date that the calendar would show.\n   */\n  value?: string | Date | DateRangeProp;\n  /**\n   * Date that will be used to know which month and year should be displayed on the calendar. The value of the day is\n   * irrelevant.\n   */\n  visibleDate?: Date;\n  /**\n   * Controls the visible month of the Calendar\n   */\n  visibleMonth?: number;\n  /**\n   * Controls the visible month of the Calendar\n   */\n  visibleYear?: 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 visible date has changed.\n   */\n  onVisibleDateChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    action: VisibilitySelectorActions,\n    value?: Date | DateRangeProp | number,\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   * Indicates if header should display end date in a date range.\n   */\n  showEndDate?: boolean;\n  /**\n   * Indicates if header should display the day of week.\n   */\n  showDayOfWeek?: boolean;\n  /**\n   * Content on the upper part of the calendar.\n   */\n  children?: React.ReactNode;\n  /**\n   * Label shown when date is invalid.\n   */\n  invalidDateLabel?: string;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SingleCalendar.js","sources":["../../../../src/Calendar/SingleCalendar/SingleCalendar.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvPanel } from \"../../Panel\";\nimport { HvTypography } from \"../../Typography\";\nimport { isKey } from \"../../utils/keyboardUtils\";\nimport { setId } from \"../../utils/setId\";\nimport type { HvCalendarProps } from \"../Calendar\";\nimport { HvCalendarHeader } from \"../CalendarHeader/CalendarHeader\";\nimport { HvComposedNavigation, HvMonthSelector } from \"../CalendarNavigation\";\nimport { ViewMode } from \"../enums\";\nimport { generateCalendarModel } from \"../model\";\nimport type { DateRangeProp } from \"../types\";\nimport { DEFAULT_LOCALE, getWeekdayNamesList, isDate, isRange } from \"../utils\";\nimport { HvCalendarCell } from \"./CalendarCell\";\nimport { staticClasses, useClasses } from \"./SingleCalendar.styles\";\n\nexport { staticClasses as singleCalendarClasses };\n\nexport type HvSingleCalendarClasses = ExtractNames<typeof useClasses>;\n\nexport const HvSingleCalendar = ({\n  classes: classesProp,\n  className,\n  id,\n  locale = DEFAULT_LOCALE,\n  value,\n  visibleMonth,\n  visibleYear,\n  minimumDate,\n  maximumDate,\n  onChange,\n  onInputChange,\n  onVisibleDateChange,\n  showEndDate,\n  showDayOfWeek,\n  invalidDateLabel,\n  children,\n  ...others\n}: HvSingleCalendarProps) => {\n  // TODO: refactor this out\n  // const { HvCalendarHeader } = useContext(HvFormElementDescriptorsContext);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const today = new Date();\n  const localValue = value ?? today;\n\n  const [calViewMode, setCalViewMode] = useState<ViewMode>(\"calendar\");\n\n  const rangeMode = isRange(localValue);\n  const isDateSelectionMode = rangeMode && !isDate(localValue.endDate);\n  const calModel = rangeMode\n    ? generateCalendarModel(localValue.startDate, visibleMonth, visibleYear)\n    : generateCalendarModel(localValue, visibleMonth, visibleYear);\n  const firstDayOfCurrentMonth = new Date(calModel.year, calModel.month - 1, 1);\n  const firstDayOfCurrentMonthTime = firstDayOfCurrentMonth.getTime();\n\n  const listWeekdayNames = useMemo(() => getWeekdayNamesList(locale), [locale]);\n\n  const handleChange = (event: any, date: Date | DateRangeProp) => {\n    event?.preventDefault();\n    onChange?.(event, date);\n  };\n\n  const handleInputChange = (event: any, date: any) => {\n    event?.preventDefault();\n    onInputChange?.(event, date);\n  };\n\n  const getNavChild = (event: KeyboardEvent, siblings: any, i: number) => {\n    if (isKey(event, \"ArrowLeft\")) return siblings[i - 1];\n    if (isKey(event, \"ArrowRight\")) return siblings[i + 1];\n    if (isKey(event, \"ArrowUp\")) return siblings[i - 7];\n    if (isKey(event, \"ArrowDown\")) return siblings[i + 7];\n    return undefined;\n  };\n\n  const handleKeyDown = (event: any) => {\n    // This code is very brittle and should be managed with the focus wrapper\n    const el = document?.activeElement;\n    const parent = el?.parentElement?.parentElement;\n    const siblings =\n      parent != null\n        ? Array.from(\n            parent.getElementsByClassName(classes.cellContainer as string),\n          )\n        : [];\n    const elIndex = el ? siblings.indexOf(el) : 0;\n\n    if (isKey(event, \"Enter\")) {\n      (el as HTMLElement).focus();\n      return;\n    }\n\n    const child = getNavChild(event, siblings, elIndex);\n\n    if (child) {\n      const inMonth = child.getAttribute(\"data-in-month\");\n      if (inMonth === \"true\") {\n        event?.preventDefault();\n        child?.focus();\n      }\n    }\n  };\n\n  const renderWeekLabel = (dayName: string, index: number) => (\n    <HvTypography key={index} variant=\"label\" className={classes.calendarDay}>\n      {dayName}\n    </HvTypography>\n  );\n\n  /** Renders the element representing the received date. */\n  const renderCalendarDate = (currentDate: Date) => {\n    return (\n      <HvCalendarCell\n        classes={classes}\n        key={currentDate.toString()}\n        tabIndex={currentDate.getTime() === firstDayOfCurrentMonthTime ? 0 : -1}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        value={currentDate}\n        today={today}\n        calendarValue={localValue}\n        rangeMode={rangeMode}\n        isDateSelectionMode={isDateSelectionMode}\n        locale={locale}\n        firstDayOfCurrentMonth={firstDayOfCurrentMonth}\n        maximumDate={maximumDate}\n        minimumDate={minimumDate}\n      />\n    );\n  };\n\n  return (\n    <HvPanel id={id} className={cx(classes.root, className)} {...others}>\n      <HvCalendarHeader\n        id={setId(id, \"header\")}\n        locale={locale}\n        value={value}\n        onChange={handleInputChange}\n        showEndDate={showEndDate && !isDateSelectionMode}\n        showDayOfWeek={showDayOfWeek}\n        invalidDateLabel={invalidDateLabel}\n      />\n      {calViewMode === \"calendar\" && (\n        <>\n          <HvComposedNavigation\n            id={id}\n            locale={locale}\n            onChange={onVisibleDateChange}\n            onViewModeChange={setCalViewMode}\n            visibleYear={visibleYear || today.getFullYear()}\n            visibleMonth={visibleMonth || today.getMonth() + 1}\n          />\n          <div\n            className={classes.calendarGrid}\n            // @ts-ignore TODO: review\n            aria-controls={HvCalendarHeader?.[0]?.id}\n          >\n            {listWeekdayNames.map(renderWeekLabel)}\n            {calModel.dates.map(renderCalendarDate)}\n          </div>\n        </>\n      )}\n      {calViewMode === \"monthly\" && (\n        <HvMonthSelector\n          id={id}\n          locale={locale}\n          onChange={onVisibleDateChange}\n          onViewModeChange={setCalViewMode}\n          visibleMonth={visibleMonth || today.getMonth() + 1}\n          rangeMode={rangeMode}\n        />\n      )}\n    </HvPanel>\n  );\n};\n\nexport interface HvSingleCalendarProps\n  extends Omit<HvCalendarProps, \"classes\"> {\n  /**\n   * Styles applied from the theme.\n   */\n  classes?: HvSingleCalendarClasses;\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   * Indicates if header should display end date in a date range.\n   */\n  showEndDate?: boolean;\n  /**\n   * Content on the upper part of the calendar.\n   */\n  children?: React.ReactNode;\n}\n"],"names":[],"mappings":"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"}