@chayns-components/date 5.0.0-beta.1000

package/lib/esm/components/calendar/month-year-pickers/MonthYearPickers.js

@@ -0,0 +1,79 @@
+import { ComboBox } from '@chayns-components/core';
+import React, { useMemo, useState } from 'react';
+import { formatMonth, getYearsBetween, isDateInRange } from '../../../utils/calendar';
+import { StyledMonthName } from '../month-wrapper/month/Month.styles';
+import { differenceInCalendarMonths } from "../../../utils/date";
+export let MonthYearPickerType = /*#__PURE__*/function (MonthYearPickerType) {
+  MonthYearPickerType["Month"] = "month";
+  MonthYearPickerType["Year"] = "year";
+  return MonthYearPickerType;
+}({});
+const MonthYearPickers = _ref => {
+  let {
+    month,
+    year,
+    locale,
+    minDate,
+    maxDate,
+    setCurrentDate,
+    displayIndex = 0,
+    showMonthYearPickers
+  } = _ref;
+  const [currentYear] = useState(new Date().getFullYear());
+  const months = useMemo(() => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(tempMonth => ({
+    text: formatMonth({
+      month: tempMonth,
+      locale
+    }),
+    value: tempMonth
+  })), [locale]);
+  const hasMultipleMonths = useMemo(() => differenceInCalendarMonths(maxDate, minDate) > 0, [minDate, maxDate]);
+  const years = useMemo(() => getYearsBetween(minDate, maxDate).map(tempYear => ({
+    text: tempYear.toString(),
+    value: tempYear
+  })), [minDate, maxDate]);
+  const hasMultipleYears = useMemo(() => years.length > 1, [years]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, showMonthYearPickers && hasMultipleMonths ? /*#__PURE__*/React.createElement(ComboBox, {
+    onSelect: selectedItem => {
+      const tempSelectedDate = isDateInRange({
+        minDate,
+        maxDate,
+        currentDate: new Date(year, selectedItem.value - 1 - displayIndex, 1)
+      });
+      setCurrentDate(tempSelectedDate);
+    },
+    lists: [{
+      list: months
+    }],
+    selectedItem: {
+      text: formatMonth({
+        month,
+        locale
+      }),
+      value: month
+    },
+    placeholder: ""
+  }) : /*#__PURE__*/React.createElement(StyledMonthName, null, formatMonth({
+    locale,
+    month
+  })), showMonthYearPickers && hasMultipleYears ? /*#__PURE__*/React.createElement(ComboBox, {
+    onSelect: selectedItem => {
+      const tempSelectedDate = isDateInRange({
+        minDate,
+        maxDate,
+        currentDate: new Date(selectedItem.value, month - 1 - displayIndex, 1)
+      });
+      setCurrentDate(tempSelectedDate);
+    },
+    lists: [{
+      list: years
+    }],
+    selectedItem: {
+      text: year.toString(),
+      value: year
+    },
+    placeholder: ""
+  }) : /*#__PURE__*/React.createElement(StyledMonthName, null, currentYear !== year ? year : ''));
+};
+export default MonthYearPickers;
+//# sourceMappingURL=MonthYearPickers.js.map

package/lib/esm/components/calendar/month-year-pickers/MonthYearPickers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthYearPickers.js","names":["ComboBox","React","useMemo","useState","formatMonth","getYearsBetween","isDateInRange","StyledMonthName","differenceInCalendarMonths","MonthYearPickerType","MonthYearPickers","_ref","month","year","locale","minDate","maxDate","setCurrentDate","displayIndex","showMonthYearPickers","currentYear","Date","getFullYear","months","map","tempMonth","text","value","hasMultipleMonths","years","tempYear","toString","hasMultipleYears","length","createElement","Fragment","onSelect","selectedItem","tempSelectedDate","currentDate","lists","list","placeholder"],"sources":["../../../../../src/components/calendar/month-year-pickers/MonthYearPickers.tsx"],"sourcesContent":["import { ComboBox } from '@chayns-components/core';\nimport React, { FC, useMemo, useState } from 'react';\nimport { EMonth } from '../../../types/calendar';\nimport { formatMonth, getYearsBetween, isDateInRange } from '../../../utils/calendar';\nimport { StyledMonthName } from '../month-wrapper/month/Month.styles';\nimport {Language} from \"chayns-api\";\nimport {differenceInCalendarMonths} from \"../../../utils/date\";\n\nexport enum MonthYearPickerType {\n    Month = 'month',\n    Year = 'year',\n}\n\ntype MonthYearPickerProps = {\n    month: EMonth;\n    year: number;\n    locale: Language;\n    minDate: Date;\n    maxDate: Date;\n    setCurrentDate: (date: Date) => void;\n    displayIndex?: number;\n    showMonthYearPickers: boolean;\n};\n\nconst MonthYearPickers: FC<MonthYearPickerProps> = ({\n    month,\n    year,\n    locale,\n    minDate,\n    maxDate,\n    setCurrentDate,\n    displayIndex = 0,\n    showMonthYearPickers,\n}) => {\n    const [currentYear] = useState(new Date().getFullYear());\n\n    const months = useMemo(\n        () =>\n            [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((tempMonth) => ({\n                text: formatMonth({ month: tempMonth, locale }),\n                value: tempMonth,\n            })),\n        [locale],\n    );\n\n    const hasMultipleMonths = useMemo(\n        () => differenceInCalendarMonths(maxDate, minDate) > 0,\n        [minDate, maxDate],\n    );\n\n    const years = useMemo(\n        () =>\n            getYearsBetween(minDate, maxDate).map((tempYear) => ({\n                text: tempYear.toString(),\n                value: tempYear,\n            })),\n        [minDate, maxDate],\n    );\n\n    const hasMultipleYears = useMemo(() => years.length > 1, [years]);\n\n    return (\n        <>\n            {showMonthYearPickers && hasMultipleMonths ? (\n                <ComboBox\n                    onSelect={(selectedItem) => {\n                        const tempSelectedDate = isDateInRange({\n                            minDate,\n                            maxDate,\n                            currentDate: new Date(\n                                year,\n                                (selectedItem.value as number) - 1 - displayIndex,\n                                1,\n                            ),\n                        });\n\n                        setCurrentDate(tempSelectedDate);\n                    }}\n                    lists={[\n                        {\n                            list: months,\n                        },\n                    ]}\n                    selectedItem={{\n                        text: formatMonth({ month, locale }),\n                        value: month,\n                    }}\n                    placeholder=\"\"\n                />\n            ) : (\n                <StyledMonthName>{formatMonth({ locale, month })}</StyledMonthName>\n            )}\n            {showMonthYearPickers && hasMultipleYears ? (\n                <ComboBox\n                    onSelect={(selectedItem) => {\n                        const tempSelectedDate = isDateInRange({\n                            minDate,\n                            maxDate,\n                            currentDate: new Date(\n                                selectedItem.value as number,\n                                month - 1 - displayIndex,\n                                1,\n                            ),\n                        });\n\n                        setCurrentDate(tempSelectedDate);\n                    }}\n                    lists={[\n                        {\n                            list: years,\n                        },\n                    ]}\n                    selectedItem={{\n                        text: year.toString(),\n                        value: year,\n                    }}\n                    placeholder=\"\"\n                />\n            ) : (\n                <StyledMonthName>{currentYear !== year ? year : ''}</StyledMonthName>\n            )}\n        </>\n    );\n};\n\nexport default MonthYearPickers;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/date-info/DateInfo.js

