@redocly/theme 0.18.1 → 0.18.2

package/lib/components/Search/Search.js

@@ -35,6 +35,7 @@ const SearchTrigger_1 = require("../../components/Search/SearchTrigger");
 const MobileSearchTrigger_1 = require("../../components/Search/MobileSearchTrigger");
 const SearchDialog_1 = require("../../components/Search/SearchDialog");
 const hooks_1 = require("../../hooks");
+const telemetry_1 = require("../../mocks/telemetry");
 function Search({ className }) {
     var _a, _b;
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
@@ -46,6 +47,7 @@ function Search({ className }) {
         if (hotkeysKeys) {
             (0, hotkeys_js_1.default)(hotkeysKeys, (ev) => {
                 setIsOpen(true);
+                telemetry_1.telemetry.send('search_opened', { method: 'shortcut' });
                 ev.preventDefault();
             });
             return () => hotkeys_js_1.default.unbind(hotkeysKeys);
@@ -56,8 +58,14 @@ function Search({ className }) {
     }, []);
     (0, react_1.useEffect)(onClose, [location, onClose]);
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Search/Search", className: className },
-        react_1.default.createElement(SearchTrigger_1.SearchTrigger, { onClick: () => setIsOpen(true) }),
-        react_1.default.createElement(MobileSearchTrigger_1.MobileSearchTrigger, { onClick: () => setIsOpen(true) }),
+        react_1.default.createElement(SearchTrigger_1.SearchTrigger, { onClick: () => {
+                telemetry_1.telemetry.send('search_opened', { method: 'click' });
+                setIsOpen(true);
+            } }),
+        react_1.default.createElement(MobileSearchTrigger_1.MobileSearchTrigger, { onClick: () => {
+                telemetry_1.telemetry.send('search_opened', { method: 'click' });
+                setIsOpen(true);
+            } }),
         isOpen && react_1.default.createElement(SearchDialog_1.SearchDialog, { onClose: onClose })));
 }
 exports.Search = Search;

package/lib/components/Tabs/Tabs.d.ts

@@ -2,6 +2,7 @@ import type { PropsWithChildren } from 'react';
 type Child = {
     props: {
         label: string;
+        key?: string;
     } & TabsProps;
 };
 type TabsProps = PropsWithChildren<{

package/lib/components/Tabs/Tabs.js

@@ -36,9 +36,9 @@ function Tabs(props) {
     const [activeTab, setActiveTab] = (0, react_1.useState)((_a = children[0]) === null || _a === void 0 ? void 0 : _a.props.label);
     const onTabSelect = (label) => setActiveTab(label);
     return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdown/Tabs/Tabs", className: props.className },
-        react_1.default.createElement(TabList, null, children.map((child) => {
-            const { label } = child.props;
-            return react_1.default.createElement(Tabs_1.Tab, { activeTab: activeTab, key: label, label: label, onClick: onTabSelect });
+        react_1.default.createElement(TabList, null, children.map((child, idx) => {
+            const { label, key } = child.props;
+            return (react_1.default.createElement(Tabs_1.Tab, { activeTab: activeTab, key: `${key || label}-${idx}`, label: label, onClick: onTabSelect }));
         })),
         react_1.default.createElement(TabContent, null, children.map((child) => {
             if (child.props.label !== activeTab)

package/lib/mocks/telemetry.d.ts

@@ -0,0 +1,2 @@
+import type { ClientTelemetry } from '@redocly/portal-types';
+export declare const telemetry: ClientTelemetry;

package/lib/mocks/telemetry.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.telemetry = void 0;
+exports.telemetry = {
+    send: () => undefined,
+};
+//# sourceMappingURL=telemetry.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.18.1",
+  "version": "0.18.2",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -80,7 +80,8 @@
     "tsconfig-paths": "^4.2.0",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.8.4",
-    "webpack": "^5.72.0"
+    "webpack": "^5.72.0",
+    "@redocly/portal-types": "1.0.1"
   },
   "dependencies": {
     "@redocly/ajv": "^8.11.0",

package/src/components/Search/Search.tsx

@@ -7,6 +7,7 @@ import { SearchTrigger } from '@theme/components/Search/SearchTrigger';
 import { MobileSearchTrigger } from '@theme/components/Search/MobileSearchTrigger';
 import { SearchDialog } from '@theme/components/Search/SearchDialog';
 import { useThemeConfig } from '@theme/hooks';
+import { telemetry } from '@portal/telemetry';
 
 export function Search({ className }: { className?: string }): JSX.Element {
   const [isOpen, setIsOpen] = useState(false);
@@ -19,6 +20,7 @@ export function Search({ className }: { className?: string }): JSX.Element {
     if (hotkeysKeys) {
       hotkeys(hotkeysKeys, (ev) => {
         setIsOpen(true);
+        telemetry.send('search_opened', { method: 'shortcut' });
         ev.preventDefault();
       });
 
@@ -34,8 +36,18 @@ export function Search({ className }: { className?: string }): JSX.Element {
 
   return (
     <Wrapper data-component-name="Search/Search" className={className}>
-      <SearchTrigger onClick={() => setIsOpen(true)} />
-      <MobileSearchTrigger onClick={() => setIsOpen(true)} />
+      <SearchTrigger
+        onClick={() => {
+          telemetry.send('search_opened', { method: 'click' });
+          setIsOpen(true);
+        }}
+      />
+      <MobileSearchTrigger
+        onClick={() => {
+          telemetry.send('search_opened', { method: 'click' });
+          setIsOpen(true);
+        }}
+      />
 
       {isOpen && <SearchDialog onClose={onClose} />}
     </Wrapper>

package/src/components/Tabs/Tabs.tsx

@@ -5,7 +5,7 @@ import type { PropsWithChildren } from 'react';
 
 import { Tab } from '@theme/components/Tabs';
 
-type Child = { props: { label: string } & TabsProps };
+type Child = { props: { label: string; key?: string } & TabsProps };
 type TabsProps = PropsWithChildren<{ children: Child[]; className?: string }>;
 
 export function Tabs(props: TabsProps): JSX.Element {
@@ -16,9 +16,16 @@ export function Tabs(props: TabsProps): JSX.Element {
   return (
     <TabsContainer data-component-name="Markdown/Tabs/Tabs" className={props.className}>
       <TabList>
-        {children.map((child) => {
-          const { label } = child.props;
-          return <Tab activeTab={activeTab} key={label} label={label} onClick={onTabSelect} />;
+        {children.map((child, idx) => {
+          const { label, key } = child.props;
+          return (
+            <Tab
+              activeTab={activeTab}
+              key={`${key || label}-${idx}`}
+              label={label}
+              onClick={onTabSelect}
+            />
+          );
         })}
       </TabList>
       <TabContent>

package/src/mocks/telemetry.ts

@@ -0,0 +1,5 @@
+import type { ClientTelemetry } from '@redocly/portal-types';
+
+export const telemetry = {
+  send: () => undefined,
+} as unknown as ClientTelemetry;