@skbkontur/react-ui 5.0.5 → 5.1.0-next.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 +0 -11
- package/cjs/components/Autocomplete/Autocomplete.d.ts +16 -17
- package/cjs/components/Autocomplete/Autocomplete.js +13 -2
- package/cjs/components/Autocomplete/Autocomplete.js.map +1 -1
- package/cjs/components/Autocomplete/Autocomplete.md +9 -7
- package/cjs/components/Autocomplete/__docs__/Autocomplete.mdx +26 -0
- package/cjs/components/Autocomplete/locale/types.js +1 -1
- package/cjs/components/Button/Button.d.ts +20 -62
- package/cjs/components/Button/Button.js +0 -42
- package/cjs/components/Button/Button.js.map +1 -1
- package/cjs/components/Button/Button.md +40 -26
- package/cjs/components/Button/__docs__/Button.mdx +28 -0
- package/cjs/components/Calendar/Calendar.d.ts +22 -45
- package/cjs/components/Calendar/Calendar.js +1 -15
- package/cjs/components/Calendar/Calendar.js.map +1 -1
- package/cjs/components/Calendar/Calendar.md +12 -12
- package/cjs/components/Calendar/CalendarDay.d.ts +7 -0
- package/cjs/components/Calendar/CalendarDay.js +11 -0
- package/cjs/components/Calendar/CalendarDay.js.map +1 -1
- package/cjs/components/Calendar/CalendarDay.md +32 -32
- package/cjs/components/Calendar/__docs__/Calendar.mdx +28 -0
- package/cjs/components/Calendar/__docs__/CalendarDay.mdx +24 -0
- package/cjs/components/Calendar/locale/types.js +1 -1
- package/cjs/components/Center/Center.d.ts +4 -6
- package/cjs/components/Center/Center.js +3 -5
- package/cjs/components/Center/Center.js.map +1 -1
- package/cjs/components/Center/Center.md +1 -1
- package/cjs/components/Center/__docs__/Center.mdx +24 -0
- package/cjs/components/Checkbox/Checkbox.d.ts +20 -28
- package/cjs/components/Checkbox/Checkbox.js +7 -6
- package/cjs/components/Checkbox/Checkbox.js.map +1 -1
- package/cjs/components/Checkbox/Checkbox.md +6 -5
- package/cjs/components/Checkbox/__docs__/Checkbox.mdx +28 -0
- package/cjs/components/ComboBox/ComboBox.d.ts +64 -85
- package/cjs/components/ComboBox/ComboBox.js +11 -27
- package/cjs/components/ComboBox/ComboBox.js.map +1 -1
- package/cjs/components/ComboBox/ComboBox.md +41 -40
- package/cjs/components/ComboBox/__docs__/ComboBox.mdx +28 -0
- package/cjs/components/CurrencyInput/CurrencyHelper.d.ts +4 -0
- package/cjs/components/CurrencyInput/CurrencyHelper.js +7 -0
- package/cjs/components/CurrencyInput/CurrencyHelper.js.map +1 -1
- package/cjs/components/CurrencyInput/CurrencyInput.d.ts +12 -12
- package/cjs/components/CurrencyInput/CurrencyInput.js +8 -2
- package/cjs/components/CurrencyInput/CurrencyInput.js.map +1 -1
- package/cjs/components/CurrencyInput/CurrencyInput.md +3 -1
- package/cjs/components/CurrencyInput/CurrencyInputHelper.d.ts +3 -0
- package/cjs/components/CurrencyInput/CurrencyInputHelper.js +5 -0
- package/cjs/components/CurrencyInput/CurrencyInputHelper.js.map +1 -1
- package/cjs/components/CurrencyInput/__docs__/CurrencyInput.mdx +28 -0
- package/cjs/components/CurrencyLabel/CurrencyLabel.d.ts +8 -5
- package/cjs/components/CurrencyLabel/CurrencyLabel.js +6 -0
- package/cjs/components/CurrencyLabel/CurrencyLabel.js.map +1 -1
- package/cjs/components/CurrencyLabel/CurrencyLabel.md +5 -5
- package/cjs/components/CurrencyLabel/__docs__/CurrencyLabel.mdx +24 -0
- package/cjs/components/DateInput/DateInput.d.ts +19 -27
- package/cjs/components/DateInput/DateInput.js +7 -1
- package/cjs/components/DateInput/DateInput.js.map +1 -1
- package/cjs/components/DateInput/DateInput.md +7 -2
- package/cjs/components/DateInput/__docs__/DateInput.mdx +26 -0
- package/cjs/components/DateInput/helpers/DateInputKeyboardActions.js +1 -1
- package/cjs/components/DateInput/helpers/DateInputKeyboardActions.js.map +1 -1
- package/cjs/components/DatePicker/DatePicker.d.ts +27 -22
- package/cjs/components/DatePicker/DatePicker.js +24 -1
- package/cjs/components/DatePicker/DatePicker.js.map +1 -1
- package/cjs/components/DatePicker/DatePicker.md +2 -2
- package/cjs/components/DatePicker/__docs__/DatePicker.mdx +28 -0
- package/cjs/components/DatePicker/locale/types.js +1 -1
- package/cjs/components/Dropdown/Dropdown.d.ts +25 -30
- package/cjs/components/Dropdown/Dropdown.js +8 -1
- package/cjs/components/Dropdown/Dropdown.js.map +1 -1
- package/cjs/components/Dropdown/Dropdown.md +2 -1
- package/cjs/components/Dropdown/__docs__/Dropdown.mdx +28 -0
- package/cjs/components/DropdownMenu/DropdownMenu.d.ts +1 -1
- package/cjs/components/DropdownMenu/DropdownMenu.js +1 -1
- package/cjs/components/DropdownMenu/DropdownMenu.js.map +1 -1
- package/cjs/components/DropdownMenu/DropdownMenu.md +12 -10
- package/cjs/components/DropdownMenu/__docs__/DropdownMenu.mdx +28 -0
- package/cjs/components/FileUploader/FileUploader.d.ts +16 -20
- package/cjs/components/FileUploader/FileUploader.js +5 -3
- package/cjs/components/FileUploader/FileUploader.js.map +1 -1
- package/cjs/components/FileUploader/FileUploader.md +9 -9
- package/cjs/components/FileUploader/__docs__/FileUploader.mdx +28 -0
- package/cjs/components/FileUploader/locale/types.js +1 -1
- package/cjs/components/FxInput/FxInput.d.ts +15 -9
- package/cjs/components/FxInput/FxInput.js +14 -1
- package/cjs/components/FxInput/FxInput.js.map +1 -1
- package/cjs/components/FxInput/FxInput.md +2 -0
- package/cjs/components/FxInput/__docs__/FxInput.mdx +28 -0
- package/cjs/components/Gapped/Gapped.d.ts +6 -17
- package/cjs/components/Gapped/Gapped.js +1 -8
- package/cjs/components/Gapped/Gapped.js.map +1 -1
- package/cjs/components/Gapped/Gapped.md +3 -2
- package/cjs/components/Gapped/__docs__/Gapped.mdx +24 -0
- package/cjs/components/GlobalLoader/GlobalLoader.d.ts +22 -32
- package/cjs/components/GlobalLoader/GlobalLoader.js +14 -14
- package/cjs/components/GlobalLoader/GlobalLoader.js.map +1 -1
- package/cjs/components/GlobalLoader/GlobalLoader.md +4 -5
- package/cjs/components/GlobalLoader/GlobalLoaderView.d.ts +4 -0
- package/cjs/components/GlobalLoader/GlobalLoaderView.js +7 -0
- package/cjs/components/GlobalLoader/GlobalLoaderView.js.map +1 -1
- package/cjs/components/GlobalLoader/__docs__/GlobalLoader.mdx +28 -0
- package/cjs/components/Group/Group.d.ts +6 -0
- package/cjs/components/Group/Group.js +7 -1
- package/cjs/components/Group/Group.js.map +1 -1
- package/cjs/components/Group/Group.md +1 -0
- package/cjs/components/Group/__docs__/Group.mdx +24 -0
- package/cjs/components/Hint/Hint.d.ts +18 -40
- package/cjs/components/Hint/Hint.js +4 -16
- package/cjs/components/Hint/Hint.js.map +1 -1
- package/cjs/components/Hint/Hint.md +9 -8
- package/cjs/components/Hint/__docs__/Hint.mdx +29 -0
- package/cjs/components/Input/Input.d.ts +46 -68
- package/cjs/components/Input/Input.js +10 -9
- package/cjs/components/Input/Input.js.map +1 -1
- package/cjs/components/Input/Input.md +11 -2
- package/cjs/components/Input/Input.typings.js +1 -1
- package/cjs/components/Input/__docs__/Input.mdx +28 -0
- package/cjs/components/Kebab/Kebab.d.ts +12 -16
- package/cjs/components/Kebab/Kebab.js +4 -2
- package/cjs/components/Kebab/Kebab.js.map +1 -1
- package/cjs/components/Kebab/Kebab.md +9 -9
- package/cjs/components/Kebab/__docs__/Kebab.mdx +28 -0
- package/cjs/components/Link/Link.d.ts +13 -37
- package/cjs/components/Link/Link.js +0 -13
- package/cjs/components/Link/Link.js.map +1 -1
- package/cjs/components/Link/Link.md +12 -11
- package/cjs/components/Link/__docs__/Link.mdx +28 -0
- package/cjs/components/Loader/Loader.d.ts +13 -25
- package/cjs/components/Loader/Loader.js +2 -8
- package/cjs/components/Loader/Loader.js.map +1 -1
- package/cjs/components/Loader/Loader.md +1 -0
- package/cjs/components/Loader/__docs__/Loader.mdx +26 -0
- package/cjs/components/MaskedInput/MaskedInput.d.ts +13 -33
- package/cjs/components/MaskedInput/MaskedInput.js +0 -13
- package/cjs/components/MaskedInput/MaskedInput.js.map +1 -1
- package/cjs/components/MaskedInput/MaskedInput.md +7 -5
- package/cjs/components/MaskedInput/__docs__/MaskedInput.mdx +28 -0
- package/cjs/components/MenuFooter/MenuFooter.d.ts +6 -4
- package/cjs/components/MenuFooter/MenuFooter.js +7 -3
- package/cjs/components/MenuFooter/MenuFooter.js.map +1 -1
- package/cjs/components/MenuFooter/MenuFooter.md +2 -2
- package/cjs/components/MenuFooter/__docs__/MenuFooter.mdx +24 -0
- package/cjs/components/MenuHeader/MenuHeader.d.ts +6 -4
- package/cjs/components/MenuHeader/MenuHeader.js +7 -3
- package/cjs/components/MenuHeader/MenuHeader.js.map +1 -1
- package/cjs/components/MenuHeader/MenuHeader.md +2 -2
- package/cjs/components/MenuHeader/__docs__/MenuHeader.mdx +24 -0
- package/cjs/components/MenuItem/MenuItem.d.ts +22 -55
- package/cjs/components/MenuItem/MenuItem.js +1 -18
- package/cjs/components/MenuItem/MenuItem.js.map +1 -1
- package/cjs/components/MenuItem/MenuItem.md +34 -30
- package/cjs/components/MenuItem/__docs__/MenuItem.mdx +24 -0
- package/cjs/components/MenuSeparator/MenuSeparator.d.ts +2 -2
- package/cjs/components/MenuSeparator/MenuSeparator.js +3 -2
- package/cjs/components/MenuSeparator/MenuSeparator.js.map +1 -1
- package/cjs/components/MenuSeparator/MenuSeparator.md +1 -1
- package/cjs/components/MenuSeparator/__docs__/MenuSeparator.mdx +24 -0
- package/cjs/components/MiniModal/MiniModal.d.ts +6 -0
- package/cjs/components/MiniModal/MiniModal.js +6 -0
- package/cjs/components/MiniModal/MiniModal.js.map +1 -1
- package/cjs/components/MiniModal/MiniModal.md +1 -3
- package/cjs/components/MiniModal/MiniModalFooter.d.ts +2 -7
- package/cjs/components/MiniModal/MiniModalFooter.js +0 -5
- package/cjs/components/MiniModal/MiniModalFooter.js.map +1 -1
- package/cjs/components/MiniModal/MiniModalHeader.d.ts +2 -5
- package/cjs/components/MiniModal/MiniModalHeader.js +0 -3
- package/cjs/components/MiniModal/MiniModalHeader.js.map +1 -1
- package/cjs/components/MiniModal/__docs__/MiniModal.mdx +28 -0
- package/cjs/components/MiniModal/__docs__/MiniModalBody.mdx +15 -0
- package/cjs/components/MiniModal/__docs__/MiniModalFooter.mdx +15 -0
- package/cjs/components/MiniModal/__docs__/MiniModalHeader.mdx +15 -0
- package/cjs/components/MiniModal/__docs__/MiniModalIndent.mdx +11 -0
- package/cjs/components/Modal/Modal.d.ts +12 -33
- package/cjs/components/Modal/Modal.js +4 -24
- package/cjs/components/Modal/Modal.js.map +1 -1
- package/cjs/components/Modal/Modal.md +3 -1
- package/cjs/components/Modal/ModalBody.d.ts +2 -4
- package/cjs/components/Modal/ModalBody.js +1 -3
- package/cjs/components/Modal/ModalBody.js.map +1 -1
- package/cjs/components/Modal/ModalContext.d.ts +2 -0
- package/cjs/components/Modal/ModalContext.js +3 -0
- package/cjs/components/Modal/ModalContext.js.map +1 -1
- package/cjs/components/Modal/ModalFooter.d.ts +5 -15
- package/cjs/components/Modal/ModalFooter.js +0 -7
- package/cjs/components/Modal/ModalFooter.js.map +1 -1
- package/cjs/components/Modal/ModalHeader.d.ts +3 -1
- package/cjs/components/Modal/ModalHeader.js +4 -1
- package/cjs/components/Modal/ModalHeader.js.map +1 -1
- package/cjs/components/Modal/ModalSeparator.d.ts +1 -0
- package/cjs/components/Modal/ModalSeparator.js +1 -0
- package/cjs/components/Modal/ModalSeparator.js.map +1 -1
- package/cjs/components/Modal/__docs__/Modal.mdx +28 -0
- package/cjs/components/Modal/__docs__/ModalBody.mdx +15 -0
- package/cjs/components/Modal/__docs__/ModalFooter.mdx +15 -0
- package/cjs/components/Modal/__docs__/ModalHeader.mdx +15 -0
- package/cjs/components/Modal/__docs__/ModalSeparator.mdx +15 -0
- package/cjs/components/Modal/locale/types.js +1 -1
- package/cjs/components/Paging/Paging.d.ts +20 -15
- package/cjs/components/Paging/Paging.js +17 -1
- package/cjs/components/Paging/Paging.js.map +1 -1
- package/cjs/components/Paging/Paging.md +3 -2
- package/cjs/components/Paging/PagingDefaultComponent.d.ts +2 -0
- package/cjs/components/Paging/PagingDefaultComponent.js +3 -0
- package/cjs/components/Paging/PagingDefaultComponent.js.map +1 -1
- package/cjs/components/Paging/__creevey__/Paging.creevey.js +2 -1
- package/cjs/components/Paging/__creevey__/Paging.creevey.js.map +1 -1
- package/cjs/components/Paging/__docs__/Paging.mdx +28 -0
- package/cjs/components/Paging/locale/types.js +1 -1
- package/cjs/components/PasswordInput/PasswordInput.d.ts +4 -1
- package/cjs/components/PasswordInput/PasswordInput.js +4 -1
- package/cjs/components/PasswordInput/PasswordInput.js.map +1 -1
- package/cjs/components/PasswordInput/PasswordInput.md +3 -2
- package/cjs/components/PasswordInput/__docs__/PasswordInput.mdx +28 -0
- package/cjs/components/PasswordInput/locale/types.js +1 -1
- package/cjs/components/Radio/Radio.d.ts +13 -28
- package/cjs/components/Radio/Radio.js +1 -8
- package/cjs/components/Radio/Radio.js.map +1 -1
- package/cjs/components/Radio/Radio.md +3 -2
- package/cjs/components/Radio/__docs__/Radio.mdx +28 -0
- package/cjs/components/RadioGroup/RadioGroup.d.ts +28 -54
- package/cjs/components/RadioGroup/RadioGroup.js +4 -15
- package/cjs/components/RadioGroup/RadioGroup.js.map +1 -1
- package/cjs/components/RadioGroup/RadioGroup.md +1 -0
- package/cjs/components/RadioGroup/__docs__/RadioGroup.mdx +28 -0
- package/cjs/components/ResponsiveLayout/ResponsiveLayout.d.ts +4 -1
- package/cjs/components/ResponsiveLayout/ResponsiveLayout.js +6 -2
- package/cjs/components/ResponsiveLayout/ResponsiveLayout.js.map +1 -1
- package/cjs/components/ResponsiveLayout/ResponsiveLayout.md +4 -3
- package/cjs/components/ResponsiveLayout/__docs__/ResponsiveLayout.mdx +97 -0
- package/cjs/components/ResponsiveLayout/types.js +1 -1
- package/cjs/components/ScrollContainer/ScrollBar.d.ts +7 -0
- package/cjs/components/ScrollContainer/ScrollBar.js +13 -0
- package/cjs/components/ScrollContainer/ScrollBar.js.map +1 -1
- package/cjs/components/ScrollContainer/ScrollContainer.d.ts +23 -29
- package/cjs/components/ScrollContainer/ScrollContainer.js +8 -1
- package/cjs/components/ScrollContainer/ScrollContainer.js.map +1 -1
- package/cjs/components/ScrollContainer/ScrollContainer.md +5 -3
- package/cjs/components/ScrollContainer/__docs__/ScrollContainer.mdx +24 -0
- package/cjs/components/Select/Item.d.ts +2 -0
- package/cjs/components/Select/Item.js +3 -0
- package/cjs/components/Select/Item.js.map +1 -1
- package/cjs/components/Select/Select.d.ts +54 -38
- package/cjs/components/Select/Select.js +57 -1
- package/cjs/components/Select/Select.js.map +1 -1
- package/cjs/components/Select/Select.md +7 -6
- package/cjs/components/Select/__docs__/Select.mdx +28 -0
- package/cjs/components/Select/locale/types.js +1 -1
- package/cjs/components/SidePage/SidePage.d.ts +16 -38
- package/cjs/components/SidePage/SidePage.js +5 -27
- package/cjs/components/SidePage/SidePage.js.map +1 -1
- package/cjs/components/SidePage/SidePage.md +2 -1
- package/cjs/components/SidePage/SidePageFooter.d.ts +4 -9
- package/cjs/components/SidePage/SidePageFooter.js +0 -2
- package/cjs/components/SidePage/SidePageFooter.js.map +1 -1
- package/cjs/components/SidePage/SidePageHeader.d.ts +2 -0
- package/cjs/components/SidePage/SidePageHeader.js +3 -0
- package/cjs/components/SidePage/SidePageHeader.js.map +1 -1
- package/cjs/components/SidePage/__docs__/SidePage.mdx +28 -0
- package/cjs/components/SidePage/__docs__/SidePageBody.mdx +15 -0
- package/cjs/components/SidePage/__docs__/SidePageContainer.mdx +15 -0
- package/cjs/components/SidePage/__docs__/SidePageFooter.mdx +15 -0
- package/cjs/components/SidePage/__docs__/SidePageHeader.mdx +15 -0
- package/cjs/components/SidePage/locale/types.js +1 -1
- package/cjs/components/SingleToast/SingleToast.d.ts +5 -1
- package/cjs/components/SingleToast/SingleToast.js +5 -1
- package/cjs/components/SingleToast/SingleToast.js.map +1 -1
- package/cjs/components/SingleToast/SingleToast.md +2 -1
- package/cjs/components/SingleToast/__docs__/SingleToast.mdx +28 -0
- package/cjs/components/Spinner/Spinner.d.ts +15 -20
- package/cjs/components/Spinner/Spinner.js +6 -7
- package/cjs/components/Spinner/Spinner.js.map +1 -1
- package/cjs/components/Spinner/Spinner.md +2 -1
- package/cjs/components/Spinner/__docs__/Spinner.mdx +28 -0
- package/cjs/components/Sticky/Sticky.d.ts +9 -4
- package/cjs/components/Sticky/Sticky.js +9 -1
- package/cjs/components/Sticky/Sticky.js.map +1 -1
- package/cjs/components/Sticky/Sticky.md +1 -0
- package/cjs/components/Sticky/__docs__/Sticky.mdx +24 -0
- package/cjs/components/Switcher/Switcher.d.ts +18 -7
- package/cjs/components/Switcher/Switcher.js +12 -1
- package/cjs/components/Switcher/Switcher.js.map +1 -1
- package/cjs/components/Switcher/Switcher.md +6 -2
- package/cjs/components/Switcher/__docs__/Switcher.mdx +28 -0
- package/cjs/components/Tabs/Tab.d.ts +12 -31
- package/cjs/components/Tabs/Tab.js +1 -20
- package/cjs/components/Tabs/Tab.js.map +1 -1
- package/cjs/components/Tabs/Tab.md +2 -0
- package/cjs/components/Tabs/Tabs.d.ts +14 -25
- package/cjs/components/Tabs/Tabs.js +6 -17
- package/cjs/components/Tabs/Tabs.js.map +1 -1
- package/cjs/components/Tabs/Tabs.md +3 -2
- package/cjs/components/Tabs/__docs__/Tab.mdx +28 -0
- package/cjs/components/Tabs/__docs__/Tabs.mdx +28 -0
- package/cjs/components/Textarea/Textarea.d.ts +26 -52
- package/cjs/components/Textarea/Textarea.js +3 -23
- package/cjs/components/Textarea/Textarea.js.map +1 -1
- package/cjs/components/Textarea/Textarea.md +4 -2
- package/cjs/components/Textarea/__docs__/Textarea.mdx +28 -0
- package/cjs/components/Toast/Toast.d.ts +6 -7
- package/cjs/components/Toast/Toast.js +4 -3
- package/cjs/components/Toast/Toast.js.map +1 -1
- package/cjs/components/Toast/Toast.md +4 -4
- package/cjs/components/Toast/ToastView.d.ts +2 -6
- package/cjs/components/Toast/ToastView.js +0 -4
- package/cjs/components/Toast/ToastView.js.map +1 -1
- package/cjs/components/Toast/__docs__/Toast.mdx +28 -0
- package/cjs/components/Toast/locale/types.js +1 -1
- package/cjs/components/Toggle/Toggle.d.ts +25 -48
- package/cjs/components/Toggle/Toggle.js +4 -12
- package/cjs/components/Toggle/Toggle.js.map +1 -1
- package/cjs/components/Toggle/Toggle.md +9 -9
- package/cjs/components/Toggle/__docs__/Toggle.mdx +28 -0
- package/cjs/components/Token/Token.d.ts +17 -9
- package/cjs/components/Token/Token.js +9 -1
- package/cjs/components/Token/Token.js.map +1 -1
- package/cjs/components/Token/Token.md +86 -3
- package/cjs/components/Token/TokenView.d.ts +3 -0
- package/cjs/components/Token/TokenView.js +3 -0
- package/cjs/components/Token/TokenView.js.map +1 -1
- package/cjs/components/Token/__docs__/Token.mdx +28 -0
- package/cjs/components/Token/locale/types.js +1 -1
- package/cjs/components/TokenInput/TextWidthHelper.d.ts +3 -0
- package/cjs/components/TokenInput/TextWidthHelper.js +5 -0
- package/cjs/components/TokenInput/TextWidthHelper.js.map +1 -1
- package/cjs/components/TokenInput/TokenInput.d.ts +54 -97
- package/cjs/components/TokenInput/TokenInput.js +7 -18
- package/cjs/components/TokenInput/TokenInput.js.map +1 -1
- package/cjs/components/TokenInput/TokenInput.md +12 -10
- package/cjs/components/TokenInput/TokenInputMenu.d.ts +5 -5
- package/cjs/components/TokenInput/TokenInputMenu.js.map +1 -1
- package/cjs/components/TokenInput/__docs__/TokenInput.mdx +28 -0
- package/cjs/components/TokenInput/locale/types.js +1 -1
- package/cjs/components/Tooltip/Tooltip.d.ts +28 -68
- package/cjs/components/Tooltip/Tooltip.js +9 -63
- package/cjs/components/Tooltip/Tooltip.js.map +1 -1
- package/cjs/components/Tooltip/Tooltip.md +5 -0
- package/cjs/components/Tooltip/__docs__/Tooltip.mdx +28 -0
- package/cjs/components/TooltipMenu/TooltipMenu.d.ts +13 -28
- package/cjs/components/TooltipMenu/TooltipMenu.js +1 -16
- package/cjs/components/TooltipMenu/TooltipMenu.js.map +1 -1
- package/cjs/components/TooltipMenu/TooltipMenu.md +13 -10
- package/cjs/components/TooltipMenu/__docs__/TooltipMenu.mdx +24 -0
- package/cjs/index.d.ts +1 -0
- package/cjs/index.js +1 -0
- package/cjs/index.js.map +1 -1
- package/cjs/internal/CommonWrapper/types.js +1 -1
- package/cjs/internal/CustomComboBox/CustomComboBoxTypes.js +1 -1
- package/cjs/internal/CustomComboBox/CustomComboBoxTypes.js.map +1 -1
- package/cjs/internal/CustomComboBox/locale/types.js +1 -1
- package/cjs/internal/DateSelect/locale/types.js +1 -1
- package/cjs/internal/FileUploaderControl/fileUtils.js +1 -1
- package/cjs/internal/FileUploaderControl/fileUtils.js.map +1 -1
- package/cjs/internal/Popup/types.js +1 -1
- package/cjs/internal/RenderContainer/RenderContainerTypes.js +1 -1
- package/cjs/internal/ThemePlayground/Playground.styles.js +2 -1
- package/cjs/internal/ThemePlayground/Playground.styles.js.map +1 -1
- package/cjs/internal/ThemePlayground/constants.js +1 -1
- package/cjs/internal/ThemePlayground/constants.js.map +1 -1
- package/cjs/internal/ThemeShowcase/VariablesCollector.js +0 -2
- package/cjs/internal/ThemeShowcase/VariablesCollector.js.map +1 -1
- package/cjs/internal/themes/BasicLightTheme.d.ts +3 -0
- package/cjs/internal/themes/BasicLightTheme.js +4 -1
- package/cjs/internal/themes/BasicLightTheme.js.map +1 -1
- package/cjs/lib/date/types.js +6 -6
- package/cjs/lib/date/types.js.map +1 -1
- package/cjs/lib/events/MouseDrag.js +1 -1
- package/cjs/lib/events/MouseDrag.js.map +1 -1
- package/cjs/lib/events/keyboard/KeyboardEventCodes.js +1 -1
- package/cjs/lib/events/keyboard/KeyboardEventCodes.js.map +1 -1
- package/cjs/lib/locale/types.js +1 -1
- package/cjs/lib/locale/types.js.map +1 -1
- package/cjs/lib/theming/Theme.js +1 -1
- package/cjs/lib/types/button-link.js +1 -1
- package/cjs/lib/types/polymorphic-component.js +1 -1
- package/cjs/lib/types/props.js +1 -1
- package/components/Autocomplete/Autocomplete/Autocomplete.js +3 -2
- package/components/Autocomplete/Autocomplete/Autocomplete.js.map +1 -1
- package/components/Autocomplete/Autocomplete.d.ts +16 -17
- package/components/Autocomplete/Autocomplete.md +9 -7
- package/components/Autocomplete/__docs__/Autocomplete.mdx +26 -0
- package/components/Autocomplete/locale/types/types.js +0 -1
- package/components/Button/Button/Button.js.map +1 -1
- package/components/Button/Button.d.ts +20 -62
- package/components/Button/Button.md +40 -26
- package/components/Button/__docs__/Button.mdx +28 -0
- package/components/Calendar/Calendar/Calendar.js +1 -1
- package/components/Calendar/Calendar/Calendar.js.map +1 -1
- package/components/Calendar/Calendar.d.ts +22 -45
- package/components/Calendar/Calendar.md +12 -12
- package/components/Calendar/CalendarDay/CalendarDay.js +2 -0
- package/components/Calendar/CalendarDay/CalendarDay.js.map +1 -1
- package/components/Calendar/CalendarDay.d.ts +7 -0
- package/components/Calendar/CalendarDay.md +32 -32
- package/components/Calendar/__docs__/Calendar.mdx +28 -0
- package/components/Calendar/__docs__/CalendarDay.mdx +24 -0
- package/components/Calendar/locale/types/types.js +0 -1
- package/components/Center/Center/Center.js +3 -1
- package/components/Center/Center/Center.js.map +1 -1
- package/components/Center/Center.d.ts +4 -6
- package/components/Center/Center.md +1 -1
- package/components/Center/__docs__/Center.mdx +24 -0
- package/components/Checkbox/Checkbox/Checkbox.js +7 -0
- package/components/Checkbox/Checkbox/Checkbox.js.map +1 -1
- package/components/Checkbox/Checkbox.d.ts +20 -28
- package/components/Checkbox/Checkbox.md +6 -5
- package/components/Checkbox/__docs__/Checkbox.mdx +28 -0
- package/components/ComboBox/ComboBox/ComboBox.js +11 -0
- package/components/ComboBox/ComboBox/ComboBox.js.map +1 -1
- package/components/ComboBox/ComboBox.d.ts +64 -85
- package/components/ComboBox/ComboBox.md +41 -40
- package/components/ComboBox/__docs__/ComboBox.mdx +28 -0
- package/components/CurrencyInput/CurrencyHelper/CurrencyHelper.js.map +1 -1
- package/components/CurrencyInput/CurrencyHelper.d.ts +4 -0
- package/components/CurrencyInput/CurrencyInput/CurrencyInput.js +5 -2
- package/components/CurrencyInput/CurrencyInput/CurrencyInput.js.map +1 -1
- package/components/CurrencyInput/CurrencyInput.d.ts +12 -12
- package/components/CurrencyInput/CurrencyInput.md +3 -1
- package/components/CurrencyInput/CurrencyInputHelper/CurrencyInputHelper.js.map +1 -1
- package/components/CurrencyInput/CurrencyInputHelper.d.ts +3 -0
- package/components/CurrencyInput/__docs__/CurrencyInput.mdx +28 -0
- package/components/CurrencyLabel/CurrencyLabel/CurrencyLabel.js +4 -0
- package/components/CurrencyLabel/CurrencyLabel/CurrencyLabel.js.map +1 -1
- package/components/CurrencyLabel/CurrencyLabel.d.ts +8 -5
- package/components/CurrencyLabel/CurrencyLabel.md +5 -5
- package/components/CurrencyLabel/__docs__/CurrencyLabel.mdx +24 -0
- package/components/DateInput/DateInput/DateInput.js +4 -0
- package/components/DateInput/DateInput/DateInput.js.map +1 -1
- package/components/DateInput/DateInput.d.ts +19 -27
- package/components/DateInput/DateInput.md +7 -2
- package/components/DateInput/__docs__/DateInput.mdx +26 -0
- package/components/DateInput/helpers/DateInputKeyboardActions/DateInputKeyboardActions.js +3 -3
- package/components/DateInput/helpers/DateInputKeyboardActions/DateInputKeyboardActions.js.map +1 -1
- package/components/DatePicker/DatePicker/DatePicker.js +8 -0
- package/components/DatePicker/DatePicker/DatePicker.js.map +1 -1
- package/components/DatePicker/DatePicker.d.ts +27 -22
- package/components/DatePicker/DatePicker.md +2 -2
- package/components/DatePicker/__docs__/DatePicker.mdx +28 -0
- package/components/DatePicker/locale/types/types.js +0 -1
- package/components/Dropdown/Dropdown/Dropdown.js +7 -1
- package/components/Dropdown/Dropdown/Dropdown.js.map +1 -1
- package/components/Dropdown/Dropdown.d.ts +25 -30
- package/components/Dropdown/Dropdown.md +2 -1
- package/components/Dropdown/__docs__/Dropdown.mdx +28 -0
- package/components/DropdownMenu/DropdownMenu/DropdownMenu.js +1 -1
- package/components/DropdownMenu/DropdownMenu/DropdownMenu.js.map +1 -1
- package/components/DropdownMenu/DropdownMenu.d.ts +1 -1
- package/components/DropdownMenu/DropdownMenu.md +12 -10
- package/components/DropdownMenu/__docs__/DropdownMenu.mdx +28 -0
- package/components/FileUploader/FileUploader/FileUploader.js +6 -0
- package/components/FileUploader/FileUploader/FileUploader.js.map +1 -1
- package/components/FileUploader/FileUploader.d.ts +16 -20
- package/components/FileUploader/FileUploader.md +9 -9
- package/components/FileUploader/__docs__/FileUploader.mdx +28 -0
- package/components/FileUploader/locale/types/types.js +0 -1
- package/components/FxInput/FxInput/FxInput.js +7 -1
- package/components/FxInput/FxInput/FxInput.js.map +1 -1
- package/components/FxInput/FxInput.d.ts +15 -9
- package/components/FxInput/FxInput.md +2 -0
- package/components/FxInput/__docs__/FxInput.mdx +28 -0
- package/components/Gapped/Gapped/Gapped.js +1 -1
- package/components/Gapped/Gapped/Gapped.js.map +1 -1
- package/components/Gapped/Gapped.d.ts +6 -17
- package/components/Gapped/Gapped.md +3 -2
- package/components/Gapped/__docs__/Gapped.mdx +24 -0
- package/components/GlobalLoader/GlobalLoader/GlobalLoader.js +13 -0
- package/components/GlobalLoader/GlobalLoader/GlobalLoader.js.map +1 -1
- package/components/GlobalLoader/GlobalLoader.d.ts +22 -32
- package/components/GlobalLoader/GlobalLoader.md +4 -5
- package/components/GlobalLoader/GlobalLoaderView/GlobalLoaderView.js.map +1 -1
- package/components/GlobalLoader/GlobalLoaderView.d.ts +4 -0
- package/components/GlobalLoader/__docs__/GlobalLoader.mdx +28 -0
- package/components/Group/Group/Group.js +6 -0
- package/components/Group/Group/Group.js.map +1 -1
- package/components/Group/Group.d.ts +6 -0
- package/components/Group/Group.md +1 -0
- package/components/Group/__docs__/Group.mdx +24 -0
- package/components/Hint/Hint/Hint.js +4 -1
- package/components/Hint/Hint/Hint.js.map +1 -1
- package/components/Hint/Hint.d.ts +18 -40
- package/components/Hint/Hint.md +9 -8
- package/components/Hint/__docs__/Hint.mdx +29 -0
- package/components/Input/Input/Input.js +10 -1
- package/components/Input/Input/Input.js.map +1 -1
- package/components/Input/Input.d.ts +46 -68
- package/components/Input/Input.md +11 -2
- package/components/Input/Input.typings/Input.typings.js +0 -1
- package/components/Input/__docs__/Input.mdx +28 -0
- package/components/Kebab/Kebab/Kebab.js +4 -0
- package/components/Kebab/Kebab/Kebab.js.map +1 -1
- package/components/Kebab/Kebab.d.ts +12 -16
- package/components/Kebab/Kebab.md +9 -9
- package/components/Kebab/__docs__/Kebab.mdx +28 -0
- package/components/Link/Link/Link.js.map +1 -1
- package/components/Link/Link.d.ts +13 -37
- package/components/Link/Link.md +12 -11
- package/components/Link/__docs__/Link.mdx +28 -0
- package/components/Loader/Loader/Loader.js +2 -2
- package/components/Loader/Loader/Loader.js.map +1 -1
- package/components/Loader/Loader.d.ts +13 -25
- package/components/Loader/Loader.md +1 -0
- package/components/Loader/__docs__/Loader.mdx +26 -0
- package/components/MaskedInput/MaskedInput/MaskedInput.js.map +1 -1
- package/components/MaskedInput/MaskedInput.d.ts +13 -33
- package/components/MaskedInput/MaskedInput.md +7 -5
- package/components/MaskedInput/__docs__/MaskedInput.mdx +28 -0
- package/components/MenuFooter/MenuFooter/MenuFooter.js +3 -3
- package/components/MenuFooter/MenuFooter/MenuFooter.js.map +1 -1
- package/components/MenuFooter/MenuFooter.d.ts +6 -4
- package/components/MenuFooter/MenuFooter.md +2 -2
- package/components/MenuFooter/__docs__/MenuFooter.mdx +24 -0
- package/components/MenuHeader/MenuHeader/MenuHeader.js +3 -3
- package/components/MenuHeader/MenuHeader/MenuHeader.js.map +1 -1
- package/components/MenuHeader/MenuHeader.d.ts +6 -4
- package/components/MenuHeader/MenuHeader.md +2 -2
- package/components/MenuHeader/__docs__/MenuHeader.mdx +24 -0
- package/components/MenuItem/MenuItem/MenuItem.js +1 -2
- package/components/MenuItem/MenuItem/MenuItem.js.map +1 -1
- package/components/MenuItem/MenuItem.d.ts +22 -55
- package/components/MenuItem/MenuItem.md +34 -30
- package/components/MenuItem/__docs__/MenuItem.mdx +24 -0
- package/components/MenuSeparator/MenuSeparator/MenuSeparator.js +3 -2
- package/components/MenuSeparator/MenuSeparator/MenuSeparator.js.map +1 -1
- package/components/MenuSeparator/MenuSeparator.d.ts +2 -2
- package/components/MenuSeparator/MenuSeparator.md +1 -1
- package/components/MenuSeparator/__docs__/MenuSeparator.mdx +24 -0
- package/components/MiniModal/MiniModal/MiniModal.js +7 -0
- package/components/MiniModal/MiniModal/MiniModal.js.map +1 -1
- package/components/MiniModal/MiniModal.d.ts +6 -0
- package/components/MiniModal/MiniModal.md +1 -3
- package/components/MiniModal/MiniModalFooter/MiniModalFooter.js.map +1 -1
- package/components/MiniModal/MiniModalFooter.d.ts +2 -7
- package/components/MiniModal/MiniModalHeader/MiniModalHeader.js.map +1 -1
- package/components/MiniModal/MiniModalHeader.d.ts +2 -5
- package/components/MiniModal/__docs__/MiniModal.mdx +28 -0
- package/components/MiniModal/__docs__/MiniModalBody.mdx +15 -0
- package/components/MiniModal/__docs__/MiniModalFooter.mdx +15 -0
- package/components/MiniModal/__docs__/MiniModalHeader.mdx +15 -0
- package/components/MiniModal/__docs__/MiniModalIndent.mdx +11 -0
- package/components/Modal/Modal/Modal.js +4 -9
- package/components/Modal/Modal/Modal.js.map +1 -1
- package/components/Modal/Modal.d.ts +12 -33
- package/components/Modal/Modal.md +3 -1
- package/components/Modal/ModalBody/ModalBody.js +1 -1
- package/components/Modal/ModalBody/ModalBody.js.map +1 -1
- package/components/Modal/ModalBody.d.ts +2 -4
- package/components/Modal/ModalContext/ModalContext.js.map +1 -1
- package/components/Modal/ModalContext.d.ts +2 -0
- package/components/Modal/ModalFooter/ModalFooter.js.map +1 -1
- package/components/Modal/ModalFooter.d.ts +5 -15
- package/components/Modal/ModalHeader/ModalHeader.js +1 -1
- package/components/Modal/ModalHeader/ModalHeader.js.map +1 -1
- package/components/Modal/ModalHeader.d.ts +3 -1
- package/components/Modal/ModalSeparator/ModalSeparator.js.map +1 -1
- package/components/Modal/ModalSeparator.d.ts +1 -0
- package/components/Modal/__docs__/Modal.mdx +28 -0
- package/components/Modal/__docs__/ModalBody.mdx +15 -0
- package/components/Modal/__docs__/ModalFooter.mdx +15 -0
- package/components/Modal/__docs__/ModalHeader.mdx +15 -0
- package/components/Modal/__docs__/ModalSeparator.mdx +15 -0
- package/components/Modal/locale/types/types.js +0 -1
- package/components/Paging/Paging/Paging.js +4 -0
- package/components/Paging/Paging/Paging.js.map +1 -1
- package/components/Paging/Paging.d.ts +20 -15
- package/components/Paging/Paging.md +3 -2
- package/components/Paging/PagingDefaultComponent/PagingDefaultComponent.js.map +1 -1
- package/components/Paging/PagingDefaultComponent.d.ts +2 -0
- package/components/Paging/__creevey__/Paging.creevey/Paging.creevey.js +1 -1
- package/components/Paging/__creevey__/Paging.creevey/Paging.creevey.js.map +1 -1
- package/components/Paging/__docs__/Paging.mdx +28 -0
- package/components/Paging/locale/types/types.js +0 -1
- package/components/PasswordInput/PasswordInput/PasswordInput.js +3 -1
- package/components/PasswordInput/PasswordInput/PasswordInput.js.map +1 -1
- package/components/PasswordInput/PasswordInput.d.ts +4 -1
- package/components/PasswordInput/PasswordInput.md +3 -2
- package/components/PasswordInput/__docs__/PasswordInput.mdx +28 -0
- package/components/PasswordInput/locale/types/types.js +0 -1
- package/components/Radio/Radio/Radio.js +1 -1
- package/components/Radio/Radio/Radio.js.map +1 -1
- package/components/Radio/Radio.d.ts +13 -28
- package/components/Radio/Radio.md +3 -2
- package/components/Radio/__docs__/Radio.mdx +28 -0
- package/components/RadioGroup/RadioGroup/RadioGroup.js +4 -5
- package/components/RadioGroup/RadioGroup/RadioGroup.js.map +1 -1
- package/components/RadioGroup/RadioGroup.d.ts +28 -54
- package/components/RadioGroup/RadioGroup.md +1 -0
- package/components/RadioGroup/__docs__/RadioGroup.mdx +28 -0
- package/components/ResponsiveLayout/ResponsiveLayout/ResponsiveLayout.js +1 -2
- package/components/ResponsiveLayout/ResponsiveLayout/ResponsiveLayout.js.map +1 -1
- package/components/ResponsiveLayout/ResponsiveLayout.d.ts +4 -1
- package/components/ResponsiveLayout/ResponsiveLayout.md +4 -3
- package/components/ResponsiveLayout/__docs__/ResponsiveLayout.mdx +97 -0
- package/components/ResponsiveLayout/types/types.js +0 -1
- package/components/ScrollContainer/ScrollBar/ScrollBar.js.map +1 -1
- package/components/ScrollContainer/ScrollBar.d.ts +7 -0
- package/components/ScrollContainer/ScrollContainer/ScrollContainer.js +4 -0
- package/components/ScrollContainer/ScrollContainer/ScrollContainer.js.map +1 -1
- package/components/ScrollContainer/ScrollContainer.d.ts +23 -29
- package/components/ScrollContainer/ScrollContainer.md +5 -3
- package/components/ScrollContainer/__docs__/ScrollContainer.mdx +24 -0
- package/components/Select/Item/Item.js.map +1 -1
- package/components/Select/Item.d.ts +2 -0
- package/components/Select/Select/Select.js +11 -0
- package/components/Select/Select/Select.js.map +1 -1
- package/components/Select/Select.d.ts +54 -38
- package/components/Select/Select.md +7 -6
- package/components/Select/__docs__/Select.mdx +28 -0
- package/components/Select/locale/types/types.js +0 -1
- package/components/SidePage/SidePage/SidePage.js +5 -5
- package/components/SidePage/SidePage/SidePage.js.map +1 -1
- package/components/SidePage/SidePage.d.ts +16 -38
- package/components/SidePage/SidePage.md +2 -1
- package/components/SidePage/SidePageFooter/SidePageFooter.js.map +1 -1
- package/components/SidePage/SidePageFooter.d.ts +4 -9
- package/components/SidePage/SidePageHeader/SidePageHeader.js.map +1 -1
- package/components/SidePage/SidePageHeader.d.ts +2 -0
- package/components/SidePage/__docs__/SidePage.mdx +28 -0
- package/components/SidePage/__docs__/SidePageBody.mdx +15 -0
- package/components/SidePage/__docs__/SidePageContainer.mdx +15 -0
- package/components/SidePage/__docs__/SidePageFooter.mdx +15 -0
- package/components/SidePage/__docs__/SidePageHeader.mdx +15 -0
- package/components/SidePage/locale/types/types.js +0 -1
- package/components/SingleToast/SingleToast/SingleToast.js +5 -1
- package/components/SingleToast/SingleToast/SingleToast.js.map +1 -1
- package/components/SingleToast/SingleToast.d.ts +5 -1
- package/components/SingleToast/SingleToast.md +2 -1
- package/components/SingleToast/__docs__/SingleToast.mdx +28 -0
- package/components/Spinner/Spinner/Spinner.js +6 -2
- package/components/Spinner/Spinner/Spinner.js.map +1 -1
- package/components/Spinner/Spinner.d.ts +15 -20
- package/components/Spinner/Spinner.md +2 -1
- package/components/Spinner/__docs__/Spinner.mdx +28 -0
- package/components/Sticky/Sticky/Sticky.js +5 -0
- package/components/Sticky/Sticky/Sticky.js.map +1 -1
- package/components/Sticky/Sticky.d.ts +9 -4
- package/components/Sticky/Sticky.md +1 -0
- package/components/Sticky/__docs__/Sticky.mdx +24 -0
- package/components/Switcher/Switcher/Switcher.js +6 -0
- package/components/Switcher/Switcher/Switcher.js.map +1 -1
- package/components/Switcher/Switcher.d.ts +18 -7
- package/components/Switcher/Switcher.md +6 -2
- package/components/Switcher/__docs__/Switcher.mdx +28 -0
- package/components/Tabs/Tab/Tab.js +1 -1
- package/components/Tabs/Tab/Tab.js.map +1 -1
- package/components/Tabs/Tab.d.ts +12 -31
- package/components/Tabs/Tab.md +2 -0
- package/components/Tabs/Tabs/Tabs.js +6 -1
- package/components/Tabs/Tabs/Tabs.js.map +1 -1
- package/components/Tabs/Tabs.d.ts +14 -25
- package/components/Tabs/Tabs.md +3 -2
- package/components/Tabs/__docs__/Tab.mdx +28 -0
- package/components/Tabs/__docs__/Tabs.mdx +28 -0
- package/components/Textarea/Textarea/Textarea.js +3 -4
- package/components/Textarea/Textarea/Textarea.js.map +1 -1
- package/components/Textarea/Textarea.d.ts +26 -52
- package/components/Textarea/Textarea.md +4 -2
- package/components/Textarea/__docs__/Textarea.mdx +28 -0
- package/components/Toast/Toast/Toast.js +3 -3
- package/components/Toast/Toast/Toast.js.map +1 -1
- package/components/Toast/Toast.d.ts +6 -7
- package/components/Toast/Toast.md +4 -4
- package/components/Toast/ToastView/ToastView.js.map +1 -1
- package/components/Toast/ToastView.d.ts +2 -6
- package/components/Toast/__docs__/Toast.mdx +28 -0
- package/components/Toast/locale/types/types.js +0 -1
- package/components/Toggle/Toggle/Toggle.js +4 -1
- package/components/Toggle/Toggle/Toggle.js.map +1 -1
- package/components/Toggle/Toggle.d.ts +25 -48
- package/components/Toggle/Toggle.md +9 -9
- package/components/Toggle/__docs__/Toggle.mdx +28 -0
- package/components/Token/Token/Token.js +6 -0
- package/components/Token/Token/Token.js.map +1 -1
- package/components/Token/Token.d.ts +17 -9
- package/components/Token/Token.md +86 -3
- package/components/Token/TokenView/TokenView.js.map +1 -1
- package/components/Token/TokenView.d.ts +3 -0
- package/components/Token/__docs__/Token.mdx +28 -0
- package/components/Token/locale/types/types.js +0 -1
- package/components/TokenInput/TextWidthHelper/TextWidthHelper.js.map +1 -1
- package/components/TokenInput/TextWidthHelper.d.ts +3 -0
- package/components/TokenInput/TokenInput/TokenInput.js +9 -3
- package/components/TokenInput/TokenInput/TokenInput.js.map +1 -1
- package/components/TokenInput/TokenInput.d.ts +54 -97
- package/components/TokenInput/TokenInput.md +12 -10
- package/components/TokenInput/TokenInputMenu/TokenInputMenu.js.map +1 -1
- package/components/TokenInput/TokenInputMenu.d.ts +5 -5
- package/components/TokenInput/__docs__/TokenInput.mdx +28 -0
- package/components/TokenInput/locale/types/types.js +0 -1
- package/components/Tooltip/Tooltip/Tooltip.js +9 -0
- package/components/Tooltip/Tooltip/Tooltip.js.map +1 -1
- package/components/Tooltip/Tooltip.d.ts +28 -68
- package/components/Tooltip/Tooltip.md +5 -0
- package/components/Tooltip/__docs__/Tooltip.mdx +28 -0
- package/components/TooltipMenu/TooltipMenu/TooltipMenu.js +1 -1
- package/components/TooltipMenu/TooltipMenu/TooltipMenu.js.map +1 -1
- package/components/TooltipMenu/TooltipMenu.d.ts +13 -28
- package/components/TooltipMenu/TooltipMenu.md +13 -10
- package/components/TooltipMenu/__docs__/TooltipMenu.mdx +24 -0
- package/index.d.ts +1 -0
- package/index.js +1 -0
- package/index.js.map +1 -1
- package/internal/CommonWrapper/index/index.js +1 -2
- package/internal/CommonWrapper/index/index.js.map +1 -1
- package/internal/CommonWrapper/types/types.js +0 -1
- package/internal/CustomComboBox/CustomComboBoxTypes/CustomComboBoxTypes.js +3 -3
- package/internal/CustomComboBox/CustomComboBoxTypes/CustomComboBoxTypes.js.map +1 -1
- package/internal/CustomComboBox/locale/types/types.js +0 -1
- package/internal/DateSelect/locale/types/types.js +0 -1
- package/internal/FileUploaderControl/fileUtils/fileUtils.js +3 -3
- package/internal/FileUploaderControl/fileUtils/fileUtils.js.map +1 -1
- package/internal/Popup/types/types.js +0 -1
- package/internal/RenderContainer/RenderContainerTypes/RenderContainerTypes.js +0 -1
- package/internal/ThemePlayground/Playground.styles/Playground.styles.js +1 -1
- package/internal/ThemePlayground/Playground.styles/Playground.styles.js.map +1 -1
- package/internal/ThemePlayground/constants/constants.js +3 -3
- package/internal/ThemePlayground/constants/constants.js.map +1 -1
- package/internal/ThemeShowcase/VariablesCollector/VariablesCollector.js.map +1 -1
- package/internal/ZIndex/index/index.js +1 -2
- package/internal/ZIndex/index/index.js.map +1 -1
- package/internal/themes/BasicLightTheme/BasicLightTheme.js +3 -0
- package/internal/themes/BasicLightTheme/BasicLightTheme.js.map +1 -1
- package/internal/themes/BasicLightTheme.d.ts +3 -0
- package/lib/date/types/types.js +18 -18
- package/lib/date/types/types.js.map +1 -1
- package/lib/events/MouseDrag/MouseDrag.js +3 -3
- package/lib/events/MouseDrag/MouseDrag.js.map +1 -1
- package/lib/events/keyboard/KeyboardEventCodes/KeyboardEventCodes.js +3 -3
- package/lib/events/keyboard/KeyboardEventCodes/KeyboardEventCodes.js.map +1 -1
- package/lib/locale/types/types.js +3 -3
- package/lib/locale/types/types.js.map +1 -1
- package/lib/theming/Theme/Theme.js +0 -1
- package/lib/types/button-link/button-link.js +0 -1
- package/lib/types/polymorphic-component/polymorphic-component.js +0 -1
- package/lib/types/props/props.js +0 -1
- package/package.json +9 -5
- package/cjs/lib/styles/HoldSelectionColor.d.ts +0 -1
- package/cjs/lib/styles/HoldSelectionColor.js +0 -9
- package/cjs/lib/styles/HoldSelectionColor.js.map +0 -1
- package/lib/styles/HoldSelectionColor/HoldSelectionColor.js +0 -8
- package/lib/styles/HoldSelectionColor/HoldSelectionColor.js.map +0 -1
- package/lib/styles/HoldSelectionColor/package.json +0 -6
- package/lib/styles/HoldSelectionColor.d.ts +0 -1
|
@@ -16,9 +16,13 @@ export var SpinnerDataTids = {
|
|
|
16
16
|
};
|
|
17
17
|
|
|
18
18
|
/**
|
|
19
|
-
*
|
|
19
|
+
* `Spinner` — это зацикленный индикатор, не отображающий прогресс выполнения задачи.
|
|
20
|
+
*
|
|
21
|
+
* Используйте `Spinner`, чтобы показать, что система выполняет команду, которую дал пользователь.
|
|
22
|
+
* Не применяйте `Spinner` для заполнения паузы при загрузке контента, для этого предназначен GlobalLoader.
|
|
23
|
+
*
|
|
24
|
+
* Используйте компонент `Spinner`, если вам нужен спиннер, без дополнительного функционала, который предоставляет компонент Loader.
|
|
20
25
|
*/
|
|
21
|
-
|
|
22
26
|
export var Spinner = rootNode(_class = (_Spinner = /*#__PURE__*/function (_React$Component) {
|
|
23
27
|
function Spinner() {
|
|
24
28
|
var _this;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","PropTypes","ThemeContext","SpinnerIcon","CommonWrapper","cx","rootNode","createPropsGetter","styles","types","SpinnerDataTids","root","Spinner","_class","_Spinner","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","defaultProps","renderSpinner","type","dimmed","inline","_cx","createElement","size","className","circle","theme","props","color","circleDimmedColor","circleWithoutColorAnimation","width","renderCaption","caption","captionColor","_inheritsLoose","_proto","prototype","render","_this2","Consumer","renderMain","_this$props","_this$props$caption","_extends","rootNodeRef","setRootNode","spinner","inner","Component","__KONTUR_REACT_UI__","displayName","propTypes","node","bool","oneOf","Types","Object","assign","map","_ref"],"sources":["Spinner.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { SpinnerIcon } from '../../internal/SpinnerIcon/SpinnerIcon';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Spinner.styles';\n\nconst types = ['big', 'mini', 'normal'] as const;\n\nexport type SpinnerType = (typeof types)[number];\n\nexport interface SpinnerProps extends CommonProps {\n
|
|
1
|
+
{"version":3,"names":["React","PropTypes","ThemeContext","SpinnerIcon","CommonWrapper","cx","rootNode","createPropsGetter","styles","types","SpinnerDataTids","root","Spinner","_class","_Spinner","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","defaultProps","renderSpinner","type","dimmed","inline","_cx","createElement","size","className","circle","theme","props","color","circleDimmedColor","circleWithoutColorAnimation","width","renderCaption","caption","captionColor","_inheritsLoose","_proto","prototype","render","_this2","Consumer","renderMain","_this$props","_this$props$caption","_extends","rootNodeRef","setRootNode","spinner","inner","Component","__KONTUR_REACT_UI__","displayName","propTypes","node","bool","oneOf","Types","Object","assign","map","_ref"],"sources":["Spinner.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { SpinnerIcon } from '../../internal/SpinnerIcon/SpinnerIcon';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Spinner.styles';\n\nconst types = ['big', 'mini', 'normal'] as const;\n\nexport type SpinnerType = (typeof types)[number];\n\nexport interface SpinnerProps extends CommonProps {\n /** Задает подпись под спиннером.\n * @default \"Загрузка\" */\n caption?: React.ReactNode;\n\n /** Переводит спиннер в \"затемнённый режим\".\n * Цвет спиннера в \"затемнённом режиме\" определяется переменной `spinnerDimmedColor`. */\n dimmed?: boolean;\n\n /** Задает размер спиннера и текста.\n * @default normal. */\n type?: SpinnerType;\n\n /** Уменьшает спиннер для вставки в инлайн элемент. При type = \"big\"|\"normal\" размер спиннера уменьшается. */\n inline?: boolean;\n\n /** Задает толщину спиннера. */\n width?: number;\n\n /** Задает цвет спиннера. Не работает с пропом dimmed. */\n color?: React.CSSProperties['color'];\n}\n\nexport const SpinnerDataTids = {\n root: 'Spinner__root',\n} as const;\n\ntype DefaultProps = Required<Pick<SpinnerProps, 'type'>>;\n\n/**\n * `Spinner` — это зацикленный индикатор, не отображающий прогресс выполнения задачи.\n *\n * Используйте `Spinner`, чтобы показать, что система выполняет команду, которую дал пользователь.\n * Не применяйте `Spinner` для заполнения паузы при загрузке контента, для этого предназначен GlobalLoader.\n *\n * Используйте компонент `Spinner`, если вам нужен спиннер, без дополнительного функционала, который предоставляет компонент Loader.\n */\n@rootNode\nexport class Spinner extends React.Component<SpinnerProps> {\n public static __KONTUR_REACT_UI__ = 'Spinner';\n public static displayName = '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(types),\n };\n\n public static defaultProps: DefaultProps = {\n type: 'normal',\n };\n\n private getProps = createPropsGetter(Spinner.defaultProps);\n\n public static Types: Record<SpinnerType, SpinnerType> = Object.assign({}, ...types.map((type) => ({ [type]: type })));\n private theme!: Theme;\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 { caption = null, dimmed, inline } = this.props;\n const type = this.getProps().type;\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()]: 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"],"mappings":"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","ignoreList":[]}
|
|
@@ -4,30 +4,20 @@ import { CommonProps } from '../../internal/CommonWrapper';
|
|
|
4
4
|
declare const types: readonly ["big", "mini", "normal"];
|
|
5
5
|
export type SpinnerType = (typeof types)[number];
|
|
6
6
|
export interface SpinnerProps extends CommonProps {
|
|
7
|
-
/**
|
|
8
|
-
*
|
|
9
|
-
*/
|
|
7
|
+
/** Задает подпись под спиннером.
|
|
8
|
+
* @default "Загрузка" */
|
|
10
9
|
caption?: React.ReactNode;
|
|
11
|
-
/**
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
* Цвет спиннера в "затемнённом режиме" определяется переменной `spinnerDimmedColor`
|
|
15
|
-
*/
|
|
10
|
+
/** Переводит спиннер в "затемнённый режим".
|
|
11
|
+
* Цвет спиннера в "затемнённом режиме" определяется переменной `spinnerDimmedColor`. */
|
|
16
12
|
dimmed?: boolean;
|
|
17
|
-
/**
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
* @default normal
|
|
21
|
-
*/
|
|
13
|
+
/** Задает размер спиннера и текста.
|
|
14
|
+
* @default normal. */
|
|
22
15
|
type?: SpinnerType;
|
|
16
|
+
/** Уменьшает спиннер для вставки в инлайн элемент. При type = "big"|"normal" размер спиннера уменьшается. */
|
|
23
17
|
inline?: boolean;
|
|
24
|
-
/**
|
|
25
|
-
* Толщина спиннера
|
|
26
|
-
*/
|
|
18
|
+
/** Задает толщину спиннера. */
|
|
27
19
|
width?: number;
|
|
28
|
-
/**
|
|
29
|
-
* Цвет спиннера
|
|
30
|
-
*/
|
|
20
|
+
/** Задает цвет спиннера. Не работает с пропом dimmed. */
|
|
31
21
|
color?: React.CSSProperties['color'];
|
|
32
22
|
}
|
|
33
23
|
export declare const SpinnerDataTids: {
|
|
@@ -35,7 +25,12 @@ export declare const SpinnerDataTids: {
|
|
|
35
25
|
};
|
|
36
26
|
type DefaultProps = Required<Pick<SpinnerProps, 'type'>>;
|
|
37
27
|
/**
|
|
38
|
-
*
|
|
28
|
+
* `Spinner` — это зацикленный индикатор, не отображающий прогресс выполнения задачи.
|
|
29
|
+
*
|
|
30
|
+
* Используйте `Spinner`, чтобы показать, что система выполняет команду, которую дал пользователь.
|
|
31
|
+
* Не применяйте `Spinner` для заполнения паузы при загрузке контента, для этого предназначен GlobalLoader.
|
|
32
|
+
*
|
|
33
|
+
* Используйте компонент `Spinner`, если вам нужен спиннер, без дополнительного функционала, который предоставляет компонент Loader.
|
|
39
34
|
*/
|
|
40
35
|
export declare class Spinner extends React.Component<SpinnerProps> {
|
|
41
36
|
static __KONTUR_REACT_UI__: string;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
### Базовый пример
|
|
1
2
|
```jsx harmony
|
|
2
3
|
import { Gapped, Spinner } from '@skbkontur/react-ui';
|
|
3
4
|
|
|
@@ -18,7 +19,7 @@ const reactNodeCaption = (
|
|
|
18
19
|
</Gapped>;
|
|
19
20
|
```
|
|
20
21
|
|
|
21
|
-
|
|
22
|
+
### Локали по умолчанию
|
|
22
23
|
|
|
23
24
|
```typescript static
|
|
24
25
|
interface SpinnerLocale {
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import * as SpinnerStories from './Spinner.docs.stories.tsx';
|
|
2
|
+
import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
|
|
3
|
+
import { Meta } from '../../../.storybook/Meta';
|
|
4
|
+
|
|
5
|
+
<Meta of={SpinnerStories} />
|
|
6
|
+
|
|
7
|
+
# Spinner
|
|
8
|
+
|
|
9
|
+
[Компонент в Контур.Гайдах](https://guides.kontur.ru/components/progress-indicators/spinner/)
|
|
10
|
+
|
|
11
|
+
[Компонент в Figma](https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=396%3A15631)
|
|
12
|
+
|
|
13
|
+
<Description />
|
|
14
|
+
|
|
15
|
+
## Базовый пример
|
|
16
|
+
|
|
17
|
+
<Primary />
|
|
18
|
+
|
|
19
|
+
## Пропы
|
|
20
|
+
|
|
21
|
+
<details>
|
|
22
|
+
<summary>Открыть таблицу с пропами</summary>
|
|
23
|
+
<ArgTypes />
|
|
24
|
+
</details>
|
|
25
|
+
|
|
26
|
+
## Примеры использования
|
|
27
|
+
|
|
28
|
+
<Stories title="" includePrimary={false} />
|
|
@@ -18,6 +18,11 @@ var MAX_REFLOW_RETRIES = 5;
|
|
|
18
18
|
export var StickyDataTids = {
|
|
19
19
|
root: 'Sticky__root'
|
|
20
20
|
};
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* `Sticky` позволяет закреплять элемент интерфейса в определенной позиции на экране при прокрутке страницы.
|
|
24
|
+
* Это полезно для создания "прилипающих" элементов, которые остаются видимыми при прокрутке содержимого.
|
|
25
|
+
*/
|
|
21
26
|
export var Sticky = rootNode(_class = (_Sticky = /*#__PURE__*/function (_React$Component) {
|
|
22
27
|
function Sticky() {
|
|
23
28
|
var _this;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","PropTypes","shallowEqual","globalObject","LayoutEvents","isFunction","ZIndex","CommonWrapper","cx","rootNode","getDOMRect","createPropsGetter","styles","MAX_REFLOW_RETRIES","StickyDataTids","root","Sticky","_class","_Sticky","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","defaultProps","state","fixed","deltaHeight","stopped","relativeTop","layoutSubscription","remove","reflowCounter","refWrapper","ref","wrapper","refInner","inner","reflow","_globalObject$documen","document","documentElement","Error","windowHeight","innerHeight","clientHeight","_getDOMRect","top","bottom","left","width","_getDOMRect2","height","_this$props","props","getStop","side","_this$state","prevFixed","_this$state$height","prevHeight","offset","Math","floor","setState","stop","stopRect","outerHeight","_inheritsLoose","_proto","prototype","componentDidMount","addListener","componentWillUnmount","componentDidUpdate","prevProps","prevState","emit","render","_cx","children","_this$state2","innerStyle","createElement","_extends","rootNodeRef","setRootNode","className","priority","applyZIndex","style","wrapperRef","container","Component","__KONTUR_REACT_UI__","displayName","propTypes","oneOfType","node","func","number","oneOf","isRequired"],"sources":["Sticky.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport shallowEqual from 'shallowequal';\nimport { globalObject } from '@skbkontur/global-object';\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';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Sticky.styles';\n\nconst MAX_REFLOW_RETRIES = 5;\n\nexport interface StickyProps extends Omit<CommonProps, 'children'> {\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: 'Sticky__root',\n} as const;\n\ntype DefaultProps = Required<Pick<StickyProps, 'offset'>>;\n\n@rootNode\nexport class Sticky extends React.Component<StickyProps, StickyState> {\n public static __KONTUR_REACT_UI__ = 'Sticky';\n public static displayName = '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: DefaultProps = { offset: 0 };\n\n private getProps = createPropsGetter(Sticky.defaultProps);\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 } = this.props;\n const offset = this.getProps().offset;\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 if (!globalObject.document?.documentElement) {\n throw Error('There is no \"documentElement\" in document');\n }\n\n const windowHeight = globalObject.innerHeight || globalObject.document.documentElement.clientHeight;\n if (!this.wrapper || !this.inner) {\n return;\n }\n const { top, bottom, left, width } = getDOMRect(this.wrapper);\n const { height } = getDOMRect(this.inner);\n const { getStop, side } = this.props;\n const { fixed: prevFixed, height: prevHeight = height } = this.state;\n const offset = this.getProps().offset;\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 this.setState({ width });\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"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["React","PropTypes","shallowEqual","globalObject","LayoutEvents","isFunction","ZIndex","CommonWrapper","cx","rootNode","getDOMRect","createPropsGetter","styles","MAX_REFLOW_RETRIES","StickyDataTids","root","Sticky","_class","_Sticky","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","defaultProps","state","fixed","deltaHeight","stopped","relativeTop","layoutSubscription","remove","reflowCounter","refWrapper","ref","wrapper","refInner","inner","reflow","_globalObject$documen","document","documentElement","Error","windowHeight","innerHeight","clientHeight","_getDOMRect","top","bottom","left","width","_getDOMRect2","height","_this$props","props","getStop","side","_this$state","prevFixed","_this$state$height","prevHeight","offset","Math","floor","setState","stop","stopRect","outerHeight","_inheritsLoose","_proto","prototype","componentDidMount","addListener","componentWillUnmount","componentDidUpdate","prevProps","prevState","emit","render","_cx","children","_this$state2","innerStyle","createElement","_extends","rootNodeRef","setRootNode","className","priority","applyZIndex","style","wrapperRef","container","Component","__KONTUR_REACT_UI__","displayName","propTypes","oneOfType","node","func","number","oneOf","isRequired"],"sources":["Sticky.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport shallowEqual from 'shallowequal';\nimport { globalObject } from '@skbkontur/global-object';\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';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Sticky.styles';\n\nconst MAX_REFLOW_RETRIES = 5;\n\nexport interface StickyProps extends Omit<CommonProps, 'children'> {\n /** Задает сторону залипания. */\n side: 'top' | 'bottom';\n\n /** Задает отступ от края экрана в пикселях, на который сдвигается элемент в залипшем состоянии.\n * @default 0 */\n offset?: number;\n\n /** Задает функцию, которая возвращает DOM-элемент, который нельзя пересекать. */\n getStop?: () => Nullable<HTMLElement>;\n\n /** @ignore */\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: 'Sticky__root',\n} as const;\n\ntype DefaultProps = Required<Pick<StickyProps, 'offset'>>;\n\n/**\n * `Sticky` позволяет закреплять элемент интерфейса в определенной позиции на экране при прокрутке страницы.\n * Это полезно для создания \"прилипающих\" элементов, которые остаются видимыми при прокрутке содержимого.\n */\n@rootNode\nexport class Sticky extends React.Component<StickyProps, StickyState> {\n public static __KONTUR_REACT_UI__ = 'Sticky';\n public static displayName = '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: DefaultProps = { offset: 0 };\n\n private getProps = createPropsGetter(Sticky.defaultProps);\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 } = this.props;\n const offset = this.getProps().offset;\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 if (!globalObject.document?.documentElement) {\n throw Error('There is no \"documentElement\" in document');\n }\n\n const windowHeight = globalObject.innerHeight || globalObject.document.documentElement.clientHeight;\n if (!this.wrapper || !this.inner) {\n return;\n }\n const { top, bottom, left, width } = getDOMRect(this.wrapper);\n const { height } = getDOMRect(this.inner);\n const { getStop, side } = this.props;\n const { fixed: prevFixed, height: prevHeight = height } = this.state;\n const offset = this.getProps().offset;\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 this.setState({ width });\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"],"mappings":"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","ignoreList":[]}
|
|
@@ -3,13 +3,14 @@ import PropTypes from 'prop-types';
|
|
|
3
3
|
import { Nullable } from '../../typings/utility-types';
|
|
4
4
|
import { CommonProps } from '../../internal/CommonWrapper';
|
|
5
5
|
export interface StickyProps extends Omit<CommonProps, 'children'> {
|
|
6
|
+
/** Задает сторону залипания. */
|
|
6
7
|
side: 'top' | 'bottom';
|
|
7
|
-
/**
|
|
8
|
-
*
|
|
9
|
-
* @default 0
|
|
10
|
-
*/
|
|
8
|
+
/** Задает отступ от края экрана в пикселях, на который сдвигается элемент в залипшем состоянии.
|
|
9
|
+
* @default 0 */
|
|
11
10
|
offset?: number;
|
|
11
|
+
/** Задает функцию, которая возвращает DOM-элемент, который нельзя пересекать. */
|
|
12
12
|
getStop?: () => Nullable<HTMLElement>;
|
|
13
|
+
/** @ignore */
|
|
13
14
|
children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);
|
|
14
15
|
}
|
|
15
16
|
export interface StickyState {
|
|
@@ -25,6 +26,10 @@ export declare const StickyDataTids: {
|
|
|
25
26
|
readonly root: "Sticky__root";
|
|
26
27
|
};
|
|
27
28
|
type DefaultProps = Required<Pick<StickyProps, 'offset'>>;
|
|
29
|
+
/**
|
|
30
|
+
* `Sticky` позволяет закреплять элемент интерфейса в определенной позиции на экране при прокрутке страницы.
|
|
31
|
+
* Это полезно для создания "прилипающих" элементов, которые остаются видимыми при прокрутке содержимого.
|
|
32
|
+
*/
|
|
28
33
|
export declare class Sticky extends React.Component<StickyProps, StickyState> {
|
|
29
34
|
static __KONTUR_REACT_UI__: string;
|
|
30
35
|
static displayName: string;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import * as StickyStories from './Sticky.docs.stories.tsx';
|
|
2
|
+
import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
|
|
3
|
+
import { Meta } from '../../../.storybook/Meta';
|
|
4
|
+
|
|
5
|
+
<Meta of={StickyStories} />
|
|
6
|
+
|
|
7
|
+
# Sticky
|
|
8
|
+
|
|
9
|
+
<Description />
|
|
10
|
+
|
|
11
|
+
## Базовый пример
|
|
12
|
+
|
|
13
|
+
<Primary />
|
|
14
|
+
|
|
15
|
+
## Пропы
|
|
16
|
+
|
|
17
|
+
<details>
|
|
18
|
+
<summary>Открыть таблицу с пропами</summary>
|
|
19
|
+
<ArgTypes />
|
|
20
|
+
</details>
|
|
21
|
+
|
|
22
|
+
## Примеры использования
|
|
23
|
+
|
|
24
|
+
<Stories title="" includePrimary={false} />
|
|
@@ -16,6 +16,12 @@ import { mod } from "../helpers";
|
|
|
16
16
|
export var SwitcherDataTids = {
|
|
17
17
|
root: 'Switcher__root'
|
|
18
18
|
};
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Переключатель `Switcher` — это замена RadioGroup.
|
|
22
|
+
*
|
|
23
|
+
* Не используйте переключатель в качестве навигации, для этого лучше подходят Tabs.
|
|
24
|
+
*/
|
|
19
25
|
export var Switcher = rootNode(_class = (_Switcher = /*#__PURE__*/function (_React$Component) {
|
|
20
26
|
function Switcher() {
|
|
21
27
|
var _this;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","PropTypes","isKeyArrowHorizontal","isKeyArrowLeft","isKeyEnter","getButtonCorners","Group","Button","ThemeContext","CommonWrapper","cx","rootNode","styles","getSwitcherTheme","mod","SwitcherDataTids","root","Switcher","_class","_Switcher","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","state","focusedIndex","selectItem","value","props","onValueChange","_extractPropsFromItem","item","label","_extractValuesFromItems","items","map","_this$_extractPropsFr","_focus","index","setState","handleKey","e","_this$_extractPropsFr2","buttonProps","disabled","preventDefault","move","left","selectedIndex","newFocusedIndex","_getNextFocusedIndex","_this$props","i","_this$_extractPropsFr3","_handleFocus","currentIndex","indexOf","_handleBlur","_renderItems","_this$props2","size","role","renderItem","_this$_extractPropsFr4","ariaLabel","itemValue","customButtonProps","isChecked","commonButtonProps","checked","visuallyFocused","onClick","disableFocus","corners","_extends","renderDefault","renderDefaultItem","createElement","key","getLabelSizeClassName","captionLarge","theme","captionMedium","captionSmall","_inheritsLoose","_proto","prototype","render","_this2","Consumer","Provider","renderMain","_cx","listClassName","error","inputProps","type","onKeyDown","onFocus","onBlur","className","input","captionClassName","caption","rootNodeRef","setRootNode","wrap","Component","__KONTUR_REACT_UI__","displayName","defaultProps","propTypes","bool","oneOfType","arrayOf","string","shape","isRequired","func"],"sources":["Switcher.tsx"],"sourcesContent":["import React, { HTMLAttributes } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from '../../lib/events/keyboard/identifiers';\nimport { getButtonCorners, Group } from '../Group';\nimport { Button, ButtonProps } 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';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { styles } from './Switcher.styles';\nimport { getSwitcherTheme } from './switcherTheme';\nimport { mod } from './helpers';\n\nexport type SwitcherItems = string | SwitcherItem;\n\nexport const SwitcherDataTids = {\n root: 'Switcher__root',\n} as const;\n\nexport interface SwitcherProps extends Pick<HTMLAttributes<unknown>, 'role'>, CommonProps {\n /**\n * Список строк или список элементов типа `{ label: string, value: string, buttonProps?: Partial<ButtonProps> }`\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?: SizeProp;\n\n disabled?: boolean;\n\n /**\n * Функция для отрисовки элемента. Аргументы — `label`,\n * `value`, `buttonProps`, `renderDefault`, `ariaLabel`\n */\n renderItem?: (\n label: string,\n value: string,\n buttonProps: ButtonProps,\n renderDefault: () => React.ReactNode,\n ariaLabel?: string,\n ) => React.ReactNode;\n}\n\ntype DefaultProps = Required<Pick<SwitcherProps, 'role'>>;\n\nexport interface SwitcherState {\n focusedIndex: Nullable<number>;\n}\n\ninterface SwitcherItem {\n value: string;\n label: string;\n 'aria-label'?: string;\n buttonProps?: Partial<ButtonProps>;\n}\n\n@rootNode\nexport class Switcher extends React.Component<SwitcherProps, SwitcherState> {\n public static __KONTUR_REACT_UI__ = 'Switcher';\n public static displayName = 'Switcher';\n\n public static defaultProps: DefaultProps = {\n role: 'switch',\n };\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 renderItem: 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 _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, buttonProps } = this._extractPropsFromItem(this.props.items[focusedIndex]);\n if (!buttonProps?.disabled) {\n this.selectItem(value);\n }\n }\n return;\n }\n\n if (isKeyArrowHorizontal(e)) {\n e.preventDefault();\n this.move(isKeyArrowLeft(e));\n }\n };\n\n private move = (left: boolean) => {\n const selectedIndex = this.state.focusedIndex;\n\n if (typeof selectedIndex !== 'number') {\n return;\n }\n const newFocusedIndex = this._getNextFocusedIndex(left, selectedIndex);\n this._focus(newFocusedIndex);\n };\n\n private _getNextFocusedIndex = (left: boolean, focusedIndex: number): number => {\n const { items, disabled } = this.props;\n if (disabled) {\n return focusedIndex;\n }\n\n for (let i = 1; i < items.length; i++) {\n const index = mod(focusedIndex + (left ? -i : i), items.length);\n const { buttonProps } = this._extractPropsFromItem(items[index]);\n if (!buttonProps?.disabled) {\n return index;\n }\n }\n return focusedIndex;\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 const { items, value, size, disabled, role, renderItem } = this.props;\n return items.map((item, i) => {\n const {\n 'aria-label': ariaLabel,\n label,\n value: itemValue,\n buttonProps: customButtonProps,\n } = this._extractPropsFromItem(item);\n\n const isChecked = value === itemValue;\n const commonButtonProps = {\n 'aria-checked': isChecked,\n role,\n checked: isChecked,\n visuallyFocused: this.state.focusedIndex === i,\n onClick: () => {\n this.selectItem(itemValue);\n },\n disableFocus: true,\n size,\n disabled,\n corners: getButtonCorners(i === 0, i === items.length - 1),\n };\n\n const buttonProps = {\n ...commonButtonProps,\n ...customButtonProps,\n };\n\n const renderDefault = () => this.renderDefaultItem(label, itemValue, buttonProps, ariaLabel);\n\n return renderItem ? renderItem(label, itemValue, buttonProps, renderDefault, ariaLabel) : renderDefault();\n });\n };\n\n private renderDefaultItem = (label: string, value: string, buttonProps: ButtonProps, ariaLabel?: string) => (\n <Button aria-label={ariaLabel} key={value} {...buttonProps}>\n {label}\n </Button>\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"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["React","PropTypes","isKeyArrowHorizontal","isKeyArrowLeft","isKeyEnter","getButtonCorners","Group","Button","ThemeContext","CommonWrapper","cx","rootNode","styles","getSwitcherTheme","mod","SwitcherDataTids","root","Switcher","_class","_Switcher","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","state","focusedIndex","selectItem","value","props","onValueChange","_extractPropsFromItem","item","label","_extractValuesFromItems","items","map","_this$_extractPropsFr","_focus","index","setState","handleKey","e","_this$_extractPropsFr2","buttonProps","disabled","preventDefault","move","left","selectedIndex","newFocusedIndex","_getNextFocusedIndex","_this$props","i","_this$_extractPropsFr3","_handleFocus","currentIndex","indexOf","_handleBlur","_renderItems","_this$props2","size","role","renderItem","_this$_extractPropsFr4","ariaLabel","itemValue","customButtonProps","isChecked","commonButtonProps","checked","visuallyFocused","onClick","disableFocus","corners","_extends","renderDefault","renderDefaultItem","createElement","key","getLabelSizeClassName","captionLarge","theme","captionMedium","captionSmall","_inheritsLoose","_proto","prototype","render","_this2","Consumer","Provider","renderMain","_cx","listClassName","error","inputProps","type","onKeyDown","onFocus","onBlur","className","input","captionClassName","caption","rootNodeRef","setRootNode","wrap","Component","__KONTUR_REACT_UI__","displayName","defaultProps","propTypes","bool","oneOfType","arrayOf","string","shape","isRequired","func"],"sources":["Switcher.tsx"],"sourcesContent":["import React, { HTMLAttributes } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from '../../lib/events/keyboard/identifiers';\nimport { getButtonCorners, Group } from '../Group';\nimport { Button, ButtonProps } 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';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { styles } from './Switcher.styles';\nimport { getSwitcherTheme } from './switcherTheme';\nimport { mod } from './helpers';\n\nexport type SwitcherItems = string | SwitcherItem;\n\nexport const SwitcherDataTids = {\n root: 'Switcher__root',\n} as const;\n\nexport interface SwitcherProps extends Pick<HTMLAttributes<unknown>, 'role'>, CommonProps {\n /** Задает список строк или список элементов типа `{ label: string, value: string, buttonProps?: Partial<ButtonProps> }`. */\n items: SwitcherItems[];\n\n /** Устанавливает значение свитчера. */\n value?: string;\n\n /** Задает функцию, которая вызывается при изменении значения свитчера (value). */\n onValueChange?: (value: string) => void;\n\n /** Задает подпись около свитчера. */\n caption?: string;\n\n /** Переводит контрол в состояние валидации \"ошибка\". */\n error?: boolean;\n\n /** Задает размер контрола. */\n size?: SizeProp;\n\n /** Делает компонент недоступным. */\n disabled?: boolean;\n\n /** Задает функцию отрисовки элемента.\n * @param `label` -\n * @param `value` -\n * @param `buttonProps` -\n * @param `renderDefault` -\n * @param `ariaLabel` -\n */\n renderItem?: (\n label: string,\n value: string,\n buttonProps: ButtonProps,\n renderDefault: () => React.ReactNode,\n ariaLabel?: string,\n ) => React.ReactNode;\n}\n\ntype DefaultProps = Required<Pick<SwitcherProps, 'role'>>;\n\nexport interface SwitcherState {\n focusedIndex: Nullable<number>;\n}\n\ninterface SwitcherItem {\n value: string;\n label: string;\n 'aria-label'?: string;\n buttonProps?: Partial<ButtonProps>;\n}\n\n/**\n * Переключатель `Switcher` — это замена RadioGroup.\n *\n * Не используйте переключатель в качестве навигации, для этого лучше подходят Tabs.\n */\n@rootNode\nexport class Switcher extends React.Component<SwitcherProps, SwitcherState> {\n public static __KONTUR_REACT_UI__ = 'Switcher';\n public static displayName = 'Switcher';\n\n public static defaultProps: DefaultProps = {\n role: 'switch',\n };\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 renderItem: 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 _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, buttonProps } = this._extractPropsFromItem(this.props.items[focusedIndex]);\n if (!buttonProps?.disabled) {\n this.selectItem(value);\n }\n }\n return;\n }\n\n if (isKeyArrowHorizontal(e)) {\n e.preventDefault();\n this.move(isKeyArrowLeft(e));\n }\n };\n\n private move = (left: boolean) => {\n const selectedIndex = this.state.focusedIndex;\n\n if (typeof selectedIndex !== 'number') {\n return;\n }\n const newFocusedIndex = this._getNextFocusedIndex(left, selectedIndex);\n this._focus(newFocusedIndex);\n };\n\n private _getNextFocusedIndex = (left: boolean, focusedIndex: number): number => {\n const { items, disabled } = this.props;\n if (disabled) {\n return focusedIndex;\n }\n\n for (let i = 1; i < items.length; i++) {\n const index = mod(focusedIndex + (left ? -i : i), items.length);\n const { buttonProps } = this._extractPropsFromItem(items[index]);\n if (!buttonProps?.disabled) {\n return index;\n }\n }\n return focusedIndex;\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 const { items, value, size, disabled, role, renderItem } = this.props;\n return items.map((item, i) => {\n const {\n 'aria-label': ariaLabel,\n label,\n value: itemValue,\n buttonProps: customButtonProps,\n } = this._extractPropsFromItem(item);\n\n const isChecked = value === itemValue;\n const commonButtonProps = {\n 'aria-checked': isChecked,\n role,\n checked: isChecked,\n visuallyFocused: this.state.focusedIndex === i,\n onClick: () => {\n this.selectItem(itemValue);\n },\n disableFocus: true,\n size,\n disabled,\n corners: getButtonCorners(i === 0, i === items.length - 1),\n };\n\n const buttonProps = {\n ...commonButtonProps,\n ...customButtonProps,\n };\n\n const renderDefault = () => this.renderDefaultItem(label, itemValue, buttonProps, ariaLabel);\n\n return renderItem ? renderItem(label, itemValue, buttonProps, renderDefault, ariaLabel) : renderDefault();\n });\n };\n\n private renderDefaultItem = (label: string, value: string, buttonProps: ButtonProps, ariaLabel?: string) => (\n <Button aria-label={ariaLabel} key={value} {...buttonProps}>\n {label}\n </Button>\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"],"mappings":"sJAAA,OAAOA,KAAK,MAA0B,OAAO;AAC7C,OAAOC,SAAS,MAAM,YAAY;;AAElC,SAASC,oBAAoB,EAAEC,cAAc,EAAEC,UAAU,QAAQ,uCAAuC;AACxG,SAASC,gBAAgB,EAAEC,KAAK,QAAQ,UAAU;AAClD,SAASC,MAAM,QAAqB,WAAW;;AAE/C,SAASC,YAAY,QAAQ,gCAAgC;;AAE7D,SAAsBC,aAAa,QAAQ,8BAA8B;AACzE,SAASC,EAAE,QAAQ,2BAA2B;AAC9C,SAASC,QAAQ,QAAsB,oBAAoB;;;AAG3D,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,gBAAgB,QAAQ,iBAAiB;AAClD,SAASC,GAAG,QAAQ,WAAW;;;;AAI/B,OAAO,IAAMC,gBAAgB,GAAG;EAC9BC,IAAI,EAAE;AACR,CAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDV;AACA;AACA;AACA;AACA;AACA;AACaC,QAAQ,GADpBN,QAAQ,CAAAO,MAAA,IAAAC,SAAA,0BAAAC,gBAAA,YAAAH,SAAA,OAAAI,KAAA,UAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA,GAAAN,KAAA,GAAAD,gBAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,gBAAA,SAAAU,MAAA,CAAAL,IAAA,WAAAJ,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;IA2BAU,KAAK,GAAkB;MAC5BC,YAAY,EAAE;IAChB,CAAC,CAAAX,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA8COY,UAAU,GAAG,UAACC,KAAa,EAAK;MACtC,IAAIb,KAAA,CAAKc,KAAK,CAACC,aAAa,EAAE;QAC5Bf,KAAA,CAAKc,KAAK,CAACC,aAAa,CAACF,KAAK,CAAC;MACjC;IACF,CAAC,CAAAb,KAAA;;IAEOgB,qBAAqB,GAAG,UAACC,IAA2B,EAAmB;MAC7E,OAAO,OAAOA,IAAI,KAAK,QAAQ,GAAGA,IAAI,GAAG,EAAEC,KAAK,EAAED,IAAI,EAAEJ,KAAK,EAAEI,IAAI,CAAC,CAAC;IACvE,CAAC,CAAAjB,KAAA;;IAEOmB,uBAAuB,GAAG,YAAgB;MAChD,OAAOnB,KAAA,CAAKc,KAAK,CAACM,KAAK,CAACC,GAAG,CAAC,UAACJ,IAAI,EAAK;QACpC,IAAAK,qBAAA,GAAkBtB,KAAA,CAAKgB,qBAAqB,CAACC,IAAI,CAAC,CAA1CJ,KAAK,GAAAS,qBAAA,CAALT,KAAK;QACb,OAAOA,KAAK;MACd,CAAC,CAAC;IACJ,CAAC,CAAAb,KAAA;;IAEOuB,MAAM,GAAG,UAACC,KAAa,EAAK;MAClCxB,KAAA,CAAKyB,QAAQ,CAAC,EAAEd,YAAY,EAAEa,KAAK,CAAC,CAAC,CAAC;IACxC,CAAC,CAAAxB,KAAA;;IAEO0B,SAAS,GAAG,UAACC,CAAwC,EAAK;MAChE,IAAMhB,YAAY,GAAGX,KAAA,CAAKU,KAAK,CAACC,YAAY;MAC5C,IAAI,OAAOA,YAAY,KAAK,QAAQ,EAAE;QACpC;MACF;;MAEA,IAAI5B,UAAU,CAAC4C,CAAC,CAAC,EAAE;QACjB,IAAI3B,KAAA,CAAKc,KAAK,CAACC,aAAa,EAAE;UAC5B,IAAAa,sBAAA,GAA+B5B,KAAA,CAAKgB,qBAAqB,CAAChB,KAAA,CAAKc,KAAK,CAACM,KAAK,CAACT,YAAY,CAAC,CAAC,CAAjFE,KAAK,GAAAe,sBAAA,CAALf,KAAK,CAAEgB,WAAW,GAAAD,sBAAA,CAAXC,WAAW;UAC1B,IAAI,EAACA,WAAW,YAAXA,WAAW,CAAEC,QAAQ,GAAE;YAC1B9B,KAAA,CAAKY,UAAU,CAACC,KAAK,CAAC;UACxB;QACF;QACA;MACF;;MAEA,IAAIhC,oBAAoB,CAAC8C,CAAC,CAAC,EAAE;QAC3BA,CAAC,CAACI,cAAc,CAAC,CAAC;QAClB/B,KAAA,CAAKgC,IAAI,CAAClD,cAAc,CAAC6C,CAAC,CAAC,CAAC;MAC9B;IACF,CAAC,CAAA3B,KAAA;;IAEOgC,IAAI,GAAG,UAACC,IAAa,EAAK;MAChC,IAAMC,aAAa,GAAGlC,KAAA,CAAKU,KAAK,CAACC,YAAY;;MAE7C,IAAI,OAAOuB,aAAa,KAAK,QAAQ,EAAE;QACrC;MACF;MACA,IAAMC,eAAe,GAAGnC,KAAA,CAAKoC,oBAAoB,CAACH,IAAI,EAAEC,aAAa,CAAC;MACtElC,KAAA,CAAKuB,MAAM,CAACY,eAAe,CAAC;IAC9B,CAAC,CAAAnC,KAAA;;IAEOoC,oBAAoB,GAAG,UAACH,IAAa,EAAEtB,YAAoB,EAAa;MAC9E,IAAA0B,WAAA,GAA4BrC,KAAA,CAAKc,KAAK,CAA9BM,KAAK,GAAAiB,WAAA,CAALjB,KAAK,CAAEU,QAAQ,GAAAO,WAAA,CAARP,QAAQ;MACvB,IAAIA,QAAQ,EAAE;QACZ,OAAOnB,YAAY;MACrB;;MAEA,KAAK,IAAI2B,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGlB,KAAK,CAACjB,MAAM,EAAEmC,CAAC,EAAE,EAAE;QACrC,IAAMd,KAAK,GAAG/B,GAAG,CAACkB,YAAY,IAAIsB,IAAI,GAAG,CAACK,CAAC,GAAGA,CAAC,CAAC,EAAElB,KAAK,CAACjB,MAAM,CAAC;QAC/D,IAAAoC,sBAAA,GAAwBvC,KAAA,CAAKgB,qBAAqB,CAACI,KAAK,CAACI,KAAK,CAAC,CAAC,CAAxDK,WAAW,GAAAU,sBAAA,CAAXV,WAAW;QACnB,IAAI,EAACA,WAAW,YAAXA,WAAW,CAAEC,QAAQ,GAAE;UAC1B,OAAON,KAAK;QACd;MACF;MACA,OAAOb,YAAY;IACrB,CAAC,CAAAX,KAAA;;IAEOwC,YAAY,GAAG,YAAM;MAC3B,IAAQ3B,KAAK,GAAKb,KAAA,CAAKc,KAAK,CAApBD,KAAK;;MAEb,IAAMO,KAAK,GAAGpB,KAAA,CAAKmB,uBAAuB,CAAC,CAAC;MAC5C,IAAMsB,YAAY,GAAG,GAAAhC,MAAA,CAAIW,KAAK,EAAEsB,OAAO,CAAC7B,KAAe,CAAC;MACxD,IAAMW,KAAK,GAAGiB,YAAY,GAAG,CAAC,CAAC,GAAGA,YAAY,GAAG,CAAC;;MAElDzC,KAAA,CAAKyB,QAAQ,CAAC,EAAEd,YAAY,EAAEa,KAAK,CAAC,CAAC,CAAC;IACxC,CAAC,CAAAxB,KAAA;;IAEO2C,WAAW,GAAG,YAAM;MAC1B3C,KAAA,CAAKyB,QAAQ,CAAC,EAAEd,YAAY,EAAE,IAAI,CAAC,CAAC,CAAC;IACvC,CAAC,CAAAX,KAAA;;IAEO4C,YAAY,GAAG,YAAM;MAC3B,IAAAC,YAAA,GAA2D7C,KAAA,CAAKc,KAAK,CAA7DM,KAAK,GAAAyB,YAAA,CAALzB,KAAK,CAAEP,KAAK,GAAAgC,YAAA,CAALhC,KAAK,CAAEiC,IAAI,GAAAD,YAAA,CAAJC,IAAI,CAAEhB,QAAQ,GAAAe,YAAA,CAARf,QAAQ,CAAEiB,IAAI,GAAAF,YAAA,CAAJE,IAAI,CAAEC,UAAU,GAAAH,YAAA,CAAVG,UAAU;MACtD,OAAO5B,KAAK,CAACC,GAAG,CAAC,UAACJ,IAAI,EAAEqB,CAAC,EAAK;QAC5B,IAAAW,sBAAA;;;;;UAKIjD,KAAA,CAAKgB,qBAAqB,CAACC,IAAI,CAAC,CAJpBiC,SAAS,GAAAD,sBAAA,CAAvB,YAAY,EACZ/B,KAAK,GAAA+B,sBAAA,CAAL/B,KAAK,CACEiC,SAAS,GAAAF,sBAAA,CAAhBpC,KAAK,CACQuC,iBAAiB,GAAAH,sBAAA,CAA9BpB,WAAW;;QAGb,IAAMwB,SAAS,GAAGxC,KAAK,KAAKsC,SAAS;QACrC,IAAMG,iBAAiB,GAAG;UACxB,cAAc,EAAED,SAAS;UACzBN,IAAI,EAAJA,IAAI;UACJQ,OAAO,EAAEF,SAAS;UAClBG,eAAe,EAAExD,KAAA,CAAKU,KAAK,CAACC,YAAY,KAAK2B,CAAC;UAC9CmB,OAAO,EAAE,SAAAA,QAAA,EAAM;YACbzD,KAAA,CAAKY,UAAU,CAACuC,SAAS,CAAC;UAC5B,CAAC;UACDO,YAAY,EAAE,IAAI;UAClBZ,IAAI,EAAJA,IAAI;UACJhB,QAAQ,EAARA,QAAQ;UACR6B,OAAO,EAAE3E,gBAAgB,CAACsD,CAAC,KAAK,CAAC,EAAEA,CAAC,KAAKlB,KAAK,CAACjB,MAAM,GAAG,CAAC;QAC3D,CAAC;;QAED,IAAM0B,WAAW,GAAA+B,QAAA;QACZN,iBAAiB;QACjBF,iBAAiB,CACrB;;;QAED,IAAMS,aAAa,GAAG,SAAhBA,aAAaA,CAAA,UAAS7D,KAAA,CAAK8D,iBAAiB,CAAC5C,KAAK,EAAEiC,SAAS,EAAEtB,WAAW,EAAEqB,SAAS,CAAC;;QAE5F,OAAOF,UAAU,GAAGA,UAAU,CAAC9B,KAAK,EAAEiC,SAAS,EAAEtB,WAAW,EAAEgC,aAAa,EAAEX,SAAS,CAAC,GAAGW,aAAa,CAAC,CAAC;MAC3G,CAAC,CAAC;IACJ,CAAC,CAAA7D,KAAA;;IAEO8D,iBAAiB,GAAG,UAAC5C,KAAa,EAAEL,KAAa,EAAEgB,WAAwB,EAAEqB,SAAkB;QACrGvE,KAAA,CAAAoF,aAAA,CAAC7E,MAAM,EAAA0E,QAAA,GAAC,cAAYV,SAAU,EAACc,GAAG,EAAEnD,KAAM,IAAKgB,WAAW;QACvDX;QACK,CAAC,GACV,CAAAlB,KAAA;;;IAEOiE,qBAAqB,GAAG,YAAc;MAC5C,QAAQjE,KAAA,CAAKc,KAAK,CAACgC,IAAI;QACrB,KAAK,OAAO;UACV,OAAOvD,MAAM,CAAC2E,YAAY,CAAClE,KAAA,CAAKmE,KAAK,CAAC;QACxC,KAAK,QAAQ;UACX,OAAO5E,MAAM,CAAC6E,aAAa,CAACpE,KAAA,CAAKmE,KAAK,CAAC;QACzC,KAAK,OAAO;QACZ;UACE,OAAO5E,MAAM,CAAC8E,YAAY,CAACrE,KAAA,CAAKmE,KAAK,CAAC;MAC1C;IACF,CAAC,QAAAnE,KAAA,EAAAsE,cAAA,CAAA1E,QAAA,EAAAG,gBAAA,MAAAwE,MAAA,GAAA3E,QAAA,CAAA4E,SAAA,CAAAD,MAAA,CAhLME,MAAM,GAAb,SAAAA,OAAA,EAAgB,KAAAC,MAAA,QACd,oBACE/F,KAAA,CAAAoF,aAAA,CAAC5E,YAAY,CAACwF,QAAQ,QACnB,UAACR,KAAK,EAAK,CACVO,MAAI,CAACP,KAAK,GAAG3E,gBAAgB,CAAC2E,KAAK,CAAC,CACpC,oBAAOxF,KAAA,CAAAoF,aAAA,CAAC5E,YAAY,CAACyF,QAAQ,IAAC/D,KAAK,EAAE6D,MAAI,CAACP,KAAM,IAAEO,MAAI,CAACG,UAAU,CAAC,CAAyB,CAAC,CAC9F,CACqB,CAAC,CAE5B,CAAC,CAAAN,MAAA,CAEOM,UAAU,GAAlB,SAAAA,WAAA,EAAqB,KAAAC,GAAA,CACnB,IAAMC,aAAa,GAAG1F,EAAE,EAAAyF,GAAA,OAAAA,GAAA,CACrBvF,MAAM,CAACyF,KAAK,CAAC,IAAI,CAACb,KAAK,CAAC,IAAG,CAAC,CAAC,IAAI,CAACrD,KAAK,CAACkE,KAAK,EAAAF,GAAA,CAC/C,CAAC,CAEF,IAAMG,UAAU,GAAG,EACjBC,IAAI,EAAE,UAAU,EAChBC,SAAS,EAAE,IAAI,CAACzD,SAAS,EACzB0D,OAAO,EAAE,IAAI,CAAC5C,YAAY,EAC1B6C,MAAM,EAAE,IAAI,CAAC1C,WAAW,EACxB2C,SAAS,EAAE/F,MAAM,CAACgG,KAAK,CAAC,CAAC,CAC3B,CAAC,CAED,IAAMC,gBAAgB,GAAGnG,EAAE,CAACE,MAAM,CAACkG,OAAO,CAAC,IAAI,CAACtB,KAAK,CAAC,EAAE,IAAI,CAACF,qBAAqB,CAAC,CAAC,CAAC,CAErF,oBACEtF,KAAA,CAAAoF,aAAA,CAAC3E,aAAa,EAAAwE,QAAA,GAAC8B,WAAW,EAAE,IAAI,CAACC,WAAY,IAAK,IAAI,CAAC7E,KAAK,gBAC1DnC,KAAA,CAAAoF,aAAA,UAAK,YAAUrE,gBAAgB,CAACC,IAAK,EAAC2F,SAAS,EAAE/F,MAAM,CAACI,IAAI,CAAC,CAAE,IAC5D,IAAI,CAACmB,KAAK,CAAC2E,OAAO,gBAAG9G,KAAA,CAAAoF,aAAA,UAAKuB,SAAS,EAAEE,gBAAiB,IAAE,IAAI,CAAC1E,KAAK,CAAC2E,OAAa,CAAC,GAAG,IAAI,eACzF9G,KAAA,CAAAoF,aAAA,UAAKuB,SAAS,EAAE/F,MAAM,CAACqG,IAAI,CAAC,CAAE,iBAC5BjH,KAAA,CAAAoF,aAAA,UAAWkB,UAAa,CAAC,eACzBtG,KAAA,CAAAoF,aAAA,UAAKuB,SAAS,EAAEP,aAAc,iBAC5BpG,KAAA,CAAAoF,aAAA,CAAC9E,KAAK,QAAE,IAAI,CAAC2D,YAAY,CAAC,CAAS,CAChC,CACF,CACF,CACQ,CAAC,CAEpB,CAAC,QAAAhD,QAAA,GAxE2BjB,KAAK,CAACkH,SAAS,GAAA/F,SAAA,CAC7BgG,mBAAmB,GAAG,UAAU,EAAAhG,SAAA,CAChCiG,WAAW,GAAG,UAAU,EAAAjG,SAAA,CAExBkG,YAAY,GAAiB,EACzCjD,IAAI,EAAE,QAAQ,CAChB,CAAC,EAAAjD,SAAA,CAEamG,SAAS,GAAG,EACxBjB,KAAK,EAAEpG,SAAS,CAACsH,IAAI,EACrBpE,QAAQ,EAAElD,SAAS,CAACsH,IAAI,EACxB9E,KAAK,EAAExC,SAAS,CAACuH,SAAS,CAAC,CACzBvH,SAAS,CAACwH,OAAO,CAACxH,SAAS,CAACyH,MAAM,CAAC,EACnCzH,SAAS,CAACwH,OAAO,CACfxH,SAAS,CAAC0H,KAAK,CAAC,EACdpF,KAAK,EAAEtC,SAAS,CAACyH,MAAM,EACvBxF,KAAK,EAAEjC,SAAS,CAACyH,MAAM,CACzB,CAAC,CACH,CAAC,CACF,CAAC,CAACE,UAAU,EACbd,OAAO,EAAE7G,SAAS,CAACyH,MAAM,EACzBxF,KAAK,EAAEjC,SAAS,CAACyH,MAAM,EACvBtF,aAAa,EAAEnC,SAAS,CAAC4H,IAAI,EAC7BxD,UAAU,EAAEpE,SAAS,CAAC4H,IAAI,CAC5B,CAAC,EAAA1G,SAAA,MAAAD,MAAA","ignoreList":[]}
|
|
@@ -9,20 +9,26 @@ export declare const SwitcherDataTids: {
|
|
|
9
9
|
readonly root: "Switcher__root";
|
|
10
10
|
};
|
|
11
11
|
export interface SwitcherProps extends Pick<HTMLAttributes<unknown>, 'role'>, CommonProps {
|
|
12
|
-
/**
|
|
13
|
-
* Список строк или список элементов типа `{ label: string, value: string, buttonProps?: Partial<ButtonProps> }`
|
|
14
|
-
*/
|
|
12
|
+
/** Задает список строк или список элементов типа `{ label: string, value: string, buttonProps?: Partial<ButtonProps> }`. */
|
|
15
13
|
items: SwitcherItems[];
|
|
14
|
+
/** Устанавливает значение свитчера. */
|
|
16
15
|
value?: string;
|
|
16
|
+
/** Задает функцию, которая вызывается при изменении значения свитчера (value). */
|
|
17
17
|
onValueChange?: (value: string) => void;
|
|
18
|
+
/** Задает подпись около свитчера. */
|
|
18
19
|
caption?: string;
|
|
20
|
+
/** Переводит контрол в состояние валидации "ошибка". */
|
|
19
21
|
error?: boolean;
|
|
20
|
-
/**
|
|
22
|
+
/** Задает размер контрола. */
|
|
21
23
|
size?: SizeProp;
|
|
24
|
+
/** Делает компонент недоступным. */
|
|
22
25
|
disabled?: boolean;
|
|
23
|
-
/**
|
|
24
|
-
*
|
|
25
|
-
* `value
|
|
26
|
+
/** Задает функцию отрисовки элемента.
|
|
27
|
+
* @param `label` -
|
|
28
|
+
* @param `value` -
|
|
29
|
+
* @param `buttonProps` -
|
|
30
|
+
* @param `renderDefault` -
|
|
31
|
+
* @param `ariaLabel` -
|
|
26
32
|
*/
|
|
27
33
|
renderItem?: (label: string, value: string, buttonProps: ButtonProps, renderDefault: () => React.ReactNode, ariaLabel?: string) => React.ReactNode;
|
|
28
34
|
}
|
|
@@ -36,6 +42,11 @@ interface SwitcherItem {
|
|
|
36
42
|
'aria-label'?: string;
|
|
37
43
|
buttonProps?: Partial<ButtonProps>;
|
|
38
44
|
}
|
|
45
|
+
/**
|
|
46
|
+
* Переключатель `Switcher` — это замена RadioGroup.
|
|
47
|
+
*
|
|
48
|
+
* Не используйте переключатель в качестве навигации, для этого лучше подходят Tabs.
|
|
49
|
+
*/
|
|
39
50
|
export declare class Switcher extends React.Component<SwitcherProps, SwitcherState> {
|
|
40
51
|
static __KONTUR_REACT_UI__: string;
|
|
41
52
|
static displayName: string;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
### Базовый пример
|
|
1
2
|
```jsx harmony
|
|
2
3
|
const [value, setValue] = React.useState();
|
|
3
4
|
|
|
@@ -9,7 +10,8 @@ const [value, setValue] = React.useState();
|
|
|
9
10
|
/>;
|
|
10
11
|
```
|
|
11
12
|
|
|
12
|
-
|
|
13
|
+
### items в виде объектов
|
|
14
|
+
Случай, когда `items` принимает объект типа `{ label: string, value: string }`
|
|
13
15
|
|
|
14
16
|
```jsx harmony
|
|
15
17
|
const [value, setValue] = React.useState();
|
|
@@ -36,7 +38,8 @@ const items = [
|
|
|
36
38
|
/>;
|
|
37
39
|
```
|
|
38
40
|
|
|
39
|
-
|
|
41
|
+
### Кастомизация кнопки
|
|
42
|
+
Вариант `items` с полем `buttonProps`, который позволяет кастомизировать кнопку
|
|
40
43
|
|
|
41
44
|
```jsx harmony
|
|
42
45
|
const [value, setValue] = React.useState();
|
|
@@ -75,6 +78,7 @@ const items = [
|
|
|
75
78
|
/>;
|
|
76
79
|
```
|
|
77
80
|
|
|
81
|
+
### Кастомизация items
|
|
78
82
|
Пример с методом `renderItem` для кастомизации `items`:
|
|
79
83
|
|
|
80
84
|
```jsx harmony
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import * as SwitcherStories from './Switcher.docs.stories.tsx';
|
|
2
|
+
import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
|
|
3
|
+
import { Meta } from '../../../.storybook/Meta';
|
|
4
|
+
|
|
5
|
+
<Meta of={SwitcherStories} />
|
|
6
|
+
|
|
7
|
+
# Switcher
|
|
8
|
+
|
|
9
|
+
[Компонент в Контур.Гайдах](https://guides.kontur.ru/components/selection-elements/switcher/)
|
|
10
|
+
|
|
11
|
+
[Компонент в Figma](https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=281%3A17973)
|
|
12
|
+
|
|
13
|
+
<Description />
|
|
14
|
+
|
|
15
|
+
## Базовый пример
|
|
16
|
+
|
|
17
|
+
<Primary />
|
|
18
|
+
|
|
19
|
+
## Пропы
|
|
20
|
+
|
|
21
|
+
<details>
|
|
22
|
+
<summary>Открыть таблицу с пропами</summary>
|
|
23
|
+
<ArgTypes />
|
|
24
|
+
</details>
|
|
25
|
+
|
|
26
|
+
## Примеры использования
|
|
27
|
+
|
|
28
|
+
<Stories title="" includePrimary={false} />
|