@redocly/theme 0.35.6 → 0.35.9

package/lib/components/Catalog/useCatalog.d.ts

@@ -2,6 +2,5 @@ import type { ResolvedNavItem } from '../../types/portal';
 import type { FilteredCatalog } from '../../types/portal/src/shared/types/catalog';
 import type { CatalogConfig } from '../../config';
 export declare function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): FilteredCatalog;
-export declare function fillSearchParams(filterProperty: string, filterValues: Set<string>, searchParams: URLSearchParams): URLSearchParams;
-export declare function handleFilterInput(filterTerm: string): URLSearchParams;
+export declare function fillSearchParams(filterProperty: string, filterValues: Set<string>, searchParams: URLSearchParams): void;
 export declare function getFilterValues(filterValues: any): Set<string>;

package/lib/components/Catalog/useCatalog.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFilterValues = exports.handleFilterInput = exports.fillSearchParams = exports.useCatalog = void 0;
+exports.getFilterValues = exports.fillSearchParams = exports.useCatalog = void 0;
 const React = __importStar(require("react"));
 const react_router_dom_1 = require("react-router-dom");
 const telemetry_1 = require("../../mocks/telemetry");
@@ -90,14 +90,15 @@ function useCatalog(items, config) {
         window.scrollTo(0, 0);
     }, [filtersWithOptions]);
     const handleSearchParams = () => {
-        let newSearchParams = handleFilterInput(filterTerm);
+        const newSearchParams = new URLSearchParams(Array.from(searchParams.entries()));
+        filterTerm ? searchParams.set('filter', filterTerm) : searchParams.delete('filter');
         filtersState.forEach((filterValues, filterIdx) => {
             var _a;
             const filter = (_a = config.filters) === null || _a === void 0 ? void 0 : _a[filterIdx];
             if (!filter)
                 return;
             const values = getFilterValues(filterValues);
-            newSearchParams = fillSearchParams(filter.property, values, newSearchParams);
+            fillSearchParams(filter.property, values, newSearchParams);
         });
         const newSearch = newSearchParams.toString();
         if (newSearch === location.search.substring(1))
@@ -309,22 +310,13 @@ function mapFilterValues(value, mapping) {
         : mapping[String(value)] || value;
 }
 function fillSearchParams(filterProperty, filterValues, searchParams) {
+    // Clear old values of the filter before repopulating
+    searchParams.delete(filterProperty);
     filterValues.forEach((value) => {
-        if (!searchParams.has(filterProperty, value))
-            searchParams.append(filterProperty, value);
+        searchParams.append(filterProperty, value);
     });
-    return searchParams;
 }
 exports.fillSearchParams = fillSearchParams;
-function handleFilterInput(filterTerm) {
-    const searchParams = new URLSearchParams();
-    if (filterTerm)
-        searchParams.set('filter', filterTerm);
-    else
-        searchParams.delete('filter');
-    return searchParams;
-}
-exports.handleFilterInput = handleFilterInput;
 function getFilterValues(filterValues) {
     const values = new Set();
     if (filterValues instanceof Set)

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

@@ -18,5 +18,5 @@ export declare const DropdownList: import("styled-components").StyledComponent<"
     alignment?: string | undefined;
 }, never>;
 export declare const DropdownListItem: import("styled-components").StyledComponent<"li", any, {
-    separator?: boolean | undefined;
+    separatorLine?: boolean | undefined;
 }, never>;

package/lib/components/Dropdown/Dropdown.js

@@ -51,8 +51,8 @@ const Dropdown = ({ children, className, items, withArrow, triggerEvent = 'click
             icon,
             withArrow ? isOpen ? react_1.default.createElement(icons_1.ArrowIcon, { direction: "up" }) : react_1.default.createElement(icons_1.ArrowIcon, { direction: "down" }) : null),
         isOpen && (react_1.default.createElement(exports.DropdownList, { placement: placement, alignment: alignment }, items.map((item, index) => {
-            var _a;
-            return (react_1.default.createElement(exports.DropdownListItem, { key: index, onClick: () => handleClick(item), separator: (_a = item.props) === null || _a === void 0 ? void 0 : _a.separator }, item));
+            var _a, _b, _c, _d;
+            return ((_a = item.props) === null || _a === void 0 ? void 0 : _a.separator) ? (react_1.default.createElement(DropdownSeparatorItem, { key: index, separatorLine: (_b = item.props) === null || _b === void 0 ? void 0 : _b.separatorLine, linePosition: (_c = item.props) === null || _c === void 0 ? void 0 : _c.linePosition }, item)) : (react_1.default.createElement(exports.DropdownListItem, { key: index, onClick: () => handleClick(item), separatorLine: (_d = item.props) === null || _d === void 0 ? void 0 : _d.separatorLine }, item));
         })))));
 };
 exports.Dropdown = Dropdown;
