pds-dev-kit-web 2.2.10 → 2.2.12

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"
 }