@capillarytech/blaze-ui 6.4.0 → 6.5.0

package/CapMobileDateRangePicker/styles.scss

@@ -1,225 +1,221 @@
-@mixin highlight-inputbox($color) {
-  border: 1px solid $color;
-  border-radius: 0.285rem;
-  height: 32px;
+@import '../styles/_variables';
+
+$clsPrefix: 'cap-mobile-date-range-picker';
+
+$base-date-color: $cap-secondary-base;
+$base-date-color-range: $cap-pale-grey;
+$compare-date-color: $cap-pink;
+$compare-date-color-range: rgba($cap-pink, 0.1);
+
+@mixin cta-button {
+  color: $FONT_COLOR_05 !important;
+  cursor: pointer !important;
+  font-size: $FONT_SIZE_M !important;
+}
+
+@mixin date-range-colors($color, $range-color) {
+  .ant-picker-cell-range-start,
+  .ant-picker-cell-range-end {
+    .ant-picker-cell-inner {
+      background-color: $color;
+    }
+
+    &::before {
+      background-color: $range-color;
+    }
+  }
+
+  .ant-picker-cell-in-range::before {
+    background-color: $range-color;
+  }
+
+  .ant-picker-cell-today {
+    .ant-picker-cell-inner::before {
+      border-color: $color;
+    }
+  }
 }
-$modal-content-height: 38vh;
-$daypicker-width: 80vw;
-$base-date-color: rgb(36, 102, 234);
-$base-date-color-range: rgb(233, 240, 254);
-$compare-date-color: rgb(229, 31, 163);
-$compare-date-color-range: rgba(229, 31, 163, 0.1);  
-.mobile-view{
-  .mobile-date-range-picker-modal{
-    .modal-footer {
+
+.#{$clsPrefix} {
+  //modal overrides
+  &-modal {
+    &-header {
+      margin-bottom: $CAP_SPACE_12 !important;
+    }
+
+    &-footer {
       display: flex;
       justify-content: flex-end;
-      padding-right: 10px;
-    }
-    .ant-modal-content {
-      .ant-modal-body {
-        .cap-divider-v2 {
-          margin-top: 22px;
-          margin-bottom: 12px;
-        }
-        .compare-mobile-date-picker {
-          .datepicker {
-            .datepicker-wheel {
-              background: $compare-date-color-range;
-            }
-            .datepicker-scroll>li.selected {
-              color: $compare-date-color;
-            }
-          }
-        }
-        .datepicker {
-          position: static;
-          .datepicker-content {
-            background: #fff;
-            padding: 0.75em 0.25em;
-          }
-          .datepicker-viewport {
-            height: calc(#{$modal-content-height} - 12px);
-          }
-          .datepicker-scroll>li {
-            font-family: 'Roboto', sans-serif;
-            font-size: 14px;
-          }
-          .datepicker-scroll>li.selected {
-            color: $base-date-color;
-          }
-          .datepicker-wheel {
-            border-top: 0;
-            border-bottom: 0;
-            background: $base-date-color-range;
-          }
-        }
+      width: inherit;
+      padding: 1.714rem;
+
+      &-cancel-button {
+        @include cta-button;
+
+        margin-right: $CAP_SPACE_24;
       }
-      .ant-modal-footer {
-        padding-top: 1.714rem;
+
+      &-done-button {
+        @include cta-button;
       }
     }
   }
-  .mobile-dateRange-picker-inputs{
+
+  &-divider {
+    margin: $CAP_SPACE_12 0;
+  }
+
+  //read-only inputs overrides
+  &-inputs {
     display: flex;
     align-items: center;
-    .cap-column-v2.ant-col-11 {
-      width: 45%;
-    }
-    .cap-column-v2.ant-col-2 {
-      width: 2%;
-    }
-    input{
-      margin-top: 5px;
-      max-width: 100px;
-    }
-    .focused .ant-input{
-      border: 1px solid #091e42;
-    }
-    .ant-input[disabled]{
-      background-color: transparent;
-      color: rgb(9, 30, 66);
-      -webkit-text-fill-color: rgb(9, 30, 66) !important;
-    }
-    .placeholder-text{
-      font-size: 12px;
-      color: rgb(94, 108, 132);
-    }
-    .date-range-hyphen{
-      margin-left: 10px;
-      margin-right: 10px;
-    }
-    .vertical-align{
-      margin-top: 28px;
-    }
-    .ant-input-affix-wrapper .ant-input:not(:last-child){
-      padding-right : 0;
+
+    &-date-range-hyphen {
+      margin-inline: $CAP_SPACE_08;
     }
-  }
-  .calender-only {
-    // height: $modal-content-height ;
-    margin-top: 8px;
-    .DayPicker_transitionContainer {
-      // height: $modal-content-height ;
-      max-width: $daypicker-width;
+
+    &-date-range-hyphen-vertical-align {
+      margin-top: 1rem;
     }
-    .DayPicker {
-      max-width: $daypicker-width;
+
+    &-label {
+      margin-bottom: $CAP_SPACE_04;
     }
-    .DateRangePicker {
-      .ant-select-dropdown.cap-select-v2-dropdown {
-        .ant-select-dropdown-menu {
-          li {
-            font-size: 14px;
-            padding: 4px 12px;
-            height: 36px;
-            line-height: 30px;
-          }
+
+    &-focused {
+      :global {
+        .ant-input {
+          border: 1px solid $CAP_G01;
         }
       }
     }
-  }
-  .DateRangePicker_picker {
-    .year-selector .cap-select-v2 .ant-select-selection {
-      height: 28px;
-      .ant-select-selection__rendered {
-        line-height: 26px;
-      }
-      .ant-select-selection-selected-value {
-        font-size: 14px;
+
+    :global {
+      .ant-input {
+        font-size: $FONT_SIZE_S;
       }
     }
   }
-  .calender-only.compare-mobile-date-range-picker .DateRangePicker_picker {
-    .CalendarDay__selected .calendar-day-content span {
-      background: $compare-date-color;
-    }
-    .CalendarDay__selected_span .calendar-day-content, .DateRangePicker_picker .CalendarDay__hovered_span .calendar-day-content {
-      background: $compare-date-color-range;
-    }
-    .CalendarDay__selected_start .calendar-day-content {
-      background: linear-gradient(90deg, #ffffff 50%, $compare-date-color-range 50%);
-    }
-    .CalendarDay__selected_end .calendar-day-content {
-      background: linear-gradient(90deg, $compare-date-color-range 50%, #ffffff 50%);
-    }
-  }
-  .control-section{
-    .action-item{
-      padding-top: 8%;
-      margin-left: -6%;
-      width: 16%;
-      text-align: right;
-    }
-    .cap-column-v2.ant-col-11 {
-      width: 40%;
-      min-width: 100px;
-    }
-    .cap-column-v2.ant-col-2 {
-      width: 2%;
-    }
+
+  //CTA links overrides
+  &-reset-button {
+    @include cta-button;
+
+    margin-top: 1rem;
   }
-  .toggle-text{
+
+  &-switch-label {
+    @include cta-button;
+
     text-align: right;
     margin: 0;
   }
-  .DayPicker_weekHeader, .CalendarMonth {
-    padding: 0 6px !important;
-  }
-  .CalendarMonth {
-    .CalendarMonth_caption {
-      padding: 6px 0 10px;
-      line-height: 20px;
-      font-weight: 400;
-      font-size: 14px;
-      color: rgb(9, 30, 66);
-      .month-name {
-        padding-top: 3px;
-      }
-      .ant-select-lg {
-        width: 75px;
+
+  //calender-only overrides for date-range-picker
+  &-calender-only {
+    :global {
+      .ant-picker-dropdown {
+        position: static;
+        width: 100%;
+
+        .ant-picker-panel-container {
+          border: none;
+          box-shadow: none;
+          background: transparent;
+          width: inherit;
+
+          .ant-picker-panel-layout {
+            width: inherit;
+
+            > div:first-of-type {
+              width: inherit;
+            }
+
+            .ant-picker-panels {
+              width: inherit;
+
+              .ant-picker-panel {
+                width: inherit;
+
+                .ant-picker-date-panel {
+                  width: inherit;
+
+                  @include date-range-colors($base-date-color, $base-date-color-range);
+                }
+
+                .ant-picker-header-view {
+                  pointer-events: none;
+                }
+              }
+            }
+          }
+        }
       }
     }
   }
-  .DateRangePicker_picker {
-    left: -16px !important;
-    .calendar-day-content{
-      padding: 0 5px;
-    }  
-    .DayPicker__withBorder{
-      box-shadow: none;
-    }
-    .month-nav-btn {
-      top: 6px;
-      margin-left: -2px;
-      margin-right: 14px;
-    }
-    .CalendarDay__selected_span .calendar-day-content, .DateRangePicker_picker .CalendarDay__hovered_span .calendar-day-content {
-      background: rgb(233, 240, 254),;
-    }
-    .CalendarDay__selected_start .calendar-day-content {
-      background: linear-gradient(90deg, #ffffff 50%, rgb(233, 240, 254), 50%);
-    }
-    .CalendarDay__selected_end .calendar-day-content {
-      background: linear-gradient(90deg, rgb(233, 240, 254), 50%, #ffffff 50%);
+
+  //scroller-datepicker overrides for react-mobile-datepicker
+  &-scroller-datepicker {
+    margin-top: $CAP_SPACE_16;
+
+    :global {
+      .datepicker {
+        position: static;
+        background: transparent;
+
+        .datepicker-content {
+          background: transparent;
+          padding: 0.75em 0.25em;
+        }
+
+        .datepicker-scroll > li {
+          font-family: $FONT_FAMILY;
+          font-size: $FONT_SIZE_M;
+        }
+
+        .datepicker-scroll > li.selected {
+          color: $base-date-color;
+        }
+
+        .datepicker-wheel {
+          border-top: 0;
+          border-bottom: 0;
+          background: $base-date-color-range;
+        }
+      }
     }
   }
-}
 
-@media screen and (max-height: 930px) {
-  .calender-only {
-    height: 32vh !important;
-    .DayPicker_transitionContainer {
-      height: 32vh !important;
+  //different color while comparing
+  &-compare-mobile-date-picker {
+    :global {
+      .datepicker {
+        .datepicker-scroll > li.selected {
+          color: $compare-date-color;
+        }
+
+        .datepicker-wheel {
+          background: $compare-date-color-range;
+        }
+      }
     }
   }
-}
 
-@media screen and (max-height: 854px) {
-  .calender-only {
-    height: 38.5vh !important;
-    .DayPicker_transitionContainer {
-      height: 38.5vh !important;
+  &-compare-mobile-date-range-picker {
+    :global {
+      .ant-picker-dropdown {
+        .ant-picker-panel-container {
+          .ant-picker-panel-layout {
+            .ant-picker-panels {
+              .ant-picker-panel {
+                .ant-picker-date-panel {
+                  @include date-range-colors($compare-date-color, $compare-date-color-range);
+                }
+              }
+            }
+          }
+        }
+      }
     }
   }
-}
+}

package/CapMobileDateRangePicker/tests/CapMobileDateRangePicker.mockData.d.ts

@@ -0,0 +1,18 @@
+import moment from 'moment';
+import type { CapMobileDateRangePickerProps } from '../types';
+export declare const mockDates: {
+    today: moment.Moment;
+    tomorrow: moment.Moment;
+    yesterday: moment.Moment;
+    nextWeek: moment.Moment;
+    lastWeek: moment.Moment;
+    minDate: moment.Moment;
+    maxDate: moment.Moment;
+    startDate: moment.Moment;
+    endDate: moment.Moment;
+    sameDate: moment.Moment;
+    beforeMin: moment.Moment;
+    afterMax: moment.Moment;
+};
+export declare const mockProps: Record<string, Partial<CapMobileDateRangePickerProps>>;
+//# sourceMappingURL=CapMobileDateRangePicker.mockData.d.ts.map

package/CapMobileDateRangePicker/tests/CapMobileDateRangePicker.mockData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CapMobileDateRangePicker.mockData.d.ts","sourceRoot":"","sources":["../../../components/CapMobileDateRangePicker/tests/CapMobileDateRangePicker.mockData.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,QAAQ,CAAC;AAE5B,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAC;AAE9D,eAAO,MAAM,SAAS;;;;;;;;;;;;;CAarB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,6BAA6B,CAAC,CAoD5E,CAAC"}

package/CapMobileDateRangePicker/types.d.ts

@@ -0,0 +1,95 @@
+import type { Moment } from 'moment';
+import type { IntlShape } from 'react-intl';
+export type { IntlShape };
+export type FocusedInputType = 'startDate' | 'endDate';
+export interface DateConfigItem {
+    format: string | ((value: Date) => string);
+    caption: string;
+    step: number;
+}
+export interface DateConfig {
+    date: DateConfigItem;
+    month: DateConfigItem;
+    year: DateConfigItem;
+}
+export interface DateRange {
+    start: Moment;
+    end: Moment;
+}
+export interface CapMobileDateRangePickerProps {
+    intl: IntlShape;
+    /**
+     * Text for the cancel action in the modal footer
+     */
+    cancelText?: string;
+    /**
+     * Text for the reset action
+     */
+    resetText?: string;
+    /**
+     * Display format for dates in the input fields
+     */
+    dateDisplayFormat?: string;
+    /**
+     * Text for the OK button
+     */
+    yesText?: string;
+    /**
+     * Text for the cancel button
+     */
+    noText?: string;
+    /**
+     * Text for the done action in the modal footer
+     */
+    doneText?: string;
+    /**
+     * Start date of the range (moment object)
+     */
+    startDate: Moment;
+    /**
+     * End date of the range (moment object)
+     */
+    endDate: Moment;
+    /**
+     * Minimum selectable date (moment object)
+     */
+    minDate: Moment;
+    /**
+     * Maximum selectable date (moment object)
+     */
+    maxDate: Moment;
+    /**
+     * Type of date picker ('compare' enables compare styling)
+     */
+    type?: string;
+    /**
+     * Minimum number of nights for range selection
+     */
+    minimumNights?: number;
+    /**
+     * Callback when the user confirms the date range
+     */
+    onDone: (dateRange: DateRange) => void;
+    /**
+     * Text for switching to scroller view
+     */
+    switchBackToScrollerText?: string;
+    /**
+     * Text for switching to calendar view
+     */
+    switchBackToCalenderText?: string;
+    /**
+     * Title of the modal
+     */
+    title?: string;
+}
+export interface DateRangeInputSelectorsProps {
+    focusedInput: string;
+    startDate: Moment;
+    endDate: Moment;
+    dateDisplayFormat: string;
+    handleStartDateClick: () => void;
+    handleEndDateClick: () => void;
+    showPlaceholders?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/CapMobileDateRangePicker/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapMobileDateRangePicker/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AACrC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE5C,YAAY,EAAE,SAAS,EAAE,CAAC;AAE1B,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,SAAS,CAAC;AAEvD,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,IAAI,KAAK,MAAM,CAAC,CAAC;IAC3C,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,cAAc,CAAC;IACtB,IAAI,EAAE,cAAc,CAAC;CACtB;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,6BAA6B;IAC5C,IAAI,EAAE,SAAS,CAAC;IAEhB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAElC;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAElC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,4BAA4B;IAC3C,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,oBAAoB,EAAE,MAAM,IAAI,CAAC;IACjC,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B"}

package/CapMobileDateRangePicker/utils.d.ts

@@ -0,0 +1,3 @@
+import moment from 'moment';
+export declare const checkIfSameDate: (d1: moment.Moment, d2: moment.Moment) => boolean;
+//# sourceMappingURL=utils.d.ts.map

package/CapMobileDateRangePicker/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../components/CapMobileDateRangePicker/utils.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,QAAQ,CAAC;AAI5B,eAAO,MAAM,eAAe,GAAI,IAAI,MAAM,CAAC,MAAM,EAAE,IAAI,MAAM,CAAC,MAAM,YACe,CAAC"}

package/CapMobileDateRangePicker/utils.js

@@ -0,0 +1,5 @@
+import { FORMAT_TOKENS } from "../utils/dayjs.js";
+const checkIfSameDate = (d1, d2) => d1.format(FORMAT_TOKENS.ISO_8601_DATE) === d2.format(FORMAT_TOKENS.ISO_8601_DATE);
+export {
+  checkIfSameDate
+};

package/CapPopoverTree/index.d.ts

@@ -1,43 +1,6 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import './styles.scss';
-export declare const CapPopoverTree: {
-    (props: any): import("react/jsx-runtime").JSX.Element;
-    defaultProps: {
-        trigger: string;
-        placement: string;
-        showIcon: boolean;
-        blockNode: boolean;
-        defaultExpandAll: boolean;
-        isLoadingData: boolean;
-        switcherIcon: import("react/jsx-runtime").JSX.Element;
-        renderOnKeyChange: boolean;
-    };
-    propTypes: {
-        trigger: PropTypes.Requireable<string>;
-        placement: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-        defaultExpandAll: PropTypes.Requireable<boolean>;
-        overlayClassName: PropTypes.Requireable<string>;
-        showIcon: PropTypes.Requireable<boolean>;
-        blockNode: PropTypes.Requireable<boolean>;
-        propsTreeData: PropTypes.Requireable<any[]>;
-        switcherIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        TriggerComponent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        componentText: PropTypes.Requireable<string>;
-        triggerProps: PropTypes.Requireable<object>;
-        isTriggerDisabled: PropTypes.Requireable<boolean>;
-        triggerDisabledText: PropTypes.Requireable<string>;
-        tooltipText: PropTypes.Requireable<string>;
-        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-        propsSelectedKey: PropTypes.Requireable<any[]>;
-        isLoadingData: PropTypes.Requireable<boolean>;
-        loadingTip: PropTypes.Requireable<string>;
-        searchPlaceholder: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        emptyDataMessage: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        renderOnKeyChange: PropTypes.Requireable<boolean>;
-    };
-};
-declare const _default: React.ComponentType<Omit<any, "intl">>;
+import type { CapPopoverTreeProps } from './types';
+export declare const CapPopoverTree: (props: CapPopoverTreeProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: React.ComponentType<Omit<CapPopoverTreeProps & import("react-intl").WrappedComponentProps, "intl">>;
 export default _default;
 //# sourceMappingURL=index.d.ts.map

package/CapPopoverTree/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapPopoverTree/index.tsx"],"names":[],"mappings":"AAEA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,KAA8B,MAAM,OAAO,CAAC;AAWnD,OAAO,eAAe,CAAC;AAMvB,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0M1B,CAAC;;AAsCF,wBAAoE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapPopoverTree/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAanD,OAAO,KAAK,EAAE,mBAAmB,EAAgB,MAAM,SAAS,CAAC;AAKjE,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,4CA8OxD,CAAC;;AAEF,wBAEG"}