@skbkontur/react-ui 5.0.12 → 5.1.0-next.1
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/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 +67 -86
- package/cjs/components/ComboBox/ComboBox.js +12 -28
- 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 +21 -29
- package/cjs/components/DateInput/DateInput.js +14 -2
- 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 +33 -23
- package/cjs/components/DatePicker/DatePicker.js +53 -4
- 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 +17 -0
- package/cjs/components/MiniModal/__docs__/MiniModalFooter.mdx +17 -0
- package/cjs/components/MiniModal/__docs__/MiniModalHeader.mdx +18 -0
- package/cjs/components/MiniModal/__docs__/MiniModalIndent.mdx +11 -0
- package/cjs/components/MiniModal/getMiniModalTheme.d.ts +1 -1
- 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/Modal.styles.d.ts +4 -1
- package/cjs/components/Modal/Modal.styles.js +68 -31
- package/cjs/components/Modal/Modal.styles.js.map +1 -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/ModalClose.js +7 -2
- package/cjs/components/Modal/ModalClose.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/__creevey__/Modal.creevey.mts +15 -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/__docs__/Paging.mdx +28 -0
- package/cjs/components/Paging/locale/types.js +1 -1
- package/cjs/components/PasswordInput/PasswordInput.d.ts +10 -3
- package/cjs/components/PasswordInput/PasswordInput.js +35 -9
- 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 +17 -38
- package/cjs/components/SidePage/SidePage.js +15 -28
- package/cjs/components/SidePage/SidePage.js.map +1 -1
- package/cjs/components/SidePage/SidePage.md +2 -1
- package/cjs/components/SidePage/SidePage.styles.d.ts +8 -1
- package/cjs/components/SidePage/SidePage.styles.js +83 -26
- package/cjs/components/SidePage/SidePage.styles.js.map +1 -1
- package/cjs/components/SidePage/SidePageCloseButton.d.ts +6 -1
- package/cjs/components/SidePage/SidePageCloseButton.js +14 -2
- package/cjs/components/SidePage/SidePageCloseButton.js.map +1 -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 -1
- package/cjs/components/SidePage/SidePageHeader.js +14 -7
- package/cjs/components/SidePage/SidePageHeader.js.map +1 -1
- package/cjs/components/SidePage/__creevey__/SidePage.creevey.mts +103 -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 +14 -3
- package/cjs/components/Switcher/Switcher.js.map +1 -1
- package/cjs/components/Switcher/Switcher.md +6 -2
- package/cjs/components/Switcher/Switcher.styles.d.ts +1 -0
- package/cjs/components/Switcher/Switcher.styles.js +20 -1
- package/cjs/components/Switcher/Switcher.styles.js.map +1 -1
- 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 +12 -9
- package/cjs/components/Toast/Toast.js +13 -5
- package/cjs/components/Toast/Toast.js.map +1 -1
- package/cjs/components/Toast/Toast.md +4 -4
- package/cjs/components/Toast/ToastStatic.d.ts +2 -2
- package/cjs/components/Toast/ToastStatic.js +15 -5
- package/cjs/components/Toast/ToastStatic.js.map +1 -1
- package/cjs/components/Toast/ToastView.d.ts +3 -6
- package/cjs/components/Toast/ToastView.js +3 -5
- package/cjs/components/Toast/ToastView.js.map +1 -1
- package/cjs/components/Toast/ToastView.styles.js +4 -4
- package/cjs/components/Toast/ToastView.styles.js.map +1 -1
- package/cjs/components/Toast/__creevey__/Toast.creevey.mts +23 -0
- 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 -2
- package/cjs/index.js +1 -2
- package/cjs/index.js.map +1 -1
- package/cjs/internal/CommonWrapper/types.js +1 -1
- package/cjs/internal/CustomComboBox/CustomComboBox.d.ts +4 -1
- package/cjs/internal/CustomComboBox/CustomComboBox.js +12 -2
- package/cjs/internal/CustomComboBox/CustomComboBox.js.map +1 -1
- package/cjs/internal/CustomComboBox/CustomComboBoxReducer.d.ts +1 -0
- package/cjs/internal/CustomComboBox/CustomComboBoxReducer.js +1 -1
- package/cjs/internal/CustomComboBox/CustomComboBoxReducer.js.map +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/InputLikeText/InputLikeText.js +12 -11
- package/cjs/internal/InputLikeText/InputLikeText.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/__creevey__/Theme5_0.creevey.mts +36 -0
- package/cjs/internal/ThemePlayground/__creevey__/Theme5_0.stories.d.ts +4 -0
- package/cjs/internal/ThemePlayground/constants.js +1 -1
- package/cjs/internal/ThemePlayground/constants.js.map +1 -1
- package/cjs/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
- package/cjs/internal/ThemeShowcase/VariablesCollector.js +0 -1
- package/cjs/internal/ThemeShowcase/VariablesCollector.js.map +1 -1
- package/cjs/internal/themes/BasicLightTheme.d.ts +5 -1198
- package/cjs/internal/themes/BasicLightTheme.js +2 -2512
- package/cjs/internal/themes/BasicLightTheme.js.map +1 -1
- package/cjs/internal/themes/BasicTheme.d.ts +1217 -0
- package/cjs/internal/themes/BasicTheme.js +2536 -0
- package/cjs/internal/themes/BasicTheme.js.map +1 -0
- package/cjs/internal/themes/DarkTheme5_0.d.ts +1 -0
- package/cjs/internal/themes/DarkTheme5_0.js +556 -0
- package/cjs/internal/themes/DarkTheme5_0.js.map +1 -0
- package/cjs/internal/themes/DarkTheme5_1.d.ts +1 -0
- package/cjs/internal/themes/DarkTheme5_1.js +41 -0
- package/cjs/internal/themes/DarkTheme5_1.js.map +1 -0
- package/cjs/internal/themes/LightTheme5_0.d.ts +1 -0
- package/cjs/internal/themes/LightTheme5_0.js +9 -0
- package/cjs/internal/themes/LightTheme5_0.js.map +1 -0
- package/cjs/internal/themes/LightTheme5_1.d.ts +1 -0
- package/cjs/internal/themes/LightTheme5_1.js +41 -0
- package/cjs/internal/themes/LightTheme5_1.js.map +1 -0
- package/cjs/lib/ModalStack.d.ts +1 -0
- package/cjs/lib/ModalStack.js +6 -4
- package/cjs/lib/ModalStack.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.d.ts +4 -3
- package/cjs/lib/theming/Theme.js +1 -1
- package/cjs/lib/theming/Theme.js.map +1 -1
- package/cjs/lib/theming/ThemeContext.d.ts +1 -1
- package/cjs/lib/theming/ThemeContext.js +2 -2
- package/cjs/lib/theming/ThemeContext.js.map +1 -1
- package/cjs/lib/theming/ThemeFactory.d.ts +9 -0
- package/cjs/lib/theming/ThemeFactory.js +28 -9
- package/cjs/lib/theming/ThemeFactory.js.map +1 -1
- package/cjs/lib/theming/ThemeHelpers.d.ts +55 -8
- package/cjs/lib/theming/ThemeHelpers.js +94 -22
- package/cjs/lib/theming/ThemeHelpers.js.map +1 -1
- package/cjs/lib/theming/ThemeVersions.d.ts +25 -0
- package/cjs/lib/theming/ThemeVersions.js +58 -0
- package/cjs/lib/theming/ThemeVersions.js.map +1 -0
- package/cjs/lib/theming/themes/DarkTheme.d.ts +3 -1
- package/cjs/lib/theming/themes/DarkTheme.js +6 -4
- package/cjs/lib/theming/themes/DarkTheme.js.map +1 -1
- package/cjs/lib/theming/themes/LightTheme.d.ts +3 -1
- package/cjs/lib/theming/themes/LightTheme.js +6 -4
- package/cjs/lib/theming/themes/LightTheme.js.map +1 -1
- package/cjs/lib/theming/themes/LightThemeMobile.d.ts +1 -1
- package/cjs/lib/theming/useTheme.d.ts +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 +13 -2
- package/components/ComboBox/ComboBox/ComboBox.js.map +1 -1
- package/components/ComboBox/ComboBox.d.ts +67 -86
- 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 +8 -1
- package/components/DateInput/DateInput/DateInput.js.map +1 -1
- package/components/DateInput/DateInput.d.ts +21 -29
- 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 +33 -5
- package/components/DatePicker/DatePicker/DatePicker.js.map +1 -1
- package/components/DatePicker/DatePicker.d.ts +33 -23
- 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 +17 -0
- package/components/MiniModal/__docs__/MiniModalFooter.mdx +17 -0
- package/components/MiniModal/__docs__/MiniModalHeader.mdx +18 -0
- package/components/MiniModal/__docs__/MiniModalIndent.mdx +11 -0
- package/components/MiniModal/getMiniModalTheme.d.ts +1 -1
- 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/Modal.styles/Modal.styles.js +40 -31
- package/components/Modal/Modal.styles/Modal.styles.js.map +1 -1
- package/components/Modal/Modal.styles.d.ts +4 -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/ModalClose/ModalClose.js +3 -1
- package/components/Modal/ModalClose/ModalClose.js.map +1 -1
- 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/__creevey__/Modal.creevey.mts +15 -1
- 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/__docs__/Paging.mdx +28 -0
- package/components/Paging/locale/types/types.js +0 -1
- package/components/PasswordInput/PasswordInput/PasswordInput.js +32 -10
- package/components/PasswordInput/PasswordInput/PasswordInput.js.map +1 -1
- package/components/PasswordInput/PasswordInput.d.ts +10 -3
- 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 +28 -16
- package/components/SidePage/SidePage/SidePage.js.map +1 -1
- package/components/SidePage/SidePage.d.ts +17 -38
- package/components/SidePage/SidePage.md +2 -1
- package/components/SidePage/SidePage.styles/SidePage.styles.js +48 -26
- package/components/SidePage/SidePage.styles/SidePage.styles.js.map +1 -1
- package/components/SidePage/SidePage.styles.d.ts +8 -1
- package/components/SidePage/SidePageCloseButton/SidePageCloseButton.js +6 -2
- package/components/SidePage/SidePageCloseButton/SidePageCloseButton.js.map +1 -1
- package/components/SidePage/SidePageCloseButton.d.ts +6 -1
- package/components/SidePage/SidePageFooter/SidePageFooter.js.map +1 -1
- package/components/SidePage/SidePageFooter.d.ts +4 -9
- package/components/SidePage/SidePageHeader/SidePageHeader.js +13 -5
- package/components/SidePage/SidePageHeader/SidePageHeader.js.map +1 -1
- package/components/SidePage/SidePageHeader.d.ts +2 -1
- package/components/SidePage/__creevey__/SidePage.creevey.mts +103 -1
- 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 +16 -6
- 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/Switcher.styles/Switcher.styles.js +4 -1
- package/components/Switcher/Switcher.styles/Switcher.styles.js.map +1 -1
- package/components/Switcher/Switcher.styles.d.ts +1 -0
- 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 +17 -12
- package/components/Toast/Toast/Toast.js.map +1 -1
- package/components/Toast/Toast.d.ts +12 -9
- package/components/Toast/Toast.md +4 -4
- package/components/Toast/ToastStatic/ToastStatic.js +5 -5
- package/components/Toast/ToastStatic/ToastStatic.js.map +1 -1
- package/components/Toast/ToastStatic.d.ts +2 -2
- package/components/Toast/ToastView/ToastView.js +2 -1
- package/components/Toast/ToastView/ToastView.js.map +1 -1
- package/components/Toast/ToastView.d.ts +3 -6
- package/components/Toast/ToastView.styles/ToastView.styles.js +2 -2
- package/components/Toast/ToastView.styles/ToastView.styles.js.map +1 -1
- package/components/Toast/__creevey__/Toast.creevey.mts +23 -0
- 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 -2
- package/index.js +1 -2
- 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/CustomComboBox/CustomComboBox.js +10 -2
- package/internal/CustomComboBox/CustomComboBox/CustomComboBox.js.map +1 -1
- package/internal/CustomComboBox/CustomComboBox.d.ts +4 -1
- package/internal/CustomComboBox/CustomComboBoxReducer/CustomComboBoxReducer.js +1 -1
- package/internal/CustomComboBox/CustomComboBoxReducer/CustomComboBoxReducer.js.map +1 -1
- package/internal/CustomComboBox/CustomComboBoxReducer.d.ts +1 -0
- 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/InputLikeText/InputLikeText/InputLikeText.js +12 -6
- package/internal/InputLikeText/InputLikeText/InputLikeText.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/__creevey__/Theme5_0.creevey.d.mts +1 -0
- package/internal/ThemePlayground/__creevey__/Theme5_0.creevey.mts +36 -0
- package/internal/ThemePlayground/__creevey__/Theme5_0.stories.d.ts +4 -0
- 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/ThemeShowcase/VariablesCollector.d.ts +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 +5 -3338
- package/internal/themes/BasicLightTheme/BasicLightTheme.js.map +1 -1
- package/internal/themes/BasicLightTheme.d.ts +5 -1198
- package/internal/themes/BasicTheme/BasicTheme.js +3360 -0
- package/internal/themes/BasicTheme/BasicTheme.js.map +1 -0
- package/internal/themes/BasicTheme/package.json +6 -0
- package/internal/themes/BasicTheme.d.ts +1217 -0
- package/internal/themes/DarkTheme5_0/DarkTheme5_0.js +409 -0
- package/internal/themes/DarkTheme5_0/DarkTheme5_0.js.map +1 -0
- package/internal/themes/DarkTheme5_0/package.json +6 -0
- package/internal/themes/DarkTheme5_0.d.ts +1 -0
- package/internal/themes/DarkTheme5_1/DarkTheme5_1.js +52 -0
- package/internal/themes/DarkTheme5_1/DarkTheme5_1.js.map +1 -0
- package/internal/themes/DarkTheme5_1/package.json +6 -0
- package/internal/themes/DarkTheme5_1.d.ts +1 -0
- package/internal/themes/LightTheme5_0/LightTheme5_0.js +14 -0
- package/internal/themes/LightTheme5_0/LightTheme5_0.js.map +1 -0
- package/internal/themes/LightTheme5_0/package.json +6 -0
- package/internal/themes/LightTheme5_0.d.ts +1 -0
- package/internal/themes/LightTheme5_1/LightTheme5_1.js +52 -0
- package/internal/themes/LightTheme5_1/LightTheme5_1.js.map +1 -0
- package/internal/themes/LightTheme5_1/package.json +6 -0
- package/internal/themes/LightTheme5_1.d.ts +1 -0
- package/lib/ModalStack/ModalStack.js +8 -8
- package/lib/ModalStack/ModalStack.js.map +1 -1
- package/lib/ModalStack.d.ts +1 -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 +2 -1
- package/lib/theming/Theme/Theme.js.map +1 -1
- package/lib/theming/Theme.d.ts +4 -3
- package/lib/theming/ThemeContext/ThemeContext.js +2 -2
- package/lib/theming/ThemeContext/ThemeContext.js.map +1 -1
- package/lib/theming/ThemeContext.d.ts +1 -1
- package/lib/theming/ThemeFactory/ThemeFactory.js +21 -7
- package/lib/theming/ThemeFactory/ThemeFactory.js.map +1 -1
- package/lib/theming/ThemeFactory.d.ts +9 -0
- package/lib/theming/ThemeHelpers/ThemeHelpers.js +85 -18
- package/lib/theming/ThemeHelpers/ThemeHelpers.js.map +1 -1
- package/lib/theming/ThemeHelpers.d.ts +55 -8
- package/lib/theming/ThemeVersions/ThemeVersions.js +50 -0
- package/lib/theming/ThemeVersions/ThemeVersions.js.map +1 -0
- package/lib/theming/ThemeVersions/package.json +6 -0
- package/lib/theming/ThemeVersions.d.ts +25 -0
- package/lib/theming/themes/DarkTheme/DarkTheme.js +5 -4
- package/lib/theming/themes/DarkTheme/DarkTheme.js.map +1 -1
- package/lib/theming/themes/DarkTheme.d.ts +3 -1
- package/lib/theming/themes/LightTheme/LightTheme.js +5 -4
- package/lib/theming/themes/LightTheme/LightTheme.js.map +1 -1
- package/lib/theming/themes/LightTheme.d.ts +3 -1
- package/lib/theming/themes/LightThemeMobile.d.ts +1 -1
- package/lib/theming/useTheme.d.ts +1 -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/internal/themes/BasicDarkTheme.d.ts +0 -289
- package/cjs/internal/themes/BasicDarkTheme.js +0 -597
- package/cjs/internal/themes/BasicDarkTheme.js.map +0 -1
- package/cjs/lib/theming/themes/DarkTheme2022_0.d.ts +0 -1
- package/cjs/lib/theming/themes/DarkTheme2022_0.js +0 -5
- package/cjs/lib/theming/themes/DarkTheme2022_0.js.map +0 -1
- package/cjs/lib/theming/themes/LightTheme2022_0.d.ts +0 -1
- package/cjs/lib/theming/themes/LightTheme2022_0.js +0 -5
- package/cjs/lib/theming/themes/LightTheme2022_0.js.map +0 -1
- package/internal/themes/BasicDarkTheme/BasicDarkTheme.js +0 -641
- package/internal/themes/BasicDarkTheme/BasicDarkTheme.js.map +0 -1
- package/internal/themes/BasicDarkTheme/package.json +0 -6
- package/internal/themes/BasicDarkTheme.d.ts +0 -289
- package/lib/theming/themes/DarkTheme2022_0/DarkTheme2022_0.js +0 -3
- package/lib/theming/themes/DarkTheme2022_0/DarkTheme2022_0.js.map +0 -1
- package/lib/theming/themes/DarkTheme2022_0/package.json +0 -6
- package/lib/theming/themes/DarkTheme2022_0.d.ts +0 -1
- package/lib/theming/themes/LightTheme2022_0/LightTheme2022_0.js +0 -3
- package/lib/theming/themes/LightTheme2022_0/LightTheme2022_0.js.map +0 -1
- package/lib/theming/themes/LightTheme2022_0/package.json +0 -6
- package/lib/theming/themes/LightTheme2022_0.d.ts +0 -1
|
@@ -6,45 +6,43 @@ import { CalendarDateShape, CalendarProps } from '../Calendar';
|
|
|
6
6
|
import { SizeProp } from '../../lib/types/props';
|
|
7
7
|
export declare const MIN_WIDTH = 120;
|
|
8
8
|
export interface DatePickerProps extends Pick<CalendarProps, 'isHoliday' | 'minDate' | 'maxDate' | 'renderDay' | 'onMonthChange'>, Pick<HTMLAttributes<HTMLElement>, 'id'>, CommonProps {
|
|
9
|
+
/** Устанавливает фокус на контроле после окончания загрузки страницы. */
|
|
9
10
|
autoFocus?: boolean;
|
|
11
|
+
/** Делает компонент недоступным. */
|
|
10
12
|
disabled?: boolean;
|
|
11
|
-
/**
|
|
12
|
-
* Отвечает за отображение кнопки "Сегодня".
|
|
13
|
-
*/
|
|
13
|
+
/** Отображает кнопку "Сегодня" в календаре. */
|
|
14
14
|
enableTodayLink?: boolean;
|
|
15
|
-
/**
|
|
16
|
-
* Состояние валидации при ошибке.
|
|
17
|
-
*/
|
|
15
|
+
/** Переводит контрол в состояние валидации "ошибка". */
|
|
18
16
|
error?: boolean;
|
|
19
|
-
/**
|
|
20
|
-
* Позволяет вручную задать текущую позицию выпадающего окна
|
|
21
|
-
*/
|
|
17
|
+
/** Задает nекущую позицию выпадающего окна вручную. */
|
|
22
18
|
menuPos?: 'top' | 'bottom';
|
|
19
|
+
/** Задает выравнивание меню. */
|
|
23
20
|
menuAlign?: 'left' | 'right';
|
|
21
|
+
/** Задает размер контрола. */
|
|
24
22
|
size?: SizeProp;
|
|
23
|
+
/** Задает значение автокомплита. */
|
|
25
24
|
value?: string | null;
|
|
26
|
-
/**
|
|
27
|
-
* Состояние валидации при предупреждении.
|
|
28
|
-
*/
|
|
25
|
+
/** Переводит контрол в состояние валидации "предупреждение". */
|
|
29
26
|
warning?: boolean;
|
|
27
|
+
/** Задает ширину автокомплита. */
|
|
30
28
|
width?: number | string;
|
|
29
|
+
/** Задает функцию, которая вызывается при потере датапикером фокуса. */
|
|
31
30
|
onBlur?: () => void;
|
|
32
|
-
/**
|
|
33
|
-
*
|
|
34
|
-
*
|
|
35
|
-
* @param value - строка в формате `dd.mm.yyyy`.
|
|
36
|
-
*/
|
|
31
|
+
/** Задает функцию, вызывающуюся при изменении value.
|
|
32
|
+
* @param value - строка в формате `dd.mm.yyyy`. */
|
|
37
33
|
onValueChange: (value: string) => void;
|
|
34
|
+
/** Задает функцию, которая вызывается при получении датапикером фокуса. */
|
|
38
35
|
onFocus?: () => void;
|
|
36
|
+
/** Задает функцию, которая вызывается при нажатии кнопки на клавиатуре. */
|
|
39
37
|
onKeyDown?: (e: React.KeyboardEvent<any>) => void;
|
|
38
|
+
/** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseenter`). См разницу с onMouseOver в [документации](https://learn.javascript.ru/mousemove-mouseover-mouseout-mouseenter-mouseleave) */
|
|
40
39
|
onMouseEnter?: (e: React.MouseEvent<any>) => void;
|
|
40
|
+
/** Задает функцию, которая вызывается при уходе мышки с объекта (событие `onmouseleave`). */
|
|
41
41
|
onMouseLeave?: (e: React.MouseEvent<any>) => void;
|
|
42
|
+
/** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseover`). */
|
|
42
43
|
onMouseOver?: (e: React.MouseEvent<any>) => void;
|
|
43
|
-
/**
|
|
44
|
-
*
|
|
45
|
-
*
|
|
46
|
-
* - На iOS нативный календарь не умеет работать с minDate и maxDate
|
|
47
|
-
*/
|
|
44
|
+
/** Позволяет использовать на мобильных устройствах нативный календарь для выбора дат.
|
|
45
|
+
* На iOS нативный календарь не умеет работать с minDate и maxDate. */
|
|
48
46
|
useMobileNativeDatePicker?: boolean;
|
|
49
47
|
}
|
|
50
48
|
export interface DatePickerState {
|
|
@@ -60,6 +58,13 @@ export declare const DatePickerDataTids: {
|
|
|
60
58
|
readonly pickerTodayWrapper: "Picker__todayWrapper";
|
|
61
59
|
};
|
|
62
60
|
type DefaultProps = Required<Pick<DatePickerProps, 'minDate' | 'maxDate'>>;
|
|
61
|
+
/**
|
|
62
|
+
* Поле `DatePicker` помогает вводить дату с клавиатуры или выбирать ее с помощью мыши.
|
|
63
|
+
*
|
|
64
|
+
* Используйте поле с датой, когда нужно ввести дату в формате ДД.ММ.ГГГГ.
|
|
65
|
+
*
|
|
66
|
+
* Поле с датой отличается от обычного поля ввода наличием иконки, маски и блока календаря.
|
|
67
|
+
*/
|
|
63
68
|
export declare class DatePicker extends React.PureComponent<DatePickerProps, DatePickerState> {
|
|
64
69
|
static __KONTUR_REACT_UI__: string;
|
|
65
70
|
static displayName: string;
|
|
@@ -102,6 +107,7 @@ export declare class DatePicker extends React.PureComponent<DatePickerProps, Dat
|
|
|
102
107
|
private getProps;
|
|
103
108
|
private theme;
|
|
104
109
|
private readonly locale;
|
|
110
|
+
private canOpenPopup;
|
|
105
111
|
static validate: (value: Nullable<string>, range?: {
|
|
106
112
|
minDate?: string | undefined;
|
|
107
113
|
maxDate?: string | undefined;
|
|
@@ -120,7 +126,9 @@ export declare class DatePicker extends React.PureComponent<DatePickerProps, Dat
|
|
|
120
126
|
/**
|
|
121
127
|
* @public
|
|
122
128
|
*/
|
|
123
|
-
focus(
|
|
129
|
+
focus(opts?: {
|
|
130
|
+
withoutOpenDropdown?: boolean;
|
|
131
|
+
}): void;
|
|
124
132
|
/**
|
|
125
133
|
* Закрывает выпадашку выбора дня
|
|
126
134
|
* @public
|
|
@@ -133,7 +141,9 @@ export declare class DatePicker extends React.PureComponent<DatePickerProps, Dat
|
|
|
133
141
|
getParent: () => Nullable<Element>;
|
|
134
142
|
private getRootStyle;
|
|
135
143
|
private getInputRef;
|
|
144
|
+
private openPickerPopup;
|
|
136
145
|
private handleFocus;
|
|
146
|
+
private handleKeyDown;
|
|
137
147
|
private handleBlur;
|
|
138
148
|
private handleValueChange;
|
|
139
149
|
private handleSelect;
|
|
@@ -223,6 +223,7 @@ import { DateOrder, DateSeparator, Gapped, LocaleContext, Select, LangCodes } fr
|
|
|
223
223
|
|
|
224
224
|
class DatePickerFormatting extends React.Component {
|
|
225
225
|
constructor() {
|
|
226
|
+
super();
|
|
226
227
|
this.state = {
|
|
227
228
|
order: DateOrder.YMD,
|
|
228
229
|
separator: 'Dot',
|
|
@@ -289,11 +290,10 @@ const renderDay = (props) => {
|
|
|
289
290
|
if (isEven) {
|
|
290
291
|
return <CalendarDay {...props} style={{ background: '#e9f8e3' }} />
|
|
291
292
|
}
|
|
292
|
-
|
|
293
|
+
|
|
293
294
|
return <CalendarDay {...props} />
|
|
294
295
|
};
|
|
295
296
|
|
|
296
|
-
|
|
297
297
|
<DatePicker value={value} onValueChange={setValue} renderDay={renderDay} />;
|
|
298
298
|
```
|
|
299
299
|
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import * as DatePickerStories from './DatePicker.docs.stories.tsx';
|
|
2
|
+
import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
|
|
3
|
+
import { Meta } from '../../../.storybook/Meta';
|
|
4
|
+
|
|
5
|
+
<Meta of={DatePickerStories} />
|
|
6
|
+
|
|
7
|
+
# DatePicker
|
|
8
|
+
|
|
9
|
+
[Компонент в Контур.Гайдах](https://guides.kontur.ru/components/input-fields/calendar/)
|
|
10
|
+
|
|
11
|
+
[Компонент в Figma](https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=281%3A18389)
|
|
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} />
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -41,8 +41,14 @@ export var DropdownDataTids = {
|
|
|
41
41
|
};
|
|
42
42
|
|
|
43
43
|
/**
|
|
44
|
-
* Выпадающее
|
|
44
|
+
* Выпадающее меню `Dropdown`. Содержит несколько команд, объединенных по смыслу.
|
|
45
45
|
*
|
|
46
|
+
* Используйте кнопку-меню:
|
|
47
|
+
* * когда не хватает места для нескольких кнопок.
|
|
48
|
+
* * когда названия действий очень длинные.
|
|
49
|
+
* * когда действия редко используются или объединены по смыслу.
|
|
50
|
+
*
|
|
51
|
+
* Не используйте `Dropdown` для выбора значения из набора вариантов. В таком случае воспользуйтесь компонентом Select.
|
|
46
52
|
*/
|
|
47
53
|
export var Dropdown = rootNode(_class = (_Dropdown = /*#__PURE__*/function (_React$Component) {
|
|
48
54
|
function Dropdown() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","PropTypes","filterProps","MenuHeader","MenuItem","MenuSeparator","Select","CommonWrapper","rootNode","ThemeContext","getDropdownTheme","PASS_PROPS","_renderButton","error","disabled","disablePortal","menuAlign","menuWidth","maxMenuHeight","use","size","warning","width","onOpen","onClose","onMouseEnter","onMouseLeave","onMouseOver","menuPos","id","DropdownDataTids","root","Dropdown","_class","_Dropdown","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","renderMain","_this$props","props","caption","icon","rest","_objectWithoutPropertiesLoose","_excluded","items","Children","map","children","item","createElement","_extends","rootNodeRef","setRootNode","ref","_refSelect","value","_icon","renderValue","element","_select","_inheritsLoose","_proto","prototype","render","_this2","Consumer","theme","Provider","open","close","Component","__KONTUR_REACT_UI__","displayName","Header","Separator","propTypes","node","isRequired","bool","number","oneOf","oneOfType","string","any","func"],"sources":["Dropdown.tsx"],"sourcesContent":["import React, { AriaAttributes, HTMLAttributes } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { filterProps } from '../../lib/filterProps';\nimport { MenuHeader } from '../MenuHeader';\nimport { MenuItem } from '../MenuItem';\nimport { MenuSeparator } from '../MenuSeparator';\nimport { Select } from '../Select';\nimport { Nullable } from '../../typings/utility-types';\nimport { ButtonUse } from '../Button';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { getDropdownTheme } from './getDropdownTheme';\n\nconst PASS_PROPS = {\n _renderButton: true,\n error: true,\n disabled: true,\n disablePortal: true,\n menuAlign: true,\n menuWidth: true,\n maxMenuHeight: true,\n use: true,\n size: true,\n warning: true,\n width: true,\n onOpen: true,\n onClose: true,\n onMouseEnter: true,\n onMouseLeave: true,\n onMouseOver: true,\n menuPos: true,\n id: true,\n 'aria-describedby': true,\n 'aria-label': true,\n};\n\nexport interface DropdownProps\n extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>,\n Pick<HTMLAttributes<HTMLElement>, 'id'>,\n CommonProps {\n /**\n * Подпись на кнопке.\n */\n caption: React.ReactNode;\n /**\n * Иконка слева от текста кнопки\n */\n icon?: React.ReactElement<any>;\n width?: React.CSSProperties['width'];\n\n /** @ignore */\n _renderButton?: (params: any) => JSX.Element;\n\n /**\n * Отключает использование портала\n */\n disablePortal?: boolean;\n\n /**\n * Визуально отключает Dropdown\n */\n disabled?: boolean;\n\n /**\n * Состояние валидации при ошибке.\n */\n error?: boolean;\n /**\n * Состояние валидации при предупреждении.\n */\n warning?: boolean;\n maxMenuHeight?: number;\n /**\n * Позволяет вручную задать текущую позицию выпадающего окна\n */\n menuPos?: 'top' | 'bottom';\n menuAlign?: 'left' | 'right';\n menuWidth?: number | string;\n size?: SizeProp;\n\n /**\n * Смотри Button.\n */\n use?: ButtonUse;\n\n /**\n * Вызывается при закрытии меню.\n */\n onClose?: () => void;\n /**\n * Вызывается при открытии меню.\n */\n onOpen?: () => void;\n onMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void;\n onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void;\n onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;\n}\n\ntype DropdownSelectType = Select<React.ReactNode, React.ReactNode>;\n\nexport const DropdownDataTids = {\n root: 'Dropdown__root',\n} as const;\n\n/**\n * Выпадающее меню.\n *\n */\n@rootNode\nexport class Dropdown extends React.Component<DropdownProps> {\n public static __KONTUR_REACT_UI__ = 'Dropdown';\n public static displayName = 'Dropdown';\n\n public static Header = MenuHeader;\n public static MenuItem = MenuItem;\n public static Separator = MenuSeparator;\n\n public static propTypes = {\n /**\n * Подпись на кнопке.\n */\n caption: PropTypes.node.isRequired,\n\n /**\n * Отключает использование портала\n */\n disablePortal: PropTypes.bool,\n\n /**\n * Визуально отключает Dropdown\n */\n disabled: PropTypes.bool,\n\n /**\n * Визуально показать наличие ошибки.\n */\n error: PropTypes.bool,\n\n /**\n * Иконка слева от текста кнопки\n */\n icon: PropTypes.node,\n\n maxMenuHeight: PropTypes.number,\n\n menuAlign: PropTypes.oneOf(['left', 'right']),\n\n menuWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n\n size: PropTypes.oneOf(['small', 'medium', 'large']),\n\n /**\n * Смотри Button.\n */\n use: PropTypes.any,\n\n /**\n * Визуально показать наличие предупреждения.\n */\n warning: PropTypes.bool,\n\n width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n\n /**\n * Вызывается при закрытии меню.\n */\n onClose: PropTypes.func,\n\n onMouseEnter: PropTypes.func,\n\n onMouseLeave: PropTypes.func,\n\n onMouseOver: PropTypes.func,\n\n /**\n * Вызывается при открытии меню.\n */\n onOpen: PropTypes.func,\n };\n\n private _select: Nullable<DropdownSelectType>;\n private setRootNode!: TSetRootNode;\n private theme!: Theme;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = getDropdownTheme(theme);\n return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public renderMain = () => {\n const { caption, icon, ...rest } = this.props;\n const items = React.Children.map(this.props.children, (item) => item) || [];\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...rest}>\n <Select<React.ReactNode, React.ReactNode>\n data-tid={DropdownDataTids.root}\n ref={this._refSelect}\n {...filterProps(rest, PASS_PROPS)}\n value={caption}\n items={items}\n _icon={icon}\n renderValue={renderValue}\n />\n </CommonWrapper>\n );\n };\n\n /**\n * @public\n */\n public open() {\n if (this._select) {\n this._select.open();\n }\n }\n\n /**\n * @public\n */\n public close() {\n if (this._select) {\n this._select.close();\n }\n }\n\n private _refSelect = (element: DropdownSelectType): void => {\n this._select = element;\n };\n}\n\nfunction renderValue(value: any) {\n return value;\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["React","PropTypes","filterProps","MenuHeader","MenuItem","MenuSeparator","Select","CommonWrapper","rootNode","ThemeContext","getDropdownTheme","PASS_PROPS","_renderButton","error","disabled","disablePortal","menuAlign","menuWidth","maxMenuHeight","use","size","warning","width","onOpen","onClose","onMouseEnter","onMouseLeave","onMouseOver","menuPos","id","DropdownDataTids","root","Dropdown","_class","_Dropdown","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","renderMain","_this$props","props","caption","icon","rest","_objectWithoutPropertiesLoose","_excluded","items","Children","map","children","item","createElement","_extends","rootNodeRef","setRootNode","ref","_refSelect","value","_icon","renderValue","element","_select","_inheritsLoose","_proto","prototype","render","_this2","Consumer","theme","Provider","open","close","Component","__KONTUR_REACT_UI__","displayName","Header","Separator","propTypes","node","isRequired","bool","number","oneOf","oneOfType","string","any","func"],"sources":["Dropdown.tsx"],"sourcesContent":["import React, { AriaAttributes, HTMLAttributes } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { filterProps } from '../../lib/filterProps';\nimport { MenuHeader } from '../MenuHeader';\nimport { MenuItem } from '../MenuItem';\nimport { MenuSeparator } from '../MenuSeparator';\nimport { Select } from '../Select';\nimport { Nullable } from '../../typings/utility-types';\nimport { ButtonUse } from '../Button';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { getDropdownTheme } from './getDropdownTheme';\n\nconst PASS_PROPS = {\n _renderButton: true,\n error: true,\n disabled: true,\n disablePortal: true,\n menuAlign: true,\n menuWidth: true,\n maxMenuHeight: true,\n use: true,\n size: true,\n warning: true,\n width: true,\n onOpen: true,\n onClose: true,\n onMouseEnter: true,\n onMouseLeave: true,\n onMouseOver: true,\n menuPos: true,\n id: true,\n 'aria-describedby': true,\n 'aria-label': true,\n};\n\nexport interface DropdownProps\n extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>,\n Pick<HTMLAttributes<HTMLElement>, 'id'>,\n CommonProps {\n /** Задает подпись на кнопке. */\n caption: React.ReactNode;\n\n /** Добавляет иконку слева от текста кнопки. */\n icon?: React.ReactElement<any>;\n\n /** Задает ширину выпадающего меню. */\n width?: React.CSSProperties['width'];\n\n /** @ignore */\n _renderButton?: (params: any) => JSX.Element;\n\n /** Отключает использование портала. */\n disablePortal?: boolean;\n\n /** Делает компонент недоступным.*/\n disabled?: boolean;\n\n /** Переводит контрол в состояние валидации \"ошибка\". */\n error?: boolean;\n\n /** Переводит контрол в состояние валидации \"предупреждение\". */\n warning?: boolean;\n\n /** Задает максимальную высоту меню. */\n maxMenuHeight?: number;\n\n /** Задает текущую позицию выпадающего окна вручную.\n */\n menuPos?: 'top' | 'bottom';\n\n /** Задает выравнивание выпадающего меню. */\n menuAlign?: 'left' | 'right';\n\n /** Задает длину меню. */\n menuWidth?: number | string;\n\n /** Задает размер контрола. */\n size?: SizeProp;\n\n /** Задаёт стиль кнопки. */\n use?: ButtonUse;\n\n /** Задает функцию, которая вызывается при закрытии меню. */\n onClose?: () => void;\n\n /** Задает функцию, которая вызывается при открытии меню. */\n onOpen?: () => void;\n\n /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseenter`). См разницу с onMouseOver в [документации](https://learn.javascript.ru/mousemove-mouseover-mouseout-mouseenter-mouseleave) */\n onMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void;\n\n /** Задает функцию, которая вызывается при уходе мышки с объекта (событие `onmouseleave`). */\n onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void;\n\n /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseover`). */\n onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;\n}\n\ntype DropdownSelectType = Select<React.ReactNode, React.ReactNode>;\n\nexport const DropdownDataTids = {\n root: 'Dropdown__root',\n} as const;\n\n/**\n * Выпадающее меню `Dropdown`. Содержит несколько команд, объединенных по смыслу.\n *\n * Используйте кнопку-меню:\n * * когда не хватает места для нескольких кнопок.\n * * когда названия действий очень длинные.\n * * когда действия редко используются или объединены по смыслу.\n *\n * Не используйте `Dropdown` для выбора значения из набора вариантов. В таком случае воспользуйтесь компонентом Select.\n */\n@rootNode\nexport class Dropdown extends React.Component<DropdownProps> {\n public static __KONTUR_REACT_UI__ = 'Dropdown';\n public static displayName = 'Dropdown';\n\n public static Header = MenuHeader;\n public static MenuItem = MenuItem;\n public static Separator = MenuSeparator;\n\n public static propTypes = {\n /**\n * Подпись на кнопке.\n */\n caption: PropTypes.node.isRequired,\n\n /**\n * Отключает использование портала\n */\n disablePortal: PropTypes.bool,\n\n /**\n * Визуально отключает Dropdown\n */\n disabled: PropTypes.bool,\n\n /**\n * Визуально показать наличие ошибки.\n */\n error: PropTypes.bool,\n\n /**\n * Иконка слева от текста кнопки\n */\n icon: PropTypes.node,\n\n maxMenuHeight: PropTypes.number,\n\n menuAlign: PropTypes.oneOf(['left', 'right']),\n\n menuWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n\n size: PropTypes.oneOf(['small', 'medium', 'large']),\n\n /**\n * Смотри Button.\n */\n use: PropTypes.any,\n\n /**\n * Визуально показать наличие предупреждения.\n */\n warning: PropTypes.bool,\n\n width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n\n /**\n * Вызывается при закрытии меню.\n */\n onClose: PropTypes.func,\n\n onMouseEnter: PropTypes.func,\n\n onMouseLeave: PropTypes.func,\n\n onMouseOver: PropTypes.func,\n\n /**\n * Вызывается при открытии меню.\n */\n onOpen: PropTypes.func,\n };\n\n private _select: Nullable<DropdownSelectType>;\n private setRootNode!: TSetRootNode;\n private theme!: Theme;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = getDropdownTheme(theme);\n return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public renderMain = () => {\n const { caption, icon, ...rest } = this.props;\n const items = React.Children.map(this.props.children, (item) => item) || [];\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...rest}>\n <Select<React.ReactNode, React.ReactNode>\n data-tid={DropdownDataTids.root}\n ref={this._refSelect}\n {...filterProps(rest, PASS_PROPS)}\n value={caption}\n items={items}\n _icon={icon}\n renderValue={renderValue}\n />\n </CommonWrapper>\n );\n };\n\n /**\n * @public\n */\n public open() {\n if (this._select) {\n this._select.open();\n }\n }\n\n /**\n * @public\n */\n public close() {\n if (this._select) {\n this._select.close();\n }\n }\n\n private _refSelect = (element: DropdownSelectType): void => {\n this._select = element;\n };\n}\n\nfunction renderValue(value: any) {\n return value;\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -7,63 +7,58 @@ import { ButtonUse } from '../Button';
|
|
|
7
7
|
import { CommonProps } from '../../internal/CommonWrapper';
|
|
8
8
|
import { SizeProp } from '../../lib/types/props';
|
|
9
9
|
export interface DropdownProps extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>, Pick<HTMLAttributes<HTMLElement>, 'id'>, CommonProps {
|
|
10
|
-
/**
|
|
11
|
-
* Подпись на кнопке.
|
|
12
|
-
*/
|
|
10
|
+
/** Задает подпись на кнопке. */
|
|
13
11
|
caption: React.ReactNode;
|
|
14
|
-
/**
|
|
15
|
-
* Иконка слева от текста кнопки
|
|
16
|
-
*/
|
|
12
|
+
/** Добавляет иконку слева от текста кнопки. */
|
|
17
13
|
icon?: React.ReactElement<any>;
|
|
14
|
+
/** Задает ширину выпадающего меню. */
|
|
18
15
|
width?: React.CSSProperties['width'];
|
|
19
16
|
/** @ignore */
|
|
20
17
|
_renderButton?: (params: any) => JSX.Element;
|
|
21
|
-
/**
|
|
22
|
-
* Отключает использование портала
|
|
23
|
-
*/
|
|
18
|
+
/** Отключает использование портала. */
|
|
24
19
|
disablePortal?: boolean;
|
|
25
|
-
/**
|
|
26
|
-
* Визуально отключает Dropdown
|
|
27
|
-
*/
|
|
20
|
+
/** Делает компонент недоступным.*/
|
|
28
21
|
disabled?: boolean;
|
|
29
|
-
/**
|
|
30
|
-
* Состояние валидации при ошибке.
|
|
31
|
-
*/
|
|
22
|
+
/** Переводит контрол в состояние валидации "ошибка". */
|
|
32
23
|
error?: boolean;
|
|
33
|
-
/**
|
|
34
|
-
* Состояние валидации при предупреждении.
|
|
35
|
-
*/
|
|
24
|
+
/** Переводит контрол в состояние валидации "предупреждение". */
|
|
36
25
|
warning?: boolean;
|
|
26
|
+
/** Задает максимальную высоту меню. */
|
|
37
27
|
maxMenuHeight?: number;
|
|
38
|
-
/**
|
|
39
|
-
* Позволяет вручную задать текущую позицию выпадающего окна
|
|
28
|
+
/** Задает текущую позицию выпадающего окна вручную.
|
|
40
29
|
*/
|
|
41
30
|
menuPos?: 'top' | 'bottom';
|
|
31
|
+
/** Задает выравнивание выпадающего меню. */
|
|
42
32
|
menuAlign?: 'left' | 'right';
|
|
33
|
+
/** Задает длину меню. */
|
|
43
34
|
menuWidth?: number | string;
|
|
35
|
+
/** Задает размер контрола. */
|
|
44
36
|
size?: SizeProp;
|
|
45
|
-
/**
|
|
46
|
-
* Смотри Button.
|
|
47
|
-
*/
|
|
37
|
+
/** Задаёт стиль кнопки. */
|
|
48
38
|
use?: ButtonUse;
|
|
49
|
-
/**
|
|
50
|
-
* Вызывается при закрытии меню.
|
|
51
|
-
*/
|
|
39
|
+
/** Задает функцию, которая вызывается при закрытии меню. */
|
|
52
40
|
onClose?: () => void;
|
|
53
|
-
/**
|
|
54
|
-
* Вызывается при открытии меню.
|
|
55
|
-
*/
|
|
41
|
+
/** Задает функцию, которая вызывается при открытии меню. */
|
|
56
42
|
onOpen?: () => void;
|
|
43
|
+
/** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseenter`). См разницу с onMouseOver в [документации](https://learn.javascript.ru/mousemove-mouseover-mouseout-mouseenter-mouseleave) */
|
|
57
44
|
onMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void;
|
|
45
|
+
/** Задает функцию, которая вызывается при уходе мышки с объекта (событие `onmouseleave`). */
|
|
58
46
|
onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void;
|
|
47
|
+
/** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseover`). */
|
|
59
48
|
onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;
|
|
60
49
|
}
|
|
61
50
|
export declare const DropdownDataTids: {
|
|
62
51
|
readonly root: "Dropdown__root";
|
|
63
52
|
};
|
|
64
53
|
/**
|
|
65
|
-
* Выпадающее
|
|
54
|
+
* Выпадающее меню `Dropdown`. Содержит несколько команд, объединенных по смыслу.
|
|
55
|
+
*
|
|
56
|
+
* Используйте кнопку-меню:
|
|
57
|
+
* * когда не хватает места для нескольких кнопок.
|
|
58
|
+
* * когда названия действий очень длинные.
|
|
59
|
+
* * когда действия редко используются или объединены по смыслу.
|
|
66
60
|
*
|
|
61
|
+
* Не используйте `Dropdown` для выбора значения из набора вариантов. В таком случае воспользуйтесь компонентом Select.
|
|
67
62
|
*/
|
|
68
63
|
export declare class Dropdown extends React.Component<DropdownProps> {
|
|
69
64
|
static __KONTUR_REACT_UI__: string;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
### Базовый пример
|
|
1
2
|
```jsx harmony
|
|
2
3
|
import { Dropdown, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
|
|
3
4
|
<Dropdown caption="Click">
|
|
@@ -10,7 +11,7 @@ import { Dropdown, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-
|
|
|
10
11
|
</Dropdown>;
|
|
11
12
|
```
|
|
12
13
|
|
|
13
|
-
|
|
14
|
+
### Размер
|
|
14
15
|
|
|
15
16
|
```jsx harmony
|
|
16
17
|
import { Gapped, MenuItem, MenuSeparator, MenuHeader } from '@skbkontur/react-ui';
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import * as DropdownStories from './Dropdown.docs.stories.tsx';
|
|
2
|
+
import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
|
|
3
|
+
import { Meta } from '../../../.storybook/Meta';
|
|
4
|
+
|
|
5
|
+
<Meta of={DropdownStories} />
|
|
6
|
+
|
|
7
|
+
# Dropdown
|
|
8
|
+
|
|
9
|
+
[Компонент в Контур.Гайдах](https://guides.kontur.ru/components/actions/menu-button/)
|
|
10
|
+
|
|
11
|
+
[Компонент в Figma](https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=200%3A2498)
|
|
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} />
|
|
@@ -11,7 +11,7 @@ import { createPropsGetter } from "../../../lib/createPropsGetter";
|
|
|
11
11
|
import { getDropdownMenuTheme } from "../getDropdownMenuTheme";
|
|
12
12
|
|
|
13
13
|
/**
|
|
14
|
-
*
|
|
14
|
+
* Выпадающее меню `DropdownMenu` раскрывается по клику на переданный в `caption` элемент.
|
|
15
15
|
*/
|
|
16
16
|
export var DropdownMenu = rootNode(_class = (_DropdownMenu = /*#__PURE__*/function (_React$Component) {
|
|
17
17
|
function DropdownMenu(props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","ThemeContext","PopupMenu","isProductionEnv","isTestEnv","CommonWrapper","rootNode","createPropsGetter","getDropdownMenuTheme","DropdownMenu","_class","_DropdownMenu","_React$Component","props","_this","call","getProps","defaultProps","popupMenu","open","close","refPopupMenu","ref","caption","Error","_inheritsLoose","_proto","prototype","render","_this2","createElement","Consumer","theme","Provider","value","renderMain","_this$getProps","positions","disableAnimations","_extends","rootNodeRef","setRootNode","id","menuMaxHeight","menuWidth","preventIconsOffset","popupHasPin","header","footer","width","onClose","onOpen","popupMenuId","children","Component","__KONTUR_REACT_UI__","displayName"],"sources":["DropdownMenu.tsx"],"sourcesContent":["import React, { AriaAttributes, HTMLAttributes } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Nullable } from '../../typings/utility-types';\nimport { PopupMenu, PopupMenuProps } from '../../internal/PopupMenu';\nimport { isProductionEnv, isTestEnv } from '../../lib/currentEnvironment';\nimport { PopupPositionsType } from '../../internal/Popup';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { getDropdownMenuTheme } from './getDropdownMenuTheme';\n\nexport interface DropdownMenuProps\n extends Pick<AriaAttributes, 'aria-label'>,\n Pick<HTMLAttributes<HTMLElement>, 'id'>,\n Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'popupMenuId' | 'preventIconsOffset'>,\n CommonProps {\n /** Максимальная высота меню */\n menuMaxHeight?: React.CSSProperties['maxWidth'];\n /** Ширина меню */\n menuWidth?: React.CSSProperties['width'];\n /** Ширина caption */\n width?: React.CSSProperties['width'];\n\n /**\n * Элемент или функция возвращающая элемент,\n * если передана, используется вместо `caption`,\n * в таком случае управлять открытием и закрытием меню\n * придется в этой функции\n */\n caption: PopupMenuProps['caption'];\n\n /**\n * Произвольный элемент, который будет отрендерен в шапке меню.\n *\n * _Примечание_: контрол [MenuHeader](#/Components/MenuHeader) передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`.\n */\n header?: React.ReactNode;\n /**\n * Произвольный элемент, который будет отрендерен в подвале меню.\n *\n * Перед элементом переданным в `footer` будет отрендерен [MenuSeparator](#/Components/MenuSeparator).\n */\n footer?: React.ReactNode;\n /**\n * Список позиций доступных для расположения выпадашки относительно `caption`.\n *\n * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.\n *\n * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`\n * @default ['bottom left', 'bottom right', 'top left', 'top right']\n */\n positions?: PopupPositionsType[];\n\n /**\n * Не показывать анимацию\n */\n disableAnimations?: boolean;\n}\n\ntype DefaultProps = Required<Pick<DropdownMenuProps, 'disableAnimations' | 'positions'>>;\n\n/**\n *
|
|
1
|
+
{"version":3,"names":["React","ThemeContext","PopupMenu","isProductionEnv","isTestEnv","CommonWrapper","rootNode","createPropsGetter","getDropdownMenuTheme","DropdownMenu","_class","_DropdownMenu","_React$Component","props","_this","call","getProps","defaultProps","popupMenu","open","close","refPopupMenu","ref","caption","Error","_inheritsLoose","_proto","prototype","render","_this2","createElement","Consumer","theme","Provider","value","renderMain","_this$getProps","positions","disableAnimations","_extends","rootNodeRef","setRootNode","id","menuMaxHeight","menuWidth","preventIconsOffset","popupHasPin","header","footer","width","onClose","onOpen","popupMenuId","children","Component","__KONTUR_REACT_UI__","displayName"],"sources":["DropdownMenu.tsx"],"sourcesContent":["import React, { AriaAttributes, HTMLAttributes } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Nullable } from '../../typings/utility-types';\nimport { PopupMenu, PopupMenuProps } from '../../internal/PopupMenu';\nimport { isProductionEnv, isTestEnv } from '../../lib/currentEnvironment';\nimport { PopupPositionsType } from '../../internal/Popup';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { getDropdownMenuTheme } from './getDropdownMenuTheme';\n\nexport interface DropdownMenuProps\n extends Pick<AriaAttributes, 'aria-label'>,\n Pick<HTMLAttributes<HTMLElement>, 'id'>,\n Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'popupMenuId' | 'preventIconsOffset'>,\n CommonProps {\n /** Максимальная высота меню */\n menuMaxHeight?: React.CSSProperties['maxWidth'];\n /** Ширина меню */\n menuWidth?: React.CSSProperties['width'];\n /** Ширина caption */\n width?: React.CSSProperties['width'];\n\n /**\n * Элемент или функция возвращающая элемент,\n * если передана, используется вместо `caption`,\n * в таком случае управлять открытием и закрытием меню\n * придется в этой функции\n */\n caption: PopupMenuProps['caption'];\n\n /**\n * Произвольный элемент, который будет отрендерен в шапке меню.\n *\n * _Примечание_: контрол [MenuHeader](#/Components/MenuHeader) передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`.\n */\n header?: React.ReactNode;\n /**\n * Произвольный элемент, который будет отрендерен в подвале меню.\n *\n * Перед элементом переданным в `footer` будет отрендерен [MenuSeparator](#/Components/MenuSeparator).\n */\n footer?: React.ReactNode;\n /**\n * Список позиций доступных для расположения выпадашки относительно `caption`.\n *\n * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.\n *\n * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`\n * @default ['bottom left', 'bottom right', 'top left', 'top right']\n */\n positions?: PopupPositionsType[];\n\n /**\n * Не показывать анимацию\n */\n disableAnimations?: boolean;\n}\n\ntype DefaultProps = Required<Pick<DropdownMenuProps, 'disableAnimations' | 'positions'>>;\n\n/**\n * Выпадающее меню `DropdownMenu` раскрывается по клику на переданный в `caption` элемент.\n */\n@rootNode\nexport class DropdownMenu extends React.Component<DropdownMenuProps> {\n public static __KONTUR_REACT_UI__ = 'DropdownMenu';\n public static displayName = 'DropdownMenu';\n\n public static defaultProps: DefaultProps = {\n disableAnimations: isTestEnv,\n positions: ['bottom left', 'bottom right', 'top left', 'top right'],\n };\n\n private getProps = createPropsGetter(DropdownMenu.defaultProps);\n\n private popupMenu: Nullable<PopupMenu> = null;\n private setRootNode!: TSetRootNode;\n\n constructor(props: DropdownMenuProps) {\n super(props);\n\n if (!props.caption && !isProductionEnv) {\n throw new Error('Prop \"caption\" is required!!!');\n }\n }\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n return <ThemeContext.Provider value={getDropdownMenuTheme(theme)}>{this.renderMain()}</ThemeContext.Provider>;\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public renderMain() {\n if (!this.props.caption) {\n return null;\n }\n const { positions, disableAnimations } = this.getProps();\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <PopupMenu\n id={this.props.id}\n aria-label={this.props['aria-label']}\n ref={this.refPopupMenu}\n caption={this.props.caption}\n menuMaxHeight={this.props.menuMaxHeight}\n menuWidth={this.props.menuWidth}\n preventIconsOffset={this.props.preventIconsOffset}\n popupHasPin={false}\n positions={positions}\n disableAnimations={disableAnimations}\n header={this.props.header}\n footer={this.props.footer}\n width={this.props.width}\n onClose={this.props.onClose}\n onOpen={this.props.onOpen}\n popupMenuId={this.props.popupMenuId}\n >\n {this.props.children}\n </PopupMenu>\n </CommonWrapper>\n );\n }\n\n public open = (): void => {\n if (this.popupMenu) {\n this.popupMenu.open();\n }\n };\n\n public close = (): void => {\n if (this.popupMenu) {\n this.popupMenu.close();\n }\n };\n\n private refPopupMenu = (ref: Nullable<PopupMenu>) => (this.popupMenu = ref);\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -44,7 +44,7 @@ export interface DropdownMenuProps extends Pick<AriaAttributes, 'aria-label'>, P
|
|
|
44
44
|
}
|
|
45
45
|
type DefaultProps = Required<Pick<DropdownMenuProps, 'disableAnimations' | 'positions'>>;
|
|
46
46
|
/**
|
|
47
|
-
*
|
|
47
|
+
* Выпадающее меню `DropdownMenu` раскрывается по клику на переданный в `caption` элемент.
|
|
48
48
|
*/
|
|
49
49
|
export declare class DropdownMenu extends React.Component<DropdownMenuProps> {
|
|
50
50
|
static __KONTUR_REACT_UI__: string;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
Базовый пример
|
|
1
|
+
### Базовый пример меню
|
|
2
2
|
|
|
3
3
|
```jsx harmony
|
|
4
4
|
import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
|
|
@@ -43,7 +43,7 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
|
|
|
43
43
|
</DropdownMenu>;
|
|
44
44
|
```
|
|
45
45
|
|
|
46
|
-
|
|
46
|
+
### Ширина
|
|
47
47
|
|
|
48
48
|
```jsx harmony
|
|
49
49
|
import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
|
|
@@ -61,7 +61,7 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
|
|
|
61
61
|
</DropdownMenu>;
|
|
62
62
|
```
|
|
63
63
|
|
|
64
|
-
|
|
64
|
+
### Максимальная высота
|
|
65
65
|
|
|
66
66
|
```jsx harmony
|
|
67
67
|
import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
|
|
@@ -79,7 +79,7 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
|
|
|
79
79
|
</DropdownMenu>;
|
|
80
80
|
```
|
|
81
81
|
|
|
82
|
-
|
|
82
|
+
### Выпадашка слева по центру
|
|
83
83
|
|
|
84
84
|
```jsx harmony
|
|
85
85
|
import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
|
|
@@ -97,7 +97,7 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
|
|
|
97
97
|
</DropdownMenu>;
|
|
98
98
|
```
|
|
99
99
|
|
|
100
|
-
Меню c шапкой и
|
|
100
|
+
### Меню c шапкой и подвалом
|
|
101
101
|
|
|
102
102
|
```jsx harmony
|
|
103
103
|
import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
|
|
@@ -113,7 +113,7 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
|
|
|
113
113
|
</DropdownMenu>;
|
|
114
114
|
```
|
|
115
115
|
|
|
116
|
-
|
|
116
|
+
### Иконка и автовыравнивание текста
|
|
117
117
|
|
|
118
118
|
```jsx harmony
|
|
119
119
|
import { Button, MenuHeader, MenuItem, MenuSeparator, DropdownMenu } from '@skbkontur/react-ui';
|
|
@@ -127,7 +127,7 @@ import OkIcon from '@skbkontur/react-icons/Ok';
|
|
|
127
127
|
</DropdownMenu>;
|
|
128
128
|
```
|
|
129
129
|
|
|
130
|
-
|
|
130
|
+
### Иконка и отключенное автовыравнивание текста
|
|
131
131
|
|
|
132
132
|
```jsx harmony
|
|
133
133
|
import { Button, MenuHeader, MenuItem, MenuSeparator, DropdownMenu } from '@skbkontur/react-ui';
|
|
@@ -141,7 +141,7 @@ import OkIcon from '@skbkontur/react-icons/Ok';
|
|
|
141
141
|
</DropdownMenu>
|
|
142
142
|
```
|
|
143
143
|
|
|
144
|
-
|
|
144
|
+
### Отключенная анимация
|
|
145
145
|
|
|
146
146
|
```jsx harmony
|
|
147
147
|
import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
|
|
@@ -158,6 +158,7 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
|
|
|
158
158
|
</DropdownMenu>;
|
|
159
159
|
```
|
|
160
160
|
|
|
161
|
+
### Подпись
|
|
161
162
|
В `caption` можно передать любой элемент.
|
|
162
163
|
|
|
163
164
|
```jsx harmony
|
|
@@ -178,7 +179,7 @@ import { MenuItem } from '@skbkontur/react-ui';
|
|
|
178
179
|
</DropdownMenu>;
|
|
179
180
|
```
|
|
180
181
|
|
|
181
|
-
|
|
182
|
+
### Чекбокс внутри MenuItem
|
|
182
183
|
|
|
183
184
|
```jsx harmony
|
|
184
185
|
import { MenuItem, Checkbox, Button, ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
|
|
@@ -219,7 +220,8 @@ const renderCaption = ({ openMenu, closeMenu }) => {
|
|
|
219
220
|
</DropdownMenu>
|
|
220
221
|
```
|
|
221
222
|
|
|
222
|
-
Условный рендер элементов меню
|
|
223
|
+
### Условный рендер элементов меню
|
|
224
|
+
(с сохранением поведения [MenuItem](#/Components/MenuItem))
|
|
223
225
|
|
|
224
226
|
```jsx harmony
|
|
225
227
|
import {Button, MenuItem, Gapped, MenuSeparator} from '@skbkontur/react-ui';
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import * as DropdownMenuStories from './DropdownMenu.docs.stories.tsx';
|
|
2
|
+
import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
|
|
3
|
+
import { Meta } from '../../../.storybook/Meta';
|
|
4
|
+
|
|
5
|
+
<Meta of={DropdownMenuStories} />
|
|
6
|
+
|
|
7
|
+
# DropdownMenu
|
|
8
|
+
|
|
9
|
+
[Компонент в Контур.Гайдах](https://guides.kontur.ru/components/actions/menu-button/)
|
|
10
|
+
|
|
11
|
+
[Компонент в Figma](https://www.figma.com/design/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI?node-id=200-2498&t=I8Bp7OCi6jgkyIbR-0)
|
|
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} />
|
|
@@ -329,6 +329,12 @@ var _FileUploader = forwardRefAndName('FileUploader', function (props, ref) {
|
|
|
329
329
|
})))))))
|
|
330
330
|
);
|
|
331
331
|
});
|
|
332
|
+
|
|
333
|
+
/**
|
|
334
|
+
* `FileUploader` — контрол для выбора пользователем файла на компьютере и отображения статуса его отправки на сервер.
|
|
335
|
+
*
|
|
336
|
+
* Можно использовать для синхронной отправки данных, например, в форме. Или же можно использовать в асинхронном режиме.
|
|
337
|
+
*/
|
|
332
338
|
export var FileUploader = withFileUploaderControlProvider( /*#__PURE__*/
|
|
333
339
|
React.memo(_FileUploader));
|
|
334
340
|
FileUploader.displayName = 'FileUploader';
|