@hazelcast/ui 1.1.1 → 1.3.0

package/lib/Button.module.scss

@@ -1,6 +1,18 @@
 @use '../styles/constants' as c;
 @use '../styles/helpers' as h;
 
+@mixin buttonColor($color: c.$colorPrimary) {
+  color: $color;
+  background-color: $color;
+  border-color: $color;
+}
+
+@mixin disabledButtonColor {
+  color: c.$colorTextSecondary;
+  background-color: c.$colorNeutral;
+  border-color: c.$colorNeutral;
+}
+
 .button {
   display: inline-block;
   position: relative;
@@ -8,17 +20,18 @@
   cursor: pointer;
   border: none;
   padding: 0;
-  border-radius: c.$borderRadius;
-  height: c.$inputHeight;
+  border-radius: c.$borderRadiusButtonSmall;
+  height: c.$inputHeightSmall;
   max-width: c.$buttonMaxWidth;
+
   // for <a> element
   text-decoration: none;
 
-  @include c.typographyButton;
+  @include c.typographyButton('small');
 
   .outline {
     position: absolute;
-    border-radius: c.$borderRadius;
+    border-radius: c.$borderRadiusButtonSmall;
     pointer-events: none;
     top: 50%;
     left: 50%;
@@ -38,17 +51,6 @@
     }
   }
 
-  &.small {
-    height: c.$inputHeightSmall;
-    border-radius: c.$borderRadiusButtonSmall;
-
-    @include c.typographyButton('small');
-
-    .outline {
-      border-radius: c.$borderRadiusButtonSmall;
-    }
-  }
-
   &:focus,
   &.focus {
     // Do not remove outline for high-contrast modes
@@ -86,97 +88,128 @@
     box-sizing: border-box;
   }
 
