draft-components 2.10.2 → 2.11.0

package/dist/components/date-picker/date-range.js

@@ -1,5 +1,7 @@
 import { isSameDay, toDateISO } from './date-helpers.js';
 export class DateRange {
+    start;
+    end;
     constructor(start, end) {
         if (start > end) {
             [start, end] = [end, start];

package/dist/components/filtered-search/model/string-filter.js

@@ -7,6 +7,10 @@ const OPERATORS = {
     notContain: 'NOT_CONTAIN',
 };
 export class StringFilter extends AbstractFilter {
+    static Type = TYPE;
+    static Operators = OPERATORS;
+    config;
+    state;
     constructor(config, state) {
         super();
         this.config = config;
@@ -37,5 +41,3 @@ export class StringFilter extends AbstractFilter {
         return this.value === '';
     }
 }
-StringFilter.Type = TYPE;
-StringFilter.Operators = OPERATORS;

package/dist/components/filtered-search/model/string-set-filter.js

@@ -5,6 +5,10 @@ const OPERATORS = {
     notIn: 'NOT_IN',
 };
 export class StringSetFilter extends AbstractFilter {
+    static Type = TYPE;
+    static Operators = OPERATORS;
+    config;
+    state;
     constructor(config, state) {
         super();
         this.config = config;
@@ -35,5 +39,3 @@ export class StringSetFilter extends AbstractFilter {
         return this.value.length === 0;
     }
 }
-StringSetFilter.Type = TYPE;
-StringSetFilter.Operators = OPERATORS;

package/dist/components/slider/range-slider.d.ts

@@ -23,8 +23,8 @@ export type RangeSliderProps = {
     max?: number;
     maxThumbName?: string;
     maxThumbAriaLabel?: string;
+    format?: (value: number) => ReactNode;
     value: RangeSliderValue;
     onChange: (value: RangeSliderValue) => void;
-    formatValue?: (value: number) => ReactNode;
 };
-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;
+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, format, onChange, }: RangeSliderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -6,34 +6,34 @@ import { SliderTrack } from './slider-track.js';
 import { SliderThumb } from './slider-thumb.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, }) {
+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, format = numberFormatter.format, onChange, }) {
     const defaultId = useId();
-    const [focusedThumb, setFocusedThumb] = useState('min');
-    const positionMin = calcPosition(range.min, { min, max });
-    const positionMax = calcPosition(range.max, { min, max });
+    const [activeThumb, setActiveThumb] = useState('min');
+    const positionMin = calcPosition(value.min, { min, max });
+    const positionMax = calcPosition(value.max, { min, max });
     let dataListId;
     let tickMarksElement;
     if (tickMarks && tickMarks.length > 0) {
         dataListId = `${defaultId}slider-datalist`;
         tickMarksElement = (_jsx(SliderTickMarks, { tickMarks: tickMarks, dataListId: dataListId, min: min, max: max }));
     }
-    const handleChangeMin = (value) => {
+    const handleChangeMin = (min) => {
         onChange({
-            ...range,
-            min: Math.min(range.max, value),
+            ...value,
+            min: Math.min(value.max, min),
         });
     };
-    const handleFocusMinThumb = () => {
-        setFocusedThumb('min');
+    const handlePointerDownOnMinThumb = () => {
+        setActiveThumb('min');
     };
-    const handleChangeMax = (value) => {
+    const handleChangeMax = (max) => {
         onChange({
-            ...range,
-            max: Math.max(range.min, value),
+            ...value,
+            max: Math.max(value.min, max),
         });
     };
-    const handleFocusMaxThumb = () => {
-        setFocusedThumb('max');
+    const handlePointerDownOnMaxThumb = () => {
+        setActiveThumb('max');
     };
     return (_jsx("fieldset", { id: id, style: style, className: classNames(className, {
             'dc-slider': true,
@@ -44,5 +44,5 @@ export function RangeSlider({ 'aria-label': ariaLabel, id, style, className, dis
                 'dc-slider__body': true,
                 '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: 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] }) }));
+            }), children: [iconLeft, _jsxs(SliderTrack, { positionStart: positionMin, positionEnd: positionMax, children: [tickMarksElement, _jsx(SliderThumb, { name: minThumbName || (name && `${name}[min]`), active: activeThumb === 'min', "aria-label": minThumbAriaLabel, showLabel: showLabels, dataListId: dataListId, position: positionMin, step: step, min: min, max: max, value: value.min, format: format, onChange: handleChangeMin, onPointerDown: handlePointerDownOnMinThumb }), _jsx(SliderThumb, { name: maxThumbName || (name && `${name}[max]`), active: activeThumb === 'max', "aria-label": maxThumbAriaLabel, showLabel: showLabels, dataListId: dataListId, position: positionMax, step: step, min: min, max: max, value: value.max, format: format, onChange: handleChangeMax, onPointerDown: handlePointerDownOnMaxThumb })] }), iconRight] }) }));
 }

package/dist/components/slider/slider-thumb.d.ts

@@ -1,4 +1,4 @@
-import { FocusEventHandler, ReactNode } from 'react';
+import { PointerEventHandler, ReactNode } from 'react';
 export type SliderThumbProps = {
     'aria-label'?: string;
     id?: string;
@@ -12,9 +12,8 @@ export type SliderThumbProps = {
     min: number;
     max: number;
     value: number;
-    formatValue: (value: number) => ReactNode;
+    format: (value: number) => ReactNode;
     onChange: (value: number) => void;
-    onFocus?: FocusEventHandler<HTMLInputElement>;
-    onBlur?: FocusEventHandler<HTMLInputElement>;
+    onPointerDown?: PointerEventHandler<HTMLInputElement>;
 };
-export declare function SliderThumb({ 'aria-label': ariaLabel, id, name, active, disabled, showLabel, dataListId, position, step, min, max, value, formatValue, onChange, onFocus, onBlur, }: SliderThumbProps): import("react/jsx-runtime").JSX.Element;
+export declare function SliderThumb({ 'aria-label': ariaLabel, id, name, active, disabled, showLabel, dataListId, position, step, min, max, value, format, onChange, onPointerDown, }: SliderThumbProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,15 +1,15 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { getOffsetRelativeToThumb } from './get-offset-relative-to-thumb.js';
 import { classNames } from '../../lib/index.js';
-export function SliderThumb({ 'aria-label': ariaLabel, id, name, active, disabled, showLabel, dataListId, position, step, min, max, value, formatValue, onChange, onFocus, onBlur, }) {
+export function SliderThumb({ 'aria-label': ariaLabel, id, name, active, disabled, showLabel, dataListId, position, step, min, max, value, format, onChange, onPointerDown, }) {
     const handleChange = (event) => {
         onChange(event.target.valueAsNumber);
     };
     return (_jsxs(_Fragment, { children: [_jsx("input", { id: id, className: classNames({
                     '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({
+                }), type: "range", name: name, "aria-label": ariaLabel, list: dataListId, step: step, min: min, max: max, disabled: disabled, value: value, onChange: handleChange, onPointerDown: onPointerDown }), showLabel && (_jsx("output", { style: { left: getOffsetRelativeToThumb(position) }, className: classNames({
                     'dc-slider__label': true,
                     'dc-slider__label_active': active,
-                }), htmlFor: id, children: _jsx("span", { className: "dc-slider__label-text", children: formatValue(value) }) }))] }));
+                }), htmlFor: id, children: _jsx("span", { className: "dc-slider__label-text", children: format(value) }) }))] }));
 }

