pds-dev-kit-web 1.8.8 → 1.8.9

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.
Files changed (30) hide show
  1. package/dist/src/desktop/components/ChatBubbleListItem/ChatBubble.d.ts +1 -1
  2. package/dist/src/desktop/components/ChatBubbleListItem/ChatBubble.js +5 -4
  3. package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +4 -3
  4. package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.js +88 -57
  5. package/dist/src/desktop/components/TextLabel/TextLabel.d.ts +2 -2
  6. package/dist/src/desktop/components/TextLabel/TextLabel.js +26 -21
  7. package/dist/src/mobile/components/ChatBubbleListItem/ChatBubble.d.ts +1 -1
  8. package/dist/src/mobile/components/ChatBubbleListItem/ChatBubble.js +5 -4
  9. package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +4 -3
  10. package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.js +88 -57
  11. package/dist/src/mobile/components/TextLabel/TextLabel.d.ts +2 -2
  12. package/dist/src/mobile/components/TextLabel/TextLabel.js +21 -16
  13. package/dist/storybook-static/{0.a1562720.iframe.bundle.d.ts → 0.73af3e66.iframe.bundle.d.ts} +0 -0
  14. package/dist/storybook-static/{0.a1562720.iframe.bundle.js → 0.73af3e66.iframe.bundle.js} +4 -4
  15. package/dist/storybook-static/{4.f6aa0ddb.iframe.bundle.d.ts → 4.d7ecdbf4.iframe.bundle.d.ts} +0 -0
  16. package/dist/storybook-static/{4.f6aa0ddb.iframe.bundle.js → 4.d7ecdbf4.iframe.bundle.js} +68 -68
  17. package/dist/storybook-static/{5.45d40fc4.iframe.bundle.d.ts → 5.dc1e4c72.iframe.bundle.d.ts} +0 -0
  18. package/dist/storybook-static/{5.45d40fc4.iframe.bundle.js → 5.dc1e4c72.iframe.bundle.js} +10 -10
  19. package/dist/storybook-static/{6.c25f6d33.iframe.bundle.d.ts → 6.e668ed7b.iframe.bundle.d.ts} +0 -0
  20. package/dist/storybook-static/{6.c25f6d33.iframe.bundle.js → 6.e668ed7b.iframe.bundle.js} +5 -5
  21. package/dist/storybook-static/{7.1fe04b11.iframe.bundle.d.ts → 7.9af8f518.iframe.bundle.d.ts} +0 -0
  22. package/dist/storybook-static/{7.1fe04b11.iframe.bundle.js → 7.9af8f518.iframe.bundle.js} +1 -1
  23. package/dist/storybook-static/{main.ef70f048.iframe.bundle.d.ts → main.747cc139.iframe.bundle.d.ts} +554 -534
  24. package/dist/storybook-static/{main.ef70f048.iframe.bundle.js → main.747cc139.iframe.bundle.js} +536 -455
  25. package/dist/storybook-static/{runtime~main.549d38be.iframe.bundle.d.ts → runtime~main.1b62987c.iframe.bundle.d.ts} +0 -0
  26. package/dist/storybook-static/{runtime~main.549d38be.iframe.bundle.js → runtime~main.1b62987c.iframe.bundle.js} +1 -1
  27. package/dist/storybook-static/{vendors~main.1bc2d8cb.iframe.bundle.d.ts → vendors~main.4e754259.iframe.bundle.d.ts} +0 -0
  28. package/dist/storybook-static/{vendors~main.1bc2d8cb.iframe.bundle.js → vendors~main.4e754259.iframe.bundle.js} +18 -18
  29. package/package.json +1 -1
  30. package/release-note.md +19 -22
package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.js CHANGED
@@ -35,28 +35,25 @@ var IconButton_1 = require("../IconButton");
35
35
  var TextLabel_1 = require("../TextLabel");
36
36
  var ChatBubble_1 = __importDefault(require("./ChatBubble"));
37
37
  var Popup_1 = require("./Popup");
