colibri-ui 0.8.43 → 0.8.44

package/Calendar/index.js

@@ -27,6 +27,59 @@ var clx = classNames__default.default.bind(styles__default.default);
 var idleCallbackOptions = {
   timeout: 1000
 };
+var updates = {};
+var calendarReducer = function calendarReducer(state, action) {
+  switch (action.type) {
+    case "SET_SELECTED_DATE":
+      return Object.assign(Object.assign({}, state), {
+        selectedDate: action.payload
+      });
+    case "SET_SELECTED_PERIOD":
+      return Object.assign(Object.assign({}, state), {
+        selectedPeriod: action.payload
+      });
+    case "SET_CURRENT_MONTH_OFFSET":
+      return Object.assign(Object.assign({}, state), {
+        currentMonthOffset: action.payload
+      });
+    case "SET_CONTENT_WIDTH":
+      return Object.assign(Object.assign({}, state), {
+        contentWidth: action.payload
+      });
+    case "SET_IS_RANGE_COMPLETED":
+      return Object.assign(Object.assign({}, state), {
+        isRangeCompleted: action.payload
+      });
+    case "SELECT_DATE":
+      return Object.assign(Object.assign({}, state), {
+        selectedDate: action.payload.date,
+        selectedPeriod: action.payload.period,
+        isRangeCompleted: action.payload.rangeCompleted,
+        currentMonthOffset: getNumberOfMonthsBetweenDates.getNumberOfMonthsBetweenDates(action.payload.startMonth, action.payload.date)
+      });
+    case "INCREMENT_MONTH_OFFSET":
+      return Object.assign(Object.assign({}, state), {
+        currentMonthOffset: state.currentMonthOffset + 1
+      });
+    case "DECREMENT_MONTH_OFFSET":
+      return Object.assign(Object.assign({}, state), {
+        currentMonthOffset: state.currentMonthOffset - 1
+      });
+    case "SYNC_INITIAL_STATE":
+      if (action.payload.selectedDate !== undefined && action.payload.selectedDate !== state.selectedDate) {
+        updates.selectedDate = action.payload.selectedDate;
+        if (action.payload.selectedDate) {
+          updates.currentMonthOffset = getNumberOfMonthsBetweenDates.getNumberOfMonthsBetweenDates(action.payload.startMonth, action.payload.selectedDate);
+        }
+      }
+      if (action.payload.selectedPeriod !== undefined && action.payload.selectedPeriod !== state.selectedPeriod) {
+        updates.selectedPeriod = action.payload.selectedPeriod;
+      }
+      return Object.keys(updates).length > 0 ? Object.assign(Object.assign({}, state), updates) : state;
+    default:
+      return state;
+  }
+};
 var Calendar = function Calendar(_ref) {
   var today = _ref.today,
     initialSelectedDate = _ref.selectedDate,
@@ -49,60 +102,59 @@ var Calendar = function Calendar(_ref) {
     today: today,
     activeDates: activeDates
   });