@@ -106,11 +106,31 @@ exports.DropdownListItem = styled_components_1.default.li `
     background-color: var(--dropdown-list-item-active-background-color);
   }
 
-  ${({ separator }) => separator &&
+  ${({ separatorLine }) => separatorLine &&
     (0, styled_components_1.css) `
       border-bottom: 1px solid var(--dropdown-list-item-separator-color);
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     `}
 `;
+const DropdownSeparatorItem = styled_components_1.default.div `
+  display: block;
+  width: 100%;
+  border: none;
+  background: none;
+  padding: var(--dropdown-list-item-space-between) 0;
+  text-align: left;
+  cursor: default;
+  & > * {
+    padding: var(--dropdown-list-item-separator-padding-top)
+      var(--dropdown-list-item-horizontal-padding)
+      var(--dropdown-list-item-separator-padding-bottom);
+  }
+  ${({ separatorLine, linePosition }) => separatorLine &&
+    (0, styled_components_1.css) `
+    border-${linePosition}: 1px solid var(--dropdown-list-item-separator-color);
+    border-${linePosition}-left-radius: 0;
+    border-${linePosition}-right-radius: 0;
+  `}
+`;
 //# sourceMappingURL=Dropdown.js.map

package/lib/components/Dropdown/styledVariables.js

@@ -20,11 +20,14 @@ exports.dropdown = (0, styled_components_1.css) `
   --dropdown-list-box-shadow: var(--bg-raised-shadow); // @presenter Shadow
 
   --dropdown-list-item-horizontal-padding: var(--spacing-base); // @presenter Spacing
-  --dropdown-list-item-vertical-padding: var(--spacing-xs); // @presenter Spacing
+  --dropdown-list-item-vertical-padding: 5px; // @presenter Spacing
   --dropdown-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
   --dropdown-list-item-active-background-color: var(--bg-raised); // @presenter Color
   --dropdown-list-item-separator-color: var(--border-primary); // @presenter Color
 
+  --dropdown-list-item-space-between: 2px; // @presenter Spacing
+  --dropdown-list-item-separator-padding-top: var(--spacing-xs); // @presenter Spacing
+  --dropdown-list-item-separator-padding-bottom: var(--spacing-xxs); // @presenter Spacing
   // @tokens End
 `;
 //# sourceMappingURL=styledVariables.js.map

package/lib/components/Navbar/NavbarItem.js

