@salutejs/plasma-new-hope 0.271.0-canary.1778.13390888088.0 → 0.271.0-canary.1782.13387584790.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Combobox/ComboboxNew/Combobox.js +5 -1
- package/cjs/components/Combobox/ComboboxNew/Combobox.js.map +1 -1
- package/cjs/components/Notification/Notification.css +11 -11
- package/cjs/components/Notification/Notification.js +3 -7
- package/cjs/components/Notification/Notification.js.map +1 -1
- package/cjs/components/Notification/Notification.styles.js +26 -42
- package/cjs/components/Notification/Notification.styles.js.map +1 -1
- package/cjs/components/Notification/{Notification.styles_gk4bgs.css → Notification.styles_1u5gusp.css} +2 -2
- package/cjs/components/Notification/Notification.tokens.js +0 -1
- package/cjs/components/Notification/Notification.tokens.js.map +1 -1
- package/cjs/components/Notification/Notification.types.js.map +1 -1
- package/cjs/components/Notification/NotificationsPortal.js +0 -1
- package/cjs/components/Notification/NotificationsPortal.js.map +1 -1
- package/cjs/components/Notification/NotificationsProvider.css +11 -11
- package/cjs/index.css +11 -11
- package/emotion/cjs/components/Combobox/ComboboxNew/Combobox.js +5 -1
- package/emotion/cjs/components/Notification/Notification.js +3 -7
- package/emotion/cjs/components/Notification/Notification.styles.js +26 -32
- package/emotion/cjs/components/Notification/Notification.tokens.js +0 -1
- package/emotion/cjs/components/Notification/NotificationsPortal.js +1 -2
- package/emotion/cjs/examples/plasma_b2c/components/Notification/Notification.config.js +7 -11
- package/emotion/cjs/examples/plasma_b2c/components/Notification/Notification.stories.tsx +3 -35
- package/emotion/cjs/examples/plasma_web/components/Notification/Notification.config.js +7 -11
- package/emotion/cjs/examples/plasma_web/components/Notification/Notification.stories.tsx +2 -18
- package/emotion/es/components/Combobox/ComboboxNew/Combobox.js +5 -1
- package/emotion/es/components/Notification/Notification.js +3 -7
- package/emotion/es/components/Notification/Notification.styles.js +26 -32
- package/emotion/es/components/Notification/Notification.tokens.js +0 -1
- package/emotion/es/components/Notification/NotificationsPortal.js +1 -2
- package/emotion/es/examples/plasma_b2c/components/Notification/Notification.config.js +7 -11
- package/emotion/es/examples/plasma_b2c/components/Notification/Notification.stories.tsx +3 -35
- package/emotion/es/examples/plasma_web/components/Notification/Notification.config.js +7 -11
- package/emotion/es/examples/plasma_web/components/Notification/Notification.stories.tsx +2 -18
- package/es/components/Combobox/ComboboxNew/Combobox.js +5 -1
- package/es/components/Combobox/ComboboxNew/Combobox.js.map +1 -1
- package/es/components/Notification/Notification.css +11 -11
- package/es/components/Notification/Notification.js +3 -7
- package/es/components/Notification/Notification.js.map +1 -1
- package/es/components/Notification/Notification.styles.js +26 -42
- package/es/components/Notification/Notification.styles.js.map +1 -1
- package/es/components/Notification/{Notification.styles_gk4bgs.css → Notification.styles_1u5gusp.css} +2 -2
- package/es/components/Notification/Notification.tokens.js +0 -1
- package/es/components/Notification/Notification.tokens.js.map +1 -1
- package/es/components/Notification/Notification.types.js.map +1 -1
- package/es/components/Notification/NotificationsPortal.js +0 -1
- package/es/components/Notification/NotificationsPortal.js.map +1 -1
- package/es/components/Notification/NotificationsProvider.css +11 -11
- package/es/index.css +11 -11
- package/package.json +2 -2
- package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.js +5 -1
- package/styled-components/cjs/components/Notification/Notification.js +3 -7
- package/styled-components/cjs/components/Notification/Notification.styles.js +15 -21
- package/styled-components/cjs/components/Notification/Notification.tokens.js +0 -1
- package/styled-components/cjs/components/Notification/NotificationsPortal.js +0 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Notification/Notification.config.js +1 -5
- package/styled-components/cjs/examples/plasma_b2c/components/Notification/Notification.stories.tsx +3 -35
- package/styled-components/cjs/examples/plasma_web/components/Notification/Notification.config.js +1 -5
- package/styled-components/cjs/examples/plasma_web/components/Notification/Notification.stories.tsx +2 -18
- package/styled-components/es/components/Combobox/ComboboxNew/Combobox.js +5 -1
- package/styled-components/es/components/Notification/Notification.js +3 -7
- package/styled-components/es/components/Notification/Notification.styles.js +15 -21
- package/styled-components/es/components/Notification/Notification.tokens.js +0 -1
- package/styled-components/es/components/Notification/NotificationsPortal.js +0 -1
- package/styled-components/es/examples/plasma_b2c/components/Notification/Notification.config.js +1 -5
- package/styled-components/es/examples/plasma_b2c/components/Notification/Notification.stories.tsx +3 -35
- package/styled-components/es/examples/plasma_web/components/Notification/Notification.config.js +1 -5
- package/styled-components/es/examples/plasma_web/components/Notification/Notification.stories.tsx +2 -18
- package/types/components/Combobox/ComboboxNew/Combobox.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts +4 -0
- package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts.map +1 -1
- package/types/components/Notification/Notification.d.ts.map +1 -1
- package/types/components/Notification/Notification.styles.d.ts +2 -6
- package/types/components/Notification/Notification.styles.d.ts.map +1 -1
- package/types/components/Notification/Notification.tokens.d.ts +0 -1
- package/types/components/Notification/Notification.tokens.d.ts.map +1 -1
- package/types/components/Notification/Notification.types.d.ts +0 -8
- package/types/components/Notification/Notification.types.d.ts.map +1 -1
- package/types/components/Notification/NotificationsPortal.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Combobox/Combobox.d.ts +48 -0
- package/types/examples/plasma_b2c/components/Combobox/Combobox.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Notification/Notification.config.d.ts +0 -4
- package/types/examples/plasma_b2c/components/Notification/Notification.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Combobox/Combobox.d.ts +48 -0
- package/types/examples/plasma_web/components/Combobox/Combobox.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Notification/Notification.config.d.ts +0 -4
- package/types/examples/plasma_web/components/Notification/Notification.config.d.ts.map +1 -1
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Notification.styles.js","sources":["../../../src/components/Notification/Notification.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { applyHyphens } from '../../mixins';\nimport { buttonConfig } from '../Button';\nimport { component, mergeConfig } from '../../engines';\n\nimport { classes, tokens } from './Notification.tokens';\nimport { CloseIconType, IconPlacementType, NotificationPlacement, placements } from './Notification.types';\n\nexport const StyledNotification = css`\n width: fit-content;\n`;\n\nconst mergedButtonConfig = mergeConfig(buttonConfig);\nconst Button = component(mergedButtonConfig);\n\nexport const CloseIconWrapper = styled(Button)`\n position: absolute;\n width: var(${tokens.closeIconButtonSize});\n height: var(${tokens.closeIconButtonSize});\n align-self: var(${tokens.horisontalIconCloseAlignSelf});\n\n color: var(${tokens.closeIconColor});\n\n :hover {\n color: var(${tokens.closeIconColorOnHover});\n }\n\n &.${classes.horizontal} {\n position: relative;\n }\n`;\n\nexport const Wrapper = styled.div`\n position: relative;\n box-sizing: border-box;\n\n background: var(${tokens.background});\n border-radius: var(${tokens.borderRadius});\n border: var(${tokens.borderWidth}) solid var(${tokens.borderColor});\n\n &.${classes.horizontal} {\n display: flex;\n align-items: center;\n gap: var(${tokens.horizontalLayoutGap});\n }\n`;\n\nexport const ButtonsWrapper = styled.div<IconPlacementType>`\n margin-top: var(${tokens.buttonsMarginTop});\n margin-left: ${({ iconPlacement }) =>\n iconPlacement === placements.left ? `var(${tokens.buttonsMarginLeft})` : 'unset'};\n\n align-self: var(${tokens.horisontalActionsAlignSelf});\n\n &.${classes.horizontal} {\n margin-top: unset;\n margin-left: unset;\n }\n`;\n\nexport const IconWrapper = styled.div<IconPlacementType & { iconColor?: string }>`\n width: var(${tokens.contentLeftIconSize});\n height: var(${tokens.contentLeftIconSize});\n align-self: var(${tokens.horisontalIconLeftAlignSelf});\n color: ${({ iconColor }) => iconColor || `var(${tokens.contentLeftIconColor})`};\n\n margin-right: ${({ iconPlacement }) =>\n iconPlacement === placements.left ? `var(${tokens.contentLeftIconMargin})` : 'unset'};\n margin-bottom: ${({ iconPlacement }) =>\n iconPlacement === placements.top ? `var(${tokens.contentTopIconMargin})` : 'unset'};\n\n &.${classes.horizontal} {\n margin-right: var(${tokens.horizontalLayoutLeftIconMargin});\n margin-bottom: unset;\n }\n`;\n\nexport const ContentBox = styled.div<IconPlacementType>`\n // TODO: переделать, когда научимся работать с токенами при пересечнии свойств\n // issue #909\n display: ${({ iconPlacement }) => (iconPlacement === placements.left ? 'flex' : 'block')};\n\n padding-top: ${({ iconPlacement }) =>\n iconPlacement ? `var(${tokens.contentPaddingTop})` : `var(${tokens.contentPaddingTopWithoutIcon})`};\n\n &.${classes.horizontal} {\n padding: unset;\n display: flex;\n align-items: center;\n flex-grow: 1;\n }\n`;\n\nexport const TextBox = styled.div<CloseIconType & IconPlacementType>`\n padding: var(${tokens.textboxPaddingTop}) var(${tokens.textboxPaddingRight}) var(${tokens.textboxPaddingBottom})\n var(${tokens.textboxPaddingLeft});\n\n padding-top: ${({ iconPlacement }) =>\n !iconPlacement || iconPlacement === placements.top\n ? `var(${tokens.textboxPaddingTopWithTopIcon})`\n : `var(${tokens.textboxPaddingTop})`};\n padding-right: ${({ showCloseIcon, iconPlacement }) =>\n showCloseIcon && iconPlacement !== placements.top\n ? `var(${tokens.textboxPaddingRightWithCloseIcon})`\n : `var(${tokens.textboxPaddingRight})`};\n\n display: flex;\n flex-direction: column;\n row-gap: var(${tokens.textboxGap});\n word-break: break-word;\n\n &.${classes.horizontal} {\n padding: unset;\n }\n`;\n\nexport const StyledTitle = styled.div<{ textColor?: string }>`\n font-family: var(${tokens.titleFontFamily});\n font-size: var(${tokens.titleFontSize});\n font-style: var(${tokens.titleFontStyle});\n font-weight: var(${tokens.titleFontWeight});\n letter-spacing: var(${tokens.titleFontLetterSpacing});\n line-height: var(${tokens.titleFontLineHeight});\n ${String(applyHyphens)};\n\n color: ${({ textColor }) => textColor || `var(${tokens.titleColor})`};\n`;\n\nexport const StyledContent = styled.div`\n font-family: var(${tokens.contentFontFamily});\n font-size: var(${tokens.contentFontSize});\n font-style: var(${tokens.contentFontStyle});\n font-weight: var(${tokens.contentFontWeight});\n letter-spacing: var(${tokens.contentFontLetterSpacing});\n line-height: var(${tokens.contentFontLineHeight});\n ${String(applyHyphens)};\n\n color: var(${tokens.contentColor});\n`;\n\nexport const StyledItemWrapper = styled.div<{ isHidden: boolean }>`\n margin-top: 1rem;\n opacity: 1;\n\n &&.${classes.notificationItemOpened} {\n animation: 0.4s showAnimation ease-out;\n\n &.${classes.notificationLeftToRightAnimation} {\n animation: 0.4s showLeftToRightAnimation ease-out;\n }\n }\n\n &&.${classes.notificationItemHidden} {\n animation: 0.4s hideAnimation ease-out;\n\n &.${classes.notificationLeftToRightAnimation} {\n animation: 0.4s hideLeftToRightAnimation ease-out;\n }\n }\n\n @keyframes showLeftToRightAnimation {\n 0% {\n transform: translateX(-100%);\n opacity: 0;\n }\n\n 100% {\n transform: translateX(0);\n opacity: 1;\n }\n }\n\n @keyframes hideLeftToRightAnimation {\n 0% {\n transform: translateX(0);\n opacity: 1;\n }\n\n 100% {\n transform: translateX(-100%);\n opacity: 0;\n }\n }\n\n @keyframes showAnimation {\n 0% {\n transform: translateX(100%);\n opacity: 0;\n }\n\n 100% {\n transform: translateX(0);\n opacity: 1;\n }\n }\n\n @keyframes hideAnimation {\n 0% {\n transform: translateX(0);\n opacity: 1;\n }\n\n 100% {\n transform: translateX(100%);\n opacity: 0;\n }\n }\n`;\n\nexport const StyledRoot = styled.div<{ placement?: NotificationPlacement }>`\n display: flex;\n flex-direction: column-reverse;\n box-sizing: border-box;\n padding: 0 1.5rem 1.5rem;\n max-height: 100%;\n align-items: ${({ placement }) => (placement === 'bottom-left' ? 'flex-start' : 'flex-end')};\n`;\n"],"names":["StyledNotification","mergedButtonConfig","mergeConfig","buttonConfig","Button","component","_exp","CloseIconWrapper","styled","name","class","propsAsIs","Wrapper","_exp15","_ref","iconPlacement","placements","left","concat","tokens","buttonsMarginLeft","ButtonsWrapper","vars","_exp21","_ref2","iconColor","contentLeftIconColor","_exp22","_ref3","contentLeftIconMargin","_exp23","_ref4","top","contentTopIconMargin","IconWrapper","_exp26","_ref5","_exp27","_ref6","contentPaddingTop","contentPaddingTopWithoutIcon","ContentBox","_exp33","_ref7","textboxPaddingTopWithTopIcon","textboxPaddingTop","_exp34","_ref8","showCloseIcon","textboxPaddingRightWithCloseIcon","textboxPaddingRight","TextBox","_exp44","_ref9","textColor","titleColor","StyledTitle","StyledContent","StyledItemWrapper","_exp57","_ref10","placement","StyledRoot"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"Notification.styles.js","sources":["../../../src/components/Notification/Notification.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { applyHyphens } from '../../mixins';\nimport { buttonConfig } from '../Button';\nimport { component, mergeConfig } from '../../engines';\n\nimport { classes, tokens } from './Notification.tokens';\nimport { CloseIconType, IconPlacementType, NotificationPlacement, placements } from './Notification.types';\n\nexport const StyledNotification = css`\n width: fit-content;\n`;\n\nconst mergedButtonConfig = mergeConfig(buttonConfig);\nconst Button = component(mergedButtonConfig);\n\nexport const CloseIconWrapper = styled(Button)`\n position: absolute;\n width: var(${tokens.closeIconButtonSize});\n height: var(${tokens.closeIconButtonSize});\n align-self: var(${tokens.horisontalIconCloseAlignSelf});\n\n color: var(${tokens.closeIconColor});\n\n :hover {\n color: var(${tokens.closeIconColorOnHover});\n }\n\n &.${classes.horizontal} {\n position: relative;\n }\n`;\n\nexport const Wrapper = styled.div`\n position: relative;\n box-sizing: border-box;\n\n background: var(${tokens.background});\n border-radius: var(${tokens.borderRadius});\n border: var(${tokens.borderWidth}) solid var(${tokens.borderColor});\n\n &.${classes.horizontal} {\n display: flex;\n align-items: center;\n gap: var(${tokens.horizontalLayoutGap});\n }\n`;\n\nexport const ButtonsWrapper = styled.div<IconPlacementType>`\n margin-top: var(${tokens.buttonsMarginTop});\n margin-left: ${({ iconPlacement }) =>\n iconPlacement === placements.left ? `var(${tokens.buttonsMarginLeft})` : 'unset'};\n\n align-self: var(${tokens.horisontalActionsAlignSelf});\n\n &.${classes.horizontal} {\n margin-top: unset;\n margin-left: unset;\n }\n`;\n\nexport const IconWrapper = styled.div<IconPlacementType>`\n width: var(${tokens.contentLeftIconSize});\n height: var(${tokens.contentLeftIconSize});\n align-self: var(${tokens.horisontalIconLeftAlignSelf});\n\n margin-right: ${({ iconPlacement }) =>\n iconPlacement === placements.left ? `var(${tokens.contentLeftIconMargin})` : 'unset'};\n margin-bottom: ${({ iconPlacement }) =>\n iconPlacement === placements.top ? `var(${tokens.contentTopIconMargin})` : 'unset'};\n\n &.${classes.horizontal} {\n margin-right: var(${tokens.horizontalLayoutLeftIconMargin});\n margin-bottom: unset;\n }\n`;\n\nexport const ContentBox = styled.div<IconPlacementType>`\n // TODO: переделать, когда научимся работать с токенами при пересечнии свойств\n // issue #909\n display: ${({ iconPlacement }) => (iconPlacement === placements.left ? 'flex' : 'block')};\n\n padding-top: ${({ iconPlacement }) =>\n iconPlacement ? `var(${tokens.contentPaddingTop})` : `var(${tokens.contentPaddingTopWithoutIcon})`};\n\n &.${classes.horizontal} {\n padding: unset;\n display: flex;\n align-items: center;\n flex-grow: 1;\n }\n`;\n\nexport const TextBox = styled.div<CloseIconType & IconPlacementType>`\n padding: var(${tokens.textboxPaddingTop}) var(${tokens.textboxPaddingRight}) var(${tokens.textboxPaddingBottom})\n var(${tokens.textboxPaddingLeft});\n\n padding-top: ${({ iconPlacement }) =>\n !iconPlacement || iconPlacement === placements.top\n ? `var(${tokens.textboxPaddingTopWithTopIcon})`\n : `var(${tokens.textboxPaddingTop})`};\n padding-right: ${({ showCloseIcon, iconPlacement }) =>\n showCloseIcon && iconPlacement !== placements.top\n ? `var(${tokens.textboxPaddingRightWithCloseIcon})`\n : `var(${tokens.textboxPaddingRight})`};\n\n display: flex;\n flex-direction: column;\n row-gap: var(${tokens.textboxGap});\n word-break: break-word;\n\n &.${classes.horizontal} {\n padding: unset;\n }\n`;\n\nexport const StyledTitle = styled.div`\n font-family: var(${tokens.titleFontFamily});\n font-size: var(${tokens.titleFontSize});\n font-style: var(${tokens.titleFontStyle});\n font-weight: var(${tokens.titleFontWeight});\n letter-spacing: var(${tokens.titleFontLetterSpacing});\n line-height: var(${tokens.titleFontLineHeight});\n ${String(applyHyphens)};\n`;\n\nexport const StyledContent = styled.div`\n font-family: var(${tokens.contentFontFamily});\n font-size: var(${tokens.contentFontSize});\n font-style: var(${tokens.contentFontStyle});\n font-weight: var(${tokens.contentFontWeight});\n letter-spacing: var(${tokens.contentFontLetterSpacing});\n line-height: var(${tokens.contentFontLineHeight});\n ${String(applyHyphens)};\n\n color: var(${tokens.contentColor});\n`;\n\nexport const StyledItemWrapper = styled.div<{ isHidden: boolean }>`\n margin-top: 1rem;\n opacity: 1;\n\n &&.${classes.notificationItemOpened} {\n animation: 0.4s showAnimation ease-out;\n\n &.${classes.notificationLeftToRightAnimation} {\n animation: 0.4s showLeftToRightAnimation ease-out;\n }\n }\n\n &&.${classes.notificationItemHidden} {\n animation: 0.4s hideAnimation ease-out;\n\n &.${classes.notificationLeftToRightAnimation} {\n animation: 0.4s hideLeftToRightAnimation ease-out;\n }\n }\n\n @keyframes showLeftToRightAnimation {\n 0% {\n transform: translateX(-100%);\n opacity: 0;\n }\n\n 100% {\n transform: translateX(0);\n opacity: 1;\n }\n }\n\n @keyframes hideLeftToRightAnimation {\n 0% {\n transform: translateX(0);\n opacity: 1;\n }\n\n 100% {\n transform: translateX(-100%);\n opacity: 0;\n }\n }\n\n @keyframes showAnimation {\n 0% {\n transform: translateX(100%);\n opacity: 0;\n }\n\n 100% {\n transform: translateX(0);\n opacity: 1;\n }\n }\n\n @keyframes hideAnimation {\n 0% {\n transform: translateX(0);\n opacity: 1;\n }\n\n 100% {\n transform: translateX(100%);\n opacity: 0;\n }\n }\n`;\n\nexport const StyledRoot = styled.div<{ placement?: NotificationPlacement }>`\n display: flex;\n flex-direction: column-reverse;\n box-sizing: border-box;\n padding: 0 1.5rem 1.5rem;\n max-height: 100%;\n align-items: ${({ placement }) => (placement === 'bottom-left' ? 'flex-start' : 'flex-end')};\n`;\n"],"names":["StyledNotification","mergedButtonConfig","mergeConfig","buttonConfig","Button","component","_exp","CloseIconWrapper","styled","name","class","propsAsIs","Wrapper","_exp15","_ref","iconPlacement","placements","left","concat","tokens","buttonsMarginLeft","ButtonsWrapper","vars","_exp21","_ref2","contentLeftIconMargin","_exp22","_ref3","top","contentTopIconMargin","IconWrapper","_exp25","_ref4","_exp26","_ref5","contentPaddingTop","contentPaddingTopWithoutIcon","ContentBox","_exp32","_ref6","textboxPaddingTopWithTopIcon","textboxPaddingTop","_exp33","_ref7","showCloseIcon","textboxPaddingRightWithCloseIcon","textboxPaddingRight","TextBox","StyledTitle","StyledContent","StyledItemWrapper","_exp55","_ref8","placement","StyledRoot"],"mappings":"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"}
|
@@ -2,10 +2,10 @@
|
|
2
2
|
.crvd7hm{position:absolute;width:var(--plasma-notification-close-icon-button-size);height:var(--plasma-notification-close-icon-button-size);-webkit-align-self:var(--plasma-notification-horizontal-icon-close-align-self);-ms-flex-item-align:var(--plasma-notification-horizontal-icon-close-align);align-self:var(--plasma-notification-horizontal-icon-close-align-self);color:var(--plasma-notification-close-icon-color);}.crvd7hm:hover{color:var(--plasma-notification-close-icon-color-on-hover);}.crvd7hm.notification-layout-horizontal{position:relative;}
|
3
3
|
.wg1ga5v{position:relative;box-sizing:border-box;background:var(--plasma-notification-backgorund);border-radius:var(--plasma-notification-border-radius);border:var(--plasma-notification-border-width) solid var(--plasma-notification-border-color);}.wg1ga5v.notification-layout-horizontal{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;gap:var(--plasma-notification-horizontal-layout-gap);}
|
4
4
|
.b1amsn8a{margin-top:var(--plasma-notification-buttons-margin-top);margin-left:var(--b1amsn8a-0);-webkit-align-self:var(--plasma-notification-horizontal-actions-align-self);-ms-flex-item-align:var(--plasma-notification-horizontal-actions-align);align-self:var(--plasma-notification-horizontal-actions-align-self);}.b1amsn8a.notification-layout-horizontal{margin-top:unset;margin-left:unset;}
|
5
|
-
.i14raqr9{width:var(--plasma-notification-content-left-icon-size);height:var(--plasma-notification-content-left-icon-size);-webkit-align-self:var(--plasma-notification-horizontal-icon-left-align-self);-ms-flex-item-align:var(--plasma-notification-horizontal-icon-left-align);align-self:var(--plasma-notification-horizontal-icon-left-align-self);
|
5
|
+
.i14raqr9{width:var(--plasma-notification-content-left-icon-size);height:var(--plasma-notification-content-left-icon-size);-webkit-align-self:var(--plasma-notification-horizontal-icon-left-align-self);-ms-flex-item-align:var(--plasma-notification-horizontal-icon-left-align);align-self:var(--plasma-notification-horizontal-icon-left-align-self);margin-right:var(--i14raqr9-0);margin-bottom:var(--i14raqr9-1);}.i14raqr9.notification-layout-horizontal{margin-right:var(--plasma-notification-horizontal-layout-left-icon-margin);margin-bottom:unset;}
|
6
6
|
.c157peez{display:var(--c157peez-0);padding-top:var(--c157peez-1);}.c157peez.notification-layout-horizontal{padding:unset;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;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}
|
7
7
|
.t1vmb0f2{padding:var(--plasma-notification-textbox-padding-top) var(--plasma-notification-textbox-padding-right) var(--plasma-notification-textbox-padding-bottom) var(--plasma-notification-textbox-padding-left);padding-top:var(--t1vmb0f2-0);padding-right:var(--t1vmb0f2-1);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;row-gap:var(--plasma-notification-textbox-gap);word-break:break-word;}.t1vmb0f2.notification-layout-horizontal{padding:unset;}
|
8
|
-
.s1k4e58v{font-family:var(--plasma-notification-title-font-family);font-size:var(--plasma-notification-title-font-size);font-style:var(--plasma-notification-title-font-style);font-weight:var(--plasma-notification-title-font-weight);-webkit-letter-spacing:var(--plasma-notification-title-font-letter-spacing);-moz-letter-spacing:var(--plasma-notification-title-font-letter-spacing);-ms-letter-spacing:var(--plasma-notification-title-font-letter-spacing);letter-spacing:var(--plasma-notification-title-font-letter-spacing);line-height:var(--plasma-notification-title-font-line-height);overflow-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;
|
8
|
+
.s1k4e58v{font-family:var(--plasma-notification-title-font-family);font-size:var(--plasma-notification-title-font-size);font-style:var(--plasma-notification-title-font-style);font-weight:var(--plasma-notification-title-font-weight);-webkit-letter-spacing:var(--plasma-notification-title-font-letter-spacing);-moz-letter-spacing:var(--plasma-notification-title-font-letter-spacing);-ms-letter-spacing:var(--plasma-notification-title-font-letter-spacing);letter-spacing:var(--plasma-notification-title-font-letter-spacing);line-height:var(--plasma-notification-title-font-line-height);overflow-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;}
|
9
9
|
.s92kmpm{font-family:var(--plasma-notification-content-font-family);font-size:var(--plasma-notification-content-font-size);font-style:var(--plasma-notification-content-font-style);font-weight:var(--plasma-notification-content-font-weight);-webkit-letter-spacing:var(--plasma-notification-content-font-letter-spacing);-moz-letter-spacing:var(--plasma-notification-content-font-letter-spacing);-ms-letter-spacing:var(--plasma-notification-content-font-letter-spacing);letter-spacing:var(--plasma-notification-content-font-letter-spacing);line-height:var(--plasma-notification-content-font-line-height);overflow-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;color:var(--plasma-notification-content-color);}
|
10
10
|
.s18m0x6v{margin-top:1rem;opacity:1;}.s18m0x6v.s18m0x6v.notification-item-opened{-webkit-animation:0.4s showAnimation-s18m0x6v ease-out;animation:0.4s showAnimation-s18m0x6v ease-out;}.s18m0x6v.s18m0x6v.notification-item-opened.notification-left-to-right-animation{-webkit-animation:0.4s showLeftToRightAnimation-s18m0x6v ease-out;animation:0.4s showLeftToRightAnimation-s18m0x6v ease-out;}.s18m0x6v.s18m0x6v.notification-item-hidden{-webkit-animation:0.4s hideAnimation-s18m0x6v ease-out;animation:0.4s hideAnimation-s18m0x6v ease-out;}.s18m0x6v.s18m0x6v.notification-item-hidden.notification-left-to-right-animation{-webkit-animation:0.4s hideLeftToRightAnimation-s18m0x6v ease-out;animation:0.4s hideLeftToRightAnimation-s18m0x6v ease-out;}@-webkit-keyframes showLeftToRightAnimation-s18m0x6v{0%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@keyframes showLeftToRightAnimation-s18m0x6v{0%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@-webkit-keyframes hideLeftToRightAnimation-s18m0x6v{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);opacity:0;}}@keyframes hideLeftToRightAnimation-s18m0x6v{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);opacity:0;}}@-webkit-keyframes showAnimation-s18m0x6v{0%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@keyframes showAnimation-s18m0x6v{0%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@-webkit-keyframes hideAnimation-s18m0x6v{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}}@keyframes hideAnimation-s18m0x6v{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}}
|
11
11
|
.sfe5ql2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;box-sizing:border-box;padding:0 1.5rem 1.5rem;max-height:100%;-webkit-align-items:var(--sfe5ql2-0);-webkit-box-align:var(--sfe5ql2-0);-ms-flex-align:var(--sfe5ql2-0);align-items:var(--sfe5ql2-0);}
|
@@ -45,7 +45,6 @@ var tokens = {
|
|
45
45
|
textboxGap: '--plasma-notification-textbox-gap',
|
46
46
|
buttonsMarginTop: '--plasma-notification-buttons-margin-top',
|
47
47
|
buttonsMarginLeft: '--plasma-notification-buttons-margin-left',
|
48
|
-
contentLeftIconColor: '--plasma-notification-content-left-icon-color',
|
49
48
|
contentLeftIconSize: '--plasma-notification-content-left-icon-size',
|
50
49
|
contentLeftIconMargin: '--plasma-notification-content-left-icon-margin',
|
51
50
|
contentTopIconMargin: '--plasma-notification-content-top-icon-margin',
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Notification.tokens.js","sources":["../../../src/components/Notification/Notification.tokens.ts"],"sourcesContent":["export const classes = {\n textbox: 'notificaiton-textbox',\n contentBox: 'notificaiton-content-box',\n title: 'notification-title',\n text: 'notification-text',\n wrapper: 'notification-wrapper',\n icon: 'notification-icon',\n closeIcon: 'notification-close-icon',\n buttonsWrapper: 'notification-buttons-wrapper',\n\n horizontal: 'notification-layout-horizontal',\n vertical: 'notification-layout-vertical',\n oneLine: 'notification-one-line-textbox',\n withoutIcon: 'notification-without-icon',\n withoutCloseIcon: 'notification-without-close-icon',\n\n notificationItemOpened: 'notification-item-opened',\n notificationItemHidden: 'notification-item-hidden',\n notificationLeftToRightAnimation: 'notification-left-to-right-animation',\n};\n\nexport const tokens = {\n background: '--plasma-notification-backgorund',\n padding: '--plasma-notification-padding',\n horizontalLayoutPadding: '--plasma-notification-horizontal-layout-padding',\n width: '--plasma-notification-width',\n borderRadius: '--plasma-notification-border-radius',\n borderWidth: '--plasma-notification-border-width',\n borderColor: '--plasma-notification-border-color',\n\n paddingOneLineTextbox: '--plasma-notification-padding-one-line-textbox',\n horizontalLayoutGap: '--plasma-notification-horizontal-layout-gap',\n horizontalLayoutLeftIconMargin: '--plasma-notification-horizontal-layout-left-icon-margin',\n horizontalLayoutRightPaddingWithoutCloseIcon:\n '--plasma-notification-horizontal-layout-right-padding-without-close-icon',\n horisontalIconLeftAlignSelf: '--plasma-notification-horizontal-icon-left-align-self',\n horisontalActionsAlignSelf: '--plasma-notification-horizontal-actions-align-self',\n horisontalIconCloseAlignSelf: '--plasma-notification-horizontal-icon-close-align-self',\n\n contentPaddingTop: '--plasma-notification-content-padding-top',\n contentPaddingRight: '--plasma-notification-content-padding-right',\n contentPaddingBottom: '--plasma-notification-content-padding-bottom',\n contentPaddingLeft: '--plasma-notification-content-padding-left',\n\n contentPaddingTopWithoutIcon: '--plasma-notification-content-padding-top-without-icon',\n\n textboxPaddingTop: '--plasma-notification-textbox-padding-top',\n textboxPaddingRight: '--plasma-notification-textbox-padding-right',\n textboxPaddingBottom: '--plasma-notification-textbox-padding-bottom',\n textboxPaddingLeft: '--plasma-notification-textbox-padding-left',\n\n textboxPaddingTopWithTopIcon: '--plasma-notification-textbox-padding-top-with-top-icon',\n textboxPaddingRightWithCloseIcon: '--plasma-notification-textbox-padding-right-with-close-icon',\n textboxGap: '--plasma-notification-textbox-gap',\n\n buttonsMarginTop: '--plasma-notification-buttons-margin-top',\n buttonsMarginLeft: '--plasma-notification-buttons-margin-left',\n\n
|
1
|
+
{"version":3,"file":"Notification.tokens.js","sources":["../../../src/components/Notification/Notification.tokens.ts"],"sourcesContent":["export const classes = {\n textbox: 'notificaiton-textbox',\n contentBox: 'notificaiton-content-box',\n title: 'notification-title',\n text: 'notification-text',\n wrapper: 'notification-wrapper',\n icon: 'notification-icon',\n closeIcon: 'notification-close-icon',\n buttonsWrapper: 'notification-buttons-wrapper',\n\n horizontal: 'notification-layout-horizontal',\n vertical: 'notification-layout-vertical',\n oneLine: 'notification-one-line-textbox',\n withoutIcon: 'notification-without-icon',\n withoutCloseIcon: 'notification-without-close-icon',\n\n notificationItemOpened: 'notification-item-opened',\n notificationItemHidden: 'notification-item-hidden',\n notificationLeftToRightAnimation: 'notification-left-to-right-animation',\n};\n\nexport const tokens = {\n background: '--plasma-notification-backgorund',\n padding: '--plasma-notification-padding',\n horizontalLayoutPadding: '--plasma-notification-horizontal-layout-padding',\n width: '--plasma-notification-width',\n borderRadius: '--plasma-notification-border-radius',\n borderWidth: '--plasma-notification-border-width',\n borderColor: '--plasma-notification-border-color',\n\n paddingOneLineTextbox: '--plasma-notification-padding-one-line-textbox',\n horizontalLayoutGap: '--plasma-notification-horizontal-layout-gap',\n horizontalLayoutLeftIconMargin: '--plasma-notification-horizontal-layout-left-icon-margin',\n horizontalLayoutRightPaddingWithoutCloseIcon:\n '--plasma-notification-horizontal-layout-right-padding-without-close-icon',\n horisontalIconLeftAlignSelf: '--plasma-notification-horizontal-icon-left-align-self',\n horisontalActionsAlignSelf: '--plasma-notification-horizontal-actions-align-self',\n horisontalIconCloseAlignSelf: '--plasma-notification-horizontal-icon-close-align-self',\n\n contentPaddingTop: '--plasma-notification-content-padding-top',\n contentPaddingRight: '--plasma-notification-content-padding-right',\n contentPaddingBottom: '--plasma-notification-content-padding-bottom',\n contentPaddingLeft: '--plasma-notification-content-padding-left',\n\n contentPaddingTopWithoutIcon: '--plasma-notification-content-padding-top-without-icon',\n\n textboxPaddingTop: '--plasma-notification-textbox-padding-top',\n textboxPaddingRight: '--plasma-notification-textbox-padding-right',\n textboxPaddingBottom: '--plasma-notification-textbox-padding-bottom',\n textboxPaddingLeft: '--plasma-notification-textbox-padding-left',\n\n textboxPaddingTopWithTopIcon: '--plasma-notification-textbox-padding-top-with-top-icon',\n textboxPaddingRightWithCloseIcon: '--plasma-notification-textbox-padding-right-with-close-icon',\n textboxGap: '--plasma-notification-textbox-gap',\n\n buttonsMarginTop: '--plasma-notification-buttons-margin-top',\n buttonsMarginLeft: '--plasma-notification-buttons-margin-left',\n\n contentLeftIconSize: '--plasma-notification-content-left-icon-size',\n contentLeftIconMargin: '--plasma-notification-content-left-icon-margin',\n contentTopIconMargin: '--plasma-notification-content-top-icon-margin',\n\n contentColor: '--plasma-notification-content-color',\n contentFontFamily: '--plasma-notification-content-font-family',\n contentFontSize: '--plasma-notification-content-font-size',\n contentFontStyle: '--plasma-notification-content-font-style',\n contentFontWeight: '--plasma-notification-content-font-weight',\n contentFontWeightBold: '--plasma-notification-content-font-weight-bold',\n contentFontLetterSpacing: '--plasma-notification-content-font-letter-spacing',\n contentFontLineHeight: '--plasma-notification-content-font-line-height',\n\n titleColor: '--plasma-notification-title-color',\n titleFontFamily: '--plasma-notification-title-font-family',\n titleFontSize: '--plasma-notification-title-font-size',\n titleFontStyle: '--plasma-notification-title-font-style',\n titleFontWeight: '--plasma-notification-title-font-weight',\n titleFontWeightBold: '--plasma-notification-title-font-weight-bold',\n titleFontLetterSpacing: '--plasma-notification-title-font-letter-spacing',\n titleFontLineHeight: '--plasma-notification-title-font-line-height',\n\n closeIconTop: '--plasma-notification-close-icon-top',\n closeIconRight: '--plasma-notification-close-icon-right',\n closeIconColor: '--plasma-notification-close-icon-color',\n closeIconColorOnHover: '--plasma-notification-close-icon-color-on-hover',\n closeIconSize: '--plasma-notification-close-icon-size',\n closeIconButtonSize: '--plasma-notification-close-icon-button-size',\n};\n"],"names":["classes","textbox","contentBox","title","text","wrapper","icon","closeIcon","buttonsWrapper","horizontal","vertical","oneLine","withoutIcon","withoutCloseIcon","notificationItemOpened","notificationItemHidden","notificationLeftToRightAnimation","tokens","background","padding","horizontalLayoutPadding","width","borderRadius","borderWidth","borderColor","paddingOneLineTextbox","horizontalLayoutGap","horizontalLayoutLeftIconMargin","horizontalLayoutRightPaddingWithoutCloseIcon","horisontalIconLeftAlignSelf","horisontalActionsAlignSelf","horisontalIconCloseAlignSelf","contentPaddingTop","contentPaddingRight","contentPaddingBottom","contentPaddingLeft","contentPaddingTopWithoutIcon","textboxPaddingTop","textboxPaddingRight","textboxPaddingBottom","textboxPaddingLeft","textboxPaddingTopWithTopIcon","textboxPaddingRightWithCloseIcon","textboxGap","buttonsMarginTop","buttonsMarginLeft","contentLeftIconSize","contentLeftIconMargin","contentTopIconMargin","contentColor","contentFontFamily","contentFontSize","contentFontStyle","contentFontWeight","contentFontWeightBold","contentFontLetterSpacing","contentFontLineHeight","titleColor","titleFontFamily","titleFontSize","titleFontStyle","titleFontWeight","titleFontWeightBold","titleFontLetterSpacing","titleFontLineHeight","closeIconTop","closeIconRight","closeIconColor","closeIconColorOnHover","closeIconSize","closeIconButtonSize"],"mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Notification.types.js","sources":["../../../src/components/Notification/Notification.types.ts"],"sourcesContent":["import type { AsProps } from '@salutejs/plasma-core';\nimport { HTMLAttributes, ReactNode } from 'react';\n\nimport { ComponentConfig, PropsType, Variants } from '../../engines/types';\n\nexport const layouts = {\n horizontal: 'horizontal',\n vertical: 'vertical',\n};\n\nexport type NotificationLayout = keyof typeof layouts;\n\nexport const placements = {\n top: 'top',\n left: 'left',\n};\n\nexport type NotificationIconPlacement = keyof typeof placements;\nexport type NotificationPlacement = 'bottom-right' | 'bottom-left';\n\nexport type LayoutType = {\n layout?: NotificationLayout;\n};\n\nexport type IconPlacementType = {\n iconPlacement?: NotificationIconPlacement;\n};\n\nexport type CloseIconType = {\n showCloseIcon?: boolean;\n};\n\nexport interface NotificationProps extends AsProps, Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n /**\n * Заголовок.\n */\n title?: ReactNode;\n /**\n * Контент под заголовком.\n */\n children?: ReactNode;\n /**\n * Кнопки снизу/справа для необходимых действий.\n */\n actions?: ReactNode;\n /**\n * Cхема расположение блоков Notification.\n */\n layout?: NotificationLayout;\n /**\n * Иконка слева.\n */\n icon?: ReactNode;\n /**\n * Расположение иконки слева внутри Textbox.\n */\n iconPlacement?: NotificationIconPlacement;\n /**\n * Показывать ли иконку закрытия справа.\n * @default\n * true\n */\n showCloseIcon?: boolean;\n /**\n * Колбек при нажатии на кнопку закрытия.\n */\n onCloseButtonClick?: () => void;\n /**\n * @deprecated\n * Не влияет на отображение компонента.\n * Статус компонента Notification.\n */\n status?: string;\n\n /**\n * Вид Notification.\n */\n view?: string;\n /**\n * Размер Notification (необходимо связать с размером используемых Button).\n */\n size?: string;\n /**\n * Вид закрывающей иконки в Notification.\n */\n closeIconType?: 'default' | 'thin';\n /**\n * @description Только для применения в рамках SSR.\n */\n UNSAFE_SSR_ENABLED?: boolean;\n
|
1
|
+
{"version":3,"file":"Notification.types.js","sources":["../../../src/components/Notification/Notification.types.ts"],"sourcesContent":["import type { AsProps } from '@salutejs/plasma-core';\nimport { HTMLAttributes, ReactNode } from 'react';\n\nimport { ComponentConfig, PropsType, Variants } from '../../engines/types';\n\nexport const layouts = {\n horizontal: 'horizontal',\n vertical: 'vertical',\n};\n\nexport type NotificationLayout = keyof typeof layouts;\n\nexport const placements = {\n top: 'top',\n left: 'left',\n};\n\nexport type NotificationIconPlacement = keyof typeof placements;\nexport type NotificationPlacement = 'bottom-right' | 'bottom-left';\n\nexport type LayoutType = {\n layout?: NotificationLayout;\n};\n\nexport type IconPlacementType = {\n iconPlacement?: NotificationIconPlacement;\n};\n\nexport type CloseIconType = {\n showCloseIcon?: boolean;\n};\n\nexport interface NotificationProps extends AsProps, Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n /**\n * Заголовок.\n */\n title?: ReactNode;\n /**\n * Контент под заголовком.\n */\n children?: ReactNode;\n /**\n * Кнопки снизу/справа для необходимых действий.\n */\n actions?: ReactNode;\n /**\n * Cхема расположение блоков Notification.\n */\n layout?: NotificationLayout;\n /**\n * Иконка слева.\n */\n icon?: ReactNode;\n /**\n * Расположение иконки слева внутри Textbox.\n */\n iconPlacement?: NotificationIconPlacement;\n /**\n * Показывать ли иконку закрытия справа.\n * @default\n * true\n */\n showCloseIcon?: boolean;\n /**\n * Колбек при нажатии на кнопку закрытия.\n */\n onCloseButtonClick?: () => void;\n /**\n * @deprecated\n * Не влияет на отображение компонента.\n * Статус компонента Notification.\n */\n status?: string;\n\n /**\n * Вид Notification.\n */\n view?: string;\n /**\n * Размер Notification (необходимо связать с размером используемых Button).\n */\n size?: string;\n /**\n * Вид закрывающей иконки в Notification.\n */\n closeIconType?: 'default' | 'thin';\n /**\n * @description Только для применения в рамках SSR.\n */\n UNSAFE_SSR_ENABLED?: boolean;\n}\n\nexport interface NotificationPortalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n /**\n * Конфиг компонента Notification.\n */\n config: ComponentConfig<string, Variants, PropsType<Variants>, NotificationProps & HTMLAttributes<HTMLDivElement>>;\n /**\n * В каком контейнере позиционируется(по умолчанию document), можно также указать id элемента или ref для него.\n */\n frame?: string;\n /**\n * Расположение компонента Notification во frame\n * @default bottom-right\n */\n placement?: NotificationPlacement;\n /**\n * @description Только для применения в рамках SSR.\n */\n UNSAFE_SSR_ENABLED?: boolean;\n}\n"],"names":["layouts","horizontal","vertical","placements","top","left"],"mappings":"AAKO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,UAAU,EAAE,YAAY;AACxBC,EAAAA,QAAQ,EAAE,UAAA;AACd,EAAC;AAIM,IAAMC,UAAU,GAAG;AACtBC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,IAAI,EAAE,MAAA;AACV;;;;"}
|
@@ -38,7 +38,6 @@ var NotificationsPortal = function NotificationsPortal(_ref) {
|
|
38
38
|
var Notification = useMemo(function () {
|
39
39
|
return component(config);
|
40
40
|
}, []);
|
41
|
-
console.log(notifications);
|
42
41
|
return /*#__PURE__*/React.createElement(PopupProvider, {
|
43
42
|
UNSAFE_SSR_ENABLED: UNSAFE_SSR_ENABLED
|
44
43
|
}, notifications.length > 0 && /*#__PURE__*/React.createElement(StyledPopup, {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"NotificationsPortal.js","sources":["../../../src/components/Notification/NotificationsPortal.tsx"],"sourcesContent":["import React, { FC, ForwardRefExoticComponent, RefAttributes, useMemo } from 'react';\nimport { useStoreon } from 'storeon/react';\nimport { styled } from '@linaria/react';\nimport { popupBaseRootClass } from '@salutejs/plasma-core';\n\nimport { PopupProvider, popupConfig } from '../Popup';\nimport { component } from '../../engines';\nimport { cx } from '../../utils';\n\nimport { NotificationsState, NotificationsEvents, closeNotification } from './NotificationsStore';\nimport { NotificationPortalProps, NotificationProps } from './Notification.types';\nimport { StyledItemWrapper, StyledRoot } from './Notification.styles';\nimport { classes } from './Notification.tokens';\n\n// issue #823\nconst Popup = component(popupConfig);\n\nconst StyledPopup = styled(Popup)`\n & > .${popupBaseRootClass} {\n overflow: hidden;\n }\n`;\n\n/**\n * Обертка для визуального представления уведомлений.\n */\nexport const NotificationsPortal: FC<NotificationPortalProps> = ({\n config,\n frame,\n placement = 'bottom-right',\n UNSAFE_SSR_ENABLED,\n}) => {\n const { notifications } = useStoreon<NotificationsState, NotificationsEvents>('notifications');\n\n const Notification = useMemo(\n () => component(config) as ForwardRefExoticComponent<NotificationProps & RefAttributes<HTMLDivElement>>,\n [],\n );\n\n
|
1
|
+
{"version":3,"file":"NotificationsPortal.js","sources":["../../../src/components/Notification/NotificationsPortal.tsx"],"sourcesContent":["import React, { FC, ForwardRefExoticComponent, RefAttributes, useMemo } from 'react';\nimport { useStoreon } from 'storeon/react';\nimport { styled } from '@linaria/react';\nimport { popupBaseRootClass } from '@salutejs/plasma-core';\n\nimport { PopupProvider, popupConfig } from '../Popup';\nimport { component } from '../../engines';\nimport { cx } from '../../utils';\n\nimport { NotificationsState, NotificationsEvents, closeNotification } from './NotificationsStore';\nimport { NotificationPortalProps, NotificationProps } from './Notification.types';\nimport { StyledItemWrapper, StyledRoot } from './Notification.styles';\nimport { classes } from './Notification.tokens';\n\n// issue #823\nconst Popup = component(popupConfig);\n\nconst StyledPopup = styled(Popup)`\n & > .${popupBaseRootClass} {\n overflow: hidden;\n }\n`;\n\n/**\n * Обертка для визуального представления уведомлений.\n */\nexport const NotificationsPortal: FC<NotificationPortalProps> = ({\n config,\n frame,\n placement = 'bottom-right',\n UNSAFE_SSR_ENABLED,\n}) => {\n const { notifications } = useStoreon<NotificationsState, NotificationsEvents>('notifications');\n\n const Notification = useMemo(\n () => component(config) as ForwardRefExoticComponent<NotificationProps & RefAttributes<HTMLDivElement>>,\n [],\n );\n\n return (\n <PopupProvider UNSAFE_SSR_ENABLED={UNSAFE_SSR_ENABLED}>\n {notifications.length > 0 && (\n <StyledPopup opened frame={frame} placement={placement} zIndex=\"9100\">\n <StyledRoot placement={placement}>\n {notifications.map(({ id, isHidden, ...rest }) => (\n <StyledItemWrapper\n key={id}\n className={cx(\n isHidden ? classes.notificationItemHidden : classes.notificationItemOpened,\n placement === 'bottom-left' && classes.notificationLeftToRightAnimation,\n )}\n isHidden={isHidden || false}\n >\n <Notification\n key={id}\n id={id}\n onCloseButtonClick={() => closeNotification(id)}\n {...rest}\n />\n </StyledItemWrapper>\n ))}\n </StyledRoot>\n </StyledPopup>\n )}\n </PopupProvider>\n );\n};\n"],"names":["Popup","component","popupConfig","_exp","StyledPopup","styled","name","class","propsAsIs","NotificationsPortal","_ref","config","frame","_ref$placement","placement","UNSAFE_SSR_ENABLED","_useStoreon","useStoreon","notifications","Notification","useMemo","React","createElement","PopupProvider","length","opened","zIndex","StyledRoot","map","_ref2","id","isHidden","rest","StyledItemWrapper","key","className","cx","classes","notificationItemHidden","notificationItemOpened","notificationLeftToRightAnimation","_extends","onCloseButtonClick","closeNotification"],"mappings":";;;;;;;;;;;;;;AAcA;AACA,IAAMA,KAAK,gBAAGC,SAAS,CAACC,WAAW,CAAC,CAAA;AAAC,IAAAC,IAAA,GAdnBA,SAcmBA,IAAAA,GAAA;AAAA,EAAA,OAEVH,KAAK,CAAA;AAAA,CAAA,CAAA;AAAhC,IAAMI,WAAW,gBAAGC,MAAM,CAAAF,IAAA,EAAA,CAAA,CAAA;AAAAG,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAIzB,CAAA,CAAA;;AAED;AACA;AACA;IACaC,mBAAgD,GAAGA,SAAnDA,mBAAgDA,CAAAC,IAAA,EAKvD;AAAA,EAAA,IAJFC,MAAM,GAAAD,IAAA,CAANC,MAAM;IACNC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAAC,cAAA,GAAAH,IAAA,CACLI,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,cAAc,GAAAA,cAAA;IAC1BE,kBAAAA,GAAAA,IAAAA,CAAAA,kBAAAA,CAAAA;AAEA,EAAA,IAAAC,WAAA,GAA0BC,UAAU,CAA0C,eAAe,CAAC;IAAtFC,aAAAA,GAAAA,WAAAA,CAAAA,aAAAA,CAAAA;EAER,IAAMC,YAAY,GAAGC,OAAO,CACxB,YAAA;IAAA,OAAMnB,SAAS,CAACU,MAAM,CAAC,CAAA;GACvB,EAAA,EACJ,CAAC,CAAA;AAED,EAAA,oBACIU,KAAA,CAAAC,aAAA,CAACC,aAAa,EAAA;AAACR,IAAAA,kBAAkB,EAAEA,kBAAAA;GAC9BG,EAAAA,aAAa,CAACM,MAAM,GAAG,CAAC,iBACrBH,KAAA,CAAAC,aAAA,CAAClB,WAAW,EAAA;IAACqB,MAAM,EAAA,IAAA;AAACb,IAAAA,KAAK,EAAEA,KAAM;AAACE,IAAAA,SAAS,EAAEA,SAAU;AAACY,IAAAA,MAAM,EAAC,MAAA;AAAM,GAAA,eACjEL,KAAA,CAAAC,aAAA,CAACK,UAAU,EAAA;AAACb,IAAAA,SAAS,EAAEA,SAAAA;AAAU,GAAA,EAC5BI,aAAa,CAACU,GAAG,CAAC,UAAAC,KAAA,EAAA;AAAA,IAAA,IAAGC,EAAE,GAAAD,KAAA,CAAFC,EAAE;MAAEC,QAAQ,GAAAF,KAAA,CAARE,QAAQ;AAAKC,MAAAA,IAAAA,GAAAA,wBAAAA,CAAAA,KAAAA,EAAAA,SAAAA,CAAAA,CAAAA;AAAAA,IAAAA,oBACnCX,KAAA,CAAAC,aAAA,CAACW,iBAAiB,EAAA;AACdC,MAAAA,GAAG,EAAEJ,EAAG;MACRK,SAAS,EAAEC,EAAE,CACTL,QAAQ,GAAGM,OAAO,CAACC,sBAAsB,GAAGD,OAAO,CAACE,sBAAsB,EAC1EzB,SAAS,KAAK,aAAa,IAAIuB,OAAO,CAACG,gCAC3C,CAAE;MACFT,QAAQ,EAAEA,QAAQ,IAAI,KAAA;AAAM,KAAA,eAE5BV,KAAA,CAAAC,aAAA,CAACH,YAAY,EAAAsB,QAAA,CAAA;AACTP,MAAAA,GAAG,EAAEJ,EAAG;AACRA,MAAAA,EAAE,EAAEA,EAAG;MACPY,kBAAkB,EAAE,SAAAA,kBAAA,GAAA;QAAA,OAAMC,iBAAiB,CAACb,EAAE,CAAC,CAAA;AAAA,OAAA;KAC3CE,EAAAA,IAAI,CAAC,CAEE,CACtB,CAAA;GACO,CAAA,CACH,CAEN,CAAC,CAAA;AAExB;;;;"}
|
@@ -29,16 +29,16 @@
|
|
29
29
|
.Button_styles_8cvmld_s1rjh7ra__4694a0fa{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-self:var(--plasma-button-right-content-align-self);-ms-flex-item-align:var(--plasma-button-right-content-align);align-self:var(--plasma-button-right-content-align-self);margin:var(--s1rjh7ra-0);}
|
30
30
|
.Button_styles_8cvmld_b9ga1dj__4694a0fa{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--plasma_private-btn-br:var(--plasma_computed-btn-br);border-radius:var(--plasma_private-btn-br);}a.Button_styles_8cvmld_b9ga1dj__4694a0fa{-webkit-text-decoration:none;text-decoration:none;}.Button_styles_8cvmld_b9ga1dj__4694a0fa.Button_styles_8cvmld_b9ga1dj__4694a0fa.Button_styles_8cvmld_buttonSquare__4694a0fa{width:var(--plasma-button-height);padding:0;}
|
31
31
|
|
32
|
-
.
|
33
|
-
.
|
34
|
-
.
|
35
|
-
.
|
36
|
-
.
|
37
|
-
.
|
38
|
-
.
|
39
|
-
.
|
40
|
-
.
|
41
|
-
.
|
42
|
-
.
|
32
|
+
.Notification_styles_1u5gusp_sb12p__dcdf3719{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}
|
33
|
+
.Notification_styles_1u5gusp_crvd7hm__dcdf3719{position:absolute;width:var(--plasma-notification-close-icon-button-size);height:var(--plasma-notification-close-icon-button-size);-webkit-align-self:var(--plasma-notification-horizontal-icon-close-align-self);-ms-flex-item-align:var(--plasma-notification-horizontal-icon-close-align);align-self:var(--plasma-notification-horizontal-icon-close-align-self);color:var(--plasma-notification-close-icon-color);}.Notification_styles_1u5gusp_crvd7hm__dcdf3719:hover{color:var(--plasma-notification-close-icon-color-on-hover);}.Notification_styles_1u5gusp_crvd7hm__dcdf3719.Notification_styles_1u5gusp_notificationLayoutHorizontal__dcdf3719{position:relative;}
|
34
|
+
.Notification_styles_1u5gusp_wg1ga5v__dcdf3719{position:relative;box-sizing:border-box;background:var(--plasma-notification-backgorund);border-radius:var(--plasma-notification-border-radius);border:var(--plasma-notification-border-width) solid var(--plasma-notification-border-color);}.Notification_styles_1u5gusp_wg1ga5v__dcdf3719.Notification_styles_1u5gusp_notificationLayoutHorizontal__dcdf3719{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;gap:var(--plasma-notification-horizontal-layout-gap);}
|
35
|
+
.Notification_styles_1u5gusp_b1amsn8a__dcdf3719{margin-top:var(--plasma-notification-buttons-margin-top);margin-left:var(--b1amsn8a-0);-webkit-align-self:var(--plasma-notification-horizontal-actions-align-self);-ms-flex-item-align:var(--plasma-notification-horizontal-actions-align);align-self:var(--plasma-notification-horizontal-actions-align-self);}.Notification_styles_1u5gusp_b1amsn8a__dcdf3719.Notification_styles_1u5gusp_notificationLayoutHorizontal__dcdf3719{margin-top:unset;margin-left:unset;}
|
36
|
+
.Notification_styles_1u5gusp_i14raqr9__dcdf3719{width:var(--plasma-notification-content-left-icon-size);height:var(--plasma-notification-content-left-icon-size);-webkit-align-self:var(--plasma-notification-horizontal-icon-left-align-self);-ms-flex-item-align:var(--plasma-notification-horizontal-icon-left-align);align-self:var(--plasma-notification-horizontal-icon-left-align-self);margin-right:var(--i14raqr9-0);margin-bottom:var(--i14raqr9-1);}.Notification_styles_1u5gusp_i14raqr9__dcdf3719.Notification_styles_1u5gusp_notificationLayoutHorizontal__dcdf3719{margin-right:var(--plasma-notification-horizontal-layout-left-icon-margin);margin-bottom:unset;}
|
37
|
+
.Notification_styles_1u5gusp_c157peez__dcdf3719{display:var(--c157peez-0);padding-top:var(--c157peez-1);}.Notification_styles_1u5gusp_c157peez__dcdf3719.Notification_styles_1u5gusp_notificationLayoutHorizontal__dcdf3719{padding:unset;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;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}
|
38
|
+
.Notification_styles_1u5gusp_t1vmb0f2__dcdf3719{padding:var(--plasma-notification-textbox-padding-top) var(--plasma-notification-textbox-padding-right) var(--plasma-notification-textbox-padding-bottom) var(--plasma-notification-textbox-padding-left);padding-top:var(--t1vmb0f2-0);padding-right:var(--t1vmb0f2-1);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;row-gap:var(--plasma-notification-textbox-gap);word-break:break-word;}.Notification_styles_1u5gusp_t1vmb0f2__dcdf3719.Notification_styles_1u5gusp_notificationLayoutHorizontal__dcdf3719{padding:unset;}
|
39
|
+
.Notification_styles_1u5gusp_s1k4e58v__dcdf3719{font-family:var(--plasma-notification-title-font-family);font-size:var(--plasma-notification-title-font-size);font-style:var(--plasma-notification-title-font-style);font-weight:var(--plasma-notification-title-font-weight);-webkit-letter-spacing:var(--plasma-notification-title-font-letter-spacing);-moz-letter-spacing:var(--plasma-notification-title-font-letter-spacing);-ms-letter-spacing:var(--plasma-notification-title-font-letter-spacing);letter-spacing:var(--plasma-notification-title-font-letter-spacing);line-height:var(--plasma-notification-title-font-line-height);overflow-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;}
|
40
|
+
.Notification_styles_1u5gusp_s92kmpm__dcdf3719{font-family:var(--plasma-notification-content-font-family);font-size:var(--plasma-notification-content-font-size);font-style:var(--plasma-notification-content-font-style);font-weight:var(--plasma-notification-content-font-weight);-webkit-letter-spacing:var(--plasma-notification-content-font-letter-spacing);-moz-letter-spacing:var(--plasma-notification-content-font-letter-spacing);-ms-letter-spacing:var(--plasma-notification-content-font-letter-spacing);letter-spacing:var(--plasma-notification-content-font-letter-spacing);line-height:var(--plasma-notification-content-font-line-height);overflow-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;color:var(--plasma-notification-content-color);}
|
41
|
+
.Notification_styles_1u5gusp_s18m0x6v__dcdf3719{margin-top:1rem;opacity:1;}.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_notificationItemOpened__dcdf3719{-webkit-animation:0.4s Notification_styles_1u5gusp_showAnimationS18m0x6v__dcdf3719 ease-out;animation:0.4s Notification_styles_1u5gusp_showAnimationS18m0x6v__dcdf3719 ease-out;}.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_notificationItemOpened__dcdf3719.Notification_styles_1u5gusp_notificationLeftToRightAnimation__dcdf3719{-webkit-animation:0.4s Notification_styles_1u5gusp_showLeftToRightAnimationS18m0x6v__dcdf3719 ease-out;animation:0.4s Notification_styles_1u5gusp_showLeftToRightAnimationS18m0x6v__dcdf3719 ease-out;}.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_notificationItemHidden__dcdf3719{-webkit-animation:0.4s Notification_styles_1u5gusp_hideAnimationS18m0x6v__dcdf3719 ease-out;animation:0.4s Notification_styles_1u5gusp_hideAnimationS18m0x6v__dcdf3719 ease-out;}.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_notificationItemHidden__dcdf3719.Notification_styles_1u5gusp_notificationLeftToRightAnimation__dcdf3719{-webkit-animation:0.4s Notification_styles_1u5gusp_hideLeftToRightAnimationS18m0x6v__dcdf3719 ease-out;animation:0.4s Notification_styles_1u5gusp_hideLeftToRightAnimationS18m0x6v__dcdf3719 ease-out;}@-webkit-keyframes Notification_styles_1u5gusp_showLeftToRightAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@keyframes Notification_styles_1u5gusp_showLeftToRightAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@-webkit-keyframes Notification_styles_1u5gusp_hideLeftToRightAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);opacity:0;}}@keyframes Notification_styles_1u5gusp_hideLeftToRightAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);opacity:0;}}@-webkit-keyframes Notification_styles_1u5gusp_showAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@keyframes Notification_styles_1u5gusp_showAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@-webkit-keyframes Notification_styles_1u5gusp_hideAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}}@keyframes Notification_styles_1u5gusp_hideAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}}
|
42
|
+
.Notification_styles_1u5gusp_sfe5ql2__dcdf3719{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;box-sizing:border-box;padding:0 1.5rem 1.5rem;max-height:100%;-webkit-align-items:var(--sfe5ql2-0);-webkit-box-align:var(--sfe5ql2-0);-ms-flex-align:var(--sfe5ql2-0);align-items:var(--sfe5ql2-0);}
|
43
43
|
|
44
44
|
.NotificationsPortal_6417q6_s19gbs9t__4166aeb6 > .NotificationsPortal_6417q6_popupBaseRoot__4166aeb6{overflow:hidden;}
|
package/es/index.css
CHANGED
@@ -353,17 +353,17 @@
|
|
353
353
|
|
354
354
|
.base_crlufx_bmb6i7f__c6cc97dd .base_crlufx_notificaitonContentBox__c6cc97dd.base_crlufx_notificationLayoutVertical__c6cc97dd{padding:var(--plasma-notification-content-padding-top) var(--plasma-notification-content-padding-right) var(--plasma-notification-content-padding-bottom) var(--plasma-notification-content-padding-left);}.base_crlufx_bmb6i7f__c6cc97dd .base_crlufx_notificaitonContentBox__c6cc97dd.base_crlufx_notificationLayoutVertical__c6cc97dd.base_crlufx_notificationWithoutIcon__c6cc97dd{padding-top:var(--plasma-notification-content-padding-top-without-icon);}.base_crlufx_bmb6i7f__c6cc97dd .base_crlufx_notificationCloseIcon__c6cc97dd.base_crlufx_notificationLayoutVertical__c6cc97dd{top:var(--plasma-notification-close-icon-top);right:var(--plasma-notification-close-icon-right);}
|
355
355
|
|
356
|
-
.
|
357
|
-
.
|
358
|
-
.
|
359
|
-
.
|
360
|
-
.
|
361
|
-
.
|
362
|
-
.
|
363
|
-
.
|
364
|
-
.
|
365
|
-
.
|
366
|
-
.
|
356
|
+
.Notification_styles_1u5gusp_sb12p__dcdf3719{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}
|
357
|
+
.Notification_styles_1u5gusp_crvd7hm__dcdf3719{position:absolute;width:var(--plasma-notification-close-icon-button-size);height:var(--plasma-notification-close-icon-button-size);-webkit-align-self:var(--plasma-notification-horizontal-icon-close-align-self);-ms-flex-item-align:var(--plasma-notification-horizontal-icon-close-align);align-self:var(--plasma-notification-horizontal-icon-close-align-self);color:var(--plasma-notification-close-icon-color);}.Notification_styles_1u5gusp_crvd7hm__dcdf3719:hover{color:var(--plasma-notification-close-icon-color-on-hover);}.Notification_styles_1u5gusp_crvd7hm__dcdf3719.Notification_styles_1u5gusp_notificationLayoutHorizontal__dcdf3719{position:relative;}
|
358
|
+
.Notification_styles_1u5gusp_wg1ga5v__dcdf3719{position:relative;box-sizing:border-box;background:var(--plasma-notification-backgorund);border-radius:var(--plasma-notification-border-radius);border:var(--plasma-notification-border-width) solid var(--plasma-notification-border-color);}.Notification_styles_1u5gusp_wg1ga5v__dcdf3719.Notification_styles_1u5gusp_notificationLayoutHorizontal__dcdf3719{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;gap:var(--plasma-notification-horizontal-layout-gap);}
|
359
|
+
.Notification_styles_1u5gusp_b1amsn8a__dcdf3719{margin-top:var(--plasma-notification-buttons-margin-top);margin-left:var(--b1amsn8a-0);-webkit-align-self:var(--plasma-notification-horizontal-actions-align-self);-ms-flex-item-align:var(--plasma-notification-horizontal-actions-align);align-self:var(--plasma-notification-horizontal-actions-align-self);}.Notification_styles_1u5gusp_b1amsn8a__dcdf3719.Notification_styles_1u5gusp_notificationLayoutHorizontal__dcdf3719{margin-top:unset;margin-left:unset;}
|
360
|
+
.Notification_styles_1u5gusp_i14raqr9__dcdf3719{width:var(--plasma-notification-content-left-icon-size);height:var(--plasma-notification-content-left-icon-size);-webkit-align-self:var(--plasma-notification-horizontal-icon-left-align-self);-ms-flex-item-align:var(--plasma-notification-horizontal-icon-left-align);align-self:var(--plasma-notification-horizontal-icon-left-align-self);margin-right:var(--i14raqr9-0);margin-bottom:var(--i14raqr9-1);}.Notification_styles_1u5gusp_i14raqr9__dcdf3719.Notification_styles_1u5gusp_notificationLayoutHorizontal__dcdf3719{margin-right:var(--plasma-notification-horizontal-layout-left-icon-margin);margin-bottom:unset;}
|
361
|
+
.Notification_styles_1u5gusp_c157peez__dcdf3719{display:var(--c157peez-0);padding-top:var(--c157peez-1);}.Notification_styles_1u5gusp_c157peez__dcdf3719.Notification_styles_1u5gusp_notificationLayoutHorizontal__dcdf3719{padding:unset;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;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}
|
362
|
+
.Notification_styles_1u5gusp_t1vmb0f2__dcdf3719{padding:var(--plasma-notification-textbox-padding-top) var(--plasma-notification-textbox-padding-right) var(--plasma-notification-textbox-padding-bottom) var(--plasma-notification-textbox-padding-left);padding-top:var(--t1vmb0f2-0);padding-right:var(--t1vmb0f2-1);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;row-gap:var(--plasma-notification-textbox-gap);word-break:break-word;}.Notification_styles_1u5gusp_t1vmb0f2__dcdf3719.Notification_styles_1u5gusp_notificationLayoutHorizontal__dcdf3719{padding:unset;}
|
363
|
+
.Notification_styles_1u5gusp_s1k4e58v__dcdf3719{font-family:var(--plasma-notification-title-font-family);font-size:var(--plasma-notification-title-font-size);font-style:var(--plasma-notification-title-font-style);font-weight:var(--plasma-notification-title-font-weight);-webkit-letter-spacing:var(--plasma-notification-title-font-letter-spacing);-moz-letter-spacing:var(--plasma-notification-title-font-letter-spacing);-ms-letter-spacing:var(--plasma-notification-title-font-letter-spacing);letter-spacing:var(--plasma-notification-title-font-letter-spacing);line-height:var(--plasma-notification-title-font-line-height);overflow-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;}
|
364
|
+
.Notification_styles_1u5gusp_s92kmpm__dcdf3719{font-family:var(--plasma-notification-content-font-family);font-size:var(--plasma-notification-content-font-size);font-style:var(--plasma-notification-content-font-style);font-weight:var(--plasma-notification-content-font-weight);-webkit-letter-spacing:var(--plasma-notification-content-font-letter-spacing);-moz-letter-spacing:var(--plasma-notification-content-font-letter-spacing);-ms-letter-spacing:var(--plasma-notification-content-font-letter-spacing);letter-spacing:var(--plasma-notification-content-font-letter-spacing);line-height:var(--plasma-notification-content-font-line-height);overflow-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;color:var(--plasma-notification-content-color);}
|
365
|
+
.Notification_styles_1u5gusp_s18m0x6v__dcdf3719{margin-top:1rem;opacity:1;}.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_notificationItemOpened__dcdf3719{-webkit-animation:0.4s Notification_styles_1u5gusp_showAnimationS18m0x6v__dcdf3719 ease-out;animation:0.4s Notification_styles_1u5gusp_showAnimationS18m0x6v__dcdf3719 ease-out;}.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_notificationItemOpened__dcdf3719.Notification_styles_1u5gusp_notificationLeftToRightAnimation__dcdf3719{-webkit-animation:0.4s Notification_styles_1u5gusp_showLeftToRightAnimationS18m0x6v__dcdf3719 ease-out;animation:0.4s Notification_styles_1u5gusp_showLeftToRightAnimationS18m0x6v__dcdf3719 ease-out;}.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_notificationItemHidden__dcdf3719{-webkit-animation:0.4s Notification_styles_1u5gusp_hideAnimationS18m0x6v__dcdf3719 ease-out;animation:0.4s Notification_styles_1u5gusp_hideAnimationS18m0x6v__dcdf3719 ease-out;}.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_notificationItemHidden__dcdf3719.Notification_styles_1u5gusp_notificationLeftToRightAnimation__dcdf3719{-webkit-animation:0.4s Notification_styles_1u5gusp_hideLeftToRightAnimationS18m0x6v__dcdf3719 ease-out;animation:0.4s Notification_styles_1u5gusp_hideLeftToRightAnimationS18m0x6v__dcdf3719 ease-out;}@-webkit-keyframes Notification_styles_1u5gusp_showLeftToRightAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@keyframes Notification_styles_1u5gusp_showLeftToRightAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@-webkit-keyframes Notification_styles_1u5gusp_hideLeftToRightAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);opacity:0;}}@keyframes Notification_styles_1u5gusp_hideLeftToRightAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);opacity:0;}}@-webkit-keyframes Notification_styles_1u5gusp_showAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@keyframes Notification_styles_1u5gusp_showAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@-webkit-keyframes Notification_styles_1u5gusp_hideAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}}@keyframes Notification_styles_1u5gusp_hideAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}}
|
366
|
+
.Notification_styles_1u5gusp_sfe5ql2__dcdf3719{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;box-sizing:border-box;padding:0 1.5rem 1.5rem;max-height:100%;-webkit-align-items:var(--sfe5ql2-0);-webkit-box-align:var(--sfe5ql2-0);-ms-flex-align:var(--sfe5ql2-0);align-items:var(--sfe5ql2-0);}
|
367
367
|
|
368
368
|
.base_dzs9wa_bd1gfvh__e42804c6{--plasma-panel-background:var(--plasma-drawer-background);--plasma-panel-shadow:var(--plasma-drawer-shadow);--plasma-panel-content-background-color:var(--plasma-drawer-content-background-color);}
|
369
369
|
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@salutejs/plasma-new-hope",
|
3
|
-
"version": "0.271.0-canary.
|
3
|
+
"version": "0.271.0-canary.1782.13387584790.0",
|
4
4
|
"description": "Salute Design System blueprint",
|
5
5
|
"main": "cjs/index.js",
|
6
6
|
"module": "es/index.js",
|
@@ -132,5 +132,5 @@
|
|
132
132
|
"sideEffects": [
|
133
133
|
"*.css"
|
134
134
|
],
|
135
|
-
"gitHead": "
|
135
|
+
"gitHead": "5876af92df2dd2fe10083d614261fcff2fa5f4e1"
|
136
136
|
}
|
@@ -21,7 +21,7 @@ var _base = /*#__PURE__*/require("./variations/_view/base");
|
|
21
21
|
var _base2 = /*#__PURE__*/require("./variations/_size/base");
|
22
22
|
var _SelectNative = /*#__PURE__*/require("./ui/SelectNative/SelectNative");
|
23
23
|
var _Combobox3 = /*#__PURE__*/require("./Combobox.context");
|
24
|
-
var _excluded = ["name", "multiple", "value", "onChange", "defaultValue", "isTargetAmount", "targetAmount", "items", "placement", "label", "placeholder", "helperText", "contentLeft", "textBefore", "textAfter", "variant", "listOverflow", "listHeight", "listWidth", "portal", "renderItem", "view", "size", "labelPlacement", "keepPlaceholder", "readOnly", "disabled", "alwaysOpened", "filter", "closeAfterSelect", "renderValue", "zIndex", "beforeList", "afterList", "virtual", "hintView", "hintSize"];
|
24
|
+
var _excluded = ["name", "multiple", "value", "onChange", "defaultValue", "isTargetAmount", "targetAmount", "items", "placement", "label", "placeholder", "helperText", "contentLeft", "textBefore", "textAfter", "variant", "listOverflow", "listHeight", "listWidth", "portal", "renderItem", "view", "size", "labelPlacement", "keepPlaceholder", "readOnly", "disabled", "alwaysOpened", "filter", "closeAfterSelect", "renderValue", "zIndex", "beforeList", "afterList", "virtual", "hintView", "hintSize", "onChangeValue"];
|
25
25
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
26
26
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
27
27
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
@@ -88,6 +88,7 @@ var comboboxRoot = exports.comboboxRoot = function comboboxRoot(Root) {
|
|
88
88
|
virtual = _props$virtual === void 0 ? false : _props$virtual,
|
89
89
|
hintView = props.hintView,
|
90
90
|
hintSize = props.hintSize,
|
91
|
+
onChangeValue = props.onChangeValue,
|
91
92
|
rest = _objectWithoutProperties(props, _excluded);
|
92
93
|
var transformedItems = (0, _react.useMemo)(function () {
|
93
94
|
return (0, _utils3.initialItemsTransform)(items || []);
|
@@ -213,6 +214,9 @@ var comboboxRoot = exports.comboboxRoot = function comboboxRoot(Root) {
|
|
213
214
|
dispatchFocusedPath({
|
214
215
|
type: 'reset'
|
215
216
|
});
|
217
|
+
if (onChangeValue) {
|
218
|
+
onChangeValue(e.target.value);
|
219
|
+
}
|
216
220
|
};
|
217
221
|
|
218
222
|
// Обработчик чипов
|
@@ -17,7 +17,7 @@ var _base4 = /*#__PURE__*/require("./variations/_closeIconType/base");
|
|
17
17
|
var _Notification2 = /*#__PURE__*/require("./Notification.types");
|
18
18
|
var _Notification3 = /*#__PURE__*/require("./Notification.styles");
|
19
19
|
var _utils2 = /*#__PURE__*/require("./utils");
|
20
|
-
var _excluded = ["role", "title", "children", "actions", "view", "size", "iconPlacement", "showCloseIcon", "layout", "icon", "closeIconType", "
|
20
|
+
var _excluded = ["role", "title", "children", "actions", "view", "size", "iconPlacement", "showCloseIcon", "layout", "icon", "closeIconType", "onCloseButtonClick"];
|
21
21
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
22
22
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
23
23
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
@@ -42,8 +42,6 @@ var notificationRoot = exports.notificationRoot = function notificationRoot(Root
|
|
42
42
|
layout = _props$layout === void 0 ? _Notification2.layouts.vertical : _props$layout,
|
43
43
|
icon = props.icon,
|
44
44
|
closeIconType = props.closeIconType,
|
45
|
-
textColor = props.textColor,
|
46
|
-
iconColor = props.iconColor,
|
47
45
|
onCloseButtonClick = props.onCloseButtonClick,
|
48
46
|
rest = _objectWithoutProperties(props, _excluded);
|
49
47
|
var ariaLive = 'polite';
|
@@ -76,15 +74,13 @@ var notificationRoot = exports.notificationRoot = function notificationRoot(Root
|
|
76
74
|
className: (0, _utils.cx)(_Notification.classes.contentBox, (0, _utils2.getLayoutClass)(layout), withoutIconClass)
|
77
75
|
}, icon && /*#__PURE__*/_react["default"].createElement(_Notification3.IconWrapper, {
|
78
76
|
iconPlacement: IconPlacementInternal,
|
79
|
-
className: (0, _utils.cx)(_Notification.classes.icon, (0, _utils2.getLayoutClass)(layout))
|
80
|
-
iconColor: iconColor
|
77
|
+
className: (0, _utils.cx)(_Notification.classes.icon, (0, _utils2.getLayoutClass)(layout))
|
81
78
|
}, icon), /*#__PURE__*/_react["default"].createElement(_Notification3.TextBox, {
|
82
79
|
iconPlacement: IconPlacementInternal,
|
83
80
|
showCloseIcon: showCloseIcon,
|
84
81
|
className: (0, _utils.cx)(_Notification.classes.textbox, (0, _utils2.getLayoutClass)(layout))
|
85
82
|
}, title && /*#__PURE__*/_react["default"].createElement(_Notification3.StyledTitle, {
|
86
|
-
className: _Notification.classes.title
|
87
|
-
textColor: textColor
|
83
|
+
className: _Notification.classes.title
|
88
84
|
}, title), content && /*#__PURE__*/_react["default"].createElement(_Notification3.StyledContent, {
|
89
85
|
className: _Notification.classes.text
|
90
86
|
}, content))), actions && /*#__PURE__*/_react["default"].createElement(_Notification3.ButtonsWrapper, {
|
@@ -32,41 +32,35 @@ var ButtonsWrapper = exports.ButtonsWrapper = /*#__PURE__*/_styledComponents["de
|
|
32
32
|
}, _Notification.tokens.horisontalActionsAlignSelf, _Notification.classes.horizontal);
|
33
33
|
var IconWrapper = exports.IconWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
34
34
|
componentId: "plasma-new-hope__sc-1iufy9r-3"
|
35
|
-
})(["width:var(", ");height:var(", ");align-self:var(", ");
|
36
|
-
var
|
37
|
-
return
|
35
|
+
})(["width:var(", ");height:var(", ");align-self:var(", ");margin-right:", ";margin-bottom:", ";&.", "{margin-right:var(", ");margin-bottom:unset;}"], _Notification.tokens.contentLeftIconSize, _Notification.tokens.contentLeftIconSize, _Notification.tokens.horisontalIconLeftAlignSelf, function (_ref2) {
|
36
|
+
var iconPlacement = _ref2.iconPlacement;
|
37
|
+
return iconPlacement === _Notification2.placements.left ? "var(".concat(_Notification.tokens.contentLeftIconMargin, ")") : 'unset';
|
38
38
|
}, function (_ref3) {
|
39
39
|
var iconPlacement = _ref3.iconPlacement;
|
40
|
-
return iconPlacement === _Notification2.placements.left ? "var(".concat(_Notification.tokens.contentLeftIconMargin, ")") : 'unset';
|
41
|
-
}, function (_ref4) {
|
42
|
-
var iconPlacement = _ref4.iconPlacement;
|
43
40
|
return iconPlacement === _Notification2.placements.top ? "var(".concat(_Notification.tokens.contentTopIconMargin, ")") : 'unset';
|
44
41
|
}, _Notification.classes.horizontal, _Notification.tokens.horizontalLayoutLeftIconMargin);
|
45
42
|
var ContentBox = exports.ContentBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
46
43
|
componentId: "plasma-new-hope__sc-1iufy9r-4"
|
47
|
-
})(["display:", ";padding-top:", ";&.", "{padding:unset;display:flex;align-items:center;flex-grow:1;}"], function (
|
48
|
-
var iconPlacement =
|
44
|
+
})(["display:", ";padding-top:", ";&.", "{padding:unset;display:flex;align-items:center;flex-grow:1;}"], function (_ref4) {
|
45
|
+
var iconPlacement = _ref4.iconPlacement;
|
49
46
|
return iconPlacement === _Notification2.placements.left ? 'flex' : 'block';
|
50
|
-
}, function (
|
51
|
-
var iconPlacement =
|
47
|
+
}, function (_ref5) {
|
48
|
+
var iconPlacement = _ref5.iconPlacement;
|
52
49
|
return iconPlacement ? "var(".concat(_Notification.tokens.contentPaddingTop, ")") : "var(".concat(_Notification.tokens.contentPaddingTopWithoutIcon, ")");
|
53
50
|
}, _Notification.classes.horizontal);
|
54
51
|
var TextBox = exports.TextBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
55
52
|
componentId: "plasma-new-hope__sc-1iufy9r-5"
|
56
|
-
})(["padding:var(", ") var(", ") var(", ") var(", ");padding-top:", ";padding-right:", ";display:flex;flex-direction:column;row-gap:var(", ");word-break:break-word;&.", "{padding:unset;}"], _Notification.tokens.textboxPaddingTop, _Notification.tokens.textboxPaddingRight, _Notification.tokens.textboxPaddingBottom, _Notification.tokens.textboxPaddingLeft, function (
|
57
|
-
var iconPlacement =
|
53
|
+
})(["padding:var(", ") var(", ") var(", ") var(", ");padding-top:", ";padding-right:", ";display:flex;flex-direction:column;row-gap:var(", ");word-break:break-word;&.", "{padding:unset;}"], _Notification.tokens.textboxPaddingTop, _Notification.tokens.textboxPaddingRight, _Notification.tokens.textboxPaddingBottom, _Notification.tokens.textboxPaddingLeft, function (_ref6) {
|
54
|
+
var iconPlacement = _ref6.iconPlacement;
|
58
55
|
return !iconPlacement || iconPlacement === _Notification2.placements.top ? "var(".concat(_Notification.tokens.textboxPaddingTopWithTopIcon, ")") : "var(".concat(_Notification.tokens.textboxPaddingTop, ")");
|
59
|
-
}, function (
|
60
|
-
var showCloseIcon =
|
61
|
-
iconPlacement =
|
56
|
+
}, function (_ref7) {
|
57
|
+
var showCloseIcon = _ref7.showCloseIcon,
|
58
|
+
iconPlacement = _ref7.iconPlacement;
|
62
59
|
return showCloseIcon && iconPlacement !== _Notification2.placements.top ? "var(".concat(_Notification.tokens.textboxPaddingRightWithCloseIcon, ")") : "var(".concat(_Notification.tokens.textboxPaddingRight, ")");
|
63
60
|
}, _Notification.tokens.textboxGap, _Notification.classes.horizontal);
|
64
61
|
var StyledTitle = exports.StyledTitle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
65
62
|
componentId: "plasma-new-hope__sc-1iufy9r-6"
|
66
|
-
})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", ";
|
67
|
-
var textColor = _ref9.textColor;
|
68
|
-
return textColor || "var(".concat(_Notification.tokens.titleColor, ")");
|
69
|
-
});
|
63
|
+
})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", ";"], _Notification.tokens.titleFontFamily, _Notification.tokens.titleFontSize, _Notification.tokens.titleFontStyle, _Notification.tokens.titleFontWeight, _Notification.tokens.titleFontLetterSpacing, _Notification.tokens.titleFontLineHeight, /*#__PURE__*/String(_mixins.applyHyphens));
|
70
64
|
var StyledContent = exports.StyledContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
71
65
|
componentId: "plasma-new-hope__sc-1iufy9r-7"
|
72
66
|
})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", ";color:var(", ");"], _Notification.tokens.contentFontFamily, _Notification.tokens.contentFontSize, _Notification.tokens.contentFontStyle, _Notification.tokens.contentFontWeight, _Notification.tokens.contentFontLetterSpacing, _Notification.tokens.contentFontLineHeight, /*#__PURE__*/String(_mixins.applyHyphens), _Notification.tokens.contentColor);
|
@@ -75,7 +69,7 @@ var StyledItemWrapper = exports.StyledItemWrapper = /*#__PURE__*/_styledComponen
|
|
75
69
|
})(["margin-top:1rem;opacity:1;&&.", "{animation:0.4s showAnimation ease-out;&.", "{animation:0.4s showLeftToRightAnimation ease-out;}}&&.", "{animation:0.4s hideAnimation ease-out;&.", "{animation:0.4s hideLeftToRightAnimation ease-out;}}@keyframes showLeftToRightAnimation{0%{transform:translateX(-100%);opacity:0;}100%{transform:translateX(0);opacity:1;}}@keyframes hideLeftToRightAnimation{0%{transform:translateX(0);opacity:1;}100%{transform:translateX(-100%);opacity:0;}}@keyframes showAnimation{0%{transform:translateX(100%);opacity:0;}100%{transform:translateX(0);opacity:1;}}@keyframes hideAnimation{0%{transform:translateX(0);opacity:1;}100%{transform:translateX(100%);opacity:0;}}"], _Notification.classes.notificationItemOpened, _Notification.classes.notificationLeftToRightAnimation, _Notification.classes.notificationItemHidden, _Notification.classes.notificationLeftToRightAnimation);
|
76
70
|
var StyledRoot = exports.StyledRoot = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
77
71
|
componentId: "plasma-new-hope__sc-1iufy9r-9"
|
78
|
-
})(["display:flex;flex-direction:column-reverse;box-sizing:border-box;padding:0 1.5rem 1.5rem;max-height:100%;align-items:", ";"], function (
|
79
|
-
var placement =
|
72
|
+
})(["display:flex;flex-direction:column-reverse;box-sizing:border-box;padding:0 1.5rem 1.5rem;max-height:100%;align-items:", ";"], function (_ref8) {
|
73
|
+
var placement = _ref8.placement;
|
80
74
|
return placement === 'bottom-left' ? 'flex-start' : 'flex-end';
|
81
75
|
});
|
@@ -51,7 +51,6 @@ var tokens = exports.tokens = {
|
|
51
51
|
textboxGap: '--plasma-notification-textbox-gap',
|
52
52
|
buttonsMarginTop: '--plasma-notification-buttons-margin-top',
|
53
53
|
buttonsMarginLeft: '--plasma-notification-buttons-margin-left',
|
54
|
-
contentLeftIconColor: '--plasma-notification-content-left-icon-color',
|
55
54
|
contentLeftIconSize: '--plasma-notification-content-left-icon-size',
|
56
55
|
contentLeftIconMargin: '--plasma-notification-content-left-icon-margin',
|
57
56
|
contentTopIconMargin: '--plasma-notification-content-top-icon-margin',
|
@@ -42,7 +42,6 @@ var NotificationsPortal = exports.NotificationsPortal = function NotificationsPo
|
|
42
42
|
var Notification = (0, _react.useMemo)(function () {
|
43
43
|
return (0, _engines.component)(config);
|
44
44
|
}, []);
|
45
|
-
console.log(notifications);
|
46
45
|
return /*#__PURE__*/_react["default"].createElement(_Popup.PopupProvider, {
|
47
46
|
UNSAFE_SSR_ENABLED: UNSAFE_SSR_ENABLED
|
48
47
|
}, notifications.length > 0 && /*#__PURE__*/_react["default"].createElement(StyledPopup, {
|