draft-components 2.10.1 → 2.10.2

package/dist/components/slider/calc-position.d.ts

@@ -0,0 +1,4 @@
+export declare function calcPosition(value: number, opts: {
+    min: number;
+    max: number;
+}): number;

package/dist/components/slider/calc-position.js

@@ -0,0 +1,3 @@
+export function calcPosition(value, opts) {
+    return (value - opts.min) / (opts.max - opts.min);
+}

package/dist/components/slider/get-offset-relative-to-thumb.js

@@ -1,7 +1,7 @@
-import { formatNumber } from '../../lib/index.js';
+import { formatNumber, formatPercent } from '../../lib/index.js';
 export function getOffsetRelativeToThumb(position) {
     return 'calc(' +
-        `${Math.floor(position * 100)}% - ` +
+        `${formatPercent(position)} - ` +
         `var(--dc-slider-thumb-width) * ${formatNumber(position / 2)} + ` +
         `var(--dc-slider-thumb-width) * ${formatNumber((1 - position) / 2)}` +
         ')';

package/dist/components/slider/range-slider.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useState } from 'react';
+import { classNames } from '../../lib/index.js';
+import { calcPosition } from './calc-position.js';
 import { SliderTrack } from './slider-track.js';
 import { SliderThumb } from './slider-thumb.js';
-import { classNames } from '../../lib/index.js';
 import { SliderTickMarks } from './slider-tick-marks.js';
 const numberFormatter = new Intl.NumberFormat();
 export function RangeSlider({ 'aria-label': ariaLabel, id, style, className, disabled, fullWidth, showLabels, iconLeft, iconRight, tickMarks, step = 1, min = 0, minThumbName, minThumbAriaLabel, max = 100, maxThumbName, maxThumbAriaLabel, name, value: range, onChange, formatValue = numberFormatter.format, }) {
     const defaultId = useId();
     const [focusedThumb, setFocusedThumb] = useState('min');
-    const positionMin = range.min / (max - min);
-    const positionMax = range.max / (max - min);
+    const positionMin = calcPosition(range.min, { min, max });
+    const positionMax = calcPosition(range.max, { min, max });
     let dataListId;
     let tickMarksElement;
     if (tickMarks && tickMarks.length > 0) {

package/dist/components/slider/slider-track.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { formatPercent } from '../../lib/index.js';
 export function SliderTrack({ positionStart, positionEnd, children, }) {
-    const start = `${Math.floor(positionStart * 100)}%`;
-    const end = `${Math.floor(positionEnd * 100)}%`;
+    const start = formatPercent(positionStart);
+    const end = formatPercent(positionEnd);
     const background = 'linear-gradient(' +
         'to right, ' +
         `var(--dc-slider-track-bg) ${start}, ` +

package/dist/components/slider/slider.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from 'react';
+import { classNames } from '../../lib/index.js';
+import { calcPosition } from './calc-position.js';
 import { SliderTrack } from './slider-track.js';
 import { SliderThumb } from './slider-thumb.js';
-import { classNames } from '../../lib/index.js';
 import { SliderTickMarks } from './slider-tick-marks.js';
 const numberFormatter = new Intl.NumberFormat();
 export function Slider({ 'aria-label': ariaLabel, id, style, className, disabled, fullWidth, showLabel, iconLeft, iconRight, tickMarks, step = 1, min = 0, max = 100, name, value, onChange, formatValue = numberFormatter.format, }) {
     const defaultId = useId();
     const thumbId = id || `${defaultId}slider-thumb`;
-    const position = value / (max - min);
+    const position = calcPosition(value, { min, max });
     let dataListId;
     let tickMarksElement;
     if (tickMarks && tickMarks.length > 0) {

package/dist/lib/helpers.d.ts

@@ -4,5 +4,5 @@ export declare function assertIfNullable<T>(value: T, message?: string): asserts
 export declare function exhaustiveCheck(value: never, message?: string): never;
 export declare function noop(): undefined;
 export declare function formatNumber(num: number, fractionDigits?: number): number;
-export declare function formatPercent(percent: number): string;
+export declare function formatPercent(percent: number, fractionDigits?: number): string;
 export {};

package/dist/lib/helpers.js

@@ -23,6 +23,6 @@ export function noop() {
 export function formatNumber(num, fractionDigits = 5) {
     return Number(num.toFixed(fractionDigits));
 }
-export function formatPercent(percent) {
-    return `${formatNumber(percent * 100)}%`;
+export function formatPercent(percent, fractionDigits = 2) {
+    return `${formatNumber(percent * 100, fractionDigits)}%`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "2.10.1",
+  "version": "2.10.2",
   "description": "The React based UI components library.",
   "type": "module",
   "exports": {