colibri-ui 0.7.57 → 0.7.59

package/Calendar/components/Presets/index.module.css

@@ -0,0 +1,28 @@
+.native-scroll-inner {
+  -webkit-overflow-scrolling: touch;
+  overflow-x: auto;
+  transform: translate3d(0, 0, 0);
+}
+
+.inner {
+  align-items: stretch;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+}
+
+.item {
+  flex-grow: 1;
+  padding: 0 4px;
+}
+.item > button {
+  display: block;
+  padding: 0 8px;
+  width: 100%;
+}
+.item:first-child {
+  padding-left: 16px;
+}
+.item:last-child {
+  padding-right: 16px;
+}

package/Calendar/index.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import type { Preset } from "./components/Presets";
+type ChangePayload = {
+    date: string;
+    period: number;
+};
+type Props = {
+    today: string;
+    selectedDate?: string;
+    selectedPeriod?: number;
+    canSelectRange?: boolean;
+    activeDates?: string[];
+    datePresets?: Preset[];
+    availableDates?: string[];
+    onChange?: (payload: ChangePayload) => void;
+    onCancel?: () => void;
+    withContinueButton?: boolean;
+};
+declare const Calendar: React.FC<Props>;
+export default Calendar;

package/Calendar/index.js

@@ -0,0 +1,196 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var classNames = require('classnames/bind');
+var index$1 = require('../libs/requestIdleCallback/index.js');
+var index = require('../helpers/date/index.js');
+var Month = require('./components/Month/Month.js');
+var getStartMonth = require('./utils/getStartMonth.js');
+var index$2 = require('./components/Presets/index.js');
+var getNumberOfMonthsBetweenDates = require('./utils/getNumberOfMonthsBetweenDates.js');
+var index$3 = require('./components/ContinueButton/index.js');
+var styles = require('./index.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var clx = classNames__default.default.bind(styles__default.default);
+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 = React.useRef(null);
+  var startMonth = getStartMonth.getStartMonth({
+    today: today,
+    activeDates: activeDates
+  });
+  var _c = React.useState(initialSelectedDate),
+    selectedDate = _c[0],
+    setSelectedDate = _c[1];
+  var _d = React.useState(initialSelectedPeriod),
+    selectedPeriod = _d[0],
+    setSelectedPeriod = _d[1];
+  var _e = React.useState(function () {
+      if (initialSelectedDate) {
+        return getNumberOfMonthsBetweenDates.getNumberOfMonthsBetweenDates(startMonth, initialSelectedDate);
+      } else if (activeDates && activeDates.length) {
+        return getNumberOfMonthsBetweenDates.getNumberOfMonthsBetweenDates(startMonth, activeDates.sort()[0]);
+      }
+      return 0;
+    }),
+    currentMonthOffset = _e[0],
+    setCurrentMonthOffset = _e[1];
+  var _f = React.useState(0),
+    contentWidth = _f[0],
+    setContentWidth = _f[1];
+  var _g = React.useState(true),
+    isRangeCompleted = _g[0],
+    setIsRangeCompleted = _g[1];
+  React.useEffect(function () {
+    var _a;
+    setContentWidth(((_a = $root.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0);
+  }, []);
+  var showPrevMonth = React.useCallback(function () {
+    setCurrentMonthOffset(function (prev) {
+      return prev - 1;
+    });
+  }, []);
+  var showNextMonth = React.useCallback(function () {
+    setCurrentMonthOffset(function (prev) {
+      return prev + 1;
+    });
+  }, []);
+  var selectDate = React.useCallback(function (date, period, rangeCompleted) {
+    setSelectedDate(date);
+    setSelectedPeriod(period);
+    setIsRangeCompleted(rangeCompleted);
+    setCurrentMonthOffset(getNumberOfMonthsBetweenDates.getNumberOfMonthsBetweenDates(startMonth, date));
+  }, [startMonth]);
+  var handleDayClick = React.useCallback(function (date) {
+    if (canSelectRange && selectedDate && !isRangeCompleted) {
+      var _a = [date, selectedDate].sort(),
+        startDate_1 = _a[0],
+        endDate = _a[1];
+      var period_1 = index.getDaysDiff(new Date(startDate_1), new Date(endDate)) + 1;
+      if (!withContinueButton && onChange) {
+        onChange({
+          date: date,
+          period: period_1
+        });
+        return;
+      }
+      index$1.requestIdleCallback(function () {
+        return selectDate(startDate_1, period_1, true);
+      }, idleCallbackOptions);
+    } else {
+      if (!withContinueButton && onChange) {
+        onChange({
+          date: date,
+          period: 1
+        });
+        return;
+      }
+      index$1.requestIdleCallback(function () {
+        return selectDate(date, 1, !canSelectRange);
+      }, idleCallbackOptions);
+    }
+  }, [canSelectRange, selectedDate, isRangeCompleted, selectDate]);
+  var handlePresetSelect = React.useCallback(function (preset) {
+    index$1.requestIdleCallback(function () {
+      return selectDate(preset.date, preset.period, true);
+    }, idleCallbackOptions);
+  }, [selectDate]);
+  var commitSelectedDates = React.useCallback(function () {
+    if (selectedDate && selectedPeriod) {
+      if (onCancel) {
+        onCancel();
+      }
+      if (onChange) {
+        onChange({
+          date: selectedDate,
+          period: selectedPeriod
+        });
+      }
+    }
+  }, [selectedDate, selectedPeriod, onChange, onCancel]);
+  var cancelCalendar = React.useCallback(function () {
+    if (onCancel) {
+      onCancel();
+    }
+  }, [onCancel]);
+  var getMonthStartDate = React.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.default.createElement("div", {
+    className: clx(styles__default.default.root),
+    "data-component": "Calendar",
+    ref: $root
+  }, /*#__PURE__*/React__default.default.createElement("div", null, contentWidth ? ( /*#__PURE__*/React__default.default.createElement("div", {
+    "data-component": "Months",
+    className: clx(styles__default.default.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 = tslib.__assign(tslib.__assign({}, commonAttrs), {
+      today: today,
+      startDate: getMonthStartDate(index),
+      offsetLeft: index * contentWidth
+    });
+    return /*#__PURE__*/React__default.default.createElement(Month.Month, tslib.__assign({}, attrs, {
+      key: "month-".concat(index)
+    }));
+  }))) : ( /*#__PURE__*/React__default.default.createElement(Month.Month, tslib.__assign({
+    today: today,
+    startDate: getMonthStartDate(currentMonthOffset),
+    offsetLeft: 0
+  }, commonAttrs))), /*#__PURE__*/React__default.default.createElement("button", {
+    className: clx(styles__default.default["month-control"], styles__default.default["month-control-prev"]),
+    onClick: showPrevMonth,
+    disabled: currentMonthOffset <= 0
+  }), /*#__PURE__*/React__default.default.createElement("button", {
+    className: clx(styles__default.default["month-control"], styles__default.default["month-control-next"]),
+    onClick: showNextMonth,
+    disabled: currentMonthOffset >= 11
+  })), datePresets && ( /*#__PURE__*/React__default.default.createElement(index$2.Presets, {
+    presets: datePresets,
+    onPresetSelect: handlePresetSelect
+  })), withContinueButton && ( /*#__PURE__*/React__default.default.createElement(index$3.ContinueButton, {
+    isChanged: selectedDate !== initialSelectedDate || selectedPeriod !== initialSelectedPeriod,
+    selectedDate: selectedDate,
+    selectedPeriod: selectedPeriod,
+    onContinue: commitSelectedDates,
+    onCancel: cancelCalendar
+  })));
+};
+
+exports.default = Calendar;

package/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/Calendar/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/Calendar/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/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/Calendar/utils/getMonthWeeks.js

@@ -0,0 +1,81 @@
+'use strict';
+
+var leadingZeros = require('../../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.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;
+}
+
+exports.getMonthWeeks = getMonthWeeks;

package/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/Calendar/utils/getNumberOfMonthsBetweenDates.js

@@ -0,0 +1,21 @@
+'use strict';
+
+/**
+ * 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("-");
+}
+
+exports.getNumberOfMonthsBetweenDates = getNumberOfMonthsBetweenDates;

package/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/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/Calendar/utils/getStartMonth.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var leadingZeros = require('../../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.leadingZeros(date.getMonth() + 1, 2)].join("-");
+}
+
+exports.getStartMonth = getStartMonth;

package/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/Checkbox/index.js

@@ -46,7 +46,7 @@ var Checkbox = function Checkbox(_a) {
     onBlur: onBlur,
     disabled: disabled
   }), /*#__PURE__*/React__default.default.createElement("span", {
-    className: clx(styles__default.default.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))
+    className: clx(styles__default.default["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.default.createElement("span", {
     className: clx(styles__default.default.text)
   }, label)));

package/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/Dropdown/Dropdown.module.css

@@ -1,13 +1,13 @@
-.popperContainer {
-  padding-top: 2px;
+.popper-container {
   padding-bottom: 2px;
+  padding-top: 2px;
 }
 
-.overlayContainer {
-  border-width: 1px;
-  border-style: solid;
+.overlay-container {
+  background-color: var(--palette-white);
+  border-color: var(--palette-bg-2);
   border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
   overflow: hidden;
-  border-color: var(--palette-bg-2);
-  background-color: var(--palette-white);
 }

package/Dropdown/index.js

@@ -126,7 +126,8 @@ var Dropdown = function Dropdown(_a) {
     onClick: onClickOutside
   }, /*#__PURE__*/React__default.default.createElement("div", tslib.__assign({
     ref: setPopperElement,
-    className: classNames__default.default(dropDownStyles__default.default.popperContainer),
+    "data-component": "popper-container",
+    className: classNames__default.default(dropDownStyles__default.default["popper-container"]),
     style: tslib.__assign(tslib.__assign(tslib.__assign({}, styles.popper), {
       zIndex: zIndex,
       minWidth: controlElement === null || controlElement === void 0 ? void 0 : controlElement.offsetWidth
@@ -135,7 +136,7 @@ var Dropdown = function Dropdown(_a) {
     }),
     tabIndex: 0
   }, attributes.popper), /*#__PURE__*/React__default.default.createElement("div", {
-    className: classNames__default.default(dropDownStyles__default.default.overlayContainer),
+    className: classNames__default.default(dropDownStyles__default.default["overlay-container"]),
     onClick: onClickOverlay
   }, overlay))))));
 };