pds-dev-kit-web 2.2.266 → 2.2.268

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 (12) hide show
  1. package/dist/src/desktop/components/PriceTextField/PriceTextField.d.ts +1 -1
  2. package/dist/src/desktop/components/PriceTextField/PriceTextField.js +7 -5
  3. package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.d.ts +1 -1
  4. package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.js +1 -0
  5. package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTU.d.ts +1 -1
  6. package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTU.js +51 -7
  7. package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.d.ts +1 -1
  8. package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.js +4 -0
  9. package/dist/src/mobile/components/PriceTextField/PriceTextField.d.ts +3 -2
  10. package/dist/src/mobile/components/PriceTextField/PriceTextField.js +11 -6
  11. package/package.json +1 -1
  12. package/release-note.md +2 -2
package/dist/src/desktop/components/PriceTextField/PriceTextField.d.ts CHANGED
@@ -11,7 +11,7 @@ type Props = {
11
11
  name: Path<IFormValues>;
12
12
  hintText?: PDSTextType;
13
13
  defaultAmount?: number;
14
- size?: 'large' | 'rlarge';
14
+ size?: 'large' | 'rlarge' | 'medium' | 'small';
15
15
  responsiveMode?: 'none' | 'use';
16
16
  state?: 'normal' | 'read_only' | 'disabled';
17
17
  dropdownState?: 'normal' | 'read_only';
package/dist/src/desktop/components/PriceTextField/PriceTextField.js CHANGED
@@ -426,8 +426,8 @@ function PriceTextField(_a) {
426
426
  policy_1.DEFAULT_CURRENCY_PRICE_POLICIES[baseCurrency].minPayment.amount,
427
427
  currency: baseCurrency
428
428
  })
429
- }), value: displayValue, textAlign: textAlign, validation: finalValidation, textLineType: "single", inputType: "text", inputMode: "decimal", preventBlankMode: "all", enterSubmitMode: "none", state: isInputReadOnly ? 'read_only' : state, colorTheme: colorTheme, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', hintTextWeight: hintTextFontWeight === 'bold' ? 'bold' : 'normal', fieldPaddingRight: size === 'large' || size === 'rlarge' ? 12 : undefined, deleteIconMode: deleteBtnMode, deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isInputFocused, suffixTextRightSpacingMode: size === 'large' || size === 'rlarge' ? 'use' : 'none', onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onTarget: handleTarget, onDelete: handleDelete }) })), (0, jsx_runtime_1.jsx)(S_DropdownWrapper, __assign({ ref: dropdownRef, inputSize: size, onClick: handleDropdownClick, onBlur: handleDropdownBlur, tabIndex: 0, isFocused: isDropdownFocused, state: dropdownState, isError: Boolean(isError) }, { children: (0, jsx_runtime_1.jsxs)(S_Select, __assign({ inputSize: size }, { children: [useDotBadge === 'use' && selectedCurrency === baseCurrency && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_Badge, {}), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: selectedCurrency, styleTheme: "form2Bold", singleLineMode: "use", colorTheme: "sysTextPrimary", ellipsisMode: "use", customFontWeight: "bold", colorOverride: getDropdownTextColorKey(), lineLimit: 1 }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isDropdownFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getArrowIconColorKey() })] })) }))] })), isDropdownFocused &&
430
- (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ ref: contextMenuRef, contextMenuPositionCss: contextMenuPositionCss }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", customWidth: getDropdownContextMenuCustomWidth() }, { children: currencyOptions.map(function (el) { return ((0, jsx_runtime_1.jsx)("div", __assign({ onMouseDown: function () { return handleCurrencySelect(el); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, size: "large", isSelected: selectedCurrency === el.currency, state: el.state, displayType: "text_only" }) }), el.value)); }) })) })), document.body), ((_c = (0, types_1.getErrorByName)(errors, name)) === null || _c === void 0 ? void 0 : _c.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, { children: (0, types_1.getErrorByName)(errors, name).message }))] })));
429
+ }), value: displayValue, textAlign: textAlign, validation: finalValidation, textLineType: "single", inputType: "text", inputMode: "decimal", preventBlankMode: "all", enterSubmitMode: "none", state: isInputReadOnly ? 'read_only' : state, colorTheme: colorTheme, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', hintTextWeight: hintTextFontWeight === 'bold' ? 'bold' : 'normal', fieldPaddingRight: 12, deleteIconMode: size === 'large' || size === 'rlarge' ? deleteBtnMode : 'none', deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : undefined, deleteIconColor: deleteIconColor, isFocused: isInputFocused, suffixTextRightSpacingMode: size === 'large' || size === 'rlarge' ? 'use' : 'none', onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onTarget: handleTarget, onDelete: handleDelete }) })), (0, jsx_runtime_1.jsx)(S_DropdownWrapper, __assign({ ref: dropdownRef, inputSize: size, onClick: handleDropdownClick, onBlur: handleDropdownBlur, tabIndex: 0, isFocused: isDropdownFocused, state: dropdownState, isError: Boolean(isError) }, { children: (0, jsx_runtime_1.jsxs)(S_Select, __assign({ inputSize: size }, { children: [useDotBadge === 'use' && selectedCurrency === baseCurrency && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_Badge, {}), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: selectedCurrency, styleTheme: "form2Bold", singleLineMode: "use", colorTheme: "sysTextPrimary", ellipsisMode: "use", customFontWeight: "bold", colorOverride: getDropdownTextColorKey(), lineLimit: 1 }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isDropdownFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getArrowIconColorKey() })] })) }))] })), isDropdownFocused &&
430
+ (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ ref: contextMenuRef, contextMenuPositionCss: contextMenuPositionCss }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", customWidth: getDropdownContextMenuCustomWidth() }, { children: currencyOptions.map(function (el) { return ((0, jsx_runtime_1.jsx)("div", __assign({ onMouseDown: function () { return handleCurrencySelect(el); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, size: size === 'rlarge' ? 'large' : size, isSelected: selectedCurrency === el.currency, state: el.state, displayType: "text_only" }) }), el.value)); }) })) })), document.body), ((_c = (0, types_1.getErrorByName)(errors, name)) === null || _c === void 0 ? void 0 : _c.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, { children: (0, types_1.getErrorByName)(errors, name).message }))] })));
431
431
  }
