pds-dev-kit-web 2.1.8 → 2.1.10

package/dist/src/common/styles/colorSet/index.js

@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
 var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
-var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
+var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var colorSet = {
     SemanticColor: SemanticColor_json_1.default,
-    UIColor: UIColor_json_1.default,
     PaletteColor_Dark: PaletteColor_Dark_json_1.default,
-    PaletteColor_light: PaletteColor_light_json_1.default
+    PaletteColor_light: PaletteColor_light_json_1.default,
+    UIColor: UIColor_json_1.default
 };
 exports.default = colorSet;

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -806,4 +806,6 @@ export interface UITheme {
     ui_editor_layout_control_panel: string;
     ui_editor_layout_property_panel: string;
     ui_editor_layout_navigation_panel_section_item_area_normal: string;
+    ui_editor_scroll_bar: string;
+    ui_editor_scroll_track: string;
 }

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

@@ -5,7 +5,7 @@ export declare type Props = {
     max: number;
     step?: number;
     name?: string;
-    defaultValue?: string | number;
+    value: number;
     tooltipText?: PDSTextType;
     state?: 'normal' | 'disabled';
     prefixText?: PDSTextType;

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

@@ -24,13 +24,20 @@ var components_1 = require("../../../hybrid/components");
 var styled_components_1 = __importDefault(require("styled-components"));
 var TextLabel_1 = require("../TextLabel");
 function Slider(_a, ref) {
-    var min = _a.min, max = _a.max, _b = _a.step, step = _b === void 0 ? 1 : _b, name = _a.name, defaultValue = _a.defaultValue, tooltipText = _a.tooltipText, _c = _a.state, state = _c === void 0 ? 'normal' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, customWidth = _a.customWidth, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, onChange = _a.onChange, onClick = _a.onClick;
+    var min = _a.min, max = _a.max, _b = _a.step, step = _b === void 0 ? 1 : _b, name = _a.name, value = _a.value, tooltipText = _a.tooltipText, _c = _a.state, state = _c === void 0 ? 'normal' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, customWidth = _a.customWidth, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, onChange = _a.onChange, onClick = _a.onClick;
     var _e = (0, react_1.useState)(false), isTooltipVisible = _e[0], setIsTooltipVisible = _e[1];
     var _f = (0, react_1.useState)(false), isDragging = _f[0], setIsDragActive = _f[1];
     var trackRef = (0, react_1.useRef)(null);
     var thumbRef = (0, react_1.useRef)(null);
     var inputRef = (0, react_1.useRef)(null);
-    var defaultThumbPercentage = ((Number(defaultValue || (max - min) / 2 + min) - min) / (max - min)) * 100;
+    (0, react_1.useEffect)(function () {
+        if (!trackRef.current || !thumbRef.current) {
+            return;
+        }
+        var width = trackRef.current.getBoundingClientRect().width;
+        var thumbPosition = getThumbPositionOnTrack((value - min) / (max - min), value, width);
+        updateFillTrackAndThumb(trackRef.current, thumbRef.current, thumbPosition);
+    }, [value]);
     function getPercent(pointValue, width) {
         if (pointValue <= 0) {
             return 0;
@@ -43,47 +50,34 @@ function Slider(_a, ref) {
     function percentToValue(percent, min, max) {
         return (max - min) * percent + min;
     }
-    function getInputValue(inputRef, trackValue) {
-        var result = { prevInputValue: '', newInputValue: '' };
-        if (inputRef.current === null) {
-            return result;
-        }
-        result.prevInputValue = inputRef.current.value;
-        inputRef.current.value = String(trackValue);
-        result.newInputValue = inputRef.current.value;
-        return result;
-    }
     function getThumbOffset(percent, width) {
         return ((width * percent - width / 2) / (width / 2)) * -10;
     }
-    var getNewInputValue = function (clientX, left, width) {
+    var getNewValue = function (clientX, left, width) {
         var percent = getPercent(clientX - (left + 10), width - 20);
         var newValue = percentToValue(percent, min, max);
-        var _a = getInputValue(inputRef, newValue), prevInputValue = _a.prevInputValue, newInputValue = _a.newInputValue;
-        if (prevInputValue === newInputValue) {
-            return null;
-        }
-        return newInputValue;
+        return String(newValue);
     };
     var getThumbPositionOnTrack = function (percent, value, width) {
         var thumbOffset = getThumbOffset(percent, width);
-        return "calc(" + (Number(value) / (max - min)) * 100 + "% + " + thumbOffset + "px)";
+        return "calc(" + ((Number(value) - min) / (max - min)) * 100 + "% + " + thumbOffset + "px)";
     };
     var updateFillTrackAndThumb = function (trackElement, thumbElement, thumbPosition) {
         trackElement.style.backgroundSize = thumbPosition + " 100%";
         thumbElement.style.left = thumbPosition;
     };
     var changeSliderValue = function (clientX) {
-        if (inputRef.current === null || thumbRef.current === null || trackRef.current === null) {
+        if (inputRef.current === null || trackRef.current === null) {
             return;
         }
         var _a = trackRef.current.getBoundingClientRect(), left = _a.left, width = _a.width;
-        var newInputValue = getNewInputValue(clientX, left, width);
-        if (newInputValue === null) {
+        var newValue = getNewValue(clientX, left, width);
+        var prevInputValue = inputRef.current.value;
+        inputRef.current.value = String(newValue);
+        var newInputValue = inputRef.current.value;
+        if (prevInputValue === newInputValue) {
             return;
         }
-        var thumbPosition = getThumbPositionOnTrack(Number(newInputValue) / (max - min), newInputValue, width);
-        updateFillTrackAndThumb(trackRef.current, thumbRef.current, thumbPosition);
         inputRef.current.dispatchEvent(new Event('input', { bubbles: true }));
     };
     var handleMouseMove = function (e) {
@@ -113,12 +107,6 @@ function Slider(_a, ref) {
         document.addEventListener('mouseup', handleMouseUp, { once: true });
     };
     var handleChange = function (e) {
-        if (trackRef.current === null || thumbRef.current === null) {
-            return;
-        }
-        var width = trackRef.current.getBoundingClientRect().width;
-        var thumbPosition = getThumbPositionOnTrack(Number(e.currentTarget.value) / (max - min), e.currentTarget.value, width);
-        updateFillTrackAndThumb(trackRef.current, thumbRef.current, thumbPosition);
         if (onChange) {
             onChange(e);
         }
@@ -137,7 +125,7 @@ function Slider(_a, ref) {
         }
         inputRef.current = node;
     };
-    return ((0, jsx_runtime_1.jsxs)(S_SliderBox, __assign({ "x-pds-name": "Slider", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption2Bold", colorTheme: state === 'normal' ? 'sysTextSecondary' : 'sysTextTertiary', singleLineMode: "use", textAlign: "right" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { spacingType: "width", size: "spacing_b" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(S_SliderWrapper, __assign({ customWidth: customWidth, responsiveMode: responsiveMode }, { children: (0, jsx_runtime_1.jsxs)(S_Slider, __assign({ customWidth: customWidth, isDisabled: state === 'disabled', responsiveMode: responsiveMode, thumbPercentage: defaultThumbPercentage, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(S_Track, { ref: trackRef, thumbPercentage: defaultThumbPercentage, isDisabled: state === 'disabled' }, void 0), (0, jsx_runtime_1.jsxs)(S_Thumb, __assign({ ref: thumbRef, thumbPercentage: defaultThumbPercentage, isDragging: isDragging, isDisabled: state === 'disabled' }, { children: [(0, jsx_runtime_1.jsx)(S_Range, { ref: handleRangeRef, type: "range", name: name, min: min, max: max, step: step, defaultValue: defaultValue, onInput: handleChange, onClick: handleClick }, void 0), tooltipText && isTooltipVisible && ((0, jsx_runtime_1.jsx)(S_Tooltip, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, styleTheme: "caption2Regular", colorOverride: "ui_cpnt_textlabel_button_tooltip", singleLineMode: "use" }, void 0) }, void 0))] }), void 0)] }), void 0) }), void 0), suffixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { spacingType: "width", size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: suffixText, styleTheme: "caption2Bold", colorTheme: state === 'normal' ? 'sysTextSecondary' : 'sysTextTertiary', singleLineMode: "use" }, void 0)] }, void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_SliderBox, __assign({ "x-pds-name": "Slider", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption2Bold", colorTheme: state === 'normal' ? 'sysTextSecondary' : 'sysTextTertiary', singleLineMode: "use", textAlign: "right" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { spacingType: "width", size: "spacing_b" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(S_SliderWrapper, __assign({ customWidth: customWidth, responsiveMode: responsiveMode }, { children: (0, jsx_runtime_1.jsxs)(S_Slider, __assign({ customWidth: customWidth, isDisabled: state === 'disabled', responsiveMode: responsiveMode, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(S_Track, { ref: trackRef, isDisabled: state === 'disabled' }, void 0), (0, jsx_runtime_1.jsxs)(S_Thumb, __assign({ ref: thumbRef, isDragging: isDragging, isDisabled: state === 'disabled' }, { children: [(0, jsx_runtime_1.jsx)(S_Range, { ref: handleRangeRef, type: "range", name: name, min: min, max: max, step: step, value: value, onInput: handleChange, onClick: handleClick }, void 0), !!tooltipText && isTooltipVisible && ((0, jsx_runtime_1.jsx)(S_Tooltip, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, styleTheme: "caption2Regular", colorOverride: "ui_cpnt_textlabel_button_tooltip", singleLineMode: "use" }, void 0) }, void 0))] }), void 0)] }), void 0) }), void 0), suffixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { spacingType: "width", size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: suffixText, styleTheme: "caption2Bold", colorTheme: state === 'normal' ? 'sysTextSecondary' : 'sysTextTertiary', singleLineMode: "use" }, void 0)] }, void 0))] }), void 0));
 }
 var S_SliderBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n"])));
 var S_SliderWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n  width: ", ";\n"], ["\n  display: flex;\n  position: relative;\n  width: ", ";\n"])), function (_a) {