38
- var ChatBubbleColorTheme = {
39
- seller_tail: 'seller',
40
- seller: 'seller',
41
- subscriber_tail: 'subscriber',
42
- subscriber: 'subscriber',
43
- my_tail: 'my',
44
- my: 'my'
38
+ var chatBubbleTailType = {
39
+ other_avatar_impact: 'left_top',
40
+ other_avatar: 'left_top',
41
+ other_avatar_sub: 'none',
42
+ other: 'left_top',
43
+ other_sub: 'none',
44
+ me: 'right_top',
45
+ me_sub: 'none'
45
46
  };
46
- var ChatBubbleTailType = {
47
- seller_tail: 'left_top',
48
- seller: 'none',
49
- subscriber_tail: 'left_top',
50
- subscriber: 'none',
51
- my_tail: 'right_top',
52
- my: 'none'
47
+ var profileImageBorderColorTheme = {
48
+ grey: 'ui_avatar_border',
49
+ brand_primary: 'ui_avatar_border_brandprimary',
50
+ translucent_white: 'ui_avatar_border_translucent_white',
51
+ translucent_black: 'ui_avatar_border_translucent_black'
53
52
  };
54
53
  function ChatBubbleListItem(_a) {
55
- var titleText = _a.titleText, _b = _a.imageMode, imageMode = _b === void 0 ? 'use' : _b, imageSrc = _a.imageSrc, _c = _a.hoverMode, hoverMode = _c === void 0 ? 'use' : _c, _d = _a.styleTheme, styleTheme = _d === void 0 ? 'seller_tail' : _d, _e = _a.timeMode, timeMode = _e === void 0 ? 'use' : _e, timeText = _a.timeText, contextMenuOptionArray = _a.contextMenuOptionArray, _f = _a.contextMenuState, contextMenuState = _f === void 0 ? 'normal' : _f, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
56
- var isMy = styleTheme.includes('my');
57
- var isSeller = styleTheme.includes('seller');
58
- var isTail = styleTheme.includes('tail');
59
- var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
54
+ var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
55
+ var isMe = styleTheme.includes('me');
56
+ var _f = (0, react_1.useState)(false), isContextMenuOpen = _f[0], setIsContextMenuOpen = _f[1];
60
57
  var contextMenuRef = (0, react_1.useRef)(null);
61
58
  var chatBody = document.querySelector('#chatMessageBox');
62
59
  var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
@@ -82,24 +79,65 @@ function ChatBubbleListItem(_a) {
82
79
  }
83
80
  setIsContextMenuOpen(false);
84
81
  };
82
+ var isShowProfileImage = function () {
83
+ if (styleTheme === 'other_avatar_impact' || styleTheme === 'other_avatar') {
84
+ return true;
85
+ }
86
+ return false;
87
+ };
88
+ var isShowTitleText = function () {
89
+ if (styleTheme === 'other_avatar_impact' ||
90
+ styleTheme === 'other_avatar' ||
91
+ styleTheme === 'other') {
92
+ return true;
93
+ }
94
+ return false;
95
+ };
96
+ var checkTextColorTheme = function () {
97
+ switch (colorTheme) {
98
+ case 'grey': {
99
+ return 'sysTextPrimary';
100
+ }
101
+ case 'brand_primary': {
102
+ return 'usrTextBrandPrimary';
103
+ }
104
+ case 'translucent_white': {
105
+ return 'sysTextBlack';
106
+ }
107
+ case 'translucent_black': {
108
+ return 'sysTextWhite';
109
+ }
110
+ default: {
111
+ return 'sysTextPrimary';
112
+ }
113
+ }
114
+ };
115
+ var isLeftSpacingChecker = function () {
116
+ if (styleTheme === 'other_avatar_impact' ||
117
+ styleTheme === 'other_avatar' ||
118
+ styleTheme === 'other_avatar_sub') {
119
+ return true;
120
+ }
121
+ return false;
122
+ };
85
123
  return (react_1.default.createElement(react_1.default.Fragment, null,
86
- react_1.default.createElement(S_ChatBubbleListItem, { "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isMy: isMy, imageMode: imageMode },
87
- imageMode === 'use' && (react_1.default.createElement(react_1.default.Fragment, null, isTail && !isMy ? (react_1.default.createElement(S_ImageViewWrapper, { isSeller: isSeller },
88
- react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: isSeller ? 36 : 38 }))) : (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })))),
124
+ react_1.default.createElement(S_ChatBubbleListItem, { "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isMe: isMe },
125
+ isLeftSpacingChecker() ? (react_1.default.createElement(react_1.default.Fragment, null, isShowProfileImage() ? (react_1.default.createElement(S_ImageViewWrapper, { isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme },
126
+ react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }))) : (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })))) : (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })),
89
127
  react_1.default.createElement(S_RightBox, null,
90
- isTail && !isMy && (react_1.default.createElement(react_1.default.Fragment, null,
91
- react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: isSeller ? 'usrTextBrandPrimary' : 'sysTextPrimary' }),
128
+ isShowTitleText() && (react_1.default.createElement(react_1.default.Fragment, null,
129
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: colorTheme && checkTextColorTheme() }),
92
130
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b" }))),
93
131
  react_1.default.createElement(S_ChatBubbleBox, null,
94
- react_1.default.createElement(S_ChatBubbleWrapper, { isMy: isMy },
95
- timeMode === 'use' && timeText && isMy && (react_1.default.createElement(S_TimeWrapper, null,
132
+ react_1.default.createElement(S_ChatBubbleWrapper, { isMe: isMe },
133
+ timeMode === 'use' && timeText && isMe && (react_1.default.createElement(S_TimeWrapper, null,
96
134
  react_1.default.createElement(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }),
97
135
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }))),
98
- react_1.default.createElement(ChatBubble_1.default, { colorTheme: ChatBubbleColorTheme[styleTheme], tailType: ChatBubbleTailType[styleTheme] }, children),
99
- timeMode === 'use' && timeText && !isMy && (react_1.default.createElement(S_TimeWrapper, null,
136
+ react_1.default.createElement(ChatBubble_1.default, { colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, children),
137
+ timeMode === 'use' && timeText && !isMe && (react_1.default.createElement(S_TimeWrapper, null,
100
138
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
101
139
  react_1.default.createElement(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })))),
102
- hoverMode === 'use' && !isMy && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef },
140
+ hoverMode === 'use' && !isMe && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef },
103
141
  react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }))))),
