@invoicebox/ui 0.1.0-alpha.322 → 0.1.0-alpha.326

package/dist/esm/components/form/DateInput/index.test.js

@@ -0,0 +1,69 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { DateInput } from '.';
+
+// Серверный рендер: предупреждения про useLayoutEffect (Dropdown) ожидаемы и к проверке не относятся
+// eslint-disable-next-line no-console
+var originalError = console.error;
+beforeAll(function () {
+  jest.spyOn(console, 'error').mockImplementation(function (message) {
+    if (typeof message === 'string' && message.includes('useLayoutEffect does nothing on the server')) return;
+    // eslint-disable-next-line no-console
+    for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      rest[_key - 1] = arguments[_key];
+    }
+    originalError.apply(void 0, [message].concat(rest));
+  });
+});
+afterAll(function () {
+  return jest.restoreAllMocks();
+});
+var noop = jest.fn();
+
+// useMobile читает window.matchMedia при первом рендере
+var withViewport = function withViewport(isMobile, render) {
+  var globalWithWindow = globalThis;
+  var previous = globalWithWindow.window;
+  globalWithWindow.window = {
+    matchMedia: function matchMedia() {
+      return {
+        matches: isMobile
+      };
+    }
+  };
+  try {
+    return render();
+  } finally {
+    globalWithWindow.window = previous;
+  }
+};
+var renderInput = function renderInput(isMobile) {
+  var _markup$match$, _markup$match;
+  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var markup = withViewport(isMobile, function () {
+    return renderToStaticMarkup(/*#__PURE__*/React.createElement(DateInput, _extends({
+      id: "date",
+      label: "\u0414\u0430\u0442\u0430",
+      value: null,
+      onChange: noop
+    }, props)));
+  });
+  return (_markup$match$ = (_markup$match = markup.match(/<input[^>]*>/)) === null || _markup$match === void 0 ? void 0 : _markup$match[0]) !== null && _markup$match$ !== void 0 ? _markup$match$ : '';
+};
+describe('DateInput: экранная клавиатура (MOB-8)', function () {
+  test('на мобильном — inputmode="none": тап открывает только календарь', function () {
+    expect(renderInput(true)).toContain('inputMode="none"');
+  });
+  test('на десктопе inputmode не задан', function () {
+    expect(renderInput(false)).not.toContain('inputMode');
+  });
+  test('проп inputMode переопределяет значение по умолчанию', function () {
+    expect(renderInput(false, {
+      inputMode: 'none'
+    })).toContain('inputMode="none"');
+    expect(renderInput(true, {
+      inputMode: 'numeric'
+    })).toContain('inputMode="numeric"');
+  });
+});

package/dist/esm/components/form/PhoneInput/index.js

