@lax-wp/design-system 0.16.4 → 0.17.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const e=require("react/jsx-runtime"),d=require("react"),R=require("antd"),c=require("../../hooks/useOS.cjs.js");;/* empty css */const S={auto:"top","auto-start":"topLeft","auto-end":"topRight",top:"top","top-start":"topLeft","top-end":"topRight",bottom:"bottom","bottom-start":"bottomLeft","bottom-end":"bottomRight",right:"right","right-start":"rightTop","right-end":"rightBottom",left:"left","left-start":"leftTop","left-end":"leftBottom"},q=({children:m,title:i,hideTooltip:
|
|
1
|
+
"use strict";const e=require("react/jsx-runtime"),d=require("react"),R=require("antd"),c=require("../../hooks/useOS.cjs.js");;/* empty css */const S={auto:"top","auto-start":"topLeft","auto-end":"topRight",top:"top","top-start":"topLeft","top-end":"topRight",bottom:"bottom","bottom-start":"bottomLeft","bottom-end":"bottomRight",right:"right","right-start":"rightTop","right-end":"rightBottom",left:"left","left-start":"leftTop","left-end":"leftBottom"},q=({children:m,title:i,hideTooltip:f=!1,delayShow:x=!1,whiteSpace:u="initial",placement:g="top",className:b,shortcuts:r,open:h,onOpenChange:y,color:j,styles:s})=>{const a=c.useOS(),n=d.useMemo(()=>r?c.mapShortcutKeys(r,a):void 0,[r,a]),w=S[g],l=d.useMemo(()=>{if(!n)return[];const t={};return n.map(o=>(t[o]=(t[o]??0)+1,{id:`${o}-${t[o]}`,label:o}))},[n]),N=e.jsxs("div",{className:"flex items-center gap-2 w-full",children:[e.jsx("span",{className:"flex-1 min-w-0",children:i}),l.length>0&&e.jsx("span",{className:"flex items-center gap-0.5 flex-shrink-0",children:l.map(t=>e.jsx("kbd",{className:"inline-flex items-center justify-center min-w-[20px] h-5 px-1 rounded text-[11px] font-medium leading-none",style:{backgroundColor:"rgba(255, 255, 255, 0.1)",border:"1px solid rgba(255, 255, 255, 0.2)",color:"rgba(255, 255, 255, 0.8)"},children:t.label},t.id))})]}),p=e.jsx("span",{className:b,children:m});return f?p:e.jsx(R.Tooltip,{title:i?N:null,placement:w,trigger:["hover"],mouseEnterDelay:x?1:0,mouseLeaveDelay:0,color:j??"#101828",open:h,onOpenChange:y,classNames:{body:"lax-tooltip-body-important-whitespace flex items-center justify-center"},styles:{...s,body:{"--lax-tooltip-white-space":u,borderRadius:8,border:"1px solid #252525",boxShadow:"0 2px 4px rgba(0, 0, 0, 0.18)",color:"#fff",maxWidth:"40ch",fontSize:12,fontWeight:500,wordWrap:"break-word",padding:"4px 8px",...s?.body}},children:p})};module.exports=q;
|
|
2
2
|
//# sourceMappingURL=Tooltip.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.cjs.js","sources":["../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMemo } from 'react';\nimport { Tooltip as AntdTooltip } from 'antd';\nimport type { TooltipProps as AntdTooltipProps } from 'antd';\nimport { mapShortcutKeys, useOS } from '../../hooks/useOS';\nimport './Tooltip.css';\n\nexport type TooltipPlacement =\n | 'auto'\n | 'auto-start'\n | 'auto-end'\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'left'\n | 'left-start'\n | 'left-end';\n\nexport interface TooltipProps {\n title: React.ReactNode;\n placement?: TooltipPlacement;\n children: React.ReactNode;\n className?: string;\n hideTooltip?: boolean;\n delayShow?: boolean;\n whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'initial' | 'inherit';\n /** Array of keyboard shortcut keys to display (e.g., ['Cmd', 'S'] or ['Ctrl', 'Enter']) */\n shortcuts?: string[];\n /** Controlled visibility state */\n open?: boolean;\n /** Callback fired when visibility changes */\n onOpenChange?: (open: boolean) => void;\n /**\n * Background color of the tooltip. Overrides the default dark background (`#101828`).\n * Accepts any valid CSS color value or an Ant Design preset color name.\n */\n color?: string;\n /**\n * Semantic inline styles for the tooltip's DOM nodes. Values are merged on top of\n * (and override) the component's built-in styling, so keys you omit keep their defaults.\n * `styles.body` targets the tooltip content box; `styles.root` targets the outer wrapper.\n *\n * @example\n * ```tsx\n * <Tooltip\n * color=\"#EAECF0\"\n * styles={{ body: { borderRadius: 10, padding: \"12px\", boxShadow: \"none\" } }}\n * >\n * <button>Hover me</button>\n * </Tooltip>\n * ```\n */\n styles?: AntdTooltipProps['styles'];\n}\n\nconst placementMap: Record<TooltipPlacement, AntdTooltipProps['placement']> = {\n auto: 'top',\n 'auto-start': 'topLeft',\n 'auto-end': 'topRight',\n top: 'top',\n 'top-start': 'topLeft',\n 'top-end': 'topRight',\n bottom: 'bottom',\n 'bottom-start': 'bottomLeft',\n 'bottom-end': 'bottomRight',\n right: 'right',\n 'right-start': 'rightTop',\n 'right-end': 'rightBottom',\n left: 'left',\n 'left-start': 'leftTop',\n 'left-end': 'leftBottom',\n};\n\nconst Tooltip = ({\n children,\n title,\n hideTooltip = false,\n delayShow = false,\n whiteSpace = 'initial',\n placement = 'top',\n className,\n shortcuts,\n open,\n onOpenChange,\n color,\n styles,\n}: TooltipProps) => {\n const os = useOS();\n const mappedShortcuts = useMemo(\n () => (shortcuts ? mapShortcutKeys(shortcuts, os) : undefined),\n [shortcuts, os]\n );\n const tooltipPlacement = placementMap[placement];\n const shortcutKeys = useMemo(() => {\n if (!mappedShortcuts) return [];\n const counts: Record<string, number> = {};\n return mappedShortcuts.map((shortcut) => {\n counts[shortcut] = (counts[shortcut] ?? 0) + 1;\n return { id: `${shortcut}-${counts[shortcut]}`, label: shortcut };\n });\n }, [mappedShortcuts]);\n\n const tooltipContent = (\n <div className=\"flex items-center gap-2\">\n <span className=\"flex-1 min-w-0\">{title}</span>\n {shortcutKeys.length > 0 && (\n <span className=\"flex items-center gap-0.5 flex-shrink-0\">\n {shortcutKeys.map((shortcut) => (\n <kbd\n key={shortcut.id}\n className=\"inline-flex items-center justify-center min-w-[20px] h-5 px-1 rounded text-[11px] font-medium leading-none\"\n style={{\n backgroundColor: 'rgba(255, 255, 255, 0.1)',\n border: '1px solid rgba(255, 255, 255, 0.2)',\n color: 'rgba(255, 255, 255, 0.8)',\n }}\n >\n {shortcut.label}\n </kbd>\n ))}\n </span>\n )}\n </div>\n );\n\n const triggerNode = <span className={className}>{children}</span>;\n\n if (hideTooltip) {\n return triggerNode;\n }\n\n return (\n <AntdTooltip\n title={title ? tooltipContent : null}\n placement={tooltipPlacement}\n trigger={['hover']}\n mouseEnterDelay={delayShow ? 1 : 0}\n mouseLeaveDelay={0}\n color={color ?? '#101828'}\n open={open}\n onOpenChange={onOpenChange}\n classNames={{\n body: 'lax-tooltip-body-important-whitespace flex items-center justify-center',\n }}\n styles={{\n ...styles,\n body: ({\n ['--lax-tooltip-white-space' as string]: whiteSpace,\n borderRadius: 8,\n border: '1px solid #252525',\n boxShadow: '0 2px 4px rgba(0, 0, 0, 0.18)',\n color: '#fff',\n maxWidth: '40ch',\n fontSize: 12,\n fontWeight: 500,\n wordWrap: 'break-word',\n padding: '4px 8px',\n ...styles?.body,\n } as React.CSSProperties),\n }}\n >\n {triggerNode}\n </AntdTooltip>\n );\n};\n\nexport default Tooltip;"],"names":["placementMap","Tooltip","children","title","hideTooltip","delayShow","whiteSpace","placement","className","shortcuts","open","onOpenChange","color","styles","os","useOS","mappedShortcuts","useMemo","mapShortcutKeys","tooltipPlacement","shortcutKeys","counts","shortcut","tooltipContent","jsxs","jsx","triggerNode","AntdTooltip"],"mappings":"6JA6DA,MAAMA,EAAwE,CAC5E,KAAM,MACN,aAAc,UACd,WAAY,WACZ,IAAK,MACL,YAAa,UACb,UAAW,WACX,OAAQ,SACR,eAAgB,aAChB,aAAc,cACd,MAAO,QACP,cAAe,WACf,YAAa,cACb,KAAM,OACN,aAAc,UACd,WAAY,YACd,EAEMC,EAAU,CAAC,CACf,SAAAC,EACA,MAAAC,EACA,YAAAC,EAAc,GACd,UAAAC,EAAY,GACZ,WAAAC,EAAa,UACb,UAAAC,EAAY,MACZ,UAAAC,EACA,UAAAC,EACA,KAAAC,EACA,aAAAC,EACA,MAAAC,EACA,OAAAC,CACF,IAAoB,CAClB,MAAMC,EAAKC,EAAAA,MAAA,EACLC,EAAkBC,EAAAA,QACtB,IAAOR,EAAYS,EAAAA,gBAAgBT,EAAWK,CAAE,EAAI,OACpD,CAACL,EAAWK,CAAE,CAAA,EAEVK,EAAmBnB,EAAaO,CAAS,EACzCa,EAAeH,EAAAA,QAAQ,IAAM,CACjC,GAAI,CAACD,EAAiB,MAAO,CAAA,EAC7B,MAAMK,EAAiC,CAAA,EACvC,OAAOL,EAAgB,IAAKM,IAC1BD,EAAOC,CAAQ,GAAKD,EAAOC,CAAQ,GAAK,GAAK,EACtC,CAAE,GAAI,GAAGA,CAAQ,IAAID,EAAOC,CAAQ,CAAC,GAAI,MAAOA,CAAA,EACxD,CACH,EAAG,CAACN,CAAe,CAAC,EAEdO,EACJC,EAAAA,KAAC,MAAA,CAAI,UAAU,
|
|
1
|
+
{"version":3,"file":"Tooltip.cjs.js","sources":["../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMemo } from 'react';\nimport { Tooltip as AntdTooltip } from 'antd';\nimport type { TooltipProps as AntdTooltipProps } from 'antd';\nimport { mapShortcutKeys, useOS } from '../../hooks/useOS';\nimport './Tooltip.css';\n\nexport type TooltipPlacement =\n | 'auto'\n | 'auto-start'\n | 'auto-end'\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'left'\n | 'left-start'\n | 'left-end';\n\nexport interface TooltipProps {\n title: React.ReactNode;\n placement?: TooltipPlacement;\n children: React.ReactNode;\n className?: string;\n hideTooltip?: boolean;\n delayShow?: boolean;\n whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'initial' | 'inherit';\n /** Array of keyboard shortcut keys to display (e.g., ['Cmd', 'S'] or ['Ctrl', 'Enter']) */\n shortcuts?: string[];\n /** Controlled visibility state */\n open?: boolean;\n /** Callback fired when visibility changes */\n onOpenChange?: (open: boolean) => void;\n /**\n * Background color of the tooltip. Overrides the default dark background (`#101828`).\n * Accepts any valid CSS color value or an Ant Design preset color name.\n */\n color?: string;\n /**\n * Semantic inline styles for the tooltip's DOM nodes. Values are merged on top of\n * (and override) the component's built-in styling, so keys you omit keep their defaults.\n * `styles.body` targets the tooltip content box; `styles.root` targets the outer wrapper.\n *\n * @example\n * ```tsx\n * <Tooltip\n * color=\"#EAECF0\"\n * styles={{ body: { borderRadius: 10, padding: \"12px\", boxShadow: \"none\" } }}\n * >\n * <button>Hover me</button>\n * </Tooltip>\n * ```\n */\n styles?: AntdTooltipProps['styles'];\n}\n\nconst placementMap: Record<TooltipPlacement, AntdTooltipProps['placement']> = {\n auto: 'top',\n 'auto-start': 'topLeft',\n 'auto-end': 'topRight',\n top: 'top',\n 'top-start': 'topLeft',\n 'top-end': 'topRight',\n bottom: 'bottom',\n 'bottom-start': 'bottomLeft',\n 'bottom-end': 'bottomRight',\n right: 'right',\n 'right-start': 'rightTop',\n 'right-end': 'rightBottom',\n left: 'left',\n 'left-start': 'leftTop',\n 'left-end': 'leftBottom',\n};\n\nconst Tooltip = ({\n children,\n title,\n hideTooltip = false,\n delayShow = false,\n whiteSpace = 'initial',\n placement = 'top',\n className,\n shortcuts,\n open,\n onOpenChange,\n color,\n styles,\n}: TooltipProps) => {\n const os = useOS();\n const mappedShortcuts = useMemo(\n () => (shortcuts ? mapShortcutKeys(shortcuts, os) : undefined),\n [shortcuts, os]\n );\n const tooltipPlacement = placementMap[placement];\n const shortcutKeys = useMemo(() => {\n if (!mappedShortcuts) return [];\n const counts: Record<string, number> = {};\n return mappedShortcuts.map((shortcut) => {\n counts[shortcut] = (counts[shortcut] ?? 0) + 1;\n return { id: `${shortcut}-${counts[shortcut]}`, label: shortcut };\n });\n }, [mappedShortcuts]);\n\n const tooltipContent = (\n <div className=\"flex items-center gap-2 w-full\">\n <span className=\"flex-1 min-w-0\">{title}</span>\n {shortcutKeys.length > 0 && (\n <span className=\"flex items-center gap-0.5 flex-shrink-0\">\n {shortcutKeys.map((shortcut) => (\n <kbd\n key={shortcut.id}\n className=\"inline-flex items-center justify-center min-w-[20px] h-5 px-1 rounded text-[11px] font-medium leading-none\"\n style={{\n backgroundColor: 'rgba(255, 255, 255, 0.1)',\n border: '1px solid rgba(255, 255, 255, 0.2)',\n color: 'rgba(255, 255, 255, 0.8)',\n }}\n >\n {shortcut.label}\n </kbd>\n ))}\n </span>\n )}\n </div>\n );\n\n const triggerNode = <span className={className}>{children}</span>;\n\n if (hideTooltip) {\n return triggerNode;\n }\n\n return (\n <AntdTooltip\n title={title ? tooltipContent : null}\n placement={tooltipPlacement}\n trigger={['hover']}\n mouseEnterDelay={delayShow ? 1 : 0}\n mouseLeaveDelay={0}\n color={color ?? '#101828'}\n open={open}\n onOpenChange={onOpenChange}\n classNames={{\n body: 'lax-tooltip-body-important-whitespace flex items-center justify-center',\n }}\n styles={{\n ...styles,\n body: ({\n ['--lax-tooltip-white-space' as string]: whiteSpace,\n borderRadius: 8,\n border: '1px solid #252525',\n boxShadow: '0 2px 4px rgba(0, 0, 0, 0.18)',\n color: '#fff',\n maxWidth: '40ch',\n fontSize: 12,\n fontWeight: 500,\n wordWrap: 'break-word',\n padding: '4px 8px',\n ...styles?.body,\n } as React.CSSProperties),\n }}\n >\n {triggerNode}\n </AntdTooltip>\n );\n};\n\nexport default Tooltip;"],"names":["placementMap","Tooltip","children","title","hideTooltip","delayShow","whiteSpace","placement","className","shortcuts","open","onOpenChange","color","styles","os","useOS","mappedShortcuts","useMemo","mapShortcutKeys","tooltipPlacement","shortcutKeys","counts","shortcut","tooltipContent","jsxs","jsx","triggerNode","AntdTooltip"],"mappings":"6JA6DA,MAAMA,EAAwE,CAC5E,KAAM,MACN,aAAc,UACd,WAAY,WACZ,IAAK,MACL,YAAa,UACb,UAAW,WACX,OAAQ,SACR,eAAgB,aAChB,aAAc,cACd,MAAO,QACP,cAAe,WACf,YAAa,cACb,KAAM,OACN,aAAc,UACd,WAAY,YACd,EAEMC,EAAU,CAAC,CACf,SAAAC,EACA,MAAAC,EACA,YAAAC,EAAc,GACd,UAAAC,EAAY,GACZ,WAAAC,EAAa,UACb,UAAAC,EAAY,MACZ,UAAAC,EACA,UAAAC,EACA,KAAAC,EACA,aAAAC,EACA,MAAAC,EACA,OAAAC,CACF,IAAoB,CAClB,MAAMC,EAAKC,EAAAA,MAAA,EACLC,EAAkBC,EAAAA,QACtB,IAAOR,EAAYS,EAAAA,gBAAgBT,EAAWK,CAAE,EAAI,OACpD,CAACL,EAAWK,CAAE,CAAA,EAEVK,EAAmBnB,EAAaO,CAAS,EACzCa,EAAeH,EAAAA,QAAQ,IAAM,CACjC,GAAI,CAACD,EAAiB,MAAO,CAAA,EAC7B,MAAMK,EAAiC,CAAA,EACvC,OAAOL,EAAgB,IAAKM,IAC1BD,EAAOC,CAAQ,GAAKD,EAAOC,CAAQ,GAAK,GAAK,EACtC,CAAE,GAAI,GAAGA,CAAQ,IAAID,EAAOC,CAAQ,CAAC,GAAI,MAAOA,CAAA,EACxD,CACH,EAAG,CAACN,CAAe,CAAC,EAEdO,EACJC,EAAAA,KAAC,MAAA,CAAI,UAAU,iCACb,SAAA,CAAAC,EAAAA,IAAC,OAAA,CAAK,UAAU,iBAAkB,SAAAtB,EAAM,EACvCiB,EAAa,OAAS,GACrBK,EAAAA,IAAC,OAAA,CAAK,UAAU,0CACb,SAAAL,EAAa,IAAKE,GACjBG,EAAAA,IAAC,MAAA,CAEC,UAAU,6GACV,MAAO,CACL,gBAAiB,2BACjB,OAAQ,qCACR,MAAO,0BAAA,EAGR,SAAAH,EAAS,KAAA,EARLA,EAAS,EAAA,CAUjB,CAAA,CACH,CAAA,EAEJ,EAGII,EAAcD,EAAAA,IAAC,OAAA,CAAK,UAAAjB,EAAuB,SAAAN,CAAA,CAAS,EAE1D,OAAIE,EACKsB,EAIPD,EAAAA,IAACE,EAAAA,QAAA,CACC,MAAOxB,EAAQoB,EAAiB,KAChC,UAAWJ,EACX,QAAS,CAAC,OAAO,EACjB,gBAAiBd,EAAY,EAAI,EACjC,gBAAiB,EACjB,MAAOO,GAAS,UAChB,KAAAF,EACA,aAAAC,EACA,WAAY,CACV,KAAM,wEAAA,EAER,OAAQ,CACN,GAAGE,EACH,KAAO,CACJ,4BAAwCP,EACzC,aAAc,EACd,OAAQ,oBACR,UAAW,gCACX,MAAO,OACP,SAAU,OACV,SAAU,GACV,WAAY,IACZ,SAAU,aACV,QAAS,UACT,GAAGO,GAAQ,IAAA,CACb,EAGD,SAAAa,CAAA,CAAA,CAGP"}
|
|
@@ -22,8 +22,8 @@ const v = {
|
|
|
22
22
|
}, C = ({
|
|
23
23
|
children: d,
|
|
24
24
|
title: a,
|
|
25
|
-
hideTooltip:
|
|
26
|
-
delayShow:
|
|
25
|
+
hideTooltip: f = !1,
|
|
26
|
+
delayShow: c = !1,
|
|
27
27
|
whiteSpace: g = "initial",
|
|
28
28
|
placement: b = "top",
|
|
29
29
|
className: x,
|
|
@@ -31,16 +31,16 @@ const v = {
|
|
|
31
31
|
open: h,
|
|
32
32
|
onOpenChange: u,
|
|
33
33
|
color: y,
|
|
34
|
-
styles:
|
|
34
|
+
styles: l
|
|
35
35
|
}) => {
|
|
36
|
-
const
|
|
37
|
-
() => r ? k(r,
|
|
38
|
-
[r,
|
|
36
|
+
const n = j(), i = m(
|
|
37
|
+
() => r ? k(r, n) : void 0,
|
|
38
|
+
[r, n]
|
|
39
39
|
), w = v[b], p = m(() => {
|
|
40
40
|
if (!i) return [];
|
|
41
41
|
const t = {};
|
|
42
42
|
return i.map((e) => (t[e] = (t[e] ?? 0) + 1, { id: `${e}-${t[e]}`, label: e }));
|
|
43
|
-
}, [i]), N = /* @__PURE__ */ S("div", { className: "flex items-center gap-2", children: [
|
|
43
|
+
}, [i]), N = /* @__PURE__ */ S("div", { className: "flex items-center gap-2 w-full", children: [
|
|
44
44
|
/* @__PURE__ */ o("span", { className: "flex-1 min-w-0", children: a }),
|
|
45
45
|
p.length > 0 && /* @__PURE__ */ o("span", { className: "flex items-center gap-0.5 flex-shrink-0", children: p.map((t) => /* @__PURE__ */ o(
|
|
46
46
|
"kbd",
|
|
@@ -56,13 +56,13 @@ const v = {
|
|
|
56
56
|
t.id
|
|
57
57
|
)) })
|
|
58
58
|
] }), s = /* @__PURE__ */ o("span", { className: x, children: d });
|
|
59
|
-
return
|
|
59
|
+
return f ? s : /* @__PURE__ */ o(
|
|
60
60
|
T,
|
|
61
61
|
{
|
|
62
62
|
title: a ? N : null,
|
|
63
63
|
placement: w,
|
|
64
64
|
trigger: ["hover"],
|
|
65
|
-
mouseEnterDelay:
|
|
65
|
+
mouseEnterDelay: c ? 1 : 0,
|
|
66
66
|
mouseLeaveDelay: 0,
|
|
67
67
|
color: y ?? "#101828",
|
|
68
68
|
open: h,
|
|
@@ -71,7 +71,7 @@ const v = {
|
|
|
71
71
|
body: "lax-tooltip-body-important-whitespace flex items-center justify-center"
|
|
72
72
|
},
|
|
73
73
|
styles: {
|
|
74
|
-
...
|
|
74
|
+
...l,
|
|
75
75
|
body: {
|
|
76
76
|
"--lax-tooltip-white-space": g,
|
|
77
77
|
borderRadius: 8,
|
|
@@ -83,7 +83,7 @@ const v = {
|
|
|
83
83
|
fontWeight: 500,
|
|
84
84
|
wordWrap: "break-word",
|
|
85
85
|
padding: "4px 8px",
|
|
86
|
-
...
|
|
86
|
+
...l?.body
|
|
87
87
|
}
|
|
88
88
|
},
|
|
89
89
|
children: s
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.es.js","sources":["../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMemo } from 'react';\nimport { Tooltip as AntdTooltip } from 'antd';\nimport type { TooltipProps as AntdTooltipProps } from 'antd';\nimport { mapShortcutKeys, useOS } from '../../hooks/useOS';\nimport './Tooltip.css';\n\nexport type TooltipPlacement =\n | 'auto'\n | 'auto-start'\n | 'auto-end'\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'left'\n | 'left-start'\n | 'left-end';\n\nexport interface TooltipProps {\n title: React.ReactNode;\n placement?: TooltipPlacement;\n children: React.ReactNode;\n className?: string;\n hideTooltip?: boolean;\n delayShow?: boolean;\n whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'initial' | 'inherit';\n /** Array of keyboard shortcut keys to display (e.g., ['Cmd', 'S'] or ['Ctrl', 'Enter']) */\n shortcuts?: string[];\n /** Controlled visibility state */\n open?: boolean;\n /** Callback fired when visibility changes */\n onOpenChange?: (open: boolean) => void;\n /**\n * Background color of the tooltip. Overrides the default dark background (`#101828`).\n * Accepts any valid CSS color value or an Ant Design preset color name.\n */\n color?: string;\n /**\n * Semantic inline styles for the tooltip's DOM nodes. Values are merged on top of\n * (and override) the component's built-in styling, so keys you omit keep their defaults.\n * `styles.body` targets the tooltip content box; `styles.root` targets the outer wrapper.\n *\n * @example\n * ```tsx\n * <Tooltip\n * color=\"#EAECF0\"\n * styles={{ body: { borderRadius: 10, padding: \"12px\", boxShadow: \"none\" } }}\n * >\n * <button>Hover me</button>\n * </Tooltip>\n * ```\n */\n styles?: AntdTooltipProps['styles'];\n}\n\nconst placementMap: Record<TooltipPlacement, AntdTooltipProps['placement']> = {\n auto: 'top',\n 'auto-start': 'topLeft',\n 'auto-end': 'topRight',\n top: 'top',\n 'top-start': 'topLeft',\n 'top-end': 'topRight',\n bottom: 'bottom',\n 'bottom-start': 'bottomLeft',\n 'bottom-end': 'bottomRight',\n right: 'right',\n 'right-start': 'rightTop',\n 'right-end': 'rightBottom',\n left: 'left',\n 'left-start': 'leftTop',\n 'left-end': 'leftBottom',\n};\n\nconst Tooltip = ({\n children,\n title,\n hideTooltip = false,\n delayShow = false,\n whiteSpace = 'initial',\n placement = 'top',\n className,\n shortcuts,\n open,\n onOpenChange,\n color,\n styles,\n}: TooltipProps) => {\n const os = useOS();\n const mappedShortcuts = useMemo(\n () => (shortcuts ? mapShortcutKeys(shortcuts, os) : undefined),\n [shortcuts, os]\n );\n const tooltipPlacement = placementMap[placement];\n const shortcutKeys = useMemo(() => {\n if (!mappedShortcuts) return [];\n const counts: Record<string, number> = {};\n return mappedShortcuts.map((shortcut) => {\n counts[shortcut] = (counts[shortcut] ?? 0) + 1;\n return { id: `${shortcut}-${counts[shortcut]}`, label: shortcut };\n });\n }, [mappedShortcuts]);\n\n const tooltipContent = (\n <div className=\"flex items-center gap-2\">\n <span className=\"flex-1 min-w-0\">{title}</span>\n {shortcutKeys.length > 0 && (\n <span className=\"flex items-center gap-0.5 flex-shrink-0\">\n {shortcutKeys.map((shortcut) => (\n <kbd\n key={shortcut.id}\n className=\"inline-flex items-center justify-center min-w-[20px] h-5 px-1 rounded text-[11px] font-medium leading-none\"\n style={{\n backgroundColor: 'rgba(255, 255, 255, 0.1)',\n border: '1px solid rgba(255, 255, 255, 0.2)',\n color: 'rgba(255, 255, 255, 0.8)',\n }}\n >\n {shortcut.label}\n </kbd>\n ))}\n </span>\n )}\n </div>\n );\n\n const triggerNode = <span className={className}>{children}</span>;\n\n if (hideTooltip) {\n return triggerNode;\n }\n\n return (\n <AntdTooltip\n title={title ? tooltipContent : null}\n placement={tooltipPlacement}\n trigger={['hover']}\n mouseEnterDelay={delayShow ? 1 : 0}\n mouseLeaveDelay={0}\n color={color ?? '#101828'}\n open={open}\n onOpenChange={onOpenChange}\n classNames={{\n body: 'lax-tooltip-body-important-whitespace flex items-center justify-center',\n }}\n styles={{\n ...styles,\n body: ({\n ['--lax-tooltip-white-space' as string]: whiteSpace,\n borderRadius: 8,\n border: '1px solid #252525',\n boxShadow: '0 2px 4px rgba(0, 0, 0, 0.18)',\n color: '#fff',\n maxWidth: '40ch',\n fontSize: 12,\n fontWeight: 500,\n wordWrap: 'break-word',\n padding: '4px 8px',\n ...styles?.body,\n } as React.CSSProperties),\n }}\n >\n {triggerNode}\n </AntdTooltip>\n );\n};\n\nexport default Tooltip;"],"names":["placementMap","Tooltip","children","title","hideTooltip","delayShow","whiteSpace","placement","className","shortcuts","open","onOpenChange","color","styles","os","useOS","mappedShortcuts","useMemo","mapShortcutKeys","tooltipPlacement","shortcutKeys","counts","shortcut","tooltipContent","jsxs","jsx","triggerNode","AntdTooltip"],"mappings":";;;;;AA6DA,MAAMA,IAAwE;AAAA,EAC5E,MAAM;AAAA,EACN,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,KAAK;AAAA,EACL,aAAa;AAAA,EACb,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,OAAO;AAAA,EACP,eAAe;AAAA,EACf,aAAa;AAAA,EACb,MAAM;AAAA,EACN,cAAc;AAAA,EACd,YAAY;AACd,GAEMC,IAAU,CAAC;AAAA,EACf,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AACF,MAAoB;AAClB,QAAMC,IAAKC,EAAA,GACLC,IAAkBC;AAAA,IACtB,MAAOR,IAAYS,EAAgBT,GAAWK,CAAE,IAAI;AAAA,IACpD,CAACL,GAAWK,CAAE;AAAA,EAAA,GAEVK,IAAmBnB,EAAaO,CAAS,GACzCa,IAAeH,EAAQ,MAAM;AACjC,QAAI,CAACD,EAAiB,QAAO,CAAA;AAC7B,UAAMK,IAAiC,CAAA;AACvC,WAAOL,EAAgB,IAAI,CAACM,OAC1BD,EAAOC,CAAQ,KAAKD,EAAOC,CAAQ,KAAK,KAAK,GACtC,EAAE,IAAI,GAAGA,CAAQ,IAAID,EAAOC,CAAQ,CAAC,IAAI,OAAOA,EAAA,EACxD;AAAA,EACH,GAAG,CAACN,CAAe,CAAC,GAEdO,IACJ,gBAAAC,EAAC,OAAA,EAAI,WAAU,
|
|
1
|
+
{"version":3,"file":"Tooltip.es.js","sources":["../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMemo } from 'react';\nimport { Tooltip as AntdTooltip } from 'antd';\nimport type { TooltipProps as AntdTooltipProps } from 'antd';\nimport { mapShortcutKeys, useOS } from '../../hooks/useOS';\nimport './Tooltip.css';\n\nexport type TooltipPlacement =\n | 'auto'\n | 'auto-start'\n | 'auto-end'\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'left'\n | 'left-start'\n | 'left-end';\n\nexport interface TooltipProps {\n title: React.ReactNode;\n placement?: TooltipPlacement;\n children: React.ReactNode;\n className?: string;\n hideTooltip?: boolean;\n delayShow?: boolean;\n whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'initial' | 'inherit';\n /** Array of keyboard shortcut keys to display (e.g., ['Cmd', 'S'] or ['Ctrl', 'Enter']) */\n shortcuts?: string[];\n /** Controlled visibility state */\n open?: boolean;\n /** Callback fired when visibility changes */\n onOpenChange?: (open: boolean) => void;\n /**\n * Background color of the tooltip. Overrides the default dark background (`#101828`).\n * Accepts any valid CSS color value or an Ant Design preset color name.\n */\n color?: string;\n /**\n * Semantic inline styles for the tooltip's DOM nodes. Values are merged on top of\n * (and override) the component's built-in styling, so keys you omit keep their defaults.\n * `styles.body` targets the tooltip content box; `styles.root` targets the outer wrapper.\n *\n * @example\n * ```tsx\n * <Tooltip\n * color=\"#EAECF0\"\n * styles={{ body: { borderRadius: 10, padding: \"12px\", boxShadow: \"none\" } }}\n * >\n * <button>Hover me</button>\n * </Tooltip>\n * ```\n */\n styles?: AntdTooltipProps['styles'];\n}\n\nconst placementMap: Record<TooltipPlacement, AntdTooltipProps['placement']> = {\n auto: 'top',\n 'auto-start': 'topLeft',\n 'auto-end': 'topRight',\n top: 'top',\n 'top-start': 'topLeft',\n 'top-end': 'topRight',\n bottom: 'bottom',\n 'bottom-start': 'bottomLeft',\n 'bottom-end': 'bottomRight',\n right: 'right',\n 'right-start': 'rightTop',\n 'right-end': 'rightBottom',\n left: 'left',\n 'left-start': 'leftTop',\n 'left-end': 'leftBottom',\n};\n\nconst Tooltip = ({\n children,\n title,\n hideTooltip = false,\n delayShow = false,\n whiteSpace = 'initial',\n placement = 'top',\n className,\n shortcuts,\n open,\n onOpenChange,\n color,\n styles,\n}: TooltipProps) => {\n const os = useOS();\n const mappedShortcuts = useMemo(\n () => (shortcuts ? mapShortcutKeys(shortcuts, os) : undefined),\n [shortcuts, os]\n );\n const tooltipPlacement = placementMap[placement];\n const shortcutKeys = useMemo(() => {\n if (!mappedShortcuts) return [];\n const counts: Record<string, number> = {};\n return mappedShortcuts.map((shortcut) => {\n counts[shortcut] = (counts[shortcut] ?? 0) + 1;\n return { id: `${shortcut}-${counts[shortcut]}`, label: shortcut };\n });\n }, [mappedShortcuts]);\n\n const tooltipContent = (\n <div className=\"flex items-center gap-2 w-full\">\n <span className=\"flex-1 min-w-0\">{title}</span>\n {shortcutKeys.length > 0 && (\n <span className=\"flex items-center gap-0.5 flex-shrink-0\">\n {shortcutKeys.map((shortcut) => (\n <kbd\n key={shortcut.id}\n className=\"inline-flex items-center justify-center min-w-[20px] h-5 px-1 rounded text-[11px] font-medium leading-none\"\n style={{\n backgroundColor: 'rgba(255, 255, 255, 0.1)',\n border: '1px solid rgba(255, 255, 255, 0.2)',\n color: 'rgba(255, 255, 255, 0.8)',\n }}\n >\n {shortcut.label}\n </kbd>\n ))}\n </span>\n )}\n </div>\n );\n\n const triggerNode = <span className={className}>{children}</span>;\n\n if (hideTooltip) {\n return triggerNode;\n }\n\n return (\n <AntdTooltip\n title={title ? tooltipContent : null}\n placement={tooltipPlacement}\n trigger={['hover']}\n mouseEnterDelay={delayShow ? 1 : 0}\n mouseLeaveDelay={0}\n color={color ?? '#101828'}\n open={open}\n onOpenChange={onOpenChange}\n classNames={{\n body: 'lax-tooltip-body-important-whitespace flex items-center justify-center',\n }}\n styles={{\n ...styles,\n body: ({\n ['--lax-tooltip-white-space' as string]: whiteSpace,\n borderRadius: 8,\n border: '1px solid #252525',\n boxShadow: '0 2px 4px rgba(0, 0, 0, 0.18)',\n color: '#fff',\n maxWidth: '40ch',\n fontSize: 12,\n fontWeight: 500,\n wordWrap: 'break-word',\n padding: '4px 8px',\n ...styles?.body,\n } as React.CSSProperties),\n }}\n >\n {triggerNode}\n </AntdTooltip>\n );\n};\n\nexport default Tooltip;"],"names":["placementMap","Tooltip","children","title","hideTooltip","delayShow","whiteSpace","placement","className","shortcuts","open","onOpenChange","color","styles","os","useOS","mappedShortcuts","useMemo","mapShortcutKeys","tooltipPlacement","shortcutKeys","counts","shortcut","tooltipContent","jsxs","jsx","triggerNode","AntdTooltip"],"mappings":";;;;;AA6DA,MAAMA,IAAwE;AAAA,EAC5E,MAAM;AAAA,EACN,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,KAAK;AAAA,EACL,aAAa;AAAA,EACb,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,OAAO;AAAA,EACP,eAAe;AAAA,EACf,aAAa;AAAA,EACb,MAAM;AAAA,EACN,cAAc;AAAA,EACd,YAAY;AACd,GAEMC,IAAU,CAAC;AAAA,EACf,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AACF,MAAoB;AAClB,QAAMC,IAAKC,EAAA,GACLC,IAAkBC;AAAA,IACtB,MAAOR,IAAYS,EAAgBT,GAAWK,CAAE,IAAI;AAAA,IACpD,CAACL,GAAWK,CAAE;AAAA,EAAA,GAEVK,IAAmBnB,EAAaO,CAAS,GACzCa,IAAeH,EAAQ,MAAM;AACjC,QAAI,CAACD,EAAiB,QAAO,CAAA;AAC7B,UAAMK,IAAiC,CAAA;AACvC,WAAOL,EAAgB,IAAI,CAACM,OAC1BD,EAAOC,CAAQ,KAAKD,EAAOC,CAAQ,KAAK,KAAK,GACtC,EAAE,IAAI,GAAGA,CAAQ,IAAID,EAAOC,CAAQ,CAAC,IAAI,OAAOA,EAAA,EACxD;AAAA,EACH,GAAG,CAACN,CAAe,CAAC,GAEdO,IACJ,gBAAAC,EAAC,OAAA,EAAI,WAAU,kCACb,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,kBAAkB,UAAAtB,GAAM;AAAA,IACvCiB,EAAa,SAAS,KACrB,gBAAAK,EAAC,QAAA,EAAK,WAAU,2CACb,UAAAL,EAAa,IAAI,CAACE,MACjB,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,iBAAiB;AAAA,UACjB,QAAQ;AAAA,UACR,OAAO;AAAA,QAAA;AAAA,QAGR,UAAAH,EAAS;AAAA,MAAA;AAAA,MARLA,EAAS;AAAA,IAAA,CAUjB,EAAA,CACH;AAAA,EAAA,GAEJ,GAGII,IAAc,gBAAAD,EAAC,QAAA,EAAK,WAAAjB,GAAuB,UAAAN,EAAA,CAAS;AAE1D,SAAIE,IACKsB,IAIP,gBAAAD;AAAA,IAACE;AAAAA,IAAA;AAAA,MACC,OAAOxB,IAAQoB,IAAiB;AAAA,MAChC,WAAWJ;AAAA,MACX,SAAS,CAAC,OAAO;AAAA,MACjB,iBAAiBd,IAAY,IAAI;AAAA,MACjC,iBAAiB;AAAA,MACjB,OAAOO,KAAS;AAAA,MAChB,MAAAF;AAAA,MACA,cAAAC;AAAA,MACA,YAAY;AAAA,QACV,MAAM;AAAA,MAAA;AAAA,MAER,QAAQ;AAAA,QACN,GAAGE;AAAA,QACH,MAAO;AAAA,UACJ,6BAAwCP;AAAA,UACzC,cAAc;AAAA,UACd,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,OAAO;AAAA,UACP,UAAU;AAAA,UACV,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,SAAS;AAAA,UACT,GAAGO,GAAQ;AAAA,QAAA;AAAA,MACb;AAAA,MAGD,UAAAa;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|