diff --git a/CHANGELOG.md b/CHANGELOG.md index 942330234..72941be24 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,15 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p ### Added - Extended existing height and readOnly props from `CodeEditorProps` to `AutoSuggestionProps` & `ExtendedCodeEditorProps` to be configurable from `` -- Added additional actions to `` +- `` + - `additionalActions` property to include other more complex components between the action buttons and the context menu of the widget +- `` + - `swapPlaceholderDelay` property to allow configuration of the delay time before the placeholder element is replaced by the actual tooltip component + +### Changed + +- `` + - prevent start of a react flow drag action of a node when user clicks in the node menu section ## [24.3.0] - 2025-06-05 diff --git a/src/cmem/ActivityControl/ActivityControlWidget.stories.tsx b/src/cmem/ActivityControl/ActivityControlWidget.stories.tsx index 952955b33..811eef16a 100644 --- a/src/cmem/ActivityControl/ActivityControlWidget.stories.tsx +++ b/src/cmem/ActivityControl/ActivityControlWidget.stories.tsx @@ -38,6 +38,7 @@ const actions: ActivityControlWidgetAction[] = [ { "data-test-id": "activity-start-activity", icon: "item-start", + // eslint-disable-next-line no-console action: () => console.log("start"), tooltip: "Start Activity", disabled: false, @@ -45,6 +46,7 @@ const actions: ActivityControlWidgetAction[] = [ { "data-test-id": "activity-stop-activity", icon: "item-stop", + // eslint-disable-next-line no-console action: () => console.log("cancel"), tooltip: "Stop Activity", disabled: false, diff --git a/src/components/Icon/IconButton.tsx b/src/components/Icon/IconButton.tsx index e14fff5e2..9be4ca9f2 100644 --- a/src/components/Icon/IconButton.tsx +++ b/src/components/Icon/IconButton.tsx @@ -50,6 +50,7 @@ export const IconButton = ({ const defaultIconTooltipProps = { hoverOpenDelay: 1000, openOnTargetFocus: restProps.disabled || (restProps.tabIndex ?? 0) < 0 ? false : undefined, + swapPlaceholderDelay: 1, }; const iconProps = { small: restProps.small, diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index cf319bff9..c2f9629c3 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -42,6 +42,12 @@ export interface TooltipProps extends Omit { * You can prevent it in any case by setting it to `false`. */ usePlaceholder?: boolean; + /** + * Time after the placeholder element is replaced by the actual tooltip component. + * Must be greater than 0. + * For the first display of the tooltip this time adds up to `hoverOpenDelay`. + */ + swapPlaceholderDelay?: number; } export const Tooltip = ({ @@ -53,18 +59,21 @@ export const Tooltip = ({ markdownEnabler = "\n\n", markdownProps, usePlaceholder, - hoverOpenDelay = 500, + swapPlaceholderDelay = 100, + hoverOpenDelay = 450, ...otherTooltipProps }: TooltipProps) => { const placeholderRef = React.useRef(null); const eventMemory = React.useRef(null); const searchId = React.useRef(null); - const swapDelayTime = 100; + const swapDelay = React.useRef(null); + const swapDelayTime = swapPlaceholderDelay; const [placeholder, setPlaceholder] = React.useState( !otherTooltipProps.disabled && !otherTooltipProps.defaultIsOpen && !otherTooltipProps.isOpen && otherTooltipProps.renderTarget === undefined && + swapDelayTime > 0 && hoverOpenDelay > swapDelayTime && (usePlaceholder === true || (typeof content === "string" && usePlaceholder !== false)) ); @@ -77,7 +86,10 @@ export const Tooltip = ({ React.useEffect(() => { if (placeholderRef.current !== null) { const swap = (ev: MouseEvent | globalThis.FocusEvent) => { - const swapDelay = setTimeout(() => { + if (swapDelay.current) { + clearTimeout(swapDelay.current); + } + swapDelay.current = setTimeout(() => { // we delay the swap to prevent unwanted effects // (e.g. forced mouseover after the swap but the cursor is already somewhere else) eventMemory.current = ev.type === "focusin" ? "afterfocus" : "afterhover"; @@ -93,7 +105,7 @@ export const Tooltip = ({ ) { eventMemory.current = null; } - clearTimeout(swapDelay); + clearTimeout(swapDelay.current as NodeJS.Timeout); }); } }; @@ -166,7 +178,7 @@ export const Tooltip = ({ ) : ( ({ )} {(menuButtons || (showExecutionButtons && executionButtons)) && ( -
+
{showExecutionButtons && typeof executionButtons === "function" ? executionButtons(adjustedContentProps, setAdjustedContentProps) : null}