pds-dev-kit-web-test 0.1.2 → 0.1.4

package/dist/src/sub/AdminList/ToolBar/SearchField.js

@@ -0,0 +1,258 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_hook_form_1 = require("react-hook-form");
+var styled_components_1 = __importStar(require("styled-components"));
+var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
+var components_1 = require("../../../desktop/common/components");
+var components_2 = require("../../../desktop/components");
+var hybrid_1 = require("../../../hybrid");
+function SearchField(_a) {
+    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.responsiveMode, responsiveMode = _b === void 0 ? 'none' : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, customWidth = _a.customWidth, onTarget = _a.onTarget, onClickArrowIBtn = _a.onClickArrowIBtn, onClickSearchIBtn = _a.onClickSearchIBtn;
+    var _d = (0, react_1.useState)(false), isFocused = _d[0], setIsFocused = _d[1];
+    var textFieldBaseRef = (0, react_1.useRef)(null);
+    var _e = (0, react_hook_form_1.useFormContext)(), register = _e.register, getValues = _e.getValues, trigger = _e.trigger;
+    var validateOnBlur = register(name).onBlur;
+    var handleFocus = function () {
+        setIsFocused(true);
+    };
+    var handleArrowIBtnClick = function () {
+        if (onClickArrowIBtn) {
+            onClickArrowIBtn();
+        }
+    };
+    var handleSearchIBtnClick = function () {
+        var searchValue = getValues(name);
+        if (onClickSearchIBtn) {
+            onClickSearchIBtn(searchValue);
+        }
+    };
+    var handleBlur = function (e) {
+        validateOnBlur(e);
+        setIsFocused(false);
+        trigger(name);
+    };
+    var handleTarget = function () {
+        if (onTarget) {
+            onTarget();
+        }
+    };
+    return (react_1.default.createElement(S_SearchFieldBox, { "x-pds-name": "SearchField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth },
+        react_1.default.createElement(S_SearchFieldWrapper, { size: size, textLineType: "single", isFocused: isFocused, state: "normal", colorTheme: "none", responsiveMode: responsiveMode, customWidth: customWidth },
+            react_1.default.createElement(components_2.IconButton, { baseSize: "medium", iconSize: 20, iconName: "ic_arrow_left", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleArrowIBtnClick }),
+            react_1.default.createElement(components_1.TextFieldBase, { inputRef: textFieldBaseRef, name: name, size: size, hintText: hintText, defaultText: defaultText, enterSubmitMode: "use", textLineType: "single", textSize: "form2", textWeight: "normal", textPadding: "0 0 0 8px", deleteIconMode: "use", deleteIconSize: size === 'large' ? 20 : 16, deleteIconColor: "ui_cpnt_button_icon_disabled", isFocused: isFocused, onFocus: handleFocus, onBlur: handleBlur, onTarget: handleTarget, onChange: register('searchField').onChange }),
+            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
+            react_1.default.createElement(components_2.IconButton, { baseSize: "medium", iconSize: 20, iconName: "ic_search", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleSearchIBtnClick }))));
+}
+var S_SearchFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", "\n"], ["\n  ", ";\n  ", ";\n  ", "\n"])), function (_a) {
+    var size = _a.size;
+    return size &&
+        {
+            small: 'width: 188px;',
+            medium: 'width: 188px;',
+            large: 'width: 432px;'
+        }[size];
+}, function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return responsiveMode === 'use' && 'width: 100%';
+}, function (_a) {
+    var customWidth = _a.customWidth;
+    return customWidth && "width: " + customWidth + ";";
+});
+var multi = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: auto;\n  padding: 14px;\n"], ["\n  height: auto;\n  padding: 14px;\n"])));
+var auto = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: auto;\n  padding-bottom: ", "px;\n  padding-top: ", "px;\n"], ["\n  height: auto;\n  padding-bottom: ", "px;\n  padding-top: ", "px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return (46 -
+        Number(theme.desktopFontSize.form2.substring(0, 2)) * Number(theme.desktopLineHeight.form2)) /
+        2;
+}, function (_a) {
+    var theme = _a.theme;
+    return (46 -
+        Number(theme.desktopFontSize.form2.substring(0, 2)) * Number(theme.desktopLineHeight.form2)) /
+        2;
+});
+var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n  padding-right: ", ";\n  width: 188px;\n"], ["\n  border-radius: 10px;\n  height: 32px;\n  padding-right: ", ";\n  width: 188px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
+var medium = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 40px;\n  padding-right: ", ";\n  width: 188px;\n"], ["\n  height: 40px;\n  padding-right: ", ";\n  width: 188px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
+var large = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 48px;\n  padding-right: ", ";\n  width: 432px;\n  ", "\n  ", "\n"], ["\n  height: 48px;\n  padding-right: ", ";\n  width: 432px;\n  ", "\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+}, function (_a) {
+    var textLineType = _a.textLineType;
+    return textLineType === 'multi' && multi;
+}, function (_a) {
+    var textLineType = _a.textLineType;
+    return textLineType === 'auto' && auto;
+});
+var normal = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 2px\n    ", ";\n"], ["\n  background-color: ", ";\n  border: solid 2px\n    ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_base_normal;
+}, function (_a) {
+    var theme = _a.theme, isError = _a.isError, isFocused = _a.isFocused;
+    if (isError)
+        return theme.ui_cpnt_textfield_border_error;
+    if (isFocused)
+        return theme.ui_cpnt_textfield_border_focus;
+    return theme.ui_cpnt_textfield_border_normal;
+});
+var read_only = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 2px ", ";\n"], ["\n  background-color: ", ";\n  border: solid 2px ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_base_disabled;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_border_disabled;
+});
+var disabled = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 2px ", ";\n"], ["\n  background-color: ", ";\n  border: solid 2px ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_base_disabled;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_border_disabled;
+});
+var dark_normal = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 2px\n    ", ";\n"], ["\n  background-color: ", ";\n  border: solid 2px\n    ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_base_darktheme_normal;
+}, function (_a) {
+    var theme = _a.theme, isError = _a.isError, isFocused = _a.isFocused;
+    if (isError)
+        return theme.ui_cpnt_textfield_border_darktheme_error;
+    if (isFocused)
+        return theme.ui_cpnt_textfield_border_darktheme_focus;
+    return theme.ui_cpnt_textfield_border_darktheme_normal;
+});
+var dark_read_only = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 2px ", ";\n"], ["\n  background-color: ", ";\n  border: solid 2px ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_base_darktheme_disabled;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_border_darktheme_normal;
+});
+var dark_disabled = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 2px ", ";\n"], ["\n  background-color: ", ";\n  border: solid 2px ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_base_darktheme_disabled;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_border_darktheme_normal;
+});
+var transparent_normal = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 2px\n    ", ";\n"], ["\n  background-color: ", ";\n  border: solid 2px\n    ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_base_colortheme_transparent_normal;
+}, function (_a) {
+    var theme = _a.theme, isError = _a.isError, isFocused = _a.isFocused;
+    if (isError)
+        return theme.ui_cpnt_textfield_border_colortheme_transparent_error;
+    if (isFocused)
+        return theme.ui_cpnt_textfield_border_colortheme_transparent_focus;
+    return theme.ui_cpnt_textfield_border_colortheme_transparent_normal;
+});
+var transparent_read_only = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 2px ", ";\n"], ["\n  background-color: ", ";\n  border: solid 2px ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_base_colortheme_transparent_readonly;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_border_colortheme_transparent_readonly;
+});
+var transparent_disabled = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 2px ", ";\n"], ["\n  background-color: ", ";\n  border: solid 2px ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_base_colortheme_transparent_disabled;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_border_colortheme_transparent_disabled;
+});
+var backgroundHoverColor = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+    var colorTheme = _a.colorTheme, theme = _a.theme;
+    switch (colorTheme) {
+        case 'none':
+            return theme.ui_cpnt_textfield_base_hover;
+        case 'dark':
+            return theme.ui_cpnt_textfield_base_hover_darktheme;
+        case 'transparent':
+            return theme.ui_cpnt_textfield_base_hover_transparent;
+        default:
+            return theme.ui_cpnt_textfield_base_hover;
+    }
+});
+var backgroundActiveColor = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+    var colorTheme = _a.colorTheme, theme = _a.theme;
+    switch (colorTheme) {
+        case 'none':
+            return theme.ui_cpnt_textfield_base_pressed;
+        case 'dark':
+            return theme.ui_cpnt_textfield_base_pressed_darktheme;
+        case 'transparent':
+            return theme.ui_cpnt_textfield_base_pressed_transparent;
+        default:
+            return theme.ui_cpnt_textfield_base_pressed;
+    }
+});
+var normalActionColor = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __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"])), backgroundHoverColor, backgroundActiveColor);
+var S_SearchFieldWrapper = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", ";\n  ", "\n"], ["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", ";\n  ", "\n"])), function (_a) {
+    var state = _a.state;
+    return (state === 'disabled' ? 'not-allowed' : 'text');
+}, function (_a) {
+    var size = _a.size;
+    return size &&
+        {
+            small: small,
+            medium: medium,
+            large: large
+        }[size];
+}, function (_a) {
+    var state = _a.state, colorTheme = _a.colorTheme;
+    if (state) {
+        switch (colorTheme) {
+            case 'none': {
+                return { normal: normal, read_only: read_only, disabled: disabled }[state];
+            }
+            case 'dark': {
+                return { normal: dark_normal, read_only: dark_read_only, disabled: dark_disabled }[state];
+            }
+            case 'transparent': {
+                return {
+                    normal: transparent_normal,
+                    read_only: transparent_read_only,
+                    disabled: transparent_disabled
+                }[state];
+            }
+        }
+    }
+}, transitionStyle_1.InputTransition, function (_a) {
+    var state = _a.state;
+    return state === 'normal' && normalActionColor;
+}, function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return responsiveMode === 'use' && 'width: 100%';
+}, function (_a) {
+    var customWidth = _a.customWidth;
+    return customWidth && "width: " + customWidth + ";";
+});
+exports.default = SearchField;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;

