@agnos-ui/core 0.0.1-alpha.2 → 0.0.1-alpha.4

package/accordion.d.ts

@@ -126,6 +126,12 @@ export interface AccordionProps extends WidgetsCommonPropsAndState {
      * It is a prop of the accordion-item.
      */
     itemBodyClass: string;
+    /**
+     * The html tag to use for the accordion-item-header.
+     *
+     * It is a prop of the accordion-item.
+     */
+    itemHeadingTag: string;
 }
 export interface AccordionState extends WidgetsCommonPropsAndState {
     /**
@@ -263,6 +269,10 @@ export interface AccordionItemCommonPropsAndState {
      * Classes to add on the accordion-item body DOM element.
      */
     itemBodyClass: string;
+    /**
+     * The html tag to use for the accordion-item-header.
+     */
+    itemHeadingTag: string;
 }
 export interface AccordionItemProps extends AccordionItemCommonPropsAndState {
     /**

package/accordion.js

@@ -35,11 +35,12 @@ const defaultAccordionConfig = {
     onHidden: noop,
     className: '',
     itemId: '',
-    itemDestroyOnHide: false,
+    itemDestroyOnHide: true,
     itemDisabled: false,
     itemVisible: false,
     itemAnimation: true,
     itemTransition: collapseVerticalTransition,
+    itemHeadingTag: '',
     onItemShown: noop,
     onItemHidden: noop,
     onItemVisibleChange: noop,
@@ -70,6 +71,7 @@ const defaultItemConfig = {
     itemButtonClass: defaultAccordionConfig.itemButtonClass,
     itemCollapseClass: defaultAccordionConfig.itemCollapseClass,
     itemBodyClass: defaultAccordionConfig.itemBodyClass,
+    itemHeadingTag: defaultAccordionConfig.itemHeadingTag,
 };
 const accordionItemProps = Object.keys(defaultItemConfig);
 /**
@@ -97,6 +99,7 @@ const configAccordionValidator = {
     itemButtonClass: typeString,
     itemCollapseClass: typeString,
     itemBodyClass: typeString,
+    itemHeadingTag: typeString,
 };
 const configItemValidator = {
     itemId: typeString,
@@ -113,6 +116,7 @@ const configItemValidator = {
     itemButtonClass: typeString,
     itemCollapseClass: typeString,
     itemBodyClass: typeString,
+    itemHeadingTag: typeString,
 };
 function createAccordionItem(accordionOnShown, accordionOnHidden, config) {
     const [{ itemAnimation$, itemTransition$, itemDestroyOnHide$, onItemShown$, onItemHidden$, onItemVisibleChange$, itemVisible$, itemId$: _dirtyItemId$, itemDisabled$, ...stateProps }, patch,] = writablesForProps(defaultItemConfig, config, configItemValidator);
@@ -178,7 +182,7 @@ function createAccordionItem(accordionOnShown, accordionOnHidden, config) {
  * @returns a new accordion widget instance
  */
 export function createAccordion(config) {
-    const [{ closeOthers$, onShown$, onHidden$, itemId$, itemAnimation$, itemClass$, itemDisabled$, itemVisible$, itemTransition$, itemDestroyOnHide$, itemBodyClass$, itemButtonClass$, itemCollapseClass$, itemHeaderClass$, onItemVisibleChange$, onItemHidden$, onItemShown$, slotItemStructure$, slotItemBody$, slotItemHeader$, ...stateProps }, patch,] = writablesForProps(defaultAccordionConfig, config, configAccordionValidator);
+    const [{ closeOthers$, onShown$, onHidden$, itemId$, itemAnimation$, itemClass$, itemDisabled$, itemVisible$, itemTransition$, itemDestroyOnHide$, itemBodyClass$, itemButtonClass$, itemCollapseClass$, itemHeaderClass$, itemHeadingTag$, onItemVisibleChange$, onItemHidden$, onItemShown$, slotItemStructure$, slotItemBody$, slotItemHeader$, ...stateProps }, patch,] = writablesForProps(defaultAccordionConfig, config, configAccordionValidator);
     const accordionItemConfig = {
         itemId: itemId$,
         itemClass: itemClass$,
@@ -191,6 +195,7 @@ export function createAccordion(config) {
         itemButtonClass: itemButtonClass$,
         itemCollapseClass: itemCollapseClass$,
         itemHeaderClass: itemHeaderClass$,
+        itemHeadingTag: itemHeadingTag$,
         onItemVisibleChange: onItemVisibleChange$,
         onItemHidden: onItemHidden$,
         onItemShown: onItemShown$,

package/config.d.ts

@@ -6,6 +6,7 @@ import type { RatingProps } from './rating';
 import type { SelectProps } from './select';
 import type { AccordionProps } from './accordion';
 import type { ProgressbarProps } from './progressbar';
+import type { SliderProps } from './slider';
 export type Partial2Levels<T> = Partial<{
     [Level1 in keyof T]: Partial<T[Level1]>;
 }>;
@@ -73,4 +74,8 @@ export interface WidgetsConfig {
      * the progress bar widget config
      */
     progressbar: ProgressbarProps;
+    /**
+     * slider widget config
+     */
+    slider: SliderProps;
 }

package/index.d.ts

@@ -12,3 +12,4 @@ export * from './accordion';
 export * from './commonProps';
 export * from './progressbar';
 export * from './extendWidget';
+export * from './slider';

package/index.js

@@ -12,3 +12,4 @@ export * from './accordion';
 export * from './commonProps';
 export * from './progressbar';
 export * from './extendWidget';
+export * from './slider';

package/package.json

@@ -10,7 +10,8 @@
 		"alert",
 		"modal",
 		"pagination",
-		"rating"
+		"rating",
+		"slider"
 	],
 	"type": "module",
 	"main": "./index.js",
@@ -26,7 +27,7 @@
 		"@amadeus-it-group/tansu": "0.0.23"
 	},
 	"sideEffects": false,
-	"version": "v0.0.1-alpha.2",
+	"version": "0.0.1-alpha.4",
 	"homepage": "https://amadeusitgroup.github.io/AgnosUI/latest/",
 	"bugs": "https://github.com/AmadeusITGroup/AgnosUI/issues",
 	"license": "MIT",

package/services/index.d.ts

@@ -6,3 +6,4 @@ export * from './portal';
 export * from './stores';
 export * from './writables';
 export * from './navManager';
+export * from './isFocusable';

package/services/index.js

@@ -6,3 +6,4 @@ export * from './portal';
 export * from './stores';
 export * from './writables';
 export * from './navManager';
+export * from './isFocusable';

package/services/isFocusable.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Returns true if the given HTML element is programmatically focusable.
+ * Warning: this is a best-effort approximation of whether the element is really focusable.
+ * It may not handle all use cases accurately.
+ *
+ * @param element - element to test
+ * @returns true if the element is programmatically focusable.
+ */
+export declare const isFocusable: (element: HTMLElement) => boolean;

package/services/isFocusable.js

@@ -0,0 +1,35 @@
+const isInertOrInvisible = (element) => {
+    let curElement = element;
+    while (curElement) {
+        const style = getComputedStyle(curElement);
+        if (curElement.inert || curElement.hidden || style.display === 'none' || style.visibility === 'hidden') {
+            return true;
+        }
+        curElement = curElement.parentElement;
+    }
+    return false;
+};
+const checkNotDisabled = (element) => {
+    if (element.disabled) {
+        return false;
+    }
+    const parentFieldset = element.parentElement?.closest('fieldset');
+    return parentFieldset ? checkNotDisabled(parentFieldset) : true;
+};
+const isFocusableOtherTags = (element) => element.isContentEditable || !!element.hasAttribute('tabindex');
+const isFocusableByTagName = {
+    INPUT: (element) => element.type !== 'hidden' && checkNotDisabled(element),
+    SELECT: checkNotDisabled,
+    TEXTAREA: checkNotDisabled,
+    BUTTON: checkNotDisabled,
+    A: (element) => !!element.href || isFocusableOtherTags(element),
+};
+/**
+ * Returns true if the given HTML element is programmatically focusable.
+ * Warning: this is a best-effort approximation of whether the element is really focusable.
+ * It may not handle all use cases accurately.
+ *
+ * @param element - element to test
+ * @returns true if the element is programmatically focusable.
+ */
+export const isFocusable = (element) => !isInertOrInvisible(element) && (isFocusableByTagName[element.tagName] ?? isFocusableOtherTags)(element);

package/slider.d.ts

@@ -0,0 +1,193 @@
+import type { WidgetsCommonPropsAndState } from './commonProps';
+import type { PropsConfig } from './services';
+import type { Directive, Widget } from './types';
+export interface ProgressDisplayOptions {
+    /**
+     * Left offset of the progress in %
+     */
+    left: number;
+    /**
+     * Bottom offset of the progresss in %
+     */
+    bottom: number;
+    /**
+     * Width of the progress in %
+     */
+    width: number;
+    /**
+     * Height of hte progress in %
+     */
+    height: number;
+}
+export interface HandleDisplayOptions {
+    /**
+     * Left offset of the handle in %
+     */
+    left: number;
+    /**
+     * Top offset of the handle in %
+     */
+    top: number;
+}
+export interface SliderCommonPropsAndState extends WidgetsCommonPropsAndState {
+    /**
+     * Minimum value that can be assigned to the slider
+     */
+    min: number;
+    /**
+     * Maximum value that can be assigned to the slider
+     */
+    max: number;
+    /**
+     * Unit value between slider steps
+     */
+    stepSize: number;
+    /**
+     * If `true` slider value cannot be changed but the slider is still focusable
+     */
+    readonly: boolean;
+    /**
+     * If `true` slider value cannot be changed and the slider cannot be focused
+     */
+    disabled: boolean;
+    /**
+     * If `true` is vertically positioned otherwise it is horizontal
+     */
+    vertical: boolean;
+    /**
+     * Current slider values
+     */
+    values: number[];
+}
+export interface SliderState extends SliderCommonPropsAndState {
+    /**
+     * Sorted slider values
+     */
+    sortedValues: number[];
+    /**
+     * Combined label left offset in %
+     */
+    combinedLabelPositionLeft: number;
+    /**
+     * Combined label top offset in %
+     */
+    combinedLabelPositionTop: number;
+    /**
+     * If `visible` the minimum label will be displayed
+     */
+    minValueLabelDisplay: string;
+    /**
+     * If `visible` the maximum label will be displayed
+     */
+    maxValueLabelDisplay: string;
+    /**
+     * If `visible` the label when the handles are close is displayed
+     */
+    combinedLabelDisplay: string;
+    /**
+     * Array of the sorted handles to display
+     */
+    sortedHandles: {
+        value: number;
+        id: number;
+    }[];
+    /**
+     * Array of objects representing progress display options
+     */
+    progressDisplayOptions: ProgressDisplayOptions[];
+    /**
+     * Array of objects representing handle display options
+     */
+    handleDisplayOptions: HandleDisplayOptions[];
+}
+export interface SliderProps extends SliderCommonPropsAndState {
+    /**
+     * An event emitted when slider values are changed
+     *
+     * Event payload equals to the updated slider values
+     */
+    onValuesChange: (values: number[]) => void;
+}
+export interface SliderApi {
+}
+export interface SliderDirectives {
+    /**
+     * Directive to get the slider component elementRef
+     */
+    sliderDirective: Directive;
+    /**
+     * Directive to get the minLabel elementRef
+     */
+    minLabelDirective: Directive;
+    /**
+     * Directive to get the maxLabel elementRef
+     */
+    maxLabelDirective: Directive;
+}
+export interface SliderActions {
+    /**
+     * Method to handle click on the slider
+     * @param event - mouse event
+     */
+    click(event: MouseEvent): void;
+    /**
+     * Method to process the keyboard event
+     * @param event - keyboard event object
+     * @param handleNumber - id of the modified handle
+     */
+    keydown(event: KeyboardEvent, handleNumber: number): void;
+    /**
+     * Method describing the behavior of the slider handle on mouse down event
+     * @param event - mouse event
+     * @param handleId - numeric id of the handle
+     */
+    mouseDown(event: MouseEvent, handleId: number): void;
+}
+export type SliderWidget = Widget<SliderProps, SliderState, SliderApi, SliderActions, SliderDirectives>;
+/**
+ * Returns a shallow copy of the default slider config.
+ * @returns a copy of the default config
+ */
+export declare function getSliderDefaultConfig(): {
+    /**
+     * An event emitted when slider values are changed
+     *
+     * Event payload equals to the updated slider values
+     */
+    onValuesChange: (values: number[]) => void;
+    /**
+     * Minimum value that can be assigned to the slider
+     */
+    min: number;
+    /**
+     * Maximum value that can be assigned to the slider
+     */
+    max: number;
+    /**
+     * Unit value between slider steps
+     */
+    stepSize: number;
+    /**
+     * If `true` slider value cannot be changed but the slider is still focusable
+     */
+    readonly: boolean;
+    /**
+     * If `true` slider value cannot be changed and the slider cannot be focused
+     */
+    disabled: boolean;
+    /**
+     * If `true` is vertically positioned otherwise it is horizontal
+     */
+    vertical: boolean;
+    /**
+     * Current slider values
+     */
+    values: number[];
+    className: string;
+};
+/**
+ * Create a slider widget with given config props
+ * @param config - an optional slider config
+ * @returns a SliderWidget
+ */
+export declare function createSlider(config?: PropsConfig<SliderProps>): SliderWidget;

package/slider.js

@@ -0,0 +1,289 @@
+import { computed, derived, writable } from '@amadeus-it-group/tansu';
+import { bindableDerived, createStoreDirective, writablesForProps } from './services';
+import { stateStores } from './services/stores';
+import { typeArray, typeBoolean, typeFunction, typeNumber } from './services/writables';
+import { noop } from './utils';
+const defaultSliderConfig = {
+    min: 0,
+    max: 100,
+    stepSize: 1,
+    readonly: false,
+    disabled: false,
+    vertical: false,
+    className: '',
+    onValuesChange: noop,
+    values: [0],
+};
+/**
+ * Returns a shallow copy of the default slider config.
+ * @returns a copy of the default config
+ */
+export function getSliderDefaultConfig() {
+    return { ...defaultSliderConfig };
+}
+const configValidator = {
+    min: typeNumber,
+    max: typeNumber,
+    stepSize: typeNumber,
+    readonly: typeBoolean,
+    disabled: typeBoolean,
+    vertical: typeBoolean,
+    onValuesChange: typeFunction,
+    values: typeArray,
+};
+/**
+ * Create a slider widget with given config props
+ * @param config - an optional slider config
+ * @returns a SliderWidget
+ */
+export function createSlider(config) {
+    const [{ 
+    // dirty inputs that need adjustment:
+    min$: _dirtyMinimum$, max$: _dirtyMaximum$, stepSize$: _dirtyStepSize$, values$: _dirtyValues$, onValuesChange$, ...stateProps }, patch,] = writablesForProps(defaultSliderConfig, config, configValidator);
+    const { vertical$, disabled$, readonly$ } = stateProps;
+    let _prevCoordinate = -1;
+    // clean inputs adjustment
+    const min$ = computed(() => {
+        if (_dirtyMinimum$() === _dirtyMaximum$())
+            return defaultSliderConfig.min;
+        return Math.min(_dirtyMinimum$(), _dirtyMaximum$());
+    });
+    const max$ = computed(() => {
+        if (_dirtyMinimum$() === _dirtyMaximum$())
+            return defaultSliderConfig.max;
+        return Math.max(_dirtyMinimum$(), _dirtyMaximum$());
+    });
+    const stepSize$ = computed(() => _dirtyStepSize$() || defaultSliderConfig.stepSize);
+    const values$ = bindableDerived(onValuesChange$, [_dirtyValues$], ([dirtyValues]) => dirtyValues.map((dv) => computeCleanValue(dv)), (a, b) => a.every((val, index) => val === b[index]));
+    // computed
+    const { directive: sliderDirective, element$: sliderDom$ } = createStoreDirective();
+    const { directive: minLabelDirective, element$: minLabelDom$ } = createStoreDirective();
+    const { directive: maxLabelDirective, element$: maxLabelDom$ } = createStoreDirective();
+    const sliderResized$ = derived(sliderDom$, (sliderDom, set) => {
+        if (!sliderDom) {
+            set({});
+            return;
+        }
+        const resizeObserver = new ResizeObserver(() => {
+            set({});
+        });
+        resizeObserver.observe(sliderDom);
+        return () => resizeObserver.disconnect();
+    }, {});
+    const updateSliderSize$ = writable({});
+    const sliderDomRect$ = computed(() => {
+        sliderResized$();
+        updateSliderSize$();
+        return sliderDom$()?.getBoundingClientRect() ?? {};
+    }, {
+        equal: Object.is,
+    });
+    const minLabelDomRect$ = computed(() => {
+        sliderResized$();
+        updateSliderSize$();
+        return minLabelDom$()?.getBoundingClientRect() ?? {};
+    }, {
+        equal: (a, b) => Object.is(a, b),
+    });
+    const maxLabelDomRect$ = computed(() => {
+        sliderResized$();
+        updateSliderSize$();
+        return maxLabelDom$()?.getBoundingClientRect() ?? {};
+    }, {
+        equal: (a, b) => Object.is(a, b),
+    });
+    const sliderDomRectOffset$ = computed(() => (vertical$() ? sliderDomRect$().top : sliderDomRect$().left));
+    const sliderDomRectSize$ = computed(() => (vertical$() ? sliderDomRect$().height : sliderDomRect$().width));
+    const sortedValues$ = computed(() => [...values$()].sort((a, b) => a - b));
+    const sortedHandles$ = computed(() => values$()
+        .map((val, index) => {
+        return { id: index, value: val };
+    })
+        .sort((a, b) => a.value - b.value));
+    const valuesPercent$ = computed(() => values$().map((val) => percentCompute(val)));
+    const sortedValuesPercent$ = computed(() => [...valuesPercent$()].sort((a, b) => a - b));
+    const minLabelWidth$ = computed(() => (minLabelDomRect$().width / sliderDomRectSize$()) * 100);
+    const maxLabelWidth$ = computed(() => (maxLabelDomRect$().width / sliderDomRectSize$()) * 100);
+    const minValueLabelDisplay$ = computed(() => (valuesPercent$().some((percent) => percent < minLabelWidth$() + 1) ? 'hidden' : 'visible'));
+    const maxValueLabelDisplay$ = computed(() => (valuesPercent$().some((percent) => percent > 100 - maxLabelWidth$() - 1) ? 'hidden' : 'visible'));
+    // TODO define the intersection value
+    const combinedLabelDisplay$ = computed(() => (values$().length == 2 && Math.abs(values$()[0] - values$()[1]) < 10 ? 'visible' : 'hidden'));
+    const isInteractable$ = computed(() => !disabled$() && !readonly$());
+    const combinedLabelPositionLeft$ = computed(() => vertical$() || sortedValuesPercent$().length != 2 ? 0 : (sortedValuesPercent$()[0] + sortedValuesPercent$()[1]) / 2);
+    const combinedLabelPositionTop$ = computed(() => vertical$() && sortedValuesPercent$().length == 2 ? 100 - (sortedValuesPercent$()[0] + sortedValuesPercent$()[1]) / 2 : 0);
+    // const handleTooltipLeft$ = computed(() => (vertical$() ? Array(valuesPercent$().length).fill(0) : valuesPercent$()));
+    // const handleTooltipTop$ = computed(() => (vertical$() ? valuesPercent$().map((vp) => 100 - vp) : Array(valuesPercent$().length).fill(0)));
+    const handleDisplayOptions$ = computed(() => valuesPercent$().map((vp) => {
+        return {
+            left: vertical$() ? 0 : vp,
+            top: vertical$() ? 100 - vp : 0,
+        };
+    }));
+    const progressDisplayOptions$ = computed(() => {
+        if (sortedValuesPercent$().length === 1) {
+            return [
+                {
+                    left: 0,
+                    bottom: 0,
+                    width: vertical$() ? 100 : sortedValuesPercent$()[0],
+                    height: vertical$() ? sortedValuesPercent$()[0] : 100,
+                },
+            ];
+        }
+        else {
+            return sortedValuesPercent$()
+                .map((svp, index, array) => {
+                return {
+                    left: vertical$() ? 0 : svp,
+                    bottom: vertical$() ? svp : 0,
+                    width: vertical$() ? 100 : index === array.length - 1 ? svp : array[index + 1] - svp,
+                    height: vertical$() ? (index === array.length - 1 ? svp : array[index + 1] - svp) : 100,
+                };
+            })
+                .slice(0, sortedValuesPercent$().length - 1);
+        }
+    });
+    // functions
+    const computeCleanValue = (value) => {
+        if (value >= max$()) {
+            return max$();
+        }
+        else if (value <= min$()) {
+            return min$();
+        }
+        const indexMin = Math.floor(value / stepSize$());
+        return value % stepSize$() < stepSize$() / 2 ? indexMin * stepSize$() : (indexMin + 1) * stepSize$();
+    };
+    const percentCompute = (value) => {
+        return ((value - min$()) * 100) / (max$() - min$());
+    };
+    const getClosestSliderHandle = (clickedPercent) => {
+        if (values$().length === 1) {
+            return 0;
+        }
+        const closestBigger = sortedValues$().find((sv) => sv > clickedPercent * 100);
+        const closestBiggerIndex = closestBigger ? sortedValues$().indexOf(closestBigger) : sortedValues$().length - 1;
+        const midPoint = sortedValues$()[closestBiggerIndex - 1] + (sortedValues$()[closestBiggerIndex] - sortedValues$()[closestBiggerIndex - 1]) / 2;
+        let closestValue;
+        if (clickedPercent * 100 <= midPoint) {
+            closestValue = sortedValues$()[closestBiggerIndex - 1];
+        }
+        else {
+            closestValue = sortedValues$()[closestBiggerIndex];
+        }
+        return values$().indexOf(closestValue);
+    };
+    const adjustCoordinate = (clickedCoordinate, handleNumber) => {
+        if (isInteractable$()) {
+            const clickedPercent = vertical$()
+                ? (sliderDomRectSize$() - clickedCoordinate + sliderDomRectOffset$()) / sliderDomRectSize$()
+                : (clickedCoordinate - sliderDomRectOffset$()) / sliderDomRectSize$();
+            const derivedHandleIndex = handleNumber ?? getClosestSliderHandle(clickedPercent);
+            const newValue = clickedPercent * (max$() - min$()) + min$();
+            _dirtyValues$.update((dh) => {
+                dh = [...dh];
+                dh[derivedHandleIndex] = newValue;
+                return dh;
+            });
+        }
+    };
+    return {
+        ...stateStores({
+            min$,
+            max$,
+            stepSize$,
+            values$,
+            sortedValues$,
+            sortedHandles$,
+            minValueLabelDisplay$,
+            maxValueLabelDisplay$,
+            combinedLabelDisplay$,
+            isInteractable$,
+            combinedLabelPositionLeft$,
+            combinedLabelPositionTop$,
+            progressDisplayOptions$,
+            handleDisplayOptions$,
+            ...stateProps,
+        }),
+        patch,
+        api: {},
+        directives: {
+            sliderDirective,
+            minLabelDirective,
+            maxLabelDirective,
+        },
+        actions: {
+            click(event) {
+                updateSliderSize$.set({});
+                adjustCoordinate(vertical$() ? event.clientY : event.clientX);
+            },
+            keydown(event, handleIndex) {
+                const { key } = event;
+                if (isInteractable$()) {
+                    switch (key) {
+                        case 'ArrowDown':
+                        case 'ArrowLeft':
+                            _dirtyValues$.update((value) => {
+                                value = [...value];
+                                value[handleIndex] = values$()[handleIndex] - stepSize$();
+                                return value;
+                            });
+                            break;
+                        case 'ArrowUp':
+                        case 'ArrowRight':
+                            _dirtyValues$.update((value) => {
+                                value = [...value];
+                                value[handleIndex] = values$()[handleIndex] + stepSize$();
+                                return value;
+                            });
+                            break;
+                        case 'Home':
+                            _dirtyValues$.update((value) => {
+                                value = [...value];
+                                value[handleIndex] = min$();
+                                return value;
+                            });
+                            break;
+                        case 'End':
+                            _dirtyValues$.update((value) => {
+                                value = [...value];
+                                value[handleIndex] = max$();
+                                return value;
+                            });
+                            break;
+                        case 'PageUp':
+                            // TODO it is optional in accessibility guidelines, so define the skip value for steps and write unit test
+                            break;
+                        case 'PageDown':
+                            // TODO it is optional in accessibility guidelines, so define the skip value for steps and write unit test
+                            break;
+                        default:
+                            return;
+                    }
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+            },
+            mouseDown(event, handleId) {
+                event.preventDefault();
+                const handleDrag = (e) => {
+                    e.preventDefault();
+                    const newCoord = vertical$() ? e.clientY : e.clientX;
+                    event.target.focus();
+                    if (_prevCoordinate !== newCoord) {
+                        _prevCoordinate = newCoord;
+                        adjustCoordinate(newCoord, handleId);
+                    }
+                };
+                if (isInteractable$()) {
+                    event.target.focus();
+                    document.addEventListener('mousemove', handleDrag);
+                    // TODO mouse up doesn't work outside the handle area
+                    document.addEventListener('mouseup', () => {
+                        document.removeEventListener('mousemove', handleDrag);
+                    }, { once: true });
+                }
+            },
+        },
+    };
+}