@shoplflow/base 0.36.1 → 0.37.1

package/dist/index.cjs

@@ -6719,13 +6719,13 @@ var generateSteps = (bounds, step, maxSteps = 21) => {
 var validateRange = ({
   min,
   max,
-  defaultRange
+  range
 }) => {
-  if (defaultRange.min < min || defaultRange.max > max) {
-    throw new Error("defaultRange\uAC00 Slider\uC758 \uC804\uCCB4 \uBC94\uC704\uB97C \uBC97\uC5B4\uB0A9\uB2C8\uB2E4.");
+  if (range.min < min || range.max > max) {
+    throw new Error("range\uAC00 Slider\uC758 \uC804\uCCB4 \uBC94\uC704\uB97C \uBC97\uC5B4\uB0A9\uB2C8\uB2E4.");
   }
-  if (defaultRange.min > defaultRange.max) {
-    throw new Error("defaultRange\uAC00 \uC62C\uBC14\uB974\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. \uB2E4\uC2DC \uD655\uC778\uD574\uC8FC\uC138\uC694.");
+  if (range.min > range.max) {
+    throw new Error("range\uAC00 \uC62C\uBC14\uB974\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. \uB2E4\uC2DC \uD655\uC778\uD574\uC8FC\uC138\uC694.");
   }
 };
 var validateStep = ({ min, max, step }) => {
@@ -6767,26 +6767,22 @@ var SliderThumbs = ({
     }
   ) }, index)) });
 };
