@redocly/theme 0.10.0 → 0.11.0

package/lib/components/Panel/PanelComponent.js

@@ -0,0 +1,65 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineBox = exports.PanelComponent = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const icons_1 = require("../../icons");
+const PanelBody_1 = require("../../components/Panel/PanelBody");
+const PanelHeader_1 = require("../../components/Panel/PanelHeader");
+const PanelHeaderTitle_1 = require("../../components/Panel/PanelHeaderTitle");
+function PanelComponent({ expanded = true, renderChildrenHidden = false, header, className, children, onToggle, description, }) {
+    const [isExpanded, setExpanded] = (0, react_1.useState)(expanded);
+    const [animate, setAnimate] = (0, react_1.useState)(false);
+    const toggle = ({ target }) => {
+        if (target instanceof HTMLAnchorElement)
+            return;
+        setAnimate(true);
+        setExpanded(!isExpanded);
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!isExpanded);
+    };
+    (0, react_1.useEffect)(() => setExpanded(expanded), [expanded]);
+    return (react_1.default.createElement("div", { className: className, "data-cy": typeof header === 'string' ? ('panel-' + header).replace(/ /g, '-').toLowerCase() : null, "data-component-name": "Panel/PanelComponent" },
+        header &&
+            (typeof header === 'function' ? (header({ expanded: isExpanded, toggle })) : (react_1.default.createElement(PanelHeader_1.PanelHeader, { "data-cy": "panel-header", onClick: toggle, expanded: isExpanded },
+                react_1.default.createElement(exports.InlineBox, null,
+                    react_1.default.createElement(PanelHeaderTitle_1.PanelHeaderTitle, { "data-cy": "title" }, header),
+                    react_1.default.createElement(icons_1.ShelfIcon, { direction: isExpanded ? 'down' : 'right' }),
+                    description)))),
+        (isExpanded || renderChildrenHidden) && (react_1.default.createElement(PanelBody_1.PanelBody, { "data-cy": "panel-body", hidden: !isExpanded, animate: animate }, children))));
+}
+exports.PanelComponent = PanelComponent;
+exports.InlineBox = styled_components_1.default.div `
+  display: inline-flex;
+  align-items: center;
+
+  > span:last-child {
+    margin-left: 8px;
+  }
+`;
+//# sourceMappingURL=PanelComponent.js.map

package/lib/components/Panel/index.d.ts

@@ -0,0 +1,5 @@
+export * from '../../components/Panel/Panel';
+export * from '../../components/Panel/PanelBody';
+export * from '../../components/Panel/PanelComponent';
+export * from '../../components/Panel/PanelHeader';
+export * from '../../components/Panel/PanelHeaderTitle';

package/lib/components/Panel/index.js