@@ -202,7 +202,8 @@ export var PhoneInput = function PhoneInput(_ref) {
     positionRight: "0",
     positionLeft: "-20px",
     disabled: disabled,
-    selectedLabel: (countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.selectedLabel) || ''
+    selectedLabel: (countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.selectedLabel) || '',
+    buttonAriaLabelPrefix: countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.buttonAriaLabelPrefix
   }))), /*#__PURE__*/React.createElement(InputMask, {
     value: inputValue,
     onFocus: focusHandler,

package/dist/esm/components/form/PositiveIntegerInput/index.js

@@ -26,7 +26,13 @@ export var PositiveIntegerInput = function PositiveIntegerInput(_ref) {
     size = _ref.size,
     _ref$useModernStyles = _ref.useModernStyles,
     useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles,
-    id = _ref.id;
+    id = _ref.id,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$incrementButtonA = _ref.incrementButtonAriaLabel,
+    incrementButtonAriaLabel = _ref$incrementButtonA === void 0 ? 'Увеличить' : _ref$incrementButtonA,
+    _ref$decrementButtonA = _ref.decrementButtonAriaLabel,
+    decrementButtonAriaLabel = _ref$decrementButtonA === void 0 ? 'Уменьшить' : _ref$decrementButtonA;
   var _useInputFocus = useInputFocus({
       onFocus: onFocus,
       onBlur: onBlur
@@ -76,12 +82,32 @@ export var PositiveIntegerInput = function PositiveIntegerInput(_ref) {
   var handleDown = useCallback(function () {
     onChange(decrement(value));
   }, [decrement, value, onChange]);
+  var isUpDisabled = disabled || isIncrementDisabled;
+  var isDownDisabled = disabled || isDecrementDisabled;
+
+  // Стрелки клавиатуры в поле — как кнопки «вверх»/«вниз» (кнопки вне порядка Tab)
+  var handleKeyDown = useCallback(function (event) {
+    if (!upAndDown) return;
+    if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      if (!isUpDisabled) handleUp();
+    } else if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      if (!isDownDisabled) handleDown();
+    }
+  }, [handleDown, handleUp, isDownDisabled, isUpDisabled, upAndDown]);
+
+  // Клик по кнопке не забирает фокус у поля: иначе срабатывал бы onBlur поля
+  var preventFocusLoss = useCallback(function (event) {
+    return event.preventDefault();
+  }, []);
   return /*#__PURE__*/React.createElement(InputLabel, {
     inFocus: inFocus,
     label: inputLabel,
     useModernStyles: useModernStyles,
     size: fieldSize,
-    htmlFor: inputId
+    htmlFor: inputId,
+    disabled: disabled
   }, /*#__PURE__*/React.createElement(S.ControlWrapper, null, modernPlaceholder, /*#__PURE__*/React.createElement(PureInput, _extends({
     id: inputId,
     "aria-label": label && !inputLabel ? label : undefined,
@@ -93,18 +119,32 @@ export var PositiveIntegerInput = function PositiveIntegerInput(_ref) {
     onBlur: handleBlur,
     value: normalizeFrom(value),
     onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    disabled: disabled,
+    inputMode: "numeric",
+    pattern: "[0-9]*",
     paddingRight: upAndDown ? 44 : undefined
   }, paddingAndVariantOptions, {
     useModernStyles: useModernStyles
   })), upAndDown && /*#__PURE__*/React.createElement(S.Arrows, null, /*#__PURE__*/React.createElement(S.Arrow, {
-    onClick: handleUp,
-    $disabled: isIncrementDisabled
+    type: "button",
+    tabIndex: -1,
+    "aria-label": incrementButtonAriaLabel,
+    "aria-controls": inputId,
+    disabled: isUpDisabled,
+    onMouseDown: preventFocusLoss,
+    onClick: handleUp
   }, /*#__PURE__*/React.createElement(Arrow, {
     isOpen: true,
     outterSize: 12
   })), /*#__PURE__*/React.createElement(S.Arrow, {
-    onClick: handleDown,
-    $disabled: isDecrementDisabled
+    type: "button",
+    tabIndex: -1,
+    "aria-label": decrementButtonAriaLabel,
+    "aria-controls": inputId,
+    disabled: isDownDisabled,
+    onMouseDown: preventFocusLoss,
+    onClick: handleDown
   }, /*#__PURE__*/React.createElement(Arrow, {
     isOpen: false,
     outterSize: 12

package/dist/esm/components/form/PositiveIntegerInput/index.test.js

@@ -0,0 +1,78 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { PositiveIntegerInput } from '.';
+var noop = jest.fn();
+var render = function render() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return renderToStaticMarkup(/*#__PURE__*/React.createElement(PositiveIntegerInput, _extends({
+    id: "count",
+    label: "\u041A\u043E\u043B-\u0432\u043E",
+    value: 2,
+    onChange: noop,
+    max: 5,
+    upAndDown: true
+  }, props)));
+};
+var buttons = function buttons(markup) {
+  var _markup$match;
+  return (_markup$match = markup.match(/<button[^>]*>/g)) !== null && _markup$match !== void 0 ? _markup$match : [];
+};
+var input = function input(markup) {
+  var _markup$match$, _markup$match2;
+  return (_markup$match$ = (_markup$match2 = markup.match(/<input[^>]*>/)) === null || _markup$match2 === void 0 ? void 0 : _markup$match2[0]) !== null && _markup$match$ !== void 0 ? _markup$match$ : '';
+};
+describe('PositiveIntegerInput: стрелки «вверх/вниз» (A11Y-16)', function () {
+  test('стрелки — кнопки с именами вне порядка Tab', function () {
+    var _buttons = buttons(render()),
+      _buttons2 = _slicedToArray(_buttons, 2),
+      up = _buttons2[0],
+      down = _buttons2[1];
+    expect(up).toContain('type="button"');
+    expect(up).toContain('tabindex="-1"');
+    expect(up).toContain('aria-label="Увеличить"');
+    expect(up).toContain('aria-controls="count"');
+    expect(up).not.toContain('disabled');
+    expect(down).toContain('aria-label="Уменьшить"');
+    expect(down).not.toContain('disabled');
+  });
+  test('имена кнопок задаются пропами', function () {
+    var _buttons3 = buttons(render({
+        incrementButtonAriaLabel: 'Увеличить количество',
+        decrementButtonAriaLabel: 'Уменьшить количество'
+      })),
+      _buttons4 = _slicedToArray(_buttons3, 2),
+      up = _buttons4[0],
+      down = _buttons4[1];
+    expect(up).toContain('aria-label="Увеличить количество"');
+    expect(down).toContain('aria-label="Уменьшить количество"');
+  });
+  test('на границах недоступна соответствующая кнопка', function () {
+    expect(buttons(render({
+      value: 5
+    }))[0]).toContain('disabled');
+    expect(buttons(render({
+      value: 0
+    }))[1]).toContain('disabled');
+  });
+  test('disabled блокирует поле и обе кнопки', function () {
+    var markup = render({
+      disabled: true
+    });
+    expect(input(markup)).toContain('disabled');
+    buttons(markup).forEach(function (button) {
+      return expect(button).toContain('disabled');
+    });
+  });
+  test('цифровая клавиатура на телефоне', function () {
+    var field = input(render());
+    expect(field).toContain('inputMode="numeric"');
+    expect(field).toContain('pattern="[0-9]*"');
+  });
+});

package/dist/esm/components/form/PositiveIntegerInput/styles.js

@@ -1,15 +1,15 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 export var Arrows = styled.div.withConfig({
   displayName: "styles__Arrows",
   componentId: "sc-ctutr8-0"
-})(["display:flex;flex-direction:column;position:absolute;height:100%;justify-content:center;top:0;right:18px;"]);
-export var Arrow = styled.div.withConfig({
+})(["display:flex;flex-direction:column;position:absolute;height:100%;justify-content:center;top:0;right:12px;"]);
+
+// Кнопка 24×24 (WCAG 2.5.8) со стрелкой 12 px по центру; в низком поле кнопки сжимаются по высоте,
+// чтобы не вылезать за его границы
+export var Arrow = styled.button.withConfig({
   displayName: "styles__Arrow",
   componentId: "sc-ctutr8-1"
-})(["cursor:pointer;display:flex;user-select:none;", ""], function (_ref) {
-  var $disabled = _ref.$disabled;
-  return $disabled && css(["opacity:0.4;pointer-events:none;"]);
-});
+})(["flex:0 1 24px;min-height:0;width:24px;display:flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;user-select:none;&:disabled{opacity:0.4;cursor:default;}"]);
 export var ControlWrapper = styled.div.withConfig({
   displayName: "styles__ControlWrapper",
   componentId: "sc-ctutr8-2"

package/dist/esm/components/form/PureInput/index.js

@@ -1,7 +1,7 @@
 var _excluded = ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "borderRadius", "hasError", "inFocus", "hasBorder", "isOnlyNumbers", "className", "onChange", "element", "variant", "renderedValue", "useModernStyles", "id"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { useCallback, useId } from 'react';
 import * as S from './styles';
 import { useComponentPalette } from '../../../palette';

package/dist/esm/components/form/PureInput/styles.js

@@ -37,8 +37,8 @@ export var getPureInputStyled = function getPureInputStyled(component) {
       $hasBorder = _ref9.$hasBorder,
       $palette = _ref9.$palette;
     return !$hasBorder ? 'transparent' : $hasError ? $palette.error : $inFocus ? $palette.borderFocus : $palette.border;
-  }, function (_ref10) {
-    var $palette = _ref10.$palette;
+  }, function (_ref0) {
+    var $palette = _ref0.$palette;
     return $palette.placeholder;
   }, reducedMotion);
 };

package/dist/esm/components/form/Select/index.js

@@ -148,13 +148,20 @@ var SelectInner = function SelectInner(props) {
   }, [activeIndex, baseId]);
   var dropdownRef = useRef(null);
   var wrapperRef = useOutsideClick(handleHide, [dropdownRef]);
-  var handleFocus = useCallback(function (event) {
-    handleShow();
-    focusHandler(event);
-  }, [focusHandler, handleShow]);
+
+  // Список не открывается на фокус (WCAG 2.4.11): иначе при переходе по Tab он перекрывает
+  // следующие элементы. Открытие — кликом, Enter, пробелом или стрелками
+  var handleFocus = focusHandler;
   var handleBlur = useCallback(function (event) {
+    var _wrapperRef$current, _dropdownRef$current;
     var relatedTarget = event.relatedTarget;
     var isOptionClick = (relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.dataset.optionIdentifier) === OPTION_IDENTIFIER;
+
+    // Фокус ушёл на другой элемент вне поля и списка — закрываем список. Без relatedTarget
+    // (клик по неактивной области списка, уход из окна) не закрываем: клик снаружи
+    // обрабатывает useOutsideClick
+    var isFocusOutside = !!relatedTarget && !((_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(relatedTarget)) && !((_dropdownRef$current = dropdownRef.current) !== null && _dropdownRef$current !== void 0 && _dropdownRef$current.contains(relatedTarget));
+    if (isFocusOutside) handleHide();
     if (!isOptionClick) {
       blurHandler(event);
       return;
@@ -162,7 +169,7 @@ var SelectInner = function SelectInner(props) {
     delayBlur.current = function () {
       return blurHandler(event);
     };
-  }, [blurHandler]);
+  }, [blurHandler, handleHide, wrapperRef]);
   var selectValue = useCallback(function (newValue) {
     if (isMultiple) {
       var next = multipleValue.includes(newValue) ? multipleValue.filter(function (item) {
@@ -214,6 +221,10 @@ var SelectInner = function SelectInner(props) {
           handleHide();
         }
         break;
+      case 'Tab':
+        // фокус уходит дальше по странице — список не должен оставаться поверх
+        if (isOpen) handleHide();
+        break;
       default:
         break;
     }
@@ -231,6 +242,12 @@ var SelectInner = function SelectInner(props) {
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.blur();
     handleShow();
   };
+
+  // Раньше список открывался фокусом, который ставит и клик; теперь клик открывает его сам.
+  // Повторный клик по полю закрывает список, как у нативного select
+  var handleToggleClick = function handleToggleClick() {
+    if (isOpen) handleHide();else handleShow();
+  };
   var handleOptionRender = function handleOptionRender(option) {
     if (renderOption) {
       if (!option.entity) {
@@ -357,7 +374,7 @@ var SelectInner = function SelectInner(props) {
     isOpen: isOpen,
     onReset: isResetButtonEnabled ? handleReset : undefined,
     size: fieldSize,
-    onClick: isDrawerOptions || !!renderedValue ? handleInputClick : undefined,
+    onClick: isDrawerOptions || !!renderedValue ? handleInputClick : handleToggleClick,
     required: required,
     useModernStyles: useModernStyles,
     comboboxProps: {

package/dist/esm/components/form/TagsInput/styles.js

@@ -1,7 +1,7 @@
 var _excluded = ["children"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React from 'react';
 import { getPureInputStyled } from '../PureInput/styles';
 import styled from 'styled-components';

package/dist/esm/components/form/Toggle/index.js

@@ -1,7 +1,7 @@
 var _excluded = ["checked", "variant", "label", "onChange", "disabled", "alwaysHighlighted"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React from 'react';
 import * as S from './styles';
 import { INPUT_VARIANT_MAP } from './styles';

package/dist/esm/components/form/Toggle/styles.js

@@ -57,22 +57,22 @@ export var StyledInput = styled.input.withConfig({
 }, function (_ref9) {
   var $variant = _ref9.$variant;
   return INPUT_VARIANT_MAP[$variant].circleSize;
+}, function (_ref0) {
+  var $palette = _ref0.$palette;
+  return $palette.circle;
+}, function (_ref1) {
+  var $variant = _ref1.$variant;
+  return INPUT_VARIANT_MAP[$variant].leftChecked;
 }, function (_ref10) {
   var $palette = _ref10.$palette;
-  return $palette.circle;
+  return $palette.activeBg;
 }, function (_ref11) {
   var $variant = _ref11.$variant;
-  return INPUT_VARIANT_MAP[$variant].leftChecked;
+  return INPUT_VARIANT_MAP[$variant].border;
 }, function (_ref12) {
   var $palette = _ref12.$palette;
-  return $palette.activeBg;
-}, function (_ref13) {
-  var $variant = _ref13.$variant;
-  return INPUT_VARIANT_MAP[$variant].border;
-}, function (_ref14) {
-  var $palette = _ref14.$palette;
   return $palette.disabledBorder;
-}, function (_ref15) {
-  var $palette = _ref15.$palette;
+}, function (_ref13) {
+  var $palette = _ref13.$palette;
   return $palette.activeBg;
 }, reducedMotion);

package/dist/esm/hooks/useQueryFilter/context.js

@@ -0,0 +1,40 @@
+import React, { createContext, useContext, useMemo } from 'react';
+export var DEFAULT_PAGE_PARAM_NAME = 'page';
+export var DEFAULT_FIRST_PAGE = 1;
+var QueryFilterContext = /*#__PURE__*/createContext(null);
+/**
+ * Подключает `useQueryFilter` к роутеру приложения. Библиотека от роутера не зависит:
+ * приложение само передаёт параметры строки запроса и способ их записать.
+ *
+ * ```tsx
+ * const [searchParams, setSearchParams] = useSearchParams();
+ * <QueryFilterProvider searchParams={searchParams} setSearchParams={setSearchParams}>
+ * ```
+ */
+export var QueryFilterProvider = function QueryFilterProvider(_ref) {
+  var searchParams = _ref.searchParams,
+    setSearchParams = _ref.setSearchParams,
+    _ref$pageParamName = _ref.pageParamName,
+    pageParamName = _ref$pageParamName === void 0 ? DEFAULT_PAGE_PARAM_NAME : _ref$pageParamName,
+    _ref$firstPage = _ref.firstPage,
+    firstPage = _ref$firstPage === void 0 ? DEFAULT_FIRST_PAGE : _ref$firstPage,
+    children = _ref.children;
+  var value = useMemo(function () {
+    return {
+      searchParams: searchParams,
+      setSearchParams: setSearchParams,
+      pageParamName: pageParamName,
+      firstPage: firstPage
+    };
+  }, [searchParams, setSearchParams, pageParamName, firstPage]);
+  return /*#__PURE__*/React.createElement(QueryFilterContext.Provider, {
+    value: value
+  }, children);
+};
+export var useQueryFilterContext = function useQueryFilterContext() {
+  var context = useContext(QueryFilterContext);
+  if (!context) {
+    throw new Error('useQueryFilter must be used inside QueryFilterProvider');
+  }
+  return context;
+};

package/dist/esm/hooks/useQueryFilter/helpers.js

@@ -0,0 +1,58 @@
+export var DATA_SPLITTER = '!!!';
+var pad = function pad(value) {
+  return String(value).padStart(2, '0');
+};
+
+/**
+ * Дата в строку запроса: локальное время со смещением, `yyyy-MM-dd'T'HH:mm:ssxxx`
+ * (например, `2026-10-06T19:16:00+07:00`). Миллисекунды отбрасываются.
+ */
+export var formatDateForQuery = function formatDateForQuery(date) {
+  var offsetMinutes = -date.getTimezoneOffset();
+  var sign = offsetMinutes >= 0 ? '+' : '-';
+  var absOffset = Math.abs(offsetMinutes);
+  return "".concat(date.getFullYear(), "-").concat(pad(date.getMonth() + 1), "-").concat(pad(date.getDate())) + "T".concat(pad(date.getHours()), ":").concat(pad(date.getMinutes()), ":").concat(pad(date.getSeconds())) + "".concat(sign).concat(pad(Math.floor(absOffset / 60)), ":").concat(pad(absOffset % 60));
+};
+
+/** Дата без времени: `yyyy-MM-dd` по местному времени */
+export var formatDateOnlyForQuery = function formatDateOnlyForQuery(date) {
+  return "".concat(date.getFullYear(), "-").concat(pad(date.getMonth() + 1), "-").concat(pad(date.getDate()));
+};
+export var getDateOrNullFromQueryString = function getDateOrNullFromQueryString(value) {
+  return value ? new Date(value) : null;
+};
+export var getQueryStringFromDateOrNull = function getQueryStringFromDateOrNull(value) {
+  return value ? formatDateForQuery(value) : '';
+};
+export var getDateArrOrNullFromQueryString = function getDateArrOrNullFromQueryString(value) {
+  if (value) {
+    var datesArray = value.split(DATA_SPLITTER).map(function (date) {
+      return new Date(date);
+    });
+    if (datesArray.length === 2) {
+      return [datesArray[0], datesArray[1]];
+    }
+  }
+  return null;
+};
+// Диапазон дат хранится в адресе без времени — так он и раньше писался в кабинете
+export var getQueryStringFromDateArrOrNull = function getQueryStringFromDateArrOrNull(value) {
+  return value ? value.map(formatDateOnlyForQuery).join(DATA_SPLITTER) : '';
+};
+export var getNumberOrNullFromQueryString = function getNumberOrNullFromQueryString(value) {
+  return value ? Number(value) : null;
+};
+export var getQueryStringFromNumberOrNull = function getQueryStringFromNumberOrNull(value) {
+  return value ? String(value) : '';
+};
+export var getQueryStringFromArrayString = function getQueryStringFromArrayString(value) {
+  return (value === null || value === void 0 ? void 0 : value.join(DATA_SPLITTER)) || '';
+};
+export var getArrayStringsFromQueryString = function getArrayStringsFromQueryString(value) {
+  return value ? value.split(DATA_SPLITTER) : undefined;
+};
+export var booleanFromString = function booleanFromString(value) {
+  if (value === 'true') return true;
+  if (value === 'false') return false;
+  return null;
+};

package/dist/esm/hooks/useQueryFilter/index.js

@@ -0,0 +1,123 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQueryFilterContext } from './context';
+export { QueryFilterProvider, DEFAULT_PAGE_PARAM_NAME, DEFAULT_FIRST_PAGE } from './context';
+export * from './helpers';
+var getIsEmptyValue = function getIsEmptyValue(value) {
+  return value === '' || value === undefined || value === null || Array.isArray(value) && value.length === 0;
+};
+
+/**
+ * Значение фильтра, которое живёт в строке запроса.
+ *
+ * - `initialValue` записывается в адрес при монтировании, если параметра там ещё нет;
+ *   пустое значение (`''`, `null`, `undefined`, `[]`) удаляет параметр.
+ * - Смена значения сбрасывает номер страницы на первую (`isResetPageWhenChanged`).
+ * - Начальное значение можно передавать выражением (`new Date()`, `[]`): хук сравнивает его
+ *   по строке, которую оно даёт в адресе, а не по ссылке.
+ *
+ * Нужен `QueryFilterProvider` выше по дереву.
+ */
+export var useQueryFilter = function useQueryFilter(name, initialValue, fromString, toString) {
+  var _searchParams$get;
+  var isResetPageWhenChanged = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
+  var _useQueryFilterContex = useQueryFilterContext(),
+    searchParams = _useQueryFilterContex.searchParams,
+    setSearchParams = _useQueryFilterContex.setSearchParams,
+    pageParamName = _useQueryFilterContex.pageParamName,
+    firstPage = _useQueryFilterContex.firstPage;
+
+  // для тех случаев когда если initialValue и в случае когда он не успел вставить в квери параметры - возвращать его
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    acceptInitialValueDone = _useState2[0],
+    setAcceptInitialValueDone = _useState2[1];
+  var serialize = useCallback(function (value) {
+    if (getIsEmptyValue(value)) return '';
+    return toString ? toString(value) : String(value);
+  }, [toString]);
+  var removeAttribute = useCallback(function (isResetPage) {
+    if (searchParams.has(name)) {
+      searchParams["delete"](name);
+      if (isResetPage) {
+        searchParams.set(pageParamName, String(firstPage));
+      }
+      setSearchParams(searchParams);
+    }
+  }, [firstPage, name, pageParamName, searchParams, setSearchParams]);
+  var handleQueryChange = useCallback(function (newValue) {
+    if (getIsEmptyValue(newValue)) {
+      removeAttribute(isResetPageWhenChanged);
+      return;
+    }
+    searchParams.set(name, serialize(newValue));
+    if (isResetPageWhenChanged) {
+      searchParams.set(pageParamName, String(firstPage));
+    }
+    setSearchParams(searchParams);
+  }, [firstPage, isResetPageWhenChanged, name, pageParamName, removeAttribute, searchParams, serialize, setSearchParams]);
+  var acceptInitialValue = useCallback(function (initial) {
+    if (!searchParams.has(name)) {
+      if (getIsEmptyValue(initial)) {
+        removeAttribute(true);
+        setAcceptInitialValueDone(true);
+        return;
+      }
+      searchParams.set(name, serialize(initial));
+      setSearchParams(searchParams);
+    }
+    setAcceptInitialValueDone(true);
+  }, [name, removeAttribute, searchParams, serialize, setSearchParams]);
+
+  /**
+   * Начальное значение, стабилизированное по его строковому представлению.
+   *
+   * Вызывающие часто передают начальное значение выражением (`monthStart()`, `[]`,
+   * `new Date()`), то есть новым объектом на каждый рендер. Если зависеть от самой
+   * ссылки, эффект ниже срабатывает на каждом рендере (и возвращает в адрес значение
+   * по умолчанию, которое пользователь только что сбросил), а значение фильтра каждый
+   * раз получает новую ссылку — эффект с запросом перезапускается без конца. Поэтому
+   * ссылка меняется только когда меняется строка, которую значение даёт в адресе.
+   */
+  var initialKey = serialize(initialValue);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  var stableInitialValue = useMemo(function () {
+    return initialValue;
+  }, [initialKey]);
+  useEffect(function () {
+    acceptInitialValue(stableInitialValue);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stableInitialValue]);
+  var handleGetValueFromString = useCallback(function (queryValue) {
+    if (fromString) {
+      return fromString(queryValue);
+    }
+    return queryValue || '';
+  }, [fromString]);
+
+  /**
+   * Строку читаем на каждом рендере, а не кешируем по объекту `searchParams`: эффект
+   * начального значения дописывает параметр прямо в текущий объект, а навигация
+   * (react-router 7 — переходом с низким приоритетом) приходит позже. Между ними есть
+   * рендер, где объект прежний, но строка в нём уже новая, — по ней и надо считать,
+   * иначе фильтр на один рендер «пустеет» и уходит лишний запрос.
+   *
+   * Пока строка в адресе совпадает с начальной, отдаём сам `stableInitialValue`, а не
+   * результат разбора: иначе `new Date(...)` из разборщика дал бы новую ссылку при тех
+   * же данных и эффект с запросом сработал бы ещё раз.
+   */
+  var rawQueryValue = (_searchParams$get = searchParams.get(name)) !== null && _searchParams$get !== void 0 ? _searchParams$get : '';
+  var isInitialNotAppliedYet = !acceptInitialValueDone && !searchParams.has(name);
+  var formattedValue = useMemo(function () {
+    if (isInitialNotAppliedYet || rawQueryValue === initialKey) {
+      return stableInitialValue;
+    }
+    return handleGetValueFromString(rawQueryValue || null);
+  }, [handleGetValueFromString, initialKey, isInitialNotAppliedYet, rawQueryValue, stableInitialValue]);
+  return [formattedValue, handleQueryChange];
+};