colibri-ui 0.8.43 → 0.8.45

package/Avatar/Avatar.module.css

@@ -1,118 +1,122 @@
-@charset "UTF-8";
 .avatar {
+  border-radius: 100%;
+  box-sizing: border-box;
   display: block;
-  width: 100%; /* Теперь адаптивно */
   height: 100%;
+  object-fit: cover;
   position: relative;
-  border-radius: 100%;
-  box-sizing: border-box;
   transition: border-color 0.15s ease;
-  object-fit: cover;
+  width: 100%;
 }
 
-.avatarBordered {
+.avatar-bordered {
   background-color: var(--palette-white);
   border: 3px solid var(--palette-bg-2);
   padding: 3px;
 }
-.avatarBordered:hover {
+.avatar-bordered:hover {
   border-color: var(--palette-bg-4);
 }
 
-.sizeS, .sizeM, .sizeL, .sizeXL, .sizeXXL, .sizeXXXL {
+.size-s,
+.size-m,
+.size-l,
+.size-xl,
+.size-xxl,
+.size-xxxl {
   aspect-ratio: 1/1;
 }
 
-.sizeS {
-  width: 32px;
+.size-s {
   height: 32px;
+  width: 32px;
 }
 
-.sizeM {
-  width: 48px;
+.size-m {
   height: 48px;
+  width: 48px;
 }
 
-.sizeL {
-  width: 80px;
+.size-l {
   height: 80px;
+  width: 80px;
 }
 
-.sizeXL {
-  width: 120px;
+.size-xl {
   height: 120px;
+  width: 120px;
 }
 
-.sizeXXL {
-  width: 196px;
+.size-xxl {
   height: 196px;
+  width: 196px;
 }
 
-.sizeXXXL {
-  width: 280px;
+.size-xxxl {
   height: 280px;
+  width: 280px;
 }
 
-.textS {
+.text-s {
   font-size: 1rem;
   font-weight: 500;
 }
 
-.textM {
+.text-m {
   font-size: 1.5rem;
   font-weight: 500;
 }
 
-.textL {
+.text-l {
   font-size: 2.5rem;
   font-weight: 400;
 }
 
-.textXL {
+.text-xl {
   font-size: 3.75rem;
   font-weight: 400;
 }
 
-.textXXL {
+.text-xxl {
   font-size: 6rem;
   font-weight: 400;
 }
 
-.textXXXL {
+.text-xxxl {
   font-size: 9rem;
   font-weight: 400;
 }
 
-.avatarInitials {
-  display: inline-flex;
+.avatar-initials {
   align-items: center;
-  justify-content: center;
-  border-radius: 50%;
   background-color: var(--palette-bg-4);
+  border-radius: 50%;
+  display: inline-flex;
+  justify-content: center;
 }
 
-.initialsText {
+.initials-text {
   color: white;
   text-transform: uppercase;
 }
 
-.avatarWrapper {
-  position: relative;
+.avatar-wrapper {
   display: inline-block;
+  position: relative;
 }
 
-.avatarLoader::before {
+.avatar-loader::before {
+  animation: spin 1s linear infinite;
+  border: 4px solid transparent;
+  border-radius: 50%;
+  border-top-color: #0087bf;
+  box-sizing: border-box;
   content: "";
+  height: calc(100% + 6px);
+  left: -3px;
   position: absolute;
   top: -3px;
-  left: -3px;
   width: calc(100% + 6px);
-  height: calc(100% + 6px);
-  border-radius: 50%;
-  border: 4px solid transparent;
-  border-top-color: #0087bf;
-  animation: spin 1s linear infinite;
-  box-sizing: border-box;
 }
 
 @keyframes spin {

package/Avatar/index.js

@@ -23,8 +23,8 @@ var clx = classNames__default.default.bind(styles__default.default);
 var getStubImage = function getStubImage(type) {
   return type === index_props.AccountType.Organization ? orgCircle.default : userCircle.default;
 };
-var SIZE_CLASSES = _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, constants.AvatarSize.S, styles__default.default.sizeS), constants.AvatarSize.M, styles__default.default.sizeM), constants.AvatarSize.L, styles__default.default.sizeL), constants.AvatarSize.XL, styles__default.default.sizeXL), constants.AvatarSize.XXL, styles__default.default.sizeXXL), constants.AvatarSize.XXXL, styles__default.default.sizeXXXL);
-var TEXT_CLASSES = _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, constants.AvatarSize.S, styles__default.default.textS), constants.AvatarSize.M, styles__default.default.textM), constants.AvatarSize.L, styles__default.default.textL), constants.AvatarSize.XL, styles__default.default.textXL), constants.AvatarSize.XXL, styles__default.default.textXXL), constants.AvatarSize.XXXL, styles__default.default.textXXXL);
+var SIZE_CLASSES = _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, constants.AvatarSize.S, styles__default.default['size-s']), constants.AvatarSize.M, styles__default.default['size-m']), constants.AvatarSize.L, styles__default.default['size-l']), constants.AvatarSize.XL, styles__default.default['size-xl']), constants.AvatarSize.XXL, styles__default.default['size-xxl']), constants.AvatarSize.XXXL, styles__default.default['size-xxxl']);
+var TEXT_CLASSES = _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, constants.AvatarSize.S, styles__default.default['text-s']), constants.AvatarSize.M, styles__default.default['text-m']), constants.AvatarSize.L, styles__default.default['text-l']), constants.AvatarSize.XL, styles__default.default['text-xl']), constants.AvatarSize.XXL, styles__default.default['text-xxl']), constants.AvatarSize.XXXL, styles__default.default['text-xxxl']);
 var Avatar = /*#__PURE__*/React.memo(function (props) {
   var src = props.src,
     _props$size = props.size,
@@ -63,7 +63,7 @@ var Avatar = /*#__PURE__*/React.memo(function (props) {
     "data-testid": "avatar",
     alt: alt,
     src: finalSrc,
-    className: clx(styles__default.default.avatar, {
+    className: clx('avatar', {
       avatarBordered: !!bordered
     }, SIZE_CLASSES[size], className)
   }, rest)))) : (
@@ -75,12 +75,12 @@ var Avatar = /*#__PURE__*/React.memo(function (props) {
     role: "button",
     "aria-label": ariaLabel || "Avatar",
     onClick: onClick,
-    className: clx(styles__default.default.avatarInitials, {
+    className: clx('avatarInitials', {
       avatarBordered: !!bordered,
       loading: !!loading
     }, SIZE_CLASSES[size], className)
   }, rest), /*#__PURE__*/React__default.default.createElement("span", {
-    className: clx(styles__default.default.initialsText, TEXT_CLASSES[size])
+    className: clx('initialsText', TEXT_CLASSES[size])
   }, (initials === null || initials === void 0 ? void 0 : initials.trim().slice(0, 2)) || "")));
 });
 

