@hitachivantara/uikit-react-core 5.39.0 → 5.39.2

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

@@ -14,10 +14,7 @@ const HvMonthSelector = ({
   visibleMonth,
   ...others
 }) => {
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   const listMonthNamesShort = getMonthNamesList(locale, "short");
   const onKeyDownHandler = (event, index) => {
     if (isKey(event, "Enter")) {
@@ -25,15 +22,39 @@ const HvMonthSelector = ({
       onViewModeChange("calendar");
     }
   };
-  return /* @__PURE__ */ jsx("div", { className: cx(classes.calendarMonthlyGrid, {
-    [classes.rangeModeWidth]: rangeMode,
-    [classes.normalWidth]: !rangeMode
-  }), children: listMonthNamesShort.map((monthName, index) => /* @__PURE__ */ jsx("div", { className: classes.focusSelection, role: "button", onClick: (event) => {
-    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
-  }), children: monthName }) }, monthName)) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(classes.calendarMonthlyGrid, {
+        [classes.rangeModeWidth]: rangeMode,
+        [classes.normalWidth]: !rangeMode
+      }),
+      children: listMonthNamesShort.map((monthName, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: classes.focusSelection,
+          role: "button",
+          onClick: (event) => {
+            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
+              }),
+              children: monthName
+            }
+          )
+        },
+        monthName
+      ))
+    }
+  );
 };
 export {
   HvMonthSelector,

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\";\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: any, index: number) => {\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,OAAYC,UAAkB;AAClDC,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;"}
+{"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: any, index: number) => {\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":[],"mappings":";;;;;;AAeO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4B;AAC1B,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,sBAAsB,kBAAkB,QAAQ,OAAO;AACvD,QAAA,mBAAmB,CAAC,OAAY,UAAkB;AAClD,QAAA,MAAM,OAAO,OAAO,GAAG;AACd,iBAAA,OAAO,SAAS,QAAQ,CAAC;AACpC,uBAAiB,UAAU;AAAA,IAC7B;AAAA,EAAA;AAGA,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,qBAAqB;AAAA,QACzC,CAAC,QAAQ,cAAc,GAAG;AAAA,QAC1B,CAAC,QAAQ,WAAW,GAAG,CAAC;AAAA,MAAA,CACzB;AAAA,MAEA,UAAoB,oBAAA,IAAI,CAAC,WAAW,UACnC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UAEnB,MAAK;AAAA,UACL,SAAS,CAAC,UAAU;AACP,uBAAA,OAAO,SAAS,QAAQ,CAAC;AACpC,6BAAiB,UAAU;AAAA,UAC7B;AAAA,UACA,WAAW,CAAC,UAAU,iBAAiB,OAAO,KAAK;AAAA,UACnD,UAAU;AAAA,UACT,GAAG;AAAA,UAEJ,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAG,QAAQ,qBAAqB;AAAA,gBACzC,CAAC,QAAQ,2BAA2B,GAAG,QAAQ,MAAM;AAAA,cAAA,CACtD;AAAA,cAEA,UAAA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,QAhBK;AAAA,MAAA,CAkBR;AAAA,IAAA;AAAA,EAAA;AAGP;"}

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