@@ -0,0 +1,28 @@
+import React, { useMemo } from 'react';
+import { useDateInfo } from '../../hooks/useDateInfo';
+const DateInfo = _ref => {
+  let {
+    date,
+    preText = '',
+    shouldShowYear,
+    shouldShowTime,
+    shouldShowRelativeDayOfWeek,
+    shouldUseShortText,
+    shouldShowDayOfWeek,
+    shouldShowDateToNowDifference
+  } = _ref;
+  const formattedDate = useDateInfo({
+    date,
+    preText,
+    shouldShowYear,
+    shouldShowTime,
+    shouldUseShortText,
+    shouldShowDayOfWeek,
+    shouldShowRelativeDayOfWeek,
+    shouldShowDateToNowDifference
+  });
+  return useMemo(() => /*#__PURE__*/React.createElement("span", null, formattedDate), [formattedDate]);
+};
+DateInfo.displayName = 'DateInfo';
+export default DateInfo;
+//# sourceMappingURL=DateInfo.js.map

package/lib/esm/components/date-info/DateInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInfo.js","names":["React","useMemo","useDateInfo","DateInfo","_ref","date","preText","shouldShowYear","shouldShowTime","shouldShowRelativeDayOfWeek","shouldUseShortText","shouldShowDayOfWeek","shouldShowDateToNowDifference","formattedDate","createElement","displayName"],"sources":["../../../../src/components/date-info/DateInfo.tsx"],"sourcesContent":["import React, { FC, useMemo } from 'react';\nimport { useDateInfo } from '../../hooks/useDateInfo';\nimport { UseDateInfoOptions } from '../../types/dateinfo';\n\nexport type DateInfoProps = UseDateInfoOptions;\n\nconst DateInfo: FC<DateInfoProps> = ({\n    date,\n    preText = '',\n    shouldShowYear,\n    shouldShowTime,\n    shouldShowRelativeDayOfWeek,\n    shouldUseShortText,\n    shouldShowDayOfWeek,\n    shouldShowDateToNowDifference,\n}) => {\n    const formattedDate = useDateInfo({\n        date,\n        preText,\n        shouldShowYear,\n        shouldShowTime,\n        shouldUseShortText,\n        shouldShowDayOfWeek,\n        shouldShowRelativeDayOfWeek,\n        shouldShowDateToNowDifference,\n    });\n\n    return useMemo(() => <span>{formattedDate}</span>, [formattedDate]);\n};\n\nDateInfo.displayName = 'DateInfo';\n\nexport default DateInfo;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,OAAO,QAAQ,OAAO;AAC1C,SAASC,WAAW,QAAQ,yBAAyB;AAKrD,MAAMC,QAA2B,GAAGC,IAAA,IAS9B;EAAA,IAT+B;IACjCC,IAAI;IACJC,OAAO,GAAG,EAAE;IACZC,cAAc;IACdC,cAAc;IACdC,2BAA2B;IAC3BC,kBAAkB;IAClBC,mBAAmB;IACnBC;EACJ,CAAC,GAAAR,IAAA;EACG,MAAMS,aAAa,GAAGX,WAAW,CAAC;IAC9BG,IAAI;IACJC,OAAO;IACPC,cAAc;IACdC,cAAc;IACdE,kBAAkB;IAClBC,mBAAmB;IACnBF,2BAA2B;IAC3BG;EACJ,CAAC,CAAC;EAEF,OAAOX,OAAO,CAAC,mBAAMD,KAAA,CAAAc,aAAA,eAAOD,aAAoB,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC;AACvE,CAAC;AAEDV,QAAQ,CAACY,WAAW,GAAG,UAAU;AAEjC,eAAeZ,QAAQ","ignoreList":[]}

package/lib/esm/components/opening-times/OpeningTimes.js

