birotaio · Misfits09 · Oct 10, 2024 · Oct 10, 2024 · Oct 10, 2024
diff --git a/demo/src/components/ElementsAPI.tsx b/demo/src/components/ElementsAPI.tsx
@@ -16,7 +16,7 @@ export const ElementsAPI: React.FC = () => {
 
   return (
     <Box flex={1} overflowY={layout !== 'stacked' ? 'hidden' : undefined}>
-      <API apiDescriptionUrl={specUrlWithProxy} router="hash" layout={layout} />
+      <API apiDescriptionUrl={specUrlWithProxy} router="hash" layout={layout} useOperationPathInList={true} />
     </Box>
   );
 };
diff --git a/package.json b/package.json
@@ -76,9 +76,9 @@
     "elements": "yarn workspace @stoplight/elements",
     "elements-core": "yarn workspace @stoplight/elements-core",
     "elements-dev-portal": "yarn workspace @stoplight/elements-dev-portal",
-    "build": "yarn workspace @stoplight/elements-core build && yarn workspace @stoplight/elements build && yarn workspace @stoplight/elements-dev-portal build",
+    "build": "yarn workspace @fifteen/stoplight-elements-core build && yarn workspace @fifteen/stoplight-elements build && yarn workspace @stoplight/elements-dev-portal build",
     "build.docs": "yarn workspace @stoplight/elements build.docs",
-    "postbuild": "yarn workspace @stoplight/elements test.packaging && yarn workspace @stoplight/elements-core test.packaging && yarn workspace @stoplight/elements-dev-portal test.packaging",
+    "postbuild": "yarn workspace @fifteen/stoplight-elements test.packaging && yarn workspace @fifteen/stoplight-elements-core test.packaging && yarn workspace @stoplight/elements-dev-portal test.packaging",
     "lint": "eslint '{packages,examples}/*/src/**/*.{ts,tsx}'",
     "version": "lerna version --no-push",
     "release": "lerna publish from-package --yes --registry https://registry.npmjs.org --loglevel silly",
@@ -125,5 +125,5 @@
       "@commitlint/config-conventional"
     ]
   },
-  "dependencies": {}
+  "packageManager": "[email protected]"
 }
diff --git a/packages/elements-core/package.json b/packages/elements-core/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@stoplight/elements-core",
-  "version": "8.4.6",
+  "name": "@fifteen/stoplight-elements-core",
+  "version": "8.4.6-fifteen3",
   "sideEffects": [
     "web-components.min.js",
     "src/web-components/**",

diff --git a/packages/elements-core/src/components/Layout/ResponsiveSidebarLayout.tsx b/packages/elements-core/src/components/Layout/ResponsiveSidebarLayout.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Heading } from '@stoplight/mosaic';
+import { Box, Flex, Heading, Input } from '@stoplight/mosaic';
 import * as React from 'react';
 import { Link, useLocation } from 'react-router-dom';
 
@@ -115,6 +115,8 @@ export const Sidebar = ({
   onTocClick?(): void;
   isInResponsiveMode: boolean;
 }) => {
+  const [filter, setFilter] = React.useState('');
+
   return (
     <>
       <Flex ml={4} mb={5} alignItems="center">
@@ -125,13 +127,29 @@ export const Sidebar = ({
         )}
         <Heading size={4}>{name}</Heading>
       </Flex>
+      <Flex ml={4} mb={5} alignItems="center">
+        <Input
+          appearance="default"
+          placeholder="Filter routes"
+          onMouseDown={e => e.currentTarget.focus()}
+          onKeyDown={e => e.key === 'Enter' && e.currentTarget.blur()}
+          flex={1}
+          bg="canvas-100"
+          rounded
+          value={filter}
+          onChange={e => {
+            setFilter(e.currentTarget.value);
+          }}
+        />
+      </Flex>
       <Flex flexGrow flexShrink overflowY="auto" direction="col">
         <TableOfContents
           tree={tree}
           activeId={pathname}
           Link={Link}
           onLinkClick={onTocClick}
           isInResponsiveMode={isInResponsiveMode}
+          filter={filter}
         />
       </Flex>
       <PoweredByLink source={name} pathname={pathname} packageType="elements" />

diff --git a/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx b/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx
@@ -45,6 +45,7 @@ export const TableOfContents = React.memo<TableOfContentsProps>(
     maxDepthOpenByDefault,
     externalScrollbar = false,
     isInResponsiveMode = false,
+    filter = '',
     onLinkClick,
   }) => {
     const container = React.useRef<HTMLDivElement>(null);
@@ -95,6 +96,7 @@ export const TableOfContents = React.memo<TableOfContentsProps>(
                     onLinkClick={onLinkClick}
                     isInResponsiveMode={isInResponsiveMode}
                     makeSlugAbsoluteRoute={makeSlugAbsoluteRoute}
+                    filter={filter}
                   />
                 );
               })}