package/dist/src/sub/AdminList/ToolBar/ToolBar.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { FillIconNameKeys, LineIconNameKeys, PDSTextType, PDSValueOption } from '../../../common';
+declare type Props = {
+    searchFieldHintText?: PDSTextType;
+    searchFieldDefaultText?: PDSTextType;
+    chipTextArray?: PDSValueOption[];
+    chipValue?: PDSValueOption;
+    searchMode?: 'none' | 'use';
+    chipMode?: 'none' | 'use';
+    iBtnMode?: 'none' | 'iBtn_amount1' | 'iBtn_amount2' | 'iBtn_amount3';
+    iBtn1IconName?: FillIconNameKeys | LineIconNameKeys;
+    iBtn1IconFillType?: 'fill' | 'line';
+    iBtn2IconName?: FillIconNameKeys | LineIconNameKeys;
+    iBtn2IconFillType?: 'fill' | 'line';
+    iBtn3IconName?: FillIconNameKeys | LineIconNameKeys;
+    iBtn3IconFillType?: 'fill' | 'line';
+    onClickChip?: (option: PDSValueOption) => void;
+    onClickSearchFieldResetBtn?: () => void;
+    onClickSearchIBtn?: (value: string) => void;
+    onEnterKeyDown?: (value: string) => void;
+    onClickIBtn1?: () => void;
+    onClickIBtn2?: () => void;
+    onClickIBtn3?: () => void;
+};
+declare function ToolBar({ searchFieldHintText, searchFieldDefaultText, chipTextArray, chipValue, searchMode, chipMode, iBtnMode, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, iBtn3IconName, iBtn3IconFillType, onClickChip, onClickSearchFieldResetBtn, onClickSearchIBtn, onEnterKeyDown, onClickIBtn1, onClickIBtn2, onClickIBtn3 }: Props): JSX.Element;
+export default ToolBar;

