draft-components 2.10.0 → 2.10.2

package/css/draft-components.css

@@ -1995,6 +1995,7 @@
   /* Label properties */
   --dc-slider-label-gap: 4px;
   --dc-slider-label-height: 24px;
+  --dc-slider-label-max-width: 80px;
   --dc-slider-label-padding-x: 0.5em;
   --dc-slider-label-radius: 6px;
   --dc-slider-label-border: 1px solid var(--dc-white);
@@ -2038,7 +2039,7 @@
   min-height: var(--dc-slider-thumb-height);
 }
 
-.dc-slider__body_has_label {
+.dc-slider__body_has_labels {
   margin-top: calc(
     var(--dc-slider-label-height) +
     var(--dc-slider-label-gap)
@@ -2151,7 +2152,7 @@
   box-shadow: var(--dc-slider-thumb-shadow);
 }
 
-.dc-slider__input-label {
+.dc-slider__label {
   font: var(--dc-text-xs);
   font-variant-numeric: tabular-nums;
   color: var(--dc-slider-label-text-color);
@@ -2169,6 +2170,7 @@
   box-sizing: border-box;
   height: var(--dc-slider-label-height);
   min-width: var(--dc-slider-label-height);
+  max-width: var(--dc-slider-label-max-width);
   padding: 0 var(--dc-slider-label-padding-x);
   transform: translateX(-50%);
   border: var(--dc-slider-label-border);
@@ -2176,8 +2178,14 @@
   background: var(--dc-slider-label-bg);
 }
 
+.dc-slider__label-text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 .dc-slider__input_active,
-.dc-slider__input-label_active {
+.dc-slider__label_active {
   z-index: 1;
 }
 

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/range-slider.d.ts

@@ -11,7 +11,7 @@ export type RangeSliderProps = {
     className?: string;
     disabled?: boolean;
     fullWidth?: boolean;
-    showLabel?: boolean;
+    showLabels?: boolean;
     iconLeft?: ReactNode;
     iconRight?: ReactNode;
     tickMarks?: SliderTickMark[];
@@ -27,4 +27,4 @@ export type RangeSliderProps = {
     onChange: (value: RangeSliderValue) => void;
     formatValue?: (value: number) => ReactNode;
 };
-export declare function RangeSlider({ 'aria-label': ariaLabel, id, style, className, disabled, fullWidth, showLabel, iconLeft, iconRight, tickMarks, step, min, minThumbName, minThumbAriaLabel, max, maxThumbName, maxThumbAriaLabel, name, value: range, onChange, formatValue, }: RangeSliderProps): import("react/jsx-runtime").JSX.Element;
+export declare function RangeSlider({ 'aria-label': ariaLabel, id, style, className, disabled, fullWidth, showLabels, iconLeft, iconRight, tickMarks, step, min, minThumbName, minThumbAriaLabel, max, maxThumbName, maxThumbAriaLabel, name, value: range, onChange, formatValue, }: RangeSliderProps): import("react/jsx-runtime").JSX.Element;

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, showLabel = true, iconLeft, iconRight, tickMarks, step = 1, min = 0, minThumbName, minThumbAriaLabel, max = 100, maxThumbName, maxThumbAriaLabel, name, value: range, onChange, formatValue = numberFormatter.format, }) {
+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) {
@@ -41,7 +42,7 @@ export function RangeSlider({ 'aria-label': ariaLabel, id, style, className, dis
             'dc-slider_full-width': fullWidth,
         }), name: name, disabled: disabled, "aria-label": ariaLabel, children: _jsxs("div", { className: classNames({
                 'dc-slider__body': true,
-                'dc-slider__body_has_label': showLabel,
+                'dc-slider__body_has_labels': showLabels,
                 'dc-slider__body_has_tick-marks': tickMarksElement,
-            }), children: [iconLeft, _jsxs(SliderTrack, { positionStart: positionMin, positionEnd: positionMax, children: [tickMarksElement, _jsx(SliderThumb, { name: minThumbName || (name && `${name}[min]`), active: focusedThumb === 'min', "aria-label": minThumbAriaLabel, showLabel: showLabel, dataListId: dataListId, position: positionMin, step: step, min: min, max: max, value: range.min, formatValue: formatValue, onChange: handleChangeMin, onFocus: handleFocusMinThumb }), _jsx(SliderThumb, { name: maxThumbName || (name && `${name}[max]`), active: focusedThumb === 'max', "aria-label": maxThumbAriaLabel, showLabel: showLabel, dataListId: dataListId, position: positionMax, step: step, min: min, max: max, value: range.max, formatValue: formatValue, onChange: handleChangeMax, onFocus: handleFocusMaxThumb })] }), iconRight] }) }));
+            }), children: [iconLeft, _jsxs(SliderTrack, { positionStart: positionMin, positionEnd: positionMax, children: [tickMarksElement, _jsx(SliderThumb, { name: minThumbName || (name && `${name}[min]`), active: focusedThumb === 'min', "aria-label": minThumbAriaLabel, showLabel: showLabels, dataListId: dataListId, position: positionMin, step: step, min: min, max: max, value: range.min, formatValue: formatValue, onChange: handleChangeMin, onFocus: handleFocusMinThumb }), _jsx(SliderThumb, { name: maxThumbName || (name && `${name}[max]`), active: focusedThumb === 'max', "aria-label": maxThumbAriaLabel, showLabel: showLabels, dataListId: dataListId, position: positionMax, step: step, min: min, max: max, value: range.max, formatValue: formatValue, onChange: handleChangeMax, onFocus: handleFocusMaxThumb })] }), iconRight] }) }));
 }

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

@@ -9,7 +9,7 @@ export function SliderThumb({ 'aria-label': ariaLabel, id, name, active, disable
                     'dc-slider__input': true,
                     'dc-slider__input_active': active,
                 }), type: "range", name: name, "aria-label": ariaLabel, list: dataListId, step: step, min: min, max: max, disabled: disabled, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }), showLabel && (_jsx("output", { style: { left: getOffsetRelativeToThumb(position) }, className: classNames({
-                    'dc-slider__input-label': true,
-                    'dc-slider__input-label_active': active,
-                }), htmlFor: id, children: formatValue(value) }))] }));
+                    'dc-slider__label': true,
+                    'dc-slider__label_active': active,
+                }), htmlFor: id, children: _jsx("span", { className: "dc-slider__label-text", children: formatValue(value) }) }))] }));
 }

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 = true, iconLeft, iconRight, tickMarks, step = 1, min = 0, max = 100, name, value, onChange, formatValue = numberFormatter.format, }) {
+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) {
@@ -21,7 +22,7 @@ export function Slider({ 'aria-label': ariaLabel, id, style, className, disabled
             'dc-slider_full-width': fullWidth,
         }), children: _jsxs("div", { className: classNames({
                 'dc-slider__body': true,
-                'dc-slider__body_has_label': showLabel,
+                'dc-slider__body_has_labels': showLabel,
                 'dc-slider__body_has_tick-marks': tickMarksElement,
             }), children: [iconLeft, _jsxs(SliderTrack, { positionStart: 0, positionEnd: position, children: [tickMarksElement, _jsx(SliderThumb, { id: thumbId, name: name, "aria-label": ariaLabel, disabled: disabled, showLabel: showLabel, dataListId: dataListId, position: position, step: step, min: min, max: max, value: value, onChange: onChange, formatValue: formatValue })] }), iconRight] }) }));
 }

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.0",
+  "version": "2.10.2",
   "description": "The React based UI components library.",
   "type": "module",
   "exports": {