pds-dev-kit-web-test 2.7.545 → 2.7.547

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 (68) hide show
  1. package/dist/src/common/assets/icons/fill/ArrowStemLeft01.d.ts +4 -0
  2. package/dist/src/common/assets/icons/fill/ArrowStemLeft01.js +30 -0
  3. package/dist/src/common/assets/icons/fill/ArrowStemRight01.d.ts +4 -0
  4. package/dist/src/common/assets/icons/fill/ArrowStemRight01.js +30 -0
  5. package/dist/src/common/assets/icons/fill/Braces.d.ts +4 -0
  6. package/dist/src/common/assets/icons/fill/Braces.js +30 -0
  7. package/dist/src/common/assets/icons/fill/HalfArrowStemLeft01.d.ts +4 -0
  8. package/dist/src/common/assets/icons/fill/HalfArrowStemLeft01.js +30 -0
  9. package/dist/src/common/assets/icons/fill/HalfArrowStemRight01.d.ts +4 -0
  10. package/dist/src/common/assets/icons/fill/HalfArrowStemRight01.js +30 -0
  11. package/dist/src/common/assets/icons/fill/PostDetail.d.ts +4 -0
  12. package/dist/src/common/assets/icons/fill/PostDetail.js +30 -0
  13. package/dist/src/common/assets/icons/fill/Widget.d.ts +4 -0
  14. package/dist/src/common/assets/icons/fill/Widget.js +30 -0
  15. package/dist/src/common/assets/icons/fill/index.d.ts +8 -1
  16. package/dist/src/common/assets/icons/fill/index.js +15 -1
  17. package/dist/src/common/assets/icons/line/ArrowStemLeft01.d.ts +4 -0
  18. package/dist/src/common/assets/icons/line/ArrowStemLeft01.js +30 -0
  19. package/dist/src/common/assets/icons/line/ArrowStemRight01.d.ts +4 -0
  20. package/dist/src/common/assets/icons/line/ArrowStemRight01.js +30 -0
  21. package/dist/src/common/assets/icons/line/Braces.d.ts +4 -0
  22. package/dist/src/common/assets/icons/line/Braces.js +30 -0
  23. package/dist/src/common/assets/icons/line/HalfArrowStemLeft01.d.ts +4 -0
  24. package/dist/src/common/assets/icons/line/HalfArrowStemLeft01.js +30 -0
  25. package/dist/src/common/assets/icons/line/HalfArrowStemRight01.d.ts +4 -0
  26. package/dist/src/common/assets/icons/line/HalfArrowStemRight01.js +30 -0
  27. package/dist/src/common/assets/icons/line/PostDetail.d.ts +4 -0
  28. package/dist/src/common/assets/icons/line/PostDetail.js +30 -0
  29. package/dist/src/common/assets/icons/line/Widget.d.ts +4 -0
  30. package/dist/src/common/assets/icons/line/Widget.js +30 -0
  31. package/dist/src/common/assets/icons/line/index.d.ts +8 -1
  32. package/dist/src/common/assets/icons/line/index.js +15 -1
  33. package/dist/src/common/styles/colorSet/UIColor.json +5 -1
  34. package/dist/src/common/styles/colorSet/index.d.ts +925 -921
  35. package/dist/src/common/styles/colorSet/index.js +3 -3
  36. package/dist/src/common/styles/colorSet/ui-type.d.ts +4 -0
  37. package/dist/src/desktop/components/BoxItem/BoxItem.d.ts +3 -3
  38. package/dist/src/desktop/components/BoxItem/BoxItem.js +22 -12
  39. package/dist/src/desktop/components/Chip/Chip.d.ts +2 -1
  40. package/dist/src/desktop/components/Chip/Chip.js +45 -22
  41. package/dist/src/desktop/components/ReactionButton/ReactionButton.js +1 -1
  42. package/dist/src/desktop/components/Select/Select.d.ts +1 -0
  43. package/dist/src/desktop/components/Select/Select.js +1 -1
  44. package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.d.ts +1 -1
  45. package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.js +13 -3
  46. package/dist/src/hybrid/components/ImageView/ImageView.d.ts +2 -1
  47. package/dist/src/hybrid/components/ImageView/ImageView.js +2 -2
  48. package/dist/src/mobile/components/BoxItem/BoxItem.d.ts +3 -3
  49. package/dist/src/mobile/components/BoxItem/BoxItem.js +22 -12
  50. package/dist/src/mobile/components/Chip/Chip.d.ts +2 -1
  51. package/dist/src/mobile/components/Chip/Chip.js +45 -22
  52. package/dist/src/mobile/components/MobileTabBar/MobileTabBar.d.ts +3 -1
  53. package/dist/src/mobile/components/MobileTabBar/MobileTabBar.js +13 -2
  54. package/dist/src/mobile/components/ReactionButton/ReactionButton.js +1 -1
  55. package/dist/src/mobile/components/Select/Select.d.ts +1 -0
  56. package/dist/src/mobile/components/Select/Select.js +1 -1
  57. package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.js +2 -1
  58. package/dist/src/sub/DynamicLayout/gleStyles.js +1 -1
  59. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Button/Button.js +0 -2
  60. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/ContentsCarousel.js +3 -4
  61. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/ContentsList.js +5 -3
  62. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/contentsListUtils.js +1 -1
  63. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.js +3 -2
  64. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/VideoPlayer/VideoPlayer.js +2 -2
  65. package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parsePlacement.js +1 -1
  66. package/dist/src/sub/DynamicLayout/sections/CustomSection/util/stylePropParsers/parseStylePropBorder.js +12 -5
  67. package/package.json +1 -1
  68. package/release-note.md +2 -2
package/dist/src/mobile/components/BoxItem/BoxItem.js CHANGED
@@ -42,9 +42,9 @@ var paddingSpacing = {
42
42
  spacing_n: 'spacingN'
43
43
  };