@@ -0,0 +1,22 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../components/Panel/Panel"), exports);
+__exportStar(require("../../components/Panel/PanelBody"), exports);
+__exportStar(require("../../components/Panel/PanelComponent"), exports);
+__exportStar(require("../../components/Panel/PanelHeader"), exports);
+__exportStar(require("../../components/Panel/PanelHeaderTitle"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/Profile/AuthUserProfile.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function AuthUserProfile(): JSX.Element | null;

package/lib/components/Profile/AuthUserProfile.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AuthUserProfile = void 0;
+const react_1 = __importDefault(require("react"));
+const LoginLink_1 = require("../../components/Profile/LoginLink");
+const UserProfile_1 = require("../../components/Profile/UserProfile");
+const useProfileProps_1 = require("../../mocks/Profile/useProfileProps");
+function AuthUserProfile() {
+    const { userData, hasDeveloperOnboarding, loginUrl, handleLogout } = (0, useProfileProps_1.useProfileProps)();
+    if (userData === null || userData === void 0 ? void 0 : userData.isAuthenticated) {
+        return (react_1.default.createElement(UserProfile_1.UserProfile, { userData: userData, handleLogout: handleLogout, hasDeveloperOnboarding: !!hasDeveloperOnboarding }));
+    }
+    if (loginUrl) {
+        return react_1.default.createElement(LoginLink_1.LoginLink, { href: loginUrl, "data-cy": "login-btn" });
+    }
+    return null;
+}
+exports.AuthUserProfile = AuthUserProfile;
+//# sourceMappingURL=AuthUserProfile.js.map

package/lib/components/Profile/LoginLink.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoginLink = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const useThemeConfig_1 = require("../../hooks/useThemeConfig");
+function LoginLink({ href }) {
+    const { userProfile } = (0, useThemeConfig_1.useThemeConfig)();
+    return react_1.default.createElement(StyledLink, { href: href }, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.loginLabel) || 'Login');
+}
+exports.LoginLink = LoginLink;
+const StyledLink = styled_components_1.default.a.attrs(() => ({
+    'data-component-name': 'Profile/LoginLink',
+})) `
+  display: inline-block;
+  color: var(--navbar-text-color);
+  text-decoration: none;
+  padding: 0 var(--navbar-item-padding-horizontal);
+  text-align: center;
+  line-height: 1;
+  font-size: var(--navbar-item-font-size);
+  font-weight: var(--navbar-item-font-weight);
+  &:hover {
+    color: var(--navbar-item-hover-text-color);
+  }
+`;
+//# sourceMappingURL=LoginLink.js.map

package/lib/components/Profile/Profile.js

@@ -0,0 +1,104 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Profile = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const utils_1 = require("../../utils");
+function ProfileComponent({ name = 'User', imageUrl, onClick, color }) {
+    var _a;
+    if (imageUrl) {
+        return (react_1.default.createElement(ProfileWrapper, { onClick: onClick },
+            react_1.default.createElement(StyledUserName, { "data-cy": "user-name", color: color }, name),
+            imageUrl && (react_1.default.createElement(AvatarWrapper, null,
+                react_1.default.createElement("img", { "data-cy": "user-avatar", src: imageUrl, alt: "profile" })))));
+    }
+    const avatarLetters = `${name.charAt(0).toUpperCase()}${((_a = name.split(' ')[1]) === null || _a === void 0 ? void 0 : _a.charAt(0).toUpperCase()) || ''}`;
+    return (react_1.default.createElement(ProfileWrapper, { onClick: onClick },
+        react_1.default.createElement(StyledUserName, { "data-cy": "user-name", color: color }, name),
+        react_1.default.createElement(AvatarWrapper, { background: (0, utils_1.stringToHslColor)(name) },
+            react_1.default.createElement("span", null, avatarLetters))));
+}
+exports.Profile = (0, react_1.memo)(ProfileComponent);
+const ProfileWrapper = styled_components_1.default.div.attrs(() => ({
+    'data-component-name': 'Profile/Profile',
+})) `
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  width: auto;
+  padding: 0 var(--navbar-item-padding-horizontal);
+`;
+const StyledUserName = styled_components_1.default.span `
+  font-family: var(--profile-name-font-family);
+  font-size: var(--profile-name-font-size);
+  font-weight: var(--profile-name-font-weight);
+  color: var(--profile-name-text-color);
+  padding: var(--profile-name-padding-vertical) var(--profile-name-padding-horizontal);
+  margin: 0 var(--profile-name-margin-horizontal);
+
+  display: none;
+
+  ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.medium; }} {
+    display: block;
+  }
+`;
+const AvatarWrapper = styled_components_1.default.div `
+  width: var(--profile-avatar-width);
+  height: var(--profile-avatar-height);
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  align-items: center;
+  flex-shrink: 0;
+  justify-content: center;
+  user-select: none;
+
+  font-family: var(--profile-avatar-font-family);
+  font-size: var(--profile-avatar-font-size);
+  line-height: var(--profile-avatar-line-height);
+  font-weight: var(--profile-avatar-font-weight);
+
+  border-radius: var(--profile-avatar-border-radius);
+  margin-left: var(--profile-avatar-margin-left);
+
+  ${({ background }) => (0, styled_components_1.css) `
+    background-color: ${background};
+    span {
+      color: ${background};
+      filter: invert(100%);
+    }
+  `}
+
+  & > img {
+    color: transparent;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    text-align: center;
+    text-indent: 10000px;
+  }
+`;
+//# sourceMappingURL=Profile.js.map

package/lib/components/Profile/UserProfile.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { UserProfileProps } from './types';
+export declare function UserProfile({ userData, handleLogout, hasDeveloperOnboarding, }: UserProfileProps): JSX.Element;

package/lib/components/Profile/UserProfile.js

@@ -0,0 +1,46 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserProfile = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Profile_1 = require("../../components/Profile/Profile");
+const Tooltip_1 = require("../../components/Tooltip/Tooltip");
+const UserProfileMenu_1 = require("./UserProfileMenu");
+function UserProfile({ userData, handleLogout, hasDeveloperOnboarding = false, }) {
+    const [isOpened, setIsOpened] = (0, react_1.useState)(false);
+    return (react_1.default.createElement(StyledTooltip, { isOpen: isOpened, withArrow: false, className: "copy-button", placement: "bottom", width: "100%", tip: react_1.default.createElement(UserProfileMenu_1.UserProfileMenu, { hasDeveloperOnboarding: hasDeveloperOnboarding, handleLogout: handleLogout, setIsOpened: setIsOpened }) },
+        react_1.default.createElement(Profile_1.Profile, { name: userData.name, imageUrl: userData.picture, onClick: userData.logoutDisabled ? undefined : () => setIsOpened(!isOpened) })));
+}
+exports.UserProfile = UserProfile;
+const StyledTooltip = (0, styled_components_1.default)(Tooltip_1.Tooltip) `
+  > span {
+    padding: 0;
+  }
+`;
+//# sourceMappingURL=UserProfile.js.map

package/lib/components/Profile/UserProfileMenu.js

@@ -0,0 +1,87 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserProfileMenu = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const Link_1 = require("../../mocks/Link");
+const hooks_1 = require("../../hooks");
+function UserProfileMenu({ hasDeveloperOnboarding, setIsOpened, handleLogout, }) {
+    var _a;
+    const { userProfile } = (0, hooks_1.useThemeConfig)();
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(StyledUl, { onClick: () => setIsOpened(false) },
+            hasDeveloperOnboarding ? (react_1.default.createElement(Link_1.Link, { to: "/apps" },
+                react_1.default.createElement(StyledLi, null, "My Apps"))) : null, (_a = userProfile === null || userProfile === void 0 ? void 0 : userProfile.menu) === null || _a === void 0 ? void 0 :
+            _a.map((item) => (react_1.default.createElement(Link_1.Link, { external: item.external, key: item.label, to: item.link || '' },
+                react_1.default.createElement(StyledLi, { separatorLine: item === null || item === void 0 ? void 0 : item.separatorLine }, item.label)))),
+            react_1.default.createElement(StyledLi, { onClick: () => handleLogout() }, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.logoutLabel) || 'Log out'))));
+}
+exports.UserProfileMenu = UserProfileMenu;
+const StyledUl = styled_components_1.default.ul `
+  margin: var(--profile-menu-margin);
+  padding: var(--profile-menu-padding);
+  list-style: none;
+  background-color: var(--profile-menu-background-color);
+  min-width: 100px;
+  a {
+    text-decoration: none;
+  }
+`;
+const StyledLi = styled_components_1.default.li `
+  cursor: pointer;
+  font-size: var(--profile-menu-item-font-size);
+  font-family: var(--profile-menu-item-font-family);
+  font-weight: var(--profile-menu-item-font-weight);
+  line-height: var(--profile-menu-item-line-height);
+  color: var(--profile-menu-item-text-color);
+  text-align: var(--profile-menu-item-text-align);
+
+  list-style: none;
+
+  padding: var(--profile-menu-item-padding-vertical) var(--profile-menu-item-padding-horizontal);
+
+  transition: background-color 0.25s ease 0s;
+
+  &:hover {
+    color: var(--profile-menu-item-hover-text-color);
+    background-color: var(--profile-menu-item-hover-background-color);
+    text-decoration: var(--profile-menu-item-hover-text-decoration);
+  }
+  &:active {
+    color: var(--profile-menu-item-active-text-color);
+    background-color: var(--profile-menu-item-active-background-color);
+    text-decoration: var(--profile-menu-item-active-text-decoration);
+  }
+
+  ${({ separatorLine }) => separatorLine &&
+    (0, styled_components_1.css) `
+      border-bottom: 1px solid var(--profile-menu-item-separator-line-color);
+    `}
+`;
+//# sourceMappingURL=UserProfileMenu.js.map

