@hitachivantara/uikit-react-core 5.39.2 → 5.39.4

package/dist/cjs/Button/Button.cjs

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
+const useTheme = require("../hooks/useTheme.cjs");
+const useDefaultProps = require("../hooks/useDefaultProps.cjs");
+const Button_styles = require("./Button.styles.cjs");
+const mapVariant = (variant, theme) => {
+  if (theme === "ds3")
+    return variant;
+  const deprecatedVariantMap = {
+    secondary: "secondarySubtle",
+    ghost: "primaryGhost"
+  };
+  const mappedVariant = deprecatedVariantMap[variant];
+  return mappedVariant || variant;
+};
+const HvButton = React.forwardRef(
+  (props, ref) => {
+    const {
+      classes: classesProp,
+      children,
+      variant: variantProp,
+      disabled = false,
+      className,
+      startIcon,
+      endIcon,
+      icon = false,
+      size,
+      radius,
+      overrideIconColors = true,
+      component: Component = "button",
+      ...others
+    } = useDefaultProps.useDefaultProps("HvButton", props);
+    const { classes, css, cx } = Button_styles.useClasses(classesProp);
+    const { activeTheme } = useTheme.useTheme();
+    const variant = mapVariant(
+      variantProp ?? (icon ? "secondaryGhost" : "primary"),
+      activeTheme?.name
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Component,
+      {
+        ref,
+        className: cx(
+          classes.root,
+          classes[variant],
+          size && css(Button_styles.getSizeStyles(size)),
+          radius && css(Button_styles.getRadiusStyles(radius)),
+          overrideIconColors && css(Button_styles.getOverrideColors()),
+          {
+            [classes.icon]: icon,
+            [classes.disabled]: disabled
+          },
+          className
+        ),
+        ...Component === "button" && { type: "button" },
+        ...disabled && {
+          disabled: true,
+          tabIndex: -1,
+          "aria-disabled": true
+        },
+        ...others,
+        children: [
+          startIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.startIcon, children: startIcon }),
+          children,
+          endIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.endIcon, children: endIcon })
+        ]
+      }
+    );
+  }
+);
+exports.buttonClasses = Button_styles.staticClasses;
+exports.HvButton = HvButton;
+//# sourceMappingURL=Button.cjs.map