package/Button/Button.module.css

@@ -3,7 +3,6 @@
   border: 1px solid;
   border-radius: 1.125rem;
   box-sizing: border-box;
-  transition: color 0.15s linear;
   cursor: pointer;
   display: inline-flex;
   flex-shrink: 0;
@@ -18,6 +17,7 @@
   padding: 0 12px;
   text-overflow: ellipsis;
   transform: scale(1);
+  transition: color 0.15s linear;
   transition: transform 0.1s ease-out;
   white-space: nowrap;
   width: fit-content;

package/Button/index.js

@@ -35,7 +35,7 @@ var Button = function Button(_a) {
   return /*#__PURE__*/React__default.default.createElement("button", Object.assign({
     onClick: onClick,
     ref: ref,
-    className: clx(styles__default.default.root, _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({
+    className: clx("root", _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({
       root_icon: !!icon,
       root_fullWidth: !!fullWidth
     }, "size_".concat(size), !!size), "variant_".concat(variant), !!variant), "variant_".concat(variant, "_disabled"), !!disabled), className),

package/Calendar/components/Month/Month.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import type { CalendarTitleSize } from "../../index.props";
 import type { FunctionComponent } from "react";
 export interface FCWithElements<T = {}> extends FunctionComponent<T> {
@@ -13,5 +14,5 @@ type Props = {
     availableDates?: string[];
     titleSize?: CalendarTitleSize;
 };
-export declare const Month: FCWithElements<Props>;
-export {};
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;

package/Calendar/components/Month/Month.js

@@ -1,11 +1,13 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var classNames = require('classnames/bind');
 var leadingZeros = require('../../../libs/numbers/leadingZeros.js');
-var index = require('../../../Typography/index.js');
-var index$1 = require('../../../helpers/date/index.js');
+var index$1 = require('../../../Typography/index.js');
+var index = require('../../../helpers/date/index.js');
 var getMonthWeeks = require('../../utils/getMonthWeeks.js');
 var styles = require('./index.module.css');
 
@@ -35,13 +37,29 @@ var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var clx = classNames__default.default.bind(styles__default.default);
+var WEEK_DAYS = Array.from({
+  length: 7
+}, function (_, idx) {
+  var index$1 = idx + 1;
+  return {
+    index: index$1,
+    name: index.getShortWeekDayNameByIndex(index$1),
+    isWeekend: index$1 > 5
+  };
+});
+var SELECTED_BG_STYLE = {
+  background: "var(--palette-bg-2)"
+};
+var TRANSPARENT_BG_STYLE = {
+  background: "transparent"
+};
 var Item = /*#__PURE__*/React__namespace.memo(function (_ref) {
   var isSelected = _ref.isSelected,
     isInSelectedRange = _ref.isInSelectedRange,
     isStartOfSelection = _ref.isStartOfSelection,
     isEndOfSelection = _ref.isEndOfSelection,
     children = _ref.children;
-  var itemClass = clx('day', _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, "selected-day", isSelected), "selected-range-day", isInSelectedRange || isSelected), "no-selection", isStartOfSelection && isEndOfSelection), "start-of-selection", isStartOfSelection && !isEndOfSelection), "end-of-selection", isEndOfSelection && !isStartOfSelection), "first-child", isEndOfSelection), "last-child", isStartOfSelection));
+  var itemClass = clx("day", _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, "selected-day", isSelected), "selected-range-day", isInSelectedRange || isSelected), "no-selection", isStartOfSelection && isEndOfSelection), "start-of-selection", isStartOfSelection && !isEndOfSelection), "end-of-selection", isEndOfSelection && !isStartOfSelection), "first-child", isEndOfSelection), "last-child", isStartOfSelection));
   if (isSelected) {
     return /*#__PURE__*/React__namespace.createElement("li", {
       className: itemClass
@@ -52,80 +70,121 @@ var Item = /*#__PURE__*/React__namespace.memo(function (_ref) {
     }, children);
   }
   return /*#__PURE__*/React__namespace.createElement("li", {
-    className: clx('day')
+    className: clx("day")
   }, children);
 });
