@apify/ui-library 1.93.0 → 1.93.1-featimprovetooltip-7e1224.59

package/src/components/shortcut.tsx

@@ -0,0 +1,55 @@
+import styled, { css } from 'styled-components';
+
+import { theme } from '../design_system/theme.js';
+import { Text } from './text/index.js';
+
+interface ShortcutProps {
+    as?: keyof JSX.IntrinsicElements;
+    className?: string;
+    children: React.ReactNode;
+    /* If true, always use dark mode colors */
+    dark?: boolean;
+}
+
+const adaptiveColors = css`
+    background-color: ${theme.color.neutral.backgroundSubtle};
+    border: 1px solid ${theme.color.neutral.border};
+    color: ${theme.color.neutral.textSubtle};
+`;
+
+/* Tooltips with shortcuts use dark mode styles */
+const darkColors = css`
+    background-color: ${theme.colorPalette.dark.neutral800};
+    border: 1px solid ${theme.colorPalette.dark.neutral700};
+    color: ${theme.colorPalette.dark.neutral400};
+`;
+
+const StyledShortcut = styled(Text)<{ $dark?: boolean }>`
+    min-width: 20px;
+    height: 20px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: ${theme.radius.radius4};
+    padding: ${theme.space.space2} ${theme.space.space4};
+    ${({ $dark }) => ($dark ? darkColors : adaptiveColors)}
+`;
+
+export const Shortcut = ({
+    as,
+    className,
+    children,
+    dark = false,
+}: ShortcutProps) => {
+    return (
+        <StyledShortcut
+            forwardedAs={as}
+            className={className}
+            $dark={dark}
+            type='code'
+            size='small'
+            weight='medium'>
+            {children}
+        </StyledShortcut>
+    );
+};

package/src/ui_dependency_provider.tsx

@@ -1,4 +1,5 @@
 import type React from 'react';
+import type { ReactNode } from 'react';
 import { createContext, useContext } from 'react';
 
 import type { UiThemeOption } from './design_system/theme.js';
@@ -32,6 +33,8 @@ export interface UiDependencies {
     uiTheme?: UiThemeOption, // Optional - as we can just fallback to light theme on the web
     // TODO: Make required once we add it on the web
     generateProxyImageUrl?: (url: string, options: ImageProxyOptions) => string
+    // Sanitize HTML for tooltips with SafeHtml component
+    tooltipSafeHtml: (content: ReactNode | string) => ReactNode,
 }
 
 interface UiDependencyProviderProps {