@salutejs/plasma-new-hope 0.78.0-canary.1195.8939186735.0 → 0.78.0-canary.1201.8968491632.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Button/Button.styles.js +0 -1
- package/cjs/components/Button/Button.styles.js.map +1 -1
- package/cjs/components/Combobox/Combobox.css +17 -7
- package/cjs/components/Combobox/ui/ComboboxDivider/ComboboxDivider.css +15 -6
- package/cjs/components/Combobox/ui/ComboboxDivider/ComboboxDivider.js +2 -2
- package/cjs/components/Combobox/ui/ComboboxFooter/ComboboxFooter.css +15 -6
- package/cjs/components/Combobox/ui/ComboboxFooter/ComboboxFooter.js +2 -2
- package/cjs/components/Combobox/ui/ComboboxGroup/ComboboxGroup.css +15 -6
- package/cjs/components/Combobox/ui/ComboboxGroup/ComboboxGroup.js +2 -2
- package/cjs/components/Combobox/ui/ComboboxHeader/ComboboxHeader.css +15 -6
- package/cjs/components/Combobox/ui/ComboboxHeader/ComboboxHeader.js +2 -2
- package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.css +4 -23
- package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.js +81 -10
- package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.js.map +1 -1
- package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js +21 -9
- package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js.map +1 -1
- package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.styles_s4sk53.css +4 -0
- package/cjs/components/Combobox/utils/index.js +23 -0
- package/cjs/components/Combobox/utils/index.js.map +1 -0
- package/cjs/components/Drawer/Drawer.js +0 -1
- package/cjs/components/Drawer/Drawer.js.map +1 -1
- package/cjs/components/Dropdown/Dropdown.css +25 -2
- package/cjs/components/Dropdown/Dropdown.js +138 -54
- package/cjs/components/Dropdown/Dropdown.js.map +1 -1
- package/cjs/components/Dropdown/Dropdown.styles.js +40 -7
- package/cjs/components/Dropdown/Dropdown.styles.js.map +1 -1
- package/cjs/components/Dropdown/Dropdown.styles_1tihqkp.css +3 -0
- package/cjs/components/Dropdown/Dropdown.tokens.js +26 -23
- package/cjs/components/Dropdown/Dropdown.tokens.js.map +1 -1
- package/cjs/components/Dropdown/hooks/useHashMaps.js +34 -0
- package/cjs/components/Dropdown/hooks/useHashMaps.js.map +1 -0
- package/cjs/components/Dropdown/hooks/useKeyboardNavigation.js +223 -0
- package/cjs/components/Dropdown/hooks/useKeyboardNavigation.js.map +1 -0
- package/cjs/components/Dropdown/reducers/focusedPathReducer.js +37 -0
- package/cjs/components/Dropdown/reducers/focusedPathReducer.js.map +1 -0
- package/cjs/components/Dropdown/reducers/pathReducer.js +41 -0
- package/cjs/components/Dropdown/reducers/pathReducer.js.map +1 -0
- package/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +122 -0
- package/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js.map +1 -0
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.css +7 -4
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js +79 -100
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js.map +1 -1
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +31 -5
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js.map +1 -1
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles_1o4szyu.css +5 -0
- package/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.js +30 -0
- package/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.js.map +1 -0
- package/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles_12e50g5.css +4 -0
- package/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.css +4 -0
- package/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.js +112 -0
- package/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.js.map +1 -0
- package/cjs/components/Dropdown/ui/{DropdownItem → DropdownItemOld}/variations/_size/base.js +1 -1
- package/cjs/components/Dropdown/ui/DropdownItemOld/variations/_size/base.js.map +1 -0
- package/cjs/components/Dropdown/ui/{DropdownItem → DropdownItemOld}/variations/_view/base.js +1 -1
- package/cjs/components/Dropdown/ui/DropdownItemOld/variations/_view/base.js.map +1 -0
- package/cjs/components/Dropdown/utils/index.js +16 -0
- package/cjs/components/Dropdown/utils/index.js.map +1 -1
- package/cjs/components/Pagination/Pagination.css +14 -7
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +14 -7
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.js +1 -1
- package/cjs/components/Select/Select.css +14 -7
- package/cjs/components/Select/ui/SelectDivider/SelectDivider.css +15 -6
- package/cjs/components/Select/ui/SelectDivider/SelectDivider.js +2 -2
- package/cjs/components/Select/ui/SelectFooter/SelectFooter.css +15 -6
- package/cjs/components/Select/ui/SelectFooter/SelectFooter.js +2 -2
- package/cjs/components/Select/ui/SelectGroup/SelectGroup.css +15 -6
- package/cjs/components/Select/ui/SelectGroup/SelectGroup.js +2 -2
- package/cjs/components/Select/ui/SelectHeader/SelectHeader.css +15 -6
- package/cjs/components/Select/ui/SelectHeader/SelectHeader.js +2 -2
- package/cjs/components/Select/ui/SelectItem/SelectItem.css +16 -7
- 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_6h17aw.css → SelectItem.styles_vk39mp.css} +1 -1
- package/cjs/components/TextField/TextField.js +2 -2
- package/cjs/components/TextField/TextField.js.map +1 -1
- package/cjs/components/_Icon/Icon.assets/DisclosureRight.js +1 -2
- package/cjs/components/_Icon/Icon.assets/DisclosureRight.js.map +1 -1
- package/cjs/index.css +18 -10
- package/cjs/index.js +8 -7
- package/cjs/index.js.map +1 -1
- package/es/components/Button/Button.styles.js +0 -1
- package/es/components/Button/Button.styles.js.map +1 -1
- package/es/components/Combobox/Combobox.css +17 -7
- package/es/components/Combobox/ui/ComboboxDivider/ComboboxDivider.css +15 -6
- package/es/components/Combobox/ui/ComboboxDivider/ComboboxDivider.js +2 -2
- package/es/components/Combobox/ui/ComboboxFooter/ComboboxFooter.css +15 -6
- package/es/components/Combobox/ui/ComboboxFooter/ComboboxFooter.js +2 -2
- package/es/components/Combobox/ui/ComboboxGroup/ComboboxGroup.css +15 -6
- package/es/components/Combobox/ui/ComboboxGroup/ComboboxGroup.js +2 -2
- package/es/components/Combobox/ui/ComboboxHeader/ComboboxHeader.css +15 -6
- package/es/components/Combobox/ui/ComboboxHeader/ComboboxHeader.js +2 -2
- package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.css +4 -23
- package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.js +82 -11
- package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.js.map +1 -1
- package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js +19 -10
- package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js.map +1 -1
- package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.styles_s4sk53.css +4 -0
- package/es/components/Combobox/utils/index.js +19 -0
- package/es/components/Combobox/utils/index.js.map +1 -0
- package/es/components/Drawer/Drawer.js +0 -1
- package/es/components/Drawer/Drawer.js.map +1 -1
- package/es/components/Dropdown/Dropdown.css +25 -2
- package/es/components/Dropdown/Dropdown.js +144 -60
- package/es/components/Dropdown/Dropdown.js.map +1 -1
- package/es/components/Dropdown/Dropdown.styles.js +39 -7
- package/es/components/Dropdown/Dropdown.styles.js.map +1 -1
- package/es/components/Dropdown/Dropdown.styles_1tihqkp.css +3 -0
- package/es/components/Dropdown/Dropdown.tokens.js +26 -23
- package/es/components/Dropdown/Dropdown.tokens.js.map +1 -1
- package/es/components/Dropdown/hooks/useHashMaps.js +30 -0
- package/es/components/Dropdown/hooks/useHashMaps.js.map +1 -0
- package/es/components/Dropdown/hooks/useKeyboardNavigation.js +218 -0
- package/es/components/Dropdown/hooks/useKeyboardNavigation.js.map +1 -0
- package/es/components/Dropdown/reducers/focusedPathReducer.js +33 -0
- package/es/components/Dropdown/reducers/focusedPathReducer.js.map +1 -0
- package/es/components/Dropdown/reducers/pathReducer.js +37 -0
- package/es/components/Dropdown/reducers/pathReducer.js.map +1 -0
- package/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +118 -0
- package/es/components/Dropdown/ui/DropdownInner/DropdownInner.js.map +1 -0
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.css +7 -4
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.js +80 -100
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.js.map +1 -1
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +30 -5
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js.map +1 -1
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles_1o4szyu.css +5 -0
- package/es/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.js +23 -0
- package/es/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.js.map +1 -0
- package/es/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles_12e50g5.css +4 -0
- package/es/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.css +4 -0
- package/es/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.js +107 -0
- package/es/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.js.map +1 -0
- package/es/components/Dropdown/ui/{DropdownItem → DropdownItemOld}/variations/_size/base.js +1 -1
- package/es/components/Dropdown/ui/DropdownItemOld/variations/_size/base.js.map +1 -0
- package/es/components/Dropdown/ui/{DropdownItem → DropdownItemOld}/variations/_view/base.js +1 -1
- package/es/components/Dropdown/ui/DropdownItemOld/variations/_view/base.js.map +1 -0
- package/es/components/Dropdown/utils/index.js +16 -2
- package/es/components/Dropdown/utils/index.js.map +1 -1
- package/es/components/Pagination/Pagination.css +14 -7
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +14 -7
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.js +1 -1
- package/es/components/Select/Select.css +14 -7
- package/es/components/Select/ui/SelectDivider/SelectDivider.css +15 -6
- package/es/components/Select/ui/SelectDivider/SelectDivider.js +2 -2
- package/es/components/Select/ui/SelectFooter/SelectFooter.css +15 -6
- package/es/components/Select/ui/SelectFooter/SelectFooter.js +2 -2
- package/es/components/Select/ui/SelectGroup/SelectGroup.css +15 -6
- package/es/components/Select/ui/SelectGroup/SelectGroup.js +2 -2
- package/es/components/Select/ui/SelectHeader/SelectHeader.css +15 -6
- package/es/components/Select/ui/SelectHeader/SelectHeader.js +2 -2
- package/es/components/Select/ui/SelectItem/SelectItem.css +16 -7
- 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_6h17aw.css → SelectItem.styles_vk39mp.css} +1 -1
- package/es/components/TextField/TextField.js +3 -3
- package/es/components/TextField/TextField.js.map +1 -1
- package/es/components/_Icon/Icon.assets/DisclosureRight.js +1 -2
- package/es/components/_Icon/Icon.assets/DisclosureRight.js.map +1 -1
- package/es/index.css +18 -10
- package/es/index.js +4 -3
- package/es/index.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Button/Button.styles.js +2 -10
- package/styled-components/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.js +91 -2
- package/styled-components/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js +27 -7
- package/styled-components/cjs/components/Combobox/utils/index.js +23 -0
- package/styled-components/cjs/components/Dropdown/Dropdown.js +140 -54
- package/styled-components/cjs/components/Dropdown/Dropdown.styles.js +22 -7
- package/styled-components/cjs/components/Dropdown/Dropdown.tokens.js +26 -23
- package/styled-components/cjs/components/Dropdown/hooks/useHashMaps.js +32 -0
- package/styled-components/cjs/components/Dropdown/hooks/useKeyboardNavigation.js +221 -0
- package/styled-components/cjs/components/Dropdown/index.js +9 -1
- package/styled-components/cjs/components/Dropdown/reducers/focusedPathReducer.js +40 -0
- package/styled-components/cjs/components/Dropdown/reducers/pathReducer.js +44 -0
- package/styled-components/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +117 -0
- package/styled-components/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.type.js +5 -0
- package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js +77 -105
- package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +24 -19
- package/styled-components/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.js +33 -0
- package/styled-components/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItem.type.js +5 -0
- package/styled-components/cjs/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.js +119 -0
- package/styled-components/cjs/components/Dropdown/ui/index.js +19 -5
- package/styled-components/cjs/components/Dropdown/utils/index.js +15 -1
- package/styled-components/cjs/components/Dropdown/variations/_size/tokens.json +1 -9
- 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/TextField/TextField.js +4 -4
- package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureRight.js +1 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Dropdown.config.js +25 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Dropdown.js +11 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Dropdown.stories.tsx +292 -0
- package/styled-components/cjs/index.js +0 -11
- package/styled-components/es/components/Button/Button.styles.js +2 -10
- package/styled-components/es/components/Combobox/ui/ComboboxItem/ComboboxItem.js +90 -3
- package/styled-components/es/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js +23 -6
- package/styled-components/es/components/Combobox/utils/index.js +15 -0
- package/styled-components/es/components/Dropdown/Dropdown.js +142 -55
- package/styled-components/es/components/Dropdown/Dropdown.styles.js +18 -5
- package/styled-components/es/components/Dropdown/Dropdown.tokens.js +26 -23
- package/styled-components/es/components/Dropdown/hooks/useHashMaps.js +26 -0
- package/styled-components/es/components/Dropdown/hooks/useKeyboardNavigation.js +215 -0
- package/styled-components/es/components/Dropdown/index.js +1 -0
- package/styled-components/es/components/Dropdown/reducers/focusedPathReducer.js +34 -0
- package/styled-components/es/components/Dropdown/reducers/pathReducer.js +38 -0
- package/styled-components/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +111 -0
- package/styled-components/es/components/Dropdown/ui/DropdownInner/DropdownInner.type.js +1 -0
- package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.js +78 -107
- package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +21 -15
- package/styled-components/es/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.js +25 -0
- package/styled-components/es/components/Dropdown/ui/DropdownItemOld/DropdownItem.type.js +1 -0
- package/styled-components/es/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.js +111 -0
- package/styled-components/es/components/Dropdown/ui/index.js +3 -1
- package/styled-components/es/components/Dropdown/utils/index.js +15 -1
- package/styled-components/es/components/Dropdown/variations/_size/tokens.json +1 -9
- 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/TextField/TextField.js +4 -4
- package/styled-components/es/components/_Icon/Icon.assets/DisclosureRight.js +1 -2
- package/styled-components/es/examples/plasma_b2c/components/Dropdown/Dropdown.config.js +19 -0
- package/styled-components/es/examples/plasma_b2c/components/Dropdown/Dropdown.js +5 -0
- package/styled-components/es/examples/plasma_b2c/components/Dropdown/Dropdown.stories.tsx +292 -0
- package/styled-components/es/index.js +0 -1
- package/types/components/Button/Button.styles.d.ts +0 -1
- package/types/components/Button/Button.styles.d.ts.map +1 -1
- package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.d.ts +15 -13
- package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.d.ts.map +1 -1
- package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.d.ts +5 -1
- package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.d.ts.map +1 -1
- package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.type.d.ts +59 -2
- package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.type.d.ts.map +1 -1
- package/types/components/Combobox/utils/index.d.ts +4 -0
- package/types/components/Combobox/utils/index.d.ts.map +1 -0
- 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 +8 -1
- package/types/components/Dropdown/Dropdown.styles.d.ts.map +1 -1
- package/types/components/Dropdown/Dropdown.tokens.d.ts +24 -22
- package/types/components/Dropdown/Dropdown.tokens.d.ts.map +1 -1
- package/types/components/Dropdown/Dropdown.types.d.ts +64 -40
- package/types/components/Dropdown/Dropdown.types.d.ts.map +1 -1
- package/types/components/Dropdown/hooks/useHashMaps.d.ts +6 -0
- package/types/components/Dropdown/hooks/useHashMaps.d.ts.map +1 -0
- package/types/components/Dropdown/hooks/useKeyboardNavigation.d.ts +37 -0
- package/types/components/Dropdown/hooks/useKeyboardNavigation.d.ts.map +1 -0
- package/types/components/Dropdown/index.d.ts +3 -1
- package/types/components/Dropdown/index.d.ts.map +1 -1
- package/types/components/Dropdown/reducers/focusedPathReducer.d.ts +16 -0
- package/types/components/Dropdown/reducers/focusedPathReducer.d.ts.map +1 -0
- package/types/components/Dropdown/reducers/pathReducer.d.ts +20 -0
- package/types/components/Dropdown/reducers/pathReducer.d.ts.map +1 -0
- package/types/components/Dropdown/ui/DropdownInner/DropdownInner.d.ts +5 -0
- package/types/components/Dropdown/ui/DropdownInner/DropdownInner.d.ts.map +1 -0
- package/types/components/Dropdown/ui/DropdownInner/DropdownInner.type.d.ts +26 -0
- package/types/components/Dropdown/ui/DropdownInner/DropdownInner.type.d.ts.map +1 -0
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.d.ts +2 -56
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.d.ts.map +1 -1
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.styles.d.ts +5 -2
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.styles.d.ts.map +1 -1
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.type.d.ts +44 -38
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.type.d.ts.map +1 -1
- package/types/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.d.ts +7 -0
- package/types/components/Dropdown/ui/DropdownItemOld/DropdownItem.styles.d.ts.map +1 -0
- package/types/components/Dropdown/ui/DropdownItemOld/DropdownItem.type.d.ts +60 -0
- package/types/components/Dropdown/ui/DropdownItemOld/DropdownItem.type.d.ts.map +1 -0
- package/types/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.d.ts +58 -0
- package/types/components/Dropdown/ui/DropdownItemOld/DropdownItemOld.d.ts.map +1 -0
- package/types/components/Dropdown/ui/DropdownItemOld/variations/_size/base.d.ts.map +1 -0
- package/types/components/Dropdown/ui/DropdownItemOld/variations/_view/base.d.ts.map +1 -0
- package/types/components/Dropdown/ui/index.d.ts +3 -1
- package/types/components/Dropdown/ui/index.d.ts.map +1 -1
- package/types/components/Dropdown/utils/index.d.ts +5 -2
- 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/TextField/TextField.d.ts +2 -2
- 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/Dropdown.config.d.ts.map +1 -0
- package/types/examples/plasma_b2c/components/Dropdown/Dropdown.d.ts +13 -0
- package/types/examples/plasma_b2c/components/Dropdown/Dropdown.d.ts.map +1 -0
- package/types/examples/plasma_b2c/components/TextField/TextField.d.ts +2 -2
- package/types/examples/plasma_b2c/components/TextField/TextField.d.ts.map +1 -1
- package/types/examples/plasma_web/components/TextField/TextField.d.ts +2 -2
- package/types/examples/plasma_web/components/TextField/TextField.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/TextField/TextField.d.ts +2 -2
- package/types/examples/sds_engineer/components/TextField/TextField.d.ts.map +1 -1
- package/types/index.d.ts +0 -1
- package/types/index.d.ts.map +1 -1
- package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.styles_936wgl.css +0 -1
- package/cjs/components/Dropdown/Dropdown.styles_1daxhqh.css +0 -2
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles_1juhjtq.css +0 -4
- package/cjs/components/Dropdown/ui/DropdownItem/variations/_size/base.js.map +0 -1
- package/cjs/components/Dropdown/ui/DropdownItem/variations/_view/base.js.map +0 -1
- package/cjs/components/IconButton/IconButton.css +0 -24
- package/cjs/components/IconButton/IconButton.js +0 -50
- package/cjs/components/IconButton/IconButton.js.map +0 -1
- package/cjs/components/IconButton/IconButton.styles.js +0 -16
- package/cjs/components/IconButton/IconButton.styles.js.map +0 -1
- package/cjs/components/IconButton/IconButton.styles_1hknr37.css +0 -1
- package/cjs/components/IconButton/IconButton.tokens.js +0 -32
- package/cjs/components/IconButton/IconButton.tokens.js.map +0 -1
- package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.styles_936wgl.css +0 -1
- package/es/components/Dropdown/Dropdown.styles_1daxhqh.css +0 -2
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles_1juhjtq.css +0 -4
- package/es/components/Dropdown/ui/DropdownItem/variations/_size/base.js.map +0 -1
- package/es/components/Dropdown/ui/DropdownItem/variations/_view/base.js.map +0 -1
- package/es/components/IconButton/IconButton.css +0 -24
- package/es/components/IconButton/IconButton.js +0 -45
- package/es/components/IconButton/IconButton.js.map +0 -1
- package/es/components/IconButton/IconButton.styles.js +0 -12
- package/es/components/IconButton/IconButton.styles.js.map +0 -1
- package/es/components/IconButton/IconButton.styles_1hknr37.css +0 -1
- package/es/components/IconButton/IconButton.tokens.js +0 -28
- package/es/components/IconButton/IconButton.tokens.js.map +0 -1
- package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +0 -80
- package/styled-components/cjs/components/Dropdown/ui/DropdownItem/variations/_size/tokens.json +0 -19
- package/styled-components/cjs/components/Dropdown/ui/DropdownItem/variations/_view/tokens.json +0 -9
- package/styled-components/cjs/components/IconButton/IconButton.js +0 -47
- package/styled-components/cjs/components/IconButton/IconButton.styles.js +0 -12
- package/styled-components/cjs/components/IconButton/IconButton.tokens.js +0 -31
- package/styled-components/cjs/components/IconButton/index.js +0 -25
- package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.config.js +0 -27
- package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.js +0 -13
- package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.stories.tsx +0 -194
- package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.config.js +0 -27
- package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.js +0 -13
- package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.stories.tsx +0 -195
- package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.config.js +0 -45
- package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.js +0 -11
- package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +0 -69
- package/styled-components/cjs/examples/plasma_web/components/Dropdown/Normal/Dropdown.config.js +0 -27
- package/styled-components/cjs/examples/plasma_web/components/Dropdown/Normal/Dropdown.js +0 -13
- package/styled-components/cjs/examples/plasma_web/components/Dropdown/Normal/Dropdown.stories.tsx +0 -195
- package/styled-components/cjs/examples/plasma_web/components/Dropdown/Tight/Dropdown.config.js +0 -27
- package/styled-components/cjs/examples/plasma_web/components/Dropdown/Tight/Dropdown.js +0 -13
- package/styled-components/cjs/examples/plasma_web/components/Dropdown/Tight/Dropdown.stories.tsx +0 -195
- package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.config.js +0 -45
- package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.js +0 -11
- package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.stories.tsx +0 -69
- package/styled-components/cjs/examples/sds_engineer/components/Dropdown/Dropdown.config.js +0 -22
- package/styled-components/cjs/examples/sds_engineer/components/Dropdown/Dropdown.js +0 -21
- package/styled-components/cjs/examples/sds_engineer/components/Dropdown/Dropdown.stories.tsx +0 -277
- package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +0 -80
- package/styled-components/es/components/Dropdown/ui/DropdownItem/variations/_size/tokens.json +0 -19
- package/styled-components/es/components/Dropdown/ui/DropdownItem/variations/_view/tokens.json +0 -9
- package/styled-components/es/components/IconButton/IconButton.js +0 -41
- package/styled-components/es/components/IconButton/IconButton.styles.js +0 -6
- package/styled-components/es/components/IconButton/IconButton.tokens.js +0 -25
- package/styled-components/es/components/IconButton/index.js +0 -2
- package/styled-components/es/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.config.js +0 -21
- package/styled-components/es/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.js +0 -7
- package/styled-components/es/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.stories.tsx +0 -194
- package/styled-components/es/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.config.js +0 -21
- package/styled-components/es/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.js +0 -7
- package/styled-components/es/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.stories.tsx +0 -195
- package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.config.js +0 -39
- package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.js +0 -5
- package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +0 -69
- package/styled-components/es/examples/plasma_web/components/Dropdown/Normal/Dropdown.config.js +0 -21
- package/styled-components/es/examples/plasma_web/components/Dropdown/Normal/Dropdown.js +0 -7
- package/styled-components/es/examples/plasma_web/components/Dropdown/Normal/Dropdown.stories.tsx +0 -195
- package/styled-components/es/examples/plasma_web/components/Dropdown/Tight/Dropdown.config.js +0 -21
- package/styled-components/es/examples/plasma_web/components/Dropdown/Tight/Dropdown.js +0 -7
- package/styled-components/es/examples/plasma_web/components/Dropdown/Tight/Dropdown.stories.tsx +0 -195
- package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.config.js +0 -39
- package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.js +0 -5
- package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.stories.tsx +0 -69
- package/styled-components/es/examples/sds_engineer/components/Dropdown/Dropdown.config.js +0 -16
- package/styled-components/es/examples/sds_engineer/components/Dropdown/Dropdown.js +0 -15
- package/styled-components/es/examples/sds_engineer/components/Dropdown/Dropdown.stories.tsx +0 -277
- package/types/components/Dropdown/ui/DropdownItem/variations/_size/base.d.ts.map +0 -1
- package/types/components/Dropdown/ui/DropdownItem/variations/_view/base.d.ts.map +0 -1
- package/types/components/IconButton/IconButton.d.ts +0 -35
- package/types/components/IconButton/IconButton.d.ts.map +0 -1
- package/types/components/IconButton/IconButton.styles.d.ts +0 -3
- package/types/components/IconButton/IconButton.styles.d.ts.map +0 -1
- package/types/components/IconButton/IconButton.tokens.d.ts +0 -26
- package/types/components/IconButton/IconButton.tokens.d.ts.map +0 -1
- package/types/components/IconButton/index.d.ts +0 -3
- package/types/components/IconButton/index.d.ts.map +0 -1
- package/types/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.config.d.ts.map +0 -1
- package/types/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.d.ts +0 -30
- package/types/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.d.ts.map +0 -1
- package/types/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.config.d.ts +0 -18
- package/types/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.config.d.ts.map +0 -1
- package/types/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.d.ts +0 -30
- package/types/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.d.ts.map +0 -1
- package/types/examples/plasma_b2c/components/IconButton/IconButton.config.d.ts +0 -38
- package/types/examples/plasma_b2c/components/IconButton/IconButton.config.d.ts.map +0 -1
- package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts +0 -32
- package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts.map +0 -1
- package/types/examples/plasma_web/components/Dropdown/Normal/Dropdown.config.d.ts +0 -18
- package/types/examples/plasma_web/components/Dropdown/Normal/Dropdown.config.d.ts.map +0 -1
- package/types/examples/plasma_web/components/Dropdown/Normal/Dropdown.d.ts +0 -30
- package/types/examples/plasma_web/components/Dropdown/Normal/Dropdown.d.ts.map +0 -1
- package/types/examples/plasma_web/components/Dropdown/Tight/Dropdown.config.d.ts +0 -18
- package/types/examples/plasma_web/components/Dropdown/Tight/Dropdown.config.d.ts.map +0 -1
- package/types/examples/plasma_web/components/Dropdown/Tight/Dropdown.d.ts +0 -30
- package/types/examples/plasma_web/components/Dropdown/Tight/Dropdown.d.ts.map +0 -1
- package/types/examples/plasma_web/components/IconButton/IconButton.config.d.ts +0 -38
- package/types/examples/plasma_web/components/IconButton/IconButton.config.d.ts.map +0 -1
- package/types/examples/plasma_web/components/IconButton/IconButton.d.ts +0 -32
- package/types/examples/plasma_web/components/IconButton/IconButton.d.ts.map +0 -1
- package/types/examples/sds_engineer/components/Dropdown/Dropdown.config.d.ts +0 -15
- package/types/examples/sds_engineer/components/Dropdown/Dropdown.config.d.ts.map +0 -1
- package/types/examples/sds_engineer/components/Dropdown/Dropdown.d.ts +0 -51
- package/types/examples/sds_engineer/components/Dropdown/Dropdown.d.ts.map +0 -1
- /package/cjs/components/Dropdown/ui/{DropdownItem → DropdownItemOld}/variations/_size/base_x642ct.css +0 -0
- /package/cjs/components/Dropdown/ui/{DropdownItem → DropdownItemOld}/variations/_view/base_x642ct.css +0 -0
- /package/es/components/Dropdown/ui/{DropdownItem → DropdownItemOld}/variations/_size/base_x642ct.css +0 -0
- /package/es/components/Dropdown/ui/{DropdownItem → DropdownItemOld}/variations/_view/base_x642ct.css +0 -0
- /package/styled-components/cjs/components/Dropdown/ui/{DropdownItem → DropdownItemOld}/variations/_size/base.js +0 -0
- /package/styled-components/cjs/components/Dropdown/ui/{DropdownItem → DropdownItemOld}/variations/_view/base.js +0 -0
- /package/styled-components/es/components/Dropdown/ui/{DropdownItem → DropdownItemOld}/variations/_size/base.js +0 -0
- /package/styled-components/es/components/Dropdown/ui/{DropdownItem → DropdownItemOld}/variations/_view/base.js +0 -0
- /package/types/components/Dropdown/ui/{DropdownItem → DropdownItemOld}/variations/_size/base.d.ts +0 -0
- /package/types/components/Dropdown/ui/{DropdownItem → DropdownItemOld}/variations/_view/base.d.ts +0 -0
- /package/types/examples/plasma_b2c/components/Dropdown/{Normal/Dropdown.config.d.ts → Dropdown.config.d.ts} +0 -0
@@ -1,24 +0,0 @@
|
|
1
|
-
.base_1gusher_b1chvyq8__76b641f5{color:var(--plasma-spinner-color);}
|
2
|
-
|
3
|
-
.base_ova69f_bw56nfh__55225c7f{width:var(--plasma-spinner-size);height:var(--plasma-spinner-size);}
|
4
|
-
|
5
|
-
.Spinner_styles_13q7ndk_b1hp2dsz__af962114{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;box-sizing:border-box;}
|
6
|
-
.Spinner_styles_13q7ndk_s122r4cn__af962114{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:var(--s122r4cn-0);height:var(--s122r4cn-1);-webkit-animation:Spinner_styles_13q7ndk_rotateS122r4cn__af962114 1s linear infinite;animation:Spinner_styles_13q7ndk_rotateS122r4cn__af962114 1s linear infinite;}@-webkit-keyframes Spinner_styles_13q7ndk_rotateS122r4cn__af962114{from{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes Spinner_styles_13q7ndk_rotateS122r4cn__af962114{from{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
|
7
|
-
|
8
|
-
.Button_styles_uqvh6u_bzw1898__b7cda4d5{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--plasma_private-btn-br:var(--plasma_computed-btn-br);border-radius:var(--plasma_private-btn-br);}a.Button_styles_uqvh6u_bzw1898__b7cda4d5{-webkit-text-decoration:none;text-decoration:none;}.Button_styles_uqvh6u_bzw1898__b7cda4d5.Button_styles_uqvh6u_bzw1898__b7cda4d5.Button_styles_uqvh6u_buttonSquare__b7cda4d5{width:var(--plasma-button-height);padding:0;}
|
9
|
-
.Button_styles_uqvh6u_bdfuqwe__b7cda4d5{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.Button_styles_uqvh6u_bdfuqwe__b7cda4d5:not(:last-child){margin-right:0.375rem;}.Button_styles_uqvh6u_bdfuqwe__b7cda4d5:not(:first-child){margin-left:0.375rem;}
|
10
|
-
.Button_styles_uqvh6u_l9ypozh__b7cda4d5{opacity:var(--l9ypozh-0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-webkit-align-items:inherit;-webkit-box-align:inherit;-ms-flex-align:inherit;align-items:inherit;-webkit-box-pack:inherit;-webkit-justify-content:inherit;-ms-flex-pack:inherit;justify-content:inherit;height:100%;}
|
11
|
-
.Button_styles_uqvh6u_l4dfhbg__b7cda4d5{position:absolute;}
|
12
|
-
.Button_styles_uqvh6u_srdlazt__b7cda4d5{--plasma-spinner-size:var(--plasma-button-spinner-size);--plasma-spinner-color:var(--plasma-button-spinner-color);}
|
13
|
-
|
14
|
-
.base_x95x4p_b1ty39ru__349bf40b{color:var(--plasma-button-color);background-color:var(--plasma-button-background-color);}.base_x95x4p_b1ty39ru__349bf40b:hover{color:var(--plasma-button-color-hover,var(--plasma-button-color));background-color:var(--plasma-button-background-color-hover,var(--plasma-button-background-color));scale:var(--plasma-button-scale-hover);}.base_x95x4p_b1ty39ru__349bf40b:active{color:var(--plasma-button-color-active,var(--plasma-button-color));background-color:var(--plasma-button-background-color-active,var(--plasma-button-background-color));scale:var(---plasma-button-scale-active);}
|
15
|
-
|
16
|
-
.base_1alzrso_be0ha5g__cdc67255{height:var(--plasma-button-height);padding:0 var(--plasma-button-padding,calc(var(--plasma-button-height) * 1.618 / 4));font-family:var(--plasma-button-font-family);font-size:var(--plasma-button-font-size);font-style:var(--plasma-button-font-style);font-weight:var(--plasma-button-font-weight);-webkit-letter-spacing:var(--plasma-button-letter-spacing);-moz-letter-spacing:var(--plasma-button-letter-spacing);-ms-letter-spacing:var(--plasma-button-letter-spacing);letter-spacing:var(--plasma-button-letter-spacing);line-height:var(--plasma-button-line-height);--plasma_private-btn-outline-size:var(--plasma-button-outline-size,0.0625rem);}
|
17
|
-
|
18
|
-
.base_1t3ywu_b169l30m__aba40ddd[disabled]{opacity:var(--plasma-button-disabled-opacity);cursor:not-allowed;}.base_1t3ywu_b169l30m__aba40ddd[disabled]:hover,.base_1t3ywu_b169l30m__aba40ddd[disabled]:active{scale:none;color:var(--plasma-button-color);background-color:var(--plasma-button-background-color);}
|
19
|
-
|
20
|
-
.base_1kq737e_b187cmzt__d829f64a{position:relative;}.base_1kq737e_b187cmzt__d829f64a:focus{outline:none;}.base_1kq737e_b187cmzt__d829f64a::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-btn-outline-size) solid transparent;border-radius:calc(0.125rem + var(--plasma_private-btn-br));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_1kq737e_b187cmzt__d829f64a.base_1kq737e_focusVisible__d829f64a:focus::before,.base_1kq737e_b187cmzt__d829f64a[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-btn-outline-size) var(--plasma-button-focus-color);}
|
21
|
-
|
22
|
-
.base_1lx0ute_bdz31nb__16e78f09.base_1lx0ute_buttonStretchingFixed__16e78f09{width:var(--plasma-button-width);}.base_1lx0ute_bdz31nb__16e78f09.base_1lx0ute_buttonStretchingFilled__16e78f09{width:100%;}.base_1lx0ute_bdz31nb__16e78f09.base_1lx0ute_buttonStretchingAuto__16e78f09{width:auto;}
|
23
|
-
|
24
|
-
.IconButton_styles_1hknr37_b1ua728l__f14249fc{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--plasma_private-btn-br:var(--plasma_computed-btn-br);border-radius:var(--plasma_private-btn-br);color:var(--plasma-button-color);background-color:var(--plasma-button-background-color);height:var(--plasma-button-height);width:var(--plasma-button-width);padding:0 var(--plasma-button-padding,calc(var(--plasma-button-height) * 1.618 / 4));font-family:var(--plasma-button-font-family);font-size:var(--plasma-button-font-size);font-style:var(--plasma-button-font-style);font-weight:var(--plasma-button-font-weight);-webkit-letter-spacing:var(--plasma-button-letter-spacing);-moz-letter-spacing:var(--plasma-button-letter-spacing);-ms-letter-spacing:var(--plasma-button-letter-spacing);letter-spacing:var(--plasma-button-letter-spacing);line-height:var(--plasma-button-line-height);--plasma_private-btn-outline-size:var(--plasma-button-outline-size,0.0625rem);position:relative;--plasma-button-padding:0;--plasma-button-color:var(--plasma-icon-button-color);--plasma-button-background-color:var(--plasma-icon-button-background-color);--plasma-button-color-hover:var(--plasma-icon-button-color-hover);--plasma-button-background-color-hover:var(--plasma-icon-button-background-color-hover);--plasma-button-color-active:var(--plasma-icon-button-color-active);--plasma-button-background-color-active:var(--plasma-icon-button-background-color-active);--plasma-button-font-family:var(--plasma-icon-button-font-family);--plasma-button-font-size:var(--plasma-icon-button-font-size);--plasma-button-font-style:var(--plasma-icon-button-font-style);--plasma-button-font-weight:var(--plasma-icon-button-font-weight);--plasma-button-letter-spacing:var(--plasma-icon-button-letter-spacing);--plasma-button-line-height:var(--plasma-icon-button-line-height);--plasma-button-width:var(--plasma-icon-button-width);--plasma-button-height:var(--plasma-icon-button-height);--plasma-button-radius:var(--plasma-icon-button-radius);--plasma-button-disabled-opacity:var(--plasma-icon-button-disabled-opacity);--plasma-button-focus-color:var(--plasma-icon-button-focus-color);--plasma-button-spinner-size:var(--plasma-icon-button-spinner-size);--plasma-button-spinner-color:var(--plasma-icon-button-spinner-color);}a.IconButton_styles_1hknr37_b1ua728l__f14249fc{-webkit-text-decoration:none;text-decoration:none;}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_buttonSquare__f14249fc{width:var(--plasma-button-height);padding:0;}.IconButton_styles_1hknr37_b1ua728l__f14249fc:hover{color:var(--plasma-button-color-hover,var(--plasma-button-color));background-color:var(--plasma-button-background-color-hover,var(--plasma-button-background-color));scale:var(--plasma-button-scale-hover);}.IconButton_styles_1hknr37_b1ua728l__f14249fc:active{color:var(--plasma-button-color-active,var(--plasma-button-color));background-color:var(--plasma-button-background-color-active,var(--plasma-button-background-color));scale:var(---plasma-button-scale-active);}.IconButton_styles_1hknr37_b1ua728l__f14249fc:focus{outline:none;}.IconButton_styles_1hknr37_b1ua728l__f14249fc::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-btn-outline-size) solid transparent;border-radius:calc(0.125rem + var(--plasma_private-btn-br));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_focusVisible__f14249fc:focus::before,.IconButton_styles_1hknr37_b1ua728l__f14249fc[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-btn-outline-size) var(--plasma-button-focus-color);}.IconButton_styles_1hknr37_b1ua728l__f14249fc[disabled]{opacity:var(--plasma-button-disabled-opacity);cursor:not-allowed;}.IconButton_styles_1hknr37_b1ua728l__f14249fc[disabled]:hover,.IconButton_styles_1hknr37_b1ua728l__f14249fc[disabled]:active{scale:none;color:var(--plasma-button-color);background-color:var(--plasma-button-background-color);}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_buttonStretchingFixed__f14249fc{width:var(--plasma-button-width);}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_buttonStretchingFilled__f14249fc{width:100%;}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_buttonStretchingAuto__f14249fc{width:auto;}
|
@@ -1,45 +0,0 @@
|
|
1
|
-
import { buttonRoot } from '../Button/Button.js';
|
2
|
-
import { base as base$1 } from '../Button/variations/_view/base.js';
|
3
|
-
import { base as base$2 } from '../Button/variations/_size/base.js';
|
4
|
-
import { base as base$3 } from '../Button/variations/_disabled/base.js';
|
5
|
-
import { base as base$4 } from '../Button/variations/_focused/base.js';
|
6
|
-
import { base as base$5 } from '../Button/variations/_blurred/base.js';
|
7
|
-
import { base as base$6 } from '../Button/variations/_stretching/base.js';
|
8
|
-
import { base } from './IconButton.styles.js';
|
9
|
-
|
10
|
-
var iconButtonRoot = buttonRoot;
|
11
|
-
var iconButtonConfig = {
|
12
|
-
name: 'IconButton',
|
13
|
-
tag: 'button',
|
14
|
-
layout: iconButtonRoot,
|
15
|
-
base: base,
|
16
|
-
variations: {
|
17
|
-
view: {
|
18
|
-
css: base$1
|
19
|
-
},
|
20
|
-
size: {
|
21
|
-
css: base$2
|
22
|
-
},
|
23
|
-
disabled: {
|
24
|
-
css: base$3,
|
25
|
-
attrs: true
|
26
|
-
},
|
27
|
-
focused: {
|
28
|
-
css: base$4
|
29
|
-
},
|
30
|
-
blurred: {
|
31
|
-
css: base$5
|
32
|
-
},
|
33
|
-
stretching: {
|
34
|
-
css: base$6
|
35
|
-
}
|
36
|
-
},
|
37
|
-
defaults: {
|
38
|
-
view: 'secondary',
|
39
|
-
size: 'm',
|
40
|
-
stretching: 'fixed'
|
41
|
-
}
|
42
|
-
};
|
43
|
-
|
44
|
-
export { iconButtonConfig, iconButtonRoot };
|
45
|
-
//# sourceMappingURL=IconButton.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"IconButton.js","sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { buttonRoot } from '../Button';\nimport { base as viewCSS } from '../Button/variations/_view/base';\nimport { base as sizeCSS } from '../Button/variations/_size/base';\nimport { base as disabledCSS } from '../Button/variations/_disabled/base';\nimport { base as focusedCSS } from '../Button/variations/_focused/base';\nimport { base as blurredCSS } from '../Button/variations/_blurred/base';\nimport { base as stretchingCSS } from '../Button/variations/_stretching/base';\n\nimport { base } from './IconButton.styles';\n\nexport const iconButtonRoot = buttonRoot;\n\nexport const iconButtonConfig = {\n name: 'IconButton',\n tag: 'button',\n layout: iconButtonRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n size: {\n css: sizeCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n focused: {\n css: focusedCSS,\n },\n blurred: {\n css: blurredCSS,\n },\n stretching: {\n css: stretchingCSS,\n },\n },\n defaults: {\n view: 'secondary',\n size: 'm',\n stretching: 'fixed',\n },\n};\n"],"names":["iconButtonRoot","buttonRoot","iconButtonConfig","name","tag","layout","base","variations","view","css","viewCSS","size","sizeCSS","disabled","disabledCSS","attrs","focused","focusedCSS","blurred","blurredCSS","stretching","stretchingCSS","defaults"],"mappings":";;;;;;;;;AAUO,IAAMA,cAAc,GAAGC,WAAU;AAEjC,IAAMC,gBAAgB,GAAG;AAC5BC,EAAAA,IAAI,EAAE,YAAY;AAClBC,EAAAA,GAAG,EAAE,QAAQ;AACbC,EAAAA,MAAM,EAAEL,cAAc;AACtBM,EAAAA,IAAI,EAAJA,IAAI;AACJC,EAAAA,UAAU,EAAE;AACRC,IAAAA,IAAI,EAAE;AACFC,MAAAA,GAAG,EAAEC,MAAAA;KACR;AACDC,IAAAA,IAAI,EAAE;AACFF,MAAAA,GAAG,EAAEG,MAAAA;KACR;AACDC,IAAAA,QAAQ,EAAE;AACNJ,MAAAA,GAAG,EAAEK,MAAW;AAChBC,MAAAA,KAAK,EAAE,IAAA;KACV;AACDC,IAAAA,OAAO,EAAE;AACLP,MAAAA,GAAG,EAAEQ,MAAAA;KACR;AACDC,IAAAA,OAAO,EAAE;AACLT,MAAAA,GAAG,EAAEU,MAAAA;KACR;AACDC,IAAAA,UAAU,EAAE;AACRX,MAAAA,GAAG,EAAEY,MAAAA;AACT,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE;AACNd,IAAAA,IAAI,EAAE,WAAW;AACjBG,IAAAA,IAAI,EAAE,GAAG;AACTS,IAAAA,UAAU,EAAE,OAAA;AAChB,GAAA;AACJ;;;;"}
|
@@ -1,12 +0,0 @@
|
|
1
|
-
import './IconButton.styles_1hknr37.css';
|
2
|
-
import 'react';
|
3
|
-
import '../../utils/react.js';
|
4
|
-
import '@linaria/react';
|
5
|
-
import 'focus-visible';
|
6
|
-
import '@linaria/core';
|
7
|
-
import '@salutejs/plasma-core';
|
8
|
-
|
9
|
-
var base = "b1ua728l";
|
10
|
-
|
11
|
-
export { base };
|
12
|
-
//# sourceMappingURL=IconButton.styles.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"IconButton.styles.js","sources":["../../../src/components/IconButton/IconButton.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { buttonTokens } from '../Button';\nimport { baseContent as buttonBase } from '../Button/Button.styles';\n\nimport { tokens } from './IconButton.tokens';\n\nexport const mappingOverride = `\n ${buttonTokens.buttonPadding}: 0;\n\n ${buttonTokens.buttonColor}: var(${tokens.iconButtonColor});\n ${buttonTokens.buttonBackgroundColor}: var(${tokens.iconButtonBackgroundColor});\n\n ${buttonTokens.buttonColorHover}: var(${tokens.iconButtonColorHover});\n ${buttonTokens.buttonBackgroundColorHover}: var(${tokens.iconButtonBackgroundColorHover});\n\n ${buttonTokens.buttonColorActive}: var(${tokens.iconButtonColorActive});\n ${buttonTokens.buttonBackgroundColorActive}: var(${tokens.iconButtonBackgroundColorActive});\n\n\n ${buttonTokens.buttonFontFamily}: var(${tokens.iconButtonFontFamily});\n ${buttonTokens.buttonFontSize}: var(${tokens.iconButtonFontSize});\n ${buttonTokens.buttonFontStyle}: var(${tokens.iconButtonFontStyle});\n ${buttonTokens.buttonFontWeight}:var(${tokens.iconButtonFontWeight});\n ${buttonTokens.buttonLetterSpacing}: var(${tokens.iconButtonLetterSpacing});\n ${buttonTokens.buttonLineHeight}: var(${tokens.iconButtonLineHeight});\n\n ${buttonTokens.buttonWidth}: var(${tokens.iconButtonWidth});\n ${buttonTokens.buttonHeight}: var(${tokens.iconButtonHeight});\n ${buttonTokens.buttonRadius}: var(${tokens.iconButtonRadius});\n\n ${buttonTokens.buttonDisabledOpacity}: var(${tokens.iconButtonDisabledOpacity});\n ${buttonTokens.buttonFocusColor}: var(${tokens.iconButtonFocusColor});\n\n ${buttonTokens.buttonSpinnerSize}: var(${tokens.iconButtonSpinnerSize});\n ${buttonTokens.buttonSpinnerColor}: var(${tokens.iconButtonSpinnerColor});\n`;\n\nexport const base = css`\n ${buttonBase};\n ${mappingOverride};\n`;\n"],"names":["base"],"mappings":";;;;;;;AAsCO,IAAMA,IAAI,GAGhB;;;;"}
|
@@ -1 +0,0 @@
|
|
1
|
-
.b1ua728l{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--plasma_private-btn-br:var(--plasma_computed-btn-br);border-radius:var(--plasma_private-btn-br);color:var(--plasma-button-color);background-color:var(--plasma-button-background-color);height:var(--plasma-button-height);width:var(--plasma-button-width);padding:0 var(--plasma-button-padding,calc(var(--plasma-button-height) * 1.618 / 4));font-family:var(--plasma-button-font-family);font-size:var(--plasma-button-font-size);font-style:var(--plasma-button-font-style);font-weight:var(--plasma-button-font-weight);-webkit-letter-spacing:var(--plasma-button-letter-spacing);-moz-letter-spacing:var(--plasma-button-letter-spacing);-ms-letter-spacing:var(--plasma-button-letter-spacing);letter-spacing:var(--plasma-button-letter-spacing);line-height:var(--plasma-button-line-height);--plasma_private-btn-outline-size:var(--plasma-button-outline-size,0.0625rem);position:relative;--plasma-button-padding:0;--plasma-button-color:var(--plasma-icon-button-color);--plasma-button-background-color:var(--plasma-icon-button-background-color);--plasma-button-color-hover:var(--plasma-icon-button-color-hover);--plasma-button-background-color-hover:var(--plasma-icon-button-background-color-hover);--plasma-button-color-active:var(--plasma-icon-button-color-active);--plasma-button-background-color-active:var(--plasma-icon-button-background-color-active);--plasma-button-font-family:var(--plasma-icon-button-font-family);--plasma-button-font-size:var(--plasma-icon-button-font-size);--plasma-button-font-style:var(--plasma-icon-button-font-style);--plasma-button-font-weight:var(--plasma-icon-button-font-weight);--plasma-button-letter-spacing:var(--plasma-icon-button-letter-spacing);--plasma-button-line-height:var(--plasma-icon-button-line-height);--plasma-button-width:var(--plasma-icon-button-width);--plasma-button-height:var(--plasma-icon-button-height);--plasma-button-radius:var(--plasma-icon-button-radius);--plasma-button-disabled-opacity:var(--plasma-icon-button-disabled-opacity);--plasma-button-focus-color:var(--plasma-icon-button-focus-color);--plasma-button-spinner-size:var(--plasma-icon-button-spinner-size);--plasma-button-spinner-color:var(--plasma-icon-button-spinner-color);}a.b1ua728l{-webkit-text-decoration:none;text-decoration:none;}.b1ua728l.b1ua728l.button-square{width:var(--plasma-button-height);padding:0;}.b1ua728l:hover{color:var(--plasma-button-color-hover,var(--plasma-button-color));background-color:var(--plasma-button-background-color-hover,var(--plasma-button-background-color));scale:var(--plasma-button-scale-hover);}.b1ua728l:active{color:var(--plasma-button-color-active,var(--plasma-button-color));background-color:var(--plasma-button-background-color-active,var(--plasma-button-background-color));scale:var(---plasma-button-scale-active);}.b1ua728l:focus{outline:none;}.b1ua728l::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-btn-outline-size) solid transparent;border-radius:calc(0.125rem + var(--plasma_private-btn-br));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.b1ua728l.focus-visible:focus::before,.b1ua728l[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-btn-outline-size) var(--plasma-button-focus-color);}.b1ua728l[disabled]{opacity:var(--plasma-button-disabled-opacity);cursor:not-allowed;}.b1ua728l[disabled]:hover,.b1ua728l[disabled]:active{scale:none;color:var(--plasma-button-color);background-color:var(--plasma-button-background-color);}.b1ua728l.button-stretching-fixed{width:var(--plasma-button-width);}.b1ua728l.button-stretching-filled{width:100%;}.b1ua728l.button-stretching-auto{width:auto;}
|
@@ -1,28 +0,0 @@
|
|
1
|
-
var tokens = {
|
2
|
-
iconButtonColor: '--plasma-icon-button-color',
|
3
|
-
iconButtonBackgroundColor: '--plasma-icon-button-background-color',
|
4
|
-
iconButtonColorHover: '--plasma-icon-button-color-hover',
|
5
|
-
iconButtonBackgroundColorHover: '--plasma-icon-button-background-color-hover',
|
6
|
-
iconButtonColorActive: '--plasma-icon-button-color-active',
|
7
|
-
iconButtonBackgroundColorActive: '--plasma-icon-button-background-color-active',
|
8
|
-
iconButtonScaleHover: '--plasma-icon-button-scale-hover',
|
9
|
-
iconButtonScaleActive: '---plasma-icon-button-scale-active',
|
10
|
-
iconButtonHeight: '--plasma-icon-button-height',
|
11
|
-
iconButtonWidth: '--plasma-icon-button-width',
|
12
|
-
iconButtonPadding: '--plasma-icon-button-padding',
|
13
|
-
iconButtonRadius: '--plasma-icon-button-radius',
|
14
|
-
iconButtonRadiusCircle: '--plasma-icon-button-radius-circle',
|
15
|
-
iconButtonFontFamily: '--plasma-icon-button-font-family',
|
16
|
-
iconButtonFontSize: '--plasma-icon-button-font-size',
|
17
|
-
iconButtonFontStyle: '--plasma-icon-button-font-style',
|
18
|
-
iconButtonFontWeight: '--plasma-icon-button-font-weight',
|
19
|
-
iconButtonLetterSpacing: '--plasma-icon-button-letter-spacing',
|
20
|
-
iconButtonLineHeight: '--plasma-icon-button-line-height',
|
21
|
-
iconButtonDisabledOpacity: '--plasma-icon-button-disabled-opacity',
|
22
|
-
iconButtonFocusColor: '--plasma-icon-button-focus-color',
|
23
|
-
iconButtonSpinnerColor: '--plasma-icon-button-spinner-color',
|
24
|
-
iconButtonSpinnerSize: '--plasma-icon-button-spinner-size'
|
25
|
-
};
|
26
|
-
|
27
|
-
export { tokens };
|
28
|
-
//# sourceMappingURL=IconButton.tokens.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"IconButton.tokens.js","sources":["../../../src/components/IconButton/IconButton.tokens.ts"],"sourcesContent":["export const tokens = {\n iconButtonColor: '--plasma-icon-button-color',\n iconButtonBackgroundColor: '--plasma-icon-button-background-color',\n iconButtonColorHover: '--plasma-icon-button-color-hover',\n iconButtonBackgroundColorHover: '--plasma-icon-button-background-color-hover',\n iconButtonColorActive: '--plasma-icon-button-color-active',\n iconButtonBackgroundColorActive: '--plasma-icon-button-background-color-active',\n\n iconButtonScaleHover: '--plasma-icon-button-scale-hover',\n iconButtonScaleActive: '---plasma-icon-button-scale-active',\n iconButtonHeight: '--plasma-icon-button-height',\n iconButtonWidth: '--plasma-icon-button-width',\n iconButtonPadding: '--plasma-icon-button-padding',\n iconButtonRadius: '--plasma-icon-button-radius',\n iconButtonRadiusCircle: '--plasma-icon-button-radius-circle',\n\n iconButtonFontFamily: '--plasma-icon-button-font-family',\n iconButtonFontSize: '--plasma-icon-button-font-size',\n iconButtonFontStyle: '--plasma-icon-button-font-style',\n iconButtonFontWeight: '--plasma-icon-button-font-weight',\n iconButtonLetterSpacing: '--plasma-icon-button-letter-spacing',\n iconButtonLineHeight: '--plasma-icon-button-line-height',\n\n iconButtonDisabledOpacity: '--plasma-icon-button-disabled-opacity',\n iconButtonFocusColor: '--plasma-icon-button-focus-color',\n\n iconButtonSpinnerColor: '--plasma-icon-button-spinner-color',\n iconButtonSpinnerSize: '--plasma-icon-button-spinner-size',\n};\n"],"names":["tokens","iconButtonColor","iconButtonBackgroundColor","iconButtonColorHover","iconButtonBackgroundColorHover","iconButtonColorActive","iconButtonBackgroundColorActive","iconButtonScaleHover","iconButtonScaleActive","iconButtonHeight","iconButtonWidth","iconButtonPadding","iconButtonRadius","iconButtonRadiusCircle","iconButtonFontFamily","iconButtonFontSize","iconButtonFontStyle","iconButtonFontWeight","iconButtonLetterSpacing","iconButtonLineHeight","iconButtonDisabledOpacity","iconButtonFocusColor","iconButtonSpinnerColor","iconButtonSpinnerSize"],"mappings":"AAAO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,eAAe,EAAE,4BAA4B;AAC7CC,EAAAA,yBAAyB,EAAE,uCAAuC;AAClEC,EAAAA,oBAAoB,EAAE,kCAAkC;AACxDC,EAAAA,8BAA8B,EAAE,6CAA6C;AAC7EC,EAAAA,qBAAqB,EAAE,mCAAmC;AAC1DC,EAAAA,+BAA+B,EAAE,8CAA8C;AAE/EC,EAAAA,oBAAoB,EAAE,kCAAkC;AACxDC,EAAAA,qBAAqB,EAAE,oCAAoC;AAC3DC,EAAAA,gBAAgB,EAAE,6BAA6B;AAC/CC,EAAAA,eAAe,EAAE,4BAA4B;AAC7CC,EAAAA,iBAAiB,EAAE,8BAA8B;AACjDC,EAAAA,gBAAgB,EAAE,6BAA6B;AAC/CC,EAAAA,sBAAsB,EAAE,oCAAoC;AAE5DC,EAAAA,oBAAoB,EAAE,kCAAkC;AACxDC,EAAAA,kBAAkB,EAAE,gCAAgC;AACpDC,EAAAA,mBAAmB,EAAE,iCAAiC;AACtDC,EAAAA,oBAAoB,EAAE,kCAAkC;AACxDC,EAAAA,uBAAuB,EAAE,qCAAqC;AAC9DC,EAAAA,oBAAoB,EAAE,kCAAkC;AAExDC,EAAAA,yBAAyB,EAAE,uCAAuC;AAClEC,EAAAA,oBAAoB,EAAE,kCAAkC;AAExDC,EAAAA,sBAAsB,EAAE,oCAAoC;AAC5DC,EAAAA,qBAAqB,EAAE,mCAAA;AAC3B;;;;"}
|
@@ -1,80 +0,0 @@
|
|
1
|
-
---
|
2
|
-
id: dropdown
|
3
|
-
title: Dropdown
|
4
|
-
---
|
5
|
-
|
6
|
-
import { PropsTable, Description } from '@site/src/components';
|
7
|
-
|
8
|
-
# Dropdown
|
9
|
-
Набор компонентов для создания выпадающих списков.
|
10
|
-
|
11
|
-
<Description name="Dropdown" />
|
12
|
-
<PropsTable name="Dropdown" exclude={['css']} />
|
13
|
-
|
14
|
-
# DropdownItem
|
15
|
-
|
16
|
-
<Description name="DropdownItem" />
|
17
|
-
<PropsTable name="DropdownItem" exclude={['css']} />
|
18
|
-
|
19
|
-
## Использование
|
20
|
-
|
21
|
-
```tsx live
|
22
|
-
import React, { useState } from 'react';
|
23
|
-
import { Dropdown, DropdownItem } from '@salutejs/{{ package }}';
|
24
|
-
import { surfaceSolidSecondary } from '@salutejs/{{ theme }}';
|
25
|
-
|
26
|
-
export function App() {
|
27
|
-
const [selected, setSelected] = useState('');
|
28
|
-
const [isOpen, setIsOpen] = useState(false);
|
29
|
-
|
30
|
-
const handleSelect = (value: string, text: string) => {
|
31
|
-
setSelected(value);
|
32
|
-
setIsOpen(false);
|
33
|
-
};
|
34
|
-
|
35
|
-
const getDropdownItems = (slug: string, elemCount: number) =>
|
36
|
-
[...Array(elemCount).keys()].map((num) => ({
|
37
|
-
value: `${slug}_${num}`,
|
38
|
-
child: `${slug} ${num}`,
|
39
|
-
}));
|
40
|
-
|
41
|
-
return (
|
42
|
-
<div style=\{{height: "400px", background: surfaceSolidSecondary, padding: "1rem" }}>
|
43
|
-
<Dropdown
|
44
|
-
target={<Button>Target</Button>}
|
45
|
-
isOpen={isOpen}
|
46
|
-
onToggle={() => {
|
47
|
-
setIsOpen(!isOpen);
|
48
|
-
}}
|
49
|
-
offset={[10, 15]}
|
50
|
-
view="primary"
|
51
|
-
size="m"
|
52
|
-
placement="right"
|
53
|
-
trigger="click"
|
54
|
-
closeOnOverlayClick={false}
|
55
|
-
closeOnEsc
|
56
|
-
isFocusTrapped
|
57
|
-
>
|
58
|
-
{getDropdownItems('item', 6).map((item) => (
|
59
|
-
<DropdownItem
|
60
|
-
key={item.value}
|
61
|
-
isSelected={Boolean(item.value === selected)}
|
62
|
-
onSelect={() => handleSelect(item.value, item.child)}
|
63
|
-
value={item.value}
|
64
|
-
>
|
65
|
-
{item.child}
|
66
|
-
</DropdownItem>
|
67
|
-
))}
|
68
|
-
<DropdownItem
|
69
|
-
isSelected={selected === 'disabled'}
|
70
|
-
onSelect={() => handleSelect('disabled', 'disabled')}
|
71
|
-
value="disabled"
|
72
|
-
disabled
|
73
|
-
>
|
74
|
-
disabled
|
75
|
-
</DropdownItem>
|
76
|
-
</Dropdown>
|
77
|
-
</div>
|
78
|
-
);
|
79
|
-
}
|
80
|
-
```
|
package/styled-components/cjs/components/Dropdown/ui/DropdownItem/variations/_size/tokens.json
DELETED
@@ -1,19 +0,0 @@
|
|
1
|
-
[
|
2
|
-
"--plasma-dropdown-item-width",
|
3
|
-
"--plasma-dropdown-item-height",
|
4
|
-
"--plasma-dropdown-item-padding-top",
|
5
|
-
"--plasma-dropdown-item-padding-right",
|
6
|
-
"--plasma-dropdown-item-padding-bottom",
|
7
|
-
"--plasma-dropdown-item-padding-left",
|
8
|
-
"--plasma-dropdown-item-margin-top",
|
9
|
-
"--plasma-dropdown-item-margin-right",
|
10
|
-
"--plasma-dropdown-item-margin-bottom",
|
11
|
-
"--plasma-dropdown-item-margin-left",
|
12
|
-
"--plasma-dropdown-item-border-radius",
|
13
|
-
"--plasma-dropdown-item-font-family",
|
14
|
-
"--plasma-dropdown-item-font-size",
|
15
|
-
"--plasma-dropdown-item-font-style",
|
16
|
-
"--plasma-dropdown-item-letter-spacing",
|
17
|
-
"--plasma-dropdown-item-line-height",
|
18
|
-
"--plasma-dropdown-item-font-weight"
|
19
|
-
]
|
package/styled-components/cjs/components/Dropdown/ui/DropdownItem/variations/_view/tokens.json
DELETED
@@ -1,9 +0,0 @@
|
|
1
|
-
[
|
2
|
-
"--plasma-dropdown-item-background",
|
3
|
-
"--plasma-dropdown-item-color",
|
4
|
-
"--plasma-dropdown-item-background-hover",
|
5
|
-
"--plasma-dropdown-item-background-selected",
|
6
|
-
"--plasma-dropdown-item-color-selected",
|
7
|
-
"--plasma-dropdown-item-background-selected-hover",
|
8
|
-
"--plasma-dropdown-item-color-selected-hover"
|
9
|
-
]
|
@@ -1,47 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.iconButtonRoot = exports.iconButtonConfig = void 0;
|
7
|
-
var _Button = /*#__PURE__*/require("../Button");
|
8
|
-
var _base = /*#__PURE__*/require("../Button/variations/_view/base");
|
9
|
-
var _base2 = /*#__PURE__*/require("../Button/variations/_size/base");
|
10
|
-
var _base3 = /*#__PURE__*/require("../Button/variations/_disabled/base");
|
11
|
-
var _base4 = /*#__PURE__*/require("../Button/variations/_focused/base");
|
12
|
-
var _base5 = /*#__PURE__*/require("../Button/variations/_blurred/base");
|
13
|
-
var _base6 = /*#__PURE__*/require("../Button/variations/_stretching/base");
|
14
|
-
var _IconButton = /*#__PURE__*/require("./IconButton.styles");
|
15
|
-
var iconButtonRoot = exports.iconButtonRoot = _Button.buttonRoot;
|
16
|
-
var iconButtonConfig = exports.iconButtonConfig = {
|
17
|
-
name: 'IconButton',
|
18
|
-
tag: 'button',
|
19
|
-
layout: iconButtonRoot,
|
20
|
-
base: _IconButton.base,
|
21
|
-
variations: {
|
22
|
-
view: {
|
23
|
-
css: _base.base
|
24
|
-
},
|
25
|
-
size: {
|
26
|
-
css: _base2.base
|
27
|
-
},
|
28
|
-
disabled: {
|
29
|
-
css: _base3.base,
|
30
|
-
attrs: true
|
31
|
-
},
|
32
|
-
focused: {
|
33
|
-
css: _base4.base
|
34
|
-
},
|
35
|
-
blurred: {
|
36
|
-
css: _base5.base
|
37
|
-
},
|
38
|
-
stretching: {
|
39
|
-
css: _base6.base
|
40
|
-
}
|
41
|
-
},
|
42
|
-
defaults: {
|
43
|
-
view: 'secondary',
|
44
|
-
size: 'm',
|
45
|
-
stretching: 'fixed'
|
46
|
-
}
|
47
|
-
};
|
@@ -1,12 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.mappingOverride = exports.base = void 0;
|
7
|
-
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
|
-
var _Button = /*#__PURE__*/require("../Button");
|
9
|
-
var _Button2 = /*#__PURE__*/require("../Button/Button.styles");
|
10
|
-
var _IconButton = /*#__PURE__*/require("./IconButton.tokens");
|
11
|
-
var mappingOverride = exports.mappingOverride = /*#__PURE__*/"\n ".concat(_Button.buttonTokens.buttonPadding, ": 0;\n\n ").concat(_Button.buttonTokens.buttonColor, ": var(").concat(_IconButton.tokens.iconButtonColor, ");\n ").concat(_Button.buttonTokens.buttonBackgroundColor, ": var(").concat(_IconButton.tokens.iconButtonBackgroundColor, ");\n\n ").concat(_Button.buttonTokens.buttonColorHover, ": var(").concat(_IconButton.tokens.iconButtonColorHover, ");\n ").concat(_Button.buttonTokens.buttonBackgroundColorHover, ": var(").concat(_IconButton.tokens.iconButtonBackgroundColorHover, ");\n\n ").concat(_Button.buttonTokens.buttonColorActive, ": var(").concat(_IconButton.tokens.iconButtonColorActive, ");\n ").concat(_Button.buttonTokens.buttonBackgroundColorActive, ": var(").concat(_IconButton.tokens.iconButtonBackgroundColorActive, ");\n\n\n ").concat(_Button.buttonTokens.buttonFontFamily, ": var(").concat(_IconButton.tokens.iconButtonFontFamily, ");\n ").concat(_Button.buttonTokens.buttonFontSize, ": var(").concat(_IconButton.tokens.iconButtonFontSize, ");\n ").concat(_Button.buttonTokens.buttonFontStyle, ": var(").concat(_IconButton.tokens.iconButtonFontStyle, ");\n ").concat(_Button.buttonTokens.buttonFontWeight, ":var(").concat(_IconButton.tokens.iconButtonFontWeight, ");\n ").concat(_Button.buttonTokens.buttonLetterSpacing, ": var(").concat(_IconButton.tokens.iconButtonLetterSpacing, ");\n ").concat(_Button.buttonTokens.buttonLineHeight, ": var(").concat(_IconButton.tokens.iconButtonLineHeight, ");\n\n ").concat(_Button.buttonTokens.buttonWidth, ": var(").concat(_IconButton.tokens.iconButtonWidth, ");\n ").concat(_Button.buttonTokens.buttonHeight, ": var(").concat(_IconButton.tokens.iconButtonHeight, ");\n ").concat(_Button.buttonTokens.buttonRadius, ": var(").concat(_IconButton.tokens.iconButtonRadius, ");\n\n ").concat(_Button.buttonTokens.buttonDisabledOpacity, ": var(").concat(_IconButton.tokens.iconButtonDisabledOpacity, ");\n ").concat(_Button.buttonTokens.buttonFocusColor, ": var(").concat(_IconButton.tokens.iconButtonFocusColor, ");\n\n ").concat(_Button.buttonTokens.buttonSpinnerSize, ": var(").concat(_IconButton.tokens.iconButtonSpinnerSize, ");\n ").concat(_Button.buttonTokens.buttonSpinnerColor, ": var(").concat(_IconButton.tokens.iconButtonSpinnerColor, ");\n");
|
12
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", ";", ";"], _Button2.baseContent, mappingOverride);
|
@@ -1,31 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.tokens = void 0;
|
7
|
-
var tokens = exports.tokens = {
|
8
|
-
iconButtonColor: '--plasma-icon-button-color',
|
9
|
-
iconButtonBackgroundColor: '--plasma-icon-button-background-color',
|
10
|
-
iconButtonColorHover: '--plasma-icon-button-color-hover',
|
11
|
-
iconButtonBackgroundColorHover: '--plasma-icon-button-background-color-hover',
|
12
|
-
iconButtonColorActive: '--plasma-icon-button-color-active',
|
13
|
-
iconButtonBackgroundColorActive: '--plasma-icon-button-background-color-active',
|
14
|
-
iconButtonScaleHover: '--plasma-icon-button-scale-hover',
|
15
|
-
iconButtonScaleActive: '---plasma-icon-button-scale-active',
|
16
|
-
iconButtonHeight: '--plasma-icon-button-height',
|
17
|
-
iconButtonWidth: '--plasma-icon-button-width',
|
18
|
-
iconButtonPadding: '--plasma-icon-button-padding',
|
19
|
-
iconButtonRadius: '--plasma-icon-button-radius',
|
20
|
-
iconButtonRadiusCircle: '--plasma-icon-button-radius-circle',
|
21
|
-
iconButtonFontFamily: '--plasma-icon-button-font-family',
|
22
|
-
iconButtonFontSize: '--plasma-icon-button-font-size',
|
23
|
-
iconButtonFontStyle: '--plasma-icon-button-font-style',
|
24
|
-
iconButtonFontWeight: '--plasma-icon-button-font-weight',
|
25
|
-
iconButtonLetterSpacing: '--plasma-icon-button-letter-spacing',
|
26
|
-
iconButtonLineHeight: '--plasma-icon-button-line-height',
|
27
|
-
iconButtonDisabledOpacity: '--plasma-icon-button-disabled-opacity',
|
28
|
-
iconButtonFocusColor: '--plasma-icon-button-focus-color',
|
29
|
-
iconButtonSpinnerColor: '--plasma-icon-button-spinner-color',
|
30
|
-
iconButtonSpinnerSize: '--plasma-icon-button-spinner-size'
|
31
|
-
};
|
@@ -1,25 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
Object.defineProperty(exports, "iconButtonConfig", {
|
7
|
-
enumerable: true,
|
8
|
-
get: function get() {
|
9
|
-
return _IconButton.iconButtonConfig;
|
10
|
-
}
|
11
|
-
});
|
12
|
-
Object.defineProperty(exports, "iconButtonRoot", {
|
13
|
-
enumerable: true,
|
14
|
-
get: function get() {
|
15
|
-
return _IconButton.iconButtonRoot;
|
16
|
-
}
|
17
|
-
});
|
18
|
-
Object.defineProperty(exports, "iconButtonTokens", {
|
19
|
-
enumerable: true,
|
20
|
-
get: function get() {
|
21
|
-
return _IconButton2.tokens;
|
22
|
-
}
|
23
|
-
});
|
24
|
-
var _IconButton = /*#__PURE__*/require("./IconButton");
|
25
|
-
var _IconButton2 = /*#__PURE__*/require("./IconButton.tokens");
|
package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.config.js
DELETED
@@ -1,27 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.config = void 0;
|
7
|
-
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
|
-
var _Dropdown = /*#__PURE__*/require("../../../../../components/Dropdown");
|
9
|
-
var dropdownSizeCommon = /*#__PURE__*/"\n ".concat(_Dropdown.dropdownTokens.width, ": 12.5rem;\n ").concat(_Dropdown.dropdownTokens.height, ": auto;\n ").concat(_Dropdown.dropdownTokens.borderRadius, ": 0.5rem;\n ").concat(_Dropdown.dropdownTokens.paddingTop, ": 0.125rem;\n ").concat(_Dropdown.dropdownTokens.paddingRight, ": 0.0625rem;\n ").concat(_Dropdown.dropdownTokens.paddingBottom, ": 0.125rem;\n ").concat(_Dropdown.dropdownTokens.paddingLeft, ": 0.125rem;\n");
|
10
|
-
var dropdownItemSizeCommon = /*#__PURE__*/"\n ".concat(_Dropdown.dropdownTokens.itemWidth, ": auto;\n ").concat(_Dropdown.dropdownTokens.itemHeight, ": auto;\n ").concat(_Dropdown.dropdownTokens.itemMarginTop, ": 0;\n ").concat(_Dropdown.dropdownTokens.itemMarginRight, ": 0;\n ").concat(_Dropdown.dropdownTokens.itemMarginBottom, ": 0;\n ").concat(_Dropdown.dropdownTokens.itemMarginLeft, ": 0;\n");
|
11
|
-
var config = exports.config = {
|
12
|
-
defaults: {
|
13
|
-
view: 'default',
|
14
|
-
size: 'm'
|
15
|
-
},
|
16
|
-
variations: {
|
17
|
-
size: {
|
18
|
-
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ";", ";", ":0.5625rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], dropdownSizeCommon, dropdownItemSizeCommon, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight),
|
19
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ";", ";", ":0.6875rem;", ":0.75rem;", ":0.6875rem;", ":0.75rem;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], dropdownSizeCommon, dropdownItemSizeCommon, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight),
|
20
|
-
m: /*#__PURE__*/(0, _styledComponents.css)(["", ";", ";", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.625rem;", ":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);"], dropdownSizeCommon, dropdownItemSizeCommon, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight),
|
21
|
-
l: /*#__PURE__*/(0, _styledComponents.css)(["", ";", ";", ":1.0625rem;", ":1rem;", ":1.0625rem;", ":1rem;", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], dropdownSizeCommon, dropdownItemSizeCommon, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight)
|
22
|
-
},
|
23
|
-
view: {
|
24
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemBackgroundSelected, _Dropdown.dropdownTokens.itemColorSelected, _Dropdown.dropdownTokens.itemBackgroundSelectedHover, _Dropdown.dropdownTokens.itemColorSelectedHover, _Dropdown.dropdownTokens.itemColor)
|
25
|
-
}
|
26
|
-
}
|
27
|
-
};
|
@@ -1,13 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.DropdownItem = exports.Dropdown = void 0;
|
7
|
-
var _Dropdown = /*#__PURE__*/require("../../../../../components/Dropdown");
|
8
|
-
var _engines = /*#__PURE__*/require("../../../../../engines");
|
9
|
-
var _Dropdown2 = /*#__PURE__*/require("./Dropdown.config");
|
10
|
-
var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Dropdown.dropdownConfig, _Dropdown2.config);
|
11
|
-
var Dropdown = exports.Dropdown = /*#__PURE__*/(0, _engines.component)(mergedConfig);
|
12
|
-
var mergedItemConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Dropdown.dropdownItemConfig);
|
13
|
-
var DropdownItem = exports.DropdownItem = /*#__PURE__*/(0, _engines.component)(mergedItemConfig);
|
package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.stories.tsx
DELETED
@@ -1,194 +0,0 @@
|
|
1
|
-
import React, { useState } from 'react';
|
2
|
-
import type { ComponentProps } from 'react';
|
3
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
4
|
-
import { action } from '@storybook/addon-actions';
|
5
|
-
import styled from 'styled-components';
|
6
|
-
|
7
|
-
import { WithTheme, argTypesFromConfig } from '../../../../_helpers';
|
8
|
-
import { mergeConfig } from '../../../../../engines';
|
9
|
-
import { dropdownConfig } from '../../../../../components/Dropdown';
|
10
|
-
import { Button } from '../../Button/Button';
|
11
|
-
import { Radiobox } from '../../Radiobox/Radiobox';
|
12
|
-
import { Checkbox } from '../../Checkbox/Checkbox';
|
13
|
-
import type { DropdownPlacement, DropdownTrigger } from '../../../../../components/Dropdown/Dropdown.types';
|
14
|
-
|
15
|
-
import { Dropdown, DropdownItem } from './Dropdown';
|
16
|
-
import { config } from './Dropdown.config';
|
17
|
-
|
18
|
-
const placements: Array<DropdownPlacement> = ['top', 'bottom', 'right', 'left', 'auto'];
|
19
|
-
const triggers: Array<DropdownTrigger> = ['click', 'hover'];
|
20
|
-
|
21
|
-
type StoryDropdownPropsCustom = {
|
22
|
-
skidding?: number;
|
23
|
-
distance?: number;
|
24
|
-
};
|
25
|
-
|
26
|
-
type StoryDropdownProps = ComponentProps<typeof Dropdown> & StoryDropdownPropsCustom;
|
27
|
-
|
28
|
-
const meta: Meta<StoryDropdownProps> = {
|
29
|
-
title: 'plasma_b2c/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: false,
|
51
|
-
closeOnEsc: true,
|
52
|
-
isFocusTrapped: true,
|
53
|
-
skidding: 0,
|
54
|
-
distance: 0,
|
55
|
-
},
|
56
|
-
};
|
57
|
-
|
58
|
-
export default meta;
|
59
|
-
|
60
|
-
const onSelect = action('onSelect');
|
61
|
-
const onClick = action('onClick');
|
62
|
-
const onChange = action('onChange');
|
63
|
-
|
64
|
-
const getDropdownItems = (slug: string, elemCount: number) =>
|
65
|
-
[...Array(elemCount).keys()].map((num) => ({
|
66
|
-
value: `${slug}_${num}`,
|
67
|
-
child: `${slug} ${num}`,
|
68
|
-
}));
|
69
|
-
|
70
|
-
const StyledRadiobox = styled(Radiobox)`
|
71
|
-
margin-right: 0.5rem;
|
72
|
-
`;
|
73
|
-
|
74
|
-
const StyledCheckbox = styled(Checkbox)`
|
75
|
-
margin-left: auto;
|
76
|
-
`;
|
77
|
-
|
78
|
-
const StyledDisclosureRightIcon = styled.div`
|
79
|
-
width: 1.25rem;
|
80
|
-
height: 1.25rem;
|
81
|
-
margin-left: auto;
|
82
|
-
`;
|
83
|
-
|
84
|
-
const DisclosureRightIcon = (props) => (
|
85
|
-
<StyledDisclosureRightIcon>
|
86
|
-
<svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
|
87
|
-
<path
|
88
|
-
d="M9.883 8.707a1 1 0 011.414-1.414L16.004 12l-4.707 4.707a1 1 0 01-1.414-1.414L13.176 12 9.883 8.707z"
|
89
|
-
fill="currentColor"
|
90
|
-
/>
|
91
|
-
</svg>
|
92
|
-
</StyledDisclosureRightIcon>
|
93
|
-
);
|
94
|
-
|
95
|
-
const StoryNormal = (args: StoryDropdownProps) => {
|
96
|
-
const [selected, setSelected] = useState('');
|
97
|
-
const [isOpen, setIsOpen] = useState(false);
|
98
|
-
const [isOpenDropdown2, setIsOpenDropdown2] = useState(false);
|
99
|
-
|
100
|
-
const { skidding, distance, placement, ...rest } = args;
|
101
|
-
|
102
|
-
const onMainClose = () => {
|
103
|
-
setIsOpen(false);
|
104
|
-
setIsOpenDropdown2(false);
|
105
|
-
};
|
106
|
-
|
107
|
-
const onMainToggle = (openValue: boolean) => {
|
108
|
-
setIsOpen(openValue);
|
109
|
-
|
110
|
-
if (!openValue) {
|
111
|
-
onMainClose();
|
112
|
-
}
|
113
|
-
};
|
114
|
-
|
115
|
-
const handleSelect = (value: string, text: string) => {
|
116
|
-
setSelected(value);
|
117
|
-
onSelect(value, text);
|
118
|
-
setIsOpen(false);
|
119
|
-
};
|
120
|
-
|
121
|
-
return (
|
122
|
-
<div>
|
123
|
-
<h3>This is header</h3>
|
124
|
-
<Dropdown
|
125
|
-
target={<Button>Target</Button>}
|
126
|
-
isOpen={isOpen}
|
127
|
-
onToggle={onMainToggle}
|
128
|
-
offset={[Number(skidding), Number(distance)]}
|
129
|
-
placement={placement}
|
130
|
-
{...rest}
|
131
|
-
>
|
132
|
-
{getDropdownItems('item', 6).map((item) => (
|
133
|
-
<DropdownItem
|
134
|
-
key={item.value}
|
135
|
-
isSelected={Boolean(item.value === selected)}
|
136
|
-
onSelect={() => handleSelect(item.value, item.child)}
|
137
|
-
onClick={onClick}
|
138
|
-
value={item.value}
|
139
|
-
>
|
140
|
-
{item.child}
|
141
|
-
</DropdownItem>
|
142
|
-
))}
|
143
|
-
<Dropdown
|
144
|
-
target={<DropdownItem contentRight={DisclosureRightIcon} name="test" text="Nested dropdown" />}
|
145
|
-
onToggle={(is) => setIsOpenDropdown2(is)}
|
146
|
-
isOpen={isOpenDropdown2}
|
147
|
-
offset={[0, 0]}
|
148
|
-
{...rest}
|
149
|
-
>
|
150
|
-
<DropdownItem contentRight={StyledCheckbox} value="checked" onChange={onChange} text="Checkbox" />
|
151
|
-
{getDropdownItems('nested', 4).map((item) => (
|
152
|
-
<DropdownItem
|
153
|
-
key={item.value}
|
154
|
-
isSelected={Boolean(item.value === selected)}
|
155
|
-
onSelect={() => handleSelect(item.value, item.child)}
|
156
|
-
onClick={onClick}
|
157
|
-
value={item.value}
|
158
|
-
>
|
159
|
-
{item.child}
|
160
|
-
</DropdownItem>
|
161
|
-
))}
|
162
|
-
<DropdownItem
|
163
|
-
contentLeft={StyledRadiobox}
|
164
|
-
name="radio"
|
165
|
-
value="1"
|
166
|
-
onChange={onChange}
|
167
|
-
text="Radiobox 1"
|
168
|
-
/>
|
169
|
-
<DropdownItem
|
170
|
-
contentLeft={StyledRadiobox}
|
171
|
-
name="radio"
|
172
|
-
value="2"
|
173
|
-
onChange={onChange}
|
174
|
-
text="Radiobox 2"
|
175
|
-
/>
|
176
|
-
</Dropdown>
|
177
|
-
|
178
|
-
<DropdownItem
|
179
|
-
isSelected={selected === 'disabled'}
|
180
|
-
onSelect={() => handleSelect('disabled', 'disabled')}
|
181
|
-
onClick={onClick}
|
182
|
-
value="disabled"
|
183
|
-
disabled
|
184
|
-
>
|
185
|
-
disabled
|
186
|
-
</DropdownItem>
|
187
|
-
</Dropdown>
|
188
|
-
</div>
|
189
|
-
);
|
190
|
-
};
|
191
|
-
|
192
|
-
export const Normal: StoryObj<StoryDropdownProps> = {
|
193
|
-
render: (args) => <StoryNormal {...args} />,
|
194
|
-
};
|