@redocly/theme 0.82.4-rc.1 → 0.83.0-rc.1

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

@@ -10,5 +10,6 @@ export type DropdownProps = PropsWithChildren<{
     dataAttributes?: Record<string, string>;
     className?: string;
     withArrow?: boolean;
+    onClick?: (event: React.UIEvent) => void;
 }>;
-export declare function Dropdown({ children, className, active, trigger, triggerEvent, closeOnClick, withArrow, dataAttributes, placement, alignment, }: DropdownProps): JSX.Element;
+export declare function Dropdown({ children, className, active, trigger, triggerEvent, closeOnClick, withArrow, dataAttributes, placement, alignment, onClick, }: DropdownProps): JSX.Element;

package/lib/components/Dropdown/Dropdown.js

@@ -32,7 +32,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
 const ChevronUpIcon_1 = require("../../icons/ChevronUpIcon/ChevronUpIcon");
-function Dropdown({ children, className, active, trigger, triggerEvent = 'click', closeOnClick = true, withArrow, dataAttributes, placement, alignment, }) {
+function Dropdown({ children, className, active, trigger, triggerEvent = 'click', closeOnClick = true, withArrow, dataAttributes, placement, alignment, onClick, }) {
     const dropdownRef = (0, react_1.useRef)(null);
     const [isOpen, setIsOpen] = (0, hooks_1.useControlledState)(false, active);
     const handleOpen = () => {
@@ -41,9 +41,7 @@ function Dropdown({ children, className, active, trigger, triggerEvent = 'click'
     const handleClose = () => {
         setIsOpen(false);
     };
-    const handleChildClick = (event) => {
-        event.stopPropagation();
-        event.preventDefault();
+    const handleChildClick = () => {
         handleClose();
     };
     const handleToggle = (event) => {
@@ -59,7 +57,7 @@ function Dropdown({ children, className, active, trigger, triggerEvent = 'click'
     (0, hooks_1.useOutsideClick)(dropdownRef, handleClose);
     const triggerChild = react_1.default.Children.only(trigger);
     const dropdownTrigger = (0, react_1.cloneElement)(triggerChild, Object.assign(Object.assign(Object.assign(Object.assign({ onClick: triggerEvent === 'click' ? handleToggle : undefined, icon: withArrow ? isOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null) : undefined }, (withArrow ? { iconPosition: 'right' } : {})), { tabIndex: 0 }), triggerChild.props), { onKeyDown: triggerEvent === 'click' ? handleKeyDown : undefined }));
-    return (react_1.default.createElement(DropdownWrapper, Object.assign({ "data-component-name": "Dropdown/Dropdown", "data-testid": "dropdown" }, dataAttributes, { className: className, ref: dropdownRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined }),
+    return (react_1.default.createElement(DropdownWrapper, Object.assign({ "data-component-name": "Dropdown/Dropdown", "data-testid": "dropdown" }, dataAttributes, { className: className, ref: dropdownRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: onClick }),
         dropdownTrigger,
         isOpen && (react_1.default.createElement(ChildrenWrapper, { placement: placement, alignment: alignment, onClick: closeOnClick ? handleChildClick : undefined }, children))));
 }

package/lib/components/Dropdown/DropdownMenuItem.js

@@ -90,6 +90,14 @@ const DropdownMenuItemWrapper = styled_components_1.default.li `
     outline: 1px solid var(--dropdown-menu-item-border-color-focused);
   }
 
+  background-color: var(--dropdown-menu-item-bg-color);
+  color: var(--dropdown-menu-item-color);
+
+  &:hover {
+    background-color: var(--dropdown-menu-item-bg-color-hover);
+    color: var(--dropdown-menu-item-color-hover);
+  }
+
   ${({ separator }) => separator &&
     (0, styled_components_1.css) `
       cursor: default;
@@ -99,9 +107,6 @@ const DropdownMenuItemWrapper = styled_components_1.default.li `
       --dropdown-menu-item-bg-color-hover: var(--dropdown-menu-item-bg-color);
     `}
 
-  background-color: var(--dropdown-menu-item-bg-color);
-  color: var(--dropdown-menu-item-color);
-
   ${({ active }) => active &&
     (0, styled_components_1.css) `
       background-color: var(--dropdown-menu-item-bg-color-active);
@@ -111,11 +116,6 @@ const DropdownMenuItemWrapper = styled_components_1.default.li `
       }
     `}
 
-  &:hover {
-    background-color: var(--dropdown-menu-item-bg-color-hover);
-    color: var(--dropdown-menu-item-color-hover);
-  }
-
   ${({ disabled }) => disabled &&
     (0, styled_components_1.css) `
       cursor: default;

package/lib/components/Menu/MenuItem.js

@@ -73,7 +73,7 @@ function MenuItem(props) {
         isDrilldown ? react_1.default.createElement(ArrowRightIcon_1.ArrowRightIcon, { size: "12px" }) : null,
         isOperation ? (react_1.default.createElement(HttpTag_1.HttpTag, { color: item.httpVerb || '' }, item.httpVerb === 'hook' ? 'event' : item.httpVerb)) : null));
     return (react_1.default.createElement(MenuItemWrapper, { "data-component-name": "Menu/MenuItem", className: generateClassName({ type, item, className }) },
-        item.link ? (react_1.default.createElement(MenuItemLink, { to: item.link, languageInsensitive: item.languageInsensitive }, label)) : (label),
+        item.link ? (react_1.default.createElement(MenuItemLink, { to: item.link, external: item.external, target: item.target, languageInsensitive: item.languageInsensitive }, label)) : (label),
         isNested ? (react_1.default.createElement(MenuItemNestedWrapper, { depth: depth, ref: nestedMenuRef, style: style }, isExpanded || !canUnmount ? props.children : null)) : null,
         item.separatorLine ? (react_1.default.createElement(MenuItemSeparatorLine, { depth: depth, linePosition: item.linePosition })) : null));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.82.4-rc.1",
+  "version": "0.83.0-rc.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -35,18 +35,18 @@
   },
   "devDependencies": {
     "@markdoc/markdoc": "0.4.0",
-    "@storybook/addon-actions": "7.6.4",
-    "@storybook/addon-essentials": "7.6.4",
-    "@storybook/addon-interactions": "7.6.4",
-    "@storybook/addon-links": "7.6.4",
-    "@storybook/addon-viewport": "7.6.4",
-    "@storybook/addons": "7.6.4",
-    "@storybook/core-common": "7.6.4",
-    "@storybook/node-logger": "7.6.4",
-    "@storybook/react": "7.6.4",
-    "@storybook/react-webpack5": "7.6.4",
+    "@storybook/addon-actions": "7.6.19",
+    "@storybook/addon-essentials": "7.6.19",
+    "@storybook/addon-interactions": "7.6.19",
+    "@storybook/addon-links": "7.6.19",
+    "@storybook/addon-viewport": "7.6.19",
+    "@storybook/addons": "7.6.17",
+    "@storybook/core-common": "7.6.19",
+    "@storybook/node-logger": "7.6.19",
+    "@storybook/react": "7.6.19",
+    "@storybook/react-webpack5": "7.6.19",
     "@storybook/testing-library": "0.2.2",
-    "@storybook/theming": "7.6.4",
+    "@storybook/theming": "7.6.19",
     "@testing-library/jest-dom": "6.1.5",
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.1",
@@ -75,9 +75,9 @@
     "react-refresh": "0.14.2",
     "react-router-dom": "6.21.1",
     "rimraf": "5.0.5",
-    "storybook": "7.6.4",
-    "storybook-addon-pseudo-states": "2.1.2",
-    "storybook-design-token": "3.0.0-beta.6",
+    "storybook": "7.6.19",
+    "storybook-addon-pseudo-states": "2.2.1",
+    "storybook-design-token": "3.1.0",
     "styled-components": "5.3.11",
     "styled-system": "5.1.5",
     "ts-jest": "29.1.2",
@@ -98,7 +98,7 @@
     "timeago.js": "^4.0.2",
     "i18next": "^22.4.12",
     "nprogress": "^0.2.0",
-    "@redocly/config": "0.82.4-rc.1"
+    "@redocly/config": "0.83.0-rc.1"
   },
   "scripts": {
     "start": "npm-run-all --parallel storybook storybook:tokens:watch",

package/src/components/Dropdown/Dropdown.tsx

@@ -19,6 +19,8 @@ export type DropdownProps = PropsWithChildren<{
   dataAttributes?: Record<string, string>;
   className?: string;
   withArrow?: boolean;
+
+  onClick?: (event: React.UIEvent) => void;
 }>;
 
 export function Dropdown({
@@ -32,6 +34,7 @@ export function Dropdown({
   dataAttributes,
   placement,
   alignment,
+  onClick,
 }: DropdownProps): JSX.Element {
   const dropdownRef = useRef<HTMLDivElement | null>(null);
   const [isOpen, setIsOpen] = useControlledState<boolean>(false, active);
@@ -44,9 +47,7 @@ export function Dropdown({
     setIsOpen(false);
   };
 
-  const handleChildClick = (event: React.UIEvent) => {
-    event.stopPropagation();
-    event.preventDefault();
+  const handleChildClick = () => {
     handleClose();
   };
 
@@ -84,6 +85,7 @@ export function Dropdown({
       ref={dropdownRef}
       onPointerEnter={triggerEvent === 'hover' ? handleOpen : undefined}
       onPointerLeave={triggerEvent === 'hover' ? handleClose : undefined}
+      onClick={onClick}
     >
       {dropdownTrigger}
 

package/src/components/Dropdown/DropdownMenuItem.tsx

@@ -130,6 +130,14 @@ const DropdownMenuItemWrapper = styled.li<{
     outline: 1px solid var(--dropdown-menu-item-border-color-focused);
   }
 
+  background-color: var(--dropdown-menu-item-bg-color);
+  color: var(--dropdown-menu-item-color);
+
+  &:hover {
+    background-color: var(--dropdown-menu-item-bg-color-hover);
+    color: var(--dropdown-menu-item-color-hover);
+  }
+
   ${({ separator }) =>
     separator &&
     css`
@@ -140,9 +148,6 @@ const DropdownMenuItemWrapper = styled.li<{
       --dropdown-menu-item-bg-color-hover: var(--dropdown-menu-item-bg-color);
     `}
 
-  background-color: var(--dropdown-menu-item-bg-color);
-  color: var(--dropdown-menu-item-color);
-
   ${({ active }) =>
     active &&
     css`
@@ -153,11 +158,6 @@ const DropdownMenuItemWrapper = styled.li<{
       }
     `}
 
-  &:hover {
-    background-color: var(--dropdown-menu-item-bg-color-hover);
-    color: var(--dropdown-menu-item-color-hover);
-  }
-
   ${({ disabled }) =>
     disabled &&
     css`

package/src/components/Menu/MenuItem.tsx

@@ -98,7 +98,12 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
       className={generateClassName({ type, item, className })}
     >
       {item.link ? (
-        <MenuItemLink to={item.link} languageInsensitive={item.languageInsensitive}>
+        <MenuItemLink
+          to={item.link}
+          external={item.external}
+          target={item.target}
+          languageInsensitive={item.languageInsensitive}
+        >
           {label}
         </MenuItemLink>
       ) : (