104
142
  react_1.default.createElement(Popup_1.PopupProvider, null,
105
143
  react_1.default.createElement(Popup_1.Popup, { targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } },
@@ -109,41 +147,34 @@ var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (tem
109
147
  var theme = _a.theme;
110
148
  return theme.spacing.spacingA;
111
149
  });
112
- var NoImageChatBubbleListItem = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-left: ", ";\n"], ["\n margin-left: ", ";\n"])), function (_a) {
113
- var theme = _a.theme;
114
- return theme.spacing.spacingA;
150
+ var S_ChatBubbleListItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n height: fit-content;\n max-width: 100%;\n\n ", ";\n"], ["\n display: flex;\n height: fit-content;\n max-width: 100%;\n\n ", ";\n"])), function (_a) {
151
+ var isMe = _a.isMe;
152
+ return isMe && MyChatBubbleListItem;
115
153
  });
116
- var S_ChatBubbleListItem = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n height: fit-content;\n max-width: 100%;\n\n ", ";\n ", ";\n"], ["\n display: flex;\n height: fit-content;\n max-width: 100%;\n\n ", ";\n ", ";\n"])), function (_a) {
117
- var isMy = _a.isMy;
118
- return isMy && MyChatBubbleListItem;
119
- }, function (_a) {
120
- var imageMode = _a.imageMode;
121
- return imageMode === 'none' && NoImageChatBubbleListItem;
154
+ var ImageViewBrandPrimary = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border: 2px solid\n ", ";\n"], ["\n border: 2px solid\n ", ";\n"])), function (_a) {
155
+ var colorTheme = _a.colorTheme, theme = _a.theme;
156
+ return colorTheme && theme[profileImageBorderColorTheme[colorTheme]];
122
157
  });
123
- var ImageViewSeller = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border: 2px solid ", ";\n"], ["\n border: 2px solid ", ";\n"])), function (_a) {
124
- var theme = _a.theme;
125
- return theme.ui_profile_image_border_brandprimary;
126
- });
127
- var ImageViewDefault = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border: 1px solid ", ";\n"], ["\n border: 1px solid ", ";\n"])), function (_a) {
128
- var theme = _a.theme;
129
- return theme.ui_profile_image_border;
158
+ var ImageViewDefault = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border: 1px solid\n ", ";\n"], ["\n border: 1px solid\n ", ";\n"])), function (_a) {
159
+ var colorTheme = _a.colorTheme, theme = _a.theme;
160
+ return colorTheme && theme[profileImageBorderColorTheme[colorTheme]];
130
161
  });
131
- var S_ImageViewWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 50%;\n height: fit-content;\n min-width: fit-content;\n width: fit-content;\n margin-right: ", ";\n position: relative;\n\n ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 50%;\n height: fit-content;\n min-width: fit-content;\n width: fit-content;\n margin-right: ", ";\n position: relative;\n\n ", ";\n"])), function (_a) {
162
+ var S_ImageViewWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 50%;\n height: fit-content;\n min-width: fit-content;\n width: fit-content;\n margin-right: ", ";\n position: relative;\n\n ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 50%;\n height: fit-content;\n min-width: fit-content;\n width: fit-content;\n margin-right: ", ";\n position: relative;\n\n ", ";\n"])), function (_a) {
132
163
  var theme = _a.theme;
133
164
  return theme.spacing.spacingB;
