pds-dev-kit-web 2.2.265 → 2.2.267

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.
@@ -187,6 +187,7 @@ export declare const imageIconSrcSet: {
187
187
  ic_brandedpoint_3d_fruit_02: string;
188
188
  ic_brandedpoint_3d_fruit_03: string;
189
189
  ic_brandedpoint_3d_fruit_04: string;
190
+ ic_brandedpoint_3d_fruit_05: string;
190
191
  ic_brandedpoint_3d_macaron_01: string;
191
192
  ic_brandedpoint_3d_macaron_02: string;
192
193
  ic_brandedpoint_3d_cake_01: string;
@@ -190,6 +190,7 @@ exports.imageIconSrcSet = {
190
190
  ic_brandedpoint_3d_fruit_02: 'https://static.publ.site/brandedpoint_icon/ic_brandedpoint_3d_fruit_02.png',
191
191
  ic_brandedpoint_3d_fruit_03: 'https://static.publ.site/brandedpoint_icon/ic_brandedpoint_3d_fruit_03.png',
192
192
  ic_brandedpoint_3d_fruit_04: 'https://static.publ.site/brandedpoint_icon/ic_brandedpoint_3d_fruit_04.png',
193
+ ic_brandedpoint_3d_fruit_05: 'https://static.publ.site/brandedpoint_icon/ic_brandedpoint_3d_fruit_05.png',
193
194
  ic_brandedpoint_3d_macaron_01: 'https://static.publ.site/brandedpoint_icon/ic_brandedpoint_3d_macaron_01.png',
194
195
  ic_brandedpoint_3d_macaron_02: 'https://static.publ.site/brandedpoint_icon/ic_brandedpoint_3d_macaron_02.png',
195
196
  ic_brandedpoint_3d_cake_01: 'https://static.publ.site/brandedpoint_icon/ic_brandedpoint_3d_cake_01.png',
@@ -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';
@@ -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);
@@ -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;
@@ -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.265",
3
+ "version": "2.2.267",
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.265]
2
+ ## [v2.2.267]
3
3
  ## daily|https://design.storybook.publ.biz/
4
4
 
5
5
  ### 업데이트 사항
6
6
 
7
- * color key 갱신 - ui_147
7
+ * [PDS-1320] PTF 컴포넌트 사이즈 추가(medium, small)