@@ -5,10 +5,7 @@ const hover = {
   backgroundColor: theme.colors.atmo3,
   cursor: "pointer"
 };
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvMonthSelector", {
+const { staticClasses, useClasses } = createClasses("HvMonthSelector", {
   calendarMonthlyGrid: {
     marginTop: "50px",
     marginLeft: "-16px",

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

@@ -1 +1 @@
-{"version":3,"file":"MonthSelector.styles.js","sources":["../../../../../../src/components/Calendar/CalendarNavigation/MonthSelector/MonthSelector.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst hover = {\n  backgroundColor: theme.colors.atmo3,\n  cursor: \"pointer\",\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvMonthSelector\", {\n  calendarMonthlyGrid: {\n    marginTop: \"50px\",\n    marginLeft: \"-16px\",\n    display: \"flex\",\n    zIndex: \"10\",\n    padding: \"0 20px\",\n    position: \"absolute\",\n    flexFlow: \"wrap\",\n    alignContent: \"center\",\n    justifyContent: \"space-evenly\",\n    backgroundColor: theme.colors.atmo1,\n  },\n  rangeModeWidth: {},\n  normalWidth: {},\n  focusSelection: {\n    \"&:hover\": {\n      ...hover,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...hover,\n      ...outlineStyles,\n    },\n  },\n  calendarMonthlyCell: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    flexDirection: \"column\",\n    textAlign: \"center\",\n    height: \"40px\",\n    width: \"92px\",\n    \"&:hover\": {\n      ...hover,\n    },\n  },\n  calendarMonthlyCellSelected: {\n    backgroundColor: theme.colors.atmo3,\n    color: theme.colors.secondary,\n    \"&:hover\": {\n      backgroundColor: theme.colors.atmo3,\n      color: theme.colors.secondary,\n    },\n  },\n});\n"],"names":["hover","backgroundColor","theme","colors","atmo3","cursor","staticClasses","useClasses","createClasses","calendarMonthlyGrid","marginTop","marginLeft","display","zIndex","padding","position","flexFlow","alignContent","justifyContent","atmo1","rangeModeWidth","normalWidth","focusSelection","outline","outlineStyles","calendarMonthlyCell","flexDirection","textAlign","height","width","calendarMonthlyCellSelected","color","secondary"],"mappings":";;;AAMA,MAAMA,QAAQ;AAAA,EACZC,iBAAiBC,MAAMC,OAAOC;AAAAA,EAC9BC,QAAQ;AACV;AAEa,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAc,mBAAmB;AAAA,EAC5EC,qBAAqB;AAAA,IACnBC,WAAW;AAAA,IACXC,YAAY;AAAA,IACZC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,gBAAgB;AAAA,IAChBjB,iBAAiBC,MAAMC,OAAOgB;AAAAA,EAChC;AAAA,EACAC,gBAAgB,CAAC;AAAA,EACjBC,aAAa,CAAC;AAAA,EACdC,gBAAgB;AAAA,IACd,WAAW;AAAA,MACT,GAAGtB;AAAAA,IACL;AAAA,IACA,WAAW;AAAA,MACTuB,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGvB;AAAAA,MACH,GAAGwB;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,qBAAqB;AAAA,IACnBb,SAAS;AAAA,IACTM,gBAAgB;AAAA,IAChBQ,eAAe;AAAA,IACfC,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRC,OAAO;AAAA,IACP,WAAW;AAAA,MACT,GAAG7B;AAAAA,IACL;AAAA,EACF;AAAA,EACA8B,6BAA6B;AAAA,IAC3B7B,iBAAiBC,MAAMC,OAAOC;AAAAA,IAC9B2B,OAAO7B,MAAMC,OAAO6B;AAAAA,IACpB,WAAW;AAAA,MACT/B,iBAAiBC,MAAMC,OAAOC;AAAAA,MAC9B2B,OAAO7B,MAAMC,OAAO6B;AAAAA,IACtB;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"MonthSelector.styles.js","sources":["../../../../../../src/components/Calendar/CalendarNavigation/MonthSelector/MonthSelector.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst hover = {\n  backgroundColor: theme.colors.atmo3,\n  cursor: \"pointer\",\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvMonthSelector\", {\n  calendarMonthlyGrid: {\n    marginTop: \"50px\",\n    marginLeft: \"-16px\",\n    display: \"flex\",\n    zIndex: \"10\",\n    padding: \"0 20px\",\n    position: \"absolute\",\n    flexFlow: \"wrap\",\n    alignContent: \"center\",\n    justifyContent: \"space-evenly\",\n    backgroundColor: theme.colors.atmo1,\n  },\n  rangeModeWidth: {},\n  normalWidth: {},\n  focusSelection: {\n    \"&:hover\": {\n      ...hover,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...hover,\n      ...outlineStyles,\n    },\n  },\n  calendarMonthlyCell: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    flexDirection: \"column\",\n    textAlign: \"center\",\n    height: \"40px\",\n    width: \"92px\",\n    \"&:hover\": {\n      ...hover,\n    },\n  },\n  calendarMonthlyCellSelected: {\n    backgroundColor: theme.colors.atmo3,\n    color: theme.colors.secondary,\n    \"&:hover\": {\n      backgroundColor: theme.colors.atmo3,\n      color: theme.colors.secondary,\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAMA,MAAM,QAAQ;AAAA,EACZ,iBAAiB,MAAM,OAAO;AAAA,EAC9B,QAAQ;AACV;AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,qBAAqB;AAAA,IACnB,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,gBAAgB,CAAC;AAAA,EACjB,aAAa,CAAC;AAAA,EACd,gBAAgB;AAAA,IACd,WAAW;AAAA,MACT,GAAG;AAAA,IACL;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,qBAAqB;AAAA,IACnB,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,WAAW;AAAA,MACT,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,6BAA6B;AAAA,IAC3B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,IACpB,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,EACF;AACF,CAAC;"}

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

@@ -14,20 +14,49 @@ const Navigation = ({
   isPreviousEnabled = true,
   isNextEnabled = true
 }) => {
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
-    /* @__PURE__ */ jsx(HvButton, { icon: true, disabled: !isPreviousEnabled, "aria-label": "Previous", id: setId(id, "left"), className: cx(classes.icon, {
-      [classes.disabled]: !isPreviousEnabled
-    }), 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: onNavigateNext, children: /* @__PURE__ */ jsx(DropRightXS, { role: "none" }) })
+    /* @__PURE__ */ jsx(
+      HvButton,
+      {
+        icon: true,
+        disabled: !isPreviousEnabled,
+        "aria-label": "Previous",
+        id: setId(id, "left"),
+        className: cx(classes.icon, {
+          [classes.disabled]: !isPreviousEnabled
+        }),
+        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: 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 { 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;"}
+{"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":["DropLeftIcon","DropRightIcon"],"mappings":";;;;;;AAiBO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,gBAAgB;AAClB,MAAuB;AACrB,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,SACG,qBAAA,OAAA,EAAI,WAAW,QAAQ,MACtB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,UAAU,CAAC;AAAA,QACX,cAAW;AAAA,QACX,IAAI,MAAM,IAAI,MAAM;AAAA,QACpB,WAAW,GAAG,QAAQ,MAAM;AAAA,UAC1B,CAAC,QAAQ,QAAQ,GAAG,CAAC;AAAA,QAAA,CACtB;AAAA,QACD,SAAS;AAAA,QAET,UAAA,oBAACA,YAAa,EAAA,MAAK,OAAO,CAAA;AAAA,MAAA;AAAA,IAC5B;AAAA,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,SAAS;AAAA,QACT,WAAW,cAAc,WAAW;AAAA,QACpC,WAAW,GAAG,QAAQ,MAAM;AAAA,UAC1B,CAAC,QAAQ,gBAAgB,GAAG,CAAC;AAAA,QAAA,CAC9B;AAAA,QAEA,UAAA;AAAA,MAAA;AAAA,IACH;AAAA,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,UAAU,CAAC;AAAA,QACX,cAAW;AAAA,QACX,IAAI,MAAM,IAAI,OAAO;AAAA,QACrB,WAAW,GAAG,QAAQ,MAAM;AAAA,UAC1B,CAAC,QAAQ,QAAQ,GAAG,CAAC;AAAA,QAAA,CACtB;AAAA,QACD,SAAS;AAAA,QAET,UAAA,oBAACC,aAAc,EAAA,MAAK,OAAO,CAAA;AAAA,MAAA;AAAA,IAC7B;AAAA,EACF,EAAA,CAAA;AAEJ;"}

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

@@ -1,9 +1,6 @@
 import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses } from "../../../../utils/classes.js";
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvNavigation", {
+const { staticClasses, useClasses } = createClasses("HvNavigation", {
   root: {
     display: "flex",
     alignItems: "center",

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 { 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;"}
+{"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":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,MAAM,CAAC;AAAA,EACP,UAAU,CAAC;AAAA,EACX,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO,MAAM,OAAO;AAAA,IACpB,YAAY,MAAM,WAAW,KAAK;AAAA,IAClC,SAAS;AAAA,EACX;AAAA,EACA,kBAAkB;AAAA,IAChB,eAAe;AAAA,EACjB;AACF,CAAC;"}

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

@@ -21,10 +21,7 @@ const HvCalendarCell = (props) => {
     rangeMode = false,
     ...others
   } = useDefaultProps("HvCalendarCell", props);
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   const buttonEl = useRef(null);
   const startDate = isDateRangeProp(calendarValue) ? calendarValue.startDate : void 0;
   const endDate = isDateRangeProp(calendarValue) ? calendarValue.endDate : void 0;
@@ -48,20 +45,47 @@ const HvCalendarCell = (props) => {
   const handleKeyDown = (event) => {
     onKeyDown?.(event);
   };
-  const renderDate = () => /* @__PURE__ */ jsx("button", { ref: buttonEl, type: "button", className: cx(classes.cellContainer, {
-    [classes.focusSelection]: inMonth
-  }), onClick: handleClick, onKeyDown: handleKeyDown, disabled: isDateDisabled || !inMonth, "data-in-month": inMonth, ...others, children: /* @__PURE__ */ jsx(HvTypography, { variant: isCellToday ? "label" : "body", className: cx(classes.calendarDate, {
-    [classes.calendarDateSelected]: inMonth && isCellSelected,
-    [classes.calendarDateNotInMonth]: !inMonth,
-    [classes.calendarDateInSelectionRange]: inMonth && rangeMode && isDateInSelectionRange,
-    [classes.calendarDateDisabled]: isDateDisabled,
-    [classes.startBookend]: inMonth && (startBookend && rangeMode || isCellStartingDate && isDateSelectionMode),
-    [classes.endBookend]: inMonth && endBookend && rangeMode
-  }), children: value && value.getDate() }) });
-  return /* @__PURE__ */ jsx("div", { className: cx(classes.dateWrapper, {
-    [classes.cellsInRange]: inMonth && rangeMode && isSelecting,
-    [classes.cellsOutsideRange]: rangeMode && !isSelecting
-  }), "data-calendar-cell": "calendarCell", children: renderDate() });
+  const renderDate = () => /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: buttonEl,
+      type: "button",
+      className: cx(classes.cellContainer, {
+        [classes.focusSelection]: inMonth
+      }),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      disabled: isDateDisabled || !inMonth,
+      "data-in-month": inMonth,
+      ...others,
+      children: /* @__PURE__ */ jsx(
+        HvTypography,
+        {
+          variant: isCellToday ? "label" : "body",
+          className: cx(classes.calendarDate, {
+            [classes.calendarDateSelected]: inMonth && isCellSelected,
+            [classes.calendarDateNotInMonth]: !inMonth,
+            [classes.calendarDateInSelectionRange]: inMonth && rangeMode && isDateInSelectionRange,
+            [classes.calendarDateDisabled]: isDateDisabled,
+            [classes.startBookend]: inMonth && (startBookend && rangeMode || isCellStartingDate && isDateSelectionMode),
+            [classes.endBookend]: inMonth && endBookend && rangeMode
+          }),
+          children: value && value.getDate()
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(classes.dateWrapper, {
+        [classes.cellsInRange]: inMonth && rangeMode && isSelecting,
+        [classes.cellsOutsideRange]: rangeMode && !isSelecting
+      }),
+      "data-calendar-cell": "calendarCell",
+      children: renderDate()
+    }
+  );
 };
 export {
   HvCalendarCell,

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\";\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;"}
+{"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":[],"mappings":";;;;;;;AAsBa,MAAA,iBAAiB,CAAC,UAA+B;AACtD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,WAAW,OAA0B,IAAI;AAE/C,QAAM,YAAY,gBAAgB,aAAa,IAC3C,cAAc,YACd;AACJ,QAAM,UAAU,gBAAgB,aAAa,IACzC,cAAc,UACd;AACE,QAAA,cAAc,UAAU,OAAO,KAAK;AACpC,QAAA,iBAAiB,UAAU,eAAe,KAAK;AAC/C,QAAA,UAAU,YAAY,OAAO,sBAAsB;AACzD,QAAM,0BACJ,aAAa,SAAS,YAAY,SAAS,YAAY;AACzD,QAAM,qBAAqB,YAAY,UAAU,OAAO,SAAS,IAAI;AACrE,QAAM,yBACJ,iBAAiB,YACb,yBAAyB,OAAO,aAAa,IAC7C;AACN,QAAM,iBAAiB,sBAAsB,OAAO,aAAa,WAAW;AACtE,QAAA,eAAe,UAAU,WAAW,KAAK;AACzC,QAAA,aAAa,UAAU,SAAS,KAAK;AAC3C,QAAM,cAAc,uBAAuB;AAErC,QAAA,cAAc,CAAC,UAA0B;AAC7C,QAAI,OAAO;AACT,iBAAW,OAAO,KAAK;AACvB,UAAI,SAAS;AAAS,mBAAW,MAAM,UAAU,SAAS,MAAO,CAAA;AAAA,IACnE;AAAA,EAAA;AAGI,QAAA,gBAAgB,CAAC,UAAU;AAC/B,gBAAY,KAAK;AAAA,EAAA;AAGnB,QAAM,aAAa,MACjB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAK;AAAA,MACL,WAAW,GAAG,QAAQ,eAAe;AAAA,QACnC,CAAC,QAAQ,cAAc,GAAG;AAAA,MAAA,CAC3B;AAAA,MACD,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU,kBAAkB,CAAC;AAAA,MAC7B,iBAAe;AAAA,MACd,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS,cAAc,UAAU;AAAA,UACjC,WAAW,GAAG,QAAQ,cAAc;AAAA,YAClC,CAAC,QAAQ,oBAAoB,GAAG,WAAW;AAAA,YAC3C,CAAC,QAAQ,sBAAsB,GAAG,CAAC;AAAA,YACnC,CAAC,QAAQ,4BAA4B,GACnC,WAAW,aAAa;AAAA,YAC1B,CAAC,QAAQ,oBAAoB,GAAG;AAAA,YAChC,CAAC,QAAQ,YAAY,GACnB,YACE,gBAAgB,aACf,sBAAsB;AAAA,YAC3B,CAAC,QAAQ,UAAU,GAAG,WAAW,cAAc;AAAA,UAAA,CAChD;AAAA,UAEA,UAAA,SAAS,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC1B;AAAA,IAAA;AAAA,EAAA;AAKF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,aAAa;AAAA,QACjC,CAAC,QAAQ,YAAY,GAAG,WAAW,aAAa;AAAA,QAChD,CAAC,QAAQ,iBAAiB,GAAG,aAAa,CAAC;AAAA,MAAA,CAC5C;AAAA,MACD,sBAAmB;AAAA,MAElB,UAAW,WAAA;AAAA,IAAA;AAAA,EAAA;AAGlB;"}

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

@@ -5,10 +5,7 @@ const hover = {
   backgroundColor: theme.colors.containerBackgroundHover,
   cursor: "pointer"
 };
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvCalendarCell", {
+const { staticClasses, useClasses } = createClasses("HvCalendarCell", {
   cellContainer: {
     cursor: "pointer",
     border: 0,

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

@@ -1 +1 @@
-{"version":3,"file":"CalendarCell.styles.js","sources":["../../../../../src/components/Calendar/SingleCalendar/CalendarCell.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst hover = {\n  backgroundColor: theme.colors.containerBackgroundHover,\n  cursor: \"pointer\",\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendarCell\", {\n  cellContainer: {\n    cursor: \"pointer\",\n    border: 0,\n    padding: 0,\n    margin: 0,\n    backgroundColor: \"transparent\",\n  },\n  focusSelection: {\n    \"&:hover\": {\n      ...hover,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...hover,\n      ...outlineStyles,\n    },\n  },\n  calendarDate: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    flexDirection: \"column\",\n    textAlign: \"center\",\n    height: \"40px\",\n    width: \"40px\",\n  },\n  calendarDateSelected: {\n    backgroundColor: theme.colors.atmo3,\n    color: theme.colors.secondary,\n    \"&:hover\": {\n      ...hover,\n    },\n  },\n  calendarDateNotInMonth: {\n    color: theme.colors.secondary_60,\n    cursor: \"not-allowed\",\n  },\n  calendarDateInSelectionRange: {\n    backgroundColor: theme.colors.atmo3,\n  },\n  calendarDateDisabled: {\n    color: theme.colors.secondary_60,\n    cursor: \"no-drop\",\n  },\n  startBookend: {\n    borderLeft: `1px solid ${theme.colors.secondary}`,\n  },\n  endBookend: {\n    borderRight: `1px solid ${theme.colors.secondary}`,\n  },\n  dateWrapper: {\n    width: \"40px\",\n    height: \"40px\",\n  },\n  cellsInRange: {\n    \"&:focus\": {\n      outside: \"none\",\n    },\n  },\n  cellsOutsideRange: {\n    \"&:focus\": {\n      outside: \"none\",\n    },\n  },\n});\n"],"names":["hover","backgroundColor","theme","colors","containerBackgroundHover","cursor","staticClasses","useClasses","createClasses","cellContainer","border","padding","margin","focusSelection","outline","outlineStyles","calendarDate","display","justifyContent","flexDirection","textAlign","height","width","calendarDateSelected","atmo3","color","secondary","calendarDateNotInMonth","secondary_60","calendarDateInSelectionRange","calendarDateDisabled","startBookend","borderLeft","endBookend","borderRight","dateWrapper","cellsInRange","outside","cellsOutsideRange"],"mappings":";;;AAMA,MAAMA,QAAQ;AAAA,EACZC,iBAAiBC,MAAMC,OAAOC;AAAAA,EAC9BC,QAAQ;AACV;AAEa,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAc,kBAAkB;AAAA,EAC3EC,eAAe;AAAA,IACbJ,QAAQ;AAAA,IACRK,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRX,iBAAiB;AAAA,EACnB;AAAA,EACAY,gBAAgB;AAAA,IACd,WAAW;AAAA,MACT,GAAGb;AAAAA,IACL;AAAA,IACA,WAAW;AAAA,MACTc,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGd;AAAAA,MACH,GAAGe;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,cAAc;AAAA,IACZC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,eAAe;AAAA,IACfC,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRC,OAAO;AAAA,EACT;AAAA,EACAC,sBAAsB;AAAA,IACpBtB,iBAAiBC,MAAMC,OAAOqB;AAAAA,IAC9BC,OAAOvB,MAAMC,OAAOuB;AAAAA,IACpB,WAAW;AAAA,MACT,GAAG1B;AAAAA,IACL;AAAA,EACF;AAAA,EACA2B,wBAAwB;AAAA,IACtBF,OAAOvB,MAAMC,OAAOyB;AAAAA,IACpBvB,QAAQ;AAAA,EACV;AAAA,EACAwB,8BAA8B;AAAA,IAC5B5B,iBAAiBC,MAAMC,OAAOqB;AAAAA,EAChC;AAAA,EACAM,sBAAsB;AAAA,IACpBL,OAAOvB,MAAMC,OAAOyB;AAAAA,IACpBvB,QAAQ;AAAA,EACV;AAAA,EACA0B,cAAc;AAAA,IACZC,YAAa,aAAY9B,MAAMC,OAAOuB,SAAU;AAAA,EAClD;AAAA,EACAO,YAAY;AAAA,IACVC,aAAc,aAAYhC,MAAMC,OAAOuB,SAAU;AAAA,EACnD;AAAA,EACAS,aAAa;AAAA,IACXb,OAAO;AAAA,IACPD,QAAQ;AAAA,EACV;AAAA,EACAe,cAAc;AAAA,IACZ,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACAC,mBAAmB;AAAA,IACjB,WAAW;AAAA,MACTD,SAAS;AAAA,IACX;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"CalendarCell.styles.js","sources":["../../../../../src/components/Calendar/SingleCalendar/CalendarCell.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst hover = {\n  backgroundColor: theme.colors.containerBackgroundHover,\n  cursor: \"pointer\",\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendarCell\", {\n  cellContainer: {\n    cursor: \"pointer\",\n    border: 0,\n    padding: 0,\n    margin: 0,\n    backgroundColor: \"transparent\",\n  },\n  focusSelection: {\n    \"&:hover\": {\n      ...hover,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...hover,\n      ...outlineStyles,\n    },\n  },\n  calendarDate: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    flexDirection: \"column\",\n    textAlign: \"center\",\n    height: \"40px\",\n    width: \"40px\",\n  },\n  calendarDateSelected: {\n    backgroundColor: theme.colors.atmo3,\n    color: theme.colors.secondary,\n    \"&:hover\": {\n      ...hover,\n    },\n  },\n  calendarDateNotInMonth: {\n    color: theme.colors.secondary_60,\n    cursor: \"not-allowed\",\n  },\n  calendarDateInSelectionRange: {\n    backgroundColor: theme.colors.atmo3,\n  },\n  calendarDateDisabled: {\n    color: theme.colors.secondary_60,\n    cursor: \"no-drop\",\n  },\n  startBookend: {\n    borderLeft: `1px solid ${theme.colors.secondary}`,\n  },\n  endBookend: {\n    borderRight: `1px solid ${theme.colors.secondary}`,\n  },\n  dateWrapper: {\n    width: \"40px\",\n    height: \"40px\",\n  },\n  cellsInRange: {\n    \"&:focus\": {\n      outside: \"none\",\n    },\n  },\n  cellsOutsideRange: {\n    \"&:focus\": {\n      outside: \"none\",\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAMA,MAAM,QAAQ;AAAA,EACZ,iBAAiB,MAAM,OAAO;AAAA,EAC9B,QAAQ;AACV;AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,eAAe;AAAA,IACb,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,iBAAiB;AAAA,EACnB;AAAA,EACA,gBAAgB;AAAA,IACd,WAAW;AAAA,MACT,GAAG;AAAA,IACL;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA,sBAAsB;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,IACpB,WAAW;AAAA,MACT,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,wBAAwB;AAAA,IACtB,OAAO,MAAM,OAAO;AAAA,IACpB,QAAQ;AAAA,EACV;AAAA,EACA,8BAA8B;AAAA,IAC5B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,sBAAsB;AAAA,IACpB,OAAO,MAAM,OAAO;AAAA,IACpB,QAAQ;AAAA,EACV;AAAA,EACA,cAAc;AAAA,IACZ,YAAY,aAAa,MAAM,OAAO,SAAS;AAAA,EACjD;AAAA,EACA,YAAY;AAAA,IACV,aAAa,aAAa,MAAM,OAAO,SAAS;AAAA,EAClD;AAAA,EACA,aAAa;AAAA,IACX,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,cAAc;AAAA,IACZ,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,mBAAmB;AAAA,IACjB,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,EACF;AACF,CAAC;"}

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

@@ -30,10 +30,7 @@ const HvSingleCalendar = ({
   children,
   ...others
 }) => {
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   const today = /* @__PURE__ */ new Date();
   const localValue = value ?? today;
   const [calViewMode, setCalViewMode] = useState("calendar");
@@ -65,7 +62,9 @@ const HvSingleCalendar = ({
   const handleKeyDown = (event) => {
     const el = document?.activeElement;
     const parent = el?.parentElement?.parentElement;
-    const siblings = parent != null ? Array.from(parent.getElementsByClassName(classes.cellContainer)) : [];
+    const siblings = parent != null ? Array.from(
+      parent.getElementsByClassName(classes.cellContainer)
+    ) : [];
     const elIndex = el ? siblings.indexOf(el) : 0;
     if (isKey(event, "Enter")) {
       el.focus();
@@ -82,18 +81,73 @@ const HvSingleCalendar = ({
   };
   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.toString());
+    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 }),
+    /* @__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": HvCalendarHeader?.[0]?.id, children: [
-        listWeekdayNames.map(renderWeekLabel),
-        calModel.dates.map(renderCalendarDate)
-      ] })
+      /* @__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": HvCalendarHeader?.[0]?.id,
+          children: [
+            listWeekdayNames.map(renderWeekLabel),
+            calModel.dates.map(renderCalendarDate)
+          ]
+        }
+      )
     ] }),
-    calViewMode === "monthly" && /* @__PURE__ */ jsx(HvMonthSelector, { id, locale, onChange: onVisibleDateChange, onViewModeChange: setCalViewMode, visibleMonth: visibleMonth || today.getMonth() + 1, rangeMode })
+    calViewMode === "monthly" && /* @__PURE__ */ jsx(
+      HvMonthSelector,
+      {
+        id,
+        locale,
+        onChange: onVisibleDateChange,
+        onViewModeChange: setCalViewMode,
+        visibleMonth: visibleMonth || today.getMonth() + 1,
+        rangeMode
+      }
+    )
   ] }) });
 };
 export {

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 { 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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"}
+{"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":[],"mappings":"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"}

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

@@ -1,9 +1,6 @@
 import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses } from "../../../utils/classes.js";
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvSingleCalendar", {
+const { staticClasses, useClasses } = createClasses("HvSingleCalendar", {
   calendarContainer: {
     backgroundColor: theme.colors.atmo1,
     width: "318px",

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 { 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;"}
+{"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":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,mBAAmB;AAAA,IACjB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO;AAAA,IACP,WAAW;AAAA,IACX,UAAU;AAAA,EACZ;AAAA,EACA,iBAAiB;AAAA,IACf,UAAU;AAAA,IACV,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS,MAAM,QAAQ,IAAI;AAAA,EAC7B;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,IACP,mBAAmB;AAAA,MACjB,iBAAiB,MAAM,OAAO;AAAA,MAC9B,mBAAmB;AAAA,QACjB,YAAY,aAAa,MAAM,OAAO,SAAS;AAAA,QAC/C,iBAAiB,MAAM,OAAO;AAAA,QAC9B,WAAW;AAAA,UACT,aAAa,aAAa,MAAM,OAAO,SAAS;AAAA,QAClD;AAAA,MACF;AAAA,IACF;AAAA,IACA,yBAAyB;AAAA,MACvB,iBAAiB,MAAM,OAAO;AAAA,MAC9B,mBAAmB;AAAA,QACjB,YAAY,aAAa,MAAM,OAAO,SAAS;AAAA,QAC/C,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA,yBAAyB;AAAA,MACvB,iBAAiB,MAAM,OAAO;AAAA,MAC9B,mBAAmB;AAAA,QACjB,aAAa,aAAa,MAAM,OAAO,SAAS;AAAA,MAClD;AAAA,IACF;AAAA,IACA,yCAAyC;AAAA,MACvC,iBAAiB,MAAM,OAAO;AAAA;AAAA,IAChC;AAAA,IACA,8CAA8C;AAAA,MAC5C,iBAAiB,MAAM,OAAO;AAAA;AAAA,IAChC;AAAA,EACF;AAAA,EACA,aAAa;AAAA,IACX,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA,qBAAqB,CAAC;AAAA,EACtB,gBAAgB,CAAC;AAAA,EACjB,iBAAiB,CAAC;AAAA,EAClB,cAAc,CAAC;AAAA,EACf,wBAAwB,CAAC;AAAA,EACzB,sBAAsB,CAAC;AAAA,EACvB,qBAAqB,CAAC;AAAA,EACtB,8BAA8B,CAAC;AAAA,EAC/B,cAAc,CAAC;AAAA,EACf,YAAY,CAAC;AAAA,EACb,cAAc;AAAA,IACZ,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,mBAAmB,CAAC;AAAA,EACpB,eAAe,CAAC;AAClB,CAAC;"}