-  // Kind === primary
-  &.primary {
-    color: c.$colorNeutralWhite;
-    background-color: c.$colorPrimary;
+  &.color {
+    &Primary {
+      @include buttonColor(c.$colorPrimary);
 
-    &:hover,
-    &.hover,
-    &:focus,
-    &.focus {
-      background-color: c.$colorPrimaryLight;
-    }
+      &:hover,
+      &.hover,
+      &:focus,
+      &.focus {
+        @include buttonColor(c.$colorPrimaryLight);
+      }
 
-    &:active,
-    &.active {
-      background-color: c.$colorPrimaryDark;
-    }
+      &:active,
+      &.active {
+        @include buttonColor(c.$colorPrimaryDark);
+      }
 
-    &:disabled {
-      color: c.$colorTextSecondary;
-      background-color: c.$colorNeutral;
+      &.variantContained {
+        color: c.$colorNeutralWhite;
+      }
+
+      &:disabled {
+        @include disabledButtonColor;
+      }
     }
-  }
 
-  // Kind === secondary
-  &.secondary {
-    color: c.$colorPrimary;
-    background-color: transparent;
-    border: c.$borderWidthButton solid;
-    border-color: c.$colorPrimary;
+    &Secondary {
+      @include buttonColor(c.$colorError);
 
-    .outline {
-      /* Note: We need to take border of 1px into account */
-      /* doiuse-disable calc */
-      width: calc(100% + #{c.$grid} * 2.5);
-      height: calc(100% + #{c.$grid} * 2.5);
-      /* doiuse-enable calc */
+      &:hover,
+      &.hover,
+      &:focus,
+      &.focus {
+        @include buttonColor(c.$colorErrorLight);
+      }
 
-      &.inset {
-        /* doiuse-disable calc */
-        width: calc(100% + #{c.$grid});
-        height: calc(100% + #{c.$grid});
-        /* doiuse-enable calc */
+      &:active,
+      &.active {
+        @include buttonColor(c.$colorErrorDark);
       }
-    }
 
-    &:hover,
-    &.hover,
-    &:focus,
-    &.focus {
-      color: c.$colorPrimaryLight;
-      border-color: c.$colorPrimaryLight;
-    }
+      &.variantContained {
+        color: c.$colorNeutralWhite;
+      }
 
-    &:active,
-    &.active {
-      color: c.$colorPrimaryDark;
-      border-color: c.$colorPrimaryDark;
+      &:disabled {
+        @include disabledButtonColor;
+      }
     }
 
-    &:disabled {
-      color: c.$colorTextSecondary;
-      border-color: c.$colorNeutral;
+    &Warning {
+      @include buttonColor(c.$colorWarning);
+
+      &:hover,
+      &.hover,
+      &:focus,
+      &.focus {
+        @include buttonColor(c.$colorWarningLight);
+      }
+
+      &:active,
+      &.active {
+        @include buttonColor(c.$colorWarningDark);
+      }
+
+      &.variantContained {
+        color: c.$colorText;
+      }
+
+      &:disabled {
+        @include disabledButtonColor;
+      }
     }
   }
 
-  // Kind === danger
-  &.danger {
-    color: c.$colorNeutralWhite;
-    background-color: c.$colorError;
+  &.variant {
+    &Outlined {
+      background: none;
+      border-style: solid;
+      border-width: c.$borderWidth;
 
-    &:hover,
-    &.hover,
-    &:focus,
-    &.focus {
-      background-color: c.$colorErrorLight;
-    }
+      .outline {
+        /* Note: We need to take border of 1px into account */
+        /* doiuse-disable calc */
+        width: calc(100% + #{c.$grid} * 2.5);
+        height: calc(100% + #{c.$grid} * 2.5);
+        /* doiuse-enable calc */
 
-    &:active,
-    &.active {
-      background-color: c.$colorErrorDark;
-    }
+        &.inset {
+          /* doiuse-disable calc */
+          width: calc(100% + #{c.$grid});
+          height: calc(100% + #{c.$grid});
+          /* doiuse-enable calc */
+        }
+      }
 
-    &:disabled {
-      color: c.$colorTextSecondary;
-      background-color: c.$colorNeutral;
+      &:hover,
+      &.hover,
+      &:active,
+      &.active,
+      &:focus,
+      &.focus,
+      &:disabled,
+      &.disabled {
+        background: none;
+      }
     }
-  }
 
-  // Kind === transparent
-  &.transparent {
-    color: inherit;
-    background-color: transparent;
+    &Text {
+      color: inherit;
+      background: none;
+
+      &:hover,
+      &.hover,
+      &:active,
+      &.active,
+      &:focus,
+      &.focus,
+      &:disabled,
+      &.disabled {
+        color: inherit;
+        background: none;
+      }
+    }
   }
 }

package/lib/Calendar/Calendar.d.ts

@@ -3,7 +3,7 @@ import { ReactDatePickerProps } from 'react-datepicker';
 export declare type CalendarSize = 'medium' | 'small';
 export declare type CalendarProps = {
     containerClassName?: string;
-    date: ReactDatePickerProps['selected'];
+    date: Date | null;
     inputLabel: string;
     inputClassName?: string;
     onDateChange: ReactDatePickerProps['onChange'];

package/lib/Calendar/Calendar.js

@@ -1,17 +1,22 @@
 import React from 'react';
 import cn from 'classnames';
+import { createPortal } from 'react-dom';
 import DatePicker from 'react-datepicker';
 import { CalendarInput } from './components/CalendarInput';
 import { CalendarHeader } from './components/CalendarHeader';
 import { CalendarTime } from './components/CalendarTime';
+import { canUseDOM } from '../utils/ssr';
 import styles from './Calendar.module.scss';
 const DATE_FORMAT = 'yyyy-MM-dd';
 const DATE_FORMAT_WITH_TIME = 'yyyy-MM-dd hh:mm a';
-const CalendarPopperContainer = ({ children }) => React.createElement("div", { "data-test": "date-picker-popper-container" }, children);
+const CalendarPopperContainer = ({ children }) => canUseDOM && children
+    ? createPortal(React.createElement("div", { className: styles.popper },
+        React.createElement("div", { "data-test": "date-picker-popper-container", className: "hz-date-picker-popper-container" }, children)), document.body)
+    : null;
 export const Calendar = ({ calendarClassName, className, containerClassName, date, inputLabel, inputClassName, onDateChange, showTimeInput, size = 'medium', ...props }) => (React.createElement("div", { className: cn(styles.container, {
         [styles.time]: showTimeInput,
     }, containerClassName) },
-    React.createElement(DatePicker, Object.assign({}, props, { calendarClassName: cn(styles.calendar, calendarClassName), className: className, 
+    React.createElement(DatePicker, { ...props, calendarClassName: cn(styles.calendar, calendarClassName), className: className, 
         /*
          * Note: The library instantiates the component using React.cloneElement
          * Source: https://github.com/Hacker0x01/react-datepicker/blob/master/src/index.jsx#L926
@@ -22,5 +27,5 @@ export const Calendar = ({ calendarClassName, className, containerClassName, dat
          * 'renderCustomHeader' is the only child component override prop that is not instantiated
          * via React.cloneElement. So at least we can utilise a typed React.Component over React.ReactNode here
          */
-        renderCustomHeader: CalendarHeader, selected: date, showPopperArrow: false, showTimeInput: showTimeInput }))));
+        renderCustomHeader: CalendarHeader, selected: date, showPopperArrow: false, showTimeInput: showTimeInput })));
 //# sourceMappingURL=Calendar.js.map

package/lib/Calendar/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,UAAoC,MAAM,kBAAkB,CAAA;AAEnE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAExD,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAE3C,MAAM,WAAW,GAAG,YAAY,CAAA;AAChC,MAAM,qBAAqB,GAAG,oBAAoB,CAAA;AAElD,MAAM,uBAAuB,GAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,0CAAe,8BAA8B,IAAE,QAAQ,CAAO,CAAA;AAapH,MAAM,CAAC,MAAM,QAAQ,GAAsB,CAAC,EAC1C,iBAAiB,EACjB,SAAS,EACT,kBAAkB,EAClB,IAAI,EACJ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,aAAa,EACb,IAAI,GAAG,QAAQ,EACf,GAAG,KAAK,EACT,EAAE,EAAE,CAAC,CACJ,6BACE,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,SAAS,EAChB;QACE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,aAAa;KAC7B,EACD,kBAAkB,CACnB;IAED,oBAAC,UAAU,oBACL,KAAK,IACT,iBAAiB,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,iBAAiB,CAAC,EACzD,SAAS,EAAE,SAAS;QACpB;;;WAGG;QACH,WAAW,EAAE,oBAAC,aAAa,IAAC,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,GAAI,EACjG,eAAe,EAAE,oBAAC,YAAY,OAAG,EACjC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,WAAW,EAC/D,QAAQ,EAAE,YAAY,EACtB,eAAe,EAAE,uBAAuB;QACxC;;;;WAIG;QACH,kBAAkB,EAAE,cAAc,EAClC,QAAQ,EAAE,IAAI,EACd,eAAe,EAAE,KAAK,EACtB,aAAa,EAAE,aAAa,IAC5B,CACE,CACP,CAAA"}
+{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,UAAoC,MAAM,kBAAkB,CAAA;AAEnE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAE3C,MAAM,WAAW,GAAG,YAAY,CAAA;AAChC,MAAM,qBAAqB,GAAG,oBAAoB,CAAA;AAElD,MAAM,uBAAuB,GAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACnD,SAAS,IAAI,QAAQ;IACnB,CAAC,CAAC,YAAY,CACZ,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;QAC3B,0CAAe,8BAA8B,EAAC,SAAS,EAAC,iCAAiC,IACtF,QAAQ,CACL,CACF,EACJ,QAAQ,CAAC,IAAI,CACd;IACH,CAAC,CAAC,IAAI,CAAA;AAaV,MAAM,CAAC,MAAM,QAAQ,GAAsB,CAAC,EAC1C,iBAAiB,EACjB,SAAS,EACT,kBAAkB,EAClB,IAAI,EACJ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,aAAa,EACb,IAAI,GAAG,QAAQ,EACf,GAAG,KAAK,EACT,EAAE,EAAE,CAAC,CACJ,6BACE,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,SAAS,EAChB;QACE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,aAAa;KAC7B,EACD,kBAAkB,CACnB;IAED,oBAAC,UAAU,OACL,KAAK,EACT,iBAAiB,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,iBAAiB,CAAC,EACzD,SAAS,EAAE,SAAS;QACpB;;;WAGG;QACH,WAAW,EAAE,oBAAC,aAAa,IAAC,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,GAAI,EACjG,eAAe,EAAE,oBAAC,YAAY,OAAG,EACjC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,WAAW,EAC/D,QAAQ,EAAE,YAAY,EACtB,eAAe,EAAE,uBAAuB;QACxC;;;;WAIG;QACH,kBAAkB,EAAE,cAAc,EAClC,QAAQ,EAAE,IAAI,EACd,eAAe,EAAE,KAAK,EACtB,aAAa,EAAE,aAAa,GAC5B,CACE,CACP,CAAA"}

package/lib/Calendar/Calendar.module.scss

@@ -10,163 +10,174 @@ $inputPadding: c.$grid * 3;
  * Rest of styles
  */
 .container {
-  /*
-  * Internal styles override for those that cannot be
-  * overridden using classNames composition
-  */
+  width: $inputMaxWidth;
+  min-width: $inputMinWidth;
+
   :global .react-datepicker-wrapper {
     width: 100%;
   }
 
-  :global .react-datepicker {
-    :global .react-datepicker__header {
-      margin: 0;
-      padding: 0;
-      background-color: c.$colorNeutralLighter;
-      border: none;
-      border-radius: 0;
+  &.time {
+    min-width: $inputMinWidthWithTime;
+  }
+}
 
-      :global .react-datepicker__day-names {
-        margin-bottom: c.$grid;
+.popper {
+  :global(.hz-date-picker-popper-container) {
+    /*
+  * Internal styles override for those that cannot be
+  * overridden using classNames composition
+  */
+    :global .react-datepicker-popper {
+      z-index: c.$zIndex200;
+    }
 
-        :global .react-datepicker__day-name {
-          width: c.$grid * 8;
-          height: c.$grid * 8;
-          text-align: center;
-          vertical-align: middle;
-          line-height: c.$grid * 8 !important;
-          margin: 0;
-          color: c.$colorText;
+    :global .react-datepicker {
+      :global .react-datepicker__header {
+        margin: 0;
+        padding: 0;
+        background-color: c.$colorNeutralLighter;
+        border: none;
+        border-radius: 0;
+
+        :global .react-datepicker__day-names {
+          margin-bottom: c.$grid;
+
+          :global .react-datepicker__day-name {
+            width: c.$grid * 8;
+            height: c.$grid * 8;
+            text-align: center;
+            vertical-align: middle;
+            line-height: c.$grid * 8 !important;
+            margin: 0;
+            color: c.$colorText;
 
-          @include c.typographyBodySmall('bold');
+            @include c.typographyBodySmall('bold');
 
-          &:not(:last-of-type) {
-            margin-right: c.$grid * 2;
+            &:not(:last-of-type) {
+              margin-right: c.$grid * 2;
+            }
           }
         }
       }
-    }
-
-    :global .react-datepicker__month {
-      /*
-       * Note: The calendar part is asymmetrical by design
-       * It's padded by 2 extra px from the left
-       */
-      margin: 0 0 0 (c.$grid * 0.5);
-
-      :global .react-datepicker__week {
-        &:not(:last-of-type) {
-          margin-bottom: c.$grid * 2;
-        }
 
+      :global .react-datepicker__month {
         /*
-         * Note:
-         * We need to use :global override here, as 'renderCustomDay' only allows us to override
-         * the child of this element, which does not allow us to touch the styles properly
-         *
-         * Source styles: https://github.com/Hacker0x01/react-datepicker/blob/master/src/stylesheets/datepicker.scss#L395
+         * Note: The calendar part is asymmetrical by design
+         * It's padded by 2 extra px from the left
          */
-        :global .react-datepicker__day {
-          border-radius: c.$grid;
-          width: c.$grid * 8;
-          height: c.$grid * 8;
-          background-color: c.$colorNeutralWhite;
-          color: c.$colorTextSecondary;
-          text-align: center;
-          vertical-align: middle;
-          line-height: c.$grid * 8 !important;
-          margin: 0;
-
-          // Do not remove outline for high-contrast modes
-          // https://stackoverflow.com/a/52616313
-          outline: transparent solid c.$outlineWidth;
-
-          @include c.typographyBodySmall;
-
-          &--today {
-            @include c.typographyBodySmall('bold');
-          }
+        margin: 0 0 0 (c.$grid * 0.5);
 
-          &--in-selecting-range,
-          &--in-range {
-            // TODO: Improvised colour, consult with @Pawel
-            background-color: c.$colorInfoLight;
-            color: c.$colorNeutralWhite;
-          }
-
-          &--selected {
-            background-color: c.$colorPrimaryLight;
-            color: c.$colorNeutralWhite;
-            // Note: Disable default browser outline, force our only on :focus
-
-            @include c.typographyBodySmall('bold');
-          }
-
-          &--disabled {
-            cursor: default;
-            color: c.$colorNeutral;
-          }
-
-          &:focus {
-            @include h.outlineSimple;
+        :global .react-datepicker__week {
+          &:not(:last-of-type) {
+            margin-bottom: c.$grid * 2;
           }
 
-          &:not(:last-of-type) {
-            margin-right: c.$grid * 2;
+          /*
+           * Note:
+           * We need to use :global override here, as 'renderCustomDay' only allows us to override
+           * the child of this element, which does not allow us to touch the styles properly
+           *
+           * Source styles:
+           * https://github.com/Hacker0x01/react-datepicker/blob/master/src/stylesheets/datepicker.scss#L395
+           */
+          :global .react-datepicker__day {
+            border-radius: c.$grid;
+            width: c.$grid * 8;
+            height: c.$grid * 8;
+            background-color: c.$colorNeutralWhite;
+            color: c.$colorTextSecondary;
+            text-align: center;
+            vertical-align: middle;
+            line-height: c.$grid * 8 !important;
+            margin: 0;
+
+            // Do not remove outline for high-contrast modes
+            // https://stackoverflow.com/a/52616313
+            outline: transparent solid c.$outlineWidth;
+
+            @include c.typographyBodySmall;
+
+            &--today {
+              @include c.typographyBodySmall('bold');
+            }
+
+            &--in-selecting-range,
+            &--in-range {
+              // TODO: Improvised colour, consult with @Pawel
+              background-color: c.$colorInfoLight;
+              color: c.$colorNeutralWhite;
+            }
+
+            &--selected {
+              background-color: c.$colorPrimaryLight;
+              color: c.$colorNeutralWhite;
+
+              // Note: Disable default browser outline, force our only on :focus
+
+              @include c.typographyBodySmall('bold');
+            }
+
+            &--disabled {
+              cursor: default;
+              color: c.$colorNeutral;
+            }
+
+            &:focus {
+              @include h.outlineSimple;
+            }
+
+            &:not(:last-of-type) {
+              margin-right: c.$grid * 2;
+            }
           }
         }
       }
-    }
 
-    :global .react-datepicker__input-time-container {
-      margin: 0;
-      padding: 0;
+      :global .react-datepicker__input-time-container {
+        margin: 0;
+        padding: 0;
 
-      :global .react-datepicker-time__caption {
-        display: none;
-      }
+        :global .react-datepicker-time__caption {
+          display: none;
+        }
 
-      :global .react-datepicker-time__input-container {
-        margin: 0 c.$grid 0 c.$grid * 5;
+        :global .react-datepicker-time__input-container {
+          margin: 0 c.$grid 0 c.$grid * 5;
 
-        :global .react-datepicker-time__input {
-          margin: 0;
+          :global .react-datepicker-time__input {
+            margin: 0;
 
-          input {
-            width: auto;
+            input {
+              width: auto;
+            }
           }
         }
       }
     }
-  }
 
-  width: $inputMaxWidth;
-  min-width: $inputMinWidth;
-
-  &.time {
-    min-width: $inputMinWidthWithTime;
-  }
-
-  .calendar {
-    display: flex;
-    flex-direction: row;
-    border: c.$borderWidth solid c.$colorNeutralLight;
-    background-color: c.$colorNeutralLighter;
-    padding: $inputPadding;
-    box-sizing: border-box;
-
-    .headerContainer {
+    .calendar {
       display: flex;
       flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-      // Note: There is 1.5px in designs - also $separatorWidth is not semantically the best fit
-      margin-bottom: c.$separatorWidth;
+      border: c.$borderWidth solid c.$colorNeutralLight;
+      background-color: c.$colorNeutralLighter;
+      padding: $inputPadding;
+      box-sizing: border-box;
 
-      .headerMonthAndYear {
-        color: c.$colorTextSecondary;
+      .headerContainer {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
 
-        @include c.typographyBodySmall('bold');
+        // Note: There is 1.5px in designs - also $separatorWidth is not semantically the best fit
+        margin-bottom: c.$separatorWidth;
+
+        .headerMonthAndYear {
+          color: c.$colorTextSecondary;
+
+          @include c.typographyBodySmall('bold');
+        }
       }
     }
   }

package/lib/Calendar/components/CalendarHeader.tsx

@@ -0,0 +1,45 @@
+import React, { FC } from 'react'
+import { ReactDatePickerProps } from 'react-datepicker'
+import { ChevronLeft, ChevronRight } from 'react-feather'
+import { format } from 'date-fns'
+
+import { IconButton } from '../../IconButton'
+
+import styles from '../Calendar.module.scss'
+import styleConsts from '../../../styles/constants/export.module.scss'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ExtractFnArgumentType<T> = T extends (arg: infer U) => any ? U : never
+
+/*
+ * Note:
+ * react-datepicker does expose header props type as "renderCustomHeader", however the property is defined
+ * as a render-prop.
+ * This way we can pick the argument type from the render function and convert the property
+ * to use a regular component, rather than a render-prop.
+ *
+ * There is no significant benefit other than readability.
+ */
+export type CalendarHeaderProps = ExtractFnArgumentType<ReactDatePickerProps['renderCustomHeader']>
+
+export const CalendarHeader: FC<CalendarHeaderProps> = ({ date, decreaseMonth, increaseMonth }) => {
+  return (
+    <div data-test="date-picker-header" className={styles.headerContainer}>
+      <IconButton
+        data-test="date-picker-header-icon-previous"
+        icon={ChevronLeft}
+        ariaLabel="Previous month"
+        iconColor={styleConsts.colorPrimary}
+        onClick={decreaseMonth}
+      />
+      <div className={styles.headerMonthAndYear}>{format(date, 'MMMM y')}</div>
+      <IconButton
+        data-test="date-picker-header-icon-next"
+        icon={ChevronRight}
+        ariaLabel="Next month"
+        iconColor={styleConsts.colorPrimary}
+        onClick={increaseMonth}
+      />
+    </div>
+  )
+}

package/lib/Calendar/components/CalendarInput.js

@@ -1,12 +1,12 @@
 import React, { forwardRef } from 'react';
 import { Calendar } from 'react-feather';
 import { TextField } from '../../TextField';
-export const CalendarInputInternal = ({ className, value, onChange, label, textFieldSize, ...props }) => (React.createElement(TextField, Object.assign({}, props, { size: textFieldSize, "data-test": "calendar-input", value: value === null || value === void 0 ? void 0 : value.toString(), onChange: onChange, inputContainerClassName: className, type: "text", name: "calendar-input", label: label, inputTrailingIcon: Calendar, inputTrailingIconLabel: "Calendar Icon" })));
+export const CalendarInputInternal = ({ className, value, onChange, label, textFieldSize, ...props }) => (React.createElement(TextField, { ...props, size: textFieldSize, "data-test": "calendar-input", value: value === null || value === void 0 ? void 0 : value.toString(), onChange: onChange, inputContainerClassName: className, type: "text", name: "calendar-input", label: label, inputTrailingIcon: Calendar, inputTrailingIconLabel: "Calendar Icon" }));
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const CalendarInput = forwardRef((props, ref) => {
     // Note: Cast the "unknown" props to the actual type
     const propsTyped = props;
-    return React.createElement(CalendarInputInternal, Object.assign({}, propsTyped));
+    return React.createElement(CalendarInputInternal, { ...propsTyped });
 });
 CalendarInput.displayName = 'CalendarInput';
 //# sourceMappingURL=CalendarInput.js.map

package/lib/Calendar/components/CalendarInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarInput.js","sourceRoot":"","sources":["../../../src/Calendar/components/CalendarInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAwC,UAAU,EAAE,MAAM,OAAO,CAAA;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAQ3C,MAAM,CAAC,MAAM,qBAAqB,GAAmC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CACvI,oBAAC,SAAS,oBACJ,KAAK,IACT,IAAI,EAAE,aAAa,eACT,gBAAgB,EAC1B,KAAK,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,IACtB,QAAQ,EAAE,QAAQ,EAClB,uBAAuB,EAAE,SAAS,EAClC,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,QAAQ,EAC3B,sBAAsB,EAAC,eAAe,IACtC,CACH,CAAA;AAgBD,6DAA6D;AAC7D,MAAM,CAAC,MAAM,aAAa,GAA2B,UAAU,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC7E,oDAAoD;IACpD,MAAM,UAAU,GAAG,KAAmC,CAAA;IAEtD,OAAO,oBAAC,qBAAqB,oBAAK,UAAU,EAAI,CAAA;AAClD,CAAC,CAAC,CAAA;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAA"}
+{"version":3,"file":"CalendarInput.js","sourceRoot":"","sources":["../../../src/Calendar/components/CalendarInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAwC,UAAU,EAAE,MAAM,OAAO,CAAA;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAQ3C,MAAM,CAAC,MAAM,qBAAqB,GAAmC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CACvI,oBAAC,SAAS,OACJ,KAAK,EACT,IAAI,EAAE,aAAa,eACT,gBAAgB,EAC1B,KAAK,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,EAAE,EACxB,QAAQ,EAAE,QAAQ,EAClB,uBAAuB,EAAE,SAAS,EAClC,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,QAAQ,EAC3B,sBAAsB,EAAC,eAAe,GACtC,CACH,CAAA;AAgBD,6DAA6D;AAC7D,MAAM,CAAC,MAAM,aAAa,GAA2B,UAAU,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC7E,oDAAoD;IACpD,MAAM,UAAU,GAAG,KAAmC,CAAA;IAEtD,OAAO,oBAAC,qBAAqB,OAAK,UAAU,GAAI,CAAA;AAClD,CAAC,CAAC,CAAA;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAA"}