@hitachivantara/uikit-react-core 5.32.0 → 5.33.0

package/dist/esm/components/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.js

@@ -21,16 +21,16 @@ const HvComposedNavigation = ({
   const monthName = listMonthNamesLong[visibleMonth - 1];
   return /* @__PURE__ */ jsxs("div", { className: classes.navigationContainer, ...others, children: [
     /* @__PURE__ */ jsx("div", { className: classes.navigationMonth, children: /* @__PURE__ */ jsx(Navigation, { id: setId(id, "navigation-month"), navigationText: monthName, onNavigatePrevious: (event) => {
-      onChange == null ? void 0 : onChange(event, "previous_month");
+      onChange?.(event, "previous_month");
     }, onNavigateNext: (event) => {
-      onChange == null ? void 0 : onChange(event, "next_month");
+      onChange?.(event, "next_month");
     }, onTextClick: () => {
       onViewModeChange("monthly");
     }, className: classes.navigationMonth }) }),
     /* @__PURE__ */ jsx(Navigation, { id: setId(id, "navigation-year"), navigationText: visibleYear.toString(), onNavigatePrevious: (event) => {
-      onChange == null ? void 0 : onChange(event, "previous_year");
+      onChange?.(event, "previous_year");
     }, onNavigateNext: (event) => {
-      onChange == null ? void 0 : onChange(event, "next_year");
+      onChange?.(event, "next_year");
     } })
   ] });
 };

package/dist/esm/components/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComposedNavigation.js","sources":["../../../../../../src/components/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.tsx"],"sourcesContent":["import { setId } from \"@core/utils/setId\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { getMonthNamesList } from \"../../utils\";\nimport { ViewMode } from \"../../enums\";\nimport { Navigation } from \"../Navigation\";\nimport { VisibilitySelectorActions } from \"../../types\";\n\nimport { staticClasses, useClasses } from \"./ComposedNavigation.styles\";\n\nexport { staticClasses as composedNavigationClasses };\n\nexport type HvComposedNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport const HvComposedNavigation = ({\n  classes: classesProp,\n  id,\n  locale,\n  onChange,\n  onViewModeChange,\n  visibleYear,\n  visibleMonth,\n  ...others\n}: HvComposedNavigationProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const listMonthNamesLong = getMonthNamesList(locale, \"long\");\n  const monthName = listMonthNamesLong[visibleMonth - 1];\n\n  return (\n    <div className={classes.navigationContainer} {...others}>\n      <div className={classes.navigationMonth}>\n        <Navigation\n          id={setId(id, \"navigation-month\")}\n          navigationText={monthName}\n          onNavigatePrevious={(event) => {\n            onChange?.(event, \"previous_month\");\n          }}\n          onNavigateNext={(event) => {\n            onChange?.(event, \"next_month\");\n          }}\n          onTextClick={() => {\n            onViewModeChange(\"monthly\");\n          }}\n          className={classes.navigationMonth}\n        />\n      </div>\n\n      <Navigation\n        id={setId(id, \"navigation-year\")}\n        navigationText={visibleYear.toString()}\n        onNavigatePrevious={(event) => {\n          onChange?.(event, \"previous_year\");\n        }}\n        onNavigateNext={(event) => {\n          onChange?.(event, \"next_year\");\n        }}\n      />\n    </div>\n  );\n};\n\nexport interface HvComposedNavigationProps {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvComposedNavigationClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * Locale to be used by the calendar.\n   */\n  locale?: string;\n  /**\n   * Callback to define the input date.\n   */\n  onChange?: (event, action: VisibilitySelectorActions) => void;\n  /**\n   * Callback to define the view mode.\n   */\n  onViewModeChange: (viewMode: ViewMode) => void;\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"],"names":["HvComposedNavigation","classes","classesProp","id","locale","onChange","onViewModeChange","visibleYear","visibleMonth","others","useClasses","listMonthNamesLong","getMonthNamesList","monthName","navigationContainer","navigationMonth","setId","event","toString"],"mappings":";;;;;;AAcO,MAAMA,uBAAuBA,CAAC;AAAA,EACnCC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACsB,MAAM;AACzB,QAAA;AAAA,IAAER;AAAAA,EAAAA,IAAYS,WAAWR,WAAW;AAEpCS,QAAAA,qBAAqBC,kBAAkBR,QAAQ,MAAM;AACrDS,QAAAA,YAAYF,mBAAmBH,eAAe,CAAC;AAErD,8BACG,OAAI,EAAA,WAAWP,QAAQa,qBAAqB,GAAIL,QAC/C,UAAA;AAAA,IAAA,oBAAC,OAAI,EAAA,WAAWR,QAAQc,iBACtB,8BAAC,YACC,EAAA,IAAIC,MAAMb,IAAI,kBAAkB,GAChC,gBAAgBU,WAChB,oBAAqBI,CAAU,UAAA;AAC7BZ,2CAAWY,OAAO;AAAA,IAAgB,GAEpC,gBAAiBA,CAAU,UAAA;AACzBZ,2CAAWY,OAAO;AAAA,IACpB,GACA,aAAa,MAAM;AACjBX,uBAAiB,SAAS;AAAA,IAE5B,GAAA,WAAWL,QAAQc,gBAAAA,CAAgB,EAEvC,CAAA;AAAA,IAEC,oBAAA,YAAA,EACC,IAAIC,MAAMb,IAAI,iBAAiB,GAC/B,gBAAgBI,YAAYW,SAC5B,GAAA,oBAAqBD,CAAU,UAAA;AAC7BZ,2CAAWY,OAAO;AAAA,IAAe,GAEnC,gBAAiBA,CAAU,UAAA;AACzBZ,2CAAWY,OAAO;AAAA,IAAW,GAC7B;AAAA,EAEN,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"ComposedNavigation.js","sources":["../../../../../../src/components/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.tsx"],"sourcesContent":["import { setId } from \"@core/utils/setId\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { getMonthNamesList } from \"../../utils\";\nimport { ViewMode } from \"../../enums\";\nimport { Navigation } from \"../Navigation\";\nimport { VisibilitySelectorActions } from \"../../types\";\n\nimport { staticClasses, useClasses } from \"./ComposedNavigation.styles\";\n\nexport { staticClasses as composedNavigationClasses };\n\nexport type HvComposedNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport const HvComposedNavigation = ({\n  classes: classesProp,\n  id,\n  locale,\n  onChange,\n  onViewModeChange,\n  visibleYear,\n  visibleMonth,\n  ...others\n}: HvComposedNavigationProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const listMonthNamesLong = getMonthNamesList(locale, \"long\");\n  const monthName = listMonthNamesLong[visibleMonth - 1];\n\n  return (\n    <div className={classes.navigationContainer} {...others}>\n      <div className={classes.navigationMonth}>\n        <Navigation\n          id={setId(id, \"navigation-month\")}\n          navigationText={monthName}\n          onNavigatePrevious={(event) => {\n            onChange?.(event, \"previous_month\");\n          }}\n          onNavigateNext={(event) => {\n            onChange?.(event, \"next_month\");\n          }}\n          onTextClick={() => {\n            onViewModeChange(\"monthly\");\n          }}\n          className={classes.navigationMonth}\n        />\n      </div>\n\n      <Navigation\n        id={setId(id, \"navigation-year\")}\n        navigationText={visibleYear.toString()}\n        onNavigatePrevious={(event) => {\n          onChange?.(event, \"previous_year\");\n        }}\n        onNavigateNext={(event) => {\n          onChange?.(event, \"next_year\");\n        }}\n      />\n    </div>\n  );\n};\n\nexport interface HvComposedNavigationProps {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvComposedNavigationClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * Locale to be used by the calendar.\n   */\n  locale?: string;\n  /**\n   * Callback to define the input date.\n   */\n  onChange?: (event, action: VisibilitySelectorActions) => void;\n  /**\n   * Callback to define the view mode.\n   */\n  onViewModeChange: (viewMode: ViewMode) => void;\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"],"names":["HvComposedNavigation","classes","classesProp","id","locale","onChange","onViewModeChange","visibleYear","visibleMonth","others","useClasses","listMonthNamesLong","getMonthNamesList","monthName","navigationContainer","navigationMonth","setId","event","toString"],"mappings":";;;;;;AAeO,MAAMA,uBAAuBA,CAAC;AAAA,EACnCC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACsB,MAAM;AACzB,QAAA;AAAA,IAAER;AAAAA,EAAAA,IAAYS,WAAWR,WAAW;AAEpCS,QAAAA,qBAAqBC,kBAAkBR,QAAQ,MAAM;AACrDS,QAAAA,YAAYF,mBAAmBH,eAAe,CAAC;AAErD,8BACG,OAAI,EAAA,WAAWP,QAAQa,qBAAqB,GAAIL,QAC/C,UAAA;AAAA,IAAA,oBAAC,OAAI,EAAA,WAAWR,QAAQc,iBACtB,8BAAC,YACC,EAAA,IAAIC,MAAMb,IAAI,kBAAkB,GAChC,gBAAgBU,WAChB,oBAAqBI,CAAU,UAAA;AAC7BZ,iBAAWY,OAAO,gBAAgB;AAAA,IAAA,GAEpC,gBAAiBA,CAAU,UAAA;AACzBZ,iBAAWY,OAAO,YAAY;AAAA,IAChC,GACA,aAAa,MAAM;AACjBX,uBAAiB,SAAS;AAAA,IAE5B,GAAA,WAAWL,QAAQc,gBAAAA,CAAgB,EAEvC,CAAA;AAAA,IAEC,oBAAA,YAAA,EACC,IAAIC,MAAMb,IAAI,iBAAiB,GAC/B,gBAAgBI,YAAYW,SAC5B,GAAA,oBAAqBD,CAAU,UAAA;AAC7BZ,iBAAWY,OAAO,eAAe;AAAA,IAAA,GAEnC,gBAAiBA,CAAU,UAAA;AACzBZ,iBAAWY,OAAO,WAAW;AAAA,IAAA,GAC7B;AAAA,EAEN,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.styles.js

