@vkontakte/vkui 6.3.0 → 6.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.
- package/dist/cjs/components/Cell/Cell.d.ts.map +1 -1
- package/dist/cjs/components/Cell/Cell.js +5 -3
- package/dist/cjs/components/Cell/Cell.js.map +1 -1
- package/dist/cjs/components/ChipsInputBase/ChipsInputBase.d.ts +1 -1
- package/dist/cjs/components/ChipsInputBase/ChipsInputBase.d.ts.map +1 -1
- package/dist/cjs/components/ChipsInputBase/ChipsInputBase.js +3 -1
- package/dist/cjs/components/ChipsInputBase/ChipsInputBase.js.map +1 -1
- package/dist/cjs/components/ChipsInputBase/types.d.ts +1 -1
- package/dist/cjs/components/ChipsInputBase/types.d.ts.map +1 -1
- package/dist/cjs/components/ChipsInputBase/types.js.map +1 -1
- package/dist/cjs/components/Clickable/Clickable.d.ts.map +1 -1
- package/dist/cjs/components/Clickable/Clickable.js +4 -3
- package/dist/cjs/components/Clickable/Clickable.js.map +1 -1
- package/dist/cjs/components/CustomSelect/CustomSelect.d.ts.map +1 -1
- package/dist/cjs/components/CustomSelect/CustomSelect.js +8 -4
- package/dist/cjs/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/cjs/components/FormField/FormField.d.ts +5 -1
- package/dist/cjs/components/FormField/FormField.d.ts.map +1 -1
- package/dist/cjs/components/FormField/FormField.js +26 -10
- package/dist/cjs/components/FormField/FormField.js.map +1 -1
- package/dist/cjs/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.d.ts.map +1 -1
- package/dist/cjs/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.js +4 -4
- package/dist/cjs/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.js.map +1 -1
- package/dist/cjs/components/Input/Input.d.ts +1 -1
- package/dist/cjs/components/Input/Input.d.ts.map +1 -1
- package/dist/cjs/components/Input/Input.js.map +1 -1
- package/dist/cjs/components/Popover/Popover.d.ts +2 -2
- package/dist/cjs/components/Popover/Popover.d.ts.map +1 -1
- package/dist/cjs/components/Popover/Popover.js +4 -2
- package/dist/cjs/components/Popover/Popover.js.map +1 -1
- package/dist/cjs/components/ScreenSpinner/ScreenSpinner.d.ts +20 -1
- package/dist/cjs/components/ScreenSpinner/ScreenSpinner.d.ts.map +1 -1
- package/dist/cjs/components/ScreenSpinner/ScreenSpinner.js +109 -25
- package/dist/cjs/components/ScreenSpinner/ScreenSpinner.js.map +1 -1
- package/dist/cjs/components/Select/Select.d.ts.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/Snackbar/Snackbar.d.ts +3 -1
- package/dist/cjs/components/Snackbar/Snackbar.d.ts.map +1 -1
- package/dist/cjs/components/Snackbar/Snackbar.js +4 -3
- package/dist/cjs/components/Snackbar/Snackbar.js.map +1 -1
- package/dist/cjs/components/Snackbar/types.d.ts +1 -0
- package/dist/cjs/components/Snackbar/types.d.ts.map +1 -1
- package/dist/cjs/components/Snackbar/utils.d.ts.map +1 -1
- package/dist/cjs/components/Snackbar/utils.js +7 -3
- package/dist/cjs/components/Snackbar/utils.js.map +1 -1
- package/dist/cjs/components/Textarea/Textarea.d.ts +1 -1
- package/dist/cjs/components/Textarea/Textarea.d.ts.map +1 -1
- package/dist/cjs/components/Textarea/Textarea.js +1 -3
- package/dist/cjs/components/Textarea/Textarea.js.map +1 -1
- package/dist/cjs/components/Tooltip/Tooltip.d.ts +5 -1
- package/dist/cjs/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/cjs/components/Tooltip/Tooltip.js +3 -2
- package/dist/cjs/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/cjs/index.d.ts +2 -2
- package/dist/cjs/index.d.ts.map +1 -1
- package/dist/cjs/index.js +3 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/lib/animation/useCSSKeyframesAnimationController.d.ts +9 -9
- package/dist/cjs/lib/animation/useCSSKeyframesAnimationController.d.ts.map +1 -1
- package/dist/cjs/lib/animation/useCSSKeyframesAnimationController.js +31 -52
- package/dist/cjs/lib/animation/useCSSKeyframesAnimationController.js.map +1 -1
- package/dist/cjs/lib/floating/useFloatingWithInteractions/types.d.ts +4 -0
- package/dist/cjs/lib/floating/useFloatingWithInteractions/types.d.ts.map +1 -1
- package/dist/cjs/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.d.ts +1 -1
- package/dist/cjs/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.d.ts.map +1 -1
- package/dist/cjs/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js +6 -2
- package/dist/cjs/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
- package/dist/cjs/lib/utils.d.ts +1 -1
- package/dist/cjs/lib/utils.d.ts.map +1 -1
- package/dist/cjs/lib/utils.js +12 -9
- package/dist/cjs/lib/utils.js.map +1 -1
- package/dist/components/Cell/Cell.d.ts.map +1 -1
- package/dist/components/Cell/Cell.js +5 -3
- package/dist/components/Cell/Cell.js.map +1 -1
- package/dist/components/ChipsInputBase/ChipsInputBase.d.ts +1 -1
- package/dist/components/ChipsInputBase/ChipsInputBase.d.ts.map +1 -1
- package/dist/components/ChipsInputBase/ChipsInputBase.js +3 -1
- package/dist/components/ChipsInputBase/ChipsInputBase.js.map +1 -1
- package/dist/components/ChipsInputBase/types.d.ts +1 -1
- package/dist/components/ChipsInputBase/types.d.ts.map +1 -1
- package/dist/components/ChipsInputBase/types.js.map +1 -1
- package/dist/components/Clickable/Clickable.d.ts.map +1 -1
- package/dist/components/Clickable/Clickable.js +4 -3
- package/dist/components/Clickable/Clickable.js.map +1 -1
- package/dist/components/CustomSelect/CustomSelect.d.ts.map +1 -1
- package/dist/components/CustomSelect/CustomSelect.js +8 -4
- package/dist/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/components/FormField/FormField.d.ts +5 -1
- package/dist/components/FormField/FormField.d.ts.map +1 -1
- package/dist/components/FormField/FormField.js +26 -10
- package/dist/components/FormField/FormField.js.map +1 -1
- package/dist/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.d.ts.map +1 -1
- package/dist/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.js +4 -4
- package/dist/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.js.map +1 -1
- package/dist/components/Input/Input.d.ts +1 -1
- package/dist/components/Input/Input.d.ts.map +1 -1
- package/dist/components/Input/Input.js.map +1 -1
- package/dist/components/Popover/Popover.d.ts +2 -2
- package/dist/components/Popover/Popover.d.ts.map +1 -1
- package/dist/components/Popover/Popover.js +4 -2
- package/dist/components/Popover/Popover.js.map +1 -1
- package/dist/components/ScreenSpinner/ScreenSpinner.d.ts +20 -1
- package/dist/components/ScreenSpinner/ScreenSpinner.d.ts.map +1 -1
- package/dist/components/ScreenSpinner/ScreenSpinner.js +99 -24
- package/dist/components/ScreenSpinner/ScreenSpinner.js.map +1 -1
- package/dist/components/Select/Select.d.ts.map +1 -1
- package/dist/components/Select/Select.js +2 -1
- package/dist/components/Select/Select.js.map +1 -1
- package/dist/components/Snackbar/Snackbar.d.ts +3 -1
- package/dist/components/Snackbar/Snackbar.d.ts.map +1 -1
- package/dist/components/Snackbar/Snackbar.js +4 -3
- package/dist/components/Snackbar/Snackbar.js.map +1 -1
- package/dist/components/Snackbar/types.d.ts +1 -0
- package/dist/components/Snackbar/types.d.ts.map +1 -1
- package/dist/components/Snackbar/types.js.map +1 -1
- package/dist/components/Snackbar/utils.d.ts.map +1 -1
- package/dist/components/Snackbar/utils.js +7 -3
- package/dist/components/Snackbar/utils.js.map +1 -1
- package/dist/components/Textarea/Textarea.d.ts +1 -1
- package/dist/components/Textarea/Textarea.d.ts.map +1 -1
- package/dist/components/Textarea/Textarea.js +1 -3
- package/dist/components/Textarea/Textarea.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.d.ts +5 -1
- package/dist/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/components/Tooltip/Tooltip.js +3 -2
- package/dist/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/components.css +2 -2
- package/dist/components.css.map +1 -1
- package/dist/components.js.tmp +903 -761
- package/dist/cssm/components/Cell/Cell.d.ts.map +1 -1
- package/dist/cssm/components/Cell/Cell.js +7 -1
- package/dist/cssm/components/Cell/Cell.js.map +1 -1
- package/dist/cssm/components/ChipsInputBase/ChipsInputBase.d.ts +1 -1
- package/dist/cssm/components/ChipsInputBase/ChipsInputBase.d.ts.map +1 -1
- package/dist/cssm/components/ChipsInputBase/ChipsInputBase.js +2 -1
- package/dist/cssm/components/ChipsInputBase/ChipsInputBase.js.map +1 -1
- package/dist/cssm/components/ChipsInputBase/types.d.ts +1 -1
- package/dist/cssm/components/ChipsInputBase/types.d.ts.map +1 -1
- package/dist/cssm/components/ChipsInputBase/types.js.map +1 -1
- package/dist/cssm/components/Clickable/Clickable.d.ts.map +1 -1
- package/dist/cssm/components/Clickable/Clickable.js +4 -3
- package/dist/cssm/components/Clickable/Clickable.js.map +1 -1
- package/dist/cssm/components/CustomSelect/CustomSelect.d.ts.map +1 -1
- package/dist/cssm/components/CustomSelect/CustomSelect.js +8 -4
- package/dist/cssm/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/cssm/components/DateInput/DateInput.module.css +1 -0
- package/dist/cssm/components/DateRangeInput/DateRangeInput.module.css +1 -0
- package/dist/cssm/components/FormField/FormField.d.ts +5 -1
- package/dist/cssm/components/FormField/FormField.d.ts.map +1 -1
- package/dist/cssm/components/FormField/FormField.js +24 -9
- package/dist/cssm/components/FormField/FormField.js.map +1 -1
- package/dist/cssm/components/FormField/FormField.module.css +27 -4
- package/dist/cssm/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.d.ts.map +1 -1
- package/dist/cssm/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.js +2 -3
- package/dist/cssm/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.js.map +1 -1
- package/dist/cssm/components/Input/Input.d.ts +1 -1
- package/dist/cssm/components/Input/Input.d.ts.map +1 -1
- package/dist/cssm/components/Input/Input.js.map +1 -1
- package/dist/cssm/components/ModalDismissButton/ModalDismissButton.module.css +3 -3
- package/dist/cssm/components/Popover/Popover.d.ts +2 -2
- package/dist/cssm/components/Popover/Popover.d.ts.map +1 -1
- package/dist/cssm/components/Popover/Popover.js +3 -2
- package/dist/cssm/components/Popover/Popover.js.map +1 -1
- package/dist/cssm/components/ScreenSpinner/ScreenSpinner.d.ts +20 -1
- package/dist/cssm/components/ScreenSpinner/ScreenSpinner.d.ts.map +1 -1
- package/dist/cssm/components/ScreenSpinner/ScreenSpinner.js +86 -18
- package/dist/cssm/components/ScreenSpinner/ScreenSpinner.js.map +1 -1
- package/dist/cssm/components/ScreenSpinner/ScreenSpinner.module.css +14 -16
- package/dist/cssm/components/Select/Select.d.ts.map +1 -1
- package/dist/cssm/components/Select/Select.js +1 -1
- package/dist/cssm/components/Select/Select.js.map +1 -1
- package/dist/cssm/components/Select/Select.module.css +1 -0
- package/dist/cssm/components/Snackbar/Snackbar.d.ts +3 -1
- package/dist/cssm/components/Snackbar/Snackbar.d.ts.map +1 -1
- package/dist/cssm/components/Snackbar/Snackbar.js +4 -3
- package/dist/cssm/components/Snackbar/Snackbar.js.map +1 -1
- package/dist/cssm/components/Snackbar/Snackbar.module.css +14 -1
- package/dist/cssm/components/Snackbar/types.d.ts +1 -0
- package/dist/cssm/components/Snackbar/types.d.ts.map +1 -1
- package/dist/cssm/components/Snackbar/types.js.map +1 -1
- package/dist/cssm/components/Snackbar/utils.d.ts.map +1 -1
- package/dist/cssm/components/Snackbar/utils.js +7 -3
- package/dist/cssm/components/Snackbar/utils.js.map +1 -1
- package/dist/cssm/components/Textarea/Textarea.d.ts +1 -1
- package/dist/cssm/components/Textarea/Textarea.d.ts.map +1 -1
- package/dist/cssm/components/Textarea/Textarea.js +1 -3
- package/dist/cssm/components/Textarea/Textarea.js.map +1 -1
- package/dist/cssm/components/Tooltip/Tooltip.d.ts +5 -1
- package/dist/cssm/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/cssm/components/Tooltip/Tooltip.js +2 -2
- package/dist/cssm/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/cssm/index.d.ts +2 -2
- package/dist/cssm/index.d.ts.map +1 -1
- package/dist/cssm/index.js +1 -1
- package/dist/cssm/index.js.map +1 -1
- package/dist/cssm/lib/animation/useCSSKeyframesAnimationController.d.ts +9 -9
- package/dist/cssm/lib/animation/useCSSKeyframesAnimationController.d.ts.map +1 -1
- package/dist/cssm/lib/animation/useCSSKeyframesAnimationController.js +31 -51
- package/dist/cssm/lib/animation/useCSSKeyframesAnimationController.js.map +1 -1
- package/dist/cssm/lib/floating/useFloatingWithInteractions/types.d.ts +4 -0
- package/dist/cssm/lib/floating/useFloatingWithInteractions/types.d.ts.map +1 -1
- package/dist/cssm/lib/floating/useFloatingWithInteractions/types.js.map +1 -1
- package/dist/cssm/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.d.ts +1 -1
- package/dist/cssm/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.d.ts.map +1 -1
- package/dist/cssm/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js +7 -3
- package/dist/cssm/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
- package/dist/cssm/lib/utils.d.ts +1 -1
- package/dist/cssm/lib/utils.d.ts.map +1 -1
- package/dist/cssm/lib/utils.js +15 -7
- package/dist/cssm/lib/utils.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/lib/animation/useCSSKeyframesAnimationController.d.ts +9 -9
- package/dist/lib/animation/useCSSKeyframesAnimationController.d.ts.map +1 -1
- package/dist/lib/animation/useCSSKeyframesAnimationController.js +31 -51
- package/dist/lib/animation/useCSSKeyframesAnimationController.js.map +1 -1
- package/dist/lib/floating/useFloatingWithInteractions/types.d.ts +4 -0
- package/dist/lib/floating/useFloatingWithInteractions/types.d.ts.map +1 -1
- package/dist/lib/floating/useFloatingWithInteractions/types.js.map +1 -1
- package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.d.ts +1 -1
- package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.d.ts.map +1 -1
- package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js +7 -3
- package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
- package/dist/lib/utils.d.ts +1 -1
- package/dist/lib/utils.d.ts.map +1 -1
- package/dist/lib/utils.js +16 -7
- package/dist/lib/utils.js.map +1 -1
- package/dist/vkui.css +2 -2
- package/dist/vkui.css.map +1 -1
- package/dist/vkui.js.tmp +903 -761
- package/package.json +3 -3
- package/src/components/Cell/Cell.tsx +5 -1
- package/src/components/ChipsInputBase/ChipsInputBase.tsx +2 -0
- package/src/components/ChipsInputBase/types.ts +1 -1
- package/src/components/Clickable/Clickable.tsx +16 -13
- package/src/components/CustomSelect/CustomSelect.tsx +5 -6
- package/src/components/DateInput/DateInput.module.css +1 -0
- package/src/components/DateRangeInput/DateRangeInput.module.css +1 -0
- package/src/components/FormField/FormField.module.css +26 -4
- package/src/components/FormField/FormField.tsx +31 -16
- package/src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx +2 -3
- package/src/components/Input/Input.tsx +1 -1
- package/src/components/ModalDismissButton/ModalDismissButton.module.css +3 -3
- package/src/components/Popover/Popover.tsx +3 -0
- package/src/components/ScreenSpinner/ScreenSpinner.module.css +14 -16
- package/src/components/ScreenSpinner/ScreenSpinner.tsx +132 -40
- package/src/components/Select/Select.module.css +1 -0
- package/src/components/Select/Select.tsx +1 -0
- package/src/components/Snackbar/Snackbar.module.css +14 -1
- package/src/components/Snackbar/Snackbar.tsx +17 -4
- package/src/components/Snackbar/types.ts +1 -0
- package/src/components/Snackbar/utils.ts +12 -4
- package/src/components/Textarea/Textarea.tsx +1 -2
- package/src/components/Tooltip/Tooltip.tsx +6 -1
- package/src/index.ts +5 -2
- package/src/lib/animation/useCSSKeyframesAnimationController.ts +46 -62
- package/src/lib/floating/useFloatingWithInteractions/types.ts +4 -0
- package/src/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.ts +6 -2
- package/src/lib/utils.ts +18 -9
- package/dist/cjs/components/Clickable/useKeyboard.d.ts +0 -5
- package/dist/cjs/components/Clickable/useKeyboard.d.ts.map +0 -1
- package/dist/cjs/components/Clickable/useKeyboard.js +0 -29
- package/dist/cjs/components/Clickable/useKeyboard.js.map +0 -1
- package/dist/cjs/vkui.js +0 -8
- package/dist/cjs/vkui.js.map +0 -1
- package/dist/components/Clickable/useKeyboard.d.ts +0 -5
- package/dist/components/Clickable/useKeyboard.d.ts.map +0 -1
- package/dist/components/Clickable/useKeyboard.js +0 -24
- package/dist/components/Clickable/useKeyboard.js.map +0 -1
- package/dist/cssm/components/Clickable/useKeyboard.d.ts +0 -5
- package/dist/cssm/components/Clickable/useKeyboard.d.ts.map +0 -1
- package/dist/cssm/components/Clickable/useKeyboard.js +0 -23
- package/dist/cssm/components/Clickable/useKeyboard.js.map +0 -1
- package/dist/cssm/vkui.js +0 -3
- package/dist/cssm/vkui.js.map +0 -1
- package/dist/vkui.js +0 -3
- package/dist/vkui.js.map +0 -1
- package/src/components/Clickable/useKeyboard.tsx +0 -26
|
@@ -21,10 +21,19 @@ const iconAlignClassNames = {
|
|
|
21
21
|
start: "vkuiFormField__icon--align-start",
|
|
22
22
|
end: "vkuiFormField__icon--align-end"
|
|
23
23
|
};
|
|
24
|
+
const renderIcon = (icon, align, className)=>{
|
|
25
|
+
return /*#__PURE__*/ _jsx("div", {
|
|
26
|
+
className: "vkuiFormField__iconWrapper",
|
|
27
|
+
children: /*#__PURE__*/ _jsx("span", {
|
|
28
|
+
className: classNames(iconAlignClassNames[align], className),
|
|
29
|
+
children: icon
|
|
30
|
+
})
|
|
31
|
+
});
|
|
32
|
+
};
|
|
24
33
|
/**
|
|
25
34
|
* @see https://vkcom.github.io/VKUI/#/FormField
|
|
26
35
|
*/ export const FormField = (_param)=>{
|
|
27
|
-
var { Component = 'span', status = 'default', children, getRootRef, before, after, beforeAlign = 'center', afterAlign = 'center', disabled, mode = 'default', className } = _param, restProps = _object_without_properties(_param, [
|
|
36
|
+
var { Component = 'span', status = 'default', children, getRootRef, before, after, beforeAlign = 'center', afterAlign = 'center', disabled, mode = 'default', className, maxHeight, style } = _param, restProps = _object_without_properties(_param, [
|
|
28
37
|
"Component",
|
|
29
38
|
"status",
|
|
30
39
|
"children",
|
|
@@ -35,7 +44,9 @@ const iconAlignClassNames = {
|
|
|
35
44
|
"afterAlign",
|
|
36
45
|
"disabled",
|
|
37
46
|
"mode",
|
|
38
|
-
"className"
|
|
47
|
+
"className",
|
|
48
|
+
"maxHeight",
|
|
49
|
+
"style"
|
|
39
50
|
]);
|
|
40
51
|
const elRef = useExternRef(getRootRef);
|
|
41
52
|
const { sizeY = 'none' } = useAdaptivity();
|
|
@@ -55,18 +66,23 @@ const iconAlignClassNames = {
|
|
|
55
66
|
};
|
|
56
67
|
return /*#__PURE__*/ _jsxs(Component, _object_spread_props(_object_spread({}, restProps), {
|
|
57
68
|
ref: elRef,
|
|
69
|
+
style: maxHeight !== undefined ? _object_spread_props(_object_spread({}, style), {
|
|
70
|
+
maxHeight
|
|
71
|
+
}) : style,
|
|
58
72
|
onMouseEnter: handleMouseEnter,
|
|
59
73
|
onMouseLeave: handleMouseLeave,
|
|
60
74
|
className: classNames("vkuiFormField", mode === 'default' && "vkuiFormField--mode-default", status !== 'default' && stylesStatus[status], sizeY !== 'regular' && sizeYClassNames[sizeY], disabled && "vkuiFormField--disabled", !disabled && hover && "vkuiFormField--hover", focusVisibleClassNames, className),
|
|
61
75
|
children: [
|
|
62
|
-
|
|
63
|
-
className:
|
|
64
|
-
children:
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
76
|
+
/*#__PURE__*/ _jsxs("div", {
|
|
77
|
+
className: "vkuiFormField_scrollContainer",
|
|
78
|
+
children: [
|
|
79
|
+
before && renderIcon(before, beforeAlign, "vkuiFormField__before"),
|
|
80
|
+
/*#__PURE__*/ _jsx("div", {
|
|
81
|
+
className: "vkuiFormField__content",
|
|
82
|
+
children: children
|
|
83
|
+
}),
|
|
84
|
+
after && renderIcon(after, afterAlign, classNames("vkuiFormField__after", 'vkuiInternalFormField__after'))
|
|
85
|
+
]
|
|
70
86
|
}),
|
|
71
87
|
/*#__PURE__*/ _jsx("span", {
|
|
72
88
|
"aria-hidden": true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport { HasComponent, HasRootRef } from '../../types';\nimport styles from './FormField.module.css';\n\nconst sizeYClassNames = {\n none: styles['FormField--sizeY-none'],\n ['compact']: styles['FormField--sizeY-compact'],\n};\n\nconst stylesStatus = {\n error: styles['FormField--status-error'],\n valid: styles['FormField--status-valid'],\n};\n\nconst iconAlignClassNames = {\n center: undefined,\n start: styles['FormField__icon--align-start'],\n end: styles['FormField__icon--align-end'],\n};\n\nexport type FieldIconsAlign = 'start' | 'center' | 'end';\n\nexport interface FormFieldProps {\n status?: 'default' | 'error' | 'valid';\n /**\n * Добавляет иконку слева.\n *\n * Рекомендации:\n *\n * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n */\n before?: React.ReactNode;\n /**\n * Вертикальное выравнивание иконки слева\n */\n beforeAlign?: FieldIconsAlign;\n /**\n * Добавляет иконку справа.\n *\n * Рекомендации:\n *\n * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n */\n after?: React.ReactNode;\n /**\n * Вертикальное выравнивание иконки справа\n */\n afterAlign?: FieldIconsAlign;\n /**\n * Режим отображения.\n *\n * - `default` — показывает фон, обводку и, при наличии, текст-подсказку.\n * - `plain` — показывает только текст-подсказку.\n */\n mode?: 'default' | 'plain';\n}\n\ninterface FormFieldOwnProps\n extends React.AllHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLElement>,\n HasComponent,\n FormFieldProps {\n disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormField\n */\nexport const FormField = ({\n Component = 'span',\n status = 'default',\n children,\n getRootRef,\n before,\n after,\n beforeAlign = 'center',\n afterAlign = 'center',\n disabled,\n mode = 'default',\n className,\n ...restProps\n}: FormFieldOwnProps): React.ReactNode => {\n const elRef = useExternRef(getRootRef);\n const { sizeY = 'none' } = useAdaptivity();\n const [hover, setHover] = React.useState(false);\n\n const focusWithin = useFocusWithin(elRef);\n const focusVisibleClassNames = useFocusVisibleClassName({\n focusVisible: focusWithin,\n mode: styles['FormField--focus-visible'],\n });\n\n const handleMouseEnter = (e: MouseEvent) => {\n e.stopPropagation();\n setHover(true);\n };\n\n const handleMouseLeave = (e: MouseEvent) => {\n e.stopPropagation();\n setHover(false);\n };\n\n return (\n <Component\n {...restProps}\n ref={elRef}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n className={classNames(\n styles['FormField'],\n mode === 'default' && styles['FormField--mode-default'],\n status !== 'default' && stylesStatus[status],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n disabled && styles['FormField--disabled'],\n !disabled && hover && styles['FormField--hover'],\n focusVisibleClassNames,\n className,\n )}\n >\n {before && (\n <
|
|
1
|
+
{"version":3,"sources":["../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport { HasComponent, HasRootRef } from '../../types';\nimport styles from './FormField.module.css';\n\nconst sizeYClassNames = {\n none: styles['FormField--sizeY-none'],\n ['compact']: styles['FormField--sizeY-compact'],\n};\n\nconst stylesStatus = {\n error: styles['FormField--status-error'],\n valid: styles['FormField--status-valid'],\n};\n\nconst iconAlignClassNames = {\n center: undefined,\n start: styles['FormField__icon--align-start'],\n end: styles['FormField__icon--align-end'],\n};\n\nconst renderIcon = (icon: React.ReactNode, align: FieldIconsAlign, className: string) => {\n return (\n <div className={styles['FormField__iconWrapper']}>\n <span className={classNames(iconAlignClassNames[align], className)}>{icon}</span>\n </div>\n );\n};\n\nexport type FieldIconsAlign = 'start' | 'center' | 'end';\n\nexport interface FormFieldProps {\n status?: 'default' | 'error' | 'valid';\n /**\n * Добавляет иконку слева.\n *\n * Рекомендации:\n *\n * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n */\n before?: React.ReactNode;\n /**\n * Вертикальное выравнивание иконки слева\n */\n beforeAlign?: FieldIconsAlign;\n /**\n * Добавляет иконку справа.\n *\n * Рекомендации:\n *\n * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n */\n after?: React.ReactNode;\n /**\n * Вертикальное выравнивание иконки справа\n */\n afterAlign?: FieldIconsAlign;\n /**\n * Режим отображения.\n *\n * - `default` — показывает фон, обводку и, при наличии, текст-подсказку.\n * - `plain` — показывает только текст-подсказку.\n */\n mode?: 'default' | 'plain';\n /**\n * Максимальная высота поля\n */\n maxHeight?: number;\n}\n\ninterface FormFieldOwnProps\n extends React.AllHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLElement>,\n HasComponent,\n FormFieldProps {\n disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormField\n */\nexport const FormField = ({\n Component = 'span',\n status = 'default',\n children,\n getRootRef,\n before,\n after,\n beforeAlign = 'center',\n afterAlign = 'center',\n disabled,\n mode = 'default',\n className,\n maxHeight,\n style,\n ...restProps\n}: FormFieldOwnProps): React.ReactNode => {\n const elRef = useExternRef(getRootRef);\n const { sizeY = 'none' } = useAdaptivity();\n const [hover, setHover] = React.useState(false);\n\n const focusWithin = useFocusWithin(elRef);\n const focusVisibleClassNames = useFocusVisibleClassName({\n focusVisible: focusWithin,\n mode: styles['FormField--focus-visible'],\n });\n\n const handleMouseEnter = (e: MouseEvent) => {\n e.stopPropagation();\n setHover(true);\n };\n\n const handleMouseLeave = (e: MouseEvent) => {\n e.stopPropagation();\n setHover(false);\n };\n\n return (\n <Component\n {...restProps}\n ref={elRef}\n style={\n maxHeight !== undefined\n ? {\n ...style,\n maxHeight,\n }\n : style\n }\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n className={classNames(\n styles['FormField'],\n mode === 'default' && styles['FormField--mode-default'],\n status !== 'default' && stylesStatus[status],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n disabled && styles['FormField--disabled'],\n !disabled && hover && styles['FormField--hover'],\n focusVisibleClassNames,\n className,\n )}\n >\n <div className={styles['FormField_scrollContainer']}>\n {before && renderIcon(before, beforeAlign, styles['FormField__before'])}\n <div className={styles['FormField__content']}>{children}</div>\n {after &&\n renderIcon(\n after,\n afterAlign,\n classNames(styles['FormField__after'], 'vkuiInternalFormField__after'),\n )}\n </div>\n <span aria-hidden className={styles['FormField__border']} />\n </Component>\n );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useFocusVisibleClassName","useFocusWithin","sizeYClassNames","none","stylesStatus","error","valid","iconAlignClassNames","center","undefined","start","end","renderIcon","icon","align","className","div","span","FormField","Component","status","children","getRootRef","before","after","beforeAlign","afterAlign","disabled","mode","maxHeight","style","restProps","elRef","sizeY","hover","setHover","useState","focusWithin","focusVisibleClassNames","focusVisible","handleMouseEnter","e","stopPropagation","handleMouseLeave","ref","onMouseEnter","onMouseLeave","aria-hidden"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,wBAAwB,QAAQ,uCAAuC;AAChF,SAASC,cAAc,QAAQ,6BAA6B;AAI5D,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAEA,MAAMC,eAAe;IACnBC,KAAK;IACLC,KAAK;AACP;AAEA,MAAMC,sBAAsB;IAC1BC,QAAQC;IACRC,KAAK;IACLC,GAAG;AACL;AAEA,MAAMC,aAAa,CAACC,MAAuBC,OAAwBC;IACjE,qBACE,KAACC;QAAID,SAAS;kBACZ,cAAA,KAACE;YAAKF,WAAWlB,WAAWU,mBAAmB,CAACO,MAAM,EAAEC;sBAAaF;;;AAG3E;AAqDA;;CAEC,GACD,OAAO,MAAMK,YAAY;QAAC,EACxBC,YAAY,MAAM,EAClBC,SAAS,SAAS,EAClBC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,KAAK,EACLC,cAAc,QAAQ,EACtBC,aAAa,QAAQ,EACrBC,QAAQ,EACRC,OAAO,SAAS,EAChBb,SAAS,EACTc,SAAS,EACTC,KAAK,EAEa,WADfC;QAbHZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAb;QACAc;QACAC;;IAGA,MAAME,QAAQjC,aAAauB;IAC3B,MAAM,EAAEW,QAAQ,MAAM,EAAE,GAAGnC;IAC3B,MAAM,CAACoC,OAAOC,SAAS,GAAGvC,MAAMwC,QAAQ,CAAC;IAEzC,MAAMC,cAAcpC,eAAe+B;IACnC,MAAMM,yBAAyBtC,yBAAyB;QACtDuC,cAAcF;QACdT,IAAI;IACN;IAEA,MAAMY,mBAAmB,CAACC;QACxBA,EAAEC,eAAe;QACjBP,SAAS;IACX;IAEA,MAAMQ,mBAAmB,CAACF;QACxBA,EAAEC,eAAe;QACjBP,SAAS;IACX;IAEA,qBACE,MAAChB,mDACKY;QACJa,KAAKZ;QACLF,OACED,cAAcpB,YACV,wCACKqB;YACHD;aAEFC;QAENe,cAAcL;QACdM,cAAcH;QACd5B,WAAWlB,4BAET+B,SAAS,4CACTR,WAAW,aAAahB,YAAY,CAACgB,OAAO,EAC5Ca,UAAU,aAAa/B,eAAe,CAAC+B,MAAM,EAC7CN,uCACA,CAACA,YAAYO,iCACbI,wBACAvB;;0BAGF,MAACC;gBAAID,SAAS;;oBACXQ,UAAUX,WAAWW,QAAQE;kCAC9B,KAACT;wBAAID,SAAS;kCAAiCM;;oBAC9CG,SACCZ,WACEY,OACAE,YACA7B,mCAAuC;;;0BAG7C,KAACoB;gBAAK8B,aAAW;gBAAChC,SAAS;;;;AAGjC,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageBaseOverlay.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EACV,gCAAgC,EAChC,mCAAmC,EACpC,MAAM,SAAS,CAAC;AAejB,MAAM,MAAM,qBAAqB,GAC7B,gCAAgC,GAChC,mCAAmC,CAAC;
|
|
1
|
+
{"version":3,"file":"ImageBaseOverlay.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EACV,gCAAgC,EAChC,mCAAmC,EACpC,MAAM,SAAS,CAAC;AAejB,MAAM,MAAM,qBAAqB,GAC7B,gCAAgC,GAChC,mCAAmC,CAAC;AA2DxC;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA6B5D,CAAC"}
|
|
@@ -4,12 +4,12 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
|
|
|
4
4
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
5
5
|
import * as React from 'react';
|
|
6
6
|
import { classNames } from '@vkontakte/vkjs';
|
|
7
|
-
import { useKeyboard } from '../../../components/Clickable/useKeyboard';
|
|
8
7
|
import { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';
|
|
9
8
|
import { useAppearance } from '../../../hooks/useAppearance';
|
|
10
9
|
import { useExternRef } from '../../../hooks/useExternRef';
|
|
11
10
|
import { useFocusVisible } from '../../../hooks/useFocusVisible';
|
|
12
11
|
import { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';
|
|
12
|
+
import { clickByKeyboardHandler } from '../../../lib/utils';
|
|
13
13
|
import { ImageBaseContext } from '../context';
|
|
14
14
|
import { validateOverlayIcon } from '../validators';
|
|
15
15
|
import { useNonInteractiveOverlayProps } from './hooks';
|
|
@@ -40,15 +40,15 @@ const ImageBaseOverlayInteractive = (_param)=>{
|
|
|
40
40
|
focusVisible,
|
|
41
41
|
mode: 'inside'
|
|
42
42
|
});
|
|
43
|
-
const keyboardHandlers = useKeyboard();
|
|
44
43
|
return /*#__PURE__*/ _jsxs(_Fragment, {
|
|
45
44
|
children: [
|
|
46
45
|
/*#__PURE__*/ _jsx("div", _object_spread_props(_object_spread(_object_spread_props(_object_spread({}, restProps), {
|
|
47
46
|
tabIndex: 0,
|
|
48
47
|
role: "button",
|
|
49
48
|
className: classNames("vkuiImageBaseOverlay--clickable", (focusVisible || overlayShown) && "vkuiImageBaseOverlay--visible", focusVisibleClassNames, className),
|
|
50
|
-
ref: getRootRef
|
|
51
|
-
|
|
49
|
+
ref: getRootRef,
|
|
50
|
+
onKeyDown: clickByKeyboardHandler
|
|
51
|
+
}), focusEvents), {
|
|
52
52
|
children: children
|
|
53
53
|
})),
|
|
54
54
|
process.env.NODE_ENV === 'development' && /*#__PURE__*/ _jsx(DevelopmentCheck, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';\nimport { useAppearance } from '../../../hooks/useAppearance';\nimport { useExternRef } from '../../../hooks/useExternRef';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport { clickByKeyboardHandler } from '../../../lib/utils';\nimport { ImageBaseContext } from '../context';\nimport { validateOverlayIcon } from '../validators';\nimport { useNonInteractiveOverlayProps } from './hooks';\nimport type {\n ImageBaseOverlayInteractiveProps,\n ImageBaseOverlayNonInteractiveProps,\n} from './types';\nimport styles from './ImageBaseOverlay.module.css';\n\nfunction DevelopmentCheck({ children }: Pick<ImageBaseOverlayInteractiveProps, 'children'>) {\n const { size } = React.useContext(ImageBaseContext);\n\n if (process.env.NODE_ENV === 'development') {\n if (children) {\n validateOverlayIcon(size, { name: 'children', value: children });\n }\n }\n\n return null;\n}\n\nexport type ImageBaseOverlayProps =\n | ImageBaseOverlayInteractiveProps\n | ImageBaseOverlayNonInteractiveProps;\n\nconst ImageBaseOverlayInteractive = ({\n children,\n className,\n getRootRef,\n disableInteractive,\n overlayShown,\n ...restProps\n}: ImageBaseOverlayInteractiveProps & { overlayShown?: boolean }) => {\n const { focusVisible, ...focusEvents } = useFocusVisible();\n const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: 'inside' });\n\n return (\n <>\n <div\n {...restProps}\n tabIndex={0}\n role=\"button\"\n className={classNames(\n styles['ImageBaseOverlay--clickable'],\n (focusVisible || overlayShown) && styles['ImageBaseOverlay--visible'],\n focusVisibleClassNames,\n className,\n )}\n ref={getRootRef}\n onKeyDown={clickByKeyboardHandler}\n {...focusEvents}\n >\n {children}\n </div>\n {process.env.NODE_ENV === 'development' && <DevelopmentCheck>{children}</DevelopmentCheck>}\n </>\n );\n};\n\nconst ImageBaseOverlayNonInteractive = ({\n className,\n getRootRef,\n disableInteractive,\n overlayShown: overlayShownProps,\n ...restProps\n}: ImageBaseOverlayNonInteractiveProps & { overlayShown?: boolean }) => {\n const rootRef = useExternRef(getRootRef);\n const { shown: overlayShown, onClick: onOverlayClick } = useNonInteractiveOverlayProps(rootRef);\n\n return (\n <div\n {...restProps}\n ref={rootRef}\n className={classNames(\n (overlayShown || overlayShownProps) && styles['ImageBaseOverlay--visible'],\n className,\n )}\n onClick={onOverlayClick}\n />\n );\n};\n\n/**\n * Оверлей над картинкой.\n */\nexport const ImageBaseOverlay: React.FC<ImageBaseOverlayProps> = ({\n className,\n theme: themeProp,\n visibility: visibilityProp,\n ...restProps\n}: ImageBaseOverlayProps) => {\n const appearance = useAppearance();\n const hasPointer = useAdaptivityHasPointer();\n const theme = themeProp ?? appearance;\n const visibility = visibilityProp ?? (hasPointer ? 'on-hover' : 'always');\n\n const commonClassNames = classNames(\n styles['ImageBaseOverlay'],\n theme === 'light' && styles['ImageBaseOverlay--theme-light'],\n theme === 'dark' && styles['ImageBaseOverlay--theme-dark'],\n className,\n );\n\n const commonProps = {\n className: commonClassNames,\n overlayShown: visibility === 'always',\n };\n\n // Не делаем деструктуризацию пропа, потому что Typescript не вывозит\n if (restProps.disableInteractive) {\n return <ImageBaseOverlayNonInteractive {...restProps} {...commonProps} />;\n }\n\n return <ImageBaseOverlayInteractive {...restProps} {...commonProps} />;\n};\n\nImageBaseOverlay.displayName = 'ImageBaseOverlay';\n"],"names":["React","classNames","useAdaptivityHasPointer","useAppearance","useExternRef","useFocusVisible","useFocusVisibleClassName","clickByKeyboardHandler","ImageBaseContext","validateOverlayIcon","useNonInteractiveOverlayProps","DevelopmentCheck","children","size","useContext","process","env","NODE_ENV","name","value","ImageBaseOverlayInteractive","className","getRootRef","disableInteractive","overlayShown","restProps","focusVisible","focusEvents","focusVisibleClassNames","mode","div","tabIndex","role","ref","onKeyDown","ImageBaseOverlayNonInteractive","overlayShownProps","rootRef","shown","onClick","onOverlayClick","ImageBaseOverlay","theme","themeProp","visibility","visibilityProp","appearance","hasPointer","commonClassNames","commonProps","displayName"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,uBAAuB,QAAQ,yCAAyC;AACjF,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,SAASC,eAAe,QAAQ,iCAAiC;AACjE,SAASC,wBAAwB,QAAQ,0CAA0C;AACnF,SAASC,sBAAsB,QAAQ,qBAAqB;AAC5D,SAASC,gBAAgB,QAAQ,aAAa;AAC9C,SAASC,mBAAmB,QAAQ,gBAAgB;AACpD,SAASC,6BAA6B,QAAQ,UAAU;AAOxD,SAASC,iBAAiB,EAAEC,QAAQ,EAAsD;IACxF,MAAM,EAAEC,IAAI,EAAE,GAAGb,MAAMc,UAAU,CAACN;IAElC,IAAIO,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIL,UAAU;YACZH,oBAAoBI,MAAM;gBAAEK,MAAM;gBAAYC,OAAOP;YAAS;QAChE;IACF;IAEA,OAAO;AACT;AAMA,MAAMQ,8BAA8B;QAAC,EACnCR,QAAQ,EACRS,SAAS,EACTC,UAAU,EACVC,kBAAkB,EAClBC,YAAY,EAEkD,WAD3DC;QALHb;QACAS;QACAC;QACAC;QACAC;;IAGA,MAAyCnB,mBAAAA,mBAAnC,EAAEqB,YAAY,EAAkB,GAAGrB,kBAAhBsB,yCAAgBtB;QAAjCqB;;IACR,MAAME,yBAAyBtB,yBAAyB;QAAEoB;QAAcG,MAAM;IAAS;IAEvF,qBACE;;0BACE,KAACC,mFACKL;gBACJM,UAAU;gBACVC,MAAK;gBACLX,WAAWpB,8CAET,AAACyB,CAAAA,gBAAgBF,YAAW,sCAC5BI,wBACAP;gBAEFY,KAAKX;gBACLY,WAAW3B;gBACPoB;0BAEHf;;YAEFG,QAAQC,GAAG,CAACC,QAAQ,KAAK,+BAAiB,KAACN;0BAAkBC;;;;AAGpE;AAEA,MAAMuB,iCAAiC;QAAC,EACtCd,SAAS,EACTC,UAAU,EACVC,kBAAkB,EAClBC,cAAcY,iBAAiB,EAEkC,WAD9DX;QAJHJ;QACAC;QACAC;QACAC;;IAGA,MAAMa,UAAUjC,aAAakB;IAC7B,MAAM,EAAEgB,OAAOd,YAAY,EAAEe,SAASC,cAAc,EAAE,GAAG9B,8BAA8B2B;IAEvF,qBACE,KAACP,+CACKL;QACJQ,KAAKI;QACLhB,WAAWpB,WACT,AAACuB,CAAAA,gBAAgBY,iBAAgB,sCACjCf;QAEFkB,SAASC;;AAGf;AAEA;;CAEC,GACD,OAAO,MAAMC,mBAAoD;QAAC,EAChEpB,SAAS,EACTqB,OAAOC,SAAS,EAChBC,YAAYC,cAAc,EAEJ,WADnBpB;QAHHJ;QACAqB;QACAE;;IAGA,MAAME,aAAa3C;IACnB,MAAM4C,aAAa7C;IACnB,MAAMwC,QAAQC,sBAAAA,uBAAAA,YAAaG;IAC3B,MAAMF,aAAaC,2BAAAA,4BAAAA,iBAAmBE,aAAa,aAAa;IAEhE,MAAMC,mBAAmB/C,mCAEvByC,UAAU,gDACVA,UAAU,8CACVrB;IAGF,MAAM4B,cAAc;QAClB5B,WAAW2B;QACXxB,cAAcoB,eAAe;IAC/B;IAEA,qEAAqE;IACrE,IAAInB,UAAUF,kBAAkB,EAAE;QAChC,qBAAO,KAACY,mDAAmCV,WAAewB;IAC5D;IAEA,qBAAO,KAAC7B,gDAAgCK,WAAewB;AACzD,EAAE;AAEFR,iBAAiBS,WAAW,GAAG"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { HasAlign, HasRef, HasRootRef } from '../../types';
|
|
3
3
|
import { FormFieldProps } from '../FormField/FormField';
|
|
4
|
-
export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement>, HasRootRef<HTMLDivElement>, HasAlign, FormFieldProps {
|
|
4
|
+
export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement>, HasRootRef<HTMLDivElement>, HasAlign, Omit<FormFieldProps, 'maxHeight'> {
|
|
5
5
|
}
|
|
6
6
|
/**
|
|
7
7
|
* @see https://vkcom.github.io/VKUI/#/Input
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AASnE,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,MAAM,CAAC,gBAAgB,CAAC,EACxB,UAAU,CAAC,cAAc,CAAC,EAC1B,QAAQ,EACR,cAAc;CAAG;
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AASnE,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,MAAM,CAAC,gBAAgB,CAAC,EACxB,UAAU,CAAC,cAAc,CAAC,EAC1B,QAAQ,EACR,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC;CAAG;AAExC;;GAEG;AACH,eAAO,MAAM,KAAK,qGAYf,UAAU,KAAG,KAAK,CAAC,SA+BrB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';\nimport styles from './Input.module.css';\n\nconst sizeYClassNames = {\n none: styles['Input--sizeY-none'],\n ['compact']: styles['Input--sizeY-compact'],\n};\n\nexport interface InputProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRef<HTMLInputElement>,\n HasRootRef<HTMLDivElement>,\n HasAlign,\n FormFieldProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Input\n */\nexport const Input = ({\n type = 'text',\n align = 'left',\n getRef,\n className,\n getRootRef,\n style,\n before,\n after,\n status,\n mode,\n ...restProps\n}: InputProps): React.ReactNode => {\n const { sizeY = 'none' } = useAdaptivity();\n\n return (\n <FormField\n style={style}\n className={classNames(\n styles['Input'],\n align === 'right' && styles['Input--align-right'],\n align === 'center' && styles['Input--align-center'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n before && styles['Input--hasBefore'],\n after && styles['Input--hasAfter'],\n className,\n )}\n getRootRef={getRootRef}\n before={before}\n after={after}\n disabled={restProps.disabled}\n mode={mode}\n status={status}\n >\n <UnstyledTextField\n {...restProps}\n as=\"input\"\n type={type}\n className={styles['Input__el']}\n getRootRef={getRef}\n />\n </FormField>\n );\n};\n"],"names":["React","classNames","useAdaptivity","FormField","UnstyledTextField","sizeYClassNames","none","Input","type","align","getRef","className","getRootRef","style","before","after","status","mode","restProps","sizeY","disabled","as"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,iBAAiB,QAAQ,yCAAyC;AAG3E,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AASA;;CAEC,GACD,OAAO,MAAMC,QAAQ;QAAC,EACpBC,OAAO,MAAM,EACbC,QAAQ,MAAM,EACdC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,KAAK,EACLC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EAEO,WADRC;QAVHV;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGjB;IAE3B,qBACE,KAACC;QACCU,OAAOA;QACPF,WAAWV,wBAETQ,UAAU,qCACVA,UAAU,uCACVU,UAAU,aAAad,eAAe,CAACc,MAAM,EAC7CL,kCACAC,gCACAJ;QAEFC,YAAYA;QACZE,QAAQA;QACRC,OAAOA;QACPK,UAAUF,UAAUE,QAAQ;QAC5BH,MAAMA;QACND,QAAQA;kBAER,cAAA,KAACZ,2DACKc;YACJG,IAAG;YACHb,MAAMA;YACNG,SAAS;YACTC,YAAYF;;;AAIpB,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';\nimport styles from './Input.module.css';\n\nconst sizeYClassNames = {\n none: styles['Input--sizeY-none'],\n ['compact']: styles['Input--sizeY-compact'],\n};\n\nexport interface InputProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRef<HTMLInputElement>,\n HasRootRef<HTMLDivElement>,\n HasAlign,\n Omit<FormFieldProps, 'maxHeight'> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Input\n */\nexport const Input = ({\n type = 'text',\n align = 'left',\n getRef,\n className,\n getRootRef,\n style,\n before,\n after,\n status,\n mode,\n ...restProps\n}: InputProps): React.ReactNode => {\n const { sizeY = 'none' } = useAdaptivity();\n\n return (\n <FormField\n style={style}\n className={classNames(\n styles['Input'],\n align === 'right' && styles['Input--align-right'],\n align === 'center' && styles['Input--align-center'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n before && styles['Input--hasBefore'],\n after && styles['Input--hasAfter'],\n className,\n )}\n getRootRef={getRootRef}\n before={before}\n after={after}\n disabled={restProps.disabled}\n mode={mode}\n status={status}\n >\n <UnstyledTextField\n {...restProps}\n as=\"input\"\n type={type}\n className={styles['Input__el']}\n getRootRef={getRef}\n />\n </FormField>\n );\n};\n"],"names":["React","classNames","useAdaptivity","FormField","UnstyledTextField","sizeYClassNames","none","Input","type","align","getRef","className","getRootRef","style","before","after","status","mode","restProps","sizeY","disabled","as"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,iBAAiB,QAAQ,yCAAyC;AAG3E,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AASA;;CAEC,GACD,OAAO,MAAMC,QAAQ;QAAC,EACpBC,OAAO,MAAM,EACbC,QAAQ,MAAM,EACdC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,KAAK,EACLC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EAEO,WADRC;QAVHV;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGjB;IAE3B,qBACE,KAACC;QACCU,OAAOA;QACPF,WAAWV,wBAETQ,UAAU,qCACVA,UAAU,uCACVU,UAAU,aAAad,eAAe,CAACc,MAAM,EAC7CL,kCACAC,gCACAJ;QAEFC,YAAYA;QACZE,QAAQA;QACRC,OAAOA;QACPK,UAAUF,UAAUE,QAAQ;QAC5BH,MAAMA;QACND,QAAQA;kBAER,cAAA,KAACZ,2DACKc;YACJG,IAAG;YACHb,MAAMA;YACNG,SAAS;YACTC,YAAYF;;;AAIpB,EAAE"}
|
|
@@ -17,7 +17,7 @@ export type PopoverOnShownChange = OnShownChange;
|
|
|
17
17
|
* @public
|
|
18
18
|
*/
|
|
19
19
|
export type PopoverContentRenderProp = FloatingContentRenderProp;
|
|
20
|
-
type AllowedFloatingComponentProps = Pick<FloatingComponentProps, 'arrow' | 'arrowHeight' | 'arrowPadding' | 'placement' | 'onPlacementChange' | 'trigger' | 'content' | 'hoverDelay' | 'closeAfterClick' | 'offsetByMainAxis' | 'offsetByCrossAxis' | 'defaultShown' | 'shown' | 'onShownChange' | 'usePortal' | 'sameWidth' | 'hideWhenReferenceHidden' | 'disabled' | 'disableInteractive' | 'disableCloseOnClickOutside' | 'disableCloseOnEscKey' | 'autoFocus' | 'restoreFocus' | 'children' | 'zIndex' | 'disableFlipMiddleware' | 'customMiddlewares'>;
|
|
20
|
+
type AllowedFloatingComponentProps = Pick<FloatingComponentProps, 'arrow' | 'arrowHeight' | 'arrowPadding' | 'placement' | 'onPlacementChange' | 'trigger' | 'content' | 'hoverDelay' | 'closeAfterClick' | 'offsetByMainAxis' | 'offsetByCrossAxis' | 'defaultShown' | 'shown' | 'onShownChange' | 'onShownChanged' | 'usePortal' | 'sameWidth' | 'hideWhenReferenceHidden' | 'disabled' | 'disableInteractive' | 'disableCloseOnClickOutside' | 'disableCloseOnEscKey' | 'autoFocus' | 'restoreFocus' | 'children' | 'zIndex' | 'disableFlipMiddleware' | 'customMiddlewares'>;
|
|
21
21
|
/**
|
|
22
22
|
* @public
|
|
23
23
|
*/
|
|
@@ -63,6 +63,6 @@ export interface PopoverProps extends AllowedFloatingComponentProps, Omit<HTMLAt
|
|
|
63
63
|
/**
|
|
64
64
|
* @see https://vkcom.github.io/VKUI/#/Popover
|
|
65
65
|
*/
|
|
66
|
-
export declare const Popover: ({ arrow: withArrow, arrowHeight, arrowPadding, placement: expectedPlacement, onPlacementChange, disableFlipMiddleware, trigger, content, hoverDelay, closeAfterClick, offsetByMainAxis, offsetByCrossAxis, sameWidth, hideWhenReferenceHidden, disabled, disableInteractive, disableCloseOnClickOutside, disableCloseOnEscKey, keepMounted, customMiddlewares, defaultShown, shown: shownProp, onShownChange, usePortal, arrowProps, ArrowIcon, autoFocus, restoreFocus, className, children, noStyling, zIndex, role, ...restPopoverProps }: PopoverProps) => React.ReactNode;
|
|
66
|
+
export declare const Popover: ({ arrow: withArrow, arrowHeight, arrowPadding, placement: expectedPlacement, onPlacementChange, disableFlipMiddleware, trigger, content, hoverDelay, closeAfterClick, offsetByMainAxis, offsetByCrossAxis, sameWidth, hideWhenReferenceHidden, disabled, disableInteractive, disableCloseOnClickOutside, disableCloseOnEscKey, keepMounted, customMiddlewares, defaultShown, shown: shownProp, onShownChange, onShownChanged, usePortal, arrowProps, ArrowIcon, autoFocus, restoreFocus, className, children, noStyling, zIndex, role, ...restPopoverProps }: PopoverProps) => React.ReactNode;
|
|
67
67
|
export {};
|
|
68
68
|
//# sourceMappingURL=Popover.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EACL,KAAK,sBAAsB,EAC3B,KAAK,yBAAyB,EAC9B,KAAK,aAAa,EAInB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAO7D,OAAO,EAEL,KAAK,kBAAkB,IAAI,yBAAyB,EACrD,MAAM,gCAAgC,CAAC;AAIxC;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,yBAAyB,EACzB,YAAY,GAAG,QAAQ,GAAG,WAAW,GAAG,MAAM,CAC/C,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG,aAAa,CAAC;AAEjD;;;GAGG;AACH,MAAM,MAAM,wBAAwB,GAAG,yBAAyB,CAAC;AAEjE,KAAK,6BAA6B,GAAG,IAAI,CACvC,sBAAsB,EACpB,OAAO,GACP,aAAa,GACb,cAAc,GACd,WAAW,GACX,mBAAmB,GACnB,SAAS,GACT,SAAS,GACT,YAAY,GACZ,iBAAiB,GACjB,kBAAkB,GAClB,mBAAmB,GACnB,cAAc,GACd,OAAO,GACP,eAAe,GACf,WAAW,GACX,WAAW,GACX,yBAAyB,GACzB,UAAU,GACV,oBAAoB,GACpB,4BAA4B,GAC5B,sBAAsB,GACtB,WAAW,GACX,cAAc,GACd,UAAU,GACV,QAAQ,GACR,uBAAuB,GACvB,mBAAmB,CACtB,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,YACf,SAAQ,6BAA6B,EACnC,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,MAAM,sBAAsB,CAAC;IAC/E;;;;;;;;;;;;;OAaG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC;IAC9C;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EACL,KAAK,sBAAsB,EAC3B,KAAK,yBAAyB,EAC9B,KAAK,aAAa,EAInB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAO7D,OAAO,EAEL,KAAK,kBAAkB,IAAI,yBAAyB,EACrD,MAAM,gCAAgC,CAAC;AAIxC;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,yBAAyB,EACzB,YAAY,GAAG,QAAQ,GAAG,WAAW,GAAG,MAAM,CAC/C,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG,aAAa,CAAC;AAEjD;;;GAGG;AACH,MAAM,MAAM,wBAAwB,GAAG,yBAAyB,CAAC;AAEjE,KAAK,6BAA6B,GAAG,IAAI,CACvC,sBAAsB,EACpB,OAAO,GACP,aAAa,GACb,cAAc,GACd,WAAW,GACX,mBAAmB,GACnB,SAAS,GACT,SAAS,GACT,YAAY,GACZ,iBAAiB,GACjB,kBAAkB,GAClB,mBAAmB,GACnB,cAAc,GACd,OAAO,GACP,eAAe,GACf,gBAAgB,GAChB,WAAW,GACX,WAAW,GACX,yBAAyB,GACzB,UAAU,GACV,oBAAoB,GACpB,4BAA4B,GAC5B,sBAAsB,GACtB,WAAW,GACX,cAAc,GACd,UAAU,GACV,QAAQ,GACR,uBAAuB,GACvB,mBAAmB,CACtB,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,YACf,SAAQ,6BAA6B,EACnC,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,MAAM,sBAAsB,CAAC;IAC/E;;;;;;;;;;;;;OAaG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC;IAC9C;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,iiBA8CjB,YAAY,KAAG,KAAK,CAAC,SA6GvB,CAAC"}
|
|
@@ -18,7 +18,7 @@ import { FocusTrap } from '../FocusTrap/FocusTrap';
|
|
|
18
18
|
var { // UsePopoverProps
|
|
19
19
|
arrow: withArrow, arrowHeight = DEFAULT_ARROW_HEIGHT, arrowPadding = DEFAULT_ARROW_PADDING, placement: expectedPlacement = 'bottom-start', onPlacementChange, disableFlipMiddleware = false, trigger = 'click', content, hoverDelay = 150, closeAfterClick, offsetByMainAxis = 8, offsetByCrossAxis = 0, sameWidth, hideWhenReferenceHidden, disabled, disableInteractive, disableCloseOnClickOutside, disableCloseOnEscKey, keepMounted = false, customMiddlewares, // uncontrolled
|
|
20
20
|
defaultShown = false, // controlled
|
|
21
|
-
shown: shownProp, onShownChange, // Для AppRootPortal
|
|
21
|
+
shown: shownProp, onShownChange, onShownChanged, // Для AppRootPortal
|
|
22
22
|
usePortal = true, // Для FloatingArrow
|
|
23
23
|
arrowProps, ArrowIcon = DefaultIcon, // FocusTrapProps
|
|
24
24
|
autoFocus = true, restoreFocus = true, className, children, noStyling = false, zIndex = 'var(--vkui--z_index_popout)', // a11y
|
|
@@ -46,6 +46,7 @@ import { FocusTrap } from '../FocusTrap/FocusTrap';
|
|
|
46
46
|
"defaultShown",
|
|
47
47
|
"shown",
|
|
48
48
|
"onShownChange",
|
|
49
|
+
"onShownChanged",
|
|
49
50
|
"usePortal",
|
|
50
51
|
"arrowProps",
|
|
51
52
|
"ArrowIcon",
|
|
@@ -83,7 +84,8 @@ import { FocusTrap } from '../FocusTrap/FocusTrap';
|
|
|
83
84
|
disableCloseOnEscKey,
|
|
84
85
|
defaultShown,
|
|
85
86
|
shown: shownProp,
|
|
86
|
-
onShownChange
|
|
87
|
+
onShownChange,
|
|
88
|
+
onShownChanged
|
|
87
89
|
});
|
|
88
90
|
usePlacementChangeCallback(expectedPlacement, resolvedPlacement, onPlacementChange);
|
|
89
91
|
const [, child] = usePatchChildren(children, injectAriaExpandedPropByRole(referenceProps, shown, role), refs.setReference);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePatchChildren } from '../../hooks/usePatchChildren';\nimport { injectAriaExpandedPropByRole } from '../../lib/accessibility';\nimport { animationFadeClassNames, transformOriginClassNames } from '../../lib/animation';\nimport {\n type FloatingComponentProps,\n type FloatingContentRenderProp,\n type OnShownChange,\n useFloatingMiddlewaresBootstrap,\n useFloatingWithInteractions,\n usePlacementChangeCallback,\n} from '../../lib/floating';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport {\n DEFAULT_ARROW_HEIGHT,\n DEFAULT_ARROW_PADDING,\n DefaultIcon,\n} from '../FloatingArrow/DefaultIcon';\nimport {\n FloatingArrow,\n type FloatingArrowProps as FloatingArrowPropsPrivate,\n} from '../FloatingArrow/FloatingArrow';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport styles from './Popover.module.css';\n\n/**\n * @alias\n * @public\n */\nexport type PopoverArrowProps = Omit<\n FloatingArrowPropsPrivate,\n 'getRootRef' | 'coords' | 'placement' | 'Icon'\n>;\n\n/**\n * @alias\n * @public\n */\nexport type PopoverOnShownChange = OnShownChange;\n\n/**\n * @alias\n * @public\n */\nexport type PopoverContentRenderProp = FloatingContentRenderProp;\n\ntype AllowedFloatingComponentProps = Pick<\n FloatingComponentProps,\n | 'arrow'\n | 'arrowHeight'\n | 'arrowPadding'\n | 'placement'\n | 'onPlacementChange'\n | 'trigger'\n | 'content'\n | 'hoverDelay'\n | 'closeAfterClick'\n | 'offsetByMainAxis'\n | 'offsetByCrossAxis'\n | 'defaultShown'\n | 'shown'\n | 'onShownChange'\n | 'usePortal'\n | 'sameWidth'\n | 'hideWhenReferenceHidden'\n | 'disabled'\n | 'disableInteractive'\n | 'disableCloseOnClickOutside'\n | 'disableCloseOnEscKey'\n | 'autoFocus'\n | 'restoreFocus'\n | 'children'\n | 'zIndex'\n | 'disableFlipMiddleware'\n | 'customMiddlewares'\n>;\n\n/**\n * @public\n */\nexport interface PopoverProps\n extends AllowedFloatingComponentProps,\n Omit<HTMLAttributesWithRootRef<HTMLDivElement>, keyof FloatingComponentProps> {\n /**\n * Отключает у всплывающего элемента стилизацию по умолчанию.\n *\n * У `content`:\n * - _background_\n * - _border-radius_\n * - _box-shadow_\n *\n * У `arrow`:\n * - _color_\n *\n * Используется в случае, если необходимо стилизовать по своему. Для `arrow` _color_ можно\n * определить через в `arrowProps.iconClassName` или `arrowProps.iconStyle`.\n */\n noStyling?: boolean;\n /**\n * Позволяет набросить на стрелку пользовательские атрибуты.\n */\n arrowProps?: PopoverArrowProps;\n /**\n * Пользовательская SVG иконка.\n *\n * Требования:\n *\n * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n * растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n * (см. https://github.com/VKCOM/VKUI/pull/4496).\n * 3. Передайте высоту иконки в параметр `arrowHeight`. В значении высоты можно исключить хак с `1px` из п.2.\n * 4. Убедитесь, что компонент принимает все валидные для SVG параметры.\n * 5. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n */\n ArrowIcon?: FloatingArrowPropsPrivate['Icon'];\n /**\n * Используется для того, чтобы не удалять поповер из DOM дерева при скрытии.\n */\n keepMounted?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({\n // UsePopoverProps\n arrow: withArrow,\n arrowHeight = DEFAULT_ARROW_HEIGHT,\n arrowPadding = DEFAULT_ARROW_PADDING,\n placement: expectedPlacement = 'bottom-start',\n onPlacementChange,\n disableFlipMiddleware = false,\n trigger = 'click',\n content,\n hoverDelay = 150,\n closeAfterClick,\n offsetByMainAxis = 8,\n offsetByCrossAxis = 0,\n sameWidth,\n hideWhenReferenceHidden,\n disabled,\n disableInteractive,\n disableCloseOnClickOutside,\n disableCloseOnEscKey,\n keepMounted = false,\n customMiddlewares,\n // uncontrolled\n defaultShown = false,\n // controlled\n shown: shownProp,\n onShownChange,\n\n // Для AppRootPortal\n usePortal = true,\n\n // Для FloatingArrow\n arrowProps,\n ArrowIcon = DefaultIcon,\n\n // FocusTrapProps\n autoFocus = true,\n restoreFocus = true,\n className,\n children,\n noStyling = false,\n zIndex = 'var(--vkui--z_index_popout)',\n // a11y\n role = 'dialog',\n ...restPopoverProps\n}: PopoverProps): React.ReactNode => {\n const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({\n arrow: withArrow,\n arrowRef,\n arrowHeight,\n arrowPadding,\n placement: expectedPlacement,\n offsetByMainAxis,\n offsetByCrossAxis,\n sameWidth,\n hideWhenReferenceHidden,\n disableFlipMiddleware,\n customMiddlewares,\n });\n const {\n placement: resolvedPlacement,\n shown,\n willBeHide,\n refs,\n referenceProps,\n floatingProps,\n middlewareData,\n onClose,\n onRestoreFocus,\n onEscapeKeyDown,\n } = useFloatingWithInteractions({\n middlewares,\n placement: strictPlacement,\n trigger,\n hoverDelay,\n closeAfterClick,\n disabled,\n disableInteractive,\n disableCloseOnClickOutside,\n disableCloseOnEscKey,\n defaultShown,\n shown: shownProp,\n onShownChange,\n });\n\n usePlacementChangeCallback(expectedPlacement, resolvedPlacement, onPlacementChange);\n\n const [, child] = usePatchChildren<HTMLDivElement>(\n children,\n injectAriaExpandedPropByRole(referenceProps, shown, role),\n refs.setReference,\n );\n\n let popover: React.ReactNode = null;\n if (shown || keepMounted) {\n const hidden = keepMounted && !shown;\n if (!hidden) {\n floatingProps.style.zIndex = String(zIndex);\n }\n\n let arrow: React.ReactElement | null = null;\n if (withArrow) {\n const { arrow: arrowCoords } = middlewareData;\n arrow = (\n <FloatingArrow\n iconClassName={noStyling ? undefined : styles['Popover__arrow']}\n {...arrowProps}\n coords={arrowCoords}\n placement={resolvedPlacement}\n getRootRef={setArrowRef}\n Icon={ArrowIcon}\n />\n );\n }\n\n popover = (\n <AppRootPortal usePortal={usePortal}>\n <div\n ref={refs.setFloating}\n className={classNames(styles['Popover'], hidden && styles['Popover--hidden'])}\n {...floatingProps}\n >\n <FocusTrap\n {...restPopoverProps}\n role={role}\n className={classNames(\n styles['Popover__in'],\n noStyling ? undefined : styles['Popover__in--withStyling'],\n willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in,\n transformOriginClassNames[resolvedPlacement],\n className,\n )}\n mount={!hidden}\n disabled={hidden}\n autoFocus={disableInteractive ? false : autoFocus}\n restoreFocus={restoreFocus ? onRestoreFocus : false}\n onClose={onEscapeKeyDown}\n >\n {arrow}\n {typeof content === 'function' ? content({ onClose }) : content}\n </FocusTrap>\n </div>\n </AppRootPortal>\n );\n }\n\n return (\n <React.Fragment>\n {child}\n {popover}\n </React.Fragment>\n );\n};\n"],"names":["React","classNames","usePatchChildren","injectAriaExpandedPropByRole","animationFadeClassNames","transformOriginClassNames","useFloatingMiddlewaresBootstrap","useFloatingWithInteractions","usePlacementChangeCallback","AppRootPortal","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DefaultIcon","FloatingArrow","FocusTrap","Popover","arrow","withArrow","arrowHeight","arrowPadding","placement","expectedPlacement","onPlacementChange","disableFlipMiddleware","trigger","content","hoverDelay","closeAfterClick","offsetByMainAxis","offsetByCrossAxis","sameWidth","hideWhenReferenceHidden","disabled","disableInteractive","disableCloseOnClickOutside","disableCloseOnEscKey","keepMounted","customMiddlewares","defaultShown","shown","shownProp","onShownChange","usePortal","arrowProps","ArrowIcon","autoFocus","restoreFocus","className","children","noStyling","zIndex","role","restPopoverProps","arrowRef","setArrowRef","useState","middlewares","strictPlacement","resolvedPlacement","willBeHide","refs","referenceProps","floatingProps","middlewareData","onClose","onRestoreFocus","onEscapeKeyDown","child","setReference","popover","hidden","style","String","arrowCoords","iconClassName","undefined","coords","getRootRef","Icon","div","ref","setFloating","out","in","mount","Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePatchChildren } from '../../hooks/usePatchChildren';\nimport { injectAriaExpandedPropByRole } from '../../lib/accessibility';\nimport { animationFadeClassNames, transformOriginClassNames } from '../../lib/animation';\nimport {\n type FloatingComponentProps,\n type FloatingContentRenderProp,\n type OnShownChange,\n useFloatingMiddlewaresBootstrap,\n useFloatingWithInteractions,\n usePlacementChangeCallback,\n} from '../../lib/floating';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport {\n DEFAULT_ARROW_HEIGHT,\n DEFAULT_ARROW_PADDING,\n DefaultIcon,\n} from '../FloatingArrow/DefaultIcon';\nimport {\n FloatingArrow,\n type FloatingArrowProps as FloatingArrowPropsPrivate,\n} from '../FloatingArrow/FloatingArrow';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport styles from './Popover.module.css';\n\n/**\n * @alias\n * @public\n */\nexport type PopoverArrowProps = Omit<\n FloatingArrowPropsPrivate,\n 'getRootRef' | 'coords' | 'placement' | 'Icon'\n>;\n\n/**\n * @alias\n * @public\n */\nexport type PopoverOnShownChange = OnShownChange;\n\n/**\n * @alias\n * @public\n */\nexport type PopoverContentRenderProp = FloatingContentRenderProp;\n\ntype AllowedFloatingComponentProps = Pick<\n FloatingComponentProps,\n | 'arrow'\n | 'arrowHeight'\n | 'arrowPadding'\n | 'placement'\n | 'onPlacementChange'\n | 'trigger'\n | 'content'\n | 'hoverDelay'\n | 'closeAfterClick'\n | 'offsetByMainAxis'\n | 'offsetByCrossAxis'\n | 'defaultShown'\n | 'shown'\n | 'onShownChange'\n | 'onShownChanged'\n | 'usePortal'\n | 'sameWidth'\n | 'hideWhenReferenceHidden'\n | 'disabled'\n | 'disableInteractive'\n | 'disableCloseOnClickOutside'\n | 'disableCloseOnEscKey'\n | 'autoFocus'\n | 'restoreFocus'\n | 'children'\n | 'zIndex'\n | 'disableFlipMiddleware'\n | 'customMiddlewares'\n>;\n\n/**\n * @public\n */\nexport interface PopoverProps\n extends AllowedFloatingComponentProps,\n Omit<HTMLAttributesWithRootRef<HTMLDivElement>, keyof FloatingComponentProps> {\n /**\n * Отключает у всплывающего элемента стилизацию по умолчанию.\n *\n * У `content`:\n * - _background_\n * - _border-radius_\n * - _box-shadow_\n *\n * У `arrow`:\n * - _color_\n *\n * Используется в случае, если необходимо стилизовать по своему. Для `arrow` _color_ можно\n * определить через в `arrowProps.iconClassName` или `arrowProps.iconStyle`.\n */\n noStyling?: boolean;\n /**\n * Позволяет набросить на стрелку пользовательские атрибуты.\n */\n arrowProps?: PopoverArrowProps;\n /**\n * Пользовательская SVG иконка.\n *\n * Требования:\n *\n * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n * растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n * (см. https://github.com/VKCOM/VKUI/pull/4496).\n * 3. Передайте высоту иконки в параметр `arrowHeight`. В значении высоты можно исключить хак с `1px` из п.2.\n * 4. Убедитесь, что компонент принимает все валидные для SVG параметры.\n * 5. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n */\n ArrowIcon?: FloatingArrowPropsPrivate['Icon'];\n /**\n * Используется для того, чтобы не удалять поповер из DOM дерева при скрытии.\n */\n keepMounted?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({\n // UsePopoverProps\n arrow: withArrow,\n arrowHeight = DEFAULT_ARROW_HEIGHT,\n arrowPadding = DEFAULT_ARROW_PADDING,\n placement: expectedPlacement = 'bottom-start',\n onPlacementChange,\n disableFlipMiddleware = false,\n trigger = 'click',\n content,\n hoverDelay = 150,\n closeAfterClick,\n offsetByMainAxis = 8,\n offsetByCrossAxis = 0,\n sameWidth,\n hideWhenReferenceHidden,\n disabled,\n disableInteractive,\n disableCloseOnClickOutside,\n disableCloseOnEscKey,\n keepMounted = false,\n customMiddlewares,\n // uncontrolled\n defaultShown = false,\n // controlled\n shown: shownProp,\n onShownChange,\n onShownChanged,\n\n // Для AppRootPortal\n usePortal = true,\n\n // Для FloatingArrow\n arrowProps,\n ArrowIcon = DefaultIcon,\n\n // FocusTrapProps\n autoFocus = true,\n restoreFocus = true,\n className,\n children,\n noStyling = false,\n zIndex = 'var(--vkui--z_index_popout)',\n // a11y\n role = 'dialog',\n ...restPopoverProps\n}: PopoverProps): React.ReactNode => {\n const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({\n arrow: withArrow,\n arrowRef,\n arrowHeight,\n arrowPadding,\n placement: expectedPlacement,\n offsetByMainAxis,\n offsetByCrossAxis,\n sameWidth,\n hideWhenReferenceHidden,\n disableFlipMiddleware,\n customMiddlewares,\n });\n const {\n placement: resolvedPlacement,\n shown,\n willBeHide,\n refs,\n referenceProps,\n floatingProps,\n middlewareData,\n onClose,\n onRestoreFocus,\n onEscapeKeyDown,\n } = useFloatingWithInteractions({\n middlewares,\n placement: strictPlacement,\n trigger,\n hoverDelay,\n closeAfterClick,\n disabled,\n disableInteractive,\n disableCloseOnClickOutside,\n disableCloseOnEscKey,\n defaultShown,\n shown: shownProp,\n onShownChange,\n onShownChanged,\n });\n\n usePlacementChangeCallback(expectedPlacement, resolvedPlacement, onPlacementChange);\n\n const [, child] = usePatchChildren<HTMLDivElement>(\n children,\n injectAriaExpandedPropByRole(referenceProps, shown, role),\n refs.setReference,\n );\n\n let popover: React.ReactNode = null;\n if (shown || keepMounted) {\n const hidden = keepMounted && !shown;\n if (!hidden) {\n floatingProps.style.zIndex = String(zIndex);\n }\n\n let arrow: React.ReactElement | null = null;\n if (withArrow) {\n const { arrow: arrowCoords } = middlewareData;\n arrow = (\n <FloatingArrow\n iconClassName={noStyling ? undefined : styles['Popover__arrow']}\n {...arrowProps}\n coords={arrowCoords}\n placement={resolvedPlacement}\n getRootRef={setArrowRef}\n Icon={ArrowIcon}\n />\n );\n }\n\n popover = (\n <AppRootPortal usePortal={usePortal}>\n <div\n ref={refs.setFloating}\n className={classNames(styles['Popover'], hidden && styles['Popover--hidden'])}\n {...floatingProps}\n >\n <FocusTrap\n {...restPopoverProps}\n role={role}\n className={classNames(\n styles['Popover__in'],\n noStyling ? undefined : styles['Popover__in--withStyling'],\n willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in,\n transformOriginClassNames[resolvedPlacement],\n className,\n )}\n mount={!hidden}\n disabled={hidden}\n autoFocus={disableInteractive ? false : autoFocus}\n restoreFocus={restoreFocus ? onRestoreFocus : false}\n onClose={onEscapeKeyDown}\n >\n {arrow}\n {typeof content === 'function' ? content({ onClose }) : content}\n </FocusTrap>\n </div>\n </AppRootPortal>\n );\n }\n\n return (\n <React.Fragment>\n {child}\n {popover}\n </React.Fragment>\n );\n};\n"],"names":["React","classNames","usePatchChildren","injectAriaExpandedPropByRole","animationFadeClassNames","transformOriginClassNames","useFloatingMiddlewaresBootstrap","useFloatingWithInteractions","usePlacementChangeCallback","AppRootPortal","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DefaultIcon","FloatingArrow","FocusTrap","Popover","arrow","withArrow","arrowHeight","arrowPadding","placement","expectedPlacement","onPlacementChange","disableFlipMiddleware","trigger","content","hoverDelay","closeAfterClick","offsetByMainAxis","offsetByCrossAxis","sameWidth","hideWhenReferenceHidden","disabled","disableInteractive","disableCloseOnClickOutside","disableCloseOnEscKey","keepMounted","customMiddlewares","defaultShown","shown","shownProp","onShownChange","onShownChanged","usePortal","arrowProps","ArrowIcon","autoFocus","restoreFocus","className","children","noStyling","zIndex","role","restPopoverProps","arrowRef","setArrowRef","useState","middlewares","strictPlacement","resolvedPlacement","willBeHide","refs","referenceProps","floatingProps","middlewareData","onClose","onRestoreFocus","onEscapeKeyDown","child","setReference","popover","hidden","style","String","arrowCoords","iconClassName","undefined","coords","getRootRef","Icon","div","ref","setFloating","out","in","mount","Fragment"],"mappings":"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"}
|
|
@@ -1,9 +1,28 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { HTMLAttributesWithRootRef } from '../../types';
|
|
1
3
|
import { SpinnerProps } from '../Spinner/Spinner';
|
|
2
4
|
export interface ScreenSpinnerProps extends SpinnerProps {
|
|
3
5
|
state?: 'loading' | 'cancelable' | 'done' | 'error';
|
|
6
|
+
cancelLabel?: string;
|
|
4
7
|
}
|
|
8
|
+
export interface ScreenSpinnerContextProps {
|
|
9
|
+
state: NonNullable<ScreenSpinnerProps['state']>;
|
|
10
|
+
}
|
|
11
|
+
export declare const ScreenSpinnerContext: React.Context<ScreenSpinnerContextProps>;
|
|
12
|
+
declare const ScreenSpinnerLoader: React.FC<SpinnerProps>;
|
|
13
|
+
type ScreenSpinnerSwapIconProps = HTMLAttributesWithRootRef<HTMLElement> & {
|
|
14
|
+
cancelLabel?: ScreenSpinnerProps['cancelLabel'];
|
|
15
|
+
};
|
|
16
|
+
declare const ScreenSpinnerSwapIcon: React.FC<ScreenSpinnerSwapIconProps>;
|
|
17
|
+
type ScreenSpinnerContainerProps = HTMLAttributesWithRootRef<HTMLSpanElement> & Pick<ScreenSpinnerProps, 'state'>;
|
|
18
|
+
declare const ScreenSpinnerContainer: React.FC<ScreenSpinnerContainerProps>;
|
|
5
19
|
/**
|
|
6
20
|
* @see https://vkcom.github.io/VKUI/#/ScreenSpinner
|
|
7
21
|
*/
|
|
8
|
-
export declare const ScreenSpinner:
|
|
22
|
+
export declare const ScreenSpinner: React.FC<ScreenSpinnerProps> & {
|
|
23
|
+
Container: typeof ScreenSpinnerContainer;
|
|
24
|
+
Loader: typeof ScreenSpinnerLoader;
|
|
25
|
+
SwapIcon: typeof ScreenSpinnerSwapIcon;
|
|
26
|
+
};
|
|
27
|
+
export {};
|
|
9
28
|
//# sourceMappingURL=ScreenSpinner.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScreenSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ScreenSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,OAAO,EAAW,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAK3D,MAAM,WAAW,kBAAmB,SAAQ,YAAY;IACtD,KAAK,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC;CACjD;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,OAAO,CAAC,yBAAyB,CAGtE,CAAC;AAQL,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAU/C,CAAC;AAIF,KAAK,0BAA0B,GAAG,yBAAyB,CAAC,WAAW,CAAC,GAAG;IACzE,WAAW,CAAC,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;CACjD,CAAC;AA2BF,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAqB/D,CAAC;AAIF,KAAK,2BAA2B,GAAG,yBAAyB,CAAC,eAAe,CAAC,GAC3E,IAAI,CAAC,kBAAkB,EAAE,OAAO,CAAC,CAAC;AAEpC,QAAA,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAejE,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,GAAG;IACzD,SAAS,EAAE,OAAO,sBAAsB,CAAC;IACzC,MAAM,EAAE,OAAO,mBAAmB,CAAC;IACnC,QAAQ,EAAE,OAAO,qBAAqB,CAAC;CAmBxC,CAAC"}
|
|
@@ -2,53 +2,128 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
|
|
|
2
2
|
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
|
|
3
3
|
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
|
|
4
4
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
|
+
import * as React from 'react';
|
|
5
6
|
import { Icon24Cancel } from '@vkontakte/icons';
|
|
6
7
|
import { classNames } from '@vkontakte/vkjs';
|
|
8
|
+
import { mergeCalls } from '../../lib/mergeCalls';
|
|
9
|
+
import { clickByKeyboardHandler } from '../../lib/utils';
|
|
7
10
|
import { useScrollLock } from '../AppRoot/ScrollContext';
|
|
8
11
|
import { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';
|
|
12
|
+
import { RootComponent } from '../RootComponent/RootComponent';
|
|
9
13
|
import { Spinner } from '../Spinner/Spinner';
|
|
10
14
|
import { Icon48CancelCircle } from './Icon48CancelCircle';
|
|
11
15
|
import { Icon48DoneOutline } from './Icon48DoneOutline';
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
export const ScreenSpinnerContext = /*#__PURE__*/ React.createContext({
|
|
17
|
+
state: 'loading'
|
|
18
|
+
});
|
|
19
|
+
const stateClassNames = {
|
|
20
|
+
cancelable: "vkuiScreenSpinner--state-cancelable",
|
|
21
|
+
done: "vkuiScreenSpinner--state-done",
|
|
22
|
+
error: "vkuiScreenSpinner--state-error"
|
|
23
|
+
};
|
|
24
|
+
const ScreenSpinnerLoader = (_param)=>{
|
|
25
|
+
var { size = 'large', children = 'Пожалуйста, подождите...' } = _param, restProps = _object_without_properties(_param, [
|
|
19
26
|
"size",
|
|
20
|
-
"onClick",
|
|
21
27
|
"children"
|
|
22
28
|
]);
|
|
23
|
-
|
|
29
|
+
return /*#__PURE__*/ _jsx(Spinner, _object_spread_props(_object_spread({
|
|
30
|
+
className: "vkuiScreenSpinner__spinner",
|
|
31
|
+
size: size
|
|
32
|
+
}, restProps), {
|
|
33
|
+
children: children
|
|
34
|
+
}));
|
|
35
|
+
};
|
|
36
|
+
ScreenSpinnerLoader.displayName = 'ScreenSpinner.Loader';
|
|
37
|
+
const ScreenSpinnerCancelIcon = (_param)=>{
|
|
38
|
+
var { onKeyDown, 'aria-label': ariaLabel = 'Отменить' } = _param, restProps = _object_without_properties(_param, [
|
|
39
|
+
"onKeyDown",
|
|
40
|
+
'aria-label'
|
|
41
|
+
]);
|
|
42
|
+
const handlers = mergeCalls({
|
|
43
|
+
onKeyDown: clickByKeyboardHandler
|
|
44
|
+
}, {
|
|
45
|
+
onKeyDown
|
|
46
|
+
});
|
|
47
|
+
let clickableProps = _object_spread_props(_object_spread({}, handlers), {
|
|
48
|
+
'tabIndex': 0,
|
|
49
|
+
'role': 'button',
|
|
50
|
+
'aria-label': ariaLabel
|
|
51
|
+
});
|
|
52
|
+
return /*#__PURE__*/ _jsx(RootComponent, _object_spread_props(_object_spread({
|
|
53
|
+
baseClassName: "vkuiScreenSpinner__icon"
|
|
54
|
+
}, clickableProps, restProps), {
|
|
55
|
+
children: /*#__PURE__*/ _jsx(Icon24Cancel, {})
|
|
56
|
+
}));
|
|
57
|
+
};
|
|
58
|
+
const ScreenSpinnerSwapIcon = (_param)=>{
|
|
59
|
+
var { cancelLabel } = _param, restProps = _object_without_properties(_param, [
|
|
60
|
+
"cancelLabel"
|
|
61
|
+
]);
|
|
62
|
+
const { state } = React.useContext(ScreenSpinnerContext);
|
|
63
|
+
if (state === 'cancelable') {
|
|
64
|
+
return /*#__PURE__*/ _jsx(ScreenSpinnerCancelIcon, _object_spread({
|
|
65
|
+
"aria-label": cancelLabel
|
|
66
|
+
}, restProps));
|
|
67
|
+
}
|
|
24
68
|
const Icon = {
|
|
25
69
|
loading: ()=>null,
|
|
26
|
-
cancelable: Icon24Cancel,
|
|
27
70
|
done: Icon48DoneOutline,
|
|
28
71
|
error: Icon48CancelCircle
|
|
29
72
|
}[state];
|
|
73
|
+
return /*#__PURE__*/ _jsx(RootComponent, _object_spread_props(_object_spread({
|
|
74
|
+
baseClassName: "vkuiScreenSpinner__icon"
|
|
75
|
+
}, restProps), {
|
|
76
|
+
children: /*#__PURE__*/ _jsx(Icon, {})
|
|
77
|
+
}));
|
|
78
|
+
};
|
|
79
|
+
ScreenSpinnerSwapIcon.displayName = 'ScreenSpinner.SwapIcon';
|
|
80
|
+
const ScreenSpinnerContainer = (_param)=>{
|
|
81
|
+
var { state = 'loading' } = _param, restProps = _object_without_properties(_param, [
|
|
82
|
+
"state"
|
|
83
|
+
]);
|
|
84
|
+
return /*#__PURE__*/ _jsx(ScreenSpinnerContext.Provider, {
|
|
85
|
+
value: {
|
|
86
|
+
state
|
|
87
|
+
},
|
|
88
|
+
children: /*#__PURE__*/ _jsx(RootComponent, _object_spread({
|
|
89
|
+
baseClassName: classNames("vkuiScreenSpinner", state !== 'loading' && stateClassNames[state])
|
|
90
|
+
}, restProps))
|
|
91
|
+
});
|
|
92
|
+
};
|
|
93
|
+
ScreenSpinnerContainer.displayName = 'ScreenSpinner.Container';
|
|
94
|
+
/**
|
|
95
|
+
* @see https://vkcom.github.io/VKUI/#/ScreenSpinner
|
|
96
|
+
*/ export const ScreenSpinner = (_param)=>{
|
|
97
|
+
var { style, className, state = 'loading', onClick, cancelLabel } = _param, restProps = _object_without_properties(_param, [
|
|
98
|
+
"style",
|
|
99
|
+
"className",
|
|
100
|
+
"state",
|
|
101
|
+
"onClick",
|
|
102
|
+
"cancelLabel"
|
|
103
|
+
]);
|
|
30
104
|
useScrollLock();
|
|
31
105
|
return /*#__PURE__*/ _jsx(PopoutWrapper, {
|
|
32
|
-
|
|
33
|
-
className: classNames("vkuiScreenSpinner", state === 'cancelable' && "vkuiScreenSpinner--clickable", className),
|
|
106
|
+
className: className,
|
|
34
107
|
style: style,
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
108
|
+
noBackground: true,
|
|
109
|
+
children: /*#__PURE__*/ _jsxs(ScreenSpinnerContainer, {
|
|
110
|
+
state: state,
|
|
38
111
|
children: [
|
|
39
|
-
/*#__PURE__*/ _jsx(
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
children: children
|
|
44
|
-
})),
|
|
45
|
-
/*#__PURE__*/ _jsx("div", {
|
|
46
|
-
className: classNames("vkuiScreenSpinner__icon", state === 'done' && "vkuiScreenSpinner__icon--state-done"),
|
|
47
|
-
children: /*#__PURE__*/ _jsx(Icon, {})
|
|
112
|
+
/*#__PURE__*/ _jsx(ScreenSpinnerLoader, _object_spread({}, restProps)),
|
|
113
|
+
/*#__PURE__*/ _jsx(ScreenSpinnerSwapIcon, {
|
|
114
|
+
onClick: onClick,
|
|
115
|
+
cancelLabel: cancelLabel
|
|
48
116
|
})
|
|
49
117
|
]
|
|
50
118
|
})
|
|
51
119
|
});
|
|
52
120
|
};
|
|
121
|
+
ScreenSpinner.displayName = 'ScreenSpinner';
|
|
122
|
+
ScreenSpinner.Container = ScreenSpinnerContainer;
|
|
123
|
+
ScreenSpinner.Container.displayName = 'ScreenSpinner.Container';
|
|
124
|
+
ScreenSpinner.Loader = ScreenSpinnerLoader;
|
|
125
|
+
ScreenSpinner.Loader.displayName = 'ScreenSpinner.Loader';
|
|
126
|
+
ScreenSpinner.SwapIcon = ScreenSpinnerSwapIcon;
|
|
127
|
+
ScreenSpinner.SwapIcon.displayName = 'ScreenSpinner.SwapIcon';
|
|
53
128
|
|
|
54
129
|
//# sourceMappingURL=ScreenSpinner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["import { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Spinner, SpinnerProps } from '../Spinner/Spinner';\nimport { Icon48CancelCircle } from './Icon48CancelCircle';\nimport { Icon48DoneOutline } from './Icon48DoneOutline';\nimport styles from './ScreenSpinner.module.css';\n\nexport interface ScreenSpinnerProps extends SpinnerProps {\n state?: 'loading' | 'cancelable' | 'done' | 'error';\n}\n\n
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { clickByKeyboardHandler } from '../../lib/utils';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Spinner, SpinnerProps } from '../Spinner/Spinner';\nimport { Icon48CancelCircle } from './Icon48CancelCircle';\nimport { Icon48DoneOutline } from './Icon48DoneOutline';\nimport styles from './ScreenSpinner.module.css';\n\nexport interface ScreenSpinnerProps extends SpinnerProps {\n state?: 'loading' | 'cancelable' | 'done' | 'error';\n cancelLabel?: string;\n}\n\nexport interface ScreenSpinnerContextProps {\n state: NonNullable<ScreenSpinnerProps['state']>;\n}\n\nexport const ScreenSpinnerContext: React.Context<ScreenSpinnerContextProps> =\n React.createContext<ScreenSpinnerContextProps>({\n state: 'loading',\n });\n\nconst stateClassNames = {\n cancelable: styles['ScreenSpinner--state-cancelable'],\n done: styles['ScreenSpinner--state-done'],\n error: styles['ScreenSpinner--state-error'],\n};\n\nconst ScreenSpinnerLoader: React.FC<SpinnerProps> = ({\n size = 'large',\n children = 'Пожалуйста, подождите...',\n ...restProps\n}: SpinnerProps) => {\n return (\n <Spinner className={styles['ScreenSpinner__spinner']} size={size} {...restProps}>\n {children}\n </Spinner>\n );\n};\n\nScreenSpinnerLoader.displayName = 'ScreenSpinner.Loader';\n\ntype ScreenSpinnerSwapIconProps = HTMLAttributesWithRootRef<HTMLElement> & {\n cancelLabel?: ScreenSpinnerProps['cancelLabel'];\n};\n\nconst ScreenSpinnerCancelIcon: React.FC<ScreenSpinnerSwapIconProps> = ({\n onKeyDown,\n 'aria-label': ariaLabel = 'Отменить',\n ...restProps\n}: ScreenSpinnerSwapIconProps) => {\n const handlers = mergeCalls(\n { onKeyDown: clickByKeyboardHandler },\n {\n onKeyDown,\n },\n );\n let clickableProps: React.HTMLAttributes<HTMLSpanElement> = {\n ...handlers,\n 'tabIndex': 0,\n 'role': 'button',\n 'aria-label': ariaLabel,\n };\n\n return (\n <RootComponent baseClassName={styles['ScreenSpinner__icon']} {...clickableProps} {...restProps}>\n <Icon24Cancel />\n </RootComponent>\n );\n};\n\nconst ScreenSpinnerSwapIcon: React.FC<ScreenSpinnerSwapIconProps> = ({\n cancelLabel,\n ...restProps\n}: ScreenSpinnerSwapIconProps) => {\n const { state } = React.useContext(ScreenSpinnerContext);\n\n if (state === 'cancelable') {\n return <ScreenSpinnerCancelIcon aria-label={cancelLabel} {...restProps} />;\n }\n\n const Icon = {\n loading: () => null,\n done: Icon48DoneOutline,\n error: Icon48CancelCircle,\n }[state];\n\n return (\n <RootComponent baseClassName={styles['ScreenSpinner__icon']} {...restProps}>\n <Icon />\n </RootComponent>\n );\n};\n\nScreenSpinnerSwapIcon.displayName = 'ScreenSpinner.SwapIcon';\n\ntype ScreenSpinnerContainerProps = HTMLAttributesWithRootRef<HTMLSpanElement> &\n Pick<ScreenSpinnerProps, 'state'>;\n\nconst ScreenSpinnerContainer: React.FC<ScreenSpinnerContainerProps> = ({\n state = 'loading',\n ...restProps\n}: ScreenSpinnerContainerProps) => {\n return (\n <ScreenSpinnerContext.Provider value={{ state }}>\n <RootComponent\n baseClassName={classNames(\n styles['ScreenSpinner'],\n state !== 'loading' && stateClassNames[state],\n )}\n {...restProps}\n />\n </ScreenSpinnerContext.Provider>\n );\n};\n\nScreenSpinnerContainer.displayName = 'ScreenSpinner.Container';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner: React.FC<ScreenSpinnerProps> & {\n Container: typeof ScreenSpinnerContainer;\n Loader: typeof ScreenSpinnerLoader;\n SwapIcon: typeof ScreenSpinnerSwapIcon;\n} = ({\n style,\n className,\n state = 'loading',\n onClick,\n cancelLabel,\n ...restProps\n}: ScreenSpinnerProps): React.ReactNode => {\n useScrollLock();\n\n return (\n <PopoutWrapper className={className} style={style} noBackground>\n <ScreenSpinnerContainer state={state}>\n <ScreenSpinnerLoader {...restProps} />\n <ScreenSpinnerSwapIcon onClick={onClick} cancelLabel={cancelLabel} />\n </ScreenSpinnerContainer>\n </PopoutWrapper>\n );\n};\n\nScreenSpinner.displayName = 'ScreenSpinner';\n\nScreenSpinner.Container = ScreenSpinnerContainer;\nScreenSpinner.Container.displayName = 'ScreenSpinner.Container';\n\nScreenSpinner.Loader = ScreenSpinnerLoader;\nScreenSpinner.Loader.displayName = 'ScreenSpinner.Loader';\n\nScreenSpinner.SwapIcon = ScreenSpinnerSwapIcon;\nScreenSpinner.SwapIcon.displayName = 'ScreenSpinner.SwapIcon';\n"],"names":["React","Icon24Cancel","classNames","mergeCalls","clickByKeyboardHandler","useScrollLock","PopoutWrapper","RootComponent","Spinner","Icon48CancelCircle","Icon48DoneOutline","ScreenSpinnerContext","createContext","state","stateClassNames","cancelable","done","error","ScreenSpinnerLoader","size","children","restProps","className","displayName","ScreenSpinnerCancelIcon","onKeyDown","ariaLabel","handlers","clickableProps","baseClassName","ScreenSpinnerSwapIcon","cancelLabel","useContext","aria-label","Icon","loading","ScreenSpinnerContainer","Provider","value","ScreenSpinner","style","onClick","noBackground","Container","Loader","SwapIcon"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,uBAAuB;AAClD,SAASC,sBAAsB,QAAQ,kBAAkB;AAEzD,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,OAAO,QAAsB,qBAAqB;AAC3D,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,iBAAiB,QAAQ,sBAAsB;AAYxD,OAAO,MAAMC,qCACXX,MAAMY,aAAa,CAA4B;IAC7CC,OAAO;AACT,GAAG;AAEL,MAAMC,kBAAkB;IACtBC,UAAU;IACVC,IAAI;IACJC,KAAK;AACP;AAEA,MAAMC,sBAA8C;QAAC,EACnDC,OAAO,OAAO,EACdC,WAAW,0BAA0B,EAExB,WADVC;QAFHF;QACAC;;IAGA,qBACE,KAACZ;QAAQc,SAAS;QAAoCH,MAAMA;OAAUE;kBACnED;;AAGP;AAEAF,oBAAoBK,WAAW,GAAG;AAMlC,MAAMC,0BAAgE;QAAC,EACrEC,SAAS,EACT,cAAcC,YAAY,UAAU,EAET,WADxBL;QAFHI;QACA;;IAGA,MAAME,WAAWxB,WACf;QAAEsB,WAAWrB;IAAuB,GACpC;QACEqB;IACF;IAEF,IAAIG,iBAAwD,wCACvDD;QACH,YAAY;QACZ,QAAQ;QACR,cAAcD;;IAGhB,qBACE,KAACnB;QAAcsB,aAAa;OAAqCD,gBAAoBP;kBACnF,cAAA,KAACpB;;AAGP;AAEA,MAAM6B,wBAA8D;QAAC,EACnEC,WAAW,EAEgB,WADxBV;QADHU;;IAGA,MAAM,EAAElB,KAAK,EAAE,GAAGb,MAAMgC,UAAU,CAACrB;IAEnC,IAAIE,UAAU,cAAc;QAC1B,qBAAO,KAACW;YAAwBS,cAAYF;WAAiBV;IAC/D;IAEA,MAAMa,OAAO;QACXC,SAAS,IAAM;QACfnB,MAAMN;QACNO,OAAOR;IACT,CAAC,CAACI,MAAM;IAER,qBACE,KAACN;QAAcsB,aAAa;OAAqCR;kBAC/D,cAAA,KAACa;;AAGP;AAEAJ,sBAAsBP,WAAW,GAAG;AAKpC,MAAMa,yBAAgE;QAAC,EACrEvB,QAAQ,SAAS,EAEW,WADzBQ;QADHR;;IAGA,qBACE,KAACF,qBAAqB0B,QAAQ;QAACC,OAAO;YAAEzB;QAAM;kBAC5C,cAAA,KAACN;YACCsB,eAAe3B,gCAEbW,UAAU,aAAaC,eAAe,CAACD,MAAM;WAE3CQ;;AAIZ;AAEAe,uBAAuBb,WAAW,GAAG;AAErC;;CAEC,GACD,OAAO,MAAMgB,gBAIT;QAAC,EACHC,KAAK,EACLlB,SAAS,EACTT,QAAQ,SAAS,EACjB4B,OAAO,EACPV,WAAW,EAEQ,WADhBV;QALHmB;QACAlB;QACAT;QACA4B;QACAV;;IAGA1B;IAEA,qBACE,KAACC;QAAcgB,WAAWA;QAAWkB,OAAOA;QAAOE,YAAY;kBAC7D,cAAA,MAACN;YAAuBvB,OAAOA;;8BAC7B,KAACK,wCAAwBG;8BACzB,KAACS;oBAAsBW,SAASA;oBAASV,aAAaA;;;;;AAI9D,EAAE;AAEFQ,cAAchB,WAAW,GAAG;AAE5BgB,cAAcI,SAAS,GAAGP;AAC1BG,cAAcI,SAAS,CAACpB,WAAW,GAAG;AAEtCgB,cAAcK,MAAM,GAAG1B;AACvBqB,cAAcK,MAAM,CAACrB,WAAW,GAAG;AAEnCgB,cAAcM,QAAQ,GAAGf;AACzBS,cAAcM,QAAQ,CAACtB,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAEL,KAAK,2BAA2B,EAChC,KAAK,WAAW,EACjB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,OAAO,SAAS,2BAA2B,qCAI/D,WAAW,CAAC,OAAO,CAAC,KAAG,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAEL,KAAK,2BAA2B,EAChC,KAAK,WAAW,EACjB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,OAAO,SAAS,2BAA2B,qCAI/D,WAAW,CAAC,OAAO,CAAC,KAAG,KAAK,CAAC,SA0D/B,CAAC"}
|