@hhgtech/hhg-components 1.29.361 → 1.29.362-beta-2

package/build/{index-d8b3d33a.js → index-3b8276cc.js}

@@ -1,46 +1,47 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-46c06add.js');
+var tslib_es6 = require('./tslib.es6-94aa0f76.js');
 var React = require('react');
-var index$5 = require('./index-2606e965.js');
+var index$5 = require('./index-d5238da3.js');
 var core = require('@mantine/core');
 require('@mantine/dates');
-var index$7 = require('./index-9977674c.js');
-require('./index-1b9b42da.js');
-var index$a = require('./index-cd3fb76b.js');
-require('./useMantineLocale-2114adc5.js');
-var index$3 = require('./index-7230a09a.js');
-var index$e = require('./index-65132afa.js');
-require('./index.styles-e5ced70d.js');
-require('./translationsContext-1c7e3b11.js');
+var index$7 = require('./index-f265793c.js');
+require('./index-4c1dd52a.js');
+var index$a = require('./index-6f7c3612.js');
+require('./useMantineLocale-e957a29a.js');
+var index$3 = require('./index-54e3b699.js');
+var index$e = require('./index-4ffb3638.js');
+require('./index.styles-4a986730.js');
+require('./translationsContext-b2f1d78c.js');
 require('@mantine/hooks');
