@salutejs/plasma-new-hope 0.154.0-canary.1392.11041436795.0 → 0.154.0-canary.1428.11047556363.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/_virtual/_rollupPluginBabelHelpers.js +4 -0
- package/cjs/_virtual/_rollupPluginBabelHelpers.js.map +1 -1
- package/cjs/components/Breadcrumbs/Breadcrumbs.styles.js +2 -2
- package/cjs/components/Breadcrumbs/Breadcrumbs.styles.js.map +1 -1
- package/cjs/components/Calendar/Calendar.types.js.map +1 -1
- package/cjs/components/Calendar/CalendarBase/CalendarBase.js +9 -4
- package/cjs/components/Calendar/CalendarBase/CalendarBase.js.map +1 -1
- package/cjs/components/Calendar/CalendarDouble/CalendarDouble.js +9 -2
- package/cjs/components/Calendar/CalendarDouble/CalendarDouble.js.map +1 -1
- package/cjs/components/Calendar/hooks/useMonths.js +6 -4
- package/cjs/components/Calendar/hooks/useMonths.js.map +1 -1
- package/cjs/components/Calendar/ui/CalendarDays/CalendarDays.js +5 -3
- package/cjs/components/Calendar/ui/CalendarDays/CalendarDays.js.map +1 -1
- package/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.js +9 -8
- package/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.js.map +1 -1
- package/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.js +4 -2
- package/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.js.map +1 -1
- package/cjs/components/Calendar/utils/calendarGridHelper.js +1 -1
- package/cjs/components/Calendar/utils/calendarGridHelper.js.map +1 -1
- package/cjs/components/Calendar/utils/constants.js +83 -11
- package/cjs/components/Calendar/utils/constants.js.map +1 -1
- package/cjs/components/DatePicker/RangeDate/RangeDate.js +1 -0
- package/cjs/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
- package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js +4 -0
- package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js.map +1 -1
- package/cjs/components/DatePicker/SingleDate/SingleDate.js +1 -0
- package/cjs/components/DatePicker/SingleDate/SingleDate.js.map +1 -1
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js +2 -2
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js.map +1 -1
- package/cjs/components/Segment/tokens.js +1 -15
- package/cjs/components/Segment/tokens.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.css +8 -7
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.js +112 -68
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +7 -1
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles_m9i9p0.css +4 -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_escgtx.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_m358nl.css +1 -0
- package/cjs/components/Segment/ui/SegmentItem/SegmentItem.css +4 -6
- package/cjs/components/Segment/ui/SegmentItem/SegmentItem.js +7 -15
- package/cjs/components/Segment/ui/SegmentItem/SegmentItem.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles.js +1 -30
- package/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles_18h1p52.css +2 -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_omc5u1.css → base_15s0fel.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_1m1u2ys.css +1 -0
- package/cjs/components/Tabs/ui/Tabs/Tabs.js +6 -6
- package/cjs/components/Tabs/ui/Tabs/Tabs.js.map +1 -1
- package/cjs/components/_Icon/Icon.assets/{DisclosureLeftCentered.js → DisclosureLeft.js} +3 -3
- package/cjs/components/_Icon/Icon.assets/DisclosureLeft.js.map +1 -0
- package/cjs/components/_Icon/Icon.assets/DisclosureRight.js +23 -0
- package/cjs/components/_Icon/Icon.assets/DisclosureRight.js.map +1 -0
- package/cjs/components/_Icon/Icons/{IconDisclosureLeftCentered.js → IconDisclosureLeft.js} +5 -5
- package/cjs/components/_Icon/Icons/IconDisclosureLeft.js.map +1 -0
- package/cjs/components/_Icon/Icons/IconDisclosureRight.js +23 -0
- package/cjs/components/_Icon/Icons/IconDisclosureRight.js.map +1 -0
- package/cjs/index.css +10 -13
- package/emotion/cjs/components/Breadcrumbs/Breadcrumbs.styles.js +4 -4
- package/emotion/cjs/components/Calendar/Calendar.template-doc.mdx +26 -1
- package/emotion/cjs/components/Calendar/CalendarBase/CalendarBase.js +9 -4
- package/emotion/cjs/components/Calendar/CalendarDouble/CalendarDouble.js +9 -2
- package/emotion/cjs/components/Calendar/hooks/useMonths.js +6 -4
- package/emotion/cjs/components/Calendar/ui/CalendarDays/CalendarDays.js +5 -3
- package/emotion/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.js +6 -5
- package/emotion/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.js +4 -2
- package/emotion/cjs/components/Calendar/utils/calendarGridHelper.js +1 -1
- package/emotion/cjs/components/Calendar/utils/constants.js +87 -12
- package/emotion/cjs/components/DatePicker/RangeDate/RangeDate.js +1 -0
- package/emotion/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js +4 -0
- package/emotion/cjs/components/DatePicker/SingleDate/SingleDate.js +1 -0
- package/emotion/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js +1 -1
- package/emotion/cjs/components/Segment/tokens.js +1 -15
- package/emotion/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.js +115 -66
- package/emotion/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +33 -15
- package/emotion/cjs/components/Segment/ui/SegmentGroup/variations/_filledBackgound/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 +7 -15
- package/emotion/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles.js +6 -20
- package/emotion/cjs/components/Segment/ui/SegmentItem/variations/_pilled/base.js +1 -1
- package/emotion/cjs/components/Segment/ui/SegmentItem/variations/_view/base.js +1 -2
- package/emotion/cjs/components/Tabs/ui/Tabs/Tabs.js +4 -4
- package/emotion/cjs/components/_Icon/Icon.assets/DisclosureLeft.js +4 -3
- package/emotion/cjs/components/_Icon/Icon.assets/DisclosureRight.js +4 -3
- package/emotion/cjs/components/_Icon/index.js +0 -21
- package/emotion/cjs/examples/plasma_b2c/components/Calendar/Calendar.stories.tsx +17 -3
- package/emotion/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +2 -0
- package/emotion/cjs/examples/plasma_b2c/components/Editable/Editable.stories.tsx +2 -2
- package/emotion/cjs/examples/plasma_b2c/components/Notification/Notification.stories.tsx +3 -6
- package/emotion/cjs/examples/plasma_b2c/components/Segment/Segment.stories.tsx +42 -118
- package/emotion/cjs/examples/plasma_b2c/components/Segment/SegmentGroup.config.js +10 -13
- package/emotion/cjs/examples/plasma_b2c/components/Segment/SegmentItem.config.js +9 -9
- package/emotion/cjs/examples/plasma_b2c/components/Tooltip/Tooltip.stories.tsx +2 -2
- package/emotion/cjs/examples/plasma_web/components/Calendar/Calendar.stories.tsx +17 -3
- package/emotion/cjs/examples/plasma_web/components/Editable/Editable.stories.tsx +2 -2
- package/emotion/cjs/examples/plasma_web/components/Notification/Notification.stories.tsx +3 -6
- package/emotion/cjs/examples/plasma_web/components/Segment/Segment.stories.tsx +42 -119
- package/emotion/cjs/examples/plasma_web/components/Segment/SegmentGroup.config.js +9 -15
- package/emotion/cjs/examples/plasma_web/components/Segment/SegmentItem.config.js +9 -9
- package/emotion/cjs/examples/plasma_web/components/Tooltip/Tooltip.stories.tsx +2 -2
- package/emotion/es/components/Breadcrumbs/Breadcrumbs.styles.js +5 -5
- package/emotion/es/components/Calendar/Calendar.template-doc.mdx +26 -1
- package/emotion/es/components/Calendar/CalendarBase/CalendarBase.js +9 -4
- package/emotion/es/components/Calendar/CalendarDouble/CalendarDouble.js +9 -2
- package/emotion/es/components/Calendar/hooks/useMonths.js +6 -4
- package/emotion/es/components/Calendar/ui/CalendarDays/CalendarDays.js +5 -3
- package/emotion/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js +7 -6
- package/emotion/es/components/Calendar/ui/CalendarMonths/CalendarMonths.js +4 -2
- package/emotion/es/components/Calendar/utils/calendarGridHelper.js +2 -2
- package/emotion/es/components/Calendar/utils/constants.js +86 -11
- package/emotion/es/components/DatePicker/RangeDate/RangeDate.js +1 -0
- package/emotion/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js +4 -0
- package/emotion/es/components/DatePicker/SingleDate/SingleDate.js +1 -0
- package/emotion/es/components/Dropdown/ui/DropdownItem/DropdownItem.js +2 -2
- package/emotion/es/components/Segment/tokens.js +1 -15
- package/emotion/es/components/Segment/ui/SegmentGroup/SegmentGroup.js +118 -69
- package/emotion/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +32 -14
- package/emotion/es/components/Segment/ui/SegmentGroup/variations/_filledBackgound/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 +8 -16
- package/emotion/es/components/Segment/ui/SegmentItem/SegmentItem.styles.js +5 -19
- package/emotion/es/components/Segment/ui/SegmentItem/variations/_pilled/base.js +1 -1
- package/emotion/es/components/Segment/ui/SegmentItem/variations/_view/base.js +1 -2
- package/emotion/es/components/Tabs/ui/Tabs/Tabs.js +5 -5
- package/emotion/es/components/_Icon/Icon.assets/DisclosureLeft.js +4 -3
- package/emotion/es/components/_Icon/Icon.assets/DisclosureRight.js +4 -3
- package/emotion/es/components/_Icon/index.js +0 -3
- package/emotion/es/examples/plasma_b2c/components/Calendar/Calendar.stories.tsx +17 -3
- package/emotion/es/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +2 -0
- package/emotion/es/examples/plasma_b2c/components/Editable/Editable.stories.tsx +2 -2
- package/emotion/es/examples/plasma_b2c/components/Notification/Notification.stories.tsx +3 -6
- package/emotion/es/examples/plasma_b2c/components/Segment/Segment.stories.tsx +42 -118
- package/emotion/es/examples/plasma_b2c/components/Segment/SegmentGroup.config.js +10 -13
- package/emotion/es/examples/plasma_b2c/components/Segment/SegmentItem.config.js +9 -9
- package/emotion/es/examples/plasma_b2c/components/Tooltip/Tooltip.stories.tsx +2 -2
- package/emotion/es/examples/plasma_web/components/Calendar/Calendar.stories.tsx +17 -3
- package/emotion/es/examples/plasma_web/components/Editable/Editable.stories.tsx +2 -2
- package/emotion/es/examples/plasma_web/components/Notification/Notification.stories.tsx +3 -6
- package/emotion/es/examples/plasma_web/components/Segment/Segment.stories.tsx +42 -119
- package/emotion/es/examples/plasma_web/components/Segment/SegmentGroup.config.js +9 -15
- package/emotion/es/examples/plasma_web/components/Segment/SegmentItem.config.js +9 -9
- package/emotion/es/examples/plasma_web/components/Tooltip/Tooltip.stories.tsx +2 -2
- package/es/_virtual/_rollupPluginBabelHelpers.js +4 -1
- package/es/_virtual/_rollupPluginBabelHelpers.js.map +1 -1
- package/es/components/Breadcrumbs/Breadcrumbs.styles.js +2 -2
- package/es/components/Breadcrumbs/Breadcrumbs.styles.js.map +1 -1
- package/es/components/Calendar/Calendar.types.js.map +1 -1
- package/es/components/Calendar/CalendarBase/CalendarBase.js +9 -4
- package/es/components/Calendar/CalendarBase/CalendarBase.js.map +1 -1
- package/es/components/Calendar/CalendarDouble/CalendarDouble.js +9 -2
- package/es/components/Calendar/CalendarDouble/CalendarDouble.js.map +1 -1
- package/es/components/Calendar/hooks/useMonths.js +6 -4
- package/es/components/Calendar/hooks/useMonths.js.map +1 -1
- package/es/components/Calendar/ui/CalendarDays/CalendarDays.js +5 -3
- package/es/components/Calendar/ui/CalendarDays/CalendarDays.js.map +1 -1
- package/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js +9 -8
- package/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js.map +1 -1
- package/es/components/Calendar/ui/CalendarMonths/CalendarMonths.js +4 -2
- package/es/components/Calendar/ui/CalendarMonths/CalendarMonths.js.map +1 -1
- package/es/components/Calendar/utils/calendarGridHelper.js +2 -2
- package/es/components/Calendar/utils/calendarGridHelper.js.map +1 -1
- package/es/components/Calendar/utils/constants.js +83 -12
- package/es/components/Calendar/utils/constants.js.map +1 -1
- package/es/components/DatePicker/RangeDate/RangeDate.js +1 -0
- package/es/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
- package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js +4 -0
- package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js.map +1 -1
- package/es/components/DatePicker/SingleDate/SingleDate.js +1 -0
- package/es/components/DatePicker/SingleDate/SingleDate.js.map +1 -1
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.js +2 -2
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.js.map +1 -1
- package/es/components/Segment/tokens.js +1 -15
- package/es/components/Segment/tokens.js.map +1 -1
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.css +8 -7
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.js +118 -73
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.js.map +1 -1
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +7 -2
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js.map +1 -1
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles_m9i9p0.css +4 -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_escgtx.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_m358nl.css +1 -0
- package/es/components/Segment/ui/SegmentItem/SegmentItem.css +4 -6
- package/es/components/Segment/ui/SegmentItem/SegmentItem.js +8 -16
- package/es/components/Segment/ui/SegmentItem/SegmentItem.js.map +1 -1
- package/es/components/Segment/ui/SegmentItem/SegmentItem.styles.js +2 -29
- package/es/components/Segment/ui/SegmentItem/SegmentItem.styles.js.map +1 -1
- package/es/components/Segment/ui/SegmentItem/SegmentItem.styles_18h1p52.css +2 -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_omc5u1.css → base_15s0fel.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_1m1u2ys.css +1 -0
- package/es/components/Tabs/ui/Tabs/Tabs.js +6 -6
- package/es/components/Tabs/ui/Tabs/Tabs.js.map +1 -1
- package/es/components/_Icon/Icon.assets/{DisclosureLeftCentered.js → DisclosureLeft.js} +3 -3
- package/es/components/_Icon/Icon.assets/DisclosureLeft.js.map +1 -0
- package/es/components/_Icon/Icon.assets/DisclosureRight.js +19 -0
- package/es/components/_Icon/Icon.assets/DisclosureRight.js.map +1 -0
- package/es/components/_Icon/Icons/{IconDisclosureLeftCentered.js → IconDisclosureLeft.js} +5 -5
- package/es/components/_Icon/Icons/IconDisclosureLeft.js.map +1 -0
- package/es/components/_Icon/Icons/IconDisclosureRight.js +19 -0
- package/es/components/_Icon/Icons/IconDisclosureRight.js.map +1 -0
- package/es/index.css +10 -13
- package/package.json +2 -2
- package/styled-components/cjs/components/Breadcrumbs/Breadcrumbs.styles.js +1 -1
- package/styled-components/cjs/components/Calendar/Calendar.template-doc.mdx +26 -1
- package/styled-components/cjs/components/Calendar/CalendarBase/CalendarBase.js +9 -4
- package/styled-components/cjs/components/Calendar/CalendarDouble/CalendarDouble.js +9 -2
- package/styled-components/cjs/components/Calendar/hooks/useMonths.js +6 -4
- package/styled-components/cjs/components/Calendar/ui/CalendarDays/CalendarDays.js +5 -3
- package/styled-components/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.js +6 -5
- package/styled-components/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.js +4 -2
- package/styled-components/cjs/components/Calendar/utils/calendarGridHelper.js +1 -1
- package/styled-components/cjs/components/Calendar/utils/constants.js +87 -12
- package/styled-components/cjs/components/DatePicker/RangeDate/RangeDate.js +1 -0
- package/styled-components/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js +4 -0
- package/styled-components/cjs/components/DatePicker/SingleDate/SingleDate.js +1 -0
- package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js +1 -1
- package/styled-components/cjs/components/Segment/tokens.js +1 -15
- package/styled-components/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.js +115 -66
- package/styled-components/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +13 -4
- package/styled-components/cjs/components/Segment/ui/SegmentGroup/variations/_filledBackgound/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 +7 -15
- package/styled-components/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles.js +4 -16
- 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 +1 -2
- package/styled-components/cjs/components/Tabs/ui/Tabs/Tabs.js +4 -4
- package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureLeft.js +4 -3
- package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureRight.js +4 -3
- package/styled-components/cjs/components/_Icon/index.js +0 -21
- package/styled-components/cjs/examples/plasma_b2c/components/Calendar/Calendar.stories.tsx +17 -3
- package/styled-components/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +2 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Editable/Editable.stories.tsx +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Notification/Notification.stories.tsx +3 -6
- package/styled-components/cjs/examples/plasma_b2c/components/Segment/Segment.stories.tsx +42 -118
- package/styled-components/cjs/examples/plasma_b2c/components/Segment/SegmentGroup.config.js +7 -10
- package/styled-components/cjs/examples/plasma_b2c/components/Segment/SegmentItem.config.js +8 -8
- package/styled-components/cjs/examples/plasma_b2c/components/Tooltip/Tooltip.stories.tsx +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Calendar/Calendar.stories.tsx +17 -3
- package/styled-components/cjs/examples/plasma_web/components/Editable/Editable.stories.tsx +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Notification/Notification.stories.tsx +3 -6
- package/styled-components/cjs/examples/plasma_web/components/Segment/Segment.stories.tsx +42 -119
- package/styled-components/cjs/examples/plasma_web/components/Segment/SegmentGroup.config.js +7 -13
- package/styled-components/cjs/examples/plasma_web/components/Segment/SegmentItem.config.js +8 -8
- package/styled-components/cjs/examples/plasma_web/components/Tooltip/Tooltip.stories.tsx +2 -2
- package/styled-components/es/components/Breadcrumbs/Breadcrumbs.styles.js +2 -2
- package/styled-components/es/components/Calendar/Calendar.template-doc.mdx +26 -1
- package/styled-components/es/components/Calendar/CalendarBase/CalendarBase.js +9 -4
- package/styled-components/es/components/Calendar/CalendarDouble/CalendarDouble.js +9 -2
- package/styled-components/es/components/Calendar/hooks/useMonths.js +6 -4
- package/styled-components/es/components/Calendar/ui/CalendarDays/CalendarDays.js +5 -3
- package/styled-components/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js +7 -6
- package/styled-components/es/components/Calendar/ui/CalendarMonths/CalendarMonths.js +4 -2
- package/styled-components/es/components/Calendar/utils/calendarGridHelper.js +2 -2
- package/styled-components/es/components/Calendar/utils/constants.js +86 -11
- package/styled-components/es/components/DatePicker/RangeDate/RangeDate.js +1 -0
- package/styled-components/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js +4 -0
- package/styled-components/es/components/DatePicker/SingleDate/SingleDate.js +1 -0
- package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.js +2 -2
- package/styled-components/es/components/Segment/tokens.js +1 -15
- package/styled-components/es/components/Segment/ui/SegmentGroup/SegmentGroup.js +118 -69
- package/styled-components/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +12 -3
- package/styled-components/es/components/Segment/ui/SegmentGroup/variations/_filledBackgound/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 +8 -16
- package/styled-components/es/components/Segment/ui/SegmentItem/SegmentItem.styles.js +3 -15
- 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 +1 -2
- package/styled-components/es/components/Tabs/ui/Tabs/Tabs.js +5 -5
- package/styled-components/es/components/_Icon/Icon.assets/DisclosureLeft.js +4 -3
- package/styled-components/es/components/_Icon/Icon.assets/DisclosureRight.js +4 -3
- package/styled-components/es/components/_Icon/index.js +0 -3
- package/styled-components/es/examples/plasma_b2c/components/Calendar/Calendar.stories.tsx +17 -3
- package/styled-components/es/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +2 -0
- package/styled-components/es/examples/plasma_b2c/components/Editable/Editable.stories.tsx +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Notification/Notification.stories.tsx +3 -6
- package/styled-components/es/examples/plasma_b2c/components/Segment/Segment.stories.tsx +42 -118
- package/styled-components/es/examples/plasma_b2c/components/Segment/SegmentGroup.config.js +7 -10
- package/styled-components/es/examples/plasma_b2c/components/Segment/SegmentItem.config.js +8 -8
- package/styled-components/es/examples/plasma_b2c/components/Tooltip/Tooltip.stories.tsx +2 -2
- package/styled-components/es/examples/plasma_web/components/Calendar/Calendar.stories.tsx +17 -3
- package/styled-components/es/examples/plasma_web/components/Editable/Editable.stories.tsx +2 -2
- package/styled-components/es/examples/plasma_web/components/Notification/Notification.stories.tsx +3 -6
- package/styled-components/es/examples/plasma_web/components/Segment/Segment.stories.tsx +42 -119
- package/styled-components/es/examples/plasma_web/components/Segment/SegmentGroup.config.js +7 -13
- package/styled-components/es/examples/plasma_web/components/Segment/SegmentItem.config.js +8 -8
- package/styled-components/es/examples/plasma_web/components/Tooltip/Tooltip.stories.tsx +2 -2
- package/types/components/Calendar/Calendar.types.d.ts +5 -0
- package/types/components/Calendar/Calendar.types.d.ts.map +1 -1
- package/types/components/Calendar/CalendarBase/CalendarBase.d.ts.map +1 -1
- package/types/components/Calendar/CalendarDouble/CalendarDouble.d.ts.map +1 -1
- package/types/components/Calendar/hooks/types.d.ts +2 -1
- package/types/components/Calendar/hooks/types.d.ts.map +1 -1
- package/types/components/Calendar/hooks/useMonths.d.ts +1 -1
- package/types/components/Calendar/hooks/useMonths.d.ts.map +1 -1
- package/types/components/Calendar/ui/CalendarDays/CalendarDays.d.ts.map +1 -1
- package/types/components/Calendar/ui/CalendarDays/CalendarDays.types.d.ts +2 -1
- package/types/components/Calendar/ui/CalendarDays/CalendarDays.types.d.ts.map +1 -1
- package/types/components/Calendar/ui/CalendarHeader/CalendarHeader.d.ts.map +1 -1
- package/types/components/Calendar/ui/CalendarHeader/CalendarHeader.types.d.ts +2 -1
- package/types/components/Calendar/ui/CalendarHeader/CalendarHeader.types.d.ts.map +1 -1
- package/types/components/Calendar/ui/CalendarMonths/CalendarMonths.d.ts.map +1 -1
- package/types/components/Calendar/ui/CalendarMonths/CalendarMonths.types.d.ts +2 -1
- package/types/components/Calendar/ui/CalendarMonths/CalendarMonths.types.d.ts.map +1 -1
- package/types/components/Calendar/utils/calendarGridHelper.d.ts.map +1 -1
- package/types/components/Calendar/utils/constants.d.ts +8 -5
- package/types/components/Calendar/utils/constants.d.ts.map +1 -1
- package/types/components/DatePicker/RangeDate/RangeDate.d.ts.map +1 -1
- package/types/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.d.ts +1 -1
- package/types/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.d.ts.map +1 -1
- package/types/components/DatePicker/SingleDate/SingleDate.d.ts.map +1 -1
- package/types/components/Segment/tokens.d.ts +0 -14
- package/types/components/Segment/tokens.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentGroup/SegmentGroup.d.ts +1 -10
- package/types/components/Segment/ui/SegmentGroup/SegmentGroup.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentGroup/SegmentGroup.styles.d.ts +1 -0
- package/types/components/Segment/ui/SegmentGroup/SegmentGroup.styles.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentGroup/SegmentGroup.types.d.ts +1 -19
- 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/_size/base.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentItem/SegmentItem.d.ts +2 -8
- package/types/components/Segment/ui/SegmentItem/SegmentItem.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentItem/SegmentItem.styles.d.ts +1 -7
- package/types/components/Segment/ui/SegmentItem/SegmentItem.styles.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentItem/SegmentItem.types.d.ts +1 -14
- 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/Tabs/ui/Tabs/Tabs.d.ts.map +1 -1
- package/types/components/_Icon/Icon.assets/DisclosureLeft.d.ts.map +1 -1
- package/types/components/_Icon/Icon.assets/DisclosureRight.d.ts.map +1 -1
- package/types/components/_Icon/index.d.ts +0 -3
- package/types/components/_Icon/index.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Segment/Segment.d.ts +1 -10
- package/types/examples/plasma_b2c/components/Segment/Segment.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Segment/SegmentGroup.config.d.ts +0 -3
- 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 +1 -13
- package/types/examples/plasma_web/components/Segment/Segment.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Segment/SegmentGroup.config.d.ts +0 -6
- 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_6y4o38.css +0 -3
- package/cjs/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base_a7w5s0.css +0 -1
- package/cjs/components/Segment/ui/SegmentGroup/variations/_orientation/base.js +0 -9
- package/cjs/components/Segment/ui/SegmentGroup/variations/_orientation/base.js.map +0 -1
- package/cjs/components/Segment/ui/SegmentGroup/variations/_orientation/base_1ejecy9.css +0 -1
- package/cjs/components/Segment/ui/SegmentGroup/variations/_size/base_1dfesjp.css +0 -1
- package/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles_1s77lh9.css +0 -4
- package/cjs/components/Segment/ui/SegmentItem/variations/_view/base_jww0qh.css +0 -1
- package/cjs/components/_Icon/Icon.assets/DisclosureLeftCentered.js.map +0 -1
- package/cjs/components/_Icon/Icons/IconDisclosureLeftCentered.js.map +0 -1
- package/emotion/cjs/components/Segment/README.md +0 -61
- package/emotion/cjs/components/Segment/ui/SegmentGroup/variations/_orientation/base.js +0 -10
- package/emotion/cjs/components/Segment/ui/SegmentGroup/variations/_orientation/tokens.json +0 -1
- package/emotion/cjs/components/_Icon/Icon.assets/DisclosureDown.js +0 -21
- package/emotion/cjs/components/_Icon/Icon.assets/DisclosureLeftCentered.js +0 -22
- package/emotion/cjs/components/_Icon/Icon.assets/DisclosureUp.js +0 -21
- package/emotion/cjs/components/_Icon/Icons/IconDisclosureDown.js +0 -22
- package/emotion/cjs/components/_Icon/Icons/IconDisclosureLeftCentered.js +0 -22
- package/emotion/cjs/components/_Icon/Icons/IconDisclosureUp.js +0 -22
- package/emotion/es/components/Segment/README.md +0 -61
- package/emotion/es/components/Segment/ui/SegmentGroup/variations/_orientation/base.js +0 -4
- package/emotion/es/components/Segment/ui/SegmentGroup/variations/_orientation/tokens.json +0 -1
- package/emotion/es/components/_Icon/Icon.assets/DisclosureDown.js +0 -14
- package/emotion/es/components/_Icon/Icon.assets/DisclosureLeftCentered.js +0 -15
- package/emotion/es/components/_Icon/Icon.assets/DisclosureUp.js +0 -14
- package/emotion/es/components/_Icon/Icons/IconDisclosureDown.js +0 -15
- package/emotion/es/components/_Icon/Icons/IconDisclosureLeftCentered.js +0 -15
- package/emotion/es/components/_Icon/Icons/IconDisclosureUp.js +0 -15
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles_6y4o38.css +0 -3
- package/es/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base_a7w5s0.css +0 -1
- package/es/components/Segment/ui/SegmentGroup/variations/_orientation/base.js +0 -5
- package/es/components/Segment/ui/SegmentGroup/variations/_orientation/base.js.map +0 -1
- package/es/components/Segment/ui/SegmentGroup/variations/_orientation/base_1ejecy9.css +0 -1
- package/es/components/Segment/ui/SegmentGroup/variations/_size/base_1dfesjp.css +0 -1
- package/es/components/Segment/ui/SegmentItem/SegmentItem.styles_1s77lh9.css +0 -4
- package/es/components/Segment/ui/SegmentItem/variations/_view/base_jww0qh.css +0 -1
- package/es/components/_Icon/Icon.assets/DisclosureLeftCentered.js.map +0 -1
- package/es/components/_Icon/Icons/IconDisclosureLeftCentered.js.map +0 -1
- package/styled-components/cjs/components/Segment/README.md +0 -61
- package/styled-components/cjs/components/Segment/ui/SegmentGroup/variations/_orientation/base.js +0 -10
- package/styled-components/cjs/components/Segment/ui/SegmentGroup/variations/_orientation/tokens.json +0 -1
- package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureDown.js +0 -21
- package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureLeftCentered.js +0 -22
- package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureUp.js +0 -21
- package/styled-components/cjs/components/_Icon/Icons/IconDisclosureDown.js +0 -22
- package/styled-components/cjs/components/_Icon/Icons/IconDisclosureLeftCentered.js +0 -22
- package/styled-components/cjs/components/_Icon/Icons/IconDisclosureUp.js +0 -22
- package/styled-components/es/components/Segment/README.md +0 -61
- package/styled-components/es/components/Segment/ui/SegmentGroup/variations/_orientation/base.js +0 -4
- package/styled-components/es/components/Segment/ui/SegmentGroup/variations/_orientation/tokens.json +0 -1
- package/styled-components/es/components/_Icon/Icon.assets/DisclosureDown.js +0 -14
- package/styled-components/es/components/_Icon/Icon.assets/DisclosureLeftCentered.js +0 -15
- package/styled-components/es/components/_Icon/Icon.assets/DisclosureUp.js +0 -14
- package/styled-components/es/components/_Icon/Icons/IconDisclosureDown.js +0 -15
- package/styled-components/es/components/_Icon/Icons/IconDisclosureLeftCentered.js +0 -15
- package/styled-components/es/components/_Icon/Icons/IconDisclosureUp.js +0 -15
- package/types/components/Segment/ui/SegmentGroup/variations/_orientation/base.d.ts +0 -2
- package/types/components/Segment/ui/SegmentGroup/variations/_orientation/base.d.ts.map +0 -1
- package/types/components/_Icon/Icon.assets/DisclosureDown.d.ts +0 -4
- package/types/components/_Icon/Icon.assets/DisclosureDown.d.ts.map +0 -1
- package/types/components/_Icon/Icon.assets/DisclosureLeftCentered.d.ts +0 -4
- package/types/components/_Icon/Icon.assets/DisclosureLeftCentered.d.ts.map +0 -1
- package/types/components/_Icon/Icon.assets/DisclosureUp.d.ts +0 -4
- package/types/components/_Icon/Icon.assets/DisclosureUp.d.ts.map +0 -1
- package/types/components/_Icon/Icons/IconDisclosureDown.d.ts +0 -4
- package/types/components/_Icon/Icons/IconDisclosureDown.d.ts.map +0 -1
- package/types/components/_Icon/Icons/IconDisclosureLeftCentered.d.ts +0 -4
- package/types/components/_Icon/Icons/IconDisclosureLeftCentered.d.ts.map +0 -1
- package/types/components/_Icon/Icons/IconDisclosureUp.d.ts +0 -4
- package/types/components/_Icon/Icons/IconDisclosureUp.d.ts.map +0 -1
@@ -5,6 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
5
5
|
var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
|
6
6
|
var React = require('react');
|
7
7
|
var plasmaCore = require('@salutejs/plasma-core');
|
8
|
+
var IconDisclosureLeft = require('../../../_Icon/Icons/IconDisclosureLeft.js');
|
9
|
+
var IconDisclosureRight = require('../../../_Icon/Icons/IconDisclosureRight.js');
|
10
|
+
require('@linaria/react');
|
8
11
|
var tokens = require('../../tokens.js');
|
9
12
|
var index = require('../../../../utils/index.js');
|
10
13
|
var SegmentProvider = require('../../SegmentProvider/SegmentProvider.js');
|
@@ -12,110 +15,154 @@ var base = require('./variations/_size/base.js');
|
|
12
15
|
var base$1 = require('./variations/_view/base.js');
|
13
16
|
var base$2 = require('./variations/_disabled/base.js');
|
14
17
|
var base$3 = require('./variations/_pilled/base.js');
|
15
|
-
var base$
|
18
|
+
var base$5 = require('./variations/_filledBackgound/base.js');
|
16
19
|
var base$4 = require('./variations/_stretch/base.js');
|
17
|
-
var base$5 = require('./variations/_orientation/base.js');
|
18
20
|
var SegmentGroup_styles = require('./SegmentGroup.styles.js');
|
19
21
|
|
20
|
-
var _excluded = ["id", "selectionMode", "pilled", "stretch", "
|
21
|
-
var Keys = /*#__PURE__*/function (Keys) {
|
22
|
-
Keys[Keys["end"] = 35] = "end";
|
23
|
-
Keys[Keys["home"] = 36] = "home";
|
24
|
-
Keys[Keys["left"] = 37] = "left";
|
25
|
-
Keys[Keys["right"] = 39] = "right";
|
26
|
-
return Keys;
|
27
|
-
}(Keys || {});
|
28
|
-
var getChildNodes = function getChildNodes(wrapper) {
|
29
|
-
var container = wrapper === null || wrapper === void 0 ? void 0 : wrapper.firstChild;
|
30
|
-
return container ? Array.from(container === null || container === void 0 ? void 0 : container.childNodes) : [];
|
31
|
-
};
|
22
|
+
var _excluded = ["id", "selectionMode", "pilled", "stretch", "filledBackground", "disabled", "size", "view", "children"];
|
32
23
|
var segmentGroupRoot = function segmentGroupRoot(Root) {
|
33
24
|
return /*#__PURE__*/React.forwardRef(function (props, outerRef) {
|
34
25
|
var id = props.id,
|
35
26
|
selectionMode = props.selectionMode,
|
36
27
|
pilled = props.pilled,
|
37
28
|
stretch = props.stretch,
|
38
|
-
_props$orientation = props.orientation,
|
39
|
-
orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
|
40
29
|
_props$filledBackgrou = props.filledBackground,
|
41
30
|
filledBackground = _props$filledBackgrou === void 0 ? false : _props$filledBackgrou,
|
42
|
-
_props$hasBackground = props.hasBackground,
|
43
|
-
hasBackground = _props$hasBackground === void 0 ? false : _props$hasBackground,
|
44
31
|
_props$disabled = props.disabled,
|
45
32
|
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
46
33
|
size = props.size,
|
47
34
|
view = props.view,
|
48
35
|
children = props.children,
|
49
36
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
|
50
|
-
var scrollRef = React.useRef(null);
|
51
|
-
var trackRef = React.useRef(null);
|
52
37
|
var _useSegmentInner = SegmentProvider.useSegmentInner(),
|
53
38
|
setSelectionMode = _useSegmentInner.setSelectionMode,
|
54
39
|
setDisabledGroup = _useSegmentInner.setDisabledGroup;
|
40
|
+
var _useState = React.useState(0),
|
41
|
+
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
42
|
+
index$1 = _useState2[0],
|
43
|
+
setIndex = _useState2[1];
|
44
|
+
var _useState3 = React.useState(false),
|
45
|
+
_useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
|
46
|
+
firstItemVisible = _useState4[0],
|
47
|
+
setFirstItemVisible = _useState4[1];
|
48
|
+
var _useState5 = React.useState(false),
|
49
|
+
_useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
|
50
|
+
lastItemVisible = _useState6[0],
|
51
|
+
setLastItemVisible = _useState6[1];
|
55
52
|
var uniqId = plasmaCore.safeUseId();
|
56
53
|
var segmentGroupId = id || uniqId;
|
57
|
-
var
|
58
|
-
var
|
59
|
-
var filledBackgroundAttr = filledBackground || hasBackground;
|
60
|
-
var stretchClass = stretch ? tokens.classes.segmentStretch : undefined;
|
61
|
-
var orientationClass = isVertical ? tokens.classes.segmentVertical : undefined;
|
54
|
+
var pilledAttr = view !== 'clear' && pilled;
|
55
|
+
var filledBackgroundAttr = view !== 'clear' && filledBackground;
|
62
56
|
var pilledClass = pilledAttr ? tokens.classes.segmentPilled : undefined;
|
63
57
|
var filledClass = filledBackgroundAttr ? tokens.classes.segmentGroupFilledBackground : undefined;
|
64
|
-
var
|
65
|
-
|
66
|
-
|
67
|
-
|
58
|
+
var stretchClass = firstItemVisible && lastItemVisible && stretch ? tokens.classes.segmentStretch : undefined;
|
59
|
+
var items = (React.Children === null || React.Children === void 0 ? void 0 : React.Children.map(children, function (child) {
|
60
|
+
return child;
|
61
|
+
})) || [];
|
62
|
+
var onPrev = React.useCallback(function () {
|
63
|
+
!disabled && setIndex(function (prevIndex) {
|
64
|
+
return prevIndex > 0 ? prevIndex - 1 : 0;
|
68
65
|
});
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
}
|
88
|
-
if (nextIndex !== index) {
|
89
|
-
var _childNodes$nextIndex, _childNodes$nextIndex2;
|
90
|
-
event.preventDefault();
|
91
|
-
(_childNodes$nextIndex = childNodes[nextIndex]) === null || _childNodes$nextIndex === void 0 || _childNodes$nextIndex.focus();
|
92
|
-
(_childNodes$nextIndex2 = childNodes[nextIndex]) === null || _childNodes$nextIndex2 === void 0 || _childNodes$nextIndex2.scrollIntoView({
|
93
|
-
block: 'center',
|
94
|
-
inline: 'center',
|
95
|
-
behavior: 'smooth'
|
66
|
+
}, [disabled]);
|
67
|
+
var onNext = React.useCallback(function () {
|
68
|
+
!disabled && setIndex(function (prevIndex) {
|
69
|
+
return prevIndex < items.length - 1 ? prevIndex + 1 : prevIndex;
|
70
|
+
});
|
71
|
+
}, [disabled]);
|
72
|
+
var onIntersecting = function onIntersecting(setVisible) {
|
73
|
+
return function (entries) {
|
74
|
+
/*
|
75
|
+
* Пробегаемся по элементам на которых есть слушатель события появления.
|
76
|
+
* Если элемент находится в зоне видимости или выходит из нее, меняем значение флага видимости
|
77
|
+
*/
|
78
|
+
entries.forEach(function (entry) {
|
79
|
+
if (entry.isIntersecting) {
|
80
|
+
setVisible(true);
|
81
|
+
} else {
|
82
|
+
setVisible(false);
|
83
|
+
}
|
96
84
|
});
|
97
|
-
}
|
98
|
-
}
|
85
|
+
};
|
86
|
+
};
|
87
|
+
var _useCarousel = plasmaCore.useCarousel({
|
88
|
+
index: index$1,
|
89
|
+
axis: 'x',
|
90
|
+
scrollAlign: 'start',
|
91
|
+
detectActive: true,
|
92
|
+
debounceMs: 250,
|
93
|
+
onIndexChange: setIndex
|
94
|
+
}),
|
95
|
+
scrollRef = _useCarousel.scrollRef,
|
96
|
+
trackRef = _useCarousel.trackRef;
|
97
|
+
var PreviousButton = React.useMemo(function () {
|
98
|
+
return /*#__PURE__*/React.createElement(SegmentGroup_styles.StyledArrow, {
|
99
|
+
type: "button",
|
100
|
+
"aria-label": "\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u0441\u0435\u0433\u043C\u0435\u043D\u0442",
|
101
|
+
onClick: onPrev,
|
102
|
+
tabIndex: disabled ? -1 : 0,
|
103
|
+
disabled: disabled
|
104
|
+
}, /*#__PURE__*/React.createElement(IconDisclosureLeft.IconDisclosureLeft, {
|
105
|
+
color: "var(".concat(tokens.tokens.arrowColor, ")")
|
106
|
+
}));
|
107
|
+
}, [onPrev]);
|
108
|
+
var NextButton = React.useMemo(function () {
|
109
|
+
return /*#__PURE__*/React.createElement(SegmentGroup_styles.StyledArrow, {
|
110
|
+
type: "button",
|
111
|
+
"aria-label": "\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u0441\u0435\u0433\u043C\u0435\u043D\u0442",
|
112
|
+
onClick: onNext,
|
113
|
+
tabIndex: disabled ? -1 : 0,
|
114
|
+
disabled: disabled
|
115
|
+
}, /*#__PURE__*/React.createElement(IconDisclosureRight.IconDisclosureRight, {
|
116
|
+
color: "var(".concat(tokens.tokens.arrowColor, ")")
|
117
|
+
}));
|
118
|
+
}, [onNext]);
|
99
119
|
React.useEffect(function () {
|
100
120
|
selectionMode && setSelectionMode(selectionMode);
|
101
121
|
setDisabledGroup(disabled);
|
102
122
|
}, [selectionMode, disabled]);
|
123
|
+
React.useEffect(function () {
|
124
|
+
var _trackRef$current;
|
125
|
+
// Intersection observer для первого сегмента
|
126
|
+
var observeFirstItem = new IntersectionObserver(onIntersecting(setFirstItemVisible), {
|
127
|
+
root: null,
|
128
|
+
rootMargin: '0px',
|
129
|
+
threshold: 0.5
|
130
|
+
});
|
131
|
+
|
132
|
+
// Intersection observer для последнего сегмента
|
133
|
+
var observeLastItem = new IntersectionObserver(onIntersecting(setLastItemVisible), {
|
134
|
+
root: null,
|
135
|
+
rootMargin: '0px',
|
136
|
+
threshold: 0.5
|
137
|
+
});
|
138
|
+
|
139
|
+
// получаем список сегментов внутри SegmentGroup
|
140
|
+
var childrenArray = Array.from(((_trackRef$current = trackRef.current) === null || _trackRef$current === void 0 ? void 0 : _trackRef$current.children) || []);
|
141
|
+
if (childrenArray.length) {
|
142
|
+
// подписываемся на событие появление внутри SegmentGroup
|
143
|
+
observeFirstItem.observe(childrenArray[0]);
|
144
|
+
observeLastItem.observe(childrenArray[childrenArray.length - 1]);
|
145
|
+
}
|
146
|
+
return function () {
|
147
|
+
// отписываемся от события появления внутри SegmentGroup
|
148
|
+
observeFirstItem.disconnect();
|
149
|
+
observeLastItem.disconnect();
|
150
|
+
};
|
151
|
+
}, [children]);
|
103
152
|
return /*#__PURE__*/React.createElement(Root, _rollupPluginBabelHelpers.extends({
|
104
153
|
view: view,
|
105
154
|
size: size,
|
106
|
-
orientation: orientation,
|
107
155
|
id: segmentGroupId,
|
108
156
|
ref: outerRef,
|
109
157
|
filledBackground: filledBackgroundAttr,
|
110
158
|
disabled: disabled,
|
111
159
|
pilled: pilledAttr,
|
112
|
-
className: index.cx(pilledClass, filledClass, stretchClass
|
113
|
-
|
114
|
-
}, rest), /*#__PURE__*/React.createElement(SegmentGroup_styles.StyledContentWrapper, {
|
160
|
+
className: index.cx(pilledClass, filledClass, stretchClass)
|
161
|
+
}, rest), !firstItemVisible && PreviousButton, /*#__PURE__*/React.createElement(SegmentGroup_styles.StyledContentWrapper, {
|
115
162
|
ref: scrollRef
|
116
163
|
}, /*#__PURE__*/React.createElement(SegmentGroup_styles.StyledContent, {
|
117
164
|
ref: trackRef
|
118
|
-
}, children)));
|
165
|
+
}, children)), !lastItemVisible && NextButton);
|
119
166
|
});
|
120
167
|
};
|
121
168
|
var segmentGroupConfig = {
|
@@ -142,20 +189,17 @@ var segmentGroupConfig = {
|
|
142
189
|
css: base$4.base,
|
143
190
|
attrs: true
|
144
191
|
},
|
145
|
-
orientation: {
|
146
|
-
css: base$5.base
|
147
|
-
},
|
148
192
|
filledBackground: {
|
149
|
-
css: base$
|
193
|
+
css: base$5.base,
|
150
194
|
attrs: true
|
151
195
|
}
|
152
196
|
},
|
153
197
|
defaults: {
|
198
|
+
view: 'clear',
|
154
199
|
size: 'xs'
|
155
200
|
}
|
156
201
|
};
|
157
202
|
|
158
|
-
exports.getChildNodes = getChildNodes;
|
159
203
|
exports.segmentGroupConfig = segmentGroupConfig;
|
160
204
|
exports.segmentGroupRoot = segmentGroupRoot;
|
161
205
|
//# sourceMappingURL=SegmentGroup.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SegmentGroup.js","sources":["../../../../../src/components/Segment/ui/SegmentGroup/SegmentGroup.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useRef, KeyboardEvent } from 'react';\nimport type { RefObject, MutableRefObject } from 'react';\nimport { safeUseId } from '@salutejs/plasma-core';\n\nimport type { RootProps } from '../../../../engines/types';\nimport { classes } from '../../tokens';\nimport { cx } from '../../../../utils';\nimport { useSegmentInner } from '../../SegmentProvider/SegmentProvider';\n\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as pilledCSS } from './variations/_pilled/base';\nimport { base as filledBackgroundCSS } from './variations/_filledBackgound/base';\nimport { base as stretchCSS } from './variations/_stretch/base';\nimport { base as orientationCSS } from './variations/_orientation/base';\nimport type { SegmentGroupProps } from './SegmentGroup.types';\nimport { StyledContent, StyledContentWrapper, base } from './SegmentGroup.styles';\n\nenum Keys {\n end = 35,\n home = 36,\n left = 37,\n right = 39,\n}\n\nexport const getChildNodes = (wrapper: HTMLElement | null) => {\n const container = wrapper?.firstChild;\n return container ? (Array.from(container?.childNodes) as HTMLElement[]) : [];\n};\nexport const segmentGroupRoot = (Root: RootProps<HTMLDivElement, SegmentGroupProps>) =>\n forwardRef<HTMLDivElement, SegmentGroupProps>((props, outerRef) => {\n const {\n id,\n selectionMode,\n pilled,\n stretch,\n orientation = 'horizontal',\n filledBackground = false,\n hasBackground = false,\n disabled = false,\n size,\n view,\n children,\n ...rest\n } = props;\n\n const scrollRef = useRef<HTMLElement | null>(null);\n const trackRef = useRef<HTMLElement | null>(null);\n\n const { setSelectionMode, setDisabledGroup } = useSegmentInner();\n\n const uniqId = safeUseId();\n const segmentGroupId = id || uniqId;\n const isVertical = orientation === 'vertical';\n\n const pilledAttr = hasBackground && pilled;\n const filledBackgroundAttr = filledBackground || hasBackground;\n\n const stretchClass = stretch ? classes.segmentStretch : undefined;\n const orientationClass = isVertical ? classes.segmentVertical : undefined;\n\n const pilledClass = pilledAttr ? classes.segmentPilled : undefined;\n const filledClass = filledBackgroundAttr ? classes.segmentGroupFilledBackground : undefined;\n\n const onKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {\n const childNodes = getChildNodes(scrollRef?.current);\n\n const index = childNodes.findIndex((child) => document.activeElement === child);\n\n const minIndex = 0;\n const maxIndex = childNodes.length - 1;\n let nextIndex: number;\n\n switch (event.keyCode) {\n case Keys.end:\n nextIndex = maxIndex;\n break;\n case Keys.left:\n nextIndex = index > minIndex ? index - 1 : index;\n break;\n case Keys.right:\n nextIndex = index < maxIndex ? index + 1 : index;\n break;\n case Keys.home:\n nextIndex = minIndex;\n break;\n default:\n return;\n }\n\n if (nextIndex !== index) {\n event.preventDefault();\n childNodes[nextIndex]?.focus();\n childNodes[nextIndex]?.scrollIntoView({\n block: 'center',\n inline: 'center',\n behavior: 'smooth',\n });\n }\n }, []);\n\n useEffect(() => {\n selectionMode && setSelectionMode(selectionMode);\n setDisabledGroup(disabled);\n }, [selectionMode, disabled]);\n\n return (\n <Root\n view={view}\n size={size}\n orientation={orientation}\n id={segmentGroupId}\n ref={outerRef}\n filledBackground={filledBackgroundAttr}\n disabled={disabled}\n pilled={pilledAttr}\n className={cx(pilledClass, filledClass, stretchClass, orientationClass)}\n onKeyDown={onKeyDown}\n {...rest}\n >\n <StyledContentWrapper ref={scrollRef as RefObject<HTMLDivElement>}>\n <StyledContent ref={trackRef as MutableRefObject<HTMLDivElement | null>}>{children}</StyledContent>\n </StyledContentWrapper>\n </Root>\n );\n });\n\nexport const segmentGroupConfig = {\n name: 'SegmentGroup',\n tag: 'div',\n layout: segmentGroupRoot,\n base,\n variations: {\n size: {\n css: sizeCSS,\n },\n view: {\n css: viewCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n pilled: {\n css: pilledCSS,\n attrs: true,\n },\n stretch: {\n css: stretchCSS,\n attrs: true,\n },\n orientation: {\n css: orientationCSS,\n },\n filledBackground: {\n css: filledBackgroundCSS,\n attrs: true,\n },\n },\n defaults: {\n size: 'xs',\n },\n};\n"],"names":["Keys","getChildNodes","wrapper","container","firstChild","Array","from","childNodes","segmentGroupRoot","Root","forwardRef","props","outerRef","id","selectionMode","pilled","stretch","_props$orientation","orientation","_props$filledBackgrou","filledBackground","_props$hasBackground","hasBackground","_props$disabled","disabled","size","view","children","rest","_objectWithoutProperties","_excluded","scrollRef","useRef","trackRef","_useSegmentInner","useSegmentInner","setSelectionMode","setDisabledGroup","uniqId","safeUseId","segmentGroupId","isVertical","pilledAttr","filledBackgroundAttr","stretchClass","classes","segmentStretch","undefined","orientationClass","segmentVertical","pilledClass","segmentPilled","filledClass","segmentGroupFilledBackground","onKeyDown","useCallback","event","current","index","findIndex","child","document","activeElement","minIndex","maxIndex","length","nextIndex","keyCode","end","left","right","home","_childNodes$nextIndex","_childNodes$nextIndex2","preventDefault","focus","scrollIntoView","block","inline","behavior","useEffect","React","createElement","_extends","ref","className","cx","StyledContentWrapper","StyledContent","segmentGroupConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","pilledCSS","stretchCSS","orientationCSS","filledBackgroundCSS","defaults"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"SegmentGroup.js","sources":["../../../../../src/components/Segment/ui/SegmentGroup/SegmentGroup.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState, Children, useEffect } from 'react';\nimport type { SetStateAction, RefObject, MutableRefObject } from 'react';\nimport { safeUseId, useCarousel } from '@salutejs/plasma-core';\n\nimport type { RootProps } from '../../../../engines/types';\nimport { IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon';\nimport { classes, tokens } from '../../tokens';\nimport { cx } from '../../../../utils';\nimport { useSegmentInner } from '../../SegmentProvider/SegmentProvider';\n\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as pilledCSS } from './variations/_pilled/base';\nimport { base as filledBackgroundCSS } from './variations/_filledBackgound/base';\nimport { base as stretchCSS } from './variations/_stretch/base';\nimport type { SegmentGroupProps } from './SegmentGroup.types';\nimport { StyledArrow, StyledContent, StyledContentWrapper, base } from './SegmentGroup.styles';\n\nexport const segmentGroupRoot = (Root: RootProps<HTMLDivElement, SegmentGroupProps>) =>\n forwardRef<HTMLDivElement, SegmentGroupProps>((props, outerRef) => {\n const {\n id,\n selectionMode,\n pilled,\n stretch,\n filledBackground = false,\n disabled = false,\n size,\n view,\n children,\n ...rest\n } = props;\n\n const { setSelectionMode, setDisabledGroup } = useSegmentInner();\n\n const [index, setIndex] = useState(0);\n const [firstItemVisible, setFirstItemVisible] = useState(false);\n const [lastItemVisible, setLastItemVisible] = useState(false);\n\n const uniqId = safeUseId();\n const segmentGroupId = id || uniqId;\n\n const pilledAttr = view !== 'clear' && pilled;\n const filledBackgroundAttr = view !== 'clear' && filledBackground;\n const pilledClass = pilledAttr ? classes.segmentPilled : undefined;\n const filledClass = filledBackgroundAttr ? classes.segmentGroupFilledBackground : undefined;\n const stretchClass = firstItemVisible && lastItemVisible && stretch ? classes.segmentStretch : undefined;\n\n const items = Children?.map(children, (child) => child) || [];\n\n const onPrev = useCallback(() => {\n !disabled && setIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : 0));\n }, [disabled]);\n\n const onNext = useCallback(() => {\n !disabled && setIndex((prevIndex) => (prevIndex < items.length - 1 ? prevIndex + 1 : prevIndex));\n }, [disabled]);\n\n const onIntersecting = (setVisible: (value: SetStateAction<boolean>) => void) => (\n entries: IntersectionObserverEntry[],\n ) => {\n /*\n * Пробегаемся по элементам на которых есть слушатель события появления.\n * Если элемент находится в зоне видимости или выходит из нее, меняем значение флага видимости\n */\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n setVisible(true);\n } else {\n setVisible(false);\n }\n });\n };\n\n const { scrollRef, trackRef } = useCarousel({\n index,\n axis: 'x',\n scrollAlign: 'start',\n detectActive: true,\n debounceMs: 250,\n onIndexChange: setIndex,\n });\n\n const PreviousButton = useMemo(\n () => (\n <StyledArrow\n type=\"button\"\n aria-label=\"Предыдущий сегмент\"\n onClick={onPrev}\n tabIndex={disabled ? -1 : 0}\n disabled={disabled}\n >\n <IconDisclosureLeft color={`var(${tokens.arrowColor})`} />\n </StyledArrow>\n ),\n [onPrev],\n );\n\n const NextButton = useMemo(\n () => (\n <StyledArrow\n type=\"button\"\n aria-label=\"Следующий сегмент\"\n onClick={onNext}\n tabIndex={disabled ? -1 : 0}\n disabled={disabled}\n >\n <IconDisclosureRight color={`var(${tokens.arrowColor})`} />\n </StyledArrow>\n ),\n [onNext],\n );\n\n useEffect(() => {\n selectionMode && setSelectionMode(selectionMode);\n setDisabledGroup(disabled);\n }, [selectionMode, disabled]);\n\n useEffect(() => {\n // Intersection observer для первого сегмента\n const observeFirstItem = new IntersectionObserver(onIntersecting(setFirstItemVisible), {\n root: null,\n rootMargin: '0px',\n threshold: 0.5,\n });\n\n // Intersection observer для последнего сегмента\n const observeLastItem = new IntersectionObserver(onIntersecting(setLastItemVisible), {\n root: null,\n rootMargin: '0px',\n threshold: 0.5,\n });\n\n // получаем список сегментов внутри SegmentGroup\n const childrenArray = Array.from(trackRef.current?.children || []) as Array<Element>;\n if (childrenArray.length) {\n // подписываемся на событие появление внутри SegmentGroup\n observeFirstItem.observe(childrenArray[0]);\n observeLastItem.observe(childrenArray[childrenArray.length - 1]);\n }\n\n return () => {\n // отписываемся от события появления внутри SegmentGroup\n observeFirstItem.disconnect();\n observeLastItem.disconnect();\n };\n }, [children]);\n\n return (\n <Root\n view={view}\n size={size}\n id={segmentGroupId}\n ref={outerRef}\n filledBackground={filledBackgroundAttr}\n disabled={disabled}\n pilled={pilledAttr}\n className={cx(pilledClass, filledClass, stretchClass)}\n {...rest}\n >\n {!firstItemVisible && PreviousButton}\n <StyledContentWrapper ref={scrollRef as RefObject<HTMLDivElement>}>\n <StyledContent ref={trackRef as MutableRefObject<HTMLDivElement | null>}>{children}</StyledContent>\n </StyledContentWrapper>\n {!lastItemVisible && NextButton}\n </Root>\n );\n });\n\nexport const segmentGroupConfig = {\n name: 'SegmentGroup',\n tag: 'div',\n layout: segmentGroupRoot,\n base,\n variations: {\n size: {\n css: sizeCSS,\n },\n view: {\n css: viewCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n pilled: {\n css: pilledCSS,\n attrs: true,\n },\n stretch: {\n css: stretchCSS,\n attrs: true,\n },\n filledBackground: {\n css: filledBackgroundCSS,\n attrs: true,\n },\n },\n defaults: {\n view: 'clear',\n size: 'xs',\n },\n};\n"],"names":["segmentGroupRoot","Root","forwardRef","props","outerRef","id","selectionMode","pilled","stretch","_props$filledBackgrou","filledBackground","_props$disabled","disabled","size","view","children","rest","_objectWithoutProperties","_excluded","_useSegmentInner","useSegmentInner","setSelectionMode","setDisabledGroup","_useState","useState","_useState2","_slicedToArray","index","setIndex","_useState3","_useState4","firstItemVisible","setFirstItemVisible","_useState5","_useState6","lastItemVisible","setLastItemVisible","uniqId","safeUseId","segmentGroupId","pilledAttr","filledBackgroundAttr","pilledClass","classes","segmentPilled","undefined","filledClass","segmentGroupFilledBackground","stretchClass","segmentStretch","items","Children","map","child","onPrev","useCallback","prevIndex","onNext","length","onIntersecting","setVisible","entries","forEach","entry","isIntersecting","_useCarousel","useCarousel","axis","scrollAlign","detectActive","debounceMs","onIndexChange","scrollRef","trackRef","PreviousButton","useMemo","React","createElement","StyledArrow","type","onClick","tabIndex","IconDisclosureLeft","color","concat","tokens","arrowColor","NextButton","IconDisclosureRight","useEffect","_trackRef$current","observeFirstItem","IntersectionObserver","root","rootMargin","threshold","observeLastItem","childrenArray","Array","from","current","observe","disconnect","_extends","ref","className","cx","StyledContentWrapper","StyledContent","segmentGroupConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","pilledCSS","stretchCSS","filledBackgroundCSS","defaults"],"mappings":"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"}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import './SegmentGroup.
|
1
|
+
import './SegmentGroup.styles_m9i9p0.css';
|
2
2
|
'use strict';
|
3
3
|
|
4
4
|
Object.defineProperty(exports, '__esModule', { value: true });
|
@@ -16,7 +16,13 @@ var StyledContentWrapper = /*#__PURE__*/react.styled('div')({
|
|
16
16
|
"class": "spuzt9m",
|
17
17
|
propsAsIs: false
|
18
18
|
});
|
19
|
+
var StyledArrow = /*#__PURE__*/react.styled('button')({
|
20
|
+
name: "StyledArrow",
|
21
|
+
"class": "s1qf4oye",
|
22
|
+
propsAsIs: false
|
23
|
+
});
|
19
24
|
|
25
|
+
exports.StyledArrow = StyledArrow;
|
20
26
|
exports.StyledContent = StyledContent;
|
21
27
|
exports.StyledContentWrapper = StyledContentWrapper;
|
22
28
|
exports.base = base;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SegmentGroup.styles.js","sources":["../../../../../src/components/Segment/ui/SegmentGroup/SegmentGroup.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { tokens } from '../../tokens';\n\nexport const base = css`\n display: inline-flex;\n align-items: center;\n
|
1
|
+
{"version":3,"file":"SegmentGroup.styles.js","sources":["../../../../../src/components/Segment/ui/SegmentGroup/SegmentGroup.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { addFocus } from '../../../../mixins';\nimport { tokens } from '../../tokens';\n\nexport const base = css`\n display: inline-flex;\n align-items: center;\n`;\n\nexport const StyledContent = styled.div`\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n`;\n\nexport const StyledContentWrapper = styled.div`\n position: relative;\n height: 100%;\n margin: 0;\n\n /* allows correctly display outline focus on segment item */\n padding: 0.25rem;\n\n /* stylelint-disable-next-line selector-max-empty-lines, selector-nested-pattern, selector-type-no-unknown */\n ::-webkit-scrollbar {\n display: none;\n }\n\n overflow-x: auto;\n overflow-y: hidden;\n scroll-behavior: smooth;\n scroll-snap-type: x mandatory;\n`;\n\nexport const StyledArrow = styled.button`\n display: flex;\n cursor: pointer;\n border: none;\n background-color: transparent;\n padding: 0;\n outline: none;\n\n ${addFocus({\n outlineSize: '0.063rem',\n outlineOffset: '-0.125rem',\n outlineColor: `var(${tokens.outlineFocusColor})`,\n outlineRadius: 'calc(var(--plasma_private-outline-radius) - 0.063rem)',\n })};\n\n &[disabled] {\n cursor: not-allowed;\n }\n`;\n"],"names":["base","StyledContent","styled","name","class","propsAsIs","StyledContentWrapper","StyledArrow"],"mappings":";;;;;;AAMO,IAAMA,IAAI,GAGhB,UAAA;AAEM,IAAMC,aAAa,gBAAGC,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAIlC,EAAA;AAEM,IAAMC,oBAAoB,gBAAGJ,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,sBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAiBzC,EAAA;AAEM,IAAME,WAAW,gBAAGL,YAAM,CAAA,QAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAkBhC;;;;;;;"}
|
@@ -0,0 +1,4 @@
|
|
1
|
+
.b2sori2{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;}
|
2
|
+
.sin9wo2{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;}
|
3
|
+
.spuzt9m{position:relative;height:100%;margin:0;padding:0.25rem;overflow-x:auto;overflow-y:hidden;-webkit-scroll-behavior:smooth;-moz-scroll-behavior:smooth;-ms-scroll-behavior:smooth;scroll-behavior:smooth;-webkit-scroll-snap-type:x mandatory;-moz-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;}.spuzt9m::-webkit-scrollbar{display:none;}
|
4
|
+
.s1qf4oye{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;position:relative;}.s1qf4oye::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;}.s1qf4oye.focus-visible:focus::before,.s1qf4oye[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-segment-outline-focus-color);}.s1qf4oye[disabled]{cursor:not-allowed;}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"base.js","sources":["../../../../../../../src/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../../../tokens';\n\nexport const base = css`\n
|
1
|
+
{"version":3,"file":"base.js","sources":["../../../../../../../src/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../../../tokens';\n\nexport const base = css`\n &.${String(classes.segmentGroupFilledBackground)} {\n background-color: var(${tokens.groupFilledBackgroundColor});\n }\n`;\n"],"names":["base"],"mappings":";;;;AAIO,IAAMA,IAAI,GAIhB;;;;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
.b13sjoz1.segment-group-filled-background{background-color:var(--plasma-segment-group-filled-background-color);}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"base.js","sources":["../../../../../../../src/components/Segment/ui/SegmentGroup/variations/_size/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { tokens } from '../../../../tokens';\n\nexport const base = css`\n width: var(${tokens.groupWidth});\n height: var(${tokens.groupHeight});\n\n
|
1
|
+
{"version":3,"file":"base.js","sources":["../../../../../../../src/components/Segment/ui/SegmentGroup/variations/_size/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { tokens } from '../../../../tokens';\n\nexport const base = css`\n width: var(${tokens.groupWidth});\n height: var(${tokens.groupHeight});\n\n --plasma_private-outline-radius: var(${tokens.groupBorderRadius});\n border-radius: var(${tokens.groupBorderRadius});\n`;\n"],"names":["base"],"mappings":";;;;AAIO,IAAMA,IAAI,GAMhB;;;;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
.b16s69xg{width:var(--plasma-segment-group-width);height:var(--plasma-segment-group-height);--plasma_private-outline-radius:var(--plasma-segment-group-border-radius);border-radius:var(--plasma-segment-group-border-radius);}
|
@@ -1,12 +1,10 @@
|
|
1
1
|
.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);}
|
2
2
|
|
3
|
-
.
|
3
|
+
.base_1m1u2ys_b1tykljf__1c5eb012{color:var(--plasma-segment-item-color);background-color:var(--plasma-segment-item-background-color);}.base_1m1u2ys_b1tykljf__1c5eb012:hover{color:var(--plasma-segment-item-color-hover);background-color:var(--plasma-segment-item-background-color-hover);}.base_1m1u2ys_b1tykljf__1c5eb012.base_1m1u2ys_selectedSegmentItem__1c5eb012{color:var(--plasma-segment-item-selected-color);background-color:var(--plasma-segment-item-selected-background-color);}.base_1m1u2ys_b1tykljf__1c5eb012.base_1m1u2ys_selectedSegmentItem__1c5eb012:hover{color:var(--plasma-segment-item-selected-color-hover);background-color:var(--plasma-segment-item-selected-background-color-hover);}
|
4
4
|
|
5
5
|
.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);}
|
6
6
|
|
7
|
-
.
|
7
|
+
.base_15s0fel_b795lc7__4501241a.base_15s0fel_segmentPilled__4501241a{--plasma_private-outline-radius:var(--plasma-segment-item-pilled-border-radius);border-radius:var(--plasma-segment-item-pilled-border-radius);}
|
8
8
|
|
9
|
-
.
|
10
|
-
.
|
11
|
-
.SegmentItem_styles_1s77lh9_r1gg7fed__b36be36d{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-additional-color);}
|
12
|
-
.SegmentItem_styles_1s77lh9_lctm1j9__b36be36d{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-right:var(--plasma-segment-item-content-icon-margin);color:inherit;}
|
9
|
+
.SegmentItem_styles_18h1p52_bxcdyja__b7ac762c{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;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-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_18h1p52_bxcdyja__b7ac762c:first-child{margin-left:0;}.SegmentItem_styles_18h1p52_bxcdyja__b7ac762c::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;}.SegmentItem_styles_18h1p52_bxcdyja__b7ac762c.SegmentItem_styles_18h1p52_focusVisible__b7ac762c:focus::before,.SegmentItem_styles_18h1p52_bxcdyja__b7ac762c[data-focus-visible-added]::before{z-index:1;outline:none;box-shadow:0 0 0 0.063rem var(--plasma-segment-outline-focus-color);}
|
10
|
+
.SegmentItem_styles_18h1p52_sxjfe87__b7ac762c{display:inline-block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
@@ -15,20 +15,16 @@ var base$3 = require('./variations/_pilled/base.js');
|
|
15
15
|
var SegmentItem_styles = require('./SegmentItem.styles.js');
|
16
16
|
var extractTextFrom = require('../../../../utils/extractTextFrom.js');
|
17
17
|
|
18
|
-
var _excluded = ["size", "view", "id", "label", "value", "pilled", "
|
18
|
+
var _excluded = ["size", "view", "id", "label", "value", "pilled", "customHandleSelect", "aria-label"];
|
19
19
|
var segmentItemRoot = function segmentItemRoot(Root) {
|
20
20
|
return /*#__PURE__*/React.forwardRef(function (props, outerRef) {
|
21
21
|
var size = props.size,
|
22
|
-
|
23
|
-
view = _props$view === void 0 ? 'default' : _props$view,
|
22
|
+
view = props.view,
|
24
23
|
id = props.id,
|
25
24
|
label = props.label,
|
26
25
|
value = props.value,
|
27
26
|
pilled = props.pilled,
|
28
|
-
contentLeft = props.contentLeft,
|
29
|
-
contentRight = props.contentRight,
|
30
27
|
customHandleSelect = props.customHandleSelect,
|
31
|
-
skipSelection = props.skipSelection,
|
32
28
|
ariaLabelExternal = props['aria-label'],
|
33
29
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
|
34
30
|
var _useSegmentInner = SegmentProvider.useSegmentInner(),
|
@@ -41,21 +37,17 @@ var segmentItemRoot = function segmentItemRoot(Root) {
|
|
41
37
|
var ariaLabelDefault = React.useMemo(function () {
|
42
38
|
return extractTextFrom.extractTextFrom(label);
|
43
39
|
}, [label]);
|
44
|
-
var pilledAttr = pilled;
|
40
|
+
var pilledAttr = view !== 'clear' && pilled;
|
45
41
|
var pilledClass = pilledAttr ? tokens.classes.segmentPilled : undefined;
|
46
|
-
var xsSize = size === 'xs' ? tokens.classes.segmentXsSize : undefined;
|
47
42
|
var isSelected = selectedSegmentItems === null || selectedSegmentItems === void 0 ? void 0 : selectedSegmentItems.includes(value || ariaLabelDefault);
|
48
43
|
var selectedClass = isSelected ? tokens.classes.selectedSegmentItem : undefined;
|
49
44
|
var handleSelectSegment = React.useCallback(function (event) {
|
50
45
|
if (disabledGroup) {
|
51
46
|
return;
|
52
47
|
}
|
53
|
-
if (skipSelection) {
|
54
|
-
return;
|
55
|
-
}
|
56
48
|
customHandleSelect === null || customHandleSelect === void 0 || customHandleSelect(event);
|
57
49
|
handleSelect === null || handleSelect === void 0 || handleSelect(value || ariaLabelDefault);
|
58
|
-
}, [selectionMode
|
50
|
+
}, [selectionMode]);
|
59
51
|
return /*#__PURE__*/React.createElement(Root, _rollupPluginBabelHelpers.extends({
|
60
52
|
view: view,
|
61
53
|
size: size,
|
@@ -64,11 +56,11 @@ var segmentItemRoot = function segmentItemRoot(Root) {
|
|
64
56
|
"aria-label": ariaLabelExternal || ariaLabelDefault,
|
65
57
|
value: value,
|
66
58
|
pilled: pilledAttr,
|
67
|
-
className: index.cx(selectedClass, pilledClass
|
59
|
+
className: index.cx(selectedClass, pilledClass),
|
68
60
|
onClick: handleSelectSegment,
|
69
61
|
tabIndex: disabledGroup ? -1 : 0,
|
70
62
|
disabled: disabledGroup
|
71
|
-
}, rest),
|
63
|
+
}, rest), /*#__PURE__*/React.createElement(SegmentItem_styles.StyledContent, null, label || value));
|
72
64
|
});
|
73
65
|
};
|
74
66
|
var segmentItemConfig = {
|
@@ -93,7 +85,7 @@ var segmentItemConfig = {
|
|
93
85
|
}
|
94
86
|
},
|
95
87
|
defaults: {
|
96
|
-
view: '
|
88
|
+
view: 'clear',
|
97
89
|
size: 'xs'
|
98
90
|
}
|
99
91
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SegmentItem.js","sources":["../../../../../src/components/Segment/ui/SegmentItem/SegmentItem.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport type { MouseEvent } from 'react';\nimport { safeUseId } from '@salutejs/plasma-core';\n\nimport type { RootProps } from '../../../../engines/types';\nimport { cx, extractTextFrom } from '../../../../utils';\nimport { classes } from '../../tokens';\nimport { useSegmentInner } from '../../SegmentProvider/SegmentProvider';\n\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as pilledCSS } from './variations/_pilled/base';\nimport type { SegmentItemProps } from './SegmentItem.types';\nimport { StyledContent, base
|
1
|
+
{"version":3,"file":"SegmentItem.js","sources":["../../../../../src/components/Segment/ui/SegmentItem/SegmentItem.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport type { MouseEvent } from 'react';\nimport { safeUseId } from '@salutejs/plasma-core';\n\nimport type { RootProps } from '../../../../engines/types';\nimport { cx, extractTextFrom } from '../../../../utils';\nimport { classes } from '../../tokens';\nimport { useSegmentInner } from '../../SegmentProvider/SegmentProvider';\n\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as pilledCSS } from './variations/_pilled/base';\nimport type { SegmentItemProps } from './SegmentItem.types';\nimport { StyledContent, base } from './SegmentItem.styles';\n\nexport const segmentItemRoot = (Root: RootProps<HTMLLabelElement, SegmentItemProps>) =>\n forwardRef<HTMLLabelElement, SegmentItemProps>((props, outerRef) => {\n const {\n size,\n view,\n id,\n label,\n value,\n pilled,\n customHandleSelect,\n 'aria-label': ariaLabelExternal,\n ...rest\n } = props;\n const { selectionMode, disabledGroup, handleSelect, selectedSegmentItems } = useSegmentInner();\n\n const uniqId = safeUseId();\n const segmentId = id || `label-${uniqId}`;\n\n const ariaLabelDefault = useMemo(() => extractTextFrom(label), [label]);\n const pilledAttr = view !== 'clear' && pilled;\n const pilledClass = pilledAttr ? classes.segmentPilled : undefined;\n\n const isSelected = selectedSegmentItems?.includes(value || ariaLabelDefault);\n const selectedClass = isSelected ? classes.selectedSegmentItem : undefined;\n\n const handleSelectSegment = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n if (disabledGroup) {\n return;\n }\n\n customHandleSelect?.(event);\n handleSelect?.(value || ariaLabelDefault);\n },\n [selectionMode],\n );\n\n return (\n <Root\n view={view}\n size={size}\n id={segmentId}\n ref={outerRef}\n aria-label={ariaLabelExternal || ariaLabelDefault}\n value={value}\n pilled={pilledAttr}\n className={cx(selectedClass, pilledClass)}\n onClick={handleSelectSegment}\n tabIndex={disabledGroup ? -1 : 0}\n disabled={disabledGroup}\n {...rest}\n >\n <StyledContent>{label || value}</StyledContent>\n </Root>\n );\n });\n\nexport const segmentItemConfig = {\n name: 'SegmentItem',\n tag: 'button',\n layout: segmentItemRoot,\n base,\n variations: {\n size: {\n css: sizeCSS,\n },\n view: {\n css: viewCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n pilled: {\n css: pilledCSS,\n attrs: true,\n },\n },\n defaults: {\n view: 'clear',\n size: 'xs',\n },\n};\n"],"names":["segmentItemRoot","Root","forwardRef","props","outerRef","size","view","id","label","value","pilled","customHandleSelect","ariaLabelExternal","rest","_objectWithoutProperties","_excluded","_useSegmentInner","useSegmentInner","selectionMode","disabledGroup","handleSelect","selectedSegmentItems","uniqId","safeUseId","segmentId","concat","ariaLabelDefault","useMemo","extractTextFrom","pilledAttr","pilledClass","classes","segmentPilled","undefined","isSelected","includes","selectedClass","selectedSegmentItem","handleSelectSegment","useCallback","event","React","createElement","_extends","ref","className","cx","onClick","tabIndex","disabled","StyledContent","segmentItemConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","pilledCSS","defaults"],"mappings":";;;;;;;;;;;;;;;;;;IAgBaA,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,IAAmD,EAAA;AAAA,EAAA,oBAC/EC,gBAAU,CAAqC,UAACC,KAAK,EAAEC,QAAQ,EAAK;AAChE,IAAA,IACIC,IAAI,GASJF,KAAK,CATLE,IAAI;MACJC,IAAI,GAQJH,KAAK,CARLG,IAAI;MACJC,EAAE,GAOFJ,KAAK,CAPLI,EAAE;MACFC,KAAK,GAMLL,KAAK,CANLK,KAAK;MACLC,KAAK,GAKLN,KAAK,CALLM,KAAK;MACLC,MAAM,GAINP,KAAK,CAJLO,MAAM;MACNC,kBAAkB,GAGlBR,KAAK,CAHLQ,kBAAkB;MACJC,iBAAiB,GAE/BT,KAAK,CAFL,YAAY,CAAA;AACTU,MAAAA,IAAI,GAAAC,iDAAA,CACPX,KAAK,EAAAY,SAAA,CAAA,CAAA;AACT,IAAA,IAAAC,gBAAA,GAA6EC,+BAAe,EAAE;MAAtFC,aAAa,GAAAF,gBAAA,CAAbE,aAAa;MAAEC,aAAa,GAAAH,gBAAA,CAAbG,aAAa;MAAEC,YAAY,GAAAJ,gBAAA,CAAZI,YAAY;MAAEC,oBAAoB,GAAAL,gBAAA,CAApBK,oBAAoB,CAAA;AAExE,IAAA,IAAMC,MAAM,GAAGC,oBAAS,EAAE,CAAA;AAC1B,IAAA,IAAMC,SAAS,GAAGjB,EAAE,aAAAkB,MAAA,CAAaH,MAAM,CAAE,CAAA;IAEzC,IAAMI,gBAAgB,GAAGC,aAAO,CAAC,YAAA;MAAA,OAAMC,+BAAe,CAACpB,KAAK,CAAC,CAAA;KAAE,EAAA,CAACA,KAAK,CAAC,CAAC,CAAA;AACvE,IAAA,IAAMqB,UAAU,GAAGvB,IAAI,KAAK,OAAO,IAAII,MAAM,CAAA;IAC7C,IAAMoB,WAAW,GAAGD,UAAU,GAAGE,cAAO,CAACC,aAAa,GAAGC,SAAS,CAAA;AAElE,IAAA,IAAMC,UAAU,GAAGb,oBAAoB,KAAA,IAAA,IAApBA,oBAAoB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAApBA,oBAAoB,CAAEc,QAAQ,CAAC1B,KAAK,IAAIiB,gBAAgB,CAAC,CAAA;IAC5E,IAAMU,aAAa,GAAGF,UAAU,GAAGH,cAAO,CAACM,mBAAmB,GAAGJ,SAAS,CAAA;AAE1E,IAAA,IAAMK,mBAAmB,GAAGC,iBAAW,CACnC,UAACC,KAAoC,EAAK;AACtC,MAAA,IAAIrB,aAAa,EAAE;AACf,QAAA,OAAA;AACJ,OAAA;AAEAR,MAAAA,kBAAkB,aAAlBA,kBAAkB,KAAA,KAAA,CAAA,IAAlBA,kBAAkB,CAAG6B,KAAK,CAAC,CAAA;MAC3BpB,YAAY,KAAA,IAAA,IAAZA,YAAY,KAAZA,KAAAA,CAAAA,IAAAA,YAAY,CAAGX,KAAK,IAAIiB,gBAAgB,CAAC,CAAA;AAC7C,KAAC,EACD,CAACR,aAAa,CAClB,CAAC,CAAA;AAED,IAAA,oBACIuB,KAAA,CAAAC,aAAA,CAACzC,IAAI,EAAA0C,iCAAA,CAAA;AACDrC,MAAAA,IAAI,EAAEA,IAAK;AACXD,MAAAA,IAAI,EAAEA,IAAK;AACXE,MAAAA,EAAE,EAAEiB,SAAU;AACdoB,MAAAA,GAAG,EAAExC,QAAS;MACd,YAAYQ,EAAAA,iBAAiB,IAAIc,gBAAiB;AAClDjB,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,MAAM,EAAEmB,UAAW;AACnBgB,MAAAA,SAAS,EAAEC,QAAE,CAACV,aAAa,EAAEN,WAAW,CAAE;AAC1CiB,MAAAA,OAAO,EAAET,mBAAoB;AAC7BU,MAAAA,QAAQ,EAAE7B,aAAa,GAAG,CAAC,CAAC,GAAG,CAAE;AACjC8B,MAAAA,QAAQ,EAAE9B,aAAAA;AAAc,KAAA,EACpBN,IAAI,CAAA,eAER4B,KAAA,CAAAC,aAAA,CAACQ,gCAAa,EAAA,IAAA,EAAE1C,KAAK,IAAIC,KAAqB,CAC5C,CAAC,CAAA;AAEf,GAAC,CAAC,CAAA;AAAA,EAAA;AAEC,IAAM0C,iBAAiB,GAAG;AAC7BC,EAAAA,IAAI,EAAE,aAAa;AACnBC,EAAAA,GAAG,EAAE,QAAQ;AACbC,EAAAA,MAAM,EAAEtD,eAAe;AACvBuD,EAAAA,IAAI,EAAJA,uBAAI;AACJC,EAAAA,UAAU,EAAE;AACRnD,IAAAA,IAAI,EAAE;AACFoD,MAAAA,GAAG,EAAEC,SAAAA;KACR;AACDpD,IAAAA,IAAI,EAAE;AACFmD,MAAAA,GAAG,EAAEE,WAAAA;KACR;AACDV,IAAAA,QAAQ,EAAE;AACNQ,MAAAA,GAAG,EAAEG,WAAW;AAChBC,MAAAA,KAAK,EAAE,IAAA;KACV;AACDnD,IAAAA,MAAM,EAAE;AACJ+C,MAAAA,GAAG,EAAEK,WAAS;AACdD,MAAAA,KAAK,EAAE,IAAA;AACX,KAAA;GACH;AACDE,EAAAA,QAAQ,EAAE;AACNzD,IAAAA,IAAI,EAAE,OAAO;AACbD,IAAAA,IAAI,EAAE,IAAA;AACV,GAAA;AACJ;;;;;"}
|
@@ -1,46 +1,17 @@
|
|
1
|
-
import './SegmentItem.
|
1
|
+
import './SegmentItem.styles_18h1p52.css';
|
2
2
|
'use strict';
|
3
3
|
|
4
4
|
Object.defineProperty(exports, '__esModule', { value: true });
|
5
5
|
|
6
6
|
var react = require('@linaria/react');
|
7
|
-
var tokens = require('../../tokens.js');
|
8
7
|
|
9
8
|
var base = "bxcdyja";
|
10
|
-
var _exp5 = function _exp5() {
|
11
|
-
return function (_ref) {
|
12
|
-
var hasRightMargin = _ref.hasRightMargin;
|
13
|
-
return hasRightMargin ? "var(".concat(tokens.tokens.itemIconMargin, ")") : '0';
|
14
|
-
};
|
15
|
-
};
|
16
|
-
var _exp6 = function _exp6() {
|
17
|
-
return function (_ref2) {
|
18
|
-
var hasLeftMargin = _ref2.hasLeftMargin;
|
19
|
-
return hasLeftMargin ? "var(".concat(tokens.tokens.itemIconMargin, ")") : '0';
|
20
|
-
};
|
21
|
-
};
|
22
9
|
var StyledContent = /*#__PURE__*/react.styled('div')({
|
23
10
|
name: "StyledContent",
|
24
11
|
"class": "sxjfe87",
|
25
|
-
propsAsIs: false,
|
26
|
-
vars: {
|
27
|
-
"sxjfe87-0": [/*#__PURE__*/_exp5()],
|
28
|
-
"sxjfe87-1": [/*#__PURE__*/_exp6()]
|
29
|
-
}
|
30
|
-
});
|
31
|
-
var RightContent = /*#__PURE__*/react.styled('div')({
|
32
|
-
name: "RightContent",
|
33
|
-
"class": "r1gg7fed",
|
34
|
-
propsAsIs: false
|
35
|
-
});
|
36
|
-
var LeftContent = /*#__PURE__*/react.styled('div')({
|
37
|
-
name: "LeftContent",
|
38
|
-
"class": "lctm1j9",
|
39
12
|
propsAsIs: false
|
40
13
|
});
|
41
14
|
|
42
|
-
exports.LeftContent = LeftContent;
|
43
|
-
exports.RightContent = RightContent;
|
44
15
|
exports.StyledContent = StyledContent;
|
45
16
|
exports.base = base;
|
46
17
|
//# sourceMappingURL=SegmentItem.styles.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SegmentItem.styles.js","sources":["../../../../../src/components/Segment/ui/SegmentItem/SegmentItem.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\nimport { css } from '@linaria/core';\n\nimport { addFocus, applyEllipsis } from '../../../../mixins';\nimport { tokens } from '../../tokens';\n\nexport const base = css`\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n
|
1
|
+
{"version":3,"file":"SegmentItem.styles.js","sources":["../../../../../src/components/Segment/ui/SegmentItem/SegmentItem.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\nimport { css } from '@linaria/core';\n\nimport { addFocus, applyEllipsis } from '../../../../mixins';\nimport { tokens } from '../../tokens';\n\nexport const base = css`\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n align-items: center;\n\n appearance: none;\n border: none;\n outline: none;\n cursor: pointer;\n margin-left: var(${tokens.itemMarginLeft});\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n &:first-child {\n margin-left: 0;\n }\n\n ${addFocus({\n outlineSize: '0.063rem',\n outlineOffset: '-0.125rem',\n outlineColor: `var(${tokens.outlineFocusColor})`,\n outlineRadius: 'calc(var(--plasma_private-outline-radius) + 0.063rem)',\n customFocusRules: `\n &.focus-visible:focus,\n &[data-focus-visible-added] {\n &::before {\n z-index: 1;\n outline: none;\n box-shadow: 0 0 0 0.063rem var(${tokens.outlineFocusColor});\n }\n }\n `,\n })};\n`;\n\nexport const StyledContent = styled.div`\n display: inline-block;\n width: fit-content;\n ${applyEllipsis()};\n`;\n"],"names":["base","StyledContent","styled","name","class","propsAsIs"],"mappings":";;;;;;AAMO,IAAMA,IAAI,GAmChB,UAAA;AAEM,IAAMC,aAAa,gBAAGC,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAIlC;;;;;"}
|