@skbkontur/react-ui 4.1.1 → 4.2.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/CHANGELOG.md +38 -0
- package/cjs/components/Autocomplete/Autocomplete.d.ts +3 -0
- package/cjs/components/Autocomplete/Autocomplete.js +12 -3
- package/cjs/components/Autocomplete/Autocomplete.js.map +1 -1
- package/cjs/components/Button/Button.d.ts +3 -0
- package/cjs/components/Button/Button.js +8 -4
- package/cjs/components/Button/Button.js.map +1 -1
- package/cjs/components/Button/Button.styles.d.ts +1 -1
- package/cjs/components/Button/Button.styles.js +6 -6
- package/cjs/components/Button/Button.styles.js.map +1 -1
- package/cjs/components/Center/Center.d.ts +3 -0
- package/cjs/components/Center/Center.js +8 -3
- package/cjs/components/Center/Center.js.map +1 -1
- package/cjs/components/Checkbox/Checkbox.d.ts +8 -0
- package/cjs/components/Checkbox/Checkbox.js +37 -3
- package/cjs/components/Checkbox/Checkbox.js.map +1 -1
- package/cjs/components/Checkbox/Checkbox.styles.d.ts +1 -0
- package/cjs/components/Checkbox/Checkbox.styles.js +23 -17
- package/cjs/components/Checkbox/Checkbox.styles.js.map +1 -1
- package/cjs/components/CurrencyInput/CurrencyInput.d.ts +4 -1
- package/cjs/components/CurrencyInput/CurrencyInput.js +23 -5
- package/cjs/components/CurrencyInput/CurrencyInput.js.map +1 -1
- package/cjs/components/CurrencyLabel/CurrencyLabel.d.ts +3 -0
- package/cjs/components/CurrencyLabel/CurrencyLabel.js +6 -2
- package/cjs/components/CurrencyLabel/CurrencyLabel.js.map +1 -1
- package/cjs/components/DateInput/DateInput.js +5 -1
- package/cjs/components/DateInput/DateInput.js.map +1 -1
- package/cjs/components/DateInput/helpers/InternalDateMediator.d.ts +2 -2
- package/cjs/components/DateInput/helpers/InternalDateMediator.js +7 -3
- package/cjs/components/DateInput/helpers/InternalDateMediator.js.map +1 -1
- package/cjs/components/DateInput/helpers/inputNumber.d.ts +1 -1
- package/cjs/components/DateInput/helpers/inputNumber.js +45 -12
- package/cjs/components/DateInput/helpers/inputNumber.js.map +1 -1
- package/cjs/components/DatePicker/DatePicker.d.ts +5 -0
- package/cjs/components/DatePicker/DatePicker.js +14 -3
- package/cjs/components/DatePicker/DatePicker.js.map +1 -1
- package/cjs/components/DatePicker/Picker.js +7 -2
- package/cjs/components/DatePicker/Picker.js.map +1 -1
- package/cjs/components/Dropdown/Dropdown.d.ts +3 -0
- package/cjs/components/Dropdown/Dropdown.js +7 -2
- package/cjs/components/Dropdown/Dropdown.js.map +1 -1
- package/cjs/components/FileUploader/FileUploader.d.ts +5 -0
- package/cjs/components/FileUploader/FileUploader.js +10 -4
- package/cjs/components/FileUploader/FileUploader.js.map +1 -1
- package/cjs/components/FxInput/FxInput.d.ts +3 -0
- package/cjs/components/FxInput/FxInput.js +7 -3
- package/cjs/components/FxInput/FxInput.js.map +1 -1
- package/cjs/components/Gapped/Gapped.d.ts +4 -0
- package/cjs/components/Gapped/Gapped.js +11 -5
- package/cjs/components/Gapped/Gapped.js.map +1 -1
- package/cjs/components/GlobalLoader/GlobalLoader.d.ts +3 -0
- package/cjs/components/GlobalLoader/GlobalLoader.js +6 -2
- package/cjs/components/GlobalLoader/GlobalLoader.js.map +1 -1
- package/cjs/components/GlobalLoader/GlobalLoaderView.styles.js +5 -7
- package/cjs/components/GlobalLoader/GlobalLoaderView.styles.js.map +1 -1
- package/cjs/components/Group/Group.d.ts +3 -0
- package/cjs/components/Group/Group.js +7 -3
- package/cjs/components/Group/Group.js.map +1 -1
- package/cjs/components/Input/Input.d.ts +3 -0
- package/cjs/components/Input/Input.js +7 -3
- package/cjs/components/Input/Input.js.map +1 -1
- package/cjs/components/Link/Link.d.ts +4 -1
- package/cjs/components/Link/Link.js +8 -4
- package/cjs/components/Link/Link.js.map +1 -1
- package/cjs/components/Loader/Loader.d.ts +4 -0
- package/cjs/components/Loader/Loader.js +8 -3
- package/cjs/components/Loader/Loader.js.map +1 -1
- package/cjs/components/MenuHeader/MenuHeader.d.ts +3 -0
- package/cjs/components/MenuHeader/MenuHeader.js +7 -2
- package/cjs/components/MenuHeader/MenuHeader.js.map +1 -1
- package/cjs/components/MenuItem/MenuItem.d.ts +5 -1
- package/cjs/components/MenuItem/MenuItem.js +11 -5
- package/cjs/components/MenuItem/MenuItem.js.map +1 -1
- package/cjs/components/MenuSeparator/MenuSeparator.d.ts +3 -0
- package/cjs/components/MenuSeparator/MenuSeparator.js +7 -3
- package/cjs/components/MenuSeparator/MenuSeparator.js.map +1 -1
- package/cjs/components/Modal/Modal.d.ts +5 -0
- package/cjs/components/Modal/Modal.js +9 -3
- package/cjs/components/Modal/Modal.js.map +1 -1
- package/cjs/components/Modal/ModalClose.js +3 -2
- package/cjs/components/Modal/ModalClose.js.map +1 -1
- package/cjs/components/Modal/ModalFooter.d.ts +3 -0
- package/cjs/components/Modal/ModalFooter.js +7 -2
- package/cjs/components/Modal/ModalFooter.js.map +1 -1
- package/cjs/components/Modal/ModalHeader.d.ts +3 -0
- package/cjs/components/Modal/ModalHeader.js +8 -2
- package/cjs/components/Modal/ModalHeader.js.map +1 -1
- package/cjs/components/Paging/Paging.d.ts +8 -1
- package/cjs/components/Paging/Paging.js +15 -7
- package/cjs/components/Paging/Paging.js.map +1 -1
- package/cjs/components/PasswordInput/PasswordInput.d.ts +6 -1
- package/cjs/components/PasswordInput/PasswordInput.js +21 -15
- package/cjs/components/PasswordInput/PasswordInput.js.map +1 -1
- package/cjs/components/PasswordInput/PasswordInputIcon.js +5 -1
- package/cjs/components/PasswordInput/PasswordInputIcon.js.map +1 -1
- package/cjs/components/Radio/Radio.d.ts +3 -0
- package/cjs/components/Radio/Radio.js +7 -3
- package/cjs/components/Radio/Radio.js.map +1 -1
- package/cjs/components/RadioGroup/RadioGroup.d.ts +9 -0
- package/cjs/components/RadioGroup/RadioGroup.js +21 -4
- package/cjs/components/RadioGroup/RadioGroup.js.map +1 -1
- package/cjs/components/ScrollContainer/ScrollContainer.d.ts +4 -0
- package/cjs/components/ScrollContainer/ScrollContainer.js +14 -4
- package/cjs/components/ScrollContainer/ScrollContainer.js.map +1 -1
- package/cjs/components/Select/Select.d.ts +3 -0
- package/cjs/components/Select/Select.js +14 -6
- package/cjs/components/Select/Select.js.map +1 -1
- package/cjs/components/SidePage/SidePage.d.ts +4 -0
- package/cjs/components/SidePage/SidePage.js +7 -2
- package/cjs/components/SidePage/SidePage.js.map +1 -1
- package/cjs/components/SidePage/SidePageBody.d.ts +3 -0
- package/cjs/components/SidePage/SidePageBody.js +10 -3
- package/cjs/components/SidePage/SidePageBody.js.map +1 -1
- package/cjs/components/SidePage/SidePageContainer.d.ts +3 -0
- package/cjs/components/SidePage/SidePageContainer.js +7 -2
- package/cjs/components/SidePage/SidePageContainer.js.map +1 -1
- package/cjs/components/SidePage/SidePageFooter.d.ts +3 -0
- package/cjs/components/SidePage/SidePageFooter.js +11 -3
- package/cjs/components/SidePage/SidePageFooter.js.map +1 -1
- package/cjs/components/SidePage/SidePageHeader.d.ts +4 -0
- package/cjs/components/SidePage/SidePageHeader.js +9 -4
- package/cjs/components/SidePage/SidePageHeader.js.map +1 -1
- package/cjs/components/Spinner/Spinner.d.ts +3 -0
- package/cjs/components/Spinner/Spinner.js +7 -3
- package/cjs/components/Spinner/Spinner.js.map +1 -1
- package/cjs/components/Sticky/Sticky.d.ts +3 -0
- package/cjs/components/Sticky/Sticky.js +7 -3
- package/cjs/components/Sticky/Sticky.js.map +1 -1
- package/cjs/components/Switcher/Switcher.d.ts +3 -0
- package/cjs/components/Switcher/Switcher.js +7 -3
- package/cjs/components/Switcher/Switcher.js.map +1 -1
- package/cjs/components/Tabs/Indicator.js +4 -2
- package/cjs/components/Tabs/Indicator.js.map +1 -1
- package/cjs/components/Tabs/Tab.d.ts +3 -0
- package/cjs/components/Tabs/Tab.js +7 -2
- package/cjs/components/Tabs/Tab.js.map +1 -1
- package/cjs/components/Tabs/Tabs.d.ts +4 -0
- package/cjs/components/Tabs/Tabs.js +12 -3
- package/cjs/components/Tabs/Tabs.js.map +1 -1
- package/cjs/components/Textarea/Textarea.d.ts +4 -0
- package/cjs/components/Textarea/Textarea.js +8 -3
- package/cjs/components/Textarea/Textarea.js.map +1 -1
- package/cjs/components/Textarea/TextareaCounter.js +10 -9
- package/cjs/components/Textarea/TextareaCounter.js.map +1 -1
- package/cjs/components/Toast/Toast.d.ts +6 -0
- package/cjs/components/Toast/Toast.js +9 -2
- package/cjs/components/Toast/Toast.js.map +1 -1
- package/cjs/components/Toast/ToastStatic.js +1 -1
- package/cjs/components/Toast/ToastStatic.js.map +1 -1
- package/cjs/components/Toast/ToastView.js +5 -4
- package/cjs/components/Toast/ToastView.js.map +1 -1
- package/cjs/components/Toggle/Toggle.d.ts +3 -0
- package/cjs/components/Toggle/Toggle.js +7 -3
- package/cjs/components/Toggle/Toggle.js.map +1 -1
- package/cjs/components/Token/Token.d.ts +3 -0
- package/cjs/components/Token/Token.js +8 -3
- package/cjs/components/Token/Token.js.map +1 -1
- package/cjs/components/TokenInput/TokenInput.d.ts +14 -0
- package/cjs/components/TokenInput/TokenInput.js +23 -3
- package/cjs/components/TokenInput/TokenInput.js.map +1 -1
- package/cjs/components/TokenInput/TokenInputMenu.js +4 -3
- package/cjs/components/TokenInput/TokenInputMenu.js.map +1 -1
- package/cjs/components/Tooltip/Tooltip.d.ts +3 -0
- package/cjs/components/Tooltip/Tooltip.js +7 -2
- package/cjs/components/Tooltip/Tooltip.js.map +1 -1
- package/cjs/components/TooltipMenu/TooltipMenu.d.ts +3 -0
- package/cjs/components/TooltipMenu/TooltipMenu.js +7 -2
- package/cjs/components/TooltipMenu/TooltipMenu.js.map +1 -1
- package/cjs/internal/Calendar/Calendar.d.ts +6 -0
- package/cjs/internal/Calendar/Calendar.js +9 -2
- package/cjs/internal/Calendar/Calendar.js.map +1 -1
- package/cjs/internal/Calendar/MonthView.js +5 -4
- package/cjs/internal/Calendar/MonthView.js.map +1 -1
- package/cjs/internal/CommonWrapper/CommonWrapper.d.ts +1 -0
- package/cjs/internal/CommonWrapper/CommonWrapper.js +4 -2
- package/cjs/internal/CommonWrapper/CommonWrapper.js.map +1 -1
- package/cjs/internal/CustomComboBox/ComboBoxMenu.d.ts +7 -0
- package/cjs/internal/CustomComboBox/ComboBoxMenu.js +23 -5
- package/cjs/internal/CustomComboBox/ComboBoxMenu.js.map +1 -1
- package/cjs/internal/CustomComboBox/ComboBoxView.js +4 -2
- package/cjs/internal/CustomComboBox/ComboBoxView.js.map +1 -1
- package/cjs/internal/CustomComboBox/CustomComboBox.d.ts +3 -0
- package/cjs/internal/CustomComboBox/CustomComboBox.js +6 -2
- package/cjs/internal/CustomComboBox/CustomComboBox.js.map +1 -1
- package/cjs/internal/DataTids/DATATIDS.md +12 -0
- package/cjs/internal/DataTids/DataTids.d.ts +12 -0
- package/cjs/internal/DataTids/DataTids.js +46 -0
- package/cjs/internal/DataTids/DataTids.js.map +1 -0
- package/cjs/internal/DataTids/DataTids.styles.d.ts +7 -0
- package/cjs/internal/DataTids/DataTids.styles.js +41 -0
- package/cjs/internal/DataTids/DataTids.styles.js.map +1 -0
- package/cjs/internal/DataTids/componentsDataTids.d.ts +5 -0
- package/cjs/internal/DataTids/componentsDataTids.js +16 -0
- package/cjs/internal/DataTids/componentsDataTids.js.map +1 -0
- package/cjs/internal/DateSelect/DateSelect.d.ts +4 -0
- package/cjs/internal/DateSelect/DateSelect.js +8 -3
- package/cjs/internal/DateSelect/DateSelect.js.map +1 -1
- package/cjs/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.d.ts +7 -0
- package/cjs/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.js +14 -6
- package/cjs/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.js.map +1 -1
- package/cjs/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.d.ts +3 -0
- package/cjs/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.js +6 -2
- package/cjs/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.js.map +1 -1
- package/cjs/internal/InputLikeText/InputLikeText.d.ts +4 -0
- package/cjs/internal/InputLikeText/InputLikeText.js +10 -4
- package/cjs/internal/InputLikeText/InputLikeText.js.map +1 -1
- package/cjs/internal/InternalMenu/InternalMenu.d.ts +3 -0
- package/cjs/internal/InternalMenu/InternalMenu.js +9 -8
- package/cjs/internal/InternalMenu/InternalMenu.js.map +1 -1
- package/cjs/internal/MaskedInput/MaskedInput.d.ts +3 -0
- package/cjs/internal/MaskedInput/MaskedInput.js +11 -5
- package/cjs/internal/MaskedInput/MaskedInput.js.map +1 -1
- package/cjs/internal/Menu/Menu.d.ts +3 -0
- package/cjs/internal/Menu/Menu.js +10 -8
- package/cjs/internal/Menu/Menu.js.map +1 -1
- package/cjs/internal/MobilePopup/MobilePopup.d.ts +4 -0
- package/cjs/internal/MobilePopup/MobilePopup.js +10 -3
- package/cjs/internal/MobilePopup/MobilePopup.js.map +1 -1
- package/cjs/internal/Popup/Popup.d.ts +5 -0
- package/cjs/internal/Popup/Popup.js +10 -4
- package/cjs/internal/Popup/Popup.js.map +1 -1
- package/cjs/internal/Popup/PopupPin.js +2 -1
- package/cjs/internal/Popup/PopupPin.js.map +1 -1
- package/cjs/internal/PopupMenu/PopupMenu.d.ts +4 -0
- package/cjs/internal/PopupMenu/PopupMenu.js +9 -4
- package/cjs/internal/PopupMenu/PopupMenu.js.map +1 -1
- package/cjs/internal/icons/16px/index.js +1 -1
- package/cjs/internal/icons/16px/index.js.map +1 -1
- package/cjs/lib/date/InternalDateGetter.d.ts +1 -1
- package/cjs/lib/date/InternalDateGetter.js +4 -1
- package/cjs/lib/date/InternalDateGetter.js.map +1 -1
- package/cjs/lib/date/InternalDateValidator.js +32 -22
- package/cjs/lib/date/InternalDateValidator.js.map +1 -1
- package/cjs/lib/date/types.d.ts +4 -0
- package/cjs/lib/date/types.js.map +1 -1
- package/cjs/lib/events/MouseDrag.js +5 -1
- package/cjs/lib/events/MouseDrag.js.map +1 -1
- package/cjs/lib/listenFocusOutside.js +1 -1
- package/cjs/lib/listenFocusOutside.js.map +1 -1
- package/components/Autocomplete/Autocomplete/Autocomplete.js +10 -6
- package/components/Autocomplete/Autocomplete/Autocomplete.js.map +1 -1
- package/components/Autocomplete/Autocomplete.d.ts +3 -0
- package/components/Button/Button/Button.js +5 -1
- package/components/Button/Button/Button.js.map +1 -1
- package/components/Button/Button.d.ts +3 -0
- package/components/Button/Button.styles/Button.styles.js +6 -6
- package/components/Button/Button.styles/Button.styles.js.map +1 -1
- package/components/Button/Button.styles.d.ts +1 -1
- package/components/Center/Center/Center.js +10 -5
- package/components/Center/Center/Center.js.map +1 -1
- package/components/Center/Center.d.ts +3 -0
- package/components/Checkbox/Checkbox/Checkbox.js +33 -2
- package/components/Checkbox/Checkbox/Checkbox.js.map +1 -1
- package/components/Checkbox/Checkbox.d.ts +8 -0
- package/components/Checkbox/Checkbox.styles/Checkbox.styles.js +20 -17
- package/components/Checkbox/Checkbox.styles/Checkbox.styles.js.map +1 -1
- package/components/Checkbox/Checkbox.styles.d.ts +1 -0
- package/components/CurrencyInput/CurrencyInput/CurrencyInput.js +27 -12
- package/components/CurrencyInput/CurrencyInput/CurrencyInput.js.map +1 -1
- package/components/CurrencyInput/CurrencyInput.d.ts +4 -1
- package/components/CurrencyLabel/CurrencyLabel/CurrencyLabel.js +6 -1
- package/components/CurrencyLabel/CurrencyLabel/CurrencyLabel.js.map +1 -1
- package/components/CurrencyLabel/CurrencyLabel.d.ts +3 -0
- package/components/DateInput/DateInput/DateInput.js +9 -1
- package/components/DateInput/DateInput/DateInput.js.map +1 -1
- package/components/DateInput/helpers/InternalDateMediator/InternalDateMediator.js +9 -3
- package/components/DateInput/helpers/InternalDateMediator/InternalDateMediator.js.map +1 -1
- package/components/DateInput/helpers/InternalDateMediator.d.ts +2 -2
- package/components/DateInput/helpers/inputNumber/inputNumber.js +53 -16
- package/components/DateInput/helpers/inputNumber/inputNumber.js.map +1 -1
- package/components/DateInput/helpers/inputNumber.d.ts +1 -1
- package/components/DatePicker/DatePicker/DatePicker.js +6 -0
- package/components/DatePicker/DatePicker/DatePicker.js.map +1 -1
- package/components/DatePicker/DatePicker.d.ts +5 -0
- package/components/DatePicker/Picker/Picker.js +3 -1
- package/components/DatePicker/Picker/Picker.js.map +1 -1
- package/components/Dropdown/Dropdown/Dropdown.js +9 -5
- package/components/Dropdown/Dropdown/Dropdown.js.map +1 -1
- package/components/Dropdown/Dropdown.d.ts +3 -0
- package/components/FileUploader/FileUploader/FileUploader.js +9 -2
- package/components/FileUploader/FileUploader/FileUploader.js.map +1 -1
- package/components/FileUploader/FileUploader.d.ts +5 -0
- package/components/FxInput/FxInput/FxInput.js +6 -2
- package/components/FxInput/FxInput/FxInput.js.map +1 -1
- package/components/FxInput/FxInput.d.ts +3 -0
- package/components/Gapped/Gapped/Gapped.js +14 -6
- package/components/Gapped/Gapped/Gapped.js.map +1 -1
- package/components/Gapped/Gapped.d.ts +4 -0
- package/components/GlobalLoader/GlobalLoader/GlobalLoader.js +4 -1
- package/components/GlobalLoader/GlobalLoader/GlobalLoader.js.map +1 -1
- package/components/GlobalLoader/GlobalLoader.d.ts +3 -0
- package/components/GlobalLoader/GlobalLoaderView.styles/GlobalLoaderView.styles.js +1 -2
- package/components/GlobalLoader/GlobalLoaderView.styles/GlobalLoaderView.styles.js.map +1 -1
- package/components/Group/Group/Group.js +4 -0
- package/components/Group/Group/Group.js.map +1 -1
- package/components/Group/Group.d.ts +3 -0
- package/components/Input/Input/Input.js +11 -6
- package/components/Input/Input/Input.js.map +1 -1
- package/components/Input/Input.d.ts +3 -0
- package/components/Link/Link/Link.js +11 -6
- package/components/Link/Link/Link.js.map +1 -1
- package/components/Link/Link.d.ts +4 -1
- package/components/Loader/Loader/Loader.js +10 -6
- package/components/Loader/Loader/Loader.js.map +1 -1
- package/components/Loader/Loader.d.ts +4 -0
- package/components/MenuHeader/MenuHeader/MenuHeader.js +4 -0
- package/components/MenuHeader/MenuHeader/MenuHeader.js.map +1 -1
- package/components/MenuHeader/MenuHeader.d.ts +3 -0
- package/components/MenuItem/MenuItem/MenuItem.js +16 -10
- package/components/MenuItem/MenuItem/MenuItem.js.map +1 -1
- package/components/MenuItem/MenuItem.d.ts +5 -1
- package/components/MenuSeparator/MenuSeparator/MenuSeparator.js +4 -0
- package/components/MenuSeparator/MenuSeparator/MenuSeparator.js.map +1 -1
- package/components/MenuSeparator/MenuSeparator.d.ts +3 -0
- package/components/Modal/Modal/Modal.js +7 -2
- package/components/Modal/Modal/Modal.js.map +1 -1
- package/components/Modal/Modal.d.ts +5 -0
- package/components/Modal/ModalClose/ModalClose.js +2 -1
- package/components/Modal/ModalClose/ModalClose.js.map +1 -1
- package/components/Modal/ModalFooter/ModalFooter.js +4 -0
- package/components/Modal/ModalFooter/ModalFooter.js.map +1 -1
- package/components/Modal/ModalFooter.d.ts +3 -0
- package/components/Modal/ModalHeader/ModalHeader.js +4 -0
- package/components/Modal/ModalHeader/ModalHeader.js.map +1 -1
- package/components/Modal/ModalHeader.d.ts +3 -0
- package/components/Paging/Paging/Paging.js +12 -5
- package/components/Paging/Paging/Paging.js.map +1 -1
- package/components/Paging/Paging.d.ts +8 -1
- package/components/PasswordInput/PasswordInput/PasswordInput.js +24 -19
- package/components/PasswordInput/PasswordInput/PasswordInput.js.map +1 -1
- package/components/PasswordInput/PasswordInput.d.ts +6 -1
- package/components/PasswordInput/PasswordInputIcon/PasswordInputIcon.js +8 -3
- package/components/PasswordInput/PasswordInputIcon/PasswordInputIcon.js.map +1 -1
- package/components/Radio/Radio/Radio.js +10 -5
- package/components/Radio/Radio/Radio.js.map +1 -1
- package/components/Radio/Radio.d.ts +3 -0
- package/components/RadioGroup/RadioGroup/RadioGroup.js +23 -11
- package/components/RadioGroup/RadioGroup/RadioGroup.js.map +1 -1
- package/components/RadioGroup/RadioGroup.d.ts +9 -0
- package/components/ScrollContainer/ScrollContainer/ScrollContainer.js +6 -1
- package/components/ScrollContainer/ScrollContainer/ScrollContainer.js.map +1 -1
- package/components/ScrollContainer/ScrollContainer.d.ts +4 -0
- package/components/Select/Select/Select.js +9 -3
- package/components/Select/Select/Select.js.map +1 -1
- package/components/Select/Select.d.ts +3 -0
- package/components/SidePage/SidePage/SidePage.js +6 -2
- package/components/SidePage/SidePage/SidePage.js.map +1 -1
- package/components/SidePage/SidePage.d.ts +4 -0
- package/components/SidePage/SidePageBody/SidePageBody.js +10 -6
- package/components/SidePage/SidePageBody/SidePageBody.js.map +1 -1
- package/components/SidePage/SidePageBody.d.ts +3 -0
- package/components/SidePage/SidePageContainer/SidePageContainer.js +10 -6
- package/components/SidePage/SidePageContainer/SidePageContainer.js.map +1 -1
- package/components/SidePage/SidePageContainer.d.ts +3 -0
- package/components/SidePage/SidePageFooter/SidePageFooter.js +10 -6
- package/components/SidePage/SidePageFooter/SidePageFooter.js.map +1 -1
- package/components/SidePage/SidePageFooter.d.ts +3 -0
- package/components/SidePage/SidePageHeader/SidePageHeader.js +12 -7
- package/components/SidePage/SidePageHeader/SidePageHeader.js.map +1 -1
- package/components/SidePage/SidePageHeader.d.ts +4 -0
- package/components/Spinner/Spinner/Spinner.js +8 -4
- package/components/Spinner/Spinner/Spinner.js.map +1 -1
- package/components/Spinner/Spinner.d.ts +3 -0
- package/components/Sticky/Sticky/Sticky.js +4 -0
- package/components/Sticky/Sticky/Sticky.js.map +1 -1
- package/components/Sticky/Sticky.d.ts +3 -0
- package/components/Switcher/Switcher/Switcher.js +4 -0
- package/components/Switcher/Switcher/Switcher.js.map +1 -1
- package/components/Switcher/Switcher.d.ts +3 -0
- package/components/Tabs/Indicator/Indicator.js +2 -0
- package/components/Tabs/Indicator/Indicator.js.map +1 -1
- package/components/Tabs/Tab/Tab.js +4 -0
- package/components/Tabs/Tab/Tab.js.map +1 -1
- package/components/Tabs/Tab.d.ts +3 -0
- package/components/Tabs/Tabs/Tabs.js +11 -6
- package/components/Tabs/Tabs/Tabs.js.map +1 -1
- package/components/Tabs/Tabs.d.ts +4 -0
- package/components/Textarea/Textarea/Textarea.js +15 -9
- package/components/Textarea/Textarea/Textarea.js.map +1 -1
- package/components/Textarea/Textarea.d.ts +4 -0
- package/components/Textarea/TextareaCounter/TextareaCounter.js +8 -3
- package/components/Textarea/TextareaCounter/TextareaCounter.js.map +1 -1
- package/components/Toast/Toast/Toast.js +16 -10
- package/components/Toast/Toast/Toast.js.map +1 -1
- package/components/Toast/Toast.d.ts +6 -0
- package/components/Toast/ToastStatic/ToastStatic.js +2 -2
- package/components/Toast/ToastStatic/ToastStatic.js.map +1 -1
- package/components/Toast/ToastView/ToastView.js +4 -3
- package/components/Toast/ToastView/ToastView.js.map +1 -1
- package/components/Toggle/Toggle/Toggle.js +8 -4
- package/components/Toggle/Toggle/Toggle.js.map +1 -1
- package/components/Toggle/Toggle.d.ts +3 -0
- package/components/Token/Token/Token.js +4 -0
- package/components/Token/Token/Token.js.map +1 -1
- package/components/Token/Token.d.ts +3 -0
- package/components/TokenInput/TokenInput/TokenInput.js +11 -2
- package/components/TokenInput/TokenInput/TokenInput.js.map +1 -1
- package/components/TokenInput/TokenInput.d.ts +14 -0
- package/components/TokenInput/TokenInputMenu/TokenInputMenu.js +2 -0
- package/components/TokenInput/TokenInputMenu/TokenInputMenu.js.map +1 -1
- package/components/Tooltip/Tooltip/Tooltip.js +4 -0
- package/components/Tooltip/Tooltip/Tooltip.js.map +1 -1
- package/components/Tooltip/Tooltip.d.ts +3 -0
- package/components/TooltipMenu/TooltipMenu/TooltipMenu.js +16 -12
- package/components/TooltipMenu/TooltipMenu/TooltipMenu.js.map +1 -1
- package/components/TooltipMenu/TooltipMenu.d.ts +3 -0
- package/internal/Calendar/Calendar/Calendar.js +7 -1
- package/internal/Calendar/Calendar/Calendar.js.map +1 -1
- package/internal/Calendar/Calendar.d.ts +6 -0
- package/internal/Calendar/MonthView/MonthView.js +4 -3
- package/internal/Calendar/MonthView/MonthView.js.map +1 -1
- package/internal/CommonWrapper/CommonWrapper/CommonWrapper.js +4 -5
- package/internal/CommonWrapper/CommonWrapper/CommonWrapper.js.map +1 -1
- package/internal/CommonWrapper/CommonWrapper.d.ts +1 -0
- package/internal/CustomComboBox/ComboBoxMenu/ComboBoxMenu.js +12 -5
- package/internal/CustomComboBox/ComboBoxMenu/ComboBoxMenu.js.map +1 -1
- package/internal/CustomComboBox/ComboBoxMenu.d.ts +7 -0
- package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js +2 -0
- package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js.map +1 -1
- package/internal/CustomComboBox/CustomComboBox/CustomComboBox.js +3 -0
- package/internal/CustomComboBox/CustomComboBox/CustomComboBox.js.map +1 -1
- package/internal/CustomComboBox/CustomComboBox.d.ts +3 -0
- package/internal/DataTids/DATATIDS.md +12 -0
- package/internal/DataTids/DataTids/DataTids.js +69 -0
- package/internal/DataTids/DataTids/DataTids.js.map +1 -0
- package/internal/DataTids/DataTids/package.json +6 -0
- package/internal/DataTids/DataTids.d.ts +12 -0
- package/internal/DataTids/DataTids.styles/DataTids.styles.js +22 -0
- package/internal/DataTids/DataTids.styles/DataTids.styles.js.map +1 -0
- package/internal/DataTids/DataTids.styles/package.json +6 -0
- package/internal/DataTids/DataTids.styles.d.ts +7 -0
- package/internal/DataTids/componentsDataTids/componentsDataTids.js +14 -0
- package/internal/DataTids/componentsDataTids/componentsDataTids.js.map +1 -0
- package/internal/DataTids/componentsDataTids/package.json +6 -0
- package/internal/DataTids/componentsDataTids.d.ts +5 -0
- package/internal/DateSelect/DateSelect/DateSelect.js +6 -2
- package/internal/DateSelect/DateSelect/DateSelect.js.map +1 -1
- package/internal/DateSelect/DateSelect.d.ts +4 -0
- package/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile/FileUploaderFile.js +12 -5
- package/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile/FileUploaderFile.js.map +1 -1
- package/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.d.ts +7 -0
- package/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList/FileUploaderFileList.js +4 -1
- package/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList/FileUploaderFileList.js.map +1 -1
- package/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.d.ts +3 -0
- package/internal/InputLikeText/InputLikeText/InputLikeText.js +8 -2
- package/internal/InputLikeText/InputLikeText/InputLikeText.js.map +1 -1
- package/internal/InputLikeText/InputLikeText.d.ts +4 -0
- package/internal/InternalMenu/InternalMenu/InternalMenu.js +6 -6
- package/internal/InternalMenu/InternalMenu/InternalMenu.js.map +1 -1
- package/internal/InternalMenu/InternalMenu.d.ts +3 -0
- package/internal/MaskedInput/MaskedInput/MaskedInput.js +8 -2
- package/internal/MaskedInput/MaskedInput/MaskedInput.js.map +1 -1
- package/internal/MaskedInput/MaskedInput.d.ts +3 -0
- package/internal/Menu/Menu/Menu.js +6 -5
- package/internal/Menu/Menu/Menu.js.map +1 -1
- package/internal/Menu/Menu.d.ts +3 -0
- package/internal/MobilePopup/MobilePopup/MobilePopup.js +6 -0
- package/internal/MobilePopup/MobilePopup/MobilePopup.js.map +1 -1
- package/internal/MobilePopup/MobilePopup.d.ts +4 -0
- package/internal/Popup/Popup/Popup.js +7 -2
- package/internal/Popup/Popup/Popup.js.map +1 -1
- package/internal/Popup/Popup.d.ts +5 -0
- package/internal/Popup/PopupPin/PopupPin.js +2 -0
- package/internal/Popup/PopupPin/PopupPin.js.map +1 -1
- package/internal/PopupMenu/PopupMenu/PopupMenu.js +7 -2
- package/internal/PopupMenu/PopupMenu/PopupMenu.js.map +1 -1
- package/internal/PopupMenu/PopupMenu.d.ts +4 -0
- package/internal/icons/16px/index/index.js +1 -1
- package/internal/icons/16px/index/index.js.map +1 -1
- package/lib/date/InternalDateGetter/InternalDateGetter.js +3 -1
- package/lib/date/InternalDateGetter/InternalDateGetter.js.map +1 -1
- package/lib/date/InternalDateGetter.d.ts +1 -1
- package/lib/date/InternalDateValidator/InternalDateValidator.js +55 -41
- package/lib/date/InternalDateValidator/InternalDateValidator.js.map +1 -1
- package/lib/date/types/types.js.map +1 -1
- package/lib/date/types.d.ts +4 -0
- package/lib/events/MouseDrag/MouseDrag.js +5 -1
- package/lib/events/MouseDrag/MouseDrag.js.map +1 -1
- package/lib/listenFocusOutside/listenFocusOutside.js +1 -1
- package/lib/listenFocusOutside/listenFocusOutside.js.map +1 -1
- package/package.json +4 -3
|
@@ -18,13 +18,17 @@ import { rootNode } from "../../../lib/rootNode";
|
|
|
18
18
|
import { getDOMRect } from "../../../lib/dom/getDOMRect";
|
|
19
19
|
import { styles } from "../SidePage.styles";
|
|
20
20
|
import { SidePageContext } from "../SidePageContext";
|
|
21
|
-
export
|
|
21
|
+
export var SidePageHeaderDataTids = {
|
|
22
|
+
root: 'SidePageHeader__root',
|
|
23
|
+
close: 'SidePage__close'
|
|
24
|
+
};
|
|
22
25
|
/**
|
|
23
|
-
* Шапка сайдпейджа
|
|
24
|
-
*
|
|
25
|
-
* @visibleName SidePage.Header
|
|
26
|
-
*/
|
|
27
|
-
|
|
26
|
+
* Шапка сайдпейджа
|
|
27
|
+
*
|
|
28
|
+
* @visibleName SidePage.Header
|
|
29
|
+
*/
|
|
30
|
+
|
|
31
|
+
export var SidePageHeader = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
|
|
28
32
|
_inheritsLoose(SidePageHeader, _React$Component);
|
|
29
33
|
|
|
30
34
|
function SidePageHeader() {
|
|
@@ -102,7 +106,7 @@ var SidePageHeader = responsiveLayout(_class = rootNode(_class = (_temp = _class
|
|
|
102
106
|
onFocus: _this.handleFocus,
|
|
103
107
|
onBlur: _this.handleBlur,
|
|
104
108
|
onClick: requestClose,
|
|
105
|
-
"data-tid":
|
|
109
|
+
"data-tid": SidePageHeaderDataTids.close,
|
|
106
110
|
tabIndex: 0
|
|
107
111
|
}, /*#__PURE__*/React.createElement(CrossIcon, null));
|
|
108
112
|
});
|
|
@@ -178,6 +182,7 @@ var SidePageHeader = responsiveLayout(_class = rootNode(_class = (_temp = _class
|
|
|
178
182
|
return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
|
|
179
183
|
rootNodeRef: this.setRootNode
|
|
180
184
|
}, this.props), /*#__PURE__*/React.createElement("div", {
|
|
185
|
+
"data-tid": SidePageHeaderDataTids.root,
|
|
181
186
|
ref: this.wrapperRef,
|
|
182
187
|
className: styles.headerWrapper()
|
|
183
188
|
}, isStickyDesktop || isStickyMobile ? /*#__PURE__*/React.createElement(Sticky, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["SidePageHeader.tsx"],"names":["React","Sticky","CrossIcon","isFunction","ThemeContext","CommonWrapper","cx","keyListener","responsiveLayout","rootNode","getDOMRect","styles","SidePageContext","SidePageHeader","context","state","isReadyToFix","focusedByTab","wrapper","sticky","lastRegularHeight","componentDidMount","window","addEventListener","update","setHasHeader","headerRef","componentWillUnmount","removeEventListener","reflow","updateReadyToFix","renderHeader","fixed","header","theme","headerFixed","mobileHeader","isMobileLayout","renderClose","title","mobileTitle","titleFixed","props","children","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperClose","wrapperCloseFixed","mobileWrapperClose","closeIcon","requestClose","close","closeFocus","handleFocus","handleBlur","wrapperScrolledUp","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","stickyRef","requestAnimationFrame","isTabPressed","render","renderMain","getStickyProp","isStickyDesktop","isStickyMobile","setRootNode","headerWrapper","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","Component","__KONTUR_REACT_UI__","contextType"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Sticky } from '../Sticky';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { isFunction } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageHeaderProps extends CommonProps {\n children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n sticky?: boolean;\n}\n\nexport interface SidePageHeaderState {\n isReadyToFix: boolean;\n focusedByTab: boolean;\n}\n\n/**\n * Шапка сайдпейджа\n *\n * @visibleName SidePage.Header\n */\n@responsiveLayout\n@rootNode\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n\n public static contextType = SidePageContext;\n public context: SidePageContextType = this.context;\n\n private isMobileLayout!: boolean;\n\n public state: SidePageHeaderState = {\n isReadyToFix: false,\n focusedByTab: false,\n };\n\n private theme!: Theme;\n private wrapper: HTMLElement | null = null;\n private sticky: Sticky | null = null;\n private lastRegularHeight = 0;\n private setRootNode!: TSetRootNode;\n\n public get regularHeight(): number {\n const { isReadyToFix } = this.state;\n if (!this.wrapper) {\n return 0;\n }\n if (!isReadyToFix) {\n this.lastRegularHeight = getDOMRect(this.wrapper).height;\n }\n return this.lastRegularHeight;\n }\n\n public get fixedHeaderHeight(): number {\n const { theme } = this;\n return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;\n }\n\n public componentDidMount = () => {\n window.addEventListener('scroll', this.update, true);\n this.context.setHasHeader?.();\n this.context.headerRef(this);\n };\n\n public componentWillUnmount = () => {\n window.removeEventListener('scroll', this.update, true);\n this.context.setHasHeader?.(false);\n this.context.headerRef(null);\n };\n\n public update = () => {\n this.sticky?.reflow();\n this.updateReadyToFix();\n };\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public getStickyProp() {\n if (typeof this.props.sticky !== 'undefined') {\n return this.props.sticky;\n }\n\n if (this.isMobileLayout) {\n return false;\n }\n\n return true;\n }\n\n private renderMain() {\n const { isReadyToFix } = this.state;\n\n const isStickyDesktop = !this.isMobileLayout && this.getStickyProp() && isReadyToFix;\n const isStickyMobile = this.isMobileLayout && this.getStickyProp();\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div ref={this.wrapperRef} className={styles.headerWrapper()}>\n {isStickyDesktop || isStickyMobile ? (\n <Sticky ref={this.stickyRef} side=\"top\">\n {this.renderHeader}\n </Sticky>\n ) : (\n this.renderHeader()\n )}\n </div>\n </CommonWrapper>\n );\n }\n\n private renderHeader = (fixed = false) => {\n return (\n <div\n className={cx(styles.header(this.theme), {\n [styles.headerFixed(this.theme)]: fixed,\n [styles.mobileHeader(this.theme)]: this.isMobileLayout,\n })}\n >\n {this.renderClose(fixed)}\n <div\n className={cx(styles.title(this.theme), {\n [styles.mobileTitle(this.theme)]: this.isMobileLayout,\n [styles.titleFixed()]: fixed,\n })}\n >\n {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n </div>\n </div>\n );\n };\n\n private renderClose = (fixed: boolean) => {\n const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n return (\n <div\n className={cx(styles.wrapperClose(this.theme), {\n [styles.wrapperCloseFixed(this.theme)]: fixed,\n [styles.mobileWrapperClose(this.theme)]: this.isMobileLayout,\n })}\n >\n {this.isMobileLayout ? (\n this.closeIcon\n ) : (\n <Sticky side=\"top\" offset={stickyOffset}>\n {this.closeIcon}\n </Sticky>\n )}\n </div>\n );\n };\n\n private closeIcon = () => (\n <SidePageContext.Consumer>\n {({ requestClose }) => (\n <button\n className={cx(styles.close(this.theme), {\n [styles.closeFocus(this.theme)]: this.state.focusedByTab,\n })}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n onClick={requestClose}\n data-tid=\"SidePage__close\"\n tabIndex={0}\n >\n <CrossIcon />\n </button>\n )}\n </SidePageContext.Consumer>\n );\n\n private updateReadyToFix = () => {\n if (this.wrapper) {\n const wrapperScrolledUp = getDOMRect(this.wrapper).top;\n const isReadyToFix = this.regularHeight + wrapperScrolledUp <= this.fixedHeaderHeight;\n this.setState((state) => (state.isReadyToFix !== isReadyToFix ? { ...state, isReadyToFix } : state));\n }\n };\n\n private wrapperRef = (el: HTMLElement | null) => {\n this.wrapper = el;\n };\n\n private stickyRef = (el: Sticky | null) => {\n this.sticky = el;\n };\n\n private handleFocus = () => {\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed) {\n this.setState({ focusedByTab: true });\n }\n });\n };\n\n private handleBlur = () => {\n this.setState({ focusedByTab: false });\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["SidePageHeader.tsx"],"names":["React","Sticky","CrossIcon","isFunction","ThemeContext","CommonWrapper","cx","keyListener","responsiveLayout","rootNode","getDOMRect","styles","SidePageContext","SidePageHeaderDataTids","root","close","SidePageHeader","context","state","isReadyToFix","focusedByTab","wrapper","sticky","lastRegularHeight","componentDidMount","window","addEventListener","update","setHasHeader","headerRef","componentWillUnmount","removeEventListener","reflow","updateReadyToFix","renderHeader","fixed","header","theme","headerFixed","mobileHeader","isMobileLayout","renderClose","title","mobileTitle","titleFixed","props","children","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperClose","wrapperCloseFixed","mobileWrapperClose","closeIcon","requestClose","closeFocus","handleFocus","handleBlur","wrapperScrolledUp","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","stickyRef","requestAnimationFrame","isTabPressed","render","renderMain","getStickyProp","isStickyDesktop","isStickyMobile","setRootNode","headerWrapper","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","Component","__KONTUR_REACT_UI__","contextType"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Sticky } from '../Sticky';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { isFunction } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageHeaderProps extends CommonProps {\n children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n sticky?: boolean;\n}\n\nexport interface SidePageHeaderState {\n isReadyToFix: boolean;\n focusedByTab: boolean;\n}\n\nexport const SidePageHeaderDataTids = {\n root: 'SidePageHeader__root',\n close: 'SidePage__close',\n} as const;\n\n/**\n * Шапка сайдпейджа\n *\n * @visibleName SidePage.Header\n */\n@responsiveLayout\n@rootNode\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n\n public static contextType = SidePageContext;\n public context: SidePageContextType = this.context;\n\n private isMobileLayout!: boolean;\n\n public state: SidePageHeaderState = {\n isReadyToFix: false,\n focusedByTab: false,\n };\n\n private theme!: Theme;\n private wrapper: HTMLElement | null = null;\n private sticky: Sticky | null = null;\n private lastRegularHeight = 0;\n private setRootNode!: TSetRootNode;\n\n public get regularHeight(): number {\n const { isReadyToFix } = this.state;\n if (!this.wrapper) {\n return 0;\n }\n if (!isReadyToFix) {\n this.lastRegularHeight = getDOMRect(this.wrapper).height;\n }\n return this.lastRegularHeight;\n }\n\n public get fixedHeaderHeight(): number {\n const { theme } = this;\n return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;\n }\n\n public componentDidMount = () => {\n window.addEventListener('scroll', this.update, true);\n this.context.setHasHeader?.();\n this.context.headerRef(this);\n };\n\n public componentWillUnmount = () => {\n window.removeEventListener('scroll', this.update, true);\n this.context.setHasHeader?.(false);\n this.context.headerRef(null);\n };\n\n public update = () => {\n this.sticky?.reflow();\n this.updateReadyToFix();\n };\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public getStickyProp() {\n if (typeof this.props.sticky !== 'undefined') {\n return this.props.sticky;\n }\n\n if (this.isMobileLayout) {\n return false;\n }\n\n return true;\n }\n\n private renderMain() {\n const { isReadyToFix } = this.state;\n\n const isStickyDesktop = !this.isMobileLayout && this.getStickyProp() && isReadyToFix;\n const isStickyMobile = this.isMobileLayout && this.getStickyProp();\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div data-tid={SidePageHeaderDataTids.root} ref={this.wrapperRef} className={styles.headerWrapper()}>\n {isStickyDesktop || isStickyMobile ? (\n <Sticky ref={this.stickyRef} side=\"top\">\n {this.renderHeader}\n </Sticky>\n ) : (\n this.renderHeader()\n )}\n </div>\n </CommonWrapper>\n );\n }\n\n private renderHeader = (fixed = false) => {\n return (\n <div\n className={cx(styles.header(this.theme), {\n [styles.headerFixed(this.theme)]: fixed,\n [styles.mobileHeader(this.theme)]: this.isMobileLayout,\n })}\n >\n {this.renderClose(fixed)}\n <div\n className={cx(styles.title(this.theme), {\n [styles.mobileTitle(this.theme)]: this.isMobileLayout,\n [styles.titleFixed()]: fixed,\n })}\n >\n {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n </div>\n </div>\n );\n };\n\n private renderClose = (fixed: boolean) => {\n const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n return (\n <div\n className={cx(styles.wrapperClose(this.theme), {\n [styles.wrapperCloseFixed(this.theme)]: fixed,\n [styles.mobileWrapperClose(this.theme)]: this.isMobileLayout,\n })}\n >\n {this.isMobileLayout ? (\n this.closeIcon\n ) : (\n <Sticky side=\"top\" offset={stickyOffset}>\n {this.closeIcon}\n </Sticky>\n )}\n </div>\n );\n };\n\n private closeIcon = () => (\n <SidePageContext.Consumer>\n {({ requestClose }) => (\n <button\n className={cx(styles.close(this.theme), {\n [styles.closeFocus(this.theme)]: this.state.focusedByTab,\n })}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n onClick={requestClose}\n data-tid={SidePageHeaderDataTids.close}\n tabIndex={0}\n >\n <CrossIcon />\n </button>\n )}\n </SidePageContext.Consumer>\n );\n\n private updateReadyToFix = () => {\n if (this.wrapper) {\n const wrapperScrolledUp = getDOMRect(this.wrapper).top;\n const isReadyToFix = this.regularHeight + wrapperScrolledUp <= this.fixedHeaderHeight;\n this.setState((state) => (state.isReadyToFix !== isReadyToFix ? { ...state, isReadyToFix } : state));\n }\n };\n\n private wrapperRef = (el: HTMLElement | null) => {\n this.wrapper = el;\n };\n\n private stickyRef = (el: Sticky | null) => {\n this.sticky = el;\n };\n\n private handleFocus = () => {\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed) {\n this.setState({ focusedByTab: true });\n }\n });\n };\n\n private handleBlur = () => {\n this.setState({ focusedByTab: false });\n };\n}\n"]}
|
|
@@ -9,6 +9,10 @@ export interface SidePageHeaderState {
|
|
|
9
9
|
isReadyToFix: boolean;
|
|
10
10
|
focusedByTab: boolean;
|
|
11
11
|
}
|
|
12
|
+
export declare const SidePageHeaderDataTids: {
|
|
13
|
+
readonly root: "SidePageHeader__root";
|
|
14
|
+
readonly close: "SidePage__close";
|
|
15
|
+
};
|
|
12
16
|
/**
|
|
13
17
|
* Шапка сайдпейджа
|
|
14
18
|
*
|
|
@@ -18,11 +18,14 @@ var types = {
|
|
|
18
18
|
mini: 'mini',
|
|
19
19
|
normal: 'normal'
|
|
20
20
|
};
|
|
21
|
-
export
|
|
21
|
+
export var SpinnerDataTids = {
|
|
22
|
+
root: 'Spinner__root'
|
|
23
|
+
};
|
|
22
24
|
/**
|
|
23
|
-
* DRAFT - инлайн-лоадер
|
|
24
|
-
*/
|
|
25
|
-
|
|
25
|
+
* DRAFT - инлайн-лоадер
|
|
26
|
+
*/
|
|
27
|
+
|
|
28
|
+
export var Spinner = (_dec = locale('Spinner', SpinnerLocaleHelper), rootNode(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
|
|
26
29
|
_inheritsLoose(Spinner, _React$Component);
|
|
27
30
|
|
|
28
31
|
function Spinner() {
|
|
@@ -77,6 +80,7 @@ var Spinner = (_dec = locale('Spinner', SpinnerLocaleHelper), rootNode(_class =
|
|
|
77
80
|
return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
|
|
78
81
|
rootNodeRef: this.setRootNode
|
|
79
82
|
}, this.props), /*#__PURE__*/React.createElement("div", {
|
|
83
|
+
"data-tid": SpinnerDataTids.root,
|
|
80
84
|
className: styles.spinner()
|
|
81
85
|
}, /*#__PURE__*/React.createElement("span", {
|
|
82
86
|
className: styles.inner()
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Spinner.tsx"],"names":["React","PropTypes","locale","ThemeContext","SpinnerIcon","CommonWrapper","cx","rootNode","styles","SpinnerLocaleHelper","types","big","mini","normal","Spinner","renderSpinner","type","dimmed","inline","circle","theme","props","color","circleDimmedColor","circleWithoutColorAnimation","width","renderCaption","caption","captionColor","render","renderMain","loading","setRootNode","spinner","inner","Component","__KONTUR_REACT_UI__","propTypes","node","bool","oneOf","Object","keys","defaultProps","Types"],"mappings":"iKAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;;AAEA,SAASC,MAAT,QAAuB,6BAAvB;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,WAAT,QAA4B,kCAA5B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,QAAT,QAAuC,oBAAvC;;AAEA,SAASC,MAAT,QAAuB,kBAAvB;AACA,SAAwBC,mBAAxB,QAAmD,UAAnD;;AAEA,IAAMC,KAAuC,GAAG;AAC9CC,EAAAA,GAAG,EAAE,KADyC;AAE9CC,EAAAA,IAAI,EAAE,MAFwC;AAG9CC,EAAAA,MAAM,EAAE,QAHsC,EAAhD
|
|
1
|
+
{"version":3,"sources":["Spinner.tsx"],"names":["React","PropTypes","locale","ThemeContext","SpinnerIcon","CommonWrapper","cx","rootNode","styles","SpinnerLocaleHelper","types","big","mini","normal","SpinnerDataTids","root","Spinner","renderSpinner","type","dimmed","inline","circle","theme","props","color","circleDimmedColor","circleWithoutColorAnimation","width","renderCaption","caption","captionColor","render","renderMain","loading","setRootNode","spinner","inner","Component","__KONTUR_REACT_UI__","propTypes","node","bool","oneOf","Object","keys","defaultProps","Types"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { SpinnerIcon } from '../../internal/icons/SpinnerIcon';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Spinner.styles';\nimport { SpinnerLocale, SpinnerLocaleHelper } from './locale';\n\nconst types: Record<SpinnerType, SpinnerType> = {\n big: 'big',\n mini: 'mini',\n normal: 'normal',\n};\n\nexport type SpinnerType = 'mini' | 'normal' | 'big';\n\nexport interface SpinnerProps extends CommonProps {\n caption?: React.ReactNode;\n dimmed?: boolean;\n /**\n * Тип спиннера\n * @default normal\n */\n type: SpinnerType;\n inline?: boolean;\n /**\n * Толщина спиннера\n */\n width?: number;\n /**\n * Цвет спиннера\n */\n color?: React.CSSProperties['color'];\n}\n\nexport const SpinnerDataTids = {\n root: 'Spinner__root',\n} as const;\n\n/**\n * DRAFT - инлайн-лоадер\n */\n\n@rootNode\n@locale('Spinner', SpinnerLocaleHelper)\nexport class Spinner extends React.Component<SpinnerProps> {\n public static __KONTUR_REACT_UI__ = 'Spinner';\n\n public static propTypes = {\n /**\n * Текст рядом с мини-лоадером.\n *\n * 'Загрузка' - значение по-умолчанию\n */\n caption: PropTypes.node,\n\n dimmed: PropTypes.bool,\n\n /**\n * Тип спиннера: mini, normal, big\n *\n * Значение по-умолчанию - normal\n *\n * Spinner.types - все доступные типы\n */\n type: PropTypes.oneOf(Object.keys(types)),\n };\n\n public static defaultProps: SpinnerProps = {\n type: 'normal',\n };\n\n public static Types: typeof types = types;\n private theme!: Theme;\n private readonly locale!: SpinnerLocale;\n private setRootNode!: TSetRootNode;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const { type, caption = this.locale.loading, dimmed, inline } = this.props;\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div data-tid={SpinnerDataTids.root} className={styles.spinner()}>\n <span className={styles.inner()}>{this.renderSpinner(type, dimmed, inline)}</span>\n {caption && this.renderCaption(type, caption)}\n </div>\n </CommonWrapper>\n );\n }\n\n private renderSpinner = (type: SpinnerType, dimmed?: boolean, inline?: boolean) => {\n return (\n <SpinnerIcon\n size={type}\n className={cx({\n [styles.circle(this.theme)]: !dimmed && !this.props.color,\n [styles.circleDimmedColor(this.theme)]: dimmed,\n [styles.circleWithoutColorAnimation(this.theme)]: dimmed || !!this.props.color,\n })}\n dimmed={dimmed}\n width={this.props.width}\n color={this.props.color}\n inline={inline}\n />\n );\n };\n\n private renderCaption = (type: SpinnerType, caption: React.ReactNode) => (\n <span className={cx(styles[type](this.theme), styles.captionColor(this.theme))}>{caption}</span>\n );\n}\n"]}
|
|
@@ -15,6 +15,9 @@ import { rootNode } from "../../../lib/rootNode";
|
|
|
15
15
|
import { getDOMRect } from "../../../lib/dom/getDOMRect";
|
|
16
16
|
import { styles } from "../Sticky.styles";
|
|
17
17
|
var MAX_REFLOW_RETRIES = 5;
|
|
18
|
+
export var StickyDataTids = {
|
|
19
|
+
root: 'Spinner__root'
|
|
20
|
+
};
|
|
18
21
|
export var Sticky = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
|
|
19
22
|
_inheritsLoose(Sticky, _React$Component);
|
|
20
23
|
|
|
@@ -180,6 +183,7 @@ export var Sticky = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
|
|
|
180
183
|
return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
|
|
181
184
|
rootNodeRef: this.setRootNode
|
|
182
185
|
}, this.props), /*#__PURE__*/React.createElement("div", {
|
|
186
|
+
"data-tid": StickyDataTids.root,
|
|
183
187
|
ref: this.refWrapper,
|
|
184
188
|
className: styles.wrapper()
|
|
185
189
|
}, /*#__PURE__*/React.createElement(ZIndex, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Sticky.tsx"],"names":["React","PropTypes","shallowEqual","LayoutEvents","isFunction","ZIndex","CommonWrapper","cx","rootNode","getDOMRect","styles","MAX_REFLOW_RETRIES","Sticky","state","fixed","deltaHeight","stopped","relativeTop","layoutSubscription","remove","reflowCounter","refWrapper","ref","wrapper","refInner","inner","reflow","document","documentElement","Error","windowHeight","window","innerHeight","clientHeight","top","bottom","left","width","height","props","offset","getStop","side","prevFixed","prevHeight","Math","floor","setState","stop","stopRect","outerHeight","componentDidMount","addListener","componentWillUnmount","componentDidUpdate","prevProps","prevState","emit","render","children","innerStyle","setRootNode","container","Component","__KONTUR_REACT_UI__","propTypes","oneOfType","node","func","number","oneOf","isRequired","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport shallowEqual from 'shallowequal';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunction } from '../../lib/utils';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { styles } from './Sticky.styles';\n\nconst MAX_REFLOW_RETRIES = 5;\n\nexport interface StickyProps extends CommonProps {\n side: 'top' | 'bottom';\n /**\n * Отступ в пикселях от края экрана, на сколько сдвигается элемент в залипшем состоянии\n * @default 0\n */\n offset: number;\n getStop?: () => Nullable<HTMLElement>;\n children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface StickyState {\n fixed: boolean;\n deltaHeight: number;\n height?: number;\n width?: number;\n left?: number;\n stopped: boolean;\n relativeTop: number;\n}\n\n@rootNode\nexport class Sticky extends React.Component<StickyProps, StickyState> {\n public static __KONTUR_REACT_UI__ = 'Sticky';\n\n public static propTypes = {\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n\n /**\n * Функция, которая возвращает DOM-элемент, который нельзя пересекать.\n */\n getStop: PropTypes.func,\n\n /**\n * Отступ от границы в пикселях\n */\n offset: PropTypes.number,\n\n side: PropTypes.oneOf(['top', 'bottom']).isRequired,\n };\n\n public static defaultProps = { offset: 0 };\n\n public state: StickyState = {\n fixed: false,\n deltaHeight: 0,\n stopped: false,\n relativeTop: 0,\n };\n\n private wrapper: Nullable<HTMLElement>;\n private inner: Nullable<HTMLElement>;\n private layoutSubscription: { remove: Nullable<() => void> } = { remove: null };\n private reflowCounter = 0;\n private setRootNode!: TSetRootNode;\n\n public componentDidMount() {\n this.reflow();\n\n this.layoutSubscription = LayoutEvents.addListener(this.reflow);\n }\n\n public componentWillUnmount() {\n if (this.layoutSubscription.remove) {\n this.layoutSubscription.remove();\n }\n }\n\n public componentDidUpdate(prevProps: StickyProps, prevState: StickyState) {\n if (!shallowEqual(prevProps, this.props) || !shallowEqual(prevState, this.state)) {\n if (this.reflowCounter < MAX_REFLOW_RETRIES) {\n LayoutEvents.emit();\n this.reflowCounter += 1;\n return;\n }\n }\n this.reflowCounter = 0;\n }\n\n public render() {\n let { children } = this.props;\n const { side, offset } = this.props;\n const { fixed, stopped, relativeTop, deltaHeight, width, height, left } = this.state;\n const innerStyle: React.CSSProperties = {};\n\n if (fixed) {\n if (stopped) {\n innerStyle.top = relativeTop;\n innerStyle[side === 'top' ? 'marginTop' : 'marginBottom'] = deltaHeight;\n } else {\n innerStyle.width = width;\n innerStyle[side] = offset;\n innerStyle.left = left;\n }\n }\n\n if (isFunction(children)) {\n children = children(fixed);\n }\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div ref={this.refWrapper} className={styles.wrapper()}>\n <ZIndex\n priority=\"Sticky\"\n applyZIndex={fixed}\n className={cx(styles.inner(), {\n [styles.fixed()]: fixed && !stopped,\n [styles.stopped()]: stopped,\n })}\n style={innerStyle}\n wrapperRef={this.refInner}\n >\n <div className={styles.container()}>{children}</div>\n </ZIndex>\n {fixed && !stopped ? <div style={{ width, height }} /> : null}\n </div>\n </CommonWrapper>\n );\n }\n\n private refWrapper = (ref: Nullable<HTMLElement>) => (this.wrapper = ref);\n\n private refInner = (ref: Nullable<HTMLElement>) => (this.inner = ref);\n\n /**\n * Пересчитать габариты и позицию залипшего элемента\n *\n * @public\n */\n public reflow = () => {\n const { documentElement } = document;\n\n if (!documentElement) {\n throw Error('There is no \"documentElement\" in document');\n }\n\n const windowHeight = window.innerHeight || documentElement.clientHeight;\n if (!this.wrapper || !this.inner) {\n return;\n }\n const { top, bottom, left } = getDOMRect(this.wrapper);\n const { width, height } = getDOMRect(this.inner);\n const { offset, getStop, side } = this.props;\n const { fixed: prevFixed, height: prevHeight = height } = this.state;\n const fixed = side === 'top' ? top < offset : Math.floor(bottom) > windowHeight - offset;\n\n this.setState({ fixed, left });\n\n if (fixed && !prevFixed) {\n this.setState({ width, height });\n }\n\n if (fixed) {\n const stop = getStop && getStop();\n if (stop) {\n const deltaHeight = prevHeight - height;\n const stopRect = getDOMRect(stop);\n const outerHeight = height + offset;\n let stopped = false;\n let relativeTop = 0;\n\n if (side === 'top') {\n stopped = stopRect.top - outerHeight < 0;\n relativeTop = stopRect.top - prevHeight - top;\n } else {\n stopped = stopRect.bottom + outerHeight > windowHeight;\n relativeTop = stopRect.bottom - top;\n }\n\n this.setState({ relativeTop, deltaHeight, stopped });\n }\n }\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["Sticky.tsx"],"names":["React","PropTypes","shallowEqual","LayoutEvents","isFunction","ZIndex","CommonWrapper","cx","rootNode","getDOMRect","styles","MAX_REFLOW_RETRIES","StickyDataTids","root","Sticky","state","fixed","deltaHeight","stopped","relativeTop","layoutSubscription","remove","reflowCounter","refWrapper","ref","wrapper","refInner","inner","reflow","document","documentElement","Error","windowHeight","window","innerHeight","clientHeight","top","bottom","left","width","height","props","offset","getStop","side","prevFixed","prevHeight","Math","floor","setState","stop","stopRect","outerHeight","componentDidMount","addListener","componentWillUnmount","componentDidUpdate","prevProps","prevState","emit","render","children","innerStyle","setRootNode","container","Component","__KONTUR_REACT_UI__","propTypes","oneOfType","node","func","number","oneOf","isRequired","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport shallowEqual from 'shallowequal';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunction } from '../../lib/utils';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { styles } from './Sticky.styles';\n\nconst MAX_REFLOW_RETRIES = 5;\n\nexport interface StickyProps extends CommonProps {\n side: 'top' | 'bottom';\n /**\n * Отступ в пикселях от края экрана, на сколько сдвигается элемент в залипшем состоянии\n * @default 0\n */\n offset: number;\n getStop?: () => Nullable<HTMLElement>;\n children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface StickyState {\n fixed: boolean;\n deltaHeight: number;\n height?: number;\n width?: number;\n left?: number;\n stopped: boolean;\n relativeTop: number;\n}\n\nexport const StickyDataTids = {\n root: 'Spinner__root',\n} as const;\n\n@rootNode\nexport class Sticky extends React.Component<StickyProps, StickyState> {\n public static __KONTUR_REACT_UI__ = 'Sticky';\n\n public static propTypes = {\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n\n /**\n * Функция, которая возвращает DOM-элемент, который нельзя пересекать.\n */\n getStop: PropTypes.func,\n\n /**\n * Отступ от границы в пикселях\n */\n offset: PropTypes.number,\n\n side: PropTypes.oneOf(['top', 'bottom']).isRequired,\n };\n\n public static defaultProps = { offset: 0 };\n\n public state: StickyState = {\n fixed: false,\n deltaHeight: 0,\n stopped: false,\n relativeTop: 0,\n };\n\n private wrapper: Nullable<HTMLElement>;\n private inner: Nullable<HTMLElement>;\n private layoutSubscription: { remove: Nullable<() => void> } = { remove: null };\n private reflowCounter = 0;\n private setRootNode!: TSetRootNode;\n\n public componentDidMount() {\n this.reflow();\n\n this.layoutSubscription = LayoutEvents.addListener(this.reflow);\n }\n\n public componentWillUnmount() {\n if (this.layoutSubscription.remove) {\n this.layoutSubscription.remove();\n }\n }\n\n public componentDidUpdate(prevProps: StickyProps, prevState: StickyState) {\n if (!shallowEqual(prevProps, this.props) || !shallowEqual(prevState, this.state)) {\n if (this.reflowCounter < MAX_REFLOW_RETRIES) {\n LayoutEvents.emit();\n this.reflowCounter += 1;\n return;\n }\n }\n this.reflowCounter = 0;\n }\n\n public render() {\n let { children } = this.props;\n const { side, offset } = this.props;\n const { fixed, stopped, relativeTop, deltaHeight, width, height, left } = this.state;\n const innerStyle: React.CSSProperties = {};\n\n if (fixed) {\n if (stopped) {\n innerStyle.top = relativeTop;\n innerStyle[side === 'top' ? 'marginTop' : 'marginBottom'] = deltaHeight;\n } else {\n innerStyle.width = width;\n innerStyle[side] = offset;\n innerStyle.left = left;\n }\n }\n\n if (isFunction(children)) {\n children = children(fixed);\n }\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div data-tid={StickyDataTids.root} ref={this.refWrapper} className={styles.wrapper()}>\n <ZIndex\n priority=\"Sticky\"\n applyZIndex={fixed}\n className={cx(styles.inner(), {\n [styles.fixed()]: fixed && !stopped,\n [styles.stopped()]: stopped,\n })}\n style={innerStyle}\n wrapperRef={this.refInner}\n >\n <div className={styles.container()}>{children}</div>\n </ZIndex>\n {fixed && !stopped ? <div style={{ width, height }} /> : null}\n </div>\n </CommonWrapper>\n );\n }\n\n private refWrapper = (ref: Nullable<HTMLElement>) => (this.wrapper = ref);\n\n private refInner = (ref: Nullable<HTMLElement>) => (this.inner = ref);\n\n /**\n * Пересчитать габариты и позицию залипшего элемента\n *\n * @public\n */\n public reflow = () => {\n const { documentElement } = document;\n\n if (!documentElement) {\n throw Error('There is no \"documentElement\" in document');\n }\n\n const windowHeight = window.innerHeight || documentElement.clientHeight;\n if (!this.wrapper || !this.inner) {\n return;\n }\n const { top, bottom, left } = getDOMRect(this.wrapper);\n const { width, height } = getDOMRect(this.inner);\n const { offset, getStop, side } = this.props;\n const { fixed: prevFixed, height: prevHeight = height } = this.state;\n const fixed = side === 'top' ? top < offset : Math.floor(bottom) > windowHeight - offset;\n\n this.setState({ fixed, left });\n\n if (fixed && !prevFixed) {\n this.setState({ width, height });\n }\n\n if (fixed) {\n const stop = getStop && getStop();\n if (stop) {\n const deltaHeight = prevHeight - height;\n const stopRect = getDOMRect(stop);\n const outerHeight = height + offset;\n let stopped = false;\n let relativeTop = 0;\n\n if (side === 'top') {\n stopped = stopRect.top - outerHeight < 0;\n relativeTop = stopRect.top - prevHeight - top;\n } else {\n stopped = stopRect.bottom + outerHeight > windowHeight;\n relativeTop = stopRect.bottom - top;\n }\n\n this.setState({ relativeTop, deltaHeight, stopped });\n }\n }\n };\n}\n"]}
|
|
@@ -21,6 +21,9 @@ export interface StickyState {
|
|
|
21
21
|
stopped: boolean;
|
|
22
22
|
relativeTop: number;
|
|
23
23
|
}
|
|
24
|
+
export declare const StickyDataTids: {
|
|
25
|
+
readonly root: "Spinner__root";
|
|
26
|
+
};
|
|
24
27
|
export declare class Sticky extends React.Component<StickyProps, StickyState> {
|
|
25
28
|
static __KONTUR_REACT_UI__: string;
|
|
26
29
|
static propTypes: {
|
|
@@ -14,6 +14,9 @@ import { cx } from "../../../lib/theming/Emotion";
|
|
|
14
14
|
import { rootNode } from "../../../lib/rootNode";
|
|
15
15
|
import { styles } from "../Switcher.styles";
|
|
16
16
|
import { getSwitcherTheme } from "../switcherTheme";
|
|
17
|
+
export var SwitcherDataTids = {
|
|
18
|
+
root: 'Switcher__root'
|
|
19
|
+
};
|
|
17
20
|
export var Switcher = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
|
|
18
21
|
_inheritsLoose(Switcher, _React$Component);
|
|
19
22
|
|
|
@@ -188,6 +191,7 @@ export var Switcher = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
|
|
|
188
191
|
return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
|
|
189
192
|
rootNodeRef: this.setRootNode
|
|
190
193
|
}, this.props), /*#__PURE__*/React.createElement("div", {
|
|
194
|
+
"data-tid": SwitcherDataTids.root,
|
|
191
195
|
className: styles.root()
|
|
192
196
|
}, this.props.caption ? /*#__PURE__*/React.createElement("div", {
|
|
193
197
|
className: captionClassName
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Switcher.tsx"],"names":["React","PropTypes","isKeyArrowHorizontal","isKeyArrowLeft","isKeyEnter","Group","Button","ThemeContext","CommonWrapper","cx","rootNode","styles","getSwitcherTheme","Switcher","state","focusedIndex","selectItem","value","props","onValueChange","_extractPropsFromItem","item","label","_extractValuesFromItems","items","map","move","step","selectedIndex","length","_focus","index","setState","handleKey","e","preventDefault","_handleFocus","currentIndex","indexOf","_handleBlur","_renderItems","i","buttonProps","checked","visuallyFocused","onClick","disableFocus","size","disabled","getLabelSizeClassName","captionLarge","theme","captionMedium","captionSmall","render","renderMain","listClassName","error","inputProps","type","onKeyDown","onFocus","onBlur","className","input","captionClassName","caption","setRootNode","root","wrap","Component","__KONTUR_REACT_UI__","propTypes","bool","oneOfType","arrayOf","string","shape","isRequired","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from '../../lib/events/keyboard/identifiers';\nimport { Group } from '../Group';\nimport { Button, ButtonSize } from '../Button';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Switcher.styles';\nimport { getSwitcherTheme } from './switcherTheme';\n\nexport type SwitcherSize = ButtonSize;\ntype SwitcherItems = string | SwitcherItem;\n\nexport interface SwitcherProps extends CommonProps {\n /**\n * Список строк или список элементов типа `{ label: string, value: string }`\n */\n items: SwitcherItems[];\n\n value?: string;\n\n onValueChange?: (value: string) => void;\n\n caption?: string;\n\n error?: boolean;\n\n /** Размер */\n size?: SwitcherSize;\n\n disabled?: boolean;\n}\n\nexport interface SwitcherState {\n focusedIndex: Nullable<number>;\n}\n\ninterface SwitcherItem {\n label: string;\n value: string;\n}\n\n@rootNode\nexport class Switcher extends React.Component<SwitcherProps, SwitcherState> {\n public static __KONTUR_REACT_UI__ = 'Switcher';\n\n public static propTypes = {\n error: PropTypes.bool,\n disabled: PropTypes.bool,\n items: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.string),\n PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.string,\n }),\n ),\n ]).isRequired,\n caption: PropTypes.string,\n value: PropTypes.string,\n onValueChange: PropTypes.func,\n };\n\n public state: SwitcherState = {\n focusedIndex: null,\n };\n\n private theme!: Theme;\n private setRootNode!: TSetRootNode;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = getSwitcherTheme(theme);\n return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const listClassName = cx({\n [styles.error(this.theme)]: !!this.props.error,\n });\n\n const inputProps = {\n type: 'checkbox',\n onKeyDown: this.handleKey,\n onFocus: this._handleFocus,\n onBlur: this._handleBlur,\n className: styles.input(),\n };\n\n const captionClassName = cx(styles.caption(this.theme), this.getLabelSizeClassName());\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div className={styles.root()}>\n {this.props.caption ? <div className={captionClassName}>{this.props.caption}</div> : null}\n <div className={styles.wrap()}>\n <input {...inputProps} />\n <div className={listClassName}>\n <Group>{this._renderItems()}</Group>\n </div>\n </div>\n </div>\n </CommonWrapper>\n );\n }\n\n private selectItem = (value: string) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(value);\n }\n };\n\n private _extractPropsFromItem = (item: string | SwitcherItem): SwitcherItem => {\n return typeof item === 'object' ? item : { label: item, value: item };\n };\n\n private _extractValuesFromItems = (): string[] => {\n return this.props.items.map((item) => {\n const { value } = this._extractPropsFromItem(item);\n return value;\n });\n };\n\n private move = (step: number) => {\n let selectedIndex = this.state.focusedIndex;\n\n if (typeof selectedIndex !== 'number') {\n return;\n }\n\n const items = this._extractValuesFromItems();\n\n selectedIndex += step;\n\n if (selectedIndex < 0) {\n selectedIndex = items.length - 1;\n } else if (selectedIndex >= items.length) {\n selectedIndex = 0;\n }\n\n this._focus(selectedIndex);\n };\n\n private _focus = (index: number) => {\n this.setState({ focusedIndex: index });\n };\n\n private handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\n const focusedIndex = this.state.focusedIndex;\n if (typeof focusedIndex !== 'number') {\n return;\n }\n\n if (isKeyEnter(e)) {\n if (this.props.onValueChange) {\n const { value } = this._extractPropsFromItem(this.props.items[focusedIndex]);\n this.selectItem(value);\n }\n return;\n }\n\n if (isKeyArrowHorizontal(e)) {\n e.preventDefault();\n this.move(isKeyArrowLeft(e) ? -1 : 1);\n }\n };\n\n private _handleFocus = () => {\n const { value } = this.props;\n\n const items = this._extractValuesFromItems();\n const currentIndex = [...items].indexOf(value as string);\n const index = currentIndex > -1 ? currentIndex : 0;\n\n this.setState({ focusedIndex: index });\n };\n\n private _handleBlur = () => {\n this.setState({ focusedIndex: null });\n };\n\n private _renderItems = () => {\n return this.props.items.map((item, i) => {\n const { label, value } = this._extractPropsFromItem(item);\n const buttonProps = {\n checked: this.props.value === value,\n visuallyFocused: this.state.focusedIndex === i,\n onClick: () => {\n this.selectItem(value);\n },\n disableFocus: true,\n size: this.props.size,\n disabled: this.props.disabled,\n };\n return (\n <Button key={value} {...buttonProps}>\n {label}\n </Button>\n );\n });\n };\n\n private getLabelSizeClassName = (): string => {\n switch (this.props.size) {\n case 'large':\n return styles.captionLarge(this.theme);\n case 'medium':\n return styles.captionMedium(this.theme);\n case 'small':\n default:\n return styles.captionSmall(this.theme);\n }\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["Switcher.tsx"],"names":["React","PropTypes","isKeyArrowHorizontal","isKeyArrowLeft","isKeyEnter","Group","Button","ThemeContext","CommonWrapper","cx","rootNode","styles","getSwitcherTheme","SwitcherDataTids","root","Switcher","state","focusedIndex","selectItem","value","props","onValueChange","_extractPropsFromItem","item","label","_extractValuesFromItems","items","map","move","step","selectedIndex","length","_focus","index","setState","handleKey","e","preventDefault","_handleFocus","currentIndex","indexOf","_handleBlur","_renderItems","i","buttonProps","checked","visuallyFocused","onClick","disableFocus","size","disabled","getLabelSizeClassName","captionLarge","theme","captionMedium","captionSmall","render","renderMain","listClassName","error","inputProps","type","onKeyDown","onFocus","onBlur","className","input","captionClassName","caption","setRootNode","wrap","Component","__KONTUR_REACT_UI__","propTypes","bool","oneOfType","arrayOf","string","shape","isRequired","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from '../../lib/events/keyboard/identifiers';\nimport { Group } from '../Group';\nimport { Button, ButtonSize } from '../Button';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Switcher.styles';\nimport { getSwitcherTheme } from './switcherTheme';\n\nexport type SwitcherSize = ButtonSize;\ntype SwitcherItems = string | SwitcherItem;\n\nexport const SwitcherDataTids = {\n root: 'Switcher__root',\n} as const;\n\nexport interface SwitcherProps extends CommonProps {\n /**\n * Список строк или список элементов типа `{ label: string, value: string }`\n */\n items: SwitcherItems[];\n\n value?: string;\n\n onValueChange?: (value: string) => void;\n\n caption?: string;\n\n error?: boolean;\n\n /** Размер */\n size?: SwitcherSize;\n\n disabled?: boolean;\n}\n\nexport interface SwitcherState {\n focusedIndex: Nullable<number>;\n}\n\ninterface SwitcherItem {\n label: string;\n value: string;\n}\n\n@rootNode\nexport class Switcher extends React.Component<SwitcherProps, SwitcherState> {\n public static __KONTUR_REACT_UI__ = 'Switcher';\n\n public static propTypes = {\n error: PropTypes.bool,\n disabled: PropTypes.bool,\n items: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.string),\n PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.string,\n }),\n ),\n ]).isRequired,\n caption: PropTypes.string,\n value: PropTypes.string,\n onValueChange: PropTypes.func,\n };\n\n public state: SwitcherState = {\n focusedIndex: null,\n };\n\n private theme!: Theme;\n private setRootNode!: TSetRootNode;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = getSwitcherTheme(theme);\n return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const listClassName = cx({\n [styles.error(this.theme)]: !!this.props.error,\n });\n\n const inputProps = {\n type: 'checkbox',\n onKeyDown: this.handleKey,\n onFocus: this._handleFocus,\n onBlur: this._handleBlur,\n className: styles.input(),\n };\n\n const captionClassName = cx(styles.caption(this.theme), this.getLabelSizeClassName());\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div data-tid={SwitcherDataTids.root} className={styles.root()}>\n {this.props.caption ? <div className={captionClassName}>{this.props.caption}</div> : null}\n <div className={styles.wrap()}>\n <input {...inputProps} />\n <div className={listClassName}>\n <Group>{this._renderItems()}</Group>\n </div>\n </div>\n </div>\n </CommonWrapper>\n );\n }\n\n private selectItem = (value: string) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(value);\n }\n };\n\n private _extractPropsFromItem = (item: string | SwitcherItem): SwitcherItem => {\n return typeof item === 'object' ? item : { label: item, value: item };\n };\n\n private _extractValuesFromItems = (): string[] => {\n return this.props.items.map((item) => {\n const { value } = this._extractPropsFromItem(item);\n return value;\n });\n };\n\n private move = (step: number) => {\n let selectedIndex = this.state.focusedIndex;\n\n if (typeof selectedIndex !== 'number') {\n return;\n }\n\n const items = this._extractValuesFromItems();\n\n selectedIndex += step;\n\n if (selectedIndex < 0) {\n selectedIndex = items.length - 1;\n } else if (selectedIndex >= items.length) {\n selectedIndex = 0;\n }\n\n this._focus(selectedIndex);\n };\n\n private _focus = (index: number) => {\n this.setState({ focusedIndex: index });\n };\n\n private handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\n const focusedIndex = this.state.focusedIndex;\n if (typeof focusedIndex !== 'number') {\n return;\n }\n\n if (isKeyEnter(e)) {\n if (this.props.onValueChange) {\n const { value } = this._extractPropsFromItem(this.props.items[focusedIndex]);\n this.selectItem(value);\n }\n return;\n }\n\n if (isKeyArrowHorizontal(e)) {\n e.preventDefault();\n this.move(isKeyArrowLeft(e) ? -1 : 1);\n }\n };\n\n private _handleFocus = () => {\n const { value } = this.props;\n\n const items = this._extractValuesFromItems();\n const currentIndex = [...items].indexOf(value as string);\n const index = currentIndex > -1 ? currentIndex : 0;\n\n this.setState({ focusedIndex: index });\n };\n\n private _handleBlur = () => {\n this.setState({ focusedIndex: null });\n };\n\n private _renderItems = () => {\n return this.props.items.map((item, i) => {\n const { label, value } = this._extractPropsFromItem(item);\n const buttonProps = {\n checked: this.props.value === value,\n visuallyFocused: this.state.focusedIndex === i,\n onClick: () => {\n this.selectItem(value);\n },\n disableFocus: true,\n size: this.props.size,\n disabled: this.props.disabled,\n };\n return (\n <Button key={value} {...buttonProps}>\n {label}\n </Button>\n );\n });\n };\n\n private getLabelSizeClassName = (): string => {\n switch (this.props.size) {\n case 'large':\n return styles.captionLarge(this.theme);\n case 'medium':\n return styles.captionMedium(this.theme);\n case 'small':\n default:\n return styles.captionSmall(this.theme);\n }\n };\n}\n"]}
|
|
@@ -5,6 +5,9 @@ import { Nullable } from '../../typings/utility-types';
|
|
|
5
5
|
import { CommonProps } from '../../internal/CommonWrapper';
|
|
6
6
|
export declare type SwitcherSize = ButtonSize;
|
|
7
7
|
declare type SwitcherItems = string | SwitcherItem;
|
|
8
|
+
export declare const SwitcherDataTids: {
|
|
9
|
+
readonly root: "Switcher__root";
|
|
10
|
+
};
|
|
8
11
|
export interface SwitcherProps extends CommonProps {
|
|
9
12
|
/**
|
|
10
13
|
* Список строк или список элементов типа `{ label: string, value: string }`
|
|
@@ -11,6 +11,7 @@ import { getRootNode, rootNode } from "../../../lib/rootNode";
|
|
|
11
11
|
import { getDOMRect } from "../../../lib/dom/getDOMRect";
|
|
12
12
|
import { styles } from "../Indicator.styles";
|
|
13
13
|
import { TabsContext } from "../TabsContext";
|
|
14
|
+
import { TabsDataTids } from "../Tabs";
|
|
14
15
|
export var Indicator = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
|
|
15
16
|
_inheritsLoose(Indicator, _React$Component);
|
|
16
17
|
|
|
@@ -95,6 +96,7 @@ export var Indicator = rootNode(_class = (_temp = _class2 = /*#__PURE__*/functio
|
|
|
95
96
|
disabled: false
|
|
96
97
|
};
|
|
97
98
|
return /*#__PURE__*/React.createElement("div", {
|
|
99
|
+
"data-tid": TabsDataTids.indicatorRoot,
|
|
98
100
|
className: cx(styles.root(this.theme), indicators.primary && styles.primary(this.theme), indicators.success && styles.success(this.theme), indicators.warning && styles.warning(this.theme), indicators.error && styles.error(this.theme), this.props.className),
|
|
99
101
|
style: this.state.styles,
|
|
100
102
|
ref: this.setRootNode
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Indicator.tsx"],"names":["React","throttle","LayoutEvents","ThemeContext","cx","getRootNode","rootNode","getDOMRect","styles","TabsContext","Indicator","context","state","eventListener","removeTabUpdatesListener","reflow","getTab","activeTab","node","nodeStyles","getStyles","stylesUpdated","some","prop","setState","componentDidMount","addListener","props","tabUpdates","on","componentWillUnmount","cancel","remove","componentDidUpdate","_","prevState","render","theme","renderMain","indicators","getIndicators","error","warning","success","primary","disabled","root","className","setRootNode","htmlNode","HTMLElement","rect","vertical","width","tabBorderWidth","left","offsetLeft","top","offsetTop","height","bottom","parseInt","offsetHeight","right","Component","contextType"],"mappings":"iGAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,QAAP,MAAqB,iBAArB;;AAEA,OAAO,KAAKC,YAAZ,MAA8B,wBAA9B;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,WAAT,EAAsBC,QAAtB,QAAoD,oBAApD;AACA,SAASC,UAAT,QAA2B,0BAA3B;;AAEA,SAASC,MAAT,QAAuB,oBAAvB;AACA,SAASC,WAAT,QAA6C,eAA7C
|
|
1
|
+
{"version":3,"sources":["Indicator.tsx"],"names":["React","throttle","LayoutEvents","ThemeContext","cx","getRootNode","rootNode","getDOMRect","styles","TabsContext","TabsDataTids","Indicator","context","state","eventListener","removeTabUpdatesListener","reflow","getTab","activeTab","node","nodeStyles","getStyles","stylesUpdated","some","prop","setState","componentDidMount","addListener","props","tabUpdates","on","componentWillUnmount","cancel","remove","componentDidUpdate","_","prevState","render","theme","renderMain","indicators","getIndicators","error","warning","success","primary","disabled","indicatorRoot","root","className","setRootNode","htmlNode","HTMLElement","rect","vertical","width","tabBorderWidth","left","offsetLeft","top","offsetTop","height","bottom","parseInt","offsetHeight","right","Component","contextType"],"mappings":"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","sourcesContent":["import React from 'react';\nimport throttle from 'lodash.throttle';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { cx } from '../../lib/theming/Emotion';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { styles } from './Indicator.styles';\nimport { TabsContext, TabsContextType } from './TabsContext';\nimport { TabIndicators } from './Tab';\nimport { TabsDataTids } from './Tabs';\n\nexport interface IndicatorProps {\n className?: string;\n tabUpdates: {\n on: (x0: () => void) => () => void;\n };\n vertical: boolean;\n}\n\nexport interface IndicatorState {\n styles: React.CSSProperties;\n}\n\n@rootNode\nexport class Indicator extends React.Component<IndicatorProps, IndicatorState> {\n public static contextType = TabsContext;\n public context: TabsContextType = this.context;\n\n public state: IndicatorState = {\n styles: {},\n };\n\n private theme!: Theme;\n\n private eventListener: Nullable<{\n remove: () => void;\n }> = null;\n\n private removeTabUpdatesListener: Nullable<() => void> = null;\n private setRootNode!: TSetRootNode;\n\n public componentDidMount() {\n this.eventListener = LayoutEvents.addListener(this.reflow);\n this.removeTabUpdatesListener = this.props.tabUpdates.on(this.reflow);\n this.reflow();\n }\n\n public componentWillUnmount() {\n this.reflow.cancel();\n\n if (this.eventListener) {\n this.eventListener.remove();\n }\n if (this.removeTabUpdatesListener) {\n this.removeTabUpdatesListener();\n }\n }\n\n public componentDidUpdate(_: IndicatorProps, prevState: IndicatorState) {\n this.reflow();\n }\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const { getTab, activeTab } = this.context;\n const node = getTab(activeTab);\n const indicators: TabIndicators = (node && node.getIndicators && node.getIndicators()) || {\n error: false,\n warning: false,\n success: false,\n primary: false,\n disabled: false,\n };\n return (\n <div\n data-tid={TabsDataTids.indicatorRoot}\n className={cx(\n styles.root(this.theme),\n indicators.primary && styles.primary(this.theme),\n indicators.success && styles.success(this.theme),\n indicators.warning && styles.warning(this.theme),\n indicators.error && styles.error(this.theme),\n this.props.className,\n )}\n style={this.state.styles}\n ref={this.setRootNode}\n />\n );\n }\n\n private reflow = throttle(() => {\n const { getTab, activeTab } = this.context;\n const node = getTab(activeTab);\n const nodeStyles = this.getStyles(node);\n const stylesUpdated = ['left', 'top', 'width', 'height'].some(\n (prop) => nodeStyles[prop as keyof React.CSSProperties] !== this.state.styles[prop as keyof React.CSSProperties],\n );\n if (stylesUpdated) {\n this.setState({ styles: nodeStyles });\n }\n }, 100);\n\n private getStyles(node: any): React.CSSProperties {\n const htmlNode = getRootNode(node);\n\n if (htmlNode && htmlNode instanceof HTMLElement) {\n const rect = getDOMRect(htmlNode);\n if (this.props.vertical) {\n return {\n width: this.theme.tabBorderWidth,\n left: htmlNode.offsetLeft,\n top: htmlNode.offsetTop,\n height: rect.bottom - rect.top,\n };\n }\n\n const tabBorderWidth = parseInt(this.theme.tabBorderWidth, 10) || 0;\n return {\n left: htmlNode.offsetLeft,\n top: htmlNode.offsetHeight + htmlNode.offsetTop - tabBorderWidth,\n width: rect.right - rect.left,\n };\n }\n\n return {};\n }\n}\n"]}
|
|
@@ -17,6 +17,9 @@ import { cx } from "../../../lib/theming/Emotion";
|
|
|
17
17
|
import { rootNode } from "../../../lib/rootNode";
|
|
18
18
|
import { TabsContext, TabsContextDefaultValue } from "../TabsContext";
|
|
19
19
|
import { styles, horizontalStyles, verticalStyles, globalClasses } from "../Tab.styles";
|
|
20
|
+
export var TabDataTids = {
|
|
21
|
+
root: 'Tab__root'
|
|
22
|
+
};
|
|
20
23
|
export
|
|
21
24
|
/**
|
|
22
25
|
* Tab element of Tabs component
|
|
@@ -215,6 +218,7 @@ var Tab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Com
|
|
|
215
218
|
return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
|
|
216
219
|
rootNodeRef: this.setRootNode
|
|
217
220
|
}, this.props), /*#__PURE__*/React.createElement(Component, {
|
|
221
|
+
"data-tid": TabDataTids.root,
|
|
218
222
|
className: cx((_cx = {}, _cx[styles.root(this.theme)] = true, _cx[styles.vertical(this.theme)] = !!isVertical, _cx[orientationStyles.primary(this.theme)] = !!primary, _cx[orientationStyles.success(this.theme)] = !!success, _cx[orientationStyles.warning(this.theme)] = !!warning, _cx[orientationStyles.error(this.theme)] = !!error, _cx[styles.active()] = !!isActive, _cx[orientationStyles.active(this.theme)] = !!isActive, _cx[styles.disabled(this.theme)] = !!disabled, _cx[orientationStyles.disabled()] = !!disabled, _cx)),
|
|
219
223
|
onBlur: this.handleBlur,
|
|
220
224
|
onClick: this.switchTab,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Tab.tsx"],"names":["React","PropTypes","invariant","ResizeDetector","isKeyArrow","isKeyArrowLeft","isKeyArrowUp","keyListener","isFunctionalComponent","ThemeContext","CommonWrapper","cx","rootNode","TabsContext","TabsContextDefaultValue","styles","horizontalStyles","verticalStyles","globalClasses","Tab","props","context","state","focusedByKeyboard","tabComponent","getUnderlyingNode","getId","id","href","refTabComponent","instance","getTabInstance","switchTab","event","disabled","preventDefault","onClick","defaultPrevented","component","handleKeyDown","e","onKeyDown","delta","shiftFocus","handleFocus","requestAnimationFrame","isTabPressed","isArrowPressed","setState","handleBlur","componentDidMount","addTab","componentDidUpdate","activeTab","notifyUpdate","componentWillUnmount","removeTab","render","theme","renderMain","getIndicators","error","Boolean","warning","success","primary","children","Component","defaultProps","isActive","isVertical","vertical","orientationStyles","setRootNode","root","active","focus","__KONTUR_REACT_UI__","contextType","propTypes","node","bool","string","isRequired","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport invariant from 'invariant';\n\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from '../../lib/events/keyboard/identifiers';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunctionalComponent } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { TabsContext, TabsContextType, TabsContextDefaultValue } from './TabsContext';\nimport { styles, horizontalStyles, verticalStyles, globalClasses } from './Tab.styles';\n\nexport interface TabIndicators {\n error: boolean;\n warning: boolean;\n success: boolean;\n primary: boolean;\n disabled: boolean;\n}\n\nexport interface TabProps<T extends string = string> extends CommonProps {\n /**\n * Tab content\n */\n children?: React.ReactNode;\n\n /**\n * Component to use as a tab\n */\n component?: React.ComponentType<any> | string;\n\n /**\n * Link href\n */\n href?: string;\n\n /**\n * Tab identifier\n */\n id?: T;\n\n /**\n * Click event\n */\n onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n\n /**\n * Click event\n */\n onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n\n /**\n * Disabled indicator\n */\n disabled?: boolean;\n\n /**\n * Состояние валидации при ошибке.\n */\n error?: boolean;\n\n /**\n * Состояние валидации при предупреждении.\n */\n warning?: boolean;\n\n /**\n * Success indicator\n */\n success?: boolean;\n\n /**\n * Primary indicator\n */\n primary?: boolean;\n\n /**\n * Style property\n */\n style?: React.CSSProperties;\n}\n\nexport interface TabState {\n focusedByKeyboard: boolean;\n}\n\n/**\n * Tab element of Tabs component\n *\n * Can be used for creating custom tabs\n * ```js\n *\n * const RouteTab = (props) => (\n * <Tab id={props.to} component={RouteLink} {...props}/>\n * )\n *\n * const MyAwesomeTab = (props) => <Tab id={props.id}>8) {props.children}</Tab>\n * ```\n *\n * Works only inside Tabs component, otherwise throws\n */\n@rootNode\nexport class Tab<T extends string = string> extends React.Component<TabProps<T>, TabState> {\n public static __KONTUR_REACT_UI__ = 'Tab';\n\n public static contextType = TabsContext;\n public context: TabsContextType = this.context;\n\n public static propTypes = {\n children: PropTypes.node,\n disabled: PropTypes.bool,\n href: PropTypes.string.isRequired,\n onClick: PropTypes.func,\n onKeyDown: PropTypes.func,\n };\n\n public static defaultProps = {\n component: 'a',\n href: '',\n };\n\n public state: TabState = {\n focusedByKeyboard: false,\n };\n\n private theme!: Theme;\n private tabComponent: Nullable<React.ReactElement<Tab<T>>> = null;\n private setRootNode!: TSetRootNode;\n\n constructor(props: TabProps<T>) {\n super(props);\n invariant(this.context !== TabsContextDefaultValue, 'Tab should be placed inside Tabs component');\n }\n\n public componentDidMount() {\n const id = this.getId();\n if (typeof id === 'string') {\n this.context.addTab(id, this.getTabInstance);\n }\n }\n\n public componentDidUpdate() {\n if (this.context.activeTab === this.props.id) {\n this.context.notifyUpdate();\n }\n }\n\n public componentWillUnmount() {\n const id = this.getId();\n if (typeof id === 'string') {\n this.context.removeTab(id);\n }\n }\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public getIndicators() {\n return {\n error: Boolean(this.props.error),\n warning: Boolean(this.props.warning),\n success: Boolean(this.props.success),\n primary: Boolean(this.props.primary),\n disabled: Boolean(this.props.disabled),\n };\n }\n\n public getUnderlyingNode = () => this.tabComponent;\n\n private renderMain() {\n const {\n children,\n disabled,\n error,\n warning,\n success,\n primary,\n component: Component = Tab.defaultProps.component,\n href,\n } = this.props;\n\n let isActive = false;\n let isVertical = false;\n\n const id = this.getId();\n if (typeof id === 'string') {\n isActive = this.context.activeTab === this.getId();\n isVertical = this.context.vertical;\n }\n const orientationStyles = isVertical ? verticalStyles : horizontalStyles;\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <Component\n className={cx({\n [styles.root(this.theme)]: true,\n [styles.vertical(this.theme)]: !!isVertical,\n [orientationStyles.primary(this.theme)]: !!primary,\n [orientationStyles.success(this.theme)]: !!success,\n [orientationStyles.warning(this.theme)]: !!warning,\n [orientationStyles.error(this.theme)]: !!error,\n [styles.active()]: !!isActive,\n [orientationStyles.active(this.theme)]: !!isActive,\n [styles.disabled(this.theme)]: !!disabled,\n [orientationStyles.disabled()]: !!disabled,\n })}\n onBlur={this.handleBlur}\n onClick={this.switchTab}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n tabIndex={disabled ? -1 : 0}\n ref={isFunctionalComponent(Component) ? null : this.refTabComponent}\n href={href}\n >\n <ResizeDetector onResize={this.context.notifyUpdate}>{children}</ResizeDetector>\n {this.state.focusedByKeyboard && <div className={cx(styles.focus(this.theme), globalClasses.focus)} />}\n </Component>\n </CommonWrapper>\n );\n }\n\n private getId = () => this.props.id || this.props.href;\n\n private refTabComponent = (instance: React.ReactElement<any>) => {\n this.tabComponent = instance;\n };\n\n private getTabInstance = () => this;\n\n private switchTab = (event: React.MouseEvent<HTMLElement>) => {\n if (this.props.disabled) {\n event.preventDefault();\n return;\n }\n\n const id = this.props.id || this.props.href;\n if (this.props.onClick) {\n this.props.onClick(event);\n if (event.defaultPrevented) {\n return;\n }\n }\n if (typeof id === 'string') {\n this.context.switchTab(id);\n }\n if (this.props.component === 'a' && !this.props.href) {\n event.preventDefault();\n }\n };\n\n private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n if (this.props.disabled) {\n return;\n }\n\n if (this.props.onKeyDown) {\n this.props.onKeyDown(e);\n if (e.defaultPrevented) {\n return;\n }\n }\n const id = this.getId();\n if (typeof id !== 'string') {\n return;\n }\n if (!isKeyArrow(e)) {\n return;\n }\n e.preventDefault();\n const delta = isKeyArrowLeft(e) || isKeyArrowUp(e) ? -1 : 1;\n this.context.shiftFocus(id, delta);\n };\n\n private handleFocus = () => {\n if (this.props.disabled) {\n return;\n }\n\n // focus event fires before keyDown eventlistener\n // so we should check focusKeyPressed in async way\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed || keyListener.isArrowPressed) {\n this.setState({ focusedByKeyboard: true });\n }\n });\n };\n\n private handleBlur = () => {\n if (this.props.disabled) {\n return;\n }\n\n this.setState({ focusedByKeyboard: false });\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["Tab.tsx"],"names":["React","PropTypes","invariant","ResizeDetector","isKeyArrow","isKeyArrowLeft","isKeyArrowUp","keyListener","isFunctionalComponent","ThemeContext","CommonWrapper","cx","rootNode","TabsContext","TabsContextDefaultValue","styles","horizontalStyles","verticalStyles","globalClasses","TabDataTids","root","Tab","props","context","state","focusedByKeyboard","tabComponent","getUnderlyingNode","getId","id","href","refTabComponent","instance","getTabInstance","switchTab","event","disabled","preventDefault","onClick","defaultPrevented","component","handleKeyDown","e","onKeyDown","delta","shiftFocus","handleFocus","requestAnimationFrame","isTabPressed","isArrowPressed","setState","handleBlur","componentDidMount","addTab","componentDidUpdate","activeTab","notifyUpdate","componentWillUnmount","removeTab","render","theme","renderMain","getIndicators","error","Boolean","warning","success","primary","children","Component","defaultProps","isActive","isVertical","vertical","orientationStyles","setRootNode","active","focus","__KONTUR_REACT_UI__","contextType","propTypes","node","bool","string","isRequired","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport invariant from 'invariant';\n\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from '../../lib/events/keyboard/identifiers';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunctionalComponent } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { TabsContext, TabsContextType, TabsContextDefaultValue } from './TabsContext';\nimport { styles, horizontalStyles, verticalStyles, globalClasses } from './Tab.styles';\n\nexport interface TabIndicators {\n error: boolean;\n warning: boolean;\n success: boolean;\n primary: boolean;\n disabled: boolean;\n}\n\nexport const TabDataTids = {\n root: 'Tab__root',\n} as const;\n\nexport interface TabProps<T extends string = string> extends CommonProps {\n /**\n * Tab content\n */\n children?: React.ReactNode;\n\n /**\n * Component to use as a tab\n */\n component?: React.ComponentType<any> | string;\n\n /**\n * Link href\n */\n href?: string;\n\n /**\n * Tab identifier\n */\n id?: T;\n\n /**\n * Click event\n */\n onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n\n /**\n * Click event\n */\n onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n\n /**\n * Disabled indicator\n */\n disabled?: boolean;\n\n /**\n * Состояние валидации при ошибке.\n */\n error?: boolean;\n\n /**\n * Состояние валидации при предупреждении.\n */\n warning?: boolean;\n\n /**\n * Success indicator\n */\n success?: boolean;\n\n /**\n * Primary indicator\n */\n primary?: boolean;\n\n /**\n * Style property\n */\n style?: React.CSSProperties;\n}\n\nexport interface TabState {\n focusedByKeyboard: boolean;\n}\n\n/**\n * Tab element of Tabs component\n *\n * Can be used for creating custom tabs\n * ```js\n *\n * const RouteTab = (props) => (\n * <Tab id={props.to} component={RouteLink} {...props}/>\n * )\n *\n * const MyAwesomeTab = (props) => <Tab id={props.id}>8) {props.children}</Tab>\n * ```\n *\n * Works only inside Tabs component, otherwise throws\n */\n@rootNode\nexport class Tab<T extends string = string> extends React.Component<TabProps<T>, TabState> {\n public static __KONTUR_REACT_UI__ = 'Tab';\n\n public static contextType = TabsContext;\n public context: TabsContextType = this.context;\n\n public static propTypes = {\n children: PropTypes.node,\n disabled: PropTypes.bool,\n href: PropTypes.string.isRequired,\n onClick: PropTypes.func,\n onKeyDown: PropTypes.func,\n };\n\n public static defaultProps = {\n component: 'a',\n href: '',\n };\n\n public state: TabState = {\n focusedByKeyboard: false,\n };\n\n private theme!: Theme;\n private tabComponent: Nullable<React.ReactElement<Tab<T>>> = null;\n private setRootNode!: TSetRootNode;\n\n constructor(props: TabProps<T>) {\n super(props);\n invariant(this.context !== TabsContextDefaultValue, 'Tab should be placed inside Tabs component');\n }\n\n public componentDidMount() {\n const id = this.getId();\n if (typeof id === 'string') {\n this.context.addTab(id, this.getTabInstance);\n }\n }\n\n public componentDidUpdate() {\n if (this.context.activeTab === this.props.id) {\n this.context.notifyUpdate();\n }\n }\n\n public componentWillUnmount() {\n const id = this.getId();\n if (typeof id === 'string') {\n this.context.removeTab(id);\n }\n }\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public getIndicators() {\n return {\n error: Boolean(this.props.error),\n warning: Boolean(this.props.warning),\n success: Boolean(this.props.success),\n primary: Boolean(this.props.primary),\n disabled: Boolean(this.props.disabled),\n };\n }\n\n public getUnderlyingNode = () => this.tabComponent;\n\n private renderMain() {\n const {\n children,\n disabled,\n error,\n warning,\n success,\n primary,\n component: Component = Tab.defaultProps.component,\n href,\n } = this.props;\n\n let isActive = false;\n let isVertical = false;\n\n const id = this.getId();\n if (typeof id === 'string') {\n isActive = this.context.activeTab === this.getId();\n isVertical = this.context.vertical;\n }\n const orientationStyles = isVertical ? verticalStyles : horizontalStyles;\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <Component\n data-tid={TabDataTids.root}\n className={cx({\n [styles.root(this.theme)]: true,\n [styles.vertical(this.theme)]: !!isVertical,\n [orientationStyles.primary(this.theme)]: !!primary,\n [orientationStyles.success(this.theme)]: !!success,\n [orientationStyles.warning(this.theme)]: !!warning,\n [orientationStyles.error(this.theme)]: !!error,\n [styles.active()]: !!isActive,\n [orientationStyles.active(this.theme)]: !!isActive,\n [styles.disabled(this.theme)]: !!disabled,\n [orientationStyles.disabled()]: !!disabled,\n })}\n onBlur={this.handleBlur}\n onClick={this.switchTab}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n tabIndex={disabled ? -1 : 0}\n ref={isFunctionalComponent(Component) ? null : this.refTabComponent}\n href={href}\n >\n <ResizeDetector onResize={this.context.notifyUpdate}>{children}</ResizeDetector>\n {this.state.focusedByKeyboard && <div className={cx(styles.focus(this.theme), globalClasses.focus)} />}\n </Component>\n </CommonWrapper>\n );\n }\n\n private getId = () => this.props.id || this.props.href;\n\n private refTabComponent = (instance: React.ReactElement<any>) => {\n this.tabComponent = instance;\n };\n\n private getTabInstance = () => this;\n\n private switchTab = (event: React.MouseEvent<HTMLElement>) => {\n if (this.props.disabled) {\n event.preventDefault();\n return;\n }\n\n const id = this.props.id || this.props.href;\n if (this.props.onClick) {\n this.props.onClick(event);\n if (event.defaultPrevented) {\n return;\n }\n }\n if (typeof id === 'string') {\n this.context.switchTab(id);\n }\n if (this.props.component === 'a' && !this.props.href) {\n event.preventDefault();\n }\n };\n\n private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n if (this.props.disabled) {\n return;\n }\n\n if (this.props.onKeyDown) {\n this.props.onKeyDown(e);\n if (e.defaultPrevented) {\n return;\n }\n }\n const id = this.getId();\n if (typeof id !== 'string') {\n return;\n }\n if (!isKeyArrow(e)) {\n return;\n }\n e.preventDefault();\n const delta = isKeyArrowLeft(e) || isKeyArrowUp(e) ? -1 : 1;\n this.context.shiftFocus(id, delta);\n };\n\n private handleFocus = () => {\n if (this.props.disabled) {\n return;\n }\n\n // focus event fires before keyDown eventlistener\n // so we should check focusKeyPressed in async way\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed || keyListener.isArrowPressed) {\n this.setState({ focusedByKeyboard: true });\n }\n });\n };\n\n private handleBlur = () => {\n if (this.props.disabled) {\n return;\n }\n\n this.setState({ focusedByKeyboard: false });\n };\n}\n"]}
|
package/components/Tabs/Tab.d.ts
CHANGED
|
@@ -10,6 +10,9 @@ export interface TabIndicators {
|
|
|
10
10
|
primary: boolean;
|
|
11
11
|
disabled: boolean;
|
|
12
12
|
}
|
|
13
|
+
export declare const TabDataTids: {
|
|
14
|
+
readonly root: "Tab__root";
|
|
15
|
+
};
|
|
13
16
|
export interface TabProps<T extends string = string> extends CommonProps {
|
|
14
17
|
/**
|
|
15
18
|
* Tab content
|
|
@@ -15,13 +15,17 @@ import { Indicator } from "../Indicator";
|
|
|
15
15
|
import { styles } from "../Tabs.styles";
|
|
16
16
|
import { TabsContext } from "../TabsContext";
|
|
17
17
|
import { Tab } from "../Tab";
|
|
18
|
-
export
|
|
18
|
+
export var TabsDataTids = {
|
|
19
|
+
root: 'Tabs__root',
|
|
20
|
+
indicatorRoot: 'Indicator__root'
|
|
21
|
+
};
|
|
19
22
|
/**
|
|
20
|
-
* Tabs wrapper
|
|
21
|
-
*
|
|
22
|
-
* contains static property `Tab`
|
|
23
|
-
*/
|
|
24
|
-
|
|
23
|
+
* Tabs wrapper
|
|
24
|
+
*
|
|
25
|
+
* contains static property `Tab`
|
|
26
|
+
*/
|
|
27
|
+
|
|
28
|
+
export var Tabs = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
|
|
25
29
|
_inheritsLoose(Tabs, _React$Component);
|
|
26
30
|
|
|
27
31
|
function Tabs() {
|
|
@@ -119,6 +123,7 @@ var Tabs = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Co
|
|
|
119
123
|
return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
|
|
120
124
|
rootNodeRef: _this2.setRootNode
|
|
121
125
|
}, _this2.props), /*#__PURE__*/React.createElement("div", {
|
|
126
|
+
"data-tid": TabsDataTids.root,
|
|
122
127
|
className: cx(styles.root(_this2.theme), vertical && styles.vertical()),
|
|
123
128
|
style: {
|
|
124
129
|
width: width
|