@redocly/theme 0.60.0-next.2 → 0.60.0-next.3

package/lib/components/Menu/MenuItem.js

@@ -80,7 +80,11 @@ function MenuItem(props) {
         }
     };
     const chevron = hasChevron ? (isExpanded ? (react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" })) : (react_1.default.createElement(ChevronRightIcon_1.ChevronRightIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" }))) : null;
-    const httpColor = item.deprecated ? 'http-deprecated' : item.httpVerb;
+    const httpColor = (0, utils_1.getOperationColor)({
+        isAdditionalOperation: item.isAdditionalOperation,
+        deprecated: item.deprecated,
+        httpVerb: item.httpVerb || '',
+    });
     const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { active: item.active, deprecated: item.deprecated, depth: depth, withChevron: hasChevron, isSeparator: isSeparator, onClick: handleOnClick, onKeyDown: handleExpandOnEnter, ref: labelRef, role: item.link ? 'none' : 'link', tabIndex: !item.link ? 0 : undefined, "data-testid": "menu-item-label", "data-active": item.active },
         hasChevron ? react_1.default.createElement(ChevronWrapper, null, chevron) : null,
         react_1.default.createElement(MenuItemIcon, { icon: item.icon, srcSet: item.srcSet }),

package/lib/components/Search/FilterFields/SearchFilterFieldTags.js

