@vimeo/iris/components/inputs/ColorSelect/ColorSelect.esm.js

Vimeo Design System

import { b as __rest, c as __assign, _ as __read } from '../../../tslib.es6-7f0e734f.js';
import React__default, { useRef, useReducer, useEffect } from 'react';
import { parseToHsl, hslToColorString } from 'polished';
import { Wrapper } from './ColorSelect.style.esm.js';
import { reducer } from './ColorSelect.state.esm.js';
import { HueSlider } from './Slider.esm.js';
import { ColorInputs } from './Inputs.esm.js';
import { ColorSelectInput } from './ColorSelectInput.esm.js';
import { ColorSelectSpectrum } from './ColorSelectSpectrum.esm.js';
import { Presets } from './Presets.esm.js';
import { PopOver } from '../../PopOver/PopOver.esm.js';
import { withIris } from '../../../utils/HOCs/withIris.esm.js';
import { useOutsideClick } from '../../../utils/hooks/useOutsideClick.esm.js';
import { colorSpaces } from '../../../color/colorUtils.esm.js';
import { throttle } from '../../../utils/general/throttle.esm.js';
import 'styled-components';
import './Slider.style.esm.js';
import '../../../color/colors.esm.js';
import '../Input/Input.esm.js';
import '../Input/Text.esm.js';
import '../Input/Input.style.esm.js';
import '../Shared.esm.js';
import '../Input/useSuggestions.esm.js';
import '../../../typography/Header/Header.esm.js';
import '../../../typography/Header/Header.style.esm.js';
import '../../../typography/typography.esm.js';
import '../../../typography/Text/Text.esm.js';
import '../../../typography/Text/Text.style.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';
import '../../../typography/Text/EditableText.esm.js';
import '../../../utils/hooks/useLayoutStyles.esm.js';
import '../../../utils/DOM/geometry.esm.js';
import '../../../utils/css.esm.js';
import '../Wrapper/Wrapper.esm.js';
import '../../../typography/Paragraph/Paragraph.esm.js';
import '../../../typography/Paragraph/Paragraph.style.esm.js';
import '../Input/Mark.esm.js';
import '../../../utils/general/generateUID.esm.js';
import '../../Button/Button.esm.js';
import '../../Button/Button.style.esm.js';
import '../../Button/Button.config.esm.js';
import '../../Button/FeaturedIcon.esm.js';
import '../../../themes/index.esm.js';
import '../../LoaderCircular/LoaderCircular.esm.js';
import '../../LoaderCircular/LoaderCircular.style.esm.js';
import '../../../utils/hooks/useDeprecate.esm.js';
import '../../../utils/general/mergeReactRefs.esm.js';
import '../InnerButton.esm.js';
import '../../Tip/Tip.esm.js';
import '../../Tip/Tip.settings.esm.js';
import '../../Tip/Tip.style.esm.js';
import '../../../utils/hooks/usePortal_DEPRECATED/usePortal_DEPRECATED.esm.js';
import 'react-dom';
import '../../../utils/hooks/usePortal_DEPRECATED/usePortal_DEPRECATED.style.esm.js';
import '../../../utils/hooks/usePortal_DEPRECATED/useMountAnimations.esm.js';
import '../../../utils/hooks/useIsomorphicEffect.esm.js';
import '../../../utils/DOM/getComputedStyles.esm.js';
import '../../../utils/DOM/animate.esm.js';
import '../../../utils/events/onEvent.esm.js';
import '../../../utils/hooks/usePortal_DEPRECATED/coordinates.esm.js';
import '../../../utils/hooks/usePortal_DEPRECATED/Anchor.esm.js';
import '../../../utils/DOM/SSR.esm.js';
import '../../../utils/DOM/createPortalOutlet.esm.js';
import '../../../utils/DOM/createElement.esm.js';
import '../../../utils/hooks/useIrisError.esm.js';
import '../../../icons/ui/History.esm.js';
import '../../PopOver/PopOver.style.esm.js';
import '../../PopOver/PopOver.error.esm.js';

