@salutejs/plasma-new-hope 0.78.0-canary.1185.8915022482.0 → 0.78.0-canary.1194.8928068974.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Combobox/Combobox.css +7 -17
- package/cjs/components/Combobox/hooks/useFocusController.js +1 -0
- package/cjs/components/Combobox/hooks/useFocusController.js.map +1 -1
- package/cjs/components/Combobox/ui/ComboboxDivider/ComboboxDivider.css +6 -15
- package/cjs/components/Combobox/ui/ComboboxDivider/ComboboxDivider.js +2 -2
- package/cjs/components/Combobox/ui/ComboboxFooter/ComboboxFooter.css +6 -15
- package/cjs/components/Combobox/ui/ComboboxFooter/ComboboxFooter.js +2 -2
- package/cjs/components/Combobox/ui/ComboboxGroup/ComboboxGroup.css +6 -15
- package/cjs/components/Combobox/ui/ComboboxGroup/ComboboxGroup.js +2 -2
- package/cjs/components/Combobox/ui/ComboboxHeader/ComboboxHeader.css +6 -15
- package/cjs/components/Combobox/ui/ComboboxHeader/ComboboxHeader.js +2 -2
- package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.css +23 -4
- package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.js +10 -81
- package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.js.map +1 -1
- package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js +9 -21
- package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js.map +1 -1
- package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.styles_936wgl.css +1 -0
- package/cjs/components/Dropdown/Dropdown.css +2 -25
- package/cjs/components/Dropdown/Dropdown.js +54 -138
- package/cjs/components/Dropdown/Dropdown.js.map +1 -1
- package/cjs/components/Dropdown/Dropdown.styles.js +7 -40
- package/cjs/components/Dropdown/Dropdown.styles.js.map +1 -1
- package/cjs/components/Dropdown/Dropdown.styles_1daxhqh.css +2 -0
- package/cjs/components/Dropdown/Dropdown.tokens.js +23 -26
- package/cjs/components/Dropdown/Dropdown.tokens.js.map +1 -1
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.css +4 -7
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js +100 -79
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js.map +1 -1
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +5 -90
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js.map +1 -1
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles_1juhjtq.css +4 -0
- package/cjs/components/Dropdown/ui/{DropdownItemOld → DropdownItem}/variations/_size/base.js +1 -1
- package/cjs/components/Dropdown/ui/DropdownItem/variations/_size/base.js.map +1 -0
- package/cjs/components/Dropdown/ui/{DropdownItemOld → DropdownItem}/variations/_view/base.js +1 -1
- package/cjs/components/Dropdown/ui/DropdownItem/variations/_view/base.js.map +1 -0
- package/cjs/components/Dropdown/utils/index.js +0 -16
- package/cjs/components/Dropdown/utils/index.js.map +1 -1
- package/cjs/components/Pagination/Pagination.css +7 -14
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +7 -14
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.js +1 -1
- package/cjs/components/Select/Select.css +7 -14
- package/cjs/components/Select/ui/SelectDivider/SelectDivider.css +6 -15
- package/cjs/components/Select/ui/SelectDivider/SelectDivider.js +2 -2
- package/cjs/components/Select/ui/SelectFooter/SelectFooter.css +6 -15
- package/cjs/components/Select/ui/SelectFooter/SelectFooter.js +2 -2
- package/cjs/components/Select/ui/SelectGroup/SelectGroup.css +6 -15
- package/cjs/components/Select/ui/SelectGroup/SelectGroup.js +2 -2
- package/cjs/components/Select/ui/SelectHeader/SelectHeader.css +6 -15
- package/cjs/components/Select/ui/SelectHeader/SelectHeader.js +2 -2
- package/cjs/components/Select/ui/SelectItem/SelectItem.css +7 -16
- package/cjs/components/Select/ui/SelectItem/SelectItem.js +3 -3
- package/cjs/components/Select/ui/SelectItem/SelectItem.js.map +1 -1
- package/cjs/components/Select/ui/SelectItem/SelectItem.styles.js +2 -2
- package/cjs/components/Select/ui/SelectItem/SelectItem.styles.js.map +1 -1
- package/cjs/components/Select/ui/SelectItem/{SelectItem.styles_vk39mp.css → SelectItem.styles_6h17aw.css} +1 -1
- package/cjs/components/Slider/Slider.css +69 -0
- package/cjs/components/Slider/Slider.js +58 -0
- package/cjs/components/Slider/Slider.js.map +1 -0
- package/cjs/components/Slider/Slider.tokens.js +79 -0
- package/cjs/components/Slider/Slider.tokens.js.map +1 -0
- package/cjs/components/Slider/components/Double/Double.css +62 -0
- package/cjs/components/Slider/components/Double/Double.js +274 -0
- package/cjs/components/Slider/components/Double/Double.js.map +1 -0
- package/cjs/components/Slider/components/Double/Double.styles.js +61 -0
- package/cjs/components/Slider/components/Double/Double.styles.js.map +1 -0
- package/cjs/components/Slider/components/Double/Double.styles_1jhda4u.css +7 -0
- package/cjs/components/Slider/components/Single/Single.css +16 -0
- package/cjs/components/Slider/components/Single/Single.js +160 -0
- package/cjs/components/Slider/components/Single/Single.js.map +1 -0
- package/cjs/components/Slider/components/Single/Single.styles.js +45 -0
- package/cjs/components/Slider/components/Single/Single.styles.js.map +1 -0
- package/cjs/components/Slider/components/Single/Single.styles_1r9f1e0.css +6 -0
- package/cjs/components/Slider/components/SliderBase/SliderBase.css +4 -0
- package/cjs/components/Slider/components/SliderBase/SliderBase.js +82 -0
- package/cjs/components/Slider/components/SliderBase/SliderBase.js.map +1 -0
- package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +33 -0
- package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js.map +1 -0
- package/cjs/components/Slider/components/SliderBase/SliderBase.styles_7is2ll.css +4 -0
- package/cjs/components/Slider/ui/Handle/Handle.css +4 -0
- package/cjs/components/Slider/ui/Handle/Handle.js +174 -0
- package/cjs/components/Slider/ui/Handle/Handle.js.map +1 -0
- package/cjs/components/Slider/ui/Handle/Handle.styles.js +21 -0
- package/cjs/components/Slider/ui/Handle/Handle.styles.js.map +1 -0
- package/cjs/components/Slider/ui/Handle/Handle.styles_16a5sl.css +2 -0
- package/cjs/components/Slider/ui/Thumb/Thumb.css +1 -0
- package/cjs/components/Slider/ui/Thumb/Thumb.js +31 -0
- package/cjs/components/Slider/ui/Thumb/Thumb.js.map +1 -0
- package/cjs/components/Slider/ui/Thumb/Thumb.styles.js +15 -0
- package/cjs/components/Slider/ui/Thumb/Thumb.styles.js.map +1 -0
- package/cjs/components/Slider/ui/Thumb/Thumb.styles_zwgsh8.css +1 -0
- package/cjs/components/Slider/utils/index.js +56 -0
- package/cjs/components/Slider/utils/index.js.map +1 -0
- package/cjs/components/Slider/variations/_disabled/base.js +9 -0
- package/cjs/components/Slider/variations/_disabled/base.js.map +1 -0
- package/cjs/components/Slider/variations/_size/base.js +9 -0
- package/cjs/components/Slider/variations/_size/base.js.map +1 -0
- package/cjs/components/Slider/variations/_view/base.js +9 -0
- package/cjs/components/Slider/variations/_view/base.js.map +1 -0
- package/cjs/components/Slider/variations/_view/base_x642ct.css +1 -0
- package/cjs/components/TextField/TextField.js +6 -2
- package/cjs/components/TextField/TextField.js.map +1 -1
- package/cjs/components/_Icon/Icon.assets/DisclosureRight.js +2 -1
- package/cjs/components/_Icon/Icon.assets/DisclosureRight.js.map +1 -1
- package/cjs/hooks/useIsomorphicLayoutEffect.js +15 -0
- package/cjs/hooks/useIsomorphicLayoutEffect.js.map +1 -0
- package/cjs/index.css +33 -18
- package/cjs/index.js +16 -8
- package/cjs/index.js.map +1 -1
- package/cjs/utils/canUseDOM.js +12 -0
- package/cjs/utils/canUseDOM.js.map +1 -0
- package/cjs/utils/index.js.map +1 -1
- package/es/components/Combobox/Combobox.css +7 -17
- package/es/components/Combobox/hooks/useFocusController.js +1 -0
- package/es/components/Combobox/hooks/useFocusController.js.map +1 -1
- package/es/components/Combobox/ui/ComboboxDivider/ComboboxDivider.css +6 -15
- package/es/components/Combobox/ui/ComboboxDivider/ComboboxDivider.js +2 -2
- package/es/components/Combobox/ui/ComboboxFooter/ComboboxFooter.css +6 -15
- package/es/components/Combobox/ui/ComboboxFooter/ComboboxFooter.js +2 -2
- package/es/components/Combobox/ui/ComboboxGroup/ComboboxGroup.css +6 -15
- package/es/components/Combobox/ui/ComboboxGroup/ComboboxGroup.js +2 -2
- package/es/components/Combobox/ui/ComboboxHeader/ComboboxHeader.css +6 -15
- package/es/components/Combobox/ui/ComboboxHeader/ComboboxHeader.js +2 -2
- package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.css +23 -4
- package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.js +11 -82
- package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.js.map +1 -1
- package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js +10 -19
- package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js.map +1 -1
- package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.styles_936wgl.css +1 -0
- package/es/components/Dropdown/Dropdown.css +2 -25
- package/es/components/Dropdown/Dropdown.js +60 -144
- package/es/components/Dropdown/Dropdown.js.map +1 -1
- package/es/components/Dropdown/Dropdown.styles.js +7 -39
- package/es/components/Dropdown/Dropdown.styles.js.map +1 -1
- package/es/components/Dropdown/Dropdown.styles_1daxhqh.css +2 -0
- package/es/components/Dropdown/Dropdown.tokens.js +23 -26
- package/es/components/Dropdown/Dropdown.tokens.js.map +1 -1
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.css +4 -7
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.js +100 -80
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.js.map +1 -1
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +5 -89
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js.map +1 -1
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles_1juhjtq.css +4 -0
- package/es/components/Dropdown/ui/{DropdownItemOld → DropdownItem}/variations/_size/base.js +1 -1
- package/es/components/Dropdown/ui/DropdownItem/variations/_size/base.js.map +1 -0
- package/es/components/Dropdown/ui/DropdownItem/variations/_size/base_x642ct.css +1 -0
- package/es/components/Dropdown/ui/{DropdownItemOld → DropdownItem}/variations/_view/base.js +1 -1
- package/es/components/Dropdown/ui/DropdownItem/variations/_view/base.js.map +1 -0
- package/es/components/Dropdown/ui/DropdownItem/variations/_view/base_x642ct.css +1 -0
- package/es/components/Dropdown/utils/index.js +2 -16
- package/es/components/Dropdown/utils/index.js.map +1 -1
- package/es/components/Pagination/Pagination.css +7 -14
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +7 -14
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.js +1 -1
- package/es/components/Select/Select.css +7 -14
- package/es/components/Select/ui/SelectDivider/SelectDivider.css +6 -15
- package/es/components/Select/ui/SelectDivider/SelectDivider.js +2 -2
- package/es/components/Select/ui/SelectFooter/SelectFooter.css +6 -15
- package/es/components/Select/ui/SelectFooter/SelectFooter.js +2 -2
- package/es/components/Select/ui/SelectGroup/SelectGroup.css +6 -15
- package/es/components/Select/ui/SelectGroup/SelectGroup.js +2 -2
- package/es/components/Select/ui/SelectHeader/SelectHeader.css +6 -15
- package/es/components/Select/ui/SelectHeader/SelectHeader.js +2 -2
- package/es/components/Select/ui/SelectItem/SelectItem.css +7 -16
- package/es/components/Select/ui/SelectItem/SelectItem.js +3 -3
- package/es/components/Select/ui/SelectItem/SelectItem.js.map +1 -1
- package/es/components/Select/ui/SelectItem/SelectItem.styles.js +2 -2
- package/es/components/Select/ui/SelectItem/SelectItem.styles.js.map +1 -1
- package/es/components/Select/ui/SelectItem/{SelectItem.styles_vk39mp.css → SelectItem.styles_6h17aw.css} +1 -1
- package/es/components/Slider/Slider.css +69 -0
- package/es/components/Slider/Slider.js +53 -0
- package/es/components/Slider/Slider.js.map +1 -0
- package/es/components/Slider/Slider.tokens.js +74 -0
- package/es/components/Slider/Slider.tokens.js.map +1 -0
- package/es/components/Slider/components/Double/Double.css +62 -0
- package/es/components/Slider/components/Double/Double.js +270 -0
- package/es/components/Slider/components/Double/Double.js.map +1 -0
- package/es/components/Slider/components/Double/Double.styles.js +51 -0
- package/es/components/Slider/components/Double/Double.styles.js.map +1 -0
- package/es/components/Slider/components/Double/Double.styles_1jhda4u.css +7 -0
- package/es/components/Slider/components/Single/Single.css +16 -0
- package/es/components/Slider/components/Single/Single.js +156 -0
- package/es/components/Slider/components/Single/Single.js.map +1 -0
- package/es/components/Slider/components/Single/Single.styles.js +36 -0
- package/es/components/Slider/components/Single/Single.styles.js.map +1 -0
- package/es/components/Slider/components/Single/Single.styles_1r9f1e0.css +6 -0
- package/es/components/Slider/components/SliderBase/SliderBase.css +4 -0
- package/es/components/Slider/components/SliderBase/SliderBase.js +78 -0
- package/es/components/Slider/components/SliderBase/SliderBase.js.map +1 -0
- package/es/components/Slider/components/SliderBase/SliderBase.styles.js +26 -0
- package/es/components/Slider/components/SliderBase/SliderBase.styles.js.map +1 -0
- package/es/components/Slider/components/SliderBase/SliderBase.styles_7is2ll.css +4 -0
- package/es/components/Slider/ui/Handle/Handle.css +4 -0
- package/es/components/Slider/ui/Handle/Handle.js +170 -0
- package/es/components/Slider/ui/Handle/Handle.js.map +1 -0
- package/es/components/Slider/ui/Handle/Handle.styles.js +16 -0
- package/es/components/Slider/ui/Handle/Handle.styles.js.map +1 -0
- package/es/components/Slider/ui/Handle/Handle.styles_16a5sl.css +2 -0
- package/es/components/Slider/ui/Thumb/Thumb.css +1 -0
- package/es/components/Slider/ui/Thumb/Thumb.js +27 -0
- package/es/components/Slider/ui/Thumb/Thumb.js.map +1 -0
- package/es/components/Slider/ui/Thumb/Thumb.styles.js +11 -0
- package/es/components/Slider/ui/Thumb/Thumb.styles.js.map +1 -0
- package/es/components/Slider/ui/Thumb/Thumb.styles_zwgsh8.css +1 -0
- package/es/components/Slider/utils/index.js +50 -0
- package/es/components/Slider/utils/index.js.map +1 -0
- package/es/components/Slider/variations/_disabled/base.js +5 -0
- package/es/components/Slider/variations/_disabled/base.js.map +1 -0
- package/es/components/Slider/variations/_disabled/base_x642ct.css +1 -0
- package/es/components/Slider/variations/_size/base.js +5 -0
- package/es/components/Slider/variations/_size/base.js.map +1 -0
- package/es/components/Slider/variations/_size/base_x642ct.css +1 -0
- package/es/components/Slider/variations/_view/base.js +5 -0
- package/es/components/Slider/variations/_view/base.js.map +1 -0
- package/es/components/Slider/variations/_view/base_x642ct.css +1 -0
- package/es/components/TextField/TextField.js +6 -2
- package/es/components/TextField/TextField.js.map +1 -1
- package/es/components/_Icon/Icon.assets/DisclosureRight.js +2 -1
- package/es/components/_Icon/Icon.assets/DisclosureRight.js.map +1 -1
- package/es/hooks/useIsomorphicLayoutEffect.js +11 -0
- package/es/hooks/useIsomorphicLayoutEffect.js.map +1 -0
- package/es/index.css +33 -18
- package/es/index.js +9 -4
- package/es/index.js.map +1 -1
- package/es/utils/canUseDOM.js +8 -0
- package/es/utils/canUseDOM.js.map +1 -0
- package/es/utils/index.js.map +1 -1
- package/package.json +4 -2
- package/styled-components/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.js +2 -91
- package/styled-components/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js +7 -27
- package/styled-components/cjs/components/Dropdown/Dropdown.js +54 -140
- package/styled-components/cjs/components/Dropdown/Dropdown.styles.js +7 -22
- package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +80 -0
- package/styled-components/cjs/components/Dropdown/Dropdown.tokens.js +23 -26
- package/styled-components/cjs/components/Dropdown/index.js +1 -9
- package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js +105 -77
- package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +18 -83
- package/styled-components/cjs/components/Dropdown/ui/DropdownItem/variations/_size/tokens.json +19 -0
- package/styled-components/cjs/components/Dropdown/ui/DropdownItem/variations/_view/tokens.json +9 -0
- package/styled-components/cjs/components/Dropdown/ui/index.js +5 -19
- package/styled-components/cjs/components/Dropdown/utils/index.js +1 -15
- package/styled-components/cjs/components/Dropdown/variations/_size/tokens.json +9 -1
- package/styled-components/cjs/components/Dropdown/variations/_view/tokens.json +1 -1
- package/styled-components/cjs/components/Select/ui/SelectItem/SelectItem.js +1 -1
- package/styled-components/cjs/components/Select/ui/SelectItem/SelectItem.styles.js +1 -1
- package/styled-components/cjs/components/Slider/Slider.js +57 -0
- package/styled-components/cjs/components/Slider/Slider.tokens.js +77 -0
- package/styled-components/cjs/components/Slider/components/Double/Double.js +286 -0
- package/styled-components/cjs/components/Slider/components/Double/Double.styles.js +36 -0
- package/styled-components/cjs/components/Slider/components/Single/Single.js +172 -0
- package/styled-components/cjs/components/Slider/components/Single/Single.styles.js +27 -0
- package/styled-components/cjs/components/Slider/components/Single/Single.types.js +5 -0
- package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.js +83 -0
- package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +21 -0
- package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.types.js +5 -0
- package/styled-components/cjs/components/Slider/components/index.js +27 -0
- package/styled-components/cjs/components/Slider/index.js +32 -0
- package/styled-components/cjs/components/Slider/ui/Handle/Handle.js +183 -0
- package/styled-components/cjs/components/Slider/ui/Handle/Handle.styles.js +15 -0
- package/styled-components/cjs/components/Slider/ui/Handle/Handle.types.js +5 -0
- package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.js +32 -0
- package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.styles.js +12 -0
- package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.types.js +5 -0
- package/styled-components/cjs/components/Slider/ui/index.js +63 -0
- package/styled-components/cjs/components/Slider/utils/index.js +55 -0
- package/styled-components/cjs/components/Slider/variations/_disabled/base.js +8 -0
- package/styled-components/cjs/components/Slider/variations/_disabled/tokens.json +4 -0
- package/styled-components/cjs/components/Slider/variations/_size/base.js +8 -0
- package/styled-components/cjs/components/Slider/variations/_size/tokens.json +0 -0
- package/styled-components/cjs/components/Slider/variations/_view/base.js +8 -0
- package/styled-components/cjs/components/Slider/variations/_view/tokens.json +0 -0
- package/styled-components/cjs/components/TextField/TextField.js +6 -2
- package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureRight.js +2 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.config.js +27 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.js +13 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.stories.tsx +194 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.config.js +27 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.js +13 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.stories.tsx +195 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.config.js +29 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.js +11 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.stories.tsx +131 -0
- package/styled-components/cjs/examples/plasma_web/components/Dropdown/Normal/Dropdown.config.js +27 -0
- package/styled-components/cjs/examples/plasma_web/components/Dropdown/Normal/Dropdown.js +13 -0
- package/styled-components/cjs/examples/plasma_web/components/Dropdown/Normal/Dropdown.stories.tsx +195 -0
- package/styled-components/cjs/examples/plasma_web/components/Dropdown/Tight/Dropdown.config.js +27 -0
- package/styled-components/cjs/examples/plasma_web/components/Dropdown/Tight/Dropdown.js +13 -0
- package/styled-components/cjs/examples/plasma_web/components/Dropdown/Tight/Dropdown.stories.tsx +195 -0
- package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.config.js +29 -0
- package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.js +11 -0
- package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.stories.tsx +131 -0
- package/styled-components/cjs/examples/sds_engineer/components/Dropdown/Dropdown.config.js +22 -0
- package/styled-components/cjs/examples/sds_engineer/components/Dropdown/Dropdown.js +21 -0
- package/styled-components/cjs/examples/sds_engineer/components/Dropdown/Dropdown.stories.tsx +277 -0
- package/styled-components/cjs/hooks/index.js +8 -1
- package/styled-components/cjs/hooks/useIsomorphicLayoutEffect.js +12 -0
- package/styled-components/cjs/index.js +11 -0
- package/styled-components/cjs/utils/canUseDOM.js +11 -0
- package/styled-components/cjs/utils/index.js +7 -0
- package/styled-components/es/components/Combobox/ui/ComboboxItem/ComboboxItem.js +3 -90
- package/styled-components/es/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js +6 -23
- package/styled-components/es/components/Dropdown/Dropdown.js +55 -142
- package/styled-components/es/components/Dropdown/Dropdown.styles.js +5 -18
- package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +80 -0
- package/styled-components/es/components/Dropdown/Dropdown.tokens.js +23 -26
- package/styled-components/es/components/Dropdown/index.js +0 -1
- package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.js +107 -78
- package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +14 -80
- package/styled-components/es/components/Dropdown/ui/DropdownItem/variations/_size/tokens.json +19 -0
- package/styled-components/es/components/Dropdown/ui/DropdownItem/variations/_view/tokens.json +9 -0
- package/styled-components/es/components/Dropdown/ui/index.js +1 -3
- package/styled-components/es/components/Dropdown/utils/index.js +1 -15
- package/styled-components/es/components/Dropdown/variations/_size/tokens.json +9 -1
- package/styled-components/es/components/Dropdown/variations/_view/tokens.json +1 -1
- package/styled-components/es/components/Select/ui/SelectItem/SelectItem.js +2 -2
- package/styled-components/es/components/Select/ui/SelectItem/SelectItem.styles.js +1 -1
- package/styled-components/es/components/Slider/Slider.js +48 -0
- package/styled-components/es/components/Slider/Slider.tokens.js +71 -0
- package/styled-components/es/components/Slider/components/Double/Double.js +278 -0
- package/styled-components/es/components/Slider/components/Double/Double.styles.js +29 -0
- package/styled-components/es/components/Slider/components/Single/Single.js +164 -0
- package/styled-components/es/components/Slider/components/Single/Single.styles.js +20 -0
- package/styled-components/es/components/Slider/components/Single/Single.types.js +1 -0
- package/styled-components/es/components/Slider/components/SliderBase/SliderBase.js +74 -0
- package/styled-components/es/components/Slider/components/SliderBase/SliderBase.styles.js +14 -0
- package/styled-components/es/components/Slider/components/SliderBase/SliderBase.types.js +1 -0
- package/styled-components/es/components/Slider/components/index.js +3 -0
- package/styled-components/es/components/Slider/index.js +3 -0
- package/styled-components/es/components/Slider/ui/Handle/Handle.js +174 -0
- package/styled-components/es/components/Slider/ui/Handle/Handle.styles.js +8 -0
- package/styled-components/es/components/Slider/ui/Handle/Handle.types.js +1 -0
- package/styled-components/es/components/Slider/ui/Thumb/Thumb.js +25 -0
- package/styled-components/es/components/Slider/ui/Thumb/Thumb.styles.js +5 -0
- package/styled-components/es/components/Slider/ui/Thumb/Thumb.types.js +1 -0
- package/styled-components/es/components/Slider/ui/index.js +5 -0
- package/styled-components/es/components/Slider/utils/index.js +47 -0
- package/styled-components/es/components/Slider/variations/_disabled/base.js +2 -0
- package/styled-components/es/components/Slider/variations/_disabled/tokens.json +4 -0
- package/styled-components/es/components/Slider/variations/_size/base.js +2 -0
- package/styled-components/es/components/Slider/variations/_size/tokens.json +0 -0
- package/styled-components/es/components/Slider/variations/_view/base.js +2 -0
- package/styled-components/es/components/Slider/variations/_view/tokens.json +0 -0
- package/styled-components/es/components/TextField/TextField.js +6 -2
- package/styled-components/es/components/_Icon/Icon.assets/DisclosureRight.js +2 -1
- package/styled-components/es/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.config.js +21 -0
- package/styled-components/es/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.js +7 -0
- package/styled-components/es/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.stories.tsx +194 -0
- package/styled-components/es/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.config.js +21 -0
- package/styled-components/es/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.js +7 -0
- package/styled-components/es/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.stories.tsx +195 -0
- package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.config.js +23 -0
- package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.js +5 -0
- package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.stories.tsx +131 -0
- package/styled-components/es/examples/plasma_web/components/Dropdown/Normal/Dropdown.config.js +21 -0
- package/styled-components/es/examples/plasma_web/components/Dropdown/Normal/Dropdown.js +7 -0
- package/styled-components/es/examples/plasma_web/components/Dropdown/Normal/Dropdown.stories.tsx +195 -0
- package/styled-components/es/examples/plasma_web/components/Dropdown/Tight/Dropdown.config.js +21 -0
- package/styled-components/es/examples/plasma_web/components/Dropdown/Tight/Dropdown.js +7 -0
- package/styled-components/es/examples/plasma_web/components/Dropdown/Tight/Dropdown.stories.tsx +195 -0
- package/styled-components/es/examples/plasma_web/components/Slider/Slider.config.js +23 -0
- package/styled-components/es/examples/plasma_web/components/Slider/Slider.js +5 -0
- package/styled-components/es/examples/plasma_web/components/Slider/Slider.stories.tsx +131 -0
- package/styled-components/es/examples/sds_engineer/components/Dropdown/Dropdown.config.js +16 -0
- package/styled-components/es/examples/sds_engineer/components/Dropdown/Dropdown.js +15 -0
- package/styled-components/es/examples/sds_engineer/components/Dropdown/Dropdown.stories.tsx +277 -0
- package/styled-components/es/hooks/index.js +2 -1
- package/styled-components/es/hooks/useIsomorphicLayoutEffect.js +7 -0
- package/styled-components/es/index.js +2 -1
- package/styled-components/es/utils/canUseDOM.js +5 -0
- package/styled-components/es/utils/index.js +1 -0
- package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.d.ts +13 -15
- package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.d.ts.map +1 -1
- package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.d.ts +1 -5
- package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.d.ts.map +1 -1
- package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.type.d.ts +2 -59
- package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.type.d.ts.map +1 -1
- package/types/components/Dropdown/Dropdown.d.ts +4 -4
- package/types/components/Dropdown/Dropdown.d.ts.map +1 -1
- package/types/components/Dropdown/Dropdown.styles.d.ts +1 -8
- package/types/components/Dropdown/Dropdown.styles.d.ts.map +1 -1
- package/types/components/Dropdown/Dropdown.tokens.d.ts +22 -24
- package/types/components/Dropdown/Dropdown.tokens.d.ts.map +1 -1
- package/types/components/Dropdown/Dropdown.types.d.ts +40 -64
- package/types/components/Dropdown/Dropdown.types.d.ts.map +1 -1
- package/types/components/Dropdown/index.d.ts +1 -3
- package/types/components/Dropdown/index.d.ts.map +1 -1
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.d.ts +56 -2
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.d.ts.map +1 -1
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.styles.d.ts +2 -5
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.styles.d.ts.map +1 -1
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.type.d.ts +38 -44
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.type.d.ts.map +1 -1
- package/types/components/Dropdown/ui/DropdownItem/variations/_size/base.d.ts.map +1 -0
- package/types/components/Dropdown/ui/DropdownItem/variations/_view/base.d.ts.map +1 -0
- package/types/components/Dropdown/ui/index.d.ts +1 -3
- package/types/components/Dropdown/ui/index.d.ts.map +1 -1
- package/types/components/Dropdown/utils/index.d.ts +2 -5
- package/types/components/Dropdown/utils/index.d.ts.map +1 -1
- package/types/components/Select/ui/SelectItem/SelectItem.d.ts +2 -2
- package/types/components/Select/ui/SelectItem/SelectItem.d.ts.map +1 -1
- package/types/components/Select/ui/SelectItem/SelectItem.type.d.ts +2 -2
- package/types/components/Select/utils/index.d.ts +1 -1
- package/types/components/Slider/Slider.d.ts +31 -0
- package/types/components/Slider/Slider.d.ts.map +1 -0
- package/types/components/Slider/Slider.tokens.d.ts +72 -0
- package/types/components/Slider/Slider.tokens.d.ts.map +1 -0
- package/types/components/Slider/Slider.types.d.ts +3 -0
- package/types/components/Slider/Slider.types.d.ts.map +1 -0
- package/types/components/Slider/components/Double/Double.d.ts +4 -0
- package/types/components/Slider/components/Double/Double.d.ts.map +1 -0
- package/types/components/Slider/components/Double/Double.styles.d.ts +43 -0
- package/types/components/Slider/components/Double/Double.styles.d.ts.map +1 -0
- package/types/components/Slider/components/Double/Double.types.d.ts +60 -0
- package/types/components/Slider/components/Double/Double.types.d.ts.map +1 -0
- package/types/components/Slider/components/Single/Single.d.ts +4 -0
- package/types/components/Slider/components/Single/Single.d.ts.map +1 -0
- package/types/components/Slider/components/Single/Single.styles.d.ts +8 -0
- package/types/components/Slider/components/Single/Single.styles.d.ts.map +1 -0
- package/types/components/Slider/components/Single/Single.types.d.ts +62 -0
- package/types/components/Slider/components/Single/Single.types.d.ts.map +1 -0
- package/types/components/Slider/components/SliderBase/SliderBase.d.ts +4 -0
- package/types/components/Slider/components/SliderBase/SliderBase.d.ts.map +1 -0
- package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts +6 -0
- package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts.map +1 -0
- package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts +45 -0
- package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts.map +1 -0
- package/types/components/Slider/components/index.d.ts +6 -0
- package/types/components/Slider/components/index.d.ts.map +1 -0
- package/types/components/Slider/index.d.ts +6 -0
- package/types/components/Slider/index.d.ts.map +1 -0
- package/types/components/Slider/ui/Handle/Handle.d.ts +9 -0
- package/types/components/Slider/ui/Handle/Handle.d.ts.map +1 -0
- package/types/components/Slider/ui/Handle/Handle.styles.d.ts +4 -0
- package/types/components/Slider/ui/Handle/Handle.styles.d.ts.map +1 -0
- package/types/components/Slider/ui/Handle/Handle.types.d.ts +24 -0
- package/types/components/Slider/ui/Handle/Handle.types.d.ts.map +1 -0
- package/types/components/Slider/ui/Thumb/Thumb.d.ts +4 -0
- package/types/components/Slider/ui/Thumb/Thumb.d.ts.map +1 -0
- package/types/components/Slider/ui/Thumb/Thumb.styles.d.ts +5 -0
- package/types/components/Slider/ui/Thumb/Thumb.styles.d.ts.map +1 -0
- package/types/components/Slider/ui/Thumb/Thumb.types.d.ts +12 -0
- package/types/components/Slider/ui/Thumb/Thumb.types.d.ts.map +1 -0
- package/types/components/Slider/ui/index.d.ts +6 -0
- package/types/components/Slider/ui/index.d.ts.map +1 -0
- package/types/components/Slider/utils/index.d.ts +33 -0
- package/types/components/Slider/utils/index.d.ts.map +1 -0
- package/types/components/Slider/variations/_disabled/base.d.ts +2 -0
- package/types/components/Slider/variations/_disabled/base.d.ts.map +1 -0
- package/types/components/Slider/variations/_size/base.d.ts +2 -0
- package/types/components/Slider/variations/_size/base.d.ts.map +1 -0
- package/types/components/Slider/variations/_view/base.d.ts +2 -0
- package/types/components/Slider/variations/_view/base.d.ts.map +1 -0
- package/types/components/TextField/TextField.d.ts.map +1 -1
- package/types/components/_Icon/Icon.assets/DisclosureRight.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.config.d.ts.map +1 -0
- package/types/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.d.ts +30 -0
- package/types/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.d.ts.map +1 -0
- package/types/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.config.d.ts +18 -0
- package/types/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.config.d.ts.map +1 -0
- package/types/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.d.ts +30 -0
- package/types/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.d.ts.map +1 -0
- package/types/examples/plasma_b2c/components/Slider/Slider.config.d.ts +22 -0
- package/types/examples/plasma_b2c/components/Slider/Slider.config.d.ts.map +1 -0
- package/types/examples/plasma_b2c/components/Slider/Slider.d.ts +17 -0
- package/types/examples/plasma_b2c/components/Slider/Slider.d.ts.map +1 -0
- package/types/examples/plasma_web/components/Dropdown/Normal/Dropdown.config.d.ts +18 -0
- package/types/examples/plasma_web/components/Dropdown/Normal/Dropdown.config.d.ts.map +1 -0
- package/types/examples/plasma_web/components/Dropdown/Normal/Dropdown.d.ts +30 -0
- package/types/examples/plasma_web/components/Dropdown/Normal/Dropdown.d.ts.map +1 -0
- package/types/examples/plasma_web/components/Dropdown/Tight/Dropdown.config.d.ts +18 -0
- package/types/examples/plasma_web/components/Dropdown/Tight/Dropdown.config.d.ts.map +1 -0
- package/types/examples/plasma_web/components/Dropdown/Tight/Dropdown.d.ts +30 -0
- package/types/examples/plasma_web/components/Dropdown/Tight/Dropdown.d.ts.map +1 -0
- package/types/examples/plasma_web/components/Slider/Slider.config.d.ts +22 -0
- package/types/examples/plasma_web/components/Slider/Slider.config.d.ts.map +1 -0
- package/types/examples/plasma_web/components/Slider/Slider.d.ts +17 -0
- package/types/examples/plasma_web/components/Slider/Slider.d.ts.map +1 -0
- package/types/examples/sds_engineer/components/Dropdown/Dropdown.config.d.ts +15 -0
- package/types/examples/sds_engineer/components/Dropdown/Dropdown.config.d.ts.map +1 -0
- package/types/examples/sds_engineer/components/Dropdown/Dropdown.d.ts +51 -0
- package/types/examples/sds_engineer/components/Dropdown/Dropdown.d.ts.map +1 -0
- package/types/hooks/index.d.ts +1 -0
- package/types/hooks/index.d.ts.map +1 -1
- package/types/hooks/useIsomorphicLayoutEffect.d.ts +6 -0
- package/types/hooks/useIsomorphicLayoutEffect.d.ts.map +1 -0
- package/types/index.d.ts +1 -0
- package/types/index.d.ts.map +1 -1
- package/types/utils/canUseDOM.d.ts +6 -0
- package/types/utils/canUseDOM.d.ts.map +1 -0
- package/types/utils/index.d.ts +1 -0
- package/types/utils/index.d.ts.map +1 -1
- package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.styles_s4sk53.css +0 -4
- package/cjs/components/Combobox/utils/index.js +0 -23
- package/cjs/components/Combobox/utils/index.js.map +0 -1
- package/cjs/components/Dropdown/Dropdown.styles_1tihqkp.css +0 -3
- package/cjs/components/Dropdown/hooks/useHashMaps.js +0 -31
- package/cjs/components/Dropdown/hooks/useHashMaps.js.map +0 -1
- package/cjs/components/Dropdown/hooks/useKeyboardNavigation.js +0 -200
- package/cjs/components/Dropdown/hooks/useKeyboardNavigation.js.map +0 -1
- package/cjs/components/Dropdown/reducers/focusedPathReducer.js +0 -37
- package/cjs/components/Dropdown/reducers/focusedPathReducer.js.map +0 -1
- package/cjs/components/Dropdown/reducers/pathReducer.js +0 -41
- package/cjs/components/Dropdown/reducers/pathReducer.js.map +0 -1
- package/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +0 -119
- package/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js.map +0 -1
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles_1o4szyu.css +0 -5
- package/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.js +0 -30
- package/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.js.map +0 -1
- package/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles_12e50g5.css +0 -4
- package/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.css +0 -4
- package/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.js +0 -112
- package/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.js.map +0 -1
- package/cjs/components/Dropdown/ui/DropdownItemOld/variations/_size/base.js.map +0 -1
- package/cjs/components/Dropdown/ui/DropdownItemOld/variations/_view/base.js.map +0 -1
- package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.styles_s4sk53.css +0 -4
- package/es/components/Combobox/utils/index.js +0 -19
- package/es/components/Combobox/utils/index.js.map +0 -1
- package/es/components/Dropdown/Dropdown.styles_1tihqkp.css +0 -3
- package/es/components/Dropdown/hooks/useHashMaps.js +0 -27
- package/es/components/Dropdown/hooks/useHashMaps.js.map +0 -1
- package/es/components/Dropdown/hooks/useKeyboardNavigation.js +0 -196
- package/es/components/Dropdown/hooks/useKeyboardNavigation.js.map +0 -1
- package/es/components/Dropdown/reducers/focusedPathReducer.js +0 -33
- package/es/components/Dropdown/reducers/focusedPathReducer.js.map +0 -1
- package/es/components/Dropdown/reducers/pathReducer.js +0 -37
- package/es/components/Dropdown/reducers/pathReducer.js.map +0 -1
- package/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +0 -115
- package/es/components/Dropdown/ui/DropdownInner/DropdownInner.js.map +0 -1
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles_1o4szyu.css +0 -5
- package/es/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.js +0 -23
- package/es/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.js.map +0 -1
- package/es/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles_12e50g5.css +0 -4
- package/es/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.css +0 -4
- package/es/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.js +0 -107
- package/es/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.js.map +0 -1
- package/es/components/Dropdown/ui/DropdownItemOld/variations/_size/base.js.map +0 -1
- package/es/components/Dropdown/ui/DropdownItemOld/variations/_view/base.js.map +0 -1
- package/styled-components/cjs/components/Combobox/utils/index.js +0 -23
- package/styled-components/cjs/components/Dropdown/hooks/useHashMaps.js +0 -29
- package/styled-components/cjs/components/Dropdown/hooks/useKeyboardNavigation.js +0 -199
- package/styled-components/cjs/components/Dropdown/reducers/focusedPathReducer.js +0 -40
- package/styled-components/cjs/components/Dropdown/reducers/pathReducer.js +0 -44
- package/styled-components/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +0 -114
- package/styled-components/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.js +0 -33
- package/styled-components/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.js +0 -119
- package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Dropdown.config.js +0 -25
- package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Dropdown.js +0 -11
- package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Dropdown.stories.tsx +0 -294
- package/styled-components/es/components/Combobox/utils/index.js +0 -15
- package/styled-components/es/components/Dropdown/hooks/useHashMaps.js +0 -23
- package/styled-components/es/components/Dropdown/hooks/useKeyboardNavigation.js +0 -193
- package/styled-components/es/components/Dropdown/reducers/focusedPathReducer.js +0 -34
- package/styled-components/es/components/Dropdown/reducers/pathReducer.js +0 -38
- package/styled-components/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +0 -108
- package/styled-components/es/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.js +0 -25
- package/styled-components/es/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.js +0 -111
- package/styled-components/es/examples/plasma_b2c/components/Dropdown/Dropdown.config.js +0 -19
- package/styled-components/es/examples/plasma_b2c/components/Dropdown/Dropdown.js +0 -5
- package/styled-components/es/examples/plasma_b2c/components/Dropdown/Dropdown.stories.tsx +0 -294
- package/types/components/Combobox/utils/index.d.ts +0 -4
- package/types/components/Combobox/utils/index.d.ts.map +0 -1
- package/types/components/Dropdown/hooks/useHashMaps.d.ts +0 -6
- package/types/components/Dropdown/hooks/useHashMaps.d.ts.map +0 -1
- package/types/components/Dropdown/hooks/useKeyboardNavigation.d.ts +0 -23
- package/types/components/Dropdown/hooks/useKeyboardNavigation.d.ts.map +0 -1
- package/types/components/Dropdown/reducers/focusedPathReducer.d.ts +0 -16
- package/types/components/Dropdown/reducers/focusedPathReducer.d.ts.map +0 -1
- package/types/components/Dropdown/reducers/pathReducer.d.ts +0 -20
- package/types/components/Dropdown/reducers/pathReducer.d.ts.map +0 -1
- package/types/components/Dropdown/ui/DropdownInner/DropdownInner.d.ts +0 -5
- package/types/components/Dropdown/ui/DropdownInner/DropdownInner.d.ts.map +0 -1
- package/types/components/Dropdown/ui/DropdownInner/DropdownInner.type.d.ts +0 -26
- package/types/components/Dropdown/ui/DropdownInner/DropdownInner.type.d.ts.map +0 -1
- package/types/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.d.ts +0 -7
- package/types/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.d.ts.map +0 -1
- package/types/components/Dropdown/ui/DropdownItemOld/DropdownItem.type.d.ts +0 -60
- package/types/components/Dropdown/ui/DropdownItemOld/DropdownItem.type.d.ts.map +0 -1
- package/types/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.d.ts +0 -58
- package/types/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.d.ts.map +0 -1
- package/types/components/Dropdown/ui/DropdownItemOld/variations/_size/base.d.ts.map +0 -1
- package/types/components/Dropdown/ui/DropdownItemOld/variations/_view/base.d.ts.map +0 -1
- package/types/examples/plasma_b2c/components/Dropdown/Dropdown.config.d.ts.map +0 -1
- package/types/examples/plasma_b2c/components/Dropdown/Dropdown.d.ts +0 -13
- package/types/examples/plasma_b2c/components/Dropdown/Dropdown.d.ts.map +0 -1
- /package/cjs/components/Dropdown/ui/{DropdownItemOld → DropdownItem}/variations/_size/base_x642ct.css +0 -0
- /package/cjs/components/Dropdown/ui/{DropdownItemOld → DropdownItem}/variations/_view/base_x642ct.css +0 -0
- /package/{es/components/Dropdown/ui/DropdownItemOld/variations/_size → cjs/components/Slider/variations/_disabled}/base_x642ct.css +0 -0
- /package/{es/components/Dropdown/ui/DropdownItemOld/variations/_view → cjs/components/Slider/variations/_size}/base_x642ct.css +0 -0
- /package/styled-components/cjs/components/Dropdown/ui/{DropdownItemOld → DropdownItem}/variations/_size/base.js +0 -0
- /package/styled-components/cjs/components/Dropdown/ui/{DropdownItemOld → DropdownItem}/variations/_view/base.js +0 -0
- /package/styled-components/cjs/components/{Dropdown/ui/DropdownInner/DropdownInner.type.js → Slider/Slider.types.js} +0 -0
- /package/styled-components/cjs/components/{Dropdown/ui/DropdownItemOld/DropdownItem.type.js → Slider/components/Double/Double.types.js} +0 -0
- /package/styled-components/es/components/Dropdown/ui/{DropdownItemOld → DropdownItem}/variations/_size/base.js +0 -0
- /package/styled-components/es/components/Dropdown/ui/{DropdownItemOld → DropdownItem}/variations/_view/base.js +0 -0
- /package/styled-components/es/components/{Dropdown/ui/DropdownInner/DropdownInner.type.js → Slider/Slider.types.js} +0 -0
- /package/styled-components/es/components/{Dropdown/ui/DropdownItemOld/DropdownItem.type.js → Slider/components/Double/Double.types.js} +0 -0
- /package/types/components/Dropdown/ui/{DropdownItemOld → DropdownItem}/variations/_size/base.d.ts +0 -0
- /package/types/components/Dropdown/ui/{DropdownItemOld → DropdownItem}/variations/_view/base.d.ts +0 -0
- /package/types/examples/plasma_b2c/components/Dropdown/{Dropdown.config.d.ts → Normal/Dropdown.config.d.ts} +0 -0
@@ -0,0 +1,131 @@
|
|
1
|
+
import React, { useState } from 'react';
|
2
|
+
import type { ComponentProps } from 'react';
|
3
|
+
import styled from 'styled-components';
|
4
|
+
import { disableProps } from '@salutejs/plasma-sb-utils';
|
5
|
+
import type { StoryObj, Meta } from '@storybook/react';
|
6
|
+
import { action } from '@storybook/addon-actions';
|
7
|
+
|
8
|
+
import { WithTheme } from '../../../_helpers';
|
9
|
+
|
10
|
+
import { Slider } from './Slider';
|
11
|
+
|
12
|
+
const sizes = ['l', 'm', 's'];
|
13
|
+
const views = ['default', 'accent', 'gradient'];
|
14
|
+
const labelPlacements = ['outer', 'inner'];
|
15
|
+
const rangeValuesPlacement = ['outer', 'inner'];
|
16
|
+
|
17
|
+
const meta: Meta<typeof Slider> = {
|
18
|
+
title: 'plasma_web/Slider',
|
19
|
+
component: Slider,
|
20
|
+
decorators: [WithTheme],
|
21
|
+
argTypes: {
|
22
|
+
view: {
|
23
|
+
options: views,
|
24
|
+
control: {
|
25
|
+
type: 'select',
|
26
|
+
},
|
27
|
+
},
|
28
|
+
size: {
|
29
|
+
options: sizes,
|
30
|
+
control: {
|
31
|
+
type: 'inline-radio',
|
32
|
+
},
|
33
|
+
},
|
34
|
+
...disableProps([
|
35
|
+
'value',
|
36
|
+
'onChangeCommitted',
|
37
|
+
'ariaLabel',
|
38
|
+
'onChange',
|
39
|
+
'fontSizeMultiplier',
|
40
|
+
'gap',
|
41
|
+
'settings',
|
42
|
+
'hasHoverAnimation',
|
43
|
+
]),
|
44
|
+
},
|
45
|
+
};
|
46
|
+
|
47
|
+
export default meta;
|
48
|
+
|
49
|
+
type StoryProps = Omit<ComponentProps<typeof Slider>, 'value' | 'onChangeCommitted'>;
|
50
|
+
type StorySingleProps = StoryProps;
|
51
|
+
|
52
|
+
type StorySingle = StoryObj<StorySingleProps>;
|
53
|
+
type StoryDouble = StoryObj<StoryProps>;
|
54
|
+
|
55
|
+
const SliderWrapper = styled.div`
|
56
|
+
width: 25rem;
|
57
|
+
`;
|
58
|
+
|
59
|
+
const StoryDefault = (args: StorySingleProps) => {
|
60
|
+
const [value, setValue] = useState(30);
|
61
|
+
|
62
|
+
const onChangeCommittedHandle = (values) => {
|
63
|
+
setValue(values);
|
64
|
+
};
|
65
|
+
|
66
|
+
return (
|
67
|
+
<SliderWrapper>
|
68
|
+
<Slider value={value} onChangeCommitted={onChangeCommittedHandle} onChange={action('onChange')} {...args} />
|
69
|
+
</SliderWrapper>
|
70
|
+
);
|
71
|
+
};
|
72
|
+
|
73
|
+
export const Default: StorySingle = {
|
74
|
+
argTypes: {
|
75
|
+
labelPlacement: {
|
76
|
+
options: labelPlacements,
|
77
|
+
control: {
|
78
|
+
type: 'inline-radio',
|
79
|
+
},
|
80
|
+
},
|
81
|
+
rangeValuesPlacement: {
|
82
|
+
options: rangeValuesPlacement,
|
83
|
+
control: {
|
84
|
+
type: 'inline-radio',
|
85
|
+
},
|
86
|
+
},
|
87
|
+
},
|
88
|
+
args: {
|
89
|
+
view: 'default',
|
90
|
+
size: 'm',
|
91
|
+
min: 0,
|
92
|
+
max: 100,
|
93
|
+
disabled: false,
|
94
|
+
ariaLabel: 'Цена товара',
|
95
|
+
multipleStepSize: 10,
|
96
|
+
label: 'Цена товара',
|
97
|
+
labelPlacement: 'outer',
|
98
|
+
rangeValuesPlacement: 'outer',
|
99
|
+
showRangeValues: true,
|
100
|
+
showCurrentValue: false,
|
101
|
+
},
|
102
|
+
render: (args) => <StoryDefault {...args} />,
|
103
|
+
};
|
104
|
+
|
105
|
+
const StoryMultipleValues = (args: StoryProps) => {
|
106
|
+
const [value, setValue] = useState([10, 80]);
|
107
|
+
|
108
|
+
const onChangeCommittedHandle = (values) => {
|
109
|
+
setValue(values);
|
110
|
+
};
|
111
|
+
|
112
|
+
return (
|
113
|
+
<SliderWrapper>
|
114
|
+
<Slider value={value} onChangeCommitted={onChangeCommittedHandle} onChange={action('onChange')} {...args} />
|
115
|
+
</SliderWrapper>
|
116
|
+
);
|
117
|
+
};
|
118
|
+
|
119
|
+
export const MultipleValues: StoryDouble = {
|
120
|
+
args: {
|
121
|
+
view: 'default',
|
122
|
+
size: 'm',
|
123
|
+
min: 0,
|
124
|
+
max: 100,
|
125
|
+
disabled: false,
|
126
|
+
label: 'Цена товара',
|
127
|
+
ariaLabel: ['Минимальная цена товара', 'Максимальная цена товара'],
|
128
|
+
multipleStepSize: 10,
|
129
|
+
},
|
130
|
+
render: (args) => <StoryMultipleValues {...args} />,
|
131
|
+
};
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import { css } from 'styled-components';
|
2
|
+
import { dropdownTokens } from '../../../../components/Dropdown';
|
3
|
+
export var config = {
|
4
|
+
defaults: {
|
5
|
+
view: 'primary',
|
6
|
+
size: 'm'
|
7
|
+
},
|
8
|
+
variations: {
|
9
|
+
size: {
|
10
|
+
m: /*#__PURE__*/css(["", ":15rem;", ":auto;", ":0;", ":0.5rem;", ":0;", ":0.5rem;", ":0;", ":auto;", ":1.25rem;", ":0.5rem;", ":0.75rem;", ":0.25rem;", ":0.75rem;", ":0;", ":0;", ":0;", ":0;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":auto;", ":auto;", ":0.3125rem;", ":0.75rem;", ":0.4375rem;", ":0.75rem;", ":0;", ":0;", ":0;", ":0;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":auto;", ":0.063rem;", ":0;", ":0;", ":0;", ":0;", ":auto;", ":0;", ":0;", ":0;", ":0;", ":0;", ":0;", ":0.25rem;", ":0;", ":0.25rem;", ":0.75rem;", ":0.5rem;", ":0.75rem;", ":0.25rem;", ":0;", ":0;", ":0;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":auto;", ":1.25rem;", ":0.25rem;", ":0.75rem;", ":0.5rem;", ":0.75rem;", ":0;", ":0;", ":0;", ":0;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], dropdownTokens.width, dropdownTokens.height, dropdownTokens.borderRadius, dropdownTokens.paddingTop, dropdownTokens.paddingRight, dropdownTokens.paddingBottom, dropdownTokens.paddingLeft, dropdownTokens.headerWidth, dropdownTokens.headerHeight, dropdownTokens.headerPaddingTop, dropdownTokens.headerPaddingRight, dropdownTokens.headerPaddingBottom, dropdownTokens.headerPaddingLeft, dropdownTokens.headerMarginTop, dropdownTokens.headerMarginRight, dropdownTokens.headerMarginBottom, dropdownTokens.headerMarginLeft, dropdownTokens.headerFontFamily, dropdownTokens.headerFontSize, dropdownTokens.headerFontStyle, dropdownTokens.headerFontWeightBold, dropdownTokens.headerFontLetterSpacing, dropdownTokens.headerFontLineHeight, dropdownTokens.itemWidth, dropdownTokens.itemHeight, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemMarginTop, dropdownTokens.itemMarginRight, dropdownTokens.itemMarginBottom, dropdownTokens.itemMarginLeft, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight, dropdownTokens.dividerWidth, dropdownTokens.dividerHeight, dropdownTokens.dividerMarginTop, dropdownTokens.dividerMarginRight, dropdownTokens.dividerMarginBottom, dropdownTokens.dividerMarginLeft, dropdownTokens.groupWidth, dropdownTokens.groupPaddingTop, dropdownTokens.groupPaddingRight, dropdownTokens.groupPaddingBottom, dropdownTokens.groupPaddingLeft, dropdownTokens.groupMarginTop, dropdownTokens.groupMarginRight, dropdownTokens.groupMarginBottom, dropdownTokens.groupMarginLeft, dropdownTokens.groupLabelPaddingTop, dropdownTokens.groupLabelPaddingRight, dropdownTokens.groupLabelPaddingBottom, dropdownTokens.groupLabelPaddingLeft, dropdownTokens.groupLabelMarginTop, dropdownTokens.groupLabelMarginRight, dropdownTokens.groupLabelMarginBottom, dropdownTokens.groupLabelMarginLeft, dropdownTokens.groupLabelFontFamily, dropdownTokens.groupLabelFontSize, dropdownTokens.groupLabelFontStyle, dropdownTokens.groupLabelFontWeight, dropdownTokens.groupLabelLetterSpacing, dropdownTokens.groupLabelLineHeight, dropdownTokens.footerWidth, dropdownTokens.footerHeight, dropdownTokens.footerPaddingTop, dropdownTokens.footerPaddingRight, dropdownTokens.footerPaddingBottom, dropdownTokens.footerPaddingLeft, dropdownTokens.footerMarginTop, dropdownTokens.footerMarginRight, dropdownTokens.footerMarginBottom, dropdownTokens.footerMarginLeft, dropdownTokens.footerFontFamily, dropdownTokens.footerFontSize, dropdownTokens.footerFontStyle, dropdownTokens.footerFontWeightBold, dropdownTokens.footerFontLetterSpacing, dropdownTokens.footerFontLineHeight)
|
11
|
+
},
|
12
|
+
view: {
|
13
|
+
primary: /*#__PURE__*/css(["", ":0.4;", ":var(--plasma-colors-white);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--plasma-colors-transparent);", ":var(--on-light-text-primary);", ":rgba(12,143,230,0.12);", ":var(--on-light-surface-transparent-secondary);", ":inherit;", ":var(--on-light-surface-transparent-secondary);", ":inherit;", ":var(--plasma-colors-overlay-blur);", ":var(--plasma-colors-transparent);", ":var(--plasma-colors-transparent);", ":var(--on-light-text-primary);"], dropdownTokens.disabledOpacity, dropdownTokens.background, dropdownTokens.boxShadow, dropdownTokens.headerBackground, dropdownTokens.itemBackground, dropdownTokens.itemColor, dropdownTokens.itemBackgroundHover, dropdownTokens.itemBackgroundSelected, dropdownTokens.itemColorSelected, dropdownTokens.itemBackgroundSelectedHover, dropdownTokens.itemColorSelectedHover, dropdownTokens.dividerColor, dropdownTokens.footerBackground, dropdownTokens.groupBackground, dropdownTokens.groupLabelColor)
|
14
|
+
}
|
15
|
+
}
|
16
|
+
};
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import { dropdownConfig, dropdownDividerConfig, dropdownFooterConfig, dropdownGroupConfig, dropdownHeaderConfig, dropdownItemConfig } from '../../../../components/Dropdown';
|
2
|
+
import { component, mergeConfig } from '../../../../engines';
|
3
|
+
import { config } from './Dropdown.config';
|
4
|
+
var mergedConfig = /*#__PURE__*/mergeConfig(dropdownConfig, config);
|
5
|
+
export var Dropdown = /*#__PURE__*/component(mergedConfig);
|
6
|
+
var mergedDividerConfig = /*#__PURE__*/mergeConfig(dropdownDividerConfig);
|
7
|
+
export var DropdownDivider = /*#__PURE__*/component(mergedDividerConfig);
|
8
|
+
var mergedFooterConfig = /*#__PURE__*/mergeConfig(dropdownFooterConfig);
|
9
|
+
export var DropdownFooter = /*#__PURE__*/component(mergedFooterConfig);
|
10
|
+
var mergedGroupConfig = /*#__PURE__*/mergeConfig(dropdownGroupConfig);
|
11
|
+
export var DropdownGroup = /*#__PURE__*/component(mergedGroupConfig);
|
12
|
+
var mergedHeaderConfig = /*#__PURE__*/mergeConfig(dropdownHeaderConfig);
|
13
|
+
export var DropdownHeader = /*#__PURE__*/component(mergedHeaderConfig);
|
14
|
+
var mergedItemConfig = /*#__PURE__*/mergeConfig(dropdownItemConfig);
|
15
|
+
export var DropdownItem = /*#__PURE__*/component(mergedItemConfig);
|
@@ -0,0 +1,277 @@
|
|
1
|
+
import React, { useRef, useState } from 'react';
|
2
|
+
import type { ComponentProps } from 'react';
|
3
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
4
|
+
import styled from 'styled-components';
|
5
|
+
import { css } from 'styled-components';
|
6
|
+
import { action } from '@storybook/addon-actions';
|
7
|
+
|
8
|
+
import { WithTheme, argTypesFromConfig } from '../../../_helpers';
|
9
|
+
import { mergeConfig } from '../../../../engines';
|
10
|
+
import { dropdownConfig } from '../../../../components/Dropdown';
|
11
|
+
import { Checkbox } from '../Checkbox/Checkbox';
|
12
|
+
import { Radiobox } from '../Radiobox/Radiobox';
|
13
|
+
import { Button } from '../Button/Button';
|
14
|
+
|
15
|
+
import { Dropdown, DropdownDivider, DropdownFooter, DropdownGroup, DropdownHeader, DropdownItem } from './Dropdown';
|
16
|
+
import { config } from './Dropdown.config';
|
17
|
+
|
18
|
+
type StoryDropdownPropsCustom = {
|
19
|
+
skidding?: number;
|
20
|
+
distance?: number;
|
21
|
+
};
|
22
|
+
|
23
|
+
type StoryDropdownProps = ComponentProps<typeof Dropdown> & StoryDropdownPropsCustom;
|
24
|
+
|
25
|
+
const placements: Array<string> = ['top', 'bottom', 'right', 'left', 'auto'];
|
26
|
+
const triggers: Array<string> = ['click', 'hover'];
|
27
|
+
|
28
|
+
const meta: Meta<StoryDropdownProps> = {
|
29
|
+
title: 'sds_engineer/Dropdown',
|
30
|
+
decorators: [WithTheme],
|
31
|
+
component: Dropdown,
|
32
|
+
argTypes: {
|
33
|
+
placement: {
|
34
|
+
options: placements,
|
35
|
+
control: {
|
36
|
+
type: 'select',
|
37
|
+
},
|
38
|
+
},
|
39
|
+
trigger: {
|
40
|
+
options: triggers,
|
41
|
+
control: {
|
42
|
+
type: 'select',
|
43
|
+
},
|
44
|
+
},
|
45
|
+
...argTypesFromConfig(mergeConfig(dropdownConfig, config)),
|
46
|
+
},
|
47
|
+
args: {
|
48
|
+
placement: 'bottom',
|
49
|
+
trigger: 'click',
|
50
|
+
closeOnOverlayClick: true,
|
51
|
+
closeOnEsc: true,
|
52
|
+
isFocusTrapped: true,
|
53
|
+
skidding: 0,
|
54
|
+
distance: 6,
|
55
|
+
},
|
56
|
+
};
|
57
|
+
|
58
|
+
export default meta;
|
59
|
+
|
60
|
+
const StyledCheckbox = styled(Checkbox)`
|
61
|
+
margin-left: 0rem;
|
62
|
+
margin-bottom: 0rem;
|
63
|
+
`;
|
64
|
+
|
65
|
+
const StyledRadiobox = styled(Radiobox)`
|
66
|
+
margin-left: 0rem;
|
67
|
+
margin-bottom: 0rem;
|
68
|
+
`;
|
69
|
+
|
70
|
+
const headerClass = css`
|
71
|
+
text-transform: uppercase;
|
72
|
+
color: rgba(23, 23, 23, 0.56);
|
73
|
+
`;
|
74
|
+
|
75
|
+
const TrashIcon = (props) => (
|
76
|
+
<svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
|
77
|
+
<path
|
78
|
+
fillRule="evenodd"
|
79
|
+
clipRule="evenodd"
|
80
|
+
d="M8 5.5A2.5 2.5 0 0110.5 3h3A2.5 2.5 0 0116 5.5V6h-2v-.5a.5.5 0 00-.5-.5h-3a.5.5 0 00-.5.5V6H8v-.5zM4 8a1 1 0 011-1h14a1 1 0 110 2h-1v9.5a2.5 2.5 0 01-2.5 2.5h-7A2.5 2.5 0 016 18.5V9H5a1 1 0 01-1-1z"
|
81
|
+
fill="currentColor"
|
82
|
+
/>
|
83
|
+
</svg>
|
84
|
+
);
|
85
|
+
|
86
|
+
const StyledTrashIcon = styled(TrashIcon)`
|
87
|
+
width: 1.25rem;
|
88
|
+
height: 1.25rem;
|
89
|
+
`;
|
90
|
+
|
91
|
+
const onChange = action('onChange');
|
92
|
+
const onSelect = action('onSelect');
|
93
|
+
const onClick = action('onClick');
|
94
|
+
|
95
|
+
const dropdownItems = [...Array(4).keys()].map((num) => ({
|
96
|
+
value: `item_${num}`,
|
97
|
+
child: `Item ${num}`,
|
98
|
+
}));
|
99
|
+
|
100
|
+
const StoryDefault = (args: StoryDropdownProps) => {
|
101
|
+
const [selected, setSelected] = useState('');
|
102
|
+
const [isOpen, setIsOpen] = useState(false);
|
103
|
+
const [isOpenDropdown2, setIsOpenDropdown2] = useState(false);
|
104
|
+
|
105
|
+
const onMainClose = () => {
|
106
|
+
setIsOpen(false);
|
107
|
+
setIsOpenDropdown2(false);
|
108
|
+
};
|
109
|
+
|
110
|
+
const onMainToggle = (openValue: boolean) => {
|
111
|
+
setIsOpen(openValue);
|
112
|
+
|
113
|
+
if (!openValue) {
|
114
|
+
onMainClose();
|
115
|
+
}
|
116
|
+
};
|
117
|
+
|
118
|
+
const handleSelect = (value: string, text: string) => {
|
119
|
+
setSelected(value);
|
120
|
+
onSelect(value, text);
|
121
|
+
};
|
122
|
+
|
123
|
+
return (
|
124
|
+
<div>
|
125
|
+
<h3>This is header</h3>
|
126
|
+
<Dropdown target={<Button>Target</Button>} isOpen={isOpen} onToggle={onMainToggle} {...args}>
|
127
|
+
<DropdownHeader className={headerClass}>Header</DropdownHeader>
|
128
|
+
<DropdownDivider />
|
129
|
+
{dropdownItems.map((item) => (
|
130
|
+
<DropdownItem
|
131
|
+
key={item.value}
|
132
|
+
isSelected={item.value === selected}
|
133
|
+
onSelect={() => handleSelect(item.value, item.child)}
|
134
|
+
onClick={onClick}
|
135
|
+
value={item.value}
|
136
|
+
>
|
137
|
+
{item.child}
|
138
|
+
</DropdownItem>
|
139
|
+
))}
|
140
|
+
<Dropdown
|
141
|
+
target={<DropdownItem>Nested dropdown ➞</DropdownItem>}
|
142
|
+
onToggle={(is) => setIsOpenDropdown2(is)}
|
143
|
+
isOpen={isOpenDropdown2}
|
144
|
+
offset={[0, 0]}
|
145
|
+
>
|
146
|
+
<DropdownGroup label="This is radiogroup">
|
147
|
+
<DropdownItem
|
148
|
+
contentLeft={StyledRadiobox}
|
149
|
+
name="test"
|
150
|
+
value="1"
|
151
|
+
onChange={onChange}
|
152
|
+
text="Nested 1"
|
153
|
+
/>
|
154
|
+
|
155
|
+
<DropdownItem
|
156
|
+
contentLeft={StyledRadiobox}
|
157
|
+
name="test"
|
158
|
+
value="2"
|
159
|
+
onChange={onChange}
|
160
|
+
text="Nested 2"
|
161
|
+
/>
|
162
|
+
<DropdownItem
|
163
|
+
contentLeft={StyledRadiobox}
|
164
|
+
name="test"
|
165
|
+
value="3"
|
166
|
+
onChange={onChange}
|
167
|
+
text="Nested 3"
|
168
|
+
/>
|
169
|
+
</DropdownGroup>
|
170
|
+
<DropdownItem contentLeft={StyledCheckbox} text="Nested 4" />
|
171
|
+
<DropdownItem contentRight={StyledCheckbox} text="Nested 5" />
|
172
|
+
|
173
|
+
<DropdownItem contentLeft={StyledTrashIcon} text="Nested 6" />
|
174
|
+
<Button onClick={() => setIsOpenDropdown2(false)}>Close nested</Button>
|
175
|
+
</Dropdown>
|
176
|
+
|
177
|
+
<DropdownItem onClick={onClick} value="disabled" disabled>
|
178
|
+
disabled
|
179
|
+
</DropdownItem>
|
180
|
+
|
181
|
+
<DropdownGroup label="Group">
|
182
|
+
<DropdownItem
|
183
|
+
contentLeft={StyledRadiobox}
|
184
|
+
name="test"
|
185
|
+
value="1"
|
186
|
+
disabled
|
187
|
+
onChange={onChange}
|
188
|
+
text="Disabled 1"
|
189
|
+
/>
|
190
|
+
|
191
|
+
<DropdownItem name="test" value="2" disabled text="Disabled group 2" />
|
192
|
+
</DropdownGroup>
|
193
|
+
|
194
|
+
<DropdownDivider />
|
195
|
+
<DropdownFooter className={headerClass}>Footer</DropdownFooter>
|
196
|
+
</Dropdown>
|
197
|
+
</div>
|
198
|
+
);
|
199
|
+
};
|
200
|
+
|
201
|
+
export const Default: StoryObj<StoryDropdownProps> = {
|
202
|
+
render: (args) => <StoryDefault {...args} />,
|
203
|
+
};
|
204
|
+
|
205
|
+
const StoryContextMenu = (args: StoryDropdownProps) => {
|
206
|
+
const [contextPosition, setContextPosition] = useState([0, 0]);
|
207
|
+
const dropdownRef = useRef<HTMLDivElement | null>(null);
|
208
|
+
const [selected, setSelected] = useState('');
|
209
|
+
const [isOpen, setIsOpen] = useState(false);
|
210
|
+
|
211
|
+
const onMainToggle = (openValue: boolean) => {
|
212
|
+
setIsOpen(openValue);
|
213
|
+
};
|
214
|
+
|
215
|
+
const handleSelect = (value: string, text: string) => {
|
216
|
+
setSelected(value);
|
217
|
+
onSelect(value, text);
|
218
|
+
setIsOpen(false);
|
219
|
+
};
|
220
|
+
|
221
|
+
const onClickAway = (event: React.MouseEvent<HTMLDivElement>) => {
|
222
|
+
event.preventDefault();
|
223
|
+
if (dropdownRef?.current && !dropdownRef.current?.contains(event.target as Element)) {
|
224
|
+
setIsOpen(false);
|
225
|
+
}
|
226
|
+
};
|
227
|
+
|
228
|
+
const onContextMenu = (event: React.MouseEvent<HTMLDivElement>) => {
|
229
|
+
event.preventDefault();
|
230
|
+
|
231
|
+
const { clientX, clientY } = event;
|
232
|
+
|
233
|
+
setContextPosition([clientX, clientY]);
|
234
|
+
setIsOpen(true);
|
235
|
+
};
|
236
|
+
|
237
|
+
return (
|
238
|
+
<div
|
239
|
+
style={{
|
240
|
+
width: '100%',
|
241
|
+
height: '100%',
|
242
|
+
background: 'gainsboro',
|
243
|
+
}}
|
244
|
+
onClick={onClickAway}
|
245
|
+
onContextMenu={onContextMenu}
|
246
|
+
>
|
247
|
+
<div>Right-click the mouse button - to open</div>
|
248
|
+
<div>Left-click the mouse button - to close</div>
|
249
|
+
<div
|
250
|
+
ref={dropdownRef}
|
251
|
+
style={{ position: 'absolute', top: `${contextPosition[1]}px`, left: `${contextPosition[0]}px` }}
|
252
|
+
>
|
253
|
+
<Dropdown isOpen={isOpen} onToggle={onMainToggle} {...args}>
|
254
|
+
<DropdownHeader className={headerClass}>Header</DropdownHeader>
|
255
|
+
<DropdownDivider />
|
256
|
+
{dropdownItems.map((item) => (
|
257
|
+
<DropdownItem
|
258
|
+
key={item.value}
|
259
|
+
isSelected={item.value === selected}
|
260
|
+
onSelect={() => handleSelect(item.value, item.child)}
|
261
|
+
onClick={onClick}
|
262
|
+
value={item.value}
|
263
|
+
>
|
264
|
+
{item.child}
|
265
|
+
</DropdownItem>
|
266
|
+
))}
|
267
|
+
<DropdownDivider />
|
268
|
+
<DropdownFooter className={headerClass}>Footer</DropdownFooter>
|
269
|
+
</Dropdown>
|
270
|
+
</div>
|
271
|
+
</div>
|
272
|
+
);
|
273
|
+
};
|
274
|
+
|
275
|
+
export const ContextMenu: StoryObj<StoryDropdownProps> = {
|
276
|
+
render: (args) => <StoryContextMenu {...args} />,
|
277
|
+
};
|
@@ -1,4 +1,5 @@
|
|
1
1
|
export { useUniqId } from './useUniqId';
|
2
2
|
export { usePreviousValue } from './usePreviousValue';
|
3
3
|
export { useForceUpdate } from './useForceUpdate';
|
4
|
-
export { useDidMountEffect } from './useDidMountEffect';
|
4
|
+
export { useDidMountEffect } from './useDidMountEffect';
|
5
|
+
export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
|
@@ -44,4 +44,5 @@ export * from './components/Grid';
|
|
44
44
|
export * from './components/Progress';
|
45
45
|
export * from './components/Select';
|
46
46
|
export * from './components/Divider';
|
47
|
-
export * from './components/Toolbar';
|
47
|
+
export * from './components/Toolbar';
|
48
|
+
export * from './components/Slider';
|
@@ -0,0 +1,5 @@
|
|
1
|
+
/**
|
2
|
+
* This constant tells you whether can DOM be used.
|
3
|
+
* https://github.com/facebook/react/blob/master/packages/shared/ExecutionEnvironment.js
|
4
|
+
*/
|
5
|
+
export var canUseDOM = !!(typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined');
|
@@ -1,43 +1,41 @@
|
|
1
|
-
|
2
|
-
import type
|
3
|
-
import { ComboboxItemProps } from './ComboboxItem.type';
|
4
|
-
export declare const comboboxItemRoot: (Root: RootProps<HTMLDivElement, ComboboxItemProps>) => React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> & {
|
1
|
+
/// <reference types="react" />
|
2
|
+
export declare const comboboxItemRoot: (Root: import("../../../..").RootProps<HTMLDivElement, import("../../../Dropdown/ui/DropdownItem/DropdownItem.type").DropdownItemProps>) => import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLDivElement>, "onSelect"> & {
|
5
3
|
id?: string | undefined;
|
6
4
|
disabled?: boolean | undefined;
|
7
|
-
label?:
|
5
|
+
label?: import("react").ReactNode;
|
8
6
|
role?: string | undefined;
|
9
|
-
contentLeft?: string | number | boolean |
|
10
|
-
contentRight?: string | number | boolean |
|
7
|
+
contentLeft?: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactFragment | import("react").ReactPortal | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | null | undefined;
|
8
|
+
contentRight?: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactFragment | import("react").ReactPortal | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | null | undefined;
|
11
9
|
name?: string | undefined;
|
12
10
|
checked?: boolean | undefined;
|
13
11
|
text?: string | undefined;
|
14
12
|
value?: string | number | boolean | undefined;
|
15
13
|
isSelected?: boolean | undefined;
|
16
|
-
onClick?: ((event:
|
14
|
+
onClick?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
|
17
15
|
onSelect?: ((value?: any, text?: any) => void) | undefined;
|
18
16
|
size?: string | undefined;
|
19
17
|
view?: string | undefined;
|
20
|
-
} &
|
18
|
+
} & import("react").RefAttributes<HTMLDivElement>>;
|
21
19
|
export declare const comboboxItemConfig: {
|
22
20
|
name: string;
|
23
21
|
tag: string;
|
24
|
-
layout: (Root: RootProps<HTMLDivElement,
|
22
|
+
layout: (Root: import("../../../..").RootProps<HTMLDivElement, import("../../../Dropdown/ui/DropdownItem/DropdownItem.type").DropdownItemProps>) => import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLDivElement>, "onSelect"> & {
|
25
23
|
id?: string | undefined;
|
26
24
|
disabled?: boolean | undefined;
|
27
|
-
label?:
|
25
|
+
label?: import("react").ReactNode;
|
28
26
|
role?: string | undefined;
|
29
|
-
contentLeft?: string | number | boolean |
|
30
|
-
contentRight?: string | number | boolean |
|
27
|
+
contentLeft?: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactFragment | import("react").ReactPortal | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | null | undefined;
|
28
|
+
contentRight?: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactFragment | import("react").ReactPortal | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | null | undefined;
|
31
29
|
name?: string | undefined;
|
32
30
|
checked?: boolean | undefined;
|
33
31
|
text?: string | undefined;
|
34
32
|
value?: string | number | boolean | undefined;
|
35
33
|
isSelected?: boolean | undefined;
|
36
|
-
onClick?: ((event:
|
34
|
+
onClick?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
|
37
35
|
onSelect?: ((value?: any, text?: any) => void) | undefined;
|
38
36
|
size?: string | undefined;
|
39
37
|
view?: string | undefined;
|
40
|
-
} &
|
38
|
+
} & import("react").RefAttributes<HTMLDivElement>>;
|
41
39
|
base: import("@linaria/core").LinariaClassName;
|
42
40
|
variations: {
|
43
41
|
view: {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ComboboxItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Combobox/ui/ComboboxItem/ComboboxItem.tsx"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"ComboboxItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Combobox/ui/ComboboxItem/ComboboxItem.tsx"],"names":[],"mappings":";AAMA,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;kDAAmB,CAAC;AAEjD,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiB9B,CAAC"}
|
@@ -1,7 +1,3 @@
|
|
1
|
-
|
2
|
-
export declare const StyledContentLeft: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
|
3
|
-
export declare const StyledContentRight: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
|
4
|
-
export declare const StyledText: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
|
5
|
-
export declare const baseContent: string;
|
1
|
+
export declare const mappingOverride: string;
|
6
2
|
export declare const base: import("@linaria/core").LinariaClassName;
|
7
3
|
//# sourceMappingURL=ComboboxItem.styles.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ComboboxItem.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.ts"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"ComboboxItem.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,eAAe,QA+B3B,CAAC;AAEF,eAAO,MAAM,IAAI,0CAGhB,CAAC"}
|
@@ -1,60 +1,3 @@
|
|
1
|
-
import
|
2
|
-
declare type
|
3
|
-
/**
|
4
|
-
* Уникальный идентификатор элемента
|
5
|
-
*/
|
6
|
-
id?: string;
|
7
|
-
/**
|
8
|
-
* Компонент не активен
|
9
|
-
*/
|
10
|
-
disabled?: boolean;
|
11
|
-
/**
|
12
|
-
* Метка-подпись к элементу
|
13
|
-
*/
|
14
|
-
label?: ReactNode;
|
15
|
-
/**
|
16
|
-
* WAI-ARIA role элемента меню
|
17
|
-
*/
|
18
|
-
role?: string;
|
19
|
-
/**
|
20
|
-
* Слот для контента слева
|
21
|
-
*/
|
22
|
-
contentLeft?: ElementType | ReactNode;
|
23
|
-
/**
|
24
|
-
* Слот для контента справа
|
25
|
-
*/
|
26
|
-
contentRight?: ElementType | ReactNode;
|
27
|
-
/**
|
28
|
-
* Название слота контента
|
29
|
-
*/
|
30
|
-
name?: string;
|
31
|
-
/**
|
32
|
-
* Отмечен ли данный элемент
|
33
|
-
*/
|
34
|
-
checked?: boolean;
|
35
|
-
/**
|
36
|
-
* Содержимое контента
|
37
|
-
*/
|
38
|
-
text?: string;
|
39
|
-
/**
|
40
|
-
* Значение контента
|
41
|
-
*/
|
42
|
-
value?: string | number | boolean;
|
43
|
-
/**
|
44
|
-
* Значение контента
|
45
|
-
*/
|
46
|
-
isSelected?: boolean;
|
47
|
-
/**
|
48
|
-
* Коллбек при клике на элемент
|
49
|
-
*/
|
50
|
-
onClick?: (event: MouseEvent<HTMLDivElement>) => void;
|
51
|
-
/**
|
52
|
-
* Коллбек при выборе элемента
|
53
|
-
*/
|
54
|
-
onSelect?: (value?: any, text?: any) => void;
|
55
|
-
size?: string;
|
56
|
-
view?: string;
|
57
|
-
};
|
58
|
-
export declare type ComboboxItemProps = Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> & ComboboxItemCustomProps;
|
59
|
-
export {};
|
1
|
+
import { DropdownItemProps } from '../../../Dropdown/ui/DropdownItem/DropdownItem.type';
|
2
|
+
export declare type ComboboxItemProps = DropdownItemProps;
|
60
3
|
//# sourceMappingURL=ComboboxItem.type.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ComboboxItem.type.d.ts","sourceRoot":"","sources":["../../../../../src/components/Combobox/ui/ComboboxItem/ComboboxItem.type.ts"],"names":[],"mappings":"AAAA,OAAO,
|
1
|
+
{"version":3,"file":"ComboboxItem.type.d.ts","sourceRoot":"","sources":["../../../../../src/components/Combobox/ui/ComboboxItem/ComboboxItem.type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qDAAqD,CAAC;AAExF,oBAAY,iBAAiB,GAAG,iBAAiB,CAAC"}
|