@vimeo/iris/components/inputs/Slider/Handle.esm.js

Vimeo Design System

import React__default from 'react';
import { HandleStyled, Hidden } from './Slider.style.esm.js';
import { Focus } from '../../../utils/css.esm.js';
import '../../../tslib.es6-7f0e734f.js';
import 'styled-components';
import 'polished';
import './SliderInputArrow.esm.js';
import '../../../color/colors.esm.js';
import '../../../tokens/core.esm.js';
import '../../../tokens/color/index.esm.js';
import '../../../tokens/color/background/background.esm.js';
import '../../../tokens/util/readToken.esm.js';
import '../../../tokens/util/clamp.esm.js';
import '../../../tokens/color/format/format.esm.js';
import '../../../tokens/color/format/primary.esm.js';
import '../../../tokens/color/format/secondary.esm.js';
import '../../../tokens/color/format/tertiary.esm.js';
import '../../../tokens/color/rainbow/rainbow.esm.js';
import '../../../tokens/color/rainbow/conic/index.esm.js';
import '../../../tokens/color/rainbow/conic/sm.esm.js';
import '../../../tokens/color/rainbow/conic/xl.esm.js';
import '../../../tokens/color/rainbow/linear/index.esm.js';
import '../../../tokens/color/rainbow/linear/sm.esm.js';
import '../../../tokens/color/rainbow/linear/xl.esm.js';
import '../../../tokens/color/livestream/livestream.esm.js';
import '../../../tokens/color/status/status.esm.js';
import '../../../tokens/color/status/caution.esm.js';
import '../../../tokens/color/status/negative.esm.js';
import '../../../tokens/color/status/positive.esm.js';
import '../../../tokens/color/stroke/stroke.esm.js';
import '../../../tokens/color/surface/surface.esm.js';
import '../../../tokens/color/text/text.esm.js';
import '../../../tokens/util/round.esm.js';
import '../../../tokens/color/upsell/upsell.esm.js';
import '../../../tokens/color/upsell/sm.esm.js';
import '../../../tokens/color/upsell/xl.esm.js';
import '../../../tokens/color/upsell/new.esm.js';
import '../../../tokens/edge/edge.esm.js';
import '../../../tokens/space/space.esm.js';
import '../../../tokens/typography/index.esm.js';
import '../../../tokens/typography/size/size.esm.js';

var Handle = React__default.forwardRef(function (_a, ref) {
    var disabled = _a.disabled, handle = _a.handle, min = _a.min, max = _a.max, setDragging = _a.setDragging, setFocus = _a.setFocus, value = _a.value;
    return (React__default.createElement(HandleStyled, { style: { left: (value / max) * 100 + '%' }, "aria-label": handle, onMouseDown: function () {
            !disabled && setDragging(handle);
        } },
        React__default.createElement(Hidden, { min: min, max: max, value: value, onFocus: function () {
                setFocus(handle);
            }, onBlur: function () {
                setFocus(null);
            }, ref: ref, readOnly: true }),
        React__default.createElement(Focus, { parent: Hidden, radius: 50, isKeyboardOnly: true })));
});

export { Handle };