package/dist/cjs/Button/Button.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.cjs","sources":["../../../src/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement } from \"react\";\n\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { PolymorphicComponentRef, PolymorphicRef } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport {\n  staticClasses as buttonClasses,\n  getOverrideColors,\n  getRadiusStyles,\n  getSizeStyles,\n  useClasses,\n} from \"./Button.styles\";\nimport { HvButtonRadius, HvButtonSize, HvButtonVariant } from \"./types\";\n\nexport { buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\n\nexport type HvButtonProps<C extends React.ElementType = \"button\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the Button. */\n      variant?: HvButtonVariant;\n      /** Whether the Button is an icon-only button. */\n      icon?: boolean;\n      /** Whether the Button is disabled or not. */\n      disabled?: boolean;\n      /** Class names to be applied. */\n      className?: string;\n      /** Element placed before the children. */\n      startIcon?: ReactElement;\n      /** Element placed after the children. */\n      endIcon?: ReactElement;\n      /** Button size. */\n      size?: HvButtonSize;\n      /** Button border radius. */\n      radius?: HvButtonRadius;\n      /** Defines the default colors of the button are forced into the icon. */\n      overrideIconColors?: boolean;\n      /** A Jss Object used to override or extend the styles applied. */\n      classes?: HvButtonClasses;\n      /** Whether the Button is selected or not. */\n      selected?: boolean;\n    }\n  >;\n\n/**\n * Normalize the button variant. It's meant to give us some retro-compatibility with\n * the DS 3.6 API.\n * @returns the normalized variant in DS 5 API\n */\nconst mapVariant = (\n  variant: HvButtonVariant,\n  theme?: string\n): HvButtonVariant => {\n  if (theme === \"ds3\") return variant;\n\n  const deprecatedVariantMap: Record<string, HvButtonVariant> = {\n    secondary: \"secondarySubtle\",\n    ghost: \"primaryGhost\",\n  };\n\n  const mappedVariant = deprecatedVariantMap[variant];\n\n  if (import.meta.env.DEV && mappedVariant) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `Button variant '${variant}' is deprecated. Please use '${mappedVariant}'.`\n    );\n  }\n\n  return mappedVariant || variant;\n};\n\n/**\n * Button component is used to trigger an action or event.\n */\nexport const HvButton: <C extends React.ElementType = \"button\">(\n  props: HvButtonProps<C>\n) => React.ReactElement | null = forwardRef(\n  <C extends React.ElementType = \"button\">(\n    props: HvButtonProps<C>,\n    ref: PolymorphicRef<C>\n  ) => {\n    const {\n      classes: classesProp,\n      children,\n      variant: variantProp,\n      disabled = false,\n      className,\n      startIcon,\n      endIcon,\n      icon = false,\n      size,\n      radius,\n      overrideIconColors = true,\n      component: Component = \"button\",\n      ...others\n    } = useDefaultProps(\"HvButton\", props);\n    const { classes, css, cx } = useClasses(classesProp);\n    const { activeTheme } = useTheme();\n    const variant = mapVariant(\n      variantProp ?? (icon ? \"secondaryGhost\" : \"primary\"),\n      activeTheme?.name\n    );\n\n    return (\n      <Component\n        ref={ref}\n        className={cx(\n          classes.root,\n          classes[variant],\n          size && css(getSizeStyles(size)),\n          radius && css(getRadiusStyles(radius)),\n          overrideIconColors && css(getOverrideColors()),\n          {\n            [classes.icon]: icon,\n            [classes.disabled]: disabled,\n          },\n          className\n        )}\n        {...(Component === \"button\" && { type: \"button\" })}\n        {...(disabled && {\n          disabled: true,\n          tabIndex: -1,\n          \"aria-disabled\": true,\n        })}\n        {...others}\n      >\n        {startIcon && <span className={classes.startIcon}>{startIcon}</span>}\n        {children}\n        {endIcon && <span className={classes.endIcon}>{endIcon}</span>}\n      </Component>\n    );\n  }\n);\n"],"names":["forwardRef","useDefaultProps","useClasses","useTheme","jsxs","getSizeStyles","getRadiusStyles","getOverrideColors","jsx"],"mappings":";;;;;;;AAsDA,MAAM,aAAa,CACjB,SACA,UACoB;AACpB,MAAI,UAAU;AAAc,WAAA;AAE5B,QAAM,uBAAwD;AAAA,IAC5D,WAAW;AAAA,IACX,OAAO;AAAA,EAAA;AAGH,QAAA,gBAAgB,qBAAqB,OAAO;AASlD,SAAO,iBAAiB;AAC1B;AAKO,MAAM,WAEoBA,MAAA;AAAA,EAC/B,CACE,OACA,QACG;AACG,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA,SAAS;AAAA,MACT,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,MACrB,WAAW,YAAY;AAAA,MACvB,GAAG;AAAA,IAAA,IACDC,gBAAgB,gBAAA,YAAY,KAAK;AACrC,UAAM,EAAE,SAAS,KAAK,GAAG,IAAIC,cAAAA,WAAW,WAAW;AAC7C,UAAA,EAAE,gBAAgBC,SAAAA;AACxB,UAAM,UAAU;AAAA,MACd,gBAAgB,OAAO,mBAAmB;AAAA,MAC1C,aAAa;AAAA,IAAA;AAIb,WAAAC,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,QAAQ,OAAO;AAAA,UACf,QAAQ,IAAIC,4BAAc,IAAI,CAAC;AAAA,UAC/B,UAAU,IAAIC,8BAAgB,MAAM,CAAC;AAAA,UACrC,sBAAsB,IAAIC,cAAAA,mBAAmB;AAAA,UAC7C;AAAA,YACE,CAAC,QAAQ,IAAI,GAAG;AAAA,YAChB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACtB;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAI,cAAc,YAAY,EAAE,MAAM,SAAS;AAAA,QAC/C,GAAI,YAAY;AAAA,UACf,UAAU;AAAA,UACV,UAAU;AAAA,UACV,iBAAiB;AAAA,QACnB;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,aAAcC,2BAAAA,IAAA,QAAA,EAAK,WAAW,QAAQ,WAAY,UAAU,WAAA;AAAA,UAC5D;AAAA,UACA,WAAYA,2BAAAA,IAAA,QAAA,EAAK,WAAW,QAAQ,SAAU,UAAQ,SAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG7D;AACF;;;"}

package/dist/cjs/Button/Button.styles.cjs

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const focusUtils = require("../utils/focusUtils.cjs");
+const classes = require("../utils/classes.cjs");
+const { staticClasses, useClasses } = classes.createClasses("HvButton", {
+  root: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    textTransform: "none",
+    cursor: "pointer",
+    minWidth: "70px",
+    whiteSpace: "nowrap",
+    "&:hover": {
+      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+    },
+    "&:focus-visible": {
+      ...focusUtils.outlineStyles,
+      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+    },
+    // default button - no size specified
+    fontFamily: uikitStyles.theme.fontFamily.body,
+    fontSize: uikitStyles.theme.fontSizes.base,
+    fontWeight: uikitStyles.theme.fontWeights.semibold,
+    lineHeight: "11px",
+    letterSpacing: 0,
+    height: "32px",
+    borderRadius: uikitStyles.theme.radii.base,
+    padding: uikitStyles.theme.spacing("xs", "sm")
+  },
+  startIcon: {
+    marginLeft: `calc(-1 * ${uikitStyles.theme.space.xs})`
+  },
+  endIcon: {
+    marginRight: `calc(-1 * ${uikitStyles.theme.space.xs})`
+  },
+  focusVisible: {},
+  disabled: {
+    color: uikitStyles.theme.colors.secondary_60,
+    borderColor: uikitStyles.theme.colors.atmo4,
+    backgroundColor: uikitStyles.theme.colors.atmo3,
+    cursor: "not-allowed",
+    pointerEvents: "none"
+  },
+  icon: {
+    margin: 0,
+    padding: 0,
+    height: "fit-content",
+    minWidth: "unset"
+  },
+  primary: {
+    color: uikitStyles.theme.colors.atmo1,
+    backgroundColor: uikitStyles.theme.colors.primary,
+    "&:hover, &:focus-visible": {
+      backgroundColor: uikitStyles.theme.colors.primary_80
+    }
+  },
+  primarySubtle: {
+    color: uikitStyles.theme.colors.primary,
+    backgroundColor: "transparent",
+    border: "1px solid currentColor"
+  },
+  primaryGhost: {
+    color: uikitStyles.theme.colors.primary,
+    backgroundColor: "transparent",
+    "&:disabled": {
+      backgroundColor: "transparent"
+    }
+  },
+  secondarySubtle: {
+    color: uikitStyles.theme.colors.secondary,
+    backgroundColor: "transparent",
+    border: "1px solid currentColor"
+  },
+  secondaryGhost: {
+    color: uikitStyles.theme.colors.secondary,
+    backgroundColor: "transparent",
+    "&:disabled": {
+      backgroundColor: "transparent"
+    }
+  },
+  semantic: {
+    color: uikitStyles.theme.colors.base_dark,
+    backgroundColor: "transparent",
+    "&:hover, &:focus-visible": {
+      backgroundColor: "rgba(251, 252, 252, 0.3)"
+    },
+    "&:disabled": {
+      backgroundColor: "rgba(251, 252, 252, 0.1)"
+    }
+  },
+  secondary: {},
+  ghost: {}
+});
+const getRadiusStyles = (radius) => ({
+  borderRadius: uikitStyles.theme.radii[radius]
+});
+const getSizeStyles = (size) => ({
+  height: uikitStyles.theme.sizes[size],
+  paddingLeft: uikitStyles.theme.space[size],
+  paddingRight: uikitStyles.theme.space[size],
+  fontSize: uikitStyles.theme.fontSizes[size]
+});
+const getOverrideColors = () => ({
+  "& svg .color0": {
+    fill: "currentcolor"
+  }
+});
+exports.getOverrideColors = getOverrideColors;
+exports.getRadiusStyles = getRadiusStyles;
+exports.getSizeStyles = getSizeStyles;
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
+//# sourceMappingURL=Button.styles.cjs.map

