pds-dev-kit-web-test 0.2.53 → 0.2.55

package/dist/src/common/assets/icons/line/index.js

@@ -27,6 +27,7 @@ var ArrowUpBold_1 = __importDefault(require("./ArrowUpBold"));
 var Audio_1 = __importDefault(require("./Audio"));
 var Bell_1 = __importDefault(require("./Bell"));
 var BellNotification_1 = __importDefault(require("./BellNotification"));
+var BellOff_1 = __importDefault(require("./BellOff"));
 var BlockUser_1 = __importDefault(require("./BlockUser"));
 var Booking_1 = __importDefault(require("./Booking"));
 var BookingCompleted_1 = __importDefault(require("./BookingCompleted"));
@@ -50,6 +51,10 @@ var ChatCounseling_1 = __importDefault(require("./ChatCounseling"));
 var ChatCrm_1 = __importDefault(require("./ChatCrm"));
 var ChatNotification_1 = __importDefault(require("./ChatNotification"));
 var ChatOff_1 = __importDefault(require("./ChatOff"));
+var ChatRoom11_1 = __importDefault(require("./ChatRoom11"));
+var ChatRoomFree_1 = __importDefault(require("./ChatRoomFree"));
+var ChatRoomGroup_1 = __importDefault(require("./ChatRoomGroup"));
+var ChatRoomPaid_1 = __importDefault(require("./ChatRoomPaid"));
 var Check_1 = __importDefault(require("./Check"));
 var CheckboxOff_1 = __importDefault(require("./CheckboxOff"));
 var Clip_1 = __importDefault(require("./Clip"));
@@ -233,6 +238,11 @@ var Time_1 = __importDefault(require("./Time"));
 var ToggleDown_1 = __importDefault(require("./ToggleDown"));
 var ToggleUp_1 = __importDefault(require("./ToggleUp"));
 var Trashcan_1 = __importDefault(require("./Trashcan"));
+var TypefaceDisplay20_1 = __importDefault(require("./TypefaceDisplay20"));
+var TypefaceHand20_1 = __importDefault(require("./TypefaceHand20"));
+var TypefaceMonospace20_1 = __importDefault(require("./TypefaceMonospace20"));
+var TypefaceSansSerif20_1 = __importDefault(require("./TypefaceSansSerif20"));
+var TypefaceSerif20_1 = __importDefault(require("./TypefaceSerif20"));
 var TypefaceSystem_1 = __importDefault(require("./TypefaceSystem"));
 var Unavailable_1 = __importDefault(require("./Unavailable"));
 var Unlock_1 = __importDefault(require("./Unlock"));