var ColorSelect = withIris(ColorSelectComponent);
ColorSelect.Presets = Presets;
function ColorSelectComponent(_a) {
    var children = _a.children, _b = _a.height, height = _b === void 0 ? 360 : _b, _c = _a.initial, initial = _c === void 0 ? { color: '#F00', colorSpace: 'HEX' } : _c, 
    // DEPRECATED
    initialColor = _a.initialColor, 
    //
    label = _a.label, onChange = _a.onChange, onClose = _a.onClose, onOpen = _a.onOpen, _d = _a.reset, reset = _d === void 0 ? { color: initial.color, label: 'reset' } : _d, 
    // DEPRECATED
    resetColor = _a.resetColor, 
    //
    resetLabel = _a.resetLabel, size = _a.size, _e = _a.throttleSpeed, throttleSpeed = _e === void 0 ? 24 : _e, value = _a.value, _f = _a.width, width = _f === void 0 ? 360 : _f, _g = _a.attach, attach = _g === void 0 ? 'bottom' : _g, _h = _a.showHueSlider, showHueSlider = _h === void 0 ? true : _h, props = __rest(_a, ["children", "height", "initial", "initialColor", "label", "onChange", "onClose", "onOpen", "reset", "resetColor", "resetLabel", "size", "throttleSpeed", "value", "width", "attach", "showHueSlider"]);
    var childrenRef = useRef();
    var popOverRef = useRef();
    useOutsideClick([childrenRef, popOverRef], function () {
        if (state.open) {
            onClose === null || onClose === void 0 ? void 0 : onClose();
            dispatch({ type: 'CLOSE', payload: true });
        }
    });
    // deprecation handling
    if (initialColor)
        initial.color = initialColor || initial.color;
    if (resetColor)
        reset.color = resetColor || reset.color;
    if (resetLabel)
        reset.label = resetLabel;
    var defaultColor = parseToHsl(initial.color);
    var initialColors = colorSpaces(defaultColor);
    var initialState = {
        open: false,
        dragging: false,
        editing: false,
        error: false,
        coords: [width, 0],
        colorMeta: __assign({ HSL: defaultColor }, initialColors),
        colorSpace: 'HEX',
    };
    var _j = __read(useReducer(reducer, initialState), 2), state = _j[0], dispatch = _j[1];
    var open = state.open, dragging = state.dragging, colorMeta = state.colorMeta;
    var HSL = colorMeta.HSL;
    useEffect(function () {
        dispatch({ type: 'SET_HEX', payload: value });
    }, [value]);
    var toggle = function () {
        if (open)
            onClose === null || onClose === void 0 ? void 0 : onClose();
        if (!open)
            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
        dispatch({ type: 'TOGGLE' });
    };
    var setHue = throttle(function (e) {
        var hue = parseInt(e.target.value, 10) / 100;
        var newHSL = __assign(__assign({}, HSL), { hue: hue });
        if (HSL.hue !== newHSL.hue) {
            var color = hslToColorString(newHSL);
            onChange && onChange(color);
            dispatch({ type: 'SET_HSL', payload: newHSL });
        }
    }, throttleSpeed / 4);
    var onMouseDown = function () {
        return !dragging && dispatch({ type: 'DRAG_START' });
    };
    var onMouseUp = function () { return dragging && dispatch({ type: 'DRAG_END' }); };
    return (React__default.createElement(PopOver, { attach: attach, active: open, content: React__default.createElement(Wrapper, { width: width, ref: popOverRef, "aria-label": "color picker" },
            React__default.createElement(ColorSelectSpectrum, __assign({ dispatch: dispatch, dragging: dragging, height: height, onChange: onChange, throttleSpeed: throttleSpeed, width: width }, state, props)),
            showHueSlider && (React__default.createElement(HueSlider, __assign({ dragging: dragging, onChange: setHue, onMouseDown: onMouseDown, onMouseUp: onMouseUp, value: HSL.hue * 100, width: width }, state))),
            React__default.createElement(ColorInputs, __assign({ dispatch: dispatch, onChange: onChange }, state))) }, children ? (React__default.createElement("div", { onClick: toggle, ref: childrenRef }, children)) : (React__default.createElement("div", { ref: childrenRef },
        React__default.createElement(ColorSelectInput, { colorMeta: colorMeta, dispatch: dispatch, label: label, onChange: onChange, reset: reset, size: size, toggle: toggle })))));
}

export { ColorSelect };