@djangocfg/widget-data 0.1.17 → 0.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/widget-data",
-  "version": "0.1.17",
+  "version": "0.1.20",
   "description": "Data surfaces: file tree, JSON viewer, data grid and table, kanban, listbox, masonry and timeline",
   "keywords": [
     "tree",
@@ -90,23 +90,23 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@djangocfg/widget-kit": "^0.1.18",
+    "@djangocfg/widget-kit": "^0.1.19",
     "@dnd-kit/core": "^6.3.1",
     "@radix-ui/react-direction": "^1.2.0",
     "@radix-ui/react-slot": "^1.5.0",
     "class-variance-authority": "^0.7.1"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.612",
-    "@djangocfg/ui-core": "^2.1.612",
+    "@djangocfg/api": "^2.1.636",
+    "@djangocfg/ui-core": "^2.1.636",
     "lucide-react": "^1.68.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.612",
-    "@djangocfg/typescript-config": "^2.1.612",
-    "@djangocfg/ui-core": "^2.1.612",
+    "@djangocfg/api": "^2.1.636",
+    "@djangocfg/typescript-config": "^2.1.636",
+    "@djangocfg/ui-core": "^2.1.636",
     "@storybook/react-vite": "^10.6.5",
     "@types/node": "^25.9.5",
     "@types/react": "19.3.0",

package/src/JsonTree/JsonViewer.tsx

@@ -45,7 +45,7 @@ import {
   useState,
   type CSSProperties,
 } from 'react';
-import { Button, Input, Tooltip, TooltipContent, TooltipTrigger } from '@djangocfg/ui-core';
+import { Button, Input } from '@djangocfg/ui-core';
 import { cn } from '@djangocfg/ui-core/lib';
 import type { JsonAction, JsonTreeProps, JsonValue } from './types';
 
@@ -423,9 +423,7 @@ function Toolbar({
   const btnSize = compact ? 'size-6' : 'size-7';
   const iconSize = compact ? 'size-3' : 'size-3.5';
   const rowPadding = compact ? 'px-2 py-1' : 'px-3 py-1.5';
-  // Each action button is wrapped in a Tooltip for the keyboard / mouse
-  // discoverability win. `asChild` keeps the underlying <button> as the
-  // trigger so focus styling stays on the visible element.
+  // Each action button carries its label as a `tooltip` (hover devices only).
   const renderBtn = (
     key: string,
     label: string,
@@ -433,22 +431,19 @@ function Toolbar({
     onClick: () => void,
     active?: boolean,
   ) => (
-    <Tooltip key={key}>
-      <TooltipTrigger asChild>
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon"
-          onClick={onClick}
-          aria-label={label}
-          aria-pressed={active}
-          className={cn(btnSize, 'text-muted-foreground hover:text-foreground', active && 'bg-muted text-foreground')}
-        >
-          {icon}
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent side="top">{label}</TooltipContent>
-    </Tooltip>
+    <Button
+      key={key}
+      type="button"
+      variant="ghost"
+      size="icon"
+      onClick={onClick}
+      aria-label={label}
+      aria-pressed={active}
+      tooltip={label}
+      className={cn(btnSize, 'text-muted-foreground hover:text-foreground', active && 'bg-muted text-foreground')}
+    >
+      {icon}
+    </Button>
   );
 
   const iconCls = iconSize;