@@ -0,0 +1,240 @@
+import { Checkbox, Popup, useElementSize } from '@chayns-components/core';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { HintTextPosition } from '../../types/openingTimes';
+import HintText from './hint-text/HintText';
+import OpeningInputs from './opening-inputs/OpeningInputs';
+import { StyledOpeningTimes, StyledOpeningTimesTooltipContent, StyledOpeningTimesWeekDay, StyledOpeningTimesWrapper } from './OpeningTimes.styles';
+const OpeningTimes = _ref => {
+  let {
+    closedText = 'closed',
+    currentDayId,
+    editMode = false,
+    hintText,
+    hintTextPosition = HintTextPosition.Bottom,
+    openingTimes,
+    weekdays,
+    onChange,
+    onTimeAdd,
+    onTimeRemove,
+    shouldNotValidate = false
+  } = _ref;
+  const [newOpeningTimes, setNewOpeningTimes] = useState();
+  const [invalidOpeningTimes, setInvalidOpeningTimes] = useState([]);
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
+  const ref = useRef(null);
+  const popupRef = useRef(null);
+  useEffect(() => {
+    setNewOpeningTimes(openingTimes);
+  }, [openingTimes]);
+  const validateTime = useCallback((newTime, dayId) => {
+    if (newTime.start === newTime.end) {
+      return false;
+    }
+    const dayTimes = newOpeningTimes?.find(day => day.id === dayId)?.times || [];
+    return dayTimes.every(time => time.id === newTime.id || newTime.end <= time.start || newTime.start >= time.end);
+  }, [newOpeningTimes]);
+  const handleCheckBoxChange = useCallback(id => {
+    setNewOpeningTimes(prevOpeningTimes => {
+      const updatedOpeningTimes = (prevOpeningTimes ?? []).map(openingTime => {
+        if (openingTime.id === id) {
+          return {
+            ...openingTime,
+            isDisabled: !openingTime.isDisabled
+          };
+        }
+        return openingTime;
+      });
+      if (typeof onChange === 'function') {
+        onChange({
+          enabledDays: updatedOpeningTimes.filter(item => !item.isDisabled).map(item => item.id)
+        });
+      }
+      return updatedOpeningTimes;
+    });
+  }, [onChange]);
+  const handleChange = useCallback((newTime, id) => {
+    const isValid = shouldNotValidate || validateTime(newTime, id);
+    if (!isValid) {
+      return;
+    }
+    setNewOpeningTimes(prevOpeningTimes => {
+      const updatedOpeningTimes = (prevOpeningTimes ?? []).map(openingTime => {
+        if (openingTime.id === id) {
+          const newTimes = openingTime.times.map(time => {
+            if (time.id === newTime.id) {
+              return newTime;
+            }
+            return time;
+          });
+          return {
+            ...openingTime,
+            times: newTimes
+          };
+        }
+        return openingTime;
+      });
+      const changedOpeningTime = updatedOpeningTimes.find(updatedOpeningTime => updatedOpeningTime.id === id);
+      if (isValid && typeof onChange === 'function') {
+        onChange({
+          dayId: changedOpeningTime?.id,
+          time: newTime
+        });
+      }
+      return updatedOpeningTimes;
+    });
+  }, [onChange, shouldNotValidate, validateTime]);
+  const handleAdd = useCallback((time, id) => {
+    const isValid = shouldNotValidate || validateTime(time, id);
+    if (isValid && typeof onTimeAdd === 'function') {
+      onTimeAdd({
+        time,
+        dayId: id
+      });
+    }
+    setNewOpeningTimes(prevOpeningTimes => (prevOpeningTimes ?? []).map(openingTime => {
+      if (openingTime.id === id) {
+        return {
+          ...openingTime,
+          times: [...openingTime.times, time]
+        };
+      }
+      return openingTime;
+    }));
+  }, [onTimeAdd, shouldNotValidate, validateTime]);
+  const handleUpdateInvalidIds = useCallback((openingTimeId, invalidTimeIds) => {
+    setInvalidOpeningTimes(prevState => {
+      const updatedInvalidOpeningTimes = prevState.map(invalidOpeningTime => {
+        if (invalidOpeningTime.openingTimeId === openingTimeId) {
+          return {
+            openingTimeId,
+            invalidTimeIds
+          };
+        }
+        return invalidOpeningTime;
+      });
+      if (!updatedInvalidOpeningTimes.some(_ref2 => {
+        let {
+          openingTimeId: updatedInvalidOpeningId
+        } = _ref2;
+        return updatedInvalidOpeningId === openingTimeId;
+      }) && invalidTimeIds.length > 0) {
+        updatedInvalidOpeningTimes.push({
+          openingTimeId,
+          invalidTimeIds
+        });
+      }
+      return updatedInvalidOpeningTimes.filter(updatedInvalidOpeningTime => updatedInvalidOpeningTime.invalidTimeIds.length !== 0);
+    });
+  }, []);
+  const handleRemove = useCallback(id => {
+    setNewOpeningTimes(prevOpeningTimes => (prevOpeningTimes ?? []).map(openingTime => {
+      const newTimes = openingTime.times.filter(time => time.id !== id);
+      return {
+        ...openingTime,
+        times: newTimes
+      };
+    }));
+    if (typeof onTimeRemove === 'function') {
+      onTimeRemove(id);
+    }
+  }, [onTimeRemove]);
+  const content = useMemo(() => {
+    const items = [];
+    if (!newOpeningTimes) {
+      return items;
+    }
+    newOpeningTimes.forEach(_ref3 => {
+      let {
+        times,
+        id,
+        weekdayId,
+        isDisabled
+      } = _ref3;
+      const weekday = weekdays.find(weekDay => weekDay.id === weekdayId)?.name;
+      if (!weekday) {
+        return;
+      }
+      items.push(/*#__PURE__*/React.createElement(StyledOpeningTimesWrapper, {
+        key: `openingTimes__${id}`
+      }, editMode ? /*#__PURE__*/React.createElement(Checkbox, {
+        isChecked: !isDisabled,
+        onChange: () => handleCheckBoxChange(id)
+      }, weekday) : /*#__PURE__*/React.createElement(StyledOpeningTimesWeekDay, null, weekday), /*#__PURE__*/React.createElement(OpeningInputs, {
+        closedText: closedText,
+        currentDayId: currentDayId,
+        id: id,
+        times: times,
+        isDisabled: isDisabled,
+        onInvalid: handleUpdateInvalidIds,
+        onChange: newTime => handleChange(newTime, id),
+        onRemove: handleRemove,
+        onAdd: handleAdd,
+        editMode: editMode
+      })));
+    });
+    return items;
+  }, [closedText, currentDayId, editMode, handleAdd, handleChange, handleCheckBoxChange, handleRemove, handleUpdateInvalidIds, newOpeningTimes, weekdays]);
+  const size = useElementSize(ref);
+  const hidePopup = useCallback(() => {
+    setIsPopupOpen(false);
+    popupRef.current?.hide();
+  }, []);
+  const showPopup = useCallback(() => {
+    setIsPopupOpen(true);
+    popupRef.current?.show();
+  }, []);
+  const displayedContent = useMemo(() => {
+    if (!currentDayId || editMode) {
+      return content;
+    }
+    const singleDay = newOpeningTimes?.find(_ref4 => {
+      let {
+        id
+      } = _ref4;
+      return id === currentDayId;
+    });
+    if (!singleDay) {
+      return content;
+    }
+    const {
+      id,
+      times,
+      weekdayId
+    } = singleDay;
+    const weekday = weekdays.find(weekDay => weekDay.id === weekdayId)?.name;
+    return /*#__PURE__*/React.createElement(StyledOpeningTimesWrapper, {
+      key: `currentDay__${currentDayId}`,
+      style: size && {
+        width: size.width
+      },
+      onMouseEnter: showPopup,
+      onMouseLeave: hidePopup,
+      onClick: () => isPopupOpen ? hidePopup() : showPopup()
+    }, /*#__PURE__*/React.createElement(Popup, {
+      onShow: () => setIsPopupOpen(true),
+      onHide: () => setIsPopupOpen(false),
+      ref: popupRef,
+      content: /*#__PURE__*/React.createElement(StyledOpeningTimesTooltipContent, {
+        key: "opening-time-tooltip"
+      }, content)
+    }, /*#__PURE__*/React.createElement(StyledOpeningTimesWeekDay, null, weekday)), /*#__PURE__*/React.createElement(OpeningInputs, {
+      closedText: closedText,
+      currentDayId: currentDayId,
+      onInvalid: handleUpdateInvalidIds,
+      id: id,
+      times: times,
+      editMode: editMode
+    }));
+  }, [currentDayId, editMode, newOpeningTimes, weekdays, size, showPopup, hidePopup, content, closedText, handleUpdateInvalidIds, isPopupOpen]);
+  const shouldShowHint = useMemo(() => invalidOpeningTimes.length > 0, [invalidOpeningTimes.length]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledOpeningTimes, {
+    ref: ref
+  }, shouldShowHint && hintText && hintTextPosition === HintTextPosition.Top && /*#__PURE__*/React.createElement(HintText, {
+    text: hintText
+  }), displayedContent, shouldShowHint && hintText && hintTextPosition === HintTextPosition.Bottom && /*#__PURE__*/React.createElement(HintText, {
+    text: hintText
+  })), [displayedContent, hintText, hintTextPosition, shouldShowHint]);
+};
+OpeningTimes.displayName = 'OpeningTimes';
+export default OpeningTimes;
+//# sourceMappingURL=OpeningTimes.js.map