134
165
  }, function (_a) {
135
- var isSeller = _a.isSeller;
136
- return (isSeller ? ImageViewSeller : ImageViewDefault);
166
+ var isOtherAvatarImpact = _a.isOtherAvatarImpact;
167
+ return (isOtherAvatarImpact ? ImageViewBrandPrimary : ImageViewDefault);
137
168
  });
138
- var S_RightBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
139
- var S_ChatBubbleBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
140
- var MyChatBubble = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n justify-content: flex-end;\n"], ["\n justify-content: flex-end;\n"])));
141
- var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n flex: 1;\n display: flex;\n\n ", ";\n"], ["\n flex: 1;\n display: flex;\n\n ", ";\n"])), function (_a) {
142
- var isMy = _a.isMy;
143
- return isMy && MyChatBubble;
169
+ var S_RightBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
170
+ var S_ChatBubbleBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
171
+ var MyChatBubble = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n justify-content: flex-end;\n"], ["\n justify-content: flex-end;\n"])));
172
+ var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n flex: 1;\n display: flex;\n\n ", ";\n"], ["\n flex: 1;\n display: flex;\n\n ", ";\n"])), function (_a) {
173
+ var isMe = _a.isMe;
174
+ return isMe && MyChatBubble;
144
175
  });
145
- var S_TimeWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n align-self: flex-end;\n display: flex;\n"], ["\n align-self: flex-end;\n display: flex;\n"])));
146
- var S_SeeMoreButton = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n width: 48px;\n height: 24px;\n min-width: 48px;\n padding-right: ", ";\n margin-top: ", ";\n position: relative;\n opacity: ", ";\n justify-content: right;\n\n ", ":hover & {\n opacity: ", ";\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n width: 48px;\n height: 24px;\n min-width: 48px;\n padding-right: ", ";\n margin-top: ", ";\n position: relative;\n opacity: ", ";\n justify-content: right;\n\n ", ":hover & {\n opacity: ", ";\n }\n"])), function (_a) {
176
+ var S_TimeWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n align-self: flex-end;\n display: flex;\n"], ["\n align-self: flex-end;\n display: flex;\n"])));
177
+ var S_SeeMoreButton = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n width: 48px;\n height: 24px;\n min-width: 48px;\n padding-right: ", ";\n margin-top: ", ";\n position: relative;\n opacity: ", ";\n justify-content: right;\n\n ", ":hover & {\n opacity: ", ";\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n width: 48px;\n height: 24px;\n min-width: 48px;\n padding-right: ", ";\n margin-top: ", ";\n position: relative;\n opacity: ", ";\n justify-content: right;\n\n ", ":hover & {\n opacity: ", ";\n }\n"])), function (_a) {
147
178
  var theme = _a.theme;
148
179
  return theme.spacing.spacingB;
149
180
  }, function (_a) {
@@ -157,4 +188,4 @@ var S_SeeMoreButton = styled_components_1.default.div(templateObject_12 || (temp
157
188
  return hoverMode === 'use' && '1';
158
189
  });
159
190
  exports.default = ChatBubbleListItem;
160
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
191
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
package/dist/src/mobile/components/TextLabel/TextLabel.d.ts CHANGED
@@ -5,7 +5,7 @@ export declare type TextLabelProps = {
5
5
  textAlign?: 'left' | 'center' | 'right';
6
6
  styleTheme?: 'displayBold' | 'wizardPageTitleBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
7
7
  colorOverride?: UiColors;
8
- colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
8
+ colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextBlack' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
9
9
  singleLineMode?: 'none' | 'use';
10
10
  ellipsisMode?: 'none' | 'use';
11
11
  lineLimit?: number;
@@ -21,7 +21,7 @@ export declare type TextStyleProps = {
21
21
  textAlign?: 'left' | 'center' | 'right';
22
22
  styleTheme?: 'displayBold' | 'wizardPageTitleBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
23
23
  colorOverride?: UiColors;
24
- colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
24
+ colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextBlack' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
25
25
  singleLineMode?: 'none' | 'use';
26
26
  ellipsisMode?: 'none' | 'use';
27
27
  lineLimit?: number;
package/dist/src/mobile/components/TextLabel/TextLabel.js CHANGED
@@ -233,52 +233,56 @@ var sysTextWhite = (0, styled_components_1.css)(templateObject_22 || (templateOb
233
233
  var theme = _a.theme;
234
234
  return theme.ui_cpnt_textlabel_sys_white;
235
235
  });
236
- var sysTextError = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
236
+ var sysTextBlack = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
237
+ var theme = _a.theme;
238
+ return theme.ui_cpnt_textlabel_sys_black;
239
+ });
240
+ var sysTextError = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
237
241
  var theme = _a.theme;
238
242
  return theme.ui_cpnt_textlabel_sys_error;
239
243
  });