44
44
  function BoxItem(_a) {
45
- var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, _c = _a.checkboxMode, checkboxMode = _c === void 0 ? 'none' : _c, _d = _a.checkboxState, checkboxState = _d === void 0 ? 'unchecked' : _d, _e = _a.indicatorMode, indicatorMode = _e === void 0 ? 'none' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, _g = _a.selectState, selectState = _g === void 0 ? 'unselected' : _g, titleText = _a.titleText, titleFontSize = _a.titleFontSize, _h = _a.titleTextLineLimit, titleTextLineLimit = _h === void 0 ? 2 : _h, _j = _a.titleTextColorKey, titleTextColorKey = _j === void 0 ? 'ui_cpnt_textlabel_sys_primary' : _j, _k = _a.titleTextWordBreak, titleTextWordBreak = _k === void 0 ? 'normal' : _k, descText = _a.descText, _l = _a.descTextColorKey, descTextColorKey = _l === void 0 ? 'ui_cpnt_textlabel_sys_secondary' : _l, _m = _a.descLineLimit, descLineLimit = _m === void 0 ? 2 : _m, _o = _a.descTextWordBreak, descTextWordBreak = _o === void 0 ? 'normal' : _o, _p = _a.imageMode, imageMode = _p === void 0 ? 'none' : _p, _q = _a.imageShapeType, imageShapeType = _q === void 0 ? 'round' : _q, imageSrc = _a.imageSrc, imageWidth = _a.imageWidth, _r = _a.imageRatio, imageRatio = _r === void 0 ? '1_1' : _r, _s = _a.imageScaleType, imageScaleType = _s === void 0 ? 'cover' : _s, _t = _a.chipMode, chipMode = _t === void 0 ? 'none' : _t, chipText = _a.chipText, chipOverrideTextColorKey = _a.chipOverrideTextColorKey, chipOverrideBackgroundColorKey = _a.chipOverrideBackgroundColorKey, _u = _a.displayType, displayType = _u === void 0 ? 'none' : _u, iBtn1IconName = _a.iBtn1IconName, _v = _a.iBtn1IconFillType, iBtn1IconFillType = _v === void 0 ? 'line' : _v, iBtn1IconColorKey = _a.iBtn1IconColorKey, iBtn2IconName = _a.iBtn2IconName, _w = _a.iBtn2IconFillType, iBtn2IconFillType = _w === void 0 ? 'line' : _w, iBtn2IconColorKey = _a.iBtn2IconColorKey, iBtn3IconName = _a.iBtn3IconName, overrideBorderColorKey = _a.overrideBorderColorKey, _x = _a.iBtn3IconFillType, iBtn3IconFillType = _x === void 0 ? 'line' : _x, iBtn3IconColorKey = _a.iBtn3IconColorKey, _y = _a.paddingTop, paddingTop = _y === void 0 ? 'spacing_d' : _y, _z = _a.paddingRight, paddingRight = _z === void 0 ? 'spacing_d' : _z, _0 = _a.paddingBottom, paddingBottom = _0 === void 0 ? 'spacing_d' : _0, _1 = _a.paddingLeft, paddingLeft = _1 === void 0 ? 'spacing_d' : _1, id = _a.id, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickIBtn3 = _a.onClickIBtn3;
45
+ var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, _c = _a.checkboxMode, checkboxMode = _c === void 0 ? 'none' : _c, _d = _a.checkboxState, checkboxState = _d === void 0 ? 'unchecked' : _d, _e = _a.indicatorMode, indicatorMode = _e === void 0 ? 'none' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, _g = _a.selectState, selectState = _g === void 0 ? 'unselected' : _g, titleText = _a.titleText, titleFontSize = _a.titleFontSize, _h = _a.titleTextLineLimit, titleTextLineLimit = _h === void 0 ? 2 : _h, _j = _a.titleTextColorKey, titleTextColorKey = _j === void 0 ? 'ui_cpnt_textlabel_sys_primary' : _j, _k = _a.titleTextWordBreak, titleTextWordBreak = _k === void 0 ? 'normal' : _k, descText = _a.descText, _l = _a.descTextColorKey, descTextColorKey = _l === void 0 ? 'ui_cpnt_textlabel_sys_secondary' : _l, _m = _a.descTextLineLimit, descTextLineLimit = _m === void 0 ? 2 : _m, _o = _a.descTextWordBreak, descTextWordBreak = _o === void 0 ? 'normal' : _o, _p = _a.imageMode, imageMode = _p === void 0 ? 'none' : _p, _q = _a.imageShapeType, imageShapeType = _q === void 0 ? 'round' : _q, imageSrc = _a.imageSrc, imageWidth = _a.imageWidth, _r = _a.imageRatio, imageRatio = _r === void 0 ? '1_1' : _r, _s = _a.imageScaleType, imageScaleType = _s === void 0 ? 'cover' : _s, _t = _a.chipMode, chipMode = _t === void 0 ? 'none' : _t, chipText = _a.chipText, chipOverrideTextColorKey = _a.chipOverrideTextColorKey, chipOverrideBackgroundColorKey = _a.chipOverrideBackgroundColorKey, _u = _a.displayType, displayType = _u === void 0 ? 'none' : _u, iBtn1IconName = _a.iBtn1IconName, _v = _a.iBtn1IconFillType, iBtn1IconFillType = _v === void 0 ? 'line' : _v, iBtn1IconColorKey = _a.iBtn1IconColorKey, iBtn2IconName = _a.iBtn2IconName, _w = _a.iBtn2IconFillType, iBtn2IconFillType = _w === void 0 ? 'line' : _w, iBtn2IconColorKey = _a.iBtn2IconColorKey, iBtn3IconName = _a.iBtn3IconName, overrideBorderColorKey = _a.overrideBorderColorKey, _x = _a.iBtn3IconFillType, iBtn3IconFillType = _x === void 0 ? 'line' : _x, iBtn3IconColorKey = _a.iBtn3IconColorKey, _y = _a.paddingTop, paddingTop = _y === void 0 ? 'spacing_d' : _y, _z = _a.paddingRight, paddingRight = _z === void 0 ? 'spacing_d' : _z, _0 = _a.paddingBottom, paddingBottom = _0 === void 0 ? 'spacing_d' : _0, _1 = _a.paddingLeft, paddingLeft = _1 === void 0 ? 'spacing_d' : _1, id = _a.id, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickIBtn3 = _a.onClickIBtn3;
46
46
  var handleClick = function () {
47
- if (state === 'disabled') {
47
+ if (state === 'disabled' || state === 'read_only') {
48
48
  return;
49
49
  }
50
50
  if (onClick) {
@@ -53,7 +53,7 @@ function BoxItem(_a) {
53
53
  };
54
54
  var handleIBtn1Click = function (e) {
55
55
  e.stopPropagation();
56
- if (state === 'disabled') {
56
+ if (state === 'disabled' || state === 'read_only') {
57
57
  return;
58
58
  }
59
59
  if (onClickIBtn1) {
@@ -62,7 +62,7 @@ function BoxItem(_a) {
62
62
  };
63
63
  var handleIBtn2Click = function (e) {
64
64
  e.stopPropagation();
65
- if (state === 'disabled') {
65
+ if (state === 'disabled' || state === 'read_only') {
66
66
  return;
67
67
  }
68
68
  if (onClickIBtn2) {
@@ -71,27 +71,37 @@ function BoxItem(_a) {
71
71
  };
72
72
  var handleIBtn3Click = function (e) {
73
73
  e.stopPropagation();
74
- if (state === 'disabled') {
74
+ if (state === 'disabled' || state === 'read_only') {
75
75
  return;
76
76
  }
77
77
  if (onClickIBtn3) {
78
78
  onClickIBtn3(id);
79
79
  }
80
80
  };
81
- return ((0, jsx_runtime_1.jsx)(S_BoxItem, __assign({ "x-pds-name": "BoxItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", onClick: handleClick }, { children: (0, jsx_runtime_1.jsxs)(panels_1.ContentSheet, __assign({ shapeType: "round", radius: 16, width: "100%", height: "responsive", paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, borderMode: "use", borderColorTheme: state === 'disabled' ? undefined : selectState === 'selected' ? 'blue' : undefined, overrideBorderColorKey: state === 'disabled'
81
+ return ((0, jsx_runtime_1.jsx)(S_BoxItem, __assign({ "x-pds-name": "BoxItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", onClick: handleClick }, { children: (0, jsx_runtime_1.jsxs)(panels_1.ContentSheet, __assign({ shapeType: "round", radius: 16, width: "100%", height: "responsive", paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, borderMode: "use", borderColorTheme: state === 'disabled' || state === 'read_only'
82
+ ? undefined
83
+ : selectState === 'selected'
84
+ ? 'blue'
85
+ : undefined, overrideBorderColorKey: state === 'disabled'
82
86
  ? 'ui_cpnt_sheet_base'
83
87
  : selectState === 'selected'
84
- ? overrideBorderColorKey
85
- ? overrideBorderColorKey
86
- : undefined
88
+ ? state === 'read_only'
89
+ ? 'ui_cpnt_sheet_border_04'
90
+ : overrideBorderColorKey
91
+ ? overrideBorderColorKey
92
+ : undefined
87
93
  : 'ui_cpnt_sheet_base', borderWidth: selectionMode === 'use' ? 2 : undefined, overrideCSS: {
88
94
  display: 'flex',
89
95
  flexDirection: 'row',
90
96
  alignItems: 'center',
91
97
  justifyContent: 'space-between',
92
- cursor: state === 'disabled' ? 'default' : selectionMode === 'use' ? 'pointer' : 'default'
93
- } }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { checked: checkboxState === 'checked', isIndeterminate: checkboxState === 'indeterminate' })), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: titleText, colorOverride: state === 'disabled' ? undefined : titleTextColorKey, colorTheme: state === 'disabled' ? 'sysTextTertiary' : undefined, styleTheme: titleFontSize, lineLimit: titleTextLineLimit, wordBreak: titleTextWordBreak, ellipsisMode: "use" })), descText && ((0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: descText, colorOverride: state === 'disabled' ? 'ui_cpnt_textlabel_sys_secondary' : descTextColorKey, lineLimit: descLineLimit, wordBreak: descTextWordBreak, ellipsisMode: "use", styleTheme: "caption1Regular" }))] })] })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [displayType !== 'none' ||
94
- (chipMode === 'use' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" })), chipMode === 'use' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: chipText, overrideBackgroundColorKey: chipOverrideBackgroundColorKey, displayType: "information", overrideTextColorKey: chipOverrideTextColorKey }) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', baseSize: "medium", fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", shapeType: "rectangle" })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, onClick: handleIBtn2Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] })), displayType === 'ibtn_amount3' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn3IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn3IconFillType, iconColorKey: iBtn3IconColorKey, onClick: handleIBtn3Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, onClick: handleIBtn2Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] }))] }), indicatorMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", fillType: "line", size: 20, colorKey: "ui_cpnt_icon_sys_grey_01" })] }))] })] })) })));
98
+ cursor: state === 'disabled' || state === 'read_only'
99
+ ? 'default'
100
+ : selectionMode === 'use'
101
+ ? 'pointer'
102
+ : 'default'
103
+ } }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { checked: checkboxState === 'checked', isIndeterminate: checkboxState === 'indeterminate' })), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: titleText, colorOverride: state === 'disabled' || state === 'read_only' ? undefined : titleTextColorKey, colorTheme: state === 'disabled' || state === 'read_only' ? 'sysTextTertiary' : undefined, styleTheme: titleFontSize, lineLimit: titleTextLineLimit, wordBreak: titleTextWordBreak, ellipsisMode: "use" })), descText && ((0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: descText, colorTheme: state === 'disabled' || state === 'read_only' ? 'sysTextTertiary' : undefined, colorOverride: state === 'disabled' || state === 'read_only' ? undefined : descTextColorKey, lineLimit: descTextLineLimit, wordBreak: descTextWordBreak, ellipsisMode: "use", styleTheme: "caption1Regular" }))] })] })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [displayType !== 'none' ||
104
+ (chipMode === 'use' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" })), chipMode === 'use' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: chipText, overrideBackgroundColorKey: chipOverrideBackgroundColorKey, displayType: "information", overrideTextColorKey: chipOverrideTextColorKey }) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', baseSize: "medium", fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", shapeType: "rectangle" })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, onClick: handleIBtn2Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] })), displayType === 'ibtn_amount3' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn3IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn3IconFillType, iconColorKey: iBtn3IconColorKey, onClick: handleIBtn3Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, onClick: handleIBtn2Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] }))] }), indicatorMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", fillType: "line", size: 20, colorKey: "ui_cpnt_icon_sys_grey_01" })] }))] })] })) })));
95
105
  }