package/dist/components/slider/slider-tick-marks.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { getOffsetRelativeToThumb } from './get-offset-relative-to-thumb.js';
+import { calcPosition } from './calc-position.js';
 export function SliderTickMarks({ dataListId, min, max, tickMarks, }) {
     const options = [];
     const listItems = [];
@@ -7,7 +8,9 @@ export function SliderTickMarks({ dataListId, min, max, tickMarks, }) {
         const { value, label } = tickMarks[index];
         const key = `tick-mark-${value}:${index}`;
         options.push(_jsx("option", { value: value, "data-testid": "slider-data-list-option", children: label }, key));
-        listItems.push(_jsx("li", { className: "dc-slider__tick-mark", "data-value": value, style: { left: getOffsetRelativeToThumb(value / (max - min)) } }, key));
+        listItems.push(_jsx("li", { className: "dc-slider__tick-mark", "data-value": value, style: {
+                left: getOffsetRelativeToThumb(calcPosition(value, { min, max })),
+            } }, key));
     }
     return (_jsxs(_Fragment, { children: [_jsx("datalist", { id: dataListId, children: options }), _jsx("ol", { className: "dc-slider__tick-marks", children: listItems })] }));
 }

package/dist/components/slider/slider.d.ts

@@ -16,7 +16,7 @@ export type SliderProps = {
     min?: number;
     max?: number;
     value: number;
+    format?: (value: number) => ReactNode;
     onChange: (value: number) => void;
-    formatValue?: (value: number) => ReactNode;
 };
