@salutejs/plasma-new-hope 0.78.0-canary.1185.8913944828.0 → 0.78.0-canary.1195.8913931601.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 -12
- package/cjs/components/Combobox/Combobox.js +1 -1
- package/cjs/components/Combobox/ui/ComboboxDivider/ComboboxDivider.css +6 -10
- package/cjs/components/Combobox/ui/ComboboxDivider/ComboboxDivider.js +3 -3
- package/cjs/components/Combobox/ui/ComboboxFooter/ComboboxFooter.css +6 -10
- package/cjs/components/Combobox/ui/ComboboxFooter/ComboboxFooter.js +3 -3
- package/cjs/components/Combobox/ui/ComboboxGroup/ComboboxGroup.css +6 -10
- package/cjs/components/Combobox/ui/ComboboxGroup/ComboboxGroup.js +3 -3
- package/cjs/components/Combobox/ui/ComboboxHeader/ComboboxHeader.css +6 -10
- package/cjs/components/Combobox/ui/ComboboxHeader/ComboboxHeader.js +3 -3
- 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 -20
- 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 +24 -12
- 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 +4 -31
- 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/DropdownItem/variations/_size/base.js +9 -0
- package/cjs/components/Dropdown/ui/DropdownItem/variations/_size/base.js.map +1 -0
- package/cjs/components/Dropdown/ui/DropdownItem/variations/_size/base_x642ct.css +1 -0
- package/cjs/components/Dropdown/ui/DropdownItem/variations/_view/base.js +9 -0
- package/cjs/components/Dropdown/ui/DropdownItem/variations/_view/base.js.map +1 -0
- package/cjs/components/Dropdown/ui/DropdownItem/variations/_view/base_x642ct.css +1 -0
- package/cjs/components/Dropdown/utils/index.js +13 -14
- package/cjs/components/Dropdown/utils/index.js.map +1 -1
- package/cjs/components/IconButton/IconButton.css +25 -0
- package/cjs/components/IconButton/IconButton.js +84 -0
- package/cjs/components/IconButton/IconButton.js.map +1 -0
- package/cjs/components/IconButton/IconButton.styles.js +25 -0
- package/cjs/components/IconButton/IconButton.styles.js.map +1 -0
- package/cjs/components/IconButton/IconButton.styles_12iyaye.css +2 -0
- package/cjs/components/IconButton/IconButton.tokens.js +36 -0
- package/cjs/components/IconButton/IconButton.tokens.js.map +1 -0
- package/cjs/components/IconButton/variations/_disabled/base.js +9 -0
- package/cjs/components/IconButton/variations/_disabled/base.js.map +1 -0
- package/cjs/components/IconButton/variations/_disabled/base_x642ct.css +1 -0
- package/cjs/components/IconButton/variations/_focused/base.js +9 -0
- package/cjs/components/IconButton/variations/_focused/base.js.map +1 -0
- package/cjs/components/IconButton/variations/_focused/base_x642ct.css +1 -0
- package/cjs/components/IconButton/variations/_size/base.js +9 -0
- package/cjs/components/IconButton/variations/_size/base.js.map +1 -0
- package/cjs/components/IconButton/variations/_size/base_x642ct.css +1 -0
- package/cjs/components/IconButton/variations/_view/base.js +9 -0
- package/cjs/components/IconButton/variations/_view/base.js.map +1 -0
- package/cjs/components/IconButton/variations/_view/base_x642ct.css +1 -0
- package/cjs/components/Pagination/Pagination.css +7 -39
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +7 -39
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.js +2 -2
- package/cjs/components/Select/Select.css +7 -39
- package/cjs/components/Select/Select.js +3 -3
- package/cjs/components/Select/ui/SelectDivider/SelectDivider.css +6 -10
- package/cjs/components/Select/ui/SelectDivider/SelectDivider.js +3 -3
- package/cjs/components/Select/ui/SelectFooter/SelectFooter.css +6 -10
- package/cjs/components/Select/ui/SelectFooter/SelectFooter.js +3 -3
- package/cjs/components/Select/ui/SelectGroup/SelectGroup.css +6 -10
- package/cjs/components/Select/ui/SelectGroup/SelectGroup.js +3 -3
- package/cjs/components/Select/ui/SelectHeader/SelectHeader.css +6 -10
- package/cjs/components/Select/ui/SelectHeader/SelectHeader.js +3 -3
- package/cjs/components/Select/ui/SelectItem/SelectItem.css +7 -59
- package/cjs/components/Select/ui/SelectItem/SelectItem.js +4 -4
- package/cjs/components/Select/ui/SelectItem/SelectItem.js.map +1 -1
- package/cjs/components/Select/ui/SelectItem/SelectItem.styles.js +3 -3
- package/cjs/components/Select/ui/SelectItem/SelectItem.styles.js.map +1 -1
- package/cjs/components/Select/ui/SelectItem/SelectItem.styles_6h17aw.css +1 -0
- package/cjs/components/_Icon/Icon.assets/DisclosureRight.js +2 -1
- package/cjs/components/_Icon/Icon.assets/DisclosureRight.js.map +1 -1
- package/cjs/index.css +11 -13
- package/cjs/index.js +8 -5
- package/cjs/index.js.map +1 -1
- package/es/components/Combobox/Combobox.css +7 -12
- package/es/components/Combobox/Combobox.js +1 -1
- package/es/components/Combobox/ui/ComboboxDivider/ComboboxDivider.css +6 -10
- package/es/components/Combobox/ui/ComboboxDivider/ComboboxDivider.js +3 -3
- package/es/components/Combobox/ui/ComboboxFooter/ComboboxFooter.css +6 -10
- package/es/components/Combobox/ui/ComboboxFooter/ComboboxFooter.js +3 -3
- package/es/components/Combobox/ui/ComboboxGroup/ComboboxGroup.css +6 -10
- package/es/components/Combobox/ui/ComboboxGroup/ComboboxGroup.js +3 -3
- package/es/components/Combobox/ui/ComboboxHeader/ComboboxHeader.css +6 -10
- package/es/components/Combobox/ui/ComboboxHeader/ComboboxHeader.js +3 -3
- 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 -20
- 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 +24 -12
- 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 +4 -30
- 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/DropdownItem/variations/_size/base.js +5 -0
- 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/DropdownItem/variations/_view/base.js +5 -0
- 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 +14 -14
- package/es/components/Dropdown/utils/index.js.map +1 -1
- package/es/components/IconButton/IconButton.css +25 -0
- package/es/components/IconButton/IconButton.js +79 -0
- package/es/components/IconButton/IconButton.js.map +1 -0
- package/es/components/IconButton/IconButton.styles.js +20 -0
- package/es/components/IconButton/IconButton.styles.js.map +1 -0
- package/es/components/IconButton/IconButton.styles_12iyaye.css +2 -0
- package/es/components/IconButton/IconButton.tokens.js +31 -0
- package/es/components/IconButton/IconButton.tokens.js.map +1 -0
- package/es/components/IconButton/variations/_disabled/base.js +5 -0
- package/es/components/IconButton/variations/_disabled/base.js.map +1 -0
- package/es/components/IconButton/variations/_disabled/base_x642ct.css +1 -0
- package/es/components/IconButton/variations/_focused/base.js +5 -0
- package/es/components/IconButton/variations/_focused/base.js.map +1 -0
- package/es/components/IconButton/variations/_focused/base_x642ct.css +1 -0
- package/es/components/IconButton/variations/_size/base.js +5 -0
- package/es/components/IconButton/variations/_size/base.js.map +1 -0
- package/es/components/IconButton/variations/_size/base_x642ct.css +1 -0
- package/es/components/IconButton/variations/_view/base.js +5 -0
- package/es/components/IconButton/variations/_view/base.js.map +1 -0
- package/es/components/IconButton/variations/_view/base_x642ct.css +1 -0
- package/es/components/Pagination/Pagination.css +7 -39
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +7 -39
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.js +2 -2
- package/es/components/Select/Select.css +7 -39
- package/es/components/Select/Select.js +3 -3
- package/es/components/Select/ui/SelectDivider/SelectDivider.css +6 -10
- package/es/components/Select/ui/SelectDivider/SelectDivider.js +3 -3
- package/es/components/Select/ui/SelectFooter/SelectFooter.css +6 -10
- package/es/components/Select/ui/SelectFooter/SelectFooter.js +3 -3
- package/es/components/Select/ui/SelectGroup/SelectGroup.css +6 -10
- package/es/components/Select/ui/SelectGroup/SelectGroup.js +3 -3
- package/es/components/Select/ui/SelectHeader/SelectHeader.css +6 -10
- package/es/components/Select/ui/SelectHeader/SelectHeader.js +3 -3
- package/es/components/Select/ui/SelectItem/SelectItem.css +7 -59
- package/es/components/Select/ui/SelectItem/SelectItem.js +4 -4
- package/es/components/Select/ui/SelectItem/SelectItem.js.map +1 -1
- package/es/components/Select/ui/SelectItem/SelectItem.styles.js +3 -3
- package/es/components/Select/ui/SelectItem/SelectItem.styles.js.map +1 -1
- package/es/components/Select/ui/SelectItem/SelectItem.styles_6h17aw.css +1 -0
- package/es/components/_Icon/Icon.assets/DisclosureRight.js +2 -1
- package/es/components/_Icon/Icon.assets/DisclosureRight.js.map +1 -1
- package/es/index.css +11 -13
- package/es/index.js +3 -3
- package/package.json +2 -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 +24 -12
- 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 +15 -30
- package/styled-components/cjs/components/Dropdown/ui/DropdownItem/variations/_size/base.js +8 -0
- package/styled-components/cjs/components/Dropdown/ui/DropdownItem/variations/_size/tokens.json +19 -0
- package/styled-components/cjs/components/Dropdown/ui/DropdownItem/variations/_view/base.js +8 -0
- package/styled-components/cjs/components/Dropdown/ui/DropdownItem/variations/_view/tokens.json +9 -0
- package/styled-components/cjs/components/Dropdown/ui/index.js +13 -14
- package/styled-components/cjs/components/Dropdown/utils/index.js +13 -14
- 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/IconButton/IconButton.js +86 -0
- package/styled-components/cjs/components/IconButton/IconButton.styles.js +19 -0
- package/styled-components/cjs/components/IconButton/IconButton.tokens.js +34 -0
- package/styled-components/cjs/components/IconButton/index.js +31 -0
- package/styled-components/cjs/components/IconButton/variations/_disabled/base.js +8 -0
- package/styled-components/cjs/components/IconButton/variations/_disabled/tokens.json +1 -0
- package/styled-components/cjs/components/IconButton/variations/_focused/base.js +8 -0
- package/styled-components/cjs/components/IconButton/variations/_focused/tokens.json +1 -0
- package/styled-components/cjs/components/IconButton/variations/_size/base.js +8 -0
- package/styled-components/cjs/components/IconButton/variations/_size/tokens.json +1 -0
- package/styled-components/cjs/components/IconButton/variations/_view/base.js +8 -0
- package/styled-components/cjs/components/IconButton/variations/_view/tokens.json +1 -0
- package/styled-components/cjs/components/Select/ui/SelectItem/SelectItem.js +2 -2
- package/styled-components/cjs/components/Select/ui/SelectItem/SelectItem.styles.js +2 -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/IconButton/IconButton.config.js +46 -0
- package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.js +11 -0
- package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +65 -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/IconButton/IconButton.config.js +46 -0
- package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.js +11 -0
- package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.stories.tsx +65 -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/index.js +11 -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 +24 -12
- 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 +11 -27
- package/styled-components/es/components/Dropdown/ui/DropdownItem/variations/_size/base.js +2 -0
- package/styled-components/es/components/Dropdown/ui/DropdownItem/variations/_size/tokens.json +19 -0
- package/styled-components/es/components/Dropdown/ui/DropdownItem/variations/_view/base.js +2 -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 -2
- package/styled-components/es/components/Dropdown/utils/index.js +13 -13
- 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/IconButton/IconButton.js +77 -0
- package/styled-components/es/components/IconButton/IconButton.styles.js +11 -0
- package/styled-components/es/components/IconButton/IconButton.tokens.js +28 -0
- package/styled-components/es/components/IconButton/index.js +2 -0
- package/styled-components/es/components/IconButton/variations/_disabled/base.js +2 -0
- package/styled-components/es/components/IconButton/variations/_disabled/tokens.json +1 -0
- package/styled-components/es/components/IconButton/variations/_focused/base.js +2 -0
- package/styled-components/es/components/IconButton/variations/_focused/tokens.json +1 -0
- package/styled-components/es/components/IconButton/variations/_size/base.js +2 -0
- package/styled-components/es/components/IconButton/variations/_size/tokens.json +1 -0
- package/styled-components/es/components/IconButton/variations/_view/base.js +2 -0
- package/styled-components/es/components/IconButton/variations/_view/tokens.json +1 -0
- package/styled-components/es/components/Select/ui/SelectItem/SelectItem.js +2 -2
- package/styled-components/es/components/Select/ui/SelectItem/SelectItem.styles.js +2 -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/IconButton/IconButton.config.js +40 -0
- package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.js +5 -0
- package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +65 -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/IconButton/IconButton.config.js +40 -0
- package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.js +5 -0
- package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.stories.tsx +65 -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/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 -9
- 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 +1 -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 +2 -0
- 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 +2 -0
- package/types/components/Dropdown/ui/DropdownItem/variations/_view/base.d.ts.map +1 -0
- package/types/components/Dropdown/ui/index.d.ts +1 -2
- package/types/components/Dropdown/ui/index.d.ts.map +1 -1
- package/types/components/Dropdown/utils/index.d.ts +3 -5
- package/types/components/Dropdown/utils/index.d.ts.map +1 -1
- package/types/components/IconButton/IconButton.d.ts +30 -0
- package/types/components/IconButton/IconButton.d.ts.map +1 -0
- package/types/components/IconButton/IconButton.styles.d.ts +4 -0
- package/types/components/IconButton/IconButton.styles.d.ts.map +1 -0
- package/types/components/IconButton/IconButton.tokens.d.ts +29 -0
- package/types/components/IconButton/IconButton.tokens.d.ts.map +1 -0
- package/types/components/IconButton/IconButton.types.d.ts +13 -0
- package/types/components/IconButton/IconButton.types.d.ts.map +1 -0
- package/types/components/IconButton/index.d.ts +4 -0
- package/types/components/IconButton/index.d.ts.map +1 -0
- package/types/components/IconButton/variations/_disabled/base.d.ts +2 -0
- package/types/components/IconButton/variations/_disabled/base.d.ts.map +1 -0
- package/types/components/IconButton/variations/_focused/base.d.ts +2 -0
- package/types/components/IconButton/variations/_focused/base.d.ts.map +1 -0
- package/types/components/IconButton/variations/_size/base.d.ts +2 -0
- package/types/components/IconButton/variations/_size/base.d.ts.map +1 -0
- package/types/components/IconButton/variations/_view/base.d.ts +2 -0
- package/types/components/IconButton/variations/_view/base.d.ts.map +1 -0
- package/types/components/Select/ui/SelectItem/SelectItem.d.ts +2 -2
- 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/_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/IconButton/IconButton.config.d.ts +39 -0
- package/types/examples/plasma_b2c/components/IconButton/IconButton.config.d.ts.map +1 -0
- package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts +33 -0
- package/types/examples/plasma_b2c/components/IconButton/IconButton.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/IconButton/IconButton.config.d.ts +39 -0
- package/types/examples/plasma_web/components/IconButton/IconButton.config.d.ts.map +1 -0
- package/types/examples/plasma_web/components/IconButton/IconButton.d.ts +33 -0
- package/types/examples/plasma_web/components/IconButton/IconButton.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/index.d.ts +1 -0
- package/types/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 -117
- 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/Select/ui/SelectItem/SelectItem.styles_1jgsd1a.css +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 -113
- 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/Select/ui/SelectItem/SelectItem.styles_1jgsd1a.css +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/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/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/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/styled-components/cjs/components/{Dropdown/ui/DropdownInner/DropdownInner.type.js → IconButton/IconButton.types.js} +0 -0
- /package/styled-components/es/components/{Dropdown/ui/DropdownInner/DropdownInner.type.js → IconButton/IconButton.types.js} +0 -0
- /package/types/examples/plasma_b2c/components/Dropdown/{Dropdown.config.d.ts → Normal/Dropdown.config.d.ts} +0 -0
@@ -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
|
+
};
|
@@ -58,6 +58,17 @@ Object.keys(_Button).forEach(function (key) {
|
|
58
58
|
}
|
59
59
|
});
|
60
60
|
});
|
61
|
+
var _IconButton = /*#__PURE__*/require("./components/IconButton");
|
62
|
+
Object.keys(_IconButton).forEach(function (key) {
|
63
|
+
if (key === "default" || key === "__esModule") return;
|
64
|
+
if (key in exports && exports[key] === _IconButton[key]) return;
|
65
|
+
Object.defineProperty(exports, key, {
|
66
|
+
enumerable: true,
|
67
|
+
get: function get() {
|
68
|
+
return _IconButton[key];
|
69
|
+
}
|
70
|
+
});
|
71
|
+
});
|
61
72
|
var _ButtonGroup = /*#__PURE__*/require("./components/ButtonGroup");
|
62
73
|
Object.keys(_ButtonGroup).forEach(function (key) {
|
63
74
|
if (key === "default" || key === "__esModule") return;
|
@@ -1,95 +1,8 @@
|
|
1
|
-
|
2
|
-
var _excluded = ["id", "className", "children", "text", "isSelected", "name", "checked", "value", "view", "size", "disabled", "role", "contentLeft", "contentRight", "onSelect", "onClick", "onChange"];
|
3
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
4
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
5
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
6
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
7
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
8
|
-
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
9
|
-
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
10
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
11
|
-
import React, { forwardRef, useCallback, useMemo } from 'react';
|
12
|
-
import { safeUseId } from '@salutejs/plasma-core';
|
13
|
-
import { classes } from '../../Combobox.tokens';
|
14
|
-
import { getValidComponent } from '../../utils';
|
15
|
-
import { cx } from '../../../../utils';
|
1
|
+
import { dropdownItemRoot } from '../../../Dropdown';
|
16
2
|
import { base as viewCSS } from './variations/_view/base';
|
17
3
|
import { base as sizeCSS } from './variations/_size/base';
|
18
|
-
import {
|
19
|
-
export var comboboxItemRoot =
|
20
|
-
return /*#__PURE__*/forwardRef(function (_ref, outerRootRef) {
|
21
|
-
var id = _ref.id,
|
22
|
-
className = _ref.className,
|
23
|
-
children = _ref.children,
|
24
|
-
text = _ref.text,
|
25
|
-
isSelected = _ref.isSelected,
|
26
|
-
name = _ref.name,
|
27
|
-
checked = _ref.checked,
|
28
|
-
value = _ref.value,
|
29
|
-
view = _ref.view,
|
30
|
-
size = _ref.size,
|
31
|
-
disabled = _ref.disabled,
|
32
|
-
_ref$role = _ref.role,
|
33
|
-
role = _ref$role === void 0 ? 'option' : _ref$role,
|
34
|
-
ContentLeftComponent = _ref.contentLeft,
|
35
|
-
ContentRightComponent = _ref.contentRight,
|
36
|
-
onSelect = _ref.onSelect,
|
37
|
-
onClick = _ref.onClick,
|
38
|
-
onChange = _ref.onChange,
|
39
|
-
rest = _objectWithoutProperties(_ref, _excluded);
|
40
|
-
var uniqId = safeUseId();
|
41
|
-
var innerId = id || uniqId;
|
42
|
-
var withComboboxItemIsSelected = checked || isSelected ? classes.comboboxItemIsDisabled : undefined;
|
43
|
-
var withComboboxItemIsDisabled = disabled ? classes.comboboxItemIsDisabled : undefined;
|
44
|
-
var handleOnClick = useCallback(function (event) {
|
45
|
-
if (disabled) {
|
46
|
-
return;
|
47
|
-
}
|
48
|
-
onClick === null || onClick === void 0 || onClick(event);
|
49
|
-
if (onSelect && !ContentLeftComponent) {
|
50
|
-
onSelect(value, text);
|
51
|
-
}
|
52
|
-
}, [onSelect, disabled]);
|
53
|
-
var handleOnChange = useCallback(function (event) {
|
54
|
-
if (disabled) {
|
55
|
-
return;
|
56
|
-
}
|
57
|
-
onChange === null || onChange === void 0 || onChange(event);
|
58
|
-
if (onSelect && ContentLeftComponent) {
|
59
|
-
onSelect(value, text);
|
60
|
-
}
|
61
|
-
}, [onSelect, disabled]);
|
62
|
-
var contentProps = _objectSpread({
|
63
|
-
name: name,
|
64
|
-
value: value,
|
65
|
-
checked: checked || isSelected,
|
66
|
-
disabled: disabled,
|
67
|
-
tabIndex: -1
|
68
|
-
}, !disabled && {
|
69
|
-
onChange: handleOnChange
|
70
|
-
});
|
71
|
-
var ContentLeft = useMemo(function () {
|
72
|
-
return getValidComponent(ContentLeftComponent, contentProps);
|
73
|
-
}, [ContentRightComponent, contentProps]);
|
74
|
-
var ContentRight = useMemo(function () {
|
75
|
-
return getValidComponent(ContentRightComponent, contentProps);
|
76
|
-
}, [ContentRightComponent, contentProps]);
|
77
|
-
return /*#__PURE__*/React.createElement(Root, _extends({
|
78
|
-
className: cx(withComboboxItemIsSelected, withComboboxItemIsDisabled, className),
|
79
|
-
view: view,
|
80
|
-
size: size,
|
81
|
-
id: innerId,
|
82
|
-
isSelected: isSelected,
|
83
|
-
role: role,
|
84
|
-
ref: outerRootRef,
|
85
|
-
tabIndex: 0,
|
86
|
-
"aria-disabled": disabled,
|
87
|
-
"aria-selected": isSelected,
|
88
|
-
onClick: handleOnClick,
|
89
|
-
"data-value": value
|
90
|
-
}, rest), text ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledContentLeft, null, ContentLeftComponent && ContentLeft), /*#__PURE__*/React.createElement(StyledText, null, text), /*#__PURE__*/React.createElement(StyledContentRight, null, ContentRightComponent && ContentRight)) : children);
|
91
|
-
});
|
92
|
-
};
|
4
|
+
import { base } from './ComboboxItem.styles';
|
5
|
+
export var comboboxItemRoot = dropdownItemRoot;
|
93
6
|
export var comboboxItemConfig = {
|
94
7
|
name: 'ComboboxItem',
|
95
8
|
tag: 'div',
|
@@ -1,25 +1,8 @@
|
|
1
|
-
var _templateObject;
|
2
|
-
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
3
1
|
import { css } from 'styled-components';
|
4
|
-
import
|
5
|
-
import {
|
6
|
-
import {
|
7
|
-
export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
|
8
|
-
componentId: "plasma-new-hope__sc-i4bkda-0"
|
9
|
-
})(["display:inline-flex;min-width:var(", ");color:var(", ");"], tokens.itemContentLeftWidth, tokens.itemContentLeftColor);
|
10
|
-
export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
|
11
|
-
componentId: "plasma-new-hope__sc-i4bkda-1"
|
12
|
-
})(["margin-left:auto;display:inline-flex;min-width:var(", ");color:var(", ");"], tokens.itemContentRightWidth, tokens.itemContentRightColor);
|
13
|
-
export var StyledText = /*#__PURE__*/styled.div.withConfig({
|
14
|
-
componentId: "plasma-new-hope__sc-i4bkda-2"
|
15
|
-
})(["", ";"], /*#__PURE__*/applyEllipsis());
|
2
|
+
import { tokens } from '../../Combobox.tokens';
|
3
|
+
import { dropdownTokens } from '../../../Dropdown';
|
4
|
+
import { baseContent as dropdownItemBase } from '../../../Dropdown/ui/DropdownItem/DropdownItem.styles';
|
16
5
|
|
17
|
-
//
|
18
|
-
export var
|
19
|
-
|
20
|
-
outlineOffset: '0',
|
21
|
-
outlineColor: "var(".concat(tokens.focusColor, ")"),
|
22
|
-
outlineRadius: "var(".concat(tokens.itemBorderRadius, ")"),
|
23
|
-
hasTransition: false
|
24
|
-
}), ";\n\n width: 100%;\n\n font-family: var(").concat(tokens.itemFontFamily, ");\n font-size: var(").concat(tokens.itemFontSize, ");\n font-style: var(").concat(tokens.itemFontStyle, ");\n font-weight: var(").concat(tokens.itemFontWeightBold, ");\n letter-spacing: var(").concat(tokens.itemFontLetterSpacing, ");\n line-height: var(").concat(tokens.itemFontLineHeight, ");\n\n background: var(").concat(tokens.itemBackground, ");\n color: var(").concat(tokens.itemColor, ");\n border-radius: var(").concat(tokens.itemBorderRadius, ");\n\n width: var(").concat(tokens.itemWidth, ");\n height: var(").concat(tokens.itemHeight, ");\n\n padding: var(").concat(tokens.itemPaddingTop, ") var(").concat(tokens.itemPaddingRight, ") var(").concat(tokens.itemPaddingBottom, ")\n var(").concat(tokens.itemPaddingLeft, ");\n\n margin: var(").concat(tokens.itemMarginTop, ") var(").concat(tokens.itemMarginRight, ") var(").concat(tokens.itemMarginBottom, ")\n var(").concat(tokens.itemMarginLeft, ");\n\n &:hover:not(.").concat(classes.comboboxItemIsDisabled, ") {\n cursor: pointer;\n background: var(").concat(tokens.itemBackgroundHover, ");\n }\n\n &.").concat(String(classes.comboboxItemIsSelected), " {\n color: var(").concat(tokens.itemColorSelected, ");\n background: var(").concat(tokens.itemBackgroundSelected, ");\n\n &:hover:not(.").concat(classes.comboboxItemIsDisabled, ") {\n background: var(").concat(tokens.itemBackgroundSelectedHover, ");\n }\n }\n\n &.").concat(classes.comboboxItemIsDisabled, " {\n opacity: var(").concat(tokens.disabledOpacity, ");\n cursor: not-allowed;\n }\n");
|
25
|
-
export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ";\n"])), baseContent);
|
6
|
+
// NOTE: Необходимое переопределение токенов из компонента DropdownItem т.к. используются его части
|
7
|
+
export var mappingOverride = /*#__PURE__*/"\n ".concat(dropdownTokens.itemBackground, ": var(").concat(tokens.itemBackground, ");\n ").concat(dropdownTokens.itemColor, ": var(").concat(tokens.itemColor, ");\n ").concat(dropdownTokens.itemBackgroundHover, ": var(").concat(tokens.itemBackgroundHover, ");\n ").concat(dropdownTokens.itemBackgroundSelected, ": var(").concat(tokens.itemBackgroundSelected, ");\n ").concat(dropdownTokens.itemColorSelected, ": var(").concat(tokens.itemColorSelected, ");\n ").concat(dropdownTokens.itemBackgroundSelectedHover, ": var(").concat(tokens.itemBackgroundSelectedHover, ");\n ").concat(dropdownTokens.itemColorSelectedHover, ": var(").concat(tokens.itemColorSelectedHover, ");\n ").concat(dropdownTokens.itemContentLeftColor, ": var(").concat(tokens.itemContentLeftColor, ");\n ").concat(dropdownTokens.itemContentRightColor, ": var(").concat(tokens.itemContentRightColor, ");\n ").concat(dropdownTokens.disabledOpacity, ": var(").concat(tokens.disabledOpacity, ");\n ").concat(dropdownTokens.focusColor, ": var(").concat(tokens.focusColor, ");\n ").concat(dropdownTokens.itemWidth, ": var(").concat(tokens.itemWidth, ");\n ").concat(dropdownTokens.itemHeight, ": var(").concat(tokens.itemHeight, ");\n ").concat(dropdownTokens.itemBorderRadius, ": var(").concat(tokens.itemBorderRadius, ");\n ").concat(dropdownTokens.itemPaddingTop, ": var(").concat(tokens.itemPaddingTop, ");\n ").concat(dropdownTokens.itemPaddingRight, ": var(").concat(tokens.itemPaddingRight, ");\n ").concat(dropdownTokens.itemPaddingBottom, ": var(").concat(tokens.itemPaddingBottom, ");\n ").concat(dropdownTokens.itemPaddingLeft, ": var(").concat(tokens.itemPaddingLeft, ");\n ").concat(dropdownTokens.itemMarginTop, ": var(").concat(tokens.itemMarginTop, ");\n ").concat(dropdownTokens.itemMarginRight, ": var(").concat(tokens.itemMarginRight, ");\n ").concat(dropdownTokens.itemMarginBottom, ": var(").concat(tokens.itemMarginBottom, ");\n ").concat(dropdownTokens.itemMarginLeft, ": var(").concat(tokens.itemMarginLeft, ");\n ").concat(dropdownTokens.itemFontFamily, ": var(").concat(tokens.itemFontFamily, ");\n ").concat(dropdownTokens.itemFontSize, ": var(").concat(tokens.itemFontSize, ");\n ").concat(dropdownTokens.itemFontStyle, ": var(").concat(tokens.itemFontStyle, ");\n ").concat(dropdownTokens.itemFontWeightBold, ": var(").concat(tokens.itemFontWeightBold, ");\n ").concat(dropdownTokens.itemFontLetterSpacing, ": var(").concat(tokens.itemFontLetterSpacing, ");\n ").concat(dropdownTokens.itemFontLineHeight, ": var(").concat(tokens.itemFontLineHeight, ");\n ").concat(dropdownTokens.itemContentLeftWidth, ": var(").concat(tokens.itemContentLeftWidth, ");\n ").concat(dropdownTokens.itemContentRightWidth, ": var(").concat(tokens.itemContentRightWidth, ");\n");
|
8
|
+
export var base = /*#__PURE__*/css(["", ";", ";"], dropdownItemBase, mappingOverride);
|