96
106
  var S_BoxItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: ", ";\n width: 100%;\n"], ["\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: ", ";\n width: 100%;\n"])), function (_a) {
97
107
  var theme = _a.theme;
package/dist/src/mobile/components/Chip/Chip.d.ts CHANGED
@@ -3,6 +3,7 @@ import type { PDSIconType, PDSTextType, PDSValueOption, UiColors } from '../../.
3
3
  type DisplayType = 'category_choice' | 'filter_single' | 'filter_multi' | 'removable' | 'label' | 'time' | 'information' | 'information2' | 'information3';
4
4
  export type ChipProps = {
5
5
  displayType?: DisplayType;
6
+ shapeType?: 'rectangle' | 'round';
6
7
  text?: PDSTextType;
7
8
  filterIconMode?: 'none' | 'left';
8
9
  iconFillType?: 'line' | 'fill';
@@ -18,5 +19,5 @@ export type ChipProps = {
18
19
  /** @deprecated id 필드를 대신 사용하세요. */
19
20
  chipId?: string | number;
20
21
  };
21
- export default function Chip({ displayType, text, filterIconMode, iconFillType, iconName, overrideTextColorKey, overrideBackgroundColorKey, value, id, onClickChip, onClickXMarkIcon, activeChipId, chipId }: ChipProps): JSX.Element;
22
+ export default function Chip({ displayType, shapeType, text, filterIconMode, iconFillType, iconName, overrideTextColorKey, overrideBackgroundColorKey, value, id, onClickChip, onClickXMarkIcon, activeChipId, chipId }: ChipProps): JSX.Element;
22
23
  export {};
package/dist/src/mobile/components/Chip/Chip.js CHANGED
@@ -45,7 +45,7 @@ var hybrid_1 = require("../../../hybrid");
45
45
  var Icon_1 = require("../../../hybrid/components/Icon");
46
46
  var TextLabel_1 = require("../TextLabel");
47
47
  function Chip(_a) {
48
- var _b = _a.displayType, displayType = _b === void 0 ? 'filter_single' : _b, text = _a.text, _c = _a.filterIconMode, filterIconMode = _c === void 0 ? 'none' : _c, _d = _a.iconFillType, iconFillType = _d === void 0 ? 'line' : _d, iconName = _a.iconName, overrideTextColorKey = _a.overrideTextColorKey, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, value = _a.value, id = _a.id, onClickChip = _a.onClickChip, onClickXMarkIcon = _a.onClickXMarkIcon, activeChipId = _a.activeChipId, chipId = _a.chipId;
48
+ var _b = _a.displayType, displayType = _b === void 0 ? 'filter_single' : _b, _c = _a.shapeType, shapeType = _c === void 0 ? 'round' : _c, text = _a.text, _d = _a.filterIconMode, filterIconMode = _d === void 0 ? 'none' : _d, _e = _a.iconFillType, iconFillType = _e === void 0 ? 'line' : _e, iconName = _a.iconName, overrideTextColorKey = _a.overrideTextColorKey, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, value = _a.value, id = _a.id, onClickChip = _a.onClickChip, onClickXMarkIcon = _a.onClickXMarkIcon, activeChipId = _a.activeChipId, chipId = _a.chipId;
49
49
  var isActive = (0, react_1.useMemo)(function () {
50
50
  if (activeChipId !== undefined && chipId !== undefined) {
51
51
  return activeChipId === chipId;
@@ -65,31 +65,33 @@ function Chip(_a) {
65
65
  if (onClickXMarkIcon) {
66
66
  onClickXMarkIcon();
67
67
  }
68
+ else
69
+ onClickChip === null || onClickChip === void 0 ? void 0 : onClickChip(e);
68
70
  };
69
71
  var chipType = function () {
70
72
  switch (displayType) {
71
73
  case 'category_choice':
72
- return ((0, jsx_runtime_1.jsxs)(S_CategoryChoiceChip, __assign({ isActive: isActive, onClick: handleClickChip }, { children: [!isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" })] }))] })));
74
+ return ((0, jsx_runtime_1.jsxs)(S_CategoryChoiceChip, __assign({ isActive: isActive, shapeType: shapeType, onClick: handleClickChip }, { children: [!isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(S_XIconWrapper, __assign({ onClick: handleClickXMarkIcon }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" }) }))] }))] })));
73
75
  case 'information':
74
- return ((0, jsx_runtime_1.jsx)(S_InfoChip, __assign({ onClick: handleClickChip, overrideBackgroundColorKey: overrideBackgroundColorKey }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", colorOverride: overrideTextColorKey, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
76
+ return ((0, jsx_runtime_1.jsx)(S_InfoChip, __assign({ onClick: handleClickChip, shapeType: shapeType, overrideBackgroundColorKey: overrideBackgroundColorKey }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", colorOverride: overrideTextColorKey, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
75
77
  case 'label':
76
- return ((0, jsx_runtime_1.jsx)(S_LabelChip, __assign({ onClick: handleClickChip }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
78
+ return ((0, jsx_runtime_1.jsx)(S_LabelChip, __assign({ shapeType: shapeType, onClick: handleClickChip }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
77
79
  case 'time':
78
- return ((0, jsx_runtime_1.jsx)(S_TimeChip, __assign({ onClick: handleClickChip }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
80
+ return ((0, jsx_runtime_1.jsx)(S_TimeChip, __assign({ shapeType: shapeType, onClick: handleClickChip }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
79
81
  case 'removable':
80
- return ((0, jsx_runtime_1.jsxs)(S_RemovableChip, __assign({ onClick: handleClickChip }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), (0, jsx_runtime_1.jsx)(S_XIconWrapper, __assign({ onClick: handleClickXMarkIcon }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 12, iconName: "ic_xmark", fillType: "line", colorKey: "ui_cpnt_chip_fill_icon_inactive" }) }))] })));
82
+ return ((0, jsx_runtime_1.jsxs)(S_RemovableChip, __assign({ shapeType: shapeType, onClick: handleClickChip }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(S_XIconWrapper, __assign({ onClick: handleClickXMarkIcon }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 12, iconName: "ic_xmark", fillType: "line", colorKey: "ui_cpnt_chip_fill_icon_inactive" }) }))] })));
81
83
  case 'information2':
82
- return ((0, jsx_runtime_1.jsxs)(S_Information2, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: "ui_cpnt_icon_usr_brandprimary" }), text && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Bold", singleLineMode: "use", colorTheme: "usrTextBrandPrimary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] }))] }));
84
+ return ((0, jsx_runtime_1.jsxs)(S_Information2, __assign({ shapeType: shapeType }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: "ui_cpnt_icon_usr_brandprimary" }), text && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Bold", singleLineMode: "use", colorTheme: "usrTextBrandPrimary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] }))] })));
83
85
  case 'information3':
84
- return ((0, jsx_runtime_1.jsxs)(S_Information3, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: "ui_cpnt_icon_sys_white" }), text && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] }))] }));
86
+ return ((0, jsx_runtime_1.jsxs)(S_Information3, __assign({ shapeType: shapeType }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: "ui_cpnt_icon_sys_white" }), text && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] }))] })));
85
87
  default:
86
- return ((0, jsx_runtime_1.jsxs)(S_FilterSingleChip, __assign({ isActive: isActive, onClick: handleClickChip }, { children: [filterIconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: isActive ? 'ui_cpnt_chip_fill_icon_active_01' : 'ui_cpnt_chip_line_icon_02' }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] })));
88
+ return ((0, jsx_runtime_1.jsxs)(S_FilterSingleChip, __assign({ isActive: isActive, shapeType: shapeType, onClick: handleClickChip }, { children: [filterIconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: isActive ? 'ui_cpnt_chip_fill_icon_active_01' : 'ui_cpnt_chip_line_icon_02' }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] })));
87
89
  }
88
90
  };
89
91
  return ((0, jsx_runtime_1.jsx)(S_ChipWrapper, __assign({ "x-pds-name": "Chip", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, { children: chipType() })));
90
92
  }
91
93
  exports.default = Chip;
92
- var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 20px;\n box-sizing: border-box;\n display: flex;\n height: 40px;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n\n ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: 20px;\n box-sizing: border-box;\n display: flex;\n height: 40px;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n\n ", ";\n"])), function (_a) {
94
+ var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n height: 40px;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n ", ";\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n\n ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n height: 40px;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n ", ";\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n\n ", ";\n"])), function (_a) {
93
95
  var theme = _a.theme, isActive = _a.isActive;
