intelicoreact 2.0.18 → 2.0.20

package/dist/es/Atomic/FormElements/CheckboxInput/CheckboxInput.styles.css

@@ -0,0 +1,105 @@
+.checkbox-input {
+  --checkbox-input-width: 16px;
+  --checkbox-input-height: 16px;
+  --checkbox-input-margin-right: 5px;
+  --checkbox-input-border-color: #9aa0b9;
+  --checkbox-input-bg-color: #ffff;
+  --checkbox-input-hover-bg-color: rgba(107, 129, 221, 0.2);
+  --checkbox-input-mark-bg-color: #6b81dd;
+  --checkbox-input-label-font-size: 13px;
+  --checkbox-input-disabled-opacity: 0.5;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.checkbox-input input {
+  display: none;
+}
+.checkbox-input_disabled {
+  cursor: auto;
+  pointer-events: none;
+  opacity: var(--checkbox-input-disabled-opacity);
+}
+.checkbox-input:hover .checkbox-input__input {
+  background-color: var(--checkbox-input-hover-bg-color);
+}
+.checkbox-input__input {
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  width: var(--checkbox-input-width);
+  min-width: var(--checkbox-input-width);
+  height: var(--checkbox-input-height);
+  margin-right: var(--checkbox-input-margin-right);
+  cursor: pointer;
+  border: 1px solid var(--checkbox-input-border-color);
+  border-radius: 2px;
+  background-color: var(--checkbox-input-bg-color);
+  transition: background-color 0.2s ease;
+}
+.checkbox-input__input_checked, .checkbox-input__input_indeterminate {
+  border: none;
+}
+.checkbox-input__input .checkbox-input__checkbox:checked ~ .checkbox-input__mark {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 2px;
+}
+.checkbox-input__checkbox {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+}
+.checkbox-input__mark {
+  position: absolute;
+  display: none;
+  width: 100%;
+  height: 100%;
+  background-color: var(--checkbox-input-mark-bg-color);
+}
+.checkbox-input__mark::after {
+  position: absolute;
+  inset: -2px 0 0;
+  width: 4px;
+  height: 8px;
+  margin: auto;
+  content: "";
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  border-radius: 2px;
+  transform: rotate(45deg);
+}
+.checkbox-input__label {
+  font-size: var(--checkbox-input-label-font-size);
+  user-select: none;
+}
+.checkbox-input input[type=checkbox i]:indeterminate + span {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.checkbox-input input[type=checkbox i]:indeterminate + span::after {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: auto;
+  content: "";
+  border: none;
+  background-color: var(--checkbox-input-mark-bg-color);
+  transform: rotate(0deg);
+}
+.checkbox-input input[type=checkbox i]:indeterminate + span::before {
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  left: 50%;
+  width: 45%;
+  content: "";
+  border: solid white;
+  border-width: 0 1px 2px 0;
+  border-radius: 2px;
+  transform: scale(1, 0.9) translateX(-50%) translateY(-50%);
+}

package/dist/es/Atomic/FormElements/CheckboxInput/index.js

@@ -0,0 +1,7 @@
+import CheckboxInput from "./CheckboxInput.js";
+//#region src/Atomic/FormElements/CheckboxInput/index.ts
+var CheckboxInput_default = CheckboxInput;
+//#endregion
+export { CheckboxInput_default as default };
+
+//# sourceMappingURL=index.js.map

package/dist/es/Atomic/FormElements/CheckboxInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/Atomic/FormElements/CheckboxInput/index.ts"],"sourcesContent":["import CheckboxInput from './CheckboxInput';\n\nexport default CheckboxInput;\nexport type { ICheckboxInputProps } from './CheckboxInput.interface';\n"],"mappings":";;AAEA,IAAA,wBAAe"}

package/dist/es/Atomic/FormElements/CheckboxesLine/CheckboxesLine.js

@@ -0,0 +1,32 @@
+import '../../../styles/base.css';
+import CheckboxInput from "../CheckboxInput/CheckboxInput.js";
+import './CheckboxesLine.styles.css';/* empty css                    */
+import cn from "classnames";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Atomic/FormElements/CheckboxesLine/CheckboxesLine.tsx
+var RC = "checkboxes-line";
+var CheckboxesLine = (props) => {
+	const { field, onChange } = props;
+	const { items, value, disabled, isPositionColumn, className, testId = RC } = field ?? (props || {});
+	const handleChange = (val, id) => {
+		onChange(val ? [...value || [], id] : [...value?.filter((el) => el !== id) || []]);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		"data-testid": RC,
+		className: cn(RC, { [`${RC}_column`]: isPositionColumn }, className),
+		children: items?.map((item) => /* @__PURE__ */ jsx(CheckboxInput, {
+			testId: item?.testId || testId,
+			id: item.id,
+			className: `${RC}__checkbox-input`,
+			label: item.label || "",
+			value: value?.includes?.(item.id) || false,
+			onChange: (val) => handleChange(val, item.id),
+			disabled: disabled || item.disabled
+		}, item.label)) || null
+	});
+};
+//#endregion
+export { CheckboxesLine as default };
+
+//# sourceMappingURL=CheckboxesLine.js.map

package/dist/es/Atomic/FormElements/CheckboxesLine/CheckboxesLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxesLine.js","names":[],"sources":["../../../../../src/Atomic/FormElements/CheckboxesLine/CheckboxesLine.tsx"],"sourcesContent":["import type { ICheckboxLineProps } from './CheckboxesLine.interface';\nimport cn from 'classnames';\n\nimport React from 'react';\n\nimport Checkbox from '../CheckboxInput/CheckboxInput';\n\nimport './CheckboxesLine.scss';\n\nconst RC = 'checkboxes-line';\n\nconst CheckboxesLine: React.FC<ICheckboxLineProps> = (props) => {\n  const { field, onChange } = props;\n  const { items, value, disabled, isPositionColumn, className, testId = RC } = field ?? (props || {});\n\n  const handleChange = (val: boolean, id: string | number): void => {\n    onChange(val ? [...(value || []), id] : [...(value?.filter(el => el !== id) || [])]);\n  };\n\n  return (\n    <div data-testid={RC} className={cn(RC, { [`${RC}_column`]: isPositionColumn }, className)}>\n      {items?.map(item => (\n        <Checkbox\n          testId={item?.testId || testId}\n          id={item.id}\n          className={`${RC}__checkbox-input`}\n          key={item.label}\n          label={item.label || ''}\n          value={value?.includes?.(item.id) || false}\n          onChange={val => handleChange(val, item.id)}\n          disabled={disabled || item.disabled}\n        />\n      )) || null}\n    </div>\n  );\n};\n\nexport default CheckboxesLine;\n"],"mappings":";;;;;;AASA,IAAM,KAAK;AAEX,IAAM,kBAAgD,UAAU;CAC9D,MAAM,EAAE,OAAO,aAAa;CAC5B,MAAM,EAAE,OAAO,OAAO,UAAU,kBAAkB,WAAW,SAAS,OAAO,UAAU,SAAS,CAAC;CAEjG,MAAM,gBAAgB,KAAc,OAA8B;EAChE,SAAS,MAAM,CAAC,GAAI,SAAS,CAAC,GAAI,EAAE,IAAI,CAAC,GAAI,OAAO,QAAO,OAAM,OAAO,EAAE,KAAK,CAAC,CAAE,CAAC;CACrF;CAEA,OACE,oBAAC,OAAD;EAAK,eAAa;EAAI,WAAW,GAAG,IAAI,GAAG,GAAG,GAAG,WAAW,iBAAiB,GAAG,SAAS;YACtF,OAAO,KAAI,SACV,oBAAC,eAAD;GACE,QAAQ,MAAM,UAAU;GACxB,IAAI,KAAK;GACT,WAAW,GAAG,GAAG;GAEjB,OAAO,KAAK,SAAS;GACrB,OAAO,OAAO,WAAW,KAAK,EAAE,KAAK;GACrC,WAAU,QAAO,aAAa,KAAK,KAAK,EAAE;GAC1C,UAAU,YAAY,KAAK;EAC5B,GALM,KAAK,KAKX,CACF,KAAK;CACH,CAAA;AAET"}

package/dist/es/Atomic/FormElements/CheckboxesLine/CheckboxesLine.styles.css

@@ -0,0 +1,26 @@
+.checkboxes-line {
+  --checkboxes-line-margin-right: 10px;
+  --checkboxes-line-margin-bottom: 10px;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+.checkboxes-line__checkbox-input {
+  width: fit-content;
+  margin-right: var(--checkboxes-line-margin-right);
+}
+.checkboxes-line__checkbox-input:last-of-type {
+  margin-right: 0;
+}
+.checkboxes-line_column {
+  flex-flow: column wrap;
+  align-items: flex-start;
+}
+.checkboxes-line_column .checkboxes-line__checkbox-input {
+  margin-right: 0;
+  margin-bottom: var(--checkboxes-line-margin-bottom);
+}
+.checkboxes-line_column .checkboxes-line__checkbox-input:last-of-type {
+  margin-bottom: 0;
+}

package/dist/es/Atomic/FormElements/CheckboxesLine/index.js

@@ -0,0 +1,7 @@
+import CheckboxesLine from "./CheckboxesLine.js";
+//#region src/Atomic/FormElements/CheckboxesLine/index.ts
+var CheckboxesLine_default = CheckboxesLine;
+//#endregion
+export { CheckboxesLine_default as default };
+
+//# sourceMappingURL=index.js.map

package/dist/es/Atomic/FormElements/CheckboxesLine/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/Atomic/FormElements/CheckboxesLine/index.ts"],"sourcesContent":["import CheckboxesLine from './CheckboxesLine';\n\nexport default CheckboxesLine;\nexport type { ICheckboxLineProps } from './CheckboxesLine.interface';\n"],"mappings":";;AAEA,IAAA,yBAAe"}

package/dist/es/Atomic/FormElements/Datepicker/Datepicker.js

@@ -0,0 +1,307 @@
+import '../../../styles/base.css';
+import Button from "../../UI/Button/Button.js";
+import DatepickerCalendar from "./components/DatepickerCalendar.js";
+import Langs from "../../../Langs.js";
+import Input from "../Input/Input.js";
+import Dropdown from "../Dropdown/Dropdown.js";
+import Switcher from "../Switcher/Switcher.js";
+import './Datepicker.styles.css';/* empty css                */
+import cn from "classnames";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import moment from "moment";
+//#region src/Atomic/FormElements/Datepicker/Datepicker.tsx
+function padTime(time) {
+	return `${time.toString().padStart(2, "0")}:00`;
+}
+var Datepicker = ({ isCompareHidden, limitRange, onChange, values, onChangeCompare, onCancel, getSelectedMode, onChangeInterval }) => {
+	const { start = null, end = null, compare = false } = values;
+	const txt = Langs[globalThis.lng];
+	const startDateInputRef = useRef(null);
+	const endDateInputRef = useRef(null);
+	const [startDate, setStartDate] = useState(start);
+	const [endDate, setEndDate] = useState(end);
+	const [startDateInput, setStartDateInput] = useState(start);
+	const [endDateInput, setEndDateInput] = useState(end);
+	const [startHour, setStartHour] = useState(start ? moment(start).hour() : 0);
+	const [endHour, setEndHour] = useState(end ? moment(end).hour() : 0);
+	const [isCompare, setIsCompare] = useState(compare);
+	const [date1, setDate1] = useState(start ? moment(start).toDate() : moment().subtract(1, "month").toDate());
+	const [date2, setDate2] = useState(end ? moment(end).toDate() : moment().toDate());
+	const [isStartFocused, setIsStartFocused] = useState(false);
+	const [isEndFocused, setIsEndFocused] = useState(false);
+	const [hoverStatus, setHoverStatus] = useState(null);
+	const dateInterval = getSelectedMode?.({
+		start: startDate,
+		end: endDate
+	});
+	const isNearby = useMemo(() => moment(date2).subtract(1, "month").isSame(moment(date1), "month"), [date1, date2]);
+	const isPreviousPeriodShowed = useMemo(() => isCompare && !isCompareHidden && startDate && endDate, [
+		startDate,
+		endDate,
+		isCompare
+	]);
+	const prevEndHour = useRef(endHour);
+	const getStartHourItems = () => Array.from({ length: 24 }, (_, hour) => ({
+		label: padTime(hour),
+		value: hour,
+		disabled: !!(startDate && endDate && moment(startDate).isSame(endDate, "day") && endHour <= hour)
+	}));
+	const getEndHourItems = () => Array.from({ length: 24 }, (_, hour) => ({
+		label: padTime(hour + 1),
+		value: hour === 23 ? 0 : hour + 1,
+		disabled: !!(startDate && endDate && (moment(startDate).isSame(endDate, "day") || moment(startDate).isSame(moment(endDate).subtract(1, "days"), "day") && endHour === 0) && hour < startHour)
+	}));
+	const startPrevDate = useMemo(() => {
+		if (isPreviousPeriodShowed && startDate && endDate) {
+			const intervalHours = moment(endDate).diff(startDate, "hours");
+			return moment(startDate).subtract(intervalHours, "hours").toDate();
+		}
+		return null;
+	}, [
+		startDate,
+		endDate,
+		isCompare
+	]);
+	const endPrevDate = useMemo(() => {
+		return isPreviousPeriodShowed && startDate ? startDate : null;
+	}, [startDate, isCompare]);
+	const title = useMemo(() => {
+		if (isCompare && !isCompareHidden && startPrevDate && endPrevDate) return `${moment(startPrevDate).format("ll")} (${moment(startPrevDate).format("HH:mm")}) - ${moment(endPrevDate).format("ll")} (${moment(endPrevDate).format("HH:mm")})`;
+		return "";
+	}, [
+		startPrevDate,
+		endPrevDate,
+		isCompare
+	]);
+	const subtractDay = (date) => endHour === 0 ? moment(date).subtract(1, "days") : moment(date);
+	const addDay = (date) => endHour === 0 ? moment(date).add(1, "days") : moment(date);
+	useEffect(() => {
+		if (startDate && endDate && moment(startDate).isSameOrAfter(endDate)) {
+			const newStart = moment(endDate).subtract(1, "d").toDate();
+			setStartDate(newStart);
+			setDate1(newStart);
+		}
+	}, [startDate]);
+	useEffect(() => {
+		if (startDate && endDate && moment(endDate).isSameOrBefore(startDate)) {
+			const newEnd = moment(startDate).add(1, "d").toDate();
+			setEndDate(newEnd);
+			setDate2(newEnd);
+		}
+	}, [endDate]);
+	useEffect(() => {
+		setStartDateInput(startDate);
+		setEndDateInput(endDate);
+		if (startDate && endDate && moment(startDate).isBefore(moment(endDate), "month")) {
+			setDate1(startDate);
+			setDate2(endDate);
+		}
+	}, [startDate, endDate]);
+	useEffect(() => {
+		if (moment(date1).isSameOrAfter(moment(date2), "month")) setDate1(moment(date2).subtract(1, "month").toDate());
+	}, [date1, date2]);
+	useEffect(() => {
+		if (dateInterval) onChangeInterval?.(dateInterval);
+	}, [dateInterval]);
+	const handleClick = (date) => {
+		prevEndHour.current = 0;
+		if (!startDate || startDate && endDate && !(moment(startDate).add(1, "d").isSame(endDate, "day") && endHour === 0)) {
+			setStartDate(moment(date).startOf("day").toDate());
+			setEndDate(moment(date).add(1, "d").startOf("day").toDate());
+			setStartHour(0);
+			setEndHour(0);
+		} else if (moment(date).isBefore(moment(startDate), "day")) {
+			setEndDate(moment(startDate).add(1, "d").startOf("day").toDate());
+			setStartDate(moment(date).set("hour", startHour).toDate());
+		} else if (moment(date).isAfter(moment(startDate), "day")) setEndDate(moment(date).add(1, "d").startOf("day").toDate());
+		setHoverStatus(null);
+	};
+	let timerId;
+	const handleHover = (date) => {
+		if (!date) {
+			timerId = setTimeout(() => setHoverStatus(null), 400);
+			return;
+		}
+		if (timerId) clearTimeout(timerId);
+		if (startDate && endDate && moment(startDate).add(1, "d").isSame(endDate, "day") && endHour === 0) if (moment(date).isAfter(moment(startDate), "day")) setHoverStatus("end");
+		else if (moment(date).isBefore(moment(startDate), "day")) setHoverStatus("start");
+		else setHoverStatus(null);
+		else setHoverStatus("start");
+	};
+	const handleChangeStartHour = (value) => {
+		const val = Number(value);
+		setStartHour(val);
+		if (startDate) setStartDate(moment(startDate).set("hour", val).toDate());
+	};
+	const handleChangeEndHour = (value) => {
+		const newHour = Number(value);
+		setEndHour(newHour);
+		if (!endDate) return;
+		let newEndDate;
+		if (prevEndHour.current === 0 && newHour !== 0) newEndDate = moment(endDate).subtract(1, "days");
+		else if (prevEndHour.current !== 0 && newHour === 0) newEndDate = moment(endDate).add(1, "days");
+		else newEndDate = moment(endDate);
+		prevEndHour.current = newHour;
+		setEndDate(moment(newEndDate).set("hour", newHour).toDate());
+	};
+	const handleStartDateFocus = () => {
+		setIsStartFocused(true);
+		if (startDate) setStartDateInput(moment(startDate).format("L"));
+	};
+	const handleEndDateFocus = () => {
+		setIsEndFocused(true);
+		if (endDate) setEndDateInput(moment(subtractDay(endDate)).format("L"));
+	};
+	const handleStartDateBlur = () => {
+		if (typeof startDateInput === "string" && moment(startDateInput).isValid()) {
+			const newDate = moment(startDateInput).set("hour", startHour).toDate();
+			setStartDate(newDate);
+			setDate1(moment(newDate).isSameOrAfter(moment(date2), "month") ? moment(date2).subtract(1, "month").toDate() : newDate);
+		} else setStartDateInput(startDate);
+		setIsStartFocused(false);
+		startDateInputRef.current?.blur();
+	};
+	const handleEndDateBlur = () => {
+		if (typeof endDateInput === "string" && moment(endDateInput).isValid()) {
+			const newDate = moment(endDateInput).set("hour", endHour).toDate();
+			const finalDate = addDay(newDate).toDate();
+			setEndDate(finalDate);
+			setDate2(finalDate);
+		} else setEndDateInput(endDate);
+		setIsEndFocused(false);
+		endDateInputRef.current?.blur();
+	};
+	const handleKeyPressed = (e, callback) => {
+		if (e.key === "Enter") callback();
+	};
+	const renderButtons = () => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+		className: "plr15 mr5",
+		onClick: onCancel,
+		children: txt.buttons.cancel
+	}), /* @__PURE__ */ jsx(Button, {
+		className: "plr20",
+		disabled: !startDate || !endDate,
+		onClick: () => {
+			if (!startDate || !endDate) return;
+			onChange?.({
+				start: startDate,
+				end: endDate,
+				startPrevDate,
+				endPrevDate,
+				compare: isCompare
+			});
+		},
+		children: txt.buttons.apply
+	})] });
+	const renderPreviousPeriod = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+		txt.labels.previousPeriod,
+		":",
+		" ",
+		/* @__PURE__ */ jsx("span", {
+			className: "date-picker__previous-period-interval",
+			children: title
+		})
+	] });
+	return /* @__PURE__ */ jsxs("div", {
+		className: "date-picker",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "date-picker__header",
+				children: [
+					/* @__PURE__ */ jsx(Input, {
+						testId: "datepicker_start-date-input",
+						className: cn("mr5", { "date-picker-text-input--active": hoverStatus === "start" }),
+						value: isStartFocused ? String(startDateInput) : moment(startDate).format("ll"),
+						disabled: !startDate,
+						onChange: (value) => setStartDateInput(value),
+						onFocus: handleStartDateFocus,
+						onBlur: handleStartDateBlur,
+						onKeyDown: (_keyCode, e) => handleKeyPressed(e, handleStartDateBlur),
+						ref: startDateInputRef
+					}),
+					/* @__PURE__ */ jsx(Dropdown, {
+						testId: "datepicker_start-hour-select-input",
+						onChange: handleChangeStartHour,
+						value: startHour,
+						options: getStartHourItems(),
+						disabled: !startDate
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "pl5 pr5 date-picker__header--gray",
+						children: "—"
+					}),
+					/* @__PURE__ */ jsx(Input, {
+						testId: "datepicker_end-date-input",
+						className: cn("mr5", { "date-picker-text-input--active": hoverStatus === "end" }),
+						value: isEndFocused ? String(endDateInput) : endDate ? moment(subtractDay(endDate)).format("ll") : "",
+						disabled: !endDate,
+						onChange: (value) => setEndDateInput(value),
+						onFocus: handleEndDateFocus,
+						onBlur: handleEndDateBlur,
+						onKeyDown: (_keyCode, e) => handleKeyPressed(e, handleEndDateBlur),
+						ref: endDateInputRef
+					}),
+					/* @__PURE__ */ jsx(Dropdown, {
+						testId: "datepicker_end-hour-select-input",
+						onChange: handleChangeEndHour,
+						value: endHour,
+						options: getEndHourItems(),
+						disabled: !endDate
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "date-picker__previous-period",
+				children: isCompare && !isCompareHidden && startDate && endDate && renderPreviousPeriod()
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "date-picker__calendars",
+				children: [/* @__PURE__ */ jsx(DatepickerCalendar, {
+					date: date1,
+					setDate: setDate1,
+					allowNext: !isNearby,
+					startDate,
+					endDate,
+					startPrevDate,
+					endPrevDate,
+					onClick: handleClick,
+					onHover: handleHover,
+					limitRange
+				}), /* @__PURE__ */ jsx(DatepickerCalendar, {
+					date: date2,
+					setDate: setDate2,
+					allowPrev: !isNearby,
+					startDate,
+					endDate,
+					startPrevDate,
+					endPrevDate,
+					onClick: handleClick,
+					onHover: handleHover
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "date-picker__footer j46",
+				children: [!isCompareHidden && /* @__PURE__ */ jsx("div", {
+					className: "j4",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "mr5",
+						children: /* @__PURE__ */ jsx(Switcher, {
+							testId: "datepicker_compare",
+							label: txt.labels.compare,
+							isActive: isCompare,
+							onChange: () => {
+								onChangeCompare?.(!isCompare);
+								setIsCompare((state) => !state);
+							}
+						})
+					})
+				}), /* @__PURE__ */ jsx("div", { children: renderButtons() })]
+			})
+		]
+	});
+};
+//#endregion
+export { Datepicker as default };
+
+//# sourceMappingURL=Datepicker.js.map