-var utils = require('./utils-06faab5a.js');
-require('./other-27ab7df9.js');
-require('./index-1224b5ae.js');
-var index$2 = require('./index-698cec71.js');
+var utils = require('./utils-534b1e9b.js');
+require('./other-9ac11fe7.js');
+require('./index-80e99032.js');
+var index$2 = require('./index-1d8b8c26.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var index$4 = require('./index-5a0fac03.js');
-var index$6 = require('./index-9986db2c.js');
+var index$4 = require('./index-b60eb3f4.js');
+var dateFns = require('date-fns');
+var DayPickerInput = require('react-day-picker/DayPickerInput');
+var index$6 = require('./index-f50d84b1.js');
 var throttle = require('lodash/throttle');
 var parse = require('html-react-parser');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 var constantsIsProduction = require('./constantsIsProduction.js');
-var dateFns = require('date-fns');
-var useOutsideClick = require('./useOutsideClick-2fb8d081.js');
+var useOutsideClick = require('./useOutsideClick-b4989226.js');
 var enUS = require('date-fns/locale/en-US');
 var id = require('date-fns/locale/id');
 var vi = require('date-fns/locale/vi');
 var zhTW = require('date-fns/locale/zh-TW');
-var index$9 = require('./index-14f9169e.js');
-var useScreenSize = require('./useScreenSize-8cf53ce7.js');
-var index$8 = require('./index-9c4a1855.js');
-var index$b = require('./index-bd496d8c.js');
+var index$9 = require('./index-6e4a438d.js');
+var useScreenSize = require('./useScreenSize-f452c1dc.js');
+var index$8 = require('./index-1ac10c6b.js');
+var index$b = require('./index-cab280f4.js');
 var miscGetSocialList = require('./miscGetSocialList.js');
-var index$d = require('./index-6b55279a.js');
-var index$c = require('./index-634558df.js');
+var index$d = require('./index-c649a78a.js');
+var index$c = require('./index-2b37d33b.js');
 var uuid = require('uuid');
-var Locale = require('./Locale-bbd9f39e.js');
+var Locale = require('./Locale-49a6c721.js');
 var arrow = require('@hhgtech/icons/arrow');
 var other = require('@hhgtech/icons/other');
 var Lottie = require('lottie-light-react');
@@ -49,6 +50,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
+var DayPickerInput__default = /*#__PURE__*/_interopDefault(DayPickerInput);
 var throttle__default = /*#__PURE__*/_interopDefault(throttle);
 var parse__default = /*#__PURE__*/_interopDefault(parse);
 var enUS__default = /*#__PURE__*/_interopDefault(enUS);
@@ -152,6 +154,603 @@ const CheckboxGroup = ({ name, values = [], onChanges, options = [], className,
     return (React__default["default"].createElement(StyledCheckboxGroup, { className: className, "data-type": type, "data-is-rectangle": isRectangle || undefined }, options.map((option, index) => (React__default["default"].createElement(index$4.Checkbox, { label: option.label, name: name, key: `${index}-${option.value}`, checked: values.includes(option.value), value: option.value, isDisabled: isDisabled || option.disabled, onChange: !isDisabled && onChange, isRectangle: isRectangle })))));
 };
 
+const MONTHS_TRANSLATION = {
+    'vi-VN': [
+        'Tháng 1',
+        'Tháng 2',
+        'Tháng 3',
+        'Tháng 4',
+        'Tháng 5',
+        'Tháng 6',
+        'Tháng 7',
+        'Tháng 8',
+        'Tháng 9',
+        'Tháng 10',
+        'Tháng 11',
+        'Tháng 12',
+    ],
+    'id-ID': [
+        'Januari',
+        'Februari',
+        'Maret',
+        'April',
+        'Mei',
+        'Juni',
+        'Juli',
+        'Agustus',
+        'September',
+        'Oktober',
+        'November',
+        'Desember',
+    ],
+    'ms-MY': [
+        'Januari',
+        'Februari',
+        'Mac',
+        'April',
+        'Mei',
+        'Jun',
+        'Julai',
+        'Ogos',
+        'September',
+        'Oktober',
+        'November',
+        'Disember',
+    ],
+    'km-KH': [
+        'មករា',
+        'ខែកុម្ភៈ',
+        'មីនា',
+        'ខែមេសា',
+        'ឧសភា',
+        'មិថុនា',
+        'ខែកក្កដា',
+        'សីហា',
+        'ខែកញ្ញា',
+        'តុលា',
+        'វិច្ឆិកា',
+        'ធ្នូ',
+    ],
+    'en-PH': [
+        'January',
+        'February',
+        'March',
+        'April',
+        'May',
+        'June',
+        'July',
+        'August',
+        'September',
+        'October',
+        'November',
+        'December',
+    ],
+    'th-TH': [
+        'มกราคม',
+        'กุมภาพันธ์',
+        'มีนาคม',
+        'เมษายน',
+        'อาจ',
+        'มิถุนายน',
+        'กรกฎาคม',
+        'สิงหาคม',
+        'กันยายน',
+        'ตุลาคม',
+        'พฤศจิกายน',
+        'ธันวาคม',
+    ],
+    'my-MM': [
+        'ဇန်နဝါရီလ',
+        'ဖေဖော်ဝါရီလ',
+        'မတ်လ',
+        'ပြီလ',
+        'မေလ',
+        'ဇွန',
+        'ဇူလိုင်လ',
+        'သြဂုတ်လ',
+        'စက်တင်ဘာ',
+        'အောက်တိုဘာ',
+        'နိုဝင်ဘာ',
+        'ဒီဇင်ဘာ',
+    ],
+    'zh-TW': [
+        '一月',
+        '二月',
+        '三月',
+        '四月',
+        '五月',
+        '六月',
+        '七月',
+        '八月',
+        '九月',
+        '十月',
+        '十一月',
+        '十二月',
+    ],
+    'hi-IN': [
+        'जनवरी',
+        'फ़रवरी',
+        'जुलूस',
+        'अप्रैल',
+        'मई',
+        'जून',
+        'जुलाई',
+        'अगस्त',
+        'सितंबर',
+        'अक्टूबर',
+        'नवंबर',
+        'दिसंबर',
+    ],
+};
+
+const StyledPickerContainer = styled__default["default"].div `
+  .pickerContainer {
+    position: relative;
+    padding-top: 0;
+    & > div > svg {
+      position: absolute;
+      top: 36px;
+      right: 16px;
+      cursor: pointer;
+    }
+
+    & > :not(:first-child) {
+      position: absolute;
+      z-index: 2;
+      width: 100%;
+    }
+  }
+
+  &[data-is-static] .pickerOverlayWrapper {
+    position: static;
+    max-width: 250px;
+    aspect-ratio: 1 / 1;
+
+    > .pickerOverlay {
+      padding: 1rem;
+    }
+  }
+
+  .pickerOverlayWrapper {
+    min-width: 320px;
+  }
+
+  &[data-align-right='true'] {
+    .pickerOverlayWrapper {
+      right: 0;
+    }
+  }
+
+  .pickerOverlay {
+    margin-top: 6px;
+    background: white;
+    border-radius: ${miscTheme.theme.borderRadius};
+    box-shadow: 0px 6px 12px rgba(67, 86, 100, 0.2);
+  }
+
+  .picker {
+    width: 100%;
+  }
+
+  .react-datepicker-popper {
+    .react-datepicker {
+      display: flex;
+      width: 340px;
+      height: 305px;
+      align-items: center;
+      justify-content: center;
+      border: none;
+      box-shadow: (-1px 1px 2px rgba(67, 70, 74, 0.0001)),
+        (-2px 2px 5px rgba(67, 86, 100, 0.123689));
+    }
+
+    .svg {
+      cursor: pointer;
+      stroke: ${miscTheme.theme.colors.gray800};
+    }
+    .react-datepicker__day {
+      width: 40px;
+    }
+
+    .react-datepicker__header {
+      border-bottom: 0;
+      background-color: white;
+    }
+
+    .react-datepicker__day--outside-month {
+      color: #e9e9e9;
+    }
+
+    .react-datepicker__day {
+      font-weight: ${miscTheme.theme.sizes.fwBold};
+    }
+
+    .react-datepicker__day--selected,
+    .react-datepicker__day--today,
+    .react-datepicker__day--selected:hover,
+    .react-datepicker__day--keyboard-selected {
+      width: 32px;
+      height: 30px;
+      margin: 4px;
+      margin-bottom: -2px;
+      background: ${miscTheme.theme.colors.primaryBase};
+      border-radius: 50%;
+    }
+
+    .react-datepicker__day-name {
+      width: 40px;
+    }
+
+    .react-datepicker__triangle {
+      display: none;
+    }
+
+    .react-datepicker__header.react-datepicker__header--custom {
+      svg {
+        stroke: #262626;
+      }
+      select {
+        background: ${miscTheme.theme.colors.neutral100};
+        text-align: center;
+        &:not(:last-child) {
+          padding: 8px 10px;
+          margin-right: 15px;
+          border-radius: ${miscTheme.theme.borderRadius};
+        }
+      }
+    }
+  }
+
+  /* DayPicker styles */
+
+  .DayPicker {
+    display: inline-block;
+    font-size: 1rem;
+  }
+
+  .DayPicker-wrapper {
+    position: relative;
+
+    flex-direction: row;
+    padding-bottom: 1em;
+
+    -webkit-user-select: none;
+
+    -moz-user-select: none;
+
+    -ms-user-select: none;
+
+    user-select: none;
+  }
+
+  .DayPicker-Months {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .DayPicker-Month {
+    display: table;
+    margin: 0 16px;
+    margin-top: 16px;
+    border-collapse: collapse;
+    border-spacing: 0;
+
+    -webkit-user-select: none;
+
+    -moz-user-select: none;
+
+    -ms-user-select: none;
+
+    user-select: none;
+  }
+
+  .DayPicker-NavBar {
+    position: absolute;
+    top: 16px;
+    left: 0;
+    display: flex;
+    width: 100%;
+    height: 0;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+  }
+
+  .DayPicker-NavButton {
+    width: 24px;
+    height: 24px;
+    margin-bottom: -47px;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 16px 16px;
+    color: #8b9898;
+    cursor: pointer;
+  }
+
+  .DayPicker-NavButton:hover {
+    opacity: 0.8;
+  }
+
+  .DayPicker-NavButton--prev {
+    //left: 2px;
+    background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 9L1 5L5 1' stroke='%23262626' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  }
+
+  .DayPicker-NavButton--next {
+    //right: 2px;
+    background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L1 9' stroke='%23262626' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  }
+
+  .DayPicker-NavButton--interactionDisabled {
+    display: none;
+  }
+
+  .DayPicker-Caption {
+    display: table-caption;
+    width: 100%;
+    height: 46px;
+    padding: 0 32px;
+  }
+
+  .DayPicker-Caption select {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    text-align: left;
+  }
+
+  .DayPicker-Weekdays {
+    display: table-header-group;
+    margin-top: 1em;
+  }
+
+  .DayPicker-WeekdaysRow {
+    display: table-row;
+  }
+
+  .DayPicker-Weekday {
+    display: table-cell;
+    padding: 0.5em;
+    color: #8b9898;
+    font-size: 0.875em;
+    text-align: center;
+  }
+
+  .DayPicker-Weekday abbr[title] {
+    border-bottom: none;
+    text-decoration: none;
+  }
+
+  .DayPicker-Body {
+    display: table-row-group;
+  }
+
+  .DayPicker-Week {
+    display: table-row;
+  }
+
+  .DayPicker-Day {
+    display: table-cell;
+
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    cursor: pointer;
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  .DayPicker-WeekNumber {
+    display: table-cell;
+    min-width: 1em;
+    padding: 0.5em;
+    border-right: 1px solid #eaecec;
+    color: #8b9898;
+    cursor: pointer;
+    font-size: 0.75em;
+    text-align: right;
+    vertical-align: middle;
+  }
+
+  .DayPicker--interactionDisabled .DayPicker-Day {
+    cursor: default;
+  }
+
+  .DayPicker-Footer {
+    padding-top: 0.5em;
+  }
+
+  .DayPicker-TodayButton {
+    border: none;
+    background-color: transparent;
+    background-image: none;
+    box-shadow: none;
+    color: #4a90e2;
+    cursor: pointer;
+    font-size: 0.875em;
+  }
+
+  /* Default modifiers */
+
+  .DayPicker-Day--today {
+    color: #d0021b;
+    font-weight: 700;
+  }
+
+  .DayPicker-Day--outside {
+    color: #8b9898;
+    cursor: default;
+  }
+
+  .DayPicker-Day--disabled {
+    color: #dce0e0;
+    cursor: default;
+    /* background-color: #eff1f1; */
+  }
+
+  /* Example modifiers */
+
+  .DayPicker-Day--sunday {
+    background-color: #f7f8f8;
+  }
+
+  .DayPicker-Day--sunday:not(.DayPicker-Day--today) {
+    color: #dce0e0;
+  }
+
+  .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(
+      .DayPicker-Day--outside
+    ) {
+    position: relative;
+
+    background-color: ${miscTheme.theme.colors.primaryBase};
+    color: #f0f8ff;
+    font-weight: ${miscTheme.theme.sizes.fwBold};
+  }
+
+  .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(
+      .DayPicker-Day--outside
+    ):hover {
+    background-color: #51a0fa;
+  }
+
+  .DayPicker:not(.DayPicker--interactionDisabled)
+    .DayPicker-Day:not(.DayPicker-Day--disabled):not(
+      .DayPicker-Day--selected
+    ):not(.DayPicker-Day--outside):hover {
+    background-color: #f0f8ff;
+  }
+
+  /* DayPickerInput */
+
+  .DayPickerInput {
+    display: inline-block;
+  }
+
+  .DayPickerInput-OverlayWrapper {
+    position: relative;
+  }
+
+  .DayPickerInput-Overlay {
+    position: absolute;
+    z-index: 1;
+    left: 0;
+
+    background: white;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
+  }
+`;
+const StyledCaptionWrapper = styled__default["default"].form `
+  display: flex;
+  width: 100%;
+
+  height: 46px;
+  align-items: center;
+  justify-content: space-between;
+  & > :first-child {
+    margin-right: 10px;
+  }
+
+  & * {
+    height: 46px;
+    padding: 10px 10px;
+    background: ${miscTheme.theme.colors.neutral100};
+    border-radius: ${miscTheme.theme.borderRadius};
+  }
+`;
+
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const DatePicker = ({ alignRight = true, placeholder, displayDateFormat, onChange, customInput: CustomInput, pickedDate, className, isStatic, disabledDays, modifiers, UnHideOnClickOutside, initialMonth, locale = 'en-PH', }) => {
+    const isDatePickerShown = React.useRef(false);
+    const dateFormatter = dateFns.format;
+    const [month, setMonth] = React.useState(initialMonth || new Date());
+    const datePickerContainer = React.useRef(null);
+    const datePicker = React.useRef(null);
+    const defaultDateFormatString = 'yyyy-MM-dd';
+    const monthLabels = MONTHS_TRANSLATION[locale];
+    const handleDaysSelect = (day) => {
+        datePicker.current && !isStatic && datePicker.current.hideDayPicker();
+        onChange && onChange(day);
+    };
+    const handleDayChanged = (selectedDay) => {
+        handleDaysSelect(selectedDay);
+    };
+    const formatPickerDate = (date, format) => {
+        return dateFormatter(date, format);
+    };
+    const handleDateClick = (e) => {
+        if (UnHideOnClickOutside)
+            return;
+        if (!datePickerContainer.current ||
+            !datePickerContainer.current.contains(e.target)) {
+            datePicker.current && datePicker.current.hideDayPicker();
+        }
+    };
+    // customise the drop downs for Month and year
+    const currentYear = new Date().getFullYear();
+    const fromMonth = new Date(currentYear - 150, 0);
+    const toMonth = new Date(currentYear + 1, 0);
+    const YearMonthForm = ({ date, 
+    // localeUtils,
+    onChange, monthLabels, }) => {
+        // const months = localeUtils.getMonths()
+        const years = [];
+        for (let i = toMonth.getFullYear(); i >= fromMonth.getFullYear(); i -= 1) {
+            years.push(i);
+        }
+        const handleChange = function handleChange(e) {
+            const { year, month } = e.target.form;
+            onChange(new Date(year.value, month.value));
+        };
+        return (React__default["default"].createElement("div", { className: "DayPicker-Caption" },
+            React__default["default"].createElement(StyledCaptionWrapper, null,
+                React__default["default"].createElement("select", { name: "month", onChange: handleChange, value: date.getMonth() }, monthLabels.map((month, i) => (React__default["default"].createElement("option", { key: month, value: i }, month)))),
+                React__default["default"].createElement("select", { name: "year", onChange: handleChange, value: date.getFullYear() }, years.map((year) => (React__default["default"].createElement("option", { key: year, value: year }, year)))))));
+    };
+    const CaptionElement = ({ date, localeUtils, }) => {
+        const defaultMonthLabels = localeUtils === null || localeUtils === void 0 ? void 0 : localeUtils.getMonths();
+        return (React__default["default"].createElement(YearMonthForm, { date: date, 
+            // localeUtils={localeUtils}
+            monthLabels: monthLabels || defaultMonthLabels, onChange: setMonth }));
+    };
+    React.useEffect(() => {
+        document.addEventListener('mousedown', handleDateClick, {
+            passive: true,
+        });
+        return () => {
+            document.removeEventListener('mousedown', handleDateClick, false);
+        };
+    }, []);
+    return (React__default["default"].createElement(StyledPickerContainer, { className: className, "data-align-right": alignRight, ref: datePickerContainer, "data-is-static": isStatic || undefined },
+        React__default["default"].createElement(DayPickerInput__default["default"], { ref: datePicker, inputProps: {
+                readOnly: true,
+            }, keepFocus: false, classNames: {
+                container: 'pickerContainer',
+                overlayWrapper: 'pickerOverlayWrapper',
+                overlay: 'pickerOverlay',
+            }, component: CustomInput &&
+                React__default["default"].forwardRef(
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                (props, _ref) => (React__default["default"].createElement(CustomInput, Object.assign({}, props)))), onDayPickerHide: () => {
+                isDatePickerShown.current = false;
+            }, onDayPickerShow: () => {
+                isDatePickerShown.current = true;
+            }, dayPickerProps: {
+                month: month,
+                className: 'picker',
+                selectedDays: pickedDate,
+                canChangeMonth: true,
+                enableOutsideDaysClick: isStatic ? false : true,
+                firstDayOfWeek: 1,
+                captionElement: CaptionElement,
+                disabledDays: disabledDays || undefined,
+                modifiers: modifiers,
+            }, format: displayDateFormat || defaultDateFormatString, formatDate: formatPickerDate, hideOnDayClick: isStatic ? false : true, placeholder: placeholder || '', onDayChange: handleDayChanged, showOverlay: isStatic })));
+};
+
 const StyledIconText = styled__default["default"].div `
   display: flex;
   align-items: center;
@@ -4055,6 +4654,7 @@ exports.Breadcrumbs = Breadcrumbs;
 exports.CategoryCard = CategoryCard;
 exports.CheckboxGroup = CheckboxGroup;
 exports.CookieAcceptConfirm = CookieAcceptConfirm;
+exports.DatePicker = DatePicker;
 exports.DateRangePicker = DateRangePicker;
 exports.DoctorInfo = DoctorInfo;
 exports.FixedBottomAdBlock = FixedBottomAdBlock;