@vkontakte/vkui 6.7.0 → 6.7.1

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.
Files changed (99) hide show
  1. package/dist/cjs/components/BaseGallery/CarouselBase/CarouselBase.d.ts.map +1 -1
  2. package/dist/cjs/components/BaseGallery/CarouselBase/CarouselBase.js +9 -0
  3. package/dist/cjs/components/BaseGallery/CarouselBase/CarouselBase.js.map +1 -1
  4. package/dist/cjs/components/CustomSelect/CustomSelect.d.ts +12 -2
  5. package/dist/cjs/components/CustomSelect/CustomSelect.d.ts.map +1 -1
  6. package/dist/cjs/components/CustomSelect/CustomSelect.js +72 -52
  7. package/dist/cjs/components/CustomSelect/CustomSelect.js.map +1 -1
  8. package/dist/cjs/components/CustomSelect/CustomSelectInput.d.ts +1 -3
  9. package/dist/cjs/components/CustomSelect/CustomSelectInput.d.ts.map +1 -1
  10. package/dist/cjs/components/CustomSelect/CustomSelectInput.js +24 -19
  11. package/dist/cjs/components/CustomSelect/CustomSelectInput.js.map +1 -1
  12. package/dist/cjs/components/Select/Select.js +2 -1
  13. package/dist/cjs/components/Select/Select.js.map +1 -1
  14. package/dist/cjs/components/Spacing/Spacing.js +1 -1
  15. package/dist/cjs/components/Spacing/Spacing.js.map +1 -1
  16. package/dist/cjs/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.d.ts.map +1 -1
  17. package/dist/cjs/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js +3 -0
  18. package/dist/cjs/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
  19. package/dist/components/BaseGallery/CarouselBase/CarouselBase.d.ts.map +1 -1
  20. package/dist/components/BaseGallery/CarouselBase/CarouselBase.js +10 -1
  21. package/dist/components/BaseGallery/CarouselBase/CarouselBase.js.map +1 -1
  22. package/dist/components/CustomSelect/CustomSelect.d.ts +12 -2
  23. package/dist/components/CustomSelect/CustomSelect.d.ts.map +1 -1
  24. package/dist/components/CustomSelect/CustomSelect.js +64 -44
  25. package/dist/components/CustomSelect/CustomSelect.js.map +1 -1
  26. package/dist/components/CustomSelect/CustomSelectInput.d.ts +1 -3
  27. package/dist/components/CustomSelect/CustomSelectInput.d.ts.map +1 -1
  28. package/dist/components/CustomSelect/CustomSelectInput.js +24 -19
  29. package/dist/components/CustomSelect/CustomSelectInput.js.map +1 -1
  30. package/dist/components/Select/Select.js +2 -1
  31. package/dist/components/Select/Select.js.map +1 -1
  32. package/dist/components/Spacing/Spacing.js +1 -1
  33. package/dist/components/Spacing/Spacing.js.map +1 -1
  34. package/dist/components.css +3 -3
  35. package/dist/components.css.map +1 -1
  36. package/dist/components.js.tmp +117 -159
  37. package/dist/cssm/components/BaseGallery/CarouselBase/CarouselBase.d.ts.map +1 -1
  38. package/dist/cssm/components/BaseGallery/CarouselBase/CarouselBase.js +10 -1
  39. package/dist/cssm/components/BaseGallery/CarouselBase/CarouselBase.js.map +1 -1
  40. package/dist/cssm/components/CustomSelect/CustomSelect.d.ts +12 -2
  41. package/dist/cssm/components/CustomSelect/CustomSelect.d.ts.map +1 -1
  42. package/dist/cssm/components/CustomSelect/CustomSelect.js +60 -41
  43. package/dist/cssm/components/CustomSelect/CustomSelect.js.map +1 -1
  44. package/dist/cssm/components/CustomSelect/CustomSelectInput.d.ts +1 -3
  45. package/dist/cssm/components/CustomSelect/CustomSelectInput.d.ts.map +1 -1
  46. package/dist/cssm/components/CustomSelect/CustomSelectInput.js +21 -16
  47. package/dist/cssm/components/CustomSelect/CustomSelectInput.js.map +1 -1
  48. package/dist/cssm/components/CustomSelect/CustomSelectInput.module.css +40 -74
  49. package/dist/cssm/components/Select/Select.js +2 -1
  50. package/dist/cssm/components/Select/Select.js.map +1 -1
  51. package/dist/cssm/components/Spacing/Spacing.js +1 -1
  52. package/dist/cssm/components/Spacing/Spacing.js.map +1 -1
  53. package/dist/cssm/components/Spacing/Spacing.module.css +1 -2
  54. package/dist/cssm/components/TabsItem/TabsItem.module.css +1 -1
  55. package/dist/cssm/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.d.ts.map +1 -1
  56. package/dist/cssm/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js +3 -0
  57. package/dist/cssm/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
  58. package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.d.ts.map +1 -1
  59. package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js +3 -0
  60. package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
  61. package/dist/vkui.css +3 -3
  62. package/dist/vkui.css.map +1 -1
  63. package/dist/vkui.js.tmp +117 -159
  64. package/package.json +1 -1
  65. package/src/components/BaseGallery/CarouselBase/CarouselBase.tsx +16 -1
  66. package/src/components/CustomSelect/CustomSelect.tsx +101 -53
  67. package/src/components/CustomSelect/CustomSelectInput.module.css +35 -55
  68. package/src/components/CustomSelect/CustomSelectInput.tsx +35 -24
  69. package/src/components/Select/Select.tsx +2 -2
  70. package/src/components/Spacing/Spacing.module.css +1 -2
  71. package/src/components/Spacing/Spacing.tsx +1 -1
  72. package/src/components/TabsItem/TabsItem.module.css +1 -1
  73. package/src/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.ts +3 -0
  74. package/dist/cjs/components/CustomSelect/helpers.d.ts +0 -8
  75. package/dist/cjs/components/CustomSelect/helpers.d.ts.map +0 -1
  76. package/dist/cjs/components/CustomSelect/helpers.js +0 -76
  77. package/dist/cjs/components/CustomSelect/helpers.js.map +0 -1
  78. package/dist/cjs/components/CustomSelect/types.d.ts +0 -12
  79. package/dist/cjs/components/CustomSelect/types.d.ts.map +0 -1
  80. package/dist/cjs/components/CustomSelect/types.js +0 -6
  81. package/dist/cjs/components/CustomSelect/types.js.map +0 -1
  82. package/dist/components/CustomSelect/helpers.d.ts +0 -8
  83. package/dist/components/CustomSelect/helpers.d.ts.map +0 -1
  84. package/dist/components/CustomSelect/helpers.js +0 -48
  85. package/dist/components/CustomSelect/helpers.js.map +0 -1
  86. package/dist/components/CustomSelect/types.d.ts +0 -12
  87. package/dist/components/CustomSelect/types.d.ts.map +0 -1
  88. package/dist/components/CustomSelect/types.js +0 -3
  89. package/dist/components/CustomSelect/types.js.map +0 -1
  90. package/dist/cssm/components/CustomSelect/helpers.d.ts +0 -8
  91. package/dist/cssm/components/CustomSelect/helpers.d.ts.map +0 -1
  92. package/dist/cssm/components/CustomSelect/helpers.js +0 -44
  93. package/dist/cssm/components/CustomSelect/helpers.js.map +0 -1
  94. package/dist/cssm/components/CustomSelect/types.d.ts +0 -12
  95. package/dist/cssm/components/CustomSelect/types.d.ts.map +0 -1
  96. package/dist/cssm/components/CustomSelect/types.js +0 -3
  97. package/dist/cssm/components/CustomSelect/types.js.map +0 -1
  98. package/src/components/CustomSelect/helpers.tsx +0 -61
  99. package/src/components/CustomSelect/types.ts +0 -15