+Item.displayName = "Item";
+var DayButton = /*#__PURE__*/React__namespace.memo(function (_ref2) {
+  var day = _ref2.day,
+    isActive = _ref2.isActive,
+    isSelected = _ref2.isSelected,
+    dateString = _ref2.dateString,
+    onDayClick = _ref2.onDayClick;
+  var handleClick = React.useCallback(function () {
+    if (isActive) {
+      onDayClick(dateString);
+    }
+  }, [isActive, dateString, onDayClick]);
+  var dayInnerActive = isActive ? "day-inner-active" : "";
+  var bgStyle = isSelected ? SELECTED_BG_STYLE : TRANSPARENT_BG_STYLE;
+  return /*#__PURE__*/React__namespace.createElement("button", {
+    className: clx("day-inner", dayInnerActive),
+    style: bgStyle,
+    role: "button",
+    type: "button",
+    onClick: isActive ? handleClick : undefined
+  }, /*#__PURE__*/React__namespace.createElement(index$1.default, {
+    size: "s",
+    style: {
+      opacity: isActive ? 80 : 30,
+      color: isActive ? "rgba(0, 0, 0, 0.8)" : "rgba(0, 0, 0, 0.3)"
+    }
+  }, day));
+});
+DayButton.displayName = "DayButton";
 var Month = function Month(props) {
-  var year = props.startDate.getFullYear();
-  var month = leadingZeros.leadingZeros(props.startDate.getMonth() + 1, 2);
+  var startDate = props.startDate,
+    offsetLeft = props.offsetLeft,
+    titleSize = props.titleSize,
+    onDayClick = props.onDayClick,
+    today = props.today,
+    selectedDate = props.selectedDate,
+    selectedPeriod = props.selectedPeriod,
+    activeDays = props.activeDays,
+    availableDates = props.availableDates;
+  var year = startDate.getFullYear();
+  var month = React.useMemo(function () {
+    return leadingZeros.leadingZeros(startDate.getMonth() + 1, 2);
+  }, [startDate]);
+  var monthName = React.useMemo(function () {
+    return index.getUpperMonthName(startDate);
+  }, [startDate]);
+  var weeks = React.useMemo(function () {
+    return getMonthWeeks.getMonthWeeks(props);
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [today, startDate, activeDays, selectedDate, selectedPeriod, availableDates]);
+  var leftStyle = React.useMemo(function () {
+    return offsetLeft ? {
+      left: "".concat(offsetLeft, "px")
+    } : undefined;
+  }, [offsetLeft]);
   return /*#__PURE__*/React__namespace.createElement("div", {
     "data-testid": "month",
-    className: clx('root'),
-    style: {
-      left: props.offsetLeft ? "".concat(props.offsetLeft, "px") : undefined
-    }
+    className: clx("root"),
+    style: leftStyle
   }, /*#__PURE__*/React__namespace.createElement("div", {
     className: clx("month-name")
-  }, /*#__PURE__*/React__namespace.createElement(index.default, {
+  }, /*#__PURE__*/React__namespace.createElement(index$1.default, {
     tag: "span",
-    size: props.titleSize
-  }, index$1.getUpperMonthName(props.startDate))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: clx('table')
+    size: titleSize
+  }, monthName)), /*#__PURE__*/React__namespace.createElement("div", {
+    className: clx("table")
   }, /*#__PURE__*/React__namespace.createElement("ul", {
-    className: clx('legend')
-  }, Array.from({
-    length: 7
-  }, function (_, idx) {
-    var index$2 = idx + 1;
+    className: clx("legend")
+  }, WEEK_DAYS.map(function (_ref3) {
+    var index = _ref3.index,
+      name = _ref3.name,
+      isWeekend = _ref3.isWeekend;
     return /*#__PURE__*/React__namespace.createElement("li", {
-      className: clx('day'),
-      key: index$2
-    }, /*#__PURE__*/React__namespace.createElement(index.default, {
+      className: clx("day"),
+      key: index
+    }, /*#__PURE__*/React__namespace.createElement(index$1.default, {
       style: {
-        opacity: index$2 > 5 ? 80 : 30,
-        color: index$2 > 5 ? "var(--typography-alert)" : "var(--palette-black)"
+        opacity: isWeekend ? 80 : 30,
+        color: isWeekend ? "var(--typography-alert)" : "var(--palette-black)"
       }
-    }, index$1.getShortWeekDayNameByIndex(index$2)));
-  })), getMonthWeeks.getMonthWeeks(props).map(function (days) {
+    }, name));
+  })), weeks.map(function (days, weekIndex) {
     return /*#__PURE__*/React__namespace.createElement("ul", {
-      key: "week-".concat(arguments.length <= 1 ? undefined : arguments[1]),
-      className: clx('week')
-    }, days.map(function (day) {
-      var key = "day-".concat(arguments.length <= 1 ? undefined : arguments[1]);
+      key: "week-".concat(weekIndex),
+      className: clx("week")
+    }, days.map(function (day, dayIndex) {
+      var key = "day-".concat(dayIndex);
       if (day.isDummy) {
         return /*#__PURE__*/React__namespace.createElement("li", {
-          className: clx('day'),
+          className: clx("day"),
           key: key
         });
       }
-      var attrs = {
+      var dateString = "".concat(year, "-").concat(month, "-").concat(leadingZeros.leadingZeros(day.day, 2));
+      return /*#__PURE__*/React__namespace.createElement(Item, {
         isStartOfSelection: day.isStartOfSelection,
         isEndOfSelection: day.isEndOfSelection,
         isSelected: day.isSelected,
-        isInSelectedRange: day.isInSelectedRange
-      };
-      var dayInnerActive = day.isActive ? "day-inner-active" : "";
-      return /*#__PURE__*/React__namespace.createElement(Item, Object.assign({}, attrs, {
+        isInSelectedRange: day.isInSelectedRange,
         key: key
-      }), /*#__PURE__*/React__namespace.createElement("button", {
-        className: clx("day-inner", dayInnerActive),
-        style: {
-          background: day.isSelected ? "var(--palette-bg-2)" : "transparent"
-        },
-        role: "button",
-        type: "button",
-        onClick: day.isActive ? function () {
-          return props.onDayClick([year, month, leadingZeros.leadingZeros(day.day, 2)].join("-"));
-        } : undefined
-      }, /*#__PURE__*/React__namespace.createElement(index.default, {
-        size: "s",
-        style: {
-          opacity: day.isActive ? 80 : 30,
-          color: day.isActive ? "rgba(0, 0, 0, 0.8)" : "rgba(0, 0, 0, 0.3)"
-        }
-      }, day.day)));
+      }, /*#__PURE__*/React__namespace.createElement(DayButton, {
+        day: day.day,
+        isActive: Boolean(day.isActive),
+        isSelected: Boolean(day.isSelected),
+        dateString: dateString,
+        onDayClick: onDayClick
+      }));
     }));
   })));
 };
+var Month$1 = /*#__PURE__*/React__namespace.memo(Month);
+Month.displayName = "Month";
 
-exports.Month = Month;
+exports.default = Month$1;

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

@@ -12,17 +12,17 @@
 .table {
   display: flex;
   flex-direction: column;
-  width: 100%;
   height: auto;
+  width: 100%;
 }
 
 .week {
   display: grid;
-  grid-template-columns: repeat(7, 1fr);
   gap: 4px;
+  grid-template-columns: repeat(7, 1fr);
   justify-content: center;
-  padding: 0;
   margin: 2px 0;
+  padding: 0;
 }
 
 .day {
@@ -35,11 +35,11 @@
 
 .legend {
   display: grid;
-  grid-template-columns: repeat(7, 1fr);
   gap: 4px;
-  text-align: center;
-  padding: 0;
+  grid-template-columns: repeat(7, 1fr);
   margin: 2px 0;
+  padding: 0;
+  text-align: center;
 }
 
 .selected-range-day {