-var useSlider = ({ bounds, step, defaultRange, handleRange, isDisabled = false }) => {
+var useSlider = ({ bounds, step, range, handleRange, isDisabled = false }) => {
   const { min, max } = bounds;
-  validateRange({ min, max, defaultRange });
+  validateRange({ min, max, range });
   validateStep({ min, max, step });
-  const [range, setRange] = React3.useState([defaultRange.min, defaultRange.max]);
   const trackRef = React3.useRef(null);
   const updateRange = React3.useCallback(
     (index, newValue) => {
-      setRange((prev) => {
-        const newRange = [...prev];
-        if (index === 0) {
-          newRange[0] = Math.min(newValue, newRange[1]);
-        } else if (index === 1) {
-          newRange[1] = Math.max(newValue, newRange[0]);
-        }
-        handleRange == null ? void 0 : handleRange({ min: newRange[0], max: newRange[1] });
-        return newRange;
-      });
+      const newRange = [range.min, range.max];
+      if (index === 0) {
+        newRange[0] = Math.min(newValue, newRange[1]);
+      } else if (index === 1) {
+        newRange[1] = Math.max(newValue, newRange[0]);
+      }
+      handleRange == null ? void 0 : handleRange({ min: newRange[0], max: newRange[1] });
     },
-    [handleRange]
+    [range, handleRange]
   );
   const handleMouseDown = React3.useCallback(
     (index) => (e) => {
@@ -6822,8 +6818,8 @@ var useSlider = ({ bounds, step, defaultRange, handleRange, isDisabled = false }
       const offsetX = e.clientX - rect.left;
       const percentage = offsetX / rect.width * 100;
       const newValue = getValueFromPercentage(percentage, { min, max }, step);
-      const distanceToStart = Math.abs(getPositionPercentage(0, range, { min, max }) - percentage);
-      const distanceToEnd = Math.abs(getPositionPercentage(1, range, { min, max }) - percentage);
+      const distanceToStart = Math.abs(getPositionPercentage(0, [range.min, range.max], { min, max }) - percentage);
+      const distanceToEnd = Math.abs(getPositionPercentage(1, [range.min, range.max], { min, max }) - percentage);
       if (distanceToStart <= distanceToEnd) {
         updateRange(0, newValue);
       } else {
@@ -6832,39 +6828,42 @@ var useSlider = ({ bounds, step, defaultRange, handleRange, isDisabled = false }
     },
     [isDisabled, min, max, step, range, updateRange]
   );
-  const startPosition = getPositionPercentage(0, range, { min, max });
-  const endPosition = getPositionPercentage(1, range, { min, max });
-  const width = endPosition - startPosition;
+  const positions = React3.useMemo(() => {
+    const startPosition = getPositionPercentage(0, [range.min, range.max], { min, max });
+    const endPosition = getPositionPercentage(1, [range.min, range.max], { min, max });
+    const width = endPosition - startPosition;
+    return {
+      start: startPosition,
+      end: endPosition,
+      width
+    };
+  }, [range, min, max]);
   return {
-    range,
+    selectedRange: [range.min, range.max],
     trackRef,
     handleMouseDown,
     handleClickTrack,
-    positions: {
-      start: startPosition,
-      end: endPosition,
-      width
-    }
+    positions
   };
 };
 var Slider = ({
   min = 0,
   max,
   step = 1,
-  defaultRange = { min: 0, max: 0 },
+  range = { min: 0, max: 0 },
   handleRange,
   isDisabled = false,
   selectedColor = "shopl300"
 }) => {
-  const { range, trackRef, handleMouseDown, handleClickTrack, positions } = useSlider({
+  const { selectedRange, trackRef, handleMouseDown, handleClickTrack, positions } = useSlider({
     bounds: { min, max },
     step,
-    defaultRange,
+    range,
     handleRange,
     isDisabled
   });
   return /* @__PURE__ */ jsxRuntime.jsx(SliderContainer, { isDisabled, children: /* @__PURE__ */ jsxRuntime.jsxs(SliderTrack, { ref: trackRef, onClick: handleClickTrack, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SliderSteps, { bounds: { min, max }, step, range }),
+    /* @__PURE__ */ jsxRuntime.jsx(SliderSteps, { bounds: { min, max }, step }),
     /* @__PURE__ */ jsxRuntime.jsx(
       SelectedTrack,
       {
@@ -6880,7 +6879,7 @@ var Slider = ({
         isDisabled,
         selectedColor,
         onMouseDown: handleMouseDown,
-        values: range
+        values: selectedRange
       }
     )
   ] }) });

package/dist/index.d.cts

@@ -1562,7 +1562,7 @@ interface SliderProps {
     /**
      * 초기 선택 범위
      */
-    defaultRange?: {
+    range?: {
         min: number;
         max: number;
     };

package/dist/index.d.ts

@@ -1562,7 +1562,7 @@ interface SliderProps {
     /**
      * 초기 선택 범위
      */
-    defaultRange?: {
+    range?: {
         min: number;
         max: number;
     };

package/dist/index.js

@@ -6692,13 +6692,13 @@ var generateSteps = (bounds, step, maxSteps = 21) => {
 var validateRange = ({
   min,
   max,
-  defaultRange
+  range
 }) => {
-  if (defaultRange.min < min || defaultRange.max > max) {
-    throw new Error("defaultRange\uAC00 Slider\uC758 \uC804\uCCB4 \uBC94\uC704\uB97C \uBC97\uC5B4\uB0A9\uB2C8\uB2E4.");
+  if (range.min < min || range.max > max) {
+    throw new Error("range\uAC00 Slider\uC758 \uC804\uCCB4 \uBC94\uC704\uB97C \uBC97\uC5B4\uB0A9\uB2C8\uB2E4.");
   }
-  if (defaultRange.min > defaultRange.max) {
-    throw new Error("defaultRange\uAC00 \uC62C\uBC14\uB974\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. \uB2E4\uC2DC \uD655\uC778\uD574\uC8FC\uC138\uC694.");
+  if (range.min > range.max) {
+    throw new Error("range\uAC00 \uC62C\uBC14\uB974\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. \uB2E4\uC2DC \uD655\uC778\uD574\uC8FC\uC138\uC694.");
   }
 };
 var validateStep = ({ min, max, step }) => {
@@ -6740,26 +6740,22 @@ var SliderThumbs = ({
     }
   ) }, index)) });
 };
-var useSlider = ({ bounds, step, defaultRange, handleRange, isDisabled = false }) => {
+var useSlider = ({ bounds, step, range, handleRange, isDisabled = false }) => {
   const { min, max } = bounds;
-  validateRange({ min, max, defaultRange });
+  validateRange({ min, max, range });
   validateStep({ min, max, step });
-  const [range, setRange] = useState([defaultRange.min, defaultRange.max]);
   const trackRef = useRef(null);
   const updateRange = useCallback(
     (index, newValue) => {
-      setRange((prev) => {
-        const newRange = [...prev];
-        if (index === 0) {
-          newRange[0] = Math.min(newValue, newRange[1]);
-        } else if (index === 1) {
-          newRange[1] = Math.max(newValue, newRange[0]);
-        }
-        handleRange == null ? void 0 : handleRange({ min: newRange[0], max: newRange[1] });
-        return newRange;
-      });
+      const newRange = [range.min, range.max];
+      if (index === 0) {
+        newRange[0] = Math.min(newValue, newRange[1]);
+      } else if (index === 1) {
+        newRange[1] = Math.max(newValue, newRange[0]);
+      }
+      handleRange == null ? void 0 : handleRange({ min: newRange[0], max: newRange[1] });
     },
-    [handleRange]
+    [range, handleRange]
   );
   const handleMouseDown = useCallback(
     (index) => (e) => {
@@ -6795,8 +6791,8 @@ var useSlider = ({ bounds, step, defaultRange, handleRange, isDisabled = false }
       const offsetX = e.clientX - rect.left;
       const percentage = offsetX / rect.width * 100;
       const newValue = getValueFromPercentage(percentage, { min, max }, step);
-      const distanceToStart = Math.abs(getPositionPercentage(0, range, { min, max }) - percentage);
-      const distanceToEnd = Math.abs(getPositionPercentage(1, range, { min, max }) - percentage);
+      const distanceToStart = Math.abs(getPositionPercentage(0, [range.min, range.max], { min, max }) - percentage);
+      const distanceToEnd = Math.abs(getPositionPercentage(1, [range.min, range.max], { min, max }) - percentage);
       if (distanceToStart <= distanceToEnd) {
         updateRange(0, newValue);
       } else {
@@ -6805,39 +6801,42 @@ var useSlider = ({ bounds, step, defaultRange, handleRange, isDisabled = false }
     },
     [isDisabled, min, max, step, range, updateRange]
   );
-  const startPosition = getPositionPercentage(0, range, { min, max });
-  const endPosition = getPositionPercentage(1, range, { min, max });
-  const width = endPosition - startPosition;
+  const positions = useMemo(() => {
+    const startPosition = getPositionPercentage(0, [range.min, range.max], { min, max });
+    const endPosition = getPositionPercentage(1, [range.min, range.max], { min, max });
+    const width = endPosition - startPosition;
+    return {
+      start: startPosition,
+      end: endPosition,
+      width
+    };
+  }, [range, min, max]);
   return {
-    range,
+    selectedRange: [range.min, range.max],
     trackRef,
     handleMouseDown,
     handleClickTrack,
-    positions: {
-      start: startPosition,
-      end: endPosition,
-      width
-    }
+    positions
   };
 };
 var Slider = ({
   min = 0,
   max,
   step = 1,
-  defaultRange = { min: 0, max: 0 },
+  range = { min: 0, max: 0 },
   handleRange,
   isDisabled = false,
   selectedColor = "shopl300"
 }) => {
-  const { range, trackRef, handleMouseDown, handleClickTrack, positions } = useSlider({
+  const { selectedRange, trackRef, handleMouseDown, handleClickTrack, positions } = useSlider({
     bounds: { min, max },
     step,
-    defaultRange,
+    range,
     handleRange,
     isDisabled
   });
   return /* @__PURE__ */ jsx(SliderContainer, { isDisabled, children: /* @__PURE__ */ jsxs(SliderTrack, { ref: trackRef, onClick: handleClickTrack, children: [
-    /* @__PURE__ */ jsx(SliderSteps, { bounds: { min, max }, step, range }),
+    /* @__PURE__ */ jsx(SliderSteps, { bounds: { min, max }, step }),
     /* @__PURE__ */ jsx(
       SelectedTrack,
       {
@@ -6853,7 +6852,7 @@ var Slider = ({
         isDisabled,
         selectedColor,
         onMouseDown: handleMouseDown,
-        values: range
+        values: selectedRange
       }
     )
   ] }) });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.36.1",
+  "version": "0.37.1",
   "type": "module",
   "license": "Apache-2.0",
   "main": "dist/index.js",
@@ -91,8 +91,8 @@
     "react-dom": "^18.2.0",
     "simplebar-react": "^3.2.6",
     "@shoplflow/hada-assets": "^0.1.3",
-    "@shoplflow/utils": "^0.6.5",
-    "@shoplflow/shopl-assets": "^0.12.3"
+    "@shoplflow/shopl-assets": "^0.12.4",
+    "@shoplflow/utils": "^0.6.5"
   },
   "scripts": {
     "type-check": "tsc --noEmit",