@@ -170,7 +158,7 @@ var S_Slider = styled_components_1.default.div(templateObject_4 || (templateObje
     }
     return '324px';
 });
-var S_Track = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  background-image: ", ";\n  background-repeat: no-repeat;\n  background-size: ", ";\n  border-radius: 2px;\n  height: 4px;\n  position: absolute;\n  width: inherit;\n"], ["\n  background-color: ", ";\n  background-image: ", ";\n  background-repeat: no-repeat;\n  background-size: ", ";\n  border-radius: 2px;\n  height: 4px;\n  position: absolute;\n  width: inherit;\n"])), function (_a) {
+var S_Track = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  background-image: ", ";\n  background-repeat: no-repeat;\n  border-radius: 2px;\n  height: 4px;\n  position: absolute;\n  width: inherit;\n"], ["\n  background-color: ", ";\n  background-image: ", ";\n  background-repeat: no-repeat;\n  border-radius: 2px;\n  height: 4px;\n  position: absolute;\n  width: inherit;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_slider_track;
 }, function (_a) {
@@ -178,19 +166,13 @@ var S_Track = styled_components_1.default.div(templateObject_5 || (templateObjec
     return isDisabled
         ? "linear-gradient(" + theme.ui_cpnt_slider_track_disabled + ", " + theme.ui_cpnt_slider_track_disabled + ")"
         : "linear-gradient(" + theme.ui_cpnt_slider_track_active + ", " + theme.ui_cpnt_slider_track_active + ")";
-}, function (_a) {
-    var thumbPercentage = _a.thumbPercentage;
-    return thumbPercentage + "% 100%";
 });
-var S_Thumb = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 100%;\n  box-shadow: ", ";\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  left: ", "%;\n  position: absolute;\n  transform: translateX(-10px);\n  width: 20px;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"], ["\n  background-color: ", ";\n  border-radius: 100%;\n  box-shadow: ", ";\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  left: ", "%;\n  position: absolute;\n  transform: translateX(-10px);\n  width: 20px;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"])), function (_a) {
+var S_Thumb = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 100%;\n  box-shadow: ", ";\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  position: absolute;\n  transform: translateX(-10px);\n  width: 20px;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"], ["\n  background-color: ", ";\n  border-radius: 100%;\n  box-shadow: ", ";\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  position: absolute;\n  transform: translateX(-10px);\n  width: 20px;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme, isDisabled = _a.isDisabled;
     return isDisabled ? theme.ui_cpnt_slider_thumb_disabled : theme.ui_cpnt_slider_thumb_normal;
 }, function (_a) {
     var theme = _a.theme, isDragging = _a.isDragging, isDisabled = _a.isDisabled;
     return isDragging && !isDisabled ? "0 0 0 8px " + theme.ui_cpnt_slider_thumb_pressed_circle : 'none';
-}, function (_a) {
-    var thumbPercentage = _a.thumbPercentage;
-    return thumbPercentage;
 }, function (_a) {
     var theme = _a.theme, isDragging = _a.isDragging, isDisabled = _a.isDisabled;
     return !isDragging && !isDisabled && "0 0 0 8px " + theme.ui_cpnt_slider_thumb_hover_circle;

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

@@ -5,7 +5,7 @@ export declare type Props = {
     max: number;
     step?: number;
     name?: string;
-    defaultValue?: string | number;
+    value: number;
     tooltipText?: PDSTextType;
     state?: 'normal' | 'disabled';
     prefixText?: PDSTextType;

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

@@ -24,13 +24,20 @@ var components_1 = require("../../../hybrid/components");
 var styled_components_1 = __importDefault(require("styled-components"));
 var TextLabel_1 = require("../TextLabel");
 function Slider(_a, ref) {
-    var min = _a.min, max = _a.max, _b = _a.step, step = _b === void 0 ? 1 : _b, name = _a.name, defaultValue = _a.defaultValue, tooltipText = _a.tooltipText, _c = _a.state, state = _c === void 0 ? 'normal' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, customWidth = _a.customWidth, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, onChange = _a.onChange, onClick = _a.onClick;
+    var min = _a.min, max = _a.max, _b = _a.step, step = _b === void 0 ? 1 : _b, name = _a.name, value = _a.value, tooltipText = _a.tooltipText, _c = _a.state, state = _c === void 0 ? 'normal' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, customWidth = _a.customWidth, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, onChange = _a.onChange, onClick = _a.onClick;
     var _e = (0, react_1.useState)(false), isTooltipVisible = _e[0], setIsTooltipVisible = _e[1];
     var _f = (0, react_1.useState)(false), isTouching = _f[0], setIsTouching = _f[1];
     var trackRef = (0, react_1.useRef)(null);
     var thumbRef = (0, react_1.useRef)(null);
     var inputRef = (0, react_1.useRef)(null);
-    var defaultThumbPercentage = ((Number(defaultValue || (max - min) / 2 + min) - min) / (max - min)) * 100;
+    (0, react_1.useEffect)(function () {
+        if (!trackRef.current || !thumbRef.current) {
+            return;
+        }
+        var width = trackRef.current.getBoundingClientRect().width;
+        var thumbPosition = getThumbPositionOnTrack((value - min) / (max - min), value, width);
+        updateFillTrackAndThumb(trackRef.current, thumbRef.current, thumbPosition);
+    }, [value]);
     function getPercent(pointValue, width) {
         if (pointValue <= 0) {
             return 0;
@@ -43,47 +50,34 @@ function Slider(_a, ref) {
     function percentToValue(percent, min, max) {
         return (max - min) * percent + min;
     }
-    function getInputValue(inputRef, trackValue) {
-        var result = { prevInputValue: '', newInputValue: '' };
-        if (inputRef.current === null) {
-            return result;
-        }
-        result.prevInputValue = inputRef.current.value;
-        inputRef.current.value = String(trackValue);
-        result.newInputValue = inputRef.current.value;
-        return result;
-    }
     function getThumbOffset(percent, width) {
         return ((width * percent - width / 2) / (width / 2)) * -10;
     }
-    var getNewInputValue = function (clientX, left, width) {
+    var getNewValue = function (clientX, left, width) {
         var percent = getPercent(clientX - (left + 10), width - 20);
         var newValue = percentToValue(percent, min, max);
-        var _a = getInputValue(inputRef, newValue), prevInputValue = _a.prevInputValue, newInputValue = _a.newInputValue;
-        if (prevInputValue === newInputValue) {
-            return null;
-        }
-        return newInputValue;
+        return String(newValue);
     };
     var getThumbPositionOnTrack = function (percent, value, width) {
         var thumbOffset = getThumbOffset(percent, width);
-        return "calc(" + (Number(value) / (max - min)) * 100 + "% + " + thumbOffset + "px)";
+        return "calc(" + ((Number(value) - min) / (max - min)) * 100 + "% + " + thumbOffset + "px)";
     };
     var updateFillTrackAndThumb = function (trackElement, thumbElement, thumbPosition) {
         trackElement.style.backgroundSize = thumbPosition + " 100%";
         thumbElement.style.left = thumbPosition;
     };
     var changeSliderValue = function (clientX) {
-        if (inputRef.current === null || thumbRef.current === null || trackRef.current === null) {
+        if (inputRef.current === null || trackRef.current === null) {
             return;
         }
         var _a = trackRef.current.getBoundingClientRect(), left = _a.left, width = _a.width;
-        var newInputValue = getNewInputValue(clientX, left, width);
-        if (newInputValue === null) {
+        var newValue = getNewValue(clientX, left, width);
+        var prevInputValue = inputRef.current.value;
+        inputRef.current.value = String(newValue);
+        var newInputValue = inputRef.current.value;
+        if (prevInputValue === newInputValue) {
             return;
         }
-        var thumbPosition = getThumbPositionOnTrack(Number(newInputValue) / (max - min), newInputValue, width);
-        updateFillTrackAndThumb(trackRef.current, thumbRef.current, thumbPosition);
         inputRef.current.dispatchEvent(new Event('input', { bubbles: true }));
     };
     var handleTouchMove = function (e) {
@@ -113,12 +107,6 @@ function Slider(_a, ref) {
         document.addEventListener('touchend', handleTouchEnd, { once: true });
     };
     var handleChange = function (e) {
-        if (trackRef.current === null || thumbRef.current === null) {
-            return;
-        }
-        var width = trackRef.current.getBoundingClientRect().width;
-        var thumbPosition = getThumbPositionOnTrack(Number(e.currentTarget.value) / (max - min), e.currentTarget.value, width);
-        updateFillTrackAndThumb(trackRef.current, thumbRef.current, thumbPosition);
         if (onChange) {
             onChange(e);
         }
@@ -137,7 +125,7 @@ function Slider(_a, ref) {
         }
         inputRef.current = node;
     };
-    return ((0, jsx_runtime_1.jsxs)(S_SliderBox, __assign({ "x-pds-name": "Slider", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption2Bold", colorTheme: state === 'normal' ? 'sysTextSecondary' : 'sysTextTertiary', singleLineMode: "use", textAlign: "right" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { spacingType: "width", size: "spacing_b" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(S_SliderWrapper, __assign({ customWidth: customWidth, responsiveMode: responsiveMode }, { children: (0, jsx_runtime_1.jsxs)(S_Slider, __assign({ customWidth: customWidth, isDisabled: state === 'disabled', responsiveMode: responsiveMode, thumbPercentage: defaultThumbPercentage, onTouchStart: handleTouchStart }, { children: [(0, jsx_runtime_1.jsx)(S_Track, { ref: trackRef, thumbPercentage: defaultThumbPercentage, isDisabled: state === 'disabled' }, void 0), (0, jsx_runtime_1.jsxs)(S_Thumb, __assign({ ref: thumbRef, thumbPercentage: defaultThumbPercentage, isTouching: isTouching, isDisabled: state === 'disabled' }, { children: [(0, jsx_runtime_1.jsx)(S_Range, { ref: handleRangeRef, type: "range", name: name, min: min, max: max, step: step, defaultValue: defaultValue, onInput: handleChange, onClick: handleClick }, void 0), tooltipText && isTooltipVisible && ((0, jsx_runtime_1.jsx)(S_Tooltip, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, styleTheme: "caption2Regular", colorOverride: "ui_cpnt_textlabel_button_tooltip", singleLineMode: "use" }, void 0) }, void 0))] }), void 0)] }), void 0) }), void 0), suffixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { spacingType: "width", size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: suffixText, styleTheme: "caption2Bold", colorTheme: state === 'normal' ? 'sysTextSecondary' : 'sysTextTertiary', singleLineMode: "use" }, void 0)] }, void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_SliderBox, __assign({ "x-pds-name": "Slider", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption2Bold", colorTheme: state === 'normal' ? 'sysTextSecondary' : 'sysTextTertiary', singleLineMode: "use", textAlign: "right" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { spacingType: "width", size: "spacing_b" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(S_SliderWrapper, __assign({ customWidth: customWidth, responsiveMode: responsiveMode }, { children: (0, jsx_runtime_1.jsxs)(S_Slider, __assign({ customWidth: customWidth, isDisabled: state === 'disabled', responsiveMode: responsiveMode, onTouchStart: handleTouchStart }, { children: [(0, jsx_runtime_1.jsx)(S_Track, { ref: trackRef, isDisabled: state === 'disabled' }, void 0), (0, jsx_runtime_1.jsxs)(S_Thumb, __assign({ ref: thumbRef, isTouching: isTouching, isDisabled: state === 'disabled' }, { children: [(0, jsx_runtime_1.jsx)(S_Range, { ref: handleRangeRef, type: "range", name: name, min: min, max: max, step: step, value: value, onInput: handleChange, onClick: handleClick }, void 0), !!tooltipText && isTooltipVisible && ((0, jsx_runtime_1.jsx)(S_Tooltip, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, styleTheme: "caption2Regular", colorOverride: "ui_cpnt_textlabel_button_tooltip", singleLineMode: "use" }, void 0) }, void 0))] }), void 0)] }), void 0) }), void 0), suffixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { spacingType: "width", size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: suffixText, styleTheme: "caption2Bold", colorTheme: state === 'normal' ? 'sysTextSecondary' : 'sysTextTertiary', singleLineMode: "use" }, void 0)] }, void 0))] }), void 0));
 }
 var S_SliderBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n"])));
 var S_SliderWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n  width: ", ";\n"], ["\n  display: flex;\n  position: relative;\n  width: ", ";\n"])), function (_a) {
@@ -170,7 +158,7 @@ var S_Slider = styled_components_1.default.div(templateObject_4 || (templateObje
     }
     return '324px';
 });
