@alfalab/core-components-date-range-input 2.3.13 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -103,6 +103,10 @@ type DateRangeInputProps = Omit<InputProps, 'onChange'> & ConditionalProps & {
103
103
  * Отображение компонента в мобильном или десктопном виде
104
104
  */
105
105
  view?: 'desktop' | 'mobile';
106
+ /**
107
+ * Запретить ввод с клавиатуры
108
+ */
109
+ disableUserInput?: boolean;
106
110
  };
107
111
  declare const DateRangeInput: React.ForwardRefExoticComponent<DateRangeInputProps & React.RefAttributes<HTMLInputElement>>;
108
112
  export { ConditionalProps, DateRangeInputProps, DateRangeInput };
@@ -24,22 +24,21 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
24
24
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
25
25
  var dateFnsIsValid__default = /*#__PURE__*/_interopDefaultCompat(dateFnsIsValid);
26
26
 
27
- var styles = {"component":"date-range-input__component_qnl0i","calendarContainer":"date-range-input__calendarContainer_qnl0i","calendarResponsive":"date-range-input__calendarResponsive_qnl0i","block":"date-range-input__block_qnl0i","calendarIcon":"date-range-input__calendarIcon_qnl0i"};
27
+ var styles = {"component":"date-range-input__component_i7dcl","calendarContainer":"date-range-input__calendarContainer_i7dcl","calendarResponsive":"date-range-input__calendarResponsive_i7dcl","block":"date-range-input__block_i7dcl","calendarIcon":"date-range-input__calendarIcon_i7dcl"};
28
28
  require('./index.css')
29
29
 