240
- var sysTextWarning = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
244
+ var sysTextWarning = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
241
245
  var theme = _a.theme;
242
246
  return theme.ui_cpnt_textlabel_sys_warning;
243
247
  });
244
- var sysTextBrandPrimary = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
248
+ var sysTextBrandPrimary = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
245
249
  var theme = _a.theme;
246
250
  return theme.ui_cpnt_textlabel_sys_brandprimary;
247
251
  });
248
- var sysTextBrandSeconVariant = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
252
+ var sysTextBrandSeconVariant = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
249
253
  var theme = _a.theme;
250
254
  return theme.ui_cpnt_textlabel_sys_brandseconvariant;
251
255
  });
252
- var usrTextBrandPrimary = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
256
+ var usrTextBrandPrimary = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
253
257
  var theme = _a.theme;
254
258
  return theme.ui_cpnt_textlabel_usr_brandprimary;
255
259
  });
256
- var usrTextBrandSeconVariant = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
260
+ var usrTextBrandSeconVariant = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
257
261
  var theme = _a.theme;
258
262
  return theme.ui_cpnt_textlabel_usr_brandseconvariant;
259
263
  });
260
- var usrTextBrandOnPrimary = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
264
+ var usrTextBrandOnPrimary = (0, styled_components_1.css)(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
261
265
  var theme = _a.theme;
262
266
  return theme.ui_cpnt_textlabel_usr_brandonprimary;
263
267
  });
264
- var customFontStyle = (0, styled_components_1.css)(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n font-size: ", ";\n line-height: 1.5;\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: 1.5;\n font-weight: ", ";\n"])), function (_a) {
268
+ var customFontStyle = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n font-size: ", ";\n line-height: 1.5;\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: 1.5;\n font-weight: ", ";\n"])), function (_a) {
265
269
  var customFontSize = _a.customFontSize;
266
270
  return customFontSize;
267
271
  }, function (_a) {
268
272
  var theme = _a.theme, customFontWeight = _a.customFontWeight;
269
273
  return customFontWeight === 'bold' ? theme.fontWeight.bold : theme.fontWeight.normal;
270
274
  });
271
- var colorOverrideStyle = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
275
+ var colorOverrideStyle = (0, styled_components_1.css)(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
272
276
  var colorOverride = _a.colorOverride, theme = _a.theme;
273
277
  return colorOverride && theme[colorOverride];
274
278
  });
