@salutejs/plasma-new-hope 0.165.1-dev.0 → 0.166.0-canary.1392.11342835439.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Attach/Attach.js +8 -17
- package/cjs/components/Attach/Attach.js.map +1 -1
- 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_1tb4sy2.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 +18 -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_13rhpr7.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/Attach/Attach.js +8 -17
- package/emotion/cjs/components/Attach/Attach.template-doc.mdx +0 -69
- package/emotion/cjs/components/Segment/Segment.template-doc.mdx +3 -3
- 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 +18 -9
- package/emotion/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles.js +20 -6
- 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 +124 -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 +125 -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/Attach/Attach.js +8 -17
- package/emotion/es/components/Attach/Attach.template-doc.mdx +0 -69
- package/emotion/es/components/Segment/Segment.template-doc.mdx +3 -3
- 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 +19 -10
- package/emotion/es/components/Segment/ui/SegmentItem/SegmentItem.styles.js +20 -6
- 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 +124 -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 +125 -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/Attach/Attach.js +8 -17
- package/es/components/Attach/Attach.js.map +1 -1
- 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_1tb4sy2.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 +19 -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_13rhpr7.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/Attach/Attach.js +8 -17
- package/styled-components/cjs/components/Attach/Attach.template-doc.mdx +0 -69
- package/styled-components/cjs/components/Segment/Segment.template-doc.mdx +3 -3
- 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 +18 -9
- package/styled-components/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles.js +16 -4
- 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 +124 -42
- package/styled-components/cjs/examples/plasma_b2c/components/Segment/SegmentGroup.config.js +10 -7
- 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 +125 -42
- package/styled-components/cjs/examples/plasma_web/components/Segment/SegmentGroup.config.js +13 -7
- package/styled-components/cjs/examples/plasma_web/components/Segment/SegmentItem.config.js +8 -8
- package/styled-components/es/components/Attach/Attach.js +8 -17
- package/styled-components/es/components/Attach/Attach.template-doc.mdx +0 -69
- package/styled-components/es/components/Segment/Segment.template-doc.mdx +3 -3
- 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 +19 -10
- package/styled-components/es/components/Segment/ui/SegmentItem/SegmentItem.styles.js +16 -4
- 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 +124 -42
- package/styled-components/es/examples/plasma_b2c/components/Segment/SegmentGroup.config.js +10 -7
- 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 +125 -42
- package/styled-components/es/examples/plasma_web/components/Segment/SegmentGroup.config.js +13 -7
- package/styled-components/es/examples/plasma_web/components/Segment/SegmentItem.config.js +8 -8
- package/types/components/Attach/Attach.d.ts.map +1 -1
- package/types/components/Attach/Attach.types.d.ts +0 -4
- package/types/components/Attach/Attach.types.d.ts.map +1 -1
- 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 +10 -0
- 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 +19 -2
- 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 +8 -2
- 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 +14 -1
- 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 +10 -1
- 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 +13 -1
- 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
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Attach.js","sources":["../../../src/components/Attach/Attach.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport type { ChangeEvent } from 'react';\nimport { useForkRef, useIsomorphicLayoutEffect } from '@salutejs/plasma-core';\n\nimport { RootProps } from '../../engines';\nimport { cx } from '../../utils';\nimport { IconCloseCircleOutline } from '../_Icon';\n\nimport { AttachProps } from './Attach.types';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base, StyledHiddenInput, StyledHiddenInputHelper } from './Attach.styles';\nimport { StyledCell } from './ui/Cell/Cell';\nimport { extractExtension, getFileicon, addSeparator, separator } from './utils';\nimport { classes } from './Attach.tokens';\nimport { AttachButton } from './components/AttachButton';\nimport { StyledIconButtonCancel } from './ui/IconButton/IconButton.styles';\n\nexport const attachRoot = (Root: RootProps<HTMLDivElement, AttachProps>) =>\n forwardRef<HTMLDivElement, AttachProps>((props, outerRef) => {\n const {\n flow = 'auto',\n buttonType = 'button',\n hasAttachment = true,\n acceptedFileFormats,\n size,\n view,\n className,\n style,\n isLoading,\n disabled,\n id,\n name,\n onChange,\n onClear,\n ...rest\n } = props;\n\n const innerRef = useRef<HTMLDivElement>(null);\n const ref = useForkRef(outerRef, innerRef);\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n const inputHelperRef = useRef<HTMLDivElement | null>(null);\n const cellRef = useRef<HTMLDivElement | null>(null);\n const buttonRef = useRef<HTMLButtonElement | null>(null);\n\n const emptyTextCellWidth = useRef<number | null>(null);\n\n const [filename, setFilename] = useState<string>('');\n const [truncatedFilename, setTruncatedFilename] = useState<string>('');\n\n const horizontalClass = flow === 'horizontal' ? classes.horizontal : undefined;\n const verticalClass = flow === 'vertical' ? classes.vertical : undefined;\n const autoClass = flow === 'auto' ? classes.auto : undefined;\n const cellHiddenClass = truncatedFilename.length === 0 ? classes.cellHidden : undefined;\n\n const accept = acceptedFileFormats?.join(',');\n const extension = extractExtension(filename);\n const cellContentLeft = getFileicon(extension, size);\n\n useEffect(() => {\n emptyTextCellWidth.current = cellRef.current?.offsetWidth || 0;\n }, []);\n\n useIsomorphicLayoutEffect(() => {\n if (\n !cellRef.current ||\n !cellRef.current.parentElement ||\n !inputHelperRef.current ||\n !inputHelperRef.current.textContent ||\n !emptyTextCellWidth.current ||\n !buttonRef.current\n ) {\n return;\n }\n\n const { offsetWidth: textWidth } = inputHelperRef.current;\n const { offsetWidth: buttonWidth } = buttonRef.current;\n const { width: parentWidth, left: parentLeft } = cellRef.current.parentElement.getBoundingClientRect();\n const { left: cellLeft } = cellRef.current.getBoundingClientRect();\n const leftDiff = cellLeft - parentLeft;\n let currentTextWidth = textWidth;\n\n if (\n currentTextWidth + emptyTextCellWidth.current + leftDiff <= parentWidth ||\n currentTextWidth + emptyTextCellWidth.current < buttonWidth\n ) {\n setTruncatedFilename(filename);\n return;\n }\n\n let currFilename = addSeparator(filename, separator);\n for (let i = currFilename.indexOf(separator) - 1; i > 0; i -= 1) {\n if (currentTextWidth + emptyTextCellWidth.current + leftDiff <= parentWidth) {\n break;\n }\n\n const left = currFilename.slice(0, i);\n const right = currFilename.slice(i + 1);\n const newFilename = `${left}${right}`;\n inputHelperRef.current.textContent = newFilename;\n currentTextWidth = inputHelperRef.current.offsetWidth;\n\n if (currentTextWidth + emptyTextCellWidth.current < buttonWidth) {\n break;\n }\n\n currFilename = newFilename;\n }\n\n inputHelperRef.current.textContent = filename;\n setTruncatedFilename(currFilename);\n });\n\n const handleClick = () => {\n if (!inputRef.current) {\n return;\n }\n\n inputRef.current.click();\n };\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n if (!e.target.files) {\n return;\n }\n\n if (onChange) {\n onChange(e);\n }\n\n setFilename(e.target.files[0].name);\n };\n\n const handleClear = () => {\n if (!inputRef.current) {\n return;\n }\n\n if (onClear) {\n onClear();\n }\n\n inputRef.current.value = '';\n setFilename('');\n setTruncatedFilename('');\n };\n\n return (\n <Root\n className={cx(horizontalClass, verticalClass, autoClass, className)}\n style={style}\n size={size}\n view={view}\n ref={ref}\n >\n <StyledHiddenInput\n ref={inputRef}\n accept={accept}\n type=\"file\"\n id={id}\n name={name}\n onChange={handleChange}\n />\n <StyledHiddenInputHelper ref={inputHelperRef}>{filename}</StyledHiddenInputHelper>\n\n <AttachButton\n buttonType={buttonType}\n view={view}\n size={size}\n onClick={handleClick}\n isLoading={isLoading}\n disabled={disabled}\n ref={buttonRef}\n {...rest}\n />\n {hasAttachment && (\n <StyledCell\n stretching=\"fixed\"\n className={cellHiddenClass}\n ref={cellRef}\n size={size}\n title={truncatedFilename}\n contentLeft={cellContentLeft}\n contentRight={\n <StyledIconButtonCancel view={view} size={size} onClick={handleClear}>\n <IconCloseCircleOutline size=\"xs\" color=\"inherit\" />\n </StyledIconButtonCancel>\n }\n />\n )}\n </Root>\n );\n });\n\nexport const attachConfig = {\n name: 'Attach',\n tag: 'div',\n layout: attachRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n size: {\n css: sizeCSS,\n },\n },\n defaults: {\n view: 'default',\n size: 'm',\n },\n};\n"],"names":["attachRoot","Root","forwardRef","props","outerRef","_props$flow","flow","_props$buttonType","buttonType","_props$hasAttachment","hasAttachment","acceptedFileFormats","size","view","className","style","isLoading","disabled","id","name","onChange","onClear","rest","_objectWithoutProperties","_excluded","innerRef","useRef","ref","useForkRef","inputRef","inputHelperRef","cellRef","buttonRef","emptyTextCellWidth","_useState","useState","_useState2","_slicedToArray","filename","setFilename","_useState3","_useState4","truncatedFilename","setTruncatedFilename","horizontalClass","classes","horizontal","undefined","verticalClass","vertical","autoClass","auto","cellHiddenClass","length","cellHidden","accept","join","extension","extractExtension","cellContentLeft","getFileicon","useEffect","_cellRef$current","current","offsetWidth","useIsomorphicLayoutEffect","parentElement","textContent","textWidth","buttonWidth","_cellRef$current$pare","getBoundingClientRect","parentWidth","width","parentLeft","left","_cellRef$current$getB","cellLeft","leftDiff","currentTextWidth","currFilename","addSeparator","separator","i","indexOf","slice","right","newFilename","concat","handleClick","click","handleChange","e","target","files","handleClear","value","React","createElement","cx","StyledHiddenInput","type","StyledHiddenInputHelper","AttachButton","_extends","onClick","StyledCell","stretching","title","contentLeft","contentRight","StyledIconButtonCancel","_IconCloseCircleOutli","IconCloseCircleOutline","color","attachConfig","tag","layout","base","variations","css","viewCSS","sizeCSS","defaults"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"Attach.js","sources":["../../../src/components/Attach/Attach.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport { useForkRef, useIsomorphicLayoutEffect } from '@salutejs/plasma-core';\n\nimport { RootProps } from '../../engines';\nimport { cx } from '../../utils';\nimport { IconCloseCircleOutline } from '../_Icon';\n\nimport { AttachProps } from './Attach.types';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base, StyledHiddenInput, StyledHiddenInputHelper } from './Attach.styles';\nimport { StyledCell } from './ui/Cell/Cell';\nimport { extractExtension, getFileicon, addSeparator, separator } from './utils';\nimport { classes } from './Attach.tokens';\nimport { AttachButton } from './components/AttachButton';\nimport { StyledIconButtonCancel } from './ui/IconButton/IconButton.styles';\n\nexport const attachRoot = (Root: RootProps<HTMLDivElement, AttachProps>) =>\n forwardRef<HTMLDivElement, AttachProps>((props, outerRef) => {\n const {\n flow = 'auto',\n buttonType = 'button',\n hasAttachment = true,\n acceptedFileFormats,\n size,\n view,\n className,\n style,\n isLoading,\n disabled,\n ...rest\n } = props;\n\n const innerRef = useRef<HTMLDivElement>(null);\n const ref = useForkRef(outerRef, innerRef);\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n const inputHelperRef = useRef<HTMLDivElement | null>(null);\n const cellRef = useRef<HTMLDivElement | null>(null);\n const buttonRef = useRef<HTMLButtonElement | null>(null);\n\n const emptyTextCellWidth = useRef<number | null>(null);\n\n const [filename, setFilename] = useState<string>('');\n const [truncatedFilename, setTruncatedFilename] = useState<string>('');\n\n const horizontalClass = flow === 'horizontal' ? classes.horizontal : undefined;\n const verticalClass = flow === 'vertical' ? classes.vertical : undefined;\n const autoClass = flow === 'auto' ? classes.auto : undefined;\n const cellHiddenClass = truncatedFilename.length === 0 ? classes.cellHidden : undefined;\n\n const accept = acceptedFileFormats?.join(',');\n const extension = extractExtension(filename);\n const cellContentLeft = getFileicon(extension, size);\n\n useEffect(() => {\n emptyTextCellWidth.current = cellRef.current?.offsetWidth || 0;\n }, []);\n\n useIsomorphicLayoutEffect(() => {\n if (\n !cellRef.current ||\n !cellRef.current.parentElement ||\n !inputHelperRef.current ||\n !inputHelperRef.current.textContent ||\n !emptyTextCellWidth.current ||\n !buttonRef.current\n ) {\n return;\n }\n\n const { offsetWidth: textWidth } = inputHelperRef.current;\n const { offsetWidth: buttonWidth } = buttonRef.current;\n const { width: parentWidth, left: parentLeft } = cellRef.current.parentElement.getBoundingClientRect();\n const { left: cellLeft } = cellRef.current.getBoundingClientRect();\n const leftDiff = cellLeft - parentLeft;\n let currentTextWidth = textWidth;\n\n if (\n currentTextWidth + emptyTextCellWidth.current + leftDiff <= parentWidth ||\n currentTextWidth + emptyTextCellWidth.current < buttonWidth\n ) {\n setTruncatedFilename(filename);\n return;\n }\n\n let currFilename = addSeparator(filename, separator);\n for (let i = currFilename.indexOf(separator) - 1; i > 0; i -= 1) {\n if (currentTextWidth + emptyTextCellWidth.current + leftDiff <= parentWidth) {\n break;\n }\n\n const left = currFilename.slice(0, i);\n const right = currFilename.slice(i + 1);\n const newFilename = `${left}${right}`;\n inputHelperRef.current.textContent = newFilename;\n currentTextWidth = inputHelperRef.current.offsetWidth;\n\n if (currentTextWidth + emptyTextCellWidth.current < buttonWidth) {\n break;\n }\n\n currFilename = newFilename;\n }\n\n inputHelperRef.current.textContent = filename;\n setTruncatedFilename(currFilename);\n });\n\n const handleClick = () => {\n if (!inputRef.current) {\n return;\n }\n\n inputRef.current.click();\n };\n\n const handleChange = () => {\n if (!inputRef.current || !inputRef.current.files) {\n return;\n }\n\n setFilename(inputRef.current.files[0].name);\n };\n\n const handleClear = () => {\n if (!inputRef.current) {\n return;\n }\n\n inputRef.current.value = '';\n setFilename('');\n setTruncatedFilename('');\n };\n\n return (\n <Root\n className={cx(horizontalClass, verticalClass, autoClass, className)}\n style={style}\n size={size}\n view={view}\n ref={ref}\n >\n <StyledHiddenInput\n ref={inputRef}\n accept={accept}\n type=\"file\"\n id=\"attachHiddenInput\"\n name=\"attachHiddenInput\"\n onChange={handleChange}\n />\n <StyledHiddenInputHelper ref={inputHelperRef} id=\"attachHiddenInputHelper\">\n {filename}\n </StyledHiddenInputHelper>\n\n <AttachButton\n buttonType={buttonType}\n view={view}\n size={size}\n onClick={handleClick}\n isLoading={isLoading}\n disabled={disabled}\n ref={buttonRef}\n {...rest}\n />\n {hasAttachment && (\n <StyledCell\n stretching=\"fixed\"\n className={cellHiddenClass}\n ref={cellRef}\n size={size}\n title={truncatedFilename}\n contentLeft={cellContentLeft}\n contentRight={\n <StyledIconButtonCancel view={view} size={size} onClick={handleClear}>\n <IconCloseCircleOutline size=\"xs\" color=\"inherit\" />\n </StyledIconButtonCancel>\n }\n />\n )}\n </Root>\n );\n });\n\nexport const attachConfig = {\n name: 'Attach',\n tag: 'div',\n layout: attachRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n size: {\n css: sizeCSS,\n },\n },\n defaults: {\n view: 'default',\n size: 'm',\n },\n};\n"],"names":["attachRoot","Root","forwardRef","props","outerRef","_props$flow","flow","_props$buttonType","buttonType","_props$hasAttachment","hasAttachment","acceptedFileFormats","size","view","className","style","isLoading","disabled","rest","_objectWithoutProperties","_excluded","innerRef","useRef","ref","useForkRef","inputRef","inputHelperRef","cellRef","buttonRef","emptyTextCellWidth","_useState","useState","_useState2","_slicedToArray","filename","setFilename","_useState3","_useState4","truncatedFilename","setTruncatedFilename","horizontalClass","classes","horizontal","undefined","verticalClass","vertical","autoClass","auto","cellHiddenClass","length","cellHidden","accept","join","extension","extractExtension","cellContentLeft","getFileicon","useEffect","_cellRef$current","current","offsetWidth","useIsomorphicLayoutEffect","parentElement","textContent","textWidth","buttonWidth","_cellRef$current$pare","getBoundingClientRect","parentWidth","width","parentLeft","left","_cellRef$current$getB","cellLeft","leftDiff","currentTextWidth","currFilename","addSeparator","separator","i","indexOf","slice","right","newFilename","concat","handleClick","click","handleChange","files","name","handleClear","value","React","createElement","cx","StyledHiddenInput","type","id","onChange","StyledHiddenInputHelper","AttachButton","_extends","onClick","StyledCell","stretching","title","contentLeft","contentRight","StyledIconButtonCancel","_IconCloseCircleOutli","IconCloseCircleOutline","color","attachConfig","tag","layout","base","variations","css","viewCSS","sizeCSS","defaults"],"mappings":"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"}
|
@@ -1,8 +1,8 @@
|
|
1
1
|
import React, { useCallback, useMemo } from 'react';
|
2
|
+
import '@linaria/react';
|
2
3
|
import { IconDisclosureLeft } from '../../../_Icon/Icons/IconDisclosureLeft.js';
|
3
4
|
import { IconDisclosureRight } from '../../../_Icon/Icons/IconDisclosureRight.js';
|
4
5
|
import { IconDisclosureDownFill } from '../../../_Icon/Icons/IconDisclosureDownFill.js';
|
5
|
-
import '@linaria/react';
|
6
6
|
import { CalendarState } from '../../store/types.js';
|
7
7
|
import { MONTH_NAMES, YEAR_RENDER_COUNT } from '../../utils/constants.js';
|
8
8
|
import { getCalendarType } from '../../utils/calendarGridHelper.js';
|
@@ -2,7 +2,12 @@ var classes = {
|
|
2
2
|
selectedSegmentItem: 'selected-segment-item',
|
3
3
|
segmentPilled: 'segment-pilled',
|
4
4
|
segmentGroupFilledBackground: 'segment-group-filled-background',
|
5
|
-
segmentStretch: 'segment-stretched'
|
5
|
+
segmentStretch: 'segment-stretched',
|
6
|
+
segmentVertical: 'segment-vertical',
|
7
|
+
segmentArrowPadding: 'segment-arrow-padding',
|
8
|
+
segmentGroupClipScroll: 'segment-group-clip-scroll',
|
9
|
+
segmentXsSize: 'segment-xs-size',
|
10
|
+
segmentAdditionalText: 'segment-additional-text'
|
6
11
|
};
|
7
12
|
var tokens = {
|
8
13
|
fontFamily: '--plasma-segment-item-font-family',
|
@@ -17,6 +22,8 @@ var tokens = {
|
|
17
22
|
groupPilledBorderRadius: '--plasma-segment-group-pilled-border-radius',
|
18
23
|
groupWidth: '--plasma-segment-group-width',
|
19
24
|
groupHeight: '--plasma-segment-group-height',
|
25
|
+
groupArrowPadding: '--plasma-segment-group-arrow-padding',
|
26
|
+
groupVerticalArrowPadding: '--plasma-segment-group-vertical-arrow-padding',
|
20
27
|
groupBackgroundColor: '--plasma-segment-group-background-color',
|
21
28
|
groupFilledBackgroundColor: '--plasma-segment-group-filled-background-color',
|
22
29
|
itemBorderRadius: '--plasma-segment-item-border-radius',
|
@@ -24,15 +31,22 @@ var tokens = {
|
|
24
31
|
itemWidth: '--plasma-segment-item-width',
|
25
32
|
itemHeight: '--plasma-segment-item-height',
|
26
33
|
itemPadding: '--plasma-segment-item-padding',
|
34
|
+
itemPilledPadding: '--plasma-segment-item-pilled-padding',
|
27
35
|
itemMarginLeft: '--plasma-segment-item-margin-left',
|
36
|
+
itemContentPadding: '--plasma-segment-item-content-padding',
|
37
|
+
itemIconMargin: '--plasma-segment-item-content-icon-margin',
|
28
38
|
itemColor: '--plasma-segment-item-color',
|
29
39
|
itemBackgroundColor: '--plasma-segment-item-background-color',
|
30
40
|
itemColorHover: '--plasma-segment-item-color-hover',
|
31
41
|
itemBackgroundColorHover: '--plasma-segment-item-background-color-hover',
|
42
|
+
itemAdditionalColor: '--plasma-segment-item-additional-color',
|
43
|
+
itemAdditionalColorHover: '--plasma-segment-item-additional-color-hover',
|
32
44
|
itemSelectedColor: '--plasma-segment-item-selected-color',
|
33
45
|
itemSelectedBackgroundColor: '--plasma-segment-item-selected-background-color',
|
34
46
|
itemSelectedColorHover: '--plasma-segment-item-selected-color-hover',
|
35
47
|
itemSelectedBackgroundColorHover: '--plasma-segment-item-selected-background-color-hover',
|
48
|
+
itemSelectedAdditionalColor: '--plasma-segment-item-selected-additional-color',
|
49
|
+
itemSelectedAdditionalColorHover: '--plasma-segment-item-selected-additional-color-hover',
|
36
50
|
disabledOpacity: '--plasma-segment-disabled-opacity'
|
37
51
|
};
|
38
52
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"tokens.js","sources":["../../../src/components/Segment/tokens.ts"],"sourcesContent":["export const classes = {\n selectedSegmentItem: 'selected-segment-item',\n segmentPilled: 'segment-pilled',\n segmentGroupFilledBackground: 'segment-group-filled-background',\n segmentStretch: 'segment-stretched',\n};\n\nexport const tokens = {\n fontFamily: '--plasma-segment-item-font-family',\n fontSize: '--plasma-segment-item-font-size',\n fontStyle: '--plasma-segment-item-font-style',\n fontWeight: '--plasma-segment-item-font-weight',\n letterSpacing: '--plasma-segment-item-letter-spacing',\n lineHeight: '--plasma-segment-item-lineheight',\n\n outlineFocusColor: '--plasma-segment-outline-focus-color',\n\n arrowColor: '--plasma-segment-arrow-color',\n\n groupBorderRadius: '--plasma-segment-group-border-radius',\n groupPilledBorderRadius: '--plasma-segment-group-pilled-border-radius',\n groupWidth: '--plasma-segment-group-width',\n groupHeight: '--plasma-segment-group-height',\n\n groupBackgroundColor: '--plasma-segment-group-background-color',\n groupFilledBackgroundColor: '--plasma-segment-group-filled-background-color',\n\n itemBorderRadius: '--plasma-segment-item-border-radius',\n itemPilledBorderRadius: '--plasma-segment-item-pilled-border-radius',\n itemWidth: '--plasma-segment-item-width',\n itemHeight: '--plasma-segment-item-height',\n itemPadding: '--plasma-segment-item-padding',\n itemMarginLeft: '--plasma-segment-item-margin-left',\n\n itemColor: '--plasma-segment-item-color',\n itemBackgroundColor: '--plasma-segment-item-background-color',\n itemColorHover: '--plasma-segment-item-color-hover',\n itemBackgroundColorHover: '--plasma-segment-item-background-color-hover',\n\n itemSelectedColor: '--plasma-segment-item-selected-color',\n itemSelectedBackgroundColor: '--plasma-segment-item-selected-background-color',\n itemSelectedColorHover: '--plasma-segment-item-selected-color-hover',\n itemSelectedBackgroundColorHover: '--plasma-segment-item-selected-background-color-hover',\n\n disabledOpacity: '--plasma-segment-disabled-opacity',\n};\n"],"names":["classes","selectedSegmentItem","segmentPilled","segmentGroupFilledBackground","segmentStretch","tokens","fontFamily","fontSize","fontStyle","fontWeight","letterSpacing","lineHeight","outlineFocusColor","arrowColor","groupBorderRadius","groupPilledBorderRadius","groupWidth","groupHeight","groupBackgroundColor","groupFilledBackgroundColor","itemBorderRadius","itemPilledBorderRadius","itemWidth","itemHeight","itemPadding","itemMarginLeft","itemColor","itemBackgroundColor","itemColorHover","itemBackgroundColorHover","itemSelectedColor","itemSelectedBackgroundColor","itemSelectedColorHover","itemSelectedBackgroundColorHover","disabledOpacity"],"mappings":"AAAO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,mBAAmB,EAAE,uBAAuB;AAC5CC,EAAAA,aAAa,EAAE,gBAAgB;AAC/BC,EAAAA,4BAA4B,EAAE,iCAAiC;AAC/DC,EAAAA,cAAc,EAAE,
|
1
|
+
{"version":3,"file":"tokens.js","sources":["../../../src/components/Segment/tokens.ts"],"sourcesContent":["export const classes = {\n selectedSegmentItem: 'selected-segment-item',\n segmentPilled: 'segment-pilled',\n segmentGroupFilledBackground: 'segment-group-filled-background',\n segmentStretch: 'segment-stretched',\n segmentVertical: 'segment-vertical',\n segmentArrowPadding: 'segment-arrow-padding',\n segmentGroupClipScroll: 'segment-group-clip-scroll',\n segmentXsSize: 'segment-xs-size',\n segmentAdditionalText: 'segment-additional-text',\n};\n\nexport const tokens = {\n fontFamily: '--plasma-segment-item-font-family',\n fontSize: '--plasma-segment-item-font-size',\n fontStyle: '--plasma-segment-item-font-style',\n fontWeight: '--plasma-segment-item-font-weight',\n letterSpacing: '--plasma-segment-item-letter-spacing',\n lineHeight: '--plasma-segment-item-lineheight',\n\n outlineFocusColor: '--plasma-segment-outline-focus-color',\n\n arrowColor: '--plasma-segment-arrow-color',\n\n groupBorderRadius: '--plasma-segment-group-border-radius',\n groupPilledBorderRadius: '--plasma-segment-group-pilled-border-radius',\n groupWidth: '--plasma-segment-group-width',\n groupHeight: '--plasma-segment-group-height',\n groupArrowPadding: '--plasma-segment-group-arrow-padding',\n groupVerticalArrowPadding: '--plasma-segment-group-vertical-arrow-padding',\n\n groupBackgroundColor: '--plasma-segment-group-background-color',\n groupFilledBackgroundColor: '--plasma-segment-group-filled-background-color',\n\n itemBorderRadius: '--plasma-segment-item-border-radius',\n itemPilledBorderRadius: '--plasma-segment-item-pilled-border-radius',\n itemWidth: '--plasma-segment-item-width',\n itemHeight: '--plasma-segment-item-height',\n itemPadding: '--plasma-segment-item-padding',\n itemPilledPadding: '--plasma-segment-item-pilled-padding',\n itemMarginLeft: '--plasma-segment-item-margin-left',\n itemContentPadding: '--plasma-segment-item-content-padding',\n itemIconMargin: '--plasma-segment-item-content-icon-margin',\n\n itemColor: '--plasma-segment-item-color',\n itemBackgroundColor: '--plasma-segment-item-background-color',\n itemColorHover: '--plasma-segment-item-color-hover',\n itemBackgroundColorHover: '--plasma-segment-item-background-color-hover',\n itemAdditionalColor: '--plasma-segment-item-additional-color',\n itemAdditionalColorHover: '--plasma-segment-item-additional-color-hover',\n\n itemSelectedColor: '--plasma-segment-item-selected-color',\n itemSelectedBackgroundColor: '--plasma-segment-item-selected-background-color',\n itemSelectedColorHover: '--plasma-segment-item-selected-color-hover',\n itemSelectedBackgroundColorHover: '--plasma-segment-item-selected-background-color-hover',\n itemSelectedAdditionalColor: '--plasma-segment-item-selected-additional-color',\n itemSelectedAdditionalColorHover: '--plasma-segment-item-selected-additional-color-hover',\n\n disabledOpacity: '--plasma-segment-disabled-opacity',\n};\n"],"names":["classes","selectedSegmentItem","segmentPilled","segmentGroupFilledBackground","segmentStretch","segmentVertical","segmentArrowPadding","segmentGroupClipScroll","segmentXsSize","segmentAdditionalText","tokens","fontFamily","fontSize","fontStyle","fontWeight","letterSpacing","lineHeight","outlineFocusColor","arrowColor","groupBorderRadius","groupPilledBorderRadius","groupWidth","groupHeight","groupArrowPadding","groupVerticalArrowPadding","groupBackgroundColor","groupFilledBackgroundColor","itemBorderRadius","itemPilledBorderRadius","itemWidth","itemHeight","itemPadding","itemPilledPadding","itemMarginLeft","itemContentPadding","itemIconMargin","itemColor","itemBackgroundColor","itemColorHover","itemBackgroundColorHover","itemAdditionalColor","itemAdditionalColorHover","itemSelectedColor","itemSelectedBackgroundColor","itemSelectedColorHover","itemSelectedBackgroundColorHover","itemSelectedAdditionalColor","itemSelectedAdditionalColorHover","disabledOpacity"],"mappings":"AAAO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,mBAAmB,EAAE,uBAAuB;AAC5CC,EAAAA,aAAa,EAAE,gBAAgB;AAC/BC,EAAAA,4BAA4B,EAAE,iCAAiC;AAC/DC,EAAAA,cAAc,EAAE,mBAAmB;AACnCC,EAAAA,eAAe,EAAE,kBAAkB;AACnCC,EAAAA,mBAAmB,EAAE,uBAAuB;AAC5CC,EAAAA,sBAAsB,EAAE,2BAA2B;AACnDC,EAAAA,aAAa,EAAE,iBAAiB;AAChCC,EAAAA,qBAAqB,EAAE,yBAAA;AAC3B,EAAC;AAEM,IAAMC,MAAM,GAAG;AAClBC,EAAAA,UAAU,EAAE,mCAAmC;AAC/CC,EAAAA,QAAQ,EAAE,iCAAiC;AAC3CC,EAAAA,SAAS,EAAE,kCAAkC;AAC7CC,EAAAA,UAAU,EAAE,mCAAmC;AAC/CC,EAAAA,aAAa,EAAE,sCAAsC;AACrDC,EAAAA,UAAU,EAAE,kCAAkC;AAE9CC,EAAAA,iBAAiB,EAAE,sCAAsC;AAEzDC,EAAAA,UAAU,EAAE,8BAA8B;AAE1CC,EAAAA,iBAAiB,EAAE,sCAAsC;AACzDC,EAAAA,uBAAuB,EAAE,6CAA6C;AACtEC,EAAAA,UAAU,EAAE,8BAA8B;AAC1CC,EAAAA,WAAW,EAAE,+BAA+B;AAC5CC,EAAAA,iBAAiB,EAAE,sCAAsC;AACzDC,EAAAA,yBAAyB,EAAE,+CAA+C;AAE1EC,EAAAA,oBAAoB,EAAE,yCAAyC;AAC/DC,EAAAA,0BAA0B,EAAE,gDAAgD;AAE5EC,EAAAA,gBAAgB,EAAE,qCAAqC;AACvDC,EAAAA,sBAAsB,EAAE,4CAA4C;AACpEC,EAAAA,SAAS,EAAE,6BAA6B;AACxCC,EAAAA,UAAU,EAAE,8BAA8B;AAC1CC,EAAAA,WAAW,EAAE,+BAA+B;AAC5CC,EAAAA,iBAAiB,EAAE,sCAAsC;AACzDC,EAAAA,cAAc,EAAE,mCAAmC;AACnDC,EAAAA,kBAAkB,EAAE,uCAAuC;AAC3DC,EAAAA,cAAc,EAAE,2CAA2C;AAE3DC,EAAAA,SAAS,EAAE,6BAA6B;AACxCC,EAAAA,mBAAmB,EAAE,wCAAwC;AAC7DC,EAAAA,cAAc,EAAE,mCAAmC;AACnDC,EAAAA,wBAAwB,EAAE,8CAA8C;AACxEC,EAAAA,mBAAmB,EAAE,wCAAwC;AAC7DC,EAAAA,wBAAwB,EAAE,8CAA8C;AAExEC,EAAAA,iBAAiB,EAAE,sCAAsC;AACzDC,EAAAA,2BAA2B,EAAE,iDAAiD;AAC9EC,EAAAA,sBAAsB,EAAE,4CAA4C;AACpEC,EAAAA,gCAAgC,EAAE,uDAAuD;AACzFC,EAAAA,2BAA2B,EAAE,iDAAiD;AAC9EC,EAAAA,gCAAgC,EAAE,uDAAuD;AAEzFC,EAAAA,eAAe,EAAE,mCAAA;AACrB;;;;"}
|
@@ -1,18 +1,24 @@
|
|
1
1
|
.IconRoot_7pl7ig_svvlqhf__32c458a1{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:var(--svvlqhf-0);height:var(--svvlqhf-0);-webkit-flex:0 0 var(--svvlqhf-0);-ms-flex:0 0 var(--svvlqhf-0);flex:0 0 var(--svvlqhf-0);}
|
2
2
|
|
3
|
-
.
|
3
|
+
.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);}
|
4
4
|
|
5
5
|
.base_hsx1sr_bo2wq9n__1e99adcc{background-color:var(--plasma-segment-group-background-color);}
|
6
6
|
|
7
7
|
.base_1n8kaiq_bvqq8jn__3fd538b8[disabled]{opacity:var(--plasma-segment-disabled-opacity);cursor:not-allowed;}
|
8
8
|
|
9
|
-
.
|
9
|
+
.base_pxl3nb_b1re0ohg__002ee1a3.base_pxl3nb_segmentPilled__002ee1a3:before{border-radius:var(--plasma-segment-group-pilled-border-radius);}
|
10
10
|
|
11
|
-
.
|
11
|
+
.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);}
|
12
12
|
|
13
13
|
.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%;}
|
14
14
|
|
15
|
-
.
|
16
|
-
|
17
|
-
.
|
18
|
-
.
|
15
|
+
.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;}
|
16
|
+
|
17
|
+
.SegmentGroup_styles_1tb4sy2_b2sori2__62a256d9{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_1tb4sy2_b2sori2__62a256d9:before{border-radius:var(--plasma-segment-group-border-radius);}
|
18
|
+
.SegmentGroup_styles_1tb4sy2_sin9wo2__62a256d9{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%;}
|
19
|
+
.SegmentGroup_styles_1tb4sy2_spuzt9m__62a256d9{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;}.SegmentGroup_styles_1tb4sy2_spuzt9m__62a256d9.SegmentGroup_styles_1tb4sy2_segmentGroupClipScroll__62a256d9{overflow:scroll;-webkit-scroll-padding:0.25rem;-moz-scroll-padding:0.25rem;-ms-scroll-padding:0.25rem;scroll-padding:0.25rem;overscroll-behavior:contain;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}.SegmentGroup_styles_1tb4sy2_spuzt9m__62a256d9.SegmentGroup_styles_1tb4sy2_segmentGroupClipScroll__62a256d9::-webkit-scrollbar{display:none;}.SegmentGroup_styles_1tb4sy2_spuzt9m__62a256d9.SegmentGroup_styles_1tb4sy2_segmentGroupClipScroll__62a256d9 .SegmentGroup_styles_1tb4sy2_sin9wo2__62a256d9{max-width:none;}
|
20
|
+
.SegmentGroup_styles_1tb4sy2_s1qf4oye__62a256d9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;border:none;background-color:transparent;outline:none;position:relative;}.SegmentGroup_styles_1tb4sy2_s1qf4oye__62a256d9::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_1tb4sy2_s1qf4oye__62a256d9.SegmentGroup_styles_1tb4sy2_focusVisible__62a256d9:focus::before,.SegmentGroup_styles_1tb4sy2_s1qf4oye__62a256d9[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-segment-outline-focus-color);}.SegmentGroup_styles_1tb4sy2_s1qf4oye__62a256d9[disabled]{cursor:not-allowed;}
|
21
|
+
.SegmentGroup_styles_1tb4sy2_s3pgccr__62a256d9.SegmentGroup_styles_1tb4sy2_s1qf4oye__62a256d9{padding:var(--plasma-segment-group-arrow-padding);padding-right:0;margin-right:0.1875rem;margin-left:0.125rem;}
|
22
|
+
.SegmentGroup_styles_1tb4sy2_sax6mvm__62a256d9.SegmentGroup_styles_1tb4sy2_s1qf4oye__62a256d9{padding:var(--plasma-segment-group-arrow-padding);padding-left:0;margin-left:0.1875rem;margin-right:0.125rem;}
|
23
|
+
.SegmentGroup_styles_1tb4sy2_s1n81rr8__62a256d9.SegmentGroup_styles_1tb4sy2_s1qf4oye__62a256d9{padding:var(--plasma-segment-group-vertical-arrow-padding);padding-bottom:0;margin-bottom:0.1875rem;}
|
24
|
+
.SegmentGroup_styles_1tb4sy2_s7ukuvj__62a256d9.SegmentGroup_styles_1tb4sy2_s1qf4oye__62a256d9{padding:var(--plasma-segment-group-vertical-arrow-padding);padding-top:0;margin-top:0.1875rem;}
|
@@ -1,9 +1,11 @@
|
|
1
1
|
import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
|
2
|
-
import React, { forwardRef,
|
3
|
-
import { safeUseId
|
4
|
-
import {
|
5
|
-
import { IconDisclosureRight } from '../../../_Icon/Icons/IconDisclosureRight.js';
|
2
|
+
import React, { forwardRef, useRef, useState, useCallback, useEffect, useMemo } from 'react';
|
3
|
+
import { safeUseId } from '@salutejs/plasma-core';
|
4
|
+
import { IconDisclosureLeftWithOffset } from '../../../_Icon/Icons/IconDisclosureLeftWithOffset.js';
|
6
5
|
import '@linaria/react';
|
6
|
+
import { IconDisclosureRightWithOffset } from '../../../_Icon/Icons/IconDisclosureRightWithOffset.js';
|
7
|
+
import { IconDisclosureDownWithOffset } from '../../../_Icon/Icons/IconDisclosureDownWithOffset.js';
|
8
|
+
import { IconDisclosureUpWithOffset } from '../../../_Icon/Icons/IconDisclosureUpWithOffset.js';
|
7
9
|
import { tokens, classes } from '../../tokens.js';
|
8
10
|
import { cx } from '../../../../utils/index.js';
|
9
11
|
import { useSegmentInner } from '../../SegmentProvider/SegmentProvider.js';
|
@@ -11,151 +13,237 @@ import { base as base$1 } from './variations/_size/base.js';
|
|
11
13
|
import { base as base$2 } from './variations/_view/base.js';
|
12
14
|
import { base as base$3 } from './variations/_disabled/base.js';
|
13
15
|
import { base as base$4 } from './variations/_pilled/base.js';
|
14
|
-
import { base as base$
|
16
|
+
import { base as base$7 } from './variations/_filledBackgound/base.js';
|
15
17
|
import { base as base$5 } from './variations/_stretch/base.js';
|
16
|
-
import {
|
18
|
+
import { base as base$6 } from './variations/_orientation/base.js';
|
19
|
+
import { StyledContentWrapper, StyledContent, base, StyledTopArrow, StyledLeftArrow, StyledBottomArrow, StyledRightArrow } from './SegmentGroup.styles.js';
|
17
20
|
|
18
|
-
var _excluded = ["id", "selectionMode", "pilled", "stretch", "filledBackground", "disabled", "size", "view", "children"];
|
21
|
+
var _excluded = ["id", "selectionMode", "pilled", "stretch", "clip", "orientation", "filledBackground", "hasBackground", "disabled", "size", "view", "children"];
|
22
|
+
var Keys = /*#__PURE__*/function (Keys) {
|
23
|
+
Keys[Keys["end"] = 35] = "end";
|
24
|
+
Keys[Keys["home"] = 36] = "home";
|
25
|
+
Keys[Keys["left"] = 37] = "left";
|
26
|
+
Keys[Keys["right"] = 39] = "right";
|
27
|
+
return Keys;
|
28
|
+
}(Keys || {});
|
29
|
+
var getChildNodes = function getChildNodes(wrapper) {
|
30
|
+
var container = wrapper === null || wrapper === void 0 ? void 0 : wrapper.firstChild;
|
31
|
+
return container ? Array.from(container === null || container === void 0 ? void 0 : container.childNodes) : [];
|
32
|
+
};
|
19
33
|
var segmentGroupRoot = function segmentGroupRoot(Root) {
|
20
34
|
return /*#__PURE__*/forwardRef(function (props, outerRef) {
|
21
35
|
var id = props.id,
|
22
36
|
selectionMode = props.selectionMode,
|
23
37
|
pilled = props.pilled,
|
24
38
|
stretch = props.stretch,
|
39
|
+
_props$clip = props.clip,
|
40
|
+
clip = _props$clip === void 0 ? true : _props$clip,
|
41
|
+
_props$orientation = props.orientation,
|
42
|
+
orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
|
25
43
|
_props$filledBackgrou = props.filledBackground,
|
26
44
|
filledBackground = _props$filledBackgrou === void 0 ? false : _props$filledBackgrou,
|
45
|
+
_props$hasBackground = props.hasBackground,
|
46
|
+
hasBackground = _props$hasBackground === void 0 ? false : _props$hasBackground,
|
27
47
|
_props$disabled = props.disabled,
|
28
48
|
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
29
49
|
size = props.size,
|
30
50
|
view = props.view,
|
31
51
|
children = props.children,
|
32
52
|
rest = _objectWithoutProperties(props, _excluded);
|
53
|
+
var scrollRef = useRef(null);
|
54
|
+
var trackRef = useRef(null);
|
55
|
+
var leftArrowRef = useRef(null);
|
33
56
|
var _useSegmentInner = useSegmentInner(),
|
34
57
|
setSelectionMode = _useSegmentInner.setSelectionMode,
|
35
58
|
setDisabledGroup = _useSegmentInner.setDisabledGroup;
|
36
|
-
var _useState = useState(
|
59
|
+
var _useState = useState(true),
|
37
60
|
_useState2 = _slicedToArray(_useState, 2),
|
38
|
-
|
39
|
-
|
40
|
-
var _useState3 = useState(
|
61
|
+
firstItemVisible = _useState2[0],
|
62
|
+
setFirstItemVisible = _useState2[1];
|
63
|
+
var _useState3 = useState(true),
|
41
64
|
_useState4 = _slicedToArray(_useState3, 2),
|
42
|
-
|
43
|
-
|
44
|
-
var _useState5 = useState(false),
|
45
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
46
|
-
lastItemVisible = _useState6[0],
|
47
|
-
setLastItemVisible = _useState6[1];
|
65
|
+
lastItemVisible = _useState4[0],
|
66
|
+
setLastItemVisible = _useState4[1];
|
48
67
|
var uniqId = safeUseId();
|
49
68
|
var segmentGroupId = id || uniqId;
|
50
|
-
var
|
51
|
-
var
|
69
|
+
var canClip = clip && !stretch;
|
70
|
+
var isVertical = orientation === 'vertical';
|
71
|
+
var stretchClass = (clip ? firstItemVisible && lastItemVisible : true) && stretch ? classes.segmentStretch : undefined;
|
72
|
+
var orientationClass = isVertical ? classes.segmentVertical : undefined;
|
73
|
+
var clipScrollClass = canClip ? classes.segmentGroupClipScroll : undefined;
|
74
|
+
var pilledAttr = (view !== 'clear' || hasBackground) && pilled;
|
75
|
+
var filledBackgroundAttr = view !== 'clear' && filledBackground || hasBackground;
|
52
76
|
var pilledClass = pilledAttr ? classes.segmentPilled : undefined;
|
53
77
|
var filledClass = filledBackgroundAttr ? classes.segmentGroupFilledBackground : undefined;
|
54
|
-
var stretchClass = firstItemVisible && lastItemVisible && stretch ? classes.segmentStretch : undefined;
|
55
|
-
var items = (Children === null || Children === void 0 ? void 0 : Children.map(children, function (child) {
|
56
|
-
return child;
|
57
|
-
})) || [];
|
58
78
|
var onPrev = useCallback(function () {
|
59
|
-
|
60
|
-
return
|
79
|
+
if (disabled || !scrollRef.current) {
|
80
|
+
return;
|
81
|
+
}
|
82
|
+
var childNodes = getChildNodes(scrollRef.current);
|
83
|
+
var scrollLeft = Math.round(scrollRef.current.scrollLeft);
|
84
|
+
var firstOverflowingTab = childNodes.slice().reverse().find(function (child) {
|
85
|
+
if (!child || child.offsetLeft === undefined) {
|
86
|
+
return;
|
87
|
+
}
|
88
|
+
var tabStartX = child.offsetLeft;
|
89
|
+
return tabStartX < scrollLeft;
|
61
90
|
});
|
62
|
-
|
91
|
+
firstOverflowingTab === null || firstOverflowingTab === void 0 || firstOverflowingTab.scrollIntoView({
|
92
|
+
block: 'nearest',
|
93
|
+
inline: 'nearest'
|
94
|
+
});
|
95
|
+
}, [disabled, scrollRef]);
|
63
96
|
var onNext = useCallback(function () {
|
64
|
-
|
65
|
-
return
|
97
|
+
if (disabled || !scrollRef.current) {
|
98
|
+
return;
|
99
|
+
}
|
100
|
+
var scrollRight = Math.round(scrollRef.current.scrollLeft + scrollRef.current.clientWidth);
|
101
|
+
var childNodes = getChildNodes(scrollRef.current);
|
102
|
+
var lastOverflowingChild = childNodes.find(function (child) {
|
103
|
+
if (!child || child.offsetLeft === undefined) {
|
104
|
+
return;
|
105
|
+
}
|
106
|
+
var tabEndX = child.offsetLeft + child.offsetWidth;
|
107
|
+
return tabEndX > scrollRight;
|
66
108
|
});
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
109
|
+
lastOverflowingChild === null || lastOverflowingChild === void 0 || lastOverflowingChild.scrollIntoView({
|
110
|
+
block: 'nearest',
|
111
|
+
inline: 'nearest'
|
112
|
+
});
|
113
|
+
}, [disabled, scrollRef]);
|
114
|
+
var onKeyDown = useCallback(function (event) {
|
115
|
+
var childNodes = getChildNodes(scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current);
|
116
|
+
var index = childNodes.findIndex(function (child) {
|
117
|
+
return document.activeElement === child;
|
118
|
+
});
|
119
|
+
var minIndex = 0;
|
120
|
+
var maxIndex = childNodes.length - 1;
|
121
|
+
var nextIndex;
|
122
|
+
switch (event.keyCode) {
|
123
|
+
case Keys.end:
|
124
|
+
nextIndex = maxIndex;
|
125
|
+
break;
|
126
|
+
case Keys.left:
|
127
|
+
nextIndex = index > minIndex ? index - 1 : index;
|
128
|
+
break;
|
129
|
+
case Keys.right:
|
130
|
+
nextIndex = index < maxIndex ? index + 1 : index;
|
131
|
+
break;
|
132
|
+
case Keys.home:
|
133
|
+
nextIndex = minIndex;
|
134
|
+
break;
|
135
|
+
default:
|
136
|
+
return;
|
137
|
+
}
|
138
|
+
if (nextIndex !== index) {
|
139
|
+
var _childNodes$nextIndex, _childNodes$nextIndex2;
|
140
|
+
event.preventDefault();
|
141
|
+
(_childNodes$nextIndex = childNodes[nextIndex]) === null || _childNodes$nextIndex === void 0 || _childNodes$nextIndex.focus();
|
142
|
+
(_childNodes$nextIndex2 = childNodes[nextIndex]) === null || _childNodes$nextIndex2 === void 0 || _childNodes$nextIndex2.scrollIntoView({
|
143
|
+
block: 'center',
|
144
|
+
inline: 'center',
|
145
|
+
behavior: 'smooth'
|
80
146
|
});
|
81
|
-
}
|
82
|
-
};
|
83
|
-
var
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
}
|
91
|
-
|
92
|
-
|
147
|
+
}
|
148
|
+
}, []);
|
149
|
+
var handleScroll = useCallback(function (event) {
|
150
|
+
var _event$stopPropagatio;
|
151
|
+
(_event$stopPropagatio = event.stopPropagation) === null || _event$stopPropagatio === void 0 || _event$stopPropagatio.call(event);
|
152
|
+
if (!canClip) {
|
153
|
+
setFirstItemVisible(true);
|
154
|
+
setLastItemVisible(true);
|
155
|
+
return;
|
156
|
+
}
|
157
|
+
if (isVertical) {
|
158
|
+
var maxScrollTop = event.currentTarget.scrollHeight - event.currentTarget.clientHeight;
|
159
|
+
var scrollTop = Math.round(event.currentTarget.scrollTop);
|
160
|
+
setFirstItemVisible(scrollTop <= 0);
|
161
|
+
setLastItemVisible(scrollTop >= maxScrollTop);
|
162
|
+
return;
|
163
|
+
}
|
164
|
+
var maxScrollLeft = event.currentTarget.scrollWidth - event.currentTarget.clientWidth;
|
165
|
+
var scrollLeft = Math.round(event.currentTarget.scrollLeft);
|
166
|
+
setFirstItemVisible(scrollLeft <= 0);
|
167
|
+
setLastItemVisible(scrollLeft >= maxScrollLeft);
|
168
|
+
}, [isVertical, canClip]);
|
169
|
+
useEffect(function () {
|
170
|
+
handleScroll({
|
171
|
+
currentTarget: scrollRef.current
|
172
|
+
});
|
173
|
+
}, [handleScroll]);
|
174
|
+
useEffect(function () {
|
175
|
+
var _scrollRef$current, _scrollRef$current2, _scrollRef$current3, _scrollRef$current4;
|
176
|
+
if (!canClip) {
|
177
|
+
setLastItemVisible(true);
|
178
|
+
return;
|
179
|
+
}
|
180
|
+
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));
|
181
|
+
}, [isVertical, canClip]);
|
182
|
+
|
183
|
+
// Этот хук компенсирует появление левой/верхней стрелки при прокрутке
|
184
|
+
useEffect(function () {
|
185
|
+
if (firstItemVisible || !scrollRef.current || !leftArrowRef.current) {
|
186
|
+
return;
|
187
|
+
}
|
188
|
+
if (isVertical) {
|
189
|
+
scrollRef.current.scrollTo({
|
190
|
+
top: Math.round(scrollRef.current.scrollTop + leftArrowRef.current.clientHeight)
|
191
|
+
});
|
192
|
+
return;
|
193
|
+
}
|
194
|
+
scrollRef.current.scrollTo({
|
195
|
+
left: Math.round(scrollRef.current.scrollLeft + leftArrowRef.current.clientWidth)
|
196
|
+
});
|
197
|
+
}, [firstItemVisible, isVertical]);
|
93
198
|
var PreviousButton = useMemo(function () {
|
94
|
-
|
199
|
+
var ArrowNode = isVertical ? StyledTopArrow : StyledLeftArrow;
|
200
|
+
return /*#__PURE__*/React.createElement(ArrowNode, {
|
95
201
|
type: "button",
|
96
202
|
"aria-label": "\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u0441\u0435\u0433\u043C\u0435\u043D\u0442",
|
97
203
|
onClick: onPrev,
|
98
204
|
tabIndex: disabled ? -1 : 0,
|
99
205
|
disabled: disabled
|
100
|
-
}, /*#__PURE__*/React.createElement(
|
206
|
+
}, isVertical ? /*#__PURE__*/React.createElement(IconDisclosureUpWithOffset, {
|
207
|
+
color: "var(".concat(tokens.arrowColor, ")"),
|
208
|
+
size: "s"
|
209
|
+
}) : /*#__PURE__*/React.createElement(IconDisclosureLeftWithOffset, {
|
101
210
|
color: "var(".concat(tokens.arrowColor, ")")
|
102
211
|
}));
|
103
|
-
}, [onPrev]);
|
212
|
+
}, [onPrev, isVertical]);
|
104
213
|
var NextButton = useMemo(function () {
|
105
|
-
|
214
|
+
var ArrowNode = isVertical ? StyledBottomArrow : StyledRightArrow;
|
215
|
+
return /*#__PURE__*/React.createElement(ArrowNode, {
|
106
216
|
type: "button",
|
107
217
|
"aria-label": "\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u0441\u0435\u0433\u043C\u0435\u043D\u0442",
|
108
218
|
onClick: onNext,
|
109
219
|
tabIndex: disabled ? -1 : 0,
|
110
220
|
disabled: disabled
|
111
|
-
}, /*#__PURE__*/React.createElement(
|
221
|
+
}, isVertical ? /*#__PURE__*/React.createElement(IconDisclosureDownWithOffset, {
|
222
|
+
color: "var(".concat(tokens.arrowColor, ")"),
|
223
|
+
size: "s"
|
224
|
+
}) : /*#__PURE__*/React.createElement(IconDisclosureRightWithOffset, {
|
112
225
|
color: "var(".concat(tokens.arrowColor, ")")
|
113
226
|
}));
|
114
|
-
}, [onNext]);
|
227
|
+
}, [onNext, isVertical]);
|
115
228
|
useEffect(function () {
|
116
229
|
selectionMode && setSelectionMode(selectionMode);
|
117
230
|
setDisabledGroup(disabled);
|
118
231
|
}, [selectionMode, disabled]);
|
119
|
-
useEffect(function () {
|
120
|
-
var _trackRef$current;
|
121
|
-
// Intersection observer для первого сегмента
|
122
|
-
var observeFirstItem = new IntersectionObserver(onIntersecting(setFirstItemVisible), {
|
123
|
-
root: null,
|
124
|
-
rootMargin: '0px',
|
125
|
-
threshold: 0.5
|
126
|
-
});
|
127
|
-
|
128
|
-
// Intersection observer для последнего сегмента
|
129
|
-
var observeLastItem = new IntersectionObserver(onIntersecting(setLastItemVisible), {
|
130
|
-
root: null,
|
131
|
-
rootMargin: '0px',
|
132
|
-
threshold: 0.5
|
133
|
-
});
|
134
|
-
|
135
|
-
// получаем список сегментов внутри SegmentGroup
|
136
|
-
var childrenArray = Array.from(((_trackRef$current = trackRef.current) === null || _trackRef$current === void 0 ? void 0 : _trackRef$current.children) || []);
|
137
|
-
if (childrenArray.length) {
|
138
|
-
// подписываемся на событие появление внутри SegmentGroup
|
139
|
-
observeFirstItem.observe(childrenArray[0]);
|
140
|
-
observeLastItem.observe(childrenArray[childrenArray.length - 1]);
|
141
|
-
}
|
142
|
-
return function () {
|
143
|
-
// отписываемся от события появления внутри SegmentGroup
|
144
|
-
observeFirstItem.disconnect();
|
145
|
-
observeLastItem.disconnect();
|
146
|
-
};
|
147
|
-
}, [children]);
|
148
232
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
149
233
|
view: view,
|
150
234
|
size: size,
|
235
|
+
orientation: orientation,
|
151
236
|
id: segmentGroupId,
|
152
237
|
ref: outerRef,
|
153
238
|
filledBackground: filledBackgroundAttr,
|
154
239
|
disabled: disabled,
|
155
240
|
pilled: pilledAttr,
|
156
|
-
className: cx(pilledClass, filledClass, stretchClass)
|
241
|
+
className: cx(pilledClass, filledClass, stretchClass, orientationClass),
|
242
|
+
onKeyDown: onKeyDown
|
157
243
|
}, rest), !firstItemVisible && PreviousButton, /*#__PURE__*/React.createElement(StyledContentWrapper, {
|
158
|
-
|
244
|
+
className: cx(clipScrollClass),
|
245
|
+
ref: scrollRef,
|
246
|
+
onScroll: handleScroll
|
159
247
|
}, /*#__PURE__*/React.createElement(StyledContent, {
|
160
248
|
ref: trackRef
|
161
249
|
}, children)), !lastItemVisible && NextButton);
|
@@ -185,8 +273,11 @@ var segmentGroupConfig = {
|
|
185
273
|
css: base$5,
|
186
274
|
attrs: true
|
187
275
|
},
|
276
|
+
orientation: {
|
277
|
+
css: base$6
|
278
|
+
},
|
188
279
|
filledBackground: {
|
189
|
-
css: base$
|
280
|
+
css: base$7,
|
190
281
|
attrs: true
|
191
282
|
}
|
192
283
|
},
|
@@ -196,5 +287,5 @@ var segmentGroupConfig = {
|
|
196
287
|
}
|
197
288
|
};
|
198
289
|
|
199
|
-
export { segmentGroupConfig, segmentGroupRoot };
|
290
|
+
export { getChildNodes, segmentGroupConfig, segmentGroupRoot };
|
200
291
|
//# sourceMappingURL=SegmentGroup.js.map
|