@vimeo/iris/components/Button/Button.esm.js

Vimeo Design System

import { b as __rest, c as __assign } from '../../tslib.es6-7f0e734f.js';
import React__default, { useRef } from 'react';
import { ButtonStyled, ButtonChildren } from './Button.style.esm.js';
import { borderRadii } from './Button.config.esm.js';
import { FeaturedIcon } from './FeaturedIcon.esm.js';
import { LoaderCircular } from '../LoaderCircular/LoaderCircular.esm.js';
import { withIris } from '../../utils/HOCs/withIris.esm.js';
import { useDeprecate } from '../../utils/hooks/useDeprecate.esm.js';
import { mergeRefs } from '../../utils/general/mergeReactRefs.esm.js';
import { centered, Focus } from '../../utils/css.esm.js';
import 'styled-components';
import 'polished';
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.style.esm.js';

var Button = withIris(ButtonComponent, true, 'components/Button/Button');
var deprecatedProps = {
    circular: '@vimeo/iris: Button `circular` prop has been deprecated. Please use `pill`. `circular` will be removed in Iris 9.\n',
};
function ButtonComponent(_a) {
    var _b = _a.active, active = _b === void 0 ? false : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, children = _a.children, color = _a.color, _d = _a.element, element = _d === void 0 ? 'button' : _d, fluid = _a.fluid, _e = _a.format, format = _e === void 0 ? 'primary' : _e, forwardRef = _a.forwardRef, icon = _a.icon, _f = _a.iconPosition, iconPosition = _f === void 0 ? 'left' : _f, loading = _a.loading, _g = _a.pill, pill = _g === void 0 ? false : _g, _h = _a.size, size = _h === void 0 ? 'md' : _h, status = _a.status, _j = _a.textShift, textShift = _j === void 0 ? false : _j, theme = _a.theme, type = _a.type, _k = _a.variant, variant = _k === void 0 ? 'solid' : _k, onClick = _a.onClick, props = __rest(_a, ["active", "checked", "children", "color", "element", "fluid", "format", "forwardRef", "icon", "iconPosition", "loading", "pill", "size", "status", "textShift", "theme", "type", "variant", "onClick"]);
    // const irisError = useIrisError({ format, ...props }, Button);
    useDeprecate(props, deprecatedProps);
    var buttonRef = useRef(null);
    var iconOnly = typeof children === 'undefined' && icon;
    var iconLeft = iconPosition === 'left' && icon;
    var iconRight = iconPosition === 'right' && icon;
    var iconFeatured = iconPosition === 'featured' && icon;
    var iconAction = iconPosition === 'action' && icon;
    var radius = pill ? 50 : borderRadii[size] + 2;
    var formatInstrinsic = format;
    if (status && status !== 'neutral')
        formatInstrinsic = status;
    return (React__default.createElement(ButtonStyled, __assign({ as: element, color: color, fluid: fluid, format: formatInstrinsic, icon: !!icon, iconOnly: iconOnly, iconPosition: iconPosition, "$loading": loading, pill: pill, ref: mergeRefs([buttonRef, forwardRef]), size: size, textShift: textShift, theme: theme, type: type, checked: checked, active: active, variant: variant, onClick: function (event) {
            var _a;
            //Safari Button Focus Fix
            (_a = buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
            if (onClick) {
                onClick(event);
            }
        } }, props),
        iconFeatured && (React__default.createElement(FeaturedIcon, { size: size }, icon)),
        iconLeft,
        children && (React__default.createElement(ButtonChildren, { size: size }, children)),
        iconRight,
        iconAction,
        loading && (React__default.createElement(LoaderCircular, { size: size, format: "adaptive", style: centered })),
        React__default.createElement(Focus, { parent: ButtonStyled, radius: radius, isKeyboardOnly: true })));
}

export { Button };