@@ -54,7 +54,15 @@ function NavbarItem({ navItem, className }) {
     if (navItem.items) {
         const item = navItem;
         const groupItems = item.items;
-        const groupItemsComponents = groupItems.map((item, index) => (react_1.default.createElement(Link_1.Link, { key: `${item.label}_${index}`, to: item.link }, translate(item.labelTranslationKey, item.label))));
+        const groupItemsComponents = groupItems.map((item, index) => {
+            if (item.type === 'link') {
+                return (react_1.default.createElement(Link_1.Link, { key: `${item.label}_${index}`, to: item.link, separatorLine: item.separatorLine }, translate(item.labelTranslationKey, item.label)));
+            }
+            if (item.type === 'separator') {
+                return (react_1.default.createElement(NavbarSeparator, { key: `${item.label}_${index}`, separator: true, separatorLine: item.separatorLine, linePosition: item.linePosition }, translate(item.labelTranslationKey, item.label)));
+            }
+            return null;
+        });
         return (react_1.default.createElement(exports.NavbarMenuItemDropdown, { items: groupItemsComponents, triggerEvent: "hover" },
             react_1.default.createElement(exports.NavbarMenuItem, { active: false, "data-component-name": "Navbar/NavbarItem", className: className, onClick: () => telemetry_1.telemetry.send('navbar_menu_item_clicked', { type: 'group' }) },
                 react_1.default.createElement(exports.NavbarIcon, { url: item.icon }),
@@ -125,4 +133,9 @@ exports.NavbarIcon = styled_components_1.default.i `
       background-repeat: no-repeat;
     `}
 `;
+const NavbarSeparator = styled_components_1.default.span `
+  font-size: var(--navbar-separator-font-size);
+  color: var(--navbar-separator-text-color);
+  line-height: var(--navbar-separator-line-height);
+`;
 //# sourceMappingURL=NavbarItem.js.map

package/lib/components/Navbar/styledVariables.js

@@ -38,5 +38,9 @@ exports.navbar = (0, styled_components_1.css) `
   --navbar-item-icon-width: 1.5em; // @presenter Spacing
   --navbar-item-icon-height: 1.5em; // @presenter Spacing
   --navbar-item-icon-margin-right: 0.5em; // @presenter Spacing
+  
+  --navbar-separator-text-color: var(--text-secondary);
+  --navbar-separator-font-size: var(--font-size-sm);
+  --navbar-separator-line-height: var(--line-height-sm);
 `;
 //# sourceMappingURL=styledVariables.js.map

package/lib/components/Profile/UserProfile.js

@@ -47,7 +47,7 @@ function UserProfile({ userData, handleLogout, hasDeveloperOnboarding = false, }
     }
     if (userProfile && userProfile.menu) {
         for (const item of userProfile.menu) {
-            menuItems.push(react_1.default.createElement(Link_1.Link, { external: item.external, key: item.label, to: item.link || '', separator: item === null || item === void 0 ? void 0 : item.separatorLine }, item.label));
+            menuItems.push(react_1.default.createElement(Link_1.Link, { external: item.external, key: item.label, to: item.link || '', separatorLine: item === null || item === void 0 ? void 0 : item.separatorLine }, item.label));
         }
     }
     menuItems.push(react_1.default.createElement(Logout, { onClick: () => {

package/lib/types/portal/src/shared/constants.d.ts

@@ -1,4 +1,4 @@
-export { REDOCLY_TEAMS_RBAC } from '@redocly/config';
+export { REDOCLY_TEAMS_RBAC, REDOCLY_ROUTE_RBAC } from '@redocly/config';
 export declare const DEFAULT_THEME_NAME = "@redocly/theme";
 export declare const USER_THEME_ALIAS = "@theme";
 export declare const DEFAULT_LOCALE_PLACEHOLDER = "default_locale";

package/lib/types/portal/src/shared/constants.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FsErrors = exports.ExternalRoutes = exports.DEV_LOGIN_SLUG = exports.FEEDBACK_TYPES = exports.DEFAULT_LOCALE_PLACEHOLDER = exports.USER_THEME_ALIAS = exports.DEFAULT_THEME_NAME = exports.REDOCLY_TEAMS_RBAC = void 0;
+exports.FsErrors = exports.ExternalRoutes = exports.DEV_LOGIN_SLUG = exports.FEEDBACK_TYPES = exports.DEFAULT_LOCALE_PLACEHOLDER = exports.USER_THEME_ALIAS = exports.DEFAULT_THEME_NAME = exports.REDOCLY_ROUTE_RBAC = exports.REDOCLY_TEAMS_RBAC = void 0;
 var config_1 = require("@redocly/config");
 Object.defineProperty(exports, "REDOCLY_TEAMS_RBAC", { enumerable: true, get: function () { return config_1.REDOCLY_TEAMS_RBAC; } });
+Object.defineProperty(exports, "REDOCLY_ROUTE_RBAC", { enumerable: true, get: function () { return config_1.REDOCLY_ROUTE_RBAC; } });
 exports.DEFAULT_THEME_NAME = '@redocly/theme';
 exports.USER_THEME_ALIAS = '@theme';
 exports.DEFAULT_LOCALE_PLACEHOLDER = 'default_locale';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.35.6",
+  "version": "0.35.9",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -89,7 +89,7 @@
     "react-calendar": "4.2.1",
     "react-date-picker": "10.0.3",
     "timeago.js": "^4.0.2",
-    "@redocly/config": "0.1.5"
+    "@redocly/config": "0.1.6"
   },
   "scripts": {
     "start": "npm-run-all --parallel storybook storybook:tokens:watch",

package/src/components/Catalog/useCatalog.ts

@@ -86,13 +86,15 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
   );
 
   const handleSearchParams = () => {
-    let newSearchParams = handleFilterInput(filterTerm);
+    const newSearchParams = new URLSearchParams(Array.from(searchParams.entries()));
+
+    filterTerm ? searchParams.set('filter', filterTerm) : searchParams.delete('filter');
 
     filtersState.forEach((filterValues, filterIdx) => {
       const filter = config.filters?.[filterIdx];
       if (!filter) return;
       const values = getFilterValues(filterValues);
-      newSearchParams = fillSearchParams(filter.property, values, newSearchParams);
+      fillSearchParams(filter.property, values, newSearchParams);
     });
 
     const newSearch = newSearchParams.toString();
@@ -371,20 +373,11 @@ export function fillSearchParams(
   filterValues: Set<string>,
   searchParams: URLSearchParams,
 ) {
+  // Clear old values of the filter before repopulating
+  searchParams.delete(filterProperty);
   filterValues.forEach((value) => {
-    if (!searchParams.has(filterProperty, value)) searchParams.append(filterProperty, value);
+    searchParams.append(filterProperty, value);
   });
-
-  return searchParams;
-}
-
-export function handleFilterInput(filterTerm: string) {
-  const searchParams = new URLSearchParams();
-
-  if (filterTerm) searchParams.set('filter', filterTerm);
-  else searchParams.delete('filter');
-
-  return searchParams;
 }
 
 export function getFilterValues(filterValues: any) {

package/src/components/Dropdown/Dropdown.tsx

@@ -69,15 +69,25 @@ export const Dropdown = ({
       </DropdownHeader>
       {isOpen && (
         <DropdownList placement={placement} alignment={alignment}>
-          {items.map((item, index) => (
-            <DropdownListItem
-              key={index}
-              onClick={() => handleClick(item)}
-              separator={(item as JSX.Element).props?.separator}
-            >
-              {item}
-            </DropdownListItem>
-          ))}
+          {items.map((item, index) =>
+            (item as JSX.Element).props?.separator ? (
+              <DropdownSeparatorItem
+                key={index}
+                separatorLine={(item as JSX.Element).props?.separatorLine}
+                linePosition={(item as JSX.Element).props?.linePosition}
+              >
+                {item}
+              </DropdownSeparatorItem>
+            ) : (
+              <DropdownListItem
+                key={index}
+                onClick={() => handleClick(item)}
+                separatorLine={(item as JSX.Element).props?.separatorLine}
+              >
+                {item}
+              </DropdownListItem>
+            ),
+          )}
         </DropdownList>
       )}
     </DropdownContainer>
@@ -126,7 +136,7 @@ export const DropdownList = styled.ul<{ placement?: string; alignment?: string }
   z-index: 1;
 `;
 
-export const DropdownListItem = styled.li<{ separator?: boolean }>`
+export const DropdownListItem = styled.li<{ separatorLine?: boolean }>`
   border-radius: var(--dropdown-list-item-border-radius);
 
   & > * {
@@ -137,11 +147,36 @@ export const DropdownListItem = styled.li<{ separator?: boolean }>`
     background-color: var(--dropdown-list-item-active-background-color);
   }
 
-  ${({ separator }) =>
-    separator &&
+  ${({ separatorLine }) =>
+    separatorLine &&
     css`
       border-bottom: 1px solid var(--dropdown-list-item-separator-color);
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     `}
 `;
+
+const DropdownSeparatorItem = styled.div<{
+  separatorLine?: boolean;
+  linePosition: 'top' | 'bottom';
+}>`
+  display: block;
+  width: 100%;
+  border: none;
+  background: none;
+  padding: var(--dropdown-list-item-space-between) 0;
+  text-align: left;
+  cursor: default;
+  & > * {
+    padding: var(--dropdown-list-item-separator-padding-top)
+      var(--dropdown-list-item-horizontal-padding)
+      var(--dropdown-list-item-separator-padding-bottom);
+  }
+  ${({ separatorLine, linePosition }) =>
+    separatorLine &&
+    css`
+    border-${linePosition}: 1px solid var(--dropdown-list-item-separator-color);
+    border-${linePosition}-left-radius: 0;
+    border-${linePosition}-right-radius: 0;
+  `}
+`;

package/src/components/Dropdown/styledVariables.ts

@@ -18,10 +18,13 @@ export const dropdown = css`
   --dropdown-list-box-shadow: var(--bg-raised-shadow); // @presenter Shadow
 
   --dropdown-list-item-horizontal-padding: var(--spacing-base); // @presenter Spacing
-  --dropdown-list-item-vertical-padding: var(--spacing-xs); // @presenter Spacing
+  --dropdown-list-item-vertical-padding: 5px; // @presenter Spacing
   --dropdown-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
   --dropdown-list-item-active-background-color: var(--bg-raised); // @presenter Color
   --dropdown-list-item-separator-color: var(--border-primary); // @presenter Color
 
+  --dropdown-list-item-space-between: 2px; // @presenter Spacing
+  --dropdown-list-item-separator-padding-top: var(--spacing-xs); // @presenter Spacing
+  --dropdown-list-item-separator-padding-bottom: var(--spacing-xxs); // @presenter Spacing
   // @tokens End
 `;

package/src/components/Navbar/NavbarItem.tsx

@@ -49,15 +49,34 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
 
   if ((navItem as ResolvedNavGroupItem).items) {
     const item = navItem as ResolvedNavGroupItem;
-    const groupItems = item.items as ResolvedNavLinkItem[];
-    const groupItemsComponents = groupItems.map((item, index) => (
-      <Link key={`${item.label}_${index}`} to={item.link}>
-        {translate(item.labelTranslationKey, item.label)}
-      </Link>
-    ));
+    const groupItems = item.items as ResolvedNavItem[];
+    const groupItemsComponents = groupItems.map((item, index) => {
+      if (item.type === 'link') {
+        return (
+          <Link key={`${item.label}_${index}`} to={item.link} separatorLine={item.separatorLine}>
+            {translate(item.labelTranslationKey, item.label)}
+          </Link>
+        );
+      }
+
+      if (item.type === 'separator') {
+        return (
+          <NavbarSeparator
+            key={`${item.label}_${index}`}
+            separator={true}
+            separatorLine={item.separatorLine}
+            linePosition={item.linePosition}
+          >
+            {translate(item.labelTranslationKey, item.label)}
+          </NavbarSeparator>
+        );
+      }
+
+      return null;
+    });
 
     return (
-      <NavbarMenuItemDropdown items={groupItemsComponents} triggerEvent="hover">
+      <NavbarMenuItemDropdown items={groupItemsComponents as JSX.Element[]} triggerEvent="hover">
         <NavbarMenuItem
           active={false}
           data-component-name="Navbar/NavbarItem"
@@ -146,3 +165,13 @@ export const NavbarIcon = styled.i<{ url?: string }>`
       background-repeat: no-repeat;
     `}
 `;
+
+const NavbarSeparator = styled.span<{
+  separator: true;
+  separatorLine?: boolean;
+  linePosition?: 'top' | 'bottom';
+}>`
+  font-size: var(--navbar-separator-font-size);
+  color: var(--navbar-separator-text-color);
+  line-height: var(--navbar-separator-line-height);
+`;

package/src/components/Navbar/styledVariables.ts

@@ -36,4 +36,8 @@ export const navbar = css`
   --navbar-item-icon-width: 1.5em; // @presenter Spacing
   --navbar-item-icon-height: 1.5em; // @presenter Spacing
   --navbar-item-icon-margin-right: 0.5em; // @presenter Spacing
+  
+  --navbar-separator-text-color: var(--text-secondary);
+  --navbar-separator-font-size: var(--font-size-sm);
+  --navbar-separator-line-height: var(--line-height-sm);
 `;

package/src/components/Profile/UserProfile.tsx

@@ -38,7 +38,7 @@ export function UserProfile({
           external={item.external}
           key={item.label}
           to={item.link || ''}
-          separator={item?.separatorLine}
+          separatorLine={item?.separatorLine}
         >
           {item.label}
         </Link>,

package/src/mocks/hooks/index.ts

@@ -79,7 +79,7 @@ export function useCatalog(_items: ResolvedNavItem[], _config: CatalogConfig): F
 }
 
 export const useTranslate = (): { translate: TFunction } => ({
-  translate: (value?: string, options?: { defaultValue: string } | string) =>
+  translate: (value?: string, options?: { defaultValue?: string } | string) =>
     (typeof options === 'string' ? options : options?.defaultValue) || value || '',
 });
 

package/src/types/portal/src/shared/constants.ts

@@ -1,9 +1,9 @@
-export { REDOCLY_TEAMS_RBAC } from '@redocly/config';
+export { REDOCLY_TEAMS_RBAC, REDOCLY_ROUTE_RBAC  } from '@redocly/config';
 
 export const DEFAULT_THEME_NAME = '@redocly/theme';
 export const USER_THEME_ALIAS = '@theme';
-export const DEFAULT_LOCALE_PLACEHOLDER = 'default_locale'
-export type REQUIRED_OIDC_SCOPES =  string[];
+export const DEFAULT_LOCALE_PLACEHOLDER = 'default_locale';
+export type REQUIRED_OIDC_SCOPES = string[];
 export type DEFAULT_COOKIE_EXPIRATION = number;
 export enum FEEDBACK_TYPES {
   RATING = 'rating',
@@ -19,4 +19,4 @@ export enum ExternalRoutes {
 }
 export enum FsErrors {
   NotExist = 'ENOENT',
-}
+}