pds-dev-kit-web 1.4.3 → 1.4.4

package/dist/src/desktop/components/AdminList/BulkActionBar.js

@@ -37,13 +37,13 @@ function BulkActionBar(_a) {
                 react_1.default.createElement(Dropdown_1.Dropdown, { valueArray: dropdown3ValueArray, defaultValue: dropdown3DefaultText, onChange: onChangeDropdown3, size: "small", colorTheme: "dark" }))))),
         tBtnMode !== 'none' && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-            react_1.default.createElement(TextButton_1.TextButton, { size: "small", text: tBtn1Text, onClick: onClickTBtn1, colorTheme: "grey_01" }),
+            react_1.default.createElement(TextButton_1.TextButton, { size: "small", text: tBtn1Text, onClick: onClickTBtn1, colorTheme: "white" }),
             (tBtnMode === 'tbtn_amount2' || tBtnMode === 'tbtn_amount3') && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-                react_1.default.createElement(TextButton_1.TextButton, { size: "small", text: tBtn2Text, onClick: onClickTBtn2, colorTheme: "grey_01" }))),
+                react_1.default.createElement(TextButton_1.TextButton, { size: "small", text: tBtn2Text, onClick: onClickTBtn2, colorTheme: "white" }))),
             tBtnMode === 'tbtn_amount3' && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-                react_1.default.createElement(TextButton_1.TextButton, { size: "small", text: tBtn3Text, onClick: onClickTBtn3, colorTheme: "grey_01" }))))),
+                react_1.default.createElement(TextButton_1.TextButton, { size: "small", text: tBtn3Text, onClick: onClickTBtn3, colorTheme: "white" }))))),
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_e", spacingType: "width" })));
 }
 var S_BulkActionBar = 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: 56px;\n  min-height: 56px;\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 56px;\n  min-height: 56px;\n"])), function (_a) {

package/dist/src/desktop/components/HorizontalFormGroup/HorizontalFormGroup.js

