@redocly/theme 0.71.0-next.1 → 0.71.0-next.3

package/lib/components/Dropdown/DropdownMenuItem.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, ReactNode, PropsWithChildren, JSX } from 'react';
+import type { KeyboardEvent, MouseEvent, CSSProperties, ReactNode, PropsWithChildren, JSX } from 'react';
 import type { LinkProps } from '../../core/types';
 export type DropdownMenuItemProps = Partial<Pick<LinkProps, 'to' | 'target' | 'external'>> & {
     prefix?: ReactNode;
@@ -12,7 +12,7 @@ export type DropdownMenuItemProps = Partial<Pick<LinkProps, 'to' | 'target' | 'e
     separator?: boolean;
     disabled?: boolean;
     dangerous?: boolean;
-    onAction?: () => void;
+    onAction?: (event: KeyboardEvent | MouseEvent) => void;
     active?: boolean;
 };
 export declare function DropdownMenuItem({ children, content, active, onAction, to, dangerous, prefix, suffix, disabled, separator, dataAttributes, className, separatorLine, style, role, ...otherProps }: PropsWithChildren<DropdownMenuItemProps>): JSX.Element;

package/lib/components/Dropdown/DropdownMenuItem.js

@@ -53,12 +53,12 @@ const styled_components_1 = __importStar(require("styled-components"));
 const Link_1 = require("../../components/Link/Link");
 function DropdownMenuItem(_a) {
     var { children, content, active, onAction, to, dangerous, prefix, suffix, disabled, separator, dataAttributes, className, separatorLine, style, role = 'menuitem' } = _a, otherProps = __rest(_a, ["children", "content", "active", "onAction", "to", "dangerous", "prefix", "suffix", "disabled", "separator", "dataAttributes", "className", "separatorLine", "style", "role"]);
-    const handleClick = () => {
-        onAction === null || onAction === void 0 ? void 0 : onAction();
+    const handleClick = (event) => {
+        onAction === null || onAction === void 0 ? void 0 : onAction(event);
     };
     const handleKeyDown = (event) => {
         if (event.key === 'Enter' || event.key === ' ') {
-            onAction === null || onAction === void 0 ? void 0 : onAction();
+            onAction === null || onAction === void 0 ? void 0 : onAction(event);
         }
     };
     className = className || '' + (active ? ' active' : '');

package/lib/index.d.ts

@@ -289,6 +289,7 @@ export * from './icons/ColorPaletteIcon/ColorPaletteIcon';
 export * from './icons/IdeaIcon/IdeaIcon';
 export * from './icons/NewChatIcon/NewChatIcon';
 export * from './layouts/RootLayout';
+export * from './layouts/CustomContexts';
 export * from './layouts/PageLayout';
 export * from './layouts/NotFound';
 export * from './layouts/Forbidden';

package/lib/index.js

@@ -354,6 +354,7 @@ __exportStar(require("./icons/IdeaIcon/IdeaIcon"), exports);
 __exportStar(require("./icons/NewChatIcon/NewChatIcon"), exports);
 /* Layouts */
 __exportStar(require("./layouts/RootLayout"), exports);
+__exportStar(require("./layouts/CustomContexts"), exports);
 __exportStar(require("./layouts/PageLayout"), exports);
 __exportStar(require("./layouts/NotFound"), exports);
 __exportStar(require("./layouts/Forbidden"), exports);

package/lib/layouts/CustomContexts.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { JSX } from 'react';
+type CustomContextsProps = React.PropsWithChildren<{}>;
+export declare function CustomContexts({ children }: CustomContextsProps): JSX.Element;
+export {};

package/lib/layouts/CustomContexts.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomContexts = CustomContexts;
+const react_1 = __importDefault(require("react"));
+// Eject this component to wrap every page in custom React context providers.
+function CustomContexts({ children }) {
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+}
+//# sourceMappingURL=CustomContexts.js.map

package/lib/layouts/RootLayout.js

@@ -10,14 +10,16 @@ const Footer_1 = require("../components/Footer/Footer");
 const SkipContent_1 = require("../components/SkipContent/SkipContent");
 const AIAssistantButton_1 = require("../components/Buttons/AIAssistantButton");
 const hooks_1 = require("../core/hooks");
+const CustomContexts_1 = require("../layouts/CustomContexts");
 function RootLayout({ children }) {
     const { useSearchFeatures } = (0, hooks_1.useThemeHooks)();
     const { askAi } = useSearchFeatures();
     return (react_1.default.createElement("div", { "data-component-name": "layouts/RootLayout" },
-        react_1.default.createElement(SkipContent_1.SkipContent, null),
-        react_1.default.createElement(Navbar_1.Navbar, null),
-        children,
-        react_1.default.createElement(Footer_1.Footer, null),
-        askAi && react_1.default.createElement(AIAssistantButton_1.AIAssistantButton, null)));
+        react_1.default.createElement(CustomContexts_1.CustomContexts, null,
+            react_1.default.createElement(SkipContent_1.SkipContent, null),
+            react_1.default.createElement(Navbar_1.Navbar, null),
+            children,
+            react_1.default.createElement(Footer_1.Footer, null),
+            askAi && react_1.default.createElement(AIAssistantButton_1.AIAssistantButton, null))));
 }
 //# sourceMappingURL=RootLayout.js.map