@@ -1,5 +1,5 @@
-import { createClasses } from "../../../../utils/classes.js";
 import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../../../utils/classes.js";
 const {
   staticClasses,
   useClasses

package/dist/esm/components/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComposedNavigation.styles.js","sources":["../../../../../../src/components/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvComposedNavigation\",\n  {\n    navigationContainer: {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      padding: theme.spacing(\"xs\", 0),\n    },\n    navigationMonth: {\n      minWidth: \"160px\",\n    },\n  }\n);\n"],"names":["staticClasses","useClasses","createClasses","navigationContainer","display","justifyContent","padding","theme","spacing","navigationMonth","minWidth"],"mappings":";;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAC3C,wBACA;AAAA,EACEC,qBAAqB;AAAA,IACnBC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,SAASC,MAAMC,QAAQ,MAAM,CAAC;AAAA,EAChC;AAAA,EACAC,iBAAiB;AAAA,IACfC,UAAU;AAAA,EACZ;AACF,CACF;"}
+{"version":3,"file":"ComposedNavigation.styles.js","sources":["../../../../../../src/components/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvComposedNavigation\",\n  {\n    navigationContainer: {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      padding: theme.spacing(\"xs\", 0),\n    },\n    navigationMonth: {\n      minWidth: \"160px\",\n    },\n  }\n);\n"],"names":["staticClasses","useClasses","createClasses","navigationContainer","display","justifyContent","padding","theme","spacing","navigationMonth","minWidth"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAC3C,wBACA;AAAA,EACEC,qBAAqB;AAAA,IACnBC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,SAASC,MAAMC,QAAQ,MAAM,CAAC;AAAA,EAChC;AAAA,EACAC,iBAAiB;AAAA,IACfC,UAAU;AAAA,EACZ;AACF,CACF;"}

package/dist/esm/components/Calendar/CalendarNavigation/MonthSelector/MonthSelector.js

@@ -21,7 +21,7 @@ const HvMonthSelector = ({
   const listMonthNamesShort = getMonthNamesList(locale, "short");
   const onKeyDownHandler = (event, index) => {
     if (isKey(event, "Enter")) {
-      onChange == null ? void 0 : onChange(event, "month", index + 1);
+      onChange?.(event, "month", index + 1);
       onViewModeChange("calendar");
     }
   };
@@ -29,7 +29,7 @@ const HvMonthSelector = ({
     [classes.rangeModeWidth]: rangeMode,
     [classes.normalWidth]: !rangeMode
   }), children: listMonthNamesShort.map((monthName, index) => /* @__PURE__ */ jsx("div", { className: classes.focusSelection, role: "button", onClick: (event) => {
-    onChange == null ? void 0 : onChange(event, "month", index + 1);
+    onChange?.(event, "month", index + 1);
     onViewModeChange("calendar");
   }, onKeyDown: (event) => onKeyDownHandler(event, index), tabIndex: 0, ...others, children: /* @__PURE__ */ jsx(HvTypography, { className: cx(classes.calendarMonthlyCell, {
     [classes.calendarMonthlyCellSelected]: index + 1 === visibleMonth

package/dist/esm/components/Calendar/CalendarNavigation/MonthSelector/MonthSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"MonthSelector.js","sources":["../../../../../../src/components/Calendar/CalendarNavigation/MonthSelector/MonthSelector.tsx"],"sourcesContent":["import { isKey } from \"@core/utils/keyboardUtils\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { getMonthNamesList } from \"../../utils\";\nimport { ViewMode } from \"../../enums\";\nimport { DateRangeProp, VisibilitySelectorActions } from \"../../types\";\n\nimport { staticClasses, useClasses } from \"./MonthSelector.styles\";\n\nexport { staticClasses as monthSelectorClasses };\n\nexport type HvMonthSelectorClasses = ExtractNames<typeof useClasses>;\n\nexport const HvMonthSelector = ({\n  classes: classesProp,\n  id,\n  locale,\n  onChange,\n  onViewModeChange,\n  rangeMode,\n  visibleMonth,\n  ...others\n}: HvMonthSelectorProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const listMonthNamesShort = getMonthNamesList(locale, \"short\");\n  const onKeyDownHandler = (event, index) => {\n    if (isKey(event, \"Enter\")) {\n      onChange?.(event, \"month\", index + 1);\n      onViewModeChange(\"calendar\");\n    }\n  };\n  return (\n    <div\n      className={cx(classes.calendarMonthlyGrid, {\n        [classes.rangeModeWidth]: rangeMode,\n        [classes.normalWidth]: !rangeMode,\n      })}\n    >\n      {listMonthNamesShort.map((monthName, index) => (\n        <div\n          className={classes.focusSelection}\n          key={monthName}\n          role=\"button\"\n          onClick={(event) => {\n            onChange?.(event, \"month\", index + 1);\n            onViewModeChange(\"calendar\");\n          }}\n          onKeyDown={(event) => onKeyDownHandler(event, index)}\n          tabIndex={0}\n          {...others}\n        >\n          <HvTypography\n            className={cx(classes.calendarMonthlyCell, {\n              [classes.calendarMonthlyCellSelected]: index + 1 === visibleMonth,\n            })}\n          >\n            {monthName}\n          </HvTypography>\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport interface HvMonthSelectorProps {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvMonthSelectorClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\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: any,\n    action: VisibilitySelectorActions,\n    value: Date | DateRangeProp | number\n  ) => void;\n  /**\n   * Callback to define the input date.\n   */\n  onViewModeChange: (viewMode: ViewMode) => void;\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  rangeMode?: boolean;\n}\n"],"names":["HvMonthSelector","classes","classesProp","id","locale","onChange","onViewModeChange","rangeMode","visibleMonth","others","cx","useClasses","listMonthNamesShort","getMonthNamesList","onKeyDownHandler","event","index","isKey","calendarMonthlyGrid","rangeModeWidth","normalWidth","map","monthName","focusSelection","calendarMonthlyCell","calendarMonthlyCellSelected"],"mappings":";;;;;;AAcO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACiB,MAAM;AACpB,QAAA;AAAA,IAAER;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AAExCU,QAAAA,sBAAsBC,kBAAkBT,QAAQ,OAAO;AACvDU,QAAAA,mBAAmBA,CAACC,OAAOC,UAAU;AACrCC,QAAAA,MAAMF,OAAO,OAAO,GAAG;AACdA,2CAAAA,OAAO,SAASC,QAAQ;AACnCV,uBAAiB,UAAU;AAAA,IAC7B;AAAA,EAAA;AAEF,SACG,oBAAA,OAAA,EACC,WAAWI,GAAGT,QAAQiB,qBAAqB;AAAA,IACzC,CAACjB,QAAQkB,cAAc,GAAGZ;AAAAA,IAC1B,CAACN,QAAQmB,WAAW,GAAG,CAACb;AAAAA,EAAAA,CACzB,GAEAK,UAAoBS,oBAAAA,IAAI,CAACC,WAAWN,UAClC,oBAAA,OAAA,EACC,WAAWf,QAAQsB,gBAEnB,MAAK,UACL,SAAUR,CAAU,UAAA;AACPA,yCAAAA,OAAO,SAASC,QAAQ;AACnCV,qBAAiB,UAAU;AAAA,EAAA,GAE7B,WAAYS,CAAAA,UAAUD,iBAAiBC,OAAOC,KAAK,GACnD,UAAU,GACNP,GAAAA,QAEJ,UAAC,oBAAA,cAAA,EACC,WAAWC,GAAGT,QAAQuB,qBAAqB;AAAA,IACzC,CAACvB,QAAQwB,2BAA2B,GAAGT,QAAQ,MAAMR;AAAAA,EAAAA,CACtD,GAEAc,UAAAA,UACH,CAAA,EAhBKA,GAAAA,SAiBP,CACD,EACH,CAAA;AAEJ;"}
+{"version":3,"file":"MonthSelector.js","sources":["../../../../../../src/components/Calendar/CalendarNavigation/MonthSelector/MonthSelector.tsx"],"sourcesContent":["import { isKey } from \"@core/utils/keyboardUtils\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { getMonthNamesList } from \"../../utils\";\nimport { ViewMode } from \"../../enums\";\nimport { DateRangeProp, VisibilitySelectorActions } from \"../../types\";\n\nimport { staticClasses, useClasses } from \"./MonthSelector.styles\";\n\nexport { staticClasses as monthSelectorClasses };\n\nexport type HvMonthSelectorClasses = ExtractNames<typeof useClasses>;\n\nexport const HvMonthSelector = ({\n  classes: classesProp,\n  id,\n  locale,\n  onChange,\n  onViewModeChange,\n  rangeMode,\n  visibleMonth,\n  ...others\n}: HvMonthSelectorProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const listMonthNamesShort = getMonthNamesList(locale, \"short\");\n  const onKeyDownHandler = (event, index) => {\n    if (isKey(event, \"Enter\")) {\n      onChange?.(event, \"month\", index + 1);\n      onViewModeChange(\"calendar\");\n    }\n  };\n  return (\n    <div\n      className={cx(classes.calendarMonthlyGrid, {\n        [classes.rangeModeWidth]: rangeMode,\n        [classes.normalWidth]: !rangeMode,\n      })}\n    >\n      {listMonthNamesShort.map((monthName, index) => (\n        <div\n          className={classes.focusSelection}\n          key={monthName}\n          role=\"button\"\n          onClick={(event) => {\n            onChange?.(event, \"month\", index + 1);\n            onViewModeChange(\"calendar\");\n          }}\n          onKeyDown={(event) => onKeyDownHandler(event, index)}\n          tabIndex={0}\n          {...others}\n        >\n          <HvTypography\n            className={cx(classes.calendarMonthlyCell, {\n              [classes.calendarMonthlyCellSelected]: index + 1 === visibleMonth,\n            })}\n          >\n            {monthName}\n          </HvTypography>\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport interface HvMonthSelectorProps {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvMonthSelectorClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\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: any,\n    action: VisibilitySelectorActions,\n    value: Date | DateRangeProp | number\n  ) => void;\n  /**\n   * Callback to define the input date.\n   */\n  onViewModeChange: (viewMode: ViewMode) => void;\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  rangeMode?: boolean;\n}\n"],"names":["HvMonthSelector","classes","classesProp","id","locale","onChange","onViewModeChange","rangeMode","visibleMonth","others","cx","useClasses","listMonthNamesShort","getMonthNamesList","onKeyDownHandler","event","index","isKey","calendarMonthlyGrid","rangeModeWidth","normalWidth","map","monthName","focusSelection","calendarMonthlyCell","calendarMonthlyCellSelected"],"mappings":";;;;;;AAeO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACiB,MAAM;AACpB,QAAA;AAAA,IAAER;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AAExCU,QAAAA,sBAAsBC,kBAAkBT,QAAQ,OAAO;AACvDU,QAAAA,mBAAmBA,CAACC,OAAOC,UAAU;AACrCC,QAAAA,MAAMF,OAAO,OAAO,GAAG;AACdA,iBAAAA,OAAO,SAASC,QAAQ,CAAC;AACpCV,uBAAiB,UAAU;AAAA,IAC7B;AAAA,EAAA;AAEF,SACG,oBAAA,OAAA,EACC,WAAWI,GAAGT,QAAQiB,qBAAqB;AAAA,IACzC,CAACjB,QAAQkB,cAAc,GAAGZ;AAAAA,IAC1B,CAACN,QAAQmB,WAAW,GAAG,CAACb;AAAAA,EAAAA,CACzB,GAEAK,UAAoBS,oBAAAA,IAAI,CAACC,WAAWN,UAClC,oBAAA,OAAA,EACC,WAAWf,QAAQsB,gBAEnB,MAAK,UACL,SAAUR,CAAU,UAAA;AACPA,eAAAA,OAAO,SAASC,QAAQ,CAAC;AACpCV,qBAAiB,UAAU;AAAA,EAAA,GAE7B,WAAYS,CAAAA,UAAUD,iBAAiBC,OAAOC,KAAK,GACnD,UAAU,GACNP,GAAAA,QAEJ,UAAC,oBAAA,cAAA,EACC,WAAWC,GAAGT,QAAQuB,qBAAqB;AAAA,IACzC,CAACvB,QAAQwB,2BAA2B,GAAGT,QAAQ,MAAMR;AAAAA,EAAAA,CACtD,GAEAc,UAAAA,UACH,CAAA,EAhBKA,GAAAA,SAiBP,CACD,EACH,CAAA;AAEJ;"}

package/dist/esm/components/Calendar/CalendarNavigation/Navigation/Navigation.js

@@ -1,10 +1,9 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { DropLeftXS, DropRightXS } from "@hitachivantara/uikit-react-icons";
-import { isKey } from "../../../../utils/keyboardUtils.js";
 import { setId } from "../../../../utils/setId.js";
 import { useClasses } from "./Navigation.styles.js";
 import { staticClasses } from "./Navigation.styles.js";
-import { HvTypography } from "../../../Typography/Typography.js";
+import { HvButton } from "../../../Button/Button.js";
 const Navigation = ({
   id,
   classes: classesProp,
@@ -19,35 +18,16 @@ const Navigation = ({
     classes,
     cx
   } = useClasses(classesProp);
-  const onkeyDownHandler = (event, funcAction) => {
-    if (isKey(event, "Enter") || isKey(event, "Space")) {
-      event.preventDefault();
-      funcAction(event);
-    }
-  };
-  const onTextClickIsFunction = typeof onTextClick === "function";
   return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
-    /* @__PURE__ */ jsx(DropLeftXS, { id: setId(id, "left"), className: cx(classes.icon, {
+    /* @__PURE__ */ jsx(HvButton, { icon: true, disabled: !isPreviousEnabled, "aria-label": "Previous", id: setId(id, "left"), className: cx(classes.icon, {
       [classes.disabled]: !isPreviousEnabled
-    }), onClick: isPreviousEnabled ? (event) => onNavigatePrevious(event) : void 0, onKeyDown: (event) => isNextEnabled ? onkeyDownHandler(event, onNavigatePrevious) : void 0, tabIndex: 0 }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        id,
-        className: cx({
-          [classes.text]: onTextClickIsFunction,
-          [classes.textWithoutHover]: !onTextClickIsFunction
-        }),
-        role: "presentation",
-        onClick: onTextClick,
-        onKeyDown: onTextClick && ((event) => onkeyDownHandler(event, onTextClick)),
-        tabIndex: onTextClick ? 0 : -1,
-        children: /* @__PURE__ */ jsx(HvTypography, { variant: "body", children: navigationText })
-      }
-    ),
-    /* @__PURE__ */ jsx(DropRightXS, { id: setId(id, "right"), className: cx(classes.icon, {
+    }), onClick: onNavigatePrevious, children: /* @__PURE__ */ jsx(DropLeftXS, { role: "none" }) }),
+    /* @__PURE__ */ jsx(HvButton, { id, variant: "secondaryGhost", onClick: onTextClick, component: onTextClick ? "button" : "div", className: cx(classes.text, {
+      [classes.textWithoutHover]: !onTextClick
+    }), children: navigationText }),
+    /* @__PURE__ */ jsx(HvButton, { icon: true, disabled: !isNextEnabled, "aria-label": "Next", id: setId(id, "right"), className: cx(classes.icon, {
       [classes.disabled]: !isNextEnabled
-    }), onClick: isNextEnabled ? (event) => onNavigateNext(event) : void 0, onKeyDown: (event) => isNextEnabled ? onkeyDownHandler(event, onNavigateNext) : void 0, tabIndex: 0 })
+    }), onClick: onNavigateNext, children: /* @__PURE__ */ jsx(DropRightXS, { role: "none" }) })
   ] });
 };
 export {

package/dist/esm/components/Calendar/CalendarNavigation/Navigation/Navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.js","sources":["../../../../../../src/components/Calendar/CalendarNavigation/Navigation/Navigation.tsx"],"sourcesContent":["import {\n  DropLeftXS as DropLeftIcon,\n  DropRightXS as DropRightIcon,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Navigation.styles\";\n\nexport { staticClasses as navigationClasses };\n\nexport type HvNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport const Navigation = ({\n  id,\n  classes: classesProp,\n  onNavigatePrevious,\n  onNavigateNext,\n  onTextClick,\n  navigationText = \"n/a\",\n  isPreviousEnabled = true,\n  isNextEnabled = true,\n}: NavigationProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const onkeyDownHandler = (event, funcAction) => {\n    if (isKey(event, \"Enter\") || isKey(event, \"Space\")) {\n      event.preventDefault();\n      funcAction(event);\n    }\n  };\n\n  const onTextClickIsFunction = typeof onTextClick === \"function\";\n\n  return (\n    <div className={classes.root}>\n      <DropLeftIcon\n        id={setId(id, \"left\")}\n        className={cx(classes.icon, {\n          [classes.disabled]: !isPreviousEnabled,\n        })}\n        onClick={\n          isPreviousEnabled ? (event) => onNavigatePrevious(event) : undefined\n        }\n        onKeyDown={(event) =>\n          isNextEnabled\n            ? onkeyDownHandler(event, onNavigatePrevious)\n            : undefined\n        }\n        tabIndex={0}\n      />\n\n      <div\n        id={id}\n        className={cx({\n          [classes.text]: onTextClickIsFunction,\n          [classes.textWithoutHover]: !onTextClickIsFunction,\n        })}\n        role=\"presentation\"\n        onClick={onTextClick}\n        onKeyDown={\n          onTextClick && ((event) => onkeyDownHandler(event, onTextClick))\n        }\n        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n        tabIndex={onTextClick ? 0 : -1}\n      >\n        <HvTypography variant=\"body\">{navigationText}</HvTypography>\n      </div>\n\n      <DropRightIcon\n        id={setId(id, \"right\")}\n        className={cx(classes.icon, {\n          [classes.disabled]: !isNextEnabled,\n        })}\n        onClick={isNextEnabled ? (event) => onNavigateNext(event) : undefined}\n        onKeyDown={(event) =>\n          isNextEnabled ? onkeyDownHandler(event, onNavigateNext) : undefined\n        }\n        tabIndex={0}\n      />\n    </div>\n  );\n};\n\nexport interface NavigationProps extends HvBaseProps {\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvNavigationClasses;\n  /**\n   * A function to be executed whenever the navigate previous action is triggered.\n   */\n  onNavigatePrevious: (event: React.MouseEvent<HTMLDivElement>) => void;\n  /**\n   * A function to be executed whenever the navigate next action is triggered.\n   */\n  onNavigateNext: (event: React.MouseEvent<HTMLDivElement>) => void;\n  /**\n   * A function to be executed whenever the text is clicked.\n   */\n  onTextClick?: () => void;\n  /**\n   * The text that will be shown between the navigation buttons.\n   */\n  navigationText?: string;\n  /**\n   * Flag stating if the previous button should be enabled or disabled.\n   */\n  isPreviousEnabled?: boolean;\n  /**\n   * Flag stating if the next button should be enabled or disabled.\n   */\n  isNextEnabled?: boolean;\n}\n"],"names":["Navigation","id","classes","classesProp","onNavigatePrevious","onNavigateNext","onTextClick","navigationText","isPreviousEnabled","isNextEnabled","cx","useClasses","onkeyDownHandler","event","funcAction","isKey","preventDefault","onTextClickIsFunction","root","DropLeftIcon","setId","icon","disabled","undefined","text","textWithoutHover","DropRightIcon"],"mappings":";;;;;;;AAkBO,MAAMA,aAAaA,CAAC;AAAA,EACzBC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,iBAAiB;AAAA,EACjBC,oBAAoB;AAAA,EACpBC,gBAAgB;AACD,MAAM;AACf,QAAA;AAAA,IAAEP;AAAAA,IAASQ;AAAAA,EAAAA,IAAOC,WAAWR,WAAW;AAExCS,QAAAA,mBAAmBA,CAACC,OAAOC,eAAe;AAC9C,QAAIC,MAAMF,OAAO,OAAO,KAAKE,MAAMF,OAAO,OAAO,GAAG;AAClDA,YAAMG,eAAe;AACrBF,iBAAWD,KAAK;AAAA,IAClB;AAAA,EAAA;AAGII,QAAAA,wBAAwB,OAAOX,gBAAgB;AAErD,SACG,qBAAA,OAAA,EAAI,WAAWJ,QAAQgB,MACtB,UAAA;AAAA,IAAC,oBAAAC,YAAA,EACC,IAAIC,MAAMnB,IAAI,MAAM,GACpB,WAAWS,GAAGR,QAAQmB,MAAM;AAAA,MAC1B,CAACnB,QAAQoB,QAAQ,GAAG,CAACd;AAAAA,IAAAA,CACtB,GACD,SACEA,oBAAqBK,CAAUT,UAAAA,mBAAmBS,KAAK,IAAIU,QAE7D,WAAYV,CAAAA,UACVJ,gBACIG,iBAAiBC,OAAOT,kBAAkB,IAC1CmB,QAEN,UAAU,GAAE;AAAA,IAGd;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWb,GAAG;AAAA,UACZ,CAACR,QAAQsB,IAAI,GAAGP;AAAAA,UAChB,CAACf,QAAQuB,gBAAgB,GAAG,CAACR;AAAAA,QAAAA,CAC9B;AAAA,QACD,MAAK;AAAA,QACL,SAASX;AAAAA,QACT,WACEA,gBAAiBO,CAAUD,UAAAA,iBAAiBC,OAAOP,WAAW;AAAA,QAGhE,UAAUA,cAAc,IAAI;AAAA,QAE5B,UAAC,oBAAA,cAAA,EAAa,SAAQ,QAAQC,UAAe,gBAAA;AAAA,MAAA;AAAA,IAC/C;AAAA,IAEA,oBAACmB,aACC,EAAA,IAAIN,MAAMnB,IAAI,OAAO,GACrB,WAAWS,GAAGR,QAAQmB,MAAM;AAAA,MAC1B,CAACnB,QAAQoB,QAAQ,GAAG,CAACb;AAAAA,IAAAA,CACtB,GACD,SAASA,gBAAiBI,CAAUR,UAAAA,eAAeQ,KAAK,IAAIU,QAC5D,WAAYV,CAAAA,UACVJ,gBAAgBG,iBAAiBC,OAAOR,cAAc,IAAIkB,QAE5D,UAAU,GAAE;AAAA,EAEhB,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Navigation.js","sources":["../../../../../../src/components/Calendar/CalendarNavigation/Navigation/Navigation.tsx"],"sourcesContent":["import {\n  DropLeftXS as DropLeftIcon,\n  DropRightXS as DropRightIcon,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Navigation.styles\";\n\nexport { staticClasses as navigationClasses };\n\nexport type HvNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport const Navigation = ({\n  id,\n  classes: classesProp,\n  onNavigatePrevious,\n  onNavigateNext,\n  onTextClick,\n  navigationText = \"n/a\",\n  isPreviousEnabled = true,\n  isNextEnabled = true,\n}: NavigationProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div className={classes.root}>\n      <HvButton\n        icon\n        disabled={!isPreviousEnabled}\n        aria-label=\"Previous\"\n        id={setId(id, \"left\")}\n        className={cx(classes.icon, {\n          [classes.disabled]: !isPreviousEnabled,\n        })}\n        onClick={onNavigatePrevious}\n      >\n        <DropLeftIcon role=\"none\" />\n      </HvButton>\n\n      <HvButton\n        id={id}\n        variant=\"secondaryGhost\"\n        onClick={onTextClick}\n        component={onTextClick ? \"button\" : \"div\"}\n        className={cx(classes.text, {\n          [classes.textWithoutHover]: !onTextClick,\n        })}\n      >\n        {navigationText}\n      </HvButton>\n\n      <HvButton\n        icon\n        disabled={!isNextEnabled}\n        aria-label=\"Next\"\n        id={setId(id, \"right\")}\n        className={cx(classes.icon, {\n          [classes.disabled]: !isNextEnabled,\n        })}\n        onClick={onNavigateNext}\n      >\n        <DropRightIcon role=\"none\" />\n      </HvButton>\n    </div>\n  );\n};\n\nexport interface NavigationProps extends HvBaseProps {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvNavigationClasses;\n  /**\n   * A function to be executed whenever the navigate previous action is triggered.\n   */\n  onNavigatePrevious: (event: React.MouseEvent<HTMLElement>) => void;\n  /**\n   * A function to be executed whenever the navigate next action is triggered.\n   */\n  onNavigateNext: (event: React.MouseEvent<HTMLElement>) => void;\n  /**\n   * A function to be executed whenever the text is clicked.\n   */\n  onTextClick?: () => void;\n  /**\n   * The text that will be shown between the navigation buttons.\n   */\n  navigationText?: string;\n  /**\n   * Flag stating if the previous button should be enabled or disabled.\n   */\n  isPreviousEnabled?: boolean;\n  /**\n   * Flag stating if the next button should be enabled or disabled.\n   */\n  isNextEnabled?: boolean;\n}\n"],"names":["Navigation","id","classes","classesProp","onNavigatePrevious","onNavigateNext","onTextClick","navigationText","isPreviousEnabled","isNextEnabled","cx","useClasses","root","setId","icon","disabled","DropLeftIcon","text","textWithoutHover","DropRightIcon"],"mappings":";;;;;;AAiBO,MAAMA,aAAaA,CAAC;AAAA,EACzBC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,iBAAiB;AAAA,EACjBC,oBAAoB;AAAA,EACpBC,gBAAgB;AACD,MAAM;AACf,QAAA;AAAA,IAAEP;AAAAA,IAASQ;AAAAA,EAAAA,IAAOC,WAAWR,WAAW;AAE9C,SACG,qBAAA,OAAA,EAAI,WAAWD,QAAQU,MACtB,UAAA;AAAA,IAAA,oBAAC,YACC,MAAI,MACJ,UAAU,CAACJ,mBACX,cAAW,YACX,IAAIK,MAAMZ,IAAI,MAAM,GACpB,WAAWS,GAAGR,QAAQY,MAAM;AAAA,MAC1B,CAACZ,QAAQa,QAAQ,GAAG,CAACP;AAAAA,IAAAA,CACtB,GACD,SAASJ,oBAET,8BAACY,YAAa,EAAA,MAAK,OAAM,CAAA,GAC3B;AAAA,IAEC,oBAAA,UAAA,EACC,IACA,SAAQ,kBACR,SAASV,aACT,WAAWA,cAAc,WAAW,OACpC,WAAWI,GAAGR,QAAQe,MAAM;AAAA,MAC1B,CAACf,QAAQgB,gBAAgB,GAAG,CAACZ;AAAAA,IAAAA,CAC9B,GAEAC,UACH,gBAAA;AAAA,wBAEC,UACC,EAAA,MAAI,MACJ,UAAU,CAACE,eACX,cAAW,QACX,IAAII,MAAMZ,IAAI,OAAO,GACrB,WAAWS,GAAGR,QAAQY,MAAM;AAAA,MAC1B,CAACZ,QAAQa,QAAQ,GAAG,CAACN;AAAAA,IAAAA,CACtB,GACD,SAASJ,gBAET,8BAACc,aAAc,EAAA,MAAK,OAAM,CAAA,GAC5B;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/Calendar/CalendarNavigation/Navigation/Navigation.styles.js

@@ -1,5 +1,4 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { outlineStyles } from "../../../../utils/focusUtils.js";
 import { createClasses } from "../../../../utils/classes.js";
 const {
   staticClasses,
@@ -8,49 +7,20 @@ const {
   root: {
     display: "flex",
     alignItems: "center",
-    justifyContent: "space-between"
-  },
-  icon: {
-    userSelect: "none",
-    width: "32px",
-    height: "32px",
-    "&:hover": {
-      backgroundColor: theme.colors.atmo3,
-      cursor: "pointer"
-    },
-    "&:focus": {
-      outline: "none"
-    },
-    "&:focus-visible": {
-      backgroundColor: theme.colors.atmo3,
-      cursor: "pointer",
-      ...outlineStyles
-    }
+    justifyContent: "space-between",
+    gap: theme.space.xs
   },
+  icon: {},
   disabled: {},
   text: {
-    width: "calc(100% - 64px)",
-    textAlign: "center",
-    height: "32px",
-    padding: "8px 0",
-    "&:hover": {
-      backgroundColor: theme.colors.atmo3,
-      cursor: "pointer"
-    },
-    "&:focus": {
-      outline: "none"
-    },
-    "&:focus-visible": {
-      backgroundColor: theme.colors.atmo3,
-      cursor: "pointer",
-      ...outlineStyles
-    }
+    minWidth: "unset",
+    flex: 1,
+    color: theme.colors.secondary,
+    fontWeight: theme.typography.body.fontWeight,
+    padding: 0
   },
   textWithoutHover: {
-    width: "calc(100% - 64px)",
-    textAlign: "center",
-    padding: "0 5px",
-    outline: "none"
+    pointerEvents: "none"
   }
 });
 export {

package/dist/esm/components/Calendar/CalendarNavigation/Navigation/Navigation.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.styles.js","sources":["../../../../../../src/components/Calendar/CalendarNavigation/Navigation/Navigation.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvNavigation\", {\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n  },\n  icon: {\n    userSelect: \"none\",\n    width: \"32px\",\n    height: \"32px\",\n    \"&:hover\": {\n      backgroundColor: theme.colors.atmo3,\n      cursor: \"pointer\",\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      backgroundColor: theme.colors.atmo3,\n      cursor: \"pointer\",\n      ...outlineStyles,\n    },\n  },\n  disabled: {},\n  text: {\n    width: \"calc(100% - 64px)\",\n    textAlign: \"center\",\n    height: \"32px\",\n    padding: \"8px 0\",\n    \"&:hover\": {\n      backgroundColor: theme.colors.atmo3,\n      cursor: \"pointer\",\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      backgroundColor: theme.colors.atmo3,\n      cursor: \"pointer\",\n      ...outlineStyles,\n    },\n  },\n  textWithoutHover: {\n    width: \"calc(100% - 64px)\",\n    textAlign: \"center\",\n    padding: \"0 5px\",\n    outline: \"none\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","alignItems","justifyContent","icon","userSelect","width","height","backgroundColor","theme","colors","atmo3","cursor","outline","outlineStyles","disabled","text","textAlign","padding","textWithoutHover"],"mappings":";;;AAMa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,gBAAgB;AAAA,EACzEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,gBAAgB;AAAA,EAClB;AAAA,EACAC,MAAM;AAAA,IACJC,YAAY;AAAA,IACZC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACR,WAAW;AAAA,MACTC,iBAAiBC,MAAMC,OAAOC;AAAAA,MAC9BC,QAAQ;AAAA,IACV;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjBL,iBAAiBC,MAAMC,OAAOC;AAAAA,MAC9BC,QAAQ;AAAA,MACR,GAAGE;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,UAAU,CAAC;AAAA,EACXC,MAAM;AAAA,IACJV,OAAO;AAAA,IACPW,WAAW;AAAA,IACXV,QAAQ;AAAA,IACRW,SAAS;AAAA,IACT,WAAW;AAAA,MACTV,iBAAiBC,MAAMC,OAAOC;AAAAA,MAC9BC,QAAQ;AAAA,IACV;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjBL,iBAAiBC,MAAMC,OAAOC;AAAAA,MAC9BC,QAAQ;AAAA,MACR,GAAGE;AAAAA,IACL;AAAA,EACF;AAAA,EACAK,kBAAkB;AAAA,IAChBb,OAAO;AAAA,IACPW,WAAW;AAAA,IACXC,SAAS;AAAA,IACTL,SAAS;AAAA,EACX;AACF,CAAC;"}
+{"version":3,"file":"Navigation.styles.js","sources":["../../../../../../src/components/Calendar/CalendarNavigation/Navigation/Navigation.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvNavigation\", {\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    gap: theme.space.xs,\n  },\n  icon: {},\n  disabled: {},\n  text: {\n    minWidth: \"unset\",\n    flex: 1,\n    color: theme.colors.secondary,\n    fontWeight: theme.typography.body.fontWeight,\n    padding: 0,\n  },\n  textWithoutHover: {\n    pointerEvents: \"none\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","alignItems","justifyContent","gap","theme","space","xs","icon","disabled","text","minWidth","flex","color","colors","secondary","fontWeight","typography","body","padding","textWithoutHover","pointerEvents"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,gBAAgB;AAAA,EACzEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,gBAAgB;AAAA,IAChBC,KAAKC,MAAMC,MAAMC;AAAAA,EACnB;AAAA,EACAC,MAAM,CAAC;AAAA,EACPC,UAAU,CAAC;AAAA,EACXC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,MAAM;AAAA,IACNC,OAAOR,MAAMS,OAAOC;AAAAA,IACpBC,YAAYX,MAAMY,WAAWC,KAAKF;AAAAA,IAClCG,SAAS;AAAA,EACX;AAAA,EACAC,kBAAkB;AAAA,IAChBC,eAAe;AAAA,EACjB;AACF,CAAC;"}

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

@@ -40,16 +40,13 @@ const HvCalendarCell = (props) => {
   const isSelecting = isDateSelectionMode && isCellAfterStartingDate;
   const handleClick = (event) => {
     if (value) {
-      onChange == null ? void 0 : onChange(event, value);
+      onChange?.(event, value);
       if (buttonEl.current)
-        setTimeout(() => {
-          var _a;
-          return (_a = buttonEl == null ? void 0 : buttonEl.current) == null ? void 0 : _a.focus();
-        });
+        setTimeout(() => buttonEl?.current?.focus());
     }
   };
   const handleKeyDown = (event) => {
-    onKeyDown == null ? void 0 : onKeyDown(event);
+    onKeyDown?.(event);
   };
   const renderDate = () => /* @__PURE__ */ jsx("button", { ref: buttonEl, type: "button", className: cx(classes.cellContainer, {
     [classes.focusSelection]: inMonth

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

@@ -1 +1 @@
-{"version":3,"file":"CalendarCell.js","sources":["../../../../../src/components/Calendar/SingleCalendar/CalendarCell.tsx"],"sourcesContent":["import { SyntheticEvent, useRef } from \"react\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks\";\nimport {\n  isSameDay,\n  isSameMonth,\n  dateInProvidedValueRange,\n  checkIfDateIsDisabled,\n  isDateRangeProp,\n} from \"../utils\";\nimport { DateRangeProp } from \"../types\";\nimport CalendarModel from \"../model\";\n\nimport { staticClasses, useClasses } from \"./CalendarCell.styles\";\n\nexport { staticClasses as calendarCellClasses };\n\nexport type HvCalendarCellClasses = ExtractNames<typeof useClasses>;\n\nexport const HvCalendarCell = (props: HvCalendarCellProps) => {\n  const {\n    classes: classesProp,\n    onChange,\n    onKeyDown,\n    calendarValue,\n    firstDayOfCurrentMonth,\n    value,\n    isDateSelectionMode,\n    today,\n    locale,\n    minimumDate,\n    maximumDate,\n    rangeMode = false,\n    ...others\n  } = useDefaultProps(\"HvCalendarCell\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const buttonEl = useRef<HTMLButtonElement>(null);\n\n  const startDate = isDateRangeProp(calendarValue)\n    ? calendarValue.startDate\n    : undefined;\n  const endDate = isDateRangeProp(calendarValue)\n    ? calendarValue.endDate\n    : undefined;\n  const isCellToday = isSameDay(value, today);\n  const isCellSelected = isSameDay(calendarValue, value);\n  const inMonth = isSameMonth(value, firstDayOfCurrentMonth);\n  const isCellAfterStartingDate =\n    rangeMode && value && startDate ? value >= startDate : false;\n  const isCellStartingDate = rangeMode ? isSameDay(value, startDate) : false;\n  const isDateInSelectionRange =\n    calendarValue && rangeMode\n      ? dateInProvidedValueRange(value, calendarValue)\n      : false;\n  const isDateDisabled = checkIfDateIsDisabled(value, minimumDate, maximumDate);\n  const startBookend = isSameDay(startDate, value);\n  const endBookend = isSameDay(endDate, value);\n  const isSelecting = isDateSelectionMode && isCellAfterStartingDate;\n\n  const handleClick = (event: SyntheticEvent) => {\n    if (value) {\n      onChange?.(event, value);\n      if (buttonEl.current) setTimeout(() => buttonEl?.current?.focus());\n    }\n  };\n\n  const handleKeyDown = (event) => {\n    onKeyDown?.(event);\n  };\n\n  const renderDate = () => (\n    <button\n      ref={buttonEl}\n      type=\"button\"\n      className={cx(classes.cellContainer, {\n        [classes.focusSelection]: inMonth,\n      })}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      disabled={isDateDisabled || !inMonth}\n      data-in-month={inMonth}\n      {...others}\n    >\n      <HvTypography\n        variant={isCellToday ? \"label\" : \"body\"}\n        className={cx(classes.calendarDate, {\n          [classes.calendarDateSelected]: inMonth && isCellSelected,\n          [classes.calendarDateNotInMonth]: !inMonth,\n          [classes.calendarDateInSelectionRange]:\n            inMonth && rangeMode && isDateInSelectionRange,\n          [classes.calendarDateDisabled]: isDateDisabled,\n          [classes.startBookend]:\n            inMonth &&\n            ((startBookend && rangeMode) ||\n              (isCellStartingDate && isDateSelectionMode)),\n          [classes.endBookend]: inMonth && endBookend && rangeMode,\n        })}\n      >\n        {value && value.getDate()}\n      </HvTypography>\n    </button>\n  );\n\n  return (\n    <div\n      className={cx(classes.dateWrapper, {\n        [classes.cellsInRange]: inMonth && rangeMode && isSelecting,\n        [classes.cellsOutsideRange]: rangeMode && !isSelecting,\n      })}\n      data-calendar-cell=\"calendarCell\"\n    >\n      {renderDate()}\n    </div>\n  );\n};\n\nexport interface HvCalendarCellProps {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvCalendarCellClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * The text to be shown on the main part of the header.\n   */\n  calendarValue?: string | Date | DateRangeProp;\n  /**\n   * The text to be shown on the main part of the header.\n   */\n  value?: Date;\n  /**\n   * Locale to be used by the calendar.\n   */\n  locale?: string;\n  /**\n   * Callback to define the input date.\n   */\n  onChange?: (event: SyntheticEvent, value: Date | DateRangeProp) => void;\n  /**\n   * Callback to handle input onFocus.\n   */\n  onFocus?: React.FocusEventHandler<any>;\n\n  calendarModel?: CalendarModel;\n  onKeyDown?: (event: KeyboardEvent) => void;\n\n  today?: Date;\n  minimumDate?: Date;\n  maximumDate?: Date;\n  firstDayOfCurrentMonth?: Date;\n  isDateSelectionMode?: boolean;\n  rangeMode?: boolean;\n  tabIndex?: number;\n}\n\nexport default HvCalendarCell;\n"],"names":["HvCalendarCell","props","classes","classesProp","onChange","onKeyDown","calendarValue","firstDayOfCurrentMonth","value","isDateSelectionMode","today","locale","minimumDate","maximumDate","rangeMode","others","useDefaultProps","cx","useClasses","buttonEl","useRef","startDate","isDateRangeProp","undefined","endDate","isCellToday","isSameDay","isCellSelected","inMonth","isSameMonth","isCellAfterStartingDate","isCellStartingDate","isDateInSelectionRange","dateInProvidedValueRange","isDateDisabled","checkIfDateIsDisabled","startBookend","endBookend","isSelecting","handleClick","event","current","setTimeout","focus","handleKeyDown","renderDate","cellContainer","focusSelection","calendarDate","calendarDateSelected","calendarDateNotInMonth","calendarDateInSelectionRange","calendarDateDisabled","getDate","dateWrapper","cellsInRange","cellsOutsideRange"],"mappings":";;;;;;;AAqBaA,MAAAA,iBAAiBA,CAACC,UAA+B;AACtD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,YAAY;AAAA,IACZ,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,kBAAkBf,KAAK;AAErC,QAAA;AAAA,IAAEC;AAAAA,IAASe;AAAAA,EAAAA,IAAOC,WAAWf,WAAW;AAExCgB,QAAAA,WAAWC,OAA0B,IAAI;AAE/C,QAAMC,YAAYC,gBAAgBhB,aAAa,IAC3CA,cAAce,YACdE;AACJ,QAAMC,UAAUF,gBAAgBhB,aAAa,IACzCA,cAAckB,UACdD;AACEE,QAAAA,cAAcC,UAAUlB,OAAOE,KAAK;AACpCiB,QAAAA,iBAAiBD,UAAUpB,eAAeE,KAAK;AAC/CoB,QAAAA,UAAUC,YAAYrB,OAAOD,sBAAsB;AACzD,QAAMuB,0BACJhB,aAAaN,SAASa,YAAYb,SAASa,YAAY;AACzD,QAAMU,qBAAqBjB,YAAYY,UAAUlB,OAAOa,SAAS,IAAI;AACrE,QAAMW,yBACJ1B,iBAAiBQ,YACbmB,yBAAyBzB,OAAOF,aAAa,IAC7C;AACN,QAAM4B,iBAAiBC,sBAAsB3B,OAAOI,aAAaC,WAAW;AACtEuB,QAAAA,eAAeV,UAAUL,WAAWb,KAAK;AACzC6B,QAAAA,aAAaX,UAAUF,SAAShB,KAAK;AAC3C,QAAM8B,cAAc7B,uBAAuBqB;AAErCS,QAAAA,cAAcA,CAACC,UAA0B;AAC7C,QAAIhC,OAAO;AACTJ,2CAAWoC,OAAOhC;AAClB,UAAIW,SAASsB;AAASC,mBAAW,MAAA;;AAAMvB,4DAAUsB,YAAVtB,mBAAmBwB;AAAAA,SAAO;AAAA,IACnE;AAAA,EAAA;AAGF,QAAMC,gBAAiBJ,CAAU,UAAA;AAC/BnC,2CAAYmC;AAAAA,EAAK;AAGbK,QAAAA,aAAaA,MACjB,oBAAC,UACC,EAAA,KAAK1B,UACL,MAAK,UACL,WAAWF,GAAGf,QAAQ4C,eAAe;AAAA,IACnC,CAAC5C,QAAQ6C,cAAc,GAAGnB;AAAAA,EAC3B,CAAA,GACD,SAASW,aACT,WAAWK,eACX,UAAUV,kBAAkB,CAACN,SAC7B,iBAAeA,SACf,GAAIb,QAEJ,UAAC,oBAAA,cAAA,EACC,SAASU,cAAc,UAAU,QACjC,WAAWR,GAAGf,QAAQ8C,cAAc;AAAA,IAClC,CAAC9C,QAAQ+C,oBAAoB,GAAGrB,WAAWD;AAAAA,IAC3C,CAACzB,QAAQgD,sBAAsB,GAAG,CAACtB;AAAAA,IACnC,CAAC1B,QAAQiD,4BAA4B,GACnCvB,WAAWd,aAAakB;AAAAA,IAC1B,CAAC9B,QAAQkD,oBAAoB,GAAGlB;AAAAA,IAChC,CAAChC,QAAQkC,YAAY,GACnBR,YACEQ,gBAAgBtB,aACfiB,sBAAsBtB;AAAAA,IAC3B,CAACP,QAAQmC,UAAU,GAAGT,WAAWS,cAAcvB;AAAAA,EAAAA,CAChD,GAEAN,UAAAA,SAASA,MAAM6C,WAClB,EACF,CAAA;AAGF,SACG,oBAAA,OAAA,EACC,WAAWpC,GAAGf,QAAQoD,aAAa;AAAA,IACjC,CAACpD,QAAQqD,YAAY,GAAG3B,WAAWd,aAAawB;AAAAA,IAChD,CAACpC,QAAQsD,iBAAiB,GAAG1C,aAAa,CAACwB;AAAAA,EAAAA,CAC5C,GACD,sBAAmB,gBAElBO,uBACH,CAAA;AAEJ;"}
+{"version":3,"file":"CalendarCell.js","sources":["../../../../../src/components/Calendar/SingleCalendar/CalendarCell.tsx"],"sourcesContent":["import { SyntheticEvent, useRef } from \"react\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks\";\n\nimport {\n  isSameDay,\n  isSameMonth,\n  dateInProvidedValueRange,\n  checkIfDateIsDisabled,\n  isDateRangeProp,\n} from \"../utils\";\nimport { DateRangeProp } from \"../types\";\nimport CalendarModel from \"../model\";\n\nimport { staticClasses, useClasses } from \"./CalendarCell.styles\";\n\nexport { staticClasses as calendarCellClasses };\n\nexport type HvCalendarCellClasses = ExtractNames<typeof useClasses>;\n\nexport const HvCalendarCell = (props: HvCalendarCellProps) => {\n  const {\n    classes: classesProp,\n    onChange,\n    onKeyDown,\n    calendarValue,\n    firstDayOfCurrentMonth,\n    value,\n    isDateSelectionMode,\n    today,\n    locale,\n    minimumDate,\n    maximumDate,\n    rangeMode = false,\n    ...others\n  } = useDefaultProps(\"HvCalendarCell\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const buttonEl = useRef<HTMLButtonElement>(null);\n\n  const startDate = isDateRangeProp(calendarValue)\n    ? calendarValue.startDate\n    : undefined;\n  const endDate = isDateRangeProp(calendarValue)\n    ? calendarValue.endDate\n    : undefined;\n  const isCellToday = isSameDay(value, today);\n  const isCellSelected = isSameDay(calendarValue, value);\n  const inMonth = isSameMonth(value, firstDayOfCurrentMonth);\n  const isCellAfterStartingDate =\n    rangeMode && value && startDate ? value >= startDate : false;\n  const isCellStartingDate = rangeMode ? isSameDay(value, startDate) : false;\n  const isDateInSelectionRange =\n    calendarValue && rangeMode\n      ? dateInProvidedValueRange(value, calendarValue)\n      : false;\n  const isDateDisabled = checkIfDateIsDisabled(value, minimumDate, maximumDate);\n  const startBookend = isSameDay(startDate, value);\n  const endBookend = isSameDay(endDate, value);\n  const isSelecting = isDateSelectionMode && isCellAfterStartingDate;\n\n  const handleClick = (event: SyntheticEvent) => {\n    if (value) {\n      onChange?.(event, value);\n      if (buttonEl.current) setTimeout(() => buttonEl?.current?.focus());\n    }\n  };\n\n  const handleKeyDown = (event) => {\n    onKeyDown?.(event);\n  };\n\n  const renderDate = () => (\n    <button\n      ref={buttonEl}\n      type=\"button\"\n      className={cx(classes.cellContainer, {\n        [classes.focusSelection]: inMonth,\n      })}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      disabled={isDateDisabled || !inMonth}\n      data-in-month={inMonth}\n      {...others}\n    >\n      <HvTypography\n        variant={isCellToday ? \"label\" : \"body\"}\n        className={cx(classes.calendarDate, {\n          [classes.calendarDateSelected]: inMonth && isCellSelected,\n          [classes.calendarDateNotInMonth]: !inMonth,\n          [classes.calendarDateInSelectionRange]:\n            inMonth && rangeMode && isDateInSelectionRange,\n          [classes.calendarDateDisabled]: isDateDisabled,\n          [classes.startBookend]:\n            inMonth &&\n            ((startBookend && rangeMode) ||\n              (isCellStartingDate && isDateSelectionMode)),\n          [classes.endBookend]: inMonth && endBookend && rangeMode,\n        })}\n      >\n        {value && value.getDate()}\n      </HvTypography>\n    </button>\n  );\n\n  return (\n    <div\n      className={cx(classes.dateWrapper, {\n        [classes.cellsInRange]: inMonth && rangeMode && isSelecting,\n        [classes.cellsOutsideRange]: rangeMode && !isSelecting,\n      })}\n      data-calendar-cell=\"calendarCell\"\n    >\n      {renderDate()}\n    </div>\n  );\n};\n\nexport interface HvCalendarCellProps {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvCalendarCellClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * The text to be shown on the main part of the header.\n   */\n  calendarValue?: string | Date | DateRangeProp;\n  /**\n   * The text to be shown on the main part of the header.\n   */\n  value?: Date;\n  /**\n   * Locale to be used by the calendar.\n   */\n  locale?: string;\n  /**\n   * Callback to define the input date.\n   */\n  onChange?: (event: SyntheticEvent, value: Date | DateRangeProp) => void;\n  /**\n   * Callback to handle input onFocus.\n   */\n  onFocus?: React.FocusEventHandler<any>;\n\n  calendarModel?: CalendarModel;\n  onKeyDown?: (event: KeyboardEvent) => void;\n\n  today?: Date;\n  minimumDate?: Date;\n  maximumDate?: Date;\n  firstDayOfCurrentMonth?: Date;\n  isDateSelectionMode?: boolean;\n  rangeMode?: boolean;\n  tabIndex?: number;\n}\n\nexport default HvCalendarCell;\n"],"names":["HvCalendarCell","props","classes","classesProp","onChange","onKeyDown","calendarValue","firstDayOfCurrentMonth","value","isDateSelectionMode","today","locale","minimumDate","maximumDate","rangeMode","others","useDefaultProps","cx","useClasses","buttonEl","useRef","startDate","isDateRangeProp","undefined","endDate","isCellToday","isSameDay","isCellSelected","inMonth","isSameMonth","isCellAfterStartingDate","isCellStartingDate","isDateInSelectionRange","dateInProvidedValueRange","isDateDisabled","checkIfDateIsDisabled","startBookend","endBookend","isSelecting","handleClick","event","current","setTimeout","focus","handleKeyDown","renderDate","cellContainer","focusSelection","calendarDate","calendarDateSelected","calendarDateNotInMonth","calendarDateInSelectionRange","calendarDateDisabled","getDate","dateWrapper","cellsInRange","cellsOutsideRange"],"mappings":";;;;;;;AAsBaA,MAAAA,iBAAiBA,CAACC,UAA+B;AACtD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,YAAY;AAAA,IACZ,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,kBAAkBf,KAAK;AAErC,QAAA;AAAA,IAAEC;AAAAA,IAASe;AAAAA,EAAAA,IAAOC,WAAWf,WAAW;AAExCgB,QAAAA,WAAWC,OAA0B,IAAI;AAE/C,QAAMC,YAAYC,gBAAgBhB,aAAa,IAC3CA,cAAce,YACdE;AACJ,QAAMC,UAAUF,gBAAgBhB,aAAa,IACzCA,cAAckB,UACdD;AACEE,QAAAA,cAAcC,UAAUlB,OAAOE,KAAK;AACpCiB,QAAAA,iBAAiBD,UAAUpB,eAAeE,KAAK;AAC/CoB,QAAAA,UAAUC,YAAYrB,OAAOD,sBAAsB;AACzD,QAAMuB,0BACJhB,aAAaN,SAASa,YAAYb,SAASa,YAAY;AACzD,QAAMU,qBAAqBjB,YAAYY,UAAUlB,OAAOa,SAAS,IAAI;AACrE,QAAMW,yBACJ1B,iBAAiBQ,YACbmB,yBAAyBzB,OAAOF,aAAa,IAC7C;AACN,QAAM4B,iBAAiBC,sBAAsB3B,OAAOI,aAAaC,WAAW;AACtEuB,QAAAA,eAAeV,UAAUL,WAAWb,KAAK;AACzC6B,QAAAA,aAAaX,UAAUF,SAAShB,KAAK;AAC3C,QAAM8B,cAAc7B,uBAAuBqB;AAErCS,QAAAA,cAAcA,CAACC,UAA0B;AAC7C,QAAIhC,OAAO;AACTJ,iBAAWoC,OAAOhC,KAAK;AACvB,UAAIW,SAASsB;AAASC,mBAAW,MAAMvB,UAAUsB,SAASE,MAAO,CAAA;AAAA,IACnE;AAAA,EAAA;AAGF,QAAMC,gBAAiBJ,CAAU,UAAA;AAC/BnC,gBAAYmC,KAAK;AAAA,EAAA;AAGbK,QAAAA,aAAaA,MACjB,oBAAC,UACC,EAAA,KAAK1B,UACL,MAAK,UACL,WAAWF,GAAGf,QAAQ4C,eAAe;AAAA,IACnC,CAAC5C,QAAQ6C,cAAc,GAAGnB;AAAAA,EAC3B,CAAA,GACD,SAASW,aACT,WAAWK,eACX,UAAUV,kBAAkB,CAACN,SAC7B,iBAAeA,SACf,GAAIb,QAEJ,UAAC,oBAAA,cAAA,EACC,SAASU,cAAc,UAAU,QACjC,WAAWR,GAAGf,QAAQ8C,cAAc;AAAA,IAClC,CAAC9C,QAAQ+C,oBAAoB,GAAGrB,WAAWD;AAAAA,IAC3C,CAACzB,QAAQgD,sBAAsB,GAAG,CAACtB;AAAAA,IACnC,CAAC1B,QAAQiD,4BAA4B,GACnCvB,WAAWd,aAAakB;AAAAA,IAC1B,CAAC9B,QAAQkD,oBAAoB,GAAGlB;AAAAA,IAChC,CAAChC,QAAQkC,YAAY,GACnBR,YACEQ,gBAAgBtB,aACfiB,sBAAsBtB;AAAAA,IAC3B,CAACP,QAAQmC,UAAU,GAAGT,WAAWS,cAAcvB;AAAAA,EAAAA,CAChD,GAEAN,UAAAA,SAASA,MAAM6C,WAClB,EACF,CAAA;AAGF,SACG,oBAAA,OAAA,EACC,WAAWpC,GAAGf,QAAQoD,aAAa;AAAA,IACjC,CAACpD,QAAQqD,YAAY,GAAG3B,WAAWd,aAAawB;AAAAA,IAChD,CAACpC,QAAQsD,iBAAiB,GAAG1C,aAAa,CAACwB;AAAAA,EAAAA,CAC5C,GACD,sBAAmB,gBAElBO,uBACH,CAAA;AAEJ;"}

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

@@ -1,6 +1,5 @@
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useState, useMemo } from "react";
-import isNil from "lodash/isNil";
 import { isKey } from "../../../utils/keyboardUtils.js";
 import { setId } from "../../../utils/setId.js";
 import { isDate, getWeekdayNamesList, isRange } from "../utils.js";
@@ -10,8 +9,8 @@ import { HvCalendarHeader } from "../CalendarHeader/CalendarHeader.js";
 import { useClasses } from "./SingleCalendar.styles.js";
 import { staticClasses } from "./SingleCalendar.styles.js";
 import { HvComposedNavigation } from "../CalendarNavigation/ComposedNavigation/ComposedNavigation.js";
-import { HvCalendarWeekLabel } from "../CalendarWeekLabels/CalendarWeekLabels.js";
 import { HvMonthSelector } from "../CalendarNavigation/MonthSelector/MonthSelector.js";
+import { HvTypography } from "../../Typography/Typography.js";
 const HvSingleCalendar = ({
   classes: classesProp,
   className,
@@ -31,27 +30,26 @@ const HvSingleCalendar = ({
   children,
   ...others
 }) => {
-  var _a, _b;
   const {
     classes,
     cx
   } = useClasses(classesProp);
   const today = /* @__PURE__ */ new Date();
-  const localValue = isNil(value) ? today : value;
+  const localValue = value ?? today;
   const [calViewMode, setCalViewMode] = useState("calendar");
   const rangeMode = isRange(localValue);
   const isDateSelectionMode = rangeMode && !isDate(localValue.endDate);
   const calModel = rangeMode ? generateCalendarModel(localValue.startDate, visibleMonth, visibleYear) : generateCalendarModel(localValue, visibleMonth, visibleYear);
   const firstDayOfCurrentMonth = new Date(calModel.year, calModel.month - 1, 1);
   const firstDayOfCurrentMonthTime = firstDayOfCurrentMonth.getTime();
-  const listWeekdayNames = useMemo(() => getWeekdayNamesList(locale, "narrow"), [locale]);
+  const listWeekdayNames = useMemo(() => getWeekdayNamesList(locale), [locale]);
   const handleChange = (event, date) => {
-    event == null ? void 0 : event.preventDefault();
-    onChange == null ? void 0 : onChange(event, date);
+    event?.preventDefault();
+    onChange?.(event, date);
   };
   const handleInputChange = (event, date) => {
-    event == null ? void 0 : event.preventDefault();
-    onInputChange == null ? void 0 : onInputChange(event, date);
+    event?.preventDefault();
+    onInputChange?.(event, date);
   };
   const getNavChild = (event, siblings, i) => {
     if (isKey(event, "ArrowLeft"))
@@ -65,9 +63,8 @@ const HvSingleCalendar = ({
     return void 0;
   };
   const handleKeyDown = (event) => {
-    var _a2;
-    const el = document == null ? void 0 : document.activeElement;
-    const parent = (_a2 = el == null ? void 0 : el.parentElement) == null ? void 0 : _a2.parentElement;
+    const el = document?.activeElement;
+    const parent = el?.parentElement?.parentElement;
     const siblings = parent != null ? Array.from(parent.getElementsByClassName(classes.cellContainer)) : [];
     const elIndex = el ? siblings.indexOf(el) : 0;
     if (isKey(event, "Enter")) {
@@ -78,20 +75,21 @@ const HvSingleCalendar = ({
     if (child) {
       const inMonth = child.getAttribute("data-in-month");
       if (inMonth === "true") {
-        event == null ? void 0 : event.preventDefault();
-        child == null ? void 0 : child.focus();
+        event?.preventDefault();
+        child?.focus();
       }
     }
   };
+  const renderWeekLabel = (dayName, index) => /* @__PURE__ */ jsx(HvTypography, { variant: "label", className: classes.calendarDay, children: dayName }, index);
   const renderCalendarDate = (currentDate) => {
-    return /* @__PURE__ */ jsx(HvCalendarCell, { classes, tabIndex: currentDate.getTime() === firstDayOfCurrentMonthTime ? 0 : -1, onChange: handleChange, onKeyDown: handleKeyDown, value: currentDate, today, calendarValue: localValue, rangeMode, isDateSelectionMode, locale, firstDayOfCurrentMonth, maximumDate, minimumDate }, currentDate);
+    return /* @__PURE__ */ jsx(HvCalendarCell, { classes, tabIndex: currentDate.getTime() === firstDayOfCurrentMonthTime ? 0 : -1, onChange: handleChange, onKeyDown: handleKeyDown, value: currentDate, today, calendarValue: localValue, rangeMode, isDateSelectionMode, locale, firstDayOfCurrentMonth, maximumDate, minimumDate }, currentDate.toString());
   };
   return /* @__PURE__ */ jsx("div", { className: cx(classes.calendarContainer, className), ...others, children: /* @__PURE__ */ jsxs("div", { id, className: classes.calendarWrapper, children: [
     /* @__PURE__ */ jsx(HvCalendarHeader, { id: setId(id, "header"), locale, onChange: handleInputChange, showEndDate: showEndDate && !isDateSelectionMode, showDayOfWeek, invalidDateLabel }),
     calViewMode === "calendar" && /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx(HvComposedNavigation, { id, locale, onChange: onVisibleDateChange, onViewModeChange: setCalViewMode, visibleYear: visibleYear || today.getFullYear(), visibleMonth: visibleMonth || today.getMonth() + 1 }),
-      /* @__PURE__ */ jsxs("div", { className: classes.calendarGrid, "aria-controls": (_b = (_a = HvCalendarHeader) == null ? void 0 : _a[0]) == null ? void 0 : _b.id, children: [
-        /* @__PURE__ */ jsx(HvCalendarWeekLabel, { labels: listWeekdayNames }),
+      /* @__PURE__ */ jsxs("div", { className: classes.calendarGrid, "aria-controls": HvCalendarHeader?.[0]?.id, children: [
+        listWeekdayNames.map(renderWeekLabel),
         calModel.dates.map(renderCalendarDate)
       ] })
     ] }),

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

@@ -1 +1 @@
-{"version":3,"file":"SingleCalendar.js","sources":["../../../../../src/components/Calendar/SingleCalendar/SingleCalendar.tsx"],"sourcesContent":["import { useState, useMemo } from \"react\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { ViewMode } from \"../enums\";\nimport { isRange, isDate, getWeekdayNamesList } from \"../utils\";\nimport { generateCalendarModel } from \"../model\";\nimport { HvComposedNavigation, HvMonthSelector } from \"../CalendarNavigation\";\nimport { DateRangeProp, VisibilitySelectorActions } from \"../types\";\n\nimport { HvCalendarCell } from \"./CalendarCell\";\nimport { HvCalendarWeekLabel } from \"../CalendarWeekLabels\";\nimport { HvCalendarHeader } from \"../CalendarHeader/CalendarHeader\";\n\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 = isNil(value) ? today : value;\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(\n    () => getWeekdayNamesList(locale, \"narrow\"),\n    [locale]\n  );\n\n  const handleChange = (event, date: Date | DateRangeProp) => {\n    event?.preventDefault();\n    onChange?.(event, date);\n  };\n\n  const handleInputChange = (event, date) => {\n    event?.preventDefault();\n    onInputChange?.(event, date);\n  };\n\n  const getNavChild = (event: KeyboardEvent, siblings, 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) => {\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  /**\n   * Renders the element representing the received date.\n   *\n   * @param currentDate - The array representing the date [YYYY, MM, DD].\n   * @memberOf Calendar\n   */\n  const renderCalendarDate = (currentDate) => {\n    return (\n      <HvCalendarCell\n        classes={classes}\n        key={currentDate}\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    <div className={cx(classes.calendarContainer, className)} {...others}>\n      <div id={id} className={classes.calendarWrapper}>\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          <div>\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              aria-controls={HvCalendarHeader?.[0]?.id}\n            >\n              <HvCalendarWeekLabel labels={listWeekdayNames} />\n              {calModel.dates.map(renderCalendarDate)}\n            </div>\n          </div>\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      </div>\n    </div>\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":["HvSingleCalendar","classes","classesProp","className","id","locale","value","visibleMonth","visibleYear","minimumDate","maximumDate","onChange","onInputChange","onVisibleDateChange","showEndDate","showDayOfWeek","invalidDateLabel","children","others","cx","useClasses","today","Date","localValue","isNil","calViewMode","setCalViewMode","useState","rangeMode","isRange","isDateSelectionMode","isDate","endDate","calModel","generateCalendarModel","startDate","firstDayOfCurrentMonth","year","month","firstDayOfCurrentMonthTime","getTime","listWeekdayNames","useMemo","getWeekdayNamesList","handleChange","event","date","preventDefault","handleInputChange","getNavChild","siblings","i","isKey","undefined","handleKeyDown","el","document","activeElement","parent","parentElement","Array","from","getElementsByClassName","cellContainer","elIndex","indexOf","focus","child","inMonth","getAttribute","renderCalendarDate","currentDate","calendarContainer","calendarWrapper","setId","getFullYear","getMonth","calendarGrid","HvCalendarHeader","dates","map"],"mappings":"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"}
+{"version":3,"file":"SingleCalendar.js","sources":["../../../../../src/components/Calendar/SingleCalendar/SingleCalendar.tsx"],"sourcesContent":["import { useState, useMemo } from \"react\";\n\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { ViewMode } from \"../enums\";\nimport { isRange, isDate, getWeekdayNamesList } from \"../utils\";\nimport { generateCalendarModel } from \"../model\";\nimport { HvComposedNavigation, HvMonthSelector } from \"../CalendarNavigation\";\nimport { DateRangeProp, VisibilitySelectorActions } from \"../types\";\n\nimport { HvCalendarCell } from \"./CalendarCell\";\nimport { HvCalendarHeader } from \"../CalendarHeader/CalendarHeader\";\n\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, date: Date | DateRangeProp) => {\n    event?.preventDefault();\n    onChange?.(event, date);\n  };\n\n  const handleInputChange = (event, date) => {\n    event?.preventDefault();\n    onInputChange?.(event, date);\n  };\n\n  const getNavChild = (event: KeyboardEvent, siblings, 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) => {\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    <div className={cx(classes.calendarContainer, className)} {...others}>\n      <div id={id} className={classes.calendarWrapper}>\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          <div>\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              aria-controls={HvCalendarHeader?.[0]?.id}\n            >\n              {listWeekdayNames.map(renderWeekLabel)}\n              {calModel.dates.map(renderCalendarDate)}\n            </div>\n          </div>\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      </div>\n    </div>\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":["HvSingleCalendar","classes","classesProp","className","id","locale","value","visibleMonth","visibleYear","minimumDate","maximumDate","onChange","onInputChange","onVisibleDateChange","showEndDate","showDayOfWeek","invalidDateLabel","children","others","cx","useClasses","today","Date","localValue","calViewMode","setCalViewMode","useState","rangeMode","isRange","isDateSelectionMode","isDate","endDate","calModel","generateCalendarModel","startDate","firstDayOfCurrentMonth","year","month","firstDayOfCurrentMonthTime","getTime","listWeekdayNames","useMemo","getWeekdayNamesList","handleChange","event","date","preventDefault","handleInputChange","getNavChild","siblings","i","isKey","undefined","handleKeyDown","el","document","activeElement","parent","parentElement","Array","from","getElementsByClassName","cellContainer","elIndex","indexOf","focus","child","inMonth","getAttribute","renderWeekLabel","dayName","index","calendarDay","renderCalendarDate","currentDate","toString","calendarContainer","calendarWrapper","setId","getFullYear","getMonth","calendarGrid","HvCalendarHeader","map","dates"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
-import { createClasses } from "../../../utils/classes.js";
 import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../../utils/classes.js";
 const {
   staticClasses,
   useClasses
@@ -51,6 +51,14 @@ const {
       // control the right side when hovering outside of the range
     }
   },
+  calendarDay: {
+    display: "flex",
+    justifyContent: "center",
+    flexDirection: "column",
+    textAlign: "center",
+    height: "40px",
+    width: "40px"
+  },
   navigationContainer: {},
   focusSelection: {},
   navigationMonth: {},

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

@@ -1 +1 @@
-{"version":3,"file":"SingleCalendar.styles.js","sources":["../../../../../src/components/Calendar/SingleCalendar/SingleCalendar.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSingleCalendar\", {\n  calendarContainer: {\n    backgroundColor: theme.colors.atmo1,\n    width: \"318px\",\n    minHeight: \"440px\",\n    position: \"relative\",\n  },\n  calendarWrapper: {\n    overflow: \"hidden\",\n    backgroundColor: theme.colors.atmo1,\n    padding: theme.spacing(\"sm\"),\n  },\n  calendarGrid: {\n    display: \"flex\",\n    flexFlow: \"wrap\",\n    width: \"280px\",\n    \"& $cellsInRange\": {\n      backgroundColor: theme.colors.atmo3,\n      \"& $startBookend\": {\n        borderLeft: `1px solid ${theme.colors.secondary}`,\n        backgroundColor: theme.colors.atmo3,\n        \"&:hover\": {\n          borderRight: `1px solid ${theme.colors.secondary}`,\n        },\n      },\n    },\n    \"&:hover $cellsInRange\": {\n      backgroundColor: theme.colors.atmo3,\n      \"& $startBookend\": {\n        borderLeft: `1px solid ${theme.colors.secondary}`,\n        borderRight: \"inherit\",\n      },\n    },\n    \"& $cellsInRange:hover\": {\n      backgroundColor: theme.colors.atmo3,\n      \"& $calendarDate\": {\n        borderRight: `1px solid ${theme.colors.secondary}`,\n      },\n    },\n    \"& $cellsInRange:hover ~ $cellsInRange\": {\n      backgroundColor: theme.colors.atmo1, // controls the right side of the hovered range\n    },\n    \"& $cellsOutsideRange:hover ~ $cellsInRange\": {\n      backgroundColor: theme.colors.atmo1, // control the right side when hovering outside of the range\n    },\n  },\n  navigationContainer: {},\n  focusSelection: {},\n  navigationMonth: {},\n  calendarDate: {},\n  calendarDateNotInMonth: {},\n  calendarDateSelected: {},\n  calendarDateInvalid: {},\n  calendarDateInSelectionRange: {},\n  startBookend: {},\n  endBookend: {},\n  cellsInRange: {\n    backgroundColor: theme.colors.atmo3,\n  },\n  cellsOutsideRange: {},\n  cellContainer: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","calendarContainer","backgroundColor","theme","colors","atmo1","width","minHeight","position","calendarWrapper","overflow","padding","spacing","calendarGrid","display","flexFlow","atmo3","borderLeft","secondary","borderRight","navigationContainer","focusSelection","navigationMonth","calendarDate","calendarDateNotInMonth","calendarDateSelected","calendarDateInvalid","calendarDateInSelectionRange","startBookend","endBookend","cellsInRange","cellsOutsideRange","cellContainer"],"mappings":";;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,oBAAoB;AAAA,EAC7EC,mBAAmB;AAAA,IACjBC,iBAAiBC,MAAMC,OAAOC;AAAAA,IAC9BC,OAAO;AAAA,IACPC,WAAW;AAAA,IACXC,UAAU;AAAA,EACZ;AAAA,EACAC,iBAAiB;AAAA,IACfC,UAAU;AAAA,IACVR,iBAAiBC,MAAMC,OAAOC;AAAAA,IAC9BM,SAASR,MAAMS,QAAQ,IAAI;AAAA,EAC7B;AAAA,EACAC,cAAc;AAAA,IACZC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVT,OAAO;AAAA,IACP,mBAAmB;AAAA,MACjBJ,iBAAiBC,MAAMC,OAAOY;AAAAA,MAC9B,mBAAmB;AAAA,QACjBC,YAAa,aAAYd,MAAMC,OAAOc,SAAU;AAAA,QAChDhB,iBAAiBC,MAAMC,OAAOY;AAAAA,QAC9B,WAAW;AAAA,UACTG,aAAc,aAAYhB,MAAMC,OAAOc,SAAU;AAAA,QACnD;AAAA,MACF;AAAA,IACF;AAAA,IACA,yBAAyB;AAAA,MACvBhB,iBAAiBC,MAAMC,OAAOY;AAAAA,MAC9B,mBAAmB;AAAA,QACjBC,YAAa,aAAYd,MAAMC,OAAOc,SAAU;AAAA,QAChDC,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA,yBAAyB;AAAA,MACvBjB,iBAAiBC,MAAMC,OAAOY;AAAAA,MAC9B,mBAAmB;AAAA,QACjBG,aAAc,aAAYhB,MAAMC,OAAOc,SAAU;AAAA,MACnD;AAAA,IACF;AAAA,IACA,yCAAyC;AAAA,MACvChB,iBAAiBC,MAAMC,OAAOC;AAAAA;AAAAA,IAChC;AAAA,IACA,8CAA8C;AAAA,MAC5CH,iBAAiBC,MAAMC,OAAOC;AAAAA;AAAAA,IAChC;AAAA,EACF;AAAA,EACAe,qBAAqB,CAAC;AAAA,EACtBC,gBAAgB,CAAC;AAAA,EACjBC,iBAAiB,CAAC;AAAA,EAClBC,cAAc,CAAC;AAAA,EACfC,wBAAwB,CAAC;AAAA,EACzBC,sBAAsB,CAAC;AAAA,EACvBC,qBAAqB,CAAC;AAAA,EACtBC,8BAA8B,CAAC;AAAA,EAC/BC,cAAc,CAAC;AAAA,EACfC,YAAY,CAAC;AAAA,EACbC,cAAc;AAAA,IACZ5B,iBAAiBC,MAAMC,OAAOY;AAAAA,EAChC;AAAA,EACAe,mBAAmB,CAAC;AAAA,EACpBC,eAAe,CAAC;AAClB,CAAC;"}
+{"version":3,"file":"SingleCalendar.styles.js","sources":["../../../../../src/components/Calendar/SingleCalendar/SingleCalendar.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSingleCalendar\", {\n  calendarContainer: {\n    backgroundColor: theme.colors.atmo1,\n    width: \"318px\",\n    minHeight: \"440px\",\n    position: \"relative\",\n  },\n  calendarWrapper: {\n    overflow: \"hidden\",\n    backgroundColor: theme.colors.atmo1,\n    padding: theme.spacing(\"sm\"),\n  },\n  calendarGrid: {\n    display: \"flex\",\n    flexFlow: \"wrap\",\n    width: \"280px\",\n    \"& $cellsInRange\": {\n      backgroundColor: theme.colors.atmo3,\n      \"& $startBookend\": {\n        borderLeft: `1px solid ${theme.colors.secondary}`,\n        backgroundColor: theme.colors.atmo3,\n        \"&:hover\": {\n          borderRight: `1px solid ${theme.colors.secondary}`,\n        },\n      },\n    },\n    \"&:hover $cellsInRange\": {\n      backgroundColor: theme.colors.atmo3,\n      \"& $startBookend\": {\n        borderLeft: `1px solid ${theme.colors.secondary}`,\n        borderRight: \"inherit\",\n      },\n    },\n    \"& $cellsInRange:hover\": {\n      backgroundColor: theme.colors.atmo3,\n      \"& $calendarDate\": {\n        borderRight: `1px solid ${theme.colors.secondary}`,\n      },\n    },\n    \"& $cellsInRange:hover ~ $cellsInRange\": {\n      backgroundColor: theme.colors.atmo1, // controls the right side of the hovered range\n    },\n    \"& $cellsOutsideRange:hover ~ $cellsInRange\": {\n      backgroundColor: theme.colors.atmo1, // control the right side when hovering outside of the range\n    },\n  },\n  calendarDay: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    flexDirection: \"column\",\n    textAlign: \"center\",\n    height: \"40px\",\n    width: \"40px\",\n  },\n  navigationContainer: {},\n  focusSelection: {},\n  navigationMonth: {},\n  calendarDate: {},\n  calendarDateNotInMonth: {},\n  calendarDateSelected: {},\n  calendarDateInvalid: {},\n  calendarDateInSelectionRange: {},\n  startBookend: {},\n  endBookend: {},\n  cellsInRange: {\n    backgroundColor: theme.colors.atmo3,\n  },\n  cellsOutsideRange: {},\n  cellContainer: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","calendarContainer","backgroundColor","theme","colors","atmo1","width","minHeight","position","calendarWrapper","overflow","padding","spacing","calendarGrid","display","flexFlow","atmo3","borderLeft","secondary","borderRight","calendarDay","justifyContent","flexDirection","textAlign","height","navigationContainer","focusSelection","navigationMonth","calendarDate","calendarDateNotInMonth","calendarDateSelected","calendarDateInvalid","calendarDateInSelectionRange","startBookend","endBookend","cellsInRange","cellsOutsideRange","cellContainer"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,oBAAoB;AAAA,EAC7EC,mBAAmB;AAAA,IACjBC,iBAAiBC,MAAMC,OAAOC;AAAAA,IAC9BC,OAAO;AAAA,IACPC,WAAW;AAAA,IACXC,UAAU;AAAA,EACZ;AAAA,EACAC,iBAAiB;AAAA,IACfC,UAAU;AAAA,IACVR,iBAAiBC,MAAMC,OAAOC;AAAAA,IAC9BM,SAASR,MAAMS,QAAQ,IAAI;AAAA,EAC7B;AAAA,EACAC,cAAc;AAAA,IACZC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVT,OAAO;AAAA,IACP,mBAAmB;AAAA,MACjBJ,iBAAiBC,MAAMC,OAAOY;AAAAA,MAC9B,mBAAmB;AAAA,QACjBC,YAAa,aAAYd,MAAMC,OAAOc,SAAU;AAAA,QAChDhB,iBAAiBC,MAAMC,OAAOY;AAAAA,QAC9B,WAAW;AAAA,UACTG,aAAc,aAAYhB,MAAMC,OAAOc,SAAU;AAAA,QACnD;AAAA,MACF;AAAA,IACF;AAAA,IACA,yBAAyB;AAAA,MACvBhB,iBAAiBC,MAAMC,OAAOY;AAAAA,MAC9B,mBAAmB;AAAA,QACjBC,YAAa,aAAYd,MAAMC,OAAOc,SAAU;AAAA,QAChDC,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA,yBAAyB;AAAA,MACvBjB,iBAAiBC,MAAMC,OAAOY;AAAAA,MAC9B,mBAAmB;AAAA,QACjBG,aAAc,aAAYhB,MAAMC,OAAOc,SAAU;AAAA,MACnD;AAAA,IACF;AAAA,IACA,yCAAyC;AAAA,MACvChB,iBAAiBC,MAAMC,OAAOC;AAAAA;AAAAA,IAChC;AAAA,IACA,8CAA8C;AAAA,MAC5CH,iBAAiBC,MAAMC,OAAOC;AAAAA;AAAAA,IAChC;AAAA,EACF;AAAA,EACAe,aAAa;AAAA,IACXN,SAAS;AAAA,IACTO,gBAAgB;AAAA,IAChBC,eAAe;AAAA,IACfC,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRlB,OAAO;AAAA,EACT;AAAA,EACAmB,qBAAqB,CAAC;AAAA,EACtBC,gBAAgB,CAAC;AAAA,EACjBC,iBAAiB,CAAC;AAAA,EAClBC,cAAc,CAAC;AAAA,EACfC,wBAAwB,CAAC;AAAA,EACzBC,sBAAsB,CAAC;AAAA,EACvBC,qBAAqB,CAAC;AAAA,EACtBC,8BAA8B,CAAC;AAAA,EAC/BC,cAAc,CAAC;AAAA,EACfC,YAAY,CAAC;AAAA,EACbC,cAAc;AAAA,IACZjC,iBAAiBC,MAAMC,OAAOY;AAAAA,EAChC;AAAA,EACAoB,mBAAmB,CAAC;AAAA,EACpBC,eAAe,CAAC;AAClB,CAAC;"}

package/dist/esm/components/Calendar/utils.js

@@ -1,5 +1,4 @@
 import dayjs from "dayjs";
-import isNil from "lodash/isNil";
 import capitalize from "lodash/capitalize";
 const CALENDAR_WEEKS = 6;
 const getMonthDays = (month, year) => new Date(year, month, 0).getDate();
@@ -43,17 +42,14 @@ const getMonthNamesList = (locale, representationValue = "long") => {
     return capitalize(Intl.DateTimeFormat(locale, options).format(auxDate));
   });
 };
-const getWeekdayNamesList = (locale, dateTimeFormatValue = "long") => {
-  const options = {
-    weekday: dateTimeFormatValue,
+const getWeekdayNamesList = (locale) => {
+  const formatter = new Intl.DateTimeFormat(locale, {
+    weekday: "narrow",
     timeZone: "UTC"
-  };
-  const weekdayNames = [];
-  for (let day = 4; day <= 10; day += 1) {
-    const auxDate = makeUTCDate(1970, 0, day);
-    weekdayNames.push(Intl.DateTimeFormat(locale, options).format(auxDate));
-  }
-  return weekdayNames;
+  });
+  return [...new Array(7)].map((n, index) => {
+    return formatter.format(makeUTCDate(1970, 0, 4 + index));
+  });
 };
 const getMonthName = (date, locale, representationValue = "long") => new Intl.DateTimeFormat(locale, {
   month: representationValue
@@ -86,7 +82,7 @@ const dateInProvidedValueRange = (date, providedValueRange) => {
     startDate,
     endDate
   } = providedValueRange;
-  if (!isRange(providedValueRange) || isNil(endDate))
+  if (!isRange(providedValueRange) || endDate == null)
     return false;
   const localEndDate = endDate;
   const modStartDate = dayjs(startDate).format("YYYY-MM-DD");