-var S_Track = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  background-image: ", ";\n  background-repeat: no-repeat;\n  background-size: ", ";\n  border-radius: 2px;\n  height: 4px;\n  position: absolute;\n  width: inherit;\n"], ["\n  background-color: ", ";\n  background-image: ", ";\n  background-repeat: no-repeat;\n  background-size: ", ";\n  border-radius: 2px;\n  height: 4px;\n  position: absolute;\n  width: inherit;\n"])), function (_a) {
+var S_Track = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  background-image: ", ";\n  background-repeat: no-repeat;\n  border-radius: 2px;\n  height: 4px;\n  position: absolute;\n  width: inherit;\n"], ["\n  background-color: ", ";\n  background-image: ", ";\n  background-repeat: no-repeat;\n  border-radius: 2px;\n  height: 4px;\n  position: absolute;\n  width: inherit;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_slider_track;
 }, function (_a) {
@@ -178,19 +166,13 @@ var S_Track = styled_components_1.default.div(templateObject_5 || (templateObjec
     return isDisabled
         ? "linear-gradient(" + theme.ui_cpnt_slider_track_disabled + ", " + theme.ui_cpnt_slider_track_disabled + ")"
         : "linear-gradient(" + theme.ui_cpnt_slider_track_active + ", " + theme.ui_cpnt_slider_track_active + ")";
-}, function (_a) {
-    var thumbPercentage = _a.thumbPercentage;
-    return thumbPercentage + "% 100%";
 });
-var S_Thumb = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 100%;\n  box-shadow: ", ";\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  left: ", "%;\n  position: absolute;\n  transform: translateX(-10px);\n  width: 20px;\n"], ["\n  background-color: ", ";\n  border-radius: 100%;\n  box-shadow: ", ";\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  left: ", "%;\n  position: absolute;\n  transform: translateX(-10px);\n  width: 20px;\n"])), function (_a) {
+var S_Thumb = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 100%;\n  box-shadow: ", ";\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  position: absolute;\n  transform: translateX(-10px);\n  width: 20px;\n"], ["\n  background-color: ", ";\n  border-radius: 100%;\n  box-shadow: ", ";\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  position: absolute;\n  transform: translateX(-10px);\n  width: 20px;\n"])), function (_a) {
     var theme = _a.theme, isDisabled = _a.isDisabled;
     return isDisabled ? theme.ui_cpnt_slider_thumb_disabled : theme.ui_cpnt_slider_thumb_normal;
 }, function (_a) {
     var theme = _a.theme, isTouching = _a.isTouching, isDisabled = _a.isDisabled;
     return isTouching && !isDisabled ? "0 0 0 8px " + theme.ui_cpnt_slider_thumb_pressed_circle : 'none';
-}, function (_a) {
-    var thumbPercentage = _a.thumbPercentage;
-    return thumbPercentage;
 });
 var S_Range = styled_components_1.default.input(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  clip: rect(0 0 0 0);\n  height: 100%;\n  margin: 0;\n  outline: none;\n  position: absolute;\n  width: 100%;\n"], ["\n  clip: rect(0 0 0 0);\n  height: 100%;\n  margin: 0;\n  outline: none;\n  position: absolute;\n  width: 100%;\n"])));
 exports.default = (0, react_1.forwardRef)(Slider);

package/package.json

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

package/release-note.md

@@ -1,32 +1,16 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.1.8]
+## [v2.1.10]
 ## daily|https://design.storybook.publ.biz/
 