package/lib/markdoc/tags/visibility.d.ts

@@ -0,0 +1,15 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+/** The part of a node the check reads; a stored plain-JSON AST node satisfies it too. */
+type VisibilityNodeLike = {
+    tag?: string;
+    attributes?: Record<string, unknown>;
+};
+/** True for a node whose content must never reach the rendered page. */
+export declare function isForAgentsOnly(node: VisibilityNodeLike): boolean;
+/**
+ * A `renderTag` that empties nodes hidden from the page and leaves every other tag to the
+ * caller's own walk. Used by the text extractors that read a raw AST, which no tag schema runs on.
+ */
+export declare function skipAgentsOnlyContent(node: VisibilityNodeLike): string | undefined;
+export declare const visibility: MarkdocSchemaWrapper;
+export {};

package/lib/markdoc/tags/visibility.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.visibility = void 0;
+exports.isForAgentsOnly = isForAgentsOnly;
+exports.skipAgentsOnlyContent = skipAgentsOnlyContent;
+/** True for a node whose content must never reach the rendered page. */
+function isForAgentsOnly(node) {
+    var _a;
+    return node.tag === 'visibility' && ((_a = node.attributes) === null || _a === void 0 ? void 0 : _a.for) === 'agents';
+}
+/**
+ * A `renderTag` that empties nodes hidden from the page and leaves every other tag to the
+ * caller's own walk. Used by the text extractors that read a raw AST, which no tag schema runs on.
+ */
+function skipAgentsOnlyContent(node) {
+    return isForAgentsOnly(node) ? '' : undefined;
+}
+exports.visibility = {
+    schema: {
+        attributes: {
+            for: { type: String, required: true, matches: ['humans', 'agents'] },
+        },
+        transform(node, config) {
+            return isForAgentsOnly(node) ? [] : node.transformChildren(config);
+        },
+        renderForLlms(node, { getBody }) {
+            return node.attributes.for === 'humans' ? '' : getBody();
+        },
+    },
+    tagName: 'visibility',
+};
+//# sourceMappingURL=visibility.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.71.0-next.1",
+  "version": "0.71.0-next.3",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -69,7 +69,7 @@
     "webpack": "5.105.2"
   },
   "dependencies": {
-    "@redocly/config": "0.65.0",
+    "@redocly/config": "0.66.0",
     "@tanstack/react-query": "5.62.3",
     "@tanstack/react-virtual": "3.13.0",
     "@xyflow/react": "12.8.3",

package/src/components/Dropdown/DropdownMenuItem.tsx

@@ -1,7 +1,14 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 
-import type { KeyboardEvent, CSSProperties, ReactNode, PropsWithChildren, JSX } from 'react';
+import type {
+  KeyboardEvent,
+  MouseEvent,
+  CSSProperties,
+  ReactNode,
+  PropsWithChildren,
+  JSX,
+} from 'react';
 import type { LinkProps } from '@redocly/theme/core/types';
 
 import { Link } from '@redocly/theme/components/Link/Link';
@@ -21,7 +28,7 @@ export type DropdownMenuItemProps = Partial<Pick<LinkProps, 'to' | 'target' | 'e
   separator?: boolean;
   disabled?: boolean;
   dangerous?: boolean;
-  onAction?: () => void;
+  onAction?: (event: KeyboardEvent | MouseEvent) => void;
   active?: boolean;
 };
 
