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

Vimeo Design System

import { c as __assign, _ as __read } from '../../../tslib.es6-7f0e734f.js';
import React__default, { useRef, useReducer, useEffect } from 'react';
import { parseToHsl } from 'polished';
import { reducer } from './ColorSelect2.state.esm.js';
import { ColorSelectInput } from './ColorSelect2Input.esm.js';
import { PopOver } from '../../PopOver/PopOver.esm.js';
import { ColorSelect2PopoverContent } from './ColorSelect2PopoverContent.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 './ColorSelect2.style.esm.js';
import 'styled-components';
import '../InnerButton.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 '../../../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';
import '../../LoaderCircular/LoaderCircular.esm.js';
import '../../LoaderCircular/LoaderCircular.style.esm.js';
import '../../../utils/hooks/useDeprecate.esm.js';
import '../../../utils/general/mergeReactRefs.esm.js';
import '../../../utils/css.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 '../../../utils/general/generateUID.esm.js';
import '../../../typography/Paragraph/Paragraph.esm.js';
import '../../../typography/Paragraph/Paragraph.style.esm.js';
import '../../../typography/Text/Text.esm.js';
import '../../../typography/Text/Text.style.esm.js';
import '../../../typography/typography.esm.js';
import '../../../typography/Text/EditableText.esm.js';
import '../../../utils/hooks/useLayoutStyles.esm.js';
import '../../../utils/DOM/geometry.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 '../Wrapper/Wrapper.esm.js';
import '../Input/Mark.esm.js';
import '../../../icons/ui/History.esm.js';
import '../../PopOver/PopOver.style.esm.js';
import '../../PopOver/PopOver.error.esm.js';
import './Presets.esm.js';
import '../../../icons/ui/Pencil.esm.js';
import './ColorSelect2Picker.esm.js';
import '../../../utils/general/throttle.esm.js';
import './Inputs.esm.js';

/**
 * An input that enables users to choose a color from a predefined range of colors from a color picker panel.
 * This components precedes the eventual deprecation of ColorPicker.tsx to ease migration and ensure backwards compatibility.
 */
var ColorSelect2 = withIris(ColorSelectComponent);
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, 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, 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, disabled = _a.disabled, presets = _a.presets;
    var childrenRef = useRef();
    var popOverRef = useRef();
    useOutsideClick([childrenRef, popOverRef], function () {
        if (state.open) {
            dispatch({ type: 'CLOSE', payload: true });
            onClose === null || onClose === void 0 ? void 0 : onClose();
        }
    }, { capture: true });
    var defaultColor = parseToHsl(initial.color);
    var initialColors = colorSpaces(defaultColor);
    var initialState = {
        open: false,
        editing: false,
        error: false,
        colorMeta: __assign({ HSL: defaultColor }, initialColors),
        colorSpace: 'HEX',
    };
    var _j = __read(useReducer(reducer, initialState), 2), state = _j[0], dispatch = _j[1];
    var open = state.open, colorMeta = state.colorMeta;
    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' });
    };
    return (React__default.createElement(PopOver, { attach: attach, active: open, content: React__default.createElement(ColorSelect2PopoverContent, __assign({}, {
            width: width,
            height: height,
            showHueSlider: showHueSlider,
            popOverRef: popOverRef,
            presets: presets,
            dispatch: dispatch,
            onChange: onChange,
            throttleSpeed: throttleSpeed,
            colorMeta: colorMeta,
            state: state,
        })) }, children ? (React__default.createElement("div", { onClick: function () { return !disabled && 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, disabled: disabled })))));
}

export { ColorSelect2 };