-export declare function Slider({ 'aria-label': ariaLabel, id, style, className, disabled, fullWidth, showLabel, iconLeft, iconRight, tickMarks, step, min, max, name, value, onChange, formatValue, }: SliderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Slider({ 'aria-label': ariaLabel, id, style, className, disabled, fullWidth, showLabel, iconLeft, iconRight, tickMarks, step, min, max, name, value, format, onChange, }: SliderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/slider/slider.js

@@ -6,7 +6,7 @@ import { SliderTrack } from './slider-track.js';
 import { SliderThumb } from './slider-thumb.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, }) {
+export function Slider({ 'aria-label': ariaLabel, id, style, className, disabled, fullWidth, showLabel, iconLeft, iconRight, tickMarks, step = 1, min = 0, max = 100, name, value, format = numberFormatter.format, onChange, }) {
     const defaultId = useId();
     const thumbId = id || `${defaultId}slider-thumb`;
     const position = calcPosition(value, { min, max });
@@ -24,5 +24,5 @@ export function Slider({ 'aria-label': ariaLabel, id, style, className, disabled
                 'dc-slider__body': true,
                 '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] }) }));
+            }), 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, format: format })] }), iconRight] }) }));
 }

package/dist/components/toaster/toaster.js

@@ -9,6 +9,10 @@ const isToastShowEvent = (event) => (event instanceof CustomEvent && event.type
 const TOAST_HIDE_EVENT = 'toast_hide';
 const isToastHideEvent = (event) => (event instanceof CustomEvent && event.type === TOAST_HIDE_EVENT);
 export class Toaster {
+    _id;
+    timeoutMs;
+    onShow;
+    onHide;
     constructor(params) {
         this._id = 0;
         this.timeoutMs = params?.timeoutMs || 10000;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "2.10.2",
+  "version": "2.11.0",
   "description": "The React based UI components library.",
   "type": "module",
   "exports": {
@@ -64,12 +64,12 @@
     "@testing-library/jest-dom": "6.2.0",
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.2",
-    "@types/node": "20.10.6",
-    "@types/react": "18.2.46",
+    "@types/node": "20.10.7",
+    "@types/react": "18.2.47",
     "@types/react-dom": "18.2.18",
-    "@typescript-eslint/eslint-plugin": "6.17.0",
-    "@typescript-eslint/parser": "6.17.0",
-    "@vitest/coverage-istanbul": "1.1.2",
+    "@typescript-eslint/eslint-plugin": "6.18.0",
+    "@typescript-eslint/parser": "6.18.0",
+    "@vitest/coverage-istanbul": "1.1.3",
     "autoprefixer": "10.4.16",
     "eslint": "8.56.0",
     "eslint-plugin-jsx-a11y": "6.8.0",
@@ -78,9 +78,9 @@
     "eslint-plugin-storybook": "0.6.15",
     "eslint-plugin-testing-library": "6.2.0",
     "husky": "8.0.3",
-    "jsdom": "23.0.1",
+    "jsdom": "23.2.0",
     "lint-staged": "15.2.0",
-    "postcss": "8.4.32",
+    "postcss": "8.4.33",
     "postcss-import": "16.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -89,8 +89,8 @@
     "stylelint-config-standard": "36.0.0",
     "stylelint-order": "6.0.4",
     "typescript": "5.3.3",
-    "vite": "5.0.10",
-    "vitest": "1.1.2"
+    "vite": "5.0.11",
+    "vitest": "1.1.3"
   },
   "lint-staged": {
     "*.ts?(x)": "npm run lint-js",