package/dist/es/Atomic/FormElements/Datepicker/Datepicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Datepicker.js","names":[],"sources":["../../../../../src/Atomic/FormElements/Datepicker/Datepicker.tsx"],"sourcesContent":["import type { KeyboardEvent } from 'react';\nimport type { DatepickerProps, DateRange } from './Datepicker.props';\n\nimport cn from 'classnames';\nimport moment from 'moment';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\n\nimport Langs from '../../../Langs';\nimport Button from '../../UI/Button/Button';\nimport Dropdown from '../Dropdown/Dropdown';\nimport Input from '../Input/Input';\nimport Switcher from '../Switcher/Switcher';\nimport DatepickerCalendar from './components/DatepickerCalendar';\n\nimport './Datepicker.scss';\n\nfunction padTime(time: number): string {\n  return `${time.toString().padStart(2, '0')}:00`;\n}\n\nconst Datepicker: React.FC<DatepickerProps> = ({\n  isCompareHidden,\n  limitRange,\n  onChange,\n  values,\n  onChangeCompare,\n  onCancel,\n  getSelectedMode,\n  onChangeInterval,\n}) => {\n  const { start = null, end = null, compare = false } = values as DateRange;\n  // @ts-ignore\n  const txt = Langs[globalThis.lng as keyof typeof Langs];\n\n  const startDateInputRef = useRef<HTMLInputElement>(null);\n  const endDateInputRef = useRef<HTMLInputElement>(null);\n\n  const [startDate, setStartDate] = useState<Date | null>(start);\n  const [endDate, setEndDate] = useState<Date | null>(end);\n  const [startDateInput, setStartDateInput] = useState<string | Date | null>(start);\n  const [endDateInput, setEndDateInput] = useState<string | Date | null>(end);\n  const [startHour, setStartHour] = useState<number>(start ? moment(start).hour() : 0);\n  const [endHour, setEndHour] = useState<number>(end ? moment(end).hour() : 0);\n  const [isCompare, setIsCompare] = useState<boolean>(compare);\n  const [date1, setDate1] = useState<Date>(\n    start ? moment(start).toDate() : moment().subtract(1, 'month').toDate(),\n  );\n  const [date2, setDate2] = useState<Date>(\n    end ? moment(end).toDate() : moment().toDate(),\n  );\n  const [isStartFocused, setIsStartFocused] = useState(false);\n  const [isEndFocused, setIsEndFocused] = useState(false);\n  const [hoverStatus, setHoverStatus] = useState<'start' | 'end' | null>(null);\n\n  const dateInterval = getSelectedMode?.({ start: startDate, end: endDate });\n\n  const isNearby = useMemo(\n    () => moment(date2).subtract(1, 'month').isSame(moment(date1), 'month'),\n    [date1, date2],\n  );\n\n  const isPreviousPeriodShowed = useMemo(\n    () => isCompare && !isCompareHidden && startDate && endDate,\n    [startDate, endDate, isCompare],\n  );\n\n  const prevEndHour = useRef<number>(endHour);\n\n  const getStartHourItems = (): { label: string; value: number; disabled: boolean }[] =>\n    Array.from({ length: 24 }, (_, hour) => ({\n      label: padTime(hour),\n      value: hour,\n      disabled: !!(\n        startDate\n        && endDate\n        && moment(startDate).isSame(endDate, 'day')\n        && endHour <= hour\n      ),\n    }));\n\n  const getEndHourItems = (): { label: string; value: number; disabled: boolean }[] =>\n    Array.from({ length: 24 }, (_, hour) => ({\n      label: padTime(hour + 1),\n      value: hour === 23 ? 0 : hour + 1,\n      disabled: !!(\n        startDate\n        && endDate\n        && (moment(startDate).isSame(endDate, 'day')\n          || (moment(startDate).isSame(moment(endDate).subtract(1, 'days'), 'day')\n            && endHour === 0))\n          && hour < startHour\n      ),\n    }));\n\n  const startPrevDate = useMemo(() => {\n    if (isPreviousPeriodShowed && startDate && endDate) {\n      const intervalHours = moment(endDate).diff(startDate, 'hours');\n      return moment(startDate).subtract(intervalHours, 'hours').toDate();\n    }\n    return null;\n  }, [startDate, endDate, isCompare]);\n\n  const endPrevDate = useMemo(() => {\n    return isPreviousPeriodShowed && startDate ? startDate : null;\n  }, [startDate, isCompare]);\n\n  const title = useMemo(() => {\n    if (isCompare && !isCompareHidden && startPrevDate && endPrevDate) {\n      return `${moment(startPrevDate).format('ll')} (${moment(startPrevDate).format('HH:mm')}) - ${moment(\n        endPrevDate,\n      ).format('ll')} (${moment(endPrevDate).format('HH:mm')})`;\n    }\n    return '';\n  }, [startPrevDate, endPrevDate, isCompare]);\n\n  const subtractDay = (date: Date): moment.Moment => (endHour === 0 ? moment(date).subtract(1, 'days') : moment(date));\n  const addDay = (date: Date): moment.Moment => (endHour === 0 ? moment(date).add(1, 'days') : moment(date));\n\n  useEffect(() => {\n    if (startDate && endDate && moment(startDate).isSameOrAfter(endDate)) {\n      const newStart = moment(endDate).subtract(1, 'd').toDate();\n      setStartDate(newStart);\n      setDate1(newStart);\n    }\n  }, [startDate]);\n\n  useEffect(() => {\n    if (startDate && endDate && moment(endDate).isSameOrBefore(startDate)) {\n      const newEnd = moment(startDate).add(1, 'd').toDate();\n      setEndDate(newEnd);\n      setDate2(newEnd);\n    }\n  }, [endDate]);\n\n  useEffect(() => {\n    setStartDateInput(startDate);\n    setEndDateInput(endDate);\n    if (startDate && endDate && moment(startDate).isBefore(moment(endDate), 'month')) {\n      setDate1(startDate);\n      setDate2(endDate);\n    }\n  }, [startDate, endDate]);\n\n  useEffect(() => {\n    if (moment(date1).isSameOrAfter(moment(date2), 'month')) {\n      setDate1(moment(date2).subtract(1, 'month').toDate());\n    }\n  }, [date1, date2]);\n\n  useEffect(() => {\n    if (dateInterval) onChangeInterval?.(dateInterval);\n  }, [dateInterval]);\n\n  const handleClick = (date: Date): void => {\n    prevEndHour.current = 0;\n    if (\n      !startDate\n      || (startDate\n        && endDate\n        && !(\n          moment(startDate).add(1, 'd').isSame(endDate, 'day')\n          && endHour === 0\n        ))\n    ) {\n      setStartDate(moment(date).startOf('day').toDate());\n      setEndDate(moment(date).add(1, 'd').startOf('day').toDate());\n      setStartHour(0);\n      setEndHour(0);\n    }\n    else if (moment(date).isBefore(moment(startDate), 'day')) {\n      setEndDate(moment(startDate).add(1, 'd').startOf('day').toDate());\n      setStartDate(moment(date).set('hour', startHour).toDate());\n    }\n    else if (moment(date).isAfter(moment(startDate), 'day')) {\n      setEndDate(moment(date).add(1, 'd').startOf('day').toDate());\n    }\n    setHoverStatus(null);\n  };\n\n  let timerId: ReturnType<typeof setTimeout>;\n\n  const handleHover = (date: Date | null): void => {\n    if (!date) {\n      timerId = setTimeout(() => setHoverStatus(null), 400);\n      return;\n    }\n    if (timerId) clearTimeout(timerId);\n    if (startDate && endDate && moment(startDate).add(1, 'd').isSame(endDate, 'day') && endHour === 0) {\n      if (moment(date).isAfter(moment(startDate), 'day')) setHoverStatus('end');\n      else if (moment(date).isBefore(moment(startDate), 'day')) setHoverStatus('start');\n      else setHoverStatus(null);\n    }\n    else {\n      setHoverStatus('start');\n    }\n  };\n\n  const handleChangeStartHour = (value: string | number): void => {\n    const val = Number(value);\n    setStartHour(val);\n    if (startDate) setStartDate(moment(startDate).set('hour', val).toDate());\n  };\n\n  const handleChangeEndHour = (value: string | number): void => {\n    const newHour = Number(value);\n    setEndHour(newHour);\n    if (!endDate) return;\n\n    let newEndDate: Date | moment.Moment;\n    if (prevEndHour.current === 0 && newHour !== 0) {\n      newEndDate = moment(endDate).subtract(1, 'days');\n    }\n    else if (prevEndHour.current !== 0 && newHour === 0) {\n      newEndDate = moment(endDate).add(1, 'days');\n    }\n    else {\n      newEndDate = moment(endDate);\n    }\n    prevEndHour.current = newHour;\n    setEndDate(moment(newEndDate).set('hour', newHour).toDate());\n  };\n\n  const handleStartDateFocus = (): void => {\n    setIsStartFocused(true);\n    if (startDate) setStartDateInput(moment(startDate).format('L'));\n  };\n\n  const handleEndDateFocus = (): void => {\n    setIsEndFocused(true);\n    if (endDate) setEndDateInput(moment(subtractDay(endDate)).format('L'));\n  };\n\n  const handleStartDateBlur = (): void => {\n    if (typeof startDateInput === 'string' && moment(startDateInput).isValid()) {\n      const newDate = moment(startDateInput).set('hour', startHour).toDate();\n      setStartDate(newDate);\n      setDate1(\n        moment(newDate).isSameOrAfter(moment(date2), 'month')\n          ? moment(date2).subtract(1, 'month').toDate()\n          : newDate,\n      );\n    }\n    else {\n      setStartDateInput(startDate);\n    }\n    setIsStartFocused(false);\n    startDateInputRef.current?.blur();\n  };\n\n  const handleEndDateBlur = (): void => {\n    if (typeof endDateInput === 'string' && moment(endDateInput).isValid()) {\n      const newDate = moment(endDateInput).set('hour', endHour).toDate();\n      const finalDate = addDay(newDate).toDate();\n      setEndDate(finalDate);\n      setDate2(finalDate);\n    }\n    else {\n      setEndDateInput(endDate);\n    }\n    setIsEndFocused(false);\n    endDateInputRef.current?.blur();\n  };\n\n  const handleKeyPressed = (e: KeyboardEvent<HTMLInputElement>, callback: () => void): void => {\n    if (e.key === 'Enter') callback();\n  };\n\n  const renderButtons = (): React.ReactNode => (\n    <>\n      <Button className=\"plr15 mr5\" onClick={onCancel}>\n        {txt.buttons.cancel}\n      </Button>\n      <Button\n        className=\"plr20\"\n        // variant=\"filled\"\n        disabled={!startDate || !endDate}\n        onClick={() => {\n          if (!startDate || !endDate) return;\n          onChange?.({\n            start: startDate,\n            end: endDate,\n            startPrevDate,\n            endPrevDate,\n            compare: isCompare,\n          });\n        }}\n      >\n        {txt.buttons.apply}\n      </Button>\n    </>\n  );\n\n  const renderPreviousPeriod = (): React.ReactNode => (\n    <>\n      {/* @ts-ignore */}\n      {txt.labels.previousPeriod}\n      :\n      {' '}\n      <span className=\"date-picker__previous-period-interval\">{title}</span>\n    </>\n  );\n\n  return (\n    <div className=\"date-picker\">\n      <div className=\"date-picker__header\">\n        <Input\n          testId=\"datepicker_start-date-input\"\n          className={cn('mr5', {\n            'date-picker-text-input--active': hoverStatus === 'start',\n          })}\n          value={\n            isStartFocused ? String(startDateInput) : moment(startDate).format('ll')\n          }\n          disabled={!startDate}\n          onChange={value => setStartDateInput(value)}\n          onFocus={handleStartDateFocus}\n          onBlur={handleStartDateBlur}\n          onKeyDown={(_keyCode: string | number, e: KeyboardEvent<HTMLInputElement>) => handleKeyPressed(e, handleStartDateBlur)}\n          ref={startDateInputRef}\n        />\n        <Dropdown\n          testId=\"datepicker_start-hour-select-input\"\n          onChange={handleChangeStartHour}\n          value={startHour}\n          options={getStartHourItems()}\n          disabled={!startDate}\n        />\n        <div className=\"pl5 pr5 date-picker__header--gray\">—</div>\n        <Input\n          testId=\"datepicker_end-date-input\"\n          className={cn('mr5', {\n            'date-picker-text-input--active': hoverStatus === 'end',\n          })}\n          value={\n            isEndFocused\n              ? String(endDateInput)\n              : endDate\n                ? moment(subtractDay(endDate)).format('ll')\n                : ''\n          }\n          disabled={!endDate}\n          onChange={(value: string) => setEndDateInput(value)}\n          onFocus={handleEndDateFocus}\n          onBlur={handleEndDateBlur}\n          onKeyDown={(_keyCode, e: KeyboardEvent<HTMLInputElement>) => handleKeyPressed(e, handleEndDateBlur)}\n          ref={endDateInputRef}\n        />\n        <Dropdown\n          testId=\"datepicker_end-hour-select-input\"\n          onChange={handleChangeEndHour}\n          value={endHour}\n          options={getEndHourItems()}\n          disabled={!endDate}\n        />\n      </div>\n      <div className=\"date-picker__previous-period\">\n        {isCompare\n          && !isCompareHidden\n          && startDate\n          && endDate\n          && renderPreviousPeriod()}\n      </div>\n      <div className=\"date-picker__calendars\">\n        <DatepickerCalendar\n          date={date1}\n          setDate={setDate1}\n          allowNext={!isNearby}\n          startDate={startDate}\n          endDate={endDate}\n          startPrevDate={startPrevDate}\n          endPrevDate={endPrevDate}\n          onClick={handleClick}\n          onHover={handleHover}\n          limitRange={limitRange}\n        />\n        <DatepickerCalendar\n          date={date2}\n          setDate={setDate2}\n          allowPrev={!isNearby}\n          startDate={startDate}\n          endDate={endDate}\n          startPrevDate={startPrevDate}\n          endPrevDate={endPrevDate}\n          onClick={handleClick}\n          onHover={handleHover}\n        />\n      </div>\n      <div className=\"date-picker__footer j46\">\n        {!isCompareHidden && (\n          <div className=\"j4\">\n            <div className=\"mr5\">\n              <Switcher\n                testId=\"datepicker_compare\"\n                // @ts-ignore\n                label={txt.labels.compare}\n                isActive={isCompare}\n                onChange={() => {\n                  onChangeCompare?.(!isCompare);\n                  setIsCompare(state => !state);\n                }}\n              />\n            </div>\n          </div>\n        )}\n        <div>{renderButtons()}</div>\n      </div>\n    </div>\n  );\n};\n\nexport default Datepicker;\n"],"mappings":"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"}

package/dist/es/Atomic/FormElements/Datepicker/components/DatepickerCalendar.js

@@ -0,0 +1,95 @@
+import cn from "classnames";
+import { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import moment from "moment";
+import * as Icon from "react-feather";
+//#region src/Atomic/FormElements/Datepicker/components/DatepickerCalendar.tsx
+var DatepickerCalendar = ({ date, setDate, startDate, endDate, allowPrev = true, allowNext = true, onClick, onHover, startPrevDate, endPrevDate, limitRange }) => {
+	const [days, setDays] = useState({});
+	const title = useMemo(() => `${moment(date).format("MMM")} ${moment(date).format("YYYY")}`, [date]);
+	useEffect(() => {
+		const result = {};
+		const day = moment(date).startOf("month");
+		const daysInMonth = day.daysInMonth();
+		for (let d = 0; d < daysInMonth; d++) {
+			let week = day.week();
+			if (day.month() === 11 && week === 1) week = 53;
+			if (day.month() === 0 && week === 53) week = 0;
+			if (!result[week]) result[week] = {};
+			result[week][day.weekday()] = { date: day.toDate() };
+			day.add(1, "d");
+		}
+		setDays(result);
+	}, [date]);
+	const renderDay = (week, dayOfWeek) => {
+		const day = days[+week]?.[dayOfWeek];
+		const isFutureDay = day && moment(day.date).isAfter(moment(), "day");
+		const isPastDay = limitRange ? day && moment(day.date).isBefore(moment().subtract(limitRange, "days"), "day") : null;
+		const isRangeEnd = day && (moment(day.date).isSame(startDate, "day") || moment(day.date).isSame(moment(endDate).subtract(1, "hour"), "day"));
+		const isRangeInside = day && startDate && endDate && moment(day.date).isAfter(startDate, "day") && moment(day.date).isBefore(moment(endDate).subtract(1, "hour"), "day");
+		const isPrevRangeEnd = day && (moment(day.date).isSame(startPrevDate, "day") || moment(day.date).isSame(moment(endPrevDate).subtract(1, "day"), "day"));
+		const isPrevRangeInside = day && startPrevDate && endPrevDate && moment(day.date).isAfter(startPrevDate, "day") && moment(day.date).isBefore(moment(endPrevDate).subtract(1, "day"), "day");
+		return /* @__PURE__ */ jsx("div", {
+			className: cn("calendar__day", { "calendar__day--clickable": day }, { "calendar__day--disabled": isFutureDay || isPastDay }, { "calendar__day--range-end": isRangeEnd }, { "calendar__day--range-inside": isRangeInside }, { "calendar__day--prev-range-end": isPrevRangeEnd }, { "calendar__day--prev-range-inside": isPrevRangeInside }),
+			onClick: day && !isFutureDay ? () => onClick(day.date) : void 0,
+			onMouseOver: day && !isFutureDay ? () => onHover(day.date) : void 0,
+			onMouseLeave: () => onHover(null),
+			children: day && day.date.getDate()
+		}, `${week}_${dayOfWeek}`);
+	};
+	const handlePrev = () => {
+		setDate(moment(date).subtract(1, "month").toDate());
+	};
+	const handleNext = () => {
+		setDate(moment(date).add(1, "month").toDate());
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "calendar",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "calendar-header",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "calendar-header__prev",
+						children: allowPrev && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"data-testid": "datepicker-calendar-prev",
+							onClick: handlePrev,
+							"aria-label": "Previous month",
+							children: /* @__PURE__ */ jsx(Icon.ChevronLeft, { size: 16 })
+						})
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "calendar-header__title",
+						children: title
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "calendar-header__next",
+						children: allowNext && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"data-testid": "datepicker-calendar-next",
+							onClick: handleNext,
+							"aria-label": "Next month",
+							children: /* @__PURE__ */ jsx(Icon.ChevronRight, { size: 16 })
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "calendar__week",
+				children: Array.from({ length: 7 }, (_, dayOfWeek) => /* @__PURE__ */ jsx("div", {
+					className: "calendar__day calendar__day--title",
+					children: moment().weekday(dayOfWeek).format("dd").charAt(0)
+				}, `day-of-week_${dayOfWeek}`))
+			}),
+			Object.keys(days).map((week, index) => /* @__PURE__ */ jsx("div", {
+				className: "calendar__week",
+				children: Array.from({ length: 7 }, (_, dayOfWeek) => renderDay(week, dayOfWeek))
+			}, `week_${index}`))
+		]
+	});
+};
+//#endregion
+export { DatepickerCalendar as default };
+
+//# sourceMappingURL=DatepickerCalendar.js.map