package/dist/cjs/Button/Button.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.styles.cjs","sources":["../../../src/Button/Button.styles.ts"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\n\nimport { HvButtonRadius, HvButtonSize } from \"./types\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButton\", {\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    textTransform: \"none\",\n    cursor: \"pointer\",\n    minWidth: \"70px\",\n\n    whiteSpace: \"nowrap\",\n\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: theme.fontSizes.base,\n    fontWeight: theme.fontWeights.semibold,\n    lineHeight: \"11px\",\n    letterSpacing: 0,\n    height: \"32px\",\n    borderRadius: theme.radii.base,\n    padding: theme.spacing(\"xs\", \"sm\"),\n  },\n  startIcon: {\n    marginLeft: `calc(-1 * ${theme.space.xs})`,\n  },\n  endIcon: {\n    marginRight: `calc(-1 * ${theme.space.xs})`,\n  },\n  focusVisible: {},\n\n  disabled: {\n    color: theme.colors.secondary_60,\n    borderColor: theme.colors.atmo4,\n    backgroundColor: theme.colors.atmo3,\n    cursor: \"not-allowed\",\n    pointerEvents: \"none\",\n  },\n\n  icon: {\n    margin: 0,\n    padding: 0,\n    height: \"fit-content\",\n    minWidth: \"unset\",\n  },\n\n  primary: {\n    color: theme.colors.atmo1,\n    backgroundColor: theme.colors.primary,\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: theme.colors.primary_80,\n    },\n  },\n  primarySubtle: {\n    color: theme.colors.primary,\n    backgroundColor: \"transparent\",\n    border: \"1px solid currentColor\",\n  },\n  primaryGhost: {\n    color: theme.colors.primary,\n    backgroundColor: \"transparent\",\n    \"&:disabled\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n  secondarySubtle: {\n    color: theme.colors.secondary,\n    backgroundColor: \"transparent\",\n    border: \"1px solid currentColor\",\n  },\n  secondaryGhost: {\n    color: theme.colors.secondary,\n    backgroundColor: \"transparent\",\n    \"&:disabled\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n  semantic: {\n    color: theme.colors.base_dark,\n    backgroundColor: \"transparent\",\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: \"rgba(251, 252, 252, 0.3)\",\n    },\n    \"&:disabled\": {\n      backgroundColor: \"rgba(251, 252, 252, 0.1)\",\n    },\n  },\n  secondary: {},\n  ghost: {},\n});\n\nexport const getRadiusStyles = (radius: HvButtonRadius): CSSInterpolation => ({\n  borderRadius: theme.radii[radius],\n});\n\nexport const getSizeStyles = (size: HvButtonSize): CSSInterpolation => ({\n  height: theme.sizes[size],\n  paddingLeft: theme.space[size],\n  paddingRight: theme.space[size],\n  fontSize: theme.fontSizes[size],\n});\n\nexport const getOverrideColors = (): CSSInterpolation => ({\n  \"& svg .color0\": {\n    fill: \"currentcolor\",\n  },\n});\n"],"names":["createClasses","theme","outlineStyles"],"mappings":"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"}

