draft-components 2.10.0 → 2.10.1

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/get-offset-relative-to-thumb.js

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

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

@@ -5,7 +5,7 @@ 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);
@@ -41,7 +41,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-track.js

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

package/dist/components/slider/slider.js

@@ -5,7 +5,7 @@ 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);
@@ -21,7 +21,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/package.json

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