package/lib/components/Profile/index.d.ts

@@ -0,0 +1,6 @@
+export { Profile } from './Profile';
+export type { ProfileProps } from './Profile';
+export { LoginLink } from './LoginLink';
+export type { LoginLinkProps } from './LoginLink';
+export { UserProfile } from './UserProfile';
+export type { UserProfileProps } from './types';

package/lib/components/Profile/types.d.ts

@@ -0,0 +1,11 @@
+export interface UserProfileProps {
+    userData: {
+        isAuthenticated: boolean;
+        name: string;
+        picture: string;
+        logoutDisabled?: boolean;
+    };
+    handleLogout: (logoutRedirect?: string) => void;
+    hasDeveloperOnboarding?: boolean;
+    loginUrl?: string;
+}

package/lib/components/Profile/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/lib/components/SamplesPanelControls/SamplesPanelControls.js

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreformattedCodeBlock = exports.SampleControlsWrap = exports.SampleControls = exports.SamplesControlButton = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const CodeBlock_1 = require("../../components/CodeBlock");
+exports.SamplesControlButton = styled_components_1.default.button.attrs(() => ({
+    'data-component-name': 'SamplesPanelControls/SamplesPanelControls',
+})) `
+  background-color: var(--panel-samples-controls-background-color);
+  border: 0;
+  outline: 0;
+  border-radius: var(--border-radius);
+  height: 20px;
+  color: var(--panel-samples-controls-text-color);
+  font-size: 12px;
+  line-height: 12px;
+  cursor: pointer;
+  padding: 1px 6px;
+  min-width: 90px;
+
+  ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.small; }} {
+    padding: 2px 20px;
+  }
+
+  :hover,
+  :focus {
+    background-color: var(--panel-samples-controls-hover-background-color);
+  }
+`;
+exports.SampleControls = styled_components_1.default.div `
+  padding: 10px 0;
+  opacity: 0.7;
+  transition: opacity 0.3s ease;
+  text-align: right;
+
+  &:focus-within {
+    opacity: 1;
+  }
+
+  > div,
+  > ${exports.SamplesControlButton} {
+    /* can have tooltip wrapper div also */
+    margin-top: 5px;
+    margin-left: 10px;
+
+    ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.small; }} {
+      margin-top: 0;
+    }
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+`;
+exports.SampleControlsWrap = styled_components_1.default.div `
+  &:hover ${exports.SampleControls} {
+    opacity: 1;
+  }
+`;
+exports.PreformattedCodeBlock = (0, styled_components_1.default)(CodeBlock_1.CodeBlock.withComponent('pre')) `
+  overflow-x: auto;
+  margin: 0;
+  max-height: var(--code-block-max-height);
+  font-family: var(--code-font-family);
+  padding: 20px;
+  border-radius: var(--border-radius);
+  background-color: var(--panel-samples-controls-background-color);
+  color: var(--text-color-inverse);
+  font-size: var(--code-font-size);
+  white-space: var(--code-wrap, pre);
+`;
+//# sourceMappingURL=SamplesPanelControls.js.map