94
96
  return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : '';
95
97
  }, function (_a) {
@@ -98,15 +100,21 @@ var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (
98
100
  }, function (_a) {
99
101
  var theme = _a.theme;
100
102
  return theme.spacing.spacingD;
103
+ }, function (_a) {
104
+ var shapeType = _a.shapeType;
105
+ return shapeType && { rectangle: '', round: 'border-radius: 20px' }[shapeType];
101
106
  }, function (_a) {
102
107
  var theme = _a.theme, isActive = _a.isActive;
103
108
  return isActive ? '' : "border: 1px solid ".concat(theme.ui_cpnt_chip_line_border_01);
104
109
  });
105
- var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"])), function (_a) {
110
+ var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n ", ";\n\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"], ["\n align-items: center;\n background-color: ", ";\n ", ";\n\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"])), function (_a) {
106
111
  var theme = _a.theme, overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
107
112
  return overrideBackgroundColorKey
108
113
  ? theme[overrideBackgroundColorKey]
109
114
  : theme.ui_cpnt_chip_fill_base_inactive;
115
+ }, function (_a) {
116
+ var shapeType = _a.shapeType;
117
+ return shapeType && { rectangle: '', round: 'border-radius: 12px' }[shapeType];
110
118
  }, function (_a) {
111
119
  var theme = _a.theme;
112
120
  return theme.spacing.spacingC;
@@ -114,9 +122,12 @@ var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateO
114
122
  var theme = _a.theme;
115
123
  return theme.spacing.spacingC;
116
124
  });
