@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
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../../../src/components/Cell/Cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAc,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAE,YAAY,EAAqB,MAAM,6BAA6B,CAAC;AAK9E,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,EACzC,cAAc,EACd,UAAU,CAAC,cAAc,CAAC;IAC5B,IAAI,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG;IACvC,QAAQ,EAAE,OAAO,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../../../src/components/Cell/Cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAc,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAE,YAAY,EAAqB,MAAM,6BAA6B,CAAC;AAK9E,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,EACzC,cAAc,EACd,UAAU,CAAC,cAAc,CAAC;IAC5B,IAAI,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG;IACvC,QAAQ,EAAE,OAAO,YAAY,CAAC;CAkI/B,CAAC"}
|
|
@@ -76,12 +76,14 @@ const Cell = (_param)=>{
|
|
|
76
76
|
const simpleCellDisabled = draggable && !selectable || removable && !restProps.onClick || disabled;
|
|
77
77
|
const hasActive = !simpleCellDisabled && !dragging;
|
|
78
78
|
const cellClasses = (0, _vkjs.classNames)("vkuiCell", dragging && "vkuiCell--dragging", platform === 'ios' && "vkuiCell--ios", removable && "vkuiCell--removable", Component === 'label' && "vkuiCell--selectable", disabled && "vkuiCell--disabled");
|
|
79
|
-
const simpleCellProps = _object_spread_props._(_object_spread._({
|
|
79
|
+
const simpleCellProps = _object_spread_props._(_object_spread._(_object_spread_props._(_object_spread._({
|
|
80
80
|
hasActive: hasActive,
|
|
81
81
|
hasHover: hasActive && !removable
|
|
82
82
|
}, restProps), {
|
|
83
|
-
className: "vkuiCell__content"
|
|
84
|
-
|
|
83
|
+
className: "vkuiCell__content"
|
|
84
|
+
}), Component && {
|
|
85
|
+
Component
|
|
86
|
+
}), {
|
|
85
87
|
before: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
|
|
86
88
|
children: [
|
|
87
89
|
draggable && platform !== 'ios' && dragger,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Cell/Cell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport type { SwappedItemRange } from '../../hooks/useDraggableWithDomApi';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport { CellCheckbox, CellCheckboxProps } from './CellCheckbox/CellCheckbox';\nimport { CellDragger } from './CellDragger/CellDragger';\nimport { DEFAULT_DRAGGABLE_LABEL } from './constants';\nimport styles from './Cell.module.css';\n\nexport interface CellProps\n extends Omit<SimpleCellProps, 'getRootRef'>,\n RemovableProps,\n HasRootRef<HTMLDivElement> {\n mode?: 'removable' | 'selectable';\n /**\n * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет\n */\n draggable?: boolean;\n /**\n * Имя для input в режиме selectable\n */\n name?: string;\n /**\n * В режиме selectable реагирует на входящие значения пропса cheсked, как зависящий напрямую от входящего значения\n */\n checked?: boolean;\n /**\n * В режиме selectable реагирует на входящие значения пропса defaultChecked как неконтролируемый компонент\n */\n defaultChecked?: boolean;\n /**\n * Коллбэк срабатывает при завершении перетаскивания.\n * **Важно:** режим перетаскивания не меняет порядок ячеек в DOM. В коллбэке есть объект с полями `from` и `to`.\n * Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице\n * есть рабочий пример с обработкой этих чисел и перерисовкой списка.\n */\n onDragFinish?: (swappedItemRange: SwappedItemRange) => void;\n /**\n * Текст для кнопки перетаскивания ячейки\n */\n draggerLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Cell\n */\nexport const Cell: React.FC<CellProps> & {\n Checkbox: typeof CellCheckbox;\n} = ({\n mode,\n onRemove = noop,\n removePlaceholder = 'Удалить',\n onDragFinish,\n before,\n after,\n disabled,\n draggable,\n Component: ComponentProps,\n onChange,\n name,\n value,\n checked,\n defaultChecked,\n getRootRef,\n draggerLabel = DEFAULT_DRAGGABLE_LABEL,\n className,\n style,\n toggleButtonTestId,\n removeButtonTestId,\n ...restProps\n}: CellProps) => {\n const [dragging, setDragging] = React.useState(false);\n const selectable = mode === 'selectable';\n const removable = mode === 'removable';\n const Component = selectable ? 'label' : ComponentProps;\n\n const platform = usePlatform();\n\n const rootElRef = useExternRef(getRootRef);\n\n const dragger = draggable ? (\n <CellDragger\n elRef={rootElRef}\n className={styles['Cell__dragger']}\n disabled={disabled}\n onDragStateChange={setDragging}\n onDragFinish={onDragFinish}\n >\n {draggerLabel}\n </CellDragger>\n ) : null;\n\n let checkbox;\n if (selectable) {\n const checkboxProps: CellCheckboxProps = {\n name,\n value,\n defaultChecked,\n checked,\n disabled,\n onChange,\n };\n checkbox = <CellCheckbox className={styles['Cell__checkbox']} {...checkboxProps} />;\n }\n\n const simpleCellDisabled =\n (draggable && !selectable) || (removable && !restProps.onClick) || disabled;\n const hasActive = !simpleCellDisabled && !dragging;\n\n const cellClasses = classNames(\n styles['Cell'],\n dragging && styles['Cell--dragging'],\n platform === 'ios' && styles['Cell--ios'],\n removable && styles['Cell--removable'],\n Component === 'label' && styles['Cell--selectable'],\n disabled && styles['Cell--disabled'],\n );\n\n const simpleCellProps: SimpleCellProps = {\n hasActive: hasActive,\n hasHover: hasActive && !removable,\n ...restProps,\n className: styles['Cell__content'],\n Component: Component,\n before: (\n <React.Fragment>\n {draggable && platform !== 'ios' && dragger}\n {selectable && checkbox}\n {before}\n </React.Fragment>\n ),\n after: (\n <React.Fragment>\n {draggable && platform === 'ios' && dragger}\n {after}\n </React.Fragment>\n ),\n };\n\n if (restProps.onClick) {\n simpleCellProps.disabled = simpleCellDisabled;\n }\n\n if (removable) {\n return (\n <Removable\n className={classNames(cellClasses, className)}\n style={style}\n getRootRef={rootElRef}\n removePlaceholder={removePlaceholder}\n onRemove={(e) => onRemove(e, rootElRef.current)}\n toggleButtonTestId={toggleButtonTestId}\n removeButtonTestId={removeButtonTestId}\n >\n {platform === 'ios' ? (\n ({ isRemoving }) => {\n if (simpleCellProps.onClick) {\n simpleCellProps.disabled = isRemoving || !simpleCellProps.disabled;\n }\n return <SimpleCell {...simpleCellProps} />;\n }\n ) : (\n <SimpleCell {...simpleCellProps} />\n )}\n </Removable>\n );\n }\n\n return (\n <div className={classNames(cellClasses, className)} style={style} ref={rootElRef}>\n <SimpleCell {...simpleCellProps} />\n </div>\n );\n};\n\nCell.Checkbox = CellCheckbox;\n"],"names":["Cell","mode","onRemove","noop","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","ComponentProps","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","DEFAULT_DRAGGABLE_LABEL","className","style","toggleButtonTestId","removeButtonTestId","restProps","dragging","setDragging","React","useState","selectable","removable","platform","usePlatform","rootElRef","useExternRef","dragger","CellDragger","elRef","onDragStateChange","checkbox","checkboxProps","CellCheckbox","simpleCellDisabled","onClick","hasActive","cellClasses","classNames","simpleCellProps","hasHover","Fragment","Removable","e","current","isRemoving","SimpleCell","div","ref","Checkbox"],"mappings":";;;;+BAkDaA;;;eAAAA;;;;;;;;iEAlDU;sBACU;8BAEJ;6BACD;2BAEc;4BACE;8BACI;6BACpB;2BACY;AAwCjC,MAAMA,OAET;QAAC,EACHC,IAAI,EACJC,WAAWC,UAAI,EACfC,oBAAoB,SAAS,EAC7BC,YAAY,EACZC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,WAAWC,cAAc,EACzBC,QAAQ,EACRC,IAAI,EACJC,KAAK,EACLC,OAAO,EACPC,cAAc,EACdC,UAAU,EACVC,eAAeC,kCAAuB,EACtCC,SAAS,EACTC,KAAK,EACLC,kBAAkB,EAClBC,kBAAkB,EAER,WADPC;QApBHvB;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACE,UAAUC,YAAY,GAAGC,OAAMC,QAAQ,CAAC;IAC/C,MAAMC,aAAa5B,SAAS;IAC5B,MAAM6B,YAAY7B,SAAS;IAC3B,MAAMS,YAAYmB,aAAa,UAAUlB;IAEzC,MAAMoB,WAAWC,IAAAA,wBAAW;IAE5B,MAAMC,YAAYC,IAAAA,0BAAY,EAACjB;IAE/B,MAAMkB,UAAU1B,0BACd,qBAAC2B,wBAAW;QACVC,OAAOJ;QACPb,SAAS;QACTZ,UAAUA;QACV8B,mBAAmBZ;QACnBrB,cAAcA;kBAEba;SAED;IAEJ,IAAIqB;IACJ,IAAIV,YAAY;QACd,MAAMW,gBAAmC;YACvC3B;YACAC;YACAE;YACAD;YACAP;YACAI;QACF;QACA2B,yBAAW,qBAACE,0BAAY;YAACrB,SAAS;WAAgCoB;IACpE;IAEA,MAAME,qBACJ,AAACjC,aAAa,CAACoB,cAAgBC,aAAa,CAACN,UAAUmB,OAAO,IAAKnC;IACrE,MAAMoC,YAAY,CAACF,sBAAsB,CAACjB;IAE1C,MAAMoB,cAAcC,IAAAA,gBAAU,cAE5BrB,kCACAM,aAAa,0BACbD,oCACApB,cAAc,mCACdF;IAGF,MAAMuC,kBAAmC;QACvCH,WAAWA;QACXI,UAAUJ,aAAa,CAACd;OACrBN;QACHJ,SAAS;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Cell/Cell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport type { SwappedItemRange } from '../../hooks/useDraggableWithDomApi';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport { CellCheckbox, CellCheckboxProps } from './CellCheckbox/CellCheckbox';\nimport { CellDragger } from './CellDragger/CellDragger';\nimport { DEFAULT_DRAGGABLE_LABEL } from './constants';\nimport styles from './Cell.module.css';\n\nexport interface CellProps\n extends Omit<SimpleCellProps, 'getRootRef'>,\n RemovableProps,\n HasRootRef<HTMLDivElement> {\n mode?: 'removable' | 'selectable';\n /**\n * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет\n */\n draggable?: boolean;\n /**\n * Имя для input в режиме selectable\n */\n name?: string;\n /**\n * В режиме selectable реагирует на входящие значения пропса cheсked, как зависящий напрямую от входящего значения\n */\n checked?: boolean;\n /**\n * В режиме selectable реагирует на входящие значения пропса defaultChecked как неконтролируемый компонент\n */\n defaultChecked?: boolean;\n /**\n * Коллбэк срабатывает при завершении перетаскивания.\n * **Важно:** режим перетаскивания не меняет порядок ячеек в DOM. В коллбэке есть объект с полями `from` и `to`.\n * Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице\n * есть рабочий пример с обработкой этих чисел и перерисовкой списка.\n */\n onDragFinish?: (swappedItemRange: SwappedItemRange) => void;\n /**\n * Текст для кнопки перетаскивания ячейки\n */\n draggerLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Cell\n */\nexport const Cell: React.FC<CellProps> & {\n Checkbox: typeof CellCheckbox;\n} = ({\n mode,\n onRemove = noop,\n removePlaceholder = 'Удалить',\n onDragFinish,\n before,\n after,\n disabled,\n draggable,\n Component: ComponentProps,\n onChange,\n name,\n value,\n checked,\n defaultChecked,\n getRootRef,\n draggerLabel = DEFAULT_DRAGGABLE_LABEL,\n className,\n style,\n toggleButtonTestId,\n removeButtonTestId,\n ...restProps\n}: CellProps) => {\n const [dragging, setDragging] = React.useState(false);\n const selectable = mode === 'selectable';\n const removable = mode === 'removable';\n const Component = selectable ? 'label' : ComponentProps;\n\n const platform = usePlatform();\n\n const rootElRef = useExternRef(getRootRef);\n\n const dragger = draggable ? (\n <CellDragger\n elRef={rootElRef}\n className={styles['Cell__dragger']}\n disabled={disabled}\n onDragStateChange={setDragging}\n onDragFinish={onDragFinish}\n >\n {draggerLabel}\n </CellDragger>\n ) : null;\n\n let checkbox;\n if (selectable) {\n const checkboxProps: CellCheckboxProps = {\n name,\n value,\n defaultChecked,\n checked,\n disabled,\n onChange,\n };\n checkbox = <CellCheckbox className={styles['Cell__checkbox']} {...checkboxProps} />;\n }\n\n const simpleCellDisabled =\n (draggable && !selectable) || (removable && !restProps.onClick) || disabled;\n const hasActive = !simpleCellDisabled && !dragging;\n\n const cellClasses = classNames(\n styles['Cell'],\n dragging && styles['Cell--dragging'],\n platform === 'ios' && styles['Cell--ios'],\n removable && styles['Cell--removable'],\n Component === 'label' && styles['Cell--selectable'],\n disabled && styles['Cell--disabled'],\n );\n\n const simpleCellProps: SimpleCellProps = {\n hasActive: hasActive,\n hasHover: hasActive && !removable,\n ...restProps,\n className: styles['Cell__content'],\n // чтобы свойство, если не определено, не присутствовало в\n // restProps явно как {'Component': undefined} и ниже не переопределяло\n // возможное значение commonProps.Component = 'a' при слиянии двух объектов, как\n // {...commonProps, ...restProps}\n ...(Component && { Component }),\n before: (\n <React.Fragment>\n {draggable && platform !== 'ios' && dragger}\n {selectable && checkbox}\n {before}\n </React.Fragment>\n ),\n after: (\n <React.Fragment>\n {draggable && platform === 'ios' && dragger}\n {after}\n </React.Fragment>\n ),\n };\n\n if (restProps.onClick) {\n simpleCellProps.disabled = simpleCellDisabled;\n }\n\n if (removable) {\n return (\n <Removable\n className={classNames(cellClasses, className)}\n style={style}\n getRootRef={rootElRef}\n removePlaceholder={removePlaceholder}\n onRemove={(e) => onRemove(e, rootElRef.current)}\n toggleButtonTestId={toggleButtonTestId}\n removeButtonTestId={removeButtonTestId}\n >\n {platform === 'ios' ? (\n ({ isRemoving }) => {\n if (simpleCellProps.onClick) {\n simpleCellProps.disabled = isRemoving || !simpleCellProps.disabled;\n }\n return <SimpleCell {...simpleCellProps} />;\n }\n ) : (\n <SimpleCell {...simpleCellProps} />\n )}\n </Removable>\n );\n }\n\n return (\n <div className={classNames(cellClasses, className)} style={style} ref={rootElRef}>\n <SimpleCell {...simpleCellProps} />\n </div>\n );\n};\n\nCell.Checkbox = CellCheckbox;\n"],"names":["Cell","mode","onRemove","noop","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","ComponentProps","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","DEFAULT_DRAGGABLE_LABEL","className","style","toggleButtonTestId","removeButtonTestId","restProps","dragging","setDragging","React","useState","selectable","removable","platform","usePlatform","rootElRef","useExternRef","dragger","CellDragger","elRef","onDragStateChange","checkbox","checkboxProps","CellCheckbox","simpleCellDisabled","onClick","hasActive","cellClasses","classNames","simpleCellProps","hasHover","Fragment","Removable","e","current","isRemoving","SimpleCell","div","ref","Checkbox"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import type { ChipOption, ChipsInputBasePrivateProps } from './types';
|
|
3
|
-
export declare const ChipsInputBase: <O extends ChipOption>({ getRootRef, style, className, before, after, status, mode, value, onAddChipOption, onRemoveChipOption: onRemoveChipOptionProp, renderChip, getRef, id: idProp, inputValue, placeholder, disabled, readOnly, addOnBlur, onBlur, onInputChange, ClearButton, clearButtonShown, clearButtonTestId, onClear, ...restProps }: ChipsInputBasePrivateProps<O>) => React.ReactNode;
|
|
3
|
+
export declare const ChipsInputBase: <O extends ChipOption>({ getRootRef, style, className, before, after, status, mode, maxHeight, value, onAddChipOption, onRemoveChipOption: onRemoveChipOptionProp, renderChip, getRef, id: idProp, inputValue, placeholder, disabled, readOnly, addOnBlur, onBlur, onInputChange, ClearButton, clearButtonShown, clearButtonTestId, onClear, ...restProps }: ChipsInputBasePrivateProps<O>) => React.ReactNode;
|
|
4
4
|
//# sourceMappingURL=ChipsInputBase.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChipsInputBase.d.ts","sourceRoot":"","sources":["../../../../src/components/ChipsInputBase/ChipsInputBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B,OAAO,KAAK,EAAE,UAAU,EAAmB,0BAA0B,EAAc,MAAM,SAAS,CAAC;AAQnG,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,UAAU,
|
|
1
|
+
{"version":3,"file":"ChipsInputBase.d.ts","sourceRoot":"","sources":["../../../../src/components/ChipsInputBase/ChipsInputBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B,OAAO,KAAK,EAAE,UAAU,EAAmB,0BAA0B,EAAc,MAAM,SAAS,CAAC;AAQnG,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,UAAU,wUAkChD,0BAA0B,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,SAiOxC,CAAC"}
|
|
@@ -31,7 +31,7 @@ const sizeYClassNames = {
|
|
|
31
31
|
};
|
|
32
32
|
const ChipsInputBase = (_param)=>{
|
|
33
33
|
var { // FormFieldProps
|
|
34
|
-
getRootRef, style, className, before, after, status, mode, // option
|
|
34
|
+
getRootRef, style, className, before, after, status, mode, maxHeight, // option
|
|
35
35
|
value = _constants.DEFAULT_VALUE, onAddChipOption, onRemoveChipOption: onRemoveChipOptionProp, renderChip = _constants.renderChipDefault, // input
|
|
36
36
|
getRef, id: idProp, inputValue = _constants.DEFAULT_INPUT_VALUE, placeholder, disabled, readOnly, addOnBlur, onBlur, onInputChange, // clear
|
|
37
37
|
ClearButton = _FormFieldClearButton.FormFieldClearButton, clearButtonShown, clearButtonTestId, onClear } = _param, restProps = _object_without_properties._(_param, [
|
|
@@ -42,6 +42,7 @@ const ChipsInputBase = (_param)=>{
|
|
|
42
42
|
"after",
|
|
43
43
|
"status",
|
|
44
44
|
"mode",
|
|
45
|
+
"maxHeight",
|
|
45
46
|
"value",
|
|
46
47
|
"onAddChipOption",
|
|
47
48
|
"onRemoveChipOption",
|
|
@@ -197,6 +198,7 @@ const ChipsInputBase = (_param)=>{
|
|
|
197
198
|
status: status,
|
|
198
199
|
mode: mode,
|
|
199
200
|
className: className,
|
|
201
|
+
maxHeight: maxHeight,
|
|
200
202
|
onClick: disabled ? undefined : handleRootClick,
|
|
201
203
|
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
|
|
202
204
|
className: (0, _vkjs.classNames)("vkuiChipsInputBase", sizeY !== 'regular' && sizeYClassNames[sizeY], withPlaceholder && "vkuiChipsInputBase--hasPlaceholder"),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ChipsInputBase/ChipsInputBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { isHTMLElement } from '@vkontakte/vkui-floating-ui/utils/dom';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { getHorizontalFocusGoTo, Keys } from '../../lib/accessibility';\nimport {\n contains as checkTargetIsInputEl,\n contains,\n getActiveElementByAnotherElement,\n} from '../../lib/dom';\nimport { FormField } from '../FormField/FormField';\nimport { FormFieldClearButton } from '../FormFieldClearButton/FormFieldClearButton';\nimport { Text } from '../Typography/Text/Text';\nimport { DEFAULT_INPUT_VALUE, DEFAULT_VALUE, renderChipDefault } from './constants';\nimport {\n getChipOptionIndexByHTMLElement,\n getChipOptionIndexByValueProp,\n getChipOptionValueByHTMLElement,\n getNextChipOptionIndexByNavigateToProp,\n isInputValueEmpty,\n} from './helpers';\nimport type { ChipOption, ChipOptionValue, ChipsInputBasePrivateProps, NavigateTo } from './types';\nimport styles from './ChipsInputBase.module.css';\n\nconst sizeYClassNames = {\n none: styles['ChipsInputBase--sizeY-none'],\n compact: styles['ChipsInputBase--sizeY-compact'],\n} as const;\n\nexport const ChipsInputBase = <O extends ChipOption>({\n // FormFieldProps\n getRootRef,\n style,\n className,\n before,\n after,\n status,\n mode,\n\n // option\n value = DEFAULT_VALUE,\n onAddChipOption,\n onRemoveChipOption: onRemoveChipOptionProp,\n renderChip = renderChipDefault,\n\n // input\n getRef,\n id: idProp,\n inputValue = DEFAULT_INPUT_VALUE,\n placeholder,\n disabled,\n readOnly,\n addOnBlur,\n onBlur,\n onInputChange,\n\n // clear\n ClearButton = FormFieldClearButton,\n clearButtonShown,\n clearButtonTestId,\n onClear,\n ...restProps\n}: ChipsInputBasePrivateProps<O>): React.ReactNode => {\n const { sizeY = 'none' } = useAdaptivity();\n const idGenerated = React.useId();\n const inputRef = useExternRef(getRef);\n const listboxRef = React.useRef<HTMLDivElement>(null);\n\n const valueLength = value.length;\n const withPlaceholder = valueLength === 0;\n const [lastFocusedChipOptionIndex, setLastFocusedChipOptionIndex] = React.useState(0);\n\n const resetChipOptionFocusToInputEl = (inputEl: HTMLInputElement) => {\n setLastFocusedChipOptionIndex(0);\n inputEl.focus();\n };\n\n const moveFocusToChipOption = (\n currentIndex: number,\n navigateTo: NavigateTo,\n listboxEl: HTMLElement,\n ) => {\n const index = getNextChipOptionIndexByNavigateToProp(currentIndex, navigateTo, valueLength);\n // eslint-disable-next-line no-restricted-properties\n const foundEl = listboxEl.querySelector<HTMLElement>(`[data-index=\"${index}\"]`);\n\n if (foundEl) {\n setLastFocusedChipOptionIndex(index);\n foundEl.focus();\n }\n };\n\n const removeChipOption = (o: O | ChipOptionValue, index: number) => {\n /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */\n if (!inputRef.current || !listboxRef.current) {\n return;\n }\n\n if (valueLength > 1) {\n if (index === valueLength - 1) {\n moveFocusToChipOption(index, 'prev', listboxRef.current);\n } else {\n moveFocusToChipOption(index, 'next', listboxRef.current);\n }\n } else {\n resetChipOptionFocusToInputEl(inputRef.current);\n }\n\n onRemoveChipOptionProp(o);\n };\n\n const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n const targetEl = event.target;\n /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */\n if (event.defaultPrevented || !listboxRef.current || !isHTMLElement(targetEl)) {\n return;\n }\n\n switch (event.key) {\n case Keys.ENTER: {\n if (\n !readOnly &&\n checkTargetIsInputEl(targetEl, inputRef.current) &&\n inputRef.current &&\n !isInputValueEmpty(inputRef.current)\n ) {\n event.preventDefault();\n onAddChipOption(inputRef.current.value);\n }\n break;\n }\n case Keys.DELETE:\n case Keys.BACKSPACE: {\n if (!readOnly && valueLength > 0) {\n if (!checkTargetIsInputEl(targetEl, inputRef.current)) {\n event.preventDefault();\n removeChipOption(\n getChipOptionValueByHTMLElement(targetEl),\n getChipOptionIndexByHTMLElement(targetEl),\n );\n } else if (event.key === Keys.BACKSPACE && isInputValueEmpty(inputRef.current)) {\n event.preventDefault();\n moveFocusToChipOption(\n getChipOptionIndexByHTMLElement(targetEl),\n 'last',\n listboxRef.current,\n );\n }\n }\n break;\n }\n case Keys.ARROW_UP:\n case Keys.ARROW_LEFT:\n case Keys.ARROW_DOWN:\n case Keys.ARROW_RIGHT: {\n if (valueLength !== 0 && !checkTargetIsInputEl(targetEl, inputRef.current)) {\n event.preventDefault();\n moveFocusToChipOption(\n getChipOptionIndexByHTMLElement(targetEl),\n getHorizontalFocusGoTo(event.key),\n listboxRef.current,\n );\n }\n break;\n }\n }\n };\n\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(event);\n }\n\n if (addOnBlur && !event.defaultPrevented && inputRef.current) {\n onAddChipOption(inputRef.current.value);\n }\n };\n\n const handleChipRemove = (event: React.MouseEvent, v: ChipOptionValue) => {\n event.preventDefault();\n event.stopPropagation();\n removeChipOption(v, getChipOptionIndexByValueProp(v, value));\n };\n\n const handleRootClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (contains(event.currentTarget, getActiveElementByAnotherElement(event.currentTarget))) {\n return;\n }\n\n if (inputRef.current) {\n inputRef.current.focus();\n }\n };\n\n const clearButton = React.useMemo(() => {\n if (clearButtonShown) {\n return <ClearButton onClick={onClear} disabled={disabled} data-testid={clearButtonTestId} />;\n }\n return undefined;\n }, [ClearButton, clearButtonShown, clearButtonTestId, disabled, onClear]);\n\n const afterItems = React.useMemo(() => {\n if (clearButton || after) {\n return (\n <>\n {clearButton}\n {after}\n </>\n );\n }\n return undefined;\n }, [after, clearButton]);\n\n return (\n <FormField\n Component=\"div\"\n getRootRef={getRootRef}\n style={style}\n disabled={disabled}\n before={before}\n after={afterItems}\n status={status}\n mode={mode}\n className={className}\n onClick={disabled ? undefined : handleRootClick}\n >\n <div\n className={classNames(\n styles['ChipsInputBase'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n withPlaceholder && styles['ChipsInputBase--hasPlaceholder'],\n )}\n // для a11y\n ref={listboxRef}\n role=\"listbox\"\n aria-orientation=\"horizontal\"\n aria-disabled={disabled}\n aria-readonly={readOnly}\n onKeyDown={disabled ? undefined : handleListboxKeyDown}\n >\n {value.map((option, index) => (\n <React.Fragment key={`${typeof option.value}-${option.label}`}>\n {renderChip(\n {\n 'Component': 'div',\n 'value': option.value,\n 'label': option.label,\n 'disabled': option.disabled || disabled,\n 'readOnly': option.readOnly || readOnly,\n 'className': styles['ChipsInputBase__chip'],\n 'onRemove': handleChipRemove,\n // чтобы можно было легче найти этот чип в DOM\n 'data-index': index,\n 'data-value': option.value,\n // для a11y\n 'tabIndex': lastFocusedChipOptionIndex === index ? 0 : -1,\n 'role': 'option',\n 'aria-selected': true,\n 'aria-posinset': index + 1,\n 'aria-setsize': valueLength,\n },\n option,\n )}\n </React.Fragment>\n ))}\n <Text\n autoCapitalize=\"none\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n spellCheck={false}\n {...restProps}\n Component=\"input\"\n type=\"text\"\n id={idProp || `chips-input-base-generated-id-${idGenerated}`}\n getRootRef={inputRef}\n className={styles['ChipsInputBase__el']}\n disabled={disabled}\n readOnly={readOnly}\n placeholder={withPlaceholder ? placeholder : undefined}\n value={inputValue}\n onChange={onInputChange}\n onBlur={handleInputBlur}\n />\n </div>\n </FormField>\n );\n};\n"],"names":["ChipsInputBase","sizeYClassNames","none","compact","getRootRef","style","className","before","after","status","mode","value","DEFAULT_VALUE","onAddChipOption","onRemoveChipOption","onRemoveChipOptionProp","renderChip","renderChipDefault","getRef","id","idProp","inputValue","DEFAULT_INPUT_VALUE","placeholder","disabled","readOnly","addOnBlur","onBlur","onInputChange","ClearButton","FormFieldClearButton","clearButtonShown","clearButtonTestId","onClear","restProps","sizeY","useAdaptivity","idGenerated","React","useId","inputRef","useExternRef","listboxRef","useRef","valueLength","length","withPlaceholder","lastFocusedChipOptionIndex","setLastFocusedChipOptionIndex","useState","resetChipOptionFocusToInputEl","inputEl","focus","moveFocusToChipOption","currentIndex","navigateTo","listboxEl","index","getNextChipOptionIndexByNavigateToProp","foundEl","querySelector","removeChipOption","o","current","handleListboxKeyDown","event","targetEl","target","defaultPrevented","isHTMLElement","key","Keys","ENTER","checkTargetIsInputEl","isInputValueEmpty","preventDefault","DELETE","BACKSPACE","getChipOptionValueByHTMLElement","getChipOptionIndexByHTMLElement","ARROW_UP","ARROW_LEFT","ARROW_DOWN","ARROW_RIGHT","getHorizontalFocusGoTo","handleInputBlur","handleChipRemove","v","stopPropagation","getChipOptionIndexByValueProp","handleRootClick","contains","currentTarget","getActiveElementByAnotherElement","clearButton","useMemo","onClick","data-testid","undefined","afterItems","FormField","Component","div","classNames","ref","role","aria-orientation","aria-disabled","aria-readonly","onKeyDown","map","option","Fragment","label","Text","autoCapitalize","autoComplete","autoCorrect","spellCheck","type","onChange"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ChipsInputBase/ChipsInputBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { isHTMLElement } from '@vkontakte/vkui-floating-ui/utils/dom';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { getHorizontalFocusGoTo, Keys } from '../../lib/accessibility';\nimport {\n contains as checkTargetIsInputEl,\n contains,\n getActiveElementByAnotherElement,\n} from '../../lib/dom';\nimport { FormField } from '../FormField/FormField';\nimport { FormFieldClearButton } from '../FormFieldClearButton/FormFieldClearButton';\nimport { Text } from '../Typography/Text/Text';\nimport { DEFAULT_INPUT_VALUE, DEFAULT_VALUE, renderChipDefault } from './constants';\nimport {\n getChipOptionIndexByHTMLElement,\n getChipOptionIndexByValueProp,\n getChipOptionValueByHTMLElement,\n getNextChipOptionIndexByNavigateToProp,\n isInputValueEmpty,\n} from './helpers';\nimport type { ChipOption, ChipOptionValue, ChipsInputBasePrivateProps, NavigateTo } from './types';\nimport styles from './ChipsInputBase.module.css';\n\nconst sizeYClassNames = {\n none: styles['ChipsInputBase--sizeY-none'],\n compact: styles['ChipsInputBase--sizeY-compact'],\n} as const;\n\nexport const ChipsInputBase = <O extends ChipOption>({\n // FormFieldProps\n getRootRef,\n style,\n className,\n before,\n after,\n status,\n mode,\n maxHeight,\n\n // option\n value = DEFAULT_VALUE,\n onAddChipOption,\n onRemoveChipOption: onRemoveChipOptionProp,\n renderChip = renderChipDefault,\n\n // input\n getRef,\n id: idProp,\n inputValue = DEFAULT_INPUT_VALUE,\n placeholder,\n disabled,\n readOnly,\n addOnBlur,\n onBlur,\n onInputChange,\n\n // clear\n ClearButton = FormFieldClearButton,\n clearButtonShown,\n clearButtonTestId,\n onClear,\n ...restProps\n}: ChipsInputBasePrivateProps<O>): React.ReactNode => {\n const { sizeY = 'none' } = useAdaptivity();\n const idGenerated = React.useId();\n const inputRef = useExternRef(getRef);\n const listboxRef = React.useRef<HTMLDivElement>(null);\n\n const valueLength = value.length;\n const withPlaceholder = valueLength === 0;\n const [lastFocusedChipOptionIndex, setLastFocusedChipOptionIndex] = React.useState(0);\n\n const resetChipOptionFocusToInputEl = (inputEl: HTMLInputElement) => {\n setLastFocusedChipOptionIndex(0);\n inputEl.focus();\n };\n\n const moveFocusToChipOption = (\n currentIndex: number,\n navigateTo: NavigateTo,\n listboxEl: HTMLElement,\n ) => {\n const index = getNextChipOptionIndexByNavigateToProp(currentIndex, navigateTo, valueLength);\n // eslint-disable-next-line no-restricted-properties\n const foundEl = listboxEl.querySelector<HTMLElement>(`[data-index=\"${index}\"]`);\n\n if (foundEl) {\n setLastFocusedChipOptionIndex(index);\n foundEl.focus();\n }\n };\n\n const removeChipOption = (o: O | ChipOptionValue, index: number) => {\n /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */\n if (!inputRef.current || !listboxRef.current) {\n return;\n }\n\n if (valueLength > 1) {\n if (index === valueLength - 1) {\n moveFocusToChipOption(index, 'prev', listboxRef.current);\n } else {\n moveFocusToChipOption(index, 'next', listboxRef.current);\n }\n } else {\n resetChipOptionFocusToInputEl(inputRef.current);\n }\n\n onRemoveChipOptionProp(o);\n };\n\n const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n const targetEl = event.target;\n /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */\n if (event.defaultPrevented || !listboxRef.current || !isHTMLElement(targetEl)) {\n return;\n }\n\n switch (event.key) {\n case Keys.ENTER: {\n if (\n !readOnly &&\n checkTargetIsInputEl(targetEl, inputRef.current) &&\n inputRef.current &&\n !isInputValueEmpty(inputRef.current)\n ) {\n event.preventDefault();\n onAddChipOption(inputRef.current.value);\n }\n break;\n }\n case Keys.DELETE:\n case Keys.BACKSPACE: {\n if (!readOnly && valueLength > 0) {\n if (!checkTargetIsInputEl(targetEl, inputRef.current)) {\n event.preventDefault();\n removeChipOption(\n getChipOptionValueByHTMLElement(targetEl),\n getChipOptionIndexByHTMLElement(targetEl),\n );\n } else if (event.key === Keys.BACKSPACE && isInputValueEmpty(inputRef.current)) {\n event.preventDefault();\n moveFocusToChipOption(\n getChipOptionIndexByHTMLElement(targetEl),\n 'last',\n listboxRef.current,\n );\n }\n }\n break;\n }\n case Keys.ARROW_UP:\n case Keys.ARROW_LEFT:\n case Keys.ARROW_DOWN:\n case Keys.ARROW_RIGHT: {\n if (valueLength !== 0 && !checkTargetIsInputEl(targetEl, inputRef.current)) {\n event.preventDefault();\n moveFocusToChipOption(\n getChipOptionIndexByHTMLElement(targetEl),\n getHorizontalFocusGoTo(event.key),\n listboxRef.current,\n );\n }\n break;\n }\n }\n };\n\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(event);\n }\n\n if (addOnBlur && !event.defaultPrevented && inputRef.current) {\n onAddChipOption(inputRef.current.value);\n }\n };\n\n const handleChipRemove = (event: React.MouseEvent, v: ChipOptionValue) => {\n event.preventDefault();\n event.stopPropagation();\n removeChipOption(v, getChipOptionIndexByValueProp(v, value));\n };\n\n const handleRootClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (contains(event.currentTarget, getActiveElementByAnotherElement(event.currentTarget))) {\n return;\n }\n\n if (inputRef.current) {\n inputRef.current.focus();\n }\n };\n\n const clearButton = React.useMemo(() => {\n if (clearButtonShown) {\n return <ClearButton onClick={onClear} disabled={disabled} data-testid={clearButtonTestId} />;\n }\n return undefined;\n }, [ClearButton, clearButtonShown, clearButtonTestId, disabled, onClear]);\n\n const afterItems = React.useMemo(() => {\n if (clearButton || after) {\n return (\n <>\n {clearButton}\n {after}\n </>\n );\n }\n return undefined;\n }, [after, clearButton]);\n\n return (\n <FormField\n Component=\"div\"\n getRootRef={getRootRef}\n style={style}\n disabled={disabled}\n before={before}\n after={afterItems}\n status={status}\n mode={mode}\n className={className}\n maxHeight={maxHeight}\n onClick={disabled ? undefined : handleRootClick}\n >\n <div\n className={classNames(\n styles['ChipsInputBase'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n withPlaceholder && styles['ChipsInputBase--hasPlaceholder'],\n )}\n // для a11y\n ref={listboxRef}\n role=\"listbox\"\n aria-orientation=\"horizontal\"\n aria-disabled={disabled}\n aria-readonly={readOnly}\n onKeyDown={disabled ? undefined : handleListboxKeyDown}\n >\n {value.map((option, index) => (\n <React.Fragment key={`${typeof option.value}-${option.label}`}>\n {renderChip(\n {\n 'Component': 'div',\n 'value': option.value,\n 'label': option.label,\n 'disabled': option.disabled || disabled,\n 'readOnly': option.readOnly || readOnly,\n 'className': styles['ChipsInputBase__chip'],\n 'onRemove': handleChipRemove,\n // чтобы можно было легче найти этот чип в DOM\n 'data-index': index,\n 'data-value': option.value,\n // для a11y\n 'tabIndex': lastFocusedChipOptionIndex === index ? 0 : -1,\n 'role': 'option',\n 'aria-selected': true,\n 'aria-posinset': index + 1,\n 'aria-setsize': valueLength,\n },\n option,\n )}\n </React.Fragment>\n ))}\n <Text\n autoCapitalize=\"none\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n spellCheck={false}\n {...restProps}\n Component=\"input\"\n type=\"text\"\n id={idProp || `chips-input-base-generated-id-${idGenerated}`}\n getRootRef={inputRef}\n className={styles['ChipsInputBase__el']}\n disabled={disabled}\n readOnly={readOnly}\n placeholder={withPlaceholder ? placeholder : undefined}\n value={inputValue}\n onChange={onInputChange}\n onBlur={handleInputBlur}\n />\n </div>\n </FormField>\n );\n};\n"],"names":["ChipsInputBase","sizeYClassNames","none","compact","getRootRef","style","className","before","after","status","mode","maxHeight","value","DEFAULT_VALUE","onAddChipOption","onRemoveChipOption","onRemoveChipOptionProp","renderChip","renderChipDefault","getRef","id","idProp","inputValue","DEFAULT_INPUT_VALUE","placeholder","disabled","readOnly","addOnBlur","onBlur","onInputChange","ClearButton","FormFieldClearButton","clearButtonShown","clearButtonTestId","onClear","restProps","sizeY","useAdaptivity","idGenerated","React","useId","inputRef","useExternRef","listboxRef","useRef","valueLength","length","withPlaceholder","lastFocusedChipOptionIndex","setLastFocusedChipOptionIndex","useState","resetChipOptionFocusToInputEl","inputEl","focus","moveFocusToChipOption","currentIndex","navigateTo","listboxEl","index","getNextChipOptionIndexByNavigateToProp","foundEl","querySelector","removeChipOption","o","current","handleListboxKeyDown","event","targetEl","target","defaultPrevented","isHTMLElement","key","Keys","ENTER","checkTargetIsInputEl","isInputValueEmpty","preventDefault","DELETE","BACKSPACE","getChipOptionValueByHTMLElement","getChipOptionIndexByHTMLElement","ARROW_UP","ARROW_LEFT","ARROW_DOWN","ARROW_RIGHT","getHorizontalFocusGoTo","handleInputBlur","handleChipRemove","v","stopPropagation","getChipOptionIndexByValueProp","handleRootClick","contains","currentTarget","getActiveElementByAnotherElement","clearButton","useMemo","onClick","data-testid","undefined","afterItems","FormField","Component","div","classNames","ref","role","aria-orientation","aria-disabled","aria-readonly","onKeyDown","map","option","Fragment","label","Text","autoCapitalize","autoComplete","autoCorrect","spellCheck","type","onChange"],"mappings":"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"}
|
|
@@ -78,7 +78,7 @@ export interface ChipsInputBaseProps<O extends ChipOption = ChipOption> extends
|
|
|
78
78
|
/**
|
|
79
79
|
* @private
|
|
80
80
|
*/
|
|
81
|
-
export interface ChipsInputBasePrivateProps<O extends ChipOption = ChipOption> extends ChipsInputBaseProps<O>, Pick<FormFieldProps, 'mode' | 'status' | 'before' | 'after'> {
|
|
81
|
+
export interface ChipsInputBasePrivateProps<O extends ChipOption = ChipOption> extends ChipsInputBaseProps<O>, Pick<FormFieldProps, 'mode' | 'status' | 'before' | 'after' | 'maxHeight'> {
|
|
82
82
|
onClear: () => void;
|
|
83
83
|
onAddChipOption: (value: string) => void;
|
|
84
84
|
onRemoveChipOption: (value: O | ChipOptionValue) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/ChipsInputBase/types.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/ChipsInputBase/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ChipsInputBase/types.ts"],"sourcesContent":["import * as React from 'react';\nimport type {\n HasAlign,\n HasComponent,\n HasDataAttribute,\n HasRef,\n HTMLAttributesWithRootRef,\n} from '../../types';\nimport { FormFieldProps } from '../FormField/FormField';\nimport { FormFieldClearButtonProps } from '../FormFieldClearButton/FormFieldClearButton';\n\nexport type NavigateTo = 'first' | 'prev' | 'next' | 'last';\n\nexport type ChipOptionValue = string | number;\n\nexport type ChipOptionLabel = React.ReactElement | string | number;\n\nexport type ChipOption = {\n value: ChipOptionValue;\n label: ChipOptionLabel;\n disabled?: boolean;\n [index: string]: any;\n};\n\nexport interface ChipProps\n extends HasComponent,\n HasDataAttribute,\n HTMLAttributesWithRootRef<HTMLElement> {\n value?: ChipOptionValue;\n removable?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n removeLabel?: string;\n before?: React.ReactNode;\n after?: React.ReactNode;\n onRemove?: (event: React.MouseEvent, value: ChipOptionValue) => void;\n}\n\nexport interface RenderChipProps extends ChipProps {\n label: ChipOptionLabel;\n}\n\nexport type RenderChip<O extends ChipOption = ChipOption> = (\n props: RenderChipProps,\n option: O,\n) => React.ReactNode;\n\nexport type GetOptionValue<O extends ChipOption = ChipOption> = (option: O) => ChipOptionValue;\n\nexport type GetOptionLabel<O extends ChipOption = ChipOption> = (option: O) => ChipOptionLabel;\n\nexport type GetNewOptionData<O extends ChipOption = ChipOption> = (\n value: ChipOptionValue,\n label: ChipOptionLabel,\n) => O;\n\nexport type OnChange<O extends ChipOption = ChipOption> = (value: O[]) => void;\n\nexport type OnInputChange = (event: React.ChangeEvent<HTMLInputElement>) => void;\n\n/**\n * @public\n */\nexport interface UseChipsInputBaseProps<O extends ChipOption = ChipOption> {\n disabled?: boolean;\n\n value?: O[];\n defaultValue?: O[];\n onChange?: OnChange<O>;\n\n inputValue?: string;\n defaultInputValue?: string;\n onInputChange?: OnInputChange;\n}\n\n/**\n * @private\n */\ntype UseChipsInputBaseOnlyNeededProps<O extends ChipOption = ChipOption> = Omit<\n UseChipsInputBaseProps<O>,\n 'onChange' | 'defaultValue' | 'defaultInputValue'\n>;\n\n/**\n * @public\n */\nexport interface ChipsInputBaseProps<O extends ChipOption = ChipOption>\n extends UseChipsInputBaseOnlyNeededProps<O>,\n Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n keyof UseChipsInputBaseProps<O> | 'defaultChecked'\n >,\n HasRef<HTMLInputElement>,\n HasAlign {\n getRootRef?: React.Ref<HTMLDivElement>;\n /**\n * Добавляет значение в список на событие `onBlur`\n */\n addOnBlur?: boolean;\n /**\n * Render prop функция для возврата своего компонента.\n *\n * @default Используется [Chip](#/Chip)\n */\n renderChip?: RenderChip;\n /**\n * Показывать ли кнопку для очистки значения\n */\n clearButtonShown?: boolean;\n /**\n * (e2e) testId кнопки очистки\n */\n clearButtonTestId?: string;\n /**\n * Кастомная кнопка для очистки значения.\n * Должна принимать обязательное свойство `onClick`\n */\n ClearButton?: React.ComponentType<FormFieldClearButtonProps>;\n}\n\n/**\n * @private\n */\nexport interface ChipsInputBasePrivateProps<O extends ChipOption = ChipOption>\n extends ChipsInputBaseProps<O>,\n Pick<FormFieldProps, 'mode' | 'status' | 'before' | 'after'> {\n onClear: () => void;\n onAddChipOption: (value: string) => void;\n onRemoveChipOption: (value: O | ChipOptionValue) => void;\n}\n"],"names":[],"mappings":";;;;;iEAAuB"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ChipsInputBase/types.ts"],"sourcesContent":["import * as React from 'react';\nimport type {\n HasAlign,\n HasComponent,\n HasDataAttribute,\n HasRef,\n HTMLAttributesWithRootRef,\n} from '../../types';\nimport { FormFieldProps } from '../FormField/FormField';\nimport { FormFieldClearButtonProps } from '../FormFieldClearButton/FormFieldClearButton';\n\nexport type NavigateTo = 'first' | 'prev' | 'next' | 'last';\n\nexport type ChipOptionValue = string | number;\n\nexport type ChipOptionLabel = React.ReactElement | string | number;\n\nexport type ChipOption = {\n value: ChipOptionValue;\n label: ChipOptionLabel;\n disabled?: boolean;\n [index: string]: any;\n};\n\nexport interface ChipProps\n extends HasComponent,\n HasDataAttribute,\n HTMLAttributesWithRootRef<HTMLElement> {\n value?: ChipOptionValue;\n removable?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n removeLabel?: string;\n before?: React.ReactNode;\n after?: React.ReactNode;\n onRemove?: (event: React.MouseEvent, value: ChipOptionValue) => void;\n}\n\nexport interface RenderChipProps extends ChipProps {\n label: ChipOptionLabel;\n}\n\nexport type RenderChip<O extends ChipOption = ChipOption> = (\n props: RenderChipProps,\n option: O,\n) => React.ReactNode;\n\nexport type GetOptionValue<O extends ChipOption = ChipOption> = (option: O) => ChipOptionValue;\n\nexport type GetOptionLabel<O extends ChipOption = ChipOption> = (option: O) => ChipOptionLabel;\n\nexport type GetNewOptionData<O extends ChipOption = ChipOption> = (\n value: ChipOptionValue,\n label: ChipOptionLabel,\n) => O;\n\nexport type OnChange<O extends ChipOption = ChipOption> = (value: O[]) => void;\n\nexport type OnInputChange = (event: React.ChangeEvent<HTMLInputElement>) => void;\n\n/**\n * @public\n */\nexport interface UseChipsInputBaseProps<O extends ChipOption = ChipOption> {\n disabled?: boolean;\n\n value?: O[];\n defaultValue?: O[];\n onChange?: OnChange<O>;\n\n inputValue?: string;\n defaultInputValue?: string;\n onInputChange?: OnInputChange;\n}\n\n/**\n * @private\n */\ntype UseChipsInputBaseOnlyNeededProps<O extends ChipOption = ChipOption> = Omit<\n UseChipsInputBaseProps<O>,\n 'onChange' | 'defaultValue' | 'defaultInputValue'\n>;\n\n/**\n * @public\n */\nexport interface ChipsInputBaseProps<O extends ChipOption = ChipOption>\n extends UseChipsInputBaseOnlyNeededProps<O>,\n Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n keyof UseChipsInputBaseProps<O> | 'defaultChecked'\n >,\n HasRef<HTMLInputElement>,\n HasAlign {\n getRootRef?: React.Ref<HTMLDivElement>;\n /**\n * Добавляет значение в список на событие `onBlur`\n */\n addOnBlur?: boolean;\n /**\n * Render prop функция для возврата своего компонента.\n *\n * @default Используется [Chip](#/Chip)\n */\n renderChip?: RenderChip;\n /**\n * Показывать ли кнопку для очистки значения\n */\n clearButtonShown?: boolean;\n /**\n * (e2e) testId кнопки очистки\n */\n clearButtonTestId?: string;\n /**\n * Кастомная кнопка для очистки значения.\n * Должна принимать обязательное свойство `onClick`\n */\n ClearButton?: React.ComponentType<FormFieldClearButtonProps>;\n}\n\n/**\n * @private\n */\nexport interface ChipsInputBasePrivateProps<O extends ChipOption = ChipOption>\n extends ChipsInputBaseProps<O>,\n Pick<FormFieldProps, 'mode' | 'status' | 'before' | 'after' | 'maxHeight'> {\n onClear: () => void;\n onAddChipOption: (value: string) => void;\n onRemoveChipOption: (value: O | ChipOptionValue) => void;\n}\n"],"names":[],"mappings":";;;;;iEAAuB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Clickable.d.ts","sourceRoot":"","sources":["../../../../src/components/Clickable/Clickable.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,qBAAqB,EAEtB,MAAM,sCAAsC,CAAC;
|
|
1
|
+
{"version":3,"file":"Clickable.d.ts","sourceRoot":"","sources":["../../../../src/components/Clickable/Clickable.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,qBAAqB,EAEtB,MAAM,sCAAsC,CAAC;AAG9C,OAAO,EAAiB,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACnF,OAAO,EAGL,UAAU,EAEX,MAAM,YAAY,CAAC;AAGpB,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,WAAW,CAC7C,SAAQ,kBAAkB,CAAC,CAAC,CAAC,EAC3B,qBAAqB,EACrB,UAAU;CAAG;AA0FjB;;GAEG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,OAAO,CAQnE;AA2CD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,wEAIxB,cAAc,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,SAqB5B,CAAC"}
|
|
@@ -24,8 +24,8 @@ const _vkjs = require("@vkontakte/vkjs");
|
|
|
24
24
|
const _useFocusVisible = require("../../hooks/useFocusVisible");
|
|
25
25
|
const _useFocusVisibleClassName = require("../../hooks/useFocusVisibleClassName");
|
|
26
26
|
const _mergeCalls = require("../../lib/mergeCalls");
|
|
27
|
+
const _utils = require("../../lib/utils");
|
|
27
28
|
const _RootComponent = require("../RootComponent/RootComponent");
|
|
28
|
-
const _useKeyboard = require("./useKeyboard");
|
|
29
29
|
const _useState = require("./useState");
|
|
30
30
|
/**
|
|
31
31
|
* Некликабельный компонент. Отключаем возможность нажимать на компонент.
|
|
@@ -86,8 +86,9 @@ const _useState = require("./useState");
|
|
|
86
86
|
"stateClassName",
|
|
87
87
|
"setLockBubblingImmediate"
|
|
88
88
|
]);
|
|
89
|
-
const
|
|
90
|
-
|
|
89
|
+
const handlers = (0, _mergeCalls.mergeCalls)(focusEvents, stateEvents, {
|
|
90
|
+
onKeyDown: _utils.clickByKeyboardHandler
|
|
91
|
+
}, {
|
|
91
92
|
onPointerEnter,
|
|
92
93
|
onPointerLeave,
|
|
93
94
|
onPointerDown,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport {\n FocusVisibleModeProps,\n useFocusVisibleClassName,\n} from '../../hooks/useFocusVisibleClassName';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport {\n FocusVisibleModeProps,\n useFocusVisibleClassName,\n} from '../../hooks/useFocusVisibleClassName';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { clickByKeyboardHandler } from '../../lib/utils';\nimport { RootComponent, RootComponentProps } from '../RootComponent/RootComponent';\nimport {\n ClickableLockStateContext,\n DEFAULT_ACTIVE_EFFECT_DELAY,\n StateProps,\n useState,\n} from './useState';\nimport styles from './Clickable.module.css';\n\nexport interface ClickableProps<T = HTMLElement>\n extends RootComponentProps<T>,\n FocusVisibleModeProps,\n StateProps {}\n\n/**\n * Некликабельный компонент. Отключаем возможность нажимать на компонент.\n */\nconst NonClickable = <T,>({\n href,\n onClick,\n onClickCapture,\n activeClassName,\n hoverClassName,\n hasActive,\n hasHover,\n hovered,\n activated,\n activeEffectDelay,\n ...restProps\n}: ClickableProps<T>) => <RootComponent {...restProps} />;\n\n/**\n * Кликабельный компонент. Добавляем кучу обвесов\n */\nconst RealClickable = <T,>({\n baseClassName,\n children,\n focusVisibleMode = 'inside',\n activeClassName,\n hoverClassName,\n activeEffectDelay = DEFAULT_ACTIVE_EFFECT_DELAY,\n hasHover = true,\n hasActive = true,\n hovered,\n activated,\n onPointerEnter,\n onPointerLeave,\n onPointerDown,\n onPointerCancel,\n onPointerUp,\n onBlur,\n onFocus,\n onKeyDown,\n ...restProps\n}: ClickableProps<T>) => {\n const { focusVisible, ...focusEvents } = useFocusVisible();\n const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: focusVisibleMode });\n\n const { stateClassName, setLockBubblingImmediate, ...stateEvents } = useState({\n activeClassName,\n hoverClassName,\n activeEffectDelay,\n hasHover,\n hasActive,\n hovered,\n activated,\n });\n\n const handlers = mergeCalls(\n focusEvents,\n stateEvents,\n { onKeyDown: clickByKeyboardHandler },\n {\n onPointerEnter,\n onPointerLeave,\n onPointerDown,\n onPointerCancel,\n onPointerUp,\n onBlur,\n onFocus,\n onKeyDown,\n },\n );\n\n return (\n <RootComponent\n baseClassName={classNames(\n baseClassName,\n styles['Clickable__realClickable'],\n focusVisibleClassNames,\n stateClassName,\n )}\n {...handlers}\n {...restProps}\n >\n <ClickableLockStateContext.Provider value={setLockBubblingImmediate}>\n {children}\n </ClickableLockStateContext.Provider>\n </RootComponent>\n );\n};\n\n/**\n * Проверяем, является ли компонент кликабельным\n */\nexport function checkClickable<T>(props: ClickableProps<T>): boolean {\n return (\n (props.href !== undefined ||\n props.onClick !== undefined ||\n props.onClickCapture !== undefined ||\n props.Component === 'label') &&\n !props.disabled\n );\n}\n\n/**\n * Определяет правильный компонент и его свойства\n *\n * - если передан Component, используем его\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n */\nfunction component<T>({\n Component,\n onClick,\n onClickCapture,\n href,\n disabled,\n}: RootComponentProps<T>): RootComponentProps<T> {\n if (Component !== undefined) {\n return { Component };\n } else if (href !== undefined) {\n return { 'Component': 'a', 'aria-disabled': disabled };\n } else if (onClick !== undefined || onClickCapture !== undefined) {\n return {\n 'Component': 'div',\n 'role': 'button',\n 'tabIndex': disabled ? undefined : 0,\n 'aria-disabled': disabled,\n };\n }\n\n return {};\n}\n\nconst getUserAgentResetClassName = (Component?: React.ElementType) => {\n if (Component === 'a') {\n return styles.Clickable__resetLinkStyle;\n }\n if (Component === 'button') {\n return styles.Clickable__resetButtonStyle;\n }\n return;\n};\n\n/**\n * Базовый кликабельный корневой компонент.\n *\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n *\n * Отвечает за:\n *\n * - стейты наведения и нажатия\n * - a11y компонентов\n */\nexport const Clickable = <T,>({\n focusVisibleMode = 'inside',\n baseClassName: baseClassNameProp,\n ...restProps\n}: ClickableProps<T>): React.ReactNode => {\n const commonProps = component(restProps);\n const isClickable = checkClickable(restProps);\n const baseClassName = classNames(\n baseClassNameProp,\n getUserAgentResetClassName(commonProps.Component),\n styles['Clickable__host'],\n );\n\n if (isClickable) {\n return (\n <RealClickable\n baseClassName={baseClassName}\n focusVisibleMode={focusVisibleMode}\n {...commonProps}\n {...restProps}\n />\n );\n }\n\n return <NonClickable baseClassName={baseClassName} {...commonProps} {...restProps} />;\n};\n"],"names":["Clickable","checkClickable","NonClickable","href","onClick","onClickCapture","activeClassName","hoverClassName","hasActive","hasHover","hovered","activated","activeEffectDelay","restProps","RootComponent","RealClickable","baseClassName","children","focusVisibleMode","DEFAULT_ACTIVE_EFFECT_DELAY","onPointerEnter","onPointerLeave","onPointerDown","onPointerCancel","onPointerUp","onBlur","onFocus","onKeyDown","useFocusVisible","focusVisible","focusEvents","focusVisibleClassNames","useFocusVisibleClassName","mode","useState","stateClassName","setLockBubblingImmediate","stateEvents","handlers","mergeCalls","clickByKeyboardHandler","classNames","ClickableLockStateContext","Provider","value","props","undefined","Component","disabled","component","getUserAgentResetClassName","baseClassNameProp","commonProps","isClickable"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/CustomSelect/CustomSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAmB,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/CustomSelect/CustomSelect.tsx"],"names":[],"mappings":"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"}
|
|
@@ -21,7 +21,6 @@ const _useFocusWithin = require("../../hooks/useFocusWithin");
|
|
|
21
21
|
const _dom = require("../../lib/dom");
|
|
22
22
|
const _select = require("../../lib/select");
|
|
23
23
|
const _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
|
|
24
|
-
const _utils = require("../../lib/utils");
|
|
25
24
|
const _warnOnce = require("../../lib/warnOnce");
|
|
26
25
|
const _CustomSelectDropdown = require("../CustomSelectDropdown/CustomSelectDropdown");
|
|
27
26
|
const _CustomSelectOption = require("../CustomSelectOption/CustomSelectOption");
|
|
@@ -131,6 +130,7 @@ function CustomSelect(props) {
|
|
|
131
130
|
const handleRootRef = (0, _useExternRef.useExternRef)(containerRef, getRootRef);
|
|
132
131
|
const scrollBoxRef = _react.useRef(null);
|
|
133
132
|
const selectElRef = (0, _useExternRef.useExternRef)(getRef);
|
|
133
|
+
const optionsWrapperRef = _react.useRef(null);
|
|
134
134
|
const [focusedOptionIndex, setFocusedOptionIndex] = _react.useState(-1);
|
|
135
135
|
const [isControlledOutside, setIsControlledOutside] = _react.useState(props.value !== undefined);
|
|
136
136
|
const [inputValue, setInputValue] = _react.useState('');
|
|
@@ -178,7 +178,8 @@ function CustomSelect(props) {
|
|
|
178
178
|
]);
|
|
179
179
|
const scrollToElement = _react.useCallback((index, center = false)=>{
|
|
180
180
|
const dropdown = scrollBoxRef.current;
|
|
181
|
-
const
|
|
181
|
+
const optionsWrapper = optionsWrapperRef.current;
|
|
182
|
+
const item = dropdown && optionsWrapper ? optionsWrapper.children[index] : null;
|
|
182
183
|
if (!item || !dropdown) {
|
|
183
184
|
return;
|
|
184
185
|
}
|
|
@@ -334,7 +335,7 @@ function CustomSelect(props) {
|
|
|
334
335
|
open,
|
|
335
336
|
opened
|
|
336
337
|
]);
|
|
337
|
-
const handleKeyUp = _react.useMemo(()=>(0,
|
|
338
|
+
const handleKeyUp = _react.useMemo(()=>(0, _vkjs.debounce)(resetKeyboardInput, 1000), [
|
|
338
339
|
resetKeyboardInput
|
|
339
340
|
]);
|
|
340
341
|
const focusOption = _react.useCallback((type)=>{
|
|
@@ -511,7 +512,10 @@ function CustomSelect(props) {
|
|
|
511
512
|
popupAriaId
|
|
512
513
|
]);
|
|
513
514
|
const resolvedContent = _react.useMemo(()=>{
|
|
514
|
-
const defaultDropdownContent = (options === null || options === void 0 ? void 0 : options.length) > 0 ?
|
|
515
|
+
const defaultDropdownContent = (options === null || options === void 0 ? void 0 : options.length) > 0 ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
|
|
516
|
+
ref: optionsWrapperRef,
|
|
517
|
+
children: options.map(renderOption)
|
|
518
|
+
}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_Footnote.Footnote, {
|
|
515
519
|
className: "vkuiCustomSelect__empty",
|
|
516
520
|
children: emptyText
|
|
517
521
|
});
|