@officesdk/design 0.2.14 → 0.2.15

package/dist/components/esm/index.js

@@ -1054,37 +1054,43 @@ var init_Slider = __esm({
   position: absolute;
   background: ${({ theme: theme2 }) => theme2.colors.palettes.transparency["20"]};
   border-radius: 1000px;
-  ${({ $direction, theme: theme2 }) => $direction === "vertical" ? `
-        top: 0;
-        bottom: 0;
+  ${({ $direction, theme: theme2 }) => {
+      const thumbSize = theme2.components.slider.large.thumbSize;
+      return $direction === "vertical" ? `
+        top: 50%;
         width: ${theme2.components.slider.track.height};
+        height: calc(100% - ${thumbSize});
         left: 50%;
-        transform: translateX(-50%);
+        transform: translate(-50%, -50%);
       ` : `
-        left: 0;
-        right: 0;
+        left: 50%;
+        width: calc(100% - ${thumbSize});
         height: ${theme2.components.slider.track.height};
         top: 50%;
-        transform: translateY(-50%);
-      `}
+        transform: translate(-50%, -50%);
+      `;
+    }}
 `;
     SliderFill = styled.div`
   position: absolute;
   border-radius: ${({ theme: theme2 }) => theme2.components.slider.track.borderRadius};
   background: ${({ $disabled, theme: theme2 }) => $disabled ? theme2.components.slider.track.filledBackgroundDisabled : theme2.components.slider.track.filledBackground};
-  ${({ $direction, $percentage, theme: theme2 }) => $direction === "vertical" ? `
-        bottom: 0;
+  ${({ $direction, $percentage, theme: theme2 }) => {
+      const thumbSize = theme2.components.slider.large.thumbSize;
+      return $direction === "vertical" ? `
+        bottom: calc(${thumbSize} / 2);
         width: ${theme2.components.slider.track.height};
         left: 50%;
         transform: translateX(-50%);
-        height: ${$percentage}%;
+        height: calc((100% - ${thumbSize}) * ${$percentage / 100});
       ` : `
-        left: 0;
+        left: calc(${thumbSize} / 2);
         height: ${theme2.components.slider.track.height};
         top: 50%;
         transform: translateY(-50%);
-        width: ${$percentage}%;
-      `}
+        width: calc((100% - ${thumbSize}) * ${$percentage / 100});
+      `;
+    }}
 `;
     SliderThumb = styled.div`
   position: absolute;
@@ -1094,17 +1100,20 @@ var init_Slider = __esm({
   background: ${({ $disabled, theme: theme2 }) => $disabled ? theme2.components.slider.thumb.backgroundDisabled : theme2.components.slider.thumb.background};
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "grab"};
   box-shadow: ${({ theme: theme2 }) => theme2.components.slider.thumb.boxShadow};
-  ${({ $direction, $percentage, $isDragging }) => $direction === "vertical" ? `
-        bottom: ${$percentage}%;
+  ${({ $direction, $percentage, $isDragging, theme: theme2 }) => {
+      const thumbSize = theme2.components.slider.large.thumbSize;
+      return $direction === "vertical" ? `
+        bottom: calc((100% - ${thumbSize}) * ${$percentage / 100} + ${thumbSize} / 2);
         left: 50%;
         transform: translate(-50%, 50%);
         transition: ${$isDragging ? "none" : "bottom 0.1s ease"};
       ` : `
-        left: ${$percentage}%;
+        left: calc((100% - ${thumbSize}) * ${$percentage / 100} + ${thumbSize} / 2);
         top: 50%;
         transform: translate(-50%, -50%);
         transition: ${$isDragging ? "none" : "left 0.1s ease"};
-      `}
+      `;
+    }}
 
   ${({ $disabled, theme: theme2 }) => !$disabled && `
     &:hover {
@@ -1140,24 +1149,27 @@ var init_Slider = __esm({
       }, [valueMapProp, min, max, step]);
       const effectiveMin = extendedValueMap.start;
       const effectiveMax = extendedValueMap.end;
-      const [internalValue, setInternalValue] = useState(
-        controlledValue ?? defaultValue
-      );
+      const [internalValue, setInternalValue] = useState(controlledValue ?? defaultValue);
       const [isDragging, setIsDragging] = useState(false);
       const containerRef = useRef(null);
+      const thumbRef = useRef(null);
       const value = controlledValue !== void 0 ? controlledValue : internalValue;
       const percentage = valueToVisualPercentage(value, extendedValueMap) * 100;
       const updateValue = useCallback(
         (clientX, clientY) => {
           if (!containerRef.current || disabled) return;
           const rect = containerRef.current.getBoundingClientRect();
+          const thumbRect = thumbRef.current?.getBoundingClientRect();
+          const thumbLength = direction === "vertical" ? thumbRect?.height ?? 0 : thumbRect?.width ?? 0;
+          const containerLength = direction === "vertical" ? rect.height : rect.width;
+          const trackLength = Math.max(containerLength - thumbLength, 0);
           let visualPercent;
           if (direction === "vertical") {
-            const offsetY = rect.bottom - clientY;
-            visualPercent = Math.max(0, Math.min(1, offsetY / rect.height));
+            const offsetY = rect.bottom - clientY - thumbLength / 2;
+            visualPercent = trackLength === 0 ? 0 : Math.max(0, Math.min(1, offsetY / trackLength));
           } else {
-            const offsetX = clientX - rect.left;
-            visualPercent = Math.max(0, Math.min(1, offsetX / rect.width));
+            const offsetX = clientX - rect.left - thumbLength / 2;
+            visualPercent = trackLength === 0 ? 0 : Math.max(0, Math.min(1, offsetX / trackLength));
           }
           const rawValue = visualPercentToValue(visualPercent, extendedValueMap);
           const snappedValue = snapToStep(rawValue, extendedValueMap);
@@ -1258,6 +1270,7 @@ var init_Slider = __esm({
         /* @__PURE__ */ React3.createElement(
           SliderThumb,
           {
+            ref: thumbRef,
             $percentage: percentage,
             $disabled: disabled,
             $isDragging: isDragging,