@skbkontur/react-ui 3.9.4 → 3.10.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 +21 -0
- package/README.md +57 -0
- package/cjs/components/Autocomplete/Autocomplete.d.ts +1 -0
- package/cjs/components/Autocomplete/Autocomplete.js +11 -5
- package/cjs/components/Autocomplete/Autocomplete.js.map +1 -1
- package/cjs/components/Button/Button.d.ts +1 -0
- package/cjs/components/Button/Button.js +7 -3
- package/cjs/components/Button/Button.js.map +1 -1
- package/cjs/components/Center/Center.d.ts +1 -0
- package/cjs/components/Center/Center.js +10 -3
- package/cjs/components/Center/Center.js.map +1 -1
- package/cjs/components/Checkbox/Checkbox.d.ts +3 -2
- package/cjs/components/Checkbox/Checkbox.js +10 -4
- package/cjs/components/Checkbox/Checkbox.js.map +1 -1
- package/cjs/components/ComboBox/ComboBox.d.ts +2 -0
- package/cjs/components/ComboBox/ComboBox.js +100 -70
- package/cjs/components/ComboBox/ComboBox.js.map +1 -1
- package/cjs/components/CurrencyInput/CurrencyInput.d.ts +3 -3
- package/cjs/components/CurrencyInput/CurrencyInput.js +7 -4
- package/cjs/components/CurrencyInput/CurrencyInput.js.map +1 -1
- package/cjs/components/DateInput/DateInput.d.ts +1 -0
- package/cjs/components/DateInput/DateInput.js +6 -3
- package/cjs/components/DateInput/DateInput.js.map +1 -1
- package/cjs/components/DatePicker/DatePicker.d.ts +4 -2
- package/cjs/components/DatePicker/DatePicker.js +17 -7
- package/cjs/components/DatePicker/DatePicker.js.map +1 -1
- package/cjs/components/Dropdown/Dropdown.d.ts +1 -0
- package/cjs/components/Dropdown/Dropdown.js +11 -4
- package/cjs/components/Dropdown/Dropdown.js.map +1 -1
- package/cjs/components/DropdownMenu/DropdownMenu.d.ts +1 -0
- package/cjs/components/DropdownMenu/DropdownMenu.js +7 -4
- package/cjs/components/DropdownMenu/DropdownMenu.js.map +1 -1
- package/cjs/components/FxInput/FxInput.d.ts +1 -0
- package/cjs/components/FxInput/FxInput.js +9 -2
- package/cjs/components/FxInput/FxInput.js.map +1 -1
- package/cjs/components/Gapped/Gapped.d.ts +1 -0
- package/cjs/components/Gapped/Gapped.js +8 -5
- package/cjs/components/Gapped/Gapped.js.map +1 -1
- package/cjs/components/Group/Group.d.ts +1 -0
- package/cjs/components/Group/Group.js +10 -7
- package/cjs/components/Group/Group.js.map +1 -1
- package/cjs/components/Hint/Hint.d.ts +3 -2
- package/cjs/components/Hint/Hint.js +7 -4
- package/cjs/components/Hint/Hint.js.map +1 -1
- package/cjs/components/Input/Input.d.ts +4 -1
- package/cjs/components/Input/Input.js +13 -5
- package/cjs/components/Input/Input.js.map +1 -1
- package/cjs/components/Kebab/Kebab.d.ts +1 -0
- package/cjs/components/Kebab/Kebab.js +8 -5
- package/cjs/components/Kebab/Kebab.js.map +1 -1
- package/cjs/components/Link/Link.d.ts +1 -0
- package/cjs/components/Link/Link.js +11 -3
- package/cjs/components/Link/Link.js.map +1 -1
- package/cjs/components/Loader/Loader.d.ts +1 -0
- package/cjs/components/Loader/Loader.js +9 -6
- package/cjs/components/Loader/Loader.js.map +1 -1
- package/cjs/components/MenuItem/MenuItem.d.ts +1 -0
- package/cjs/components/MenuItem/MenuItem.js +13 -7
- package/cjs/components/MenuItem/MenuItem.js.map +1 -1
- package/cjs/components/Modal/Modal.js +1 -1
- package/cjs/components/Modal/Modal.js.map +1 -1
- package/cjs/components/Modal/ModalBody.d.ts +1 -0
- package/cjs/components/Modal/ModalBody.js +9 -6
- package/cjs/components/Modal/ModalBody.js.map +1 -1
- package/cjs/components/Paging/Paging.d.ts +2 -2
- package/cjs/components/Paging/Paging.js +6 -5
- package/cjs/components/Paging/Paging.js.map +1 -1
- package/cjs/components/PasswordInput/PasswordInput.d.ts +3 -2
- package/cjs/components/PasswordInput/PasswordInput.js +13 -6
- package/cjs/components/PasswordInput/PasswordInput.js.map +1 -1
- package/cjs/components/Radio/Radio.d.ts +5 -10
- package/cjs/components/Radio/Radio.js +11 -10
- package/cjs/components/Radio/Radio.js.map +1 -1
- package/cjs/components/RadioGroup/RadioGroup.d.ts +2 -16
- package/cjs/components/RadioGroup/RadioGroup.js +16 -19
- package/cjs/components/RadioGroup/RadioGroup.js.map +1 -1
- package/cjs/components/RadioGroup/RadioGroupContext.d.ts +10 -0
- package/cjs/components/RadioGroup/RadioGroupContext.js +21 -0
- package/cjs/components/RadioGroup/RadioGroupContext.js.map +1 -0
- package/cjs/components/ScrollContainer/ScrollContainer.d.ts +1 -0
- package/cjs/components/ScrollContainer/ScrollContainer.js +8 -5
- package/cjs/components/ScrollContainer/ScrollContainer.js.map +1 -1
- package/cjs/components/Select/Select.d.ts +1 -0
- package/cjs/components/Select/Select.js +6 -4
- package/cjs/components/Select/Select.js.map +1 -1
- package/cjs/components/SidePage/SidePage.d.ts +1 -0
- package/cjs/components/SidePage/SidePage.js +4 -1
- package/cjs/components/SidePage/SidePage.js.map +1 -1
- package/cjs/components/SidePage/SidePageBody.d.ts +1 -0
- package/cjs/components/SidePage/SidePageBody.js +9 -6
- package/cjs/components/SidePage/SidePageBody.js.map +1 -1
- package/cjs/components/SidePage/SidePageContainer.d.ts +1 -0
- package/cjs/components/SidePage/SidePageContainer.js +9 -6
- package/cjs/components/SidePage/SidePageContainer.js.map +1 -1
- package/cjs/components/SidePage/SidePageFooter.d.ts +1 -2
- package/cjs/components/SidePage/SidePageFooter.js +11 -12
- package/cjs/components/SidePage/SidePageFooter.js.map +1 -1
- package/cjs/components/SidePage/SidePageHeader.d.ts +1 -0
- package/cjs/components/SidePage/SidePageHeader.js +6 -3
- package/cjs/components/SidePage/SidePageHeader.js.map +1 -1
- package/cjs/components/Spinner/Spinner.d.ts +1 -0
- package/cjs/components/Spinner/Spinner.js +8 -5
- package/cjs/components/Spinner/Spinner.js.map +1 -1
- package/cjs/components/Sticky/Sticky.d.ts +1 -0
- package/cjs/components/Sticky/Sticky.js +8 -5
- package/cjs/components/Sticky/Sticky.js.map +1 -1
- package/cjs/components/Switcher/Switcher.d.ts +1 -0
- package/cjs/components/Switcher/Switcher.js +6 -3
- package/cjs/components/Switcher/Switcher.js.map +1 -1
- package/cjs/components/Tabs/Indicator.d.ts +1 -0
- package/cjs/components/Tabs/Indicator.js +16 -15
- package/cjs/components/Tabs/Indicator.js.map +1 -1
- package/cjs/components/Tabs/Tab.d.ts +2 -1
- package/cjs/components/Tabs/Tab.js +13 -9
- package/cjs/components/Tabs/Tab.js.map +1 -1
- package/cjs/components/Tabs/Tabs.d.ts +1 -0
- package/cjs/components/Tabs/Tabs.js +9 -9
- package/cjs/components/Tabs/Tabs.js.map +1 -1
- package/cjs/components/Textarea/Textarea.d.ts +1 -0
- package/cjs/components/Textarea/Textarea.js +12 -5
- package/cjs/components/Textarea/Textarea.js.map +1 -1
- package/cjs/components/Toast/Toast.d.ts +3 -0
- package/cjs/components/Toast/Toast.js +15 -4
- package/cjs/components/Toast/Toast.js.map +1 -1
- package/cjs/components/Toast/ToastView.d.ts +1 -0
- package/cjs/components/Toast/ToastView.js +8 -5
- package/cjs/components/Toast/ToastView.js.map +1 -1
- package/cjs/components/Toggle/Toggle.d.ts +1 -0
- package/cjs/components/Toggle/Toggle.js +9 -6
- package/cjs/components/Toggle/Toggle.js.map +1 -1
- package/cjs/components/Token/Token.d.ts +1 -0
- package/cjs/components/Token/Token.js +7 -4
- package/cjs/components/Token/Token.js.map +1 -1
- package/cjs/components/TokenInput/TokenInput.d.ts +1 -0
- package/cjs/components/TokenInput/TokenInput.js +11 -8
- package/cjs/components/TokenInput/TokenInput.js.map +1 -1
- package/cjs/components/Tooltip/Tooltip.d.ts +3 -1
- package/cjs/components/Tooltip/Tooltip.js +16 -5
- package/cjs/components/Tooltip/Tooltip.js.map +1 -1
- package/cjs/components/TooltipMenu/TooltipMenu.d.ts +1 -0
- package/cjs/components/TooltipMenu/TooltipMenu.js +8 -5
- package/cjs/components/TooltipMenu/TooltipMenu.js.map +1 -1
- package/cjs/internal/CommonWrapper/CommonWrapper.d.ts +9 -1
- package/cjs/internal/CommonWrapper/CommonWrapper.js +38 -15
- package/cjs/internal/CommonWrapper/CommonWrapper.js.map +1 -1
- package/cjs/internal/CustomComboBox/ComboBoxMenu.js +3 -2
- package/cjs/internal/CustomComboBox/ComboBoxMenu.js.map +1 -1
- package/cjs/internal/CustomComboBox/ComboBoxView.d.ts +4 -1
- package/cjs/internal/CustomComboBox/ComboBoxView.js +15 -5
- package/cjs/internal/CustomComboBox/ComboBoxView.js.map +1 -1
- package/cjs/internal/CustomComboBox/CustomComboBox.d.ts +1 -0
- package/cjs/internal/CustomComboBox/CustomComboBox.js +8 -5
- package/cjs/internal/CustomComboBox/CustomComboBox.js.map +1 -1
- package/cjs/internal/DateSelect/DateSelect.d.ts +2 -2
- package/cjs/internal/DateSelect/DateSelect.js +3 -3
- package/cjs/internal/DateSelect/DateSelect.js.map +1 -1
- package/cjs/internal/DropdownContainer/DropdownContainer.d.ts +4 -7
- package/cjs/internal/DropdownContainer/DropdownContainer.js +8 -13
- package/cjs/internal/DropdownContainer/DropdownContainer.js.map +1 -1
- package/cjs/internal/FocusTrap/FocusTrap.d.ts +1 -0
- package/cjs/internal/FocusTrap/FocusTrap.js +12 -9
- package/cjs/internal/FocusTrap/FocusTrap.js.map +1 -1
- package/cjs/internal/IgnoreLayerClick/IgnoreLayerClick.js +12 -4
- package/cjs/internal/IgnoreLayerClick/IgnoreLayerClick.js.map +1 -1
- package/cjs/internal/InputLikeText/InputLikeText.d.ts +1 -0
- package/cjs/internal/InputLikeText/InputLikeText.js +10 -3
- package/cjs/internal/InputLikeText/InputLikeText.js.map +1 -1
- package/cjs/internal/InternalMenu/InternalMenu.d.ts +2 -3
- package/cjs/internal/InternalMenu/InternalMenu.js +16 -22
- package/cjs/internal/InternalMenu/InternalMenu.js.map +1 -1
- package/cjs/internal/MaskedInput/MaskedInput.d.ts +2 -2
- package/cjs/internal/MaskedInput/MaskedInput.js +3 -3
- package/cjs/internal/MaskedInput/MaskedInput.js.map +1 -1
- package/cjs/internal/Menu/Menu.d.ts +1 -0
- package/cjs/internal/Menu/Menu.js +9 -6
- package/cjs/internal/Menu/Menu.js.map +1 -1
- package/cjs/internal/Popup/Popup.d.ts +4 -4
- package/cjs/internal/Popup/Popup.js +50 -27
- package/cjs/internal/Popup/Popup.js.map +1 -1
- package/cjs/internal/PopupMenu/PopupMenu.d.ts +1 -0
- package/cjs/internal/PopupMenu/PopupMenu.js +7 -4
- package/cjs/internal/PopupMenu/PopupMenu.js.map +1 -1
- package/cjs/internal/RenderContainer/RenderContainer.d.ts +1 -1
- package/cjs/internal/RenderContainer/RenderContainer.js +2 -1
- package/cjs/internal/RenderContainer/RenderContainer.js.map +1 -1
- package/cjs/internal/RenderContainer/RenderInnerContainer.js +2 -3
- package/cjs/internal/RenderContainer/RenderInnerContainer.js.map +1 -1
- package/cjs/internal/RenderLayer/RenderLayer.d.ts +3 -1
- package/cjs/internal/RenderLayer/RenderLayer.js +13 -7
- package/cjs/internal/RenderLayer/RenderLayer.js.map +1 -1
- package/cjs/internal/ThemeShowcase/ThemeShowcase.d.ts +1 -1
- package/cjs/internal/ThemeShowcase/ThemeShowcase.js +20 -19
- package/cjs/internal/ThemeShowcase/ThemeShowcase.js.map +1 -1
- package/cjs/internal/ZIndex/ZIndex.d.ts +2 -0
- package/cjs/internal/ZIndex/ZIndex.js +45 -34
- package/cjs/internal/ZIndex/ZIndex.js.map +1 -1
- package/cjs/internal/icons/16px/index.d.ts +17 -16
- package/cjs/internal/icons/16px/index.js +108 -51
- package/cjs/internal/icons/16px/index.js.map +1 -1
- package/cjs/lib/callChildRef/callChildRef.d.ts +3 -0
- package/cjs/lib/callChildRef/callChildRef.js +19 -0
- package/cjs/lib/callChildRef/callChildRef.js.map +1 -0
- package/cjs/lib/rootNode/getRootNode.d.ts +3 -0
- package/cjs/lib/rootNode/getRootNode.js +27 -0
- package/cjs/lib/rootNode/getRootNode.js.map +1 -0
- package/cjs/lib/rootNode/index.d.ts +2 -0
- package/cjs/lib/rootNode/index.js +2 -0
- package/cjs/lib/rootNode/index.js.map +1 -0
- package/cjs/lib/rootNode/rootNodeDecorator.d.ts +33 -0
- package/cjs/lib/rootNode/rootNodeDecorator.js +31 -0
- package/cjs/lib/rootNode/rootNodeDecorator.js.map +1 -0
- package/cjs/lib/theming/Emotion.js +1 -0
- package/cjs/lib/theming/Emotion.js.map +1 -1
- package/cjs/lib/utils.d.ts +3 -0
- package/cjs/lib/utils.js +15 -2
- package/cjs/lib/utils.js.map +1 -1
- package/components/Autocomplete/Autocomplete/Autocomplete.js +19 -16
- package/components/Autocomplete/Autocomplete/Autocomplete.js.map +1 -1
- package/components/Autocomplete/Autocomplete.d.ts +1 -0
- package/components/Button/Button/Button.js +15 -12
- package/components/Button/Button/Button.js.map +1 -1
- package/components/Button/Button.d.ts +1 -0
- package/components/Center/Center/Center.js +14 -9
- package/components/Center/Center/Center.js.map +1 -1
- package/components/Center/Center.d.ts +1 -0
- package/components/Checkbox/Checkbox/Checkbox.js +16 -10
- package/components/Checkbox/Checkbox/Checkbox.js.map +1 -1
- package/components/Checkbox/Checkbox.d.ts +3 -2
- package/components/ComboBox/ComboBox/ComboBox.js +38 -32
- package/components/ComboBox/ComboBox/ComboBox.js.map +1 -1
- package/components/ComboBox/ComboBox.d.ts +2 -0
- package/components/CurrencyInput/CurrencyInput/CurrencyInput.js +29 -27
- package/components/CurrencyInput/CurrencyInput/CurrencyInput.js.map +1 -1
- package/components/CurrencyInput/CurrencyInput.d.ts +3 -3
- package/components/DateInput/DateInput/DateInput.js +7 -3
- package/components/DateInput/DateInput/DateInput.js.map +1 -1
- package/components/DateInput/DateInput.d.ts +1 -0
- package/components/DatePicker/DatePicker/DatePicker.js +29 -22
- package/components/DatePicker/DatePicker/DatePicker.js.map +1 -1
- package/components/DatePicker/DatePicker.d.ts +4 -2
- package/components/Dropdown/Dropdown/Dropdown.js +15 -13
- package/components/Dropdown/Dropdown/Dropdown.js.map +1 -1
- package/components/Dropdown/Dropdown.d.ts +1 -0
- package/components/DropdownMenu/DropdownMenu/DropdownMenu.js +15 -9
- package/components/DropdownMenu/DropdownMenu/DropdownMenu.js.map +1 -1
- package/components/DropdownMenu/DropdownMenu.d.ts +1 -0
- package/components/FxInput/FxInput/FxInput.js +13 -9
- package/components/FxInput/FxInput/FxInput.js.map +1 -1
- package/components/FxInput/FxInput.d.ts +1 -0
- package/components/Gapped/Gapped/Gapped.js +15 -11
- package/components/Gapped/Gapped/Gapped.js.map +1 -1
- package/components/Gapped/Gapped.d.ts +1 -0
- package/components/Group/Group/Group.js +22 -9
- package/components/Group/Group/Group.js.map +1 -1
- package/components/Group/Group.d.ts +1 -0
- package/components/Hint/Hint/Hint.js +18 -12
- package/components/Hint/Hint/Hint.js.map +1 -1
- package/components/Hint/Hint.d.ts +3 -2
- package/components/Input/Input/Input.js +21 -14
- package/components/Input/Input/Input.js.map +1 -1
- package/components/Input/Input.d.ts +4 -1
- package/components/Kebab/Kebab/Kebab.js +12 -7
- package/components/Kebab/Kebab/Kebab.js.map +1 -1
- package/components/Kebab/Kebab.d.ts +1 -0
- package/components/Link/Link/Link.js +15 -11
- package/components/Link/Link/Link.js.map +1 -1
- package/components/Link/Link.d.ts +1 -0
- package/components/Loader/Loader/Loader.js +16 -11
- package/components/Loader/Loader/Loader.js.map +1 -1
- package/components/Loader/Loader.d.ts +1 -0
- package/components/MenuItem/MenuItem/MenuItem.js +21 -14
- package/components/MenuItem/MenuItem/MenuItem.js.map +1 -1
- package/components/MenuItem/MenuItem.d.ts +1 -0
- package/components/Modal/Modal/Modal.js +1 -1
- package/components/Modal/Modal/Modal.js.map +1 -1
- package/components/Modal/ModalBody/ModalBody.js +16 -10
- package/components/Modal/ModalBody/ModalBody.js.map +1 -1
- package/components/Modal/ModalBody.d.ts +1 -0
- package/components/Paging/Paging/Paging.js +17 -14
- package/components/Paging/Paging/Paging.js.map +1 -1
- package/components/Paging/Paging.d.ts +2 -2
- package/components/PasswordInput/PasswordInput/PasswordInput.js +18 -14
- package/components/PasswordInput/PasswordInput/PasswordInput.js.map +1 -1
- package/components/PasswordInput/PasswordInput.d.ts +3 -2
- package/components/Radio/Radio/Radio.js +17 -19
- package/components/Radio/Radio/Radio.js.map +1 -1
- package/components/Radio/Radio.d.ts +5 -10
- package/components/RadioGroup/RadioGroup/RadioGroup.js +35 -38
- package/components/RadioGroup/RadioGroup/RadioGroup.js.map +1 -1
- package/components/RadioGroup/RadioGroup.d.ts +2 -16
- package/components/RadioGroup/RadioGroupContext/RadioGroupContext.js +12 -0
- package/components/RadioGroup/RadioGroupContext/RadioGroupContext.js.map +1 -0
- package/components/RadioGroup/RadioGroupContext/package.json +6 -0
- package/components/RadioGroup/RadioGroupContext.d.ts +10 -0
- package/components/ScrollContainer/ScrollContainer/ScrollContainer.js +13 -8
- package/components/ScrollContainer/ScrollContainer/ScrollContainer.js.map +1 -1
- package/components/ScrollContainer/ScrollContainer.d.ts +1 -0
- package/components/Select/Select/Select.js +8 -5
- package/components/Select/Select/Select.js.map +1 -1
- package/components/Select/Select.d.ts +1 -0
- package/components/SidePage/SidePage/SidePage.js +6 -3
- package/components/SidePage/SidePage/SidePage.js.map +1 -1
- package/components/SidePage/SidePage.d.ts +1 -0
- package/components/SidePage/SidePageBody/SidePageBody.js +16 -10
- package/components/SidePage/SidePageBody/SidePageBody.js.map +1 -1
- package/components/SidePage/SidePageBody.d.ts +1 -0
- package/components/SidePage/SidePageContainer/SidePageContainer.js +16 -9
- package/components/SidePage/SidePageContainer/SidePageContainer.js.map +1 -1
- package/components/SidePage/SidePageContainer.d.ts +1 -0
- package/components/SidePage/SidePageFooter/SidePageFooter.js +22 -19
- package/components/SidePage/SidePageFooter/SidePageFooter.js.map +1 -1
- package/components/SidePage/SidePageFooter.d.ts +1 -2
- package/components/SidePage/SidePageHeader/SidePageHeader.js +15 -10
- package/components/SidePage/SidePageHeader/SidePageHeader.js.map +1 -1
- package/components/SidePage/SidePageHeader.d.ts +1 -0
- package/components/Spinner/Spinner/Spinner.js +8 -3
- package/components/Spinner/Spinner/Spinner.js.map +1 -1
- package/components/Spinner/Spinner.d.ts +1 -0
- package/components/Sticky/Sticky/Sticky.js +13 -8
- package/components/Sticky/Sticky/Sticky.js.map +1 -1
- package/components/Sticky/Sticky.d.ts +1 -0
- package/components/Switcher/Switcher/Switcher.js +11 -6
- package/components/Switcher/Switcher/Switcher.js.map +1 -1
- package/components/Switcher/Switcher.d.ts +1 -0
- package/components/Tabs/Indicator/Indicator.js +16 -14
- package/components/Tabs/Indicator/Indicator.js.map +1 -1
- package/components/Tabs/Indicator.d.ts +1 -0
- package/components/Tabs/Tab/Tab.js +31 -34
- package/components/Tabs/Tab/Tab.js.map +1 -1
- package/components/Tabs/Tab.d.ts +2 -1
- package/components/Tabs/Tabs/Tabs.js +20 -20
- package/components/Tabs/Tabs/Tabs.js.map +1 -1
- package/components/Tabs/Tabs.d.ts +1 -0
- package/components/Textarea/Textarea/Textarea.js +21 -17
- package/components/Textarea/Textarea/Textarea.js.map +1 -1
- package/components/Textarea/Textarea.d.ts +1 -0
- package/components/Toast/Toast/Toast.js +29 -14
- package/components/Toast/Toast/Toast.js.map +1 -1
- package/components/Toast/Toast.d.ts +3 -0
- package/components/Toast/ToastView/ToastView.js +10 -5
- package/components/Toast/ToastView/ToastView.js.map +1 -1
- package/components/Toast/ToastView.d.ts +1 -0
- package/components/Toggle/Toggle/Toggle.js +16 -11
- package/components/Toggle/Toggle/Toggle.js.map +1 -1
- package/components/Toggle/Toggle.d.ts +1 -0
- package/components/Token/Token/Token.js +11 -4
- package/components/Token/Token/Token.js.map +1 -1
- package/components/Token/Token.d.ts +1 -0
- package/components/TokenInput/TokenInput/TokenInput.js +12 -6
- package/components/TokenInput/TokenInput/TokenInput.js.map +1 -1
- package/components/TokenInput/TokenInput.d.ts +1 -0
- package/components/Tooltip/Tooltip/Tooltip.js +24 -15
- package/components/Tooltip/Tooltip/Tooltip.js.map +1 -1
- package/components/Tooltip/Tooltip.d.ts +3 -1
- package/components/TooltipMenu/TooltipMenu/TooltipMenu.js +23 -17
- package/components/TooltipMenu/TooltipMenu/TooltipMenu.js.map +1 -1
- package/components/TooltipMenu/TooltipMenu.d.ts +1 -0
- package/internal/CommonWrapper/CommonWrapper/CommonWrapper.js +37 -10
- package/internal/CommonWrapper/CommonWrapper/CommonWrapper.js.map +1 -1
- package/internal/CommonWrapper/CommonWrapper.d.ts +9 -1
- package/internal/CustomComboBox/ComboBoxMenu/ComboBoxMenu.js +5 -3
- package/internal/CustomComboBox/ComboBoxMenu/ComboBoxMenu.js.map +1 -1
- package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js +23 -13
- package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js.map +1 -1
- package/internal/CustomComboBox/ComboBoxView.d.ts +4 -1
- package/internal/CustomComboBox/CustomComboBox/CustomComboBox.js +12 -4
- package/internal/CustomComboBox/CustomComboBox/CustomComboBox.js.map +1 -1
- package/internal/CustomComboBox/CustomComboBox.d.ts +1 -0
- package/internal/DateSelect/DateSelect/DateSelect.js +5 -5
- package/internal/DateSelect/DateSelect/DateSelect.js.map +1 -1
- package/internal/DateSelect/DateSelect.d.ts +2 -2
- package/internal/DropdownContainer/DropdownContainer/DropdownContainer.js +11 -15
- package/internal/DropdownContainer/DropdownContainer/DropdownContainer.js.map +1 -1
- package/internal/DropdownContainer/DropdownContainer.d.ts +4 -7
- package/internal/FocusTrap/FocusTrap/FocusTrap.js +17 -9
- package/internal/FocusTrap/FocusTrap/FocusTrap.js.map +1 -1
- package/internal/FocusTrap/FocusTrap.d.ts +1 -0
- package/internal/IgnoreLayerClick/IgnoreLayerClick/IgnoreLayerClick.js +13 -7
- package/internal/IgnoreLayerClick/IgnoreLayerClick/IgnoreLayerClick.js.map +1 -1
- package/internal/InputLikeText/InputLikeText/InputLikeText.js +11 -6
- package/internal/InputLikeText/InputLikeText/InputLikeText.js.map +1 -1
- package/internal/InputLikeText/InputLikeText.d.ts +1 -0
- package/internal/InternalMenu/InternalMenu/InternalMenu.js +24 -25
- package/internal/InternalMenu/InternalMenu/InternalMenu.js.map +1 -1
- package/internal/InternalMenu/InternalMenu.d.ts +2 -3
- package/internal/MaskedInput/MaskedInput/MaskedInput.js +7 -7
- package/internal/MaskedInput/MaskedInput/MaskedInput.js.map +1 -1
- package/internal/MaskedInput/MaskedInput.d.ts +2 -2
- package/internal/Menu/Menu/Menu.js +11 -8
- package/internal/Menu/Menu/Menu.js.map +1 -1
- package/internal/Menu/Menu.d.ts +1 -0
- package/internal/Popup/Popup/Popup.js +79 -68
- package/internal/Popup/Popup/Popup.js.map +1 -1
- package/internal/Popup/Popup.d.ts +4 -4
- package/internal/PopupMenu/PopupMenu/PopupMenu.js +12 -7
- package/internal/PopupMenu/PopupMenu/PopupMenu.js.map +1 -1
- package/internal/PopupMenu/PopupMenu.d.ts +1 -0
- package/internal/RenderContainer/RenderContainer/RenderContainer.js +3 -1
- package/internal/RenderContainer/RenderContainer/RenderContainer.js.map +1 -1
- package/internal/RenderContainer/RenderContainer.d.ts +1 -1
- package/internal/RenderContainer/RenderInnerContainer/RenderInnerContainer.js +2 -3
- package/internal/RenderContainer/RenderInnerContainer/RenderInnerContainer.js.map +1 -1
- package/internal/RenderLayer/RenderLayer/RenderLayer.js +20 -18
- package/internal/RenderLayer/RenderLayer/RenderLayer.js.map +1 -1
- package/internal/RenderLayer/RenderLayer.d.ts +3 -1
- package/internal/ThemeShowcase/ThemeShowcase/ThemeShowcase.js +35 -43
- package/internal/ThemeShowcase/ThemeShowcase/ThemeShowcase.js.map +1 -1
- package/internal/ThemeShowcase/ThemeShowcase.d.ts +1 -1
- package/internal/ZIndex/ZIndex/ZIndex.js +20 -8
- package/internal/ZIndex/ZIndex/ZIndex.js.map +1 -1
- package/internal/ZIndex/ZIndex.d.ts +2 -0
- package/internal/icons/16px/index/index.js +83 -51
- package/internal/icons/16px/index/index.js.map +1 -1
- package/internal/icons/16px/index.d.ts +17 -16
- package/lib/callChildRef/callChildRef/callChildRef.js +14 -0
- package/lib/callChildRef/callChildRef/callChildRef.js.map +1 -0
- package/lib/callChildRef/callChildRef/package.json +6 -0
- package/lib/callChildRef/callChildRef.d.ts +3 -0
- package/lib/rootNode/getRootNode/getRootNode.js +25 -0
- package/lib/rootNode/getRootNode/getRootNode.js.map +1 -0
- package/lib/rootNode/getRootNode/package.json +6 -0
- package/lib/rootNode/getRootNode.d.ts +3 -0
- package/lib/rootNode/index/index.js +2 -0
- package/lib/rootNode/index/index.js.map +1 -0
- package/lib/rootNode/index/package.json +6 -0
- package/lib/rootNode/index.d.ts +2 -0
- package/lib/rootNode/package.json +6 -0
- package/lib/rootNode/rootNodeDecorator/package.json +6 -0
- package/lib/rootNode/rootNodeDecorator/rootNodeDecorator.js +37 -0
- package/lib/rootNode/rootNodeDecorator/rootNodeDecorator.js.map +1 -0
- package/lib/rootNode/rootNodeDecorator.d.ts +33 -0
- package/lib/theming/Emotion/Emotion.js +1 -0
- package/lib/theming/Emotion/Emotion.js.map +1 -1
- package/lib/utils/utils.js +11 -1
- package/lib/utils/utils.js.map +1 -1
- package/lib/utils.d.ts +3 -0
- package/package.json +8 -2
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
2
|
-
var _reactDom = require("react-dom");
|
|
1
|
+
"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");exports.__esModule = true;exports.Indicator = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
|
|
3
2
|
var _lodash = _interopRequireDefault(require("lodash.throttle"));
|
|
4
3
|
|
|
5
4
|
var LayoutEvents = _interopRequireWildcard(require("../../lib/LayoutEvents"));
|
|
@@ -7,9 +6,10 @@ var LayoutEvents = _interopRequireWildcard(require("../../lib/LayoutEvents"));
|
|
|
7
6
|
var _ThemeContext = require("../../lib/theming/ThemeContext");
|
|
8
7
|
|
|
9
8
|
var _Emotion = require("../../lib/theming/Emotion");
|
|
9
|
+
var _rootNode = require("../../lib/rootNode");
|
|
10
10
|
|
|
11
11
|
var _Indicator = require("./Indicator.styles");
|
|
12
|
-
var _TabsContext = require("./TabsContext");var
|
|
12
|
+
var _TabsContext = require("./TabsContext");var _class, _class2, _temp;var
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
|
|
@@ -24,7 +24,8 @@ var _TabsContext = require("./TabsContext");var
|
|
|
24
24
|
|
|
25
25
|
|
|
26
26
|
|
|
27
|
-
|
|
27
|
+
|
|
28
|
+
Indicator = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Indicator, _React$Component);function Indicator() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
|
|
28
29
|
|
|
29
30
|
context = _this.context;_this.
|
|
30
31
|
|
|
@@ -39,6 +40,8 @@ Indicator = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defaul
|
|
|
39
40
|
null;_this.
|
|
40
41
|
|
|
41
42
|
removeTabUpdatesListener = null;_this.
|
|
43
|
+
setRootNode = void 0;_this.
|
|
44
|
+
|
|
42
45
|
|
|
43
46
|
|
|
44
47
|
|
|
@@ -107,31 +110,29 @@ Indicator = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defaul
|
|
|
107
110
|
if (stylesUpdated) {
|
|
108
111
|
_this.setState({ styles: nodeStyles });
|
|
109
112
|
}
|
|
110
|
-
}, 100);return _this;}var _proto = Indicator.prototype;_proto.componentDidMount = function componentDidMount() {this.eventListener = LayoutEvents.addListener(this.reflow);this.removeTabUpdatesListener = this.props.tabUpdates.on(this.reflow);this.reflow();};_proto.componentWillUnmount = function componentWillUnmount() {this.reflow.cancel();if (this.eventListener) {this.eventListener.remove();}if (this.removeTabUpdatesListener) {this.removeTabUpdatesListener();}};_proto.componentDidUpdate = function componentDidUpdate(_, prevState) {this.reflow();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _this$context2 = this.context,getTab = _this$context2.getTab,activeTab = _this$context2.activeTab;var node = getTab(activeTab);var indicators = node && node.getIndicators && node.getIndicators() || { error: false, warning: false, success: false, primary: false, disabled: false };return /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Indicator.styles.root(this.theme), indicators.primary && _Indicator.styles.primary(this.theme), indicators.success && _Indicator.styles.success(this.theme), indicators.warning && _Indicator.styles.warning(this.theme), indicators.error && _Indicator.styles.error(this.theme), this.props.className), style: this.state.styles });};_proto.
|
|
113
|
+
}, 100);return _this;}var _proto = Indicator.prototype;_proto.componentDidMount = function componentDidMount() {this.eventListener = LayoutEvents.addListener(this.reflow);this.removeTabUpdatesListener = this.props.tabUpdates.on(this.reflow);this.reflow();};_proto.componentWillUnmount = function componentWillUnmount() {this.reflow.cancel();if (this.eventListener) {this.eventListener.remove();}if (this.removeTabUpdatesListener) {this.removeTabUpdatesListener();}};_proto.componentDidUpdate = function componentDidUpdate(_, prevState) {this.reflow();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _this$context2 = this.context,getTab = _this$context2.getTab,activeTab = _this$context2.activeTab;var node = getTab(activeTab);var indicators = node && node.getIndicators && node.getIndicators() || { error: false, warning: false, success: false, primary: false, disabled: false };return /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Indicator.styles.root(this.theme), indicators.primary && _Indicator.styles.primary(this.theme), indicators.success && _Indicator.styles.success(this.theme), indicators.warning && _Indicator.styles.warning(this.theme), indicators.error && _Indicator.styles.error(this.theme), this.props.className), style: this.state.styles, ref: this.setRootNode });};_proto.
|
|
111
114
|
|
|
112
115
|
getStyles = function getStyles(node) {
|
|
113
|
-
|
|
114
|
-
node = (0, _reactDom.findDOMNode)(node);
|
|
115
|
-
}
|
|
116
|
+
var htmlNode = (0, _rootNode.getRootNode)(node);
|
|
116
117
|
|
|
117
|
-
if (
|
|
118
|
-
var rect =
|
|
118
|
+
if (htmlNode && htmlNode instanceof HTMLElement) {
|
|
119
|
+
var rect = htmlNode.getBoundingClientRect();
|
|
119
120
|
if (this.props.vertical) {
|
|
120
121
|
return {
|
|
121
122
|
width: this.theme.tabBorderWidth,
|
|
122
|
-
left:
|
|
123
|
-
top:
|
|
123
|
+
left: htmlNode.offsetLeft,
|
|
124
|
+
top: htmlNode.offsetTop,
|
|
124
125
|
height: rect.bottom - rect.top };
|
|
125
126
|
|
|
126
127
|
}
|
|
127
128
|
|
|
128
129
|
var tabBorderWidth = parseInt(this.theme.tabBorderWidth, 10) || 0;
|
|
129
130
|
return {
|
|
130
|
-
left:
|
|
131
|
-
top:
|
|
131
|
+
left: htmlNode.offsetLeft,
|
|
132
|
+
top: htmlNode.offsetHeight + htmlNode.offsetTop - tabBorderWidth,
|
|
132
133
|
width: rect.right - rect.left };
|
|
133
134
|
|
|
134
135
|
}
|
|
135
136
|
|
|
136
137
|
return {};
|
|
137
|
-
};return Indicator;}(_react.default.Component)
|
|
138
|
+
};return Indicator;}(_react.default.Component), _class2.contextType = _TabsContext.TabsContext, _temp)) || _class;exports.Indicator = Indicator;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Indicator.tsx"],"names":["Indicator","context","state","styles","theme","eventListener","removeTabUpdatesListener","reflow","getTab","activeTab","node","nodeStyles","getStyles","stylesUpdated","some","prop","setState","componentDidMount","LayoutEvents","addListener","props","tabUpdates","on","componentWillUnmount","cancel","remove","componentDidUpdate","_","prevState","render","renderMain","indicators","getIndicators","error","warning","success","primary","disabled","root","className","
|
|
1
|
+
{"version":3,"sources":["Indicator.tsx"],"names":["Indicator","rootNode","context","state","styles","theme","eventListener","removeTabUpdatesListener","setRootNode","reflow","getTab","activeTab","node","nodeStyles","getStyles","stylesUpdated","some","prop","setState","componentDidMount","LayoutEvents","addListener","props","tabUpdates","on","componentWillUnmount","cancel","remove","componentDidUpdate","_","prevState","render","renderMain","indicators","getIndicators","error","warning","success","primary","disabled","root","className","htmlNode","HTMLElement","rect","getBoundingClientRect","vertical","width","tabBorderWidth","left","offsetLeft","top","offsetTop","height","bottom","parseInt","offsetHeight","right","React","Component","contextType","TabsContext"],"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';\n\nimport { styles } from './Indicator.styles';\nimport { TabsContext, TabsContextType } from './TabsContext';\nimport { TabIndicators } from './Tab';\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 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 = htmlNode.getBoundingClientRect();\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"]}
|
|
@@ -96,7 +96,8 @@ export declare class Tab<T extends string = string> extends React.Component<TabP
|
|
|
96
96
|
state: TabState;
|
|
97
97
|
private theme;
|
|
98
98
|
private tabComponent;
|
|
99
|
-
|
|
99
|
+
private setRootNode;
|
|
100
|
+
constructor(props: TabProps<T>);
|
|
100
101
|
componentDidMount(): void;
|
|
101
102
|
componentDidUpdate(): void;
|
|
102
103
|
componentWillUnmount(): void;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Tab = void 0;var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
|
|
1
|
+
"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Tab = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
|
|
2
2
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
3
3
|
var _invariant = _interopRequireDefault(require("invariant"));
|
|
4
4
|
|
|
@@ -11,9 +11,10 @@ var _ThemeContext = require("../../lib/theming/ThemeContext");
|
|
|
11
11
|
|
|
12
12
|
var _CommonWrapper = require("../../internal/CommonWrapper");
|
|
13
13
|
var _Emotion = require("../../lib/theming/Emotion");
|
|
14
|
+
var _rootNode = require("../../lib/rootNode");
|
|
14
15
|
|
|
15
16
|
var _TabsContext = require("./TabsContext");
|
|
16
|
-
var _Tab = require("./Tab.styles");
|
|
17
|
+
var _Tab = require("./Tab.styles");var _class, _class2, _temp;
|
|
17
18
|
|
|
18
19
|
|
|
19
20
|
|
|
@@ -104,11 +105,10 @@ var _Tab = require("./Tab.styles");
|
|
|
104
105
|
*
|
|
105
106
|
* Works only inside Tabs component, otherwise throws
|
|
106
107
|
*/var
|
|
107
|
-
Tab = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Tab, _React$Component);function Tab() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
|
|
108
108
|
|
|
109
|
+
Tab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Tab, _React$Component);
|
|
109
110
|
|
|
110
111
|
|
|
111
|
-
context = _this.context;_this.
|
|
112
112
|
|
|
113
113
|
|
|
114
114
|
|
|
@@ -123,12 +123,8 @@ Tab = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Tab
|
|
|
123
123
|
|
|
124
124
|
|
|
125
125
|
|
|
126
|
-
state = {
|
|
127
|
-
focusedByKeyboard: false };_this.
|
|
128
126
|
|
|
129
127
|
|
|
130
|
-
theme = void 0;_this.
|
|
131
|
-
tabComponent = null;_this.
|
|
132
128
|
|
|
133
129
|
|
|
134
130
|
|
|
@@ -137,6 +133,14 @@ Tab = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Tab
|
|
|
137
133
|
|
|
138
134
|
|
|
139
135
|
|
|
136
|
+
function Tab(props) {var _this;
|
|
137
|
+
_this = _React$Component.call(this, props) || this;_this.context = _this.context;_this.state = { focusedByKeyboard: false };_this.theme = void 0;_this.tabComponent = null;_this.setRootNode = void 0;_this.
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
|
|
140
144
|
|
|
141
145
|
|
|
142
146
|
|
|
@@ -301,4 +305,4 @@ Tab = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Tab
|
|
|
301
305
|
}
|
|
302
306
|
|
|
303
307
|
_this.setState({ focusedByKeyboard: false });
|
|
304
|
-
};
|
|
308
|
+
};(0, _invariant.default)(_this.context !== _TabsContext.TabsContextDefaultValue, 'Tab should be placed inside Tabs component');return _this;}var _proto = Tab.prototype;_proto.componentDidMount = function componentDidMount() {var id = this.getId();if (typeof id === 'string') {this.context.addTab(id, this.getTabInstance);}};_proto.componentDidUpdate = function componentDidUpdate() {if (this.context.activeTab === this.props.id) {this.context.notifyUpdate();}};_proto.componentWillUnmount = function componentWillUnmount() {var id = this.getId();if (typeof id === 'string') {this.context.removeTab(id);}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.getIndicators = function getIndicators() {return { error: Boolean(this.props.error), warning: Boolean(this.props.warning), success: Boolean(this.props.success), primary: Boolean(this.props.primary), disabled: Boolean(this.props.disabled) };};_proto.renderMain = function renderMain() {var _cx;var _this$props = this.props,children = _this$props.children,disabled = _this$props.disabled,error = _this$props.error,warning = _this$props.warning,success = _this$props.success,primary = _this$props.primary,_this$props$component = _this$props.component,Component = _this$props$component === void 0 ? Tab.defaultProps.component : _this$props$component,href = _this$props.href;var isActive = false;var isVertical = false;var id = this.getId();if (typeof id === 'string') {isActive = this.context.activeTab === this.getId();isVertical = this.context.vertical;}var orientationStyles = isVertical ? _Tab.verticalStyles : _Tab.horizontalStyles;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(Component, { className: (0, _Emotion.cx)((_cx = {}, _cx[_Tab.styles.root(this.theme)] = true, _cx[_Tab.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[_Tab.styles.active()] = !!isActive, _cx[orientationStyles.active(this.theme)] = !!isActive, _cx[_Tab.styles.disabled(this.theme)] = !!disabled, _cx[orientationStyles.disabled()] = !!disabled, _cx)), onBlur: this.handleBlur, onClick: this.switchTab, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, tabIndex: disabled ? -1 : 0, ref: (0, _utils.isFunctionalComponent)(Component) ? null : this.refTabComponent, href: href }, /*#__PURE__*/_react.default.createElement(_ResizeDetector.ResizeDetector, { onResize: this.context.notifyUpdate }, children), this.state.focusedByKeyboard && /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Tab.styles.focus(this.theme), _Tab.globalClasses.focus) })));};return Tab;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Tab', _class2.contextType = _TabsContext.TabsContext, _class2.propTypes = { children: _propTypes.default.node, disabled: _propTypes.default.bool, href: _propTypes.default.string.isRequired, onClick: _propTypes.default.func, onKeyDown: _propTypes.default.func }, _class2.defaultProps = { component: 'a', href: '' }, _temp)) || _class;exports.Tab = Tab;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Tab.tsx"],"names":["Tab","context","state","focusedByKeyboard","theme","tabComponent","getUnderlyingNode","getId","props","id","href","refTabComponent","instance","getTabInstance","switchTab","event","disabled","preventDefault","onClick","defaultPrevented","component","handleKeyDown","e","onKeyDown","delta","shiftFocus","handleFocus","requestAnimationFrame","keyListener","isTabPressed","isArrowPressed","setState","handleBlur","UNSAFE_componentWillMount","TabsContextDefaultValue","componentDidMount","addTab","componentDidUpdate","activeTab","notifyUpdate","componentWillUnmount","removeTab","render","renderMain","getIndicators","error","Boolean","warning","success","primary","children","Component","defaultProps","isActive","isVertical","vertical","orientationStyles","verticalStyles","horizontalStyles","styles","root","active","focus","globalClasses","React","__KONTUR_REACT_UI__","contextType","TabsContext","propTypes","PropTypes","node","bool","string","isRequired","func"],"mappings":"6VAAA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4EA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,G;AACaA,G;;;;AAIJC,IAAAA,O,GAA2B,MAAKA,O;;;;;;;;;;;;;;;AAehCC,IAAAA,K,GAAkB;AACvBC,MAAAA,iBAAiB,EAAE,KADI,E;;;AAIjBC,IAAAA,K;AACAC,IAAAA,Y,GAAqD,I;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CtDC,IAAAA,iB,GAAoB,oBAAM,MAAKD,YAAX,E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDnBE,IAAAA,K,GAAQ,oBAAM,MAAKC,KAAL,CAAWC,EAAX,IAAiB,MAAKD,KAAL,CAAWE,IAAlC,E;;AAERC,IAAAA,e,GAAkB,UAACC,QAAD,EAAuC;AAC/D,YAAKP,YAAL,GAAoBO,QAApB;AACD,K;;AAEOC,IAAAA,c,GAAiB,iE;;AAEjBC,IAAAA,S,GAAY,UAACC,KAAD,EAA0C;AAC5D,UAAI,MAAKP,KAAL,CAAWQ,QAAf,EAAyB;AACvBD,QAAAA,KAAK,CAACE,cAAN;AACA;AACD;;AAED,UAAMR,EAAE,GAAG,MAAKD,KAAL,CAAWC,EAAX,IAAiB,MAAKD,KAAL,CAAWE,IAAvC;AACA,UAAI,MAAKF,KAAL,CAAWU,OAAf,EAAwB;AACtB,cAAKV,KAAL,CAAWU,OAAX,CAAmBH,KAAnB;AACA,YAAIA,KAAK,CAACI,gBAAV,EAA4B;AAC1B;AACD;AACF;AACD,UAAI,OAAOV,EAAP,KAAc,QAAlB,EAA4B;AAC1B,cAAKR,OAAL,CAAaa,SAAb,CAAuBL,EAAvB;AACD;AACD,UAAI,MAAKD,KAAL,CAAWY,SAAX,KAAyB,GAAzB,IAAgC,CAAC,MAAKZ,KAAL,CAAWE,IAAhD,EAAsD;AACpDK,QAAAA,KAAK,CAACE,cAAN;AACD;AACF,K;;AAEOI,IAAAA,a,GAAgB,UAACC,CAAD,EAAyC;AAC/D,UAAI,MAAKd,KAAL,CAAWQ,QAAf,EAAyB;AACvB;AACD;;AAED,UAAI,MAAKR,KAAL,CAAWe,SAAf,EAA0B;AACxB,cAAKf,KAAL,CAAWe,SAAX,CAAqBD,CAArB;AACA,YAAIA,CAAC,CAACH,gBAAN,EAAwB;AACtB;AACD;AACF;AACD,UAAMV,EAAE,GAAG,MAAKF,KAAL,EAAX;AACA,UAAI,OAAOE,EAAP,KAAc,QAAlB,EAA4B;AAC1B;AACD;AACD,UAAI,CAAC,6BAAWa,CAAX,CAAL,EAAoB;AAClB;AACD;AACDA,MAAAA,CAAC,CAACL,cAAF;AACA,UAAMO,KAAK,GAAG,iCAAeF,CAAf,KAAqB,+BAAaA,CAAb,CAArB,GAAuC,CAAC,CAAxC,GAA4C,CAA1D;AACA,YAAKrB,OAAL,CAAawB,UAAb,CAAwBhB,EAAxB,EAA4Be,KAA5B;AACD,K;;AAEOE,IAAAA,W,GAAc,YAAM;AAC1B,UAAI,MAAKlB,KAAL,CAAWQ,QAAf,EAAyB;AACvB;AACD;;AAED;AACA;AACAW,MAAAA,qBAAqB,CAAC,YAAM;AAC1B,YAAIC,yBAAYC,YAAZ,IAA4BD,yBAAYE,cAA5C,EAA4D;AAC1D,gBAAKC,QAAL,CAAc,EAAE5B,iBAAiB,EAAE,IAArB,EAAd;AACD;AACF,OAJoB,CAArB;AAKD,K;;AAEO6B,IAAAA,U,GAAa,YAAM;AACzB,UAAI,MAAKxB,KAAL,CAAWQ,QAAf,EAAyB;AACvB;AACD;;AAED,YAAKe,QAAL,CAAc,EAAE5B,iBAAiB,EAAE,KAArB,EAAd;AACD,K,iDA3KM8B,yB,GAAP,qCAAmC,CACjC,wBAAU,KAAKhC,OAAL,KAAiBiC,oCAA3B,EAAoD,4CAApD,EACD,C,QAEMC,iB,GAAP,6BAA2B,CACzB,IAAM1B,EAAE,GAAG,KAAKF,KAAL,EAAX,CACA,IAAI,OAAOE,EAAP,KAAc,QAAlB,EAA4B,CAC1B,KAAKR,OAAL,CAAamC,MAAb,CAAoB3B,EAApB,EAAwB,KAAKI,cAA7B,EACD,CACF,C,QAEMwB,kB,GAAP,8BAA4B,CAC1B,IAAI,KAAKpC,OAAL,CAAaqC,SAAb,KAA2B,KAAK9B,KAAL,CAAWC,EAA1C,EAA8C,CAC5C,KAAKR,OAAL,CAAasC,YAAb,GACD,CACF,C,QAEMC,oB,GAAP,gCAA8B,CAC5B,IAAM/B,EAAE,GAAG,KAAKF,KAAL,EAAX,CACA,IAAI,OAAOE,EAAP,KAAc,QAAlB,EAA4B,CAC1B,KAAKR,OAAL,CAAawC,SAAb,CAAuBhC,EAAvB,EACD,CACF,C,QAEMiC,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACtC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACuC,UAAL,EAAP,CACD,CAJH,CADF,CAQD,C,QAEMC,a,GAAP,yBAAuB,CACrB,OAAO,EACLC,KAAK,EAAEC,OAAO,CAAC,KAAKtC,KAAL,CAAWqC,KAAZ,CADT,EAELE,OAAO,EAAED,OAAO,CAAC,KAAKtC,KAAL,CAAWuC,OAAZ,CAFX,EAGLC,OAAO,EAAEF,OAAO,CAAC,KAAKtC,KAAL,CAAWwC,OAAZ,CAHX,EAILC,OAAO,EAAEH,OAAO,CAAC,KAAKtC,KAAL,CAAWyC,OAAZ,CAJX,EAKLjC,QAAQ,EAAE8B,OAAO,CAAC,KAAKtC,KAAL,CAAWQ,QAAZ,CALZ,EAAP,CAOD,C,QAIO2B,U,GAAR,sBAAqB,2BAUf,KAAKnC,KAVU,CAEjB0C,QAFiB,eAEjBA,QAFiB,CAGjBlC,QAHiB,eAGjBA,QAHiB,CAIjB6B,KAJiB,eAIjBA,KAJiB,CAKjBE,OALiB,eAKjBA,OALiB,CAMjBC,OANiB,eAMjBA,OANiB,CAOjBC,OAPiB,eAOjBA,OAPiB,qCAQjB7B,SARiB,CAQN+B,SARM,sCAQMnD,GAAG,CAACoD,YAAJ,CAAiBhC,SARvB,yBASjBV,IATiB,eASjBA,IATiB,CAYnB,IAAI2C,QAAQ,GAAG,KAAf,CACA,IAAIC,UAAU,GAAG,KAAjB,CAEA,IAAM7C,EAAE,GAAG,KAAKF,KAAL,EAAX,CACA,IAAI,OAAOE,EAAP,KAAc,QAAlB,EAA4B,CAC1B4C,QAAQ,GAAG,KAAKpD,OAAL,CAAaqC,SAAb,KAA2B,KAAK/B,KAAL,EAAtC,CACA+C,UAAU,GAAG,KAAKrD,OAAL,CAAasD,QAA1B,CACD,CACD,IAAMC,iBAAiB,GAAGF,UAAU,GAAGG,mBAAH,GAAoBC,qBAAxD,CAEA,oBACE,6BAAC,4BAAD,EAAmB,KAAKlD,KAAxB,eACE,6BAAC,SAAD,IACE,SAAS,EAAE,gCACRmD,YAAOC,IAAP,CAAY,KAAKxD,KAAjB,CADQ,IACkB,IADlB,MAERuD,YAAOJ,QAAP,CAAgB,KAAKnD,KAArB,CAFQ,IAEsB,CAAC,CAACkD,UAFxB,MAGRE,iBAAiB,CAACP,OAAlB,CAA0B,KAAK7C,KAA/B,CAHQ,IAGgC,CAAC,CAAC6C,OAHlC,MAIRO,iBAAiB,CAACR,OAAlB,CAA0B,KAAK5C,KAA/B,CAJQ,IAIgC,CAAC,CAAC4C,OAJlC,MAKRQ,iBAAiB,CAACT,OAAlB,CAA0B,KAAK3C,KAA/B,CALQ,IAKgC,CAAC,CAAC2C,OALlC,MAMRS,iBAAiB,CAACX,KAAlB,CAAwB,KAAKzC,KAA7B,CANQ,IAM8B,CAAC,CAACyC,KANhC,MAORc,YAAOE,MAAP,EAPQ,IAOU,CAAC,CAACR,QAPZ,MAQRG,iBAAiB,CAACK,MAAlB,CAAyB,KAAKzD,KAA9B,CARQ,IAQ+B,CAAC,CAACiD,QARjC,MASRM,YAAO3C,QAAP,CAAgB,KAAKZ,KAArB,CATQ,IASsB,CAAC,CAACY,QATxB,MAURwC,iBAAiB,CAACxC,QAAlB,EAVQ,IAUuB,CAAC,CAACA,QAVzB,OADb,EAaE,MAAM,EAAE,KAAKgB,UAbf,EAcE,OAAO,EAAE,KAAKlB,SAdhB,EAeE,OAAO,EAAE,KAAKY,WAfhB,EAgBE,SAAS,EAAE,KAAKL,aAhBlB,EAiBE,QAAQ,EAAEL,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAjB5B,EAkBE,GAAG,EAAE,kCAAsBmC,SAAtB,IAAmC,IAAnC,GAA0C,KAAKxC,eAlBtD,EAmBE,IAAI,EAAED,IAnBR,iBAqBE,6BAAC,8BAAD,IAAgB,QAAQ,EAAE,KAAKT,OAAL,CAAasC,YAAvC,IAAsDW,QAAtD,CArBF,EAsBG,KAAKhD,KAAL,CAAWC,iBAAX,iBAAgC,sCAAK,SAAS,EAAE,iBAAGwD,YAAOG,KAAP,CAAa,KAAK1D,KAAlB,CAAH,EAA6B2D,mBAAcD,KAA3C,CAAhB,GAtBnC,CADF,CADF,CA4BD,C,cA3HiDE,eAAMb,S,oBAA7CnD,G,CACGiE,mB,GAAsB,K,CADzBjE,G,CAGGkE,W,GAAcC,wB,CAHjBnE,G,CAMGoE,S,GAAY,EACxBlB,QAAQ,EAAEmB,mBAAUC,IADI,EAExBtD,QAAQ,EAAEqD,mBAAUE,IAFI,EAGxB7D,IAAI,EAAE2D,mBAAUG,MAAV,CAAiBC,UAHC,EAIxBvD,OAAO,EAAEmD,mBAAUK,IAJK,EAKxBnD,SAAS,EAAE8C,mBAAUK,IALG,E,CANf1E,G,CAcGoD,Y,GAAe,EAC3BhC,SAAS,EAAE,GADgB,EAE3BV,IAAI,EAAE,EAFqB,E","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';\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 * Cостояние валидации при ошибке.\n */\n error?: boolean;\n\n /**\n * Cостояние валидации при предупреждении.\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 */\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\n public UNSAFE_componentWillMount() {\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 {...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":["Tab","rootNode","props","context","state","focusedByKeyboard","theme","tabComponent","setRootNode","getUnderlyingNode","getId","id","href","refTabComponent","instance","getTabInstance","switchTab","event","disabled","preventDefault","onClick","defaultPrevented","component","handleKeyDown","e","onKeyDown","delta","shiftFocus","handleFocus","requestAnimationFrame","keyListener","isTabPressed","isArrowPressed","setState","handleBlur","TabsContextDefaultValue","componentDidMount","addTab","componentDidUpdate","activeTab","notifyUpdate","componentWillUnmount","removeTab","render","renderMain","getIndicators","error","Boolean","warning","success","primary","children","Component","defaultProps","isActive","isVertical","vertical","orientationStyles","verticalStyles","horizontalStyles","styles","root","active","focus","globalClasses","React","__KONTUR_REACT_UI__","contextType","TabsContext","propTypes","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 * Cостояние валидации при ошибке.\n */\n error?: boolean;\n\n /**\n * Cостояние валидации при предупреждении.\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,16 +1,17 @@
|
|
|
1
|
-
"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Tabs = void 0;var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
|
|
2
|
-
var _reactDom = require("react-dom");
|
|
1
|
+
"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Tabs = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
|
|
3
2
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
4
3
|
|
|
5
4
|
var _ThemeContext = require("../../lib/theming/ThemeContext");
|
|
6
5
|
|
|
7
6
|
var _CommonWrapper = require("../../internal/CommonWrapper");
|
|
8
7
|
var _Emotion = require("../../lib/theming/Emotion");
|
|
8
|
+
var _getRootNode = require("../../lib/rootNode/getRootNode");
|
|
9
|
+
var _rootNode = require("../../lib/rootNode");
|
|
9
10
|
|
|
10
11
|
var _Indicator = require("./Indicator");
|
|
11
12
|
var _Tabs = require("./Tabs.styles");
|
|
12
13
|
var _TabsContext = require("./TabsContext");
|
|
13
|
-
var _Tab = require("./Tab");
|
|
14
|
+
var _Tab = require("./Tab");var _class, _class2, _temp;
|
|
14
15
|
|
|
15
16
|
|
|
16
17
|
|
|
@@ -50,7 +51,8 @@ var _Tab = require("./Tab");
|
|
|
50
51
|
*
|
|
51
52
|
* contains static property `Tab`
|
|
52
53
|
*/var
|
|
53
|
-
|
|
54
|
+
|
|
55
|
+
Tabs = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Tabs, _React$Component);function Tabs() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
|
|
54
56
|
|
|
55
57
|
|
|
56
58
|
|
|
@@ -83,6 +85,7 @@ Tabs = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Ta
|
|
|
83
85
|
|
|
84
86
|
|
|
85
87
|
listeners = [];_this.
|
|
88
|
+
setRootNode = void 0;_this.
|
|
86
89
|
|
|
87
90
|
|
|
88
91
|
|
|
@@ -124,10 +127,7 @@ Tabs = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Ta
|
|
|
124
127
|
var tab = tabs[newIndex];
|
|
125
128
|
|
|
126
129
|
var tabNode = tab.getNode();
|
|
127
|
-
var htmlNode =
|
|
128
|
-
if (tabNode instanceof _react.default.Component) {
|
|
129
|
-
htmlNode = (0, _reactDom.findDOMNode)(tabNode);
|
|
130
|
-
}
|
|
130
|
+
var htmlNode = (0, _getRootNode.getRootNode)(tabNode);
|
|
131
131
|
|
|
132
132
|
if (htmlNode && htmlNode instanceof HTMLElement && typeof htmlNode.focus === 'function') {
|
|
133
133
|
htmlNode.focus();
|
|
@@ -156,4 +156,4 @@ Tabs = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Ta
|
|
|
156
156
|
|
|
157
157
|
removeTab = function (id) {
|
|
158
158
|
_this.tabs = _this.tabs.filter(function (tab) {return tab.id !== id;});
|
|
159
|
-
};return _this;}var _proto = Tabs.prototype;_proto.render = function render() {var _this2 = this;var _this$props2 = this.props,vertical = _this$props2.vertical,value = _this$props2.value,width = _this$props2.width,children = _this$props2.children,indicatorClassName = _this$props2.indicatorClassName;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, _this2.props, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Tabs.styles.root(_this2.theme), vertical && _Tabs.styles.vertical()), style: { width: width } }, /*#__PURE__*/_react.default.createElement(_TabsContext.TabsContext.Provider, { value: { vertical: vertical, activeTab: value, getTab: _this2.getTab, addTab: _this2.addTab, removeTab: _this2.removeTab, notifyUpdate: _this2.notifyUpdate, shiftFocus: _this2.shiftFocus, switchTab: _this2.switchTab } }, children, /*#__PURE__*/_react.default.createElement(_Indicator.Indicator, { className: indicatorClassName, tabUpdates: _this2.tabUpdates, vertical: vertical }))));});};return Tabs;}(_react.default.Component)
|
|
159
|
+
};return _this;}var _proto = Tabs.prototype;_proto.render = function render() {var _this2 = this;var _this$props2 = this.props,vertical = _this$props2.vertical,value = _this$props2.value,width = _this$props2.width,children = _this$props2.children,indicatorClassName = _this$props2.indicatorClassName;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Tabs.styles.root(_this2.theme), vertical && _Tabs.styles.vertical()), style: { width: width } }, /*#__PURE__*/_react.default.createElement(_TabsContext.TabsContext.Provider, { value: { vertical: vertical, activeTab: value, getTab: _this2.getTab, addTab: _this2.addTab, removeTab: _this2.removeTab, notifyUpdate: _this2.notifyUpdate, shiftFocus: _this2.shiftFocus, switchTab: _this2.switchTab } }, children, /*#__PURE__*/_react.default.createElement(_Indicator.Indicator, { className: indicatorClassName, tabUpdates: _this2.tabUpdates, vertical: vertical }))));});};return Tabs;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Tabs', _class2.propTypes = { children: _propTypes.default.node, indicatorClassName: _propTypes.default.string, value: _propTypes.default.string.isRequired, vertical: _propTypes.default.bool, width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]) }, _class2.defaultProps = { vertical: false }, _class2.Tab = _Tab.Tab, _temp)) || _class;exports.Tabs = Tabs;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Tabs.tsx"],"names":["Tabs","theme","tabs","tabUpdates","on","cb","index","listeners","push","splice","shiftFocus","fromTab","delta","findIndex","x","id","newIndex","Math","max","min","length","tab","tabNode","getNode","htmlNode","
|
|
1
|
+
{"version":3,"sources":["Tabs.tsx"],"names":["Tabs","rootNode","theme","tabs","tabUpdates","on","cb","index","listeners","push","splice","setRootNode","shiftFocus","fromTab","delta","findIndex","x","id","newIndex","Math","max","min","length","tab","tabNode","getNode","htmlNode","HTMLElement","focus","notifyUpdate","forEach","switchTab","props","onValueChange","value","getTab","find","addTab","concat","removeTab","filter","render","vertical","width","children","indicatorClassName","styles","root","activeTab","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","node","string","isRequired","bool","oneOfType","number","defaultProps","Tab"],"mappings":"gbAAA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA;AACA;AACA;AACA;AACA,G;;AAEaA,I,OADZC,kB;;;;;;;;;;;;;;;;AAiBSC,IAAAA,K;;AAEAC,IAAAA,I;;;AAGH,M;;AAEGC,IAAAA,U,GAAa;AACnBC,MAAAA,EAAE,EAAE,YAACC,EAAD,EAAoB;AACtB,YAAMC,KAAK,GAAG,MAAKC,SAAL,CAAeC,IAAf,CAAoBH,EAApB,CAAd;AACA,eAAO,YAAM;AACX,gBAAKE,SAAL,CAAeE,MAAf,CAAsBH,KAAtB,EAA6B,CAA7B;AACD,SAFD;AAGD,OANkB,E;;;AASbC,IAAAA,S,GAA+B,E;AAC/BG,IAAAA,W;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCAC,IAAAA,U,GAA+C,UAACC,OAAD,EAAUC,KAAV,EAAoB;AACjEX,MAAAA,IADiE,yBACjEA,IADiE;AAEzE,UAAMI,KAAK,GAAGJ,IAAI,CAACY,SAAL,CAAe,UAACC,CAAD,UAAOA,CAAC,CAACC,EAAF,KAASJ,OAAhB,EAAf,CAAd;AACA,UAAMK,QAAQ,GAAGC,IAAI,CAACC,GAAL,CAAS,CAAT,EAAYD,IAAI,CAACE,GAAL,CAASd,KAAK,GAAGO,KAAjB,EAAwBX,IAAI,CAACmB,MAAL,GAAc,CAAtC,CAAZ,CAAjB;AACA,UAAMC,GAAG,GAAGpB,IAAI,CAACe,QAAD,CAAhB;;AAEA,UAAMM,OAAO,GAAGD,GAAG,CAACE,OAAJ,EAAhB;AACA,UAAMC,QAAQ,GAAG,8BAAYF,OAAZ,CAAjB;;AAEA,UAAIE,QAAQ,IAAIA,QAAQ,YAAYC,WAAhC,IAA+C,OAAOD,QAAQ,CAACE,KAAhB,KAA0B,UAA7E,EAAyF;AACvFF,QAAAA,QAAQ,CAACE,KAAT;AACD;AACF,K;;AAEOC,IAAAA,Y,GAAmD,YAAM;AAC/D,YAAKrB,SAAL,CAAesB,OAAf,CAAuB,UAACxB,EAAD,UAAQA,EAAE,EAAV,EAAvB;AACD,K;;AAEOyB,IAAAA,S,GAA6C,UAACd,EAAD,EAAQ;AAC1B,YAAKe,KADqB,CACnDC,aADmD,eACnDA,aADmD,CACpCC,KADoC,eACpCA,KADoC;AAE3D,UAAIjB,EAAE,KAAKiB,KAAP,IAAgBD,aAApB,EAAmC;AACjCA,QAAAA,aAAa,CAAChB,EAAD,CAAb;AACD;AACF,K;;AAEOkB,IAAAA,M,GAAuC,UAAClB,EAAD,EAAQ;AAC1B,YAAKd,IAAL,CAAUiC,IAAV,CAAe,UAACpB,CAAD,UAAOA,CAAC,CAACC,EAAF,KAASA,EAAhB,EAAf,KAAsC,EADZ,qBAC7CQ,OAD6C,CAC7CA,OAD6C,6BACnC,IADmC;AAErD,aAAOA,OAAO,IAAIA,OAAO,EAAzB;AACD,K;;AAEOY,IAAAA,M,GAAuC,UAACpB,EAAD,EAAKQ,OAAL,EAAiB;AAC9D,YAAKtB,IAAL,GAAY,MAAKA,IAAL,CAAUmC,MAAV,CAAiB,EAAErB,EAAE,EAAFA,EAAF,EAAMQ,OAAO,EAAPA,OAAN,EAAjB,CAAZ;AACD,K;;AAEOc,IAAAA,S,GAA6C,UAACtB,EAAD,EAAQ;AAC3D,YAAKd,IAAL,GAAY,MAAKA,IAAL,CAAUqC,MAAV,CAAiB,UAACjB,GAAD,UAASA,GAAG,CAACN,EAAJ,KAAWA,EAApB,EAAjB,CAAZ;AACD,K,kDArEMwB,M,GAAP,kBAA6B,sCACsC,KAAKT,KAD3C,CACnBU,QADmB,gBACnBA,QADmB,CACTR,KADS,gBACTA,KADS,CACFS,KADE,gBACFA,KADE,CACKC,QADL,gBACKA,QADL,CACeC,kBADf,gBACeA,kBADf,CAG3B,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAAC3C,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,oBACE,6BAAC,4BAAD,2BAAe,WAAW,EAAE,MAAI,CAACS,WAAjC,IAAkD,MAAI,CAACqB,KAAvD,gBACE,sCAAK,SAAS,EAAE,iBAAGc,aAAOC,IAAP,CAAY,MAAI,CAAC7C,KAAjB,CAAH,EAA4BwC,QAAQ,IAAII,aAAOJ,QAAP,EAAxC,CAAhB,EAA4E,KAAK,EAAE,EAAEC,KAAK,EAALA,KAAF,EAAnF,iBACE,6BAAC,wBAAD,CAAa,QAAb,IACE,KAAK,EAAE,EACLD,QAAQ,EAARA,QADK,EAELM,SAAS,EAAEd,KAFN,EAGLC,MAAM,EAAE,MAAI,CAACA,MAHR,EAILE,MAAM,EAAE,MAAI,CAACA,MAJR,EAKLE,SAAS,EAAE,MAAI,CAACA,SALX,EAMLV,YAAY,EAAE,MAAI,CAACA,YANd,EAOLjB,UAAU,EAAE,MAAI,CAACA,UAPZ,EAQLmB,SAAS,EAAE,MAAI,CAACA,SARX,EADT,IAYGa,QAZH,eAaE,6BAAC,oBAAD,IAAW,SAAS,EAAEC,kBAAtB,EAA0C,UAAU,EAAE,MAAI,CAACzC,UAA3D,EAAuE,QAAQ,EAAEsC,QAAjF,GAbF,CADF,CADF,CADF,CAqBD,CAxBH,CADF,CA4BD,C,eAlEkDO,eAAMC,S,WAC3CC,mB,GAAsB,M,UAEtBC,S,GAAY,EACxBR,QAAQ,EAAES,mBAAUC,IADI,EAExBT,kBAAkB,EAAEQ,mBAAUE,MAFN,EAGxBrB,KAAK,EAAEmB,mBAAUE,MAAV,CAAiBC,UAHA,EAIxBd,QAAQ,EAAEW,mBAAUI,IAJI,EAKxBd,KAAK,EAAEU,mBAAUK,SAAV,CAAoB,CAACL,mBAAUE,MAAX,EAAmBF,mBAAUM,MAA7B,CAApB,CALiB,E,UAOZC,Y,GAAe,EAC3BlB,QAAQ,EAAE,KADiB,E,UAIfmB,G,GAAMA,Q","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\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 { getRootNode } from '../../lib/rootNode/getRootNode';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { Indicator } from './Indicator';\nimport { styles } from './Tabs.styles';\nimport { TabsContext, TabsContextType } from './TabsContext';\nimport { Tab } from './Tab';\n\nexport interface TabsProps<T extends string = string> extends CommonProps {\n /**\n * Tab component should be child of Tabs component\n */\n children?: React.ReactNode;\n\n /**\n * Classname of indicator\n */\n indicatorClassName?: string;\n\n /**\n * Tabs change event\n */\n onValueChange?: (value: T) => void;\n\n /**\n * Active tab identifier\n */\n value: T;\n\n /**\n * Vertical indicator\n * @default false\n */\n vertical: boolean;\n\n /**\n * Width of tabs container\n */\n width?: number | string;\n}\n\n/**\n * Tabs wrapper\n *\n * contains static property `Tab`\n */\n@rootNode\nexport class Tabs<T extends string = string> extends React.Component<TabsProps<T>> {\n public static __KONTUR_REACT_UI__ = 'Tabs';\n\n public static propTypes = {\n children: PropTypes.node,\n indicatorClassName: PropTypes.string,\n value: PropTypes.string.isRequired,\n vertical: PropTypes.bool,\n width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n };\n public static defaultProps = {\n vertical: false,\n };\n\n public static Tab = Tab;\n\n private theme!: Theme;\n\n private tabs: Array<{\n getNode: () => Tab<T> | null;\n id: T;\n }> = [];\n\n private tabUpdates = {\n on: (cb: () => void) => {\n const index = this.listeners.push(cb);\n return () => {\n this.listeners.splice(index, 1);\n };\n },\n };\n\n private listeners: Array<() => void> = [];\n private setRootNode!: TSetRootNode;\n\n public render(): JSX.Element {\n const { vertical, value, width, children, indicatorClassName } = this.props;\n\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div className={cx(styles.root(this.theme), vertical && styles.vertical())} style={{ width }}>\n <TabsContext.Provider\n value={{\n vertical,\n activeTab: value,\n getTab: this.getTab,\n addTab: this.addTab,\n removeTab: this.removeTab,\n notifyUpdate: this.notifyUpdate,\n shiftFocus: this.shiftFocus,\n switchTab: this.switchTab,\n }}\n >\n {children}\n <Indicator className={indicatorClassName} tabUpdates={this.tabUpdates} vertical={vertical} />\n </TabsContext.Provider>\n </div>\n </CommonWrapper>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private shiftFocus: TabsContextType<T>['shiftFocus'] = (fromTab, delta) => {\n const { tabs } = this;\n const index = tabs.findIndex((x) => x.id === fromTab);\n const newIndex = Math.max(0, Math.min(index + delta, tabs.length - 1));\n const tab = tabs[newIndex];\n\n const tabNode = tab.getNode();\n const htmlNode = getRootNode(tabNode);\n\n if (htmlNode && htmlNode instanceof HTMLElement && typeof htmlNode.focus === 'function') {\n htmlNode.focus();\n }\n };\n\n private notifyUpdate: TabsContextType<T>['notifyUpdate'] = () => {\n this.listeners.forEach((cb) => cb());\n };\n\n private switchTab: TabsContextType<T>['switchTab'] = (id) => {\n const { onValueChange, value } = this.props;\n if (id !== value && onValueChange) {\n onValueChange(id);\n }\n };\n\n private getTab: TabsContextType<T>['getTab'] = (id) => {\n const { getNode = null } = this.tabs.find((x) => x.id === id) || {};\n return getNode && getNode();\n };\n\n private addTab: TabsContextType<T>['addTab'] = (id, getNode) => {\n this.tabs = this.tabs.concat({ id, getNode });\n };\n\n private removeTab: TabsContextType<T>['removeTab'] = (id) => {\n this.tabs = this.tabs.filter((tab) => tab.id !== id);\n };\n}\n"]}
|
|
@@ -143,6 +143,7 @@ export declare class Textarea extends React.Component<TextareaProps, TextareaSta
|
|
|
143
143
|
private counter;
|
|
144
144
|
private layoutEvents;
|
|
145
145
|
private textareaObserver;
|
|
146
|
+
private setRootNode;
|
|
146
147
|
private getAutoResizeThrottleWait;
|
|
147
148
|
private isAnimationsDisabled;
|
|
148
149
|
componentDidMount(): void;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");exports.__esModule = true;exports.Textarea = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
|
|
2
2
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
3
3
|
var _lodash = _interopRequireDefault(require("lodash.throttle"));
|
|
4
4
|
var _raf = _interopRequireDefault(require("raf"));
|
|
@@ -15,10 +15,11 @@ var _client = require("../../lib/client");
|
|
|
15
15
|
var _CommonWrapper = require("../../internal/CommonWrapper");
|
|
16
16
|
var _currentEnvironment = require("../../lib/currentEnvironment");
|
|
17
17
|
var _Emotion = require("../../lib/theming/Emotion");
|
|
18
|
+
var _rootNode = require("../../lib/rootNode");
|
|
18
19
|
|
|
19
20
|
var _TextareaHelpers = require("./TextareaHelpers");
|
|
20
21
|
var _Textarea = require("./Textarea.styles");
|
|
21
|
-
var _TextareaCounter = require("./TextareaCounter");
|
|
22
|
+
var _TextareaCounter = require("./TextareaCounter");var _class, _class2, _temp;
|
|
22
23
|
|
|
23
24
|
var DEFAULT_WIDTH = 250;
|
|
24
25
|
var AUTORESIZE_THROTTLE_DEFAULT_WAIT = 100;
|
|
@@ -117,7 +118,8 @@ var AUTORESIZE_THROTTLE_DEFAULT_WAIT = 100;
|
|
|
117
118
|
*
|
|
118
119
|
* ** `className` и `style` игнорируются**
|
|
119
120
|
*/var
|
|
120
|
-
|
|
121
|
+
|
|
122
|
+
Textarea = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Textarea, _React$Component);function Textarea() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
|
|
121
123
|
|
|
122
124
|
|
|
123
125
|
|
|
@@ -198,6 +200,11 @@ Textarea = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
|
|
|
198
200
|
counter = void 0;_this.
|
|
199
201
|
layoutEvents = void 0;_this.
|
|
200
202
|
textareaObserver = _client.isBrowser ? new MutationObserver(_this.reflowCounter) : null;_this.
|
|
203
|
+
setRootNode = void 0;_this.
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
|
|
207
|
+
|
|
201
208
|
|
|
202
209
|
|
|
203
210
|
|
|
@@ -530,7 +537,7 @@ Textarea = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
|
|
|
530
537
|
}
|
|
531
538
|
};return _this;}var _proto = Textarea.prototype;_proto.getAutoResizeThrottleWait = function getAutoResizeThrottleWait(props) {if (props === void 0) {props = this.props;} // NOTE: При отключении анимации остается эффект дергания при авто-ресайзе из-за троттлинга расчета высоты
|
|
532
539
|
// Поэтому выставляем таймаут троттла в ноль. Подробности - https://github.com/skbkontur/retail-ui/issues/2120
|
|
533
|
-
return this.isAnimationsDisabled(props) ? 0 : AUTORESIZE_THROTTLE_DEFAULT_WAIT;};_proto.isAnimationsDisabled = function isAnimationsDisabled(
|
|
540
|
+
return this.isAnimationsDisabled(props) ? 0 : AUTORESIZE_THROTTLE_DEFAULT_WAIT;};_proto.isAnimationsDisabled = function isAnimationsDisabled(_temp2) {var _ref2 = _temp2 === void 0 ? this.props : _temp2,disableAnimations = _ref2.disableAnimations,extraRow = _ref2.extraRow;return disableAnimations || !extraRow;};_proto.componentDidMount = function componentDidMount() {if (this.props.autoResize) {this.autoResize();this.layoutEvents = LayoutEvents.addListener(this.autoResize);}if (this.node && this.props.showLengthCounter && this.textareaObserver) {this.textareaObserver.observe(this.node, { attributes: true });}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.layoutEvents) {this.layoutEvents.remove();}if (this.props.showLengthCounter && this.textareaObserver) {this.textareaObserver.disconnect();}this.cancelDelayedSelectAll();};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {if (this.getAutoResizeThrottleWait() !== this.getAutoResizeThrottleWait(prevProps)) {this.autoResize.cancel();this.autoResize = (0, _lodash.default)(this.autoResizeHandler, this.getAutoResizeThrottleWait());}if (this.props.autoResize && (this.props.rows !== prevProps.rows || this.props.maxRows !== prevProps.maxRows || this.props.value !== prevProps.value)) {this.autoResize();}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), _this2.renderMain);});} /**
|
|
534
541
|
* @public
|
|
535
542
|
*/;_proto.focus = function focus() {if (this.node) {this.node.focus();}} /**
|
|
536
543
|
* @public
|
|
@@ -538,4 +545,4 @@ Textarea = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
|
|
|
538
545
|
* @public
|
|
539
546
|
* @param {number} start
|
|
540
547
|
* @param {number} end
|
|
541
|
-
*/;return Textarea;}(_react.default.Component)
|
|
548
|
+
*/;return Textarea;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Textarea', _class2.propTypes = { error: _propTypes.default.bool, warning: _propTypes.default.bool, disabled: _propTypes.default.bool, autoResize: _propTypes.default.bool, extraRow: _propTypes.default.bool, disableAnimations: _propTypes.default.bool, maxRows: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]), resize: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]), width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]), id: _propTypes.default.string, name: _propTypes.default.string, title: _propTypes.default.string, spellCheck: _propTypes.default.bool, role: _propTypes.default.string, maxLength: _propTypes.default.number, tabIndex: _propTypes.default.number, rows: _propTypes.default.number, placeholder: _propTypes.default.string, value: _propTypes.default.string, defaultValue: _propTypes.default.string, onValueChange: _propTypes.default.func, onMouseEnter: _propTypes.default.func, onMouseLeave: _propTypes.default.func, onMouseOver: _propTypes.default.func, onMouseMove: _propTypes.default.func, onMouseOut: _propTypes.default.func, onMouseUp: _propTypes.default.func, onMouseDown: _propTypes.default.func, onClick: _propTypes.default.func, onDoubleClick: _propTypes.default.func, onKeyDown: _propTypes.default.func, onKeyPress: _propTypes.default.func, onKeyUp: _propTypes.default.func, onInput: _propTypes.default.func, onFocus: _propTypes.default.func, onBlur: _propTypes.default.func, onScroll: _propTypes.default.func, onWheel: _propTypes.default.func, onCut: _propTypes.default.func, onPaste: _propTypes.default.func, onCopy: _propTypes.default.func }, _class2.defaultProps = { rows: 3, maxRows: 15, extraRow: true, disableAnimations: _currentEnvironment.isTestEnv }, _temp)) || _class;exports.Textarea = Textarea;
|