-### Package
-* type
-    * SegmentedButtonGroupValueOption export 처리
 ### Components
-* BasicButtonGroup
-    * tooltipText prop 추가
-    * tooltipPosition prop 추가
-* ContextMenuItem
-    * option에 fontWeight 추가
-    * displayType 조건에 따른 내부 간격 수정
-* Dropdown
-    * fontWeight prop 추가
-    * displayType 조건에 따른 내부 간격 수정
-* Icon
-    * 기존 아이콘 개선 및 추가
-* IconButton
-    * 툴팁 텍스트가 있는 경우, disabled여도 툴팁 텍스트가 뜨도록 변경
-* SegmentedButtonGroup
-    * selectedType prop명 selectionType으로 변경
-    * selectionType의 형태가 반대로 구현되었던 부분 수정
-    * tooltipText prop 추가
-    * tooltipPosition prop 추가
-* UploadIconButton
-    * 툴팁 텍스트가 있는 경우, disabled여도 툴팁 텍스트가 뜨도록 변경
-* TextField
-    * fontWeight prop 추가
-* TextLabel
-    * styleTheme prop에 form1Bold, form2Bold 추가
+* Icon 수정 및 추가
+    * ic_information 추가
+    * ic_light_bulb 추가
+    * ic_menu_design 추가
+* Slider
+    * min이 0이 아닌경우에 thumb가 track을 벗어나는 이슈 수정
+    * Slider의 Thumb위치가 prop으로 전달되는 value에 의해 계산되어 렌더링 되도록 수정
+        * defaultValue prop 삭제
+        * value prop 추가
+### Color
+    * 컬러 키 값 23.07.21 21시 02분 기준 싱크