@salutejs/plasma-new-hope 0.324.1-canary.1996.15273628835.0 → 0.324.1-canary.1998.15294767801.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/components/Notification/Notification.css +12 -12
- package/cjs/components/Notification/Notification.js +5 -1
- package/cjs/components/Notification/Notification.js.map +1 -1
- package/cjs/components/Notification/Notification.styles.js +63 -48
- package/cjs/components/Notification/Notification.styles.js.map +1 -1
- package/cjs/components/Notification/{Notification.styles_1yt699o.css → Notification.styles_1uyb7ob.css} +1 -1
- package/cjs/components/Notification/Notification.types.js.map +1 -1
- package/cjs/components/Notification/NotificationsProvider.css +11 -11
- package/cjs/components/Notification/variations/_layout/base.js +1 -1
- package/cjs/components/Notification/variations/_layout/base.js.map +1 -1
- package/cjs/components/Notification/variations/_layout/base_1g9g70c.css +1 -0
- package/cjs/components/NumberFormat/NumberFormat.js +2 -7
- package/cjs/components/NumberFormat/NumberFormat.js.map +1 -1
- package/cjs/index.css +12 -12
- package/emotion/cjs/components/Notification/Notification.js +5 -1
- package/emotion/cjs/components/Notification/Notification.styles.js +43 -36
- package/emotion/cjs/components/Notification/Notification.template-doc.mdx +44 -0
- package/emotion/cjs/components/Notification/variations/_layout/base.js +1 -1
- package/emotion/cjs/components/NumberFormat/NumberFormat.js +2 -7
- package/emotion/cjs/components/TextField/TextField.template-doc.mdx +16 -1
- package/emotion/cjs/examples/fixtures/Notification.js +1 -1
- package/emotion/cjs/examples/plasma_b2c/components/Notification/Notification.stories.tsx +5 -1
- package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +23 -22
- package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +9 -4
- package/emotion/cjs/examples/plasma_web/components/Notification/Notification.stories.tsx +5 -1
- package/emotion/cjs/examples/plasma_web/components/TextField/TextField.config.js +23 -22
- package/emotion/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +10 -5
- package/emotion/es/components/Notification/Notification.js +5 -1
- package/emotion/es/components/Notification/Notification.styles.js +43 -36
- package/emotion/es/components/Notification/Notification.template-doc.mdx +44 -0
- package/emotion/es/components/Notification/variations/_layout/base.js +1 -1
- package/emotion/es/components/NumberFormat/NumberFormat.js +2 -7
- package/emotion/es/components/TextField/TextField.template-doc.mdx +16 -1
- package/emotion/es/examples/fixtures/Notification.js +1 -1
- package/emotion/es/examples/plasma_b2c/components/Notification/Notification.stories.tsx +5 -1
- package/emotion/es/examples/plasma_b2c/components/TextField/TextField.config.js +23 -22
- package/emotion/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +9 -4
- package/emotion/es/examples/plasma_web/components/Notification/Notification.stories.tsx +5 -1
- package/emotion/es/examples/plasma_web/components/TextField/TextField.config.js +23 -22
- package/emotion/es/examples/plasma_web/components/TextField/TextField.stories.tsx +10 -5
- package/es/components/Notification/Notification.css +12 -12
- package/es/components/Notification/Notification.js +5 -1
- package/es/components/Notification/Notification.js.map +1 -1
- package/es/components/Notification/Notification.styles.js +63 -48
- package/es/components/Notification/Notification.styles.js.map +1 -1
- package/es/components/Notification/{Notification.styles_1yt699o.css → Notification.styles_1uyb7ob.css} +1 -1
- package/es/components/Notification/Notification.types.js.map +1 -1
- package/es/components/Notification/NotificationsProvider.css +11 -11
- package/es/components/Notification/variations/_layout/base.js +1 -1
- package/es/components/Notification/variations/_layout/base.js.map +1 -1
- package/es/components/Notification/variations/_layout/base_1g9g70c.css +1 -0
- package/es/components/NumberFormat/NumberFormat.js +2 -7
- package/es/components/NumberFormat/NumberFormat.js.map +1 -1
- package/es/index.css +12 -12
- package/package.json +4 -4
- package/styled-components/cjs/components/Notification/Notification.js +5 -1
- package/styled-components/cjs/components/Notification/Notification.styles.js +33 -26
- package/styled-components/cjs/components/Notification/Notification.template-doc.mdx +44 -0
- package/styled-components/cjs/components/Notification/variations/_layout/base.js +1 -1
- package/styled-components/cjs/components/NumberFormat/NumberFormat.js +2 -7
- package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +16 -1
- package/styled-components/cjs/examples/fixtures/Notification.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Notification/Notification.stories.tsx +5 -1
- package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +2 -1
- package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +9 -4
- package/styled-components/cjs/examples/plasma_web/components/Notification/Notification.stories.tsx +5 -1
- package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.config.js +7 -6
- package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +10 -5
- package/styled-components/es/components/Notification/Notification.js +5 -1
- package/styled-components/es/components/Notification/Notification.styles.js +33 -26
- package/styled-components/es/components/Notification/Notification.template-doc.mdx +44 -0
- package/styled-components/es/components/Notification/variations/_layout/base.js +1 -1
- package/styled-components/es/components/NumberFormat/NumberFormat.js +2 -7
- package/styled-components/es/components/TextField/TextField.template-doc.mdx +16 -1
- package/styled-components/es/examples/fixtures/Notification.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Notification/Notification.stories.tsx +5 -1
- package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.config.js +2 -1
- package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +9 -4
- package/styled-components/es/examples/plasma_web/components/Notification/Notification.stories.tsx +5 -1
- package/styled-components/es/examples/plasma_web/components/TextField/TextField.config.js +7 -6
- package/styled-components/es/examples/plasma_web/components/TextField/TextField.stories.tsx +10 -5
- package/types/components/Notification/Notification.d.ts.map +1 -1
- package/types/components/Notification/Notification.styles.d.ts +3 -1
- package/types/components/Notification/Notification.styles.d.ts.map +1 -1
- package/types/components/Notification/Notification.types.d.ts +9 -0
- package/types/components/Notification/Notification.types.d.ts.map +1 -1
- package/types/components/NumberFormat/NumberFormat.d.ts.map +1 -1
- package/cjs/components/Notification/variations/_layout/base_qkc3i4.css +0 -1
- package/es/components/Notification/variations/_layout/base_qkc3i4.css +0 -1
|
@@ -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_1uyb7ob_sb12p__65d2ebe5{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}
|
|
33
|
+
.Notification_styles_1uyb7ob_crvd7hm__65d2ebe5{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_1uyb7ob_crvd7hm__65d2ebe5:hover{color:var(--plasma-notification-close-icon-color-on-hover);}.Notification_styles_1uyb7ob_crvd7hm__65d2ebe5.Notification_styles_1uyb7ob_notificationLayoutHorizontal__65d2ebe5{position:relative;}
|
|
34
|
+
.Notification_styles_1uyb7ob_wg1ga5v__65d2ebe5{position:relative;width:var(--wg1ga5v-0);max-width:var(--wg1ga5v-1);border-radius:var(--plasma-notification-border-radius);border:var(--plasma-notification-border-width) solid var(--plasma-notification-border-color);background:var(--wg1ga5v-2);box-sizing:border-box;}.Notification_styles_1uyb7ob_wg1ga5v__65d2ebe5.Notification_styles_1uyb7ob_notificationLayoutHorizontal__65d2ebe5{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_1uyb7ob_b1amsn8a__65d2ebe5{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_1uyb7ob_b1amsn8a__65d2ebe5.Notification_styles_1uyb7ob_notificationLayoutHorizontal__65d2ebe5{margin-top:unset;margin-left:unset;}
|
|
36
|
+
.Notification_styles_1uyb7ob_i14raqr9__65d2ebe5{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);color:var(--i14raqr9-0);margin-right:var(--i14raqr9-1);margin-bottom:var(--i14raqr9-2);}.Notification_styles_1uyb7ob_i14raqr9__65d2ebe5.Notification_styles_1uyb7ob_notificationLayoutHorizontal__65d2ebe5{margin-right:var(--plasma-notification-horizontal-layout-left-icon-margin);margin-bottom:unset;}
|
|
37
|
+
.Notification_styles_1uyb7ob_c157peez__65d2ebe5{display:var(--c157peez-0);padding-top:var(--c157peez-1);}.Notification_styles_1uyb7ob_c157peez__65d2ebe5.Notification_styles_1uyb7ob_notificationLayoutHorizontal__65d2ebe5{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_1uyb7ob_t1vmb0f2__65d2ebe5{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_1uyb7ob_t1vmb0f2__65d2ebe5.Notification_styles_1uyb7ob_notificationLayoutHorizontal__65d2ebe5{padding:unset;}
|
|
39
|
+
.Notification_styles_1uyb7ob_s1k4e58v__65d2ebe5{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;color:var(--s1k4e58v-0);}
|
|
40
|
+
.Notification_styles_1uyb7ob_s92kmpm__65d2ebe5{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(--s92kmpm-0);}
|
|
41
|
+
.Notification_styles_1uyb7ob_s18m0x6v__65d2ebe5{margin-top:1rem;opacity:1;}.Notification_styles_1uyb7ob_s18m0x6v__65d2ebe5.Notification_styles_1uyb7ob_s18m0x6v__65d2ebe5.Notification_styles_1uyb7ob_notificationItemOpened__65d2ebe5{-webkit-animation:0.4s Notification_styles_1uyb7ob_showAnimationS18m0x6v__65d2ebe5 ease-out;animation:0.4s Notification_styles_1uyb7ob_showAnimationS18m0x6v__65d2ebe5 ease-out;}.Notification_styles_1uyb7ob_s18m0x6v__65d2ebe5.Notification_styles_1uyb7ob_s18m0x6v__65d2ebe5.Notification_styles_1uyb7ob_notificationItemOpened__65d2ebe5.Notification_styles_1uyb7ob_notificationLeftToRightAnimation__65d2ebe5{-webkit-animation:0.4s Notification_styles_1uyb7ob_showLeftToRightAnimationS18m0x6v__65d2ebe5 ease-out;animation:0.4s Notification_styles_1uyb7ob_showLeftToRightAnimationS18m0x6v__65d2ebe5 ease-out;}.Notification_styles_1uyb7ob_s18m0x6v__65d2ebe5.Notification_styles_1uyb7ob_s18m0x6v__65d2ebe5.Notification_styles_1uyb7ob_notificationItemOpened__65d2ebe5.Notification_styles_1uyb7ob_notificationTopToCenterAnimation__65d2ebe5{-webkit-animation:0.4s Notification_styles_1uyb7ob_showTopToCenterAnimationS18m0x6v__65d2ebe5 ease-out;animation:0.4s Notification_styles_1uyb7ob_showTopToCenterAnimationS18m0x6v__65d2ebe5 ease-out;}.Notification_styles_1uyb7ob_s18m0x6v__65d2ebe5.Notification_styles_1uyb7ob_s18m0x6v__65d2ebe5.Notification_styles_1uyb7ob_notificationItemOpened__65d2ebe5.Notification_styles_1uyb7ob_notificationBottomToCenterAnimation__65d2ebe5{-webkit-animation:0.4s Notification_styles_1uyb7ob_showBottomToCenterAnimationS18m0x6v__65d2ebe5 ease-out;animation:0.4s Notification_styles_1uyb7ob_showBottomToCenterAnimationS18m0x6v__65d2ebe5 ease-out;}.Notification_styles_1uyb7ob_s18m0x6v__65d2ebe5.Notification_styles_1uyb7ob_s18m0x6v__65d2ebe5.Notification_styles_1uyb7ob_notificationItemHidden__65d2ebe5{-webkit-animation:0.4s Notification_styles_1uyb7ob_hideAnimationS18m0x6v__65d2ebe5 ease-out;animation:0.4s Notification_styles_1uyb7ob_hideAnimationS18m0x6v__65d2ebe5 ease-out;}.Notification_styles_1uyb7ob_s18m0x6v__65d2ebe5.Notification_styles_1uyb7ob_s18m0x6v__65d2ebe5.Notification_styles_1uyb7ob_notificationItemHidden__65d2ebe5.Notification_styles_1uyb7ob_notificationLeftToRightAnimation__65d2ebe5{-webkit-animation:0.4s Notification_styles_1uyb7ob_hideLeftToRightAnimationS18m0x6v__65d2ebe5 ease-out;animation:0.4s Notification_styles_1uyb7ob_hideLeftToRightAnimationS18m0x6v__65d2ebe5 ease-out;}@-webkit-keyframes Notification_styles_1uyb7ob_showTopToCenterAnimationS18m0x6v__65d2ebe5{0%{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);opacity:0;}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;}}@keyframes Notification_styles_1uyb7ob_showTopToCenterAnimationS18m0x6v__65d2ebe5{0%{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);opacity:0;}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;}}@-webkit-keyframes Notification_styles_1uyb7ob_showBottomToCenterAnimationS18m0x6v__65d2ebe5{0%{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);opacity:0;}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;}}@keyframes Notification_styles_1uyb7ob_showBottomToCenterAnimationS18m0x6v__65d2ebe5{0%{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);opacity:0;}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;}}@-webkit-keyframes Notification_styles_1uyb7ob_showLeftToRightAnimationS18m0x6v__65d2ebe5{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_1uyb7ob_showLeftToRightAnimationS18m0x6v__65d2ebe5{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_1uyb7ob_hideLeftToRightAnimationS18m0x6v__65d2ebe5{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_1uyb7ob_hideLeftToRightAnimationS18m0x6v__65d2ebe5{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_1uyb7ob_showAnimationS18m0x6v__65d2ebe5{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_1uyb7ob_showAnimationS18m0x6v__65d2ebe5{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_1uyb7ob_hideAnimationS18m0x6v__65d2ebe5{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_1uyb7ob_hideAnimationS18m0x6v__65d2ebe5{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_1uyb7ob_sfe5ql2__65d2ebe5{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;}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base.js","sources":["../../../../../src/components/Notification/variations/_layout/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../Notification.tokens';\n\nexport const base = css`\n .${classes.wrapper} {\n
|
|
1
|
+
{"version":3,"file":"base.js","sources":["../../../../../src/components/Notification/variations/_layout/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../Notification.tokens';\n\nexport const base = css`\n .${classes.wrapper} {\n padding: var(${tokens.padding});\n }\n\n .${classes.wrapper}.${classes.horizontal} {\n padding: var(${tokens.horizontalLayoutPadding});\n\n &.${classes.withoutCloseIcon} {\n padding-right: var(${tokens.horizontalLayoutRightPaddingWithoutCloseIcon});\n }\n }\n\n .${classes.wrapper}.${classes.horizontal}.${classes.oneLine} {\n padding: var(${tokens.paddingOneLineTextbox});\n }\n`;\n"],"names":["base"],"mappings":"AAIO,IAAMA,IAAI,GAgBhB;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.bg3tssa .notification-wrapper{padding:var(--plasma-notification-padding);}.bg3tssa .notification-wrapper.notification-layout-horizontal{padding:var(--plasma-notification-horizontal-layout-padding);}.bg3tssa .notification-wrapper.notification-layout-horizontal.notification-without-close-icon{padding-right:var(--plasma-notification-horizontal-layout-right-padding-without-close-icon);}.bg3tssa .notification-wrapper.notification-layout-horizontal.notification-one-line-textbox{padding:var(--plasma-notification-padding-one-line-textbox);}
|
|
@@ -19,18 +19,13 @@ var composeNumberFormat = function composeNumberFormat(InputComponent) {
|
|
|
19
19
|
onChange(changeEvent, values);
|
|
20
20
|
}
|
|
21
21
|
};
|
|
22
|
-
var InputComponentWithoutEllipsis = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
23
|
-
return /*#__PURE__*/React.createElement(InputComponent, _extends({
|
|
24
|
-
ref: ref,
|
|
25
|
-
_textEllipsisDisable: true
|
|
26
|
-
}, props));
|
|
27
|
-
});
|
|
28
22
|
return /*#__PURE__*/React.createElement(NumericFormat, _extends({
|
|
29
23
|
thousandSeparator: thousandSeparator,
|
|
30
24
|
decimalScale: decimalScale,
|
|
31
25
|
decimalSeparator: decimalSeparator,
|
|
32
|
-
customInput:
|
|
26
|
+
customInput: InputComponent,
|
|
33
27
|
getInputRef: outerRef,
|
|
28
|
+
_textEllipsisDisable: true,
|
|
34
29
|
onValueChange: handleChangeValue
|
|
35
30
|
}, rest));
|
|
36
31
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberFormat.js","sources":["../../../src/components/NumberFormat/NumberFormat.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport type { ChangeEvent, FC } from 'react';\nimport { NumericFormat } from 'react-number-format';\nimport type { NumberFormatValues, SourceInfo } from 'react-number-format';\n\nimport type {\n CustomNumberFormatProps,\n CustomNumericFormatProps,\n InputComponentOmittedProps,\n} from './NumberFormat.types';\n\nexport const composeNumberFormat = <T extends InputComponentOmittedProps>(InputComponent: FC<T>) => {\n return forwardRef<HTMLInputElement, T & CustomNumberFormatProps & CustomNumericFormatProps>(\n ({ thousandSeparator = ' ', decimalScale = 3, decimalSeparator = '.', onChange, ...rest }, outerRef) => {\n const handleChangeValue = (values: NumberFormatValues, sourceInfo: SourceInfo) => {\n if (onChange) {\n const changeEvent = sourceInfo.event as ChangeEvent<HTMLInputElement>;\n onChange(changeEvent, values);\n }\n };\n\n
|
|
1
|
+
{"version":3,"file":"NumberFormat.js","sources":["../../../src/components/NumberFormat/NumberFormat.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport type { ChangeEvent, FC } from 'react';\nimport { NumericFormat } from 'react-number-format';\nimport type { NumberFormatValues, SourceInfo } from 'react-number-format';\n\nimport type {\n CustomNumberFormatProps,\n CustomNumericFormatProps,\n InputComponentOmittedProps,\n} from './NumberFormat.types';\n\nexport const composeNumberFormat = <T extends InputComponentOmittedProps>(InputComponent: FC<T>) => {\n return forwardRef<HTMLInputElement, T & CustomNumberFormatProps & CustomNumericFormatProps>(\n ({ thousandSeparator = ' ', decimalScale = 3, decimalSeparator = '.', onChange, ...rest }, outerRef) => {\n const handleChangeValue = (values: NumberFormatValues, sourceInfo: SourceInfo) => {\n if (onChange) {\n const changeEvent = sourceInfo.event as ChangeEvent<HTMLInputElement>;\n onChange(changeEvent, values);\n }\n };\n\n return (\n <NumericFormat\n thousandSeparator={thousandSeparator}\n decimalScale={decimalScale}\n decimalSeparator={decimalSeparator}\n customInput={InputComponent}\n getInputRef={outerRef}\n _textEllipsisDisable\n onValueChange={handleChangeValue}\n {...rest}\n />\n );\n },\n );\n};\n"],"names":["composeNumberFormat","InputComponent","forwardRef","_ref","outerRef","_ref$thousandSeparato","thousandSeparator","_ref$decimalScale","decimalScale","_ref$decimalSeparator","decimalSeparator","onChange","rest","_objectWithoutProperties","_excluded","handleChangeValue","values","sourceInfo","changeEvent","event","React","createElement","NumericFormat","_extends","customInput","getInputRef","_textEllipsisDisable","onValueChange"],"mappings":";;;;;IAWaA,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAA0CC,cAAqB,EAAK;AAChG,EAAA,oBAAOC,UAAU,CACb,UAAAC,IAAA,EAA2FC,QAAQ,EAAK;AAAA,IAAA,IAAAC,qBAAA,GAAAF,IAAA,CAArGG,iBAAiB;AAAjBA,MAAAA,iBAAiB,GAAAD,qBAAA,KAAG,KAAA,CAAA,GAAA,GAAG,GAAAA,qBAAA;MAAAE,iBAAA,GAAAJ,IAAA,CAAEK,YAAY;AAAZA,MAAAA,YAAY,GAAAD,iBAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,iBAAA;MAAAE,qBAAA,GAAAN,IAAA,CAAEO,gBAAgB;AAAhBA,MAAAA,gBAAgB,GAAAD,qBAAA,KAAG,KAAA,CAAA,GAAA,GAAG,GAAAA,qBAAA;MAAEE,QAAQ,GAAAR,IAAA,CAARQ,QAAQ;AAAKC,MAAAA,IAAI,GAAAC,wBAAA,CAAAV,IAAA,EAAAW,SAAA,CAAA,CAAA;IACnF,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAIC,MAA0B,EAAEC,UAAsB,EAAK;AAC9E,MAAA,IAAIN,QAAQ,EAAE;AACV,QAAA,IAAMO,WAAW,GAAGD,UAAU,CAACE,KAAsC,CAAA;AACrER,QAAAA,QAAQ,CAACO,WAAW,EAAEF,MAAM,CAAC,CAAA;AACjC,OAAA;KACH,CAAA;AAED,IAAA,oBACII,KAAA,CAAAC,aAAA,CAACC,aAAa,EAAAC,QAAA,CAAA;AACVjB,MAAAA,iBAAiB,EAAEA,iBAAkB;AACrCE,MAAAA,YAAY,EAAEA,YAAa;AAC3BE,MAAAA,gBAAgB,EAAEA,gBAAiB;AACnCc,MAAAA,WAAW,EAAEvB,cAAe;AAC5BwB,MAAAA,WAAW,EAAErB,QAAS;MACtBsB,oBAAoB,EAAA,IAAA;AACpBC,MAAAA,aAAa,EAAEZ,iBAAAA;KACXH,EAAAA,IAAI,CACX,CAAC,CAAA;AAEV,GACJ,CAAC,CAAA;AACL;;;;"}
|
package/es/index.css
CHANGED
|
@@ -354,21 +354,21 @@
|
|
|
354
354
|
|
|
355
355
|
.NotificationsPortal_6417q6_s19gbs9t__4166aeb6 > .NotificationsPortal_6417q6_popupBaseRoot__4166aeb6{overflow:hidden;}
|
|
356
356
|
|
|
357
|
-
.
|
|
357
|
+
.base_1g9g70c_bg3tssa__c76a6dea .base_1g9g70c_notificationWrapper__c76a6dea{padding:var(--plasma-notification-padding);}.base_1g9g70c_bg3tssa__c76a6dea .base_1g9g70c_notificationWrapper__c76a6dea.base_1g9g70c_notificationLayoutHorizontal__c76a6dea{padding:var(--plasma-notification-horizontal-layout-padding);}.base_1g9g70c_bg3tssa__c76a6dea .base_1g9g70c_notificationWrapper__c76a6dea.base_1g9g70c_notificationLayoutHorizontal__c76a6dea.base_1g9g70c_notificationWithoutCloseIcon__c76a6dea{padding-right:var(--plasma-notification-horizontal-layout-right-padding-without-close-icon);}.base_1g9g70c_bg3tssa__c76a6dea .base_1g9g70c_notificationWrapper__c76a6dea.base_1g9g70c_notificationLayoutHorizontal__c76a6dea.base_1g9g70c_notificationOneLineTextbox__c76a6dea{padding:var(--plasma-notification-padding-one-line-textbox);}
|
|
358
358
|
|
|
359
359
|
.base_1insfd_bmb6i7f__cb9a5237 .base_1insfd_notificationContentBox__cb9a5237.base_1insfd_notificationLayoutVertical__cb9a5237{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_1insfd_bmb6i7f__cb9a5237 .base_1insfd_notificationContentBox__cb9a5237.base_1insfd_notificationLayoutVertical__cb9a5237.base_1insfd_notificationWithoutIcon__cb9a5237{padding-top:var(--plasma-notification-content-padding-top-without-icon);}.base_1insfd_bmb6i7f__cb9a5237 .base_1insfd_notificationCloseIcon__cb9a5237.base_1insfd_notificationLayoutVertical__cb9a5237{top:var(--plasma-notification-close-icon-top);right:var(--plasma-notification-close-icon-right);}
|
|
360
360
|
|
|
361
|
-
.
|
|
362
|
-
.
|
|
363
|
-
.
|
|
364
|
-
.
|
|
365
|
-
.
|
|
366
|
-
.
|
|
367
|
-
.
|
|
368
|
-
.
|
|
369
|
-
.
|
|
370
|
-
.
|
|
371
|
-
.
|
|
361
|
+
.Notification_styles_1uyb7ob_sb12p__65d2ebe5{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}
|
|
362
|
+
.Notification_styles_1uyb7ob_crvd7hm__65d2ebe5{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_1uyb7ob_crvd7hm__65d2ebe5:hover{color:var(--plasma-notification-close-icon-color-on-hover);}.Notification_styles_1uyb7ob_crvd7hm__65d2ebe5.Notification_styles_1uyb7ob_notificationLayoutHorizontal__65d2ebe5{position:relative;}
|
|
363
|
+
.Notification_styles_1uyb7ob_wg1ga5v__65d2ebe5{position:relative;width:var(--wg1ga5v-0);max-width:var(--wg1ga5v-1);border-radius:var(--plasma-notification-border-radius);border:var(--plasma-notification-border-width) solid var(--plasma-notification-border-color);background:var(--wg1ga5v-2);box-sizing:border-box;}.Notification_styles_1uyb7ob_wg1ga5v__65d2ebe5.Notification_styles_1uyb7ob_notificationLayoutHorizontal__65d2ebe5{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);}
|
|
364
|
+
.Notification_styles_1uyb7ob_b1amsn8a__65d2ebe5{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_1uyb7ob_b1amsn8a__65d2ebe5.Notification_styles_1uyb7ob_notificationLayoutHorizontal__65d2ebe5{margin-top:unset;margin-left:unset;}
|
|
365
|
+
.Notification_styles_1uyb7ob_i14raqr9__65d2ebe5{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);color:var(--i14raqr9-0);margin-right:var(--i14raqr9-1);margin-bottom:var(--i14raqr9-2);}.Notification_styles_1uyb7ob_i14raqr9__65d2ebe5.Notification_styles_1uyb7ob_notificationLayoutHorizontal__65d2ebe5{margin-right:var(--plasma-notification-horizontal-layout-left-icon-margin);margin-bottom:unset;}
|
|
366
|
+
.Notification_styles_1uyb7ob_c157peez__65d2ebe5{display:var(--c157peez-0);padding-top:var(--c157peez-1);}.Notification_styles_1uyb7ob_c157peez__65d2ebe5.Notification_styles_1uyb7ob_notificationLayoutHorizontal__65d2ebe5{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;}
|
|
367
|
+
.Notification_styles_1uyb7ob_t1vmb0f2__65d2ebe5{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_1uyb7ob_t1vmb0f2__65d2ebe5.Notification_styles_1uyb7ob_notificationLayoutHorizontal__65d2ebe5{padding:unset;}
|
|
368
|
+
.Notification_styles_1uyb7ob_s1k4e58v__65d2ebe5{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;color:var(--s1k4e58v-0);}
|
|
369
|
+
.Notification_styles_1uyb7ob_s92kmpm__65d2ebe5{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(--s92kmpm-0);}
|
|
370
|
+
.Notification_styles_1uyb7ob_s18m0x6v__65d2ebe5{margin-top:1rem;opacity:1;}.Notification_styles_1uyb7ob_s18m0x6v__65d2ebe5.Notification_styles_1uyb7ob_s18m0x6v__65d2ebe5.Notification_styles_1uyb7ob_notificationItemOpened__65d2ebe5{-webkit-animation:0.4s Notification_styles_1uyb7ob_showAnimationS18m0x6v__65d2ebe5 ease-out;animation:0.4s Notification_styles_1uyb7ob_showAnimationS18m0x6v__65d2ebe5 ease-out;}.Notification_styles_1uyb7ob_s18m0x6v__65d2ebe5.Notification_styles_1uyb7ob_s18m0x6v__65d2ebe5.Notification_styles_1uyb7ob_notificationItemOpened__65d2ebe5.Notification_styles_1uyb7ob_notificationLeftToRightAnimation__65d2ebe5{-webkit-animation:0.4s Notification_styles_1uyb7ob_showLeftToRightAnimationS18m0x6v__65d2ebe5 ease-out;animation:0.4s Notification_styles_1uyb7ob_showLeftToRightAnimationS18m0x6v__65d2ebe5 ease-out;}.Notification_styles_1uyb7ob_s18m0x6v__65d2ebe5.Notification_styles_1uyb7ob_s18m0x6v__65d2ebe5.Notification_styles_1uyb7ob_notificationItemOpened__65d2ebe5.Notification_styles_1uyb7ob_notificationTopToCenterAnimation__65d2ebe5{-webkit-animation:0.4s Notification_styles_1uyb7ob_showTopToCenterAnimationS18m0x6v__65d2ebe5 ease-out;animation:0.4s Notification_styles_1uyb7ob_showTopToCenterAnimationS18m0x6v__65d2ebe5 ease-out;}.Notification_styles_1uyb7ob_s18m0x6v__65d2ebe5.Notification_styles_1uyb7ob_s18m0x6v__65d2ebe5.Notification_styles_1uyb7ob_notificationItemOpened__65d2ebe5.Notification_styles_1uyb7ob_notificationBottomToCenterAnimation__65d2ebe5{-webkit-animation:0.4s Notification_styles_1uyb7ob_showBottomToCenterAnimationS18m0x6v__65d2ebe5 ease-out;animation:0.4s Notification_styles_1uyb7ob_showBottomToCenterAnimationS18m0x6v__65d2ebe5 ease-out;}.Notification_styles_1uyb7ob_s18m0x6v__65d2ebe5.Notification_styles_1uyb7ob_s18m0x6v__65d2ebe5.Notification_styles_1uyb7ob_notificationItemHidden__65d2ebe5{-webkit-animation:0.4s Notification_styles_1uyb7ob_hideAnimationS18m0x6v__65d2ebe5 ease-out;animation:0.4s Notification_styles_1uyb7ob_hideAnimationS18m0x6v__65d2ebe5 ease-out;}.Notification_styles_1uyb7ob_s18m0x6v__65d2ebe5.Notification_styles_1uyb7ob_s18m0x6v__65d2ebe5.Notification_styles_1uyb7ob_notificationItemHidden__65d2ebe5.Notification_styles_1uyb7ob_notificationLeftToRightAnimation__65d2ebe5{-webkit-animation:0.4s Notification_styles_1uyb7ob_hideLeftToRightAnimationS18m0x6v__65d2ebe5 ease-out;animation:0.4s Notification_styles_1uyb7ob_hideLeftToRightAnimationS18m0x6v__65d2ebe5 ease-out;}@-webkit-keyframes Notification_styles_1uyb7ob_showTopToCenterAnimationS18m0x6v__65d2ebe5{0%{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);opacity:0;}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;}}@keyframes Notification_styles_1uyb7ob_showTopToCenterAnimationS18m0x6v__65d2ebe5{0%{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);opacity:0;}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;}}@-webkit-keyframes Notification_styles_1uyb7ob_showBottomToCenterAnimationS18m0x6v__65d2ebe5{0%{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);opacity:0;}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;}}@keyframes Notification_styles_1uyb7ob_showBottomToCenterAnimationS18m0x6v__65d2ebe5{0%{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);opacity:0;}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;}}@-webkit-keyframes Notification_styles_1uyb7ob_showLeftToRightAnimationS18m0x6v__65d2ebe5{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_1uyb7ob_showLeftToRightAnimationS18m0x6v__65d2ebe5{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_1uyb7ob_hideLeftToRightAnimationS18m0x6v__65d2ebe5{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_1uyb7ob_hideLeftToRightAnimationS18m0x6v__65d2ebe5{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_1uyb7ob_showAnimationS18m0x6v__65d2ebe5{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_1uyb7ob_showAnimationS18m0x6v__65d2ebe5{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_1uyb7ob_hideAnimationS18m0x6v__65d2ebe5{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_1uyb7ob_hideAnimationS18m0x6v__65d2ebe5{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;}}
|
|
371
|
+
.Notification_styles_1uyb7ob_sfe5ql2__65d2ebe5{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);}
|
|
372
372
|
|
|
373
373
|
.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);}
|
|
374
374
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salutejs/plasma-new-hope",
|
|
3
|
-
"version": "0.324.1-canary.
|
|
3
|
+
"version": "0.324.1-canary.1998.15294767801.0",
|
|
4
4
|
"description": "Salute Design System blueprint",
|
|
5
5
|
"main": "cjs/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
"@rollup/plugin-babel": "^6.0.4",
|
|
80
80
|
"@rollup/plugin-commonjs": "^25.0.4",
|
|
81
81
|
"@rollup/plugin-node-resolve": "^15.1.0",
|
|
82
|
-
"@salutejs/plasma-sb-utils": "0.198.
|
|
82
|
+
"@salutejs/plasma-sb-utils": "0.198.0-dev.0",
|
|
83
83
|
"@salutejs/plasma-themes": "0.33.0",
|
|
84
84
|
"@storybook/addon-docs": "8.6.12",
|
|
85
85
|
"@storybook/addon-essentials": "8.6.12",
|
|
@@ -117,7 +117,7 @@
|
|
|
117
117
|
"@linaria/react": "5.0.3",
|
|
118
118
|
"@popperjs/core": "2.11.8",
|
|
119
119
|
"@salutejs/input-core": "2.1.2",
|
|
120
|
-
"@salutejs/plasma-core": "1.197.
|
|
120
|
+
"@salutejs/plasma-core": "1.197.0-dev.0",
|
|
121
121
|
"@salutejs/react-maskinput": "3.2.6",
|
|
122
122
|
"@tanstack/react-table": "8.21.2",
|
|
123
123
|
"@tanstack/react-virtual": "3.13.2",
|
|
@@ -137,5 +137,5 @@
|
|
|
137
137
|
"sideEffects": [
|
|
138
138
|
"*.css"
|
|
139
139
|
],
|
|
140
|
-
"gitHead": "
|
|
140
|
+
"gitHead": "465db0d21596422dffad484d807b0c0565f4d377"
|
|
141
141
|
}
|
|
@@ -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", "textColor", "titleColor", "backgroundColor", "onCloseButtonClick"];
|
|
20
|
+
var _excluded = ["role", "title", "children", "actions", "view", "size", "iconPlacement", "showCloseIcon", "layout", "icon", "closeIconType", "textColor", "titleColor", "backgroundColor", "width", "maxWidth", "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() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
@@ -45,6 +45,8 @@ var notificationRoot = exports.notificationRoot = function notificationRoot(Root
|
|
|
45
45
|
textColor = props.textColor,
|
|
46
46
|
titleColor = props.titleColor,
|
|
47
47
|
backgroundColor = props.backgroundColor,
|
|
48
|
+
width = props.width,
|
|
49
|
+
maxWidth = props.maxWidth,
|
|
48
50
|
onCloseButtonClick = props.onCloseButtonClick,
|
|
49
51
|
rest = _objectWithoutProperties(props, _excluded);
|
|
50
52
|
var ariaLive = 'polite';
|
|
@@ -72,6 +74,8 @@ var notificationRoot = exports.notificationRoot = function notificationRoot(Root
|
|
|
72
74
|
"aria-atomic": ariaAtomic
|
|
73
75
|
}, rest), /*#__PURE__*/_react["default"].createElement(_Notification3.Wrapper, {
|
|
74
76
|
backgroundColor: backgroundColor,
|
|
77
|
+
width: width,
|
|
78
|
+
maxWidth: maxWidth,
|
|
75
79
|
className: (0, _utils.cx)(_Notification.classes.wrapper, (0, _utils2.getLayoutClass)(layout), oneLineClass, withoutCloseIconClass)
|
|
76
80
|
}, /*#__PURE__*/_react["default"].createElement(_Notification3.ContentBox, {
|
|
77
81
|
iconPlacement: IconPlacementInternal,
|
|
@@ -23,57 +23,64 @@ var CloseIconWrapper = exports.CloseIconWrapper = /*#__PURE__*/(0, _styledCompon
|
|
|
23
23
|
})(["position:absolute;width:var(", ");height:var(", ");align-self:var(", ");color:var(", ");:hover{color:var(", ");}&.", "{position:relative;}"], _Notification.tokens.closeIconButtonSize, _Notification.tokens.closeIconButtonSize, _Notification.tokens.horisontalIconCloseAlignSelf, _Notification.tokens.closeIconColor, _Notification.tokens.closeIconColorOnHover, _Notification.classes.horizontal);
|
|
24
24
|
var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
25
25
|
componentId: "plasma-new-hope__sc-1iufy9r-1"
|
|
26
|
-
})(["position:relative;
|
|
27
|
-
var
|
|
26
|
+
})(["position:relative;width:", ";max-width:", ";border-radius:var(", ");border:var(", ") solid var(", ");background:", ";box-sizing:border-box;&.", "{display:flex;align-items:center;gap:var(", ");}"], function (_ref) {
|
|
27
|
+
var _ref$width = _ref.width,
|
|
28
|
+
width = _ref$width === void 0 ? "var(".concat(_Notification.tokens.width, ")") : _ref$width;
|
|
29
|
+
return width;
|
|
30
|
+
}, function (_ref2) {
|
|
31
|
+
var maxWidth = _ref2.maxWidth;
|
|
32
|
+
return maxWidth || 'unset';
|
|
33
|
+
}, _Notification.tokens.borderRadius, _Notification.tokens.borderWidth, _Notification.tokens.borderColor, function (_ref3) {
|
|
34
|
+
var backgroundColor = _ref3.backgroundColor;
|
|
28
35
|
return backgroundColor || "var(".concat(_Notification.tokens.background, ")");
|
|
29
|
-
}, _Notification.
|
|
36
|
+
}, _Notification.classes.horizontal, _Notification.tokens.horizontalLayoutGap);
|
|
30
37
|
var ButtonsWrapper = exports.ButtonsWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
31
38
|
componentId: "plasma-new-hope__sc-1iufy9r-2"
|
|
32
|
-
})(["margin-top:var(", ");margin-left:", ";align-self:var(", ");&.", "{margin-top:unset;margin-left:unset;}"], _Notification.tokens.buttonsMarginTop, function (
|
|
33
|
-
var iconPlacement =
|
|
39
|
+
})(["margin-top:var(", ");margin-left:", ";align-self:var(", ");&.", "{margin-top:unset;margin-left:unset;}"], _Notification.tokens.buttonsMarginTop, function (_ref4) {
|
|
40
|
+
var iconPlacement = _ref4.iconPlacement;
|
|
34
41
|
return iconPlacement === _Notification2.placements.left ? "var(".concat(_Notification.tokens.buttonsMarginLeft, ")") : 'unset';
|
|
35
42
|
}, _Notification.tokens.horisontalActionsAlignSelf, _Notification.classes.horizontal);
|
|
36
43
|
var IconWrapper = exports.IconWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
37
44
|
componentId: "plasma-new-hope__sc-1iufy9r-3"
|
|
38
|
-
})(["width:var(", ");height:var(", ");align-self:var(", ");color:", ";margin-right:", ";margin-bottom:", ";&.", "{margin-right:var(", ");margin-bottom:unset;}"], _Notification.tokens.contentLeftIconSize, _Notification.tokens.contentLeftIconSize, _Notification.tokens.horisontalIconLeftAlignSelf, function (
|
|
39
|
-
var iconColor =
|
|
45
|
+
})(["width:var(", ");height:var(", ");align-self:var(", ");color:", ";margin-right:", ";margin-bottom:", ";&.", "{margin-right:var(", ");margin-bottom:unset;}"], _Notification.tokens.contentLeftIconSize, _Notification.tokens.contentLeftIconSize, _Notification.tokens.horisontalIconLeftAlignSelf, function (_ref5) {
|
|
46
|
+
var iconColor = _ref5.iconColor;
|
|
40
47
|
return iconColor || "var(".concat(_Notification.tokens.contentLeftIconColor, ")");
|
|
41
|
-
}, function (
|
|
42
|
-
var iconPlacement =
|
|
48
|
+
}, function (_ref6) {
|
|
49
|
+
var iconPlacement = _ref6.iconPlacement;
|
|
43
50
|
return iconPlacement === _Notification2.placements.left ? "var(".concat(_Notification.tokens.contentLeftIconMargin, ")") : 'unset';
|
|
44
|
-
}, function (
|
|
45
|
-
var iconPlacement =
|
|
51
|
+
}, function (_ref7) {
|
|
52
|
+
var iconPlacement = _ref7.iconPlacement;
|
|
46
53
|
return iconPlacement === _Notification2.placements.top ? "var(".concat(_Notification.tokens.contentTopIconMargin, ")") : 'unset';
|
|
47
54
|
}, _Notification.classes.horizontal, _Notification.tokens.horizontalLayoutLeftIconMargin);
|
|
48
55
|
var ContentBox = exports.ContentBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
49
56
|
componentId: "plasma-new-hope__sc-1iufy9r-4"
|
|
50
|
-
})(["display:", ";padding-top:", ";&.", "{padding:unset;display:flex;align-items:center;flex-grow:1;}"], function (
|
|
51
|
-
var iconPlacement =
|
|
57
|
+
})(["display:", ";padding-top:", ";&.", "{padding:unset;display:flex;align-items:center;flex-grow:1;}"], function (_ref8) {
|
|
58
|
+
var iconPlacement = _ref8.iconPlacement;
|
|
52
59
|
return iconPlacement === _Notification2.placements.left ? 'flex' : 'block';
|
|
53
|
-
}, function (
|
|
54
|
-
var iconPlacement =
|
|
60
|
+
}, function (_ref9) {
|
|
61
|
+
var iconPlacement = _ref9.iconPlacement;
|
|
55
62
|
return iconPlacement ? "var(".concat(_Notification.tokens.contentPaddingTop, ")") : "var(".concat(_Notification.tokens.contentPaddingTopWithoutIcon, ")");
|
|
56
63
|
}, _Notification.classes.horizontal);
|
|
57
64
|
var TextBox = exports.TextBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
58
65
|
componentId: "plasma-new-hope__sc-1iufy9r-5"
|
|
59
|
-
})(["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 (
|
|
60
|
-
var iconPlacement =
|
|
66
|
+
})(["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 (_ref10) {
|
|
67
|
+
var iconPlacement = _ref10.iconPlacement;
|
|
61
68
|
return !iconPlacement || iconPlacement === _Notification2.placements.top ? "var(".concat(_Notification.tokens.textboxPaddingTopWithTopIcon, ")") : "var(".concat(_Notification.tokens.textboxPaddingTop, ")");
|
|
62
|
-
}, function (
|
|
63
|
-
var showCloseIcon =
|
|
64
|
-
iconPlacement =
|
|
69
|
+
}, function (_ref11) {
|
|
70
|
+
var showCloseIcon = _ref11.showCloseIcon,
|
|
71
|
+
iconPlacement = _ref11.iconPlacement;
|
|
65
72
|
return showCloseIcon && iconPlacement !== _Notification2.placements.top ? "var(".concat(_Notification.tokens.textboxPaddingRightWithCloseIcon, ")") : "var(".concat(_Notification.tokens.textboxPaddingRight, ")");
|
|
66
73
|
}, _Notification.tokens.textboxGap, _Notification.classes.horizontal);
|
|
67
74
|
var StyledTitle = exports.StyledTitle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
68
75
|
componentId: "plasma-new-hope__sc-1iufy9r-6"
|
|
69
|
-
})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", ";color:", ";"], _Notification.tokens.titleFontFamily, _Notification.tokens.titleFontSize, _Notification.tokens.titleFontStyle, _Notification.tokens.titleFontWeight, _Notification.tokens.titleFontLetterSpacing, _Notification.tokens.titleFontLineHeight, /*#__PURE__*/String(_mixins.applyHyphens), function (
|
|
70
|
-
var textColor =
|
|
76
|
+
})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", ";color:", ";"], _Notification.tokens.titleFontFamily, _Notification.tokens.titleFontSize, _Notification.tokens.titleFontStyle, _Notification.tokens.titleFontWeight, _Notification.tokens.titleFontLetterSpacing, _Notification.tokens.titleFontLineHeight, /*#__PURE__*/String(_mixins.applyHyphens), function (_ref12) {
|
|
77
|
+
var textColor = _ref12.textColor;
|
|
71
78
|
return textColor || "var(".concat(_Notification.tokens.titleColor, ")");
|
|
72
79
|
});
|
|
73
80
|
var StyledContent = exports.StyledContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
74
81
|
componentId: "plasma-new-hope__sc-1iufy9r-7"
|
|
75
|
-
})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", ";color:", ";"], _Notification.tokens.contentFontFamily, _Notification.tokens.contentFontSize, _Notification.tokens.contentFontStyle, _Notification.tokens.contentFontWeight, _Notification.tokens.contentFontLetterSpacing, _Notification.tokens.contentFontLineHeight, /*#__PURE__*/String(_mixins.applyHyphens), function (
|
|
76
|
-
var textColor =
|
|
82
|
+
})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", ";color:", ";"], _Notification.tokens.contentFontFamily, _Notification.tokens.contentFontSize, _Notification.tokens.contentFontStyle, _Notification.tokens.contentFontWeight, _Notification.tokens.contentFontLetterSpacing, _Notification.tokens.contentFontLineHeight, /*#__PURE__*/String(_mixins.applyHyphens), function (_ref13) {
|
|
83
|
+
var textColor = _ref13.textColor;
|
|
77
84
|
return textColor || "var(".concat(_Notification.tokens.contentColor, ")");
|
|
78
85
|
});
|
|
79
86
|
var StyledItemWrapper = exports.StyledItemWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
@@ -81,7 +88,7 @@ var StyledItemWrapper = exports.StyledItemWrapper = /*#__PURE__*/_styledComponen
|
|
|
81
88
|
})(["margin-top:1rem;opacity:1;&&.", "{animation:0.4s showAnimation ease-out;&.", "{animation:0.4s showLeftToRightAnimation ease-out;}&.", "{animation:0.4s showTopToCenterAnimation ease-out;}&.", "{animation:0.4s showBottomToCenterAnimation ease-out;}}&&.", "{animation:0.4s hideAnimation ease-out;&.", "{animation:0.4s hideLeftToRightAnimation ease-out;}}@keyframes showTopToCenterAnimation{0%{transform:translateY(-100%);opacity:0;}100%{transform:translateY(0);opacity:1;}}@keyframes showBottomToCenterAnimation{0%{transform:translateY(100%);opacity:0;}100%{transform:translateY(0);opacity:1;}}@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.notificationTopToCenterAnimation, _Notification.classes.notificationBottomToCenterAnimation, _Notification.classes.notificationItemHidden, _Notification.classes.notificationLeftToRightAnimation);
|
|
82
89
|
var StyledRoot = exports.StyledRoot = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
83
90
|
componentId: "plasma-new-hope__sc-1iufy9r-9"
|
|
84
|
-
})(["display:flex;flex-direction:column-reverse;box-sizing:border-box;padding:0 1.5rem 1.5rem;max-height:100%;align-items:", ";"], function (
|
|
85
|
-
var placement =
|
|
91
|
+
})(["display:flex;flex-direction:column-reverse;box-sizing:border-box;padding:0 1.5rem 1.5rem;max-height:100%;align-items:", ";"], function (_ref14) {
|
|
92
|
+
var placement = _ref14.placement;
|
|
86
93
|
return placement === 'bottom-left' ? 'flex-start' : 'flex-end';
|
|
87
94
|
});
|
|
@@ -133,3 +133,47 @@ export function App() {
|
|
|
133
133
|
);
|
|
134
134
|
}
|
|
135
135
|
```
|
|
136
|
+
|
|
137
|
+
## Управление шириной уведомления
|
|
138
|
+
|
|
139
|
+
Для управления шириной компонента доступны следующие свойства:
|
|
140
|
+
|
|
141
|
+
- `width` — устанавливает ширину компонента.
|
|
142
|
+
- `maxWidth` — устанавливает максимальную ширину компонента.
|
|
143
|
+
|
|
144
|
+
Оба свойства принимает любые действительные CSS значения для [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width#syntax) и [maxWidth](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#syntax)
|
|
145
|
+
|
|
146
|
+
```jsx live
|
|
147
|
+
import React, { useCallback } from 'react';
|
|
148
|
+
import { IconBell } from '@salutejs/plasma-icons';
|
|
149
|
+
import { Button, ButtonGroup, addNotification, closeNotification, NotificationsProvider } from '@salutejs/{{ package }}';
|
|
150
|
+
|
|
151
|
+
export function App() {
|
|
152
|
+
const handleShow = useCallback(() => {
|
|
153
|
+
addNotification({
|
|
154
|
+
id: 'incoming-call',
|
|
155
|
+
title: 'Входящий вызов',
|
|
156
|
+
icon: <IconBell color="inherit" size="xs" />,
|
|
157
|
+
children: 'Задача организации, в особенности же сплочённость команды профессионалов требует определения и уточнения глубокомысленных рассуждений.',
|
|
158
|
+
view: 'positive',
|
|
159
|
+
textColor: 'black',
|
|
160
|
+
titleColor: 'blue',
|
|
161
|
+
width: 'fit-content',
|
|
162
|
+
maxWidth: '30rem'
|
|
163
|
+
}, 3000);
|
|
164
|
+
}, []);
|
|
165
|
+
|
|
166
|
+
const handleHide = useCallback(() => {
|
|
167
|
+
closeNotification('incoming-call');
|
|
168
|
+
}, []);
|
|
169
|
+
|
|
170
|
+
return (
|
|
171
|
+
<NotificationsProvider>
|
|
172
|
+
<ButtonGroup>
|
|
173
|
+
<Button text="Показать оповещение" onClick={handleShow} />
|
|
174
|
+
<Button text="Скрыть оповещение" onClick={handleHide} />
|
|
175
|
+
</ButtonGroup>
|
|
176
|
+
</NotificationsProvider>
|
|
177
|
+
);
|
|
178
|
+
}
|
|
179
|
+
```
|
|
@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.base = void 0;
|
|
7
7
|
var _styledComponents = /*#__PURE__*/require("styled-components");
|
|
8
8
|
var _Notification = /*#__PURE__*/require("../../Notification.tokens");
|
|
9
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([".", "{
|
|
9
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([".", "{padding:var(", ");}.", ".", "{padding:var(", ");&.", "{padding-right:var(", ");}}.", ".", ".", "{padding:var(", ");}"], _Notification.classes.wrapper, _Notification.tokens.padding, _Notification.classes.wrapper, _Notification.classes.horizontal, _Notification.tokens.horizontalLayoutPadding, _Notification.classes.withoutCloseIcon, _Notification.tokens.horizontalLayoutRightPaddingWithoutCloseIcon, _Notification.classes.wrapper, _Notification.classes.horizontal, _Notification.classes.oneLine, _Notification.tokens.paddingOneLineTextbox);
|
|
@@ -29,18 +29,13 @@ var composeNumberFormat = exports.composeNumberFormat = function composeNumberFo
|
|
|
29
29
|
onChange(changeEvent, values);
|
|
30
30
|
}
|
|
31
31
|
};
|
|
32
|
-
var InputComponentWithoutEllipsis = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
33
|
-
return /*#__PURE__*/_react["default"].createElement(InputComponent, _extends({
|
|
34
|
-
ref: ref,
|
|
35
|
-
_textEllipsisDisable: true
|
|
36
|
-
}, props));
|
|
37
|
-
});
|
|
38
32
|
return /*#__PURE__*/_react["default"].createElement(_reactNumberFormat.NumericFormat, _extends({
|
|
39
33
|
thousandSeparator: thousandSeparator,
|
|
40
34
|
decimalScale: decimalScale,
|
|
41
35
|
decimalSeparator: decimalSeparator,
|
|
42
|
-
customInput:
|
|
36
|
+
customInput: InputComponent,
|
|
43
37
|
getInputRef: outerRef,
|
|
38
|
+
_textEllipsisDisable: true,
|
|
44
39
|
onValueChange: handleChangeValue
|
|
45
40
|
}, rest));
|
|
46
41
|
});
|
|
@@ -37,7 +37,7 @@ export function App() {
|
|
|
37
37
|
```
|
|
38
38
|
|
|
39
39
|
### Размер поля
|
|
40
|
-
Размер поля задаётся с помощью свойства `size
|
|
40
|
+
Размер поля задаётся с помощью свойства `size`:
|
|
41
41
|
|
|
42
42
|
```tsx live
|
|
43
43
|
import React from 'react';
|
|
@@ -46,6 +46,11 @@ import { TextField } from '@salutejs/{{ package }}';
|
|
|
46
46
|
export function App() {
|
|
47
47
|
return (
|
|
48
48
|
<div>
|
|
49
|
+
<TextField
|
|
50
|
+
placeholder="Размер"
|
|
51
|
+
size="xl"
|
|
52
|
+
defaultValue="XL64"
|
|
53
|
+
/>
|
|
49
54
|
<TextField
|
|
50
55
|
placeholder="Размер"
|
|
51
56
|
size="l"
|
|
@@ -56,6 +61,16 @@ export function App() {
|
|
|
56
61
|
size="s"
|
|
57
62
|
defaultValue="S40"
|
|
58
63
|
/>
|
|
64
|
+
<TextField
|
|
65
|
+
placeholder="Размер"
|
|
66
|
+
size="s"
|
|
67
|
+
defaultValue="S32"
|
|
68
|
+
/>
|
|
69
|
+
<TextField
|
|
70
|
+
placeholder="Размер"
|
|
71
|
+
size="xs"
|
|
72
|
+
defaultValue="XS24"
|
|
73
|
+
/>
|
|
59
74
|
</div>
|
|
60
75
|
);
|
|
61
76
|
}
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.titles = exports.texts = exports.size = exports.notificationsPlacements = exports.longText = exports.iconPlacement = exports.IconPlacements = void 0;
|
|
7
7
|
var titles = exports.titles = ['Выполнено', 'Внимание', 'Ошибка'];
|
|
8
|
-
var texts = exports.texts = ['
|
|
8
|
+
var texts = exports.texts = ['Задача организации, в особенности же сплочённость команды профессионалов требует определения и уточнения глубокомысленных рассуждений.', 'Задача организации, в особенности же сплочённость команды профессионалов требует определения и уточнения глубокомысленных рассуждений.', 'Задача организации, в особенности же сплочённость команды профессионалов требует определения и уточнения глубокомысленных рассуждений.'];
|
|
9
9
|
var size = exports.size = ['xs', 'xxs'];
|
|
10
10
|
var iconPlacement = exports.iconPlacement = ['top', 'left'];
|
|
11
11
|
var notificationsPlacements = exports.notificationsPlacements = ['center', 'top', 'bottom', 'right', 'left', 'top-right', 'top-left', 'bottom-right', 'bottom-left'];
|
package/styled-components/cjs/examples/plasma_b2c/components/Notification/Notification.stories.tsx
CHANGED
|
@@ -167,12 +167,14 @@ type StoryLiveDemoProps = ComponentProps<typeof Notification> & {
|
|
|
167
167
|
placement?: NotificationPlacement;
|
|
168
168
|
};
|
|
169
169
|
|
|
170
|
-
const StoryLiveDemo = ({ timeout, placement, ...rest }: StoryLiveDemoProps) => {
|
|
170
|
+
const StoryLiveDemo = ({ timeout, placement, width, maxWidth, ...rest }: StoryLiveDemoProps) => {
|
|
171
171
|
const count = useRef(0);
|
|
172
172
|
const handleClick = useCallback(() => {
|
|
173
173
|
addNotification(
|
|
174
174
|
{
|
|
175
175
|
icon: <IconDisclosureRight color="inherit" />,
|
|
176
|
+
width,
|
|
177
|
+
maxWidth,
|
|
176
178
|
...rest,
|
|
177
179
|
...getNotificationProps(count.current),
|
|
178
180
|
},
|
|
@@ -210,6 +212,8 @@ export const LiveDemo: StoryObj<StoryLiveDemoProps> = {
|
|
|
210
212
|
role: 'alert',
|
|
211
213
|
layout: 'vertical',
|
|
212
214
|
placement: 'bottom-right',
|
|
215
|
+
width: '',
|
|
216
|
+
maxWidth: '',
|
|
213
217
|
},
|
|
214
218
|
render: (args) => <StoryLiveDemo {...args} />,
|
|
215
219
|
};
|