117
- var S_RemovableChip = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n display: flex;\n height: 32px;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n display: flex;\n height: 32px;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])), function (_a) {
125
+ var S_RemovableChip = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n ", ";\n\n box-sizing: border-box;\n display: flex;\n height: 32px;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n align-items: center;\n background-color: ", ";\n ", ";\n\n box-sizing: border-box;\n display: flex;\n height: 32px;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])), function (_a) {
118
126
  var theme = _a.theme;
119
127
  return theme.ui_cpnt_chip_fill_base_inactive;
128
+ }, function (_a) {
129
+ var shapeType = _a.shapeType;
130
+ return shapeType && { rectangle: '', round: 'border-radius: 16px' }[shapeType];
120
131
  }, function (_a) {
121
132
  var theme = _a.theme;
122
133
  return theme.spacing.spacingC;
@@ -124,13 +135,13 @@ var S_RemovableChip = styled_components_1.default.div(templateObject_3 || (templ
124
135
  var theme = _a.theme;
125
136
  return theme.spacing.spacingC;
126
137
  });
127
- var S_XIconWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-left: ", ";\n"], ["\n margin-left: ", ";\n"])), function (_a) {
128
- var theme = _a.theme;
129
- return theme.spacing.spacingB;
130
- });
131
- var S_FilterSingleChip = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n display: flex;\n height: 32px;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n display: flex;\n height: 32px;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])), function (_a) {
138
+ var S_XIconWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n justify-content: center;\n"], ["\n align-items: center;\n display: flex;\n justify-content: center;\n"])));
139
+ var S_FilterSingleChip = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n ", ";\n\n box-sizing: border-box;\n display: flex;\n height: 32px;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n align-items: center;\n background-color: ", ";\n ", ";\n\n box-sizing: border-box;\n display: flex;\n height: 32px;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])), function (_a) {
132
140
  var theme = _a.theme, isActive = _a.isActive;
133
141
  return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : theme.ui_cpnt_chip_fill_base_inactive;
142
+ }, function (_a) {
143
+ var shapeType = _a.shapeType;
144
+ return shapeType && { rectangle: '', round: 'border-radius: 16px' }[shapeType];
134
145
  }, function (_a) {
135
146
  var theme = _a.theme;
136
147
  return theme.spacing.spacingC;
@@ -138,40 +149,52 @@ var S_FilterSingleChip = styled_components_1.default.div(templateObject_5 || (te
138
149
  var theme = _a.theme;
139
150
  return theme.spacing.spacingC;
140
151
  });
141
- var S_LabelChip = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: center;\n border: 1px solid ", ";\n border-radius: 10px;\n box-sizing: border-box;\n display: flex;\n height: 20px;\n justify-content: center;\n padding: 0 ", ";\n\n & > div {\n height: 20px;\n line-height: 20px;\n }\n"], ["\n align-items: center;\n border: 1px solid ", ";\n border-radius: 10px;\n box-sizing: border-box;\n display: flex;\n height: 20px;\n justify-content: center;\n padding: 0 ", ";\n\n & > div {\n height: 20px;\n line-height: 20px;\n }\n"])), function (_a) {
152
+ var S_LabelChip = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: center;\n border: 1px solid ", ";\n ", ";\n\n box-sizing: border-box;\n display: flex;\n height: 20px;\n justify-content: center;\n padding: 0 ", ";\n\n & > div {\n height: 20px;\n line-height: 20px;\n }\n"], ["\n align-items: center;\n border: 1px solid ", ";\n ", ";\n\n box-sizing: border-box;\n display: flex;\n height: 20px;\n justify-content: center;\n padding: 0 ", ";\n\n & > div {\n height: 20px;\n line-height: 20px;\n }\n"])), function (_a) {
142
153
  var theme = _a.theme;
143
154
  return theme.ui_cpnt_chip_line_border_01;
155
+ }, function (_a) {
156
+ var shapeType = _a.shapeType;
157
+ return shapeType && { rectangle: '', round: 'border-radius: 10px' }[shapeType];
144
158
  }, function (_a) {
145
159
  var theme = _a.theme;
146
160
  return theme.spacing.spacingB;
147
161
  });
148
- var S_TimeChip = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 10px;\n box-sizing: border-box;\n display: flex;\n height: 20px;\n justify-content: center;\n padding: 0 ", ";\n\n & > div {\n height: 20px;\n line-height: 20px;\n }\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: 10px;\n box-sizing: border-box;\n display: flex;\n height: 20px;\n justify-content: center;\n padding: 0 ", ";\n\n & > div {\n height: 20px;\n line-height: 20px;\n }\n"])), function (_a) {
162
+ var S_TimeChip = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n ", ";\n\n box-sizing: border-box;\n display: flex;\n height: 20px;\n justify-content: center;\n padding: 0 ", ";\n\n & > div {\n height: 20px;\n line-height: 20px;\n }\n"], ["\n align-items: center;\n background-color: ", ";\n ", ";\n\n box-sizing: border-box;\n display: flex;\n height: 20px;\n justify-content: center;\n padding: 0 ", ";\n\n & > div {\n height: 20px;\n line-height: 20px;\n }\n"])), function (_a) {
149
163
  var theme = _a.theme;
150
164
  return theme.ui_cpnt_chip_base_playtime;
165
+ }, function (_a) {
166
+ var shapeType = _a.shapeType;
167
+ return shapeType && { rectangle: '', round: 'border-radius: 10px' }[shapeType];
151
168
  }, function (_a) {
152
169
  var theme = _a.theme;
153
170
  return theme.spacing.spacingB;
154
171
  });
155
- var informationBase = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-items: center;\n border: 1px solid transparent;\n border-radius: 16px;\n box-sizing: border-box;\n display: flex;\n height: 32px;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n align-items: center;\n border: 1px solid transparent;\n border-radius: 16px;\n box-sizing: border-box;\n display: flex;\n height: 32px;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])), function (_a) {
172
+ var informationBase = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-items: center;\n border: 1px solid transparent;\n box-sizing: border-box;\n display: flex;\n height: 32px;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n align-items: center;\n border: 1px solid transparent;\n box-sizing: border-box;\n display: flex;\n height: 32px;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])), function (_a) {
156
173
  var theme = _a.theme;
157
174
  return theme.spacing.spacingB;
158
175
  }, function (_a) {
159
176
  var theme = _a.theme;
160
177
  return theme.spacing.spacingB;
161
178
  });
162
- var S_Information2 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", ";\n\n background-color: ", ";\n border: 1px solid ", ";\n"], ["\n ", ";\n\n background-color: ", ";\n border: 1px solid ", ";\n"])), informationBase, function (_a) {
179
+ var S_Information2 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", ";\n\n background-color: ", ";\n border: 1px solid ", ";\n ", ";\n"], ["\n ", ";\n\n background-color: ", ";\n border: 1px solid ", ";\n ", ";\n"])), informationBase, function (_a) {
163
180
  var theme = _a.theme;
164
181
  return theme.ui_67;