30
- /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
31
30
  var DateRangeInput = React__default.default.forwardRef(function (_a, ref) {
32
31
  var _b, _c;
33
32
  var _d;
34
- var className = _a.className, inputClassName = _a.inputClassName, popoverClassName = _a.popoverClassName, disabled = _a.disabled, readOnly = _a.readOnly, picker = _a.picker, _e = _a.defaultValue, defaultValue = _e === void 0 ? '' : _e, propValue = _a.value, onChange = _a.onChange, onComplete = _a.onComplete, onClose = _a.onClose, rightAddons = _a.rightAddons, useAnchorWidth = _a.useAnchorWidth, block = _a.block, _f = _a.popoverPosition, popoverPosition = _f === void 0 ? 'bottom-start' : _f, zIndexPopover = _a.zIndexPopover, preventFlip = _a.preventFlip, _g = _a.Calendar, Calendar = _g === void 0 ? coreComponentsCalendar.Calendar : _g, _h = _a.calendarProps, calendarProps = _h === void 0 ? {} : _h, defaultMonth = _a.defaultMonth, _j = _a.minDate, minDate = _j === void 0 ? calendarProps.minDate : _j, _k = _a.maxDate, maxDate = _k === void 0 ? calendarProps.maxDate : _k, _l = _a.offDays, offDays = _l === void 0 ? calendarProps.offDays || [] : _l, _m = _a.events, events = _m === void 0 ? calendarProps.events || [] : _m, _o = _a.defaultOpen, defaultOpen = _o === void 0 ? false : _o, _p = _a.view, view = _p === void 0 ? 'desktop' : _p, restProps = tslib.__rest(_a, ["className", "inputClassName", "popoverClassName", "disabled", "readOnly", "picker", "defaultValue", "value", "onChange", "onComplete", "onClose", "rightAddons", "useAnchorWidth", "block", "popoverPosition", "zIndexPopover", "preventFlip", "Calendar", "calendarProps", "defaultMonth", "minDate", "maxDate", "offDays", "events", "defaultOpen", "view"]);
33
+ var className = _a.className, inputClassName = _a.inputClassName, popoverClassName = _a.popoverClassName, disabled = _a.disabled, readOnly = _a.readOnly, _e = _a.disableUserInput, disableUserInput = _e === void 0 ? false : _e, picker = _a.picker, _f = _a.defaultValue, defaultValue = _f === void 0 ? '' : _f, propValue = _a.value, onChange = _a.onChange, onComplete = _a.onComplete, onClose = _a.onClose, rightAddons = _a.rightAddons, useAnchorWidth = _a.useAnchorWidth, block = _a.block, _g = _a.popoverPosition, popoverPosition = _g === void 0 ? 'bottom-start' : _g, zIndexPopover = _a.zIndexPopover, preventFlip = _a.preventFlip, _h = _a.Calendar, Calendar = _h === void 0 ? coreComponentsCalendar.Calendar : _h, _j = _a.calendarProps, calendarProps = _j === void 0 ? {} : _j, defaultMonth = _a.defaultMonth, _k = _a.minDate, minDate = _k === void 0 ? calendarProps.minDate : _k, _l = _a.maxDate, maxDate = _l === void 0 ? calendarProps.maxDate : _l, _m = _a.offDays, offDays = _m === void 0 ? calendarProps.offDays || [] : _m, _o = _a.events, events = _o === void 0 ? calendarProps.events || [] : _o, _p = _a.defaultOpen, defaultOpen = _p === void 0 ? false : _p, _q = _a.view, view = _q === void 0 ? 'desktop' : _q, restProps = tslib.__rest(_a, ["className", "inputClassName", "popoverClassName", "disabled", "readOnly", "disableUserInput", "picker", "defaultValue", "value", "onChange", "onComplete", "onClose", "rightAddons", "useAnchorWidth", "block", "popoverPosition", "zIndexPopover", "preventFlip", "Calendar", "calendarProps", "defaultMonth", "minDate", "maxDate", "offDays", "events", "defaultOpen", "view"]);
35
34
  var inputRef = React.useRef(null);
36
35
  var iconRef = React.useRef(null);
37
36
  var calendarRef = React.useRef(null);
38
- var _q = React.useState(propValue || defaultValue), value = _q[0], setValue = _q[1];
39
- var _r = React.useState(defaultOpen), open = _r[0], setOpen = _r[1];
37
+ var _r = React.useState(propValue || defaultValue), value = _r[0], setValue = _r[1];
38
+ var _s = React.useState(defaultOpen), open = _s[0], setOpen = _s[1];
40
39
  var inputDisabled = disabled || readOnly;
41
40
  var calendarResponsive = (_d = calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.responsive) !== null && _d !== void 0 ? _d : true;
42
- var _s = coreComponentsCalendar.usePeriod({ onPeriodChange: handlePeriodChange }), selectedFrom = _s.selectedFrom, selectedTo = _s.selectedTo, updatePeriod = _s.updatePeriod, resetPeriod = _s.resetPeriod, setStart = _s.setStart, setEnd = _s.setEnd;
41
+ var _t = coreComponentsCalendar.usePeriod({ onPeriodChange: handlePeriodChange }), selectedFrom = _t.selectedFrom, selectedTo = _t.selectedTo, updatePeriod = _t.updatePeriod, resetPeriod = _t.resetPeriod, setStart = _t.setStart, setEnd = _t.setEnd;
43
42
  React.useEffect(function () {
44
43
  if (value) {
45
44
  setCalendarPeriod(getDates(value));
@@ -118,6 +117,12 @@ var DateRangeInput = React__default.default.forwardRef(function (_a, ref) {
118
117
  }
119
118
  }
120
119
  };
120
+ var handleInputKeyDown = function (event) {
121
+ var isCopy = (event.metaKey || event.ctrlKey) && event.key === 'c';
122
+ if (disableUserInput && !isCopy) {
123
+ event.preventDefault();
124
+ }
125
+ };
121
126
  var handleBlur = function (event) {
122
127
  var _a, _b, _c;
123
128
  if (view === 'desktop') {
@@ -218,7 +223,7 @@ var DateRangeInput = React__default.default.forwardRef(function (_a, ref) {
218
223
  return (React__default.default.createElement("div", { className: cn__default.default(styles.component, className, (_b = {},
219
224
  _b[styles.block] = block,
220
225
  _b)), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
221
- React__default.default.createElement(coreComponentsInput.Input, tslib.__assign({}, restProps, { block: block, ref: mergeRefs__default.default([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
226
+ React__default.default.createElement(coreComponentsInput.Input, tslib.__assign({}, restProps, { block: block, ref: mergeRefs__default.default([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, onKeyDown: handleInputKeyDown, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
222
227
  rightAddons,
223
228
  picker && (React__default.default.createElement(coreComponentsIconButton.IconButton, { className: styles.calendarIcon, ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 's' }))) })),
224
229
  picker && (React__default.default.createElement(coreComponentsPopover.Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn__default.default(styles.calendarContainer, (_c = {},
@@ -1,4 +1,4 @@
1
- /* hash: 1tntl */
1
+ /* hash: mh5gy */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-secondary: #e9e9eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -41,24 +41,24 @@
41
41
  /* marker */
42
42
  } :root {
43
43
  --calendar-popover-border-radius: var(--border-radius-m);
44
- } .date-range-input__component_qnl0i {
44
+ } .date-range-input__component_i7dcl {
45
45
  display: inline-block;
46
46
  outline: none;
47
47
  position: relative;
48
- } .date-range-input__calendarContainer_qnl0i {
48
+ } .date-range-input__calendarContainer_i7dcl {
49
49
  display: inline-block;
50
50
  box-sizing: border-box;
51
51
  border-radius: var(--calendar-popover-border-radius);
52
52
  border: 1px solid var(--color-light-border-secondary)
53
- } @media (max-width: 374px) { .date-range-input__calendarContainer_qnl0i {
53
+ } @media (max-width: 374px) { .date-range-input__calendarContainer_i7dcl {
54
54
  width: 100%;
55
55
  min-width: 288px
56
56
  }
57
- } .date-range-input__calendarResponsive_qnl0i {
57
+ } .date-range-input__calendarResponsive_i7dcl {
58
58
  width: var(--calendar-width);
59
- } .date-range-input__block_qnl0i {
59
+ } .date-range-input__block_i7dcl {
60
60
  width: 100%;
61
- } .date-range-input__calendarIcon_qnl0i {
61
+ } .date-range-input__calendarIcon_i7dcl {
62
62
  margin-right: var(--gap-s-neg);
63
63
  height: 100%;
64
64
  }
@@ -103,6 +103,10 @@ type DateRangeInputProps = Omit<InputProps, 'onChange'> & ConditionalProps & {
103
103
  * Отображение компонента в мобильном или десктопном виде
104
104
  */
105
105
  view?: 'desktop' | 'mobile';
106
+ /**
107
+ * Запретить ввод с клавиатуры
108
+ */
109
+ disableUserInput?: boolean;
106
110
  };
107
111
  declare const DateRangeInput: React.ForwardRefExoticComponent<DateRangeInputProps & React.RefAttributes<HTMLInputElement>>;
108
112
  export { ConditionalProps, DateRangeInputProps, DateRangeInput };
@@ -26,19 +26,18 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
26
26
  var dateFnsIsValid__default = /*#__PURE__*/_interopDefaultCompat(dateFnsIsValid);
27
27
  var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
28
28
 
29
- /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
30
29
  var DateRangeInput = React__default.default.forwardRef(function (_a, ref) {
31
30
  var _b, _c;
32
31
  var _d;
33
- var className = _a.className, inputClassName = _a.inputClassName, popoverClassName = _a.popoverClassName, disabled = _a.disabled, readOnly = _a.readOnly, picker = _a.picker, _e = _a.defaultValue, defaultValue = _e === void 0 ? '' : _e, propValue = _a.value, onChange = _a.onChange, onComplete = _a.onComplete, onClose = _a.onClose, rightAddons = _a.rightAddons, useAnchorWidth = _a.useAnchorWidth, block = _a.block, _f = _a.popoverPosition, popoverPosition = _f === void 0 ? 'bottom-start' : _f, zIndexPopover = _a.zIndexPopover, preventFlip = _a.preventFlip, _g = _a.Calendar, Calendar = _g === void 0 ? coreComponentsCalendar.Calendar : _g, _h = _a.calendarProps, calendarProps = _h === void 0 ? {} : _h, defaultMonth = _a.defaultMonth, _j = _a.minDate, minDate = _j === void 0 ? calendarProps.minDate : _j, _k = _a.maxDate, maxDate = _k === void 0 ? calendarProps.maxDate : _k, _l = _a.offDays, offDays = _l === void 0 ? calendarProps.offDays || [] : _l, _m = _a.events, events = _m === void 0 ? calendarProps.events || [] : _m, _o = _a.defaultOpen, defaultOpen = _o === void 0 ? false : _o, _p = _a.view, view = _p === void 0 ? 'desktop' : _p, restProps = tslib.__rest(_a, ["className", "inputClassName", "popoverClassName", "disabled", "readOnly", "picker", "defaultValue", "value", "onChange", "onComplete", "onClose", "rightAddons", "useAnchorWidth", "block", "popoverPosition", "zIndexPopover", "preventFlip", "Calendar", "calendarProps", "defaultMonth", "minDate", "maxDate", "offDays", "events", "defaultOpen", "view"]);
32
+ var className = _a.className, inputClassName = _a.inputClassName, popoverClassName = _a.popoverClassName, disabled = _a.disabled, readOnly = _a.readOnly, _e = _a.disableUserInput, disableUserInput = _e === void 0 ? false : _e, picker = _a.picker, _f = _a.defaultValue, defaultValue = _f === void 0 ? '' : _f, propValue = _a.value, onChange = _a.onChange, onComplete = _a.onComplete, onClose = _a.onClose, rightAddons = _a.rightAddons, useAnchorWidth = _a.useAnchorWidth, block = _a.block, _g = _a.popoverPosition, popoverPosition = _g === void 0 ? 'bottom-start' : _g, zIndexPopover = _a.zIndexPopover, preventFlip = _a.preventFlip, _h = _a.Calendar, Calendar = _h === void 0 ? coreComponentsCalendar.Calendar : _h, _j = _a.calendarProps, calendarProps = _j === void 0 ? {} : _j, defaultMonth = _a.defaultMonth, _k = _a.minDate, minDate = _k === void 0 ? calendarProps.minDate : _k, _l = _a.maxDate, maxDate = _l === void 0 ? calendarProps.maxDate : _l, _m = _a.offDays, offDays = _m === void 0 ? calendarProps.offDays || [] : _m, _o = _a.events, events = _o === void 0 ? calendarProps.events || [] : _o, _p = _a.defaultOpen, defaultOpen = _p === void 0 ? false : _p, _q = _a.view, view = _q === void 0 ? 'desktop' : _q, restProps = tslib.__rest(_a, ["className", "inputClassName", "popoverClassName", "disabled", "readOnly", "disableUserInput", "picker", "defaultValue", "value", "onChange", "onComplete", "onClose", "rightAddons", "useAnchorWidth", "block", "popoverPosition", "zIndexPopover", "preventFlip", "Calendar", "calendarProps", "defaultMonth", "minDate", "maxDate", "offDays", "events", "defaultOpen", "view"]);
34
33
  var inputRef = React.useRef(null);
35
34
  var iconRef = React.useRef(null);
36
35
  var calendarRef = React.useRef(null);
37
- var _q = React.useState(propValue || defaultValue), value = _q[0], setValue = _q[1];
38
- var _r = React.useState(defaultOpen), open = _r[0], setOpen = _r[1];
36
+ var _r = React.useState(propValue || defaultValue), value = _r[0], setValue = _r[1];
37
+ var _s = React.useState(defaultOpen), open = _s[0], setOpen = _s[1];
39
38
  var inputDisabled = disabled || readOnly;
40
39
  var calendarResponsive = (_d = calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.responsive) !== null && _d !== void 0 ? _d : true;
41
- var _s = coreComponentsCalendar.usePeriod({ onPeriodChange: handlePeriodChange }), selectedFrom = _s.selectedFrom, selectedTo = _s.selectedTo, updatePeriod = _s.updatePeriod, resetPeriod = _s.resetPeriod, setStart = _s.setStart, setEnd = _s.setEnd;
40
+ var _t = coreComponentsCalendar.usePeriod({ onPeriodChange: handlePeriodChange }), selectedFrom = _t.selectedFrom, selectedTo = _t.selectedTo, updatePeriod = _t.updatePeriod, resetPeriod = _t.resetPeriod, setStart = _t.setStart, setEnd = _t.setEnd;
42
41
  React.useEffect(function () {
43
42
  if (value) {
44
43
  setCalendarPeriod(getDates(value));
@@ -117,6 +116,12 @@ var DateRangeInput = React__default.default.forwardRef(function (_a, ref) {
117
116
  }
118
117
  }
119
118
  };
119
+ var handleInputKeyDown = function (event) {
120
+ var isCopy = (event.metaKey || event.ctrlKey) && event.key === 'c';
121
+ if (disableUserInput && !isCopy) {
122
+ event.preventDefault();
123
+ }
124
+ };
120
125
  var handleBlur = function (event) {
121
126
  var _a, _b, _c;
122
127
  if (view === 'desktop') {
@@ -217,7 +222,7 @@ var DateRangeInput = React__default.default.forwardRef(function (_a, ref) {
217
222
  return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className, (_b = {},
218
223
  _b[styles__default.default.block] = block,
219
224
  _b)), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
220
- React__default.default.createElement(coreComponentsInput.Input, tslib.__assign({}, restProps, { block: block, ref: mergeRefs__default.default([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
225
+ React__default.default.createElement(coreComponentsInput.Input, tslib.__assign({}, restProps, { block: block, ref: mergeRefs__default.default([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, onKeyDown: handleInputKeyDown, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
221
226
  rightAddons,
222
227
  picker && (React__default.default.createElement(coreComponentsIconButton.IconButton, { className: styles__default.default.calendarIcon, ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 's' }))) })),
223
228
  picker && (React__default.default.createElement(coreComponentsPopover.Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn__default.default(styles__default.default.calendarContainer, (_c = {},
@@ -103,6 +103,10 @@ type DateRangeInputProps = Omit<InputProps, 'onChange'> & ConditionalProps & {
103
103
  * Отображение компонента в мобильном или десктопном виде
104
104
  */
105
105
  view?: 'desktop' | 'mobile';
106
+ /**
107
+ * Запретить ввод с клавиатуры
108
+ */
109
+ disableUserInput?: boolean;
106
110
  };
107
111
  declare const DateRangeInput: React.ForwardRefExoticComponent<DateRangeInputProps & React.RefAttributes<HTMLInputElement>>;
108
112
  export { ConditionalProps, DateRangeInputProps, DateRangeInput };
@@ -13,22 +13,21 @@ import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
13
13
  import { parseTimestampToDate, DATE_FORMAT, format, parseDateString, DATE_MASK, isCompleteDateInput, isValid } from '../../utils/format.js';
14
14
  import 'date-fns/parse';
15
15
 
16
- var styles = {"component":"date-range-input__component_qnl0i","calendarContainer":"date-range-input__calendarContainer_qnl0i","calendarResponsive":"date-range-input__calendarResponsive_qnl0i","block":"date-range-input__block_qnl0i","calendarIcon":"date-range-input__calendarIcon_qnl0i"};
16
+ var styles = {"component":"date-range-input__component_i7dcl","calendarContainer":"date-range-input__calendarContainer_i7dcl","calendarResponsive":"date-range-input__calendarResponsive_i7dcl","block":"date-range-input__block_i7dcl","calendarIcon":"date-range-input__calendarIcon_i7dcl"};
17
17
  require('./index.css')
18
18
 
19
- /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
20
19
  var DateRangeInput = React.forwardRef(function (_a, ref) {
21
20
  var _b, _c;
22
21
  var _d;
23
- var className = _a.className, inputClassName = _a.inputClassName, popoverClassName = _a.popoverClassName, disabled = _a.disabled, readOnly = _a.readOnly, picker = _a.picker, _e = _a.defaultValue, defaultValue = _e === void 0 ? '' : _e, propValue = _a.value, onChange = _a.onChange, onComplete = _a.onComplete, onClose = _a.onClose, rightAddons = _a.rightAddons, useAnchorWidth = _a.useAnchorWidth, block = _a.block, _f = _a.popoverPosition, popoverPosition = _f === void 0 ? 'bottom-start' : _f, zIndexPopover = _a.zIndexPopover, preventFlip = _a.preventFlip, _g = _a.Calendar, Calendar$1 = _g === void 0 ? Calendar : _g, _h = _a.calendarProps, calendarProps = _h === void 0 ? {} : _h, defaultMonth = _a.defaultMonth, _j = _a.minDate, minDate = _j === void 0 ? calendarProps.minDate : _j, _k = _a.maxDate, maxDate = _k === void 0 ? calendarProps.maxDate : _k, _l = _a.offDays, offDays = _l === void 0 ? calendarProps.offDays || [] : _l, _m = _a.events, events = _m === void 0 ? calendarProps.events || [] : _m, _o = _a.defaultOpen, defaultOpen = _o === void 0 ? false : _o, _p = _a.view, view = _p === void 0 ? 'desktop' : _p, restProps = __rest(_a, ["className", "inputClassName", "popoverClassName", "disabled", "readOnly", "picker", "defaultValue", "value", "onChange", "onComplete", "onClose", "rightAddons", "useAnchorWidth", "block", "popoverPosition", "zIndexPopover", "preventFlip", "Calendar", "calendarProps", "defaultMonth", "minDate", "maxDate", "offDays", "events", "defaultOpen", "view"]);
22
+ var className = _a.className, inputClassName = _a.inputClassName, popoverClassName = _a.popoverClassName, disabled = _a.disabled, readOnly = _a.readOnly, _e = _a.disableUserInput, disableUserInput = _e === void 0 ? false : _e, picker = _a.picker, _f = _a.defaultValue, defaultValue = _f === void 0 ? '' : _f, propValue = _a.value, onChange = _a.onChange, onComplete = _a.onComplete, onClose = _a.onClose, rightAddons = _a.rightAddons, useAnchorWidth = _a.useAnchorWidth, block = _a.block, _g = _a.popoverPosition, popoverPosition = _g === void 0 ? 'bottom-start' : _g, zIndexPopover = _a.zIndexPopover, preventFlip = _a.preventFlip, _h = _a.Calendar, Calendar$1 = _h === void 0 ? Calendar : _h, _j = _a.calendarProps, calendarProps = _j === void 0 ? {} : _j, defaultMonth = _a.defaultMonth, _k = _a.minDate, minDate = _k === void 0 ? calendarProps.minDate : _k, _l = _a.maxDate, maxDate = _l === void 0 ? calendarProps.maxDate : _l, _m = _a.offDays, offDays = _m === void 0 ? calendarProps.offDays || [] : _m, _o = _a.events, events = _o === void 0 ? calendarProps.events || [] : _o, _p = _a.defaultOpen, defaultOpen = _p === void 0 ? false : _p, _q = _a.view, view = _q === void 0 ? 'desktop' : _q, restProps = __rest(_a, ["className", "inputClassName", "popoverClassName", "disabled", "readOnly", "disableUserInput", "picker", "defaultValue", "value", "onChange", "onComplete", "onClose", "rightAddons", "useAnchorWidth", "block", "popoverPosition", "zIndexPopover", "preventFlip", "Calendar", "calendarProps", "defaultMonth", "minDate", "maxDate", "offDays", "events", "defaultOpen", "view"]);
24
23
  var inputRef = useRef(null);
25
24
  var iconRef = useRef(null);
26
25
  var calendarRef = useRef(null);
27
- var _q = useState(propValue || defaultValue), value = _q[0], setValue = _q[1];
28
- var _r = useState(defaultOpen), open = _r[0], setOpen = _r[1];
26
+ var _r = useState(propValue || defaultValue), value = _r[0], setValue = _r[1];
27
+ var _s = useState(defaultOpen), open = _s[0], setOpen = _s[1];
29
28
  var inputDisabled = disabled || readOnly;
30
29
  var calendarResponsive = (_d = calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.responsive) !== null && _d !== void 0 ? _d : true;
31
- var _s = usePeriod({ onPeriodChange: handlePeriodChange }), selectedFrom = _s.selectedFrom, selectedTo = _s.selectedTo, updatePeriod = _s.updatePeriod, resetPeriod = _s.resetPeriod, setStart = _s.setStart, setEnd = _s.setEnd;
30
+ var _t = usePeriod({ onPeriodChange: handlePeriodChange }), selectedFrom = _t.selectedFrom, selectedTo = _t.selectedTo, updatePeriod = _t.updatePeriod, resetPeriod = _t.resetPeriod, setStart = _t.setStart, setEnd = _t.setEnd;
32
31
  useEffect(function () {
33
32
  if (value) {
34
33
  setCalendarPeriod(getDates(value));
@@ -107,6 +106,12 @@ var DateRangeInput = React.forwardRef(function (_a, ref) {
107
106
  }
108
107
  }
109
108
  };
109
+ var handleInputKeyDown = function (event) {
110
+ var isCopy = (event.metaKey || event.ctrlKey) && event.key === 'c';
111
+ if (disableUserInput && !isCopy) {
112
+ event.preventDefault();
113
+ }
114
+ };
110
115
  var handleBlur = function (event) {
111
116
  var _a, _b, _c;
112
117
  if (view === 'desktop') {
@@ -207,7 +212,7 @@ var DateRangeInput = React.forwardRef(function (_a, ref) {
207
212
  return (React.createElement("div", { className: cn(styles.component, className, (_b = {},
208
213
  _b[styles.block] = block,
209
214
  _b)), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
210
- React.createElement(Input, __assign({}, restProps, { block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, rightAddons: React.createElement(React.Fragment, null,
215
+ React.createElement(Input, __assign({}, restProps, { block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, onKeyDown: handleInputKeyDown, rightAddons: React.createElement(React.Fragment, null,
211
216
  rightAddons,
212
217
  picker && (React.createElement(IconButton, { className: styles.calendarIcon, ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 's' }))) })),
213
218
  picker && (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn(styles.calendarContainer, (_c = {},
@@ -1,4 +1,4 @@
1
- /* hash: 1tntl */
1
+ /* hash: mh5gy */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-secondary: #e9e9eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -41,24 +41,24 @@
41
41
  /* marker */
42
42
  } :root {
43
43
  --calendar-popover-border-radius: var(--border-radius-m);
44
- } .date-range-input__component_qnl0i {
44
+ } .date-range-input__component_i7dcl {
45
45
  display: inline-block;
46
46
  outline: none;
47
47
  position: relative;
48
- } .date-range-input__calendarContainer_qnl0i {
48
+ } .date-range-input__calendarContainer_i7dcl {
49
49
  display: inline-block;
50
50
  box-sizing: border-box;
51
51
  border-radius: var(--calendar-popover-border-radius);
52
52
  border: 1px solid var(--color-light-border-secondary)
53
- } @media (max-width: 374px) { .date-range-input__calendarContainer_qnl0i {
53
+ } @media (max-width: 374px) { .date-range-input__calendarContainer_i7dcl {
54
54
  width: 100%;
55
55
  min-width: 288px
56
56
  }
57
- } .date-range-input__calendarResponsive_qnl0i {
57
+ } .date-range-input__calendarResponsive_i7dcl {
58
58
  width: var(--calendar-width);
59
- } .date-range-input__block_qnl0i {
59
+ } .date-range-input__block_i7dcl {
60
60
  width: 100%;
61
- } .date-range-input__calendarIcon_qnl0i {
61
+ } .date-range-input__calendarIcon_i7dcl {
62
62
  margin-right: var(--gap-s-neg);
63
63
  height: 100%;
64
64
  }
@@ -103,6 +103,10 @@ type DateRangeInputProps = Omit<InputProps, 'onChange'> & ConditionalProps & {
103
103
  * Отображение компонента в мобильном или десктопном виде
104
104
  */
105
105
  view?: 'desktop' | 'mobile';
106
+ /**
107
+ * Запретить ввод с клавиатуры
108
+ */
109
+ disableUserInput?: boolean;
106
110
  };
107
111
  declare const DateRangeInput: React.ForwardRefExoticComponent<DateRangeInputProps & React.RefAttributes<HTMLInputElement>>;
108
112
  export { ConditionalProps, DateRangeInputProps, DateRangeInput };
@@ -12,11 +12,11 @@ import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
12
12
  import { parseTimestampToDate, DATE_FORMAT, format, parseDateString, DATE_MASK, isCompleteDateInput, isValid } from '../../utils/format.js';
13
13
  import 'date-fns/parse';
14
14
 
15
- const styles = {"component":"date-range-input__component_qnl0i","calendarContainer":"date-range-input__calendarContainer_qnl0i","calendarResponsive":"date-range-input__calendarResponsive_qnl0i","block":"date-range-input__block_qnl0i","calendarIcon":"date-range-input__calendarIcon_qnl0i"};
15
+ const styles = {"component":"date-range-input__component_i7dcl","calendarContainer":"date-range-input__calendarContainer_i7dcl","calendarResponsive":"date-range-input__calendarResponsive_i7dcl","block":"date-range-input__block_i7dcl","calendarIcon":"date-range-input__calendarIcon_i7dcl"};
16
16
  require('./index.css')
17
17
 
18
18
  /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
19
- const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverClassName, disabled, readOnly, picker, defaultValue = '', value: propValue, onChange, onComplete, onClose, rightAddons, useAnchorWidth, block, popoverPosition = 'bottom-start', zIndexPopover, preventFlip, Calendar: Calendar$1 = Calendar, calendarProps = {}, defaultMonth, minDate = calendarProps.minDate, maxDate = calendarProps.maxDate, offDays = calendarProps.offDays || [], events = calendarProps.events || [], defaultOpen = false, view = 'desktop', ...restProps }, ref) => {
19
+ const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverClassName, disabled, readOnly, disableUserInput = false, picker, defaultValue = '', value: propValue, onChange, onComplete, onClose, rightAddons, useAnchorWidth, block, popoverPosition = 'bottom-start', zIndexPopover, preventFlip, Calendar: Calendar$1 = Calendar, calendarProps = {}, defaultMonth, minDate = calendarProps.minDate, maxDate = calendarProps.maxDate, offDays = calendarProps.offDays || [], events = calendarProps.events || [], defaultOpen = false, view = 'desktop', ...restProps }, ref) => {
20
20
  const inputRef = useRef(null);
21
21
  const iconRef = useRef(null);
22
22
  const calendarRef = useRef(null);
@@ -102,6 +102,12 @@ const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverCla
102
102
  }
103
103
  }
104
104
  };
105
+ const handleInputKeyDown = (event) => {
106
+ const isCopy = (event.metaKey || event.ctrlKey) && event.key === 'c';
107
+ if (disableUserInput && !isCopy) {
108
+ event.preventDefault();
109
+ }
110
+ };
105
111
  const handleBlur = (event) => {
106
112
  if (view === 'desktop') {
107
113
  const target = (event.relatedTarget || document.activeElement);
@@ -200,7 +206,7 @@ const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverCla
200
206
  return (React.createElement("div", { className: cn(styles.component, className, {
201
207
  [styles.block]: block,
202
208
  }), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
203
- React.createElement(Input, { ...restProps, block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, rightAddons: React.createElement(React.Fragment, null,
209
+ React.createElement(Input, { ...restProps, block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, onKeyDown: handleInputKeyDown, rightAddons: React.createElement(React.Fragment, null,
204
210
  rightAddons,
205
211
  picker && (React.createElement(IconButton, { className: styles.calendarIcon, ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 's' }))) }),
206
212
  picker && (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn(styles.calendarContainer, {
@@ -1,4 +1,4 @@
1
- /* hash: 1tntl */
1
+ /* hash: mh5gy */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-secondary: #e9e9eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -41,24 +41,24 @@
41
41
  /* marker */
42
42
  } :root {
43
43
  --calendar-popover-border-radius: var(--border-radius-m);
44
- } .date-range-input__component_qnl0i {
44
+ } .date-range-input__component_i7dcl {
45
45
  display: inline-block;
46
46
  outline: none;
47
47
  position: relative;
48
- } .date-range-input__calendarContainer_qnl0i {
48
+ } .date-range-input__calendarContainer_i7dcl {
49
49
  display: inline-block;
50
50
  box-sizing: border-box;
51
51
  border-radius: var(--calendar-popover-border-radius);
52
52
  border: 1px solid var(--color-light-border-secondary)
53
- } @media (max-width: 374px) { .date-range-input__calendarContainer_qnl0i {
53
+ } @media (max-width: 374px) { .date-range-input__calendarContainer_i7dcl {
54
54
  width: 100%;
55
55
  min-width: 288px
56
56
  }
57
- } .date-range-input__calendarResponsive_qnl0i {
57
+ } .date-range-input__calendarResponsive_i7dcl {
58
58
  width: var(--calendar-width);
59
- } .date-range-input__block_qnl0i {
59
+ } .date-range-input__block_i7dcl {
60
60
  width: 100%;
61
- } .date-range-input__calendarIcon_qnl0i {
61
+ } .date-range-input__calendarIcon_i7dcl {
62
62
  margin-right: var(--gap-s-neg);
63
63
  height: 100%;
64
64
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-date-range-input",
3
- "version": "2.3.13",
3
+ "version": "2.4.0",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -15,10 +15,10 @@
15
15
  "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
16
16
  },
17
17
  "dependencies": {
18
- "@alfalab/core-components-input": "^11.1.17",
19
- "@alfalab/core-components-icon-button": "^6.1.2",
20
- "@alfalab/core-components-calendar": "^6.6.0",
21
- "@alfalab/core-components-popover": "^6.0.8",
18
+ "@alfalab/core-components-input": "^11.1.18",
19
+ "@alfalab/core-components-icon-button": "^6.1.3",
20
+ "@alfalab/core-components-calendar": "^6.6.1",
21
+ "@alfalab/core-components-popover": "^6.0.9",
22
22
  "@alfalab/hooks": "^1.13.0",
23
23
  "classnames": "^2.3.1",
24
24
  "tslib": "^2.4.0"
package/send-stats.js DELETED
@@ -1,82 +0,0 @@
1
- const http = require('http');
2
- const fs = require('fs');
3
- const { promisify } = require('util');
4
- const path = require('path');
5
-
6
- const readFile = promisify(fs.readFile);
7
-
8
- async function main() {
9
- const remoteHost = process.env.NIS_HOST || 'digital';
10
- const remotePort = process.env.NIS_PORT || 80;
11
- const remotePath = process.env.NIS_PATH || '/npm-install-stats/api/install-stats';
12
-
13
- try {
14
- const [_, node, os, arch] =
15
- /node\/v(\d+\.\d+\.\d+) (\w+) (\w+)/.exec(process.env.npm_config_user_agent) || [];
16
- const [__, npm] = /npm\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
17
- const [___, yarn] = /yarn\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
18
-
19
- let ownPackageJson, packageJson;
20
-
21
- try {
22
- const result = await Promise.all([
23
- readFile(path.join(process.cwd(), 'package.json'), 'utf-8'),
24
- readFile(path.join(process.cwd(), '../../../package.json'), 'utf-8'),
25
- ]);
26
-
27
- ownPackageJson = JSON.parse(result[0]);
28
- packageJson = JSON.parse(result[1]);
29
- } catch (err) {
30
- ownPackageJson = '';
31
- packageJson = '';
32
- }
33
-
34
- const data = {
35
- node,
36
- npm,
37
- yarn,
38
- os,
39
- arch,
40
- ownPackageJson: JSON.stringify(ownPackageJson),
41
- packageJson: JSON.stringify(packageJson),
42
- };
43
-
44
- const body = JSON.stringify(data);
45
-
46
- const options = {
47
- host: remoteHost,
48
- port: remotePort,
49
- path: remotePath,
50
- method: 'POST',
51
- headers: {
52
- 'Content-Type': 'application/json',
53
- 'Content-Length': body.length,
54
- },
55
- };
56
-
57
- return new Promise((resolve, reject) => {
58
- const req = http.request(options, (res) => {
59
- res.on('end', () => {
60
- resolve();
61
- });
62
- });
63
-
64
- req.on('error', () => {
65
- reject();
66
- });
67
-
68
- req.write(body);
69
- req.end();
70
- });
71
- } catch (error) {
72
- throw error;
73
- }
74
- }
75
-
76
- main()
77
- .then(() => {
78
- process.exit(0);
79
- })
80
- .catch(() => {
81
- process.exit(0);
82
- });