@@ -13645,6 +13645,9 @@ var whileElementsMounted = function() {
13645
13645
  var handleFocusOnReference = useStableCallback(function() {
13646
13646
  // Повторный вызов события фокуса - следствие клика на reference-элемент
13647
13647
  if (shownLocalState.shown) {
13648
+ if (!closeAfterClick && shownLocalState.reason === 'hover') {
13649
+ return;
13650
+ }
13648
13651
  commitShownLocalState(false, 'focus');
13649
13652
  return;
13650
13653
  }
@@ -15062,7 +15065,7 @@ var sizesClassNames = {
15062
15065
  "style"
15063
15066
  ]);
15064
15067
  return /*#__PURE__*/ React.createElement(RootComponent, Spacing_object_spread_props(Spacing_object_spread({}, restProps), {
15065
- style: Spacing_object_spread({}, typeof size === 'number' && Spacing_define_property({}, CUSTOM_CSS_TOKEN_FOR_USER_GAP, size), style),
15068
+ style: Spacing_object_spread({}, typeof size === 'number' && Spacing_define_property({}, CUSTOM_CSS_TOKEN_FOR_USER_GAP, "".concat(size, "px")), style),
15066
15069
  baseClassName: classNames("vkuiSpacing", typeof size === 'string' && sizesClassNames[size])
15067
15070
  }));
15068
15071
  };
@@ -30102,11 +30105,20 @@ var CarouselBase_CarouselBase = function(_param) {
30102
30105
  align,
30103
30106
  slideWidth
30104
30107
  ]);
30108
+ var calculateMinDeltaXToSlide = function() {
30109
+ return slidesManager.current.slides[slideIndex].width * SLIDE_THRESHOLD;
30110
+ };
30105
30111
  var slideLeft = function(event) {
30112
+ if (slideIndex > 0) {
30113
+ shiftXCurrentRef.current += calculateMinDeltaXToSlide();
30114
+ }
30106
30115
  onChange === null || onChange === void 0 ? void 0 : onChange((slideIndex - 1 + slidesManager.current.slides.length) % slidesManager.current.slides.length);
30107
30116
  onPrevClick === null || onPrevClick === void 0 ? void 0 : onPrevClick(event);
30108
30117
  };
30109
30118
  var slideRight = function(event) {
30119
+ if (slideIndex < slidesManager.current.slides.length - 1) {
30120
+ shiftXCurrentRef.current -= calculateMinDeltaXToSlide();
30121
+ }
30110
30122
  onChange === null || onChange === void 0 ? void 0 : onChange((slideIndex + 1) % slidesManager.current.slides.length);
30111
30123
  onNextClick === null || onNextClick === void 0 ? void 0 : onNextClick(event);
30112
30124
  };