@@ -7,6 +7,8 @@ exports.SearchFilterFieldTags = SearchFilterFieldTags;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Tag_1 = require("../../../components/Tag/Tag");
+const utils_1 = require("../../../core/utils");
+const constants_1 = require("../../../core/constants");
 function SearchFilterFieldTags({ className, facet, selectedValues, onChange, }) {
     return (react_1.default.createElement(FilterTagsWrapper, { "data-component-name": "Search/FilterFields/SearchFilterFieldTags", className: className }, facet.values.map((facetCount, index) => {
         const { value, count, isCounterVisible } = facetCount;
@@ -17,7 +19,11 @@ function SearchFilterFieldTags({ className, facet, selectedValues, onChange, })
                 : [...selectedValues, value];
             onChange(values);
         };
-        return (react_1.default.createElement(FilterTagWrapper, { key: `${count}-${index}`, tabIndex: 0, color: value, onClick: () => {
+        const color = (0, utils_1.getOperationColor)({
+            httpVerb: value,
+            isAdditionalOperation: !constants_1.REQUEST_METHODS.includes(value.toUpperCase()),
+        });
+        return (react_1.default.createElement(FilterTagWrapper, { key: `${count}-${index}`, tabIndex: 0, color: color, onClick: () => {
                 updateSelectedValues();
             }, onKeyDown: (e) => {
                 if (e.key === 'Enter') {

package/lib/components/Search/SearchItem.js

@@ -61,6 +61,10 @@ function SearchItem({ onClick, item, className, product, innerRef, }) {
     const { document, highlight } = item;
     const parameter = highlight.parameters && highlight.parameters.length ? highlight.parameters[0] : null;
     const shouldShowPath = document.path && ((_a = document.path) === null || _a === void 0 ? void 0 : _a.length) > 1;
+    const httpColor = (0, utils_1.getOperationColor)({
+        isAdditionalOperation: document.isAdditionalOperation,
+        httpVerb: document.httpMethod || '',
+    });
     return (react_1.default.createElement(SearchItemWrapper, { className: className, to: document.url, onClick: onClick, tabIndex: 0, innerRef: (el) => {
             ref.current = el;
             if (!innerRef)
@@ -78,7 +82,7 @@ function SearchItem({ onClick, item, className, product, innerRef, }) {
                     react_1.default.createElement(Image_1.Image, { src: product.icon }),
                     product.name)),
                 document.httpMethod ? (react_1.default.createElement(SearchItemOperation, null,
-                    react_1.default.createElement(SearchItemOperationTag, { color: document.httpMethod }, document.httpMethod.toUpperCase()),
+                    react_1.default.createElement(SearchItemOperationTag, { color: httpColor }, document.httpMethod.toUpperCase()),
                     highlight.httpPath ? (0, SearchHighlight_1.searchHighlight)(highlight.httpPath) : document.httpPath)) : null,
                 react_1.default.createElement(SearchItemTitleWrapper, null,
                     react_1.default.createElement(SearchItemTitle, null, highlight.title ? (0, SearchHighlight_1.searchHighlight)(highlight.title) : document.title),

package/lib/components/Tag/Tag.d.ts

@@ -6,7 +6,7 @@ type SubjectStatusColor = 'active' | 'draft' | 'deprecated' | 'product';
 type HttpColor = 'get' | 'post' | 'put' | 'delete' | 'option' | 'patch' | 'head' | 'hook' | 'link';
 type ActionColor = 'receive' | 'send';
 type ChannelColor = 'channel';
-type HttpStatusColor = 'http-deprecated';
+type HttpStatusColor = 'http-deprecated' | 'http-additional-operation';
 type StatusColor = DefaultStatusColor | ActionStatusColor | SubjectStatusColor | HttpColor | ActionColor | ChannelColor | HttpStatusColor;
 type Color = 'red' | 'green' | 'blue' | 'grey' | 'turquoise' | 'magenta' | 'purple' | 'carrot' | 'raspberry' | 'orange' | 'grass' | 'persian-green' | 'sky' | 'blueberry';
 export type TagProps = {

package/lib/components/Tag/variables.dark.js

@@ -232,6 +232,12 @@ exports.tagDarkMode = (0, styled_components_1.css) `
     --tag-bg-color-hover: #373776; // @presenter Color
   }
 
+  .tag-http-additional-operation {
+    --tag-color: #FCAB69; // @presenter Color
+    --tag-bg-color: #523926; // @presenter Color
+    --tag-bg-color-hover: #694830; // @presenter Color
+  }
+
   .tag-receive {
     --tag-color: #88CF82; // @presenter Color
     --tag-bg-color: #23421F; // @presenter Color

package/lib/components/Tag/variables.js

@@ -313,6 +313,12 @@ exports.tag = (0, styled_components_1.css) `
     --tag-color: var(--text-color-disabled); // @presenter Color
   }
 
+  .tag-http-additional-operation {
+    --tag-color: #F97316; // @presenter Color
+    --tag-bg-color: #faede3; // @presenter Color
+    --tag-bg-color-hover: #fae2cf; // @presenter Color
+  }
+
   .tag-send {
     --tag-color: #4144F6; // @presenter Color
     --tag-bg-color: #ECECFE; // @presenter Color

package/lib/core/constants/index.d.ts

@@ -4,4 +4,5 @@ export * from './code-walkthrough';
 export * from './search';
 export * from './catalog';
 export * from './breadcrumb';
+export * from './request-methods';
 export * from './mcp';

package/lib/core/constants/index.js

@@ -20,5 +20,6 @@ __exportStar(require("./code-walkthrough"), exports);
 __exportStar(require("./search"), exports);
 __exportStar(require("./catalog"), exports);
 __exportStar(require("./breadcrumb"), exports);
+__exportStar(require("./request-methods"), exports);
 __exportStar(require("./mcp"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/constants/request-methods.d.ts

@@ -0,0 +1 @@
+export declare const REQUEST_METHODS: string[];

package/lib/core/constants/request-methods.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.REQUEST_METHODS = void 0;
+exports.REQUEST_METHODS = [
+    'GET',
+    'POST',
+    'PUT',
+    'DELETE',
+    'PATCH',
+    'OPTIONS',
+    'HEAD',
+    'TRACE',
+];
+//# sourceMappingURL=request-methods.js.map

package/lib/core/openapi/index.d.ts

@@ -11,6 +11,7 @@ export { useMount } from '../hooks/use-mount';
 export { GlobalStyle } from '../styles/global';
 export { breakpoints } from '../utils/media-css';
 export { isPrimitive } from '../utils/args-typecheck';
+export { getOperationColor } from '../utils/get-operation-color';
 export { ClipboardService } from '../utils/clipboard-service';
 export { getUserAgent } from '../utils/get-user-agent';
 export { useFocusTrap } from '../hooks/use-focus-trap';

package/lib/core/openapi/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeDataContext = exports.isObject = exports.isNotNull = exports.isString = exports.isUndefined = exports.SecurityVariablesEnvSuffix = exports.useDialogHotKeys = exports.useSearchDialog = exports.useModalScrollLock = exports.useActiveSectionId = exports.useOutsideClick = exports.useThemeHooks = exports.useFocusTrap = exports.getUserAgent = exports.ClipboardService = exports.isPrimitive = exports.breakpoints = exports.GlobalStyle = exports.useMount = exports.typedMemo = exports.capitalize = exports.withPathPrefix = exports.addTrailingSlash = exports.combineUrls = exports.getPathPrefix = exports.removeLeadingSlash = exports.addLeadingSlash = exports.IS_BROWSER = void 0;
+exports.ThemeDataContext = exports.isObject = exports.isNotNull = exports.isString = exports.isUndefined = exports.SecurityVariablesEnvSuffix = exports.useDialogHotKeys = exports.useSearchDialog = exports.useModalScrollLock = exports.useActiveSectionId = exports.useOutsideClick = exports.useThemeHooks = exports.useFocusTrap = exports.getUserAgent = exports.ClipboardService = exports.getOperationColor = exports.isPrimitive = exports.breakpoints = exports.GlobalStyle = exports.useMount = exports.typedMemo = exports.capitalize = exports.withPathPrefix = exports.addTrailingSlash = exports.combineUrls = exports.getPathPrefix = exports.removeLeadingSlash = exports.addLeadingSlash = exports.IS_BROWSER = void 0;
 var dom_1 = require("../utils/dom");
 Object.defineProperty(exports, "IS_BROWSER", { enumerable: true, get: function () { return dom_1.IS_BROWSER; } });
 var urls_1 = require("../utils/urls");
@@ -22,6 +22,8 @@ var media_css_1 = require("../utils/media-css");
 Object.defineProperty(exports, "breakpoints", { enumerable: true, get: function () { return media_css_1.breakpoints; } });
 var args_typecheck_1 = require("../utils/args-typecheck");
 Object.defineProperty(exports, "isPrimitive", { enumerable: true, get: function () { return args_typecheck_1.isPrimitive; } });
+var get_operation_color_1 = require("../utils/get-operation-color");
+Object.defineProperty(exports, "getOperationColor", { enumerable: true, get: function () { return get_operation_color_1.getOperationColor; } });
 var clipboard_service_1 = require("../utils/clipboard-service");
 Object.defineProperty(exports, "ClipboardService", { enumerable: true, get: function () { return clipboard_service_1.ClipboardService; } });
 var get_user_agent_1 = require("../utils/get-user-agent");

package/lib/core/types/search.d.ts

@@ -22,6 +22,7 @@ export type SearchHit = {
     httpMethod?: string;
     httpPath?: string | string[];
     deprecated?: boolean;
+    isAdditionalOperation?: boolean;
     security?: string[];
     parameters?: OperationParameter[];
     version?: string;

package/lib/core/types/sidebar.d.ts

@@ -43,6 +43,7 @@ export type ItemState = Omit<SidebarNavItem, 'items'> & {
     languageInsensitive?: boolean;
     modified?: boolean;
     deprecated?: boolean;
+    isAdditionalOperation?: boolean;
 };
 export type DrilldownMenuItemDetails = {
     previousLink?: string;

package/lib/core/utils/get-operation-color.d.ts

@@ -0,0 +1,7 @@
+type OperationColorProps = {
+    deprecated?: boolean;
+    isAdditionalOperation?: boolean;
+    httpVerb: string;
+};
+export declare function getOperationColor({ deprecated, isAdditionalOperation, httpVerb, }: OperationColorProps): string;
+export {};

package/lib/core/utils/get-operation-color.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOperationColor = getOperationColor;
+function getOperationColor({ deprecated, isAdditionalOperation, httpVerb, }) {
+    if (deprecated) {
+        return 'http-deprecated';
+    }
+    else if (isAdditionalOperation) {
+        return 'http-additional-operation';
+    }
+    return httpVerb;
+}
+//# sourceMappingURL=get-operation-color.js.map

package/lib/core/utils/index.d.ts

@@ -39,4 +39,5 @@ export * from './enhanced-smoothstep';
 export * from './icon-resolver';
 export * from './Dynamic';
 export * from './tabs';
+export * from './get-operation-color';
 export * from './frontmatter-translate';

package/lib/core/utils/index.js

@@ -55,5 +55,6 @@ __exportStar(require("./enhanced-smoothstep"), exports);
 __exportStar(require("./icon-resolver"), exports);
 __exportStar(require("./Dynamic"), exports);
 __exportStar(require("./tabs"), exports);
+__exportStar(require("./get-operation-color"), exports);
 __exportStar(require("./frontmatter-translate"), exports);
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.60.0-next.2",
+  "version": "0.60.0-next.3",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -87,7 +87,7 @@
     "openapi-sampler": "1.6.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.38.0",
+    "@redocly/config": "0.39.0",
     "@redocly/realm-asyncapi-sdk": "0.6.0-next.0"
   },
   "scripts": {

package/src/components/Menu/MenuItem.tsx

@@ -11,7 +11,7 @@ import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDow
 import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
 import { HttpTag } from '@redocly/theme/components/Tags/HttpTag';
 import { MenuItemType } from '@redocly/theme/core/constants';
-import { getMenuItemType } from '@redocly/theme/core/utils';
+import { getMenuItemType, getOperationColor } from '@redocly/theme/core/utils';
 import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';
 import { Badge } from '@redocly/theme/components/Badge/Badge';
 import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
@@ -67,7 +67,11 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
     )
   ) : null;
 
-  const httpColor = item.deprecated ? 'http-deprecated' : item.httpVerb;
+  const httpColor = getOperationColor({
+    isAdditionalOperation: item.isAdditionalOperation,
+    deprecated: item.deprecated,
+    httpVerb: item.httpVerb || '',
+  });
 
   const label = item.label && (
     <MenuItemLabelWrapper

package/src/components/Search/FilterFields/SearchFilterFieldTags.tsx

@@ -4,6 +4,8 @@ import styled from 'styled-components';
 import type { SearchFacet, SearchFacetCount } from '@redocly/theme/core/types';
 
 import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { getOperationColor } from '@redocly/theme/core/utils';
+import { REQUEST_METHODS } from '@redocly/theme/core/constants';
 
 type SearchFilterFieldTagsProps = {
   className?: string;
@@ -32,11 +34,15 @@ export function SearchFilterFieldTags({
             : [...selectedValues, value];
           onChange(values);
         };
+        const color = getOperationColor({
+          httpVerb: value,
+          isAdditionalOperation: !REQUEST_METHODS.includes(value.toUpperCase()),
+        });
         return (
           <FilterTagWrapper
             key={`${count}-${index}`}
             tabIndex={0}
-            color={value}
+            color={color}
             onClick={() => {
               updateSelectedValues();
             }}

package/src/components/Search/SearchItem.tsx

@@ -9,7 +9,7 @@ import { Link } from '@redocly/theme/components/Link/Link';
 import { Image } from '@redocly/theme/components/Image/Image';
 import { searchHighlight } from '@redocly/theme/components/Search/SearchHighlight';
 import { Badge } from '@redocly/theme/components/Badge/Badge';
-import { trimText } from '@redocly/theme/core/utils';
+import { trimText, getOperationColor } from '@redocly/theme/core/utils';
 import { ReturnKeyIcon } from '@redocly/theme/icons/ReturnKeyIcon/ReturnKeyIcon';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 
@@ -48,6 +48,11 @@ export function SearchItem({
     highlight.parameters && highlight.parameters.length ? highlight.parameters[0] : null;
   const shouldShowPath = document.path && document.path?.length > 1;
 
+  const httpColor = getOperationColor({
+    isAdditionalOperation: document.isAdditionalOperation,
+    httpVerb: document.httpMethod || '',
+  });
+
   return (
     <SearchItemWrapper
       className={className}
@@ -77,7 +82,7 @@ export function SearchItem({
           )}
           {document.httpMethod ? (
             <SearchItemOperation>
-              <SearchItemOperationTag color={document.httpMethod}>
+              <SearchItemOperationTag color={httpColor}>
                 {document.httpMethod.toUpperCase()}
               </SearchItemOperationTag>
               {highlight.httpPath ? searchHighlight(highlight.httpPath) : document.httpPath}

package/src/components/Tag/Tag.tsx

@@ -12,7 +12,7 @@ type SubjectStatusColor = 'active' | 'draft' | 'deprecated' | 'product';
 type HttpColor = 'get' | 'post' | 'put' | 'delete' | 'option' | 'patch' | 'head' | 'hook' | 'link';
 type ActionColor = 'receive' | 'send';
 type ChannelColor = 'channel';
-type HttpStatusColor = 'http-deprecated';
+type HttpStatusColor = 'http-deprecated' | 'http-additional-operation';
 type StatusColor =
   | DefaultStatusColor
   | ActionStatusColor

package/src/components/Tag/variables.dark.ts

@@ -230,6 +230,12 @@ export const tagDarkMode = css`
     --tag-bg-color-hover: #373776; // @presenter Color
   }
 
+  .tag-http-additional-operation {
+    --tag-color: #FCAB69; // @presenter Color
+    --tag-bg-color: #523926; // @presenter Color
+    --tag-bg-color-hover: #694830; // @presenter Color
+  }
+
   .tag-receive {
     --tag-color: #88CF82; // @presenter Color
     --tag-bg-color: #23421F; // @presenter Color

package/src/components/Tag/variables.ts

@@ -311,6 +311,12 @@ export const tag = css`
     --tag-color: var(--text-color-disabled); // @presenter Color
   }
 
+  .tag-http-additional-operation {
+    --tag-color: #F97316; // @presenter Color
+    --tag-bg-color: #faede3; // @presenter Color
+    --tag-bg-color-hover: #fae2cf; // @presenter Color
+  }
+
   .tag-send {
     --tag-color: #4144F6; // @presenter Color
     --tag-bg-color: #ECECFE; // @presenter Color

package/src/core/constants/index.ts

@@ -4,4 +4,5 @@ export * from './code-walkthrough';
 export * from './search';
 export * from './catalog';
 export * from './breadcrumb';
+export * from './request-methods';
 export * from './mcp';

package/src/core/constants/request-methods.ts

@@ -0,0 +1,10 @@
+export const REQUEST_METHODS = [
+  'GET',
+  'POST',
+  'PUT',
+  'DELETE',
+  'PATCH',
+  'OPTIONS',
+  'HEAD',
+  'TRACE',
+];

package/src/core/openapi/index.ts

@@ -24,6 +24,7 @@ export { useMount } from '../hooks/use-mount';
 export { GlobalStyle } from '../styles/global';
 export { breakpoints } from '../utils/media-css';
 export { isPrimitive } from '../utils/args-typecheck';
+export { getOperationColor } from '../utils/get-operation-color';
 export { ClipboardService } from '../utils/clipboard-service';
 export { getUserAgent } from '../utils/get-user-agent';
 export { useFocusTrap } from '../hooks/use-focus-trap';

package/src/core/types/search.ts

@@ -25,6 +25,7 @@ export type SearchHit = {
   httpMethod?: string;
   httpPath?: string | string[];
   deprecated?: boolean;
+  isAdditionalOperation?: boolean;
   security?: string[];
   parameters?: OperationParameter[];
   version?: string;

package/src/core/types/sidebar.ts

@@ -51,6 +51,7 @@ export type ItemState = Omit<SidebarNavItem, 'items'> & {
   languageInsensitive?: boolean;
   modified?: boolean; //item from openapi-docs sidebar
   deprecated?: boolean; //item from openapi-docs sidebar
+  isAdditionalOperation?: boolean; //item from openapi-docs sidebar
 };
 
 export type DrilldownMenuItemDetails = {

package/src/core/utils/get-operation-color.ts

@@ -0,0 +1,18 @@
+type OperationColorProps = {
+  deprecated?: boolean;
+  isAdditionalOperation?: boolean;
+  httpVerb: string;
+};
+
+export function getOperationColor({
+  deprecated,
+  isAdditionalOperation,
+  httpVerb,
+}: OperationColorProps): string {
+  if (deprecated) {
+    return 'http-deprecated';
+  } else if (isAdditionalOperation) {
+    return 'http-additional-operation';
+  }
+  return httpVerb;
+}

package/src/core/utils/index.ts

@@ -39,4 +39,5 @@ export * from './enhanced-smoothstep';
 export * from './icon-resolver';
 export * from './Dynamic';
 export * from './tabs';
+export * from './get-operation-color';
 export * from './frontmatter-translate';