432
432
  var S_PriceTextField = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n ", ";\n ", "\n"], ["\n ", ";\n ", ";\n ", "\n"])), function (_a) {
433
433
  var inputSize = _a.inputSize;
@@ -547,7 +547,7 @@ var S_TextFieldBaseWrapper = styled_components_1.default.div(templateObject_12 |
547
547
  var state = _a.state, theme = _a.theme;
548
548
  return state === 'normal' && (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n "], ["\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n "])), theme.ui_cpnt_textfield_base_hover, theme.ui_cpnt_textfield_base_pressed);
549
549
  });
550
- var S_DropdownWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n\n cursor: ", ";\n\n display: flex;\n height: 100%;\n min-width: 50px;\n outline: none;\n\n padding: 0 ", ";\n\n ", "\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n\n cursor: ", ";\n\n display: flex;\n height: 100%;\n min-width: 50px;\n outline: none;\n\n padding: 0 ", ";\n\n ", "\n"])), function (_a) {
550
+ var S_DropdownWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n\n cursor: ", ";\n\n display: flex;\n height: 100%;\n min-width: 50px;\n outline: none;\n\n padding: 0\n ", ";\n\n ", "\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n\n cursor: ", ";\n\n display: flex;\n height: 100%;\n min-width: 50px;\n outline: none;\n\n padding: 0\n ", ";\n\n ", "\n"])), function (_a) {
551
551
  var theme = _a.theme, state = _a.state;