@@ -39252,7 +39264,7 @@ function ChipsSelect_unsupported_iterable_to_array(o, minLen) {
39252
39264
 
39253
39265
 
39254
39266
 
39255
- var ChipsSelect_findIndexAfter = function() {
39267
+ var findIndexAfter = function() {
39256
39268
  var options = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [], startIndex = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : -1;
39257
39269
  if (startIndex >= options.length - 1) {
39258
39270
  return -1;
@@ -39261,7 +39273,7 @@ var ChipsSelect_findIndexAfter = function() {
39261
39273
  return i > startIndex && (!isNotServicePreset(option) || !option.disabled);
39262
39274
  });
39263
39275
  };
39264
- var ChipsSelect_findIndexBefore = function() {
39276
+ var findIndexBefore = function() {
39265
39277
  var options = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [], endIndex = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : options.length;
39266
39278
  var result = -1;
39267
39279
  if (endIndex <= 0) {
@@ -39420,11 +39432,11 @@ var ChipsSelect_findIndexBefore = function() {
39420
39432
  var focusOption = function(nextIndex, type) {
39421
39433
  var index = nextIndex === null ? -1 : nextIndex;
39422
39434
  if (type === FOCUS_ACTION_NEXT) {
39423
- var _$nextIndex = ChipsSelect_findIndexAfter(options, index);
39424
- index = _$nextIndex === -1 ? ChipsSelect_findIndexAfter(options) : _$nextIndex; // Следующий за index или первый валидный до index
39435
+ var _$nextIndex = findIndexAfter(options, index);
39436
+ index = _$nextIndex === -1 ? findIndexAfter(options) : _$nextIndex; // Следующий за index или первый валидный до index
39425
39437
  } else if (type === FOCUS_ACTION_PREV) {
39426
- var beforeIndex = ChipsSelect_findIndexBefore(options, index);
39427
- index = beforeIndex === -1 ? ChipsSelect_findIndexBefore(options) : beforeIndex; // Предшествующий index или последний валидный после index
39438
+ var beforeIndex = findIndexBefore(options, index);
39439
+ index = beforeIndex === -1 ? findIndexBefore(options) : beforeIndex; // Предшествующий index или последний валидный после index
39428
39440
  }
39429
39441
  focusOptionByIndex(index, focusedOptionIndex);
39430
39442
  };
@@ -41705,6 +41717,8 @@ function CustomSelectInput_object_without_properties_loose(source, excluded) {
41705
41717
 
41706
41718
 
41707
41719
 
41720
+
41721
+
41708
41722
  var CustomSelectInput_sizeYClassNames = {
41709
41723
  none: "vkuiCustomSelectInput--sizeY-none",
41710
41724
  compact: "vkuiCustomSelectInput--sizeY-compact"
@@ -41713,7 +41727,7 @@ var CustomSelectInput_sizeYClassNames = {
41713
41727
  * @since 5.10.0
41714
41728
  * @private
41715
41729
  */ var CustomSelectInput_CustomSelectInput = function(_param) {
41716
- var _param_align = _param.align, align = _param_align === void 0 ? 'left' : _param_align, getRef = _param.getRef, className = _param.className, getRootRef = _param.getRootRef, style = _param.style, before = _param.before, after = _param.after, status = _param.status, selectedOptionLabel = _param.selectedOptionLabel, _param_selectType = _param.selectType, selectType = _param_selectType === void 0 ? 'default' : _param_selectType, multiline = _param.multiline, disabled = _param.disabled, fetching = _param.fetching, labelTextTestId = _param.labelTextTestId, searchable = _param.searchable, restInputProps = CustomSelectInput_object_without_properties(_param, [
41730
+ var _param_align = _param.align, align = _param_align === void 0 ? 'left' : _param_align, getRef = _param.getRef, className = _param.className, getRootRef = _param.getRootRef, style = _param.style, before = _param.before, after = _param.after, status = _param.status, children = _param.children, placeholder = _param.placeholder, _param_selectType = _param.selectType, selectType = _param_selectType === void 0 ? 'default' : _param_selectType, multiline = _param.multiline, disabled = _param.disabled, fetching = _param.fetching, labelTextTestId = _param.labelTextTestId, restProps = CustomSelectInput_object_without_properties(_param, [
41717
41731
  "align",
41718
41732
  "getRef",
41719
41733
  "className",
@@ -41722,32 +41736,35 @@ var CustomSelectInput_sizeYClassNames = {
41722
41736
  "before",
41723
41737
  "after",
41724
41738
  "status",
41725
- "selectedOptionLabel",
41739
+ "children",
41740
+ "placeholder",
41726
41741
  "selectType",
41727
41742
  "multiline",
41728
41743
  "disabled",
41729
41744
  "fetching",
41730
- "labelTextTestId",
41731
- "searchable"
41745
+ "labelTextTestId"
41732
41746
  ]);
41733
41747
  var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? 'none' : _useAdaptivity_sizeY;
41748
+ var title = children || placeholder;
41749
+ var showLabelOrPlaceholder = !Boolean(restProps.value);
41734
41750
  var handleRootRef = useExternRef(getRootRef);
41735
- var platform = usePlatform();
41736
- var input = /*#__PURE__*/ React.createElement(SelectTypography, CustomSelectInput_object_spread_props(CustomSelectInput_object_spread({
41737
- selectType: selectType,
41751
+ var focusWithin = useFocusWithin(handleRootRef);
41752
+ var input = /*#__PURE__*/ React.createElement(Text, CustomSelectInput_object_spread_props(CustomSelectInput_object_spread({
41738
41753
  type: "text"
41739
- }, restInputProps), {
41754
+ }, restProps), {
41740
41755
  disabled: disabled && !fetching,
41741
- readOnly: restInputProps.readOnly || !searchable || disabled && fetching,
41756
+ readOnly: restProps.readOnly || disabled && fetching,
41742
41757
  Component: "input",
41743
41758
  normalize: false,
41744
- className: "vkuiCustomSelectInput__input",
41745
- getRootRef: getRef
41759
+ className: classNames("vkuiCustomSelectInput__el", (restProps.readOnly || showLabelOrPlaceholder && !focusWithin) && "vkuiCustomSelectInput__el--cursor-pointer"),
41760
+ getRootRef: getRef,
41761
+ placeholder: children ? '' : placeholder
41746
41762
  }));
41763
+ var platform = usePlatform();
41747
41764
  return /*#__PURE__*/ React.createElement(FormField, {
41748
41765
  Component: "div",
41749
41766
  style: style,
41750
- className: classNames("vkuiCustomSelectInput", align === 'right' && "vkuiCustomSelectInput--align-right", align === 'center' && "vkuiCustomSelectInput--align-center", !selectedOptionLabel && "vkuiCustomSelectInput--empty", multiline && "vkuiCustomSelectInput--multiline", sizeY !== 'regular' && CustomSelectInput_sizeYClassNames[sizeY], before && "vkuiCustomSelectInput--hasBefore", after && "vkuiCustomSelectInput--hasAfter", className),
41767
+ className: classNames("vkuiCustomSelectInput", align === 'right' && "vkuiCustomSelectInput--align-right", align === 'center' && "vkuiCustomSelectInput--align-center", !children && "vkuiCustomSelectInput--empty", multiline && "vkuiCustomSelectInput--multiline", sizeY !== 'regular' && CustomSelectInput_sizeYClassNames[sizeY], before && "vkuiCustomSelectInput--hasBefore", after && "vkuiCustomSelectInput--hasAfter", className),
41751
41768
  getRootRef: handleRootRef,
41752
41769
  before: before,
41753
41770
  after: after,
@@ -41756,97 +41773,17 @@ var CustomSelectInput_sizeYClassNames = {
41756
41773
  status: status
41757
41774
  }, /*#__PURE__*/ React.createElement("div", {
41758
41775
  className: "vkuiCustomSelectInput__input-group"
41759
- }, !searchable && platform === 'ios' ? /*#__PURE__*/ React.createElement(VisuallyHidden, null, input) : input, /*#__PURE__*/ React.createElement("div", {
41760
- className: classNames("vkuiCustomSelectInput__label-wrapper", className),
41776
+ }, /*#__PURE__*/ React.createElement("div", {
41777
+ className: classNames("vkuiCustomSelectInput__container", className),
41761
41778
  tabIndex: -1,
41762
41779
  "aria-hidden": true,
41763
41780
  "data-testid": labelTextTestId
41764
41781
  }, /*#__PURE__*/ React.createElement(SelectTypography, {
41765
41782
  selectType: selectType,
41766
- className: "vkuiCustomSelectInput__label"
41767
- }, selectedOptionLabel || restInputProps.placeholder))));
41783
+ className: "vkuiCustomSelectInput__title"
41784
+ }, showLabelOrPlaceholder && title)), restProps.readOnly && platform === 'ios' ? /*#__PURE__*/ React.createElement(VisuallyHidden, null, input) : input));
41768
41785
  };
41769
41786
 
41770
- ;// CONCATENATED MODULE: ./src/components/CustomSelect/helpers.tsx
41771
- function helpers_object_without_properties(source, excluded) {
41772
- if (source == null) return {};
41773
- var target = helpers_object_without_properties_loose(source, excluded);
41774
- var key, i;
41775
- if (Object.getOwnPropertySymbols) {
41776
- var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
41777
- for(i = 0; i < sourceSymbolKeys.length; i++){
41778
- key = sourceSymbolKeys[i];
41779
- if (excluded.indexOf(key) >= 0) continue;
41780
- if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
41781
- target[key] = source[key];
41782
- }
41783
- }
41784
- return target;
41785
- }
41786
- function helpers_object_without_properties_loose(source, excluded) {
41787
- if (source == null) return {};
41788
- var target = {};
41789
- var sourceKeys = Object.keys(source);
41790
- var key, i;
41791
- for(i = 0; i < sourceKeys.length; i++){
41792
- key = sourceKeys[i];
41793
- if (excluded.indexOf(key) >= 0) continue;
41794
- target[key] = source[key];
41795
- }
41796
- return target;
41797
- }
41798
-
41799
-
41800
-
41801
- var helpers_findIndexAfter = function() {
41802
- var options = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [], startIndex = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : -1;
41803
- if (startIndex >= options.length - 1) {
41804
- return -1;
41805
- }
41806
- return options.findIndex(function(option, i) {
41807
- return i > startIndex && !option.disabled;
41808
- });
41809
- };
41810
- var helpers_findIndexBefore = function() {
41811
- var options = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [], endIndex = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : options.length;
41812
- var result = -1;
41813
- if (endIndex <= 0) {
41814
- return result;
41815
- }
41816
- for(var i = endIndex - 1; i >= 0; i--){
41817
- var option = options[i];
41818
- if (!option.disabled) {
41819
- result = i;
41820
- break;
41821
- }
41822
- }
41823
- return result;
41824
- };
41825
- function helpers_findSelectedIndex() {
41826
- var options = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [], value = arguments.length > 1 ? arguments[1] : void 0, withClear = arguments.length > 2 ? arguments[2] : void 0;
41827
- if (withClear && value === '') {
41828
- return -1;
41829
- }
41830
- var _options_findIndex;
41831
- return (_options_findIndex = options.findIndex(function(item) {
41832
- value = typeof item.value === 'number' ? Number(value) : value;
41833
- return item.value === value;
41834
- })) !== null && _options_findIndex !== void 0 ? _options_findIndex : -1;
41835
- }
41836
- function helpers_calculateInputValueFromOptions() {
41837
- var options = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [], selectValue = arguments.length > 1 ? arguments[1] : void 0;
41838
- var selectedOption = options.find(function(option) {
41839
- return option.value === selectValue;
41840
- });
41841
- return selectedOption ? getTextFromChildren(selectedOption.label) : '';
41842
- }
41843
- function helpers_defaultRenderOptionFn(_param) {
41844
- var option = _param.option, props = helpers_object_without_properties(_param, [
41845
- "option"
41846
- ]);
41847
- return /*#__PURE__*/ React.createElement(CustomSelectOption, props);
41848
- }
41849
-
41850
41787
  ;// CONCATENATED MODULE: ./src/components/CustomSelect/CustomSelect.module.css
41851
41788
  // extracted by mini-css-extract-plugin
41852
41789
 
@@ -41995,10 +41932,36 @@ function CustomSelect_unsupported_iterable_to_array(o, minLen) {
41995
41932
 
41996
41933
 
41997
41934
 
41935
+
41936
+
41998
41937
  var CustomSelect_sizeYClassNames = {
41999
41938
  none: "vkuiCustomSelect--sizeY-none",
42000
41939
  compact: "vkuiCustomSelect--sizeY-compact"
42001
41940
  };
41941
+ var CustomSelect_findIndexAfter = function() {
41942
+ var options = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [], startIndex = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : -1;
41943
+ if (startIndex >= options.length - 1) {
41944
+ return -1;
41945
+ }
41946
+ return options.findIndex(function(option, i) {
41947
+ return i > startIndex && !option.disabled;
41948
+ });
41949
+ };
41950
+ var CustomSelect_findIndexBefore = function() {
41951
+ var options = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [], endIndex = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : options.length;
41952
+ var result = -1;
41953
+ if (endIndex <= 0) {
41954
+ return result;
41955
+ }
41956
+ for(var i = endIndex - 1; i >= 0; i--){
41957
+ var option = options[i];
41958
+ if (!option.disabled) {
41959
+ result = i;
41960
+ break;
41961
+ }
41962
+ }
41963
+ return result;
41964
+ };
42002
41965
  var CustomSelect_warn = warnOnce('CustomSelect');
42003
41966
  var checkOptionsValueType = function(options) {
42004
41967
  if (new Set(options.map(function(item) {
@@ -42007,9 +41970,26 @@ var checkOptionsValueType = function(options) {
42007
41970
  CustomSelect_warn('Некоторые значения ваших опций имеют разные типы. onChange всегда возвращает строковый тип.', 'error');
42008
41971
  }
42009
41972
  };
41973
+ function defaultRenderOptionFn(_param) {
41974
+ var option = _param.option, props = CustomSelect_object_without_properties(_param, [
41975
+ "option"
41976
+ ]);
41977
+ return /*#__PURE__*/ React.createElement(CustomSelectOption, props);
41978
+ }
42010
41979
  var handleOptionDown = function(e) {
42011
41980
  e.preventDefault();
42012
41981
  };
41982
+ function findSelectedIndex() {
41983
+ var options = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [], value = arguments.length > 1 ? arguments[1] : void 0, withClear = arguments.length > 2 ? arguments[2] : void 0;
41984
+ if (withClear && value === '') {
41985
+ return -1;
41986
+ }
41987
+ var _options_findIndex;
41988
+ return (_options_findIndex = options.findIndex(function(item) {
41989
+ value = typeof item.value === 'number' ? Number(value) : value;
41990
+ return item.value === value;
41991
+ })) !== null && _options_findIndex !== void 0 ? _options_findIndex : -1;
41992
+ }
42013
41993
  var filter = function(options, inputValue, filterFn) {
42014
41994
  return typeof filterFn === 'function' ? options.filter(function(option) {
42015
41995
  return filterFn(inputValue, option);
@@ -42064,16 +42044,13 @@ var filter = function(options, inputValue, filterFn) {
42064
42044
  var scrollBoxRef = React.useRef(null);
42065
42045
  var selectElRef = useExternRef(getRef);
42066
42046
  var optionsWrapperRef = React.useRef(null);
42067
- var selectInputRef = useExternRef(getSelectInputRef);
42068
42047
  var _React_useState1 = CustomSelect_sliced_to_array(React.useState(-1), 2), focusedOptionIndex = _React_useState1[0], setFocusedOptionIndex = _React_useState1[1];
42069
42048
  var _React_useState2 = CustomSelect_sliced_to_array(React.useState(props.value !== undefined), 2), isControlledOutside = _React_useState2[0], setIsControlledOutside = _React_useState2[1];
42070
- var _React_useState3 = CustomSelect_sliced_to_array(React.useState(function() {
42049
+ var _React_useState3 = CustomSelect_sliced_to_array(React.useState(''), 2), inputValue = _React_useState3[0], setInputValue = _React_useState3[1];
42050
+ var _React_useState4 = CustomSelect_sliced_to_array(React.useState(function() {
42071
42051
  var _props_value, _ref;
42072
42052
  return (_ref = (_props_value = props.value) !== null && _props_value !== void 0 ? _props_value : defaultValue) !== null && _ref !== void 0 ? _ref : allowClearButton ? '' : undefined;
42073
- }), 2), nativeSelectValue = _React_useState3[0], setNativeSelectValue = _React_useState3[1];
42074
- var _React_useState4 = CustomSelect_sliced_to_array(React.useState(function() {
42075
- return calculateInputValueFromOptions(optionsProp, nativeSelectValue);
42076
- }), 2), inputValue = _React_useState4[0], setInputValue = _React_useState4[1];
42053
+ }), 2), nativeSelectValue = _React_useState4[0], setNativeSelectValue = _React_useState4[1];
42077
42054
  var _React_useState5 = CustomSelect_sliced_to_array(React.useState(popupDirection), 2), popperPlacement = _React_useState5[0], setPopperPlacement = _React_useState5[1];
42078
42055
  var _React_useState6 = CustomSelect_sliced_to_array(React.useState(optionsProp), 2), options = _React_useState6[0], setOptions = _React_useState6[1];
42079
42056
  var _props_value;
@@ -42200,6 +42177,7 @@ var filter = function(options, inputValue, filterFn) {
42200
42177
  * Сброс происходит в одном из эффекте `updateOptionsAndSelectedOptionIndex()`.
42201
42178
  */ var close = React.useCallback(function() {
42202
42179
  resetKeyboardInput();
42180
+ setInputValue('');
42203
42181
  setOpened(false);
42204
42182
  resetFocusedOption();
42205
42183
  onClose === null || onClose === void 0 ? void 0 : onClose();
@@ -42210,8 +42188,8 @@ var filter = function(options, inputValue, filterFn) {
42210
42188
  ]);
42211
42189
  var selectOption = React.useCallback(function(index) {
42212
42190
  var item = options[index];
42213
- close();
42214
42191
  setNativeSelectValue(item === null || item === void 0 ? void 0 : item.value);
42192
+ close();
42215
42193
  var shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync = isControlledOutside && props.value !== nativeSelectValue && nativeSelectValue === (item === null || item === void 0 ? void 0 : item.value);
42216
42194
  if (shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync) {
42217
42195
  var _selectElRef_current;
@@ -42255,23 +42233,18 @@ var filter = function(options, inputValue, filterFn) {
42255
42233
  bubbles: true
42256
42234
  });
42257
42235
  (_selectElRef_current = selectElRef.current) === null || _selectElRef_current === void 0 ? void 0 : _selectElRef_current.dispatchEvent(event);
42258
- setInputValue(calculateInputValueFromOptions(optionsProp, nativeSelectValue));
42259
42236
  }, [
42260
42237
  close,
42261
- selectElRef,
42262
- optionsProp,
42263
- nativeSelectValue
42238
+ selectElRef
42264
42239
  ]);
42265
42240
  var onFocus = React.useCallback(function() {
42266
- var _selectElRef_current, _selectInputRef_current;
42241
+ var _selectElRef_current;
42267
42242
  var event = new Event('focusin', {
42268
42243
  bubbles: true
42269
42244
  });
42270
42245
  (_selectElRef_current = selectElRef.current) === null || _selectElRef_current === void 0 ? void 0 : _selectElRef_current.dispatchEvent(event);
42271
- (_selectInputRef_current = selectInputRef.current) === null || _selectInputRef_current === void 0 ? void 0 : _selectInputRef_current.select();
42272
42246
  }, [
42273
- selectElRef,
42274
- selectInputRef
42247
+ selectElRef
42275
42248
  ]);
42276
42249
  var onClick = React.useCallback(function() {
42277
42250
  if (opened) {
@@ -42292,11 +42265,11 @@ var filter = function(options, inputValue, filterFn) {
42292
42265
  var focusOption = React.useCallback(function(type) {
42293
42266
  var index = focusedOptionIndex;
42294
42267
  if (type === 'next') {
42295
- var nextIndex = findIndexAfter(options, index);
42296
- index = nextIndex === -1 ? findIndexAfter(options) : nextIndex; // Следующий за index или первый валидный до index
42268
+ var nextIndex = CustomSelect_findIndexAfter(options, index);
42269
+ index = nextIndex === -1 ? CustomSelect_findIndexAfter(options) : nextIndex; // Следующий за index или первый валидный до index
42297
42270
  } else if (type === 'prev') {
42298
- var beforeIndex = findIndexBefore(options, index);
42299
- index = beforeIndex === -1 ? findIndexBefore(options) : beforeIndex; // Предшествующий index или последний валидный после index
42271
+ var beforeIndex = CustomSelect_findIndexBefore(options, index);
42272
+ index = beforeIndex === -1 ? CustomSelect_findIndexBefore(options) : beforeIndex; // Предшествующий index или последний валидный после index
42300
42273
  }
42301
42274
  focusOptionByIndex(index);
42302
42275
  }, [
@@ -42304,38 +42277,21 @@ var filter = function(options, inputValue, filterFn) {
42304
42277
  focusedOptionIndex,
42305
42278
  options
42306
42279
  ]);
42307
- React.useEffect(function filterOptions() {
42280
+ React.useEffect(function updateOptionsAndSelectedOptionIndex() {
42281
+ var _props_value, _ref;
42282
+ var value = (_ref = (_props_value = props.value) !== null && _props_value !== void 0 ? _props_value : nativeSelectValue) !== null && _ref !== void 0 ? _ref : defaultValue;
42308
42283
  var options = searchable && inputValue !== undefined ? filter(optionsProp, inputValue, filterFn) : optionsProp;
42309
42284
  setOptions(options);
42285
+ setSelectedOptionIndex(findSelectedIndex(options, value, allowClearButton));
42310
42286
  }, [
42311
42287
  filterFn,
42312
42288
  inputValue,
42289
+ nativeSelectValue,
42313
42290
  optionsProp,
42314
- searchable
42315
- ]);
42316
- var _props_value1, _ref;
42317
- var selectValue = (_ref = (_props_value1 = props.value) !== null && _props_value1 !== void 0 ? _props_value1 : nativeSelectValue) !== null && _ref !== void 0 ? _ref : defaultValue;
42318
- React.useEffect(function updateSelectedOptionIndexOnValueChange() {
42319
- setSelectedOptionIndex(findSelectedIndex(options, selectValue, allowClearButton));
42320
- }, [
42321
- selectValue,
42322
- allowClearButton,
42323
- options
42324
- ]);
42325
- var prevSelectValueRef = React.useRef(selectValue);
42326
- React.useEffect(function updateInputValueOnSelectValueChange() {
42327
- if (prevSelectValueRef.current === selectValue) {
42328
- return;
42329
- }
42330
- setInputValue(calculateInputValueFromOptions(optionsProp, selectValue));
42331
- }, [
42332
- selectValue,
42333
- optionsProp
42334
- ]);
42335
- React.useEffect(function updatePrevSelectValue() {
42336
- prevSelectValueRef.current = selectValue;
42337
- }, [
42338
- selectValue
42291
+ defaultValue,
42292
+ props.value,
42293
+ searchable,
42294
+ allowClearButton
42339
42295
  ]);
42340
42296
  var onNativeSelectChange = function(e) {
42341
42297
  var newSelectedOptionIndex = findSelectedIndex(options, e.currentTarget.value, allowClearButton);
@@ -42500,6 +42456,7 @@ var filter = function(options, inputValue, filterFn) {
42500
42456
  renderDropdown,
42501
42457
  renderOption
42502
42458
  ]);
42459
+ var selectInputRef = useExternRef(getSelectInputRef);
42503
42460
  var focusOnInputTimerRef = React.useRef();
42504
42461
  var focusOnInput = React.useCallback(function() {
42505
42462
  clearTimeout(focusOnInputTimerRef.current);
@@ -42580,14 +42537,11 @@ var filter = function(options, inputValue, filterFn) {
42580
42537
  selectInputRef
42581
42538
  ]);
42582
42539
  var preventInputBlurWhenClickInsideFocusedSelectArea = function(e) {
42583
- var _selectInputRef_current;
42584
42540
  // Так как инпут больше не оборачивается пустым лэйблом, то клик внутри обертки,
42585
42541
  // но вне инпута (например по иконке дропдауна), будет убирать фокус с инпута.
42586
42542
  // Чтобы в такой ситуации отключить blur инпута мы превентим mousedown событие обёртки
42587
42543
  var isInputFocused = document && document.activeElement === selectInputRef.current;
42588
- var clickTarget = e.target;
42589
- var inputClicked = (_selectInputRef_current = selectInputRef.current) === null || _selectInputRef_current === void 0 ? void 0 : _selectInputRef_current.contains(clickTarget);
42590
- if (isInputFocused && !inputClicked) {
42544
+ if (isInputFocused) {
42591
42545
  e.preventDefault();
42592
42546
  }
42593
42547
  };
@@ -42596,19 +42550,23 @@ var filter = function(options, inputValue, filterFn) {
42596
42550
  var selectInputAriaProps = {
42597
42551
  'role': 'combobox',
42598
42552
  'aria-controls': popupAriaId,
42553
+ 'aria-owns': popupAriaId,
42599
42554
  'aria-expanded': opened,
42600
42555
  'aria-activedescendant': ariaActiveDescendantId && opened ? "".concat(popupAriaId, "-").concat(ariaActiveDescendantId) : undefined,
42601
42556
  'aria-labelledby': ariaLabelledBy,
42602
42557
  'aria-haspopup': 'listbox',
42603
42558
  'aria-autocomplete': 'none'
42604
42559
  };
42560
+ var focusWithin = useFocusWithin(handleRootRef);
42605
42561
  return /*#__PURE__*/ React.createElement("div", {
42606
42562
  className: classNames("vkuiCustomSelect", sizeY !== 'regular' && CustomSelect_sizeYClassNames[sizeY], className),
42607
42563
  style: style,
42608
42564
  ref: handleRootRef,
42609
42565
  onClick: passClickAndFocusToInputOnClick,
42610
42566
  onMouseDown: preventInputBlurWhenClickInsideFocusedSelectArea
42611
- }, /*#__PURE__*/ React.createElement(CustomSelectInput, CustomSelect_object_spread_props(CustomSelect_object_spread({
42567
+ }, focusWithin && selected && !opened && /*#__PURE__*/ React.createElement(VisuallyHidden, {
42568
+ "aria-live": "polite"
42569
+ }, selected.label), /*#__PURE__*/ React.createElement(CustomSelectInput, CustomSelect_object_spread_props(CustomSelect_object_spread({
42612
42570
  autoComplete: "off",
42613
42571
  autoCapitalize: "none",
42614
42572
  autoCorrect: "off",
@@ -42618,7 +42576,7 @@ var filter = function(options, inputValue, filterFn) {
42618
42576
  onFocus: onFocus,
42619
42577
  onBlur: onBlur,
42620
42578
  className: openedClassNames,
42621
- searchable: searchable,
42579
+ readOnly: !searchable,
42622
42580
  fetching: fetching,
42623
42581
  value: inputValue,
42624
42582
  onKeyUp: handleKeyUp,
@@ -42627,9 +42585,8 @@ var filter = function(options, inputValue, filterFn) {
42627
42585
  onClick: onClick,
42628
42586
  before: before,
42629
42587
  after: afterIcons,
42630
- selectType: selectType,
42631
- selectedOptionLabel: selected === null || selected === void 0 ? void 0 : selected.label
42632
- })), /*#__PURE__*/ React.createElement("select", {
42588
+ selectType: selectType
42589
+ }), selected === null || selected === void 0 ? void 0 : selected.label), /*#__PURE__*/ React.createElement("select", {
42633
42590
  ref: selectElRef,
42634
42591
  name: name,
42635
42592
  onChange: onNativeSelectChange,
@@ -42985,10 +42942,11 @@ function Select_object_without_properties_loose(source, excluded) {
42985
42942
  }, props)), deviceType.mobile && /*#__PURE__*/ React.createElement(NativeSelect, Select_object_spread({
42986
42943
  className: classNames(className, deviceType.mobile.className)
42987
42944
  }, nativeProps), options.map(function(param) {
42988
- var label = param.label, value = param.value;
42945
+ var label = param.label, value = param.value, disabled = param.disabled;
42989
42946
  return /*#__PURE__*/ React.createElement("option", {
42990
42947
  value: value,
42991
- key: "".concat(value)
42948
+ key: "".concat(value),
42949
+ disabled: disabled
42992
42950
  }, label);
42993
42951
  })));
42994
42952
  };
@@ -1 +1 @@
1
- {"version":3,"file":"CarouselBase.d.ts","sourceRoot":"","sources":["../../../../../src/components/BaseGallery/CarouselBase/CarouselBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,EAAE,KAAK,gBAAgB,EAA2B,MAAM,UAAU,CAAC;AAc1E,eAAO,MAAM,YAAY,4LAiBtB,gBAAgB,KAAG,KAAK,CAAC,SAsV3B,CAAC"}
1
+ {"version":3,"file":"CarouselBase.d.ts","sourceRoot":"","sources":["../../../../../src/components/BaseGallery/CarouselBase/CarouselBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,EAAE,KAAK,gBAAgB,EAA2B,MAAM,UAAU,CAAC;AAmB1E,eAAO,MAAM,YAAY,4LAiBtB,gBAAgB,KAAG,KAAK,CAAC,SAgW3B,CAAC"}
@@ -11,7 +11,7 @@ import { warnOnce } from '../../../lib/warnOnce';
11
11
  import { RootComponent } from '../../RootComponent/RootComponent';
12
12
  import { ScrollArrow } from '../../ScrollArrow/ScrollArrow';
13
13
  import { Touch } from '../../Touch/Touch';
14
- import { ANIMATION_DURATION, CONTROL_ELEMENTS_STATE, SLIDES_MANAGER_STATE } from './constants';
14
+ import { ANIMATION_DURATION, CONTROL_ELEMENTS_STATE, SLIDE_THRESHOLD, SLIDES_MANAGER_STATE } from './constants';
15
15
  import { calculateIndent, getLoopPoints, getTargetIndex } from './helpers';
16
16
  import { useSlideAnimation } from './hooks';
17
17
  import styles from '../BaseGallery.module.css';
@@ -191,11 +191,20 @@ export const CarouselBase = ({ bullets = false, getRootRef, children, slideWidth
191
191
  align,
192
192
  slideWidth
193
193
  ]);
194
+ const calculateMinDeltaXToSlide = ()=>{
195
+ return slidesManager.current.slides[slideIndex].width * SLIDE_THRESHOLD;
196
+ };
194
197
  const slideLeft = (event)=>{
198
+ if (slideIndex > 0) {
199
+ shiftXCurrentRef.current += calculateMinDeltaXToSlide();
200
+ }
195
201
  onChange?.((slideIndex - 1 + slidesManager.current.slides.length) % slidesManager.current.slides.length);
196
202
  onPrevClick?.(event);
197
203
  };
198
204
  const slideRight = (event)=>{
205
+ if (slideIndex < slidesManager.current.slides.length - 1) {
206
+ shiftXCurrentRef.current -= calculateMinDeltaXToSlide();
207
+ }
199
208
  onChange?.((slideIndex + 1) % slidesManager.current.slides.length);
200
209
  onNextClick?.(event);
201
210
  };