275
- var ellipsisStyle = (0, styled_components_1.css)(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"], ["\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (_a) {
279
+ var ellipsisStyle = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"], ["\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (_a) {
276
280
  var lineLimit = _a.lineLimit;
277
281
  return lineLimit;
278
282
  });
279
- var userSelectModeStyle = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n -ms-user-select: none;\n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"], ["\n -ms-user-select: none;\n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"])));
280
- var bulletPointModeStyle = (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n position: absolute;\n left: 0;\n width: 16px;\n }\n"], ["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n position: absolute;\n left: 0;\n width: 16px;\n }\n"])));
281
- var S_TextLabel = styled_components_1.default.div(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n overflow-wrap: break-word;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n overflow-wrap: break-word;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
283
+ var userSelectModeStyle = (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n -ms-user-select: none;\n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"], ["\n -ms-user-select: none;\n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"])));
284
+ var bulletPointModeStyle = (0, styled_components_1.css)(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n position: absolute;\n left: 0;\n width: 16px;\n }\n"], ["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n position: absolute;\n left: 0;\n width: 16px;\n }\n"])));
285
+ var S_TextLabel = styled_components_1.default.div(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n overflow-wrap: break-word;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n overflow-wrap: break-word;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
282
286
  var textAlign = _a.textAlign;
283
287
  return textAlign;
284
288
  }, function (_a) {
@@ -321,6 +325,7 @@ var S_TextLabel = styled_components_1.default.div(templateObject_35 || (template
321
325
  sysTextSecondary: sysTextSecondary,
322
326
  sysTextTertiary: sysTextTertiary,
323
327
  sysTextWhite: sysTextWhite,
328
+ sysTextBlack: sysTextBlack,
324
329
  sysTextError: sysTextError,
325
330
  sysTextWarning: sysTextWarning,
326
331
  sysTextBrandPrimary: sysTextBrandPrimary,
@@ -357,7 +362,7 @@ var S_TextLabel = styled_components_1.default.div(templateObject_35 || (template
357
362
  var bulletPointMode = _a.bulletPointMode;
358
363
  return bulletPointMode === 'use' && bulletPointModeStyle;
359
364
  });
360
- var S_AfterTextBox = styled_components_1.default.div(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n\n ", ";\n"], ["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n\n ", ";\n"])), function (_a) {
365
+ var S_AfterTextBox = styled_components_1.default.div(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n\n ", ";\n"], ["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n\n ", ";\n"])), function (_a) {
361
366
  var theme = _a.theme;
362
367
  return theme.spacing.spacingA;
363
368
  }, function (_a) {
@@ -373,6 +378,6 @@ var S_AfterTextBox = styled_components_1.default.div(templateObject_36 || (templ
373
378
  return 'vertical-align: middle';
374
379
  }
375
380
  });
376
- var S_IconWrapper = styled_components_1.default.div(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n width: 16px;\n height: 16px;\n"], ["\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n width: 16px;\n height: 16px;\n"])));
381
+ var S_IconWrapper = styled_components_1.default.div(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n width: 16px;\n height: 16px;\n"], ["\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n width: 16px;\n height: 16px;\n"])));
377
382
  exports.default = TextLabel;
378
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37;
383
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38;
package/dist/storybook-static/{0.a1562720.iframe.bundle.js → 0.73af3e66.iframe.bundle.js} RENAMED
@@ -1,4 +1,4 @@
1
- (window.webpackJsonp = window.webpackJsonp || []).push([[0], { 2186: function (module, exports) { var hasElementType = "undefined" != typeof Element, hasMap = "function" == typeof Map, hasSet = "function" == typeof Set, hasArrayBuffer = "function" == typeof ArrayBuffer && !!ArrayBuffer.isView; function equal(a, b) { if (a === b)
1
+ (window.webpackJsonp = window.webpackJsonp || []).push([[0], { 2192: function (module, exports) { var hasElementType = "undefined" != typeof Element, hasMap = "function" == typeof Map, hasSet = "function" == typeof Set, hasArrayBuffer = "function" == typeof ArrayBuffer && !!ArrayBuffer.isView; function equal(a, b) { if (a === b)
2
2
  return !0; if (a && b && "object" == typeof a && "object" == typeof b) {
3
3
  if (a.constructor !== b.constructor)
4
4
  return !1;
@@ -62,7 +62,7 @@
62
62
  if ((error.message || "").match(/stack|recursion/i))
63
63
  return console.warn("react-fast-compare cannot handle circular refs"), !1;
64
64
  throw error;
65
- } }; }, 2187: function (module, exports, __webpack_require__) {
65
+ } }; }, 2193: function (module, exports, __webpack_require__) {
66
66
  "use strict";
67
67
  var warning = function () { };
68
68
  module.exports = warning;
@@ -227,12 +227,12 @@
227
227
  } }, requiresIfExists: ["offset"] }, { name: "arrow", enabled: !0, phase: "main", fn: function arrow(_ref) { var _state$modifiersData$, state = _ref.state, name = _ref.name, options = _ref.options, arrowElement = state.elements.arrow, popperOffsets = state.modifiersData.popperOffsets, basePlacement = getBasePlacement(state.placement), axis = getMainAxisFromPlacement(basePlacement), len = [left, right].indexOf(basePlacement) >= 0 ? "height" : "width"; if (arrowElement && popperOffsets) {
228
228
  var paddingObject = function toPaddingObject(padding, state) { return mergePaddingObject("number" != typeof (padding = "function" == typeof padding ? padding(Object.assign({}, state.rects, { placement: state.placement })) : padding) ? padding : expandToHashMap(padding, basePlacements)); }(options.padding, state), arrowRect = getLayoutRect(arrowElement), minProp = "y" === axis ? enums_top : left, maxProp = "y" === axis ? bottom : right, endDiff = state.rects.reference[len] + state.rects.reference[axis] - popperOffsets[axis] - state.rects.popper[len], startDiff = popperOffsets[axis] - state.rects.reference[axis], arrowOffsetParent = getOffsetParent(arrowElement), clientSize = arrowOffsetParent ? "y" === axis ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0, centerToReference = endDiff / 2 - startDiff / 2, min = paddingObject[minProp], max = clientSize - arrowRect[len] - paddingObject[maxProp], center = clientSize / 2 - arrowRect[len] / 2 + centerToReference, offset = within(min, center, max), axisProp = axis;
229
229
  state.modifiersData[name] = ((_state$modifiersData$ = {})[axisProp] = offset, _state$modifiersData$.centerOffset = offset - center, _state$modifiersData$);
230
- } }, effect: function arrow_effect(_ref2) { var state = _ref2.state, _options$element = _ref2.options.element, arrowElement = void 0 === _options$element ? "[data-popper-arrow]" : _options$element; null != arrowElement && ("string" != typeof arrowElement || (arrowElement = state.elements.popper.querySelector(arrowElement))) && contains(state.elements.popper, arrowElement) && (state.elements.arrow = arrowElement); }, requires: ["popperOffsets"], requiresIfExists: ["preventOverflow"] }, { name: "hide", enabled: !0, phase: "main", requiresIfExists: ["preventOverflow"], fn: function hide(_ref) { var state = _ref.state, name = _ref.name, referenceRect = state.rects.reference, popperRect = state.rects.popper, preventedOffsets = state.modifiersData.preventOverflow, referenceOverflow = detectOverflow(state, { elementContext: "reference" }), popperAltOverflow = detectOverflow(state, { altBoundary: !0 }), referenceClippingOffsets = getSideOffsets(referenceOverflow, referenceRect), popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets), isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets), hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets); state.modifiersData[name] = { referenceClippingOffsets: referenceClippingOffsets, popperEscapeOffsets: popperEscapeOffsets, isReferenceHidden: isReferenceHidden, hasPopperEscaped: hasPopperEscaped }, state.attributes.popper = Object.assign({}, state.attributes.popper, { "data-popper-reference-hidden": isReferenceHidden, "data-popper-escaped": hasPopperEscaped }); } }] }), react_fast_compare = __webpack_require__(2186), react_fast_compare_default = __webpack_require__.n(react_fast_compare), EMPTY_MODIFIERS = [], NOOP = function NOOP() { }, NOOP_PROMISE = function NOOP_PROMISE() { return Promise.resolve(null); }, Popper_EMPTY_MODIFIERS = [];
230
+ } }, effect: function arrow_effect(_ref2) { var state = _ref2.state, _options$element = _ref2.options.element, arrowElement = void 0 === _options$element ? "[data-popper-arrow]" : _options$element; null != arrowElement && ("string" != typeof arrowElement || (arrowElement = state.elements.popper.querySelector(arrowElement))) && contains(state.elements.popper, arrowElement) && (state.elements.arrow = arrowElement); }, requires: ["popperOffsets"], requiresIfExists: ["preventOverflow"] }, { name: "hide", enabled: !0, phase: "main", requiresIfExists: ["preventOverflow"], fn: function hide(_ref) { var state = _ref.state, name = _ref.name, referenceRect = state.rects.reference, popperRect = state.rects.popper, preventedOffsets = state.modifiersData.preventOverflow, referenceOverflow = detectOverflow(state, { elementContext: "reference" }), popperAltOverflow = detectOverflow(state, { altBoundary: !0 }), referenceClippingOffsets = getSideOffsets(referenceOverflow, referenceRect), popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets), isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets), hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets); state.modifiersData[name] = { referenceClippingOffsets: referenceClippingOffsets, popperEscapeOffsets: popperEscapeOffsets, isReferenceHidden: isReferenceHidden, hasPopperEscaped: hasPopperEscaped }, state.attributes.popper = Object.assign({}, state.attributes.popper, { "data-popper-reference-hidden": isReferenceHidden, "data-popper-escaped": hasPopperEscaped }); } }] }), react_fast_compare = __webpack_require__(2192), react_fast_compare_default = __webpack_require__.n(react_fast_compare), EMPTY_MODIFIERS = [], NOOP = function NOOP() { }, NOOP_PROMISE = function NOOP_PROMISE() { return Promise.resolve(null); }, Popper_EMPTY_MODIFIERS = [];
231
231
  function Popper(_ref) { var _ref$placement = _ref.placement, placement = void 0 === _ref$placement ? "bottom" : _ref$placement, _ref$strategy = _ref.strategy, strategy = void 0 === _ref$strategy ? "absolute" : _ref$strategy, _ref$modifiers = _ref.modifiers, modifiers = void 0 === _ref$modifiers ? Popper_EMPTY_MODIFIERS : _ref$modifiers, referenceElement = _ref.referenceElement, onFirstUpdate = _ref.onFirstUpdate, innerRef = _ref.innerRef, children = _ref.children, referenceNode = react.useContext(ManagerReferenceNodeContext), _React$useState = react.useState(null), popperElement = _React$useState[0], setPopperElement = _React$useState[1], _React$useState2 = react.useState(null), arrowElement = _React$useState2[0], setArrowElement = _React$useState2[1]; react.useEffect((function () { setRef(innerRef, popperElement); }), [innerRef, popperElement]); var options = react.useMemo((function () { return { placement: placement, strategy: strategy, onFirstUpdate: onFirstUpdate, modifiers: [].concat(modifiers, [{ name: "arrow", enabled: null != arrowElement, options: { element: arrowElement } }]) }; }), [placement, strategy, onFirstUpdate, modifiers, arrowElement]), _usePopper = function usePopper(referenceElement, popperElement, options) { void 0 === options && (options = {}); var prevOptions = react.useRef(null), optionsWithDefaults = { onFirstUpdate: options.onFirstUpdate, placement: options.placement || "bottom", strategy: options.strategy || "absolute", modifiers: options.modifiers || EMPTY_MODIFIERS }, _React$useState = react.useState({ styles: { popper: { position: optionsWithDefaults.strategy, left: "0", top: "0" }, arrow: { position: "absolute" } }, attributes: {} }), state = _React$useState[0], setState = _React$useState[1], updateStateModifier = react.useMemo((function () { return { name: "updateState", enabled: !0, phase: "write", fn: function fn(_ref) { var state = _ref.state, elements = Object.keys(state.elements); setState({ styles: fromEntries(elements.map((function (element) { return [element, state.styles[element] || {}]; }))), attributes: fromEntries(elements.map((function (element) { return [element, state.attributes[element]]; }))) }); }, requires: ["computeStyles"] }; }), []), popperOptions = react.useMemo((function () { var newOptions = { onFirstUpdate: optionsWithDefaults.onFirstUpdate, placement: optionsWithDefaults.placement, strategy: optionsWithDefaults.strategy, modifiers: [].concat(optionsWithDefaults.modifiers, [updateStateModifier, { name: "applyStyles", enabled: !1 }]) }; return react_fast_compare_default()(prevOptions.current, newOptions) ? prevOptions.current || newOptions : (prevOptions.current = newOptions, newOptions); }), [optionsWithDefaults.onFirstUpdate, optionsWithDefaults.placement, optionsWithDefaults.strategy, optionsWithDefaults.modifiers, updateStateModifier]), popperInstanceRef = react.useRef(); return useIsomorphicLayoutEffect((function () { popperInstanceRef.current && popperInstanceRef.current.setOptions(popperOptions); }), [popperOptions]), useIsomorphicLayoutEffect((function () { if (null != referenceElement && null != popperElement) {
232
232
  var popperInstance = (options.createPopper || popper_createPopper)(referenceElement, popperElement, popperOptions);
233
233
  return popperInstanceRef.current = popperInstance, function () { popperInstance.destroy(), popperInstanceRef.current = null; };
234
234
  } }), [referenceElement, popperElement, options.createPopper]), { state: popperInstanceRef.current ? popperInstanceRef.current.state : null, styles: state.styles, attributes: state.attributes, update: popperInstanceRef.current ? popperInstanceRef.current.update : null, forceUpdate: popperInstanceRef.current ? popperInstanceRef.current.forceUpdate : null }; }(referenceElement || referenceNode, popperElement, options), state = _usePopper.state, styles = _usePopper.styles, forceUpdate = _usePopper.forceUpdate, update = _usePopper.update, childrenProps = react.useMemo((function () { return { ref: setPopperElement, style: styles.popper, placement: state ? state.placement : placement, hasPopperEscaped: state && state.modifiersData.hide ? state.modifiersData.hide.hasPopperEscaped : null, isReferenceHidden: state && state.modifiersData.hide ? state.modifiersData.hide.isReferenceHidden : null, arrowProps: { style: styles.arrow, ref: setArrowElement }, forceUpdate: forceUpdate || NOOP, update: update || NOOP_PROMISE }; }), [setPopperElement, setArrowElement, placement, state, styles, update, forceUpdate]); return unwrapArray(children)(childrenProps); }
235
- var warning = __webpack_require__(2187), warning_default = __webpack_require__.n(warning);
235
+ var warning = __webpack_require__(2193), warning_default = __webpack_require__.n(warning);
236
236
  function Reference(_ref) { var children = _ref.children, innerRef = _ref.innerRef, setReferenceNode = react.useContext(ManagerReferenceNodeSetterContext), refHandler = react.useCallback((function (node) { setRef(innerRef, node), safeInvoke(setReferenceNode, node); }), [innerRef, setReferenceNode]); return react.useEffect((function () { return function () { return setRef(innerRef, null); }; })), react.useEffect((function () { warning_default()(Boolean(setReferenceNode), "`Reference` should not be used outside of a `Manager` component."); }), [setReferenceNode]), unwrapArray(children)({ ref: refHandler }); }
237
237
  var TooltipContext = react_default.a.createContext({}), callAll = function callAll() { for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++)
238
238
  fns[_key] = arguments[_key]; return function () { for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++)