165
182
  }, function (_a) {
166
183
  var theme = _a.theme;
167
184
  return theme.ui_140;
185
+ }, function (_a) {
186
+ var shapeType = _a.shapeType;
187
+ return shapeType && { rectangle: '', round: 'border-radius: 16px' }[shapeType];
168
188
  });
169
- var S_Information3 = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", ";\n\n background-color: ", ";\n border: 1px solid ", ";\n"], ["\n ", ";\n\n background-color: ", ";\n border: 1px solid ", ";\n"])), informationBase, function (_a) {
189
+ var S_Information3 = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", ";\n\n background-color: ", ";\n border: 1px solid ", ";\n ", ";\n"], ["\n ", ";\n\n background-color: ", ";\n border: 1px solid ", ";\n ", ";\n"])), informationBase, function (_a) {
170
190
  var theme = _a.theme;
171
191
  return theme.ui_37;
172
192
  }, function (_a) {
173
193
  var theme = _a.theme;
174
194
  return theme.ui_67;
195
+ }, function (_a) {
196
+ var shapeType = _a.shapeType;
197
+ return shapeType && { rectangle: '', round: 'border-radius: 16px' }[shapeType];
175
198
  });
176
199
  var S_ChipWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: inline-block;\n min-width: fit-content;\n vertical-align: bottom;\n"], ["\n display: inline-block;\n min-width: fit-content;\n vertical-align: bottom;\n"])));
177
200
  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/MobileTabBar/MobileTabBar.d.ts CHANGED
@@ -10,8 +10,10 @@ type MobileTabBarProps = {
10
10
  /** @description styleTheme이 'main'일 때만 colorTheme이 존재합니다. */
11
11
  colorTheme?: MobileTabBarColorThemeType;
12
12
  styleTheme?: 'main' | 'content';
13
+ /** @description 활성화 된 탭으로 자동 스크롤 되는 기능을 사용할지 여부입니다. 기본값: none */
14
+ autoScrollMode?: 'use' | 'none';
13
15
  /** @deprecated v1.5 해당 필드 대신 itemArray를 사용하세요. */
14
16
  textArray?: TextObj[];
15
17
  };
16
- declare function MobileTabBar({ itemArray, colorTheme, styleTheme, textArray }: MobileTabBarProps): JSX.Element;
18
+ declare function MobileTabBar({ itemArray, colorTheme, styleTheme, autoScrollMode, textArray }: MobileTabBarProps): JSX.Element;
17
19
  export default MobileTabBar;
package/dist/src/mobile/components/MobileTabBar/MobileTabBar.js CHANGED
@@ -19,6 +19,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
19
19
  };
20
20
  Object.defineProperty(exports, "__esModule", { value: true });
21
21
  var jsx_runtime_1 = require("react/jsx-runtime");
22
+ var react_1 = require("react");
22
23
  var react_router_dom_1 = require("react-router-dom");
23
24
  var styled_components_1 = __importDefault(require("styled-components"));
24
25
  var TextLabel_1 = require("../TextLabel");
@@ -39,9 +40,19 @@ var mobileTabBarThemes = {
39
40
  }
40
41
  };
41
42
  function MobileTabBar(_a) {
42
- var itemArray = _a.itemArray, _b = _a.colorTheme, colorTheme = _b === void 0 ? 'none' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'main' : _c, textArray = _a.textArray;
43
+ var itemArray = _a.itemArray, _b = _a.colorTheme, colorTheme = _b === void 0 ? 'none' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'main' : _c, _d = _a.autoScrollMode, autoScrollMode = _d === void 0 ? 'none' : _d, textArray = _a.textArray;
43
44
  var history = (0, react_router_dom_1.useHistory)();
44
45
  var pathname = (0, react_router_dom_1.useLocation)().pathname;
46
+ var currentTabRef = (0, react_1.useRef)(null);
47
+ (0, react_1.useEffect)(function () {
48
+ var _a;
49
+ if (autoScrollMode === 'none')
50
+ return;
51
+ var anyActive = itemArray === null || itemArray === void 0 ? void 0 : itemArray.find(function (item) { return item.isActive; });
52
+ if (currentTabRef && anyActive) {
53
+ (_a = currentTabRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ inline: 'center' });
54
+ }
55
+ }, [itemArray]);
45
56
  if (itemArray) {
46
57
  var hasScroll_1 = styleTheme === 'content' ? true : itemArray.length > 3;
47
58
  var handleClickTabItem_1 = function (item, e) {
@@ -49,7 +60,7 @@ function MobileTabBar(_a) {
49
60
  item.onClick(e);
50
61
  }
51
62
  };
52
- return ((0, jsx_runtime_1.jsx)(S_TabBarContainer, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", styleTheme: styleTheme, hasScroll: hasScroll_1 }, { children: itemArray.map(function (item, index) { return ((0, jsx_runtime_1.jsxs)(S_TabWrapper, __assign({ hasScroll: hasScroll_1, styleTheme: styleTheme, colorTheme: colorTheme, isActive: item.isActive, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: styleTheme === 'main' ? 'body2Bold' : 'caption1Bold', wordBreak: hasScroll_1 ? 'keep_all' : 'normal', colorTheme: styleTheme === 'content'
63
+ return ((0, jsx_runtime_1.jsx)(S_TabBarContainer, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", styleTheme: styleTheme, hasScroll: hasScroll_1 }, { children: itemArray.map(function (item, index) { return ((0, jsx_runtime_1.jsxs)(S_TabWrapper, __assign({ ref: item.isActive ? currentTabRef : null, hasScroll: hasScroll_1, styleTheme: styleTheme, colorTheme: colorTheme, isActive: item.isActive, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: styleTheme === 'main' ? 'body2Bold' : 'caption1Bold', wordBreak: hasScroll_1 ? 'keep_all' : 'normal', colorTheme: styleTheme === 'content'
53
64
  ? item.isActive
54
65
  ? mobileTabBarThemes.content.activeTextColor
55
66
  : mobileTabBarThemes.content.inActiveTextColor
package/dist/src/mobile/components/ReactionButton/ReactionButton.js CHANGED
@@ -97,7 +97,7 @@ function ReactionButton(_a) {
97
97
  return value;
98
98
  return (0, numberHelper_1.formatCompactNumber)(value);
99
99
  };
100
- return ((0, jsx_runtime_1.jsxs)(S_ReactionButton, __assign({ "x-pds-name": "ReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", onClick: handleClick, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 20, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }), displayType === 'icon_text' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: convertTextFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() })] })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })));
100
+ return ((0, jsx_runtime_1.jsxs)(S_ReactionButton, __assign({ "x-pds-name": "ReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", type: "button", onClick: handleClick, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 20, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }), displayType === 'icon_text' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: convertTextFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() })] })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })));
101
101
  }