552
552
  if (state === 'disabled' || state === 'read_only') {
553
553
  return theme.ui_cpnt_textfield_base_disabled;
@@ -577,8 +577,10 @@ var S_DropdownWrapper = styled_components_1.default.div(templateObject_14 || (te
577
577
  return 'pointer';
578
578
  }
579
579
  }, function (_a) {
580
- var theme = _a.theme;
581
- return theme.spacing.spacingD;
580
+ var theme = _a.theme, inputSize = _a.inputSize;
581
+ return inputSize === 'small' || inputSize === 'medium'
582
+ ? theme.spacing.spacingB
583
+ : theme.spacing.spacingD;
582
584
  }, function (_a) {
583
585
  var state = _a.state, theme = _a.theme;
584
586
  return state === 'normal' && (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n "], ["\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n "])), theme.ui_cpnt_textfield_base_hover, theme.ui_cpnt_textfield_base_pressed);
package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.d.ts CHANGED
@@ -4,7 +4,7 @@ export type ContentsContainerProps = {
4
4
  content1?: JSX.Element;
5
5
  content2?: JSX.Element;
6
6
  content3?: JSX.Element;
7
- layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTM_3' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTP_2' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1' | 'WTV_1' | 'WTW_1' | 'WTX_1';
7
+ layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTM_3' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTP_2' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1' | 'WTU_2' | 'WTV_1' | 'WTW_1' | 'WTX_1';
8
8
  containerColor?: string;
9
9
  areaColor?: string;
10
10
  isLoadingContainer1?: boolean;
package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.js CHANGED
@@ -50,6 +50,7 @@ var ContentsContainer = function (_a) {
50
50
  WTT_1: ((0, jsx_runtime_1.jsx)(variation_1.WTT, { layoutType: "WTT_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey })),
51
51
  WTT_2: ((0, jsx_runtime_1.jsx)(variation_1.WTT, { layoutType: "WTT_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey })),
52
52
  WTU_1: ((0, jsx_runtime_1.jsx)(variation_1.WTU, { layoutType: "WTU_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
53
+ WTU_2: ((0, jsx_runtime_1.jsx)(variation_1.WTU, { layoutType: "WTU_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
53
54
  WTV_1: ((0, jsx_runtime_1.jsx)(variation_1.WTV, { layoutType: "WTV_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
54
55
  WTW_1: ((0, jsx_runtime_1.jsx)(variation_1.WTW, { layoutType: "WTW_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
55
56
  WTX_1: ((0, jsx_runtime_1.jsx)(variation_1.WTX, { layoutType: "WTX_1", content1: content1, content2: content2, content3: content3, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, isLoadingContainer3: isLoadingContainer3, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey, overrideContainer3ColorKey: overrideContainer3ColorKey }))
package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTU.d.ts CHANGED
@@ -3,7 +3,7 @@ import type { UiColors } from '../../../../../../common';
3
3
  export type WTUProps = {
4
4
  content1?: JSX.Element;
5
5
  content2?: JSX.Element;
6
- layoutType?: 'WTU_1';
6
+ layoutType: 'WTU_1' | 'WTU_2';
7
7
  containerColor?: string;
8
8
  areaColor?: string;
9
9
  isLoadingContainer1?: boolean;
package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTU.js CHANGED
@@ -75,17 +75,39 @@ var overrideStyleContainer2 = (0, styled_components_1.css)(templateObject_2 || (
75
75
  return overrideContainer2ColorKey && theme[overrideContainer2ColorKey];
76
76
  });
77
77
  var S_Box = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n height: 100%;\n"], ["\n display: flex;\n height: 100%;\n"])));
78
- var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n justify-content: flex-end;\n margin: 0;\n overflow-x: hidden;\n overflow-y: auto;\n width: ", ";\n ", ";\n\n ", "\n"], ["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n justify-content: flex-end;\n margin: 0;\n overflow-x: hidden;\n overflow-y: auto;\n width: ", ";\n ", ";\n\n ", "\n"])), function (_a) {
78
+ var WTU_1Container1Style = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
79
+ var $contentsArea2Width = _a.$contentsArea2Width;
80
+ return "calc(50% - (".concat($contentsArea2Width, "px - 480px) / 2)");
81
+ });
82
+ var WTU_2Container1Style = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
83
+ var $contentsArea2Width = _a.$contentsArea2Width;
84
+ return "calc(50% + (".concat($contentsArea2Width, "px - 480px) / 2)");
85
+ });
86
+ var S_ContentsContainer1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n justify-content: flex-end;\n margin: 0;\n overflow-x: hidden;\n overflow-y: auto;\n width: ", ";\n\n ", ";\n ", ";\n\n ", "\n"], ["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n justify-content: flex-end;\n margin: 0;\n overflow-x: hidden;\n overflow-y: auto;\n width: ", ";\n\n ", ";\n ", ";\n\n ", "\n"])), function (_a) {
79
87
  var theme = _a.theme;
80
88
  return theme.ui_contentscontainer01_background;
81
89
  }, function (_a) {
82
90
  var $contentsArea2Width = _a.$contentsArea2Width;
83
91
  return "calc(50% - (".concat($contentsArea2Width, "px - 480px) / 2)");
92
+ }, function (_a) {
93
+ var layoutType = _a.layoutType;
94
+ return ({
95
+ WTU_1: WTU_1Container1Style,
96
+ WTU_2: WTU_2Container1Style
97
+ }[layoutType]);
84
98
  }, function (_a) {
85
99
  var containerColor = _a.containerColor;
86
100
  return "background-color: ".concat(containerColor);
87
101
  }, overrideStyleContainer1);
88
- var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border-left: 1px solid ", ";\n height: 100%;\n width: ", ";\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n border-left: 1px solid ", ";\n height: 100%;\n width: ", ";\n ", ";\n\n ", "\n"])), function (_a) {
102
+ var WTU_1Container2Style = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
103
+ var $contentsArea2Width = _a.$contentsArea2Width;
104
+ return "calc(50% + (".concat($contentsArea2Width, "px - 480px) / 2)");
105
+ });
106
+ var WTU_2Container2Style = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
107
+ var $contentsArea2Width = _a.$contentsArea2Width;
108
+ return "calc(50% - (".concat($contentsArea2Width, "px - 480px) / 2)");
109
+ });
110
+ var S_ContentsContainer2 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n border-left: 1px solid ", ";\n height: 100%;\n width: ", ";\n\n ", ";\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n border-left: 1px solid ", ";\n height: 100%;\n width: ", ";\n\n ", ";\n ", ";\n\n ", "\n"])), function (_a) {
89
111
  var theme = _a.theme;
90
112
  return theme.ui_contentscontainer02_background;
91
113
  }, function (_a) {
@@ -94,19 +116,41 @@ var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (
94
116
  }, function (_a) {
95
117
  var $contentsArea2Width = _a.$contentsArea2Width;
96
118
  return "calc(50% + (".concat($contentsArea2Width, "px - 480px) / 2)");
119
+ }, function (_a) {
120
+ var layoutType = _a.layoutType;
121
+ return ({
122
+ WTU_1: WTU_1Container2Style,
123
+ WTU_2: WTU_2Container2Style
124
+ }[layoutType]);
97
125
  }, function (_a) {
98
126
  var containerColor = _a.containerColor;
99
127
  return "background-color: ".concat(containerColor);
100
128
  }, overrideStyleContainer2);
101
- var S_ContentsArea1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n box-sizing: border-box;\n height: 100%;\n max-width: 480px;\n width: 480px;\n ", ";\n"], ["\n box-sizing: border-box;\n height: 100%;\n max-width: 480px;\n width: 480px;\n ", ";\n"])), function (_a) {
129
+ var WTU_1ContentsArea1 = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n max-width: 480px;\n width: 480px;\n"], ["\n max-width: 480px;\n width: 480px;\n"])));
130
+ var WTU_2ContentsArea1 = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n max-width: 920px;\n min-width: 720px;\n width: 60%;\n"], ["\n max-width: 920px;\n min-width: 720px;\n width: 60%;\n"])));
131
+ var S_ContentsArea1 = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n box-sizing: border-box;\n height: 100%;\n\n ", ";\n ", ";\n"], ["\n box-sizing: border-box;\n height: 100%;\n\n ", ";\n ", ";\n"])), function (_a) {
132
+ var layoutType = _a.layoutType;
133
+ return ({
134
+ WTU_1: WTU_1ContentsArea1,
135
+ WTU_2: WTU_2ContentsArea1
136
+ }[layoutType]);
137
+ }, function (_a) {
102
138
  var areaColor = _a.areaColor;
103
139
  return "background-color: ".concat(areaColor);
104
140
  });
105
- var S_ContentsArea2 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n height: 100%;\n max-width: 920px;\n min-width: 720px;\n width: 60%;\n ", ";\n"], ["\n height: 100%;\n max-width: 920px;\n min-width: 720px;\n width: 60%;\n ", ";\n"])), function (_a) {
141
+ var WTU_1ContentsArea2 = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n max-width: 920px;\n min-width: 720px;\n width: 60%;\n"], ["\n max-width: 920px;\n min-width: 720px;\n width: 60%;\n"])));
142
+ var WTU_2ContentsArea2 = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n max-width: 480px;\n width: 480px;\n"], ["\n max-width: 480px;\n width: 480px;\n"])));
143
+ var S_ContentsArea2 = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n height: 100%;\n\n ", ";\n ", ";\n"], ["\n height: 100%;\n\n ", ";\n ", ";\n"])), function (_a) {
144
+ var layoutType = _a.layoutType;
145
+ return ({
146
+ WTU_1: WTU_1ContentsArea2,
147
+ WTU_2: WTU_2ContentsArea2
148
+ }[layoutType]);
149
+ }, function (_a) {
106
150
  var areaColor = _a.areaColor;
107
151
  return "background-color: ".concat(areaColor);
108
152
  });
109
- var S_Content1 = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n"], ["\n height: 100%;\n overflow: hidden;\n"])));
110
- var S_Content2 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n"], ["\n height: 100%;\n overflow: hidden;\n"])));
153
+ var S_Content1 = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n"], ["\n height: 100%;\n overflow: hidden;\n"])));
154
+ var S_Content2 = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n"], ["\n height: 100%;\n overflow: hidden;\n"])));
111
155
  exports.default = WTU;
112
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
156
+ 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;
package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { UiColors } from '../../../../common';
2
2
  import type { MutableRefObject } from 'react';
3
3
  export type ContainersBoxProps = {
4
- layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTM_3' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTP_2' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1' | 'WTV_1' | 'WTW_1' | 'WTX_1';
4
+ layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTM_3' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTP_2' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1' | 'WTU_2' | 'WTV_1' | 'WTW_1' | 'WTX_1';
5
5
  pageMenuContent?: JSX.Element;
6
6
  tabMenuContent?: JSX.Element;
7
7
  subMenuContent?: JSX.Element;
package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.js CHANGED
@@ -89,6 +89,7 @@ var ContainersBox = function (_a) {
89
89
  WTT_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
90
90
  WTT_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
91
91
  WTU_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
92
+ WTU_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
92
93
  WTV_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
93
94
  WTW_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
94
95
  WTX_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})
@@ -138,6 +139,7 @@ var ContainersBox = function (_a) {
138
139
  WTT_1: ((0, jsx_runtime_1.jsx)(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
139
140
  WTT_2: ((0, jsx_runtime_1.jsx)(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
140
141
  WTU_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
142
+ WTU_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
141
143
  WTV_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
142
144
  WTW_1: ((0, jsx_runtime_1.jsx)(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
143
145
  WTX_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})
@@ -187,6 +189,7 @@ var ContainersBox = function (_a) {
187
189
  WTT_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
188
190
  WTT_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
189
191
  WTU_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
192
+ WTU_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
190
193
  WTV_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
191
194
  WTW_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
192
195
  WTX_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})
@@ -236,6 +239,7 @@ var ContainersBox = function (_a) {
236
239
  WTT_1: '',
237
240
  WTT_2: '',
238
241
  WTU_1: '',
242
+ WTU_2: '',
239
243
  WTV_1: '',
240
244
  WTW_1: '',
241
245
  WTX_1: ''
package/dist/src/mobile/components/PriceTextField/PriceTextField.d.ts CHANGED
@@ -11,7 +11,7 @@ type Props = {
11
11
  name: Path<IFormValues>;
12
12
  hintText?: PDSTextType;
13
13
  defaultAmount?: number;
14
- size?: 'large' | 'rlarge';
14
+ size?: 'large' | 'rlarge' | 'medium' | 'small';
15
15
  responsiveMode?: 'none' | 'use';
16
16
  state?: 'normal' | 'read_only' | 'disabled';
17
17
  dropdownState?: 'normal' | 'read_only';
@@ -28,6 +28,7 @@ type Props = {
28
28
  useDotBadge?: 'none' | 'use';
29
29
  deleteBtnMode?: 'none' | 'use';
30
30
  minPriceAmount?: string | number;
31
+ onExChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
31
32
  onChange?: (value: string) => void;
32
33
  onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
33
34
  onFocus?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
@@ -39,5 +40,5 @@ type Props = {
39
40
  displayValue: string;
40
41
  }) => void;
41
42
  } & Omit<Partial<TextFieldBaseProps>, 'textAlign' | 'preventBlankMode' | 'enterSubmitMode' | 'multiRows' | 'colorTheme'>;
42
- declare function PriceTextField({ name, hintText, defaultAmount, colorTheme, size, fontWeight, hintTextFontWeight, responsiveMode, state, dropdownState, customWidth, baseCurrency, currencies, decimalPlaces, exchangeRates, textAlign, validation, useRequiredValidation, useDotBadge, deleteBtnMode, minPriceAmount, onChange, onBlur, onFocus, onTarget, onCurrencyChange, onValueChange }: Props): JSX.Element;
43
+ declare function PriceTextField({ name, hintText, defaultAmount, colorTheme, size, fontWeight, hintTextFontWeight, responsiveMode, state, dropdownState, customWidth, baseCurrency, currencies, decimalPlaces, exchangeRates, textAlign, validation, useRequiredValidation, useDotBadge, deleteBtnMode, minPriceAmount, onChange, onExChange, onBlur, onFocus, onTarget, onCurrencyChange, onValueChange }: Props): JSX.Element;
43
44
  export default PriceTextField;
package/dist/src/mobile/components/PriceTextField/PriceTextField.js CHANGED
@@ -66,7 +66,7 @@ exports.DEFAULT_DECIMAL_PLACES = {
66
66
  function PriceTextField(_a) {
67
67
  var _b;
68
68
  var _c;
69
- var name = _a.name, hintText = _a.hintText, defaultAmount = _a.defaultAmount, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d, _e = _a.size, size = _e === void 0 ? 'large' : _e, _f = _a.fontWeight, fontWeight = _f === void 0 ? 'bold' : _f, _g = _a.hintTextFontWeight, hintTextFontWeight = _g === void 0 ? 'normal' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.state, state = _j === void 0 ? 'normal' : _j, _k = _a.dropdownState, dropdownState = _k === void 0 ? 'normal' : _k, customWidth = _a.customWidth, _l = _a.baseCurrency, baseCurrency = _l === void 0 ? pricing_1.CurrencyCode.KRW : _l, _m = _a.currencies, currencies = _m === void 0 ? [pricing_1.CurrencyCode.KRW, pricing_1.CurrencyCode.USD] : _m, _o = _a.decimalPlaces, decimalPlaces = _o === void 0 ? exports.DEFAULT_DECIMAL_PLACES : _o, _p = _a.exchangeRates, exchangeRates = _p === void 0 ? (_b = {}, _b[pricing_1.CurrencyCode.KRW] = 1300, _b[pricing_1.CurrencyCode.USD] = 1, _b) : _p, _q = _a.textAlign, textAlign = _q === void 0 ? 'right' : _q, validation = _a.validation, _r = _a.useRequiredValidation, useRequiredValidation = _r === void 0 ? 'use' : _r, _s = _a.useDotBadge, useDotBadge = _s === void 0 ? 'use' : _s, _t = _a.deleteBtnMode, deleteBtnMode = _t === void 0 ? 'use' : _t, minPriceAmount = _a.minPriceAmount, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onTarget = _a.onTarget, onCurrencyChange = _a.onCurrencyChange, onValueChange = _a.onValueChange;
69
+ var name = _a.name, hintText = _a.hintText, defaultAmount = _a.defaultAmount, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d, _e = _a.size, size = _e === void 0 ? 'large' : _e, _f = _a.fontWeight, fontWeight = _f === void 0 ? 'bold' : _f, _g = _a.hintTextFontWeight, hintTextFontWeight = _g === void 0 ? 'normal' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.state, state = _j === void 0 ? 'normal' : _j, _k = _a.dropdownState, dropdownState = _k === void 0 ? 'normal' : _k, customWidth = _a.customWidth, _l = _a.baseCurrency, baseCurrency = _l === void 0 ? pricing_1.CurrencyCode.KRW : _l, _m = _a.currencies, currencies = _m === void 0 ? [pricing_1.CurrencyCode.KRW, pricing_1.CurrencyCode.USD] : _m, _o = _a.decimalPlaces, decimalPlaces = _o === void 0 ? exports.DEFAULT_DECIMAL_PLACES : _o, _p = _a.exchangeRates, exchangeRates = _p === void 0 ? (_b = {}, _b[pricing_1.CurrencyCode.KRW] = 1300, _b[pricing_1.CurrencyCode.USD] = 1, _b) : _p, _q = _a.textAlign, textAlign = _q === void 0 ? 'right' : _q, validation = _a.validation, _r = _a.useRequiredValidation, useRequiredValidation = _r === void 0 ? 'use' : _r, _s = _a.useDotBadge, useDotBadge = _s === void 0 ? 'use' : _s, _t = _a.deleteBtnMode, deleteBtnMode = _t === void 0 ? 'use' : _t, minPriceAmount = _a.minPriceAmount, onChange = _a.onChange, onExChange = _a.onExChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onTarget = _a.onTarget, onCurrencyChange = _a.onCurrencyChange, onValueChange = _a.onValueChange;
70
70
  var t = (0, react_i18next_1.useTranslation)('translation').t;
71
71
  var _u = (0, react_1.useState)(defaultAmount ? String(defaultAmount) : ''), baseCurrencyValue = _u[0], setBaseCurrencyValue = _u[1];
72
72
  var _v = (0, react_1.useState)(baseCurrency), selectedCurrency = _v[0], setSelectedCurrency = _v[1];
@@ -307,6 +307,9 @@ function PriceTextField(_a) {
307
307
  }, 0);
308
308
  }
309
309
  }
310
+ if (onExChange) {
311
+ onExChange(e);
312
+ }
310
313
  };
311
314
  var handleBlur = function (e) {
312
315
  setIsInputFocused(false);
@@ -423,8 +426,8 @@ function PriceTextField(_a) {
423
426
  policy_1.DEFAULT_CURRENCY_PRICE_POLICIES[baseCurrency].minPayment.amount,
424
427
  currency: baseCurrency
425
428
  })
426
- }), value: displayValue, textAlign: textAlign, validation: finalValidation, textLineType: "single", inputType: "text", inputMode: "decimal", preventBlankMode: "all", enterSubmitMode: "none", state: isInputReadOnly ? 'read_only' : state, colorTheme: colorTheme, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', hintTextWeight: hintTextFontWeight === 'bold' ? 'bold' : 'normal', fieldPaddingRight: size === 'large' || size === 'rlarge' ? 12 : undefined, deleteIconMode: deleteBtnMode, deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isInputFocused, suffixTextRightSpacingMode: size === 'large' || size === 'rlarge' ? 'use' : 'none', onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onTarget: handleTarget, onDelete: handleDelete }) })), (0, jsx_runtime_1.jsx)(S_DropdownWrapper, __assign({ ref: dropdownRef, inputSize: size, onClick: handleDropdownClick, onBlur: handleDropdownBlur, tabIndex: 0, isFocused: isDropdownFocused, state: dropdownState, isError: Boolean(isError) }, { children: (0, jsx_runtime_1.jsxs)(S_Select, __assign({ inputSize: size }, { children: [useDotBadge === 'use' && selectedCurrency === baseCurrency && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_Badge, {}), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: selectedCurrency, styleTheme: "form2Bold", singleLineMode: "use", colorTheme: "sysTextPrimary", ellipsisMode: "use", customFontWeight: "bold", colorOverride: getDropdownTextColorKey(), lineLimit: 1 }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isDropdownFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getArrowIconColorKey() })] })) }))] })), isDropdownFocused &&
427
- (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ ref: contextMenuRef, contextMenuPositionCss: contextMenuPositionCss }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", customWidth: getDropdownContextMenuCustomWidth() }, { children: currencyOptions.map(function (el) { return ((0, jsx_runtime_1.jsx)("div", __assign({ onMouseDown: function () { return handleCurrencySelect(el); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, size: "large", isSelected: selectedCurrency === el.currency, state: el.state, displayType: "text_only" }) }), el.value)); }) })) })), document.body), ((_c = (0, types_1.getErrorByName)(errors, name)) === null || _c === void 0 ? void 0 : _c.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, { children: (0, types_1.getErrorByName)(errors, name).message }))] })));
429
+ }), value: displayValue, textAlign: textAlign, validation: finalValidation, textLineType: "single", inputType: "text", inputMode: "decimal", preventBlankMode: "all", enterSubmitMode: "none", state: isInputReadOnly ? 'read_only' : state, colorTheme: colorTheme, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', hintTextWeight: hintTextFontWeight === 'bold' ? 'bold' : 'normal', fieldPaddingRight: 12, deleteIconMode: deleteBtnMode, deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isInputFocused, suffixTextRightSpacingMode: size === 'large' || size === 'rlarge' ? 'use' : 'none', onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onTarget: handleTarget, onDelete: handleDelete }) })), (0, jsx_runtime_1.jsx)(S_DropdownWrapper, __assign({ ref: dropdownRef, inputSize: size, onClick: handleDropdownClick, onBlur: handleDropdownBlur, tabIndex: 0, isFocused: isDropdownFocused, state: dropdownState, isError: Boolean(isError) }, { children: (0, jsx_runtime_1.jsxs)(S_Select, __assign({ inputSize: size }, { children: [useDotBadge === 'use' && selectedCurrency === baseCurrency && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_Badge, {}), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: selectedCurrency, styleTheme: "form2Bold", singleLineMode: "use", colorTheme: "sysTextPrimary", ellipsisMode: "use", customFontWeight: "bold", colorOverride: getDropdownTextColorKey(), lineLimit: 1 }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isDropdownFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getArrowIconColorKey() })] })) }))] })), isDropdownFocused &&
430
+ (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ ref: contextMenuRef, contextMenuPositionCss: contextMenuPositionCss }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", customWidth: getDropdownContextMenuCustomWidth() }, { children: currencyOptions.map(function (el) { return ((0, jsx_runtime_1.jsx)("div", __assign({ onMouseDown: function () { return handleCurrencySelect(el); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, size: size === 'rlarge' ? 'large' : size, isSelected: selectedCurrency === el.currency, state: el.state, displayType: "text_only" }) }), el.value)); }) })) })), document.body), ((_c = (0, types_1.getErrorByName)(errors, name)) === null || _c === void 0 ? void 0 : _c.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, { children: (0, types_1.getErrorByName)(errors, name).message }))] })));
428
431
  }
429
432
  var S_PriceTextField = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n ", ";\n ", "\n"], ["\n ", ";\n ", ";\n ", "\n"])), function (_a) {
430
433
  var inputSize = _a.inputSize;
@@ -534,7 +537,7 @@ var S_TextFieldBaseWrapper = styled_components_1.default.div(templateObject_12 |
534
537
  var state = _a.state, theme = _a.theme;
535
538
  return state === 'normal' && (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n "], ["\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n "])), theme.ui_cpnt_textfield_base_hover, theme.ui_cpnt_textfield_base_pressed);
536
539
  });
537
- var S_DropdownWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n\n cursor: ", ";\n\n display: flex;\n height: 100%;\n min-width: 50px;\n outline: none;\n\n padding: 0 ", ";\n\n ", "\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n\n cursor: ", ";\n\n display: flex;\n height: 100%;\n min-width: 50px;\n outline: none;\n\n padding: 0 ", ";\n\n ", "\n"])), function (_a) {
540
+ var S_DropdownWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n\n cursor: ", ";\n\n display: flex;\n height: 100%;\n min-width: 50px;\n outline: none;\n\n padding: 0\n ", ";\n\n ", "\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n\n cursor: ", ";\n\n display: flex;\n height: 100%;\n min-width: 50px;\n outline: none;\n\n padding: 0\n ", ";\n\n ", "\n"])), function (_a) {
538
541
  var theme = _a.theme, state = _a.state;
539
542
  if (state === 'disabled' || state === 'read_only') {
540
543
  return theme.ui_cpnt_textfield_base_disabled;
@@ -564,8 +567,10 @@ var S_DropdownWrapper = styled_components_1.default.div(templateObject_14 || (te
564
567
  return 'pointer';
565
568
  }
566
569
  }, function (_a) {
567
- var theme = _a.theme;
568
- return theme.spacing.spacingD;
570
+ var theme = _a.theme, inputSize = _a.inputSize;
571
+ return inputSize === 'small' || inputSize === 'medium'
572
+ ? theme.spacing.spacingB
573
+ : theme.spacing.spacingD;
569
574
  }, function (_a) {
570
575
  var state = _a.state, theme = _a.theme;
571
576
  return state === 'normal' && (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n "], ["\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n "])), theme.ui_cpnt_textfield_base_hover, theme.ui_cpnt_textfield_base_pressed);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.2.266",
3
+ "version": "2.2.268",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,7 +1,7 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.2.266]
2
+ ## [v2.2.268]
3
3
  ## daily|https://design.storybook.publ.biz/
4
4
 
5
5
  ### 업데이트 사항
6
6
 
7
- * [PDS-1386] CP 아이콘 추가 건 (ic_brandedpoint_3d_fruit_05)
7
+ * [PDS-1391] WTU-2 레이아웃 추가