package/lib/esm/components/opening-times/OpeningTimes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OpeningTimes.js","names":["Checkbox","Popup","useElementSize","React","useCallback","useEffect","useMemo","useRef","useState","HintTextPosition","HintText","OpeningInputs","StyledOpeningTimes","StyledOpeningTimesTooltipContent","StyledOpeningTimesWeekDay","StyledOpeningTimesWrapper","OpeningTimes","_ref","closedText","currentDayId","editMode","hintText","hintTextPosition","Bottom","openingTimes","weekdays","onChange","onTimeAdd","onTimeRemove","shouldNotValidate","newOpeningTimes","setNewOpeningTimes","invalidOpeningTimes","setInvalidOpeningTimes","isPopupOpen","setIsPopupOpen","ref","popupRef","validateTime","newTime","dayId","start","end","dayTimes","find","day","id","times","every","time","handleCheckBoxChange","prevOpeningTimes","updatedOpeningTimes","map","openingTime","isDisabled","enabledDays","filter","item","handleChange","isValid","newTimes","changedOpeningTime","updatedOpeningTime","handleAdd","handleUpdateInvalidIds","openingTimeId","invalidTimeIds","prevState","updatedInvalidOpeningTimes","invalidOpeningTime","some","_ref2","updatedInvalidOpeningId","length","push","updatedInvalidOpeningTime","handleRemove","content","items","forEach","_ref3","weekdayId","weekday","weekDay","name","createElement","key","isChecked","onInvalid","onRemove","onAdd","size","hidePopup","current","hide","showPopup","show","displayedContent","singleDay","_ref4","style","width","onMouseEnter","onMouseLeave","onClick","onShow","onHide","shouldShowHint","Top","text","displayName"],"sources":["../../../../src/components/opening-times/OpeningTimes.tsx"],"sourcesContent":["import { Checkbox, Popup, useElementSize, type PopupRef } from '@chayns-components/core';\nimport React, {\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type ReactElement,\n} from 'react';\nimport {\n    HintTextPosition,\n    type OnChange,\n    type OnTimeAdd,\n    type OpeningTime,\n    type Time,\n    type Weekday,\n} from '../../types/openingTimes';\nimport HintText from './hint-text/HintText';\nimport OpeningInputs from './opening-inputs/OpeningInputs';\nimport {\n    StyledOpeningTimes,\n    StyledOpeningTimesTooltipContent,\n    StyledOpeningTimesWeekDay,\n    StyledOpeningTimesWrapper,\n} from './OpeningTimes.styles';\n\nexport type OpeningTimesProps = {\n    /**\n     * The text that should be displayed when a day is closed.\n     */\n    closedText?: string;\n    /**\n     * If set just the current day is displayed and the whole week in a tooltip.\n     */\n    currentDayId?: OpeningTime['id'];\n    /**\n     * Whether the opening times can be edited.\n     */\n    editMode?: boolean;\n    /**\n     * The text that should be displayed if times are colliding.\n     */\n    hintText?: string;\n    /**\n     * The position of the hint text.\n     */\n    hintTextPosition?: HintTextPosition;\n    /**\n     * Function to be executed when a time is changed or a day is enabled/disabled.\n     * @param openingTimes\n     */\n    onChange?: ({ time, enabledDays, dayId }: OnChange) => void;\n    /**\n     * Function to be executed when a time is added.\n     */\n    onTimeAdd?: ({ time, dayId }: OnTimeAdd) => void;\n    /**\n     * Function to be executed when a time is removed.\n     */\n    onTimeRemove?: (id: string) => void;\n    /**\n     * The opening times corresponding to its weekday.\n     */\n    openingTimes: OpeningTime[];\n    /**\n     * The weekdays that should be displayed.\n     */\n    weekdays: Weekday[];\n    /**\n     * When set to true, events are triggered without validation.\n     */\n    shouldNotValidate?: boolean;\n};\n\nconst OpeningTimes: FC<OpeningTimesProps> = ({\n    closedText = 'closed',\n    currentDayId,\n    editMode = false,\n    hintText,\n    hintTextPosition = HintTextPosition.Bottom,\n    openingTimes,\n    weekdays,\n    onChange,\n    onTimeAdd,\n    onTimeRemove,\n    shouldNotValidate = false,\n}) => {\n    const [newOpeningTimes, setNewOpeningTimes] = useState<OpeningTime[]>();\n    const [invalidOpeningTimes, setInvalidOpeningTimes] = useState<\n        { openingTimeId: string; invalidTimeIds: string[] }[]\n    >([]);\n    const [isPopupOpen, setIsPopupOpen] = useState(false);\n\n    const ref = useRef<HTMLDivElement>(null);\n    const popupRef = useRef<PopupRef>(null);\n\n    useEffect(() => {\n        setNewOpeningTimes(openingTimes);\n    }, [openingTimes]);\n\n    const validateTime = useCallback(\n        (newTime: Time, dayId: string): boolean => {\n            if (newTime.start === newTime.end) {\n                return false;\n            }\n            const dayTimes = newOpeningTimes?.find((day) => day.id === dayId)?.times || [];\n\n            return dayTimes.every(\n                (time) =>\n                    time.id === newTime.id ||\n                    newTime.end <= time.start ||\n                    newTime.start >= time.end,\n            );\n        },\n        [newOpeningTimes],\n    );\n\n    const handleCheckBoxChange = useCallback(\n        (id: string) => {\n            setNewOpeningTimes((prevOpeningTimes) => {\n                const updatedOpeningTimes = (prevOpeningTimes ?? []).map((openingTime) => {\n                    if (openingTime.id === id) {\n                        return { ...openingTime, isDisabled: !openingTime.isDisabled };\n                    }\n                    return openingTime;\n                });\n\n                if (typeof onChange === 'function') {\n                    onChange({\n                        enabledDays: updatedOpeningTimes\n                            .filter((item) => !item.isDisabled)\n                            .map((item) => item.id),\n                    });\n                }\n\n                return updatedOpeningTimes;\n            });\n        },\n        [onChange],\n    );\n\n    const handleChange = useCallback(\n        (newTime: Time, id: string) => {\n            const isValid = shouldNotValidate || validateTime(newTime, id);\n            if (!isValid) {\n                return;\n            }\n\n            setNewOpeningTimes((prevOpeningTimes) => {\n                const updatedOpeningTimes = (prevOpeningTimes ?? []).map((openingTime) => {\n                    if (openingTime.id === id) {\n                        const newTimes = openingTime.times.map((time) => {\n                            if (time.id === newTime.id) {\n                                return newTime;\n                            }\n                            return time;\n                        });\n                        return { ...openingTime, times: newTimes };\n                    }\n                    return openingTime;\n                });\n\n                const changedOpeningTime = updatedOpeningTimes.find(\n                    (updatedOpeningTime) => updatedOpeningTime.id === id,\n                );\n\n                if (isValid && typeof onChange === 'function') {\n                    onChange({\n                        dayId: changedOpeningTime?.id,\n                        time: newTime,\n                    });\n                }\n\n                return updatedOpeningTimes;\n            });\n        },\n        [onChange, shouldNotValidate, validateTime],\n    );\n\n    const handleAdd = useCallback(\n        (time: Time, id: string) => {\n            const isValid = shouldNotValidate || validateTime(time, id);\n\n            if (isValid && typeof onTimeAdd === 'function') {\n                onTimeAdd({ time, dayId: id });\n            }\n\n            setNewOpeningTimes((prevOpeningTimes) =>\n                (prevOpeningTimes ?? []).map((openingTime) => {\n                    if (openingTime.id === id) {\n                        return { ...openingTime, times: [...openingTime.times, time] };\n                    }\n                    return openingTime;\n                }),\n            );\n        },\n        [onTimeAdd, shouldNotValidate, validateTime],\n    );\n\n    const handleUpdateInvalidIds = useCallback(\n        (openingTimeId: string, invalidTimeIds: string[]) => {\n            setInvalidOpeningTimes((prevState) => {\n                const updatedInvalidOpeningTimes = prevState.map((invalidOpeningTime) => {\n                    if (invalidOpeningTime.openingTimeId === openingTimeId) {\n                        return {\n                            openingTimeId,\n                            invalidTimeIds,\n                        };\n                    }\n                    return invalidOpeningTime;\n                });\n\n                if (\n                    !updatedInvalidOpeningTimes.some(\n                        ({ openingTimeId: updatedInvalidOpeningId }) =>\n                            updatedInvalidOpeningId === openingTimeId,\n                    ) &&\n                    invalidTimeIds.length > 0\n                ) {\n                    updatedInvalidOpeningTimes.push({ openingTimeId, invalidTimeIds });\n                }\n\n                return updatedInvalidOpeningTimes.filter(\n                    (updatedInvalidOpeningTime) =>\n                        updatedInvalidOpeningTime.invalidTimeIds.length !== 0,\n                );\n            });\n        },\n        [],\n    );\n\n    const handleRemove = useCallback(\n        (id: string) => {\n            setNewOpeningTimes((prevOpeningTimes) =>\n                (prevOpeningTimes ?? []).map((openingTime) => {\n                    const newTimes = openingTime.times.filter((time) => time.id !== id);\n\n                    return { ...openingTime, times: newTimes };\n                }),\n            );\n\n            if (typeof onTimeRemove === 'function') {\n                onTimeRemove(id);\n            }\n        },\n        [onTimeRemove],\n    );\n\n    const content = useMemo(() => {\n        const items: ReactElement[] = [];\n\n        if (!newOpeningTimes) {\n            return items;\n        }\n\n        newOpeningTimes.forEach(({ times, id, weekdayId, isDisabled }) => {\n            const weekday = weekdays.find((weekDay) => weekDay.id === weekdayId)?.name;\n\n            if (!weekday) {\n                return;\n            }\n\n            items.push(\n                <StyledOpeningTimesWrapper key={`openingTimes__${id}`}>\n                    {editMode ? (\n                        <Checkbox isChecked={!isDisabled} onChange={() => handleCheckBoxChange(id)}>\n                            {weekday}\n                        </Checkbox>\n                    ) : (\n                        <StyledOpeningTimesWeekDay>{weekday}</StyledOpeningTimesWeekDay>\n                    )}\n                    <OpeningInputs\n                        closedText={closedText}\n                        currentDayId={currentDayId}\n                        id={id}\n                        times={times}\n                        isDisabled={isDisabled}\n                        onInvalid={handleUpdateInvalidIds}\n                        onChange={(newTime) => handleChange(newTime, id)}\n                        onRemove={handleRemove}\n                        onAdd={handleAdd}\n                        editMode={editMode}\n                    />\n                </StyledOpeningTimesWrapper>,\n            );\n        });\n\n        return items;\n    }, [\n        closedText,\n        currentDayId,\n        editMode,\n        handleAdd,\n        handleChange,\n        handleCheckBoxChange,\n        handleRemove,\n        handleUpdateInvalidIds,\n        newOpeningTimes,\n        weekdays,\n    ]);\n\n    const size = useElementSize(ref);\n\n    const hidePopup = useCallback(() => {\n        setIsPopupOpen(false);\n        popupRef.current?.hide();\n    }, []);\n\n    const showPopup = useCallback(() => {\n        setIsPopupOpen(true);\n        popupRef.current?.show();\n    }, []);\n\n    const displayedContent = useMemo(() => {\n        if (!currentDayId || editMode) {\n            return content;\n        }\n\n        const singleDay = newOpeningTimes?.find(({ id }) => id === currentDayId);\n\n        if (!singleDay) {\n            return content;\n        }\n\n        const { id, times, weekdayId } = singleDay;\n\n        const weekday = weekdays.find((weekDay) => weekDay.id === weekdayId)?.name;\n\n        return (\n            <StyledOpeningTimesWrapper\n                key={`currentDay__${currentDayId}`}\n                style={size && { width: size.width }}\n                onMouseEnter={showPopup}\n                onMouseLeave={hidePopup}\n                onClick={() => (isPopupOpen ? hidePopup() : showPopup())}\n            >\n                <Popup\n                    onShow={() => setIsPopupOpen(true)}\n                    onHide={() => setIsPopupOpen(false)}\n                    ref={popupRef}\n                    content={\n                        <StyledOpeningTimesTooltipContent key=\"opening-time-tooltip\">\n                            {content}\n                        </StyledOpeningTimesTooltipContent>\n                    }\n                >\n                    <StyledOpeningTimesWeekDay>{weekday}</StyledOpeningTimesWeekDay>\n                </Popup>\n                <OpeningInputs\n                    closedText={closedText}\n                    currentDayId={currentDayId}\n                    onInvalid={handleUpdateInvalidIds}\n                    id={id}\n                    times={times}\n                    editMode={editMode}\n                />\n            </StyledOpeningTimesWrapper>\n        );\n    }, [\n        currentDayId,\n        editMode,\n        newOpeningTimes,\n        weekdays,\n        size,\n        showPopup,\n        hidePopup,\n        content,\n        closedText,\n        handleUpdateInvalidIds,\n        isPopupOpen,\n    ]);\n\n    const shouldShowHint = useMemo(\n        () => invalidOpeningTimes.length > 0,\n        [invalidOpeningTimes.length],\n    );\n\n    return useMemo(\n        () => (\n            <StyledOpeningTimes ref={ref}>\n                {shouldShowHint && hintText && hintTextPosition === HintTextPosition.Top && (\n                    <HintText text={hintText} />\n                )}\n                {displayedContent}\n                {shouldShowHint && hintText && hintTextPosition === HintTextPosition.Bottom && (\n                    <HintText text={hintText} />\n                )}\n            </StyledOpeningTimes>\n        ),\n        [displayedContent, hintText, hintTextPosition, shouldShowHint],\n    );\n};\n\nOpeningTimes.displayName = 'OpeningTimes';\n\nexport default OpeningTimes;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/opening-times/OpeningTimes.styles.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+export const StyledOpeningTimes = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+`;
+export const StyledOpeningTimesWrapper = styled.div`
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    min-width: 300px;
+`;
+export const StyledOpeningTimesTooltipContent = styled.div`
+    padding: 8px;
+`;
+export const StyledOpeningTimesWeekDay = styled.div`
+    color: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.text;
+}};
+`;
+//# sourceMappingURL=OpeningTimes.styles.js.map

package/lib/esm/components/opening-times/OpeningTimes.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OpeningTimes.styles.js","names":["styled","StyledOpeningTimes","div","StyledOpeningTimesWrapper","StyledOpeningTimesTooltipContent","StyledOpeningTimesWeekDay","_ref","theme","text"],"sources":["../../../../src/components/opening-times/OpeningTimes.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\ntype StyledSliderButtonProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledOpeningTimes = styled.div<StyledSliderButtonProps>`\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n`;\n\nexport const StyledOpeningTimesWrapper = styled.div`\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    min-width: 300px;\n`;\n\nexport const StyledOpeningTimesTooltipContent = styled.div`\n    padding: 8px;\n`;\n\ntype StyledOpeningTimesWeekDayProps = WithTheme<unknown>;\n\nexport const StyledOpeningTimesWeekDay = styled.div<StyledOpeningTimesWeekDayProps>`\n    color: ${({ theme }: StyledOpeningTimesWeekDayProps) => theme.text};\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAItC,OAAO,MAAMC,kBAAkB,GAAGD,MAAM,CAACE,GAA4B;AACrE;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,yBAAyB,GAAGH,MAAM,CAACE,GAAG;AACnD;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,gCAAgC,GAAGJ,MAAM,CAACE,GAAG;AAC1D;AACA,CAAC;AAID,OAAO,MAAMG,yBAAyB,GAAGL,MAAM,CAACE,GAAmC;AACnF,aAAaI,IAAA;EAAA,IAAC;IAAEC;EAAsC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA;AACtE,CAAC","ignoreList":[]}

package/lib/esm/components/opening-times/hint-text/HintText.js

@@ -0,0 +1,12 @@
+import React, { useMemo, useState } from 'react';
+import { StyledHintText } from './HintText.styles';
+const HintText = _ref => {
+  let {
+    text
+  } = _ref;
+  const [newHintText, setNewHintText] = useState();
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledHintText, null, text), [text]);
+};
+HintText.displayName = 'HintText';
+export default HintText;
+//# sourceMappingURL=HintText.js.map

package/lib/esm/components/opening-times/hint-text/HintText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HintText.js","names":["React","useMemo","useState","StyledHintText","HintText","_ref","text","newHintText","setNewHintText","createElement","displayName"],"sources":["../../../../../src/components/opening-times/hint-text/HintText.tsx"],"sourcesContent":["import React, { FC, useMemo, useState } from 'react';\nimport { StyledHintText } from './HintText.styles';\n\nexport type HintTextProps = {\n    text: string;\n};\n\nconst HintText: FC<HintTextProps> = ({ text }) => {\n    const [newHintText, setNewHintText] = useState<string>();\n\n    return useMemo(() => <StyledHintText>{text}</StyledHintText>, [text]);\n};\n\nHintText.displayName = 'HintText';\n\nexport default HintText;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,cAAc,QAAQ,mBAAmB;AAMlD,MAAMC,QAA2B,GAAGC,IAAA,IAAc;EAAA,IAAb;IAAEC;EAAK,CAAC,GAAAD,IAAA;EACzC,MAAM,CAACE,WAAW,EAAEC,cAAc,CAAC,GAAGN,QAAQ,CAAS,CAAC;EAExD,OAAOD,OAAO,CAAC,mBAAMD,KAAA,CAAAS,aAAA,CAACN,cAAc,QAAEG,IAAqB,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;AACzE,CAAC;AAEDF,QAAQ,CAACM,WAAW,GAAG,UAAU;AAEjC,eAAeN,QAAQ","ignoreList":[]}

package/lib/esm/components/opening-times/hint-text/HintText.styles.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+export const StyledHintText = styled.div`
+    border-width: 1px;
+    border-style: solid;
+    border-color: #9f5f00;
+    background-color: #fff3e0;
+    color: #222;
+    padding: 8px 12px;
+
+    border-radius: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.cardBorderRadius;
+}}px;
+    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.cardShadow;
+}});
+`;
+//# sourceMappingURL=HintText.styles.js.map

package/lib/esm/components/opening-times/hint-text/HintText.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HintText.styles.js","names":["styled","StyledHintText","div","_ref","theme","cardBorderRadius","_ref2","cardShadow"],"sources":["../../../../../src/components/opening-times/hint-text/HintText.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\ntype StyledHintTextProp = WithTheme<unknown>;\n\nexport const StyledHintText = styled.div<StyledHintTextProp>`\n    border-width: 1px;\n    border-style: solid;\n    border-color: #9f5f00;\n    background-color: #fff3e0;\n    color: #222;\n    padding: 8px 12px;\n\n    border-radius: ${({ theme }: StyledHintTextProp) => theme.cardBorderRadius}px;\n    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${({ theme }: StyledHintTextProp) => theme.cardShadow});\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAItC,OAAO,MAAMC,cAAc,GAAGD,MAAM,CAACE,GAAuB;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqBC,IAAA;EAAA,IAAC;IAAEC;EAA0B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAACC,gBAAgB;AAAA;AAC9E,4CAA4CC,KAAA;EAAA,IAAC;IAAEF;EAA0B,CAAC,GAAAE,KAAA;EAAA,OAAKF,KAAK,CAACG,UAAU;AAAA;AAC/F,CAAC","ignoreList":[]}

