@hhgtech/hhg-components 1.29.362 → 1.29.363-beta-1

package/build/esm/index-4f082205.js

@@ -1,604 +0,0 @@
-import React__default, { useRef, useState, useEffect } from 'react';
-import { format } from 'date-fns';
-import DayPickerInput from 'react-day-picker/DayPickerInput';
-import styled from '@emotion/styled';
-import { theme } from './miscTheme.js';
-
-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.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 };