@vimeo/iris
Version:
Vimeo Design System
135 lines (132 loc) • 8.01 kB
JavaScript
import { b as __rest, _ as __read, c as __assign } from '../../../tslib.es6-7f0e734f.js';
import React__default, { useState, useRef, useImperativeHandle } from 'react';
import { InputStyled, nullStyle } from './Input.style.esm.js';
import { useSuggestions } from './useSuggestions.esm.js';
import { Wrapper } from '../Wrapper/Wrapper.esm.js';
import { PopOver } from '../../PopOver/PopOver.esm.js';
import { useLayoutStyles } from '../../../utils/hooks/useLayoutStyles.esm.js';
import { Focus } from '../../../utils/css.esm.js';
import 'styled-components';
import 'polished';
import '../Shared.esm.js';
import '../../../color/colors.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/HOCs/withIris.esm.js';
import '../../../utils/DOM/geometry.esm.js';
import '../../../typography/Paragraph/Paragraph.esm.js';
import '../../../typography/Paragraph/Paragraph.style.esm.js';
import '../../PopOver/PopOver.style.esm.js';
import '../../PopOver/PopOver.error.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/hooks/useOutsideClick.esm.js';
import '../../../utils/DOM/SSR.esm.js';
import '../../../utils/DOM/createPortalOutlet.esm.js';
import '../../../utils/DOM/createElement.esm.js';
function Text(_a) {
var _b;
var _c = _a.autoComplete, autoComplete = _c === void 0 ? true : _c, autosuggest = _a.autosuggest, children = _a.children, className = _a.className, disabled = _a.disabled, _d = _a.floating, floating = _d === void 0 ? false : _d, id = _a.id, label = _a.label, messages = _a.messages, forwardRef = _a.forwardRef, _e = _a.pill, pill = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? 'md' : _f, status = _a.status, _g = _a.style, style = _g === void 0 ? nullStyle : _g, onFocus = _a.onFocus, onBlur = _a.onBlur, theme = _a.theme, _h = _a.type, type = _h === void 0 ? 'text' : _h, value = _a.value, variant = _a.variant, props = __rest(_a, ["autoComplete", "autosuggest", "children", "className", "disabled", "floating", "id", "label", "messages", "forwardRef", "pill", "size", "status", "style", "onFocus", "onBlur", "theme", "type", "value", "variant"]);
var _j = __read(useState(false), 2), popoverActive = _j[0], setPopoverActive = _j[1];
var _k = __read(useLayoutStyles(style), 2), layoutStyles = _k[0], displayStyles = _k[1];
var inputRef = useRef(null);
useImperativeHandle(forwardRef, function () { return inputRef.current; });
var suggestionsRef = useRef(null);
function onSuggestionSelect(selection) {
if (selection) {
inputRef.current.value = selection;
}
inputRef.current.focus();
setPopoverActive(false);
}
var suggestions = useSuggestions({
autosuggest: autosuggest,
onSelect: onSuggestionSelect,
});
function doFocus(e) {
setPopoverActive(true);
onFocus && onFocus(e);
}
function doBlur(e) {
var _a;
/**
* If the suggestions popover does not have a secondary target,
* call the onBlur function and close the suggestions popover
* (during a blur event, the relatedTarget should be the EventTarget receiving focus, if any)
*/
if (!((_a = suggestionsRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
onBlur && onBlur(e);
setPopoverActive(false);
}
}
function onKeyDown(e) {
var _a, _b;
if (!autosuggest)
return;
if (e.key === 'Enter' || e.key === 'ArrowDown') {
e.preventDefault();
setPopoverActive(true);
(_b = (_a = suggestionsRef.current) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.focus();
}
}
var floatLabel = popoverActive ||
(inputRef.current && ((_b = inputRef.current.value) === null || _b === void 0 ? void 0 : _b.length) > 0);
if (autoComplete === true)
autoComplete = 'on';
if (autoComplete === false)
autoComplete = 'off';
var inputComponent = (React__default.createElement("div", { style: { position: 'relative' } },
children,
React__default.createElement(InputStyled, __assign({ "aria-invalid": status === 'negative', autoComplete: autoComplete, disabled: disabled, floating: floating, format: status, id: id, inputSize: size, onBlur: doBlur, onFocus: doFocus, onKeyDown: onKeyDown, pill: pill, ref: inputRef, style: displayStyles, theme: theme, type: type, value: value, variant: variant }, props)),
React__default.createElement(Focus, { parent: InputStyled, radius: pill ? 50 : 6, variant: variant, distance: 1 })));
var inputComponentWithAutoSuggest = (React__default.createElement(PopOver, { active: popoverActive && (suggestions === null || suggestions === void 0 ? void 0 : suggestions.show), content: React__default.createElement("div", { ref: suggestionsRef }, (suggestions === null || suggestions === void 0 ? void 0 : suggestions[0]) && suggestions) }, inputComponent));
return (React__default.createElement(Wrapper, { className: className, disabled: disabled, floating: floating, floatLabel: floatLabel, id: id, label: label, messages: messages, size: size, status: status, style: layoutStyles, theme: theme }, (suggestions === null || suggestions === void 0 ? void 0 : suggestions.has)
? inputComponentWithAutoSuggest
: inputComponent));
}
export { Text };