-  var _useState = React.useState(initialSelectedDate),
-    _useState2 = _slicedToArray__default.default(_useState, 2),
-    selectedDate = _useState2[0],
-    setSelectedDate = _useState2[1];
-  var _useState3 = React.useState(initialSelectedPeriod),
-    _useState4 = _slicedToArray__default.default(_useState3, 2),
-    selectedPeriod = _useState4[0],
-    setSelectedPeriod = _useState4[1];
-  var _useState5 = React.useState(function () {
-      if (initialSelectedDate) {
-        return getNumberOfMonthsBetweenDates.getNumberOfMonthsBetweenDates(startMonth, initialSelectedDate);
-      } else if (activeDates && activeDates.length) {
-        return getNumberOfMonthsBetweenDates.getNumberOfMonthsBetweenDates(startMonth, activeDates.sort()[0]);
-      }
-      return 0;
+  var getInitialOffset = function getInitialOffset() {
+    if (initialSelectedDate) {
+      return getNumberOfMonthsBetweenDates.getNumberOfMonthsBetweenDates(startMonth, initialSelectedDate);
+    } else if (activeDates && activeDates.length) {
+      return getNumberOfMonthsBetweenDates.getNumberOfMonthsBetweenDates(startMonth, activeDates.sort()[0]);
+    }
+    return 0;
+  };
+  var _useReducer = React.useReducer(calendarReducer, {
+      selectedDate: initialSelectedDate,
+      selectedPeriod: initialSelectedPeriod,
+      currentMonthOffset: getInitialOffset(),
+      contentWidth: 0,
+      isRangeCompleted: true
     }),
-    _useState6 = _slicedToArray__default.default(_useState5, 2),
-    currentMonthOffset = _useState6[0],
-    setCurrentMonthOffset = _useState6[1];
-  var _useState7 = React.useState(0),
-    _useState8 = _slicedToArray__default.default(_useState7, 2),
-    contentWidth = _useState8[0],
-    setContentWidth = _useState8[1];
-  var _useState9 = React.useState(true),
-    _useState0 = _slicedToArray__default.default(_useState9, 2),
-    isRangeCompleted = _useState0[0],
-    setIsRangeCompleted = _useState0[1];
+    _useReducer2 = _slicedToArray__default.default(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
   React.useEffect(function () {
     var _a;
-    setContentWidth(((_a = $root.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0);
+    dispatch({
+      type: "SET_CONTENT_WIDTH",
+      payload: ((_a = $root.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0
+    });
   }, []);
   var showPrevMonth = function showPrevMonth(event) {
     event.preventDefault();
     event.stopPropagation();
-    setCurrentMonthOffset(function (prev) {
-      return prev - 1;
+    dispatch({
+      type: "DECREMENT_MONTH_OFFSET"
     });
   };
   var showNextMonth = function showNextMonth(event) {
     event.preventDefault();
     event.stopPropagation();
-    setCurrentMonthOffset(function (prev) {
-      return prev + 1;
+    dispatch({
+      type: "INCREMENT_MONTH_OFFSET"
     });
   };
   var selectDate = React.useCallback(function (date, period, rangeCompleted) {
-    setSelectedDate(date);
-    setSelectedPeriod(period);
-    setIsRangeCompleted(rangeCompleted);
-    setCurrentMonthOffset(getNumberOfMonthsBetweenDates.getNumberOfMonthsBetweenDates(startMonth, date));
+    dispatch({
+      type: "SELECT_DATE",
+      payload: {
+        date: date,
+        period: period,
+        rangeCompleted: rangeCompleted,
+        startMonth: startMonth
+      }
+    });
   }, [startMonth]);
   var handleDayClick = React.useCallback(function (date) {
-    if (canSelectRange && selectedDate && !isRangeCompleted) {
-      var _sort = [date, selectedDate].sort(),
+    if (canSelectRange && state.selectedDate && !state.isRangeCompleted) {
+      var _sort = [date, state.selectedDate].sort(),
         _sort2 = _slicedToArray__default.default(_sort, 2),
         startDate = _sort2[0],
         endDate = _sort2[1];
@@ -127,9 +179,7 @@ var Calendar = function Calendar(_ref) {
         return selectDate(date, 1, false);
       }, idleCallbackOptions);
     }
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [canSelectRange, selectedDate, isRangeCompleted, selectDate]);
+  }, [canSelectRange, state.selectedDate, state.isRangeCompleted, selectDate, onChange]);
   var handlePresetSelect = React.useCallback(function (preset) {
     if (onChange) {
       onChange({
@@ -140,20 +190,20 @@ var Calendar = function Calendar(_ref) {
     index$1.requestIdleCallback(function () {
       return selectDate(preset.date, preset.period, true);
     }, idleCallbackOptions);
-  }, [selectDate]);
+  }, [selectDate, onChange]);
   var commitSelectedDates = React.useCallback(function () {
-    if (selectedDate && selectedPeriod) {
+    if (state.selectedDate && state.selectedPeriod) {
       if (onCancel) {
         onCancel();
       }
       if (onChange) {
         onChange({
-          date: selectedDate,
-          period: selectedPeriod
+          date: state.selectedDate,
+          period: state.selectedPeriod
         });
       }
     }
-  }, [selectedDate, selectedPeriod, onChange, onCancel]);
+  }, [state.selectedDate, state.selectedPeriod, onChange, onCancel]);
   var cancelCalendar = React.useCallback(function () {
     if (onCancel) {
       onCancel();
@@ -164,26 +214,26 @@ var Calendar = function Calendar(_ref) {
     startDate.setMonth(startDate.getMonth() + shiftIndex);
     return startDate;
   }, [startMonth]);
-  var commonAttrs = {
-    selectedDate: selectedDate,
-    selectedPeriod: selectedPeriod,
-    activeDates: activeDates,
-    availableDates: availableDates,
-    isRangeCompleted: isRangeCompleted,
-    onDayClick: handleDayClick
-  };
+  var commonAttrs = React.useMemo(function () {
+    return {
+      selectedDate: state.selectedDate,
+      selectedPeriod: state.selectedPeriod,
+      activeDates: activeDates,
+      availableDates: availableDates,
+      isRangeCompleted: state.isRangeCompleted,
+      onDayClick: handleDayClick
+    };
+  }, [state.selectedDate, state.selectedPeriod, activeDates, availableDates, state.isRangeCompleted, handleDayClick]);
   React.useEffect(function () {
-    setSelectedDate(initialSelectedDate);
-  }, [initialSelectedDate]);
-  React.useEffect(function () {
-    setSelectedPeriod(initialSelectedPeriod);
-  }, [initialSelectedPeriod]);
-  React.useEffect(function () {
-    if (initialSelectedDate) {
-      var newOffset = getNumberOfMonthsBetweenDates.getNumberOfMonthsBetweenDates(startMonth, initialSelectedDate);
-      setCurrentMonthOffset(newOffset);
-    }
-  }, [initialSelectedDate, startMonth]);
+    dispatch({
+      type: "SYNC_INITIAL_STATE",
+      payload: {
+        selectedDate: initialSelectedDate,
+        selectedPeriod: initialSelectedPeriod,
+        startMonth: startMonth
+      }
+    });
+  }, [initialSelectedDate, initialSelectedPeriod, startMonth]);
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clx(styles__default.default.root, className),
     style: {
@@ -191,33 +241,33 @@ var Calendar = function Calendar(_ref) {
     },
     "data-testid": "calendar",
     ref: $root
-  }, /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, contentWidth ? (/*#__PURE__*/React__default.default.createElement("div", {
+  }, /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, state.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)")
+      transform: "translate3D(".concat(-1 * state.currentMonthOffset * state.contentWidth, "px, 0, 0)")
     }
-  }, [currentMonthOffset - 1, currentMonthOffset, currentMonthOffset + 1].filter(function (index) {
+  }, [state.currentMonthOffset - 1, state.currentMonthOffset, state.currentMonthOffset + 1].filter(function (index) {
     return index >= 0;
   }).map(function (index) {
     var attrs = Object.assign(Object.assign({}, commonAttrs), {
       today: today,
       startDate: getMonthStartDate(index),
-      offsetLeft: index * contentWidth
+      offsetLeft: index * state.contentWidth
     });
-    return /*#__PURE__*/React__default.default.createElement(Month.Month, Object.assign({}, attrs, {
+    return /*#__PURE__*/React__default.default.createElement(Month.default, Object.assign({}, attrs, {
       titleSize: titleSize,
       key: "month-".concat(index)
     }));
-  }))) : (/*#__PURE__*/React__default.default.createElement(Month.Month, Object.assign({
+  }))) : (/*#__PURE__*/React__default.default.createElement(Month.default, Object.assign({
     titleSize: titleSize,
     today: today,
-    startDate: getMonthStartDate(currentMonthOffset),
+    startDate: getMonthStartDate(state.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,
+    disabled: state.currentMonthOffset <= 0,
     type: "button",
     role: "button",
     "aria-label": "Prev"
@@ -226,7 +276,7 @@ var Calendar = function Calendar(_ref) {
   })), /*#__PURE__*/React__default.default.createElement("button", {
     className: clx(styles__default.default["month-control"], styles__default.default["month-control-next"]),
     onClick: showNextMonth,
-    disabled: currentMonthOffset >= 11,
+    disabled: state.currentMonthOffset >= 11,
     type: "button",
     role: "button",
     "aria-label": "Next"
@@ -236,9 +286,9 @@ var Calendar = function Calendar(_ref) {
     presets: datePresets,
     onPresetSelect: handlePresetSelect
   })), withContinueButton && (/*#__PURE__*/React__default.default.createElement(index$3.ContinueButton, {
-    isChanged: selectedDate !== initialSelectedDate || selectedPeriod !== initialSelectedPeriod,
-    selectedDate: selectedDate,
-    selectedPeriod: selectedPeriod,
+    isChanged: state.selectedDate !== initialSelectedDate || state.selectedPeriod !== initialSelectedPeriod,
+    selectedDate: state.selectedDate,
+    selectedPeriod: state.selectedPeriod,
     onContinue: commitSelectedDates,
     onCancel: cancelCalendar
   })));

package/Calendar/index.module.css

@@ -4,8 +4,8 @@
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   gap: 1rem;
-  min-width: 320px;
   min-height: 360px;
+  min-width: 320px;
   overflow: hidden;
   position: relative;
   text-rendering: optimizelegibility;

package/Calendar/utils/getPresets.js

@@ -83,6 +83,7 @@ function getPresets(presets) {
     var _a;
     var presetFn = PRESET_MAP[preset];
     if (!presetFn) {
+      //eslint-disable-next-line no-console
       console.warn("Unknown preset: ".concat(preset, ", falling back to TODAY"));
     }
     return (_a = presetFn === null || presetFn === void 0 ? void 0 : presetFn()) !== null && _a !== void 0 ? _a : getToday();

package/Checkbox/Checkbox.module.css

@@ -69,12 +69,12 @@
   border-color: var(--palette-bg-3);
 }
 
-.control_variant_primary {
-  /* stylelint-disable-next-line no-descending-specificity */
-}
 .control_variant_primary:focus:not(:disabled) + .fake-checkbox {
   box-shadow: 0 0 0 2px var(--checkbox-box-shadow-focused);
 }
+.control_variant_primary {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
 .control_variant_primary:disabled + .fake-checkbox {
   background-color: var(--checkbox-bg-disabled);
   z-index: 1;

package/Counter/Counter.module.css

@@ -1,10 +1,10 @@
 .root {
   background-color: var(--palette-white);
+  block-size: 40px;
   border-radius: 4px;
   box-sizing: border-box;
   display: inline-block;
   font-size: 16px;
-  block-size: 40px;
   min-inline-size: 96px;
   overflow: hidden;
   position: relative;

package/Datepicker/components/DatePicker/index.module.css

@@ -1,33 +1,33 @@
 .input-container {
-  display: flex;
   align-items: center;
-  justify-content: center;
-  height: 36px;
-  box-sizing: border-box;
   border: 1px solid var(--palette-bg-3);
-  border-top-right-radius: 0.375rem;
   border-bottom-right-radius: 0.375rem;
   border-left: none;
+  border-top-right-radius: 0.375rem;
+  box-sizing: border-box;
+  display: flex;
+  height: 36px;
+  justify-content: center;
 }
 
 .input-field {
-  width: 100%;
-  height: 100%;
-  padding: 4px;
-  text-align: center;
   background: transparent;
   border: none;
-  outline: none;
   box-sizing: border-box;
+  height: 100%;
+  outline: none;
+  padding: 4px;
+  text-align: center;
+  width: 100%;
 }
 
 .input-date {
+  border-bottom: 1px solid var(--palette-bg-3);
+  border-right: 1px solid var(--palette-bg-3);
+  border-top: 1px solid var(--palette-bg-3);
   cursor: pointer;
   flex: 3;
   position: relative;
-  border-top: 1px solid var(--palette-bg-3);
-  border-right: 1px solid var(--palette-bg-3);
-  border-bottom: 1px solid var(--palette-bg-3);
 }
 
 .input-date:focus-within {
@@ -36,12 +36,12 @@
 }
 
 .input-date:focus-within::before {
+  background-color: var(--palette-primary-3);
   content: "";
-  position: absolute;
+  height: 100%;
   left: 0;
+  position: absolute;
   width: 1px;
-  height: 100%;
-  background-color: var(--palette-primary-3);
 }
 
 .calendar {
@@ -49,8 +49,8 @@
 }
 
 .calendar-icon {
-  width: 24px;
+  cursor: pointer;
   height: 24px;
   margin-right: 10px;
-  cursor: pointer;
+  width: 24px;
 }

package/Grid/Grid.module.css

@@ -6,8 +6,8 @@
 @supports (display: grid) {
   .root {
     display: grid;
+    gap: 10px;
     grid-auto-rows: minmax(50px, auto);
-    grid-gap: 10px;
   }
   .root > * {
     margin: 0;

package/Modal/Modal.module.css

@@ -8,20 +8,20 @@
 }
 
 .title-wrapper {
-  padding-right: 20px;
   align-items: center;
   border-bottom: 1px solid var(--palette-bg-2);
   display: flex;
   justify-content: space-between;
+  padding-right: 20px;
 }
 
 .close-wrapper {
+  align-items: center;
   box-sizing: border-box;
-  padding: 0 20px;
-  min-height: 70px;
   display: flex;
-  align-items: center;
   justify-content: flex-end;
+  min-height: 70px;
+  padding: 0 20px;
 }
 
 .modal-overlay {

package/Switch/Switch.module.css

@@ -10,10 +10,10 @@
 }
 
 .label {
-  display: flex;
   align-items: center;
-  gap: 8px;
   cursor: pointer;
+  display: flex;
+  gap: 8px;
   position: relative;
 }
 
@@ -24,16 +24,16 @@
   box-sizing: border-box;
   height: 22px;
   position: relative;
-  width: 40px;
   transition: all 150ms ease;
+  width: 40px;
 }
 .wrapper_variant_primary {
   background-color: var(--switch-bg);
   border-color: var(--switch-border-color);
 }
 .wrapper_disabled {
-  opacity: 0.5;
   cursor: not-allowed;
+  opacity: 0.5;
 }
 .wrapper_error {
   border-color: var(--color-error, #ef4444);
@@ -43,13 +43,13 @@
 .base-switch {
   background: var(--palette-white);
   border-radius: 50%;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   height: 16px;
   left: 2px;
   position: absolute;
   top: 2px;
   transition: transform 150ms ease;
   width: 16px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .checkbox {
@@ -82,8 +82,8 @@
 }
 
 .text {
+  color: var(--text-primary, #1f2937);
   font-size: 16px;
   line-height: 1.4;
-  color: var(--text-primary, #1f2937);
   user-select: none;
 }

package/TabsMenu/Tab/Tab.props.d.ts

@@ -6,7 +6,7 @@ export type TabProps = {
     disabled?: boolean;
     content?: ReactNode;
     onClick?: MouseEventHandler<HTMLLIElement>;
-    innerRef?: RefObject<HTMLLIElement>;
+    innerRef?: RefObject<HTMLLIElement | null>;
     className?: string;
     tabIndex?: number;
     onKeyDown?: KeyboardEventHandler<HTMLElement>;

package/esm/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 {