@@ -281,6 +291,7 @@ var lineIcons = {
     ic_audio: Audio_1.default,
     ic_bell: Bell_1.default,
     ic_bell_notification: BellNotification_1.default,
+    ic_bell_off: BellOff_1.default,
     ic_block_user: BlockUser_1.default,
     ic_booking: Booking_1.default,
     ic_booking_completed: BookingCompleted_1.default,
@@ -304,6 +315,10 @@ var lineIcons = {
     ic_chat_crm: ChatCrm_1.default,
     ic_chat_notification: ChatNotification_1.default,
     ic_chat_off: ChatOff_1.default,
+    ic_chat_room_1_1: ChatRoom11_1.default,
+    ic_chat_room_free: ChatRoomFree_1.default,
+    ic_chat_room_group: ChatRoomGroup_1.default,
+    ic_chat_room_paid: ChatRoomPaid_1.default,
     ic_check: Check_1.default,
     ic_checkbox_off: CheckboxOff_1.default,
     ic_clip: Clip_1.default,
@@ -487,6 +502,11 @@ var lineIcons = {
     ic_toggle_down: ToggleDown_1.default,
     ic_toggle_up: ToggleUp_1.default,
     ic_trashcan: Trashcan_1.default,
+    ic_typeface_display_20: TypefaceDisplay20_1.default,
+    ic_typeface_hand_20: TypefaceHand20_1.default,
+    ic_typeface_monospace_20: TypefaceMonospace20_1.default,
+    ic_typeface_sans_serif_20: TypefaceSansSerif20_1.default,
+    ic_typeface_serif_20: TypefaceSerif20_1.default,
     ic_typeface_system: TypefaceSystem_1.default,
     ic_unavailable: Unavailable_1.default,
     ic_unlock: Unlock_1.default,

package/dist/src/common/hooks/index.d.ts

@@ -1,2 +1,3 @@
+export { default as useAbsolutePositioner } from './useAbsolutePositioner';
 export { default as useDetectOverflow } from './useDetectOverflow';
 export { default as usePrevious } from './usePrevious';

package/dist/src/common/hooks/index.js

@@ -3,7 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePrevious = exports.useDetectOverflow = void 0;
+exports.usePrevious = exports.useDetectOverflow = exports.useAbsolutePositioner = void 0;
+var useAbsolutePositioner_1 = require("./useAbsolutePositioner");
+Object.defineProperty(exports, "useAbsolutePositioner", { enumerable: true, get: function () { return __importDefault(useAbsolutePositioner_1).default; } });
 var useDetectOverflow_1 = require("./useDetectOverflow");
 Object.defineProperty(exports, "useDetectOverflow", { enumerable: true, get: function () { return __importDefault(useDetectOverflow_1).default; } });
 var usePrevious_1 = require("./usePrevious");

package/dist/src/common/hooks/useAbsolutePositioner.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+type controllerPositionType = {
+    controllerTop?: number;
+    controllerRight?: number;
+};
+declare function useAbsolutePositioner(controllerPosition?: controllerPositionType): {
+    absolutePosition: {
+        left: number;
+        top: number;
+    };
+    absolutePositionController: JSX.Element;
+};
+export default useAbsolutePositioner;

package/dist/src/common/hooks/useAbsolutePositioner.js

@@ -0,0 +1,54 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var index_1 = require("../../desktop/index");
+var components_1 = require("../../hybrid/components");
+var styled_components_1 = __importDefault(require("styled-components"));
+function useAbsolutePositioner(controllerPosition) {
+    var _a = (0, react_1.useState)({
+        left: 0,
+        top: 0
+    }), absolutePosition = _a[0], setAbsolutePosition = _a[1];
+    var handleChangeHorizontalPosition = function (e) {
+        setAbsolutePosition(__assign(__assign({}, absolutePosition), { left: Number(e.target.value) }));
+    };
+    var handleChangeVerticalPosition = function (e) {
+        setAbsolutePosition(__assign(__assign({}, absolutePosition), { top: Number(e.target.value) }));
+    };
+    return {
+        absolutePosition: absolutePosition,
+        absolutePositionController: ((0, jsx_runtime_1.jsxs)(S_PositionControllerWrapper, __assign({ controllerPosition: controllerPosition }, { children: [(0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: "from left" }), (0, jsx_runtime_1.jsx)(S_PositionController, { type: "number", step: 5, defaultValue: 0, onChange: handleChangeHorizontalPosition }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }), (0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: "from top" }), (0, jsx_runtime_1.jsx)(S_PositionController, { type: "number", step: 5, defaultValue: 0, onChange: handleChangeVerticalPosition })] })))
+    };
+}
+var S_PositionControllerWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: rgba(116, 116, 116, 0.5);\n  height: fit-content;\n  padding: ", ";\n  position: absolute;\n  right: ", ";\n  top: ", ";\n"], ["\n  background-color: rgba(116, 116, 116, 0.5);\n  height: fit-content;\n  padding: ", ";\n  position: absolute;\n  right: ", ";\n  top: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+}, function (_a) {
+    var controllerPosition = _a.controllerPosition;
+    return (controllerPosition === null || controllerPosition === void 0 ? void 0 : controllerPosition.controllerRight) ? "".concat(controllerPosition.controllerRight, "px") : '60px';
+}, function (_a) {
+    var controllerPosition = _a.controllerPosition;
+    return (controllerPosition === null || controllerPosition === void 0 ? void 0 : controllerPosition.controllerTop) ? "".concat(controllerPosition.controllerTop, "px") : '60px';
+});
+var S_PositionController = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: 1px dodgerblue solid;\n  width: 90%;\n"], ["\n  border: 1px dodgerblue solid;\n  width: 90%;\n"])));
+exports.default = useAbsolutePositioner;
+var templateObject_1, templateObject_2;

package/dist/src/common/hooks/useTooltip.d.ts

@@ -0,0 +1,17 @@
+import { MutableRefObject } from 'react';
+import type { PDSTextType } from '../types';
+import type { SystemUIPositionType } from '../types/systemUI';
+type Props = {
+    tooltipPositionTargetRef: MutableRefObject<HTMLDivElement | HTMLButtonElement | HTMLLabelElement | null>;
+    dependency: boolean;
+    baseSize: number;
+    /** @deprecated 'left_top', 'left_bottom', 'right_top', 'right_bottom' will replace 'top' or 'bottom' */
+    tooltipPosition: SystemUIPositionType;
+    tooltipText: PDSTextType;
+    distance?: number;
+};
+/**
+ * @description 모듈화에 대한 범용성이 조금 더 확보되면 상용화 될 수 있을 것 같습니다. group 형태의 컴포넌트들에 적용 방향을 확정해야 합니다.
+ */
+declare function UseTooltip({ tooltipPositionTargetRef, dependency, baseSize, tooltipPosition, tooltipText, distance }: Props): JSX.Element;
+export default UseTooltip;

