@redocly/theme 0.55.0-rc.2 → 0.55.0

package/src/index.ts

@@ -15,6 +15,7 @@ export * from '@redocly/theme/components/Dropdown/Dropdown';
 export * from '@redocly/theme/components/Dropdown/DropdownMenu';
 export * from '@redocly/theme/components/Dropdown/DropdownMenuItem';
 export * from '@redocly/theme/components/Loaders/Loading';
+export * from '@redocly/theme/components/LoadMore/LoadMore';
 export * from '@redocly/theme/components/Link/Link';
 export * from '@redocly/theme/components/Portal/Portal';
 export * from '@redocly/theme/components/Segmented/Segmented';
@@ -89,7 +90,6 @@ export * from '@redocly/theme/components/Sidebar/Sidebar';
 /* OpenApiDocs */
 export * from '@redocly/theme/components/OpenApiDocs/hooks/AfterOpenApiOperation';
 export * from '@redocly/theme/components/OpenApiDocs/hooks/AfterOpenApiTitle';
-export * from '@redocly/theme/components/OpenApiDocs/hooks/AfterOpenApiDescription';
 export * from '@redocly/theme/components/OpenApiDocs/hooks/BeforeOpenApiOperation';
 export * from '@redocly/theme/components/OpenApiDocs/hooks/OpenApiFooter';
 export * from '@redocly/theme/components/OpenApiDocs/hooks/OpenApiHeader';
@@ -118,6 +118,25 @@ export * from '@redocly/theme/components/Menu/MenuMobile';
 export * from '@redocly/theme/components/Breadcrumbs/Breadcrumb';
 export * from '@redocly/theme/components/Breadcrumbs/Breadcrumbs';
 /* Catalog */
+export * from '@redocly/theme/components/Catalog/Catalog';
+export * from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntity';
+export * from '@redocly/theme/components/Catalog/CatalogCardView/CatalogCardView';
+export * from '@redocly/theme/components/Catalog/CatalogCardView/CatalogCard';
+export * from '@redocly/theme/components/Catalog/CatalogTableView/CatalogDomainsCell';
+export * from '@redocly/theme/components/Catalog/CatalogTableView/CatalogEntityCell';
+export * from '@redocly/theme/components/Catalog/CatalogTableView/CatalogOwnersCell';
+export * from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableHeaderCell';
+export * from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
+export * from '@redocly/theme/components/Catalog/CatalogSelector';
+export * from '@redocly/theme/components/Catalog/CatalogSortButton';
+export * from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
+export * from '@redocly/theme/components/Catalog/CatalogViewModeToggle';
+export * from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations';
+export * from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations';
+export * from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations';
+export * from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable';
+
+/* CatalogClassic */
 export * from '@redocly/theme/components/CatalogClassic/CatalogClassic';
 export * from '@redocly/theme/components/CatalogClassic/CatalogClassicCard';
 export * from '@redocly/theme/components/CatalogClassic/CatalogClassicActions';

package/src/layouts/PageLayout.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import type { JSX } from 'react';
 
 import { breakpoints } from '@redocly/theme/core/utils';
