@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.
- package/dist/cjs/components/BaseGallery/CarouselBase/CarouselBase.d.ts.map +1 -1
- package/dist/cjs/components/BaseGallery/CarouselBase/CarouselBase.js +9 -0
- package/dist/cjs/components/BaseGallery/CarouselBase/CarouselBase.js.map +1 -1
- package/dist/cjs/components/CustomSelect/CustomSelect.d.ts +12 -2
- package/dist/cjs/components/CustomSelect/CustomSelect.d.ts.map +1 -1
- package/dist/cjs/components/CustomSelect/CustomSelect.js +72 -52
- package/dist/cjs/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/cjs/components/CustomSelect/CustomSelectInput.d.ts +1 -3
- package/dist/cjs/components/CustomSelect/CustomSelectInput.d.ts.map +1 -1
- package/dist/cjs/components/CustomSelect/CustomSelectInput.js +24 -19
- package/dist/cjs/components/CustomSelect/CustomSelectInput.js.map +1 -1
- package/dist/cjs/components/Select/Select.js +2 -1
- package/dist/cjs/components/Select/Select.js.map +1 -1
- package/dist/cjs/components/Spacing/Spacing.js +1 -1
- package/dist/cjs/components/Spacing/Spacing.js.map +1 -1
- package/dist/cjs/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.d.ts.map +1 -1
- package/dist/cjs/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js +3 -0
- package/dist/cjs/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
- package/dist/components/BaseGallery/CarouselBase/CarouselBase.d.ts.map +1 -1
- package/dist/components/BaseGallery/CarouselBase/CarouselBase.js +10 -1
- package/dist/components/BaseGallery/CarouselBase/CarouselBase.js.map +1 -1
- package/dist/components/CustomSelect/CustomSelect.d.ts +12 -2
- package/dist/components/CustomSelect/CustomSelect.d.ts.map +1 -1
- package/dist/components/CustomSelect/CustomSelect.js +64 -44
- package/dist/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/components/CustomSelect/CustomSelectInput.d.ts +1 -3
- package/dist/components/CustomSelect/CustomSelectInput.d.ts.map +1 -1
- package/dist/components/CustomSelect/CustomSelectInput.js +24 -19
- package/dist/components/CustomSelect/CustomSelectInput.js.map +1 -1
- package/dist/components/Select/Select.js +2 -1
- package/dist/components/Select/Select.js.map +1 -1
- package/dist/components/Spacing/Spacing.js +1 -1
- package/dist/components/Spacing/Spacing.js.map +1 -1
- package/dist/components.css +3 -3
- package/dist/components.css.map +1 -1
- package/dist/components.js.tmp +117 -159
- package/dist/cssm/components/BaseGallery/CarouselBase/CarouselBase.d.ts.map +1 -1
- package/dist/cssm/components/BaseGallery/CarouselBase/CarouselBase.js +10 -1
- package/dist/cssm/components/BaseGallery/CarouselBase/CarouselBase.js.map +1 -1
- package/dist/cssm/components/CustomSelect/CustomSelect.d.ts +12 -2
- package/dist/cssm/components/CustomSelect/CustomSelect.d.ts.map +1 -1
- package/dist/cssm/components/CustomSelect/CustomSelect.js +60 -41
- package/dist/cssm/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/cssm/components/CustomSelect/CustomSelectInput.d.ts +1 -3
- package/dist/cssm/components/CustomSelect/CustomSelectInput.d.ts.map +1 -1
- package/dist/cssm/components/CustomSelect/CustomSelectInput.js +21 -16
- package/dist/cssm/components/CustomSelect/CustomSelectInput.js.map +1 -1
- package/dist/cssm/components/CustomSelect/CustomSelectInput.module.css +40 -74
- package/dist/cssm/components/Select/Select.js +2 -1
- package/dist/cssm/components/Select/Select.js.map +1 -1
- package/dist/cssm/components/Spacing/Spacing.js +1 -1
- package/dist/cssm/components/Spacing/Spacing.js.map +1 -1
- package/dist/cssm/components/Spacing/Spacing.module.css +1 -2
- package/dist/cssm/components/TabsItem/TabsItem.module.css +1 -1
- package/dist/cssm/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.d.ts.map +1 -1
- package/dist/cssm/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js +3 -0
- package/dist/cssm/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
- package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.d.ts.map +1 -1
- package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js +3 -0
- package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
- package/dist/vkui.css +3 -3
- package/dist/vkui.css.map +1 -1
- package/dist/vkui.js.tmp +117 -159
- package/package.json +1 -1
- package/src/components/BaseGallery/CarouselBase/CarouselBase.tsx +16 -1
- package/src/components/CustomSelect/CustomSelect.tsx +101 -53
- package/src/components/CustomSelect/CustomSelectInput.module.css +35 -55
- package/src/components/CustomSelect/CustomSelectInput.tsx +35 -24
- package/src/components/Select/Select.tsx +2 -2
- package/src/components/Spacing/Spacing.module.css +1 -2
- package/src/components/Spacing/Spacing.tsx +1 -1
- package/src/components/TabsItem/TabsItem.module.css +1 -1
- package/src/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.ts +3 -0
- package/dist/cjs/components/CustomSelect/helpers.d.ts +0 -8
- package/dist/cjs/components/CustomSelect/helpers.d.ts.map +0 -1
- package/dist/cjs/components/CustomSelect/helpers.js +0 -76
- package/dist/cjs/components/CustomSelect/helpers.js.map +0 -1
- package/dist/cjs/components/CustomSelect/types.d.ts +0 -12
- package/dist/cjs/components/CustomSelect/types.d.ts.map +0 -1
- package/dist/cjs/components/CustomSelect/types.js +0 -6
- package/dist/cjs/components/CustomSelect/types.js.map +0 -1
- package/dist/components/CustomSelect/helpers.d.ts +0 -8
- package/dist/components/CustomSelect/helpers.d.ts.map +0 -1
- package/dist/components/CustomSelect/helpers.js +0 -48
- package/dist/components/CustomSelect/helpers.js.map +0 -1
- package/dist/components/CustomSelect/types.d.ts +0 -12
- package/dist/components/CustomSelect/types.d.ts.map +0 -1
- package/dist/components/CustomSelect/types.js +0 -3
- package/dist/components/CustomSelect/types.js.map +0 -1
- package/dist/cssm/components/CustomSelect/helpers.d.ts +0 -8
- package/dist/cssm/components/CustomSelect/helpers.d.ts.map +0 -1
- package/dist/cssm/components/CustomSelect/helpers.js +0 -44
- package/dist/cssm/components/CustomSelect/helpers.js.map +0 -1
- package/dist/cssm/components/CustomSelect/types.d.ts +0 -12
- package/dist/cssm/components/CustomSelect/types.d.ts.map +0 -1
- package/dist/cssm/components/CustomSelect/types.js +0 -3
- package/dist/cssm/components/CustomSelect/types.js.map +0 -1
- package/src/components/CustomSelect/helpers.tsx +0 -61
- package/src/components/CustomSelect/types.ts +0 -15
package/dist/components.js.tmp
CHANGED
|
@@ -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
|
|
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
|
|
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 =
|
|
39424
|
-
index = _$nextIndex === -1 ?
|
|
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 =
|
|
39427
|
-
index = beforeIndex === -1 ?
|
|
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,
|
|
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
|
-
"
|
|
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
|
|
41736
|
-
var input = /*#__PURE__*/ React.createElement(
|
|
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
|
-
},
|
|
41754
|
+
}, restProps), {
|
|
41740
41755
|
disabled: disabled && !fetching,
|
|
41741
|
-
readOnly:
|
|
41756
|
+
readOnly: restProps.readOnly || disabled && fetching,
|
|
41742
41757
|
Component: "input",
|
|
41743
41758
|
normalize: false,
|
|
41744
|
-
className: "
|
|
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", !
|
|
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
|
-
},
|
|
41760
|
-
className: classNames("
|
|
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: "
|
|
41767
|
-
},
|
|
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(
|
|
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 =
|
|
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
|
|
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 =
|
|
42296
|
-
index = nextIndex === -1 ?
|
|
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 =
|
|
42299
|
-
index = beforeIndex === -1 ?
|
|
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
|
|
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
|
-
|
|
42315
|
-
|
|
42316
|
-
|
|
42317
|
-
|
|
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
|
-
|
|
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(
|
|
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
|
-
|
|
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
|
-
|
|
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;
|
|
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
|
};
|