package/dist/src/common/hooks/useTooltip.js

@@ -0,0 +1,76 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_dom_1 = require("react-dom");
+var systemUI_1 = require("../styles/systemUI");
+var SystemUIPositionGenerator_1 = require("../utils/SystemUIPositionGenerator");
+var styled_components_1 = __importDefault(require("styled-components"));
+/**
+ * @description 모듈화에 대한 범용성이 조금 더 확보되면 상용화 될 수 있을 것 같습니다. group 형태의 컴포넌트들에 적용 방향을 확정해야 합니다.
+ */
+function UseTooltip(_a) {
+    var tooltipPositionTargetRef = _a.tooltipPositionTargetRef, dependency = _a.dependency, baseSize = _a.baseSize, tooltipPosition = _a.tooltipPosition, tooltipText = _a.tooltipText, distance = _a.distance;
+    var tooltipRef = (0, react_1.useRef)(null);
+    var _b = (0, react_1.useState)(null), tooltipSizeOffset = _b[0], setTooltipSizeOffset = _b[1];
+    var _c = (0, react_1.useState)(null), tooltipPositionOffset = _c[0], setTooltipPositionOffset = _c[1];
+    /**
+     * @when : dependency 변경되었을 때
+     * @expected : tooltipPositionTargetRef, tooltipRef 의 위치를 업데이트합니다.
+     * @clear :
+     */
+    (0, react_1.useEffect)(function () {
+        if (!tooltipPositionTargetRef.current || !tooltipText) {
+            return;
+        }
+        if (!dependency && tooltipRef.current) {
+            setTooltipSizeOffset(null);
+            return;
+        }
+        var _a = tooltipPositionTargetRef.current.getBoundingClientRect(), top = _a.top, right = _a.right, left = _a.left, bottom = _a.bottom;
+        setTooltipPositionOffset({
+            top: top + window.scrollY,
+            right: right + window.scrollX,
+            bottom: bottom + window.scrollY,
+            left: left + window.scrollX
+        });
+        if (tooltipRef.current) {
+            setTooltipSizeOffset({
+                height: tooltipRef.current.offsetHeight,
+                width: tooltipRef.current.offsetWidth
+            });
+        }
+    }, [dependency]);
+    var tooltipPositionCss = (0, SystemUIPositionGenerator_1.hoverTypeSystemUICssGenerator)({
+        baseSize: baseSize,
+        sizeOffset: tooltipSizeOffset,
+        positionOffset: tooltipPositionOffset,
+        systemUIPosition: tooltipPosition,
+        distance: distance
+    });
+    return tooltipText ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", ref: tooltipRef, tooltipPositionCss: tooltipPositionCss }, { children: tooltipText })), document.body) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}));
+}
+var S_TooltipWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n\n  ", ";\n"], ["\n  ", "\n\n  ", ";\n"])), systemUI_1.TooltipWrapperStyle, function (_a) {
+    var tooltipPositionCss = _a.tooltipPositionCss;
+    return tooltipPositionCss;
+});
+exports.default = UseTooltip;
+var templateObject_1;

package/dist/src/common/styles/colorSet/PaletteColor_Dark.json

@@ -342,5 +342,6 @@
     "sys_text_black_02": "black/opacity60",
     "sys_sw_sidebar_item_text_disabled": "darkgrey400/opacity70",
     "sys_text_grey_05": "darkgrey400/opacity20",
-    "sys_text_white_02": "white/opacity50"
+    "sys_text_white_02": "white/opacity50",
+    "sys_component_base_45": "darkgreen300"
 }

package/dist/src/common/styles/colorSet/PaletteColor_light.json

@@ -342,5 +342,6 @@
     "sys_text_black_02": "black/opacity60",
     "sys_sw_sidebar_item_text_disabled": "darkgrey400/opacity70",
     "sys_text_grey_05": "grey400/opacity20",
-    "sys_text_white_02": "white/opacity50"
+    "sys_text_white_02": "white/opacity50",
+    "sys_component_base_45": "green300"
 }

package/dist/src/common/styles/colorSet/UIColor.json

@@ -836,5 +836,6 @@
     "ui_cpnt_modalwithtab_sidetab_pressed": "sys_component_base_04",
     "ui_107": "sys_component_border_white_opacity20",
     "ui_cpnt_textlabel_sys_white_02": "sys_text_white_02",
-    "ui_cpnt_headerbar_base_area_transparent": "sys_container_background_04"
+    "ui_cpnt_headerbar_base_area_transparent": "sys_container_background_04",
+    "ui_108": "sys_widget_error_01"
 }