@@ -135,7 +137,8 @@ const GroupItem = React.memo<{
   makeSlugAbsoluteRoute?: boolean;
   maxDepthOpenByDefault?: number;
   onLinkClick?(): void;
-}>(({ item, depth, maxDepthOpenByDefault, isInResponsiveMode, makeSlugAbsoluteRoute, onLinkClick }) => {
+  filter?: string;
+}>(({ item, depth, maxDepthOpenByDefault, isInResponsiveMode, makeSlugAbsoluteRoute, onLinkClick, filter }) => {
   if (isExternalLink(item)) {
     return (
       <Box as="a" href={item.url} target="_blank" rel="noopener noreferrer" display="block">
@@ -156,9 +159,15 @@ const GroupItem = React.memo<{
         onLinkClick={onLinkClick}
         isInResponsiveMode={isInResponsiveMode}
         makeSlugAbsoluteRoute={makeSlugAbsoluteRoute}
+        filter={filter}
       />
     );
-  } else if (isNode(item)) {
+  } else if (
+    isNode(item) &&
+    (item.type !== 'http_operation' ||
+      (filter ?? '') === '' ||
+      item.title.toLowerCase().includes(filter!.toLowerCase()))
+  ) {
     return (
       <Node
         depth={depth}
@@ -205,104 +214,127 @@ const Group = React.memo<{
   isInResponsiveMode?: boolean;
   makeSlugAbsoluteRoute?: boolean;
   onLinkClick?(): void;
-}>(({ depth, item, maxDepthOpenByDefault, isInResponsiveMode, makeSlugAbsoluteRoute, onLinkClick = () => {} }) => {
-  const activeId = React.useContext(ActiveIdContext);
-  const [isOpen, setIsOpen] = React.useState(() => isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault));
-  const hasActive = !!activeId && hasActiveItem(item.items, activeId);
-
-  // If maxDepthOpenByDefault changes, we want to update all the isOpen states (used in live preview mode)
-  React.useEffect(() => {
-    const openByDefault = isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault);
-    if (isOpen !== openByDefault) {
-      setIsOpen(openByDefault);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [depth, maxDepthOpenByDefault]);
+  filter?: string;
+}>(
+  ({
+    depth,
+    item,
+    maxDepthOpenByDefault,
+    isInResponsiveMode,
+    makeSlugAbsoluteRoute,
+    onLinkClick = () => {},
+    filter,
+  }) => {
+    const activeId = React.useContext(ActiveIdContext);
+    const [isOpen, setIsOpen] = React.useState(() =>
+      isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault),
+    );
+    const hasActive = !!activeId && hasActiveItem(item.items, activeId);
 
-  // Expand group when it has the active item
-  React.useEffect(() => {
-    if (hasActive) {
-      setIsOpen(true);
-    }
-  }, [hasActive]);
+    // If maxDepthOpenByDefault changes, we want to update all the isOpen states (used in live preview mode)
+    React.useEffect(() => {
+      const openByDefault = isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault);
+      if (isOpen !== openByDefault) {
+        setIsOpen(openByDefault);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [depth, maxDepthOpenByDefault]);
 
-  const handleClick = (e: React.MouseEvent, forceOpen?: boolean) => {
-    setIsOpen(forceOpen ? true : !isOpen);
-  };
+    // Expand group when it has the active item
+    React.useEffect(() => {
+      if (hasActive) {
+        setIsOpen(true);
+      }
+    }, [hasActive]);
 
-  const meta = (
-    <Flex alignItems="center">
-      {isNodeGroup(item) && item.version && <Version value={item.version} />}
-      <Box
-        as={Icon}
-        icon={['fas', isOpen ? 'chevron-down' : 'chevron-right']}
-        color="muted"
-        fixedWidth
-        onClick={(e: React.MouseEvent) => {
-          // Don't propagate event when clicking icon
-          e.stopPropagation();
-          e.preventDefault();
-          handleClick(e);
-        }}
-      />
-    </Flex>
-  );
+    const handleClick = (e: React.MouseEvent, forceOpen?: boolean) => {
+      setIsOpen(forceOpen ? true : !isOpen);
+    };
 
-  // Show the Group as active when group has active item and is closed
-  const showAsActive = hasActive && !isOpen;
-  let elem;
-  if (isNodeGroup(item)) {
-    elem = (
-      <Node
-        depth={depth}
-        item={item}
-        meta={meta}
-        showAsActive={showAsActive}
-        onClick={handleClick}
-        onLinkClick={onLinkClick}
-        isInResponsiveMode={isInResponsiveMode}
-        makeSlugAbsoluteRoute={makeSlugAbsoluteRoute}
-      />
+    const meta = (
+      <Flex alignItems="center">
+        {isNodeGroup(item) && item.version && <Version value={item.version} />}
+        <Box
+          as={Icon}
+          icon={['fas', isOpen ? 'chevron-down' : 'chevron-right']}
+          color="muted"
+          fixedWidth
+          onClick={(e: React.MouseEvent) => {
+            // Don't propagate event when clicking icon
+            e.stopPropagation();
+            e.preventDefault();
+            handleClick(e);
+          }}
+        />
+      </Flex>
     );
-  } else {
-    elem = (
-      <Item
-        isInResponsiveMode={isInResponsiveMode}
-        title={item.title}
-        meta={meta}
-        onClick={handleClick}
-        depth={depth}
-        isActive={showAsActive}
-        icon={
-          item.itemsType &&
-          NODE_GROUP_ICON[item.itemsType] && (
-            <Box as={Icon} color={NODE_GROUP_ICON_COLOR[item.itemsType]} icon={NODE_GROUP_ICON[item.itemsType]} />
-          )
-        }
-      />
+
+    // Show the Group as active when group has active item and is closed
+    const showAsActive = hasActive && !isOpen;
+    let elem;
+    if (isNodeGroup(item)) {
+      elem = (
+        <Node
+          depth={depth}
+          item={item}
+          meta={meta}
+          showAsActive={showAsActive}
+          onClick={handleClick}
+          onLinkClick={onLinkClick}
+          isInResponsiveMode={isInResponsiveMode}
+          makeSlugAbsoluteRoute={makeSlugAbsoluteRoute}
+        />
+      );
+    } else {
+      elem = (
+        <Item
+          isInResponsiveMode={isInResponsiveMode}
+          title={item.title}
+          meta={meta}
+          onClick={handleClick}
+          depth={depth}
+          isActive={showAsActive}
+          icon={
+            item.itemsType &&
+            NODE_GROUP_ICON[item.itemsType] && (
+              <Box as={Icon} color={NODE_GROUP_ICON_COLOR[item.itemsType]} icon={NODE_GROUP_ICON[item.itemsType]} />
+            )
+          }
+        />
+      );
+    }
+
+    let filteredItems = item.items.filter(
+      e =>
+        !isNode(e) ||
+        e.type !== 'http_operation' ||
+        (filter ?? '') === '' ||
+        e.title.toLowerCase().includes(filter!.toLowerCase()),
     );
-  }
 
-  return (
-    <>
-      {elem}
+    if (filteredItems.length === 0) {
+      return null;
+    }
 
-      {isOpen &&
-        item.items.map((groupItem, key) => {
-          return (
+    return (
+      <>
+        {elem}
+        {isOpen &&
+          filteredItems.map((groupItem, key) => (
             <GroupItem
               key={key}
               item={groupItem}
               depth={depth + 1}
               onLinkClick={onLinkClick}
               isInResponsiveMode={isInResponsiveMode}
               makeSlugAbsoluteRoute={makeSlugAbsoluteRoute}
+              filter={filter}
             />
-          );
-        })}
-    </>
-  );
-});
+          ))}
+      </>
+    );
+  },
+);
 Group.displayName = 'Group';
 
 const Item = React.memo<{

diff --git a/packages/elements-core/src/components/TableOfContents/types.ts b/packages/elements-core/src/components/TableOfContents/types.ts
@@ -5,6 +5,7 @@ export type TableOfContentsProps = {
   maxDepthOpenByDefault?: number;
   externalScrollbar?: boolean;
   isInResponsiveMode?: boolean;
+  filter?: string;
   onLinkClick?(): void;
 };
 

diff --git a/packages/elements-core/src/components/TryIt/build-request.ts b/packages/elements-core/src/components/TryIt/build-request.ts
@@ -102,7 +102,12 @@ export const getQueryParams = ({
           throw Error();
         }
       } catch (e) {
-        throw new Error(`Cannot use param value "${value}". JSON array expected.`);
+        if (/^[\w\.-]+(,[\w\.-]+)*,?$/.test(value)) {
+          if (value.endsWith(',')) nested = value.slice(0, -1).split(',');
+          else nested = value.split(',');
+        } else {
+          throw new Error(`Cannot use param value "${value}". JSON array expected.`);
+        }
       }
 
       if (explode) {

diff --git a/packages/elements/package.json b/packages/elements/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@stoplight/elements",
-  "version": "8.4.6",
+  "name": "@fifteen/stoplight-elements",
+  "version": "8.4.6-fifteen3",
   "description": "UI components for composing beautiful developer documentation.",
   "keywords": [],
   "sideEffects": [

diff --git a/packages/elements/src/components/API/APIWithResponsiveSidebarLayout.tsx b/packages/elements/src/components/API/APIWithResponsiveSidebarLayout.tsx
@@ -20,6 +20,7 @@ type SidebarLayoutProps = {
   hideSamples?: boolean;
   hideSchemas?: boolean;
   hideInternal?: boolean;
+  useOperationPathInList?: boolean;
   hideExport?: boolean;
   hideServerInfo?: boolean;
   hideSecurityInfo?: boolean;
@@ -42,14 +43,15 @@ export const APIWithResponsiveSidebarLayout: React.FC<SidebarLayoutProps> = ({
   hideExport,
   hideServerInfo,
   hideSecurityInfo,
+  useOperationPathInList,
   exportProps,
   tryItCredentialsPolicy,
   tryItCorsProxy,
   renderExtensionAddon,
 }) => {
   const container = React.useRef<HTMLDivElement>(null);
   const tree = React.useMemo(
-    () => computeAPITree(serviceNode, { hideSchemas, hideInternal }),
+    () => computeAPITree(serviceNode, { hideSchemas, hideInternal, useOperationPathInList }),
     [serviceNode, hideSchemas, hideInternal],
   );
   const location = useLocation();