@vimeo/iris
Version:
Vimeo Design System
94 lines (91 loc) • 5.52 kB
JavaScript
import { a as __makeTemplateObject, b as __rest, c as __assign } from '../../../tslib.es6-7f0e734f.js';
import React__default from 'react';
import styled from 'styled-components';
import { rgba } from 'polished';
import { Header as Header$1 } from '../../../typography/Header/Header.esm.js';
import { blue } from '../../../color/colors.esm.js';
import { Focus } from '../../../utils/css.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/hooks/useLayoutStyles.esm.js';
import '../../../utils/DOM/geometry.esm.js';
function useSuggestions(_a) {
var autosuggest = _a.autosuggest, onSelect = _a.onSelect;
if (typeof autosuggest === 'undefined')
return;
if (autosuggest === null)
return { has: true, show: false };
function onKeyDown(suggestion) {
return function (event) {
var _a, _b, _c, _d;
event.preventDefault();
switch (event.key) {
case 'Escape':
case 'Tab':
return onSelect();
case 'ArrowDown':
return (_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.nextSibling) === null || _b === void 0 ? void 0 : _b.focus();
case 'ArrowUp':
return (_d = (_c = event.target) === null || _c === void 0 ? void 0 : _c.previousSibling) === null || _d === void 0 ? void 0 : _d.focus();
case 'Enter':
return onSelect(suggestion);
}
};
}
var suggestions = autosuggest === null || autosuggest === void 0 ? void 0 : autosuggest.map(function (suggestion, key) { return (React__default.createElement(Suggestion, { key: key, onKeyDown: onKeyDown(suggestion), onClick: function () { return onSelect(suggestion); } }, suggestion)); });
suggestions.has = true;
suggestions.show = (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) > 0;
return suggestions;
}
function Suggestion(_a) {
var children = _a.children, props = __rest(_a, ["children"]);
return (React__default.createElement(Header, __assign({}, props),
children,
React__default.createElement(Focus, { parent: Header })));
}
var Header = styled(Header$1).attrs({
variant: 'thin',
size: '2',
// Temporary hack for accessibility. I don't want to
// change the types to explicitly permit button Headers.
element: 'button',
})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n padding: 0.5rem 2rem;\n width: 100%;\n text-align: left;\n margin: 0;\n cursor: pointer;\n font-smoothing: antialiased;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizelegibility;\n &:first-child {\n padding: 0.75rem 2rem 0.5rem;\n }\n &:last-child {\n padding: 0.5rem 2rem 0.75rem;\n }\n &:focus {\n outline: none;\n }\n &:hover {\n background: ", ";\n }\n"], ["\n position: relative;\n padding: 0.5rem 2rem;\n width: 100%;\n text-align: left;\n margin: 0;\n cursor: pointer;\n font-smoothing: antialiased;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizelegibility;\n &:first-child {\n padding: 0.75rem 2rem 0.5rem;\n }\n &:last-child {\n padding: 0.5rem 2rem 0.75rem;\n }\n &:focus {\n outline: none;\n }\n &:hover {\n background: ", ";\n }\n"])), rgba(blue(500), 0.15));
var templateObject_1;
export { useSuggestions };