@redocly/theme 0.0.0-beta-20240223133421 → 0.0.0-beta-20240227165736

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -38,11 +38,11 @@ function CodeBlockControls({ children, className, title, controls, tabs, }) {
         title && react_1.default.createElement(Title, null, title),
         tabs && react_1.default.createElement(FileTabs, null),
         react_1.default.createElement(ControlsWrapper, null,
-            report && !((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(Button_1.Button, Object.assign({ "data-cy": "report-button", "data-testid": "report-button", icon: controlsType === 'icon' ? react_1.default.createElement(WarningSquareIcon_1.WarningSquareIcon, { size: "18px" }) : undefined, size: "small", variant: "ghost" }, report.props), controlsType != 'icon' && (((_b = report.props) === null || _b === void 0 ? void 0 : _b.buttonText) || 'Report'))) : null,
-            expand && !((_c = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _c === void 0 ? void 0 : _c.hide) ? (react_1.default.createElement(Button_1.Button, { "data-cy": "expand-all", "data-testid": "expand-all", icon: controlsType === 'icon' ? react_1.default.createElement(MaximizeIcon_1.MaximizeIcon, null) : undefined, onClick: expand === null || expand === void 0 ? void 0 : expand.onClick, size: "small", variant: "ghost" }, controlsType !== 'icon' && (expand === null || expand === void 0 ? void 0 : expand.label) ? expand.label : 'Expand all')) : null,
-            collapse && !((_d = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.collapse) === null || _d === void 0 ? void 0 : _d.hide) ? (react_1.default.createElement(Button_1.Button, { "data-cy": "collapse-all", "data-testid": "collapse-all", icon: controlsType === 'icon' ? react_1.default.createElement(MinimizeIcon_1.MinimizeIcon, null) : undefined, onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onClick, size: "small", variant: "ghost" }, controlsType !== 'icon' && (expand === null || expand === void 0 ? void 0 : expand.label) ? expand.label : 'Collapse all')) : null,
-            select ? (react_1.default.createElement(Button_1.Button, { "data-cy": "select-all", "data-testid": "select-all", icon: controlsType === 'icon' ? react_1.default.createElement(SelectIcon_1.SelectIcon, null) : undefined, onClick: select === null || select === void 0 ? void 0 : select.onClick, size: "small", variant: "ghost" }, controlsType !== 'icon' && (select === null || select === void 0 ? void 0 : select.label) ? select.label : 'Select all')) : null,
-            deselect ? (react_1.default.createElement(Button_1.Button, { "data-cy": "clear-all", "data-testid": "clear-all", icon: controlsType === 'icon' ? react_1.default.createElement(DeselectIcon_1.DeselectIcon, null) : undefined, onClick: deselect === null || deselect === void 0 ? void 0 : deselect.onClick, size: "small", variant: "ghost" }, controlsType !== 'icon' && (deselect === null || deselect === void 0 ? void 0 : deselect.label) ? deselect.label : 'Clear all')) : null,
+            report && !((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(ControlButton, Object.assign({ variant: "ghost", size: "small", "data-cy": "report-button", "data-testid": "report-button", icon: controlsType === 'icon' ? react_1.default.createElement(WarningSquareIcon_1.WarningSquareIcon, { size: "18px" }) : undefined }, report.props), controlsType != 'icon' && (((_b = report.props) === null || _b === void 0 ? void 0 : _b.buttonText) || 'Report'))) : null,
+            expand && !((_c = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _c === void 0 ? void 0 : _c.hide) ? (react_1.default.createElement(ControlButton, { variant: "ghost", size: "small", "data-cy": "expand-all", "data-testid": "expand-all", icon: controlsType === 'icon' ? react_1.default.createElement(MaximizeIcon_1.MaximizeIcon, null) : undefined, onClick: expand === null || expand === void 0 ? void 0 : expand.onClick }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Expand all'))) : null,
+            collapse && !((_d = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.collapse) === null || _d === void 0 ? void 0 : _d.hide) ? (react_1.default.createElement(ControlButton, { variant: "ghost", size: "small", "data-cy": "collapse-all", "data-testid": "collapse-all", icon: controlsType === 'icon' ? react_1.default.createElement(MinimizeIcon_1.MinimizeIcon, null) : undefined, onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onClick }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Collapse all'))) : null,
+            select ? (react_1.default.createElement(ControlButton, { variant: "ghost", size: "small", "data-cy": "select-all", "data-testid": "select-all", icon: controlsType === 'icon' ? react_1.default.createElement(SelectIcon_1.SelectIcon, null) : undefined, onClick: select === null || select === void 0 ? void 0 : select.onClick }, controlsType !== 'icon' && (select === null || select === void 0 ? void 0 : select.label) ? select.label : 'Select all')) : null,
+            deselect ? (react_1.default.createElement(ControlButton, { variant: "ghost", size: "small", "data-cy": "clear-all", "data-testid": "clear-all", icon: controlsType === 'icon' ? react_1.default.createElement(DeselectIcon_1.DeselectIcon, null) : undefined, onClick: deselect === null || deselect === void 0 ? void 0 : deselect.onClick }, controlsType !== 'icon' && (deselect === null || deselect === void 0 ? void 0 : deselect.label) ? deselect.label : 'Clear all')) : null,
             copy && !((_e = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _e === void 0 ? void 0 : _e.hide) ? (react_1.default.createElement(CopyButton_1.CopyButton, { data: copy.data, "data-source": copy.dataSource, "data-hash": copy.dataHash, type: controlsType, toasterPlacement: copy.toasterPlacement, toasterDuration: copy.toasterDuration, buttonText: copy.label, onCopyClick: () => {
                     copy === null || copy === void 0 ? void 0 : copy.onClick;
                     telemetry.send('code_snippet_copied', {});
@@ -93,4 +93,9 @@ const CodeTabButton = (0, styled_components_1.default)(Button_1.Button) `
     border: none;
   }
 `;
+const ControlButton = (0, styled_components_1.default)(Button_1.Button) `
+  & + & {
+    margin-left: 0;
+  }
+`;
 //# sourceMappingURL=CodeBlockControls.js.map

package/lib/components/Feedback/Comment.js

@@ -27,7 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Comment = void 0;
-const React = __importStar(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../core/utils");
 const hooks_1 = require("../../core/hooks");
@@ -37,8 +37,10 @@ const Comment = ({ settings, onSubmit, onCancel, className, standAlone = true, }
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const { label, submitText } = settings || {};
-    const [text, setText] = React.useState('');
-    const [submitValue, setSubmitValue] = React.useState('');
+    const [text, setText] = react_1.default.useState('');
+    const [submitValue, setSubmitValue] = react_1.default.useState('');
+    const modalRef = (0, react_1.useRef)(null);
+    (0, hooks_1.useOutsideClick)(modalRef, onCancel);
     const send = () => {
         if (!text)
             return;
@@ -53,18 +55,18 @@ const Comment = ({ settings, onSubmit, onCancel, className, standAlone = true, }
         }
     };
     if (submitValue) {
-        return (React.createElement(StateWrapper, { className: className },
-            React.createElement(Label, { "data-translation-key": "theme.feedback.settings.comment.submitText" }, submitText ||
+        return (react_1.default.createElement(StateWrapper, { className: className },
+            react_1.default.createElement(Label, { "data-translation-key": "theme.feedback.settings.comment.submitText" }, submitText ||
                 translate('theme.feedback.settings.comment.submitText', 'Thank you for helping improve our documentation!')),
-            React.createElement(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null)));
+            react_1.default.createElement(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null)));
     }
-    return (React.createElement(Wrapper, { "data-component-name": "Feedback/Comment", className: className, style: standAlone ? { width: '424px', padding: '16px 24px' } : { width: 'auto' } },
-        React.createElement(Label, { "data-translation-key": "theme.feedback.settings.comment.label" }, label ||
+    return (react_1.default.createElement(Wrapper, { ref: modalRef, "data-component-name": "Feedback/Comment", className: className, style: standAlone ? { width: '424px', padding: '16px 24px' } : { width: 'auto' } },
+        react_1.default.createElement(Label, { "data-translation-key": "theme.feedback.settings.comment.label" }, label ||
             translate('theme.feedback.settings.comment.label', 'Please share your feedback with us.')),
-        React.createElement(TextArea, { rows: 3, onChange: handleTextAreaChange }),
-        standAlone && (React.createElement(ButtonsContainer, null,
-            onCancel && (React.createElement(CancelButton, { "data-translation-key": "theme.feedback.settings.comment.cancel", onClick: onCancel, variant: "outlined" }, translate('theme.feedback.settings.comment.cancel', 'Cancel'))),
-            React.createElement(SendButton, { "data-translation-key": "theme.feedback.settings.comment.send", onClick: send, variant: "primary" }, translate('theme.feedback.settings.comment.send', 'Send'))))));
+        react_1.default.createElement(TextArea, { rows: 3, onChange: handleTextAreaChange }),
+        standAlone && (react_1.default.createElement(ButtonsContainer, null,
+            onCancel && (react_1.default.createElement(CancelButton, { "data-translation-key": "theme.feedback.settings.comment.cancel", onClick: onCancel, variant: "outlined" }, translate('theme.feedback.settings.comment.cancel', 'Cancel'))),
+            react_1.default.createElement(SendButton, { "data-translation-key": "theme.feedback.settings.comment.send", onClick: send, variant: "primary" }, translate('theme.feedback.settings.comment.send', 'Send'))))));
 };
 exports.Comment = Comment;
 const Wrapper = styled_components_1.default.div `

package/lib/components/StatusCode/StatusCode.d.ts

@@ -1,3 +1,6 @@
-export declare const StatusCode: import("styled-components").StyledComponent<"button", any, {
+/// <reference types="react" />
+export declare const StatusCode: import("styled-components").StyledComponent<import("react").FC<import("../../index.js").ButtonProps>, any, import("../../index.js").ButtonProps & {
+    variant: "ghost";
+} & {
     status: string;
-}, never>;
+}, "variant">;

package/lib/components/StatusCode/StatusCode.js

@@ -5,11 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StatusCode = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.StatusCode = styled_components_1.default.button `
-  background: none;
-  padding: 0;
-  display: flex;
-  align-items: center;
+const theme_1 = require("../../index.js");
+exports.StatusCode = (0, styled_components_1.default)(theme_1.Button).attrs(() => ({
+    variant: 'ghost',
+})) `
+  gap: 0;
+  border: 0;
     
   &:before {
     display: inline-block;

package/lib/core/hooks/useOutsideClick.d.ts

@@ -1,2 +1,2 @@
 import type { MutableRefObject } from 'react';
-export declare function useOutsideClick(ref: MutableRefObject<HTMLElement | null>, handler: (event: MouseEvent | TouchEvent) => void): void;
+export declare function useOutsideClick(ref: MutableRefObject<HTMLElement | null>, handler?: (event: MouseEvent | TouchEvent) => void): void;

package/lib/core/hooks/useOutsideClick.js

@@ -5,7 +5,7 @@ const react_1 = require("react");
 function useOutsideClick(ref, handler) {
     (0, react_1.useEffect)(() => {
         const listener = (event) => {
-            if (!ref.current || ref.current.contains(event.target)) {
+            if (!handler || !ref.current || ref.current.contains(event.target)) {
                 return;
             }
             handler(event);

package/lib/core/styles/dark.js

@@ -246,6 +246,13 @@ exports.darkMode = (0, styled_components_1.css) `
   --tab-bg-color-filled: var(--color-warm-grey-4); // @presenter Color
   --tab-content-color-disabled: var(--color-warm-grey-4); // @presenter Color
 
+  /**
+  * @tokens Dropdown Colors
+  * @presenter Color
+  */
+
+  --dropdown-content-color-default: var(--color-warm-grey-8); // @presenter Color
+
   /**
   * @tokens API Reference Schema Required styles
   */

package/lib/icons/ChevronDownIcon/ChevronDownIcon.js

@@ -16,6 +16,7 @@ exports.ChevronDownIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
     fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
   }
 
+  flex-shrink: 0;
   height: ${({ size }) => size || '16px'};
   width: ${({ size }) => size || '16px'};
 `;

package/lib/icons/ChevronUpIcon/ChevronUpIcon.js

@@ -16,6 +16,7 @@ exports.ChevronUpIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
     fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
   }
 
+  flex-shrink: 0;
   height: ${({ size }) => size || '16px'};
   width: ${({ size }) => size || '16px'};
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.0.0-beta-20240223133421",
+  "version": "0.0.0-beta-20240227165736",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -92,68 +92,68 @@ export function CodeBlockControls({
       {tabs && <FileTabs />}
       <ControlsWrapper>
         {report && !report?.props?.hide ? (
-          <Button
+          <ControlButton
+            variant="ghost"
+            size="small"
             data-cy="report-button"
             data-testid="report-button"
             icon={controlsType === 'icon' ? <WarningSquareIcon size="18px" /> : undefined}
-            size="small"
-            variant="ghost"
             {...report.props}
           >
             {controlsType != 'icon' && (report.props?.buttonText || 'Report')}
-          </Button>
+          </ControlButton>
         ) : null}
 
         {expand && !codeSnippet?.expand?.hide ? (
-          <Button
+          <ControlButton
+            variant="ghost"
+            size="small"
             data-cy="expand-all"
             data-testid="expand-all"
             icon={controlsType === 'icon' ? <MaximizeIcon /> : undefined}
             onClick={expand?.onClick}
-            size="small"
-            variant="ghost"
           >
-            {controlsType !== 'icon' && expand?.label ? expand.label : 'Expand all'}
-          </Button>
+            {controlsType !== 'icon' && (expand?.label || 'Expand all')}
+          </ControlButton>
         ) : null}
 
         {collapse && !codeSnippet?.collapse?.hide ? (
-          <Button
+          <ControlButton
+            variant="ghost"
+            size="small"
             data-cy="collapse-all"
             data-testid="collapse-all"
             icon={controlsType === 'icon' ? <MinimizeIcon /> : undefined}
             onClick={collapse?.onClick}
-            size="small"
-            variant="ghost"
           >
-            {controlsType !== 'icon' && expand?.label ? expand.label : 'Collapse all'}
-          </Button>
+            {controlsType !== 'icon' && (expand?.label || 'Collapse all')}
+          </ControlButton>
         ) : null}
 
         {select ? (
-          <Button
+          <ControlButton
+            variant="ghost"
+            size="small"
             data-cy="select-all"
             data-testid="select-all"
             icon={controlsType === 'icon' ? <SelectIcon /> : undefined}
             onClick={select?.onClick}
-            size="small"
-            variant="ghost"
           >
             {controlsType !== 'icon' && select?.label ? select.label : 'Select all'}
-          </Button>
+          </ControlButton>
         ) : null}
 
         {deselect ? (
-          <Button
+          <ControlButton
+            variant="ghost"
+            size="small"
             data-cy="clear-all"
             data-testid="clear-all"
             icon={controlsType === 'icon' ? <DeselectIcon /> : undefined}
             onClick={deselect?.onClick}
-            size="small"
-            variant="ghost"
           >
             {controlsType !== 'icon' && deselect?.label ? deselect.label : 'Clear all'}
-          </Button>
+          </ControlButton>
         ) : null}
 
         {copy && !codeSnippet?.copy?.hide ? (
@@ -229,3 +229,9 @@ const CodeTabButton = styled(Button)<{ active: boolean }>`
     border: none;
   }
 `;
+
+const ControlButton = styled(Button)`
+  & + & {
+    margin-left: 0;
+  }
+`;

package/src/components/Feedback/Comment.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import React, { useRef } from 'react';
 import styled from 'styled-components';
 
 import { breakpoints } from '@redocly/theme/core/utils';
-import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { useOutsideClick, useThemeHooks } from '@redocly/theme/core/hooks';
 import { RadioCheckButtonIcon } from '@redocly/theme/icons/RadioCheckButtonIcon/RadioCheckButtonIcon';
 import { Button } from '@redocly/theme/components/Button/Button';
 
@@ -29,6 +29,9 @@ export const Comment = ({
   const { label, submitText } = settings || {};
   const [text, setText] = React.useState('');
   const [submitValue, setSubmitValue] = React.useState('');
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useOutsideClick(modalRef, onCancel);
 
   const send = () => {
     if (!text) return;
@@ -61,6 +64,7 @@ export const Comment = ({
 
   return (
     <Wrapper
+      ref={modalRef}
       data-component-name="Feedback/Comment"
       className={className}
       style={standAlone ? { width: '424px', padding: '16px 24px' } : { width: 'auto' }}

package/src/components/StatusCode/StatusCode.ts

@@ -1,10 +1,12 @@
 import styled from 'styled-components';
 
-export const StatusCode = styled.button<{ status: string }>`
-  background: none;
-  padding: 0;
-  display: flex;
-  align-items: center;
+import { Button } from '@redocly/theme';
+
+export const StatusCode = styled(Button).attrs(() => ({
+  variant: 'ghost',
+}))<{ status: string }>`
+  gap: 0;
+  border: 0;
     
   &:before {
     display: inline-block;

package/src/core/hooks/useOutsideClick.ts

@@ -4,11 +4,11 @@ import type { MutableRefObject } from 'react';
 
 export function useOutsideClick(
   ref: MutableRefObject<HTMLElement | null>,
-  handler: (event: MouseEvent | TouchEvent) => void,
+  handler?: (event: MouseEvent | TouchEvent) => void,
 ): void {
   useEffect(() => {
     const listener = (event: MouseEvent | TouchEvent) => {
-      if (!ref.current || ref.current.contains(event.target as Node)) {
+      if (!handler || !ref.current || ref.current.contains(event.target as Node)) {
         return;
       }
       handler(event);

package/src/core/styles/dark.ts

@@ -245,6 +245,13 @@ export const darkMode = css`
   --tab-bg-color-filled: var(--color-warm-grey-4); // @presenter Color
   --tab-content-color-disabled: var(--color-warm-grey-4); // @presenter Color
 
+  /**
+  * @tokens Dropdown Colors
+  * @presenter Color
+  */
+
+  --dropdown-content-color-default: var(--color-warm-grey-8); // @presenter Color
+
   /**
   * @tokens API Reference Schema Required styles
   */

package/src/icons/ChevronDownIcon/ChevronDownIcon.tsx

@@ -18,6 +18,7 @@ export const ChevronDownIcon = styled(Icon).attrs(() => ({
     fill: ${({ color }) => getCssColorVariable(color)};
   }
 
+  flex-shrink: 0;
   height: ${({ size }) => size || '16px'};
   width: ${({ size }) => size || '16px'};
 `;

package/src/icons/ChevronUpIcon/ChevronUpIcon.tsx

@@ -18,6 +18,7 @@ export const ChevronUpIcon = styled(Icon).attrs(() => ({
     fill: ${({ color }) => getCssColorVariable(color)};
   }
 
+  flex-shrink: 0;
   height: ${({ size }) => size || '16px'};
   width: ${({ size }) => size || '16px'};
 `;