102
102
  var ReactionButtonStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n height: 32px;\n justify-content: center;\n padding: 0;\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n height: 32px;\n justify-content: center;\n padding: 0;\n"])));
103
103
  var S_ReactionButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), ReactionButtonStyle);
package/dist/src/mobile/components/Select/Select.d.ts CHANGED
@@ -4,6 +4,7 @@ import type { SelectHTMLAttributes } from 'react';
4
4
  type SelectOption = {
5
5
  text: string;
6
6
  value: SelectHTMLAttributes<HTMLSelectElement>['value'];
7
+ state?: 'normal' | 'disabled';
7
8
  };
8
9
  type SelectProps = {
9
10
  name?: Path<IFormValues>;
package/dist/src/mobile/components/Select/Select.js CHANGED
@@ -87,7 +87,7 @@ function Select(_a) {
87
87
  }
88
88
  return 'ui_cpnt_select_icon_01';
89
89
  };
90
- return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "mobile", "$size": size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsxs)(S_SelectWrapper, { children: [(0, jsx_runtime_1.jsx)(S_Icon_Wrapper, __assign({ state: state }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() }) })), (0, jsx_runtime_1.jsxs)(S_Select, __assign({}, register, { disabled: state === 'disabled' || state === 'read_only', state: state, isError: isError, "$size": size, colorTheme: colorTheme, onChange: handleChange, onBlur: handleBlur, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : '', value: value || undefined }, { children: [hintText && ((0, jsx_runtime_1.jsx)("option", __assign({ disabled: true, value: "" }, { children: hintText }))), valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: el.value }, { children: el.text }), el.value)); })] }))] }), name &&
90
+ return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "mobile", "$size": size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsxs)(S_SelectWrapper, { children: [(0, jsx_runtime_1.jsx)(S_Icon_Wrapper, __assign({ state: state }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() }) })), (0, jsx_runtime_1.jsxs)(S_Select, __assign({}, register, { disabled: state === 'disabled' || state === 'read_only', state: state, isError: isError, "$size": size, colorTheme: colorTheme, onChange: handleChange, onBlur: handleBlur, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : '', value: value || undefined }, { children: [hintText && ((0, jsx_runtime_1.jsx)("option", __assign({ disabled: true, value: "" }, { children: hintText }))), valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: el.value, disabled: el.state === 'disabled' }, { children: el.text }), el.value)); })] }))] }), name &&
91
91
  ((_c = (0, types_1.getErrorByName)(formContext.formState.errors, name)) === null || _c === void 0 ? void 0 : _c.message) &&
92
92
  state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, __assign({ colorTheme: colorTheme }, { children: (0, types_1.getErrorByName)(formContext.formState.errors, name).message })))] })));
93
93
  }
package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.js CHANGED
@@ -158,7 +158,7 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props) {
158
158
  paddingRight: padding.right,
159
159
  paddingLeft: padding.left,
160
160
  width: '100%',
161
- height: ccbCode === types_1.CB_ALL_CODES.CB_CONTENTSCAROUSEL ? 'auto' : '100%'
161
+ height: HEIGHT_AUTO_CODES.includes(ccbCode) ? 'auto' : '100%'
162
162
  } }, { children: (0, jsx_runtime_1.jsx)(GridContainer, __assign({ className: "composition-container", "data-cols": cols, "data-rows": rows, "data-row-height": rowHeight, "data-col-width": "10px", ref: containerRef, cols: cols, rowHeight: rowHeight, sectionRow: rows, "data-wrapper-paddingT": padding.top, "data-wrapper-paddingB": padding.bottom, "data-wrapper-paddingL": padding.left, "data-wrapper-paddingR": padding.right, style: {
163
163
  width: customSectionStyles.width,
164
164
  maxWidth: customSectionStyles.maxWidth
@@ -166,5 +166,6 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props) {
166
166
  });
167
167
  var GridContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: grid; /* Space between grid items */\n gap: 10px;\n grid-auto-rows: minmax(", ", auto);\n grid-template-columns: repeat(", ", 1fr);\n grid-template-rows: repeat(\n ", ",\n minmax(", ", auto)\n );\n /* height: 100%; */\n padding: 10px 10px;\n width: 100%;\n\n * {\n box-sizing: border-box;\n }\n"], ["\n display: grid; /* Space between grid items */\n gap: 10px;\n grid-auto-rows: minmax(", ", auto);\n grid-template-columns: repeat(", ", 1fr);\n grid-template-rows: repeat(\n ", ",\n minmax(", ", auto)\n );\n /* height: 100%; */\n padding: 10px 10px;\n width: 100%;\n\n * {\n box-sizing: border-box;\n }\n"])), function (props) { return "".concat(props.rowHeight, "px"); }, function (props) { return props.cols; }, function (props) { return props.sectionRow; }, function (props) { return "".concat(props.rowHeight, "px"); });
168
168
  var S_COMPOSITIONWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
169
+ var HEIGHT_AUTO_CODES = [types_1.CB_ALL_CODES.CB_CONTENTSCAROUSEL, types_1.CB_ALL_CODES.CB_LIST];
169
170
  exports.default = react_1.default.memo(Composition);
170
171
  var templateObject_1, templateObject_2;