package/dist/cjs/Button/types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.cjs","sources":["../../../src/Button/types.ts"],"sourcesContent":["export const buttonVariant = [\n  \"primary\",\n  \"primarySubtle\",\n  \"primaryGhost\",\n  \"secondarySubtle\",\n  \"secondaryGhost\",\n  \"semantic\",\n  // deprecated props\n  \"secondary\",\n  \"ghost\",\n] as const;\nexport type HvButtonVariant = (typeof buttonVariant)[number];\n\nexport const buttonSize = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"] as const;\nexport type HvButtonSize = (typeof buttonSize)[number];\n\nexport const buttonRadius = [\n  \"none\",\n  \"base\",\n  \"round\",\n  \"circle\",\n  \"full\",\n] as const;\nexport type HvButtonRadius = (typeof buttonRadius)[number];\n"],"names":[],"mappings":";;AAAO,MAAM,gBAAgB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AACF;AAGO,MAAM,aAAa,CAAC,MAAM,MAAM,MAAM,MAAM,IAAI;AAGhD,MAAM,eAAe;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;;;;"}

package/dist/cjs/Calendar/Calendar.cjs

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
+const useDefaultProps = require("../hooks/useDefaultProps.cjs");
+const setId = require("../utils/setId.cjs");
+const utils = require("./utils.cjs");
+const Calendar_styles = require("./Calendar.styles.cjs");
+const SingleCalendar = require("./SingleCalendar/SingleCalendar.cjs");
+const FormElementContext = require("../Forms/FormElement/context/FormElementContext.cjs");
+const FormElementValueContext = require("../Forms/FormElement/context/FormElementValueContext.cjs");
+const HvCalendar = (props) => {
+  const {
+    classes: classesProp,
+    id,
+    locale = "en-US",
+    value,
+    visibleMonth,
+    visibleYear,
+    rightVisibleMonth,
+    rightVisibleYear,
+    minimumDate,
+    maximumDate,
+    startAdornment,
+    onChange,
+    onInputChange,
+    onVisibleDateChange,
+    invalidDateLabel,
+    ...others
+  } = useDefaultProps.useDefaultProps("HvCalendar", props);
+  const { classes } = Calendar_styles.useClasses(classesProp);
+  const { elementId } = React.useContext(FormElementContext.HvFormElementContext);
+  const elementValue = React.useContext(FormElementValueContext.HvFormElementValueContext);
+  const localValue = value ?? elementValue;
+  const localId = id ?? setId.setId(elementId, "single-calendar");
+  const rangeMode = utils.isRange(localValue);
+  const rightCalendarId = setId.setId(localId, "single-calendar-right");
+  const clampedMonth = visibleMonth && visibleMonth % 13 > 0 ? visibleMonth % 13 : 1;
+  const singleCalendar = /* @__PURE__ */ jsxRuntime.jsx(
+    SingleCalendar.HvSingleCalendar,
+    {
+      id: localId,
+      locale,
+      value: localValue,
+      visibleMonth: clampedMonth,
+      visibleYear,
+      minimumDate,
+      maximumDate,
+      onChange,
+      onInputChange: (evt, date) => onInputChange && onInputChange(evt, date, "left"),
+      onVisibleDateChange,
+      invalidDateLabel,
+      ...others
+    }
+  );
+  const rangeCalendar = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.rangeCalendarContainer, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SingleCalendar.HvSingleCalendar,
+      {
+        className: classes.singleCalendar,
+        id: localId,
+        locale,
+        value: localValue,
+        visibleMonth: clampedMonth,
+        visibleYear,
+        minimumDate,
+        maximumDate,
+        onChange,
+        onInputChange: (evt, date) => onInputChange && onInputChange(evt, date, "left"),
+        onVisibleDateChange: (event, action, index) => onVisibleDateChange?.(event, action, index, "left"),
+        invalidDateLabel,
+        ...others
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SingleCalendar.HvSingleCalendar,
+      {
+        className: classes.singleCalendar,
+        id: rightCalendarId,
+        locale,
+        value: localValue,
+        visibleMonth: rightVisibleMonth,
+        visibleYear: rightVisibleYear,
+        minimumDate,
+        maximumDate,
+        onChange,
+        onInputChange: (evt, date) => onInputChange && onInputChange(evt, date, "right"),
+        onVisibleDateChange: (event, action, index) => {
+          onVisibleDateChange?.(event, action, index, "right");
+        },
+        showEndDate: true,
+        invalidDateLabel,
+        ...others
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.root, children: [
+    startAdornment,
+    rangeMode ? rangeCalendar : singleCalendar
+  ] });
+};
+exports.calendarClasses = Calendar_styles.staticClasses;
+exports.HvCalendar = HvCalendar;
+//# sourceMappingURL=Calendar.cjs.map

