@flamingo-stack/openframe-frontend-core 0.0.559 → 0.0.560-1838.4933.1

package/src/components/ui/ticket-status-config-row.tsx

@@ -11,7 +11,7 @@ import { ColorPresetSelect, ColorPickerInput } from './color-preset-select'
 import { Input } from './input'
 import { type TagProps } from './tag'
 import { TicketStatusTag } from './ticket-status-tag'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip'
+import { TouchFriendlyTooltip } from './touch-friendly-tooltip'
 
 type SystemTagVariant = Extract<TagProps['variant'], 'outline' | 'primary'>
 
@@ -37,56 +37,6 @@ export interface TicketStatusConfigRowProps {
   isDragging?: boolean
 }
 
-let dismissOpenTooltip: (() => void) | null = null
-
-function WithLeftTooltip({ content, children }: { content?: string; children: React.ReactElement }) {
-  const [open, setOpen] = React.useState(false)
-  const isTouchRef = React.useRef(false)
-  const close = React.useCallback(() => setOpen(false), [])
-
-  if (!content) return children
-
-  const toggleFromTouch = () => {
-    setOpen(prev => {
-      const next = !prev
-      if (next) {
-        if (dismissOpenTooltip && dismissOpenTooltip !== close) dismissOpenTooltip()
-        dismissOpenTooltip = close
-      } else if (dismissOpenTooltip === close) {
-        dismissOpenTooltip = null
-      }
-      return next
-    })
-  }
-
-  return (
-    <TooltipProvider delayDuration={150}>
-      <Tooltip open={open} onOpenChange={setOpen}>
-        <TooltipTrigger
-          asChild
-          onPointerDown={e => {
-            isTouchRef.current = e.pointerType === 'touch'
-            if (!isTouchRef.current) return
-            e.preventDefault()
-            toggleFromTouch()
-          }}
-          onFocus={e => {
-            if (isTouchRef.current) e.preventDefault()
-          }}
-          onClick={e => {
-            if (isTouchRef.current) e.preventDefault()
-          }}
-        >
-          {children}
-        </TooltipTrigger>
-        <TooltipContent side="left" className="max-w-xs">
-          {content}
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  )
-}
-
 export function TicketStatusConfigRow({
   variant,
   statusKey,
@@ -179,7 +129,7 @@ export function TicketStatusConfigRow({
 
       <div className="flex h-11 w-12 shrink-0 items-center justify-center md:h-12">
         {isSystem ? (
-          <WithLeftTooltip content={systemTooltip}>
+          <TouchFriendlyTooltip content={systemTooltip}>
             <button
               type="button"
               aria-label={systemTooltip ?? 'System status'}
@@ -187,9 +137,9 @@ export function TicketStatusConfigRow({
             >
               <InfoCircleIcon size={24} />
             </button>
-          </WithLeftTooltip>
+          </TouchFriendlyTooltip>
         ) : (
-          <WithLeftTooltip content={deleteDisabled ? deleteDisabledReason : undefined}>
+          <TouchFriendlyTooltip content={deleteDisabled ? deleteDisabledReason : undefined}>
             <span className="inline-flex">
               <Button
                 type="button"
@@ -203,7 +153,7 @@ export function TicketStatusConfigRow({
                 <TrashIcon className="text-ods-error"/>
               </Button>
             </span>
-          </WithLeftTooltip>
+          </TouchFriendlyTooltip>
         )}
       </div>
     </div>

package/src/components/ui/touch-friendly-tooltip.tsx

@@ -0,0 +1,71 @@
+'use client'
+
+import * as React from 'react'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip'
+
+/**
+ * The one tooltip allowed open at a time, across every instance — tapping a
+ * second trigger dismisses the first, since touch has no "mouse left" to close
+ * it. Module-level on purpose: instances live in unrelated subtrees.
+ */
+let dismissOpenTooltip: (() => void) | null = null
+
+export interface TouchFriendlyTooltipProps {
+  /** Tooltip text; when absent the children render bare, with no trigger wiring. */
+  content?: string
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  children: React.ReactElement
+}
+
+/**
+ * Hover tooltip that also works on touch, where Radix's hover/focus model never
+ * opens: a tap toggles it instead. Wraps its own `TooltipProvider`, so it can be
+ * dropped anywhere without a provider up the tree.
+ */
+export function TouchFriendlyTooltip({ content, side = 'left', children }: TouchFriendlyTooltipProps) {
+  const [open, setOpen] = React.useState(false)
+  const isTouchRef = React.useRef(false)
+  const close = React.useCallback(() => setOpen(false), [])
+
+  if (!content) return children
+
+  const toggleFromTouch = () => {
+    setOpen(prev => {
+      const next = !prev
+      if (next) {
+        if (dismissOpenTooltip && dismissOpenTooltip !== close) dismissOpenTooltip()
+        dismissOpenTooltip = close
+      } else if (dismissOpenTooltip === close) {
+        dismissOpenTooltip = null
+      }
+      return next
+    })
+  }
+
+  return (
+    <TooltipProvider delayDuration={150}>
+      <Tooltip open={open} onOpenChange={setOpen}>
+        <TooltipTrigger
+          asChild
+          onPointerDown={e => {
+            isTouchRef.current = e.pointerType === 'touch'
+            if (!isTouchRef.current) return
+            e.preventDefault()
+            toggleFromTouch()
+          }}
+          onFocus={e => {
+            if (isTouchRef.current) e.preventDefault()
+          }}
+          onClick={e => {
+            if (isTouchRef.current) e.preventDefault()
+          }}
+        >
+          {children}
+        </TooltipTrigger>
+        <TooltipContent side={side} className="max-w-xs">
+          {content}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}