+import { CONTENT_ID } from '@redocly/theme/core/constants';
 
 interface PageLayoutProps {
   sidebar?: React.ReactNode;
@@ -16,7 +17,9 @@ export function PageLayout({
   return (
     <Container data-component-name="Layout/PageLayout">
       {sidebar}
-      <ContentContainer>{children}</ContentContainer>
+      <ContentContainer id={CONTENT_ID} tabIndex={0}>
+        {children}
+      </ContentContainer>
     </Container>
   );
 }

package/src/layouts/RootLayout.tsx

@@ -4,6 +4,7 @@ import type { JSX } from 'react';
 
 import { Navbar } from '@redocly/theme/components/Navbar/Navbar';
 import { Footer } from '@redocly/theme/components/Footer/Footer';
+import { SkipContent } from '@redocly/theme/components/SkipContent/SkipContent';
 
 export type LayoutConfig = {
   children: React.ReactNode;
@@ -12,6 +13,7 @@ export type LayoutConfig = {
 export function RootLayout({ children }: LayoutConfig): JSX.Element {
   return (
     <div data-component-name="layouts/RootLayout">
+      <SkipContent />
       <Navbar />
       {children}
       <Footer />

package/src/markdoc/components/Tabs/Tab.tsx

@@ -14,6 +14,7 @@ export type TabProps = {
   setRef: (element: HTMLButtonElement | null) => void;
   onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
   onClick: () => void;
+  icon?: React.ReactNode;
 };
 
 export function TabComponent({
@@ -24,6 +25,7 @@ export function TabComponent({
   setRef,
   onKeyDown,
   onClick,
+  icon,
 }: TabProps): JSX.Element {
   return (
     <TabItem data-component-name="Markdoc/Tabs/Tab" size={size} tabIndex={0}>
@@ -39,10 +41,19 @@ export function TabComponent({
         onKeyDown={onKeyDown}
         onClick={onClick}
       >
-        {label}
+        <LabelWrapper>
+          {icon}
+          {label}
+        </LabelWrapper>
       </TabButtonLink>
     </TabItem>
   );
 }
 
+const LabelWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+
 export const Tab = styled(TabComponent)``;

package/src/markdoc/components/Tabs/TabList.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React from 'react';
 import styled, { css } from 'styled-components';
 
 import type { JSX } from 'react';
@@ -8,8 +8,7 @@ import { TabItemProps, TabsSize } from '@redocly/theme/markdoc/components/Tabs/T
 import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
 import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
 import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
-import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
-import { ChevronUpIcon } from '@redocly/theme/icons/ChevronUpIcon/ChevronUpIcon';
+import { Button } from '@redocly/theme/components/Button/Button';
 
 type TabListProps = {
   childrenArray: React.ReactElement<TabItemProps>[];
@@ -42,16 +41,6 @@ export function TabList({
   allTabsHidden,
   tabsContainerRef,
 }: TabListProps): JSX.Element {
-  const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
-
-  const handleDropdownOpen = useCallback(() => {
-    setIsDropdownOpen(true);
-  }, []);
-
-  const handleDropdownClose = useCallback(() => {
-    setIsDropdownOpen(false);
-  }, []);
-
   return (
     <TabListContainer role="tablist" ref={tabsContainerRef} data-animating={isAnimating}>
       <HighlightBar size={size} style={{ left: highlightStyle.left, width: highlightStyle.width }}>
@@ -59,13 +48,14 @@ export function TabList({
       </HighlightBar>
       {childrenArray.map((child, index) => {
         if (!visibleTabs.includes(index)) return null;
-        const { label } = child.props;
+        const { label, icon } = child.props;
         const tabId = getTabId(label, index);
         return (
           <Tab
             key={`key-${tabId}`}
             tabId={tabId}
             label={label}
+            icon={icon}
             size={size}
             disabled={child.props.disable}
             setRef={(el: HTMLButtonElement | null) => {
@@ -88,47 +78,41 @@ export function TabList({
         tabIndex={0}
       >
         {overflowTabs.length > 0 && (
-          <div onPointerEnter={handleDropdownOpen} onPointerLeave={handleDropdownClose}>
-            <Dropdown
-              trigger={
-                <TabButtonLink
-                  size={size}
-                  className={
-                    overflowTabs.some((index) => activeTab === childrenArray[index].props.label)
-                      ? 'active'
-                      : undefined
-                  }
-                >
-                  {allTabsHidden ? activeTab : 'More'}
-                  {isDropdownOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
-                </TabButtonLink>
-              }
-              alignment="start"
-              withArrow={false}
-              active={isDropdownOpen}
-              triggerEvent="click"
-            >
-              <DropdownMenu>
-                {overflowTabs.map((index) => {
-                  const { label } = childrenArray[index].props;
-                  const tabId = getTabId(label, index);
-                  return (
-                    <DropdownMenuItem
-                      key={`more-${tabId}`}
-                      active={activeTab === label}
-                      onAction={() => {
-                        onTabClick(index);
-                        handleDropdownClose();
-                      }}
-                      disabled={childrenArray[index].props.disable}
-                    >
-                      {label}
-                    </DropdownMenuItem>
-                  );
-                })}
-              </DropdownMenu>
-            </Dropdown>
-          </div>
+          <Dropdown
+            trigger={
+              <TabButtonLink
+                size={size}
+                className={
+                  overflowTabs.some((index) => activeTab === childrenArray[index].props.label)
+                    ? 'active'
+                    : undefined
+                }
+              >
+                {allTabsHidden ? activeTab : 'More'}
+              </TabButtonLink>
+            }
+            alignment="start"
+            withArrow={true}
+          >
+            <DropdownMenu>
+              {overflowTabs.map((index) => {
+                const { label } = childrenArray[index].props;
+                const tabId = getTabId(label, index);
+                return (
+                  <DropdownMenuItem
+                    key={`more-${tabId}`}
+                    active={activeTab === label}
+                    onAction={() => {
+                      onTabClick(index);
+                    }}
+                    disabled={childrenArray[index].props.disable}
+                  >
+                    {label}
+                  </DropdownMenuItem>
+                );
+              })}
+            </DropdownMenu>
+          </Dropdown>
         )}
       </TabItem>
     </TabListContainer>
@@ -231,25 +215,11 @@ const HighlightBar = styled.div<{ size: TabsSize }>`
   }
 `;
 
-export const TabButtonLink = styled.button<{
-  size: TabsSize;
-  disabled?: boolean;
-}>`
-  all: unset;
-  flex-grow: 1;
-  cursor: pointer;
-  width: 100%;
-  text-align: center;
+export const TabButtonLink = styled(Button)`
   color: var(--md-tabs-tab-text-color);
   font-family: var(--md-tabs-tab-font-family);
   font-style: var(--md-tabs-tab-font-style);
   background-color: var(--md-tabs-tab-bg-color);
-  white-space: nowrap;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-xxs);
-  z-index: 2;
 
   transition:
     background-color 300ms ease-in-out,

package/src/markdoc/components/Tabs/Tabs.tsx

@@ -16,15 +16,17 @@ export type TabItemProps = {
   disable?: boolean;
   onClick?: () => void;
   children: React.ReactNode;
+  icon?: React.ReactNode;
 };
 
 type TabsProps = {
   children: React.ReactElement<TabItemProps>[];
   className?: string;
   size: TabsSize;
+  forceReady?: boolean;
 };
 
-export function Tabs({ children, className, size }: TabsProps): JSX.Element {
+export function Tabs({ children, className, size, forceReady = false }: TabsProps): JSX.Element {
   const [childrenArray, setChildrenArray] = useState<React.ReactElement<TabItemProps>[]>(
     React.Children.toArray(children) as React.ReactElement<TabItemProps>[],
   );
@@ -34,7 +36,6 @@ export function Tabs({ children, className, size }: TabsProps): JSX.Element {
   }, [children]);
   const tabsContainerRef = useRef<HTMLUListElement>(null);
   const [isAnimating, setIsAnimating] = useState<boolean>(false);
-
   const initialTab = childrenArray[0]?.props.label ?? '';
   const {
     activeTab,
@@ -105,15 +106,11 @@ export function Tabs({ children, className, size }: TabsProps): JSX.Element {
               setHighlightStyle({ left: offsetLeft, width: offsetWidth });
             }
 
-            const timeoutId = setTimeout(() => {
-              if (visibleTabs.includes(activeIndex)) {
-                activeTabElement?.classList.add('active');
-              }
-              setIsAnimating(false);
-            }, 300);
+            if (visibleTabs.includes(activeIndex)) {
+              activeTabElement?.classList.add('active');
+            }
 
             return () => {
-              clearTimeout(timeoutId);
               container.querySelectorAll('[data-label]').forEach((el) => {
                 el.classList.remove('active');
               });
@@ -130,7 +127,11 @@ export function Tabs({ children, className, size }: TabsProps): JSX.Element {
   }, [activeTab, prevTab, childrenArray, visibleTabs, overflowTabs]);
 
   return (
-    <TabsContainer data-component-name="Markdoc/Tabs/Tabs" className={className} isReady={ready}>
+    <TabsContainer
+      data-component-name="Markdoc/Tabs/Tabs"
+      className={className}
+      isReady={ready || forceReady}
+    >
       <TabList
         size={size}
         childrenArray={childrenArray}

package/lib/components/OpenApiDocs/hooks/AfterOpenApiDescription.d.ts

@@ -1 +0,0 @@
-export declare const AfterOpenApiDescription: any;

package/lib/components/OpenApiDocs/hooks/AfterOpenApiDescription.js

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

package/lib/ext/process-scorecard.d.ts

@@ -1,5 +0,0 @@
-import type { CatalogItem } from '../index.js';
-export declare function useProcessScorecard(): {
-    processScorecard: <T = any>(scorecard: T, api: CatalogItem) => T;
-    processInfo: <T>(info: T) => T;
-};

package/lib/ext/process-scorecard.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useProcessScorecard = useProcessScorecard;
-const react_1 = require("react");
-function useProcessScorecard() {
-    return {
-        processScorecard: (0, react_1.useCallback)((scorecard) => scorecard, []),
-        processInfo: (0, react_1.useCallback)((info) => info, []),
-    };
-}
-//# sourceMappingURL=process-scorecard.js.map

package/src/components/OpenApiDocs/hooks/AfterOpenApiDescription.tsx

@@ -1 +0,0 @@
-export const AfterOpenApiDescription: any = null;

package/src/ext/process-scorecard.ts

@@ -1,13 +0,0 @@
-import { useCallback } from 'react';
-
-import type { CatalogItem } from '@redocly/theme';
-
-export function useProcessScorecard(): {
-  processScorecard: <T = any>(scorecard: T, api: CatalogItem) => T;
-  processInfo: <T>(info: T) => T;
-} {
-  return {
-    processScorecard: useCallback((scorecard) => scorecard, []),
-    processInfo: useCallback((info) => info, []),
-  };
-}