package/lib/components/SamplesPanelControls/index.d.ts

@@ -0,0 +1 @@
+export * from '../../components/SamplesPanelControls/SamplesPanelControls';

package/lib/components/SamplesPanelControls/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../components/SamplesPanelControls/SamplesPanelControls"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/Search/Autocomplete.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { ActiveItem } from '../../types/portal/src/shared/types/activeItem';
+interface AutocompleteProps<T> {
+    placeholder?: string;
+    value: string;
+    items: T[];
+    renderItem(item: ActiveItem<T>): ReactNode;
+    change(value: string): void;
+    select(item: T): void;
+    children?(isOpen: boolean, close: () => void): ReactNode;
+    inputRef?: React.RefObject<HTMLInputElement>;
+    keyShortcuts?: string[];
+}
+export declare function Autocomplete<T>({ placeholder, value, items, change, select, renderItem, children, keyShortcuts, }: AutocompleteProps<T>): JSX.Element;
+export {};

package/lib/components/Search/Autocomplete.js

@@ -0,0 +1,122 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Autocomplete = void 0;
+const react_1 = __importStar(require("react"));
+const react_router_dom_1 = require("react-router-dom");
+const styled_components_1 = __importDefault(require("styled-components"));
+const hotkeys_js_1 = __importDefault(require("hotkeys-js"));
+const Input_1 = require("../../components/Search/Input");
+const Popover_1 = require("../../components/Search/Popover");
+const ShortcutKey_1 = require("../../components/Search/ShortcutKey");
+function Autocomplete({ placeholder, value, items, change, select, renderItem, children, keyShortcuts, }) {
+    const location = (0, react_router_dom_1.useLocation)();
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [activeIdx, setActiveIdx] = (0, react_1.useState)(-1);
+    const refInput = (0, react_1.useRef)(null);
+    const hotkeysKeys = keyShortcuts === null || keyShortcuts === void 0 ? void 0 : keyShortcuts.join(',');
+    (0, react_1.useEffect)(() => {
+        if (hotkeysKeys) {
+            (0, hotkeys_js_1.default)(hotkeysKeys, (ev) => {
+                var _a;
+                (_a = refInput.current) === null || _a === void 0 ? void 0 : _a.focus();
+                ev.preventDefault();
+            });
+            return () => hotkeys_js_1.default.unbind(hotkeysKeys);
+        }
+    }, [hotkeysKeys]);
+    const open = () => setIsOpen(true);
+    const close = () => {
+        setIsOpen(false);
+        setActiveIdx(-1);
+    };
+    const reset = () => {
+        change('');
+        close();
+    };
+    const stopPropagation = (event) => event.stopPropagation();
+    const onChange = (event) => {
+        setActiveIdx(-1);
+        setIsOpen(true);
+        change(event.target.value);
+    };
+    const onKeydown = (event) => {
+        switch (event.code) {
+            case 'Escape':
+                close();
+                event.currentTarget.blur();
+                break;
+            case 'ArrowDown':
+                setActiveIdx(Math.min(activeIdx + 1, items.length - 1));
+                event.preventDefault();
+                break;
+            case 'ArrowUp':
+                setActiveIdx(Math.max(0, activeIdx - 1));
+                break;
+            case 'Enter':
+                if (activeIdx > -1) {
+                    reset();
+                    select(items[activeIdx]);
+                }
+                break;
+        }
+    };
+    const mapItem = (item, idx) => {
+        const active = idx === activeIdx;
+        return renderItem(Object.assign(Object.assign({}, item), { active }));
+    };
+    (0, react_1.useEffect)(close, [location]);
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Search/Autocomplete" },
+        isOpen ? react_1.default.createElement(Overlay, { onClick: close }) : null,
+        react_1.default.createElement(AutocompleteBox, { onKeyDown: onKeydown }, children === null || children === void 0 ? void 0 :
+            children(isOpen, reset),
+            react_1.default.createElement(Input_1.FormInput, { value: value, placeholder: placeholder, onChange: onChange, onFocus: open, onClick: stopPropagation, ref: refInput }),
+            !isOpen && react_1.default.createElement(ShortcutKey_1.ShortcutKey, { keyShortcuts: keyShortcuts }),
+            isOpen && value ? (react_1.default.createElement(Popover_1.Popover, null, items.length ? items.map(mapItem) : react_1.default.createElement(Message, null, "No results"))) : null)));
+}
+exports.Autocomplete = Autocomplete;
+const Wrapper = styled_components_1.default.div ``;
+const AutocompleteBox = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  position: relative;
+  z-index: 1;
+`;
+const Overlay = styled_components_1.default.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+`;
+const Message = styled_components_1.default.div `
+  padding: 24px;
+  color: var(--search-item-title-text-color);
+`;
+//# sourceMappingURL=Autocomplete.js.map