@salutejs/plasma-new-hope 0.168.1-canary.1346.11361458839.0 → 0.169.0-canary.1392.11363976712.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.js +1 -1
- package/cjs/components/Segment/tokens.js +15 -1
- package/cjs/components/Segment/tokens.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.css +13 -7
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.js +180 -88
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +37 -1
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles_79d8q2.css +8 -0
- package/cjs/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.js +1 -1
- package/cjs/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base_a7w5s0.css +1 -0
- package/cjs/components/Segment/ui/SegmentGroup/variations/_orientation/base.js +9 -0
- package/cjs/components/Segment/ui/SegmentGroup/variations/_orientation/base.js.map +1 -0
- package/cjs/components/Segment/ui/SegmentGroup/variations/_orientation/base_1ejecy9.css +1 -0
- package/cjs/components/Segment/ui/SegmentGroup/variations/_pilled/base.js +1 -1
- package/cjs/components/Segment/ui/SegmentGroup/variations/_pilled/base.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentGroup/variations/_pilled/base_pxl3nb.css +1 -0
- package/cjs/components/Segment/ui/SegmentGroup/variations/_size/base.js +1 -1
- package/cjs/components/Segment/ui/SegmentGroup/variations/_size/base.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentGroup/variations/_size/base_18cpjsq.css +1 -0
- package/cjs/components/Segment/ui/SegmentItem/SegmentItem.css +6 -4
- package/cjs/components/Segment/ui/SegmentItem/SegmentItem.js +14 -9
- package/cjs/components/Segment/ui/SegmentItem/SegmentItem.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles.js +30 -1
- package/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles_19oo2vi.css +4 -0
- package/cjs/components/Segment/ui/SegmentItem/variations/_pilled/base.js +1 -1
- package/cjs/components/Segment/ui/SegmentItem/variations/_pilled/base.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentItem/variations/_pilled/{base_15s0fel.css → base_omc5u1.css} +1 -1
- package/cjs/components/Segment/ui/SegmentItem/variations/_view/base.js +1 -1
- package/cjs/components/Segment/ui/SegmentItem/variations/_view/base.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentItem/variations/_view/base_dettiq.css +1 -0
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +1 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +1 -1
- package/cjs/components/_Icon/Icon.assets/DisclosureDownWithOffset.js +22 -0
- package/cjs/components/_Icon/Icon.assets/DisclosureDownWithOffset.js.map +1 -0
- package/cjs/components/_Icon/Icon.assets/DisclosureLeftWithOffset.js +22 -0
- package/cjs/components/_Icon/Icon.assets/DisclosureLeftWithOffset.js.map +1 -0
- package/cjs/components/_Icon/Icon.assets/DisclosureRightWithOffset.js +22 -0
- package/cjs/components/_Icon/Icon.assets/DisclosureRightWithOffset.js.map +1 -0
- package/cjs/components/_Icon/Icon.assets/DisclosureUpWithOffset.js +22 -0
- package/cjs/components/_Icon/Icon.assets/DisclosureUpWithOffset.js.map +1 -0
- package/cjs/components/_Icon/Icons/IconDisclosureDownWithOffset.js +23 -0
- package/cjs/components/_Icon/Icons/IconDisclosureDownWithOffset.js.map +1 -0
- package/cjs/components/_Icon/Icons/IconDisclosureLeftWithOffset.js +23 -0
- package/cjs/components/_Icon/Icons/IconDisclosureLeftWithOffset.js.map +1 -0
- package/cjs/components/_Icon/Icons/IconDisclosureRightWithOffset.js +23 -0
- package/cjs/components/_Icon/Icons/IconDisclosureRightWithOffset.js.map +1 -0
- package/cjs/components/_Icon/Icons/IconDisclosureUpWithOffset.js +23 -0
- package/cjs/components/_Icon/Icons/IconDisclosureUpWithOffset.js.map +1 -0
- package/cjs/index.css +19 -11
- package/emotion/cjs/components/Segment/Segment.template-doc.mdx +49 -6
- package/emotion/cjs/components/Segment/tokens.js +15 -1
- package/emotion/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.js +174 -85
- package/emotion/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +29 -29
- package/emotion/cjs/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.js +1 -1
- package/emotion/cjs/components/Segment/ui/SegmentGroup/variations/_orientation/base.js +10 -0
- package/emotion/cjs/components/Segment/ui/SegmentGroup/variations/_orientation/tokens.json +1 -0
- package/emotion/cjs/components/Segment/ui/SegmentGroup/variations/_pilled/base.js +1 -1
- package/emotion/cjs/components/Segment/ui/SegmentGroup/variations/_size/base.js +1 -1
- package/emotion/cjs/components/Segment/ui/SegmentItem/SegmentItem.js +14 -9
- package/emotion/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles.js +21 -7
- package/emotion/cjs/components/Segment/ui/SegmentItem/variations/_pilled/base.js +1 -1
- package/emotion/cjs/components/Segment/ui/SegmentItem/variations/_view/base.js +2 -1
- package/emotion/cjs/components/_Icon/Icon.assets/DisclosureDownWithOffset.js +21 -0
- package/emotion/cjs/components/_Icon/Icon.assets/DisclosureLeftWithOffset.js +21 -0
- package/emotion/cjs/components/_Icon/Icon.assets/DisclosureRightWithOffset.js +21 -0
- package/emotion/cjs/components/_Icon/Icon.assets/DisclosureUpWithOffset.js +21 -0
- package/emotion/cjs/components/_Icon/Icons/IconDisclosureDownWithOffset.js +22 -0
- package/emotion/cjs/components/_Icon/Icons/IconDisclosureLeftWithOffset.js +22 -0
- package/emotion/cjs/components/_Icon/Icons/IconDisclosureRightWithOffset.js +22 -0
- package/emotion/cjs/components/_Icon/Icons/IconDisclosureUpWithOffset.js +22 -0
- package/emotion/cjs/components/_Icon/index.js +28 -0
- package/emotion/cjs/examples/plasma_b2c/components/Segment/Segment.stories.tsx +118 -42
- package/emotion/cjs/examples/plasma_b2c/components/Segment/SegmentGroup.config.js +13 -10
- package/emotion/cjs/examples/plasma_b2c/components/Segment/SegmentItem.config.js +9 -9
- package/emotion/cjs/examples/plasma_web/components/Segment/Segment.stories.tsx +119 -42
- package/emotion/cjs/examples/plasma_web/components/Segment/SegmentGroup.config.js +15 -9
- package/emotion/cjs/examples/plasma_web/components/Segment/SegmentItem.config.js +9 -9
- package/emotion/es/components/Segment/Segment.template-doc.mdx +49 -6
- package/emotion/es/components/Segment/tokens.js +15 -1
- package/emotion/es/components/Segment/ui/SegmentGroup/SegmentGroup.js +177 -88
- package/emotion/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +29 -29
- package/emotion/es/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.js +1 -1
- package/emotion/es/components/Segment/ui/SegmentGroup/variations/_orientation/base.js +4 -0
- package/emotion/es/components/Segment/ui/SegmentGroup/variations/_orientation/tokens.json +1 -0
- package/emotion/es/components/Segment/ui/SegmentGroup/variations/_pilled/base.js +1 -1
- package/emotion/es/components/Segment/ui/SegmentGroup/variations/_size/base.js +1 -1
- package/emotion/es/components/Segment/ui/SegmentItem/SegmentItem.js +15 -10
- package/emotion/es/components/Segment/ui/SegmentItem/SegmentItem.styles.js +21 -7
- package/emotion/es/components/Segment/ui/SegmentItem/variations/_pilled/base.js +1 -1
- package/emotion/es/components/Segment/ui/SegmentItem/variations/_view/base.js +2 -1
- package/emotion/es/components/_Icon/Icon.assets/DisclosureDownWithOffset.js +14 -0
- package/emotion/es/components/_Icon/Icon.assets/DisclosureLeftWithOffset.js +14 -0
- package/emotion/es/components/_Icon/Icon.assets/DisclosureRightWithOffset.js +14 -0
- package/emotion/es/components/_Icon/Icon.assets/DisclosureUpWithOffset.js +14 -0
- package/emotion/es/components/_Icon/Icons/IconDisclosureDownWithOffset.js +15 -0
- package/emotion/es/components/_Icon/Icons/IconDisclosureLeftWithOffset.js +15 -0
- package/emotion/es/components/_Icon/Icons/IconDisclosureRightWithOffset.js +15 -0
- package/emotion/es/components/_Icon/Icons/IconDisclosureUpWithOffset.js +15 -0
- package/emotion/es/components/_Icon/index.js +4 -0
- package/emotion/es/examples/plasma_b2c/components/Segment/Segment.stories.tsx +118 -42
- package/emotion/es/examples/plasma_b2c/components/Segment/SegmentGroup.config.js +13 -10
- package/emotion/es/examples/plasma_b2c/components/Segment/SegmentItem.config.js +9 -9
- package/emotion/es/examples/plasma_web/components/Segment/Segment.stories.tsx +119 -42
- package/emotion/es/examples/plasma_web/components/Segment/SegmentGroup.config.js +15 -9
- package/emotion/es/examples/plasma_web/components/Segment/SegmentItem.config.js +9 -9
- package/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js +1 -1
- package/es/components/Segment/tokens.js +15 -1
- package/es/components/Segment/tokens.js.map +1 -1
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.css +13 -7
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.js +183 -92
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.js.map +1 -1
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +34 -2
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js.map +1 -1
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles_79d8q2.css +8 -0
- package/es/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.js +1 -1
- package/es/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.js.map +1 -1
- package/es/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base_a7w5s0.css +1 -0
- package/es/components/Segment/ui/SegmentGroup/variations/_orientation/base.js +5 -0
- package/es/components/Segment/ui/SegmentGroup/variations/_orientation/base.js.map +1 -0
- package/es/components/Segment/ui/SegmentGroup/variations/_orientation/base_1ejecy9.css +1 -0
- package/es/components/Segment/ui/SegmentGroup/variations/_pilled/base.js +1 -1
- package/es/components/Segment/ui/SegmentGroup/variations/_pilled/base.js.map +1 -1
- package/es/components/Segment/ui/SegmentGroup/variations/_pilled/base_pxl3nb.css +1 -0
- package/es/components/Segment/ui/SegmentGroup/variations/_size/base.js +1 -1
- package/es/components/Segment/ui/SegmentGroup/variations/_size/base.js.map +1 -1
- package/es/components/Segment/ui/SegmentGroup/variations/_size/base_18cpjsq.css +1 -0
- package/es/components/Segment/ui/SegmentItem/SegmentItem.css +6 -4
- package/es/components/Segment/ui/SegmentItem/SegmentItem.js +15 -10
- package/es/components/Segment/ui/SegmentItem/SegmentItem.js.map +1 -1
- package/es/components/Segment/ui/SegmentItem/SegmentItem.styles.js +29 -2
- package/es/components/Segment/ui/SegmentItem/SegmentItem.styles.js.map +1 -1
- package/es/components/Segment/ui/SegmentItem/SegmentItem.styles_19oo2vi.css +4 -0
- package/es/components/Segment/ui/SegmentItem/variations/_pilled/base.js +1 -1
- package/es/components/Segment/ui/SegmentItem/variations/_pilled/base.js.map +1 -1
- package/es/components/Segment/ui/SegmentItem/variations/_pilled/{base_15s0fel.css → base_omc5u1.css} +1 -1
- package/es/components/Segment/ui/SegmentItem/variations/_view/base.js +1 -1
- package/es/components/Segment/ui/SegmentItem/variations/_view/base.js.map +1 -1
- package/es/components/Segment/ui/SegmentItem/variations/_view/base_dettiq.css +1 -0
- package/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +1 -1
- package/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +1 -1
- package/es/components/_Icon/Icon.assets/DisclosureDownWithOffset.js +18 -0
- package/es/components/_Icon/Icon.assets/DisclosureDownWithOffset.js.map +1 -0
- package/es/components/_Icon/Icon.assets/DisclosureLeftWithOffset.js +18 -0
- package/es/components/_Icon/Icon.assets/DisclosureLeftWithOffset.js.map +1 -0
- package/es/components/_Icon/Icon.assets/DisclosureRightWithOffset.js +18 -0
- package/es/components/_Icon/Icon.assets/DisclosureRightWithOffset.js.map +1 -0
- package/es/components/_Icon/Icon.assets/DisclosureUpWithOffset.js +18 -0
- package/es/components/_Icon/Icon.assets/DisclosureUpWithOffset.js.map +1 -0
- package/es/components/_Icon/Icons/IconDisclosureDownWithOffset.js +19 -0
- package/es/components/_Icon/Icons/IconDisclosureDownWithOffset.js.map +1 -0
- package/es/components/_Icon/Icons/IconDisclosureLeftWithOffset.js +19 -0
- package/es/components/_Icon/Icons/IconDisclosureLeftWithOffset.js.map +1 -0
- package/es/components/_Icon/Icons/IconDisclosureRightWithOffset.js +19 -0
- package/es/components/_Icon/Icons/IconDisclosureRightWithOffset.js.map +1 -0
- package/es/components/_Icon/Icons/IconDisclosureUpWithOffset.js +19 -0
- package/es/components/_Icon/Icons/IconDisclosureUpWithOffset.js.map +1 -0
- package/es/index.css +19 -11
- package/package.json +2 -2
- package/styled-components/cjs/components/Segment/Segment.template-doc.mdx +49 -6
- package/styled-components/cjs/components/Segment/tokens.js +15 -1
- package/styled-components/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.js +174 -85
- package/styled-components/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +18 -6
- package/styled-components/cjs/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.js +1 -1
- package/styled-components/cjs/components/Segment/ui/SegmentGroup/variations/_orientation/base.js +10 -0
- package/styled-components/cjs/components/Segment/ui/SegmentGroup/variations/_orientation/tokens.json +1 -0
- package/styled-components/cjs/components/Segment/ui/SegmentGroup/variations/_pilled/base.js +1 -1
- package/styled-components/cjs/components/Segment/ui/SegmentGroup/variations/_size/base.js +1 -1
- package/styled-components/cjs/components/Segment/ui/SegmentItem/SegmentItem.js +14 -9
- package/styled-components/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles.js +17 -5
- package/styled-components/cjs/components/Segment/ui/SegmentItem/variations/_pilled/base.js +1 -1
- package/styled-components/cjs/components/Segment/ui/SegmentItem/variations/_view/base.js +2 -1
- package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureDownWithOffset.js +21 -0
- package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureLeftWithOffset.js +21 -0
- package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureRightWithOffset.js +21 -0
- package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureUpWithOffset.js +21 -0
- package/styled-components/cjs/components/_Icon/Icons/IconDisclosureDownWithOffset.js +22 -0
- package/styled-components/cjs/components/_Icon/Icons/IconDisclosureLeftWithOffset.js +22 -0
- package/styled-components/cjs/components/_Icon/Icons/IconDisclosureRightWithOffset.js +22 -0
- package/styled-components/cjs/components/_Icon/Icons/IconDisclosureUpWithOffset.js +22 -0
- package/styled-components/cjs/components/_Icon/index.js +28 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Segment/Segment.stories.tsx +118 -42
- package/styled-components/cjs/examples/plasma_b2c/components/Segment/SegmentGroup.config.js +11 -8
- package/styled-components/cjs/examples/plasma_b2c/components/Segment/SegmentItem.config.js +8 -8
- package/styled-components/cjs/examples/plasma_web/components/Segment/Segment.stories.tsx +119 -42
- package/styled-components/cjs/examples/plasma_web/components/Segment/SegmentGroup.config.js +14 -8
- package/styled-components/cjs/examples/plasma_web/components/Segment/SegmentItem.config.js +8 -8
- package/styled-components/es/components/Segment/Segment.template-doc.mdx +49 -6
- package/styled-components/es/components/Segment/tokens.js +15 -1
- package/styled-components/es/components/Segment/ui/SegmentGroup/SegmentGroup.js +177 -88
- package/styled-components/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +18 -6
- package/styled-components/es/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.js +1 -1
- package/styled-components/es/components/Segment/ui/SegmentGroup/variations/_orientation/base.js +4 -0
- package/styled-components/es/components/Segment/ui/SegmentGroup/variations/_orientation/tokens.json +1 -0
- package/styled-components/es/components/Segment/ui/SegmentGroup/variations/_pilled/base.js +1 -1
- package/styled-components/es/components/Segment/ui/SegmentGroup/variations/_size/base.js +1 -1
- package/styled-components/es/components/Segment/ui/SegmentItem/SegmentItem.js +15 -10
- package/styled-components/es/components/Segment/ui/SegmentItem/SegmentItem.styles.js +17 -5
- package/styled-components/es/components/Segment/ui/SegmentItem/variations/_pilled/base.js +1 -1
- package/styled-components/es/components/Segment/ui/SegmentItem/variations/_view/base.js +2 -1
- package/styled-components/es/components/_Icon/Icon.assets/DisclosureDownWithOffset.js +14 -0
- package/styled-components/es/components/_Icon/Icon.assets/DisclosureLeftWithOffset.js +14 -0
- package/styled-components/es/components/_Icon/Icon.assets/DisclosureRightWithOffset.js +14 -0
- package/styled-components/es/components/_Icon/Icon.assets/DisclosureUpWithOffset.js +14 -0
- package/styled-components/es/components/_Icon/Icons/IconDisclosureDownWithOffset.js +15 -0
- package/styled-components/es/components/_Icon/Icons/IconDisclosureLeftWithOffset.js +15 -0
- package/styled-components/es/components/_Icon/Icons/IconDisclosureRightWithOffset.js +15 -0
- package/styled-components/es/components/_Icon/Icons/IconDisclosureUpWithOffset.js +15 -0
- package/styled-components/es/components/_Icon/index.js +4 -0
- package/styled-components/es/examples/plasma_b2c/components/Segment/Segment.stories.tsx +118 -42
- package/styled-components/es/examples/plasma_b2c/components/Segment/SegmentGroup.config.js +11 -8
- package/styled-components/es/examples/plasma_b2c/components/Segment/SegmentItem.config.js +8 -8
- package/styled-components/es/examples/plasma_web/components/Segment/Segment.stories.tsx +119 -42
- package/styled-components/es/examples/plasma_web/components/Segment/SegmentGroup.config.js +14 -8
- package/styled-components/es/examples/plasma_web/components/Segment/SegmentItem.config.js +8 -8
- package/types/components/Segment/tokens.d.ts +14 -0
- package/types/components/Segment/tokens.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentGroup/SegmentGroup.d.ts +6 -18
- package/types/components/Segment/ui/SegmentGroup/SegmentGroup.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentGroup/SegmentGroup.styles.d.ts +12 -0
- package/types/components/Segment/ui/SegmentGroup/SegmentGroup.styles.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentGroup/SegmentGroup.types.d.ts +20 -3
- package/types/components/Segment/ui/SegmentGroup/SegmentGroup.types.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentGroup/variations/_orientation/base.d.ts +2 -0
- package/types/components/Segment/ui/SegmentGroup/variations/_orientation/base.d.ts.map +1 -0
- package/types/components/Segment/ui/SegmentGroup/variations/_pilled/base.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentGroup/variations/_size/base.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentItem/SegmentItem.d.ts +4 -0
- package/types/components/Segment/ui/SegmentItem/SegmentItem.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentItem/SegmentItem.styles.d.ts +7 -1
- package/types/components/Segment/ui/SegmentItem/SegmentItem.styles.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentItem/SegmentItem.types.d.ts +9 -0
- package/types/components/Segment/ui/SegmentItem/SegmentItem.types.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentItem/variations/_pilled/base.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentItem/variations/_view/base.d.ts.map +1 -1
- package/types/components/_Icon/Icon.assets/DisclosureDownWithOffset.d.ts +4 -0
- package/types/components/_Icon/Icon.assets/DisclosureDownWithOffset.d.ts.map +1 -0
- package/types/components/_Icon/Icon.assets/DisclosureLeftWithOffset.d.ts +4 -0
- package/types/components/_Icon/Icon.assets/DisclosureLeftWithOffset.d.ts.map +1 -0
- package/types/components/_Icon/Icon.assets/DisclosureRightWithOffset.d.ts +4 -0
- package/types/components/_Icon/Icon.assets/DisclosureRightWithOffset.d.ts.map +1 -0
- package/types/components/_Icon/Icon.assets/DisclosureUpWithOffset.d.ts +4 -0
- package/types/components/_Icon/Icon.assets/DisclosureUpWithOffset.d.ts.map +1 -0
- package/types/components/_Icon/Icons/IconDisclosureDownWithOffset.d.ts +4 -0
- package/types/components/_Icon/Icons/IconDisclosureDownWithOffset.d.ts.map +1 -0
- package/types/components/_Icon/Icons/IconDisclosureLeftWithOffset.d.ts +4 -0
- package/types/components/_Icon/Icons/IconDisclosureLeftWithOffset.d.ts.map +1 -0
- package/types/components/_Icon/Icons/IconDisclosureRightWithOffset.d.ts +4 -0
- package/types/components/_Icon/Icons/IconDisclosureRightWithOffset.d.ts.map +1 -0
- package/types/components/_Icon/Icons/IconDisclosureUpWithOffset.d.ts +4 -0
- package/types/components/_Icon/Icons/IconDisclosureUpWithOffset.d.ts.map +1 -0
- package/types/components/_Icon/index.d.ts +4 -0
- package/types/components/_Icon/index.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Segment/Segment.d.ts +6 -9
- package/types/examples/plasma_b2c/components/Segment/Segment.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Segment/SegmentGroup.config.d.ts +3 -0
- package/types/examples/plasma_b2c/components/Segment/SegmentGroup.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Segment/SegmentItem.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Segment/Segment.d.ts +9 -9
- package/types/examples/plasma_web/components/Segment/Segment.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Segment/SegmentGroup.config.d.ts +6 -0
- package/types/examples/plasma_web/components/Segment/SegmentGroup.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Segment/SegmentItem.config.d.ts.map +1 -1
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles_m9i9p0.css +0 -4
- package/cjs/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base_escgtx.css +0 -1
- package/cjs/components/Segment/ui/SegmentGroup/variations/_pilled/base_fqbatz.css +0 -1
- package/cjs/components/Segment/ui/SegmentGroup/variations/_size/base_m358nl.css +0 -1
- package/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles_18h1p52.css +0 -2
- package/cjs/components/Segment/ui/SegmentItem/variations/_view/base_1m1u2ys.css +0 -1
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles_m9i9p0.css +0 -4
- package/es/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base_escgtx.css +0 -1
- package/es/components/Segment/ui/SegmentGroup/variations/_pilled/base_fqbatz.css +0 -1
- package/es/components/Segment/ui/SegmentGroup/variations/_size/base_m358nl.css +0 -1
- package/es/components/Segment/ui/SegmentItem/SegmentItem.styles_18h1p52.css +0 -2
- package/es/components/Segment/ui/SegmentItem/variations/_view/base_1m1u2ys.css +0 -1
package/es/index.css
CHANGED
@@ -387,33 +387,41 @@
|
|
387
387
|
|
388
388
|
.Tooltip_aay375_s1cz8cv8__390cdb21{--plasma-popover-arrow-mask-width:var(--plasma-tooltip-arrow-mask-width);--plasma-popover-arrow-mask-height:var(--plasma-tooltip-arrow-mask-height);--plasma-popover-arrow-mask-image:var(--plasma-tooltip-arrow-mask-image);--plasma-popover-arrow-background:var(--plasma-tooltip-arrow-background);--plasma-popover-arrow-height:var(--plasma-tooltip-arrow-height);--plasma-popover-arrow-edge-margin:var(--plasma-tooltip-arrow-edge-margin);}.Tooltip_aay375_s1cz8cv8__390cdb21.Tooltip_aay375_tooltipAnimated__390cdb21 .Tooltip_aay375_popoverRoot__390cdb21{-webkit-transition:opacity 200ms ease-in-out,visibility 200ms ease-in-out;transition:opacity 200ms ease-in-out,visibility 200ms ease-in-out;}
|
389
389
|
|
390
|
-
.
|
390
|
+
.base_18cpjsq_b16s69xg__2d529a83{width:var(--plasma-segment-group-width);height:var(--plasma-segment-group-height);}.base_18cpjsq_b16s69xg__2d529a83:before{border-radius:var(--plasma-segment-group-border-radius);}
|
391
391
|
|
392
392
|
.base_hsx1sr_bo2wq9n__1e99adcc{background-color:var(--plasma-segment-group-background-color);}
|
393
393
|
|
394
394
|
.base_1n8kaiq_bvqq8jn__3fd538b8[disabled]{opacity:var(--plasma-segment-disabled-opacity);cursor:not-allowed;}
|
395
395
|
|
396
|
-
.
|
396
|
+
.base_pxl3nb_b1re0ohg__002ee1a3.base_pxl3nb_segmentPilled__002ee1a3:before{border-radius:var(--plasma-segment-group-pilled-border-radius);}
|
397
397
|
|
398
|
-
.
|
398
|
+
.base_a7w5s0_b13sjoz1__a0df01cb{position:relative;}.base_a7w5s0_b13sjoz1__a0df01cb.base_a7w5s0_segmentGroupFilledBackground__a0df01cb:before{content:'';position:absolute;inset:-0.125rem;background-color:var(--plasma-segment-group-filled-background-color);}
|
399
399
|
|
400
400
|
.base_74wj10_b1bb2stb__3b76a172.base_74wj10_segmentStretched__3b76a172{width:100%;}.base_74wj10_b1bb2stb__3b76a172.base_74wj10_segmentStretched__3b76a172 .base_74wj10_spuzt9m__3b76a172,.base_74wj10_b1bb2stb__3b76a172.base_74wj10_segmentStretched__3b76a172 .base_74wj10_sin9wo2__3b76a172,.base_74wj10_b1bb2stb__3b76a172.base_74wj10_segmentStretched__3b76a172 .base_74wj10_sin9wo2__3b76a172 > button{width:100%;}
|
401
401
|
|
402
|
-
.
|
403
|
-
|
404
|
-
.
|
405
|
-
.
|
402
|
+
.base_1ejecy9_bb2d6sr__61b9631c.base_1ejecy9_segmentVertical__61b9631c{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.base_1ejecy9_bb2d6sr__61b9631c.base_1ejecy9_segmentVertical__61b9631c .base_1ejecy9_spuzt9m__61b9631c{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.base_1ejecy9_bb2d6sr__61b9631c.base_1ejecy9_segmentVertical__61b9631c .base_1ejecy9_sin9wo2__61b9631c{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
|
403
|
+
|
404
|
+
.SegmentGroup_styles_79d8q2_b2sori2__2f429695{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;max-width:100%;}.SegmentGroup_styles_79d8q2_b2sori2__2f429695.SegmentGroup_styles_79d8q2_segmentVertical__2f429695{max-width:none;max-height:100%;}.SegmentGroup_styles_79d8q2_b2sori2__2f429695:before{border-radius:var(--plasma-segment-group-border-radius);}
|
405
|
+
.SegmentGroup_styles_79d8q2_sin9wo2__2f429695{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;}
|
406
|
+
.SegmentGroup_styles_79d8q2_spuzt9m__2f429695{position:relative;height:100%;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;--plasma_private-clip-outline-offset:-0.063rem;--plasma_private-clip-outline-radius:0.063rem;}.SegmentGroup_styles_79d8q2_spuzt9m__2f429695.SegmentGroup_styles_79d8q2_segmentGroupClipScroll__2f429695{overflow:scroll;-webkit-scroll-padding:0.25rem;-moz-scroll-padding:0.25rem;-ms-scroll-padding:0.25rem;scroll-padding:0.25rem;overscroll-behavior:contain;--plasma_private-clip-outline-offset:0.063rem;--plasma_private-clip-outline-radius:-0.063rem;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}.SegmentGroup_styles_79d8q2_spuzt9m__2f429695.SegmentGroup_styles_79d8q2_segmentGroupClipScroll__2f429695::-webkit-scrollbar{display:none;}.SegmentGroup_styles_79d8q2_spuzt9m__2f429695.SegmentGroup_styles_79d8q2_segmentGroupClipScroll__2f429695 .SegmentGroup_styles_79d8q2_sin9wo2__2f429695{max-width:none;}
|
407
|
+
.SegmentGroup_styles_79d8q2_s1qf4oye__2f429695{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;border:none;background-color:transparent;outline:none;position:relative;}.SegmentGroup_styles_79d8q2_s1qf4oye__2f429695::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:0.063rem solid transparent;border-radius:calc(var(--plasma_private-outline-radius) - 0.063rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.SegmentGroup_styles_79d8q2_s1qf4oye__2f429695.SegmentGroup_styles_79d8q2_focusVisible__2f429695:focus::before,.SegmentGroup_styles_79d8q2_s1qf4oye__2f429695[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-segment-outline-focus-color);}.SegmentGroup_styles_79d8q2_s1qf4oye__2f429695[disabled]{cursor:not-allowed;}
|
408
|
+
.SegmentGroup_styles_79d8q2_s3pgccr__2f429695.SegmentGroup_styles_79d8q2_s1qf4oye__2f429695{padding:var(--plasma-segment-group-arrow-padding);padding-right:0;margin-right:0.1875rem;margin-left:0.125rem;}
|
409
|
+
.SegmentGroup_styles_79d8q2_sax6mvm__2f429695.SegmentGroup_styles_79d8q2_s1qf4oye__2f429695{padding:var(--plasma-segment-group-arrow-padding);padding-left:0;margin-left:0.1875rem;margin-right:0.125rem;}
|
410
|
+
.SegmentGroup_styles_79d8q2_s1n81rr8__2f429695.SegmentGroup_styles_79d8q2_s1qf4oye__2f429695{padding:var(--plasma-segment-group-vertical-arrow-padding);padding-bottom:0;margin-bottom:0.1875rem;}
|
411
|
+
.SegmentGroup_styles_79d8q2_s7ukuvj__2f429695.SegmentGroup_styles_79d8q2_s1qf4oye__2f429695{padding:var(--plasma-segment-group-vertical-arrow-padding);padding-top:0;margin-top:0.1875rem;}
|
406
412
|
|
407
413
|
.base_7kjuok_b1kyapt7__5060a19f{font-family:var(--plasma-segment-item-font-family);font-size:var(--plasma-segment-item-font-size);font-style:var(--plasma-segment-item-font-style);font-weight:var(--plasma-segment-item-font-weight);-webkit-letter-spacing:var(--plasma-segment-item-letter-spacing);-moz-letter-spacing:var(--plasma-segment-item-letter-spacing);-ms-letter-spacing:var(--plasma-segment-item-letter-spacing);letter-spacing:var(--plasma-segment-item-letter-spacing);line-height:var(--plasma-segment-item-lineheight);--plasma_private-outline-radius:var(--plasma-segment-item-border-radius);border-radius:var(--plasma-segment-item-border-radius);width:var(--plasma-segment-item-width);height:var(--plasma-segment-item-height);padding:var(--plasma-segment-item-padding);}
|
408
414
|
|
409
|
-
.
|
415
|
+
.base_dettiq_b1tykljf__414ed295{color:var(--plasma-segment-item-color);background-color:var(--plasma-segment-item-background-color);}.base_dettiq_b1tykljf__414ed295:hover{color:var(--plasma-segment-item-color-hover);background-color:var(--plasma-segment-item-background-color-hover);}.base_dettiq_b1tykljf__414ed295:hover .base_dettiq_r1gg7fed__414ed295{color:var(--plasma-segment-item-color-hover);}.base_dettiq_b1tykljf__414ed295:hover .base_dettiq_r1gg7fed__414ed295.base_dettiq_segmentAdditionalText__414ed295{color:var(--plasma-segment-item-additional-color-hover);}.base_dettiq_b1tykljf__414ed295.base_dettiq_selectedSegmentItem__414ed295{color:var(--plasma-segment-item-selected-color);background-color:var(--plasma-segment-item-selected-background-color);}.base_dettiq_b1tykljf__414ed295.base_dettiq_selectedSegmentItem__414ed295 .base_dettiq_r1gg7fed__414ed295{color:var(--plasma-segment-item-selected-color);}.base_dettiq_b1tykljf__414ed295.base_dettiq_selectedSegmentItem__414ed295 .base_dettiq_r1gg7fed__414ed295.base_dettiq_segmentAdditionalText__414ed295{color:var(--plasma-segment-item-selected-additional-color);}.base_dettiq_b1tykljf__414ed295.base_dettiq_selectedSegmentItem__414ed295:hover{color:var(--plasma-segment-item-selected-color-hover);background-color:var(--plasma-segment-item-selected-background-color-hover);}.base_dettiq_b1tykljf__414ed295.base_dettiq_selectedSegmentItem__414ed295:hover .base_dettiq_r1gg7fed__414ed295{color:var(--plasma-segment-item-selected-additional-color-hover);}
|
410
416
|
|
411
417
|
.base_y6af8r_bwprat9__353907e1[disabled]{cursor:not-allowed;}.base_y6af8r_bwprat9__353907e1[disabled]:hover{color:var(--plasma-segment-item-color);background-color:var(--plasma-segment-item-background-color);}.base_y6af8r_bwprat9__353907e1[disabled].base_y6af8r_selectedSegmentItem__353907e1:hover{color:var(--plasma-segment-item-selected-color);background-color:var(--plasma-segment-item-selected-background-color);}
|
412
418
|
|
413
|
-
.
|
419
|
+
.base_omc5u1_b795lc7__e9b122aa.base_omc5u1_segmentPilled__e9b122aa{--plasma_private-outline-radius:var(--plasma-segment-item-pilled-border-radius);border-radius:var(--plasma-segment-item-pilled-border-radius);padding:var(--plasma-segment-item-pilled-padding);}
|
414
420
|
|
415
|
-
.
|
416
|
-
.
|
421
|
+
.SegmentItem_styles_19oo2vi_bxcdyja__d4eb580c{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;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;box-sizing:border-box;min-width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;outline:none;cursor:pointer;margin-left:var(--plasma-segment-item-margin-left);-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;}.SegmentItem_styles_19oo2vi_bxcdyja__d4eb580c:first-child{margin-left:0;}.SegmentItem_styles_19oo2vi_bxcdyja__d4eb580c::before{content:'';position:absolute;top:var(--plasma_private-clip-outline-offset);left:var(--plasma_private-clip-outline-offset);right:var(--plasma_private-clip-outline-offset);bottom:var(--plasma_private-clip-outline-offset);z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma_private-outline-radius) + var(--plasma_private-clip-outline-radius));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.SegmentItem_styles_19oo2vi_bxcdyja__d4eb580c.SegmentItem_styles_19oo2vi_focusVisible__d4eb580c:focus::before,.SegmentItem_styles_19oo2vi_bxcdyja__d4eb580c[data-focus-visible-added]::before{z-index:1;outline:none;box-shadow:0 0 0 0.063rem var(--plasma-segment-outline-focus-color);}
|
422
|
+
.SegmentItem_styles_19oo2vi_sxjfe87__d4eb580c{display:inline-block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding:var(--plasma-segment-item-content-padding);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:var(--sxjfe87-0);margin-left:var(--sxjfe87-1);}
|
423
|
+
.SegmentItem_styles_19oo2vi_r1gg7fed__d4eb580c{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:var(--plasma-segment-item-content-icon-margin);overflow:hidden;color:var(--plasma-segment-item-color);}.SegmentItem_styles_19oo2vi_r1gg7fed__d4eb580c.SegmentItem_styles_19oo2vi_segmentAdditionalText__d4eb580c{text-overflow:ellipsis;overflow:hidden;color:var(--plasma-segment-item-additional-color);}
|
424
|
+
.SegmentItem_styles_19oo2vi_lctm1j9__d4eb580c{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-right:var(--plasma-segment-item-content-icon-margin);color:inherit;}
|
417
425
|
|
418
426
|
.base_1wf7n5i_b1x66a6y__80fc5ddb{height:var(--plasma-skeleton-line-height);}.base_1wf7n5i_b1x66a6y__80fc5ddb .base_1wf7n5i_sn3du7u__80fc5ddb{height:var(--plasma-skeleton-visible-line-height);}
|
419
427
|
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@salutejs/plasma-new-hope",
|
3
|
-
"version": "0.
|
3
|
+
"version": "0.169.0-canary.1392.11363976712.0",
|
4
4
|
"description": "Salute Design System blueprint",
|
5
5
|
"main": "cjs/index.js",
|
6
6
|
"module": "es/index.js",
|
@@ -124,5 +124,5 @@
|
|
124
124
|
"react-popper": "2.3.0",
|
125
125
|
"storeon": "3.1.5"
|
126
126
|
},
|
127
|
-
"gitHead": "
|
127
|
+
"gitHead": "0e96d5a807ee42e017bc34acfe0ac3f8c16926a9"
|
128
128
|
}
|
@@ -21,13 +21,13 @@ import { PropsTable, Description } from '@site/src/components';
|
|
21
21
|
|
22
22
|
### Провайдер контекста
|
23
23
|
|
24
|
-
Оберните в `SegmentProvider` компонент, в котором будут использованы SegmentGroup с SegmentItem.
|
24
|
+
Оберните в `SegmentProvider` компонент, в котором будут использованы SegmentGroup с SegmentItem.
|
25
25
|
Внутри данного провайдера есть доступ к хуку `useSegment`.
|
26
26
|
|
27
27
|
### Выбранные по умолчанию SegmentItem
|
28
28
|
|
29
|
-
Можно задать выбранные по умолчанию сегменты с помощью свойства `defaultSelected`.
|
30
|
-
Оно передается в `SegmentProvider`, в виде массива `value`
|
29
|
+
Можно задать выбранные по умолчанию сегменты с помощью свойства `defaultSelected`.
|
30
|
+
Оно передается в `SegmentProvider`, в виде массива `value` элементов.
|
31
31
|
|
32
32
|
```tsx live
|
33
33
|
import React from 'react';
|
@@ -41,8 +41,9 @@ export function App() {
|
|
41
41
|
|
42
42
|
return (
|
43
43
|
<>
|
44
|
-
<div
|
45
|
-
<
|
44
|
+
<div>Выбранный элемент: {selectedSegmentItems.join(', ')}</div>
|
45
|
+
<br />
|
46
|
+
<SegmentGroup hasBackground pilled clip={false}>
|
46
47
|
{items.map((_, i) => (
|
47
48
|
<SegmentItem
|
48
49
|
label={`Label ${i}`}
|
@@ -58,7 +59,49 @@ export function App() {
|
|
58
59
|
}
|
59
60
|
|
60
61
|
return (
|
61
|
-
<div style
|
62
|
+
<div style={{ display: "block" }} >
|
63
|
+
<SegmentProvider defaultSelected={['label_1']}>
|
64
|
+
<SegmentTemplate/>
|
65
|
+
</SegmentProvider>
|
66
|
+
</div>
|
67
|
+
);
|
68
|
+
}
|
69
|
+
```
|
70
|
+
|
71
|
+
### Вертикальное отображение
|
72
|
+
|
73
|
+
Для смены ориентации передаем `orientation: 'vertical'`
|
74
|
+
|
75
|
+
```tsx live
|
76
|
+
import React from 'react';
|
77
|
+
import { SegmentGroup, SegmentItem, SegmentProvider, useSegment } from '@salutejs/{{ package }}';
|
78
|
+
|
79
|
+
export function App() {
|
80
|
+
const items = Array(8).fill(0);
|
81
|
+
|
82
|
+
const SegmentTemplate = () => {
|
83
|
+
const {selectedSegmentItems} = useSegment();
|
84
|
+
|
85
|
+
return (
|
86
|
+
<>
|
87
|
+
<div>Выбранный элемент: {selectedSegmentItems.join(', ')}</div>
|
88
|
+
<br />
|
89
|
+
<SegmentGroup hasBackground clip={false}>
|
90
|
+
{items.map((_, i) => (
|
91
|
+
<SegmentItem
|
92
|
+
label={`Label ${i}`}
|
93
|
+
value={`label_${i}`}
|
94
|
+
key={`label_${i}`}
|
95
|
+
view='secondary'
|
96
|
+
/>
|
97
|
+
))}
|
98
|
+
</SegmentGroup>
|
99
|
+
</>
|
100
|
+
)
|
101
|
+
}
|
102
|
+
|
103
|
+
return (
|
104
|
+
<div style={{ display: "block" }} >
|
62
105
|
<SegmentProvider defaultSelected={['label_1']}>
|
63
106
|
<SegmentTemplate/>
|
64
107
|
</SegmentProvider>
|
@@ -8,7 +8,12 @@ var classes = exports.classes = {
|
|
8
8
|
selectedSegmentItem: 'selected-segment-item',
|
9
9
|
segmentPilled: 'segment-pilled',
|
10
10
|
segmentGroupFilledBackground: 'segment-group-filled-background',
|
11
|
-
segmentStretch: 'segment-stretched'
|
11
|
+
segmentStretch: 'segment-stretched',
|
12
|
+
segmentVertical: 'segment-vertical',
|
13
|
+
segmentArrowPadding: 'segment-arrow-padding',
|
14
|
+
segmentGroupClipScroll: 'segment-group-clip-scroll',
|
15
|
+
segmentXsSize: 'segment-xs-size',
|
16
|
+
segmentAdditionalText: 'segment-additional-text'
|
12
17
|
};
|
13
18
|
var tokens = exports.tokens = {
|
14
19
|
fontFamily: '--plasma-segment-item-font-family',
|
@@ -23,6 +28,8 @@ var tokens = exports.tokens = {
|
|
23
28
|
groupPilledBorderRadius: '--plasma-segment-group-pilled-border-radius',
|
24
29
|
groupWidth: '--plasma-segment-group-width',
|
25
30
|
groupHeight: '--plasma-segment-group-height',
|
31
|
+
groupArrowPadding: '--plasma-segment-group-arrow-padding',
|
32
|
+
groupVerticalArrowPadding: '--plasma-segment-group-vertical-arrow-padding',
|
26
33
|
groupBackgroundColor: '--plasma-segment-group-background-color',
|
27
34
|
groupFilledBackgroundColor: '--plasma-segment-group-filled-background-color',
|
28
35
|
itemBorderRadius: '--plasma-segment-item-border-radius',
|
@@ -30,14 +37,21 @@ var tokens = exports.tokens = {
|
|
30
37
|
itemWidth: '--plasma-segment-item-width',
|
31
38
|
itemHeight: '--plasma-segment-item-height',
|
32
39
|
itemPadding: '--plasma-segment-item-padding',
|
40
|
+
itemPilledPadding: '--plasma-segment-item-pilled-padding',
|
33
41
|
itemMarginLeft: '--plasma-segment-item-margin-left',
|
42
|
+
itemContentPadding: '--plasma-segment-item-content-padding',
|
43
|
+
itemIconMargin: '--plasma-segment-item-content-icon-margin',
|
34
44
|
itemColor: '--plasma-segment-item-color',
|
35
45
|
itemBackgroundColor: '--plasma-segment-item-background-color',
|
36
46
|
itemColorHover: '--plasma-segment-item-color-hover',
|
37
47
|
itemBackgroundColorHover: '--plasma-segment-item-background-color-hover',
|
48
|
+
itemAdditionalColor: '--plasma-segment-item-additional-color',
|
49
|
+
itemAdditionalColorHover: '--plasma-segment-item-additional-color-hover',
|
38
50
|
itemSelectedColor: '--plasma-segment-item-selected-color',
|
39
51
|
itemSelectedBackgroundColor: '--plasma-segment-item-selected-background-color',
|
40
52
|
itemSelectedColorHover: '--plasma-segment-item-selected-color-hover',
|
41
53
|
itemSelectedBackgroundColorHover: '--plasma-segment-item-selected-background-color-hover',
|
54
|
+
itemSelectedAdditionalColor: '--plasma-segment-item-selected-additional-color',
|
55
|
+
itemSelectedAdditionalColorHover: '--plasma-segment-item-selected-additional-color-hover',
|
42
56
|
disabledOpacity: '--plasma-segment-disabled-opacity'
|
43
57
|
};
|
@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
5
5
|
value: true
|
6
6
|
});
|
7
|
-
exports.segmentGroupRoot = exports.segmentGroupConfig = void 0;
|
7
|
+
exports.segmentGroupRoot = exports.segmentGroupConfig = exports.getChildNodes = void 0;
|
8
8
|
var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
|
9
9
|
var _plasmaCore = /*#__PURE__*/require("@salutejs/plasma-core");
|
10
10
|
var _Icon = /*#__PURE__*/require("../../../_Icon");
|
@@ -17,8 +17,9 @@ var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
|
|
17
17
|
var _base4 = /*#__PURE__*/require("./variations/_pilled/base");
|
18
18
|
var _base5 = /*#__PURE__*/require("./variations/_filledBackgound/base");
|
19
19
|
var _base6 = /*#__PURE__*/require("./variations/_stretch/base");
|
20
|
+
var _base7 = /*#__PURE__*/require("./variations/_orientation/base");
|
20
21
|
var _SegmentGroup = /*#__PURE__*/require("./SegmentGroup.styles");
|
21
|
-
var _excluded = ["id", "selectionMode", "pilled", "stretch", "filledBackground", "disabled", "size", "view", "children"];
|
22
|
+
var _excluded = ["id", "selectionMode", "pilled", "stretch", "clip", "orientation", "filledBackground", "hasBackground", "disabled", "size", "view", "children"];
|
22
23
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
23
24
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
24
25
|
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); }
|
@@ -30,146 +31,231 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
|
|
30
31
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
31
32
|
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; }
|
32
33
|
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; }
|
34
|
+
var Keys = /*#__PURE__*/function (Keys) {
|
35
|
+
Keys[Keys["end"] = 35] = "end";
|
36
|
+
Keys[Keys["home"] = 36] = "home";
|
37
|
+
Keys[Keys["left"] = 37] = "left";
|
38
|
+
Keys[Keys["right"] = 39] = "right";
|
39
|
+
return Keys;
|
40
|
+
}(Keys || {});
|
41
|
+
var getChildNodes = exports.getChildNodes = function getChildNodes(wrapper) {
|
42
|
+
var container = wrapper === null || wrapper === void 0 ? void 0 : wrapper.firstChild;
|
43
|
+
return container ? Array.from(container === null || container === void 0 ? void 0 : container.childNodes) : [];
|
44
|
+
};
|
33
45
|
var segmentGroupRoot = exports.segmentGroupRoot = function segmentGroupRoot(Root) {
|
34
46
|
return /*#__PURE__*/(0, _react.forwardRef)(function (props, outerRef) {
|
35
47
|
var id = props.id,
|
36
48
|
selectionMode = props.selectionMode,
|
37
49
|
pilled = props.pilled,
|
38
50
|
stretch = props.stretch,
|
51
|
+
_props$clip = props.clip,
|
52
|
+
clip = _props$clip === void 0 ? true : _props$clip,
|
53
|
+
_props$orientation = props.orientation,
|
54
|
+
orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
|
39
55
|
_props$filledBackgrou = props.filledBackground,
|
40
56
|
filledBackground = _props$filledBackgrou === void 0 ? false : _props$filledBackgrou,
|
57
|
+
_props$hasBackground = props.hasBackground,
|
58
|
+
hasBackground = _props$hasBackground === void 0 ? false : _props$hasBackground,
|
41
59
|
_props$disabled = props.disabled,
|
42
60
|
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
43
61
|
size = props.size,
|
44
62
|
view = props.view,
|
45
63
|
children = props.children,
|
46
64
|
rest = _objectWithoutProperties(props, _excluded);
|
65
|
+
var scrollRef = (0, _react.useRef)(null);
|
66
|
+
var trackRef = (0, _react.useRef)(null);
|
67
|
+
var leftArrowRef = (0, _react.useRef)(null);
|
47
68
|
var _useSegmentInner = (0, _SegmentProvider.useSegmentInner)(),
|
48
69
|
setSelectionMode = _useSegmentInner.setSelectionMode,
|
49
70
|
setDisabledGroup = _useSegmentInner.setDisabledGroup;
|
50
|
-
var _useState = (0, _react.useState)(
|
71
|
+
var _useState = (0, _react.useState)(true),
|
51
72
|
_useState2 = _slicedToArray(_useState, 2),
|
52
|
-
|
53
|
-
|
54
|
-
var _useState3 = (0, _react.useState)(
|
73
|
+
firstItemVisible = _useState2[0],
|
74
|
+
setFirstItemVisible = _useState2[1];
|
75
|
+
var _useState3 = (0, _react.useState)(true),
|
55
76
|
_useState4 = _slicedToArray(_useState3, 2),
|
56
|
-
|
57
|
-
|
58
|
-
var _useState5 = (0, _react.useState)(false),
|
59
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
60
|
-
lastItemVisible = _useState6[0],
|
61
|
-
setLastItemVisible = _useState6[1];
|
77
|
+
lastItemVisible = _useState4[0],
|
78
|
+
setLastItemVisible = _useState4[1];
|
62
79
|
var uniqId = (0, _plasmaCore.safeUseId)();
|
63
80
|
var segmentGroupId = id || uniqId;
|
64
|
-
var
|
65
|
-
var
|
81
|
+
var canClip = clip && !stretch;
|
82
|
+
var isVertical = orientation === 'vertical';
|
83
|
+
var stretchClass = (clip ? firstItemVisible && lastItemVisible : true) && stretch ? _tokens.classes.segmentStretch : undefined;
|
84
|
+
var orientationClass = isVertical ? _tokens.classes.segmentVertical : undefined;
|
85
|
+
var clipScrollClass = canClip ? _tokens.classes.segmentGroupClipScroll : undefined;
|
86
|
+
var pilledAttr = (view !== 'clear' || hasBackground) && pilled;
|
87
|
+
var filledBackgroundAttr = view !== 'clear' && filledBackground || hasBackground;
|
66
88
|
var pilledClass = pilledAttr ? _tokens.classes.segmentPilled : undefined;
|
67
89
|
var filledClass = filledBackgroundAttr ? _tokens.classes.segmentGroupFilledBackground : undefined;
|
68
|
-
var stretchClass = firstItemVisible && lastItemVisible && stretch ? _tokens.classes.segmentStretch : undefined;
|
69
|
-
var items = (_react.Children === null || _react.Children === void 0 ? void 0 : _react.Children.map(children, function (child) {
|
70
|
-
return child;
|
71
|
-
})) || [];
|
72
90
|
var onPrev = (0, _react.useCallback)(function () {
|
73
|
-
|
74
|
-
return
|
91
|
+
if (disabled || !scrollRef.current) {
|
92
|
+
return;
|
93
|
+
}
|
94
|
+
var childNodes = getChildNodes(scrollRef.current);
|
95
|
+
var scrollLeft = Math.round(scrollRef.current.scrollLeft);
|
96
|
+
var firstOverflowingTab = childNodes.slice().reverse().find(function (child) {
|
97
|
+
if (!child || child.offsetLeft === undefined) {
|
98
|
+
return;
|
99
|
+
}
|
100
|
+
var tabStartX = child.offsetLeft;
|
101
|
+
return tabStartX < scrollLeft;
|
75
102
|
});
|
76
|
-
|
103
|
+
firstOverflowingTab === null || firstOverflowingTab === void 0 || firstOverflowingTab.scrollIntoView({
|
104
|
+
block: 'nearest',
|
105
|
+
inline: 'nearest'
|
106
|
+
});
|
107
|
+
}, [disabled, scrollRef]);
|
77
108
|
var onNext = (0, _react.useCallback)(function () {
|
78
|
-
|
79
|
-
return
|
109
|
+
if (disabled || !scrollRef.current) {
|
110
|
+
return;
|
111
|
+
}
|
112
|
+
var scrollRight = Math.round(scrollRef.current.scrollLeft + scrollRef.current.clientWidth);
|
113
|
+
var childNodes = getChildNodes(scrollRef.current);
|
114
|
+
var lastOverflowingChild = childNodes.find(function (child) {
|
115
|
+
if (!child || child.offsetLeft === undefined) {
|
116
|
+
return;
|
117
|
+
}
|
118
|
+
var tabEndX = child.offsetLeft + child.offsetWidth;
|
119
|
+
return tabEndX > scrollRight;
|
80
120
|
});
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
121
|
+
lastOverflowingChild === null || lastOverflowingChild === void 0 || lastOverflowingChild.scrollIntoView({
|
122
|
+
block: 'nearest',
|
123
|
+
inline: 'nearest'
|
124
|
+
});
|
125
|
+
}, [disabled, scrollRef]);
|
126
|
+
var onKeyDown = (0, _react.useCallback)(function (event) {
|
127
|
+
var childNodes = getChildNodes(scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current);
|
128
|
+
var index = childNodes.findIndex(function (child) {
|
129
|
+
return document.activeElement === child;
|
130
|
+
});
|
131
|
+
var minIndex = 0;
|
132
|
+
var maxIndex = childNodes.length - 1;
|
133
|
+
var nextIndex;
|
134
|
+
switch (event.keyCode) {
|
135
|
+
case Keys.end:
|
136
|
+
nextIndex = maxIndex;
|
137
|
+
break;
|
138
|
+
case Keys.left:
|
139
|
+
nextIndex = index > minIndex ? index - 1 : index;
|
140
|
+
break;
|
141
|
+
case Keys.right:
|
142
|
+
nextIndex = index < maxIndex ? index + 1 : index;
|
143
|
+
break;
|
144
|
+
case Keys.home:
|
145
|
+
nextIndex = minIndex;
|
146
|
+
break;
|
147
|
+
default:
|
148
|
+
return;
|
149
|
+
}
|
150
|
+
if (nextIndex !== index) {
|
151
|
+
var _childNodes$nextIndex, _childNodes$nextIndex2;
|
152
|
+
event.preventDefault();
|
153
|
+
(_childNodes$nextIndex = childNodes[nextIndex]) === null || _childNodes$nextIndex === void 0 || _childNodes$nextIndex.focus();
|
154
|
+
(_childNodes$nextIndex2 = childNodes[nextIndex]) === null || _childNodes$nextIndex2 === void 0 || _childNodes$nextIndex2.scrollIntoView({
|
155
|
+
block: 'center',
|
156
|
+
inline: 'center',
|
157
|
+
behavior: 'smooth'
|
94
158
|
});
|
95
|
-
}
|
96
|
-
};
|
97
|
-
var
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
}
|
105
|
-
|
106
|
-
|
159
|
+
}
|
160
|
+
}, []);
|
161
|
+
var handleScroll = (0, _react.useCallback)(function (event) {
|
162
|
+
var _event$stopPropagatio;
|
163
|
+
(_event$stopPropagatio = event.stopPropagation) === null || _event$stopPropagatio === void 0 || _event$stopPropagatio.call(event);
|
164
|
+
if (!canClip) {
|
165
|
+
setFirstItemVisible(true);
|
166
|
+
setLastItemVisible(true);
|
167
|
+
return;
|
168
|
+
}
|
169
|
+
if (isVertical) {
|
170
|
+
var maxScrollTop = event.currentTarget.scrollHeight - event.currentTarget.clientHeight;
|
171
|
+
var scrollTop = Math.round(event.currentTarget.scrollTop);
|
172
|
+
setFirstItemVisible(scrollTop <= 0);
|
173
|
+
setLastItemVisible(scrollTop >= maxScrollTop);
|
174
|
+
return;
|
175
|
+
}
|
176
|
+
var maxScrollLeft = event.currentTarget.scrollWidth - event.currentTarget.clientWidth;
|
177
|
+
var scrollLeft = Math.round(event.currentTarget.scrollLeft);
|
178
|
+
setFirstItemVisible(scrollLeft <= 0);
|
179
|
+
setLastItemVisible(scrollLeft >= maxScrollLeft);
|
180
|
+
}, [isVertical, canClip]);
|
181
|
+
(0, _react.useEffect)(function () {
|
182
|
+
handleScroll({
|
183
|
+
currentTarget: scrollRef.current
|
184
|
+
});
|
185
|
+
}, [handleScroll]);
|
186
|
+
(0, _react.useEffect)(function () {
|
187
|
+
var _scrollRef$current, _scrollRef$current2, _scrollRef$current3, _scrollRef$current4;
|
188
|
+
if (!canClip) {
|
189
|
+
setLastItemVisible(true);
|
190
|
+
return;
|
191
|
+
}
|
192
|
+
setLastItemVisible(isVertical ? ((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollHeight) === ((_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.clientHeight) : ((_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === void 0 ? void 0 : _scrollRef$current3.scrollWidth) === ((_scrollRef$current4 = scrollRef.current) === null || _scrollRef$current4 === void 0 ? void 0 : _scrollRef$current4.clientWidth));
|
193
|
+
}, [isVertical, canClip]);
|
194
|
+
|
195
|
+
// Этот хук компенсирует появление левой/верхней стрелки при прокрутке
|
196
|
+
(0, _react.useEffect)(function () {
|
197
|
+
if (firstItemVisible || !scrollRef.current || !leftArrowRef.current) {
|
198
|
+
return;
|
199
|
+
}
|
200
|
+
if (isVertical) {
|
201
|
+
scrollRef.current.scrollTo({
|
202
|
+
top: Math.round(scrollRef.current.scrollTop + leftArrowRef.current.clientHeight)
|
203
|
+
});
|
204
|
+
return;
|
205
|
+
}
|
206
|
+
scrollRef.current.scrollTo({
|
207
|
+
left: Math.round(scrollRef.current.scrollLeft + leftArrowRef.current.clientWidth)
|
208
|
+
});
|
209
|
+
}, [firstItemVisible, isVertical]);
|
107
210
|
var PreviousButton = (0, _react.useMemo)(function () {
|
108
|
-
|
211
|
+
var ArrowNode = isVertical ? _SegmentGroup.StyledTopArrow : _SegmentGroup.StyledLeftArrow;
|
212
|
+
return /*#__PURE__*/_react["default"].createElement(ArrowNode, {
|
109
213
|
type: "button",
|
110
214
|
"aria-label": "\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u0441\u0435\u0433\u043C\u0435\u043D\u0442",
|
111
215
|
onClick: onPrev,
|
112
216
|
tabIndex: disabled ? -1 : 0,
|
113
217
|
disabled: disabled
|
114
|
-
}, /*#__PURE__*/_react["default"].createElement(_Icon.
|
218
|
+
}, isVertical ? /*#__PURE__*/_react["default"].createElement(_Icon.IconDisclosureUpWithOffset, {
|
219
|
+
color: "var(".concat(_tokens.tokens.arrowColor, ")"),
|
220
|
+
size: "s"
|
221
|
+
}) : /*#__PURE__*/_react["default"].createElement(_Icon.IconDisclosureLeftWithOffset, {
|
115
222
|
color: "var(".concat(_tokens.tokens.arrowColor, ")")
|
116
223
|
}));
|
117
|
-
}, [onPrev]);
|
224
|
+
}, [onPrev, isVertical]);
|
118
225
|
var NextButton = (0, _react.useMemo)(function () {
|
119
|
-
|
226
|
+
var ArrowNode = isVertical ? _SegmentGroup.StyledBottomArrow : _SegmentGroup.StyledRightArrow;
|
227
|
+
return /*#__PURE__*/_react["default"].createElement(ArrowNode, {
|
120
228
|
type: "button",
|
121
229
|
"aria-label": "\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u0441\u0435\u0433\u043C\u0435\u043D\u0442",
|
122
230
|
onClick: onNext,
|
123
231
|
tabIndex: disabled ? -1 : 0,
|
124
232
|
disabled: disabled
|
125
|
-
}, /*#__PURE__*/_react["default"].createElement(_Icon.
|
233
|
+
}, isVertical ? /*#__PURE__*/_react["default"].createElement(_Icon.IconDisclosureDownWithOffset, {
|
234
|
+
color: "var(".concat(_tokens.tokens.arrowColor, ")"),
|
235
|
+
size: "s"
|
236
|
+
}) : /*#__PURE__*/_react["default"].createElement(_Icon.IconDisclosureRightWithOffset, {
|
126
237
|
color: "var(".concat(_tokens.tokens.arrowColor, ")")
|
127
238
|
}));
|
128
|
-
}, [onNext]);
|
239
|
+
}, [onNext, isVertical]);
|
129
240
|
(0, _react.useEffect)(function () {
|
130
241
|
selectionMode && setSelectionMode(selectionMode);
|
131
242
|
setDisabledGroup(disabled);
|
132
243
|
}, [selectionMode, disabled]);
|
133
|
-
(0, _react.useEffect)(function () {
|
134
|
-
var _trackRef$current;
|
135
|
-
// Intersection observer для первого сегмента
|
136
|
-
var observeFirstItem = new IntersectionObserver(onIntersecting(setFirstItemVisible), {
|
137
|
-
root: null,
|
138
|
-
rootMargin: '0px',
|
139
|
-
threshold: 0.5
|
140
|
-
});
|
141
|
-
|
142
|
-
// Intersection observer для последнего сегмента
|
143
|
-
var observeLastItem = new IntersectionObserver(onIntersecting(setLastItemVisible), {
|
144
|
-
root: null,
|
145
|
-
rootMargin: '0px',
|
146
|
-
threshold: 0.5
|
147
|
-
});
|
148
|
-
|
149
|
-
// получаем список сегментов внутри SegmentGroup
|
150
|
-
var childrenArray = Array.from(((_trackRef$current = trackRef.current) === null || _trackRef$current === void 0 ? void 0 : _trackRef$current.children) || []);
|
151
|
-
if (childrenArray.length) {
|
152
|
-
// подписываемся на событие появление внутри SegmentGroup
|
153
|
-
observeFirstItem.observe(childrenArray[0]);
|
154
|
-
observeLastItem.observe(childrenArray[childrenArray.length - 1]);
|
155
|
-
}
|
156
|
-
return function () {
|
157
|
-
// отписываемся от события появления внутри SegmentGroup
|
158
|
-
observeFirstItem.disconnect();
|
159
|
-
observeLastItem.disconnect();
|
160
|
-
};
|
161
|
-
}, [children]);
|
162
244
|
return /*#__PURE__*/_react["default"].createElement(Root, _extends({
|
163
245
|
view: view,
|
164
246
|
size: size,
|
247
|
+
orientation: orientation,
|
165
248
|
id: segmentGroupId,
|
166
249
|
ref: outerRef,
|
167
250
|
filledBackground: filledBackgroundAttr,
|
168
251
|
disabled: disabled,
|
169
252
|
pilled: pilledAttr,
|
170
|
-
className: (0, _utils.cx)(pilledClass, filledClass, stretchClass)
|
253
|
+
className: (0, _utils.cx)(pilledClass, filledClass, stretchClass, orientationClass),
|
254
|
+
onKeyDown: onKeyDown
|
171
255
|
}, rest), !firstItemVisible && PreviousButton, /*#__PURE__*/_react["default"].createElement(_SegmentGroup.StyledContentWrapper, {
|
172
|
-
|
256
|
+
className: (0, _utils.cx)(clipScrollClass),
|
257
|
+
ref: scrollRef,
|
258
|
+
onScroll: handleScroll
|
173
259
|
}, /*#__PURE__*/_react["default"].createElement(_SegmentGroup.StyledContent, {
|
174
260
|
ref: trackRef
|
175
261
|
}, children)), !lastItemVisible && NextButton);
|
@@ -199,6 +285,9 @@ var segmentGroupConfig = exports.segmentGroupConfig = {
|
|
199
285
|
css: _base6.base,
|
200
286
|
attrs: true
|
201
287
|
},
|
288
|
+
orientation: {
|
289
|
+
css: _base7.base
|
290
|
+
},
|
202
291
|
filledBackground: {
|
203
292
|
css: _base5.base,
|
204
293
|
attrs: true
|
@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
5
5
|
value: true
|
6
6
|
});
|
7
|
-
exports.base = exports.StyledContentWrapper = exports.StyledContent = exports.StyledArrow = void 0;
|
7
|
+
exports.base = exports.StyledTopArrow = exports.StyledRightArrow = exports.StyledLeftArrow = exports.StyledContentWrapper = exports.StyledContent = exports.StyledBottomArrow = exports.StyledArrow = void 0;
|
8
8
|
var _styledComponents = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("styled-components"));
|
9
9
|
var _mixins = /*#__PURE__*/require("../../../../mixins");
|
10
10
|
var _tokens = /*#__PURE__*/require("../../tokens");
|
@@ -12,18 +12,30 @@ var _templateObject;
|
|
12
12
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
13
13
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
14
14
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
15
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n display: inline-flex;\n align-items: center;\n"])));
|
15
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n display: inline-flex;\n align-items: center;\n max-width: 100%;\n\n &.", " {\n max-width: none;\n max-height: 100%;\n }\n\n &:before {\n border-radius: var(", ");\n }\n"])), _tokens.classes.segmentVertical, _tokens.tokens.groupBorderRadius);
|
16
16
|
var StyledContent = exports.StyledContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
17
17
|
componentId: "plasma-new-hope__sc-1kj8wok-0"
|
18
|
-
})(["display:inline-flex;flex-direction:row;align-items:center;"]);
|
18
|
+
})(["display:inline-flex;flex-direction:row;align-items:center;max-width:100%;"]);
|
19
19
|
var StyledContentWrapper = exports.StyledContentWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
20
20
|
componentId: "plasma-new-hope__sc-1kj8wok-1"
|
21
|
-
})(["position:relative;height:100%;
|
21
|
+
})(["position:relative;height:100%;width:100%;display:flex;align-items:center;--plasma_private-clip-outline-offset:-0.063rem;--plasma_private-clip-outline-radius:0.063rem;&.", "{overflow:scroll;scroll-padding:0.25rem;overscroll-behavior:contain;--plasma_private-clip-outline-offset:0.063rem;--plasma_private-clip-outline-radius:-0.063rem;scrollbar-width:none;::-webkit-scrollbar{display:none;}", "{max-width:none;}}"], _tokens.classes.segmentGroupClipScroll, StyledContent);
|
22
22
|
var StyledArrow = exports.StyledArrow = /*#__PURE__*/_styledComponents["default"].button.withConfig({
|
23
23
|
componentId: "plasma-new-hope__sc-1kj8wok-2"
|
24
|
-
})(["display:flex;cursor:pointer;border:none;background-color:transparent;
|
24
|
+
})(["display:flex;cursor:pointer;border:none;background-color:transparent;outline:none;", ";&[disabled]{cursor:not-allowed;}"], /*#__PURE__*/(0, _mixins.addFocus)({
|
25
25
|
outlineSize: '0.063rem',
|
26
26
|
outlineOffset: '-0.125rem',
|
27
27
|
outlineColor: /*#__PURE__*/"var(".concat(_tokens.tokens.outlineFocusColor, ")"),
|
28
28
|
outlineRadius: 'calc(var(--plasma_private-outline-radius) - 0.063rem)'
|
29
|
-
}));
|
29
|
+
}));
|
30
|
+
var StyledLeftArrow = exports.StyledLeftArrow = /*#__PURE__*/(0, _styledComponents["default"])(StyledArrow).withConfig({
|
31
|
+
componentId: "plasma-new-hope__sc-1kj8wok-3"
|
32
|
+
})(["padding:var(", ");padding-right:0;margin-right:0.1875rem;margin-left:0.125rem;"], _tokens.tokens.groupArrowPadding);
|
33
|
+
var StyledRightArrow = exports.StyledRightArrow = /*#__PURE__*/(0, _styledComponents["default"])(StyledArrow).withConfig({
|
34
|
+
componentId: "plasma-new-hope__sc-1kj8wok-4"
|
35
|
+
})(["padding:var(", ");padding-left:0;margin-left:0.1875rem;margin-right:0.125rem;"], _tokens.tokens.groupArrowPadding);
|
36
|
+
var StyledTopArrow = exports.StyledTopArrow = /*#__PURE__*/(0, _styledComponents["default"])(StyledArrow).withConfig({
|
37
|
+
componentId: "plasma-new-hope__sc-1kj8wok-5"
|
38
|
+
})(["padding:var(", ");padding-bottom:0;margin-bottom:0.1875rem;"], _tokens.tokens.groupVerticalArrowPadding);
|
39
|
+
var StyledBottomArrow = exports.StyledBottomArrow = /*#__PURE__*/(0, _styledComponents["default"])(StyledArrow).withConfig({
|
40
|
+
componentId: "plasma-new-hope__sc-1kj8wok-6"
|
41
|
+
})(["padding:var(", ");padding-top:0;margin-top:0.1875rem;"], _tokens.tokens.groupVerticalArrowPadding);
|
package/styled-components/cjs/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.js
CHANGED
@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
exports.base = void 0;
|
7
7
|
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
8
|
var _tokens = /*#__PURE__*/require("../../../../tokens");
|
9
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["
|
9
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["position:relative;&.", "{&:before{content:'';position:absolute;inset:-0.125rem;background-color:var(", ");}}"], /*#__PURE__*/String(_tokens.classes.segmentGroupFilledBackground), _tokens.tokens.groupFilledBackgroundColor);
|