package/dist/cjs/Calendar/Calendar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.cjs","sources":["../../../src/Calendar/Calendar.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { setId } from \"../utils/setId\";\nimport { HvFormElementContext, HvFormElementValueContext } from \"../Forms\";\n\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { isRange } from \"./utils\";\nimport { HvSingleCalendar } from \"./SingleCalendar\";\nimport { DateRangeProp, VisibilitySelectorActions } from \"./types\";\n\nimport { staticClasses, useClasses } from \"./Calendar.styles\";\n\nexport { staticClasses as calendarClasses };\n\nexport type HvCalendarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCalendarProps {\n  /**\n   * Styles applied from the theme.\n   */\n  classes?: HvCalendarClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * The calendar locale. If undefined, it defaults to en-US\n   *\n   */\n  locale?: string;\n  /**\n   * Date that the calendar would show.\n   * if using the object format the calendar enter in range mode showing two calendars\n   */\n  value?: DateRangeProp | Date;\n  /**\n   * Controls the visible month of the Calendar\n   */\n  visibleMonth?: number;\n  /**\n   * Controls the visible year of the Calendar\n   */\n  visibleYear?: number;\n  /**\n   * Controls the visible month of the Calendar on the right side of the datepicker\n   */\n  rightVisibleMonth?: number;\n  /**\n   * Controls the visible year of the Calendar on the right side of the datepicker\n   */\n  rightVisibleYear?: number;\n  /**\n   * Callback function to be triggered when the selected date has changed.\n   */\n  onChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    value: Date | DateRangeProp\n  ) => void;\n  /**\n   * Callback function to be triggered when the selected date input has changed.\n   */\n  onInputChange?: (\n    event:\n      | React.ChangeEvent<\n          HTMLTextAreaElement | HTMLInputElement | HTMLButtonElement\n        >\n      | undefined,\n    value: Date | DateRangeProp,\n    position: \"left\" | \"right\"\n  ) => void;\n  /**\n   * Callback function to be triggered when the user clicks on the month or year selector.\n   * it receives the action that was pressed:\n   * previous_month, next_month, previous_year, next_year,month\n   */\n  onVisibleDateChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    action: VisibilitySelectorActions,\n    value?: Date | DateRangeProp | number,\n    position?: \"left\" | \"right\"\n  ) => void;\n  /**\n   * The maximum selectable date after this all values are disabled.\n   */\n  maximumDate?: Date;\n  /**\n   * The minimum selectable date before this all values are disabled.\n   */\n  minimumDate?: Date;\n  /**\n   * An element placed before the Calendar\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * Indicates if header should display the day of week.\n   */\n  showDayOfWeek?: boolean;\n  /**\n   * Label shown when date is invalid.\n   */\n  invalidDateLabel?: string;\n}\n\nexport const HvCalendar = (props: HvCalendarProps) => {\n  const {\n    classes: classesProp,\n    id,\n    locale = \"en-US\",\n    value,\n    visibleMonth,\n    visibleYear,\n    rightVisibleMonth,\n    rightVisibleYear,\n    minimumDate,\n    maximumDate,\n    startAdornment,\n    onChange,\n    onInputChange,\n    onVisibleDateChange,\n    invalidDateLabel,\n    ...others\n  } = useDefaultProps(\"HvCalendar\", props);\n  const { classes } = useClasses(classesProp);\n\n  const { elementId } = useContext(HvFormElementContext);\n  const elementValue = useContext(HvFormElementValueContext);\n  const localValue = value ?? elementValue;\n  const localId = id ?? setId(elementId, \"single-calendar\");\n  const rangeMode = isRange(localValue);\n  const rightCalendarId = setId(localId, \"single-calendar-right\");\n  const clampedMonth =\n    visibleMonth && visibleMonth % 13 > 0 ? visibleMonth % 13 : 1;\n\n  const singleCalendar = (\n    <HvSingleCalendar\n      id={localId}\n      locale={locale}\n      value={localValue}\n      visibleMonth={clampedMonth}\n      visibleYear={visibleYear}\n      minimumDate={minimumDate}\n      maximumDate={maximumDate}\n      onChange={onChange}\n      onInputChange={(evt, date) =>\n        onInputChange && onInputChange(evt, date, \"left\")\n      }\n      onVisibleDateChange={onVisibleDateChange}\n      invalidDateLabel={invalidDateLabel}\n      {...others}\n    />\n  );\n\n  const rangeCalendar = (\n    <div className={classes.rangeCalendarContainer}>\n      <HvSingleCalendar\n        className={classes.singleCalendar}\n        id={localId}\n        locale={locale}\n        value={localValue}\n        visibleMonth={clampedMonth}\n        visibleYear={visibleYear}\n        minimumDate={minimumDate}\n        maximumDate={maximumDate}\n        onChange={onChange}\n        onInputChange={(evt, date) =>\n          onInputChange && onInputChange(evt, date, \"left\")\n        }\n        onVisibleDateChange={(event, action, index) =>\n          onVisibleDateChange?.(event, action, index, \"left\")\n        }\n        invalidDateLabel={invalidDateLabel}\n        {...others}\n      />\n\n      <HvSingleCalendar\n        className={classes.singleCalendar}\n        id={rightCalendarId}\n        locale={locale}\n        value={localValue}\n        visibleMonth={rightVisibleMonth}\n        visibleYear={rightVisibleYear}\n        minimumDate={minimumDate}\n        maximumDate={maximumDate}\n        onChange={onChange}\n        onInputChange={(evt, date) =>\n          onInputChange && 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":["useDefaultProps","useClasses","useContext","HvFormElementContext","HvFormElementValueContext","setId","isRange","jsx","HvSingleCalendar","jsxs"],"mappings":";;;;;;;;;;;AA8Ga,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,cAAc,KAAK;AACvC,QAAM,EAAE,QAAA,IAAYC,gBAAA,WAAW,WAAW;AAE1C,QAAM,EAAE,UAAA,IAAcC,MAAA,WAAWC,mBAAoB,oBAAA;AAC/C,QAAA,eAAeD,iBAAWE,wBAAAA,yBAAyB;AACzD,QAAM,aAAa,SAAS;AAC5B,QAAM,UAAU,MAAMC,MAAM,MAAA,WAAW,iBAAiB;AAClD,QAAA,YAAYC,cAAQ,UAAU;AAC9B,QAAA,kBAAkBD,MAAAA,MAAM,SAAS,uBAAuB;AAC9D,QAAM,eACJ,gBAAgB,eAAe,KAAK,IAAI,eAAe,KAAK;AAE9D,QAAM,iBACJE,2BAAA;AAAA,IAACC,eAAA;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,MACP,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe,CAAC,KAAK,SACnB,iBAAiB,cAAc,KAAK,MAAM,MAAM;AAAA,MAElD;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAIR,QAAM,gBACJC,2BAAAA,KAAC,OAAI,EAAA,WAAW,QAAQ,wBACtB,UAAA;AAAA,IAAAF,2BAAA;AAAA,MAACC,eAAA;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,IAAI;AAAA,QACJ;AAAA,QACA,OAAO;AAAA,QACP,cAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,CAAC,KAAK,SACnB,iBAAiB,cAAc,KAAK,MAAM,MAAM;AAAA,QAElD,qBAAqB,CAAC,OAAO,QAAQ,UACnC,sBAAsB,OAAO,QAAQ,OAAO,MAAM;AAAA,QAEpD;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,IAEAD,2BAAA;AAAA,MAACC,eAAA;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,IAAI;AAAA,QACJ;AAAA,QACA,OAAO;AAAA,QACP,cAAc;AAAA,QACd,aAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,CAAC,KAAK,SACnB,iBAAiB,cAAc,KAAK,MAAM,OAAO;AAAA,QAEnD,qBAAqB,CAAC,OAAO,QAAQ,UAAU;AACvB,gCAAA,OAAO,QAAQ,OAAO,OAAO;AAAA,QACrD;AAAA,QACA,aAAW;AAAA,QACX;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,EACF,EAAA,CAAA;AAGF,SACGC,2BAAAA,KAAA,OAAA,EAAI,WAAW,QAAQ,MACrB,UAAA;AAAA,IAAA;AAAA,IACA,YAAY,gBAAgB;AAAA,EAC/B,EAAA,CAAA;AAEJ;;;"}

