@hhgtech/hhg-components 1.28.68 → 1.28.70

package/build/esm/index-d1d2e96b.js

@@ -0,0 +1,29 @@
+import { _ as __rest } from './tslib.es6-f79929c2.js';
+import React__default from 'react';
+import { B as Button$1 } from './index-01e95463.js';
+
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const Button = (_a) => {
+    var { size, color = 'primary', isDisabled, isBlock, title, onClick, icon, iconPosition = 'left', children, isLoading = false, loadingText, dataEventCategory, dataEventAction, dataEventLabel, dataProductChannel, dataProductSku, dataProductBrand, dataProductName, dataProductPrice, dataProductCategory, dataProductPosition, type } = _a, rest = __rest(_a, ["size", "color", "isDisabled", "isBlock", "title", "onClick", "icon", "iconPosition", "children", "isLoading", "loadingText", "dataEventCategory", "dataEventAction", "dataEventLabel", "dataProductChannel", "dataProductSku", "dataProductBrand", "dataProductName", "dataProductPrice", "dataProductCategory", "dataProductPosition", "type"]);
+    const gtmProps = {
+        'data-event-category': dataEventCategory,
+        'data-event-action': dataEventAction,
+        'data-event-label': dataEventLabel,
+        'data-product-channel': dataProductChannel,
+        'data-product-sku': dataProductSku,
+        'data-product-brand': dataProductBrand,
+        'data-product-name': dataProductName,
+        'data-product-price': dataProductPrice,
+        'data-product-category': dataProductCategory,
+        'data-product-position': dataProductPosition,
+    };
+    return (React__default.createElement(Button$1, Object.assign({}, gtmProps, { size: size, variant: color === 'transparent' ? 'white' : color === 'danger' ? 'error' : color, disabled: isDisabled, onClick: (evt) => {
+            !isLoading && !isDisabled && onClick && onClick(evt);
+        }, title: title, loading: isLoading, type: type, leftIcon: iconPosition === 'left' ? icon : undefined, rightIcon: iconPosition === 'right' ? icon : undefined, 
+        // hasIcon={!!icon || undefined}
+        w: isBlock ? '100%' : undefined, p: isBlock ? '12px auto' : undefined }, rest), isLoading ? loadingText || children : children));
+};
+
+export { Button as B };

package/build/esm/index-d57cd8e6.js

@@ -0,0 +1,615 @@
+import React__default, { useRef, useState, useEffect } from 'react';
+import { I as Icon } from './index-a23ed47f.js';
+import { u as useTranslations } from './useTranslations-d53557b4.js';
+import { format } from 'date-fns';
+import DayPickerInput from 'react-day-picker/DayPickerInput';
+import styled from 'styled-components';
+import { t as theme } from './theme-7522724d.js';
+
+var styles = {"loading":"tliWyii"};
+
+const Loading = ({ className, theme, hideText }) => {
+    const { t } = useTranslations();
+    return (React__default.createElement("div", { className: `${styles.loading} ${className}` },
+        React__default.createElement(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.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.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.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.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.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.colors.neutral100};
+        text-align: center;
+        &:not(:last-child) {
+          padding: 8px 10px;
+          margin-right: 15px;
+          border-radius: ${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.colors.primaryBase};
+    color: #f0f8ff;
+    font-weight: ${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.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.colors.neutral100};
+    border-radius: ${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 = useRef(false);
+    const dateFormatter = format;
+    const [month, setMonth] = useState(initialMonth || new Date());
+    const datePickerContainer = useRef(null);
+    const datePicker = 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.createElement("div", { className: "DayPicker-Caption" },
+            React__default.createElement(StyledCaptionWrapper, null,
+                React__default.createElement("select", { name: "month", onChange: handleChange, value: date.getMonth() }, monthLabels.map((month, i) => (React__default.createElement("option", { key: month, value: i }, month)))),
+                React__default.createElement("select", { name: "year", onChange: handleChange, value: date.getFullYear() }, years.map((year) => (React__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.createElement(YearMonthForm, { date: date, 
+            // localeUtils={localeUtils}
+            monthLabels: monthLabels || defaultMonthLabels, onChange: setMonth }));
+    };
+    useEffect(() => {
+        document.addEventListener('mousedown', handleDateClick, {
+            passive: true,
+        });
+        return () => {
+            document.removeEventListener('mousedown', handleDateClick, false);
+        };
+    }, []);
+    return (React__default.createElement(StyledPickerContainer, { className: className, "data-align-right": alignRight, ref: datePickerContainer, "data-is-static": isStatic || undefined },
+        React__default.createElement(DayPickerInput, { ref: datePicker, inputProps: {
+                readOnly: true,
+            }, keepFocus: false, classNames: {
+                container: 'pickerContainer',
+                overlayWrapper: 'pickerOverlayWrapper',
+                overlay: 'pickerOverlay',
+            }, component: CustomInput &&
+                React__default.forwardRef(
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                (props, _ref) => (React__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 })));
+};
+
+export { DatePicker as D, Loading as L };