@hhgtech/hhg-components 1.28.67 → 1.28.69

package/build/index-c604d6bb.js

@@ -0,0 +1,624 @@
+'use strict';
+
+var React = require('react');
+var index = require('./index-0da9b2e8.js');
+var useTranslations = require('./useTranslations-e1853417.js');
+var dateFns = require('date-fns');
+var DayPickerInput = require('react-day-picker/DayPickerInput');
+var styled = require('styled-components');
+var theme = require('./theme-fa910869.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var DayPickerInput__default = /*#__PURE__*/_interopDefault(DayPickerInput);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+var styles = {"loading":"tliWyii"};
+
+const Loading = ({ className, theme, hideText }) => {
+    const { t } = useTranslations.useTranslations();
+    return (React__default["default"].createElement("div", { className: `${styles.loading} ${className}` },
+        React__default["default"].createElement(index.Icon.Spinner, { isMarryBaby: theme === 'marryBaby' }),
+        !hideText && t('loading')));
+};
+
+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',
+        'Maret',
+        'April',
+        'Mei',
+        'Juni',
+        'Juli',
+        'Agustus',
+        'September',
+        'Oktober',
+        'November',
+        'Desember',
+    ],
+    '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: ${theme.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: ${theme.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: ${theme.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: ${theme.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: ${theme.theme.colors.neutral100};
+        text-align: center;
+        &:not(:last-child) {
+          padding: 8px 10px;
+          margin-right: 15px;
+          border-radius: ${theme.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: ${theme.theme.colors.primaryBase};
+    color: #f0f8ff;
+    font-weight: ${theme.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: ${theme.theme.colors.neutral100};
+    border-radius: ${theme.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 })));
+};
+
+exports.DatePicker = DatePicker;
+exports.Loading = Loading;

package/build/index-d330735e.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-65e312a5.js');
+var React = require('react');
+var core = require('@mantine/core');
+var index$2 = require('./index-1baaedb0.js');
+var index = require('./index-3e5fc2d6.js');
+var index$1 = require('./index-bc4f4c33.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const Modal = (_a) => {
+    var { title, styles } = _a, rest = tslib_es6.__rest(_a, ["title", "styles"]);
+    const { classes } = index.useStyles(undefined, { name: 'Modal', styles });
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(core.Modal, Object.assign({ centered: true, classNames: classes }, rest, { withCloseButton: false, title: rest.withCloseButton && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement(index$1.Text, { size: "s2", weight: "semiBold", as: "span" }, title),
+                React__default["default"].createElement(core.CloseButton, Object.assign({}, rest.closeButtonProps, { onClick: () => { var _a; return (_a = rest.onClose) === null || _a === void 0 ? void 0 : _a.call(rest); }, sx: {
+                        ':focus': {
+                            outline: 0,
+                        },
+                    } }),
+                    React__default["default"].createElement("img", { loading: "lazy", className: "mantine-Modal-close", src: index$2.CommonGAssets.getAssetPath('CloseModal.svg'), style: {
+                            width: '16px',
+                        } })))) }))));
+};
+
+exports.Modal = Modal;

package/build/index-d8a7efaf.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const CustomReferenceDot = React.forwardRef(function CustomReferenceDot(props, ref) {
+    return (React__default["default"].createElement("circle", Object.assign({}, props, { ref: ref }),
+        React__default["default"].createElement("animate", { attributeName: "r", values: "4;8;4", dur: "2s", begin: "0s", repeatCount: "indefinite" })));
+});
+
+exports.CustomReferenceDot = CustomReferenceDot;

package/build/index-e2e81fa2.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-65e312a5.js');
+var React = require('react');
+var core = require('@mantine/core');
+var index = require('./index-bc4f4c33.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+/**
+ * @deprecated Consider to use import { Title } from '@mantine/core'
+ * if need to use custom tag, use Text from mantine instead
+ */
+const Heading = (_a) => {
+    var { as, tag, color, fontWeight, dataEventCategory, dataEventAction, dataEventLabel } = _a, rest = tslib_es6.__rest(_a, ["as", "tag", "color", "fontWeight", "dataEventCategory", "dataEventAction", "dataEventLabel"]);
+    const asTag = as || tag;
+    const theme = core.useMantineTheme();
+    return (React__default["default"].createElement(index.Text, Object.assign({ as: asTag, color: color || theme.colors.gray[8], "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel, weight: fontWeight === 'semibold' ? 'semiBold' : 'bold', size: tag }, rest)));
+};
+
+exports.Heading = Heading;