package/lib/esm/components/opening-times/opening-inputs/OpeningInputs.js

@@ -0,0 +1,149 @@
+import { AnimatePresence } from 'framer-motion';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { v4 as uuidV4 } from 'uuid';
+import { OpeningTimesButtonType } from '../../../types/openingTimes';
+import OpeningInput from './opening-input/OpeningInput';
+import { StyledOpeningInputPreview, StyledOpeningInputs } from './OpeningInputs.styles';
+const OpeningInputs = _ref => {
+  let {
+    times,
+    isDisabled,
+    onRemove,
+    onAdd,
+    onInvalid,
+    id,
+    onChange,
+    currentDayId,
+    editMode = false,
+    closedText = ''
+  } = _ref;
+  const [newTimes, setNewTimes] = useState();
+  const [invalidTimes, setInvalidTimes] = useState([]);
+  useEffect(() => {
+    setNewTimes(times);
+  }, [times]);
+  const handleAdd = useCallback(() => {
+    const defaultTime = {
+      start: '08:00',
+      end: '18:00',
+      id: uuidV4()
+    };
+    setNewTimes(prevState => prevState ? [...prevState, defaultTime] : [defaultTime]);
+    if (typeof onAdd === 'function') {
+      onAdd(defaultTime, id);
+    }
+  }, [id, onAdd]);
+  const handleRemove = useCallback(timeId => {
+    setNewTimes(prevState => (prevState ?? []).filter(time => time.id !== timeId));
+    if (typeof onRemove === 'function') {
+      onRemove(timeId);
+    }
+  }, [onRemove]);
+  useEffect(() => {
+    const result = [];
+    for (let i = 0; i < times.length; i++) {
+      const currentTime = times[i];
+      const prevTime = times[i - 1];
+      if (currentTime) {
+        const currStart = new Date(`2000-01-01T${currentTime.start}`);
+        const currEnd = new Date(`2000-01-01T${currentTime.end}`);
+        if (currStart >= currEnd) {
+          result.push(currentTime);
+        }
+        if (prevTime) {
+          const prevEnd = new Date(`2000-01-01T${prevTime.end}`);
+          if (prevEnd > currStart) {
+            result.push(prevTime, currentTime);
+          }
+        }
+      }
+    }
+    const invalidTimeIds = result.map(_ref2 => {
+      let {
+        id: invalidId
+      } = _ref2;
+      return invalidId;
+    });
+    setInvalidTimes(invalidTimeIds);
+    if (typeof onInvalid === 'function') {
+      onInvalid(id, invalidTimeIds);
+    }
+  }, [id, onInvalid, times]);
+  const handleChange = useCallback(newTime => {
+    setNewTimes(prevState => {
+      const updatedTimes = (prevState ?? []).map(time => {
+        if (time.id === newTime.id) {
+          return newTime;
+        }
+        return time;
+      });
+      if (typeof onChange === 'function') {
+        onChange(newTime);
+      }
+      return updatedTimes;
+    });
+  }, [onChange]);
+  const content = useMemo(() => {
+    const items = [];
+    if (!newTimes) {
+      return items;
+    }
+    newTimes.forEach((_ref3, index) => {
+      let {
+        end,
+        start,
+        id: timeId
+      } = _ref3;
+      if (!editMode) {
+        const text = isDisabled ? closedText : `${start} - ${end}`;
+        items.push(/*#__PURE__*/React.createElement(StyledOpeningInputPreview, {
+          key: `opening-times-preview__${id}.${timeId}`
+        }, `${text}${currentDayId && newTimes.length > 1 && index === 0 ? ', ' : ''}`));
+        return;
+      }
+      if (index > 1) {
+        return;
+      }
+      let buttonType = OpeningTimesButtonType.NONE;
+      if (index === 0 && times.length === 1 && !isDisabled) {
+        buttonType = OpeningTimesButtonType.ADD;
+      } else if (index === 1 && !isDisabled) {
+        buttonType = OpeningTimesButtonType.REMOVE;
+      }
+      items.push(/*#__PURE__*/React.createElement(OpeningInput, {
+        key: `opening-times-input__${id}.${timeId}`,
+        start: start,
+        id: timeId,
+        end: end,
+        isDisabled: isDisabled,
+        isInvalid: invalidTimes.includes(timeId),
+        buttonType: buttonType,
+        onAdd: handleAdd,
+        onChange: time => handleChange(time),
+        onRemove: () => handleRemove(timeId)
+      }));
+    });
+    return items;
+  }, [closedText, currentDayId, editMode, handleAdd, handleChange, handleRemove, id, invalidTimes, isDisabled, newTimes, times.length]);
+  const gap = useMemo(() => {
+    if (newTimes && newTimes.length > 1 && editMode || !editMode && currentDayId) {
+      return '8px';
+    }
+    return 0;
+  }, [currentDayId, editMode, newTimes]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledOpeningInputs, {
+    $editMode: !currentDayId,
+    key: `opening-inputs__${id}`,
+    animate: {
+      gap
+    },
+    initial: {
+      gap: 0
+    }
+  }, /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, content)), [content, currentDayId, gap, id]);
+};
+OpeningInputs.displayName = 'OpeningInputs';
+export default OpeningInputs;
+//# sourceMappingURL=OpeningInputs.js.map