@@ -43,13 +50,13 @@ export function DropdownMenuItem({
   role = 'menuitem',
   ...otherProps
 }: PropsWithChildren<DropdownMenuItemProps>): JSX.Element {
-  const handleClick = () => {
-    onAction?.();
+  const handleClick = (event: MouseEvent) => {
+    onAction?.(event);
   };
 
   const handleKeyDown = (event: KeyboardEvent) => {
     if (event.key === 'Enter' || event.key === ' ') {
-      onAction?.();
+      onAction?.(event);
     }
   };
 

package/src/index.ts

@@ -318,6 +318,7 @@ export * from '@redocly/theme/icons/IdeaIcon/IdeaIcon';
 export * from '@redocly/theme/icons/NewChatIcon/NewChatIcon';
 /* Layouts */
 export * from '@redocly/theme/layouts/RootLayout';
+export * from '@redocly/theme/layouts/CustomContexts';
 export * from '@redocly/theme/layouts/PageLayout';
 export * from '@redocly/theme/layouts/NotFound';
 export * from '@redocly/theme/layouts/Forbidden';

package/src/layouts/CustomContexts.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import type { JSX } from 'react';
+
+type CustomContextsProps = React.PropsWithChildren<{}>;
+
+// Eject this component to wrap every page in custom React context providers.
+export function CustomContexts({ children }: CustomContextsProps): JSX.Element {
+  return <>{children}</>;
+}

package/src/layouts/RootLayout.tsx

@@ -7,6 +7,7 @@ import { Footer } from '@redocly/theme/components/Footer/Footer';
 import { SkipContent } from '@redocly/theme/components/SkipContent/SkipContent';
 import { AIAssistantButton } from '@redocly/theme/components/Buttons/AIAssistantButton';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { CustomContexts } from '@redocly/theme/layouts/CustomContexts';
 
 export type LayoutConfig = {
   children: React.ReactNode;
@@ -18,11 +19,13 @@ export function RootLayout({ children }: LayoutConfig): JSX.Element {
 
   return (
     <div data-component-name="layouts/RootLayout">
-      <SkipContent />
-      <Navbar />
-      {children}
-      <Footer />
-      {askAi && <AIAssistantButton />}
+      <CustomContexts>
+        <SkipContent />
+        <Navbar />
+        {children}
+        <Footer />
+        {askAi && <AIAssistantButton />}
+      </CustomContexts>
     </div>
   );
 }

package/src/markdoc/tags/visibility.ts

@@ -0,0 +1,33 @@
+import type { Config, Node } from '@markdoc/markdoc';
+import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
+
+/** The part of a node the check reads; a stored plain-JSON AST node satisfies it too. */
+type VisibilityNodeLike = { tag?: string; attributes?: Record<string, unknown> };
+
+/** True for a node whose content must never reach the rendered page. */
+export function isForAgentsOnly(node: VisibilityNodeLike): boolean {
+  return node.tag === 'visibility' && node.attributes?.for === 'agents';
+}
+
+/**
+ * A `renderTag` that empties nodes hidden from the page and leaves every other tag to the
+ * caller's own walk. Used by the text extractors that read a raw AST, which no tag schema runs on.
+ */
+export function skipAgentsOnlyContent(node: VisibilityNodeLike): string | undefined {
+  return isForAgentsOnly(node) ? '' : undefined;
+}
+
+export const visibility: MarkdocSchemaWrapper = {
+  schema: {
+    attributes: {
+      for: { type: String, required: true, matches: ['humans', 'agents'] },
+    },
+    transform(node: Node, config: Config) {
+      return isForAgentsOnly(node) ? [] : node.transformChildren(config);
+    },
+    renderForLlms(node: Node, { getBody }) {
+      return node.attributes.for === 'humans' ? '' : getBody();
+    },
+  },
+  tagName: 'visibility',
+};