colibri-ui 0.7.57 → 0.7.59

package/esm/Calendar/index.js

@@ -0,0 +1,186 @@
+import { __assign } from 'tslib';
+import React__default, { useRef, useState, useEffect, useCallback } from 'react';
+import classNames from 'classnames/bind';
+import { requestIdleCallback } from '../libs/requestIdleCallback/index.js';
+import { getDaysDiff } from '../helpers/date/index.js';
+import { Month } from './components/Month/Month.js';
+import { getStartMonth } from './utils/getStartMonth.js';
+import { Presets } from './components/Presets/index.js';
+import { getNumberOfMonthsBetweenDates } from './utils/getNumberOfMonthsBetweenDates.js';
+import { ContinueButton } from './components/ContinueButton/index.js';
+import styles from './index.module.css';
+
+var clx = classNames.bind(styles);
+var idleCallbackOptions = {
+  timeout: 1000
+};
+var Calendar = function Calendar(_a) {
+  var today = _a.today,
+    initialSelectedDate = _a.selectedDate,
+    initialSelectedPeriod = _a.selectedPeriod,
+    activeDates = _a.activeDates,
+    datePresets = _a.datePresets,
+    availableDates = _a.availableDates,
+    canSelectRange = _a.canSelectRange,
+    onChange = _a.onChange,
+    onCancel = _a.onCancel,
+    _b = _a.withContinueButton,
+    withContinueButton = _b === void 0 ? false : _b;
+  var $root = useRef(null);
+  var startMonth = getStartMonth({
+    today: today,
+    activeDates: activeDates
+  });
+  var _c = useState(initialSelectedDate),
+    selectedDate = _c[0],
+    setSelectedDate = _c[1];
+  var _d = useState(initialSelectedPeriod),
+    selectedPeriod = _d[0],
+    setSelectedPeriod = _d[1];
+  var _e = useState(function () {
+      if (initialSelectedDate) {
+        return getNumberOfMonthsBetweenDates(startMonth, initialSelectedDate);
+      } else if (activeDates && activeDates.length) {
+        return getNumberOfMonthsBetweenDates(startMonth, activeDates.sort()[0]);
+      }
+      return 0;
+    }),
+    currentMonthOffset = _e[0],
+    setCurrentMonthOffset = _e[1];
+  var _f = useState(0),
+    contentWidth = _f[0],
+    setContentWidth = _f[1];
+  var _g = useState(true),
+    isRangeCompleted = _g[0],
+    setIsRangeCompleted = _g[1];
+  useEffect(function () {
+    var _a;
+    setContentWidth(((_a = $root.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0);
+  }, []);
+  var showPrevMonth = useCallback(function () {
+    setCurrentMonthOffset(function (prev) {
+      return prev - 1;
+    });
+  }, []);
+  var showNextMonth = useCallback(function () {
+    setCurrentMonthOffset(function (prev) {
+      return prev + 1;
+    });
+  }, []);
+  var selectDate = useCallback(function (date, period, rangeCompleted) {
+    setSelectedDate(date);
+    setSelectedPeriod(period);
+    setIsRangeCompleted(rangeCompleted);
+    setCurrentMonthOffset(getNumberOfMonthsBetweenDates(startMonth, date));
+  }, [startMonth]);
+  var handleDayClick = useCallback(function (date) {
+    if (canSelectRange && selectedDate && !isRangeCompleted) {
+      var _a = [date, selectedDate].sort(),
+        startDate_1 = _a[0],
+        endDate = _a[1];
+      var period_1 = getDaysDiff(new Date(startDate_1), new Date(endDate)) + 1;
+      if (!withContinueButton && onChange) {
+        onChange({
+          date: date,
+          period: period_1
+        });
+        return;
+      }
+      requestIdleCallback(function () {
+        return selectDate(startDate_1, period_1, true);
+      }, idleCallbackOptions);
+    } else {
+      if (!withContinueButton && onChange) {
+        onChange({
+          date: date,
+          period: 1
+        });
+        return;
+      }
+      requestIdleCallback(function () {
+        return selectDate(date, 1, !canSelectRange);
+      }, idleCallbackOptions);
+    }
+  }, [canSelectRange, selectedDate, isRangeCompleted, selectDate]);
+  var handlePresetSelect = useCallback(function (preset) {
+    requestIdleCallback(function () {
+      return selectDate(preset.date, preset.period, true);
+    }, idleCallbackOptions);
+  }, [selectDate]);
+  var commitSelectedDates = useCallback(function () {
+    if (selectedDate && selectedPeriod) {
+      if (onCancel) {
+        onCancel();
+      }
+      if (onChange) {
+        onChange({
+          date: selectedDate,
+          period: selectedPeriod
+        });
+      }
+    }
+  }, [selectedDate, selectedPeriod, onChange, onCancel]);
+  var cancelCalendar = useCallback(function () {
+    if (onCancel) {
+      onCancel();
+    }
+  }, [onCancel]);
+  var getMonthStartDate = useCallback(function (shiftIndex) {
+    var startDate = new Date(startMonth);
+    startDate.setMonth(startDate.getMonth() + shiftIndex);
+    return startDate;
+  }, [startMonth]);
+  var commonAttrs = {
+    selectedDate: selectedDate,
+    selectedPeriod: selectedPeriod,
+    activeDates: activeDates,
+    availableDates: availableDates,
+    isRangeCompleted: isRangeCompleted,
+    onDayClick: handleDayClick
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: clx(styles.root),
+    "data-component": "Calendar",
+    ref: $root
+  }, /*#__PURE__*/React__default.createElement("div", null, contentWidth ? ( /*#__PURE__*/React__default.createElement("div", {
+    "data-component": "Months",
+    className: clx(styles.months),
+    style: {
+      transform: "translate3D(".concat(-1 * currentMonthOffset * contentWidth, "px, 0, 0)")
+    }
+  }, [currentMonthOffset - 1, currentMonthOffset, currentMonthOffset + 1].filter(function (index) {
+    return index >= 0;
+  }).map(function (index) {
+    var attrs = __assign(__assign({}, commonAttrs), {
+      today: today,
+      startDate: getMonthStartDate(index),
+      offsetLeft: index * contentWidth
+    });
+    return /*#__PURE__*/React__default.createElement(Month, __assign({}, attrs, {
+      key: "month-".concat(index)
+    }));
+  }))) : ( /*#__PURE__*/React__default.createElement(Month, __assign({
+    today: today,
+    startDate: getMonthStartDate(currentMonthOffset),
+    offsetLeft: 0
+  }, commonAttrs))), /*#__PURE__*/React__default.createElement("button", {
+    className: clx(styles["month-control"], styles["month-control-prev"]),
+    onClick: showPrevMonth,
+    disabled: currentMonthOffset <= 0
+  }), /*#__PURE__*/React__default.createElement("button", {
+    className: clx(styles["month-control"], styles["month-control-next"]),
+    onClick: showNextMonth,
+    disabled: currentMonthOffset >= 11
+  })), datePresets && ( /*#__PURE__*/React__default.createElement(Presets, {
+    presets: datePresets,
+    onPresetSelect: handlePresetSelect
+  })), withContinueButton && ( /*#__PURE__*/React__default.createElement(ContinueButton, {
+    isChanged: selectedDate !== initialSelectedDate || selectedPeriod !== initialSelectedPeriod,
+    selectedDate: selectedDate,
+    selectedPeriod: selectedPeriod,
+    onContinue: commitSelectedDates,
+    onCancel: cancelCalendar
+  })));
+};
+
+export { Calendar as default };

package/esm/Calendar/index.module.css

@@ -0,0 +1,98 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  gap: 16px;
+  min-width: 300px;
+  overflow: hidden;
+  position: relative;
+  text-rendering: optimizelegibility;
+  text-size-adjust: 100%;
+}
+@media (width >= 360px) {
+  .root {
+    min-width: 360px;
+  }
+}
+
+.month-control {
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  height: 48px;
+  outline: 0;
+  padding: 0 16px;
+  position: absolute;
+  top: 0;
+  width: 80px;
+}
+.month-control::before {
+  border: 0 solid #fff;
+  content: "";
+  display: block;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  width: 40px;
+}
+.month-control::after {
+  background-repeat: no-repeat;
+  background-size: 10px 16px;
+  content: "";
+  display: inline-block;
+  height: 16px;
+  opacity: 0.8;
+  position: relative;
+  transition: opacity 0.3s ease;
+  width: 10px;
+}
+.month-control:hover::after {
+  opacity: 1;
+}
+.month-control[disabled] {
+  cursor: default;
+  opacity: 0.3;
+}
+.month-control[disabled]::after {
+  opacity: 0.3;
+}
+
+.month-control-prev {
+  border-left-width: 16px;
+  left: 0;
+  text-align: left;
+}
+.month-control-prev::before {
+  background: linear-gradient(to right, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
+  border-left-width: 26px;
+  left: 0;
+}
+.month-control-prev::after {
+  background-image: url("./assets/next-arrow.svg");
+  transform: rotate(180deg);
+}
+
+.month-control-next {
+  border-right-width: 16px;
+  right: 0;
+  text-align: right;
+}
+.month-control-next::before {
+  background: linear-gradient(to left, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
+  border-right-width: 26px;
+  right: 0;
+}
+.month-control-next::after {
+  background-image: url("./assets/next-arrow.svg");
+}
+
+.months {
+  height: 284px;
+  position: relative;
+  transition: transform 0.3s ease;
+}
+.months > div {
+  position: absolute;
+  top: 0;
+}

package/esm/Calendar/utils/getMonthWeeks.d.ts

@@ -0,0 +1,20 @@
+type Day = {
+    day: number;
+    isDummy?: boolean;
+    isActive?: boolean;
+    isSelected?: boolean;
+    isStartOfSelection?: boolean;
+    isEndOfSelection?: boolean;
+    isInSelectedRange?: boolean;
+};
+type Week = Day[];
+type Options = {
+    today: string;
+    startDate: Date;
+    activeDays?: string[];
+    selectedDate?: string;
+    selectedPeriod?: number;
+    availableDates?: string[];
+};
+export declare function getMonthWeeks(options: Options): Week[];
+export {};

package/esm/Calendar/utils/getMonthWeeks.js

@@ -0,0 +1,79 @@
+import { leadingZeros } from '../../libs/numbers/leadingZeros.js';
+
+var dummyDay = {
+  day: 0,
+  isDummy: true
+};
+function getMonthWeeks(options) {
+  var _a = getSelectedDates(options),
+    selectedDateFrom = _a.selectedDateFrom,
+    selectedDateTo = _a.selectedDateTo;
+  var currMonth = options.startDate.getMonth();
+  var weeks = [[]];
+  var currWeek = weeks[weeks.length - 1];
+  var currDate = new Date(options.startDate);
+  {
+    // Prepending wirst week with dummy days
+    var dayInWeek = getDateDayInWeek(currDate);
+    while (dayInWeek) {
+      weeks[0].push(dummyDay);
+      dayInWeek -= 1;
+    }
+  }
+  while (currDate.getMonth() === currMonth) {
+    var currCompareDate = formatToComparable(currDate);
+    var isStartOfSelection = currCompareDate === selectedDateFrom;
+    var isEndOfSelection = currCompareDate === selectedDateTo;
+    currWeek.push({
+      day: currDate.getDate(),
+      isActive: checkIfDateIsAvailable(currCompareDate, options),
+      isSelected: isStartOfSelection || isEndOfSelection,
+      isStartOfSelection: isStartOfSelection,
+      isEndOfSelection: isEndOfSelection,
+      isInSelectedRange: !!selectedDateFrom && !!selectedDateTo && currCompareDate > selectedDateFrom && currCompareDate < selectedDateTo
+    });
+    if (currWeek.length === 7) {
+      currWeek = [];
+      weeks.push(currWeek);
+    }
+    currDate.setDate(currDate.getDate() + 1);
+  }
+  {
+    var lastWeek = weeks[weeks.length - 1];
+    while (lastWeek.length < 7) {
+      lastWeek.push(dummyDay);
+    }
+  }
+  return weeks;
+}
+function getDateDayInWeek(date) {
+  var day = date.getDay() - 1;
+  return day >= 0 ? day : 6;
+}
+function getSelectedDates(options) {
+  var period = options.selectedPeriod ? options.selectedPeriod - 1 : 0;
+  var dateFrom = options.selectedDate ? new Date(options.selectedDate) : undefined;
+  var dateTo = dateFrom ? new Date(dateFrom.getTime() + 24 * 60 * 60 * 1000 * period) : undefined;
+  return {
+    selectedDateFrom: dateFrom ? formatToComparable(dateFrom) : undefined,
+    selectedDateTo: dateTo ? formatToComparable(dateTo) : undefined
+  };
+}
+function formatToComparable(date) {
+  return new Date([date.getFullYear(), doubleDigits(date.getMonth() + 1), doubleDigits(date.getDate())].join("-")).getTime();
+}
+function doubleDigits(v) {
+  return leadingZeros(v, 2);
+}
+function checkIfDateIsAvailable(date, options) {
+  var availableDates = options.availableDates,
+    today = options.today;
+  var todayCompatible = formatToComparable(new Date(today));
+  var availableDatesComparable = availableDates && availableDates.length > 0 && availableDates.map(function (_date) {
+    return formatToComparable(new Date(_date));
+  });
+  var isAvailableDate = availableDatesComparable ? availableDatesComparable.includes(date) : true;
+  return date >= todayCompatible && isAvailableDate;
+}
+
+export { getMonthWeeks };

package/esm/Calendar/utils/getNumberOfMonthsBetweenDates.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Returns number of months between dates
+ */
+export declare function getNumberOfMonthsBetweenDates(startDate: string, activeDate: string): number;

package/esm/Calendar/utils/getNumberOfMonthsBetweenDates.js

@@ -0,0 +1,19 @@
+/**
+ * Returns number of months between dates
+ */
+function getNumberOfMonthsBetweenDates(startDate, activeDate) {
+  var start = new Date(normalizeDate(startDate));
+  var active = new Date(normalizeDate(activeDate));
+  var offset = active > start ? 1 : -1;
+  var count = 0;
+  while (start.getFullYear() !== active.getFullYear() || start.getMonth() !== active.getMonth()) {
+    count += offset;
+    start.setMonth(start.getMonth() + offset);
+  }
+  return count;
+}
+function normalizeDate(date) {
+  return date.split("-").slice(0, 2).join("-");
+}
+
+export { getNumberOfMonthsBetweenDates };

package/esm/Calendar/utils/getPresets.d.ts

@@ -0,0 +1,10 @@
+export type DatePreset = {
+    name: string;
+    date: string;
+    period: number;
+};
+export declare function getPresets(presets: string[]): ({
+    name: string;
+    date: string;
+    period: number;
+} | undefined)[] | undefined;

package/esm/Calendar/utils/getStartMonth.d.ts

@@ -0,0 +1,6 @@
+type Options = {
+    today?: string;
+    activeDates?: string[];
+};
+export declare function getStartMonth({ today, activeDates, }: Options): string;
+export {};

package/esm/Calendar/utils/getStartMonth.js

@@ -0,0 +1,13 @@
+import { leadingZeros } from '../../libs/numbers/leadingZeros.js';
+
+function getStartMonth(_a) {
+  var _b = _a.today,
+    today = _b === void 0 ? "" : _b,
+    _c = _a.activeDates,
+    activeDates = _c === void 0 ? [""] : _c;
+  var sortedDates = [].concat(activeDates, today).filter(Boolean).sort();
+  var date = new Date(sortedDates[0]);
+  return [date.getFullYear(), leadingZeros(date.getMonth() + 1, 2)].join("-");
+}
+
+export { getStartMonth };

package/esm/Checkbox/Checkbox.module.css

@@ -8,10 +8,10 @@
 }
 
 .label {
+  cursor: pointer;
   display: inline-flex;
   line-height: 18px;
   position: relative;
-  cursor: pointer;
 }
 
 .text {
@@ -20,7 +20,7 @@
   margin-inline-start: 8px;
 }
 
-.fakeCheckbox {
+.fake-checkbox {
   background-color: var(--palette-white);
   block-size: 16px;
   border: 1px solid var(--palette-bg-3);
@@ -35,20 +35,20 @@
 }
 
 .checked {
-  border: 0;
   background-color: var(--checkbox-primary-background-color-checked);
+  border: 0;
 }
 .checked::after {
-  box-sizing: content-box;
-  content: "";
-  display: block;
-  position: absolute;
   block-size: 8px;
   border-block-end: 2px solid var(--palette-black);
   border-inline-end: 2px solid var(--palette-black);
+  box-sizing: content-box;
+  content: "";
+  display: block;
   inline-size: 4px;
   inset-block-start: 45%;
   inset-inline-start: 50%;
+  position: absolute;
   transform: translate(-50%, -50%) rotate(45deg);
 }
 
@@ -65,25 +65,25 @@
   inset-inline-start: -9999px;
   position: absolute;
 }
-.control:disabled + .fakeCheckbox::after {
+.control:disabled + .fake-checkbox::after {
   border-block-end: 2px solid var(--palette-bg-4);
   border-inline-end: 2px solid var(--palette-bg-4);
 }
-.control:hover:not(:disabled) + .fakeCheckbox {
+.control:hover:not(:disabled) + .fake-checkbox {
   border-color: var(--palette-bg-3);
 }
-.control_variant_primary:focus:not(:disabled) + .fakeCheckbox {
+.control_variant_primary:focus:not(:disabled) + .fake-checkbox {
   box-shadow: 0 0 0 2px var(--checkbox-primary-box-shadow-focused);
 }
-.control_variant_primary:hover:not(:disabled) + .fakeCheckbox {
+.control_variant_primary:hover:not(:disabled) + .fake-checkbox {
   background-color: var(--checkbox-primary-background-color-hovered);
 }
-.control_variant_primary:active:not(:disabled) + .fakeCheckbox {
+.control_variant_primary:active:not(:disabled) + .fake-checkbox {
   background-color: var(--checkbox-primary-background-color-active);
   border-color: var(--checkbox-primary-border-color-active);
   box-shadow: var(--checkbox-primary-box-shadow-active);
 }
-.control_variant_primary:disabled + .fakeCheckbox {
-  z-index: 1;
+.control_variant_primary:disabled + .fake-checkbox {
   background-color: var(--checkbox-primary-background-color-disabled);
+  z-index: 1;
 }

package/esm/Checkbox/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import classNames from 'classnames/bind';
 import Typography from '../Typography/index.js';
 import styles from './Checkbox.module.css';
@@ -20,11 +20,11 @@ var Checkbox = function Checkbox(_a) {
     className = _a.className,
     disabled = _a.disabled,
     isError = _a.isError;
-  var control = /*#__PURE__*/React.createElement("label", {
+  var control = /*#__PURE__*/React__default.createElement("label", {
     className: clx(styles.label)
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: clx(styles.wrapper)
-  }, /*#__PURE__*/React.createElement("input", {
+  }, /*#__PURE__*/React__default.createElement("input", {
     className: clx(styles.control, (_b = {}, _b["control_variant_".concat(variant)] = !!variant, _b), className),
     type: "checkbox",
     id: id,
@@ -35,14 +35,14 @@ var Checkbox = function Checkbox(_a) {
     onFocus: onFocus,
     onBlur: onBlur,
     disabled: disabled
-  }), /*#__PURE__*/React.createElement("span", {
-    className: clx(styles.fakeCheckbox, (_c = {}, _c["variant_".concat(variant, "_disabled")] = disabled ? 1 : 0, _c["variant_".concat(variant, "_error")] = isError ? 1 : 0, _c["variant_".concat(variant, "_checked")] = checked ? 1 : 0, _c.checked = checked ? 1 : 0, _c["variant_".concat(variant)] = !!variant, _c))
-  }), /*#__PURE__*/React.createElement("span", {
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: clx(styles["fake-checkbox"], (_c = {}, _c["variant_".concat(variant, "_disabled")] = disabled ? 1 : 0, _c["variant_".concat(variant, "_error")] = isError ? 1 : 0, _c["variant_".concat(variant, "_checked")] = checked ? 1 : 0, _c.checked = checked ? 1 : 0, _c["variant_".concat(variant)] = !!variant, _c))
+  }), /*#__PURE__*/React__default.createElement("span", {
     className: clx(styles.text)
   }, label)));
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: clx(styles.root)
-  }, control, hint && ( /*#__PURE__*/React.createElement(Typography, {
+  }, control, hint && ( /*#__PURE__*/React__default.createElement(Typography, {
     variant: isError ? "alert" : "secondary",
     tag: "span"
   }, hint)));

package/esm/ClickOutside/index.js

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React__default, { useRef } from 'react';
 import useOnClickOutside from '../hooks/useOnClickOutside/index.js';
 
 var ClickOutside = function ClickOutside(_a) {
@@ -6,8 +6,8 @@ var ClickOutside = function ClickOutside(_a) {
     onClick = _a.onClick;
   var childRef = useRef();
   useOnClickOutside(childRef, onClick);
-  if (! /*#__PURE__*/React.isValidElement(children)) return null;
-  return /*#__PURE__*/React.cloneElement(children, {
+  if (! /*#__PURE__*/React__default.isValidElement(children)) return null;
+  return /*#__PURE__*/React__default.cloneElement(children, {
     // @ts-expect-error expected
     ref: function ref(node) {
       childRef.current = node;

package/esm/Counter/Counter.module.css

@@ -18,17 +18,17 @@
   align-items: center;
   block-size: 38px;
   display: flex;
-  justify-content: space-between;
   gap: 4px;
+  justify-content: space-between;
 }
 .control_fullWidth {
   inline-size: 100%;
 }
 
 .value {
-  font-weight: 500;
   font-size: 18px;
+  font-weight: 500;
   inline-size: 24px;
-  user-select: none;
   text-align: center;
+  user-select: none;
 }

package/esm/Counter/index.js

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React__default, { useRef } from 'react';
 import classNames from 'classnames/bind';
 import Button from '../Button/index.js';
 import MinusIcon from '../Icons/Minus.js';
@@ -19,16 +19,16 @@ var Counter = function Counter(_a) {
   var lastNumValue = useRef(value);
   var minusDisabled = disabled || value <= min;
   var plusDisabled = disabled || value >= max;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: clx(styles.root, {
       root_fullWidth: fullWidth ? 1 : 0
     }, className)
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: clx(styles.control, {
       control_fullWidth: fullWidth ? 1 : 0
     })
-  }, /*#__PURE__*/React.createElement(Button, {
-    icon: /*#__PURE__*/React.createElement(MinusIcon, {
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    icon: /*#__PURE__*/React__default.createElement(MinusIcon, {
       width: 16,
       height: 16
     }),
@@ -38,10 +38,10 @@ var Counter = function Counter(_a) {
       lastNumValue.current = value - 1;
     },
     "aria-label": "decrease"
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: clx(styles.value)
-  }, value), /*#__PURE__*/React.createElement(Button, {
-    icon: /*#__PURE__*/React.createElement(PlusIcon, {
+  }, value), /*#__PURE__*/React__default.createElement(Button, {
+    icon: /*#__PURE__*/React__default.createElement(PlusIcon, {
       width: 16,
       height: 16
     }),