package/dist/src/sub/AdminList/ToolBar/ToolBar.js

@@ -0,0 +1,122 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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_hook_form_1 = require("react-hook-form");
+var styled_components_1 = __importDefault(require("styled-components"));
+var common_1 = require("../../../common");
+var components_1 = require("../../../desktop/components");
+var hybrid_1 = require("../../../hybrid");
+var ChipList_1 = __importDefault(require("./ChipList"));
+var SearchField_1 = __importDefault(require("./SearchField"));
+function ToolBar(_a) {
+    var searchFieldHintText = _a.searchFieldHintText, searchFieldDefaultText = _a.searchFieldDefaultText, chipTextArray = _a.chipTextArray, chipValue = _a.chipValue, _b = _a.searchMode, searchMode = _b === void 0 ? 'none' : _b, _c = _a.chipMode, chipMode = _c === void 0 ? 'none' : _c, _d = _a.iBtnMode, iBtnMode = _d === void 0 ? 'none' : _d, iBtn1IconName = _a.iBtn1IconName, _e = _a.iBtn1IconFillType, iBtn1IconFillType = _e === void 0 ? 'line' : _e, iBtn2IconName = _a.iBtn2IconName, _f = _a.iBtn2IconFillType, iBtn2IconFillType = _f === void 0 ? 'line' : _f, iBtn3IconName = _a.iBtn3IconName, _g = _a.iBtn3IconFillType, iBtn3IconFillType = _g === void 0 ? 'line' : _g, onClickChip = _a.onClickChip, onClickSearchFieldResetBtn = _a.onClickSearchFieldResetBtn, onClickSearchIBtn = _a.onClickSearchIBtn, onEnterKeyDown = _a.onEnterKeyDown, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickIBtn3 = _a.onClickIBtn3;
+    var _h = (0, react_1.useState)(!!searchFieldDefaultText), isShowSearchField = _h[0], setIsShowSearchField = _h[1];
+    var methods = (0, react_hook_form_1.useForm)();
+    var reset = methods.reset, handleSubmit = methods.handleSubmit;
+    var onSubmit = function (_a) {
+        var searchField = _a.searchField;
+        if (onEnterKeyDown) {
+            onEnterKeyDown(searchField);
+        }
+    };
+    var handleArrowIBtnClick = function () {
+        setIsShowSearchField(false);
+        reset();
+        if (onClickSearchFieldResetBtn) {
+            onClickSearchFieldResetBtn();
+        }
+    };
+    var handleSearchIBtnClick = function (value) {
+        if (onClickSearchIBtn) {
+            onClickSearchIBtn(value);
+        }
+    };
+    var handleSearchFieldShowIBtnClick = function () {
+        setIsShowSearchField(function (prev) { return !prev; });
+    };
+    var handleChipClick = function (option) {
+        if (onClickChip) {
+            onClickChip(option);
+        }
+    };
+    var handleIBtn1Click = function () {
+        if (onClickIBtn1) {
+            onClickIBtn1();
+        }
+    };
+    var handleIBtn2Click = function () {
+        if (onClickIBtn2) {
+            onClickIBtn2();
+        }
+    };
+    var handleIBtn3Click = function () {
+        if (onClickIBtn3) {
+            onClickIBtn3();
+        }
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(S_ToolBarBox, null,
+            react_1.default.createElement(S_FilterBox, null, isShowSearchField ? (react_1.default.createElement(react_1.default.Fragment, null, searchMode === 'use' && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_e", spacingType: "width" }),
+                react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, methods),
+                    react_1.default.createElement(common_1.Form, { onSubmit: handleSubmit(onSubmit) },
+                        react_1.default.createElement(SearchField_1.default, { name: "searchField", hintText: searchFieldHintText, defaultText: searchFieldDefaultText, onClickArrowIBtn: handleArrowIBtnClick, onClickSearchIBtn: handleSearchIBtnClick, customWidth: "424px" }))))))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                searchMode === 'use' && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }),
+                    react_1.default.createElement(components_1.IconButton, { fillType: "fill", baseSize: "small", iconSize: 24, shapeType: "rectangle", iconName: "ic_search", iconFillType: "fill", iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleSearchFieldShowIBtnClick }))),
+                chipMode === 'use' && chipTextArray && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }),
+                    react_1.default.createElement(ChipList_1.default, { textArray: chipTextArray, value: chipValue, onClickChip: handleChipClick })))))),
+            react_1.default.createElement(S_IconButtonBox, null, iBtnMode !== 'none' && (react_1.default.createElement(react_1.default.Fragment, null,
+                iBtnMode === 'iBtn_amount3' && iBtn3IconName && (react_1.default.createElement(components_1.IconButton, { fillType: "fill", baseSize: "medium", iconSize: 24, shapeType: "rectangle", iconName: iBtn3IconName, iconFillType: iBtn3IconFillType, iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn3Click })),
+                (iBtnMode === 'iBtn_amount2' || iBtnMode === 'iBtn_amount3') && iBtn2IconName && (react_1.default.createElement(components_1.IconButton, { fillType: "fill", baseSize: "medium", iconSize: 24, shapeType: "rectangle", iconName: iBtn2IconName, iconFillType: iBtn2IconFillType, iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn2Click })),
+                iBtn1IconName && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(components_1.IconButton, { fillType: "fill", baseSize: "medium", iconSize: 24, shapeType: "rectangle", iconName: iBtn1IconName, iconFillType: iBtn1IconFillType, iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn1Click }),
+                    react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }))))))),
+        react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" })));
+}
+var S_ToolBarBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  height: 40px;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  height: 40px;\n"])));
+var S_FilterBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var S_IconButtonBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n\n  & > :not(:first-child) {\n    margin-left: ", ";\n  }\n"], ["\n  display: flex;\n\n  & > :not(:first-child) {\n    margin-left: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
+exports.default = ToolBar;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/sub/AdminList/ToolBar/index.d.ts

@@ -0,0 +1 @@
+export { default as ToolBar } from './ToolBar';

package/dist/src/sub/AdminList/ToolBar/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolBar = void 0;
+var ToolBar_1 = require("./ToolBar");
+Object.defineProperty(exports, "ToolBar", { enumerable: true, get: function () { return __importDefault(ToolBar_1).default; } });

package/dist/src/sub/AdminList/index.d.ts

@@ -0,0 +1,5 @@
+export { AdminList } from './AdminList';
+export { AdminListHeader } from './AdminListHeader';
+export { AdminListItem } from './AdminListItem';
+export { BulkActionBar } from './BulkActionBar';
+export { ToolBar } from './ToolBar';

package/dist/src/sub/AdminList/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolBar = exports.BulkActionBar = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = void 0;
+var AdminList_1 = require("./AdminList");
+Object.defineProperty(exports, "AdminList", { enumerable: true, get: function () { return AdminList_1.AdminList; } });
+var AdminListHeader_1 = require("./AdminListHeader");
+Object.defineProperty(exports, "AdminListHeader", { enumerable: true, get: function () { return AdminListHeader_1.AdminListHeader; } });
+var AdminListItem_1 = require("./AdminListItem");
+Object.defineProperty(exports, "AdminListItem", { enumerable: true, get: function () { return AdminListItem_1.AdminListItem; } });
+var BulkActionBar_1 = require("./BulkActionBar");
+Object.defineProperty(exports, "BulkActionBar", { enumerable: true, get: function () { return BulkActionBar_1.BulkActionBar; } });
+var ToolBar_1 = require("./ToolBar");
+Object.defineProperty(exports, "ToolBar", { enumerable: true, get: function () { return ToolBar_1.ToolBar; } });

package/dist/src/sub/DynamicLayout/mock_samplePage.js

@@ -5,7 +5,6 @@ exports.samplePageIntroSection = {
     display: true,
     dynamicLayoutSectionItems: [],
     id: 8,
-    dlSelectorId: 'DLSELJLBFY5J70JOX9Z0N-VODBE',
     insertedAt: '2023-01-06T09:05:45',
     manifest: {
         availableProperties: [
@@ -277,7 +276,6 @@ exports.samplePageContentsCarouselSection = {
         }
     ],
     id: 9,
-    dlSelectorId: 'DLSELJLBFY5J70JOX9Z0N-VODBF',
     insertedAt: '2023-01-06T09:05:45',
     manifest: {
         availableProperties: [
@@ -371,7 +369,6 @@ exports.samplePageIntroSection2 = {
     display: true,
     dynamicLayoutSectionItems: [],
     id: 10,
-    dlSelectorId: 'DLSELJLBFY5J70JOX9Z0N-VODBG',
     insertedAt: '2023-01-06T09:05:45',
     manifest: {
         availableProperties: [
@@ -468,7 +465,6 @@ exports.samplePageContentsSection = {
     display: true,
     dynamicLayoutSectionItems: [],
     id: 11,
-    dlSelectorId: 'DLSELJLBFY5J70JOX9Z0N-VODBH',
     insertedAt: '2023-01-06T09:05:45',
     manifest: {
         availableProperties: [
@@ -644,7 +640,6 @@ exports.samplePageInfoBoxSection = {
         }
     ],
     id: 12,
-    dlSelectorId: 'DLSELJLBFY5J70JOX9Z0N-VODBI',
     insertedAt: '2023-01-06T09:05:45',
     manifest: {
         availableProperties: [
@@ -731,7 +726,6 @@ exports.samplePageIntroSection3 = {
     display: true,
     dynamicLayoutSectionItems: [],
     id: 13,
-    dlSelectorId: 'DLSELJLBFY5J70JOX9Z0N-VODBJ',
     insertedAt: '2023-01-06T09:05:45',
     manifest: {
         availableProperties: [
@@ -851,7 +845,6 @@ exports.samplePageFooterSection = {
         }
     ],
     id: 14,
-    dlSelectorId: 'DLSELJLBFY5J70JOX9Z0N-VODBK',
     insertedAt: '2023-01-06T09:05:45',
     manifest: {
         availableProperties: ['title', 'description'],

package/dist/src/sub/DynamicLayout/sections/ContentsCarouselSection/ContentsCarouselSection.js

@@ -35,7 +35,7 @@ var components_1 = require("../../components");
 var templates_1 = require("./templates");
 function ContentsCarouselSection(_a) {
     var props = __rest(_a, []);
-    return (react_1.default.createElement(S_SectionWrapper, { "x-dlayout-section-type": "ContentsCarousel", "x-dlayout-section-id": props.dlSelectorId },
+    return (react_1.default.createElement(S_SectionWrapper, { "x-dlayout-section-type": "ContentsCarousel" },
         react_1.default.createElement(components_1.Section, __assign({}, props),
             react_1.default.createElement(TemplateMatcher, { styleTemplate: props.template }))));
 }

package/dist/src/sub/DynamicLayout/sections/ContentsSection/ContentsSection.js

@@ -35,7 +35,7 @@ var components_1 = require("../../components");
 var templates_1 = require("./templates");
 function ContentsSection(_a) {
     var props = __rest(_a, []);
-    return (react_1.default.createElement(S_SectionWrapper, { "x-dlayout-section-type": "Contents", "x-dlayout-section-id": props.dlSelectorId },
+    return (react_1.default.createElement(S_SectionWrapper, { "x-dlayout-section-type": "Contents" },
         react_1.default.createElement(components_1.Section, __assign({}, props),
             react_1.default.createElement(TemplateMather, { styleTemplate: props.template }))));
 }

package/dist/src/sub/DynamicLayout/sections/FooterSection/FooterSection.js

@@ -35,7 +35,7 @@ var components_1 = require("../../components");
 var templates_1 = require("./templates");
 function FooterSection(_a) {
     var props = __rest(_a, []);
-    return (react_1.default.createElement(S_SectionWrapper, { "x-dlayout-section-type": "Footer", "x-dlayout-section-id": props.dlSelectorId },
+    return (react_1.default.createElement(S_SectionWrapper, { "x-dlayout-section-type": "Footer" },
         react_1.default.createElement(components_1.Section, __assign({}, props),
             react_1.default.createElement(TemplateMather, { styleTemplate: props.template }))));
 }

package/dist/src/sub/DynamicLayout/sections/InfoBoxSection/InfoBoxSection.js

@@ -35,7 +35,7 @@ var components_1 = require("../../components");
 var templates_1 = require("./templates");
 function InfoBoxSection(_a) {
     var props = __rest(_a, []);
-    return (react_1.default.createElement(S_SectionWrapper, { "x-dlayout-section-type": "InfoBox", "x-dlayout-section-id": props.dlSelectorId },
+    return (react_1.default.createElement(S_SectionWrapper, { "x-dlayout-section-type": "InfoBox" },
         react_1.default.createElement(components_1.Section, __assign({}, props),
             react_1.default.createElement(TemplateMather, { styleTemplate: props.template }))));
 }

package/dist/src/sub/DynamicLayout/sections/IntroSection/IntroSection.js

@@ -35,7 +35,7 @@ var components_1 = require("../../components");
 var templates_1 = require("./templates");
 function IntroSection(_a) {
     var props = __rest(_a, []);
-    return (react_1.default.createElement(S_SectionWrapper, { "x-dlayout-section-type": "Intro", "x-dlayout-section-id": props.dlSelectorId },
+    return (react_1.default.createElement(S_SectionWrapper, { "x-dlayout-section-type": "Intro" },
         react_1.default.createElement(components_1.Section, __assign({}, props),
             react_1.default.createElement(TemplateMatcher, { styleTemplate: props.template }))));
 }

package/dist/src/sub/DynamicLayout/types.d.ts

@@ -27,7 +27,6 @@ export interface ISection {
     properties: ISectionProperties;
     styles: ISectionStyles;
     dynamicLayoutSectionItems: Array<IItem> | null;
-    dlSelectorId: string;
     insertedAt: string;
     updatedAt: string;
 }

package/dist/src/sub/index.d.ts

@@ -1 +1,2 @@
 export { DynamicLayout } from './DynamicLayout';
+export * from './AdminList';

package/dist/src/sub/index.js

@@ -1,6 +1,16 @@
 "use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DynamicLayout = void 0;
-// NOTE: 이름은 변경될 수 있습니다.
 var DynamicLayout_1 = require("./DynamicLayout");
 Object.defineProperty(exports, "DynamicLayout", { enumerable: true, get: function () { return DynamicLayout_1.DynamicLayout; } });
+__exportStar(require("./AdminList"), exports);

package/package.json

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

package/release-note.md

@@ -1,7 +1,19 @@
 # pds-dev-kit-web-test Release Notes
-## [v0.1.2]
+## [v0.1.4]
 
-## 기준 pds-dev-kit-web 버전 @1.9.12
+## 기준 pds-dev-kit-web 버전 @1.9.13
 ### sub
-* DynamicLayout
-  * section단위에 x-dlayout-section-id 추가
+* AdminList
+  * SearchField
+    * arrowLeftIconButton 클릭시 SearchField 값이 지워지던 기능 삭제
+    * deleteIcon과 searchIcon 사이 간격 수정
+  * ToolBar
+    * SearchField의 arrowLeftIconButton 클릭시 SearchField 값이 지워지도록 기능 추가
+  * AdminList
+    * 사용되지 않는 props type 삭제
+      * onChangeDropdown1
+      * onChangeDropdown2
+      * onChangeDropdown3
+      * onClickTBtn1
+      * onClickTBtn2
+      * onClickTBtn3