@@ -28,21 +28,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
+var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function HorizontalFormGroup(_a) {
     var labelText = _a.labelText, captionText = _a.captionText, inputForm = _a.inputForm, _b = _a.labelAlignType, labelAlignType = _b === void 0 ? 'center' : _b, labelTopSpacing = _a.labelTopSpacing;
     return (react_1.default.createElement(S_HorizontalFormGroupBox, { labelAlignType: labelAlignType },
         react_1.default.createElement(S_LabelWrapper, { labelAlignType: labelAlignType, labelTopSpacing: labelTopSpacing }, labelAlignType === 'center' ? (react_1.default.createElement(TextLabel_1.TextLabel, { text: labelText, styleTheme: "body2Bold", ellipsisMode: "use", lineLimit: 2 })) : (react_1.default.createElement(TextLabel_1.TextLabel, { text: labelText, styleTheme: "body2Bold" }))),
         react_1.default.createElement(S_InputFormWrapper, null, inputForm),
-        react_1.default.createElement(S_CaptionWrapper, null,
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular" }))));
+        captionText && (react_1.default.createElement(S_CaptionWrapper, null,
+            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b" }),
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular" })))));
 }
 var centerArea = "\n'label inputForm'\n'.     caption'";
 var topArea = "\n'label inputForm'\n'label caption'";
 var small = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-top: 5px;\n"], ["\n  margin-top: 5px;\n"])));
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: 10px;\n"], ["\n  margin-top: 10px;\n"])));
 var large = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: 14px;\n"], ["\n  margin-top: 14px;\n"])));
-var S_HorizontalFormGroupBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: grid;\n  gap: ", ";\n  grid-template-columns: 112px max-content;\n  grid-template-rows: auto 1fr;\n  grid-template-areas: ", ";\n"], ["\n  display: grid;\n  gap: ", ";\n  grid-template-columns: 112px max-content;\n  grid-template-rows: auto 1fr;\n  grid-template-areas: ", ";\n"])), function (_a) {
+var S_HorizontalFormGroupBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: grid;\n  grid-column-gap: ", ";\n  grid-template-columns: 112px auto;\n  grid-template-rows: auto 1fr;\n  grid-template-areas: ", ";\n"], ["\n  display: grid;\n  grid-column-gap: ", ";\n  grid-template-columns: 112px auto;\n  grid-template-rows: auto 1fr;\n  grid-template-areas: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, function (_a) {

package/dist/src/desktop/components/TextButton/TextButton.d.ts

@@ -7,7 +7,7 @@ export declare type TextButtonProps = {
     fontWeight?: 'bold' | 'regular';
     type?: 'submit' | 'reset' | 'button';
     state?: 'normal' | 'disabled';
-    colorTheme?: 'none' | 'red' | 'grey_01';
+    colorTheme?: 'none' | 'red' | 'grey_01' | 'white';
     onClick?: (...args: any) => any;
 };
 declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, colorTheme, onClick, ...rest }: TextButtonProps): JSX.Element;

package/dist/src/desktop/components/TextButton/TextButton.js

@@ -61,7 +61,8 @@ var textStyle = {
 var textColor = {
     none: 'usrTextBrandPrimary',
     red: 'sysTextError',
-    grey_01: 'sysTextPrimary'
+    grey_01: 'sysTextPrimary',
+    white: 'sysTextWhite'
 };
 function TextButton(_a) {
     var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, onClick = _a.onClick, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "colorTheme", "onClick"]);

package/dist/src/desktop/components/UploadTextButton/UploadTextButton.d.ts

@@ -6,7 +6,7 @@ declare type UploadTextButtonProps = {
     responsiveMode?: 'none' | 'use';
     fontWeight?: 'bold' | 'regular';
     state?: 'normal' | 'disabled';
-    colorTheme?: 'none' | 'red' | 'grey_01';
+    colorTheme?: 'none' | 'red' | 'grey_01' | 'white';
     accept?: string;
     multipleMode?: 'none' | 'use';
     onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;

package/dist/src/desktop/components/UploadTextButton/UploadTextButton.js

@@ -39,7 +39,8 @@ var textStyle = {
 var textColor = {
     none: 'usrTextBrandPrimary',
     red: 'sysTextError',
-    grey_01: 'sysTextPrimary'
+    grey_01: 'sysTextPrimary',
+    white: 'sysTextWhite'
 };
 function UploadTextButton(_a) {
     var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.state, state = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e, _f = _a.accept, accept = _f === void 0 ? '*' : _f, _g = _a.multipleMode, multipleMode = _g === void 0 ? 'none' : _g, onClick = _a.onClick;

package/dist/src/desktop/panels/DesktopHeadlessModal/DesktopHeadlessModal.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-declare type DesktopBasicModalProps = {
+declare type DesktopHeadlessModalProps = {
     body: React.ReactNode;
     size?: 'large' | 'medium' | 'small' | 'rlarge';
     dimmedClickCloseMode?: 'use' | 'none';
     scrollVisibleType?: 'hidden' | 'moving' | 'visible';
     onClose?: () => void;
 };
-declare function DesktopBasicModal({ body, size, dimmedClickCloseMode, scrollVisibleType, onClose }: DesktopBasicModalProps): React.ReactPortal;
-export default DesktopBasicModal;
+declare function DesktopHeadlessModal({ body, size, dimmedClickCloseMode, scrollVisibleType, onClose }: DesktopHeadlessModalProps): React.ReactPortal;
+export default DesktopHeadlessModal;

package/dist/src/desktop/panels/DesktopHeadlessModal/DesktopHeadlessModal.js

@@ -29,11 +29,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
 var styled_components_1 = __importStar(require("styled-components"));
-function DesktopBasicModal(_a) {
+function DesktopHeadlessModal(_a) {
     var body = _a.body, _b = _a.size, size = _b === void 0 ? 'rlarge' : _b, _c = _a.dimmedClickCloseMode, dimmedClickCloseMode = _c === void 0 ? 'none' : _c, _d = _a.scrollVisibleType, scrollVisibleType = _d === void 0 ? 'hidden' : _d, onClose = _a.onClose;
     var container = (0, react_1.useState)(function () {
         var modalRoot = document.createElement('div');
-        modalRoot.setAttribute('id', 'DesktopBasicModal');
+        modalRoot.setAttribute('id', 'DesktopHeadlessModal');
         return modalRoot;
     })[0];
     var targetRef = (0, react_1.useRef)(null);
@@ -117,5 +117,5 @@ var S_Body = styled_components_1.default.div(templateObject_5 || (templateObject
     var scrollVisibleType = _a.scrollVisibleType;
     return scrollVisibleType === 'moving' && scrollVisible;
 });
-exports.default = DesktopBasicModal;
+exports.default = DesktopHeadlessModal;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/src/hybrid/components/Switch/Switch.d.ts

@@ -2,8 +2,9 @@
 declare type SwitchProps = {
     status?: 'off' | 'on';
     state?: 'normal' | 'disabled';
-    name: string;
     onClick?: (status: boolean) => void;
+    /** @deprecated v1.6 react-hook-form을 사용하지 않아 불필요합니다. */
+    name?: string;
 };
-declare function Switch({ status, state, name, onClick }: SwitchProps): JSX.Element;
+declare function Switch({ status, state, onClick, name }: SwitchProps): JSX.Element;
 export default Switch;

package/dist/src/hybrid/components/Switch/Switch.js

@@ -3,48 +3,19 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 function Switch(_a) {
-    var _b = _a.status, status = _b === void 0 ? 'off' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, name = _a.name, onClick = _a.onClick;
-    var _d = (0, react_1.useState)(false), checked = _d[0], setChecked = _d[1];
+    var _b = _a.status, status = _b === void 0 ? 'off' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, onClick = _a.onClick, _d = _a.name, name = _d === void 0 ? 'switch' : _d;
     var handleChange = function (e) {
-        setChecked(e.target.checked);
         onClick && onClick(e.target.checked);
     };
-    (0, react_1.useEffect)(function () {
-        if (status === 'off') {
-            setChecked(false);
-        }
-        if (status === 'on') {
-            setChecked(true);
-        }
-    }, [status]);
     return (react_1.default.createElement(S_Switch, null,
-        react_1.default.createElement(S_Input, { type: "checkbox", hidden: true, id: name, checked: checked, disabled: state === 'disabled', onChange: handleChange }),
+        react_1.default.createElement(S_Input, { type: "checkbox", hidden: true, id: name, checked: status === 'on', disabled: state === 'disabled', onChange: handleChange }),
         react_1.default.createElement(S_Label, { htmlFor: name, disabled: state === 'disabled' })));
 }
 var S_Switch = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 56px;\n  height: 32px;\n"], ["\n  position: relative;\n  width: 56px;\n  height: 32px;\n"])));

package/dist/src/mobile/components/HorizontalFormGroup/HorizontalFormGroup.js

@@ -28,21 +28,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
+var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function HorizontalFormGroup(_a) {
     var labelText = _a.labelText, captionText = _a.captionText, inputForm = _a.inputForm, _b = _a.labelAlignType, labelAlignType = _b === void 0 ? 'center' : _b, labelTopSpacing = _a.labelTopSpacing;
     return (react_1.default.createElement(S_HorizontalFormGroupBox, { labelAlignType: labelAlignType },
         react_1.default.createElement(S_LabelWrapper, { labelAlignType: labelAlignType, labelTopSpacing: labelTopSpacing }, labelAlignType === 'center' ? (react_1.default.createElement(TextLabel_1.TextLabel, { text: labelText, styleTheme: "body2Bold", ellipsisMode: "use", lineLimit: 2 })) : (react_1.default.createElement(TextLabel_1.TextLabel, { text: labelText, styleTheme: "body2Bold" }))),
         react_1.default.createElement(S_InputFormWrapper, null, inputForm),
-        react_1.default.createElement(S_CaptionWrapper, null,
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular" }))));
+        captionText && (react_1.default.createElement(S_CaptionWrapper, null,
+            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b" }),
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular" })))));
 }
 var centerArea = "\n'label inputForm'\n'.     caption'";
 var topArea = "\n'label inputForm'\n'label caption'";
 var small = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-top: 5px;\n"], ["\n  margin-top: 5px;\n"])));
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: 10px;\n"], ["\n  margin-top: 10px;\n"])));
 var large = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: 14px;\n"], ["\n  margin-top: 14px;\n"])));
-var S_HorizontalFormGroupBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: grid;\n  gap: ", ";\n  grid-template-columns: 112px max-content;\n  grid-template-rows: auto 1fr;\n  grid-template-areas: ", ";\n"], ["\n  display: grid;\n  gap: ", ";\n  grid-template-columns: 112px max-content;\n  grid-template-rows: auto 1fr;\n  grid-template-areas: ", ";\n"])), function (_a) {
+var S_HorizontalFormGroupBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: grid;\n  grid-column-gap: ", ";\n  grid-template-columns: 112px auto;\n  grid-template-rows: auto 1fr;\n  grid-template-areas: ", ";\n"], ["\n  display: grid;\n  grid-column-gap: ", ";\n  grid-template-columns: 112px auto;\n  grid-template-rows: auto 1fr;\n  grid-template-areas: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, function (_a) {

package/dist/src/mobile/components/TextButton/TextButton.d.ts

@@ -7,7 +7,7 @@ export declare type TextButtonProps = {
     fontWeight?: 'bold' | 'regular';
     type?: 'submit' | 'reset' | 'button';
     state?: 'normal' | 'disabled';
-    colorTheme?: 'none' | 'red' | 'grey_01';
+    colorTheme?: 'none' | 'red' | 'grey_01' | 'white';
     onClick?: (...args: any) => any;
 };
 declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, colorTheme, onClick, ...rest }: TextButtonProps): JSX.Element;

package/dist/src/mobile/components/TextButton/TextButton.js

@@ -61,7 +61,8 @@ var textStyle = {
 var textColor = {
     none: 'usrTextBrandPrimary',
     red: 'sysTextError',
-    grey_01: 'sysTextPrimary'
+    grey_01: 'sysTextPrimary',
+    white: 'sysTextWhite'
 };
 function TextButton(_a) {
     var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, onClick = _a.onClick, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "colorTheme", "onClick"]);

package/dist/src/mobile/components/UploadTextButton/UploadTextButton.d.ts

@@ -6,7 +6,7 @@ declare type UploadTextButtonProps = {
     responsiveMode?: 'none' | 'use';
     fontWeight?: 'bold' | 'regular';
     state?: 'normal' | 'disabled';
-    colorTheme?: 'none' | 'red' | 'grey_01';
+    colorTheme?: 'none' | 'red' | 'grey_01' | 'white';
     accept?: string;
     multipleMode?: 'none' | 'use';
     onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;

package/dist/src/mobile/components/UploadTextButton/UploadTextButton.js

@@ -39,7 +39,8 @@ var textStyle = {
 var textColor = {
     none: 'usrTextBrandPrimary',
     red: 'sysTextError',
-    grey_01: 'sysTextPrimary'
+    grey_01: 'sysTextPrimary',
+    white: 'sysTextWhite'
 };
 function UploadTextButton(_a) {
     var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.state, state = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e, _f = _a.accept, accept = _f === void 0 ? '*' : _f, _g = _a.multipleMode, multipleMode = _g === void 0 ? 'none' : _g, onClick = _a.onClick;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,5 +1,14 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v1.4.3]
+## [v1.4.4]
 
 ### Color
-* 컬러 키 값 22.06.07 17시 20분 기준 싱크
+* AdminList
+  * BulkActionBar에서 TextButton의 colorTheme을 white로 적용 (LIGHT톤에서도 항상 흰색으로 보일 수 있도록)
+* HorizontalInputFormGroup
+  * inputForm에 요소가 width: 100%일 경우 정상적으로 영역을 차지하게 수정
+  * captionText가 undefined인 경우 bottom에 영역이 남지 않게 수정
+* Switch
+  * name prop deprecated in 1.6처리 (react-hook-form을 사용하지 않아 불필요합니다.)
+  * status에 따라 올바르게 on/off 되지 않는 이슈 해결
+* TextButton
+  * colorTheme prop에 white value 추가