package/dist/cjs/Calendar/Calendar.styles.cjs

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const classes = require("../utils/classes.cjs");
+const { staticClasses, useClasses } = classes.createClasses("HvCalendar", {
+  root: {
+    display: "flex",
+    justifyContent: "center"
+  },
+  rangeCalendarContainer: {
+    display: "flex"
+  },
+  singleCalendar: {
+    "&:hover": {
+      "& ~ $singleCalendar": {
+        // target the next calendar when the former is hovered
+        "& > div": {
+          "& > div:nth-of-type(3)": {
+            "& > div": {
+              "& > div[data-calendar-cell='calendarCell']": {
+                backgroundColor: uikitStyles.theme.colors.atmo1
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  focusSelection: {},
+  calendarMonthlyCell: {},
+  calendarMonthlyCellSelected: {}
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
+//# sourceMappingURL=Calendar.styles.cjs.map

package/dist/cjs/Calendar/Calendar.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.styles.cjs","sources":["../../../src/Calendar/Calendar.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendar\", {\n  root: {\n    display: \"flex\",\n    justifyContent: \"center\",\n  },\n  rangeCalendarContainer: {\n    display: \"flex\",\n  },\n  singleCalendar: {\n    \"&:hover\": {\n      \"& ~ $singleCalendar\": {\n        // target the next calendar when the former is hovered\n        \"& > div\": {\n          \"& > div:nth-of-type(3)\": {\n            \"& > div\": {\n              \"& > div[data-calendar-cell='calendarCell']\": {\n                backgroundColor: theme.colors.atmo1,\n              },\n            },\n          },\n        },\n      },\n    },\n  },\n  focusSelection: {},\n  calendarMonthlyCell: {},\n  calendarMonthlyCellSelected: {},\n});\n"],"names":["createClasses","theme"],"mappings":";;;;AAIO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,gBAAgB;AAAA,EAClB;AAAA,EACA,wBAAwB;AAAA,IACtB,SAAS;AAAA,EACX;AAAA,EACA,gBAAgB;AAAA,IACd,WAAW;AAAA,MACT,uBAAuB;AAAA;AAAA,QAErB,WAAW;AAAA,UACT,0BAA0B;AAAA,YACxB,WAAW;AAAA,cACT,8CAA8C;AAAA,gBAC5C,iBAAiBC,YAAAA,MAAM,OAAO;AAAA,cAChC;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACA,gBAAgB,CAAC;AAAA,EACjB,qBAAqB,CAAC;AAAA,EACtB,6BAA6B,CAAC;AAChC,CAAC;;;"}

package/dist/cjs/Calendar/CalendarHeader/CalendarHeader.cjs

@@ -0,0 +1,154 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
+const dayjs = require("dayjs");
+const localeData = require("dayjs/plugin/localeData");
+const localizedFormat = require("dayjs/plugin/localizedFormat");
+const customParseFormat = require("dayjs/plugin/customParseFormat");
+const keyboardUtils = require("../../utils/keyboardUtils.cjs");
+const setId = require("../../utils/setId.cjs");
+const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
+const utils = require("../utils.cjs");
+const CalendarHeader_styles = require("./CalendarHeader.styles.cjs");
+const FormElementValueContext = require("../../Forms/FormElement/context/FormElementValueContext.cjs");
+const Input = require("../../Input/Input.cjs");
+const FormElementContext = require("../../Forms/FormElement/context/FormElementContext.cjs");
+const FormElementDescriptorsContext = require("../../Forms/FormElement/context/FormElementDescriptorsContext.cjs");
+const Typography = require("../../Typography/Typography.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const dayjs__default = /* @__PURE__ */ _interopDefault(dayjs);
+const localeData__default = /* @__PURE__ */ _interopDefault(localeData);
+const localizedFormat__default = /* @__PURE__ */ _interopDefault(localizedFormat);
+const customParseFormat__default = /* @__PURE__ */ _interopDefault(customParseFormat);
+dayjs__default.default.extend(localeData__default.default);
+dayjs__default.default.extend(localizedFormat__default.default);
+dayjs__default.default.extend(customParseFormat__default.default);
+const HvCalendarHeader = (props) => {
+  const {
+    id,
+    value,
+    locale = "en-US",
+    classes: classesProp,
+    onChange,
+    showEndDate,
+    showDayOfWeek = false,
+    onFocus,
+    invalidDateLabel = "Invalid Date"
+  } = useDefaultProps.useDefaultProps("HvCalendarHeader", props);
+  const { classes, cx } = CalendarHeader_styles.useClasses(classesProp);
+  const { elementId } = React.useContext(FormElementContext.HvFormElementContext);
+  const elementValue = React.useContext(FormElementValueContext.HvFormElementValueContext);
+  const { label } = React.useContext(FormElementDescriptorsContext.HvFormElementDescriptorsContext);
+  let localValue = value ?? elementValue ?? "";
+  if (utils.isRange(localValue)) {
+    localValue = showEndDate ? localValue.endDate : localValue.startDate;
+  }
+  const [dateValue, setDateValue] = React.useState(localValue);
+  const [editedValue, setEditedValue] = React.useState(null);
+  const [displayValue, setDisplayValue] = React.useState("");
+  const [weekdayDisplay, setWeekdayDisplay] = React.useState("");
+  const localId = id ?? setId.setId(elementId, "calendarHeader");
+  const inputValue = editedValue ?? displayValue;
+  const localeFormat = dayjs__default.default().locale(locale).localeData().longDateFormat("L");
+  const [isValidValue, setIsValidValue] = React.useState(
+    inputValue.length === 0 || !!inputValue && dayjs__default.default(localValue).isValid()
+  );
+  const validateInput = (incomingValid) => incomingValid === void 0 || dayjs__default.default(incomingValid).isValid();
+  React.useEffect(() => {
+    const valid = validateInput(localValue);
+    setIsValidValue(valid);
+    if (valid) {
+      if (!localValue) {
+        setDisplayValue("");
+        setEditedValue(null);
+        setWeekdayDisplay("");
+        return;
+      }
+      const weekday = new Intl.DateTimeFormat(locale, {
+        weekday: "short"
+      }).format(utils.isDate(localValue) ? localValue : 0);
+      setDisplayValue(utils.formatToLocale(localValue, locale));
+      setEditedValue(null);
+      setWeekdayDisplay(weekday);
+    }
+  }, [localValue, locale]);
+  const handleNewDate = (event, date) => {
+    const localeParsedDate = dayjs__default.default(date, localeFormat);
+    const isValidInput = localeParsedDate.isValid();
+    const dateParsed = isValidInput ? localeParsedDate.toDate() : dayjs__default.default(date).toDate();
+    if (!utils.isSameDay(dateParsed, dateValue)) {
+      setDateValue(dateParsed);
+      onChange?.(event, dateParsed);
+    }
+    setIsValidValue(isValidInput);
+    if (isValidInput) {
+      setEditedValue(null);
+    }
+  };
+  const onBlurHandler = (event) => {
+    if (editedValue == null)
+      return;
+    if (editedValue === "") {
+      setIsValidValue(true);
+      setEditedValue(null);
+      return;
+    }
+    handleNewDate(event, editedValue);
+  };
+  const keyDownHandler = (event) => {
+    if (!keyboardUtils.isKey(event, "Enter") || editedValue == null || editedValue === "")
+      return;
+    event.preventDefault();
+    handleNewDate(event, editedValue);
+  };
+  const onFocusHandler = (event) => {
+    if (!localValue)
+      return;
+    const formattedDate = isValidValue && utils.isDate(localValue) ? dayjs__default.default(localValue).locale(locale).format("L") : editedValue;
+    setEditedValue(formattedDate);
+    onFocus?.(event, formattedDate);
+  };
+  const onChangeHandler = (event, val) => {
+    setEditedValue(val);
+  };
+  const isInvalid = !isValidValue && inputValue !== "";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      id: localId,
+      className: cx(classes.root, {
+        [classes.invalid]: isInvalid
+      }),
+      children: [
+        showDayOfWeek && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes.headerDayOfWeek, children: weekdayDisplay || " " }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Input.HvInput,
+          {
+            type: "text",
+            id: setId.setId(localId, "header-input"),
+            className: classes.headerDate,
+            classes: {
+              input: classes.input,
+              inputBorderContainer: classes.inputBorderContainer,
+              error: classes.invalidMessageStyling
+            },
+            placeholder: localeFormat,
+            value: inputValue,
+            "aria-labelledby": label?.[0]?.id,
+            onBlur: onBlurHandler,
+            onFocus: onFocusHandler,
+            onChange: onChangeHandler,
+            onKeyDown: keyDownHandler,
+            status: isInvalid ? "invalid" : "valid",
+            statusMessage: invalidDateLabel
+          }
+        )
+      ]
+    }
+  );
+};
+HvCalendarHeader.formElementType = "HvCalendarHeader";
+exports.calendarHeaderClasses = CalendarHeader_styles.staticClasses;
+exports.HvCalendarHeader = HvCalendarHeader;
+//# sourceMappingURL=CalendarHeader.cjs.map

package/dist/cjs/Calendar/CalendarHeader/CalendarHeader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarHeader.cjs","sources":["../../../../src/Calendar/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import { useState, useEffect, useContext } from \"react\";\nimport dayjs from \"dayjs\";\nimport localeData from \"dayjs/plugin/localeData\";\nimport localizedFormat from \"dayjs/plugin/localizedFormat\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\n\nimport {\n  HvFormElementContext,\n  HvFormElementValueContext,\n  HvFormElementDescriptorsContext,\n} from \"../../Forms\";\nimport { isKey } from \"../../utils/keyboardUtils\";\nimport { setId } from \"../../utils/setId\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvInput, HvInputProps } from \"../../Input\";\n\nimport { isRange, isSameDay, formatToLocale, isDate } from \"../utils\";\nimport { DateRangeProp } from \"../types\";\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,\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 { elementId } = 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 localId = id ?? setId(elementId, \"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={localId}\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(localId, \"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":["dayjs","localeData","localizedFormat","customParseFormat","useDefaultProps","useClasses","useContext","HvFormElementContext","HvFormElementValueContext","HvFormElementDescriptorsContext","isRange","useState","setId","useEffect","isDate","formatToLocale","isSameDay","isKey","jsxs","HvTypography","jsx","HvInput"],"mappings":"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"}

package/dist/cjs/Calendar/CalendarHeader/CalendarHeader.styles.cjs

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const classes = require("../../utils/classes.cjs");
+const { staticClasses, useClasses } = classes.createClasses("HvCalendarHeader", {
+  root: {
+    paddingBottom: uikitStyles.theme.space.md,
+    "&$invalid": {
+      paddingBottom: 0
+    }
+  },
+  invalid: {},
+  headerDayOfWeek: {
+    color: uikitStyles.theme.colors.secondary_80
+  },
+  headerDate: {},
+  input: {},
+  inputBorderContainer: {},
+  invalidMessageStyling: {}
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
+//# sourceMappingURL=CalendarHeader.styles.cjs.map

package/dist/cjs/Calendar/CalendarHeader/CalendarHeader.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarHeader.styles.cjs","sources":["../../../../src/Calendar/CalendarHeader/CalendarHeader.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendarHeader\", {\n  root: {\n    paddingBottom: theme.space.md,\n\n    \"&$invalid\": {\n      paddingBottom: 0,\n    },\n  },\n  invalid: {},\n  headerDayOfWeek: {\n    color: theme.colors.secondary_80,\n  },\n  headerDate: {},\n  input: {},\n  inputBorderContainer: {},\n  invalidMessageStyling: {},\n});\n"],"names":["createClasses","theme"],"mappings":";;;;AAIO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,eAAeC,YAAAA,MAAM,MAAM;AAAA,IAE3B,aAAa;AAAA,MACX,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACA,SAAS,CAAC;AAAA,EACV,iBAAiB;AAAA,IACf,OAAOA,YAAAA,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,YAAY,CAAC;AAAA,EACb,OAAO,CAAC;AAAA,EACR,sBAAsB,CAAC;AAAA,EACvB,uBAAuB,CAAC;AAC1B,CAAC;;;"}

package/dist/cjs/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.cjs

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const setId = require("../../../utils/setId.cjs");
+const utils = require("../../utils.cjs");
+const ComposedNavigation_styles = require("./ComposedNavigation.styles.cjs");
+const Navigation = require("../Navigation/Navigation.cjs");
+const HvComposedNavigation = ({
+  classes: classesProp,
+  id,
+  locale,
+  onChange,
+  onViewModeChange,
+  visibleYear,
+  visibleMonth,
+  ...others
+}) => {
+  const { classes } = ComposedNavigation_styles.useClasses(classesProp);
+  const listMonthNamesLong = utils.getMonthNamesList(locale, "long");
+  const monthName = listMonthNamesLong[visibleMonth - 1];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.navigationContainer, ...others, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.navigationMonth, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Navigation.Navigation,
+      {
+        id: setId.setId(id, "navigation-month"),
+        navigationText: monthName,
+        onNavigatePrevious: (event) => {
+          onChange?.(event, "previous_month");
+        },
+        onNavigateNext: (event) => {
+          onChange?.(event, "next_month");
+        },
+        onTextClick: () => {
+          onViewModeChange("monthly");
+        },
+        className: classes.navigationMonth
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Navigation.Navigation,
+      {
+        id: setId.setId(id, "navigation-year"),
+        navigationText: visibleYear.toString(),
+        onNavigatePrevious: (event) => {
+          onChange?.(event, "previous_year");
+        },
+        onNavigateNext: (event) => {
+          onChange?.(event, "next_year");
+        }
+      }
+    )
+  ] });
+};
+exports.composedNavigationClasses = ComposedNavigation_styles.staticClasses;
+exports.HvComposedNavigation = HvComposedNavigation;
+//# sourceMappingURL=ComposedNavigation.cjs.map